/*
 * HELL FORGE · Estilos base
 * Solo lo que Tailwind no cubre: tokens por tema, foco, grano y movimiento.
 *
 * Los colores van como canales RGB ("19 19 19") para que Tailwind pueda
 * aplicar opacidad: bg-fondo/80, border-linea/50, etc.
 *
 * Contraste verificado (WCAG 2.1):
 *   Oscuro  texto #bdbdbd / fondo #131313  9.9:1  AAA
 *           tenue #8c8c8c / fondo #131313  5.5:1  AA (5.1:1 sobre superficie)
 *           alerta #ff5c5c / fondo #131313 6.1:1  AA
 *           borde #6e6e6e / fondo #131313  3.6:1  (controles, mín. 3:1)
 *   Claro   texto #131313 / fondo #bdbdbd  9.9:1  AAA
 *           tenue #3d3d3d / fondo #bdbdbd  5.8:1  AA (5.0:1 sobre superficie)
 *           alerta #8a0f0f / fondo #bdbdbd 5.2:1  AA
 *           borde #5c5c5c / fondo #bdbdbd  3.6:1  (controles, mín. 3:1)
 */

/* ─── Tokens: modo oscuro (predeterminado) ─────────────────────────────── */
:root,
:root[data-tema="oscuro"] {
  --hf-fondo: 19 19 19; /* #131313 */
  --hf-superficie: 27 27 27; /* #1b1b1b, bloques que se separan del fondo */
  --hf-texto: 189 189 189; /* #bdbdbd */
  --hf-tenue: 140 140 140; /* #8c8c8c, metadatos */
  --hf-linea: 42 42 42; /* #2a2a2a, separadores de 1px (decorativos) */
  --hf-borde: 110 110 110; /* #6e6e6e, bordes de campos y controles */
  --hf-alerta: 255 92 92; /* #ff5c5c, errores y últimas unidades */
  color-scheme: dark;
}

/* ─── Tokens: modo claro ───────────────────────────────────────────────── */
:root[data-tema="claro"] {
  --hf-fondo: 189 189 189; /* #bdbdbd */
  --hf-superficie: 176 176 176; /* #b0b0b0 */
  --hf-texto: 19 19 19; /* #131313 */
  --hf-tenue: 61 61 61; /* #3d3d3d */
  --hf-linea: 154 154 154; /* #9a9a9a */
  --hf-borde: 92 92 92; /* #5c5c5c */
  --hf-alerta: 138 15 15; /* #8a0f0f */
  color-scheme: light;
}

/* ─── Base ─────────────────────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: rgb(var(--hf-fondo));
  color: rgb(var(--hf-texto));
  font-family: "Inter", system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11"; /* dígitos y 'a' más secos en Inter */
  -webkit-font-smoothing: antialiased;
}

/* La transición de tema solo existe después de la carga: sin parpadeo inicial.
   :where() deja la especificidad en cero para no pisar las transiciones de Tailwind. */
:where(.hf-listo) body,
:where(.hf-listo) body * {
  transition-property: background-color, border-color, color, fill;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
}

/* Precios y cantidades: cifras de ancho fijo para que no bailen. */
.hf-cifras {
  font-variant-numeric: tabular-nums;
}

/* ─── Grano ────────────────────────────────────────────────────────────── */
/* Textura de lavado a la piedra sobre todo el sitio. Fija, sin interacción. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

:root[data-tema="claro"] body::after {
  opacity: 0.08;
}

/* ─── Foco visible ─────────────────────────────────────────────────────── */
/* Todo elemento interactivo muestra foco al navegar con teclado. */
:focus-visible {
  outline: 2px solid rgb(var(--hf-texto));
  outline-offset: 2px;
  border-radius: 0;
}

/* Enlace para saltar al contenido: oculto hasta recibir foco. */
.hf-saltar {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 200;
}
.hf-saltar:focus {
  top: 1rem;
}

/* ─── Barra de anuncios: cinta que corre ───────────────────────────────── */
/* La arma tienda.js (barraAnuncios): dos grupos iguales seguidos; al mover
   la cinta -50 % el segundo queda donde empezó el primero y el ciclo no se
   nota. La duración sale del ancho para que la velocidad sea siempre la misma. */
.hf-cinta {
  display: flex;
  width: max-content;
  animation: hf-cinta var(--hf-cinta-duracion, 40s) linear infinite;
}
.hf-cinta > [data-cinta-grupo] {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}
[data-barra-envio]:hover .hf-cinta {
  animation-play-state: paused;
}
@keyframes hf-cinta {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hf-cinta {
    animation: none;
  }
}

/* ─── Aparición al hacer scroll ────────────────────────────────────────── */
/* Estado inicial. JS agrega .hf-revelar solo si Motion cargó y hay movimiento
   permitido; Motion anima opacity y transform en línea al entrar en pantalla. */
.hf-revelar {
  opacity: 0;
  transform: translateY(8px);
}

/* ─── Header integrado al hero ─────────────────────────────────────────── */
/* El hero sube por debajo del header (margen negativo = su alto, que tienda.js
   guarda en --hf-alto-header). Arriba del todo el header es transparente; al
   hacer scroll recupera el fondo y la línea. */
[data-header] {
  transition: background-color 300ms cubic-bezier(0.2, 0, 0, 1), border-color 300ms cubic-bezier(0.2, 0, 0, 1);
}
[data-header].hf-transparente {
  background-color: transparent;
  border-color: transparent;
}
.hf-hero {
  margin-top: calc(var(--hf-alto-header, 0px) * -1);
}

/* ─── Degradados del hero en tema claro ────────────────────────────────── */
/* En claro el fondo es gris (#bdbdbd) y los mismos degradados que en oscuro
   empañan la foto. Aquí son más suaves: la parte alta queda limpia y el velo
   se concentra abajo, donde va el texto. */
:root[data-tema="claro"] .hf-velo-abajo {
  background-image: linear-gradient(
    to top,
    rgb(var(--hf-fondo)) 0%,
    rgb(var(--hf-fondo) / 0.8) 30%,
    rgb(var(--hf-fondo) / 0.3) 55%,
    transparent 80%
  );
}
@media (min-width: 1024px) {
  /* En escritorio el texto va sobre fondo liso a la izquierda: la foto casi no necesita velo. */
  :root[data-tema="claro"] .hf-velo-abajo {
    background-image: linear-gradient(to top, rgb(var(--hf-fondo)) 0%, rgb(var(--hf-fondo) / 0.25) 25%, transparent 50%);
  }
}
/* La transición lateral entre el fondo liso y la foto, más corta. */
:root[data-tema="claro"] .hf-velo-lado {
  width: 22%;
}
:root[data-tema="claro"] .hf-velo-arriba {
  background-image: linear-gradient(to bottom, rgb(var(--hf-fondo) / 0.55), transparent);
}

/* ─── Botón "Ver el drop" ──────────────────────────────────────────────── */
/* Al pasar el cursor: un relleno del color de fondo sube desde abajo y el
   botón queda invertido (borde y texto del color del texto); la flecha cae
   en bucle, como señalando hacia abajo. Al pulsar se hunde un poco. */
.hf-boton-drop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 400ms cubic-bezier(0.76, 0, 0.24, 1);
}
/* El WhatsApp flotante (tienda.js → botonWhatsApp) usa esta clase con `fixed`.
   Este archivo carga después de Tailwind, así que el `relative` de arriba le
   ganaba y el botón terminaba al final de la página, fuera de la esquina. */
.hf-boton-drop.fixed {
  position: fixed;
}
.hf-boton-drop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgb(var(--hf-fondo));
  transform: translateY(101%);
  transition: transform 450ms cubic-bezier(0.76, 0, 0.24, 1);
}
.hf-boton-drop:hover,
.hf-boton-drop:focus-visible {
  color: rgb(var(--hf-texto));
}
.hf-boton-drop:hover::before,
.hf-boton-drop:focus-visible::before {
  transform: none;
}
.hf-boton-drop:hover .hf-flecha svg,
.hf-boton-drop:focus-visible .hf-flecha svg {
  animation: hf-flecha-cae 1s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}
.hf-boton-drop:active::before {
  transform: scale(0.97);
}
@keyframes hf-flecha-cae {
  0% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(130%);
  }
  46% {
    transform: translateY(-130%);
  }
  100% {
    transform: translateY(0);
  }
}

/* ─── Intro del logo ───────────────────────────────────────────────────── */
/* Tapa la página desde el primer pintado hasta que tienda.js monta la capa real
   con el logo al centro (introLogo). */
.hf-splash body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  background-color: rgb(var(--hf-fondo));
}

/* ─── Entrada del hero ─────────────────────────────────────────────────── */
/* theme.js pone .hf-intro en <html> antes del pintado; Motion lleva cada pieza
   del primer banner a su estado final con estilos en línea, que ganan a estas reglas. */
.hf-intro [data-slide="0"] [data-linea] {
  transform: translateY(105%);
}
.hf-intro [data-slide="0"] [data-fondo],
.hf-intro [data-slide="0"] [data-pieza] {
  opacity: 0;
}

/* ─── Logo ─────────────────────────────────────────────────────────────── */
/* Dos SVG en Icons/: Dark Mode en #bdbdbd y Light Mode en #131313, los mismos
   valores del token texto. Se muestra solo el del tema activo.
   El botón de tema reutiliza estas clases con los iconos sun / moon de Lucide. */
:root[data-tema="claro"] .hf-logo-oscuro,
:root:not([data-tema="claro"]) .hf-logo-claro {
  display: none;
}

/* Enlace de categoría activo en el header. */
[data-filtro-link][aria-current="true"] {
  color: rgb(var(--hf-texto));
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* Filtro activo en el menú de categorías. */
[data-filtro][aria-pressed="true"] {
  background-color: rgb(var(--hf-texto));
  border-color: rgb(var(--hf-texto));
  color: rgb(var(--hf-fondo));
}

/* ─── Botones de línea (Drop 01 / Chaos) ───────────────────────────────── */
/* El mismo movimiento que "Ver el drop", con los colores invertidos: el
   botón es de contorno y al pasar el cursor un relleno del color del texto
   sube desde abajo y el texto pasa al color de fondo. La línea activa se
   queda rellena; al soltarla, el relleno vuelve a caer cuando sale el
   cursor. Al pulsar, el relleno se hunde un poco. */
.hf-boton-linea {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 400ms cubic-bezier(0.76, 0, 0.24, 1), border-color 400ms cubic-bezier(0.76, 0, 0.24, 1);
}
.hf-boton-linea::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgb(var(--hf-texto));
  transform: translateY(101%);
  transition: transform 450ms cubic-bezier(0.76, 0, 0.24, 1);
}
/* Hover solo con cursor: en táctil quedaría pegado después de soltar la línea. */
@media (hover: hover) {
  .hf-boton-linea:hover {
    border-color: rgb(var(--hf-texto));
    color: rgb(var(--hf-fondo));
  }
  .hf-boton-linea:hover::before {
    transform: none;
  }
}
/* La línea activa, y el botón de filtrar mientras su menú está abierto. */
.hf-boton-linea:focus-visible,
.hf-boton-linea[aria-pressed="true"],
.hf-boton-linea[aria-expanded="true"] {
  border-color: rgb(var(--hf-texto));
  color: rgb(var(--hf-fondo));
}
.hf-boton-linea:focus-visible::before,
.hf-boton-linea[aria-pressed="true"]::before,
.hf-boton-linea[aria-expanded="true"]::before {
  transform: none;
}
.hf-boton-linea:active::before {
  transform: scale(0.97);
}

/* Opciones del menú de categorías: el mismo gesto, más sutil. Sube un velo
   tenue del color del texto y el texto se corre un poco a la derecha; la
   opción elegida queda rellena (regla [data-filtro][aria-pressed]). */
.hf-boton-opcion {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background-color 300ms cubic-bezier(0.76, 0, 0.24, 1), color 300ms cubic-bezier(0.76, 0, 0.24, 1),
    border-color 300ms cubic-bezier(0.76, 0, 0.24, 1), padding-left 300ms cubic-bezier(0.76, 0, 0.24, 1);
}
.hf-boton-opcion::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgb(var(--hf-texto) / 0.1);
  transform: translateY(101%);
  transition: transform 350ms cubic-bezier(0.76, 0, 0.24, 1);
}
@media (hover: hover) {
  .hf-boton-opcion:hover {
    border-color: rgb(var(--hf-texto));
    padding-left: 1.25rem;
  }
  .hf-boton-opcion:hover::before {
    transform: none;
  }
}
.hf-boton-opcion:focus-visible {
  border-color: rgb(var(--hf-texto));
  padding-left: 1.25rem;
}
.hf-boton-opcion:focus-visible::before {
  transform: none;
}
.hf-boton-opcion:active::before {
  transform: scale(0.97);
}

/* Botón del menú de categorías: con una categoría elegida o abierto, borde del color del texto. */
.hf-filtros-abrir[data-activo],
.hf-filtros-abrir[aria-expanded="true"] {
  border-color: rgb(var(--hf-texto));
}

/* ─── Menú lateral del carrito (js/cart.js) ───────────────────────────── */
/* Cerrado está invisible; al abrir, el velo aparece y el panel entra desde la
   derecha con la misma curva que el menú izquierdo. visibility espera a que
   termine la salida para ocultarse. */
.hf-cajon {
  visibility: hidden;
  transition: visibility 0s 400ms;
}
.hf-cajon-velo {
  opacity: 0;
  transition: opacity 300ms ease-out;
}
.hf-cajon-panel {
  transform: translateX(100%);
  transition: transform 400ms cubic-bezier(0.76, 0, 0.24, 1);
}
.hf-cajon.hf-cajon-abierto {
  visibility: visible;
  transition-delay: 0s;
}
.hf-cajon-abierto .hf-cajon-velo {
  opacity: 1;
}
.hf-cajon-abierto .hf-cajon-panel {
  transform: none;
}

/* ─── Política dentro del panel del checkout (js/theme.js → .hf-embebido) ── */
/* Solo el texto: sin barra de anuncios, header, footer, botón de WhatsApp ni
   menú del carrito (todo lo que no es <main>). */
.hf-embebido body > :not(main) {
  display: none !important;
}

/* ─── Movimiento reducido ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Carga en el menú del carrito (js/cart.js → conCarga) ────────────── */
/* Tres cuadros que laten en secuencia. Sin bordes redondeados, como el resto. */
.hf-puntos {
  display: inline-flex;
  gap: 0.375rem;
}
.hf-puntos i {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  background-color: rgb(var(--hf-texto));
  animation: hf-latido 0.9s cubic-bezier(0.2, 0, 0, 1) infinite;
}
.hf-puntos i:nth-child(2) {
  animation-delay: 0.15s;
}
.hf-puntos i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes hf-latido {
  0%,
  80%,
  100% {
    opacity: 0.2;
    transform: scale(0.7);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hf-puntos i {
    animation: none;
    opacity: 0.6;
  }
}

/* ─── Iconos del header: de línea a relleno (tema y carrito) ──────────── */
/* Sin cuadro de fondo: al pasar el cursor (o con foco de teclado) el icono se
   rellena. En la bolsa, la línea superior y el asa toman el color del fondo
   para seguir leyéndose sobre el relleno. Al presionar, se encoge un poco. */
.hf-icono-relleno svg {
  fill: transparent;
  transition: fill 200ms cubic-bezier(0.2, 0, 0, 1), transform 150ms cubic-bezier(0.2, 0, 0, 1);
}
.hf-icono-relleno svg path,
.hf-icono-relleno svg circle {
  transition: stroke 200ms cubic-bezier(0.2, 0, 0, 1);
}
.hf-icono-relleno:hover svg,
.hf-icono-relleno:focus-visible svg {
  fill: currentColor;
}
.hf-icono-relleno:hover .lucide-shopping-bag path:not(:first-child),
.hf-icono-relleno:focus-visible .lucide-shopping-bag path:not(:first-child) {
  stroke: rgb(var(--hf-fondo));
}
.hf-icono-relleno:active svg {
  transform: scale(0.88);
}

/* ─── Icono relleno (pin de ubicación del footer) ─────────────────────── */
/* Lucide dibuja iconos de línea: aquí la silueta se rellena y el círculo
   interior toma el color del fondo, como un agujero. */
.hf-icono-lleno {
  fill: currentColor;
}
.hf-icono-lleno circle {
  fill: rgb(var(--hf-fondo));
  stroke: rgb(var(--hf-fondo));
}
/* Papelera del carrito: las dos rayitas interiores quedan recortadas en el color del fondo. */
.hf-icono-relleno:hover .lucide-trash-2 line,
.hf-icono-relleno:focus-visible .lucide-trash-2 line {
  stroke: rgb(var(--hf-fondo));
}
.hf-icono-relleno svg line {
  transition: stroke 200ms cubic-bezier(0.2, 0, 0, 1);
}