/* ==========================================================
   Portada tipo cartel · 11/10/2026
   Nombre gigante detrás, foto recortada delante, sello en la unión.
   ========================================================== */
.hero.hero-poster{display:block;max-width:none;margin:0;padding:0;background:#fafaf7;grid-template-columns:none}
.hero-poster>*{animation:none}

/* Escenario: vino a sangre */
.poster-stage{position:relative;height:min(calc(100svh - 120px),900px);min-height:620px;background:#7d133a;overflow:hidden;isolation:isolate}
.poster-stage:before{content:'';position:absolute;inset:auto -10% -30% -10%;height:70%;background:radial-gradient(closest-side,#9a2150 0%,transparent 100%);opacity:.8;z-index:-1}

/* Nombre gigante */
.poster-name{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:clamp(18px,4svh,48px);
  font:400 clamp(120px,min(19vw,30svh),300px)/.86 'DM Serif Display',serif;letter-spacing:-.045em;color:#f5ecc2;z-index:1;pointer-events:none;white-space:nowrap}
.pn-line{display:block;will-change:transform}
.pn-1{translate:-14% 0}
.pn-2{translate:9% 0;position:relative}
.pn-2 .asterisk{position:absolute;width:.16em;height:.16em;right:-.22em;bottom:.12em;color:#a7d4e4}
.pn-2 .asterisk path{stroke-width:3.2}

/* Foto recortada, delante del nombre */
.poster-photo{position:absolute;left:50%;bottom:0;height:94%;width:auto;max-width:none;translate:-50% 0;z-index:2;filter:drop-shadow(0 30px 40px #2a0614a0);will-change:transform;transform-origin:50% 100%}

/* Credenciales, estilo «as seen in» */
.poster-cred{position:absolute;left:clamp(20px,5vw,72px);bottom:clamp(40px,10svh,110px);z-index:3;display:grid;gap:2px;color:#fafaf7;max-width:220px}
.poster-cred span{font:600 10px/1.4 Raleway,sans-serif;letter-spacing:1.6px;text-transform:uppercase;opacity:.75}
.poster-cred strong{font:400 24px/1.1 'DM Serif Display',serif;margin-bottom:12px;color:#a7d4e4}

/* Nota manuscrita */
.poster-hand{position:absolute;right:clamp(20px,8vw,140px);top:15%;z-index:3;margin:0;font:clamp(24px,2.4vw,34px)/1.15 'Indie Flower',cursive;color:#fafaf7;rotate:-12deg;text-align:center}
.poster-hand:after{content:'';display:block;width:70%;height:10px;margin:6px auto 0;border-bottom:2px solid #a7d4e4;border-radius:0 0 50% 50%}

/* Sello en la unión con la siguiente banda */
.hero-poster .poster-seal{position:absolute;left:50%;bottom:-62px;width:124px;margin-left:-62px;z-index:4;animation:orbit 30s linear infinite;filter:drop-shadow(0 10px 18px #400b1b30)}
.hero-poster .poster-stage{overflow:visible}
.poster-stage{clip-path:inset(0 0 -80px 0)}

/* Banda de presentación */
.poster-intro{background:#a7d4e4;text-align:center;padding:110px clamp(20px,5vw,60px) 56px}
.poster-intro .eyebrow{color:#191919;margin:0}
.poster-intro h1{font-size:clamp(46px,5.6vw,88px);line-height:1;letter-spacing:-.03em;margin:22px auto 26px;max-width:16ch;color:#7d133a;text-wrap:balance}
.poster-intro h1 em{font-style:italic;color:#191919}
.poster-intro .lead{max-width:640px;margin:0 auto 12px;font-size:17px;line-height:1.7;color:#191919}
.poster-intro mark{background:none;color:#7d133a;font-weight:700;background-image:linear-gradient(#f5ecc2,#f5ecc2);background-size:100% .38em;background-position:0 88%;background-repeat:no-repeat;padding:0 .08em}
.poster-intro .actions{justify-content:center;margin-top:30px}
.poster-intro .btn{border-radius:40px;padding:17px 26px;font-size:11px;background:#7d133a;border-color:#7d133a;color:#fafaf7}
.poster-intro .btn.outline{background:transparent;color:#7d133a;border:1.5px solid #7d133a}
.poster-intro .hero-note{color:#7d133a;font-size:24px;margin:24px 0 0}
.poster-intro .hero-paths{max-width:1200px;margin:56px auto 0;text-align:left;border-top-color:#7d133a}
.poster-intro .hero-paths li+li{border-left-color:#7d133a40}

/* Móvil */
@media(max-width:800px){
  .poster-stage{height:min(calc(100svh - 110px),760px);min-height:560px}
  .poster-name{font-size:clamp(84px,27vw,150px);padding-top:28px;line-height:.9}
  .pn-1{translate:-10% 0}.pn-2{translate:6% 0}
  .poster-photo{height:80%}
  .poster-cred{left:16px;bottom:96px;max-width:120px}
  .poster-cred strong{font-size:17px;margin-bottom:8px}
  .poster-cred span{font-size:8px;letter-spacing:1px}
  .poster-hand{right:10px;top:auto;bottom:120px;font-size:20px}
  .hero-poster .poster-seal{width:100px;margin-left:-50px;bottom:-50px}
  .poster-intro{padding:84px 20px 44px}
  .poster-intro .lead{font-size:15px}
  .poster-intro .hero-paths{margin-top:40px}
}
@media(prefers-reduced-motion:reduce){.hero-poster .poster-seal{animation:none}}

.at-hero .journey{opacity:0}
@media(max-width:800px){.poster-hand{font-size:18px}}
.hero.hero-poster{overflow-x:clip}.hero-poster .poster-stage{overflow-x:clip;overflow-y:visible}

/* ==== Efecto telón (inspirado en la referencia) ====
   La portada se queda fija y la banda azul sube por encima; el nombre cambia de color sin parar. */
.hero.hero-poster{overflow-x:clip;position:relative}
.hero-poster .poster-stage{position:sticky;top:0;height:100svh;max-height:none;min-height:600px;clip-path:none;overflow:hidden}
.poster-intro{position:relative;z-index:5;background:rgba(167,212,228,.97);box-shadow:0 -30px 60px -20px #2a061440}
.poster-intro>.poster-seal{position:absolute;left:50%;top:0;bottom:auto;width:124px;margin:0 0 0 -62px;translate:0 -50%;z-index:6}
@keyframes poster-color{0%,18%{color:#f5ecc2}25%,43%{color:#a7d4e4}50%,68%{color:#fafaf7}75%,93%{color:#efc7d3}100%{color:#f5ecc2}}
.poster-name{animation:poster-color 12s ease-in-out infinite}
.poster-name .pn-ch{color:inherit}
/* palabras clave: subrayado a mano que se dibuja al aparecer */
.poster-intro mark{background:none;position:relative;color:#7d133a;font-weight:700;padding:0 .04em;white-space:nowrap}
.poster-intro mark:after{content:'';position:absolute;left:-2%;right:-2%;bottom:-.28em;height:.5em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 30 3, 60 10, 90 5 S 115 6, 118 4' fill='none' stroke='%23f5ecc2' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
  clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.65,0,.35,1)}
.poster-intro mark:nth-of-type(even):after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 25 9, 55 2, 85 7 S 112 4, 118 7' fill='none' stroke='%23fafaf7' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.poster-intro.drawn mark:after{clip-path:inset(0 0 0 0)}
.poster-intro.drawn mark:nth-of-type(2):after{transition-delay:.15s}.poster-intro.drawn mark:nth-of-type(3):after{transition-delay:.3s}
.poster-intro.drawn mark:nth-of-type(4):after{transition-delay:.45s}.poster-intro.drawn mark:nth-of-type(5):after{transition-delay:.6s}
@media(max-width:800px){.hero-poster .poster-stage{height:100svh;min-height:560px}.poster-intro>.poster-seal{width:100px;margin-left:-50px}.poster-intro mark{white-space:normal}}
@media(prefers-reduced-motion:reduce){.poster-name{animation:none}.hero-poster .poster-stage{position:relative;height:min(calc(100svh - 120px),900px)}.poster-intro mark:after{clip-path:none;transition:none}}
.poster-stage:after{content:'';position:absolute;inset:0;background:#2a0614;opacity:calc(var(--veil,0)*.45);z-index:3;pointer-events:none}
.poster-cred{bottom:calc(120px + 4svh)}
@media(max-width:800px){.poster-cred{bottom:calc(100px + 3svh)}.poster-hand{bottom:calc(110px + 3svh)}}

/* números de los tres caminos en letra manuscrita */
.hero-paths .hp-n{font:400 54px/1 'Indie Flower',cursive;font-style:normal;letter-spacing:0;color:#7d133a;rotate:-6deg;align-self:start;margin-top:-4px}
@media(max-width:800px){.hero-paths .hp-n{font-size:44px}}