/* css/sections.css — estilos por sección de la home y componentes globales (topbar, drawer, footer). */

/* ============================================================
   TOPBAR
   ============================================================ */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  transition:
    background var(--transition-base),
    box-shadow var(--transition-base);
}

/* El topbar es blanco sólido en todas las páginas. Solo aparece la línea
   inferior al separarse del borde de la página. */
.topbar {
  background: var(--bg-primary);
}
.topbar.scrolled {
  border-bottom: 1px solid var(--border);
}

/* La barra es blanca sólida en TODAS las páginas, portada incluida.
   Se probó a hacerla transparente flotando sobre la foto del hero y se
   descartó por decisión del cliente.

   De aquel intento conviene conservar el fallo que provocó, porque es
   reincidente: la variante clara del logotipo se ocultaba con
   `.topbar-logo-text-light` —especificidad (0,1,0)— y perdía contra
   `.topbar-logo img { display: block }` —(0,1,1) y además posterior—,
   así que se veían LOS DOS logotipos a la vez en la barra. Es el mismo
   fallo que ya había pasado con el logotipo del pie. Si hay que ocultar
   una pieza del logo, el selector tiene que pesar al menos lo mismo que
   `.topbar-logo img`. */

/* En la página de privacidad, cuando se llega desde el formulario, sin
   línea inferior: el botón sticky que aparece justo debajo ya define
   el corte. */
body.has-privacy-return .topbar {
  border-bottom: 0;
  box-shadow: none;
}

.topbar > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-6);
}

.topbar-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  flex-shrink: 0;
  color: var(--fg-primary);
}
@media (max-width: 768px) {
  .topbar-logo { height: 28px; gap: 8px; }

}
.topbar-logo svg,
.topbar-logo img { height: 100%; width: auto; display: block; }

/* LOGO DEFINITIVO (trazado, entregado por el cliente).
   El provisional eran dos piezas: un isotipo cuadrado y un logotipo que
   era SOLO texto, con proporción 6,5:1. El definitivo es el conjunto
   completo —coche, "AUTOMOTOR", ruedas y "4X4.com"— con proporción
   2,6:1, y ya lleva la rueda dentro.

   Por eso el isotipo se oculta aquí: puesto al lado, la rueda salía dos
   veces, y el logotipo metido en el hueco del antiguo quedaba a 79px de
   ancho, ilegible. Se comprobó a qué tamaño se lee de verdad: a 30px va
   justo, a 38 se lee y a 44 se lee cómodo.

   Subido a 56px por decisión del cliente. A 44 sobraba aire por arriba y
   por abajo en una barra de 72 y el logo quedaba pequeño para lo que es:
   la marca. Con 56 en una barra de 80 quedan 12px de margen arriba y
   abajo, que es el aire justo para que respire sin tocar los bordes.

   La altura de la barra sube con él (--topbar-height, en tokens.css): si
   se subiera solo el logo, tocaría el filete inferior. */
.topbar-logo img.topbar-logo-mark { display: none; }
.topbar-logo img.topbar-logo-text { height: 56px; }
@media (max-width: 768px) {
  .topbar-logo img.topbar-logo-text { height: 44px; }
}
@media (max-width: 380px) {
  .topbar-logo img.topbar-logo-text { height: 38px; }
}

/* MÓVILES ESTRECHOS (320-380px).
   La barra no cabía: logo 196px + hueco 32 + acciones 121 + 48 de
   relleno = más de lo que hay. Y como es `position: fixed`, no producía
   una barra con scroll: empujaba el documento entero a 339px de ancho y
   TODAS las páginas quedaban con desplazamiento lateral, también las que
   por dentro estaban bien.
   Se recorta el logotipo y se aprieta el relleno; el isotipo se queda,
   que es lo que identifica la marca de un vistazo. */
@media (max-width: 380px) {
  .topbar .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    gap: var(--space-3);
  }
  .topbar-logo { gap: 6px; }
  /* 38px, dimensionado para el logo definitivo. El 18px de antes estaba
     calculado para el provisional, que era solo texto y por tanto mucho
     más ancho a igual altura. Comprobado que a 38 la barra sigue cabiendo
     en 320px: 99 de logo + 88 de acciones + huecos. */
  .topbar-logo img.topbar-logo-text { height: 38px; }
  .topbar-actions { gap: var(--space-2); }
}

/* EL LOGOTIPO DEL PIE FUE LA CAUSA REAL del desplazamiento lateral a
   320px con el logo provisional, y costó verlo porque el síntoma salía
   en otro sitio: el `<main>` medía 320 correctos, pero el pie desbordaba
   19px por dentro, eso estiraba el documento a 339, y la barra superior
   —que es fija y width:100%— se estiraba con él. Parecía la barra.
   Un `max-width: 100%` no bastaba: al ser un elemento flex, ese 100% se
   mide contra toda la caja del bloque, no contra el hueco libre.

   Con el logo definitivo el isotipo también sobra aquí (va dentro del
   logotipo), y la proporción 2,6:1 hace que a 68px de alto ocupe 177px:
   entra de sobra hasta en 320px, donde la columna del pie deja 272px.

   68 y no 44 por petición del cliente. Es el cierre de la página y el pie
   es lo único que lleva la marca a tamaño grande; a 44 quedaba por debajo
   del logo de la barra (56) y no se entendía. Si se vuelve a subir, hay
   que MEDIR a 320px: este logotipo ya fue una vez la causa real del
   desplazamiento lateral de todas las páginas. */
.footer-logo-word { max-width: 100%; }
.footer-brand-logo { min-width: 0; flex-wrap: wrap; }
.footer-brand-logo .footer-logo-word { height: 68px; }

.topbar-nav {
  display: none;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 1024px) {
  .topbar-nav { display: flex; }

}
/* Navegación en caja normal, tamaño de texto y color gris. Antes iba en
   monoespaciada, mayúsculas y tracking de rótulo: además de gritar,
   los ocho enlaces sumaban 838px y empujaban el botón de presupuesto
   fuera de la pantalla a 1280 y 1440. */
.topbar-nav a,
.topbar-nav .nav-dropdown-trigger {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-muted);
  position: relative;
  padding: 6px 2px;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

/* Al pasar por encima solo se oscurece el texto. La página actual se
   marca en negro y con una línea fina debajo — sin colores. */
.topbar-nav a:hover,
.topbar-nav .nav-dropdown-trigger:hover { color: var(--fg-primary); }
.topbar-nav a.is-active { color: var(--fg-primary); font-weight: 500; }
.topbar-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--fg-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.topbar-nav a.is-active::after { transform: scaleX(1); }

.topbar-nav .nav-dropdown.is-active .nav-dropdown-trigger {
  color: var(--fg-primary);
  font-weight: 500;
}
.topbar-nav .nav-dropdown.is-active .nav-dropdown-trigger::before {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -9px;
  height: 1px;
  background: var(--fg-primary);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* === Language switcher (flags dropdown) === */
.lang-switcher {
  position: relative;
  display: inline-block;
}

.lang-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 6px;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.lang-switcher-trigger:hover {
  border-color: var(--fg-primary);
  background: var(--bg-soft);
}
.lang-switcher-trigger .lang-flag {
  width: 24px;
  height: 16px;
  border-radius: 2px;
  overflow: hidden;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.lang-switcher-trigger .lang-chevron {
  width: 12px;
  height: 12px;
  color: var(--fg-primary);
  transition: transform var(--transition-fast);
  margin-left: 4px;
  display: inline-block;
  flex-shrink: 0;
}
.lang-switcher-trigger:hover .lang-chevron {
  color: var(--brand-blue);
  opacity: 1;
}
.lang-switcher-trigger[aria-expanded="true"] .lang-chevron {
  transform: rotate(180deg);
}

.lang-switcher-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  padding: 6px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 46px rgba(10, 10, 10, 0.16), 0 4px 12px rgba(10, 10, 10, 0.06);
  list-style: none;
  z-index: 60;
  margin: 0;
}

.lang-from { opacity: 0; transform: translateY(-6px) scale(0.98); }
.lang-to   { opacity: 1; transform: translateY(0) scale(1); }

.lang-switcher-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 2px;
  text-decoration: none;
  color: var(--fg-primary);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--transition-fast);
}
.lang-switcher-item:hover {
  background: var(--bg-soft);
}
.lang-switcher-item .lang-flag {
  width: 24px;
  height: 16px;
  border-radius: 2px;
  overflow: hidden;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.lang-switcher-item .lang-flag svg { width: 100%; height: 100%; display: block; }
.lang-switcher-item.is-active {
  background: var(--bg-soft);
  font-weight: 600;
}
.lang-switcher-item.is-active::after {
  content: '✓';
  margin-left: auto;
  color: var(--brand-blue);
  font-weight: 700;
}
.lang-switcher-item.is-disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
}
.lang-switcher-item .lang-soon {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  background: var(--bg-soft);
  padding: 3px 8px;
  border-radius: 2px;
  font-weight: 600;
}

/* Versión drawer (mobile): 4 pills horizontales sin dropdown */
.lang-switcher-drawer {
  display: flex;
  gap: 8px;
  align-items: center;
}
.lang-switcher-drawer .lang-pill {
  width: 38px;
  height: 26px;
  border-radius: 2px;
  overflow: hidden;
  border: 2px solid var(--border);
  display: inline-block;
  flex-shrink: 0;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.lang-switcher-drawer .lang-pill:hover { transform: translateY(-2px); }
.lang-switcher-drawer .lang-pill.is-active {
  border-color: var(--brand-blue);
}
.lang-switcher-drawer .lang-pill.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.lang-switcher-drawer .lang-flag {
  display: block;
  width: 100%;
  height: 100%;
}
.lang-switcher-drawer .lang-flag svg { width: 100%; height: 100%; display: block; }

.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 2px;
  color: var(--fg-primary);
}
@media (min-width: 1024px) {
  .hamburger { display: none; }

}
.hamburger svg { width: 24px; height: 24px; }

/* Spacer debajo del topbar fijo (para que el contenido no quede tapado donde haga falta) */
.topbar-spacer { height: var(--topbar-height); }

/* ============================================================
   NAV DROPDOWN (desktop) — botón "Modelos" del topbar
   ============================================================ */

.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown-trigger {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--fg-primary);
  background: none;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  position: relative;
  transition: color var(--transition-fast);
}
.nav-dropdown-trigger::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--brand-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
/* Hover dropdown: sólo texto magenta (sin barra). La barra aparece sólo
   cuando el usuario YA está en una página de esa sección (.is-active),
   gestionado por la regla .nav-dropdown.is-active de más abajo. */
.nav-dropdown-trigger:hover { color: var(--brand-blue); }

.nav-dropdown-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  margin-top: 1px;
  transition: transform var(--transition-base);
}
.nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  /* Base transform asegura el centrado desde el primer frame, antes de que
     Alpine aplique las clases de transición (evita el salto horizontal). */
  transform: translateX(-50%);
  min-width: 520px;
  padding: var(--space-4);
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 28px 72px rgba(10, 10, 10, 0.18), 0 6px 16px rgba(10, 10, 10, 0.08);
  list-style: none;
  z-index: 1;
  margin: 0;
}

/* Sin banda decorativa. Era una rampa con los cuatro colores de nivel,
   pero al unificarse la paleta quedó un plano azul de 3px que no
   informaba de nada; y el pico del desplegable la atravesaba con un
   rombo blanco, partiéndola en dos. El borde de la caja separa de sobra. */
.nav-dropdown-menu::before { content: none; }

/* Sin pico. Era un cuadrado girado 45° —lenguaje low-poly heredado— y
   además se colocaba encima de la banda superior, dejando un rombo
   blanco que la cortaba por la mitad. El desplegable ya se entiende por
   posición. */
.nav-dropdown-menu::after { content: none; }

/* Alpine transitions del dropdown */
.dropdown-anim { transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.dropdown-from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.98); }
.dropdown-to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 14px 16px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--fg-primary);
  transition: background var(--transition-fast), transform var(--transition-fast);
  position: relative;
  border: 1px solid transparent;
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible {
  outline: none;
  transform: translateX(3px);
}
.nav-dropdown-item.is-ruta:hover,
.nav-dropdown-item.is-ruta:focus-visible {
  background: color-mix(in srgb, var(--prep-ruta) 8%, transparent);
  border-color: color-mix(in srgb, var(--prep-ruta) 22%, transparent);
}
.nav-dropdown-item.is-travesia:hover,
.nav-dropdown-item.is-travesia:focus-visible {
  background: color-mix(in srgb, var(--prep-travesia) 10%, transparent);
  border-color: color-mix(in srgb, var(--prep-travesia) 26%, transparent);
}
.nav-dropdown-item.is-raid:hover,
.nav-dropdown-item.is-raid:focus-visible {
  background: color-mix(in srgb, var(--prep-raid) 12%, transparent);
  border-color: color-mix(in srgb, var(--prep-raid) 28%, transparent);
}
.nav-dropdown-item.is-uso-diario:hover,
.nav-dropdown-item.is-uso-diario:focus-visible {
  background: color-mix(in srgb, var(--prep-uso-diario) 10%, transparent);
  border-color: color-mix(in srgb, var(--prep-uso-diario) 26%, transparent);
}

.nav-dropdown-item-accent { display: none; }

.nav-dropdown-item.is-ruta { --accent-color: var(--prep-ruta);        --accent-fg: var(--prep-ruta-fg); }
.nav-dropdown-item.is-travesia { --accent-color: var(--prep-travesia);        --accent-fg: var(--prep-travesia-fg); }
.nav-dropdown-item.is-raid { --accent-color: var(--prep-raid);        --accent-fg: var(--prep-raid-fg); }
.nav-dropdown-item.is-uso-diario { --accent-color: var(--prep-uso-diario);        --accent-fg: var(--prep-uso-diario-fg); }

.nav-dropdown-item-code {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color, var(--bg-soft));
  color: var(--accent-fg, var(--fg-muted));
  border-radius: 2px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color, transparent) 30%, transparent);
  transition: transform var(--transition-fast);
}
.nav-dropdown-item:hover .nav-dropdown-item-code {
  transform: scale(1.05) rotate(-3deg);
}

.nav-dropdown-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.nav-dropdown-item-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.nav-dropdown-item-subtitle {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--fg-muted);
  line-height: 1.3;
}

.nav-dropdown-item::after {
  content: '→';
  margin-left: auto;
  color: var(--fg-subtle);
  font-size: 20px;
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}
.nav-dropdown-item:hover::after,
.nav-dropdown-item:focus-visible::after {
  opacity: 1;
  transform: translateX(4px);
  color: var(--accent-color, var(--fg-primary));
}

.nav-dropdown-separator {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-3) 8px;
  list-style: none;
}

.nav-dropdown-item.is-guide {
  padding: 12px 16px;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--bg-soft);
}
.nav-dropdown-item.is-guide .nav-dropdown-item-name {
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  color: var(--fg-muted);
  text-align: center;
}
.nav-dropdown-item.is-guide:hover {
  background: color-mix(in srgb, var(--brand-blue) 8%, var(--bg-soft));
  border-color: color-mix(in srgb, var(--brand-blue) 20%, transparent);
}
.nav-dropdown-item.is-guide:hover .nav-dropdown-item-name,
.nav-dropdown-item.is-guide:focus-visible .nav-dropdown-item-name {
  color: var(--brand-blue);
}
.nav-dropdown-item.is-guide::after { display: none; }

/* ============================================================
   NAV DROPDOWN — variante Modelos (mega-menu)
   Sale a la altura del de Sectores: badge cuadrado coloreado con
   el código del modelo a la izquierda + name/subtitle + flecha.
   ============================================================ */

.prep-mega-menu {
  min-width: 460px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prep-mega-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: 10px;
  border-radius: 2px;
  text-decoration: none;
  color: var(--fg-primary);
  position: relative;
  overflow: hidden;
  transition: background var(--transition-fast), transform var(--transition-fast);
  isolation: isolate;
}

/* Variables por modelo */
.prep-mega-item.is-ruta { --accent-color: var(--prep-ruta); --accent-fg: var(--prep-ruta-fg); --accent-strong: var(--prep-ruta-strong); }
.prep-mega-item.is-travesia { --accent-color: var(--prep-travesia); --accent-fg: var(--prep-travesia-fg); --accent-strong: var(--prep-travesia-strong); }
.prep-mega-item.is-raid { --accent-color: var(--prep-raid); --accent-fg: var(--prep-raid-fg); --accent-strong: var(--prep-raid-strong); }
.prep-mega-item.is-uso-diario { --accent-color: var(--prep-uso-diario); --accent-fg: var(--prep-uso-diario-fg); --accent-strong: var(--prep-uso-diario-strong); }

/* Badge cuadrado con el código del modelo (sustituye a la foto del sec-mega) */
.prep-mega-item-code {
  width: 64px;
  height: 64px;
  border-radius: 2px;
  background: var(--accent-color, var(--brand-blue));
  color: var(--accent-fg, #fff);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow var(--transition-fast);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color) 28%, transparent);
}
/* Sombrita angular para dar profundidad al badge (low-poly feel) */
.prep-mega-item-code::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 55%, rgba(255, 255, 255, 0.18) 100%);
  pointer-events: none;
}

.prep-mega-item-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.prep-mega-item-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  transition: color var(--transition-fast);
}
.prep-mega-item-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--fg-muted);
  line-height: 1.3;
}

.prep-mega-item-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--fg-subtle);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.prep-mega-item-arrow svg { width: 14px; height: 14px; }

/* Barra vertical de acento a la izquierda al hover */
.prep-mega-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 0;
  background: var(--accent-color, var(--brand-blue));
  border-radius: 2px;
  transition: height 0.3s ease;
  z-index: 2;
}

.prep-mega-item:hover,
.prep-mega-item:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
}
.prep-mega-item:hover::before,
.prep-mega-item:focus-visible::before {
  height: 60%;
}
.prep-mega-item:hover .prep-mega-item-code,
.prep-mega-item:focus-visible .prep-mega-item-code {
  transform: scale(1.06) rotate(-1.5deg);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent-color) 45%, transparent);
}
.prep-mega-item:hover .prep-mega-item-name,
.prep-mega-item:focus-visible .prep-mega-item-name {
  color: var(--accent-strong, var(--accent-color));
}
.prep-mega-item:hover .prep-mega-item-arrow,
.prep-mega-item:focus-visible .prep-mega-item-arrow {
  opacity: 1;
  transform: translateX(0);
  background: var(--accent-color);
  color: var(--accent-fg, #fff);
}

/* Separador entre modelos y el link guía */
.prep-mega-separator {
  height: 1px;
  background: var(--border-subtle);
  margin: 8px 12px;
  list-style: none;
}

/* "¿No sabes cuál elegir?" — link guía al final */
.prep-mega-guide {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 14px;
  border-radius: 2px;
  text-decoration: none;
  color: var(--fg-muted);
  font-family: var(--font-sans);
  font-size: 14px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.prep-mega-guide-icon {
  width: 28px;
  height: 28px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--brand-blue) 12%, transparent);
  color: var(--brand-blue);
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.prep-mega-guide-icon svg { width: 16px; height: 16px; }
.prep-mega-guide:hover,
.prep-mega-guide:focus-visible {
  outline: none;
  background: var(--bg-soft);
  color: var(--fg-primary);
}
.prep-mega-guide:hover .prep-mega-guide-icon,
.prep-mega-guide:focus-visible .prep-mega-guide-icon {
  background: var(--brand-blue);
  color: #fff;
}

@media (max-width: 720px) {
  .prep-mega-menu { min-width: 320px; }
  .prep-mega-item { grid-template-columns: 52px 1fr auto; }
  .prep-mega-item-code { width: 52px; height: 52px; font-size: 20px; border-radius: 2px; }
  .prep-mega-item-name { font-size: 16px; }
  .prep-mega-item-sub { font-size: 12px; }

}

/* ============================================================
   DRAWER (mobile)
   ============================================================ */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.5);
  z-index: var(--z-overlay);
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: 80%;
  max-width: 380px;
  background: var(--bg-primary);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-5) var(--space-5);
  gap: var(--space-4);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.drawer-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 44px;
  height: 44px;
  font-size: 28px;
  color: var(--fg-primary);
  line-height: 1;
  z-index: 2;
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-right: 44px;
  padding-top: 4px;
}
.drawer-nav > a,
.drawer-nav-toggle {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--fg-primary);
  letter-spacing: -0.015em;
  text-decoration: none;
}

/* Accordion del drawer mobile (item "Modelos") */
.drawer-nav-group {
  display: flex;
  flex-direction: column;
}
.drawer-nav-toggle {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
}
.drawer-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--transition-base);
  color: var(--fg-muted);
}
.drawer-chevron.is-expanded { transform: rotate(180deg); }

.drawer-nav-submenu-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms var(--ease);
}
.drawer-nav-submenu-wrapper.is-expanded {
  grid-template-rows: 1fr;
}
.drawer-nav-submenu {
  overflow: hidden;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  min-height: 0;
  /* El borde y el padding sólo aparecen cuando el submenú está expandido.
     Si los mantuviéramos siempre, se ve una barrita vertical fantasma
     bajo el toggle aun colapsado. */
}
.drawer-nav-submenu-wrapper.is-expanded .drawer-nav-submenu {
  padding: var(--space-3) 0 var(--space-2) var(--space-3);
  margin-left: var(--space-2);
  border-left: 2px solid var(--border-subtle);
}
.drawer-nav-submenu li { display: block; }
.drawer-nav-submenu li.is-ruta { --accent-color: var(--prep-ruta); }
.drawer-nav-submenu li.is-travesia { --accent-color: var(--prep-travesia-strong); }
.drawer-nav-submenu li.is-raid { --accent-color: var(--prep-raid-strong); }
.drawer-nav-submenu li.is-uso-diario { --accent-color: var(--prep-uso-diario); }

.drawer-nav-submenu a {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--fg-primary);
  text-decoration: none;
  padding: 4px 0;
}
.drawer-submenu-accent {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--accent-color);
}
.drawer-submenu-code {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  font-weight: 600;
  min-width: 24px;
}
.drawer-nav-submenu .drawer-nav-separator {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-2) 0;
  list-style: none;
}
.drawer-nav-submenu li.is-guide a {
  font-style: italic;
  color: var(--fg-muted);
}

.drawer-cta {
  margin-top: var(--space-4);
}

.drawer-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: 14px;
  color: var(--fg-muted);
}

/* Alpine transitions del drawer */
.drawer-anim    { transition: transform 280ms var(--ease); }
.drawer-closed  { transform: translateX(100%); }
.drawer-opened  { transform: translateX(0); }

/* El sistema de polígonos flotantes se retiró con el rediseño: ya no hay
   ni JS que los genere ni contenedores en el marcado.

   De aquel montaje solo sobrevive lo que resultó ser estructural y no
   decorativo: `overflow-x: clip` en <main> —que es lo que evita el scroll
   horizontal cuando un bloque se sale por la derecha, y del que depende
   js/form-state.js para calcular posiciones— y el contexto de apilado de
   sus hijos directos. Antes colgaban del selector :has(> .page-polygons);
   ahora van directos a <main>, así que también alcanzan a la home, que
   nunca llegó a tener ese contenedor. */
main {
  position: relative;
  overflow-x: clip;
}
main > * {
  position: relative;
  z-index: 1;
}

/* Sectores — body completo (entre hero ya transparente y otros-sectores
   que es dark). */
main.sec-page > .sec-intro,
main.sec-page > .sec-aplic-section,
main.sec-page > .sec-modelo,
main.sec-page > .sec-cta {
  background: transparent;
}

/* Como trabajamos — Tu diseño y CTA */
main.cmo-page > .cmo-formats,
main.cmo-page > .cmo-cta {
  background: transparent;
}

/* Empresa — sección "Filosofía" */
main.empresa-page > .empresa-pillars {
  background: transparent;
}

/* Contacto — sección "Visítanos / Donde fabricamos" */
main.contacto-page > .contacto-mapa {
  background: transparent;
}

/* Cual elegir — todas las secciones excepto la CTA oscura final, para que
   los polígonos multicolor se vean a lo largo de toda la página. */
main.cual-elegir-page > .cual-elegir-escenarios,
main.cual-elegir-page > .cual-elegir-comparativa,
main.cual-elegir-page > .cual-elegir-glosario {
  background: transparent;
}

@keyframes scroll-x {
  to { transform: translateX(-50%); }
}

/* ============================================================
   CÓMO TRABAJAMOS
   ============================================================ */

.como-trabajamos {
  padding: var(--space-16) 0;
  position: relative;
}

.como-trabajamos-header {
  max-width: 720px;
  margin: 0 auto var(--space-12);
  text-align: center;
}

.pasos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  position: relative;
}
/* CINCO columnas, no cuatro.
   La portada contaba el proceso en 4 pasos y /como-trabajamos.html en 5:
   el mismo proceso explicado de dos maneras. El que faltaba en la portada
   era la APROBACIÓN —"repasas componentes, plazo y precio; solo cuando
   estás conforme pedimos material"—, justo el paso que responde al miedo
   de que te toquen el coche sin tu visto bueno. Ahora los dos sitios leen
   los mismos textos (`como.process.s1..s5`), así que no se pueden volver
   a separar.
   A 769px cinco columnas quedan estrechas, así que hasta 1100px van en
   dos filas —3 + 2— y solo a partir de ahí en fila única. */
@media (min-width: 769px) {
  .pasos-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}
@media (min-width: 1100px) {
  .pasos-grid { grid-template-columns: repeat(5, 1fr); }
}

.pasos-line {
  display: none;
}
@media (min-width: 769px) {
  .pasos-line {
    display: block;
    position: absolute;
    top: 60px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(to right,
      var(--brand-blue) 0%,
      var(--brand-blue-dark) 33%,
      var(--accent-amber) 66%,
      var(--brand-blue-light) 100%);
    z-index: 0;
    transform-origin: left center;
  }

}

.paso {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.paso-num {
  font-family: var(--font-display);
  font-size: clamp(80px, 10vw, 140px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-4);
}
.paso-1 .paso-num { color: var(--brand-blue); }
.paso-2 .paso-num { color: var(--brand-blue-dark); }
.paso-3 .paso-num { color: var(--accent-amber); }
.paso-4 .paso-num { color: var(--brand-blue-light); }

.paso-icon {
  width: 28px;
  height: 28px;
  margin-bottom: var(--space-3);
  color: var(--fg-primary);
  stroke-width: 1.5;
}

.paso-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: var(--space-2);
  letter-spacing: -0.015em;
}

.paso-desc {
  font-size: 15px;
  color: var(--fg-muted);
  line-height: 1.6;
}

/* ============================================================
   PROYECTOS DESTACADOS
   ============================================================ */

.proyectos-destacados {
  background: var(--bg-primary);
  padding: var(--space-16) 0;
}

.proyectos-header {
  margin-bottom: var(--space-8);
  text-align: center;
}

.proyectos-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.proyectos-filters button {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 14px;
  color: var(--fg-muted);
  border-radius: 2px;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.proyectos-filters button:hover { color: var(--fg-primary); }
.proyectos-filters button.is-active {
  color: var(--brand-blue);
  background: rgba(29, 101, 174, 0.08);
}

.proyectos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 600px) {
  .proyectos-grid { grid-template-columns: 1fr 1fr; }

}
@media (min-width: 1024px) {
  .proyectos-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 260px;
    gap: var(--space-5);
  }
  /* Bento limpio en 6 cols × 3 rows: card 1 grande, cards 2-3 a su lado, fila inferior con 3 iguales */
  .proyecto-card-1 { grid-column: span 3; grid-row: span 2; }
  .proyecto-card-2 { grid-column: span 3; grid-row: span 1; }
  .proyecto-card-3 { grid-column: span 3; grid-row: span 1; }
  .proyecto-card-4 { grid-column: span 2; grid-row: span 1; }
  .proyecto-card-5 { grid-column: span 2; grid-row: span 1; }
  .proyecto-card-6 { grid-column: span 2; grid-row: span 1; }

}

.proyecto-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-soft);
  min-height: 240px;
  cursor: pointer;
  display: block;
}

.proyecto-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--transition-slow);
}
.proyecto-card:hover .proyecto-card-bg { transform: scale(1.04); }

.proyecto-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.85) 100%);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.proyecto-card:hover .proyecto-card-overlay { opacity: 1; }

.proyecto-card-content {
  position: absolute;
  inset: 0;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #FFFFFF;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.proyecto-card:hover .proyecto-card-content { opacity: 1; }

.proyecto-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}
.proyecto-card-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.proyectos-cta {
  text-align: center;
  margin-top: var(--space-8);
}

/* Lightbox */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.92);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.lightbox-content {
  position: relative;
  max-width: 1200px;
  width: 100%;
  max-height: 90dvh;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.lightbox-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: #FFFFFF;
  width: 44px;
  height: 44px;
  font-size: 28px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ============================================================
   CALIDAD Y FABRICACIÓN
   ============================================================ */

.calidad-fabricacion {
  background: var(--bg-soft);
  padding: var(--space-16) 0;
}

.calidad-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 1024px) {
  .calidad-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }

}

.calidad-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
}

.calidad-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.calidad-bullet {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.calidad-bullet svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--brand-navy);
  margin-top: 2px;
  stroke-width: 1.75;
}
.calidad-bullet-text {
  font-size: 16px;
  line-height: 1.55;
}

.calidad-image-wrapper {
  position: relative;
}
.calidad-image {
  aspect-ratio: 4 / 3;
  background: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.calidad-stat {
  position: absolute;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-lg);
}
.calidad-stat-number {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  line-height: 1;
  margin-bottom: 4px;
}
.calidad-stat-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: var(--fg-muted);
}
.calidad-stat-1 { top: var(--space-5); right: -16px; }
.calidad-stat-2 { bottom: var(--space-5); left: -16px; }

@media (max-width: 480px) {
  .calidad-stat-1 { right: var(--space-3); }
  .calidad-stat-2 { left: var(--space-3); }

}

/* ============================================================
   CTA FINAL
   ============================================================ */

/* Cierre de página.
   Un bloque oscuro al final, que es la única pieza oscura de la web
   junto al pie. Sin trama de fondo, sin cinta de señalización y sin
   filete de color: solo el titular, una frase y un botón. */
.cta-final {
  position: relative;
  background: var(--bg-dark);
  color: var(--fg-on-dark);
  min-height: 0;
  display: block;
  padding: clamp(72px, 10vw, 128px) 0;
  overflow: hidden;
}

.cta-final > .container {
  position: relative;
  z-index: 1;
  text-align: left;
  max-width: 780px;
  border-left: 0;
  padding-left: var(--space-8);
}

.cta-final-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.024em;
  text-transform: none;
  color: var(--fg-on-dark);
  margin-bottom: var(--space-5);
  max-width: 20ch;
}

.cta-final-subtitle {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.65;
  color: var(--fg-on-dark-muted);
  margin-bottom: var(--space-7);
  max-width: 56ch;
}

.cta-final-foot {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-sans);
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-on-dark-muted);
}

/* El botón de cierre va en blanco sobre el fondo oscuro. */
.cta-final .btn-white,
.cta-final .btn-primary {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--fg-primary);
}
.cta-final .btn-white:hover,
.cta-final .btn-primary:hover {
  background: var(--bg-muted);
  border-color: var(--bg-muted);
}

@media (max-width: 768px) {
  .cta-final > .container { padding-left: var(--space-5); }

}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: var(--bg-dark);
  color: rgba(255, 255, 255, 0.85);
  position: relative;
}

.footer-stripes {
  display: flex;
  height: 8px;
  width: 100%;
}
/* Rampa de intensidad del azul con un remate ámbar, en lugar de las
   cinco bandas de colores distintos de la marca anterior. */
.footer-stripes span { flex: 1; display: block; }
.footer-stripes span:nth-child(1) { background: var(--brand-navy); }
.footer-stripes span:nth-child(2) { background: var(--brand-blue-dark); }
.footer-stripes span:nth-child(3) { background: var(--brand-blue); }
.footer-stripes span:nth-child(4) { background: var(--brand-blue-light); }
.footer-stripes span:nth-child(5) { background: var(--accent-amber); }

.footer-main {
  padding: var(--space-12) 0 var(--space-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
/* En móvil el pie medía 1.237px —pantalla y media— en TODAS las páginas:
   una sola columna con el bloque de marca y las tres listas apiladas, y
   cada enlace con sus 44px de alto táctil, que son necesarios. La altura
   no se arregla encogiendo los enlaces, se arregla poniendo las listas a
   dos columnas: los rótulos son cortos ("Ruta", "Travesía") y entran de
   sobra en media pantalla. El bloque de marca y el de contacto ocupan el
   ancho entero, porque el claim y el email sí son largos. */
@media (min-width: 380px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-col-brand { grid-column: 1 / -1; }
}

@media (min-width: 600px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-col-brand { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .footer-main {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: var(--space-10);
    align-items: start;
  }
  /* HAY QUE DESHACER EL `grid-column` DE LA REGLA DE 600px.
     Las media queries se acumulan: aquí la rejilla pasa a cuatro
     columnas, pero el bloque de marca seguía con `1 / -1` de la regla
     anterior, así que ocupaba las cuatro y empujaba las tres listas a
     una segunda fila. El pie se veía con el logo y el texto arriba,
     solos, y las columnas debajo. Con `auto` vuelve a su columna y las
     cuatro quedan en la misma línea. */
  .footer-col-brand { grid-column: auto; }
}

.footer-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #FFFFFF;
  margin-bottom: var(--space-5);
}
.footer-brand-logo .footer-logo-word {
  display: block;
  width: auto;
  flex-shrink: 0;
}
/* El isotipo del pie se oculta AQUÍ y no arriba: la regla de arriba
   (.footer-logo-mark) tiene menos especificidad que este selector de dos
   clases, así que perdía y el display:block seguía ganando. La rueda
   salía dos veces, porque el logotipo definitivo ya la lleva dentro. */
.footer-brand-logo .footer-logo-mark { display: none; }
/* Camaleón tiene mucho padding interno en su viewBox; lo compensamos con
   un margin negativo para que el shape "visible" cuadre con la altura
   del wordmark. */
/* El isotipo del pie se oculta arriba: el logotipo definitivo ya lleva
   la rueda dentro. Esta regla de altura se queda por si alguna vez se
   vuelve a mostrar, pero no la fija nadie hoy. */
.footer-brand-logo .footer-logo-mark {
  height: 72px;
  margin: -8px -10px;
}
/* OJO: esta es la SEGUNDA regla que fija la altura del logotipo del pie, y
   gana ella por venir después. La otra está arriba, junto al comentario del
   desplazamiento lateral a 320px. Si se cambia una sola, no pasa nada
   visible y el cambio parece no haber funcionado. Las dos a 68px. */
.footer-brand-logo .footer-logo-word { height: 68px; }
.footer-brand-claim {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  max-width: 32ch;
  margin-bottom: var(--space-5);
}

.footer-social {
  display: flex;
  gap: var(--space-3);
}
.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.footer-social a:hover {
  background: var(--brand-blue);
  color: #FFFFFF;
}
.footer-social svg { width: 18px; height: 18px; }

.footer-col-title {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--space-4);
}

.footer-col-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-col-list a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--transition-fast);
}
.footer-col-list a:hover { color: #FFFFFF; }

/* En táctil los enlaces del pie median 17px de alto —el alto de la línea
   de texto y nada más—, apilados con 12px de separación. Son diecisiete
   por página y es el menú que más se usa desde el móvil. Se les da altura
   de dedo; el `gap` baja porque ahora lo pone el propio enlace. */
@media (hover: none) {
  .footer-col-list { gap: 0; }
  .footer-col-list a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-legal-links { gap: var(--space-2) var(--space-5); }
  .footer-legal-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

.footer-fiscal {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.65;
}

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
@media (min-width: 769px) {
  .footer-legal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-legal-links a {
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--transition-fast);
}
.footer-legal-links a:hover { color: #FFFFFF; }


/* ============================================================
   FICHA MODELO (modelos/{slug}.html) — v2 refactor
   ============================================================ */

main.ficha-page {
  --current-model-color: var(--prep-ruta);
  --current-model-color-strong: var(--prep-ruta-strong);
  --current-model-fg: var(--prep-ruta-fg);
  position: relative;
  overflow-x: hidden;
  background: var(--bg-primary);
}

main.ficha-page > section { position: relative; z-index: 1; }
main.ficha-page.is-ruta {
  --current-model-color: var(--prep-ruta);
  --current-model-color-strong: var(--prep-ruta-strong);
  --current-model-fg: var(--prep-ruta-fg);
}
main.ficha-page.is-travesia {
  --current-model-color: var(--prep-travesia);
  --current-model-color-strong: var(--prep-travesia-strong);
  --current-model-fg: var(--prep-travesia-fg);
}
main.ficha-page.is-raid {
  --current-model-color: var(--prep-raid);
  --current-model-color-strong: var(--prep-raid-strong);
  --current-model-fg: var(--prep-raid-fg);
}
main.ficha-page.is-uso-diario {
  --current-model-color: var(--prep-uso-diario);
  --current-model-color-strong: var(--prep-uso-diario-strong);
  --current-model-fg: var(--prep-uso-diario-fg);
}

/* ----- HERO ----- */
.ficha-hero {
  background: transparent;
  padding: calc(var(--topbar-height, 72px) + var(--space-8)) 0 var(--space-16);
}
@media (max-width: 768px) {
  .ficha-hero {
    padding: calc(var(--topbar-height, 64px) + var(--space-6)) 0 var(--space-10);
  }

}
.ficha-hero-breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--space-10);
}
.ficha-hero-breadcrumb a {
  color: var(--fg-muted);
  transition: color var(--transition-fast);
}
.ficha-hero-breadcrumb a:hover { color: var(--fg-primary); }
.ficha-hero-breadcrumb .sep {
  margin: 0 var(--space-2);
  color: var(--fg-subtle);
}
.ficha-hero-breadcrumb .current {
  color: var(--current-model-color-strong);
  font-weight: 600;
}
.ficha-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}
@media (min-width: 1024px) {
  .ficha-hero-grid { grid-template-columns: 1.4fr 1fr; gap: var(--space-10); }

}
.ficha-hero-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--current-model-color-strong);
  margin-bottom: var(--space-3);
}
.ficha-hero-title {
  font-family: var(--font-sans);
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  margin-bottom: var(--space-5);
}
.ficha-hero-tagline {
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--fg-muted);
  line-height: 1.45;
  margin-bottom: var(--space-5);
  max-width: 50ch;
}
.ficha-hero-desc {
  font-size: 16px;
  color: var(--fg-primary);
  line-height: 1.7;
  margin-bottom: var(--space-8);
  max-width: 56ch;
}
.ficha-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.ficha-hero-ctas .btn-model {
  background: var(--current-model-color);
  color: var(--current-model-fg);
  border: 2px solid var(--current-model-color);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.ficha-hero-ctas .btn-model:hover {
  background: var(--current-model-color-strong);
  border-color: var(--current-model-color-strong);
  color: #FFFFFF;
}
.ficha-hero-ctas .btn-outline {
  background: var(--bg-primary);
  color: var(--fg-primary);
  border: 2px solid var(--border);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.ficha-hero-ctas .btn-outline:hover {
  border-color: var(--current-model-color-strong);
  color: var(--current-model-color-strong);
}
.ficha-hero-image {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--bg-soft);
}
@media (min-width: 1024px) {
  /* La imagen se escala visualmente sin afectar al texto/CTAs de la izquierda.
     transform-origin: left center mantiene el borde izquierdo pegado al texto
     y permite que la imagen se extienda hacia la derecha (main tiene
     overflow-x: hidden, así que no aparece scroll). */
  .ficha-hero-image {
    transform: scale(1.18);
    transform-origin: left center;
  }

}
.ficha-hero-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ----- SPECS (tabla 2 columnas) ----- */
.ficha-specs {
  background: transparent;
  padding: var(--space-16) 0;
  border-top: 1px solid var(--border-subtle);
}
.ficha-specs-title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  margin-bottom: var(--space-10);
  text-align: center;
  letter-spacing: -0.01em;
}
.ficha-specs-table {
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1080px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .ficha-specs-table {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-12);
    padding: var(--space-8) var(--space-10);
  }

}
.ficha-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.ficha-spec-row:last-child { border-bottom: none; }
@media (min-width: 768px) {
  .ficha-spec-row:nth-last-child(2):nth-child(odd) { border-bottom: none; }

}
.ficha-spec-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  flex-shrink: 0;
  font-weight: 500;
}
.ficha-spec-value {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--fg-primary);
  text-align: right;
  line-height: 1.3;
}

/* ----- MEDIDAS ----- */
.ficha-medidas {
  background: transparent;
  padding: var(--space-16) 0;
}
.ficha-medidas-title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  margin-bottom: var(--space-4);
  text-align: center;
  letter-spacing: -0.01em;
}
.ficha-medidas-intro {
  text-align: center;
  font-size: 17px;
  color: var(--fg-muted);
  max-width: 60ch;
  margin: 0 auto var(--space-10);
  line-height: 1.6;
}
.ficha-medidas-tabla {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  border-collapse: collapse;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ficha-medidas-tabla tr { border-bottom: 1px solid var(--border-subtle); }
.ficha-medidas-tabla tr:last-child { border-bottom: none; }
.ficha-medidas-tabla th,
.ficha-medidas-tabla td {
  padding: var(--space-5) var(--space-7);
  text-align: left;
  font-size: 16px;
}
.ficha-medidas-tabla th {
  font-weight: 500;
  color: var(--fg-muted);
  width: 55%;
  font-size: 15px;
}
.ficha-medidas-tabla td {
  font-weight: 600;
  font-size: 18px;
  color: var(--fg-primary);
}

/* ----- COMPARATIVA ----- */
.ficha-comparativa {
  background: transparent;
  padding: var(--space-16) 0;
}
.ficha-comparativa-title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  margin-bottom: var(--space-3);
  text-align: center;
  letter-spacing: -0.01em;
}
.ficha-comparativa-intro {
  text-align: center;
  font-size: 16px;
  color: var(--fg-muted);
  max-width: 60ch;
  margin: 0 auto var(--space-8);
  line-height: 1.6;
}
.ficha-comparativa-wrapper {
  overflow-x: auto;
  max-width: 1100px;
  margin: 0 auto;
}

/* La tabla mide 720px como mínimo. En un móvil de 375 eso deja 457px
   fuera —el 58% de la tabla— y no había ninguna pista de que se pudiera
   desplazar: parecía una tabla de tres columnas cortada. El velo del
   borde derecho avisa de que sigue, y desaparece al llegar al final. */
/* "NIVEL 01" se partía en dos líneas dentro de su celda, y la celda es
   la que ancla cada fila: leído en móvil parecía que había ocho niveles
   en vez de cuatro. */
.ficha-comparativa-tabla td:first-child,
.ficha-comparativa-tabla td:first-child a { white-space: nowrap; }

@media (max-width: 760px) {
  .ficha-comparativa-wrapper {
    position: relative;
    -webkit-overflow-scrolling: touch;
    /* El degradado se ancla al viewport del scroller, no al contenido. */
    background:
      linear-gradient(to left, var(--bg-primary), transparent) right center / 34px 100% no-repeat local,
      linear-gradient(to left, rgba(10,12,14,0.13), transparent) right center / 12px 100% no-repeat scroll;
  }
}
.ficha-comparativa-aviso {
  display: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--space-3);
}
@media (max-width: 760px) { .ficha-comparativa-aviso { display: block; } }
.ficha-comparativa-tabla {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-primary);
  font-size: 14px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.ficha-comparativa-tabla th,
.ficha-comparativa-tabla td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}
.ficha-comparativa-tabla thead th {
  background: var(--bg-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-primary);
  font-weight: 700;
}
.ficha-comparativa-tabla tbody tr:last-child td { border-bottom: none; }
.ficha-comparativa-tabla tbody tr.is-current td {
  background: color-mix(in srgb, var(--current-model-color) 8%, transparent);
  border-top: 2px solid var(--current-model-color-strong);
  border-bottom: 2px solid var(--current-model-color-strong);
  padding-top: calc(var(--space-4) - 2px);
  padding-bottom: calc(var(--space-4) - 2px);
}
.ficha-comparativa-tabla tbody tr.is-current td:first-child {
  border-left: 2px solid var(--current-model-color-strong);
  font-weight: 700;
  color: var(--current-model-color-strong);
}
.ficha-comparativa-tabla tbody tr.is-current td:last-child {
  border-right: 2px solid var(--current-model-color-strong);
}
.ficha-comparativa-tabla .badge-here {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--current-model-color-strong);
  color: #FFFFFF;
  padding: 3px 7px;
  border-radius: 2px;
  margin-left: var(--space-2);
  vertical-align: 2px;
  font-weight: 700;
}
.ficha-comparativa-tabla a {
  color: var(--fg-primary);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-fast);
}
.ficha-comparativa-tabla a:hover { text-decoration-color: var(--current-model-color-strong); }

/* ----- APLICACIONES (lista vertical con iconos) ----- */
.ficha-aplicaciones {
  background: transparent;
  padding: var(--space-16) 0;
}
.ficha-aplicaciones-title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  margin-bottom: var(--space-10);
  text-align: center;
  letter-spacing: -0.01em;
}
.ficha-aplicaciones-list {
  max-width: 720px;
  margin: 0 auto;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: 0 var(--space-8);
  box-shadow: var(--shadow-sm);
}
.ficha-aplicaciones-item {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.ficha-aplicaciones-item:last-child { border-bottom: none; }
.ficha-aplicaciones-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  color: var(--current-model-color-strong);
}
.ficha-aplicaciones-text {
  font-size: 17px;
  color: var(--fg-primary);
  line-height: 1.5;
  font-weight: 500;
}

/* ----- PROYECTOS (layout aprobado, sin cambios) ----- */
.ficha-proyectos {
  background: transparent;
  padding: var(--space-16) 0;
}
.ficha-proyectos-title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  margin-bottom: var(--space-10);
  text-align: center;
  letter-spacing: -0.01em;
}
.ficha-proyecto-single {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: stretch;
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 900px) {
  .ficha-proyecto-single { grid-template-columns: 1.4fr 1fr; gap: 0; }

}
.ficha-proyecto-single-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.ficha-proyecto-single-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ficha-proyecto-single-content {
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ficha-proyecto-single-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--current-model-color-strong);
  margin-bottom: var(--space-3);
  font-weight: 600;
}
.ficha-proyecto-single h3 {
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.ficha-proyecto-single .client {
  font-size: 15px;
  color: var(--fg-muted);
  margin-bottom: var(--space-4);
}
.ficha-proyecto-single .desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-primary);
}
.ficha-proyectos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}
.ficha-proyecto-card {
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ficha-proyecto-card .img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.ficha-proyecto-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}
.ficha-proyecto-card:hover img { transform: scale(1.04); }
.ficha-proyecto-card .body {
  padding: var(--space-5);
}
.ficha-proyecto-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--space-1);
}
.ficha-proyecto-card .client {
  font-size: 13px;
  color: var(--fg-muted);
}
.ficha-proyectos-cta {
  margin-top: var(--space-8);
  text-align: center;
}

/* ----- CTA FINAL con descarga PDF integrada ----- */
.ficha-cta-final {
  background: var(--current-model-color);
  color: var(--current-model-fg);
  padding: var(--space-12) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ficha-cta-final-title {
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 600;
  margin-bottom: var(--space-4);
  line-height: 1.1;
  letter-spacing: -0.015em;
  position: relative;
  z-index: 1;
}
.ficha-cta-final-subtitle {
  font-size: 18px;
  opacity: 0.85;
  max-width: 60ch;
  margin: 0 auto var(--space-8);
  line-height: 1.6;
  position: relative;
  z-index: 1;
}
.ficha-cta-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-8);
  position: relative;
  z-index: 1;
}
.ficha-cta-final-actions .btn-cta-primary {
  background: #FFFFFF;
  color: var(--current-model-color-strong);
  border: 2px solid #FFFFFF;
  padding: 14px 32px;
  font-weight: 700;
  border-radius: var(--radius-md);
  font-size: 15px;
  min-width: 180px;
  justify-content: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.ficha-cta-final-actions .btn-cta-primary:hover { transform: translateY(-2px); }
.ficha-cta-final-actions .btn-cta-primary:hover {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: #FFFFFF;
}
.ficha-cta-final-actions .btn-cta-secondary {
  background: transparent;
  color: inherit;
  border: 2px solid currentColor;
  padding: 14px 32px;
  font-weight: 600;
  border-radius: var(--radius-md);
  font-size: 15px;
  min-width: 180px;
  justify-content: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.ficha-cta-final-actions .btn-cta-secondary:hover { transform: translateY(-2px); }
main.ficha-page.is-ruta .ficha-cta-final-actions .btn-cta-secondary:hover,
main.ficha-page.is-travesia .ficha-cta-final-actions .btn-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
}
main.ficha-page.is-raid .ficha-cta-final-actions .btn-cta-secondary:hover,
main.ficha-page.is-uso-diario .ficha-cta-final-actions .btn-cta-secondary:hover {
  background: rgba(0, 0, 0, 0.08);
}
.ficha-cta-final-foot {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  position: relative;
  z-index: 1;
}

/* ============================================================
   PÁGINA "¿No sabes cuál elegir?"  (modelos/cual-elegir.html)
   ============================================================ */

main.cual-elegir-page { background: var(--bg-primary); color: var(--fg-primary); }

/* HERO */
.cual-elegir-hero {
  padding: clamp(56px, 9vw, 96px) 0 clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--border-subtle);
}

.cual-elegir-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  margin-bottom: var(--space-5);
}
.cual-elegir-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.cual-elegir-breadcrumb a:hover { color: var(--brand-blue); }
.cual-elegir-breadcrumb .sep { color: var(--fg-subtle); }
.cual-elegir-breadcrumb .current { color: var(--fg-primary); }

.cual-elegir-hero-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-blue);
  margin-bottom: var(--space-4);
}

.cual-elegir-hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 76px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  max-width: 18ch;
}

.cual-elegir-hero-sub {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 60ch;
  margin: 0 0 var(--space-5);
}

.cual-elegir-hero-skip {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--fg-primary);
  padding-bottom: 4px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.cual-elegir-hero-skip:hover {
  color: var(--brand-blue);
  border-bottom-color: var(--brand-blue);
}

/* ESCENARIOS — grid 2x2 con cards de color modelo */
.cual-elegir-escenarios {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--bg-soft);
}

.cual-elegir-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: clamp(32px, 4vw, 48px);
  max-width: 60ch;
}

.cual-elegir-section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

.cual-elegir-section-sub {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0;
}

.escenarios-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .escenarios-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 2vw, 28px);
  }

}

.escenario-card {
  --color: var(--brand-blue);
  --color-strong: var(--brand-blue);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(28px, 3vw, 40px);
  border-radius: 2px;
  background: var(--color);
  color: #FFFFFF;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.escenario-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 56px color-mix(in srgb, var(--color) 35%, transparent);
}

.escenario-card.is-ruta { --color: var(--prep-ruta); --color-strong: var(--prep-ruta-strong); }
.escenario-card.is-travesia { --color: var(--prep-travesia); --color-strong: var(--prep-travesia-strong); color: var(--fg-primary); }
.escenario-card.is-raid { --color: var(--prep-raid); --color-strong: var(--prep-raid-strong); color: var(--fg-primary); }
.escenario-card.is-uso-diario { --color: var(--prep-uso-diario); --color-strong: var(--prep-uso-diario-strong); }

.escenario-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.75;
}

.escenario-scenario {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.005em;
}

.escenario-divider {
  height: 1px;
  background: currentColor;
  opacity: 0.25;
}

.escenario-reco {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.escenario-reco-label,
.escenario-fits-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.7;
}

.escenario-reco-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

.escenario-fits {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.92;
}

.escenario-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: #FFFFFF;
  color: var(--color-strong);
  padding: 12px 22px;
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-top: auto;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.escenario-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.escenario-cta::after {
  content: "→";
  transition: transform var(--transition-fast);
}
.escenario-cta:hover::after { transform: translateX(3px); }

/* COMPARATIVA — reutiliza .ficha-comparativa-tabla del CSS de fichas */
.cual-elegir-comparativa {
  padding: clamp(56px, 8vw, 96px) 0;
}

.cual-elegir-comparativa .ficha-comparativa-wrapper {
  margin-top: clamp(28px, 3vw, 40px);
}

/* AYUDA — CTA final */
.cual-elegir-ayuda {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--bg-dark);
  color: #FFFFFF;
  text-align: center;
}

.cual-elegir-ayuda-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 auto var(--space-4);
  max-width: 22ch;
}

.cual-elegir-ayuda-sub {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  margin: 0 auto var(--space-6);
  max-width: 56ch;
  opacity: 0.85;
}

.cual-elegir-ayuda-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.cual-elegir-ayuda-foot {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.5;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .escenario-card:hover { transform: none; }
  .escenario-cta:hover { transform: none; }
  .escenario-cta:hover::after { transform: none; }

}


/* ============================================================
   PORTAFOLIO (galeria.html) — galería filtrable
   ============================================================ */

main.portafolio-page {
  position: relative;
  overflow-x: hidden;
  background: var(--bg-primary);
}

main.portafolio-page > section { position: relative; z-index: 1; }

.portafolio-hero {
  padding: calc(var(--topbar-height) + var(--space-10)) 0 var(--space-12);
  text-align: center;
}
.portafolio-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: var(--space-3) auto var(--space-5);
  max-width: 22ch;
}
.portafolio-hero-subtitle {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 60ch;
  margin: 0 auto var(--space-6);
}
.portafolio-hero-count {
  display: inline-flex;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--bg-soft);
}

.portafolio-filtros {
  padding: var(--space-5) 0;
  position: sticky;
  top: var(--topbar-height);
  z-index: 20;
  background: color-mix(in srgb, var(--bg-primary) 94%, transparent);
  backdrop-filter: saturate(170%) blur(16px);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  border-bottom: 1px solid var(--border-subtle);
}
.portafolio-filtros-bar {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: 0 8px 28px rgba(10,10,10,0.05);
}
.portafolio-filter-group {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: var(--space-4);
}
@media (max-width: 768px) {
  .portafolio-filter-group {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .portafolio-filtros-bar { padding: var(--space-4); }

}
.portafolio-filter-group + .portafolio-filter-group {
  border-top: 1px dashed var(--border-subtle);
  padding-top: var(--space-4);
}
.portafolio-filter-group-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.portafolio-filter-group-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-primary);
}
.portafolio-filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.portafolio-filter-summary-count {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.portafolio-filter-summary-count strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg-primary);
  font-feature-settings: 'tnum' on;
}
.portafolio-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.portafolio-chip {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 2px;
  border: 1.5px solid var(--border);
  background: var(--bg-primary);
  color: var(--fg-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast);
  white-space: nowrap;
}
.portafolio-chip:hover {
  border-color: var(--fg-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(10,10,10,0.06);
}
.portafolio-chip.is-active {
  background: var(--fg-primary);
  color: var(--bg-primary);
  border-color: var(--fg-primary);
  box-shadow: 0 6px 16px rgba(10,10,10,0.18);
}

/* Chips de modelo: pequeño "punto" del color del modelo a la izquierda */
.portafolio-chip.is-ruta,
.portafolio-chip.is-travesia,
.portafolio-chip.is-raid,
.portafolio-chip.is-uso-diario {
  padding-left: 12px;
}
.portafolio-chip.is-ruta::before,
.portafolio-chip.is-travesia::before,
.portafolio-chip.is-raid::before,
.portafolio-chip.is-uso-diario::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.portafolio-chip.is-ruta::before { background: var(--prep-ruta); }
.portafolio-chip.is-travesia::before { background: var(--prep-travesia); }
.portafolio-chip.is-raid::before { background: var(--prep-raid); }
.portafolio-chip.is-uso-diario::before { background: var(--prep-uso-diario); }

/* Estado activo: chip pintado con el color del modelo */
.portafolio-chip.is-ruta.is-active { background: var(--prep-ruta); border-color: var(--prep-ruta); color: var(--prep-ruta-fg); box-shadow: 0 6px 16px color-mix(in srgb, var(--prep-ruta) 32%, transparent); }
.portafolio-chip.is-travesia.is-active { background: var(--prep-travesia); border-color: var(--prep-travesia); color: var(--prep-travesia-fg); box-shadow: 0 6px 16px color-mix(in srgb, var(--prep-travesia) 32%, transparent); }
.portafolio-chip.is-raid.is-active { background: var(--prep-raid); border-color: var(--prep-raid); color: var(--prep-raid-fg); box-shadow: 0 6px 16px color-mix(in srgb, var(--prep-raid) 32%, transparent); }
.portafolio-chip.is-uso-diario.is-active { background: var(--prep-uso-diario); border-color: var(--prep-uso-diario); color: var(--prep-uso-diario-fg); box-shadow: 0 6px 16px color-mix(in srgb, var(--prep-uso-diario) 32%, transparent); }
.portafolio-chip.is-ruta.is-active::before,
.portafolio-chip.is-travesia.is-active::before,
.portafolio-chip.is-raid.is-active::before,
.portafolio-chip.is-uso-diario.is-active::before {
  background: var(--bg-primary);
  opacity: 0.6;
}

.portafolio-reset {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--bg-primary);
  background: var(--fg-primary);
  border: 1.5px solid var(--fg-primary);
  padding: 9px 18px;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--transition-fast), color var(--transition-fast),
              transform var(--transition-fast), box-shadow var(--transition-fast);
}
.portafolio-reset::before {
  content: '×';
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.portafolio-reset:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-blue) 30%, transparent);
}

.portafolio-grid-section {
  padding: var(--space-10) 0 var(--space-16);
}
.portafolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .portafolio-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }

}
@media (min-width: 1280px) {
  .portafolio-grid { grid-template-columns: repeat(4, 1fr); }

}

.portafolio-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-soft);
  border: none;
  padding: 0;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.portafolio-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  border: 3px solid transparent;
  pointer-events: none;
  transition: border-color var(--transition-fast);
  z-index: 2;
}
.portafolio-card.is-ruta:hover::before { border-color: var(--prep-ruta); }
.portafolio-card.is-travesia:hover::before { border-color: var(--prep-travesia); }
.portafolio-card.is-raid:hover::before { border-color: var(--prep-raid); }
.portafolio-card.is-uso-diario:hover::before { border-color: var(--prep-uso-diario); }

.portafolio-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.portafolio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease);
}
.portafolio-card:hover img { transform: scale(1.06); }

.portafolio-card-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-4);
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.0) 100%);
  color: #FFFFFF;
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 1;
}
.portafolio-card:hover .portafolio-card-overlay,
.portafolio-card:focus-visible .portafolio-card-overlay { opacity: 1; }

.portafolio-card-modelo {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  background: rgba(255,255,255,0.95);
  color: var(--fg-primary);
}
.portafolio-card-modelo.is-ruta { background: var(--prep-ruta); color: var(--prep-ruta-fg); }
.portafolio-card-modelo.is-travesia { background: var(--prep-travesia); color: var(--prep-travesia-fg); }
.portafolio-card-modelo.is-raid { background: var(--prep-raid); color: var(--prep-raid-fg); }
.portafolio-card-modelo.is-uso-diario { background: var(--prep-uso-diario); color: var(--prep-uso-diario-fg); }

.portafolio-card-sector {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-align: right;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.portafolio-empty {
  text-align: center;
  padding: var(--space-12) 0;
  color: var(--fg-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}
.portafolio-loading {
  text-align: center;
  padding: var(--space-12) 0;
  color: var(--fg-subtle);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.portafolio-cta {
  padding: var(--space-16) 0;
  text-align: center;
  background: var(--bg-soft);
  border-top: 1px solid var(--border-subtle);
}
.portafolio-cta-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 auto var(--space-4);
  max-width: 22ch;
}
.portafolio-cta-subtitle {
  font-size: 17px;
  color: var(--fg-muted);
  max-width: 50ch;
  margin: 0 auto var(--space-6);
}

.portafolio-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.portafolio-lightbox-bg {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.92);
  z-index: 0;
  cursor: zoom-out;
}
.portafolio-lightbox-content {
  position: relative;
  z-index: 1;
  max-width: min(1400px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.portafolio-lightbox-content img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.portafolio-lightbox-meta {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  color: #FFFFFF;
}
.portafolio-lightbox-modelo {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  background: #FFFFFF;
  color: var(--fg-primary);
}
.portafolio-lightbox-modelo.is-ruta { background: var(--prep-ruta); color: var(--prep-ruta-fg); }
.portafolio-lightbox-modelo.is-travesia { background: var(--prep-travesia); color: var(--prep-travesia-fg); }
.portafolio-lightbox-modelo.is-raid { background: var(--prep-raid); color: var(--prep-raid-fg); }
.portafolio-lightbox-modelo.is-uso-diario { background: var(--prep-uso-diario); color: var(--prep-uso-diario-fg); }
.portafolio-lightbox-sector {
  font-family: var(--font-sans);
  font-size: 14px;
  opacity: 0.85;
}

.portafolio-lightbox-close,
.portafolio-lightbox-prev,
.portafolio-lightbox-next {
  position: absolute;
  z-index: 3;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #FFFFFF;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast);
  line-height: 1;
}
.portafolio-lightbox-close { top: var(--space-5); right: var(--space-5); }
.portafolio-lightbox-prev  { left: var(--space-5);  top: 50%; transform: translateY(-50%); font-size: 32px; }
.portafolio-lightbox-next  { right: var(--space-5); top: 50%; transform: translateY(-50%); font-size: 32px; }

.portafolio-lightbox-close:hover,
.portafolio-lightbox-prev:hover,
.portafolio-lightbox-next:hover { background: rgba(255,255,255,0.22); }

@media (max-width: 640px) {
  .portafolio-lightbox { padding: var(--space-3); }
  .portafolio-lightbox-prev,
  .portafolio-lightbox-next { width: 40px; height: 40px; font-size: 26px; }
  .portafolio-chips { gap: 6px; }
  .portafolio-chip { font-size: 12px; padding: 7px 14px; }

}

@media (prefers-reduced-motion: reduce) {
  .portafolio-card:hover { transform: none; }
  .portafolio-card:hover img { transform: none; }

}


/* ============================================================
   FICHA MODELO — refactor v3 (combined info + cards comparativa
   + applications split + showcase + smaller CTA)
   ============================================================ */

/* --- Combined info (specs + medidas en una tarjeta + foto al lado) --- */
.ficha-info {
  padding: var(--space-12) 0 var(--space-16);
}
.ficha-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: stretch;
}
@media (min-width: 1024px) {
  .ficha-info-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

}
.ficha-info-card {
  background: var(--bg-soft);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 56px);
  position: relative;
  overflow: hidden;
}
.ficha-info-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 6px;
  height: 100%;
  background: var(--current-model-color);
}
.ficha-info-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--current-model-color-strong);
  font-weight: 600;
  display: block;
  margin-bottom: var(--space-3);
}
.ficha-info-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}
.ficha-info-tagline {
  font-size: 15px;
  color: var(--fg-muted);
  margin: 0 0 var(--space-8);
  max-width: 38ch;
}
.ficha-info-block {
  margin-bottom: var(--space-6);
}
.ficha-info-block:last-child { margin-bottom: 0; }
.ficha-info-block-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.ficha-info-rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 28px;
}
@media (min-width: 520px) {
  .ficha-info-rows { grid-template-columns: 1fr 1fr; }

}
.ficha-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-subtle);
}
.ficha-info-row-label {
  font-size: 13px;
  color: var(--fg-muted);
}
.ficha-info-row-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-primary);
  text-align: right;
  font-feature-settings: 'tnum' on;
}
.ficha-info-image {
  position: relative;
  min-height: 380px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--bg-soft);
}
.ficha-info-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ficha-info-image-caption {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  border-radius: 2px;
}

/* --- Comparativa redesign: modelo actual arriba centrado, 3 otros abajo --- */
.ficha-comparativa-cards {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.ficha-comparativa-current-row {
  display: flex;
  justify-content: center;
}
.ficha-comparativa-current-row .ficha-comp-card {
  max-width: 360px;
  width: 100%;
}
.ficha-comparativa-others-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .ficha-comparativa-others-row {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }

}
.ficha-comp-card.is-current {
  border: 3px solid var(--card-color);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--card-color) 22%, transparent);
  cursor: default;
  pointer-events: none;
}
.ficha-comp-card.is-current::before { height: 0; }
.ficha-comp-card.is-current .ficha-comp-card-cta {
  background: var(--card-color-strong);
  color: var(--card-color-fg);
  pointer-events: none;
}
.ficha-comp-card-current-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 2px;
  background: var(--card-color);
  color: var(--card-color-fg);
}
.ficha-comp-card {
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.ficha-comp-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--card-color);
}
.ficha-comp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.ficha-comp-card.is-ruta { --card-color: var(--prep-ruta); --card-color-strong: var(--prep-ruta-strong); --card-color-fg: var(--prep-ruta-fg); }
.ficha-comp-card.is-travesia { --card-color: var(--prep-travesia); --card-color-strong: var(--prep-travesia-strong); --card-color-fg: var(--prep-travesia-fg); }
.ficha-comp-card.is-raid { --card-color: var(--prep-raid); --card-color-strong: var(--prep-raid-strong); --card-color-fg: var(--prep-raid-fg); }
.ficha-comp-card.is-uso-diario { --card-color: var(--prep-uso-diario); --card-color-strong: var(--prep-uso-diario-strong); --card-color-fg: var(--prep-uso-diario-fg); }

.ficha-comp-card-code {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  color: var(--card-color-strong);
  margin: var(--space-2) 0 0;
  letter-spacing: -0.02em;
  line-height: 1;
}
.ficha-comp-card-name {
  font-size: 18px;
  font-weight: 600;
  margin: var(--space-1) 0 var(--space-3);
}
.ficha-comp-card-uso {
  font-size: 13px;
  color: var(--fg-muted);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-4);
}
.ficha-comp-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}
.ficha-comp-card-stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 2px;
}
.ficha-comp-card-stat-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-primary);
}
.ficha-comp-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--card-color);
  color: var(--card-color-fg);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  align-self: flex-start;
  margin-top: auto;
  transition: background var(--transition-fast);
}
.ficha-comp-card-cta:hover { background: var(--card-color-strong); }
.ficha-comp-card-cta::after {
  content: '→';
  transition: transform var(--transition-fast);
}
.ficha-comp-card-cta:hover::after { transform: translateX(4px); }

/* --- Decision CTA: "¿No sabes cuál es tu modelo?" debajo de comparativa --- */
.ficha-decision-cta {
  margin-top: var(--space-10);
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 44px) clamp(28px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.ficha-decision-cta::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--current-model-color);
}
@media (min-width: 768px) {
  .ficha-decision-cta {
    grid-template-columns: 1.4fr auto;
    gap: var(--space-8);
  }

}
.ficha-decision-cta-text { min-width: 0; }
.ficha-decision-cta-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
  color: var(--fg-primary);
}
.ficha-decision-cta-desc {
  font-size: 15px;
  color: var(--fg-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 56ch;
}
.ficha-decision-cta-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 520px) {
  .ficha-decision-cta-actions { flex-direction: row; }

}
.btn-decision-primary,
.btn-decision-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn-decision-primary {
  background: var(--current-model-color);
  color: var(--current-model-fg);
  border: 1px solid var(--current-model-color);
}
.btn-decision-primary:hover {
  background: var(--current-model-color-strong);
  border-color: var(--current-model-color-strong);
  transform: translateY(-2px);
}
.btn-decision-secondary {
  background: transparent;
  color: var(--fg-primary);
  border: 1px solid var(--border);
}
.btn-decision-secondary:hover {
  background: var(--fg-primary);
  color: var(--bg-primary);
  border-color: var(--fg-primary);
  transform: translateY(-2px);
}

/* --- Aplicaciones split (lista + tarjeta PDF) --- */
.ficha-aplicaciones-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: stretch;
}
@media (min-width: 1024px) {
  .ficha-aplicaciones-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-10);
  }

}
.ficha-aplicaciones-pdf {
  background: var(--current-model-color);
  color: var(--current-model-fg);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
}
.ficha-aplicaciones-pdf-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.85;
}
.ficha-aplicaciones-pdf-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.ficha-aplicaciones-pdf-desc {
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.92;
  margin: 0 0 var(--space-3);
}
.ficha-aplicaciones-pdf-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  background: var(--current-model-fg);
  color: var(--current-model-color-strong);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  align-self: flex-start;
  margin-top: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.ficha-aplicaciones-pdf-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.ficha-aplicaciones-pdf-cta svg { width: 18px; height: 18px; }

/* --- Showcase: 3 fotos del modelo + botón ver más --- */
.ficha-showcase {
  padding: var(--space-12) 0 var(--space-16);
}
.ficha-showcase-header {
  text-align: center;
  margin-bottom: var(--space-10);
}
.ficha-showcase-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--current-model-color-strong);
  font-weight: 600;
  display: inline-block;
  margin-bottom: var(--space-3);
}
.ficha-showcase-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 auto var(--space-3);
  max-width: 22ch;
}
.ficha-showcase-intro {
  font-size: 16px;
  color: var(--fg-muted);
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.55;
}
.ficha-showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}
@media (min-width: 768px) {
  .ficha-showcase-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

}
.ficha-showcase-card {
  display: flex;
  flex-direction: column;
}
.ficha-showcase-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-4);
  background: var(--bg-soft);
}
.ficha-showcase-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease);
}
.ficha-showcase-card:hover .ficha-showcase-card-img img { transform: scale(1.05); }
.ficha-showcase-card-client {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--current-model-color-strong);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.ficha-showcase-card-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--space-2);
}
.ficha-showcase-card-desc {
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.5;
  margin: 0;
}
.ficha-showcase-cta-wrapper {
  text-align: center;
}
.ficha-showcase-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--current-model-color);
  color: var(--current-model-fg);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.ficha-showcase-cta:hover {
  background: var(--current-model-color-strong);
  transform: translateY(-2px);
}
.ficha-showcase-cta::after {
  content: '→';
  transition: transform var(--transition-fast);
}
.ficha-showcase-cta:hover::after { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .ficha-comp-card:hover { transform: none; }
  .ficha-showcase-card:hover .ficha-showcase-card-img img { transform: none; }
  .ficha-aplicaciones-pdf-cta:hover { transform: none; }
  .ficha-showcase-cta:hover { transform: none; }

}

/* ============================================================
   CUAL-ELEGIR — Glosario técnico
   Explica qué significa cada característica de la tabla
   comparativa: lavado, gramaje, espesor, bordes, base, etc.
   ============================================================ */
.cual-elegir-glosario {
  padding: var(--space-16) 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.cual-elegir-glosario-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-blue-light);
  font-weight: 700;
  margin-bottom: var(--space-3);
  text-align: center;
}
.cual-elegir-glosario-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
@media (min-width: 700px)  { .cual-elegir-glosario-grid { grid-template-columns: 1fr 1fr; } 
}
@media (min-width: 1100px) { .cual-elegir-glosario-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); } 
}

.glosario-card {
  position: relative;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  overflow: hidden;
}
.glosario-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--card-color, var(--brand-blue));
}
.glosario-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(10,10,10,0.06);
  border-color: var(--card-color);
}
.glosario-card:nth-child(1) { --card-color: var(--brand-blue); }
.glosario-card:nth-child(2) { --card-color: var(--brand-blue-dark); }
.glosario-card:nth-child(3) { --card-color: var(--accent-amber); }
.glosario-card:nth-child(4) { --card-color: var(--brand-blue-light); }
.glosario-card:nth-child(5) { --card-color: var(--brand-navy); }
.glosario-card:nth-child(6) { --card-color: var(--brand-blue); }
.glosario-card:nth-child(7) { --card-color: var(--brand-blue-dark); }
.glosario-card:nth-child(8) { --card-color: var(--brand-blue-light); }

.glosario-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--card-color);
  margin-bottom: var(--space-2);
  padding-left: 8px;
}
.glosario-card h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  padding-left: 8px;
}
.glosario-card > p {
  font-size: 14.5px;
  color: var(--fg-muted);
  line-height: 1.6;
  margin: 0;
  padding-left: 8px;
}
.glosario-card > p strong {
  color: var(--fg-primary);
  font-weight: 600;
  background: linear-gradient(180deg, transparent 65%, color-mix(in srgb, var(--card-color) 22%, transparent) 65%);
  padding: 0 2px;
}

.glosario-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-left: 8px;
}
@media (min-width: 480px) {
  .glosario-compare { grid-template-columns: 1fr 1fr; gap: var(--space-3); }

}
.glosario-side {
  background: var(--bg-soft);
  border-radius: 2px;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--card-color);
}
.glosario-side strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--card-color);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.glosario-side p {
  font-size: 13.5px;
  color: var(--fg-muted);
  margin: 0;
  line-height: 1.5;
}

/* === Cobertura local ===
   Reescrita para el taller: antes eran landings de ciudad con estilos en línea. */

.cobertura-local {
  padding: clamp(48px, 7vw, 90px) 0;
  background: var(--bg-soft);
}

.cobertura-local-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-6);
}

.cobertura-local-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}

.cobertura-local-subtitle {
  color: var(--fg-muted);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
}

.cobertura-local-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  max-width: 1100px;
  margin: 0 auto;
}

.cobertura-card {
  display: block;
  padding: var(--space-5);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--fg-primary);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.cobertura-card:hover,
.cobertura-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-blue);
}

.cobertura-card-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin: 0 0 var(--space-2);
}

.cobertura-card-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

.cobertura-card-desc {
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   AJUSTES DEL REGISTRO EDITORIAL
   ------------------------------------------------------------
   Correcciones transversales al pasar la web a claro y sobrio.
   Van al final porque afectan a secciones definidas más arriba.
   ============================================================ */

/* --- Alineación ---
   Las cabeceras de sección van al margen izquierdo. Un titular
   centrado con su párrafo centrado debajo es el patrón de landing
   comercial; alineado a la izquierda se lee como un artículo. */
.preparaciones-preview-header,
.como-trabajamos-header,
.proyectos-header,
.calidad-header,
.cobertura-local-header,
.sectores-header {
  max-width: 60ch;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: var(--space-10);
  text-align: left;
}

.proyectos-cta,
.sectores-cta { justify-content: flex-start; }

/* --- Los cuatro pasos del proceso ---
   Las cifras bajan de 132px a un tamaño de titular y pasan a gris
   claro: numeran, no protagonizan. Antes iban en hueco, a tamaño
   enorme y en azul eléctrico y ámbar. */
.paso-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--border-strong);
  -webkit-text-stroke: 0;
  margin-bottom: var(--space-4);
}
/* El quinto paso hay que incluirlo aquí o se queda con el color de la
   regla de más arriba —que todavía reparte azules y el alias del ámbar—
   y sale una cifra de otro color al final de la fila. */
.paso-1 .paso-num,
.paso-2 .paso-num,
.paso-3 .paso-num,
.paso-4 .paso-num,
.paso-5 .paso-num { color: var(--border-strong); }

.paso-title {
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.014em;
  font-size: 19px;
}
.paso-icon { color: var(--brand-blue); }

/* La línea que unía los pasos se retira: era decoración pura. */
.pasos-line { display: none; }

/* --- Pie ---
   La banda de cinco colores del pie se sustituye por una línea. Era
   el último resto de la idea de "cada bloque con su color". */
.footer-stripes {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.footer-stripes span { display: none; }

.footer { border-top: 0; }

/* Las cuñas diagonales entre secciones se retiran aquí y no solo en
   components.css: sections.css se carga después y sus reglas de
   .section-wedge volvían a mostrarlas. Eran triángulos negros a todo
   el ancho para "cortar" entre una sección y otra — con la web en
   claro no cortan nada, solo meten dos manchas oscuras. */
.section-wedge,
.section-wedge::after,
.diagonal-divider,
.diagonal-divider-inverted {
  display: none !important;
}

/* El bloque de cierre se alinea con el resto de la página en lugar de
   quedar como una columna estrecha centrada. */
.cta-final > .container {
  max-width: var(--container-max);
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}
.cta-final-title,
.cta-final-subtitle,
.cta-final-foot { max-width: 46ch; }

@media (max-width: 768px) {
  .cta-final > .container {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

}

/* --- Fichas de nivel: ajustes al registro editorial --- */

/* Cabeceras al margen izquierdo, como en el resto de la web. */
.ficha-specs-title,
.ficha-comparativa-title,
.ficha-comparativa-intro,
.ficha-aplicaciones-title,
.cual-elegir-section-header,
.cual-elegir-section-title,
.cual-elegir-section-sub {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.ficha-hero-title,
.ficha-specs-title,
.ficha-comparativa-title,
.ficha-aplicaciones-title,
.ficha-cta-final-title,
.cual-elegir-hero-title,
.cual-elegir-section-title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.024em;
  line-height: 1.12;
}

/* Código de nivel: etiqueta pequeña en monoespaciada, no rótulo. */
.ficha-comp-card-code,
.ficha-hero-eyebrow,
.modelo-pick-card .code {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--fg-muted);
}

.ficha-comp-card-name,
.modelo-pick-card .name {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.014em;
}

/* --- Bloque "presupuesto de esta preparación" ---
   Era un panel negro macizo dentro de una página blanca. Pasa a hueso
   con borde, como el resto de piezas de apoyo. */
.ficha-aplicaciones-pdf {
  background: var(--bg-soft);
  color: var(--fg-primary);
  border: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.ficha-aplicaciones-pdf-eyebrow { color: var(--fg-subtle); }
.ficha-aplicaciones-pdf-title {
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--fg-primary);
}
.ficha-aplicaciones-pdf-desc { color: var(--fg-muted); }
.ficha-aplicaciones-pdf-cta {
  background: var(--brand-blue);
  color: #FFFFFF;
  border-radius: var(--radius-md);
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 13px 22px;
}
.ficha-aplicaciones-pdf-cta:hover {
  background: var(--brand-blue-hover);
  transform: none;
  box-shadow: none;
  filter: none;
}

/* --- Cierre de ficha ---
   Mismo tratamiento que el cierre de la home: bloque oscuro sobrio,
   sin cinta ni filete de color, alineado al margen. */
.ficha-cta-final {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
  text-align: left;
  border-top: 0;
  padding: clamp(64px, 8vw, 104px) 0;
}
.ficha-cta-final::before { content: none; }
.ficha-cta-final > .container {
  border-left: 0;
  padding-left: var(--space-8);
  max-width: var(--container-max);
}
.ficha-cta-final-title { color: var(--fg-on-dark); max-width: 22ch; }
.ficha-cta-final-subtitle { color: var(--fg-on-dark-muted); margin-left: 0; max-width: 52ch; }
.ficha-cta-final-actions { justify-content: flex-start; }
.ficha-cta-final-foot { text-align: left; color: var(--fg-on-dark-muted); }
.ficha-cta-final-actions .btn-cta-primary {
  background: #FFFFFF;
  color: var(--fg-primary);
  border-color: #FFFFFF;
}

@media (max-width: 768px) {
  .ficha-cta-final > .container { padding-left: var(--space-5); }

}

/* --- Tarjetas de escenario (/preparaciones/cual-elegir) ---
   Eran cuatro rectángulos macizos del color de cada nivel. Con la
   escala nueva, que acaba en negro, la del nivel raid quedaba como un
   bloque negro con el texto encima ilegible. Pasan a tarjeta clara con
   borde; el nivel se identifica por el filete superior y por el color
   del nombre recomendado. */
.escenario-card {
  background: var(--bg-primary);
  color: var(--fg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base);
}
.escenario-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--color);
}
.escenario-card.is-uso-diario,
.escenario-card.is-ruta,
.escenario-card.is-travesia,
.escenario-card.is-raid { color: var(--fg-primary); }

.escenario-card:hover {
  transform: none;
  border-color: var(--border-strong);
  box-shadow: none;
}

.escenario-tag,
.escenario-reco-label,
.escenario-fits-label { color: var(--fg-subtle); opacity: 1; }

.escenario-scenario {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--fg-primary);
}
.escenario-divider { background: var(--border); opacity: 1; }

.escenario-reco-name {
  color: var(--color-strong);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.016em;
}
.escenario-fits { color: var(--fg-muted); }

.escenario-cta {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--fg-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.escenario-cta:hover {
  background: var(--bg-soft);
  border-color: var(--fg-subtle);
  color: var(--fg-primary);
}

/* Cierre de la guía de elección: al margen, como el resto. */
.cual-elegir-cta,
.cual-elegir-final,
.cual-elegir-cta-title,
.cual-elegir-cta-sub {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.cual-elegir-cta-actions,
.cual-elegir-cta-buttons { justify-content: flex-start; }

/* --- Regla del oscuro ---
   El fondo oscuro queda reservado a dos sitios: el pie y el bloque de
   cierre de cada página. Todo lo demás va en claro.

   Sin esta regla quedaban repartidos siete bloques negros sueltos
   (barras de cifras, filtros de la galería, caja de ayuda), y una web
   clara con manchas negras cada dos secciones no se lee como sobria,
   se lee como indecisa. */
.cual-elegir-ayuda,
.portafolio-filtros,
.contacto-stats,
.empresa-stats,
.empresa-values,
.cmo-stats,
.cmo-quality {
  background: var(--bg-soft);
  color: var(--fg-primary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Los textos de esos bloques venían pensados para fondo oscuro. */
.cual-elegir-ayuda *,
.portafolio-filtros *,
.contacto-stats *,
.empresa-stats *,
.empresa-values *,
.cmo-stats *,
.cmo-quality * {
  border-color: var(--border);
}

/* --- Párrafos centrados ---
   Un párrafo largo centrado obliga al ojo a buscar el principio de
   cada línea. Se alinean a la izquierda y se les pone medida. */
.cual-elegir-ayuda-sub,
.portafolio-hero-subtitle,
.portafolio-cta-subtitle,
.contacto-hero-subtitle,
.cmo-hero-subtitle,
.cmo-step-text {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: 62ch;
}


/* --- Zonas táctiles ------------------------------------------------
   En táctil, un enlace suelto con el alto de su línea de texto (17-21px)
   es difícil de acertar y fácil de fallar por el de al lado. Los que van
   dentro de un párrafo se dejan como están: darles 44px partiría el
   interlineado, y la propia norma (WCAG 2.5.8) excluye los enlaces en
   línea justo por eso. */
@media (hover: none) {
  .ficha-hero-breadcrumb a,
  .cual-elegir-hero-skip,
  .pd-volver,
  .contacto-alt-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .ficha-hero-breadcrumb { align-items: center; }
}