/* ==========================================================================
   MBIA · Sitio corporativo
   Hoja de estilos única, sin dependencias ni paso de compilación.

   1. Tokens          5. Cabecera y navegación    9.  Página de servicio
   2. Base            6. Portada                  10. Pie
   3. Rejilla         7. Componentes de sección   11. Marcadores de pendiente
   4. Tipografía      8. Bandas oscuras           12. Movimiento e impresión
   ========================================================================== */

/* 0. Tipografías ----------------------------------------------------------- */
/* Servidas desde el propio sitio, no desde Google Fonts: el navegador del
   visitante no se conecta a ningún tercero (ver el aviso de privacidad).
   Archivos variables de Google Fonts, licencia SIL Open Font License 1.1, que
   permite servirlos; la licencia viaja dentro de cada archivo. Dos cortes por
   familia: latin (español completo) y latin-ext, que solo se descarga si la
   página usa uno de sus caracteres. */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("../fuentes/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("../fuentes/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fuentes/public-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fuentes/public-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("../fuentes/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("../fuentes/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Paleta de la Especificación de Identidad Visual (v1.0, 18-ago-2026) */
  --azul: #061F50;          /* Azul MBIA profundo · principal            */
  --azul-tec: #0A4E9B;      /* Azul tecnológico · enlaces y acentos      */
  --rojo: #ED1017;          /* Rojo evidencia · solo acentos, nunca texto */
  --plata: #9DA3AA;         /* Plata medio · detalles decorativos        */

  /* Neutros */
  --tinta: #101828;
  --tinta-2: #555B62;       /* Gris descriptor · 6.9:1 sobre blanco      */
  --blanco: #FFFFFF;
  --sup: #F8FAFC;
  --sup-2: #EEF2F7;
  --linea: #E1E6ED;
  --linea-fuerte: #C4CCD7;

  /* Sobre azul profundo */
  --sobre-azul: #C9D3E1;    /* 10.6:1 sobre #061F50 */
  --sobre-azul-2: #9FB4D3;  /*  7.6:1 sobre #061F50 */
  --linea-azul: rgba(255, 255, 255, .16);

  /* Familias */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-texto: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-dato: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Escala tipográfica: 11 · 12 · 13 · 15 · 17 · 19 · 22 · 28 · 40 · 64 */
  --t-2xs: .6875rem;
  --t-xs: .75rem;
  --t-sm: .8125rem;
  --t-md: .9375rem;
  --t-base: 1.0625rem;
  --t-lg: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --t-xl: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);
  --t-2xl: clamp(1.4375rem, 1.25rem + .8vw, 1.75rem);
  --t-3xl: clamp(1.875rem, 1.35rem + 2.2vw, 2.5rem);
  --t-4xl: clamp(2.375rem, 1.45rem + 4vw, 4rem);

  /* Medidas */
  --ancho: 1240px;
  --margen: clamp(1.25rem, .6rem + 3.2vw, 4rem);
  --gutter: clamp(1rem, .6rem + 1.6vw, 2rem);
  --seccion: clamp(4.5rem, 2.5rem + 7vw, 9rem);
  --cabecera: 72px;
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--cabecera) + 1rem);
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--azul-tec); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--azul); }

:focus-visible { outline: 2px solid var(--azul-tec); outline-offset: 3px; }
.oscura :focus-visible { outline-color: var(--blanco); }

::selection { background: #D5E3F4; color: var(--tinta); }

.saltar {
  position: absolute; left: var(--margen); top: -200px; z-index: 100;
  padding: .75rem 1rem; background: var(--azul); color: var(--blanco);
  font-weight: 600; text-decoration: none;
}
.saltar:focus { top: .75rem; color: var(--blanco); }

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

/* 3. Rejilla --------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + var(--margen) * 2);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.rejilla > * { grid-column: 1 / -1; }

.seccion { padding-block: var(--seccion); }
.seccion--tenue { background: var(--sup); }
.seccion--limite { border-top: 1px solid var(--linea); }

/* Encabezado de sección: etiqueta en la columna 1-3, título desde la 4 */
.sec-cab {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 1rem;
  margin-bottom: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
}
.sec-cab > * { grid-column: 1 / -1; }

@media (min-width: 960px) {
  .sec-cab .etiqueta { grid-column: 1 / 4; grid-row: 1; padding-top: .8rem; }
  .sec-cab h2 { grid-column: 4 / 12; grid-row: 1; }
  .sec-cab .entrada { grid-column: 4 / 11; }
  .desde-4 { grid-column: 4 / -1; }
}

/* 4. Tipografía ------------------------------------------------------------ */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--azul);
  line-height: 1.15;
  letter-spacing: -.012em;
  text-wrap: balance;
}
h2 { font-size: var(--t-3xl); line-height: 1.1; letter-spacing: -.02em; }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-base); letter-spacing: 0; }

.etiqueta {
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--azul-tec);
}

.entrada {
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--tinta-2);
  max-width: 62ch;
  text-wrap: pretty;
}

.texto { max-width: 66ch; text-wrap: pretty; }
.texto + .texto { margin-top: 1rem; }
.nota { font-size: var(--t-sm); line-height: 1.55; color: var(--tinta-2); max-width: 72ch; }
.dato { font-family: var(--f-dato); font-size: .92em; letter-spacing: 0; }

/* Barra de acento: el único rojo en bloque del sitio */
.sobretitulo {
  display: flex; align-items: center; gap: .875rem;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-2);
}
.sobretitulo::before {
  content: ""; flex: none; width: 28px; height: 2px; background: var(--rojo);
}

/* 5. Cabecera y navegación ------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--blanco);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.cabecera.con-borde { border-bottom-color: var(--linea); }

.cabecera-int {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  height: var(--cabecera);
}

.marca { display: block; flex: none; padding-block: 8px; }
.marca img { width: auto; height: 22px; }

.nav ul { display: flex; align-items: center; gap: clamp(1.25rem, .5rem + 1.5vw, 2.25rem); }
.nav a:not(.boton) {
  display: inline-block; padding-block: .375rem;
  color: var(--tinta); text-decoration: none;
  font-size: var(--t-md); font-weight: 500;
  background: linear-gradient(var(--azul), var(--azul)) left bottom / 0 1px no-repeat;
  transition: background-size .2s ease, color .2s ease;
}
/* El botón de Contacto se excluye: al llegar a su sección recibe aria-current,
   y el azul del texto se perdía sobre su propio fondo azul. */
.nav a:not(.boton):hover,
.nav a:not(.boton)[aria-current] { color: var(--azul); background-size: 100% 1px; }

.menu-boton {
  display: none; align-items: center; gap: .5rem;
  height: 44px; padding: 0 .25rem; margin-right: -.25rem;
  border: 0; background: none; cursor: pointer;
  font: 500 var(--t-md) var(--f-texto); color: var(--azul);
}
.menu-boton svg { width: 22px; height: 22px; }
.menu-boton .icono-cerrar { display: none; }
.menu-boton[aria-expanded="true"] .icono-abrir { display: none; }
.menu-boton[aria-expanded="true"] .icono-cerrar { display: block; }

@media (max-width: 959px) {
  .menu-boton { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--cabecera) 0 0 0; z-index: 49;
    display: none; overflow-y: auto;
    padding: 1rem var(--margen) 2.5rem;
    background: var(--blanco); border-top: 1px solid var(--linea);
  }
  .nav.abierta { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a:not(.boton) {
    display: block; padding: 1rem 0; border-bottom: 1px solid var(--linea);
    font-size: var(--t-lg); background: none;
  }
  .nav a:not(.boton)[aria-current] { color: var(--azul-tec); }
  .nav li:last-child { margin-top: 1.75rem; }
  .nav .boton { width: 100%; }
}
body.menu-abierto { overflow: hidden; }

/* Botones y enlaces de acción */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 48px; padding: .75rem 1.375rem;
  background: var(--azul); color: var(--blanco);
  border: 1px solid var(--azul); border-radius: 2px;
  font: 600 var(--t-md)/1.2 var(--f-texto); letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.boton:hover { background: var(--azul-tec); border-color: var(--azul-tec); color: var(--blanco); }
.boton--compacto { min-height: 40px; padding: .5rem 1rem; }
.boton--claro { background: var(--blanco); border-color: var(--blanco); color: var(--azul); }
.boton--claro:hover { background: var(--sup-2); border-color: var(--sup-2); color: var(--azul); }
.boton svg { width: 18px; height: 18px; flex: none; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: var(--t-md); color: var(--azul);
  text-decoration: none; padding-block: .25rem;
  border-bottom: 1px solid var(--linea-fuerte);
  transition: border-color .2s ease, color .2s ease;
}
.enlace-flecha:hover { color: var(--azul-tec); border-bottom-color: var(--azul-tec); }
.enlace-flecha svg { width: 16px; height: 16px; flex: none; transition: transform .2s ease; }
.enlace-flecha:hover svg { transform: translateX(3px); }

/* 6. Portada --------------------------------------------------------------- */
.portada { padding-block: clamp(3.5rem, 1.5rem + 7vw, 8rem) clamp(3rem, 2rem + 3vw, 4.5rem); }
.portada h1 {
  margin-top: 1.75rem;
  font-size: var(--t-4xl); line-height: 1.03; letter-spacing: -.028em;
  max-width: 14ch;
}
.portada .entrada { margin-top: 1.75rem; max-width: 50ch; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.5rem; }

.portada .ficha { margin-top: clamp(3rem, 2rem + 4vw, 4rem); }
@media (min-width: 1080px) {
  .portada-texto { grid-column: 1 / 8; }
  .portada .ficha { grid-column: 9 / 13; margin-top: 0; align-self: end; }
}

/* Ficha: anatomía de una alerta (ejemplo ilustrativo) */
.ficha { background: var(--blanco); border: 1px solid var(--linea-fuerte); border-top: 2px solid var(--azul); }
.ficha-cab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--linea);
}
.ficha-titulo { font: 600 var(--t-md)/1.3 var(--f-display); color: var(--azul); }
.ficha-nota { font: 400 var(--t-2xs)/1.3 var(--f-dato); letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); }
.ficha dl > div {
  display: grid; grid-template-columns: 7.75rem minmax(0, 1fr); gap: 1rem;
  padding: .8125rem 1.25rem; border-bottom: 1px solid var(--linea);
}
.ficha dl > div:last-child { border-bottom: 0; }
.ficha dt { font: 500 var(--t-2xs)/1.9 var(--f-dato); letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-2); }
.ficha dd { font-size: var(--t-sm); line-height: 1.5; color: var(--tinta); }
@media (max-width: 479px) {
  .ficha dl > div { grid-template-columns: 1fr; gap: .125rem; }
}

/* Indicador de criticidad: barras ascendentes, como en el isotipo */
.nivel { display: inline-flex; align-items: center; gap: .625rem; font-weight: 600; color: var(--tinta); white-space: nowrap; }
.nivel svg { width: 22px; height: 14px; flex: none; }
.nivel .b { fill: var(--linea-fuerte); }
.nivel .b.on { fill: var(--azul); }
.nivel .b.on.r { fill: var(--rojo); }

.cobertura {
  display: flex; flex-wrap: wrap; row-gap: .5rem;
  margin-top: clamp(3rem, 2rem + 4vw, 5rem); padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
  font-size: var(--t-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-2);
}
.cobertura li { padding-right: 1rem; margin-right: 1rem; border-right: 1px solid var(--linea-fuerte); line-height: 1.2; }
.cobertura li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

/* 7. Componentes de sección ------------------------------------------------ */

/* Tres ideas en columnas con filete superior */
.columnas { display: grid; gap: 2.5rem var(--gutter); }
@media (min-width: 768px) { .columnas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .columnas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.idea { padding-top: 1.25rem; border-top: 1px solid var(--linea-fuerte); }
.idea h3 { font-size: var(--t-lg); line-height: 1.3; }
.idea p { margin-top: .75rem; font-size: var(--t-md); color: var(--tinta-2); text-wrap: pretty; }

.subbloque { margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.subbloque-cab { display: grid; gap: .5rem; margin-bottom: 2rem; }
.subbloque-cab h3 { font-size: var(--t-2xl); }
.subbloque-cab p { color: var(--tinta-2); max-width: 62ch; }

/* Dimensiones de riesgo */
.dimensiones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--azul); }
.dimensiones li { padding: 1.25rem 1.25rem 1.25rem 0; border-bottom: 1px solid var(--linea); }
.dimensiones h4 { font-size: var(--t-base); }
.dimensiones p { margin-top: .375rem; font-size: var(--t-sm); color: var(--tinta-2); }
@media (min-width: 1024px) {
  .dimensiones { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dimensiones li { border-bottom: 0; padding: 1.5rem 1.25rem 0 0; }
  .dimensiones li + li { padding-left: 1.25rem; border-left: 1px solid var(--linea); }
}
@media (max-width: 479px) { .dimensiones { grid-template-columns: 1fr; } }

/* Siglas: M · BI · A */
.siglas { display: grid; gap: 2.5rem var(--gutter); }
@media (min-width: 768px) { .siglas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sigla { padding-top: 1.5rem; border-top: 1px solid var(--linea-fuerte); }
.sigla-letra {
  display: block; font: 700 clamp(2.5rem, 2rem + 2vw, 3.5rem)/1 var(--f-display);
  letter-spacing: -.03em; color: var(--azul);
}
.sigla h3 { margin-top: 1.25rem; font-size: var(--t-xs); font-family: var(--f-texto); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--azul-tec); }
.sigla p { margin-top: .625rem; font-size: var(--t-md); color: var(--tinta-2); }

/* Comparación: obligatorio frente a preventivo */
.comparacion { display: grid; gap: 2.5rem var(--gutter); }
@media (min-width: 768px) { .comparacion { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.comparacion h4 { padding-bottom: .875rem; font: 600 var(--t-xs)/1.4 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); border-bottom: 1px solid var(--linea-fuerte); }
.comparacion li { padding: .875rem 0; border-bottom: 1px solid var(--linea); font-size: var(--t-md); color: var(--tinta-2); }
.comparacion .mbia h4 { color: var(--azul); border-bottom-color: var(--azul); }
.comparacion .mbia li { color: var(--tinta); font-weight: 500; }

/* Lista con filetes */
.lista-fina li { padding: .625rem 0; border-top: 1px solid var(--linea); font-size: var(--t-md); line-height: 1.45; }
.lista-fina li:last-child { border-bottom: 1px solid var(--linea); }

/* Servicios */
.servicios { display: grid; gap: 4rem var(--gutter); }
@media (min-width: 1024px) { .servicios { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.servicio { display: flex; flex-direction: column; gap: 1.25rem; padding-top: 1.75rem; border-top: 2px solid var(--azul); }
.servicio h3 { font-size: var(--t-2xl); }
.servicio .lema { font: 600 var(--t-lg)/1.35 var(--f-display); color: var(--tinta); letter-spacing: -.005em; }
.servicio p { font-size: var(--t-md); color: var(--tinta-2); }
.servicio h4 { margin-top: .5rem; font: 600 var(--t-2xs)/1.4 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.servicio .lista-fina { margin-top: -.5rem; }
.servicio .pie-servicio { margin-top: auto; padding-top: .5rem; }
.flujo { display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: var(--t-md); font-weight: 500; color: var(--tinta); }
.flujo li { display: inline-flex; align-items: center; gap: .5rem; }
.flujo li + li::before { content: "→"; color: var(--plata); font-weight: 400; }

/* Cadena de Confianza */
.cadena { position: relative; display: grid; }
.eslabon { position: relative; padding: 0 0 1.75rem 2.25rem; }
.eslabon::before {
  content: ""; position: absolute; left: 0; top: .3rem;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid var(--azul); background: var(--sup);
}
.eslabon::after { content: ""; position: absolute; left: 7px; top: 1.35rem; bottom: 0; width: 1px; background: var(--linea-fuerte); }
.eslabon:last-child::after { display: none; }
.eslabon--clave::before { background: var(--rojo); border-color: var(--rojo); }
.eslabon h3 { font-size: var(--t-base); line-height: 1.4; }
.eslabon p { margin-top: .25rem; font-size: var(--t-sm); color: var(--tinta-2); }
@media (min-width: 1024px) {
  .cadena { grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--gutter); }
  .cadena::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--linea-fuerte); }
  .eslabon { padding: 2.25rem 0 0; }
  .eslabon::before { top: 0; }
  .eslabon::after { display: none; }
}
.leyenda { display: flex; align-items: center; gap: .625rem; margin-top: 2.5rem; font-size: var(--t-sm); color: var(--tinta-2); }
.leyenda::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--rojo); }

/* Filas de definición (término a la izquierda) */
.filas { border-top: 1px solid var(--azul); }
.filas > div { display: grid; gap: .375rem; padding: 1.25rem 0; border-bottom: 1px solid var(--linea); }
.filas dt { font: 600 var(--t-base)/1.4 var(--f-display); color: var(--azul); }
.filas dd { font-size: var(--t-md); color: var(--tinta-2); max-width: 64ch; }
@media (min-width: 768px) { .filas > div { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gutter); } }

/* Alcance: sí hace / no hace */
.alcance { display: grid; gap: 3rem var(--gutter); }
@media (min-width: 768px) { .alcance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.alcance h3 { display: flex; align-items: center; gap: .625rem; padding-bottom: 1rem; font-size: var(--t-lg); border-bottom: 1px solid var(--azul); }
.alcance .no h3 { color: var(--tinta); border-bottom-color: var(--linea-fuerte); }
.alcance li { display: grid; grid-template-columns: 20px 1fr; gap: .875rem; align-items: start; padding: .9375rem 0; border-bottom: 1px solid var(--linea); font-size: var(--t-md); }
.alcance li svg { width: 20px; height: 20px; margin-top: .1rem; }
.alcance .si svg { color: var(--azul-tec); }
.alcance .no svg { color: var(--plata); }
.alcance .no li { color: var(--tinta-2); }

.aparte { margin-top: 3rem; padding-left: 1.5rem; border-left: 2px solid var(--azul); max-width: 72ch; }
.aparte p { font-size: var(--t-md); color: var(--tinta); }
.aparte p + p { margin-top: .75rem; }

/* Frases que anticipan la necesidad */
.frases { display: grid; gap: 0 var(--gutter); border-top: 1px solid var(--linea-fuerte); }
@media (min-width: 640px) { .frases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .frases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.frases li { padding: 1.25rem 0; border-bottom: 1px solid var(--linea); font: 500 var(--t-lg)/1.4 var(--f-display); color: var(--azul); letter-spacing: -.005em; }

/* Ruta de contratación */
.ruta { display: grid; gap: 0 var(--gutter); counter-reset: paso; }
@media (min-width: 768px) { .ruta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ruta { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ruta li { counter-increment: paso; padding: 1.25rem 0 1.75rem; border-top: 1px solid var(--linea-fuerte); }
.ruta li::before { content: "Paso " counter(paso); display: block; margin-bottom: .75rem; font: 500 var(--t-2xs)/1 var(--f-dato); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.ruta h4 { font-size: var(--t-lg); }
.ruta p { margin-top: .5rem; font-size: var(--t-sm); color: var(--tinta-2); }

.panel { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--blanco); border: 1px solid var(--linea-fuerte); }
.panel h3 { font-size: var(--t-xl); }
.panel > p { margin-top: .75rem; font-size: var(--t-md); color: var(--tinta-2); }
.panel .lista-fina { margin-top: 1.5rem; }
.panel .nota { margin-top: 1.25rem; }
.panel--linea { background: transparent; border: 0; border-top: 2px solid var(--azul); padding-inline: 0; }

/* 8. Bandas oscuras -------------------------------------------------------- */
.oscura { background: var(--azul); color: var(--sobre-azul); }
.oscura h2, .oscura h3, .oscura h4 { color: var(--blanco); }
.oscura .etiqueta { color: var(--sobre-azul-2); }
.oscura .entrada, .oscura .nota { color: var(--sobre-azul); }
.oscura a:not(.boton) { color: var(--blanco); }
.oscura a:not(.boton):hover { color: var(--sobre-azul); }

.proposito-isotipo { width: 72px; margin-bottom: 2rem; }
.mision { font: 600 var(--t-3xl)/1.18 var(--f-display); letter-spacing: -.018em; color: var(--blanco); max-width: 28ch; text-wrap: balance; }
.proposito-detalle { display: grid; gap: 3rem var(--gutter); margin-top: clamp(3rem, 2rem + 4vw, 5rem); }
@media (min-width: 900px) { .proposito-detalle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proposito-detalle h3 { font: 600 var(--t-xs)/1.4 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--sobre-azul-2); padding-bottom: 1rem; border-bottom: 1px solid var(--linea-azul); }
.proposito-detalle p { margin-top: 1.25rem; font-size: var(--t-lg); color: var(--sobre-azul); max-width: 46ch; }
.principios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: .25rem; }
.principios li { padding: 1rem 0; border-bottom: 1px solid var(--linea-azul); color: var(--blanco); font-weight: 500; font-size: var(--t-md); }
@media (max-width: 419px) { .principios { grid-template-columns: 1fr; } }

/* Contacto */
.contacto-cuerpo { display: grid; gap: 3.5rem var(--gutter); }
@media (min-width: 960px) {
  .contacto-cuerpo { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .contacto-cuerpo .contacto-datos { grid-column: 1 / 7; }
  .contacto-cuerpo .preparar { grid-column: 8 / 13; }
}
.canales { border-top: 1px solid var(--linea-azul); }
.canales > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding: 1.125rem 0; border-bottom: 1px solid var(--linea-azul); align-items: baseline; }
.canales dt { font: 600 var(--t-xs)/1.4 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--sobre-azul-2); }
.canales dd { font-size: var(--t-base); color: var(--blanco); overflow-wrap: anywhere; }
@media (max-width: 479px) { .canales > div { grid-template-columns: 1fr; gap: .25rem; } }
.contacto-accion { margin-top: 2.5rem; }
.preparar h3 { font-size: var(--t-lg); }
.preparar ul { margin-top: 1rem; }
.preparar li { position: relative; padding: .625rem 0 .625rem 1.25rem; border-bottom: 1px solid var(--linea-azul); font-size: var(--t-md); }
.preparar li::before { content: ""; position: absolute; left: 0; top: 1.2rem; width: 6px; height: 1px; background: var(--sobre-azul-2); }
.advertencia { display: grid; grid-template-columns: 20px 1fr; gap: .75rem; margin-top: 1.75rem; font-size: var(--t-sm); color: var(--sobre-azul); }
.advertencia svg { width: 20px; height: 20px; color: var(--sobre-azul-2); }

/* 9. Página de servicio ---------------------------------------------------- */
.migas { padding-top: 2rem; font-size: var(--t-sm); color: var(--tinta-2); }
.migas ol { display: flex; flex-wrap: wrap; gap: .5rem; }
.migas li + li::before { content: "/"; margin-right: .5rem; color: var(--linea-fuerte); }
.migas a { color: var(--tinta-2); }
.migas [aria-current] { color: var(--tinta); }

.portada--servicio { padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.portada--servicio h1 { font-size: var(--t-4xl); max-width: 16ch; }
.portada--servicio .lema-grande { margin-top: 1.75rem; font: 600 var(--t-2xl)/1.3 var(--f-display); letter-spacing: -.01em; color: var(--tinta); max-width: 32ch; }
.datos-rapidos { margin-top: 3rem; border-top: 2px solid var(--azul); }
.datos-rapidos > div { display: grid; gap: .25rem; padding: 1rem 0; border-bottom: 1px solid var(--linea); }
.datos-rapidos dt { font: 600 var(--t-2xs)/1.4 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.datos-rapidos dd { font-size: var(--t-md); color: var(--tinta); }
@media (min-width: 1080px) {
  .portada--servicio .portada-texto { grid-column: 1 / 8; }
  .portada--servicio .datos-rapidos { grid-column: 9 / 13; margin-top: 0; align-self: end; }
}

.tabla-marco { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-md); line-height: 1.5; }
.tabla caption { text-align: left; }
.tabla th[scope="col"] {
  padding: 0 1.25rem .875rem 0; text-align: left; vertical-align: bottom;
  font: 600 var(--t-2xs)/1.4 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2);
  border-bottom: 1px solid var(--azul);
}
.tabla td, .tabla th[scope="row"] { padding: 1rem 1.25rem 1rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.tabla th[scope="row"] { font: 600 var(--t-md)/1.45 var(--f-texto); color: var(--azul); }
.tabla td { color: var(--tinta-2); }
.tabla .col-dato { font-family: var(--f-dato); font-size: var(--t-sm); color: var(--tinta); white-space: nowrap; }
.tabla--frentes th[scope="row"] { width: 22%; }
.tabla--frentes td { width: 39%; }
.tabla--criticidad th[scope="row"] { width: 16%; }

@media (max-width: 767px) {
  .tabla--apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .tabla--apilable, .tabla--apilable tbody, .tabla--apilable tr, .tabla--apilable td, .tabla--apilable th { display: block; width: auto !important; }
  .tabla--apilable tr { padding: 1.125rem 0; border-bottom: 1px solid var(--linea); }
  .tabla--apilable tbody tr:first-child { border-top: 1px solid var(--azul); }
  .tabla--apilable td, .tabla--apilable th[scope="row"] { padding: .25rem 0; border: 0; }
  .tabla--apilable td { white-space: normal; }
  .tabla--apilable td[data-etiqueta]::before {
    content: attr(data-etiqueta); display: block; margin-top: .5rem;
    font: 600 var(--t-2xs)/1.4 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2);
  }
}

.pasos { counter-reset: paso; border-top: 1px solid var(--azul); }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .25rem 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--linea); }
.pasos li::before { content: counter(paso); grid-row: span 2; font: 500 var(--t-sm)/1.7 var(--f-dato); color: var(--tinta-2); }
.pasos h3 { font-size: var(--t-base); line-height: 1.5; }
.pasos p { font-size: var(--t-md); color: var(--tinta-2); }
@media (min-width: 768px) {
  .pasos li { grid-template-columns: 2.5rem minmax(0, 3fr) minmax(0, 8fr); gap: var(--gutter); }
  .pasos li::before { grid-row: auto; }
}

.entregables { display: grid; gap: 3rem var(--gutter); }
@media (min-width: 900px) { .entregables { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 10. Pie ------------------------------------------------------------------ */
.pie { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5rem) 2.5rem; background: var(--blanco); border-top: 1px solid var(--linea); font-size: var(--t-sm); color: var(--tinta-2); }
.pie-sup { display: grid; gap: 3rem var(--gutter); }
/* Espacio de protección: la unidad X (trazo de la M) mide ~2.5 % del ancho;
   los 16 px de margen superan 1X en todos los tamaños. */
.pie-logo-enlace { display: inline-block; margin: -16px; padding: 16px; }
.pie-logo { display: block; width: min(100%, 280px); }
@media (min-width: 600px) { .pie-logo { width: min(100%, 480px); } }
.pie nav h2 { font: 600 var(--t-2xs)/1.4 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 1rem; }
.pie nav li + li { margin-top: .5rem; }
.pie nav a { color: var(--tinta); text-decoration: none; }
.pie nav a:hover { color: var(--azul-tec); text-decoration: underline; }
@media (min-width: 960px) {
  .pie-sup { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pie-marca { grid-column: 1 / 6; }
  .pie nav { grid-column: 10 / 13; }
}
.pie-inf a { margin-left: .5rem; white-space: nowrap; }
.pie-inf { display: grid; gap: .75rem; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding-top: 1.5rem; border-top: 1px solid var(--linea); font-size: var(--t-xs); }
@media (min-width: 960px) { .pie-inf { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); } .pie-inf p:first-child { grid-column: 1 / 6; } .pie-inf p:last-child { grid-column: 7 / 13; } }

/* Páginas simples (aviso de privacidad, 404) */
.pagina-simple { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) var(--seccion); }
.pagina-simple h1 { margin-top: 1.5rem; font-size: var(--t-4xl); line-height: 1.05; letter-spacing: -.025em; max-width: 16ch; }
.pagina-simple .entrada { margin-top: 1.5rem; }
.pagina-simple .acciones { margin-top: 2.5rem; }
.pagina-simple .actualizado { margin-top: 1rem; font-size: var(--t-sm); color: var(--tinta-2); }

/* Aviso de privacidad: texto legal largo, en una sola columna de lectura */
.aviso { display: grid; gap: clamp(2.25rem, 1.8rem + 1.5vw, 3rem); max-width: 68ch; margin-top: clamp(3rem, 2.25rem + 3vw, 4.5rem); padding-top: clamp(2.25rem, 1.8rem + 1.5vw, 3rem); border-top: 1px solid var(--linea); }
.aviso section { display: grid; gap: .875rem; }
.aviso h2 { font-size: var(--t-2xl); }
.aviso p, .aviso li { line-height: 1.65; text-wrap: pretty; }
.aviso ul { display: grid; gap: .625rem; padding-left: 1.25rem; list-style: disc; }
.aviso li::marker { color: var(--plata); }

/* Complementos de sección -------------------------------------------------- */
.siglas + .nota { margin-top: 2rem; }
.lista-fina strong { font-weight: 600; color: var(--azul); }
.panel .etiqueta { margin-bottom: .75rem; }
.panel > p + p { margin-top: .75rem; }
.aparte h3 { margin-bottom: .75rem; font-size: var(--t-lg); }
.subbloque > .subbloque-cab:only-child { margin-bottom: 0; }

.proposito-lado { margin-bottom: 3rem; }
.proposito-lado .etiqueta { display: block; }
.rotulo { margin-bottom: 1.25rem; font: 600 var(--t-xs)/1.4 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--sobre-azul-2); }
@media (min-width: 960px) {
  .proposito-lado { grid-column: 1 / 4; margin-bottom: 0; }
  .proposito-principal { grid-column: 4 / 13; }
}

.pregunta { font: 600 var(--t-2xl)/1.3 var(--f-display); letter-spacing: -.01em; color: var(--azul); max-width: 40ch; text-wrap: balance; }
.cierre { display: grid; gap: 2rem; }
@media (min-width: 960px) { .cierre { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; } .cierre .panel { grid-column: 1 / 7; } .cierre .cierre-texto { grid-column: 8 / 13; } }
.cierre-texto .acciones { margin-top: 2rem; }

.texto + .filas { margin-top: 1.5rem; }
.filas + .texto { margin-top: 2rem; }

.tabla--senales th[scope="row"] { width: 34%; }
.referencias { margin-top: 2rem; }

/* 11. Marcadores de pendiente ---------------------------------------------- */
/* Deliberadamente ajenos a la paleta: deben verse y retirarse antes de publicar. */
.pendiente {
  display: inline; padding: .1em .45em;
  font: 500 var(--t-sm)/1.6 var(--f-dato); letter-spacing: 0;
  color: #5C4300; background: #FFF1C2;
  border: 1px dashed #B8900F; border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* 12. Movimiento e impresión ----------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .cabecera, .menu-boton, .saltar, .acciones, .contacto-accion { display: none !important; }
  .oscura { background: none; color: #000; }
  .oscura h2, .oscura h3, .oscura h4, .oscura .mision, .oscura dd, .principios li { color: #000; }
  .seccion { padding-block: 2rem; }
  a { color: inherit; }
}