/*
Theme Name: Somos la E
Theme URI: https://somoslae.example.com
Author: Somos la E
Author URI: https://somoslae.example.com
Description: Theme dedicado para el subsitio (subdominio) de Somos la E dentro del multisite de WordPress. Landing de una sola página: hero, manifiesto, próximos eventos (Custom Post Type), tickers, activación de E-Pass y cierre.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: somos-la-e
*/

/* =========================================================
   A partir de aquí: mismo CSS del sitio estático original
   (css/style.css), sin cambios. No se tocaron selectores ni
   valores — la migración a WordPress no debería requerir
   tocar este archivo salvo que cambie el diseño.
   ========================================================= */

/* =========================================================
   SOMOS LA E — Landing
   Tokens, tipografía y layout según context.md (mockup 1366px)
   ========================================================= */

:root{
  /* Paleta de marca — Noche, Nublado, Gramilla y Euforia. Los que
     no traen nota son el hex exacto de la paleta; los "-hover" son
     variantes derivadas (más oscuras) para :hover, no colores propios
     de la paleta. */
  --negro:        #161616; /* Noche */
  --blanco:       #F9F9F9; /* Nublado */
  --gris-hero:    #E8E8E8;
  --gris-oscuro:  #2B2B2B;

  --lima-boton:   #BAF486; /* Gramilla */
  --lima-boton-hover: #A9EC6B;
  /* --lima y --lima-tarjeta NO son el verde de la paleta (Gramilla
     es #BAF486, ~83% de saturación, más pastel) — son un verde más
     saturado (100%) y un poco más brillante, mismo tono/hue pero más
     intenso. Ya está usado en varios lugares (ticker, círculo de
     Instagram, focos, radios/checkboxes, título de éxito). No es
     prioridad alinearlos, queda así por decisión — se documenta acá
     por si se quiere revisar más adelante. --lima-tarjeta además no
     se usa en ningún selector actualmente. */
  --lima:         #BFFF72;
  --lima-tarjeta: #BDFD70;

  --lila:         #DEB5FF; /* Euforia */
  --lila-hover:   #D1A1FA;

  /* Desviación intencional de accesibilidad (ver sección 7 del brief) */
  --gris-texto:     #9A9A9A;
  --gris-inactivo:  #8A8A8A;
  --gris-linea:     #787878;
  --hairline:       #0A0A0A;

  --rojo-error: #FF5A5A;

  --content-width: 1246px;
  --side-margin: 60px;

  --ff: "aktiv-grotesk-extended", "Archivo", Arial, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--blanco);
  color: var(--negro);
  font-family: var(--ff);
  font-variation-settings: "wdth" 112;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

button{ font-family: inherit; cursor: pointer; border: none; background: none; }

ul{ list-style: none; margin: 0; padding: 0; }

.container{
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--side-margin);
}

/* Foco visible accesible */
:focus-visible{
  outline: 2px solid var(--lima);
  outline-offset: 2px;
}

.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Mayúsculas + tracking display */
.uppercase{
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* =========================================================
   BOTONES
   ========================================================= */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 358px;
  height: 60px;
  font-size: 15.8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--negro);
  background: var(--lima-boton);
  transition: background-color 150ms ease;
}

.btn__arrow{
  transition: transform 150ms ease;
  display: inline-flex;
}

.btn:hover .btn__arrow{ transform: translateX(4px); }

.btn:hover{ background: var(--lima-boton-hover); }

.btn--secondary{ background: var(--lila); }
.btn--secondary:hover{ background: var(--lila-hover); }

.btn--submit{
  width: 637px;
  max-width: 100%;
  height: 54px;
  background: var(--blanco);
  color: var(--negro);
}
.btn--submit:hover{ background: #EDEDED; }
.btn--submit:disabled{ opacity: .6; cursor: progress; }

/* =========================================================
   INPUTS / FORM
   ========================================================= */

.field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field[hidden]{ display: none; }

.field label{
  font-size: 13px;
  color: var(--blanco);
}

.input-wrap{ position: relative; }

.input,
select.input{
  width: 315px;
  max-width: 100%;
  height: 40px;
  background: transparent;
  border: 1px solid var(--blanco);
  color: var(--blanco);
  font-size: 13px;
  padding: 0 14px;
  appearance: none;
  -webkit-appearance: none;
}

.input::placeholder{ color: var(--blanco); opacity: 1; }

select.input option{
  background: var(--negro);
  color: var(--lima);
}

.input:focus,
select.input:focus{
  border: 2px solid var(--lima);
  outline: none;
  padding: 0 13px;
}

.input--file{
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.input-icon{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--blanco);
  pointer-events: none;
}

.field.has-error .input,
.field.has-error select.input{
  border-color: var(--rojo-error);
}

.error-msg{
  display: none;
  font-size: 11px;
  color: var(--rojo-error);
}
.field.has-error .error-msg{ display: block; }

.field--wide .input,
.field--wide textarea.input{ width: 637px; max-width: 100%; }

/* Celular: indicativo de país (dropdown propio con banderita, no un
   <select> nativo — así se puede mostrar la bandera de cada opción
   al desplegar la lista, cosa que un <option> no permite) + número.
   Mismo look negro/blanco de .input. */
.phone-wrap{
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 315px;
  max-width: 100%;
}
.phone-code{ position: relative; flex: 0 0 auto; }

.phone-code__btn{
  display: flex;
  align-items: center;
  gap: 6px;
  width: 88px;
  padding: 0 8px;
  cursor: pointer;
}
.phone-code__btn:focus{ padding: 0 7px; }

.phone-code__flag,
.phone-code__option-flag{
  width: 16px;
  height: 12px;
  object-fit: cover;
  border-radius: 1px;
  flex: 0 0 auto;
  pointer-events: none;
}

.phone-code__value{
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.phone-code__list{
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 20;
  width: 130px;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--negro);
  border: 1px solid var(--blanco);
}
.phone-code__list[hidden]{ display: none; }

.phone-code__option{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--blanco);
  cursor: pointer;
}
.phone-code__option:hover,
.phone-code__option:focus{
  background: rgba(255, 255, 255, .12);
  outline: none;
}
.phone-code__option[aria-selected="true"]{ color: var(--lima); }

.phone-number{
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 34px;
}
.phone-number:focus{ padding-right: 33px; }

textarea.input{
  height: 96px;
  padding-top: 10px;
  resize: vertical;
  font-family: inherit;
}

.field-hint{
  font-size: 12px;
  color: var(--gris-texto);
}

/* Radios */
fieldset.radios{
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px 24px;
  flex-wrap: wrap;
}

fieldset.radios legend{
  font-size: 13px;
  color: var(--blanco);
  padding: 0;
  /* El legend siempre queda en su propia línea arriba de las
     opciones (así maneja el navegador un <legend> dentro de un
     fieldset con display:flex, no queda "en línea" con ellas) —
     por defecto pegado a 0px, separado un poco con este margen. */
  margin: 0 8px 5px 0;
}

.radio{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--blanco);
  cursor: pointer;
}

.radio input[type="radio"],
.radio input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border: 1px solid var(--blanco);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  margin: 0;
}

.radio input[type="radio"]:checked::after,
.radio input[type="checkbox"]:checked::after{
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--lima);
  border-radius: 50%;
}

/* Tabs */
.tablist{
  display: flex;
}
.tablist[hidden]{ display: none; }

.tab{
  width: 317px;
  max-width: 50%;
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15.8px;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.26);
  border-bottom-color: var(--blanco);
  color: var(--gris-inactivo);
  background: transparent;
  text-align: center;
  padding: 0 12px;
}

.tab[aria-selected="true"]{
  border-color: var(--blanco);
  border-bottom-color: transparent;
  color: var(--blanco);
}

.tabpanels{
  border-top: 1px solid var(--blanco);
}

/* =========================================================
   SECCIÓN 1 — HERO
   ========================================================= */

.hero{
  position: relative;
  min-height: 772px;
  background: var(--gris-hero);
  overflow: hidden;
}

.hero__media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1;
}

.hero__logo{
  position: relative;
  z-index: 2;
  padding-top: 30px;
}

.hero__logo img,
.hero__logo span,
.hero__logo svg{
  display: inline-block;
  height: clamp(32px, 5vw, 50px);
  line-height: clamp(32px, 5vw, 50px);
  font-weight: 700;
  font-size: 28px;
  color: var(--blanco);
}

.hero__logo svg{
  width: auto;
  fill: var(--blanco);
}

.hero__content{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 190px;
}

.hero__title{
  margin: 0;
  font-size: 66px;
  line-height: 64px;
  color: var(--blanco);
}

.hero__title span{ display: block; }
.hero__title .l1{ font-weight: 500; }
.hero__title .l2{ font-weight: 700; }

.hero__subtitle{
  margin: 24px 0 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  max-width: 760px;
  color: var(--blanco);
}

.hero__actions{
  display: flex;
  gap: 18px;
  margin-top: 46px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Botones del hero: más bajos que el .btn base (60px) y con un
   respiro a la izquierda del primero para que no quede pegado al
   borde del contenedor. */
.hero__actions .btn{ height: 55px; }
.hero__actions .btn:first-child{ margin-left: 7px; }

@keyframes heroFadeIn{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

.hero__title,
.hero__subtitle,
.hero__actions{
  opacity: 0;
  animation: heroFadeIn .7s ease-out forwards;
}

.hero__title{ animation-delay: .1s; }
.hero__subtitle{ animation-delay: .25s; }
.hero__actions{ animation-delay: .6s; }

@media (prefers-reduced-motion: reduce){
  .hero__title,
  .hero__subtitle,
  .hero__actions{
    opacity: 1;
    animation: none;
  }
}

/* =========================================================
   SECCIÓN 2 — MANIFIESTO
   ========================================================= */

.manifesto{
  background: var(--blanco);
  padding: 96px var(--side-margin) 96px;
}

.manifesto__grid{
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
}

/* Se ajusta al ancho de su línea más larga y se centra dentro del
   grid, en vez de quedar pegado al borde izquierdo del contenedor
   ancho — así el bloque completo (título + aside) queda más
   centrado en la sección. */
.manifesto__main{
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.manifesto__eyebrow{
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.manifesto__title{
  font-size: 96px;
  font-weight: 700;
  line-height: 1.06;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* Por defecto (y en mobile/tablet) el bloque de texto va apilado
   debajo del título. En desktop, js/script.js lo reposiciona con
   position:absolute para que arranque justo donde termina la
   última línea del título (clase .is-overlapped). */
.manifesto__aside{
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 660px;
  max-width: 100%;
  margin: 48px auto 0;
}

.manifesto__aside.is-overlapped{
  position: absolute;
  margin-top: 0;
}

.manifesto__text{
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  margin: 0;
}

/* =========================================================
   SECCIÓN 3 — PRÓXIMOS EVENTOS
   ========================================================= */

.events{
  background: var(--blanco);
  padding: 80px 0 96px;
}

.events__header{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  gap: 24px;
  flex-wrap: wrap;
}

.events__title{
  font-size: 49px;
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.events__subtitle{
  font-size: 19px;
  font-weight: 400;
  margin: 0;
}

.events__all{
  /* El <button> trae padding por defecto del navegador (arriba/lados);
     sin resetearlo, el borde-línea de abajo queda más ancho que el
     texto y no arranca alineado con él. */
  padding: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--negro);
  border-bottom: 1px solid var(--gris-linea);
  white-space: nowrap;
}

.events__track{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 19.6px;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--side-margin);
}

.event-card{
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.event-card__media{
  position: relative;
  width: 100%;
  aspect-ratio: 191 / 273;
  overflow: hidden;
  background: #ddd;
}

.event-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(.22,.61,.36,1);
}

@media (hover: hover){
  .event-card:hover .event-card__media img{
    transform: scale(1.03);
    will-change: transform;
  }
}

.event-card:focus-within .event-card__media img{
  transform: scale(1.03);
  will-change: transform;
}

.event-card__title{
  margin: 32px 0 0;
  font-size: 18px;
  line-height: 19px;
}

.event-card__title .bold{ font-weight: 700; display: block; }
.event-card__title .medium{ font-weight: 500; display: block; }

.event-card__date{
  margin: auto 0 0;
  padding-top: 48px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}

.event-card__hr{
  margin-top: 8px;
  width: 100%;
  border-top: 1px solid var(--hairline);
  flex-shrink: 0;
}

/* "Ver todos" — grid-template-rows en vez de max-height: transición
   fiable y sincronizada (ver context.md, Parte 2). */
.events__collapse{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s ease;
}
.events__collapse[data-open="true"]{ grid-template-rows: 1fr; }
.events__collapse-inner{ overflow: hidden; }
.events__track--extra{ margin-top: 19.6px; }

/* =========================================================
   TICKER
   ========================================================= */

.ticker{
  width: 100%;
  height: 58px;
  background: var(--lima);
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
}

.ticker__track{
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
}

.ticker__group{
  display: flex;
  align-items: center;
}

.ticker__item{
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--negro);
  margin-right: 48px;
}

/* =========================================================
   SECCIÓN 5 — E-PASS (fondo negro)
   ========================================================= */

.epass{
  background: var(--negro);
  color: var(--blanco);
  padding: 88px 0;
  position: relative;
}

.epass__grid{
  display: grid;
  grid-template-columns: minmax(0,560px) minmax(0,637px);
  gap: 60px;
  justify-content: space-between;
}

.epass__title{
  font-size: 42px;
  font-weight: 700;
  line-height: 45px;
  margin: 0 0 48px;
  text-transform: uppercase;
}

.epass__illustration{
  width: 100%;
  max-width: 525px;
  margin: 0 0 48px;
}

.epass__card-img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.epass__support{
  font-size: 15px;
  font-weight: 300;
  line-height: 24px;
  max-width: 480px;
}

.epass__form-col{ width: 100%; }

.tabpanel{ padding-top: 32px; }
.tabpanel[hidden]{ display: none; }

.form-grid{
  display: grid;
  grid-template-columns: minmax(0, 315px) minmax(0, 315px);
  gap: 21px 7px;
  margin-bottom: 32px;
}

.form-grid .field--wide{ grid-column: 1 / -1; }

.form-actions{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-radios-row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.form-microcopy{
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: var(--gris-texto);
  max-width: 637px;
  margin: 0;
}

.legal{
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  color: var(--gris-texto);
  max-width: 637px;
}

/* Error de servidor (no ligado a un campo puntual): tarjeta
   inexistente o ya activada. */
.form-error{
  margin: 0;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--rojo-error);
  background: rgba(255, 90, 90, .08);
  border-left: 3px solid var(--rojo-error);
}
.form-error[hidden]{ display: none; }

.legal a{
  text-decoration: underline;
}
.legal a:hover{ color: var(--blanco); }

.confirm-screen{
  text-align: left;
  max-width: 637px;
  padding-top: 48px;
}
.confirm-screen[hidden]{ display: none; }
.confirm-screen h3{
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 12px;
  text-transform: uppercase;
  color: var(--lima);
}
.confirm-screen p{
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--gris-texto);
}

/* =========================================================
   SECCIÓN 7 — CIERRE
   ========================================================= */

.closing{
  position: relative;
  min-height: 464px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.closing__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.closing__gradient{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
  z-index: 1;
}

/* Posicionamiento simplificado del badge (esquina inferior derecha del bloque) */
.closing__badge{
  position: absolute;
  z-index: 2;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: var(--lima);
  color: var(--negro);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  right: calc(var(--side-margin) + 25px);
  bottom: 90px;
  transform-origin: 50% 50%;
  /* Estado inicial "cerrado": GSAP lo abre horizontalmente al entrar
     en viewport y lo deja girando para siempre (ver
     initClosingBadgeAnimation en assets/js/script.js). */
  opacity: 0;
  transform: scaleX(0);
}

.closing__badge-title{
  font-size: 20.7px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}

.closing__badge-handle{
  margin-top: 6px;
  font-size: 13.8px;
  font-weight: 500;
}

.closing__headline{
  position: relative;
  z-index: 2;
  color: var(--blanco);
  font-size: 42px;
  font-weight: 700;
  line-height: 45px;
  text-transform: uppercase;
  padding: 0 25px 64px;
  margin: 0;
  max-width: 880px;
}

/* =========================================================
   SECCIÓN 8 — FOOTER
   ========================================================= */

.footer{
  background: var(--negro);
  color: var(--blanco);
  min-height: 88px;
  display: flex;
  align-items: center;
}

.footer__inner{
  width: 100%;
  padding: 0 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer__logo{
  display: block;
  width: auto;
  height: 20px;
}

.footer__links{
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}

.footer__links a{
  font-size: 15px;
  font-weight: 400;
  color: var(--gris-texto);
}
.footer__links a:hover{ color: var(--blanco); }

.footer__credit-logo{
  display: block;
  width: auto;
  height: 19px;
}

/* =========================================================
   ANIMACIÓN DE ENTRADA (GSAP añade/quita clases desde JS)
   ========================================================= */

.reveal{
  opacity: 0;
  transform: translateY(20px);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1365px){
  :root{ --side-margin: 40px; }
  .hero__title{ font-size: clamp(48px, 5vw, 66px); line-height: 1.05; }
  .manifesto__title{ font-size: clamp(56px, 7vw, 96px); line-height: 1.06; }
}

@media (max-width: 1023px){
  .epass__grid{
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__title{ font-size: 44px; }
  .hero__actions .btn:first-child{ margin-left: 4px; }
  .manifesto__eyebrow{ font-size: 26px; margin-bottom: 10px; }
  .manifesto__title{ font-size: clamp(46px, 6vw, 58px); line-height: 1.08; }
  .events__title{ font-size: 40px; }
  .events__track{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .epass__title,
  .closing__headline{ font-size: 34px; line-height: 1.15; }

  /* En tablet el círculo (bottom-right, tamaño desktop) se superpone
     con el titular blanco de abajo. Se sube arriba del texto, igual
     que ya se hace en mobile más abajo. */
  .closing__badge{
    width: 180px;
    height: 180px;
    top: 32px;
    right: var(--side-margin);
    bottom: auto;
  }
  .closing__badge-title{ font-size: 16px; }
  .closing__badge-handle{ font-size: 11px; }

  /* En desktop el formulario ocupa su propia columna del grid
     (exactamente 637px, ver .epass__grid) — al apilarse en una sola
     columna en tablet/mobile, esa columna pasa a medir el ancho
     completo del contenedor y el formulario (tabs + campos, pensados
     para 637px fijos) queda pegado a la izquierda con un espacio
     vacío a la derecha. Lo centramos como bloque. En mobile esto no
     tiene efecto (el contenedor ya es más angosto que 637px y los
     campos pasan a 100% de ancho, ver el breakpoint de 767px). */
  .tablist,
  .tabpanels{ max-width: 637px; margin-left: auto; margin-right: auto; }

  /* Mismo problema que el formulario, del otro lado del grid: la
     ilustración (max-width:525px) y el texto de soporte
     (max-width:480px) quedan pegados a la izquierda al apilarse en
     una sola columna más ancha que ellos. */
  .epass__illustration,
  .epass__support{ margin-left: auto; margin-right: auto; }
}

@media (max-width: 767px){
  :root{ --side-margin: 20px; }

  .hero{ min-height: 620px; }
  .hero__title{ font-size: 32px; }
  .hero__content{ padding-top: 110px; }
  .hero__actions{
    flex-direction: column;
    width: 100%;
    gap: 12px;
    margin-bottom: 32px;
  }
  .btn{ width: 100%; font-size: 14px; }
  .hero__actions .btn:first-child{ margin-left: 2px; }
  .tab{ font-size: 12.5px; }

  .manifesto{ padding: 64px 20px; }
  .manifesto__eyebrow{ font-size: 22px; margin-bottom: 8px; }
  .manifesto__title{ font-size: clamp(28px, 8vw, 44px); line-height: 1.12; }

  .events__header{ flex-direction: column; align-items: flex-start; }
  /* El header pasa a columna (título arriba) pero "Ver todos"/"Ver
     menos" debe seguir pegado al borde derecho, no heredar el
     align-items:flex-start del resto del header. */
  .events__all{ align-self: flex-end; }
  /* Mismo trato para la fila siempre visible (#eventsTrack) y la fila
     extra de "Ver todos" (.events__track--extra): las 6 primeras cards
     ya se ven en grilla de 2 columnas, sin carrusel de scroll horizontal;
     "Ver todos" solo revela el resto debajo, en la misma grilla. */
  .events__track,
  .events__track--extra{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    column-gap: 14px;
    row-gap: 32px;
    padding: 0 24px;
  }
  .event-card{ width: 100%; }
  .event-card__media,
  .event-card__hr{ width: 100%; }
  .event-card__media{ height: auto; aspect-ratio: 191 / 273; }
  /* El título/fecha traían margen pensado para una sola fila ancha;
     en la grilla 2xN se ven muy separados de la imagen. */
  .event-card__title{ margin-top: 16px; font-size: 15px; line-height: 1.2; }
  .event-card__date{ padding-top: 12px; font-size: 13px; }

  .ticker{ height: 44px; }
  .ticker__item{ font-size: 16px; }

  .epass__grid{ gap: 40px; }
  .form-grid{
    grid-template-columns: minmax(0, 1fr);
  }
  .input, select.input{ width: 100%; }
  .field--wide .input, .field--wide textarea.input{ width: 100%; }
  .phone-wrap{ width: 100%; }
  .btn--submit{ width: 100%; }
  /* .legal hereda el margen por defecto de <p> (basado en su propio
     font-size, ~11px) que se suma al gap de 24px de .form-actions —
     en mobile se ve como mucho espacio entre el microcopy y el texto
     legal. Se descuenta con un margen negativo, sin tocar el resto
     de separaciones del grupo. */
  .legal{ margin-top: -10px; }

  .closing__badge{
    width: 140px;
    height: 140px;
    top: 24px;
    right: 20px;
    bottom: auto;
  }
  .closing__badge-title{ font-size: 13px; }
  .closing__badge-handle{ font-size: 10px; }
  .closing__headline{ font-size: 26px; line-height: 1.2; padding: 0 20px 40px; }

  .footer__inner{ flex-direction: column; align-items: flex-start; padding: 20px; }
  .footer__links{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer__credit-logo{ margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .ticker__track{ animation: none !important; transform: none !important; }
  .events__collapse{ transition: none; }
  .event-card__media img{ transition: none; }
  .closing__badge{ opacity: 1; transform: none; }
}