/* ===================================================================
   TELVE C.A. — Talleres Eléctricos Venezolanos
   Colores emblema: verde petróleo #336666 · rojo #c62828 · gris claro
   Fuentes: Anton (títulos) · Oswald (etiquetas) · Barlow (texto) · IBM Plex Mono
   =================================================================== */

:root {
  --teal:        #336666;
  --teal-dark:   #244d4d;
  --teal-darker: #1b3b3b;
  --red:         #c62828;
  --red-bright:  #e23b2e;
  --bg:          #f4f6f6;
  --surface:     #ffffff;
  --surface-2:   #eaf0ef;
  --text:        #1f2b2b;
  --text-muted:  #5c6b6b;
  --border:      #dbe3e2;

  /* Escala de espaciado — tomada tal cual de DESIGN.md (spacing.*), para que
     el ritmo vertical deje de ser números sueltos por sección (78/72/64/52…)
     y pase a salir de una sola escala declarada. */
  --space-xs:  8px;
  --space-sm:  14px;
  --space-md:  20px;
  --space-lg:  32px;
  --space-xl:  56px;
  --space-2xl: 78px;   /* padding de sección en escritorio */

  --pad-x: var(--space-xl);   /* margen lateral de página */

  /* Curvas de movimiento. Las integradas del navegador (ease, ease-out) son
     demasiado suaves y hacen que todo se sienta lento. Estas dos gobiernan
     el sitio; el rebote de las tarjetas es aparte y está registrado como
     decisión de marca. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);      /* entradas y salidas */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);     /* movimiento en pantalla */

  /* Rayas diagonales muy tenues sobre fondo oscuro. Ya estaban escritas a
     mano en .split__media; se nombran aquí porque los heroes de las páginas
     internas las reusan y no conviene tener el mismo valor copiado en dos
     sitios. Es la misma familia de textura que las fichas del equipo y los
     marcadores de foto, solo que en su versión más suave. */
  --rayas-claras: repeating-linear-gradient(45deg,
    rgba(255,255,255,.04), rgba(255,255,255,.04) 14px, transparent 14px, transparent 28px);

  /* Misma raya, pero más separada y algo más tenue. La versión de 14px se
     diseñó para bloques chicos (fichas del equipo, marcadores de foto); a lo
     ancho de un hero de 1440px esa frecuencia se vuelve inquieta y produce
     muaré. A 22px el material se reconoce igual y la banda se queda quieta. */
  --rayas-tenues: repeating-linear-gradient(45deg,
    rgba(255,255,255,.035), rgba(255,255,255,.035) 22px, transparent 22px, transparent 44px);

  /* El velo del hero, aparte para que las páginas internas puedan
     superponerle las rayas sin repetir los tres puntos de color. */
  --hero-velo: linear-gradient(150deg,
    rgba(27,59,59,.92) 0%, rgba(36,77,77,.90) 55%, rgba(51,102,102,.88) 100%);
}

@media (max-width: 900px) {
  /* DESIGN.md §Layout: 78px → 56px de sección, 24px de margen lateral. */
  :root { --pad-x: 24px; --space-2xl: 56px; }
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--teal-darker); }
::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 6px; border: 2px solid var(--teal-darker); }
::-webkit-scrollbar-thumb:hover { background: var(--red); }
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* La navegación entre secciones, el botón de marca y los enlaces "ver más"
   antes eran <span> con un onclick: no se podía llegar a ellos con Tab ni
   activarlos con Enter. Ahora son <button> reales; este reset les quita la
   apariencia nativa para que se vean exactamente igual que antes. */
.nav__brand, .nav__link, .link-arrow {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  /* Los controles de formulario no heredan text-transform/letter-spacing del
     contenedor como sí lo hacía el <span>: hay que pedirlo explícitamente o
     la navegación se ve en minúscula. */
  text-transform: inherit;
  letter-spacing: inherit;
}

/* ---------- Foco visible (teclado) ----------
   Un solo anillo para todo el sitio. Se usa :focus-visible para que el
   anillo salga al navegar con teclado pero no al hacer clic con el mouse. */
:focus-visible {
  outline: 3px solid var(--red-bright);
  outline-offset: 3px;
  border-radius: 4px;   /* {rounded.sm} */
  /* El anillo crece desde el borde en vez de aparecer de golpe: ayuda a
     seguir el foco cuando se tabula rápido por el menú. */
  transition: outline-offset .12s var(--ease-out);
}
/* Sobre fondo verde oscuro el rojo no resalta lo suficiente: allí el anillo
   va en blanco. */
.nav :focus-visible,
.hero :focus-visible,
.split__body :focus-visible,
.cta-center :focus-visible,
.band--teal :focus-visible,
.footer :focus-visible {
  outline-color: #fff;
}

/* Enlace de salto: oculto hasta que recibe foco con Tab. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--red);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;      /* {typography.label} */
  padding: 14px 20px;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Barlow', sans-serif;
  min-height: 100vh;
}

/* ---------- Utilidades ---------- */
.container { max-width: 1280px; margin: 0 auto; }
.center { text-align: center; }
.mb-18 { margin-bottom: 18px; }
.mb-40 { margin-bottom: 40px; }
.mt-18 { margin-top: 18px; }

/* ---------- Encabezado de sección (etiqueta + título) ---------- */
/* La etiqueta va junto al título (no apilada encima) para que se lea como
   una ficha técnica: código de sección + título, no un "kicker" genérico. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 24px;
  row-gap: 10px;
  margin-bottom: 40px;
}
.section-head--tight { margin-bottom: 18px; }
.section-head > .h2, .section-head > .h2--sm { margin: 0; flex: 1 1 260px; }

.section-head__label {
  flex: none;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--red);
  padding-right: 22px;
  border-right: 1px solid var(--border);
}
.section-head--dark .section-head__label { color: #ffd0cb; border-right-color: rgba(255,255,255,.25); }

@media (max-width: 560px) {
  .section-head { flex-direction: column; align-items: flex-start; }
  .section-head__label { border-right: none; padding-right: 0; }
  .section-head > .h2, .section-head > .h2--sm { flex-basis: auto; }
}

/* Variante para h1 de hero: etiqueta como placa/sello sobre el titular
   (en vez de línea flotante) para no competir con un título tan grande. */
.section-head--hero {
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
}
.section-head--hero .section-head__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  font-size: 11.5px;
}
.section-head--hero .section-head__label::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red-bright);
  flex: none;
}
.section-head--hero .hero__title { margin-top: 0; }

/* Variante centrada: reusa la placa de --hero pero centrada, para bloques
   de contenido que también están centrados (ej. "Nos avalan"). */
.section-head--center { align-items: center; margin-bottom: 40px; }
.section-head--center .h2 { flex-basis: 100%; }

.h2 {
  font-family: 'Anton', sans-serif;
  font-size: clamp(32px, 4vw, 44px);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.14;
  margin-bottom: clamp(24px, 4vw, 40px);
  color: var(--teal-dark);
}
.h2--sm { font-size: clamp(28px, 3.5vw, 38px); margin-bottom: 18px; }
.h2--light { color: #fff; }

.lead-muted { font-size: 16px; line-height: 1.65; color: var(--text-muted); }

.link-arrow {
  display: inline-flex;
  margin-top: 28px;
  align-items: center;
  gap: 8px;
  color: var(--red);
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 15px;
  cursor: pointer;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 16px;
  padding: 15px 30px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), filter .2s ease, box-shadow .2s ease;
}
.btn::before {
  content: "";
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.4s ease;
  z-index: -1;
}
.btn:hover::before { left: 100%; }
.btn:hover { filter: brightness(1.08); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--red); color: #fff; }
.btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5); font-weight: 500; }
.btn--wa { background: #25D366; color: #04210f; }
.btn--wa-compact { padding: 10px 18px; font-size: 15px; gap: 7px; }
.wa-icon { width: 15px; height: 15px; flex: none; }

/* Botón WhatsApp de la barra */
.nav__links .btn--wa {
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 18px;
  font-size: 15px;
}
/* Botón de acceso (login/registro) de la barra — mismo tamaño compacto */
.nav__links .btn--ghost {
  padding: 10px 20px;
  font-size: 14px;
  border-width: 1.5px;
}

/* ---------- Franja de emergencias ----------
   Va sobre el nav y no es pegajosa: se ve al llegar sin robarle altura
   permanente a la cabecera. El rojo señal está justificado aquí — es el
   color de acción de la marca y esto es la acción más urgente del sitio
   (DESIGN.md §The Signal Red Rule). */
.utility {
  background: var(--teal-darker);
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--pad-x);
}
.utility__emg {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;      /* {typography.label} */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b9cccb;       /* mist-300 */
  transition: color .15s ease;
}
.utility__emg svg { width: 15px; height: 15px; color: var(--red-bright); flex: none; }
.utility__label { font-weight: 500; }
.utility__num { color: #fff; font-weight: 600; letter-spacing: 0.06em; }
@media (hover: hover) and (pointer: fine) {
  .utility__emg:hover { color: #fff; }
}
@media (max-width: 560px) {
  .utility { justify-content: center; padding: 0 24px; }
  .utility__label { display: none; }   /* a este ancho manda el número */
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 56px;
  background: rgba(51, 102, 102, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 3px solid var(--red);
}
.nav__brand { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.nav__logoimg {
  height: 68px; width: auto; display: block;
  background: #fff; padding: 7px 14px; border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.nav__easa {
  height: 52px; width: auto; display: block; flex: none;
  background: #fff; padding: 5px 10px; border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.nav__logo { font-family: 'Anton', sans-serif; font-size: 24px; letter-spacing: 0.05em; color: #fff; }
.nav__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav__link { cursor: pointer; color: #d3e2e1; transition: color .15s; }
.nav__link:hover { color: #fff; }
.nav__link.is-active { color: #fff; }
/* Aviso de "hay stock" en el link de Equipos: chip rojo en línea, mismo
   idioma de acento puntual que el resto del sitio (Signal Red Rule). */
.nav__link--tag { display: inline-flex; align-items: center; gap: 8px; }
.nav__tag {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--red-bright);
  color: var(--red-bright);
  line-height: 1;
}

/* Barra roja deslizante bajo el enlace apuntado / activo */
.nav__indicator {
  position: absolute;
  left: 0; top: 0; width: 0; height: 3px;
  background: var(--red);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: left .25s ease, width .25s ease, top .25s ease, opacity .2s ease;
}

.burger {
  display: none;
  align-items: center; justify-content: center;
  background: transparent; border: 2px solid rgba(255,255,255,.5);
  border-radius: 6px; width: 44px; height: 44px; cursor: pointer; padding: 0;
}
.burger span {
  display: block; width: 20px; height: 2px; background: #fff; position: relative;
  transition: opacity .15s linear;
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #fff;
  transition: transform .2s var(--ease-out);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
/* Morfa a X con el menú abierto: antes el ícono se quedaba igual y solo
   el panel de abajo avisaba que había cambiado de estado. */
.burger[aria-expanded="true"] span { opacity: 0; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: var(--space-2xl) var(--pad-x);
  background: var(--hero-velo), var(--teal);
  color: #fff;
  border-bottom: 3px solid var(--red);
}
/* Los heroes de las páginas internas (Servicios, Equipos, Nosotros,
   Contacto) no tienen foto: eran una banda de color plano y se sentían sin
   terminar al lado del de Inicio. Las rayas les dan cuerpo sin una sola
   imagen nueva y los amarran con el resto del sistema. */
.hero--sub {
  padding: var(--space-2xl) var(--pad-x) var(--space-xl);
  background: var(--rayas-tenues), var(--hero-velo), var(--teal);
}

/* ----- Carrusel del hero ----- */
.hero--slider { overflow: hidden; }
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity .9s ease, transform 6s cubic-bezier(0.25, 1, 0.5, 1);
}
.hero__slide.is-active { opacity: 1; transform: scale(1); }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  /* Piso de opacidad subido de .60 a .75 en el extremo: por debajo de eso
     una foto clara en ese borde podía bajar el contraste del texto blanco
     debajo del mínimo WCAG. */
  background:
    linear-gradient(150deg, rgba(20,45,45,.86) 0%, rgba(27,59,59,.72) 55%, rgba(36,77,77,.75) 100%);
}
.hero--slider .hazard-top { z-index: 3; }
.hero--slider .hero__inner { position: relative; z-index: 3; }

.hero__dots {
  position: absolute; z-index: 4;
  bottom: 18px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 9px;
}
/* El punto se ve de 10px pero el área que responde al clic mide 24×24, el
   mínimo que pide WCAG 2.5.8 para objetivos de puntero. El relleno es
   transparente: background-clip lo deja fuera del color. */
.hero__dot {
  width: 10px; height: 10px; border-radius: 50%;
  box-sizing: content-box;
  padding: 7px;
  border: none; font: inherit;
  background: rgba(255,255,255,.45);
  background-clip: content-box;
  cursor: pointer; transition: background .15s, width .15s;
}
.hero__dot.is-active { background: var(--red); width: 26px; border-radius: 6px; }
.hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Ocultar controles si aún no hay imágenes cargadas */
.hero__dots[hidden] { display: none; }
.hazard-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: repeating-linear-gradient(45deg, var(--red), var(--red) 16px, #1b3b3b 16px, #1b3b3b 32px);
  background-size: 45.25px 45.25px;
  animation: hazardMove 2s linear infinite;
}
@keyframes hazardMove {
  from { background-position: 0 0; }
  to { background-position: -45.25px 0; }
}
.hero__inner { max-width: 860px; position: relative; }
.hero__title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(42px, 6.5vw, 70px);
  /* Anton en mayúscula a 0.98 es altura de valla publicitaria: las líneas
     se tocan y el bloque se lee como un muro. 1.06 respira sin perder el
     peso de letrero. */
  line-height: 1.06;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0 0 22px;
}
.hero__title--sm { font-size: clamp(36px, 5.5vw, 58px); line-height: 1.06; margin-bottom: 16px; }
.hero__lead { font-size: 20px; line-height: 1.55; color: #dbe7e6; margin: 0 0 34px; max-width: 620px; }
.hero--sub .hero__lead { font-size: 18px; margin-bottom: 0; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Spec strip ---------- */
.specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--teal-dark);
}
.specs__item { padding: 26px 40px; border-right: 1px solid rgba(255,255,255,.12); }
.specs__item:first-child { padding-left: var(--pad-x); }
.specs__item:last-child { border-right: none; }
.specs__num { font-family: 'Anton', sans-serif; font-size: 34px; color: #fff; }
.specs__label {
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #a9c4c3;
}

/* ---------- Secciones y grids ---------- */
.section { padding: var(--space-2xl) var(--pad-x); }
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: 1fr 1fr; gap: 40px; }
.grid--center { align-items: center; }
.grid--gap-lg { gap: 56px; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  border-top: 3px solid var(--red);
  box-shadow: 0 2px 10px rgba(27,59,59,.05);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 12px 24px rgba(27,59,59,.12);
  }
}
/* Caja normal, no mayúscula. La regla de mayúsculas de DESIGN.md es para
   texto FUNCIONAL (nav, botón, tag, etiqueta de campo); estos son
   encabezados de contenido y estaban en mayúscula por arrastre. Entre
   Anton y Oswald casi todo en la página era condensado y en caja alta, sin
   un solo contraste de ancho — eso es lo que se leía como brusco. */
.card__title {
  font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600;
  line-height: 1.3; margin-bottom: 10px; color: var(--teal-dark);
}
.card__title--lg { font-size: 22px; }
.card__text { font-size: 15px; color: var(--text-muted); line-height: 1.55; }
.card__img {
  width: 100%; height: 160px; object-fit: cover;
  border-radius: 6px; margin-bottom: 14px;
  cursor: zoom-in;
}
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,26,25,.85); cursor: zoom-out; padding: 20px;
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.card__del {
  display: inline-block; margin-top: 14px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); transition: color .15s;
}
.card__del:hover { color: var(--red); }

/* Variante plana: mismo contenido (título + texto), sin caja/sombra —
   se usa en listados de 3 elementos donde el número/borde de color eran
   un adorno reflejo, no información. El acento rojo se conserva como una
   pequeña marca, no como fondo o borde de color. */
.grid--divided { gap: 0; border-top: 1px solid var(--border); }
.card--plain {
  background: none; border: none; border-radius: 0; box-shadow: none;
  padding: 36px 32px;
  transform: none !important;
}
.card--plain:hover { box-shadow: none !important; }
.grid--divided .card--plain { border-left: 1px solid var(--border); }
.grid--divided .card--plain:first-child { border-left: none; padding-left: 0; }
.grid--divided .card--plain:last-child { padding-right: 0; }
.card--plain::before {
  content: ""; display: block; width: 28px; height: 3px;
  background: var(--red); margin-bottom: 18px;
}
/* Con insignia no va además el guion: es el mismo acento rojo dos veces. Se
   apaga solo aquí; las tarjetas del catálogo, que también son .card--plain
   (las arma equipos.js), lo conservan. */
.card--ico::before { display: none; }
@media (max-width: 900px) {
  .grid--divided { grid-template-columns: 1fr !important; border-top: none; }
  .grid--divided .card--plain {
    border-left: none !important; padding: 28px 0;
    border-top: 1px solid var(--border);
  }
  .grid--divided .card--plain:first-child { border-top: none; }
}

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1.05fr; background: var(--teal); color: #fff; }
.split__media {
  background: var(--rayas-claras), var(--teal-dark);
  min-height: 380px; display: flex; align-items: center; justify-content: center;
}
.split__body { padding: var(--space-2xl) var(--pad-x); display: flex; flex-direction: column; justify-content: center; }

/* Panel dividido en 3 (fundador / gerente / dirección) */
.split__team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  align-items: stretch;
  justify-items: stretch;
  justify-content: normal;
  min-height: 420px;
}
.team {
  position: relative; margin: 0; overflow: hidden; height: 100%;
  background: repeating-linear-gradient(45deg, #24272c, #24272c 14px, #1e2126 14px, #1e2126 28px);
  border-right: 1px solid rgba(0,0,0,.25);
  display: flex; align-items: flex-end;
}
.team:last-child { border-right: none; }
.team__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%; z-index: 0;
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
@media (hover: hover) and (pointer: fine) {
  .team:hover .team__img { transform: scale(1.06); }
}
.team__cap {
  position: relative; z-index: 1; width: 100%;
  background: linear-gradient(to top, rgba(14,22,20,.92) 0%, rgba(14,22,20,.72) 70%, rgba(14,22,20,0) 100%);
  color: #fff; padding: 22px 14px 12px; text-align: center;
}
.team__name {
  display: block; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 14.5px; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.2;
}
@media (max-width: 560px) {
  .split__team { min-height: 300px; }
  .team__name { font-size: 12.5px; }
}
.split__body .h2 { color: #fff; }
.split__body .lead-muted { color: #d5e3e2; }
.split__body .link-arrow { color: #fff; }

/* ---------- Media placeholders ---------- */
.media {
  background:
    repeating-linear-gradient(45deg, #dde5e4, #dde5e4 14px, #e9efee 14px, #e9efee 28px);
  min-height: 250px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
}
.media--rounded { border-radius: 8px; }
.media--tall { min-height: 380px; }

/* ----- Mapa incrustado (Google Maps) ----- */
.map {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #e8ede9;
}
.map__frame { display: block; width: 100%; height: 320px; border: 0; }
.map__btn {
  position: absolute; bottom: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--teal-dark); color: #fff;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 13px;
  padding: 10px 16px; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.map__btn:hover { background: var(--red); }
.map__btn svg { width: 15px; height: 15px; }
@media (max-width: 560px) { .map__frame { height: 260px; } }
.ph {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #6f8180;
  background: #ffffffcc; padding: 8px 14px; border-radius: 6px;
}

/* Imágenes reales: cubren su recuadro. Si el archivo no existe todavía,
   la imagen se elimina sola (onerror) y queda el marcador de fondo. */
.split__media, .service__media, .media { position: relative; overflow: hidden; }
.media__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* ---------- Servicios: gabinete de herramientas ----------
   FORM: "Gabinete de herramientas" (impeccable seed 9a10dead, candidate 5/7).
   Cuatro servicios = cuatro cajones reales de un gabinete de taller, con
   jaladera y porta-etiqueta metálico. <details>/<summary> nativo: el
   despliegue es gratis, accesible y sin JS propio (ver script.js). Dentro de
   cada cajón sobrevive la ficha técnica (descripción + tabla de capacidades)
   que ya funcionaba — el cajón es el envoltorio nuevo, no un reemplazo del
   contenido que ya se había afinado. */
.service-list { padding: var(--space-2xl) var(--pad-x); }

/* El cuerpo oscuro del gabinete: los cajones son más claros que el marco,
   separados por una rendija de 4px del mismo oscuro — así se lee la juntura
   entre cajones sin dibujar una línea decorativa aparte. */
.cabinet {
  background: var(--teal-darker);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 10px rgba(27,59,59,.05);
}

.drawer { border-radius: 4px; overflow: hidden; }

/* ----- Frente del cajón (control de apertura) ----- */
.drawer__front {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  background: var(--teal);
  cursor: pointer;
  list-style: none;
  transition: filter .15s ease, transform 120ms var(--ease-out);
}
.drawer__front::-webkit-details-marker { display: none; }
.drawer__front::marker { content: ""; }
.drawer__front:hover { filter: brightness(1.06); }
/* Feedback de "agarré la jaladera": confirma el click antes de que
   termine de desplegarse el cajón (450ms). */
.drawer__front:active { transform: scale(0.98); }
/* Blanco, no rojo: rojo sobre el teal del cajón da ~1.1:1 de contraste,
   muy por debajo del 3:1 mínimo WCAG para indicadores de foco. */
.drawer__front:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

/* La jaladera es el punto de acción: por eso lleva el rojo de marca, el
   único color reservado para "aquí se actúa" (DESIGN.md §Signal Red Rule). */
.drawer__pull {
  flex: none;
  width: 38px; height: 8px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 2px 0 rgba(0,0,0,.22);
}
.drawer__front:hover .drawer__pull { background: var(--red-bright); }

/* Porta-etiqueta metálico: placa blanca con dos remaches, como la que
   llevan los cajones de un gabinete de taller de verdad. El título del
   servicio es contenido, no una etiqueta funcional, así que va en caja
   normal (DESIGN.md §Heading Case Rule), nunca en mayúscula. */
.drawer__plate {
  position: relative;
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;   /* {rounded.xs} */
  padding: 10px 24px;
}
.drawer__plate::before, .drawer__plate::after {
  content: "";
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.25);
}
.drawer__plate::before { left: 8px; }
.drawer__plate::after { right: 8px; }
.drawer__label {
  display: block;
  margin: 0;            /* es un <h2>: sin el margen que trae por defecto */
  font-family: 'Oswald', sans-serif;
  font-size: 19px;      /* {typography.title-xs} */
  font-weight: 600;
  line-height: 1.3;
  color: var(--teal-dark);
}

.drawer__chevron {
  flex: none;
  width: 18px; height: 18px;
  color: var(--teal-darker);
  transition: transform .3s var(--ease-out);
}
.drawer[open] .drawer__chevron { transform: rotate(180deg); }

/* ----- Contenido del cajón -----
   Trampa de grid-rows para animar un <details> sin JS: se pisa el
   display:none nativo del contenido cerrado con display:grid propio y se
   anima 0fr -> 1fr. overflow:hidden en el hijo evita que se vea el
   contenido a medio desplegar mientras la fila crece. */
.drawer > .drawer__inner {
  display: grid;
  grid-template-rows: 0fr;
  background: var(--surface);
  transition: grid-template-rows .45s var(--ease-out);
}
.drawer[open] > .drawer__inner { grid-template-rows: 1fr; }
.drawer__inner > .drawer__content { overflow: hidden; }

.drawer__content {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-areas:
    "text  media"
    "list  list"
    "foot  foot";
  column-gap: 34px;
  padding: 28px 26px 30px;
}
.drawer--sinfoto .drawer__content {
  grid-template-columns: 1fr;
  grid-template-areas: "text" "list" "foot";
}
.drawer--sinfoto .drawer__media { display: none; }

.drawer__text {
  grid-area: text;
  font-size: 16px;      /* {typography.body} */
  color: var(--text-muted); line-height: 1.65;
  max-width: 58ch;
}

/* La lista de capacidades: filas de tabla técnica, línea fina entre datos,
   marca roja al inicio, sin sangría decorativa. */
.drawer__list {
  grid-area: list;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  margin-top: 28px;
  border-top: 1px solid var(--border);
}
.drawer__list li {
  font-size: 15px;      /* {typography.body-sm} */
  color: var(--text); line-height: 1.45;
  padding: 12px 0 12px 18px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.drawer__list li::before {
  content: "";
  position: absolute; left: 0; top: 19px;
  width: 7px; height: 2px;
  background: var(--red);
}
/* Los servicios tienen 7 capacidades: en dos columnas la última quedaba
   sola y su línea inferior cortaba a media caja. Se le deja ocupar el
   ancho completo para que la tabla cierre pareja. */
.drawer__list li:last-child:nth-child(odd) { grid-column: 1 / -1; }

.drawer__foot { grid-area: foot; padding-top: 22px; }

/* ----- Foto ----- */
/* Bloque acotado junto a la descripción, sin borde ni radio grande — el
   corte limpio la hace leer como lámina de catálogo, no como miniatura de
   tarjeta. Alto fijo: si estirara con la ficha, hoy sería medio metro de
   color plano esperando una foto. */
.drawer__media {
  grid-area: media;
  align-self: start;
  position: relative; overflow: hidden;
  border-radius: 2px;   /* {rounded.xs} */
  background:
    repeating-linear-gradient(45deg, #dde5e4, #dde5e4 14px, #e9efee 14px, #e9efee 28px);
  display: flex; align-items: center; justify-content: center;
  height: 220px;
}
/* Mini-carrusel dentro de cada servicio */
.svc-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease;
  z-index: 0;
}
.svc-slide.is-active { opacity: 1; }

/* --- PROVISIONAL: marcadores de color ---------------------------------
   Ocupan el lugar de las fotos que el cliente aún no entrega y giran con
   el mismo carrusel, para poder ver el cambio. Los tres tonos salen de la
   paleta de marca; no son colores nuevos.
   Cuando lleguen las fotos: borrar los <span class="svc-ph"> del HTML y
   este bloque de CSS. El carrusel toma las fotos reales sin más cambios. */
/* El número va en una esquina, no en el centro: en el centro chocaba con la
   etiqueta "foto · ..." y las dos juntas ensuciaban el recuadro. */
.svc-ph {
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 18px 22px;
  font-family: 'Anton', sans-serif;
  font-size: 26px;      /* {typography.headline-xs} */
  line-height: 1;
}
.svc-ph--1 { background: var(--teal);        color: rgba(255,255,255,.30); }
.svc-ph--2 { background: var(--surface-2);   color: rgba(27,59,59,.22); }
.svc-ph--3 { background: var(--teal-darker); color: rgba(255,255,255,.26); }

/* Puntitos del mini-carrusel: mismo lenguaje que los del hero, más chicos. */
.svc-dots {
  position: absolute; z-index: 3;
  bottom: 12px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 7px;
}
.svc-dots[hidden] { display: none; }
/* Mismo criterio de área que los del hero. Y ahora sí responden al clic:
   antes se veían igual que los del hero pero no hacían nada, que es peor
   que no tenerlos. */
.svc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  box-sizing: content-box;
  padding: 8px;
  border: none; font: inherit;
  background: rgba(255,255,255,.55);
  background-clip: content-box;
  cursor: pointer;
  transition: background .15s, width .15s;
}
.svc-dot.is-active { background: var(--red); width: 22px; border-radius: 4px; }
.svc-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* El marcador de texto ("foto · rebobinado") va por encima de las capas. */
.drawer__media .ph { position: relative; z-index: 2; }

.tags, .brands { display: flex; flex-wrap: wrap; gap: 10px; }
/* Chip. .tag (capacidades de una ficha de servicio) y .brand (marcas del
   cajón de suministro) son EL MISMO componente con distinto relleno de
   fondo, así que se declaran juntos. Estaban escritos por separado y el de
   marcas se fue del sistema tres veces seguidas —borde gris en vez de teal,
   15px y peso 600 en vez de 13px, y 9/16 de relleno en vez de 6/12—: cada
   arreglo dejaba la siguiente diferencia esperando. Compartiendo la regla no
   se pueden volver a separar sin querer. Radio 4px = escalón de "chips/tags
   pequeños" de DESIGN.md:271. */
.tag, .brand {
  border: 1px solid var(--teal); border-radius: 4px; padding: 6px 12px;
  font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--teal-dark);
}

/* ---------- Band ---------- */
.band {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-2xl) var(--pad-x);
}
.band .container { padding: 0; }
.band--teal { background: var(--teal-dark); color: #fff; border: none; }
.band--teal .h2 { color: #fff; }

/* ---------- Proceso ---------- */
.step { padding: 32px 28px 28px; background: var(--surface); border-radius: 8px; box-shadow: 0 2px 10px rgba(27,59,59,.05); }
/* Un ícono propio por paso en vez de un número — el orden ya lo dice el
   título ("Inspección" -> "Reparación" -> "Pruebas"); el ícono muestra
   qué es cada paso, no solo en qué lugar de la fila va. */
/* Insignia de icono. La usan los pasos de El Proceso (.step__icon) y las tres
   columnas de "Capacidad instalada" (.card__icon). Se declara una sola vez a
   propósito: cuando .brand se escribió como copia de .tag, se separaron tres
   veces seguidas sin que nadie lo notara. */
.step__icon, .card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--red); color: #fff;
  border-radius: 50%;
  margin-bottom: 18px;
}
.step__icon svg, .card__icon svg { width: 20px; height: 20px; }
.step__title {
  font-family: 'Oswald', sans-serif; font-size: 20px;
  font-weight: 600; line-height: 1.3; margin-bottom: 8px; color: var(--teal-dark);
}

/* Progresión de color a través de los 3 pasos: el avance del trabajo
   (inspección -> reparación -> entrega) también se lee en la superficie,
   no solo en el texto. Elegida en una sesión de impeccable live sobre las
   otras dos direcciones evaluadas (folio + flecha de flujo; título al mando
   del ícono). */
.grid--progress { gap: 0; }
.grid--progress .step { border-radius: 0; box-shadow: none; }
.grid--progress .step:first-child { border-radius: 8px 0 0 8px; }
.grid--progress .step:last-child { border-radius: 0 8px 8px 0; }
.grid--progress .step:nth-child(2) { background: var(--teal); }
.grid--progress .step:nth-child(3) { background: var(--teal-darker); }
.grid--progress .step:nth-child(2) .step__title,
.grid--progress .step:nth-child(3) .step__title { color: #fff; }
.grid--progress .step:nth-child(2) .card__text,
.grid--progress .step:nth-child(3) .card__text { color: rgba(255,255,255,.78); }
.grid--progress .step:nth-child(2) .step__icon,
.grid--progress .step:nth-child(3) .step__icon { background: #fff; color: var(--teal-darker); }
@media (max-width: 900px) {
  .grid--progress .step:first-child { border-radius: 8px 8px 0 0; }
  .grid--progress .step:last-child { border-radius: 0 0 8px 8px; }
}

/* ---------- Clientes ---------- */
/* Rejilla fija, no flex-wrap. Con wrap, el número de tarjetas por fila lo
   decidía el ancho disponible: a 1440 entraban 7 y la octava quedaba sola y
   centrada en una segunda fila, que parecía un descuido. Los clientes son 8,
   así que 4 y 2 columnas reparten exacto (2 filas de 4, o 4 filas de 2) y no
   dejan huérfanas en ningún tamaño de pantalla. Si algún día se agrega o se
   quita un cliente, hay que revisar este número.

   Las columnas son minmax(0, 160px) y no 160px fijos: con la medida fija, 4
   columnas pedían 682 px y entre 561 y 729 px de pantalla (tablet chica) no
   cabían — al estar centrada, la rejilla se desbordaba por los dos lados y
   cortaba la primera y la última tarjeta. Así se encogen hasta lo que quepa
   y en pantallas anchas se quedan en 160, igual que antes. */
.clients {
  display: grid; grid-template-columns: repeat(4, minmax(0, 160px));
  gap: 14px; justify-content: center;
}
.client {
  position: relative;
  background: #fff;
  border-radius: 8px;
  width: 100%; height: 84px;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 18px;
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--teal-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.client__logo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 12px 16px;
  border-radius: 8px;
  background: #fff;
}
.client--dark { background: #0e1626; color: #fff; }
.client--dark .client__logo { background: #0e1626; }
@media (max-width: 560px) {
  .clients { grid-template-columns: repeat(2, minmax(0, 132px)); }
  .client { height: 74px; }
}

/* ---------- Distribuidores ---------- */
/* Dos grupos con peso visual distinto, y no es decoración: "distribuidor
   autorizado" es una afirmación comercial que solo aplica a cuatro marcas.
   El segundo grupo conserva el recuadro pero en tono apagado, para que el
   peso en pantalla se corresponda con lo que se está afirmando. */
.brands__head {
  font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 10px;
  position: relative; padding-left: 18px;
}
/* El mismo guion rojo que marca cada fila de .drawer__list, tres líneas más
   arriba dentro de esta misma ficha. */
.brands__head::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 7px; height: 2px;
  background: var(--red);
}
.brands__head--sep { margin-top: 20px; }
.brands { display: flex; flex-wrap: wrap; gap: 12px; }
/* Métrica y tipografía: ver el bloque compartido con .tag, más arriba.
   Aquí solo va lo que diferencia a una marca de una capacidad. */
.brand { background: var(--surface); }
/* El grupo secundario conserva el recuadro pero apagado: mismo borde de
   línea que el resto de la ficha y texto en gris. El tamaño NO cambia entre
   los dos grupos — la jerarquía la llevan el color del borde y el del texto,
   que ya alcanzan; variar también el cuerpo metía un tercer tamaño de chip
   en una ficha que solo debería tener uno. */
.brand--sec {
  background: transparent; border-color: var(--border);
  color: var(--text-muted);
}

/* ---------- CTA centrado ---------- */
.cta-center { text-align: center; padding: var(--space-2xl) var(--pad-x); background: var(--teal); color: #fff; }
.cta-center .h2 { margin-bottom: 20px; color: #fff; }

/* ---------- Contacto ---------- */
.contact-info { display: flex; flex-direction: column; gap: 18px; }
.info {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 22px 26px;
}
/* Los íconos de esta sección heredan el color de su etiqueta (currentColor),
   así que el de la ficha de emergencias sale rojo y los de la tarjeta de
   referencia salen en verde petróleo sin repetir el color en ninguna regla.
   Mismo vocabulario de formas que los pasos del proceso y el botón "Cómo
   llegar": trazo de 2.4, sin relleno, extremos redondeados. El pin de
   Dirección es literalmente el mismo trazado que el del mapa. */
.info__label {
  font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--red); font-weight: 600;
  margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 9px;
}
.info__label svg { width: 17px; height: 17px; flex: none; }
.info__value { font-size: 16px; color: var(--text); line-height: 1.5; }
.info__value a { color: var(--teal-dark); font-weight: 600; }

/* Las 2 vías reales de contacto (WhatsApp, emergencias) llevan el acento
   de tarjeta de contenido (borde superior rojo) para pesar más que el
   resto — misma firma que las tarjetas de servicio, no un elemento nuevo. */
.contact-primary { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.info--primary { border-top: 3px solid var(--red); }
.info--primary .btn--wa { margin-top: 16px; }
.info--emergency .info__value { color: var(--red); font-weight: 700; }

/* Referencia secundaria (dirección, oficina, correo actual, horario): una
   sola tarjeta con filas, no 4 cajas repetidas — es información de
   consulta, no una acción, así que pesa menos. */
.contact-ref {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 26px; margin: 0;
}
.contact-ref__row {
  /* 135px y no 110: la columna ahora carga ícono + etiqueta, y "Dirección"
     es la más larga de las cuatro. */
  display: grid; grid-template-columns: 135px 1fr; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.contact-ref__row:last-child { border-bottom: none; }
.contact-ref__row dt {
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 600;
  padding-top: 2px; margin: 0;
  display: flex; align-items: center; gap: 9px;
}
/* El ícono lleva el verde de marca; la etiqueta se queda apagada, que es su
   papel: esto es información de consulta, no una acción. */
.contact-ref__row dt svg { width: 16px; height: 16px; flex: none; color: var(--teal); }
.contact-ref__row dd {
  font-size: 15px; color: var(--text); line-height: 1.5; margin: 0;
}
.contact-ref__row dd a { color: var(--teal-dark); font-weight: 600; }

.contact-side { display: flex; flex-direction: column; gap: 16px; }
.facade {
  position: relative; overflow: hidden;
  border-radius: 8px; border: 1px solid var(--border);
  min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #dde5e4, #dde5e4 14px, #e9efee 14px, #e9efee 28px);
}
.facade__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 34%;
}

/* ---------- Modal de acceso (login / registro) ---------- */
.authModal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.authModal[hidden] { display: none; }
.authModal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 26, 25, .55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.authModal__box {
  position: relative;
  width: 100%; max-width: 380px;
  background: var(--surface);
  border-radius: 8px;
  border-top: 4px solid var(--red);
  box-shadow: 0 24px 60px rgba(15,26,25,.35);
  padding: 40px 32px 32px;
  animation: authIn .28s var(--ease-out);
}
@keyframes authIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
html[data-motion="reduced"] .authModal__box { animation: none; }

.authModal__close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text-muted); cursor: pointer;
  transition: background .15s, color .15s;
}
.authModal__close:hover { background: var(--surface-2); color: var(--text); }
.authModal__close svg { width: 18px; height: 18px; }

.authModal__tabs[hidden] { display: none; }
.authModal__tabs {
  display: flex; gap: 4px; background: var(--surface-2);
  border-radius: 8px; padding: 4px; margin-bottom: 24px;
}
.authModal__tab {
  flex: 1; padding: 9px 0; border: none; background: transparent;
  border-radius: 6px; cursor: pointer;
  font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted);
  transition: background .15s, color .15s;
}
.authModal__tab.is-active { background: var(--surface); color: var(--teal-dark); box-shadow: 0 1px 4px rgba(0,0,0,.1); }

.authModal__title {
  font-family: 'Anton', sans-serif; font-size: 22px; font-weight: 400;
  color: var(--teal-dark); text-transform: uppercase; letter-spacing: .01em;
  margin-bottom: 20px;
}

.authModal__form { display: flex; flex-direction: column; }
.authModal__form[hidden] { display: none; }
.authModal__label {
  font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  margin: 12px 0 6px;
}
.authModal__input {
  width: 100%;
  font-family: 'Barlow', sans-serif; font-size: 15px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 11px 13px;
}
.authModal__input:focus { border-color: var(--teal); outline: none; }
.authModal__submit { margin-top: 20px; width: 100%; }
/* Hueco del widget de Turnstile. El alto reservado (65px) es el del widget
   de Cloudflare: sin esto, el botón de enviar da un salto hacia abajo cuando
   el widget termina de dibujarse. min-height y no height porque en modo
   Gestionado puede crecer si le toca pedirle algo al visitante.
   Queda vacío y sin borde si el captcha está apagado o si el script de
   Cloudflare no llegó a cargar. */
.authModal__captcha { margin-top: 18px; min-height: 65px; }
.authModal__captcha:empty { min-height: 0; }
.authModal__link {
  align-self: center;
  margin-top: 12px;
  padding: 4px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13.5px;
  color: var(--teal-dark);
  text-decoration: underline;
  cursor: pointer;
}
.authModal__link:hover { color: var(--red); }
.authModal__error { color: var(--red); font-size: 13.5px; margin-top: 10px; }
.authModal__note { color: var(--teal-dark); font-size: 13.5px; margin-top: 10px; }

/* ---------- Equipos en venta (catálogo + acceso admin) ---------- */
/* Estado vacío del catálogo. Centrado y acotado en ancho: es un mensaje que
   se lee de una vez, no una columna de texto. El ícono va a trazo fino (1.6
   en vez de 2.4) y apagado — acompaña, no anuncia. */
.empty {
  max-width: 560px; margin: 0 auto;
  padding: 40px 0 8px;
  text-align: center;
}
.empty__icon { width: 46px; height: 46px; color: var(--teal); opacity: .45; }
.empty__title {
  font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600;
  color: var(--teal-dark); line-height: 1.3; margin: 16px 0 10px;
}
.empty__text { color: var(--text-muted); font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
.empty .btn--wa { display: inline-flex; }
.equipos-admin { border-top: 1px solid var(--border); padding-top: var(--space-xl); }
.equipos-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.equipos-form input,
.equipos-form select {
  width: 100%;
  font-family: 'Barlow', sans-serif; font-size: 15px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px;
}
.equipos-form input:focus,
.equipos-form select:focus { border-color: var(--teal); outline: none; }
.equipos-form__group { display: flex; flex-direction: column; gap: 12px; }
.equipos-form__group[hidden] { display: none; }
.equipos-form__label {
  font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  margin-top: 4px;
}
.equipos-form__error { color: var(--red); font-size: 14px; }
.card__tag { margin-bottom: 10px; }

/* ---------- Mi equipo (seguimiento de reparación) ---------- */
/* Indicador de etapa: 5 insignias circulares conectadas por una línea, mismo
   lenguaje visual que .step__icon/.card__icon (círculo de color + ícono
   blanco). Gris = todavía no llega, teal = ya pasó, rojo = la actual. */
.etapa-stepper { display: flex; align-items: flex-start; margin: 4px 0 12px; }
.etapa-stepper__item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  text-align: center; position: relative;
}
.etapa-stepper__item:not(:first-child)::before {
  content: ""; position: absolute; top: 15px; right: 50%; width: 100%;
  height: 2px; background: var(--border); z-index: 0;
}
.etapa-stepper__item.is-done:not(:first-child)::before,
.etapa-stepper__item.is-current:not(:first-child)::before { background: var(--teal); }
.etapa-stepper__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--border); color: #fff; position: relative; z-index: 1;
  margin-bottom: 6px;
}
.etapa-stepper__icon svg { width: 16px; height: 16px; }
.etapa-stepper__item.is-done .etapa-stepper__icon { background: var(--teal); }
.etapa-stepper__item.is-current .etapa-stepper__icon { background: var(--red); }
.etapa-stepper__label {
  font-family: 'Oswald', sans-serif; font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
  line-height: 1.25;
}
.etapa-stepper__item.is-current .etapa-stepper__label { color: var(--teal-dark); }

.proceso-notas { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.proceso-nota__texto { font-size: 14.5px; line-height: 1.5; margin: 0; }
.proceso-nota__fecha { color: var(--text-muted); font-size: 12.5px; margin: 0 0 3px; }
.proceso-nota__foto { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 6px; margin-top: 6px; cursor: pointer; }

/* Panel admin por tarjeta: avanzar de etapa y agregar nota sin salir de la tarjeta. */
.proceso-admin { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.proceso-admin input,
.proceso-admin textarea {
  width: 100%;
  font-family: 'Barlow', sans-serif; font-size: 14px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px;
}
.proceso-admin textarea { resize: vertical; min-height: 56px; }

/* Dropzone de foto: input file nativo, oculto y disparado por su label, con
   vista previa del archivo elegido antes de guardar la nota. */
.proceso-dropzone {
  position: relative;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: var(--bg);
  overflow: hidden;
  transition: border-color .15s ease;
}
.proceso-dropzone:hover,
.proceso-dropzone:focus-within { border-color: var(--teal); }
.proceso-dropzone__label {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; cursor: pointer;
  font-family: 'Barlow', sans-serif; font-size: 14px; color: var(--text-muted);
}
.proceso-dropzone__icon { width: 20px; height: 20px; flex: none; color: var(--teal); }
.proceso-dropzone__preview {
  display: block; width: 100%; max-height: 140px; object-fit: cover;
}
.proceso-dropzone[data-empty] .proceso-dropzone__preview { display: none; }

/* ---------- Menú del ícono de sesión (nav) ----------
   Dos estados bien distintos a simple vista: sin sesión es una píldora con
   texto igual a los demás botones del nav; con sesión se achica a un círculo
   de solo ícono, para que se note de un vistazo si hay sesión activa. */
.nav__auth { position: relative; }
.nav__authBtn { display: inline-flex; align-items: center; gap: 8px; transition: padding .15s ease, border-radius .15s ease; }
.nav__authIcon { width: 17px; height: 17px; flex: none; }
.nav__authBtn.is-logged-in { padding: 10px; border-radius: 50%; }
.nav__authBtn.is-logged-in .nav__authText { display: none; }
.nav__authMenu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--surface); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 6px; min-width: 160px; z-index: 60;
}
.nav__authMenu__item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 6px;
  font-family: 'Barlow', sans-serif; font-size: 14.5px; color: var(--text);
  background: transparent; border: none; cursor: pointer;
}
.nav__authMenu__item:hover { background: var(--bg); }
@media (max-width: 1300px) {
  .nav__auth { width: 100%; }
  .nav__authMenu { position: static; box-shadow: none; margin-top: 4px; }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--teal-darker); color: #b9cccb;
  padding: var(--space-xl) var(--pad-x) 0;
  font-size: 13px; border-top: 3px solid var(--red);
}
/* La marca ocupa algo más que las otras dos columnas: lleva el logotipo, el
   RIF y el sello EASA, que es una credencial y no relleno. */
/* Al quedar solo tres columnas, repartir el ancho a partes iguales dejaba un
   hueco enorme bajo la marca: las otras dos ocupan lo que miden y se agrupan
   contra el borde derecho. */
.footer__grid {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 40px 72px; align-items: start;
  max-width: 1280px; margin: 0 auto;
}
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__logo { font-family: 'Anton', sans-serif; font-size: 22px; color: #fff; letter-spacing: 0.03em; }
.footer__addr, .footer__copy {
  font-family: 'Oswald', sans-serif; letter-spacing: 0.05em;
  text-transform: uppercase; font-size: 12px;
}
.footer__easa {
  height: 44px; width: auto; margin-top: 8px;
  background: #fff; padding: 5px 9px; border-radius: 6px; align-self: flex-start;
}
/* Rosa de placa: DESIGN.md lo reserva para texto de etiqueta sobre fondo
   oscuro, que es exactamente lo que es un encabezado de columna aquí. */
.footer__head {
  font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: #ffd0cb;
  margin: 0 0 2px;
}
.footer__head--sep { margin-top: 16px; }
.footer__list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
/* mist-500 de DESIGN.md, no un tono inventado: a 10,5px el gris que había
   puesto (#7f9998) daba 3,98:1 sobre el verde del pie y no llegaba al 4,5:1
   que exige WCAG. Este da 4,87:1. */
.footer__k {
  display: block;
  font-family: 'Oswald', sans-serif; font-size: 10.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: #9aa7a7;
}
.footer__v { color: #fff; font-weight: 600; font-size: 14px; }
.footer__v--emg { color: var(--red-bright); }
.footer__txt { font-size: 13.5px; line-height: 1.55; margin: 0; }
/* Botones, no enlaces: la navegación del sitio es estado de cliente, igual
   que en la cabecera. Se les quita la apariencia de botón. */
.footer__nav {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 0.05em;
  text-transform: uppercase; color: #b9cccb;
  transition: color .15s ease;
}
.footer__nav:hover, .footer__v:hover { color: #fff; text-decoration: underline; }
.footer__nav:hover { text-decoration: none; }
/* Puente al resto de los datos de contacto (mapa, dirección, horario, correo),
   que ya no se repiten aquí. Separado de la lista de navegación: no es una
   sección más del sitio, es "sigue leyendo allá". */
.footer__more {
  margin-top: 6px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: #ffd0cb;
}
.footer__more::after { content: " →"; }
.footer__wa { align-self: flex-start; margin-top: 4px; }
.footer__bottom {
  max-width: 1280px; margin: 0 auto;
  margin-top: var(--space-lg); padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.1);
}

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Panel de ajustes (movimiento + idioma) ----------
   Botón circular fijo abajo a la derecha que despliega dos ajustes. No usa
   la franja de peligro: DESIGN.md la reserva para el hero y los marcadores
   de foto, así que aquí el acento va en rojo señal plano. */
.prefs { position: fixed; right: 20px; bottom: 20px; z-index: 60; }

.prefs__toggle {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--teal); color: #fff;
  border: 2px solid rgba(255,255,255,.25);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);   /* {shadow.action-btn} — mismo token
                                              que el botón "Cómo llegar" del mapa */
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: background .2s ease, transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (hover: hover) and (pointer: fine) {
  .prefs__toggle:hover { background: var(--teal-dark); transform: translateY(-2px); }
}
.prefs__toggle svg { width: 24px; height: 24px; }
.prefs__toggle[aria-expanded="true"] { background: var(--red); }

/* Idioma activo, pegado al círculo. Sin esto el ícono de deslizadores no le
   dice a nadie que ahí se cambia el idioma; el aviso de bienvenida solo lo
   ve quien entra por primera vez. */
.prefs__code {
  position: absolute;
  top: -4px; left: -6px;
  min-width: 26px;
  padding: 2px 5px;
  background: var(--red);
  color: #fff;
  border-radius: 4px;      /* {rounded.sm} */
  font-family: 'Oswald', sans-serif;
  font-size: 11.5px;       /* {typography.label-xs} */
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-align: center;
}
/* Con bandera el recuadro pierde el fondo rojo —la bandera trae sus propios
   colores y el rojo los ensuciaba— y gana un marco blanco que la despega
   del verde del círculo. Solo aplica si el archivo existe en img/. */
.prefs__code--bandera {
  background: var(--surface);
  padding: 2px;
  min-width: 0;
  line-height: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.28);
}
/* contain, no cover: las cuatro banderas vienen con proporciones distintas
   (1.43 a 1.89) y recortar una bandera nacional le corta el emblema. Justo
   el escudo de México es lo único que la distingue de la italiana. El
   sobrante se disimula porque el recuadro ya es blanco. */
.prefs__flag {
  display: block;
  width: 22px; height: 15px;
  object-fit: contain;
  border-radius: 2px;      /* {rounded.xs} */
}

.prefs__panel {
  position: absolute; right: 0; bottom: 66px;
  width: 232px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(27,59,59,.22);
  padding: 18px;
}
/* Apertura del panel: crece desde el botón que lo abrió, no desde su propio
   centro — eso es lo que hace legible de dónde salió. Se usa transición y no
   keyframes porque se puede abrir y cerrar rápido: la transición retoma
   desde el valor actual, un keyframe reinicia desde cero.
   El atributo hidden se conserva (el JS lo alterna), pero se le quita el
   display:none del navegador para poder animarlo; visibility saca el panel
   del orden de tabulación igual que antes. */
.prefs__panel {
  transform-origin: bottom right;
  transition: opacity .18s var(--ease-out),
              transform .18s var(--ease-out),
              visibility .18s;
}
.prefs__panel[hidden] {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: scale(.96) translateY(6px);
  pointer-events: none;
}

.prefs__group + .prefs__group { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.prefs__label {
  font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--red);
  margin-bottom: 10px; display: block;
}
.prefs__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prefs__opt {
  font-family: 'Oswald', sans-serif; font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 10px 6px; border-radius: 6px; cursor: pointer;
  background: var(--surface); color: var(--teal-dark);
  border: 1px solid var(--border);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.prefs__opt:hover { border-color: var(--teal); }
.prefs__opt[aria-pressed="true"] {
  background: var(--teal-dark); color: #fff; border-color: var(--teal-dark);
}
.prefs__hint { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; margin-top: 8px; }

/* Desplegable de idioma. Se le quita la apariencia nativa y se le dibuja
   una flecha propia para que combine con los botones de arriba; el elemento
   sigue siendo un <select> real, así que teclado y lectores de pantalla
   funcionan sin código extra. */
.prefs__select {
  width: 100%;
  font-family: 'Oswald', sans-serif; font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--teal-dark); background-color: var(--surface);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 34px 10px 12px;
  cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23244d4d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px 15px;
  transition: border-color .15s ease;
}
.prefs__select:hover { border-color: var(--teal); }
/* El menú desplegado lo pinta el sistema, no el CSS de la página: se fija
   un color legible por si el visitante usa tema oscuro. */
.prefs__select option { color: var(--text); background: var(--surface); }

@media (max-width: 560px) {
  .prefs { right: 14px; bottom: 14px; }
  .prefs__panel { width: 210px; }
}

/* ===================================================================
   PRIMERA VISITA — ventana de idioma y guía
   =================================================================== */

/* ----- Ventana de idioma (solo la primerísima visita) ----- */
.langModal {
  position: fixed; inset: 0; z-index: 260;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.langModal[hidden] { display: none; }
.langModal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 26, 25, .55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.langModal__box {
  position: relative;
  width: 100%; max-width: 340px;
  background: var(--surface);
  border-radius: 8px;
  border-top: 4px solid var(--red);
  box-shadow: 0 24px 60px rgba(15,26,25,.35);
  padding: 28px 24px 24px;
  animation: authIn .28s var(--ease-out);
}
html[data-motion="reduced"] .langModal__box { animation: none; }
.langModal__title {
  font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--red);
  margin-bottom: 16px;
}
.langModal__opts { display: grid; gap: 8px; }
.langModal__opt {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 14px;
  font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: 500;
  letter-spacing: .03em;
  color: var(--teal-dark); background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.langModal__opt:hover { border-color: var(--teal); background: var(--surface-2); }
/* contain y no cover, por el mismo motivo que .prefs__flag. */
.langModal__flag { width: 28px; height: 19px; object-fit: contain; border-radius: 2px; flex: none; }

/* ----- Guía (tutorial) -----
   El óvalo no tapa nada: el oscurecido es una sombra que se derrama HACIA
   AFUERA del recuadro, así que lo que queda dentro se ve tal cual sin
   tener que tocarle el z-index al elemento señalado. La capa entera deja
   pasar el ratón; solo la burbuja lo recibe. */
.tour { position: fixed; inset: 0; z-index: 250; pointer-events: none; }
.tour[hidden] { display: none; }
.tour__hole {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(15, 26, 25, .45);
  /* El movimiento de un paso al siguiente es lo que hace de "cámara": el
     recuadro viaja hasta el elemento nuevo en vez de saltar. */
  transition: top .45s var(--ease-in-out), left .45s var(--ease-in-out),
              width .45s var(--ease-in-out), height .45s var(--ease-in-out);
}
html[data-motion="reduced"] .tour__hole { transition: none; }
.tour__box {
  position: fixed;
  width: min(300px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(15,26,25,.3);
  padding: 16px;
  pointer-events: auto;
  transition: top .45s var(--ease-in-out), left .45s var(--ease-in-out);
}
html[data-motion="reduced"] .tour__box { transition: none; }
.tour__txt {
  font-size: 14.5px; line-height: 1.5; color: var(--text);
  margin: 0 0 14px;
}
.tour__txt[hidden] { display: none; }
.tour__nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.tour__btn {
  font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.tour__btn[hidden] { display: none; }
#tourPrev {
  margin-right: auto;
  color: var(--text-muted); background: none; border: none; padding: 0;
}
#tourPrev:hover { color: var(--teal-dark); }
.tour__btn--next { padding: 9px 18px; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 900px) {
  /* Los paddings de hero / section / service-list / band / cta-center /
     split__body ya no se repiten aquí: salen de --space-2xl y --pad-x, que
     cambian solos en este mismo breakpoint (ver :root). */

  .specs { grid-template-columns: repeat(2, 1fr); }
  .specs__item { padding: 22px 24px !important; border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); }

  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--2, .split { grid-template-columns: 1fr; gap: 28px; }
  .contact-primary { grid-template-columns: 1fr; }
  .contact-ref__row { grid-template-columns: 1fr; gap: 4px; }
  /* El cajón se apila: descripción, foto, capacidades, valores. */
  .drawer__front { padding: 15px 16px; gap: 14px; }
  .drawer__plate { padding: 9px 20px; }
  .drawer__content {
    grid-template-columns: 1fr;
    /* Foto primero: en móvil vender confianza antes de meter texto (la
       lista de hallazgos de /impeccable critique lo marcó al revés). */
    grid-template-areas: "media" "text" "list" "foot";
    padding: 22px 18px 26px;
  }
  .drawer--sinfoto .drawer__content { grid-template-areas: "text" "list" "foot"; }
  .drawer__media { height: 200px; }
  .drawer__text { margin-top: 20px; }
  .drawer__list { grid-template-columns: 1fr; margin-top: 22px; }

  .hero__title { font-size: 42px; }
  .hero__title--sm { font-size: 36px; }
  .h2 { font-size: 32px; }
  .h2--sm { font-size: 28px; }

}

@media (max-width: 560px) {
  .specs { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }

  .hero__title { font-size: 32px; }
  .hero__title--sm { font-size: 28px; }
  .h2 { font-size: 26px; }
  .hero__lead { font-size: 16px; }
}

/* 1300px y no 860px: el logo+sello+5 links+botón de sesión no entran en una
   sola fila por debajo de ~1250px (probado visualmente), así que el menú
   hamburguesa tiene que aparecer antes de esa franja, no en el punto viejo
   pensado solo para celulares. */
@media (max-width: 1300px) {
  .nav { flex-wrap: wrap; padding: 12px 20px; }
  .nav__logoimg { height: 54px; padding: 6px 10px; }
  .nav__easa { display: none; }
  .burger { display: inline-flex; }
  .nav__links {
    display: none; width: 100%; flex-direction: column;
    align-items: flex-start; gap: 8px; margin-top: 12px;
  }
  /* El menú móvil aparecía de golpe. La altura sí cambia al instante (no hay
     equivalente en transform para eso), pero el contenido entra con un
     desplazamiento corto que hace legible que se desplegó hacia abajo. */
  .nav__links.is-open {
    display: flex;
    animation: navIn .2s var(--ease-out) both;
  }
  @keyframes navIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
  .nav__link.is-active { border-bottom: none; }
  .nav__indicator { display: none; }
  .nav__links .btn--wa,
  .nav__links .btn--ghost { width: 100%; margin-top: 6px; }
  /* El botón de sesión logueada es un círculo chico a propósito (ver arriba
     .nav__authBtn.is-logged-in) — no lo estiramos como al resto. */
  .nav__links .btn--ghost.is-logged-in { width: auto; align-self: flex-start; }
}

/* ===================================================================
   ANIMACIONES (sutiles)
   =================================================================== */

/* 1) Revelado al hacer scroll (la clase .reveal la añade el JS)
   Entrada: ease-out fuerte. Con la curva genérica arrancaba blando y se
   sentía más lento de lo que dura. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* 2) Transición al cambiar de pestaña
   Estaba en 500ms con curva genérica: por encima del techo de 300ms para
   interfaz, y se notaba pesada en algo que se dispara a cada clic del menú. */
.page-anim { animation: pageIn .26s var(--ease-out) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Entrada del hero al cargar (se ve apenas abre la página) */
.hero__inner .section-head__label { animation: heroIn .7s ease both; }
.hero__inner .hero__title { animation: heroIn .7s ease .12s both; }
.hero__inner .hero__lead { animation: heroIn .7s ease .24s both; }
.hero__inner .hero__actions { animation: heroIn .7s ease .36s both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* 3) Efectos sutiles al pasar el mouse — solo en elementos donde el
   levantamiento aporta (tarjetas de proceso y logos de cliente); tags,
   marcas y las tarjetas planas ya no compiten por atención. */
.step, .client { transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s ease; }

/* Todo levantamiento por hover queda detrás de un puntero real: en pantalla
   táctil el toque dispara un hover falso y la tarjeta se quedaba levantada
   después de soltar. Afectaba a las 14 reglas :hover del sitio. */
@media (hover: hover) and (pointer: fine) {
  .step:hover   { transform: translateY(-4px) scale(1.01); box-shadow: 0 12px 24px rgba(27,59,59,.14); }
  .client:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 22px rgba(0,0,0,.20); }
}

/* ===================================================================
   4) MOVIMIENTO REDUCIDO
   El sistema propone, el visitante dispone. El JS escribe data-motion en
   <html> ("full" o "reduced") tomando como valor inicial la preferencia
   del sistema, y el panel de ajustes deja cambiarlo a mano.

   Se apaga SOLO el movimiento que ocurre sin que nadie lo pida: la franja
   en bucle, la rotación de los carruseles, el zoom lento del hero y los
   contadores. Se conservan hover, rebote de tarjetas y revelados: son
   cortos y responden a una acción del visitante, no lo sorprenden.
   =================================================================== */

/* La franja se queda quieta, pero sigue viéndose: es firma de marca
   (DESIGN.md §Hazard Stripe Rule), no decoración prescindible. */
html[data-motion="reduced"] .hazard-top {
  animation: none;
}

/* Sin zoom lento en las fotos del hero ni en las del equipo. */
html[data-motion="reduced"] .hero__slide { transform: none; transition: opacity .4s ease; }
html[data-motion="reduced"] .team:hover .team__img { transform: none; }

/* El desplazamiento suave al cambiar de pestaña también es movimiento
   que el visitante no pidió. */
html[data-motion="reduced"] { scroll-behavior: auto; }
html[data-motion="reduced"] .page-anim { animation: none; }
html[data-motion="reduced"] .nav__links.is-open { animation: none; }
html[data-motion="reduced"] .burger span,
html[data-motion="reduced"] .burger span::before,
html[data-motion="reduced"] .burger span::after { transition: none; }

/* Movimiento reducido no es cero movimiento: el panel y los revelados
   conservan el fundido, que ayuda a entender qué apareció, y pierden solo
   el desplazamiento. */
html[data-motion="reduced"] .prefs__panel { transition: opacity .15s linear, visibility .15s; }
html[data-motion="reduced"] .prefs__panel[hidden] { transform: none; }
html[data-motion="reduced"] .reveal { transform: none; transition: opacity .3s linear; }

/* El cajón sigue abriendo/cerrando (el contenido debe seguir siendo
   alcanzable), solo pierde el desplazamiento animado. */
html[data-motion="reduced"] .drawer > .drawer__inner { transition: none; }
html[data-motion="reduced"] .drawer__chevron { transition: none; }

/* Respaldo si el JS no corre: se respeta la preferencia del sistema. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) .hazard-top { animation: none; }
  html:not([data-motion]) .hero__slide { transform: none; }
  html:not([data-motion]) { scroll-behavior: auto; }
}