/* ============================================================
NUTAE by NUTRIVIVENCIA — mockup de tienda
Sistema heredado de nutrivivencia/web/assets/css/style.css
Lo nuevo: --olive (acento comercial, regla del 3%)
--paper (blanco puro detrás de foto de producto)
Compromiso deliberado: tema claro unico. La tienda real
no tiene modo oscuro; todos los colores se pintan explicitos.
============================================================ */
/* ---------- 1. Tokens ---------- */
:root{
/* Superficies — heredadas sin tocar */
--bone:#F8F7F2;
--cream:#FFFDF1;
--sand:#E9E7DA;
--sand-deep:#D3CFB4;
--clay:#8C7A6B;
--clay-deep:#5E5147;
/* Nuevas para comercio */
--paper:#FFFFFF;
--olive:#4A5A32;
--olive-hover:#3B491F;
--olive-soft:rgba(74,90,50,.09);
--olive-ink:#FFFDF1;
/* Señales */
--sale:#9C4A2F;
--ok:#4A5A32;
/* Tinta */
--ink:#2B2422;
--ink-70:rgba(43,36,34,.72);
--ink-50:rgba(43,36,34,.52);
--ink-30:rgba(43,36,34,.30);
--ink-12:rgba(43,36,34,.12);
--ink-06:rgba(43,36,34,.06);
/* Tipografia */
--serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
--sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
/* Ritmo */
--gut:clamp(1rem,3.5vw,2.5rem);
--sec:clamp(3rem,7vw,5.5rem);
--max:1360px;
--r:2px;
--ease:cubic-bezier(.22,.61,.36,1);
}
/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
margin:0;background:var(--bone);color:var(--ink);
font-family:var(--sans);font-size:16px;line-height:1.55;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
input,select{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px;border-radius:var(--r);}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important;}}
/* ---------- 3. Tipografia ---------- */
.display{font-family:var(--serif);font-weight:300;line-height:1.02;letter-spacing:-.012em;}
.d1{font-size:clamp(2.75rem,7vw,5rem);}
.d2{font-size:clamp(2rem,4.6vw,3.4rem);}
.d3{font-size:clamp(1.6rem,3.2vw,2.4rem);}
.eyebrow{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);}
.lead{font-family:var(--serif);font-weight:300;font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.32;color:var(--ink-70);}
.small{font-size:.875rem;line-height:1.6;color:var(--ink-70);}
.tiny{font-size:.8125rem;line-height:1.5;color:var(--ink-50);}
.num{font-variant-numeric:tabular-nums;}
/* ---------- 4. Layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);}
.wrap--narrow{max-width:1080px;}
.sec{padding:var(--sec) 0;}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(1.5rem,3vw,2.5rem);flex-wrap:wrap;}
.sec-head__t{display:flex;flex-direction:column;gap:.6rem;}
.rule{border:0;border-top:1px solid var(--ink-12);margin:0;}
/* ---------- 5. Botones ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
border-radius:999px;padding:.85rem 1.6rem;font-size:.9375rem;font-weight:500;
transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
text-align:center;
}
.btn--buy{background:var(--olive);color:var(--olive-ink);width:100%;}
.btn--buy:hover{background:var(--olive-hover);}
.btn--buy:disabled{opacity:.4;cursor:not-allowed;background:var(--olive);}
.btn--ghost{border:1px solid var(--sand-deep);color:var(--ink-70);}
/* Mismo botón que el de compra, sin relleno: el borde lleva el verde. */
.btn--line{box-shadow:inset 0 0 0 1px var(--olive);color:var(--olive);background:transparent;}
.btn--line:hover{background:var(--olive-soft);}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink);}
.btn--sm{padding:.6rem 1.1rem;font-size:.8125rem;}
.link{display:inline-flex;align-items:center;gap:.4rem;font-size:.875rem;font-weight:500;border-bottom:1px solid var(--ink-30);padding-bottom:2px;transition:border-color .2s;}
.link:hover{border-color:var(--ink);}
.link__arrow{font-family:var(--mono);font-size:.8em;}
/* ---------- 6. Header ---------- */
.announce{background:var(--ink);color:var(--cream);}
.announce__in{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.55rem var(--gut);font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;}
.hdr{position:sticky;top:0;z-index:60;background:var(--bone);border-bottom:1px solid var(--ink-12);}
.hdr__in{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);padding:.9rem var(--gut);max-width:var(--max);margin:0 auto;}
.brand{display:flex;align-items:baseline;gap:.45rem;flex:none;}
.brand__n{font-family:var(--serif);font-weight:300;font-size:1.75rem;line-height:1;letter-spacing:-.015em;}
.brand__logo{height:24px;width:auto;}
.brand__logo--lg{height:33px;}
.brand:has(.brand__logo){align-items:flex-end;}
@media (max-width:640px){.brand__logo{height:19px;}}
.brand__by{font-family:var(--mono);font-size:.5625rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-50);}
/* En un celular chico logo + firma + tres íconos no entran y el carrito se
iba de pantalla; la firma sigue en el footer. */
@media (max-width:440px){.hdr .brand__by{display:none;}}
/* Cuatro entradas fijas; las categorías (variables, las carga el panel) viven
en el desplegable de Tienda, así que el header no crece con ellas. */
.nav{display:flex;align-items:center;gap:clamp(.8rem,1.8vw,1.5rem);margin-left:.5rem;}
.nav a,.ndrop>summary{font-size:.875rem;color:var(--ink-70);padding:.25rem 0;white-space:nowrap;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}
.nav a:hover,.nav a.is-on,.ndrop>summary:hover,.ndrop>summary.is-on{color:var(--ink);border-color:var(--ink);}
.nav__ext span[aria-hidden]{font-size:.8em;margin-left:.25rem;color:var(--ink-50);}
.ndrop{position:relative;}
.ndrop>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.35rem;}
.ndrop>summary::-webkit-details-marker{display:none;}
.ndrop>summary::after{content:"";width:.4rem;height:.4rem;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-.15rem) rotate(45deg);transition:transform .2s;}
.ndrop[open]>summary::after{transform:translateY(.05rem) rotate(-135deg);}
.ndrop__panel{position:absolute;top:calc(100% + .9rem);left:-1.1rem;min-width:220px;display:flex;flex-direction:column;background:var(--bone);border:1px solid var(--ink-12);padding:.6rem 0;box-shadow:0 12px 28px -18px rgba(0,0,0,.35);}
.nav .ndrop__panel a{padding:.5rem 1.1rem;border-bottom:0;}
.nav .ndrop__panel a:hover{background:var(--ink-06);}
.nav .ndrop__panel a.is-on{color:var(--ink);font-weight:500;}
.nav .ndrop__panel a:first-child{border-bottom:1px solid var(--ink-12);margin-bottom:.35rem;padding-bottom:.7rem;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.hdr__tools{margin-left:auto;display:flex;align-items:center;gap:.4rem;}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:999px;transition:background .2s;}
.icon-btn:hover{background:var(--ink-06);}
.icon-btn svg{width:18px;height:18px;stroke:var(--ink);stroke-width:1.4;fill:none;stroke-linecap:round;}
/* Buscador del header: el panel cuelga del .hdr (sticky, y por eso posicionado) a todo el ancho */
.hsearch>summary{list-style:none;cursor:pointer;}
.hsearch>summary::-webkit-details-marker{display:none;}
.hsearch[open]>summary{background:var(--ink-06);}
.hsearch__panel{position:absolute;left:0;right:0;top:100%;background:var(--bone);border-bottom:1px solid var(--ink-12);padding:.9rem var(--gut);}
.hsearch__in{display:flex;gap:.6rem;max-width:720px;margin:0 auto;}
.hsearch__in input{flex:1;min-width:0;font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--sand-deep);border-radius:var(--r);padding:.65rem .9rem;}
.hsearch__in input:focus{outline:none;border-color:var(--ink);}
.hsearch__in .btn--buy{width:auto;flex:none;}
.cart-btn{position:relative;}
.cart-count{
position:absolute;top:4px;right:2px;min-width:17px;height:17px;padding:0 4px;
background:var(--olive);color:var(--olive-ink);border-radius:999px;
font-family:var(--mono);font-size:.5625rem;display:grid;place-items:center;line-height:1;
isolation:isolate;
}
.cart-count[data-empty="1"]{display:none;}
/* Latido: con productos en el carrito, un aro se expande desde el contador y se
apaga, para que se note sin tener que buscarlo. En reposo el aro es invisible,
así que con movimiento reducido queda solo el contador, sin nada a medio camino. */
.cart-count::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--olive);z-index:-1;opacity:0;pointer-events:none;}
.cart-count[data-empty="0"]::before{animation:latido 1.8s var(--ease) infinite;}
@keyframes latido{0%{transform:scale(1);opacity:.5;}70%,100%{transform:scale(2.3);opacity:0;}}
.burger{display:none;}
/* ---------- 7. Hero ---------- */
.hero{border-bottom:1px solid var(--ink-12);}
.hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(2.5rem,6vw,4.5rem) 0;}
.hero__copy{display:flex;flex-direction:column;gap:1.35rem;align-items:flex-start;}
.hero__actions{display:flex;gap:.75rem;flex-wrap:wrap;}
.hero__actions .btn--buy{width:auto;}
.hero__facts{display:flex;gap:1.75rem;flex-wrap:wrap;margin-top:.5rem;}
.hero__facts div{display:flex;flex-direction:column;gap:.15rem;}
.hero__facts b{font-size:.875rem;font-weight:500;}
.hero__card{background:var(--paper);border:1px solid var(--ink-12);padding:clamp(1.25rem,2.5vw,2rem);display:flex;flex-direction:column;gap:1rem;}
/* ---------- 8. Slot de foto de producto ---------- */
/* En produccion esto es ![]()
. El fondo es --paper porque el bone
tine el producto y el cliente necesita inspeccionarlo. */
.shot{position:relative;background:var(--paper);border:1px solid var(--ink-12);aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;}
.shot--wide{aspect-ratio:4/3;}
.shot__mark{width:46%;max-width:150px;aspect-ratio:1/1;opacity:.5;}
.shot__cap{position:absolute;left:.7rem;bottom:.6rem;font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-30);}
.shot__badge{position:absolute;top:.7rem;left:.7rem;font-family:var(--mono);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;padding:.28rem .5rem;border-radius:var(--r);background:var(--olive);color:var(--olive-ink);}
.shot__badge--soft{background:var(--sand);color:var(--ink-70);}
/* ---------- 9. Tarjeta de producto ---------- */
.pcard{display:flex;flex-direction:column;gap:.7rem;position:relative;}
.pcard__shot{position:relative;}
.pcard__quick{
position:absolute;left:.6rem;right:.6rem;bottom:.6rem;
background:var(--bone);color:var(--ink);border:1px solid var(--ink-12);
border-radius:999px;padding:.6rem;font-size:.8125rem;font-weight:500;
opacity:0;transform:translateY(6px);transition:opacity .2s var(--ease),transform .2s var(--ease),background .2s;
}
.pcard:hover .pcard__quick,.pcard__quick:focus-visible{opacity:1;transform:none;}
.pcard__quick:hover{background:var(--olive);color:var(--olive-ink);border-color:var(--olive);}
.pcard__cat{font-family:var(--mono);font-size:.5625rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-50);}
.pcard__name{font-family:var(--serif);font-size:1.3rem;font-weight:400;line-height:1.12;}
.pcard__name a:hover{border-bottom:1px solid var(--ink-30);}
.pcard__row{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin-top:auto;}
.pcard__price{font-size:1.0625rem;font-weight:600;}
.pcard__unit{font-family:var(--mono);font-size:.625rem;color:var(--ink-50);letter-spacing:.06em;}
.pcard__was{font-size:.8125rem;color:var(--ink-30);text-decoration:line-through;margin-right:.4rem;font-weight:400;}
.pcard--sale .pcard__price{color:var(--sale);}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(1.25rem,2.5vw,2.25rem) clamp(1rem,2vw,1.75rem);}
/* ---------- 10. Categorias ---------- */
/* Mosaico: la foto cubre la casilla y las dos categorías más grandes van al
doble de ancho. "dense" rellena los huecos que dejan las anchas. */
.cats{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(190px,21vw,270px);grid-auto-flow:dense;gap:1px;background:var(--ink-12);border:1px solid var(--ink-12);}
.cat{position:relative;overflow:hidden;background:var(--sand);padding:clamp(1.1rem,2.4vw,1.6rem);display:flex;flex-direction:column;gap:.35rem;transition:background .25s var(--ease);}
.cat:hover{background:var(--sand-deep);}
.cat--ancha{grid-column:span 2;}
.cat__mark{width:34px;height:34px;aspect-ratio:1/1;opacity:.65;}
.cat__n{position:relative;font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.75rem);font-weight:400;line-height:1.1;margin-top:auto;}
.cat--ancha .cat__n{font-size:clamp(1.6rem,3vw,2.4rem);}
.cat__c{position:relative;font-family:var(--mono);font-size:.625rem;color:var(--ink-50);letter-spacing:.08em;}
/* Con foto: degradé hacia abajo para que el texto se lea sobre cualquier imagen. */
.cat__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.001);transition:transform 1.6s cubic-bezier(.2,.5,.3,1);}
.cat--foto::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(43,36,34,.66) 0%,rgba(43,36,34,.28) 38%,rgba(43,36,34,0) 62%);pointer-events:none;}
.cat--foto .cat__n,.cat--foto .cat__c{z-index:1;color:var(--cream);}
.cat--foto .cat__c{color:rgba(255,253,241,.78);}
.cat--foto:hover .cat__img{transform:scale(1.07);}
/* ---------- 11. Caja de entrada (variety pack) ---------- */
.boxfeat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;background:var(--cream);border:1px solid var(--ink-12);padding:clamp(1.5rem,3.5vw,3rem);}
.boxfeat__copy{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start;}
.boxfeat__list{display:flex;flex-direction:column;gap:.55rem;width:100%;}
.boxfeat__li{display:flex;align-items:baseline;gap:.7rem;padding-bottom:.55rem;border-bottom:1px solid var(--ink-12);}
.boxfeat__li b{font-weight:500;font-size:.9375rem;}
.boxfeat__li span{margin-left:auto;font-family:var(--mono);font-size:.6875rem;color:var(--ink-50);}
.pricebar{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;}
.pricebar__now{font-size:1.6rem;font-weight:600;}
.pricebar__was{font-size:1rem;color:var(--ink-30);text-decoration:line-through;}
.pricebar__save{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;background:var(--olive-soft);color:var(--olive);padding:.28rem .55rem;border-radius:var(--r);}
/* ---------- 12. Origen / trazabilidad ---------- */
.origin{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(1.25rem,3vw,2.5rem);}
.origin__i{display:flex;flex-direction:column;gap:.5rem;padding-top:1rem;border-top:1px solid var(--ink);}
.origin__n{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;color:var(--ink-50);}
.origin__h{font-family:var(--serif);font-size:1.3rem;font-weight:400;line-height:1.15;}
/* ---------- 13. Suscripcion ---------- */
.subs{background:var(--ink);color:var(--cream);padding:clamp(1.75rem,4vw,3.25rem);display:grid;grid-template-columns:1fr auto;gap:clamp(1.5rem,4vw,3rem);align-items:center;}
.subs .eyebrow{color:rgba(255,253,241,.55);}
.subs__h{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.08;margin:.6rem 0 .8rem;}
.subs__p{color:rgba(255,253,241,.75);font-size:.9375rem;max-width:48ch;}
.subs__btn{background:var(--cream);color:var(--ink);border-radius:999px;padding:.85rem 1.7rem;font-size:.9375rem;font-weight:500;white-space:nowrap;transition:opacity .2s;}
.subs__btn:hover{opacity:.85;}
/* ---------- 14. Catalogo: filtros ---------- */
.shop{display:grid;grid-template-columns:230px 1fr;gap:clamp(1.5rem,3.5vw,3rem);align-items:start;}
.filters{position:sticky;top:96px;display:flex;flex-direction:column;gap:1.5rem;}
.fgroup{display:flex;flex-direction:column;gap:.6rem;padding-bottom:1.25rem;border-bottom:1px solid var(--ink-12);}
.fopt{display:flex;align-items:center;gap:.6rem;font-size:.875rem;color:var(--ink-70);cursor:pointer;}
.fopt input{appearance:none;width:15px;height:15px;border:1px solid var(--sand-deep);border-radius:var(--r);flex:none;transition:background .18s,border-color .18s;}
.fopt input:checked{background:var(--olive);border-color:var(--olive);}
/* En las categorías el cuadro es solo dibujo: el filtro es el enlace. Si el
clic lo tomara el checkbox, se tildaría sin navegar. */
a.fopt input{pointer-events:none;}
.fopt input:checked+span{color:var(--ink);}
.fopt em{margin-left:auto;font-family:var(--mono);font-size:.625rem;color:var(--ink-30);font-style:normal;}
.shop__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1rem;margin-bottom:1.5rem;border-bottom:1px solid var(--ink-12);flex-wrap:wrap;}
.sortsel{border:1px solid var(--sand-deep);border-radius:999px;padding:.5rem 1rem;font-size:.8125rem;background:transparent;cursor:pointer;}
.sortform{display:flex;align-items:center;gap:.5rem;margin:0;}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;}
.chip-f{font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px;background:var(--sand);color:var(--ink-70);display:inline-flex;gap:.4rem;align-items:center;}
.chip-f button{color:var(--ink-50);font-size:.875rem;line-height:1;}
/* ---------- 15. Ficha de producto ---------- */
.pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,4rem);align-items:start;}
.pdp__gal{display:flex;flex-direction:column;gap:.6rem;position:sticky;top:96px;}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;}
.thumb{background:var(--paper);border:1px solid var(--ink-12);aspect-ratio:1/1;display:grid;place-items:center;transition:border-color .2s;}
.thumb.is-on{border-color:var(--ink);}
.thumb svg{width:44%;aspect-ratio:1/1;opacity:.4;}
.crumbs{display:flex;gap:.5rem;align-items:center;font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-50);margin-bottom:1.25rem;}
.pdp__info{display:flex;flex-direction:column;gap:1.15rem;transition:opacity .15s var(--ease);}
.pdp__info[aria-busy="true"]{opacity:.65;}
.pdp__name{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,2.9rem);line-height:1.04;}
.pdp__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-top:.5rem;}
.share{position:relative;flex:none;display:grid;place-items:center;width:42px;height:42px;margin-top:.2rem;border:1px solid var(--sand-deep);border-radius:50%;color:var(--ink-70);transition:border-color .2s,color .2s;}
.share:hover,.share:focus-visible{border-color:var(--ink);color:var(--ink);}
.share svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;}
.share__ok{position:absolute;top:calc(100% + .4rem);right:0;white-space:nowrap;font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--olive);pointer-events:none;}
.pdp__price{display:flex;align-items:baseline;gap:.6rem;}
.pdp__price b{font-size:1.6rem;font-weight:600;}
.pdp__price{flex-wrap:wrap;}
.pdp__price--sale b{color:var(--olive);}
.pdp__was{font-size:1rem;color:var(--ink-30);font-weight:400;}
.pdp__off{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;padding:.28rem .5rem;border-radius:var(--r);
background:rgba(156,74,47,.09);color:var(--sale);align-self:center;}
.opts{display:flex;flex-direction:column;gap:.55rem;}
.opts__row{display:flex;gap:.5rem;flex-wrap:wrap;}
.opt{border:1px solid var(--sand-deep);border-radius:999px;padding:.55rem 1.1rem;font-size:.8125rem;color:var(--ink-70);transition:border-color .2s,background .2s,color .2s;}
.opt:hover{border-color:var(--ink-50);}
.opt.is-on{background:var(--ink);border-color:var(--ink);color:var(--cream);}
.opt[disabled]{opacity:.35;cursor:not-allowed;text-decoration:line-through;}
.buyrow{display:flex;gap:.6rem;align-items:stretch;}
.qty{display:flex;align-items:center;border:1px solid var(--sand-deep);border-radius:999px;overflow:hidden;flex:none;}
.qty button{width:38px;height:100%;font-size:1rem;color:var(--ink-70);transition:background .2s;}
.qty button:hover{background:var(--ink-06);}
.qty span{width:34px;text-align:center;font-size:.9375rem;font-variant-numeric:tabular-nums;}
.qty input{width:64px;padding:.55rem .4rem;text-align:center;font-size:.9375rem;
font-variant-numeric:tabular-nums;background:transparent;border:0;color:var(--ink);}
.qty input:focus{outline:none;}
.buymode{display:flex;flex-direction:column;gap:.5rem;}
.bmode{display:flex;align-items:flex-start;gap:.7rem;border:1px solid var(--sand-deep);border-radius:var(--r);padding:.85rem 1rem;cursor:pointer;transition:border-color .2s,background .2s;}
.bmode.is-on{border-color:var(--olive);background:var(--olive-soft);}
.bmode input{appearance:none;width:15px;height:15px;border:1px solid var(--sand-deep);border-radius:999px;flex:none;margin-top:.2rem;transition:border-width .18s,border-color .18s;}
.bmode.is-on input{border:4px solid var(--olive);}
.bmode__t{display:flex;flex-direction:column;gap:.15rem;width:100%;}
.bmode__h{display:flex;justify-content:space-between;gap:.75rem;font-size:.9375rem;font-weight:500;}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;padding:1.1rem 0;border-top:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12);}
.trust div{display:flex;flex-direction:column;gap:.15rem;}
.trust b{font-size:.8125rem;font-weight:500;}
.acc__i{border-bottom:1px solid var(--ink-12);}
.acc__b{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;text-align:left;font-size:.9375rem;font-weight:500;}
.acc__b::after{content:"+";font-family:var(--mono);font-size:1.05rem;color:var(--ink-50);flex:none;}
.acc__i.is-open .acc__b::after{content:"–";}
.acc__p{display:none;padding-bottom:1.1rem;}
.acc__i.is-open .acc__p{display:block;}
.nut{width:100%;border-collapse:collapse;font-size:.8125rem;}
.nut th,.nut td{text-align:left;padding:.45rem 0;border-bottom:1px solid var(--ink-06);}
.nut td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:.75rem;}
.nut th{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50);font-weight:400;}
/* ---------- 16. Carrito (drawer) ---------- */
.scrim{position:fixed;inset:0;background:rgba(43,36,34,.4);opacity:0;pointer-events:none;transition:opacity .3s var(--ease);z-index:80;}
.scrim.is-on{opacity:1;pointer-events:auto;}
.drawer{
position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:90;
background:var(--bone);border-left:1px solid var(--ink-12);
transform:translateX(100%);transition:transform .34s var(--ease);
display:flex;flex-direction:column;
}
.drawer.is-on{transform:none;}
.drawer__hd{display:flex;align-items:center;justify-content:space-between;padding:1.15rem var(--gut);border-bottom:1px solid var(--ink-12);flex:none;}
.drawer__bd{flex:1;overflow-y:auto;padding:1.15rem var(--gut);display:flex;flex-direction:column;gap:1.1rem;}
.drawer__ft{flex:none;padding:1.15rem var(--gut);border-top:1px solid var(--ink-12);display:flex;flex-direction:column;gap:.85rem;background:var(--cream);}
.citem{display:grid;grid-template-columns:64px 1fr;gap:.9rem;padding-bottom:1.1rem;border-bottom:1px solid var(--ink-12);}
.citem__s{background:var(--paper);border:1px solid var(--ink-12);aspect-ratio:1/1;display:grid;place-items:center;}
.citem__s svg{width:52%;aspect-ratio:1/1;opacity:.45;}
.citem__b{display:flex;flex-direction:column;gap:.3rem;}
.citem__n{font-family:var(--serif);font-size:1.05rem;line-height:1.15;}
.citem__r{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.2rem;}
.citem__q{display:flex;align-items:center;gap:.5rem;border:1px solid var(--sand-deep);border-radius:999px;padding:.15rem .3rem;}
.citem__q button{width:22px;height:22px;font-size:.875rem;color:var(--ink-50);}
.citem__q span{font-size:.8125rem;min-width:16px;text-align:center;font-variant-numeric:tabular-nums;}
.citem__p{font-size:.9375rem;font-weight:600;font-variant-numeric:tabular-nums;}
.sumrow{display:flex;justify-content:space-between;gap:1rem;font-size:.875rem;}
.sumrow--tot{font-size:1.05rem;font-weight:600;padding-top:.6rem;border-top:1px solid var(--ink-12);}
.empty{display:flex;flex-direction:column;gap:.8rem;align-items:flex-start;padding-top:2rem;}
.ship-bar{height:3px;background:var(--sand);border-radius:999px;overflow:hidden;}
.ship-bar i{display:block;height:100%;background:var(--olive);transition:width .35s var(--ease);}
/* ---------- 17. Barra de compra movil (sticky) ---------- */
.mbuy{
position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
background:var(--bone);border-top:1px solid var(--ink-12);
padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
gap:.75rem;align-items:center;
}
.mbuy__p{display:flex;flex-direction:column;line-height:1.15;}
.mbuy__p b{font-size:1rem;font-weight:600;}
.mbuy .btn--buy{width:auto;flex:1;}
/* ---------- 17b. Barra flotante del carrito ---------- */
.cartbar{
position:fixed;left:0;right:0;bottom:0;z-index:70;
background:var(--cream);border-top:1px solid var(--ink-12);
box-shadow:0 -6px 24px rgba(43,36,34,.08);
padding:.7rem 0 calc(.7rem + env(safe-area-inset-bottom));
}
.cartbar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.cartbar__info{display:flex;align-items:center;gap:.75rem;min-width:0;color:var(--ink);}
.cartbar__ico{position:relative;display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:999px;background:var(--olive-soft);}
.cartbar__ico svg{width:20px;height:20px;fill:none;stroke:var(--olive);stroke-width:1.6;stroke-linejoin:round;}
.cartbar__ico b{position:absolute;top:-4px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
background:var(--olive);color:var(--olive-ink);font-size:.6875rem;font-weight:600;display:grid;place-items:center;font-variant-numeric:tabular-nums;}
.cartbar__txt{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.cartbar__txt b{font-weight:600;font-size:.9375rem;}
.cartbar__txt span{font-size:.8125rem;color:var(--ink-50);}
.cartbar__acc{display:flex;gap:.5rem;flex:none;}
.cartbar__acc .btn--buy{width:auto;}
.cartbar.is-nueva{animation:cartbar-sube .35s var(--ease) both;}
.cartbar.is-nueva .cartbar__ico{animation:cartbar-late .7s var(--ease) .35s 2;}
body.con-cartbar{padding-bottom:calc(76px + env(safe-area-inset-bottom));}
@keyframes cartbar-sube{from{transform:translateY(100%);}to{transform:none;}}
@keyframes cartbar-late{0%,100%{transform:scale(1);}40%{transform:scale(1.18);}}
@media (max-width:560px){
.cartbar__txt span{display:none;}
.cartbar__acc .btn--sm{padding:.6rem .9rem;}
}
/* ---------- 18. Footer ---------- */
.ftr{background:var(--sand);border-top:1px solid var(--ink-12);padding:clamp(2.5rem,5vw,4rem) 0 2rem;}
.ftr__in{display:grid;grid-template-columns:1.4fr repeat(2,1fr);gap:clamp(1.5rem,3vw,2.5rem);}
.ftr__manifesto{font-family:var(--serif);font-weight:300;font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.25;max-width:24ch;}
.ftr__col{display:flex;flex-direction:column;gap:.55rem;}
.ftr__col a{font-size:.875rem;color:var(--ink-70);}
.ftr__col a:hover{color:var(--ink);}
.ftr__bot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:clamp(2rem,4vw,3rem);padding-top:1.25rem;border-top:1px solid var(--ink-12);}
/* ---------- 20. Responsive ---------- */
@media (max-width:1000px){
.shop{grid-template-columns:1fr;}
.filters{position:static;flex-direction:row;flex-wrap:wrap;gap:1rem;}
.fgroup{flex:1;min-width:180px;border-bottom:0;padding-bottom:0;}
.pdp{grid-template-columns:1fr;}
.pdp__gal{position:static;}
}
@media (max-width:840px){
.hero__in,.boxfeat{grid-template-columns:1fr;}
.subs{grid-template-columns:1fr;}
/* El mismo