/* estilo.css — hoja compartida por las 5 páginas de esta plantilla.
   Mismos tokens y componentes base que plantilla-presencia, más lo propio
   de un catálogo: nav de varias páginas, tarjeta de producto con precio,
   pastillas de categoría y el carrito del cotizador. */

:root{
  --bg:#FFFFFF; --bg2:#F6F8F1; --surface:#FFFFFF; --surface-2:#F1F5EC;
  --ink:#16210E; --ink-soft:#4B5A3D; --ink-faint:#7E8C6C; --line:#DCE3CF;
  --verde:#3E7B27; --agua:#86A63C; --lima:#B4D45C;
  --slot:#C97A12; --on-accent:#0E1A08;
  --whatsapp:#25D366; --whatsapp-deep:#1DA851;
  --shadow-sm:0 10px 26px -16px rgba(22,33,14,.22);
  --fs-h1:clamp(2.1rem,1.4rem+3vw,3.4rem); --fs-h2:clamp(1.5rem,1.25rem+1vw,2rem);
  --sp-4:2rem; --sp-6:5rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B140A; --bg2:#0E1A0C; --surface:#131F10; --surface-2:#182615;
    --ink:#F1F6EA; --ink-soft:#B7C6A6; --ink-faint:#889875; --line:rgba(255,255,255,.13);
    --slot:#FFB648;
    --shadow-sm:0 10px 26px -16px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#0B140A; --bg2:#0E1A0C; --surface:#131F10; --surface-2:#182615;
  --ink:#F1F6EA; --ink-soft:#B7C6A6; --ink-faint:#889875; --line:rgba(255,255,255,.13);
  --slot:#FFB648;
  --shadow-sm:0 10px 26px -16px rgba(0,0,0,.5);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{ margin:0; background:var(--bg); color:var(--ink); font-family:"Inter","Segoe UI",system-ui,sans-serif; line-height:1.6; visibility:hidden; }
body.listo{ visibility:visible; }
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;} }
h1,h2,h3{ margin:0; font-weight:800; text-wrap:balance; letter-spacing:-.01em; }
p{ margin:0; }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; }

.wrap{ max-width:1160px; margin-inline:auto; padding-inline:clamp(20px,5.5vw,56px); }
.section{ padding-block:clamp(3rem,6vw,var(--sp-6)); }
.label{ font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; font-weight:800; color:var(--verde); }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.74rem; text-transform:uppercase;
  letter-spacing:.09em; font-weight:800; color:var(--ink-soft); background:var(--surface-2);
  border:1px solid var(--line); padding:.45rem .9rem; border-radius:999px; margin-bottom:1rem;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--verde); }

/* ---------- toggle: plantilla vacía vs contenido real ---------- */
/* !important a propósito: cada .st-filled trae su propia clase de layout
   que YA define su propio display en otra parte de esta hoja, con la
   misma especificidad — sin !important esa regla gana por orden de
   cascada y las dos vistas quedan visibles a la vez. */
body:not([data-mode="real"]) .st-filled{ display:none !important; }
body[data-mode="real"] .st-empty{ display:none !important; }

/* ---------- placeholder slots (modo vacío, y fotos que aún faltan) ---------- */
.slot{
  position:relative; border:2px dashed var(--slot); border-radius:14px;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--slot) 10%, transparent) 0 9px, transparent 9px 18px),
    color-mix(in srgb, var(--slot) 5%, transparent);
  color:var(--ink-soft);
}
.slot-tag{
  position:absolute; top:-11px; left:14px; background:var(--slot); color:var(--on-accent);
  font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:.22rem .6rem; border-radius:999px; white-space:nowrap;
}
.slot-text{ padding:1.1rem 1.2rem; font-style:italic; }
.slot-media{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  text-align:center; padding:1rem;
}
.slot-media svg{ width:28px; height:28px; color:var(--slot); }
.slot-media span{ font-size:.8rem; font-style:italic; }
.slot-opt{ display:block; font-size:.68rem; font-style:normal; color:var(--ink-faint); margin-top:.15rem; }

/* ---------- filled (contenido real) look ---------- */
.example-card{
  border-radius:14px; border:1px solid var(--line); background:var(--surface-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  text-align:center; padding:1rem; color:var(--ink); overflow:hidden;
}
.example-card img{ width:100%; height:100%; object-fit:cover; }
.example-card svg{ width:30px; height:30px; color:var(--verde); }
.example-card span{ font-size:.85rem; font-weight:600; }
.example-h1{ font-size:var(--fs-h1); font-weight:800; margin-bottom:.9rem; line-height:1.15; }
.example-sub{ font-size:1.05rem; color:var(--ink-soft); max-width:44ch; margin-bottom:1.6rem; }

/* ---------- header + nav ---------- */
header{
  position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.header-row{ display:flex; align-items:center; justify-content:space-between; padding-block:.85rem; gap:.8rem; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:.65rem; }
.logo-slot{ width:42px; height:42px; border-radius:12px; flex:none; }
.logo-slot svg{ width:18px; height:18px; margin:0 auto; }
.logo-filled{ width:42px; height:42px; border-radius:12px; flex:none; overflow:hidden; }
.logo-filled img{ width:100%; height:100%; object-fit:cover; }
.brand-name{ font-weight:700; font-size:1rem; font-style:italic; color:var(--ink-soft); }
.brand-name.st-filled{ font-style:normal; color:var(--ink); }

nav.pagina-nav{ width:100%; order:3; }
.nav-lista{ display:flex; flex-wrap:wrap; gap:.3rem; list-style:none; margin:0; padding:.4rem 0 0; border-top:1px solid var(--line); margin-top:.6rem; }
.nav-lista a{
  display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; font-size:.85rem; font-weight:700;
  color:var(--ink-soft); padding:.45rem .7rem; border-radius:8px;
}
.nav-lista a:hover{ color:var(--verde); }
.nav-lista a.activo{ color:var(--verde); background:color-mix(in srgb, var(--verde) 12%, transparent); }
.nav-badge{
  display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border-radius:999px;
  background:var(--verde); color:#fff; font-size:.68rem; font-weight:800;
}
.nav-badge:empty{ display:none; }
.nav-badge.cero{ display:none; }
@media (min-width:760px){
  nav.pagina-nav{ width:auto; order:2; }
  .nav-lista{ border-top:0; margin-top:0; padding-top:0; }
  .header-actions{ order:3; }
}

.header-actions{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.icon-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-soft); display:grid; place-items:center; cursor:pointer; flex:none;
}
.icon-btn:hover{ color:var(--verde); border-color:var(--verde); }
.icon-btn svg{ width:17px; height:17px; }

.btn{
  display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap; font-weight:700; font-size:.9rem;
  padding:.68rem 1.2rem; border-radius:999px; text-decoration:none; border:1px solid transparent; cursor:pointer;
  font-family:inherit;
}
.btn svg{ width:16px; height:16px; }
.btn-whatsapp{ background:var(--whatsapp); color:#06210F; box-shadow:var(--shadow-sm); }
.btn-whatsapp:hover{ background:var(--whatsapp-deep); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--verde); color:var(--verde); }
.btn-verde{ background:var(--verde); color:#fff; box-shadow:var(--shadow-sm); }
.btn-verde:hover{ filter:brightness(.94); }
.btn-sm{ padding:.5rem .95rem; font-size:.82rem; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; }
#modoToggle svg{ transition:transform .25s ease; }
body[data-mode="real"] #modoToggle svg{ transform:rotate(180deg); }

/* ---------- hero ---------- */
.hero .wrap{ display:grid; grid-template-columns:1fr; gap:2.4rem; align-items:center; padding-block:clamp(2.4rem,5vw,4rem); }
@media (min-width:920px){ .hero .wrap{ grid-template-columns:1.05fr .95fr; } }
.hero-copy .slot-text.h1{ font-size:var(--fs-h1); font-weight:800; padding:.9rem 1.2rem; margin-bottom:.9rem; line-height:1.15; }
.hero-copy .slot-text.sub{ font-size:1.05rem; max-width:44ch; margin-bottom:1.6rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }
.hero-visual.slot{ aspect-ratio:4/3; }
.hero-visual.example-card{ aspect-ratio:4/3; }
.hero-visual.example-card svg{ width:52px; height:52px; }
.hero-visual.example-card span{ font-size:1rem; }

/* ---------- generic section head ---------- */
.section-head{ max-width:62ch; margin-bottom:var(--sp-4); }
.section-head h2{ font-size:var(--fs-h2); margin-top:.5rem; }
.section-head p{ color:var(--ink-soft); margin-top:.65rem; }

/* ---------- categorías (pastillas) ---------- */
.cat-pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.6rem; }
.cat-pill{
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font-weight:700;
  font-size:.82rem; padding:.5rem .95rem; border-radius:999px; cursor:pointer;
}
.cat-pill:hover{ border-color:var(--verde); color:var(--verde); }
.cat-pill.activo{ background:var(--verde); border-color:var(--verde); color:#fff; }

/* ---------- catálogo de productos ---------- */
.prod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.1rem; }
.prod-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
}
.prod-card .prod-media{ aspect-ratio:4/3; }
.prod-card .prod-media.example-card{ border-radius:0; border:0; border-bottom:1px solid var(--line); }
.prod-card .prod-media.slot{ border-radius:0; border-width:0 0 2px; }
.prod-body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.prod-cat{ font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; color:var(--ink-faint); }
.prod-nombre{ font-size:.95rem; font-weight:700; line-height:1.3; }
.prod-precio{ font-size:1.15rem; font-weight:800; color:var(--verde); margin-top:auto; }
.prod-precio span{ font-size:.72rem; font-weight:600; color:var(--ink-faint); }
.prod-agregar{ display:flex; align-items:center; gap:.5rem; margin-top:.4rem; }
.stepper{ display:flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.stepper button{
  width:30px; height:30px; border:0; background:var(--surface-2); color:var(--ink); font-size:1rem; font-weight:700; cursor:pointer;
}
.stepper button:hover{ background:color-mix(in srgb, var(--verde) 16%, var(--surface-2)); color:var(--verde); }
.stepper .cant{ width:32px; text-align:center; font-size:.88rem; font-weight:700; font-variant-numeric:tabular-nums; }
.btn-agregar{
  flex:1; border:0; background:var(--verde); color:#fff; font-weight:700; font-size:.82rem; border-radius:999px;
  padding:.5rem .8rem; cursor:pointer; text-align:center;
}
.btn-agregar:hover{ filter:brightness(.94); }
.btn-agregar.agregado{ background:var(--whatsapp-deep); }

.prod-empty-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.1rem; }
.prod-empty-card{ aspect-ratio:3/4; }

/* ---------- cotizador (carrito) ---------- */
.carrito-lista{ display:flex; flex-direction:column; gap:.9rem; }
.carrito-item{
  display:grid; grid-template-columns:56px 1fr auto; gap:.9rem; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:.7rem .9rem;
}
.carrito-item .mini-foto{ width:56px; height:56px; border-radius:10px; overflow:hidden; flex:none; }
.carrito-item .mini-foto img{ width:100%; height:100%; object-fit:cover; }
.carrito-item .ci-nombre{ font-size:.9rem; font-weight:700; }
.carrito-item .ci-precio{ font-size:.78rem; color:var(--ink-faint); }
.carrito-item .ci-derecha{ display:flex; align-items:center; gap:.7rem; }
.carrito-item .ci-subtotal{ font-size:.9rem; font-weight:800; color:var(--verde); white-space:nowrap; min-width:5.2ch; text-align:right; font-variant-numeric:tabular-nums; }
.ci-quitar{ border:0; background:transparent; color:var(--ink-faint); cursor:pointer; font-size:1.1rem; line-height:1; padding:.2rem; }
.ci-quitar:hover{ color:#C0392B; }

.carrito-vacio{
  border:2px dashed var(--line); border-radius:16px; padding:2.4rem 1.5rem; text-align:center;
  color:var(--ink-soft); display:flex; flex-direction:column; align-items:center; gap:1rem;
}
.carrito-vacio svg{ width:34px; height:34px; color:var(--ink-faint); }

.carrito-resumen{
  background:var(--surface-2); border:1px solid var(--line); border-radius:18px; padding:1.4rem 1.5rem;
  display:flex; flex-direction:column; gap:1rem; margin-top:1.6rem;
}
.carrito-total-fila{ display:flex; justify-content:space-between; align-items:baseline; font-size:1.05rem; font-weight:800; }
.carrito-total-fila span:last-child{ font-size:1.5rem; color:var(--verde); font-variant-numeric:tabular-nums; }

/* ---------- ubicación / contacto (compartido con presencia) ---------- */
.ubicacion-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:880px){ .ubicacion-grid{ grid-template-columns:1fr 1fr; } }
.mapa-slot{ aspect-ratio:5/4; }
.mapa-card{ aspect-ratio:5/4; }
.info-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:clamp(1.3rem,3vw,1.9rem); display:flex; flex-direction:column; gap:1.1rem; }
.info-row{ display:flex; gap:.8rem; align-items:flex-start; }
.info-row > svg{ width:19px; height:19px; flex:none; margin-top:.2rem; color:var(--verde); }
.info-row h3{ font-size:.88rem; font-weight:700; margin-bottom:.35rem; }
.info-row .slot-text{ padding:.5rem .75rem; font-size:.82rem; }
.info-row p.dato{ font-size:.88rem; color:var(--ink-soft); }
.info-card .btn{ width:fit-content; }

.contacto-panel{
  background:var(--surface-2); border:1px solid var(--line); border-radius:22px; padding:clamp(1.8rem,5vw,2.8rem);
  display:grid; gap:1.4rem; justify-items:center; text-align:center;
}
.redes-row{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.red-slot{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; }
.red-slot svg{ width:17px; height:17px; }
.red-filled{ width:44px; height:44px; border-radius:50%; background:color-mix(in srgb, var(--verde) 16%, var(--surface)); border:1px solid var(--line); display:grid; place-items:center; text-decoration:none; }
.red-filled svg{ width:17px; height:17px; color:var(--verde); }
.estilo-nota{ font-size:.85rem; color:var(--ink-faint); max-width:44ch; }

/* ---------- nosotros ---------- */
.valores-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.1rem; }
.valor-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.3rem; display:flex; flex-direction:column; gap:.6rem; }
.valor-card .icono{ width:40px; height:40px; border-radius:50%; background:color-mix(in srgb, var(--verde) 16%, var(--surface-2)); display:grid; place-items:center; }
.valor-card .icono svg{ width:18px; height:18px; color:var(--verde); }
.valor-card h3{ font-size:.95rem; }
.valor-card p{ font-size:.85rem; color:var(--ink-soft); }

/* ---------- incluye panel (SOLO para tu propia demo — ver README) ---------- */
.incluye{ background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.incluye-grid{ display:grid; grid-template-columns:1fr; gap:2.2rem; align-items:start; }
@media (min-width:880px){ .incluye-grid{ grid-template-columns:1fr 1.15fr; } }
.incluye-precio{ font-size:2.1rem; font-weight:800; margin-top:.4rem; }
.incluye-precio span{ font-size:1rem; font-weight:600; color:var(--ink-soft); display:block; margin-top:.2rem; }
.incluye-list{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.incluye-list li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.92rem; }
.incluye-list svg{ width:17px; height:17px; flex:none; margin-top:.15rem; color:var(--verde); }

footer{ border-top:1px solid var(--line); }
.foot-row{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; padding-block:1.4rem; font-size:.8rem; color:var(--ink-faint); }
.foot-row a{ color:var(--ink-soft); text-decoration:none; }
.foot-row a:hover{ color:var(--verde); }

.fab{
  position:fixed; right:18px; bottom:18px; z-index:50; display:inline-flex; align-items:center; gap:.55rem;
  background:var(--whatsapp); color:#06210F; text-decoration:none; padding:.85rem 1.2rem; border-radius:999px;
  font-weight:700; font-size:.9rem; box-shadow:0 14px 30px -10px rgba(6,33,15,.5);
}
.fab svg{ width:18px; height:18px; }
.fab:hover{ background:var(--whatsapp-deep); }