/* =========================================================
   Red Ford de la Comunidad de Madrid
   Sistema de diseño — hoja única compartida por todas las páginas
   ========================================================= */

:root{
  /* Color — valores extraídos de ford.es, no inventados.
     #00095B es el azul del óvalo y el color de texto dominante de Ford.
     #1700F4 es su azul de acción actual: botones, enlaces, bordes vivos.
     Ford es hoy una marca casi blanca: en su portada hay 219 fondos
     blancos frente a 4 azules. Esta paleta persigue esa proporción. */
  --ford-blue:   #00095B;   /* Azul del óvalo. Titulares y texto. */
  --electric:    #1700F4;   /* Azul de acción de Ford. Todo lo interactivo. */
  --ford-blue-2: #00142E;   /* Azul profundo de Ford, para fondos oscuros */
  /* El texto y el fondo llevan una pizca del azul de la familia. Antes
     eran gris puro (tono 0, saturación 0) mientras el resto de la paleta
     vive entre los tonos 226 y 246: un negro neutro junto a titulares
     azul marino se lee como ajeno a la marca. La diferencia no se nota
     mirando un color aislado, se nota en el conjunto. */
  --ink:         #0B0F1C;   /* Casi negro con un punto de azul — 19,1:1 */
  --ink-60:      #5B6070;   /* Texto secundario — 5,6:1 sobre papel */
  --paper:       #F1F2F7;   /* Fondo claro, mismo tono que los filetes */
  --white:       #FFFFFF;
  --line:        #CCCDDE;   /* Filetes — el periwinkle de Ford */
  --line-dark:   #2A3272;   /* Filetes sobre azul */
  --signal:      #FF7A00;   /* Ámbar intermitente — ahora uso mínimo */

  /* Tipografía */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Curvas y tiempos — las de CSS por defecto son demasiado flojas */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Ritmo */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --max:    1320px;
  --sp-section: clamp(4.5rem, 10vw, 9rem);

  /* Elevación. Una sola sombra en dos intensidades: azulada, no gris,
     para que la profundidad no ensucie el blanco. */
  --lift:   0 1px 2px rgba(0,9,91,.04), 0 12px 32px -12px rgba(0,9,91,.18);
  --lift-2: 0 2px 4px rgba(0,9,91,.05), 0 28px 60px -20px rgba(0,9,91,.28);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* Movimiento reducido = menos y más suave, no cero.
   Se conservan opacidad y color, que ayudan a entender; se quita el desplazamiento. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  .btn:hover,.modelo:hover,.acceso:hover{ transform:none !important; }
  .btn .flecha{ transition:none !important; }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.6;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; }

/* ---------- Accesibilidad ---------- */
/* Anillo de foco de dos tonos.
   El naranja anterior daba 2,61:1 sobre blanco y WCAG exige 3:1 para un
   indicador de foco: era un fallo real, no un detalle estético. El azul
   eléctrico da 8,96:1 sobre blanco, pero solo 2,06:1 sobre el pie oscuro.
   Ningún color único sirve para ambos fondos, así que se apilan dos: el
   halo blanco resuelve los fondos oscuros y el azul los claros. */
:focus-visible{
  outline:3px solid var(--electric);
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--white);
}
.saltar{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--white); color:var(--ford-blue);
  padding:.75rem 1.25rem; font-weight:700;
}
.saltar:focus{ left:0; }
.oculto-visual{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

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

/* ---------- Tipografía ---------- */
/* Filete corto antes de la etiqueta: ancla la sección sin añadir ruido */
.eyebrow{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--electric);
  margin:0 0 1.5rem;
  display:flex; align-items:center; gap:.75rem;
}
.eyebrow::before{
  content:""; width:28px; height:1px; background:currentColor; flex:0 0 auto;
}
.eyebrow--claro{ color:#7C8CFF; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  font-variation-settings:"wdth" 112, "wght" 780;
  line-height:.99;
  letter-spacing:-.028em;
  margin:0 0 1.25rem;
  text-wrap:balance;
  color:var(--ford-blue);
}
/* Tope a 4,25rem: por encima, «concesionarios.» no cabe en su columna
   y el titular se parte en seis líneas. Medido, no estimado. */
h1{ font-size:clamp(2.375rem, 1.4rem + 3.4vw, 4.25rem); }
h2{ font-size:clamp(2rem, 1.4rem + 2.6vw, 3.5rem); }
h3{ font-size:clamp(1.1875rem, 1.05rem + .7vw, 1.5rem);
    font-variation-settings:"wdth" 106,"wght" 700; letter-spacing:-.015em; }
h4{ font-size:1.0625rem; font-variation-settings:"wdth" 104,"wght" 700; }

.entradilla{
  font-size:clamp(1.0625rem, 1rem + .55vw, 1.4375rem);
  line-height:1.5;
  color:var(--ink-60);
  max-width:54ch;
  margin:0 0 2.5rem;
  letter-spacing:-.011em;
}
.entradilla--claro{ color:#9FA8CC; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 1.75rem;
  font-family:var(--display);
  font-variation-settings:"wdth" 110,"wght" 700;
  font-size:.9375rem;
  letter-spacing:.02em;
  text-decoration:none;
  border:2px solid transparent;
  border-radius:2px;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .16s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{ transform:translateY(-2px); }
}
/* Feedback de pulsación: confirma que la interfaz ha oído al usuario */
.btn:active{ transform:scale(.97); }
/* El primario pasa al azul de acción de Ford. Blanco sobre #1700F4
   da 8,96:1, muy por encima del 4,5:1 que exige AA. */
.btn--primario{ background:var(--electric); color:var(--white); border-color:var(--electric); }
.btn--primario:hover{ background:#0F00C4; border-color:#0F00C4;
                      box-shadow:0 12px 24px -10px rgba(23,0,244,.55); }
.btn--claro{ background:var(--white); color:var(--ford-blue); border-color:var(--white); }
.btn--claro:hover{ background:#E8EAFF; }
.btn--linea{ background:transparent; color:var(--ford-blue); border-color:var(--line); }
.btn--linea:hover{ background:var(--ford-blue); color:var(--white); border-color:var(--ford-blue); }
.btn--linea-clara{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.35); }
.btn--linea-clara:hover{ background:var(--white); color:var(--ford-blue); border-color:var(--white); }
.btn .flecha{ transition:transform .2s var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .btn:hover .flecha{ transform:translateX(4px); }
}

/* El enlace ya no lleva subrayado fijo: se abre el hueco entre texto
   y flecha al pasar. Menos ruido en reposo, misma señal al interactuar. */
.enlace-texto{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--electric);
  padding-block:.35rem;
  transition:gap .2s var(--ease-out), color .18s ease;
}
@media (hover:hover) and (pointer:fine){
  .enlace-texto:hover{ gap:.85rem; }
}

/* =========================================================
   Cabecera
   ========================================================= */
/* Cristal esmerilado: el contenido se intuye pasar por debajo en vez
   de desaparecer bajo una banda opaca. Con respaldo sólido para los
   navegadores sin backdrop-filter. */
.cabecera{
  position:sticky; top:0; z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .cabecera{
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(14px) saturate(1.6);
    -webkit-backdrop-filter:blur(14px) saturate(1.6);
  }
}
.cabecera__fila{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  min-height:88px;
}
/* REGLA FORD: el óvalo nunca se cubre ni se solapa. Reserva de aire propia. */
.marca{ display:block; padding-block:14px; flex:0 0 auto; }
.marca img{ height:46px; width:auto; }

.nav{ display:flex; align-items:center; gap:2rem; }
.nav__lista{
  display:flex; align-items:center; gap:1.75rem;
  list-style:none; margin:0; padding:0;
}
/* Subrayado que crece desde la izquierda, no un borde que aparece de golpe.
   El movimiento tiene dirección; el cambio de estado, no. */
.nav__lista a{
  position:relative;
  text-decoration:none;
  font-size:.9375rem;
  font-variation-settings:"wdth" 100,"wght" 520;
  padding-block:.5rem;
  transition:color .2s ease;
  white-space:nowrap;
}
.nav__lista a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--electric);
  transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .nav__lista a:hover{ color:var(--electric); }
  .nav__lista a:hover::after{ transform:scaleX(1); }
}
.nav__lista a[aria-current="page"]{ color:var(--ford-blue); }
.nav__lista a[aria-current="page"]::after{ transform:scaleX(1); background:var(--ford-blue); }

.correo-cabecera{
  display:inline-flex; align-items:center;
  font-family:var(--mono); font-size:.8125rem;
  letter-spacing:-.01em;
  text-decoration:none; color:var(--ford-blue);
  white-space:nowrap;
  padding-bottom:.2rem;
  border-bottom:2px solid transparent;
  transition:border-color .18s ease, color .18s ease;
}
.correo-cabecera:hover{ color:var(--electric); border-bottom-color:var(--electric); }
/* Entre 900 y 1200 px no cabe junto al menú: se recupera en el pie y en la barra fija */
@media (min-width:901px) and (max-width:1199px){ .correo-cabecera{ display:none; } }

.hamburguesa{
  display:none;
  background:none; border:1px solid var(--line);
  border-radius:2px; padding:.6rem .75rem; cursor:pointer;
}
.hamburguesa span{
  display:block; width:20px; height:2px; background:var(--ink); margin:4px 0;
  transition:transform .2s ease, opacity .2s ease;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 900px){
  .hamburguesa{ display:block; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--white);
    border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0;
    padding:0 var(--gutter) 1.5rem;
    display:none;
  }
  .nav[data-abierto="true"]{ display:flex; }
  .nav__lista{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__lista a{
    display:block; padding:1rem 0;
    border-bottom:1px solid var(--line);
    font-size:1.0625rem;
  }
  .nav__lista a:hover{ border-color:var(--electric); }
  /* En el menú desplegable el correo va a dos líneas si hace falta:
     35 caracteres en monoespaciada no caben en pantallas estrechas. */
  .correo-cabecera{
    padding-top:1.25rem;
    font-size:.875rem;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.5;
    align-items:flex-start;
  }
}

/* =========================================================
   Hero — diagrama de la red
   ========================================================= */
/* Hero blanco, no azul. Ford usa hoy el blanco como fondo dominante
   y reserva el azul para el acento: es lo que más moderniza la página
   y además la acerca al lenguaje de marca, no la aleja. */
.hero{
  position:relative;
  background:var(--white);
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
/* Halo azul muy tenue: da profundidad sin ensuciar el blanco */
.hero::before{
  content:""; position:absolute;
  top:-30%; right:-12%; width:70vw; height:130%;
  background:radial-gradient(ellipse at center,
              rgba(23,0,244,.07) 0%, rgba(23,0,244,.02) 42%, transparent 70%);
  pointer-events:none;
}
.hero__grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2.5rem,5vw,5rem);
  align-items:center;
  padding-block:clamp(4rem,9vw,8rem);
}
.hero__texto h1{ color:var(--ford-blue); }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:1rem; }

/* Las páginas interiores mantienen la cabecera azul: da jerarquía
   frente a la portada y separa «estás dentro» de «estás en la entrada». */
.hero--interior{ background:var(--ford-blue); border-bottom:0; }
.hero--interior::before{ display:none; }
.hero--interior h1{ color:var(--white); font-size:clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); }
.hero--interior .entradilla{ color:#C3CAEC; }

/* Diagrama */
.diagrama{ position:relative; }
.diagrama svg{ width:100%; height:auto; display:block; }
/* El diagrama vive ahora sobre blanco: anillos en filete claro y
   puntos huecos con borde eléctrico, que se rellenan al activarse. */
.anillo{ fill:none; stroke:var(--line); stroke-width:1; }
.anillo--exterior{ stroke-dasharray:3 7; stroke:var(--line); stroke-width:1; }
/* #9AA0BC daba 2,58:1 sobre blanco y esto es texto de 11px.
   #6E7498 da 4,55:1. Medido, no estimado. */
.anillo-etiqueta{
  font-family:var(--mono); font-size:11px; fill:#6E7498; letter-spacing:.12em;
}
.centro{ fill:var(--ford-blue); }
.centro-etiqueta{ font-family:var(--mono); font-size:11px; fill:#6E7498; letter-spacing:.14em; }

.punto{ cursor:pointer; }
.punto circle{
  fill:var(--white); stroke:var(--electric); stroke-width:2;
  transition:fill .22s var(--ease-out), stroke .22s ease, r .22s var(--ease-out);
}
.punto text{
  font-family:var(--mono); font-size:11px; fill:var(--ink-60);
  transition:fill .22s ease;
  pointer-events:none;
}
.punto.esta-activo circle{ fill:var(--electric); r:8; }
.punto.esta-activo text{ fill:var(--ford-blue); font-weight:500; }
/* Al atenuar, el peso se lo quita el círculo, no el texto: bajar el
   texto a un gris claro lo dejaba en 1,98:1, ilegible. #6E7498 da
   4,55:1 y sigue siendo un escalón claro frente al activo (17,64:1). */
.punto.esta-atenuado circle{ stroke:var(--line); fill:var(--white); }
.punto.esta-atenuado text{ fill:#6E7498; }

.leyenda{
  list-style:none; margin:2rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.leyenda button{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink-60);
  border-radius:2px;
  padding:.5rem .875rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .18s ease, color .18s ease, background-color .18s ease;
}
.leyenda button:hover,
.leyenda button[aria-pressed="true"]{
  border-color:var(--electric); color:var(--electric); background:rgba(23,0,244,.05);
}
.diagrama__pie{
  font-family:var(--mono); font-size:.75rem; color:#9AA0BC;
  margin:1rem 0 0; letter-spacing:.05em;
}

@media (max-width: 900px){
  .hero__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .diagrama{ order:2; }
}

/* =========================================================
   Secciones
   ========================================================= */
.seccion{ padding-block:var(--sp-section); }
.seccion--papel{ background:var(--paper); }
.seccion--blanca{ background:var(--white); }
.seccion--azul{ background:var(--ford-blue); color:var(--white); }
.seccion--azul h2{ color:var(--white); }

.seccion__cabecera{ max-width:58ch; margin-bottom:clamp(2.25rem,4.5vw,3.5rem); }

/* Filete de sección con etiqueta */
.filete{
  display:flex; align-items:baseline; gap:1.25rem;
  border-top:1px solid var(--line);
  padding-top:1rem;
  margin-bottom:2.5rem;
}
.seccion--azul .filete{ border-color:var(--line-dark); }

/* ---------- Servicios ---------- */
.servicios{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:1px;
}
.servicio{
  background:var(--white);
  box-shadow:0 0 0 1px var(--line);
  padding:clamp(1.75rem,3vw,2.5rem);
}
.servicio__etq{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.12em;
  color:var(--electric); display:block; margin-bottom:1.25rem;
}
.servicio h3{ margin-bottom:.6rem; }
.servicio p{ margin:0; color:var(--ink-60); font-size:.9375rem; }

/* ---------- Concesionarios ---------- */
.concesionarios{ display:grid; gap:1.5rem; }

.concesionario{
  scroll-margin-top:110px;
  background:var(--white);
  border:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(220px,300px) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3rem);
  padding:clamp(1.75rem,3vw,2.5rem);
  transition:border-color .2s ease;
}
@media (hover:hover) and (pointer:fine){
  .concesionario:hover{ border-color:var(--ford-blue); }
}
.concesionario__id .eyebrow{ margin-bottom:.5rem; }
.concesionario__id h3{ margin-bottom:.75rem; }
.concesionario__zona{
  color:var(--ink-60); font-size:.9375rem; margin:0 0 1.5rem;
}
.concesionario__puntos{
  list-style:none; margin:0 0 1.5rem; padding:0;
  display:grid; gap:.875rem;
}
.concesionario__puntos li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:.875rem;
  align-items:baseline;
  padding-bottom:.875rem;
  border-bottom:1px solid var(--paper);
  font-size:.9375rem;
}
.concesionario__puntos li:last-child{ border-bottom:0; padding-bottom:0; }
.punto-cp{
  font-family:var(--mono); font-size:.8125rem; color:var(--electric);
  letter-spacing:.04em;
}
.punto-dir strong{
  display:block;
  font-variation-settings:"wdth" 105,"wght" 650;
}
.punto-dir span{ color:var(--ink-60); font-size:.875rem; }
.concesionario__acciones{ display:flex; flex-wrap:wrap; gap:.75rem; }

@media (max-width: 760px){
  .concesionario{ grid-template-columns:1fr; }
}

/* ---------- Bloque destacado (Plan Auto+) ---------- */
.destacado{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
@media (max-width: 860px){ .destacado{ grid-template-columns:1fr; } }

.cifras{
  display:grid; gap:1px; background:var(--line-dark);
  border:1px solid var(--line-dark);
}
.cifra{ background:var(--ford-blue); padding:1.5rem clamp(1.25rem,2.5vw,2rem); }
.cifra__valor{
  font-family:var(--display);
  font-variation-settings:"wdth" 120,"wght" 800;
  font-size:clamp(2rem,1.4rem + 2.4vw,3rem);
  line-height:1;
  display:block;
}
.cifra__etq{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.1em;
  color:#9AA5D8; text-transform:uppercase; margin-top:.6rem; display:block;
}

/* ---------- Aviso legal en línea ---------- */
.nota-legal{
  font-size:.8125rem; line-height:1.65; color:var(--ink-60);
  border-left:2px solid var(--line); padding-left:1.25rem;
  max-width:75ch; margin-top:2.5rem;
}
.seccion--azul .nota-legal{ color:#9AA5D8; border-color:var(--line-dark); }

/* ---------- Formulario ---------- */
.formulario{ display:grid; gap:1.5rem; max-width:620px; }
.campo{ display:grid; gap:.5rem; }
.campo label{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-60);
}
.campo input,.campo select,.campo textarea{
  font-family:var(--body); font-size:1rem;
  padding:.875rem 1rem;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--white);
  color:var(--ink);
  width:100%;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{ border-color:var(--ford-blue); }
.campo textarea{ min-height:140px; resize:vertical; }
.campo--check{
  grid-template-columns:auto minmax(0,1fr);
  align-items:start; gap:.75rem;
}
.campo--check input{ width:auto; margin-top:.25rem; }
.campo--check label{
  font-family:var(--body); text-transform:none; letter-spacing:0;
  font-size:.875rem; color:var(--ink-60); line-height:1.5;
}
.error-campo{ color:#B3261E; font-size:.8125rem; min-height:1.2em; }

/* ---------- Datos de contacto ---------- */
.datos{ list-style:none; margin:0; padding:0; display:grid; gap:1.75rem; }
.datos dt,.datos .dato__etq{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-60); margin-bottom:.4rem;
}
.datos a{ text-decoration:none; border-bottom:1px solid var(--line); }
.datos a:hover{ border-color:var(--electric); }
.dato__valor{
  font-family:var(--display);
  font-variation-settings:"wdth" 108,"wght" 700;
  font-size:1.375rem;
  line-height:1.35;
}

/* =========================================================
   Pie
   ========================================================= */
.pie{ background:var(--ford-blue-2); color:#8E96B4; padding-block:clamp(4rem,7vw,6rem) 2.5rem; }
.pie__grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(2, minmax(0,1fr));
  gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:3.5rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
@media (max-width: 780px){ .pie__grid{ grid-template-columns:1fr; } }

/* REGLA FORD: el óvalo va primero y nunca queda por debajo de otro elemento. */
.pie__marca img{ height:52px; width:auto; margin-bottom:1.5rem; }
.pie p{ font-size:.9375rem; margin:0 0 1rem; max-width:44ch; }
.pie h4{ color:var(--white); margin-bottom:1.5rem; font-size:.6875rem;
  font-family:var(--mono); font-variation-settings:normal;
  letter-spacing:.13em; text-transform:uppercase; font-weight:500; }
.pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:.875rem; }
.pie a{ color:#8E96B4; text-decoration:none; font-size:.9375rem; transition:color .2s ease; }
.pie a:hover{ color:var(--white); }

.redes{ display:flex; gap:.75rem; margin-top:1.75rem; }
.redes a{
  display:grid; place-items:center;
  width:42px; height:42px;
  border:1px solid rgba(255,255,255,.16); border-radius:2px;
  transition:border-color .18s ease, background-color .18s ease;
}
.redes a:hover{ border-color:var(--white); background:rgba(255,255,255,.06); }
.redes svg{ width:19px; height:19px; fill:currentColor; }

.pie__base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-top:2.5rem;
  /* #6C7395 daba 3,97:1 sobre #00142E y esto es texto de 11px:
     necesita 4,5:1. #7F87AD da 5,24:1. Medido, no estimado. */
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.06em; color:#7F87AD;
}
.pie__legal{ display:flex; flex-wrap:wrap; gap:1.5rem; }

/* ---------- Aviso de cookies ---------- */
.cookies{
  position:fixed; inset:auto 0 0 0; z-index:200;
  background:var(--white);
  border-top:2px solid var(--ford-blue);
  padding:1.5rem var(--gutter);
  box-shadow:0 -8px 32px rgba(11,15,28,.16);
}
.cookies[hidden]{ display:none; }
.cookies__inner{
  max-width:var(--max); margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.25rem;
}
.cookies p{ margin:0; font-size:.875rem; max-width:62ch; }
.cookies__acciones{ display:flex; flex-wrap:wrap; gap:.75rem; }
.cookies .btn{ padding:.75rem 1.25rem; font-size:.875rem; }

/* ---------- Páginas de texto legal ---------- */
.texto-legal{ max-width:70ch; }
.texto-legal h2{ font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem); margin-top:3rem; }
.texto-legal h2:first-of-type{ margin-top:0; }
.texto-legal p,.texto-legal li{ font-size:1rem; }
.texto-legal ul{ padding-left:1.25rem; }

/* ---------- Diagrama en pantallas pequeñas ----------
   Las etiquetas de cada punto quedarían por debajo de 7 px reales.
   Se ocultan: los anillos, los puntos y la leyenda siguen contando
   la misma historia, y el listado completo está más abajo. */
@media (max-width: 700px){
  .punto text{ display:none; }
  .anillo-etiqueta{ font-size:20px; }
  .centro-etiqueta{ font-size:20px; }
  .punto circle{ r:8; }
  .punto.esta-activo circle{ r:12; }
}

/* =========================================================
   v2 — Componentes añadidos tras el análisis del sector
   ========================================================= */

/* ---------- Barra fija de acciones (móvil) ----------
   Patrón estándar en webs de concesionario: llamar, taller
   y contacto siempre a un toque. */
.acciones-fijas{ display:none; }
@media (max-width: 860px){
  .acciones-fijas{
    position:fixed; inset:auto 0 0 0; z-index:150;
    display:grid; grid-template-columns:repeat(3,1fr);
    background:var(--ford-blue);
    border-top:1px solid var(--line-dark);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .acciones-fijas a{
    display:grid; place-items:center; gap:.25rem;
    padding:.7rem .5rem;
    color:var(--white); text-decoration:none;
    font-family:var(--mono); font-size:.6875rem;
    letter-spacing:.06em; text-transform:uppercase;
    border-right:1px solid var(--line-dark);
  }
  .acciones-fijas a:last-child{ border-right:0; }
  .acciones-fijas a:active{ background:#001585; }
  .acciones-fijas svg{ width:20px; height:20px; fill:currentColor; }
  /* Sitio para la barra al final de la página */
  body{ padding-bottom:78px; }
  .cookies{ bottom:78px; }
}

/* ---------- Rejilla de modelos ---------- */
.modelos{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(232px,1fr));
  gap:1.5rem;
}
.modelo{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .3s ease, transform .3s var(--ease-out),
             box-shadow .3s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .modelo:hover{ border-color:transparent; transform:translateY(-6px);
                 box-shadow:var(--lift-2); }
  .modelo:hover .modelo__img::after{ opacity:.16; transform:scale(1.04); }
  .modelo:hover .modelo__img::before{ transform:scaleX(1); }
}
.modelo:active{ transform:scale(.99); }

/* Hueco de imagen 16:10.
   Mientras no haya foto, en vez de un gris que parece un error, un panel
   azul profundo con el nombre del modelo en fantasma: parece una decisión
   de diseño. Cuando llegue el JPG, la foto lo tapa y el panel desaparece
   solo — no hay que tocar nada. */
.modelo__img{
  position:relative;
  aspect-ratio:16/10;
  background:linear-gradient(150deg,#0B1547 0%,var(--ford-blue) 55%,#00061F 100%);
  overflow:hidden;
  /* Las fotos de Ford son renders de estudio sobre blanco puro. Sin este
     filete, la foto blanca y el cuerpo blanco de la tarjeta se funden y
     la tarjeta pierde su estructura. */
  border-bottom:1px solid var(--line);
}
/* Las fotos ya llegan a 1200x750, exactamente la proporcion del hueco:
   `cover` no recorta nada, solo asegura que un archivo mal medido no
   deforme la tarjeta. */
.modelo__img img{ width:100%; height:100%; object-fit:cover; }
.modelo__img::after{
  content:attr(data-modelo);
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--display);
  font-variation-settings:"wdth" 120,"wght" 800;
  font-size:clamp(1.375rem,1.1rem + 1vw,2rem);
  line-height:.95; color:var(--white); opacity:.12;
  letter-spacing:-.03em; text-align:center; padding:1.25rem;
  transition:opacity .3s var(--ease-out), transform .5s var(--ease-out);
  pointer-events:none;
}
.modelo__img:has(img)::after{ display:none; }
/* Filete eléctrico inferior: firma de marca al pasar por la tarjeta */
.modelo__img::before{
  content:""; position:absolute; inset:auto 0 0 0; height:2px; z-index:2;
  background:var(--electric);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-out);
}

.modelo__cuerpo{ padding:1.625rem 1.5rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.modelo__etq{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--electric); margin:0 0 .875rem;
}
.modelo h3{ font-size:1.25rem; margin:0 0 .5rem; }
.modelo p{ margin:0 0 1.5rem; color:var(--ink-60); font-size:.9375rem; flex:1; line-height:1.55; }

/* ---------- Banda de imagen a ancho completo ---------- */
.banda{
  position:relative;
  min-height:clamp(280px,38vw,460px);
  background:linear-gradient(135deg,var(--ford-blue) 0%,#0A1568 100%);
  display:grid; place-items:center;
  overflow:hidden;
}
.banda img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.banda__velo{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(6,16,67,.88) 0%, rgba(6,16,67,.45) 65%, rgba(6,16,67,.2) 100%);
}
.banda__texto{
  position:relative; z-index:2;
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-block:clamp(3rem,7vw,4.5rem);
  color:var(--white);
}
.banda__texto h2{ color:var(--white); max-width:18ch; }
.banda__texto p{ max-width:46ch; color:#C3CAEC; }

/* ---------- Banda de confianza ---------- */
.confianza{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;
}
.confianza > div{
  background:var(--white);
  box-shadow:0 0 0 1px var(--line);
  padding:1.75rem clamp(1.25rem,2.5vw,2rem);
}
.confianza strong{
  display:block;
  font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);
  line-height:1; color:var(--ford-blue);
}
.confianza span{
  display:block; margin-top:.6rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-60); line-height:1.5;
}

/* ---------- Accesos rápidos ---------- */
.accesos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.25rem;
}
.acceso{
  background:var(--white);
  border:1px solid var(--line);
  border-left:3px solid var(--electric);
  border-radius:3px;
  padding:1.75rem;
  text-decoration:none;
  display:block;
  transition:border-color .25s ease, transform .25s var(--ease-out),
             box-shadow .25s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .acceso:hover{ transform:translateY(-4px); box-shadow:var(--lift);
                 border-color:var(--line); border-left-color:var(--electric); }
  .acceso:hover .acceso__flecha{ color:var(--electric); }
}
.acceso:active{ transform:scale(.99); }
.acceso h3{ margin:0 0 .5rem; font-size:1.125rem; }
.acceso p{ margin:0; color:var(--ink-60); font-size:.9375rem; }
.acceso__flecha{
  display:inline-block; margin-top:1rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ford-blue);
  transition:color .18s ease;
}

/* ---------- Lista de enlaces por concesionario ---------- */
/* Filas editoriales en vez de cajas: filete arriba y abajo, sin fondo.
   Al pasar, la barra crece desde abajo y la fila se desplaza — el
   movimiento tiene dirección, que es lo que lo hace legible. */
.ruta{ display:grid; gap:0; border-top:1px solid var(--line); }
.ruta a{
  position:relative;
  border-bottom:1px solid var(--line);
  padding:1.75rem 1.5rem 1.75rem 0;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:1.5rem; align-items:center;
  text-decoration:none;
  transition:padding-left .32s var(--ease-out), background-color .25s ease;
}
.ruta a::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:var(--electric);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .32s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .ruta a:hover{ padding-left:1.75rem; background:rgba(23,0,244,.022); }
  .ruta a:hover::before{ transform:scaleY(1); }
  .ruta a:hover em{ color:var(--electric); }
}
.ruta a:active{ background:rgba(23,0,244,.05); }
.ruta__id strong{
  display:block;
  font-family:var(--display);
  font-variation-settings:"wdth" 108,"wght" 700;
  font-size:clamp(1.125rem,1rem + .4vw,1.375rem);
  letter-spacing:-.02em; color:var(--ford-blue);
  margin-bottom:.3rem;
}
.ruta__id span{ display:block; color:var(--ink-60); font-size:.9375rem; line-height:1.45; }
.ruta em{
  font-family:var(--mono); font-style:normal; font-size:.75rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--electric);
  white-space:nowrap; transition:color .25s ease;
}
@media (max-width:600px){
  .ruta a{ grid-template-columns:1fr; gap:.875rem; padding:1.375rem 0; }
  .ruta a:hover{ padding-left:1rem; }
}

/* =========================================================
   Blog
   ========================================================= */
.entradas{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1.5rem;
}
.entrada{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:3px;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
             border-color .3s ease;
}
.entrada a{
  display:flex; flex-direction:column; height:100%;
  padding:1.75rem 1.625rem;
  text-decoration:none;
}
@media (hover:hover) and (pointer:fine){
  .entrada:hover{ transform:translateY(-5px); box-shadow:var(--lift); border-color:transparent; }
  .entrada:hover .enlace-texto{ gap:.85rem; }
}
.entrada:active{ transform:scale(.99); }
.entrada__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
  font-family:var(--mono); font-size:.6875rem;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-60); margin:0 0 1rem;
}
.entrada__etq{
  color:var(--electric);
  border:1px solid currentColor; border-radius:2px;
  padding:.25rem .5rem;
}
.entrada h3{ margin:0 0 .75rem; }
.entrada__resumen{
  margin:0 0 1.5rem; color:var(--ink-60);
  font-size:.9375rem; line-height:1.55; flex:1;
}

/* ---------- Cuerpo del artículo ----------
   Medida de línea corta a propósito: 68 caracteres es lo que se lee
   sin perder el renglón. Más ancho cansa. */
.articulo{ max-width:68ch; }
.articulo h2{
  font-size:clamp(1.375rem,1.15rem + .9vw,1.875rem);
  margin-top:3rem; margin-bottom:1rem;
}
.articulo h2:first-child{ margin-top:0; }
.articulo p{ margin:0 0 1.375rem; line-height:1.7; }
.articulo ul{ margin:0 0 1.5rem; padding-left:0; list-style:none; }
/* Viñeta propia: un filete eléctrico corto, no un punto */
.articulo li{
  position:relative; padding-left:1.75rem; margin-bottom:1rem;
  line-height:1.65;
}
.articulo li::before{
  content:""; position:absolute; left:0; top:.7em;
  width:12px; height:2px; background:var(--electric);
}
.articulo a{
  color:var(--electric); text-decoration:none;
  border-bottom:1px solid rgba(23,0,244,.3);
  transition:border-color .18s ease;
}
.articulo a:hover{ border-bottom-color:var(--electric); }
.articulo strong{ font-variation-settings:"wdth" 100,"wght" 680; }

@media (max-width:640px){
  .entradas{ grid-template-columns:1fr; gap:1rem; }
  .entrada a{ padding:1.375rem 1.25rem; }
}

/* ---------- Aviso de hueco de imagen (solo desarrollo) ---------- */
.falta-foto{
  font-family:var(--mono); font-size:.75rem; color:var(--ink-60);
  border:1px dashed var(--line); padding:.75rem 1rem; margin-top:1.5rem;
}

/* =========================================================
   MÓVIL — no es la web de escritorio encogida
   =========================================================
   Medido en un iPhone de 390 px: la portada ocupaba 9.648 px
   (once pantallas) y las fichas de concesionario 2.484 px de
   ellas. El diagrama, sin etiquetas y sin ratón, no aportaba
   nada al tacto. Estas reglas rehacen esas piezas.
   ========================================================= */

/* ---------- 1. El diagrama no se toca: en móvil se sustituye ----------
   Un mapa que depende del hover no funciona sin ratón. En su lugar,
   una cifra que dice lo mismo en un vistazo. */
.resumen-red{ display:none; }

@media (max-width: 900px){
  .diagrama{ display:none; }

  .resumen-red{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1px;
    margin-top:2.25rem;
    border:1px solid var(--line-dark);
    background:var(--line-dark);
  }
  .resumen-red div{
    background:var(--ford-blue-2);
    padding:1.25rem 1rem;
  }
  .resumen-red strong{
    display:block;
    font-family:var(--display);
    font-variation-settings:"wdth" 118,"wght" 800;
    font-size:2.25rem; line-height:1; color:var(--white);
  }
  .resumen-red span{
    display:block; margin-top:.4rem;
    font-family:var(--mono); font-size:.6875rem; letter-spacing:.09em;
    text-transform:uppercase; color:#9AA5D8; line-height:1.4;
  }
}

/* Fuera de móvil el enlace vive donde siempre */
@media (min-width: 901px){
  .concesionario__enlace{ margin:0; }
}

/* ---------- 2. Fichas de concesionario: acordeón ----------
   Cinco fichas abiertas son 2.484 px. Plegadas, 5 filas de 76 px:
   la lista completa cabe en una pantalla y se abre la que interesa. */
@media (max-width: 900px){
  .concesionarios{ gap:1px; }

  .concesionario{
    display:block;
    padding:0;
    border:0;
    box-shadow:0 0 0 1px var(--line);
    background:var(--white);
  }

  .concesionario__id{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:.875rem;
    padding:1rem 1.25rem;
    cursor:pointer;
    position:relative;
    min-height:60px;
  }
  .concesionario__id .eyebrow{
    grid-column:1; grid-row:2;
    margin:.2rem 0 0;
    font-size:.6875rem;
    color:var(--ink-60);
  }
  .concesionario__id h3{
    grid-column:1; grid-row:1;
    margin:0;
    font-size:1.0625rem;
  }
  /* Los municipios solo al abrir: plegada, la fila es nombre + nº de puntos */
  .concesionario__zona{
    grid-column:1; grid-row:3;
    margin:0;
    font-size:.8125rem;
    display:none;
  }
  .concesionario[data-abierta="true"] .concesionario__zona{
    display:block; margin-top:.4rem;
  }
  .no-js .concesionario__zona{ display:block; margin-top:.4rem; }

  /* Signo de despliegue: gira, no salta */
  .concesionario__id::after{
    content:"";
    grid-column:2; grid-row:1 / span 3;
    align-self:center;
    width:11px; height:11px;
    border-right:2px solid var(--ford-blue);
    border-bottom:2px solid var(--ford-blue);
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .22s var(--ease-out);
  }
  .concesionario[data-abierta="true"] .concesionario__id::after{
    transform:rotate(-135deg) translate(-3px,-3px);
  }

  /* El contenido plegado.
     La transición va sobre grid-template-rows 0fr → 1fr: es la única
     forma en CSS de animar hasta la altura real del contenido sin
     fijarla a mano. El hijo directo lleva el overflow, no el padre. */
  .concesionario__panel{
    display:grid;
    grid-template-rows:0fr;
    opacity:0;
    transition:grid-template-rows .28s var(--ease-out), opacity .18s ease;
  }
  .concesionario__panel > div{ overflow:hidden; min-height:0; }

  .concesionario[data-abierta="true"] .concesionario__panel{
    grid-template-rows:1fr;
    opacity:1;
  }

  .concesionario__panel .concesionario__puntos{
    margin:0; padding:0 1.25rem 1.25rem;
  }
  .concesionario__enlace{ margin:0; padding:0 1.25rem .875rem; }
  .concesionario__panel .concesionario__acciones{
    padding:0 1.25rem 1.25rem;
  }
  .concesionario__puntos li{
    grid-template-columns:auto minmax(0,1fr);
    padding-bottom:.75rem;
    font-size:.875rem;
  }

  /* Sin JS todo queda abierto: nunca se esconde contenido */
  .no-js .concesionario__panel{ grid-template-rows:1fr; opacity:1; }

  .no-js .concesionario__id::after{ display:none; }
  .no-js .concesionario__id{ cursor:default; }
}

/* ---------- 3. Área táctil mínima de 44 px ----------
   Apple y WCAG coinciden: por debajo, se falla el toque. */
@media (max-width: 900px){
  .nav__lista a{ min-height:48px; display:flex; align-items:center; }
  .leyenda button{ min-height:44px; }
  .enlace-texto{ display:inline-block; padding-block:.5rem; }
  .pie ul a{ display:inline-block; padding-block:.35rem; }
  .pie__legal a{ padding-block:.35rem; }
  .redes a{ width:46px; height:46px; }
}

/* ---------- 4. Tarjetas de modelo: dos por fila ----------
   Una por fila obligaba a 434 px de scroll por modelo. */
@media (max-width: 900px){
  .modelos{ grid-template-columns:repeat(2,1fr); gap:1rem; }
  .modelo__cuerpo{ padding:1rem; }
  .modelo h3{ font-size:1rem; }
  .modelo p{ font-size:.8125rem; margin-bottom:1rem; }
  .modelo__etq{ font-size:.625rem; margin-bottom:.5rem; }
  .modelo__img::after{ font-size:1rem; }
  /* «Ver ficha en ford.es» partía en dos líneas y descuadraba las tarjetas */
  .modelo .enlace-texto{
    font-size:.6875rem; letter-spacing:.06em;
  }
  .modelo .enlace-texto::after{ content:""; }
}
@media (max-width: 460px){
  .modelos{ gap:.75rem; }
  .modelo__cuerpo{ padding:.875rem; }
}

/* ---------- 5. Accesos rápidos: dos por fila ---------- */
@media (max-width: 900px){
  .accesos{ grid-template-columns:repeat(2,1fr); gap:.75rem; }
  .acceso{ padding:1.125rem 1rem; }
  .acceso h3{ font-size:1rem; }
  .acceso p{ font-size:.8125rem; }
  .acceso__flecha{ margin-top:.75rem; font-size:.6875rem; }
}
@media (max-width: 420px){
  .accesos{ grid-template-columns:1fr; }
}

/* ---------- 6. Ritmo vertical: menos aire en pantalla pequeña ---------- */
@media (max-width: 700px){
  :root{ --sp-section:clamp(2.75rem, 8vw, 4rem); }
  .seccion__cabecera{ margin-bottom:1.75rem; }
  .servicios{ grid-template-columns:1fr; }
  .servicio{ padding:1.375rem 1.25rem; }
  .cifras{ grid-template-columns:1fr !important; }
  .cifra{ padding:1.25rem; }
}

/* ---------- 7. Menú móvil: entra, no aparece de golpe ---------- */
@media (max-width: 900px){
  .nav{
    display:flex;
    visibility:hidden;
    opacity:0;
    transform:translateY(-6px);
    transition:opacity .2s var(--ease-out),
               transform .2s var(--ease-out),
               visibility 0s linear .2s;
  }
  .nav[data-abierto="true"]{
    visibility:visible;
    opacity:1;
    transform:translateY(0);
    transition-delay:0s;
  }
}

/* ---------- 8. Aviso de cookies: sube desde su borde ----------
   Entra y sale por el mismo sitio: coherencia espacial. */
.cookies{
  transform:translateY(0);
  opacity:1;
  transition:transform .32s var(--ease-drawer), opacity .2s ease;
}
.cookies[data-entrando="true"]{
  transform:translateY(100%);
  opacity:0;
}
@media (prefers-reduced-motion: reduce){
  .cookies{ transition:opacity .2s ease; }
  .cookies[data-entrando="true"]{ transform:none; }
}


/* ---------- 9. Aviso de cookies en móvil ----------
   Ocupaba media pantalla y tapaba los botones del hero.
   Texto más corto, cuerpo menor y botones a ancho completo. */
@media (max-width: 700px){
  .cookies{ padding:1.125rem var(--gutter) 1rem; }
  .cookies p{ font-size:.8125rem; line-height:1.5; }
  .cookies__inner{ gap:.875rem; }
  .cookies__acciones{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:.625rem; }
  .cookies .btn{ justify-content:center; padding:.8rem 1rem; font-size:.875rem; }
  /* La versión larga solo en pantallas con sitio */
  .cookies__largo{ display:none; }
}
@media (min-width: 701px){
  .cookies__corto{ display:none; }
}

/* Etiquetas que se acortan en pantalla pequeña sin perder sentido */
@media (max-width: 900px){
  .oculto-movil{ display:none; }
}

/* ---------- 10. El correo es largo: 35 caracteres ----------
   `hola@redforddelacomunidaddemadrid.es` desbordaba 37 px en pantallas
   de 390. Se reduce el cuerpo y se permite partir por el arroba. */
.dato__valor a[href^="mailto"]{
  overflow-wrap:anywhere;
  word-break:break-word;
}
@media (max-width: 700px){
  .dato__valor{ font-size:1.0625rem; line-height:1.4; }
  .dato__valor a[href^="mailto"]{ font-size:.9375rem; }
  .datos{ gap:1.375rem; }
}
/* En el pie y la cabecera ya iba en monoespaciada, pero conviene asegurarlo */
.pie a[href^="mailto"],
.correo-cabecera{ overflow-wrap:anywhere; }

/* ---------- 11. Pantallas muy estrechas (320–400 px) ----------
   iPhone SE y Android pequeños. El lockup horizontal completo
   más el botón de menú no caben: el logotipo se reduce, nunca
   se recorta ni se tapa. */
@media (max-width: 400px){
  .marca img{ height:38px; }
  .cabecera__fila{ min-height:70px; gap:.75rem; }
  .hamburguesa{ padding:.55rem .6rem; flex:0 0 auto; }
  .hamburguesa span{ width:18px; }
}
@media (max-width: 340px){
  .marca img{ height:34px; }
  :root{ --gutter:1rem; }
  .acciones-fijas a{ font-size:.625rem; letter-spacing:.03em; }
  .modelos{ grid-template-columns:1fr; }
}

/* ---------- 12. Red de seguridad contra el scroll horizontal ----------
   `hola@redforddelacomunidaddemadrid.es` son 35 caracteres sin espacios:
   en cualquier párrafo de una pantalla estrecha desborda. Estas dos
   reglas evitan el scroll lateral, que es el peor defecto de una web
   en móvil porque afecta a toda la página, no solo al elemento. */
p, li, dd, .entradilla, .nota-legal, .texto-legal{
  overflow-wrap:break-word;
}
/* Los titulares también parten: «concesionarios.» son 15 caracteres y a
   320 px no cabe en una línea. Sin esto el desbordamiento queda oculto
   bajo overflow-x y no te enteras hasta que lo ve un cliente. */
h1,h2,h3,h4,.eyebrow{ overflow-wrap:break-word; }
body{ overflow-x:hidden; }

/* =========================================================
   13. Aparición al hacer scroll
   =========================================================
   MEJORA PROGRESIVA — leer antes de tocar:
   el estado oculto SOLO se aplica si <html> lleva la clase `anim`,
   que pone un script en línea tras comprobar que existe
   IntersectionObserver. Sin JS, con JS roto, o si el observador nunca
   dispara, el contenido se ve. Nunca se esconde texto detrás de algo
   que puede fallar — la misma regla que el acordeón con `no-js`. */
/* Los objetivos se declaran aquí por selector, no clase a clase en las
   plantillas: así no hay que tocar los cuatro scripts generadores cada
   vez que se añade un bloque. site.js observa esta MISMA lista —
   si cambias una, cambia la otra. */
.anim .revelar,
.anim .seccion__cabecera > *,
.anim .modelo,
.anim .ruta a,
.anim .acceso,
.anim .servicio,
.anim .cifra,
.anim .confianza > div{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.anim .revelar.visible,
.anim .seccion__cabecera > *.visible,
.anim .modelo.visible,
.anim .ruta a.visible,
.anim .acceso.visible,
.anim .servicio.visible,
.anim .cifra.visible,
.anim .confianza > div.visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  /* Movimiento reducido = más suave, no cero: se conserva la opacidad,
     que ayuda a entender que algo ha entrado, y se quita el desplazamiento. */
  .anim .revelar,
  .anim .seccion__cabecera > *,
  .anim .modelo,
  .anim .ruta a,
  .anim .acceso,
  .anim .servicio,
  .anim .cifra,
  .anim .confianza > div{ transition:opacity .4s ease; transform:none; }
}