/* ==========================================================================
   Ta'Pikín — Tienda en línea
   Sistema de diseño portado del mockup aprobado por el cliente.
   Ver .claude/skills/design-system/SKILL.md — los tokens NO se cambian.
   ========================================================================== */

/* ---------- Fuentes autohospedadas (sin CDN) ---------- */
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap;
  src:url("../assets/fonts/fraunces-600.woff2") format("woff2");
}
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:900; font-display:swap;
  src:url("../assets/fonts/fraunces-900.woff2") format("woff2");
}
@font-face{
  font-family:'Pacifico'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../assets/fonts/pacifico-400.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root{
  color-scheme: light;

  --chile:#D2262B;
  --chile-deep:#7A1418;
  --chile-bright:#EA4B3F;
  --husk:#201A16;
  --husk-soft:#4A4038;
  --masa:#F3E8D0;
  --masa-hi:#FBF6E9;
  --masa-line:#E2D1AA;
  --hoja:#235C3A;
  --hoja-deep:#163F27;
  --hoja-tint:#E8EEDF;
  --whatsapp:#25D366;
  --whatsapp-deep:#128C4A;

  --font-display:'Fraunces', Georgia, 'Iowan Old Style', serif;
  --font-script:'Pacifico', cursive;
  --font-body:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  --radius-card:18px;
  --shadow-card:0 2px 10px rgba(32,26,22,.10);
  --shadow-elevada:0 18px 48px rgba(32,26,22,.28);

  --content-w:720px;
  --wide-w:1040px;
  --header-h:60px;
  --tabbar-h:62px;
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--masa);
  color:var(--husk);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* espacio para la tabbar fija en móvil */
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:900; margin:0; text-wrap:balance; color:var(--husk); }
p{ margin:0; }
ul,ol{ margin:0; padding:0; }
a{ color:var(--chile-deep); }
button{ font-family:inherit; cursor:pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--chile); outline-offset:2px;
}
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.wrap{ max-width:var(--content-w); margin:0 auto; padding:0 var(--sp-5); }
.wrap--wide{ max-width:var(--wide-w); }

.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--chile-deep); margin:0 0 var(--sp-3);
}

@media (prefers-reduced-motion: no-preference){
  .product-card{ transition:transform .18s ease, box-shadow .18s ease; }
  .product-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card); }
  .btn-primary, .btn-ghost{ transition:transform .12s ease, filter .12s ease; }
  .btn-primary:active, .btn-ghost:active{ transform:scale(.97); }
  .cart-badge.pulse, .tab-badge.pulse{ animation:pulse .4s ease; }
  @keyframes pulse{ 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }
}

/* ---------- Bullets de chile ---------- */
.chile-bullet{ list-style:none; position:relative; padding-left:30px; }
.chile-bullet + .chile-bullet{ margin-top:var(--sp-3); }
.chile-bullet::before{
  content:''; position:absolute; left:2px; top:.3em; width:12px; height:17px;
  background:var(--chile); border-radius:0 60% 60% 60% / 0 100% 100% 60%; transform:rotate(-18deg);
}
.chile-bullet::after{
  content:''; position:absolute; left:9px; top:-1px; width:4px; height:7px;
  background:var(--hoja); border-radius:2px; transform:rotate(18deg);
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--masa-hi);
  border-bottom:1px solid var(--masa-line);
  min-height:var(--header-h);
  display:flex; align-items:center;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); width:100%;
}
.brand-link{ display:flex; align-items:center; gap:var(--sp-3); text-decoration:none; color:inherit; min-width:0; }
.brand-logo{ width:38px; height:38px; border-radius:50%; flex:none; }
.brand-wordmark{ height:26px; width:auto; }
.header-actions{ display:flex; align-items:center; gap:var(--sp-2); }

.cart-btn, .back-btn{
  background:none; border:none; position:relative;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  color:var(--husk); padding:0; border-radius:10px;
}
.icon-bag{ width:20px; height:17px; border:2px solid currentColor; border-radius:3px; position:relative; }
.icon-bag::before{
  content:''; position:absolute; left:3px; top:-9px; width:10px; height:9px; border:2px solid currentColor;
  border-bottom:none; border-radius:6px 6px 0 0;
}
.cart-badge{
  position:absolute; top:4px; right:2px; min-width:18px; height:18px; padding:0 4px; border-radius:999px;
  background:var(--chile); color:#fff; font-size:.66rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;
}
.cart-badge[hidden]{ display:none; }
.back-btn{ font-size:1.3rem; font-weight:700; }
.header-title{ font-family:var(--font-display); font-weight:900; font-size:1rem; }

/* ---------- Hero ---------- */
.hero{ padding:var(--sp-10) 0 var(--sp-8); }
.hero-card{
  position:relative; border-radius:var(--radius-card); overflow:hidden;
  min-height:340px; display:flex; align-items:flex-end;
  background:var(--masa-line);
  box-shadow:var(--shadow-card);
}
/* La foto del hero es un <img> real (no background-image) para poder servir
   hero-800 en móvil y hero-1400 en escritorio, y para que el navegador la
   descargue temprano. El encuadre es idéntico al de background:cover center. */
.hero-picture{ position:absolute; inset:0; display:block; }
.hero-img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(32,26,22,.50) 0%, rgba(32,26,22,.70) 55%, rgba(32,26,22,.94) 100%);
}
.hero-content{ position:relative; z-index:1; padding:var(--sp-6); color:#fff; width:100%; }
/* En rojo de marca sobre la foto del hero, este texto daba 2.61:1 — reprueba
   WCAG AA, que pide 4.5:1 para texto chico. Medido sobre la foto real con el
   degradado encima, no sobre un color plano. En crema pasa de sobra y la marca
   la sostienen el interletrado y las versalitas, no el color. */
.hero-eyebrow{
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--masa-hi); margin-bottom:var(--sp-2);
}
.hero-content h1{ color:#fff; font-size:clamp(1.7rem, 6vw, 2.6rem); line-height:1.1; margin-bottom:var(--sp-3); }
.hero-content h1 em{ font-style:normal; color:var(--chile-bright); }
.hero-sub{ color:rgba(255,255,255,.88); font-size:1rem; margin-bottom:var(--sp-5); max-width:44ch; }

.badge-row{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-5) 0 0; }
.stamp{
  display:flex; align-items:center; gap:var(--sp-2); border:2px solid var(--husk); border-radius:999px;
  padding:var(--sp-2) var(--sp-4); background:var(--masa-hi); font-size:.8rem; font-weight:600;
}
.stamp .chile-icon{
  width:11px; height:15px; background:var(--chile); flex:none;
  border-radius:0 60% 60% 60% / 0 100% 100% 60%; transform:rotate(-18deg);
}

/* ---------- Botones ---------- */
.btn-primary{
  background:var(--chile); color:#fff; border:none; border-radius:12px; font-weight:700;
  padding:var(--sp-3) var(--sp-5); font-size:.95rem; min-height:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  text-decoration:none;
}
.btn-primary:hover{ background:var(--chile-deep); }
.btn-primary.btn-wa{ background:var(--whatsapp); color:#0B2E19; }
.btn-primary.btn-wa:hover{ background:var(--whatsapp-deep); color:#fff; }
.btn-primary:disabled{ background:var(--masa-line); color:var(--husk-soft); cursor:not-allowed; }
/* Confirmación (éxito) — verde de marca, nunca el verde de WhatsApp. */
.btn-primary.btn-ok{ background:var(--hoja); color:#fff; }
.btn-primary.btn-ok:hover{ background:var(--hoja-deep); }
.btn-primary[hidden], .btn-ghost[hidden]{ display:none; }
.btn-ghost{
  background:none; border:1.5px solid var(--husk); color:var(--husk); border-radius:10px;
  padding:var(--sp-3) var(--sp-4); font-size:.88rem; font-weight:700; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
}
.btn-block{ width:100%; }
.btn-row{ display:flex; flex-direction:column; gap:var(--sp-2); }

/* ---------- Secciones ---------- */
.section{ padding:var(--sp-10) 0; }
.section-head{ margin-bottom:var(--sp-6); }
.section-head h2{ font-size:clamp(1.4rem, 4.5vw, 1.9rem); margin-bottom:var(--sp-2); }
.section-head p{ color:var(--husk-soft); font-size:.95rem; }

/* ---------- Catálogo ---------- */
.catalog-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.product-card{
  background:#fff; border-radius:14px; padding:var(--sp-3); border:1px solid var(--masa-line);
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
}
.product-card.is-featured{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:var(--sp-4); }
.product-card.is-featured .card-thumb{ width:110px; height:110px; flex:none; margin-bottom:0; }
.card-thumb{
  width:100%; aspect-ratio:1; border-radius:10px; background-size:cover; background-position:center;
  margin-bottom:var(--sp-3); position:relative; background-color:var(--masa);
}
.card-ribbon{
  position:absolute; top:8px; left:-6px; background:var(--hoja); color:#fff; font-size:.62rem; font-weight:800;
  padding:3px 9px 3px 11px; border-radius:0 4px 4px 0; letter-spacing:.02em;
}
.card-body{ flex:1; display:flex; flex-direction:column; min-width:0; }
.card-name{ font-size:.95rem; font-weight:700; line-height:1.25; margin-bottom:3px; }
.card-pres{ font-size:.78rem; color:var(--husk-soft); margin-bottom:var(--sp-3); }
.card-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.card-price{ font-size:.98rem; font-weight:800; color:var(--chile-deep); font-variant-numeric:tabular-nums; }
.card-price.is-pending{ font-size:.78rem; font-weight:700; color:var(--husk-soft); }
.add-btn{
  width:40px; height:40px; border-radius:50%; background:var(--husk); color:#fff; border:none;
  font-size:1.35rem; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; flex:none;
}
.add-btn:hover{ background:var(--chile); }

/* ---------- Detalle de producto ---------- */
.detail-thumb{
  width:100%; aspect-ratio:4/3; border-radius:16px; background-size:cover; background-position:center;
  margin-bottom:var(--sp-5); background-color:var(--masa);
}
.detail-name{ font-size:1.6rem; margin-bottom:var(--sp-1); }
.detail-pres{ font-size:.9rem; color:var(--husk-soft); margin-bottom:var(--sp-3); }
.detail-price{ font-size:1.5rem; font-weight:800; color:var(--chile-deep); margin-bottom:var(--sp-4); font-variant-numeric:tabular-nums; }
.detail-price.is-pending{ font-size:1rem; color:var(--husk-soft); }
.detail-desc{ font-size:1rem; color:var(--husk-soft); margin-bottom:var(--sp-5); }
.detail-incluye{ font-size:.95rem; margin-bottom:var(--sp-6); }
.detail-tags{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-5); }
.detail-tag{
  font-size:.72rem; font-weight:700; border:1.5px solid var(--masa-line); background:var(--masa-hi);
  border-radius:999px; padding:4px 12px; color:var(--husk-soft);
}
.stepper{ display:flex; align-items:center; gap:var(--sp-5); margin-bottom:var(--sp-5); }
.stepper button{
  width:48px; height:48px; border-radius:10px; border:1.5px solid var(--husk); background:#fff;
  font-size:1.3rem; font-weight:700;
}
.stepper .qty-value{ font-weight:800; font-size:1.2rem; font-variant-numeric:tabular-nums; min-width:1.8em; text-align:center; }

/* ---------- Carrito ---------- */
.cart-lines{ display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-5); }
.cart-line{
  display:flex; gap:var(--sp-3); align-items:center; background:#fff;
  border:1px solid var(--masa-line); border-radius:12px; padding:var(--sp-3);
}
.cart-line .card-thumb{ width:60px; height:60px; margin:0; flex:none; }
.cart-line-info{ flex:1; min-width:0; }
.cart-line-name{ font-size:.9rem; font-weight:700; line-height:1.3; }
.cart-line-price{ font-size:.8rem; color:var(--husk-soft); font-variant-numeric:tabular-nums; }
.cart-line-actions{ display:flex; align-items:center; gap:var(--sp-1); }
/* 44x44 es el mínimo tactil de las guias de accesibilidad (WCAG 2.2 y Apple).
   A 34px, el "-" y el "x" quedaban a un dedo de distancia y se vaciaba el
   carrito sin querer: el error mas caro que puede cometer una tienda. */
.qty-btn{
  width:44px; height:44px; border-radius:10px; border:1px solid var(--husk); background:#fff;
  font-size:1.05rem; line-height:1;
}
.cart-line-actions .qty-value{ min-width:1.6em; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
/* El de borrar va SEPARADO de los de cantidad: es la accion irreversible y no
   debe compartir vecindad con las que se repiten a dedazos. */
.remove-btn{
  background:none; border:none; color:var(--husk-soft); font-size:1.2rem;
  width:44px; height:44px; border-radius:10px; margin-left:var(--sp-3);
}
.remove-btn:hover{ color:var(--chile-deep); }
.cart-empty{ text-align:center; padding:var(--sp-10) 0; color:var(--husk-soft); font-size:.95rem; }

.cart-summary{ border-top:1.5px dashed var(--masa-line); padding-top:var(--sp-4); margin-bottom:var(--sp-5); }
.cart-summary:empty{ display:none; }
.cart-total-row{ display:flex; justify-content:space-between; font-weight:800; font-size:1.15rem; font-variant-numeric:tabular-nums; }
.cart-price-note{ font-size:.72rem; color:var(--husk-soft); margin-top:var(--sp-1); }

/* ---------- Formularios ---------- */
.form-block{ margin-bottom:var(--sp-4); }
.form-block label{
  display:block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--husk-soft); margin-bottom:var(--sp-1);
}
.form-block input, .form-block textarea{
  width:100%; border:1.5px solid var(--masa-line); border-radius:10px;
  padding:var(--sp-3); font-size:1rem; font-family:inherit; background:#fff; color:var(--husk);
  min-height:48px;
}
.form-block textarea{ resize:vertical; min-height:80px; }
.form-block input[aria-invalid="true"]{ border-color:var(--chile); }
.form-hint{ font-size:.75rem; color:var(--husk-soft); margin-top:var(--sp-1); }
.form-hint.is-error{ color:var(--chile-deep); font-weight:700; }
.entrega-toggle{ display:flex; gap:var(--sp-2); margin-bottom:var(--sp-4); }
.entrega-toggle button{
  flex:1; border:1.5px solid var(--husk); background:#fff; border-radius:10px;
  padding:var(--sp-3) var(--sp-2); font-size:.9rem; font-weight:700; min-height:48px;
}
.entrega-toggle button.active{ background:var(--husk); color:#fff; }

/* ---------- Confirmación ---------- */
.confirm-label{
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--husk-soft); margin-bottom:var(--sp-2);
}
.confirm-block{
  background:#fff; border:1px solid var(--masa-line); border-radius:12px;
  padding:var(--sp-1) var(--sp-4); margin-bottom:var(--sp-4);
}
.confirm-row{
  display:flex; justify-content:space-between; gap:var(--sp-4); font-size:.9rem;
  padding:var(--sp-3) 0; border-bottom:1px solid var(--masa-line);
}
.confirm-row:last-child{ border-bottom:none; }
.confirm-row span{ color:var(--husk-soft); flex:none; }
.confirm-row strong{ text-align:right; font-weight:700; min-width:0; overflow-wrap:anywhere; }
.link-edit{
  background:none; border:none; color:var(--chile-deep); font-size:.85rem; font-weight:700;
  text-decoration:underline; padding:0 0 var(--sp-5); display:block; text-align:left;
}
.cart-line--static{ background:var(--masa-hi); }

.wa-warning{
  background:#FDECEC; border:1.5px solid var(--chile); border-radius:12px;
  padding:var(--sp-3) var(--sp-4); font-size:.85rem; color:var(--chile-deep); margin-bottom:var(--sp-4);
}
.wa-warning[hidden]{ display:none; }

/* ---------- Éxito ---------- */
.success-check{ width:72px; height:72px; border-radius:50%; background:var(--hoja); margin:var(--sp-12) auto var(--sp-5); position:relative; }
.success-check::after{
  content:''; position:absolute; left:26px; top:20px; width:15px; height:27px;
  border-right:5px solid #fff; border-bottom:5px solid #fff; border-radius:2px; transform:rotate(40deg);
}
.success-title{ text-align:center; font-size:1.4rem; margin-bottom:var(--sp-3); }
.success-desc{ text-align:center; font-size:1rem; color:var(--husk-soft); line-height:1.55; margin:0 auto var(--sp-8); max-width:34ch; }

/* ---------- Secciones de confianza ---------- */
.info-grid{ display:grid; gap:var(--sp-4); }
.info-card{
  background:var(--masa-hi); border:1px solid var(--masa-line); border-radius:var(--radius-card);
  padding:var(--sp-5);
}
.info-card h3{ font-size:1.1rem; margin-bottom:var(--sp-2); }
.info-card p{ font-size:.95rem; color:var(--husk-soft); }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--husk); color:var(--masa-hi); padding:var(--sp-10) 0 var(--sp-8); margin-top:var(--sp-12);
}
.site-footer .wrap{ text-align:center; }
.footer-wordmark{ height:44px; width:auto; margin:0 auto var(--sp-4); }
.site-footer p{ font-size:.88rem; color:rgba(251,246,233,.72); margin-bottom:var(--sp-2); }
.site-footer a{ color:var(--chile-bright); }
.footer-slogan{ font-family:var(--font-script); font-size:1.15rem; color:var(--masa-hi) !important; margin-bottom:var(--sp-5) !important; }

/* ---------- Tabbar inferior (móvil) ---------- */
.app-tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  display:flex; border-top:1px solid var(--masa-line); background:var(--masa-hi);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.tab-btn{
  flex:1; background:none; border:none; padding:var(--sp-2) 0 var(--sp-3);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--husk-soft); font-size:.68rem; font-weight:700; position:relative;
  text-decoration:none; min-height:var(--tabbar-h);
}
.tab-btn.active{ color:var(--chile); }
.tab-icon{ width:22px; height:22px; position:relative; }
.icon-home::before{
  content:''; position:absolute; left:3px; top:1px; border-left:8px solid transparent;
  border-right:8px solid transparent; border-bottom:8px solid currentColor;
}
.icon-home::after{ content:''; position:absolute; left:5px; top:8px; width:12px; height:9px; background:currentColor; }
.icon-basket{
  position:absolute; left:3px; top:6px; width:17px; height:12px; background:currentColor;
  clip-path:polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}
.icon-basket::after{
  content:''; position:absolute; left:5px; top:-5px; width:10px; height:7px;
  border:2px solid currentColor; border-bottom:none; border-radius:6px 6px 0 0;
}
.icon-cart-tab .icon-bag{ position:absolute; left:1px; top:3px; border-color:currentColor; }
.tab-badge{
  position:absolute; top:-3px; right:calc(50% - 18px); min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:var(--chile); color:#fff; font-size:.6rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.tab-badge[hidden]{ display:none; }

/* ---------- Pantallas del checkout ---------- */
.screen[hidden]{ display:none; }

/* ---------- Folio del pedido (pantalla de éxito) ---------- */
.folio-block{
  background:var(--masa-hi); border:1px solid var(--masa-line); border-radius:var(--radius-card);
  padding:var(--sp-5); margin:0 auto var(--sp-6); text-align:center; max-width:36ch;
}
.folio-block[hidden]{ display:none; }
.folio-label{ font-size:.85rem; color:var(--husk-soft); margin-bottom:var(--sp-1); }
.folio-code{
  font-family:var(--font-display); font-weight:900; font-size:1.7rem; color:var(--chile);
  letter-spacing:.04em; margin-bottom:var(--sp-4);
}

/* ---------- Seguimiento del pedido (pedido.html) ---------- */
.pedido-estado{
  background:var(--masa-hi); border:1px solid var(--masa-line); border-radius:var(--radius-card);
  padding:var(--sp-5); margin-bottom:var(--sp-6);
}
.pedido-estado-titulo{ font-family:var(--font-display); font-weight:900; font-size:1.25rem; margin-bottom:var(--sp-1); }
.pedido-estado-nota{ font-size:.92rem; color:var(--husk-soft); }

.timeline{ list-style:none; margin:var(--sp-5) 0 0; padding:0; }
.timeline-step{
  display:grid; grid-template-columns:24px 1fr; gap:var(--sp-3);
  position:relative; padding-bottom:var(--sp-5);
}
.timeline-step:last-child{ padding-bottom:0; }
/* La línea que une los pasos: nace del punto y baja hasta el siguiente. */
.timeline-step:not(:last-child)::before{
  content:''; position:absolute; left:11px; top:20px; bottom:0;
  width:2px; background:var(--masa-line);
}
.timeline-step.is-done:not(:last-child)::before{ background:var(--hoja); }
.timeline-dot{
  width:20px; height:20px; border-radius:50%; margin-top:2px;
  background:var(--masa); border:2px solid var(--masa-line); position:relative; z-index:1;
}
.timeline-step.is-done .timeline-dot{ background:var(--hoja); border-color:var(--hoja); }
.timeline-step.is-current .timeline-dot{ background:var(--chile); border-color:var(--chile); }
.timeline-step.is-cancel .timeline-dot{ background:var(--chile-deep); border-color:var(--chile-deep); }
.timeline-nombre{ font-weight:700; font-size:.98rem; color:var(--husk-soft); }
.timeline-step.is-done .timeline-nombre,
.timeline-step.is-current .timeline-nombre{ color:var(--husk); }
.timeline-fecha{ font-size:.82rem; color:var(--husk-soft); }

.pedido-buscar{ max-width:36ch; margin:0 auto; }

/* ==========================================================================
   FASE 2 — Elevación visual y de conversión.
   Todo lo de aquí abajo usa EXCLUSIVAMENTE los tokens de arriba. Ni un hex
   nuevo, ni una tipografía nueva, ni un radio fuera de la tabla.
   ========================================================================== */

/* ---------- Medidor de picor (chiltepines) ---------- */
/* El activo de marca de la PDP: 5 chiltepines que se llenan con --chile.
   El SVG viaja inline en el HTML (cero peticiones, cero terceros). */
.picor{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.picor-chiles{ display:flex; align-items:flex-end; gap:3px; }
.picor-chile{ display:block; flex:none; }
.picor-cuerpo{ fill:var(--masa-line); }
.picor-tallo{ fill:var(--masa-line); }
.picor-chile.is-on .picor-cuerpo{ fill:var(--chile); }
.picor-chile.is-on .picor-tallo{ fill:var(--hoja); }
.picor-texto{ font-size:.95rem; font-weight:800; color:var(--husk); }
.picor-nivel{ font-weight:700; color:var(--husk-soft); font-variant-numeric:tabular-nums; }
.picor-shu{
  font-size:.85rem; color:var(--husk-soft); margin-top:var(--sp-2);
  background:var(--masa-hi); border:1px solid var(--masa-line); border-radius:12px;
  padding:var(--sp-3) var(--sp-4);
}
.picor-bloque{ margin-bottom:var(--sp-5); }

/* Versión mini para tarjetas de catálogo y cross-sell. */
.picor-mini{ display:flex; align-items:center; gap:4px; margin-bottom:var(--sp-2); }
.picor-mini .picor-chiles{ gap:2px; }

/* ---------- Ficha del producto (ingredientes / peso / usos / lote) ---------- */
.ficha{
  background:var(--masa-hi); border:1px solid var(--masa-line); border-radius:var(--radius-card);
  padding:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-5);
}
.ficha-fila{ padding:var(--sp-3) 0; border-bottom:1px solid var(--masa-line); }
.ficha-fila:last-child{ border-bottom:none; }
.ficha-label{
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--husk-soft); margin-bottom:var(--sp-1);
}
.ficha-valor{ font-size:.95rem; color:var(--husk); }

.bloque-titulo{ font-size:1.15rem; margin-bottom:var(--sp-3); }
.usos-chips{ display:flex; flex-wrap:wrap; gap:var(--sp-2); list-style:none; }
.uso-chip{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:.85rem; font-weight:700; color:var(--husk);
  background:var(--hoja-tint); border:1.5px solid var(--hoja); border-radius:999px;
  padding:6px 14px;
}
.uso-chip::before{
  content:''; width:9px; height:12px; flex:none; background:var(--chile);
  border-radius:0 60% 60% 60% / 0 100% 100% 60%; transform:rotate(-18deg);
}
.lote-nota{
  font-size:.85rem; color:var(--husk-soft); margin-top:var(--sp-4);
  border-left:3px solid var(--chile); padding-left:var(--sp-3);
}

/* ---------- Galería mixta (imágenes + video) ---------- */
.galeria{ margin-bottom:var(--sp-5); }
.galeria-marco{
  width:100%; aspect-ratio:4/3; border-radius:16px; overflow:hidden;
  background:var(--masa); margin-bottom:var(--sp-3);
}
.galeria-marco > img, .galeria-marco > video{ width:100%; height:100%; object-fit:cover; background:var(--masa); }
.galeria-thumbs{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.galeria-thumb{
  width:60px; height:60px; border-radius:10px; overflow:hidden; padding:0;
  border:2px solid var(--masa-line); background:var(--masa); position:relative; flex:none;
}
.galeria-thumb img{ width:100%; height:100%; object-fit:cover; }
.galeria-thumb[aria-current="true"]{ border-color:var(--chile); }
.galeria-thumb .play-marca{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(32,26,22,.42);
}
.galeria-thumb .play-marca::after{
  content:''; width:0; height:0; margin-left:3px;
  border-left:12px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent;
}

/* ---------- FAQ (details/summary) ---------- */
.faq{ margin-bottom:var(--sp-6); }
.faq-item{
  background:var(--masa-hi); border:1px solid var(--masa-line); border-radius:12px;
  margin-bottom:var(--sp-2); overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer; padding:var(--sp-4) var(--sp-10) var(--sp-4) var(--sp-4);
  font-weight:700; font-size:.95rem; color:var(--husk); position:relative; min-height:48px;
  display:flex; align-items:center;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:''; position:absolute; right:var(--sp-5); top:calc(50% - 4px);
  width:9px; height:9px; border-right:2.5px solid var(--chile); border-bottom:2.5px solid var(--chile);
  transform:rotate(45deg); transform-origin:center;
}
.faq-item[open] summary::after{ transform:rotate(-135deg); top:calc(50% - 2px); }
.faq-item summary:focus-visible{ outline:3px solid var(--chile); outline-offset:-3px; }
.faq-respuesta{ padding:0 var(--sp-4) var(--sp-4); font-size:.92rem; color:var(--husk-soft); }

/* ---------- Cross-sell "Combínalo con" ---------- */
.cross-lista{ display:grid; gap:var(--sp-3); margin-bottom:var(--sp-6); }
.mini-card{
  display:flex; align-items:center; gap:var(--sp-3);
  background:#fff; border:1px solid var(--masa-line); border-radius:12px; padding:var(--sp-3);
}
.mini-card-thumb{
  width:64px; height:64px; border-radius:10px; flex:none;
  background-size:cover; background-position:center; background-color:var(--masa);
}
.mini-card-body{ flex:1; min-width:0; }
.mini-card-name{ font-size:.9rem; font-weight:700; line-height:1.25; }
.mini-card-name a{ color:inherit; text-decoration:none; }
.mini-card-pres{ font-size:.76rem; color:var(--husk-soft); }
.mini-card-price{ font-size:.86rem; font-weight:800; color:var(--chile-deep); font-variant-numeric:tabular-nums; }
.mini-card-price.is-pending{ font-size:.74rem; font-weight:700; color:var(--husk-soft); }

/* ---------- Reseñas ---------- */
.estrellas{ display:inline-flex; gap:2px; vertical-align:middle; }
.estrella{ width:15px; height:15px; display:block; flex:none; }
.estrella path{ fill:var(--masa-line); }
.estrella.is-on path{ fill:var(--chile); }
.resenas-resumen{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.resenas-promedio{ font-family:var(--font-display); font-weight:900; font-size:1.7rem; color:var(--husk); font-variant-numeric:tabular-nums; }
.resenas-conteo{ font-size:.85rem; color:var(--husk-soft); }
.resena{
  background:var(--masa-hi); border:1px solid var(--masa-line); border-radius:12px;
  padding:var(--sp-4); margin-bottom:var(--sp-3);
}
.resena-cabeza{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-2); }
.resena-nombre{ font-weight:700; font-size:.92rem; }
.resena-fecha{ font-size:.76rem; color:var(--husk-soft); }
.resena-texto{ font-size:.92rem; color:var(--husk-soft); }
.resena-vacia{ font-size:.92rem; color:var(--husk-soft); margin-bottom:var(--sp-4); }

.estrellas-input{ display:flex; gap:var(--sp-2); }
.estrella-btn{
  width:44px; height:44px; border:none; background:none; padding:0;
  display:flex; align-items:center; justify-content:center; border-radius:8px;
}
.estrella-btn .estrella{ width:26px; height:26px; }
.estrella-btn[aria-checked="true"] .estrella path,
.estrella-btn.is-on .estrella path{ fill:var(--chile); }

/* ---------- CTA pegajoso de móvil ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; z-index:55;
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  background:var(--masa-hi); border-top:1px solid var(--masa-line);
  padding:var(--sp-3) var(--sp-5);
  display:flex; align-items:center; gap:var(--sp-3);
  box-shadow:0 -2px 10px rgba(32,26,22,.10);
}
.sticky-cta[hidden]{ display:none; }
.sticky-cta-precio{ font-weight:800; color:var(--chile-deep); font-variant-numeric:tabular-nums; flex:none; }
.sticky-cta-precio.is-pending{ font-size:.78rem; font-weight:700; color:var(--husk-soft); max-width:9em; }
.sticky-cta .btn-primary{ flex:1; }

/* ---------- Agotado ---------- */
.badge-agotado{
  position:absolute; left:8px; bottom:8px; z-index:1;
  background:var(--husk); color:var(--masa-hi); font-size:.62rem; font-weight:800;
  padding:3px 9px; border-radius:999px; letter-spacing:.02em;
}
.card-agotado-nota{ font-size:.78rem; font-weight:700; color:var(--husk-soft); }
.add-btn:disabled{ background:var(--masa-line); color:var(--husk-soft); cursor:not-allowed; }
.add-btn:disabled:hover{ background:var(--masa-line); }
.detail-agotado{
  background:var(--hoja-tint); border:1.5px solid var(--hoja); border-radius:12px;
  padding:var(--sp-3) var(--sp-4); font-size:.9rem; color:var(--husk); margin-bottom:var(--sp-4);
}

/* ---------- Sellos de confianza (fila bajo el hero) ---------- */
.badge-row{ gap:var(--sp-2); }
.stamp svg{ width:16px; height:16px; flex:none; }
.stamp svg [data-tinta="chile"]{ fill:var(--chile); }
.stamp svg [data-tinta="hoja"]{ fill:var(--hoja); }
.stamp svg [data-tinta="husk"]{ fill:var(--husk); }
.stamp svg [data-linea]{ fill:none; stroke:var(--husk); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Origen: "Del monte sinaloense a tu mesa" ---------- */
.origen{ background:var(--masa-hi); border-top:1px solid var(--masa-line); border-bottom:1px solid var(--masa-line); }
.origen-grid{ display:grid; gap:var(--sp-6); align-items:center; }
.origen-foto{
  border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-card);
  aspect-ratio:4/3; background:var(--masa-line);
}
.origen-foto img{ width:100%; height:100%; object-fit:cover; }
.origen-texto p{ color:var(--husk-soft); font-size:1rem; margin-bottom:var(--sp-4); }
.origen-texto p:last-child{ margin-bottom:0; }
.origen-firma{ font-family:var(--font-script); font-size:1.2rem; color:var(--chile-deep) !important; }

/* ---------- Testimonios ---------- */
.testimonios-grid{ display:grid; gap:var(--sp-3); }
.testimonio{ background:#fff; }
.testimonio .resena-texto{ color:var(--husk); }

/* ---------- Contacto ---------- */
.contacto-card{
  background:var(--masa-hi); border:1px solid var(--masa-line); border-radius:var(--radius-card);
  padding:var(--sp-5);
}
.contacto-fila{ display:flex; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--masa-line); }
.contacto-fila:last-child{ border-bottom:none; }
.contacto-fila .ficha-label{ margin:0; min-width:8.5em; flex:none; }
.contacto-valor{ font-size:.95rem; color:var(--husk); }
.contacto-valor a{ color:var(--chile-deep); font-weight:700; }

/* ---------- Barra "te faltan $X para envío gratis" ---------- */
.envio-bar{
  background:var(--masa-hi); border:1px solid var(--masa-line); border-radius:12px;
  padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-4);
}
.envio-bar[hidden]{ display:none; }
.envio-bar-texto{ font-size:.88rem; font-weight:700; color:var(--husk); margin-bottom:var(--sp-2); }
.envio-bar-pista{ font-size:.98rem; color:var(--chile-deep); font-weight:800; }
.envio-riel{ height:8px; border-radius:999px; background:var(--masa-line); overflow:hidden; }
.envio-progreso{ height:100%; width:0; background:var(--chile); border-radius:999px; }
.envio-bar.is-listo{ background:var(--hoja-tint); border-color:var(--hoja); }
.envio-bar.is-listo .envio-progreso{ background:var(--hoja); }
.envio-bar.is-listo .envio-bar-texto{ color:var(--hoja-deep); }
.envio-mini{ font-size:.82rem; color:var(--husk-soft); margin-top:var(--sp-2); }
.envio-mini[hidden]{ display:none; }
.envio-mini.is-listo{ color:var(--hoja-deep); font-weight:700; }
@media (prefers-reduced-motion: no-preference){
  .envio-progreso{ transition:width .35s ease; }
}

/* ---------- Captura de correo ---------- */
.suscribe{
  background:rgba(251,246,233,.08); border:1px solid rgba(251,246,233,.22);
  border-radius:var(--radius-card); padding:var(--sp-5); margin:0 auto var(--sp-6); max-width:34em;
  text-align:left;
}
.suscribe h3{ color:var(--masa-hi); font-size:1.05rem; margin-bottom:var(--sp-2); }
.suscribe p{ font-size:.85rem; margin-bottom:var(--sp-4); }
.suscribe-form{ display:flex; flex-direction:column; gap:var(--sp-2); }
.suscribe-form input{
  width:100%; min-height:48px; border-radius:10px; border:1.5px solid var(--masa-line);
  background:var(--masa-hi); color:var(--husk); padding:var(--sp-3); font-size:1rem; font-family:inherit;
}
.suscribe-form input:focus-visible{ outline:3px solid var(--chile-bright); outline-offset:2px; }
.suscribe-msg{ font-size:.85rem; margin-top:var(--sp-3); min-height:1.3em; }
.suscribe-msg.es-ok{ color:var(--masa-hi); font-weight:700; }
.suscribe-codigo{
  display:inline-block; font-family:var(--font-display); font-weight:900; letter-spacing:.06em;
  background:var(--masa-hi); color:var(--chile-deep); border-radius:8px; padding:2px 10px; margin:0 2px;
}

/* ---------- Footer: enlaces legales ---------- */
.footer-legal{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-2) var(--sp-4); margin-bottom:var(--sp-4); }
.footer-legal a{ font-size:.85rem; color:var(--masa-hi); text-decoration:underline; }

/* ---------- Quiz "Encuentra tu picor" ---------- */
.quiz-card{
  background:var(--masa-hi); border:1px solid var(--masa-line); border-radius:var(--radius-card);
  padding:var(--sp-5); box-shadow:var(--shadow-card);
}
.quiz-progreso{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--chile-deep); margin-bottom:var(--sp-3); }
.quiz-pregunta{ font-size:1.3rem; margin-bottom:var(--sp-5); }
.quiz-opciones{ display:grid; gap:var(--sp-3); list-style:none; }
.quiz-opcion{
  width:100%; text-align:left; background:#fff; border:1.5px solid var(--masa-line); border-radius:12px;
  padding:var(--sp-4); font-size:.98rem; font-weight:700; color:var(--husk); min-height:56px;
  display:flex; align-items:center; gap:var(--sp-3);
}
.quiz-opcion:hover{ border-color:var(--chile); }
.quiz-opcion .emoji-chile{
  width:12px; height:16px; flex:none; background:var(--chile);
  border-radius:0 60% 60% 60% / 0 100% 100% 60%; transform:rotate(-18deg);
}
.quiz-opcion-nota{ display:block; font-weight:400; font-size:.82rem; color:var(--husk-soft); margin-top:2px; }
.quiz-resultado-eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--chile-deep); }
.quiz-veredicto{ font-size:1rem; color:var(--husk-soft); margin:var(--sp-3) 0 var(--sp-5); }
@media (prefers-reduced-motion: no-preference){
  .quiz-opcion{ transition:transform .12s ease, border-color .12s ease; }
  .quiz-opcion:active{ transform:scale(.985); }
}

/* ---------- Página editorial (chiltepín) ---------- */
.articulo-foto{
  margin:0 0 var(--sp-6); border-radius:var(--radius-card); overflow:hidden;
  border:1px solid var(--masa-line); box-shadow:var(--shadow-card); aspect-ratio:4/3;
}
.articulo-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.articulo p{ font-size:1rem; color:var(--husk-soft); margin-bottom:var(--sp-4); }
.articulo h2{ font-size:clamp(1.3rem, 4.2vw, 1.7rem); margin:var(--sp-8) 0 var(--sp-3); }
.articulo h3{ font-size:1.1rem; margin:var(--sp-6) 0 var(--sp-2); }
.articulo ul{ margin-bottom:var(--sp-4); }
.articulo strong{ color:var(--husk); }
.tabla-envoltura{ overflow-x:auto; margin-bottom:var(--sp-5); -webkit-overflow-scrolling:touch; }
.tabla-shu{
  width:100%; border-collapse:collapse; font-size:.9rem; min-width:420px;
  background:var(--masa-hi); border:1px solid var(--masa-line); border-radius:12px; overflow:hidden;
}
.tabla-shu caption{ font-size:.8rem; color:var(--husk-soft); text-align:left; padding-bottom:var(--sp-2); }
.tabla-shu th, .tabla-shu td{ padding:var(--sp-3); text-align:left; border-bottom:1px solid var(--masa-line); }
.tabla-shu thead th{ background:var(--husk); color:var(--masa-hi); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
.tabla-shu tbody th{ font-weight:800; color:var(--husk); }
.tabla-shu td{ color:var(--husk-soft); font-variant-numeric:tabular-nums; }
.tabla-shu tr.es-nuestro th, .tabla-shu tr.es-nuestro td{ background:var(--hoja-tint); color:var(--husk); font-weight:700; }
.tabla-shu tbody tr:last-child th, .tabla-shu tbody tr:last-child td{ border-bottom:none; }

/* ---------- Páginas legales ---------- */
.legal-doc h2{ font-size:1.2rem; margin:var(--sp-8) 0 var(--sp-3); }
.legal-doc h3{ font-size:1rem; margin:var(--sp-5) 0 var(--sp-2); }
.legal-doc p, .legal-doc li{ font-size:.95rem; color:var(--husk-soft); }
.legal-doc p{ margin-bottom:var(--sp-3); }
.legal-doc ul{ margin:0 0 var(--sp-4) var(--sp-5); }
.legal-doc li{ list-style:disc; margin-bottom:var(--sp-2); }
.legal-fecha{ font-size:.8rem; color:var(--husk-soft); }
.legal-dato{ font-weight:700; color:var(--husk); }
.legal-dato.es-pendiente{ font-weight:400; color:var(--husk-soft); font-style:italic; }
.legal-nav{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-6); }
.legal-nav a{
  font-size:.8rem; font-weight:700; text-decoration:none; color:var(--husk-soft);
  border:1.5px solid var(--masa-line); background:var(--masa-hi); border-radius:999px; padding:6px 14px;
}
.legal-nav a[aria-current="page"]{ border-color:var(--chile); color:var(--chile-deep); }

/* ---------- Reveals al hacer scroll ---------- */
/* Preferencia 1: scroll-driven nativo (cero JS).  Preferencia 2: IntersectionObserver,
   y SOLO si el JS ya marcó <html class="js-revelar"> — así, sin JS y sin soporte,
   el contenido se ve normal en vez de quedarse invisible. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .revelar{
      animation:revelar-entrada linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 24%;
    }
    @keyframes revelar-entrada{
      from{ opacity:0; transform:translateY(14px); }
      to{ opacity:1; transform:none; }
    }
  }
  @supports not (animation-timeline: view()){
    html.js-revelar .revelar{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
    html.js-revelar .revelar.es-visible{ opacity:1; transform:none; }
  }
  .mini-card, .info-card, .resena, .quiz-card{ transition:transform .18s ease, box-shadow .18s ease; }
  .mini-card:hover, .info-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card); }
  /* Zoom lentísimo del hero mientras no haya video del cliente. */
  .hero-img{ animation:hero-respira 28s ease-in-out infinite alternate; }
  @keyframes hero-respira{ from{ transform:scale(1); } to{ transform:scale(1.06); } }
}

/* ---------- Responsive ---------- */
@media (min-width:600px){
  .catalog-grid{ grid-template-columns:repeat(3, 1fr); }
  .product-card.is-featured .card-thumb{ width:150px; height:150px; }
  .info-grid{ grid-template-columns:1fr 1fr; }
  .btn-row{ flex-direction:row; }
  .btn-row > *{ flex:1; }
  .hero-card{ min-height:400px; }
  .cross-lista{ grid-template-columns:1fr 1fr; }
  .testimonios-grid{ grid-template-columns:1fr 1fr; }
}
@media (min-width:900px){
  body{ padding-bottom:0; }
  .app-tabbar{ display:none; }
  .catalog-grid{ grid-template-columns:repeat(4, 1fr); }
  .section{ padding:var(--sp-12) 0; }
  .hero-content{ padding:var(--sp-10); }
  /* En escritorio el botón de agregar siempre se ve: el pegajoso sobra. */
  .sticky-cta{ display:none !important; }
  .origen-grid{ grid-template-columns:1fr 1fr; gap:var(--sp-10); }
  .testimonios-grid{ grid-template-columns:repeat(3, 1fr); }
  .suscribe-form{ flex-direction:row; }
  .suscribe-form .btn-primary{ flex:none; }
}