/* ═══════════════════════════════════════════════════════════
   HALO ESSENCE · Base
   Reset, elementos y las superficies que dibuja el navegador.
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 8.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}

h1, h2, h3, h4 { font-weight: 600; line-height: 1.12; text-wrap: balance; }
h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -0.012em; }

p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }

/* Las imágenes NO llevan fondo propio: lo pone el contenedor.
   Un fondo global acá se mezclaba con el multiply de las fotos de
   producto y apagaba la peana clara. Si una URL falla, el onerror
   del HTML pone la imagen de reemplazo. */
img { background: none; }

button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* ── Superficies del navegador ─────────────────────────────
   Selección, cursor de texto, foco y scrollbar salen con los
   colores del sistema si no se los pinta. Entonados a la marca. */

::selection { background: var(--oro); color: var(--tinta-oro); }

input, textarea, select { caret-color: var(--oro-alto); }

:focus-visible {
  outline: 2px solid var(--oro-alto);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::placeholder { color: var(--texto-3); opacity: 1; }

/* Quita las flechitas de los campos numéricos: en el panel se
   escriben precios, no se incrementan de a uno. */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* El icono del calendario y del buscador vienen oscuros sobre fondo
   oscuro; se invierten para que se vean. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="search"]::-webkit-search-cancel-button {
  filter: invert(0.75) sepia(0.3) saturate(2) hue-rotate(5deg);
  cursor: pointer;
}

@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--realce) transparent; }
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--hueco); }
  ::-webkit-scrollbar-thumb {
    background: var(--realce);
    border-radius: var(--r-full);
    border: 3px solid var(--fondo);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--oro-bajo); }
  ::-webkit-scrollbar-corner { background: var(--fondo); }
}

/* ── Utilidades ─────────────────────────────────────────────── */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.oculto { display: none !important; }

/* El atributo hidden pierde contra cualquier display de una clase.
   Sin esto, un elemento con display:grid se sigue viendo con
   hidden = true. */
[hidden] { display: none !important; }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Las cifras alineadas en columna necesitan ancho fijo por dígito. */
.numeros { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ── Cifras ─────────────────────────────────────────────────
   Precios, totales y métricas.

   NO usan Cormorant Garamond, aunque sea la tipografía de los títulos:
   sus cifras son de estilo antiguo y el 1 es casi idéntico a una I
   mayúscula. "11 pedidos" se leía "II" y "$ 100.000" se leía "I00.000".
   La familia no trae juego de cifras alternativo, así que lining-nums
   no lo arregla: hay que cambiar de tipografía.

   El énfasis lo sigue dando el tamaño, el peso y el oro, que es donde
   estaba de verdad. */
.cifra {
  font-family: var(--ui);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  letter-spacing: -0.015em;
}

.etiqueta {
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-3);
  font-weight: 500;
}

/* ── Sin iconos ─────────────────────────────────────────────
   La clase la pone el onerror del <link> del CDN de iconos. Todo
   control que solo tenía un ícono recupera su texto, así la página
   sigue siendo usable si ese CDN está bloqueado o caído. */
.sin-iconos .fa-solid,
.sin-iconos .fa-brands,
.sin-iconos .fa-regular { display: none; }

/* Los botones de solo ícono ya declaran su nombre en aria-label. */
.sin-iconos .btn-icono {
  width: auto;
  min-width: 2.3rem;
  padding-inline: 0.55rem;
  font-size: var(--t-xs);
}
.sin-iconos .btn-icono::after { content: attr(aria-label); }

/* Las etiquetas que se esconden a la vista vuelven a mostrarse. */
.sin-iconos .solapa span,
.sin-iconos .lateral__pie .btn span,
.sin-iconos .btn-wa span {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  clip-path: none;
  display: inline;
  overflow: visible;
}
.sin-iconos .solapa span { font-size: var(--t-xs); }
.sin-iconos .btn-wa { width: auto; padding-inline: 0.7rem; }