/* Quantico servida desde el propio dominio (licencia SIL OFL).
   Antes venía de Google Fonts y era el mayor bloqueo de pintado: ~970 ms
   esperando una petición a otro dominio antes de dibujar nada. */
@font-face {
  font-family: 'Quantico';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/fuentes/quantico-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quantico';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url(assets/fuentes/quantico-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Alianza Seguros — sistema visual compartido por la landing y las
   páginas de producto. Un solo lugar para color, tipografía y componentes.
   ========================================================================== */

:root {
  --accent: #15BCDF;
  --accent-hover: #3fd0ef;
  --accent-border: #0fa3c2;
  /* Cian de marca oscurecido para TEXTO y para los gráficos que indican
     estado (puntos, trayecto). Mismo tono (190°); #15BCDF solo llega a 2:1
     sobre el fondo claro y este queda en 4,7:1, suficiente para texto normal.
     #15BCDF se conserva como relleno de botones y sobre fondos oscuros. */
  --accent-text: #0D768C;
  --bg: #F2F1F0;
  --bg-alt: #F7F6F8;
  --heading: #2b3033;
  --nav: #3a3a3a;
  --gray: #4D5357;
  --dark: #1a1c1e;
  --navy: #1B5A8C;
  /* Escalón del titular del hero: un desfase leve entre las dos frases */
  --hero-indent: min(96px, 9vw);

  /* Panel del hero. Cada producto reescribe estas variables (en el carrusel
     de la landing vía JS, en cada página de producto vía style inline), y
     todo lo que vive dentro del hero — fondo, scrim, logo, titular, botones —
     se recolorea solo a partir de ellas. */
  --panel-bg: var(--bg);
  --panel-fg: var(--heading);
  /* Más oscuro que --gray a propósito: este texto vive sobre el degradado del
     hero, donde la foto se transparenta. Con --gray (4,49:1) no pasaba el
     mínimo AA; así queda en 6,9:1 y aguanta el velo de la imagen. */
  --panel-muted: #4D5357;
  --panel-accent: var(--accent-text);
  --panel-btn-bg: var(--accent);
  --panel-btn-fg: var(--dark);
  --panel-btn-border: var(--accent-border);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  font-family: 'Quantico', 'Arial Narrow', sans-serif;
  color: var(--nav);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--nav); text-decoration: none; }
a:hover { color: #000; }
h1, h2, h3 {
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
  margin: 0;
  color: var(--heading);
  font-weight: 700;
}
select, input, button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 3px; }

/* ---- Botones achaflanados ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--panel-btn-bg);
  border: 1px solid var(--panel-btn-border);
  color: var(--panel-btn-fg);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 18px 34px;
  font-size: clamp(13px, 2.2vw, 16px);
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  box-shadow: 0 0 0 1px rgba(21,188,223,0.35), 0 10px 30px -12px rgba(15,163,194,0.6);
  transition: background 160ms ease, box-shadow 160ms ease;
}
.btn:hover {
  background: color-mix(in srgb, var(--panel-btn-bg) 82%, #fff);
  color: var(--panel-btn-fg);
  box-shadow: 0 0 0 1px rgba(21,188,223,0.55), 0 14px 36px -10px rgba(15,163,194,0.75);
}
.btn::after { content: ""; width: 22px; height: 1px; background: var(--panel-btn-fg); display: inline-block; }
.btn-sm { padding: 14px 26px; font-size: 13px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid var(--panel-fg);
  color: var(--panel-fg);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 14px 26px;
  font-size: 13px;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: background 160ms ease, color 160ms ease;
}
.btn-ghost:hover { background: var(--panel-fg); color: var(--panel-bg); }
.btn-ghost.on-dark { border-color: rgba(255,255,255,0.7); color: #fff; }
.btn-ghost.on-dark:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* ---- Navbar ---- */
.navbar {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 5vw, 56px);
  padding: clamp(20px, 3vw, 38px) clamp(20px, 4vw, 48px) 0;
}
/* Marca: el logo original es vertical (símbolo sobre texto). Aquí va el
   lockup horizontal que pide una navbar, con las dos piezas del arte real. */
.logo { display: flex; align-items: center; gap: 12px; }
.logo-mark { width: 42px; height: 42px; flex: none; display: block; }
.logo-wordmark { height: 26px; width: auto; display: block; }
.nav-links { display: flex; gap: 34px; }
.nav-links a {
  font-weight: 700;
  font-size: clamp(12px, 2.4vw, 15px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--panel-fg);
  opacity: 0.75;
  white-space: nowrap;
  transition: color 650ms cubic-bezier(0.4,0,0.2,1), opacity 200ms ease;
}
.nav-links a:hover { color: var(--panel-fg); opacity: 1; }
.nav-links a[aria-current="page"] { color: var(--panel-accent); opacity: 1; }

/* ---- Desplegable de Productos ----
   Sin JavaScript: `hover` cubre el ratón y `focus-within` el teclado. El
   disparador es un enlace real a la sección de productos, así que si algo
   falla el menú sigue llevando a alguna parte. El padding inferior negativo
   tiende un puente sobre el hueco para que el cursor no lo cierre al bajar. */
.nav-drop { position: relative; display: flex; padding-bottom: 12px; margin-bottom: -12px; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 7px; }
.nav-drop-btn::after {
  content: ""; width: 5px; height: 5px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 200ms ease;
}
.nav-drop:hover .nav-drop-btn,
.nav-drop:focus-within .nav-drop-btn { opacity: 1; }
.nav-drop:hover .nav-drop-btn::after,
.nav-drop:focus-within .nav-drop-btn::after { transform: rotate(-135deg) translate(-2px,-2px); }

.nav-drop-menu {
  position: absolute; top: 100%; left: -16px;
  min-width: 194px; padding: 7px;
  display: flex; flex-direction: column;
  background: var(--panel-bg);
  border: 1px solid color-mix(in srgb, var(--panel-fg) 16%, transparent);
  box-shadow: 0 20px 44px -20px rgba(0,0,0,0.3);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  z-index: 20;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: none; }
.nav-drop-menu a {
  padding: 11px 14px; font-size: 12.5px; letter-spacing: 0.1em;
  opacity: 0.85; white-space: nowrap;
}
.nav-drop-menu a:hover { opacity: 1; background: color-mix(in srgb, var(--panel-fg) 8%, transparent); }

/* Menú móvil: los productos van bajo un rótulo de grupo */
.mobile-group {
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 700; color: var(--panel-muted); opacity: 0.85;
}
.mobile-menu .mobile-sub { font-size: 16px; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 10px;
  margin-left: auto;
  cursor: pointer;
}
.hamburger span { width: 22px; height: 2px; background: var(--panel-fg); display: block; transition: background 650ms cubic-bezier(0.4,0,0.2,1); }
.mobile-menu {
  display: none;
  position: relative;
  z-index: 5;
  flex-direction: column;
  gap: 18px;
  padding: 18px clamp(20px, 4vw, 48px) 0;
}
.mobile-menu a {
  font-weight: 700; font-size: 15px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--panel-fg);
}
/* Franja con fondo alterno para separar bloques dentro de una página */
.band-alt { background: var(--bg-alt); border-top: 1px solid rgba(43,48,51,0.14); border-bottom: 1px solid rgba(43,48,51,0.14); }
.mobile-menu.open { display: flex; }

/* ---- Hero de la landing (carrusel de 4 productos) ---- */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--panel-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background 650ms cubic-bezier(0.4,0,0.2,1);
}
.hero h1, .prod-hero h1 { color: var(--panel-fg); transition: color 650ms cubic-bezier(0.4,0,0.2,1); }
.hero .accent, .prod-hero .accent { color: var(--panel-accent); transition: color 650ms cubic-bezier(0.4,0,0.2,1); }
.hero .eyebrow, .prod-hero .eyebrow,
.hero .breadcrumb, .prod-hero .breadcrumb,
.hero .breadcrumb a, .prod-hero .breadcrumb a { color: var(--panel-muted); }
.hero-media {
  position: absolute;
  top: 0; right: -6%;
  width: 62%;
  height: 100%;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 650ms cubic-bezier(0.4,0,0.2,1);
}
/* El scrim se desvanece hacia una versión transparente del MISMO color del
   panel; usar `transparent` a secas metería un tinte gris en el degradado. */
.hero-scrim {
  position: absolute;
  inset: 0;
  width: 84%;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--panel-bg) 0%,
    var(--panel-bg) 52%,
    color-mix(in srgb, var(--panel-bg) 85%, transparent) 76%,
    color-mix(in srgb, var(--panel-bg) 0%, transparent) 100%);
  transition: background 650ms cubic-bezier(0.4,0,0.2,1);
}
.hero-body { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; }
/* La navbar queda arriba y el bloque titular + CTA + selector de producto se
   centra en el espacio restante: los `auto` de arriba y de abajo lo agrupan,
   en vez de dejar los botones pegados al borde inferior de la pantalla. */
.hero-copy {
  margin-top: auto;
  padding: clamp(28px, 4vw, 56px) 20px min(clamp(20px, 3vw, 36px), 4vh) clamp(20px, 9vw, 118px);
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gray);
  margin: 0 0 22px;
}
/* El titular son SIEMPRE dos líneas, una por frase: `nowrap` impide que una
   frase se parta sola y el tamaño se calcula para que la más larga del
   carrusel ("Puede que algo le pase a tu carro,") quepa sin salirse del
   degradado. En móvil se libera el nowrap, porque ahí sí debe envolver. */
h1.headline { font-size: min(clamp(24px, 2.85vw, 54px), 7vh); }
h1.headline .line { display: block; white-space: nowrap; }
h1.headline .indent { margin-left: var(--hero-indent); }
.accent { color: var(--accent-text); }
/* Sobre los fondos oscuros el cian de marca sí contrasta (7,3:1): allí se
   mantiene brillante. */
.empresas .accent, .contacto .accent { color: var(--accent-hover); }
.hero-lede {
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.7;
  color: var(--panel-muted);
  max-width: 42ch;
  margin: 26px 0 0 var(--hero-indent);
  transition: color 650ms cubic-bezier(0.4,0,0.2,1);
}
.hero-cta {
  padding: 0 20px min(clamp(28px, 5vw, 56px), 5vh) calc(clamp(20px, 9vw, 118px) + var(--hero-indent));
}
/* En escritorio los cuatro productos van centrados: la columna vacía de la
   izquierda le hace contrapeso a las flechas de la derecha para que el grupo
   quede en el eje. En móvil vuelve a ser flex (ver body.is-mobile). */
.hero-nav {
  position: relative;
  z-index: 3;
  margin-bottom: auto;
  /* Padding simétrico: con la sangría de 118px a la izquierda, la columna
     central caía desplazada del eje del hero. */
  padding: clamp(24px, 3.2vw, 38px) clamp(20px, 4vw, 48px) clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}
.hero-nav .hero-nav-group { grid-column: 2; justify-self: center; }
.hero-nav .hero-arrows { grid-column: 3; justify-self: end; }
.hero-nav-group { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-nav button[data-hero-nav] {
  min-height: 44px;
  padding: 11px 20px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--panel-fg) 40%, transparent);
  color: var(--panel-fg);
  opacity: 0.78;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: background 200ms ease, color 650ms cubic-bezier(0.4,0,0.2,1), border-color 650ms cubic-bezier(0.4,0,0.2,1), opacity 200ms ease;
}
.hero-nav button[data-hero-nav]:hover { opacity: 1; }
.hero-nav button[data-hero-nav][aria-current="true"] {
  background: var(--panel-btn-bg);
  border-color: var(--panel-btn-border);
  color: var(--panel-btn-fg);
  opacity: 1;
}
.hero-arrows { display: flex; gap: 8px; margin-left: auto; }
.hero-arrows button {
  width: 46px; height: 46px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--panel-fg) 40%, transparent);
  color: var(--panel-fg);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: background 200ms ease, color 650ms cubic-bezier(0.4,0,0.2,1), border-color 650ms cubic-bezier(0.4,0,0.2,1);
}
.hero-arrows button:hover { background: color-mix(in srgb, var(--panel-fg) 12%, transparent); }

/* ---- Hero de página de producto (imagen fija) ---- */
.prod-hero {
  position: relative;
  background: var(--panel-bg);
  overflow: hidden;
}
.prod-hero .hero-scrim {
  background: linear-gradient(90deg,
    var(--panel-bg) 0%,
    var(--panel-bg) 55%,
    color-mix(in srgb, var(--panel-bg) 85%, transparent) 78%,
    color-mix(in srgb, var(--panel-bg) 0%, transparent) 100%);
}
.prod-hero-media {
  position: absolute;
  top: 0; right: -6%;
  width: 58%;
  height: 100%;
  pointer-events: none;
  background-size: cover;
  background-position: center;
}
.prod-hero-body {
  position: relative;
  z-index: 2;
  padding: clamp(40px, 7vw, 92px) 20px clamp(48px, 7vw, 96px) clamp(20px, 9vw, 118px);
}
.breadcrumb {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gray);
  margin: 0 0 22px;
}
.breadcrumb a { color: var(--gray); }
.breadcrumb a:hover { color: var(--accent-text); }
.prod-lede {
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.7;
  color: var(--panel-muted);
  max-width: 48ch;
  margin: 28px 0 0 var(--hero-indent);
}
.prod-actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 36px 0 0 var(--hero-indent);
}

/* ---- Contenedor de sección ---- */
.section {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(70px, 10vw, 140px) clamp(20px, 4vw, 48px);
}
.section-tight { padding-top: clamp(50px, 7vw, 90px); padding-bottom: clamp(50px, 7vw, 90px); }
.section-title { font-size: clamp(30px, 5.4vw, 62px); }
.section-title .line { display: block; }
.section-title .indent { margin-left: min(160px, 18vw); }

/* ---- Coberturas (páginas de producto) ---- */
.cover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: rgba(43,48,51,0.14);
  border: 1px solid rgba(43,48,51,0.14);
  margin-top: 56px;
}
.cover-card { background: var(--bg-alt); padding: 32px 28px; }
.cover-num {
  display: block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--accent-text); margin-bottom: 14px;
}
.cover-card h3 { font-size: 17px; margin: 0 0 12px; }
.cover-card p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--gray); }
/* Marca las coberturas que dependen del plan contratado y no vienen en toda
   póliza: la aclaración completa va en .cover-nota, bajo la grilla. */
.cover-tag {
  display: inline-block; margin: 0 0 12px; padding: 4px 9px;
  border: 1px solid var(--accent-border);
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-text);
}
.cover-card h3 + .cover-tag { margin-top: -4px; }
.cover-nota {
  margin: 28px 0 0; max-width: 74ch;
  font-size: 13.5px; line-height: 1.7; color: var(--gray);
  border-left: 2px solid var(--accent); padding-left: 14px;
}
.cover-nota strong { color: var(--heading); font-weight: 700; }

/* ---- Cómo trabajamos ---- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  margin-top: 56px;
}
.step { border-top: 2px solid var(--accent); padding-top: 22px; }
.step span {
  display: block; font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; color: var(--accent-text); margin-bottom: 12px;
}
.step h3 { font-size: 17px; margin: 0 0 10px; }
.step p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--gray); }

/* ---- Preguntas frecuentes ---- */
.faq { margin-top: 52px; border-top: 1px solid rgba(43,48,51,0.16); max-width: 900px; }
.faq details { border-bottom: 1px solid rgba(43,48,51,0.16); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 26px 44px 26px 0;
  position: relative;
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--heading);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--accent-text);
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--accent-text); }
.faq p {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray);
  max-width: 68ch;
}

/* ---- Tarjetas de producto (landing) ---- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 64px;
}
.product-card {
  display: block;
  background: var(--bg-alt);
  border: 1px solid rgba(43,48,51,0.12);
  padding: 28px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  transition: border-color 200ms ease, transform 200ms ease;
}
.product-card:hover { border-color: var(--accent); transform: translateY(-3px); color: var(--nav); }
.product-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--accent);
  padding: 7px 13px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.product-card h3 { font-size: 19px; margin: 22px 0 10px; }
.product-card p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--gray); }
.product-more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text);
}

/* ---- Empresas (fondo oscuro) ---- */
.empresas { position: relative; overflow: hidden; background: #1e2528; color: #fff; }
.empresas-bg {
  position: absolute; inset: 0;
  background-image: linear-gradient(100deg, #1e2528 30%, rgba(30,37,40,0.7) 66%, rgba(30,37,40,0.3) 100%), url('assets/fotos/empresas-construccion.webp');
  background-size: cover;
  /* La foto es vertical y la franja es ancha: `cover` recorta una banda. Subo
     el encuadre para que caiga sobre el rostro y no sobre el mentón. */
  background-position: center 26%;
}
.empresas-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(80px, 10vw, 130px) clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px;
  align-items: center;
}
.empresas h2 { color: #fff; font-size: clamp(28px, 4.4vw, 52px); }
.empresas .eyebrow { color: rgba(255,255,255,0.65); }
.empresas-item { border-top: 1px solid rgba(255,255,255,0.25); padding-top: 20px; }
.empresas-item h3 { color: #fff; font-size: 18px; margin: 0 0 10px; }
.empresas-item p { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.75); }

/* ---- Nosotros ---- */
/* Sin imagen, la sección se reparte en dos columnas: el titular a la
   izquierda y el texto con los diferenciales a la derecha, para que no quede
   todo apilado a un lado con la otra mitad vacía. */
.about { background: linear-gradient(180deg, #F2F1F0 0%, #F7F6F8 18%, #F7F6F8 100%); }
.about-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(70px, 10vw, 140px) clamp(20px, 4vw, 48px);
  display: grid;
  /* Dos columnas explícitas: con auto-fit, el bloque de hitos (que ocupa la
     fila entera) impedía colapsar las pistas vacías y la rejilla se abría a
     cuatro columnas, montando el texto sobre el titular. */
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 820px) {
  .about-inner { grid-template-columns: 1fr; }
}
.about-copy {
  max-width: 52ch;
  margin: 0;
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.7;
  color: var(--gray);
}
/* Fijo en 2×2: son cuatro, y con auto-fit se iban a tres dejando un hueco. */
.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(43,48,51,0.14);
  border: 1px solid rgba(43,48,51,0.14);
  max-width: 520px;
  margin: 34px 0 0;
}
/* El icono ocupa una gutter propia a la izquierda, alineada con las dos
   filas de texto; así acompaña sin competir con la tipografía. */
.about-stat {
  background: var(--bg-alt); padding: 20px 18px;
  display: grid; grid-template-columns: auto 1fr; align-items: start;
  gap: 0 14px;
}
.about-stat .stat-num {
  grid-column: 2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent-text);
  margin-bottom: 8px;
}
.stat-ico {
  width: 22px; height: 22px; grid-column: 1; grid-row: 1 / 3; align-self: center;
  color: var(--accent-text); opacity: 0.8;
  transition: opacity 250ms ease, transform 250ms cubic-bezier(0.4,0,0.2,1);
}
.about-stat:hover .stat-ico { opacity: 1; transform: translateY(-2px); }
.about-stat p {
  grid-column: 2;
  margin: 0; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--heading);
}

/* ---- Hitos: línea de tiempo interactiva ---- */
/* Ocupa el ancho completo bajo las dos columnas de "Sobre nosotros".
   Escritorio: raíl horizontal con cuatro puntos; el punto activo abre su
   detalle en el panel de abajo y el trayecto se rellena hasta él.
   Móvil: el raíl gira a vertical y los cuatro hitos quedan visibles a la vez
   (ver body.is-mobile), porque ocultar contenido tras un toque no compensa. */
.about-hitos { grid-column: 1 / -1; margin-top: clamp(48px, 6vw, 84px); }
.hitos-wrap { position: relative; margin-top: 34px; }

.hitos-rail {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: rgba(43,48,51,0.16);
}
.hitos-trail {
  position: absolute; left: 0; top: 0; height: 100%; width: 0;
  background: var(--accent-text);
  transition: width 520ms cubic-bezier(0.4,0,0.2,1);
}

.hitos {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: clamp(16px, 2.4vw, 40px);
}
/* Estáticos a propósito: el detalle se posiciona contra .hitos-wrap para que
   los cuatro paneles se apilen en el mismo sitio. */
.hito { position: static; display: flex; flex-direction: column; align-items: center; }
.hito:first-child { align-items: flex-start; }
.hito:last-child { align-items: flex-end; }

.hito-dot {
  appearance: none; padding: 0; margin: -7px 0 0;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--bg);
  background: #a9adb0;
  cursor: pointer;
  transition: background 260ms ease, transform 260ms cubic-bezier(0.4,0,0.2,1);
}
.hito-dot:hover { transform: scale(1.18); }
.hito-dot:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 3px; }
.hito.is-recorrido .hito-dot { background: var(--accent-text); }
.hito.is-activo .hito-dot { background: #0a5e70; transform: scale(1.35); }

.hito-anio {
  display: block; margin-top: 14px;
  font-size: clamp(18px, 2vw, 26px); font-weight: 700;
  letter-spacing: 0.02em; color: var(--gray);
  font-variant-numeric: tabular-nums; line-height: 1.1;
  transition: color 260ms ease;
}
.hito.is-activo .hito-anio { color: var(--heading); }

/* Los cuatro detalles ocupan la misma casilla; solo el activo es visible. */
.hito-cuerpo {
  position: absolute; left: 0; right: 0; top: 86px;
  max-width: 62ch;
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity 420ms cubic-bezier(0.4,0,0.2,1),
              transform 420ms cubic-bezier(0.4,0,0.2,1),
              visibility 0s linear 420ms;
}
.hito.is-activo .hito-cuerpo {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s, 0s, 0s;
}
.hito-cuerpo h3 {
  margin: 0 0 10px; font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--heading);
}
.hito-cuerpo p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--gray); }

/* Reserva la altura del panel más alto: con detalles absolutos, el contenedor
   no la calcula solo. */
.hitos-wrap { padding-bottom: 172px; }

.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 (prefers-reduced-motion: reduce) {
  .hitos-trail, .hito-dot, .hito-cuerpo, .hito-anio { transition: none; }
}

/* ---- Aseguradoras ---- */
.partners {
  border-top: 1px solid rgba(43,48,51,0.14);
  border-bottom: 1px solid rgba(43,48,51,0.14);
  background: var(--bg-alt);
  padding: 40px 0 44px;
  overflow: hidden;
}
.partners-label {
  font-size: 12px; letter-spacing: 0.18em; font-weight: 700;
  text-transform: uppercase; color: var(--gray);
  margin: 0 0 26px; text-align: center;
}

/* ---- Cinta infinita de aseguradoras ---- */
.marquee {
  position: relative;
  overflow: hidden;
  /* Los bordes se desvanecen para que las piezas entren y salgan sin cortarse */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee-track {
  display: flex;
  width: max-content;
  /* La duración es una variable para poder frenar la cinta en móvil, donde la
     pantalla es angosta y el desplazamiento se percibe más rápido. */
  animation: marquee-scroll var(--marquee-speed, 42s) linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* El margen va en cada pieza (no `gap`) para que cada copia mida exactamente
   lo mismo y el desplazamiento al -50% caiga justo en la costura. */
.partner {
  flex: none;
  margin-right: 18px;
  min-width: 232px; height: 96px; padding: 0 22px;
  border: 1px solid rgba(43,48,51,0.16); background: var(--bg);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gray);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
/* Las proporciones van de 1,7:1 a 3,8:1, así que un tope único dejaría unos
   enormes y otros diminutos. El tope de ancho iguala los horizontales y los
   apilados llevan más alto para que su texto siga siendo legible. */
.partner img {
  max-width: 176px; max-height: 48px;
  width: auto; height: auto;
  object-fit: contain; display: block;
}
.partner img[data-logo="mapfre"] { max-height: 58px; }
.partner img[data-logo="axa"]      { max-height: 68px; max-width: 130px; }
/* Quálitas (0,73:1) y HDI (1,47:1) son lockups verticales: con el tope de
   ancho general saldrían diminutos, así que mandan por alto. */
.partner img[data-logo="qualitas"] { max-height: 74px; max-width: 76px; }
.partner img[data-logo="hdi"]      { max-height: 62px; max-width: 108px; }

/* ---- Contacto ---- */
.contacto { background: var(--heading); color: #fff; }
.contacto-inner {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(80px, 9vw, 120px) clamp(20px, 4vw, 48px);
  display: flex; flex-direction: column; gap: 40px;
  align-items: stretch;
}
.contacto-inner .btn { align-self: center; }
.contacto h2 { color: #fff; font-size: clamp(28px, 4.2vw, 56px); max-width: 18ch; }
.contacto h2 .line { display: block; }
.contacto p { margin: 20px 0 0; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.7); }

/* ---- Footer ---- */
.footer { background: var(--bg); border-top: 1px solid rgba(43,48,51,0.14); }
.footer-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 54px clamp(20px, 4vw, 48px);
  display: flex; flex-wrap: wrap; gap: 32px;
  justify-content: space-between; align-items: flex-start;
}
.footer-brand { font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--heading); margin: 0; }
.footer-sub { font-size: 10px; letter-spacing: 0.22em; color: var(--gray); margin: 8px 0 0; font-weight: 700; text-transform: uppercase; }
.footer-cols { display: flex; gap: 44px; flex-wrap: wrap; font-size: 13px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--gray); }
.footer-col a:hover { color: var(--accent-text); }
.footer-contact { display: flex; flex-direction: column; gap: 9px; font-size: 13px; color: var(--gray); max-width: 34ch; }
.footer-contact a { color: var(--gray); }
.footer-contact a:hover { color: var(--accent-text); }
.footer-legal { margin: 8px 0 0; font-size: 12px; color: var(--gray); line-height: 1.6; }

/* ==========================================================================
   MÓVIL (≤700px, alternado por JS con la clase .is-mobile en el body)
   El hero cambia de eje: en escritorio la foto va a la derecha y el degradado
   corre en horizontal; aquí la foto ocupa el ancho arriba y se difumina hacia
   abajo, con el texto entrando sobre su borde inferior.
   ========================================================================== */
body.is-mobile {
  /* Alto de la foto del hero; lo comparten media, scrim y flechas */
  --m-media-h: min(46vh, 380px);
  /* Alto aproximado de la navbar: el texto va en el flujo debajo de ella, así
     que hay que descontarlo para calcular cuánto sube sobre la foto. */
  --m-nav-h: 76px;
  /* Sin escalón: el titular va centrado y el desfase pelearía con el centrado */
  --hero-indent: 0px;
}
body.is-mobile .nav-links,
body.is-mobile .nav-right { display: none; }
body.is-mobile .hamburger { display: flex; }
/* La navbar se apoya sobre la parte no difuminada de la foto: fondo propio */
body.is-mobile .navbar { background: var(--panel-bg); padding-bottom: 14px; }
body.is-mobile .mobile-menu { background: var(--panel-bg); padding-bottom: 18px; text-align: center; }

/* --- Foto y difuminado vertical --- */
body.is-mobile .hero-media,
body.is-mobile .prod-hero-media {
  top: 0; left: 0; right: auto;
  width: 100%;
  height: var(--m-media-h);
}
body.is-mobile .hero-scrim,
body.is-mobile .prod-hero .hero-scrim {
  display: block;
  top: 0; left: 0; right: auto; bottom: auto;
  width: 100%;
  height: var(--m-media-h);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--panel-bg) 0%, transparent) 0%,
    color-mix(in srgb, var(--panel-bg) 0%, transparent) 42%,
    color-mix(in srgb, var(--panel-bg) 55%, transparent) 72%,
    color-mix(in srgb, var(--panel-bg) 92%, transparent) 90%,
    var(--panel-bg) 100%);
}

/* --- Flechas a lado y lado de la foto ---
   .hero-nav pasa a estático para que las flechas se midan contra .hero-body
   (que arranca en el borde superior del hero, igual que la foto). */
body.is-mobile .hero-nav { position: static; }
body.is-mobile .hero-arrows {
  position: absolute;
  top: calc(var(--m-media-h) * 0.52);
  left: 0; right: 0;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 10px;
  justify-content: space-between;
  z-index: 4;
  pointer-events: none;  /* solo los botones capturan el toque */
}
body.is-mobile .hero-arrows button {
  pointer-events: auto;
  width: 44px; height: 44px;
  background: color-mix(in srgb, var(--panel-bg) 76%, transparent);
  border-color: color-mix(in srgb, var(--panel-fg) 22%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* --- Texto centrado, montado sobre el borde inferior de la foto --- */
body.is-mobile .hero-copy {
  margin-top: calc(var(--m-media-h) - var(--m-nav-h) - 42px);
  padding: 0 20px 22px;
  text-align: center;
}
body.is-mobile .prod-hero-body {
  margin-top: calc(var(--m-media-h) - var(--m-nav-h) - 42px);
  padding: 0 20px 40px;
  text-align: center;
}
body.is-mobile .eyebrow { margin-bottom: 14px; }
body.is-mobile h1.headline {
  font-size: clamp(24px, 7.4vw, 38px);
  max-width: none;   /* centrado: usa todo el ancho con padding */
}
/* A 390px las frases largas no caben en una línea: aquí sí deben envolver */
body.is-mobile h1.headline .line { white-space: normal; }
body.is-mobile h1.headline .indent { margin-left: 0; }
body.is-mobile .hero-lede,
body.is-mobile .prod-lede { margin-left: auto; margin-right: auto; }
body.is-mobile .breadcrumb { justify-content: center; }

/* --- Botones centrados --- */
body.is-mobile .hero-cta {
  display: flex;
  justify-content: center;
  padding: 0 20px 26px;
}
body.is-mobile .prod-actions { justify-content: center; }
body.is-mobile .hero-nav {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20px 34px;
  justify-content: center;
}
/* Cuatro botones no caben en una fila a 390px y quedaban 3+1; en rejilla 2×2
   el bloque se lee como una unidad. */
body.is-mobile .hero-nav-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 330px;
}
body.is-mobile .hero-nav-group button { width: 100%; }

/* --- Secciones: sin sangrías heredadas del escritorio --- */
body.is-mobile .section { padding: 58px 20px; }
body.is-mobile .section-tight { padding-top: 48px; padding-bottom: 48px; }
body.is-mobile .section-title { font-size: clamp(28px, 8vw, 42px); }
body.is-mobile .section-title .indent { margin-left: 0; }
body.is-mobile .empresas-inner { padding: 62px 20px; gap: 36px; }
body.is-mobile .empresas h2 { font-size: clamp(26px, 7.5vw, 40px); }

body.is-mobile .about-inner { padding: 58px 20px; gap: 26px; }
/* A 390px las tarjetas medían más que el viewport por su ancho mínimo de
   contenido (icono + gutter + dos palabras largas) y arrastraban la rejilla;
   min-width:0 deja que el texto parta línea. */
body.is-mobile .about-inner > * { min-width: 0; }
body.is-mobile .about-stats { max-width: 100%; }
body.is-mobile .about-stat { min-width: 0; padding: 16px 14px; gap: 0 10px; }
body.is-mobile .about-stat p { font-size: 13px; overflow-wrap: anywhere; }
body.is-mobile .stat-ico { width: 19px; height: 19px; }

body.is-mobile .about-hitos { margin-top: 44px; }
/* Vertical en móvil: el raíl se pone de canto a la izquierda, los puntos se
   apilan sobre él y los cuatro detalles quedan abiertos. */
body.is-mobile .hitos-wrap { padding-bottom: 0; padding-left: 26px; }
body.is-mobile .hitos-rail {
  top: 6px; bottom: 6px; left: 0; right: auto;
  width: 2px; height: auto;
}
body.is-mobile .hitos-trail { width: 100%; height: 100%; }
body.is-mobile .hitos { display: block; }
body.is-mobile .hito {
  display: block; position: relative;
  padding: 4px 0 24px;
}
body.is-mobile .hito + .hito { padding-top: 22px; border-top: 1px solid rgba(43,48,51,0.12); }
body.is-mobile .hito-dot {
  position: absolute; left: -33px; top: 7px; margin: 0;
  width: 14px; height: 14px;
  background: var(--accent-text);
}
body.is-mobile .hito + .hito .hito-dot { top: 25px; }
body.is-mobile .hito-dot:hover, body.is-mobile .hito.is-activo .hito-dot { transform: none; }
body.is-mobile .hito-anio { margin-top: 0; margin-bottom: 8px; font-size: 18px; color: var(--heading); }
body.is-mobile .hito-cuerpo {
  position: static; opacity: 1; visibility: visible; transform: none;
  max-width: none;
}
body.is-mobile .hito-cuerpo p { font-size: 14.5px; }

body.is-mobile .cover-grid { margin-top: 38px; }
body.is-mobile .cover-card { padding: 26px 22px; }
body.is-mobile .steps { margin-top: 38px; gap: 26px; }
body.is-mobile .faq { margin-top: 34px; }
body.is-mobile .faq summary { padding: 22px 40px 22px 0; }
body.is-mobile .product-grid { margin-top: 38px; }


/* Cinta más lenta en móvil: la misma velocidad se siente acelerada cuando solo
   caben dos logos en pantalla. */
body.is-mobile { --marquee-speed: 55s; }
body.is-mobile .partners { padding: 32px 0 34px; }
body.is-mobile .partners-label { margin-bottom: 20px; }
body.is-mobile .partner { min-width: 186px; height: 82px; padding: 0 16px; }
body.is-mobile .partner img { max-width: 142px; max-height: 40px; }
body.is-mobile .partner img[data-logo="mapfre"] { max-height: 48px; }
body.is-mobile .partner img[data-logo="axa"] { max-height: 56px; max-width: 108px; }
body.is-mobile .partner img[data-logo="qualitas"] { max-height: 60px; max-width: 62px; }
body.is-mobile .partner img[data-logo="hdi"] { max-height: 50px; max-width: 88px; }
body.is-mobile .contacto-inner { padding: 62px 20px; gap: 30px; text-align: center; }
body.is-mobile .contacto-inner .btn { width: 100%; justify-content: center; }
body.is-mobile .contacto h2 { max-width: none; }
body.is-mobile .footer-inner { padding: 40px 20px; gap: 28px; }

body:not(.is-mobile) .mobile-menu { display: none; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ==========================================================================
   Páginas legales (privacidad, términos, cookies)
   ========================================================================== */
.legal { max-width: 78ch; }
.legal-meta {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray); margin: 0 0 38px;
}
.legal h2 {
  font-size: clamp(17px, 2.1vw, 22px);
  margin: 46px 0 14px; letter-spacing: 0.02em;
}
.legal h3 {
  font-size: 14px; margin: 26px 0 10px;
  letter-spacing: 0.06em; color: var(--accent-text);
}
.legal p { font-size: 15px; line-height: 1.75; color: var(--gray); margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { font-size: 15px; line-height: 1.75; color: var(--gray); margin-bottom: 9px; }
.legal strong { color: var(--heading); font-weight: 700; }
.legal a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.legal-note {
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 16px; margin: 22px 0;
}
.legal-note p { margin: 0; }
.legal-dl { margin: 0 0 18px; }
.legal-dl div {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  padding: 11px 0; border-bottom: 1px solid rgba(43,48,51,0.12);
  font-size: 14.5px; line-height: 1.6;
}
.legal-dl dt {
  font-weight: 700; color: var(--heading); min-width: 190px;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 12.5px;
  padding-top: 2px;
}
.legal-dl dd { margin: 0; color: var(--gray); flex: 1; min-width: 220px; }

/* Dato que solo el cliente puede aportar. Se marca en amarillo para que sea
   imposible publicar la página sin haberlo reemplazado. */
.pendiente {
  background: #FFF3CD; color: #6B4E00;
  border: 1px dashed #C9A227; border-radius: 3px;
  padding: 1px 7px; font-weight: 700;
  font-size: 0.92em; white-space: nowrap;
}
.aviso-borrador {
  background: #FFF8E5; border: 1px solid #E3CD9B;
  padding: 20px 22px; margin: 0 0 40px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.aviso-borrador p { margin: 0; font-size: 14px; line-height: 1.7; color: #6B4E00; }
.aviso-borrador strong { color: #4A3600; }

.footer-legal-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; }
.footer-legal-links a {
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; color: var(--gray);
}
.footer-legal-links a:hover { color: var(--accent-text); }

body.is-mobile .legal-dl dt { min-width: 100%; }

/* ---- Hero sin foto ----
   Variante para los productos que todavía no tienen fotografía propia. En vez
   de un hueco o una imagen prestada, el panel se pinta con el azul de marca y
   todo el hero se recolorea solo a través de las variables --panel-*.
   Contraste sobre #154A73: blanco 9,3:1 y el cian claro 5,1:1. */
.prod-hero.sin-foto {
  --panel-bg: #154A73;
  --panel-fg: #ffffff;
  --panel-muted: #D7DEE3;
  --panel-accent: var(--accent-hover);
  --panel-btn-bg: var(--accent);
  --panel-btn-fg: #10222f;
  --panel-btn-border: var(--accent);
  background: var(--panel-bg);
}
.prod-hero.sin-foto .prod-hero-media,
.prod-hero.sin-foto .hero-scrim { display: none; }
/* Trama diagonal tenue: le da textura al panel sin competir con el texto. */
.prod-hero.sin-foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 78px);
}
.prod-hero.sin-foto .prod-hero-body { position: relative; z-index: 2; }
.prod-hero.sin-foto .breadcrumb a { color: var(--panel-muted); }
/* El logo es azul de marca y sobre el panel azul desaparecía: aquí va en
   blanco. Es la misma marca, solo en su versión monocroma. */
.prod-hero.sin-foto .logo img { filter: brightness(0) invert(1); }

/* Encabezados de grupo dentro del menú Productos */
.nav-drop-label {
  display: block; padding: 9px 12px 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gray);
}
.nav-drop-label + a { margin-top: 0; }
.nav-drop-menu .nav-drop-label ~ .nav-drop-label { margin-top: 6px; border-top: 1px solid color-mix(in srgb, var(--panel-fg) 12%, transparent); }

/* Las dos tarjetas de empresas ahora son enlaces a su página de producto. */
a.empresas-item { text-decoration: none; display: block; transition: border-color 200ms ease, transform 200ms cubic-bezier(0.4,0,0.2,1); }
a.empresas-item:hover { transform: translateY(-2px); }