/* ============================================================
   THF Studio by ThaliaCe — Design System
   Type: Pacifico (display) + Nunito (UI/body)
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* brand palette */
  --pink:#FF6B9D;
  --pink-deep:#F0508A;
  --peach:#FFB085;
  --teal:#4ECDC4;
  --lila:#9B8EC4;
  --morado:#7C5CBF;
  --mint:#A8E6CF;
  --limon:#C8E6A0;
  --amarillo:#FFD24C;

  /* soft backgrounds */
  --bg-rosa:#FFF0F6;
  --bg-lila:#F3F0FF;

  /* neutrals (warm) */
  --ink:#2B2533;
  --ink-soft:#6E6779;
  --line:#F0E6F5;
  --white:#ffffff;
  --dark:#1d1b2e;

  /* lead accent (tweakable) */
  --accent:var(--pink);
  --accent-deep:var(--pink-deep);

  /* radii (tweakable via [data-radius]) */
  --r-sm:14px;
  --r-md:20px;
  --r-lg:28px;
  --r-pill:999px;

  --shadow-soft:0 10px 30px rgba(124,92,191,.10);
  --shadow-lift:0 18px 44px rgba(124,92,191,.18);

  --maxw:1240px;
  --pad:clamp(20px,5vw,56px);
}

[data-radius="round"]{ --r-sm:20px; --r-md:28px; --r-lg:36px; }
[data-radius="sharp"]{ --r-sm:8px; --r-md:12px; --r-lg:16px; }

[data-accent="lila"]{ --accent:var(--morado); --accent-deep:#6A4DAD; }
[data-accent="teal"]{ --accent:var(--teal); --accent-deep:#34B3AA; }

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Nunito',system-ui,sans-serif;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
  line-height:1.55;
}
img{display:block;max-width:100%;}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}

.script{font-family:'Pacifico',cursive;font-weight:400;}

/* shared section shell */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);}
.section{padding-block:clamp(48px,7vw,84px);position:relative;}

/* ---------- sparkle accent (replaces emoji) ---------- */
.spark{display:inline-block;width:.85em;height:.85em;vertical-align:-.05em;
  background:currentColor;
  -webkit-mask:var(--spark-mask) center/contain no-repeat;
          mask:var(--spark-mask) center/contain no-repeat;}
:root{--spark-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 5.4 2.6 7.3 8 8-5.4.7-7.3 2.6-8 8-.7-5.4-2.6-7.3-8-8 5.4-.7 7.3-2.6 8-8Z'/%3E%3C/svg%3E");}

/* section heading block */
.sec-head{text-align:center;margin-bottom:clamp(28px,4vw,44px);}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);}
.eyebrow .spark{width:11px;height:11px;}
.sec-title{font-size:clamp(26px,4vw,38px);font-weight:900;letter-spacing:-.01em;margin-top:8px;line-height:1.1;}
.sec-title .script{color:var(--accent);font-weight:400;}
.sec-sub{color:var(--ink-soft);font-size:15px;margin-top:10px;max-width:48ch;margin-inline:auto;}
.sec-rule{width:54px;height:4px;border-radius:4px;margin:14px auto 0;
  background:linear-gradient(90deg,var(--pink),var(--peach),var(--teal));}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.ann{background:var(--morado);color:#fff;height:40px;display:flex;align-items:center;overflow:hidden;position:relative;}
.ann-track{display:flex;gap:54px;white-space:nowrap;padding-left:54px;will-change:transform;animation:marquee 32s linear infinite;}
.ann:hover .ann-track{animation-play-state:paused;}
.ann-item{font-size:13px;font-weight:700;letter-spacing:.3px;display:inline-flex;align-items:center;gap:8px;}
.ann-item a{color:var(--amarillo);text-decoration:none;border-bottom:1.5px dotted rgba(255,210,76,.6);padding-bottom:1px;}
.ann-item .spark{width:12px;height:12px;color:var(--mint);}
@keyframes marquee{to{transform:translateX(-50%);}}

/* ============================================================
   NAV
   ============================================================ */
.topbar{background:var(--pink);color:#fff;}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:34px;}
.topbar-soc{display:flex;align-items:center;gap:16px;}
.topbar-soc a{display:inline-flex;opacity:.92;transition:opacity .2s,transform .2s;}
.topbar-soc a:hover{opacity:1;transform:translateY(-1px);}
.topbar-soc svg{width:15px;height:15px;fill:#fff;}
.topbar-note{font-size:12px;font-weight:700;letter-spacing:.3px;display:flex;align-items:center;gap:7px;white-space:nowrap;}
.topbar-note .spark{width:11px;height:11px;}
@media(max-width:640px){.topbar-note{display:none;}}

nav.bar{position:sticky;top:0;z-index:600;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1.5px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;height:74px;}
.nav-logo{display:flex;align-items:center;flex-shrink:0;}
.nav-logo img{height:50px;width:auto;}
.nav-links{display:flex;list-style:none;gap:2px;}
.nav-links>li{position:relative;}
.nav-links>li>a{display:flex;align-items:center;gap:5px;padding:10px 14px;font-size:13px;font-weight:800;white-space:nowrap;
  letter-spacing:.6px;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;border-radius:var(--r-sm);transition:color .2s,background .2s;}
.nav-links>li>a:hover{color:var(--accent);background:var(--bg-rosa);}
.nav-links .caret{width:9px;height:9px;fill:currentColor;transition:transform .2s;}
.nav-links>li:hover .caret{transform:rotate(180deg);}

.dropdown{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1.5px solid var(--line);
  border-radius:var(--r-md);min-width:236px;padding:8px;box-shadow:var(--shadow-lift);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:all .22s ease;z-index:700;}
.nav-links>li:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:13.5px;font-weight:700;
  color:var(--ink-soft);text-decoration:none;border-radius:var(--r-sm);transition:background .15s,color .15s;}
.dropdown a:hover{background:var(--bg-rosa);color:var(--accent);}
.dropdown a .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

.nav-actions{display:flex;align-items:center;gap:6px;}
.icon-btn{width:42px;height:42px;border:none;background:transparent;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);position:relative;transition:background .2s,color .2s;}
.icon-btn:hover{background:var(--bg-rosa);color:var(--accent);}
.icon-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.cart-count{position:absolute;top:4px;right:4px;min-width:18px;height:18px;padding:0 4px;background:var(--accent);color:#fff;
  border-radius:999px;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;border:2px solid #fff;
  transform:scale(0);transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.cart-count.show{transform:scale(1);}
.cart-count.bump{animation:bump .4s;}
@keyframes bump{0%,100%{transform:scale(1);}40%{transform:scale(1.35);}}
.hamburger{display:none;}

@media(max-width:920px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
}

/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero{position:relative;overflow:hidden;background:var(--bg-rosa);}
.hero-track{display:flex;height:clamp(300px,42vw,560px);}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none;}
.slide.active{opacity:1;pointer-events:auto;}
.slide img{width:100%;height:100%;object-fit:cover;object-position:center;}

.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:50px;height:50px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.22);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s,transform .2s;}
.hero-arrow:hover{background:rgba(255,255,255,.45);}
.hero-arrow svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.hero-arrow.prev{left:18px;}
.hero-arrow.next{right:18px;}
.hero-arrow.prev:hover{transform:translateY(-50%) translateX(-3px);}
.hero-arrow.next:hover{transform:translateY(-50%) translateX(3px);}
.hero-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:6;}
.hero-dots button{width:10px;height:10px;border-radius:50%;border:none;background:rgba(255,255,255,.6);transition:all .3s;}
.hero-dots button.active{background:#fff;width:30px;border-radius:6px;}
@media(max-width:640px){.hero-arrow{width:40px;height:40px;}}

/* ============================================================
   CATEGORIES
   ============================================================ */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;}
@media(max-width:920px){.cats{grid-template-columns:repeat(3,1fr);}}
@media(max-width:520px){.cats{grid-template-columns:repeat(2,1fr);}}
.cat{display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;color:inherit;}
.cat-tile{width:100%;aspect-ratio:1.1/1;border-radius:var(--r-md);background:#fff;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:transform .22s,border-color .22s,box-shadow .22s;}
.cat:hover .cat-tile{transform:translateY(-6px);border-color:var(--accent);box-shadow:var(--shadow-soft);}
.cat-tile img{width:72%;height:72%;object-fit:contain;transition:transform .25s;}
.cat:hover .cat-tile img{transform:scale(1.07) rotate(-3deg);}
.cat-name{font-size:13.5px;font-weight:800;text-align:center;}

/* ============================================================
   PRODUCTS
   ============================================================ */
.bg-soft{background:linear-gradient(150deg,var(--bg-rosa),var(--bg-lila));}
.filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:34px;}
.chip-btn{background:#fff;border:1.5px solid var(--line);color:var(--ink-soft);padding:9px 20px;border-radius:var(--r-pill);
  font-size:13px;font-weight:800;transition:all .2s;}
.chip-btn:hover{border-color:var(--accent);color:var(--accent);}
.chip-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}

.products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media(max-width:920px){.products{grid-template-columns:repeat(3,1fr);}}
@media(max-width:680px){.products{grid-template-columns:repeat(2,1fr);}}

.card{background:#fff;border-radius:var(--r-md);overflow:hidden;border:1.5px solid var(--line);
  transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);}

/* striped placeholder image */
.ph{position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer;}
.ph .stripes{position:absolute;inset:0;background-image:
  repeating-linear-gradient(45deg,var(--s1) 0 14px,var(--s2) 14px 28px);opacity:.9;}
.ph .ph-label{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:10px;font-weight:600;letter-spacing:.3px;
  color:var(--ink);background:rgba(255,255,255,.85);padding:4px 10px;border-radius:999px;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.06);}
.ph .ph-cam{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:40px;height:40px;opacity:.5;}
.ph .ph-cam svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.6;}
.card:hover .ph .ph-cam{opacity:.7;}

.badge{position:absolute;top:12px;left:12px;z-index:3;font-size:11px;font-weight:900;letter-spacing:.4px;
  padding:5px 12px;border-radius:var(--r-pill);color:#fff;text-transform:uppercase;}
.badge.new{background:var(--teal);}
.badge.top{background:var(--pink);}
.badge.sale{background:var(--morado);}

.wish{position:absolute;top:10px;right:10px;z-index:3;width:36px;height:36px;border-radius:50%;border:none;background:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.12);transition:transform .2s;}
.wish:hover{transform:scale(1.15);}
.wish svg{width:19px;height:19px;fill:none;stroke:var(--pink);stroke-width:1.9;transition:fill .2s,transform .2s;}
.wish.on svg{fill:var(--pink);animation:pop .35s;}
@keyframes pop{0%,100%{transform:scale(1);}45%{transform:scale(1.3);}}

.card-body{padding:15px 15px 17px;display:flex;flex-direction:column;flex:1;}
.card-cat{font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--lila);margin-bottom:5px;}
.card-name{font-size:14.5px;font-weight:800;line-height:1.3;margin-bottom:8px;}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px;}
.price{font-size:17px;font-weight:900;color:var(--morado);white-space:nowrap;}
.price small{font-size:12px;font-weight:700;color:var(--ink-soft);text-decoration:line-through;margin-right:5px;}
.add{flex-shrink:0;border:none;background:var(--accent);color:#fff;width:42px;height:42px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;transition:background .2s,transform .1s;}
.add svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.add:hover{background:var(--accent-deep);}
.add:active{transform:scale(.92);}
.add.done{background:var(--teal);}

/* button-style variant (tweak) */
[data-card="button"] .add{width:auto;flex:1;gap:8px;font-size:13px;font-weight:800;padding:0 14px;}
[data-card="button"] .add::after{content:"Agregar";}

/* ============================================================
   PROMO BANNERS
   ============================================================ */
.promos{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:720px){.promos{grid-template-columns:1fr;}}
.promo{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:clamp(28px,4vw,44px);color:#fff;min-height:230px;
  display:flex;flex-direction:column;justify-content:center;}
.promo h3{font-size:clamp(20px,2.6vw,26px);font-weight:900;margin-bottom:10px;position:relative;z-index:2;line-height:1.2;}
.promo p{font-size:14.5px;font-weight:600;opacity:.95;margin-bottom:22px;max-width:34ch;position:relative;z-index:2;}
.promo .cta{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:#fff;padding:12px 24px;
  border-radius:var(--r-pill);font-size:14px;font-weight:800;text-decoration:none;position:relative;z-index:2;transition:transform .2s,gap .2s;}
.promo .cta:hover{transform:translateY(-2px);gap:12px;}
.promo .cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.promo-deco{position:absolute;z-index:1;pointer-events:none;}
.promo-1{background:linear-gradient(135deg,var(--pink),var(--peach));}
.promo-1 .cta{color:var(--pink-deep);}
.promo-2{background:linear-gradient(135deg,var(--morado),var(--lila));}
.promo-2 .cta{color:var(--morado);}
.promo-1 .promo-deco{right:-30px;bottom:-30px;width:200px;opacity:.5;transform:rotate(-8deg);}
.promo-2 .promo-deco{right:-20px;top:-30px;width:150px;opacity:.45;}

/* ============================================================
   CURSOS
   ============================================================ */
.cursos{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media(max-width:920px){.cursos{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.cursos{grid-template-columns:1fr;}}
.curso{border-radius:var(--r-md);border:2px solid var(--line);overflow:hidden;background:#fff;display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s;}
.curso:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft);}
.curso-top{padding:30px 22px 20px;text-align:center;background:linear-gradient(150deg,var(--bg-rosa),var(--bg-lila));position:relative;}
.curso-mark{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;}
.curso-mark svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.curso:nth-child(1) .curso-mark{background:var(--pink);}
.curso:nth-child(2) .curso-mark{background:var(--morado);}
.curso:nth-child(3) .curso-mark{background:var(--teal);}
.curso:nth-child(4) .curso-mark{background:var(--peach);}
.curso-name{font-size:16.5px;font-weight:900;margin-bottom:8px;line-height:1.25;}
.curso-desc{font-size:13px;color:var(--ink-soft);line-height:1.55;}
.tags{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:13px;}
.tag{font-size:11px;font-weight:800;padding:4px 11px;border-radius:var(--r-pill);background:#fff;color:var(--morado);border:1.5px solid var(--line);white-space:nowrap;}
.tag.v{color:var(--teal);}
.curso-foot{margin-top:auto;padding:16px 22px;display:flex;align-items:center;justify-content:space-between;border-top:1.5px solid var(--line);}
.curso-price{font-size:14px;font-weight:900;color:var(--morado);white-space:nowrap;}
.curso-cta{border:none;background:var(--morado);color:#fff;padding:10px 18px;border-radius:var(--r-sm);font-size:12.5px;font-weight:800;transition:opacity .2s,transform .1s;}
.curso-cta:hover{opacity:.88;}
.curso-cta:active{transform:scale(.95);}

/* ============================================================
   ABOUT
   ============================================================ */
.about{background:linear-gradient(135deg,var(--bg-lila),var(--bg-rosa));}
.about-grid{display:grid;grid-template-columns:.9fr 1.2fr;gap:clamp(32px,5vw,64px);align-items:center;
  background:#fff;border-radius:var(--r-lg);padding:clamp(32px,5vw,56px);box-shadow:var(--shadow-soft);}
@media(max-width:800px){.about-grid{grid-template-columns:1fr;text-align:center;}}
.blob-wrap{display:flex;justify-content:center;position:relative;}
.blob{width:min(260px,72vw);aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(135deg,var(--pink),var(--peach),var(--lila));
  animation:blob 9s ease-in-out infinite;border-radius:62% 38% 55% 45%/52% 58% 42% 48%;}
.blob img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.12));}
@keyframes blob{0%,100%{border-radius:62% 38% 55% 45%/52% 58% 42% 48%;}50%{border-radius:42% 58% 45% 55%/58% 42% 55% 45%;}}
.about-text h2{font-size:clamp(24px,3.4vw,32px);font-weight:900;margin-bottom:14px;}
.about-text h2 .script{color:var(--accent);}
.about-text p{color:var(--ink-soft);font-size:15px;line-height:1.75;margin-bottom:14px;}
.values{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 24px;}
@media(max-width:800px){.values{justify-content:center;}}
.value{background:#fff;border:1.5px solid var(--lila);color:var(--morado);padding:7px 16px;border-radius:var(--r-pill);font-size:13px;font-weight:800;white-space:nowrap;}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;padding:14px 28px;border-radius:var(--r-pill);white-space:nowrap;
  font-size:14.5px;font-weight:800;text-decoration:none;border:none;transition:transform .2s,gap .2s,background .2s;}
.btn:hover{transform:translateY(-2px);gap:13px;background:var(--accent-deep);}
.btn svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

/* ============================================================
   INSTAGRAM
   ============================================================ */
.insta{background:var(--bg-rosa);}
.insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
@media(max-width:760px){.insta-grid{grid-template-columns:repeat(3,1fr);}}
.insta-cell{position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;cursor:pointer;}
.insta-cell .stripes{position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,var(--s1) 0 12px,var(--s2) 12px 24px);}
.insta-cell .ovl{position:absolute;inset:0;background:rgba(124,92,191,.5);opacity:0;display:flex;align-items:center;justify-content:center;transition:opacity .3s;}
.insta-cell:hover .ovl{opacity:1;}
.insta-cell .ovl svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.8;}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:860px;margin:0 auto;}
@media(max-width:680px){.contact-grid{grid-template-columns:repeat(2,1fr);}}
.contact-card{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);padding:26px 18px;text-align:center;
  text-decoration:none;color:inherit;transition:transform .2s,border-color .2s,box-shadow .2s;}
.contact-card:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:var(--shadow-soft);}
.contact-ic{width:50px;height:50px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.contact-ic svg{width:24px;height:24px;fill:#fff;}
.contact-card:nth-child(1) .contact-ic{background:var(--pink);}
.contact-card:nth-child(2) .contact-ic{background:var(--ink);}
.contact-card:nth-child(3) .contact-ic{background:#25D366;}
.contact-card:nth-child(4) .contact-ic{background:var(--morado);}
.contact-label{font-size:14px;font-weight:900;margin-bottom:3px;}
.contact-val{font-size:13px;color:var(--ink-soft);font-weight:700;}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--dark);color:#fff;padding-block:clamp(40px,5vw,60px) 26px;}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:38px;margin-bottom:36px;}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px;}}
.foot-logo{height:56px;margin-bottom:14px;filter:brightness(0) invert(1);opacity:.95;}
.foot-brand p{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:18px;max-width:34ch;}
.foot-soc{display:flex;gap:10px;}
.foot-soc a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;}
.foot-soc a:hover{background:var(--accent);transform:translateY(-2px);}
.foot-soc svg{width:16px;height:16px;fill:#fff;}
.foot-col h4{font-size:12.5px;font-weight:900;letter-spacing:1px;text-transform:uppercase;margin-bottom:16px;color:var(--peach);}
.foot-col ul{list-style:none;}
.foot-col li{margin-bottom:10px;}
.foot-col a{font-size:13.5px;color:rgba(255,255,255,.6);text-decoration:none;transition:color .2s;}
.foot-col a:hover{color:var(--pink);}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.foot-bottom p{font-size:12.5px;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:6px;white-space:nowrap;}
.foot-bottom .spark{width:11px;height:11px;color:var(--pink);}

/* ============================================================
   WHATSAPP FLOAT
   ============================================================ */
.wa{position:fixed;bottom:26px;right:26px;z-index:800;width:60px;height:60px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 6px 22px rgba(37,211,102,.45);
  animation:wa 2.6s ease-in-out infinite;}
.wa svg{width:30px;height:30px;fill:#fff;}
@keyframes wa{0%,100%{box-shadow:0 6px 22px rgba(37,211,102,.4);}50%{box-shadow:0 6px 30px rgba(37,211,102,.75);}}
.wa-tip{position:absolute;right:72px;top:50%;transform:translateY(-50%) translateX(8px);background:var(--ink);color:#fff;
  padding:8px 14px;border-radius:var(--r-sm);font-size:12.5px;font-weight:800;white-space:nowrap;opacity:0;pointer-events:none;transition:all .25s;}
.wa-tip::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%) rotate(45deg);width:10px;height:10px;background:var(--ink);}
.wa:hover .wa-tip{opacity:1;transform:translateY(-50%) translateX(0);}
@media(max-width:600px){.wa{bottom:18px;right:18px;}}

/* ============================================================
   CART DRAWER + MOBILE MENU + QUICK VIEW (overlays)
   ============================================================ */
.scrim{position:fixed;inset:0;background:rgba(43,37,51,.5);z-index:900;display:none;}
.scrim.show{display:block!important;}

/* cart drawer */
.cart{position:fixed;top:0;right:0;height:100%;width:min(420px,100vw);background:#fff;z-index:950;display:none;flex-direction:column;
  box-shadow:-12px 0 40px rgba(0,0,0,.15);}
.cart.show{display:flex!important;}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1.5px solid var(--line);}
.cart-head h3{font-size:19px;font-weight:900;display:flex;align-items:center;gap:8px;}
.cart-head .spark{width:15px;height:15px;color:var(--accent);}
.x-btn{width:38px;height:38px;border:none;background:var(--bg-rosa);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .2s,transform .2s;}
.x-btn:hover{background:var(--bg-lila);transform:rotate(90deg);}
.x-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;}

.ship-bar{padding:16px 24px;background:var(--bg-rosa);border-bottom:1.5px solid var(--line);}
.ship-bar p{font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-bottom:8px;}
.ship-bar b{color:var(--accent);}
.ship-track{height:8px;background:#fff;border-radius:999px;overflow:hidden;}
.ship-fill{height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--teal));border-radius:999px;transition:width .4s;}

.cart-items{flex:1;overflow-y:auto;padding:8px 24px;}
.cart-empty{text-align:center;padding:60px 20px;color:var(--ink-soft);}
.cart-empty .em-ic{width:80px;height:80px;margin:0 auto 18px;opacity:.8;}
.cart-empty p{font-size:14px;font-weight:700;}
.cart-item{display:flex;gap:14px;padding:16px 0;border-bottom:1.5px solid var(--line);}
.cart-item .ci-img{width:64px;height:64px;border-radius:var(--r-sm);flex-shrink:0;overflow:hidden;position:relative;}
.cart-item .ci-img .stripes{position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,var(--s1) 0 8px,var(--s2) 8px 16px);}
.ci-main{flex:1;min-width:0;}
.ci-name{font-size:13.5px;font-weight:800;line-height:1.3;margin-bottom:4px;}
.ci-price{font-size:13px;font-weight:900;color:var(--morado);}
.ci-controls{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.qty{display:flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:var(--r-pill);overflow:hidden;}
.qty button{width:28px;height:28px;border:none;background:#fff;color:var(--ink);font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.qty button:hover{background:var(--bg-rosa);color:var(--accent);}
.qty span{min-width:26px;text-align:center;font-size:13px;font-weight:800;}
.ci-remove{border:none;background:none;color:var(--ink-soft);font-size:12px;font-weight:700;text-decoration:underline;transition:color .2s;}
.ci-remove:hover{color:var(--pink);}

.cart-foot{padding:20px 24px;border-top:1.5px solid var(--line);background:#fff;}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;}
.cart-total span{font-size:14px;font-weight:700;color:var(--ink-soft);}
.cart-total b{font-size:22px;font-weight:900;color:var(--morado);}
.checkout{width:100%;border:none;background:#25D366;color:#fff;padding:15px;border-radius:var(--r-pill);font-size:15px;font-weight:900;
  display:flex;align-items:center;justify-content:center;gap:9px;transition:transform .15s,opacity .2s;text-decoration:none;}
.checkout:hover{opacity:.92;}
.checkout:active{transform:scale(.98);}
.checkout svg{width:20px;height:20px;fill:#fff;}
.cart-note{text-align:center;font-size:11.5px;color:var(--ink-soft);margin-top:10px;}

/* mobile menu */
.mmenu{position:fixed;top:0;left:0;height:100%;width:min(330px,86vw);background:#fff;z-index:950;display:none;flex-direction:column;padding:24px;
  box-shadow:12px 0 40px rgba(0,0,0,.15);overflow-y:auto;}
.mmenu.show{display:flex!important;}
.mmenu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.mmenu-head img{height:44px;}
.mmenu a{display:block;padding:13px 4px;font-size:15px;font-weight:800;text-decoration:none;color:var(--ink);border-bottom:1.5px solid var(--line);text-transform:uppercase;letter-spacing:.5px;}
.mmenu a:hover{color:var(--accent);}
.mmenu .sub{padding-left:16px;}
.mmenu .sub a{font-size:13.5px;font-weight:700;color:var(--ink-soft);text-transform:none;letter-spacing:0;border-bottom:none;padding:9px 4px;}
.mmenu-soc{display:flex;gap:14px;margin-top:24px;}
.mmenu-soc a{width:44px;height:44px;border-radius:50%;background:var(--bg-rosa);display:flex;align-items:center;justify-content:center;border:none;padding:0;}
.mmenu-soc svg{width:18px;height:18px;fill:var(--accent);}

/* quick view modal */
.qv{position:fixed;inset:0;margin:auto;z-index:950;width:min(760px,92vw);height:max-content;max-height:88vh;overflow:auto;
  background:#fff;border-radius:var(--r-lg);display:none;}
.qv.show{display:block!important;}
.qv-grid{display:grid;grid-template-columns:1fr 1fr;}
@media(max-width:600px){.qv-grid{grid-template-columns:1fr;}}
.qv-img{position:relative;aspect-ratio:1;overflow:hidden;}
.qv-img .stripes{position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,var(--s1) 0 16px,var(--s2) 16px 32px);}
.qv-img .ph-label{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-family:ui-monospace,monospace;font-size:11px;font-weight:600;
  background:rgba(255,255,255,.85);padding:5px 12px;border-radius:999px;}
.qv-info{padding:clamp(24px,4vw,38px);display:flex;flex-direction:column;}
.qv-close{position:absolute;top:14px;right:14px;z-index:4;}
.qv-cat{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--lila);margin-bottom:8px;}
.qv-info h3{font-size:24px;font-weight:900;margin-bottom:12px;line-height:1.15;}
.qv-price{font-size:26px;font-weight:900;color:var(--morado);margin-bottom:16px;}
.qv-desc{font-size:14px;color:var(--ink-soft);line-height:1.7;margin-bottom:24px;}
.qv-info .btn{justify-content:center;}

/* ============================================================
   FLOATING DECORATIONS
   ============================================================ */
.deco{position:absolute;pointer-events:none;z-index:1;user-select:none;}
[data-deco="off"] .deco{display:none;}
[data-deco="subtle"] .deco{opacity:.5;}
.float-a{animation:floatA 7s ease-in-out infinite;}
.float-b{animation:floatB 9s ease-in-out infinite;}
.spin-slow{animation:spin 26s linear infinite;}
@keyframes floatA{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-16px) rotate(6deg);}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(5deg);}50%{transform:translateY(-20px) rotate(-6deg);}}
@keyframes spin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){
  .float-a,.float-b,.spin-slow,.blob,.ann-track,.wa{animation:none;}
}

.divider{position:relative;height:0;}
.divider img{position:absolute;left:50%;transform:translateX(-50%);bottom:-1px;}

@media(max-width:600px){
  .deco.hide-sm{display:none;}
}
