/* ==========================================================================
   CannaBee — Sistema visual
   Dirección: botanical editorial × contemporary laboratory
   Paleta extraída de la fotografía real de producto (tarro negro, tapa de
   bambú, etiqueta oliva, fondo hueso).
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* ---- Superficies — crema de papel, nunca blanco puro ---- */
  --ivory:#F3EEE3;         /* fondo principal */
  --cream:#FAF7EF;
  --paper:#FAF7EF;         /* superficie elevada (formularios, cajas) */
  --sand:#EADFCB;          /* alternancia de sección */
  --sand-deep:#DCCBAD;

  /* ---- Oscuros cálidos — nunca negro ---- */
  --cacao:#2C1C11;
  --cacao-soft:#3B2718;
  --espresso:#1E120A;

  /* ---- Tinta ---- */
  --ink:#2A1B10;
  --ink-70:rgba(42,27,16,.72);
  --ink-45:rgba(42,27,16,.66);       /* 1/11: antes .5 (3,2:1) → ~4,6:1 sobre marfil (WCAG AA) */
  --ink-15:rgba(42,27,16,.16);
  --ink-08:rgba(42,27,16,.08);
  --earth:#5B4028;

  /* ---- Dorado ----
     --gold       acento: fondos, líneas, iconos y botones CON TEXTO OSCURO. Nunca texto sobre claro.
     --gold-text  texto dorado sobre fondo claro — 5,4:1 sobre --ivory, 5,8:1 sobre --cream,
                  4,7:1 sobre --sand (sobre --sand-deep baja a 3,9:1: no usar ahí texto pequeño).
     --gold-light texto dorado sobre fondos oscuros — 7,2:1 sobre --cacao. */
  --gold:#B8860B;
  --gold-text:#7D5B07;
  --gold-light:#D8A340;

  /* ---- Acentos por formulación ---- */
  --f-base:#8A6134;
  --f-emerald:#4F6B3A;
  --f-amber:#B0721E;
  --f-crimson:#7A2E32;

  /* ---- Tipografía ---- */
  --display:"Cormorant Garamond",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-hero:clamp(2.75rem,6.4vw,5.25rem);    /* 44 → 84 px */
  --t-h1:clamp(2.5rem,5.2vw,4.5rem);        /* 40 → 72 px */
  --t-h2:clamp(2rem,3.9vw,3.375rem);        /* 32 → 54 px */
  --t-h3:clamp(1.375rem,2vw,1.75rem);       /* 22 → 28 px */
  --t-lead:clamp(1.0625rem,1.3vw,1.1875rem);/* 17 → 19 px */
  --t-body:1rem;
  --t-small:.8125rem;
  --t-label:.75rem;
  --t-micro:.6875rem;      /* 1/11: antes 10 px → 11 px */
  --t-btn:.75rem;          /* 1/11: botones y enlaces 11 → 12 px */

  /* ---- Ritmo vertical ---- */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2.5rem;
  --s-5:4rem;  --s-6:6rem; --s-7:9rem;   --s-8:12rem;
  --section:clamp(4.5rem,10vw,11rem);

  /* ---- Layout ---- */
  --gutter:clamp(1rem,4vw,4.5rem);
  --maxw:1480px;
  --measure:64ch;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.75;
  font-weight:300;letter-spacing:0;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,picture,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--gold);color:var(--cacao)}
:focus-visible{outline:2px solid var(--gold-text);outline-offset:3px;border-radius:2px}

/* ---------- 3. Tipografía ---------- */
.display{
  font-family:var(--display);font-weight:300;line-height:1.04;
  letter-spacing:-.01em;font-optical-sizing:auto;
}
.t-hero{font-size:var(--t-hero)}
.t-h1{font-size:var(--t-h1)}
.t-h2{font-size:var(--t-h2)}
.t-h3{font-size:var(--t-h3);line-height:1.2}
.lead{font-size:var(--t-lead);line-height:1.78;color:var(--ink-70);max-width:var(--measure)}
.em{font-style:italic}

/* Etiqueta técnica — el detalle "laboratorio" del sistema */
.label{
  font-family:var(--mono);font-size:var(--t-label);text-transform:uppercase;
  letter-spacing:.18em;font-weight:400;color:var(--ink-45);
  display:inline-flex;align-items:center;gap:.6em;
}
.label::before{
  content:"";width:1.75rem;height:1px;background:currentColor;
  opacity:.5;flex:none;
}
.label--bare::before{display:none}

.body-lg{font-size:1.03125rem;color:var(--ink-70);max-width:var(--measure)}
.muted{color:var(--ink-45)}
.measure{max-width:var(--measure)}

/* ---------- 4. Layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--tight{padding-block:calc(var(--section)*.6)}
.bleed{width:100%}

/* Rejilla editorial de 12 — permite composición asimétrica */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-4) clamp(1rem,2.5vw,2.5rem)}
/* Se fija el END, no el START: así `grid-column-start` de las clases start-*
   no pisa el tramo. Con `grid-column:span N` el shorthand escribe el start y
   cualquier start-* posterior dejaba la celda en una sola columna. */
.c-1{grid-column-end:span 1}  .c-2{grid-column-end:span 2}
.c-3{grid-column-end:span 3}  .c-4{grid-column-end:span 4}
.c-5{grid-column-end:span 5}  .c-6{grid-column-end:span 6}
.c-7{grid-column-end:span 7}  .c-8{grid-column-end:span 8}
.c-9{grid-column-end:span 9}  .c-10{grid-column-end:span 10}
.c-12{grid-column:1/-1}
.start-2{grid-column-start:2}  .start-3{grid-column-start:3}
.start-4{grid-column-start:4}  .start-5{grid-column-start:5}
.start-6{grid-column-start:6}  .start-7{grid-column-start:7}
.start-8{grid-column-start:8}  .start-9{grid-column-start:9}
.start-10{grid-column-start:10}

.stack>*+*{margin-top:var(--s-3)}
.stack-lg>*+*{margin-top:var(--s-4)}
.rule{height:1px;background:var(--ink-15);border:0;margin:0}

/* ---------- 5. Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.75em;
  padding:13px 34px;font-size:var(--t-btn);font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--ink);background:var(--ink);color:var(--ivory);
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .14s var(--ease-out);
  position:relative;
}
.btn:active{transform:scale(.97)}
.btn:hover{background:var(--gold-text);border-color:var(--gold-text);color:var(--ivory)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink-15)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.btn--light{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.btn--light:hover{background:transparent;color:var(--ivory);border-color:var(--ivory)}
.btn--block{width:100%}
.btn[disabled]{opacity:.4;cursor:not-allowed}

/* Enlace con subrayado que crece */
.link{
  display:inline-block;position:relative;font-size:var(--t-btn);font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;padding-bottom:.4em;
}
.link::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.link:hover::after{transform:scaleX(1);transform-origin:left}
.link--on::after{transform:scaleX(1)}
.link--on:hover::after{transform-origin:right;transform:scaleX(0)}

/* ---------- 6. Cabecera ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  padding-block:1.375rem;
  transition:background .5s var(--ease),padding .5s var(--ease),
             box-shadow .5s var(--ease);
}
.hdr__in{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
}
.hdr.is-stuck{
  background:rgba(243,238,227,.88);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);padding-block:.875rem;
  box-shadow:0 1px 0 var(--ink-08);
}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr{transition:transform .55s var(--ease),background .5s var(--ease),padding .5s var(--ease)}

.brand{
  font-family:var(--display);font-size:1.4375rem;font-weight:400;
  letter-spacing:-.02em;line-height:1;flex:none;
}
.nav{display:flex;align-items:center;gap:clamp(1.25rem,2.4vw,2.5rem)}
.nav a{
  font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:500;color:var(--ink-70);transition:color .3s var(--ease);
  position:relative;padding-block:.25rem;
}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]::after{
  content:"";position:absolute;left:0;right:0;bottom:-.1rem;height:1px;background:var(--ink);
}
.hdr__act{display:flex;align-items:center;gap:1.25rem;flex:none}

.burger{display:none;width:2.25rem;height:2.25rem;position:relative;flex:none}
.burger span{
  position:absolute;left:.375rem;right:.375rem;height:1px;background:var(--ink);
  transition:transform .45s var(--ease),opacity .3s var(--ease);
}
.burger span:nth-child(1){top:.85rem}
.burger span:nth-child(2){bottom:.85rem}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.275rem) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-.275rem) rotate(-45deg)}

/* Menú móvil */
.mnav{
  position:fixed;inset:0;z-index:99;background:var(--ivory);
  padding:7rem var(--gutter) 3rem;
  display:flex;flex-direction:column;justify-content:space-between;
  transform:translateY(-100%);transition:transform .7s var(--ease-out);
  overflow-y:auto;
}
.mnav.is-open{transform:translateY(0)}
.mnav a{display:block;font-family:var(--display);font-size:clamp(1.75rem,7vw,2.75rem);
  font-weight:300;letter-spacing:-.02em;padding-block:.4rem;line-height:1.15}
.mnav__sub{margin-top:var(--s-4)}
.mnav__sub a{font-family:var(--sans);font-size:.875rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-45);padding-block:.5rem}

/* ---------- 7. Hero ---------- */
/* Calcado del hero de producción: misma fotografía, mismo encuadre
   (cover + center right), mismo degradado y las MISMAS opacidades
   (.60 → .45 → .10 → 0 de izquierda a derecha), mismo alto (100svh),
   mismo padding (120/64/80) y misma columna de texto (1200px / 2 − 80 gap).
   Único cambio: el crema del velo es el --bone del sistema nuevo, para que
   el hero no desentone con la sección que va debajo. */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;overflow:hidden;
  padding-block:120px 80px;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center right}
.hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,
    rgba(243,238,227,.60) 0%,
    rgba(243,238,227,.45) 35%,
    rgba(243,238,227,.10) 65%,
    rgba(243,238,227,0)  100%);
}
.hero__in{position:relative;z-index:1;width:100%}
.hero__col{max-width:min(880px,64vw)}
.hero__eyebrow{margin-bottom:var(--s-3)}
.hero h1{margin-bottom:var(--s-3)}
.hero h1 .ln{display:block}
@media (min-width:1201px){
  /* Jorge, 10/9: el titular va en DOS líneas, una frase por línea.
     `nowrap` lo impone y el tamaño se ata al ancho de ventana para que la
     frase larga (33 caracteres) quepa siempre sin desbordar la columna. */
  .hero h1{font-size:min(var(--t-hero),4.3vw)}
  .hero h1 .ln{white-space:nowrap}
}
/* El texto nunca invade la mitad derecha, donde vive el producto */
.hero .lead,.hero__meta{max-width:min(520px,42vw)}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:var(--s-4)}

/* Índice del hero — bajo el texto, nunca sobre la fotografía */
.hero__meta{
  display:flex;gap:1.75rem;margin-top:var(--s-4);
  padding-top:var(--s-2);border-top:1px solid var(--ink-15);
}
.hero__meta span{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45)}

/* ---------- 8. Colección ---------- */
.coll{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-08)}
.card{
  position:relative;background:var(--ivory);padding:var(--s-4) clamp(1rem,1.8vw,2rem) var(--s-4);
  display:flex;flex-direction:column;min-height:clamp(430px,52vw,620px);
  transition:background .6s var(--ease);
}
.card:hover{background:var(--paper)}
.card__n{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;
  color:var(--ink-45);margin-bottom:auto}
.card__img{
  margin:var(--s-4) auto var(--s-3);width:min(100%,290px);
  transition:transform .8s var(--ease-out);
}
.card:hover .card__img{transform:translateY(-10px) scale(1.03)}
.card__name{font-family:var(--display);font-size:clamp(1.5rem,2vw,1.875rem);
  font-weight:400;letter-spacing:-.01em;line-height:1.1}
.card__sub{font-size:.8125rem;color:var(--ink-45);margin-top:.4rem;min-height:2.4em;line-height:1.4}
.card__foot{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin-top:var(--s-3);padding-top:var(--s-2);border-top:1px solid var(--ink-08)}
.card__price{font-size:.875rem;color:var(--ink-70);font-variant-numeric:tabular-nums}
.card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--accent,var(--ink));transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.card:hover::before{transform:scaleX(1)}
.card--soon .card__img{opacity:.5}
.card__tag{
  position:absolute;top:var(--s-4);right:clamp(1rem,1.8vw,2rem);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45);
}

/* ---------- 9. Bloques editoriales ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(2rem,6vw,7rem)}
.split--wide{grid-template-columns:1.15fr .85fr}
.split__media img{width:100%}
.figure{position:relative}
.figure__cap{
  margin-top:.875rem;font-size:var(--t-small);color:var(--ink-45);
  display:flex;gap:.6rem;align-items:baseline;
}
.figure__cap b{font-weight:500;color:var(--ink-70)}

/* Franja de datos técnicos */
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-08);
  border-block:1px solid var(--ink-08)}
.spec__i{background:var(--ivory);padding:var(--s-4) clamp(1rem,2vw,2rem)}
.spec__v{font-family:var(--display);font-size:clamp(1.75rem,3vw,2.75rem);
  font-weight:300;letter-spacing:-.03em;line-height:1;display:block}
.spec__k{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45);margin-top:.75rem;display:block}
.spec__note{font-size:var(--t-small);color:var(--ink-45);margin-top:.5rem;line-height:1.45}

/* Sección oscura */
.dark{background:var(--ink);color:var(--ivory)}
.dark .label,.dark .muted,.dark .lead,.dark .body-lg{color:rgba(243,238,227,.62)}
.dark .rule{background:rgba(243,238,227,.16)}
.dark .spec__i{background:var(--ink)}
.dark .spec,.dark .spec__i{border-color:rgba(243,238,227,.16)}
.dark .spec{background:rgba(243,238,227,.16)}
.dark .spec__k{color:rgba(243,238,227,.5)}

/* Pasos numerados del proceso */
.steps{counter-reset:s}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.25rem,3vw,3rem);
  padding-block:var(--s-4);border-top:1px solid var(--ink-15);
}
.step:last-child{border-bottom:1px solid var(--ink-15)}
.step__n{
  counter-increment:s;font-family:var(--mono);font-size:var(--t-btn);
  letter-spacing:.1em;color:var(--ink-45);font-variant-numeric:tabular-nums;
  padding-top:.55rem;
}
.step__n::before{content:counter(s,decimal-leading-zero)}
.step h3{margin-bottom:.5rem}

/* Cita */
.quote{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,3.4vw,2.75rem);
  line-height:1.22;letter-spacing:-.025em;text-wrap:balance}
.quote cite{display:block;font-family:var(--mono);font-size:var(--t-micro);
  font-style:normal;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-45);margin-top:var(--s-3)}

/* ---------- 10. Ficha de producto ---------- */
.pdp{padding-top:clamp(6rem,12vh,9rem)}
.pdp__grid{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,6rem);align-items:start}
.pdp__media{position:sticky;top:6rem}
.pdp__hero{background:var(--paper);padding:clamp(1.5rem,4vw,3.5rem)}
.pdp__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:.75rem}
.pdp__thumbs button{background:var(--paper);padding:.5rem;border:1px solid transparent;
  transition:border-color .3s var(--ease)}
.pdp__thumbs button[aria-selected="true"]{border-color:var(--ink)}
.pdp__price{font-family:var(--display);font-size:clamp(1.75rem,2.6vw,2.375rem);
  font-weight:300;letter-spacing:-.03em}
.pdp__unit{font-family:var(--mono);font-size:.6875rem;color:var(--ink-45);
  letter-spacing:.04em;margin-left:.6rem}

/* Selector de formato */
.fmt{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.fmt label{
  display:block;padding:1rem 1.125rem;border:1px solid var(--ink-15);cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.fmt input{position:absolute;opacity:0;pointer-events:none}
.fmt input:checked+label{border-color:var(--ink);background:var(--paper)}
.fmt input:focus-visible+label{outline:2px solid var(--gold-text);outline-offset:2px}
.fmt__size{display:block;font-weight:500;font-size:.9375rem}
.fmt__price{display:block;font-size:.8125rem;color:var(--ink-45);margin-top:.15rem}
.fmt__per{display:block;font-family:var(--mono);font-size:var(--t-micro);
  color:var(--ink-45);margin-top:.35rem;letter-spacing:.06em}

/* Acordeón */
.acc{border-top:1px solid var(--ink-15)}
.acc__i{border-bottom:1px solid var(--ink-15)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.375rem 0;text-align:left;font-size:.9375rem;font-weight:500;
}
.acc__btn::after{
  content:"";width:11px;height:11px;flex:none;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .45s var(--ease);
}
.acc__btn[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-3px,-3px)}
.acc__p{overflow:hidden;height:0;transition:height .5s var(--ease)}
.acc__p>div{padding-bottom:1.5rem;color:var(--ink-70);max-width:60ch}
.acc__p p+p{margin-top:.875rem}
.acc__p strong{color:var(--ink);font-weight:500}

/* Tabla de fórmula */
.formula{width:100%;border-collapse:collapse;font-size:.875rem}
.formula th{text-align:left;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);font-weight:400;
  padding-bottom:.75rem;border-bottom:1px solid var(--ink-15)}
.formula td{padding-block:.75rem;border-bottom:1px solid var(--ink-08);vertical-align:top}
.formula td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.formula tr:last-child td{border-bottom:0;font-weight:500}

/* CTA fija (móvil y escritorio): aparece cuando el botón principal sale de pantalla */
.sticky-buy{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;
  padding:.75rem max(var(--gutter),calc((100% - var(--maxw))/2 + var(--gutter)))
          calc(.75rem + env(safe-area-inset-bottom));
  background:rgba(243,238,227,.94);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-top:1px solid var(--ink-08);
  transform:translateY(110%);transition:transform .5s var(--ease);
  align-items:center;gap:1rem;
}
.sticky-buy.is-on{transform:translateY(0)}
.sticky-buy__i{flex:1;min-width:0}
.sticky-buy__n{font-size:.8125rem;font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sticky-buy__p{font-size:var(--t-small);color:var(--ink-45)}

/* Aviso de placeholder — visible sólo para revisión interna */
.ph{
  border:1px dashed var(--gold);padding:.6rem .875rem;font-size:var(--t-small);
  color:var(--gold);letter-spacing:.02em;background:rgba(184,134,11,.05);
}

/* ---------- 11. Pie ---------- */
.ftr{background:var(--ink);color:var(--ivory);padding-block:var(--s-6) var(--s-4)}
.ftr a{color:rgba(243,238,227,.62);transition:color .3s var(--ease);font-size:.875rem}
.ftr a:hover{color:var(--ivory)}
.ftr h4{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(243,238,227,.42);margin-bottom:var(--s-2)}
.ftr li+li{margin-top:.6rem}
.ftr__brand{font-family:var(--display);font-size:clamp(2.5rem,7vw,5rem);
  font-weight:300;letter-spacing:-.03em;line-height:1}
.ftr__base{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  align-items:center;margin-top:var(--s-5);padding-top:var(--s-3);
  border-top:1px solid rgba(243,238,227,.16);font-size:var(--t-small);
  color:rgba(243,238,227,.42)}

/* ---------- 12. Animación de entrada ---------- */
.js .rv{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.js .rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s}
.rv-d3{transition-delay:.24s} .rv-d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .card__img,.hdr{transition:none}
}

/* ---------- 13. Responsive ---------- */
/* Hero apilado: NO es el de escritorio encogido. La fotografía ocupa la parte
   superior y el texto vive debajo, sobre fondo sólido y con contraste pleno.
   Entra a 1200px (y no a 900) porque por debajo de ese ancho el recorte de la
   foto mete los tarros dentro de la columna de texto. */
@media (max-width:1200px){
  .hero{
    min-height:0;display:block;padding-block:0 var(--section);
    background:var(--ivory);
  }
  .hero__col{max-width:none}
  .hero .lead,.hero__meta{max-width:none}
  .hero__media{position:relative;height:46svh;min-height:270px}
  .hero__media img{object-position:58% 42%}
  .hero__media::after{
    background:linear-gradient(180deg,rgba(243,238,227,0) 55%,
               rgba(243,238,227,.55) 78%,var(--ivory) 100%);
  }
  .hero__in{margin-top:clamp(1.5rem,5vw,2.5rem)}
  .hero__cta{margin-top:var(--s-3)}
  .hero__meta{gap:1.25rem}
}
@media (max-width:1100px){
  .coll{grid-template-columns:repeat(2,1fr)}
  .spec{grid-template-columns:repeat(2,1fr)}
  .pdp__grid{grid-template-columns:1fr;gap:var(--s-4)}
  .pdp__media{position:static}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:block}
  .split,.split--wide{grid-template-columns:1fr;gap:var(--s-4)}

  [class*="c-"]{grid-column:1/-1}
  [class*="start-"]{grid-column-start:1}
  .c-6.keep,.c-4.keep{grid-column:span 6}
}
@media (max-width:640px){
  .coll{grid-template-columns:1fr}
  .card{min-height:auto;padding-block:var(--s-4)}
  .card__img{width:min(72%,240px)}
  .spec{grid-template-columns:1fr}
  .fmt{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:.5rem}
  .btn{width:100%;padding-inline:1.25rem}
  .hero__cta .btn{width:auto;flex:1 1 auto;min-width:0}
}
@media print{.hdr,.mnav,.sticky-buy{display:none}}

/* Avisos internos OCULTOS POR DEFECTO: la web se enseña limpia.
   Se ven añadiendo ?dev=1 a cualquier URL. Siguen siempre en el código. */
.ph{display:none}
html[data-dev] .ph{display:block}

/* ---------- Buscador de lote · /trazabilidad/ (1/11/2026) ---------- */
.lote{border:1px solid var(--ink-15);background:var(--paper);padding:clamp(1.5rem,4vw,3rem)}
.lote__form{margin-top:1.75rem;max-width:34rem}
.lote__row{display:flex;gap:.75rem;margin-top:.5rem}
.lote__row input{flex:1;min-width:0;padding:.9rem 1rem;border:1px solid var(--ink-15);background:var(--ivory);
  font-family:var(--mono);font-size:1rem;letter-spacing:.04em;color:var(--ink);text-transform:uppercase}
.lote__row input::placeholder{text-transform:none;letter-spacing:0;color:var(--ink-70);opacity:.7}
.lote__out{margin-top:2rem}
.lote__msg{font-size:.9375rem;line-height:1.6;color:var(--ink-70)}
.lote__card{border-top:1px solid var(--ink-15);padding-top:1.5rem}
.lote__card+.lote__card{margin-top:2rem}
.lote__card h3{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3vw,2rem);line-height:1.1}
.lote__id{margin-top:.35rem;font-family:var(--mono);font-size:var(--t-small);letter-spacing:.04em;color:var(--ink-70)}
.lote__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem 2rem;margin:1.5rem 0 0}
.lote__grid dt{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text)}
.lote__grid dd{margin:.35rem 0 0;font-size:1rem;line-height:1.5}
.lote__docs{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;margin-top:1.5rem}
@media (max-width:640px){
  .lote__row{flex-direction:column}
  .lote__row .btn{width:100%}
  .lote__grid{grid-template-columns:1fr 1fr}
}

/* 1/11/2026: toda la tarjeta de /formulaciones/ lleva a la ficha (Jorge: «que se pueda cliquear la imagen»).
   El enlace del nombre se estira sobre la tarjeta; «Ver ficha» queda por encima y sigue funcionando. */
.card__hit{color:inherit;text-decoration:none}
.card__hit::after{content:"";position:absolute;inset:0;z-index:1}
.card__hit:focus-visible{outline:none}
.card:has(.card__hit:focus-visible){outline:2px solid var(--gold-text);outline-offset:-2px}
.card{cursor:pointer}
.card__foot .link{z-index:2}
/* 1/11: tarros con fondo blanco (*-tarro-w.webp) fundidos con la tarjeta, también en hover */
.card__img{mix-blend-mode:multiply}

/* ---------- Profesionales (1/11/2026) ---------- */
.pro-cta{display:flex;flex-wrap:wrap;gap:.75rem}
.pro-why{display:grid;gap:1.1rem;list-style:none;margin:0;padding:0}
.pro-why li{font-size:1.03125rem;line-height:1.6;color:var(--ink-70);padding-left:1.25rem;border-left:1px solid var(--ink-15)}
.pro-why b,.pro-steps b{color:var(--ink);font-weight:500}
.pro-inl{text-transform:none;letter-spacing:0!important;font-size:inherit!important;font-family:inherit!important;padding-bottom:0;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.pro-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-15);margin-top:1.25rem;border:1px solid var(--ink-15)}
.pro-prod{background:var(--ivory);padding:1.25rem}
.pro-prod p{margin-top:.5rem;font-size:.9375rem;line-height:1.55;color:var(--ink-70)}
.pro-prod .pro-av{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.pro-prod--soon .pro-av{color:var(--ink-45)}
.pro-steps{display:grid;gap:1rem;margin:1.5rem 0 0;padding-left:1.25rem;max-width:44rem}
.pro-steps li{font-size:1.03125rem;line-height:1.6;color:var(--ink-70);padding-left:.25rem}
.pform{display:grid;gap:1.1rem}
.pform input[type=text],.pform select,.pform textarea{width:100%;margin-top:.5rem;padding:.9rem 1rem;border:1px solid var(--ink-15);background:var(--ivory);font:inherit;color:inherit}
.pform textarea{resize:vertical}
.pform__ok{display:flex;gap:.75rem;align-items:flex-start;font-size:.875rem;line-height:1.55}
.pform__ok input{margin-top:.25rem;accent-color:var(--ink)}
#p-status{margin:0;font-size:.9375rem;line-height:1.6}
@media (max-width:900px){.pro-prods{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pro-prods{grid-template-columns:1fr}.pro-cta .btn{width:100%}}

/* ---------- Verificación de edad antes del pago (1/11/2026, requisito Stripe CBD) ---------- */
.edad{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:1.25rem;background:rgba(44,28,17,.55)}
.edad.is-on{display:flex}
.edad__box{background:var(--ivory);max-width:30rem;width:100%;padding:clamp(1.5rem,4vw,2.5rem);box-shadow:0 20px 60px rgba(44,28,17,.25)}
.edad__t{font-family:var(--display);font-weight:400;font-size:clamp(1.75rem,4vw,2.25rem);line-height:1.1;margin-top:.5rem}
.edad__p{margin-top:.9rem;font-size:.9375rem;line-height:1.6;color:var(--ink-70)}
.edad__p a{text-decoration:underline;text-underline-offset:.2em}
.edad__b{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.edad__no{margin-top:1rem;font-size:.9375rem;color:#8a2b1d}
@media (max-width:640px){.edad__b .btn{width:100%}}