/* estilo.css — Refaccionaria Unión.
   Dirección: rótulo de taller encendido de noche. Base grafito, un solo naranja
   de letrero, tipografía condensada de señalización y cuadro de bandera a
   cuadros como único ornamento. */

/* ------------------------------------------------------------------ tokens */

:root {
  --fondo: #101114;
  --fondo-2: #16181D;
  --tinta: #EFECE6;
  --tinta-suave: #9BA1AB;
  --acento: #FF6A13;
  --acento-claro: #FF8437;
  --acento-contraste: #17110A;
  --superficie: #191C21;
  --superficie-2: #1F232A;
  --borde: #2B2F37;
  --papel: #E9E5DD;
  --abierto: #7ED08F;
  --cerrado: #E4796A;
  --radio: 3px;
  --fuente-display: "Big Shoulders Display", sans-serif;
  --fuente-texto: "Archivo", sans-serif;
  --ancho-max: 1280px;
  --margen: clamp(18px, 5vw, 72px);
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}

section[id] { scroll-margin-top: 92px; }

body {
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(255, 106, 19, 0.10), transparent 60%),
    var(--fondo);
  letter-spacing: 0.005em;
}

::selection { background: var(--acento); color: var(--acento-contraste); }

/* ------------------------------------------------------------------ piezas */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-family: var(--fuente-texto);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s var(--curva), color 0.2s var(--curva),
              border-color 0.2s var(--curva), transform 0.2s var(--curva);
}

.boton-primario { background: var(--acento); color: var(--acento-contraste); }
.boton-primario:hover { background: var(--acento-claro); }

.boton-secundario { border-color: var(--borde); color: var(--tinta); background: transparent; }
.boton-secundario:hover { border-color: var(--acento); color: var(--acento); }

.boton:active { transform: translateY(1px); }

.boton-grande { padding: 17px 30px; font-size: 0.84rem; }

.banda-cuadros {
  display: block;
  height: 14px;
  background:
    repeating-conic-gradient(var(--acento) 0% 25%, transparent 0% 50%) 0 0 / 14px 14px;
  opacity: 0.85;
}

.seccion-cabeza {
  display: flex;
  gap: clamp(16px, 3vw, 34px);
  align-items: flex-start;
  margin-bottom: clamp(26px, 4vw, 44px);
}

.seccion-num {
  font-family: var(--fuente-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 0.9;
  color: var(--acento);
  padding-right: clamp(16px, 3vw, 34px);
  border-right: 1px solid var(--borde);
  font-variant-numeric: tabular-nums;
}

.seccion-cabeza h2 {
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin-bottom: 10px;
}

.seccion-nota {
  color: var(--tinta-suave);
  max-width: 58ch;
  font-size: 0.97rem;
}

/* --------------------------------------------------------------- cabecera */

.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px var(--margen);
  background: linear-gradient(180deg, rgba(16, 17, 20, 0.86), rgba(16, 17, 20, 0));
  transition: padding 0.3s var(--curva), background-color 0.3s var(--curva);
}

.cabecera.compacta {
  padding: 10px var(--margen);
  background: rgba(14, 15, 18, 0.94);
  border-bottom: 1px solid var(--borde);
  backdrop-filter: blur(10px);
}

.marca { display: block; flex: 0 0 auto; }
.marca img {
  width: auto;
  height: 52px;
  transition: height 0.3s var(--curva);
}
.cabecera.compacta .marca img { height: 40px; }

.cabecera nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
}

.cabecera nav a:not(.boton) {
  position: relative;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.2s var(--curva);
}

.cabecera nav a:not(.boton)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--curva);
}

.cabecera nav a:not(.boton):hover { color: var(--tinta); }
.cabecera nav a:not(.boton):hover::after { transform: scaleX(1); }

.boton-cabecera { padding: 11px 18px; font-size: 0.72rem; }

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(120px, 18vh, 190px) var(--margen) clamp(80px, 12vh, 130px);
  isolation: isolate;
}

.hero-lienzo {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-lienzo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 42%;
}

.hero-velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(92deg, var(--fondo) 24%, rgba(16, 17, 20, 0.74) 46%, rgba(16, 17, 20, 0.18) 76%),
    linear-gradient(0deg, var(--fondo) 1%, rgba(16, 17, 20, 0) 34%);
}

.hero-texto {
  position: relative;
  width: 100%;
  max-width: 640px;
}

.ojo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 22px;
}

.punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acento);
}

.hero h1 { margin-bottom: 14px; }

.h1-chico {
  display: block;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 2px;
}

.h1-grande {
  display: block;
  font-size: clamp(3.6rem, 11vw, 7.4rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.tagline {
  font-family: var(--fuente-display);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--tinta);
  max-width: 15ch;
  margin-bottom: 18px;
  padding-left: 14px;
  border-left: 3px solid var(--acento);
}

.entrada {
  color: var(--tinta-suave);
  max-width: 46ch;
  margin-bottom: 30px;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(32px, 5vw, 52px);
}

.cifras {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 4vw, 46px);
  padding-top: 20px;
  border-top: 1px solid var(--borde);
}

.cifras dt {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 4px;
}

.cifras dd {
  font-family: var(--fuente-display);
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hero .banda-cuadros {
  position: absolute;
  inset: auto 0 0 0;
  opacity: 0.9;
}

/* ------------------------------------------------------------- marquesina */

.marquesina {
  overflow: hidden;
  background: var(--fondo-2);
  border-bottom: 1px solid var(--borde);
  padding: 18px 0;
}

.marquesina-pista {
  display: flex;
  width: max-content;
  animation: desfile 46s linear infinite;
}

.marquesina-grupo {
  display: flex;
  align-items: center;
  gap: clamp(38px, 6vw, 82px);
  padding-right: clamp(38px, 6vw, 82px);
}

.marquesina-grupo img {
  height: 34px;
  width: auto;
  opacity: 0.82;
}

.marquesina-texto {
  font-family: var(--fuente-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  opacity: 0.6;
  white-space: nowrap;
}

@keyframes desfile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------- catálogo */

.catalogo,
.nosotros,
.sucursales,
.contacto {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: clamp(64px, 9vw, 116px) var(--margen);
}

.buscador {
  position: relative;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 26px;
}

.buscador-icono {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tinta-suave);
  pointer-events: none;
}

.buscador input[type="search"] {
  height: 60px;
  padding: 0 18px 0 52px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--tinta);
  font-size: 1rem;
  transition: border-color 0.2s var(--curva), background-color 0.2s var(--curva);
}

.buscador input[type="search"]::placeholder { color: #737983; }
.buscador input[type="search"]:hover { border-color: #3A404A; }
.buscador input[type="search"]:focus { border-color: var(--acento); background: var(--superficie-2); }
.buscador button[type="submit"] { padding-inline: 30px; }

.chips {
  padding-bottom: 10px;
  margin-bottom: 16px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent 100%);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--tinta-suave);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s var(--curva), border-color 0.2s var(--curva),
              background-color 0.2s var(--curva);
}

.chip-icono { display: flex; }
.chip-icono svg { width: 17px; height: 17px; }
.chip-total { font-size: 0.68rem; opacity: 0.65; font-variant-numeric: tabular-nums; }
.chip:hover { color: var(--tinta); border-color: #3F4552; }

.chip.es-activo {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-contraste);
}
.chip.es-activo .chip-total { opacity: 0.8; }

.hojas { gap: 7px; margin-bottom: 24px; }

.hoja {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  background: var(--superficie);
  border: 1px solid transparent;
  border-radius: var(--radio);
  color: var(--tinta-suave);
  font-size: 0.8rem;
  transition: color 0.2s var(--curva), border-color 0.2s var(--curva),
              background-color 0.2s var(--curva);
}

.hoja-total { font-size: 0.7rem; opacity: 0.6; font-variant-numeric: tabular-nums; }
.hoja:hover { color: var(--tinta); border-color: #3F4552; }
.hoja.es-activo {
  color: var(--acento-contraste);
  background: var(--acento);
  border-color: var(--acento);
  font-weight: 600;
}
.hoja.es-activo .hoja-total { opacity: 0.75; }

.hoja-sugerida {
  background: transparent;
  border-color: var(--acento);
  color: var(--acento);
  font-weight: 600;
}
.hoja-sugerida:hover { background: var(--acento); color: var(--acento-contraste); }

.estado {
  color: var(--tinta-suave);
  font-size: 0.9rem;
  margin-bottom: 18px;
}

.estado a { color: var(--acento); }

.resultados { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }

.boton-mas { margin-top: 26px; }

.nota-existencias {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--borde);
  color: var(--tinta-suave);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.esqueleto { background: var(--superficie); border-color: var(--borde); }

/* --------------------------------------------------------------- producto */

.producto {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform 0.25s var(--curva), border-color 0.25s var(--curva);
}

.producto:hover {
  transform: translateY(-3px);
  border-color: #43484F;
}

.producto-imagen {
  background: var(--papel);
  padding: 12px;
  border-bottom: 1px solid var(--borde);
}

/* Sin foto: la placa se apaga y el marcador queda de fondo (progresivo: los
   navegadores sin :has se quedan con la placa clara). */
.producto-imagen:has(img[src$="sin-imagen.svg"]) {
  background: var(--superficie);
  border-bottom-color: var(--borde);
}

.producto-imagen:has(img[src$="sin-imagen.svg"]) img { opacity: 0.1; }

.producto-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 16px 18px;
  flex: 1;
}

.producto-hoja {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
}

.producto-nombre {
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.producto-marca {
  font-size: 0.84rem;
  color: var(--tinta-suave);
}

.producto-numero {
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.producto-existencia {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--tinta);
}

.producto-existencia::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acento);
  flex: 0 0 auto;
}

.producto-sucursales li {
  padding: 3px 8px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--tinta-suave);
}

.producto-wa {
  margin-top: auto;
  padding: 11px 16px;
  font-size: 0.72rem;
}

/* --------------------------------------------------------------- nosotros */

.nosotros {
  display: grid;
  gap: clamp(30px, 5vw, 66px);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
  align-items: center;
}

.nosotros-texto > p { margin-bottom: 16px; color: var(--tinta-suave); }

.destacado {
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  color: var(--tinta) !important;
  line-height: 1.45;
}

.listado { margin-top: 26px; border-top: 1px solid var(--borde); }

.listado li {
  padding: 13px 0;
  border-bottom: 1px solid var(--borde);
  color: var(--tinta-suave);
  font-size: 0.93rem;
}

.listado span {
  font-family: var(--fuente-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--acento);
  margin-right: 10px;
  font-variant-numeric: tabular-nums;
}

.nosotros-foto { position: relative; }

.nosotros-foto img {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  filter: saturate(0.85) contrast(1.05);
}

.nosotros-foto figcaption {
  margin-top: 12px;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* -------------------------------------------------------------- sucursales */

.lista-sucursales { grid-template-columns: repeat(auto-fill, minmax(286px, 1fr)); }

.sucursal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 22px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color 0.25s var(--curva);
}

.sucursal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--acento);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 0.35s var(--curva);
}

.sucursal:hover { border-color: #43484F; }
.sucursal:hover::before { transform: scaleX(1); }

.sucursal h3 {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
}

.sucursal-direccion { font-size: 0.9rem; color: var(--tinta-suave); }

.sucursal-telefono a { color: var(--tinta); font-size: 0.9rem; }

.sucursal-hoy {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  font-size: 0.85rem;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.sucursal-estado {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: var(--radio);
}

.sucursal-estado.es-abierto { color: var(--abierto); }
.sucursal-estado.es-cerrado { color: var(--cerrado); }

.sucursal-horarios summary {
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding: 6px 0;
}

.sucursal-horarios summary:hover { color: var(--acento); }

.sucursal-horarios dl {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

.sucursal-horarios .es-hoy { color: var(--tinta); font-weight: 600; }

.sucursal-acciones { margin-top: auto; padding-top: 6px; }
.sucursal-acciones .boton { flex: 1 1 130px; padding: 11px 14px; font-size: 0.7rem; }

/* ---------------------------------------------------------------- contacto */

.contacto-caja {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 5vw, 56px);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.contacto-caja::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 14px;
  background:
    repeating-conic-gradient(var(--acento) 0% 25%, transparent 0% 50%) 0 0 / 14px 14px;
  opacity: 0.85;
}

.contacto-caja .seccion-cabeza { margin-top: 10px; }

.contacto-datos {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 5vw, 58px);
  margin-bottom: 30px;
  padding-top: 6px;
}

.contacto-etiqueta {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 6px;
}

.contacto-datos a {
  font-family: var(--fuente-display);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s var(--curva);
}

.contacto-datos a:hover { color: var(--acento); }

/* --------------------------------------------------------------------- pie */

.pie { background: var(--fondo-2); border-top: 1px solid var(--borde); }

.pie .banda-cuadros { opacity: 0.55; height: 10px; background-size: 10px 10px; }

.pie-fila {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: 26px var(--margen) 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--tinta-suave);
  letter-spacing: 0.04em;
}

.pie-fila a { color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--acento); }
.pie-fila a:hover { color: var(--acento); }

/* --------------------------------------------------------------- flotante */

.wa-flotante {
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  width: 58px;
  height: 58px;
  background: var(--acento);
  color: var(--acento-contraste);
  box-shadow: 0 14px 30px -12px rgba(255, 106, 19, 0.55);
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 980px) {
  .nosotros { grid-template-columns: minmax(0, 1fr); }
  .nosotros-foto { max-width: 520px; }
}

@media (max-width: 820px) {
  .cabecera nav a:not(.boton) { display: none; }
  .boton-cabecera { padding: 10px 14px; font-size: 0.66rem; letter-spacing: 0.08em; }
  .marca img { height: 44px; }
  .cabecera.compacta .marca img { height: 36px; }
  .hero-velo {
    background:
      linear-gradient(180deg, rgba(16, 17, 20, 0.86) 0%, rgba(16, 17, 20, 0.9) 45%, var(--fondo) 92%);
  }
  .hero-lienzo img { object-position: 58% 40%; }
  .seccion-cabeza { flex-direction: column; gap: 12px; }
  .seccion-num { border-right: 0; border-bottom: 1px solid var(--borde); padding: 0 0 10px; }
}

@media (max-width: 560px) {
  .hero { padding-top: 112px; }
  .tagline { max-width: none; }
  .cifras { gap: 18px 26px; }
  .cifras > div { flex: 1 1 40%; }
  .acciones .boton { flex: 1 1 100%; }
  .resultados { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .producto-nombre { font-size: 1.08rem; }
  .lista-sucursales { grid-template-columns: minmax(0, 1fr); }
  .contacto-datos { gap: 20px 34px; }
}

/* --------------------------------------------------------- movimiento off */

@media (prefers-reduced-motion: reduce) {
  .marquesina-pista { animation: none; transform: none; }
  .producto:hover { transform: none; }
  .sucursal::before { transition: none; }
  .cabecera, .marca img { transition: none; }
}