/* Moms-to-be Pilates + Soundbath x Kaia Wellness — v2 (13 sep 2026, noche)
   Paleta de Cinthya: cream · butter · blue · peach · berry. Todo el texto va en berry (8.1:1 a 11.1:1).
   v2, contra "parece un PowerPoint": foto a sangre con el titular encima; capas que se montan (boleta
   sobre la portada, tarjeta sobre la foto del grupo, cúpula de coaches sobre el azul); cinta en
   movimiento; grano. */

@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/bodoni-moda-latin.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 700;font-display:swap;src:url(fonts/bodoni-moda-italic-latin.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/jost-latin.woff2) format("woff2")}

:root{
  --cream:#FFF9ED;
  --butter:#FFF1B5;
  --butter-rgb:255,241,181;
  --blue:#C1DBE8;
  --peach:#F3D4BE;
  --berry:#6B1735;
  --berry-deep:#56112A;
  --line:rgba(107,23,53,.2);
  --serif:"Bodoni Moda","Bodoni 72",Didot,Georgia,serif;
  --sans:"Jost","Avenir Next",Futura,system-ui,sans-serif;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --wrap:1180px;
  --pad:clamp(20px,5vw,56px);
  --section:clamp(80px,11vw,144px);
  --dome:clamp(56px,9vw,140px);
  --lift:0 40px 80px -40px rgba(86,17,42,.42);
  --grain:url(img/grain.png);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0;background:var(--grain) var(--cream);color:var(--berry);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.caps{font-family:var(--sans);font-weight:500;text-transform:uppercase;letter-spacing:.3em;font-size:.8125rem;line-height:1.5}
.title{margin:0;font-family:var(--serif);font-weight:500;text-transform:uppercase;line-height:1;text-wrap:balance}
.section-title{font-size:clamp(2.3rem,5.2vw,4.4rem);line-height:1}
.heart{width:1.15em;height:1.05em;flex:none;vertical-align:-.12em}
.arch{border-radius:48% 48% 22px 22px / 42% 42% 22px 22px}
.x{text-transform:none}
/* El "+" de Bodoni a tamaño grande es un trazo de pelo: con el tamaño óptico chico gana grosor */
.plus{font-variation-settings:"opsz" 6,"wght" 600}
.nw{white-space:nowrap}

/* Idioma */
.lang{position:fixed;z-index:20;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));display:flex;gap:2px;padding:4px;background:var(--cream);border:1px solid var(--line);border-radius:999px;box-shadow:0 6px 18px -12px rgba(107,23,53,.45)}
.lang button{appearance:none;margin:0;border:0;background:transparent;color:var(--berry);font:500 .75rem/1 var(--sans);letter-spacing:.16em;padding:11px 11px 11px 13px;border-radius:999px;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.lang button[aria-pressed="true"]{background:var(--berry);color:var(--cream)}
.lang button:focus-visible{outline:2px solid var(--berry);outline-offset:2px}

/* Botón */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:.7em;padding:1.2em 2.2em;background:var(--berry);color:var(--cream);border-radius:999px;text-decoration:none;font:500 .8125rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;transition:transform .16s var(--ease-out),background-color .2s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent}
.cta .heart{width:1.3em;height:1.2em}
.cta:active{transform:scale(.97)}
.cta:focus-visible{outline:2px solid var(--berry);outline-offset:4px}
@media (hover:hover) and (pointer:fine){
  .cta:hover{background:var(--berry-deep);transform:translateY(-2px);box-shadow:0 14px 28px -16px rgba(86,17,42,.7)}
}

/* Portada: en el celular la foto arriba y el titular montado sobre su borde; en computador, a sangre */
.hero{position:relative;overflow:hidden;background:var(--butter)}
.hero-media{position:relative;height:58svh;min-height:320px;max-height:640px;overflow:hidden}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:74% 55%;animation:settle 2.8s var(--ease-out) both}
.hero-veil{position:absolute;top:0;left:0;right:0;height:58svh;min-height:320px;max-height:640px;background:linear-gradient(180deg,rgba(var(--butter-rgb),0) 64%,rgba(var(--butter-rgb),.85) 90%,var(--butter) 100%);pointer-events:none}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.4vw,28px);margin-top:clamp(-76px,-10vw,-44px);padding:0 var(--pad) clamp(52px,10vw,80px);text-align:center}
.hero-title{font-size:clamp(2.3rem,11.6vw,4.2rem)}
.hero-title>span{display:block;white-space:nowrap}
.hero .collab{margin-top:.9em;font-size:clamp(.78rem,2.6vw,.95rem);line-height:1.4;text-indent:.3em}
.tagline{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6em}
.tagline span{text-indent:.3em}
.tagline .heart{width:1.45em;height:1.35em}
@keyframes settle{from{transform:scale(1.12)}to{transform:none}}
@media (min-width:900px){
  .hero{display:flex;align-items:center;min-height:100svh}
  .hero-media{position:absolute;inset:-7% 0;height:auto;min-height:0;max-height:none;will-change:transform}
  .hero-img{object-position:62% 50%}
  .hero-veil{inset:0;height:auto;min-height:0;max-height:none;background:linear-gradient(90deg,rgba(var(--butter-rgb),.97) 0%,rgba(var(--butter-rgb),.9) 24%,rgba(var(--butter-rgb),.5) 40%,rgba(var(--butter-rgb),0) 56%)}
  .hero-inner{align-items:flex-start;margin:0;padding:clamp(110px,14vh,150px) var(--pad) clamp(160px,22vh,210px) clamp(28px,6.5vw,120px);text-align:left}
  .hero-title{font-size:clamp(2.8rem,5.4vw,5.25rem)}
  .hero .collab,.tagline span{text-indent:0}
  .tagline{justify-content:flex-start}
}

/* Invitación + boleta (en computador la boleta sube y se monta sobre la portada) */
.intro{position:relative;z-index:3;padding-block:clamp(64px,9vw,110px) var(--section)}
.intro .wrap{display:grid;align-items:start;gap:clamp(48px,7vw,96px)}
.intro-text{order:-1}
.lead{margin-bottom:.75em;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.85rem,3.8vw,2.9rem);line-height:1.14;text-wrap:balance}
.body{max-width:56ch;text-wrap:pretty}
.soft{margin-top:1.4em;font-family:var(--serif);font-size:clamp(1.2rem,1.9vw,1.45rem);line-height:1.45;text-wrap:pretty}
.ticket{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(100%,430px);justify-self:center;padding:clamp(100px,13vw,128px) clamp(24px,4vw,44px) clamp(36px,5vw,48px);background:var(--grain) var(--cream);border-radius:50% 50% 28px 28px / 30% 30% 28px 28px;box-shadow:var(--lift);text-align:center}
.ticket.on-butter{padding-bottom:clamp(32px,5vw,44px)}
.date{font-family:var(--serif);font-weight:500;text-transform:uppercase;font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:1.05;text-wrap:balance}
.ticket .time{text-indent:.3em}
.rule{width:44px;height:1px;margin-block:4px;background:var(--berry);opacity:.35}
.place{max-width:28ch;line-height:1.5;text-wrap:balance}
.maps{font-size:.72rem;text-indent:.3em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.5em}
.price{font-family:var(--serif);font-weight:500;font-size:2.2rem;line-height:1}
.ticket .cta{margin-top:10px}
@media (min-width:900px){
  .intro{padding-top:0}
  .intro .wrap{grid-template-columns:.8fr 1.2fr}
  .intro-text{order:0;padding-top:clamp(64px,8vw,110px)}
  .intro .ticket{justify-self:start;margin-top:clamp(-190px,-11vw,-120px)}
}

/* Cinta en movimiento, inclinada y montada entre la invitación y el azul */
.ribbon-wrap{position:relative;z-index:4;overflow:hidden;padding-block:48px;margin-block:-48px;pointer-events:none}
.ribbon{width:112%;margin-left:-6%;padding:16px 0;background:var(--grain) var(--berry);color:var(--cream);transform:rotate(-2.4deg);box-shadow:0 18px 40px -24px rgba(86,17,42,.6)}
.ribbon-track{display:flex;width:max-content;animation:marquee 44s linear infinite}
.ribbon-track span{flex:none;padding-right:.9em;font:500 clamp(.95rem,1.4vw,1.15rem)/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Por qué pilates prenatal + la foto del grupo */
.why{position:relative;background:var(--grain) var(--blue);padding-block:calc(var(--section) + 24px) calc(var(--section) + var(--dome))}
.why-grid{display:grid;gap:clamp(40px,6vw,80px)}
.why-head .body{margin-top:1.1em}
.kicker{margin:0 0 .6em;font-family:var(--serif);font-style:italic;font-size:1.3rem}
.benefits{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.benefits li{display:grid;grid-template-columns:2.2rem 1fr;align-items:baseline;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.3;text-wrap:pretty}
.emo{font-size:1.3rem;line-height:1;text-align:center}
.why-side{order:3}   /* en celular, la lista del soundbath va después de la de Pilates */
.benefits strong{font-weight:650}
.plus{font-family:var(--sans);font-weight:600;font-size:.8em;vertical-align:.05em}
.together{display:grid;align-items:center;margin-top:clamp(80px,11vw,150px)}
.together-photo{margin:0;width:min(100%,480px);justify-self:center}
.together-photo img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:inherit}
.together-card{position:relative;z-index:2;margin:-72px clamp(12px,4vw,40px) 0;padding:clamp(28px,4vw,52px);background:var(--grain) var(--cream);border-radius:28px;box-shadow:var(--lift);text-align:center}
.together-card .caps{text-indent:.3em}
.together-card .big{max-width:18ch;margin:.45em auto .5em;font-family:var(--serif);font-style:italic;font-size:clamp(1.8rem,3.6vw,2.9rem);line-height:1.1;text-wrap:balance}
@media (min-width:900px){
  .why-grid{grid-template-columns:.9fr 1.1fr;grid-template-rows:auto 1fr;row-gap:clamp(32px,4vw,56px);align-items:start}
  .why-head{grid-column:1;grid-row:1}
  .why-side{order:0;grid-column:1;grid-row:2}   /* soundbath a la izquierda, bajo el título */
  .why-list{grid-column:2;grid-row:1 / span 2}   /* Pilates a la derecha, arriba */
  .together{grid-template-columns:1fr 1fr}
  .together-photo{justify-self:start}
  .together-card{margin:0 0 0 -120px;text-align:left}
  .together-card .caps{text-indent:0}
  .together-card .big{margin-inline:0}
}
/* El título ya no va clavado: con la lista del soundbath debajo, la columna izquierda no cabe en pantalla (13 sep). */

/* Coaches: la sección entra en cúpula sobre el azul */
.coach{position:relative;z-index:2;margin-top:calc(var(--dome) * -1);padding-block:calc(var(--section) + var(--dome) * .35) var(--section);background:var(--grain) var(--cream);border-radius:50% 50% 0 0 / var(--dome) var(--dome) 0 0;overflow-x:hidden;overflow-x:clip}
.coach .section-title{margin-bottom:clamp(40px,6vw,72px)}
.coach-row{display:grid;align-items:center;gap:clamp(40px,7vw,104px)}
.coach-row+.coach-row{margin-top:clamp(72px,10vw,128px)}
.coach-photo{position:relative;margin:0;width:min(100%,440px);justify-self:center}
.coach-photo::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--blue);transform:translate(16px,16px)}
.coach-row.flip .coach-photo::before{background:var(--peach);transform:translate(-16px,16px)}
.coach-photo img{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:inherit}
.name{margin:0 0 1.1em;font-family:var(--serif);font-style:italic;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.1}
/* País bajo el nombre: bandera + nombre del país en versales */
.name:has(+ .from){margin-bottom:.3em}
.coach-text .from{display:flex;align-items:center;gap:.55em;margin:0 0 1.4em;font-size:.75rem;letter-spacing:.24em;line-height:1}
.from .flag{font-size:1.3rem;line-height:1}
.coach-text p{max-width:58ch;text-wrap:pretty}
.coach-text p+p{margin-top:1em}
.coach blockquote{max-width:30ch;margin:1.5em 0;font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.4vw,1.85rem);line-height:1.3;text-wrap:pretty}
.coach blockquote.bio-quote{max-width:46ch;margin:1em 0 0;font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.55}
@media (min-width:900px){
  .coach-row{grid-template-columns:.85fr 1.15fr}
  .coach-row.flip{grid-template-columns:1.15fr .85fr}
  .coach-row.flip .coach-photo{order:2}
}
/* Asistente de coach (Jose): foto, nombre y cita más chicos; en escritorio la fila es más angosta y va centrada */
.coach-text .role{margin:0 0 .7em;opacity:.75}
.name:has(+ .role){margin-bottom:.35em}
.coach-row.assist .name{font-size:clamp(1.4rem,2.2vw,1.75rem)}
.coach-row.assist .coach-photo{width:min(220px,60vw)}
.coach-row.assist .coach-photo::before{transform:translate(-10px,10px)}
.coach-row.assist blockquote.bio-quote{max-width:52ch;font-size:clamp(1rem,1.2vw,1.075rem);line-height:1.6}
@media (min-width:900px){
  .coach-row.assist{grid-template-columns:minmax(0,1fr) auto;max-width:820px;margin-inline:auto;gap:clamp(32px,4vw,56px)}
}

/* Ven como eres: un arco grande, como las muestras del tablero de Cinthya */
.come{padding-block:0 clamp(20px,3vw,40px)}
.come-arch{display:flex;flex-direction:column;align-items:center;max-width:900px;margin-inline:auto;padding:clamp(120px,15vw,190px) clamp(24px,6vw,96px) clamp(56px,8vw,96px);background:var(--grain) var(--butter);border-radius:50% 50% 36px 36px / clamp(150px,22vw,300px) clamp(150px,22vw,300px) 36px 36px;text-align:center}
.come .section-title{margin-bottom:.55em}
.come p{max-width:42ch;font-size:clamp(1.1rem,1.6vw,1.25rem);line-height:1.55;text-wrap:balance}
.come p+p{margin-top:.5em}
.come .limited{margin-top:2em;font-size:.8125rem;text-indent:.3em}
.come .cta-wrap{margin-top:18px}
/* Dress code: los 4 colores de la paleta del evento como círculos, con un aro fino para que butter y cream se lean sobre el arco butter */
.dress{display:flex;flex-direction:column;align-items:center;margin-top:clamp(40px,5.5vw,64px);text-align:center}
.come .dress-title{margin:0 0 .5em;font-size:.8125rem;text-indent:.3em}
.come .dress-lead{margin:0;max-width:34ch;font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.35}
.palette{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,4vw,40px);margin:clamp(26px,3.5vw,36px) 0 0;padding:0;list-style:none}
.palette li{display:flex;flex-direction:column;align-items:center;gap:12px;width:clamp(64px,9vw,88px)}
.dot{width:clamp(56px,7vw,72px);aspect-ratio:1;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(107,23,53,.28),0 10px 22px -14px rgba(86,17,42,.55)}
.dot-name{font-family:var(--sans);font-weight:500;font-size:.6875rem;line-height:1.35;letter-spacing:.18em;text-transform:uppercase;text-wrap:balance}

/* Nota médica */
.note{padding-block:clamp(12px,2vw,28px) clamp(64px,9vw,112px)}
.note .inner{max-width:680px;margin-inline:auto;text-align:center}
.note h2{margin:0 0 1.1em;font-family:var(--serif);font-weight:500;text-transform:uppercase;font-size:clamp(1.15rem,2vw,1.45rem);letter-spacing:.04em;line-height:1.3}
.note p{font-size:.9375rem;line-height:1.75;text-wrap:pretty}
.note p+p{margin-top:.9em}

/* Pie */
/* Partners: tres logos con sus colores reales, cada uno a la altura que pide su forma (emblema vertical, palabra ancha, sello cuadrado) */
.partners{padding-block:0 clamp(64px,9vw,112px)}
.partners-title{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,20px);margin:0 auto clamp(32px,4.5vw,52px);max-width:680px;text-align:center}
.partners-title::before,.partners-title::after{content:"";flex:1 1 0;min-width:16px;max-width:150px;height:1px;background:currentColor;opacity:.35}
.partner-logos{display:flex;flex-direction:column;align-items:center;gap:30px;margin:0;padding:0;list-style:none}
.partner-logos li{display:flex;align-items:center;justify-content:center}
.partner-logos img{width:auto;max-width:min(260px,70vw);object-fit:contain}
.p-badge img{height:132px;border-radius:10px}
.p-wide img{height:60px}
.p-tile img{height:60px;border-radius:14px}
@media (min-width:600px){
  .partner-logos{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:clamp(28px,6vw,80px)}
  .p-badge img{height:clamp(120px,15vw,176px)}
  .p-wide img,.p-tile img{height:clamp(64px,8vw,96px)}
}
.foot{background:var(--grain) var(--berry);color:var(--cream);text-align:center;padding:clamp(12px,1.5vw,15px) var(--pad) calc(clamp(4px,.6vw,6px) + env(safe-area-inset-bottom))}
/* Fila de abajo: crédito a la izquierda y derechos a la derecha, pegados al borde; la frase de la marca queda arriba, centrada */
.foot-row{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:clamp(8px,1vw,10px);font:400 .75rem/1.4 var(--sans);letter-spacing:.06em;opacity:.82;text-align:center}
/* El corazón late como en los otros sitios de Neexus */
.foot-made .corazon{display:inline-block;margin-left:.15em;animation:latido 1.5s ease-in-out infinite}
@keyframes latido{0%,100%{transform:scale(1)}12%{transform:scale(1.3)}24%{transform:scale(1)}36%{transform:scale(1.2)}48%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.foot-made .corazon{animation:none}}
.foot-row p{margin:0}
.foot-made a{color:inherit;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.foot-made{flex:0 0 auto}
.foot-rights{flex:0 0 auto}
@media (min-width:600px){
  .foot-row{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:6px 24px;text-align:left}
  .foot-rights{flex:1 1 auto;text-align:right}
}
.foot-rights a{color:inherit;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}

/* Política de privacidad: los dos idiomas van completos en el HTML y se muestra solo el elegido */
html[lang="es"] [data-only="en"],html:not([lang="es"]) [data-only="es"]{display:none}
.policy{background:var(--grain) var(--cream);padding-block:clamp(96px,14vh,140px) clamp(64px,9vw,112px)}
.policy .wrap{max-width:720px}
.policy .caps{margin:0 0 1.2em;text-indent:.3em}
.policy h1{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:.35em}
.policy-meta{margin:0 0 2.2em;font-size:.8125rem;letter-spacing:.06em;opacity:.75}
.policy h2{margin:2em 0 .6em;font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.2}
.policy p,.policy li{font-size:.9375rem;line-height:1.75;text-wrap:pretty}
.policy p+p{margin-top:.9em}
.policy ul{margin:0;padding-left:1.2em}
.policy li+li{margin-top:.55em}
.policy a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.policy-back{margin-top:3em}
.policy-back .back{text-decoration:underline}
/* Aviso legal bajo el formulario */
.signup-legal{margin:-6px 0 0;text-align:center;font-size:.75rem;line-height:1.5;opacity:.85}
.signup-legal a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.foot-tag{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,20px)}
.foot-tag span{flex:0 1 auto;text-indent:.3em}
.foot-tag::before,.foot-tag::after{content:"";flex:1 1 0;min-width:16px;max-width:150px;height:1px;background:currentColor;opacity:.55}
@media (max-width:399.98px){.foot-tag::before,.foot-tag::after{display:none}}
.foot-line{margin-top:2px;line-height:1.3;font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1.8vw,1.25rem)}

/* Confirmación */
.thanks{position:relative;background:var(--grain) var(--butter);text-align:center;overflow-x:hidden;overflow-x:clip}
.thanks .wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,24px);min-height:100svh;padding-block:clamp(96px,14vh,140px) clamp(64px,10vh,110px)}
.thanks .caps{text-indent:.3em}
.thanks-title{max-width:14ch;font-size:clamp(2.4rem,7vw,4.6rem)}
.thanks-sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.4vw,1.75rem)}
.thanks .ticket{margin-block:12px}
.thanks-bring{max-width:40ch;text-wrap:balance}
.thanks-note{max-width:52ch;font-size:.9375rem;line-height:1.7;text-wrap:pretty}
.back{margin-top:8px;font-size:.75rem;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.5em}

/* Inscripción: el formulario va antes del pago. En el celular sube desde abajo; en computador es un arco. */
html:has(.signup[open]){overflow:hidden}
.signup{--from:translateY(100%);--fade:1;--dur:.42s;--ease:cubic-bezier(0.32,0.72,0,1);width:100%;max-width:100%;height:fit-content;max-height:100%;margin:auto 0 0;padding:0;border:0;background:transparent;color:var(--berry);overflow:visible;opacity:var(--fade);transform:var(--from);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),overlay var(--dur) allow-discrete,display var(--dur) allow-discrete}
.signup[open]{opacity:1;transform:none}
@starting-style{.signup[open]{opacity:var(--fade);transform:var(--from)}}
.signup::backdrop{background:rgba(58,10,28,.44);opacity:0;transition:opacity .3s ease,overlay .42s allow-discrete,display .42s allow-discrete}
.signup[open]::backdrop{opacity:1}
@starting-style{.signup[open]::backdrop{opacity:0}}
.signup-card{position:relative;display:flex;flex-direction:column;gap:22px;max-height:92vh;max-height:92svh;overflow-y:auto;overscroll-behavior:contain;padding:36px 22px calc(26px + env(safe-area-inset-bottom));background:var(--grain) var(--cream);border-radius:28px 28px 0 0;box-shadow:0 -28px 60px -34px rgba(58,10,28,.55)}
.signup-close{position:absolute;z-index:2;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--cream);color:var(--berry);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s ease,transform .16s var(--ease-out)}
.signup-close svg{width:20px;height:20px}
.signup-close:active{transform:scale(.94)}
.signup-close:focus-visible{outline:2px solid var(--berry);outline-offset:2px}
.signup-head{display:flex;flex-direction:column;align-items:center;gap:10px;padding-inline:36px;text-align:center}
.signup-title{font-size:clamp(1.9rem,8vw,2.6rem)}
/* En el celular la fecha y la hora van en dos renglones: partidas por el ancho, el "·" quedaba colgando */
.signup-when{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.6875rem;letter-spacing:.22em;text-indent:.22em}
.signup-when .sep{display:none}
.signup-lead{max-width:32ch;font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.4;text-wrap:balance}
.signup-fields{display:grid;gap:16px 12px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label{font-weight:500;font-size:.9375rem;line-height:1.3}
.field .opt{font-weight:400}
/* El borde del campo va a 3.3:1 contra el crema (el mínimo para controles es 3:1) */
.field input,.field select{width:100%;min-height:52px;margin:0;padding:12px 16px;border:1px solid rgba(107,23,53,.55);border-radius:14px;background:rgba(255,255,255,.7);color:var(--berry);font:400 1.0625rem/1.3 var(--sans);-webkit-appearance:none;appearance:none;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.field select{padding-right:42px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%236B1735' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center/14px 9px,rgba(255,255,255,.7);cursor:pointer}
.field input::placeholder{color:rgba(107,23,53,.7)}
.field input:focus,.field select:focus{outline:0;border-color:var(--berry);background-color:#fff;box-shadow:0 0 0 3px rgba(107,23,53,.16)}
.field [aria-invalid="true"]{border-color:var(--berry);box-shadow:inset 0 0 0 1px var(--berry)}
.field [aria-invalid="true"]:focus{box-shadow:inset 0 0 0 1px var(--berry),0 0 0 3px rgba(107,23,53,.16)}
.field-error{display:flex;align-items:baseline;gap:8px;font-size:.875rem;line-height:1.35;font-weight:500}
.field-error::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor;transform:translateY(-1px)}
.field-error[hidden]{display:none}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.signup-submit{width:100%;border:0;cursor:pointer;padding-block:1.35em}
.signup-submit:disabled{cursor:progress;opacity:.8}
@media (hover:hover) and (pointer:fine){
  .signup-close:hover{background:var(--butter)}
  .field input:hover:not(:focus),.field select:hover:not(:focus){border-color:rgba(107,23,53,.55)}
}
@media (min-width:360px){
  .signup-fields{grid-template-columns:1fr 1.5fr}
  .field-wide{grid-column:1 / -1}
}
@media (min-width:600px){
  .signup{--from:translateY(16px) scale(.98);--fade:0;--dur:.3s;--ease:var(--ease-out);width:min(calc(100% - 40px),540px);margin:auto}
  .signup-card{max-height:calc(100vh - 40px);max-height:calc(100svh - 40px);gap:26px;padding:clamp(80px,11vh,100px) 48px 40px;border-radius:50% 50% 30px 30px / 150px 150px 30px 30px;box-shadow:var(--lift)}
  .signup-close{top:4px;right:-8px}
}
@media (prefers-reduced-motion:reduce){
  .signup{--from:none;--fade:0;--dur:.2s;--ease:ease}
}
.shot .signup,.shot .signup::backdrop{transition:none}

/* Movimiento: entrada de la portada y apariciones al hacer scroll */
.rise{animation:rise .95s var(--ease-out) var(--d,0ms) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out) var(--d,0ms),transform .9s var(--ease-out) var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
.shot .rise,.shot .hero-img,.shot .ribbon-track{animation:none}
@media (prefers-reduced-motion:reduce){
  .rise{animation:fade .6s ease both}
  .hero-img,.ribbon-track{animation:none}
  .js .reveal{transform:none;transition:opacity .5s ease}
  .cta,.cta:active{transition:background-color .2s ease;transform:none}
}