/* =========================================================================
   MONO InHouse · capa v5
   Se carga después de los estilos del sitio. Tipografía y colores: los del
   sitio (Bricolage Grotesque, Lexend, Pinyon Script) + CC Klona del manual.
   Las animaciones solo se preparan con html.v5 (lo pone v5.js); sin JS o con
   movimiento reducido todo se ve completo.
   ========================================================================= */
@font-face{font-family:'Klona';src:url(/fonts/cc-klona.ttf) format('truetype');font-display:swap}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ic{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.14em}
.ic-wa{width:1.1em;height:1.1em}
@keyframes v5blink{50%{opacity:0}}

/* ---------- apertura: los verbos se escriben y cada uno se vuelve su panel ---------- */
.v5-intro{background:radial-gradient(circle at 30% 40%,#2e2b29 0%,var(--negro) 70%);transition:opacity .45s ease;opacity:1}
.v5-intro.gone{opacity:0;pointer-events:none}
.v5-intro .in-fill{position:fixed;z-index:1;pointer-events:none;clip-path:circle(0px at 50% 50%);will-change:clip-path}
.v5-intro .in-verbs{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;
  font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(46px,8.6vw,132px);line-height:1;letter-spacing:-.025em;padding:0 6vw}
.v5-intro .in-v{margin:0;white-space:nowrap;transition:opacity .3s ease;position:relative}
.v5-intro .in-g{visibility:hidden}
.v5-intro .in-t{position:absolute;left:0;top:0}
.v5-intro .in-v[data-c="org"]{color:var(--naranja)}
.v5-intro .in-v[data-c="lim"]{color:var(--lima)}
.v5-intro .in-v[data-c="lav"]{color:var(--lavanda)}
.v5-intro .in-caret{position:fixed;z-index:4;width:clamp(22px,3.2vw,46px);aspect-ratio:1;color:#fff;pointer-events:none;
  transition:left .12s linear,top .2s ease,opacity .25s;animation:v5blink .8s steps(2) infinite}
.v5-intro .in-caret svg{width:100%;height:100%;display:block}
.v5-intro .in-foot{position:absolute;z-index:3;left:0;right:0;bottom:clamp(22px,5vh,46px);text-align:center;margin:0;
  font:500 12px/1 'Lexend';letter-spacing:.32em;text-transform:uppercase;color:#8a847e;transition:opacity .3s}
.v5-intro .in-skip{position:absolute;z-index:5;top:clamp(14px,2.4vw,24px);right:clamp(14px,2.4vw,24px);min-height:44px;padding:0 18px;
  border-radius:999px;border:1.5px solid rgba(255,255,255,.22);background:transparent;color:#cfc9c3;font:500 13px 'Lexend';cursor:pointer}
.v5-intro .in-skip:focus-visible{outline:3px solid var(--lima);outline-offset:3px}
.v5-intro.filling .in-foot,.v5-intro.filling .in-skip,.v5-intro.filling .in-caret{opacity:0}

/* ---------- portada ---------- */
/* los paneles ya los pintó la apertura: solo entra el contenido */
html.v5 body.entrando .hero-cell{clip-path:none}
html.v5 body.armado .hero-cell{animation:none}
.hero-iso{filter:none!important}
.hero-iso::before,.hero-iso::after{display:none!important}
html.v5 .hero-iso{animation:heroIso .9s cubic-bezier(.22,1,.36,1) .15s backwards!important}
@media (min-width:1101px){.hero-h1 .ventas{white-space:nowrap}}
.tw-caret{display:inline-block;width:.07em;height:.82em;margin-left:.06em;background:currentColor;vertical-align:-.06em;animation:v5blink 1s steps(2) infinite}
.hero-cta{display:inline-flex;align-items:center;gap:.5em}

/* ---------- marquesina: la estrella de marca separa las palabras ---------- */
.mq-star{display:inline-grid;place-items:center;width:.62em;height:.62em;margin:0 .55em;color:var(--naranja)}
.mq-star svg{width:100%;height:100%}

/* ---------- escritura: manuscrita, tachados y resaltador se dibujan al entrar ---------- */
html.v5 .swash{clip-path:inset(-35% 100% -35% -45%);transition:clip-path .75s cubic-bezier(.55,0,.3,1) .05s}
html.v5 .swash.v5-in{clip-path:inset(-35% -25% -35% -45%)}
html.v5 .mark:not(.swash){background-color:transparent;background-image:linear-gradient(var(--mk,var(--lima)),var(--mk,var(--lima)));
  background-repeat:no-repeat;background-size:0% 100%;transition:background-size .5s cubic-bezier(.65,0,.35,1) .1s,color .2s ease .25s}
/* mientras el resaltador no se ha dibujado, el texto toma el color de su sección: nunca queda invisible */
html.v5 .mark:not(.swash):not(.v5-in){color:inherit}
html.v5 .mark.dark:not(.swash){--mk:var(--negro)}
html.v5 .mark:not(.swash).v5-in{background-size:100% 100%}
html.v5 .pc-txt .tach,html.v5 .gc-old{text-decoration:none;position:relative}
html.v5 .pc-txt .tach::after,html.v5 .gc-old::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:3px;border-radius:3px;
  background:var(--naranja);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.65,0,.35,1) 0s}
html.v5 .gc-old::after{height:2px}
html.v5 .pc-txt .tach.v5-in::after,html.v5 .gc-old.v5-in::after{transform:scaleX(1)}
html.v5 .strike::after{transform:rotate(-3deg) scaleX(0);transform-origin:left center;transition:transform .6s cubic-bezier(.65,0,.35,1) .2s}
html.v5 .strike.v5-in::after{transform:rotate(-3deg) scaleX(1)}
/* en las tarjetas "No confundas": primero el tachado, luego la palabra manuscrita */
html.v5 .prob-card .swash{transition-delay:.4s}
html.v5 .promesa .ca{background:linear-gradient(currentColor,currentColor) no-repeat 0 96%/0% .09em;transition:background-size .8s cubic-bezier(.65,0,.35,1) .6s}
html.v5 .promesa .ca.v5-in{background-size:100% .09em}

/* ---------- iconos que se dibujan solos (trazo) ---------- */
html.v5 .ic-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s cubic-bezier(.65,0,.35,1) .05s}
html.v5 .ic-draw.v5-in{stroke-dashoffset:0}

/* pasos del método: el icono ocupa el lugar de la M de relleno */
.step .ss-ic{position:absolute;top:22px;right:22px;width:34px;height:34px;display:grid;place-items:center}
.step .ss-ic .ic{width:30px;height:30px}
.step.s1 .ss-ic{color:var(--lavanda)} .step.s2 .ss-ic{color:var(--lima)} .step.s3 .ss-ic{color:var(--naranja)} .step.s4 .ss-ic{color:#fff}
/* valores (Quiénes somos) */
.vcard{position:relative}
.vcard .vs-ic{position:absolute;right:18px;bottom:16px;width:44px;height:44px;opacity:.9}
.vcard .vs-ic .ic{width:100%;height:100%}
.vcard.v1 .vs-ic,.vcard.v2 .vs-ic{color:var(--negro)} .vcard.v3 .vs-ic{color:#fff} .vcard.v4 .vs-ic{color:var(--lima)}
/* servicios */
.svr-badge .ic{width:58%;height:58%}
/* join */
.join-ic{display:grid;place-items:center;width:clamp(64px,7vw,88px);aspect-ratio:1;border-radius:22px;background:var(--lima);color:var(--negro);flex:none}
.join-ic .ic{width:52%;height:52%}
.btn .ic{margin-right:.45em}
.btn-row .btn{display:inline-flex;align-items:center;justify-content:center}

/* ---------- mapa: rutas desde Colombia ---------- */
.rutas .ruta{fill:none;stroke:var(--lima);stroke-width:1.6;stroke-linecap:round;opacity:.85}
html.v5 .rutas .ruta{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.65,0,.35,1)}
html.v5 .rutas .ruta:nth-child(2){transition-delay:.25s} html.v5 .rutas .ruta:nth-child(3){transition-delay:.5s}
html.v5 .rutas.v5-in .ruta{stroke-dashoffset:0}

/* ---------- socios (fotos del brochure, en pequeño) ---------- */
.socios5{margin-top:26px}
.socios5 ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px 26px;margin:0;padding:0}
.socios5 li{display:flex;align-items:center;gap:12px}
.socios5 img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:50% 25%;border:3px solid #fff;box-shadow:0 6px 18px rgba(28,26,25,.14)}
.socios5 li:nth-child(1) img{border-color:var(--naranja)} .socios5 li:nth-child(2) img{border-color:var(--lavanda)} .socios5 li:nth-child(3) img{border-color:var(--lima)}
.socios5 span{display:flex;flex-direction:column;font-size:13.5px;line-height:1.25;color:#6b635c}
.socios5 b{font-family:'Bricolage Grotesque';font-weight:800;font-size:17px;color:var(--negro)}
.socios5-n{margin-top:14px;font-size:14px;color:#6b635c}
html[data-theme="dark"] .socios5 b{color:#fff}
html[data-theme="dark"] .socios5 span,html[data-theme="dark"] .socios5-n{color:#b5aca4}
html[data-theme="dark"] .socios5 img{border-color:#2a2624}

/* ---------- muro de marcas ---------- */
.marcas5{margin:clamp(56px,8vh,90px) auto 0;max-width:1100px;text-align:center}
.m5-t{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(18px,1.6vw,22px);color:var(--negro);margin-bottom:26px}
.m5-l{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:26px clamp(30px,4vw,58px)}
.m5-l img{display:block;height:calc(clamp(22px,2.2vw,32px) * var(--s,1));width:auto;filter:brightness(0);opacity:.62;transition:opacity .25s}
.m5-l li:hover img{opacity:1}
html[data-theme="dark"] .m5-t{color:#fff}
html[data-theme="dark"] .m5-l img{filter:brightness(0) invert(1);opacity:.7}

/* ---------- M.I.C.: la letra entra de abajo y sale por arriba; la barra se llena con el scroll ---------- */
html.v5 .mic2-letra span{opacity:1!important;filter:none!important;transform:none!important;clip-path:inset(100% 0 0 0);
  transition:clip-path .75s cubic-bezier(.65,0,.35,1)!important}
html.v5 .mic2-letra span.on{clip-path:inset(0 0 0 0)}
html.v5 .mic2-letra span.pasada{clip-path:inset(0 0 100% 0)}
html.v5 .mic2-escena .mark{background-size:0% 100%!important;color:#fff!important;transition:background-size .5s cubic-bezier(.65,0,.35,1) .3s,color .2s ease .45s!important}
html.v5 .mic2-escena.on .mark{background-size:100% 100%!important;color:var(--negro)!important}
.mic2-barra span{position:relative;overflow:hidden}
.mic2-barra span::after{content:"";position:absolute;inset:0;background:currentColor;transform:scaleX(var(--f,0));transform-origin:left}
.mic2-barra span[data-et="0"]{color:var(--lavanda)} .mic2-barra span[data-et="1"]{color:var(--lima)} .mic2-barra span[data-et="2"]{color:var(--naranja)}

/* ---------- pie de página diseñado ---------- */
footer.pie5{background:var(--crema);color:var(--negro);padding:clamp(40px,7vh,80px) 0 28px;text-align:left}
.pie5-card{background:var(--negro);color:#cfc9c3;border-radius:clamp(24px,3vw,40px);padding:clamp(28px,4.5vw,64px);overflow:hidden;position:relative}
.pie5-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);gap:clamp(32px,5vw,80px);align-items:start}
.pie5-cta h2{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(32px,3.6vw,54px);line-height:1;color:#fff;letter-spacing:-.02em}
.pie5-cta .swash::first-letter{color:var(--lima)}
.pie5-btn{margin-top:26px;display:inline-flex;align-items:center;background:var(--lima);color:var(--negro);font-weight:700}
.pie5-cols{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:24px 36px}
.pie5-cols h3{font-family:'Bricolage Grotesque';font-weight:800;font-size:15px;color:#fff;margin-bottom:12px}
.pie5-cols ul{list-style:none;margin:0;padding:0}
.pie5-cols a{display:inline-flex;align-items:center;gap:9px;min-height:36px;color:#cfc9c3;text-decoration:none;font-size:14.5px;transition:color .2s}
.pie5-cols a .ic{width:17px;height:17px;color:var(--lavanda)}
.pie5-cols a .ic-soc{fill:currentColor}
@media (hover:hover) and (pointer:fine){.pie5-cols a:hover{color:var(--lima)}}
.pie5-mark{margin:clamp(40px,7vh,80px) 0 clamp(24px,4vh,40px);color:var(--lavanda)}
.pie5-mark .logo-svg{display:block;width:100%;aspect-ratio:2895/1038}
.pie5-mark svg{width:100%;height:100%;display:block}
html.v5 .pie5-mark .logo-svg{clip-path:inset(100% 0 0 0);transition:clip-path .9s cubic-bezier(.55,0,.3,1)}
html.v5 .pie5-mark .logo-svg.v5-in{clip-path:inset(0 0 0 0)}
.pie5-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:12.5px;color:#8a847e;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.1)}
.pie5-legal a{color:#a9a29b;text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
@media (hover:hover) and (pointer:fine){.pie5-legal a:hover{color:var(--lima)}}
.pie5-verbos{margin-top:26px;text-align:center;font-family:'Klona','Bricolage Grotesque',sans-serif;font-size:clamp(20px,2.4vw,34px);color:var(--negro);letter-spacing:.02em}
.pie5-verbos span{color:var(--naranja);margin:0 .4em}
html[data-theme="dark"] footer.pie5{background:#141212}
html[data-theme="dark"] .pie5-card{background:#1f1c1b}
html[data-theme="dark"] .pie5-verbos{color:#e8e2dc}

@media (max-width:900px){
  .pie5-top{grid-template-columns:1fr}
  .pie5-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){ .scroll-hint{display:none!important} }
@media (max-width:560px){
  footer.pie5{padding-bottom:96px}
  .pie5-verbos{font-size:18px}
  .pie5-verbos span{margin:0 .25em}
  .pie5-cols{grid-template-columns:1fr}
  .socios5 ul{flex-direction:column;align-items:flex-start}
  .v5-intro .in-verbs{font-size:clamp(40px,12.5vw,64px)}
  .step .ss-ic{top:18px;right:18px}
}
@media (prefers-reduced-motion:reduce){
  .tw-caret,.v5-intro .in-caret{animation:none}
}

/* =====================================================================
   v5 · ronda 3: portada minimalista, esquinas con datos, hilo conductor,
   "¿Esto es para ti?", menú que aparece al bajar, pie sin logotipo gigante
   ===================================================================== */
:root{--tab-w:clamp(170px,23vw,340px);--tab-h:clamp(128px,25vh,240px);--tab-r:clamp(60px,8.5vw,140px)}

/* menú: oculto en la portada, aparece al bajar */
html.v5 body.armado nav#nav{animation:none}
html.v5 nav#nav{transform:translateY(-130%);transition:transform .5s cubic-bezier(.22,1,.36,1)}
html.v5 nav#nav.v5-ver{transform:translateY(0)}

/* portada */
.hero.hero5{display:block;min-height:100svh;height:auto;position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(circle at 50% 42%,#2e2b29 0%,var(--negro) 68%);grid-template-columns:none;grid-template-rows:none}
.h5-tab{position:absolute;z-index:1;width:var(--tab-w);height:var(--tab-h);display:flex;padding:clamp(16px,2vw,28px);color:var(--negro)}
.t-lav{top:0;right:0;background:var(--lavanda);border-bottom-left-radius:var(--tab-r);align-items:flex-end;justify-content:flex-end;text-align:right}
.t-lim{bottom:0;left:0;background:var(--lima);border-top-right-radius:var(--tab-r);align-items:flex-start;justify-content:flex-start}
.t-org{bottom:0;right:0;background:var(--naranja);border-top-left-radius:var(--tab-r);align-items:flex-start;justify-content:flex-end;text-align:right}
.h5-stat{margin:0;max-width:24ch}
.h5-stat b{display:block;font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(30px,3.6vw,56px);line-height:.95;letter-spacing:-.02em}
.t-lim .h5-stat b{font-size:clamp(20px,2vw,30px)}
.h5-stat span{display:block;margin-top:8px;font-size:clamp(11.5px,.95vw,13.5px);line-height:1.35;font-weight:500}
.t-org .h5-stat b,.t-org .h5-stat span{color:#fff}
.h5-in{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--tab-h) * .55) 6vw calc(var(--tab-h) * .75)}
.h5-sticker{margin:0 0 clamp(20px,3vh,32px)!important}
.h5-lock{width:min(54vw,660px);color:var(--lavanda);line-height:0}
.h5-lock svg{width:100%;height:auto;overflow:visible}
.h5-tag{margin-top:clamp(14px,2vh,22px);font-family:'Bricolage Grotesque';font-weight:700;font-size:clamp(18px,1.7vw,24px);color:#cfc9c3}
.h5-tag .swash::first-letter{color:var(--lavanda)}
.hero-h1.h5-h1{margin-top:clamp(26px,4.5vh,46px);color:#fff;font-size:clamp(26px,3vw,44px);line-height:1.05;max-width:21ch;font-weight:800}
.hero-h1.h5-h1 .ventas{color:var(--naranja);display:inline}
.h5-acts{margin-top:clamp(24px,4vh,36px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 26px}
.hero-cta.h5-cta{display:inline-flex;align-items:center;gap:.5em;min-height:54px;padding:0 30px;border-radius:999px;background:var(--naranja-deep,#D04315);color:#fff;
  font-weight:700;font-size:16px;text-decoration:none;transition:transform .16s ease-out}
.hero-cta.h5-cta:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.hero-cta.h5-cta:hover{transform:translateY(-2px)}}
.h5-link{color:#cfc9c3;font-weight:500;text-underline-offset:.3em;min-height:44px;display:inline-flex;align-items:center}
/* entrada de la portada (después de la apertura) */
html.v5 body.entrando .h5-lock .lk,html.v5 body.entrando .h5-sticker,html.v5 body.entrando .h5-tag,html.v5 body.entrando .h5-link{opacity:0}
html.v5 body.armado .h5-lock .lk{transform-box:fill-box;transform-origin:center;animation:lkIn .75s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d,0s)}
html.v5 body.armado .h5-lock .lk3{animation-name:lkStar;animation-duration:.9s}
@keyframes lkIn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes lkStar{from{opacity:0;transform:rotate(-200deg) scale(.3)}to{opacity:1;transform:none}}
html.v5 body.armado .h5-sticker{animation:subeEntra .7s cubic-bezier(.22,1,.36,1) .05s both}
html.v5 body.armado .h5-tag{animation:subeEntra .7s cubic-bezier(.22,1,.36,1) .55s both}
html.v5 body.armado .hero-h1.h5-h1{animation-delay:.7s!important}
html.v5 body.armado .hero-cta.h5-cta,html.v5 body.armado .h5-link{animation:subeEntra .7s cubic-bezier(.22,1,.36,1) .85s both}

/* apertura: el isotipo entra sobre el mosaico de colores */
.v5-intro{transition:opacity .45s ease,background-color .5s ease}
.v5-intro .in-iso{position:fixed;z-index:4;left:50%;top:50%;width:clamp(110px,12vw,170px);aspect-ratio:2274/1771;color:#fff;
  transform:translate(-50%,-50%) scale(.6) rotate(-14deg);opacity:0;pointer-events:none}
.v5-intro .in-iso svg{width:100%;height:100%;display:block}
.v5-intro.iso .in-iso{opacity:1;transform:translate(-50%,-50%);transition:transform .55s cubic-bezier(.34,1.4,.64,1),opacity .25s ease}
.v5-intro.salida .in-iso{opacity:0;transform:translate(-50%,-50%) scale(1.7);transition:transform .5s cubic-bezier(.55,0,.8,.3),opacity .4s ease .05s}
.v5-intro.salida{background:transparent!important}

/* hilo conductor: sale de la estrella del logotipo y conecta las secciones */
.hilo{position:absolute;left:0;top:0;z-index:6;pointer-events:none;overflow:visible}
.hilo-ruta{fill:none;stroke:var(--naranja);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.hilo-punta{position:absolute;left:0;top:0;z-index:7;width:22px;height:22px;margin:-11px 0 0 -11px;color:var(--naranja);pointer-events:none;opacity:0;transition:opacity .3s}
.hilo-punta svg{width:100%;height:100%;display:block}
.hilo-punta.on{opacity:1}
html:not(.v5) .hilo,html:not(.v5) .hilo-punta{display:none}

/* ¿Esto es para ti? */
.para-ti{background:var(--crema);padding:clamp(90px,14vh,150px) 0;position:relative}
.pt-head{text-align:center}
.pt-head .sticker{margin-bottom:18px}
.pt-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;margin-top:clamp(36px,6vh,60px);align-items:stretch}
.pt-col{border-radius:28px;padding:clamp(26px,3.2vw,44px);position:relative}
.pt-si{background:#fff;box-shadow:0 18px 50px rgba(28,26,25,.08)}
.pt-no{background:var(--negro);color:#cfc9c3}
.pt-badge{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:40px;padding:0 18px;border-radius:999px;font-family:'Bricolage Grotesque';font-weight:800;font-size:20px;transform:rotate(-3deg)}
.pt-si .pt-badge{background:var(--lima);color:var(--negro)}
.pt-no .pt-badge{background:var(--naranja);color:#fff;transform:rotate(3deg)}
.pt-big{margin-top:18px;font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(22px,2.2vw,32px);line-height:1.12;color:var(--negro)}
.pt-no .pt-big{color:#fff}
.pt-txt{margin-top:14px;font-size:16px;line-height:1.6;color:#5a534d;max-width:48ch}
.pt-no .pt-txt{color:#b5aca4}
.pt-chips{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pt-chips li{padding:8px 14px;border-radius:999px;border:1.5px solid rgba(28,26,25,.18);font-size:13.5px;font-weight:600;color:var(--negro)}
html[data-theme="dark"] .para-ti{background:#141212}
html[data-theme="dark"] .pt-si{background:#1f1c1b;box-shadow:none}
html[data-theme="dark"] .pt-si .pt-big,html[data-theme="dark"] .pt-chips li{color:#fff}
html[data-theme="dark"] .pt-si .pt-txt{color:#b5aca4}
html[data-theme="dark"] .pt-chips li{border-color:rgba(255,255,255,.18)}

/* pie: logotipo pequeño, sin la versión gigante */
.pie5-head{display:flex;align-items:center;gap:16px;margin-bottom:clamp(30px,5vh,48px);flex-wrap:wrap}
.pie5-logo{display:block;width:150px;aspect-ratio:2895/1038;color:var(--lavanda)}
.pie5-logo svg{width:100%;height:100%;display:block}
.pie5-tag{font-family:'Bricolage Grotesque';font-weight:700;color:#8a847e;font-size:15px}
.pie5-legal{margin-top:clamp(36px,6vh,56px)}

@media (max-width:900px){
  .pt-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  :root{--tab-w:44vw;--tab-h:clamp(104px,15vh,140px);--tab-r:56px}
  .h5-tab{padding:14px}
  .h5-stat b{font-size:26px}
  .t-lim .h5-stat b{font-size:17px}
  .h5-stat span{font-size:11px;margin-top:5px}
  .h5-in{padding:calc(var(--tab-h) + 10px) 20px calc(var(--tab-h) + 18px)}
  .h5-lock{width:78vw}
  .hero-h1.h5-h1{font-size:clamp(25px,7.4vw,32px)}
  .h5-acts{flex-direction:column;width:100%}
  .hero-cta.h5-cta{width:100%;justify-content:center}
}
.v5-intro.filling .in-caret{display:none}
@media (max-width:600px){
  .t-lim .h5-stat span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .t-lim{align-items:flex-start;padding-top:12px}
  .t-lim .h5-stat{max-width:30ch}
}

/* =====================================================================
   v5 · ronda 4: llegadas del hilo y sellos que se estampan
   ===================================================================== */
.hilo-ruta{stroke:var(--naranja)}            /* respaldo: el JS lo pinta por capítulo */
.hilo-punta{transition:opacity .3s,color .35s ease}

/* destello donde llega el hilo: la estrella se abre y un anillo se expande */
.hilo-llegada{position:absolute;z-index:8;width:0;height:0;pointer-events:none;color:var(--c,var(--naranja))}
.hilo-llegada i{position:absolute;left:-24px;top:-24px;width:48px;height:48px;animation:llegaEstrella .8s cubic-bezier(.2,.8,.2,1) forwards}
.hilo-llegada i svg{width:100%;height:100%;display:block}
.hilo-llegada b{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:2px solid currentColor;animation:llegaAnillo .75s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes llegaEstrella{0%{transform:scale(.25) rotate(0);opacity:1}70%{opacity:1}100%{transform:scale(1.5) rotate(90deg);opacity:0}}
@keyframes llegaAnillo{0%{transform:scale(.3);opacity:.9}100%{transform:scale(2.6);opacity:0}}

/* sellos: llegan grandes y girados, golpean y se asientan en su ángulo */
@keyframes estampa{0%{opacity:0;transform:translateY(-16px) rotate(-16deg) scale(1.5)}55%{opacity:1}75%{transform:rotate(1deg) scale(.96)}}
@keyframes estampaDer{0%{opacity:0;transform:translateY(-16px) rotate(14deg) scale(1.5)}55%{opacity:1}75%{transform:rotate(-1deg) scale(.96)}}
html.v5 .v5-espera:is(.sticker,.pc-no,.pt-badge,.cob-status){opacity:0}
html.v5 .v5-llega:is(.sticker,.pc-no,.pt-badge,.cob-status){animation:estampa .62s cubic-bezier(.2,1.25,.35,1) both}
html.v5 .pt-no .pt-badge.v5-llega,html.v5 .prob-card:nth-child(2) .pc-no.v5-llega{animation-name:estampaDer}
html.v5 .mic2-escena.on .mic2-badge{animation:estampa .55s cubic-bezier(.2,1.25,.35,1) .1s both}
html.v5 .mic-tag{animation:none}

/* etiquetas que el hilo "escribe": se revelan desde su raya, de izquierda a derecha */
html.v5 .v5-espera:is(.eyebrow,.promesa-pre){clip-path:inset(-30% 100% -30% 0)}
html.v5 .v5-llega:is(.eyebrow,.promesa-pre){clip-path:inset(-30% -5% -30% 0);transition:clip-path .7s cubic-bezier(.65,0,.35,1)}

/* contacto: las frases suben una a una cuando llega el hilo */
html.v5 .cl-statements.v5-espera .cl-line span{opacity:0;transform:translateY(100%)}
html.v5 .cl-statements.v5-llega .cl-line span{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
html.v5 .cl-statements.v5-llega .cl-line:nth-child(2) span{transition-delay:.15s}
html.v5 .cl-statements.v5-llega .cl-line:nth-child(3) span{transition-delay:.3s}

/* mapa: el punto de Colombia late cuando llega el hilo y salen las rutas */
html.v5 .rutas.v5-llega .ruta{stroke-dashoffset:0}

/* =====================================================================
   v5 · ronda 5: portada limpia + entrada a la estrella (lupa)
   ===================================================================== */
/* pista: la portada queda fija mientras la cámara entra en la estrella */
.hero-pista{position:relative;height:calc(100svh + 120vh)}
html:not(.v5) .hero-pista{height:auto}
.hero.hero5{position:sticky;top:0;height:100svh;min-height:0}
html:not(.v5) .hero.hero5{position:relative;height:auto;min-height:100svh}
.h5-in{min-height:100%;height:100%;padding:clamp(70px,10vh,110px) 6vw}
.h5-lock{width:min(70vw,900px);transform-origin:var(--ox,50%) var(--oy,50%);will-change:transform}
.h5-tag{margin:clamp(22px,3.6vh,38px) 0 0;font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(28px,3.4vw,54px);
  line-height:1.02;letter-spacing:-.02em;color:#fff;max-width:none}
.h5-tag .swash::first-letter{color:var(--lavanda)}
.h5-cta{margin-top:clamp(22px,3.6vh,34px);display:inline-flex;align-items:center;gap:.45em;min-height:44px;padding:0 20px;border-radius:999px;
  background:var(--naranja-deep,#D04315);color:#fff;font-weight:700;font-size:14.5px;text-decoration:none;transition:transform .16s ease-out}
.h5-cta:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.h5-cta:hover{transform:translateY(-2px)}}
.h5-tag,.h5-cta,.h5-tab{will-change:opacity,transform}

/* esquinas: del tamaño de su texto, pegadas a su esquina, sin espacio muerto */
.h5-tab{width:auto;height:auto;padding:clamp(14px,1.6vw,22px) clamp(18px,2vw,30px)}
.t-lav{border-bottom-left-radius:clamp(30px,3.4vw,52px);padding-top:clamp(18px,2.4vw,30px)}
.t-lim{border-top-right-radius:clamp(30px,3.4vw,52px)}
.t-org{border-top-left-radius:clamp(30px,3.4vw,52px)}
.h5-stat{display:flex;align-items:baseline;gap:10px;max-width:none}
.h5-stat b{font-size:clamp(17px,1.5vw,22px);line-height:1.1;letter-spacing:-.01em}
.t-lav .h5-stat b{font-size:clamp(26px,2.4vw,36px)}
.t-lim .h5-stat b{font-size:clamp(17px,1.5vw,22px)}
.h5-stat span{margin:0;font-size:clamp(12px,.95vw,14px);font-weight:600;max-width:15ch;text-align:left}
.t-org .h5-stat b{color:#fff}

/* idioma y tema: arriba a la izquierda mientras se ve la portada */
.ui-switch{transition:opacity .4s ease,transform .4s ease,top .45s cubic-bezier(.22,1,.36,1),bottom .45s cubic-bezier(.22,1,.36,1)}
body.en-portada .ui-switch{top:clamp(14px,1.8vw,24px);bottom:auto}

/* la lupa: una estrella con el color de "Hablemos claro" que crece desde la estrella del logotipo */
.lente{position:absolute;inset:0;z-index:5;pointer-events:none;background:var(--lavanda-soft);clip-path:polygon(0 0,0 0,0 0);display:none}
html.v5 .lente{display:block}

/* apertura: la M blanca vuela a la M del logotipo; el resto de la palabra sale de ella */
.v5-intro .in-iso{transition:none}
.v5-intro.iso .in-iso{transition:transform .55s cubic-bezier(.34,1.4,.64,1),opacity .25s ease}
.v5-intro.salida .in-iso{opacity:1}
.v5-intro .in-iso .iso-s{transition:opacity .3s ease}
html.v5 body.armado .h5-lock .lk{animation:none}
html.v5 body.entrando .h5-lock .lk{opacity:1}
html.v5 .h5-lock.esperando{clip-path:inset(0 100% 0 0)}
html.v5 .h5-lock.esperando .lk3{opacity:0}
html.v5 .h5-lock .lk3.gira{transform-box:fill-box;transform-origin:center;animation:lkStar .8s cubic-bezier(.22,1,.36,1) both}
html.v5 body.entrando .h5-tag,html.v5 body.entrando .h5-cta,html.v5 body.entrando .h5-tab .h5-stat{opacity:0}
html.v5 body.armado .h5-tag{animation:subeEntra .7s cubic-bezier(.22,1,.36,1) .55s both}
html.v5 body.armado .h5-cta{animation:subeEntra .7s cubic-bezier(.22,1,.36,1) .75s both}
html.v5 body.armado .h5-tab .h5-stat{animation:subeEntra .6s cubic-bezier(.22,1,.36,1) .9s both}

@media (max-width:600px){
  .h5-in{padding:90px 18px 110px}
  .h5-lock{width:86vw}
  .h5-tag{font-size:clamp(26px,8vw,34px)}
  .h5-tab{padding:12px 16px}
  .t-lav .h5-stat b{font-size:24px}
  .h5-stat b,.t-lim .h5-stat b{font-size:14px}
  .h5-stat span{font-size:11px;max-width:12ch}
  .t-lim,.t-org{max-width:46vw}
  .t-lim .h5-stat b,.t-org .h5-stat b{max-width:11ch}
}
/* la sección siguiente sube sobre la portada ya cubierta por la lupa: sin pantalla vacía */
html.v5 .hero-pista{height:calc(100svh + 160vh)}
html.v5 .hero-pista + .problema,html.v5 .hero-pista ~ .problema{margin-top:-60vh;position:relative;z-index:3}
.t-lav .h5-stat span{max-width:22ch}
/* costura invisible: arriba "Hablemos claro" es del color plano de la lupa y se funde con su resplandor */
html.v5 .hero-pista ~ .problema{margin-top:-75vh}
html.v5 .hero-pista ~ .problema::before{content:"";position:absolute;left:0;right:0;top:0;height:70vh;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,var(--lente-bg,var(--lavanda-soft)) 35%,transparent)}
html.v5 .hero-pista ~ .problema > .wrap{position:relative;z-index:1}

/* =====================================================================
   v5 · ronda 6: esquinas que abren hojas, cursor de marca, portada viva
   ===================================================================== */
/* esquinas = botones */
button.h5-tab{font:inherit;border:0;cursor:pointer;text-align:inherit;transition:transform .35s cubic-bezier(.22,1,.36,1),filter .25s}
button.h5-tab:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.h5-mas{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(28,26,25,.14);font-weight:800;font-size:18px;line-height:1;
  margin-left:12px;transition:transform .35s cubic-bezier(.22,1,.36,1);flex:none;align-self:center}
.t-org .h5-mas{background:rgba(255,255,255,.22);color:#fff}
.t-lav,.t-lim,.t-org{display:flex;align-items:center}
@media (hover:hover) and (pointer:fine){
  button.h5-tab:hover{filter:brightness(1.05)}
  button.h5-tab:hover .h5-mas{transform:rotate(90deg) scale(1.12)}
  .t-lav:hover{transform:translate(-4px,4px)} .t-lim:hover{transform:translate(4px,-4px)} .t-org:hover{transform:translate(-4px,-4px)}
}
button.h5-tab:active{transform:scale(.97)}

/* hoja de cuaderno que sube desde abajo */
.hoja{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-end;justify-content:center}
.hoja[hidden]{display:none}
.hoja-fondo{position:absolute;inset:0;background:rgba(20,18,17,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .45s ease}
.hoja.abierta .hoja-fondo{opacity:1}
.hoja-papel{position:relative;width:min(1180px,calc(100% - 24px));max-height:calc(100svh - 34px);overflow:auto;overscroll-behavior:contain;
  border-radius:26px 26px 0 0;padding:clamp(54px,7vh,76px) clamp(20px,4vw,64px) clamp(36px,6vh,60px);outline:none;
  transform:translateY(105%) rotate(2.5deg);transform-origin:20% 100%;transition:transform .75s cubic-bezier(.2,1.1,.3,1);
  box-shadow:0 -20px 60px rgba(0,0,0,.35)}
.hoja.abierta .hoja-papel{transform:none}
.hoja.cerrando .hoja-papel{transform:translateY(105%) rotate(-2deg);transition:transform .45s cubic-bezier(.6,0,.8,.3)}
.hoja.cerrando .hoja-fondo{opacity:0}
/* espiral */
.hoja-espiral{position:absolute;top:14px;left:5%;right:5%;height:22px;pointer-events:none;
  background:radial-gradient(circle at 50% 60%,rgba(28,26,25,.75) 0 5px,transparent 6px) 0 0/34px 22px repeat-x}
.hoja-espiral::after{content:"";position:absolute;left:0;right:0;top:-16px;height:24px;
  background:radial-gradient(ellipse 7px 13px at 50% 100%,transparent 4px,#9a948e 4.5px 6px,transparent 6.5px) 0 0/34px 24px repeat-x}
.hoja-volver{position:sticky;top:-40px;float:right;margin:-34px -20px 0 0;z-index:3;min-height:44px;padding:0 18px;border-radius:999px;border:0;cursor:pointer;
  background:var(--negro);color:#fff;font:700 14px 'Lexend';transition:transform .16s ease-out}
.hoja-volver:active{transform:scale(.96)}
.hoja-volver:focus-visible{outline:3px solid var(--naranja);outline-offset:3px}
/* papel de cada hoja */
.hoja-equipo .hoja-papel{background:#FBF7F2 repeating-linear-gradient(to bottom,transparent 0 33px,rgba(169,130,199,.28) 33px 34px);color:var(--negro)}
.hoja-equipo .hoja-papel::before{content:"";position:absolute;top:0;bottom:0;left:clamp(14px,3vw,46px);width:2px;background:rgba(238,90,42,.45)}
.hoja-promesa .hoja-papel{background:var(--lima)}
.hoja-mundo .hoja-papel{background:var(--negro)}
.hoja-mundo .hoja-espiral{background-image:radial-gradient(circle at 50% 60%,rgba(255,255,255,.35) 0 5px,transparent 6px)}
.hoja-mundo .hoja-volver{background:var(--lima);color:var(--negro)}
.hoja .promesa,.hoja .cobertura{background:transparent;padding:0;overflow:visible}
.hoja .promesa .wrap,.hoja .cobertura .wrap{padding:0;max-width:none}
/* el contenido entra después de que la hoja se asienta */
.hoja .hoja-cuerpo > * > *, .hoja .cob-layout > *{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.hoja.abierta .hoja-cuerpo > * > *, .hoja.abierta .cob-layout > *{opacity:1;transform:none}
.hoja.abierta .hoja-cuerpo > * > *:nth-child(2){transition-delay:.45s} .hoja.abierta .hoja-cuerpo > * > *:nth-child(3){transition-delay:.55s}
.hoja.abierta .hoja-cuerpo > * > *:nth-child(4){transition-delay:.65s} .hoja.abierta .hoja-cuerpo > * > *:nth-child(n+5){transition-delay:.75s}
.hoja.abierta .hoja-cuerpo > * > *:first-child{transition-delay:.35s}

/* equipo: polaroids con cinta que caen girando */
.eq-sheet{position:relative;padding-left:clamp(14px,3vw,40px)}
.eq-h{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(38px,5vw,72px);line-height:.95;margin-top:16px;letter-spacing:-.02em}
.eq-lead{margin-top:14px;max-width:56ch;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:#4a433d}
.eq-fotos{list-style:none;padding:0;margin:clamp(30px,5vh,46px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,44px)}
.pol{position:relative;background:#fff;padding:12px 12px 16px;box-shadow:0 14px 34px rgba(28,26,25,.16);transform:rotate(var(--r));text-align:center}
.pol img{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 25%}
.pol b{display:block;margin-top:12px;font-family:'Bricolage Grotesque';font-weight:800;font-size:22px}
.pol > span:last-child{display:block;font-size:14px;color:#6b635c}
.p1{--r:-3deg} .p2{--r:2deg;margin-top:22px} .p3{--r:-1.5deg}
.cinta{position:absolute;top:-12px;left:50%;width:84px;height:24px;translate:-50% 0;rotate:-4deg;opacity:.85}
.p1 .cinta{background:var(--naranja)} .p2 .cinta{background:var(--lavanda);rotate:5deg} .p3 .cinta{background:var(--lima)}
.hoja-equipo .pol{opacity:0;transform:translateY(-60px) rotate(calc(var(--r) * 5)) scale(1.08);transition:opacity .35s ease,transform .8s cubic-bezier(.2,1.3,.35,1)}
.hoja-equipo.abierta .pol{opacity:1;transform:rotate(var(--r))}
.hoja-equipo.abierta .p1{transition-delay:.55s} .hoja-equipo.abierta .p2{transition-delay:.7s} .hoja-equipo.abierta .p3{transition-delay:.85s}
@media (hover:hover) and (pointer:fine){.hoja-equipo.abierta .pol:hover{transform:rotate(0) scale(1.04);transition-delay:0s}}
.eq-nota{margin-top:clamp(26px,4vh,40px);font-size:16px;max-width:60ch}
.eq-somos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:clamp(24px,4vh,40px) 0 0}
.eq-somos dt{font-family:'Bricolage Grotesque';font-weight:800;font-size:20px}
.eq-somos div:nth-child(1) dt{color:var(--naranja-txt,#B8380F)} .eq-somos div:nth-child(2) dt{color:var(--lavanda-txt,#7C509F)} .eq-somos div:nth-child(3) dt{color:#5f7012}
.eq-somos dd{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:#4a433d}

/* mapa: los países aparecen como pulsos que se encienden en cadena */
.hoja-mundo .pin{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0)}
.hoja-mundo.abierta .pin{opacity:1;transform:none;transition:transform .6s cubic-bezier(.2,1.6,.4,1) calc(.9s + var(--d,0s)),opacity .2s calc(.9s + var(--d,0s))}
.hoja-mundo .rutas .ruta{stroke-dasharray:1;stroke-dashoffset:1}
.hoja-mundo.abierta .rutas .ruta{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1) 1.3s}
.hoja-mundo .cob-row{opacity:0;transform:translateX(30px)}
.hoja-mundo.abierta .cob-row{opacity:1;transform:none;transition:opacity .4s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.hoja-mundo.abierta .cob-row:nth-child(1){transition-delay:1s} .hoja-mundo.abierta .cob-row:nth-child(2){transition-delay:1.15s}
.hoja-mundo.abierta .cob-row:nth-child(3){transition-delay:1.3s} .hoja-mundo.abierta .cob-row:nth-child(4){transition-delay:1.45s}
/* promesa: los chips caen uno a uno */
.hoja-promesa .pr-chip{display:inline-block;opacity:0;transform:translateY(-40px) rotate(-8deg)}
.hoja-promesa.abierta .pr-chip{opacity:1;transform:none;transition:opacity .3s,transform .7s cubic-bezier(.2,1.5,.35,1)}
.hoja-promesa.abierta .pr-chip:nth-child(1){transition-delay:.9s} .hoja-promesa.abierta .pr-chip:nth-child(2){transition-delay:1.05s} .hoja-promesa.abierta .pr-chip:nth-child(3){transition-delay:1.2s}
body.hoja-abierta{overflow:hidden}

/* cursor: una estrella de la marca (lima) que sigue al puntero con un poco de inercia */
.cursor-estrella{position:fixed;left:0;top:0;z-index:9500;width:18px;height:18px;margin:-9px 0 0 -9px;color:var(--lima);pointer-events:none;opacity:0;
  transition:opacity .25s,width .25s cubic-bezier(.22,1,.36,1),height .25s cubic-bezier(.22,1,.36,1),margin .25s cubic-bezier(.22,1,.36,1),color .25s;
  filter:drop-shadow(0 0 1px rgba(28,26,25,.6))}
.cursor-estrella svg{width:100%;height:100%;display:block}
.cursor-estrella.on{opacity:1}
.cursor-estrella.sobre{width:34px;height:34px;margin:-17px 0 0 -17px;color:var(--naranja)}
@media (hover:none),(pointer:coarse){.cursor-estrella{display:none}}

/* portada viva: la estrella del logotipo gira lento y la frase respira */
@keyframes giraLento{to{transform:rotate(360deg)}}
html.v5 .h5-lock .lk3.vivo{transform-box:fill-box;transform-origin:center;animation:giraLento 14s linear infinite}
.h5-lock{transition:translate .6s cubic-bezier(.22,1,.36,1)}

/* profundidad: las tarjetas y bloques entran desde atrás, en perspectiva */
html.v5 .problema .wrap,html.v5 .giro .wrap,html.v5 .casos .wrap,html.v5 .contenido .wrap,html.v5 .para-ti .wrap{perspective:1200px}
html.v5 .prof{opacity:0;transform:translateY(60px) rotateX(18deg) scale(.96);transform-origin:50% 100%}
html.v5 .prof.prof-in{opacity:1;transform:none;transition:opacity .7s ease,transform 1s cubic-bezier(.2,1,.3,1)}
html.v5 .prof-tilt{transition:transform .5s cubic-bezier(.22,1,.36,1)}

@media (max-width:760px){
  .eq-fotos{grid-template-columns:1fr 1fr}
  .pol.p3{grid-column:1 / -1;max-width:60%;justify-self:center}
  .eq-somos{grid-template-columns:1fr 1fr}
  .hoja-volver{margin-right:-6px}
  .h5-mas{width:22px;height:22px;font-size:15px;margin-left:8px}
}
@media (prefers-reduced-motion:reduce){
  .hoja-papel,.hoja-equipo .pol,.hoja .hoja-cuerpo > * > *,.hoja-mundo .pin,.hoja-mundo .cob-row,.hoja-promesa .pr-chip{transition:none!important}
}
/* durante la apertura las letras del logotipo esperan (la M llega volando, el resto cae) */
html.v5 .h5-lock.esperando{clip-path:none}
html.v5 .h5-lock.esperando .lk{opacity:0}
html.v5 .h5-lock .lk{transform-box:fill-box;transform-origin:50% 0%}
/* las esquinas por encima de la capa central (que cubre toda la portada) para poder tocarlas */
.h5-tab{z-index:4}
.h5-in{pointer-events:none}
.h5-in a,.h5-in button{pointer-events:auto}
@media (max-width:600px){
  .t-lav{max-width:52vw;padding:14px 14px 14px 16px}
  .t-lav .h5-stat{flex-wrap:wrap;gap:2px 8px}
  .t-lav .h5-stat span{max-width:14ch}
}
/* con una hoja abierta, el botón de WhatsApp sigue abajo a la derecha, por encima de la hoja */
body.hoja-abierta .fab-cta{z-index:9100;opacity:1;transform:none;pointer-events:auto}

/* =====================================================================
   v5 · ronda 7: portales entre secciones
   ===================================================================== */
html.v5 .portal{position:relative;z-index:4}
/* la sección anterior se hunde detrás mientras la siguiente se abre */
html.v5 :is(.problema,.mic2 .mic2-fija,.casos,.contenido,.para-ti) > .wrap,html.v5 .mic2-fija > *{
  transform:scale(calc(1 - .06 * var(--hunde,0))) translateY(calc(var(--hunde,0) * 40px));opacity:calc(1 - .55 * var(--hunde,0));transform-origin:50% 0}
.portal-estrella{position:fixed;left:0;top:0;z-index:5;pointer-events:none;opacity:0;will-change:transform,opacity}
.portal-estrella svg{width:100%;height:100%;display:block}
html:not(.v5) .portal-estrella{display:none}
/* color de la estrella según el fondo que se abre */
.giro,.contenido,.contacto{--portal-c:#C4E03A}
.casos,.para-ti{--portal-c:#EE5A2A}

/* =====================================================================
   La Casa: después de la lupa, el recorrido es por estancias
   ===================================================================== */
.casa-escena{display:none}
html.en-casa .casa-escena{display:block;position:fixed;inset:0;z-index:50;overflow:hidden;background:#141212}
html.en-casa body{overflow:hidden}
.casa-mundo{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform}
.casa-cuarto{position:absolute;left:calc(var(--x) * 106vw);top:calc(var(--y) * 106vh);width:100vw;height:100vh;height:100lvh;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;outline:none}
.casa-cuarto::-webkit-scrollbar{display:none}
.casa-cuarto > section{min-height:100%;margin:0!important}
.casa-escena.viajando .casa-cuarto{border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.casa-escena.viajando{cursor:progress}
/* cada estancia centra su contenido en la pantalla */
.casa-cuarto > .problema,.casa-cuarto > .giro,.casa-cuarto > .para-ti{display:flex;flex-direction:column;justify-content:center}
.casa-cuarto > .problema{padding:clamp(90px,12vh,120px) 0 clamp(70px,10vh,100px)}
.casa-cuarto > .giro{padding:clamp(90px,12vh,120px) 0}
/* el taller ya no es una pista larga: es una sala de una pantalla */
.casa-cuarto .mic2-pista{height:auto}
.casa-cuarto .mic2-fija{position:relative;height:100vh;height:100lvh}
.taller-ctl{position:absolute;right:clamp(20px,5vw,90px);bottom:9vh;display:flex;gap:10px;z-index:3}
.taller-ctl button{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(255,255,255,.25);background:transparent;color:#fff;font:600 14px 'Lexend';cursor:pointer;transition:background .2s,transform .16s ease-out}
.taller-ctl .tc-sig{background:var(--lima);color:var(--negro);border-color:var(--lima)}
.taller-ctl button:active{transform:scale(.96)}
.taller-ctl button:focus-visible{outline:3px solid var(--lima);outline-offset:3px}
html.casa .mic2-escena{transition:opacity .45s ease,transform .55s cubic-bezier(.22,1,.36,1)}

/* plano de la casa: abajo al centro, el camino recorrido y la estrella donde estás */
.casa-plano{position:absolute;left:50%;bottom:18px;translate:-50% 0;z-index:5;width:150px;height:82px;padding:9px;border-radius:18px;
  background:rgba(28,26,25,.82);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.cp-camino{position:absolute;left:9px;top:9px;width:132px;height:64px;overflow:visible}
.cp-camino polyline{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2;stroke-dasharray:3 4}
.cp-cuarto{position:absolute;left:calc(9px + var(--x) * 34px);top:calc(9px + var(--y) * 34px);width:30px;height:30px;border-radius:8px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.1);transition:background .25s,transform .2s cubic-bezier(.22,1,.36,1)}
.cp-cuarto.visto{background:rgba(196,224,58,.28)}
.cp-cuarto.on{background:var(--lavanda)}
.cp-cuarto:focus-visible{outline:2px solid var(--lima);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.cp-cuarto:hover{transform:scale(1.12);background:rgba(255,255,255,.28)}}
.cp-nombre{position:absolute;bottom:calc(100% + 12px);left:50%;translate:-50% 0;white-space:nowrap;padding:7px 12px;border-radius:10px;background:var(--negro);color:#cfc9c3;
  font:500 12px 'Lexend';opacity:0;pointer-events:none;transition:opacity .2s,translate .2s}
.cp-nombre b{display:block;color:#fff;font:800 13px 'Bricolage Grotesque'}
.cp-cuarto:hover .cp-nombre,.cp-cuarto:focus-visible .cp-nombre{opacity:1;translate:-50% -3px}
.cp-yo{position:absolute;left:calc(9px + var(--x) * 34px + 7px);top:calc(9px + var(--y) * 34px + 7px);width:16px;height:16px;color:var(--negro);pointer-events:none;
  transition:left .9s cubic-bezier(.65,0,.35,1),top .9s cubic-bezier(.65,0,.35,1)}
.cp-yo svg{width:100%;height:100%;display:block;animation:giraLento 6s linear infinite}
/* el nombre de la estancia aparece al llegar */
.casa-rotulo{position:absolute;left:50%;bottom:112px;translate:-50% 0;z-index:5;margin:0;padding:8px 16px;border-radius:999px;background:var(--negro);color:#cfc9c3;
  font:500 13px 'Lexend';white-space:nowrap;opacity:0;pointer-events:none}
.casa-rotulo b{color:#fff;font-weight:700}
.casa-rotulo.ve{animation:rotulo 2.4s ease both}
@keyframes rotulo{0%{opacity:0;transform:translateY(8px)}12%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
/* historias (móvil): una barra por estancia */
.casa-historias{display:none}
@media (max-width:760px){
  .casa-plano{display:none}
  .casa-historias{display:flex;gap:4px;position:absolute;left:12px;right:12px;top:6px;z-index:6}
  .casa-historias span{flex:1;height:3px;border-radius:3px;background:rgba(127,127,127,.35);overflow:hidden}
  .casa-historias span i{display:block;height:100%;width:0;background:var(--naranja);transition:width .5s ease}
  .casa-historias span.lleno i,.casa-historias span.on i{width:100%}
  .casa-rotulo{bottom:84px}
  .taller-ctl{left:20px;right:auto;bottom:16vh}
  .casa-cuarto > .problema,.casa-cuarto > .giro{justify-content:flex-start}
}
/* dentro de la casa el menú, el selector y WhatsApp quedan por encima del escenario */
html.en-casa nav#nav{z-index:60}
html.en-casa .ui-switch{z-index:60}
html.en-casa .fab-cta{z-index:60;opacity:1;transform:none;pointer-events:auto}
html.en-casa .hilo,html.en-casa .hilo-punta{display:none}
.casa-cuarto#taller{overflow:hidden}
.casa-cuarto > .mic2{min-height:0;height:100%;padding:0!important}
.casa-plano{left:auto;right:24px;bottom:88px;translate:none}
.casa-plano .cp-nombre{left:auto;right:0;translate:0 0}
.cp-cuarto:hover .cp-nombre,.cp-cuarto:focus-visible .cp-nombre{translate:0 -3px}
.casa-rotulo{bottom:28px}
@media (min-width:761px){ .taller-ctl{right:200px} }

/* =====================================================================
   La ventana al mundo
   ===================================================================== */
.casa-plano{width:184px}
.cp-camino{width:166px}
.mundo{position:relative;background:radial-gradient(circle at 70% 50%,#26222a 0%,var(--negro) 62%);color:#fff;min-height:100vh;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.mundo-globo{grid-column:2;grid-row:1;width:100%;height:100vh;height:100lvh;display:block}
.mundo-txt{grid-column:1;grid-row:1;padding:clamp(90px,12vh,120px) 0 clamp(60px,10vh,100px) max(32px,calc((100vw - 1240px) / 2 + 32px));position:relative;z-index:2}
.mundo .eyebrow{color:var(--lima)}
.mundo-h{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(34px,3.8vw,58px);line-height:1;letter-spacing:-.02em;max-width:14ch}
.mundo-h .lim{color:var(--lima)}
.mundo-paises{list-style:none;padding:0;margin:clamp(26px,4vh,40px) 0 0;display:grid;gap:8px;max-width:30rem}
.mundo-paises li{display:flex;align-items:baseline;gap:12px;padding:12px 16px;border-radius:14px;cursor:pointer;color:#a79e97;
  transition:background .35s,color .35s,transform .45s cubic-bezier(.22,1,.36,1)}
.mundo-paises li b{font-family:'Bricolage Grotesque';font-weight:800;font-size:20px;color:#cfc9c3;transition:color .35s;min-width:8.5ch}
.mundo-paises li span{font-size:14px}
.mundo-paises li.on{background:rgba(196,224,58,.1);color:#e8e2dc;transform:translateX(10px)}
.mundo-paises li.on b{color:var(--lima)}
.mundo-paises li.hq.on b{color:var(--naranja)}
.mundo-paises li:focus-visible{outline:2px solid var(--lima);outline-offset:2px}
.mundo.todos .mundo-paises li{color:#e8e2dc}
.mundo.todos .mundo-paises li b{color:var(--lima)}
.mundo.todos .mundo-paises li.hq b{color:var(--naranja)}
.mundo-crece{margin-top:22px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border:1.5px solid rgba(196,224,58,.35);color:var(--lima);font-size:14px;font-weight:600;
  opacity:.5;transition:opacity .5s}
.mundo.todos .mundo-crece{opacity:1}
.mundo-crece .dot{width:8px;height:8px;border-radius:50%;background:var(--lima)}
.mundo-ctl{display:flex;gap:10px;margin-top:24px}
.mundo-ctl button{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(255,255,255,.25);background:transparent;color:#fff;font:600 14px 'Lexend';cursor:pointer;transition:transform .16s ease-out}
.mundo-ctl .mc-sig{background:var(--lima);color:var(--negro);border-color:var(--lima)}
.mundo-ctl button:active{transform:scale(.96)}
.mundo-ctl button:focus-visible{outline:3px solid var(--lima);outline-offset:3px}
html:not(.casa) .mundo-ctl{display:none}
.casa-cuarto#ventana{overflow:hidden}
.casa-cuarto > .mundo{height:100%;min-height:0}
.casa-cuarto > .mundo .mundo-globo{height:100%}
@media (max-width:760px){
  .mundo{grid-template-columns:1fr;grid-template-rows:46% 54%;align-items:start}
  .mundo-globo{grid-column:1;grid-row:1;height:100%}
  .casa-cuarto > .mundo .mundo-globo{height:100%}
  .mundo-txt{grid-row:2;padding:0 20px 90px}
  .mundo-h{font-size:28px}
  .mundo-paises{margin-top:14px;gap:2px}
  .mundo-paises li{padding:8px 12px}
  .mundo-paises li b{font-size:17px}
  .mundo-paises li span{font-size:12.5px}
  .mundo-crece{margin-top:10px;font-size:12.5px}
  .mundo-ctl{margin-top:12px}
}
@media (max-width:760px){
  .casa-cuarto > .mundo{grid-template-rows:40% 60%}
  .mundo-txt{padding-bottom:84px}
  .mundo .eyebrow{margin-bottom:8px}
  .mundo-ctl{position:absolute;top:-56px;right:20px;margin:0}
  .mundo-ctl button{min-height:38px;padding:0 14px;font-size:13px;background:rgba(28,26,25,.7)}
  .mundo-crece{display:none}
}

/* =====================================================================
   Trofeos: vitrina de un trofeo a la vez, tipografía cinética
   ===================================================================== */
.casa-cuarto#trofeos{overflow:hidden}
.casa-cuarto > .casos.vitrina{height:100%;padding:clamp(88px,11vh,110px) 0 clamp(26px,4vh,40px)}
.casos.vitrina > .wrap{height:100%;display:grid;grid-template-rows:auto 1fr auto auto;gap:clamp(10px,2vh,20px)}
.casos.vitrina .casos-head{text-align:left;max-width:none;margin:0;display:grid;grid-template-columns:auto 1fr;column-gap:40px;align-items:end}
.casos.vitrina .casos-head .eyebrow{grid-column:1 / -1;justify-content:flex-start;margin-bottom:6px}
.casos.vitrina .sec-title{font-size:clamp(30px,3vw,46px);margin:0}
.casos.vitrina .casos-lead{margin:0;font-size:15px;max-width:44ch;justify-self:end;text-align:right}
.casos.vitrina .casos-nda{display:none}
.casos.vitrina .casos-ledger{position:relative;min-height:0;border:0}
.casos.vitrina .rz{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(24px,4vw,64px);
  align-items:center;padding:0;border:0;background:none!important;opacity:0;pointer-events:none;transition:opacity .35s ease}
.casos.vitrina .rz.on{opacity:1;pointer-events:auto}
.casos.vitrina .rz-head{grid-column:2;grid-row:1;align-self:end;flex-direction:row;align-items:center}
.casos.vitrina .rz-idx{display:none}
.casos.vitrina .rz-sector{font-size:13px;padding:8px 14px;border-radius:999px;background:rgba(28,26,25,.06)}
.casos.vitrina .rz-stat{grid-column:1;grid-row:1 / span 2}
.casos.vitrina .rz-big{font-size:clamp(120px,17vw,290px);line-height:.8;gap:.06em;align-items:flex-end}
.casos.vitrina .rz-pre{font-size:.2em;align-self:flex-end;margin-bottom:.35em;min-width:3ch}
.casos.vitrina .rz-unit{font-size:clamp(16px,1.4vw,20px);font-weight:600;max-width:24ch;margin-top:18px;color:var(--negro)}
.casos.vitrina .rz-desc{grid-column:2;grid-row:2;align-self:start;justify-self:start;font-size:16px;max-width:38ch;margin-top:16px}
.casos.vitrina .casos-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0;text-align:left}
.casos.vitrina .casos-foot p{margin:0;max-width:52ch}
/* control */
.trofeos-ctl{display:flex;align-items:center;gap:10px}
.tf-barra{display:flex;gap:6px;margin-right:auto}
.tf-barra span{width:clamp(44px,5vw,70px);height:4px;border-radius:4px;background:rgba(28,26,25,.14);overflow:hidden}
.tf-barra i{display:block;height:100%;background:var(--naranja);transform-origin:left;transform:scaleX(0)}
.trofeos-ctl button{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(28,26,25,.2);background:transparent;color:var(--negro);font:600 14px 'Lexend';cursor:pointer;transition:transform .16s ease-out}
.trofeos-ctl .tf-sig{background:var(--negro);color:#fff;border-color:var(--negro)}
.trofeos-ctl button:active{transform:scale(.96)}
.trofeos-ctl button:focus-visible{outline:3px solid var(--naranja);outline-offset:3px}

/* contador mecánico */
.odo{display:inline-block;height:.86em;overflow:hidden;vertical-align:baseline;line-height:.86}
.odo-col{display:block;transform:translateY(0)}
.odo-col span{display:block;height:.86em;line-height:.86}
.rz.juega .odo-col{transform:translateY(calc(var(--d) * -.86em));transition:transform calc(1.1s + var(--i) * .25s) cubic-bezier(.2,.9,.25,1.04) calc(.15s + var(--i) * .12s)}
.k-sym{display:inline-block}
.rz.juega .k-mas{animation:cae .7s cubic-bezier(.2,1.5,.35,1) 1.35s both}
.rz.juega .k-pct{animation:cae .8s cubic-bezier(.2,1.6,.35,1) 1.25s both}
.rz.juega .k-menos{animation:traza .55s cubic-bezier(.65,0,.35,1) .05s both;transform-origin:left center}
.rz.juega .k-num{animation:sello .6s cubic-bezier(.2,1.3,.35,1) .1s both}
.k-sube{display:inline-block}
.rz.juega .k-sube{animation:sube .8s cubic-bezier(.2,1.4,.35,1) .45s both}
@keyframes cae{0%{opacity:0;transform:translateY(-1.1em) rotate(-14deg)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes traza{from{transform:scaleX(0)}to{transform:none}}
@keyframes sello{0%{opacity:0;transform:scale(1.7) rotate(-18deg)}60%{opacity:1;transform:scale(.94) rotate(2deg)}100%{transform:none}}
@keyframes sube{0%{opacity:0;transform:translateY(.7em)}100%{opacity:1;transform:none}}
/* el texto del trofeo entra después del número */
.casos.vitrina .rz .rz-unit,.casos.vitrina .rz .rz-desc,.casos.vitrina .rz .rz-head{opacity:0;transform:translateY(14px)}
.casos.vitrina .rz.juega .rz-unit,.casos.vitrina .rz.juega .rz-desc,.casos.vitrina .rz.juega .rz-head{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.casos.vitrina .rz.juega .rz-head{transition-delay:.2s} .casos.vitrina .rz.juega .rz-unit{transition-delay:1.1s} .casos.vitrina .rz.juega .rz-desc{transition-delay:1.35s}
html[data-theme="dark"] .casos.vitrina .rz-unit{color:#fff}
html[data-theme="dark"] .tf-barra span{background:rgba(255,255,255,.14)}
html[data-theme="dark"] .trofeos-ctl button{color:#fff;border-color:rgba(255,255,255,.25)}

@media (max-width:760px){
  .casa-cuarto > .casos.vitrina{padding-top:84px}
  .casos.vitrina .casos-head{grid-template-columns:1fr}
  .casos.vitrina .casos-lead{display:none}
  .casos.vitrina .sec-title{font-size:28px}
  .casos.vitrina .rz{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:center;row-gap:10px}
  .casos.vitrina .rz-head{grid-column:1;grid-row:1}
  .casos.vitrina .rz-stat{grid-column:1;grid-row:2}
  .casos.vitrina .rz-desc{grid-column:1;grid-row:3;font-size:14.5px;margin-top:4px}
  .casos.vitrina .rz-big{font-size:clamp(84px,27vw,120px)}
  .casos.vitrina .rz-unit{font-size:15px;margin-top:10px}
  .casos.vitrina .casos-foot{flex-direction:column;align-items:stretch;padding-bottom:64px}
  .casos.vitrina .casos-foot p{display:none}
  .trofeos-ctl button{min-height:40px;padding:0 14px;font-size:13px}
}
/* solo el trofeo activo existe a la vista (el sitio original revela todas las filas a la vez) */
.casos.vitrina .rz:not(.on){opacity:0!important;visibility:hidden!important;transform:none!important}
.casos.vitrina .rz.on{opacity:1!important;visibility:visible!important;transform:none!important}
.casos.vitrina .rz-big{font-size:clamp(130px,19.5vw,330px)!important}
.tf-barra{margin-right:14px}
@media (max-width:760px){ .casos.vitrina .rz-big{font-size:clamp(88px,28vw,124px)!important} }
.trofeos-ctl button,.taller-ctl button,.mundo-ctl button,.casos.vitrina .casos-foot .btn{white-space:nowrap}

/* =====================================================================
   Interiores de la casa
   ===================================================================== */
/* --- el estudio: visor de cámara --- */
.casa-cuarto#estudio{overflow:hidden}
.casa-cuarto > .contenido.set{height:100%;padding:clamp(88px,11vh,110px) 0 clamp(24px,4vh,40px);display:flex}
.contenido.set > .wrap:first-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto auto 1fr;column-gap:clamp(28px,4vw,64px);height:100%;width:100%}
.contenido.set > .wrap:first-child > .eyebrow,.contenido.set .sec-title,.contenido.set .cont-lead{grid-column:1}
.contenido.set .sec-title{font-size:clamp(34px,3.6vw,56px)}
.contenido.set .cont-lead{font-size:15.5px;max-width:46ch}
.contenido.set .cont-grid{display:contents}
.contenido.set .cont-say{grid-column:1;grid-row:3;align-self:start;margin-top:18px;background:none;border:0;padding:0}
.contenido.set .cont-foto{grid-column:2;grid-row:1 / span 3;align-self:center;position:relative;margin:0;height:min(76vh,720px);aspect-ratio:4/5;justify-self:center;
  border-radius:18px;overflow:hidden;background:#000}
.contenido.set .cont-foto figcaption{display:none}
.contenido.set .cont-strip,.contenido.set > .wrap:last-child p{display:none}
.contenido.set > .wrap:last-child{position:absolute;left:max(32px,calc((100vw - 1240px) / 2 + 32px));bottom:clamp(24px,4vh,40px);padding:0}
.contenido.set .cont-foot{margin:0}
.tomas{position:absolute;inset:0}
.tomas img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .5s ease,transform 3.2s ease-out}
.tomas img.on{opacity:1;transform:scale(1)}
.visor{position:absolute;inset:0;pointer-events:none;font:600 12px 'Lexend';color:#fff;letter-spacing:.04em;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.visor .vc{position:absolute;width:34px;height:34px;border:2.5px solid rgba(255,255,255,.9)}
.visor .a{top:18px;left:18px;border-right:0;border-bottom:0} .visor .b{top:18px;right:18px;border-left:0;border-bottom:0}
.visor .c{bottom:18px;left:18px;border-right:0;border-top:0} .visor .d{bottom:18px;right:18px;border-left:0;border-top:0}
.v-rec{position:absolute;top:26px;left:64px;display:flex;align-items:center;gap:7px}
.v-rec b{width:10px;height:10px;border-radius:50%;background:#ff3b30;animation:v5blink 1s steps(2) infinite}
.v-tc{position:absolute;top:26px;right:64px;font-variant-numeric:tabular-nums}
.v-toma{position:absolute;bottom:26px;left:64px} .v-fmt{position:absolute;bottom:26px;right:64px;opacity:.8}
.visor::after{content:"";position:absolute;inset:0;background:#fff;opacity:0}
.visor.corte::after{animation:corte .35s ease-out}
@keyframes corte{0%{opacity:.35}100%{opacity:0}}
.casa-cuarto.activo .contenido.set .cont-foto{animation:enfoca .9s cubic-bezier(.22,1,.36,1) both}
@keyframes enfoca{0%{filter:blur(14px);transform:scale(1.06)}100%{filter:none;transform:none}}

/* --- la sala: las cuatro lentes se encienden una tras otra --- */
.casa-cuarto.activo .giro-list li{animation:enciende .7s cubic-bezier(.22,1,.36,1) both}
.casa-cuarto.activo .giro-list li:nth-child(1){animation-delay:.35s} .casa-cuarto.activo .giro-list li:nth-child(2){animation-delay:.6s}
.casa-cuarto.activo .giro-list li:nth-child(3){animation-delay:.85s} .casa-cuarto.activo .giro-list li:nth-child(4){animation-delay:1.1s}
@keyframes enciende{0%{opacity:.15;transform:translateX(26px);box-shadow:inset 3px 0 0 transparent}60%{box-shadow:inset 3px 0 0 var(--lima)}100%{opacity:1;transform:none;box-shadow:inset 3px 0 0 rgba(196,224,58,.5)}}

/* --- el pasillo: Sí entra por la izquierda, No por la derecha y se aparta --- */
.casa-cuarto.activo .pt-si{animation:entraIzq .8s cubic-bezier(.2,1,.3,1) .2s both}
.casa-cuarto.activo .pt-no{animation:entraDer .8s cubic-bezier(.2,1,.3,1) .35s both,aparta .9s cubic-bezier(.22,1,.36,1) 1.6s forwards}
@keyframes entraIzq{0%{opacity:0;transform:translateX(-80px) rotate(-4deg)}100%{opacity:1;transform:none}}
@keyframes entraDer{0%{opacity:0;transform:translateX(80px) rotate(4deg)}100%{opacity:1;transform:none}}
@keyframes aparta{to{transform:translateY(14px) rotate(2.5deg) scale(.96);opacity:.82}}
.casa-cuarto.activo .pt-chips li{animation:sube .5s cubic-bezier(.2,1.4,.35,1) both}
.casa-cuarto.activo .pt-chips li:nth-child(1){animation-delay:.9s} .casa-cuarto.activo .pt-chips li:nth-child(2){animation-delay:.97s}
.casa-cuarto.activo .pt-chips li:nth-child(3){animation-delay:1.04s} .casa-cuarto.activo .pt-chips li:nth-child(4){animation-delay:1.11s}
.casa-cuarto.activo .pt-chips li:nth-child(5){animation-delay:1.18s} .casa-cuarto.activo .pt-chips li:nth-child(6){animation-delay:1.25s}
.casa-cuarto.activo .pt-chips li:nth-child(7){animation-delay:1.32s}

/* --- la puerta: el contacto se abre como dos hojas --- */
.casa-cuarto#puerta .contacto .grid{perspective:1400px}
.casa-cuarto.activo .contacto-left{animation:hojaIzq 1.1s cubic-bezier(.2,.9,.25,1) .15s both;transform-origin:0 50%}
.casa-cuarto.activo .contacto-right{animation:hojaDer 1.1s cubic-bezier(.2,.9,.25,1) .15s both;transform-origin:100% 50%}
@keyframes hojaIzq{0%{transform:rotateY(62deg);opacity:.2}100%{transform:none;opacity:1}}
@keyframes hojaDer{0%{transform:rotateY(-62deg);opacity:.2}100%{transform:none;opacity:1}}

@media (max-width:760px){
  .casa-cuarto#estudio{overflow-y:auto}
  .casa-cuarto > .contenido.set{height:auto;min-height:100%;display:block;padding-bottom:110px}
  .contenido.set > .wrap:first-child{display:block}
  .contenido.set .cont-foto{height:auto;width:100%;margin-top:18px;aspect-ratio:4/5}
  .contenido.set > .wrap:last-child{position:static;margin-top:16px}
  .visor .vc{width:24px;height:24px}
  .v-rec,.v-toma{left:48px} .v-tc,.v-fmt{right:48px}
}
@media (prefers-reduced-motion:reduce){ .visor .v-rec b{animation:none} }
.contenido.set .tomas img{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;margin:0;border-radius:0}
.contenido.set .cont-lead{display:none}
.contenido.set .tomas img{opacity:0!important;transform:scale(1.08)!important;transition:opacity .5s ease,transform 3.2s ease-out!important}
.contenido.set .tomas img.on{opacity:1!important;transform:scale(1)!important}

/* ===== revisión final ===== */
/* plano plegado: una pastilla pequeña arriba a la derecha (bajo el menú); se despliega al pasar o al tocar */
.casa-plano{left:auto;right:clamp(14px,2vw,28px);top:84px;bottom:auto;width:auto;height:auto;padding:0;background:none;box-shadow:none;backdrop-filter:none}
.cp-pastilla{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 10px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(28,26,25,.82);backdrop-filter:blur(10px);color:#cfc9c3;font:500 12.5px 'Lexend';box-shadow:0 8px 24px rgba(0,0,0,.25)}
.cp-pastilla svg{width:14px;height:14px;color:var(--lima)}
.cp-pastilla b{color:#fff;font-weight:700}
.cp-pastilla span{opacity:.7}
.cp-pastilla:focus-visible{outline:2px solid var(--lima);outline-offset:2px}
.casa-plano .cp-camino,.casa-plano .cp-cuarto,.casa-plano .cp-yo{display:none}
.casa-plano::after{content:none}
.casa-plano:hover,.casa-plano:focus-within,.casa-plano.abierto{width:184px}
.casa-plano:is(:hover,:focus-within,.abierto){padding:9px;padding-top:50px;border-radius:18px;background:rgba(28,26,25,.9);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.3);height:132px}
.casa-plano:is(:hover,:focus-within,.abierto) .cp-pastilla{position:absolute;top:7px;left:7px;right:7px;background:none;box-shadow:none}
.casa-plano:is(:hover,:focus-within,.abierto) :is(.cp-camino,.cp-cuarto,.cp-yo){display:block}
.casa-plano .cp-camino{top:50px} .casa-plano .cp-cuarto{top:calc(50px + var(--y) * 34px)} .casa-plano .cp-yo{top:calc(50px + var(--y) * 34px + 7px)}
.casa-plano .cp-nombre{bottom:auto;top:calc(100% + 8px)}
.casa-plano:hover .cp-cuarto:hover .cp-nombre{translate:0 3px}
@media (max-width:760px){ .casa-plano{display:none} }

/* controles de secuencias: siempre dentro de su columna y lejos de las esquinas inferiores */
.mundo-ctl{margin-top:18px}
.mundo-crece{margin-top:16px}
@media (max-height:820px) and (min-width:761px){ .mundo-crece{display:none} .mundo-paises li{padding:9px 14px} }
.taller-ctl{right:clamp(20px,5vw,90px);bottom:12vh}
.casos.vitrina .casos-foot p{display:none}
.casos.vitrina .casos-foot{justify-content:flex-end;padding-right:200px}

/* móvil: los controles van en el flujo, debajo del texto */
@media (max-width:760px){
  .taller-ctl{position:static;margin-top:16px}
  .casa-cuarto .mic2-fija .mic2-texto{position:relative;z-index:2}
  .casa-cuarto .mic2-letra{opacity:.35}
  .casos.vitrina .casos-foot{padding-right:0}
}
@media (max-width:360px){
  .casos.vitrina .rz-big{font-size:76px!important}
  .casos.vitrina .rz-desc{font-size:13.5px}
  .casos.vitrina .sec-title{font-size:24px}
  .casos.vitrina .casos-head .eyebrow{display:none}
  .trofeos-ctl{flex-wrap:wrap}
  .tf-barra{width:100%;margin:0 0 6px}
  .mundo-paises li span{display:none}
}
@media (max-width:360px){ .casos.vitrina .casos-foot .btn{font-size:13px;padding:14px 16px;white-space:normal;text-align:center} }
@media (max-width:760px){
  .casa-cuarto .mic2-letra{position:absolute!important;right:-4vw;top:70px;z-index:0;opacity:.22!important;pointer-events:none}
  .casa-cuarto .mic2-letra span{font-size:clamp(150px,52vw,230px)!important}
  .casa-cuarto .mic2-fija{display:flex!important;flex-direction:column;justify-content:center}
}

/* ===== P2: hoja del equipo con fotos a escala MONO; hojas desplazables ===== */
.hoja-papel{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.eq-sheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,4vw,64px);align-items:start}
.eq-sheet > .sticker,.eq-sheet > .eq-h,.eq-sheet > .eq-lead,.eq-sheet > .eq-nota{grid-column:1}
.eq-fotos{grid-column:2;grid-row:1 / span 5;align-self:center;display:block;position:relative;height:clamp(300px,34vw,420px);margin:0}
.pol{position:absolute;width:clamp(150px,13vw,200px);padding:9px 9px 12px}
.pol b{font-size:17px;margin-top:8px} .pol > span:last-child{font-size:12.5px}
.p1{left:0;top:6%} .p2{left:34%;top:0;margin-top:0} .p3{left:66%;top:12%}
.eq-somos{grid-column:1 / -1}
.eq-somos dt{font-size:18px}
@media (max-width:760px){
  .eq-sheet{grid-template-columns:1fr}
  .eq-fotos{grid-column:1;grid-row:auto;height:auto;display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:nowrap}
  .pol{position:relative;left:auto!important;top:auto!important;width:31%;max-width:130px;padding:6px 6px 9px}
  .pol.p3{grid-column:auto;max-width:130px;justify-self:auto}
  .pol b{font-size:14px} .pol > span:last-child{font-size:10.5px;line-height:1.2}
  .cinta{width:46px;height:14px;top:-7px}
}
.pol img{width:100%!important;height:auto!important;aspect-ratio:1/1!important;object-fit:cover}
.eq-sheet > .sticker{justify-self:start}
.eq-fotos{height:clamp(260px,24vw,330px);align-self:start;margin-top:40px}
.p1{left:2%;top:10%} .p2{left:35%;top:0} .p3{left:67%;top:16%}
.eq-somos{margin-top:clamp(28px,4vh,44px)}
@media (max-width:760px){ .eq-fotos{margin-top:22px;height:auto} .pol{width:30%} }

/* ===== P3: conductor entre estancias ===== */
.casa-guia{position:fixed;left:0;top:0;z-index:58;width:34px;height:34px;margin:-17px 0 0 -17px;filter:drop-shadow(0 0 10px rgba(238,90,42,.45));color:var(--naranja);pointer-events:none;opacity:0;will-change:transform}
.casa-guia svg{width:100%;height:100%;display:block}
/* la escena empieza con el mismo campo lila de la lupa: no hay corte al entrar ni al salir */
html.en-casa .casa-escena{background:var(--lavanda-soft)}
html[data-theme="dark"].en-casa .casa-escena{background:#1a1622}
.casa-escena.saliendo .casa-plano,.casa-escena.saliendo .casa-rotulo{opacity:0;transition:opacity .3s}

/* ===== P4: tira editorial de fotos (estudio) ===== */
.contenido.set{position:relative}
.contenido.set .cont-foto{height:min(58vh,560px)!important}
.contenido.set > .wrap:last-child{bottom:calc(clamp(24px,4vh,40px) + 168px)}
.tira{position:absolute;left:0;right:0;bottom:clamp(14px,2.4vh,26px);height:150px;z-index:2}
.tira-pista{position:absolute;inset:0;display:flex;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tira-vuelta{display:flex;align-items:center;gap:16px;padding-right:16px;flex:none;animation:tiraPasa 48s linear infinite}
@keyframes tiraPasa{to{transform:translateX(-100%)}}
.tira:hover .tira-vuelta{animation-play-state:paused}
.tira-foto{display:block;flex:none;height:118px;border-radius:10px;overflow:hidden;transform:rotate(var(--r));
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s,filter .3s;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.tira-foto img{height:100%!important;width:auto!important;display:block;opacity:1!important;transform:none!important;border-radius:0}
.tira.mira .tira-foto{opacity:.45;filter:saturate(.6)}
.tira.mira .tira-foto.on{opacity:1;filter:none;transform:rotate(0) scale(1.22);z-index:2}
.tira-foto:focus-visible{outline:3px solid var(--lima);outline-offset:3px}
.tira-fija{position:absolute;right:max(32px,calc((100vw - 1240px) / 2 + 32px));bottom:-4px;z-index:3;margin:0;width:118px;padding:7px 7px 26px;background:#fff;
  transform:rotate(4deg);box-shadow:0 16px 36px rgba(0,0,0,.45)}
.tira-fija img{display:block;width:100%!important;height:auto!important;aspect-ratio:1;object-fit:cover;opacity:1!important;transform:none!important;border-radius:0}
.tira-fija .cinta{top:-10px;width:60px;height:18px;background:var(--lima)}
.tira-fija figcaption{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:600 10.5px 'Lexend';color:var(--negro)}
@media (max-width:760px){
  .contenido.set .cont-foto{height:auto!important}
  .tira{position:relative;bottom:auto;margin:26px -20px 0;height:130px}
  .tira-pista{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tira-pista::-webkit-scrollbar{display:none}
  .tira-vuelta{animation-duration:60s}
  .tira-pista:active .tira-vuelta{animation-play-state:paused}
  .tira-foto{height:100px;scroll-snap-align:center}
  .tira-fija{right:20px;width:92px;padding:5px 5px 20px}
  .tira-fija figcaption{font-size:9px}
}
@media (prefers-reduced-motion:reduce){ .tira-vuelta{animation:none} .tira-pista{overflow-x:auto} }
.contenido.set > .wrap:last-child{display:none}
.contenido.set .cont-foto{height:min(52vh,520px)!important}
.tira{bottom:84px;height:140px}
.tira-fija{right:auto;left:max(32px,calc((100vw - 1240px) / 2 + 32px));bottom:6px;text-decoration:none;transition:transform .35s cubic-bezier(.22,1,.36,1)}
@media (hover:hover) and (pointer:fine){ .tira-fija:hover{transform:rotate(0) scale(1.06)} }
.tira-fija:focus-visible{outline:3px solid var(--lima);outline-offset:3px}
.tf-cap{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:600 10px 'Lexend';color:var(--negro)}
.tira-pista{-webkit-mask:linear-gradient(90deg,transparent 0,transparent 150px,#000 230px,#000 94%,transparent);mask:linear-gradient(90deg,transparent 0,transparent 150px,#000 230px,#000 94%,transparent)}
@media (max-width:760px){
  .contenido.set > .wrap:last-child{display:none}
  .tira{bottom:auto;height:124px}
  .tira-fija{left:20px;bottom:0}
  .tira-pista{-webkit-mask:none;mask:none;padding-left:120px}
}
@media (min-width:761px){
  .contenido.set .cont-foto{align-self:start!important;margin-top:4px!important;height:calc(100vh - 100px - 84px - 140px - 40px)!important;max-height:540px}
  .contenido.set .cont-say{overflow:visible;padding-left:2px}
}

/* ===== P4: indicador M (sustituye plano, barras de líneas y barra de color) ===== */
.casa-plano,.casa-historias,.casa-rotulo{display:none!important}
html.v5 .progreso{display:none!important}
.casa-m{position:absolute;left:50%;bottom:18px;translate:-50% 0;z-index:6;display:flex;align-items:center;gap:12px;padding:8px 16px 8px 10px;border-radius:999px;
  background:rgba(28,26,25,.86);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:calc(100vw - 260px)}
.cm-figura{position:relative;width:64px;height:50px;flex:none}
.cm-svg{width:100%;height:100%;display:block;overflow:visible}
.cm-seg{fill:rgba(255,255,255,.16);transition:fill .45s ease}
.cm-seg.visto{fill:var(--lavanda)}
.cm-seg.on{fill:var(--lima);animation:cmLate 2.2s ease-in-out infinite}
@keyframes cmLate{50%{fill:#e3f27a}}
.cm-btn{position:absolute;top:-6px;bottom:-6px;left:calc(100% / var(--n) * var(--k));width:calc(100% / var(--n));border:0;padding:0;background:transparent;cursor:pointer;border-radius:4px}
.cm-btn:focus-visible{outline:2px solid var(--lima);outline-offset:1px}
@media (hover:hover) and (pointer:fine){ .cm-btn:hover{background:rgba(255,255,255,.08)} }
.cm-yo{position:absolute;top:-13px;left:calc(100% / var(--n) * (var(--k) + .5));width:13px;height:13px;margin-left:-6.5px;color:var(--naranja);pointer-events:none;
  transition:left .9s cubic-bezier(.65,0,.35,1)}
.cm-yo svg{width:100%;height:100%;display:block;animation:giraLento 6s linear infinite}
.cm-txt{margin:0;display:flex;flex-direction:column;line-height:1.2;min-width:0}
.cm-txt b{font:700 13.5px 'Bricolage Grotesque';color:#fff;white-space:nowrap}
.cm-txt span{font:500 11.5px 'Lexend';color:#a79e97;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.casa-m.apunta .cm-txt b{color:var(--lima)}
.casa-escena.saliendo .casa-m{opacity:0;transition:opacity .3s}
@media (max-width:760px){
  .casa-m{bottom:14px;padding:7px 12px 7px 8px;gap:8px;max-width:calc(100vw - 210px)}
  .cm-figura{width:50px;height:39px}
  .cm-btn{top:-10px;bottom:-10px}
  .cm-txt b{font-size:12px} .cm-txt span{font-size:10.5px}
}
@media (max-width:360px){ .cm-txt{display:none} .casa-m{padding:7px 10px} }
/* indicador dentro de la barra en móvil: solo visible en la casa */
.casa-m.en-nav{position:static;translate:none;background:none;box-shadow:none;backdrop-filter:none;padding:0;margin:0 auto 0 10px;max-width:none;gap:8px;display:none}
html.en-casa .casa-m.en-nav{display:flex}
.casa-m.en-nav .cm-figura{width:38px;height:30px}
.casa-m.en-nav .cm-yo{top:-10px;width:10px;height:10px;margin-left:-5px}
.casa-m.en-nav .cm-txt b{font-size:12px} .casa-m.en-nav .cm-txt span{font-size:10px}
@media (max-width:360px){ .casa-m.en-nav .cm-txt span{display:none} .casa-m.en-nav .cm-txt{display:flex} }
@media (max-width:760px){ .casa-cuarto .mic2-barra{position:static;margin:18px 0 0} }
@media (max-width:360px){ .casa-m.en-nav .cm-txt{display:none!important} .casa-m.en-nav{margin-left:6px} }
/* ancho fijo del texto: al cambiar de nombre la pastilla no se mueve bajo el cursor */
.casa-m:not(.en-nav) .cm-txt{width:178px}
.casa-m.en-nav .cm-txt{width:118px}
.casa-m:not(.en-nav) .cm-txt{width:178px}
.casa-m.en-nav .cm-txt{width:118px}

/* ===== P5: microinteracciones ===== */
.btn,.h5-cta,.nav-cta,.fab-cta,.pie5-btn,.hero-cta,.mc-sig,.tc-sig,.tf-sig,.hoja-volver{transition:translate .35s cubic-bezier(.2,1.6,.35,1),transform .2s ease-out,background-color .25s}
.iman-on{transition:translate .12s ease-out,transform .2s ease-out,background-color .25s!important}
:is(.btn,.h5-cta,.nav-cta,.fab-cta,.pie5-btn,.cm-btn,button.h5-tab,.chips span):active{transform:scale(.95)}
.fab-cta svg,.h5-cta .ic-wa,.btn .ic-wa{transition:transform .45s cubic-bezier(.2,1.6,.35,1)}
@media (hover:hover) and (pointer:fine){
  .fab-cta:hover svg,.h5-cta:hover .ic-wa,.btn:hover .ic-wa{transform:rotate(-14deg) scale(1.18)}
  .fab-cta:hover,.h5-cta:hover,.nav-cta:hover{box-shadow:0 0 0 3px var(--negro),0 0 0 5px var(--lima),0 14px 38px rgba(238,90,42,.45)!important}
  .nav-links a:not(.nav-cta){transition:transform .25s cubic-bezier(.22,1,.36,1),color .2s}
  .nav-links a:not(.nav-cta):hover{transform:translateY(-2px);color:var(--lima)}
  .pol img,.tira-foto img{transition:transform .6s cubic-bezier(.22,1,.36,1),filter .4s}
  .pol:hover img{transform:scale(1.06)}
  .giro-list li,.cont-list li,.mundo-paises li{transition:transform .35s cubic-bezier(.22,1,.36,1),background .3s}
  .giro-list li:hover,.cont-list li:hover{transform:translateX(8px)}
  .mundo-paises li:hover{transform:translateX(6px)}
}
.h5-lock .lk{cursor:default;transition:none}
@media (hover:none){ .h5-lock .lk{cursor:pointer} }

/* ===== P5: menú — "Hablemos" con aire a los lados ===== */
.nav-inner{padding:9px 9px 9px 22px!important}
.nav-cta{padding:11px 24px!important;margin-left:6px}

/* ===== P5: fondo de líneas MONO (exploración; ?fondo=no lo apaga) ===== */
html.fondo-lineas :is(.giro,.mundo,.contenido,.contacto,.mic2 .mic2-fija){position:relative;isolation:isolate}
html.fondo-lineas :is(.giro,.mundo,.contenido,.contacto,.mic2 .mic2-fija)::after{
  content:"";position:absolute;inset:-10%;z-index:-1;pointer-events:none;opacity:.07;background:var(--lavanda);
  -webkit-mask:url(/assets/brand/tramado.png) 0 0/38vw auto repeat;mask:url(/assets/brand/tramado.png) 0 0/38vw auto repeat;
  translate:var(--lx,0) var(--ly,0);animation:deriva 90s linear infinite}
@keyframes deriva{to{-webkit-mask-position:38vw -100vw;mask-position:38vw -100vw}}
@media (max-width:760px){ html.fondo-lineas :is(.giro,.mundo,.contenido,.contacto,.mic2 .mic2-fija)::after{-webkit-mask-size:80vw auto;mask-size:80vw auto;animation-duration:140s} }

/* ===== P5: M.I.C. integrado — pestañas junto al texto, la letra gigante pasa a ser marca de agua ===== */
html.casa .casa-cuarto .mic2-letra{opacity:.1!important;pointer-events:none}
html.casa .casa-cuarto .mic2-letra span{filter:none}
html.casa .casa-cuarto .mic2-barra{display:none}
.mic-tabs{display:flex;gap:8px;margin:18px 0 6px}
.mic-tab{position:relative;display:flex;align-items:center;gap:8px;min-height:46px;padding:0 16px 0 8px;border-radius:999px;border:1.5px solid rgba(255,255,255,.18);
  background:transparent;color:#a79e97;cursor:pointer;overflow:hidden;transition:background .3s,color .3s,border-color .3s,transform .2s ease-out}
.mic-tab b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font:800 17px 'Bricolage Grotesque';background:rgba(255,255,255,.08);color:#fff;transition:background .3s,color .3s}
.mic-tab span{font:600 13.5px 'Lexend'}
.mic-tab i{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;transform:scaleX(var(--f,0));background:currentColor;opacity:.9}
.mic-tab[data-et="0"]{--c:var(--lavanda)} .mic-tab[data-et="1"]{--c:var(--lima)} .mic-tab[data-et="2"]{--c:var(--naranja)}
.mic-tab.on{border-color:var(--c);color:#fff}
.mic-tab.on b{background:var(--c);color:var(--negro)}
.mic-tab.on i{background:var(--c)}
.mic-tab.hecho b{background:color-mix(in srgb,var(--c) 45%,transparent)}
.mic-tab:focus-visible{outline:3px solid var(--c);outline-offset:3px}
@media (hover:hover) and (pointer:fine){ .mic-tab:not(.on):hover{color:#fff;border-color:rgba(255,255,255,.4);transform:translateY(-2px)} }
@media (max-width:420px){ .mic-tab span{display:none} .mic-tab{padding:0 6px} }
html.fondo-lineas :is(.giro,.mundo,.contenido,.contacto,.mic2 .mic2-fija)::after{opacity:.032;-webkit-mask-size:52vw auto;mask-size:52vw auto}
@media (max-width:760px){ html.fondo-lineas :is(.giro,.mundo,.contenido,.contacto,.mic2 .mic2-fija)::after{opacity:.04;-webkit-mask-size:110vw auto;mask-size:110vw auto} }
@media (max-width:440px){ .casa-m.en-nav .cm-txt{width:84px} .casa-m.en-nav .cm-txt span{display:none} }

/* ===== P6: la franja inferior (idioma · indicador M · Hablemos) nunca tapa contenido ===== */
@media (min-width:761px){
  .casa-cuarto > section:not(.mic2):not(.mundo):not(.contenido){padding-bottom:max(110px,var(--pb,0px))!important}
  .casa-cuarto > .casos.vitrina{padding-bottom:92px!important}
  .casa-cuarto > .para-ti,.casa-cuarto > .problema{padding-bottom:120px!important}
}
@media (max-width:760px){
  .casa-cuarto > section:not(.mic2):not(.mundo){padding-bottom:96px!important}
}
.casa-cuarto#puerta footer.pie5{padding-bottom:110px}
@media (min-width:761px){ .casa-cuarto > .mundo .mundo-txt{padding-bottom:110px} }
/* taller en pantallas bajas: se puede desplazar y los controles quedan por encima de la franja inferior */
@media (max-height:720px),(max-width:360px){
  .casa-cuarto#taller{overflow-y:auto}
  .casa-cuarto#taller .mic2-fija{height:auto!important;min-height:100%;padding-bottom:110px!important}
  .casa-cuarto > .mic2{height:auto!important}
}
@media (min-width:761px){
  .mundo-paises{margin-top:clamp(16px,2.6vh,28px)}
  .mundo-paises li{padding:10px 16px}
  .mundo-txt .mundo-crece{margin-top:12px}
  .mundo-ctl{margin-top:14px}
}
@media (min-width:761px) and (max-height:820px){
  .mundo-ctl{position:absolute;left:calc(100% + 32px);bottom:110px;margin:0;white-space:nowrap}
  .mundo-ctl button{background:rgba(28,26,25,.7)}
}
@media (min-width:761px) and (max-height:820px){ .mundo-ctl{bottom:auto;top:0} }
/* sin JavaScript: no hay apertura y todo el contenido es visible */
html:not(.js-on) .preloader{display:none!important}
html:not(.js-on) body{overflow:auto!important}
html:not(.js-on) :is(.fu,.hero-cell > *,.h5-tag,.h5-cta,.h5-stat,.prob-card,.rz,.cl-line span){opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
/* sin JavaScript las hojas (equipo, promesa, mapa) se muestran como bloques al final: su contenido sigue disponible */
html:not(.js-on) .hoja[hidden]{display:block!important;position:static}
html:not(.js-on) .hoja .hoja-fondo,html:not(.js-on) .hoja .hoja-volver{display:none}
html:not(.js-on) .hoja .hoja-papel{position:static;transform:none;max-height:none;margin:0 auto 24px;border-radius:26px;box-shadow:none}
html:not(.js-on) .hoja .hoja-cuerpo *{opacity:1!important;transform:none!important}
html:not(.js-on) .h5-tab{cursor:default}
/* sin "tarjetas" durante el viaje: las estancias no se ven como diapositivas */
.casa-escena.viajando .casa-cuarto{border-radius:0!important;box-shadow:none!important}
.casa-cuarto{will-change:clip-path}

/* ===== hoja del equipo, versión breve: quién es quién y la cifra clara ===== */
.eq-sheet2{display:block!important;text-align:center;padding-left:0!important}
.eq-sheet2 > .sticker{justify-self:auto;margin:0 auto}
.eq-sheet2 .eq-h{margin-top:14px}
.eq-exp{display:inline-flex;align-items:center;gap:12px;margin:18px auto 0;padding:10px 18px 10px 12px;border-radius:999px;background:var(--lavanda-soft,#E9DCF2)}
.eq-exp b{font:800 30px/1 'Bricolage Grotesque';color:var(--negro)}
.eq-exp span{font-size:14px;font-weight:600;color:#4a433d;text-align:left;max-width:22ch;line-height:1.25}
.eq-sheet2 .eq-fotos{position:static;display:flex!important;justify-content:center;gap:clamp(18px,3vw,40px);height:auto;margin:clamp(30px,5vh,46px) 0 0}
.eq-sheet2 .pol{position:relative;left:auto!important;top:auto!important;width:clamp(150px,15vw,200px);padding:9px 9px 14px}
.eq-sheet2 .pol b{font-size:19px;margin-top:10px}
.eq-sheet2 .pol > span:last-child{font-size:13px;font-weight:600;color:#4a433d}
.eq-sheet2 .p2{margin-top:22px}
.eq-sheet2 .eq-nota{margin:clamp(26px,4vh,38px) auto 0;font-size:15px;color:#6b635c}
@media (max-width:760px){
  .eq-sheet2 .eq-fotos{gap:10px}
  .eq-sheet2 .pol{width:31%;max-width:130px;padding:6px 6px 9px}
  .eq-sheet2 .pol b{font-size:15px} .eq-sheet2 .pol > span:last-child{font-size:11px;line-height:1.2}
  .eq-exp b{font-size:24px} .eq-exp span{font-size:12.5px}
}
@media (max-width:760px){ .hoja-papel{padding-bottom:110px} }

/* =====================================================================
   Recomposición: Trofeos y Estudio con rejillas de filas (nada puede montarse sobre otra cosa)
   ===================================================================== */
/* --- Trofeos: cabecera · vitrina · controles, cada uno en su fila --- */
@media (min-width:761px){
  .casa-cuarto > .casos.vitrina{padding:calc(var(--nav-h,84px) + 18px) 0 110px!important;height:100%;box-sizing:border-box}
  .casos.vitrina > .wrap{display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;gap:clamp(14px,2.4vh,28px)!important;height:100%}
  .casos.vitrina .casos-head{grid-template-columns:minmax(0,1fr) minmax(0,26rem)!important;column-gap:clamp(24px,5vw,80px)}
  .casos.vitrina .casos-ledger{position:relative;min-height:0}
  .casos.vitrina .rz{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;align-items:center!important}
  .casos.vitrina .rz-stat{grid-row:1!important;display:flex;flex-direction:column;justify-content:center;min-height:0}
  .casos.vitrina .rz-head{grid-column:2;grid-row:1;align-self:center!important;flex-direction:column!important;align-items:flex-start!important;gap:14px}
  .casos.vitrina .rz-desc{grid-column:2;grid-row:1;align-self:center;margin-top:clamp(70px,10vh,96px)!important}
  .casos.vitrina .rz-big{font-size:clamp(96px,min(16vw,24vh),300px)!important;line-height:.84}
  .casos.vitrina .rz-pre{font-size:clamp(20px,2.4vh,30px)!important;margin:0 0 6px!important;order:-1}
  .casos.vitrina .rz-unit{margin-top:clamp(10px,1.6vh,18px)!important}
  /* fila de controles: barra + pausa/siguiente a la izquierda, el botón de llamada a la derecha */
  .casos.vitrina .trofeos-ctl{grid-row:3;align-self:center}
  .casos.vitrina .casos-foot{grid-row:3;justify-self:end;align-self:center;padding:0!important;margin:0!important}
  .casos.vitrina > .wrap > .trofeos-ctl,.casos.vitrina > .wrap > .casos-foot{grid-column:1}
}
/* el "de 0 a" va arriba del número, no al lado (así nunca pisa el título) */
.casos.vitrina .rz-big{flex-direction:column;align-items:flex-start!important;gap:0!important}

/* --- Estudio: texto | visor arriba, la tira en su propia fila abajo --- */
@media (min-width:761px){
  .casa-cuarto > .contenido.set{display:grid!important;grid-template-rows:minmax(0,1fr) auto;padding:calc(var(--nav-h,84px) + 14px) 0 104px!important;height:100%;box-sizing:border-box}
  .contenido.set > .wrap:first-child{height:auto!important;min-height:0;grid-row:1;align-content:center;grid-template-rows:auto auto auto!important}
  .contenido.set .cont-foto{height:auto!important;max-height:100%;width:auto;aspect-ratio:4/5;grid-row:1 / span 3!important;align-self:center!important;margin:0!important;
    max-height:min(54vh,520px)!important;height:min(54vh,520px)!important}
  .tira{position:relative!important;bottom:auto!important;grid-row:2;height:132px!important;margin-top:clamp(14px,2.4vh,26px)}
}
@media (min-width:761px) and (max-height:760px){
  .contenido.set .cont-foto{height:min(46vh,420px)!important}
  .contenido.set .sec-title{font-size:clamp(28px,3vw,44px)}
  .contenido.set .cont-say{margin-top:8px} .contenido.set .cont-list li{padding:2px 0}
  .tira{height:112px!important} .tira-foto{height:96px} .tira-fija{width:96px;padding:5px 5px 22px}
}

/* --- móvil: Trofeos en columna con aire --- */
@media (max-width:760px){
  .casa-cuarto#trofeos{overflow-y:auto}
  .casa-cuarto > .casos.vitrina{height:auto!important;min-height:100%;padding:calc(var(--nav-h,76px) + 10px) 0 104px!important}
  .casos.vitrina > .wrap{display:flex!important;flex-direction:column;gap:18px;height:auto}
  .casos.vitrina .casos-ledger{position:relative;display:grid}
  .casos.vitrina .rz{position:relative!important;inset:auto;grid-area:1 / 1;display:flex!important;flex-direction:column;gap:10px}
  .casos.vitrina .rz-big{font-size:clamp(72px,24vw,110px)!important}
  .casos.vitrina .rz-pre{font-size:18px!important}
  .casos.vitrina .rz-desc{margin-top:4px!important}
}
/* Trofeos: dos filas en la columna derecha (etiqueta arriba, explicación abajo); todo alineado a la izquierda */
@media (min-width:761px){
  .casos.vitrina .rz{grid-template-rows:1fr 1fr!important;row-gap:14px}
  .casos.vitrina .rz-stat{grid-row:1 / span 2!important}
  .casos.vitrina .rz-head{grid-row:1!important;align-self:end!important}
  .casos.vitrina .rz-desc{grid-row:2!important;align-self:start!important;margin-top:0!important}
}
.casos.vitrina .rz-big{align-items:flex-start!important;text-align:left}
.casos.vitrina .rz-pre{align-self:flex-start!important;margin-left:0!important;text-align:left}
@media (max-width:760px){
  .casos.vitrina .rz > *,.casos.vitrina .rz-head{align-self:flex-start!important;margin-left:0!important;text-align:left;justify-content:flex-start!important}
}
/* Estudio en pantallas bajas: menos texto en la columna para que nunca baje hasta la tira */
@media (min-width:761px) and (max-height:800px){
  .contenido.set .cont-sub,.contenido.set .cont-kicker{display:none}
  .contenido.set .cont-list{margin-top:10px}
}
.contenido.set .cont-list{padding-left:2px} .contenido.set .cont-list li{padding-left:22px}
.pie5-top{grid-template-columns:1fr!important}

/* ===== comunicación por niveles ===== */
.mic-intro{margin:10px 0 0;font-size:15px;line-height:1.5;color:#b5aca4;max-width:40ch}
.cl-pasos{margin:22px 0 0;padding:0;list-style:none;counter-reset:p;display:grid;gap:12px;position:relative;z-index:2}
.cl-pasos li{counter-increment:p;display:flex;align-items:center;gap:12px;font-size:16px;color:#e8e2dc}
.cl-pasos li::before{content:counter(p);display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--lima);color:var(--negro);font:800 14px 'Bricolage Grotesque'}
html.v5 .casa-cuarto.activo .cl-pasos li{animation:sube .5s cubic-bezier(.2,1.4,.35,1) both}
html.v5 .casa-cuarto.activo .cl-pasos li:nth-child(2){animation-delay:.12s} html.v5 .casa-cuarto.activo .cl-pasos li:nth-child(3){animation-delay:.24s}
/* trofeos: la nota de confidencialidad es parte de la confianza, se ve */
.casos.vitrina .casos-nda{display:inline-flex!important;grid-column:1 / -1;justify-self:start;margin-top:10px;font-size:12.5px;padding:7px 14px}
@media (max-width:760px){ .mic-intro{font-size:14px} .casos.vitrina .casos-nda{font-size:11.5px} }

/* ===== revisión: nada flotante encima del contenido ===== */
/* indicador en la barra superior también en escritorio */
@media (min-width:761px){
  .casa-m.en-nav{margin:0 auto 0 18px;gap:10px}
  .casa-m.en-nav .cm-figura{width:40px;height:31px}
  .casa-m.en-nav .cm-txt{width:150px}
}
@media (min-width:761px) and (max-width:1100px){ .casa-m.en-nav .cm-txt{display:none} }
/* móvil, dentro de la casa: el selector de idioma/tema solo aparece con el menú abierto */
@media (max-width:760px){
  html.en-casa .ui-switch{opacity:0!important;pointer-events:none!important;transform:translateY(20px)!important}
  html.en-casa body:has(#navlinks.open) .ui-switch{opacity:1!important;pointer-events:auto!important;transform:none!important;z-index:130!important}
}
.h5-lock,.h5-lock *{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}

/* =========================================================================
   Página simple (18/10/2026): scroll normal tras la lupa; lo demás en las esquinas
   ========================================================================= */
/* Marketing con intención: "Qué hacemos" (oscuro) sobre la promesa (lima) */
.hoja-promesa .giro{border-radius:22px;padding:clamp(34px,5vw,64px) clamp(20px,4vw,56px);margin:0 0 clamp(18px,3vw,28px)}
.hoja-promesa .giro .container{padding:0;max-width:none}
/* Presencia internacional: el globo grande, a lo ancho de la hoja */
/* el globo llena la hoja de borde a borde: al acercarse, el corte coincide con el borde del papel */
.hoja-mundo .hoja-papel{width:min(1320px,calc(100% - 24px));padding:0;overflow-x:hidden}
.hoja-mundo .hoja-volver{position:absolute;top:18px;right:20px;margin:0;float:none}
.hoja-mundo .hoja-espiral{z-index:2}
.hoja-mundo .mundo{min-height:0}
.hoja-mundo .mundo-globo{height:min(calc(100svh - 34px),820px)}
.hoja-mundo .mundo-txt{padding:clamp(60px,9vh,96px) 0 clamp(30px,5vh,60px) clamp(22px,4vw,64px)}
/* +10 años: qué se resuelve en casa y una tira pequeña de piezas */
.eq-casa{margin:clamp(30px,5vw,56px) 0 8px;padding-top:clamp(24px,4vw,40px);border-top:2px dashed rgba(169,130,199,.45)}
.eq-casa-t{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(26px,3vw,40px);line-height:1.02;margin:0 0 18px;max-width:20ch}
.eq-casa .cont-say{background:none;border:0;padding:0 0 0 2px;margin:0;overflow:visible;gap:12px}
.eq-casa .cont-say::after{display:none}
.eq-tira{overflow:hidden;display:flex;margin:22px 0 14px;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.eq-tira-pista{list-style:none;margin:0;padding:0;display:flex;gap:12px;padding-right:12px;flex:none;animation:eqTira 40s linear infinite}
.eq-tira:hover .eq-tira-pista{animation-play-state:paused}
.eq-tira li{flex:none;width:clamp(110px,13vw,150px);aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#eee}
.eq-tira img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes eqTira{to{transform:translateX(-100%)}}
.eq-ig{display:inline-block;font-weight:600;color:var(--negro);text-underline-offset:4px}
/* pie: Escuchamos ✦ Creamos ✦ Amplificamos, franja que corre despacio */
.pie5-verbos{overflow:hidden;display:block;text-align:left;margin-top:30px;padding:14px 0;border-top:1.5px solid rgba(28,26,25,.14);border-bottom:1.5px solid rgba(28,26,25,.14);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pv-pista{display:flex;width:max-content;white-space:nowrap;animation:pvCorre 34s linear infinite}
.pie5-verbos .pv-pista span{padding:0 .55em;margin:0;color:inherit}
.pv-pista i{font-style:normal;color:var(--naranja);padding:0 .35em}
@keyframes pvCorre{to{transform:translateX(-50%)}}
html[data-theme="dark"] .pie5-verbos{border-color:rgba(255,255,255,.14)}
@media (prefers-reduced-motion: reduce){ .pv-pista,.eq-tira-pista{animation:none} }
@media (max-width:760px){
  .hoja-mundo .hoja-papel{width:100%}
  .hoja-mundo .mundo{grid-template-rows:auto auto}
  .hoja-mundo .mundo-globo{height:50svh}
  .hoja-mundo .mundo-txt{padding:0 20px 40px}
  .hoja-mundo .mundo-crece{display:block}
  .eq-tira li{width:104px}
  .pv-pista{animation-duration:26s}
}
/* dentro de las hojas no se espera al scroll: todo a la vista al abrir */
.hoja .fu{opacity:1!important;transform:none!important;filter:none!important}
.hoja-promesa .giro .wrap{max-width:none;padding:0;width:auto}
.eq-casa .cont-kicker{color:var(--lavanda-deep,#7a4fa0);margin:0 0 10px}
.eq-casa .cont-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 22px}
.eq-casa .cont-list li{color:var(--negro);font:700 clamp(17px,1.6vw,21px)/1.3 'Bricolage Grotesque';padding:6px 0 6px 22px;position:relative}
.eq-casa .cont-sub{color:#4a4440;margin:14px 0 0;font-size:16px}
/* overflow:clip no crea contexto de bloque: el bloque oscuro ocupa todo el ancho aunque flote "Volver" */
.hoja-promesa .giro{overflow:clip}
@media (max-width:760px){ .hoja-promesa .giro-title{font-size:32px} .hoja-promesa .giro{padding:30px 20px} }

/* =========================================================================
   Hojas modernas (18/10/2026): panel oscuro que sube desde abajo, sin cuaderno.
   Fondo casi negro, un brillo del color de cada esquina, asa arriba, "Volver" de vidrio.
   Igual en modo claro y oscuro: el contraste lo da el panel.
   ========================================================================= */
.hoja{--acento:var(--lima)}
.hoja-equipo{--acento:#A982C7} .hoja-promesa{--acento:#C4E03A} .hoja-mundo{--acento:#EE5A2A}
.hoja-fondo{background:rgba(12,11,10,.62);backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1)}
.hoja .hoja-papel,.hoja-equipo .hoja-papel,.hoja-promesa .hoja-papel,.hoja-mundo .hoja-papel{
  background:radial-gradient(120% 60% at 100% 0%,color-mix(in srgb,var(--acento) 16%,transparent),transparent 60%),
             radial-gradient(80% 50% at 0% 100%,rgba(255,255,255,.035),transparent 70%),#151312;
  color:#EDE7E1;border:1px solid rgba(255,255,255,.08);border-bottom:0;border-radius:28px 28px 0 0;
  box-shadow:0 -30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(104%);transform-origin:50% 100%;transition:transform .7s cubic-bezier(.2,1,.3,1)}
.hoja.abierta .hoja-papel{transform:none}
.hoja.cerrando .hoja-papel{transform:translateY(104%);transition:transform .42s cubic-bezier(.6,0,.8,.3)}
.hoja-equipo .hoja-papel::before{display:none}
/* el asa de una hoja moderna, en vez de la espiral */
.hoja .hoja-espiral,.hoja-mundo .hoja-espiral{top:12px;left:50%;right:auto;width:46px;height:5px;margin-left:-23px;border-radius:9px;
  background:rgba(255,255,255,.22);z-index:3}
.hoja .hoja-espiral::after{display:none}
.hoja .hoja-volver,.hoja-mundo .hoja-volver{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .2s,color .2s,border-color .2s,transform .16s ease-out}
@media (hover:hover) and (pointer:fine){ .hoja .hoja-volver:hover{background:var(--acento);color:var(--negro);border-color:var(--acento)} }
.hoja .hoja-volver:focus-visible{outline:3px solid var(--acento)}

/* +10 años: tarjetas limpias, sin cinta ni giro */
.hoja-equipo .sticker{background:var(--acento);color:var(--negro)}
.hoja-equipo .eq-h{color:#fff}
.hoja-equipo .eq-exp{background:rgba(169,130,199,.14);border:1px solid rgba(169,130,199,.3)}
.hoja-equipo .eq-exp b{color:var(--acento)} .hoja-equipo .eq-exp span{color:#d6cde0}
.hoja-equipo .pol,.eq-sheet2 .pol{--r:0deg;background:none;box-shadow:none;padding:0;margin-top:0}
.hoja-equipo .cinta{display:none}
.hoja-equipo .pol img{border-radius:20px;box-shadow:0 18px 40px rgba(0,0,0,.4);outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
.hoja-equipo .pol b{color:#fff;margin-top:14px}
.hoja-equipo .pol > span:last-child,.eq-sheet2 .pol > span:last-child{color:#a79e97}
.hoja-equipo .pol{transform:translateY(40px)}
.hoja-equipo.abierta .pol{transform:none}
@media (hover:hover) and (pointer:fine){ .hoja-equipo.abierta .pol:hover{transform:translateY(-6px)} }
.hoja-equipo .eq-nota,.eq-sheet2 .eq-nota{color:#a79e97}
.eq-casa{border-top:1px solid rgba(255,255,255,.1)}
.eq-casa-t{color:#fff}
.eq-casa .cont-kicker{color:var(--acento)}
.eq-casa .cont-list li{color:#EDE7E1}
.eq-casa .cont-sub{color:#a79e97}
.eq-tira li{background:#222}
.eq-ig{color:var(--lima)}

/* Marketing con intención: un solo panel oscuro, la promesa debajo separada por una línea */
.hoja-promesa .giro{background:none;border-radius:0;padding:0 0 clamp(34px,5vw,56px);margin:0}
.hoja-promesa .giro .orb{display:none}
.hoja .promesa{border-top:1px solid rgba(255,255,255,.1);padding-top:clamp(34px,5vw,56px)}
.hoja .promesa::before,.hoja .promesa-iso{display:none}
.hoja .promesa-pre{color:var(--lima)}
.hoja .promesa-big{color:#fff}
.hoja .promesa-big .strike{color:#8a8079}
.hoja .pr-chip{background:rgba(255,255,255,.05);border:1px solid rgba(196,224,58,.35);color:#EDE7E1}
@media (max-width:760px){ .hoja-promesa .giro{padding:0 0 30px} }

/* la M de bajada: en el menú, se llena con el avance; la estrella va encima; línea fina debajo del menú */
.baja{display:flex;align-items:center;gap:10px;margin:0 auto 0 14px;min-width:0}
.baja-fig{position:relative;width:40px;height:31px;flex:none}
.baja-svg{width:100%;height:100%;display:block;overflow:visible}
.baja-base{fill:rgba(255,255,255,.16)}
.baja-lleno{fill:var(--lima)}
.baja-yo{position:absolute;top:-11px;left:0;width:11px;height:11px;margin-left:-5.5px;color:var(--naranja);transition:translate .25s cubic-bezier(.22,1,.36,1)}
.baja-yo svg{width:100%;height:100%;display:block;animation:giraLento 6s linear infinite}
/* mientras se baja, la estrella se asoma hacia abajo y la M respira */
.baja.bajando .baja-yo{translate:0 3px}
.baja.bajando .baja-lleno{filter:drop-shadow(0 0 4px rgba(196,224,58,.55))}
.baja-txt{font:600 12.5px 'Lexend';color:#cfc9c3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-inner{position:relative}
.baja-linea{position:absolute;left:24px;right:24px;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--lima),var(--naranja));
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;opacity:.9}
@media (max-width:420px){ .baja-txt{display:none} .baja{margin-left:10px} }
@media (prefers-reduced-motion:reduce){ .baja-yo,.baja-yo svg{transition:none;animation:none} }

/* =========================================================================
   Portada: negro MONO con matices, y esquinas que invitan a abrirse (18/10/2026)
   ========================================================================= */
/* el fondo: negro profundo, un halo cálido detrás del logotipo, viñeta y tres brillos del color de cada esquina */
.hero.hero5{background:
  radial-gradient(60% 55% at 50% 44%,#2b2725 0%,rgba(43,39,37,0) 70%),
  radial-gradient(140% 120% at 50% 50%,#1a1817 40%,#0e0d0c 100%)}
.h5-luz{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.h5-luz span{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(40px);opacity:.55;transition:opacity .6s ease,transform 1.2s cubic-bezier(.22,1,.36,1)}
.luz-lav{top:-38vmax;right:-30vmax;background:radial-gradient(circle,rgba(169,130,199,.38),transparent 62%)}
.luz-lim{bottom:-40vmax;left:-32vmax;background:radial-gradient(circle,rgba(196,224,58,.26),transparent 62%)}
.luz-org{bottom:-40vmax;right:-32vmax;background:radial-gradient(circle,rgba(238,90,42,.32),transparent 62%)}
html.v5 .h5-luz span{animation:luzRespira 9s ease-in-out infinite}
html.v5 .h5-luz .luz-lim{animation-delay:-3s} html.v5 .h5-luz .luz-org{animation-delay:-6s}
@keyframes luzRespira{50%{opacity:.85;transform:scale(1.06)}}
/* al acercarse a una esquina, su luz se enciende: la portada señala dónde mirar */
.hero5:has(.t-lav:is(:hover,:focus-visible)) .luz-lav,
.hero5:has(.t-lim:is(:hover,:focus-visible)) .luz-lim,
.hero5:has(.t-org:is(:hover,:focus-visible)) .luz-org{opacity:1;animation-play-state:paused;transform:scale(1.12)}
.h5-in{position:relative;z-index:1}

/* la frase que dice qué hay adentro */
/* las esquinas: una frase corta y una flecha. Detrás de cada esquina hay "hojas" del mismo color que
   asoman de vez en cuando, como un cajón que se abre un poco: invita a tirar de él sin decir "clic" */
.hero5 button.h5-tab{display:flex;flex-direction:row;align-items:center;gap:12px;width:auto;height:auto;max-width:none;
  padding:clamp(16px,1.6vw,22px) clamp(20px,2vw,28px)}
.hero5 .t-lav{padding-top:clamp(18px,2vw,26px);--hx:-1;--hy:1;--c1:rgba(169,130,199,.55);--c2:rgba(169,130,199,.22)}
.hero5 .t-lim{--hx:1;--hy:-1;--c1:rgba(196,224,58,.5);--c2:rgba(196,224,58,.2)}
.hero5 .t-org{--hx:-1;--hy:-1;--c1:rgba(238,90,42,.55);--c2:rgba(238,90,42,.22)}
.hero5 .t-lav,.hero5 .t-org{text-align:right} .hero5 .t-lim{text-align:left}
.hero5 .h5-stat{display:block;max-width:none}
.hero5 .h5-stat b,.hero5 .t-lav .h5-stat b,.hero5 .t-lim .h5-stat b{display:block;font:800 clamp(16px,1.35vw,20px)/1.15 'Bricolage Grotesque';letter-spacing:-.01em;max-width:none;white-space:nowrap}
/* la flecha: un círculo pequeño que mira hacia el centro de la portada */
.h5-ir{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--negro);color:#fff;
  transition:transform .4s cubic-bezier(.22,1,.36,1)}
.t-org .h5-ir{background:#fff;color:var(--naranja)}
.h5-ir svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.t-lav .h5-ir svg{transform:rotate(180deg)} .t-lim .h5-ir svg{transform:none} .t-org .h5-ir svg{transform:rotate(-90deg)}
/* las hojas que asoman: dos capas del color de la esquina, abiertas en abanico hacia el centro */
.hero5 button.h5-tab{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .6s cubic-bezier(.22,1,.36,1),filter .25s}
@keyframes asoma{
  0%,100%{box-shadow:0 0 0 0 var(--c1),0 0 0 0 var(--c2)}
  7%{box-shadow:calc(var(--hx) * 7px) calc(var(--hy) * 7px) 0 0 var(--c1),calc(var(--hx) * 14px) calc(var(--hy) * 14px) 0 0 var(--c2)}
  15%{box-shadow:calc(var(--hx) * 7px) calc(var(--hy) * 7px) 0 0 var(--c1),calc(var(--hx) * 14px) calc(var(--hy) * 14px) 0 0 var(--c2)}
  24%{box-shadow:0 0 0 0 var(--c1),0 0 0 0 var(--c2)}}
@keyframes asomaIr{0%,100%{transform:none}7%,15%{transform:translate(calc(var(--hx) * 3px),calc(var(--hy) * 3px)) scale(1.08)}24%{transform:none}}
html.v5 body.armado .hero5 .h5-tab{animation:asoma 9s cubic-bezier(.22,1,.36,1) 2.2s infinite}
html.v5 body.armado .hero5 .t-lim{animation-delay:5.2s}
html.v5 body.armado .hero5 .t-org{animation-delay:8.2s}
html.v5 body.armado .hero5 .h5-ir{animation:asomaIr 9s cubic-bezier(.22,1,.36,1) 2.2s infinite}
html.v5 body.armado .hero5 .t-lim .h5-ir{animation-delay:5.2s}
html.v5 body.armado .hero5 .t-org .h5-ir{animation-delay:8.2s}
html.v5 body.entrando .h5-tab .h5-ir{opacity:0}
/* encima o con el teclado: el cajón se abre y se queda abierto, la flecha avanza */
html.v5 body .hero5 button.h5-tab:is(:hover,:focus-visible){animation:none;
  box-shadow:calc(var(--hx) * 8px) calc(var(--hy) * 8px) 0 0 var(--c1),calc(var(--hx) * 16px) calc(var(--hy) * 16px) 0 0 var(--c2)}
html.v5 body .hero5 button.h5-tab:is(:hover,:focus-visible) .h5-ir{animation:none;transform:translate(calc(var(--hx) * 4px),calc(var(--hy) * 4px)) scale(1.1)}
@media (hover:hover) and (pointer:fine){ .hero5 .t-lav:hover,.hero5 .t-lim:hover,.hero5 .t-org:hover{transform:none} }
@media (max-width:760px){
  .hero5 button.h5-tab{gap:10px;padding:12px 14px}
  .hero5 .t-lav{padding-top:14px}
  .hero5 .h5-stat b,.hero5 .t-lav .h5-stat b,.hero5 .t-lim .h5-stat b{font-size:13.5px;white-space:normal;max-width:16ch}
  .hero5 .t-lim,.hero5 .t-org{max-width:47vw}
  .hero5 .t-lav{max-width:52vw}
  .h5-ir{width:26px;height:26px} .h5-ir svg{width:13px;height:13px}
  .hero5 .t-lim .h5-stat b,.hero5 .t-org .h5-stat b{max-width:14ch;font-size:13px}
  .hero5 .t-lim,.hero5 .t-org{max-width:49vw}
}
@media (prefers-reduced-motion:reduce){ .h5-luz span,.hero5 .h5-tab,.hero5 .h5-ir{animation:none!important} }


/* ===== Portada: el fondo negro de la marca (tramado MONO) y la estrella del logotipo en cada esquina ===== */
/* el tramado de la línea gráfica, en gris sobre negro, con luz y sombra; se mueve muy despacio y sigue apenas al ratón */
.h5-luz .luz-tram{position:absolute;inset:-12%;background:linear-gradient(160deg,#5a5450 0%,#3a3633 45%,#2a2725 100%);opacity:.34;
  -webkit-mask:url(/assets/brand/tramado.png) 0 0/46vw auto repeat;mask:url(/assets/brand/tramado.png) 0 0/46vw auto repeat;
  translate:var(--lx,0) var(--ly,0)}
html.v5 .h5-luz .luz-tram{animation:tramDeriva 120s linear infinite}
@keyframes tramDeriva{to{-webkit-mask-position:46vw -123vw;mask-position:46vw -123vw}}
/* sombra: el centro se ilumina detrás del logotipo y los bordes caen a negro */
.h5-luz::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 45%,rgba(14,13,12,.15) 0%,rgba(14,13,12,.55) 70%,rgba(10,9,8,.85) 100%)}
@media (max-width:760px){ .h5-luz .luz-tram{-webkit-mask-size:96vw auto;mask-size:96vw auto;opacity:.4} @keyframes tramDeriva{to{-webkit-mask-position:96vw -257vw;mask-position:96vw -257vw}} }
/* la estrella del logotipo, sin círculo ni texto: gira despacio; cuando la esquina asoma, da un giro */
.h5-ir{width:22px;height:22px;background:none!important;border-radius:0;color:var(--negro)}
.t-org .h5-ir{color:#fff}
.h5-ir svg{width:100%;height:100%;fill:currentColor;stroke:none;transform:none!important;animation:giraLento 14s linear infinite}
@keyframes asomaIr{0%,100%{transform:none}7%,15%{transform:rotate(180deg) scale(1.25)}24%{transform:rotate(360deg)}}
html.v5 body .hero5 button.h5-tab:is(:hover,:focus-visible) .h5-ir{transform:rotate(90deg) scale(1.3)}
.h5-ir{transition:transform .6s cubic-bezier(.22,1,.36,1)}
@media (max-width:760px){ .h5-ir{width:18px;height:18px} }
@media (prefers-reduced-motion:reduce){ .h5-luz .luz-tram,.h5-ir svg{animation:none!important} }
@media (max-width:360px){
  .hero5 button.h5-tab{gap:7px;padding:10px 11px}
  .hero5 .h5-stat b,.hero5 .t-lav .h5-stat b,.hero5 .t-lim .h5-stat b,.hero5 .t-org .h5-stat b{font-size:11.5px;max-width:12ch}
  .hero5 .t-lav{max-width:56vw}
  .h5-ir{width:15px;height:15px}
}
/* hoja del equipo: botón de Instagram, pequeño y con el logo */
.eq-ig{display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding:10px 16px 10px 12px;border-radius:999px;text-decoration:none;
  font:700 14px/1 'Lexend';color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(169,130,199,.45);
  transition:background .25s,color .25s,border-color .25s,transform .2s ease-out}
.eq-ig .ic{width:20px;height:20px;color:var(--lavanda)}
.eq-ig .eq-ig-f{width:15px;height:15px;color:currentColor;opacity:.7;transition:transform .3s cubic-bezier(.22,1,.36,1)}
@media (hover:hover) and (pointer:fine){
  .eq-ig:hover{background:var(--lavanda);border-color:var(--lavanda);color:var(--negro)}
  .eq-ig:hover .ic{color:var(--negro)}
  .eq-ig:hover .eq-ig-f{transform:translate(2px,-2px)}
}
.eq-ig:active{transform:scale(.96)}
.eq-ig:focus-visible{outline:3px solid var(--lavanda);outline-offset:3px}
.eq-ig .ic:not(.eq-ig-f){fill:currentColor;stroke:none}

/* apertura: la frase de la marca, pegada debajo de las tres palabras */
.v5-intro .in-verbs .in-lema{position:static;margin:clamp(14px,1.8vw,26px) 0 0;text-align:left;white-space:nowrap;
  font:500 clamp(17px,1.9vw,28px)/1.2 'Lexend';letter-spacing:0;text-transform:none;color:#e8e2dc;
  opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.v5-intro.lema .in-lema{opacity:1;transform:none}
.v5-intro.filling .in-lema{opacity:0;transition:opacity .25s ease}
.v5-intro .in-lema .swash::first-letter{font-size:1.45em}
/* mientras llega la letra de la marca no se ve texto en otra fuente */
html.v5 .v5-intro:not(.fuentes) .in-verbs,html.v5 .v5-intro:not(.fuentes) .in-caret{visibility:hidden}
@media (max-width:600px){ .v5-intro .in-verbs .in-lema{font-size:clamp(15px,4.6vw,19px)} }