/* ================================================================
   BASE — copiado textual de index.html (líneas 46–138: :root +
   reset + body/img/.icn/.hsec). No reconstruir de memoria: si el
   home cambia estas reglas, se vuelve a copiar desde ahí.
   ================================================================ */

:root {
  --verde: #5BA899;
  --verde-hondo: #3E7C70;
  --resalte: #00A595;
  --resalte-hondo: #007D71;
  --cafe: #7A4B1F;
  --cafe-hondo: #5C3814;
  --cta: #F5941F;
  --cta-hover: #D97A0D;
  --cta-txt: #33230F;
  --crema: #F6F6F4;
  --crema-honda: #EDEDEA;
  --morado: #37235E;
  --azul: #3790C8;
  --azul-500: #3790C8;
  --rojo: #DD374B;
  --durazno: #C97E2E;
  --durazno-claro: #EDA153;
  --tinta: #1E2B27;
  --tinta-suave: #5C6B66;
  --borde: #E7ECEA;
  --azul-hondo: #24699A;
  --durazno-hondo: #9C5F1E;
  --morado-hondo: #251740;
  --tinte: #E9F4F1;
  --footer: #00A595;

  /* Color de la campaña de temporada del hero (óvalo de fondo y
     buscador liquid-glass). Fijo en "Marca" por ahora — cuando exista
     el panel de WordPress, el administrador podrá cambiarlo desde ahí
     (Buen Fin, Reyes, Verano, HOT CBD, etc.). */
  --camp-color: #007D71;
  --camp-tint: rgba(0, 125, 113, .22);
}


/* ---------- Base / reset — reglas generales que aplican a todo el sitio ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Lato', sans-serif;
  color: var(--tinta);
  background: var(--crema);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Cada sección tiene un blob/halo decorativo (::before/::after) que a
   propósito se sale un poco del borde (regla anti-esterilidad del
   sistema de diseño). El overflow-x:hidden del body no basta para
   contenerlos: en celular, esos blobs sin contener obligan a toda la
   página a dibujarse más ancha que la pantalla real, y el navegador
   la encoge completa (todo se ve chico y desacomodado). Cada sección
   contiene su propio blob para que esto no vuelva a pasar.
   OJO: es "clip" y no "hidden" a propósito — "hidden" en un solo eje
   obliga al navegador a poner el otro eje en "auto", lo que corta por
   error las fotos de producto y demás cosas que sobresalen HACIA
   ARRIBA/ABAJO de su sección (además de romper el "sticky" de Delta-8
   y de "dónde encontrarnos"). "clip" contiene solo el eje horizontal,
   sin ese efecto secundario. */
section {
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
}

.icn {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.14em;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hsec {
  position: relative;
}