/* =====================================================================
   PrevenStar · estilos del sitio (mobile first)
   Tipografías: Atkinson Hyperlegible Next para leer (diseñada para lectores
   con baja visión) y Poppins para títulos (como «VACUNAS» del material de
   PrevenStar). Base de 18 px y botones de 50 px o más de alto.
   El logotipo es imagen: se genera con generar-logos.bat.
   Colores tomados del logotipo: azul de marca #093d94, azules agua de las
   olas y la gota (--cielo-*) y gris perla del fondo (--perla).
   ===================================================================== */

:root {
  /* Azul de marca (letras del logotipo) y sus tonos */
  --azul-950: #061a40;
  --azul-900: #082a68;
  --azul-800: #09347f;
  --azul-700: #093d94;
  --azul-600: #1452b8;
  --azul-300: #94c3e4;
  --azul-200: #c7e0f1;
  --azul-100: #e3f0f9;
  --azul-50: #f3f8fc;
  /* Azules agua (olas y gota del logotipo). 600 y 700 aguantan iconos y texto
     blanco encima; 500 solo en degradados con texto blanco grande o iconos. */
  --cielo-700: #00659a;
  --cielo-600: #007bb4;
  --cielo-500: #008cc9;
  --cielo: #0097e3;
  --cielo-100: #e1f1fa;
  --cielo-50: #f0f8fc;
  /* Gris perla del fondo del logotipo */
  --perla: #f1f4f6;
  --verde: #0a7a3e;
  --verde-osc: #075f30;
  --verde-50: #e3f6eb;
  --ambar-50: #fff7e6;
  --ambar-700: #6b4500;
  --texto: #10203d;
  --texto-2: #3f4e68;
  --borde: #d3e2ee;
  --borde-campo: #7d93ab;
  --blanco: #fff;
  --radio-sm: 12px;
  --radio: 20px;
  --radio-lg: 28px;
  --sombra-sm: 0 1px 2px rgb(8 42 104 / .06);
  --sombra: 0 2px 4px rgb(8 42 104 / .04), 0 12px 32px rgb(8 42 104 / .09);
  --sombra-lg: 0 30px 70px rgb(8 42 104 / .18);
  /* Franjas diagonales como las del fondo del logotipo */
  --franjas: repeating-linear-gradient(118deg, transparent 0 7rem, rgb(255 255 255 / .6) 7rem 12rem);
  --fuente: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-titulos: "Poppins", "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;  --cabecera-alto: 80px;
  --ancho: 70rem;
}

/* ---------- Base ---------- */
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
html[data-texto="grande"] { font-size: 125%; }
html[data-texto="muy-grande"] { font-size: 140%; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--blanco);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(82px + env(safe-area-inset-bottom));
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0 0 .6em; font-family: var(--fuente-titulos); line-height: 1.18; color: var(--azul-700); font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(1.95rem, 1.3rem + 3.2vw, 3.3rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.2rem); }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--azul-700); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--azul-900); }
strong, b { font-weight: 700; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--cielo); outline-offset: 3px; border-radius: 6px; }
.seccion-azul :focus-visible, .pie-cta :focus-visible { outline-color: #fff; }
::selection { background: var(--azul-200); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--azul-950); color: #fff; padding: .75rem 1.1rem; border-radius: 0 0 12px 12px; font-weight: 700; }
.saltar:focus { top: 0; color: #fff; }

.contenedor { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
.contenedor-estrecho { width: min(100% - 2rem, 50rem); margin-inline: auto; }
.centrada { text-align: center; margin-inline: auto; }

/* ---------- Iconos (sprite /assets/iconos.svg) ---------- */
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3.1rem; padding: .7rem 1.35rem;
  border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.btn .ico { width: 1.3em; height: 1.3em; }
.btn:active { transform: translateY(1px); }
.btn-wa { background: var(--verde); color: #fff; box-shadow: 0 8px 18px rgb(10 122 62 / .22); }
.btn-wa:hover { background: var(--verde-osc); color: #fff; }
.btn-primario { background: var(--azul-700); color: #fff; box-shadow: 0 8px 18px rgb(9 61 148 / .22); }
.btn-primario:hover { background: var(--azul-800); color: #fff; }
.btn-secundario { background: #fff; color: var(--azul-800); border-color: var(--azul-200); }
.btn-secundario:hover { border-color: var(--azul-700); color: var(--azul-900); }
.btn-fantasma { background: transparent; color: var(--azul-700); text-decoration: underline; text-underline-offset: .2em; }
.btn-fantasma:hover { background: var(--azul-50); }
.btn-claro { background: #fff; color: var(--azul-800); }
.btn-claro:hover { background: var(--azul-50); color: var(--azul-950); }
.btn-llamar { background: var(--azul-50); color: var(--azul-800); border-color: var(--azul-200); }
.btn-lg { min-height: 3.5rem; padding-inline: 1.6rem; font-size: 1.06rem; }
.btn-sm { min-height: 2.6rem; padding: .4rem 1rem; font-size: .92rem; }
.btn-bloque { width: 100%; }

.acciones { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; }
.acciones .btn { width: 100%; }
@media (min-width: 40em) {
  .acciones { flex-direction: row; flex-wrap: wrap; }
  .acciones .btn { width: auto; }
  .acciones.centradas, .acciones-centradas { justify-content: center; }
}
.enlace-flecha { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: 1.05rem; }
.enlace-flecha .ico { transition: transform .15s; }
.enlace-flecha:hover .ico { transform: translateX(3px); }
.mas { margin: 2rem 0 0; text-align: center; }
@media (max-width: 39.99em) { .mas .btn { width: 100%; } }

/* ---------- Cabecera ----------
   Usa tamaño fijo (18 px) y unidades em para que no se desborde al activar
   la letra grande; el contenido de la página sí crece. */
.cabecera {
  position: sticky; top: 0; z-index: 50; font-size: 18px;
  background: #fff;
  border-bottom: 1px solid var(--borde);
}
.cabecera-in { display: flex; align-items: center; gap: .4em; width: min(100% - 32px, var(--ancho)); min-height: var(--cabecera-alto); }
/* Logotipo oficial (imagen). En escritorio la cabecera crece para darle aire. */
.marca { display: inline-flex; align-items: center; margin-right: auto; border-radius: 10px; }
.marca-logo { width: auto; height: 3.75em; }
@media (min-width: 68em) { .cabecera-in { min-height: 5em; } .marca-logo { height: 4.3em; } }

.nav-principal { display: none; }
.nav-principal ul { display: flex; gap: .15em; margin: 0; padding: 0; list-style: none; }
.nav-principal a { display: block; padding: .55em .75em; border-radius: 999px; color: var(--texto); font-weight: 600; font-size: .94em; text-decoration: none; white-space: nowrap; }
.nav-principal a:hover { background: var(--azul-50); color: var(--azul-700); }
.nav-principal a[aria-current="page"] { background: var(--azul-100); color: var(--azul-800); }

.cabecera-acciones { display: flex; align-items: center; gap: .4em; }
.cabecera .btn-sm { min-height: 2.6em; padding: .4em 1em; font-size: .92em; }
.btn-texto {
  display: inline-flex; align-items: center; gap: .3em; min-height: 2.6em; min-width: 2.6em; padding: 0 .6em;
  border: 1.5px solid var(--azul-200); border-radius: 999px; background: #fff; color: var(--azul-900);
  font: inherit; font-weight: 800; cursor: pointer;
}
.btn-texto:hover { border-color: var(--azul-600); }
.btn-texto-aa { font-size: .85em; line-height: 1; }
.btn-texto-aa span { font-size: 1.35em; }
.btn-texto[data-nivel="grande"], .btn-texto[data-nivel="muy-grande"] { background: var(--azul-100); border-color: var(--azul-600); }
.btn-texto-et { font-size: .85em; font-weight: 600; }
.btn-menu {
  display: inline-flex; align-items: center; gap: .35em; min-height: 2.6em; padding: 0 .7em;
  border: 0; border-radius: 999px; background: var(--azul-700); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.btn-menu .ico { width: 1.2em; height: 1.2em; }
.btn-menu-texto { min-width: 3.1em; text-align: left; }
.solo-escritorio { display: none; }

@media (min-width: 68em) {
  .nav-principal { display: block; }
  .btn-menu { display: none; }
  .solo-escritorio { display: inline-flex; }
}

.menu-movil {
  position: fixed; top: var(--cabecera-alto); left: 0; right: 0; bottom: 0; z-index: 49;
  overflow-y: auto; background: #fff; padding: .5rem 1rem calc(2rem + env(safe-area-inset-bottom));
}
.menu-movil ul { list-style: none; margin: 0; padding: 0; }
.menu-movil a { display: block; padding: 1rem .25rem; border-bottom: 1px solid var(--borde); color: var(--azul-950); font-size: 1.18rem; font-weight: 700; text-decoration: none; }
.menu-movil .sub a { padding-left: 1.25rem; font-size: 1.04rem; font-weight: 600; color: var(--azul-800); }
.menu-movil a[aria-current="page"] { color: var(--azul-700); }
.menu-movil-acciones { display: grid; gap: .75rem; margin: 1.5rem auto 0; max-width: 30rem; }
.menu-movil > nav { max-width: 30rem; margin-inline: auto; }
body.menu-abierto { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; padding: 2rem 0 3.5rem;
  background:
    var(--franjas),
    radial-gradient(55rem 28rem at 92% -12%, var(--cielo-100), transparent 62%),
    radial-gradient(38rem 22rem at -12% 105%, var(--cielo-50), transparent 60%),
    linear-gradient(180deg, var(--perla), #fff 88%);
}
.hero-grid { display: grid; gap: 2.25rem; align-items: center; }
@media (min-width: 56em) {
  .hero { padding: 4rem 0 6rem; }
  .hero-grid { grid-template-columns: 1.08fr .92fr; gap: 3.5rem; }
}
.eyebrow {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 1rem;
  padding: .35rem .85rem; border: 1px solid var(--azul-200); border-radius: 999px;
  background: #fff; color: var(--azul-700); font-size: .86rem; font-weight: 700;
}
.eyebrow .ico { width: 1.1em; height: 1.1em; }
.eyebrow-claro { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .35); color: #fff; }
.eyebrow-temporada { background: var(--verde-50); border-color: #a9e2c0; color: var(--verde-osc); }
.eyebrow-temporada .punto { width: .55rem; height: .55rem; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgb(10 122 62 / .18); }
.lead { max-width: 40rem; color: var(--texto-2); font-size: 1.12rem; }
.confianza { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1.5rem 0 0; padding: 0; list-style: none; color: var(--azul-900); font-size: .95rem; font-weight: 700; }
.confianza li { display: inline-flex; align-items: center; gap: .4rem; }
.confianza .ico { color: var(--verde); stroke-width: 2.6; }
.hero-media { position: relative; }
.hero-img, .hero-media .ph { width: 100%; border-radius: var(--radio-lg); box-shadow: var(--sombra-lg); object-fit: cover; }
.hero-sello {
  position: absolute; left: .75rem; bottom: .75rem; display: flex; align-items: center; gap: .65rem; max-width: 17rem; margin: 0;
  padding: .75rem 1rem; border-radius: 18px; background: #fff; box-shadow: var(--sombra); color: var(--azul-950); font-size: .9rem; line-height: 1.3;
}
.hero-sello-logo { width: auto; height: 2.9rem; flex: none; }
@media (min-width: 56em) { .hero-sello { left: -1.5rem; bottom: 2rem; } }
.hero-404 { padding: 4rem 0; }
.hero-404 .buscador-form { margin-top: 2rem; text-align: left; }

/* ---------- Secciones ---------- */
.seccion { padding: 3.25rem 0; }
@media (min-width: 56em) { .seccion { padding: 5rem 0; } }
.seccion-ajustada { padding-top: 1.5rem; }
.seccion-alt { background: var(--azul-50); }
.seccion-azul { background: linear-gradient(135deg, var(--azul-800), var(--azul-700) 45%, var(--cielo-700)); color: #eaf4fb; }
.seccion-azul h2, .seccion-azul h3 { color: #fff; }
.seccion-azul a:not(.btn) { color: #fff; }
.seccion-cabeza { max-width: 46rem; margin-bottom: 2rem; }
.seccion-cabeza p { color: var(--texto-2); font-size: 1.06rem; }
.seccion-cabeza.centrada { text-align: center; }

.tarjeta { padding: 1.35rem; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; box-shadow: var(--sombra-sm); }
@media (min-width: 48em) { .tarjeta { padding: 2rem; } }
.tarjeta-suave { background: var(--azul-50); border-color: var(--azul-100); box-shadow: none; }
.seccion-alt .tarjeta-suave { background: #fff; }
.tarjeta h3:first-child { margin-top: 0; }
.redondeada { border-radius: var(--radio-lg); }
.sombra { box-shadow: var(--sombra-lg); }

.dividido { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56em) { .dividido { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.dividido-arriba { align-items: start; }
.rejilla-2 { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 48em) { .rejilla-2 { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.bloque-ancla { scroll-margin-top: 6rem; }
.bloque-ancla .etapa-icono { margin-bottom: 1rem; }
.bloque-ancla:target { border-color: var(--azul-600); box-shadow: 0 0 0 4px var(--azul-200); }

/* ---------- Cabecera de página interior ---------- */
.cabecera-pagina { padding: 1rem 0 3rem; background: var(--franjas), radial-gradient(50rem 22rem at 100% 0, var(--cielo-100), transparent 60%), linear-gradient(180deg, var(--perla), #fff); }
@media (min-width: 56em) { .cabecera-pagina { padding-bottom: 4rem; } }
.cabecera-pagina .lead { margin-bottom: 0; }
.migas { margin-bottom: 1.5rem; font-size: .9rem; }
.migas ol { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; color: var(--texto-2); }
.migas li + li::before { content: "›"; margin-right: .35rem; color: var(--azul-300); }
.migas a { color: var(--azul-700); }
.chips-nav { margin-top: 1.5rem !important; }

/* ---------- Buscador ---------- */
.buscador-seccion { position: relative; z-index: 2; margin-top: -2rem; padding-top: 0; padding-bottom: 1rem; }
.buscador { box-shadow: var(--sombra); }
.buscador h2 { font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem); }
.buscador-form { display: flex; flex-direction: column; gap: .75rem; margin: 1.25rem 0; }
@media (min-width: 40em) { .buscador-form { flex-direction: row; } .buscador-form .campo-busqueda { flex: 1; } }
.campo-busqueda { position: relative; }
.campo-busqueda .ico { position: absolute; left: 1rem; top: 50%; width: 1.35rem; height: 1.35rem; color: var(--cielo-600); transform: translateY(-50%); pointer-events: none; }
.campo-busqueda input[type="search"] { padding-left: 3rem; min-height: 3.5rem; }
.chips-titulo { margin: 0 0 .6rem; font-size: .95rem; font-weight: 700; color: var(--texto-2); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .45rem 1rem;
  border: 1.5px solid var(--azul-200); border-radius: 999px; background: var(--azul-50); color: var(--azul-900);
  font: inherit; font-size: .95rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.chip:hover { border-color: var(--azul-600); color: var(--azul-900); }
.chip[aria-pressed="true"] { background: var(--azul-700); border-color: var(--azul-700); color: #fff; }

/* ---------- Formularios ---------- */
input[type="text"], input[type="search"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%; min-height: 3.25rem; padding: .7rem 1rem;
  border: 2px solid var(--borde-campo); border-radius: 14px; background: #fff; color: var(--texto);
  font: inherit; font-size: 1rem;
}
input::placeholder { color: #5f6f88; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--azul-200); outline-offset: 0; border-color: var(--azul-600); }
select {
  -webkit-appearance: none; appearance: none; padding-right: 2.75rem; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23093d94' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center / 1.15rem;
}
.formulario { display: grid; gap: 1.1rem; color: var(--texto); }
.formulario h3 { margin: 0; }
.campo { display: grid; gap: .4rem; }
.campo label, .filtros legend { font-weight: 700; color: var(--azul-950); }
.opcional { font-weight: 400; font-size: .9rem; color: var(--texto-2); }
.ayuda, .nota-form { margin: 0; font-size: .88rem; color: var(--texto-2); }
.filtros { margin: 0; padding: 0; border: 0; }
.filtros legend { margin-bottom: .6rem; padding: 0; }

/* ---------- Catálogo ---------- */
.catalogo { padding-top: 1.5rem; }
.catalogo-herramientas { display: grid; gap: 1.25rem; margin-bottom: 1.5rem; box-shadow: var(--sombra); }
.catalogo-herramientas h2 { margin: 0; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
@media (min-width: 64em) {
  .catalogo-herramientas { grid-template-columns: 1.5fr 1fr; column-gap: 2rem; }
  .catalogo-herramientas h2, .catalogo-herramientas > .campo:first-of-type { grid-column: 1 / -1; }
}
.contador { margin: 0 0 1rem; font-weight: 700; color: var(--texto-2); }
.vacio { margin-top: 1rem; text-align: center; }
.vacio .btn { margin-top: .5rem; }

/* ---------- Tarjetas de vacunas ---------- */
.rejilla-vacunas { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) { .rejilla-vacunas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .rejilla-vacunas { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.vacuna {
  display: flex; flex-direction: column; gap: .8rem; padding: 1.2rem;
  border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; box-shadow: var(--sombra-sm);
  scroll-margin-top: 7rem; transition: box-shadow .2s, border-color .2s;
}
.vacuna:hover { border-color: var(--azul-200); box-shadow: var(--sombra); }
.vacuna:target { border-color: var(--azul-600); box-shadow: 0 0 0 4px var(--azul-200), var(--sombra); }
.vacuna-cabeza { display: flex; gap: .85rem; align-items: flex-start; }
.vacuna-icono { display: grid; place-items: center; width: 3rem; height: 3rem; flex: none; border-radius: 14px; background: var(--cielo-100); color: var(--azul-700); }
.vacuna-icono .ico { width: 1.5rem; height: 1.5rem; }
.vacuna-nombre { margin: .15rem 0 0; font-size: 1.2rem; }
.vacuna-alias { margin: .25rem 0 0; font-size: .88rem; color: var(--texto-2); }
.vacuna-desc { margin: 0; }
.vacuna-nota { margin: 0; padding: .65rem .85rem; border-left: 4px solid #e8a32a; border-radius: 10px; background: var(--ambar-50); color: var(--ambar-700); font-size: .9rem; }
.etiquetas { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.etiquetas li { padding: .2rem .65rem; border: 1px solid var(--azul-100); border-radius: 999px; background: var(--azul-50); color: var(--azul-800); font-size: .8rem; font-weight: 700; }
.vacuna-acciones { display: grid; gap: .5rem; margin-top: auto; padding-top: .35rem; }
.vacuna-acciones .btn { width: 100%; padding-inline: .9rem; }
.seccion-alt .vacuna { box-shadow: var(--sombra-sm); }

/* ---------- Etapas / accesos ---------- */
.rejilla-etapas { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .rejilla-etapas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .rejilla-etapas { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.etapa {
  display: flex; align-items: center; gap: 1rem; height: 100%; min-height: 5.5rem; padding: 1.1rem 1.15rem;
  border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; color: var(--texto); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.etapa:hover { border-color: var(--azul-600); box-shadow: var(--sombra); transform: translateY(-2px); color: var(--texto); }
.etapa-icono { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; flex: none; border-radius: 16px; background: linear-gradient(135deg, var(--cielo-500), var(--azul-700)); color: #fff; }
.etapa-icono .ico { width: 1.6rem; height: 1.6rem; }
.etapa-texto { display: flex; flex: 1; flex-direction: column; gap: .15rem; min-width: 0; }
.etapa-texto strong { color: var(--azul-900); font-size: 1.1rem; line-height: 1.25; }
.etapa-texto span { color: var(--azul-700); font-size: .93rem; text-decoration: underline; text-underline-offset: .15em; }
.etapa-flecha { color: var(--cielo-600); }

/* ---------- Listas ---------- */
.lista-check { display: grid; gap: .7rem; margin: 1rem 0; padding: 0; list-style: none; }
.lista-check li { position: relative; padding-left: 2.1rem; }
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  background: var(--verde-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a7a3e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / .85rem no-repeat;
}
.lista-check.tarjeta { margin: 0; }
.lista-clara li::before { background-color: rgb(255 255 255 / .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* ---------- Pasos ---------- */
.pasos { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 56em) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.paso { padding: 1.5rem; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }
.paso-num { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem; border-radius: 50%; background: linear-gradient(135deg, var(--cielo-500), var(--azul-700)); color: #fff; font-family: var(--fuente-titulos); font-size: 1.3rem; font-weight: 700; }
.paso-num .ico { width: 1.4rem; height: 1.4rem; }
.paso h3 { margin-bottom: .4rem; }
.paso p { margin: 0; color: var(--texto-2); }

/* ---------- Sucursales ---------- */
.rejilla-sedes { display: grid; gap: 1.25rem; }
@media (min-width: 48em) and (max-width: 63.99em) { .rejilla-sedes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .rejilla-sedes { grid-template-columns: repeat(3, 1fr); } }
.sede { display: flex; flex-direction: column; overflow: hidden; padding: 0; scroll-margin-top: 6rem; }
.sede:target { border-color: var(--azul-600); box-shadow: 0 0 0 4px var(--azul-200); }
.sede-foto, .sede .ph { width: 100%; border-width: 0 0 1px; border-radius: 0; object-fit: cover; }
.sede-cuerpo { display: flex; flex: 1; flex-direction: column; gap: .65rem; padding: 1.35rem; }
.sede-etiqueta { align-self: flex-start; margin: 0; padding: .25rem .75rem; border-radius: 999px; background: var(--azul-50); color: var(--azul-700); font-family: var(--fuente-titulos); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.sede-nombre { margin: 0; font-size: 1.35rem; }
.sede-dato { display: flex; align-items: flex-start; gap: .6rem; margin: 0; }
.sede-dato .ico { width: 1.3rem; height: 1.3rem; margin-top: .17em; color: var(--cielo-600); }
.sede-acciones { display: grid; gap: .5rem; margin-top: auto; padding-top: .75rem; }
.aviso-separado { margin-top: 1.5rem; }

.telefonos { display: grid; gap: .75rem; margin: 1rem 0 1.25rem; padding: 0; list-style: none; }
.telefono { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.15rem; }
.telefono div { display: flex; flex-direction: column; }
.telefono span { color: var(--texto-2); font-size: .9rem; }
#t-precio { margin-top: 2.5rem; }

/* ---------- Resumen, cifras, avisos ---------- */
.resumen h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); }
.resumen-cabeza { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; margin-bottom: 1.25rem; }
.resumen-cabeza h2 { margin: 0; }
.resumen-logo { width: 6.5rem; height: auto; }
@media (min-width: 48em) { .resumen-cabeza { flex-direction: row-reverse; align-items: center; justify-content: space-between; } .resumen-logo { width: 8rem; } }
.logo-pagina { display: block; width: 10rem; height: auto; margin: 0 0 1.25rem; }
.centrada .logo-pagina { width: 9rem; margin-inline: auto; }
.resumen-lista { display: grid; gap: 1.1rem; margin: 0 0 1.25rem; }
@media (min-width: 48em) { .resumen-lista { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2.5rem; } }
.resumen-lista dt { margin-bottom: .2rem; color: var(--azul-800); font-weight: 800; }
.resumen-lista dd { margin: 0; }
.cifras { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48em) { .cifras { grid-template-columns: repeat(3, 1fr); } }
.cifras li { display: flex; flex-direction: column; gap: .2rem; padding: 1.25rem 1.5rem; border-radius: var(--radio); background: var(--azul-50); }
.cifras strong { color: var(--azul-700); font-family: var(--fuente-titulos); font-size: 2.1rem; font-weight: 700; line-height: 1; }
.cifras span { color: var(--texto-2); }
.aviso { display: flex; align-items: flex-start; gap: .85rem; margin: 1.5rem 0 0; padding: 1rem 1.15rem; border: 1px solid var(--azul-200); border-radius: 16px; background: var(--azul-50); font-size: .96rem; }
.aviso .ico { width: 1.45rem; height: 1.45rem; margin-top: .1em; color: var(--azul-700); }
.aviso p { margin: 0; }
.seccion-alt .aviso { background: #fff; }

/* ---------- Preguntas frecuentes ---------- */
.preguntas { display: grid; gap: .75rem; margin-top: 1.5rem; }
.pregunta { border: 1px solid var(--borde); border-radius: 16px; background: #fff; }
.pregunta summary { position: relative; padding: 1.1rem 3.5rem 1.1rem 1.25rem; list-style: none; cursor: pointer; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary h3 { margin: 0; font-size: 1.08rem; line-height: 1.35; }
.pregunta summary::after {
  content: ""; position: absolute; right: 1.1rem; top: 50%; width: 1.8rem; height: 1.8rem; margin-top: -.9rem; border-radius: 50%;
  background: var(--azul-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23093d94' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 1rem no-repeat;
  transition: transform .2s;
}
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta summary:hover h3 { color: var(--cielo-700); }
.respuesta { padding: 0 1.25rem 1.25rem; color: var(--texto-2); }
.respuesta p:last-child { margin-bottom: 0; }

/* ---------- Fuentes y textos legales ---------- */
.fuentes h2 { font-size: 1.35rem; }
.fuentes ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.fuentes li { margin-bottom: .5rem; }
.texto-legal h2 { margin-top: 2rem; font-size: 1.35rem; }

/* ---------- Imágenes pendientes (se reemplazan solas al agregar la foto) ---------- */
.ph {
  position: relative; display: grid; place-items: center; width: 100%; padding: 1rem; overflow: hidden;
  border: 2px dashed var(--azul-300); border-radius: var(--radio);
  background: repeating-linear-gradient(135deg, rgb(255 255 255 / .4) 0 12px, transparent 12px 24px), linear-gradient(135deg, var(--azul-100), var(--cielo-100));
  color: var(--azul-900); text-align: center;
}
.ph-in { display: flex; flex-direction: column; align-items: center; gap: .3rem; max-width: 26rem; font-size: .8rem; line-height: 1.35; }
.ph-in .ico { width: 2rem; height: 2rem; color: var(--cielo-600); }
.ph-in strong { font-size: .95rem; }
.ph-busqueda { color: var(--texto-2); }
.ph-in code { padding: .1rem .45rem; border-radius: 6px; background: rgb(255 255 255 / .75); font-size: .74rem; }

/* ---------- Pie ---------- */
.pie { background: var(--azul-950); color: #cfdcf3; }
.pie-cta { padding: 2.5rem 0; background: linear-gradient(120deg, var(--azul-700), var(--cielo-700)); color: #fff; }
.pie-cta-in { display: flex; flex-direction: column; gap: 1.25rem; }
.pie-cta h2 { margin: 0 0 .3rem; color: #fff; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); }
.pie-cta p { margin: 0; color: #e4eeff; }
.pie-cta-acciones { display: grid; gap: .75rem; }
@media (min-width: 40em) { .pie-cta-acciones { display: flex; flex-wrap: wrap; } }
@media (min-width: 56em) { .pie-cta-in { flex-direction: row; align-items: center; justify-content: space-between; } }
.pie-rejilla { display: grid; gap: 2rem; padding: 3rem 0 2rem; }
@media (min-width: 48em) { .pie-rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .pie-rejilla { grid-template-columns: 1.55fr 1.4fr 1fr 1fr; gap: 2.5rem; } }
/* Logotipo sin recuadro: conserva el contorno blanco del PNG original */
.pie-logo { display: inline-block; margin-bottom: 1.25rem; border-radius: 12px; }
.pie-logo img { width: 10.5rem; height: auto; }
.pie-redes { margin-top: 1.75rem; }
.pie .redes { display: flex; flex-wrap: wrap; gap: .65rem; }
.red-social { display: inline-flex; align-items: center; gap: .6rem; min-height: 3.1rem; padding: .3rem 1.15rem .3rem .3rem; border: 2px solid rgb(255 255 255 / .55); border-radius: 999px; font-weight: 700; text-decoration: none; transition: background-color .15s, border-color .15s; }
.red-social:hover { border-color: #fff; background: rgb(255 255 255 / .12); }
.red-social-icono { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; flex: none; border-radius: 50%; background: #fff; color: var(--azul-700); }
.red-social-icono .ico { width: 1.3rem; height: 1.3rem; }
.pie-marca p { font-size: .95rem; }
.pie-titulo { margin-bottom: .9rem; color: #fff; font-size: 1.05rem; letter-spacing: 0; }
.pie a:not(.btn) { color: #fff; }
.pie ul { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.pie-sede { margin-bottom: 1rem; font-size: .93rem; line-height: 1.5; }
.pie-sede strong { display: block; color: #fff; }
.pie-legal { display: grid; gap: .25rem; padding: 1.5rem 0 2rem; border-top: 1px solid rgb(255 255 255 / .12); color: #a9bbdb; font-size: .85rem; }
.pie-legal p { margin: 0; }

/* ---------- Contacto rápido (móvil) y botón flotante (escritorio) ---------- */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom)); font-size: 18px;
  border-top: 1px solid var(--borde); background: rgb(255 255 255 / .97);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 -8px 24px rgb(8 42 104 / .08);
}
.barra-movil .btn { min-height: 3.25em; padding: .5em .75em; font-size: 1em; }
.wa-flotante { display: none; }
@media (min-width: 64em) {
  body { padding-bottom: 0; }
  .barra-movil { display: none; }
  .wa-flotante { display: inline-flex; position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 40; box-shadow: var(--sombra-lg); }
}

@media print {
  .cabecera, .barra-movil, .wa-flotante, .pie-cta, .menu-movil { display: none !important; }
  body { padding: 0; }
}