@charset "UTF-8";
/* =============================================================================
   D'Agostino Motorsport — hoja de estilos única
   -----------------------------------------------------------------------------
   1. Tokens          5. Componentes
   2. Reset y base    6. Secciones
   3. Utilidades      7. Efectos
   4. Tipografía      8. Responsive
                      9. Movimiento reducido
   -----------------------------------------------------------------------------
   Contraste del proyecto, medido con tools/qa/contraste.mjs sobre los tres
   fondos reales (#0A0A0B, #121214, #1A1A1D):
     #F5F6F7  18.3 / 17.3 / 16.1  ✅ cualquier texto
     #9A9DA3   7.3 /  6.9 /  6.4  ✅ cualquier texto
     #808389   5.2 /  4.9 /  4.6  ✅ cualquier texto (justo por encima de AA)
     #FF0000   5.0 /  4.7 /  4.3  ✅ texto sobre los dos fondos oscuros.
                                     Sobre #1A1A1D, solo texto ≥24px.
     #4A4D52   2.3 /  2.2 /  2.1  ⛔ nunca para texto. Solo adornos.
     #FFFFFF sobre #EE0000 = 4.53  ✅ botones

   Por qué hay DOS rojos, y no uno:
   #FF0000 es el rojo de la marca, leído del archivo original del cliente. Es
   el que va en el logo, en los iconos y en el texto rojo, y ahí gana: sobre el
   carbón da 4,95 contra los 4,18 del rojo anterior, lo que sube por encima de
   AA a las etiquetas de 12 px que antes no llegaban.
   Pero con texto blanco encima se queda en 4,00, por debajo del 4,5 que exige
   AA, y los botones llevan blanco a 15-18 px. Así que las superficies que
   cargan texto blanco usan #EE0000: el mismo matiz —rojo puro, sin la
   desaturación del #E1211B anterior— un punto más oscuro, que es lo más claro
   que aguanta blanco a 4,5. Al compartir matiz se leen como el mismo rojo con
   sombra, no como dos rojos distintos.
   ========================================================================== */

/* =============================================================
   1. TOKENS
   ============================================================= */

:root {
  /* --- 1.1 Primitivos: los tres colores del logo, y nada más --- */
  --carbon-900: #0a0a0b;
  --carbon-800: #121214;
  --carbon-700: #1a1a1d;
  --carbon-600: #232327;
  --carbon-500: #2f2f34;

  --white-100: #f5f6f7;
  --white-000: #ffffff;
  --gray-400: #9a9da3;
  /* Subido de #6b6e74 a #808389: el anterior daba 3,87:1 sobre el fondo y
     3,66:1 sobre el elevado — por debajo del 4,5 que exige AA para texto
     normal, y este token se usa en etiquetas de 12 px. Medido, no estimado. */
  --gray-600: #808389;
  --gray-700: #4a4d52;

  /* El rojo de la marca, tal cual sale del logo original del cliente. */
  --red-500: #ff0000;
  /* Para superficies que cargan texto blanco. Ver la nota de contraste arriba. */
  --red-600: #ee0000;
  --red-700: #b3120d;
  --red-300: #ff4a44;

  --verde-500: #1f9d55; /* solo estados de éxito */
  --ambar-500: #d98216; /* solo estados de advertencia */

  /* --- 1.2 Semánticos --- */
  --bg: var(--carbon-900);
  --bg-raised: var(--carbon-800);
  --surface: var(--carbon-700);
  --surface-hover: var(--carbon-600);

  --text: var(--white-100);
  --text-muted: var(--gray-400);
  --text-dim: var(--gray-600);

  --accent: var(--red-500);
  --accent-fill: var(--red-600);
  --accent-hover: var(--red-300);
  --accent-deep: var(--red-700);
  --on-accent: var(--white-000);

  --border: rgba(245, 246, 247, 0.1);
  --border-strong: rgba(245, 246, 247, 0.2);
  --focus: var(--white-100);

  --exito: var(--verde-500);
  --aviso: var(--ambar-500);
  --peligro: var(--red-500);

  /* --- 1.3 Tipografía --- */
  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Escala fluida. El primer valor es el suelo real en 320 px. */
  --t-xs: 0.75rem;    /* 12px — etiquetas mono */
  --t-sm: 0.875rem;   /* 14px */
  --t-base: 1rem;     /* 16px — mínimo de cuerpo, nunca menos */
  --t-md: clamp(1.0625rem, 0.99rem + 0.36vw, 1.1875rem);
  --t-lg: clamp(1.25rem, 1.13rem + 0.6vw, 1.5rem);
  --t-xl: clamp(1.5rem, 1.28rem + 1.1vw, 2.125rem);
  --t-2xl: clamp(1.875rem, 1.45rem + 2.1vw, 3rem);
  --t-3xl: clamp(2.375rem, 1.6rem + 3.9vw, 4.5rem);
  --t-hero: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);

  /* --- 1.4 Espaciado (escala estándar 8→96, dial density 4/10) --- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --seccion-y: clamp(3.5rem, 2rem + 7vw, 7.5rem);
  --gutter: clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem);
  --ancho-max: 1280px;
  --ancho-texto: 68ch;

  /* --- 1.5 Radios, bordes, sombras --- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-full: 999px;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --sombra-3: 0 20px 60px rgba(0, 0, 0, 0.55);
  --halo-rojo: 0 18px 50px rgba(255, 0, 0, 0.22);

  /* --- 1.6 Movimiento --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-rapida: 160ms;
  --dur-media: 260ms;
  --dur-lenta: 420ms;

  /* --- 1.7 De componente --- */
  --btn-alto: 48px;          /* ≥44px táctil */
  --btn-primary-bg: var(--accent-fill);
  --btn-primary-fg: var(--on-accent);
  --btn-ghost-borde: var(--border-strong);
  --card-bg: var(--surface);
  --card-borde: var(--border);
  --input-bg: var(--carbon-800);
  --input-borde: var(--border-strong);
  --input-borde-focus: var(--accent);
  --nav-alto: 68px;
  --chip-bg: var(--carbon-600);
}

/* =============================================================
   2. RESET Y BASE
   ============================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  /* `clip` y no `hidden`: hidden rompe position:sticky. */
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-alto) + 12px);
}

body {
  background: #0a0a0b; /* respaldo sólido antes de la variable */
  background: var(--bg);
  color: #f5f6f7;
  color: var(--text);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
  min-height: 100vh;
}

/* `[hidden]` tiene que ganar SIEMPRE.
   La regla del navegador es `[hidden]{display:none}`, pero cualquier regla de
   autor con clase (por ejemplo `.chat-panel{display:flex}`) la vence por
   especificidad y el elemento se ve igual. Sin esto, el panel del asistente
   aparece abierto al cargar la página. */
[hidden] {
  display: none !important;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
  text-transform: uppercase;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

/* Foco visible SIEMPRE. Nunca se quita el outline. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* Navegadores sin :focus-visible caen a :focus — nunca quedan sin indicador. */
:focus:not(:focus-visible) {
  outline: none;
}

/* =============================================================
   3. UTILIDADES
   ============================================================= */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.salto-contenido {
  position: fixed;
  top: -120px;
  left: var(--s-4);
  z-index: 9999;
  padding: 0.7rem 1.2rem;
  background: var(--white-100);
  color: var(--carbon-900);
  font-weight: 600;
  border-radius: var(--r-md);
  transition: top var(--dur-media) var(--ease-out);
}
.salto-contenido:focus {
  top: var(--s-4);
}

.solo-lectores {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mono {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* El rojo como texto solo se permite en tamaños grandes (ver cabecera). */
.acento-grande {
  color: var(--accent);
  font-size: var(--t-xl);
}

/* =============================================================
   4. TIPOGRAFÍA
   ============================================================= */

.seccion-titulo { font-size: var(--t-3xl); max-width: 20ch; }
.seccion-cabecera-centro .seccion-titulo { margin-inline: auto; }
.seccion-num { color: var(--text-dim); margin-bottom: var(--s-3); }
.seccion-entrada {
  color: var(--text-muted);
  font-size: var(--t-md);
  max-width: 58ch;
  margin-top: var(--s-4);
}
.seccion-cabecera-centro .seccion-entrada { margin-inline: auto; }

.enlace {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur-rapida) var(--ease-out);
}
.enlace:hover { color: var(--accent-hover); }

/* =============================================================
   5. COMPONENTES
   ============================================================= */

/* --- 5.1 Botones --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: var(--btn-alto);
  padding: 0.7rem 1.4rem;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  text-align: center;
  transition:
    background-color var(--dur-rapida) var(--ease-out),
    border-color var(--dur-rapida) var(--ease-out),
    color var(--dur-rapida) var(--ease-out),
    transform var(--dur-rapida) var(--ease-out);
}
.btn-icono { width: 1.1em; height: 1.1em; flex: none; transition: transform var(--dur-media) var(--ease-out); }
.btn:hover .btn-icono { transform: translateX(3px); }

.btn-primario {
  background: #ee0000;
  background: var(--btn-primary-bg);
  color: #fff;
  color: var(--btn-primary-fg);
}
.btn-primario:hover { background: var(--accent-deep); transform: translateY(-2px); }
.btn-primario:active { transform: translateY(0); }

.btn-fantasma { border-color: var(--btn-ghost-borde); color: var(--text); }
.btn-fantasma:hover {
  border-color: var(--text);
  background: rgba(245, 246, 247, 0.06);
  transform: translateY(-2px);
}

.btn-sm { min-height: 40px; padding: 0.45rem 0.95rem; font-size: 0.9375rem; }
.btn-lg { min-height: 56px; padding: 0.9rem 1.9rem; font-size: 1.125rem; }

.chip {
  padding: 0.5rem 0.9rem;
  min-height: 40px;
  background: var(--chip-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  color: var(--text-muted);
  text-align: left;
  transition: border-color var(--dur-rapida) var(--ease-out), color var(--dur-rapida) var(--ease-out);
}
.chip:hover { border-color: var(--accent); color: var(--text); }

/* --- 5.2 Formularios ----------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--s-4); }
.campo label,
.campo-franjas legend,
.diag-legend {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}
.campo-opcional {
  font-family: var(--body);
  font-size: var(--t-sm);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dim);
}
.campo-ayuda { font-size: var(--t-sm); color: var(--text-muted); }

input[type="text"], input[type="tel"], input[type="email"],
input[type="number"], input[type="date"], input[type="password"],
select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.9rem;
  background: #121214;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-borde);
  border-radius: var(--r-md);
  transition: border-color var(--dur-rapida) var(--ease-out);
}
textarea { min-height: 96px; resize: vertical; }
/* El texto de ejemplo también se lee: --gray-700 daba 2,2:1, ilegible.
   No es contenido esencial (cada campo tiene su etiqueta), pero un texto que
   no se ve no ayuda a nadie. */
input::placeholder, textarea::placeholder { color: var(--gray-600); }
input:hover, select:hover, textarea:hover { border-color: var(--gray-600); }
input:focus, select:focus, textarea:focus { border-color: var(--input-borde-focus); }
/* El navegador pinta oscuro el icono del selector de fecha sobre fondo oscuro. */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.7);
  cursor: pointer;
}
select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gray-400) 50%),
    linear-gradient(135deg, var(--gray-400) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}

/* Error de campo: borde + icono + texto. Nunca solo color. */
.campo.tiene-error input,
.campo.tiene-error select,
.campo.tiene-error textarea { border-color: var(--peligro); }
.campo-error {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--t-sm);
  color: var(--red-300);
}
.campo-error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  flex: none;
  border-radius: 50%;
  background: var(--peligro);
  color: #fff;
  font-weight: 700;
  font-size: 0.8em;
}

.campos-grid { display: grid; gap: 0 var(--s-4); grid-template-columns: 1fr; }
.campo-ancho { grid-column: 1 / -1; }

.consentimiento, .radio, .sintoma {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.6rem 0;
  min-height: 44px;
  cursor: pointer;
  font-size: var(--t-sm);
  color: var(--text-muted);
  line-height: 1.5;
}
.consentimiento input, .radio input, .sintoma input {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
  accent-color: var(--accent);
  cursor: pointer;
}
.campo-consentimiento { margin-block: var(--s-4); }
.campo-franjas { border: 0; padding: 0; margin-bottom: var(--s-4); }
.campo-franjas legend { margin-bottom: 0.2rem; }

/* Trampa antibots: fuera de la vista y fuera del recorrido de foco. */
.trampa {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.aviso {
  padding: var(--s-4);
  border-radius: var(--r-md);
  border-left: 3px solid var(--accent);
  background: var(--bg-raised);
  font-size: var(--t-sm);
  color: var(--text-muted);
}
.aviso-info { border-left-color: var(--gray-600); }

/* =============================================================
   6. SECCIONES
   ============================================================= */

.seccion { padding-block: var(--seccion-y); position: relative; }
.seccion-alterna { background: var(--bg-raised); }
.seccion-cabecera { margin-bottom: var(--s-7); }
.seccion-cabecera-centro { text-align: center; }
.contenedor-angosto { max-width: 840px; }

/* --- 6.1 Cabecera --------------------------------------------------- */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-media) var(--ease-out),
    border-color var(--dur-media) var(--ease-out);
}
/* Degradado de respaldo: si el JS que añade `.esta-fija` no corriera, la barra
   sigue siendo legible sobre cualquier imagen de portada. */
.cabecera::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0.92) 0%, rgba(10, 10, 11, 0) 100%);
  pointer-events: none;
  transition: opacity var(--dur-media) var(--ease-out);
}
.cabecera.esta-fija, .cabecera-solida {
  background: rgba(10, 10, 11, 0.97);
  border-bottom-color: var(--border);
}
.cabecera.esta-fija::before, .cabecera-solida::before { opacity: 0; }
.cabecera-fila {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--nav-alto);
}
.cabecera-logo { display: block; flex: none; }
.logo-img { width: 152px; height: auto; }
.cabecera-acciones { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.cabecera-tel { display: none; font-family: var(--mono); letter-spacing: 0.04em; }

/* Menú móvil con <details>: funciona sin una línea de JavaScript. */
.nav-caja { order: 3; }
.nav-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.4rem 0.7rem;
  border-radius: var(--r-md);
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
}
.nav-boton::-webkit-details-marker { display: none; }
.nav-boton-barras { display: grid; gap: 4px; width: 20px; }
.nav-boton-barras i {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-media) var(--ease-out), opacity var(--dur-rapida) var(--ease-out);
}
.nav-caja[open] .nav-boton-barras i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-caja[open] .nav-boton-barras i:nth-child(2) { opacity: 0; }
.nav-caja[open] .nav-boton-barras i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* En móvil el menú está oculto y lo destapa el <details> hermano al abrirse.
   El selector de hermano general (~) es lo que permite tener el <nav> fuera
   del <details> conservando el comportamiento sin JavaScript. */
.nav {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: 0;
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-3);
  z-index: 20;
}
.nav-caja[open] ~ .nav { display: block; }
.nav-lista { list-style: none; padding: 0; margin: 0; display: grid; }
.nav-lista a {
  display: block;
  padding: 0.85rem 0.9rem;
  min-height: 44px;
  border-radius: var(--r-md);
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: background-color var(--dur-rapida) var(--ease-out), color var(--dur-rapida) var(--ease-out);
}
.nav-lista a:hover { background: var(--surface-hover); color: var(--accent-hover); }

/* --- 6.2 Portada ---------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--nav-alto) + var(--s-7));
  padding-bottom: var(--s-7);
  overflow: hidden;
}
.hero-fondo { position: absolute; inset: 0; z-index: 0; background: var(--bg); }
.hero-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* Velo en dos capas: vertical para la legibilidad y lateral para anclar la
   composición a la izquierda. El fondo sólido va debajo por si la imagen falla. */
.hero-velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 11, 0.78) 0%, rgba(10, 10, 11, 0.32) 36%, rgba(10, 10, 11, 0.97) 100%),
    /* El lateral se mide desde el CENTRO, no desde el borde de la ventana.
       Con paradas en porcentaje, el velo oscuro se quedaba pegado al borde
       izquierdo mientras el texto —que vive en el contenedor centrado— se iba
       hacia el medio: a partir de unos 2000 px, o con el zoom del navegador
       al 80 % o menos, el titular terminaba sobre la parte iluminada de la
       foto. Restando la mitad del contenedor al 50 % el velo acompaña al
       texto en cualquier ancho, incluidos monitores ultrapanorámicos. */
    linear-gradient(90deg,
      rgba(10, 10, 11, 0.92) 0,
      rgba(10, 10, 11, 0.92) max(0px, calc(50% - 620px)),
      rgba(10, 10, 11, 0.42) calc(50% + 60px),
      rgba(10, 10, 11, 0.15) calc(50% + 480px));
}
.hero-inner { position: relative; z-index: 1; width: 100%; }
.hero-kicker { color: var(--accent); margin-bottom: var(--s-4); }
.hero-titulo {
  font-size: var(--t-hero);
  /* En ch, porque la medida que importa es la de caracteres por línea, no los
     píxeles: así el titular mantiene su forma en cualquier tamaño de fuente. */
  max-width: 15ch;
  margin-bottom: var(--s-5);
}
.hero-titulo em { display: block; font-style: normal; color: var(--accent); }
.hero-bajada {
  font-size: var(--t-md);
  color: var(--text-muted);
  max-width: 52ch;
  margin-bottom: var(--s-5);
}
.hero-acciones { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-6); }
.hero-prueba {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--t-sm);
  color: var(--text-muted);
}
.hero-prueba strong { color: var(--text); font-weight: 600; }
.hero-estrellas { display: inline-flex; gap: 2px; }
.hero-estrellas svg { width: 16px; height: 16px; color: var(--accent); }

/* --- 6.3 Franja de prueba ------------------------------------------- */
.franja { border-block: 1px solid var(--border); background: var(--bg-raised); }
.franja-fila { display: grid; grid-template-columns: 1fr 1fr; }
.franja-item {
  padding: var(--s-5) var(--s-4);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.franja-item:nth-child(2n) { border-right: 0; }
.franja-item:nth-last-child(-n + 2) { border-bottom: 0; }
.franja-dato {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
}
.franja-estrella { color: var(--accent); }
.franja-etiqueta { color: var(--text-dim); margin-top: 0.35rem; }
/* Cuando el JS calcula "abierto/cerrado ahora", el horario pasa a segunda línea. */
.franja-sub {
  display: block;
  font-family: var(--body);
  font-size: var(--t-sm);
  font-weight: 400;
  text-transform: none;
  color: var(--text-muted);
  margin-top: 0.2rem;
}
.estado-apertura {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--r-full);
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--border-strong);
}
.estado-apertura::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.estado-apertura.esta-abierto { color: #4ade80; border-color: rgba(74, 222, 128, 0.4); }
.estado-apertura.esta-cerrado { color: var(--gray-400); }

/* --- 6.4 Servicios --------------------------------------------------- */
.servicios-grilla {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
.servicio {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--card-bg);
  border: 1px solid var(--card-borde);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-media) var(--ease-out), box-shadow var(--dur-media) var(--ease-out);
  /* El tilt lo aplica el JS sobre --tilt-x / --tilt-y. Sin JS queda plano. */
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
.servicio:hover { border-color: var(--border-strong); box-shadow: var(--sombra-2); }
/* Halo rojo siguiendo al cursor. Detrás del contenido y sin capturar eventos. */
.servicio::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    260px circle at var(--raton-x, 50%) var(--raton-y, 0%),
    rgba(255, 0, 0, 0.16), transparent 70%);
  transition: opacity var(--dur-media) var(--ease-out);
}
.servicio:hover::before { opacity: 1; }
.servicio > * { position: relative; }
.servicio-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--carbon-600);
  color: var(--accent);
}
.servicio-icono svg { width: 26px; height: 26px; }
.servicio-titulo { font-size: var(--t-lg); }
.servicio-texto { color: var(--text-muted); font-size: var(--t-sm); flex: 1; }
.servicio-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
  border-bottom: 2px solid var(--accent);
  transition: color var(--dur-rapida) var(--ease-out), gap var(--dur-rapida) var(--ease-out);
}
.servicio-cta:hover { color: var(--accent-hover); gap: 0.7rem; }
.servicio-cta .btn-icono { width: 1em; height: 1em; }

/* --- 6.5 Europeos ---------------------------------------------------- */
.europeos-grid { display: grid; gap: var(--s-6); align-items: center; }
.marcas {
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.marca {
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
/* La ficha que rompe la lista: mismo tamaño que las marcas, color de acento.
   Está para que quien lee sólo los títulos no se lleve la idea de que el
   taller atiende tres marcas y nada más. */
.marca-otras { border-color: var(--accent); color: var(--accent); }

.equipamiento {
  padding: var(--s-4);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.equipamiento-titulo { font-size: var(--t-base); letter-spacing: 0.06em; margin-bottom: 0.4rem; }
.equipamiento p { color: var(--text-muted); font-size: var(--t-sm); }
.europeos-figura { margin: 0; }
.europeos-figura img {
  width: 100%;
  border-radius: var(--r-lg);
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* La foto de la SW4 va en 4:3 y no en 3:2. Con 3:2 la camioneta quedaba a un
   3 % de tres bordes y se leía como que se salía del recuadro; el original no
   da para alejarse más, así que el aire se consigue con un marco más alto. */
#otras-marcas .europeos-figura img { aspect-ratio: 4 / 3; }

.europeos-figura figcaption { margin-top: var(--s-3); color: var(--text-dim); }

/* --- 6.6 Proceso ----------------------------------------------------- */
.proceso { list-style: none; padding: 0; margin: 0; display: grid; position: relative; }
.paso {
  position: relative;
  padding: var(--s-5) 0 var(--s-5) var(--s-5);
  border-left: 1px solid var(--border);
}
.paso::before {
  content: "";
  position: absolute;
  left: -5px;
  top: calc(var(--s-5) + 0.55rem);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gray-700);
  transition: background-color var(--dur-media) var(--ease-out), box-shadow var(--dur-media) var(--ease-out);
}
.paso.es-visible::before { background: var(--accent); box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.16); }
.paso-num { color: var(--accent); display: block; margin-bottom: 0.3rem; }
.paso-titulo { font-size: var(--t-lg); margin-bottom: 0.5rem; }
.paso-texto { color: var(--text-muted); font-size: var(--t-sm); max-width: 62ch; }
.paso-destacado {
  background: linear-gradient(90deg, rgba(255, 0, 0, 0.07), transparent 60%);
  border-left-color: var(--accent);
}

/* --- 6.7 Diagnóstico ------------------------------------------------- */
.diag {
  max-width: 760px;
  margin-inline: auto;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.diag-progreso { margin-bottom: var(--s-5); }
.diag-progreso-texto { color: var(--text-dim); margin-bottom: 0.5rem; }
.diag-barra {
  height: 4px;
  background: var(--carbon-600);
  border-radius: var(--r-full);
  overflow: hidden;
}
.diag-barra-relleno {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width var(--dur-lenta) var(--ease-out);
}
.diag-paso { border: 0; padding: 0; margin: 0; }
.diag-legend {
  font-size: var(--t-xl);
  padding: 0;
  margin-bottom: var(--s-4);
}
.sintomas {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-4);
  display: grid;
  gap: 0 var(--s-4);
  grid-template-columns: 1fr;
}
.sintoma {
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 0.5rem;
  transition: border-color var(--dur-rapida) var(--ease-out);
}
.sintoma:hover { border-color: var(--border-strong); }
.sintoma:has(input:checked) { border-color: var(--accent); color: var(--text); }

.subida { margin-bottom: var(--s-4); }
.subida input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.subida-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 120px;
  padding: var(--s-4);
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-lg);
  cursor: pointer;
  color: var(--text-muted);
  text-align: center;
  transition: border-color var(--dur-rapida) var(--ease-out), color var(--dur-rapida) var(--ease-out);
}
.subida-label:hover { border-color: var(--accent); color: var(--text); }
.subida input[type="file"]:focus-visible + .subida-estado,
.subida input[type="file"]:focus-visible ~ .subida-label { outline: 3px solid var(--focus); outline-offset: 3px; }
.subida-icono { font-size: 1.6rem; line-height: 1; color: var(--accent); }
.subida-estado { margin-top: 0.6rem; font-size: var(--t-sm); color: var(--text-muted); }
.subida-vista {
  margin-top: var(--s-3);
  max-height: 220px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}

.diag-navegacion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.diag-error, .turno-error {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border-left: 3px solid var(--peligro);
  background: rgba(255, 0, 0, 0.1);
  color: var(--text);
  font-size: var(--t-sm);
}

/* Resultado del diagnóstico */
.diag-resultado { display: grid; gap: var(--s-4); }
.diag-urgencia {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
}
.diag-urgencia-alta { border-color: var(--peligro); background: rgba(255, 0, 0, 0.12); }
.diag-urgencia-media { border-color: var(--aviso); background: rgba(217, 130, 22, 0.12); }
.diag-urgencia-baja { border-color: var(--exito); background: rgba(31, 157, 85, 0.12); }
.diag-urgencia-etiqueta {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 700;
  text-transform: uppercase;
}
.diag-urgencia-detalle { color: var(--text-muted); font-size: var(--t-sm); }
.diag-subtitulo { font-size: var(--t-lg); margin-top: var(--s-2); }
.diag-causas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.diag-causa {
  padding: var(--s-4);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.diag-causa-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: 0.4rem;
}
.diag-causa-titulo { font-size: var(--t-md); }
.diag-causa-prob { font-family: var(--mono); font-size: var(--t-xs); color: var(--accent); flex: none; }
.diag-causa-texto { color: var(--text-muted); font-size: var(--t-sm); }
.diag-revisaria { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.diag-revisaria li {
  display: flex;
  gap: 0.6rem;
  font-size: var(--t-sm);
  color: var(--text-muted);
}
.diag-revisaria li::before { content: "—"; color: var(--accent); flex: none; }

/* La advertencia obligatoria: imposible de pasar por alto. */
.diag-advertencia {
  padding: var(--s-4);
  border: 2px solid var(--aviso);
  border-radius: var(--r-md);
  background: rgba(217, 130, 22, 0.1);
  font-size: var(--t-sm);
  color: var(--text);
}
.diag-advertencia strong { display: block; margin-bottom: 0.3rem; font-size: var(--t-base); }

/* --- 6.8 Reseñas ----------------------------------------------------- */
.resenas-grilla {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
.resena {
  padding: var(--s-5);
  background: var(--card-bg);
  border: 1px solid var(--card-borde);
  border-radius: var(--r-lg);
  border-top: 3px solid var(--accent);
}
.resena-marca {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-dim);
  margin-bottom: var(--s-3);
}
.resena-estrella { width: 13px; height: 13px; color: var(--accent); flex: none; }
.resena-titulo { font-size: var(--t-lg); margin-bottom: 0.6rem; }
.resena-texto { color: var(--text-muted); font-size: var(--t-sm); }

/* --- 6.9 Preguntas frecuentes ---------------------------------------- */
.faq { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  min-height: 60px;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  transition: color var(--dur-rapida) var(--ease-out);
}
.faq-p::-webkit-details-marker { display: none; }
.faq-p:hover { color: var(--accent-hover); }
/* El signo: dos trazos, el vertical desaparece al abrir. */
.faq-p::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(currentColor, currentColor) center/16px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center/2px 16px no-repeat;
  transition: transform var(--dur-media) var(--ease-out);
}
.faq-item[open] .faq-p::after {
  background: linear-gradient(currentColor, currentColor) center/16px 2px no-repeat;
  transform: rotate(180deg);
}
.faq-item[open] .faq-p { color: var(--accent); }
.faq-r { padding-bottom: var(--s-5); }
.faq-r p { color: var(--text-muted); max-width: 68ch; }

/* --- 6.10 Turnos ----------------------------------------------------- */
.turno-form {
  max-width: 900px;
  margin-inline: auto;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.turno-grid { display: grid; gap: 0 var(--s-6); grid-template-columns: 1fr; }
.turno-acciones {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: flex-start;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.turno-nota { font-size: var(--t-sm); color: var(--text-muted); }
.turno-exito {
  max-width: 900px;
  margin-inline: auto;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--exito);
  border-radius: var(--r-lg);
  text-align: center;
}
.turno-exito h3 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
.turno-exito p { color: var(--text-muted); max-width: 56ch; margin-inline: auto; }
.turno-exito-icono {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--s-4);
  border-radius: 50%;
  background: rgba(31, 157, 85, 0.15);
  color: var(--exito);
  display: grid;
  place-items: center;
}
.turno-exito-icono svg { width: 28px; height: 28px; }

/* --- 6.11 Contacto ---------------------------------------------------- */
.contacto-grid { display: grid; gap: var(--s-6); align-items: start; }
.contacto-lista { font-style: normal; display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.contacto-item { display: grid; gap: 0.3rem; }
.contacto-etiqueta { color: var(--text-dim); }
.contacto-valor { color: var(--text); font-size: var(--t-md); }
.contacto-tel {
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--accent);
  transition: color var(--dur-rapida) var(--ease-out);
}
.contacto-tel:hover { color: var(--accent-hover); }
.contacto-icono { width: 18px; height: 18px; vertical-align: -3px; margin-right: 0.2rem; }

/* Fachada del mapa: no se pide nada a Google hasta que el usuario lo pide. */
.mapa { margin: 0; position: relative; border-radius: var(--r-lg); overflow: hidden; }
.mapa-fachada { display: block; position: relative; }
.mapa-fachada img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.55) contrast(1.05);
  transition: filter var(--dur-lenta) var(--ease-out);
}
.mapa-fachada:hover img { filter: saturate(0.9) contrast(1.05); }
.mapa-boton {
  position: absolute;
  left: 50%;
  bottom: var(--s-4);
  transform: translateX(-50%);
  display: grid;
  gap: 0.1rem;
  padding: 0.7rem 1.3rem;
  background: rgba(10, 10, 11, 0.95);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  text-align: center;
  white-space: nowrap;
}
.mapa-boton-texto {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mapa-boton-nota { color: var(--text-dim); }
.mapa iframe { width: 100%; aspect-ratio: 4 / 3; border: 0; display: block; }

/* --- 6.12 Pie ---------------------------------------------------------- */
.pie {
  padding-top: var(--s-8);
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.pie-grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
.pie-marca img { width: 190px; height: auto; }
.pie-promesa {
  margin-top: var(--s-3);
  color: var(--text-muted);
  font-size: var(--t-sm);
  max-width: 34ch;
}
.pie-titulo { color: var(--text-dim); margin-bottom: var(--s-3); font-weight: 500; }
.pie-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.2rem; }
.pie-nav a, .pie-contacto a {
  display: inline-block;
  padding: 0.35rem 0;
  min-height: 34px;
  color: var(--text-muted);
  transition: color var(--dur-rapida) var(--ease-out);
}
.pie-nav a:hover, .pie-contacto a:hover { color: var(--accent-hover); }
.pie-contacto p { color: var(--text-muted); font-size: var(--t-sm); margin-bottom: 0.4rem; }
.pie-horario { color: var(--text-dim) !important; margin-top: var(--s-3); }
.pie-base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-7);
  padding-block: var(--s-4);
  border-top: 1px solid var(--border);
  color: var(--text-dim);
}
.pie-simple { padding-top: 0; }
.pie-legal-nav { display: flex; gap: var(--s-4); }
.pie-legal-nav a {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  padding: 0.4rem 0;
  transition: color var(--dur-rapida) var(--ease-out);
}
.pie-legal-nav a:hover { color: var(--text); }
.pie-legal-nav a[aria-current="page"] { color: var(--accent); }

/* --- 6.13 Páginas legales ---------------------------------------------- */
.pagina-legal { padding-top: var(--nav-alto); }
.legal { padding-block: var(--s-8) var(--s-9); }
.legal-titulo { font-size: var(--t-2xl); margin-bottom: var(--s-2); }
.legal-fecha { color: var(--text-dim); margin-bottom: var(--s-6); }
.legal-entrada {
  font-size: var(--t-md);
  color: var(--text-muted);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-5);
}
.legal h2 {
  font-size: var(--t-xl);
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.legal h3 {
  font-size: var(--t-md);
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
  color: var(--text);
}
.legal p, .legal li { color: var(--text-muted); margin-bottom: var(--s-3); max-width: var(--ancho-texto); }
.legal strong { color: var(--text); font-weight: 600; }
.legal-lista { padding-left: 1.2rem; }
.legal-lista li { margin-bottom: var(--s-3); }
.legal code {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 0.15em 0.4em;
  background: var(--carbon-600);
  border-radius: var(--r-sm);
  color: var(--text);
}
.legal-volver { margin-top: var(--s-7); }
.destacado-aviso {
  padding: var(--s-4);
  border: 2px solid var(--aviso);
  border-radius: var(--r-md);
  background: rgba(217, 130, 22, 0.1);
  color: var(--text) !important;
}
.nota-pendiente {
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--aviso);
  background: var(--bg-raised);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-sm);
}
/* Las tablas no rompen el ancho de la página: hacen scroll dentro de su caja. */
.tabla-legal {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--s-5);
  font-size: var(--t-sm);
  display: block;
  overflow-x: auto;
}
.tabla-legal th, .tabla-legal td {
  padding: var(--s-3);
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  color: var(--text-muted);
  min-width: 150px;
}
.tabla-legal th { color: var(--text); font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; }

/* =============================================================
   7. EFECTOS
   ============================================================= */

/* --- La traza de telemetría: el efecto firma ---------------------------
   Solo en pantallas anchas: en móvil no hay margen lateral que sacrificar. */
.telemetria { display: none; }
@media (min-width: 1280px) {
  .telemetria {
    display: block;
    position: fixed;
    top: 0;
    left: 12px;
    z-index: 50;
    width: 40px;
    height: 100vh;
    height: 100svh;
    pointer-events: none;
  }
  .telemetria svg { width: 40px; height: 100%; }
  /* La línea base tiene que VERSE. Con 0.09 solo se distinguían los picos
     rojos sueltos, y eso no lee como un instrumento: lee como un fallo de
     dibujado. Con la base visible, los picos son lo que son: lecturas sobre
     una traza continua. */
  .telemetria-base {
    stroke: rgba(245, 246, 247, 0.17);
    stroke-width: 1;
    fill: none;
    stroke-linejoin: round;
  }
  .telemetria-viva {
    stroke: var(--accent);
    stroke-width: 1.6;
    stroke-linejoin: round;
    fill: none;
    stroke-linecap: round;
    /* El JS reescribe la `d` con los picos y anima el recorte según el scroll. */
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
  }
}

/* --- Revelado al entrar en pantalla ------------------------------------
   Un ÚNICO selector, `[data-revelar]`, declarado como atributo en el HTML.
   Antes era una lista de once clases repetida en tres bloques (base, sin-js y
   movimiento reducido). Mantener tres listas sincronizadas a mano es justo
   como se cuelan los fallos: la de movimiento reducido se quedó corta y las
   cabeceras de sección seguían desplazándose 20 px.

   Tres redes de seguridad superpuestas, porque este es el fallo que deja
   secciones invisibles para siempre:
     1. Sin JavaScript, `<noscript>` carga sin-js.css y nada queda oculto.
     2. Con JavaScript, el observador quita el velo al entrar en pantalla.
     3. Si `main.js` no llegara a cargar (404, caché rota, red caída), la
        animación CSS de abajo revela todo igual a los 7 s. */
[data-revelar] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  animation: revelarSeguridad 0.01s linear 7s forwards;
}
[data-revelar].es-visible { opacity: 1; transform: none; }

@keyframes revelarSeguridad {
  to { opacity: 1; transform: none; }
}


/* --- Asistente ---------------------------------------------------------- */
.chat { position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 120; }
.chat-lanzador {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.75rem 1.2rem;
  background: var(--accent-fill);
  color: #fff;
  border-radius: var(--r-full);
  box-shadow: var(--sombra-3), var(--halo-rojo);
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background-color var(--dur-rapida) var(--ease-out), transform var(--dur-rapida) var(--ease-out);
}
.chat-lanzador:hover { background: var(--accent-deep); transform: translateY(-2px); }
.chat-lanzador { transition: background-color var(--dur-rapida) var(--ease-out), transform var(--dur-media) var(--ease-out), opacity var(--dur-media) var(--ease-out); }
.chat-lanzador-icono { display: grid; place-items: center; width: 22px; height: 22px; flex: none; }
.chat-lanzador-icono svg { width: 22px; height: 22px; }
.chat.esta-abierto .chat-lanzador { display: none; }
/* Apartado mientras se completa un formulario: se va, no desaparece de golpe,
   y sigue estando ahí para quien lo busque. */
.chat.esta-apartado .chat-lanzador {
  opacity: 0.12;
  transform: translateY(6px) scale(0.9);
  pointer-events: none;
}
.chat.esta-apartado .chat-lanzador:focus-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.chat-panel {
  position: fixed;
  inset: auto var(--s-4) var(--s-4) auto;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - var(--s-5)));
  height: min(560px, calc(100svh - var(--s-6)));
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-3);
  overflow: hidden;
}
.chat-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
}
.chat-titulo { font-size: var(--t-lg); }
.chat-sub { color: var(--text-dim); margin-top: 0.15rem; }
.chat-cerrar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-md);
  color: var(--text-muted);
  transition: background-color var(--dur-rapida) var(--ease-out), color var(--dur-rapida) var(--ease-out);
}
.chat-cerrar:hover { background: var(--surface-hover); color: var(--text); }
.chat-cerrar svg { width: 20px; height: 20px; }

.chat-hilo {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  overscroll-behavior: contain;
}
.chat-msg { max-width: 88%; padding: 0.7rem 0.95rem; border-radius: var(--r-lg); font-size: var(--t-sm); line-height: 1.55; }
.chat-msg-bot { align-self: flex-start; background: var(--bg-raised); border: 1px solid var(--border); border-bottom-left-radius: var(--r-sm); }
.chat-msg-yo { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: var(--r-sm); }
.chat-msg p + p { margin-top: 0.5rem; }
.chat-msg a { text-decoration: underline; }
.chat-msg-error { border-color: var(--peligro); }
.chat-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.chat-accion {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--accent);
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
  transition: background-color var(--dur-rapida) var(--ease-out);
}
.chat-accion:hover { background: rgba(255, 0, 0, 0.16); }

/* Tres puntos mientras el modelo responde. */
.chat-pensando { display: inline-flex; gap: 4px; align-items: center; height: 1.2em; }
.chat-pensando i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  animation: chatPunto 1.2s var(--ease-soft) infinite;
}
.chat-pensando i:nth-child(2) { animation-delay: 0.15s; }
.chat-pensando i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatPunto {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat-sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 var(--s-4) var(--s-3);
}
.chat-form {
  display: flex;
  gap: 0.5rem;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
}
.chat-form input { min-height: 44px; }
.chat-enviar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  background: var(--accent-fill);
  color: #fff;
  border-radius: var(--r-md);
  transition: background-color var(--dur-rapida) var(--ease-out);
}
.chat-enviar:hover { background: var(--accent-deep); }
.chat-enviar:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-enviar svg { width: 20px; height: 20px; }
.chat-pie { padding: 0 var(--s-4) var(--s-3); color: var(--text-dim); font-size: 0.6875rem; text-align: center; }

/* =============================================================
   8. RESPONSIVE — móvil primero, cinco pasos fijos
   ============================================================= */

@media (min-width: 540px) {
  .campos-grid { grid-template-columns: 1fr 1fr; }
  .sintomas { grid-template-columns: 1fr 1fr; }
  .turno-acciones { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 720px) {
  .franja-fila { grid-template-columns: repeat(4, 1fr); }
  .franja-item { border-bottom: 0; }
  .franja-item:nth-child(2n) { border-right: 1px solid var(--border); }
  .franja-item:last-child { border-right: 0; }
  .servicios-grilla { grid-template-columns: repeat(2, 1fr); }
  .resenas-grilla { grid-template-columns: repeat(3, 1fr); }
  .turno-grid { grid-template-columns: 1fr 1fr; }
  .pie-grid { grid-template-columns: repeat(2, 1fr); }
  .paso { padding-left: var(--s-6); }
  .logo-img { width: 176px; }
}

@media (min-width: 960px) {
  .europeos-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  /* Composición asimétrica: la figura rompe la retícula hacia afuera. */
  .europeos-figura { margin-right: calc(var(--gutter) * -1); }
  /* «Todas las marcas» va espejada para que dos secciones seguidas con la
     misma retícula no se lean como la misma sección repetida. El orden del
     HTML deja el texto primero, que es lo correcto en móvil y para un lector
     de pantalla; sólo se invierte lo visual. */
  .europeos-grid-invertida .europeos-figura {
    order: -1;
    margin-right: 0;
    margin-left: calc(var(--gutter) * -1);
  }
  .contacto-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .pie-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
  .sintomas { grid-template-columns: repeat(3, 1fr); }
  .diag { padding: var(--s-6); }
  .turno-form { padding: var(--s-6); }

  /* En escritorio la navegación deja de ser un desplegable: el <details>
     desaparece y el <nav> pasa a estar siempre visible y siempre tabulable. */
  .nav-caja { display: none; }
  .nav {
    display: block;
    order: 2;
    flex: 1;
    position: static;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav-lista { display: flex; justify-content: center; gap: 0.15rem; }
  .nav-lista a {
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    letter-spacing: 0.04em;
  }
  .cabecera-tel { display: inline-flex; }
}

@media (min-width: 1280px) {
  .servicios-grilla { grid-template-columns: repeat(3, 1fr); }
  /* La primera tarjeta ocupa dos columnas: rompe la simetría a propósito
     y jerarquiza el servicio que define al taller. */
  .servicios-grilla > :first-child { grid-column: span 2; }
  .servicios-grilla > :first-child .servicio-titulo { font-size: var(--t-xl); }
  .servicios-grilla > :first-child .servicio-texto { font-size: var(--t-md); max-width: 46ch; }

  .proceso { padding-left: var(--s-6); }
  .paso { padding-block: var(--s-6); }
  .seccion, .franja { padding-left: 52px; }
  .cabecera-fila { padding-left: 52px; }
  .pie { padding-left: 52px; }
}

@media (min-width: 1600px) {
  .hero-titulo { max-width: 15ch; }
}

@media (max-width: 479px) {
  .logo-img { width: 128px; }
  .cabecera-fila { gap: var(--s-2); }
  .cabecera-acciones .btn-sm { padding: 0.4rem 0.6rem; font-size: 0.8125rem; }
}

/* --- Ajustes para pantallas muy estrechas (320 px) --------------------- */
@media (max-width: 359px) {
  :root { --gutter: 1rem; }
  .btn-lg { font-size: 1rem; padding: 0.8rem 1.2rem; }
  .hero-acciones { flex-direction: column; align-items: stretch; }
  .hero-acciones .btn { width: 100%; }
  .logo-img { width: 100px; }
  .chat-lanzador-texto { display: none; }
  .chat-lanzador { padding: 0.75rem; }
}

/* --- La cabecera en móvil ---------------------------------------------
   Medido: logo 152 + acciones 150 + botón de menú 92 + huecos = 439 px de
   contenido dentro de una fila que en un teléfono común mide 390. Se
   desbordaba por la derecha y la palabra «Menú» salía cortada en todos los
   anchos hasta 440 px.

   Lo primero que se va es esa palabra: el <summary> ya lleva
   aria-label="Abrir el menú de navegación", así que para un lector de
   pantalla no cambia nada, y tres barras horizontales no necesitan que se
   las explique. Se le fija min-width para que el área táctil siga siendo de
   44 px aunque el botón se quede sólo con el icono. */
@media (max-width: 639px) {
  .nav-boton-texto { display: none; }
  .nav-boton { gap: 0; padding: 0.4rem 0.5rem; min-width: 44px; justify-content: center; }
}
/* En móvil el asistente es una hoja deslizante a pantalla casi completa. */
@media (max-width: 639px) {
  /* El botón flotante del asistente se apoya abajo a la derecha y ahí caía
     justo encima de la línea de reseñas del hero. Se le reserva el hueco en
     lugar de dejar que tape contenido. */
  .hero { padding-bottom: calc(var(--s-7) + 56px); }

  .chat-panel {
    inset: auto 0 0 0;
    width: 100%;
    height: min(86svh, 640px);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: 0;
  }
}

/* =============================================================
   9. MOVIMIENTO REDUCIDO
   -------------------------------------------------------------
   Solo se desactiva lo intrusivo. Los hovers, transiciones de color,
   revelados y micro-interacciones siguen funcionando: son respuesta a
   una acción del usuario, no decoración.
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Bucles infinitos: fuera. */
  .chat-pensando i { animation: none; opacity: 0.7; }

  /* El revelado deja de desplazar: aparece y ya, sin recorrido vertical. */
  [data-revelar] { transform: none !important; transition-duration: 200ms; }

  /* La traza deja de animarse con el scroll y se muestra completa. */
  .telemetria-viva { stroke-dashoffset: 0 !important; transition: none !important; }

  /* Sin desplazamientos de botones ni tarjetas. */
  .btn:hover, .btn-primario:hover, .btn-fantasma:hover { transform: none; }
  .servicio { transform: none !important; }
}

/* En equipos de gama baja el JS pone `.pocos-recursos` y se apaga lo caro. */
.pocos-recursos .telemetria { display: none; }
.pocos-recursos .servicio { transform: none !important; }
.pocos-recursos .servicio::before { display: none; }
.pocos-recursos [data-revelar] { transition-duration: 250ms; }

/* --- Figura del método: banda cinemática entre la cabecera y la línea de
   tiempo. Da respiro a una sección larga de texto sin arriesgar el diseño. --- */
.metodo-figura {
  margin: 0 0 var(--s-6);
}
.metodo-figura img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 55%;
  border-radius: var(--r-lg);
}
.metodo-figura figcaption {
  margin-top: var(--s-3);
  color: var(--text-dim);
  text-align: right;
}
@media (min-width: 960px) {
  .metodo-figura img { aspect-ratio: 21 / 9; }
}

.pie-atribucion {
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pie-atribucion:hover { color: var(--text-muted); }