/* ===========================================================================
   Hacker Squad — sistema de diseño
   Fuente única de verdad para tienda y backend. No escribir color, tamaño ni
   espaciado a mano en las plantillas: todo sale de estos tokens.

   La identidad NO es Back Market. De allí tomamos la estructura (configurador,
   filtros, prueba social); el lenguaje visual es nuestro:
     · amarillo señal sobre negro, no pastel sobre blanco
     · esquinas de 10px, no cápsulas de 24px
     · monoespaciada para todo dato técnico — es lo que nos hace creíbles
   =========================================================================== */

:root {
  /* --- Marca ------------------------------------------------------------ */
  --hs-amarillo:      #ffcd2f;   /* del logo. Es la acción, no la decoración */
  --hs-amarillo-osc:  #e5b41a;
  --hs-amarillo-tenue:rgba(255,205,47,.07);
  --hs-negro:         #101014;   /* casi negro: el negro puro cansa la vista */
  --hs-negro-suave:   #1c1c22;

  /* --- Superficies ------------------------------------------------------ */
  --fondo:            #ffffff;
  --fondo-alt:        #f6f6f4;   /* gris cálido, no azulado */
  --fondo-oscuro:     var(--hs-negro);
  --tarjeta:          #ffffff;
  --borde:            #e4e4e0;
  --borde-fuerte:     #c9c9c3;
  /* El borde de «esto es lo que escogiste». Era `--hs-negro`: el mismo
     negro del texto, del logo y de los botones principales. Rodeando una
     caja entera pesaba más que lo que había dentro —la opción escogida
     se leía como un marco impreso, no como una elección— y con tres o
     cuatro opciones en columna la página se llenaba de rayas duras. Este
     gris marca igual de claro cuál está escogida y deja que el amarillo
     del fondo haga el trabajo. Se toca AQUÍ y cambia en toda la tienda:
     ficha, carrito, repuestos, tasación y filtros. */
  --borde-elegido:    #8a8a94;

  /* --- Texto ------------------------------------------------------------ */
  --texto:            #101014;
  --texto-medio:      #5c5c66;
  --texto-tenue:      #8a8a94;
  --texto-inv:        #ffffff;
  /* Texto secundario sobre fondo negro. El blanco puro a media opacidad se
     ve sucio sobre #101014; este gris cálido sí pasa contraste. */
  --texto-inv-suave:  #c2c2bd;

  /* --- Semánticos ------------------------------------------------------- */
  --ok:               #0f7a5a;
  --ok-fondo:         #e6f4ef;
  --alerta:           #b45309;
  --alerta-fondo:     #fef3e2;
  --alerta-borde:     #f0dca0;
  --error:            #c1272d;
  --error-fondo:      #fdeaea;
  --info:             #1d4ed8;
  --info-fondo:       #eaf0fe;

  /* --- Tipografía ------------------------------------------------------- */
  --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --fuente-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;

  --t-xs:   12px;  --i-xs:   16px;
  --t-sm:   14px;  --i-sm:   20px;
  --t-base: 16px;  --i-base: 24px;
  --t-lg:   18px;  --i-lg:   28px;
  --t-xl:   22px;  --i-xl:   30px;
  --t-2xl:  28px;  --i-2xl:  36px;
  --t-3xl:  38px;  --i-3xl:  46px;
  --t-4xl:  52px;  --i-4xl:  58px;

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-semi:   600;
  --peso-fuerte: 700;

  /* --- Espaciado (escala de 4) ------------------------------------------ */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 20px;  --e6: 24px;  --e8: 32px;  --e10: 40px;
  --e12: 48px; --e16: 64px; --e20: 80px;

  /* --- Bordes y sombras ------------------------------------------------- */
  --r-sm:  6px;
  --r:     10px;   /* el radio de la casa */
  --r-lg:  14px;
  --r-full: 999px;

  --sombra-1: 0 1px 2px rgba(16,16,20,.06);
  --sombra-2: 0 2px 8px rgba(16,16,20,.08);
  --sombra-3: 0 8px 24px rgba(16,16,20,.12);
  --anillo:   0 0 0 3px rgba(255,205,47,.45);

  --ancho: 1240px;
  --ancho-cab: 1680px;
  --canal: 32px;   /* margen lateral mínimo, en cualquier página */
  --trans: 140ms cubic-bezier(.2,0,.2,1);
}

/* --- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
/* Un display explícito gana sobre el atributo hidden y el elemento sigue
   ocupando su sitio, invisible pero empujando. Esto lo zanja de una vez. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: var(--i-base);
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: var(--peso-semi); letter-spacing: -.02em; }
h1 { font-size: var(--t-3xl); line-height: var(--i-3xl); }
h2 { font-size: var(--t-2xl); line-height: var(--i-2xl); }
h3 { font-size: var(--t-xl);  line-height: var(--i-xl); }
h4 { font-size: var(--t-lg);  line-height: var(--i-lg); }
p  { margin: 0 0 var(--e4); }
a  { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--anillo); border-radius: var(--r-sm); }

/* El margen lateral se define con el ANCHO, no con el padding.
   Antes usaba padding-left/right y bastaba con que una página escribiera
   `padding: 40px 0` para que el contenido quedara pegado al borde del
   navegador. Con `width: min()` el canalón es intocable: una página puede
   poner el padding vertical que quiera y el margen lateral se respeta. */
.hs-contenedor {
  width: min(100% - 2 * var(--canal), var(--ancho));
  margin-inline: auto;
}
.cab-ancho {
  width: min(100% - 2 * var(--canal), var(--ancho-cab));
  margin-inline: auto;
  padding-left: 0; padding-right: 0;
}
.hs-mono { font-family: var(--fuente-mono); font-size: .92em; letter-spacing: -.01em; }
.hs-tenue { color: var(--texto-medio); }

/* --- Botones ------------------------------------------------------------- */
.hs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e2);
  padding: var(--e3) var(--e5);
  border: 1px solid transparent; border-radius: var(--r);
  font-size: var(--t-sm); font-weight: var(--peso-semi);
  cursor: pointer; transition: var(--trans); white-space: nowrap;
}
.hs-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Amarillo sobre negro: la acción principal. Solo una por pantalla. */
.hs-btn--principal { background: var(--hs-amarillo); color: var(--hs-negro); }
.hs-btn--principal:hover:not(:disabled) { background: var(--hs-amarillo-osc); }

.hs-btn--oscuro { background: var(--hs-negro); color: var(--texto-inv); }
.hs-btn--oscuro:hover:not(:disabled) { background: var(--hs-negro-suave); }

.hs-btn--borde { background: var(--fondo); border-color: var(--borde-fuerte); }
.hs-btn--borde:hover:not(:disabled) { border-color: var(--hs-negro); }

.hs-btn--plano { background: transparent; color: var(--texto-medio); padding: var(--e2) var(--e3); }
.hs-btn--plano:hover:not(:disabled) { color: var(--texto); background: var(--fondo-alt); }

.hs-btn--grande { padding: var(--e4) var(--e6); font-size: var(--t-base); }
.hs-btn--ancho  { width: 100%; }

/* --- Etiquetas ----------------------------------------------------------- */
.hs-etiqueta {
  display: inline-flex; align-items: center; gap: var(--e1);
  padding: 3px var(--e2); border-radius: var(--r-sm);
  font-size: var(--t-xs); line-height: var(--i-xs); font-weight: var(--peso-semi);
  background: var(--fondo-alt); color: var(--texto-medio);
}
.hs-etiqueta--marca  { background: var(--hs-amarillo); color: var(--hs-negro); }
.hs-etiqueta--ok     { background: var(--ok-fondo);     color: var(--ok); }
.hs-etiqueta--alerta { background: var(--alerta-fondo); color: var(--alerta); }
.hs-etiqueta--info   { background: var(--info-fondo);   color: var(--info); }

/* --- Tarjetas ------------------------------------------------------------ */
.hs-tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--r); transition: var(--trans);
}
.hs-tarjeta--clic:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-2); }

/* --- Opciones del configurador ------------------------------------------
   El control central de la ficha. Sencillo a propósito: dos decisiones y
   listo. Cada opción muestra su precio para que se vea qué cuesta subir. */
.hs-opciones { display: grid; gap: var(--e2); }
/* Un corte dentro de una lista de opciones. Va pegado a lo que agrupa y
   separado de lo de arriba: eso es lo que lo hace leerse como corte y no
   como una opción más que no se puede pulsar. */
.hs-opciones__grupo { margin: var(--e4) 0 0; font-size: var(--t-sm);
  font-weight: var(--peso-semi); color: var(--texto); }
.hs-opcion {
  display: flex; align-items: flex-start; gap: var(--e3);
  width: 100%; text-align: left;
  padding: var(--e4); background: var(--fondo);
  border: 1.5px solid var(--borde); border-radius: var(--r);
  cursor: pointer; transition: var(--trans);
}
.hs-opcion:hover { border-color: var(--borde-fuerte); }
.hs-opcion[aria-pressed="true"],
.hs-opcion.esta-activa {
  border-color: var(--borde-elegido);
  background: var(--hs-amarillo-tenue);
}
.hs-opcion:disabled { opacity: .4; cursor: not-allowed; background: var(--fondo-alt); }
.hs-opcion__marca {
  flex: none; width: 18px; height: 18px; margin-top: 3px;
  border: 1.5px solid var(--borde-fuerte); border-radius: var(--r-full);
  position: relative; transition: var(--trans);
}
/* La bolita del radio iba en `--hs-negro` relleno: un punto negro
   sólido de 18px, lo más oscuro de toda la columna. Bajar el borde a gris
   no bastaba mientras esto siguiera ahí — era lo que se veía primero y lo
   que seguía leyéndose como «muy negro». El amarillo de dentro es el que
   dice «esta es», y sobre gris se ve mejor que sobre negro. */
.hs-opcion[aria-pressed="true"] .hs-opcion__marca,
.hs-opcion.esta-activa .hs-opcion__marca {
  border-color: var(--borde-elegido); background: var(--borde-elegido);
}
.hs-opcion[aria-pressed="true"] .hs-opcion__marca::after,
.hs-opcion.esta-activa .hs-opcion__marca::after {
  content: ""; position: absolute; inset: 4px;
  background: var(--hs-amarillo); border-radius: var(--r-full);
}
.hs-opcion__cuerpo { flex: 1; min-width: 0; }
.hs-opcion__titulo { font-size: var(--t-sm); font-weight: var(--peso-semi); }
.hs-opcion__ayuda  { font-size: var(--t-xs); line-height: var(--i-xs); color: var(--texto-medio); margin-top: 2px; }
.hs-opcion__precio { flex: none; font-size: var(--t-sm); font-weight: var(--peso-semi); }

/* Casilla cuadrada para los complementos (se pueden marcar varios). */
.hs-opcion--casilla .hs-opcion__marca { border-radius: var(--r-sm); }
/* El visto se DIBUJA, no se escribe.

   Era el carácter «✓» centrado con `place-items`, y eso centra la caja
   del texto, no la tinta del glifo: cada fuente lo dibuja a distinta
   altura dentro de su renglón, así que en el cuadrito de 15px salía
   corrido hacia abajo y a la izquierda, y rozando el borde. Con dos
   lados de un borde girados 45° la geometría es exacta y se ve igual
   en cualquier máquina, tenga la fuente que tenga.

   Va también `.esta-activa`: es la clase que pone la ficha del
   producto. Con solo `[aria-pressed]` cualquier sitio que marque la
   casilla por clase se quedaba con el punto redondo del selector de
   estética en vez del visto. */
.hs-opcion--casilla[aria-pressed="true"] .hs-opcion__marca::after,
.hs-opcion--casilla.esta-activa .hs-opcion__marca::after {
  content: ""; background: none; border-radius: 0;
  inset: auto; top: 50%; left: 50%;
  width: 4.5px; height: 8.5px;
  border: solid var(--hs-amarillo);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -58%) rotate(45deg);
}

/* --- Precio -------------------------------------------------------------- */
.hs-precio { font-size: var(--t-2xl); font-weight: var(--peso-fuerte); letter-spacing: -.03em; }
.hs-precio--sm { font-size: var(--t-lg); }
.hs-precio__antes { font-size: var(--t-sm); color: var(--texto-tenue); text-decoration: line-through; font-weight: var(--peso-normal); }

/* --- Campos -------------------------------------------------------------- */
.hs-campo {
  width: 100%; padding: var(--e3) var(--e4);
  border: 1px solid var(--borde-fuerte); border-radius: var(--r);
  background: var(--fondo); font-size: var(--t-sm); transition: var(--trans);
}
.hs-campo:focus { border-color: var(--hs-negro); box-shadow: var(--anillo); outline: none; }
/* Un <select> con el mismo padding que un <input> sale más bajo: el navegador
   le impone su propia altura y su propio dibujo, y la columna del formulario
   queda en escalera. Se le quita la apariencia nativa y se le pone la flecha
   a mano. `line-height` explícito porque sin él cada navegador escoge la
   suya y vuelve el desnivel. */
select.hs-campo {
  -webkit-appearance: none; appearance: none;
  line-height: var(--i-sm); padding-right: var(--e10);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2371717a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--e4) center;
  cursor: pointer;
}
input.hs-campo, textarea.hs-campo { line-height: var(--i-sm); }
.hs-etiqueta-campo {
  display: block; margin-bottom: var(--e2);
  font-size: var(--t-sm); font-weight: var(--peso-medio);
}

/* --- Rejilla de productos ------------------------------------------------ */
.hs-rejilla { display: grid; gap: var(--e5); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .hs-rejilla { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .hs-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .hs-rejilla { grid-template-columns: 1fr; } }

/* --- Barra de filtros ---------------------------------------------------- */
.hs-filtros {
  display: flex; gap: var(--e2); overflow-x: auto; padding-bottom: var(--e2);
  scrollbar-width: none;
}
.hs-filtros::-webkit-scrollbar { display: none; }
.hs-filtro {
  flex: none; padding: var(--e2) var(--e4);
  border: 1px solid var(--borde); border-radius: var(--r-full);
  background: var(--fondo); font-size: var(--t-sm); font-weight: var(--peso-medio);
  cursor: pointer; transition: var(--trans);
}
.hs-filtro:hover { border-color: var(--hs-negro); }
.hs-filtro.esta-activa { background: var(--hs-negro); color: var(--texto-inv); border-color: var(--hs-negro); }

/* --- Utilidades ---------------------------------------------------------- */
.hs-fila { display: flex; align-items: center; gap: var(--e3); }
.hs-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.hs-oculto-movil { }
@media (max-width: 760px) {
  :root { --canal: 16px; }
  .hs-oculto-movil { display: none !important; }
}
.hs-solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Estado vacío -------------------------------------------------------
   Antes era una línea de texto gris y un botón suelto: se veía a medio
   hacer. Un estado vacío es una oportunidad de decir algo, no un error. */
.hs-vacio { max-width: 520px; margin: 0 auto; padding: var(--e16) var(--e5);
  text-align: center; }
.hs-vacio__arte { width: 160px; margin: 0 auto var(--e6); }
.hs-vacio__arte svg { width: 100%; display: block; }
.hs-vacio h2 { font-size: var(--t-xl); line-height: var(--i-xl); margin-bottom: var(--e3); }
.hs-vacio p { color: var(--texto-medio); font-size: var(--t-base);
  line-height: var(--i-base); margin-bottom: var(--e8); }
.hs-vacio__acciones { display: flex; gap: var(--e3); justify-content: center;
  flex-wrap: wrap; }

/* --- Contador circular --------------------------------------------------
   El número dentro de un círculo. Un componente porque estaba copiado en
   cuatro sitios y en los cuatro salía descentrado hacia abajo: heredaban
   el line-height de 24px del cuerpo, que es más alto que el círculo, así
   que `place-items: center` centraba una caja de 24px dentro de una de 17.
   `line-height: 1` es lo que lo arregla; el resto es cosmética. */
.hs-contador {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;                     /* <- lo importante */
  font-variant-numeric: tabular-nums; /* el 1 no baila frente al 8 */
  font-weight: var(--peso-fuerte);
  border-radius: var(--r-full);
  background: var(--hs-amarillo); color: var(--hs-negro);
  min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px;
}
.hs-contador--grande { min-width: 30px; height: 30px; font-size: var(--t-sm); }
.hs-contador--oscuro { background: var(--hs-negro); color: var(--hs-amarillo); }
.hs-contador--apagado { background: var(--borde); color: var(--texto-medio); }