/* ============================================================
   estilos.css — Web de servicios · Ayudas de turismo (Granada)
   Un solo CSS. Variables de diseño al inicio (SPEC §5.1).
   Mobile-first. Sin iconos, sin blanco puro ni negro puro.
   ============================================================ */

/* ---------- 1 · variables de diseño ---------- */

:root {
  --fondo: #FFF5EE;
  --antracita: #2E3338;
  --mandarina: #FF6B35;
  --sol: #FFC93C;
  --verde: #2FA36B;
  --texto-suave: #5A6068;
  --mandarina-claro: #FFE3D6;
  --mandarina-oscuro: #8A2F0D;
  --verde-claro: #D9F2E3;
  --verde-oscuro: #0F5C38;
  --linea: rgba(46, 51, 56, .14);

  /* derivadas del SPEC (§5.3 y zonas oscuras) */
  --linea-clara: rgba(255, 245, 238, .18);
  --ph-fondo: #EFE3D9;

  --fuente-titulos: "Fraunces", serif;
  --fuente-titulares: "Zalando Sans SemiExpanded", sans-serif;
  --fuente-texto: "Instrument Sans", sans-serif;

  --alto-nav: 5.75rem;
  --margen-pagina: clamp(1.25rem, 4vw, 4rem);

  /* duraciones: a 0s con reduced-motion (sin usar !important) */
  --dur-corta: .3s;
  --dur-media: .55s;
  --dur-larga: .6s;
  --suave: cubic-bezier(.22, 1, .36, 1);
  --organico: cubic-bezier(.33, 1, .68, 1); /* aprox. power3.out */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-corta: 0s;
    --dur-media: 0s;
    --dur-larga: 0s;
  }
}

/* ---------- 2 · base ---------- */

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

html {
  scroll-padding-top: calc(var(--alto-nav) + 4.5rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* cuando Lenis toma el control del scroll, sin suavizado nativo */
html.lenis {
  scroll-behavior: auto;
}

body {
  background: var(--fondo);
  color: var(--antracita);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem; /* 17px: el alcalde lee en el móvil */
  font-weight: 400;
  line-height: 1.65;
}

body.sin-scroll {
  overflow: hidden;
}

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

ul,
ol {
  list-style: none;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--mandarina);
  outline-offset: 3px;
}

::selection {
  background: var(--sol);
  color: var(--antracita);
}

h1,
h2,
h3 {
  font-family: var(--fuente-titulares);
  font-weight: 560;
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* palabras clave: mismo Zalando que el titular, pero en itálica y color */
h1 em,
h2 em,
h3 em {
  font-family: var(--fuente-titulares);
  font-style: italic;
  color: var(--mandarina);
  white-space: nowrap; /* la frase clave no se parte de línea */
}

.pagina-2802 h1 em,
.pagina-2802 h2 em {
  color: var(--verde);
}

p {
  max-width: 34em;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 3 · utilidades tipográficas ---------- */

.etiqueta {
  font-family: var(--fuente-texto);
  font-size: .8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.titulo-gigante {
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: .98;
  letter-spacing: -.03em;
  font-variation-settings: "opsz" 144;
}

.titulo-seccion {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-variation-settings: "opsz" 120;
}

/* ---------- 4 · CTAs píldora ---------- */

.cta-pildora {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-block;
  font-family: var(--fuente-texto);
  font-weight: 500;
  font-size: 1rem;
  color: var(--antracita);
  padding: .85em 1.9em;
  border-radius: 99px;
}

/* fondo en ::before y relleno desde abajo en ::after (SPEC §5.4.7) */
.cta-pildora::before,
.cta-pildora::after {
  content: "";
  position: absolute;
  inset: 0;
}

.cta-pildora::before {
  z-index: -2;
  background: var(--mandarina);
}

.cta-pildora::after {
  z-index: -1;
  background: var(--sol);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-media) var(--suave);
}

.cta-pildora:hover::after,
.cta-pildora:focus-visible::after {
  transform: scaleY(1);
}

.cta-sol::before {
  background: var(--sol);
}

.cta-sol::after {
  background: var(--mandarina);
}

/* ---------- 5 · placeholders de imagen ---------- */

.ph {
  position: relative;
  background: var(--ph-fondo);
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.ph figcaption {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-suave);
  text-align: center;
  padding: 1rem;
  max-width: 22em;
}

.ph-45 { aspect-ratio: 4 / 5; }
.ph-32 { aspect-ratio: 3 / 2; }
.ph-169 { aspect-ratio: 16 / 9; }

/* capas creadas por JS para el parallax (§5.4.5): la interior se mueve
   más lenta que el marco; la de zoom escala en el hover */
.ph-interior {
  position: absolute;
  inset: -8% 0;
}

.ph-zoom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--ph-fondo);
  transition: transform var(--dur-larga) var(--organico);
}

.bloque-programa:hover .ph-zoom,
.bloque-programa:focus-visible .ph-zoom {
  transform: scale(1.05);
}

/* carrusel de las tarjetas del selector: caja 3:2 que rota sus fotos.
   Usa las clases genéricas .carrusel-pista / .carrusel-imagen */
.selector-carrusel {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: var(--ph-fondo);
  width: 100%;
}

.selector-carrusel .ph {
  position: absolute;
  inset: 0;
  border-radius: 10px;
}

/* los carruseles sin arrastre no muestran el cursor de "agarrar" */
.selector-carrusel .carrusel-pista,
.heroe-carrusel .carrusel-pista {
  cursor: inherit;
}

/* portada de programa: imagen a sangre que queda fija bajo la navegación
   mientras el resto de la página sube por encima como una tarjeta */
.portada-programa {
  aspect-ratio: auto;
  position: sticky;
  top: var(--alto-nav);
  z-index: 0;
  height: min(76svh, 46rem);
  border-radius: 0;
}

.portada-programa img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* margen extra en la capa interior para el parallax de scroll y de cursor */
.portada-programa .ph-interior {
  inset: -8% -4%;
}

/* tarjeta de contenido: pasa por encima de la portada al hacer scroll */
.tarjeta-contenido {
  position: relative;
  z-index: 2;
  background: var(--fondo);
  border-radius: 12px 12px 0 0;
  margin-top: -1.25rem;
}

.tarjeta-contenido .cabecera-pagina {
  padding-top: clamp(2.5rem, 6vw, 4rem);
}

@media (max-width: 40em) {
  .portada-programa {
    height: min(58svh, 30rem);
  }
}

/* ---------- 6 · banner de urgencia ---------- */

.banner-urgencia {
  background: var(--sol);
  color: var(--antracita);
  padding: .55rem var(--margen-pagina);
  text-align: center;
  overflow: hidden;
}

.banner-urgencia p {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  max-width: none;
}

/* con JS el banner pasa a mini-marquesina lenta (SPEC §5.4.10) */
.banner-urgencia.con-marquesina {
  padding-left: 0;
  padding-right: 0;
  text-align: left;
}

.banner-pista {
  display: inline-block;
  white-space: pre;
  will-change: transform;
}

/* ---------- 7 · navegación ---------- */

.navegacion {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--alto-nav);
  padding: 0 var(--margen-pagina);
  background: rgba(255, 245, 238, .85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}

.marca {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0; /* el logo nunca se comprime aunque la nav vaya justa */
}

.marca img {
  height: clamp(4.03rem, 6.18vw, 5.27rem);
  width: auto;
  display: block;
}

/* botón de menú (hamburguesa): oculto en escritorio, visible en móvil.
   Tres filetes que se cruzan en aspa al abrir el menú */
.hamburguesa {
  display: none;
  position: relative;
  z-index: 60;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -.5rem;
  flex-shrink: 0;
}

.hamburguesa span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--antracita);
  transition: transform var(--dur-corta) var(--suave), opacity var(--dur-corta) ease;
}

.navegacion.menu-abierto .hamburguesa span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.navegacion.menu-abierto .hamburguesa span:nth-child(2) {
  opacity: 0;
}

.navegacion.menu-abierto .hamburguesa span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.enlaces-nav {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 3vw, 2rem);
}

.enlaces-nav a {
  font-family: var(--fuente-titulos);
  font-size: 1rem;
  padding-bottom: .15em;
  white-space: nowrap;
}

.enlaces-nav .cta-pildora {
  font-size: .875rem;
  padding: .6em 1.4em;
}

/* subrayado animado scaleX 0→1 desde la izquierda (SPEC §5.4.8) */
.enlaces-nav a:not(.cta-pildora),
.subnav-familias a,
.pie-abajo nav a {
  position: relative;
}

.enlaces-nav a:not(.cta-pildora)::after,
.subnav-familias a::after,
.pie-abajo nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.2em;
  height: 2px;
  background: var(--mandarina);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-corta) var(--suave);
}

.pie-abajo nav a::after {
  height: 1px;
  background: var(--fondo);
}

.enlaces-nav a:not(.cta-pildora):hover::after,
.enlaces-nav a[aria-current="page"]::after,
.subnav-familias a:hover::after,
.subnav-familias a.activo::after,
.pie-abajo nav a:hover::after {
  transform: scaleX(1);
}

/* móvil: el head deja solo logo + hamburguesa; los enlaces pasan a una
   capa a pantalla completa que se abre al pulsar el botón */
@media (max-width: 47.9375em) {
  .hamburguesa {
    display: flex;
  }

  .marca {
    position: relative;
    z-index: 60;
  }

  /* con el menú abierto se quita el desenfoque: si no, atraparía al
     overlay fixed dentro de la barra (crea bloque contenedor) */
  .navegacion.menu-abierto {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .enlaces-nav {
    position: fixed;
    inset: 0;
    z-index: 45;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.75rem;
    background: var(--fondo);
    padding: calc(var(--alto-nav) + 2rem) var(--margen-pagina) var(--margen-pagina);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-media) ease,
                transform var(--dur-media) var(--suave),
                visibility 0s linear var(--dur-media);
  }

  .navegacion.menu-abierto .enlaces-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--dur-media) ease,
                transform var(--dur-media) var(--suave);
  }

  .enlaces-nav a {
    font-size: 1.75rem;
  }

  .enlaces-nav .cta-pildora {
    font-size: 1.1rem;
    padding: .7em 1.5em;
    margin-top: .5rem;
  }
}

/* ---------- 8 · héroe (landing) ---------- */

.heroe {
  min-height: calc(100svh - var(--alto-nav) - 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(3rem, 8vw, 6rem) var(--margen-pagina);
}

.heroe .etiqueta {
  color: var(--texto-suave);
}

.heroe-texto {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}

.heroe-texto p:not(.etiqueta) {
  font-size: 1.125rem;
  max-width: 34em;
}

/* carrusel de la portada: caja cuadrada; usa las clases genéricas
   .carrusel-pista / .carrusel-imagen / .carrusel-controles */
.heroe-carrusel {
  position: relative;
  overflow: hidden;
  background: var(--ph-fondo);
  border-radius: 10px;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 440px;
}

.heroe-carrusel .ph {
  position: absolute;
  inset: 0;
  border-radius: 10px;
}

/* dos columnas en escritorio: carrusel a la izquierda, texto (con el
   titular) a su derecha */
@media (min-width: 56em) {
  .heroe {
    display: grid;
    grid-template-columns: minmax(300px, 38%) 1fr;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .heroe-carrusel {
    max-width: none;
  }

  .heroe .titulo-gigante {
    font-size: clamp(2.8rem, 6vw, 6.5rem);
  }
}


/* ---------- 9 · marquesina ---------- */

.marquesina {
  overflow: hidden;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding: clamp(1.25rem, 3vw, 2rem) 0;
  white-space: nowrap;
}

.marquesina-pista {
  display: inline-block;
  font-family: var(--fuente-titulos);
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  font-variation-settings: "opsz" 144;
  max-width: none;
  white-space: pre; /* conserva los espacios entre tramos clonados */
  will-change: transform;
}

/* ---------- 10 · secciones y filas editoriales ---------- */

.seccion {
  padding: clamp(4rem, 10vw, 8rem) var(--margen-pagina);
}

.cabecera-seccion {
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.lista-pasos li {
  display: grid;
  grid-template-columns: minmax(3.5rem, auto) 1fr;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  align-items: start;
  border-top: 1px solid var(--linea);
  padding: clamp(1.75rem, 4vw, 3rem) 0;
}

.numero-paso {
  font-family: var(--fuente-titulos);
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1;
  letter-spacing: -.03em;
}

.lista-pasos h3 {
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  margin-bottom: .75rem;
}

.lista-pasos p {
  color: var(--texto-suave);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.55;
  max-width: 40em;
}

/* ---------- 11 · selector de programas (landing) ---------- */

.selector-programas .rejilla-programas {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 56em) {
  .selector-programas .rejilla-programas {
    grid-template-columns: 1fr 1fr;
    gap: 0 clamp(2rem, 5vw, 4rem);
  }
}

.bloque-programa {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem);
  transition: background-color var(--dur-larga) var(--organico), border-color var(--dur-larga) var(--organico);
}

.bloque-2801:hover,
.bloque-2801:focus-visible {
  background: var(--mandarina-claro);
  border-color: var(--mandarina);
}

.bloque-2802:hover,
.bloque-2802:focus-visible {
  background: var(--verde-claro);
  border-color: var(--verde);
}

.bloque-programa h3 {
  transition: transform var(--dur-larga) var(--organico);
}

.bloque-programa:hover h3,
.bloque-programa:focus-visible h3 {
  transform: translateX(8px);
}

.etiqueta-programa {
  align-self: flex-start;
  font-size: .8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .45em 1.1em;
  border-radius: 99px;
}

.bloque-2801 .etiqueta-programa {
  background: var(--mandarina-claro);
  color: var(--mandarina-oscuro);
}

.bloque-2802 .etiqueta-programa {
  background: var(--verde-claro);
  color: var(--verde-oscuro);
}

.bloque-programa h3 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}

.bloque-programa p {
  color: var(--texto-suave);
}

.flecha-grande {
  font-family: var(--fuente-titulos);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  line-height: 1;
  opacity: .45;
  transition: transform var(--dur-larga) var(--organico), opacity var(--dur-larga) var(--organico);
}

.bloque-2801 .flecha-grande { color: var(--mandarina); }
.bloque-2802 .flecha-grande { color: var(--verde); }

.bloque-programa:hover .flecha-grande,
.bloque-programa:focus-visible .flecha-grande {
  transform: translateX(10px);
  opacity: 1;
}

/* ---------- 12 · zona oscura: sellos + pie ---------- */

.zona-oscura {
  background: var(--antracita);
  color: var(--fondo);
}

.sellos .lista-sellos li {
  border-top: 1px solid var(--linea-clara);
  padding: clamp(1.25rem, 3vw, 2rem) 0;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.5rem, 4vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.cifra-clave {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  font-family: var(--fuente-titulos);
  font-size: clamp(1.3rem, 3vw, 2rem);
  max-width: none;
}

.cifra-clave .cifra {
  display: block;
  color: var(--sol);
  font-size: clamp(3.5rem, 11vw, 7.5rem);
  line-height: 1;
  letter-spacing: -.03em;
  font-variation-settings: "opsz" 144;
}

.pie-cta {
  border-top: 1px solid var(--linea-clara);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  align-items: flex-start;
}

.pie-cta h2 {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}

.pie-cta p {
  color: rgba(255, 245, 238, .75);
}

.pie-abajo {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem var(--margen-pagina) 2rem;
  border-top: 1px solid var(--linea-clara);
}

.pie-abajo nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.pie-abajo a {
  font-size: .875rem;
}

.pie-abajo small {
  font-size: .78rem;
  color: rgba(255, 245, 238, .6);
}

/* ---------- 13 · cabecera de página de programa ---------- */

.cabecera-pagina {
  padding: clamp(3.5rem, 9vw, 7rem) var(--margen-pagina) clamp(2.5rem, 6vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cabecera-pagina .miga {
  color: var(--texto-suave);
}

.cabecera-pagina .entradilla {
  font-size: 1.125rem;
  color: var(--texto-suave);
}

/* ---------- 14 · sub-navegación de familias (2801) ---------- */

.subnav-familias {
  display: flex;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  padding: .9rem var(--margen-pagina);
  background: var(--fondo);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  overflow-x: auto;
}

.subnav-familias a {
  font-size: .8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  white-space: nowrap;
  padding-bottom: .2em;
}

/* ---------- 15 · bloques de familia y filas de paquete ---------- */

.bloque-familia {
  padding: clamp(3.5rem, 9vw, 6.5rem) var(--margen-pagina) clamp(2rem, 5vw, 3.5rem);
}

.cabecera-familia {
  display: grid;
  grid-template-columns: minmax(3.5rem, auto) 1fr;
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: start;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.numero-familia {
  font-family: var(--fuente-titulos);
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--mandarina);
}

.pagina-2802 .numero-familia {
  color: var(--verde);
}

.cabecera-familia h2 {
  font-size: clamp(2rem, 5.5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}

.cabecera-familia p {
  margin-top: .5rem;
  color: var(--texto-suave);
}

.fila-paquete {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  width: 100%;
  text-align: left;
  border-top: 1px solid var(--linea);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 1.5rem);
  border-radius: 12px;
  transition: background-color var(--dur-larga) var(--organico);
}

.pagina-2801 .fila-paquete:hover,
.pagina-2801 .fila-paquete:focus-visible {
  background: var(--mandarina-claro);
}

.pagina-2802 .fila-paquete:hover,
.pagina-2802 .fila-paquete:focus-visible {
  background: var(--verde-claro);
}

.lista-paquetes li:last-child .fila-paquete {
  border-bottom: 1px solid var(--linea);
}

.fila-numero {
  display: none; /* sin numeración en las filas de paquete */
}

.fila-nombre {
  display: block;
  font-family: var(--fuente-titulos);
  font-weight: 560;
  font-size: clamp(1.6rem, 4.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  transition: transform var(--dur-larga) var(--organico);
}

.fila-para {
  display: block;
  margin-top: .4rem;
  color: var(--texto-suave);
  max-width: 34em;
}

.fila-flecha {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1;
  color: var(--mandarina);
  opacity: .45;
  transition: transform var(--dur-larga) var(--organico), opacity var(--dur-larga) var(--organico);
}

.fila-flecha::before {
  content: "Saber más";
  font-family: var(--fuente-texto);
  font-size: .8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity var(--dur-larga) var(--organico), transform var(--dur-larga) var(--organico);
}

.fila-paquete:hover .fila-flecha::before,
.fila-paquete:focus-visible .fila-flecha::before {
  opacity: 1;
  transform: translateX(0);
}

.pagina-2802 .fila-flecha {
  color: var(--verde);
}

.fila-paquete:hover .fila-nombre,
.fila-paquete:focus-visible .fila-nombre {
  transform: translateX(8px);
}

.fila-paquete:hover .fila-flecha,
.fila-paquete:focus-visible .fila-flecha {
  transform: translateX(8px);
  opacity: 1;
}

/* ---------- 16 · panel lateral de detalle ---------- */

.overlay-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(46, 51, 56, .45);
  opacity: 0;
  transition: opacity var(--dur-media) ease;
}

.overlay-panel.visible {
  opacity: 1;
}

.panel-detalle {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  width: min(520px, 100%);
  height: 100dvh;
  overflow-y: auto;
  background: var(--fondo);
  box-shadow: -30px 0 80px rgba(46, 51, 56, .25);
  transform: translateX(105%);
  transition: transform var(--dur-media) var(--suave);
}

.panel-detalle.abierto {
  transform: translateX(0);
}

.cerrar-panel {
  position: absolute;
  top: .9rem;
  right: .9rem;
  z-index: 10;
  font-family: var(--fuente-titulos);
  font-size: 1.3rem;
  line-height: 1;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 99px;
  background: var(--fondo);
  display: grid;
  place-items: center;
  transition: background-color var(--dur-corta) ease;
}

.cerrar-panel:hover {
  background: var(--sol);
}

/* carrusel de imágenes del panel: cuadrado 1:1; en escritorio ocupa
   todo el alto de la pantalla como columna lateral */
.panel-carrusel {
  position: relative;
  overflow: hidden;
  background: var(--ph-fondo);
  width: 100%;
  aspect-ratio: 1 / 1;
}

.panel-carrusel .ph {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

/* la pista y las imágenes las inyecta JS: sin JS queda el aviso de foto.
   Las diapositivas van en fila y la pista se desliza en horizontal */
.carrusel-pista {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform var(--dur-media) var(--suave);
  cursor: grab;
  user-select: none;
  touch-action: pan-y; /* el dedo puede arrastrar en horizontal y la página sigue scrolleando en vertical */
}

.carrusel-pista.arrastrando {
  transition: none;
  cursor: grabbing;
}

.carrusel-imagen {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* que el arrastre no dispare el arrastre nativo de la imagen */
}

.carrusel-controles {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.carrusel-flecha {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 99px;
  background: var(--fondo);
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background-color var(--dur-corta) ease;
}

.carrusel-flecha:hover {
  background: var(--sol);
}

.carrusel-indice {
  background: var(--fondo);
  border-radius: 99px;
  padding: .45em .9em;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .08em;
}

@media (min-width: 64em) {
  .panel-detalle {
    width: auto;
    max-width: 100%;
    display: grid;
    grid-template-columns: auto minmax(360px, 520px);
    overflow: hidden; /* cada columna gestiona su propio scroll */
  }

  .panel-carrusel {
    aspect-ratio: auto;
    height: 100dvh;
    width: min(100dvh, calc(100vw - 380px));
  }

  .panel-detalle .panel-cuerpo {
    overflow-y: auto;
    max-height: 100dvh;
  }
}

.panel-cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding: clamp(1.5rem, 5vw, 2.5rem);
}

/* que ningún hijo se encoja al desbordar la columna con scroll (en
   escritorio); si no, el botón con overflow:hidden se colapsaba y
   recortaba el texto */
.panel-cuerpo > * {
  flex-shrink: 0;
}

.panel-cuerpo h2 {
  font-size: clamp(2rem, 6vw, 2.8rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}

.panel-para {
  font-weight: 500;
  color: var(--mandarina);
  line-height: 1.325; /* interlineado más ajustado (mitad del espacio entre líneas) */
}

.pagina-2802 .panel-para {
  color: var(--verde);
}

/* los ejemplos se muestran como tarjeta de fondo cálido y esquinas
   redondeadas, con la etiqueta "Ejemplo:" en el color del programa */
.panel-ejemplo {
  width: 100%;
  max-width: none;
  font-style: italic;
  color: var(--texto-suave);
  background: var(--ph-fondo);
  border-radius: 14px;
  padding: 1.15rem 1.35rem;
  line-height: 1.325; /* interlineado más ajustado (mitad del espacio entre líneas) */
}

.panel-ejemplo strong {
  font-style: normal;
  color: var(--mandarina-oscuro);
}

.pagina-2802 .panel-ejemplo strong {
  color: var(--verde-oscuro);
}

.panel-cuerpo .epigrafe {
  font-family: var(--fuente-texto);
  font-size: .8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-top: .5rem;
}

.panel-lista {
  width: 100%;
}

/* sin numeración; texto un 50% más grande y crecimiento suave al pasar el ratón */
.panel-lista li {
  border-top: 1px solid var(--linea);
  padding: .85rem 0;
  font-size: 1.05em;
  line-height: 1.35;
  transform-origin: left center;
  transition: transform var(--dur-larga) var(--organico), color var(--dur-corta) ease;
}

.panel-lista li:hover {
  transform: scale(1.06);
  color: var(--mandarina-oscuro);
}

.pagina-2802 .panel-lista li:hover {
  color: var(--verde-oscuro);
}

/* ítem de la lista que enlaza a otro paquete: se muestra como enlace */
.panel-lista .enlace-paquete {
  font: inherit;
  color: var(--mandarina);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
  transition: color var(--dur-corta) ease;
}

.pagina-2802 .panel-lista .enlace-paquete {
  color: var(--verde);
}

.panel-lista .enlace-flecha {
  display: inline-block;
  text-decoration: none;
  transition: transform var(--dur-corta) var(--organico);
}

.panel-lista .enlace-paquete:hover .enlace-flecha {
  transform: translate(3px, -3px);
}

.panel-aviso {
  border-left: 3px solid var(--sol);
  padding-left: 1.1rem;
  font-size: .95rem;
}

.panel-cierre {
  width: 100%;
  background: var(--mandarina-claro);
  color: var(--mandarina-oscuro);
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
  font-size: .95rem;
  max-width: none;
  animation: respirar-cierre 3.4s ease-in-out infinite;
}

.pagina-2802 .panel-cierre {
  background: var(--verde-claro);
  color: var(--verde-oscuro);
  animation-name: respirar-cierre-verde;
}

/* halo que respira suavemente en bucle, para llamar la atención sin
   resultar molesto; se detiene con reduced-motion (ver más abajo) */
@keyframes respirar-cierre {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
  50% { box-shadow: 0 0 0 7px rgba(255, 107, 53, .12); }
}

@keyframes respirar-cierre-verde {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 163, 107, 0); }
  50% { box-shadow: 0 0 0 7px rgba(47, 163, 107, .12); }
}

.pagina-2802 .panel-cuerpo .cta-pildora::before {
  background: var(--verde);
}

/* ---------- 17 · animaciones (SPEC §5.4) ---------- */

/* cortina de entrada: crema→antracita, se retira sola con CSS puro,
   así funciona aunque JS falle y nunca deja el contenido tapado */
.cortina {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}

.cortina::before,
.cortina::after {
  content: "";
  position: absolute;
  inset: 0;
  animation: cortina-retirada .8s cubic-bezier(.76, 0, .24, 1) forwards;
}

.cortina::before {
  background: var(--fondo);
  z-index: 1;
  animation-delay: .08s;
}

.cortina::after {
  background: var(--antracita);
  animation-delay: .35s;
}

@keyframes cortina-retirada {
  to {
    transform: translateY(-101%);
  }
}

/* revelado de titulares por líneas: máscaras creadas por JS (§5.4.2) */
.linea {
  display: block;
  overflow: hidden;
  /* aire para que descendentes e itálicas no se recorten con la máscara */
  padding-bottom: .1em;
  margin-bottom: -.1em;
}

.linea-interior {
  display: block;
  will-change: transform;
}

.palabra {
  display: inline-block;
  white-space: nowrap; /* las frases en itálica viajan como una sola palabra */
}

/* subrayado animado de palabras clave al hacer scroll (§5.4.8) */
h1 em,
h2 em {
  background-image: linear-gradient(var(--sol), var(--sol));
  background-repeat: no-repeat;
  background-position: 0 96%;
  background-size: 0% .07em;
  transition: background-size .9s var(--suave) .25s;
}

h1 em.subrayado-visible,
h2 em.subrayado-visible {
  background-size: 100% .07em;
}

@media (prefers-reduced-motion: reduce) {
  .cortina {
    display: none;
  }

  h1 em,
  h2 em {
    background-size: 100% .07em;
    transition: none;
  }

  .panel-cierre {
    animation: none;
  }
}