/* ============================================================
   GLOBAL SEGUROS Y CIA LTDA
   Paleta tomada del logo real (navy metálico + acero).
   Estructura y densidad visual guiadas por allianz.co:
   superficie blanca dominante, mucho aire, navegación de texto
   plano con mega-menú de 4 columnas, tarjetas de borde fino.
   El hero y el footer usan un degradado profundo (no plano).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* --- Navy del logo --- */
  --navy-900: #12243d;
  --navy-800: #1b3454;
  --navy-700: #27466f;
  --navy-600: #35598a;
  --navy-500: #4a71a5;

  /* --- Acero: los reflejos claros del isotipo --- */
  --steel-400: #7a99c0;
  --steel-300: #a8c0da;
  --steel-200: #cfdcea;
  --steel-50:  #eef3f9;

  /* --- Neutros fríos (el logo vive sobre gris metálico, no sobre crema) --- */
  --white: #ffffff;
  --surface-alt: #f4f7fa;
  --ink-900: #12243d;
  --ink-700: #3c4a5e;
  --ink-500: #66748a;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;

  /* Degradado profundo: brillo suave arriba-derecha que cae a navy casi negro */
  --grad-deep: radial-gradient(120% 95% at 72% 12%, #2d5180 0%, #1c3556 34%, #0e1f36 68%, #091524 100%);

  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(18,36,61,0.07);
  --shadow-md: 0 8px 24px rgba(18,36,61,0.09);
  --shadow-lg: 0 20px 48px rgba(18,36,61,0.14);

  --topbar-height: 38px;
  --nav-height: 82px;

  --ease: cubic-bezier(.22,.68,0,1.01);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --whatsapp-500: #1ea952;
  --whatsapp-600: #17913f;
  --error-500: #c0392b;
  --focus-ring: 0 0 0 3px rgba(53,89,138,0.45);
  /* Azul claro para el realce al pasar el cursor: tiene que leerse como azul
     sin acercarse al navy de los botones, que es el que manda la acción. */
  --blue-soft: #e3edfa;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 12px); overflow-x: hidden; width: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink-700);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { color: var(--ink-900); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
::selection { background: var(--steel-300); color: var(--navy-900); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- LAYOUT ---------- */
.section { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.section-white { background: var(--white); }
.section-container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }

.section-header { max-width: 620px; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

/* Línea de acento fina sobre el título (detalle tomado de MetLife) */
.accent-rule {
  display: block; width: 100%; max-width: 420px; height: 3px; margin-bottom: 1.8rem;
  background: linear-gradient(90deg, var(--navy-700) 0%, var(--navy-500) 45%, var(--steel-300) 100%);
  border-radius: 2px;
}

.section-title { font-size: clamp(1.85rem, 3.4vw, 2.7rem); font-weight: 700; }
.section-subtitle { margin-top: 0.9rem; color: var(--ink-500); font-size: 1.05rem; max-width: 54ch; }
.accent { color: var(--steel-300); }

/* ---------- REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.96rem; padding: 0.85rem 1.6rem;
  border-radius: var(--radius-sm); white-space: nowrap; min-height: 46px;
  /* El borde transparente reserva el espacio que .btn-ghost ocupa con el suyo:
     así un botón relleno y uno de contorno miden exactamente lo mismo cuando
     quedan uno encima del otro. */
  border: 1.5px solid transparent;
  transition: background .25s, color .25s, border-color .25s, transform .15s var(--ease-out);
}
.btn svg { width: 1em; height: 1em; flex-shrink: 0; }
.icon-arrow { width: 14px; height: 14px; flex-shrink: 0; }

.btn-primary { background: var(--navy-700); color: var(--white); }
.btn-primary:hover { background: var(--navy-800); }
.btn-ghost { background: transparent; color: var(--navy-700); border: 1.5px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--navy-700); background: var(--steel-50); }
.btn-full { width: 100%; }
.btn-whatsapp { background: var(--whatsapp-500); color: var(--white); }
.btn-whatsapp:hover { background: var(--whatsapp-600); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.contacto-form .btn-full + .btn-full { margin-top: 0.65rem; }
/* Fuera de la vista pero dentro del formulario: display:none haría que
   algunos robots lo ignoren, y es justo lo que se quiere que llenen. */
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn:active:not(:disabled) { transform: scale(0.98); }

/* Sobre el degradado oscuro del hero */
.hero .btn-primary { background: var(--white); color: var(--navy-900); }
.hero .btn-primary:hover { background: var(--steel-200); }
/* Los dos botones del hero van iguales, en blanco pleno: el borde traslúcido
   se perdía contra la foto. Pesan lo mismo a propósito. */
.hero .btn-ghost { background: var(--white); color: var(--navy-900); border-color: var(--white); }
.hero .btn-ghost:hover { background: var(--steel-200); border-color: var(--steel-200); }

/* ---------- TOPBAR ---------- */
.topbar {
  height: var(--topbar-height); background: var(--surface-alt);
  border-bottom: 1px solid var(--line); display: flex; align-items: center;
  position: relative; z-index: 501;
}
.topbar-inner {
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.topbar-tagline { font-size: 0.78rem; color: var(--ink-500); }
.topbar-links { display: flex; align-items: center; gap: 1.5rem; }
.topbar-links a { font-size: 0.78rem; font-weight: 600; color: var(--navy-700); display: inline-flex; align-items: center; gap: 0.35rem; transition: color .2s; }
.topbar-links a:hover { color: var(--navy-900); }

/* ---------- NAVBAR ---------- */
.navbar {
  position: sticky; top: 0; z-index: 500;
  height: var(--nav-height); background: var(--white);
  border-bottom: 1px solid var(--line); display: flex; align-items: center;
}
.nav-container {
  width: 100%; max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

/* Logotipo compuesto en texto. El letrero original está en Helvetica bold, así
   que la pila de fuentes reproduce su mismo dibujo sin descargar nada, y el
   color lo pone el CSS: navy en la cabecera, blanco en el footer. */
.brand, .footer-logo { display: flex; align-items: center; }
.logotype {
  --lt: 30px;
  display: inline-flex; flex-direction: column; align-items: flex-end;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1; white-space: nowrap; color: var(--navy-900);
}
/* El interletraje del letrero es muy cerrado; sin esto el logotipo se estira. */
.logotype-name { font-size: var(--lt); font-weight: 700; letter-spacing: -0.045em; }
.logotype-tag {
  font-size: calc(var(--lt) * 0.235); font-weight: 700;
  letter-spacing: 0.015em; margin-top: calc(var(--lt) * 0.13);
}
.logotype-footer { --lt: 26px; color: var(--white); }

/* El hueco se achica porque ahora cada pestaña lleva su propio relleno. */
.nav-links { display: flex; align-items: center; gap: 0.35rem; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 0.3rem;
  font-weight: 500; font-size: 0.97rem; color: var(--ink-900);
  padding: 0.55rem 0.9rem; border-radius: var(--radius-sm);
  transition: color .2s, background .2s;
}
/* La barrita ya no marca el hover (de eso se encarga el fondo): queda solo
   como señal de la sección en la que está el visitante. */
.nav-link::after {
  content: ''; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.2rem; height: 2px;
  background: var(--navy-600); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.nav-link.active::after { transform: scaleX(1); }
.nav-link:hover, .nav-link[aria-expanded="true"] { background: var(--blue-soft); color: var(--navy-800); }
.nav-chevron { width: 15px; height: 15px; transition: transform .25s var(--ease-out); }
.nav-link[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

.nav-cta {
  font-weight: 600; font-size: 0.92rem; padding: 0.6rem 1.25rem;
  border-radius: var(--radius-sm); background: var(--navy-700); color: var(--white);
  transition: background .25s;
}
.nav-cta:hover { background: var(--navy-800); }

.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--navy-900); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- MEGA-MENÚ (allianz.co) ---------- */
.has-mega { position: static; }
.mega-panel {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--white); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md); z-index: 499;
  animation: megaIn .22s var(--ease-out);
}
.mega-panel[hidden] { display: none; }
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.mega-inner {
  max-width: 1200px; margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem);
}
/* El encabezado es un <button> porque en móvil pliega su grupo; en escritorio
   va desactivado y debe verse igual que el rótulo de texto que era antes. */
.mega-heading { font-weight: 700; font-size: 1rem; color: var(--ink-900); margin-bottom: 1.1rem; text-align: left; }
.mega-heading:disabled { cursor: default; }
.mega-chevron { display: none; }
.mega-col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.mega-col a { font-size: 0.94rem; color: var(--ink-700); transition: color .18s; }
.mega-col a:hover { color: var(--navy-600); }

/* ---------- HERO ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy-900);
  /* Reparto asimétrico: el bloque arranca más arriba que antes, pero la sección
     conserva su alto — recortar solo el relleno de arriba la dejaba 87 px más
     baja y la foto perdía presencia. */
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(6rem, 13vw, 11rem);
}
/* La foto va bajo un velo navy denso a la izquierda (donde cae el texto) y más
   claro a la derecha, para que la familia siga siendo visible. */
.hero-photo {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(100deg,
      rgba(9,21,36,0.95) 0%,
      rgba(14,31,54,0.90) 34%,
      rgba(20,46,78,0.68) 62%,
      rgba(28,53,86,0.42) 100%),
    url('assets/hero-familia.jpg');
  background-size: cover;
  background-position: center 42%;
}
.hero-content {
  position: relative;
  max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
/* El bloque de texto se mantiene dentro de la zona densa del velo: más ancho
   que esto y el titular alcanza la parte clara, donde el blanco pierde contraste. */
/* El titular vuelve a su tamaño, pero con la medida más corta cae en tres
   líneas en vez de dos: ocupa más alto sin que la letra se vea enorme. */
.hero-title { max-width: 560px; }
.hero-desc { max-width: 620px; }
.hero-title { font-size: clamp(2.1rem, 4.8vw, 3.5rem); line-height: 1.16; color: var(--white); letter-spacing: -0.025em; font-weight: 700; }
.hero-desc { margin-top: 1.4rem; font-size: clamp(1rem, 1.6vw, 1.15rem); color: rgba(255,255,255,0.82); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; }

/* ---------- SERVICIOS ---------- */
/* Solo 12 px: el hueco de la barra fija ya lo pone `scroll-padding-top` en
   <html>, y los dos se suman. Con el alto de la barra aquí también, el destino
   quedaba 200 px por debajo del borde, con media pantalla vacía encima. */
.cat-group { margin-bottom: clamp(3rem, 6vw, 4.5rem); scroll-margin-top: 12px; }
.cat-group:last-child { margin-bottom: 0; }
.cat-head { padding-bottom: 1rem; margin-bottom: 1.8rem; border-bottom: 1px solid var(--line); }
.cat-toggle { display: flex; align-items: center; gap: 0.9rem; width: 100%; text-align: left; }
.cat-title { font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 700; }
/* En escritorio las categorías están siempre abiertas: el control no existe. */
.cat-count, .cat-chevron { display: none; }
.cat-toggle:disabled { cursor: default; }

.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.25rem; }
.service-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 1.6rem 1.5rem; display: flex; flex-direction: column;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease-out);
}
.service-card:hover { border-color: var(--steel-300); box-shadow: var(--shadow-md); transform: translateY(-3px); }
/* El icono es lo primero que se mira de la tarjeta, así que pesa: placa de
   56px y glifo grande. Al pasar el cursor la placa se llena de azul, crece y
   salta hacia el borde superior: queda a unos 11 px de él, cerca de escaparse
   sin llegar a cortarse. La sombra es la que vende el despegue — sin ella el
   mismo desplazamiento se lee como un simple corrimiento, no como algo que se
   levanta de la tarjeta. La curva pasa de largo y vuelve (el último tramo de
   la bézier va por encima de 1), que es lo que da el golpe de salida.
   El movimiento va en el icono y no en toda la tarjeta, que ya se eleva por su
   cuenta: dos cosas moviéndose igual se leerían como un temblor. */
.service-icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 1.65rem;
  background: var(--steel-50); color: var(--navy-600); margin-bottom: 1.1rem;
  transition:
    background-color .3s var(--ease-out),
    color .3s var(--ease-out),
    box-shadow .42s var(--ease-out),
    transform .42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.service-icon i { display: block; line-height: 1; transition: transform .42s cubic-bezier(0.34, 1.56, 0.64, 1); }
@media (hover: hover) and (pointer: fine) {
  .service-card:hover .service-icon {
    background: var(--navy-600); color: var(--white);
    transform: translateY(-12px) scale(1.14);
    box-shadow: 0 14px 26px rgba(9, 21, 36, 0.3);
  }
  .service-card:hover .service-icon i { transform: rotate(-10deg) scale(1.06); }
}

/* En pantalla táctil no hay cursor, así que el salto del icono no ocurría
   nunca y las tarjetas se veían planas. El disparador no puede ser la entrada
   en pantalla: en el celular las categorías están plegadas y sus tarjetas, aun
   recortadas, cruzan el viewport igual, así que las veintiséis se marcaban de
   golpe sin que se viera ninguna y la animación quedaba gastada antes de abrir
   la primera categoría. Se ata al despliegue de la categoría, que es cuando el
   visitante las está mirando de verdad, y así vuelve a correr cada vez que la
   abre. El escalonado es amplio a propósito: con 70 ms los ocho iconos
   encendían casi a la vez y se leía como un parpadeo, no como una entrada.
   Se anima el fondo y el color dentro del fotograma porque durante la
   animación esta manda sobre la regla base. */
@media (hover: none), (pointer: coarse) {
  .cat-group.open .service-icon {
    animation: saltoIcono 1s var(--ease-out) calc(var(--i, 0) * 120ms + 220ms) 1;
  }
  .cat-group.open .service-icon i {
    animation: giroGlifo 1s var(--ease-out) calc(var(--i, 0) * 120ms + 220ms) 1;
  }
}
/* En tableta ancha no hay acordeón —las tarjetas se ven siempre—, así que ahí
   sí vale la entrada en pantalla, que es fiel porque nada está recortado. */
@media (hover: none) and (min-width: 901px) {
  .service-card.in-view .service-icon { animation: saltoIcono 1s var(--ease-out) calc(var(--i, 0) * 120ms + 220ms) 1; }
  .service-card.in-view .service-icon i { animation: giroGlifo 1s var(--ease-out) calc(var(--i, 0) * 120ms + 220ms) 1; }
}
@keyframes saltoIcono {
  0%   { transform: none; background: var(--steel-50); color: var(--navy-600); box-shadow: none; }
  38%  { transform: translateY(-12px) scale(1.14); background: var(--navy-600); color: var(--white); box-shadow: 0 14px 26px rgba(9, 21, 36, 0.3); }
  70%  { transform: translateY(-12px) scale(1.14); background: var(--navy-600); color: var(--white); box-shadow: 0 14px 26px rgba(9, 21, 36, 0.3); }
  100% { transform: none; background: var(--steel-50); color: var(--navy-600); box-shadow: none; }
}
@keyframes giroGlifo {
  0%   { transform: none; }
  38%  { transform: rotate(-10deg) scale(1.06); }
  70%  { transform: rotate(-10deg) scale(1.06); }
  100% { transform: none; }
}
.service-name { font-size: 1.08rem; margin-bottom: 0.5rem; }
.service-text { font-size: 0.92rem; color: var(--ink-500); margin-bottom: 1.4rem; flex: 1; }
.service-cta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 600; font-size: 0.9rem; align-self: flex-start;
  padding: 0.6rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--navy-600); color: var(--white);
  transition: background .25s;
}
.service-cta .icon-arrow { transition: transform .25s var(--ease-out); }
.service-card:hover .service-cta { background: var(--navy-800); }
/* La flecha es diagonal porque el enlace abre la plataforma de cotización aparte */
.service-card:hover .service-cta .icon-arrow { transform: translate(2px, -2px); }

/* Al llegar desde el menú, la tarjeta se señala sola un instante: entre veintiséis
   iguales, aterrizar arriba de la correcta no basta para saber cuál es. Va con
   `outline` y no con `box-shadow` para no pelearse con la sombra del cursor, y
   `scroll-margin-top` la baja lo justo para que no quede debajo de la barra fija. */
.service-card { scroll-margin-top: 20px; }
.service-card.destacada { animation: destaqueTarjeta 2s var(--ease-out); }
@keyframes destaqueTarjeta {
  0%, 55% { outline: 3px solid var(--navy-600); outline-offset: 3px; }
  100%    { outline: 3px solid rgba(53, 89, 138, 0); outline-offset: 3px; }
}

/* Cumplimiento va aparte de «Su empresa» porque no es un seguro más, sino una
   familia de garantías que cambia según ante quién responde el cliente. Sus
   tarjetas llevan su propio botón, igual que las de los demás seguros. */
.cat-intro { color: var(--ink-500); font-size: 0.95rem; max-width: 62ch; margin: 0 0 1.5rem; }

/* ---------- NOSOTROS ---------- */
/* La foto ocupa solo la mitad derecha y se funde con el navy por su borde
   izquierdo, igual que el velo del hero pero sin cubrir todo el ancho.
   No va de arriba abajo de la sección: la columna de texto es mucho más alta
   que ancha y, estirada a esa altura, `cover` ampliaba la foto al doble y solo
   dejaba ver un tercio de ella. Acotada a una banda de proporción parecida a
   la del archivo (1100x617), la ampliación baja a poco más de la unidad y se
   ve casi entera. La máscara vertical disuelve sus bordes superior e inferior
   en el navy, para que la banda no se lea como un recuadro pegado encima. */
.nosotros { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-900); }
.nosotros-photo {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  width: 56%; height: min(100%, 44vw); z-index: -1;
  background: url('assets/nosotros.jpg') center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.nosotros-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--navy-900) 0%,
    rgba(18,36,61,0.82) 26%,
    rgba(18,36,61,0.42) 62%,
    rgba(18,36,61,0.28) 100%);
}
.nosotros-layout { max-width: 560px; }
.nosotros .section-title { color: var(--white); }
.nosotros .nosotros-info p { color: rgba(255,255,255,0.76); }
.nosotros .nosotros-info strong { color: var(--white); }
/* El primer párrafo va pegado al título: aquí no hay `.section-subtitle`, que
   es quien aporta esa separación en las demás secciones. */
.nosotros-info .section-title { margin-bottom: 1.1rem; }
.nosotros-info p { margin-bottom: 1.1rem; color: var(--ink-500); }
.nosotros-info strong { color: var(--ink-900); }

/* Tres renglones de ficha técnica, no tres columnas: puestas en fila los
   rótulos se partían en dos líneas de distinto largo y el bloque quedaba
   dentado. Así cada dato ocupa su renglón y las tres cifras caen alineadas
   contra el mismo margen derecho, sin filetes que crucen el texto. El ancho va
   acotado porque a pantalla completa el rótulo y su cifra quedaban tan
   separados que dejaban de leerse como pareja.
   El relleno se compensa con un margen negativo para que en reposo el rótulo
   siga a plomo con el párrafo de arriba y el realce del cursor sobresalga a
   los lados en vez de empujar el texto. */
.nosotros-cifras { max-width: 400px; margin: 2rem 0; }
.nosotros-cifras > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0.85rem; margin: 0 -0.85rem; border-radius: var(--radius-sm);
  transition: background-color .25s ease, translate .25s var(--ease-out);
}
/* Un tercer gesto, distinto al de las otras dos series de tarjetas: aquí el
   renglón se desplaza y se enciende bajo el cursor. */
@media (hover: hover) and (pointer: fine) {
  .nosotros-cifras > div:hover { background: rgba(255,255,255,0.07); translate: 5px 0; }
  .nosotros-cifras > div:hover dt { color: rgba(255,255,255,0.75); }
}
.nosotros-cifras dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.11em; color: rgba(255,255,255,0.52); transition: color .25s ease; }
.nosotros-cifras dd { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--white); margin: 0; white-space: nowrap; }

/* Misión y visión son dos párrafos, no dos tarjetas: un filete a la izquierda
   basta para separarlos del texto corrido. */
.nosotros-mv { display: grid; gap: 1.5rem; margin-bottom: 2.3rem; }
.mv-item { border-left: 2px solid var(--steel-400); padding-left: 1.1rem; }
.mv-item h3 { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--steel-300); margin-bottom: 0.45rem; }
.nosotros .nosotros-info .mv-item p { font-size: 0.95rem; margin-bottom: 0; }

/* Los principios son el tercer bloque de la misma serie, no un apartado
   propio: encerrarlos en píldoras los convertía en seis tarjetitas y ya hay
   tarjetas de sobra más abajo. Aquí son una línea de texto separada por
   puntos, que es lo que son: una enumeración. */
/* El punto va pegado a la palabra anterior con un espacio duro y el corte de
   línea queda en el espacio que le sigue: así nunca empieza un renglón con un
   punto suelto. */
.mv-principios span { color: var(--steel-400); }

/* Sección propia: el espaciado ya lo pone .section, no hace falta separarla más */
.aseguradoras-section { padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.aseg-label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 1.6rem; }
.aseg-marquee { width: 100%; max-width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); }
/* La duración sigue al número de sellos: con 30s y trece logos el carril
   pasaba al doble de velocidad que con seis. */
.aseg-track { display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 4rem); width: max-content; animation: marquee 77s linear infinite; }
.aseg-track:hover { animation-play-state: paused; }
/* Caja igual para todos: los sellos van de 4.4:1 (Mundial) a 1.1:1 (Equidad),
   y con solo fijar el alto los anchos quedaban dispares. `contain` los ajusta
   dentro del mismo hueco sin deformarlos. */
.aseg-track img { height: 52px; width: 120px; object-fit: contain; filter: grayscale(1) opacity(0.5); transition: filter .3s; }
.aseg-track img:hover { filter: grayscale(0) opacity(1); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- POR QUÉ CONFIAR ---------- */
/* Fondo navy para que las tarjetas blancas resalten */
.trust-band { background: var(--grad-deep); }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
/* Estas se mueven distinto a las tarjetas de seguro: allá la placa del icono
   se llena de azul, aquí se traza un filete sobre el borde superior y el icono
   se desplaza. Mismo lenguaje, gesto diferente, para que las dos secciones no
   se sientan la misma.
   El retraso del escalonado se declara por propiedad: con el atajo `transition`
   el hover heredaba hasta 180 ms de espera antes de responder, y el
   desplazamiento usa `translate`, independiente del `transform` con el que la
   tarjeta entra en pantalla. */
.trust-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 1.7rem 1.5rem; position: relative; overflow: hidden;
  transition:
    opacity .6s var(--ease-out) calc(var(--i, 0) * 60ms),
    transform .6s var(--ease-out) calc(var(--i, 0) * 60ms),
    translate .28s var(--ease-out) 0s,
    box-shadow .28s ease 0s,
    border-color .28s ease 0s;
}
.trust-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--navy-600); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.trust-card i { font-size: 1.6rem; color: var(--navy-500); display: block; margin-bottom: 0.9rem; transition: translate .28s var(--ease-out), color .28s ease; }
@media (hover: hover) and (pointer: fine) {
  .trust-card:hover { translate: 0 -4px; box-shadow: var(--shadow-lg); border-color: var(--steel-300); }
  .trust-card:hover::before { transform: scaleX(1); }
  .trust-card:hover i { translate: 5px 0; color: var(--navy-700); }
}
.trust-card h4 { font-size: 1rem; margin-bottom: 0.4rem; }
.trust-card p { font-size: 0.9rem; color: var(--ink-500); }

/* ---------- CONTACTO ---------- */
.checkbox-option { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; color: var(--ink-500); cursor: pointer; margin-top: 0.8rem; }
.checkbox-option input { margin-top: 0.25rem; accent-color: var(--navy-700); width: 16px; height: 16px; flex-shrink: 0; }
.link-inline { color: var(--navy-600); text-decoration: underline; }
.contacto-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-item { display: flex; gap: 1rem; margin-bottom: 1.6rem; }
.contact-icon { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--steel-50); color: var(--navy-600); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.contact-item strong { display: block; color: var(--ink-900); font-size: 0.95rem; margin-bottom: 0.15rem; }
.contact-item p { font-size: 0.92rem; color: var(--ink-500); }
.contact-link { color: var(--navy-600); transition: color .2s; }
.contact-link:hover { color: var(--navy-800); text-decoration: underline; }

/* Con tres botones ya no caben en una línea en móvil: sin `wrap` el tercero
   se salía y arrastraba a toda la página 136 px de scroll horizontal. */
.social-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.social-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); font-size: 0.9rem; font-weight: 600; color: var(--ink-900); transition: border-color .2s, background .2s; }
.social-btn:hover { border-color: var(--navy-600); background: var(--steel-50); }
/* Cada red con su color de marca; el genérico queda en el navy del sitio. */
.social-btn i { font-size: 1.1rem; color: var(--navy-600); }
.social-btn .ti-brand-whatsapp { color: var(--whatsapp-500); }
/* El glifo de Instagram trae su propio degradado, así que no hereda color. */
.social-btn.social-btn-ig svg { width: 19px; height: 19px; }
.social-btn svg { width: 17px; height: 17px; color: #1877f2; }

.contacto-form-wrapper { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3.5vw, 2.2rem); }
.contacto-form-title { font-size: 1.2rem; margin-bottom: 1.4rem; }
/* `min-width: 0` en toda la cadena: un <select> no se encoge por debajo de su
   opción más larga, y a 320 px eso empujaba el formulario 26 px fuera de su
   columna y sacaba 6 px de scroll horizontal a toda la página. */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; min-width: 0; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; min-width: 0; }
.form-group label { font-size: 0.85rem; font-weight: 600; color: var(--ink-900); }
.form-group .required { color: var(--error-500); }
.form-group input, .form-group select, .form-group textarea {
  padding: 0.75rem 0.9rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--white); transition: border-color .2s, box-shadow .2s;
  min-width: 0;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 3px rgba(53,89,138,0.12); }
.form-group textarea { resize: vertical; }
.form-group .field-error { font-size: 0.78rem; color: var(--error-500); }

.contact-success { text-align: center; padding: 2rem 1rem; }
.success-icon { font-size: 3rem; color: var(--whatsapp-500); margin-bottom: 0.8rem; }
.contact-success h4 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.contact-success p { color: var(--ink-500); font-size: 0.95rem; }

/* ---------- NEWSLETTER ---------- */
/* Franja clara pegada arriba del footer oscuro: el contraste entre ambas
   marca la transición sin necesitar un borde o separador aparte. */
.newsletter-band { background: var(--surface-alt); padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.newsletter-band[hidden] { display: none; }
.newsletter-inner {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}
.newsletter-copy { flex: 1 1 360px; min-width: 0; }
.newsletter-copy h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.newsletter-copy p { color: var(--ink-500); font-size: 0.95rem; max-width: 46ch; }
.newsletter-form { flex: 1 1 380px; min-width: 0; }
.newsletter-fields { display: flex; gap: 0.75rem; min-width: 0; }
.newsletter-fields input {
  flex: 1; min-width: 0; padding: 0.75rem 0.9rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--white); transition: border-color .2s, box-shadow .2s;
}
.newsletter-fields input:focus { outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 3px rgba(53,89,138,0.12); }
.newsletter-fields .btn { flex-shrink: 0; }
.newsletter-form .field-error { display: block; font-size: 0.78rem; color: var(--error-500); margin-top: 0.35rem; }
.newsletter-form .checkbox-option { font-size: 0.8rem; }
.newsletter-success { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--whatsapp-600); }
.newsletter-success[hidden] { display: none; }
.newsletter-success i { font-size: 1.3rem; }

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

@media (max-width: 640px) {
  .newsletter-fields { flex-direction: column; }
  .newsletter-fields .btn { width: 100%; }
}

/* ---------- FOOTER ---------- */
.footer { background: var(--grad-deep); color: rgba(255,255,255,0.62); padding-top: clamp(3rem, 6vw, 4.5rem); }
.footer-container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.footer-main {
  --footer-logo-h: 34px;   /* alto del bloque del logotipo, para alinear los títulos */
  /* Antes la primera columna era 1.5fr porque llevaba un párrafo de
     presentación; ahora solo tiene el logotipo y ese ancho extra quedaba
     vacío. */
  display: grid; grid-template-columns: 1fr 1fr 1fr 1.15fr; gap: 2.5rem;
  padding-bottom: 2.6rem; border-bottom: 1px solid rgba(255,255,255,0.1);
  align-items: start;
}
/* El logo es más alto que un encabezado, así que alinear por arriba deja los
   títulos flotando. Se bajan media diferencia para centrarlos contra el logo. */
.footer-links-group { padding-top: calc((var(--footer-logo-h) - 1.14rem) / 2); }
.footer-logo { margin-bottom: 1.2rem; }
.footer-desc { font-size: 0.9rem; max-width: 34ch; margin-bottom: 1.2rem; }
.footer-certifications { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cert-badge { font-size: 0.74rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.8); }
.footer-links-group h4 { font-size: 0.95rem; color: var(--white); margin-bottom: 1rem; }
.footer-links-group ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-links-group a, .footer-links-group address p { font-size: 0.9rem; transition: color .2s; }
.footer-links-group a:hover { color: var(--white); }
.footer-links-group address { font-style: normal; display: flex; flex-direction: column; gap: 0.6rem; }
/* El icono va en su propia columna: con el icono en línea, la segunda línea de
   la dirección volvía al margen y la lista quedaba dentada. */
.footer-links-group address p { display: flex; gap: 0.5rem; line-height: 1.5; }
.footer-links-group address i { color: var(--steel-400); flex: 0 0 1em; margin-top: 0.15em; }
.footer-bottom { padding: 1.6rem 0; font-size: 0.82rem; color: rgba(255,255,255,0.45); }

/* ---------- PÁGINA LEGAL ---------- */
/* Documento largo para leer, no para hojear: medida corta, aire entre
   apartados y numeración visible para poder citarla por punto. */
.legal { padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 8vw, 6rem); }
.legal-container { max-width: 760px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.legal .section-title { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 0.6rem; }
.legal-meta { font-size: 0.88rem; color: var(--ink-500); padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.legal h2 { font-size: 1.12rem; margin: 2.4rem 0 0.8rem; color: var(--navy-800); }
.legal p { color: var(--ink-700); margin-bottom: 1rem; }
.legal strong { color: var(--ink-900); }
.legal ul { margin: 0 0 1.2rem 1.1rem; }
.legal li { color: var(--ink-700); margin-bottom: 0.5rem; padding-left: 0.3rem; list-style: disc; }
.legal .link-inline { color: var(--navy-600); text-decoration: underline; }
.legal-volver { margin-top: 2.6rem; }

/* ---------- FLOATING ---------- */
.whatsapp-float {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 400;
  width: 56px; height: 56px; border-radius: 50%; background: var(--whatsapp-500); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
  box-shadow: 0 8px 24px rgba(30,169,82,0.35); transition: transform .25s var(--ease-out), background .25s;
}
.whatsapp-float:hover { background: var(--whatsapp-600); transform: scale(1.06); }

.back-to-top {
  position: fixed; bottom: 1.5rem; right: 5.4rem; z-index: 400;
  width: 44px; height: 44px; border-radius: 50%; background: var(--navy-700); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s, background .25s, transform .2s var(--ease-out);
}
.back-to-top svg { width: 19px; height: 19px; }
.back-to-top.show { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: var(--navy-800); }
.back-to-top:active { transform: scale(0.94); }

/* ---------- TOASTS ---------- */
.toast-wrap { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 600; display: flex; flex-direction: column; gap: 0.6rem; align-items: center; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 0.6rem; background: var(--navy-900); color: var(--white);
  padding: 0.8rem 1.2rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  font-size: 0.88rem; font-weight: 500; animation: toastIn .3s var(--ease-out);
  border-left: 3px solid var(--steel-400); max-width: 92vw;
}
.toast.success { border-left-color: var(--whatsapp-500); }
.toast.error { border-left-color: var(--error-500); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: translateY(0);} }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  /* Con el dedo, una fila de 16 px es difícil de acertar: los enlaces de lista
     pasan a ocupar su propia banda de ~35 px en vez de solo su renglón. */
  .footer-links-group ul { gap: 0; }
  .footer-links-group li a { display: block; padding: 0.6rem 0; }
  .footer-links-group address a { display: inline-block; padding: 0.5rem 0; }
  .contact-item .contact-link { display: inline-block; padding: 0.6rem 0; }
  .topbar-links a { padding: 0.6rem 0; }

  .contacto-layout { grid-template-columns: 1fr; }
  /* Sigue de fondo como en escritorio, pero con `contain`: la sección es alta y
     angosta, y `cover` ampliaba la foto hasta dejar visible solo un trozo del
     centro. Anclada abajo, donde el velo es más claro y se alcanza a leer. */
  .nosotros-layout { max-width: none; }
  /* La capa se recorta a la proporción exacta de la foto (ancho x 617/1100) y se
     ancla abajo, así `cover` no recorta nada. Su borde superior se desvanece con
     una máscara: a `contain` sobre toda la sección quedaba una línea recta de lado
     a lado y la foto parecía un recuadro pegado encima del azul. */
  /* Se reserva la altura completa de la foto: así ningún texto queda encima y el
     contraste no depende del velo. */
  .nosotros { padding-bottom: 57vw; }
  .nosotros-photo {
    top: auto; left: 0; right: 0; bottom: 0; transform: none;
    width: 100%; height: 56.1vw;
    background-position: center;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 32%);
  }
  .nosotros-photo::after { background: rgba(18,36,61,0.24); }
  .topbar-tagline { display: none; }
  /* El correo es el dato más largo y el que menos se toca desde el celular:
     es el primero en salir cuando la barra se queda sin sitio. */
  .topbar-links .topbar-mail { display: none; }
  .topbar-inner { justify-content: center; }

  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed; top: calc(var(--topbar-height) + var(--nav-height)); left: 0; right: 0; bottom: 0;
    background: var(--white); flex-direction: column; align-items: stretch; gap: 0;
    padding: 1.5rem clamp(1.25rem, 6vw, 2.5rem) 3rem;
    transform: translateX(100%); transition: transform .35s var(--ease-out);
    overflow-y: auto; border-top: 1px solid var(--line);
  }
  .nav-links.open { transform: translateX(0); }
  /* En el cajón el realce se sale a los lados para que no quede pegado al
     texto, pero el texto sigue alineado con el margen del cajón. */
  .nav-link { font-size: 1.05rem; padding: 1rem 0.75rem; margin: 0 -0.75rem; width: calc(100% + 1.5rem); border-bottom: 1px solid var(--line); border-radius: 0; justify-content: space-between; }
  .nav-link::after { display: none; }
  .nav-cta { margin-top: 1.5rem; text-align: center; justify-content: center; display: flex; }
  /* El de la página legal vive fuera del cajón: cabe al lado del logo y no debe partirse. */
  .nav-cta.nav-cta-volver { margin-top: 0; padding: 0.5rem 0.85rem; font-size: 0.82rem; white-space: nowrap; }

  .mega-panel { position: static; box-shadow: none; border-bottom: 1px solid var(--line); animation: none; }
  .mega-inner { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.2rem 0 1.5rem; }
  /* Cinco filas plegables en vez de 26 enlaces seguidos: al último grupo se
     llegaba tras bajar más de un cajón entero. Misma mecánica que el acordeón
     de categorías —grid-template-rows de 0fr a 1fr— para animar la altura sin
     medirla en JS. */
  /* Sin relleno propio: el panel ya cierra abajo con su borde, y con el relleno
     quedaba una franja vacía entre la última categoría y «Nosotros», con dos
     filetes casi pegados. */
  .mega-inner { gap: 0; padding: 0; }
  .mega-col { border-bottom: 1px solid var(--line); }
  .mega-col:last-child { border-bottom: none; }
  .mega-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: 100%; min-height: 52px; margin-bottom: 0;
    font-size: 0.95rem; font-weight: 600; color: var(--ink-900);
    text-transform: none; letter-spacing: 0;
  }
  .mega-chevron { display: block; width: 18px; height: 18px; color: var(--ink-500); flex-shrink: 0; transition: transform .3s var(--ease-out); }
  .mega-col.open .mega-chevron { transform: rotate(180deg); color: var(--navy-600); }
  .mega-col-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease-out); }
  .mega-col.open .mega-col-panel { grid-template-rows: 1fr; }
  .mega-col-panel > ul { overflow: hidden; }
  /* Los enlaces medían 18 px de alto con 17 px de aire: con el dedo se falla.
     Ocupan su propia banda, como los del pie. */
  .mega-col ul { gap: 0; }
  .mega-col a { display: block; padding: 0.55rem 0 0.55rem 0.9rem; color: var(--ink-700); }
  .mega-col.open ul { padding-bottom: 0.6rem; }

  /* Las 17 tarjetas apiladas hacen una lista larguísima en móvil: cada categoría
     se pliega y queda una fila por categoría. La altura se anima con el truco de
     grid-template-rows 0fr/1fr, sin medir alturas en JS. */
  .cat-group { margin-bottom: 0; }
  .cat-head { margin-bottom: 0; padding: 0; border-bottom: none; }
  .cat-toggle { min-height: 60px; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
  .cat-count { display: inline; font-size: 0.82rem; color: var(--ink-500); white-space: nowrap; }
  .cat-chevron { display: block; width: 20px; height: 20px; margin-left: auto; color: var(--ink-500); flex-shrink: 0; transition: transform .3s var(--ease-out); }
  .cat-group.open .cat-chevron { transform: rotate(180deg); color: var(--navy-600); }
  .cat-title { font-size: 1.05rem; }

  .cat-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease-out); }
  .cat-group.open .cat-panel { grid-template-rows: 1fr; }
  .cat-panel-inner { overflow: hidden; }
  .cat-group.open .services-grid { padding: 1.25rem 0 1.75rem; }
  .cat-group.open .cat-intro { padding-top: 1.25rem; margin-bottom: 0; }
  .cat-group.open .cat-intro + .services-grid { padding-top: 1rem; }
}

@media (max-width: 640px) {
  .trust-grid, .form-row { grid-template-columns: 1fr; }
  /* Apilar los cuatro bloques hacía un footer larguísimo. El logo y los datos
     de contacto ocupan el ancho; las dos listas cortas van a la par. */
  .footer-main { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .footer-main > :first-child,
  .footer-links-group:last-child { grid-column: 1 / -1; }
  /* Ningún título queda al lado del logo: sin desfase óptico. */
  .footer-links-group { padding-top: 0; }
  .hero-actions .btn { width: 100%; }
  /* A ancho de móvil el texto ocupa todo, así que el velo deja de ser lateral */
  .hero-photo {
    background-image:
      linear-gradient(180deg, rgba(9,21,36,0.86) 0%, rgba(14,31,54,0.78) 55%, rgba(20,46,78,0.66) 100%),
      url('assets/hero-familia.jpg');
    background-position: center 38%;
  }
  .accent-rule { max-width: 100%; }
  .back-to-top { display: none; }
}