/* ===== Variables de marca ===== */
:root{
  --bg:oklch(0.97 0.012 55);--text:oklch(0.45 0.055 40);--card:oklch(0.988 0.008 55);
  --primary:oklch(0.66 0.095 38);--primary-fg:oklch(0.98 0.01 55);
  --secondary:oklch(0.925 0.035 62);--muted:oklch(0.945 0.022 58);--muted-fg:oklch(0.52 0.04 42);
  --accent:oklch(0.79 0.085 48);--accent-fg:oklch(0.34 0.06 40);--border:oklch(0.9 0.028 55);
  --font-sans:"Manrope",system-ui,sans-serif;--font-display:"Cormorant Garamond",Georgia,serif;
  --space:clamp(1.25rem,4vw,2.5rem);--max:80rem;--radius:0;--shadow:0 .5rem 1.75rem oklch(0.55 0.08 38 / .22);
}
/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
img{max-width:100%;height:auto;display:block}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
/* ===== Tipografía ===== */
body{font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.05}
h1{font-size:clamp(2.8rem,7vw,4.5rem)}h2{font-size:clamp(2.4rem,5vw,4.2rem)}h3{font-size:1.5rem}
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--space)}
.kicker{display:flex;align-items:center;gap:.75rem;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.2em;color:var(--primary)}
/* ===== Botones ===== */
.btn{display:inline-flex;align-items:center;gap:.75rem;min-height:2.75rem;background:var(--accent);color:var(--accent-fg);padding:.95rem 1.4rem;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;transition:transform .2s,filter .2s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.icon-btn{position:relative;display:inline-flex;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;transition:background .2s,color .2s}
.icon-btn:hover{background:var(--secondary);color:var(--primary)}
/* ===== Header / Nav ===== */
.topbar{background:var(--primary);color:var(--primary-fg);text-align:center;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;padding:.6rem 1rem}
.header{position:sticky;top:0;z-index:50;background:color-mix(in oklch,var(--bg) 95%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);transition:box-shadow .2s}
.header.scrolled{box-shadow:0 2px 12px oklch(0.55 0.08 38 / .1)}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:5rem}
.header__logo img{height:3rem;width:13rem;object-fit:contain;object-position:left}
.nav{display:none}
.nav a{position:relative;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .2s}
.nav a:hover{color:var(--primary)}.nav a:hover::after{transform:scaleX(1)}
.header__actions{display:flex;gap:.5rem}
.cart-dot{position:absolute;top:.25rem;right:.25rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--accent)}
.mobile-nav{display:none;border-top:1px solid var(--border);padding:1rem var(--space)}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:1rem 0;min-height:2.75rem;border-bottom:1px solid var(--border);font-size:.875rem;font-weight:700;text-transform:uppercase}
/* ===== Footer ===== */
.footer{background:var(--text);color:var(--bg);padding-block:3.5rem}
.footer__inner{display:flex;flex-direction:column;gap:2rem}
.footer__brand{font-family:var(--font-display);font-size:1.9rem;font-weight:600}
.footer p{font-size:.875rem;opacity:.7;max-width:28rem}
/* ===== WhatsApp ===== */
.whatsapp{position:fixed;right:1.25rem;bottom:1.25rem;z-index:40;display:inline-flex;width:3.25rem;height:3.25rem;align-items:center;justify-content:center;border-radius:50%;background:var(--primary);color:var(--primary-fg);box-shadow:var(--shadow);transition:transform .2s}
.whatsapp:hover{transform:translateY(-3px)}
@media (min-width:640px){.header__logo img{width:15rem}}
@media (min-width:1024px){
  .header__inner{height:6rem}.header__logo img{height:3.5rem;width:18rem}
  .nav{display:flex;gap:2rem}.menu-toggle,.mobile-nav.open{display:none}
  .footer__inner{flex-direction:row;justify-content:space-between;align-items:flex-end}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}