/* ============================================================
   GREENERY 420 · PRIMITIVOS DE COMPONENTE (.gy-btn/.gy-tag/.gy-badge/
   .gy-iconbtn/.gy-seal) + base scoped de la home.
   Portado de la versión de Ale (aceiteca/supro-child greenery-tokens.css),
   SIN el bloque :root (las variables canónicas viven en tokens.css del DS)
   y SIN @font-face (idem). Complementos puntuales al final.
   ============================================================ */

/* ---------- Base scoped (home + chrome) ---------- */
.greenery-home, .greenery-chrome{
  font-family:var(--gy-font-body); font-size:var(--gy-fs-body);
  line-height:var(--gy-lh-body); color:var(--gy-text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.greenery-home h1,.greenery-home h2,.greenery-home h3,.greenery-home h4,
.greenery-chrome h1,.greenery-chrome h2,.greenery-chrome h3,.greenery-chrome h4{
  font-family:var(--gy-font-display); color:var(--gy-text);
  line-height:var(--gy-lh-heading); letter-spacing:var(--gy-ls-heading); margin:0;
}
.greenery-home h1{font-size:var(--gy-fs-h1);font-weight:var(--gy-w-medium);line-height:var(--gy-lh-display);letter-spacing:var(--gy-ls-display);}
.greenery-home h2{font-size:var(--gy-fs-h2);font-weight:var(--gy-w-semibold);}
.greenery-home h3{font-size:var(--gy-fs-h3);font-weight:var(--gy-w-medium);}
/* Regla de marca: nunca 700+ en encabezados */
.greenery-home h4,.greenery-home h5,.greenery-home h6,
.greenery-chrome h1,.greenery-chrome h2,.greenery-chrome h3,
.greenery-chrome h4,.greenery-chrome h5,.greenery-chrome h6{font-weight:var(--gy-w-semibold);}

/* Pretítulo / eyebrow */
.gy-eyebrow{font-family:var(--gy-font-ui);font-size:var(--gy-fs-eyebrow);font-weight:var(--gy-w-semibold);
  letter-spacing:var(--gy-ls-eyebrow);text-transform:uppercase;color:var(--gy-text);}

/* ---- Button (.gy-btn) — píldora ---- */
.gy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--gy-font-ui);font-weight:500;font-size:15px;line-height:1.1;
  padding:14px 28px;border-radius:var(--gy-radius-pill);border:1.5px solid transparent;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background-color var(--gy-dur-fast) var(--gy-ease),color var(--gy-dur-fast) var(--gy-ease),
    border-color var(--gy-dur-fast) var(--gy-ease),transform var(--gy-dur-fast) var(--gy-ease),box-shadow var(--gy-dur-fast) var(--gy-ease);}
.gy-btn--sm{padding:9px 18px;font-size:13px;gap:6px;}
.gy-btn--lg{padding:17px 34px;font-size:16px;gap:10px;}
.gy-btn--primary{background:var(--gy-morado);color:#fff;}
.gy-btn--primary:hover{background:var(--gy-morado-oscuro);color:#fff;}
.gy-btn--secondary{background:transparent;color:var(--gy-tinta);border-color:var(--gy-tinta);}
.gy-btn--secondary:hover{background:var(--gy-tinta);color:var(--gy-blanco);}
.gy-btn--soft{background:var(--gy-lavanda);color:var(--gy-morado-oscuro);}
.gy-btn--soft:hover{background:var(--gy-morado);color:var(--gy-blanco);}
.gy-btn--ghost{background:transparent;color:var(--gy-morado-oscuro);}
.gy-btn--ghost:hover{background:var(--gy-lavanda);color:var(--gy-morado-oscuro);}
/* Outline: transparente con borde morado; hover se rellena de morado (mismo lenguaje que el carrito). */
.gy-btn--outline{background:transparent;color:var(--gy-morado);border:1.5px solid var(--gy-morado);}
.gy-btn--outline:hover{background:var(--gy-morado);color:#fff;border-color:var(--gy-morado);}
.gy-btn--full{display:flex;width:100%;}
.gy-btn svg{width:1.1em;height:1.1em;}

/* ---- IconButton (.gy-iconbtn) ---- */
.gy-iconbtn{width:42px;height:42px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;background:transparent;border:1.5px solid var(--gy-tinta);color:var(--gy-tinta);
  transition:all var(--gy-dur-fast) var(--gy-ease);}
.gy-iconbtn--sm{width:34px;height:34px;} .gy-iconbtn--lg{width:48px;height:48px;}
.gy-iconbtn--solid{background:var(--gy-tinta);color:var(--gy-blanco);}
.gy-iconbtn--purple{background:var(--gy-morado);border-color:var(--gy-morado);color:var(--gy-blanco);}
.gy-iconbtn:hover{background:var(--gy-tinta);color:var(--gy-blanco);}
.gy-iconbtn--purple:hover{background:var(--gy-morado-oscuro);border-color:var(--gy-morado-oscuro);}
.gy-iconbtn svg{width:20px;height:20px;}

/* ---- Tag / chip (.gy-tag) ---- */
.gy-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--gy-font-ui);font-size:12px;
  font-weight:600;letter-spacing:.01em;padding:6px 14px;border-radius:var(--gy-radius-pill);
  cursor:pointer;white-space:nowrap;border:1.5px solid transparent;background:var(--gy-blanco);
  color:var(--gy-tinta);box-shadow:var(--gy-shadow-xs);transition:all var(--gy-dur-fast) var(--gy-ease);}
.gy-tag--outline{background:transparent;border-color:var(--gy-tinta);box-shadow:none;}
.gy-tag--solid,.gy-tag.is-active{background:var(--gy-tinta);color:var(--gy-blanco);border-color:var(--gy-tinta);box-shadow:none;}
.gy-tag--outline:hover{background:var(--gy-crema);}

/* ---- Badge (.gy-badge) ---- */
.gy-badge{display:inline-flex;align-items:center;font-family:var(--gy-font-ui);font-size:12px;font-weight:600;
  letter-spacing:.04em;padding:4px 11px;border-radius:var(--gy-radius-sm);background:var(--gy-morado);color:var(--gy-blanco);}
.gy-badge--soft{background:var(--gy-lavanda);color:var(--gy-morado-oscuro);}
.gy-badge--sage{background:var(--gy-salvia);color:var(--gy-tinta);}
.gy-badge--ink{background:var(--gy-tinta);color:var(--gy-blanco);}

/* ---- Rating ---- */
.gy-rating{display:inline-flex;align-items:center;gap:8px;}
.gy-rating .gy-stars{display:inline-flex;gap:2px;color:var(--gy-oro);}
.gy-rating .gy-stars svg{width:14px;height:14px;display:block;fill:currentColor;}
.gy-rating .gy-rating-label{font-family:var(--gy-font-body);font-size:13px;color:var(--gy-text-subtle);}

/* ---- Seal (sello giratorio) + gradiente animado del hero ---- */
@keyframes gy-seal-spin{to{transform:rotate(360deg)}}
@keyframes gyGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.gy-seal{position:relative;flex:none;display:inline-block;}
.gy-seal svg{width:100%;height:100%;animation:gy-seal-spin 9s linear infinite;}
.gy-seal .gy-seal-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--gy-font-display);font-weight:700;color:#fff;}
@media (prefers-reduced-motion:reduce){.gy-seal svg{animation:none;}}
/* Variante starburst troquelada: estática e inclinada (pegatina), sin giro. */
.gy-seal--star{display:inline-block;filter:drop-shadow(0 3px 8px rgba(40,38,34,.18));transform:rotate(var(--seal-rot,-8deg));}
.gy-seal--star svg{animation:none;}

/* ============================================================
   Complementos (diferencias con los tokens canónicos del DS)
   ============================================================ */
:root{
  --gy-success:#1E9E73; /* 2026-09-03: lo usaba la ficha de tienda… sin estar definido */
  --gy-prod-verde:#1E9E73; /* global: greenery-product.css lo definía solo en fichas y el mapa lo usaba a ciegas */ --gy-verde-bosque:#4E6B3E; } /* usado puntualmente por el CSS del home portado */
/* La home de Ale se diseñó con el verde-claro cálido #E1EBCD (los fondos pastel de las
   cards lo llevan hardcodeado). Override SOLO dentro de la home; el token global del DS
   (#ECEFE4) queda intacto para el resto del site. */
.greenery-home{ --gy-verde-claro:#E1EBCD; --gy-bg-banda:#E1EBCD; }

/* ============================================================
   Reveal on scroll v2 (auditoría UX brief 2, 2026-08-16).
   PRINCIPIO: el contenido es VISIBLE por defecto. Ninguna clase del HTML oculta
   nada; `.gy-pre` (oculto) la pone greenery-chrome.js SOLO a lo que está bajo el
   pliegue y en el MISMO paso en que lo observa (try/catch). Al entrar en pantalla
   se quita `.gy-pre` y se pone `.gy-in` (que solo aporta la transición, ≤400 ms) y
   luego se retira: el estado final es «sin clases» = opacity 1 garantizado por CSS.
   Sin gate en <html>, sin guard inline, sin timers que puedan dejar opacidades
   intermedias. Reduced-motion: nunca se oculta.
   ============================================================ */
.reveal.gy-pre,.reveal--stagger.gy-pre>*{opacity:0;transform:translateY(14px);}
.reveal--left.gy-pre,.reveal--stagger.reveal--left.gy-pre>*{transform:translateX(-24px);}
.reveal.gy-in,.reveal--stagger.gy-in>*{transition:opacity .36s var(--gy-ease,ease),transform .36s var(--gy-ease,ease);}
.reveal--stagger.gy-in>*:nth-child(2){transition-delay:50ms;}
.reveal--stagger.gy-in>*:nth-child(3){transition-delay:100ms;}
.reveal--stagger.gy-in>*:nth-child(4){transition-delay:150ms;}
.reveal--stagger.gy-in>*:nth-child(5){transition-delay:200ms;}
.reveal--stagger.gy-in>*:nth-child(n+6){transition-delay:240ms;}
@media (prefers-reduced-motion:reduce){
  .gy-pre,.reveal--stagger.gy-pre>*{opacity:1!important;transform:none!important;}
  .gy-in,.reveal--stagger.gy-in>*{transition:none!important;}
}

/* ---- Badges estilo doodle (Ale 2026-08-15): ligeramente GIRADOS y con un trazo
   irregular a mano alzada por encima (lenguaje de las líneas hechas a mano). ---- */
.gy-badge, .gy-pdp__dto {
  position: relative; rotate: -3deg; transform-origin: center;
}
.gy-badge::after, .gy-pdp__dto::after {
  content: ""; position: absolute; inset: -4px -6px; pointer-events: none; opacity: .9;
  /* Trazo a mano en currentColor (máscara): cada variante semántica lleva su color. */
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M 12 5 Q 32 3 56 4.5 T 106 4 Q 114 5 115.5 13 T 116.5 27 Q 116 33.5 107 35 T 57 36.5 Q 33 38 13 36 Q 5.5 35 4.5 27.5 T 4 13 Q 4.5 6.5 12 5 Z' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M 12 5 Q 32 3 56 4.5 T 106 4 Q 114 5 115.5 13 T 116.5 27 Q 116 33.5 107 35 T 57 36.5 Q 33 38 13 36 Q 5.5 35 4.5 27.5 T 4 13 Q 4.5 6.5 12 5 Z' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
/* Sistema semántico de badges (brief 2, 5c · 2026-08-16). Tipografía común: TT Norms
   11.5px, mayúsculas, tracking .08em; sticker girado (−3°) con trazo doodle. Radio 8px
   (no píldora): es el sticker que Ale aprobó el 15-08 («me encantan los badges»). */
.gy-badge{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;}
.gy-badge--promo{background:#D9D5F7;color:#5A4FB0;}                              /* Oferta / Oferta flash */
.gy-badge--novedad{background:#ECEFE4;color:#40685F;}                            /* Nuevo / Nueva cosecha */
.gy-badge--escasez{background:#FBEDE7;color:#C0563B;box-shadow:inset 0 0 0 1.5px #C0563B;} /* Pocas / Últimas unidades */
.gy-badge--ambar{background:#FBEDE7;color:#C0563B;box-shadow:inset 0 0 0 1.5px #C0563B;}   /* alias legado → escasez */
.gy-badge--soft{background:#D9D5F7;color:#5A4FB0;}                               /* alias legado → promo */

/* Ligaduras de TT Norms desactivadas en TODO el sitio (auditoría UX 2026-08-15, punto 6):
   la fuente junta pares tipo «ti»/«fi» y el resultado parecía un fallo de tracking. */
html{font-variant-ligatures:none;}

/* ==================== Iconos Annalisa (máscara) ====================
   SVG monocromos dibujados a mano (assets/icons/annalisa/). El span pinta
   currentColor a través de la máscara → heredan color y hover del contexto.
   Los pinta gy_aico() (inc/helpers/gy-iconos.php). */
.gy-aico{display:inline-block;flex:none;background:currentColor;
  -webkit-mask:var(--aico) center/contain no-repeat;mask:var(--aico) center/contain no-repeat;}
.gy-aico--blanco{background:#fff;}