/* ===========================================================
   MUKI · sistema de diseño  (mobile-first)
   =========================================================== */
:root{
  --cream:#FBF6EF; --card:#FFFFFF; --ink:#221F1D; --muted:#7A726B;
  --primary:#FF6B4A; --primary-d:#E8512F; --accent:#1F9E6B; --accent-d:#178257;
  --line:#EADFD2; --soft:#FFF1EA;
  --radius:18px; --radius-sm:12px; --radius-pill:999px;
  --shadow:0 6px 24px rgba(34,31,29,.08); --shadow-lg:0 14px 40px rgba(34,31,29,.14);
  --maxw:1180px;
  --f-head:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--f-body); color:var(--ink); background:var(--cream);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-head); font-weight:800; line-height:1.15; margin:0 0 .5em}
h1{font-size:clamp(2rem,6vw,3.4rem); letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,4vw,2.3rem); letter-spacing:-.01em}
h3{font-size:1.2rem}
p{margin:0 0 1rem}

/* ---- contenedor (regla de oro: ancho fluido + max-width + padding px) ---- */
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:16px}
@media (min-width:768px){ .container{padding-inline:24px} }

.section{padding-block:48px}
@media (min-width:768px){ .section{padding-block:72px} }

/* ---- botones ---- */
.btn{display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-family:var(--f-head); font-weight:800; font-size:1rem; line-height:1;
  padding:15px 26px; border-radius:var(--radius-pill); border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  min-height:48px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary); color:#fff; box-shadow:0 8px 20px rgba(255,107,74,.35)}
.btn-primary:hover{background:var(--primary-d)}
.btn-ghost{background:transparent; border-color:var(--ink); color:var(--ink)}
.btn-ghost:hover{background:var(--ink); color:#fff}
.btn-lg{padding:18px 34px; font-size:1.1rem}

/* ---- barra superior envío gratis ---- */
.topbar{background:var(--accent); color:#fff; text-align:center; font-weight:700;
  font-size:.92rem; padding:9px 16px}
.topbar strong{font-weight:800}

/* ---- header ---- */
.site-header{position:sticky; top:0; z-index:50; background:var(--cream);
  border-bottom:1px solid var(--line)}
.header-row{display:flex; align-items:center; gap:14px; padding-block:14px}
.logo{display:inline-flex; align-items:center; gap:9px; color:var(--ink)}
.logo-mark{width:34px; height:34px; flex:none; display:block}
.logo-word{font-family:var(--f-head); font-weight:900; font-size:1.65rem; letter-spacing:-.04em; line-height:1}
.search{flex:1; display:none; position:relative}
.search input{width:100%; border:2px solid var(--line); background:#fff; border-radius:var(--radius-pill);
  padding:12px 18px; font-size:16px; font-family:var(--f-body)}
.search input:focus{outline:none; border-color:var(--primary)}
.header-actions{display:flex; align-items:center; gap:6px; margin-left:auto}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:50%; background:transparent; border:none; cursor:pointer; color:var(--ink); position:relative}
.icon-btn:hover{background:var(--soft)}
.cart-badge{position:absolute; top:4px; right:4px; background:var(--primary); color:#fff;
  font-size:.7rem; font-weight:800; min-width:18px; height:18px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; padding:0 4px}
@media (min-width:768px){ .search{display:block} }

/* ---- nav categorías ---- */
.catnav{border-top:1px solid var(--line); background:#fff}
.catnav ul{display:flex; gap:4px; list-style:none; margin:0; padding:0; overflow:visible}
.catnav a{white-space:nowrap; font-weight:700; font-size:.95rem; padding:14px 14px;
  display:inline-block; color:var(--muted)}
.catnav a:hover,.catnav a.active{background:var(--soft); color:var(--primary-d)}
.cn-deal{color:var(--primary-d)!important; font-weight:800}

/* topbar multi-item */
.topbar .sep{opacity:.5; margin:0 4px}
/* utilidades visibilidad */
.burger{display:none; background:none; border:none; cursor:pointer; color:var(--ink); padding:6px; margin-left:-4px}
.hide-mobile{display:none}
.search .s-ico{position:absolute; left:16px; top:50%; transform:translateY(-50%)}
.search input{padding-left:42px!important}

/* ---- mega-menú (desktop) ---- */
.catnav-item{position:static}
.mega{position:absolute; left:0; right:0; top:100%; background:#fff; border-top:1px solid var(--line);
  box-shadow:var(--shadow-lg); padding:0; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .16s, transform .16s, visibility 0s linear .25s; z-index:55}
/* puente invisible para que el cursor no pierda el hover al bajar al panel */
.mega::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px}
.catnav-item:hover .mega{transition-delay:0s}
.mega-inner{max-width:var(--maxw); margin-inline:auto; padding:20px 24px; display:grid;
  grid-template-columns:repeat(4,1fr); gap:6px 24px}
.mega-inner a{padding:8px 10px; border-radius:8px; font-weight:600; font-size:.92rem; color:var(--ink)}
.mega-inner a:hover{background:var(--soft); color:var(--primary-d)}
.mega-all{grid-column:1/-1; font-weight:800!important; color:var(--primary-d)!important}
.catnav{position:relative}
@media (hover:hover){ .catnav-item:hover .mega{opacity:1; visibility:visible; transform:translateY(0)} }
.catnav-item.open .mega{opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s}

/* ---- drawer + bottom nav (móvil) ---- */
.drawer-ov{position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:opacity .2s; z-index:90}
.drawer-ov.show{opacity:1; visibility:visible}
.drawer{position:fixed; top:0; left:0; bottom:0; width:86%; max-width:340px; background:var(--cream);
  transform:translateX(-100%); transition:transform .25s ease; z-index:95; display:flex; flex-direction:column; overflow-y:auto}
.drawer.show{transform:translateX(0)}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--line)}
.drawer-close{background:none; border:none; cursor:pointer; color:var(--ink); padding:6px}
.drawer-nav{padding:6px 10px; flex:1}
.dn-cat{width:100%; display:flex; align-items:center; justify-content:space-between; background:none; border:none;
  padding:15px 10px; font-family:var(--f-head); font-weight:800; font-size:1.05rem; color:var(--ink); cursor:pointer; border-bottom:1px solid var(--line)}
.dn-cat svg{transition:transform .2s}
.dn-cat[aria-expanded="true"] svg{transform:rotate(180deg)}
.dn-subs{display:none; padding:4px 10px 12px}
.dn-subs.show{display:block}
.dn-subs a{display:block; padding:9px 12px; color:#4a443f; font-size:.94rem; border-radius:8px}
.dn-subs a:hover{background:var(--soft)}
.drawer-foot{padding:16px; border-top:1px solid var(--line); display:grid; gap:4px}
.drawer-foot a{padding:10px; font-weight:700; color:var(--ink)}

.botnav{display:none; position:fixed; left:0; right:0; bottom:0; z-index:80; background:#fff;
  border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content:space-around}
.bn-item{flex:1; background:none; border:none; cursor:pointer; display:flex; flex-direction:column; align-items:center;
  gap:3px; color:var(--muted); font-size:.7rem; font-weight:700; padding:5px; text-decoration:none}
.bn-item svg{width:23px; height:23px}
.bn-item:active{color:var(--primary)}
.bn-cart{position:relative}
.bn-badge{position:absolute; top:-6px; right:-9px; background:var(--primary); color:#fff; font-size:.62rem;
  min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px; font-style:normal}

@media (max-width:767px){
  .burger{display:flex}
  .catnav{display:none}
  .botnav{display:flex}
  body{padding-bottom:64px}
  .totop{bottom:74px}
  .header-row{gap:8px}
}
@media (min-width:768px){ .hide-mobile{display:inline-flex} }

/* ---- hero ---- */
.hero{background:radial-gradient(120% 120% at 85% 0%, #FFE6DC 0%, var(--soft) 38%, var(--cream) 100%); overflow:hidden}
.hero-grid{display:grid; gap:30px; align-items:center; padding-block:36px}
.hero .eyebrow{display:inline-block; background:#fff; color:var(--primary-d); font-weight:800;
  font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; padding:8px 15px;
  border-radius:var(--radius-pill); box-shadow:var(--shadow); margin-bottom:18px}
.hero h1{font-size:clamp(2.4rem,7vw,4.1rem); line-height:1.02}
.hero h1 .hl{color:var(--primary); position:relative; white-space:nowrap}
.hero h1 .hl::after{content:""; position:absolute; left:0; right:0; bottom:.06em; height:.18em;
  background:rgba(255,107,74,.22); border-radius:4px; z-index:-1}
.hero p.lead{font-size:1.18rem; color:#5b534d; max-width:48ch; margin-top:6px}
.hero-search{display:flex; align-items:center; gap:8px; background:#fff; border:2px solid var(--line);
  border-radius:var(--radius-pill); padding:6px 6px 6px 16px; box-shadow:var(--shadow); margin-top:26px; max-width:520px}
.hero-search svg{flex:none}
.hero-search input{flex:1; border:none; outline:none; font-size:16px; font-family:var(--f-body); background:transparent; min-width:0}
.hero-search .btn{flex:none; padding:13px 22px}
.hero-badges{display:flex; flex-wrap:wrap; gap:18px; margin-top:20px; color:#5b534d; font-weight:700; font-size:.92rem}
.hero-badges span{display:inline-flex; align-items:center; gap:7px}
.hero-badges svg{color:var(--accent)}
/* collage */
.hero-visual{position:relative}
.hero-collage{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:14px}
.hc-item{display:block; background:#fff; border-radius:20px; overflow:hidden; box-shadow:var(--shadow);
  aspect-ratio:1/1; transition:transform .2s}
.hc-item:hover{transform:translateY(-4px)}
.hc-item img{width:100%; height:100%; object-fit:contain; padding:14px}
.hc-1{margin-top:26px}
.hc-2{margin-top:-26px}
.hero-chip{position:absolute; background:var(--ink); color:#fff; font-weight:800; font-size:.82rem;
  padding:9px 15px; border-radius:var(--radius-pill); box-shadow:var(--shadow-lg)}
.hero-chip.chip-1{background:var(--accent); top:-12px; right:14px}
.hero-chip.chip-2{bottom:-12px; left:14px}
@media (min-width:900px){
  .hero-grid{grid-template-columns:1.08fr .92fr; padding-block:66px}
}
@media (max-width:560px){
  .hc-1{margin-top:0} .hc-2{margin-top:0}
}

/* ---- bloque de garantías ---- */
.trust{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:34px}
.trust .t{display:flex; gap:10px; align-items:flex-start; font-size:.92rem; font-weight:600}
.trust .t svg{flex:none; color:var(--accent)}
@media (min-width:768px){ .trust{grid-template-columns:repeat(4,1fr)} }

/* ---- grid de categorías ---- */
.cat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
@media (min-width:600px){ .cat-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:900px){ .cat-grid{grid-template-columns:repeat(7,1fr)} }
.cat-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 12px; text-align:center; font-weight:800; transition:transform .15s, box-shadow .2s}
.cat-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.cat-card .ico{width:46px; height:46px; margin:0 auto 10px; color:var(--primary)}

/* ---- rejilla de productos ---- */
.prod-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (min-width:680px){ .prod-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1000px){ .prod-grid{grid-template-columns:repeat(4,1fr)} }
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .15s, box-shadow .2s}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.card .thumb{aspect-ratio:1/1; background:#fff; padding:14px; object-fit:contain}
.card .body{padding:12px 14px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.card .brand{font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.card .name{font-weight:700; font-size:.95rem; line-height:1.3; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5em}
.card .price{font-family:var(--f-head); font-weight:900; font-size:1.25rem; color:var(--ink); margin-top:auto}
.card .add{margin-top:8px}
.badge{display:inline-block; font-size:.7rem; font-weight:800; padding:4px 9px; border-radius:var(--radius-pill)}
.badge-stock{background:#E9F7F0; color:var(--accent-d)}
.badge-out{background:#F3EEE8; color:var(--muted)}

/* ---- banda emocional ---- */
.emo{background:var(--ink); color:#fff; border-radius:24px; padding:40px 24px; text-align:center}
.emo h2{color:#fff}
.emo p{color:#D9D2CB; max-width:54ch; margin-inline:auto}

/* ---- marcas ---- */
.brands{display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:center; align-items:center;
  font-family:var(--f-head); font-weight:800; color:var(--muted); font-size:1.05rem}

.tag-deal{display:inline-block; background:var(--primary); color:#fff; font-size:.62rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; padding:4px 9px; border-radius:var(--radius-pill); vertical-align:middle; margin-left:6px}
.club-badge{display:inline-block; background:var(--ink); color:#fff; font-size:.72rem; font-weight:800;
  letter-spacing:.08em; padding:6px 14px; border-radius:var(--radius-pill); margin-bottom:14px}

/* ---- newsletter ---- */
.news{background:var(--soft); border-radius:24px; padding:36px 22px; text-align:center}
.news form{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:480px; margin:18px auto 0}
.news input{flex:1; min-width:200px; border:2px solid var(--line); border-radius:var(--radius-pill);
  padding:14px 18px; font-size:16px; background:#fff}
.news input:focus{outline:none; border-color:var(--primary)}

/* ---- footer ---- */
.site-footer{background:var(--ink); color:#CFC8C1; margin-top:48px}
.footer-usp{border-bottom:1px solid rgba(255,255,255,.12)}
.footer-usp .container{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; padding-block:26px}
.footer-usp .usp{display:flex; align-items:center; gap:11px; font-size:.85rem; color:#CFC8C1}
.footer-usp .usp svg{width:26px; height:26px; flex:none; color:var(--primary)}
.footer-usp .usp strong{color:#fff}
@media (min-width:768px){ .footer-usp .container{grid-template-columns:repeat(4,1fr)} }
.footer-grid{display:grid; grid-template-columns:1fr; gap:28px; padding-block:44px}
@media (min-width:560px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (min-width:880px){ .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr} }
.fb-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px}
.footer-bottom .pay{color:#9A938C; letter-spacing:.03em}
.site-footer h4{color:#fff; font-size:1rem; margin-bottom:14px}
.site-footer a{color:#CFC8C1; display:block; padding:4px 0; font-size:.92rem}
.site-footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding-block:18px; font-size:.82rem; color:#9A938C}

/* ---- volver arriba ---- */
.totop{position:fixed; right:18px; bottom:18px; width:48px; height:48px; border-radius:50%;
  background:var(--ink); color:#fff; border:none; display:none; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:var(--shadow-lg); z-index:40}
.totop.show{display:flex}

/* ---- página de tienda / categoría ---- */
.shop-layout{display:grid; grid-template-columns:1fr; gap:24px}
@media (min-width:900px){ .shop-layout{grid-template-columns:240px 1fr; gap:32px} }
.filters details{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px}
.filters summary{cursor:pointer; list-style:none}
.filters summary::-webkit-details-marker{display:none}
.filter-group{margin:18px 0}
.filter-group>label{display:block; font-weight:800; font-size:.9rem; margin-bottom:8px}
.filter-form input[type=number]{width:100%; border:2px solid var(--line); border-radius:10px; padding:10px 12px; font-size:16px}
.filter-form input:focus{outline:none; border-color:var(--primary)}
.filter-list{list-style:none; margin:0; padding:0; max-height:320px; overflow:auto}
.filter-list a{display:flex; justify-content:space-between; padding:7px 10px; border-radius:10px; font-size:.92rem; font-weight:600; color:var(--ink)}
.filter-list a:hover{background:var(--soft)}
.filter-list a.on{background:var(--primary); color:#fff}
.filter-list a span{color:var(--muted); font-weight:700}
.filter-list a.on span{color:#fff}
.toolbar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; color:var(--muted); font-weight:600}
.toolbar select{font-family:var(--f-body); font-size:.95rem; padding:8px 10px; border:2px solid var(--line); border-radius:10px; background:#fff}
.pager{display:flex; justify-content:center; align-items:center; gap:18px; margin-top:36px; font-weight:700}
.pager a{padding:10px 16px; border:2px solid var(--ink); border-radius:var(--radius-pill)}
.pager a:hover{background:var(--ink); color:#fff}
.pager span{color:var(--muted)}

/* ---- ficha de producto ---- */
.pdp{display:grid; grid-template-columns:1fr; gap:28px; padding-top:8px}
@media (min-width:900px){ .pdp{grid-template-columns:1fr 1fr; gap:48px} }
.gallery .main{background:#fff; border:1px solid var(--line); border-radius:var(--radius); aspect-ratio:1/1; object-fit:contain; padding:24px; width:100%}
.gallery .thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.gallery .thumbs img{width:64px; height:64px; object-fit:contain; background:#fff; border:2px solid var(--line); border-radius:10px; padding:5px; cursor:pointer}
.gallery .thumbs img:hover{border-color:var(--primary)}
.pdp .brand{font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-size:.85rem}
.pdp .price{font-family:var(--f-head); font-weight:900; font-size:2rem; margin:8px 0}
.pdp .ship-note{background:var(--soft); border-radius:var(--radius-sm); padding:14px 16px; font-size:.92rem; margin:18px 0; display:flex; gap:10px; align-items:flex-start}
.pdp .specs{width:100%; border-collapse:collapse; margin-top:20px; font-size:.92rem}
.pdp .specs th{text-align:left; color:var(--muted); font-weight:700; padding:8px 0; width:38%}
.pdp .specs td{padding:8px 0; border-bottom:1px solid var(--line)}
.qty{display:inline-flex; align-items:center; border:2px solid var(--line); border-radius:var(--radius-pill); overflow:hidden}
.qty button{width:42px; height:46px; border:none; background:#fff; font-size:1.2rem; cursor:pointer}
.qty input{width:46px; text-align:center; border:none; font-size:1rem; font-family:var(--f-head); font-weight:800}
.buy-row{display:flex; gap:12px; align-items:center; margin-top:18px; flex-wrap:wrap}

/* ---- carrito ---- */
.cart-layout{display:grid; grid-template-columns:1fr; gap:28px; align-items:start}
@media (min-width:900px){ .cart-layout{grid-template-columns:1fr 360px} }
.cart-item{display:grid; grid-template-columns:84px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--line)}
.cart-item img{width:84px; height:84px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:12px; padding:6px}
.cart-item .ci-name{font-weight:700; line-height:1.3}
.cart-item .ci-brand{font-size:.72rem; font-weight:800; text-transform:uppercase; color:var(--muted)}
.cart-item .ci-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; flex-wrap:wrap}
.qty-mini{display:inline-flex; align-items:center; border:2px solid var(--line); border-radius:var(--radius-pill); overflow:hidden}
.qty-mini a{width:34px; height:36px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:800; color:var(--ink)}
.qty-mini a:hover{background:var(--soft)}
.qty-mini span{min-width:34px; text-align:center; font-weight:800}
.ci-remove{color:var(--muted); font-size:.85rem; font-weight:700}
.ci-remove:hover{color:var(--primary-d)}
.ci-line{font-family:var(--f-head); font-weight:900; font-size:1.1rem}
.summary{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; position:sticky; top:90px}
.summary .row{display:flex; justify-content:space-between; margin-bottom:12px; color:var(--muted); font-weight:600}
.summary .row.total{color:var(--ink); font-family:var(--f-head); font-weight:900; font-size:1.3rem; border-top:1px solid var(--line); padding-top:14px; margin-top:6px}
.ship-progress{background:var(--soft); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:18px; font-size:.9rem; font-weight:700}
.ship-progress .bar{height:9px; background:#fff; border-radius:9px; overflow:hidden; margin-top:9px}
.ship-progress .bar i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),#37c98a); border-radius:9px; transition:width .4s ease}
.ship-progress.done{background:#E9F7F0; color:var(--accent-d)}
.cart-empty{text-align:center; padding:48px 0}
.cupon-box{margin-top:16px; padding-top:14px; border-top:1px dashed var(--line)}
.cupon-form{display:flex; gap:8px}
.cupon-form input{flex:1; border:2px solid var(--line); border-radius:10px; padding:11px 13px; font-size:16px; text-transform:uppercase}
.cupon-form input:focus{outline:none; border-color:var(--primary)}
.cupon-ok{color:var(--accent-d); font-weight:700; font-size:.9rem}
.cupon-err{display:block; color:#b91c1c; font-size:.82rem; margin-top:8px; font-weight:600}

/* ---- checkout (sin distracciones) ---- */
.co-head{border-bottom:1px solid var(--line); background:var(--cream)}
.co-head .container{display:flex; align-items:center; justify-content:space-between; padding-block:16px}
.co-head .secure{display:inline-flex; align-items:center; gap:7px; color:var(--accent-d); font-weight:700; font-size:.88rem}
.checkout-grid{display:grid; grid-template-columns:1fr; gap:28px; align-items:start}
@media (min-width:900px){ .checkout-grid{grid-template-columns:1fr 380px} }
.field{margin-bottom:16px}
.field label{display:block; font-weight:700; font-size:.9rem; margin-bottom:6px}
.field input{width:100%; border:2px solid var(--line); border-radius:12px; padding:13px 15px; font-size:16px; font-family:var(--f-body)}
.field input:focus{outline:none; border-color:var(--primary)}
.field input.err{border-color:#e23b3b}
.field .msg{color:#e23b3b; font-size:.82rem; margin-top:5px; font-weight:600}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.co-summary{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; position:sticky; top:24px}
.co-summary .li{display:flex; justify-content:space-between; gap:10px; font-size:.9rem; padding:6px 0; color:#4a443f}
.notice{background:#FFF1EA; border-radius:12px; padding:12px 14px; font-size:.9rem; margin-bottom:18px}

/* ---- página de gracias ---- */
.gracias{text-align:center; max-width:620px; margin-inline:auto}
.gracias .check{width:74px; height:74px; border-radius:50%; background:#E9F7F0; color:var(--accent-d);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px}
.gracias .box{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; text-align:left; margin-top:24px}

/* ---- páginas de contenido / legales ---- */
.prose{max-width:780px}
.prose h2{margin-top:1.8em; font-size:1.4rem}
.prose h3{margin-top:1.4em}
.prose p,.prose li{color:#4a443f}
.prose ul{padding-left:1.2em}
.prose .pendiente{background:#FFF3CD; color:#7a5b00; padding:1px 7px; border-radius:6px; font-weight:700; font-size:.85em}
.prose .updated{color:var(--muted); font-size:.85rem}

/* ---- banner cookies ---- */
.cookie-banner{position:fixed; left:16px; right:16px; bottom:16px; z-index:60; background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow-lg); border-radius:var(--radius); padding:18px 20px;
  display:none; max-width:640px; margin-inline:auto}
.cookie-banner.show{display:block}
.cookie-banner p{margin:0 0 12px; font-size:.9rem; color:#4a443f}
.cookie-banner .row{display:flex; gap:10px; flex-wrap:wrap}

/* ---- formulario contacto ---- */
.form-contacto{max-width:560px}
.form-contacto textarea{width:100%; border:2px solid var(--line); border-radius:12px; padding:13px 15px; font-size:16px; font-family:var(--f-body); min-height:140px}
.form-contacto textarea:focus{outline:none; border-color:var(--primary)}
.hp{position:absolute; left:-9999px}

/* ---- filtros (desktop sidebar + sheet móvil) ---- */
.filterbar{display:none; gap:10px; margin-bottom:16px}
.fb-btn{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#fff;
  border:2px solid var(--line); border-radius:var(--radius-pill); padding:11px; font-weight:800; font-family:var(--f-head); cursor:pointer}
.fb-sort{flex:1; border:2px solid var(--line); border-radius:var(--radius-pill); padding:11px; font-family:var(--f-body); font-size:.95rem; background:#fff}
.filters{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.filters-head{display:none; align-items:center; justify-content:space-between; margin-bottom:8px}
.filters-close{background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--muted)}
.filters-ov{display:none}
.price-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.price-chips a{background:var(--soft); border-radius:var(--radius-pill); padding:6px 12px; font-size:.82rem; font-weight:700; color:var(--ink)}
.price-chips a:hover,.price-chips a.on{background:var(--primary); color:#fff}

/* texto SEO tras feed */
.seo-block{max-width:none; border-top:1px solid var(--line); padding-top:30px}
.seo-block h2{font-size:1.4rem}
.seo-links{display:flex; flex-wrap:wrap; gap:8px}
.seo-links a{background:#fff; border:1px solid var(--line); border-radius:var(--radius-pill); padding:6px 13px;
  font-size:.88rem; font-weight:600; color:var(--ink)}
.seo-links a:hover{border-color:var(--primary); color:var(--primary-d)}

@media (max-width:899px){
  .filterbar{display:flex}
  .hide-mobile-flex{display:none!important}
  .filters{position:fixed; left:0; right:0; bottom:0; z-index:96; border-radius:20px 20px 0 0;
    transform:translateY(110%); transition:transform .25s ease; max-height:82vh; overflow:auto; box-shadow:var(--shadow-lg)}
  .filters.open{transform:translateY(0)}
  .filters-head{display:flex}
  .filters-ov.open{display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:95}
}

/* ---- autocompletado buscador ---- */
.search-ac{position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-lg); padding:6px; display:none; z-index:70; max-height:72vh; overflow:auto}
.search-ac.show{display:block}
.ac-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px}
.ac-item:hover{background:var(--soft)}
.ac-item img{width:42px; height:42px; object-fit:contain; flex:none; background:#fff}
.ac-name{flex:1; font-size:.9rem; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ac-name b{color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em}
.ac-price{font-weight:900; font-family:var(--f-head); white-space:nowrap}
.ac-all{display:block; text-align:center; padding:11px; font-weight:800; color:var(--primary-d); border-top:1px solid var(--line); margin-top:4px}
.ac-empty{padding:14px; color:var(--muted); font-size:.9rem}

/* ---- SEO ficha / subcategorías ---- */
.pdp-cat{font-size:.85rem; color:var(--muted); margin:0 0 4px}
.pdp-cat a{color:var(--muted)}
.pdp-cat a:hover{color:var(--primary-d)}
.pdp-h{font-size:1.2rem; margin-top:26px}
a.brand:hover{color:var(--primary-d)}
.subcats{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px}
.subcats a{background:#fff; border:1px solid var(--line); border-radius:var(--radius-pill); padding:7px 14px; font-size:.88rem; font-weight:700; color:var(--ink)}
.subcats a:hover,.subcats a.on{background:var(--primary); color:#fff; border-color:var(--primary)}
.cat-intro{color:var(--muted); max-width:72ch; margin:-4px 0 22px}

/* ---- utilidades ---- */
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:22px}
.section-head a{color:var(--primary-d); font-weight:800; font-size:.95rem; white-space:nowrap}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:16px; top:10px; z-index:100; background:#fff; padding:10px 16px; border-radius:8px}
:focus-visible{outline:3px solid var(--primary); outline-offset:2px}

/* =========================================================== */
/*  FICHA DE PRODUCTO (PDP) — rediseno completo                */
/* =========================================================== */
.pdp{display:grid; grid-template-columns:1fr; gap:24px; align-items:start}
@media (min-width:760px){ .pdp{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:40px} }
@media (min-width:1080px){ .pdp{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:56px} }

/* --- galeria --- */
.gallery{position:sticky; top:80px}
@media (max-width:759px){ .gallery{position:static} }
.gallery-main{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.gallery .main{aspect-ratio:1/1; object-fit:contain; padding:24px; width:100%; margin:0}
.gal-flag{position:absolute; top:14px; left:14px; z-index:2; font-size:.78rem; font-weight:800; padding:6px 12px; border-radius:var(--radius-pill)}
.gal-out{background:#FBE9E5; color:#B23A1E}
.gallery .thumbs{display:flex; gap:10px; margin-top:12px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin}
.gallery .thumbs::-webkit-scrollbar{height:6px}
.gallery .thumbs::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}
.gallery .thumb{flex:none; width:72px; height:72px; padding:5px; background:#fff; border:2px solid var(--line); border-radius:12px; cursor:pointer; transition:border-color .15s ease}
.gallery .thumb img{width:100%; height:100%; object-fit:contain; margin:0}
.gallery .thumb:hover{border-color:var(--primary)}
.gallery .thumb.is-active{border-color:var(--primary); box-shadow:0 0 0 1px var(--primary)}

/* --- columna de compra --- */
.pdp-buy{min-width:0}
.pdp-buy .brand{display:inline-block; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-size:.82rem; margin-bottom:4px}
.pdp-buy h1{font-size:clamp(1.5rem,4.5vw,2.1rem); margin:2px 0 0; letter-spacing:-.01em}
.pdp-brief{margin:12px 0 0; font-size:1.02rem; line-height:1.55; color:#544c45}
.pdp-pricewrap{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:18px 0 0}
.pdp-pricewrap .price{font-family:var(--f-head); font-weight:900; font-size:2.1rem; color:var(--ink); line-height:1}
.price-iva{font-size:.8rem; font-weight:600; color:var(--muted)}
.badge{display:inline-flex; align-items:center; gap:5px; font-size:.82rem; font-weight:800; padding:6px 12px; border-radius:var(--radius-pill)}
.badge-stock{background:#E9F7F0; color:var(--accent-d)}
.badge-out{background:#FBE9E5; color:#B23A1E}
.pdp-chips{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:9px}
.pdp-chips li{display:flex; align-items:center; gap:9px; font-weight:700; font-size:.95rem; color:#3f3a35}
.pdp-chips svg{flex:none; color:var(--accent-d); background:#E9F7F0; border-radius:50%; padding:3px; width:21px; height:21px}
.ship-note{background:var(--soft); border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 15px; font-size:.92rem; margin:18px 0 0; display:flex; gap:10px; align-items:flex-start; line-height:1.45}
.buy-row{display:flex; gap:12px; align-items:stretch; margin-top:18px; flex-wrap:wrap}
.qty{display:inline-flex; align-items:center; border:2px solid var(--line); border-radius:var(--radius-pill); overflow:hidden; background:#fff}
.qty button{width:46px; height:52px; border:none; background:#fff; font-size:1.3rem; cursor:pointer; color:var(--ink)}
.qty button:hover{background:var(--soft)}
.qty input{width:46px; height:52px; text-align:center; border:none; font-size:1.05rem; font-family:var(--f-head); font-weight:800; background:#fff}
.buy-row .add-cart{flex:1; min-width:200px}
.trust-row{list-style:none; display:flex; flex-wrap:wrap; gap:10px 18px; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--line)}
.trust-row li{display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--muted)}
.trust-row svg{width:22px; height:22px; flex:none; color:var(--accent-d)}
.trust-row strong{color:var(--ink)}

/* --- pestanas / acordeon --- */
.pdp-tabs{margin-top:44px; border-top:1px solid var(--line); padding-top:8px}
.pdp-tabbar{display:flex; gap:4px; flex-wrap:wrap; border-bottom:2px solid var(--line); margin-bottom:24px}
.pdp-tab{background:none; border:none; cursor:pointer; font-family:var(--f-head); font-weight:800; font-size:1rem; color:var(--muted); padding:14px 18px; position:relative; margin-bottom:-2px; border-radius:8px 8px 0 0}
.pdp-tab:hover{color:var(--ink); background:var(--soft)}
.pdp-tab.is-active{color:var(--primary-d)}
.pdp-tab.is-active::after{content:""; position:absolute; left:14px; right:14px; bottom:0; height:3px; background:var(--primary); border-radius:3px}
.pdp-panel{display:none; max-width:820px}
.pdp-panel.is-active{display:block}
.panel-h{font-size:1.3rem; margin:0 0 16px}
@media (min-width:760px){ .pdp-tabs:not(.is-accordion) .panel-h{position:absolute; left:-9999px} }
.pdp-tabs.is-accordion .pdp-panel{display:block; border-bottom:1px solid var(--line); max-width:none}
.pdp-tabs.is-accordion .panel-h{cursor:pointer; padding:16px 34px 16px 0; margin:0; position:relative; font-size:1.1rem}
.pdp-tabs.is-accordion .panel-h::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:1.5rem; font-weight:400; color:var(--primary-d)}
.pdp-tabs.is-accordion .pdp-panel.open .panel-h::after{content:"\2013"}
.pdp-tabs.is-accordion .pdp-panel > :not(.panel-h){display:none}
.pdp-tabs.is-accordion .pdp-panel.open > :not(.panel-h){display:block}
.pdp-tabs.is-accordion .pdp-panel.open{padding-bottom:18px}

/* --- contenido descripcion --- */
.lead{font-size:1.08rem; line-height:1.6; color:#3f3a35; margin:0 0 20px}
.rich p{color:#4a443f; line-height:1.65; margin:0 0 14px}
.rich-h{font-size:1.1rem; margin:22px 0 10px}
.benefit-grid{list-style:none; display:grid; grid-template-columns:1fr; gap:14px; margin:0 0 24px; padding:0}
@media (min-width:560px){ .benefit-grid{grid-template-columns:1fr 1fr} }
.benefit-grid li{display:flex; gap:11px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px}
.benefit-grid .bi{width:24px; height:24px; flex:none; color:var(--accent-d); background:#E9F7F0; border-radius:50%; padding:4px}
.benefit-grid strong{display:block; font-size:.98rem; margin-bottom:3px}
.benefit-grid span{font-size:.9rem; color:#5b554f; line-height:1.45}
.use-list{margin:0 0 6px; padding-left:0; list-style:none}
.use-list li{position:relative; padding:6px 0 6px 26px; color:#4a443f; line-height:1.5}
.use-list li::before{content:""; position:absolute; left:4px; top:13px; width:8px; height:8px; border-radius:50%; background:var(--primary)}
.tips-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.tips-list li{display:flex; gap:12px; align-items:flex-start}
.tips-list .ti{width:26px; height:26px; flex:none; color:var(--primary-d)}
.tips-list div{color:#4a443f; line-height:1.55}

/* --- specs --- */
.pdp-panel .specs{width:100%; border-collapse:collapse; font-size:.95rem}
.pdp-panel .specs th{text-align:left; color:var(--muted); font-weight:700; padding:11px 14px 11px 0; width:38%; vertical-align:top; border-bottom:1px solid var(--line)}
.pdp-panel .specs td{padding:11px 0; border-bottom:1px solid var(--line)}
.pdp-panel .specs tr:last-child th,.pdp-panel .specs tr:last-child td{border-bottom:none}

/* --- faq --- */
.faq-item{border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:10px; background:#fff; overflow:hidden}
.faq-item summary{cursor:pointer; font-weight:800; font-family:var(--f-head); padding:15px 44px 15px 16px; position:relative; list-style:none; font-size:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:1.4rem; font-weight:400; color:var(--primary-d)}
.faq-item[open] summary::after{content:"\2013"}
.faq-a{padding:0 16px 16px; color:#4a443f; line-height:1.6}
.faq-a a{color:var(--primary-d); font-weight:700}

/* --- politica + cross-sell --- */
.pdp-policy{margin-top:32px; padding:18px 20px; background:var(--soft); border-radius:var(--radius-sm); max-width:920px}
.pdp-policy p{margin:0; color:#4a443f; line-height:1.6}
.pdp-policy a{color:var(--primary-d); font-weight:700}
.pdp-rel{margin-top:52px}

/* --- barra de compra sticky (movil) --- */
.buy-sticky{position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; align-items:center; gap:12px; background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(34,31,29,.1); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform .25s ease}
.buy-sticky.show{display:flex; transform:translateY(0)}
.buy-sticky .bs-info{display:flex; flex-direction:column; min-width:0; flex:1}
.buy-sticky .bs-name{font-size:.82rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.buy-sticky .bs-price{font-family:var(--f-head); font-weight:900; font-size:1.2rem}
.buy-sticky .add-cart{flex:none; padding:13px 24px}
@media (min-width:760px){ .buy-sticky{display:none!important} }