/* =====================================================================
   SITUACIONES SpA — Hoja de estilos del sitio público
   ---------------------------------------------------------------------
   Un solo archivo para todas las páginas. Antes cada .html llevaba su
   propio bloque <style> de ~660 líneas: cambiar un color obligaba a
   editar nueve archivos, y el navegador no podía cachear nada.
   ===================================================================== */

/* =========================
   TOKENS
   ========================= */
:root {
  --primary: #003366;
  --primary-dark: #002244;
  --secondary: #005b96;
  --accent: #ffcc00;

  --text: #1f2a37;
  /* Aclarado desde #6b7280: aquel quedaba justo en el límite de contraste
     AA sobre los fondos suaves. Este da 5,6:1 y se lee cómodo. */
  --muted: #5a6472;

  --bg: #ffffff;
  --bg-soft: #f7f9fc;
  --bg-dark: #051a2d;

  --ok: #1b7a3d;
  --error: #b3261e;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(0, 51, 102, 0.10);
  --shadow-2: 0 14px 40px rgba(0, 51, 102, 0.16);

  --container: 1100px;
  --header-h: 78px;

  --focus: 0 0 0 3px #fff, 0 0 0 6px var(--secondary);
}

* { box-sizing: border-box; }

/* El atributo hidden debe ganarle SIEMPRE a cualquier display de este
   archivo.
   El navegador aplica [hidden] { display: none } con especificidad muy
   baja, así que basta un selector de clase para anularla sin querer. Eso
   fue justamente lo que pasó con el aviso de error del formulario: tenía
   hidden puesto, pero .alert { display: flex } lo pisaba y el recuadro
   rojo se mostraba vacío en todas las visitas.
   Con esta regla, cualquier elemento con hidden queda oculto de verdad. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

/* Foco visible y consistente en todo el sitio. Sin esto, quien navega con
   teclado no sabe dónde está parado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* Salto al contenido: primer elemento enfocable de la página. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--primary);
  color: #fff;
  padding: 12px 18px;
  font-weight: 700;
  border-radius: 0 0 10px 0;
}
.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =========================
   ICONOS
   -------------------------
   Sprite SVG local (assets/img/iconos.svg, 5 KB) en reemplazo de Font
   Awesome por CDN, que traía ~110 KB entre CSS y tipografía, y dejaba
   el sitio dependiendo de que cdnjs estuviera disponible.
   ========================= */
.icono {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -.125em;
  stroke: currentColor;
  fill: none;
}
.icono-lg { width: 1.5em; height: 1.5em; }

/* =========================
   BOTONES
   ========================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  font-family: inherit;
  border: 0;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  user-select: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  /* Azul sobre amarillo = 8,6:1. El blanco sobre amarillo que había antes
     daba 1,7:1 y era prácticamente ilegible. */
  color: var(--primary);
  box-shadow: 0 10px 20px rgba(255, 204, 0, .25);
}
.btn-primary:hover { filter: brightness(.96); transform: translateY(-2px); }

.btn-ghost {
  background: transparent;
  color: var(--primary);
  border: 2px solid rgba(0, 51, 102, .30);
}
.btn-ghost:hover {
  border-color: rgba(0, 51, 102, .55);
  box-shadow: 0 10px 18px rgba(0, 51, 102, .08);
  transform: translateY(-2px);
}

/* Sobre fondo oscuro (hero, banner CTA) el borde azul no se ve. */
.on-dark .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}
.on-dark .btn-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .10);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  font-size: .9rem;
  color: #fff;
}

/* =========================
   HEADER
   ========================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transform: translateY(0);
  transition: transform .22s ease;
  background: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
}
.site-header.is-hidden { transform: translateY(-100%); }

.top-bar {
  background: var(--primary);
  color: #fff;
  font-size: .85rem;
}
.top-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  gap: 12px;
}
.top-bar span,
.top-bar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.top-bar a:hover { color: var(--accent); }

.site-nav { height: var(--header-h); }
.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 160px;
}
.brand img { height: 46px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-links a {
  color: var(--primary);
  font-weight: 600;
  transition: color .15s ease;
}
.nav-links a:hover { color: var(--secondary); }

.portal-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 800;
  color: var(--primary);
  border: 2px solid rgba(0, 51, 102, .30);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.portal-pill:hover {
  background: rgba(0, 51, 102, .06);
  box-shadow: 0 10px 20px rgba(0, 51, 102, .10);
  transform: translateY(-2px);
}

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, .12);
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 1.1rem;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
}

/* Menú móvil */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 1001;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: min(360px, 92vw);
  background: #fff;
  transform: translateX(110%);
  transition: transform .22s ease;
  z-index: 1002;
  box-shadow: -20px 0 50px rgba(0, 0, 0, .18);
  display: flex;
  flex-direction: column;
}
.drawer.open { transform: translateX(0); }

.drawer-header {
  padding: 18px 18px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.drawer-header strong { color: var(--primary); }

.drawer-close {
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, .12);
  background: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--primary);
}

.drawer-body {
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.drawer-body a {
  padding: 12px;
  border-radius: 12px;
  font-weight: 700;
  color: var(--primary);
  border: 1px solid rgba(0, 51, 102, .12);
  background: rgba(0, 51, 102, .03);
}
.drawer-body a:hover { background: rgba(0, 51, 102, .07); }

/* =========================
   HERO
   ========================= */
.hero {
  position: relative;
  min-height: 92vh;
  padding-top: calc(var(--header-h) + 34px);
  padding-bottom: 40px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 51, 102, .80), rgba(0, 51, 102, .88)),
    var(--hero-img, url("../img/fondo-tecnico.jpg")) center / cover no-repeat;
}

.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: .30;
  filter: saturate(.95) contrast(1.05);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 500px at 20% 20%, rgba(255, 204, 0, .16), transparent 55%),
    radial-gradient(700px 480px at 85% 35%, rgba(0, 91, 150, .22), transparent 60%);
  z-index: 1;
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 2;
  color: #fff;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 34px;
  align-items: center;
}

.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.hero p {
  margin: 0 0 18px;
  font-size: 1.12rem;
  color: rgba(255, 255, 255, .94);
  max-width: 58ch;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.hero-card {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
  backdrop-filter: blur(10px);
}
.hero-card h2 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: #fff;
}
.hero-card ul { display: grid; gap: 10px; }
.hero-card li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: rgba(255, 255, 255, .94);
  font-size: .98rem;
}
.hero-card i { color: var(--accent); margin-top: 3px; }

/* =========================
   INDICADORES
   ========================= */
.stats { background: var(--bg-soft); padding: 42px 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.stat {
  background: #fff;
  border-radius: var(--radius);
  padding: 22px 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0, 0, 0, .06);
  text-align: center;
}
.stat .stat-num {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -.02em;
  line-height: 1.2;
}
/* Cuando el indicador es una frase y no una cifra, necesita menos cuerpo
   para no desbordar la tarjeta en pantallas angostas. */
.stat .stat-texto {
  font-size: 1.55rem;
  line-height: 1.15;
  text-wrap: balance;
}
.stat p { margin: 6px 0 0; color: var(--muted); font-weight: 700; }
.stat small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 400;
  font-size: .8rem;
}

/* =========================
   SECCIONES
   ========================= */
section { scroll-margin-top: calc(var(--header-h) + 22px); }

.section { padding: 82px 0; }

.section-title { text-align: center; margin-bottom: 44px; }
.section-title h2 {
  margin: 0 0 10px;
  font-size: 2.2rem;
  color: var(--primary);
  letter-spacing: -.02em;
}
.section-title p {
  margin: 0 auto;
  max-width: 70ch;
  color: var(--muted);
  font-size: 1.06rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.card {
  background: #fff;
  border-radius: var(--radius);
  padding: 26px 22px;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2);
  border-color: rgba(0, 51, 102, .14);
}
.card .icon {
  width: 58px; height: 58px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(0, 91, 150, .10);
  color: var(--secondary);
  font-size: 1.55rem;
  margin-bottom: 14px;
}
.card h3 {
  margin: 0 0 10px;
  color: var(--primary);
  font-size: 1.2rem;
  letter-spacing: -.01em;
}
.card p { margin: 0 0 12px; color: var(--muted); }

/* Tarjeta de una sola afirmación.
   Cuando una tarjeta lleva solo el titular, el grid la estira igual que a
   sus vecinas y queda más de la mitad en blanco, como si faltara texto.
   Centrando el contenido y subiendo el cuerpo tipográfico, el espacio se
   lee como una decisión de diseño y la frase gana peso en vez de perderlo. */
.card--afirmacion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.card--afirmacion h3 {
  font-size: 1.45rem;
  margin: 0;
  max-width: 18ch;
  line-height: 1.25;
}
.card ul {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
  color: #4b5563;
  display: grid;
  gap: 6px;
}

/* Fondos alternados entre secciones.
   .why hace el degradado de blanco a suave; .section-soft continúa en
   suave, de modo que una sección .why seguida de una .section-soft se
   ven como un solo bloque sin corte. */
.why { background: linear-gradient(to bottom, #fff, var(--bg-soft)); }
.section-soft { background: var(--bg-soft); }
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 34px 0;
}
.why-item {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px 18px;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.why-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.why-item h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--primary);
  font-weight: 800;
  font-size: 1rem;
}
.why-item h3 i {
  width: 34px; height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 204, 0, .30);
  color: var(--primary);
  flex-shrink: 0;
}
.why-item p { margin: 0; color: var(--muted); }

.cta-banner {
  background: var(--primary);
  border-radius: var(--radius);
  padding: 34px 26px;
  color: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.cta-banner h2 { margin: 0 0 6px; font-size: 1.7rem; letter-spacing: -.02em; }
.cta-banner p { margin: 0; color: rgba(255, 255, 255, .92); max-width: 70ch; }
.cta-banner .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* =========================
   CONTACTO / FORMULARIOS
   ========================= */
.contact { background: var(--bg-soft); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}
.contact-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 26px 22px;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: var(--shadow);
}
.contact-box h3 { margin: 0 0 14px; color: var(--primary); font-size: 1.25rem; }

.contact-list { display: grid; gap: 12px; font-weight: 600; }
.contact-list a,
.contact-list span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}
.contact-list a:hover { color: var(--secondary); }
.contact-list i { color: var(--secondary); width: 18px; text-align: center; flex-shrink: 0; }

.field { display: grid; gap: 6px; margin-bottom: 14px; }
label { font-weight: 800; color: var(--primary); font-size: .95rem; }
.req { color: var(--error); }

input, select, textarea {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, .18);
  outline: none;
  font-size: 1rem;
  background: #fff;
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
  font-family: inherit;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: rgba(0, 91, 150, .60);
  box-shadow: 0 0 0 4px rgba(0, 91, 150, .12);
}
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
  border-color: rgba(179, 38, 30, .55);
}

/* Trampa para robots: invisible para personas, pero no con display:none,
   que algunos bots detectan. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.small-note { color: var(--muted); font-size: .92rem; margin-top: 10px; }

.alert {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: .95rem;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.alert-error {
  background: #fdecea;
  border: 1px solid #f5c6c2;
  color: var(--error);
}
.alert-ok {
  background: #e8f5ec;
  border: 1px solid #b8dfc5;
  color: var(--ok);
}

/* =========================
   FOOTER
   ========================= */
.site-footer {
  background: var(--bg-dark);
  color: rgba(255, 255, 255, .82);
  padding: 54px 0 22px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 22px;
}
.site-footer h2,
.site-footer h3 { margin: 0 0 12px; color: #fff; font-size: 1.05rem; }
.site-footer img { height: 40px; width: auto; margin-bottom: 14px; }
.site-footer a { color: rgba(255, 255, 255, .82); }
.site-footer a:hover { color: var(--accent); }
.site-footer ul { display: grid; gap: 10px; }
.site-footer p { margin: 0 0 8px; max-width: 46ch; }

.legal-data {
  font-size: .88rem;
  color: rgba(255, 255, 255, .62);
  line-height: 1.7;
}

.copyright {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: 16px;
  text-align: center;
  font-size: .92rem;
  color: rgba(255, 255, 255, .72);
}

/* =========================
   FLOTANTES
   ========================= */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 92px;
  width: 46px; height: 46px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--accent);
  display: grid;
  place-items: center;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
  z-index: 999;
}
.to-top:hover { filter: brightness(1.1); }
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

.wa-float {
  position: fixed;
  right: 18px;
  bottom: 22px;
  width: 58px; height: 58px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .25);
  z-index: 999;
  transition: transform .18s ease, filter .18s ease;
}
.wa-float:hover { transform: scale(1.06); filter: brightness(1.03); }
.wa-float svg { width: 30px; height: 30px; }

/* =========================
   PÁGINAS SIMPLES (gracias, 404, privacidad)
   ========================= */
.page-head {
  background: var(--primary);
  color: #fff;
  padding: calc(var(--header-h) + 70px) 0 60px;
}
.page-head h1 { margin: 0 0 10px; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.02em; }
.page-head p { margin: 0; color: rgba(255, 255, 255, .92); max-width: 70ch; }

.prose { max-width: 75ch; margin: 0 auto; }
.prose h2 {
  color: var(--primary);
  margin: 40px 0 12px;
  font-size: 1.35rem;
  letter-spacing: -.01em;
}
.prose h3 { color: var(--primary); margin: 26px 0 8px; font-size: 1.05rem; }
.prose p, .prose li { color: #3b4552; }
.prose ul { list-style: disc; padding-left: 22px; display: grid; gap: 8px; margin: 12px 0; }
.prose a { color: var(--secondary); text-decoration: underline; }
.prose strong { color: var(--text); }

/* ---------------------------------------------------------------
   Componentes dentro de .prose
   ---------------------------------------------------------------
   .prose fija colores pensados para texto largo sobre fondo claro.
   El problema es que esas reglas van despues en esta hoja y tienen
   la misma especificidad que las del componente, asi que le ganan.

   Resultado concreto que esto arregla: el titular del banner CTA
   quedaba azul oscuro (#003366) sobre fondo azul oscuro (#003366),
   es decir contraste 1:1 y completamente invisible; el parrafo
   quedaba gris oscuro sobre azul; y los botones salian subrayados
   como si fueran enlaces de texto.

   Al reintroducir el componente con un selector mas especifico,
   .prose deja de pisarlo. Si en el futuro se agregan mas bloques
   sobre fondo oscuro dentro de .prose, hay que sumarlos aqui. */

.prose .cta-banner h2 {
  color: #fff;
  margin: 0 0 6px;
  font-size: 1.7rem;
}
.prose .cta-banner p {
  color: rgba(255, 255, 255, .92);
}
.prose .cta-banner a {
  text-decoration: none;
}

/* Los botones son botones, no enlaces de texto: sin subrayado y con
   el color propio de cada variante. */
.prose .btn {
  text-decoration: none;
}
.prose .btn-primary {
  color: var(--primary);
}
.prose .btn-ghost {
  color: var(--primary);
}
.prose .on-dark .btn-ghost,
.prose .cta-banner .btn-ghost {
  color: #fff;
}

/* Migas de pan: ubican al visitante y le dicen a Google cómo se
   estructura el sitio (se acompañan de BreadcrumbList en el schema). */
.migas {
  font-size: .9rem;
  color: rgba(255, 255, 255, .78);
  margin-bottom: 14px;
}
.migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.migas a { text-decoration: underline; }
.migas a:hover { color: var(--accent); }
.migas .sep { opacity: .55; }
.migas [aria-current="page"] { color: #fff; font-weight: 600; }

/* Índice de contenidos de las páginas largas */
.indice {
  background: var(--bg-soft);
  border: 1px solid rgba(0, 51, 102, .12);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 0 0 40px;
}
.indice h2 {
  margin: 0 0 12px !important;
  font-size: 1rem !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted) !important;
}
.indice ol {
  list-style: none;
  display: grid;
  gap: 9px;
  counter-reset: idx;
}
.indice li { counter-increment: idx; }
.indice a {
  color: var(--secondary);
  text-decoration: none;
  font-weight: 600;
}
.indice a::before {
  content: counter(idx) ". ";
  color: var(--muted);
  font-weight: 400;
}
.indice a:hover { text-decoration: underline; }

/* Bloque de respuesta destacada.
   Es el formato que los buscadores con IA extraen y citan: una respuesta
   completa y autónoma, separada visualmente del resto del texto. */
.respuesta-clave {
  background: linear-gradient(135deg, rgba(0, 91, 150, .06), rgba(255, 204, 0, .08));
  border-left: 4px solid var(--secondary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 26px;
  margin: 28px 0;
}
.respuesta-clave p:last-child { margin-bottom: 0; }
.respuesta-clave .etiqueta {
  display: block;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--secondary);
  margin-bottom: 8px;
}

/* Tablas de contenido (frecuencias, comparativas) */
.tabla-envoltura {
  overflow-x: auto;
  margin: 24px 0;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 0, 0, .10);
}
table.datos {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  background: #fff;
  min-width: 520px;
}
table.datos caption {
  text-align: left;
  padding: 14px 16px;
  font-weight: 700;
  color: var(--primary);
  background: var(--bg-soft);
  border-bottom: 1px solid rgba(0, 0, 0, .10);
}
table.datos th,
table.datos td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  vertical-align: top;
}
table.datos thead th {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  border-bottom: 0;
}
table.datos tbody tr:last-child td { border-bottom: 0; }
table.datos tbody tr:nth-child(even) { background: rgba(0, 51, 102, .025); }
table.datos th[scope="row"] { font-weight: 700; color: var(--primary); }

/* Tabla comparativa contra alternativas del mercado.
   La columna propia se destaca para que la conclusión se lea de un vistazo. */
table.datos td.si { color: var(--ok); font-weight: 700; }
table.datos td.no { color: var(--muted); }
table.datos .col-destacada {
  background: rgba(255, 204, 0, .10);
  border-left: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
}
table.datos thead th.col-destacada {
  background: var(--primary-dark);
  border-left: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
}
table.datos tbody tr:last-child .col-destacada { border-bottom: 2px solid var(--accent); }

/* Pasos numerados del protocolo */
.pasos { counter-reset: paso; display: grid; gap: 18px; margin: 26px 0; }
.paso {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  counter-increment: paso;
}
.paso::before {
  content: counter(paso);
  width: 44px; height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: var(--accent);
  font-weight: 800;
  font-size: 1.05rem;
}
.paso h3 { margin: 8px 0 6px !important; font-size: 1.08rem !important; }
.paso p { margin: 0; }

/* Preguntas del FAQ */
.faq-item {
  border-bottom: 1px solid rgba(0, 0, 0, .10);
  padding: 22px 0;
}
.faq-item:last-child { border-bottom: 0; }
.faq-item h3 {
  margin: 0 0 10px !important;
  font-size: 1.12rem !important;
  color: var(--primary);
}
.faq-item p:last-child { margin-bottom: 0; }

.estado-centro {
  text-align: center;
  padding: 90px 0;
  max-width: 620px;
  margin: 0 auto;
}
.estado-icono {
  width: 92px; height: 92px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
  font-size: 2.6rem;
}
.estado-icono.ok { background: #e8f5ec; color: var(--ok); }
.estado-icono.perdido { background: rgba(0, 91, 150, .10); color: var(--secondary); }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 980px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-card { max-width: 640px; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .nav-links { display: none; }
  .menu-toggle { display: inline-flex; }
  .top-bar .container { flex-direction: column; align-items: flex-start; gap: 4px; }
  .section { padding: 60px 0; }
  .hero { min-height: auto; }
  .cta-banner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .section-title h2 { font-size: 1.7rem; }

  /* Los botones traen white-space:nowrap para que no se parta un "Enviar"
     en dos líneas. Pero con etiquetas largas ("Ver la metodología completa
     de limpieza") eso empuja la página entera y aparece scroll horizontal.
     En pantallas angostas dejamos que el texto se acomode. */
  .btn {
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }
}

/* Áreas táctiles en móvil
   -----------------------
   En el celular se toca con el dedo, no con un puntero de un píxel. Los
   enlaces del footer y de la lista de contacto medían 19-26 px de alto:
   suficiente para verlos, no para acertarles. Aquí los llevamos a 44 px,
   que es la medida que recomiendan tanto Apple como Google. */
@media (max-width: 820px) and (pointer: coarse) {
  .site-footer ul a,
  .contact-list a,
  .top-bar a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .site-footer ul { gap: 0; }

  .copyright a,
  .legal-data a,
  .small-note a {
    display: inline-block;
    padding: 6px 2px;
  }

  /* Migas de pan e índice de contenidos: son listas de enlaces cortos,
     justo el caso donde el dedo falla más. */
  .migas a,
  .indice a {
    display: inline-block;
    padding: 8px 0;
    min-height: 24px;
  }
  .indice ol { gap: 4px; }
}

/* Quien pidió menos movimiento en su sistema no debería recibir
   animaciones ni video de fondo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .hero video { display: none; }
}

/* Impresión: sin fondos oscuros ni elementos flotantes. */
@media print {
  .site-header, .to-top, .wa-float, .drawer, .drawer-backdrop, .hero video { display: none !important; }
  body { color: #000; }
  .hero, .page-head, .site-footer, .cta-banner { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}