/* Tienda Logos Partum — branding oficial (repo logospartum).
   Tipografía: DM Sans para TODO (productos, descripciones, checkout, títulos).
   Syne SOLO para el wordmark "Logos Partum" y .font-display (títulos puntuales).
   Tema: claro por defecto + oscuro. Paletas idénticas a logospartum.com. */

@font-face { font-family:'Syne'; src:url('/fonts/syne-regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Syne'; src:url('/fonts/syne-bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Syne'; src:url('/fonts/syne-extra.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('/fonts/dm-sans-latin.woff2') format('woff2'); font-weight:300 500; font-display:swap; }

/* Tokens DARK (base). El tema claro los sobreescribe y es el DEFAULT aplicado. */
:root {
  --bg: #0F0F0D; --surface: #1A1A17; --surface2: #222220;
  --accent: #A9B1FF; --accent2: #6667AB; --gold: #D4A853;
  --text: #E8E8E0; --muted: #888880; --border: rgba(169,177,255,0.12);
  --danger: #FF6B6B; --success: #4ade80;
  --card: #16161a; --radius: 14px; --maxw: 1200px;
}
/* Tema CLARO (default aplicado por el script inline). */
html[data-theme="light"] {
  --bg: #EDF1F2; --surface: #ffffff; --surface2: #E3EAEC;
  --accent: #6667AB; --accent2: #4A4B8A; --gold: #7A5E25;
  --text: #0E1E28; --muted: #4A5A63; --border: rgba(0,60,80,0.14);
  --danger: #B23A3A; --success: #1F7A3C;
  --card: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x: clip (no 'hidden') para no romper position:sticky del nav */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; max-width: 100%; }
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg); color: var(--text);
  overflow-x: clip; font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; min-height: 100vh;
  transition: background .3s, color .3s;
}
h1,h2,h3,h4,h5 { font-family:'DM Sans',sans-serif; line-height:1.2; letter-spacing:-0.02em; font-weight:700; }
/* Syne SOLO aquí: wordmark + títulos puntuales marcados con .font-display */
.font-display, .wordmark { font-family:'Syne',sans-serif !important; letter-spacing:-0.01em; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; display:block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* Glows de fondo (materia del branding) */
.glow-wrap { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.bg-glow { position:absolute; width:680px; height:680px; border-radius:50%; top:-240px; left:-200px; filter:blur(80px); background:radial-gradient(circle, rgba(169,177,255,0.12), transparent 60%); }
.bg-glow.two { top:auto; left:auto; bottom:-320px; right:-200px; background:radial-gradient(circle, rgba(212,168,83,0.08), transparent 60%); }
html[data-theme="light"] .bg-glow { background:radial-gradient(circle, rgba(102,103,171,0.18), transparent 60%); }
html[data-theme="light"] .bg-glow.two { background:radial-gradient(circle, rgba(122,94,37,0.10), transparent 60%); }
main { position:relative; z-index:1; }

/* ── NAV (diseño de logospartum.com) ─────────────────────────────────────── */
.lp-nav { position:sticky; top:0; z-index:50; border-bottom:1px solid var(--border); backdrop-filter:blur(16px); background:rgba(15,15,13,0.90); height:62px; display:flex; align-items:center; transition:background .3s, border-color .3s; }
html[data-theme="light"] .lp-nav { background:rgba(255,255,255,0.90); border-bottom-color:rgba(0,60,80,0.14); }
.lp-nav-inner { max-width:var(--maxw); margin:0 auto; padding:0 20px; width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lp-logo img { height:30px; width:auto; }
.logo-light { display:none; } html[data-theme="light"] .logo-dark { display:none; } html[data-theme="light"] .logo-light { display:block; }
.lp-nav-links { display:flex; gap:24px; align-items:center; }
.lp-nav-links a { color:var(--muted); font-size:0.9rem; font-weight:500; transition:color .2s; white-space:nowrap; }
.lp-nav-links a:hover, .lp-nav-links a.active { color:var(--text); }
.lp-nav-right { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.theme-toggle { background:transparent; border:1px solid var(--border); border-radius:8px; padding:7px; cursor:pointer; color:var(--muted); display:flex; align-items:center; transition:color .2s, border-color .2s; }
.theme-toggle:hover { color:var(--text); border-color:var(--accent); }
.icon-sun { display:block; } .icon-moon { display:none; }
html[data-theme="light"] .icon-sun { display:none; } html[data-theme="light"] .icon-moon { display:block; }
.cart-link { position:relative; color:var(--text); border:1px solid var(--border); border-radius:8px; padding:7px 10px; font-size:0.85rem; font-weight:600; display:inline-flex; align-items:center; transition:border-color .2s, background .2s; flex-shrink:0; }
.cart-link:hover { border-color:var(--accent); }
/* Badge ABSOLUTO sobre la esquina del icono: no cambia el ancho del nav, así el
   número de productos NO desplaza la hamburguesa ni la desborda. */
.cart-count { position:absolute; top:-7px; right:-7px; background:var(--accent2); color:#fff; border-radius:999px; font-size:0.66rem; font-weight:800; line-height:1; padding:3px 6px; min-width:18px; text-align:center; box-shadow:0 0 0 2px var(--bg); pointer-events:none; }
html[data-theme="light"] .cart-count { background:var(--accent); }
.lp-hamburger { display:none; background:transparent; border:1px solid var(--border); border-radius:8px; padding:8px 9px; cursor:pointer; flex-direction:column; gap:4px; }
.lp-hamburger span { display:block; width:18px; height:2px; background:var(--text); border-radius:2px; transition:transform .25s, opacity .25s; }
.lp-hamburger.open span:nth-child(1){ transform:rotate(45deg) translate(4px,4px); }
.lp-hamburger.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.lp-hamburger.open span:nth-child(3){ transform:rotate(-45deg) translate(4px,-4px); }
.lp-mobile-drop { display:none; position:fixed; top:70px; right:12px; left:12px; background:var(--surface); backdrop-filter:blur(14px); border:1px solid var(--border); border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,0.25); padding:10px; z-index:200; transform:translateY(-6px); opacity:0; transition:opacity .2s, transform .2s; }
.lp-mobile-drop.open { display:block; opacity:1; transform:translateY(0); }
.lp-mobile-drop a { display:block; padding:13px 16px; font-size:1rem; font-weight:600; color:var(--text); border-radius:10px; }
.lp-mobile-drop a:hover { background:var(--surface2); }

/* Hero */
.hero { padding:64px 0 40px; }
.hero .eyebrow { display:inline-block; font-size:0.68rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); border:1px solid var(--border); background:rgba(102,103,171,0.06); padding:6px 15px; border-radius:100px; margin-bottom:18px; }
.hero h1 { font-size:clamp(2rem, 6vw, 3.6rem); line-height:1.06; margin:0 0 14px; max-width:16ch; }
.hero p { color:var(--muted); max-width:52ch; font-size:clamp(1rem,2.4vw,1.12rem); }

/* Category chips */
.cat-bar { display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 6px; }
.cat-chip { padding:9px 18px; border-radius:100px; border:1px solid var(--border); background:var(--surface); color:var(--muted); font-size:0.88rem; font-weight:600; cursor:pointer; transition:all .15s; white-space:nowrap; }
.cat-chip:hover { color:var(--text); border-color:var(--accent); }
.cat-chip.active { background:var(--accent); border-color:var(--accent); color:#fff; }
html[data-theme="dark"] .cat-chip.active, :root .cat-chip.active { color:#0F0F0D; }

/* Product grid */
.section-title { display:flex; align-items:baseline; justify-content:space-between; margin:30px 0 18px; gap:12px; flex-wrap:wrap; }
.section-title h2 { font-size:clamp(1.3rem,3.5vw,1.7rem); }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .18s, border-color .18s, box-shadow .18s; }
.card:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:0 12px 30px rgba(0,0,0,0.10); }
.card .ph { aspect-ratio:1; background:var(--surface2); overflow:hidden; }
.card .ph img { width:100%; height:100%; object-fit:cover; }
.card .body { padding:14px 15px 17px; }
.card .cat-tag { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent); font-weight:700; }
.card .body h3 { font-size:0.98rem; font-weight:600; margin-top:4px; letter-spacing:-0.01em; }
.card .price { margin-top:8px; display:flex; align-items:baseline; gap:8px; }
.card .price .now { color:var(--text); font-weight:700; font-size:1.02rem; }
.card .price .was { color:var(--muted); text-decoration:line-through; font-size:0.82rem; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:0.95rem; padding:13px 22px; border-radius:10px; border:none; cursor:pointer; transition:transform .12s, filter .15s, background .15s; }
.btn-primary { background:var(--accent); color:#fff; }
html[data-theme="dark"] .btn-primary, :root .btn-primary { color:#0F0F0D; }
html[data-theme="light"] .btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { filter:brightness(1.06); }
.btn-primary:active { transform:translateY(1px); }
.btn-ghost { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover { border-color:var(--accent); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-block { width:100%; }

/* Product detail */
.pdp { display:grid; grid-template-columns:1fr 1fr; gap:44px; padding:32px 0 60px; }
.pdp .gallery { aspect-ratio:1; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.pdp .gallery img { width:100%; height:100%; object-fit:cover; }
.pdp h1 { font-size:clamp(1.6rem,4vw,2.1rem); margin-bottom:6px; }
.pdp .vendor { color:var(--accent); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.1em; font-weight:700; }
.pdp .price-lg { font-size:1.7rem; font-weight:700; margin:14px 0; }
.pdp .price-lg .was { color:var(--muted); text-decoration:line-through; font-size:1.05rem; font-weight:500; margin-left:10px; }
.pdp .desc { color:var(--muted); margin:16px 0; line-height:1.7; }
.opt-group { margin:16px 0; }
.opt-group label { display:block; font-size:0.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px; font-weight:600; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { padding:9px 16px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; font-size:0.9rem; transition:all .12s; }
.chip:hover { border-color:var(--accent); }
.chip.active { border-color:var(--accent); background:rgba(102,103,171,0.12); }
.stock { font-size:0.85rem; margin:10px 0 18px; font-weight:600; }
.stock.ok { color:var(--success); } .stock.low { color:var(--gold); } .stock.out { color:var(--danger); }

/* Cart / checkout */
.panel { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; }
.line { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); }
.line:last-child { border-bottom:none; }
.line .thumb { width:66px; height:66px; border-radius:10px; background:var(--surface2); overflow:hidden; flex:none; }
.line .thumb img { width:100%; height:100%; object-fit:cover; }
.line .info { flex:1; min-width:0; }
.line .info .t { font-weight:600; font-size:0.95rem; }
.line .info .v { color:var(--muted); font-size:0.82rem; }
.qty { display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:9px; overflow:hidden; }
.qty button { background:var(--surface2); color:var(--text); border:none; width:30px; height:30px; cursor:pointer; font-size:1rem; }
.qty button:hover { background:var(--accent); color:#fff; }
.qty span { min-width:34px; text-align:center; font-size:0.9rem; }
.summary-row { display:flex; justify-content:space-between; padding:8px 0; color:var(--muted); }
.summary-row.total { color:var(--text); font-weight:800; font-size:1.2rem; border-top:1px solid var(--border); margin-top:8px; padding-top:16px; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:0.82rem; color:var(--muted); margin-bottom:6px; font-weight:500; }
.field input, .field select { width:100%; background:var(--surface); border:1px solid var(--border); border-radius:10px; color:var(--text); padding:12px 14px; font-family:'DM Sans',sans-serif; font-size:0.95rem; }
.field input:focus, .field select:focus { outline:none; border-color:var(--accent); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rate-opt { display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--border); border-radius:10px; margin-bottom:8px; cursor:pointer; background:var(--surface); }
.rate-opt.active { border-color:var(--accent); background:rgba(102,103,171,0.10); }
.rate-opt .r-price { margin-left:auto; font-weight:700; color:var(--accent); }
.empty { text-align:center; padding:70px 20px; color:var(--muted); }
.note { color:var(--muted); font-size:0.82rem; margin-top:10px; text-align:center; }
.secure { display:flex; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:0.82rem; margin-top:14px; }
.co-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:26px; }

footer.site { border-top:1px solid var(--border); padding:36px 0; color:var(--muted); font-size:0.85rem; margin-top:56px; position:relative; z-index:1; }
footer.site .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--accent); color:#fff; padding:12px 22px; border-radius:12px; font-weight:700; opacity:0; transition:all .25s; z-index:300; box-shadow:0 8px 30px rgba(0,0,0,0.2); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 1000px) { .grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 860px) {
  .lp-nav-links, .nav-desktop-only { display:none !important; }
  .lp-hamburger { display:flex; flex:none; }
  .pdp { grid-template-columns:1fr; gap:22px; }
  .co-grid { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
  .grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .hero { padding:40px 0 26px; }
  .wrap { padding:0 16px; }
  .card .body { padding:12px 12px 14px; }
  .card .body h3 { font-size:0.9rem; }
  .row2 { grid-template-columns:1fr; }
  .panel { padding:18px; }
  /* NAV MÓVIL: logo más chico + más aire + nada se desborda */
  .lp-nav { height:58px; }
  .lp-nav-inner { padding:0 14px; gap:8px; }
  .lp-logo img { height:24px; }
  .lp-nav-right { gap:12px; }
  .theme-toggle { padding:6px; }
  .cart-link { padding:6px 9px; }
}
@media (max-width: 360px) {
  .lp-logo img { height:21px; }
  .lp-nav-right { gap:9px; }
}
@media (max-width: 380px) { .grid { grid-template-columns:1fr 1fr; gap:10px; } }