/* Brote — caso de marca de ejemplo (negocio ficticio) · Emanuel Marketing */
:root{--hoja:#1F5E3A;--hoja2:#2C7A4D;--fucsia:#E23E7B;--crema:#FBF3E6;--crema2:#F3E6D0;--tierra:#3A2A22;--lima:#C9DB5A;--mut:#7B6C5E;--line:#E6D8C2;--acc:#E23E7B;--e:cubic-bezier(.22,1,.36,1)}
body{background:var(--crema);color:var(--tierra);font-family:'DM Sans',system-ui,sans-serif;font-size:17px;line-height:1.6}
h1,h2,h3,h4{font-family:'Bricolage Grotesque','DM Sans',system-ui,sans-serif;font-weight:800;line-height:1.02;margin:0;letter-spacing:-.03em}
a{color:inherit}button{font:inherit;cursor:pointer}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}
.cap{display:inline-block;font:700 12.5px 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--fucsia)}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--hoja);color:#fff;border:0;border-radius:999px;padding:14px 26px;font-weight:700;font-size:15.5px;text-decoration:none;transition:transform .3s var(--e),background .3s}
.btn:hover{background:var(--hoja2);transform:translateY(-2px)}.btn.f{background:var(--fucsia)}.btn.f:hover{background:#C92E68}
.btn.o{background:transparent;color:var(--tierra);box-shadow:inset 0 0 0 2px var(--tierra)}.btn.o:hover{background:var(--tierra);color:#fff}
.btn.sm{padding:10px 18px;font-size:14px}
header.top{position:sticky;top:0;z-index:60;background:rgba(251,243,230,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.top .in{display:flex;align-items:center;gap:22px;height:68px}
.lg{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.04em;line-height:1}
.lg svg{width:1.1em;height:1.1em}.lg b{font-weight:800}
header.top .lg{font-size:30px}
header.top nav{margin-left:auto;display:flex;gap:4px}
header.top nav a{text-decoration:none;font-weight:600;font-size:15px;padding:9px 15px;border-radius:99px;transition:background .25s}
header.top nav a:hover{background:var(--crema2)}header.top nav a.on{background:var(--tierra);color:#fff}
.sec{padding:90px 0}.sec h2{font-size:clamp(34px,5vw,62px)}
.head{margin-bottom:40px;max-width:720px}.head p{color:var(--mut);margin:12px 0 0;font-size:18px}
/* hero */
.hero{padding:60px 0 80px;overflow:hidden}
.hero .g{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center}
.hero h1{font-size:clamp(48px,7.4vw,108px);margin:14px 0 22px}
.hero h1 em{font-style:normal;color:var(--fucsia)}
.hero p.lead{font-size:20px;color:var(--mut);max-width:520px;margin:0 0 28px}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap}
.logocard{position:relative;aspect-ratio:1/1;border-radius:44px;background:var(--hoja);display:grid;place-items:center;color:var(--crema);overflow:hidden;isolation:isolate}
.logocard .lg{font-size:clamp(56px,9vw,120px)}
.logocard .lg svg path{transform-origin:20px 34px}
.logocard:before,.logocard:after{content:"";position:absolute;border-radius:50%;z-index:-1;animation:bl 9s ease-in-out infinite alternate}
.logocard:before{width:60%;aspect-ratio:1;background:var(--fucsia);right:-18%;top:-16%}
.logocard:after{width:46%;aspect-ratio:1;background:var(--lima);left:-12%;bottom:-14%;animation-delay:-4s}
@keyframes bl{to{transform:translate(-14px,18px) scale(1.08)}}
.sp1{transform-origin:20px 34px;animation:grow 3.2s var(--e) both}
@keyframes grow{from{transform:scale(0) rotate(-14deg)}}
/* logo */
.lgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lbox{border-radius:28px;aspect-ratio:1/1;display:grid;place-items:center;position:relative;overflow:hidden}
.lbox .lg{font-size:clamp(28px,3.4vw,44px)}.lbox small{position:absolute;left:16px;bottom:12px;font-size:12px;opacity:.75;font-weight:600}
.lbox.sym .lg svg{width:84px;height:84px}
.cons{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cons .box{background:#fff;border:1px solid var(--line);border-radius:28px;padding:30px}
.cons h4{font-size:22px;margin-bottom:8px}.cons p{margin:0;color:var(--mut)}
/* paleta */
.pal{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.sw{border:0;border-radius:28px;min-height:260px;padding:20px;text-align:left;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .4s var(--e);position:relative}
.sw:hover{transform:translateY(-8px) rotate(-1deg)}
.sw b{font:800 22px 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}.sw span{font-size:13px;opacity:.8;font-weight:600}
.sw i{position:absolute;right:16px;top:16px;font-style:normal;font-size:12px;font-weight:700;background:rgba(255,255,255,.25);border-radius:99px;padding:4px 10px;opacity:0;transition:opacity .25s}.sw:hover i,.sw.ok i{opacity:1}
.prop{display:flex;height:22px;border-radius:99px;overflow:hidden;margin-top:26px}.prop span{display:block;height:100%}
.propl{display:flex;justify-content:space-between;font-size:13.5px;color:var(--mut);margin-top:8px;flex-wrap:wrap;gap:8px}
/* tipografía */
.typ{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.tb{background:#fff;border:1px solid var(--line);border-radius:28px;padding:34px}
.tb .big{font:800 clamp(52px,8vw,110px)/.95 'Bricolage Grotesque',sans-serif;letter-spacing:-.04em;color:var(--hoja)}
.tb .meta{font-size:14px;color:var(--mut);margin-bottom:10px;font-weight:600}
.tb.d{background:var(--tierra);color:var(--crema)}.tb.d .big{color:var(--lima);font-family:'DM Sans',sans-serif;font-weight:500;letter-spacing:-.02em;font-size:clamp(40px,5vw,66px)}
.tb.d .meta{color:#CBB9A5}
/* voz */
.voz{display:grid;gap:14px}
.voz .r{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.voz .y,.voz .n{border-radius:24px;padding:24px 26px;font-size:19px}
.voz .y{background:var(--lima);color:#2A3510}.voz .n{background:#fff;border:1.5px dashed #CDB99A;color:var(--mut);text-decoration:line-through;text-decoration-color:rgba(226,62,123,.6)}
.voz small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin-bottom:6px;text-decoration:none}
/* plantillas */
.tpl{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 22px;align-items:start}.tpl>.car-wrap{grid-column:1/-1}.car-wrap .car{max-width:760px}
.ph{border-radius:22px;overflow:hidden;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:20px;box-shadow:0 30px 40px -30px rgba(58,42,34,.5)}
.ph.sq{aspect-ratio:1/1}.ph.st{aspect-ratio:9/16}
.ph .tt{font:800 clamp(22px,2.6vw,34px)/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em}
.ph .lg{font-size:20px}
.tl{margin-top:12px;font-size:13.5px;color:var(--mut);font-weight:600}
.pill{display:inline-block;background:rgba(255,255,255,.22);padding:5px 12px;border-radius:99px;font-size:12.5px;font-weight:700}
.car{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.car .ph{aspect-ratio:4/5;padding:18px}.car .ph .tt{font-size:clamp(20px,2.4vw,30px)}.car{gap:14px}
.leafbg{position:absolute;right:-30px;bottom:-30px;width:150px;opacity:.18}
/* aplicaciones */
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.app{border-radius:30px;min-height:360px;position:relative;overflow:hidden;display:grid;place-items:center;padding:30px}
.app small{position:absolute;left:20px;bottom:16px;font-size:12.5px;font-weight:700;opacity:.75}
.tag{width:150px;background:var(--crema);border-radius:14px 14px 22px 22px;padding:46px 14px 18px;text-align:center;position:relative;box-shadow:0 22px 30px -20px rgba(0,0,0,.45);transform:rotate(-5deg);animation:sw 5s ease-in-out infinite alternate}
@keyframes sw{to{transform:rotate(4deg)}}
.tag:before{content:"";position:absolute;left:50%;top:14px;width:16px;height:16px;border-radius:50%;background:var(--hoja);transform:translateX(-50%);box-shadow:inset 0 0 0 4px #fff}
.tag .lg{font-size:26px;color:var(--hoja)}.tag p{font-size:11.5px;margin:10px 0 0;color:var(--tierra);line-height:1.35}
.bag{width:190px;height:240px;background:#D9B98A;border-radius:6px 6px 14px 14px;position:relative;display:grid;place-items:center;box-shadow:0 22px 30px -18px rgba(0,0,0,.5)}
.bag:before{content:"";position:absolute;left:34px;right:34px;top:-34px;height:60px;border:7px solid #B8955F;border-bottom:0;border-radius:40px 40px 0 0}
.bag .lg{font-size:36px;color:var(--hoja)}
.gond{width:min(100%,260px);background:#fff;border-radius:18px;padding:22px;box-shadow:0 22px 30px -20px rgba(0,0,0,.4);transform:rotate(2deg)}
.gond .lg{font-size:20px;color:var(--hoja)}.gond h4{font-size:26px;margin:12px 0 10px}.gond ul{list-style:none;padding:0;margin:0;font-size:14.5px}.gond li{display:flex;gap:8px;padding:5px 0;border-top:1px solid var(--line)}
/* reglas */
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rl{background:#fff;border:1px solid var(--line);border-radius:26px;padding:26px}
.rl h4{font-size:21px;margin-bottom:8px}.rl p{margin:0;color:var(--mut);font-size:15.5px}
.rl .dem{height:96px;border-radius:16px;display:grid;place-items:center;margin-bottom:16px;background:var(--crema2)}
.cta{background:var(--tierra);color:var(--crema);border-radius:40px;padding:60px;text-align:center}
.cta h2{color:#fff;margin-bottom:14px}.cta p{color:#CBB9A5;max-width:560px;margin:0 auto 26px}
/* plan */
.plhead{padding:44px 0 26px}.plhead h1{font-size:clamp(40px,6vw,78px)}
.brief{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-bottom:26px}
.bx{background:#fff;border:1px solid var(--line);border-radius:26px;padding:26px}
.bx h4{font:800 13px 'DM Sans';letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.bx p{margin:0}.bx .big{font:800 26px/1.15 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.chips{display:flex;gap:8px;flex-wrap:wrap}.chips span{background:var(--crema2);border-radius:99px;padding:6px 14px;font-size:14px;font-weight:600}
.dist{display:flex;height:26px;border-radius:99px;overflow:hidden;margin:6px 0 14px}.dist span{display:block;height:100%;transition:width .6s var(--e)}
.leg{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.leg button{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:8px 15px;font-weight:700;font-size:14px;transition:all .25s}
.leg button i{width:12px;height:12px;border-radius:50%}.leg button.on{background:var(--tierra);color:#fff;border-color:var(--tierra)}
.pl{display:grid;grid-template-columns:1fr 410px;gap:26px;align-items:start;padding-bottom:90px}
.cal{background:#fff;border:1px solid var(--line);border-radius:28px;padding:18px}
.cal .mh{display:flex;justify-content:space-between;align-items:center;padding:6px 8px 14px}.cal .mh h3{font-size:28px}
.cal .gr{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .dw{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);text-align:center;padding:4px 0 6px}
.cd{min-height:104px;border-radius:14px;background:var(--crema);padding:7px;display:flex;flex-direction:column;gap:5px;position:relative;transition:opacity .3s}
.cd.o{background:transparent}.cd .n{font-size:12.5px;font-weight:700;color:var(--mut)}
.cd button{border:0;border-radius:10px;padding:6px 7px;text-align:left;font-size:12px;line-height:1.2;font-weight:700;transition:transform .25s var(--e),box-shadow .25s;width:100%}
.cd button:hover{transform:scale(1.04);box-shadow:0 10px 18px -10px rgba(0,0,0,.5)}.cd button.sel{outline:3px solid var(--tierra);outline-offset:1px}
.cd button small{display:block;font-size:10.5px;opacity:.8;font-weight:600;margin-top:2px}
.cd.dim button{opacity:.18;pointer-events:none}
.det{position:sticky;top:90px;background:#fff;border:1px solid var(--line);border-radius:28px;padding:26px;max-height:calc(100vh - 110px);overflow:auto}
.det .tg{display:inline-block;padding:5px 12px;border-radius:99px;font:800 12px 'DM Sans';letter-spacing:.1em;text-transform:uppercase}
.det h3{font-size:28px;margin:12px 0 4px}.det .mt{color:var(--mut);font-size:14.5px;margin-bottom:12px}
.det h5{font:800 12px 'DM Sans';letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:18px 0 8px}
.det p{margin:0 0 6px;font-size:15.5px}.det ul{margin:0;padding-left:18px;font-size:15.5px}.det li{margin-bottom:4px}
.hk{list-style:none;padding:0!important}.hk li{display:flex;gap:10px;align-items:flex-start;background:var(--crema);border-radius:14px;padding:10px 12px;margin-bottom:6px}
.hk li.pick{background:var(--lima);color:#2A3510;font-weight:600}.hk li b{flex:none;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding-top:3px}
.prodg{display:grid;gap:6px;font-size:14.5px}.prodg div{display:grid;grid-template-columns:90px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--line)}.prodg b{color:var(--mut)}
.empty{color:var(--mut);text-align:center;padding:50px 10px}
.hdn{display:none}
@media(max-width:980px){.hero .g,.cons,.typ,.brief,.pl{grid-template-columns:1fr}.lgrid{grid-template-columns:1fr 1fr}.pal{grid-template-columns:repeat(2,1fr)}.sw:last-child{grid-column:1/-1}.tpl,.apps,.rules{grid-template-columns:1fr 1fr}.tpl>.car-wrap{grid-column:1/-1}.det{position:static;max-height:none}.voz .r{grid-template-columns:1fr}.cta{padding:36px 22px}.sec{padding:60px 0}}
@media(max-width:620px){.tpl,.apps,.rules{grid-template-columns:1fr}.cd{min-height:74px;padding:4px}.cd button{font-size:0;padding:0;height:26px}.cd button small{display:none}.cd .n{font-size:11px}.cal{padding:10px}.cal .gr{gap:3px}header.top nav a{padding:8px 10px;font-size:14px}.lbox .lg{font-size:26px}}