/* ============================================================
   main.css — secciones
   Mobile-first: se maqueta a 360px y se amplía.
   TODAS las media queries en min-width. Jamás en max-width.
   PLAN.md regla transversal 1.
   ============================================================ */

/* ============================================================
   5.1 HERO
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;

  /* F2.6 — altura en móvil real. var(--vh-full) resuelve dvh con
     fallback a vh. El CTA tiene que verse entero al cargar, CON la
     barra de direcciones desplegada. */
  min-height: var(--vh-full);

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  /* safe-area abajo: el CTA no queda bajo la barra de gestos. */
  padding-block-start: calc(var(--space-2xl) + var(--safe-t));
  padding-block-end: calc(var(--space-xl) + var(--safe-b));
  padding-inline: var(--gutter);

  overflow: hidden;
}

/* Fondo: imagen estática ahora (F2.1), canvas después (F5).
   Los dos ocupan la misma caja y se apilan por z-index.

   `fixed`, no `absolute`: el fondo es de PAGINA, no del hero. Cubre el
   viewport durante todo el scroll, asi que el Pasaje se ve siempre y
   sin moverse. (Vive fuera de .hero en el HTML: dentro quedaba atrapado
   por su `isolation: isolate` y recortado por su `overflow: hidden`.) */
.hero__bg {
  position: fixed;
  inset: 0;
  z-index: -2;
}

.hero__bg img,
.hero__bg canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El punto de interés de las escenas está por encima del centro:
     los monumentos se leen mejor anclados arriba. */
  object-position: center 40%;
}

/* El canvas se apila sobre la imagen estática, pero permanece
   invisible hasta que el motor tiene la primera escena pintada
   (data-ready="true"). Así no hay parpadeo negro durante la carga,
   y si el motor falla nunca llega a taparla (F5.10).

   `fixed` y no `absolute`: el fondo acompaña a toda la página, no solo
   al hero. Es lo que permite que la escena cambie al bajar. Va en una
   capa propia por debajo de todo el contenido. */
.hero__canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-spring);
  pointer-events: none;
}

.hero__canvas[data-ready='true'] {
  opacity: 1;
}

/* La imagen estática es el fallback: se queda debajo, siempre.
   `fixed` como el canvas, para que tampoco se desplace con el scroll. */
.hero__bg picture {
  position: fixed;
  inset: 0;
  z-index: -2;
}

/* F2.3 — capa de contraste.
   VELO PLANO, sin degradado (decisión de Diego: el fondo no debe
   variar ni degradarse — el mismo tono en cada píxel de cada pantalla).
   Fijo al viewport, igual que el canvas.

   Criterio AA de F2.3 intacto: el texto pasa contraste medido con el
   pixel MÁS CLARO que hay detrás, no con el promedio. Con la escena
   asentada a noche, 0.75 de velo lo cumple con margen (verificado). */
.hero__scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(var(--ink-rgb), 0.75);
}

.hero__content {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
}

/* El titular es el LCP (§6.3). Renderiza y es legible ANTES de que
   cargue el fondo: no depende de él para nada. */
/* El H1 son dos lineas: la frase de busqueda, pequeña y en ambar, y el
   titular display debajo. Las dos son bloque dentro del mismo H1. */
.hero__h1 {
  margin-block-end: var(--space-lg);
}

.hero__kicker {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step-caption);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-block-end: var(--space-sm);
}

.hero__title {
  display: block;
}

.hero__lede {
  font-size: var(--step-body);
  max-width: var(--measure);
  color: var(--paper);
  margin-block-end: var(--space-xl);
}

/* Datos duros: El 18 microteatro · Albacete · próxima fecha.
   FECHA Y LUGAR, NUNCA QUIÉN (CLAUDE.md §8). */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  align-items: baseline;
  list-style: none;
  font-size: var(--step-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
  margin-block-end: var(--space-lg);
}

.hero__facts li {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

/* Separador · como pseudo-elemento: no se selecciona ni lo lee
   el lector de pantalla. */
.hero__facts li + li::before {
  content: '·';
  color: var(--amber);
}

.hero__date {
  color: var(--amber);
  /* 700: en Montserrat el 600 se queda flojo para un dato que manda. */
  font-weight: 700;
}

/* ============================================================
   BOTONES
   El ámbar es el ÚNICO acento de interfaz (CLAUDE.md §4).
   El azul --stage no aparece aquí jamás.
   ============================================================ */

.btn {
  /* Zona táctil: 44px mínimo por regla transversal 5; 48px de alto
     en los CTA por F3.1. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  min-width: var(--tap-min);
  padding-inline: var(--space-xl);

  font-family: var(--font-body);
  font-size: var(--step-body);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;

  background-color: var(--amber);
  color: var(--ink);
  border: 2px solid var(--amber);
  border-radius: 2px;
  cursor: pointer;

  transition: background-color var(--dur-fast) var(--ease-spring),
              color var(--dur-fast) var(--ease-spring);
}

/* Nada depende de :hover (regla transversal 6). El hover mejora la
   experiencia en escritorio, pero no comunica nada que no esté ya
   escrito en el botón. */
@media (hover: hover) {
  .btn:hover {
    background-color: transparent;
    color: var(--amber);
  }
}

.btn:active {
  transform: translateY(1px);
}

/* En móvil el CTA ocupa el ancho completo: es el objetivo de pulgar
   más fácil que existe. */
.btn--block {
  display: flex;
  width: 100%;
}

@media (min-width: 30rem) {
  .btn--block {
    display: inline-flex;
    width: auto;
  }
}

/* ============================================================
   5.2 LA LISTA — el bloque más importante de la página
   ============================================================ */

/* El contraste del contenido lo garantiza el MISMO scrim fijo del hero
   (.hero__scrim, arriba): una sola capa idéntica en cada pantalla de
   scroll. Las secciones no llevan velo propio — un velo por sección
   producía escalones de luminosidad entre bloques, y un velo distinto
   al del hero hacía que el fondo "cambiara" al bajar.

   main NECESITA position: relative. Sin él pinta en la fase de flujo
   normal, ANTES que el hero (que es positioned), y su texto queda
   enterrado bajo el scrim fijo: la página entera parece vacía. */
main {
  position: relative;
}

.list {
  padding-block: var(--space-3xl);
  padding-inline: var(--gutter);
}

.list__inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

.list__title {
  margin-block-end: var(--space-md);
}

.list__copy {
  max-width: var(--measure);
  color: var(--paper);
  margin-block-end: var(--space-xl);
}

/* Un campo, un botón. Nada más (CLAUDE.md §5.2). */
.form {
  max-width: 30rem;
}

.form__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* En pantallas anchas, campo y botón en la misma línea. En móvil
   apilados, que es donde el pulgar los alcanza mejor. */
@media (min-width: 30rem) {
  .form__row {
    flex-direction: row;
    /* Separación mínima entre pulsables: regla transversal 5. */
    gap: var(--tap-gap);
  }

  .form__field {
    flex: 1 1 auto;
  }
}

.form__label {
  display: block;
  font-size: var(--step-caption);
  margin-block-end: var(--space-2xs);
}

.form__input {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-sm) var(--space-md);

  /* 16px mínimo. Por debajo, iOS hace zoom al enfocar y descoloca
     la página entera. Regla transversal 7. NO BAJAR. */
  font-size: var(--input-size);

  color: var(--paper);
  background-color: rgba(var(--paper-rgb), 0.06);
  border: 2px solid rgba(var(--paper-rgb), 0.22);
  border-radius: 2px;

  transition: border-color var(--dur-fast) var(--ease-spring);
}

.form__input::placeholder {
  color: var(--smoke);
}

.form__input:focus {
  border-color: var(--amber);
}

/* Estado de error: el borde no es la única señal (no todo el mundo
   distingue el color). El mensaje dice qué pasó y cómo arreglarlo. */
.form__input[aria-invalid='true'] {
  border-color: var(--amber);
}

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
  font-size: var(--step-caption);
  color: var(--smoke);
}

/* La casilla también es zona táctil (regla transversal 5).
   La caja visible mide 18px para no romper la alineación con el
   texto, pero el área pulsable real llega a 44×44px mediante un
   ::after invisible centrado sobre ella. */
.form__consent input[type='checkbox'] {
  position: relative;
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-block-start: 0.2em;
  accent-color: var(--amber);
}

.form__consent input[type='checkbox']::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--tap-min);
  height: var(--tap-min);
}

/* Enlace en línea dentro de la frase de consentimiento. No puede ser
   un bloque de 44px sin partir el párrafo, así que se le da altura
   táctil con padding vertical y se compensa con margen negativo para
   no separar las líneas del texto. El área pulsable resultante supera
   los 44px de alto sin alterar la maqueta. */
.form__consent a {
  display: inline-block;
  padding-block: var(--space-sm);
  margin-block: calc(var(--space-sm) * -1);
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Honeypot (F3.6). Oculto a la vista y al lector de pantalla, pero
   los bots que rellenan todo caen igual. No usa display:none porque
   algunos bots lo detectan. */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mensajes de estado (F3.5): cargando, éxito, error. */
.form__status {
  margin-block-start: var(--space-md);
  font-size: var(--step-caption);
  min-height: 1.5em;
}

.form__status[data-state='error'] {
  color: var(--amber);
}

.form__status[data-state='success'] {
  color: var(--amber);
  font-weight: 700;
}

.form[data-busy='true'] .btn {
  opacity: 0.65;
  cursor: progress;
}

/* ============================================================
   PRÓXIMO PROGRAMA
   La informacion integrada en la pagina, no el cartel pegado: el
   retrato del invitado con el marco ambar de la marca (el mismo
   tratamiento que la ventana del cartel) y los datos al lado.
   Mobile-first: apilado; en ancho, dos columnas.
   ============================================================ */

.next {
  padding-block: var(--space-2xl);
  padding-inline: var(--gutter);
}

.next__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* El marco ambar es el de la ventana del cartel: mismo gesto, misma
   marca, sin tener que incrustar el cartel entero. */
/* El marco ambar es el de la ventana del cartel. La foto va recortada a
   su contenido: la del cartel traia SU PROPIO recuadro con margenes
   desiguales (66/67/148/41 px) y, metida aqui, se veian dos marcos y
   parecia que la imagen se salia. */
.next__retrato {
  flex: 0 0 auto;
  border: 4px solid var(--amber);
  line-height: 0;
  /* En movil ocupa el ancho disponible, centrada: apoyada a la
     izquierda dejaba el bloque descompensado. */
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}

.next__retrato img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile-first: centrado, para acompanar al retrato, que tambien lo
   esta. A la izquierda quedaba descompensado bajo una foto centrada. */
.next__data {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
}

.next__kicker {
  margin: 0;
  font-size: var(--step-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
}

.next__date {
  margin: 0;
  font-size: var(--step-section);
  font-weight: 700;
  color: var(--amber);
  line-height: 1.15;
  /* Sin esto, a 390px partia dejando "20:00" solo en su linea. */
  text-wrap: balance;
}

.next__venue {
  margin: 0;
  color: var(--paper);
}

/* Aviso, no boton: las entradas NO se venden en la web (§2). El filete
   ambar hace que se lea como noticia y no como llamada a la accion. */
.next__tickets {
  margin-block: var(--space-md) 0;
  padding-inline-start: var(--space-md);
  border-left: 3px solid var(--amber);
  font-weight: 700;
  color: var(--paper);
}

.next__cta {
  margin-block-start: var(--space-lg);
}

/* Salto controlado de la fecha: solo donde no cabe en una linea. */
.next__br { display: inline; }

@media (min-width: 48rem) {
  .next__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
  }
  .next__retrato { max-width: 300px; margin-inline: 0; }
  .next__data    {
    flex: 1 1 auto;
    align-items: flex-start;
    text-align: left;
  }
  .next__br { display: none; }
}

/* ============================================================
   5.3 CÓMO FUNCIONA
   El tratamiento tipográfico es la mitad del efecto.
   SIN EFECTOS: nada de fade-in letra a letra, máquina de escribir
   ni cursor parpadeante. Alineado a la izquierda, mucho aire.
   ============================================================ */

.how {
  padding-block: var(--space-3xl);
  padding-inline: var(--gutter);
}

.how__inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

/* Línea 1 — display, enorme, apretado. */
.how__hook {
  margin-block-end: var(--space-xl);
}

/* Línea 2 — cuerpo, medida corta, máx. 55 caracteres por línea. */
.how__body {
  max-width: var(--measure);
  color: var(--paper);
  margin-block-end: var(--space-3xl);
}

/* Línea 3 — caption en ámbar, separada por MUCHO aire.
   Es la línea que la gente repite: tiene tratamiento propio. */
.how__rule {
  font-size: var(--step-section);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--amber);
  max-width: 24ch;
  margin-block-end: var(--space-2xl);
}

/* CTA justo debajo, sin titular de sección ni transición. */

/* ============================================================
   5.4 CLIPS — condicional (F8.2)
   El DOM lo genera clips.js SOLO si content/clips.json tiene
   contenido. Tarjetas 9:16: scroll horizontal en móvil, rejilla
   en escritorio.
   ============================================================ */

.clips {
  padding-block: var(--space-3xl);
  padding-inline: var(--gutter);
}

.clips__title {
  max-width: var(--max-w);
  margin-inline: auto;
  margin-block-end: var(--space-xl);
}

.clips__track {
  max-width: var(--max-w);
  margin-inline: auto;
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  /* Deslizar con parada por tarjeta, sin barra visible fea. */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Aire para que el foco de teclado no quede cortado. */
  padding-block: var(--space-2xs);
}

.clips__track::-webkit-scrollbar { display: none; }

.clips__card {
  position: relative;
  flex: 0 0 min(72vw, 300px);
  scroll-snap-align: start;
  border-radius: 2px;
  overflow: hidden;
  background-color: rgba(var(--paper-rgb), 0.04);
}

.clips__video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

.clips__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-sm);
  font-size: var(--step-caption);
  color: var(--smoke);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Indicador de sonido activo: borde ámbar, el único acento (§4). */
.clips__card[data-sound='on'] {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}

@media (min-width: 48rem) {
  .clips__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
  }

  .clips__card {
    flex: none;
  }
}

/* ============================================================
   5.6 EL LOCAL — El 18 microteatro
   ============================================================ */

.venue {
  padding-block: var(--space-3xl);
  padding-inline: var(--gutter);
}

.venue__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.venue__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* El logo de El 18 es blanco y rojo sobre transparente: funciona
   directamente sobre --ink sin caja ni fondo. */
.venue__logo {
  width: 88px;
  height: auto;
  flex: 0 0 auto;
}

.venue__copy {
  max-width: var(--measure);
  color: var(--paper);
  margin-block-start: var(--space-sm);
}

.venue__photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.venue__photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

@media (min-width: 48rem) {
  .venue__head {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-xl);
  }

  .venue__photos {
    grid-template-columns: 3fr 2fr;
    align-items: stretch;
  }
}

/* ============================================================
   PREGUNTAS FRECUENTES
   <details> nativo: se abre con teclado y sin JS, y Google lee el
   texto aunque este plegado.
   ============================================================ */

.faq {
  padding-block: var(--space-3xl);
  padding-inline: var(--gutter);
}

.faq__inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

.faq .section-title {
  margin-block-end: var(--space-lg);
}

.faq__item {
  border-top: 1px solid rgba(var(--paper-rgb), 0.12);
}

.faq__item:last-of-type {
  border-bottom: 1px solid rgba(var(--paper-rgb), 0.12);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 44px;
  padding-block: var(--space-sm);
  font-weight: 700;
  color: var(--paper);
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

/* Un + que gira a x al abrir. Sin animacion si se pide menos movimiento. */
.faq__q::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 1.5em;
  line-height: 1;
  color: var(--amber);
  transition: transform 0.2s ease;
}

.faq__item[open] > .faq__q::after {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .faq__q::after { transition: none; }
}

.faq__a {
  max-width: var(--measure);
  padding-block-end: var(--space-md);
  color: var(--paper);
}

.faq__a a {
  color: var(--amber);
}

/* ============================================================
   FOOTER
   La firma "Albacetea by Diego Morales" aparece SOLO aquí (F7.6).
   ============================================================ */

/* ============================================================
   EL CÓCTEL DE DESPUÉS
   Mismo patrón tipográfico que "Cómo funciona": gancho en display
   y cuerpo a medida corta. El filo ámbar marca que esto todavía es
   parte del programa, no letra pequeña.
   ============================================================ */

.after {
  padding-block: var(--space-3xl);
  padding-inline: var(--gutter);
}

.after__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  border-left: 3px solid var(--amber);
  padding-inline-start: var(--space-lg);
}

.after__hook {
  font-family: var(--font-display);
  font-size: var(--step-section);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--paper);
  margin-block-end: var(--space-md);
}

.after__copy {
  max-width: var(--measure);
  color: var(--paper);
}

/* ============================================================
   FOOTER — solo firma, legales y créditos (F7.6)
   ============================================================ */

.footer {
  /* Opaco: el fondo termina con el contenido. */
  position: relative;
  background-color: var(--ink);
  padding-block: var(--space-2xl);
  padding-inline: var(--gutter);
  padding-block-end: calc(var(--space-2xl) + var(--safe-b));
  border-top: 1px solid rgba(var(--paper-rgb), 0.12);
}

.footer__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Mobile-first: apilado. En pantalla ancha (mas abajo) pasa a fila con
   los organizadores a la derecha. */
.footer__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ---------- Lockup de marca ----------
   La misma fila en dos escalas: grande y centrada en el hero, pequeña
   en el footer. Va el monograma DM solo (no el logo con "DIEGO MORALES"
   debajo): a este tamaño ese texto interior sería ilegible, y el "by"
   de al lado ya nombra a Diego. */

.hero__brand {
  position: absolute;
  top: calc(var(--space-lg) + var(--safe-t));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  white-space: nowrap;
  /* En 360-390px el lockup llegaba a 7px del borde. Se le pone techo
     al ancho y las piezas se encogen juntas antes que tocar el margen. */
  max-width: calc(100vw - var(--space-lg) * 2);
}

.hero__brand-name,
.hero__brand-flu {
  min-width: 0;
  object-fit: contain;
}

.hero__brand-name {
  height: 20px;
  width: auto;
}

.hero__brand-by {
  font-size: var(--step-caption);
  color: var(--smoke);
}

/* Logo completo (monograma DM + "DIEGO MORALES"). El nombre ocupa solo
   el 23% del alto del logo, asi que la altura la manda la LEGIBILIDAD
   de ese texto: por debajo de ~49px baja de 11px y deja de leerse.
   Es un 22% mas ancho que el monograma a igual altura, de ahi el techo
   de ancho del contenedor. */
.hero__brand-flu {
  height: 52px;
  width: auto;
}

@media (min-width: 48rem) {
  .hero__brand-name { height: 26px; }
  .hero__brand-flu  { height: 60px; }
}

.footer__sig {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.footer__sig-name {
  height: 14px;
  width: auto;
}

.footer__sig-by {
  font-size: var(--step-caption);
  color: var(--smoke);
}

/* Igual que en el hero: la altura la manda que "DIEGO MORALES" se lea. */
.footer__sig-flu {
  height: 50px;
  width: auto;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  /* Separación mínima entre pulsables: regla transversal 5. */
  gap: var(--tap-gap);
  list-style: none;
  font-size: var(--step-caption);
}

.footer__links li {
  display: flex;
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  /* Zona táctil real de 44×44px en los enlaces del footer.
     Sin min-width, un enlace corto como "Privacidad" se queda
     por debajo del mínimo (regla transversal 5). */
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding-inline: var(--space-2xs);
  color: var(--smoke);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .footer__links a:hover {
    color: var(--paper);
  }
}

/* ---------- Quien hace el programa: la sala y la productora ----------
   Distinto de .footer__sig (la firma de marca): por eso lleva rotulo.
   Los logos son de marcas ajenas y llegan como PNG blancos con
   transparencia; se les baja la opacidad para que no compitan con el
   CTA ambar, y sube al pasar por encima. */
.footer__orgs {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer__orgs-label {
  margin: 0;
  font-size: var(--step-caption);
  color: var(--smoke);
}

.footer__orgs-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  /* Holgado a proposito: --tap-gap (8px) es el minimo entre pulsables,
     pero dos logos juntos a esa distancia se leen como uno solo. */
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.footer__orgs-list a {
  display: flex;
  align-items: center;
  /* Zona tactil de 44px aunque el logo mida menos. */
  min-height: var(--tap-min);
}

.footer__orgs-list img {
  width: auto;
  opacity: 0.75;
  transition: opacity var(--dur-fast) var(--ease-spring);
}

/* El logo de El18 aprovecha el 76% de su lienzo y el de fluentIA el 96%:
   a la misma altura declarada el de El18 se veria mas pequeno, asi que
   se compensa aqui para que los dos pesen igual. */
.footer__orgs-list li:nth-child(1) img { height: 52px; }
.footer__orgs-list li:nth-child(2) img { height: 40px; }

/* Nada depende de :hover (regla transversal): esto solo lo refuerza. */
@media (hover: hover) {
  .footer__orgs-list a:hover img { opacity: 1; }
}

.footer__orgs-list a:focus-visible img { opacity: 1; }

/* Atribución de imágenes: se genera desde credits.json (F6.5). */
.footer__credits {
  font-size: var(--step-caption);
  color: var(--smoke);
  line-height: 1.6;
}

/* ============================================================
   ESCRITORIO
   Se amplía solo después de que 360px esté resuelto.
   ============================================================ */

@media (min-width: 48rem) {
  .hero {
    padding-block-end: calc(var(--space-3xl) + var(--safe-b));
  }

  /* La firma a la izquierda, los organizadores a la derecha.
     `flex-start`: los dos bloques tienen distinta altura y alinearlos
     por el centro descuadraba el rotulo respecto a la firma. */
  .footer__meta {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-xl);
  }

  /* El rotulo y los logos, alineados al margen derecho. */
  .footer__orgs {
    align-items: flex-end;
  }
}