:root{
  --cream:#FBF5EA;
  --paper:#FFFDF8;
  --ink:#2B1E1A;
  --muted:#6F6058;
  --line:#E7DCC8;
  --terra:#B4472B;
  --terra-d:#8E3420;
  --indigo:#22305A;
  --indigo-d:#161F3D;
  --gold:#C99A3B;
  --leaf:#3F6B52;
  --wa:#1FA855;
  --radius:18px;
  --shadow:0 10px 30px -12px rgba(43,30,26,.25);
  --serif:'Fraunces',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{width:min(1160px,100% - 32px);margin-inline:auto}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.9rem 1.5rem;border-radius:999px;font-weight:700;font-size:1rem;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 8px 20px -8px rgba(31,168,85,.7)}
.btn-wa:hover{background:#178a46}
.btn-terra{background:var(--terra);color:#fff;box-shadow:0 8px 20px -8px rgba(180,71,43,.7)}
.btn-terra:hover{background:var(--terra-d)}
.btn-ghost{border:1.5px solid rgba(251,245,234,.55);color:var(--cream)}
.btn-ghost:hover{background:rgba(251,245,234,.12)}
.btn svg{width:20px;height:20px;fill:currentColor}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(251,245,234,.88);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.nav.scrolled{border-color:var(--line);box-shadow:0 6px 20px -14px rgba(43,30,26,.4)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:1rem}
.logo{display:flex;align-items:center;gap:.6rem;font-family:var(--serif);font-weight:600;font-size:1.6rem;letter-spacing:-.01em}
.logo i{font-style:italic;color:var(--terra)}
.logo .mark{width:34px;height:34px;color:var(--terra)}
.nav ul{display:flex;gap:2rem;list-style:none;font-weight:500;font-size:.95rem}
.nav ul a{position:relative;padding:.3rem 0}
.nav ul a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--terra);transition:width .25s}
.nav ul a:hover::after{width:100%}
.nav .btn{padding:.6rem 1.15rem;font-size:.92rem}
@media(max-width:760px){.nav ul{display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--indigo);color:var(--cream);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 45%,rgba(201,154,59,.22),transparent 55%),radial-gradient(circle at 0% 100%,rgba(180,71,43,.35),transparent 50%);z-index:-1}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:2rem;padding-block:clamp(3rem,8vw,6.5rem)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.eyebrow::before{content:"";width:34px;height:2px;background:currentColor}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.5rem,6.2vw,4.8rem);line-height:1.04;letter-spacing:-.02em;margin:1.1rem 0 1.3rem}
.hero h1 em{font-style:italic;color:#F2C469;font-weight:400}
.hero p.lead{font-size:clamp(1.05rem,2vw,1.25rem);color:rgba(251,245,234,.82);max-width:34em}
.hero .cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hero-facts{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid rgba(251,245,234,.18)}
.hero-facts b{display:block;font-family:var(--serif);font-size:1.7rem;color:#F2C469;line-height:1.1}
.hero-facts span{font-size:.85rem;color:rgba(251,245,234,.7)}
.hero-art{position:relative;aspect-ratio:1;display:grid;place-items:center}
.hero-art .rosette-big{position:absolute;inset:0;color:rgba(242,196,105,.55);animation:spin 120s linear infinite}
.hero-art .rosette-big.b{inset:12%;color:rgba(251,245,234,.35);animation-direction:reverse;animation-duration:90s}
.hero-card{position:relative;background:var(--paper);color:var(--ink);border-radius:var(--radius);padding:1.3rem 1.5rem;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);width:min(280px,68%);transform:rotate(-3deg)}
.hero-card small{display:block;color:var(--muted);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.hero-card strong{display:block;font-family:var(--serif);font-size:2rem;line-height:1.1;margin:.25rem 0}
.hero-card strong span{font-size:1rem;font-weight:400;color:var(--muted)}
.hero-card p{font-size:.9rem;color:var(--muted)}
.hero-card .tag{position:absolute;top:-14px;right:16px;background:var(--terra);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .8rem;border-radius:999px}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-art{max-width:380px;margin:0 auto;order:-1;width:80%}
}

/* ---------- Marquee ---------- */
.marquee{background:var(--terra);color:var(--cream);overflow:hidden;white-space:nowrap;padding:.85rem 0;font-family:var(--serif);font-style:italic;font-size:1.25rem}
.marquee-track{display:inline-flex;gap:2.2rem;animation:slide 38s linear infinite}
.marquee span::after{content:"✦";margin-left:2.2rem;color:var(--gold);font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Secciones ---------- */
section{padding-block:clamp(3.5rem,8vw,6rem)}
.sec-head{max-width:40rem;margin-bottom:2.4rem}
.sec-head .eyebrow{color:var(--terra)}
.sec-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.5vw,3.1rem);line-height:1.1;letter-spacing:-.015em;margin:.8rem 0 .7rem}
.sec-head h2 em{font-style:italic;color:var(--terra);font-weight:400}
.sec-head p{color:var(--muted);font-size:1.08rem}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem}
.tab{padding:.55rem 1.15rem;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);font-weight:500;font-size:.95rem;transition:all .2s}
.tab:hover{border-color:var(--terra)}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}

/* ---------- Productos ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.4rem}
.card{background:var(--paper);border-radius:var(--radius);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card .media{position:relative;aspect-ratio:1/.82;display:grid;place-items:center;overflow:hidden}
.card .media img{width:100%;height:100%;object-fit:cover}
.card .media svg.r{width:78%;transition:transform .8s}
.card:hover .media svg.r{transform:rotate(25deg) scale(1.05)}
.card .media .soon{position:absolute;left:12px;bottom:10px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.65}
.card .badge{position:absolute;top:12px;left:12px;background:var(--ink);color:var(--cream);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px}
.card .body{padding:1.2rem 1.3rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card .cat{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--terra)}
.card h3{font-family:var(--serif);font-size:1.28rem;line-height:1.2;font-weight:600}
.card p{font-size:.92rem;color:var(--muted);flex:1}
.card .foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.5rem}
.price{font-family:var(--serif);font-size:1.45rem;font-weight:600}
.price small{font-family:var(--sans);font-size:.8rem;font-weight:500;color:var(--muted)}
.add{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.05rem;border-radius:999px;background:var(--indigo);color:#fff;font-weight:700;font-size:.9rem;transition:background .2s,transform .15s}
.add:hover{background:var(--terra)}
.add:active{transform:scale(.95)}
.add.added{background:var(--leaf)}

/* ---------- Pasos ---------- */
.steps-sec{background:var(--paper);border-block:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;counter-reset:s}
.step{position:relative;padding:1.8rem 1.6rem;border-radius:var(--radius);background:var(--cream);border:1px solid var(--line)}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--serif);font-size:3.2rem;font-style:italic;color:var(--gold);line-height:1;display:block;margin-bottom:.6rem}
.step h3{font-family:var(--serif);font-size:1.3rem;margin-bottom:.35rem}
.step p{color:var(--muted);font-size:.97rem}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* ---------- Valores ---------- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.val .ico{width:56px;height:56px;border-radius:16px;background:var(--indigo);color:#F2C469;display:grid;place-items:center;margin-bottom:1rem}
.val .ico svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.val h3{font-family:var(--serif);font-size:1.3rem;margin-bottom:.3rem}
.val p{color:var(--muted)}
@media(max-width:760px){.values{grid-template-columns:1fr}}

/* ---------- CTA final ---------- */
.final{background:var(--indigo-d);color:var(--cream);position:relative;overflow:hidden;isolation:isolate;text-align:center}
.final .rosette-bg{position:absolute;left:50%;top:50%;width:min(900px,160vw);transform:translate(-50%,-50%);color:rgba(242,196,105,.14);z-index:-1;animation:spin 200s linear infinite}
.final h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;max-width:18em;margin:0 auto 1rem}
.final h2 em{font-style:italic;color:#F2C469;font-weight:400}
.final p{color:rgba(251,245,234,.78);max-width:32em;margin:0 auto 2rem;font-size:1.1rem}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:rgba(251,245,234,.75);padding-block:3rem 5.5rem;font-size:.95rem}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
footer .logo{color:var(--cream);margin-bottom:.6rem}
footer h4{color:var(--cream);font-family:var(--serif);font-size:1.1rem;margin-bottom:.6rem}
footer a:hover{color:#F2C469}
footer li{list-style:none;margin-bottom:.35rem}
footer .copy{border-top:1px solid rgba(251,245,234,.14);padding-top:1.3rem;font-size:.85rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem}
@media(max-width:760px){footer .cols{grid-template-columns:1fr}}

/* ---------- Barra del pedido + drawer ---------- */
.cartbar{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);z-index:60;display:flex;align-items:center;gap:1rem;background:var(--ink);color:var(--cream);padding:.55rem .6rem .55rem 1.3rem;border-radius:999px;box-shadow:0 18px 40px -10px rgba(0,0,0,.55);transition:transform .45s cubic-bezier(.2,.9,.3,1.2);max-width:calc(100% - 24px)}
.cartbar.show{transform:translate(-50%,0)}
.cartbar b{font-family:var(--serif);font-size:1.1rem;color:#F2C469}
.cartbar span{font-size:.95rem}
.cartbar .btn{padding:.6rem 1.2rem;font-size:.92rem}
.fab{position:fixed;right:18px;bottom:18px;z-index:55;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px -8px rgba(31,168,85,.8);transition:transform .2s,opacity .3s}
.fab:hover{transform:scale(1.08)}
.fab svg{width:30px;height:30px;fill:#fff}
body.has-cart .fab{opacity:0;pointer-events:none}

.overlay{position:fixed;inset:0;background:rgba(22,31,61,.55);backdrop-filter:blur(3px);z-index:70;opacity:0;pointer-events:none;transition:opacity .3s}
.overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,100%);background:var(--paper);z-index:80;transform:translateX(105%);transition:transform .4s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:-20px 0 50px -20px rgba(0,0,0,.5)}
.drawer.open{transform:none}
.drawer header{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.4rem;border-bottom:1px solid var(--line)}
.drawer header h3{font-family:var(--serif);font-size:1.5rem}
.drawer .x{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;line-height:1;background:var(--cream)}
.drawer .x:hover{background:var(--line)}
.lines{flex:1;overflow:auto;padding:1rem 1.4rem}
.empty{text-align:center;color:var(--muted);padding:3rem 1rem}
.line{display:grid;grid-template-columns:1fr auto;gap:.3rem .8rem;padding:.9rem 0;border-bottom:1px dashed var(--line)}
.line h4{font-family:var(--serif);font-size:1.02rem;font-weight:600;line-height:1.25}
.line .sub{color:var(--muted);font-size:.85rem}
.line .tot{font-weight:700;text-align:right}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;margin-top:.35rem}
.qty button{width:32px;height:32px;font-size:1.15rem;border-radius:50%}
.qty button:hover{background:var(--cream)}
.qty span{min-width:26px;text-align:center;font-weight:700}
.drawer footer{background:var(--cream);color:var(--ink);padding:1.1rem 1.4rem 1.3rem;border-top:1px solid var(--line);font-size:1rem}
.drawer .field{display:block;margin-bottom:.7rem}
.drawer label{display:block;font-size:.8rem;font-weight:700;margin-bottom:.25rem;color:var(--muted)}
.drawer input.err{border-color:#d33;box-shadow:0 0 0 3px rgba(211,51,51,.15)}
.drawer select{width:100%;padding:.7rem .85rem;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);font:inherit;color:var(--ink)}
.drawer input,.drawer textarea{width:100%;padding:.7rem .85rem;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);font:inherit;color:var(--ink)}
.drawer textarea{resize:vertical;min-height:62px}
.drawer input:focus,.drawer textarea:focus{outline:none;border-color:var(--terra)}
.total-row{display:flex;justify-content:space-between;align-items:baseline;margin:.4rem 0 .9rem}
.total-row b{font-family:var(--serif);font-size:1.7rem}
.drawer .btn{width:100%}
.hint{font-size:.78rem;color:var(--muted);text-align:center;margin-top:.6rem}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- Agregados v2 (editable) ---------- */
.aviso{background:var(--gold);color:var(--ink);text-align:center;font-weight:700;font-size:.92rem;padding:.55rem 1rem}
.logo img.logo-img{height:38px;width:auto;border-radius:6px}
.logo small{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:-4px}
.hero-photo{position:absolute;inset:17%;border-radius:50%;overflow:hidden;border:5px solid rgba(242,196,105,.7);box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-card small{font-size:.74rem}
.hero-art.has-photo .hero-card{position:absolute;bottom:2%;right:-2%;width:min(240px,58%);z-index:2}
.card .media{cursor:default}
.card .media.zoom{cursor:zoom-in}
.card .media .more{position:absolute;right:10px;bottom:10px;background:rgba(43,30,26,.78);color:#fff;font-size:.74rem;font-weight:700;padding:.25rem .65rem;border-radius:999px}
.card.sold .media img,.card.sold .media>div{filter:grayscale(.7);opacity:.7}
.card .badge.sold{background:#7a2a2a}
.add.consult{background:var(--paper);color:var(--ink);border:1.5px solid var(--ink)}
.add.consult:hover{background:var(--ink);color:#fff}
.story .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center}
.story .ph{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--line)}
.story .ph img{width:100%;height:100%;object-fit:cover}
.story.nophoto .wrap{grid-template-columns:1fr;max-width:46rem;text-align:center}
.story h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.5vw,3rem);line-height:1.1;margin:.8rem 0 1rem}
.story p{color:var(--muted);font-size:1.12rem;white-space:pre-line}
@media(max-width:760px){.story .wrap{grid-template-columns:1fr}}
.social{display:flex;gap:.6rem;margin-top:.8rem}
.social a{padding:.35rem .9rem;border:1px solid rgba(251,245,234,.3);border-radius:999px;font-size:.85rem}
.social a:hover{background:rgba(251,245,234,.12)}
.lb{position:fixed;inset:0;z-index:90;background:rgba(22,31,61,.92);display:none;align-items:center;justify-content:center;padding:1rem}
.lb.open{display:flex}
.lb-box{max-width:min(920px,100%);width:100%;display:grid;gap:1rem;justify-items:center}
.lb img{max-height:68vh;max-width:100%;border-radius:14px;object-fit:contain;background:#fff}
.lb .cap{color:var(--cream);text-align:center;max-width:34rem}
.lb .cap b{display:block;font-family:var(--serif);font-size:1.3rem}
.lb .cap span{color:rgba(251,245,234,.75);font-size:.95rem}
.lb .nav-b{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(251,245,234,.16);color:#fff;font-size:1.6rem}
.lb .nav-b:hover{background:rgba(251,245,234,.3)}
.lb .prev{left:12px}.lb .next{right:12px}
.lb .close{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;background:rgba(251,245,234,.16);color:#fff;font-size:1.6rem}
.lb .dots{display:flex;gap:.4rem}
.lb .dots i{width:8px;height:8px;border-radius:50%;background:rgba(251,245,234,.35)}
.lb .dots i.on{background:#F2C469}
.hide{display:none!important}

/* =====================================================================
   Responsive v3 — celulares, tablets y pantallas grandes
   ===================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:320px}

/* Barra "Mi pedido": ancho propio (antes quedaba atrapada en el 50% de la pantalla y el texto se partía) */
.cartbar{left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100% - 24px);
  transform:translateY(170%);bottom:calc(14px + env(safe-area-inset-bottom));gap:.7rem;white-space:nowrap;padding:.45rem .5rem .45rem 1.1rem}
.cartbar.show{transform:none}
.cartbar span{font-size:.92rem}
.cartbar .btn{flex:none;padding:.6rem 1.1rem;font-size:.9rem}
.fab{bottom:calc(18px + env(safe-area-inset-bottom));right:calc(16px + env(safe-area-inset-right))}
footer{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}

/* Descripciones largas: 4 líneas + "Ver más" */
.card p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.card.open p{-webkit-line-clamp:unset;display:block}
.readmore{align-self:flex-start;font-size:.8rem;font-weight:700;color:var(--terra);padding:.1rem 0;min-height:28px}
.readmore:hover{text-decoration:underline}
.card .foot{margin-top:auto}

/* Categorías: una sola fila deslizable en vez de apilarse */
@media (max-width:760px){
  .tabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding-inline:16px;padding-bottom:.4rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;min-height:42px}
}

/* Tablet y celular grande */
@media (max-width:860px){
  .hero .wrap{padding-block:2.2rem 3rem;gap:1.8rem}
  .hero-art{order:0;max-width:340px;width:72%;margin-inline:auto}
  .hero-card{width:min(250px,74%)}
}

/* Celulares */
@media (max-width:560px){
  .wrap{width:min(1160px,100% - 28px)}
  section{padding-block:2.8rem}
  .nav .wrap{height:60px}
  .logo{font-size:1.3rem;gap:.45rem;min-width:0}
  .logo .mark{width:28px;height:28px;flex:none}
  .logo img.logo-img{height:32px}
  .logo small{display:none}
  .nav .btn{padding:.5rem .95rem;font-size:.88rem}
  .aviso{font-size:.84rem;padding:.5rem .8rem}

  .eyebrow{font-size:.72rem;letter-spacing:.13em;gap:.5rem}
  .eyebrow::before{width:22px}
  .hero h1{font-size:clamp(2.05rem,9.4vw,2.7rem);margin:.9rem 0 1rem}
  .hero p.lead{font-size:1rem}
  .hero .cta{gap:.6rem;margin-top:1.4rem}
  .hero .cta .btn{flex:1 1 auto;padding:.8rem 1rem;font-size:.95rem}
  .hero-facts{gap:1rem 1.6rem;margin-top:1.6rem;padding-top:1.2rem}
  .hero-facts b{font-size:1.25rem}
  .hero-facts span{font-size:.78rem}
  .hero-art{max-width:300px;width:78%}
  .hero-card{padding:1rem 1.1rem;width:min(230px,78%)}
  .hero-card strong{font-size:1.6rem}
  .hero-art.has-photo .hero-card{bottom:-6%;right:-4%;width:60%}
  .marquee{font-size:1.05rem;padding:.65rem 0}

  .sec-head{margin-bottom:1.6rem}
  .sec-head h2{font-size:clamp(1.7rem,7.5vw,2.2rem)}
  .sec-head p{font-size:1rem}

  /* Catálogo en 2 columnas */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .card{border-radius:14px}
  .card .media{aspect-ratio:1/1}
  .card .media .soon{font-size:.58rem;left:8px;bottom:6px}
  .card .media .more{font-size:.66rem;right:6px;bottom:6px;padding:.15rem .5rem}
  .card .badge{font-size:.58rem;top:8px;left:8px;padding:.2rem .5rem}
  .card .body{padding:.75rem .75rem .85rem;gap:.3rem}
  .card .cat{font-size:.6rem;letter-spacing:.1em}
  .card h3{font-size:1rem;line-height:1.2}
  .card p{font-size:.8rem;line-height:1.45}
  .card .foot{flex-direction:column;align-items:stretch;gap:.5rem}
  .price{font-size:1.15rem}
  .price small{font-size:.7rem}
  .add{justify-content:center;min-height:44px;padding:.55rem .5rem;font-size:.9rem}

  .step{padding:1.3rem 1.2rem}
  .step::before{font-size:2.6rem}
  .values{gap:1.5rem}
  .final h2{font-size:clamp(1.75rem,8vw,2.4rem)}
  .final p{font-size:1rem}
  footer{padding-block:2.2rem}
  footer .cols{gap:1.4rem}
  .story .wrap{gap:1.6rem}

  /* Panel del pedido */
  .drawer{width:100%}
  .drawer header{padding:1rem 1.1rem}
  .lines{padding:.6rem 1.1rem}
  .drawer footer{padding:.9rem 1.1rem calc(1rem + env(safe-area-inset-bottom))}
  .qty button{width:38px;height:38px}
  .drawer input,.drawer select,.drawer textarea{font-size:16px}  /* evita el zoom automático en iPhone */
  .lb img{max-height:60vh}
  .lb .nav-b{width:42px;height:42px}
}

/* Celulares muy angostos (320–360 px) */
@media (max-width:360px){
  .logo{font-size:1.15rem}
  .hero h1{font-size:2rem}
  .card h3{font-size:.95rem}
  .card .body{padding:.65rem .6rem .75rem}
  .cartbar span{font-size:.85rem}
}

/* Pantallas grandes */
@media (min-width:1500px){
  .wrap{width:min(1280px,100% - 64px)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
}
/* Celular acostado: la portada no necesita tanto alto */
@media (max-height:480px) and (orientation:landscape){
  .hero .wrap{padding-block:1.5rem}
  .hero-art{max-width:220px}
}

/* Logo con fondo claro: se integra con la barra (sin "cajita") */
.logo img.logo-img{mix-blend-mode:multiply;background:transparent}
@media (max-width:560px){
  .hero-facts>div:nth-child(3){display:none}   /* 2 datos en una sola fila */
}

/* Ajustes finos de la revisión en celulares */
@media (max-width:760px){
  .tabs{margin-inline:-14px;padding-inline:14px}   /* igual al margen lateral del contenido: sin desborde */
}
.nav .btn{min-height:44px}

/* ---------- Ofertas + botón "Pedir ya" ---------- */
.badge.sale{background:var(--terra)}
.tab-sale{border-color:var(--terra);color:var(--terra);font-weight:700}
.tab-sale[aria-selected="true"]{background:var(--terra);border-color:var(--terra);color:#fff}
.pricebox{display:flex;flex-direction:column;line-height:1.1}
.pricebox .old{font-size:.82rem;color:var(--muted);text-decoration:line-through;text-decoration-thickness:1.5px}
.price.sale{color:var(--terra)}
.btns{display:flex;gap:.4rem;align-items:stretch}
.btns .add{flex:1}
.quick{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-width:44px;min-height:44px;padding:0 .8rem;border-radius:999px;background:var(--wa);color:#fff;font-weight:700;font-size:.9rem;transition:background .2s,transform .15s}
.quick:hover{background:#178a46}
.quick:active{transform:scale(.95)}
.quick svg{width:20px;height:20px;fill:#fff;flex:none}
.line .sub s{color:var(--muted)}
@media (max-width:560px){
  .btns{width:100%}
  .quick{padding:0;width:44px}
  .quick .q-t{display:none}
  .pricebox{min-height:2.6rem;justify-content:flex-end}
}

/* =====================================================================
   Carrito y pedido v4 — como una tienda: carrito con contador, datos del
   cliente, confirmación que registra el pedido y pantalla "Pedido recibido"
   ===================================================================== */
.nav .wrap{gap:.6rem}
.cart-btn{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);flex:none;transition:transform .15s,border-color .2s}
.cart-btn:hover{border-color:var(--ink)}
.cart-btn svg{width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cart-btn .cnt{position:absolute;top:-6px;right:-6px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:var(--terra);color:#fff;font-size:.74rem;font-weight:700;display:grid;place-items:center;border:2px solid var(--cream)}
.cart-btn.bump{animation:bump .45s}
@keyframes bump{40%{transform:scale(1.2)}}
@media (min-width:761px){ .nav .wrap{gap:1rem} .nav ul{margin-left:auto} }

.drawer{overflow:hidden}
.drawer header{position:relative;z-index:3;background:var(--paper)}
.d-scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.d-scroll .lines{flex:none;overflow:visible;padding:.4rem 1.4rem}
.line{align-items:start}
.l-end{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:.4rem;min-height:84px}
.line .tot{white-space:nowrap}
.rm{width:34px;height:34px;border-radius:50%;font-size:1.35rem;line-height:1;color:var(--muted);background:var(--cream);flex:none}
.rm:hover{background:#fdeceb;color:var(--err)}
.tag-sale{color:var(--terra);font-weight:700}
.linkbtn{display:block;margin:.1rem 1.4rem .4rem;font-size:.85rem;color:var(--muted);text-decoration:underline;min-height:36px}
.checkout{padding:.2rem 1.4rem 1.4rem;border-top:1px solid var(--line);margin-top:.5rem}
.co-t{font-family:var(--serif);font-size:1.15rem;margin:1rem 0 .7rem}
.drawer .field input.err,.drawer .field textarea.err{border-color:#d33;box-shadow:0 0 0 3px rgba(211,51,51,.15)}
.drawer .d-foot{flex:none;padding:.9rem 1.4rem calc(1rem + env(safe-area-inset-bottom));box-shadow:0 -10px 24px -18px rgba(43,30,26,.5)}
.sum-row{display:flex;justify-content:space-between;align-items:baseline;font-size:.92rem;color:var(--muted)}
.sum-row b{color:var(--terra)}
.sum-row.total{font-size:1.05rem;color:var(--ink);margin-top:.15rem}
.sum-row.total b{font-family:var(--serif);font-size:1.7rem;color:var(--ink)}
.co-err{color:var(--err);font-weight:700;font-size:.9rem;min-height:1.2em;margin:.35rem 0}
.btn.big{width:100%;padding:1rem 1.2rem;font-size:1.05rem}
.btn.busy{opacity:.7;pointer-events:none}
.btn-ghost-d{border:1.5px solid var(--line);background:var(--paper);color:var(--ink);width:100%;margin-top:.7rem}
.btn-ghost-d:hover{border-color:var(--ink)}
.drawer .empty{padding:3rem 1.4rem}

/* Pantalla "¡Pedido recibido!" */
.done{display:none;position:absolute;inset:0;z-index:2;background:var(--paper);padding:5.2rem 1.4rem 1.6rem;text-align:center;overflow:auto;flex-direction:column;align-items:center;gap:.9rem}
.drawer.is-done .done{display:flex}
.done-ico{width:76px;height:76px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 12px 28px -10px rgba(31,168,85,.7)}
.done-ico svg{width:40px;height:40px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.done h3{font-family:var(--serif);font-size:1.75rem;line-height:1.15}
.done-code{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:.55rem .9rem;font-size:.95rem}
.done p{color:var(--muted);max-width:26em}
.done p b{color:var(--ink)}
.done .btn{margin-top:.3rem}
@media (max-width:560px){
  .d-scroll .lines{padding:.3rem 1.1rem}
  .checkout{padding-inline:1.1rem}
  .linkbtn{margin-inline:1.1rem}
  .drawer .d-foot{padding-inline:1.1rem}
  .done{padding-inline:1.1rem}
}

/* =====================================================================
   Íconos sobre la foto (bolsa = agregar, ojo = vista previa) y
   ventana de vista previa — como en isaki
   ===================================================================== */
.card .media{cursor:pointer}
.card h3{cursor:pointer}
.card h3:hover{color:var(--terra)}
.qa{position:absolute;top:10px;right:10px;z-index:3;display:flex;flex-direction:column;gap:.45rem}
.qa button{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 6px 16px -6px rgba(43,30,26,.55);transition:background .2s,color .2s,transform .15s,border-color .2s}
.qa button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qa button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.qa button:active{transform:scale(.92)}
.qa button.added{background:var(--leaf);color:#fff;border-color:var(--leaf)}
.qa button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* mouse: aparecen suaves al pasar sobre la tarjeta; táctil: siempre visibles */
@media (hover:hover) and (min-width:761px){
  .qa{opacity:0;transform:translateX(8px);transition:opacity .22s,transform .22s}
  .card:hover .qa,.card:focus-within .qa{opacity:1;transform:none}
}
@media (max-width:760px){
  .qa{top:6px;right:6px;gap:.35rem}
  .qa button{width:38px;height:38px}
  .qa button svg{width:19px;height:19px}
}

/* Vista previa */
.qv{position:fixed;inset:0;z-index:85;display:none;align-items:center;justify-content:center;padding:1rem;background:rgba(22,31,61,.62);backdrop-filter:blur(3px)}
.qv.open{display:flex}
.qv-box{position:relative;width:min(900px,100%);max-height:min(640px,calc(100dvh - 2rem));overflow:auto;overscroll-behavior:contain;background:var(--paper);border-radius:22px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.qv-x{position:absolute;top:10px;right:10px;z-index:4;width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid var(--line);font-size:1.7rem;line-height:1;color:var(--ink);box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.qv-x:hover{background:var(--ink);color:#fff}
.qv-gal{padding:1rem;background:var(--cream);display:flex;flex-direction:column;gap:.7rem;min-width:0}
.qv-main{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:#fff;cursor:zoom-in}
.qv-main img{width:100%;height:100%;object-fit:contain}
.qv-main.nofoto{cursor:default}
.qv-main .r{width:70%;display:grid;place-items:center}
.qv-main .soon{position:absolute;left:12px;bottom:10px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.65}
.qv-thumbs{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.2rem}
.qv-thumbs button{flex:none;width:62px;height:62px;border-radius:12px;overflow:hidden;border:2px solid transparent;background:#fff;opacity:.7}
.qv-thumbs button.on{border-color:var(--terra);opacity:1}
.qv-thumbs img{width:100%;height:100%;object-fit:cover}
.qv-info{padding:1.6rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.7rem;min-width:0}
.qv-info .cat{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--terra);padding-right:2.6rem}
.qv-info h2{font-family:var(--serif);font-size:1.7rem;line-height:1.15;font-weight:600}
.qv-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.3rem .7rem}
.qv-price .old{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1.5px}
.qv-price .price{font-family:var(--serif);font-size:1.7rem;font-weight:600}
.qv-price .price.sale{color:var(--terra)}
.qv-price .badge{position:static;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.28rem .65rem;border-radius:999px;background:var(--terra);color:#fff;align-self:center}
.qv-price .badge.sold{background:#7a2a2a}
.qv-desc{color:var(--muted);white-space:pre-line;line-height:1.55}
.qv-buy{display:flex;gap:.6rem;align-items:stretch;margin-top:auto}
.qv-qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;background:var(--paper)}
.qv-qty button{width:44px;min-height:46px;font-size:1.3rem;border-radius:999px}
.qv-qty button:hover{background:var(--cream)}
.qv-qty span{min-width:1.8rem;text-align:center;font-weight:700}
.qv-buy .btn{flex:1;padding:.8rem 1rem;font-size:.98rem}
#qv-add.added{background:var(--leaf);box-shadow:none}
.qv-info .btn-wa.big{margin-top:0}
@media (max-width:760px){
  .qv{padding:0;align-items:flex-end}
  .qv-box{grid-template-columns:1fr;max-height:92dvh;border-radius:22px 22px 0 0;width:100%}
  .qv-gal{padding:.8rem .8rem .5rem}
  .qv-main{aspect-ratio:1/.82}
  .qv-info{padding:1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom))}
  .qv-info h2{font-size:1.4rem}
  .qv-price .price{font-size:1.45rem}
  .qv-buy{margin-top:.3rem}
}
@media (prefers-reduced-motion:reduce){ .qa{transition:none} }

/* Pie de la tarjeta: precio arriba y botones debajo (en cualquier ancho; antes se desbordaba en 4 columnas) */
.card .foot{flex-direction:column;align-items:stretch;gap:.55rem}
.card .pricebox{min-height:2.6rem;justify-content:flex-end}
.card .btns{width:100%}
.card .add,.card .quick{white-space:nowrap}

/* Menú en pantallas medianas: que "Cómo pedir" y "Por qué nosotros" no se partan en dos líneas */
.nav ul a{white-space:nowrap}
@media (min-width:761px) and (max-width:1020px){ .nav ul{gap:1.1rem;font-size:.9rem} .logo{font-size:1.35rem} }
@media (max-width:760px){
  .qv-main{aspect-ratio:auto;height:min(42dvh,300px)}
  .qv-thumbs button{width:52px;height:52px}
}
.qv-actions{display:flex;flex-direction:column;gap:.6rem;margin-top:auto;position:sticky;bottom:0;background:var(--paper);padding:.6rem 0 .1rem}
.qv-actions .qv-buy{margin-top:0}

/* =====================================================================
   Barra de orden + vista cuadrícula / lista
   ===================================================================== */
.tabs{margin-bottom:1rem}
.shopbar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:1.3rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.shopbar .count{font-size:.92rem;color:var(--muted);font-weight:500}
.shopbar .tools{display:flex;align-items:center;gap:.6rem;min-width:0}
.sort{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--muted);font-weight:500;min-width:0}
.sort select{appearance:none;-webkit-appearance:none;font:inherit;font-weight:600;color:var(--ink);background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232B1E1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/11px;border:1.5px solid var(--line);border-radius:999px;padding:.55rem 2.3rem .55rem 1rem;min-height:44px;max-width:100%;cursor:pointer;transition:border-color .2s}
.sort select:hover{border-color:var(--ink)}
.sort select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.views{display:flex;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);overflow:hidden;flex:none}
.views button{width:46px;height:41px;display:grid;place-items:center;color:var(--muted);transition:background .2s,color .2s}
.views button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.views button:hover{color:var(--ink)}
.views button[aria-pressed="true"]{background:var(--ink);color:#fff}
.views button:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

/* Vista en lista (PC y tablet): una fila por producto, foto a la izquierda, precio y botones a la derecha */
.grid.is-list{grid-template-columns:minmax(0,1fr);gap:.9rem}
.grid.is-list .card{flex-direction:row;align-items:stretch}
.grid.is-list .card:hover{transform:none;box-shadow:var(--shadow)}
.grid.is-list .media{flex:none;width:clamp(150px,24%,260px);aspect-ratio:auto;min-height:190px}
.grid.is-list .media img{position:absolute;inset:0}
.grid.is-list .body{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,260px);column-gap:1.6rem;align-content:center;align-items:start;padding:1.1rem 1.3rem;gap:.35rem 1.6rem}
.grid.is-list .body>*{grid-column:1}
.grid.is-list .body .foot{grid-column:2;grid-row:1/span 4;align-self:center;margin-top:0}
.grid.is-list .card p{flex:none;-webkit-line-clamp:3}
.grid.is-list .card.open p{-webkit-line-clamp:unset}

@media (max-width:760px){
  .shopbar{margin-bottom:.9rem;padding-bottom:.7rem}
  .shopbar .count{display:none}
  .shopbar .tools{width:100%}
  .sort{flex:1}
  .sort span{display:none}
  .sort select{width:100%}
  /* lista en celular: foto chica a la izquierda, datos y botones a la derecha */
  .grid.is-list{gap:.6rem}
  .grid.is-list .media{width:112px;min-height:0}
  .grid.is-list .media .soon,.grid.is-list .media .more{display:none}
  .grid.is-list .badge{font-size:.52rem;top:6px;left:6px;padding:.15rem .4rem}
  .grid.is-list .qa{top:auto;bottom:6px;right:6px;flex-direction:row;gap:.3rem}
  .grid.is-list .qa button{width:34px;height:34px}
  .grid.is-list .qa button svg{width:17px;height:17px}
  .grid.is-list .body{display:flex;padding:.7rem .75rem .75rem;gap:.25rem}
  .grid.is-list .card p{-webkit-line-clamp:2;font-size:.78rem}
  .grid.is-list .card h3{font-size:.98rem}
}
/* tablet angosta: lista con el pie debajo del texto */
@media (min-width:761px) and (max-width:900px){
  .grid.is-list .body{grid-template-columns:minmax(0,1fr);}
  .grid.is-list .body .foot{grid-column:1;grid-row:auto;margin-top:.4rem}
}
@media (max-width:760px){
  .grid.is-list .body .foot{align-self:stretch;grid-column:auto;grid-row:auto;margin-top:auto}
  .grid.is-list .pricebox{min-height:0}
  .grid.is-list .btns{width:100%}
}

/* Foto de la tarjeta siempre cuadrada (1:1): igual que el encuadre del panel */
.card .media{aspect-ratio:1/1}

/* =====================================================================
   La foto es lo que vende: miniaturas en el carrito, zoom suave,
   vista tipo Instagram (una publicación por producto) y compartir
   ===================================================================== */
.card .media{background:var(--cream)}
@media (hover:hover){
  .card .media img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .card:hover .media img{transform:scale(1.045)}
}

/* carrito: miniatura del producto */
.line{grid-template-columns:64px minmax(0,1fr) auto}
.l-img{width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--cream);border:1px solid var(--line);flex:none}
.l-img img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:560px){ .l-img{width:56px;height:56px} .line{grid-template-columns:56px minmax(0,1fr) auto} }

/* compartir */
.qv-share{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;color:var(--muted);font-weight:700;font-size:.9rem;align-self:center}
.qv-share svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qv-share:hover{color:var(--terra)}
#flash{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));transform:translate(-50%,20px);z-index:95;background:var(--ink);color:#fff;padding:.7rem 1.2rem;border-radius:999px;font-weight:700;font-size:.92rem;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:calc(100% - 32px);text-align:center}
#flash.show{opacity:1;transform:translate(-50%,0)}

/* Vista "Instagram" */
.grid.is-feed{grid-template-columns:minmax(0,540px);justify-content:center;gap:1.6rem}
.feed-card{border-radius:20px}
.feed-card:hover{transform:none;box-shadow:var(--shadow)}
.fh{display:flex;align-items:center;gap:.7rem;padding:.75rem .95rem}
.fav{width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--cream);border:1px solid var(--line);display:grid;place-items:center;color:var(--terra);flex:none}
.fav img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.fav [data-rosette]{width:26px;height:26px;display:block}
.fh-t{min-width:0;line-height:1.2}
.fh-t b{display:block;font-size:.98rem}
.fh-t small{display:block;color:var(--muted);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.fh .badge{position:static;margin-left:auto;flex:none}
.fg-wrap{position:relative;background:var(--cream)}
.fg{display:flex;align-items:center;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.fg::-webkit-scrollbar{display:none}
.fg>img,.fg>.feed-ph{flex:0 0 100%;width:100%;height:auto;scroll-snap-align:center;max-height:min(128vw,700px);min-height:240px;object-fit:contain;display:block;background:var(--cream)}
.feed-card.sold .fg>img{filter:grayscale(.7);opacity:.7}
.feed-ph{position:relative;display:grid;place-items:center;aspect-ratio:1/1}
.feed-ph .r{width:62%;display:grid;place-items:center}
.feed-ph .soon{position:absolute;left:14px;bottom:12px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.65}
.fcount{position:absolute;top:12px;right:12px;background:rgba(43,30,26,.72);color:#fff;font-size:.76rem;font-weight:700;padding:.22rem .65rem;border-radius:999px}
.fdots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:.35rem;pointer-events:none}
.fdots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.fdots i.on{background:#fff;transform:scale(1.2)}
.fa{display:flex;align-items:center;gap:.35rem;padding:.55rem .75rem .1rem}
.fa-b{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:background .2s,color .2s}
.fa-b:hover{background:var(--cream);color:var(--terra)}
.fa-b svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fa-price{margin-left:auto;padding-right:.3rem;text-align:right}
.fa-price .pricebox{min-height:0;align-items:flex-end}
.fa-price .price{font-size:1.6rem}
.fb{padding:.2rem 1.05rem 1.1rem;display:flex;flex-direction:column;gap:.45rem}
.fb h3{font-family:var(--serif);font-size:1.3rem;line-height:1.2;font-weight:600;cursor:pointer}
.fb p{font-size:.95rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.feed-card.open .fb p{-webkit-line-clamp:unset;display:block}
.fb .foot{margin-top:.4rem}
.fb .btns{width:100%}
.fb .add{flex:1}
@media (max-width:760px){
  .grid.is-feed{grid-template-columns:minmax(0,1fr);gap:1.1rem;margin-inline:-6px}
  .feed-card{border-radius:16px}
  .fb h3{font-size:1.15rem}
}
@media (prefers-reduced-motion:reduce){ .card .media img{transition:none} #flash{transition:none} }

/* =====================================================================
   Celular: sin mandala (cargaba el encabezado y restaba legibilidad).
   El texto y los botones quedan primero y los productos aparecen enseguida.
   ===================================================================== */
@media (max-width:760px){
  .hero-art{display:contents}                       /* sin caja propia: no deja espacio vacío */
  .hero-art .rosette-big{display:none}
  .hero .wrap{padding-block:1.9rem 2.3rem;gap:1.2rem}
  /* si hay foto de portada o producto destacado, van debajo del texto */
  .hero-photo{position:relative;inset:auto;width:min(280px,74%);aspect-ratio:1;margin:.4rem auto 0}
  .hero-art .hero-card,.hero-art.has-photo .hero-card{position:relative;inset:auto;bottom:auto;right:auto;width:min(320px,100%);margin:.4rem auto 0;transform:rotate(-2deg)}
}

/* =====================================================================
   Logo de la marca: se muestra grande y limpio (ya incluye el nombre)
   ===================================================================== */
.logo.has-img{gap:0}
.logo.has-img .logo-img{height:68px;width:auto;max-width:min(60vw,260px);object-fit:contain;border-radius:0;mix-blend-mode:multiply;background:transparent}
.nav.has-logo .wrap{height:80px}
footer .logo.has-img .logo-img{height:96px;background:var(--cream);padding:10px 16px;border-radius:16px;mix-blend-mode:normal;max-width:100%}
@media (max-width:760px){
  .nav.has-logo .wrap{height:74px}
  .logo.has-img .logo-img{height:62px}
  footer .logo.has-img .logo-img{height:84px}
}

/* =====================================================================
   Las fotos se ven COMPLETAS en todos los formatos (nada se corta).
   Si la foto no es cuadrada, el espacio sobrante se rellena con la misma
   foto difuminada, así no quedan franjas vacías.
   ===================================================================== */
.card .media,.qv-main,.fs{isolation:isolate}
.card .media::before,.qv-main::before,.fs::before{content:"";position:absolute;inset:-14%;background:var(--bg) center/cover no-repeat;filter:blur(16px) saturate(1.1);opacity:.9;z-index:-1}
.card .media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* vista previa: la foto ocupa todo el marco (antes podía desbordar y verse cortada) */
.qv-main{position:relative;overflow:hidden}
.qv-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.qv-main.nofoto{display:grid}
.qv-thumbs img{object-fit:contain;background:var(--cream)}

/* carrito: miniatura completa */
.l-img img{object-fit:contain}

/* vista Instagram: la foto en su proporción real, sin franjas; si es muy alta, queda centrada sobre fondo difuminado */
.fg>.fs{flex:0 0 100%;position:relative;display:grid;place-items:center;overflow:hidden;scroll-snap-align:center;background:var(--cream)}
.fg>.fs img{position:relative;width:100%;height:auto;max-height:min(125vw,680px);min-height:0;object-fit:contain;display:block}
.fg>img{min-height:0}
.fg>.feed-ph{flex:0 0 100%;scroll-snap-align:center}

/* vista en lista (celular): foto cuadrada completa arriba a la izquierda, no una tira angosta recortada */
@media (max-width:760px){
  .grid.is-list .media{width:118px;height:118px;min-height:0;aspect-ratio:1;align-self:flex-start;margin:.65rem 0 .65rem .65rem;border-radius:12px}
  .grid.is-list .qa{bottom:5px;right:5px}
}
/* vista en lista (PC): foto cuadrada completa */
@media (min-width:761px){
  .grid.is-list .media{width:200px;height:200px;min-height:0;aspect-ratio:1;align-self:flex-start;margin:.8rem 0 .8rem .8rem;border-radius:14px}
}

/* encabezado de la publicación (vista Instagram): logo completo y más grande */
.fh{gap:.85rem;padding:.8rem 1rem}
.fav{width:60px;height:60px;border-radius:16px;background:#fff;padding:5px}
.fav img{object-fit:contain;mix-blend-mode:normal}
.fh-t b{font-family:var(--serif);font-size:1.25rem;font-weight:600}
.fh-t small{font-size:.76rem}
@media (max-width:760px){ .fav{width:56px;height:56px} .fh-t b{font-size:1.15rem} }

/* lista en celular: foto un poco más grande y limpia (tocarla abre el detalle) */
@media (max-width:760px){
  .grid.is-list .media{width:132px;height:132px}
  .grid.is-list .qa{display:none}
}

/* vista Instagram: marco con la proporción de la foto (la fija el script al cargar); antes de cargar es cuadrado */
.fg>.fs{aspect-ratio:1/1;display:block;min-height:0}
.fg>.fs img{position:absolute;inset:0;width:100%;height:100%;max-height:none;min-height:0;object-fit:contain}

/* vista previa en celular: foto más grande (las verticales ocupan todo el alto, centradas y completas) */
@media (max-width:760px){
  .qv-main{height:min(50dvh,430px)}
}

/* el logo trae el fondo crema de la página: avatar y recuadro del pie en crema también */
.fav{background:var(--cream)}

/* vista Instagram sin foto: el dibujo va centrado en el marco */
.feed-ph{place-content:center}