/*
  Portada
  Diseño específico para móvil (base) y escritorio (>= 1280px, --breakpoint-desktop),
  con ajustes intermedios en tablet (>= 768px, --breakpoint-tablet). RN-M1-11.

  Orden: hero · qué es · para quién · cómo funciona · cifras · llamada intermedia ·
         preguntas frecuentes · institucional · llamada final
*/

/* =====================================================================
   1. Hero
   ===================================================================== */

.hero {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--gray-900);
  color: #fff;
  --focus: var(--secondary-300);
}

/* Imagen fija, vídeo y degradado ocupan todo el hero */
.hero__media,
.hero__media img,
.hero__media video,
.hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__media img,
.hero__media video {
  object-fit: cover;
}

.hero__media video {
  opacity: 0;
  transition: opacity var(--duration-editorial) var(--easing-standard);
}

/* El vídeo aparece sobre la imagen fija cuando empieza a reproducirse (video.js) */
.hero[data-video-ready] video {
  opacity: 1;
}

.hero[data-video-error] video {
  display: none;
}

/* Degradado para el contraste del texto blanco (arriba: cabecera; abajo: titular) */
/* Velo para el contraste del texto blanco sobre cualquier fotograma (WCAG 1.4.3):
   abajo, el titular y los botones; arriba, la cabecera transparente.
   Nunca baja de 0,5 donde hay texto, aunque detrás haya cielo o nubes blancas. */
.hero__shade {
  background: linear-gradient(
    to top,
    rgb(31 26 24 / 0.88) 0%,
    rgb(31 26 24 / 0.7) 40%,
    rgb(31 26 24 / 0.55) 72%,
    rgb(31 26 24 / 0.65) 90%,
    rgb(31 26 24 / 0.78) 100%
  );
}

.hero__content {
  position: relative;
  align-self: end;
  display: grid;
  gap: var(--gap-6);
  padding-top: calc(var(--header-height) + var(--padding-16));
  padding-bottom: var(--padding-10);
}

.hero__title {
  font-size: var(--font-size-9);
  line-height: var(--line-height-13);
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
  letter-spacing: -0.03em;
  max-width: 14ch;
}

.hero__line {
  display: block;
  overflow: hidden;
  /* margen para que el recorte no corte descendentes */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.hero__line > span {
  display: block;
}

.hero__subtitle {
  font-size: var(--font-size-5);
  line-height: var(--line-height-9);
  max-width: 40ch;
  color: rgb(255 255 255 / 0.92);
}

.hero__actions {
  display: grid;
  gap: var(--gap-3);
}

.hero__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-4);
  padding-top: var(--padding-5);
  border-top: 1px solid rgb(255 255 255 / 0.25);
  font-size: var(--font-size-2);
  line-height: var(--line-height-6);
  color: rgb(255 255 255 / 0.85);
}

.hero__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-2);
}

/* Botón de pausa del vídeo */
.video-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  min-height: 2.75rem;
  padding: var(--padding-2) var(--padding-4) var(--padding-2) var(--padding-2);
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: var(--border-round);
  background: rgb(31 26 24 / 0.35);
  color: #fff;
  font-size: var(--font-size-2);
  line-height: var(--line-height-6);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.video-toggle:hover {
  background: rgb(31 26 24 / 0.6);
}

.video-toggle__icon {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--border-round);
  background: #fff;
  color: var(--gray-900);
}

.video-toggle__icon .icon {
  width: 0.875rem;
  height: 0.875rem;
}

.video-toggle .icon--play,
[data-playing] .video-toggle .icon--pause {
  display: block;
}

.video-toggle .icon--pause,
[data-playing] .video-toggle .icon--play {
  display: none;
}

/* El único momento coreografiado de la página: entrada del titular */
@media (prefers-reduced-motion: no-preference) {
  .hero__line > span {
    animation: hero-line var(--duration-editorial) var(--easing-enter) both;
    animation-delay: calc(150ms + var(--line, 0) * 110ms);
  }

  .hero__subtitle,
  .hero__actions,
  .hero__meta {
    animation: hero-fade var(--duration-slow) var(--easing-enter) both;
    animation-delay: 650ms;
  }

  .hero__actions {
    animation-delay: 750ms;
  }

  .hero__meta {
    animation-delay: 900ms;
  }

  .hero__media img {
    animation: hero-settle 2400ms var(--easing-enter) both;
  }
}

@keyframes hero-line {
  from {
    transform: translateY(105%);
  }
}

@keyframes hero-fade {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

@keyframes hero-settle {
  from {
    transform: scale(1.06);
  }
}

/* =====================================================================
   2. Qué es el programa
   ===================================================================== */

.intro {
  display: grid;
  gap: var(--gap-8);
}

.intro__head {
  display: grid;
  gap: var(--gap-6);
}

.intro__body {
  display: grid;
  gap: var(--gap-5);
  color: var(--text-muted);
}

/* Mismo radio que las tarjetas de perfil (card-profile__media, shared/components/cards.css):
   todas las fotos de la portada comparten un único valor de --border-radius-lg */
.intro__media,
.intro__detail {
  border-radius: var(--border-radius-lg);
}

.intro__media {
  aspect-ratio: 4 / 5;
  margin-inline: calc(-1 * var(--gutter));
}

.intro__detail {
  display: none;
}

/* =====================================================================
   3. Para quién es
   ===================================================================== */

.audiences {
  overflow: hidden;
}

.audiences__head {
  display: grid;
  gap: var(--gap-5);
  margin-bottom: var(--padding-10);
}

.audiences__intro {
  color: var(--text-muted);
}

/* Móvil/tablet: carrusel horizontal con scroll-snap (sigue siendo una lista).
   Barra de scroll oculta visualmente (el desplazamiento sigue disponible:
   dedo, rueda, teclado o arrastre con ratón vía carousel-drag.js). */
.audiences__carousel {
  position: relative;
  /* Ancho de la tarjeta "principal" (ver audiences__list): también sirve
     para centrar las flechas en la foto (ambas, por debajo, usan esta var). */
  --audiences-card-w: 78vw;
}

/* La tarjeta "principal" es la que queda centrada (scroll-snap-align:
   center): el ancho de la tarjeta y el padding lateral se expresan en vw
   (el carrusel ya ocupa el ancho completo de la pantalla, ver margin-inline
   más abajo) para que el padding deje asomar un poco las tarjetas vecinas
   a los dos lados y la primera/última también puedan llegar a centrarse. */
.audiences__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--audiences-card-w);
  gap: var(--gap-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc((100vw - var(--audiences-card-w)) / 2);
  padding-inline: calc((100vw - var(--audiences-card-w)) / 2);
  margin-inline: calc(-1 * var(--gutter));
  padding-block: 15px;
  scrollbar-width: none;
  cursor: grab;
}

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

.audiences__list[data-dragging] {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.audiences__list > li {
  scroll-snap-align: center;
}

/* Centradas en la foto (relación 4/5 de .card-profile__media), no en toda
   la tarjeta: la foto empieza pegada arriba de la lista (padding-block de
   audiences__list) y el título/texto quedan debajo, fuera del alto de la foto. */
.audiences__nav {
  position: absolute;
  top: calc(15px + var(--audiences-card-w) * 5 / 4 / 2);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -1.375rem;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(4px);
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: var(--border-round);
  box-shadow: var(--shadow-md);
}

.audiences__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.audiences__nav svg {
  width: 1.25rem;
  height: 1.25rem;
}

.audiences__nav--prev {
  left: var(--padding-3);
}

.audiences__nav--next {
  right: var(--padding-3);
}

.audiences__more {
  margin-top: var(--padding-8);
}

/* =====================================================================
   4. Cómo funciona
   ===================================================================== */

.steps {
  background: var(--surface-alt);
}

.steps__layout {
  display: grid;
  gap: var(--gap-10);
}

.steps__head {
  display: grid;
  gap: var(--gap-5);
  align-content: start;
}

.steps__head p {
  color: var(--text-muted);
}

/* Los pasos son un componente común (shared/components/steps.css) */

/* =====================================================================
   5. Cifras
   ===================================================================== */

.figures {
  background: var(--surface-dark);
}

.figures__head {
  display: grid;
  gap: var(--gap-5);
  margin-bottom: var(--padding-12);
}

.figures__head p {
  color: var(--text-muted);
}

.figures__list {
  display: grid;
  gap: var(--gap-10);
}

.figures__more {
  margin-top: var(--padding-12);
}

/* =====================================================================
   6. Llamada intermedia
   ===================================================================== */

.band {
  position: relative;
  display: grid;
  min-height: 34rem;
  overflow: hidden;
  color: #fff;
  --focus: var(--secondary-300);
}

/* A sangre (toca los bordes de la ventana): sin radio, como el hero */
.band__media {
  position: absolute;
  inset: 0;
}

.band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(31 26 24 / 0.88) 0%, rgb(31 26 24 / 0.62) 55%, rgb(31 26 24 / 0.35) 100%);
}

.band__content {
  position: relative;
  align-self: end;
  display: grid;
  gap: var(--gap-6);
  justify-items: start;
  padding-block: var(--padding-16) var(--padding-12);
}

.band__title {
  font-size: var(--font-size-8);
  line-height: var(--line-height-12);
  max-width: 20ch;
}

.band__note {
  font-size: var(--font-size-3);
  line-height: var(--line-height-7);
  color: rgb(255 255 255 / 0.88);
}

.band__credit {
  position: absolute;
  top: var(--padding-4);
  right: var(--gutter);
  font-size: var(--font-size-1);
  line-height: var(--line-height-5);
}

/* =====================================================================
   7. Preguntas frecuentes
   ===================================================================== */

.faq-preview__layout {
  display: grid;
  gap: var(--gap-10);
}

.faq-preview__head {
  display: grid;
  gap: var(--gap-5);
  align-content: start;
}

.faq-preview__head p {
  color: var(--text-muted);
}

/* =====================================================================
   8. Institucional
   ===================================================================== */

.institutional {
  padding-top: 0;
}

.institutional__layout {
  display: grid;
  gap: var(--gap-10);
  padding-top: var(--section-space);
  border-top: 1px solid var(--rule);
}

.institutional__text {
  display: grid;
  gap: var(--gap-5);
  align-content: start;
}

.institutional__text p {
  color: var(--text-muted);
}

.institutional__logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-4);
  align-content: start;
}

.institutional__logos .logo-box {
  min-height: 6rem;
}

.institutional__logos .logo-box--main {
  grid-column: 1 / -1;
  min-height: 8rem;
}

/* =====================================================================
   9. Llamada final
   ===================================================================== */

/* La llamada final es un componente común (shared/components/cta.css).
   Aquí solo se ajusta su separación con el bloque institucional. */
.cta-final {
  padding-top: 0;
}

/* =====================================================================
   Tablet (>= 768px)
   ===================================================================== */

@media (min-width: 768px) {
  .hero__title {
    font-size: var(--font-size-10);
    line-height: var(--line-height-14);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
  }

  .intro__media {
    margin-inline: 0;
    aspect-ratio: 16 / 10;
  }

  .audiences__carousel {
    --audiences-card-w: 44vw;
  }

  .audiences__list {
    grid-auto-columns: var(--audiences-card-w);
    scroll-padding-inline: calc((100vw - var(--audiences-card-w)) / 2);
    padding-inline: calc((100vw - var(--audiences-card-w)) / 2);
  }

  .figures__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-16) var(--gap-10);
  }

  .band {
    min-height: 40rem;
  }

  .band__title {
    font-size: var(--font-size-10);
    line-height: var(--line-height-14);
  }

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

/* =====================================================================
   Escritorio (>= 1280px): composición editorial propia
   ===================================================================== */

@media (min-width: 1280px) {
  /* Hero: titular a gran tamaño abajo a la izquierda, metadatos en línea */
  .hero__content {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-6);
    row-gap: var(--gap-8);
    padding-bottom: var(--padding-12);
  }

  .hero__title {
    grid-column: 1 / 11;
    font-size: var(--font-size-12);
    line-height: var(--line-height-16);
    letter-spacing: -0.025em;
    max-width: none;
  }

  .hero__subtitle {
    grid-column: 1 / 6;
    font-size: var(--font-size-6);
    line-height: var(--line-height-10);
    font-family: var(--heading);
    font-variation-settings: "SOFT" 50, "WONK" 0;
  }

  .hero__actions {
    grid-column: 8 / 13;
    align-self: end;
    justify-content: flex-end;
  }

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

  /* Qué es: texto a la izquierda, foto vertical alta a la derecha y un detalle desplazado */
  .intro {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-6);
    row-gap: var(--gap-12);
    align-items: start;
  }

  .intro__head {
    grid-column: 1 / 8;
    grid-row: 1;
  }

  .intro__body {
    grid-column: 2 / 7;
    grid-row: 2;
  }

  .intro__media {
    grid-column: 9 / 13;
    grid-row: 1 / span 3;
    aspect-ratio: 2 / 3;
    margin-top: var(--padding-25);
  }

  .intro__detail {
    display: block;
    grid-column: 6 / 9;
    grid-row: 3;
    aspect-ratio: 4 / 3;
    margin-top: calc(-1 * var(--padding-6));
  }

  /* Para quién: tres perfiles escalonados, proporciones distintas */
  .audiences {
    overflow: visible;
  }

  .audiences__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-6);
    align-items: end;
    margin-bottom: var(--padding-20);
  }

  .audiences__head h2 {
    grid-column: 1 / 7;
  }

  .audiences__intro {
    grid-column: 8 / 13;
  }

  .audiences__list {
    grid-auto-flow: row;
    grid-template-columns: 5fr 4fr 5fr;
    gap: var(--gap-10);
    align-items: start;
    overflow: visible;
    padding: 0;
    margin: 0;
    cursor: auto;
  }

  /* Las 3 tarjetas caben en pantalla: ya no hay desplazamiento que ofrecer */
  .audiences__nav {
    display: none;
  }

  .audiences__list > li:nth-child(2) {
    margin-top: var(--padding-30);
    --ratio: 1 / 1;
  }

  .audiences__list > li:nth-child(3) {
    margin-top: var(--padding-12);
    --ratio: 3 / 4;
  }

  /* Cómo funciona: título fijo a la izquierda, pasos a la derecha */
  .steps__layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-6);
  }

  .steps__head {
    grid-column: 1 / 5;
    position: sticky;
    top: calc(var(--header-height) + var(--padding-10));
    align-self: start;
  }

  .steps__list {
    grid-column: 6 / 13;
  }

  /* Cifras: rejilla 2 x 2 con cifras grandes */
  .figures__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-6);
    align-items: end;
    margin-bottom: var(--padding-20);
  }

  .figures__head h2 {
    grid-column: 1 / 7;
  }

  .figures__head > div {
    grid-column: 8 / 13;
    display: grid;
    gap: var(--gap-3);
    justify-items: start;
  }

  .figures__list {
    gap: var(--gap-20) var(--gap-16);
  }

  /* Llamada intermedia: banda alta a sangre */
  .band {
    min-height: 85vh;
  }

  .band__content {
    padding-bottom: var(--padding-20);
  }

  .band__title {
    font-size: var(--font-size-11);
    line-height: var(--line-height-15);
    letter-spacing: -0.03em;
  }

  /* Preguntas: cabecera estrecha a la izquierda, acordeón ancho */
  .faq-preview__layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-6);
  }

  .faq-preview__head {
    grid-column: 1 / 5;
  }

  .faq-preview__list {
    grid-column: 6 / 13;
  }

  /* Institucional */
  .institutional__layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-6);
  }

  .institutional__text {
    grid-column: 1 / 6;
  }

  .institutional__logos {
    grid-column: 7 / 13;
  }
}