/* =========================================================
   Just4girlsec — estilos del sitio público
   Paleta "Toronja & Salvia"
   ========================================================= */
:root {
  --nube: #FFF8F6;        /* fondo */
  --blush: #FCE6E3;       /* rosa muy suave */
  --rosa: #EE7A8B;        /* rosa toronja (logo) */
  --framb: #B8475C;       /* frambuesa: botones y texto de acento */
  --framb-deep: #93344A;
  --salvia: #A3B899;
  --salvia-soft: #E5EEDF;
  --musgo: #4E6B52;
  --cacao: #3A2629;       /* texto */
  --cacao-soft: #6E5558;
  --durazno: #F7BFA0;
  --durazno-soft: #FDEBE2;
  --miel: #F2D49B;
  --miel-soft: #FBF1DE;
  --white: #fff;
  --line: #F1D6D4;

  --f-display: "Young Serif", Georgia, serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 12px; --r-md: 20px; --r-lg: 32px; --r-pill: 999px;
  --blob: 62% 38% 46% 54% / 55% 44% 56% 45%;
  --shadow: 0 18px 40px -18px rgba(147, 52, 74, .35);
  --shadow-soft: 0 10px 30px -16px rgba(58, 38, 41, .25);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --wrap: 1200px;
  --nav-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-body); font-size: 17px; line-height: 1.6; color: var(--cacao); background: var(--nube); overflow-x: hidden; }
body.no-scroll { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--framb); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--framb); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--framb); color: #fff; padding: 10px 16px; border-radius: 12px; z-index: 999; }
.skip:focus { left: 8px; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.muted { color: var(--cacao-soft); }
[hidden] { display: none !important; }

h1, h2, h3 { line-height: 1.12; margin: 0 0 .5em; font-weight: 400; }
.h-display { font-family: var(--f-display); font-size: clamp(2rem, 1.3rem + 2.6vw, 3.3rem); letter-spacing: -.01em; color: var(--cacao); text-wrap: balance; }
.sec-head { max-width: 640px; margin-bottom: 36px; }
.sec-head p { color: var(--cacao-soft); margin: 0; }
.sec-head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.sec-head--row > div:first-child { max-width: 560px; }

/* ---------- Botones ---------- */
.btn { --bg: var(--framb); --fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--r-pill); border: 2px solid transparent; background: var(--bg); color: var(--fg); font-weight: 700; text-decoration: none; line-height: 1.2; transition: transform .35s var(--ease), background .25s, box-shadow .35s var(--ease), color .25s; position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.35), transparent 60%); opacity: 0; transition: opacity .3s; z-index: -1; }
.btn:hover::after { opacity: 1; }
.btn--primary:hover { --bg: var(--framb-deep); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--ghost { --bg: transparent; --fg: var(--framb); border-color: currentColor; }
.btn--ghost:hover { --bg: var(--blush); }
.btn--light { --bg: #fff; --fg: var(--framb); }
.btn--light:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(0,0,0,.3); }
.btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.btn--sm { padding: 8px 16px; font-size: .9rem; }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--blush); color: var(--framb); display: grid; place-items: center; transition: transform .3s var(--ease), background .2s; }
.icon-btn:hover { background: var(--rosa); color: #fff; transform: rotate(90deg); }
.icon-btn svg { width: 20px; height: 20px; }
.round-btn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--framb); background: #fff; color: var(--framb); display: grid; place-items: center; transition: background .2s, color .2s, transform .3s var(--ease); flex: none; }
.round-btn:hover { background: var(--framb); color: #fff; transform: scale(1.06); }
.round-btn svg { width: 22px; height: 22px; }
.round-btn--ghost { border-color: transparent; background: transparent; }
.round-btn--ghost .i-play { display: none; }
.round-btn--ghost[aria-pressed="true"] .i-play { display: block; }
.round-btn--ghost[aria-pressed="true"] .i-pause { display: none; }

/* ---------- Navegación ---------- */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); transition: background .3s, box-shadow .3s, transform .4s var(--ease); }
.nav.is-scrolled { background: rgba(255, 248, 246, .88); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner { width: min(1280px, 100% - 32px); margin: auto; height: 100%; display: flex; align-items: center; gap: 20px; }
.nav__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--framb); }
.nav__logo img { width: 58px; height: auto; transition: transform .6s var(--ease); }
.nav__logo:hover img { transform: rotate(-8deg) scale(1.06); }
.nav__logo span { font-family: var(--f-display); font-size: 1.3rem; }
.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a { position: relative; padding: 10px 14px; border-radius: var(--r-pill); text-decoration: none; color: var(--cacao); font-weight: 600; font-size: .98rem; transition: color .2s, background .2s; }
.nav__links a:hover { background: var(--blush); color: var(--framb); }
.nav__links a[aria-current="page"] { color: var(--framb); }
.nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--rosa); transform: translateX(-50%); }
.nav__actions { display: flex; align-items: center; gap: 8px; }
.cart-btn { position: relative; width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--framb); color: #fff; display: grid; place-items: center; transition: transform .3s var(--ease); }
.cart-btn:hover { transform: scale(1.07) rotate(-6deg); }
.cart-btn svg { width: 24px; height: 24px; }
.cart-btn__count { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--salvia); color: var(--cacao); font-size: .78rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--nube); }
.cart-btn.bump { animation: bump .6s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.25) rotate(-12deg); } 60% { transform: scale(.92) rotate(6deg); } 100% { transform: scale(1); } }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--blush); flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.burger span { width: 20px; height: 2px; border-radius: 2px; background: var(--framb); transition: transform .35s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 1. Carrusel infinito ---------- */
.hero { position: relative; margin-top: calc(var(--nav-h) * -1); }
.hero__viewport { overflow: hidden; touch-action: pan-y; cursor: grab; }
.hero__viewport.is-dragging { cursor: grabbing; }
.hero__track { display: flex; will-change: transform; }
.hero__track.is-animating { transition: transform .9s var(--ease); }
.slide { --bg: var(--blush); --blob-c: var(--rosa); --accent: var(--framb); flex: 0 0 100%; min-height: min(92vh, 820px); background: var(--bg); position: relative; overflow: hidden; display: flex; align-items: center; padding: calc(var(--nav-h) + 24px) 0 110px; }
.slide--salvia { --bg: var(--salvia-soft); --blob-c: var(--salvia); }
.slide--durazno { --bg: var(--durazno-soft); --blob-c: var(--durazno); }
.slide--miel { --bg: var(--miel-soft); --blob-c: var(--miel); }
.slide--rosa { --bg: var(--blush); --blob-c: #F7B4BD; }
.slide::before { content: ""; position: absolute; width: 520px; height: 520px; left: -160px; bottom: -220px; border-radius: var(--blob); background: var(--blob-c); opacity: .35; animation: morph 14s ease-in-out infinite; }
.slide__inner { width: min(1200px, 100% - 32px); margin: auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; position: relative; }
.slide__tag { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 14px 6px 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.75); color: var(--framb); font-weight: 700; font-size: .92rem; }
.slide__tag::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--rosa); box-shadow: 0 0 0 4px rgba(238,122,139,.25); animation: pulse 2s infinite; }
.slide__title { font-family: var(--f-display); font-size: clamp(2.4rem, 1.3rem + 4.4vw, 5rem); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 20px; color: var(--cacao); text-wrap: balance; }
.slide__sub { font-size: clamp(1.02rem, .95rem + .35vw, 1.22rem); color: var(--cacao-soft); max-width: 46ch; margin: 0 0 30px; }
.slide__art { position: relative; aspect-ratio: 1 / .95; display: grid; place-items: center; }
.slide__blob { position: absolute; inset: 6%; border-radius: var(--blob); background: #fff; opacity: .55; animation: morph 10s ease-in-out infinite, spinSlow 40s linear infinite; }
.slide__art img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 30px rgba(58,38,41,.12)); }
/* Animación de entrada de cada flyer */
.slide .slide__tag, .slide .slide__title, .slide .slide__sub, .slide .slide__btn { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.slide .slide__art img { opacity: 0; transform: scale(.86) rotate(-4deg); transition: opacity .8s var(--ease), transform 1.2s var(--ease); }
.slide.is-active .slide__tag, .slide.is-active .slide__title, .slide.is-active .slide__sub, .slide.is-active .slide__btn, .slide.is-active .slide__art img { opacity: 1; transform: none; }
.slide.is-active .slide__title { transition-delay: .12s; }
.slide.is-active .slide__sub { transition-delay: .24s; }
.slide.is-active .slide__btn { transition-delay: .36s; }
.slide.is-active .slide__art img { transition-delay: .1s; }
.hero__controls { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); width: min(1200px, 100% - 32px); display: flex; align-items: center; gap: 14px; z-index: 3; }
.hero__dots { display: flex; gap: 8px; }
.hero__dots button { width: 46px; height: 8px; padding: 0; border: 0; border-radius: 8px; background: rgba(184,71,92,.2); overflow: hidden; }
.hero__dots button span { display: block; height: 100%; width: 0; background: var(--framb); border-radius: inherit; }
.hero__dots button[aria-selected="true"] span { animation: fillDot var(--dur, 6s) linear forwards; }
.hero.is-paused .hero__dots button[aria-selected="true"] span { animation-play-state: paused; }
@keyframes fillDot { to { width: 100%; } }

@keyframes morph {
  0%, 100% { border-radius: 62% 38% 46% 54% / 55% 44% 56% 45%; }
  33% { border-radius: 40% 60% 58% 42% / 42% 58% 42% 58%; }
  66% { border-radius: 55% 45% 35% 65% / 60% 35% 65% 40%; }
}
@keyframes spinSlow { to { rotate: 360deg; } }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(238,122,139,0); } }

/* ---------- Franja ---------- */
.ribbon { position: relative; padding: 40px 0; overflow: hidden; }
.ribbon__band { white-space: nowrap; overflow: hidden; width: 110%; margin-left: -5%; }
.ribbon__band--a { background: var(--framb); color: #fff; transform: rotate(-2deg); position: relative; z-index: 2; box-shadow: var(--shadow-soft); }
.ribbon__band--b { background: var(--salvia); color: var(--cacao); transform: rotate(1.5deg); margin-top: -12px; }
.ribbon__track { display: inline-flex; align-items: center; gap: 26px; padding: 16px 0; animation: marquee 38s linear infinite; font-family: var(--f-display); font-size: 1.35rem; }
.ribbon__band--b .ribbon__track { animation-direction: reverse; animation-duration: 46s; font-size: 1.1rem; }
.ribbon__track i { font-style: normal; opacity: .8; }
.ribbon:hover .ribbon__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Nosotras ---------- */
.about { padding: 110px 0 90px; }
.about__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: center; }
.about__art { position: relative; aspect-ratio: 1 / 1.1; }
.about__blob { position: absolute; inset: 4% 6%; background: linear-gradient(160deg, var(--blush), var(--durazno-soft)); border-radius: var(--blob); animation: morph 12s ease-in-out infinite; }
.about__branch { position: absolute; inset: 10% 14% 2%; width: 72%; height: 88%; color: var(--musgo); stroke-width: 4; }
.about__branch .leafd { fill: var(--salvia); fill-opacity: 0; transition: fill-opacity 1s ease 1.4s; }
.about__branch .draw { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2.2s var(--ease); }
.about__art.is-in .draw { stroke-dashoffset: 0; }
.about__art.is-in .leafd { fill-opacity: .9; }
.chip-float { position: absolute; left: var(--x); top: var(--y); padding: 8px 16px; border-radius: var(--r-pill); background: #fff; color: var(--framb); font-weight: 700; font-size: .92rem; box-shadow: var(--shadow-soft); animation: float 6s ease-in-out infinite; animation-delay: var(--d); translate: var(--px, 0) var(--py, 0); transition: translate .6s var(--ease); }
@keyframes float { 50% { transform: translateY(-14px) rotate(-3deg); } }
.about__text p { color: var(--cacao-soft); font-size: 1.08rem; max-width: 60ch; }
.stats { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stats li { padding: 18px; border-radius: var(--r-md); background: #fff; border: 1.5px solid var(--line); }
.stats strong { display: block; font-family: var(--f-display); font-size: 2.4rem; font-weight: 400; color: var(--framb); line-height: 1; margin-bottom: 6px; }
.stats span { font-size: .92rem; color: var(--cacao-soft); line-height: 1.35; display: block; }

/* ---------- Lo que nunca lleva ---------- */
.never { padding: 90px 0; background: var(--cacao); color: #fff; border-radius: 48px; margin: 0 12px; position: relative; overflow: hidden; }
.never::before { content: ""; position: absolute; width: 600px; height: 600px; right: -200px; top: -300px; border-radius: var(--blob); background: var(--framb); opacity: .35; animation: morph 16s ease-in-out infinite; }
.never .h-display { color: #fff; }
.never .sec-head p { color: #E9D7D8; }
.never__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; }
.flip { border: 0; padding: 0; background: none; perspective: 1000px; height: 210px; text-align: left; color: inherit; }
.flip__inner { position: relative; display: block; width: 100%; height: 100%; transition: transform .8s var(--ease); transform-style: preserve-3d; }
.flip:hover .flip__inner, .flip[aria-pressed="true"] .flip__inner { transform: rotateY(180deg); }
.flip__front, .flip__back { position: absolute; inset: 0; border-radius: var(--r-lg); padding: 26px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; }
.flip__front { background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.16); justify-content: flex-end; }
.flip__name { font-family: var(--f-display); font-size: 1.7rem; position: relative; display: inline-block; width: fit-content; }
.flip__name::after { content: ""; position: absolute; left: -4px; right: -4px; top: 55%; height: 3px; background: var(--rosa); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease) .2s; }
.flip.is-in .flip__name::after { transform: scaleX(1); }
.flip__front small { color: #E9D7D8; margin-top: 6px; font-size: .9rem; }
.flip__x { position: absolute; top: 22px; right: 22px; width: 40px; height: 40px; border-radius: 50%; background: var(--rosa); }
.flip__x::before, .flip__x::after { content: ""; position: absolute; left: 11px; top: 19px; width: 18px; height: 2.5px; background: #fff; border-radius: 2px; transform: rotate(45deg); }
.flip__x::after { transform: rotate(-45deg); }
.flip__back { background: var(--blush); color: var(--cacao); transform: rotateY(180deg); justify-content: center; font-size: .98rem; line-height: 1.5; }
.flip__back strong { font-family: var(--f-display); font-weight: 400; font-size: 1.25rem; color: var(--framb); margin-bottom: 8px; }

/* ---------- Ella / Él ---------- */
.duo { padding: 100px 0 40px; text-align: center; }
.duo__switch { position: relative; display: inline-flex; padding: 6px; border-radius: var(--r-pill); background: var(--blush); margin-bottom: 36px; }
.duo__switch button { position: relative; z-index: 1; border: 0; background: none; padding: 12px 28px; border-radius: var(--r-pill); font-weight: 700; color: var(--framb); transition: color .3s; min-width: 140px; }
.duo__switch button[aria-selected="true"] { color: #fff; }
.duo__pill { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); border-radius: var(--r-pill); background: var(--framb); transition: transform .5s var(--ease), background .4s; }
.duo__switch.is-el .duo__pill { transform: translateX(100%); background: var(--musgo); }
.duo__panels { display: grid; max-width: 760px; margin: auto; }
.duo__panel { grid-area: 1 / 1; }
.duo__panel p { color: var(--cacao-soft); font-size: 1.1rem; max-width: 62ch; margin: 0 auto 26px; }
.duo__panel.is-on { animation: duoIn .7s var(--ease); }
@keyframes duoIn { from { opacity: 0; transform: translateY(20px) scale(.98); } }

/* ---------- Tarjetas de producto ---------- */
.shop { padding: 80px 0 100px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs--center { justify-content: center; margin-bottom: 30px; }
.tabs button { border: 1.5px solid var(--line); background: #fff; padding: 9px 18px; border-radius: var(--r-pill); font-weight: 600; color: var(--cacao); transition: all .25s var(--ease); }
.tabs button:hover { border-color: var(--rosa); color: var(--framb); }
.tabs button[aria-selected="true"] { background: var(--framb); border-color: var(--framb); color: #fff; }
.grid-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pcard { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--r-lg); padding: 12px 12px 18px; border: 1.5px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; animation: cardIn .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.pcard__media { position: relative; border-radius: calc(var(--r-lg) - 8px); overflow: hidden; background: var(--blush); aspect-ratio: 1; border: 0; padding: 0; width: 100%; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.07) rotate(1deg); }
.pcard__badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 1; }
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); font-size: .78rem; font-weight: 700; background: var(--framb); color: #fff; }
.badge--combo { background: var(--musgo); }
.badge--out { background: var(--cacao); }
.pcard__body { padding: 14px 6px 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pcard__cat { font-size: .85rem; color: var(--musgo); font-weight: 600; }
.pcard__name { font-family: var(--f-display); font-size: 1.18rem; line-height: 1.2; margin: 0; }
.pcard__name button { all: unset; cursor: pointer; }
.pcard__name button:hover { color: var(--framb); }
.pcard__name button:focus-visible { outline: 3px solid var(--framb); border-radius: 4px; }
.pcard__short { font-size: .92rem; color: var(--cacao-soft); margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__where { font-size: .82rem; color: var(--cacao-soft); margin-top: 4px; }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price strong { font-size: 1.25rem; color: var(--cacao); }
.price del { font-size: .9rem; color: var(--cacao-soft); }
.add-btn { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; background: var(--framb); color: #fff; display: grid; place-items: center; transition: transform .4s var(--ease), background .2s; }
.add-btn:hover { background: var(--framb-deep); transform: rotate(90deg) scale(1.08); }
.add-btn:disabled { background: var(--line); color: var(--cacao-soft); transform: none; cursor: not-allowed; }
.add-btn svg { width: 22px; height: 22px; stroke-width: 2.5; }
.shop__more { text-align: center; margin-top: 46px; }

/* ---------- Combos y ofertas ---------- */
.deals { padding: 90px 0; background: var(--salvia-soft); border-radius: 48px; margin: 0 12px; overflow: hidden; }
.deals__nav { display: flex; gap: 10px; }
.deals__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 24px; scrollbar-width: none; }
.deals__rail::-webkit-scrollbar { display: none; }
.deals__rail .pcard { scroll-snap-align: start; }
.pcard__countdown { font-size: .82rem; font-weight: 700; color: var(--framb); }
.pcard__includes { font-size: .85rem; color: var(--cacao-soft); margin: 4px 0 0; padding: 0; list-style: none; }
.pcard__includes li::before { content: "✿ "; color: var(--rosa); }

/* ---------- Planeta ---------- */
.planet { padding: 110px 0; }
.planet__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.planet__text > p { color: var(--cacao-soft); font-size: 1.08rem; }
.cycle { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; }
.cycle li { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: var(--r-md); background: #fff; border: 1.5px solid var(--line); transition: transform .4s var(--ease), border-color .3s; }
.cycle li:hover { transform: translateX(8px); border-color: var(--salvia); }
.cycle li > span { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--salvia); color: var(--cacao); display: grid; place-items: center; font-weight: 700; }
.cycle strong { display: block; }
.cycle li div { color: var(--cacao-soft); font-size: .96rem; }
.cycle li div strong { color: var(--cacao); font-size: 1.02rem; }
.planet__art { position: relative; }
.earth { width: 100%; max-width: 460px; margin: auto; display: block; stroke: none; }
.earth__sea { fill: var(--salvia-soft); stroke: var(--salvia); stroke-width: 3; }
.earth__land { fill: var(--salvia); }
.orbit { transform-origin: 200px 200px; animation: spinSlow 18s linear infinite; }
.orbit circle:first-child { stroke: var(--rosa); stroke-width: 2; }
.orbit__dot { fill: var(--rosa); }
.leaf-grow { position: absolute; left: 50%; top: 50%; width: 110px; translate: -50% -60%; }
.leaf-grow svg { color: var(--musgo); stroke-width: 4; }
.leaf-grow path { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.8s var(--ease); }
.leaf-grow path + path { fill: var(--framb); fill-opacity: 0; transition: stroke-dashoffset 1.8s var(--ease) .6s, fill-opacity 1s ease 1.6s; }
.planet__art.is-in .leaf-grow path { stroke-dashoffset: 0; }
.planet__art.is-in .leaf-grow path + path { fill-opacity: .85; }

/* ---------- Envío ---------- */
.ship { margin: 0 12px; border-radius: 48px; background: var(--framb); color: #fff; padding: 60px 0; overflow: hidden; position: relative; }
.ship .h-display { color: #fff; margin-bottom: 8px; }
.ship p { margin: 0; color: #FCE6E3; max-width: 56ch; }
.ship__inner { display: grid; grid-template-columns: 150px 1fr auto; gap: 34px; align-items: center; }
.ship__road { position: relative; height: 90px; border-bottom: 3px dashed rgba(255,255,255,.5); overflow: hidden; }
.ship__van { position: absolute; bottom: 4px; width: 120px; fill: #fff; stroke: none; animation: drive 5s var(--ease) infinite; }
.ship__van circle { fill: var(--cacao); stroke: #fff; stroke-width: 3; }
.ship__heart { fill: var(--rosa); }
@keyframes drive { 0% { left: -130px; } 45%, 55% { left: 15px; transform: translateY(0); } 50% { transform: translateY(-3px); } 100% { left: 160px; } }

/* ---------- Tiendas ---------- */
.stores { padding: 100px 0; text-align: center; }
.stores .sec-head { margin-inline: auto; }
.stores__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); justify-content: center; gap: 22px; text-align: left; }
.store-card { position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 28px; animation: cardIn .6s var(--ease) both; transition: transform .4s var(--ease), box-shadow .4s; }
.store-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.store-card h3 { font-family: var(--f-display); font-size: 1.35rem; margin: 0 0 2px; }
.store-card__city { color: var(--musgo); font-weight: 700; margin: 0 0 12px; }
.store-card p { margin: 0 0 6px; }
.store-card__pin { position: absolute; top: 24px; right: 24px; width: 46px; height: 46px; border-radius: var(--blob); background: var(--blush); color: var(--framb); display: grid; place-items: center; animation: morph 8s infinite; }
.store-card__pin svg { width: 24px; }
.store-card__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.empty { text-align: center; padding: 40px 20px; color: var(--cacao-soft); }
.empty h3 { font-family: var(--f-display); color: var(--cacao); font-size: 1.5rem; }

/* ---------- Pie ---------- */
.footer { position: relative; background: var(--cacao); color: #E9D7D8; margin-top: 80px; padding: 30px 0 30px; }
.footer__wave { position: absolute; left: 0; right: 0; top: -79px; height: 80px; color: var(--cacao); }
.footer__wave svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
.footer__inner { width: min(1200px, 100% - 32px); margin: auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: 30px 0; }
.footer h3 { font-family: var(--f-display); color: #fff; font-size: 1.15rem; }
.footer a { display: block; color: #E9D7D8; text-decoration: none; padding: 3px 0; transition: color .2s, translate .3s var(--ease); }
.footer a:hover { color: var(--rosa); translate: 4px 0; }
.footer__brand img { width: 96px; background: transparent; margin-bottom: 14px; }
.footer__brand p, .footer__promise p { font-size: .95rem; margin: 0; }
.footer__legal { width: min(1200px, 100% - 32px); margin: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: .88rem; color: #C9B3B5; }
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(37,211,102,.6); animation: waIn .8s var(--ease) 1s both; transition: transform .3s var(--ease); }
.wa-float:hover { transform: scale(1.1) rotate(-8deg); }
.wa-float svg { width: 32px; height: 32px; fill: currentColor; stroke: none; }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: ring 2.4s ease-out infinite; }
@keyframes ring { to { transform: scale(1.6); opacity: 0; } }
@keyframes waIn { from { transform: scale(0) rotate(-90deg); } }

/* ---------- Aparición al hacer scroll ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.reveal.is-in { opacity: 1; transform: none; }
.flip.reveal { transform: translateY(40px) rotate(-2deg); }
.flip.reveal.is-in { transform: none; }

/* ---------- Carrito (drawer) ---------- */
.drawer { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.drawer__scrim, .modal__scrim, .filters-scrim { position: absolute; inset: 0; background: rgba(58,38,41,.45); opacity: 0; transition: opacity .4s; backdrop-filter: blur(3px); }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--nube); display: flex; flex-direction: column; transform: translateX(105%); transition: transform .55s var(--ease); box-shadow: -20px 0 60px -20px rgba(58,38,41,.35); border-radius: 32px 0 0 32px; }
.drawer.is-open { pointer-events: auto; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 14px; }
.drawer__head h2 { font-family: var(--f-display); font-size: 1.6rem; margin: 0; }
.drawer__body { flex: 1; overflow-y: auto; padding: 0 24px 20px; overscroll-behavior: contain; }
.drawer__foot { padding: 16px 24px calc(18px + env(safe-area-inset-bottom)); border-top: 1.5px solid var(--line); background: #fff; }
.cart-empty { text-align: center; padding: 50px 10px; }
.cart-empty__art { width: 140px; height: 140px; margin: 0 auto 18px; border-radius: var(--blob); background: var(--blush); display: grid; place-items: center; color: var(--framb); animation: morph 8s infinite; }
.cart-empty__art svg { width: 56px; height: 56px; }
.cart-empty p { color: var(--cacao-soft); }
.citem { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1.5px dashed var(--line); animation: cardIn .4s var(--ease) both; }
.citem img { width: 76px; height: 76px; border-radius: 16px; object-fit: cover; background: var(--blush); }
.citem h3 { font-size: 1rem; font-weight: 700; margin: 0 0 2px; line-height: 1.3; }
.citem__store { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--musgo); font-weight: 600; background: var(--salvia-soft); padding: 2px 9px; border-radius: var(--r-pill); margin: 2px 0 6px; }
.citem__store svg { width: 13px; height: 13px; }
.citem__price { font-weight: 700; }
.citem__price del { font-weight: 400; color: var(--cacao-soft); font-size: .85rem; margin-left: 4px; }
.citem__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.citem__remove { border: 0; background: none; color: var(--cacao-soft); font-size: .85rem; text-decoration: underline; padding: 2px; }
.citem__remove:hover { color: var(--framb); }
.citem__warn { grid-column: 1 / -1; font-size: .85rem; color: #8F2436; background: #FDE2E4; border-radius: 10px; padding: 6px 10px; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: #fff; }
.stepper button { width: 32px; height: 32px; border: 0; background: none; border-radius: 50%; font-size: 1.1rem; font-weight: 700; color: var(--framb); }
.stepper button:hover:not(:disabled) { background: var(--blush); }
.stepper button:disabled { color: var(--line); cursor: not-allowed; }
.stepper output, .stepper input { width: 32px; text-align: center; font-weight: 700; border: 0; background: none; }
.stepper--lg button { width: 44px; height: 44px; }
.stepper--lg output { width: 40px; font-size: 1.1rem; }

.delivery { margin: 18px 0 8px; }
.delivery legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.delivery fieldset { border: 0; padding: 0; margin: 0; }
.opt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt-card { position: relative; display: block; cursor: pointer; }
.opt-card input { position: absolute; opacity: 0; pointer-events: none; }
.opt-card > span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 14px; border-radius: var(--r-md); border: 2px solid var(--line); background: #fff; transition: border-color .2s, background .2s, transform .3s var(--ease); }
.opt-card strong { display: flex; align-items: center; gap: 8px; }
.opt-card strong svg { width: 20px; height: 20px; color: var(--framb); }
.opt-card small { color: var(--cacao-soft); line-height: 1.35; }
.opt-card input:checked + span { border-color: var(--framb); background: var(--blush); }
.opt-card input:focus-visible + span { outline: 3px solid var(--framb); outline-offset: 2px; }
.opt-card:hover > span { transform: translateY(-2px); }
.notice { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); font-size: .92rem; margin: 12px 0; line-height: 1.45; }
.notice svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.notice--warn { background: #FDE2E4; color: #8F2436; }
.notice--ok { background: var(--salvia-soft); color: #2F4A3B; }
.notice--info { background: var(--miel-soft); color: #6B4A12; }
.freebar { margin: 12px 0 4px; }
.freebar__track { height: 10px; border-radius: 10px; background: var(--blush); overflow: hidden; }
.freebar__fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--rosa), var(--framb)); transition: width .8s var(--ease); }
.freebar p { margin: 6px 0 0; font-size: .9rem; color: var(--cacao-soft); }
.totals { display: grid; gap: 4px; margin-bottom: 12px; }
.totals div { display: flex; justify-content: space-between; font-size: .95rem; color: var(--cacao-soft); }
.totals .totals__grand { font-size: 1.2rem; color: var(--cacao); font-weight: 700; padding-top: 6px; }
.totals .save { color: var(--musgo); font-weight: 600; }
.form-grid { display: grid; gap: 10px; margin: 14px 0; }
.form-grid .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.input { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; transition: border-color .2s, box-shadow .2s; }
.input:focus { outline: 0; border-color: var(--rosa); box-shadow: 0 0 0 4px rgba(238,122,139,.18); }
.input.is-invalid { border-color: #C0394E; }
.lbl { font-size: .88rem; font-weight: 600; display: grid; gap: 4px; }
.cart-step-back { border: 0; background: none; color: var(--framb); font-weight: 700; padding: 0; margin-bottom: 4px; }
.success { text-align: center; padding: 30px 6px; }
.success__check { width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 50%; background: var(--salvia-soft); color: var(--musgo); display: grid; place-items: center; animation: pop .7s var(--ease); }
.success__check svg { width: 48px; height: 48px; stroke-width: 3; stroke-dasharray: 40; stroke-dashoffset: 40; animation: drawCheck .6s .3s forwards; }
@keyframes pop { from { transform: scale(0); } }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

/* ---------- Modal producto / alertas ---------- */
.modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; pointer-events: none; }
.modal.is-open { pointer-events: auto; }
.modal.is-open .modal__scrim { opacity: 1; }
.modal__panel { position: relative; background: var(--nube); border-radius: 36px; width: min(980px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; opacity: 0; transform: translateY(30px) scale(.96); transition: opacity .35s, transform .5s var(--ease); box-shadow: 0 40px 80px -30px rgba(58,38,41,.5); }
.modal.is-open .modal__panel { opacity: 1; transform: none; }
.modal__close { position: absolute; top: 16px; right: 16px; z-index: 2; }
.pm { display: grid; grid-template-columns: 1fr 1.1fr; }
.pm__media { background: var(--blush); position: relative; min-height: 100%; }
.pm__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.pm__body { padding: 34px 32px 30px; }
.pm__cat { color: var(--musgo); font-weight: 700; font-size: .92rem; }
.pm__title { font-family: var(--f-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); margin: 4px 0 10px; padding-right: 40px; }
.pm__price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.pm__price strong { font-size: 1.7rem; }
.pm__price del { color: var(--cacao-soft); }
.pm__desc { color: var(--cacao-soft); }
.pm__skin { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.pm__skin span { padding: 4px 12px; border-radius: var(--r-pill); background: var(--salvia-soft); color: #2F4A3B; font-size: .85rem; font-weight: 600; }
.pm details { border-top: 1.5px solid var(--line); padding: 10px 0; }
.pm summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; }
.pm summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--framb); transition: transform .3s; }
.pm details[open] summary::after { transform: rotate(45deg); }
.pm details p, .pm details ul { margin: 8px 0 2px; color: var(--cacao-soft); font-size: .95rem; }
.pm__stores { margin: 16px 0; }
.pm__stores h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.store-opts { display: grid; gap: 8px; }
.store-opt { display: block; cursor: pointer; }
.store-opt input { position: absolute; opacity: 0; }
.store-opt > span { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--line); background: #fff; transition: border-color .2s, background .2s; }
.store-opt > span::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); transition: border .2s, background .2s; }
.store-opt input:checked + span { border-color: var(--framb); background: var(--blush); }
.store-opt input:checked + span::before { border: 6px solid var(--framb); }
.store-opt input:focus-visible + span { outline: 3px solid var(--framb); outline-offset: 2px; }
.store-opt b { display: block; font-size: .95rem; }
.store-opt small { color: var(--cacao-soft); }
.store-opt em { font-style: normal; font-size: .82rem; font-weight: 700; color: var(--musgo); background: var(--salvia-soft); padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.store-opt em.low { color: #8F2436; background: #FDE2E4; }
.pm__buy { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.pm__buy .btn { flex: 1; min-width: 200px; }
.modal__panel--alert { width: min(440px, 100%); padding: 36px 30px 28px; text-align: center; }
.alert__icon { width: 70px; height: 70px; margin: 0 auto 14px; border-radius: var(--blob); background: #FDE2E4; color: #8F2436; display: grid; place-items: center; font-family: var(--f-display); font-size: 2.2rem; animation: morph 6s infinite, wiggle .6s var(--ease); }
@keyframes wiggle { 25% { rotate: -10deg; } 50% { rotate: 8deg; } 75% { rotate: -4deg; } }
.modal__panel--alert h2 { font-family: var(--f-display); font-size: 1.5rem; }
.modal__panel--alert p { color: var(--cacao-soft); }
.alert__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

.toast { position: fixed; left: 16px; right: 16px; bottom: 24px; z-index: 130; margin: 0 auto; width: fit-content; max-width: 560px; transform: translateY(calc(100% + 40px)); visibility: hidden; background: var(--cacao); color: #fff; padding: 12px 14px 12px 20px; border-radius: 24px; font-weight: 600; box-shadow: var(--shadow); transition: transform .5s var(--ease), visibility .5s; display: flex; gap: 12px; align-items: center; line-height: 1.35; font-size: .95rem; }
.toast.is-on { transform: none; visibility: visible; }
.toast button { flex: none; white-space: nowrap; border: 0; background: var(--rosa); color: #fff; border-radius: var(--r-pill); padding: 6px 12px; font-weight: 700; }

/* ---------- Página de catálogo ---------- */
.cat-hero { position: relative; padding: 70px 0 50px; overflow: hidden; }
.cat-hero .h-display { font-size: clamp(2.4rem, 1.5rem + 3.5vw, 4.4rem); margin-bottom: 6px; }
.cat-hero p { color: var(--cacao-soft); margin: 0; font-size: 1.1rem; }
.cat-hero__blob { position: absolute; right: -120px; top: -160px; width: 460px; height: 460px; border-radius: var(--blob); background: var(--blush); z-index: -1; animation: morph 12s infinite; }
.catalog { display: grid; grid-template-columns: 280px 1fr; gap: 34px; align-items: start; padding-bottom: 40px; }
.filters { position: sticky; top: calc(var(--nav-h) + 12px); background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; max-height: calc(100vh - var(--nav-h) - 24px); }
.filters__head { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px 6px; }
.filters__head h2 { font-family: var(--f-display); font-size: 1.4rem; margin: 0; }
.filters__close, .filters__apply, .filters-toggle { display: none; }
.filters__body { padding: 8px 22px; overflow-y: auto; }
.filters__foot { padding: 14px 22px 20px; border-top: 1.5px solid var(--line); display: flex; gap: 8px; }
.filters__foot .btn { flex: 1; }
.field { display: grid; gap: 8px; margin: 0 0 18px; border: 0; padding: 0; min-width: 0; }
.field > span, .field legend { font-weight: 700; font-size: .95rem; padding: 0; margin-bottom: 8px; }
.field select, .sort select { width: 100%; padding: 11px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8475C' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; appearance: none; padding-right: 38px; }
.search { position: relative; display: block; }
.search svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 18px; color: var(--cacao-soft); }
.search input { width: 100%; padding: 11px 14px 11px 38px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--nube); }
.search input:focus, .field select:focus, .sort select:focus { outline: 0; border-color: var(--rosa); box-shadow: 0 0 0 4px rgba(238,122,139,.18); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; }
.chip span { display: inline-block; padding: 7px 13px; border-radius: var(--r-pill); border: 1.5px solid var(--line); font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .2s var(--ease); user-select: none; }
.chip span:hover { border-color: var(--rosa); }
.chip input:checked + span { background: var(--framb); color: #fff; border-color: var(--framb); }
.chip input:focus-visible + span { outline: 3px solid var(--framb); outline-offset: 2px; }
.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: .95rem; margin-bottom: 4px; }
.switch input { position: absolute; opacity: 0; }
.switch__ui { width: 44px; height: 26px; border-radius: 13px; background: var(--line); position: relative; transition: background .25s; flex: none; }
.switch__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); transition: transform .35s var(--ease); }
.switch input:checked + .switch__ui { background: var(--framb); }
.switch input:checked + .switch__ui::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__ui { outline: 3px solid var(--framb); outline-offset: 2px; }
.results__bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.active-filters button { border: 0; background: var(--blush); color: var(--framb); font-weight: 700; font-size: .85rem; padding: 6px 10px 6px 12px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 6px; animation: cardIn .3s var(--ease); }
.active-filters button:hover { background: var(--rosa); color: #fff; }
.active-filters button::after { content: "×"; font-size: 1.1rem; line-height: 1; }
.sort { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.sort select { width: auto; }
.grid-products--catalog { grid-template-columns: repeat(3, 1fr); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .grid-products { grid-template-columns: repeat(3, 1fr); }
  .grid-products--catalog { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  :root { --nav-h: 68px; }
  .burger { display: flex; }
  .nav__links { position: fixed; inset: var(--nav-h) 12px auto; flex-direction: column; background: #fff; border-radius: 28px; padding: 14px; box-shadow: var(--shadow); opacity: 0; transform: translateY(-14px) scale(.98); pointer-events: none; transition: opacity .3s, transform .4s var(--ease); }
  .nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a { padding: 14px 16px; font-size: 1.05rem; }
  .nav__links a[aria-current="page"]::after { left: 6px; top: 50%; bottom: auto; transform: translateY(-50%); }
  .slide__inner { grid-template-columns: 1fr; gap: 10px; text-align: left; }
  .slide__art { order: -1; width: min(420px, 82%); margin: 0 auto; }
  .slide { min-height: auto; padding-bottom: 100px; }
  .about__grid, .planet__grid { grid-template-columns: 1fr; gap: 40px; }
  .about__art { max-width: 440px; width: 100%; margin: auto; }
  .never__grid { grid-template-columns: repeat(2, 1fr); }
  .ship__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .ship__road { width: 160px; }
  .pm { grid-template-columns: 1fr; }
  .pm__media img { aspect-ratio: 4 / 3; }
  .catalog { grid-template-columns: 1fr; }
  .filters-toggle { display: inline-flex; position: sticky; top: calc(var(--nav-h) + 8px); z-index: 20; justify-self: start; background: #fff; }
  .filters-toggle svg { width: 20px; }
  .filters { position: fixed; z-index: 105; left: 0; right: 0; bottom: 0; top: auto; max-height: 86vh; max-height: 86dvh; border-radius: 32px 32px 0 0; transform: translateY(105%); transition: transform .5s var(--ease); border: 0; }
  .filters.is-open { transform: none; }
  .filters__close, .filters__apply { display: inline-flex; }
  .filters-scrim { position: fixed; z-index: 104; pointer-events: none; }
  .filters-scrim.is-on { opacity: 1; pointer-events: auto; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .nav__logo span { display: none; }
  .grid-products, .grid-products--catalog { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pcard { padding: 8px 8px 14px; border-radius: 24px; }
  .pcard__media { border-radius: 18px; }
  .pcard__name { font-size: 1.02rem; }
  .pcard__short { display: none; }
  .price strong { font-size: 1.08rem; }
  .add-btn { width: 40px; height: 40px; }
  .hero__dots button { width: 28px; }
  .hero__controls { bottom: 26px; gap: 8px; }
  .round-btn { width: 42px; height: 42px; }
  .never, .deals, .ship { margin: 0 8px; border-radius: 32px; }
  .never__grid { grid-template-columns: 1fr; }
  .flip { height: 180px; }
  .stats { grid-template-columns: 1fr; }
  .stats li { display: flex; align-items: center; gap: 14px; }
  .stats strong { margin: 0; min-width: 84px; }
  .about { padding: 70px 0; }
  .duo__switch button { min-width: 0; padding: 12px 20px; }
  .footer__inner { grid-template-columns: 1fr; gap: 24px; }
  .drawer__panel { border-radius: 0; }
  .opt-cards, .form-grid .two { grid-template-columns: 1fr; }
  .modal { padding: 0; align-items: end; }
  .modal__panel { border-radius: 30px 30px 0 0; max-height: 92vh; max-height: 92dvh; }
  .modal__panel--alert { border-radius: 30px 30px 0 0; }
  .pm__body { padding: 24px 20px 26px; }
  .deals__rail { grid-auto-columns: 76%; }
  .wa-float { width: 54px; height: 54px; right: 14px; bottom: 14px; }
  .sort span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}
.hero__track.no-trans, .hero__track.no-trans * { transition: none !important; }
.filters-scrim { position: fixed; z-index: 104; pointer-events: none; }
.filters-scrim.is-on { opacity: 1; pointer-events: auto; }