/* ==========================================================================
   Revisamos Su Coche — Design System v3 (editorial)
   Inspección profesional pre-compra de coches y motos de segunda mano
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tipografías (autoalojadas)
   Antes se cargaban desde fonts.googleapis.com/fonts.gstatic.com: eso hace
   una petición a servidores de Google en cada visita, con la IP del
   visitante, sin avisarlo en la política de cookies ni pedir consentimiento
   — un fallo real de RGPD, no solo de rendimiento. Sirviendo los ficheros
   nosotros mismos se elimina el problema de raíz en vez de documentarlo.
   Solo los subconjuntos latin + latin-ext (letras españolas incluidas, con
   tildes y ñ); Inter es una fuente variable, así que los 6 pesos usados
   comparten los dos mismos ficheros (uno por subconjunto).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/anton-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Reset base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body { margin: 0; overflow-x: hidden; }
img, svg, video { max-width: 100%; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Editorial palette: ink / cream / one accent */
  --ink: #141414;
  --ink-2: #1C1C1C;
  --ink-3: #252525;
  --cream: #FAFAFA;
  --cream-2: #EFEFEF;
  --paper: #FFFFFF;
  --accent: #D4212C;
  --accent-dark: #AF1821;
  --accent-100: #F2D9DB;

  --green-600: #16A34A;
  --green-100: #DCFCE7;
  --green-text: #12873D;
  --red-600: #DC2626;
  --red-100: #FEE2E2;
  --whatsapp: #188641;
  --whatsapp-dark: #136B34;

  /* Text-safe variants. --accent is deliberately deep for its role as a
     fill/background color; that same depth makes it too dark to use as
     small TEXT once it sits on cream/white (needs --accent-text, same
     hue kept but clears 4.5:1 there) or on --ink (needs the lighter
     --accent-light, clears 4.5:1 on dark backgrounds instead). */
  --accent-text: #D4212C;
  --accent-light: #E2444D;

  --text-ink: var(--ink);
  --text-cream: var(--cream);
  --text-muted-light: #636363;
  --text-muted-dark: #9C9C9C;
  --line-light: rgba(20,20,20,0.14);
  --line-dark: rgba(250,250,250,0.16);

  --color-bg: var(--cream);
  --color-bg-alt: var(--cream-2);
  --color-text: var(--text-ink);
  --color-text-muted: var(--text-muted-light);
  --color-border: var(--line-light);
  --color-primary: var(--ink);
  --color-accent: var(--accent);

  /* Typography */
  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lh-tight: 0.98;
  --lh-normal: 1.6;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --container-w: 1240px;
  --container-narrow-w: 760px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 20, 20, 0.12);
  --shadow-lg: 0 24px 60px rgba(20, 20, 20, 0.28);
  --shadow-paper: 0 30px 60px rgba(0,0,0,0.35);

  --header-h: 84px;

  /* Motion: una sola firma de movimiento (todo "sube" a su sitio) que
     comparten las transiciones de página y los revelados al hacer scroll. */
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
}

/* --------------------------------------------------------------------------
   3. Base typography
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--lh-normal);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--ink);
}

h1 { font-size: clamp(2.6rem, 6vw + 1rem, 6rem); }
h2 { font-size: clamp(2rem, 4vw + 0.5rem, 3.4rem); }
h3 { font-family: var(--font-sans); font-weight: 800; text-transform: none; font-size: clamp(1.2rem, 1vw + 1rem, 1.4rem); letter-spacing: -0.01em; }
h4 { font-family: var(--font-sans); font-weight: 800; text-transform: none; font-size: 1.05rem; }

p { color: var(--color-text-muted); }
strong, b { font-weight: 700; color: var(--ink); }

.lead {
  font-size: clamp(1.05rem, 1vw + 0.9rem, 1.25rem);
  color: var(--text-muted-light);
}

a.link { color: var(--ink); font-weight: 700; text-underline-offset: 3px; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
a.link:hover { color: var(--accent-dark); }
.hero a.link, .section-dark a.link, .on-dark a.link { color: var(--cream); }
.hero a.link:hover, .section-dark a.link:hover, .on-dark a.link:hover { color: var(--accent-light); }

/* Outlined headline word — for contrast moments inside a headline */
.text-outline { color: inherit; }
@supports (-webkit-text-stroke: 1px black) {
  .text-outline {
    -webkit-text-stroke: 1.5px currentColor;
    color: transparent;
  }
}

/* Small uppercase numbered section label, e.g. "02 / 06 — Servicios" */
.section-num {
  display: flex;
  align-items: baseline;
  /* Antes era space-between, empujando el "idx" (p.ej. "1 DE CADA 3")
     hasta el borde derecho del container -- en escritorio ancho dejaba
     un hueco enorme en medio y las dos partes se leían como perdidas en
     los laterales en vez de como una sola etiqueta. flex-start + el gap
     de abajo las deja juntas, pegadas al mismo lado que el título de la
     sección. */
  justify-content: flex-start;
  gap: var(--space-4);
  font-family: var(--font-sans);
  /* Crece un poco con el ancho de ventana: a 0.82rem fijo, esta fila
     -- que va de lateral a lateral del container en pantallas anchas de
     escritorio -- se queda con muchísimo hueco vacío en medio y se lee
     como demasiado pequeña para el formato. Se mantiene igual que antes
     en móvil (el mínimo del clamp) y solo sube hacia el máximo en
     ventanas grandes. */
  font-size: clamp(0.82rem, 0.6vw + 0.6rem, 0.98rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted-light);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line-light);
}
.on-dark .section-num, .section-dark .section-num { color: var(--text-muted-dark); border-bottom-color: var(--line-dark); }
.section-num .idx { color: var(--accent-text); }
.on-dark .section-num .idx, .section-dark .section-num .idx { color: var(--accent-light); }

/* Simple inline eyebrow label (compact variant of .section-num) */
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-3);
}
.section-eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex-shrink: 0;
}
.on-dark .section-eyebrow, .section-dark .section-eyebrow, .section-eyebrow.on-dark { color: var(--accent-light); }

/* --------------------------------------------------------------------------
   4. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow-w);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section { padding-block: var(--space-20); }
.section-sm { padding-block: var(--space-10); }
@media (max-width: 720px) {
  .section { padding-block: var(--space-12); }
}

.section-alt { background: var(--cream-2); }
.section-dark, .section-navy {
  background: var(--ink);
  color: var(--text-muted-dark);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4,
.section-navy h1, .section-navy h2, .section-navy h3, .section-navy h4 { color: var(--cream); }
.section-dark p, .section-navy p { color: var(--text-muted-dark); }

.section-header { max-width: 700px; margin-bottom: var(--space-10); }
.section-header.center { margin-inline: auto; text-align: center; }
.section-header p { margin-top: var(--space-3); }

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 920px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* minmax(0,1fr) y no solo "1fr": una pista 1fr no encoge por debajo del
     ancho mínimo de su contenido, así que una tarjeta con texto largo
     podía forzar más ancho que la pantalla en vez de dejarlo envolver. */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.text-center { text-align: center; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

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

.skip-link {
  position: absolute; left: 0; top: -50px;
  background: var(--accent); color: var(--cream);
  padding: var(--space-3) var(--space-5); font-weight: 700;
  z-index: 200; transition: top 0.15s ease;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 1rem 1.9rem;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent);
  color: var(--cream);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { background: #C21E28; }

.btn-dark { background: var(--ink); color: var(--cream); }
.btn-dark:hover { background: var(--accent); color: var(--cream); }

.btn-secondary {
  background: transparent;
  color: var(--cream);
  border-color: rgba(250,250,250,0.4);
}
.btn-secondary:hover { border-color: var(--cream); background: rgba(250,250,250,0.08); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--cream); }

.btn-ghost {
  background: rgba(20,20,20,0.06);
  color: var(--ink);
}
.btn-ghost:hover { background: rgba(20,20,20,0.12); }

.btn-whatsapp {
  background: var(--whatsapp);
  color: var(--white, #fff);
}
.btn-whatsapp:hover { background: var(--whatsapp-dark); }

.btn-lg { padding: 1.15rem 2.2rem; font-size: 0.94rem; }
.btn-sm { padding: 0.65rem 1.2rem; font-size: 0.78rem; }
.btn-block { width: 100%; }
/* .btn nunca envuelve texto (white-space: nowrap, arriba): en los CTA
   largos ("Ir al formulario de contacto", "Reservar inspección"...) con
   btn-lg, eso se salía por el borde de la pantalla en los móviles más
   estrechos en vez de pasar a una segunda línea. */
@media (max-width: 400px) {
  .btn { white-space: normal; text-align: center; }
}

/* --------------------------------------------------------------------------
   6. Header / Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,250,250,0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-light);
  height: var(--header-h);
  display: flex;
  align-items: center;
}
/* El menú centrado (ver ".main-nav" más abajo) necesita que el hueco a
   cada lado sea de sobra más ancho que el bloque más grande de los dos
   (logo vs. teléfono+botón) -- con el ancho de página normal (1240px)
   no sobra ese margen y el menú centrado se solaparía con el teléfono
   en pantallas grandes. La cabecera puede permitirse ser algo más
   ancha que el resto del contenido para dar ese margen sin tocar nada
   más de la página. */
.site-header .container { max-width: 1520px; }

/* El menú se centra con position:absolute + left:50% sobre ".header-inner",
   no repartiendo columnas: con flex+space-between o con un grid de "1fr"
   a cada lado, el centro real dependía de que el logo y las acciones
   (teléfono + botón) midieran lo mismo -- y no miden lo mismo, así que
   el menú quedaba descentrado hacia el lado más corto (o, forzando
   columnas iguales con minmax(0,1fr), el lado de las acciones se
   quedaba sin sitio y el teléfono se solapaba con "CONSEJOS"). Sacar el
   menú del flujo y centrarlo sobre el ancho total de ".header-inner"
   no tiene ese problema: no le importa cuánto midan logo ni acciones,
   siempre que quepan a los lados sin tocar el menú centrado. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  position: relative;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  color: var(--ink);
  flex-shrink: 0;
}
.logo strong { color: var(--accent-text); font-weight: inherit; white-space: nowrap; }
.logo svg { width: 32px; height: 32px; }
.logo-icon { width: 34px; height: 34px; flex-shrink: 0; display: block; }

.main-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.5rem);
}
.main-nav a {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.72rem, 0.95vw, 0.84rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  opacity: 0.75;
  white-space: nowrap;
}
.main-nav a:hover, .main-nav a[aria-current="page"] {
  opacity: 1;
  border-bottom-color: var(--accent);
}

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

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  white-space: nowrap;
}
.header-phone svg { width: 17px; height: 17px; color: var(--ink); }

/* Por debajo de 1200px no cabe el menú en la misma fila que el logo y
   las acciones: en vez de esconderlo detrás de un botón de hamburguesa,
   baja a su propia fila, siempre visible, con scroll horizontal si no
   entran los 7 enlaces — nunca hace falta pinchar nada para verlo. */
/* Por defecto el menú es un hijo normal del flex (posición estática):
   con justify-content:space-between eso nunca se solapa con nada, sea
   cual sea el ancho -- solo puede quedar más cerca de un lado que de
   otro si el logo y las acciones no miden lo mismo. El centrado exacto
   de verdad (position:absolute + left:50%, ver el media query de abajo)
   necesita hueco de sobra a los dos lados del menú para no comerse el
   teléfono/botón; entre 1200 y ~1400px de ventana (portátiles típicos)
   no sobra ese hueco -- probado con Playwright, el centrado exacto ahí
   solapaba el menú con el teléfono. Por eso el centrado absoluto solo
   se activa a partir de 1440px, donde ya está comprobado que no pasa. */
.main-nav { position: static; }
/* Estado base de la flecha de scroll, SIN media query a propósito: vivía
   solo dentro de "max-width:1200px", así que en escritorio (donde nunca
   se aplicaba ninguna regla suya) el <span> caía sin position/opacity,
   como contenido normal en su propia línea justo debajo de "INICIO" --
   visible de verdad, no la pista oculta que debía ser. Con la posición y
   la opacidad:0 aquí fuera, queda oculta siempre salvo que ".is-at-start"
   (que JS solo añade cuando el <ul> desborda de verdad) diga lo contrario,
   sea cual sea el ancho de la ventana. */
.main-nav-scroll-hint {
  position: absolute;
  top: var(--space-3);
  right: 0;
  bottom: var(--space-3);
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--cream) 55%);
  color: var(--accent-text);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.main-nav.is-at-start .main-nav-scroll-hint {
  opacity: 1;
  animation: nav-scroll-hint-nudge 1.4s ease-in-out infinite;
}
/* Centrado exacto del menú, solo cuando hay hueco de sobra a los dos
   lados (ver la nota junto a ".main-nav { position: static; }" más
   arriba sobre por qué no puede ser el comportamiento por defecto). */
@media (min-width: 1440px) {
  .main-nav { position: absolute; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 1200px) {
  .site-header { height: auto; }
  .header-inner { display: flex; flex-wrap: wrap; }
  .header-actions { order: 2; }
  /* El scroll y el degradado viven en el <ul>, no en ".main-nav": así
     ".main-nav" se queda quieto (no es él quien hace scroll) y puede
     llevar la pista de swipe de abajo como hijo con position:absolute
     que de verdad se queda fija en el borde -- si el propio ".main-nav"
     fuera el que hace scroll, cualquier hijo absoluto suyo se movería
     con el contenido en vez de quedarse clavado en el sitio. */
  .main-nav {
    /* Cancela el centrado absoluto de escritorio: aquí abajo el menú
       tiene que volver a ser un hijo normal del flex (para que "order"
       y "flex-basis" lo manden a su propia fila), no quedarse flotando
       centrado por encima del logo y las acciones. */
    position: static;
    transform: none;
    display: flex;
    align-items: center;
    order: 3;
    flex-basis: 100%;
    width: 100%;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line-light);
  }
  .main-nav ul {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 0;
    max-width: 100%;
    gap: var(--space-5);
    padding-bottom: var(--space-3);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* Cuando no entran los 7 enlaces, el borde derecho se desvanece para
       avisar de que hay más menú con scroll -- sin esto, "CÓMO FUNCIONA"
       se corta en seco y parece el final del menú, no una pista de scroll.
       La flecha animada de abajo es la pista fuerte; este degradado es
       el remate suave detrás de ella. */
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  }
  .main-nav ul::-webkit-scrollbar { height: 4px; }
  .main-nav ul::-webkit-scrollbar-thumb { background: var(--line-light); border-radius: 999px; }
  .main-nav li { flex-shrink: 0; }
  .main-nav a { padding: var(--space-2) 0; font-size: 0.8rem; }
  .header-phone span { display: none; }
  .header-actions .btn-primary, .header-actions .btn-dark { display: none; }
}
@keyframes nav-scroll-hint-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .main-nav-scroll-hint { animation: none !important; }
}
@media (max-width: 520px) {
  .header-phone { display: none; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  background: var(--ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}

.hero-content {
  padding: var(--space-24) var(--space-8) var(--space-16);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 900px) {
  .hero-content { padding: var(--space-16) var(--space-5) var(--space-10); }
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  /* Antes era space-between: con el "idx" (Madrid · Guadalajara) pinchado
     al final de un max-width de 480px, dejaba un hueco vacío enorme en
     medio que se veía como dos etiquetas perdidas en los laterales, no
     como una sola pieza. Con flex-start + gap quedan juntas, como un
     único bloque. */
  justify-content: flex-start;
  gap: var(--space-4);
  font-size: clamp(0.8rem, 0.6vw + 0.58rem, 0.96rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
  margin-bottom: var(--space-8);
  max-width: 480px;
}
.hero-eyebrow .idx { color: var(--accent-light); }

.hero h1 { color: var(--cream); max-width: 640px; }
.hero .lead { color: var(--text-muted-dark); margin-top: var(--space-6); max-width: 460px; font-size: 1.1rem; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line-dark);
  max-width: 560px;
}
.hero-trust-item { display: flex; align-items: center; gap: var(--space-2); font-size: 0.85rem; color: var(--text-muted-dark); font-weight: 600; }
.hero-trust-item svg { width: 18px; height: 18px; color: var(--cream); flex-shrink: 0; }

.hero-visual {
  position: relative;
  background: var(--ink-2);
  border-left: 1px solid var(--line-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10);
  min-height: 420px;
}
@media (max-width: 900px) {
  .hero-visual { border-left: none; border-top: 1px solid var(--line-dark); min-height: 320px; }
}

/* --------------------------------------------------------------------------
   7b. Report mockup (stylized "informe" preview card)
   -------------------------------------------------------------------------- */
.report-mock {
  position: relative;
  width: min(300px, 100%);
  margin-inline: auto;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  box-shadow: var(--shadow-paper);
  transform: rotate(-3deg);
}
.report-mock::before {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  background: var(--cream-2);
  border-radius: var(--radius-sm);
  z-index: -1;
  transform: rotate(5deg);
}
@media (max-width: 420px) {
  .report-mock { width: min(260px, 100%); }
  .report-mock::before { inset: 10px -10px -10px 10px; }
}
.report-mock-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--line-light); }
.report-mock-brand { width: 24px; height: 24px; flex-shrink: 0; display: block; }
.report-mock-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--green-text); }
.report-mock-status .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.report-mock-row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 0.78rem; padding-block: var(--space-1); }
.report-mock-row .k { color: var(--text-muted-light); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.68rem; }
.report-mock-row .v { font-weight: 700; }
.report-mock-divider { height: 1px; background: var(--line-light); margin-block: var(--space-4); }
.report-mock-check { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; padding-block: 5px; }
.report-mock-check .light { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.report-mock-check .light.ok { background: var(--green-600); }
.report-mock-check .light.warn { background: var(--accent); }

.report-mock-wrap { position: relative; display: inline-block; }

/* Las dos instancias de .report-mock en index.html (hero y "05 — El
   informe") son clicables y abren el popup de 12 pasos, así que el
   pulso va ligado a ser <button>, no a estar en un sitio concreto. */
button.report-mock { cursor: pointer; animation: rc-pulse-invite 2.4s ease-in-out infinite; }
button.report-mock.is-discovered { animation: none; }
@keyframes rc-pulse-invite {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  50% { transform: rotate(-3deg) scale(1.045); }
}

.report-mock-poke {
  position: absolute;
  top: -34px;
  right: -14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* --accent-light no llega a 4.5:1 sobre --ink-2 (el fondo real aquí,
     más claro que --ink contra el que se calibró ese token) */
  color: #E4515A;
  pointer-events: none;
}
.report-mock-poke span {
  font-family: var(--font-display);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  transform: rotate(-5deg);
  white-space: nowrap;
}
.report-mock-poke-arrow { width: 42px; height: 36px; transform: rotate(4deg); }
@media (max-width: 420px) {
  .report-mock-poke { top: -30px; right: 2px; }
  .report-mock-poke span { font-size: 0.8rem; }
  .report-mock-poke-arrow { width: 34px; height: 30px; }
}
/* En escritorio (donde el hero ya tiene sitio de sobra para la columna
   visual, ver ".hero-visual" / "max-width:900px" más arriba) el aviso
   de "pínchame" se queda pequeño al lado de una tarjeta más grande --
   crece con la misma proporción para seguir leyéndose como parte de la
   misma composición, no como una nota diminuta pegada en la esquina. */
@media (min-width: 901px) {
  .report-mock-poke { top: -46px; right: -20px; gap: 3px; }
  .report-mock-poke span { font-size: 1.3rem; }
  .report-mock-poke-arrow { width: 58px; height: 50px; }
}

/* --------------------------------------------------------------------------
   8. Stats bar
   -------------------------------------------------------------------------- */
.stats-bar {
  background: var(--cream);
  border-bottom: 1px solid var(--line-light);
}
.stats-bar .grid { padding-block: var(--space-8); }
.stat { text-align: center; }
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2vw + 1rem, 2.6rem);
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  line-height: 1;
}
.stat-number .accent { color: var(--accent); }
.section-dark .stat-number, .on-dark .stat-number { color: var(--cream); }
.stat-label { font-size: 0.85rem; color: var(--text-muted-light); margin-top: var(--space-2); font-weight: 600; }

/* --------------------------------------------------------------------------
   9. Cards & icon boxes
   -------------------------------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.icon-box {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.icon-box svg { width: 26px; height: 26px; }
.icon-box.blue { background: var(--ink); color: var(--cream); }
.icon-box.green { background: var(--green-100); color: var(--green-600); }
.icon-box.red { background: var(--ink); color: var(--cream); }
.icon-box.navy { background: var(--ink); color: var(--cream); }

.card h3 { margin-bottom: var(--space-2); font-size: 1.1rem; }
.card p { font-size: 0.94rem; }

/* Problem cards */
.problem-card {
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.problem-card .icon-box { margin-bottom: 0; width: 44px; height: 44px; flex-shrink: 0; }
.problem-card .icon-box svg { width: 22px; height: 22px; }
.problem-card h4 { font-size: 1rem; margin-bottom: var(--space-1); }
.problem-card p { font-size: 0.88rem; margin: 0; }

/* --------------------------------------------------------------------------
   10. Historia paso a paso ("cómo trabajamos")
   No es una lista para pasar el ratón por encima: cada paso se cuenta uno
   detrás de otro, con sitio de sobra para respirar, y un hilo vertical que
   va "creciendo" a medida que avanzas -- como seguir un camino. La frase
   corta (.story-beat) es lo que pasa; el detalle pequeño (.story-detail)
   es cómo pasa. El número llega con un poco de rebote, no un simple fundido.
   -------------------------------------------------------------------------- */
.story { position: relative; }
.story-thread {
  position: absolute;
  left: 27px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--line-light);
  border-radius: 999px;
  overflow: hidden;
}
.on-dark .story-thread, .section-dark .story-thread { background: var(--line-dark); }
.story-thread-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: top;
  transform: scaleY(1);
}
.story-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-6);
  align-items: start;
  padding-block: var(--space-12);
}
.story-step:first-child { padding-top: var(--space-4); }
.story-step:last-child { padding-bottom: var(--space-4); }
.story-num {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.6rem;
  flex-shrink: 0;
}
.on-dark .story-num, .section-dark .story-num { background: var(--accent); color: var(--cream); }
.story-beat {
  font-size: clamp(1.15rem, 0.5vw + 1.05rem, 1.35rem);
  margin-bottom: var(--space-3);
  max-width: 480px;
}
.story-detail {
  margin: 0;
  font-size: 0.96rem;
  color: var(--text-muted-light);
  max-width: 500px;
}
.on-dark .story-detail, .section-dark .story-detail { color: var(--text-muted-dark); }
@media (max-width: 640px) {
  .story-step { grid-template-columns: 44px 1fr; gap: var(--space-4); padding-block: var(--space-8); }
  .story-num { width: 44px; height: 44px; font-size: 1.25rem; }
  .story-thread { left: 21px; }
}

/* --------------------------------------------------------------------------
   11. Pricing
   -------------------------------------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}
@media (max-width: 920px) {
  /* "1fr" no encoge por debajo del ancho mínimo de su contenido (la regla
     por defecto es minmax(auto,1fr), no minmax(0,1fr)): en pantallas muy
     estrechas esto empujaba la tarjeta más ancha que la pantalla en vez
     de dejar que el texto envolviera. minmax(0,1fr) sí puede encoger. */
  .pricing-grid { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; }
  /* Apiladas en una columna, la tarifa recomendada (.featured) pasa
     primero: es la que queremos que se vea nada más llegar, sin tener
     que bajar. En 3 columnas se deja el orden barato→recomendado→premium
     de siempre, que ahí sí se ve entero de un vistazo. */
  .pricing-card.featured { order: -1; }
}

.pricing-card {
  background: var(--paper);
  border: 1.5px solid var(--line-light);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  position: relative;
}
.pricing-card.featured {
  border-color: var(--accent);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
}

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--cream);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pricing-name { font-size: 0.95rem; font-weight: 800; color: var(--text-muted-light); text-transform: uppercase; letter-spacing: 0.03em; }
.pricing-price { display: flex; align-items: baseline; gap: var(--space-2); margin-block: var(--space-3) var(--space-1); }
.pricing-price .amount { font-family: var(--font-display); font-size: 3rem; color: var(--ink); line-height: 1; }
.pricing-price .amount .decimal { font-size: 1.5rem; }
.pricing-price .currency { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }
.pricing-desc { font-size: 0.9rem; color: var(--text-muted-light); margin-bottom: var(--space-6); }
.pricing-travel { font-size: 0.8rem; color: var(--ink); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; margin-top: calc(-1 * var(--space-4)); margin-bottom: var(--space-6); }

.pricing-features { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); flex-grow: 1; }
.pricing-features li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 0.92rem; color: var(--ink); }
.pricing-features svg { width: 20px; height: 20px; color: var(--green-600); flex-shrink: 0; margin-top: 1px; }
.pricing-features li.muted { color: var(--text-muted-light); }
.pricing-features li.muted svg { color: var(--line-light); }

/* Comparison table */
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--line-light); }
.comparison-table { min-width: 640px; background: var(--paper); }
.comparison-table th, .comparison-table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--line-light);
  font-size: 0.9rem;
}
.comparison-table thead th { background: var(--cream-2); font-weight: 800; color: var(--ink); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.03em; }
.comparison-table td:not(:first-child), .comparison-table th:not(:first-child) { text-align: center; }
.comparison-table tbody th { font-weight: 700; color: var(--ink); }
.comparison-table svg.yes { width: 20px; height: 20px; color: var(--green-600); }
.comparison-table svg.no { width: 20px; height: 20px; color: var(--line-light); }
.comparison-table tr:last-child td, .comparison-table tr:last-child th { border-bottom: none; }

/* Columna de la izquierda fija: si la tabla necesita scroll horizontal,
   sin esto el nombre de la fila desaparece por la izquierda justo cuando
   más falta hace para saber qué se está comparando. */
.comparison-table th:first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line-light); }
.comparison-table thead th:first-child { background: var(--cream-2); }
.comparison-table tbody th:first-child { background: var(--paper); }

/* Por debajo de 640px la tabla de 640px de ancho ya no cabe: en vez de
   depender del scroll horizontal (con el riesgo de que la propia columna
   fija tape los iconos de la última tarifa al desplazarse), se encoge a
   4 columnas de ancho fijo que caben enteras en pantalla sin scroll. */
@media (max-width: 640px) {
  .comparison-table { min-width: 0; width: 100%; table-layout: fixed; }
  .comparison-table th:first-child, .comparison-table td:first-child {
    width: 38%;
    position: static;
    box-shadow: none;
  }
  .comparison-table th:not(:first-child), .comparison-table td:not(:first-child) { width: 20.7%; padding-left: var(--space-1); padding-right: var(--space-1); }
  .comparison-table th, .comparison-table td { padding: var(--space-3) var(--space-2); font-size: 0.8rem; }
  .comparison-table thead th { font-size: 0.64rem; line-height: 1.3; letter-spacing: 0.01em; overflow-wrap: break-word; }
  .comparison-table svg.yes, .comparison-table svg.no { width: 17px; height: 17px; }
}

/* --------------------------------------------------------------------------
   12. Testimonials
   -------------------------------------------------------------------------- */
.testimonial-card {
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.stars { display: flex; gap: 2px; color: var(--ink); }
.stars svg { width: 17px; height: 17px; }
.testimonial-quote { font-size: 0.95rem; color: var(--ink); font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.testimonial-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--ink); color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9rem; flex-shrink: 0;
}
.testimonial-name { font-weight: 800; font-size: 0.88rem; color: var(--ink); }
.testimonial-meta { font-size: 0.78rem; color: var(--text-muted-light); }

/* --------------------------------------------------------------------------
   13. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--accent);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: var(--space-16) var(--space-8);
  text-align: center;
}
.cta-band h2 { color: var(--cream); }
.cta-band p { color: var(--cream); max-width: 560px; margin-inline: auto; margin-top: var(--space-3); }
.cta-band .hero-actions { justify-content: center; margin-top: var(--space-8); }
.cta-band .btn-secondary { color: var(--cream); border-color: rgba(250,250,250,0.45); }
.cta-band .btn-secondary:hover { border-color: var(--cream); background: rgba(250,250,250,0.12); }
.cta-band .btn-outline { color: var(--cream); border-color: var(--cream); }
.cta-band .btn-outline:hover { background: var(--cream); color: var(--ink); }

.cta-band-split {
  background: var(--accent);
  color: var(--cream);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  overflow: hidden;
}
@media (max-width: 780px) { .cta-band-split { grid-template-columns: minmax(0, 1fr); } }
.cta-band-split .cta-copy { padding: var(--space-16) var(--space-10); }
.cta-band-split h2 { color: var(--cream); }
.cta-band-split .cta-form { background: rgba(20,20,20,0.15); padding: var(--space-10); display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); }

/* --------------------------------------------------------------------------
   14. FAQ / plus-accordion (also used for editorial services list)
   -------------------------------------------------------------------------- */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--line-light); }
.faq-item:first-child { border-top: 1px solid var(--line-light); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
  text-align: left;
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--ink);
}
.faq-question .plus {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.faq-question .plus::before, .faq-question .plus::after {
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.faq-question .plus::before { width: 12px; height: 2px; }
.faq-question .plus::after { width: 2px; height: 12px; }
.faq-item[open] .faq-question .plus { border-color: var(--accent); }
.faq-item[open] .faq-question .plus::before,
.faq-item[open] .faq-question .plus::after { background: var(--accent); }
.faq-item[open] .faq-question .plus::after { transform: rotate(90deg); opacity: 0; }
.faq-item summary { cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-answer { padding-bottom: var(--space-6); font-size: 0.94rem; color: var(--text-muted-light); max-width: 640px; }

/* Editorial services list — big Anton row titles, meta on the right */
.service-list { display: flex; flex-direction: column; }
.service-row { border-bottom: 1px solid var(--line-light); }
.service-row:first-child { border-top: 1px solid var(--line-light); }
.service-row summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-6);
}
.service-row summary::-webkit-details-marker { display: none; }
.service-row .title-group { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; row-gap: var(--space-2); }
.service-row .title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.1rem, 0.6vw + 1rem, 1.35rem);
  color: var(--ink);
}
.service-star-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent);
  color: var(--cream);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.service-star-badge svg { width: 10px; height: 10px; }
.service-row .meta {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted-light);
  text-align: right;
  flex-shrink: 0;
  max-width: 220px;
  display: none;
}
@media (min-width: 720px) { .service-row .meta { display: block; } }
.service-row .plus {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.service-row .plus::before, .service-row .plus::after {
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.service-row .plus::before { width: 13px; height: 2px; }
.service-row .plus::after { width: 2px; height: 13px; }
.service-row[open] .plus { border-color: var(--accent); background: var(--accent); }
.service-row[open] .plus::before, .service-row[open] .plus::after { background: var(--ink); }
.service-row[open] .plus::after { transform: rotate(90deg); opacity: 0; }
.service-row-body { padding-bottom: var(--space-6); max-width: 620px; }
.service-row-body p { margin-bottom: var(--space-3); }

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 640px) { .form-row { grid-template-columns: minmax(0, 1fr); } }

.form-group { margin-bottom: var(--space-5); }
/* Campo trampa contra bots: invisible para una persona (fuera de
   pantalla, no con display:none/hidden -- algunos bots simples
   ignoran los campos ocultos así, pero sí rellenan los que "parecen"
   normales) y fuera del recorrido de tabulación/lector de pantalla.
   Si llega relleno, main.js trata el envío como spam sin mandarlo a
   ningún sitio. */
.form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}
/* Envuelve el campo de fecha para que destaque como el paso rápido del
   formulario ("directo al calendario"): mismo icon-box que ya se usa en
   los métodos de contacto, en verde para que se lea como fácil/positivo. */
.form-group-featured {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--green-100);
  border: 1.5px solid var(--green-600);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  /* Tercer aviso real seguido de que el calendario se sigue saliendo
     de este recuadro en un iPhone real, tras dos rondas de arreglos
     (min-width:0 en el flex; luego display:block + quitar el padding
     del icono nativo del selector) que no hay forma de comprobar aquí
     -- este entorno solo tiene Chromium de escritorio, que nunca
     reprodujo el problema en ningún intento. En vez de una cuarta
     conjetura sobre la causa exacta, esto garantiza el síntoma en sí:
     sea lo que sea que el control nativo intente pintar por encima de
     su ancho asignado, ya no puede pintarse fuera de este recuadro.
     No recorta el estado ":focus" (ese solo cambia borde/fondo del
     propio input, no un anillo o sombra que sobresalga). */
  overflow: hidden;
}
.form-group-featured .icon-box { margin-bottom: 0; }
.form-group-featured .form-group { flex: 1; margin-bottom: 0; min-width: 0; }
@media (max-width: 480px) {
  /* "display:block" a propósito, no "flex-direction:column": el campo
     de fecha es un <input type="date"> nativo, y según un aviso real
     desde iPhone, el ancho stretch de un hijo flex en columna no se
     le aplicaba de forma fiable (algo que no hay forma de reproducir
     aquí, solo hay Chromium de escritorio, que sí lo hacía bien). El
     ancho de un bloque normal al 100% de su contenedor es de los
     comportamientos más antiguos y consistentes de CSS entre
     navegadores -- no depende en nada de cómo cada motor calcule el
     stretch dentro de un flex container. */
  .form-group-featured { display: block; text-align: center; }
  .form-group-featured .icon-box { margin-inline: auto; }
  /* Cuarto aviso real seguido con foto: incluso con el overflow:hidden
     del recuadro (arriba), la esquina del input seguía tocando/pisando
     el borde redondeado en iPhone -- se veía "desplazada", no ya fuera
     de la página, pero sí fea. Medido con Playwright a 390px: el propio
     cálculo de caja (ancho, paddings, huecos a izquierda/derecha) sale
     perfectamente simétrico y sin desbordar en Chromium, así que el
     hueco entre el input y el borde verde YA es correcto sobre el
     papel -- lo que falla es que el control nativo de iOS, al pintar
     sus segmentos día/mes/año con el nombre del mes en texto ("28 sept
     2026" ocupa más que "28/09/2026"), parece pedir más ancho real del
     que se le asignó, y el overflow:hidden del recuadro solo evita que
     eso rompa la página -- no evita que se vea pegado al borde. En vez
     de asignarle el 100% del hueco otra vez, se le da menos: el 82% del
     ancho disponible, centrado por el text-align:center heredado, para
     que sobren ~18% de margen a cada lado como colchón. Si el control
     nativo pide ese puñado de píxeles de más, los toma del margen y no
     del borde redondeado. Fuente menor en este input concreto, para que
     el texto necesite aún menos ancho real. */
  .form-group-featured input[type="date"] {
    box-sizing: border-box;
    width: 82%;
    max-width: 82%;
    padding-left: 0.65rem;
    padding-right: 0.5rem;
    font-size: 0.85rem;
  }
}
.form-group label {
  display: block;
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.form-group .hint { font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--text-muted-light); font-size: 0.78rem; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line-light);
  border-radius: var(--radius-sm);
  background: var(--cream);
  font-size: 0.96rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
/* El icono nativo del selector de fecha en WebKit/iOS lleva su propio
   padding interno, que puede sumar ancho real por encima de lo que
   marque la caja del <input> -- una causa conocida y aparte de que
   este control se salga de su recuadro en iPhone real, distinta del
   min-width en el contenedor de arriba. */
input[type="date"]::-webkit-calendar-picker-indicator { padding: 0; margin-left: 4px; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--paper);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-checkbox { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 0.85rem; color: var(--text-muted-light); }
.form-checkbox input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }

.form-note { display: flex; align-items: center; gap: var(--space-2); font-size: 0.85rem; color: var(--text-muted-light); margin-top: var(--space-4); }
.form-note svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--green-600); }

.form-status { display: none; padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; margin-bottom: var(--space-5); }
.form-status.visible { display: block; }
.form-status.success { background: var(--green-100); color: #14532D; }
.form-status.error { background: var(--red-100); color: #7F1D1D; }

/* --------------------------------------------------------------------------
   16. Contact info cards / Zones
   -------------------------------------------------------------------------- */
.contact-method {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--paper);
  border: 1px solid var(--line-light);
}
.contact-method .icon-box { margin-bottom: 0; flex-shrink: 0; }
.contact-method h4 { font-size: 1rem; margin-bottom: var(--space-1); }
.contact-method p { font-size: 0.9rem; margin: 0; }
.contact-method a.link { font-size: 0.92rem; }

.zone-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.zone-tag {
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid var(--line-light);
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--text-muted-dark);
  padding-top: var(--space-16);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-8);
  padding-bottom: var(--space-12);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

.footer-brand .logo { color: var(--cream); margin-bottom: var(--space-4); }
.footer-brand .logo strong { color: var(--accent-light); }
.footer-brand p { color: var(--text-muted-dark); font-size: 0.9rem; max-width: 320px; }

.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(250,250,250,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.footer-social a:hover { background: var(--accent); color: var(--cream); }
.footer-social svg { width: 18px; height: 18px; }

.footer-col h3 { font-family: var(--font-sans); font-weight: 800; text-transform: uppercase; color: var(--cream); font-size: 0.82rem; letter-spacing: 0.05em; margin-bottom: var(--space-4); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { color: var(--text-muted-dark); font-size: 0.92rem; }
.footer-col a:hover { color: var(--accent-light); }
.footer-col li { display: flex; align-items: center; gap: var(--space-2); }
.footer-col li svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted-dark); }

.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding-block: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 0.8rem;
  color: var(--text-muted-dark);
}
.footer-bottom p { color: var(--text-muted-dark); }
.footer-legal-links { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.footer-legal-links a { color: var(--text-muted-dark); }
.footer-legal-links a:hover { color: var(--accent-light); }
.footer-legal-placeholder { color: var(--accent-light); }

/* --------------------------------------------------------------------------
   18. Sticky mobile CTA bar
   -------------------------------------------------------------------------- */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: var(--paper);
  border-top: 1px solid var(--line-light);
  box-shadow: 0 -6px 20px rgba(20,20,20,0.14);
  padding: var(--space-2) var(--space-3);
  padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
}
@media (max-width: 720px) {
  .sticky-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-2); }
  body { padding-bottom: 68px; }
}
.sticky-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
}
.sticky-cta-btn svg { width: 16px; height: 16px; }
.sticky-cta-btn.call { background: var(--cream-2); color: var(--ink); }
.sticky-cta-btn.whatsapp { background: var(--whatsapp); color: #fff; }
.sticky-cta-btn.book { background: var(--accent); color: var(--cream); }

/* --------------------------------------------------------------------------
   19. Cookie banner
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  max-width: 560px;
  z-index: 150;
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { font-size: 0.85rem; color: var(--text-muted-light); margin-bottom: var(--space-4); }
.cookie-banner p a { color: var(--ink); font-weight: 700; text-decoration: underline; }
.cookie-actions { display: flex; gap: var(--space-3); justify-content: flex-end; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   20. Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumbs { padding-block: var(--space-5); font-size: 0.82rem; color: var(--text-muted-light); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.breadcrumbs a { color: var(--text-muted-light); font-weight: 600; }
.breadcrumbs a:hover { color: var(--accent-light); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: var(--space-2); color: var(--line-light); }
.breadcrumbs li[aria-current] { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   21. Page header (interior pages)
   -------------------------------------------------------------------------- */
.page-header {
  background: var(--ink);
  color: var(--cream);
  padding-block: var(--space-12) var(--space-16);
}
.page-header h1 { color: var(--cream); font-size: clamp(2.2rem, 5vw, 3.6rem); }
.page-header .lead { color: var(--text-muted-dark); margin-top: var(--space-3); max-width: 640px; }
.page-header .breadcrumbs { color: var(--text-muted-dark); padding-top: 0; margin-bottom: var(--space-4); }
.page-header .breadcrumbs a { color: var(--text-muted-dark); }
.page-header .breadcrumbs li[aria-current] { color: var(--cream); }
.page-header .breadcrumbs li:not(:last-child)::after { color: var(--line-dark); }

/* --------------------------------------------------------------------------
   22. Article / blog typography
   -------------------------------------------------------------------------- */
.article-meta { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; font-size: 0.85rem; color: var(--text-muted-dark); margin-top: var(--space-4); }
.article-meta .badge { background: rgba(212,33,44,0.16); color: var(--cream); padding: 0.3rem 0.8rem; border-radius: var(--radius-full); font-weight: 700; text-transform: uppercase; font-size: 0.72rem; }

.article-body { max-width: var(--container-narrow-w); margin-inline: auto; }
.article-body h2 { margin-top: var(--space-10); margin-bottom: var(--space-4); font-size: 1.7rem; }
.article-body h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); font-size: 1.2rem; }
.article-body p { margin-bottom: var(--space-5); font-size: 1.02rem; }
.article-body ul, .article-body ol { margin-bottom: var(--space-5); padding-left: 1.3rem; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: var(--space-2); color: var(--text-muted-light); }
.article-body blockquote {
  border-left: 4px solid var(--accent);
  padding: var(--space-4) var(--space-6);
  background: var(--cream-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--space-6);
  font-style: italic;
  color: var(--ink);
}
.article-cta {
  background: var(--cream-2);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-block: var(--space-8);
}
.article-cta h4 { margin-bottom: var(--space-1); }
.article-cta p { margin: 0; font-size: 0.9rem; }

.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
@media (max-width: 720px) { .blog-grid { grid-template-columns: minmax(0, 1fr); } }
.blog-card { background: var(--paper); border: 1px solid var(--line-light); border-radius: var(--radius-md); padding: var(--space-6); }
.blog-card .icon-box { background: var(--ink); color: var(--cream); }
.blog-card h3 a { color: var(--ink); font-family: var(--font-sans); text-transform: none; font-weight: 800; }
.blog-card h3 a:hover { color: var(--accent-dark); }
.blog-card p { font-size: 0.92rem; margin-top: var(--space-2); }
.blog-card .read-more { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 800; font-size: 0.85rem; text-transform: uppercase; color: var(--ink); margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   22-bis. Bloque "Por qué existimos" (sobre-nosotros.html)
   Los subtítulos van en h3 (tipografía de texto, no de titular: mismo
   tratamiento que ya usa el resto de la web para "esto es secundario"),
   y con espaciado explícito porque el reset global deja h1-h6/p/ul en
   margin:0.
   -------------------------------------------------------------------------- */
.about-story > h3 { margin-top: var(--space-12); margin-bottom: var(--space-4); }
.about-story > h3:first-child { margin-top: 0; }
.about-story > p { margin-bottom: var(--space-5); }
.about-story > ul { margin-top: var(--space-3); margin-bottom: var(--space-6); padding-left: 1.3rem; list-style: disc; }
.about-story > ul li { margin-bottom: var(--space-2); color: var(--text-muted-light); }

/* --------------------------------------------------------------------------
   23. Legal pages
   -------------------------------------------------------------------------- */
.legal-body { max-width: var(--container-narrow-w); margin-inline: auto; }
.legal-body h2 { margin-top: var(--space-10); margin-bottom: var(--space-4); font-size: 1.5rem; }
.legal-body h3 { margin-top: var(--space-6); margin-bottom: var(--space-3); font-size: 1.05rem; }
.legal-body p { margin-bottom: var(--space-4); font-size: 0.96rem; }
.legal-body ul { margin-bottom: var(--space-4); padding-left: 1.3rem; list-style: disc; }
.legal-body li { margin-bottom: var(--space-2); color: var(--text-muted-light); font-size: 0.95rem; }
.legal-body .updated { color: var(--text-muted-light); font-size: 0.88rem; margin-bottom: var(--space-8); }
.legal-placeholder {
  background: var(--accent-100);
  color: #C01E28;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.92em;
}
.legal-notice {
  background: var(--cream-2);
  border: 1px solid var(--line-light);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-5);
  margin-bottom: var(--space-8);
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   24. 404
   -------------------------------------------------------------------------- */
.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--space-20);
}
.error-code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 12vw, 9rem);
  color: var(--line-light);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   25. Badges
   -------------------------------------------------------------------------- */
.badge-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-light);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.badge svg { width: 15px; height: 15px; color: var(--green-600); }
.on-dark .badge, .section-dark .badge { background: rgba(250,250,250,0.06); color: var(--cream); border-color: var(--line-dark); }

/* --------------------------------------------------------------------------
   26. Equipo (Nacho y Cristian)
   -------------------------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
@media (max-width: 640px) { .team-grid { grid-template-columns: minmax(0, 1fr); } }

.team-card {
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.on-dark .team-card, .section-dark .team-card { background: var(--ink-2); border-color: var(--line-dark); }
.team-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.team-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--cream);
  background: var(--ink);
  border: 3px solid var(--ink);
}
.team-name { font-family: var(--font-display); text-transform: uppercase; font-size: 1.4rem; margin-bottom: var(--space-1); }
.team-role {
  color: var(--ink);
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
}
.on-dark .team-role, .section-dark .team-role { color: var(--cream); }
.team-bio { font-size: 0.94rem; }
.team-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-5); }

/* --------------------------------------------------------------------------
   27. Aviso de precio (desplazamiento, notas importantes de tarifa)
   -------------------------------------------------------------------------- */
.price-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--cream-2);
  border: 1px solid var(--line-light);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  font-size: 0.94rem;
  color: var(--ink);
}
.price-note svg { width: 22px; height: 22px; color: var(--ink); flex-shrink: 0; margin-top: 1px; }
.price-note strong { color: var(--ink); }
.price-note.on-dark { background: var(--ink-2); border-color: var(--line-dark); border-left-color: var(--accent); color: var(--text-muted-dark); }
.price-note.on-dark strong { color: var(--cream); }
.price-note.on-dark svg { color: var(--cream); }

/* --------------------------------------------------------------------------
   28. Distintivo de tipo de vehículo (coche / moto)
   -------------------------------------------------------------------------- */
.vehicle-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--accent);
  color: var(--cream);
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-full);
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-4);
}
.vehicle-badge svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   29. Tarjeta de servicio destacado (sin tarifa fija: entrega/transporte)
   -------------------------------------------------------------------------- */
.service-highlight {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  color: var(--cream);
}
@media (max-width: 720px) { .service-highlight { flex-direction: column; text-align: center; } }
.service-highlight .icon-box {
  background: rgba(250,250,250,0.12);
  color: var(--cream);
  flex-shrink: 0;
  margin-bottom: 0;
  width: 68px;
  height: 68px;
}
.service-highlight .icon-box svg { width: 34px; height: 34px; }
.service-highlight h3 { color: var(--cream); font-family: var(--font-sans); text-transform: none; font-weight: 800; font-size: 1.3rem; margin-bottom: var(--space-2); }
.service-highlight p { color: var(--text-muted-dark); margin-bottom: 0; }
.service-highlight-actions { flex-shrink: 0; }
@media (max-width: 720px) { .service-highlight-actions { width: 100%; } }

/* --------------------------------------------------------------------------
   30. Transiciones entre páginas (View Transitions API)
   Progressive enhancement puro vía CSS: sin JS, sin router. Los navegadores
   sin soporte navegan exactamente igual que hoy (no-op). En los que sí
   soportan navegación cross-document (Chrome/Edge/Android 126+), cada
   cambio de página anima: la página saliente cae y se desvanece, la
   entrante sube y toma su lugar — la firma de movimiento de la marca.
   Cabecera y barra móvil se anclan (view-transition-name) para que no
   "viajen" con el resto del contenido.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  .site-header { view-transition-name: rc-header; }
  .sticky-cta { view-transition-name: rc-sticky-cta; }

  /* Evita el mix-blend-mode "plus-lighter" por defecto del navegador,
     pensado para crossfades: con nuestro desplazamiento vertical, dos
     capas semitransparentes superpuestas se ven quemadas/lavadas. */
  ::view-transition-image-pair(root) { isolation: isolate; }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    mix-blend-mode: normal;
    animation-fill-mode: both;
  }

  ::view-transition-old(root) {
    animation: rc-page-leave 0.26s var(--ease-out-strong);
  }
  ::view-transition-new(root) {
    animation: rc-page-enter 0.42s var(--ease-out-strong);
  }

  @keyframes rc-page-leave {
    to { transform: translateY(2.4vh) scale(0.985); opacity: 0; }
  }
  @keyframes rc-page-enter {
    from { transform: translateY(3.2vh); opacity: 0; }
  }

  /* La cabecera y la barra móvil casi no cambian entre páginas: swap
     rápido y discreto en vez de heredar la animación de 0.42s del resto. */
  ::view-transition-group(rc-header),
  ::view-transition-group(rc-sticky-cta),
  ::view-transition-old(rc-header),
  ::view-transition-new(rc-header),
  ::view-transition-old(rc-sticky-cta),
  ::view-transition-new(rc-sticky-cta) {
    animation-duration: 0.15s;
    animation-timing-function: ease;
  }
}

/* --------------------------------------------------------------------------
   31. Revelado al hacer scroll (scroll-driven animations, CSS puro)
   No es un "aparece una vez y ya": va enganchado a la posición de scroll
   en todo momento (animation-range: cover 0%-100%), así que subir y
   bajar SIEMPRE mueve algo — el contenido entra subiendo con fuerza
   (rotación + escala), se asienta para poder leerlo, y vuelve a moverse
   al salir. Es la misma lógica de "cómo trabajamos, paso a paso" que el
   resto de la web: cada pieza se construye ante tus ojos según avanzas,
   en vez de estar ya puesta desde el principio.
   Pieza de firma: las luces de estado de la tarjeta de informe
   (report-mock-check) se van "encendiendo" en cascada según entra el
   informe en pantalla — como si vieras la inspección comprobándose en
   tiempo real.
   Ligado a animation-timeline: view(), sin JS ni listener de scroll: va
   a 60fps incluso en scroll rápido porque corre en el compositor.
   Envuelto en @supports: en navegadores sin esta función (Safari/Firefox
   a día de hoy) la regla entera se ignora y el contenido se ve normal
   desde el primer fotograma — nunca puede quedar oculto por falta de
   soporte, no depende de que cargue ningún JS.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Tarjetas "de objeto": rotación + escala, movimiento grande. */
    .problem-card,
    .pricing-card,
    .testimonial-card,
    .team-card,
    .card {
      animation: rc-reveal-updown 1.1s linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform, opacity;
    }
    @keyframes rc-reveal-updown {
      0%   { opacity: 0; transform: translateY(7rem) scale(0.86) rotate(-3.5deg); }
      18%  { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
      82%  { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
      100% { opacity: 0; transform: translateY(-7rem) scale(0.86) rotate(3.5deg); }
    }

    /* Titulares y filas a todo el ancho: mismo recorrido grande, sin
       rotación (una cabecera girando se ve raro, no premium). */
    .story-step,
    .service-row,
    .section-header {
      animation: rc-reveal-updown-flat 1.1s linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform, opacity;
    }
    @keyframes rc-reveal-updown-flat {
      0%   { opacity: 0; transform: translateY(6rem); }
      18%  { opacity: 1; transform: translateY(0); }
      82%  { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(-6rem); }
    }

    /* Tarjetas que comparten fila no deben moverse todas a la vez: cada
       siguiente hermana arranca su propio recorrido un poco más tarde. */
    .problem-card:nth-child(2), .pricing-card:nth-child(2),
    .team-card:nth-child(2), .testimonial-card:nth-child(2) {
      animation-range: cover 5% cover 100%;
    }
    .problem-card:nth-child(3), .pricing-card:nth-child(3),
    .team-card:nth-child(3), .testimonial-card:nth-child(3) {
      animation-range: cover 10% cover 100%;
    }
    .problem-card:nth-child(4) { animation-range: cover 15% cover 100%; }
    .problem-card:nth-child(5) { animation-range: cover 20% cover 100%; }
    .problem-card:nth-child(6) { animation-range: cover 25% cover 100%; }

    /* Firma: las luces del informe se "encienden" en cascada según el
       card entra en pantalla -- cada fila tiene su propia posición, así
       que se activan una a una sin necesidad de retrasos manuales. */
    .report-mock-check .light {
      animation: rc-light-up 0.5s var(--ease-out-strong) both;
      animation-timeline: view();
      animation-range: entry 15% entry 75%;
    }
    @keyframes rc-light-up {
      from { transform: scale(0.15); opacity: 0.25; }
      to   { transform: scale(1); opacity: 1; }
    }
    .report-mock-check span:first-child {
      animation: rc-check-label-in 0.5s var(--ease-out-strong) both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    @keyframes rc-check-label-in {
      from { opacity: 0; transform: translateX(-0.6rem); }
      to   { opacity: 1; transform: translateX(0); }
    }

    /* Historia paso a paso: el número "llega" con un pelín de rebote (no
       un simple fundido) -- es el latido de cada paso del cuento -- y el
       hilo se dibuja de arriba abajo según avanzas por toda la sección. */
    .story-num {
      animation: rc-story-num-in 0.6s both;
      animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
      animation-timeline: view();
      animation-range: entry 10% entry 65%;
    }
    @keyframes rc-story-num-in {
      from { opacity: 0; transform: scale(0.4) rotate(-12deg); }
      to   { opacity: 1; transform: scale(1) rotate(0deg); }
    }
  }
}

/* --------------------------------------------------------------------------
   32. Modal "Qué encontrarás en tu informe" (asistente paso a paso)
   -------------------------------------------------------------------------- */
.report-modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  width: min(560px, calc(100vw - var(--space-8)));
  /* "vh" en móvil se calcula contra la altura completa de la pantalla,
     no la que de verdad se ve con la barra del navegador (o de la app
     que esté embebiendo la web) visible — así el diálogo se centraba
     para una pantalla más alta de la real y se quedaba con la mayor
     parte por debajo de lo visible, dejando solo la cabecera a la
     vista. "svh" sí mide el hueco visible más pequeño posible, así que
     el diálogo cabe entero siempre; se deja "vh" antes como reserva
     para navegadores que no soporten "svh". */
  max-height: min(85vh, 680px);
  max-height: min(85svh, 680px);
  box-shadow: var(--shadow-lg);
  background: var(--paper);
  color: var(--ink);
}
/* El límite de alto y el scroll interno viven en "report-modal-inner",
   no en el propio <dialog>. Antes el <dialog> pasaba a "display:flex"
   al abrirse y era él quien repartía el espacio (flex + min-height: 0)
   entre cabecera/progreso/panel/nav -- funciona en Chromium, pero según
   un informe real desde iPhone, en ese móvil el diálogo se quedaba con
   solo la altura de la cabecera y el resto no se veía, algo que este
   entorno no tiene forma de reproducir para depurar directamente (aquí
   solo hay Chromium de escritorio). Para no depender de que "<dialog
   open> { display: flex }" reparta el alto correctamente en todos los
   navegadores, el propio <dialog> se deja con su comportamiento por
   defecto (ajustarse al contenido) y es "report-modal-inner" quien
   lleva su propio límite de alto explícito y quien de verdad reparte
   el espacio como columna flex -- ya no depende en absoluto de cómo el
   navegador trate el <dialog> en sí. Deliberadamente sin overflow
   hidden en el <dialog>: "report-modal-inner" ya se limita solo al
   mismo alto máximo y no hace falta, y overflow:hidden combinado con
   border-radius + box-shadow en un <dialog> es justo el tipo de mezcla
   que peor soportan algunos navegadores. */
.report-modal::backdrop {
  background: rgba(20,20,20,0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.report-modal-inner {
  display: flex;
  flex-direction: column;
  max-height: min(85vh, 680px);
  max-height: min(85svh, 680px);
  overflow-y: auto;
  padding: var(--space-8);
}
@media (max-width: 560px) {
  .report-modal-inner { padding: var(--space-6) var(--space-5); }
  /* El aire entre cabecera/progreso/nav ya no hace falta tan generoso
     como en escritorio: menos margen en cada uno, más sitio para el
     paso en sí sin que el popup se sienta tan alto en móvil. */
  .report-modal-head { margin-bottom: var(--space-4); }
  .report-modal-progress { margin-bottom: var(--space-4); }
  .report-modal-nav { margin-top: var(--space-4); padding-top: var(--space-4); }
}

.report-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-shrink: 0;
}
.report-modal-eyebrow {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted-light);
}
.report-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--line-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.report-modal-close:hover { border-color: var(--ink); background: rgba(20,20,20,0.05); }
.report-modal-close svg { width: 16px; height: 16px; }

.report-modal-progress { margin-bottom: var(--space-6); flex-shrink: 0; }
.report-modal-progress-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted-light);
  margin-bottom: var(--space-2);
}
.report-modal-progress-track {
  height: 4px;
  border-radius: 999px;
  background: var(--cream-2);
  overflow: hidden;
}
.report-modal-progress-fill {
  height: 100%;
  width: 9.09%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.25s var(--ease-out-strong);
}

.report-modal-panels { flex-grow: 1; min-height: 0; overflow-y: auto; }
.report-modal-panel { display: none; }
/* El número iba encima del titular (apilado), lo que en móvil hacía el
   paso muy alto y obligaba a bajar mucho para leer cada uno. Mismo
   patrón que .story-step en el resto de la web: número a la izquierda,
   titular + texto a la derecha, en vez de todo en una sola columna. */
.report-modal-panel.active {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas: "num beat" "num detail";
  column-gap: var(--space-4);
  align-items: start;
}
.report-modal-panel .story-beat { grid-area: beat; max-width: none; margin-bottom: var(--space-2); }
.report-modal-panel .story-detail { grid-area: detail; max-width: none; }
.report-modal-panel .report-modal-summary { grid-column: 1 / -1; }
/* Reutiliza .story-num (mismo círculo numerado que el resto de la web),
   pero sin el enganche a animation-timeline: view() — dentro de un
   <dialog> no hay relación de scroll real con la que engancharse, así
   que se mostraría atascado en su fotograma inicial (invisible). */
.report-modal-panel .story-num { grid-area: num; animation: none; opacity: 1; transform: none; margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .report-modal-panel.active { animation: rc-modal-step-in 0.32s var(--ease-out-strong) both; }
  @keyframes rc-modal-step-in {
    from { opacity: 0; transform: translateX(14px); }
    to { opacity: 1; transform: translateX(0); }
  }
}
@media (max-width: 640px) {
  .report-modal-panel.active { grid-template-columns: 44px 1fr; column-gap: var(--space-3); }
}

.report-modal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-light);
  flex-shrink: 0;
}
#report-modal-prev.is-hidden { visibility: hidden; }
/* "Reservar inspección" no cabe junto a "Anterior" en una fila a partir
   de aquí (el botón se salía de la tarjeta) — se apilan, con el botón
   principal arriba para que sea lo primero que se pulsa. */
@media (max-width: 480px) {
  .report-modal-nav { flex-direction: column-reverse; align-items: stretch; }
  .report-modal-nav .btn { width: 100%; }
  #report-modal-prev.is-hidden { display: none; }
}

/* Resumen final (panel de cierre, dentro del modal): mini-grid 2x2 de
   lo que incluye el informe como documento, distinto de los 11 pasos
   de "qué revisamos" que le preceden. */
.report-modal-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-4);
  margin-top: var(--space-6);
}
@media (max-width: 480px) {
  .report-modal-summary { grid-template-columns: minmax(0, 1fr); }
}
.report-modal-summary-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.report-modal-summary-item svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--accent-text); }
.report-modal-summary-item strong { display: block; font-size: 0.88rem; color: var(--ink); }
.report-modal-summary-item span { display: block; font-size: 0.8rem; color: var(--text-muted-light); margin-top: 2px; }

/* Botón grande que abre el asistente — sustituye al enlace pequeño de
   antes: toda la tarjeta es el botón, para que invite más a pincharla. */
.report-teaser {
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.report-teaser:hover, .report-teaser:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.report-teaser .icon-box {
  width: 84px;
  height: 84px;
  background: rgba(212,33,44,0.18);
  color: var(--accent-light);
}
.report-teaser .icon-box svg { width: 44px; height: 44px; }
@media (max-width: 720px) {
  .report-teaser .icon-box { width: 68px; height: 68px; }
  .report-teaser .icon-box svg { width: 34px; height: 34px; }
}

/* --------------------------------------------------------------------------
   33. Mapa interactivo de zonas de cobertura
   Sustituye a la antigua lista de "tags" por municipio: un mapa propio
   dibujado en SVG (sin depender de una cuenta ni claves de API de un
   proveedor externo, ni de peticiones de terceros que habría que
   declarar en la política de cookies) con buscador y lista sincronizada.
   Las posiciones de los municipios son ilustrativas -- orientadas y a
   escala relativa correctas (dirección y distancia aproximada real
   desde Madrid), no coordenadas GPS exactas.
   -------------------------------------------------------------------------- */
.coverage-map-wrap {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 900px) {
  .coverage-map-wrap { grid-template-columns: minmax(0, 1fr); }
}

.coverage-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.coverage-breadcrumb[hidden] { display: none; }
.coverage-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-text);
  cursor: pointer;
}
.coverage-back-btn:hover { text-decoration: underline; }

.coverage-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-5);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.coverage-search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20,20,20,0.08); }
.coverage-search svg { flex-shrink: 0; color: var(--text-muted-light); }
.coverage-search input {
  border: none;
  outline: none;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  width: 100%;
}
.coverage-search input::placeholder { color: var(--text-muted-light); }
/* Botón nativo de "limpiar" de type="search" en Chrome/Safari: se deja,
   pero re-coloreado para que no desentone con el resto del campo. */
.coverage-search input::-webkit-search-cancel-button { filter: opacity(0.6); }

.coverage-count {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.coverage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  background: var(--paper);
}
.coverage-list li + li { border-top: 1px solid var(--line-light); }
.coverage-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.coverage-item:hover, .coverage-item:focus-visible { background: var(--cream-2); }
.coverage-item.is-active { background: var(--red-100); color: var(--accent-dark); }
.coverage-item[hidden] { display: none; }
.coverage-item-zone {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted-light);
}
.coverage-item.is-active .coverage-item-zone { color: var(--accent-dark); }
.coverage-list-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--text-muted-light);
  font-size: 0.88rem;
}

.coverage-districts summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted-light);
  padding: var(--space-1) 0;
}
.coverage-districts summary:hover { color: var(--ink); }
.coverage-districts .zone-tags { margin-top: var(--space-3); }
.coverage-districts .zone-tag { font-size: 0.78rem; padding: var(--space-1) var(--space-3); font-weight: 600; }

.coverage-request-btn { width: 100%; justify-content: center; }

.coverage-map-canvas {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-light);
  overflow: hidden;
  background: linear-gradient(160deg, var(--cream) 0%, var(--cream-2) 100%);
  box-shadow: var(--shadow-md);
}

.coverage-map-expand {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--line-light);
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.coverage-map-expand:hover { border-color: var(--ink); background: var(--cream); }
.coverage-map-expand svg { width: 18px; height: 18px; }

/* Mapa ampliado en móvil: mismo patrón seguro que "report-modal" -- el
   <dialog> se queda con su comportamiento por defecto (no pasa a
   display:flex), y es "map-modal-inner" quien reparte alto/ancho como
   columna flex. El propio SVG activo (region o distritos, el que esté
   visible en ese momento) se REUBICA aquí dentro al abrir -- no se
   duplica -- así que conserva sus mismos listeners de clic/selección y
   no hay dos copias de 78+21 formas que mantener sincronizadas; al
   cerrar vuelve a su sitio en ".coverage-map-canvas". El acercamiento
   es con botones +/- que cambian el ancho del SVG dentro de un
   contenedor con overflow:auto -- desplazarse con el dedo para
   moverse ya es scroll nativo, sin gestos de pellizco hechos a mano
   (más frágiles de verificar en un iPhone real que no hay forma de
   probar aquí). */
.map-modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  width: min(96vw, 1100px);
  max-height: none;
  box-shadow: var(--shadow-lg);
  background: var(--paper);
  color: var(--ink);
}
.map-modal::backdrop {
  background: rgba(20,20,20,0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.map-modal-inner {
  display: flex;
  flex-direction: column;
  /* "max-height", no "height": el mapa fijado (100%) sigue solo el
     ancho disponible (ver mapApplyZoom en main.js), así que su alto
     es el que le toque según su proporción real -- con un mapa más
     bien cuadrado en un hueco alto de móvil, forzar una altura fija
     aquí dejaba un tercio del cuadro vacío debajo. Con max-height el
     cuadro se ajusta al contenido y solo llega al tope (con scroll
     interno, ya cubierto por ".map-modal-viewport") si además el
     usuario hace zoom o el mapa activo es el de distritos (más alto
     que ancho). */
  max-height: min(90vh, 900px);
  max-height: min(90svh, 900px);
}
.map-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line-light);
  flex-shrink: 0;
}
.map-modal-eyebrow {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.map-modal-zoom-controls { display: flex; align-items: center; gap: var(--space-2); }
.map-modal-zoom-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line-light);
  background: var(--cream);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.map-modal-zoom-btn:hover { border-color: var(--ink); background: var(--paper); }
.map-modal-zoom-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.map-modal-zoom-btn:disabled:hover { border-color: var(--line-light); background: var(--cream); }
.map-modal-zoom-reset { width: auto; padding: 0 var(--space-3); font-size: 0.76rem; font-weight: 700; }
.map-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--line-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: var(--space-2);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.map-modal-close:hover { border-color: var(--ink); background: rgba(20,20,20,0.05); }
.map-modal-close svg { width: 16px; height: 16px; }
.map-modal-viewport {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--cream-2);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
/* Centrado horizontal con "text-align" en vez de flex + align-items:
   centrar un hijo más grande que su contenedor con flexbox dentro de
   algo con overflow:auto puede dejar sin alcance -- según el
   navegador -- la parte que "sobra" hacia el lado de inicio (un fleco
   de flexbox+scroll conocido). "text-align:center" sobre un elemento
   inline-block no tiene ese problema: con scroll siempre se llega a
   cualquier parte del contenido, se salga por donde se salga. El
   tamaño real en cada nivel de zoom lo calcula JS en píxeles exactos
   a partir del viewBox del SVG activo, no CSS. */
.map-modal-stage { padding: var(--space-4); text-align: center; }
/* "max-width:100%" de la regla global "img, svg, video" (pensada para
   que nada se salga nunca de su recuadro) aquí es justo lo contrario
   de lo que hace falta: el ancho en píxeles que calcula mapApplyZoom
   en main.js debe poder superar el hueco visible a propósito según el
   nivel de zoom, y es ".map-modal-viewport" (overflow:auto) quien ya
   se encarga de que siga siendo alcanzable con scroll. */
.map-modal-stage svg { display: inline-block; vertical-align: top; max-width: none; }
.map-modal-hint {
  text-align: center;
  font-size: 0.76rem;
  color: var(--text-muted-light);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--line-light);
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .map-modal-eyebrow { display: none; }
  .map-modal-head { padding: var(--space-3) var(--space-4); }
  .map-modal-close { margin-left: 0; }
}
@media (max-width: 360px) {
  .map-modal-zoom-reset { padding: 0 var(--space-2); font-size: 0.7rem; }
}
.coverage-map-credit {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--paper);
  border-top: 1px solid var(--line-light);
  font-size: 0.72rem;
  color: var(--text-muted-light);
  text-align: right;
}
.coverage-map-credit a { color: inherit; }
.coverage-map-svg {
  display: block;
  width: 100%;
  height: auto;
}
/* [hidden] necesita ganar aquí explícitamente: .coverage-map-svg ya fija
   su propio "display", así que sin esto pesaría más que la regla nativa
   del navegador para [hidden] y el mapa oculto seguiría pintándose. */
.coverage-map-svg[hidden] { display: none; }
/* Cada vista tiene su propia proporción real (sale de proyectar sus
   coordenadas reales, no de un valor elegido a mano): la región entre
   Madrid y Guadalajara es más ancha que alta, los 21 distritos de
   Madrid capital son casi tan altos como anchos. */
#coverage-svg-region { aspect-ratio: 960 / 914; }
#coverage-svg-districts { aspect-ratio: 960 / 1126; }

.coverage-map-dot { fill: rgba(20,20,20,0.05); }

.coverage-pin { cursor: pointer; }
/* El área real de cada municipio: límites administrativos de verdad
   (Instituto Geográfico Nacional, vía es-atlas de martgnz, CC-BY 4.0),
   no una aproximación -- un script de construcción aparte (node +
   d3-geo) filtra estos 78 municipios del topojson de toda España,
   proyecta sus coordenadas y genera las rutas ya fijas de abajo; la web
   no descarga ningún dato geográfico ni calcula nada de esto en el
   navegador. El hueco entre el grupo de Madrid y el de Guadalajara es
   real: no hay cobertura continua entre ambos, así que el mapa no la
   finge. Al vivir dentro del mismo <g class="coverage-pin">, toda la
   forma del municipio -- no un punto suelto -- responde al ratón, a la
   vez que su etiqueta. */
.coverage-cell {
  fill: rgba(20,20,20,0.05);
  stroke: var(--paper);
  stroke-width: 1.5;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
.coverage-pin:hover .coverage-cell { fill: rgba(20,20,20,0.12); }
.coverage-pin.is-match .coverage-cell { fill: rgba(212,33,44,0.18); }
.coverage-pin.is-dimmed .coverage-cell { fill: rgba(20,20,20,0.02); }
.coverage-pin.is-active .coverage-cell { fill: rgba(212,33,44,0.26); }

.coverage-pin-label {
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: central;
  opacity: 0;
  transition: opacity 0.15s ease;
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
.coverage-pin:hover .coverage-pin-label { opacity: 1; }
.coverage-pin.is-match .coverage-pin-label { opacity: 1; fill: var(--accent-dark); }
.coverage-pin.is-dimmed .coverage-pin-label { opacity: 0; }
.coverage-pin.is-active .coverage-pin-label { opacity: 1; fill: var(--accent-dark); }

/* Nunca Anton aquí: es un display muy condensado pensado para titulares
   grandes, no para una etiqueta pequeña -- con el contorno blanco
   (paint-order: stroke, arriba) de por medio, las letras tan juntas
   acababan solapándose visualmente unas con otras. */
.coverage-anchor .coverage-pin-label { opacity: 1; font-size: 15px; font-weight: 800; }
.coverage-anchor.is-dimmed .coverage-pin-label { opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
  .coverage-pin-label { transition: none; }
}