/* Mi Sueño Americano — estilos propios de la página "index".
   Se carga después de estilos.css: manda sobre el sistema base sin
   tocarlo. Sólo reglas que pertenecen a esta página. */

/* ---------- Hero: misma escena, una jerarquía más segura ---------- */
.escenario {
  padding-inline: 0;
}

.escenario__hero {
  width: 100%;
}

.escenario__hero .hero__edicion {
  max-width: 38rem;
  margin-bottom: var(--espacio-2);
  color: var(--texto-2);
  font-size: var(--paso-1);
  font-weight: 600;
  letter-spacing: .28em;
  line-height: 1.5;
}

.escenario__hero .titulo-display {
  margin-bottom: var(--espacio-2);
  line-height: .92;
  text-shadow: 0 12px 54px rgba(4, 7, 15, .82);
}

.escenario__hero .hero__lema {
  max-width: 54ch;
  margin-bottom: var(--espacio-3);
  font-family: var(--fuente-cuerpo);
  font-size: var(--paso-2);
  font-style: normal;
  line-height: 1.7;
  color: var(--texto);
  text-wrap: pretty;
}

.escenario__hero .hero__acciones {
  width: min(100%, 22rem);
  flex-direction: column;
  align-items: stretch;
  gap: .75rem var(--espacio-2);
}

.escenario__hero .hero__acciones .btn {
  width: 100%;
  min-height: 48px;
  text-align: center;
}

/* El secundario es la inscripción al curso: la acción más valiosa del
   sitio después de la principal. Con el borde a .16 de opacidad se
   leía como texto suelto, no como botón. Mantiene la jerarquía por
   relleno (el primario va lleno de oro) pero conserva su contorno. */
.escenario__hero .hero__acciones .btn--contorno {
  border-color: var(--dorado);
  background: rgba(4, 7, 15, .35);
  color: var(--dorado-claro);
  box-shadow: none;
}

@media (hover: hover) {
  .escenario__hero .hero__acciones .btn--contorno:hover {
    border-color: var(--dorado-claro);
    background: rgba(201, 162, 39, .14);
    color: var(--dorado-suave);
    box-shadow: none;
  }
}

/* ---------- Fallbacks: relato en luz modelada, no en cajas ---------- */
.carta {
  padding-block: var(--espacio-5);
  padding-inline: 0;
  background:
    radial-gradient(60% 80% at 18% 45%, rgba(228, 198, 91, .11), transparent 72%),
    linear-gradient(135deg, var(--noche) 0%, var(--noche-2) 66%, var(--noche) 100%);
}

.carta__contenido {
  display: block;
}

.carta .escena__cabecera {
  position: relative;
  inset: auto;
  width: 100%;
  margin: 0 0 var(--espacio-3);
  transform: none;
  text-align: left;
}

.carta .escena__cabecera::after {
  content: "";
  display: block;
  width: min(7rem, 100%);
  height: 1px;
  margin-top: var(--espacio-2);
  background: linear-gradient(90deg, var(--dorado), transparent);
}

.carta__texto {
  max-width: var(--medida, 68ch);
  padding: 0;
  text-align: left;
}

.cita-escena {
  background:
    radial-gradient(ellipse at 54% 50%, rgba(201, 162, 39, .16), transparent 58%),
    linear-gradient(180deg, var(--noche-2), var(--noche));
}

.cita-escena__halo {
  opacity: .72;
}

/* ---------- Cuenta: una banda editorial compartida ---------- */
.cuenta-escena {
  align-items: stretch;
  text-align: left;
  padding-block: var(--espacio-5);
  padding-inline: 0;
  background:
    radial-gradient(70% 65% at 78% 15%, rgba(228, 198, 91, .10), transparent 68%),
    linear-gradient(145deg, var(--noche-2), var(--noche) 72%);
}

.cuenta-escena__contenido {
  display: block;
}

.cuenta-escena .titulo-grande {
  max-width: 16ch;
  margin-bottom: var(--espacio-2);
}

.cuenta-escena .sub-seccion {
  max-width: var(--medida, 68ch);
  margin: 0;
  text-align: left;
}

.cuenta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-block: var(--espacio-4) var(--espacio-3);
  border-block: 1px solid var(--borde-suave);
  background: linear-gradient(90deg, rgba(4, 7, 15, .34), rgba(18, 43, 82, .2));
}

.cuenta__celda,
.cuenta-cine .cuenta__celda,
.js-cine .cuenta-cine .cuenta__celda {
  min-width: 0;
  padding: clamp(1.1rem, 2.5vw, 1.8rem) clamp(.35rem, 1.5vw, 1rem);
  border: 0;
  border-left: 1px solid var(--borde-suave);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.cuenta__celda:first-child {
  border-left: 0;
}

.cuenta__num,
.cuenta-cine .cuenta__num {
  font-size: clamp(3.4rem, 8vw, 6rem);
  line-height: .86;
  letter-spacing: .02em;
  color: var(--crema);
  text-shadow: 0 10px 36px rgba(201, 162, 39, .18);
}

.cuenta__etq {
  margin-top: .8rem;
  color: var(--texto-2);
  font-size: clamp(.68rem, .64rem + .18vw, .8rem);
  font-weight: 700;
  letter-spacing: .18em;
}

.cuenta__nota {
  max-width: var(--medida, 68ch);
  margin-bottom: 0;
  text-align: left;
}

.cuenta__nota a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.cuenta-cine .cuenta {
  width: 100%;
  margin-block: var(--espacio-2);
}

.cuenta-cine .cuenta__num {
  font-size: clamp(2.35rem, 4vw, 3.5rem);
}

.cuenta-cine,
.cuenta-cine .cuenta-cine__titulo,
.cuenta-cine .cuenta-cine__texto {
  text-align: left;
}

.cuenta-cine__texto {
  max-width: 46ch;
  margin: var(--espacio-2) 0 0;
  line-height: 1.65;
}

/* ---------- Inscripción: el cierre del libro se convierte en acción ---------- */
.cuenta-registro {
  width: 100%;
  max-width: 520px;
  margin: var(--espacio-2) 0 0;
}

.cuenta-registro .registro-inicial__campos {
  gap: 0 .75rem;
}

.cuenta-registro .campo {
  min-width: 0;
  margin-bottom: .65rem;
}

.cuenta-registro .campo label {
  margin-bottom: .3rem;
  font-size: .7rem;
  letter-spacing: .12em;
}

.cuenta-registro .campo input {
  min-height: 46px;
  padding: .65em .85em;
  font-size: 16px;
}

.cuenta-registro .casilla-consentimiento {
  min-height: 0;
  gap: .65rem;
  margin: .25rem 0 .75rem;
  font-size: .78rem;
  line-height: 1.4;
}

.cuenta-registro .casilla-consentimiento input[type="checkbox"] {
  inline-size: 1.3rem;
  block-size: 1.3rem;
  border-radius: var(--radio-sm);
}

.cuenta-registro .registro-inicial__acciones {
  display: grid;
  gap: .5rem;
  margin-top: 0;
}

.cuenta-registro .registro-inicial__acciones .btn {
  width: 100%;
  min-height: 48px;
  padding: .8em 1.35em;
  letter-spacing: .12em;
  text-align: center;
}

.cuenta-registro .form-msg {
  min-height: 0;
  margin: 0;
  font-size: .78rem;
  line-height: 1.4;
}

.cuenta-registro .form-msg:empty {
  display: none;
}

.cuenta-registro--flujo {
  align-self: center;
  margin-top: 0;
}

/* ---------- Postcréditos: tres rutas en una retícula de dos columnas ---------- */
.postcreditos {
  position: relative;
  padding-block: var(--espacio-5);
  border-top-color: rgba(228, 198, 91, .12);
  background:
    radial-gradient(70% 80% at 88% 18%, rgba(18, 43, 82, .64), transparent 68%),
    linear-gradient(180deg, var(--negro), #061020 72%, var(--noche));
  overflow: hidden;
}

.postcreditos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(28rem, 62vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--dorado), transparent);
}

.postcreditos .titulo-seccion {
  margin-inline: 0;
  text-align: left;
}

.postcreditos__contenido {
  display: block;
}

.postcreditos__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-4);
  margin-top: var(--espacio-4);
}

.postcreditos__inauguracion {
  margin-top: var(--espacio-4);
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--noche-2);
}

.postcreditos__inauguracion > a {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 26rem;
  color: inherit;
  text-decoration: none;
}

.postcreditos__inauguracion img {
  width: 100%;
  height: 100%;
  min-height: 26rem;
  object-fit: cover;
}

.postcreditos__inauguracion-texto {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--espacio-3), 5vw, var(--espacio-4));
  background:
    radial-gradient(100% 80% at 100% 0%, rgba(228, 198, 91, .1), transparent 72%),
    var(--noche-2);
}

.postcreditos__inauguracion h3 {
  max-width: 18ch;
  margin-bottom: var(--espacio-2);
  font-family: var(--fuente-display);
  font-size: clamp(2.2rem, 1.55rem + 2.5vw, 4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--crema);
}

.postcreditos__inauguracion p {
  max-width: 40ch;
  margin: 0 0 var(--espacio-3);
  color: var(--texto-2);
}

.postcreditos__inauguracion span {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  border-bottom: 1px solid var(--dorado);
  color: var(--dorado-claro);
  font-size: var(--paso-1);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.postcreditos__inauguracion > a:hover span {
  color: var(--dorado-suave);
}

.postcreditos__inauguracion > a:focus-visible {
  outline: 3px solid var(--dorado-claro);
  outline-offset: 5px;
}

.postcreditos .panel {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  padding: var(--relleno-tarjeta) 0 0;
  border: 0;
  border-top: 1px solid var(--borde-suave);
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.postcreditos .panel:nth-child(2) {
  margin-top: 0;
}

.postcreditos .panel:nth-child(3) {
  padding-right: 0;
}

.postcreditos .panel h3 {
  font-size: var(--paso-4);
}

.postcreditos .panel p {
  max-width: var(--medida, 68ch);
}

.postcreditos .panel__accion {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: var(--espacio-2);
}

.postcreditos .panel__accion .btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: .65rem 0;
  border: 0;
  border-bottom: 1px solid var(--dorado);
  border-radius: 0;
  background: transparent;
  color: var(--dorado-claro);
  text-align: left;
}

.postcreditos .panel__accion .btn:hover {
  transform: translateY(-1px);
  border-bottom-color: var(--dorado-claro);
  background: transparent;
  box-shadow: none;
  color: var(--dorado-suave);
}

/* La secuencia cinematográfica del héroe es el único momento animado.
   El contenido operativo posterior entra ya compuesto y estable. */
.cuenta-escena .revelar,
.postcreditos .revelar {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---------- Composición de escritorio: una retícula, cuatro pares ---------- */
@media (min-width: 1024px) {
  .carta__contenido.rejilla,
  .cuenta-escena__contenido.rejilla,
  .postcreditos__contenido.rejilla {
    display: grid;
  }

  .carta .escena__cabecera {
    margin-bottom: 0;
  }

  .carta__texto {
    align-self: start;
  }

  .cuenta-escena .cuenta {
    margin-block: 0 var(--espacio-3);
  }

  .cuenta-escena__reloj {
    display: flex;
    align-items: center;
  }

  .postcreditos__rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
  }

  .postcreditos__inauguracion {
    grid-column: 1 / -1;
  }

  .postcreditos .panel__accion {
    margin-top: auto;
  }
}

@media (max-width: 720px) {
  .escenario__hero .hero__edicion {
    margin-bottom: .55rem;
    font-size: .72rem;
    letter-spacing: .2em;
    white-space: nowrap;
  }

  /* El titular cede un punto de tamaño (sigue llenando el ancho, dos
     líneas) para que la portada crezca: en el teléfono el libro es lo
     que hay que ver, y su escala sale del hueco que deja este bloque. */
  .escenario__hero .titulo-display {
    margin-bottom: .75rem;
    font-size: clamp(3.1rem, 13.6vw, 3.9rem);
    line-height: .88;
  }

  .escenario__hero .hero__lema {
    max-width: 34ch;
    margin-bottom: .9rem;
    font-size: 1rem;
    line-height: 1.5;
  }

  /* Los botones ceden altura a la portada: menos relleno y menos
     interletraje, sin bajar nunca del área táctil de 44px. */
  .escenario__hero .hero__acciones {
    align-items: stretch;
    gap: .5rem;
  }

  .escenario__hero .hero__acciones .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: .5em 1em;
    font-size: .7rem;
    letter-spacing: .14em;
    text-align: center;
  }

  /* En el teléfono sigue siendo un botón: sin contorno se leía como
     texto suelto y la inscripción al curso es la conversión principal.
     La jerarquía la marca el relleno del primario, no borrar el borde
     del secundario. */
  .escenario__hero .hero__acciones .btn--contorno {
    border-color: var(--dorado);
    background: rgba(4, 7, 15, .35);
    color: var(--dorado-claro);
  }

  .carta {
    display: block;
    min-height: auto;
    padding-block: var(--espacio-5);
    padding-inline: 0;
  }

  .carta .escena__cabecera {
    margin: 0 0 var(--espacio-3);
  }

  .carta__texto {
    font-size: var(--paso-3);
    line-height: 1.65;
  }

  .cuenta-escena {
    min-height: auto;
    padding-block: var(--espacio-5);
  }

  .cuenta-registro {
    margin-top: var(--espacio-2);
  }

  .cuenta-registro .registro-inicial__campos {
    grid-template-columns: 1fr;
  }

  .js-cine .cuenta-registro {
    margin-top: .65rem;
  }

  .js-cine .cuenta-registro .campo {
    margin-bottom: .45rem;
  }

  .js-cine .cuenta-registro .campo label {
    margin-bottom: .2rem;
    font-size: .64rem;
  }

  .js-cine .cuenta-registro .campo input {
    min-height: 42px;
    padding-block: .5em;
  }

  .js-cine .cuenta-registro .casilla-consentimiento {
    margin-block: .15rem .5rem;
    font-size: .7rem;
    line-height: 1.3;
  }

  .js-cine .cuenta-registro .registro-inicial__acciones .btn {
    min-height: 44px;
    padding: .55em 1em;
    font-size: .68rem;
  }

  .cuenta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block: var(--espacio-3);
  }

  .cuenta__celda:nth-child(odd) {
    border-left: 0;
  }

  .cuenta__celda:nth-child(n + 3) {
    border-top: 1px solid var(--borde-suave);
  }

  .cuenta__num,
  .cuenta-escena .cuenta__num {
    font-size: clamp(3.25rem, 16vw, 4.5rem);
  }

  .cuenta-cine .cuenta {
    margin-block: .5rem;
  }

  /* Dentro del pin la cuenta comparte pantalla con el libro: las
     cuatro celdas se quedan en una fila (el 2×2 de la banda en flujo
     ocupa el doble de alto y el titular acababa sobre la portada). */
  .js-cine .cuenta-cine .cuenta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-block: .75rem .5rem;
  }

  .cuenta-cine .cuenta__celda,
  .js-cine .cuenta-cine .cuenta__celda {
    padding: .7rem .25rem;
  }

  .cuenta-cine .cuenta__num {
    font-size: clamp(2.2rem, 10vw, 3rem);
  }

  /* En fila, cada celda es un cuarto de pantalla: el número baja de
     tamaño y "SEGUNDOS" cabe sin partirse */
  .js-cine .cuenta-cine .cuenta__num {
    font-size: clamp(1.6rem, 6.6vw, 2.4rem);
  }

  .cuenta-cine .cuenta__etq {
    margin-top: .4rem;
  }

  .js-cine .cuenta-cine .cuenta__etq {
    margin-top: .3rem;
    font-size: .58rem;
    letter-spacing: .06em;
  }

  .js-cine .cuenta-cine .cuenta__nota {
    margin-bottom: 0;
    font-size: var(--paso-1);
    line-height: 1.6;
  }

  .cuenta__nota {
    line-height: 1.8;
  }

  .postcreditos {
    padding-block: var(--espacio-5);
  }

  .postcreditos__rejilla {
    grid-template-columns: 1fr;
    gap: var(--espacio-4);
    margin-top: var(--espacio-3);
  }

  .postcreditos__inauguracion {
    margin-top: var(--espacio-3);
  }

  .postcreditos__inauguracion > a {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .postcreditos__inauguracion img {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .postcreditos__inauguracion-texto {
    padding: var(--espacio-3);
  }

  .postcreditos__inauguracion h3 {
    font-size: clamp(2.1rem, 10vw, 3.1rem);
  }

  .postcreditos .panel:nth-child(2) {
    margin-top: 0;
    margin-left: 0;
  }

  .postcreditos .panel:nth-child(3) {
    grid-column: auto;
    max-width: none;
  }
}

/* Las dos llamadas comparten fila cuando sus rótulos caben de una
   línea: se ahorra la altura de un botón entero y ese hueco se lo lleva
   la portada, que es lo que hay que mirar en el hero. Si no caben —
   pantalla estrecha, o el inglés, que es más largo — el propio flex las
   apila y cada una vuelve a ocupar el ancho entero. Sin umbral fijo:
   manda la medida del texto, no un breakpoint adivinado. */
@media (max-width: 720px) {
  .escenario__hero .hero__acciones {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .escenario__hero .hero__acciones .btn {
    flex: 1 1 0;
    padding-inline: .6em;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .escenario__hero .hero__edicion {
    letter-spacing: .14em;
  }

  .escenario__hero .titulo-display {
    font-size: clamp(3.2rem, 16vw, 3.6rem);
  }

}

@media (prefers-reduced-motion: reduce) {
  .postcreditos .panel:nth-child(2) {
    margin-top: 0;
  }
}