/* OK NUTRE — Pedidos para locales · identidad de marca (negro carbón + cobre) */

:root {
  --carbon:#1f1b19; --paper:#fff; --cream:#faf7f1; --bg:#e7e2d8;
  --copper:#a9763f; --copper-soft:rgba(169,118,63,.14); --ink:#26221f;
  --muted:#837c72; --line:#e3ded4; --line-soft:#efeae1;
}

* { box-sizing:border-box; }
html, body { margin:0; }
body {
  background:var(--bg); color:var(--ink);
  font-family:"Montserrat","Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Barra DEMO (se oculta poniendo DEMO=false en catalogo.js) */
.demo-bar {
  max-width:480px; margin:0 auto; background:var(--carbon); color:var(--copper);
  text-align:center; font-size:9.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; padding:7px 10px; border-bottom:1px solid rgba(169,118,63,.4);
}

/* Contenedor tipo "tarjeta de celular": full width en mobile, centrado en desktop */
.app {
  max-width:480px; margin:0 auto; min-height:100vh; background:var(--cream);
  box-shadow:0 0 60px rgba(31,27,25,.18); position:relative;
}

.display { font-family:"Anton","Arial Narrow",Impact,sans-serif; text-transform:uppercase; font-weight:400; letter-spacing:.01em; }

/* ---- HERO ---- */
.hero {
  position:relative; padding:16px 22px 18px; color:#fff;
  background:linear-gradient(180deg, rgba(31,27,25,.84), rgba(31,27,25,.70)), url("assets/granola.jpg") center/cover;
}
.topbar { display:flex; justify-content:space-between; align-items:center; }
.logo { font-family:"Anton","Arial Narrow",Impact,sans-serif; font-size:21px; color:#fff; line-height:1; }
.logo .dot { color:var(--copper); }
.logo small { display:block; font-family:"Montserrat",sans-serif; font-weight:600; font-size:7.5px; letter-spacing:.34em; margin-top:3px; opacity:.8; }
.pill { border:1px solid rgba(255,255,255,.45); color:#fff; padding:6px 11px; font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.pill.copper { background:var(--copper); border-color:var(--copper); }
.hero h1 { margin:14px 0 0; font-size:30px; line-height:.95; color:#fff; }
.hero .sub { margin:11px 0 0; font-size:13px; line-height:1.4; max-width:320px; color:rgba(255,255,255,.82); }

/* ---- CONTENIDO ---- */
.content { padding:22px 20px 120px; }

.eyebrow { font-size:10.5px; text-transform:uppercase; letter-spacing:.18em; font-weight:700; color:var(--muted); display:flex; align-items:center; gap:8px; margin:0 0 12px; }
.eyebrow::before { content:""; width:18px; height:2px; background:var(--copper); display:inline-block; }

/* Datos del pedido */
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.field { position:relative; background:var(--paper); border:1px solid #cdc6b8; padding:9px 12px; min-height:62px; transition:border-color .15s; }
.field.wide { grid-column:1 / -1; }
.field:focus-within { border-color:var(--copper); }
.field.err { border-color:#c0563f; }
.field label, .field .label { display:block; font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-weight:700; margin-bottom:4px; }
.field label .opt { color:#b3ab9e; font-weight:500; text-transform:none; letter-spacing:0; margin-left:5px; }
.field input, .field select {
  width:100%; border:0; background:transparent; padding:0; margin:0;
  font-family:inherit; font-size:15.5px; font-weight:600; color:var(--ink);
  outline:none; -webkit-appearance:none; appearance:none; min-height:26px;
}
.field input::placeholder { color:#b3ab9e; font-weight:500; }

/* Lightbox (foto grande al tocar la miniatura) */
.lightbox {
  position:fixed; inset:0; z-index:100; background:rgba(15,13,12,.93);
  display:grid; place-items:center; padding:26px;
}
.lightbox[hidden] { display:none; }
.lb-fig { margin:0; max-width:min(92vw,560px); text-align:center; }
.lb-fig img { max-width:100%; max-height:78vh; object-fit:contain; box-shadow:0 24px 70px rgba(0,0,0,.55); }
.lb-fig figcaption {
  margin-top:15px; font-family:"Anton","Arial Narrow",sans-serif; text-transform:uppercase;
  color:#fff; font-size:18px; letter-spacing:.02em;
}
.lb-close {
  position:fixed; top:14px; right:14px; width:60px; height:60px; z-index:101;
  border:1px solid rgba(169,118,63,.6); border-radius:0; padding:0; cursor:pointer;
  background:rgba(31,27,25,.85);
}
.lb-close::before, .lb-close::after { /* X geométrica en cobre (estética OK Nutre) */
  content:""; position:absolute; left:50%; top:50%; width:30px; height:3px; background:var(--copper);
}
.lb-close::before { transform:translate(-50%,-50%) rotate(45deg); }
.lb-close::after  { transform:translate(-50%,-50%) rotate(-45deg); }
.lb-close:active { background:var(--copper); }
.lb-close:active::before, .lb-close:active::after { background:#fff; }

/* Lightbox sin foto: tarjeta de marca */
.lb-card {
  width:min(92vw,380px); aspect-ratio:1/1; background:var(--carbon);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px; padding:30px; text-align:center;
}
.lb-card-brand { display:flex; flex-direction:column; align-items:center; gap:4px; }
.lb-card-logo { font-family:"Anton","Arial Narrow",Impact,sans-serif; font-size:26px; color:#fff; letter-spacing:.02em; }
.lb-card-dot { color:var(--copper); }
.lb-card-sub { font-family:"Montserrat",sans-serif; font-size:7.5px; font-weight:700; color:rgba(255,255,255,.5); letter-spacing:.24em; text-transform:uppercase; }
.lb-card-name { font-family:"Anton","Arial Narrow",sans-serif; font-size:26px; color:#fff; text-transform:uppercase; letter-spacing:.02em; line-height:1.1; }
.lb-card-detail { font-family:"Montserrat",sans-serif; font-size:13px; font-weight:600; color:var(--copper); letter-spacing:.06em; }
.lb-card[hidden] { display:none; }

/* Chips de navegación: atajo para saltar a un grupo (sticky arriba).
   El catálogo entero queda SIEMPRE visible; los chips no ocultan nada. */
.chips {
  position:sticky; top:0; z-index:30;
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 -20px 4px; padding:10px 20px; background:var(--cream);
  box-shadow:0 1px 0 var(--line);
}
.chip {
  flex:none; cursor:pointer; white-space:nowrap;
  background:var(--paper); border:1px solid #cdc6b8; color:var(--ink);
  font-family:inherit; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  padding:9px 13px; transition:background .15s, color .15s, border-color .15s;
}
.chip:active { background:var(--copper-soft); }
.chip.on { background:var(--carbon); border-color:var(--carbon); color:#fff; }

/* Encabezado de grupo: divisor (NO clickable). Separación doble entre grupos. */
.catblock { margin-top:26px; scroll-margin-top:62px; }
.catblock:first-of-type { margin-top:8px; }
.cat {
  display:flex; align-items:center; gap:9px; padding:0 0 9px; margin:0;
  border-bottom:1px solid var(--line);
  font-family:inherit; font-size:11.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.12em; color:var(--ink);
}
.cat::before { content:""; width:14px; height:2px; background:var(--copper); flex:none; }
.cat-name { flex:1; }
.cat-badge {
  background:var(--copper); color:#fff; font-size:10.5px; font-weight:800;
  min-width:22px; height:21px; padding:0 6px; display:inline-grid; place-items:center; flex:none;
}
.cat-badge[hidden] { display:none; }

.products { display:grid; grid-template-columns:1fr; gap:8px; padding-top:10px; }

/* etiqueta simple (no clickable), p.ej. Observaciones */
.sublabel { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--ink); margin:24px 0 10px; }
.sublabel::before { content:""; width:14px; height:2px; background:var(--copper); display:inline-block; }
.product { display:grid; grid-template-columns:50px 1fr auto; gap:12px; align-items:center; background:var(--paper); border:1px solid var(--line); padding:9px; transition:border-color .15s; }
.product.active { border-color:var(--copper); }
.thumb { width:50px; height:50px; object-fit:cover; background:#ece7dd; display:block; }
/* Placeholder on-brand para productos sin foto: mini "OK.NUTRE / FOTO PRÓX." */
.thumb-ph {
  width:50px; height:50px; background:var(--carbon);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:2px; box-sizing:border-box; line-height:1;
}
.thumb-ph .ph-logo { font-family:"Anton","Arial Narrow",Impact,sans-serif; font-size:11px; color:#fff; letter-spacing:.02em; }
.thumb-ph .ph-dot { color:var(--copper); }
.thumb-ph .ph-tag { font-family:"Montserrat",sans-serif; font-size:5.5px; font-weight:700; color:rgba(255,255,255,.55); letter-spacing:.14em; text-transform:uppercase; }
/* botón de la miniatura (abre la foto grande) */
.thumb-btn { position:relative; width:50px; height:50px; padding:0; border:0; background:transparent; cursor:zoom-in; display:block; }
.thumb-btn::after { /* badge con lupa: pista clara de "ampliar" */
  content:""; position:absolute; right:2px; bottom:2px; width:21px; height:21px;
  border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.45);
  background:rgba(31,27,25,.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cline x1='14.5' y1='14.5' x2='20' y2='20'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}
.pinfo.clickable { cursor:zoom-in; }
.pinfo.clickable:active { background:rgba(31,27,25,.04); }
.pnum { font-family:"Anton",sans-serif; font-size:10.5px; color:var(--copper); letter-spacing:.06em; margin-bottom:1px; }
.pname { font-family:"Anton","Arial Narrow",sans-serif; text-transform:uppercase; font-size:15px; letter-spacing:.015em; line-height:1.02; color:var(--ink); }
.meta { font-size:10.5px; color:var(--muted); margin-top:3px; font-weight:500; }

/* Selector de cantidad - N + (targets táctiles ~44px) */
.qty { display:flex; align-items:center; border:1px solid #cdc6b8; background:#fff; height:46px; user-select:none; }
.qty button {
  width:44px; height:100%; border:0; background:transparent; cursor:pointer;
  color:var(--ink); font-size:24px; font-weight:600; font-family:inherit; line-height:1; padding:0;
  display:grid; place-items:center;
}
.qty button:active { background:var(--copper-soft); }
.qty button[disabled] { color:#cfc9bd; cursor:default; }
.qty b { width:38px; text-align:center; font-weight:700; font-size:16px; color:var(--ink); border-left:1px solid #e7e1d6; border-right:1px solid #e7e1d6; height:100%; display:grid; place-items:center; }
.product.active .qty b { color:var(--copper); }

/* Observaciones */
.obs { width:100%; background:#fff; border:1px solid var(--line); min-height:64px; padding:11px; font-family:inherit; font-size:13px; color:var(--ink); resize:vertical; outline:none; }
.obs::placeholder { color:#a59d90; font-style:italic; }

/* Botón fijo abajo */
.btn-wrap { position:fixed; left:0; right:0; bottom:0; z-index:10; display:flex; justify-content:center; pointer-events:none; }
.btn-inner { width:100%; max-width:480px; padding:14px 20px 18px; background:linear-gradient(180deg, rgba(250,247,241,0), var(--cream) 38%); pointer-events:auto; }
.btn {
  display:block; width:100%; border:0; background:var(--carbon); color:#fff; text-align:center;
  padding:16px; font-family:inherit; font-weight:700; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; cursor:pointer;
}
.btn[disabled] { opacity:.45; cursor:default; }
.btn .count { color:var(--copper); }

/* ---- CONFIRMACIÓN ---- */
.confirm { display:none; }
.confirm.show { display:block; }
.form-view.hide { display:none; }

.hero.s2 { background:linear-gradient(180deg, rgba(31,27,25,.86), rgba(31,27,25,.72)), url("assets/semillas.jpg") center/cover; }
.check-wrap { padding:26px 22px 4px; }
.check { width:50px; height:50px; border:2px solid var(--copper); color:var(--copper); display:grid; place-items:center; font-size:26px; margin-bottom:14px; }
.check-wrap h2 { margin:0 0 8px; font-size:28px; line-height:1.02; color:var(--ink); }
.check-wrap p { margin:0; font-size:13.5px; line-height:1.45; color:#5f594f; max-width:320px; }
.ordno { display:inline-block; margin-top:14px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--copper); border:1px solid var(--copper); padding:5px 10px; }

.order { margin:0; border-top:1px solid var(--line); }
.order-row { display:flex; justify-content:space-between; gap:12px; padding:12px 2px; border-bottom:1px solid var(--line-soft); font-size:13px; }
.order-row .oname { color:var(--ink); font-weight:600; }
.order-row .oname b { color:var(--copper); font-weight:800; margin-left:5px; }
.order-row .osub { color:#4f4a42; font-weight:600; white-space:nowrap; }
.total-bar { display:flex; justify-content:space-between; align-items:center; background:var(--carbon); color:#fff; padding:14px 16px; margin-top:14px; }
/* el display:flex de arriba pisa el [hidden] nativo (en locales el total se oculta) */
.total-bar[hidden] { display:none; }
.total-bar .lbl { font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.total-bar .amt { font-family:"Anton",sans-serif; font-size:24px; color:#fff; }
.total-bar .amt span { color:var(--copper); }
.order-note { margin:11px 0 0; font-size:10.5px; color:var(--muted); }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid #d8d2c6; margin-top:16px; }
/* Botón WhatsApp: verde suave (no fluorescente) */
.btn.btn-wa { background:#3d8f5f; color:#fff; }
.btn.btn-wa:active { background:#326f4b; }

/* aviso de error de envío */
.send-warn { margin:12px 0 0; font-size:11px; color:#a05a3f; }

/* ---- VISTA REVISIÓN (revisar antes de confirmar) ---- */
.review { display:none; }
.review.show { display:block; }
.rev-datos { margin:-4px 0 14px; font-size:13px; color:#5f594f; font-weight:600; }
.rev-obs-wrap { margin-top:14px; }
.rev-obs-lbl { display:block; font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-weight:700; margin-bottom:5px; }
.rev-obs { margin:0; font-size:13px; color:var(--ink); background:#fff; border:1px solid var(--line); padding:10px 11px; }
/* botones apilados en revisión/confirmación */
.confirm .btn, .review .btn { margin-top:12px; }