/* ============================================================
   TURISTEA WITH US — HOME
   Paleta oficial (definida desde el diseño):
   magenta #DC257B · azul #0889C4 · lima #C9E400 ·
   naranja #FF931E · negro #0B0B0B · blanco #FFFFFF
============================================================ */
:root{
  --magenta:#DC257B;
  --blue:#0889C4;
  --lime:#C9E400;
  --orange:#FF931E;
  --black:#0B0B0B;
  --white:#FFFFFF;
  --pink-soft:#EC9CC6; /* tinte claro del magenta */
  /* tintes suaves de la paleta: color de fondo para secciones de lectura
     sin competir con los módulos fuertes (magenta/azul/naranja/negro).
     La lima NO se usa como fondo: queda reservada para resaltar. */
  --rose-soft:#FADFF0;  /* tinte muy claro del magenta */
  --sky-soft:#DCEDF8;   /* tinte muy claro del azul */
  --peach-soft:#FDEBD5; /* tinte muy claro del naranja */
  --f-display:'Anton',sans-serif;
  --f-alt:'Oswald',sans-serif;
  --f-mono:'Space Mono',monospace;
  --f-hand:'Oswald',sans-serif;
  --header-h:96px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-alt);
  background:var(--black);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--lime);color:var(--black)}
img{max-width:100%}
a{text-decoration:none;color:inherit}

/* ============ HEADER FIJO ============ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,4vw,64px);
  transition:color .4s;
  color:var(--black);
}
.header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(0,0,0,.06),transparent);
  opacity:0;transition:opacity .4s;
}
.header__logo{
  display:flex;align-items:center;
  background:var(--white);
  border:3px solid var(--black);
  box-shadow:5px 5px 0 var(--black);
  padding:6px 12px 8px;
  rotate:-2deg;
  transition:rotate .3s,translate .3s,box-shadow .3s;
}
.header__logo:hover{rotate:0deg;translate:2px 2px;box-shadow:3px 3px 0 var(--black)}
.header__logo img{height:44px;width:auto;display:block}
.header--dark .header__logo{box-shadow:5px 5px 0 var(--lime)}
.header--dark .header__logo:hover{box-shadow:3px 3px 0 var(--lime)}
.header__nav{display:flex;gap:clamp(14px,2.4vw,42px)}
.header__nav a{
  font-family:var(--f-alt);font-weight:600;text-transform:uppercase;
  font-size:calc(clamp(.68rem,.9vw,.86rem) * var(--u-mono,1));letter-spacing:.12em;
  padding:6px 2px;position:relative;transition:opacity .3s;
}
.header__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--lime);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.77,0,.18,1);
}
.header__nav a:hover::after,.header__nav a.is-active::after{transform:scaleX(1)}
.header__right{display:flex;align-items:center;gap:clamp(12px,1.8vw,30px)}
.header__plus{font-size:2rem;font-weight:300;line-height:0;font-family:var(--f-alt)}
.header__cta{
  font-family:var(--f-mono);font-weight:700;text-transform:uppercase;
  font-size:calc(.62rem * var(--u-mono,1));letter-spacing:.14em;line-height:1.5;text-align:center;
  border:2px solid currentColor;padding:8px 14px;
  transition:background .3s,color .3s;
}
.header__cta:hover{background:var(--black);color:var(--lime);border-color:var(--black)}
/* modo oscuro (sección 4) */
.header--dark{color:var(--white)}
.header--dark::before{opacity:1}
.header--dark .header__cta:hover{background:var(--white);color:var(--black);border-color:var(--white)}

/* ============ RIELES LATERALES ============ */
.rail{position:fixed;z-index:90;display:flex;flex-direction:column;align-items:center;gap:14px}
.rail--left{left:26px;top:50%;transform:translateY(-50%)}
.rail--right{right:26px;top:50%;transform:translateY(-50%)}
.rail__cross{font-size:1.3rem;font-weight:300;opacity:.8}
.rail__line{width:2px;height:64px;background:currentColor;opacity:.55}
.rail--left{color:var(--black);transition:color .4s}
body.on-dark .rail--left{color:var(--white)}
.rail__dots{display:flex;flex-direction:column;gap:10px}
.rail__dots i{
  width:12px;height:12px;border-radius:50%;background:var(--c);
  border:1.5px solid rgba(0,0,0,.55);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.35);
  transition:transform .3s;
}
.rail__dots i:hover{transform:scale(1.5)}
.rail__label{
  writing-mode:vertical-rl;font-family:var(--f-mono);font-size:.65rem;
  letter-spacing:.3em;text-transform:uppercase;opacity:.75;
}
.rail__counter{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.15em;color:var(--black);transition:color .4s}
.rail__counter b{font-size:1rem}
body.on-dark .rail__counter{color:var(--white)}
.rail__progress{width:3px;height:140px;background:rgba(128,128,128,.35);position:relative;overflow:hidden}
.rail__progress i{position:absolute;top:0;left:0;right:0;height:0;background:var(--lime)}

/* ============ ESTRUCTURA DE SECCIONES ============ */
.sec{
  position:relative;min-height:100vh;overflow:hidden;
  padding:calc(var(--header-h) + 24px) clamp(20px,5vw,80px) 60px;
  display:flex;flex-direction:column;justify-content:center;
}
.sec--magenta{background:var(--magenta)}
.sec--blue{background:var(--blue)}
.sec--pink{background:var(--pink-soft)}
.sec--black{background:var(--black);color:var(--white)}

/* textura grunge sutil */
.sec::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sec--black::after{mix-blend-mode:screen;opacity:.35}

.sec__grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2vw,32px);align-items:center;
  max-width:1500px;margin:0 auto;width:100%;
}
.sec__index{
  position:absolute;bottom:18px;right:26px;z-index:2;
  font-family:var(--f-mono);font-size:.65rem;letter-spacing:.3em;opacity:.5;
}

/* ============ ELEMENTOS COMUNES ============ */
.tag-mono{
  font-family:var(--f-mono);font-size:calc(clamp(.75rem,.9vw,.88rem) * var(--u-mono,1));
  letter-spacing:.16em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.sq{width:10px;height:10px;display:inline-block}
.sq--lime{background:var(--lime)}
.sq--magenta{background:var(--magenta)}
.sq--blue{background:var(--blue)}

.line{display:block;text-transform:uppercase;line-height:.92}
.line--top{font-family:var(--f-display);color:var(--black)}
.line--mid{font-family:var(--f-display);color:var(--black)}
.line--bot{font-family:var(--f-display);color:var(--white);
  text-shadow:3px 3px 0 rgba(0,0,0,.18)}
.plus-lime{
  color:var(--lime);font-family:var(--f-display);font-weight:400;
  display:inline-block;transform:rotate(6deg);
  text-shadow:2px 2px 0 rgba(0,0,0,.25);margin-left:.08em;
}

/* pinceladas */
.brush{display:inline-block;position:relative;flex:none}
.brush span{
  position:relative;z-index:1;display:inline-block;white-space:nowrap;
  font-family:var(--f-mono);font-weight:700;text-transform:uppercase;
  font-size:calc(clamp(.68rem,1vw,.92rem) * var(--u-mono,1));letter-spacing:.12em;
  padding:.5em 1.1em;
}
.brush::before{
  content:"";position:absolute;inset:0;
  clip-path:polygon(0 18%,3% 0,97% 4%,100% 22%,98% 82%,95% 100%,4% 96%,0 78%);
  transform:rotate(-1deg);
}
.brush--black::before{background:var(--black)}
.brush--black span{color:var(--lime)}
.brush--magenta::before{background:var(--magenta)}
.brush--magenta span{color:var(--black)}
.brush--lime::before{background:var(--lime)}
.brush--lime span{color:var(--black)}
.brush--blackbrush::before{background:var(--black)}
.brush--blackbrush span{color:var(--lime);font-size:calc(clamp(.9rem,1.5vw,1.35rem) * var(--u-mono,1));line-height:1.4}

.hand{font-family:var(--f-hand);font-weight:600;font-size:calc(clamp(1.3rem,1.7vw,1.65rem) * var(--u-hand,1));line-height:1.38;letter-spacing:.01em;color:var(--black)}
.hand--sm{font-size:calc(clamp(1.1rem,1.3vw,1.34rem) * var(--u-hand,1))}
.hand--light{color:var(--white)}
.hand em{font-style:normal;color:var(--lime);font-weight:700}

/* reveal al hacer scroll */
.reveal{opacity:0;transform:translateY(46px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   SECCIÓN 01
============================================================ */
.s1-copy{grid-column:1/7}
.s1-title .line--top{font-size:calc(clamp(2rem,4.2vw,4.2rem) * var(--u-title,1));letter-spacing:.02em}
.s1-title .line--mid{font-size:calc(clamp(4.4rem,11vw,11rem) * var(--u-title,1));letter-spacing:.01em}
.s1-title .line--bot{font-size:calc(clamp(2.9rem,7.2vw,7.2rem) * var(--u-title,1))}
.s1-copy .brush{margin:26px 0 20px}
.s1-copy .txtlead{max-width:430px}
.s1-actions{display:flex;align-items:center;gap:34px;margin-top:34px;flex-wrap:wrap}

/* ══ Hero en pantallas de poca altura (portátiles con barras del
   navegador altas): el título usa vw y NO se encoge cuando falta
   altura, así que el botón quedaba cortado bajo el borde de la
   ventana durante todo el pin. Aquí compactamos la columna para que
   TODO quepa visible desde el principio, con aire bajo el botón ══ */
@media (min-width:821px) and (max-height:840px){
  html.intro-on .sec--magenta .sec__grid,
  .sec--magenta .sec__grid{
    padding-top:calc(var(--header-h) + 8px);padding-bottom:30px;
  }
  .s1-title .line--top{font-size:calc(clamp(1.6rem,3.2vw,3.2rem) * var(--u-title,1))}
  .s1-title .line--mid{font-size:calc(clamp(3.4rem,8.4vw,8.4rem) * var(--u-title,1))}
  .s1-title .line--bot{font-size:calc(clamp(2.2rem,5.4vw,5.4rem) * var(--u-title,1))}
  .s1-copy .brush{margin:14px 0 12px}
  .s1-copy .txtlead{max-width:420px;font-size:.95em}
  .s1-actions{margin-top:26px}
}

.btn-brush{
  position:relative;font-family:var(--f-display);text-transform:uppercase;
  font-size:calc(clamp(1rem,1.4vw,1.3rem) * var(--u-title,1));color:var(--black);
  padding:.75em 1.6em;letter-spacing:.05em;
  transition:transform .3s;
}
.btn-brush span{display:inline-block;transition:transform .3s}
.btn-brush::before{
  content:"";position:absolute;inset:0;background:var(--lime);z-index:-1;
  clip-path:polygon(0 22%,4% 0,96% 6%,100% 30%,97% 78%,93% 100%,3% 94%,0 70%);
}
.btn-brush:hover{transform:translateY(-4px) rotate(-1deg)}
.btn-brush:hover span{transform:translateX(6px)}

.btn-play{display:flex;align-items:center;gap:14px}
.btn-play i{
  width:58px;height:58px;border:3px solid var(--lime);border-radius:50%;
  display:grid;place-items:center;transition:background .3s,transform .3s;
}
.btn-play i svg{width:22px;height:22px;fill:var(--lime);margin-left:3px;transition:fill .3s}
.btn-play span{
  font-family:var(--f-mono);font-weight:700;text-transform:uppercase;
  font-size:calc(.68rem * var(--u-mono,1));letter-spacing:.16em;line-height:1.6;color:var(--black);
}
.btn-play:hover i{background:var(--lime);transform:scale(1.08)}
.btn-play:hover i svg{fill:var(--black)}

/* zona libre para el video scroll-parallax */
.s1-stage{grid-column:7/13;position:relative;min-height:480px;display:grid;place-items:center}
.s1-stage__slot{position:relative;width:min(100%,680px);aspect-ratio:16/9;transition:transform .1s linear}

.s1-stage__slot{overflow:hidden}
.s1-stage__slot video,.s2-stage__slot video{width:100%;height:100%;object-fit:cover;display:block}
/* encuadre del video dentro de su ventana: ligero zoom hacia la
   ilustración para que la pieza llene el marco (aplica igual al
   poster, así portada y reproducción coinciden) */

/* ═══ Interruptor del efecto de entrada (parallax del inicio) ═══ */
.intro-toggle{
  position:fixed;right:16px;bottom:16px;z-index:210;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--white);background:rgba(11,11,11,.85);
  border:1.5px solid rgba(255,255,255,.65);border-radius:999px;
  padding:8px 14px;cursor:pointer;backdrop-filter:blur(6px);
  transition:background .25s,color .25s,border-color .25s;
}
/* interruptor mini: lima a la derecha = ON · gris a la izquierda = OFF */
.intro-toggle::before{content:"";width:20px;height:11px;border-radius:99px;background:rgba(255,255,255,.25);flex:none;box-shadow:inset 10px 0 0 var(--lime)}
.intro-toggle[aria-pressed="false"]::before{box-shadow:inset -10px 0 0 rgba(255,255,255,.45)}
.intro-toggle[aria-pressed="false"]{border-color:var(--lime);color:var(--lime);animation:introPulse 2.2s ease-in-out infinite}
@keyframes introPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,228,0,.55)}55%{box-shadow:0 0 0 7px rgba(201,228,0,0)}}
.intro-toggle:hover{background:var(--lime);color:var(--black);border-color:var(--lime)}
/* fuera del primer módulo el interruptor se retira */
.intro-toggle.is-hidden{opacity:0;pointer-events:none;transform:translateY(8px)}
.intro-toggle{transition:background .25s,color .25s,border-color .25s,opacity .3s,transform .3s}
.intro-toggle:hover::before{background:var(--black)}



/* ============================================================
   SECCIÓN 02
============================================================ */
.marquee{
  position:relative;z-index:3;background:var(--black);color:var(--white);
  display:flex;align-items:center;
  margin:calc(-1 * (var(--header-h) + 24px)) calc(-1 * clamp(20px,5vw,80px)) 48px;
  padding:10px 0;overflow:hidden;
}
.marquee__arrow{color:var(--lime);padding:0 14px;font-size:.8rem;flex:none}
.marquee__track{overflow:hidden;flex:1}
.marquee__row{display:flex;width:max-content;animation:marquee 26s linear infinite}
.marquee__row span{
  font-family:var(--f-alt);font-weight:600;text-transform:uppercase;
  font-size:calc(clamp(.7rem,1vw,.92rem) * var(--u-mono,1));letter-spacing:.14em;white-space:nowrap;
}
.marquee__row b{color:var(--lime);font-weight:400;padding:0 .6em}
.marquee__row em{font-style:normal;color:var(--magenta)}
@keyframes marquee{to{transform:translateX(-50%)}}

.s2-copy{grid-column:1/8}
.s2-title .line--top{font-size:calc(clamp(3.4rem,8.4vw,8.4rem) * var(--u-title,1))}
.s2-title .line--bot{font-size:calc(clamp(3.2rem,7.8vw,7.8rem) * var(--u-title,1))}
.s2-brushes{display:flex;align-items:center;gap:14px;margin:24px 0 18px}
.s2-brushes .plus-lime{font-size:2.6rem;margin:0}
.s2-copy>.txtlead{max-width:560px}

/* dial circular: los 3 pasos en un solo lugar compacto */
.steps2{
  grid-column:1/12;margin-top:clamp(26px,4.5vh,52px);
  display:flex;align-items:center;gap:clamp(22px,2.6vw,44px);
}
/* ── Indicador de proceso 01 → 02 → 03 ─────────────────────────
   Sistema editorial compacto: número mono + etiqueta condensada,
   unidos por segmentos técnicos. El paso activo lleva marca lima.
   Pequeño y liviano para que el protagonismo quede en la zona
   interactiva de la derecha. */
.sti{
  list-style:none;margin:0;padding:0 0 4px;flex:none;
  display:flex;align-items:center;gap:clamp(10px,1.1vw,16px);
  border-bottom:1px solid rgba(255,255,255,.22);
}
.sti__step{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding-bottom:10px;position:relative;
}
.sti__step b{
  font-family:var(--f-mono);font-weight:700;
  font-size:calc(.72rem * var(--u-mono,1));letter-spacing:.14em;
  color:rgba(255,255,255,.55);padding:2px 5px;margin-left:-5px;
  transition:background .25s,color .25s;
}
.sti__label{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:calc(.8rem * var(--u-title,1));letter-spacing:.09em;line-height:1;
  color:rgba(255,255,255,.42);transition:color .25s;
  writing-mode:horizontal-tb;
}
/* segmento conector: discontinuo en reposo, sólido tras el paso activo */
.sti__line{
  flex:0 0 clamp(26px,3.4vw,52px);height:2px;margin-bottom:22px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 5px, transparent 5px 10px);
}
.sti__step.is-active b{background:var(--lime);color:var(--black)}
.sti__step.is-active .sti__label{color:var(--white)}
.sti__step.is-active::after{ /* marca técnica bajo el paso activo */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--lime);
}
.sti__step.is-active + .sti__line{
  background:var(--lime);height:2px;
}
/* marcas técnicas en los extremos del sistema */
.sti::before,.sti::after{
  font-family:var(--f-mono);font-size:.6rem;color:rgba(255,255,255,.5);
  align-self:flex-start;margin-top:-4px;
}
.sti::before{content:"+";margin-right:2px}
.sti::after{content:"+";margin-left:2px}

.dial-panels{position:relative;flex:1 1 260px;min-width:220px;min-height:230px}
.dial-panel{
  position:absolute;inset:0;opacity:0;transform:translateX(18px);
  transition:opacity .45s,transform .45s;pointer-events:none;
}
.dial-panel.is-active{opacity:1;transform:none;pointer-events:auto}
.step__head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.step__head .brush span{font-size:calc(.78rem * var(--u-mono,1));letter-spacing:.08em}
.step--box{flex:0 1 auto;min-width:0}
.step--box .brush::before{inset:-8px}
.step--box .hand{color:var(--black);margin-top:16px;max-width:290px}

/* zona libre para videos parallax (marcas de recorte del diseño original) */
.s2-stage{grid-column:8/13;position:relative;min-height:480px}

/* pista táctil del módulo Proceso: solo aparece en pantallas táctiles
   (en computador el módulo se navega con el cursor-flecha) */
.s2-tap-hint{display:none}
@media (pointer:coarse){
  .s2-tap-hint{
    display:inline-flex;align-items:center;gap:6px;
    position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
    z-index:6;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
    background:var(--black);color:var(--lime);
    border-radius:999px;padding:7px 14px;white-space:nowrap;
    box-shadow:3px 3px 0 rgba(11,11,11,.35);pointer-events:none;
    animation:tapPulse 2s ease-in-out infinite;
  }
  .s2-tap-hint b{color:var(--white)}
  .s2-tap-hint.is-off{opacity:0;transition:opacity .4s}
  @keyframes tapPulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}
}
.s2-stage__slot{width:min(96%,540px);aspect-ratio:5/4;transition:transform .1s linear;position:relative}

/* ===== Collage editorial · estado 01 — IDEA =====
   Cada PNG es un elemento independiente (posición/rotación propias)
   para animarse por separado en la siguiente fase. Capas:
   mapa (fondo) < foto < archivo (protagonista) < programa < cámara */
.s2-collage{position:absolute;inset:0}
/* el parallax va por transform (no por la propiedad translate) para
   componerse con los ajustes de posición del modo editor */
.s2-asset{position:absolute;height:auto;display:block;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 14px 22px rgba(0,0,0,.45));transform:translate(var(--px,0px),var(--py,0px));rotate:var(--rot,0deg);will-change:transform;transition:left .85s cubic-bezier(.45,.05,.2,1),top .85s cubic-bezier(.45,.05,.2,1),right .85s cubic-bezier(.45,.05,.2,1),bottom .85s cubic-bezier(.45,.05,.2,1),width .85s cubic-bezier(.45,.05,.2,1),rotate .85s cubic-bezier(.45,.05,.2,1),opacity .6s ease}
/* mapa del territorio: base del sistema, medio oculto, sale por la izquierda */
.s2-asset--mapa{--rot:-3deg;width:62%;left:-5%;top:7%;z-index:1;opacity:.96}
/* fotografía de observación: se apoya sobre el mapa, arriba a la derecha */
.s2-asset--foto{--rot:2deg;width:42%;right:1%;top:1%;z-index:2}
/* archivo creativo: PROTAGONISTA, mayor tamaño, centro-izquierda */
.s2-asset--archivo{--rot:-1.5deg;width:64%;left:7%;bottom:0;z-index:3}
/* programa de edición: la idea desarrollándose; monta sobre el archivo */
.s2-asset--programa{--rot:1.5deg;width:46%;right:5%;bottom:-3%;z-index:4}
/* cámara: acento secundario, puente entre la foto y el archivo */
.s2-asset--camara{--rot:6deg;width:19%;left:47%;top:2%;z-index:5;filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}
/* imagen comunitaria: el resultado final; en IDEA y HERRAMIENTA existe
   solo como promesa (invisible), en CREACIÓN toma el centro */
.s2-asset--comunidad{--rot:0deg;width:44%;left:28%;top:22%;z-index:7;opacity:0;pointer-events:none}
/* etiqueta técnica del sistema de observación: solo existe durante
   la interacción (hover sobre un asset); nunca permanece visible */
.s2-tag{position:absolute;z-index:9;left:0;top:0;pointer-events:none;opacity:0;translate:0 4px;transition:opacity .18s ease,translate .18s ease;font-family:var(--f-mono);line-height:1.5}
.s2-tag.is-on{opacity:1;translate:0 0}
.s2-tag__label{display:inline-block;background:var(--black);color:var(--lime);font-weight:700;font-size:calc(.62rem * var(--u-mono,1));letter-spacing:.16em;padding:3px 7px}
.s2-tag__meta{display:block;margin-top:3px;font-style:normal;font-size:calc(.56rem * var(--u-mono,1));letter-spacing:.1em;color:var(--black);background:rgba(255,255,255,.85);padding:2px 6px;width:max-content;max-width:220px}

/* ── Estado 02 · HERRAMIENTA: las piezas se reorganizan hacia un
   sistema más conectado y operativo — el programa de edición y la
   cámara toman el mando, el resto se acopla alrededor ── */
.s2-collage[data-state="herramienta"] .s2-asset--mapa{--rot:-2deg;width:48%;left:-4%;top:6%;opacity:.9}
.s2-collage[data-state="herramienta"] .s2-asset--foto{--rot:2.5deg;width:34%;right:1%;top:4%}
.s2-collage[data-state="herramienta"] .s2-asset--archivo{--rot:-2deg;width:48%;left:8%;bottom:2%}
.s2-collage[data-state="herramienta"] .s2-asset--programa{--rot:.5deg;width:52%;right:6%;bottom:0}
.s2-collage[data-state="herramienta"] .s2-asset--camara{--rot:-4deg;width:24%;left:44%;top:5%}

/* ── Estado 03 · CREACIÓN: ideas y herramientas se resuelven en una
   pieza con propósito — la imagen comunitaria toma el centro, el
   resto permanece como proceso en segundo plano ── */
.s2-collage[data-state="creacion"] .s2-asset--mapa{--rot:-1deg;width:30%;left:-4%;top:3%;opacity:.3}
.s2-collage[data-state="creacion"] .s2-asset--foto{--rot:2deg;width:19%;right:0;top:2%;opacity:.38}
.s2-collage[data-state="creacion"] .s2-asset--archivo{--rot:-1deg;width:28%;left:0;bottom:0;opacity:.42}
.s2-collage[data-state="creacion"] .s2-asset--programa{--rot:.5deg;width:26%;right:0;bottom:0;opacity:.48}
.s2-collage[data-state="creacion"] .s2-asset--camara{--rot:-3deg;width:11%;left:45%;top:0;opacity:.55}
/* la fotografía comunitaria crece hasta ser el punto de llegada:
   el proceso entero converge en ella */
.s2-collage[data-state="creacion"] .s2-asset--comunidad{--rot:0deg;width:66%;left:17%;top:9%;opacity:1;pointer-events:auto}

/* conexiones dinámicas: líneas finas punteadas entre piezas
   relacionadas; en HERRAMIENTA unen el proceso, en CREACIÓN
   convergen hacia la pieza final */
.s2-links{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;opacity:0;transition:opacity .7s ease .35s;overflow:visible}
.s2-links line{stroke:rgba(11,11,11,.55);stroke-width:1.4;stroke-dasharray:4 5}
.s2-collage[data-state="herramienta"] .s2-links,
.s2-collage[data-state="creacion"] .s2-links{opacity:1}
.s2-collage[data-state="creacion"] .s2-links line{stroke:rgba(11,11,11,.4);stroke-dasharray:none}

/* indicador de pasos ahora navegable */
.sti__step{cursor:pointer}
.sti__step--soon{cursor:default;opacity:.75}

/* ── Cursor-flecha del módulo Proceso (solo puntero fino) ──
   Dentro del módulo el cursor nativo se oculta y una flecha giratoria
   lo reemplaza: mitad izquierda apunta a la izquierda (estado previo),
   mitad derecha apunta a la derecha (estado siguiente). Al salir del
   módulo el cursor vuelve a la normalidad. */
@media (pointer:fine){
  #proceso, #proceso *{cursor:none}
}
.s2-cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;opacity:0;transition:opacity .2s ease}
.s2-cursor.is-on{opacity:1}
.s2-cursor__arr{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-22px 0 0 -22px;transition:transform .3s cubic-bezier(.3,.7,.3,1)}
.s2-cursor svg{display:block;overflow:visible}
.s2-cursor.is-left .s2-cursor__arr{transform:rotate(180deg)}
/* cuando ya no hay estado en esa dirección, la flecha se atenúa */
.s2-cursor.is-dead{opacity:.35}
.sti__step.is-done b{background:var(--black);color:var(--lime)}
.sti__step.is-done + .sti__line{background:var(--lime);height:2px}
/* el texto descriptivo respira al cambiar de estado */
#s2Lead{transition:opacity .28s ease}
#s2Lead.is-switching{opacity:0}
.cm{
  position:absolute;font-style:normal;font-family:var(--f-alt);font-weight:300;
  font-size:1.7rem;line-height:1;color:var(--black);opacity:.8;
}
.cm--tl{top:-30px;left:-30px}
.cm--tr{top:-30px;right:-30px}
.cm--bl{bottom:-30px;left:-30px}
.cm--br{bottom:-30px;right:-30px}

/* ============================================================
   SECCIÓN 03 — LA VENTANA (pieza editorial deliberadamente vacía)
   ETAPA 1: la escuela está comenzando; el vacío es el recurso
   visual. El marco está pensado para alojar después los proyectos
   reales (etapas 2-4) sin rediseñar el componente.
============================================================ */
.sec--pink{justify-content:flex-start}
.sec--pink .sec__grid{row-gap:clamp(30px,5vh,56px)}

/* encabezado (conservado) */
.s3-head{grid-column:1/13;text-align:center;margin-top:clamp(4px,1.5vh,18px)}
.s3-head .sq{margin-left:12px}
.s3-title{margin:20px 0 0}
.s3-title .line--top{font-size:calc(clamp(3.2rem,6.6vw,6.8rem) * var(--u-title,1))}
.s3-title .line--bot{font-size:calc(clamp(3.2rem,6.6vw,6.8rem) * var(--u-title,1))}

/* mensaje principal: segunda jerarquía después del titular */
.s3-msg{grid-column:1/13;text-align:center;position:relative;z-index:2}
.s3-big{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:calc(clamp(1.7rem,3.4vw,3rem) * var(--u-title,1));
  letter-spacing:.02em;line-height:1.12;color:var(--black);
}
.s3-small{
  font-family:var(--f-mono);font-size:calc(.8rem * var(--u-mono,1));
  letter-spacing:.05em;line-height:1.7;color:rgba(11,11,11,.72);
  margin:16px 0 0;
}

/* línea de proceso: aprender → crear → aplicar → (ventana) */
.s3-flow{
  grid-column:1/3;align-self:center;position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
.s3-flow__step{
  font-family:var(--f-mono);font-weight:700;font-size:calc(.66rem * var(--u-mono,1));
  letter-spacing:.18em;color:var(--black);white-space:nowrap;
}
.s3-flow__arr{font-style:normal;font-family:var(--f-mono);color:var(--magenta);margin-left:16px;line-height:1}
.s3-flow__arr--out{color:var(--blue);font-size:1.3rem;font-weight:700;margin:6px 0 0}

/* ── LA VENTANA ── */
.s3-win{grid-column:3/10;position:relative;z-index:2}
.s3-win__frame{
  position:relative;background:#fff;border:5px solid var(--black);
  box-shadow:16px 16px 0 rgba(0,0,0,.25);
  display:flex;flex-direction:column;min-height:clamp(430px,56vh,560px);
}
.s3-win__frame .cm{width:22px;height:22px}
.s3-win__frame .cm--tl{top:-14px;left:-14px}
.s3-win__frame .cm--tr{top:-14px;right:-14px}
.s3-win__frame .cm--bl{bottom:-14px;left:-14px}
.s3-win__frame .cm--br{bottom:-14px;right:-14px}
.s3-win__bar{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:2px solid var(--black);padding:13px 20px;
}
.s3-win__tag{
  font-family:var(--f-mono);font-weight:700;font-size:calc(.68rem * var(--u-mono,1));
  letter-spacing:.2em;color:var(--black);
}
.s3-win__dots{display:flex;gap:7px}
.s3-win__dots i{width:11px;height:11px;border:2px solid var(--black);border-radius:50%}
.s3-win__dots i:nth-child(1){background:var(--magenta)}
.s3-win__dots i:nth-child(2){background:var(--blue)}
.s3-win__dots i:nth-child(3){background:var(--lime)}
.s3-win__body{
  flex:1;position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(26px,5vh,52px) clamp(18px,4vw,48px);
  /* retícula técnica muy sutil: tablero de trabajo vacío */
  background-image:
    linear-gradient(rgba(11,11,11,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,11,11,.055) 1px,transparent 1px);
  background-size:46px 46px;background-position:center;
}
.s3-win__big{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:calc(clamp(1.9rem,3.8vw,3.6rem) * var(--u-title,1));
  line-height:1.08;color:var(--black);
}
.s3-win__big span{color:transparent;-webkit-text-stroke:2.5px var(--black)}
.s3-win__hand{font-size:calc(1.6rem * var(--u-hand,1));line-height:1.3;color:var(--magenta);margin-top:20px}
.s3-win__note{
  font-family:var(--f-mono);font-size:calc(.74rem * var(--u-mono,1));
  letter-spacing:.04em;line-height:1.7;color:rgba(11,11,11,.66);
  max-width:400px;margin-top:16px;
}
.s3-win__foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-top:2px solid var(--black);padding:13px 20px;
}
.s3-win__status{
  display:flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-weight:700;font-size:calc(.62rem * var(--u-mono,1));
  letter-spacing:.18em;color:var(--black);
}
.s3-win__pulse{
  width:9px;height:9px;border-radius:50%;background:var(--lime);
  border:1.5px solid var(--black);
  animation:s3pulse 2.2s ease-out infinite;
}
@keyframes s3pulse{
  0%{box-shadow:0 0 0 0 rgba(201,228,0,.55)}
  70%{box-shadow:0 0 0 11px rgba(201,228,0,0)}
  100%{box-shadow:0 0 0 0 rgba(201,228,0,0)}
}
.s3-win__coords{
  font-family:var(--f-mono);font-size:calc(.58rem * var(--u-mono,1));
  letter-spacing:.18em;color:rgba(11,11,11,.5);
}
/* microcopy alrededor del marco: discreto, no compite con el centro */
.s3-win__micro{
  position:absolute;font-family:var(--f-mono);font-size:calc(.56rem * var(--u-mono,1));
  letter-spacing:.18em;color:rgba(11,11,11,.55);white-space:nowrap;
}
.s3-win__micro--a{top:-26px;left:2px}
.s3-win__micro--b{top:-26px;right:2px}
.s3-win__micro--c{bottom:-26px;right:2px}

/* entrada escalonada de la ventana: expectativa + inicio */
.s3-win .reveal{transition-duration:.7s}
.s3-win .w1{transition-delay:.25s}
.s3-win .w2{transition-delay:.5s}
.s3-win .w3{transition-delay:.75s}
.s3-win .w4{transition-delay:.9s}
.s3-win .w5{transition-delay:1.05s}
.s3-win .w6{transition-delay:1.2s}

/* contexto territorial (secundario) + ecosistema futuro */
.s3-ctx{
  grid-column:10/13;align-self:center;position:relative;z-index:2;
  display:flex;flex-direction:column;gap:clamp(26px,3.5vh,40px);
  /* margen de seguridad frente a la burbuja fija de la esquina */
  padding-right:clamp(28px,3.4vw,52px);
}
.s3-ctx__tag{margin:0}
.s3-ctx__tag .brush span{font-size:calc(.66rem * var(--u-mono,1));letter-spacing:.14em}
.s3-ctx__place{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:calc(1.15rem * var(--u-title,1));letter-spacing:.04em;
  color:var(--black);margin:12px 0 8px;
}
.s3-ctx__txt{
  font-family:var(--f-mono);font-size:calc(.72rem * var(--u-mono,1));
  letter-spacing:.03em;line-height:1.7;color:rgba(11,11,11,.75);
}
.s3-ctx__note{
  font-family:var(--f-mono);font-size:calc(.62rem * var(--u-mono,1));
  letter-spacing:.05em;line-height:1.7;color:rgba(11,11,11,.55);margin-top:10px;
}
/* cartografía abstracta: recurso gráfico, no documentación */
.s3-map{width:100%;max-width:230px;height:auto;margin-top:18px}
.s3-map .grid path{fill:none;stroke:rgba(11,11,11,.09);stroke-width:1}
.s3-map .contour{fill:none;stroke:rgba(11,11,11,.32);stroke-width:1.6}
.s3-map .route{fill:none;stroke:var(--magenta);stroke-width:2.4;stroke-dasharray:6 7;stroke-linecap:round}
.s3-map .dot{fill:var(--blue);stroke:var(--black);stroke-width:1.5}
.s3-map .ring{fill:none;stroke:var(--blue);stroke-width:1.4;stroke-dasharray:3 4}
.s3-map .cross{fill:none;stroke:var(--blue);stroke-width:1;stroke-dasharray:2 4;opacity:.7}
.s3-map .dot2{fill:var(--magenta);stroke:var(--black);stroke-width:1.4}
.s3-map .ring2{fill:none;stroke:var(--magenta);stroke-width:1.3;stroke-dasharray:3 4}
.s3-map .coord{font-family:var(--f-mono);font-size:7.5px;letter-spacing:.06em;fill:rgba(11,11,11,.62)}
.s3-map .cap{font-family:var(--f-mono);font-size:6.5px;letter-spacing:.18em;fill:rgba(11,11,11,.4)}
.s3-map .compass circle{fill:none;stroke:rgba(11,11,11,.5);stroke-width:1.3}
.s3-map .compass path{fill:var(--black)}
.s3-map .compass text{font-family:var(--f-mono);font-weight:700;font-size:8px;fill:var(--black);text-anchor:middle}

/* cierre del módulo: transición emocional hacia la CTA */
.s3-end{grid-column:1/13;text-align:center;position:relative;z-index:2;padding-top:clamp(14px,3vh,30px)}
.s3-end__big{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:calc(clamp(2.5rem,6vw,5.4rem) * var(--u-title,1));
  line-height:1.02;color:var(--black);
}
.s3-end__sub{
  font-family:var(--f-mono);font-size:calc(.82rem * var(--u-mono,1));
  letter-spacing:.05em;line-height:1.7;color:rgba(11,11,11,.75);margin-top:18px;
}
.s3-end__hand{font-size:calc(1.6rem * var(--u-hand,1));color:var(--magenta);margin-top:12px}
.s3-end .btn-brush{display:inline-block;margin-top:32px}

/* ============================================================
   SECCIÓN 04 — vidrio roto
============================================================ */
.sec--black{justify-content:flex-start;padding-bottom:0}

.glass{position:absolute;inset:0;z-index:1;pointer-events:none}
.glass__art{
  position:absolute;top:0;right:0;height:100%;width:auto;z-index:1;
  object-fit:cover;object-position:right top;
}
.glass__burst{
  position:absolute;top:-8%;right:-6%;width:62vw;height:82vh;z-index:0;
  background:
    radial-gradient(circle at 78% 30%,rgba(201,228,0,.35),transparent 34%),
    radial-gradient(circle at 62% 55%,rgba(220,37,123,.4),transparent 38%),
    radial-gradient(circle at 88% 70%,rgba(8,137,196,.3),transparent 30%);
  filter:blur(30px);
}
/* red de constelación tras el vidrio */
.glass::before{
  content:"";position:absolute;top:0;right:0;width:70%;height:100%;
  background-image:
    radial-gradient(rgba(255,255,255,.8) 1.6px,transparent 2px),
    radial-gradient(rgba(201,228,0,.9) 2.2px,transparent 2.8px),
    radial-gradient(rgba(220,37,123,.9) 2.2px,transparent 2.8px);
  background-size:110px 110px,170px 170px,230px 230px;
  background-position:20px 30px,60px 80px,120px 40px;
  opacity:.3;
}
.shard{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:2;
  will-change:transform;
}
.shard polygon{
  fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.85);stroke-width:1.4;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.25));
}
.shard{animation:shardFloat 7s ease-in-out infinite alternate}
.shard:nth-of-type(odd){animation-duration:9s;animation-delay:-3s}
@keyframes shardFloat{
  from{rotate:-4deg}
  to{rotate:5deg}
}

.s4-copy{grid-column:1/7;position:relative;z-index:2}
.s4-title{margin:26px 0 28px}
.s4-title .line--top{color:var(--white);font-size:calc(clamp(3.2rem,7.6vw,7.6rem) * var(--u-title,1));text-shadow:none}
.s4-title .line--bot{color:var(--lime);font-size:calc(clamp(3.8rem,9.4vw,9.4rem) * var(--u-title,1));text-shadow:4px 4px 0 rgba(220,37,123,.35)}
.s4-copy .hand{max-width:480px}
/* acceso directo a la página "Talleres abiertos a la fecha" */
.s4-ctas{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap}
.s4-ctas__link{
  font-family:var(--f-mono);font-weight:700;font-size:calc(.72rem * var(--u-mono,1));
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);
  border-bottom:2px solid var(--lime);padding-bottom:6px;
  transition:color .3s,border-color .3s;
}
.s4-ctas__link:hover{color:var(--lime)}

.s4-box{
  grid-column:8/12;position:relative;z-index:2;justify-self:end;
  padding:clamp(24px,3vw,44px);margin-top:8vh;transition:transform .1s linear;
  background:var(--black);color:var(--white);text-decoration:none;
}
.s4-box:hover .s4-box__frame{border-color:var(--lime)}
.s4-box:hover .s4-box__go{color:var(--lime)}
.s4-box__go{
  display:block;margin-top:18px;
  font-family:var(--f-mono);font-size:calc(clamp(.72rem,1vw,.95rem) * var(--u-mono,1));
  letter-spacing:.14em;text-transform:none;color:rgba(255,255,255,.75);
  transition:color .25s;
}
.s4-box__frame,.s4-box__frame::before{
  position:absolute;inset:0;border:3px solid var(--white);content:"";
  transition:border-color .25s;
}
.s4-box__frame::before{inset:-10px;border-width:1.5px;opacity:.6;transform:rotate(-.7deg)}
.s4-box p{
  position:relative;font-family:var(--f-display);text-transform:uppercase;
  font-size:calc(clamp(1.6rem,2.6vw,2.6rem) * var(--u-title,1));line-height:1.25;color:var(--white);
}
.s4-box p b{color:var(--lime);font-weight:400}

.s4-footer{
  position:relative;z-index:2;margin-top:auto;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding:26px 0 30px;
}
.s4-footer__line{flex:1;height:2px;background:rgba(255,255,255,.6);min-width:60px}
.s4-footer__items{
  display:flex;align-items:center;gap:clamp(14px,1.8vw,32px);flex-wrap:wrap;
  font-family:var(--f-mono);font-size:calc(clamp(.78rem,.85vw,.86rem) * var(--u-mono,1));letter-spacing:.05em;
}
.s4-footer__items a,.s4-footer__items>span{display:flex;align-items:center;gap:10px;padding:10px 0}
.s4-footer__items svg{width:20px;height:20px;fill:none;stroke:var(--white);stroke-width:1.6}
.s4-footer__items a:hover{color:var(--lime)}
.s4-footer__items a:hover svg{stroke:var(--lime)}
.s4-footer__palette{display:flex;gap:8px}
.s4-footer__palette i{width:12px;height:12px;background:var(--c);border:1px solid rgba(255,255,255,.5)}

/* ============ AVISO "EN CONSTRUCCIÓN" ============ */
.soon{
  position:fixed;left:50%;bottom:36px;z-index:300;
  display:flex;align-items:center;gap:16px;
  transform:translate(-50%,160%);visibility:hidden;
  transition:transform .45s cubic-bezier(.2,.9,.25,1.2),visibility 0s .45s;
  pointer-events:none;
}
.soon.show{transform:translate(-50%,0);visibility:visible;transition:transform .45s cubic-bezier(.2,.9,.25,1.2),visibility 0s}
.soon .brush--lime::before{box-shadow:0 10px 30px rgba(0,0,0,.3)}
.soon em{
  font-style:normal;font-family:var(--f-mono);font-weight:700;font-size:.65rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--black);
  text-shadow:0 0 12px rgba(255,255,255,.7);
}
body.on-dark .soon em{color:var(--white);text-shadow:none}
.header__nav a[data-soon]{opacity:.85}
.header__nav a[data-soon]:hover{opacity:1}

/* ============ RESPONSIVE ============ */
/* NOTA: se retiró el escalado por altura (.88/.8) — empequeñecía todo
   el módulo. La composición cabe a tamaño natural en pantallas ≥700px
   de alto; debajo de eso solo se compactan los márgenes del bloque */
@media (min-width:821px) and (max-height:700px){
  .s1-copy .brush{margin:12px 0 10px}
  .s1-actions{margin-top:18px}
}
@media (max-width:1100px){
  /* tablet: los rieles laterales chocan con el contenido; se retiran */
  .rail{display:none}
  .s1-copy{grid-column:1/8}.s1-stage{grid-column:8/13}
  /* tablet: solo el cuadro "Creación Interdisciplinar" va centrado */
  .sec--magenta .s1-copy .brush{display:block;width:max-content;max-width:100%;margin-left:auto;margin-right:auto}
  .s2-copy{grid-column:1/13}
  /* tablet: la composición conserva las proporciones del computador,
     centrada y sin estirarse a todo el ancho */
  .s2-stage{grid-column:1/13;margin-top:34px;min-height:0;height:min(52vw,470px);max-width:620px;margin-inline:auto;width:100%}
  .steps2{grid-column:1/13}
  /* tablet: proceso en horizontal arriba de la ventana */
  .s3-flow{grid-column:1/13;flex-direction:row;align-items:center;justify-content:center;gap:16px}
  .s3-flow__arr{margin-left:0;transform:rotate(-90deg)}
  .s3-flow__arr--out{margin-top:0}
  .s3-win{grid-column:2/12}
  .s3-win__micro--a{top:auto;bottom:-26px;left:2px}
  .s3-ctx{grid-column:1/13;flex-direction:row;justify-content:center;gap:clamp(24px,6vw,70px);flex-wrap:wrap}
  .s4-copy{grid-column:1/13}
  .s4-box{grid-column:1/13;justify-self:start;margin:40px 0}
  .shard{opacity:.6}
  .glass__art{opacity:.55}
}
@media (max-width:820px){
  .header__nav{display:none}
  .rail{display:none}
  .s1-copy{grid-column:1/13}
  .s1-stage{grid-column:1/13;min-height:380px;margin-top:30px}
  .s1-stage__slot{aspect-ratio:16/9;width:min(94%,480px)}
  /* collage del proceso en celular: bloque compacto bajo el texto */
  .s2-stage{grid-column:1/13;min-height:0;height:300px;margin-top:26px}
  .s2-asset--mapa{width:70%;left:-7%;top:6%}
  .s2-asset--foto{width:48%;right:-2%;top:0}
  .s2-asset--archivo{width:66%;left:3%;bottom:0}
  .s2-asset--programa{width:50%;right:0;bottom:-4%}
  .s2-asset--camara{width:20%;left:40%;top:-2%}
  .sec--pink{padding-top:calc(var(--header-h) + 18px)}
  .steps2{flex-wrap:wrap;justify-content:center}
  .dial-panels{flex:1 1 100%;min-height:210px;max-width:360px}
  .marquee{margin-top:calc(-1 * (var(--header-h) + 24px))}
  /* celular: ventana apilada, marco compacto */
  .s3-win{grid-column:1/13}
  .s3-win__frame{min-height:0;box-shadow:9px 9px 0 rgba(0,0,0,.25)}
  .s3-win__big span{-webkit-text-stroke-width:1.8px}
  .s3-win__coords{display:none}
  .s3-ctx{flex-direction:column;align-items:flex-start;gap:30px;max-width:420px;margin-inline:auto;width:100%}
}

/* ============ ACCESIBILIDAD ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none;clip-path:none}
}

/* secciones apagadas por el interruptor TWU_NAV (enlaces.js):
   gana sobre cualquier display inline que re-apliquen los ajustes */
.twu-off{display:none!important}


/* ═══ MODO EDITOR (oculto — solo aparece con ?editar en la URL) ═══ */
#editToggle{position:fixed;left:18px;bottom:18px;z-index:1000;padding:11px 20px;border-radius:999px;background:var(--black);color:#fff;font-family:var(--f-mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;border:none;cursor:pointer;box-shadow:0 8px 24px rgba(11,11,11,.4)}
#editToggle:hover{background:var(--magenta)}
#editPanel{position:fixed;left:18px;bottom:68px;z-index:1000;width:min(320px,94vw);background:#fff;border:2px solid var(--black);border-radius:14px;box-shadow:0 18px 50px rgba(11,11,11,.3);padding:16px 18px;font-family:var(--f-mono);color:var(--black);transform:translateY(14px);opacity:0;pointer-events:none;transition:transform .25s ease,opacity .25s ease}
#editPanel.open{transform:none;opacity:1;pointer-events:auto}
#editPanel{max-height:82vh;overflow-y:auto}
#epHead{cursor:move;user-select:none;touch-action:none}
#epHead:hover span{color:var(--magenta)}
#editPanel header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
#editPanel header b{font-family:var(--f-alt);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
#editPanel header span{font-size:.65rem;letter-spacing:.08em;color:rgba(11,11,11,.5)}
.ep-sec{padding:10px 0;border-top:1px dashed rgba(11,11,11,.25)}
.ep-sec>b{display:block;font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.ep-row{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:.6rem}
.ep-check{display:flex;align-items:center;gap:9px;margin:8px 0;font-size:.6rem;letter-spacing:.06em;cursor:pointer;user-select:none}
.ep-check input{appearance:none;width:16px;height:16px;flex:none;border:1.5px solid rgba(11,11,11,.5);border-radius:4px;background:#fff;cursor:pointer;position:relative;margin:0}
.ep-check input:checked{background:var(--lime);border-color:var(--black);box-shadow:2px 2px 0 var(--black)}
.ep-check input:checked::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:.65rem;font-weight:700;color:var(--black)}
.ep-row label{flex:0 0 92px;letter-spacing:.04em}
.ep-row input[type=range]{flex:1;accent-color:var(--magenta);min-width:0}
.ep-row output{flex:0 0 40px;text-align:right;font-size:.6rem}
#epSelName{font-size:.65rem;line-height:1.6;margin:0 0 8px;color:rgba(11,11,11,.75)}
.ep-actions{display:flex;gap:8px;flex-wrap:wrap}
.ep-publish{flex:1 1 100%;padding:13px 8px;border:2px solid var(--black);border-radius:9px;background:var(--lime);box-shadow:4px 4px 0 var(--black);font-family:var(--f-mono);font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.ep-publish:hover{background:var(--black);color:var(--lime);box-shadow:2px 2px 0 var(--black)}
.ep-publish:disabled{opacity:.55;cursor:wait}
.ep-status{flex:1 1 100%;margin:0 0 4px;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.08em}
.ep-status[data-st="dirty"]{color:#a3500a}
.ep-status[data-st="saving"]{color:#7a5c00}
.ep-status[data-st="saved"]{color:#1d6b1d}
.ep-status[data-st="error"]{color:#b20000}
#epSave,#epDownload{flex:1;padding:11px 8px;border:2px solid rgba(11,11,11,.35);border-radius:9px;background:#fff;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
#epSave:hover,#epDownload:hover{border-color:var(--magenta);color:var(--magenta)}
#epCopy{flex:1;padding:11px 8px;border:2px solid var(--black);border-radius:9px;background:#fff;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
#epCopy:hover{border-color:var(--magenta);color:var(--magenta)}
#epReset{padding:11px 12px;border:2px solid rgba(11,11,11,.35);border-radius:9px;background:#fff;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
#epReset:hover{border-color:var(--magenta);color:var(--magenta)}
.ep-note{font-size:.65rem;line-height:1.65;color:rgba(11,11,11,.55);margin:10px 0 0}
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:1001;background:var(--black);color:#fff;font-family:var(--f-mono);font-size:.65rem;letter-spacing:.06em;padding:12px 22px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
body.editing .sec *,body.editing .header *{cursor:grab;touch-action:none}
body.editing .sec *:hover,body.editing .header *:hover{outline:2px dashed rgba(255,255,255,.9);outline-offset:2px}
body.editing .edit-sel,body.editing .edit-sel:hover{outline:3px solid var(--lime)!important;outline-offset:3px;box-shadow:0 0 0 6px rgba(11,11,11,.55)}
/* color por tipo de elemento seleccionado: se distingue de un vistazo
   qué es texto editable, imagen/video, botón, componente o contenedor */
body.editing .edit-sel--img,body.editing .edit-sel--img:hover,
body.editing .edit-sel--vid,body.editing .edit-sel--vid:hover{outline-color:var(--blue)!important}
body.editing .edit-sel--btn,body.editing .edit-sel--btn:hover{outline-color:var(--magenta)!important}
body.editing .edit-sel--comp,body.editing .edit-sel--comp:hover{outline-color:var(--orange)!important}
body.editing .edit-sel--box,body.editing .edit-sel--box:hover{outline-style:dashed!important;outline-color:rgba(11,11,11,.65)!important}
.ep-mini{padding:6px 8px;border:1.5px solid rgba(11,11,11,.4);border-radius:7px;background:#fff;font-family:var(--f-mono);font-size:.65rem;letter-spacing:.04em;cursor:pointer}
.ep-mini:hover{border-color:var(--magenta);color:var(--magenta)}

/* tiradores de redimensión del modo editor (estilo Canva) */
#epHandles{position:fixed;z-index:998;pointer-events:none;display:none;border:1.5px dashed var(--magenta);border-radius:2px}
#epHandles.on{display:block}
#epHandles i{position:absolute;width:15px;height:15px;background:#fff;border:2.5px solid var(--magenta);border-radius:5px;pointer-events:auto;touch-action:none;box-shadow:0 2px 6px rgba(11,11,11,.35)}
#epHandles i:hover{background:var(--lime);border-color:var(--black)}
#epHandles [data-dir=nw]{left:-9px;top:-9px;cursor:nwse-resize}
#epHandles [data-dir=n]{left:50%;top:-9px;translate:-50% 0;cursor:ns-resize}
#epHandles [data-dir=ne]{right:-9px;top:-9px;cursor:nesw-resize}
#epHandles [data-dir=e]{right:-9px;top:50%;translate:0 -50%;cursor:ew-resize}
#epHandles [data-dir=se]{right:-9px;bottom:-9px;cursor:nwse-resize}
#epHandles [data-dir=s]{left:50%;bottom:-9px;translate:-50% 0;cursor:ns-resize}
#epHandles [data-dir=sw]{left:-9px;bottom:-9px;cursor:nesw-resize}
#epHandles [data-dir=w]{left:-9px;top:50%;translate:0 -50%;cursor:ew-resize}
body.ep-resizing{user-select:none}
.ep-mini--danger{border-color:#c8354f;color:#c8354f}
.ep-mini--danger:hover{background:#c8354f;border-color:#c8354f;color:#fff}
#epTxtRow{flex-direction:column;align-items:stretch;gap:6px}
#epTxt{width:100%;min-height:64px;resize:vertical;border:1.5px solid rgba(11,11,11,.4);border-radius:7px;padding:7px 8px;font-family:var(--f-mono);font-size:.65rem;line-height:1.5;background:#fff}
#epTxtRow .ep-warn{font-size:.65rem;color:#c8354f;letter-spacing:.03em;margin:0}
.ep-tree{gap:6px}
.ep-row select{flex:1;min-width:0;font-family:var(--f-mono);font-size:.6rem;padding:5px 6px;border:1.5px solid rgba(11,11,11,.35);border-radius:7px;background:#fff}
.ep-imgrow{margin:-2px 0 8px 25px}
.ep-imgurl{width:100%;font-family:var(--f-mono);font-size:.56rem;padding:5px 7px;border:1.5px solid rgba(11,11,11,.3);border-radius:7px;background:#fff;box-sizing:border-box}
.ep-imgurl:focus{outline:none;border-color:var(--magenta);box-shadow:2px 2px 0 rgba(220,37,123,.25)}

/* administración de talleres: lista con interruptor + formulario */
.ep-tall{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:.6rem;letter-spacing:.04em}
.ep-tall input[type=checkbox]{appearance:none;width:16px;height:16px;flex:none;border:1.5px solid rgba(11,11,11,.5);border-radius:4px;background:#fff;cursor:pointer;position:relative;margin:0}
.ep-tall input[type=checkbox]:checked{background:var(--lime);border-color:var(--black);box-shadow:2px 2px 0 var(--black)}
.ep-tall input[type=checkbox]:checked::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:.65rem;font-weight:700;color:var(--black)}
.ep-tall__nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-mini--wide{display:block;width:100%;margin:8px 0 0}
#epTallForm{border-top:1.5px dashed rgba(11,11,11,.25);margin-top:10px;padding-top:8px}
#epTallForm>b{display:block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;color:var(--magenta)}
#epTallForm input[type=text],#epTallForm textarea{flex:1;min-width:0;font-family:var(--f-mono);font-size:.6rem;padding:5px 7px;border:1.5px solid rgba(11,11,11,.35);border-radius:7px;background:#fff}
#epTallForm input:focus,#epTallForm textarea:focus,#epTallForm select:focus{outline:none;border-color:var(--magenta)}
#epTallForm input[type=checkbox]{appearance:none;width:16px;height:16px;flex:none;border:1.5px solid rgba(11,11,11,.5);border-radius:4px;background:#fff;cursor:pointer;position:relative;margin:0}
#epTallForm input[type=checkbox]:checked{background:var(--lime);border-color:var(--black);box-shadow:2px 2px 0 var(--black)}
#epTallForm input[type=checkbox]:checked::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:.65rem;font-weight:700;color:var(--black)}
#epTfMsg{margin:6px 0 0;font-size:.6rem;color:#c8354f}

/* marco de selección rectangular (clic + arrastre sobre zona vacía) */
#epMarquee{position:fixed;z-index:9997;display:none;pointer-events:none;
  border:1.5px dashed var(--magenta);background:rgba(220,37,123,.08);border-radius:2px}
#epMarquee.on{display:block}

/* campo numérico de tamaño de texto con botones − / + */
.ep-stepper{display:inline-flex;align-items:center;gap:6px;flex:1}
.ep-stepper .ep-mini{padding:5px 10px;font-size:.8rem;line-height:1}
#epFSPx{width:64px;font-family:var(--f-mono);font-size:.68rem;padding:6px 7px;text-align:center;
  border:1.5px solid rgba(11,11,11,.4);border-radius:7px;background:#fff}
#epFSPx:focus{outline:none;border-color:var(--magenta);box-shadow:2px 2px 0 rgba(220,37,123,.25)}
.ep-stepper output{font-size:.56rem;color:rgba(11,11,11,.55)}

/* ═══ PIN DEL INICIO: la página espera a que el video termine ═══
   Solo cuando la intro está activa (html.intro-on: primera visita o
   el usuario la encendió con el botón). La sección es un riel largo
   y la composición queda pegada a la pantalla mientras el scroll
   reproduce el video; al terminar el video la página continúa. */
html.intro-on .sec--magenta{height:420vh;overflow:visible;display:block;padding:0}
html.intro-on .sec--magenta .sec__grid{
  position:sticky;top:0;height:100vh;overflow:hidden;
  padding:calc(var(--header-h) + 24px) clamp(20px,5vw,80px) 60px;
  align-content:center;
}

/* ═══ TIPOGRAFÍA CINÉTICA DEL INTRO ═══
   El riel largo del pin (420vh) quedaba como un vacío magenta enorme en
   las capturas de página completa. Ahora el recorrido del video va
   acompañado de palabras-outline que cruzan la pantalla mientras el
   héroe sigue fijo (solo existen con la intro activa). */
.intro-words{display:none}
html.intro-on .intro-words{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.intro-words span{
  position:absolute;font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(110px,16vw,260px);line-height:.85;white-space:nowrap;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.32);
}
/* posiciones pensadas para que la última palabra (COMPARTIR) cruce el
   borde superior y SALGA de pantalla justo antes de que termine el pin */
.intro-words span:nth-child(1){top:12%;left:5vw}
.intro-words span:nth-child(2){top:26%;right:4vw}
.intro-words span:nth-child(3){top:40%;left:8vw}
.intro-words span:nth-child(4){top:54%;right:7vw}
.intro-words span:nth-child(5){top:68%;left:4vw}
@media (max-width:820px){
  .intro-words span{font-size:clamp(80px,22vw,150px);-webkit-text-stroke-width:1.5px}
  /* en celular el riel es más corto (340vh): las palabras van más juntas
     para que COMPARTIR también salga completa por arriba */
  .intro-words span:nth-child(1){top:12%}
  .intro-words span:nth-child(2){top:24%}
  .intro-words span:nth-child(3){top:36%}
  .intro-words span:nth-child(4){top:48%}
  .intro-words span:nth-child(5){top:60%}
}

/* ═══ MENÚ MÓVIL: hamburguesa + panel a pantalla completa ═══ */
.burger{display:none}
.mnav{display:none}
@media (max-width:820px){
  /* ── pin también en celular, con riel un poco más corto ── */
  html.intro-on .sec--magenta{height:340vh}
  html.intro-on .sec--magenta .sec__grid{
    padding:calc(var(--header-h) + 6px) 18px 22px;
    row-gap:8px;align-content:center;
  }
  /* ── composición móvil del inicio: orden editorial centrado ──
     título centrado → video parallax → texto → botones.
     .s1-copy se "disuelve" (display:contents) para que sus hijos
     participen directamente en la rejilla y se puedan reordenar */
  .s1-copy{display:contents}
  .s1-copy>*{grid-column:1/13}
  .s1-copy .tag-mono{order:1;margin:0 auto 2px}
  .s1-title{order:2;text-align:center}
  .s1-stage{order:3;grid-column:1/13;min-height:0;margin:14px auto;width:100%}
  .s1-stage__slot{width:min(96%,440px)}
  .s1-copy .brush{order:4;margin:14px auto 8px;width:max-content;max-width:100%}
  .s1-copy .txtlead{order:5;font-size:calc(1.05rem * var(--u-hand,1));max-width:340px;margin-inline:auto;text-align:center}
  .s1-actions{order:6;margin-top:14px;justify-content:center;gap:18px}
  .s1-title .line--top{font-size:calc(1.7rem * var(--u-title,1))}
  .s1-title .line--mid{font-size:calc(3.6rem * var(--u-title,1))}
  .s1-title .line--bot{font-size:calc(2.4rem * var(--u-title,1))}

  /* ── hamburguesa (el CTA del header se esconde: vive en el menú) ── */
  .header__cta,.header__plus{display:none}
  .burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:9px;cursor:pointer;
    background:var(--white);border:3px solid var(--black);
    box-shadow:4px 4px 0 var(--black);
    transition:rotate .3s,translate .3s,box-shadow .3s;
  }
  .burger:hover{translate:2px 2px;box-shadow:2px 2px 0 var(--black)}
  .burger span{display:block;height:3px;background:var(--black);transition:transform .3s,opacity .2s}
  body.menu-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.menu-open .burger span:nth-child(2){opacity:0}
  body.menu-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  body.menu-open{overflow:hidden}

  /* ── panel: queda BAJO el header (z 100) para que la X siga visible ── */
  .mnav{
    display:flex;flex-direction:column;justify-content:center;gap:4px;
    position:fixed;inset:0;z-index:95;background:var(--magenta);
    padding:calc(var(--header-h) + 20px) 26px 30px;
    transform:translateY(-103%);visibility:hidden;
    transition:transform .45s cubic-bezier(.72,0,.18,1),visibility 0s .45s;
  }
  body.menu-open .mnav{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.72,0,.18,1)}
  .mnav::after{ /* misma textura grunge de las secciones */
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .mnav__tag{
    font-family:var(--f-mono);font-size:.66rem;letter-spacing:.3em;
    text-transform:uppercase;margin:0 0 14px;
  }
  .mnav__link{
    font-family:var(--f-display);font-size:clamp(2rem,9vw,2.7rem);
    text-transform:uppercase;color:var(--black);text-decoration:none;
    line-height:1.18;width:max-content;max-width:100%;position:relative;
    opacity:0;translate:0 18px;transition:opacity .35s,translate .35s,color .2s;
  }
  .mnav__link:active,.mnav__link:hover{color:var(--white)}
  .mnav__link[data-soon]::after{
    content:"Pronto";font-family:var(--f-mono);font-size:.5rem;letter-spacing:.2em;
    text-transform:uppercase;vertical-align:super;margin-left:8px;opacity:.65;
  }
  body.menu-open .mnav__link{opacity:1;translate:0 0}
  body.menu-open .mnav__link:nth-of-type(1){transition-delay:.10s}
  body.menu-open .mnav__link:nth-of-type(2){transition-delay:.15s}
  body.menu-open .mnav__link:nth-of-type(3){transition-delay:.20s}
  body.menu-open .mnav__link:nth-of-type(4){transition-delay:.25s}
  body.menu-open .mnav__link:nth-of-type(5){transition-delay:.30s}
  body.menu-open .mnav__link:nth-of-type(6){transition-delay:.35s}
  .mnav__cta{
    margin-top:26px;width:max-content;max-width:100%;
    font-family:var(--f-mono);font-size:.72rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;text-decoration:none;color:var(--black);
    background:var(--lime);border:3px solid var(--black);
    box-shadow:5px 5px 0 var(--black);padding:13px 18px;
    opacity:0;translate:0 18px;transition:opacity .35s .42s,translate .35s .42s,box-shadow .2s;
  }
  body.menu-open .mnav__cta{opacity:1;translate:0 0}
  .mnav__cta:active{box-shadow:2px 2px 0 var(--black)}
  .mnav__foot{
    margin-top:auto;padding-top:20px;
    font-family:var(--f-mono);font-size:.65rem;letter-spacing:.24em;
    text-transform:uppercase;opacity:.6;
  }
}

/* celulares bajitos (iPhone SE y similares): apretar un poco más
   para que el video quepa entero en la pantalla fijada */
@media (max-width:820px) and (max-height:720px){
  .s1-title .line--top{font-size:calc(1.5rem * var(--u-title,1))}
  .s1-title .line--mid{font-size:calc(3.1rem * var(--u-title,1))}
  .s1-title .line--bot{font-size:calc(2.1rem * var(--u-title,1))}
  .s1-copy .txtlead{font-size:calc(1.02rem * var(--u-hand,1))}
  .s1-copy .brush{margin:6px 0 5px}
  .s1-stage{margin-top:2px}
  .s1-stage__slot{width:min(88%,360px)}
  .sec--magenta .sec__grid{row-gap:5px}
}

/* ══════════════════════════════════════════════════════════════
   SUBMENÚ DE ÁREAS (escritorio): se abre al pasar el cursor,
   sin clic. Cada área con talleres abiertos lleva un cuadrito
   verde-lima como distintivo (independiente de la cantidad).
   ══════════════════════════════════════════════════════════════ */
.nav-drop{position:relative}
.nav-drop>a{display:inline-block}
.nav-drop__menu{
  position:absolute;top:calc(100% + 6px);left:-12px;translate:0 8px;
  min-width:290px;padding:6px 0 6px;z-index:60;
  background:transparent;border:none;box-shadow:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,translate .22s ease,visibility .22s;
}
.nav-drop:hover .nav-drop__menu,
.nav-drop:focus-within .nav-drop__menu{
  opacity:1;visibility:visible;pointer-events:auto;translate:0 0;
}
/* puente invisible para que el menú no se cierre al bajar el cursor */
.nav-drop__menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-drop__menu a{
  display:flex;align-items:center;gap:12px;white-space:nowrap;
  padding:8px 14px;text-decoration:none;color:inherit;
  font-family:var(--f-alt);font-weight:600;text-transform:uppercase;
  font-size:.78rem;letter-spacing:.08em;
  transition:color .18s,padding-left .18s;
}
.nav-drop__menu a:hover{padding-left:22px;color:var(--magenta)}
.header--dark .nav-drop__menu a:hover{color:var(--lime)}
.nav-drop__menu a::after{display:none}
.nd-dot{
  flex:0 0 auto;width:9px;height:9px;background:var(--lime);
  outline:1.5px solid currentColor;
}
.nd-dot--off{background:transparent;opacity:.45}
.nav-drop__leyenda{
  display:flex;align-items:center;gap:8px;margin:8px 16px 2px;padding-top:8px;
  border-top:1px dashed currentColor;
  font-family:var(--f-mono);font-size:.65rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:.55;
}

/* versión móvil: sub-enlaces indentados bajo "Áreas" */
.mnav__sub{display:none}
@media (max-width:820px){
  .mnav__sub{
    display:flex;flex-direction:column;gap:2px;
    margin:2px 0 6px 26px;padding-left:14px;
    border-left:2px solid rgba(255,255,255,.28);
  }
  .mnav__sublink{
    font-family:var(--f-alt);font-weight:500;text-transform:uppercase;
    font-size:.78rem;letter-spacing:.12em;color:rgba(255,255,255,.75);
    text-decoration:none;padding:4px 0;
  }
  .mnav__sublink:hover{color:var(--lime)}
}

/* ══════════════════════════════════════════════════════════════
   FONDO 3D ATMOSFÉRICO — todas las secciones del sitio
   Degradados volumétricos + luz radial difusa que sigue el
   cursor (--mx/--my) + viñeta de profundidad + respiración
   lenta. Cada color de sección tiene su propia atmósfera.
   ══════════════════════════════════════════════════════════════ */
:root{--mx:50%;--my:28%}

.sec::before,.pg-sec::before,.curso::before,.dt-cierre::before,.pg-foot::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 58% at var(--glowAX,-6%) var(--glowAY,-14%), var(--glowA,transparent) 0%, transparent 62%),
    radial-gradient(46% 52% at var(--glowBX,106%) var(--glowBY,112%), var(--glowB,transparent) 0%, transparent 62%),
    radial-gradient(55% 62% at var(--mx) var(--my), var(--atmA,rgba(255,255,255,.14)) 0%, transparent 62%),
    radial-gradient(72% 82% at 88% 112%, var(--atmB,rgba(0,0,0,.16)) 0%, transparent 60%),
    radial-gradient(135% 115% at 50% 38%, transparent 56%, var(--atmV,rgba(0,0,0,.13)) 100%);
  animation:atmDrift 16s ease-in-out infinite alternate;
}
@keyframes atmDrift{from{opacity:.72}to{opacity:1}}

/* el contenido siempre emerge por encima de la atmósfera */
.sec>*,.pg-sec>*,.curso>*,.dt-cierre>*,.pg-foot>*{position:relative;z-index:1}

/* — atmósfera por color de sección (respeta la paleta elegida) —
   --glowA/--glowB: orbes de luz difuminados estilo contacto,
   tintados con la paleta de cada sección */
.sec--magenta,.bg-magenta{--atmA:rgba(255,255,255,.20);--atmB:rgba(122,8,60,.38);--atmV:rgba(64,0,32,.26);
  --glowA:rgba(255,150,205,.42);--glowB:rgba(110,0,64,.42)}
.sec--blue,.bg-blue{--atmA:rgba(255,255,255,.18);--atmB:rgba(2,42,74,.42);--atmV:rgba(0,22,44,.30);
  --glowA:rgba(130,205,255,.40);--glowB:rgba(0,38,86,.45)}
.sec--black,.bg-black,.pg--cine{--atmA:rgba(220,37,123,.16);--atmB:rgba(8,137,196,.15);--atmV:rgba(0,0,0,.5);
  --glowA:rgba(220,37,123,.38);--glowB:rgba(8,137,196,.30)}
/* módulos negros que no llevan la clase .bg-black explícita: las mismas
   esquinas de color magenta/azul que tanto gustan en el módulo de contacto */
.pg-foot,.dt--digital .pg-sec,.dt--digital .dt-cierre,.dt--dibujo .dt-cierre,
.pg-area.bg-black .pg-sec,.pg-area.bg-black .dt-cierre{
  --atmA:rgba(220,37,123,.16);--atmB:rgba(8,137,196,.15);--atmV:rgba(0,0,0,.5);
  --glowA:rgba(220,37,123,.38);--glowB:rgba(8,137,196,.30);
}
.sec--pink,.bg-pink{--atmA:rgba(255,255,255,.55);--atmB:rgba(220,37,123,.12);--atmV:rgba(220,37,123,.08);
  --glowA:rgba(255,255,255,.60);--glowB:rgba(220,37,123,.20)}
.bg-lime{--atmA:rgba(255,255,255,.38);--atmB:rgba(146,164,0,.26);--atmV:rgba(66,76,0,.13);
  --glowA:rgba(255,255,255,.50);--glowB:rgba(126,150,0,.30)}
.bg-orange{--atmA:rgba(255,255,255,.34);--atmB:rgba(186,84,0,.26);--atmV:rgba(96,42,0,.15);
  --glowA:rgba(255,214,160,.48);--glowB:rgba(170,70,0,.32)}

/* páginas claras (programas, talleres): veladuras suaves de marca */
.pg:not(.pg--cine):not(.pg-area):not(.pg-contacto){
  --atmA:rgba(220,37,123,.07);--atmB:rgba(8,137,196,.08);--atmV:rgba(11,11,11,.05);
  --glowA:rgba(220,37,123,.12);--glowB:rgba(8,137,196,.13);
}
/* la página de contacto ya trae su propia atmósfera de vidrio */
.pg-contacto .pg-sec::before{content:none}

/* ══ Párrafos de lectura: Oswald ══ */
.txtlead{
  font-family:var(--f-alt);font-weight:400;
  font-size:calc(clamp(1.06rem,1.35vw,1.28rem) * var(--u-hand,1));
  line-height:1.58;letter-spacing:.015em;color:var(--black);
}
.txtlead em{
  font-style:normal;font-weight:600;
  background:linear-gradient(transparent 60%, rgba(201,228,0,.85) 60%, rgba(201,228,0,.85) 94%, transparent 94%);
}
.txtlead--light{color:rgba(255,255,255,.92)}

/* ══ Botón secundario del hero: lima completo, imposible de no ver ══ */
.s1-link{
  display:inline-block;position:relative;
  font-family:var(--f-display);text-transform:uppercase;
  font-size:calc(clamp(.95rem,1.3vw,1.2rem) * var(--u-title,1));
  letter-spacing:.05em;color:var(--black);text-decoration:none;
  background:var(--lime);border:2.5px solid var(--black);
  padding:.5em 1em;box-shadow:5px 5px 0 var(--black);
  transition:transform .25s,box-shadow .25s;
}
.s1-link:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--black)}
.s1-link span{display:inline-block;transition:transform .3s}
.s1-link:hover span{transform:translateX(7px)}

/* ══ Foco visible global (teclado) ══ */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{
  outline:3px solid var(--lime);outline-offset:3px;border-radius:4px;
}

/* ══ Ajuste fino del hero (momento 01) ══
   Tras limpiar las ediciones antiguas del editor: compactar el
   aire vertical para que texto, botones y video respiren juntos. */
#inicio .s1-copy .brush{margin:10px 0 8px}
#inicio .s1-copy .txtlead{max-width:520px}
#inicio .s1-actions{margin-top:16px}
@media (min-width:1100px){
  .s1-title .line--mid{font-size:calc(clamp(4.4rem,9.6vw,9.6rem) * var(--u-title,1))}
}

/* ══ BURBUJA-ÓRBITA · TALLERES ABIERTOS ══
   Órbita de burbujas de jabón FIJA (position:fixed) en la
   esquina inferior derecha: mismo lugar en toda sección y
   toda página; no tapa el video del héroe ni el contenido.
   Normal: miniatura apretada. Clic: el anillo se expande
   mucho, burbujas grandes casi tocándose, siempre orbitando.
   La pared refracta el fondo REAL de la página (más blur
   cuanto más grande la burbuja), con película tornasol,
   destello metálico que sigue la dirección del movimiento
   y brillo especular que se arrastra en contra. */
.orbit{
  position:fixed;right:calc(26.8% - 360px);bottom:calc(29.6% - 160px);z-index:70;
  width:720px;height:320px;pointer-events:none;
}
/* la lupa actúa por burbuja (ver .bubble:hover .bubble__img):
   así el punto ancla no se mueve bajo el cursor y no hay parpadeo */
/* pulso lima que marca la miniatura y llama al clic */
.orbit__pulse{
  position:absolute;right:26px;bottom:18px;width:64px;height:56px;pointer-events:none;
  border-radius:47% 53% 51% 49% / 52% 46% 54% 48%;
  border:2px solid var(--lime);animation:seedPulse 2.4s ease-out infinite;
  transition:opacity .3s;
}
.orbit.is-xp .orbit__pulse{opacity:0;animation:none}
@keyframes seedPulse{0%{transform:scale(.82);opacity:.9}70%{transform:scale(1.28);opacity:0}100%{opacity:0}}
/* rótulo: en miniatura aparece al acercar el cursor, junto al racimo;
   expandido va al centro. En ambos estados es un ENLACE a talleres.html */
.orbit__label{
  position:absolute;right:0;bottom:60px;z-index:15;margin:0;display:block;
  text-align:right;line-height:1.4;pointer-events:none;text-decoration:none;
  opacity:0;transition:opacity .3s;
}
.orbit__label span{
  display:none;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--lime);text-shadow:1px 1px 0 rgba(11,11,11,.8);
}
.orbit__label b{
  display:block;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;font-weight:400;
  text-shadow:1px 1px 0 #0B0B0B, 2px 2px 0 rgba(11,11,11,.85);
}
.orbit:not(.is-xp):hover .orbit__label{opacity:1;pointer-events:auto;cursor:pointer}
.orbit.is-xp .orbit__label{
  right:auto;bottom:auto;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-1.5deg);
  text-align:center;opacity:1;pointer-events:auto;cursor:pointer;
}
.orbit.is-xp .orbit__label span{display:block}
.orbit.is-xp .orbit__label b{
  font-family:var(--f-display);font-size:1.45rem;letter-spacing:.03em;line-height:1.15;
  text-shadow:
    1.5px 1.5px 0 #0B0B0B, -1.5px -1.5px 0 #0B0B0B,
    1.5px -1.5px 0 #0B0B0B, -1.5px 1.5px 0 #0B0B0B,
    3px 3px 0 rgba(11,11,11,.85);
}
/* nombre de la protagonista: flota ENCIMA de la burbuja, sin caja —
   Anton blanco con contorno y sombra dura negra (el estilo del titular
   del sitio) + barra lima: legible sobre magenta, azul, negro o claro */
.orbit__name{
  position:absolute;left:0;top:0;z-index:30;margin:0;
  font-family:var(--f-display);font-size:1.05rem;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;white-space:nowrap;pointer-events:none;
  translate:-50% 0;rotate:-2deg;
  text-shadow:
    1.5px 1.5px 0 #0B0B0B, -1.5px -1.5px 0 #0B0B0B,
    1.5px -1.5px 0 #0B0B0B, -1.5px 1.5px 0 #0B0B0B,
    3px 3px 0 rgba(11,11,11,.9);
  opacity:0;transition:opacity .22s ease;
}
.orbit__name::after{
  content:"";position:absolute;left:14%;bottom:-7px;width:44%;height:3px;
  background:var(--lime);box-shadow:1px 1px 0 #0B0B0B;
}
.orbit.is-xp .orbit__name.is-in{opacity:1}
.orbit__ring{position:absolute;inset:0;will-change:transform}
/* polvo de partículas: viñeta circular detrás del racimo en miniatura.
   Vive detrás de las burbujas (primer hijo del .orbit), no recibe clics
   y se apaga suavemente cuando la órbita se expande */
.orbit__dust{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:1;transition:opacity .5s;
}
.orbit.is-xp .orbit__dust{opacity:0}
.bubble{
  position:absolute;top:0;left:0;width:52px;height:44px;margin:-22px 0 0 -26px;
  pointer-events:auto;cursor:pointer;will-change:transform,opacity;
}
/* zona de toque generosa alrededor de cada burbuja */
.bubble::after{content:"";position:absolute;inset:-10px;border-radius:50%}
.bubble__in{display:block;width:100%;height:100%;will-change:transform;transition:scale .55s ease}
/* expandidas: forma COMPLETAMENTE circular — la burbuja crece y orbita,
   pero su figura no se deforma (sin gelatina, sin óvalo, sin blob) */
.orbit.is-xp .bubble__in{scale:1 1.18182}
.orbit.is-xp .bubble__img{animation:none;border-radius:50%}

/* ── Material de burbuja de jabón ── */
.bubble__img{
  position:relative;display:block;width:100%;height:100%;overflow:hidden;
  /* voluble: blob ovalado que se deforma despacio, nunca circular */
  border-radius:47% 53% 51% 49% / 52% 46% 54% 48%;
  animation:blobMorph 11s ease-in-out infinite alternate;
  border:1.5px solid rgba(255,255,255,.8);
  background:rgba(255,255,255,.14);
  box-shadow:
    inset 3px 4px 8px rgba(255,255,255,.45),
    inset -5px -7px 12px rgba(0,0,0,.22),
    inset 0 0 14px rgba(255,255,255,.16),
    0 0 0 1px rgba(11,11,11,.22),   /* filo oscuro fino: define la burbuja en fondos claros */
    0 7px 20px rgba(0,0,0,.34);
  transition:transform .3s ease;
}
/* refracción real del fondo: el cristal engorda con el tamaño (--sz).
   Solo en burbujas del frente (.is-glass): en el fondo son pequeñas y
   semitransparentes — no se percibe y ahorra repintado por cuadro */
.bubble.is-glass .bubble__img{
  -webkit-backdrop-filter:blur(calc(1px + var(--sz,1) * 1.4px)) saturate(1.55) brightness(1.06);
  backdrop-filter:blur(calc(1px + var(--sz,1) * 1.4px)) saturate(1.55) brightness(1.06);
}
@keyframes blobMorph{
  0%  {border-radius:47% 53% 51% 49% / 52% 46% 54% 48%}
  33% {border-radius:54% 46% 45% 55% / 45% 55% 51% 49%}
  66% {border-radius:48% 52% 56% 44% / 55% 46% 44% 56%}
  100%{border-radius:53% 47% 47% 53% / 46% 53% 56% 44%}
}
/* cada burbuja respira desfasada */
.bubble:nth-child(2) .bubble__img{animation-delay:-2.6s}
.bubble:nth-child(3) .bubble__img{animation-delay:-5.2s}
.bubble:nth-child(4) .bubble__img{animation-delay:-7.8s}
.bubble:nth-child(5) .bubble__img{animation-delay:-3.9s}
.bubble:nth-child(6) .bubble__img{animation-delay:-6.5s}
.bubble:nth-child(7) .bubble__img{animation-delay:-1.3s}
.bubble:nth-child(8) .bubble__img{animation-delay:-9.1s}
/* la imagen vive DENTRO de la burbuja, vista a través de la pared */
.bubble__img img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:.86;filter:saturate(1.22) contrast(1.06);
}
/* película jabonosa tornasol: interferencias que giran despacio */
.bubble__img::before{
  content:"";position:absolute;inset:-18%;
  background:conic-gradient(from 210deg,
    rgba(220,37,123,.58), rgba(8,137,196,.5), rgba(201,228,0,.46),
    rgba(255,147,30,.5), rgba(150,60,220,.46), rgba(220,37,123,.58));
  mix-blend-mode:overlay;
  opacity:.78;   /* tornasol presente pero sin empañar la imagen */
  animation:bubbleSheen 10s linear infinite;
}
@keyframes bubbleSheen{to{transform:rotate(360deg)}}
/* destello metálico: sigue la dirección del movimiento (--ma) y se
   enciende con la velocidad (--sp); el especular se arrastra en
   contra del desplazamiento (--ox, --oy) — física, no línea fija */
.bubble__img::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(calc(90deg + var(--ma, 28deg)),
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,calc(.3 + var(--sp,0) * .45)) 43%,
      rgba(255,255,255,.07) 53%,
      rgba(255,255,255,0) 62%),
    radial-gradient(ellipse 58% 30% at calc(30% - var(--ox,0%)) calc(18% - var(--oy,0%)),
      rgba(255,255,255,.85), rgba(255,255,255,0) 62%),
    radial-gradient(circle at calc(72% - var(--ox,0%)) calc(80% - var(--oy,0%)),
      rgba(255,255,255,.24), rgba(255,255,255,0) 34%);
  mix-blend-mode:screen;
}
.bubble:hover .bubble__img,.bubble:active .bubble__img,.bubble:focus-visible .bubble__img{transform:scale(1.9);transition-duration:.38s}
.bubble.is-back{pointer-events:none}
.bubble__tag{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-family:var(--f-mono);font-size:.54rem;letter-spacing:.1em;
  text-transform:uppercase;background:#0B0B0B;color:var(--lime);padding:3px 8px;
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.bubble:hover .bubble__tag,.bubble:focus-visible .bubble__tag{opacity:1}

@media (max-width:1100px){
  .orbit{width:620px;height:280px;right:calc(26.8% - 310px);bottom:calc(29.6% - 140px)}
  .bubble{width:46px;height:40px;margin:-20px 0 0 -23px}
}
@media (max-width:820px){
  /* racimo pegado a la esquina inferior derecha real: no tapa textos
     ni botones del flujo; el interruptor del intro pasa a la izquierda */
  .orbit{width:210px;height:150px;right:10px;bottom:10px}
  .intro-toggle{right:auto;left:12px}
  .orbit__label{font-size:.5rem}
  .orbit__name{font-size:.54rem;top:72%}
  .orbit__pulse{right:22px;bottom:12px;width:56px;height:48px}
  .bubble{width:40px;height:34px;margin:-17px 0 0 -20px}
  .bubble__tag{display:none}
}
/* movimiento reducido: burbuja quieta, sin pulso ni película animada */
@media (prefers-reduced-motion:reduce){
  .bubble__img,.bubble__img::before,.orbit__pulse{animation:none !important}
}