/* ==========================================================================
   NAVARRO — SISTEMA DE DISEÑO ÚNICO
   Un solo fichero para las 13 páginas del sitio. Componentes genéricos
   mapeados a las etiquetas semánticas ya usadas en el contenido real
   (header, section[aria-label], article, table, ul/li, blockquote,
   figure, form/fieldset) — no se inventan clases nuevas si la etiqueta
   semántica ya basta.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --ink:        #14241F;  /* fondo oscuro — noche de bosque */
  --ink-soft:   #1B2F28;  /* tarjetas sobre ink */
  --line:       #2A3D34;  /* bordes sobre ink */
  --paper:      #F3F0E6;  /* fondo claro — papel topográfico */
  --paper-soft: #EAE5D6;  /* tarjetas sobre paper */
  --line-paper: #DCD6C4;  /* bordes sobre paper */
  --steel:      #5B6B63;  /* texto secundario */
  --steel-soft: #8A9A92;  /* texto terciario sobre ink */
  --trail:      #D85A30;  /* acento único */
  --trail-dark: #A8431F;
  --cream:      #FFFFFF;

  --f-display: 'Barlow Condensed', sans-serif;
  --f-body:    'Source Serif 4', Georgia, serif;
  --f-mono:    'IBM Plex Mono', monospace;

  --radius: 2px;
  --max-w: 1100px;
  --gutter: clamp(20px, 5vw, 56px);
}

/* ---------- 2. BASE ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
body{
  font-family: var(--f-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--trail); text-decoration: underline; text-decoration-color: rgba(216,90,48,.35); text-underline-offset: 3px; }
a:hover{ text-decoration-color: var(--trail); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--trail); outline-offset: 2px;
}
img{ max-width:100%; display:block; }
table{ width:100%; border-collapse: collapse; }

.nv-wrap{ max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3{
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.1;
  color: var(--ink);
}
h2{ font-size: clamp(26px, 3.4vw, 36px); text-transform: uppercase; letter-spacing: .02em; }
h3{ font-size: 19px; letter-spacing: .03em; }
p{ color: var(--steel); max-width: 68ch; }
p + p{ margin-top: 14px; }

/* ---------- 3. HEADER de página (hero ligero) ---------- */
body > header{
  background: var(--ink);
  padding: clamp(64px, 11vw, 120px) var(--gutter) clamp(40px, 6vw, 64px);
}
body > header > *{ max-width: var(--max-w); margin: 0 auto; }
body > header > p:first-child{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--trail);
  margin-bottom: 16px;
}
body > header h1{
  color: var(--cream);
  font-size: clamp(32px, 5vw, 52px);
  text-transform: uppercase;
  max-width: 22ch;
  margin-bottom: 18px;
}
body > header p:not(:first-child){ color: var(--steel-soft); font-size: 18px; max-width: 58ch; }
body > header a{ color: var(--cream); }

/* ---------- 3b. HERO FIGURE — imagen ancha justo bajo el header de página ---------- */
.nv-hero-figure{
  margin: 0;
  border: none;
  border-radius: 0;
  max-height: 64vh;
  overflow: hidden;
}
.nv-hero-figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16/7;
}

/* ---------- 4. SECTION genérica ---------- */
section{ padding: clamp(40px, 6vw, 72px) var(--gutter); }
section > *{ max-width: var(--max-w); margin-left: auto; margin-right: auto; }
section > * + *{ margin-top: 18px; }
section:nth-of-type(even){ background: var(--paper-soft); }

/* eyebrow opcional vía primer <p> corto en mayúsculas dentro de header de sección — no se usa de momento, omitido por simplicidad */

/* ---------- 5. NAV de reparto (las "puertas de entrada": article en grid) ---------- */
nav[aria-label] ul{ list-style:none; display:flex; gap: 24px; flex-wrap:wrap; font-family: var(--f-mono); font-size: 13px; }
nav[aria-label] > ul{ max-width: var(--max-w); margin: 0 auto; }

section nav article,
section > article{
  display: grid;
  gap: 12px;
}
/* Grid de tarjetas cuando hay varios <article> hermanos directos de un nav o section */
nav[aria-label] {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: var(--max-w);
  margin: 0 auto;
}
nav[aria-label] ul{ display:none; } /* el índice con anchors (#chasis etc.) se trata distinto, ver .nv-toc */

article{
  background: var(--cream);
  border: 1px solid var(--line-paper);
  border-radius: var(--radius);
  padding: 28px;
}
article h3{ margin-bottom: 0; }
article p{ font-size: 15px; }
article > a{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--trail);
}
article > a::after{ content: ' →'; }

/* índice de anclas tipo tabla de contenidos (tecnología) */
.nv-toc{
  display:flex; flex-wrap:wrap; gap: 18px 28px;
  list-style:none;
  font-family: var(--f-mono); font-size: 13px; letter-spacing:.04em;
  max-width: var(--max-w); margin: 0 auto;
}
.nv-toc a{ text-decoration:none; color: var(--ink); border-bottom: 1px solid var(--trail); }

/* ---------- 6. TABLAS ---------- */
table{ font-size: 15px; }
table th, table td{
  text-align:left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-paper);
}
table th[scope="row"]{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--steel);
  width: 38%;
  font-weight: 500;
}
thead th{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--ink);
  border-bottom: none;
}

/* ---------- 7. LISTAS ---------- */
ul:not(.nv-toc){ list-style:none; }
section ul:not(.nv-toc) > li{
  position: relative;
  padding-left: 22px;
  margin-top: 10px;
  color: var(--steel);
}
section ul:not(.nv-toc) > li::before{
  content: '';
  position:absolute; left:0; top: 10px;
  width: 8px; height: 1px;
  background: var(--trail);
}
ol{ margin-left: 1.2em; color: var(--steel); }
ol li{ margin-top: 8px; padding-left: 6px; }

/* ---------- 8. CITAS ---------- */
blockquote{
  border-left: 3px solid var(--trail);
  padding-left: 24px;
  margin: 8px 0;
  font-family: var(--f-body);
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 24px);
  color: var(--ink);
  line-height: 1.4;
}
cite{ font-style: italic; color: var(--steel); }

/* ---------- 9. FIGURE / GALERÍA ---------- */
figure{
  background: var(--cream);
  border: 1px solid var(--line-paper);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 18px;
}
figure img{ aspect-ratio: 4/3; object-fit: cover; background: var(--paper-soft); }
figcaption{
  padding: 14px 18px;
  font-size: 14px;
  color: var(--steel);
  font-family: var(--f-body);
  font-style: italic;
}

/* ---------- 10. FAQ (microdatos schema.org ya presentes en el HTML) ---------- */
[itemtype$="Question"]{
  border-top: 1px solid var(--line-paper);
  padding-top: 18px;
  margin-top: 18px;
}
[itemprop="name"]{ cursor: default; font-size: 18px; }
[itemtype$="Answer"] p{ font-size: 15px; }

/* ---------- 11. FORMULARIO (configurador) ---------- */
form{ max-width: 640px; }
fieldset{
  border: 1px solid var(--line-paper);
  border-radius: var(--radius);
  padding: 24px;
  margin-top: 20px;
}
legend{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--trail);
  padding: 0 6px;
}
fieldset > p{ font-size: 14px; margin-top: 4px; margin-bottom: 12px; }
label{
  display:block;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--ink);
  margin-top: 14px;
  margin-bottom: 6px;
}
fieldset input[type="radio"], fieldset input[type="checkbox"]{
  margin-top: 12px;
  margin-right: 8px;
  accent-color: var(--trail);
}
fieldset input[type="radio"] + label, fieldset input[type="checkbox"] + label{
  display:inline; margin:0; font-family: var(--f-body); font-size: 15px; color: var(--ink); text-transform:none; letter-spacing:0;
}
input[type="text"], input[type="tel"], input[type="email"], select, textarea{
  width: 100%;
  font-family: var(--f-body);
  font-size: 15px;
  padding: 11px 14px;
  border: 1px solid var(--line-paper);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--ink);
}
textarea{ min-height: 90px; resize: vertical; }

/* ---------- 12. BOTONES / CTA ---------- */
.btn, button[type="submit"], form button{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 24px;
  border: 1px solid var(--trail);
  border-radius: var(--radius);
  background: var(--trail);
  color: var(--cream);
  cursor: pointer;
  margin-top: 24px;
  transition: background .15s ease;
}
.btn:hover, button[type="submit"]:hover, form button:hover{ background: var(--trail-dark); border-color: var(--trail-dark); }
body > header a.btn, body > header a:not(.btn){
  text-decoration:none;
}

/* Bloque "siguiente paso" / cierre: section con aria-label que solo contiene <p><a>...  */
section[aria-label="Siguiente paso"],
section[aria-label="Siguientes pasos"]{
  background: var(--ink);
  text-align:center;
}
section[aria-label="Siguiente paso"] p,
section[aria-label="Siguientes pasos"] p{ color: var(--steel-soft); max-width: 60ch; margin: 0 auto; }
section[aria-label="Siguiente paso"] a,
section[aria-label="Siguientes pasos"] a{ color: var(--trail); font-weight: 500; }

/* ---------- 13. COMPONENTE FIRMA: comparativa de cota técnica ---------- */
.nv-spec-compare{ margin-top: 28px; }
.nv-spec-row{ display:flex; align-items:center; gap: 14px; }
.nv-spec-track{ flex:1; height:1px; background: var(--line-paper); position:relative; }
.nv-spec-track::before, .nv-spec-track::after{
  content:''; position:absolute; top:-4px; width:1px; height:9px; background: var(--line-paper);
}
.nv-spec-track::before{ left:0; } .nv-spec-track::after{ right:0; }
.nv-spec-val{ font-family: var(--f-mono); font-size: 13px; color: var(--steel); white-space:nowrap; }
.nv-spec-val.is-navarro{
  color: var(--trail);
  font-weight: 600;
  font-size: 14px;
  padding: 0 10px;
  /* el padding lateral la despega del margen izquierdo del H2/párrafo de
     la sección: no queda alineada con esos bloques, gana aire propio. */
}
.nv-spec-val:not(.is-navarro){ padding-right: 43px; }

/* sobre fondo ink, invertir tracks/labels */
.on-ink .nv-spec-track, .on-ink .nv-spec-track::before, .on-ink .nv-spec-track::after{ background: var(--steel-soft); }
.on-ink .nv-spec-val{ color: var(--steel-soft); }

/* ---------- 14. MENÚ PRINCIPAL (nav.nav-menu) — glass sobre --ink ----------
   Nota de especificidad: usa la clase .nav-menu (no el selector genérico
   `nav[aria-label]` de la sección 5), así que no interfiere con la cuadrícula
   de "puertas de entrada" ni necesita !important en ningún punto. */
.nav-menu{
  --nvm-bg:          rgba(20, 36, 31, 0.4);   /* --ink translúcido */
  --nvm-bg-scrolled: rgba(20, 36, 31, 0.94);
  --nvm-blur:          10px;
  --nvm-blur-scrolled: 20px;

  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 20px var(--gutter);
  background: var(--nvm-bg);
  backdrop-filter: blur(var(--nvm-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--nvm-blur)) saturate(140%);
  border-bottom: 1px solid rgba(243, 240, 230, 0.08);
  transition: background .4s ease, padding .3s ease, backdrop-filter .4s ease, box-shadow .4s ease;
}
.nav-menu.is-scrolled{
  background: var(--nvm-bg-scrolled);
  backdrop-filter: blur(var(--nvm-blur-scrolled)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--nvm-blur-scrolled)) saturate(160%);
  padding: 10px var(--gutter);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}

/* Logo como background (no <img>): el archivo es un bloque rectangular
   sólido (fondo morado + silueta de montaña + wordmark), no un wordmark
   transparente — a tamaño de icono de menú se ilegible. Se agranda y se
   desborda por encima/debajo de su propia línea con altura + margen
   negativo simétrico (misma técnica que el puente de .nav-menu-item en la
   sección de submenús): la "línea" que ocupa dentro del flex-row sigue
   midiendo lo mismo que .menu-items (no cambia la altura de la barra),
   pero la caja pintada del logo desborda hasta pegar con el padding
   vertical del nav, dándole toda la altura disponible.
   width fijo + flex:0 0 auto -> nunca se encoge (evita que absorba el
   déficit de espacio del viewport intermedio, que es lo que lo hacía
   "desaparecer" entre ~768 y ~1080px; ver el breakpoint del media query). */
.nav-logo{
  display:block;
  flex: 0 0 auto;
  width: 155px;
  height: 81.4375px;
  margin: -20px 28px -20px 0;
  background-image: url('imagenes/logo-navarro-coche-caballos-fondo-morado.jpg');
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: auto 100%;
  transition: height .3s ease, margin .3s ease;
}
.nav-menu.is-scrolled .nav-logo{
  height: 61.4375px;
  margin: -10px 28px -10px 0;
}

.menu-items{
  display:flex; align-items:center; width:100%;
  list-style:none; margin:0; padding:0;
}
/* padding-bottom + margin-bottom negativo: extiende el área "hoverable" del
   <li> hasta pegarla al submenú, sin depender de pointer-events condicionado
   por :hover (eso crea una dependencia circular y el puente nunca se activa
   en el fotograma exacto en que el ratón cruza el hueco). */
.nav-menu-item{ position:relative; margin: 0 4px; padding-bottom: 14px; margin-bottom: -14px; }

.nav-menu-link{
  display:flex; align-items:center;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream);
  padding: 10px 14px;
  transition: color .2s ease, letter-spacing .2s ease;
}
.nav-menu-link:hover,
.nav-menu-item:focus-within > .nav-menu-link{
  color: var(--trail);
  letter-spacing: .09em;
}
.nav-menu-link:focus-visible{ outline-offset: 3px; }

/* Firma: el subrayado se tensa como un sendero que se traza, no un
   subrayado lineal — coherente con --trail. */
.nav-menu-link::before{
  content:'';
  position:absolute; left:50%; bottom: 3px;
  width:0; height: 1.5px;
  background: var(--trail);
  transform: translateX(-50%);
  transition: width .45s cubic-bezier(.34,1.56,.64,1);
}
.nav-menu-link:hover::before,
.nav-menu-item:focus-within > .nav-menu-link::before{
  width: calc(100% - 28px);
}

/* Submenú — tarjeta sobre ink-soft, igual que el resto de "cards on ink" */
.nav-submenu{
  display:block;
  /* top:100% ya incluye los 14px de padding-bottom del <li> (ver
     .nav-menu-item): así el submenú queda pegado, sin gap real, y la
     separación visual respecto al link se conserva idéntica. */
  position:absolute; left:0; top:100%;
  min-width: 230px;
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 0;
  box-shadow: 0 20px 44px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; pointer-events:none;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  z-index: 100;
}
.nav-menu-item:hover .nav-submenu,
.nav-menu-item:focus-within .nav-submenu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.nav-submenu a{
  display:block;
  padding: 9px 20px;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--steel-soft);
  text-decoration:none;
  border-left: 2px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, padding-left .2s ease;
}
.nav-submenu a:hover,
.nav-submenu a:focus-visible{
  background: rgba(243,240,230,.05);
  color: var(--cream);
  border-left-color: var(--trail);
  padding-left: 24px;
}

/* Selector de idioma compacto */
.lang-selector{ position:relative; margin-left:auto; }
.lang-current{
  display:flex; align-items:center; gap:8px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing:.05em;
  color: var(--cream);
  background: rgba(243,240,230,.06);
  border: 1px solid rgba(243,240,230,.16);
  border-radius: var(--radius);
  padding: 7px 12px;
  cursor:pointer;
}
.lang-current:hover, .lang-current[aria-expanded="true"]{
  background: rgba(243,240,230,.12);
  border-color: rgba(243,240,230,.28);
}
.lang-current .fi{ font-size: 1rem; border-radius: 1px; }
.lang-chevron{
  width:8px; height:8px;
  border-right: 1.5px solid var(--steel-soft);
  border-bottom: 1.5px solid var(--steel-soft);
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform .2s ease;
}
.lang-current[aria-expanded="true"] .lang-chevron{ transform: rotate(-135deg); margin-top:3px; }

.lang-dropdown{
  position:absolute; right:0; top: calc(100% + 12px);
  min-width: 168px;
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 0;
  box-shadow: 0 20px 44px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 100;
}
.lang-selector.is-open .lang-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-dropdown a{
  display:flex; align-items:center; gap:10px;
  padding: 8px 16px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--steel-soft);
  text-decoration:none;
}
.lang-dropdown a:hover, .lang-dropdown a:focus-visible{ background: rgba(243,240,230,.05); color: var(--cream); }
.lang-dropdown .fi{ font-size: .95rem; border-radius: 1px; }

/* Hamburguesa */
.hamburger-btn{
  display:none;
  background:none; border:none; color: var(--cream);
  font-size: 1.4rem; line-height:1; cursor:pointer; padding: 4px 6px;
}

/* Breakpoint a 1100px (no 768): con el logo agrandado y flex-shrink:0,
   la fila de escritorio (logo + 6 ítems + selector de idioma) ya no tiene
   margen para encogerse. Sin overflow horizontal real, el "EL COCHE" /
   "EL DISEÑADOR" empiezan a partirse en dos líneas entre ~1000 y 1070px
   (medido con Playwright): se sube el corte al menú hamburguesa por
   encima de ese punto, en vez de dejar que el texto se envuelva. */
@media (max-width: 1100px){
  .nav-menu{ flex-wrap: wrap; padding: 14px 20px; }
  /* recalcula el desborde del logo para el padding móvil (14px, o 10px
     cuando is-scrolled gana por especificidad — ver regla de abajo) */
  .nav-logo{ margin: -14px auto -14px 0; height: 69.4375px; }
  .nav-menu.is-scrolled .nav-logo{ margin: -10px auto -10px 0; height: 61.4375px; }
  .hamburger-btn{ display:block; order:2; }
  .menu-items{
    order:3; display:none; flex-direction:column; align-items:flex-start;
    width:100%; margin-top:14px; padding-top:14px;
    border-top: 1px solid rgba(243,240,230,.1);
  }
  .menu-items.active{ display:flex; }
  .nav-menu-item{ width:100%; margin:0; padding-bottom:0; }
  .nav-menu-link::before{ display:none; }
  .nav-submenu{
    position:static; display:none; opacity:1; visibility:visible; pointer-events:auto;
    transform:none; box-shadow:none; border:none; border-radius:0;
    border-left: 2px solid rgba(243,240,230,.12);
    margin: 0 0 6px 16px; background:transparent;
  }
  .nav-menu-item.is-open .nav-submenu{ display:block; }
  .lang-selector{ margin-left:0; margin-top:10px; width:100%; }
  .lang-dropdown{ right:auto; left:0; }
}

/* ---------- 15. RESPONSIVE ---------- */
@media (max-width: 640px){
  body{ font-size: 16px; }
  table th[scope="row"]{ width: 50%; }
  nav[aria-label]{ grid-template-columns: 1fr; }
}

/* ---------- 16. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  .nav-menu, .nav-logo, .nav-menu-link, .nav-menu-link::before,
  .nav-submenu, .lang-current, .lang-chevron, .lang-dropdown{ transition: none !important; }
}