/* ==========================================================================
   Salud y EPS en Colombia — Sistema de diseño
   Paleta: amarillo (#12A67C) + azul oscuro (#0A2E3F / #10404F / #16566B)
   Sin dependencias externas. Tipografía del sistema (rápido, privado, sin CDN).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--gris-900);
  font-family: var(--fuente-sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--fuente-serif);
  color: var(--azul-900);
  line-height: 1.2;
  margin: 0 0 .6em;
  font-weight: 700;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 1.25rem + 3.1vw, 3.35rem); }
h2 { font-size: clamp(1.55rem, 1.1rem + 1.7vw, 2.4rem); }
h3 { font-size: clamp(1.18rem, 1rem + .7vw, 1.5rem); }
h4 { font-size: 1.06rem; font-family: var(--fuente-sans); font-weight: 700; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--azul-700); text-decoration-color: var(--azul-300); text-underline-offset: 3px; }
a:hover { color: var(--azul-900); text-decoration-color: var(--amarillo-500); }

ul, ol { margin: 0 0 1.05em; padding-left: 1.25em; }
li { margin-bottom: .45em; }

strong { color: var(--azul-900); font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--gris-200); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--amarillo-500);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--amarillo-400); color: var(--azul-900); }

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Azules */
  /* Turquesa (color primario propio de este sitio) */
  --azul-900: #0C4A6E;
  --azul-800: #075985;
  --azul-700: #0369A1;
  --azul-600: #0284C7;
  --azul-500: #0EA5E9;
  --azul-400: #38BDF8;
  --azul-300: #7DD3FC;
  --azul-200: #BAE6FD;
  --azul-100: #E0F2FE;
  --azul-050: #F0F9FF;

  /* Coral (acento propio, sin relación con el acento del otro proyecto) */
  --amarillo-600: #C2410C;
  --amarillo-500: #EA580C;
  --amarillo-400: #FB923C;
  --amarillo-200: #FED7AA;
  --amarillo-100: #FFEDD5;

  /* Neutros */
  --gris-900: #0F172A;
  --gris-800: #1E293B;
  --gris-700: #334155;
  --gris-600: #475569;
  --gris-500: #64748B;
  --gris-300: #CBD5E1;
  --gris-200: #E2E8F0;
  --gris-100: #F1F5F9;
  --gris-050: #F8FAFC;
  --blanco: #FFFFFF;

  /* Semánticos */
  --ok: #16794C;
  --ok-bg: #E6F5EE;
  --alerta: #9A5B00;
  --alerta-bg: #FFF4DD;
  --info-bg: var(--azul-050);
  --info-border: var(--azul-200);

  /* Tipografía */
  /* Tipografía invertida respecto al otro proyecto:
     titulares en sans, lectura en serif, interfaz en sans. */
  --fuente-sans: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --fuente-serif: "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-ui: "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --ancho: 1140px;
  --ancho-angosto: 760px;
  --radio: 4px;
  --radio-s: 2px;
  --sombra-sm: 0 1px 2px rgba(12, 74, 110, .05);
  --sombra: 0 2px 10px rgba(12, 74, 110, .07);
  --sombra-lg: 0 6px 24px rgba(12, 74, 110, .10);
  --borde: 1px solid var(--azul-100);
  --borde-azul: 1px solid var(--azul-200);
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 22px;
}

.contenedor--angosto { max-width: var(--ancho-angosto); }

.seccion { padding: clamp(48px, 6vw, 84px) 0; }
.seccion--gris { background: var(--gris-050); }
.seccion--azul-claro { background: var(--azul-050); }
.seccion--oscura { background: var(--azul-900); color: var(--azul-100); }
.seccion--oscura h2,
.seccion--oscura h3,
.seccion--oscura h4 { color: var(--blanco); }
.seccion--oscura a { color: var(--amarillo-400); }
.seccion--oscura .seccion__cabeza p { color: var(--azul-200); }

.seccion__cabeza {
  max-width: 720px;
  margin-bottom: clamp(28px, 3.6vw, 46px);
}
.seccion__cabeza--centro { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fuente-sans);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--azul-600);
  margin: 0 0 14px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--amarillo-500);
}
.seccion--oscura .eyebrow { color: var(--amarillo-400); }

.seccion__cabeza h2 { margin-bottom: .5em; }
.seccion__cabeza p {
  font-size: 1.06rem;
  color: var(--gris-700);
  margin-bottom: 0;
}

.rejilla {
  display: grid;
  gap: 22px;
}
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }
.rejilla--destaque { grid-template-columns: 1.15fr .85fr; align-items: center; }
.rejilla--apilado { grid-template-columns: .85fr 1.15fr; align-items: center; }

.pila > * + * { margin-top: 18px; }

/* --------------------------------------------------------------------------
   4. Botones
   -------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--fuente-sans);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 14px 24px;
  border-radius: var(--radio-s);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}
.boton svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }

.boton--primario {
  background: var(--amarillo-500);
  color: var(--azul-900);
  box-shadow: 0 2px 0 var(--amarillo-600);
}
.boton--primario:hover { background: var(--amarillo-400); color: var(--azul-900); box-shadow: 0 4px 12px rgba(199, 148, 0, .35); }

.boton--oscuro {
  background: var(--azul-800);
  color: var(--blanco);
  box-shadow: 0 2px 0 var(--azul-900);
}
.boton--oscuro:hover { background: var(--azul-700); color: var(--blanco); }

.boton--linea {
  background: transparent;
  color: var(--azul-800);
  border-color: var(--azul-300);
}
.boton--linea:hover { border-color: var(--azul-700); color: var(--azul-900); background: var(--azul-050); }

.boton--linea-claro {
  background: transparent;
  color: var(--blanco);
  border-color: rgba(255, 255, 255, .42);
}
.boton--linea-claro:hover { border-color: var(--amarillo-500); color: var(--amarillo-400); background: rgba(255, 255, 255, .06); }

.boton--claro {
  background: var(--blanco);
  color: var(--azul-900);
}
.boton--claro:hover { background: var(--azul-050); color: var(--azul-900); }

.boton--bloque { width: 100%; }

.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   5. Barra superior + banner de políticas (fijo en la parte baja)
   -------------------------------------------------------------------------- */
.barra-superior {
  background: var(--azul-900);
  color: var(--azul-200);
  font-size: .82rem;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.barra-superior .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
  flex-wrap: wrap;
}
.barra-superior__texto { display: flex; align-items: center; gap: 9px; }
.barra-superior__punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amarillo-500);
  flex-shrink: 0;
}
.barra-superior a { color: var(--amarillo-400); text-decoration: none; font-weight: 600; }
.barra-superior a:hover { color: var(--amarillo-200); text-decoration: underline; }

/* --- Banner de políticas: fijo abajo, horizontal --- */
body { padding-bottom: var(--alto-banner-politicas, 0px); }

.banner-politicas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--azul-900);
  color: var(--blanco);
  border-top: 3px solid var(--amarillo-500);
  box-shadow: 0 -10px 34px rgba(10, 31, 60, .28);
  animation: bannerSube .28s ease-out;
}
.banner-politicas[hidden] { display: none; }

@keyframes bannerSube {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.banner-politicas .contenedor {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-block: 13px;
}

.banner-politicas__texto {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
}
.banner-politicas__icono {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 195, 0, .16);
  border: 1px solid rgba(255, 195, 0, .38);
  display: grid;
  place-items: center;
  color: var(--amarillo-500);
}
.banner-politicas__icono svg { width: 18px; height: 18px; }
.banner-politicas__titulo {
  margin: 0 0 2px;
  font-family: var(--fuente-sans);
  font-size: .93rem;
  font-weight: 800;
  color: var(--blanco);
}
.banner-politicas__desc {
  margin: 0;
  font-size: .86rem;
  color: var(--azul-200);
  line-height: 1.5;
}
.banner-politicas__desc strong { color: var(--amarillo-400); }
.banner-politicas__desc a { color: var(--amarillo-400); font-weight: 700; }

.banner-politicas__acciones {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.banner-politicas__acciones .boton { padding: 11px 22px; font-size: .9rem; white-space: nowrap; }

.boton--aceptar {
  background: var(--amarillo-500);
  color: var(--azul-900);
  border-color: var(--amarillo-500);
  box-shadow: 0 2px 0 var(--amarillo-600);
}
.boton--aceptar:hover { background: var(--amarillo-400); color: var(--azul-900); }

.boton--rechazar {
  background: transparent;
  color: var(--blanco);
  border-color: rgba(255, 255, 255, .5);
}
.boton--rechazar:hover { background: rgba(255, 255, 255, .1); color: var(--blanco); border-color: var(--amarillo-500); }

/* --------------------------------------------------------------------------
   6. Encabezado y navegación
   -------------------------------------------------------------------------- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: var(--borde);
}
.encabezado .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 70px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
}
.marca__logo {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--azul-900);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.marca__logo svg { width: 22px; height: 22px; }
.marca__nombre {
  font-family: var(--fuente-sans);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.15;
  color: var(--azul-900);
  letter-spacing: -.01em;
}
.marca__nombre span { display: block; font-size: .72rem; font-weight: 600; color: var(--gris-500); letter-spacing: .02em; }

.nav-principal { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
.nav-principal ul { flex-wrap: nowrap; }
.nav-principal a {
  font-size: .85rem;
  font-weight: 600;
  color: var(--gris-700);
  text-decoration: none;
  padding: 8px 8px;
  border-radius: var(--radio-s);
  transition: background-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.nav-principal a:hover { background: var(--azul-050); color: var(--azul-900); }
.nav-principal a[aria-current="page"] { color: var(--azul-900); background: var(--azul-100); }

.nav-acciones { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-acciones .boton { padding: 11px 18px; font-size: .9rem; }

.menu-movil {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-s);
  background: var(--blanco);
  cursor: pointer;
  place-items: center;
  color: var(--azul-900);
}
.menu-movil svg { width: 22px; height: 22px; }

.nav-movil { display: none; }

/* --------------------------------------------------------------------------
   7. Portada (hero)
   -------------------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(1100px 520px at 88% -10%, rgba(58, 110, 165, .40), transparent 62%),
    linear-gradient(160deg, var(--azul-900) 0%, var(--azul-800) 58%, var(--azul-700) 100%);
  color: var(--blanco);
  padding: clamp(52px, 7vw, 96px) 0 clamp(56px, 7vw, 92px);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -140px; bottom: -190px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 195, 0, .22), transparent 68%);
  pointer-events: none;
}
.hero .contenedor { position: relative; z-index: 1; }
.hero__rejilla {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}
.hero__insignia {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 195, 0, .16);
  border: 1px solid rgba(255, 195, 0, .42);
  color: var(--amarillo-400);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 8px 15px;
  border-radius: 100px;
  margin-bottom: 22px;
}
.hero__insignia svg { width: 15px; height: 15px; }
.hero h1 { color: var(--blanco); margin-bottom: .45em; }
.hero h1 em { font-style: normal; color: var(--amarillo-500); }
.hero__entrada {
  font-size: clamp(1.02rem, .96rem + .35vw, 1.16rem);
  color: var(--azul-100);
  max-width: 560px;
  margin-bottom: 30px;
  line-height: 1.75;
}
.hero .grupo-botones { margin-bottom: 34px; }

.hero__datos {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 14px 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .17);
  justify-content: start;
}
.hero__dato strong {
  display: block;
  font-family: var(--fuente-sans);
  font-size: 1.42rem;
  color: var(--amarillo-500);
  line-height: 1.1;
  font-weight: 800;
}
.hero__dato span {
  font-size: .83rem;
  color: var(--azul-200);
  display: block;
  margin-top: 3px;
}

/* Ilustración SVG */
.hero__arte {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 20px;
  padding: 22px;
  box-shadow: var(--sombra-lg);
  backdrop-filter: blur(6px);
}
.hero__arte svg { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   8. Tarjetas
   -------------------------------------------------------------------------- */
.tarjeta {
  background: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio);
  padding: 26px;
  box-shadow: var(--sombra-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height: 100%;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--azul-200); }
.tarjeta__icono {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--azul-050);
  border: 1px solid var(--azul-100);
  display: grid;
  place-items: center;
  color: var(--azul-700);
  margin-bottom: 17px;
}
.tarjeta__icono svg { width: 24px; height: 24px; }
.tarjeta__icono--amarillo {
  background: var(--amarillo-100);
  border-color: var(--amarillo-200);
  color: var(--amarillo-600);
}
.tarjeta h3 { font-size: 1.16rem; margin-bottom: .45em; }
.tarjeta p { color: var(--gris-700); font-size: .97rem; margin-bottom: 0; }
.tarjeta__lista { list-style: none; padding: 0; margin: 16px 0 0; }
.tarjeta__lista li {
  position: relative;
  padding-left: 25px;
  font-size: .94rem;
  color: var(--gris-700);
  margin-bottom: 8px;
}
.tarjeta__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--amarillo-500);
}
.tarjeta__enlace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--azul-700);
  text-decoration: none;
}
.tarjeta__enlace:hover { color: var(--azul-900); gap: 10px; }
.tarjeta__enlace svg { width: 15px; height: 15px; transition: gap .18s ease; }

.tarjeta--oscura {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: none;
}
.tarjeta--oscura:hover { background: rgba(255, 255,255,.08); border-color: rgba(255,195,0,.4); }
.tarjeta--oscura h3 { color: var(--blanco); }
.tarjeta--oscura p { color: var(--azul-200); }
.tarjeta--oscura .tarjeta__icono { background: rgba(255,195,0,.14); border-color: rgba(255,195,0,.3); color: var(--amarillo-400); }
.tarjeta--oscura .tarjeta__lista li { color: var(--azul-200); }

/* --------------------------------------------------------------------------
   9. Pasos / proceso
   -------------------------------------------------------------------------- */
.pasos { counter-reset: paso; display: grid; gap: 20px; }
.paso {
  counter-increment: paso;
  position: relative;
  background: var(--blanco);
  border: var(--borde);
  border-left: 4px solid var(--amarillo-500);
  border-radius: var(--radio);
  padding: 24px 26px 24px 72px;
}
.paso::before {
  content: counter(paso);
  position: absolute;
  left: 24px; top: 22px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--azul-900);
  color: var(--amarillo-500);
  font-family: var(--fuente-sans);
  font-weight: 800;
  font-size: .9rem;
  display: grid;
  place-items: center;
}
.paso h3 { font-size: 1.1rem; margin-bottom: .35em; }
.paso p { color: var(--gris-700); font-size: .97rem; margin-bottom: 0; }
.paso__meta {
  display: inline-block;
  margin-top: 12px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--azul-600);
  background: var(--azul-050);
  border: 1px solid var(--azul-100);
  padding: 5px 11px;
  border-radius: 100px;
}

/* --------------------------------------------------------------------------
   10. Listas con ícono, citas, avisos
   -------------------------------------------------------------------------- */
.lista-iconos { list-style: none; padding: 0; margin: 0; }
.lista-iconos li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 13px;
  color: var(--gris-700);
}
.lista-iconos li:last-child { margin-bottom: 0; }
.lista-iconos li::before {
  content: "";
  position: absolute;
  left: 0; top: .38em;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--azul-800);
  box-shadow: inset 0 0 0 4px var(--amarillo-500);
}
.seccion--oscura .lista-iconos li { color: var(--azul-100); }
.seccion--oscura .lista-iconos li::before { background: var(--amarillo-500); box-shadow: inset 0 0 0 4px var(--azul-800); }

.aviso {
  border-radius: var(--radio);
  padding: 20px 24px;
  border-left: 4px solid var(--azul-600);
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-left: 4px solid var(--azul-600);
  font-size: .96rem;
  color: var(--gris-800);
}
.aviso strong { color: var(--azul-900); }
.aviso__titulo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--fuente-sans);
  font-weight: 800;
  font-size: .97rem;
  color: var(--azul-900);
  margin: 0 0 8px;
}
.aviso__titulo svg { width: 19px; height: 19px; color: var(--azul-600); flex-shrink: 0; }
.aviso--alerta { background: var(--alerta-bg); border-color: var(--amarillo-200); border-left-color: var(--amarillo-600); }
.aviso--alerta .aviso__titulo { color: var(--alerta); }
.aviso--alerta .aviso__titulo svg { color: var(--alerta-600); }
.aviso--ok { background: var(--ok-bg); border-color: #B7E2CE; border-left-color: var(--ok); }
.aviso--ok .aviso__titulo { color: var(--ok); }
.aviso--ok .aviso__titulo svg { color: var(--ok); }
.aviso p:last-child { margin-bottom: 0; }

.cita {
  border-left: 4px solid var(--amarillo-500);
  padding: 4px 0 4px 22px;
  font-family: var(--fuente-serif);
  font-size: 1.14rem;
  line-height: 1.65;
  color: var(--azul-900);
  font-style: italic;
}
.cita cite {
  display: block;
  margin-top: 10px;
  font-family: var(--fuente-sans);
  font-style: normal;
  font-size: .86rem;
  font-weight: 700;
  color: var(--gris-500);
}

/* --------------------------------------------------------------------------
   11. Tablas
   -------------------------------------------------------------------------- */
.tabla-envoltura {
  overflow-x: auto;
  border: var(--borde);
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: var(--sombra-sm);
}
table.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 540px; }
table.tabla caption {
  text-align: left;
  padding: 16px 20px 0;
  font-family: var(--fuente-sans);
  font-size: .86rem;
  font-weight: 700;
  color: var(--gris-500);
}
table.tabla th, table.tabla td { padding: 13px 20px; text-align: left; border-bottom: 1px solid var(--gris-200); vertical-align: top; }
table.tabla thead th {
  background: var(--azul-900);
  color: var(--blanco);
  font-family: var(--fuente-sans);
  font-size: .84rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
table.tabla tbody tr:nth-child(even) { background: var(--gris-050); }
table.tabla tbody tr:last-child td { border-bottom: 0; }
table.tabla td strong { color: var(--azul-900); }

/* --------------------------------------------------------------------------
   12. Preguntas frecuentes (acordeón)
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 12px; }
.faq__item {
  background: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
}
.faq__pregunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 22px;
  background: transparent;
  border: 0;
  font-family: var(--fuente-sans);
  font-size: 1.01rem;
  font-weight: 700;
  color: var(--azul-900);
  text-align: left;
  cursor: pointer;
  line-height: 1.45;
}
.faq__pregunta:hover { background: var(--azul-050); }
.faq__pregunta:focus-visible { outline-offset: -3px; }
.faq__icono {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--azul-300);
  color: var(--azul-700);
  display: grid;
  place-items: center;
  transition: transform .22s ease, background-color .22s ease, border-color .22s ease;
}
.faq__icono svg { width: 13px; height: 13px; }
.faq__item[data-abierto="true"] .faq__icono {
  transform: rotate(45deg);
  background: var(--amarillo-500);
  border-color: var(--amarillo-500);
  color: var(--azul-900);
}
.faq__respuesta {
  padding: 0 22px 20px;
  color: var(--gris-700);
  font-size: .97rem;
  border-top: 1px solid var(--gris-100);
  padding-top: 16px;
}
.faq__respuesta p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   13. Formulario
   -------------------------------------------------------------------------- */
.formulario { display: grid; gap: 18px; }
.campo { display: grid; gap: 7px; }
.campo label {
  font-family: var(--fuente-sans);
  font-size: .88rem;
  font-weight: 700;
  color: var(--azul-900);
}
.campo input, .campo textarea, .campo select {
  font-family: var(--fuente-sans);
  font-size: .98rem;
  color: var(--gris-900);
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-s);
  padding: 13px 15px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo textarea { min-height: 150px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: var(--azul-600);
  box-shadow: 0 0 0 3px rgba(58, 110, 165, .18);
}
.campo__ayuda { font-size: .82rem; color: var(--gris-500); margin: 0; }
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23434A53' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
  padding-right: 40px;
}
.formulario__nota {
  font-size: .85rem;
  color: var(--gris-600);
  background: var(--gris-050);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-s);
  padding: 14px 16px;
}
.formulario__nota a { font-weight: 600; }

/* --------------------------------------------------------------------------
   14. Banner de contacto inferior
   -------------------------------------------------------------------------- */
.banner-contacto {
  background: var(--azul-900);
  color: var(--blanco);
  border-top: 3px solid var(--amarillo-500);
  padding: 30px 0;
}
.banner-contacto .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}
.banner-contacto__bloque { display: flex; align-items: center; gap: 16px; min-width: 0; }
.banner-contacto__icono {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(255, 195, 0, .14);
  border: 1px solid rgba(255, 195, 0, .34);
  display: grid;
  place-items: center;
  color: var(--amarillo-500);
  flex-shrink: 0;
}
.banner-contacto__icono svg { width: 22px; height: 22px; }
.banner-contacto__titulo {
  font-family: var(--fuente-sans);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amarillo-400);
  margin: 0 0 4px;
}
.banner-contacto__linea {
  margin: 0 0 3px;
  font-size: .95rem;
  color: var(--azul-100);
}
.banner-contacto__linea strong { color: var(--blanco); font-weight: 700; }
.banner-contacto__linea--enlace a { color: var(--amarillo-400); font-weight: 700; text-decoration: none; }
.banner-contacto__linea--enlace a:hover { text-decoration: underline; }
.banner-contacto__acciones { display: flex; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   15. Pie de página
   -------------------------------------------------------------------------- */
.pie {
  background: var(--azul-950, #071729);
  color: var(--azul-300);
  padding: 54px 0 0;
  font-size: .92rem;
}
.pie__rejilla {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 34px;
  padding-bottom: 42px;
}
.pie__col h3 {
  font-family: var(--fuente-sans);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amarillo-500);
  margin: 0 0 16px;
}
.pie__col ul { list-style: none; padding: 0; margin: 0; }
.pie__col li { margin-bottom: 9px; }
.pie__col a { color: var(--azul-200); text-decoration: none; }
.pie__col a:hover { color: var(--amarillo-400); text-decoration: underline; }
.pie__marca { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.pie__marca .marca__logo { background: rgba(255,195,0,.14); border: 1px solid rgba(255,195,0,.3); }
.pie__marca .marca__nombre { color: var(--blanco); }
.pie__marca .marca__nombre span { color: var(--azul-400); }
.pie__texto { color: var(--azul-400); line-height: 1.7; max-width: 320px; }
.pie__contacto li { display: flex; gap: 10px; align-items: flex-start; color: var(--azul-300); }
.pie__contacto svg { width: 15px; height: 15px; color: var(--amarillo-500); flex-shrink: 0; margin-top: 5px; }
.pie__contacto strong { color: var(--blanco); }
.pie__legal {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 22px 0 30px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--gris-500);
}
.pie__legal a { color: var(--azul-400); }
.pie__legal-links { display: flex; gap: 20px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   16. Migas de pan + encabezado de página
   -------------------------------------------------------------------------- */
.migas { padding: 14px 0; font-size: .84rem; color: var(--gris-500); }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; }
.migas li { margin: 0; display: flex; align-items: center; gap: 7px; }
.migas li + li::before { content: "/"; color: var(--gris-300); }
.migas a { color: var(--gris-600); text-decoration: none; }
.migas a:hover { color: var(--azul-800); text-decoration: underline; }
.migas [aria-current="page"] { color: var(--azul-900); font-weight: 600; }

.cabecera-pagina {
  background: linear-gradient(150deg, var(--azul-900), var(--azul-800));
  color: var(--blanco);
  padding: clamp(38px, 5vw, 62px) 0 clamp(40px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}
.cabecera-pagina::after {
  content: "";
  position: absolute;
  right: -120px; top: -140px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,195,0,.18), transparent 68%);
  pointer-events: none;
}
.cabecera-pagina .contenedor { position: relative; z-index: 1; }
.cabecera-pagina h1 { color: var(--blanco); max-width: 820px; margin-bottom: .45em; }
.cabecera-pagina h1 em { font-style: normal; color: var(--amarillo-500); }
.cabecera-pagina__entrada {
  font-size: 1.07rem;
  color: var(--azul-100);
  max-width: 720px;
  line-height: 1.72;
}
.cabecera-pagina__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 22px;
  font-size: .85rem;
  color: var(--azul-300);
}
.cabecera-pagina__meta span { display: flex; align-items: center; gap: 7px; }
.cabecera-pagina__meta svg { width: 14px; height: 14px; color: var(--amarillo-500); }

/* --------------------------------------------------------------------------
   17. Bloques de artículo
   -------------------------------------------------------------------------- */
.prosa { max-width: var(--ancho-angosto); margin-inline: auto; }
.prosa > * + * { margin-top: 1.05em; }
.prosa h2 { margin-top: 1.9em; }
.prosa h3 { margin-top: 1.6em; font-size: 1.2rem; }
.prosa ul, .prosa ol { padding-left: 1.4em; }
.prosa li { color: var(--gris-700); }
.prosa li::marker { color: var(--azul-500); font-weight: 700; }
.prosa > h2:first-child, .prosa > h3:first-child { margin-top: 0; }

.indice {
  background: var(--azul-050);
  border: 1px solid var(--azul-100);
  border-radius: var(--radio);
  padding: 24px 26px;
}
.indice h2 {
  font-family: var(--fuente-sans);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--azul-700);
  margin: 0 0 14px;
}
.indice ol { margin: 0; padding-left: 1.2em; }
.indice li { margin-bottom: 7px; font-size: .95rem; }
.indice li:last-child { margin-bottom: 0; }
.indice a { text-decoration: none; font-weight: 600; color: var(--azul-700); }
.indice a:hover { text-decoration: underline; color: var(--azul-900); }

/* --------------------------------------------------------------------------
   18. Módulos de sección (usado en portada)
   -------------------------------------------------------------------------- */
.modulo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}
.modulo--invertido .modulo__texto { order: 2; }
.modulo__caja {
  background: var(--azul-050);
  border: 1px solid var(--azul-100);
  border-radius: 18px;
  padding: 30px;
}
.modulo__caja--oscura {
  background: var(--azul-900);
  border-color: var(--azul-800);
  color: var(--azul-100);
}

.tarjeta-cta {
  background: linear-gradient(140deg, var(--azul-800), var(--azul-900));
  border-radius: 20px;
  padding: clamp(30px, 4vw, 52px);
  text-align: center;
  color: var(--blanco);
  position: relative;
  overflow: hidden;
}
.tarjeta-cta::after {
  content: "";
  position: absolute;
  left: -100px; bottom: -160px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,195,0,.2), transparent 68%);
  pointer-events: none;
}
.tarjeta-cta > * { position: relative; z-index: 1; }
.tarjeta-cta h2 { color: var(--blanco); }
.tarjeta-cta p { color: var(--azul-100); max-width: 640px; margin-inline: auto; margin-bottom: 26px; }
.tarjeta-cta .grupo-botones { justify-content: center; }

/* --------------------------------------------------------------------------
   19. Accesibilidad y utilidades
   -------------------------------------------------------------------------- */
.salto-contenido {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-130%);
  background: var(--azul-900);
  color: var(--blanco);
  padding: 12px 20px;
  border-radius: 0 0 var(--radio-s) 0;
  z-index: 999;
  font-weight: 700;
  transition: transform .15s ease;
}
.salto-contenido:focus { transform: translateY(0); }

.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;
}

.centrado { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 12px !important; }
.mt-2 { margin-top: 22px !important; }
.mt-3 { margin-top: 34px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 12px !important; }
.mb-2 { margin-bottom: 22px !important; }
.mb-3 { margin-bottom: 34px !important; }
.texto-gris { color: var(--gris-600); }
.texto-azul-claro { color: var(--azul-200); }
.ancho-completo { width: 100%; }

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .nav-principal a { padding: 8px 7px; font-size: .84rem; }
  .nav-acciones .boton { padding: 11px 15px; font-size: .86rem; }
  .marca__nombre { font-size: .96rem; }
}

@media (max-width: 1024px) {
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
  .nav-principal { display: none; }
  .nav-acciones .boton { display: none; }
  .menu-movil { display: grid; }
  .hero__rejilla { grid-template-columns: 1fr; }
  .hero__arte { max-width: 480px; }
  .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--destaque, .rejilla--apilado { grid-template-columns: 1fr; }
  .modulo { grid-template-columns: 1fr; }
  .modulo--invertido .modulo__texto { order: 0; }
}

@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
  .hero__datos { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .pie__rejilla { grid-template-columns: 1fr; gap: 30px; }
  .banner-contacto .contenedor { flex-direction: column; align-items: flex-start; }
  .banner-politicas .contenedor { gap: 14px; padding-block: 11px; }
  .banner-politicas__icono { display: none; }
  .banner-politicas__titulo { font-size: .87rem; }
  .banner-politicas__desc { font-size: .8rem; }
  .banner-politicas__acciones .boton { padding: 10px 15px; font-size: .82rem; }
  .modulo__caja { padding: 22px; }
  .paso { padding: 22px 20px 22px 22px; }
  .paso::before { position: static; margin-bottom: 12px; }

  /* Menú móvil desplegable */
  .nav-movil {
    display: block;
    border-top: 1px solid var(--gris-200);
    background: var(--blanco);
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
  }
  .nav-movil[data-abierto="true"] { max-height: 560px; border-bottom: var(--borde); }
  .nav-movil ul { list-style: none; margin: 0; padding: 10px 0 16px; }
  .nav-movil li { margin: 0; }
  .nav-movil a {
    display: block;
    padding: 12px 22px;
    color: var(--gris-800);
    text-decoration: none;
    font-weight: 600;
    font-size: .97rem;
    border-bottom: 1px solid var(--gris-100);
  }
  .nav-movil a:hover { background: var(--azul-050); color: var(--azul-900); }
  .nav-movil .boton { margin: 14px 22px 0; width: auto; display: inline-flex; }
}

@media (max-width: 640px) {
  .banner-politicas__desc { display: none; }
  .banner-politicas__titulo { margin: 0; }
}

@media (max-width: 460px) {
  .hero__datos { grid-template-columns: 1fr; gap: 12px; }
  .grupo-botones .boton { width: 100%; }
  .banner-contacto__acciones { width: 100%; }
  .banner-contacto__acciones .boton { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .boton:hover, .tarjeta:hover { transform: none; }
}

@media print {
  .encabezado, .barra-superior, .banner-politicas, .banner-contacto, .pie__legal, .menu-movil, .nav-movil { display: none !important; }
  body { padding-bottom: 0 !important; }
  body { font-size: 11.5pt; color: #000; }
  .seccion, .cabecera-pagina, .hero { padding: 16pt 0; background: #fff !important; color: #000 !important; }
  .cabecera-pagina h1, .hero h1, .seccion--oscura h2 { color: #000 !important; }
  a { text-decoration: underline; color: #000; }
  .contenedor { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   21. Componentes añadidos tras integrar el contenido completo
   -------------------------------------------------------------------------- */
.cabecera-pagina__etiqueta {
  display: inline-block;
  font-family: var(--fuente-sans);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--azul-700);
  background: var(--azul-050);
  border: 1px solid var(--azul-100);
  padding: 7px 14px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.tabla-nota {
  display: inline-block;
  margin-top: 5px;
  font-size: .84rem;
  color: var(--gris-600);
  font-weight: 400;
}

.lista-verificacion {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: check;
}
.lista-verificacion li {
  position: relative;
  padding: 11px 14px 11px 46px;
  margin-bottom: 8px;
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-s);
  font-size: .96rem;
  color: var(--gris-700);
  line-height: 1.55;
}
.lista-verificacion li::before {
  content: "";
  position: absolute;
  left: 16px; top: 15px;
  width: 17px; height: 17px;
  border: 2px solid var(--amarillo-500);
  border-radius: 5px;
  background: var(--amarillo-100);
}

.faq__titulo { margin: 0; font-size: inherit; font-family: inherit; }
.faq__titulo .faq__pregunta { display: flex; }

.definiciones { margin: 0; }
.definiciones dt {
  font-family: var(--fuente-sans);
  font-weight: 800;
  color: var(--azul-900);
  margin-top: 20px;
  font-size: 1.02rem;
}
.definiciones dt:first-child { margin-top: 0; }
.definiciones dd {
  margin: 5px 0 0;
  padding-left: 0;
  color: var(--gris-700);
  font-size: .97rem;
}

.ejemplo {
  background: var(--azul-050);
  border: 1px solid var(--azul-100);
  border-left: 4px solid var(--azul-600);
  border-radius: var(--radio-s);
  padding: 18px 22px;
  margin: 0 0 18px;
}
.ejemplo__texto {
  margin: 0;
  font-style: italic;
  color: var(--azul-800);
  font-size: 1rem;
  line-height: 1.6;
}

.nota {
  font-size: .93rem;
  color: var(--gris-600);
  background: var(--gris-050);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-s);
  padding: 14px 18px;
  margin: 0 0 18px;
}

.tarjeta-cta__icono {
  display: inline-grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 16px;
  background: rgba(255, 195, 0, .16);
  border: 1px solid rgba(255, 195, 0, .34);
  color: var(--amarillo-500);
  margin-bottom: 18px;
}
.tarjeta-cta__icono svg { width: 28px; height: 28px; }
.tarjeta-cta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.tarjeta-cta__nota {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .87rem;
  color: var(--azul-300);
  max-width: 620px;
  margin-inline: auto;
}

/* Rejillas y listas dentro de bloques de prosa */
.prosa .rejilla { margin: 1.4em 0; }
.prosa .tabla-envoltura { margin: 1.6em 0; }
.prosa .pasos { margin: 1.4em 0; }
.prosa .aviso { margin: 1.5em 0; }
.prosa .seccion__cabeza { margin-bottom: 1.2em; }


/* ==========================================================================
   IDENTIDAD PROPIA · SITIO "SALUD Y EPS EN COLOMBIA"
   DIRECTRICE: blanco + azul cielo. Fundamento claro, formas rectas, tarjetas
   planas con filete, rieles de tiempo propios y banner en azul claro.
   ========================================================================== */

/* --- Base --- */
body { background: var(--blanco); color: var(--gris-800); }
h1, h2, h3, h4 { font-family: var(--fuente-serif); font-weight: 800; letter-spacing: -.022em; }
h1 { font-size: clamp(1.95rem, 1.2rem + 3.1vw, 3.1rem); line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.35rem); line-height: 1.14; }
h3 { font-size: clamp(1.12rem, .98rem + .7vw, 1.4rem); }
a { color: var(--azul-700); }
a:hover { color: var(--azul-500); }

/* --- Tipografía: interfaz en sans, lectura en serif --- */
.boton,
.nav-principal a,
.marca__nombre,
.eyebrow,
.tarjeta__icono,
.aviso__titulo,
.pie__col h3,
.barra-superior,
.hero__insignia,
.campo label,
.campo input, .campo textarea, .campo select,
.faq__pregunta,
.faq__titulo,
.migas,
table.tabla th,
.boton--aceptar, .boton--rechazar,
.banner-politicas__titulo, .banner-politicas__desc,
.banner-contacto__titulo, .banner-contacto__linea,
.hero__dato strong, .hero__dato span,
.secuencia__numero, .secuencia__titulo, .secuencia__meta,
.consulta__pregunta,
.cabecera-pagina__meta,
.cierre__titulo, .cierre__texto,
.tabla-nota,
.cita cite {
  font-family: var(--fuente-ui, "Avenir Next", "Segoe UI", Roboto, Arial, sans-serif);
}

/* --- Secciones --- */
.seccion { background: var(--blanco); }
.seccion--gris { background: var(--azul-050); }
.seccion--azul-claro { background: var(--azul-100); }
.seccion--oscura { background: var(--azul-800); color: var(--azul-100); }
.seccion--oscura h2, .seccion--oscura h3, .seccion--oscura h4 { color: var(--blanco); }
.seccion--oscura a { color: var(--azul-300); }
.seccion--oscura .seccion__cabeza p { color: var(--azul-200); }

/* --- Encabezado de sección: filete vertical --- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--azul-700);
  margin: 0 0 16px;
}
.eyebrow::before {
  content: "";
  width: 3px; height: 20px;
  background: var(--azul-500);
  border-radius: 0;
  flex-shrink: 0;
}
.seccion--oscura .eyebrow { color: var(--azul-300); }
.seccion--oscura .eyebrow::before { background: var(--azul-300); }
.seccion__cabeza { max-width: 780px; }
.seccion__cabeza--centro { text-align: left; }

/* --- Botones en píldora --- */
.boton {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 13px 26px;
  box-shadow: none !important;
  border-width: 1.5px;
}
.boton:hover { transform: none; }
.boton--primario { background: var(--azul-700); color: #fff; border-color: var(--azul-700); }
.boton--primario:hover { background: var(--azul-800); color: #fff; }
.boton--oscuro { background: var(--azul-800); color: #fff; border-color: var(--azul-800); }
.boton--oscuro:hover { background: var(--azul-900); color: #fff; }
.boton--linea { border-color: var(--azul-300); color: var(--azul-800); background: #fff; }
.boton--linea:hover { background: var(--azul-050); border-color: var(--azul-600); color: var(--azul-900); }
.boton--linea-claro { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.boton--linea-claro:hover { border-color: var(--azul-300); color: var(--azul-300); background: transparent; }
.boton--claro { background: #fff; color: var(--azul-900); border-color: #fff; }
.boton--aceptar { background: var(--azul-700); color: #fff; border-color: var(--azul-700); }
.boton--aceptar:hover { background: var(--azul-800); color: #fff; }
.boton--rechazar { background: #fff; color: var(--azul-800); border-color: var(--azul-300); }
.boton--rechazar:hover { background: var(--azul-050); color: var(--azul-900); border-color: var(--azul-600); }

/* --- Tarjetas planas con filete --- */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--azul-100);
  border-left: 3px solid var(--azul-400);
  border-radius: 2px;
  padding: 26px 26px 24px;
  box-shadow: none;
  transition: border-color .16s ease;
}
.tarjeta:hover {
  transform: none;
  box-shadow: none;
  border-left-color: var(--azul-600);
  border-color: var(--azul-200);
}
.tarjeta__icono {
  width: 44px; height: 44px;
  border-radius: 2px;
  background: var(--azul-050);
  color: var(--azul-700);
  border: 1px solid var(--azul-200);
  margin-bottom: 16px;
}
.tarjeta__icono--amarillo { background: var(--amarillo-100); color: var(--amarillo-600); border-color: var(--amarillo-200); }
.tarjeta__lista li { padding-left: 22px; }
.tarjeta__lista li::before {
  width: 7px; height: 7px;
  background: var(--azul-500);
  border-radius: 0;
  transform: rotate(45deg);
}
.tarjeta--oscura {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
  border-left-color: var(--azul-400);
}
.tarjeta--oscura:hover { background: rgba(255,255,255,.08); border-left-color: var(--azul-300); }
.tarjeta--oscura .tarjeta__icono { background: rgba(56,189,248,.16); color: var(--azul-300); border-color: rgba(56,189,248,.4); }

/* --- Rejilla de cinco columnas (los cinco criterios) --- */
.rejilla--5 { grid-template-columns: repeat(5, 1fr); gap: 16px; }

/* --- Componente propio: RIEL DE TIEMPO (secuencia) --- */
.secuencia { list-style: none; margin: 0; padding: 0; position: relative; }
.secuencia::before {
  content: "";
  position: absolute;
  left: 19px; top: 14px; bottom: 14px;
  width: 2px;
  background: var(--azul-200);
}
.secuencia__item {
  position: relative;
  padding-left: 66px;
  margin-bottom: 26px;
}
.secuencia__item:last-child { margin-bottom: 0; }
.secuencia__numero {
  position: absolute;
  left: 0; top: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--azul-700);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  border-radius: 2px;
  border: 4px solid var(--blanco);
  box-shadow: 0 0 0 1px var(--azul-200);
}
.secuencia__titulo { margin: 6px 0 8px; font-size: 1.16rem; color: var(--azul-900); }
.secuencia__texto { margin: 0; color: var(--gris-700); }
.secuencia__meta {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 12px;
  background: var(--azul-050);
  border: 1px solid var(--azul-100);
  border-radius: 2px;
  font-size: .82rem;
  color: var(--azul-700);
  font-weight: 600;
}
.seccion--oscura .secuencia::before { background: rgba(255,255,255,.18); }
.seccion--oscura .secuencia__numero { background: var(--azul-500); color: var(--azul-900); border-color: var(--azul-800); box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.seccion--oscura .secuencia__titulo { color: #fff; }
.seccion--oscura .secuencia__texto { color: var(--azul-100); }
.seccion--oscura .secuencia__meta { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: var(--azul-200); }

/* --- Componente propio: CONSULTAS (rejilla, sin acordeón) --- */
.consultas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.consulta {
  background: var(--blanco);
  border: 1px solid var(--azul-100);
  border-top: 3px solid var(--azul-400);
  border-radius: 2px;
  padding: 22px 24px 20px;
}
.consulta__pregunta {
  font-weight: 800;
  font-size: 1.04rem;
  color: var(--azul-900);
  margin: 0 0 10px;
  line-height: 1.34;
}
.consulta__respuesta p { margin: 0 0 10px; color: var(--gris-700); font-size: .97rem; }
.consulta__respuesta p:last-child { margin-bottom: 0; }
.consulta__respuesta a { color: var(--azul-700); font-weight: 600; }

/* --- Componente propio: CIERRE (banda de fin de página) --- */
.cierre {
  border: 1px solid var(--azul-200);
  border-left: 4px solid var(--azul-500);
  background: var(--azul-050);
  border-radius: 2px;
  padding: 34px 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
}
.cierre__titulo { margin: 0 0 10px; font-size: 1.5rem; color: var(--azul-900); }
.cierre__texto { margin: 0 0 10px; color: var(--gris-700); max-width: 68ch; }
.cierre__texto:last-child { margin-bottom: 0; }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.cierre--oscuro { background: var(--azul-800); border-color: var(--azul-800); border-left-color: var(--azul-400); }
.cierre--oscuro .cierre__titulo { color: #fff; }
.cierre--oscuro .cierre__texto { color: var(--azul-100); }

/* --- Avisos --- */
.aviso {
  background: var(--azul-050);
  border: 1px solid var(--azul-100);
  border-top: 3px solid var(--azul-500);
  border-left: 1px solid var(--azul-100);
  border-radius: 2px;
}
.aviso__titulo { color: var(--azul-900); }
.aviso--alerta { background: #FFF7ED; border-color: #FFEDD5; border-top-color: var(--amarillo-500); }
.aviso--alerta .aviso__titulo { color: var(--amarillo-600); }
.aviso--ok { background: var(--azul-050); border-color: var(--azul-100); border-top-color: var(--azul-600); }
.aviso--ok .aviso__titulo { color: var(--azul-800); }

/* --- Listas --- */
.lista-iconos li::before {
  width: 9px; height: 9px;
  background: var(--azul-500);
  border-radius: 0;
  transform: rotate(45deg);
  box-shadow: none;
}
.seccion--oscura .lista-iconos li::before { background: var(--azul-300); }
.lista-verificacion li { border-radius: 2px; border-left: 3px solid var(--azul-200); background: var(--blanco); }
.lista-verificacion li::before { border-radius: 0; background: var(--azul-600); }

/* --- Tablas --- */
table.tabla thead th {
  background: var(--azul-100);
  color: var(--azul-900);
  border-bottom: 2px solid var(--azul-500);
}
table.tabla tbody tr:nth-child(even) { background: var(--azul-050); }
table.tabla tbody tr:hover { background: var(--azul-100); }
.tabla-envoltura { border-radius: 2px; box-shadow: none; border-color: var(--azul-100); }
.tabla-nota { color: var(--gris-600); }

/* --- Encabezado del sitio --- */
.encabezado { background: rgba(255,255,255,.98); border-bottom: 1px solid var(--azul-100); box-shadow: none; }
.marca__logo { border-radius: 2px; background: var(--azul-600); }
.nav-principal a { border-radius: 2px; }
.nav-principal a[aria-current="page"] { background: var(--azul-700); color: #fff; }
.barra-superior { background: var(--azul-050); color: var(--azul-700); border-bottom: 1px solid var(--azul-100); }
.barra-superior a { color: var(--azul-700); }
.barra-superior__punto { background: var(--azul-500); border-radius: 0; transform: rotate(45deg); }

/* --- Portada clara: blanco con azul cielo --- */
.hero {
  background:
    radial-gradient(820px 460px at 82% -12%, rgba(56,189,248,.28), transparent 62%),
    radial-gradient(680px 420px at 2% 112%, rgba(186,230,253,.62), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--azul-050) 100%);
  color: var(--gris-700);
  border-bottom: 1px solid var(--azul-100);
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 5px;
  background: linear-gradient(90deg, var(--azul-500) 0 40%, var(--azul-200) 40% 100%);
}
.hero__insignia {
  background: var(--blanco);
  border: 1px solid var(--azul-200);
  border-radius: 999px;
  color: var(--azul-700);
  font-weight: 700;
}
.hero h1 { color: var(--azul-900); max-width: 17ch; margin-inline: auto; }
.hero h1 em {
  font-style: normal;
  color: var(--azul-600);
  display: inline-block;
  border-bottom: 4px solid var(--azul-200);
}
.hero__entrada { color: var(--gris-700); }
.hero__datos { border-top: 1px solid var(--azul-200); justify-content: center; }
.hero__dato { padding-right: 30px; }
.hero__dato strong { color: var(--azul-600); }
.hero__dato span { color: var(--gris-600); }
.hero__panel {
  background: var(--blanco);
  border: 1px solid var(--azul-100);
  border-radius: 2px;
  padding: 14px;
  max-width: 800px;
  margin: 46px auto 0;
}
.hero__panel svg { width: 100%; height: auto; display: block; }
.hero--centrado { text-align: center; }
.hero--centrado .hero__centro { max-width: 880px; margin-inline: auto; }
.hero--centrado .hero__entrada { max-width: 66ch; margin-inline: auto; }
.hero--centrado .grupo-botones { justify-content: center; }
.hero--centrado .hero__insignia { display: inline-flex; }

/* --- Cabecera de página clara --- */
.cabecera-pagina {
  background:
    radial-gradient(640px 320px at 88% 0%, rgba(125,211,252,.45), transparent 62%),
    linear-gradient(170deg, #FFFFFF 0%, var(--azul-100) 100%);
  border-bottom: 1px solid var(--azul-200);
}
.cabecera-pagina::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 5px;
  background: var(--azul-500);
}
.cabecera-pagina h1 { color: var(--azul-900); max-width: 22ch; }
.cabecera-pagina h1 em { font-style: normal; color: var(--azul-600); }
.cabecera-pagina__entrada { color: var(--gris-700); }
.cabecera-pagina__meta span { color: var(--azul-700); }

/* --- Banner de políticas: barra azul claro --- */
.banner-politicas {
  background: var(--azul-050);
  color: var(--azul-900);
  border-top: 3px solid var(--azul-500);
  border-bottom: 1px solid var(--azul-200);
  box-shadow: 0 -2px 0 rgba(12,74,110,.05);
}
.banner-politicas__icono {
  background: var(--azul-600);
  border: 0;
  border-radius: 2px;
  color: #fff;
}
.banner-politicas__titulo { color: var(--azul-900); }
.banner-politicas__desc { color: var(--gris-700); }
.banner-politicas__desc strong { color: var(--azul-800); }
.banner-politicas__desc a { color: var(--azul-700); font-weight: 700; }

/* --- Banner de contacto: azul profundo al pie --- */
.banner-contacto { background: var(--azul-800); border-top: 3px solid var(--azul-500); }
.banner-contacto__icono {
  background: rgba(56,189,248,.16);
  border: 1px solid rgba(125,211,252,.45);
  border-radius: 2px;
  color: var(--azul-300);
}
.banner-contacto__titulo { color: var(--azul-300); }
.banner-contacto__linea { color: var(--azul-100); }
.banner-contacto__linea--enlace a { color: var(--azul-300); font-weight: 700; }

/* --- Pie de página --- */
.pie { background: var(--azul-900); }
.pie__col h3 { color: var(--azul-300); }
.pie__col a { color: var(--azul-200); }
.pie__contacto svg { color: var(--azul-400); }
.pie__legal { border-top-color: rgba(255,255,255,.14); }
.pie__marca .marca__logo { background: var(--azul-600); }

/* --- Ajuste en pantallas angostas --- */
body, p, li, td, th, h1, h2, h3, h4 { overflow-wrap: break-word; }
a { overflow-wrap: anywhere; }

@media (max-width: 1080px) {
  .rejilla--5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .rejilla--5 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .rejilla--2, .rejilla--3, .rejilla--4, .rejilla--5 { grid-template-columns: 1fr; }
  .consultas { grid-template-columns: 1fr; }
  .cierre { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; }
  .cierre__titulo { font-size: 1.3rem; }
  .secuencia__item { padding-left: 56px; }
  .secuencia__numero { width: 36px; height: 36px; font-size: .86rem; }
  .secuencia::before { left: 17px; }
}

@media (max-width: 460px) {
  .cierre__acciones { width: 100%; }
  .cierre__acciones .boton { width: 100%; }
}

/* --- Formularios, prosa y utilidades --- */
.campo input, .campo textarea, .campo select { border-radius: 2px; border-color: var(--azul-200); background: #fff; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--azul-500); }
.faq__item { border-radius: 2px; box-shadow: none; }
.faq__pregunta:hover { background: var(--azul-050); }
.faq__icono { border-radius: 2px; }
.faq__item[data-abierto="true"] .faq__icono { background: var(--azul-600); border-color: var(--azul-600); color: #fff; }
.cita { border-left: 3px solid var(--azul-400); font-family: var(--fuente-sans); }
.modulo__caja { border-radius: 2px; }
.indice { border-radius: 2px; border-left: 3px solid var(--azul-500); }
.ejemplo { border-radius: 2px; border-left: 3px solid var(--amarillo-400); }
.salto-contenido { border-radius: 0 0 2px 0; }
.tarjeta-cta {
  background: var(--azul-050);
  border: 1px solid var(--azul-200);
  border-left: 4px solid var(--azul-500);
  border-radius: 2px;
}
.tarjeta-cta::after { display: none; }
.tarjeta-cta h2 { color: var(--azul-900); }