/* Pestaña Inicio · mundo chicle */
.hero{background:var(--chicle);position:relative;overflow:hidden;border-bottom:2.5px solid var(--copa)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(36px,6vw,88px) clamp(72px,9vw,120px)}
.hero h1{font-weight:800;font-size:clamp(58px,9.4vw,146px);line-height:.86;letter-spacing:-.045em;margin:.15em 0 .22em}
.hero h1 em{font-style:normal;position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:.13em;background:var(--chicle-fuerte);transform:rotate(-3deg);border-radius:9px;animation:tacha .7s .3s cubic-bezier(.6,0,.2,1) both;transform-origin:left}
@keyframes tacha{from{transform:rotate(-3deg) scaleX(0)}to{transform:rotate(-3deg) scaleX(1)}}
.lead{font-size:clamp(18px,1.7vw,22px);max-width:36ch;margin:0 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:14px}
.hola{font-size:clamp(28px,3.4vw,44px);display:inline-block;transform:rotate(-4deg)}
.sellos-mini{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0;margin:26px 0 0;font-weight:600;font-size:14px}
.sellos-mini li{display:flex;align-items:center;gap:6px}
.foto-tio{position:relative;justify-self:center;width:min(100%,460px)}
.foto-tio .marco{border:3px solid var(--copa);border-radius:48% 52% 44% 56%/55% 45% 55% 45%;overflow:hidden;box-shadow:12px 12px 0 var(--copa);transform:rotate(3deg);background:var(--chicle)}
.foto-tio .globo{position:absolute;left:-12%;bottom:6%;background:var(--blanco);border:2.5px solid var(--copa);border-radius:20px;padding:12px 16px;font-weight:600;font-size:15px;max-width:230px;box-shadow:4px 4px 0 var(--copa);transform:rotate(-3deg)}
.foto-tio .globo::after{content:"";position:absolute;right:26px;top:-13px;width:20px;height:20px;background:var(--blanco);border-left:2.5px solid var(--copa);border-top:2.5px solid var(--copa);transform:rotate(45deg)}
.foto-tio .sello{position:absolute;right:-6%;top:-4%;width:118px;height:118px;border-radius:50%;background:var(--rotulo);border:2.5px solid var(--copa);display:grid;place-items:center;text-align:center;font-weight:800;font-size:15px;line-height:1.05;animation:rueda 18s linear infinite}
.foto-tio .sello span{animation:rueda 18s linear infinite reverse}
@keyframes rueda{to{transform:rotate(360deg)}}
.goteo{position:absolute;left:0;right:0;bottom:-2px;height:48px;width:100%;color:var(--papel)}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .foto-tio{width:min(78%,360px)}
  .foto-tio .globo{left:-8%;font-size:14px;max-width:190px}
  .foto-tio .sello{width:92px;height:92px;font-size:12px;right:-4%}
}

.ticker{background:var(--copa);color:var(--rotulo);overflow:hidden}
.ticker .pista{display:flex;gap:44px;white-space:nowrap;padding-block:14px;font-family:var(--sticker);font-size:22px;letter-spacing:.03em;animation:corre 34s linear infinite;width:max-content}
.ticker .pista span::after{content:"✦";margin-left:44px;color:var(--chicle-fuerte)}
@keyframes corre{to{transform:translateX(-50%)}}

.ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.idea{border:2.5px solid var(--copa);border-radius:var(--r);padding:28px;transition:transform .2s ease}
.idea.i1{background:var(--menta)} .idea.i2{background:var(--rotulo);transform:rotate(-1.2deg)} .idea.i3{background:var(--chicle)}
.idea:hover{transform:rotate(0) translateY(-6px)}
.idea h3{font-size:30px;line-height:1;letter-spacing:-.02em;margin:18px 0 10px}
.idea p{margin:0}
.icono{width:64px;height:64px}
@media (max-width:860px){ .ideas{grid-template-columns:1fr} .idea.i2{transform:none} }

.tio{background:var(--turquesa);color:var(--blanco);border-block:2.5px solid var(--copa)}
.tio .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.tio-foto{margin:0;position:relative}
.tio-foto img{border:3px solid var(--copa);border-radius:28px;box-shadow:10px 10px 0 var(--copa);aspect-ratio:4/3.4;object-fit:cover;width:100%;transform:rotate(-2deg)}
.tio-foto figcaption{position:absolute;right:-8px;bottom:-14px;font-size:clamp(26px,3vw,40px);transform:rotate(-4deg)}
.tio-txt h2{font-size:clamp(34px,4.4vw,60px);line-height:.95;letter-spacing:-.035em;margin:10px 0 18px}
.tio-txt p{max-width:52ch;margin:0 0 14px}
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}
.cifras div{border:2.5px solid var(--copa);border-radius:18px;background:var(--papel);color:var(--copa);padding:12px 14px}
.cifras dt{font-size:13px;color:var(--tinta-suave)}
.cifras dd{margin:0;font-weight:800;font-size:clamp(18px,1.9vw,24px);line-height:1.1}
@media (max-width:860px){ .tio .wrap{grid-template-columns:1fr} .cifras{grid-template-columns:1fr 1fr 1fr} }
@media (max-width:480px){ .cifras{grid-template-columns:1fr} }

.chips-plan{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.chip{font:800 17px/1 var(--display);padding:16px 22px;border-radius:999px;border:2.5px solid var(--papel);background:transparent;color:var(--papel);cursor:pointer;transition:background .2s,color .2s}
.chip[aria-pressed="true"]{background:var(--rotulo);color:var(--copa);border-color:var(--rotulo)}
.resultado{display:grid;grid-template-columns:.9fr 1.1fr;border:2.5px solid var(--papel);border-radius:28px;overflow:hidden;min-height:320px;transition:background .35s ease}
.resultado .visual{display:grid;place-items:center;border-right:2.5px solid var(--papel)}
.resultado .visual svg{width:min(68%,250px);filter:drop-shadow(8px 8px 0 var(--copa));transition:transform .5s cubic-bezier(.2,1.6,.4,1)}
.resultado .texto{padding:clamp(24px,4vw,48px);color:var(--copa);display:flex;flex-direction:column;justify-content:center}
.resultado h3{font-size:clamp(34px,4vw,54px);line-height:.95;letter-spacing:-.03em;margin:10px 0 14px}
.resultado p{margin:0 0 24px;max-width:42ch}
@media (max-width:860px){ .resultado{grid-template-columns:1fr} .resultado .visual{border-right:0;border-bottom:2.5px solid var(--papel);min-height:200px} }

.rejilla-dest{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1000px){ .rejilla-dest{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .rejilla-dest{grid-template-columns:1fr} }
.dest{border:2.5px solid var(--copa);border-radius:var(--r);background:var(--blanco);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.dest:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--copa)}
.dest .f{aspect-ratio:1/.8;display:grid;place-items:center;border-bottom:2.5px solid var(--copa)}
.dest .f svg{width:50%;filter:drop-shadow(5px 5px 0 var(--copa))}
.dest .t{padding:14px 16px 16px;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.dest strong{font-size:18px;line-height:1.15}
.dest span{font-weight:800;font-variant-numeric:tabular-nums}

.como{background:var(--lima);border-block:2.5px solid var(--copa)}
.pasos-como{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:c}
.pasos-como li{background:var(--blanco);border:2.5px solid var(--copa);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:6px}
.pasos-como li::before{counter-increment:c;content:counter(c);font-family:var(--sticker);font-size:44px;line-height:1;color:var(--chicle-fuerte);-webkit-text-stroke:2px var(--copa);paint-order:stroke fill}
.pasos-como strong{font-size:22px;letter-spacing:-.02em}
.puertas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.puerta{border:2.5px solid var(--copa);border-radius:var(--r);padding:22px;text-decoration:none;display:flex;flex-direction:column;gap:4px;box-shadow:var(--sombra);transition:transform .15s,box-shadow .15s}
.puerta:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--copa)}
.puerta strong{font-size:32px;letter-spacing:-.03em;line-height:1}
.puerta strong::after{content:" →"}
.p-pedidos{background:var(--gomita)} .p-citas{background:var(--menta)} .p-kif{background:var(--magenta);color:var(--blanco)}
@media (max-width:860px){ .pasos-como,.puertas{grid-template-columns:1fr} }

.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px);align-items:start}
.faq h2{font-size:clamp(34px,4.4vw,58px);line-height:.95;letter-spacing:-.035em;margin:10px 0 14px}
.faq p{color:var(--tinta-suave)}
.regla-card{display:flex;gap:14px;align-items:center;border:2.5px dashed var(--copa);border-radius:var(--r);background:var(--menta);padding:16px;margin-top:20px}
.acordeon{display:grid;gap:12px}
.acordeon details{border:2.5px solid var(--copa);border-radius:18px;background:var(--blanco);overflow:hidden}
.acordeon summary{cursor:pointer;list-style:none;padding:18px 56px 18px 20px;font-weight:800;font-size:18px;position:relative}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:2px solid var(--copa);display:grid;place-items:center;background:var(--rotulo);transition:transform .2s}
.acordeon details[open] summary::after{content:"−"}
.acordeon details[open] summary{border-bottom:2px dashed var(--linea)}
.acordeon details p{margin:0;padding:14px 20px 18px;color:var(--copa)}
@media (max-width:860px){ .faq-grid{grid-template-columns:1fr} }

.final{background:var(--chicle-fuerte);text-align:center;border-top:2.5px solid var(--copa)}
.final .sticker{font-size:clamp(28px,3.4vw,44px);display:inline-block;transform:rotate(-3deg)}
.final h2{font-size:clamp(40px,6vw,86px);line-height:.92;letter-spacing:-.04em;margin:14px auto 28px;max-width:16ch;color:var(--blanco);-webkit-text-stroke:0}
.final .cta{justify-content:center}

/* Llamado a artistas */
.artistas-inicio{background:var(--rotulo);border-top:2.5px solid var(--copa);text-align:center}
.artistas-inicio .sticker{font-size:clamp(26px,3vw,40px);display:inline-block;transform:rotate(-3deg)}
.artistas-inicio h2{margin:12px auto 10px;font-size:clamp(34px,5vw,64px);line-height:.95;letter-spacing:-.035em;max-width:20ch}
.artistas-inicio p{margin:0 auto 24px;max-width:56ch;font-size:18px}

/* Fotos reales en Inicio */
.resultado .visual{background:#fff;position:relative;overflow:hidden}
.foto-plan{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,1.6,.4,1)}
.foto-plan.ajuste-producto{object-fit:contain;padding:18px;box-sizing:border-box}
.dest .f{background:#fff;position:relative;overflow:hidden}
.foto-dest{width:100%;height:100%;object-fit:contain;display:block;padding:6px;box-sizing:border-box}
@media (max-width:860px){ .resultado .visual{min-height:240px} }
