/* Isabella | Cosmética Natural - estilos.css */
/* Tipografías: Gordita (display) */
@font-face{
  font-family:'Gordita';
  src:url('Gordita/gordita-regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Gordita';
  src:url('Gordita/gordita-medium.otf') format('opentype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Gordita';
  src:url('Gordita/gordita-bold.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Gordita';
  src:url('Gordita/gordita-ultra.otf') format('opentype');
  font-weight:800; font-style:normal; font-display:swap;
}
:root{
  --font-display:'Gordita', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  --font-body:'Gordita', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  --verde:#6b8f2a;
  --verde-osc:#4e6b1f;
  --verde-soft:#e9f2df;
  --verde-label:#88b95a;
  --verde-scroll:#7fb058;
  --gris:#6b7280;
  --oscuro:#111827;
  --blanco:#fff;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;font-family:var(--font-body);color:var(--oscuro);background:#fafaf8}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.topbar{position:sticky;top:0;z-index:50;background:linear-gradient(0deg,var(--verde) 0%, var(--verde-osc) 100%);color:var(--blanco);box-shadow:var(--shadow);}
.topbar .wrap{display:flex;align-items:center;gap:12px;max-width:1200px;margin:auto;padding:10px 16px;}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{height:50px;width:auto}
.actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.iconbtn{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:transparent;cursor:pointer;border:none}
.iconbtn:hover{background:rgba(255,255,255,.1)}
.basket{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#fff;color:var(--verde-osc);font-weight:800;border:1px solid #e6edd8}
.basket .icon-wrap{position:relative;width:24px;height:24px;display:grid;place-items:center}
.basket svg{width:24px;height:24px}
.inbag{position:absolute;top:2px;right:3px;min-width:16px;height:16px;padding:0 3px;display:none;background:#2dd4bf;color:#0f172a;font-weight:900;font-size:11px;line-height:16px;text-align:center;border-radius:9px;border:1px solid #ffffffaa;}
.hero{max-width:1200px;margin:18px auto 6px;padding:0 16px}
.hero .promo{border-radius:var(--radius);overflow:hidden;border:1px solid #e6edd8;background:var(--verde-soft)}
.hero .promo img{width:100%;height:320px;object-fit:cover}
@media (max-width:720px){.hero .promo img{height:220px}}
.sec-title{max-width:1200px;margin:8px auto 0;padding:0 16px;font-size:20px;font-weight:700;color:#2b3b16;letter-spacing:.2px;font-family:var(--font-display)}
/* Títulos opcionales que usan la fuente display */
.title,h1,h2{font-family:var(--font-display)}
.categories{max-width:1200px;margin:10px auto 18px;padding:0 16px;}
.categories .grid{display:grid !important;gap:16px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));align-items:start;justify-items:center}
.cat{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;scroll-snap-align:start}
.cat .circle{width:110px;height:110px;border-radius:50%;background:#fff;border:1px solid #e6edd8;box-shadow:0 4px 16px rgba(0,0,0,.04);display:grid;place-items:center;transition:transform .18s ease, box-shadow .18s ease}
.cat .circle:hover{transform:translateY(-3px)}
.cat.active .circle{box-shadow:0 6px 20px rgba(107,143,42,.28)}
.cat img{width:70%;height:70%;object-fit:contain}
.cat label{width:100%;max-width:140px;text-align:center;font-size:12px;font-weight:800;color:var(--verde-label);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:720px){.hero .promo img{height:220px}.categories .grid{display:flex !important;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-color:var(--verde-scroll) transparent;}.categories .grid::-webkit-scrollbar{height:6px}.categories .grid::-webkit-scrollbar-thumb{background:var(--verde-scroll);border-radius:999px}.categories .grid::-webkit-scrollbar-track{background:transparent}.cat .circle{width:84px;height:84px}.cat img{width:64%;height:64%}.cat label{max-width:96px;font-size:11.5px}}
.backbar{max-width:1200px;margin:0 auto 0;padding:0 16px 8px;color:var(--gris);display:flex;align-items:center;gap:8px;font-size:14px}
.backbar a{color:var(--verde-osc);font-weight:600}
.backbar .sep{opacity:.4}
.pill{display:inline-block;background:var(--verde-soft);border:1px solid #e6edd8;color:var(--verde-osc);padding:4px 8px;border-radius:999px;font-size:12px}
.grid-prod{max-width:1200px;margin:8px auto 32px;padding:0 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{border:1px solid #e6edd8;border-radius:16px;background:#fff;box-shadow:var(--shadow);overflow:hidden;display:flex;align-items:center;flex-wrap:wrap}
.card .pic{background:var(--verde-soft);display:flex;align-items:center;justify-content:center;height:120px;flex:0 0 120px;order:2}
.card .pic img{width:100%;height:120px;object-fit:contain;padding:0;background:#fff;display:block;margin:auto}
.card .body{padding:14px 18px 8px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto;order:1}
.card .btn{order:3;flex:1 0 100%}
.card h3{font-size:15px;margin:0}
.price{font-weight:800;color:var(--verde-osc)}
.btn{margin-top:6px;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;border-radius:10px;border:1px solid #d9e6c5;background:linear-gradient(#f7fbf1,#eaf3df);padding:10px 12px;font-weight:800;color:var(--verde-osc);cursor:pointer}
.btn:hover{filter:brightness(.98)}
.card .desc{font-size:13px;color:var(--gris);margin:4px 0 0 0;}
@media (max-width: 1024px){.grid-prod{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 720px){.grid-prod{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 460px){.grid-prod{grid-template-columns:1fr}.brand img{height:46px}}

@media (min-width: 1024px){
  .card{display:grid;grid-template-columns:140px 1fr;grid-template-areas:"pic body" "btn btn";align-items:center}
  .card .pic{grid-area:pic;order:0;flex:none}
  .card .body{grid-area:body;order:0}
  .card .btn{grid-area:btn;order:0}
}
footer{background:#f3f7ec;border-top:1px solid #e0ecd0;margin-top:36px}
footer .wrap{max-width:1200px;margin:auto;padding:22px 16px;display:grid;gap:12px}
.foot-grid{display:grid;gap:12px}
@media (min-width:800px){.foot-grid{grid-template-columns:1.2fr 1fr 1fr}}
.social{display:flex;gap:10px}
.social a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #e1ebd2}
.wsp{position:fixed;right:16px;bottom:16px;z-index:40;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:rgba(37,211,102,0.85);color:#fff;box-shadow:0 8px 22px rgba(37,211,102,.35);transition:background .2s ease}
.wsp:hover{background:rgba(37,211,102,0.98)}