/* =========================================================
   MÓVIL APAISADO = VERSIÓN MÓVIL
   Un móvil en horizontal (apaisado, 500 px de alto como máximo, táctil)
   recibe las mismas reglas que el móvil en vertical: los bloques
   @media (max-width:700px) incluyen también esa condición, y los de solo
   escritorio (min-width) la excluyen.
   ========================================================= */
/* =========================================================
   TIPOGRAFÍA DEL CLIENTE · Delight (Light 300, Regular 400, Medium 500)
   ========================================================= */
@font-face{font-family:'Delight';src:url('fonts/Delight-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Delight';src:url('fonts/Delight-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Delight';src:url('fonts/Delight-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}

/* =========================================================
   SISTEMA ÚNICO: color, tipografía y espaciado
   - Blanco: color principal y de fondo.
   - Negro: solo para texto, nunca de fondo.
   - Rojo #e32213: acento (botones, etiquetas, cifras, progreso).
   - Rojo oscuro #5b120b: fondo solo en momentos puntuales.
   - Ningún texto por debajo de 16px.
   ========================================================= */
:root{
  /* Factor de la preferencia de tamaño de letra del navegador (main.js):
     1 con el tamaño por defecto; 1,25 con "Grande"… Multiplica los tamaños
     que dependen del ancho o el alto de la ventana (WCAG 1.4.4). */
  --fs-k:1;
  --white:#ffffff;
  --paper:#ffffff;
  --ink:#000000;
  --red:#e32213;      /* acento: botones, cifras grandes, decoración */
  --red-text:#d41f11; /* rojo solo para texto pequeño · WCAG 1.4.3 (AA)
                         5,25:1 sobre blanco · 4,77:1 sobre #f4f4f4 · 4,56:1 sobre #efefef.
                         El #e32213 se queda en 4,24:1 sobre #f4f4f4 y no pasa. */
  --red-dark:#5b120b;
  --g-50:#f4f4f4;    /* superficie de tarjetas sobre blanco */
  --g-100:#efefef;   /* superficies suaves y líneas finas */
  --g-200:#e2e2e2;   /* líneas */
  --g-300:#cfcfcf;   /* líneas inactivas */
  --g-500:#8a8a8a;   /* solo decorativo */
  --g-600:#575757;   /* texto secundario (contraste 7:1) */

  --font:'Delight', Arial, Helvetica, sans-serif;

  /* ---------- Escala tipográfica única: 5 tamaños + cifras ----------
     DISPLAY  h1 y grandes titulares ........ --fs-display
     H2       titular de sección ............ --fs-h2  (solo h2)
     H3       títulos de bloque y frases .... --fs-h3  (h3, h4 y frases)
     P        todos los párrafos ............ --fs-p
     LABEL    etiquetas, botones, menús ..... --fs-label
     FIGURE   cifras gigantes ............... --fs-figure
     No se usan tamaños fuera de estos tokens. */
  --fs-display:clamp(2.75rem, calc(6vw * var(--fs-k)), 6rem);
  --fs-h2:clamp(2rem, calc(3.4vw * var(--fs-k)), 3.25rem);
  --fs-h3:clamp(1.5rem, calc(2.1vw * var(--fs-k)), 2rem);
  --fs-p:1.125rem;
  --fs-label:1rem;
  --fs-figure:clamp(6rem, calc(13vw * var(--fs-k)), 12.5rem);

  /* ---------- Medida de línea (legibilidad en pantallas anchas) ---------- */
  --measure:64ch;         /* párrafos de lectura */
  --measure-phrase:38ch;  /* frases destacadas en tamaño H3 */

  /* ---------- Espaciado: una sola escala para toda la web ---------- */
  --s-1:8px;
  --s-2:16px;
  --s-3:24px;
  --s-4:40px;
  --s-5:64px;
  --s-6:104px;
  --card-pad:clamp(28px, 3vw, 44px);

  /* ---------- Retícula de 12 columnas ----------
     Toda la maqueta se apoya en ella. Ancho de n columnas:
     calc(n * var(--col) + (n - 1) * var(--gap))
     --sbw (ancho de la barra de scroll) lo calcula el script. */
  --pad:clamp(22px, 5vw, 72px);
  --gap:clamp(16px, 2vw, 32px);
  --sbw:0px;
  --content:calc(100vw - var(--sbw) - 2 * var(--pad));
  --col:calc((var(--content) - 11 * var(--gap)) / 12);
  --radius:40px;      /* cards y fotos */
  --frame:12px;       /* margen de las fotos a sangre */
  --header-h:72px;
  /* Menú inferior y paginador de pasos: comparten línea.
     El paginador se alinea con el borde superior del menú. */
  --nav-h:56px;
  --nav-bottom:calc(var(--frame) + 28px);
  --dot:12px;
  --steps-bottom:calc(var(--nav-bottom) + var(--nav-h) - var(--dot));
  --nav-space:112px; /* espacio libre bajo el contenido para el menú inferior */

  /* ---------- Movimiento: curvas y duraciones únicas ----------
     ease-out ...... entradas, salidas y apariciones (arranca al instante)
     ease-in-out ... lo que viaja de un sitio a otro estando a la vista
     ease-soft ..... apariciones largas y tranquilas (fotos, banners)
     Pulsar 140ms · hover 180ms · interfaz 240ms · aparición 800ms */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.76,0,.24,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  --t-press:140ms;
  --t-hover:180ms;
  --t-ui:240ms;
  --t-reveal:800ms;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--white);color:var(--ink)}
/* WCAG 2.4.11 · reserva el sitio de los elementos fijos (cabecera + barra de
   programas arriba, menú inferior abajo) al tabular o saltar a un ancla */
html{
  scroll-padding-top:calc(var(--header-h) + 90px);
  scroll-padding-bottom:calc(var(--nav-space) + 16px);
}
body{font-family:var(--font);font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,figure{margin:0}
strong{font-weight:500}
em{font-style:italic}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Accesibilidad: enlace para saltar al contenido */
.skip-link{
  position:fixed;
  z-index:2000;
  left:16px;
  top:16px;
  padding:14px 22px;
  border-radius:999px;
  background:var(--ink);
  color:var(--white);
  font-weight:500;
  text-decoration:none;
  transform:translateY(-200%);
  transition:transform .2s var(--ease-out);
}
.skip-link:focus{transform:none}
/* Saltar un módulo animado: invisible hasta que recibe el foco de teclado.
   Va fijo en pantalla para que no lo recorte el overflow de las escenas. */
.skip-link--inline{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;transform:none;
}
.skip-link--inline:focus{
  position:fixed;width:auto;height:auto;margin:0;overflow:visible;clip:auto;
  left:16px;top:calc(var(--header-h) + 16px);padding:14px 22px;
}
/* Destacado dentro de párrafos: Medium y en rojo sobre fondo claro.
   Sobre fotos y fondos rojo oscuro mantiene el color del párrafo (blanco). */
strong{font-weight:500;color:inherit}
p strong{color:var(--red-text)}
.opening p strong,
.destinations p strong,
.prog-obj p strong,
.prog-card--purpose p strong,
.cierre p strong{color:inherit}
/* Herramienta de revisión: tecla G muestra la retícula de 12 columnas */
.grid-overlay{
  position:fixed;
  z-index:3000;
  inset:0 calc(var(--pad) + var(--sbw)) 0 var(--pad);
  display:none;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
  pointer-events:none;
}
.grid-overlay span{background:rgba(227,34,19,.08);border-left:1px solid rgba(227,34,19,.25);border-right:1px solid rgba(227,34,19,.25)}
.show-grid .grid-overlay{display:grid}

/* ---------- Roles tipográficos (únicos para toda la página) ---------- */
/* Corte de líneas: sin palabras sueltas ni conectores colgando.
   - balance: titulares y frases cortas (reparte el texto por igual entre líneas).
   - pretty: párrafos largos (evita viudas y líneas finales muy cortas).
   El script completa esto uniendo conectores breves ("y", "la", "de"…) a la
   palabra siguiente con espacio duro, sin tocar los textos originales. */
h1,h2,h3,h4,h5,
.opening-claim,.camino-label,.camino-words,.cierre-item,.zoomout-end-text span,
.pmat-priorities li,.prog-obj-programs li,
.copy p,.opening-text,.camino-text,.dest-card p,.pmat-hero-text,.pmat-plan-text,.pmat-statement,
.prog-sub,.cierre-final p,.zoomout-text,.prog-obj-text{text-wrap:balance}
p,li{text-wrap:pretty;orphans:2;widows:2;hyphens:manual}
/* DISPLAY · Medium */
.title h2,
.opening-claim,
.cierre-title h2,
.camino-label,
.zoomout-end-text{
  font-size:var(--fs-display);
  line-height:.96;
  letter-spacing:-.035em;
  font-weight:500;
}
/* H2 · titular de sección · Medium
   .section-title marca el arranque de cada sección del menú
   (Antecedentes / origen, Los 9 programas). */
.section-title,
.destinations h2,
.data-change-title h2,
.zoomout-lead,
.newsletter-panel h2,
.camino-beat--b .camino-words,
.cierre-item{
  font-size:var(--fs-h2);
  line-height:1.02;
  letter-spacing:-.025em;
  font-weight:500;
}
.section-title{margin:0;color:var(--red);max-width:24ch}
/* Titulares de sección en rojo sobre fondo claro: el color ordena la lectura */
.title h2,
.camino-label,
.data-change-title h2,
.zoomout-lead,
.zoomout-end-text,
.newsletter-panel h2{color:var(--red)}
/* H3 · título de bloque, tarjeta o capítulo · Medium */
.data-change-card h3,
.prog-obj-title,
.prog-title{
  font-size:var(--fs-h3);
  line-height:1.15;
  letter-spacing:-.015em;
  font-weight:500;
}
/* FRASE · párrafo destacado · Light, con medida corta */
.copy p,
.opening-text,
.camino-text,
.dest-card p,
.pmat-hero-text,
.pmat-plan-text,
.pmat-statement,
.pmat-priorities li,
.prog-sub,
.cierre-final p{
  font-size:var(--fs-h3);
  line-height:1.32;
  letter-spacing:-.01em;
  font-weight:300;
  max-width:var(--measure-phrase);
}
/* LEAD · párrafo · Regular */
.zoomout-text,
.newsletter-intro,
.pmat-strategy-side p,
.prog-obj-text,
.prog-card p{
  font-size:var(--fs-p);
  line-height:1.6;
  letter-spacing:0;
  font-weight:400;
  max-width:var(--measure);
}
/* BODY · texto de tarjeta · Regular */
.data-change-card p,
.prog-line,
.site-footer a{
  font-size:var(--fs-p);
  line-height:1.6;
}
/* ETIQUETA · Medium en rojo */
.eyebrow,
.dest-number,
.pmat-panel .pmat-kicker,
.data-change-number,
.data-change-source,
.prog-card-label,
.prog-obj-label,
.prog-nav-count{
  font-size:var(--fs-label);
  line-height:1.3;
  letter-spacing:.01em;
  color:var(--red);
  font-weight:500;
}
.data-change-source{color:var(--g-600);font-weight:400}
/* Sobre gris (#f4f4f4 / #efefef) el rojo de acento no llega a 4,5:1 */
.data-change-number{color:var(--red-text)}
/* INTERFAZ · botones, menús, chips */
.prog-tag,
.prog-map-chip,
.pmat-link,
.anchor-nav a,
.download-btn,
.btn-primary,
.btn-secondary,
.ph[data-label]::after{
  font-size:var(--fs-label);
  line-height:1.2;
  font-weight:500;
}
/* CIFRAS · Medium en rojo */
.pmat-figure strong{
  font-size:var(--fs-figure);
  line-height:.8;
  letter-spacing:-.05em;
  font-weight:500;
  color:var(--red);
}

/* ---------- Fotografías ----------
   Las fotos las asigna main.js (img/turespana_1.png … turespana_13.png);
   mientras cargan, el marco muestra el gris de reserva. */
.photo{
  background-color:var(--g-100);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:var(--pos,50% 50%);
  border-radius:var(--radius);
  overflow:hidden;
}
/* Parallax: la imagen va en una capa interior más alta que su marco y se desplaza con el scroll */
.parallax-img{
  position:absolute;
  left:0;
  right:0;
  top:-25%;
  bottom:-25%;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:var(--pos,50% 50%);
  will-change:transform;
}

/* ---------- Vídeos de fondo (destinos y objetivos) ----------
   Cubren su marco como una foto (object-fit) y respetan el encuadre --pos.
   Con .parallax-img el vídeo es más alto que su marco (150 %) para el parallax. */
.video-cover{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:var(--pos,50% 50%);
  background:var(--g-100);
}
.video-cover.parallax-img{top:-25%;bottom:auto;height:150%}

/* ---------- Marcador de imagen (solo donde aún no hay foto) ---------- */
.ph{
  position:relative;
  overflow:hidden;
  background-color:var(--ph, var(--g-100));
  border-radius:var(--radius);
}
.ph::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top right, transparent calc(50% - .6px), rgba(0,0,0,.08) 50%, transparent calc(50% + .6px)),
    linear-gradient(to bottom right, transparent calc(50% - .6px), rgba(0,0,0,.08) 50%, transparent calc(50% + .6px));
  pointer-events:none;
}
.ph[data-label]::after{
  content:attr(data-label);
  position:absolute;
  left:24px;
  bottom:20px;
  color:var(--g-600);
}

/* ---------- Barra de progreso de lectura ---------- */
.page-progress{
  position:fixed;
  z-index:1000;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:var(--red);
  transform-origin:0 50%;
  transform:scaleX(0);
  pointer-events:none;
}

/* =========================================================
   PAGINADOR DE PASOS (componente único)
   Se usa en "Antecedentes / origen" (.pmat-steps) y en cualquier módulo
   que lo necesite. Aspecto y posición viven solo aquí: el paginador es
   hijo directo de un escenario sticky de 100vh, así que queda siempre en
   el mismo sitio (columna 1, con el borde superior de los puntos
   alineado con el borde superior del menú inferior).
   - span            paso pendiente
   - span.is-done    paso ya visto
   - span.is-active  paso actual (se alarga)
   ========================================================= */
.step-dots{
  position:absolute;
  z-index:5;
  left:var(--pad);
  bottom:var(--steps-bottom);
  display:flex;
  align-items:flex-start; /* todos los puntos con el mismo borde superior */
  gap:10px;
  height:var(--dot);
}
.step-dots span{
  flex:0 0 auto;
  width:var(--dot);
  height:var(--dot);
  border-radius:calc(var(--dot) / 2);
  background:var(--g-300);
  transition:width .35s var(--ease-out),background .35s var(--ease-out);
}
.step-dots span.is-done{background:var(--red-dark)}
.step-dots span.is-active{width:40px;background:var(--red)}

/* =========================================================
   HEADER · se oculta al bajar y reaparece al subir
   ========================================================= */
/* Barra blanca y sólida a todo el ancho. El contenido se alinea con la
   retícula: la marca en la columna 1 y el botón en la columna 12. */
.site-header{
  position:fixed;
  z-index:900;
  top:0;
  left:0;
  right:0;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 calc(var(--pad) + var(--sbw)) 0 var(--pad);
  background:var(--white);
  border-bottom:1px solid var(--g-200);
  transition:transform .35s var(--ease-out);
}
/* Sube su altura más el margen superior que tiene sobre la portada
   (frame + 14px): así sale del todo en cualquier posición */
.site-header.is-hidden{transform:translateY(calc(-100% - var(--frame) - 24px))}
/* Sobre la portada el header no lleva fondo: deja ver la foto */
.site-header{transition:transform .35s var(--ease-out),background-color .35s var(--ease-out),border-color .35s var(--ease-out),color .35s var(--ease-out),box-shadow .35s var(--ease-out),top .35s var(--ease-out),left .35s var(--ease-out),right .35s var(--ease-out),padding .35s var(--ease-out)}
.header-over-hero .site-header{
  background:transparent;
  border-bottom-color:transparent;
  color:var(--white);
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  /* Se mete dentro de la foto: respeta el margen y las esquinas redondeadas */
  top:calc(var(--frame) + 14px);
  left:var(--frame);
  right:var(--frame);
  padding:0 28px;   /* mismo margen que el círculo de scroll: el botón queda alineado con él */
}
.header-over-hero .download-btn{background:var(--white);color:var(--red-dark)}
.header-over-hero .download-btn:hover{background:var(--g-100)}
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .header-over-hero .site-header{top:calc(var(--frame) + 6px);padding:0 16px}
}
/* Marca: solo texto, sin icono ni círculo delante */
.site-header-title{
  display:flex;
  align-items:center;
  margin:0;
  font-size:var(--fs-label);
  line-height:1.15;
  letter-spacing:.04em;
  font-weight:500;
}
/* Marca: nombre del plan con los años en rojo */
.brand-years{color:var(--red);font-weight:400}
.header-over-hero .brand-years{color:inherit;opacity:.85}
.download-btn,
.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 24px;
  border:0;
  border-radius:999px;
  background:var(--red);
  color:var(--white);
  text-decoration:none;
  font-family:inherit;
  white-space:nowrap;
  cursor:pointer;
  transition:background .2s var(--ease-out),color .2s var(--ease-out);
}
.download-btn:hover,
.btn-primary:hover{background:var(--red-dark)}
.download-btn svg{width:16px;height:16px;flex:0 0 16px}
.download-meta{opacity:1;font-weight:400}

/* =========================================================
   MENÚ INFERIOR DE ANCLAS (siempre visible)
   ========================================================= */
.anchor-nav{
  position:fixed;
  z-index:900;
  left:50%;
  bottom:var(--nav-bottom); /* misma línea que el círculo con flecha de la portada */
  height:var(--nav-h);      /* misma altura que el círculo */
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:2px;
  padding:0 5px;
  background:var(--white);
  border:1px solid var(--g-200);
  border-radius:999px;
  max-width:calc(100vw - 24px);
  overflow-x:auto;
  scrollbar-width:none;
}
.anchor-nav::-webkit-scrollbar{display:none}
.anchor-nav a{
  flex:0 0 auto;
  height:44px;
  display:flex;
  align-items:center;
  padding:0 18px;
  border-radius:999px;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
  transition:background .2s var(--ease-out),color .2s var(--ease-out);
}
.anchor-nav a:hover{background:var(--g-100);color:var(--red)}
.anchor-nav a[aria-current="true"]{background:var(--red);color:var(--white)}

@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  /* El menú inferior también está en móvil: es la única forma de saltar de
     sección en una página de ~83 pantallas. Se desliza en horizontal. */
  :root{--header-h:64px;--nav-space:92px;--frame:8px;--steps-bottom:calc(var(--nav-h) + 20px)}
  .site-header{gap:12px}
  .site-header-title{letter-spacing:0;gap:10px}
  .download-btn{padding:12px 16px}
  .download-label{display:none}
  .download-meta{opacity:1}
  .anchor-nav{left:10px;right:10px;bottom:10px;transform:none;max-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 85%,transparent);
            mask-image:linear-gradient(to right,#000 85%,transparent)} /* indica que se puede deslizar */
  .anchor-nav a{padding:12px 14px}
}

/* =========================================================
   BANNER DE APERTURA · ¿Qué es el plan?
   ========================================================= */
.opening{position:relative;height:190vh;background:var(--paper)}
.opening-stage{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  background:var(--paper);
}
/* Marco del vídeo: empieza como una tarjeta pequeña con el mismo radio
   (--radius) que el resto de tarjetas y fotos, y crece hasta pantalla completa */
.opening-frame{
  position:absolute;
  left:50%;
  top:50%;
  width:calc(100% - 2 * var(--frame));
  height:calc(100% - 2 * var(--frame));
  border-radius:var(--radius);
  overflow:hidden;
  transform:translate(-50%,-50%);
  background:var(--g-100);
}
.opening-photo{
  position:absolute;
  left:50%;
  top:50%;
  display:block;
  width:100vw;
  height:100vh;
  object-fit:cover;
  object-position:50% 60%;
  background:var(--g-100);
  transform:translate(-50%,-50%);
  will-change:transform;
  pointer-events:none;
}
/* Sin capa de color sobre el vídeo: solo un degradado negro casi
   imperceptible para asentar el texto blanco. Si algún vídeo es muy
   claro, subir --veil (máx. .25). */
.opening-veil{
  --veil:.14;
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,calc(var(--veil) * .4)) 0%, rgba(0,0,0,var(--veil)) 50%, rgba(0,0,0,calc(var(--veil) * .6)) 100%);
  pointer-events:none;
  transition:opacity 1s var(--ease-out);
}
/* Todos los textos de la portada en una única pantalla */
.opening-content{
  position:absolute;
  z-index:2;
  left:var(--pad);
  right:var(--pad);
  top:var(--header-h);
  bottom:var(--nav-space);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  max-width:calc(10 * var(--col) + 9 * var(--gap));
  margin-inline:auto;
  color:var(--white);
  will-change:transform,opacity;
}
.opening-content .opening-claim{max-width:20ch;margin-inline:auto;text-align:center}
/* El subtítulo arranca oculto: aparece con un ligero scroll (ver main.js · PORTADA) */
.opening-content .opening-text{font-size:var(--fs-h3);line-height:1.32;margin:3.4vh auto 0;max-width:40ch;font-weight:400;text-align:center;opacity:0;will-change:transform,opacity}
/* Sombra muy suave: mantiene el texto legible sin oscurecer el vídeo */
.opening-claim,.opening-text{text-shadow:0 1px 24px rgba(0,0,0,.18)}

/* Indicador de scroll: círculo blanco en la esquina inferior derecha */
.scroll-cue{
  position:absolute;
  z-index:3;
  right:calc(var(--frame) + 28px);
  bottom:calc(var(--frame) + 28px);
  width:56px;
  height:56px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--white);
  color:var(--ink);
  display:grid;
  place-items:center;
  cursor:pointer;
  opacity:var(--fade,1);
}
.scroll-cue svg{width:20px;height:20px;animation:cue-bob 1.8s ease-in-out infinite}
@keyframes cue-bob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .opening-content{left:calc(var(--frame) + 20px);right:calc(var(--frame) + 20px)}
  .opening-content .opening-text{margin-top:2.4vh}
  .scroll-cue{right:calc(var(--frame) + 16px);bottom:calc(var(--nav-space) + 12px);width:48px;height:48px}
}

/* ---------- Animación de entrada ----------
   1. Fondo blanco con el vídeo en una tarjeta pequeña (radio --radius)
   2. La tarjeta crece hasta llenar la pantalla
   3. Entran los textos, el header, el menú y el indicador de scroll */
.is-intro{overflow:hidden}
.opening-frame,
.site-header,
.anchor-nav,
.scroll-cue{
  transition-property:width,height,border-radius,transform,opacity,translate,background-color,border-color,color,top,left,right,padding;
  transition-timing-function:var(--ease-in-out);
}
.opening-frame{transition-duration:1.3s}
.intro-start .opening-frame{width:300px;height:120px;border-radius:var(--radius);opacity:0;transform:translate(-50%,-50%) scale(.9)}
.intro-capsule .opening-frame{width:300px;height:120px;border-radius:var(--radius);opacity:1;transform:translate(-50%,-50%);transition-duration:.6s}
.intro-start .opening-veil,
.intro-capsule .opening-veil,
.intro-grow .opening-veil{opacity:0}
.intro-start .site-header,
.intro-capsule .site-header,
.intro-grow .site-header{transform:translateY(calc(-100% - 40px))}
.anchor-nav{transition-duration:.7s;transition-timing-function:var(--ease-out)}
.intro-start .anchor-nav,
.intro-capsule .anchor-nav,
.intro-grow .anchor-nav{opacity:0;translate:0 24px;pointer-events:none}
.scroll-cue{transition-duration:.6s;transition-timing-function:var(--ease-out)}
.intro-reveal .scroll-cue{transition-delay:.9s}
.intro-start .scroll-cue,
.intro-capsule .scroll-cue,
.intro-grow .scroll-cue{opacity:0;transform:scale(.6);transition-delay:0s}
.intro-start .opening-content > *,
.intro-capsule .opening-content > *,
.intro-grow .opening-content > *{opacity:0}
@keyframes opening-rise{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}
/* Solo el título entra con la intro: el subtítulo lo controla el scroll */
.intro-done .opening-claim{animation:opening-rise .9s cubic-bezier(.2,.7,.2,1) .05s both}
.intro-reveal .site-header{transition-duration:.6s;transition-delay:.3s}
.intro-reveal .anchor-nav{transition-delay:.5s}

/* =========================================================
   EL CAMINO QUE HEMOS HECHO
   ========================================================= */
.camino{position:relative;height:640vh;background:var(--paper)}
.camino-stage{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  background:var(--paper);
}
.camino-beat{
  position:absolute;
  left:50%;
  top:50%;
  width:calc(8 * var(--col) + 7 * var(--gap));
  transform:translate(-50%,-50%);
  text-align:center;
  will-change:transform,opacity;
}
.camino-label{margin:0 auto;max-width:14ch}
.camino-text{margin:4vh auto 0;max-width:40ch;opacity:0;will-change:transform,opacity}

.camino-beat--b .camino-words{max-width:22ch;margin:0 auto}
.camino-beat--b h2 + h2{margin-top:3vh}
.cw{opacity:0}

/* =========================================================
   MÓDULO 01 · ALGO ESTÁ CAMBIANDO + DESTINOS
   ========================================================= */
.story{position:relative;height:1200vh;background:var(--paper)}
.stage{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  background:var(--paper);
}
.title{
  position:absolute;
  z-index:40;
  left:50%;
  top:50%;
  width:calc(10 * var(--col) + 9 * var(--gap));
  transform:translate(-50%,-50%);
  text-align:center;
  will-change:transform,opacity;
}
.card{
  position:absolute;
  z-index:8;
  border-radius:var(--radius);
  opacity:0;
  will-change:transform,opacity;
}
.c1{width:13.9vw;aspect-ratio:.79;left:5.7vw;top:49vh;--pos:30% 30%}
.c2{width:14.2vw;aspect-ratio:.80;left:23.8vw;top:10vh;--pos:62% 70%}
.c3{width:15.8vw;aspect-ratio:1.02;left:55.9vw;top:8vh;--pos:40% 40%}
.c4{width:15.1vw;aspect-ratio:.86;right:6.2vw;top:22vh;--pos:80% 60%}
.c5{width:18.2vw;aspect-ratio:1.43;right:-1vw;top:61vh;--pos:70% 30%}
.c6{width:17.4vw;aspect-ratio:.93;left:14.2vw;top:74vh;--pos:20% 70%}
.c7{width:16.4vw;aspect-ratio:1.17;left:47.1vw;top:75vh;--pos:85% 75%}

.copy{
  position:absolute;
  z-index:25;
  left:50%;
  top:0;
  width:calc(8 * var(--col) + 7 * var(--gap));
  text-align:center;
  opacity:0;  /* sin visibility:hidden: sigue en el árbol de accesibilidad (la opacidad la lleva main.js) */
  text-shadow:0 0 14px var(--paper),0 0 4px var(--paper);
  will-change:transform,opacity;
}
.copy p{margin-inline:auto} /* la medida (--measure-phrase) se centra en la columna */

.final{
  position:absolute;
  z-index:50;
  left:50%;
  top:150vh;
  width:68vw;
  height:76vh;
  border-radius:var(--radius);
  transform:translate(-50%,-50%);
  visibility:hidden;
  --pos:50% 50%;
  will-change:top,width,height;
}

.destinations{
  position:absolute;
  z-index:70;
  inset:0;
  overflow:hidden;
  opacity:0;
  /* sin visibility:hidden: sigue en el árbol de accesibilidad (la opacidad la lleva main.js) */
  pointer-events:none;
}
.dest-bg{position:absolute;inset:var(--frame);z-index:0;border-radius:var(--radius);overflow:hidden}
.dest-bg::after,
.final::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.35) 100%);pointer-events:none}
/* La foto aparece limpia y se oscurece mientras crece (--shade, main.js) */
.final::after{opacity:var(--shade,1)}
.dest-bg-layer{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .6s var(--ease-out);
}
.dest-bg-layer{border-radius:0}
.dest-bg-layer:nth-child(2){--pos:40% 50%}
.dest-bg-layer:nth-child(3){--pos:70% 50%}
.dest-bg-layer:nth-child(4){--pos:85% 40%}
.dest-intro{
  position:absolute;
  z-index:3;
  left:var(--pad);
  top:calc(var(--header-h) + 6vh);
  width:calc(5 * var(--col) + 4 * var(--gap));
  color:var(--white);
}
/* Mapa de España de puntos dentro de cada tarjeta (símbolo #spainMap).
   El marcador de la tarjeta activa late. */
/* El mapa es una capa de fondo: anclado a la derecha, a un tamaño medio
   para que el texto respire, y detrás del texto. Sus puntos son gris
   claro, así que el texto puede pisarlo sin perder legibilidad. */
.dest-card-map{
  position:absolute;
  z-index:0;
  inset:var(--card-pad);
  margin:0;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  pointer-events:none;
}
.dest-card-map svg{display:block;height:68%;width:auto;max-width:60%;overflow:visible}
.dest-map-dots{fill:none;stroke:var(--g-300);stroke-width:5.6;stroke-linecap:round} /* g-300: visible sobre blanco sin competir con el texto */
.dest-map-inset{fill:none;stroke:var(--g-200);stroke-width:1.5}
.dest-marker-dot{fill:var(--red)}
.dest-marker-ring{fill:none;stroke:var(--red);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.dest-card.is-active .dest-marker-ring{opacity:1;animation:dest-pulse 2.2s ease-out infinite}
@keyframes dest-pulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.dest-intro .eyebrow{color:var(--white)}
.eyebrow{margin-bottom:var(--s-3)}
.dest-cards{
  position:absolute;
  z-index:4;
  right:calc(var(--pad) + var(--sbw));
  top:0;
  width:calc(6 * var(--col) + 5 * var(--gap));
  display:flex;
  flex-direction:column;
  gap:14vh;
  will-change:transform;
}
.dest-card > *{opacity:var(--dim,1)} /* se atenúa el contenido, no la card: nunca se transparenta */
/* Tarjetas altas: número y lugar arriba, mapa en el centro y la historia abajo */
.dest-card{
  position:relative;
  overflow:hidden;
  min-height:min(64vh,600px);
  padding:var(--card-pad);
  border-radius:var(--radius);
  background:var(--white);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:var(--s-4);
}
.dest-card-head{display:flex;align-items:center;gap:var(--s-2)}
.dest-card-head,.dest-card p{position:relative;z-index:1} /* el texto pisa el mapa */
.dest-card-head .dest-number{display:flex;align-items:center;gap:10px;color:var(--g-600)}
.dest-card-head .dest-number::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--red)}
.dest-card p{max-width:34ch;text-shadow:0 0 10px var(--white),0 0 3px var(--white)} /* halo blanco: se lee aunque pise el marcador */

@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  /* Fotos en dos franjas (arriba 5–29vh, abajo 72–96vh): la central
     (≈34–66vh) queda libre para el titular y los textos */
  .c2{width:28vw;left:4vw;top:9vh}
  .c3{width:30vw;left:36vw;top:5vh}
  .c4{width:28vw;right:2vw;top:14vh}
  .c1{width:26vw;left:-4vw;top:72vh}
  .c6{width:30vw;left:22vw;top:80vh}
  .c7{width:30vw;left:56vw;top:74vh}
  .c5{width:32vw;right:-6vw;top:86vh}
  .copy{width:86vw}
  .final{width:88vw;height:72vh}
  .dest-intro{left:var(--pad);top:calc(var(--header-h) + 2vh);width:calc(100vw - 2 * var(--pad))}
  /* Hueco mayor que la mitad superior de la tarjeta: la anterior ya ha
     salido por arriba cuando la siguiente se para (ver main.js · destinos) */
  .dest-cards{left:var(--pad);right:var(--pad);width:auto;gap:50vh}
  .dest-card{min-height:46vh;padding:28px;gap:28px}
}

/* =========================================================
   MÓDULO 02 · PMAT (scroll horizontal con pausas)
   4 paneles: presentación · cifras · prioridades · estrategia
   ========================================================= */
.pmat{position:relative;height:700vh;background:var(--white)}
.pmat-stage{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  background:var(--white);
}
.pmat-track{
  height:100%;
  width:max-content;
  display:flex;
  will-change:transform;
}
.pmat-panel{
  position:relative;
  flex:0 0 100vw;
  width:100vw;
  height:100vh;
  /* Sin recorte: las ilustraciones salen del panel y el escenario recorta
     en el borde de la pantalla (a sangre) */
  overflow:visible;
  padding:var(--pad) var(--pad) calc(var(--nav-space) + 40px);
}
.pmat-panel-inner{
  position:relative;
  z-index:3; /* el texto siempre por encima de las ilustraciones */
  width:100%;
  height:100%;
  --gap:clamp(16px,2vw,32px);
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:auto 1fr;
  column-gap:var(--gap);
}
/* Etiqueta siempre en el mismo sitio, arriba a la izquierda, con su filete rojo */
.pmat-panel .pmat-kicker{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  padding-top:clamp(8px,3vh,32px);
}
.pmat-panel .pmat-kicker::before{content:"";width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:var(--red)}
/* Panel 1: el inicio de la sección lleva su h2 en el mismo sitio que las etiquetas */
.pmat-heading{grid-column:1 / -1;padding-top:clamp(8px,3vh,32px)}
/* Cuerpo de cada panel: rejilla de 12 columnas centrada en vertical */
.pmat-body{
  grid-column:1 / -1;
  align-self:center;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
  row-gap:6vh;
}

/* =========================================================
   ILUSTRACIONES DEL CARRUSEL (animadas con el scroll)
   - Panel 1: globo (vídeo controlado por el scroll)
   - Panel 2: abeja y flores · Panel 3: olivo y sol (SVG)
   Cada pieza es una capa .pmat-ill con su profundidad (data-depth):
   durante el swipe se mueve más rápido que el texto, y las cercanas
   más que las lejanas. El texto (z-index 3) queda siempre encima.
   Las piezas ocupan las zonas libres de texto y salen por los bordes;
   el paginador y el menú inferior quedan despejados.
   ========================================================= */
.pmat-art{position:absolute;inset:0;z-index:1;pointer-events:none}
.pmat-ill{
  position:absolute;
  will-change:transform;
}
/* Panel 1 · texto a la izquierda; globo de mesa entero, centrado en la
   mitad derecha. Vídeo de fondo blanco puro sobre página blanca: sin
   recuadro visible. --h: alto del globo (proporción 808 × 968); el último
   término lo limita al hueco entre el header y el menú inferior. */
.pmat-globe{
  --h:min(78vh,62vw,calc(100vh - var(--header-h) - var(--nav-space) - 7vh));
  left:calc(75vw - var(--h) * .4175);
  top:max(calc(var(--header-h) + 2vh), calc(48vh - var(--h) / 2));
  width:calc(var(--h) * .835);
  height:var(--h);
  border-radius:0;
  object-fit:contain;
  background:var(--white);
  pointer-events:none;
}
/* ---------- Ilustraciones de grabado (paneles 2 y 3) ----------
   Las ilustraciones van enteras, tal cual, en el mismo rojo que el globo.
   No se animan: solo parallax (ver main.js · PMAT). */
.pmat-ill img{display:block;width:100%;height:100%;user-select:none}
/* Panel 2 · pájaro grande en la columna derecha, a sangre por abajo */
.pmat-bird{
  --h:min(84vh,54vw);
  width:calc(var(--h) * .873);  /* proporción de la ilustración (630 × 722) */
  height:var(--h);
  right:-9vw;
  bottom:-18vh;
}
/* Panel 3 · rama de olivo grande arriba a la derecha, en espejo:
   el tallo entra por el borde derecho */
.pmat-olive{
  /* el último término deja siempre sitio al texto secundario en pantallas bajas */
  --h:min(60vh,42vw,calc(100vh - 350px));
  width:calc(var(--h) * 1.011); /* proporción de la ilustración (900 × 890) */
  height:var(--h);
  right:-1vw;
  top:-6vh;
}
.pmat-olive img{transform:scaleX(-1)}

/* Panel 1 · Antecedentes / origen: una sola frase protagonista */
.pmat-hero-text{
  grid-column:1 / 7;
  margin:0;
  color:var(--ink);
}

/* Panel 2 · Meta 13 y las tres herramientas */
/* Panel 2 · párrafo arriba y las tres prioridades en fila debajo (como las
   cifras del panel 3); la columna derecha queda libre para el pájaro */
.pmat-plan-text{grid-column:1 / 9;align-self:start;color:var(--ink);max-width:40ch}
/* el texto sube bajo la etiqueta y deja la mitad inferior derecha al pájaro */
.pmat-panel--2 .pmat-body{align-self:start;margin-top:7vh}
.pmat-plan-text strong{font-weight:500}
.pmat-priorities{
  grid-column:1 / 9;
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--gap);
}
.pmat-priorities li{
  padding-top:2.4vh;
  border-top:1px solid var(--g-200);
  font-weight:300;
  line-height:1.25;
}
.pmat-priority-text{display:block}
/* La infografía va encima del texto (order) y alineada al mismo margen;
   todas miden lo mismo, así los textos empiezan a la misma altura */
.pmat-priorities li{display:flex;flex-direction:column}
/* Mini-infografías (SVG): trazo fino rojo; la parte que "resulta" va rellena */
.pmat-priority-ill{order:-1;display:block;align-self:flex-start;height:56px;width:auto;margin:0 0 2.4vh;overflow:visible}
.pmat-priority-ill .ill-line{fill:none;stroke:var(--red);stroke-width:1.5;vector-effect:non-scaling-stroke}
.pmat-priority-ill .ill-fill{fill:var(--red)}

/* Panel 3 · Otras metas y participación en España Turismo 2030 */
/* Panel 3 · cifras y frase a la izquierda (centradas); el texto secundario
   abajo a la derecha, bajo el olivo, que ocupa la esquina superior derecha */
.pmat-panel--3 .pmat-body{align-self:stretch}
.pmat-strategy-side{grid-column:8 / 13;grid-row:1;align-self:end}
.pmat-strategy-side p{color:var(--g-600)}
.pmat-strategy-main{grid-column:1 / 8;grid-row:1;align-self:center}
.pmat-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.pmat-figure{padding-top:2.4vh;border-top:1px solid var(--g-200)}
.pmat-figure strong{display:block;font-size:var(--fs-display);line-height:.9}
.pmat-figure span{display:block;margin-top:12px;font-size:var(--fs-p);color:var(--g-600)}
.pmat-statement{margin:5vh 0 0}
.pmat-link{
  display:inline-block;
  margin-top:4vh;
  color:var(--red);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:4px;
}
.pmat-link:hover{color:var(--red-dark)}


@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .pmat-panel{padding:calc(var(--header-h) + 4vh) var(--pad) calc(var(--nav-space) + 30px)}
  .pmat-body{row-gap:3vh}
  .pmat-body > *{grid-column:1 / -1}
  /* Móvil: las ilustraciones se reducen a la franja libre bajo el texto,
     en la esquina inferior derecha (el paginador queda a la izquierda) */
  .pmat-bird{--h:16vh;right:-3vw;bottom:-5vh}
  .pmat-olive{--h:15vh;right:-1vw;top:auto;bottom:-2vh}
  .pmat-panel--3 .pmat-body{align-self:center}
  .pmat-panel--2 .pmat-body{align-self:center;margin-top:0}
  .pmat-strategy-side,.pmat-strategy-main{grid-row:auto;align-self:start}
  /* Panel 1: el globo ocupa el hueco bajo el título, saliendo por la derecha,
     y el texto se apoya abajo para no cruzarse con él */
  /* Móvil: sin globo, pájaro ni olivo; el texto se centra en vertical */
  .pmat-art{display:none}
  .pmat-panel--1 .pmat-body{align-self:center}
  /* Pilares: el texto arranca en el mismo margen que el resto de bloques
     y la mini-infografía se coloca a su derecha, sin añadir altura */
  .pmat-priorities{grid-template-columns:1fr}
  .pmat-priorities li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center;padding:1.8vh 0;line-height:1.2;border-top:0;border-bottom:1px solid var(--g-200)}
  .pmat-priorities li:first-child{border-top:1px solid var(--g-200)}
  .pmat-priority-ill{order:0;height:34px;margin:0;align-self:center}  /* en móvil, a la derecha del texto */
  .pmat-statement{margin-top:3vh}
  .pmat-figure strong{font-size:var(--fs-h2)}
}

/* =========================================================
   MÓDULO 03 · DATOS QUE INDICAN UN CAMBIO
   ========================================================= */
.data-change-module{position:relative;height:600vh;background:var(--paper)}
.data-change-stage{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  background:var(--paper);
}
/* Panel gris con el mismo margen y radio que el resto de bloques a pantalla
   completa: separa visualmente este módulo. Las tarjetas van en blanco encima. */
.data-change-stage::before{
  content:"";
  position:absolute;
  inset:var(--frame);
  z-index:0;
  border-radius:var(--radius);
  background:var(--g-100);
}
/* El titular se queda fijo en el centro de la pantalla durante todo el
   módulo; las tarjetas (capa superior) pasan por encima de él. */
.data-change-title{
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  width:calc(12 * var(--col) + 11 * var(--gap));
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
}
/* Dos líneas fijas: el salto está en el HTML y cada línea no se parte */
.data-change-title h2{text-wrap:nowrap;white-space:nowrap}
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .data-change-title h2{font-size:min(var(--fs-h3),calc(6vw * var(--fs-k)))} /* las 2 líneas caben hasta en 320px */
}
.data-change-word,
.data-change-dot{opacity:0}
/* Capa de las tarjetas: cubre el panel gris (mismo margen y radio) y va
   por encima del titular. Recorta las tarjetas al borde del panel. */
.data-change-viewport{
  position:absolute;
  z-index:10;
  inset:var(--frame);
  overflow:hidden;
  border-radius:var(--radius);
}
.data-change-cards{
  position:absolute;
  left:calc(var(--pad) - var(--frame));
  right:calc(var(--pad) - var(--frame) + var(--sbw));
  top:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--gap);
  row-gap:var(--gap);
  align-items:start;
}
/* Las 6 tarjetas comparten fila: entran de tres en tres en las mismas columnas */
.data-change-card{transform:translate3d(0,120vh,0)}
/* Dos filas de tres, con la misma separación que entre columnas */
.data-change-card{
  display:flex;
  flex-direction:column;
  padding:var(--card-pad);
  background:var(--white);
  border-radius:var(--radius);
  will-change:transform;
}
.data-change-card h3{margin:0 0 12px}
.data-change-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-bottom:var(--s-3)}
.data-change-card p{color:var(--g-600);max-width:44ch}
.data-change-card .data-change-source{margin-top:auto;padding-top:18px}
.data-change-number{margin:0}
/* Destacados: el dato clave de cada tarjeta, en Medium y rojo */
.data-change-card p strong{color:var(--red);font-weight:500}

@media (max-width:800px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .data-change-cards{grid-template-columns:1fr;row-gap:var(--gap)}
  .data-change-card{padding:26px}
}

/* =========================================================
   MÓDULO 04 · ZOOM OUT (ahora con scroll normal, sin bloquear)
   ========================================================= */
.zoomout-module{position:relative;height:780vh;background:var(--paper)}
.zoomout-stage{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:var(--paper);
}
.zoomout-canvas{
  position:absolute;
  left:50%;
  top:50%;
  width:300vw;
  height:300vh;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center center;
  z-index:2;
  will-change:transform;
}
.zoomout-photo{position:absolute;margin:0;will-change:transform,opacity}
.zoomout-photo:nth-child(5n+1){--pos:20% 40%}
.zoomout-photo:nth-child(5n+2){--pos:70% 60%}
.zoomout-photo:nth-child(5n+3){--pos:40% 80%}
.zoomout-photo:nth-child(5n+4){--pos:90% 30%}
.zoomout-main{width:calc(100vw - 2 * var(--frame));height:calc(100vh - 2 * var(--frame));left:calc(100vw + var(--frame));top:calc(100vh + var(--frame));z-index:900;--pos:50% 50%}
/* Fotos secundarias: misma proporción que la foto grande (pantalla menos el margen).
   --k es la escala respecto a la grande; cuanto más cerca (--depth), más grande y más arriba */
.zoomout-photo:not(.zoomout-main){
  width:calc(var(--k) * (100vw - 2 * var(--frame)));
  height:calc(var(--k) * (100vh - 2 * var(--frame)));
}
/* Profundidad sin sombras: las capas cercanas llevan un filete del color
   del fondo que las separa de lo que tapan; las lejanas, algo apagadas */
.zoomout-photo{box-shadow:none}
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .zoomout-photo:not(.zoomout-main){display:none}
}
.zoomout-photo.is-near{outline:clamp(3px,.3vw,5px) solid var(--paper)}
.zoomout-photo.is-far{filter:saturate(.75) brightness(.97)}
.zoomout-p1{left:34vw;top:55vh;--k:0.135;--depth:0.25}
.zoomout-p2{left:227vw;top:51vh;--k:0.228;--depth:1.8}
.zoomout-p3{left:47vw;top:15vh;--k:0.156;--depth:0.6}
.zoomout-p4{left:212vw;top:17vh;--k:0.264;--depth:2.4}
.zoomout-p5{left:72vw;top:73vh;--k:0.183;--depth:1.05}
.zoomout-p6{left:192vw;top:74vh;--k:0.132;--depth:0.2}
.zoomout-p7{left:48vw;top:190vh;--k:0.222;--depth:1.7}
.zoomout-p8{left:212vw;top:190vh;--k:0.294;--depth:2.9}
.zoomout-p9{left:72vw;top:220vh;--k:0.147;--depth:0.45}
.zoomout-p10{left:190vw;top:220vh;--k:0.318;--depth:3.3}
.zoomout-p11{left:15vw;top:82vh;--k:0.171;--depth:0.85}
.zoomout-p12{left:255vw;top:80vh;--k:0.246;--depth:2.1}
.zoomout-p13{left:20vw;top:200vh;--k:0.129;--depth:0.15}
.zoomout-p14{left:250vw;top:200vh;--k:0.282;--depth:2.7}
.zoomout-overlay{
  position:absolute;
  z-index:3;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6vw;
  pointer-events:none;
  will-change:opacity,transform;
}
.zoomout-overlay-inner{text-align:center}
.zoomout-overlay-inner{
  width:calc(6 * var(--col) + 5 * var(--gap));
  padding:clamp(32px,4vw,56px);
  background:var(--white);
  border-radius:var(--radius);
}
.zoomout-overlay .zoomout-lead{max-width:22ch;margin:0 auto}
.zoomout-overlay .zoomout-text{max-width:48ch;margin:3vh auto 0;color:var(--g-600)}
.zoomout-overlay .btn-primary{
  margin-top:4vh;
  pointer-events:auto; /* el resto de la capa no captura clics */
}
.zoomout-end-text{
  position:absolute;
  z-index:120;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.06em;
  padding:6vw;
  text-align:center;
  color:var(--red);
  pointer-events:none;
  overflow:hidden;  /* sin visibility:hidden: sigue en el árbol de accesibilidad (la opacidad la lleva main.js) */
}
.zoomout-end-text span{display:block;opacity:0;will-change:transform,opacity}
/* Cifras: mismo centro, misma caja y mismo tamaño display que "Equilibrio…",
   para que el cambio de uno a otro sea una conmutación en el sitio.
   Número y palabra comparten tamaño: solo cambia el color. */
.zoomout-figures{
  position:absolute;
  z-index:121;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6vw;
  text-align:center;
  pointer-events:none;
  transform-origin:50% 50%;  /* sin visibility:hidden: sigue en el árbol de accesibilidad (la opacidad la lleva main.js) */
  will-change:transform,opacity;
}
.zoomout-figures-lead{
  margin:0 0 var(--s-3);
  font-size:var(--fs-h3);
  line-height:1.32;
  letter-spacing:-.01em;
  font-weight:300;
  color:var(--g-600);
}
.zoomout-figures-title{
  margin:0;
  font-size:var(--fs-display);
  line-height:.96;
  letter-spacing:-.035em;
  font-weight:500;
  color:var(--ink);
}
.zoomout-figures-lead,
.zoomout-figures-line{display:block;opacity:0;will-change:transform,opacity}
.zoomout-figures-line + .sr-only + .zoomout-figures-line{margin-top:.06em}
.zoomout-figures-num{color:var(--red)}

@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .zoomout-canvas{width:400vw;height:400vh}
  .zoomout-main{left:150vw;top:150vh;z-index:2000}
}

/* =========================================================
   MÓDULO 06 · LOS 9 PROGRAMAS DEL PLAN MARCO
   Todo el contenido se lee en la página, sin desplegables:
   - Barra fija con los 9 programas agrupados por objetivo:
     marca dónde estás y cuánto llevas del programa actual.
   - Cada programa es un capítulo: portada (número, nombre, frase)
     y cuatro bloques con su etiqueta: Contexto, Finalidad,
     Demanda (con mapa de mercados) y Líneas de actuación.
   - Los bloques aparecen al llegar a ellos con el scroll.
   ========================================================= */
/* La sección se solapa con la última pantalla del zoom (margin-top:-100vh):
   sube por encima de las cifras, que siguen fijas y se apagan al fondo.
   Fondo transparente para que esas cifras se vean entre los bloques. */
.programas{
  position:relative;
  z-index:2;
  margin-top:-100vh;
  background:transparent;
  padding:16vh var(--pad) calc(var(--nav-space) + 10vh);
}
/* ---------- Barra de programas ---------- */
.prog-nav{
  position:sticky;
  top:0;
  z-index:40;
  margin:0 calc(-1 * var(--pad));
  padding:14px var(--pad) 0;
  background:var(--white);
  transition:top .35s var(--ease-out);
}
.has-header .prog-nav{top:var(--header-h)}
.prog-nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-bottom:14px;
}
.prog-nav-current{margin:0;display:flex;flex-direction:column;gap:2px;min-width:0}
.prog-nav-count{font-size:var(--fs-label);font-weight:500;color:var(--red-text)}
.prog-nav-name{
  font-size:var(--fs-p);
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.prog-nav-groups{display:flex;align-items:center;gap:22px;margin:0;padding:0;list-style:none}
.prog-nav-group{display:flex;gap:6px;position:relative}
.prog-nav-group + .prog-nav-group::before{
  content:"";
  position:absolute;
  left:-12px;
  top:8px;
  bottom:8px;
  width:1px;
  background:var(--g-200);
}
.prog-nav-dot{
  width:40px;
  height:40px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid var(--g-300);
  border-radius:50%;
  background:var(--white);
  color:var(--g-600);
  font:inherit;
  font-size:var(--fs-label);
  font-weight:500;
  cursor:pointer;
  transition:background .25s var(--ease-out),border-color .25s var(--ease-out),color .25s var(--ease-out);
}
.prog-nav-dot:hover{border-color:var(--red);color:var(--red)}
.prog-nav-dot.is-done{background:var(--g-100);border-color:var(--g-100);color:var(--ink)}
.prog-nav-dot.is-active{background:var(--red);border-color:var(--red);color:var(--white)}
.prog-nav{border-bottom:1px solid var(--g-200)}

/* ---------- Apertura de cada objetivo ---------- */
.prog-obj{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:var(--white);
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
  row-gap:5vh;
  align-items:end;
  min-height:62vh;
  margin-top:18vh;
  padding:clamp(36px,5vw,80px);
  border-radius:var(--radius);
  background:var(--ink);
  scroll-margin-top:calc(var(--header-h) + 90px);
}
/* Foto de fondo con parallax y capa oscura para leer el texto en blanco */
.prog-obj-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.prog-obj-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.55) 100%);
}
.prog-list > .prog-obj:first-child{margin-top:8vh}
/* Jerarquía del banner: "Objetivo N" manda (tamaño display),
   debajo el nombre del objetivo (H3) y su explicación (párrafo) */
.prog-obj-label{
  margin:0 0 var(--s-3);
  font-size:var(--fs-display);
  line-height:.96;
  letter-spacing:-.035em;
  font-weight:500;
  color:var(--white);
}
.prog-obj-head{grid-column:1 / 8}
.prog-obj-programs{grid-column:8 / 13}
.prog-obj-title{margin:0;max-width:22ch}
.prog-obj-text{margin-top:var(--s-2);max-width:44ch;color:rgba(255,255,255,.88)}
.prog-obj-count{margin:0 0 14px;font-size:var(--fs-label);font-weight:500;color:rgba(255,255,255,.85)}
.prog-obj-programs ul{margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.35)}
.prog-obj-programs li{
  border-bottom:1px solid rgba(255,255,255,.35);
  font-size:var(--fs-p);
  line-height:1.4;
  font-weight:500;
}
/* Cada programa del banner es un enlace que lleva a su capítulo */
.prog-obj-link{
  display:flex;
  align-items:baseline;
  gap:16px;
  padding:var(--s-2) 0;
  color:var(--white);
  text-decoration:none;
}
.prog-obj-num{flex:0 0 auto;font-size:var(--fs-label);color:rgba(255,255,255,.85)}
.prog-obj-name{flex:1 1 auto;border-bottom:1px solid transparent;transition:border-color .2s var(--ease-out)}
.prog-obj-go{width:18px;height:18px;flex:0 0 18px;align-self:center;transition:transform .2s var(--ease-out)}
.prog-obj-link:hover .prog-obj-name,
.prog-obj-link:focus-visible .prog-obj-name{border-bottom-color:currentColor}
.prog-obj-link:hover .prog-obj-go,
.prog-obj-link:focus-visible .prog-obj-go{transform:translateX(4px)}
.prog-obj-link:focus-visible{outline-color:var(--white)}
/* El primer programa de cada objetivo va pegado a su apertura */
.prog-obj + .prog{padding-top:10vh}

/* ---------- Capítulo de cada programa ---------- */
.prog{scroll-margin-top:calc(var(--header-h) + 90px);padding-top:14vh}
.prog-cover{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
  align-items:start;
  margin-bottom:8vh;
}
/* Número del programa reducido (tamaño H2): queda claramente por debajo
   de "Objetivo N" del banner, que es quien contiene a los programas */
.prog-cover-num{grid-column:1 / 3}
.prog-cover-text{grid-column:3 / 13}
.prog-cover-num{
  font-size:var(--fs-h2);
  line-height:1;
  letter-spacing:-.03em;
  font-weight:500;
  color:var(--red);
}
.prog-parent{margin:0 0 var(--s-1);font-size:var(--fs-label);font-weight:500;color:var(--g-600)}
.prog-objective{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 3vh;color:var(--g-600)}
.prog-tag{
  padding:9px 16px;
  border:1px solid var(--ink);
  border-radius:999px;
  color:var(--ink);
  white-space:nowrap;
}
.prog-tag--fill{background:var(--red);border-color:var(--red);color:var(--white)}
.prog-title{margin:0}
.prog-sub{margin-top:2vh;max-width:36ch;color:var(--g-600)}

.prog-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gap);
}
.prog-card{
  grid-column:span 12;
  padding:var(--card-pad);
  border-radius:var(--radius);
  background:var(--g-50);
}
/* Las líneas de actuación son tarjetas por sí mismas: su bloque no lleva caja */
.prog-card--lines{padding:var(--s-4) 0 0;background:transparent;border-radius:0}
.prog-card--context{grid-column:span 7}
.prog-card--purpose{
  grid-column:span 5;
  background:var(--red-dark);
  color:var(--white);
}
.prog-card-label{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 var(--s-3);
  font-size:var(--fs-label);
  font-weight:500;
  color:var(--red-text);
}
.prog-card-label::before{content:"";width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:currentColor}
.prog-card--purpose .prog-card-label{color:var(--white)}
.prog-card p{max-width:62ch}
.prog-card p + p{margin-top:var(--s-2)}
.prog-card--context p{color:var(--g-600)}
.prog-card--context strong{color:var(--red)}
.prog-card--purpose strong{color:var(--white);font-weight:500}
.prog-card--purpose p{color:rgba(255,255,255,.92)}

/* Cifras del contexto */
.prog-figures{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:20px;
  margin-top:4vh;
  padding-top:3vh;
  border-top:1px solid var(--g-200);
}
.prog-figure strong{display:block;font-size:var(--fs-h2);line-height:1;font-weight:500;color:var(--red)}
.prog-figure span{display:block;margin-top:8px;font-size:var(--fs-p);line-height:1.4;color:var(--g-600)}
.prog-figure .prog-bar{display:block;height:10px;margin-top:14px;border-radius:5px;background:var(--g-200);overflow:hidden}
.prog-figure .prog-bar i{display:block;height:100%;width:var(--w);border-radius:5px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s var(--ease-out) .3s}
.prog-card.is-in .prog-bar i{transform:none}

/* Demanda + mapa */
.prog-card--map{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(24px,4vw,64px);
  align-items:center;
}
.prog-markets{display:flex;flex-wrap:wrap;gap:8px;margin:3vh 0 0;padding:0;list-style:none}
.prog-markets li{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:var(--white);
}
.prog-markets li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--red)}
/* Ámbito España: España va teñida en rojo en el mapa, como los mercados */
.prog-map--home .spain-ring{stroke:var(--red)}
.prog-map{margin:0}
.prog-map svg{display:block;width:100%;height:auto;overflow:visible}
.prog-map .map-hl{opacity:0;transition:opacity 1s var(--ease-out) .25s}
.prog-card.is-in .map-hl{opacity:1}
.prog-map .spain-dot{fill:var(--red-dark)}
.prog-map .spain-ring{fill:none;stroke:var(--red-dark);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:spain-pulse 2.4s ease-out infinite}
@keyframes spain-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}

/* Líneas de actuación */
.prog-lines{
  display:grid;
  grid-template-columns:repeat(var(--n,3),minmax(0,1fr));
  gap:var(--gap);
  margin:0;
  padding:0;
  list-style:none;
}
.prog-line{
  display:flex;
  flex-direction:column;
  gap:18px;
  height:100%;
  padding:28px;
  border-radius:var(--radius);
  background:var(--g-50);
  color:var(--ink);
  text-decoration:none;
  font-size:var(--fs-p);
  line-height:1.5;
}
.prog-line svg{width:28px;height:28px;flex:0 0 28px;color:var(--red)}
.prog-line strong{font-weight:500}
a.prog-line{transition:background .2s var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out)}
a.prog-line:hover{background:var(--red);color:var(--white)}
a.prog-line:hover svg{color:var(--white)}
.prog-line-more{display:flex;align-items:center;gap:8px;margin-top:auto;font-weight:500;color:var(--red)}
a.prog-line:hover .prog-line-more{color:var(--white)}
.prog-line-more .icon-ext{width:16px;height:16px;flex:0 0 16px}

/* Aparición al llegar con el scroll */
.reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity .6s var(--ease-out),transform var(--t-reveal) var(--ease-out);transition-delay:var(--d,0s)}
.reveal.is-in{opacity:1;transform:none}

@media (max-width:900px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .prog-nav-inner{flex-direction:column;align-items:stretch;gap:10px}
  .prog-nav-current{flex-direction:column;gap:0}
  .prog-nav-name{font-size:var(--fs-p)}
  .prog-nav-groups{gap:12px;justify-content:space-between}
  .prog-nav-group{gap:4px}
  .prog-nav-group + .prog-nav-group::before{left:-7px}
  .prog-nav-dot{width:32px;height:32px}
  .prog-cover{grid-template-columns:1fr;gap:3vh}
  .prog-card--context,.prog-card--purpose{grid-column:span 12}
  .prog-card--map{grid-template-columns:1fr}
  .prog-obj{grid-template-columns:1fr;margin-top:12vh;min-height:0}
}
@media (max-width:400px){
  .prog-nav-groups{gap:8px}
  .prog-nav-group + .prog-nav-group::before{display:none}
  .prog-nav-dot{width:30px;height:30px}
}

/* =========================================================
   MÓDULO 07 · CIERRE · No es solo crecer. Es crecer mejor.
   Los círculos se quedan fijos en el centro y cambian de
   composición mientras los textos pasan con el scroll.
   ========================================================= */
.cierre{position:relative;height:1060vh;background:var(--paper)}
.cierre-stage{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  background:var(--paper);
  --orb:min(calc(4 * var(--col) + 3 * var(--gap)),60vh);
}
.cierre-stage::before{
  content:"";
  position:absolute;
  inset:var(--frame);
  border-radius:var(--radius);
  background:var(--red-dark);
}
.cierre-stage{color:var(--white)}
.cierre-orb{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--orb);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none;
  will-change:opacity;
}
.cierre-orb svg{width:100%;height:100%;overflow:visible}
/* Piezas de la infografía (main.js · 07 CIERRE). Todo en blanco sobre el
   rojo oscuro: la intensidad la da la opacidad que fija el scroll. */
.cierre-orb :is(circle,line){vector-effect:non-scaling-stroke}
.cierre-orb .c-core{fill:none;stroke:var(--white);stroke-width:2.5}       /* núcleo: lo destacado */
.cierre-orb .c-ring{fill:none;stroke:var(--white);stroke-width:1.25}      /* el valor que se expande */
.cierre-orb .c-pulse{fill:none;stroke:var(--white);stroke-width:1.5}      /* onda que llega a todos */
.cierre-orb .c-dot{fill:var(--white);stroke:var(--white);stroke-width:1.25} /* personas: se rellenan al encenderse */
.cierre-orb .c-axis{stroke:var(--white);stroke-width:1.25}                /* eje del tiempo */
.cierre-orb .c-future{fill:none;stroke:var(--white);stroke-width:1.25;stroke-dasharray:3 7;stroke-linecap:round} /* lo que está por llegar */
.cierre-orb .c-seed{fill:none;stroke:var(--white);stroke-width:2.5}       /* réplica del núcleo: lo que nos hace únicos */
.cierre-title,
.cierre-item,
.cierre-final p{text-shadow:0 0 14px var(--red-dark),0 0 4px var(--red-dark)}
.cierre-title{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  width:calc(10 * var(--col) + 9 * var(--gap));
  transform:translate(-50%,-50%);
  text-align:center;
  will-change:transform,opacity;
}
.cierre-title h2{margin:0}
.cierre-list{list-style:none;margin:0;padding:0}
.cierre-item{
  position:absolute;
  z-index:3;
  top:0;
  width:calc(4 * var(--col) + 3 * var(--gap));
  opacity:0;
  /* sin visibility:hidden: sigue en el árbol de accesibilidad (la opacidad la lleva main.js) */
  will-change:transform,opacity;
}
.cierre-item--left{left:var(--pad)}
.cierre-item--right{right:var(--pad)}
.cierre-final{
  position:absolute;
  z-index:3;
  left:50%;
  top:0;
  width:calc(6 * var(--col) + 5 * var(--gap));
  text-align:center;
  opacity:0;
  /* sin visibility:hidden: sigue en el árbol de accesibilidad (la opacidad la lleva main.js) */
  pointer-events:none;
  will-change:transform,opacity;
}
/* Desarrollo a tamaño de párrafo; la idea va encima a tamaño H3 */
.cierre-final p{margin:0 auto;max-width:44ch;font-size:var(--fs-p);line-height:1.55;font-weight:400;opacity:.92}
/* Jerarquía del mensaje final: la idea (H2, Medium) y su desarrollo (frase,
   Light) con la palanca destacada en Medium */
.cierre-final-lead{
  display:block;
  max-width:26ch;
  margin:0 auto 2vh;
  font-size:var(--fs-h3);
  line-height:1.2;
  letter-spacing:-.01em;
  font-weight:500;
  text-wrap:balance;
}
.cierre-final p strong{font-weight:500}
.cierre-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:5vh;
}
.cierre-actions .btn-primary{margin-top:0;background:var(--white);color:var(--red-dark)}
.cierre-actions .btn-primary:hover{background:var(--g-100)}
.cierre .btn-secondary{background:transparent;border-color:rgba(255,255,255,.7);color:var(--white)}
.cierre .btn-secondary:hover{border-color:var(--white);color:var(--white);background:rgba(255,255,255,.08)}
.cierre .btn-secondary .btn-meta{font-weight:400;opacity:1}
.btn-secondary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 23px;
  border:1px solid var(--ink);
  border-radius:999px;
  background:var(--white);
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .2s var(--ease-out),color .2s var(--ease-out);
}
.btn-secondary:hover{border-color:var(--red);color:var(--red)}
.btn-secondary svg{width:16px;height:16px;flex:0 0 16px}
.btn-secondary .btn-meta{font-weight:400;opacity:1}

@media (max-width:900px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .cierre-stage{--orb:min(82vw,60vh)}
  .cierre-item{left:50%;right:auto;width:86vw;text-align:center}
  .cierre-actions{flex-direction:column;align-items:center}
  .cierre-actions a{width:100%;max-width:360px;justify-content:center}
  .btn-secondary{flex-wrap:wrap;row-gap:4px;padding:13px 16px}
}

/* =========================================================
   MÓDULO 08 · NEWSLETTER
   ========================================================= */
.newsletter{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:12vh var(--pad) calc(var(--nav-space) + 10vh);
  overflow:hidden;
  background:var(--paper);
}
.newsletter-photo{position:absolute;inset:var(--frame);--pos:40% 50%}
.newsletter-panel{
  position:relative;
  z-index:2;
  width:calc(6 * var(--col) + 5 * var(--gap));
  padding:clamp(32px,4.4vw,64px);
  background:var(--white);
  border-radius:var(--radius);
}
.newsletter-panel h2{margin:0}
.newsletter-intro{margin-top:14px;color:var(--g-600);max-width:46ch}
.nl-cta{margin-top:4vh}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  padding:9vh var(--pad) calc(var(--nav-space) + 5vh);
  border-top:1px solid var(--g-200);
  background:var(--white);
}
.footer-inner{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:5vh var(--gap);
  align-items:start;
}
/* Tres columnas arriba (marca · nuestras webs · redes) y debajo, tras
   un filete, los datos del Instituto */
.footer-brand{grid-column:1 / 5}
.footer-col--webs{grid-column:5 / 9}
.footer-col--social{grid-column:9 / 13}
.footer-col--legal{grid-column:1 / -1;padding-top:4vh;border-top:1px solid var(--g-200)}
.footer-list--legal{display:flex;flex-wrap:wrap;gap:10px 32px}
.footer-name{font-size:var(--fs-h3);line-height:1.2;font-weight:500;color:var(--red)}
.footer-plan{margin-top:6px;font-size:var(--fs-p);color:var(--g-600)}
.footer-heading{margin:0 0 2vh;font-size:var(--fs-label);line-height:1.3;font-weight:500;color:var(--g-600)}
.footer-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer-list--social{grid-template-columns:repeat(2,max-content);column-gap:32px}
/* padding-block: deja los enlaces del pie por encima de los 24 px de alto
   que pide WCAG 2.2 (criterio 2.5.8, tamaño del objetivo) */
.site-footer a{text-decoration:none;color:var(--ink);display:inline-block;padding-block:2px}
.site-footer a:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.footer-ext{display:inline-block;margin-left:.3em;font-size:.8em;color:var(--g-600);transition:transform var(--t-ui) var(--ease-out)}
.site-footer a:hover .footer-ext{color:var(--red);transform:translate(2px,-2px)}
.footer-copy{grid-column:1 / -1;padding-top:3vh;font-size:var(--fs-label);line-height:1.5;color:var(--g-600)}
@media (max-width:900px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .footer-brand,.footer-col--webs,.footer-col--social{grid-column:1 / -1}
}
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .footer-inner{grid-template-columns:1fr}
  .footer-list--legal{gap:10px 24px}
}

@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .nl-cta{width:100%;justify-content:center}
}

/* Móvil: la retícula se reduce a una sola columna de lectura */
@media (max-width:900px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .prog-cover-num,.prog-cover-text,
  .prog-obj-head,.prog-obj-programs,
  .footer-brand{grid-column:1 / -1}
  .prog-lines{grid-template-columns:1fr}
}
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .copy,.camino-beat,.title,.data-change-title,.zoomout-overlay-inner,.newsletter-panel,
  .dest-intro,.cierre-item,.cierre-final,.cierre-title{width:calc(100vw - 2 * var(--pad))}
  .dest-cards{left:var(--pad);right:var(--pad);width:auto}
}

@media (prefers-reduced-motion:reduce){
  .btn-secondary,
  .prog-nav,.prog-nav-dot,.step-dots span,.prog-bar i,.map-hl,
  .dest-bg-layer,.site-header,.download-btn,.anchor-nav a{transition:none}
  .reveal{opacity:1;transform:none;transition:none}
  .spain-ring,.dest-marker-ring{animation:none}
  .opening-claim{animation:none}
  .scroll-cue svg{animation:none}
}


/* =========================================================
   PULIDO · estados, coreografía y detalle
   Refina interacción y movimiento sin tocar colores, tipografía,
   módulos ni textos. Todo usa los tokens de movimiento de :root.
   ========================================================= */

/* ---------- Base ---------- */
html{color-scheme:light}
::selection{background:var(--red);color:var(--white)}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* Cifras con dígitos de ancho fijo: no bailan al contar ni al alinearse */
.pmat-figure strong,
.prog-figure strong,
.prog-nav-count{font-variant-numeric:tabular-nums}

/* ---------- Foco visible coherente ----------
   Anillo rojo por defecto (el contorno sigue la forma de cada elemento);
   blanco sobre fotos y fondos rojo oscuro. */
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--red);outline-offset:4px}
.cierre :focus-visible,
.prog-obj :focus-visible,
.header-over-hero .site-header :focus-visible,
.opening :focus-visible{outline-color:var(--white)}

/* ---------- Botones: respuesta al pasar y al pulsar ---------- */
.btn-primary,
.btn-secondary,
.download-btn{
  transition:background-color var(--t-hover) var(--ease-out),
             border-color var(--t-hover) var(--ease-out),
             color var(--t-hover) var(--ease-out),
             transform var(--t-press) var(--ease-out);
}
.btn-primary:active,
.btn-secondary:active,
.download-btn:active{transform:scale(.97)}
/* La flecha de descarga apunta hacia abajo al pasar por encima */
.download-btn svg,
.btn-secondary svg{transition:transform var(--t-ui) var(--ease-out)}
.download-btn:hover svg,
.btn-secondary:hover svg{transform:translateY(2px)}

/* ---------- Círculo de scroll de la portada ----------
   (scale individual: no choca con el transform de la intro) */
.scroll-cue{transition:scale var(--t-press) var(--ease-out),background-color var(--t-hover) var(--ease-out),opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.scroll-cue:hover{background:var(--g-100)}
.scroll-cue:active{scale:.94}

/* ---------- Menú inferior ---------- */
.anchor-nav a{transition:background-color var(--t-hover) var(--ease-out),color var(--t-hover) var(--ease-out),transform var(--t-press) var(--ease-out)}
.anchor-nav a:active{transform:scale(.96)}
.anchor-nav a[aria-current="true"]:hover{background:var(--red);color:var(--white)}

/* ---------- Barra de programas ---------- */
.prog-nav-dot{transition:background-color var(--t-hover) var(--ease-out),border-color var(--t-hover) var(--ease-out),color var(--t-hover) var(--ease-out),transform var(--t-press) var(--ease-out)}
.prog-nav-dot:active{transform:scale(.92)}
.prog-nav-dot.is-active:hover{color:var(--white)}

/* ---------- Enlaces de líneas de actuación ("Ver más") ---------- */
a.prog-line{transition:background-color var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out),border-color var(--t-ui) var(--ease-out),transform var(--t-press) var(--ease-out)}
a.prog-line:active{transform:scale(.985)}
.prog-line-more .icon-ext{transition:transform var(--t-ui) var(--ease-out)}
a.prog-line:hover .prog-line-more .icon-ext{transform:translate(2px,-2px)}

/* ---------- Enlaces de los banners de objetivo ---------- */
.prog-obj-name{transition:border-color var(--t-hover) var(--ease-out)}
.prog-obj-go{transition:transform var(--t-ui) var(--ease-out)}

/* ---------- Enlaces de texto ---------- */
.pmat-link,
.site-footer a{transition:color var(--t-hover) var(--ease-out),border-color var(--t-hover) var(--ease-out)}

/* =========================================================
   COREOGRAFÍA DE ENTRADA (objetivos y programas)
   Las partes de cada bloque llegan en orden de lectura, escalonadas,
   en vez de un único fundido por bloque.
   ========================================================= */
/* Portada de programa: número, objetivo, título y entradilla */
.prog-cover.reveal{opacity:1;transform:none}
.prog-cover .prog-cover-num,
.prog-cover-text > *{opacity:0;transform:translate3d(0,24px,0);transition:opacity .6s var(--ease-out),transform var(--t-reveal) var(--ease-out)}
.prog-cover.is-in .prog-cover-num,
.prog-cover.is-in .prog-cover-text > *{opacity:1;transform:none}
.prog-cover-text > :nth-child(1){transition-delay:.07s}
.prog-cover-text > :nth-child(2){transition-delay:.14s}
.prog-cover-text > :nth-child(3){transition-delay:.22s}

/* Banner de objetivo: la foto se asienta desde una escala leve y
   después entran etiqueta, título, texto y cada programa */
.prog-obj.reveal{transform:scale(.97);transition:opacity .7s var(--ease-out),transform 1.1s var(--ease-soft)}
.prog-obj.reveal.is-in{transform:none}
.prog-obj.reveal .prog-obj-head > *,
.prog-obj.reveal .prog-obj-count,
.prog-obj.reveal .prog-obj-programs li{opacity:0;transform:translate3d(0,22px,0);transition:opacity .6s var(--ease-out),transform var(--t-reveal) var(--ease-out)}
.prog-obj.reveal.is-in .prog-obj-head > *,
.prog-obj.reveal.is-in .prog-obj-count,
.prog-obj.reveal.is-in .prog-obj-programs li{opacity:1;transform:none}
.prog-obj.reveal .prog-obj-head > :nth-child(1){transition-delay:.15s}
.prog-obj.reveal .prog-obj-head > :nth-child(2){transition-delay:.23s}
.prog-obj.reveal .prog-obj-head > :nth-child(3){transition-delay:.31s}
.prog-obj.reveal .prog-obj-count{transition-delay:.3s}
.prog-obj.reveal .prog-obj-programs li:nth-child(1){transition-delay:.38s}
.prog-obj.reveal .prog-obj-programs li:nth-child(2){transition-delay:.46s}
.prog-obj.reveal .prog-obj-programs li:nth-child(3){transition-delay:.54s}

/* Líneas de actuación: llegan fila a fila */
.prog-card--lines.reveal .prog-lines > li{opacity:0;transform:translate3d(0,18px,0);transition:opacity .5s var(--ease-out),transform .7s var(--ease-out)}
.prog-card--lines.reveal.is-in .prog-lines > li{opacity:1;transform:none}
.prog-card--lines .prog-lines > li:nth-child(1){transition-delay:.12s}
.prog-card--lines .prog-lines > li:nth-child(2){transition-delay:.2s}
.prog-card--lines .prog-lines > li:nth-child(3){transition-delay:.28s}
.prog-card--lines .prog-lines > li:nth-child(4){transition-delay:.36s}
.prog-card--lines .prog-lines > li:nth-child(5){transition-delay:.44s}
.prog-card--lines .prog-lines > li:nth-child(6){transition-delay:.52s}

/* ---------- Movimiento reducido: contenido visible, sin recorrido ---------- */
@media (prefers-reduced-motion: reduce){
  .prog-cover .prog-cover-num,
  .prog-cover-text > *,
  .prog-obj.reveal,
  .prog-obj.reveal .prog-obj-head > *,
  .prog-obj.reveal .prog-obj-count,
  .prog-obj.reveal .prog-obj-programs li,
  .prog-card--lines.reveal .prog-lines > li{opacity:1;transform:none;transition:none}
  .prog-figure .prog-bar i{transform:none;transition:none}
  .btn-primary:active,.btn-secondary:active,.download-btn:active,
  .anchor-nav a:active,.prog-nav-dot:active,a.prog-line:active{transform:none}
}


/* =========================================================
   JERARQUÍA DE SECCIONES PRINCIPALES
   Los titulares de las secciones del menú inferior van a tamaño display
   (como "De la promoción…" y "5 objetivos / 9 programas"); los titulares
   de módulo se quedan en H2. Así "Antecedentes / origen" manda sobre
   "Otras formas de pensar…".
   ========================================================= */
.section-title{
  font-size:var(--fs-display);
  line-height:.96;
  letter-spacing:-.035em;
  font-weight:500;
  max-width:none;
}

/* "Otras formas de pensar…": el texto de las propuestas va debajo del
   titular, como entradilla (no como antetítulo) */
.dest-intro-sub{
  margin:2.4vh 0 0;
  max-width:34ch;
  font-size:var(--fs-p);
  line-height:1.5;
  color:var(--white);
  opacity:.86;
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */
/* Botón para pausar los vídeos de fondo (WCAG 2.2.2), junto a "Descargar" */
.site-header-actions{display:flex;align-items:center;gap:10px}
.video-toggle{
  flex:0 0 auto;
  width:44px;
  height:44px;            /* objetivo táctil mínimo de 44 × 44 px */
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid var(--g-200);
  border-radius:50%;
  background:var(--white);
  color:var(--ink);
  cursor:pointer;
  transition:background-color var(--t-hover) var(--ease-out),border-color var(--t-hover) var(--ease-out),color var(--t-hover) var(--ease-out),transform var(--t-press) var(--ease-out);
}
.video-toggle svg{width:14px;height:14px;fill:currentColor}
.video-toggle .icon-play,
/* El icono sigue al estado (clase is-paused que pone main.js): pausa mientras
   los vídeos se reproducen, "play" cuando están parados */
.video-toggle.is-paused .icon-pause{display:none}
.video-toggle.is-paused .icon-play{display:block}
.video-toggle:hover{background:var(--g-100)}
.video-toggle:active{transform:scale(.94)}
.header-over-hero .video-toggle{border-color:transparent;background:var(--white);color:var(--red-dark)}
.header-over-hero .video-toggle:hover{background:var(--g-100)}

/* Las etiquetas de los paneles 2 y 3 ahora son h3: conservan su aspecto */
h3.pmat-kicker{font-weight:inherit}

/* Contenedores recortados que tienen enlaces o botones dentro: con
   overflow:hidden el navegador los desplaza al enfocar un elemento oculto
   y descoloca la composición; clip recorta igual sin permitirlo */
@supports (overflow:clip){
  .pmat-stage,.zoomout-stage,.cierre-stage,.prog-obj{overflow:clip}
}

/* Contenido presente pero aún sin entrar en escena: no captura el ratón */
.copy,.cierre-item,.zoomout-end-text,.zoomout-figures{pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .video-toggle:active{transform:none}
}

/* =========================================================
   MODO LINEAL
   ---------------------------------------------------------
   Un solo mecanismo para tres casos (README 2.1, 2.5 y 2.9):
   · zoom alto o pantalla baja (WCAG 1.4.10 Reflow): con 400 % de
     zoom la ventana equivale a 320 × 256 px y los escenarios de
     100vh con overflow recortan el texto sin poder leerlo;
   · "Reducir movimiento" activado en el sistema;
   · la página se lee de arriba abajo, como un documento.

   Lo activa main.js con la clase .is-linear (media query
   "prefers-reduced-motion: reduce, (max-height: 520px)").
   Los !important son necesarios: ganan a los estilos en línea
   que deja el motor de scroll.

   PENDIENTE DE DISEÑO: esto deja la página legible, pero hay que
   decidir cómo se ve cada módulo en lineal (paneles de
   Antecedentes apilados, fotos de "Algo está cambiando" en
   rejilla, el zoom como una sola foto con su texto).
   ========================================================= */
.is-linear .camino,
.is-linear .story,
.is-linear .pmat,
.is-linear .data-change-module,
.is-linear .zoomout-module,
.is-linear .cierre{height:auto !important}

.is-linear [class*="-stage"],
.is-linear .stage{position:relative;height:auto;overflow:visible}

.is-linear .copy,
.is-linear .camino-beat,
.is-linear .title,
.is-linear .cierre-item,
.is-linear .cierre-final,
.is-linear .cierre-title,
.is-linear .zoomout-overlay,
.is-linear .dest-intro,
.is-linear .data-change-card,
.is-linear .opening-content > *{
  position:static;
  opacity:1 !important;
  transform:none !important;
}

.is-linear .pmat-track{flex-direction:column;transform:none !important}
.is-linear .pmat-panel{position:relative;height:auto}

/* Secuencias horizontales: se leen apiladas */
.is-linear .data-change-viewport{overflow:visible}
.is-linear .data-change-cards{display:grid;grid-template-columns:1fr;gap:var(--s-3);transform:none !important}

/* Nada de scroll recortado ni capas superpuestas */
.is-linear .pmat-stage,
.is-linear .zoomout-stage,
.is-linear .cierre-stage,
.is-linear .prog-obj{overflow:visible}

/* Sin texto blanco sobre nada: en lineal los bloques van sobre papel */
.is-linear .copy,
.is-linear .cierre-item,
.is-linear .zoomout-end-text,
.is-linear .zoomout-figures{pointer-events:auto}

/* Decoración que en lineal estorba o no se entiende sin movimiento */
.is-linear .grid-overlay,
.is-linear .scroll-cue,
.is-linear .pmat-steps{display:none}

/* La intro no se ejecuta en lineal */
.is-linear.intro-start,
.is-linear .intro-start{opacity:1}

/* ---------- Modo lineal · capas decorativas ----------
   Las fotos y vídeos que solo existen para la animación son decorativos
   (aria-hidden) y al perder el escenario se superponen al texto. En lineal
   se retiran y se deja una sola imagen por módulo, a tamaño fijo.
   PENDIENTE DE DISEÑO: decidir el tratamiento definitivo de cada módulo. */
.is-linear .story .card,
.is-linear .final,
.is-linear .dest-bg,
.is-linear .zoomout-photo:not(.zoomout-main),
.is-linear .zoomout-end-text,
.is-linear .pmat-art{display:none}

.is-linear .zoomout-canvas{position:relative;inset:auto;width:100%;transform:none !important}
.is-linear .zoomout-main{
  position:relative;inset:auto;left:auto;top:auto;
  width:100%;height:46vh;min-height:220px;margin-bottom:var(--s-3);
  transform:none !important;
}
.is-linear .parallax-img{position:absolute;inset:0;transform:none !important}

/* Bloques que el motor apila unos sobre otros: en lineal van seguidos */
.is-linear .camino-beat,
.is-linear .copy,
.is-linear .cierre-item,
.is-linear .cierre-final,
.is-linear .zoomout-figures{
  position:static;width:auto;max-width:100%;margin:0 auto var(--s-3);
}
.is-linear .destinations,
.is-linear .dest-cards,
.is-linear .dest-card{position:relative;inset:auto;transform:none !important;opacity:1 !important}
.is-linear .dest-cards{display:grid;grid-template-columns:1fr;gap:var(--s-3)}

/* Nada que dependa de una altura de pantalla fija */
.is-linear .opening-stage,
.is-linear .camino-stage,
.is-linear .data-change-stage,
.is-linear .pmat-stage,
.is-linear .zoomout-stage,
.is-linear .cierre-stage{min-height:0;height:auto;padding-block:8vh}
.is-linear .opening,
.is-linear .programas{height:auto}
.is-linear .opening-frame{position:relative;inset:auto;height:60vh;min-height:260px}
.is-linear .opening-photo{position:relative;left:auto;top:auto;transform:none !important;width:100%;height:100%}

/* ---------- Modo lineal · contenedores centrados ----------
   Los bloques que el motor coloca con left:50% + translate(-50%) quedaban
   medio fuera de pantalla al soltar el escenario. En lineal van en flujo. */
.is-linear .opening-frame,
.is-linear .opening-content,
.is-linear .zoomout-overlay{
  position:relative;left:auto;right:auto;top:auto;bottom:auto;
  width:auto;max-width:100%;transform:none !important;
}
.is-linear .opening-content{padding:var(--s-3) var(--pad) 0;margin-inline:auto}
.is-linear .zoomout-overlay{padding:var(--s-3) var(--pad)}
.is-linear .opening-stage{display:flex;flex-direction:column}

/* Barra de programas en pantallas estrechas: los 9 puntos se reparten en
   varias filas en vez de salirse de la pantalla (WCAG 1.4.10 Reflow) */
@media (max-width:480px){
  .prog-nav-inner{flex-direction:column;align-items:flex-start;gap:8px}
  .prog-nav-groups{flex-wrap:wrap;gap:8px 16px}
  .prog-nav-group + .prog-nav-group::before{display:none}
}

.is-linear .zoomout-overlay-inner{
  width:100%;max-width:100%;box-sizing:border-box;padding:clamp(20px,4vw,40px);
}
.is-linear .btn-primary,
.is-linear .btn-secondary{max-width:100%;box-sizing:border-box}

/* ---------- Modo lineal · texto que estaba sobre foto o vídeo ----------
   Sin el escenario, estos bloques quedan sobre papel blanco y el texto
   blanco deja de verse. En lineal pasan a tinta. */
.is-linear .opening-content,
.is-linear .opening-claim,
.is-linear .opening-text,
.is-linear .dest-intro,
.is-linear .dest-intro .eyebrow{color:var(--ink)}
.is-linear .opening-claim,
.is-linear .opening-text{text-shadow:none}
.is-linear .opening-text{opacity:1 !important}
.is-linear .dest-intro{width:auto;max-width:100%}
.is-linear .opening-veil{display:none}

/* ---------- Modo lineal · el menú deja de ser una barra fija ----------
   Con la pantalla baja (zoom alto), una barra fija abajo se come un tercio
   del alto disponible. En lineal el menú pasa a ser un índice al principio
   del documento y se recupera todo el espacio de lectura. */
.is-linear{--nav-space:16px}
.is-linear .anchor-nav{
  position:static;transform:none;left:auto;right:auto;bottom:auto;
  max-width:100%;margin:calc(var(--header-h) + 12px) auto 0;
  opacity:1 !important;translate:none !important;pointer-events:auto;
}
.is-linear .page-progress{display:none}


/* =========================================================
   MÓVIL · OPTIMIZACIÓN (≤ 700 px)
   Un único bloque al final: gana por orden, sin subir la
   especificidad de nada. Agrupado por tipo de cambio.
   ========================================================= */
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){

  /* ---------- 1 · Tipografía: escala móvil ----------
     Bajada ligera de todos los tokens. Se mantiene la regla del sistema
     (ningún texto por debajo de 16 px), altura de línea ≥ 1,5 en párrafos
     y los mismos colores, así que el contraste AA no cambia. Los tamaños
     siguen en px/vw sin bloquear el zoom (WCAG 1.4.4). */
  :root{
    --fs-display:clamp(2.125rem, calc(9.6vw * var(--fs-k)), 2.5rem);   /* antes 44 px */
    --fs-h2:clamp(1.625rem, calc(7.2vw * var(--fs-k)), 1.875rem);        /* antes 32 px */
    --fs-h3:clamp(1.1875rem, calc(5.4vw * var(--fs-k)), 1.3125rem);        /* antes 24 px */
    --fs-p:1rem;                             /* antes 18 px */
    --fs-label:1rem;
    --fs-figure:clamp(4.5rem, calc(20vw * var(--fs-k)), 6rem);
    --card-pad:24px;
    /* Módulos a sangre: sin margen lateral, conservan el radio */
    --frame:0px;
  }
  /* Frases destacadas: un punto más de interlínea al bajar el tamaño */
  .copy p,.opening-text,.camino-text,.dest-card p,.pmat-hero-text,
  .pmat-plan-text,.pmat-statement,.pmat-priorities li,.prog-sub,.cierre-final p{line-height:1.38}
  .zoomout-text,.newsletter-intro,.pmat-strategy-side p,.prog-obj-text,.prog-card p,
  .data-change-card p,.prog-line{line-height:1.55}

  /* ---------- 2 · Antecedentes / origen · pantallas 2 y 3 ----------
     Eran frases a tamaño H3 (24 px, Light): demasiado grandes para un
     panel de una sola pantalla. Pasan a 18 px; las cifras, a 30 px. */
  .pmat-plan-text,
  .pmat-statement,
  .pmat-priorities li{font-size:1.125rem;line-height:1.4}
  .pmat-plan-text{max-width:none}
  .pmat-strategy-side p{font-size:1rem}
  .pmat-figure strong{font-size:1.875rem;line-height:1}
  .pmat-figure span{font-size:1rem;margin-top:6px}
  .pmat-figures{gap:12px}
  .pmat-priorities li{padding:1.4vh 0}
  .pmat-link{margin-top:2.4vh}
  /* Carrusel: los gestos verticales siguen desplazando la página */
  .pmat-stage{touch-action:pan-y pinch-zoom}

  /* ---------- 3 · Scroll e interacción ---------- */
  /* La intro ya no bloquea la página: el primer gesto la termina (main.js) */
  .is-intro{overflow:visible}
  /* Menú inferior: desliza en horizontal sin bloquear el vertical, y el
     rebote del carrusel no arrastra la página ni el historial */
  .anchor-nav{touch-action:pan-x pan-y;overscroll-behavior-x:contain}

  /* ---------- 4 · Otras formas de pensar: sin mapa de España ---------- */
  .dest-card-map{display:none}
  .dest-card{min-height:0;justify-content:flex-start;gap:20px}

  /* ---------- 5 · Módulos a sangre (100 % del ancho) ----------
     --frame:0 ya lleva a sangre portada, destinos, datos, zoom, cierre y
     newsletter. Los banners de objetivo viven dentro del padding de la
     sección: se sacan con margen negativo. El radio se conserva. */
  .prog-obj{margin-inline:calc(-1 * var(--pad));padding:36px var(--pad)}

  /* ---------- 6 · "Vamos a aprovechar este impulso" ---------- */
  /* Foto centrada: el lienzo mide 400vw × 400vh y la foto ocupa una
     pantalla, así que va en 150vw/150vh más el margen (antes faltaba el
     margen y quedaba desplazada). Sin parallax vertical: queda fija y
     centrada mientras se lee la tarjeta. */
  .zoomout-main{left:calc(150vw + var(--frame));top:calc(150vh + var(--frame))}
  /* Márgenes alineados con el sistema: --pad fuera, --card-pad dentro y
     la escala --s-* entre elementos (antes 6vw, 4vw y vh sueltos) */
  .zoomout-overlay{padding:0 var(--pad)}
  .zoomout-overlay-inner{width:100%;padding:var(--card-pad)}
  .zoomout-overlay .zoomout-text{margin-top:var(--s-2)}
  .zoomout-overlay .btn-primary{
    margin-top:var(--s-3);
    width:100%;
    justify-content:center;
    text-align:center;
    white-space:normal;          /* el texto del botón no desborda la tarjeta */
  }

  /* ---------- 7 · Espacios verticales más compactos ---------- */
  .programas{padding:10vh var(--pad) calc(var(--nav-space) + 4vh)}
  .prog-list > .prog-obj:first-child{margin-top:4vh}
  .prog-obj{margin-top:6vh}
  .prog{padding-top:8vh}
  .prog-obj + .prog{padding-top:5vh}
  .prog-cover{margin-bottom:var(--s-3);gap:var(--s-1)}
  .prog-card--lines{padding-top:var(--s-3)}
  .prog-grid{gap:12px}
  .prog-figures{margin-top:var(--s-3);padding-top:var(--s-3)}
  .newsletter{min-height:80vh;padding:6vh var(--pad) calc(var(--nav-space) + 4vh)}
  .nl-cta{margin-top:var(--s-3)}
  .site-footer{padding:6vh var(--pad) calc(var(--nav-space) + 3vh)}
  .footer-inner{gap:4vh var(--gap)}
}


/* =========================================================
   MÓVIL · REESTRUCTURACIÓN (≤ 700 px)
   Escritorio intacto: fuera de la media query solo se ocultan los
   dos elementos nuevos del HTML, que en escritorio no existían.
   ========================================================= */
.brand-short,
.mobile-merge{display:none}

@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){

  /* ---------- 1 · Header y navegación ---------- */
  .brand-long{display:none}
  .brand-short{display:inline}
  /* Sin menú inferior: se recupera el espacio que le reservaban los módulos */
  .anchor-nav{display:none}
  :root{--nav-space:24px}

  /* ---------- 2 · Módulos a sangre: rectos, de borde a borde ---------- */
  .opening-frame,
  .dest-bg,
  .data-change-stage::before,
  .data-change-viewport,
  .zoomout-main,
  .cierre-stage::before,
  .newsletter-photo,
  .prog-obj{border-radius:0}

  /* ---------- 3A · Portada: todo visible al entrar ---------- */
  .opening-content .opening-text{opacity:1}
  .intro-done .opening-claim{animation:none}

  /* ---------- 3B · El camino: una sola pantalla y un solo párrafo ---------- */
  .mobile-merge{display:inline}
  .camino-beat--b{display:none}

  /* ---------- 3C · Algo está cambiando: un solo texto integrado ---------- */
  #copy2{display:none}
  .copy p{font-size:1.125rem;line-height:1.42}

  /* ---------- 4A · Otras formas de pensar: tarjetas que se relevan ----------
     Todas en el mismo sitio y con la misma altura; main.js hace el fundido
     entre una y otra. Número arriba, historia abajo, con aire entre ambos. */
  .dest-cards{
    top:auto;
    bottom:var(--s-3);
    height:min(54vh,460px);
    display:block;
    gap:0;
    will-change:auto;
  }
  .dest-card{
    position:absolute;
    inset:0;
    height:100%;
    min-height:0;
    padding:32px 28px;
    justify-content:space-between;
    opacity:0;
    will-change:transform,opacity;
  }

  /* ---------- 4B · Antecedentes / origen: lectura vertical continua ----------
     Sin carrusel: los tres paneles van seguidos y a su altura natural. */
  .pmat{height:auto !important}
  .pmat-stage{position:relative;height:auto;overflow:visible}
  .pmat-track{display:block;width:auto;height:auto;transform:none !important}
  .pmat-panel{
    flex:none;
    width:auto;
    height:auto;
    padding:var(--s-4) var(--pad) 0;
  }
  .pmat-panel--1{padding-top:calc(var(--header-h) + var(--s-3))}
  .pmat-panel:last-child{padding-bottom:var(--s-5)}
  .pmat-panel-inner{display:block;height:auto}
  .pmat-heading,
  .pmat-panel .pmat-kicker{padding-top:0}
  /* El texto de la portada del módulo, pegado a su título */
  .pmat-body,
  .pmat-panel--1 .pmat-body,
  .pmat-panel--2 .pmat-body,
  .pmat-panel--3 .pmat-body{display:block;margin-top:var(--s-3)}
  .pmat-body > * + *{margin-top:var(--s-3)}
  .pmat-steps{display:none}

  /* ---------- 4C · Hay datos: más aire entre tarjetas ---------- */
  .data-change-cards{row-gap:var(--s-5)}
}


/* =========================================================
   MÓVIL · AJUSTES DE CONTINUIDAD Y JERARQUÍA (≤ 700 px)
   Escritorio intacto: fuera de la media query solo se oculta el
   párrafo nuevo del HTML (.copy-p2), que en escritorio no existía.
   ========================================================= */
.copy-p2{display:none}

@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){

  /* ---------- 1 · Algo está cambiando ---------- */
  /* Entrada anticipada: el módulo sube 50vh por encima del final de "El
     camino". Su fondo es transparente mientras tanto, así el texto
     anterior sale por arriba a la vez que entran las fotos (main.js
     sincroniza los tiempos). Después lo cubren la foto y los destinos. */
  .story{margin-top:-50vh;background:transparent}
  .story .stage{background:transparent}

  /* Dos párrafos, al mismo tamaño que "Durante años, Turespaña…" */
  .copy p{font-size:var(--fs-h3);line-height:1.38}
  .copy .copy-p2{display:block;margin-top:var(--s-3)}

  /* ---------- 2 · Antecedentes / origen: jerarquía de títulos ----------
     Tres niveles claros: título de sección (display) › título de cada
     bloque (antes etiqueta de 16 px, ahora tamaño H2 móvil) › texto. */
  .pmat-panel .pmat-kicker{
    align-items:flex-start;
    font-size:clamp(1.5rem, calc(6.6vw * var(--fs-k)), 1.75rem);
    line-height:1.12;
    letter-spacing:-.02em;
    font-weight:500;
    color:var(--red);
  }
  .pmat-panel .pmat-kicker::before{margin-top:.42em}   /* el punto, alineado con la primera línea */
  /* Cada bloque se separa del anterior con un filete y aire propio */
  .pmat-panel + .pmat-panel{padding-top:var(--s-5)}
  .pmat-panel + .pmat-panel .pmat-panel-inner{padding-top:var(--s-4);border-top:1px solid var(--g-200)}
  /* Pilares y cifras con más peso: se leen como titulares del bloque */
  .pmat-priorities li{font-weight:400}
  .pmat-figure strong{font-size:clamp(2.125rem, calc(9.6vw * var(--fs-k)), 2.5rem)}

  /* ---------- 3 · Hay datos: título de sección ----------
     Mismo tamaño y estilo que "Vamos a aprovechar este impulso"
     (H2 móvil, Medium, rojo). Ya no se fuerza a dos líneas: el corte lo
     equilibra el navegador. */
  .data-change-title h2{
    font-size:var(--fs-h2);
    line-height:1.02;
    letter-spacing:-.025em;
    font-weight:500;
    white-space:normal;
    text-wrap:balance;
  }
  .data-change-break{display:none}
  /* El <br> no lleva espacio al lado en el HTML: al ocultarlo se repone */
  .data-change-break + .data-change-word::before{content:" "}
}


/* =========================================================
   MÓVIL · JERARQUÍA TIPOGRÁFICA Y LIMPIEZA (≤ 700 px)
   Todo dentro de la media query: escritorio intacto.
   Escala resultante en un móvil de 390 px:
     H1 portada ............................. 43 px
     H2 módulo ("Otras formas de pensar") ... 34 px
     H3 / subtítulo ("Las propuestas…") ..... 21 px
     Texto base ............................. 16 px
   ========================================================= */
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){

  /* ---------- 1 · H1: el título dominante de la web ---------- */
  .opening-claim{font-size:clamp(2.375rem, calc(11vw * var(--fs-k)), 2.875rem)}

  /* ---------- 1 · Otras formas de pensar: H2 > H3 > texto ---------- */
  .destinations h2{
    font-size:clamp(1.875rem, calc(8.8vw * var(--fs-k)), 2.25rem);
    line-height:1.04;
    letter-spacing:-.028em;
  }
  .dest-intro-sub{
    margin-top:var(--s-2);
    max-width:none;
    font-size:var(--fs-h3);
    line-height:1.35;
    letter-spacing:-.01em;
  }
  /* Las tarjetas ceden algo de alto para que el encabezado, ahora mayor,
     no se cruce con ellas en pantallas bajas (iPhone SE: 667 px) */
  .dest-cards{height:min(48vh,440px)}

  /* ---------- 3 · Antecedentes / origen: limpieza visual ---------- */
  /* Sin punto delante de "Meta 13" y "Otras metas" */
  .pmat-panel .pmat-kicker::before{display:none}
  /* Sin filete encima de los títulos de bloque: el aire basta para separar */
  .pmat-panel + .pmat-panel .pmat-panel-inner{padding-top:0;border-top:0}
  /* Sin mini-infografías: solo el texto de cada pilar */
  .pmat-priority-ill{display:none}
  .pmat-priorities li{display:block}
  /* La línea bajo el último pilar quedaba encima de "Otras metas" */
  .pmat-priorities li:last-child{border-bottom:0}
}


/* =========================================================
   GLOBAL (móvil y escritorio)
   ========================================================= */
/* Flecha de enlace externo: SVG inline en lugar del carácter ↗, que iOS
   pinta como emoji. Hereda el color del enlace y escala con el texto. */
.icon-arrow-ext{
  display:inline-block;
  width:.72em;
  height:.72em;
  vertical-align:-.02em;
  overflow:visible;
}
.link-ext{display:inline-block;margin-left:.15em;transition:transform var(--t-ui) var(--ease-out)}
.pmat-link:hover .link-ext{transform:translate(2px,-2px)}
/* Sin la franja legal, el filete pasa a separar los datos del Instituto */
.footer-copy{margin-top:1vh;padding-top:4vh;border-top:1px solid var(--g-200)}


/* =========================================================
   MÓVIL (≤ 700 px)
   ========================================================= */
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){

  /* ---------- Hay datos: layout estándar ----------
     Sin escena fija ni tarjetas que suben: título arriba a la izquierda
     y tarjetas apiladas debajo, en flujo normal (main.js · release). */
  .data-change-module{height:auto !important}
  .data-change-stage{position:relative;height:auto;overflow:visible;padding:var(--s-5) var(--pad)}
  .data-change-title{
    position:relative;left:auto;top:auto;
    width:auto;transform:none;
    margin-bottom:var(--s-4);
    text-align:left;
    opacity:1 !important;
  }
  .data-change-word,.data-change-dot{opacity:1 !important}
  .data-change-viewport{position:relative;inset:auto;overflow:visible;border-radius:0}
  .data-change-cards{position:static;left:auto;right:auto}
  .data-change-card{transform:none !important}

  /* ---------- Antecedentes: el mismo tamaño en los tres textos ---------- */
  .pmat-plan-text,
  .pmat-strategy-side p,
  .pmat-statement{font-size:1.125rem;line-height:1.45}

  /* ---------- Vamos a aprovechar este impulso: sin zoom ----------
     La foto ya no se encoge: ocupa una pantalla con la tarjeta encima y
     se desplaza con un parallax suave (±10 %, main.js). Debajo, en flujo
     normal, "Equilibrio…" y las cifras de objetivos y programas. */
  .zoomout-module{height:auto !important}
  .zoomout-stage{position:relative;height:auto;overflow:visible}
  .zoomout-canvas{
    position:absolute;left:0;top:0;
    width:100%;height:100vh;
    overflow:hidden;
    transform:none !important;
  }
  .zoomout-main{
    position:absolute;inset:0;
    width:100%;height:100%;
    transform:none !important;
    opacity:1 !important;
  }
  .zoomout-overlay{
    position:relative;inset:auto;z-index:3;
    min-height:100vh;
    padding:var(--s-5) var(--pad);
    opacity:1 !important;transform:none !important;
  }
  /* La sección de programas ya no sube por encima del zoom, y arranca
     pegada a las cifras (antes reservaba sitio para el solapamiento) */
  .programas{margin-top:0;padding-top:var(--s-3)}
}


/* =========================================================
   ESCRITORIO (≥ 701 px) · JERARQUÍA DE ENCABEZADOS
   Auditoría: el h1 de portada medía lo mismo que cinco h2 (tamaño
   display), otros h2 iban un escalón por debajo y "Meta 13" / "Otras
   metas" eran h3 con aspecto de etiqueta de 16 px. Escala nueva:
     H1 ... solo la portada ................ 56 → 112 px
     H2 ... todos los titulares de sección . 36 → 64 px
     H3 ... títulos de bloque y tarjeta .... 24 → 32 px
   Ningún texto que no sea el h1 supera al h2: los textos de apoyo con
   tamaño display ("Objetivo N", "Equilibrio…") bajan a H2.
   ========================================================= */
@media (min-width:701px) and (orientation:portrait), (min-width:701px) and (min-height:501px), (min-width:701px) and (pointer:fine){
  :root{
    --fs-h1:clamp(3.5rem, calc(7vw * var(--fs-k)), 7rem);
    --fs-h2:clamp(2.25rem, calc(4vw * var(--fs-k)), 4rem);
  }
  /* H1 */
  .opening-claim{font-size:var(--fs-h1);line-height:.94;letter-spacing:-.04em}

  /* H2 */
  .title h2,
  .camino-label,
  .section-title,
  .destinations h2,
  .data-change-title h2,
  .zoomout-lead,
  .zoomout-figures-title,
  .cierre-title h2,
  .newsletter-panel h2,
  .prog-obj-label,
  .zoomout-end-text{
    font-size:var(--fs-h2);
    line-height:1.02;
    letter-spacing:-.025em;
    font-weight:500;
  }

  /* H3 (h3 y h4 de bloque) */
  .pmat-panel .pmat-kicker,
  .data-change-card h3,
  .prog-obj-title,
  .prog-title{
    font-size:var(--fs-h3);
    line-height:1.15;
    letter-spacing:-.015em;
    font-weight:500;
  }
  .pmat-panel .pmat-kicker::before{width:12px;height:12px;flex-basis:12px}

  /* Entradilla de "Otras formas de pensar…": más grande, un escalón bajo el H2 */
  .dest-intro-sub{font-size:clamp(1.25rem, calc(1.6vw * var(--fs-k)), 1.625rem);line-height:1.4;max-width:32ch}
}


/* =========================================================
   MÓVIL (≤ 700 px) · ESCENA FINAL DEL ZOOM Y RETÍCULA DE DATOS
   ========================================================= */
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){

  /* ---------- "Equilibrio…" → "5 objetivos / 9 programas" ----------
     Dos capas sticky de 100vh en el mismo sitio: "Equilibrio…" llega
     centrado y, al seguir bajando, conmuta con las cifras (main.js ·
     staticUpdate). El ::after es el recorrido mientras están fijas. */
  :root:not(.is-linear) .zoomout-end-text,
  :root:not(.is-linear) .zoomout-figures{
    position:sticky;
    inset:auto;          /* primero: inset reescribe top */
    top:0;
    height:100vh;
    padding:0 var(--pad);
    opacity:1;
    transform:none;
  }
  :root:not(.is-linear) .zoomout-end-text{overflow:hidden}   /* las líneas entran desde la derecha */
  :root:not(.is-linear) .zoomout-figures{margin-top:-100vh}
  :root:not(.is-linear) .zoomout-stage::after{content:"";display:block;height:140vh}

  /* Modo lineal (reducir movimiento en el móvil): todo visible y en flujo */
  .is-linear .zoomout-end-text span,
  .is-linear .zoomout-figures-lead,
  .is-linear .zoomout-figures-line{opacity:1 !important;transform:none !important}

  /* ---------- Hay datos: retícula simétrica ----------
     Separación entre tarjetas = margen lateral (--pad, 22 px a 390 px) */
  .data-change-cards{row-gap:var(--pad)}
}


/* =========================================================
   LOGO DE TURESPAÑA (img/logo.png, a color)
   ========================================================= */
/* Footer: el logo sustituye al nombre en texto */
.footer-logo{display:block;width:auto;height:88px}
.footer-plan{margin-top:var(--s-2)}

/* Header: solo escritorio. Centrado en la barra, dentro de un círculo
   blanco para que el color se lea igual sobre el vídeo de portada que
   sobre la barra blanca (ahí un filete gris marca el círculo).
   Desde 960 px: por debajo choca con el título y el botón de descarga
   (tablets en vertical y ventanas estrechas). */
.site-header-logo{display:none}
@media (min-width:960px) and (orientation:portrait), (min-width:960px) and (min-height:501px), (min-width:960px) and (pointer:fine){
  .site-header-logo{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--white);
    border:1px solid var(--g-200);
    pointer-events:none;
  }
  .header-over-hero .site-header-logo{border-color:transparent}
  .site-header-logo img{display:block;width:auto;height:38px}
}


/* =========================================================
   MÓVIL (≤ 700 px) · ILUSTRACIONES DE ANTECEDENTES / ORIGEN
   En escritorio no existen (display:none): allí siguen las del
   carrusel con su parallax.
   ========================================================= */
.pmat-mobile-ill{display:none}

@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .pmat-mobile-ill{display:block;pointer-events:none}
  .pmat-mobile-ill img{display:block;width:100%;height:auto;user-select:none}

  /* Olivo sobre "Meta 13": a sangre por la derecha, en espejo para que la
     rama nazca del borde de la pantalla */
  .pmat-mobile-olive{
    width:min(62vw,300px);
    margin:0 calc(-1 * var(--pad)) var(--s-3) auto;
  }
  .pmat-mobile-olive img{transform:scaleX(-1)}

  /* Pájaro al final del módulo, a la derecha. Su borde inferior coincide
     con el final de la sección: la rama queda apoyada en el gris de
     "Hay datos" */
  .pmat-panel:last-child{padding-bottom:var(--s-4)}
  .pmat-mobile-bird{
    width:min(44vw,210px);
    margin:0 var(--pad) 0 auto;
  }
}


/* =========================================================
   ESCRITORIO · LOGO DEL HEADER
   Sin filete gris; enlace a tourspain.es (pestaña nueva).
   ========================================================= */
@media (min-width:960px) and (orientation:portrait), (min-width:960px) and (min-height:501px), (min-width:960px) and (pointer:fine){
  .site-header-logo{
    border:0;
    pointer-events:auto;
    transition:transform var(--t-ui) var(--ease-out);
  }
  .site-header-logo:hover{transform:translate(-50%,-50%) scale(1.06)}
  /* El anillo de foco solo aparece con teclado (WCAG 2.4.7) */
  .site-header-logo:focus{outline:none}
  .site-header-logo:focus-visible{outline:2px solid var(--red);outline-offset:3px}
}


/* =========================================================
   MÓVIL (≤ 700 px) · DESTINOS TIPO REELS
   Los fondos se deslizan en vertical ligados al scroll (main.js):
   sin fundido CSS, que pelearía con el movimiento.
   ========================================================= */
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .dest-bg-layer{transition:none;will-change:transform}
  .dest-intro{z-index:3}
}


/* =========================================================
   MÓVIL (≤ 700 px) · BANNERS DE OBJETIVO MÁS ALTOS
   Antes medían solo lo que ocupaba el texto (min-height:0) y el
   vídeo apenas se veía. Ahora casi una pantalla: título arriba,
   programas abajo y el vídeo a la vista entre ambos. Cada objetivo
   queda así como una sección propia, bien delimitada.
   ========================================================= */
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .prog-obj{
    min-height:82vh;
    align-content:space-between;
    row-gap:var(--s-4);
  }
}


/* =========================================================
   CONTENIDOS · OCTUBRE 2026 (móvil y escritorio)
   ========================================================= */

/* ---------- Portada: antetítulo ----------
   Justo encima del título. main.js lo desvanece al entrar el texto
   siguiente y recoloca el bloque para que siga centrado. */
.opening-kicker{
  margin:0 0 var(--s-3);
  text-align:center;
  font-size:var(--fs-label);
  line-height:1.3;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--white);
  text-shadow:0 1px 18px rgba(0,0,0,.25);
}
.opening-kicker span{display:inline-block;will-change:opacity,transform}
.intro-done .opening-kicker{animation:opening-rise .9s cubic-bezier(.2,.7,.2,1) both}
.is-linear .opening-kicker{position:static;margin-bottom:var(--s-2)}
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .opening-kicker{margin-bottom:var(--s-2);letter-spacing:.08em}
  .intro-done .opening-kicker{animation:none}
}

/* ---------- Programas: "Programa N" ----------
   El número pasa a ser "Programa 1": más ancho que antes, así que gana
   una columna y baja a tamaño H3 para no competir con el título. */
.prog-cover-num{
  grid-column:1 / 4;
  font-size:var(--fs-h3);
  line-height:1.15;
  letter-spacing:-.015em;
  white-space:nowrap;
}
.prog-cover-text{grid-column:4 / 13}
@media (max-width:900px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .prog-cover-num,.prog-cover-text{grid-column:1 / -1}
  .prog-cover-num{margin-bottom:var(--s-1)}
}

/* ---------- Programas 8 y 9: sin mapa ---------- */
.prog-card--nomap{grid-template-columns:1fr}

/* ---------- Objetivo + programas en un mismo contenedor ----------
   Fondo blanco, filete gris y esquinas redondeadas. El vídeo del objetivo
   ocupa exactamente el ancho del contenedor: el filete se dibuja por fuera
   (box-shadow) para que no lo estreche, y overflow:hidden recorta el vídeo
   con las mismas esquinas. */
.prog-group{
  position:relative;
  overflow:hidden;
  margin-top:12vh;
  border-radius:var(--radius);
  background:#fff;
  box-shadow:0 0 0 1px var(--g-200);
}
.prog-list > .prog-group:first-child{margin-top:8vh}
.prog-group > .prog-obj{
  margin:0;
  border-radius:0;          /* las esquinas las pone el contenedor */
}
.prog-group > .prog{padding-inline:clamp(24px,4vw,64px)}
.prog-group > .prog:last-child{padding-bottom:clamp(32px,5vw,72px)}

@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .prog-group{margin-top:var(--s-4);border-radius:24px}
  .prog-list > .prog-group:first-child{margin-top:var(--s-3)}
  .prog-group > .prog-obj{margin-inline:0;padding:32px 20px}
  .prog-group > .prog{padding-inline:16px}
  .prog-group > .prog:last-child{padding-bottom:var(--s-4)}
}
/* El banner aparece solo con fundido dentro del contenedor: la escala de
   entrada lo estrechaba y dejaba un filo blanco alrededor del vídeo */
.prog-group > .prog-obj.reveal,
.prog-group > .prog-obj.reveal.is-in{transform:none}


/* =========================================================
   REVISIÓN 16 OCT · OBJETIVOS Y PROGRAMAS (móvil y escritorio)
   ========================================================= */

/* ---------- Dónde empieza y termina cada programa ----------
   Dentro del contenedor del objetivo, un filete separa un programa del
   siguiente de lado a lado. */

/* ---------- Banner de objetivo: segundo párrafo y aclaración ---------- */
.prog-obj-note{
  margin-top:var(--s-3);
  padding-left:var(--s-2);
  border-left:2px solid rgba(255,255,255,.6);
  max-width:52ch;
}
.prog-obj-note p{margin:0;font-size:var(--fs-p);line-height:1.5;color:rgba(255,255,255,.88)}
.prog-obj-note .prog-obj-note-q{margin-bottom:6px;font-weight:500;color:var(--white)}

/* ---------- Mercados emisores prioritarios ---------- */
.prog-markets-label{margin:var(--s-3) 0 0;font-size:var(--fs-label);font-weight:500;color:var(--ink)}
.prog-markets-label + .prog-markets{margin-top:var(--s-1)}
/* Botones con textos largos ("Europa: Reino Unido, Alemania…"): esquinas
   que admiten varias líneas y punto alineado con la primera */
.prog-markets li{align-items:flex-start;border-radius:20px;line-height:1.4}
.prog-markets li::before{flex:0 0 10px;margin-top:.42em}
.prog-markets li strong{font-weight:500;color:var(--ink)}

/* ---------- Estudio de segmento (contexto de los programas 5, 6 y 7) ---------- */
.prog-study{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:var(--s-3);
  padding:12px 20px;
  border:1px solid var(--red);
  border-radius:999px;
  color:var(--red-text);
  font-weight:500;
  text-decoration:none;
  transition:background-color var(--t-hover) var(--ease-out),color var(--t-hover) var(--ease-out);
}
.prog-study:hover{background:var(--red);color:var(--white)}
.prog-study-meta{font-size:0.8125rem;letter-spacing:.06em;opacity:.8}
.prog-study .icon-ext{width:16px;height:16px;flex:0 0 16px}
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .prog-study{display:flex;justify-content:center;text-align:center}
}


/* =========================================================
   REVISIÓN 19 OCT
   ========================================================= */

/* ---------- H1 más pequeño: el titular ahora es mucho más largo ---------- */
@media (min-width:701px) and (orientation:portrait), (min-width:701px) and (min-height:501px), (min-width:701px) and (pointer:fine){
  :root{--fs-h1:clamp(2.875rem, calc(5.4vw * var(--fs-k)), 5.375rem)}
  .opening-content .opening-claim{max-width:22ch}
}
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .opening-claim{font-size:clamp(1.9375rem, calc(8.6vw * var(--fs-k)), 2.25rem)}
}

/* ---------- Objetivos: texto descriptivo más ancho, menos líneas ----------
   El bloque de texto gana una columna y el párrafo deja de estrecharse
   (antes 44 caracteres y reparto "balance", que acortaba cada línea). */
.prog-obj-text,
.prog-obj-note{max-width:64ch;text-wrap:pretty}
@media (min-width:901px) and (orientation:portrait), (min-width:901px) and (min-height:501px), (min-width:901px) and (pointer:fine){
  .prog-obj-head{grid-column:1 / 9}
  .prog-obj-programs{grid-column:9 / 13}
}

/* ---------- Newsletter: suscripción y contacto ---------- */
.nl-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s-4)}
.nl-actions .nl-cta{margin-top:0}
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .nl-actions{flex-direction:column;margin-top:var(--s-3)}
  .nl-actions > a{justify-content:center;text-align:center;white-space:normal}
}

/* ---------- Footer: logos de Turespaña y del Ministerio ---------- */
.footer-logos{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.footer-logo{width:auto;max-width:100%}
.footer-logo--turespana{height:52px}
/* La tira del Ministerio es muy alargada (4,6:1): con poco alto sus textos no
   se leen, así que ocupa el ancho de la columna (hasta 420 px) */
.footer-logo--gob{height:auto;width:100%;max-width:420px}
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .footer-logo--turespana{height:44px}
}


/* =========================================================
   REVISIÓN 19 OCT (2)
   ========================================================= */

/* ---------- Footer: los dos logos con el mismo ancho ---------- */
.footer-logo--turespana,
.footer-logo--gob{width:100%;max-width:340px;height:auto}

/* ---------- Barra de programas: elementos solo del desplegable móvil ---------- */
.prog-nav-toggle{display:none}

@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){

  /* ---------- Portada: mini animación de entrada ----------
     Antetítulo, titular, subtítulo y flecha suben y aparecen escalonados
     al retirarse la pantalla de carga. Fill "backwards": al terminar, el
     scroll vuelve a mandar sobre el antetítulo y el subtítulo (main.js). */
  @keyframes m-rise{
    from{opacity:0;transform:translate3d(0,22px,0)}
    to{opacity:1;transform:none}
  }
  :root:not(.is-loading) .opening-content .opening-kicker{animation:m-rise .7s cubic-bezier(.2,.7,.2,1) .05s backwards}
  :root:not(.is-loading) .opening-content .opening-claim{animation:m-rise .8s cubic-bezier(.2,.7,.2,1) .15s backwards}
  :root:not(.is-loading) .opening-content .opening-text{animation:m-rise .8s cubic-bezier(.2,.7,.2,1) .4s backwards}
  :root:not(.is-loading) .opening .scroll-cue{animation:m-rise .6s cubic-bezier(.2,.7,.2,1) .7s backwards}

  /* ---------- Barra de programas: hamburguesa + desplegable ----------
     Plegada solo muestra el programa actual. Al abrirla, la lista agrupada
     por objetivo con número y nombre de cada programa. */
  .prog-nav-inner{flex-direction:row;align-items:center;gap:12px}
  .prog-nav-current{flex:1 1 auto;min-width:0}
  .prog-nav-toggle{
    display:grid;
    place-items:center;
    flex:0 0 44px;
    width:44px;height:44px;
    padding:0;
    border:1px solid var(--g-300);
    border-radius:50%;
    background:var(--white);
    color:var(--ink);
    cursor:pointer;
  }
  .prog-nav-toggle-icon{position:relative;display:block;width:18px;height:14px}
  .prog-nav-toggle-icon i{
    position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
    transition:transform .25s var(--ease-out),opacity .2s var(--ease-out),top .25s var(--ease-out);
  }
  .prog-nav-toggle-icon i:nth-child(1){top:0}
  .prog-nav-toggle-icon i:nth-child(2){top:6px}
  .prog-nav-toggle-icon i:nth-child(3){top:12px}
  .prog-nav.is-open .prog-nav-toggle{background:var(--ink);border-color:var(--ink);color:var(--white)}
  .prog-nav.is-open .prog-nav-toggle-icon i:nth-child(1){top:6px;transform:rotate(45deg)}
  .prog-nav.is-open .prog-nav-toggle-icon i:nth-child(2){opacity:0}
  .prog-nav.is-open .prog-nav-toggle-icon i:nth-child(3){top:6px;transform:rotate(-45deg)}

  /* Desplegable: los botones numerados de siempre (1, 2, 3…), agrupados
     por objetivo, en un panel bajo la barra */
  .prog-nav-groups{
    display:none;
    position:absolute;
    left:0;right:0;top:100%;
    flex-wrap:wrap;
    align-items:center;
    gap:12px 24px;
    padding:var(--s-2) var(--pad) var(--s-3);
    background:var(--white);
    border-bottom:1px solid var(--g-200);
    box-shadow:0 18px 30px -18px rgba(0,0,0,.25);
  }
  .prog-nav.is-open .prog-nav-groups{display:flex;justify-content:flex-start}
  .prog-nav-group{display:flex;gap:6px}
  /* Los grupos se separan con aire, no con filetes: al pasar a una segunda
     fila, un filete quedaría suelto al principio de la línea */
  .prog-nav-group + .prog-nav-group::before{display:none}
  .prog-nav-dot{width:40px;height:40px}

  /* ---------- Objetivos y programas sin contenedor ----------
     Como antes: el vídeo del objetivo a sangre (todo el ancho de pantalla)
     y los programas con el margen normal de página. El recuadro con borde
     gris queda solo para escritorio. */
  .prog-group{
    margin-inline:calc(-1 * var(--pad));
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
  }
  .prog-group > .prog-obj{padding:36px var(--pad)}
  .prog-group > .prog{padding-inline:var(--pad)}
  .prog-group > .prog:last-child{padding-bottom:0}
}


/* ---------- Header: el título es un enlace al inicio de la página ---------- */
.site-header-home{color:inherit;text-decoration:none;border-radius:4px}
.site-header-home:hover .brand-long,
.site-header-home:hover .brand-short{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.site-header-home:focus-visible{outline:2px solid currentColor;outline-offset:4px}


/* =========================================================
   CIERRE · las frases nunca se salen de la pantalla (escritorio)
   Las cajas laterales miden 4 columnas. La letra se limita para que la
   palabra más larga ("oportunidades", ~7,4 em) quepa siempre en la caja;
   en pantallas grandes sigue siendo el tamaño H2. Si aun así una palabra
   no cupiera, se parte antes que desbordar.
   ========================================================= */
@media (min-width:901px) and (orientation:portrait), (min-width:901px) and (min-height:501px), (min-width:901px) and (pointer:fine){
  .cierre-item{
    font-size:min(var(--fs-h2), calc((4 * var(--col) + 3 * var(--gap)) / 7.6));
    overflow-wrap:break-word;
  }
}


/* =========================================================
   HEADER · LOGO COMPLETO DE TURESPAÑA
   La imagen (JPG) trae fondo blanco: va en una placa blanca de esquinas
   suaves, que también se lee sobre el vídeo de la portada.
   ========================================================= */
.site-header-logo{
  display:flex;
  align-items:center;
  height:44px;
  padding:0 12px;
  border-radius:10px;
  background:var(--white);
}
.site-header-logo img{display:block;width:auto;height:30px}
@media (min-width:701px) and (orientation:portrait), (min-width:701px) and (min-height:501px), (min-width:701px) and (pointer:fine){
  .site-header-logo{width:auto;height:48px;padding:0 14px;border:0}
  .site-header-logo img{height:34px}
}
/* Por debajo de 1100 px el logo centrado ya no cabe con holgura entre el
   título y los botones: se quita el título y el logo ocupa su sitio, a la
   izquierda. Incluye móvil (antes "PMAT 26/28"). */
@media (max-width:1099px){
  .site-header-title{display:none}
  .site-header-logo{position:static;left:auto;top:auto;transform:none}
  .site-header-logo:hover{transform:scale(1.04)}
}
/* Móvil: el subtítulo ya no entra con la animación de carga; aparece con el scroll */
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  :root:not(.is-loading) .opening-content .opening-text{animation:none}
}


/* =========================================================
   MÓVIL EN HORIZONTAL · sin menú inferior
   Un móvil apaisado (más de 700 px de ancho) recibe el diseño de
   escritorio, pero con muy poca altura: el menú inferior tapa demasiado.
   Solo pantallas táctiles, para no afectar a una ventana baja de escritorio.
   ========================================================= */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .anchor-nav{display:none}
  :root{--nav-space:24px}   /* se recupera el espacio que se le reservaba */
}


/* =========================================================
   MÓVIL APAISADO · "Otras formas de pensar…" en dos columnas
   Con tan poca altura, título arriba y tarjeta debajo no caben: el
   título va a la izquierda y la tarjeta a la derecha, a toda la altura.
   ========================================================= */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .dest-intro{width:calc(46vw - var(--pad));top:calc(var(--header-h) + 8px)}
  .dest-cards{
    top:16px;bottom:16px;
    left:50vw;right:var(--pad);
    width:auto;height:auto;
  }
  .dest-card{padding:24px}
}


/* =========================================================
   ESCRITORIO BAJO (ventanas de 700 px de alto o menos)
   Funciona como el escritorio normal (antes pasaba al modo lineal), pero
   los tamaños dejan de depender solo del ancho: cada uno se limita
   también por la altura (vh), para que el contenido de cada escena quepa
   en la ventana. En ventanas altas no cambia nada.
   ========================================================= */
@media (min-width:701px) and (max-height:700px) and (pointer:fine){
  :root{
    --fs-h1:clamp(1.875rem, min(calc(5.4vw * var(--fs-k)), calc(10.5vh * var(--fs-k))), 5.375rem);
    --fs-h2:clamp(1.5rem, min(calc(4vw * var(--fs-k)), calc(7.4vh * var(--fs-k))), 4rem);
    --fs-h3:clamp(1.0625rem, min(calc(2.1vw * var(--fs-k)), calc(4.3vh * var(--fs-k))), 2rem);
    --fs-display:clamp(1.75rem, min(calc(6vw * var(--fs-k)), calc(9vh * var(--fs-k))), 6rem);
    --fs-figure:clamp(3.5rem, min(calc(13vw * var(--fs-k)), calc(22vh * var(--fs-k))), 12.5rem);
    --fs-p:clamp(0.9375rem, calc(3.3vh * var(--fs-k)), 1.125rem);
    --header-h:56px;
    --nav-space:72px;
  }
  /* Antecedentes: márgenes e iconos de los pilares según la altura (antes,
     margen superior según el ancho e iconos de 56 px fijos) */
  .pmat-panel{padding:calc(var(--header-h) + 2vh) var(--pad) calc(var(--nav-space) + 2vh)}
  .pmat-panel--2 .pmat-body{margin-top:3vh}
  .pmat-priorities li{padding-top:1.6vh}
  .pmat-priority-ill{height:min(56px, 7vh);margin-bottom:1.2vh}
  /* Lo que falta de alto se gana a lo ancho: textos con líneas más largas */
  .pmat-plan-text{grid-column:1 / 12;max-width:64ch}
  .pmat-priorities{grid-column:1 / 12}
  .zoomout-overlay .zoomout-lead{max-width:30ch}
  /* "Vamos a aprovechar": la capa deja libres la cabecera y el menú */
  .zoomout-overlay{padding:var(--header-h) 6vw var(--nav-space)}
  .zoomout-overlay-inner{width:calc(8 * var(--col) + 7 * var(--gap));padding:clamp(20px, min(4vw, 5vh), 56px)}
  .zoomout-overlay .zoomout-text{margin-top:2vh}
  .zoomout-overlay .btn-primary{margin-top:2.6vh}
}


/* Móviles muy estrechos (≤ 360 px): logo algo menor para que quepa el
   botón "PDF, 19 MB" de la cabecera */
@media (max-width:360px){
  .site-header-logo{padding:0 8px;height:40px}
  .site-header-logo img{height:24px}
  .download-btn{padding-inline:12px;gap:6px}
  .site-header-actions{gap:6px}
}


/* =========================================================
   ACCESIBILIDAD · CORRECCIONES DE LA AUDITORÍA (20 oct 2026)
   ========================================================= */

/* ---------- WCAG 1.4.3 · Rojo sobre gris ----------
   #E32213 sobre el gris de las tarjetas (#F4F4F4) da 4,24:1. Para texto
   sobre gris se usa una variante más oscura (4,77:1), sin tocar el rojo
   de marca. El "Ver más" en hover va en blanco sobre rojo (4,71:1). */
:root{--red-text-on-grey:#d41f11}
.prog-card--context p strong,
.prog-line-more{color:var(--red-text-on-grey)}

/* ---------- WCAG 1.4.1 · Puntos de programas: no solo por el color ----------
   Actual: anillo exterior y número en negrita. Visto: borde continuo
   más grueso (4,5:1 sobre blanco). Pendiente: borde fino, como estaba.
   El foco de teclado va más separado para no confundirse con el anillo. */
.prog-nav-dot.is-active{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--red);font-weight:700}
.prog-nav-dot.is-done{border:2px solid #767676}
.prog-nav-dot:focus-visible{outline:2px solid var(--ink);outline-offset:6px}

/* ---------- WCAG 2.2.2 · El botón de pausa también para las animaciones en bucle ---------- */
.is-motion-paused .scroll-cue svg,
.is-motion-paused .dest-marker-ring,
.is-motion-paused .spain-ring{animation-play-state:paused}

/* ---------- Cifras animadas: la parte visual no la leen los lectores ---------- */
.count-vis{font:inherit}

/* ---------- WCAG 1.4.10 · Modo lineal (zoom al 400 %, letra grande, sin movimiento) ----------
   Las tarjetas de destinos van una debajo de otra a su altura natural: se
   anulan las alturas fijas del efecto de móvil (caja al 48 % de la pantalla
   y cada tarjeta al 100 % de la caja). */
.is-linear .dest-cards{top:auto;bottom:auto;left:auto;right:auto;width:auto;height:auto}
.is-linear .dest-card{height:auto;min-height:0}