/* Bond! — entrada tipográfica, independiente del sistema de snap */
#principal.hero-intro {line-height:normal; display:grid;place-items:center; isolation:isolate; min-height:calc(100dvh - var(--head-h)); background:#f9f9f9;}
.hero-intro__backdrop {position:absolute;inset:0;z-index:-1;background-image:var(--hero-background,none);background-size:cover;background-position:center;}
.hero-intro__content {width:min(90%,1380px);display:flex;align-items:center;justify-content:flex-start;}
.hero-intro__heading {font-family:'Sheldon',sans-serif;font-weight:100;line-height:.91;margin:0;display:flex;flex-direction:column;align-items:flex-start;font-size:clamp(45px,8.6vw,160px);white-space:nowrap;}
.hero-intro__line {position:relative;display:flex;align-items:center;width:max-content;padding:.04em .12em 0;isolation:isolate;}
.hero-intro__line::before,.hero-intro__line::after {content:'';position:absolute;inset:0;z-index:-2;background:var(--verde);transform-origin:left center;transform:scaleX(0);transition:transform .52s cubic-bezier(.22,.8,.24,1);}
.hero-intro__line::after {z-index:-3;background:var(--cian);transform:translate(.085em,.085em) scaleX(0);transition-delay:.13s;}
.hero-intro.is-active .hero-intro__line::before,.hero-intro.is-active .hero-intro__line::after,.hero-intro.play-intro .hero-intro__line::before,.hero-intro.play-intro .hero-intro__line::after {transform:scaleX(1);}
.hero-intro.is-active .hero-intro__line::after,.hero-intro.play-intro .hero-intro__line::after {transform:translate(.085em,.085em) scaleX(1);}
.hero-intro__line--two {margin-top:-.01em; margin-left:.32em;}
.hero-intro__plus {color: white; font-size: 1.5em; line-height: 0; margin: -0.15em 0.03em 0 0;}
.hero-intro__word {display:inline-flex;}
.title-glyph {display:inline-block;position:relative;white-space:pre;opacity:0;transition:opacity .17s linear;transition-delay:var(--glyph-delay,0ms);}
.title-glyph::after {content:attr(data-char);position:absolute;inset:0;color:transparent;-webkit-text-stroke:1px #111;opacity:0;transform:translate(-.035em,-.035em);transition:opacity .2s linear;transition-delay:calc(var(--glyph-delay,0ms) + 110ms);pointer-events:none;}
.hero-intro .title-glyph {color:white;-webkit-text-stroke:1px #111;}
.hero-intro .title-glyph::after {transform:translate(-.025em,-.025em);-webkit-text-stroke:1.5px #111;}
.is-active .title-glyph,.play-intro .title-glyph {opacity:1;}
.is-active .title-glyph::after,.play-intro .title-glyph::after {opacity:1;}
/* Títulos existentes: conservar font-size, color, geometría y pseudo del título como fallback */
h2.text-stroke[data-animated-title].title-ready::before {content:none;}
h2.text-stroke[data-animated-title].title-ready .title-glyph::after {transform:translate(-4px,-4px);}
@media(max-width:700px){.hero-intro__content {width:96%;}.hero-intro__heading {font-size:clamp(32px,9vw,68px)}}
@media(prefers-reduced-motion:reduce){.title-glyph,.title-glyph::after {opacity:1!important;transition:none!important}.hero-intro__line::before,.hero-intro__line::after {transition:none!important;transform:scaleX(1)!important}.hero-intro__line::after {transform:translate(.085em,.085em) scaleX(1)!important}}

/* V2: las transiciones no se ejecutaban cuando .is-active ya estaba presente
   al insertar los spans. Keyframes garantizan la aparición incluso en ese caso. */
.title-glyph, .title-glyph::after { transition: none; }
@keyframes bondi-glyph-reveal { from {opacity:0} to {opacity:1} }
@keyframes bondi-stroke-reveal { from {opacity:0} to {opacity:1} }
.titles-enhanced .is-active .title-glyph,
.titles-enhanced .play-intro .title-glyph {
  opacity:0;
  animation:bondi-glyph-reveal .22s linear var(--glyph-delay,0ms) both;
}
.titles-enhanced .is-active .title-glyph::after,
.titles-enhanced .play-intro .title-glyph::after {
  opacity:0;
  animation:bondi-stroke-reveal .22s linear calc(var(--glyph-delay,0ms) + 120ms) both;
}
@media(prefers-reduced-motion:reduce){
  .titles-enhanced .is-active .title-glyph,
  .titles-enhanced .play-intro .title-glyph,
  .titles-enhanced .is-active .title-glyph::after,
  .titles-enhanced .play-intro .title-glyph::after {animation:none;opacity:1;}
}

/* V3 — controles finos sin modificar el maquetado base */
.hero-intro { --hero-bg-position: center center; }
.hero-intro__backdrop { background-position: var(--hero-bg-position); background-color:#f4f4f4; }
.hero-intro__heading { font-size: var(--hero-font-size, 130px); }
.hero-intro .title-glyph { -webkit-text-stroke:0; }
.hero-intro__plus { position:relative; display:inline-block; isolation:isolate; }
.hero-intro__plus::before {content: "";position: absolute;width: var(--plus-block-w, .2em);height: var(--plus-block-h, .16em);left: var(--plus-block-w, .015em);top: var(--plus-block-h, .14em);background: #000;z-index: -1;}
/* Flotantes: posición independiente de la animación interior */
.hero-float { position:absolute; z-index:2; pointer-events:none; opacity:0; }
.hero-float__inner { display:block; width:100%; height:auto; animation:bondi-float 5s ease-in-out infinite alternate; }
.hero-intro.is-active .hero-float, .hero-intro.play-intro .hero-float { animation:bondi-float-in .55s ease-out var(--float-delay, 1.7s) both; }
.hero-float--arrow { width:clamp(42px,5vw,85px); right:8%; top:22%; --float-delay:1.65s; }
.hero-float--square { width:clamp(20px,2.4vw,42px); aspect-ratio:1; background:var(--verde); right:13%; bottom:18%; --float-delay:1.95s; }
.hero-float--square .hero-float__inner { height:100%; background:var(--verde); }
@keyframes bondi-float-in { from {opacity:0;transform:translateY(12px)} to {opacity:1;transform:translateY(0)} }
@keyframes bondi-float { from {transform:translateY(0) rotate(-2deg)} to {transform:translateY(-9px) rotate(2deg)} }
@media (max-width:1400px) { .hero-intro {--hero-font-size:105px;} }
@media (max-width:1100px) { .hero-intro {--hero-font-size:78px;} }
@media (max-width:700px) { .hero-intro {--hero-font-size:clamp(29px,8.5vw,52px);--hero-bg-position:60% center;} .hero-float--arrow {right:7%;top:16%;} }
@media (prefers-reduced-motion:reduce) { .hero-float,.hero-intro.is-active .hero-float {opacity:1;animation:none;} .hero-float__inner {animation:none;} }

/* Fondo de prueba: reemplazar la URL por el JPG/WebP limpio definitivo. */


/* V4: PSD actual — tres ART independientes, geometría compartida (1920×820).
   El recorte cover es idéntico para las tres capas. No se animan todavía. */
#principal.hero-intro {position:relative;overflow:hidden;background:#fff;isolation:isolate;}
.hero-scene {position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.hero-scene__art {position:absolute;inset:0;background-repeat:no-repeat;background-size:cover;background-position:var(--hero-art-position,center center);}
.hero-scene__art--1 {background-image:url('../img/hero-scene/art-1.webp');}
.hero-scene__art--2 {background-image:url('../img/hero-scene/art-2.webp');}
.hero-scene__art--3 {background-image:url('../img/hero-scene/art-3.webp');}
#principal.hero-intro .hero-intro__content {position:relative;z-index:2;}
/* Título con escalas explícitas y ajustables. */
#principal.hero-intro {--hero-font-size:250px;--hero-art-position:left center;}
@media(max-width:1400px){#principal.hero-intro{--hero-font-size:210px;}}
@media(max-width:1100px){#principal.hero-intro{--hero-font-size:135px;}}
@media(max-width:700px){#principal.hero-intro{--hero-font-size:clamp(30px,20vw,110px);--hero-art-position:58% center;}}
/* Sin tercer contorno: el borde animado es el pseudo-elemento por letra. */
#principal.hero-intro .title-glyph{-webkit-text-stroke:0;}

/* V6: anclaje izquierdo fijo incluso en monitores anchos. */
#principal.hero-intro .hero-intro__content {
  width: auto; max-width: none; margin: 0;
  position: absolute; left: var(--hero-title-left, 32px); top: 50%;
  transform: translateY(-50%); display: block;
}
@media(max-width:700px){
  #principal.hero-intro .hero-intro__content {
    left: var(--hero-title-left, 10px);
    top: 30%;
  }
}
/* El + comparte la aparición de contorno con los glifos. */
#principal .hero-intro__plus { position: relative; }
#principal .hero-intro__plus::after {
  content: '+'; position:absolute; inset:0; color:transparent;
  -webkit-text-stroke:1.5px #111; transform:translate(-.025em,-.025em);
  opacity:0; pointer-events:none;
}
.titles-enhanced #principal.is-active .hero-intro__plus::after,
.titles-enhanced #principal.play-intro .hero-intro__plus::after {
  animation:bondi-stroke-reveal .22s linear 650ms both;
}
@media (prefers-reduced-motion:reduce) {
  #principal .hero-intro__plus::after {opacity:1!important;animation:none!important;}
}

/* V8 — Brisa de registro: sólo el segundo contorno, entrada intacta. */
@keyframes bondi-outline-breeze {
  0%, 5%, 100% { transform:translate(-.025em,-.025em); }
  1.2% { transform:translate(calc(-.025em + 1px),calc(-.025em - 1px)); }
  2.7% { transform:translate(calc(-.025em + 2px),calc(-.025em - 2px)); }
  4% { transform:translate(calc(-.025em + .5px),calc(-.025em - .5px)); }
}
.titles-enhanced #principal.is-active .title-glyph::after,
.titles-enhanced #principal.play-intro .title-glyph::after {
  animation:bondi-stroke-reveal .22s linear calc(var(--glyph-delay,0ms) + 120ms) both,
            bondi-outline-breeze 5.6s ease-in-out calc(2.7s + var(--jitter-offset,0ms)) infinite;
}
.titles-enhanced #principal.is-active .hero-intro__plus::after,
.titles-enhanced #principal.play-intro .hero-intro__plus::after {
  animation:bondi-stroke-reveal .22s linear 650ms both,
            bondi-outline-breeze 5.6s ease-in-out 2.85s infinite;
}
@media(prefers-reduced-motion:reduce){
  .titles-enhanced #principal .title-glyph::after,
  .titles-enhanced #principal .hero-intro__plus::after {animation:none!important;opacity:1!important;}
}