/* ════════════════════════════════════════════════════════════
   BER TRANS 2015 — hoja de estilos (sitio multipágina)
   Dirección: editorial luminosa. La carretera de día: papel
   blanco, tinta negra y rojo corporativo como único acento.
   ════════════════════════════════════════════════════════════ */

/* ---------- fuentes (auto-alojadas) ---------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo Narrow";
  src: url("../fonts/ArchivoNarrow-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo Narrow";
  src: url("../fonts/ArchivoNarrow-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --fondo:   #f7f5f2;      /* fondo: blanco roto */
  --papel:   #ffffff;      /* superficies elevadas */
  --linea:   #e2ddd7;      /* bordes, líneas */
  --tinta:   #16140f;      /* texto principal */
  --gris:    #6d6862;      /* texto secundario (AA sobre fondo) */
  --rojo:    #c9231a;      /* rojo corporativo para texto sobre claro (AA) */
  --rojo-fondo: #d7281f;   /* rojo para rellenos con texto blanco (AA) */
  --rojo-t:  rgba(215, 40, 31, .10);
  --sombra:  0 12px 34px rgba(22, 20, 15, .07);

  --serif:  "Inter", "Helvetica Neue", Arial, sans-serif;   /* display institucional */
  --grot:   "Inter", "Helvetica Neue", Arial, sans-serif;
  --senal:  "Archivo Narrow", "Arial Narrow", var(--grot);
  --mono:   ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --ancho: 74rem;
  --margen: clamp(1.25rem, 4vw, 3.5rem);
}

/* ---------- transición entre páginas (progresiva) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-sale .3s ease both; }
::view-transition-new(root) { animation: vt-entra .45s ease both; }
@keyframes vt-sale  { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

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

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

body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--grot);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--rojo-fondo); color: #fff; }

a { color: inherit; text-decoration-color: var(--gris); text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--rojo); }

:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 3px;
  border-radius: 1px;
}

em { font-style: italic; }
/* en display, el énfasis va en rojo pero recto: registro corporativo */
h1 em, h2 em, h3 em,
.topbar__marca em, .pie__marca em,
.ficha__nombre em, .plano__nombre em { font-style: normal; }
img, svg { max-width: 100%; }

/* ---------- barra superior ---------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem var(--margen);
  background: linear-gradient(rgba(247, 245, 242, .9), rgba(247, 245, 242, 0));
  transition: background .3s;
}

.topbar--solida {
  background: rgba(247, 245, 242, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}

.topbar__marca {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: .01em;
  text-decoration: none;
  z-index: 2;
}
.topbar__marca em { color: var(--rojo); }

.topbar__nav { display: flex; gap: 1.75rem; align-items: center; }
.topbar__nav a {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gris);
}
.topbar__nav a:hover { color: var(--tinta); }
.topbar__nav a[aria-current="page"] { color: var(--rojo); }

.topbar__cta {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff !important;
  background: var(--rojo-fondo);
  padding: .55rem 1.1rem;
}
.topbar__cta:hover { background: #b91f17; }

.topbar__lang {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-decoration: none;
  color: var(--gris);
  border: 1px solid var(--linea);
  padding: .35rem .55rem;
  z-index: 2;
}
.topbar__lang:hover { color: var(--tinta); border-color: var(--gris); }

/* botón hamburguesa: tres rayas de carril */
.topbar__menu {
  display: none;
  z-index: 2;
  background: none;
  border: none;
  cursor: pointer;
  padding: .6rem .2rem;
}
.topbar__menu span {
  display: block;
  width: 1.7rem;
  height: 2px;
  background: var(--tinta);
  margin: 5px 0;
  transition: transform .3s, opacity .3s;
}
.menu-abierto .topbar__menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-abierto .topbar__menu span:nth-child(2) { opacity: 0; }
.menu-abierto .topbar__menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 56rem) {
  .topbar__nav { display: none; }
  .topbar__menu { display: block; }
  .topbar__lang { margin-left: auto; }
}

/* menú a pantalla completa (móvil) */
.menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(247, 245, 242, .97);
  display: grid;
  place-content: center;
  gap: .4rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s;
}
.menu-abierto .menu { opacity: 1; visibility: visible; }
.menu a {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 6.2vw, 2.2rem);
  text-decoration: none;
  padding: .35rem 0;
}
.menu a::before {
  content: attr(data-km);
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--rojo);
  letter-spacing: .1em;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--rojo); }
.menu a[aria-current="page"]::after {
  content: "●";
  font-size: .6rem;
  color: var(--rojo);
}

/* ---------- utilidades compartidas ---------- */
.eyebrow {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 1.4rem;
}

.seccion {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(5rem, 12vh, 8rem) var(--margen) 0;
}

.seccion__hito {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  border-top: 1px solid var(--linea);
  padding-top: 1rem;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.hito__km {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rojo);
  white-space: nowrap;
}
.hito__km::before {
  content: "";
  display: inline-block;
  width: .55rem;
  height: .55rem;
  margin-right: .6rem;
  border: 1px solid var(--rojo);
  transform: rotate(45deg) translateY(-1px);
}
.hito__titulo {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris);
}

.seccion__intro {
  max-width: 34rem;
  color: var(--gris);
  margin-bottom: 3rem;
}

.titular {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.9vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.titular em { color: var(--rojo); }

.btn {
  display: inline-block;
  font-family: var(--grot);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 1rem 1.9rem;
  background: transparent;
  color: var(--tinta);
  border: 1px solid var(--gris);
  cursor: pointer;
  transition: border-color .25s, background .25s, color .25s;
}
.btn:hover { border-color: var(--tinta); }
.btn--rojo {
  background: var(--rojo-fondo);
  border-color: var(--rojo-fondo);
  color: #fff;
}
.btn--rojo:hover { background: #b91f17; border-color: #b91f17; }

.enlace-flecha {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rojo);
}
.enlace-flecha::after { content: " →"; }
.enlace-flecha:hover { color: #ffb95a; }

/* ---------- HOME · la conducción ---------- */
.conduccion { position: relative; }
.conduccion__lienzo {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.conduccion__escena,
.conduccion__escena canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.conduccion__escena canvas { display: block; }

.conduccion__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 95% 75% at 50% 46%, transparent 55%, rgba(247,245,242,.28) 100%),
    linear-gradient(rgba(247,245,242,.22), transparent 18%, transparent 82%, rgba(247,245,242,.85));
}

.conduccion__titulo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0 var(--margen);
  pointer-events: none;
}
.conduccion__titulo h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.8vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.conduccion__titulo h1 em { color: var(--rojo); }
.conduccion__sub {
  margin-top: 1.75rem;
  font-size: clamp(.95rem, 1.6vw, 1.125rem);
  color: var(--gris);
}

.conduccion__cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  pointer-events: none;
}
.conduccion__cue-txt {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris);
}
.conduccion__cue-linea {
  width: 1px;
  height: 3.2rem;
  background: repeating-linear-gradient(var(--rojo) 0 6px, transparent 6px 12px);
  animation: cue-baja 2.4s ease-in-out infinite;
}
@keyframes cue-baja {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(.5rem); opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .conduccion__cue-linea { animation: none; }
}

/* cuadro de a bordo: odómetro */
.hud {
  position: absolute;
  left: var(--margen);
  bottom: 1.6rem;
  z-index: 2;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--gris);
  display: none;               /* visible solo en modo conducción */
  pointer-events: none;
}
.con-conduccion .hud { display: block; }
.hud strong { color: var(--rojo); font-weight: 400; }

/* intermitente del cuadro: parpadea al tomar la salida */
.hud-intermitente {
  display: inline-block;
  color: var(--rojo);
  opacity: 0;
  margin-left: .3rem;
}
.hud-intermitente.parpadea { animation: intermitente .84s steps(1) infinite; }
@keyframes intermitente {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* botón de sonido, discreto en la esquina */
.hud-sonido {
  position: absolute;
  right: var(--margen);
  bottom: 1.5rem;
  z-index: 3;
  display: none;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--gris);
  background: rgba(247, 245, 242, .7);
  border: 1px solid var(--linea);
  padding: .45rem .7rem;
  cursor: pointer;
}
.con-conduccion .hud-sonido { display: block; }
.hud-sonido:hover { color: var(--tinta); border-color: var(--gris); }
.hud-sonido--activo { color: var(--rojo); border-color: var(--rojo); }

/* tarjetas de contenido: en flujo normal por defecto (sin JS / fallback) */
.tarjeta {
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--linea);
  border-top: 4px solid var(--rojo-fondo);
  box-shadow: var(--sombra);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 27rem;
}
.tarjeta__km {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  color: var(--rojo);
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.tarjeta h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.2;
  margin-bottom: .9rem;
}
.tarjeta h2 em { color: var(--rojo); }
.tarjeta p { color: var(--gris); font-size: .98rem; margin-bottom: 1.3rem; }

/* sin modo conducción: las tarjetas fluyen apiladas */
.ruta-tarjetas {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(4rem, 9vh, 7rem) var(--margen) 0;
  display: grid;
  gap: clamp(2rem, 5vh, 3.5rem);
}
.ruta-tarjetas .tarjeta:nth-child(even) { justify-self: end; }

/* con modo conducción: las tarjetas se superponen a la escena clavada */
.con-conduccion .ruta-tarjetas {
  position: absolute;
  inset: 0;
  z-index: 3;
  max-width: none;
  padding: 0;
  display: block;
  pointer-events: none;
}
.con-conduccion .tarjeta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: clamp(1.25rem, 7vw, 7rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.con-conduccion .tarjeta:nth-child(even) {
  left: auto;
  right: clamp(1.25rem, 7vw, 7rem);
}
/* en escritorio, los carteles de salida son protagonistas */
@media (min-width: 56rem) {
  .con-conduccion .tarjeta {
    max-width: 34rem;
    padding: 2.6rem 2.9rem;
  }
  .con-conduccion .tarjeta h2 { font-size: clamp(1.7rem, 2.1vw, 2.3rem); }
  .con-conduccion .tarjeta p { font-size: 1.08rem; }
  .con-conduccion .tarjeta .enlace-flecha { font-size: .88rem; }
}

@media (max-width: 40rem) {
  .con-conduccion .tarjeta,
  .con-conduccion .tarjeta:nth-child(even) {
    left: 1rem; right: 1rem;
    top: auto; bottom: 4.5rem;
    transform: none;
    max-width: none;
  }
}

/* ---------- RUTAS · mapa vivo ---------- */
.mapa-vivo {
  position: relative;
  height: max(82vh, 34rem);
  overflow: hidden;
  border-bottom: 1px solid var(--linea);
}
.mapa-vivo__escena,
.mapa-vivo__escena canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mapa-vivo__cabecera {
  position: absolute;
  z-index: 2;
  top: clamp(5.5rem, 12vh, 8rem);
  left: var(--margen);
  max-width: 30rem;
  pointer-events: none;
}
.mapa-vivo__cabecera .titular {
  font-size: clamp(1.7rem, 2.7vw, 2.4rem);
}
.mapa-vivo__pista {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, calc(-100% - 14px));
  background: var(--fondo);
  border: 1px solid var(--rojo);
  padding: .45rem .8rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.mapa-vivo__pista strong { color: var(--rojo); font-weight: 400; }
.mapa-vivo__nota {
  position: absolute;
  z-index: 2;
  bottom: 1.4rem;
  left: var(--margen);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--gris);
  text-transform: uppercase;
  pointer-events: none;
}

.corredores { width: 100%; border-collapse: collapse; }
.corredores th, .corredores td {
  text-align: left;
  padding: .9rem .5rem;
  border-top: 1px dashed var(--linea);
  font-size: .95rem;
}
.corredores th {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
  border-top: none;
}
.corredores td:first-child { font-family: var(--serif); font-size: 1.25rem; }
.corredores td em { color: var(--rojo); font-style: normal; }
.corredores .num { font-family: var(--mono); font-size: .85rem; color: var(--gris); }
@media (max-width: 40rem) {
  .corredores .opcional { display: none; }
}

/* ---------- FLOTA · planos técnicos ---------- */
.plano {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(4rem, 10vh, 7rem) var(--margen) 0;
}
.plano__marco {
  border: 1px solid var(--linea);
  background:
    radial-gradient(circle at 1px 1px, rgba(109,104,98,.16) 1px, transparent 1.5px) 0 0/28px 28px,
    var(--papel);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  position: relative;
  box-shadow: var(--sombra);
}
.plano__marco::before {
  content: attr(data-plano);
  position: absolute;
  top: .8rem;
  right: 1rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--gris);
  text-transform: uppercase;
}
.plano__svg { width: 100%; height: auto; display: block; }

.sil-linea { stroke: var(--tinta); stroke-width: 1.6; fill: none; }
.sil-fina  { stroke: var(--gris);  stroke-width: 1; fill: none; opacity: .55; }
.sil-suelo { stroke: var(--gris); stroke-width: 1; stroke-dasharray: 10 8; opacity: .4; }
.sil-luz   { fill: var(--rojo); }
.sil-cota  { stroke: var(--rojo); stroke-width: 1; fill: none; opacity: .8; }
.sil-cota-txt {
  font-family: var(--mono);
  font-size: 13px;
  fill: var(--rojo);
  letter-spacing: .08em;
}

.plano__pie {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-top: 2.2rem;
}
.plano__nombre {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.16;
}
.plano__nombre em { color: var(--rojo); }
.plano__nombre + p { color: var(--gris); margin-top: 1rem; max-width: 30rem; }

.ficha__datos div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-top: 1px dashed var(--linea);
  font-family: var(--mono);
  font-size: .82rem;
}
.ficha__datos dt { color: var(--gris); text-transform: uppercase; letter-spacing: .08em; }
.ficha__datos dd { text-align: right; }
@media (max-width: 56rem) {
  .plano__pie { grid-template-columns: 1fr; }
}

/* visual de palets */
.palets {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 6px;
  max-width: 30rem;
  margin-top: 1.5rem;
}
.palets span {
  aspect-ratio: 1.25;
  border: 1px solid var(--linea);
  background: transparent;
  transition: background .3s, border-color .3s;
}
.palets span.lleno { background: var(--rojo-t); border-color: var(--rojo); }

/* ---------- NOSOTROS · tacógrafo ---------- */
.tacografo {
  position: relative;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(4rem, 10vh, 7rem) var(--margen) 0;
}
.tacografo__lienzo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  min-height: 70vh;
}
.tacografo__disco { width: min(100%, 34rem); margin: 0 auto; }
.tacografo__disco svg { width: 100%; height: auto; display: block; }

.taco-aro   { stroke: var(--gris); fill: none; opacity: .45; }
.taco-tick  { stroke: var(--gris); opacity: .5; }
.taco-tick-h{ stroke: var(--tinta); }
.taco-texto { font-family: var(--mono); font-size: 10.5px; fill: var(--gris); letter-spacing: .14em; }
.taco-centro{ font-family: var(--serif); font-size: 15px; fill: var(--tinta); }
.taco-aguja { stroke: var(--rojo); stroke-width: 2; }
.taco-traza { stroke: var(--rojo); fill: none; opacity: .85; }

.tacografo__relato { min-height: 16rem; }
.tacografo__año {
  font-family: var(--serif);
  font-size: clamp(2.9rem, 6.2vw, 4.8rem);
  line-height: 1;
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
}
.tacografo__hecho {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1.22;
  margin-top: 1rem;
  max-width: 24ch;
}
.tacografo__detalle { color: var(--gris); margin-top: 1rem; max-width: 38ch; }
@media (max-width: 56rem) {
  .tacografo__lienzo { grid-template-columns: 1fr; }
  .tacografo__relato { min-height: 14rem; }
}

.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.duo__persona {
  border: 1px solid var(--linea);
  background: var(--papel);
  box-shadow: var(--sombra);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.duo__persona p.duo__inicial {
  font-family: var(--serif);
  font-size: 4rem;
  line-height: 1;
  color: var(--rojo);
}
.duo__persona h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.8rem;
  margin: .8rem 0 .5rem;
}
.duo__rol {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 1rem;
}
.duo__persona p { color: var(--gris); font-size: .98rem; }
@media (max-width: 40rem) { .duo { grid-template-columns: 1fr; } }

/* números (nosotros) */
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); }
.numeros__item { padding: .5rem 2.5rem .75rem 0; }
.numeros__item + .numeros__item { padding-left: 2.5rem; border-left: 1px dashed var(--linea); }
.numeros__item dt {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: .75rem;
}
.numeros__item dd {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5.2vw, 4.2rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.numeros__unidad { color: var(--rojo); font-size: .55em; }
@media (max-width: 56rem) {
  .numeros { grid-template-columns: 1fr; }
  .numeros__item { padding: 1.5rem 0; }
  .numeros__item + .numeros__item { padding-left: 0; border-left: none; border-top: 1px dashed var(--linea); }
}

/* ---------- PRESUPUESTO · carta de porte ---------- */
.cmr {
  border: 1px solid var(--gris);
  background: var(--papel);
  box-shadow: var(--sombra);
  position: relative;
}
.cmr__cabecera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--gris);
}
.cmr__titulo {
  font-family: var(--senal);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.cmr__num {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--rojo);
  letter-spacing: .1em;
}
.cmr__cuerpo {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.cmr .campo {
  padding: 1.1rem 1.5rem 1.3rem;
  border-bottom: 1px solid var(--linea);
  position: relative;
}
.cmr .campo:nth-child(odd) { border-right: 1px solid var(--linea); }
.cmr .campo--ancho { grid-column: 1 / -1; border-right: none !important; }

.campo label {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: .5rem;
}
.campo__n {
  font-family: var(--mono);
  font-size: .66rem;
  color: var(--rojo);
  border: 1px solid var(--rojo);
  padding: .05rem .35rem;
}
.campo input, .campo select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--linea);
  color: var(--tinta);
  font-family: var(--grot);
  font-size: 1.05rem;
  padding: .4rem 0;
  border-radius: 0;
  transition: border-color .25s;
}
.campo select { appearance: none; cursor: pointer; }
.campo select option { background: var(--papel); color: var(--tinta); }
.campo input::placeholder { color: #b8b1a9; }
.campo input:focus, .campo select:focus { outline: none; border-bottom-color: var(--rojo); }
.campo input.campo--falta, .campo select.campo--falta { border-bottom-color: #c0392b; }
.campo input[type="date"] { color-scheme: light; }

.cmr__firma {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding: 1.6rem 1.5rem;
}
.presu__error { font-size: .85rem; color: #c0392b; padding: 0 1.5rem 1rem; }
.presu__nota {
  font-size: .78rem;
  color: var(--gris);
  padding: 0 1.5rem 1.4rem;
}

.sello {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rojo);
  border: 1.5px dashed var(--rojo);
  padding: .7rem 1.1rem;
  transform: rotate(-6deg);
  opacity: .85;
  user-select: none;
}

@media (max-width: 40rem) {
  .cmr__cuerpo { grid-template-columns: 1fr; }
  .cmr .campo:nth-child(odd) { border-right: none; }
  .cmr__firma .btn { width: 100%; }
  .sello { margin: 0 auto; }
}

/* servicios */
.servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.svc {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--rojo-fondo);
  box-shadow: var(--sombra);
  padding: clamp(1.4rem, 2.5vw, 2rem);
}
.svc h2, .svc h3 {
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -.01em;
  margin-bottom: .6rem;
}
.svc p { color: var(--gris); font-size: .97rem; }

/* proceso en pasos */
.pasos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: paso;
}
.paso__n {
  display: inline-block;
  font-family: var(--mono);
  font-size: .85rem;
  color: #fff;
  background: var(--rojo-fondo);
  padding: .3rem .65rem;
  margin-bottom: 1rem;
}
.paso h3 {
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -.01em;
  margin-bottom: .5rem;
}
.paso p { color: var(--gris); font-size: .95rem; }

/* preguntas frecuentes */
.faq { max-width: 46rem; }
.faq__item {
  border-top: 1px solid var(--linea);
  padding: .4rem 0;
}
.faq__item:last-child { border-bottom: 1px solid var(--linea); }
.faq__item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  padding: .8rem 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  color: var(--rojo);
  font-weight: 600;
  flex-shrink: 0;
}
.faq__item[open] summary::after { content: "–"; }
.faq__item > p { color: var(--gris); padding: 0 0 1.1rem; max-width: 42rem; }

/* contacto */
.contacto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}
.contacto__bloque h3 {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 1rem;
}
.contacto__bloque p { color: var(--gris); }
.contacto__bloque p + p { margin-top: .8rem; }
.contacto__grande {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--tinta);
  text-decoration: none;
}
.contacto__grande:hover { color: var(--rojo); }
@media (max-width: 56rem) { .contacto { grid-template-columns: 1fr; } }

/* ---------- cabecera de página interior ---------- */
.portada {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(8rem, 18vh, 12rem) var(--margen) 0;
}
.portada .eyebrow { margin-bottom: 1rem; }
.portada__titulo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.8vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
  max-width: 18ch;
}
.portada__titulo em { color: var(--rojo); }
.portada__sub { color: var(--gris); max-width: 34rem; margin-top: 1.5rem; }

/* ---------- 404 ---------- */
.perdido {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 0 var(--margen);
  position: relative;
  overflow: hidden;
}
.perdido::before {
  /* línea discontinua que se pierde en la nada */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 38vh;
  background: repeating-linear-gradient(var(--linea) 0 14px, transparent 14px 30px);
  transform: perspective(300px) rotateX(55deg);
  transform-origin: bottom;
}
.perdido__codigo {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .3em;
  color: var(--rojo);
  margin-bottom: 1.2rem;
}
.perdido h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  line-height: 1;
  max-width: 16ch;
}
.perdido h1 em { color: var(--rojo); }
.perdido p { color: var(--gris); margin: 1.4rem 0 2.2rem; }

/* ---------- pie ---------- */
.pie {
  margin-top: clamp(5rem, 12vh, 9rem);
  padding: 3rem var(--margen) 3.5rem;
  background: var(--tinta);
  color: #f4f1ee;
  border-top: 4px solid var(--rojo-fondo);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}
.pie__marca { font-family: var(--serif); font-size: 1.2rem; }
.pie__marca em { color: #ef6a5f; }
.pie__nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.pie__nav a, .pie__copy { font-size: .8rem; color: #a8a29b; }
.pie__nav a:hover { color: #f4f1ee; text-decoration-color: #ef6a5f; }
.pie__contacto { font-size: .9rem; }
.pie__contacto a { color: #f4f1ee; text-decoration-color: #6b665f; }
.pie__contacto a:hover { text-decoration-color: #ef6a5f; }

/* ---------- páginas legales ---------- */
.legal { max-width: 44rem; margin: 0 auto; padding: 9rem var(--margen) 4rem; }
.legal h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  margin-bottom: 2.5rem;
}
.legal h2 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; margin: 2.5rem 0 .8rem; }
.legal p, .legal li { color: var(--gris); }
.legal ul { padding-left: 1.2rem; margin-top: .6rem; }
.legal .aviso-todo {
  border: 1px dashed var(--rojo);
  color: var(--rojo);
  padding: 1rem 1.25rem;
  font-family: var(--mono);
  font-size: .82rem;
  margin-bottom: 2.5rem;
}

/* ─── botón flotante de WhatsApp ─────────────────────────── */
.btn-wa {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 25;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(22, 20, 15, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-wa:hover {
  transform: scale(1.07);
  box-shadow: 0 8px 22px rgba(22, 20, 15, 0.3);
}
.btn-wa svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: currentColor;
}
/* en el home, el cuadro de sonido vive abajo a la derecha: nos subimos */
.con-conduccion .btn-wa { bottom: 4.5rem; }
@media (max-width: 640px) {
  .btn-wa { right: 0.9rem; bottom: 0.9rem; }
}

/* lema bajo la marca en el pie: el sello de autoridad en cada página */
.pie__lema {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #a8a29b;
  margin: .2rem 0 .4rem;
}