/* ===================================================================
   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 */
}

@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:
    linear-gradient(150deg, rgba(27,59,59,.92) 0%, rgba(36,77,77,.90) 55%, rgba(51,102,102,.88) 100%),
    var(--teal);
  color: #fff;
  border-bottom: 3px solid var(--red);
}
.hero--sub { padding: var(--space-2xl) var(--pad-x) var(--space-xl); }

/* ----- 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;
}
@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:
    repeating-linear-gradient(45deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 14px, transparent 14px, transparent 28px),
    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; }
.tag {
  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. */
.step__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 { 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 ---------- */
.clients {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
.client {
  position: relative;
  background: #fff;
  border-radius: 8px;
  width: 160px; 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) { .client { width: 132px; height: 74px; } }

/* ---------- Distribuidores ---------- */
.brands { display: flex; flex-wrap: wrap; gap: 12px; }
.brand {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 22px; font-family: 'Oswald', sans-serif; font-weight: 600;
  letter-spacing: 0.04em; color: var(--teal-dark); text-transform: uppercase; font-size: 15px;
}

/* ---------- 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;
}
.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);
}
.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 {
  display: grid; grid-template-columns: 110px 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;
}
.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 {
  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%; }
.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) ---------- */
.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; }

/* ---------- Footer ---------- */
.footer {
  background: var(--teal-darker); color: #b9cccb; padding: var(--space-lg) var(--pad-x);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; border-top: 3px solid var(--red); flex-wrap: wrap; gap: 16px;
}
.footer__brand { display: flex; flex-direction: column; gap: 4px; }
.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;
}

/* ---------- 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} */
}

/* ----- Aviso de primera visita -----
   Sale del círculo hacia la izquierda, con una punta que lo señala. A la
   izquierda y no arriba para no chocar con el panel cuando se abre. */
.prefs__callout {
  position: absolute;
  right: 66px;
  bottom: 2px;
  width: 232px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;      /* {rounded.lg} */
  box-shadow: 0 8px 22px rgba(27,59,59,.22);
  padding: 14px 16px;
  transform-origin: right center;
}
.prefs__callout[hidden] { display: none; }
/* La punta: cuadrado girado, con el mismo borde que la burbuja. */
.prefs__callout::after {
  content: "";
  position: absolute;
  right: -6px; bottom: 22px;
  width: 10px; height: 10px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.prefs__callout-txt {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  margin: 0 0 10px;
}
.prefs__callout-ok {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;         /* {typography.label} */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Entrada: crece desde el círculo que la origina. */
html[data-motion="full"] .prefs__callout {
  animation: calloutIn .24s var(--ease-out) both;
}
@keyframes calloutIn {
  from { opacity: 0; transform: scale(.94) translateX(8px); }
  to   { opacity: 1; transform: none; }
}
/* Salida: mismo camino que la entrada, al revés — antes desaparecía de
   golpe (aria-hidden inmediato) mientras que aparecer sí era cuidado. */
.prefs__callout.is-leaving {
  animation: none;
  opacity: 0;
  transform: scale(.94) translateX(8px);
  transition: opacity .18s var(--ease-in-out), transform .18s var(--ease-in-out);
}

@media (max-width: 560px) {
  /* A este ancho no cabe al costado: se coloca encima del círculo. */
  .prefs__callout {
    right: 0; bottom: 66px;
    width: min(248px, calc(100vw - 40px));
    transform-origin: bottom right;
  }
  .prefs__callout::after { right: 18px; bottom: -6px; border: none;
    border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
}

.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; }
}

/* ===================================================================
   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; }

  .footer { flex-direction: column; align-items: flex-start; text-align: left; }
}

@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; }
}

@media (max-width: 860px) {
  .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; }
}

/* ===================================================================
   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; }
}