/* ==========================================================================
   Instituto de Riesgo Territorial — IRT
   Hoja de estilos del sitio institucional
   --------------------------------------------------------------------------
   1. Variables (color, tipografía, espacio)
   2. Base y tipografía
   3. Utilidades y retícula
   4. Componentes comunes (antetítulo, botones, enlaces, filetes)
   5. Cabecera y navegación
   6. Portada (secciones)
   7. Artículo
   8. Pie de página
   9. Movimiento, accesibilidad e impresión
   ========================================================================== */

/* 1. Variables ------------------------------------------------------------ */
:root {
  /* 60 % fondos */
  --blanco: #FFFFFF;
  --blanco-calido: #FAF8F4;
  /* 30 % tinta */
  --marino: #1B2A4A;
  /* 10 % acento */
  --terracota: #C0392B;
  --terracota-oscuro: #A0301F;
  --dorado: #C9A227;           /* solo filetes y viñetas, nunca texto */
  /* texto */
  --carbon: #2A2F3A;           /* texto corrido */
  --gris: #59606E;             /* texto secundario, AA sobre blanco y blanco cálido */
  /* líneas */
  --linea: #E6E3DC;
  --linea-media: #CFCAC0;
  --borde-campo: #858A94;      /* borde de campos: 3,47:1 sobre blanco (WCAG 1.4.11) */

  /* Familias */
  --serif: "Caladea", Cambria, Georgia, serif;
  --sans: "Carlito", Calibri, "Segoe UI", Arial, sans-serif;

  /* Escala modular ~1,25 */
  --fs--2: 0.8125rem;                                   /* 13 */
  --fs--1: 0.9375rem;                                   /* 15 */
  --fs-0: 1.0625rem;                                    /* 17 interfaz */
  --fs-lectura: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem); /* 18–20 */
  --fs-1: clamp(1.1875rem, 1.12rem + 0.3vw, 1.3125rem);
  --fs-2: clamp(1.3125rem, 1.2rem + 0.55vw, 1.625rem);
  --fs-3: clamp(1.5rem, 1.3rem + 1vw, 2.0625rem);
  --fs-4: clamp(1.75rem, 1.45rem + 1.5vw, 2.5625rem);
  --fs-5: clamp(2.125rem, 1.6rem + 2.6vw, 3.25rem);
  --fs-6: clamp(2.375rem, 1.6rem + 3.8vw, 4rem);

  /* Ritmo vertical (múltiplos de 8 px) */
  --e-1: 0.5rem;   /* 8 */
  --e-2: 1rem;     /* 16 */
  --e-3: 1.5rem;   /* 24 */
  --e-4: 2rem;     /* 32 */
  --e-5: 3rem;     /* 48 */
  --e-6: 4rem;     /* 64 */
  --e-7: 6rem;     /* 96 */
  --e-seccion: clamp(4rem, 3rem + 4vw, 7rem);

  --ancho: 75rem;          /* 1200 px */
  --ancho-lectura: 38.5rem;/* ~616 px: 60–72 caracteres por línea */
  --margen: 1rem;          /* 16 px en celular */
  --alto-nav: 3.5rem;
}
@media (min-width: 48em) { :root { --margen: 2rem; } }

/* 2. Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-nav) + 1rem);
}
body {
  margin: 0;
  background: var(--blanco);
  color: var(--carbon);
  font-family: var(--sans);
  font-size: var(--fs-0);
  line-height: 1.55;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  color: var(--marino);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0 0 var(--e-2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--terracota); }
strong { font-weight: 700; }
abbr[title] { text-decoration: none; }
.tabular, time { font-variant-numeric: tabular-nums lining-nums; }

::selection { background: #F3DAD6; color: var(--marino); }

/* Foco visible */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--marino);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 3. Utilidades ----------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}
.reticula {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--e-4);
}
.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.saltar {
  position: absolute;
  left: var(--margen);
  top: -100px;
  z-index: 100;
  background: var(--marino);
  color: var(--blanco);
  padding: var(--e-1) var(--e-2);
  font-weight: 700;
  text-decoration: none;
}
.saltar:focus { top: var(--e-1); }

/* 4. Componentes comunes -------------------------------------------------- */

/* Antetítulo (kicker) */
.antetitulo {
  font-family: var(--sans);
  font-size: var(--fs--2);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracota);
  line-height: 1.35;
  margin: 0 0 var(--e-2);
}
.antetitulo--gris { color: var(--gris); }

/* Enlaces con subrayado animado */
.enlace,
.prosa a,
.nota a.nota__titulo-enlace {
  color: var(--terracota);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .25s ease, color .2s ease;
  padding-bottom: 1px;
}
.enlace:hover,
.prosa a:hover { background-size: 100% 2px; color: var(--terracota-oscuro); }

/* Enlace de título (azul que se subraya al pasar) */
.titulo-enlace {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--dorado), var(--dorado));
  background-size: 0 2px;
  background-position: 0 95%;
  background-repeat: no-repeat;
  transition: background-size .35s ease;
}
.titulo-enlace:hover { background-size: 100% 2px; }

/* Enlace con flecha */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs--1);
  color: var(--terracota);
  text-decoration: none;
}
.enlace-flecha::after { content: "→"; transition: transform .2s ease; }
.enlace-flecha:hover { color: var(--terracota-oscuro); }
.enlace-flecha:hover::after { transform: translateX(3px); }
.enlace-flecha[target="_blank"]::after { content: "↗"; }

/* Botones */
.botones { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 3rem;
  padding: .7rem 1.4rem;
  font-family: var(--sans);
  font-size: var(--fs-0);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--marino);
  background: var(--blanco);
  border: 1.5px solid var(--marino);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.boton:hover { background: var(--marino); color: var(--blanco); }
.boton--cta {
  background: var(--terracota);
  border-color: var(--terracota);
  color: var(--blanco);
}
.boton--cta:hover { background: var(--terracota-oscuro); border-color: var(--terracota-oscuro); color: var(--blanco); }
.boton--chico { min-height: 2.5rem; padding: .45rem 1rem; font-size: var(--fs--1); }

/* Botón de WhatsApp: mismo lenguaje que el botón primario, con ícono lineal */
.boton__logo { width: 1.4rem; height: auto; flex: none; }
.boton__icono { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; flex: none; }


/* Etiquetas */
.etiqueta {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--fs--2);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--marino);
  border: 1px solid var(--linea-media);
  padding: .15rem .55rem;
  border-radius: 2px;
}

/* Íconos lineales */
.icono {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--marino);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icono--acento { color: var(--terracota); }

/* Encabezado de sección (antetítulo + titular + bajada) */
.seccion { padding-block: var(--e-seccion); }
.seccion--calida { background: var(--blanco-calido); }
.seccion + .seccion:not(.seccion--calida) { border-top: 1px solid var(--linea); }
.seccion--calida + .seccion { border-top: 0; }

.encabezado {
  border-top: 2px solid var(--marino);
  padding-top: var(--e-3);
  margin-bottom: var(--e-5);
  display: grid;
  gap: 0 var(--e-4);
  grid-template-columns: minmax(0, 1fr);
}
.encabezado__titulo { font-size: var(--fs-5); letter-spacing: -0.01em; }
.encabezado__bajada {
  font-family: var(--serif);
  font-size: var(--fs-2);
  line-height: 1.4;
  color: var(--carbon);
  margin-top: var(--e-2);
  max-width: 44rem;
}
@media (min-width: 62em) {
  .encabezado { grid-template-columns: 4fr 8fr; align-items: start; }
  .encabezado .antetitulo { grid-column: 1; grid-row: 1 / span 2; padding-top: .7rem; }
  .encabezado__titulo, .encabezado__bajada { grid-column: 2; }
}

/* Subtítulo de bloque dentro de una sección */
.subencabezado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--marino);
  padding-bottom: var(--e-1);
  margin-bottom: var(--e-4);
}
.subencabezado h2,
.subencabezado h3 {
  font-family: var(--sans);
  font-size: var(--fs--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marino);
}
.subencabezado p { margin: 0; color: var(--gris); font-size: var(--fs--1); }

/* Cita destacada */
.cita {
  margin: 0;
  padding-left: var(--e-3);
  border-left: 3px solid var(--terracota);
}
.cita p {
  font-family: var(--serif);
  font-size: var(--fs-3);
  line-height: 1.25;
  color: var(--marino);
  margin: 0;
  text-wrap: balance;
}

/* 5. Cabecera y navegación ------------------------------------------------ */
.cabecera {
  padding-top: var(--e-4);
  text-align: center;
}
.cabecera__lema {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  font-family: var(--sans);
  font-size: var(--fs--2);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--marino);
  margin: 0 0 var(--e-3);
}
.cabecera__lema::before,
.cabecera__lema::after {
  content: "";
  height: 1px;
  width: clamp(1.5rem, 8vw, 6rem);
  background: var(--dorado);
}
.cabecera__marca {
  display: inline-flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.25rem);
  text-decoration: none;
  color: var(--marino);
}
.cabecera__logo { width: clamp(3rem, 2.2rem + 3vw, 4.75rem); height: auto; }
.cabecera__nombre {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-6);
  line-height: 1;
  letter-spacing: -0.015em;
  text-align: left;
}
.cabecera__descriptor {
  max-width: 46rem;
  margin: var(--e-2) auto var(--e-4);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-1);
  color: var(--gris);
}

.navegacion {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blanco);
  border-top: 2px solid var(--marino);
  border-bottom: 1px solid var(--linea-media);
  transition: box-shadow .2s ease;
}
.navegacion.es-fija { box-shadow: 0 1px 0 var(--linea), 0 6px 18px -14px rgba(27, 42, 74, .45); }
.navegacion__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--alto-nav);
  gap: var(--e-2);
}
.navegacion__marca {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--marino);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}
.navegacion__marca img { width: 2rem; height: auto; }
.navegacion__boton {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .4rem .9rem;
  font: 700 var(--fs--1)/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--marino);
  background: var(--blanco);
  border: 1.5px solid var(--marino);
  border-radius: 2px;
  cursor: pointer;
}
.navegacion__boton-icono { width: 1.1rem; height: 1.1rem; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.navegacion__boton-icono path { transform-box: view-box; transform-origin: 10px 10px; transition: transform .2s ease, opacity .2s ease; }
.navegacion__boton[aria-expanded="true"] .linea-media { opacity: 0; }
.navegacion__boton[aria-expanded="true"] path:first-child { transform: translateY(5px) rotate(45deg); }
.navegacion__boton[aria-expanded="true"] path:last-child { transform: translateY(-5px) rotate(-45deg); }
.navegacion__lista {
  list-style: none;
  display: none;
}
.navegacion__lista a {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs--1);
  letter-spacing: .03em;
  color: var(--marino);
  text-decoration: none;
  padding: .75rem 0;
}
.navegacion__lista a:hover,
.navegacion__lista a[aria-current="true"] { color: var(--terracota); }
.navegacion__externo::after { content: " ↗"; font-weight: 400; }

@media (max-width: 30em) {
  .cabecera__lema { letter-spacing: .14em; }
  .cabecera__lema::before, .cabecera__lema::after { display: none; }
}

/* Menú en celular y tableta */
@media (max-width: 63.99em) {
  .navegacion__marca { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; }
  .navegacion.es-fija .navegacion__marca,
  .sin-js .navegacion__marca { opacity: 1; visibility: visible; }
  .cabecera__nombre { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.75rem); }
  .navegacion__lista.esta-abierta {
    display: block;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--blanco);
    border-bottom: 2px solid var(--marino);
    padding: var(--e-1) var(--margen) var(--e-3);
    max-height: calc(100vh - var(--alto-nav));
    overflow-y: auto;
  }
  .navegacion__lista.esta-abierta li + li { border-top: 1px solid var(--linea); }
  /* Sin JS, el menú se muestra completo debajo de la barra */
  .sin-js .navegacion__lista { display: block; padding-bottom: var(--e-2); }
  .sin-js .navegacion__boton { display: none; }
  .sin-js .navegacion__barra { flex-wrap: wrap; }
  .sin-js .navegacion { position: static; }
}

/* Menú en escritorio: una línea */
@media (min-width: 64em) {
  .navegacion__boton { display: none; }
  .navegacion__barra { justify-content: center; position: relative; }
  .navegacion__marca {
    position: absolute;
    left: var(--margen);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s;
  }
  .navegacion.es-fija .navegacion__marca { opacity: 1; visibility: visible; }
  .navegacion.es-fija .navegacion__lista { padding-left: 5rem; }
  .navegacion__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 clamp(.9rem, 1.6vw, 1.6rem);
  }
  .navegacion__lista a { padding: .9rem 0; position: relative; }
  .navegacion__lista a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: .55rem;
    height: 2px;
    background: var(--terracota);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }
  .navegacion__lista a:hover::after,
  .navegacion__lista a[aria-current="true"]::after { transform: scaleX(1); }
  .navegacion__lista a.navegacion__externo::after {
    content: " ↗";
    position: static;
    height: auto;
    background: none;
    transform: none;
  }
}

/* Cabecera compacta (página de artículo) */
.cabecera--compacta { padding-top: var(--e-3); }
.cabecera--compacta .cabecera__nombre { font-size: var(--fs-4); }
.cabecera--compacta .cabecera__logo { width: 3rem; }
.cabecera--compacta .cabecera__lema { margin-bottom: var(--e-2); }
.cabecera--compacta .cabecera__marca { margin-bottom: var(--e-3); }

/* 6. Portada -------------------------------------------------------------- */

/* Apertura */
.apertura { padding-block: var(--e-5) var(--e-6); }
.figura.apertura__figura { margin-top: var(--e-5); }
.figura.apertura__figura img { aspect-ratio: 16 / 9; }
.apertura__reticula { row-gap: var(--e-5); }
.apertura__principal { grid-column: 1 / -1; }
.apertura__titulo {
  font-size: var(--fs-6);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--e-3);
}
.apertura__titulo em { font-style: normal; color: var(--terracota); }
.apertura__bajada {
  font-family: var(--serif);
  font-size: var(--fs-2);
  line-height: 1.45;
  color: var(--carbon);
  max-width: 38rem;
  margin-bottom: var(--e-4);
}
.apertura__lateral { grid-column: 1 / -1; }
.destacado {
  border-top: 2px solid var(--marino);
  padding-top: var(--e-2);
}
.destacado__rotulo {
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
  font-family: var(--sans);
  font-size: var(--fs--2);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marino);
  margin-bottom: var(--e-3);
}
.destacado__titulo { font-size: var(--fs-4); line-height: 1.12; margin-bottom: var(--e-2); }
.destacado__bajada { font-family: var(--serif); font-size: var(--fs-1); line-height: 1.5; }
.meta {
  font-family: var(--sans);
  font-size: var(--fs--1);
  color: var(--gris);
  font-variant-numeric: tabular-nums lining-nums;
}
.destacado .meta { margin: var(--e-2) 0 var(--e-3); }
.destacado__medios {
  list-style: none;
  margin-top: var(--e-4);
  border-top: 1px solid var(--linea);
}
.destacado__medios li { border-bottom: 1px solid var(--linea); padding: var(--e-2) 0; }
.destacado__medios .antetitulo { margin-bottom: .35rem; }
.destacado__medios a {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-1);
  line-height: 1.25;
  color: var(--marino);
  text-decoration: none;
}
.destacado__medios a:hover { color: var(--terracota); }
@media (min-width: 64em) {
  .apertura__principal { grid-column: 1 / span 7; padding-right: var(--e-3); }
  .apertura__lateral {
    grid-column: 8 / -1;
    border-left: 1px solid var(--linea);
    padding-left: var(--e-4);
  }
}

/* Qué es el IRT */
.que-es__cuerpo { display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 1fr); }
.que-es__texto { font-family: var(--serif); font-size: var(--fs-lectura); line-height: 1.65; }
.que-es__texto > p:first-child::first-line { font-variant: small-caps; letter-spacing: .03em; }
.que-es__cita p { font-size: var(--fs-2); }
.figura { margin: 0; }
.figura picture { border: 1px solid var(--linea); }
.figura img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 60%; }
.figura figcaption {
  font-family: var(--sans);
  font-size: var(--fs--1);
  color: var(--gris);
  padding-top: var(--e-1);
  border-bottom: 1px solid var(--linea);
  padding-bottom: var(--e-2);
}
.figura figcaption strong { color: var(--marino); display: block; font-size: var(--fs-0); }
.triada {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
  margin-top: var(--e-2);
}
.triada li {
  font-family: var(--sans);
  font-size: var(--fs--2);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marino);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.triada li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--dorado); }
@media (min-width: 62em) {
  .que-es__cuerpo { grid-template-columns: 7fr 5fr; gap: var(--e-6); align-items: start; }
}

.pilares {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--marino);
  margin-top: var(--e-6);
}
.pilar {
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--linea);
}
.pilar .icono { margin-bottom: var(--e-2); }
.pilar h3 { font-size: var(--fs-2); margin-bottom: var(--e-1); }
.pilar p { color: var(--carbon); }
.pilares__grupo {
  font-family: var(--sans);
  font-size: var(--fs--2);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: var(--e-1);
  font-weight: 700;
}
@media (min-width: 40em) {
  .pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-4); }
}
@media (min-width: 62em) {
  .pilares { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; }
  .pilar { padding: var(--e-4) var(--e-4) var(--e-4) 0; }
  .pilar:not(:nth-child(3n + 1)) { padding-left: var(--e-4); border-left: 1px solid var(--linea); }
}

/* Soluciones */
.soluciones {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5) var(--e-4);
}
.solucion {
  background: var(--blanco);
  border-top: 2px solid var(--marino);
  padding: var(--e-3) var(--e-3) var(--e-3);
  display: flex;
  flex-direction: column;
}
.solucion__numero {
  font-family: var(--serif);
  font-size: var(--fs-4);
  line-height: 1;
  color: var(--terracota);
  font-variant-numeric: tabular-nums lining-nums;
  margin-bottom: var(--e-2);
}
.solucion h3 { font-size: var(--fs-2); margin-bottom: var(--e-2); }
.solucion dl { margin: 0 0 var(--e-3); }
.solucion dt {
  font-family: var(--sans);
  font-size: var(--fs--2);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marino);
  margin-top: var(--e-2);
}
.solucion dd { margin: .25rem 0 0; }
.solucion dd.solucion__destinatarios { color: var(--gris); }
.solucion .enlace-flecha { margin-top: auto; align-self: flex-start; padding-top: var(--e-1); }
@media (min-width: 40em) { .soluciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .soluciones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Problemas (índice) */
.indice {
  list-style: none;
  columns: 1;
  column-gap: var(--e-5);
  column-rule: 1px solid var(--linea);
  counter-reset: problema;
}
.indice li {
  break-inside: avoid;
  display: flex;
  gap: var(--e-2);
  align-items: baseline;
  padding: .7rem 0;
  border-bottom: 1px solid var(--linea);
  font-family: var(--serif);
  font-size: var(--fs-1);
  line-height: 1.35;
  color: var(--marino);
}
.indice li::before {
  counter-increment: problema;
  content: counter(problema, decimal-leading-zero);
  font-family: var(--sans);
  font-size: var(--fs--2);
  font-weight: 700;
  color: var(--terracota);
  font-variant-numeric: tabular-nums lining-nums;
  min-width: 1.6rem;
}
.indice li::first-letter { text-transform: uppercase; }
@media (min-width: 40em) { .indice { columns: 2; } }
@media (min-width: 64em) { .indice { columns: 3; } }

/* Programas (fichas) */
.fichas {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-3);
}
.ficha {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--marino);
  padding: var(--e-3);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-1) var(--e-2);
  align-content: start;
}
.ficha__tipo {
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-size: var(--fs--2);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terracota);
}
.ficha h3 { grid-column: 1 / -1; font-size: var(--fs-2); }
.ficha p { grid-column: 1 / -1; margin: 0; }
.ficha--llamado {
  background: transparent;
  border: 1px dashed var(--linea-media);
  border-top: 3px solid var(--terracota);
  align-content: center;
  justify-items: start;
}
.ficha--llamado .boton { grid-column: 1 / -1; }
@media (min-width: 64em) { .ficha--llamado { grid-column: span 2; } }
@media (min-width: 40em) { .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* A quiénes acompañamos */
.destinatarios {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--e-4);
  border-top: 1px solid var(--marino);
}
.destinatario {
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linea);
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 0 var(--e-2);
}
.destinatario .icono { width: 2rem; height: 2rem; grid-row: 1 / 3; }
.destinatario h3 { font-size: var(--fs-1); margin-bottom: .35rem; }
.destinatario p { color: var(--gris); font-size: var(--fs--1); }
@media (min-width: 40em) { .destinatarios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .destinatarios { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* GRD y Cambio Climático */
.esquema {
  border: 1px solid var(--linea);
  background: var(--blanco);
  padding: var(--e-4) var(--e-3);
  margin: 0 0 var(--e-5);
}
.esquema__eje {
  font-family: var(--sans);
  font-size: var(--fs--2);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--marino);
  text-align: center;
  border-bottom: 2px solid var(--marino);
  padding-bottom: var(--e-1);
  margin-bottom: var(--e-3);
}
.esquema__factores {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-2);
  text-align: center;
}
.esquema__factores li {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-1);
  color: var(--marino);
  border-top: 1px solid var(--linea-media);
  padding-top: var(--e-1);
}
.esquema__factores li.es-intensificado { border-top: 3px solid var(--terracota); }
.esquema__nota {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  margin-top: var(--e-3);
  padding-top: var(--e-2);
  border-top: 1px dashed var(--linea-media);
  font-size: var(--fs--1);
  color: var(--carbon);
}
.esquema__nota .icono { width: 1.75rem; height: 1.75rem; flex: none; }
.esquema__nota strong { color: var(--terracota); }
.esquema__resultado {
  text-align: center;
  margin-top: var(--e-3);
  font-family: var(--serif);
  font-size: var(--fs-1);
  color: var(--marino);
}
.esquema__resultado strong { color: var(--terracota); }
@media (min-width: 48em) { .esquema__factores { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.dimensiones {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-4);
  margin-bottom: var(--e-5);
}
.dimension { border-top: 1px solid var(--marino); padding-top: var(--e-2); }
.dimension h3 { font-size: var(--fs-2); margin-bottom: var(--e-1); }
@media (min-width: 48em) { .dimensiones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-5); } }

/* Base técnica */
.base { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
.base__bloque h3 { font-size: var(--fs-3); margin-bottom: var(--e-2); }
.base__bloque > p:not(.antetitulo):not(.aclaracion) { font-family: var(--serif); font-size: var(--fs-1); line-height: 1.55; }
.lista-tecnica {
  list-style: none;
  margin-top: var(--e-3);
  border-top: 1px solid var(--marino);
}
.lista-tecnica li {
  padding: .55rem 0 .55rem 1.25rem;
  border-bottom: 1px solid var(--linea);
  position: relative;
}
.lista-tecnica li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.05rem;
  width: .5rem; height: 1px;
  background: var(--dorado);
  box-shadow: 0 1px 0 var(--dorado);
}
.lista-tecnica li::first-letter { text-transform: uppercase; }
.lista-tecnica--columnas { columns: 1; column-gap: var(--e-4); }
.lista-tecnica--columnas li { break-inside: avoid; }
.referencias {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin-top: var(--e-3);
}
.referencias li {
  font-family: var(--sans);
  font-size: var(--fs--1);
  color: var(--marino);
  border: 1px solid var(--linea-media);
  padding: .2rem .65rem;
  border-radius: 2px;
  background: var(--blanco);
}
.aclaracion {
  margin-top: var(--e-3);
  font-size: var(--fs--1);
  color: var(--gris);
  font-style: italic;
}
.base__cierre { margin-top: var(--e-6); max-width: 46rem; }
@media (min-width: 40em) { .lista-tecnica--columnas { columns: 2; } }
@media (min-width: 62em) { .base { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6); } }

/* Artículos / análisis */
.areas-tematicas { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-1); margin-bottom: var(--e-6); }
.analisis__intro { font-family: var(--serif); font-size: var(--fs-1); line-height: 1.55; max-width: 46rem; margin-bottom: var(--e-3); }
.bloque-analisis + .bloque-analisis { margin-top: var(--e-6); }
.notas-medios {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
}
.nota {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}
.nota__medio {
  font-family: var(--sans);
  font-size: var(--fs--2);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terracota);
  margin: 0;
}
.nota__medio time { color: var(--gris); }
.nota__titulo { font-size: var(--fs-3); line-height: 1.15; }
.nota__autor { font-family: var(--sans); font-size: var(--fs--1); color: var(--marino); font-weight: 700; margin: 0; }
.nota__autor span { font-weight: 400; color: var(--gris); }
.nota__bajada { font-family: var(--serif); font-size: var(--fs-1); line-height: 1.5; margin: var(--e-1) 0; }
.nota__pie { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--e-2); border-top: 1px solid var(--linea); }
@media (min-width: 62em) {
  .notas-medios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6); }
  .notas-medios > * + * { border-left: 1px solid var(--linea); padding-left: var(--e-6); margin-left: calc(-1 * var(--e-6) / 2); }
}

.analisis-irt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); align-items: start; }
.nota__cita { margin-top: var(--e-5); }
.nota__cita p { font-size: var(--fs-3); }
.nota--propia .nota__titulo { font-size: var(--fs-4); }
.en-preparacion { border-left: 0; }
.en-preparacion__rotulo {
  font-family: var(--sans);
  font-size: var(--fs--2);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marino);
  border-bottom: 1px solid var(--marino);
  padding-bottom: var(--e-1);
  margin-bottom: 0;
}
.en-preparacion ul { list-style: none; }
.en-preparacion li { padding: var(--e-2) 0; border-bottom: 1px solid var(--linea); }
.en-preparacion .antetitulo { margin-bottom: .25rem; color: var(--gris); }
.en-preparacion h5 { font-size: var(--fs-1); line-height: 1.25; margin-bottom: .25rem; }
.en-preparacion p { font-size: var(--fs--1); color: var(--gris); }
@media (min-width: 62em) {
  .analisis-irt { grid-template-columns: 7fr 5fr; gap: var(--e-6); }
  .en-preparacion { border-left: 1px solid var(--linea); padding-left: var(--e-5); }
}

.llamado {
  margin-top: var(--e-6);
  border-top: 1px solid var(--marino);
  border-bottom: 1px solid var(--marino);
  padding: var(--e-4) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}
.llamado p { font-family: var(--serif); font-size: var(--fs-2); color: var(--marino); margin: 0; max-width: 40rem; line-height: 1.3; }

/* Podcast */
.podcast { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
.podcast__portada img { width: 100%; max-width: 26rem; aspect-ratio: 1; border: 1px solid var(--linea); }
.podcast__texto { font-family: var(--serif); font-size: var(--fs-lectura); line-height: 1.65; }
.podcast__texto .cita { margin: var(--e-4) 0; }
.podcast__texto .cita p { font-size: var(--fs-2); }
.podcast__texto .cita footer { font-family: var(--sans); font-size: var(--fs--1); color: var(--gris); margin-top: var(--e-1); }
.episodios { list-style: none; border-top: 2px solid var(--marino); margin: var(--e-4) 0; }
.episodio {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) auto;
  gap: var(--e-2);
  align-items: baseline;
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--linea);
}
.episodio__numero {
  font-family: var(--sans);
  font-size: var(--fs--2);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terracota);
}
.episodio__titulo { font-family: var(--serif); font-weight: 700; font-size: var(--fs-1); color: var(--marino); line-height: 1.3; }
.episodio__estado { font-family: var(--sans); font-size: var(--fs--1); color: var(--gris); white-space: nowrap; }
.podcast__aviso { font-family: var(--sans); font-size: var(--fs-0); }
.podcast__aviso strong { display: block; font-family: var(--sans); color: var(--marino); text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs--2); margin-bottom: .25rem; }
@media (max-width: 30em) {
  .episodio { grid-template-columns: minmax(0, 1fr) auto; }
  .episodio__numero { grid-column: 1 / -1; }
}
@media (min-width: 62em) {
  .podcast { grid-template-columns: 5fr 7fr; gap: var(--e-6); }
  .podcast__portada { position: sticky; top: calc(var(--alto-nav) + var(--e-4)); align-self: start; }
}

/* Ideas fuerza */
.ideas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5) var(--e-6); }
.ideas > .cita:first-child p { font-size: var(--fs-5); line-height: 1.1; }
.ideas > :first-child { grid-column: 1 / -1; padding-bottom: var(--e-2); }
.ideas .cita p { font-size: var(--fs-3); }
@media (min-width: 48em) { .ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* Contacto: formulario propio + columna lateral */
.contacto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); align-items: start; }
@media (min-width: 62em) {
  .contacto { grid-template-columns: 8fr 4fr; gap: var(--e-5); }
  .contacto__lateral { position: sticky; top: calc(var(--alto-nav) + var(--e-4)); }
}

.formulario {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-top: 2px solid var(--marino);
  padding: var(--e-4) var(--e-3);
  scroll-margin-top: calc(var(--alto-nav) + var(--e-2));
}
@media (min-width: 48em) { .formulario { padding: var(--e-5); } }
.formulario__titulo { font-size: var(--fs-5); line-height: 1.05; margin-bottom: var(--e-2); }
.formulario__intro { font-size: var(--fs--1); color: var(--gris); max-width: 40rem; margin-bottom: var(--e-4); }
.formulario__grilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-3) var(--e-3);
}
.formulario__condicional { display: contents; }
.formulario__condicional[hidden] { display: none; }
@media (min-width: 40em) {
  .formulario__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo--ancho { grid-column: 1 / -1; }
}

.campo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.campo__etiqueta {
  font-family: var(--sans);
  font-size: var(--fs--1);
  font-weight: 700;
  color: var(--marino);
  line-height: 1.3;
}
.campo__obligatorio { color: var(--terracota); margin-left: .1em; }
.campo__opcional { font-weight: 400; color: var(--gris); font-size: var(--fs--2); }
.campo__ayuda { font-size: var(--fs--2); color: var(--gris); margin: 0; }
.campo__control {
  width: 100%;
  min-height: 3rem;
  padding: .65rem .8rem;
  font-family: var(--sans);
  font-size: 1.0625rem;            /* ≥ 16 px: evita el zoom automático en iOS */
  color: var(--carbon);
  background: var(--blanco);
  border: 1px solid var(--borde-campo);
  border-radius: 4px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo__control:hover { border-color: var(--marino); }
.campo__control:focus { outline: none; }
.campo__control:focus-visible,
.campo__control:focus {
  border-color: var(--marino);
  box-shadow: 0 0 0 2px var(--blanco), 0 0 0 4px var(--marino);
}
select.campo__control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231B2A4A' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
}
.campo__control--texto { min-height: 9rem; resize: vertical; line-height: 1.5; }
.campo__error {
  margin: 0;
  font-size: var(--fs--1);
  font-weight: 700;
  color: var(--terracota);
  line-height: 1.35;
}
.campo__error:empty { display: none; }
.campo__error::before { content: "! "; }
.campo--error .campo__control { border-color: var(--terracota); border-width: 2px; padding: calc(.65rem - 1px) calc(.8rem - 1px); }

.casilla { display: flex; gap: .75rem; align-items: flex-start; }
.casilla__control {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: .1rem 0 0;
  accent-color: var(--marino);
  cursor: pointer;
}
.casilla__control:focus-visible { outline: 3px solid var(--marino); outline-offset: 2px; }
.casilla__etiqueta { font-size: var(--fs-0); color: var(--carbon); line-height: 1.45; cursor: pointer; }
.campo--error .casilla__control { outline: 2px solid var(--terracota); outline-offset: 2px; }

.formulario__trampa {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea);
}
.formulario__enviar { min-width: 11rem; }
.formulario__enviar:disabled,
.formulario__enviar:disabled:hover {
  background: var(--terracota-oscuro);
  border-color: var(--terracota-oscuro);
  color: var(--blanco);
  cursor: progress;
}
.formulario__estado { margin: 0; font-size: var(--fs--1); color: var(--carbon); flex: 1 1 16rem; }
.formulario__estado:empty { display: none; }
.formulario__estado--error { color: var(--terracota); font-weight: 700; }
.formulario__estado a { color: var(--terracota); }
.formulario__aviso { padding: var(--e-2); border-left: 3px solid var(--terracota); background: var(--blanco-calido); margin-bottom: var(--e-3); }
@media (max-width: 39.99em) { .formulario__enviar { width: 100%; } }

.formulario__exito {
  border-left: 3px solid var(--terracota);
  padding: var(--e-2) 0 var(--e-2) var(--e-3);
}
.formulario__exito:focus { outline: none; }
.formulario__exito:focus-visible { outline: 3px solid var(--marino); outline-offset: 4px; }
.formulario__exito-texto { font-family: var(--serif); font-size: var(--fs-3); line-height: 1.3; color: var(--marino); margin: 0; }

/* Columna lateral */
.contacto__lateral { border-top: 2px solid var(--marino); padding-top: var(--e-3); }
.contacto__subtitulo {
  font-family: var(--sans);
  font-size: var(--fs--2);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marino);
  margin-bottom: var(--e-1);
}
.contacto__subtitulo--areas { margin-top: var(--e-5); }
.contacto__telefono { margin: 0 0 var(--e-2); }
.contacto__telefono a { font-family: var(--serif); font-size: var(--fs-3); font-weight: 700; color: var(--marino); text-decoration: none; }
.contacto__telefono a:hover { color: var(--terracota); }
.contacto__lateral .boton--whatsapp { width: 100%; }
.contacto__ayuda { font-size: var(--fs--1); color: var(--gris); margin-bottom: var(--e-2); }
.areas { list-style: none; border-top: 1px solid var(--linea); }
.areas li { border-bottom: 1px solid var(--linea); }
.area {
  display: grid;
  gap: .15rem;
  padding: .75rem 1.5rem .75rem 0;
  position: relative;
  text-decoration: none;
}
.area::after {
  content: "→";
  position: absolute;
  right: .25rem;
  top: .8rem;
  color: var(--terracota);
  transition: transform .2s ease;
}
.area:hover::after { transform: translateX(3px); }
.area__nombre { font-family: var(--serif); font-weight: 700; font-size: var(--fs-0); line-height: 1.3; color: var(--terracota); }
.area:hover .area__nombre { color: var(--terracota-oscuro); text-decoration: underline; text-underline-offset: 3px; }
.area__correo { font-size: var(--fs--2); color: var(--gris); overflow-wrap: anywhere; }
.contacto__dato { font-size: var(--fs--1); color: var(--gris); margin-top: var(--e-3); }
.pie__whatsapp { display: inline-flex; align-items: center; gap: .4rem; }
.pie__whatsapp img { width: 1.1rem; height: auto; }

/* Ventana de contacto (dialog) ------------------------------------------- */
html { scrollbar-gutter: stable; }
html.ventana-abierta { overflow: hidden; }

.ventana {
  width: min(40rem, calc(100% - 2rem));       /* ~640 px */
  max-width: none;
  max-height: calc(100dvh - 3rem);
  padding: 0;
  margin: auto;
  border: 0;
  border-top: 3px solid var(--terracota);
  border-radius: 12px;
  background: var(--blanco);
  color: var(--carbon);
  box-shadow: 0 24px 60px -20px rgba(27, 42, 74, .45), 0 2px 8px rgba(27, 42, 74, .12);
  overflow: hidden;
}
.ventana::backdrop {
  background: rgba(27, 42, 74, .4);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.ventana__caja {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 3rem - 3px);
}
.ventana__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-3) var(--e-2) var(--e-4);
  border-bottom: 1px solid var(--linea);
  flex: none;
}
.ventana__titulo { font-size: var(--fs-4); line-height: 1.1; }
.ventana__cerrar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--marino);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.ventana__cerrar:hover { background: var(--blanco-calido); border-color: var(--linea); }
.ventana__cerrar svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ventana__cuerpo {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--e-3) var(--e-4) var(--e-4);
}
.ventana .formulario__intro { margin-bottom: var(--e-3); }

/* En celular: pantalla completa con desplazamiento interno */
@media (max-width: 39.99em) {
  .ventana {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }
  .ventana__caja { max-height: none; height: 100%; }
  .ventana__encabezado { padding: var(--e-2) var(--e-2) var(--e-2) var(--margen); }
  .ventana__cuerpo { flex: 1; padding: var(--e-3) var(--margen) calc(var(--e-5) + env(safe-area-inset-bottom)); }
}

/* Entrada y salida suaves */
@keyframes ventana-entrar { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ventana-salir { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes fondo-entrar { from { opacity: 0; } to { opacity: 1; } }
@keyframes fondo-salir { from { opacity: 1; } to { opacity: 0; } }
.ventana[open] { animation: ventana-entrar .24s cubic-bezier(.2, .8, .2, 1); }
.ventana[open]::backdrop { animation: fondo-entrar .24s ease; }
.ventana.esta-cerrando { animation: ventana-salir .18s ease forwards; }
.ventana.esta-cerrando::backdrop { animation: fondo-salir .18s ease forwards; }
@media (prefers-reduced-motion: reduce) {
  .ventana[open], .ventana[open]::backdrop, .ventana.esta-cerrando, .ventana.esta-cerrando::backdrop { animation: none; }
}

/* Confirmación dentro de la ventana */
.ventana .formulario__exito {
  border-left: 0;
  padding: var(--e-4) 0 var(--e-2);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
}
.ventana .formulario__exito[hidden] { display: none; }
.formulario__exito-icono {
  width: 4rem;
  height: 4rem;
  fill: none;
  stroke: var(--terracota);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ventana .formulario__exito-texto { font-size: var(--fs-3); max-width: 28rem; }
.ventana .formulario__exito .boton { min-width: 10rem; }

/* Botón flotante «Contáctenos» */
.contacto-flotante {
  position: fixed;
  right: max(var(--margen), env(safe-area-inset-right));
  bottom: max(var(--margen), env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 3.25rem;
  padding: .75rem 1.25rem .75rem 1.05rem;
  border-radius: 999px;
  background: var(--terracota);
  color: var(--blanco);
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-0);
  text-decoration: none;
  box-shadow: 0 10px 24px -10px rgba(27, 42, 74, .55), 0 2px 6px rgba(27, 42, 74, .18);
  transition: background-color .2s ease, transform .2s ease;
}
.contacto-flotante:hover { background: var(--terracota-oscuro); transform: translateY(-2px); }
.contacto-flotante:focus-visible { outline: 3px solid var(--marino); outline-offset: 3px; }
.contacto-flotante__icono { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; flex: none; }
@media (max-width: 39.99em) {
  .contacto-flotante { width: 3.5rem; height: 3.5rem; padding: 0; justify-content: center; }
  .contacto-flotante__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .contacto-flotante:hover { transform: none; } }
@media print { .contacto-flotante, .ventana { display: none !important; } }
/* Sin JavaScript la ventana no se puede abrir: se ocultan los botones que dependen de ella */
.sin-js [data-abrir-contacto]:not(a) { display: none; }

/* Sección Contacto: botón «Escríbanos» y tarjetas de área */
.contacto__accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  margin-bottom: var(--e-5);
}
.contacto__accion .boton { min-width: 12rem; }
.contacto__accion p { margin: 0; font-size: var(--fs--1); color: var(--gris); max-width: 22rem; }
.tarjetas-area {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-2);
  margin-top: var(--e-2);
}
@media (min-width: 40em) { .tarjetas-area { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tarjetas-area li { display: flex; }
.tarjeta-area {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  width: 100%;
  padding: var(--e-2) var(--e-3) var(--e-3);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-top: 2px solid var(--marino);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.tarjeta-area:hover { border-top-color: var(--terracota); box-shadow: 0 8px 20px -14px rgba(27, 42, 74, .45); }
.tarjeta-area__nombre { font-family: var(--serif); font-weight: 700; font-size: var(--fs-1); line-height: 1.25; color: var(--marino); }
.tarjeta-area__correo { font-size: var(--fs--2); color: var(--gris); overflow-wrap: anywhere; }
.tarjeta-area__accion { margin-top: auto; padding-top: var(--e-1); font-family: var(--sans); font-weight: 700; font-size: var(--fs--1); color: var(--terracota); }
.tarjeta-area:hover .tarjeta-area__accion { color: var(--terracota-oscuro); }

/* 7. Artículo -------------------------------------------------------------- */
.articulo { padding-block: var(--e-5) var(--e-6); }
.articulo__encabezado {
  max-width: var(--ancho-lectura);
  margin: 0 auto var(--e-5);
  text-align: left;
}
.articulo__migas { font-family: var(--sans); font-size: var(--fs--1); color: var(--gris); margin-bottom: var(--e-4); }
.articulo__migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; }
.articulo__migas li + li::before { content: "/"; margin-right: .35rem; color: var(--linea-media); }
.articulo__migas a { color: var(--gris); text-decoration: none; }
.articulo__migas a:hover { color: var(--terracota); text-decoration: underline; }
.articulo__titulo { font-size: var(--fs-5); line-height: 1.06; letter-spacing: -0.02em; margin-bottom: var(--e-3); }
.articulo__bajada {
  font-family: var(--serif);
  font-size: var(--fs-2);
  line-height: 1.45;
  color: var(--carbon);
  margin-bottom: var(--e-4);
}
.articulo__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-4);
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--linea-media);
  border-bottom: 1px solid var(--linea-media);
  padding: var(--e-2) 0;
}
.articulo__autor { font-family: var(--sans); font-size: var(--fs-0); margin: 0; color: var(--carbon); }
.articulo__autor strong { color: var(--marino); }
.articulo__autor span { display: block; color: var(--gris); font-size: var(--fs--1); }

.prosa {
  max-width: var(--ancho-lectura);
  margin-inline: auto;
  font-family: var(--serif);
  font-size: var(--fs-lectura);
  line-height: 1.68;
  color: var(--carbon);
  hyphens: manual;
}
.prosa p { margin-bottom: 1.2em; }
.prosa > p:first-of-type { display: flow-root; }
.prosa > p:first-of-type::first-letter {
  float: left;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 4.1em;
  line-height: .82;
  padding: .06em .1em 0 0;
  color: var(--marino);
}
.prosa h2 {
  font-size: var(--fs-3);
  line-height: 1.2;
  margin: 2.2em 0 .8em;
  padding-top: .9em;
  border-top: 1px solid var(--linea);
}
.prosa > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prosa h2 .num {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs--2);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: .5rem;
}
.prosa .cita { margin: 2em 0; padding-left: var(--e-3); }
.prosa .cita p { font-size: var(--fs-3); margin: 0; }
@media (min-width: 75em) {
  .prosa .cita { margin-left: -4rem; margin-right: -4rem; padding-left: calc(4rem - 3px); border-left-width: 3px; }
}
.prosa .destacar { font-size: 1.08em; color: var(--marino); font-weight: 700; }

.notas-pie {
  max-width: var(--ancho-lectura);
  margin: var(--e-6) auto 0;
  border-top: 2px solid var(--marino);
  padding-top: var(--e-2);
  font-size: var(--fs--1);
}
.notas-pie h2 { font-family: var(--sans); font-size: var(--fs--2); letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--e-2); }
.notas-pie ol { padding-left: 1.5rem; }
.notas-pie li { margin-bottom: var(--e-1); color: var(--gris); }
.nota-ref { font-family: var(--sans); font-size: .7em; vertical-align: super; line-height: 0; }
.nota-ref a { text-decoration: none; color: var(--terracota); padding: 0 .1em; }

.compartir {
  max-width: var(--ancho-lectura);
  margin: var(--e-5) auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1) var(--e-2);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding: var(--e-2) 0;
}
.compartir__rotulo { font-family: var(--sans); font-size: var(--fs--2); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--marino); margin: 0 var(--e-1) 0 0; }
.compartir__aviso { font-family: var(--sans); font-size: var(--fs--1); color: var(--gris); min-height: 1.4em; margin: 0; }

.ficha-irt {
  max-width: var(--ancho-lectura);
  margin: var(--e-6) auto 0;
  background: var(--blanco-calido);
  border-top: 2px solid var(--marino);
  padding: var(--e-4) var(--e-3);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-2);
}
.ficha-irt__marca { display: flex; align-items: center; gap: var(--e-2); }
.ficha-irt__marca img { width: 3.25rem; }
.ficha-irt h2 { font-size: var(--fs-2); }
.ficha-irt .antetitulo { margin: 0; }
.ficha-irt p { margin: 0; }
.ficha-irt__contacto { font-size: var(--fs--1); color: var(--gris); }
.ficha-irt__contacto a { color: var(--marino); }

.otros {
  max-width: var(--ancho-lectura);
  margin: var(--e-6) auto 0;
}
.otros ul { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
.otros li { border-top: 1px solid var(--marino); padding-top: var(--e-2); }
.otros h3 { font-size: var(--fs-2); margin: .25rem 0 var(--e-1); }
@media (min-width: 48em) { .otros ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 8. Pie de página -------------------------------------------------------- */
.pie {
  background: var(--blanco-calido);
  border-top: 2px solid var(--marino);
  padding: var(--e-6) 0 var(--e-4);
  font-size: var(--fs--1);
}
.pie__reticula {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5) var(--e-4);
}
.pie__marca { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-2); text-decoration: none; }
.pie__marca img { width: 3.25rem; }
.pie__marca span { font-family: var(--serif); font-weight: 700; font-size: var(--fs-2); color: var(--marino); line-height: 1.1; }
.pie h2 {
  font-family: var(--sans);
  font-size: var(--fs--2);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--marino);
  border-bottom: 1px solid var(--linea-media);
  padding-bottom: var(--e-1);
  margin-bottom: var(--e-2);
}
.pie ul { list-style: none; }
.pie li { padding: .3rem 0; }
.pie a { color: var(--carbon); text-decoration: none; }
.pie a:hover { color: var(--terracota); text-decoration: underline; }
.pie__lema { font-family: var(--sans); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: var(--fs--2); color: var(--terracota); margin-bottom: var(--e-1); }
.pie__contacto li span { display: block; color: var(--gris); font-size: var(--fs--2); letter-spacing: .04em; }
.pie__contacto a { overflow-wrap: anywhere; }
.pie__correo { display: block; color: var(--gris); font-size: var(--fs--2); overflow-wrap: anywhere; }
.pie__legal {
  margin-top: var(--e-5);
  padding-top: var(--e-2);
  border-top: 1px solid var(--linea-media);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-1) var(--e-3);
  color: var(--gris);
}
.pie__legal p { margin: 0; }
@media (min-width: 40em) { .pie__reticula { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .pie__reticula { grid-template-columns: 4fr 2.5fr 2.5fr 3fr; } }

/* 9. Movimiento, accesibilidad e impresión --------------------------------- */

/* Aparición suave al hacer scroll (solo con JS y sin preferencia de movimiento reducido) */
.revelado-activo .revelar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.revelado-activo .revelar.es-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .revelado-activo .revelar { opacity: 1; transform: none; }
}

@media print {
  @page { margin: 2cm; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .navegacion, .saltar, .compartir, .pie, .botones, .otros, .cabecera__descriptor, .articulo__migas { display: none !important; }
  .cabecera { padding-top: 0; text-align: left; }
  .cabecera__lema { justify-content: flex-start; }
  .cabecera__lema::before, .cabecera__lema::after { display: none; }
  .cabecera__nombre { font-size: 16pt; }
  .cabecera__logo { width: 1.2cm; }
  .articulo { padding: 0; }
  .articulo__encabezado, .ficha-irt { max-width: none; }
  .articulo__titulo { font-size: 26pt; }
  .articulo__bajada { font-size: 14pt; }
  .prosa { max-width: none; font-size: 11.5pt; line-height: 1.5; color: #000; }
  .prosa h2 { font-size: 14pt; break-after: avoid; }
  .prosa p { orphans: 3; widows: 3; }
  .prosa .cita { margin: 1em 0; break-inside: avoid; }
  .prosa .cita p { font-size: 14pt; }
  .prosa a { background: none; color: #000; text-decoration: underline; }
  .prosa a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .ficha-irt { background: none; border: 1px solid #999; break-inside: avoid; }
  .revelado-activo .revelar { opacity: 1 !important; transform: none !important; }
}

[hidden] { display: none !important; }