/* Additions for the production install. The approved styles.css is untouched. */
.video-frame{aspect-ratio:16/9;background:#000;border:1px solid #6c315d;overflow:hidden}
.video-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.story-card .video-frame + h3{margin-top:16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pay-button{display:flex;align-items:center;justify-content:center;gap:10px;width:min(94%,620px);margin:14px auto 4px;padding:14px 18px;text-align:center;font:800 11px/1.2 var(--body);letter-spacing:.12em}
.pay-button[hidden]{display:none}
.lang-switch{position:fixed;top:14px;right:14px;z-index:30;display:flex;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.38);border-radius:999px;background:rgba(16,0,23,.72);backdrop-filter:blur(6px)}
.lang-switch button{min-width:46px;min-height:36px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:#fff;font:800 11px/1 var(--body);letter-spacing:.14em;cursor:pointer}
.lang-switch button[aria-pressed="true"]{background:var(--gold,#ffd84f);color:#100017}
.lang-switch button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.nav-actions{display:flex;align-items:center;gap:12px}
.lang-switch--nav{position:static;z-index:auto;background:rgba(16,0,23,.55);backdrop-filter:none}
.lang-switch--nav button{min-width:40px;min-height:34px;padding:0 10px;font-size:10px}
@media(max-width:760px){.site-nav{gap:10px}.nav-actions{gap:8px}.lang-switch--nav{padding:2px}.lang-switch--nav button{min-width:34px;min-height:32px;padding:0 8px;font-size:9px}}
@media(max-width:400px){.site-nav .brand{font-size:18px}}
/* The approved .faq grid (38% + 62% columns plus a 7vw gap) is wider than the screen and creates a
   horizontal scroll from 761px up. Same proportions, columns now share what is left after the gap. */
@media(min-width:761px){.faq{grid-template-columns:minmax(0,38fr) minmax(0,62fr)}}
/* The group photo kept the HTML height attribute (904px) at every width, which left a tall empty band above the
   heads (up to ~700px on phones). The picture now keeps its natural proportions and the section is as tall as the photo. */
.landing-page .speaker-bridge-photo{height:auto}
.landing-page .speaker-bridge{min-height:0}
/* Hero colors (Maribel): first two headline lines yellow, the two that follow white; the promise first line pink, second white. */
.landing-page .hero-conversion h1 span:nth-child(n+3){color:#fff}
.landing-page .hero-conversion .hero-promise span:first-child{color:var(--rose2)}
.landing-page .hero-conversion .hero-promise span:last-child{color:#fff}
/* Phones only (Maribel): the red-dress photo in the hero was too big. Desktop and tablet are untouched. */
@media(max-width:760px){.landing-page .hero-founder-cutout{min-height:455px}.landing-page .hero-founder-cutout>img{height:520px}}
/* Yellow reserve buttons (Maribel, 2026-10-22). The top-right button stays pink.
   - the button over her photo is yellow on every screen size;
   - phones only: a second yellow button under the countdown, and the photo button gets room at the bottom of the hero. */
.landing-page .hero-founder-details a{background:var(--gold);border-color:var(--gold2);color:#210524;box-shadow:0 12px 30px rgba(255,216,79,.3)}
.landing-page .hero-founder-details a:hover{background:#fff;color:#210524}
/* Portrait tablets (761–1100px wide, taller than wide). The approved CSS puts the photo in a column narrower than the photo itself and
   clips it (dress and arms cut on both sides, hard edges, gradient not reaching the edge). Here it is stacked like the phone:
   text first, then the whole photo centered with the button at its foot. Landscape tablets and desktop are untouched. */
@media(min-width:761px) and (max-width:1100px) and (orientation:portrait){
  /* the whole hero fits the first screen: banner (38px) + hero = viewport height */
  .landing-page .hero-conversion{box-sizing:border-box;height:calc(100svh - 38px);min-height:600px;padding-bottom:0}
  .landing-page .hero-conversion-grid{height:100%;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);justify-items:center;align-items:start;padding:0 0 0}
  /* text block with more presence */
  body.landing-page .hero-conversion .hero-copy{grid-column:1;grid-row:1;text-align:center;width:100%;max-width:560px;transform:none;margin:0 auto;zoom:1.2}
  .landing-page .hero-copy .hero-event-facts{justify-content:center}
  .landing-page .hero-copy .hero-inline-countdown{margin-left:auto;margin-right:auto}
  .landing-page .hero-copy .hero-promise{border-left:0;padding-left:0;margin:16px auto 18px;text-align:center;max-width:100%;width:100%}
  .landing-page .hero-copy .hero-promise span{white-space:normal}
  /* photo: slid down so the legs are cropped behind the name and the button, which stay at the foot */
  .landing-page .hero-founder-cutout{grid-column:1;grid-row:2;order:2;position:relative;left:auto;transform:none;width:100%;max-width:760px;height:100%;min-height:0;margin:0 auto;overflow:hidden}
  .landing-page .hero-founder-cutout>img{inset:auto auto -30% 50%;height:130%;width:auto;max-width:none;transform:translateX(-50%)}
  .landing-page .hero-founder-details{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(96%,480px);margin:0;padding:150px 20px 26px;background:linear-gradient(transparent,rgba(16,0,23,.9) 52%,#100017 78%)}
  .landing-page .hero-founder-details small{display:none}
}
@media(min-width:900px) and (max-width:1100px) and (orientation:portrait){body.landing-page .hero-conversion .hero-copy{zoom:1.32}}
.landing-page footer .legal-links{margin-top:6px}.landing-page footer .legal-links a{text-decoration:underline;text-underline-offset:3px;opacity:.85}.landing-page footer .legal-links a:hover{opacity:1}
.hero-mobile-cta{display:none}
@media(max-width:760px){
  .hero-mobile-cta{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;margin-top:12px;padding:17px 18px;background:var(--gold);border:1px solid var(--gold2);color:#210524;font:800 12px/1 var(--body);letter-spacing:.09em;text-align:center;box-shadow:0 12px 30px rgba(255,216,79,.28)}
  .hero-mobile-cta:hover,.hero-mobile-cta:active{background:#fff}
  .hero-mobile-cta span{font-size:16px}
  .landing-page .hero-founder-details a{margin:0 auto;min-height:60px}
  .landing-page .hero-conversion{padding-bottom:36px}
}
/* Hero (Maribel, 2026-10-27): the registration form takes the place of her photo, so the form is the first thing people see
   next to the promise on computer, tablet and phone. Everything else on the page is unchanged. */
body.landing-page .hero-form{position:relative;width:100%;max-width:420px;margin:0 auto;padding:26px 26px 22px;box-sizing:border-box}
body.landing-page .hero-form-eyebrow{font-size:10px;margin-bottom:6px}
body.landing-page .hero-form h2{font-size:29px}
body.landing-page .hero-form-intro{margin:8px 0 16px;font-size:13px;line-height:1.4}
body.landing-page .hero-form .field{margin-bottom:12px}
body.landing-page .hero-form .field label{font-size:10px;margin-bottom:4px}
body.landing-page .hero-form .field input{padding:9px 0;font-size:16px}
body.landing-page .hero-form .check{margin:10px 0 14px;font-size:11px;line-height:1.4}
body.landing-page .hero-form button{padding:16px 10px;font-size:12px}
body.landing-page .hero-form .form-status{margin-top:9px;font-size:10px;line-height:1.4}
@media(min-width:761px){
  /* the hero grows with the form on short screens (it used to be locked to the screen height and clipped the bottom of the form) */
  body.landing-page .hero-conversion{height:auto;min-height:max(650px,calc(100svh - 38px));padding-bottom:40px}
  body.landing-page .hero-conversion-grid{height:auto;grid-template-columns:minmax(0,1.3fr) minmax(340px,420px);grid-template-rows:auto;gap:clamp(36px,5vw,84px);align-items:center;justify-items:stretch;padding:18px 0 40px;max-width:min(1200px,88vw);margin-left:auto;margin-right:auto}
  body.landing-page .hero-conversion .hero-copy{grid-column:1;grid-row:1;justify-self:start;text-align:left;zoom:1;margin:0;transform:none}
  body.landing-page .hero-form{grid-column:2;grid-row:1;align-self:center;justify-self:end;margin:0}
}
/* Portrait tablets: text first, then the form centered under it (the hero grows to fit both). */
@media(min-width:761px) and (max-width:1100px) and (orientation:portrait){
  body.landing-page .hero-conversion{height:auto;min-height:0;padding-bottom:36px}
  body.landing-page .hero-conversion-grid{grid-template-columns:minmax(0,1fr);row-gap:30px;justify-items:center}
  body.landing-page .hero-conversion .hero-copy{justify-self:center;text-align:center;max-width:620px}
  body.landing-page .hero-form{grid-column:1;grid-row:2;justify-self:center;max-width:480px}
}
/* Phones: promise first, form right below. The yellow button that used to point to the photo is not needed any more. */
@media(max-width:760px){
  body.landing-page .hero-conversion{height:auto;min-height:0;padding-bottom:28px}
  body.landing-page .hero-conversion-grid{display:flex;flex-direction:column;gap:22px;padding:18px 5vw 0}
  body.landing-page .hero-conversion .hero-copy{padding:0;zoom:1}
  body.landing-page .hero-mobile-cta{display:none}
  body.landing-page .hero-form{max-width:520px;padding:22px 20px 18px}
}
/* Computer: a slightly more compact form, bottom line of the form = bottom line of the countdown. */
@media(min-width:1101px){
  body.landing-page .hero-conversion-grid{align-items:end}
  body.landing-page .hero-conversion .hero-copy{align-self:end}
  body.landing-page .hero-form{align-self:end;padding:24px 26px 20px}
  body.landing-page .hero-form-eyebrow{font-size:9px;margin-bottom:4px}
  body.landing-page .hero-form h2{font-size:25px}
  body.landing-page .hero-form-intro{margin:6px 0 10px;font-size:12px}
  body.landing-page .hero-form .field{margin-bottom:10px}
  body.landing-page .hero-form .field label{font-size:9px;margin-bottom:2px}
  body.landing-page .hero-form .field input{padding:8px 0;font-size:15px}
  body.landing-page .hero-form .check{margin:7px 0 10px;font-size:10px;line-height:1.35}
  body.landing-page .hero-form button{padding:13px 10px;font-size:12px}
  body.landing-page .hero-form .form-status{margin-top:7px;font-size:9px}
}
/* Speakers: the other 10 share one size, 5 per row (2 on tablets, 1 on phones). Maribel is presented in the "Fundadora y anfitriona" section right above. */
.landing-page .speaker-grid{display:flex;flex-wrap:wrap;justify-content:center}
.landing-page .speaker-grid .speaker{flex:0 0 calc((100% - 48px) / 5)}
@media(max-width:1100px){.landing-page .speaker-grid .speaker{flex-basis:calc((100% - 12px) / 2)}}
@media(max-width:760px){.landing-page .speaker-grid .speaker{flex-basis:100%}}
/* "RAMOS" in the founder section: brand pink, no outline (it used to be yellow with a dark outline). */
.landing-page .host-copy h2 em{color:#cf1f7c;-webkit-text-stroke:0;paint-order:normal;text-shadow:none}
/* "SIN DEPENDER DE TU PRESENCIA." in the transformation section: same brand pink, no outline. */
.landing-page .transform-panel.after h2 em{color:#cf1f7c;-webkit-text-stroke:0;paint-order:normal;text-shadow:none}
/* Founder section: same authority information as the other landing (credentials + roles). */
.landing-page .host{--hc:#b5146a}
.landing-page .host-credentials{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:30px}
.landing-page .host-credentials>div{grid-column:span 2;padding:16px 12px;border:1px solid color-mix(in srgb,var(--hc) 30%,#d9ccd2);border-radius:14px;background:rgba(255,255,255,.6);text-align:center}
.landing-page .host-credentials>div:nth-child(n+4){grid-column:span 3}
.landing-page .host-credentials b{display:block;color:var(--hc);font:800 clamp(20px,1.9vw,27px)/1.05 var(--body);letter-spacing:-.01em}
.landing-page .host-credentials span{display:block;margin-top:7px;color:#4a3a45;font:600 11px/1.35 var(--body)}
.landing-page .host-roles{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.landing-page .host-roles span{padding:7px 14px;border:1px solid color-mix(in srgb,var(--hc) 45%,transparent);border-radius:999px;color:var(--hc);font:700 11px/1 var(--body)}
@media(max-width:1100px){
  .landing-page .host-credentials{grid-template-columns:repeat(2,1fr)}
  .landing-page .host-credentials>div,.landing-page .host-credentials>div:nth-child(n+4){grid-column:span 1}
  .landing-page .host-credentials>div:last-child{grid-column:span 2}
  .landing-page .host-credentials b{font-size:clamp(17px,2.2vw,22px)}
}