/* ============================================================
   ESCALA DE BREAKPOINTS — unica fuente de verdad

     480px   movil chico
     600px   movil grande: el clumo del header (buscador, favoritos,
             boton Contactar) deja de entrar junto al logo
     768px   tablet vertical: la home colapsa a una columna
     992px   tablet horizontal: hero generico y footer a dos columnas

   Excepcion documentada:
     1100px  .nav-links-wrap — los enlaces centrados (Inicio/Tienda/Blog)
             no entran comodos junto al logo y al cluster de acciones, y
             la navegacion pasa entera al menu off-canvas. Es un umbral
             del componente, no de la pagina, por eso no se fuerza a 992.

   Cualquier valor nuevo fuera de esta lista debe justificarse en un
   comentario al lado, como el de 1100px.
   ============================================================ */

/* Tipografía autohospedada (fonts/, mismo origen: cumple la CSP existente
   font-src 'self' sin tener que abrir el sitio a un CDN de fuentes).
   Bitter es una slab serif variable — trazo grueso y "estampado", el
   registro tipográfico de una etiqueta de semillero o un cajón de fruta,
   no el de una revista editorial. Más anclada al mundo material del
   rubro (envases, carteles de vivero) que una display serif genérica.
   Work Sans acompaña como texto de cuerpo: humanista y muy legible, sin
   competir con la display. */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/bitter-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/bitter-italic-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/work-sans-variable.woff2") format("woff2");
}

/* Fuente puente para el intervalo de "swap" de Bitter.
   Con font-display: swap el texto se pinta primero en Georgia y salta a
   Bitter cuando llega; como las metricas difieren, ese salto desplazaba el
   <h1> del hero, que es ademas el elemento LCP. Esta cara reetiqueta a
   Georgia con las metricas de Bitter, asi ambas ocupan el mismo alto y ancho
   y el intercambio no mueve nada.

   Valores derivados de las metricas reales de los archivos, no estimados:
     Bitter   unitsPerEm 1000, xHeight 522, hhea asc/desc 935 / -265
     Georgia  unitsPerEm 2048, xHeight 986
     size-adjust      = (522/1000) / (986/2048) = 108.4%
     ascent-override  = 93.5% / 1.084 = 86.2%
     descent-override = 26.5% / 1.084 = 24.4%

   Work Sans no lleva una cara equivalente a proposito: su fallback real
   cambia segun el sistema (Segoe UI en Windows, Helvetica en iOS, Roboto en
   Android), asi que un unico juego de overrides seria incorrecto en la
   mayoria. El texto de cuerpo va ademas a 1rem, donde el desplazamiento es
   marginal frente al del hero. */
@font-face {
  font-family: "Bitter Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 108.4%;
  ascent-override: 86.2%;
  descent-override: 24.4%;
  line-gap-override: 0%;
}

:root {
  /* El sitio tiene un unico tema claro. Declararselo al navegador evita que
     los controles nativos (el <select> de asunto del formulario y su
     desplegable, las barras de scroll, el relleno automatico) se pinten con
     el chrome oscuro del sistema sobre un formulario crema. */
  color-scheme: light;

  --primary: #2b5240;
  --primary-dark: #16281e;
  --primary-light: #54755f;
  --accent: #d9a441;
  --accent-hover: #b98528;
  /* Acento "premium" para CTAs principales y estados de foco: verde
     neón, en la misma familia que el verde de marca (header/logo) para
     que todos los botones queden armónicos en vez de mezclar colores. */
  --cta: #2b5240;
  --cta-hover: #16281e;
  --cta-soft: #dce5d7;
  --cta-glow: rgba(43, 82, 64, 0.28);
  /* Terracota de maceta de barro: acento secundario, deliberadamente
     minoritario (divisor de firma, detalles pequeños) para no competir
     con el verde de marca ni deslizar la paleta hacia el cliché
     "crema + serif + terracota". */
  --clay: #6b4428;
  --brown: #6b4428;
  --clay-soft: #eadbce;
  --bg: #f4f1e6;
  --bg-alt: #e9e3d0;
  --bg-dark: #17241b;
  /* Tono más oscuro que --bg-dark, tomado del extremo del degradé del
     panel lateral (.nav-menu), para que la topbar de anuncios lea como
     una franja "por debajo" del header en vez de un verde desconectado. */
  --header-top-bg: #16281e;
  --bg-card: #fffdf8;
  --text: #1d2921;
  --text-white: #ffffff;
  --border: #d8d0bb;
  --text-light: #596359;
  --focus-ring: 0 0 0 3px rgba(217, 164, 65, 0.58);
  /* Sombras "slate", más suaves y difusas: look SaaS moderno en vez del
     gris neutro plano que se usaba antes. */
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-lg:
    0 8px 16px -4px rgba(15, 23, 42, 0.08),
    0 20px 40px -12px rgba(15, 23, 42, 0.18);
  --radius: 10px;
  --radius-lg: 20px;
  /* Lista explícita en vez de "all": mismo look en cada :hover/.active del
     sitio, pero sin arriesgarse a animar sin querer una propiedad de layout
     (width/height/padding/margin) que dispare reflow si algún selector
     nuevo reutiliza esta variable. */
  --transition:
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* Sistema tipográfico del sitio (Bitter + Work Sans): texto de cuerpo
     humanista y encabezados en slab serif, aplicado en todas las
     páginas — ver body y las reglas de encabezados en SECTION. */
  --font-display: "Bitter", "Bitter Fallback", Georgia, "Times New Roman",
    serif;
  --font-home-body: "Work Sans", "Segoe UI", Tahoma, Geneva, Verdana,
    sans-serif;

  /* ============================================================
     CAPA DE TOKENS - anclada en DESIGN.md

     DESIGN.md define la paleta, la escala de espaciado (8/16/24 + el
     clamp de seccion), los radios (0 / 10px / 14px) y tres roles
     tipograficos (display / body / label). Esos valores se declaran
     aca tal cual y son la fuente de verdad.

     El resto hoistea valores que ya vivian sueltos en la hoja, con su
     valor EXACTO: no cambian un pixel, pero pasan a estar enumerados en
     un solo lugar. Eso es lo que deja ver, por ejemplo, que la rampa
     tipografica real tiene 29 pasos donde DESIGN.md documenta 3.
     Consolidarla es una decision de diseno aparte, no un refactor
     mecanico.
     ============================================================ */


  /* --- Orden de apilado (DESIGN.md > layers) ---
     Escala semantica: el nombre dice el rol, no el numero. Saltos de 100 entre
     familias y de 10 dentro de una familia, para intercalar sin renumerar.
     No escribir z-index literales fuera de este bloque. */
  --z-behind: -1;
  --z-base: 1;
  --z-raised: 2;
  --z-control: 3;
  --z-nav-toggle: 10;
  --z-sticky: 100;
  --z-float: 200;
  --z-float-primary: 210;
  --z-header: 300;
  --z-header-cluster: 400;
  --z-overlay: 500;
  --z-panel: 510;
  --z-toast: 600;
  --z-skip-link: 700;

  /* --- Espaciado (DESIGN.md > spacing) --- */
  --space-compact: 8px;
  --space-control: 16px;
  --space-content: 24px;
  --space-section: clamp(68px, 7vw, 112px);

  /* --- Radios (DESIGN.md > rounded) --- */
  --radius-control: 0;
  --radius-surface: 14px;
  /* Fuera del mapa "rounded" de DESIGN.md, pero su seccion Shapes si
     admite pills en "controles compactos existentes". */
  --radius-pill: 999px;
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-50: 50px;

  /* --- Tipografia (DESIGN.md > typography) --- */
  --text-display: clamp(2.15rem, 5.3vw, 5.5rem);
  --text-body: 1rem;
  --text-label: 0.77rem;
  /* Rampa real en uso. El sufijo es el valor x100 a proposito: deja a la
     vista los pasos casi duplicados (74/75/76/78) que habria que unificar. */
  --text-68: 0.68rem;
  --text-70: 0.7rem;
  --text-72: 0.72rem;
  --text-74: 0.74rem;
  --text-75: 0.75rem;
  --text-76: 0.76rem;
  --text-78: 0.78rem;
  --text-80: 0.8rem;
  --text-82: 0.82rem;
  --text-83: 0.83rem;
  --text-85: 0.85rem;
  --text-90: 0.9rem;
  --text-92: 0.92rem;
  --text-95: 0.95rem;
  --text-103: 1.03rem;
  --text-105: 1.05rem;
  --text-110: 1.1rem;
  --text-115: 1.15rem;
  --text-118: 1.18rem;
  --text-120: 1.2rem;
  --text-125: 1.25rem;
  --text-132: 1.32rem;
  --text-140: 1.4rem;
  --text-150: 1.5rem;
  --text-160: 1.6rem;
  --text-180: 1.8rem;
  --text-200: 2rem;

  /* Titulos fluidos, por seccion */
  --text-fluid-hero: clamp(3rem, 5.3vw, 5.5rem);
  --text-fluid-hero-home: clamp(3rem, 14vw, 4.4rem);
  --text-fluid-hero-compact: clamp(2.35rem, 11vw, 3.4rem);
  --text-fluid-page: clamp(2.7rem, 4.6vw, 4.6rem);
  --text-fluid-page-alt: clamp(2.6rem, 4.4vw, 4.45rem);
  --text-fluid-section: clamp(2.15rem, 3.6vw, 3.25rem);
  --text-fluid-section-sm: clamp(2rem, 3.4vw, 3.1rem);
  --text-fluid-subsection: clamp(1.9rem, 3vw, 2.7rem);
  --text-fluid-heading: clamp(1.5rem, 2vw, 2rem);
  --text-fluid-heading-sm: clamp(1.45rem, 2.4vw, 2rem);
  --text-fluid-lead: clamp(1rem, 1.35vw, 1.15rem);

  /* --- Blanco con alfa: superficies, bordes y texto sobre los verdes oscuros --- */
  --on-dark-surface-faint: rgba(255, 255, 255, 0.05);
  --on-dark-surface: rgba(255, 255, 255, 0.08);
  --on-dark-surface-raised: rgba(255, 255, 255, 0.1);
  --on-dark-surface-hover: rgba(255, 255, 255, 0.2);
  --on-dark-scrollbar: rgba(255, 255, 255, 0.25);
  --on-dark-border-soft: rgba(255, 255, 255, 0.12);
  --on-dark-text-faint: rgba(255, 255, 255, 0.5);
  --on-dark-text-muted: rgba(255, 255, 255, 0.55);
  --on-dark-text-soft: rgba(255, 255, 255, 0.6);
  --on-dark-text: rgba(255, 255, 255, 0.85);
  --on-dark-focus: rgba(255, 255, 255, 0.9);
  --on-dark-text-warm: rgba(255, 250, 240, 0.85);
  --on-dark-text-warm-soft: rgba(255, 250, 240, 0.75);

  /* --- Negro y tinta con alfa: sombras y velos --- */
  --shadow-color-faint: rgba(0, 0, 0, 0.08);
  --shadow-color-soft: rgba(0, 0, 0, 0.2);
  --shadow-color: rgba(0, 0, 0, 0.22);
  --shadow-color-strong: rgba(0, 0, 0, 0.35);
  --shadow-color-deep: rgba(0, 0, 0, 0.38);
  --scrim: rgba(0, 0, 0, 0.32);
  --scrim-nav: rgba(61, 70, 60, 0.82);
  --scrim-deep: rgba(8, 11, 8, 0.66);
  --ink-border-faint: rgba(30, 35, 33, 0.07);
  --ink-shadow-soft: rgba(30, 35, 33, 0.55);
  --ink-shadow: rgba(30, 35, 33, 0.62);

  /* --- Superficies y acentos puntuales --- */
  --white: #fff;
  --white-translucent: #ffffffe0;
  --cream-light: #f7f1df;
  --accent-light: #edbc5d;
  /* Antes eran tonos oliva-gris (#454f42/#333b30/#2a312a) desconectados
     del resto de la paleta. Ancladas al verde de marca: el extremo mas
     oscuro (--nav-gradient-3) coincide con --header-top-bg, asi el panel
     lateral y el header comparten el mismo verde mas profundo. */
  --nav-gradient-1: var(--primary);
  --nav-gradient-2: var(--bg-dark);
  --nav-gradient-3: var(--primary-dark);
  --hero-frame: #51452f;
  --danger: #c0392b;

  /* --- Lavados de la paleta actual (reemplazan restos de la paleta previa) --- */
  --accent-glow: rgba(217, 164, 65, 0.3);
  --accent-wash: rgba(217, 164, 65, 0.16);
  --primary-wash: rgba(43, 82, 64, 0.28);
  --primary-border-hover: rgba(43, 82, 64, 0.32);
  /* Version inset de --focus-ring: el radius + overflow hidden de
     .product-card recortaria un anillo hacia afuera. */
  --focus-ring-inset: inset 0 0 0 3px rgba(217, 164, 65, 0.58);

  /* --- Canal de WhatsApp: color de marca externo, no de la paleta --- */
  --whatsapp: #15803d;
  --whatsapp-hover: #1ebe57;
  --whatsapp-brand: #25d366;
  --whatsapp-glow: rgba(21, 128, 61, 0.4);
  --whatsapp-glow-strong: rgba(21, 128, 61, 0.7);

}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* Reserva siempre el espacio del scrollbar en escritorio: al bloquear el
     scroll del fondo con overflow: hidden, el contenido no se desplaza. */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-home-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  /* Red de contencion, no un parche a ciegas. Auditado el 2026-08-25
     desactivandolo y midiendo scrollWidth contra clientWidth en las 4
     paginas principales a 320, 375, 768 y 1280px: ningun desborde real.
     Se mantiene porque .marquee-track mide a proposito varias veces el
     ancho del viewport y depende de un unico ancestro con overflow:hidden
     (.marquee-outer); si esa regla se rompiera, esto evita que el sitio
     entero quede con scroll lateral en movil. Para volver al modo estricto
     y que cualquier desborde nuevo se vea en desarrollo, borrar esta linea
     y repetir la medicion. */
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

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

/* Touch: sin delay de doble-tap-para-zoom en elementos interactivos, y el
   flash gris nativo de tap en mobile se reemplaza por los estados
   :hover/:active/:focus-visible ya definidos en cada componente. */
a,
button,
input,
select,
textarea,
[role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ACCESSIBILITY: visible focus state for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius);
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  /* Recorte en vez de left: -9999px: aquel desplazamiento extendia la caja
     del documento hacia la izquierda y era una de las razones por las que
     hacia falta el overflow-x del body. Asi ocupa 1px y no arrastra layout. */
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--primary);
  color: var(--text-white);
  z-index: var(--z-skip-link);
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  width: auto;
  height: auto;
  padding: 12px 20px;
  overflow: visible;
  clip-path: none;
}

ul {
  list-style: none;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--text-95);
  cursor: pointer;
  border: none;
  transition: var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-primary {
  background: var(--cta);
  color: var(--text-white);
}

.btn-primary:hover {
  background: var(--cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--cta-glow);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-accent {
  background: var(--accent);
  color: var(--text);
}

.btn-accent:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px var(--accent-glow);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}

.btn-outline:hover {
  background: var(--primary);
  color: var(--text-white);
}

.btn-lg {
  padding: 16px 36px;
  font-size: var(--text-105);
}

/* HEADER */
.header {
  background: var(--bg-dark);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  box-shadow: 0 1px 10px var(--shadow-color);
  transition:
    box-shadow 0.3s ease,
    background-color 0.3s ease;
}

/* Glassmorphism al scrollear: el fondo sólido pasa a una versión
   translúcida con desenfoque (misma familia de color que --bg-dark, no
   un tono nuevo). El logo se achica levemente con transform para dar
   sensación de header compacto SIN tocar la altura exterior del header:
   .header es position:sticky, sigue dentro del flujo del documento, asi
   que antes esto se lograba con grid-template-rows (achicando de verdad
   las filas de padding) — pero cualquier cambio de layout en un sticky
   dispara el scroll anchoring del navegador, que reajusta scrollY para
   compensar el salto, cruza de nuevo el umbral, y vuelve a disparar el
   cambio: un loop de scroll que "vibraba" cerca de scrollY 0-15px. Ver
   initHeaderScrollState() en main.js, que ademas separa el umbral de
   activar/desactivar (histeresis) para no alternar la clase en cada
   pixel. */
.header.is-scrolled {
  background: var(--scrim-nav);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 5px 24px var(--shadow-color-deep);
}

.header.is-scrolled .logo {
  transform: scale(0.88);
}

.header-top {
  background: var(--header-top-bg);
  color: var(--text-white);
  font-size: var(--text-78);
  letter-spacing: 0.01em;
  padding: 7px 0;
}

.header-top .container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.header-top p {
  opacity: 0.92;
}

.header-top .header-top-sep {
  margin: 0 10px;
  opacity: 0.5;
}

/* Filas 1 y 3 son el padding vertical del header, fijo: no cambian con
   el scroll (ver el comentario en .header.is-scrolled, mas arriba, sobre
   por que un header sticky no puede cambiar de alto sin generar un loop
   de scroll). */
.header-main {
  display: grid;
  grid-template-rows: 12px auto 12px;
}

.header-main .container {
  grid-row: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}

.nav-links-wrap {
  justify-self: center;
  min-width: 0;
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Por encima del header sticky, igual que el clúster de nav/off-canvas.
     z-index funciona igual sin position acá: es un grid item de
     .header-main .container, no necesita position:relative para eso. */
  z-index: var(--z-header-cluster);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-140);
  font-weight: 700;
  color: var(--text-white);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.logo img {
  height: 52px;
  width: auto;
}

.logo span {
  color: var(--text-white);
}

.header-main .logo {
  justify-self: start;
}

/* --- Panel de búsqueda desplegable: el ícono de lupa en .header-actions
   lo abre/cierra (initHeaderSearchToggle en main.js); en products.html el
   mismo contenedor .search-bar lo controla initProductSearch (main.js),
   así que el panel solo controla visibilidad, nunca el contenido interno.
   Se ancla a .header (el contenedor de todo el header, no al clúster de
   íconos): anclarlo a .header-actions —un flex item angosto dentro de un
   grid anidado en .header-main— hacía que Safari/WebKit en iOS calculara
   mal el "containing block" del right:0 y el panel se renderizaba pegado
   al borde izquierdo de la pantalla en vez de bajo la lupa. */
.header-search-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 20px;
  width: min(360px, 90vw);
  padding: 14px;
  background: rgba(42, 49, 42, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.header-search-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.search-bar {
  position: relative;
}

.search-bar input {
  width: 100%;
  padding: 10px 46px 10px 18px;
  border: none;
  border-radius: var(--radius-50);
  font-size: var(--text-95);
  background: var(--on-dark-surface-raised);
  color: var(--text-white);
  outline: none;
  transition: var(--transition);
}

.search-bar input::placeholder {
  color: var(--on-dark-text-faint);
}

.search-bar input:focus {
  background: var(--on-dark-surface-hover);
}

.search-bar button {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--cta);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition);
  display: grid;
  place-items: center;
}

.search-bar button:hover {
  background: var(--cta-hover);
}

/* NAV — enlaces fijos de la barra + botón hamburguesa + menú lateral (off-canvas) */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  /* Todo el clúster (botón, panel y overlay) vive en este contexto de
     apilamiento, por encima del header sticky (z-index: var(--z-header)). */
  z-index: var(--z-header-cluster);
}

/* --- Enlaces centrados de la barra principal --- */
.nav-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-links li a {
  position: relative;
  display: block;
  padding: 8px 4px;
  color: var(--text-white);
  font-size: var(--text-95);
  font-weight: 500;
  transition: color 0.3s ease;
}

/* Subrayado que se expande desde el centro hacia los lados, en el verde
   de marca (--cta) — la interacción de firma pedida para el menú.
   transform: scaleX() en vez de animar width: no dispara layout, solo
   compositing (el pseudo-elemento es position:absolute, así que ninguna
   otra caja del documento depende de su ancho real). */
.nav-links li a::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 2px;
  height: 2px;
  background: var(--cta);
  border-radius: var(--radius-2);
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-links li a:hover::after,
.nav-links li a.active::after {
  transform: scaleX(1);
}

.nav-links li a.active {
  color: var(--accent);
}

/* El anillo de foco global (--focus-ring) es verde sobre fondo verde
   oscuro aquí: contraste insuficiente. Mismo tratamiento que .nav-menu. */
.nav-links li a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--on-dark-focus);
  border-radius: var(--radius-4);
}

/* --- Botón hamburguesa animado --- */
.hamburger {
  position: relative;
  /* z-index alto: el botón (que se vuelve "X") nunca queda oculto detrás
     del panel lateral ni del overlay. */
  z-index: var(--z-nav-toggle);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 8px;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: var(--radius);
}

.hamburger span {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--text-white);
  border-radius: var(--radius-3);
  transform-origin: center;
  /* Curva elástica y natural: cubic-bezier(0.25, 1, 0.5, 1) */
  transition:
    transform 0.45s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.3s ease;
}

/* Estado "X": la línea del medio se desvanece y las exteriores se cruzan */
.hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.15);
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* En escritorio ancho el botón queda a mitad de camino entre el panel y el
   fondo (su posición natural es relativa al header, no al panel). En vez de
   perseguir el borde del panel con cálculos frágiles por breakpoint, el
   botón del header se desvanece al abrir y el cierre lo asume el botón
   fijo dentro del panel (.nav-menu-close), que siempre queda pegado a su
   borde izquierdo sin importar el ancho de pantalla. */
.hamburger.active {
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease 0.15s,
    transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- Botón del carrito (vive en el header, a la izquierda de la hamburguesa) --- */
.cart-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 8px;
  margin-right: 2px;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  color: var(--text-white);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cart-toggle:hover {
  background: var(--on-dark-surface);
}

.cart-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text);
  font-size: var(--text-68);
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bg-dark);
}

.cart-badge[hidden] {
  display: none;
}

/* --- Botón "Contactar" (reemplaza al carrito en el header) --- */
.contact-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  margin-right: 6px;
  background: var(--cta);
  color: var(--text-white);
  /* Borde ámbar visible: el mismo acento que las cards de promociones usan
     en hover y que ya recorre el borde inferior del header. Sin él, el
     relleno verde del botón se funde con el fondo oscuro del header. */
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  font-size: var(--text-85);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

/* Hover con la misma identidad que .promo-card:hover: misma transición
   (var(--transition), ya declarada arriba) y el mismo acento en el borde,
   que se ilumina de var(--accent) a var(--accent-light) porque el reposo ya
   es var(--accent). El "brillo" de la promo (var(--shadow-lg)) es una sombra
   slate pensada para papel claro y sobre el header oscuro no se ve; se usa
   el resplandor ámbar propio de los botones de acento del sitio
   (var(--accent-glow), mismo patrón que .btn:hover) para lograr el mismo
   efecto visual sobre fondo oscuro. Sin translateY ni cambio de fondo. */
.contact-trigger:hover {
  border-color: var(--accent-light);
  box-shadow: 0 4px 15px var(--accent-glow);
}

.contact-trigger-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .contact-trigger {
    padding: 10px;
    border-radius: 50%;
  }

  .contact-trigger-label {
    display: none;
  }
}

/* --- Panel lateral deslizante (off-canvas de alta gama) --- */
.nav-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* contenido anclado al margen derecho */
  text-align: right;
  width: min(40%, 400px); /* ~40% del ancho en escritorio (máx. 400px) */
  height: 100vh;
  height: 100dvh;
  margin: 0;
  /* Arriba: deja espacio para la "X" propia del panel (arriba a la
     izquierda); derecha: margen elegante */
  padding: 100px 30px 32px;
  /* Profundidad sutil en vez de un relleno plano: luz implícita arriba a
     la izquierda, se hunde hacia el borde opuesto. */
  background: linear-gradient(160deg, var(--nav-gradient-1) 0%, var(--nav-gradient-2) 55%, var(--nav-gradient-3) 100%);
  box-shadow: -12px 0 40px var(--shadow-color-strong);
  overflow-y: auto;
  overflow-x: hidden; /* evita scrollbar horizontal durante el escalonado */
  scrollbar-width: thin;
  scrollbar-color: var(--on-dark-scrollbar) transparent;
  /* Solo transform: la transición queda 100 % en GPU (60 fps). Nada de
     transiciones de "right" ni "width", que provocan repintados. */
  transform: translateX(110%);
  will-change: transform;
  visibility: hidden;
  transition:
    transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0s linear 0.5s;
}

.nav-menu.active {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.nav-menu::-webkit-scrollbar {
  width: 6px;
}

.nav-menu::-webkit-scrollbar-track {
  background: transparent;
}

.nav-menu::-webkit-scrollbar-thumb {
  background: var(--on-dark-scrollbar);
  border-radius: var(--radius-pill);
}

.nav-menu ul {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* opciones alineadas al margen derecho */
  gap: 8px;
  width: 100%;
}

/* Las opciones entran una por una: escalonado de opacidad + desplazamiento */
.nav-menu li {
  opacity: 0;
  transform: translateX(48px);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.nav-menu li a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 15px 20px;
  border-radius: var(--radius);
  color: var(--on-dark-text);
  font-size: var(--text-115);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-align: right; /* mismo eje de alineación derecha que la "X" */
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    padding-right 0.3s ease;
}

.nav-menu li a svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--on-dark-text-muted);
  transition: color 0.3s ease;
}

.nav-menu li a:hover svg,
.nav-menu li a.active svg {
  color: var(--accent);
}

/* Punto de página activa: no depende solo del color para señalar dónde
   estás parado (más accesible que confiar únicamente en el tono). */
.nav-menu li a.active {
  padding-left: 26px;
}

.nav-menu li a.active::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.nav-menu li a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--on-dark-focus);
}

/* Línea de acento que se desliza bajo cada enlace (de derecha a izquierda) */
.nav-menu li a::after {
  content: "";
  position: absolute;
  right: 18px;
  left: 100%;
  bottom: 12px;
  height: 2px;
  background: var(--accent);
  transition: left 0.3s ease;
}

.nav-menu li a:hover {
  /* Acento dorado en vez de un scrim negro generico: coherente con el
     punto/subrayado de la pagina activa, que ya usan --accent. */
  background: var(--accent-wash);
  color: var(--text-white);
  padding-right: 26px;
}

.nav-menu li a:hover::after {
  left: 18px;
}

.nav-menu li a.active {
  color: var(--accent);
}

/* Estado final del escalonado cuando el panel está abierto */
.nav-menu.active li {
  opacity: 1;
  transform: translateX(0);
}

.nav-menu.active li:nth-child(1) {
  transition-delay: 0.08s;
}

.nav-menu.active li:nth-child(2) {
  transition-delay: 0.18s;
}

.nav-menu.active li:nth-child(3) {
  transition-delay: 0.28s;
}

.nav-menu.active li:nth-child(4) {
  transition-delay: 0.38s;
}

/* Bloque de cierre del panel: con solo 3 enlaces cortos, el panel dejaba
   mucho vacío debajo. margin-top: auto lo ancla siempre al fondo (el
   panel ya es flex-column), y entra como el último paso del mismo
   escalonado en vez de un efecto aparte. */
.nav-menu-footer {
  margin-top: auto;
  padding-top: 24px;
  width: 100%;
  border-top: 1px solid var(--on-dark-border-soft);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.nav-menu.active .nav-menu-footer {
  opacity: 1;
  transition-delay: 0.48s;
}

.nav-menu-footer-title {
  font-size: var(--text-85);
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 4px;
}

/* --- Botón "cerrar" propio del panel ---
   Vive DENTRO de .nav-menu (no en el header), así que se desliza junto con
   el panel sin cálculos aparte y queda pegado a su borde izquierdo tanto en
   escritorio como en mobile con la misma regla (sin media queries). */
.nav-menu-close {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top, 0px));
  left: 20px;
  z-index: var(--z-control);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.3s ease 0.15s,
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) 0.15s,
    background-color 0.2s ease;
}

.nav-menu-close:hover,
.nav-menu-close:focus-visible {
  background: var(--on-dark-surface-raised);
}

.nav-menu-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--on-dark-focus);
}

.nav-menu-close span {
  position: absolute;
  width: 22px;
  height: 3px;
  background: var(--text-white);
  border-radius: var(--radius-3);
}

.nav-menu-close span:first-child {
  transform: rotate(45deg);
}

.nav-menu-close span:last-child {
  transform: rotate(-45deg);
}

.nav-menu.active .nav-menu-close {
  opacity: 1;
  transform: scale(1);
}

/* --- Fondo de superposición (backdrop) con fade-in --- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-base);
  background: var(--scrim-deep);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
  transition:
    opacity 0.45s ease,
    visibility 0s linear 0.45s;
}

.nav-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease;
}

/* Impide hacer scroll de fondo mientras el menú o el carrito están abiertos */
body.menu-open,
body.cart-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Respeta la preferencia de movimiento reducido: todo sin animación */
@media (prefers-reduced-motion: reduce) {
  .hamburger,
  .hamburger span,
  .nav-menu,
  .nav-menu li,
  .nav-menu-footer,
  .nav-menu-close,
  .nav-overlay,
  .cart-panel,
  .cart-overlay {
    transition: none !important;
  }
}

/* --- CARRITO DE COMPRAS: panel deslizante (off-canvas), lista de
   productos y checkout simplificado (retiro en local + pago en efectivo) --- */
.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--scrim-deep);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.45s ease,
    visibility 0s linear 0.45s;
}

.cart-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease;
}

.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-panel);
  width: min(440px, 92%);
  height: 100vh;
  height: 100dvh;
  background: var(--bg-card);
  box-shadow: -12px 0 40px var(--shadow-color-strong);
  display: flex;
  flex-direction: column;
  transform: translateX(110%);
  visibility: hidden;
  transition:
    transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0s linear 0.5s;
}

.cart-panel.active {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.cart-panel-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  background: var(--bg-dark);
  color: var(--text-white);
}

.cart-panel-header h2 {
  font-size: var(--text-125);
}

.cart-panel-close {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cart-panel-close:hover,
.cart-panel-close:focus-visible {
  background: var(--on-dark-surface-raised);
}

.cart-panel-close span {
  position: absolute;
  width: 20px;
  height: 3px;
  background: var(--text-white);
  border-radius: var(--radius-3);
}

.cart-panel-close span:first-child {
  transform: rotate(45deg);
}

.cart-panel-close span:last-child {
  transform: rotate(-45deg);
}

.cart-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* El atributo [hidden] necesita ganarle a "display: flex" de arriba */
.cart-view[hidden] {
  display: none;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cart-item {
  display: flex;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.cart-item-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: var(--bg);
  border-radius: var(--radius);
  flex-shrink: 0;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  font-size: var(--text-90);
  font-weight: 600;
  margin-bottom: 4px;
}

.cart-item-price {
  font-size: var(--text-80);
  color: var(--text-light);
  margin-bottom: 8px;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qty-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}

.qty-btn:hover {
  background: var(--bg);
}

.qty-value {
  min-width: 16px;
  text-align: center;
  font-weight: 600;
  font-size: var(--text-90);
}

.cart-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.cart-item-subtotal {
  font-weight: 700;
  color: var(--primary);
  font-size: var(--text-90);
  white-space: nowrap;
}

.cart-item-remove {
  background: transparent;
  border: none;
  font-size: var(--text-body);
  opacity: 0.6;
  padding: 4px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.cart-item-remove:hover {
  opacity: 1;
}

.cart-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-light);
}

.cart-summary {
  flex-shrink: 0;
  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.cart-total-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-105);
  font-weight: 700;
  margin-bottom: 6px;
}

.cart-total-line span {
  font-size: var(--text-85);
  font-weight: 500;
  color: var(--text-light);
}

.cart-checkout-btn {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}

.cart-checkout-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.cart-clear-btn {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: var(--text-78);
  text-decoration: underline;
  cursor: pointer;
  padding: 0 0 10px;
}

.cart-clear-btn:hover {
  color: var(--danger);
}

/* Trampa anti-bots: campo real para lectores de pantalla/personas, pero
   fuera de la pantalla visible (mismo truco que .skip-link). Un bot que
   completa cualquier input de un formulario suele rellenar esto también. */
.cart-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cart-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-80);
  color: var(--text-light);
  line-height: 1.4;
  margin-bottom: 16px;
}

.cart-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--primary);
}

.cart-consent a {
  color: var(--primary);
  text-decoration: underline;
}

.cart-view-checkout {
  overflow-y: auto;
  padding: 20px;
}

.cart-back-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 16px;
}

.cart-back-btn:hover {
  text-decoration: underline;
}

.form-hint {
  font-size: var(--text-80);
  color: var(--text-light);
  margin-top: 6px;
}

.field-error {
  font-size: var(--text-80);
  color: var(--danger);
  margin-top: 6px;
}

.form-group select:disabled {
  background: var(--bg);
  color: var(--text);
  opacity: 1;
  cursor: not-allowed;
}

.cart-order-summary {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 14px;
  margin: 4px 0 20px;
}

.cart-order-summary h3 {
  font-size: var(--text-90);
  margin-bottom: 8px;
}

.cart-order-summary ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.cart-order-summary li {
  font-size: var(--text-82);
  color: var(--text-light);
}

.cart-order-summary-total {
  font-weight: 700;
}

.cart-whatsapp-btn {
  width: 100%;
  justify-content: center;
  background: var(--whatsapp-brand);
  color: var(--white);
}

.cart-whatsapp-btn:hover {
  background: var(--whatsapp-hover);
  transform: translateY(-2px);
}

/* HERO / CAROUSEL */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  padding: clamp(56px, 7vw, 92px) 0;
  isolation: isolate;
}

/* ========================================================================
   HOME — CULTIVATION FIELD GUIDE
   Composición aprobada: superficies crema, estructura verde bosque y un
   único foco de conversión. Estas reglas se limitan a la portada para que
   el catálogo y las páginas informativas conserven su propio contexto.
   ======================================================================== */
body.home {
  background: var(--bg);
}

/* Header compartido: el sitio se reconoce como una única experiencia desde
   cualquier ruta. La portada conserva su hero protagonista, pero navegación,
   buscador y transición de scroll no cambian de lenguaje al entrar al catálogo
   o a una guía. */
body.home .header,
body:not(.home) .header {
  background: var(--bg-dark);
  box-shadow: none;
  border-bottom: 1px solid rgba(217, 164, 65, 0.28);
}

body.home .header.is-scrolled,
body:not(.home) .header.is-scrolled {
  background: rgba(23, 36, 27, 0.96);
  box-shadow: 0 10px 26px rgba(22, 40, 30, 0.18);
}

body.home .header-top,
body:not(.home) .header-top {
  background: var(--primary-dark);
  color: var(--cream-light);
  padding: 9px 0;
  font-size: var(--text-74);
  letter-spacing: 0.04em;
}

body.home .header-main .container,
body:not(.home) .header-main .container {
  min-height: 76px;
}

body.home .logo span,
body:not(.home) .logo span {
  font-family: var(--font-display);
  font-size: var(--text-132);
  letter-spacing: -0.04em;
}

body.home .nav-links,
body:not(.home) .nav-links {
  gap: 30px;
}

body.home .nav-links a,
body:not(.home) .nav-links a {
  color: rgba(255, 253, 248, 0.78);
  font-size: var(--text-83);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.home .nav-links a::after,
body:not(.home) .nav-links a::after {
  background: var(--accent);
}

body.home .hero {
  padding: 0;
  background: var(--bg-dark);
}

body.home .hero::before {
  display: none;
}

body.home .hero-split {
  max-width: none;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(420px, 0.94fr);
  gap: 0;
  /* stretch (no "center"): el panel verde .hero-content llena todo el alto
     de la fila, sin dejar franjas del fondo oscuro de .hero arriba y abajo.
     El min-height va ajustado al contenido real para que el hero cierre
     alineado con el botón en vez de arrastrar un vacío inferior. */
  align-items: stretch;
  min-height: clamp(430px, 32vw, 520px);
}

body.home .hero-content {
  position: relative;
  z-index: var(--z-base);
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(40px, 5vw, 72px) clamp(24px, 8vw, 130px);
  background:
    linear-gradient(120deg, rgba(22, 40, 30, 0.98), rgba(43, 82, 64, 0.94)),
    var(--primary);
}

body.home .hero-content::after {
  content: "";
  position: absolute;
  width: min(44vw, 570px);
  height: min(44vw, 570px);
  right: -26%;
  bottom: -50%;
  border: 1px solid rgba(217, 164, 65, 0.21);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(217, 164, 65, 0.045), 0 0 0 88px rgba(217, 164, 65, 0.03);
  pointer-events: none;
}

body.home .hero-status {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  color: var(--cream-light);
  font-size: var(--text-72);
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 1.45;
  text-transform: uppercase;
  margin: 0 0 32px;
  opacity: 0.95;
}

body.home .hero-status span {
  color: var(--accent);
}

body.home .hero-content h1 {
  position: relative;
  z-index: var(--z-base);
  max-width: 10ch;
  color: var(--bg-card);
  font-size: var(--text-fluid-hero);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.96;
  text-wrap: balance;
  margin-bottom: 27px;
}

body.home .hero-content h1 span {
  color: var(--bg-card);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 4px;
  text-underline-offset: 13px;
}

body.home .hero-content > p:not(.hero-status) {
  position: relative;
  z-index: var(--z-base);
  max-width: 46ch;
  color: rgba(255, 253, 248, 0.82);
  font-size: var(--text-103);
  line-height: 1.7;
  margin-bottom: 34px;
}

body.home .hero-buttons {
  position: relative;
  z-index: var(--z-base);
}

body.home .btn {
  min-height: 50px;
  border-radius: 0;
  padding: 13px 24px;
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: 0.09em;
}

body.home .btn-primary {
  background: var(--accent);
  color: var(--primary-dark);
}

body.home .btn-primary:hover {
  background: var(--accent-light);
  box-shadow: 0 10px 24px rgba(22, 40, 30, 0.22);
  transform: translateY(-2px);
}

body.home .hero-visual {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background: var(--hero-frame);
}

body.home .hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 36, 27, 0.46), transparent 32%), linear-gradient(0deg, rgba(23, 36, 27, 0.24), transparent 46%);
  pointer-events: none;
}

body.home .hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

body.home .section {
  padding: clamp(68px, 7vw, 112px) 0;
}

body.home .categories {
  background: var(--bg);
}

body.home .section-header {
  max-width: 620px;
  margin: 0 auto clamp(30px, 4vw, 48px);
}

body.home .section-header h2 {
  color: var(--primary-dark);
  font-size: var(--text-fluid-section);
  letter-spacing: -0.035em;
}

body.home .section-header p {
  color: var(--text-light);
  line-height: 1.65;
}

body.home .section-divider {
  color: var(--accent);
}

body.home .categories-grid {
  /* Cinco columnas para las cinco categorias. Con seis quedaba una celda
     vacia al final de la fila y cada tarjeta perdia ~20% de ancho, lo que
     partia en dos lineas los titulos largos entre 1000 y 1100px. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

body.home .category-card {
  min-height: 208px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 24px 20px;
  border: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

body.home .category-card:nth-child(even) {
  background: var(--bg-alt);
}

body.home .category-card:hover {
  background: var(--primary);
  color: var(--bg-card);
  transform: none;
  box-shadow: none;
  border-color: var(--primary);
}

body.home .category-icon {
  width: 42px;
  height: 42px;
  margin: 0 0 auto;
  padding: 0;
  border-radius: 0;
  color: var(--primary);
  background: transparent;
}

body.home .category-card:hover .category-icon,
body.home .category-card:hover p {
  color: rgba(255, 253, 248, 0.72);
}

body.home .category-icon svg {
  width: 28px;
  height: 28px;
}

body.home .category-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-110);
  line-height: 1.1;
  margin: 18px 0 6px;
}

body.home .category-card p {
  color: var(--text-light);
  font-size: var(--text-78);
  line-height: 1.45;
}

body.home .category-card h3::after {
  content: " ↗";
  color: var(--accent);
}

body.home #featuredProducts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

body.home #featuredProducts .product-card {
  border: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  background: var(--bg-card);
  /* Anula el translateY de .reveal: estas tarjetas entran solo con opacidad,
     porque el borde continuo de la grilla delataria el desplazamiento. */
  transform: none;
}

body.home .product-card:hover {
  box-shadow: none;
  transform: none;
}

body.home #featuredProducts .product-brand,
body.home #featuredProducts .product-price,
body.home #featuredProducts .product-actions {
  display: none;
}

/* Foto de producto pendiente: mientras no haya fotos reales, se muestra el
   isotipo de Cripi como placeholder, achicado (en vez de llenar los 160px
   que usa una foto real) para no verse pixelado ni simular ser una foto. */
body.home #featuredProducts .product-image img {
  max-height: 84px;
}

body.home #featuredProducts .product-name {
  position: relative;
  z-index: var(--z-raised);
  padding: 24px;
  margin: 0;
  color: var(--primary-dark);
  font-family: var(--font-display);
  font-size: var(--text-118);
  line-height: 1.15;
}

body.home #featuredProducts .product-name::before {
  content: "Selección Cripi";
  display: block;
  margin-bottom: 10px;
  color: var(--clay);
  font-family: var(--font-home-body);
  font-size: var(--text-68);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.home #featuredProducts .product-card-link {
  pointer-events: none;
}

body.home #featuredProducts + div .btn-outline {
  border-color: var(--primary);
  color: var(--primary);
  border-radius: 0;
}

body.home #featuredProducts + div .btn-outline:hover {
  background: var(--primary);
  color: var(--bg-card);
}

body.home .features {
  background: var(--primary-dark);
  color: var(--bg-card);
}

body.home .features .section-header h2,
body.home .features .section-header p {
  color: var(--bg-card);
}

body.home .features .section-header p {
  opacity: 0.72;
}

body.home .features-grid {
  gap: 0;
  border-top: 1px solid rgba(255, 253, 248, 0.24);
}

body.home .feature-item {
  padding: 28px 32px;
  text-align: left;
  border-right: 1px solid rgba(255, 253, 248, 0.24);
}

body.home .feature-item:last-child {
  border-right: 0;
}

body.home .feature-icon {
  width: 42px;
  height: 42px;
  margin: 0 0 22px;
  border-radius: 0;
  color: var(--accent);
  background: transparent;
}

body.home .feature-item h3 {
  color: var(--bg-card);
  font-family: var(--font-display);
  font-size: var(--text-118);
}

body.home .feature-item p {
  color: rgba(255, 253, 248, 0.66);
}

body.home .brands-marquee {
  background: var(--bg-alt);
}

body.home .footer {
  background: var(--bg-dark);
}

@media (max-width: 992px) {
  body.home .hero-split {
    grid-template-columns: 1fr 0.85fr;
  }

  body.home .hero-content {
    padding-inline: clamp(24px, 5vw, 64px);
  }

  body.home .categories-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  body.home .header-top p {
    line-height: 1.45;
  }

  body.home .hero-split {
    grid-template-columns: 1fr;
  }

  body.home .hero-content {
    min-height: 420px;
    padding: 46px 24px 40px;
  }

  body.home .hero-content h1 {
    font-size: var(--text-fluid-hero-home);
  }

  body.home .hero-visual {
    min-height: 310px;
  }

  body.home #featuredProducts {
    grid-template-columns: 1fr;
  }

  body.home .category-card {
    min-height: 180px;
  }

  body.home .feature-item {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 253, 248, 0.24);
  }

  body.home .feature-item:last-child {
    border-bottom: 0;
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-behind);
  background:
    radial-gradient(circle at 87% 13%, var(--accent-wash), transparent 27%),
    radial-gradient(circle at 52% 105%, var(--primary-wash), transparent 34%);
}

/* Mitades iguales: fotos a la izquierda, mensaje a la derecha. El
   copy explica lo que la foto ya mostró, en vez de competir con ella
   superpuesto (como en la versión anterior, texto + degradado encima
   del carrusel). */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(38px, 6vw, 84px);
}

@media (max-width: 768px) {
  .hero-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero-content {
    text-align: center;
  }
}

/* Hero compacto para páginas internas (Tienda, Contacto, Blog, FAQ,
   Devoluciones, Privacidad): mismo fondo oscuro y misma tipografía que el
   hero de home, sin el carrusel — sustituye los "style=padding:40px 0"
   sueltos que había en cada página por una sola clase. */
.hero-compact {
  padding: 56px 0 60px;
}

@media (max-width: 768px) {
  .hero-compact {
    padding: 40px 0 44px;
  }
}

/* Antecede al <h1> del hero: la itálica en display serif es el mismo
   "sello" tipográfico en toda la home y las páginas internas. Antes vivía
   solo en index.html (body.home); se generaliza para poder reusarla en
   cualquier hero del sitio. */
.hero-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-body);
  color: var(--on-dark-text-warm);
  margin-bottom: 6px;
}

@media (max-width: 768px) {
  body.home .hero-eyebrow {
    text-align: center;
  }
}

/* Variante como enlace del eyebrow: usada en FAQ/Devoluciones/Privacidad
   para el link "Volver al inicio" arriba del <h1>, con el mismo registro
   itálico en vez de una utilidad tw-* suelta sin relación con el resto
   del sistema tipográfico. */
.hero-eyebrow-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-95);
  color: var(--on-dark-text-warm-soft);
  margin-bottom: 10px;
  transition: color 0.25s ease;
}

.hero-eyebrow-link:hover,
.hero-eyebrow-link:focus-visible {
  color: var(--accent);
}

.hero-content {
  max-width: 570px;
  color: var(--text-white);
}

.hero-content h1 {
  font-family: var(--font-display);
  font-size: var(--text-fluid-page-alt);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.06;
  margin-bottom: 20px;
}

.hero-content h1 span {
  color: var(--accent);
}

.hero-content p {
  font-size: var(--text-fluid-lead);
  opacity: 0.88;
  margin-bottom: 34px;
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {

  .hero-content {
    max-width: 100%;
  }

  .hero-content h1 {
    font-size: var(--text-200);
  }

  .hero-buttons {
    justify-content: center;
  }
}

/* SECTION */
.section {
  padding: clamp(64px, 8vw, 104px) 0;
}

.section-header {
  text-align: center;
  margin-bottom: clamp(34px, 5vw, 54px);
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-fluid-subsection);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--primary-dark);
  margin-bottom: 10px;
}

.section-header p {
  color: var(--text-light);
  font-size: var(--text-105);
}

.section-header .line {
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin: 12px auto 0;
  border-radius: var(--radius-2);
}

/* Divisor "vena de hoja": elemento de firma de la home. Sustituye la
   barra plana por un pequeño esqueleto de hoja (nervadura central +
   venas) — un motivo botánico propio del rubro en vez de un adorno
   genérico, repetido en cada encabezado de sección de index.html. */
.section-divider {
  display: block;
  width: 130px;
  height: 22px;
  margin: 14px auto 0;
  color: var(--clay);
}

/* CATEGORIES */
.categories {
  background: linear-gradient(180deg, #f8f8f5 0%, #f3f5ef 100%);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}

.category-card {
  background: var(--bg-card);
  border-radius: var(--radius-surface);
  padding: 28px 18px 24px;
  text-align: center;
  box-shadow: 0 10px 24px -20px var(--ink-shadow-soft);
  border: 1px solid var(--ink-border-faint);
  transition: var(--transition);
  cursor: pointer;
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 32px -22px var(--ink-shadow);
  border-color: var(--primary-border-hover);
}

.category-icon {
  width: 62px;
  height: 62px;
  background: var(--cta-soft);
  border-radius: var(--radius-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: var(--text-180);
  color: var(--primary-dark);
}

.category-icon svg {
  width: 32px;
  height: 32px;
}

.category-card h3 {
  font-size: var(--text-body);
  font-weight: 600;
  margin-bottom: 6px;
}

.category-card p {
  font-size: var(--text-85);
  color: var(--text-light);
}

/* PRODUCTS */
/* Aviso de products.html?view=favorites, inyectado por
   initFavoritesViewFromURL() justo antes del grid. */
.favorites-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px 18px;
  background: var(--cta-soft);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--text-92);
}

.favorites-banner a {
  color: var(--cta-hover);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.product-card {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* Enlace "estirado" (a11y): cubre toda la tarjeta como un <a> real
   (navegación con Cmd/Ctrl/click del medio, Tab + Enter nativos) en vez
   de un div con onclick. Va por debajo de .product-actions para que
   Consultar/Favoritos sigan siendo controles independientes. */
.product-card-link {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  border-radius: inherit;
}

/* Inset (no outward) para que el anillo no quede recortado por el
   overflow: hidden + radius de .product-card. */
.product-card-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-inset);
}

.product-image {
  position: relative;
  background: var(--bg);
  padding: 20px;
  text-align: center;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image img {
  max-height: 160px;
  object-fit: contain;
}

.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--accent);
  color: var(--text);
  padding: 4px 10px;
  border-radius: var(--radius-4);
  font-size: var(--text-75);
  font-weight: 700;
}

.product-brand {
  font-size: var(--text-80);
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.product-name {
  font-size: var(--text-95);
  font-weight: 600;
  margin-bottom: 8px;
  padding: 0 16px;
}

.product-price {
  font-size: var(--text-120);
  font-weight: 700;
  color: var(--primary);
  padding: 0 16px 12px;
}

.product-price .old-price {
  font-size: var(--text-85);
  color: var(--text-light);
  text-decoration: line-through;
  margin-left: 8px;
  font-weight: 400;
}

.product-actions {
  position: relative;
  z-index: var(--z-raised);
  padding: 0 16px 16px;
  display: flex;
  gap: 8px;
}

.product-actions button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--text-85);
  cursor: pointer;
  transition: var(--transition);
}

.btn-consult {
  background: var(--primary);
  color: white;
}

.btn-consult:hover {
  background: var(--primary-dark);
}

.btn-wishlist {
  /* --bg en vez de --bg-alt: el gris que habia (#f0f0f0) esta al 94% de
     luminosidad y --bg-alt al 86%, un salto de 8 puntos que convertia el chip
     en un boton pesado. --bg esta al 93%, o sea el mismo peso visual, y aporta
     el matiz calido que le faltaba. */
  background: var(--bg);
  color: var(--text);
}

.btn-wishlist:hover {
  /* 86% contra el 88% del gris anterior: mismo salto de hover, temperatura
     correcta. --border (79%) resultaba demasiado pesado para un hover. */
  background: var(--bg-alt);
}

.btn-wishlist.active {
  background: var(--accent);
  color: var(--text-white);
}

/* CATEGORY CARD as link (a11y) */
.category-card {
  display: block;
  color: inherit;
}

/* Product card highlighted via ?product= deep link */
.product-card.highlight {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* PROMOS — la seccion nunca se pinta oscura en la practica: en
   pages/products.html es el 3er <section> bajo <main>, asi que la regla
   de zebra-striping de paginas internas (body:not(.home) main >
   .section:nth-of-type(odd), mas abajo) siempre le gana con --bg-alt.
   Antes tenia un fondo --bg-dark y texto blanco pensados para una
   variante oscura que ese override jamas dejaba ver: el titulo quedaba
   blanco sobre un fondo casi tan claro como el, ilegible. Se quita ese
   tratamiento muerto y se deja que la seccion siga la misma identidad
   que el resto de paginas internas — titulo y divisor en los mismos
   tonos oscuros de .section-header, ya definidos mas arriba. */
.promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* Antes usaban --on-dark-surface-faint (blanco al 5% de opacidad): sobre
   el fondo real de la seccion (--bg-alt, un tostado claro) la tarjeta se
   fundia casi por completo. Se reemplaza por el mismo par crema/sombra
   que ya usa .product-card en el resto del sitio, asi que gana contraste
   real sin inventar un tratamiento nuevo. */
.promo-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.promo-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}

.promo-image {
  height: 200px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.promo-image img {
  max-height: 160px;
  object-fit: contain;
}

.promo-content {
  padding: 20px;
}

/* Mismo par de colores que .product-card usa sobre el mismo fondo
   crema, para no inventar un tratamiento nuevo. */
.promo-content h3 {
  font-size: var(--text-105);
  margin-bottom: 8px;
  color: var(--primary-dark);
}

.promo-content p {
  font-size: var(--text-90);
  color: var(--text-light);
  margin-bottom: 12px;
  line-height: 1.6;
}

.promo-price {
  font-size: var(--text-140);
  font-weight: 700;
  color: var(--primary);
}

/* ============================================================
   PRECIOS OCULTOS TEMPORALMENTE (lista de precios desactualizada,
   pendiente de la futura base de datos). No se borró HTML, JS ni
   ninguna otra regla de precio: solo se ocultan con display:none.
   Para reactivar los precios: eliminar o comentar este bloque.
   ============================================================ */
.product-price,
.promo-price {
  display: none;
}

/* ============================================================
   BADGES DE OFERTA/PROMO OCULTOS TEMPORALMENTE. El HTML conserva
   tanto la clase base .product-badge (que sigue usándose para
   badges no promocionales, p. ej. "En stock") como el texto del
   badge ("Oferta", "50% OFF"); solo se ocultan los que llevan el
   modificador .product-badge-promo, agregado a mano en cada card
   con promoción. Para reactivar: eliminar o comentar este bloque.
   ============================================================ */
.product-badge-promo {
  display: none;
}

/* ============================================================
   MARCA OCULTA TEMPORALMENTE en las cards de producto. El HTML
   conserva el dato (<div class="product-brand">) sin modificar;
   solo se oculta con display:none, que también retira su
   margin-bottom sin dejar hueco. .product-brand no se usa en
   ningún otro lugar del sitio (buscador, filtros, JS). Para
   reactivar: eliminar o comentar este bloque.
   ============================================================ */
.product-brand {
  display: none;
}

/* ============================================================
   BOTÓN "ME GUSTA" OCULTO Y "CONSULTAR" CENTRADO en las cards de
   producto. No se tocó HTML ni JS: la lógica de favoritos
   (localStorage, contador del header, initWishlist() en main.js)
   sigue intacta, solo se oculta el botón con display:none.
   .btn-consult pierde el flex:1 que antes lo hacía repartir el
   ancho 50/50 con el botón oculto (si no, ocuparía toda la card),
   recupera su ancho natural según padding/texto y queda centrado
   por .product-actions. Padding, color, tipografía, bordes y
   comportamiento de "Consultar" no cambian.
   Para reactivar: eliminar o comentar este bloque.
   ============================================================ */
.product-actions {
  justify-content: center;
}

.product-actions .btn-wishlist {
  display: none;
}

.product-actions .btn-consult {
  flex: none;
}

/* FEATURES */
.features {
  background: var(--bg-card);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}

.feature-item {
  text-align: center;
  padding: 14px 20px;
}

.feature-icon {
  width: 60px;
  height: 60px;
  background: var(--cta-soft);
  border-radius: var(--radius-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: var(--text-150);
  color: var(--primary-dark);
}

.feature-icon svg {
  width: 26px;
  height: 26px;
}

.feature-item h3 {
  font-size: var(--text-body);
  margin-bottom: 8px;
  color: var(--primary-dark);
}

.feature-item p {
  font-size: var(--text-90);
  color: var(--text-light);
}

/* CÓMO COMPRAR (Inicio) — clases propias en vez de reutilizar .feature-item/
   .feature-icon: esas dos ya tienen overrides "body.home .feature-item h3/p"
   (mas abajo) que fuerzan texto casi blanco pensado para el fondo oscuro de
   .features, y pisarian el texto en esta seccion de fondo claro. El look
   (icono circular + titulo + texto centrado) es el mismo que .feature-item,
   solo con nombres de clase que no colisionan con ese selector. */
.how-to-buy-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}

.how-to-buy-step {
  text-align: center;
  padding: 14px 20px;
}

.how-to-buy-icon {
  width: 60px;
  height: 60px;
  background: var(--cta-soft);
  border-radius: var(--radius-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--primary-dark);
}

.how-to-buy-icon svg {
  width: 26px;
  height: 26px;
}

.how-to-buy-step h3 {
  font-size: var(--text-body);
  margin-bottom: 8px;
  color: var(--primary-dark);
}

.how-to-buy-step p {
  margin: 0;
  font-size: var(--text-90);
  color: var(--text-light);
}

.how-to-buy-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-weight: 600;
  color: var(--primary);
}

.how-to-buy-link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* RESEÑAS (Inicio) — reseñas reales de la ficha de Google del negocio,
   copiadas a mano (nombre, estrellas y texto textual). Sin API, sin widget,
   sin iframe: si algun dia se quieren automatizar, la forma mantenible es
   pedirlas en build time (no desde el navegador, para no exponer una key). */
.reviews-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px 24px;
}

.review-stars {
  margin: 0;
  color: var(--accent);
  font-size: var(--text-110);
  letter-spacing: 2px;
}

.review-quote {
  flex: 1;
  margin: 0;
}

.review-quote p {
  margin: 0;
  font-size: var(--text-90);
  line-height: 1.6;
  color: var(--text);
}

.review-author {
  margin: 0;
  font-size: var(--text-90);
  font-weight: 600;
  color: var(--primary-dark);
}

.review-meta {
  font-weight: 400;
  color: var(--text-light);
}

.reviews-cta {
  margin: 32px 0 0;
  text-align: center;
}

.reviews-cta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--primary);
}

.reviews-cta a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* BRANDS CAROUSEL — mismo lenguaje visual que .category-card (fondo papel,
   borde sutil, sombra difusa); la tarjeta en si no cambio. La interaccion
   si: .marquee-track es una tira continua (varias copias de .marquee-group
   puestas en fila) que initBrandsMarquee() (ver main.js) desplaza con un
   translateX animado por rAF, reseteando exactamente un "grupo" de ancho
   cada vez que se completa para que el loop no se note. Arrastrar con
   mouse/dedo mueve la tira a mano y pausa el auto-scroll; al soltar,
   retoma desde la misma posicion sin saltos. */
.brands-marquee {
  padding-bottom: 50px;
}

/* Mismo eje que el resto del contenido: .marquee-outer vive fuera del
   .container de la seccion (herencia del layout del marquee, que
   necesitaba sangrar borde a borde), asi que replica su caja para que el
   carrusel quede alineado con el titulo de arriba. overflow: hidden
   recorta la tira, que es mucho mas ancha que este contenedor. */
.marquee-outer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  gap: 20px;
  cursor: grab;
  touch-action: pan-y;
  will-change: transform;
}

.marquee-track.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.marquee-group {
  display: flex;
  flex: 0 0 auto;
  gap: 20px;
}

/* Copias clonadas por JS para cerrar el loop: son decorativas (las marcas
   reales ya estan anunciadas por el primer grupo), por eso quedan fuera
   del arbol de accesibilidad. */
.marquee-group[aria-hidden="true"] .brand-logo {
  pointer-events: none;
}

.marquee-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 170px;
  padding: 22px 20px;
  background: var(--bg-card);
  border: 1px solid var(--ink-border-faint);
  border-radius: var(--radius-surface);
  box-shadow: 0 10px 24px -20px var(--ink-shadow-soft);
  transition: var(--transition);
}

@media (min-width: 600px) {
  .marquee-track,
  .marquee-group {
    gap: 24px;
  }

  .marquee-item {
    width: 200px;
  }
}

@media (min-width: 992px) {
  .marquee-track,
  .marquee-group {
    gap: 28px;
  }

  .marquee-item {
    width: 230px;
  }
}

.marquee-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 32px -22px var(--ink-shadow);
  border-color: var(--primary-border-hover);
}

/* Logos de marca: SVG monocromo pintado desde CSS via mask-image. El color
   sale de --brand-logo-ink (paleta verde de la marca), y cada logo trae su
   propio --brand-logo-src y --brand-logo-h para nivelar el peso optico entre
   siluetas de proporciones muy distintas (Milwaukee es apaisada, RAW y Maria
   Green son casi cuadradas). object-fit no aplica a mask, se controla con
   mask-size: contain. */
.marquee-item .brand-logo {
  display: block;
  width: 100%;
  height: var(--brand-logo-h, clamp(34px, 4.4vw, 48px));
  background-color: var(--brand-logo-ink, var(--primary));
  -webkit-mask: var(--brand-logo-src) center / contain no-repeat;
  mask: var(--brand-logo-src) center / contain no-repeat;
  transition: var(--transition);
  -webkit-user-drag: none;
  user-select: none;
}

/* Hover sutil: el logo se oscurece al tono profundo de la marca mientras la
   tarjeta se eleva (regla .marquee-item:hover de arriba). */
.marquee-item:hover .brand-logo {
  --brand-logo-ink: var(--primary-dark);
}

/* Cada SVG viene recortado a su contenido, asi que basta con la altura de
   caja para nivelar el peso optico. --brand-logo-h baja la marca de bloque
   macizo (CANNA) y las dos apaisadas de una sola palabra (Plagron,
   Milwaukee), que si no se ven desproporcionadas al lado del resto. El
   selector descendiente iguala especificidad con la regla base. */
.marquee-item .brand-logo--canna {
  --brand-logo-src: url("../img/Logo%20marcas/Canna-logo.svg");
  --brand-logo-h: clamp(28px, 3.6vw, 40px);
}

.marquee-item .brand-logo--plagron {
  --brand-logo-src: url("../img/Logo%20marcas/plagron-logo.svg");
  --brand-logo-h: clamp(20px, 2.6vw, 28px);
}

.marquee-item .brand-logo--raw {
  --brand-logo-src: url("../img/Logo%20marcas/Raw-logo-footer.svg");
}

.marquee-item .brand-logo--elements {
  --brand-logo-src: url("../img/Logo%20marcas/elements-logo.svg");
}

.marquee-item .brand-logo--milwaukee {
  --brand-logo-src: url("../img/Logo%20marcas/milwaukee-logo.svg");
  --brand-logo-h: clamp(20px, 2.6vw, 28px);
}

.marquee-item .brand-logo--mariagreen {
  --brand-logo-src: url("../img/Logo%20marcas/Mariagreen-Logo.svg");
}

@media (prefers-reduced-motion: reduce) {
  .header,
  .header-main,
  .nav-links li a::after,
  .header-search-panel {
    transition: none;
  }
}

/* NEWSLETTER */
.newsletter {
  background: var(--primary);
  color: var(--text-white);
  padding: 60px 0;
}

.newsletter .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.newsletter-content {
  flex: 1;
  max-width: 500px;
}

.newsletter-content h2 {
  font-size: var(--text-180);
  margin-bottom: 8px;
}

.newsletter-content p {
  opacity: 0.85;
  font-size: var(--text-95);
}

.newsletter-form {
  flex: 1;
  max-width: 450px;
  display: flex;
  gap: 10px;
}

.newsletter-form input {
  flex: 1;
  padding: 14px 20px;
  border: none;
  border-radius: var(--radius);
  font-size: var(--text-body);
  outline: none;
}

.newsletter-form button {
  padding: 14px 28px;
  background: var(--accent);
  color: var(--text);
  border: none;
  border-radius: var(--radius);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.newsletter-form button:hover {
  background: var(--accent-hover);
}

/* FILTERS BAR (sticky) — composicion "cinta editorial": un label pequeno
   en mayusculas encabeza una franja compacta de controles. flex-wrap
   nunca envuelve (nowrap): si los controles no entran, la franja se
   vuelve un carril horizontal con scroll en vez de pasar a una segunda
   fila, en escritorio y en movil por igual. */
.filters-label {
  margin: 0 0 12px;
  font-size: var(--text-78);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-light);
}

.filters-bar {
  position: sticky;
  top: var(--header-h, 112px);
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  margin-bottom: 30px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-4);
  padding: 12px 16px;
  transition: box-shadow 0.3s ease;
}

.filters-bar::-webkit-scrollbar {
  display: none;
}

.filters-bar.is-dragging {
  cursor: grabbing;
  user-select: none;
}

/* Pista de que hay mas categorias fuera de la vista: un desvanecido en
   el borde correspondiente, encendido solo cuando initFiltersRail() (ver
   main.js) detecta contenido oculto de ese lado. */
.filters-bar::before,
.filters-bar::after {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.filters-bar::before {
  left: 1px;
  background: linear-gradient(to right, var(--bg-alt), transparent);
}

.filters-bar::after {
  right: 1px;
  background: linear-gradient(to left, var(--bg-alt), transparent);
}

.filters-bar.has-more-start::before,
.filters-bar.has-more-end::after {
  opacity: 1;
}

.filters-bar.stuck {
  box-shadow: 0 6px 16px var(--shadow-color-faint);
  border-color: var(--primary-border-hover);
}

/* Chip compacto y recto (no pildora) para cada categoria; se define con
   dos clases de especificidad propia para pisar el .btn/.btn-outline
   generico que el HTML tambien les aplica, sin tocar esas reglas
   compartidas con otros botones del sitio. */
.filters-bar .filter-btn {
  flex: 0 0 auto;
  padding: 10px 18px;
  font-size: var(--text-90);
  font-weight: 600;
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-4);
}

.filters-bar .filter-btn:hover {
  background: var(--accent-wash);
  border-color: var(--primary-dark);
  color: var(--primary-dark);
}

.filters-bar .filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--bg);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.filters-bar .filter-btn.active:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--bg);
}

/* SCROLL REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* CONTACT FORM */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: var(--text-90);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-body);
  font-family: var(--font-home-body);
  background: var(--bg-card);
  transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

.form-group textarea {
  resize: vertical;
}

@media (max-width: 600px) {
  /* Las cinco categorias bajan a dos columnas recien aca: a 768 las tres
     columnas siguen dando 237px por tarjeta, que es una proporcion mejor
     que dos tejas de 364px de ancho. */
  body.home .categories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

.contact-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow);
  text-align: center;
}

.contact-card .icon {
  width: 60px;
  height: 60px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: var(--text-150);
  color: white;
}

.contact-card h3 {
  margin-bottom: 10px;
  color: var(--primary-dark);
}

.contact-card p {
  color: var(--text-light);
  font-size: var(--text-95);
}

.contact-card a {
  color: var(--primary);
  font-weight: 600;
}

.contact-card a:hover {
  text-decoration: underline;
}

/* FOOTER */
.footer {
  background: var(--bg-dark);
  color: var(--text-white);
  padding: 60px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--on-dark-surface-raised);
}

.footer-brand .logo {
  margin-bottom: 16px;
}

.footer-brand p {
  color: var(--on-dark-text-soft);
  font-size: var(--text-90);
  line-height: 1.8;
  margin-bottom: 16px;
}

.footer h2 {
  color: var(--accent);
  margin-bottom: 16px;
  font-size: var(--text-body);
}

.footer ul li {
  margin-bottom: 8px;
}

.footer ul li a {
  color: var(--on-dark-text-soft);
  font-size: var(--text-90);
}

.footer ul li a:hover {
  color: var(--accent);
  padding-left: 4px;
}

.footer-bottom {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--text-85);
  color: var(--on-dark-text-faint);
}

.footer-bottom a {
  color: var(--accent);
}

/* WHATSAPP FLOAT */
.whatsapp-float {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: 24px;
  width: 60px;
  height: 60px;
  /* Verde de WhatsApp oscurecido: mantiene el canal reconocible y lleva el
     icono blanco de 1.98:1 a 5.02:1 (WCAG 1.4.11 exige 3:1 a componentes
     graficos; este pasa incluso el 4.5:1 de texto). */
  background: var(--whatsapp);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px var(--whatsapp-glow);
  z-index: var(--z-float-primary);
  transition: var(--transition);
  animation: pulse 2s infinite;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

.whatsapp-float svg {
  width: 30px;
  height: 30px;
  fill: white;
}

/* BACK TO TOP */
.back-to-top {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 24px;
  width: 48px;
  height: 48px;
  background: var(--primary-light);
  color: var(--text-white);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  z-index: var(--z-float);
  font-size: var(--text-120);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--primary);
}

@media (max-width: 480px) {
  .back-to-top {
    width: 42px;
    height: 42px;
    bottom: 16px;
    left: 16px;
  }
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 4px 20px var(--whatsapp-glow);
  }
  50% {
    box-shadow: 0 4px 30px var(--whatsapp-glow-strong);
  }
}

/* TOAST */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--primary);
  color: white;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 600;
  z-index: var(--z-toast);
  transition: transform 0.4s ease;
  box-shadow: 0 4px 20px var(--shadow-color-soft);
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .hero-content {
    max-width: 100%;
  }

  .hero-buttons {
    justify-content: center;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Por debajo de este ancho los enlaces centrados (Inicio/Tienda/Blog) no
   entran cómodos junto al logo y al clúster de acciones (buscador,
   favoritos, botón Contactar): se ocultan y la navegación pasa por
   completo al menú off-canvas, que ya replica los mismos enlaces. */
@media (max-width: 1100px) {
  .nav-links-wrap {
    display: none;
  }
}

@media (max-width: 768px) {
  /* En móviles el panel ocupa el 100% del ancho de la pantalla */
  .nav-menu {
    width: 100%;
    /* Safe areas: el contenido respira respecto a los bordes físicos del
       teléfono (incluido el notch/cámara frontal). */
    padding-right: calc(30px + env(safe-area-inset-right, 0px));
    padding-left: 20px;
    padding-top: calc(max(env(safe-area-inset-top, 0px), 16px) + 84px);
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  }

  /* Margen superior en la barra del header: la "X" nunca queda debajo del
     notch/barra de estado del teléfono. */
  .header-main {
    grid-template-rows: calc(12px + env(safe-area-inset-top, 0px)) auto 12px;
  }

  /* Área táctil cómoda (>= 44px) y tipografía legible para las opciones */
  .nav-menu li a {
    font-size: var(--text-125);
    line-height: 1.3;
    padding-top: 15px;
    padding-bottom: 15px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  /* Iconos táctiles (hamburguesa y "X" de cierre): líneas más gruesas/largas
     (24-28px) y contenedor de 48x48px (>= 44px) para no fallar el toque.
     Ambos crecen desde su ancla fija (el botón hamburguesa sigue pegado al
     borde derecho del header vía flex; la "X" sigue pegada a la esquina
     superior izquierda del panel), así que el diseño no se desplaza. */
  .hamburger {
    width: 48px;
    height: 48px;
    padding: 10px;
  }

  .hamburger span {
    width: 27px;
  }

  .nav-menu-close {
    width: 48px;
    height: 48px;
  }

  .nav-menu-close span {
    width: 27px;
  }

  .cart-toggle {
    width: 48px;
    height: 48px;
    padding: 10px;
  }

  .cart-icon {
    width: 24px;
    height: 24px;
  }

  /* El panel del carrito ocupa toda la pantalla, igual que el menú */
  .cart-panel {
    width: 100%;
  }

  .cart-order-summary li {
    font-size: var(--text-85);
  }

  /* La topbar de anuncios se compacta un poco más en pantallas chicas */
  .header-top {
    font-size: var(--text-70);
    padding: 6px 0;
  }

  .header-top .header-top-sep {
    margin: 0 6px;
  }

  .hero {
    padding: 32px 0;
  }

  .hero-content h1 {
    font-size: var(--text-200);
  }

  .section {
    padding: 50px 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .newsletter .container {
    flex-direction: column;
    text-align: center;
  }

  /* El carril horizontal ya es el comportamiento base (.filters-bar):
     aca solo se ajusta la densidad para pantallas chicas. */
  .filters-bar {
    gap: 7px;
    margin-bottom: 18px;
    padding: 10px 14px;
  }

  .filters-bar .filter-btn {
    padding: 8px 14px;
    font-size: var(--text-78);
  }
}

@media (max-width: 480px) {
  /* Libera espacio en la barra: el logo queda solo con su ícono para que los
     enlaces fijos (Inicio/Tienda) y el botón hamburguesa sigan visibles. */
  .logo span {
    display: none;
  }

  .hero-content h1 {
    font-size: var(--text-160);
  }

  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .category-card {
    padding: 20px 12px;
  }

  .category-icon {
    width: 56px;
    height: 56px;
    font-size: var(--text-140);
  }

  .category-icon svg {
    width: 26px;
    height: 26px;
  }

  .section {
    padding: 40px 0;
  }

  .section-header h2 {
    font-size: var(--text-150);
  }

  .products-grid {
    grid-template-columns: 1fr;
  }

  .promo-grid {
    grid-template-columns: 1fr;
  }

  .toast {
    left: 16px;
    right: 16px;
    bottom: 96px;
    transform: translateY(100px);
    max-width: none;
    width: auto;
    text-align: center;
  }

  .toast.show {
    transform: translateY(0);
  }

  .whatsapp-float {
    width: 52px;
    height: 52px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: 16px;
  }

  .whatsapp-float svg {
    width: 26px;
    height: 26px;
  }
}

/* Home header — a search field earns its permanent place in the primary
   navigation; the favourites shortcut remains available from the catalogue,
   where it has product context. */
body.home .header-actions {
  gap: 10px;
  min-width: 0;
}

body.home .header-inline-search {
  display: flex;
  align-items: center;
  width: clamp(190px, 19vw, 260px);
  height: 44px;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 248, 0.28);
  border-radius: 0;
  background: rgba(255, 253, 248, 0.08);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

body.home .header-inline-search:focus-within {
  border-color: var(--accent);
  background: rgba(255, 253, 248, 0.14);
}

body.home .header-inline-search input {
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-white);
  font-family: var(--font-home-body);
  font-size: var(--text-82);
}

body.home .header-inline-search input::placeholder {
  color: rgba(255, 253, 248, 0.72);
}

body.home .header-inline-search input:focus {
  background: transparent;
}

body.home .header-inline-search button {
  position: static;
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  transform: none;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
}

body.home .header-inline-search button:hover {
  background: rgba(217, 164, 65, 0.18);
}

body.home .header-inline-search button svg {
  width: 19px;
  height: 19px;
}

body.home .header-inline-search button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}

@media (max-width: 600px) {
  body.home .header-main .container {
    gap: 12px;
  }

  body.home .header-inline-search {
    width: clamp(112px, 31vw, 180px);
  }

  body.home .header-inline-search input {
    padding-inline: 8px;
    font-size: var(--text-70);
  }

  body.home .contact-trigger {
    margin-right: 0;
    padding: 10px;
    border-radius: 50%;
  }

  body.home .contact-trigger-label {
    display: none;
  }
}

/* Shared header search — the same direct, always-visible entry point is used
   on every route. The product page keeps its live catalogue filtering inside
   this field; the remaining routes preserve the WhatsApp enquiry flow. */
.header-actions {
  gap: 10px;
  min-width: 0;
}

.header-search-panel.header-inline-search {
  position: static;
  order: -1;
  width: clamp(190px, 19vw, 260px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.header-inline-search .search-bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 248, 0.28);
  border-radius: 0;
  background: rgba(255, 253, 248, 0.08);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.header-inline-search .search-bar:focus-within {
  border-color: var(--accent);
  background: rgba(255, 253, 248, 0.14);
}

.header-inline-search .search-bar input {
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-white);
  font-family: var(--font-home-body);
  font-size: var(--text-82);
}

.header-inline-search .search-bar input::placeholder {
  color: rgba(255, 253, 248, 0.72);
}

.header-inline-search .search-bar input:focus {
  background: transparent;
}

.header-inline-search .search-bar button {
  position: static;
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  transform: none;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
}

.header-inline-search .search-bar button:hover {
  background: rgba(217, 164, 65, 0.18);
}

.header-inline-search .search-bar button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}

@media (max-width: 600px) {
  .header-main .container {
    gap: 12px;
  }

  .header-search-panel.header-inline-search {
    width: clamp(112px, 31vw, 180px);
  }

  .header-inline-search .search-bar input {
    padding-inline: 8px;
    font-size: var(--text-70);
  }

  .contact-trigger {
    margin-right: 0;
    padding: 10px;
    border-radius: 50%;
  }

  .contact-trigger-label {
    display: none;
  }
}

/* ========================================================================
   PÁGINAS INTERNAS — MISMA GUÍA DE CULTIVO, OTRO RITMO
   El hero de portada necesita imagen y una composición amplia; las rutas de
   catálogo, lectura y contacto necesitan orientar rápido. Comparten materia,
   contraste y precisión sin repetir la composición de Inicio.
   ======================================================================== */
body:not(.home) {
  background: var(--bg);
}

body.home .header-search-panel.header-inline-search,
body:not(.home) .header-search-panel.header-inline-search {
  position: static;
  order: -1;
  width: clamp(190px, 19vw, 260px);
  height: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

body.home .header-inline-search .search-bar,
body:not(.home) .header-inline-search .search-bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 248, 0.28);
  border-radius: 0;
  background: rgba(255, 253, 248, 0.08);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

body.home .header-inline-search .search-bar:focus-within,
body:not(.home) .header-inline-search .search-bar:focus-within {
  border-color: var(--accent);
  background: rgba(255, 253, 248, 0.14);
}

body.home .header-inline-search .search-bar input,
body:not(.home) .header-inline-search .search-bar input {
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-white);
  font-family: var(--font-home-body);
  font-size: var(--text-82);
}

body.home .header-inline-search .search-bar input:focus-visible,
body:not(.home) .header-inline-search .search-bar input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

body.home .header-inline-search .search-bar button,
body:not(.home) .header-inline-search .search-bar button {
  position: static;
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  transform: none;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
}

body.home .header-inline-search .search-bar button:hover,
body:not(.home) .header-inline-search .search-bar button:hover {
  background: rgba(217, 164, 65, 0.18);
}

body:not(.home) .hero-compact {
  min-height: clamp(280px, 29vw, 390px);
  display: grid;
  align-items: center;
  padding: clamp(56px, 7vw, 96px) 0;
  background:
    radial-gradient(circle at 84% 15%, rgba(217, 164, 65, 0.15), transparent 23rem),
    linear-gradient(118deg, var(--primary-dark), var(--primary));
  border-bottom: 1px solid rgba(217, 164, 65, 0.35);
}

/* .container hereda "width: auto" y en flujo normal eso rellena el ancho
   disponible hasta max-width (ver regla base .container). Como grid item
   de .hero-compact, "auto" + margin:0 auto en cambio se ajusta al
   contenido (aca 660px de .hero-content) y queda mas angosto que
   max-width: 1200px, corriendo el bloque hacia el centro en vez de
   alinearlo con el resto de las secciones. Fijar el ancho al 100% del
   grid area restaura el mismo comportamiento que en flujo normal. */
body:not(.home) .hero-compact .container {
  width: 100%;
}

body:not(.home) .hero-compact .hero-content {
  max-width: 660px;
  text-align: left;
}

body:not(.home) .hero-compact .hero-eyebrow,
body:not(.home) .hero-compact .hero-eyebrow-link {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--accent);
  font-size: var(--text-76);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

body:not(.home) .hero-compact h1 {
  max-width: 14ch;
  font-size: var(--text-fluid-page);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

body:not(.home) .hero-compact h1 span {
  color: var(--bg-card);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 10px;
}

body:not(.home) .hero-compact .hero-content > p:not(.hero-eyebrow) {
  max-width: 58ch;
  margin-bottom: 0;
  color: rgba(255, 253, 248, 0.8);
  line-height: 1.7;
}

body:not(.home) main > .section:nth-of-type(odd) {
  background: var(--bg-alt);
}

body:not(.home) .section {
  padding: clamp(68px, 7vw, 112px) 0;
}

body:not(.home) .section-header {
  max-width: 650px;
  margin: 0 auto clamp(30px, 4vw, 48px);
  text-align: center;
}

body:not(.home) .section-header h2 {
  font-size: var(--text-fluid-section-sm);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

body:not(.home) .section-divider {
  color: var(--accent);
}

body:not(.home) .products-grid {
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

body:not(.home) .product-card {
  border: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}

body:not(.home) .product-card:hover {
  transform: none;
  box-shadow: inset 0 -3px 0 var(--accent);
}

body:not(.home) .filters-bar.stuck {
  background: rgba(244, 241, 230, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(22, 40, 30, 0.12);
}

body:not(.home) .feature-item {
  max-width: 760px;
  padding: clamp(28px, 4vw, 46px) 0;
  text-align: left;
  border-top: 1px solid var(--border);
}

body:not(.home) .feature-item:last-child {
  border-bottom: 1px solid var(--border);
}

body:not(.home) .feature-item h2,
body:not(.home) .feature-item h3 {
  font-family: var(--font-display);
  font-size: var(--text-fluid-heading-sm);
  line-height: 1.12;
  color: var(--primary-dark);
}

body:not(.home) .feature-item p {
  max-width: 66ch;
  font-size: var(--text-body);
  line-height: 1.7;
}

body:not(.home) .contact-card,
body:not(.home) .contact-form {
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}

/* Tarjeta de asistencia (Devoluciones): standalone, no lista con divisores
   como .feature-item en body:not(.home) (border-top/bottom rompía las
   esquinas redondeadas + sombra de card que esta seccion si necesita). */
.support-card {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 48px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  text-align: left;
}

.support-card h2 {
  font-family: var(--font-display);
  font-size: var(--text-fluid-heading-sm);
  line-height: 1.15;
  color: var(--primary-dark);
  margin-bottom: 14px;
}

.support-card p {
  max-width: 60ch;
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--text-light);
}

.support-card .btn {
  margin-top: 24px;
}

@media (max-width: 600px) {
  body.home .header-search-panel.header-inline-search,
  body:not(.home) .header-search-panel.header-inline-search {
    width: clamp(112px, 31vw, 180px);
  }

  body:not(.home) .hero-compact {
    min-height: 0;
    padding: 52px 0 56px;
  }

  body:not(.home) .hero-compact h1 {
    font-size: var(--text-fluid-hero-compact);
  }
}

/* ============================================================
   MOVIMIENTO REDUCIDO — GUARDA GLOBAL

   El archivo ya tiene varios bloques prefers-reduced-motion y cada uno
   enumera selectores concretos. Ese patron deja agujeros: .whatsapp-float,
   con un "animation: pulse 2s infinite" permanente en pantalla, no figuraba
   en ninguno y se animaba para todo el mundo.

   Esta guarda va al final a proposito, para ganar por orden de cascada a
   cualquier animacion o transicion declarada mas arriba, incluidas las que
   se agreguen en el futuro. Los bloques especificos anteriores se conservan:
   son mas expresivos (algunos ajustan opacidad o cambian overflow, no solo
   apagan) y no entran en conflicto con esto.

   No se usa "animation: none": eso impediria que corran los callbacks de
   animationend de los que puede depender un componente. Una duracion casi
   nula preserva el evento sin que se perciba movimiento.
   ============================================================ */
@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;
  }

  html {
    scroll-behavior: auto;
  }
}