/* Dirección B — «Rose Quartz Pop» v2: móvil primero, menú inferior, scroll corto.
   Tres variantes de serif con peso: [data-font=b1|b2|b3]. */
:root{
  --bg:#FFF9F7; --surface:#F9E1E6; --blush:#F4C9D2; --rose:#E7ABB3; --mauve:#BB93AD; --mauve-l:#EADCE4; --oat:#F3E2DA;
  --ink:#2A1A1F; --muted:#7A6066; --accent:#98162A; --accent-ink:#FFF9F7; --line:#EBD3D8;
  --radius:24px; --radius-btn:999px;
  --font-body:'Manrope',system-ui,sans-serif;
  --ann:34px; --proto:34px; --head:60px; --tab:68px; --safe:env(safe-area-inset-bottom,0px);
}
[data-font="b1"]{--font-display:'Fraunces',Georgia,serif; --dw:650; --dw-em:560; --track:-.025em; --em:italic}
[data-font="b2"]{--font-display:'DM Serif Display',Georgia,serif; --dw:400; --dw-em:400; --track:-.01em; --em:italic}
[data-font="b3"]{--font-display:'Young Serif',Georgia,serif; --dw:400; --dw-em:400; --track:-.015em; --em:normal}
[data-font="b4"]{--font-display:'Playfair Display',Georgia,serif; --dw:800; --dw-em:700; --track:-.02em; --em:italic}
[data-font="b5"]{--font-display:'Bodoni Moda',Georgia,serif; --font-body:'Jost',system-ui,sans-serif; --dw:700; --dw-em:600; --track:-.015em; --em:italic}
[data-font="b6"]{--font-display:'Cormorant',Georgia,serif; --font-body:'Jost',system-ui,sans-serif; --dw:700; --dw-em:600; --track:-.02em; --em:italic}
[data-font="b7"]{--font-display:'Gloock',Georgia,serif; --dw:400; --dw-em:400; --track:-.012em; --em:normal}
[data-font="b8"]{--font-display:'Prata',Georgia,serif; --dw:400; --dw-em:400; --track:-.015em; --em:normal}
h1,h2,h3,.logo,.foot__logo,.card__name,.cart__head h2,.op__title,.cart__total strong{font-weight:var(--dw);letter-spacing:var(--track)}
em{font-style:var(--em);color:var(--accent);font-weight:var(--dw-em)}

body{padding-bottom:calc(var(--tab) + var(--safe))}
body.has-checkout{padding-bottom:calc(var(--tab) + 72px + var(--safe))}
.btn{font-weight:700;font-size:15px;letter-spacing:.01em}
.btn--small{min-height:40px;padding:0 18px;font-size:14px}
.pill{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;background:var(--blush);color:var(--ink);font-size:12px;font-weight:700;text-decoration:none;letter-spacing:.02em}

/* barra superior «Envíos a toda Venezuela» (viene de la home A, con estética B) */
.announce{display:flex;align-items:center;justify-content:center;gap:10px;height:var(--ann);margin:0;padding:0 12px;background:var(--accent);color:var(--accent-ink);font:var(--em) var(--dw-em) 15px/1 var(--font-display);letter-spacing:.01em;white-space:nowrap;overflow:hidden}
.announce i{display:none;font-style:normal;font-size:10px;color:var(--rose)}
.announce span:last-child{display:none}
@media (min-width:480px){.announce span:last-child,.announce i{display:inline}.announce{font-size:16px}}

/* barra de prototipo (selector de tipografía) */
.proto{display:flex;gap:4px;align-items:center;justify-content:safe center;height:var(--proto);background:var(--ink);color:var(--bg);font-size:12px;overflow-x:auto;white-space:nowrap;padding:0 12px;scrollbar-width:none}
.proto span{opacity:.6;margin-right:4px}
.proto a{flex:none;padding:4px 10px;border-radius:999px;text-decoration:none;opacity:.8}
.proto a[aria-current]{background:var(--bg);color:var(--ink);opacity:1}

/* cabecera */
.head{position:sticky;top:0;z-index:5;background:var(--bg)}
.head__row{display:flex;align-items:center;justify-content:space-between;height:var(--head);gap:16px}
.logo{font-family:var(--font-display);font-size:30px;text-decoration:none;line-height:1}
.logo i,.foot__logo i{color:var(--accent);font-style:normal}
.head__nav{display:none}
.head__end{display:flex;gap:6px;align-items:center}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;padding:0}
.icon-btn svg,.tabbar svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-btn svg .fill{fill:currentColor;stroke:none}
.head__fav,.head__cart{display:none}
.badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:var(--accent-ink);font:700 11px/18px var(--font-body);text-align:center}
.is-bump{animation:bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{40%{transform:scale(1.22)}}
.fly-ghost{position:fixed;z-index:50;pointer-events:none;object-fit:contain;border-radius:50%;background:var(--surface);transform-origin:center}

/* hero: cabe entero en la primera pantalla del móvil */
.hero{padding-top:4px}
.hero__card{position:relative;height:calc(100svh - var(--ann) - var(--proto) - var(--head) - var(--tab) - var(--safe) - 16px);min-height:540px;max-height:760px;border-radius:28px;overflow:hidden;background:var(--blush);display:flex;flex-direction:column;justify-content:flex-end}
.hero__img{flex:1 1 0;min-height:0;width:100%;object-fit:cover;object-position:50% 42%}
.hero__tag{position:absolute;top:14px;right:14px;display:flex;align-items:center;gap:8px;padding:5px 6px 5px 5px;border:0;border-radius:999px;background:var(--bg);font:500 13px var(--font-body);color:var(--ink);cursor:pointer}
.hero__tag img{width:36px;height:36px;border-radius:50%;background:var(--surface);object-fit:contain;padding:3px}
.hero__tag b{font-weight:700}
.hero__tag i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-style:normal;font-size:17px;line-height:1}
.hero__panel{position:relative;margin:0 8px 8px;padding:20px 20px 16px;border-radius:22px;background:var(--bg);display:grid;gap:10px;justify-items:start}
.hero h1{font-size:clamp(30px,8.6vw,64px);line-height:1.02}
.hero__lead{font-size:14.5px;color:#4d3439;line-height:1.45}
.hero__cta{width:100%;min-height:52px;margin-top:2px}
.hero__trust{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted)}
.hero__trust span::before{content:'✓ ';color:var(--accent);font-weight:700}

/* tienda */
.shop{padding-block:40px 24px;scroll-margin-top:calc(var(--head) + 8px)}
.shop h2,.how h2{font-size:clamp(30px,7.6vw,52px);line-height:1.05}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:18px -20px 22px;padding:0 20px;scroll-padding-inline:20px;scroll-snap-type:x proximity}
.chips button{flex:none;display:grid;justify-items:center;gap:6px;width:76px;border:0;background:none;cursor:pointer;font:600 12px var(--font-body);color:var(--muted);scroll-snap-align:start;padding:0}
.chips__img{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--surface);border:2px solid transparent;transition:border-color .2s,transform .2s}
.chips__img img{width:46px;height:46px;object-fit:contain}
.chips__img svg{width:26px;height:26px;fill:var(--accent);stroke:none}
.chips__img--star{background:var(--blush)}
.chips__img--fav{background:var(--mauve-l)}
.chips button[aria-selected="true"]{color:var(--ink)}
.chips button[aria-selected="true"] .chips__img{border-color:var(--ink)}
.chips button:active .chips__img{transform:scale(.94)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 12px}
.grid__empty{grid-column:1/-1;padding:32px 20px;border-radius:var(--radius);background:var(--surface);text-align:center;color:var(--muted)}
.card__media{background:var(--surface);border-radius:20px}
.card:nth-child(3n+2) .card__media{background:var(--oat)}
.card:nth-child(3n+3) .card__media{background:var(--mauve-l)}
.card__media img{padding:12%}
.card__badge{border-radius:999px;background:var(--accent);color:var(--accent-ink);text-transform:none;letter-spacing:0;font-size:11px;font-weight:700;top:10px;left:10px}
.card__badge--out{background:var(--ink)}
.card__fav{position:absolute;top:8px;right:8px;z-index:1;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--bg);cursor:pointer;padding:0}
.card__fav svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.8;transition:fill .2s,stroke .2s,transform .2s}
.card__fav[aria-pressed="true"] svg{fill:var(--accent);stroke:var(--accent);transform:scale(1.08)}
.card__body{padding:10px 2px 8px}
.card__name{font-family:var(--font-display);font-size:18px;line-height:1.15}
.card__price{color:var(--ink);font-weight:700;font-size:14px}
.card__add{background:var(--blush);border-color:var(--blush);font-weight:700;letter-spacing:0;font-size:13px;min-height:42px}
.card__add:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* banners: carrusel con scroll-snap en móvil, tres columnas en escritorio */
.banners{padding-block:28px 8px}
.banners__track{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;width:100%;padding-inline:20px;scroll-padding-inline:20px}
.banner{position:relative;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-end}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner__label{position:relative;margin:10px;padding:16px;border-radius:18px;display:grid;gap:8px;justify-items:start}
.banner--1 .banner__label{background:var(--mauve-l)}
.banner--2 .banner__label{background:var(--accent);color:var(--accent-ink)}
.banner--2 em{color:var(--blush)}
.banner--2 .pill{background:rgb(255 249 247 / .18);color:var(--accent-ink)}
.banner--2 .btn{border-color:var(--accent-ink);color:var(--accent-ink)}
.banner--2 .btn:hover{background:var(--accent-ink);color:var(--accent)}
.banner--3 .banner__label{background:var(--blush)}
.banner--3 .pill,.banner--1 .pill{background:var(--bg)}
.banner h3{font-size:23px;line-height:1.05}
.banner__label{gap:6px;padding:14px}

/* cómo comprar, compacto */
.how{padding-block:40px 24px}
.steps{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.steps li{display:grid;gap:6px;align-content:start;padding:16px;border-radius:20px;background:var(--surface)}
.steps li:nth-child(2){background:var(--oat)}
.steps li:nth-child(3){background:var(--mauve-l)}
.steps li:nth-child(4){background:var(--blush)}
.steps span{font-family:var(--font-display);font-weight:var(--dw);font-size:34px;line-height:1;color:var(--accent)}
.steps p{font-size:13.5px;color:#4d3439;line-height:1.4}
.steps b{color:var(--ink)}

/* pie */
.foot{background:var(--blush);padding-block:36px 20px;margin-top:24px;overflow:hidden}
.foot__about{font-size:15px;max-width:34em;color:#4d3439}
.foot__about b{color:var(--ink)}
.foot__pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.foot__pills .pill{background:var(--bg);min-height:34px;font-weight:600}
.foot__pills .pill:hover{background:var(--ink);color:var(--bg)}
.foot__logo{font-family:var(--font-display);font-size:clamp(84px,24vw,300px);line-height:1.3;margin-top:12px}
.foot__legal{font-size:12px;color:#5c434a}

/* menú inferior (solo móvil) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);height:calc(var(--tab) + var(--safe));padding-bottom:var(--safe);background:var(--bg);border-top:1px solid var(--line)}
.tabbar>*{position:relative;display:grid;justify-items:center;align-content:center;gap:3px;border:0;background:none;color:var(--muted);font:600 11px var(--font-body);text-decoration:none;cursor:pointer;padding:0}
.tabbar>*:active{color:var(--ink)}
.tabbar svg{width:23px;height:23px}
.tabbar .badge{top:8px;right:calc(50% - 22px)}

/* barra fija «Ir a pagar» */
.checkout{position:fixed;z-index:19;left:12px;right:12px;bottom:calc(var(--tab) + var(--safe) + 10px);display:flex;align-items:center;gap:12px;min-height:56px;padding:0 18px;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-family:var(--font-body);text-align:left;cursor:pointer;animation:rise .35s cubic-bezier(.2,.8,.2,1)}
.checkout svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
.checkout__txt{flex:1;display:grid;line-height:1.25}
.checkout__txt b{font-size:15px;font-weight:700}
.checkout__txt span{font-size:12.5px;opacity:.85}
.checkout>span:last-child{font-size:20px}
@keyframes rise{from{transform:translateY(120%);opacity:0}}

/* hoja de categorías (bottom sheet) */
.sheet--cats{margin:auto 0 0;width:100%;max-width:none;border-radius:24px 24px 0 0;padding-bottom:var(--safe)}
.sheet--cats[open]{animation:sheetup .3s cubic-bezier(.2,.8,.2,1)}
@keyframes sheetup{from{transform:translateY(100%)}}
.sheet--cats .sheet__inner{padding:24px 16px 20px;gap:8px}
.sheet--cats h2{font-size:28px;padding:0 6px 6px}
.catrow{display:flex;align-items:center;gap:14px;padding:10px;border-radius:18px;text-decoration:none}
.catrow img{width:60px;height:60px;border-radius:50%;object-fit:contain;padding:6px;background:var(--bg)}
.catrow span{display:grid;font-size:13px;color:var(--muted)}
.catrow b{font-family:var(--font-display);font-weight:var(--dw);font-size:21px;color:var(--ink)}
.catrow--1{background:var(--blush)}.catrow--2{background:var(--oat)}.catrow--3{background:var(--mauve-l)}.catrow--4{background:var(--surface)}

.toast{bottom:auto;top:calc(var(--head) + 12px);transform:translate(-50%,-10px)}
.toast.is-on{transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){.checkout,.sheet--cats[open],.is-bump{animation:none}}

/* ---------- escritorio ---------- */
@media (min-width:900px){
  :root{--head:84px;--tab:0px}
  body,body.has-checkout{padding-bottom:0}
  .tabbar{display:none}
  .logo{font-size:38px}
  .head__nav{display:flex;gap:6px;padding:6px;border-radius:999px;background:var(--surface)}
  .head__nav a{padding:9px 18px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:600}
  .head__nav a:hover{background:var(--bg)}
  .head__fav,.head__cart{display:inline-grid}
  .icon-btn{width:46px;height:46px}
  .hero__card{height:min(calc(100vh - var(--ann) - var(--proto) - var(--head) - 24px),720px);min-height:560px;flex-direction:row;justify-content:flex-start;align-items:stretch}
  .hero__img{position:absolute;inset:0 0 0 auto;width:52%;height:100%;object-position:50% 40%}
  .hero__panel{width:48%;margin:0;border-radius:0;background:var(--blush);padding:clamp(40px,5vw,80px);align-content:center;gap:18px}
  .hero h1{font-size:clamp(48px,5vw,76px)}
  .hero__lead{font-size:17px;max-width:26em}
  .hero__cta{width:auto;padding:0 34px}
  .hero__trust{font-size:13px}
  .hero__panel .pill{background:var(--bg)}
  .hero__tag{top:auto;bottom:20px;right:20px;padding:6px 8px 6px 6px;font-size:14px}
  .hero__tag img{width:44px;height:44px}
  .shop{padding-block:88px 40px}
  .shop{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:24px}
  .chips{margin:0;padding:0;overflow:visible}
  .grid{grid-column:1/-1;margin-top:32px;grid-template-columns:repeat(4,1fr);gap:40px 20px}
  .card__name{font-size:21px}
  .card__add{font-size:14px}
  .banners{padding-block:56px 16px}
  .banners__track{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;padding-inline:0;width:min(1240px,100% - 40px)}
  .banner{aspect-ratio:4/5}
  .banner h3{font-size:30px}
  .banner__label{padding:18px;gap:8px}
  .how{padding-block:88px 40px;text-align:center}
  .steps{grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px;text-align:left}
  .steps li{padding:24px}
  .steps span{font-size:46px}
  .steps p{font-size:15px}
  .foot{padding-block:56px 24px;margin-top:56px}
  .checkout{left:auto;right:24px;bottom:24px;width:auto;min-width:380px}
  .toast{top:auto;bottom:24px;transform:translate(-50%,20px)}
  .toast.is-on{transform:translate(-50%,0)}
  .sheet--cats{margin:auto;width:min(480px,100% - 24px);border-radius:24px}
}

/* compensación óptica: Cormorant es pequeña; Prata/Gloock anchas */
[data-font="b6"] h1{font-size:clamp(34px,9.6vw,70px)}
[data-font="b6"] .card__name{font-size:21px}
[data-font="b6"] .logo{font-size:34px}
[data-font="b6"] .announce{font-size:17px}
[data-font="b8"] h1{font-size:clamp(27px,7.6vw,58px)}
[data-font="b8"] .announce{font-size:14px}

/* logo de la marca (SVG): isotipo + «Poshita Shop» en Gloock */
.logo{display:inline-flex;align-items:center;line-height:0;font-size:0}
.logo img{display:none;height:38px;width:auto}
.logo .logo__c{display:block}
.foot__logo{margin-top:28px;line-height:0;font-size:0}
.foot__logo img{display:block;width:min(560px,86%);height:auto;margin-left:-4px}
@media (min-width:900px){.logo img{height:46px}.foot__logo{margin-top:40px}}