/* Groceries Cabo Delivery — Prototipo premium (local, gratis)
   Paleta inspirada en Blue Desert Cabo: arena, océano teal, oro suave.
   Funciona offline (sin internet) abriendo los .html con doble clic. */

:root{
  /* Paleta OFICIAL Blue Desert Cabo (brand assets de Carlos, 2-jul-2026) */
  --sand:#F2F0EC;      /* fondo de página (tinte claro del stone oficial) */
  --stone:#E4E2DF;     /* neutro oficial BDC */
  --ivory:#FFFFFF;     /* tarjetas */
  --ink:#1C2A33;       /* texto principal */
  --muted:#5E6B72;     /* texto secundario */
  --ocean:#043659;     /* PRIMARY BLUE oficial BDC */
  --ocean-dark:#032840;
  --gold:#8B784B;      /* oro/bronce oficial BDC (Master Standard v1.1) */
  --gold-soft:#EAE4D8;
  --logo-blue:#00609C; /* azul del LOGO oficial (Pantone 3015) — sistema de 2 azules */
  --line:rgba(28,42,51,.12);
  --ok:#1D7A4D;
  --warn:#7A6237;
  --radius:14px;
  --shadow:0 1px 2px rgba(28,42,51,.05), 0 8px 24px rgba(28,42,51,.06);
  --maxw:1140px;
  /* Tipografía oficial BDC Design System: Playfair Display títulos + Inter texto */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* ===== Logo OFICIAL Blue Desert — header CENTRADO (regla de Carlos: logo al
   centro, más grande, con "Grocery Concierge" debajo; siempre arriba) ===== */
.brand{color:var(--ocean)}
.bd-logo{height:96px;width:auto;display:block}
.header-stack{display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:16px 24px 12px;position:relative}
.brand-center{flex-direction:column;gap:.4rem;align-items:center}
.brand-tag{font-size:.8rem;letter-spacing:4px;text-transform:uppercase;color:var(--gold);
  font-weight:600;white-space:nowrap}
.header-stack .nav-links{gap:1.8rem;margin-top:.2rem}
.nav-links a{white-space:nowrap}
/* Carrito: esquina superior DERECHA (corrección de Carlos), grande, con animación
   elegante: anillo dorado suave cada pocos segundos + rebote fino al agregar producto.
   Selector doble .cart-btn.cart-top para ganarle a la regla base de .cart-btn */
.cart-btn.cart-top{position:absolute;right:26px;left:auto;top:22px;font-size:1.9rem;
  background:var(--ivory);border:1px solid var(--line);border-radius:999px;
  padding:.55rem .75rem;box-shadow:var(--shadow);transition:transform .15s ease;
  animation:cartPing 5s ease-out infinite;animation-delay:2s}
.cart-btn.cart-top:hover{transform:scale(1.06);animation-play-state:paused}
.cart-btn.cart-top .cart-count{top:-4px;right:-6px;min-width:22px;height:22px;font-size:.8rem;
  border:2px solid var(--ivory)}
.cart-btn.cart-bump{animation:cartBump .5s ease}
@keyframes cartPing{
  0%{box-shadow:var(--shadow), 0 0 0 0 rgba(139,115,75,.35)}
  22%{box-shadow:var(--shadow), 0 0 0 11px rgba(139,115,75,0)}
  100%{box-shadow:var(--shadow), 0 0 0 0 rgba(139,115,75,0)}
}
@keyframes cartBump{
  0%{transform:scale(1)}35%{transform:scale(1.18) rotate(-4deg)}
  70%{transform:scale(.96) rotate(2deg)}100%{transform:scale(1)}
}
.header-stack .menu-toggle{position:absolute;left:24px;top:26px}
.bd-logo-foot{height:64px;margin-bottom:.6rem}
@media(max-width:880px){
  .bd-logo{height:54px}
  .brand-tag{font-size:.68rem;letter-spacing:3px}
  .cart-btn.cart-top{top:16px;right:16px;font-size:1.5rem;padding:.45rem .6rem}
}
@media (prefers-reduced-motion: reduce){
  .cart-btn.cart-top{animation:none}
  .cart-btn.cart-bump{animation:none}
}

/* ===== List-to-cart (Demo F1: pega tu lista → carrito) ===== */
.list-box{max-width:760px;margin:0 auto;background:var(--ivory);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.list-box textarea{width:100%;min-height:180px;border:1px solid var(--line);border-radius:12px;
  padding:.9rem 1rem;font-size:.95rem;font-family:inherit;resize:vertical;background:#fff;color:var(--ink)}
.list-box textarea:focus{outline:2px solid var(--ocean);border-color:var(--ocean)}
.list-actions{display:flex;gap:.7rem;margin-top:.9rem;flex-wrap:wrap;align-items:center}
.list-summary{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin:0 0 1rem;font-size:.9rem}
.lsum{padding:.4rem .95rem;border-radius:999px;font-weight:600}
.lsum.ok{background:#E9F4ED;color:var(--ok)}
.lsum.sug{background:var(--gold-soft);color:var(--warn)}
.lsum.con{background:#E3EDF5;color:var(--ocean)}
.lsum.est{background:var(--navy,#043659);background:#0B2E4A;color:#fff}
.lsum.skip{background:#F3E9E7;color:#8A4A3D}
.lsum-undo{border:0;background:transparent;color:inherit;font-weight:700;text-decoration:underline;
  cursor:pointer;padding:0 0 0 .2rem;font-size:inherit}
/* ✕ para cancelar un renglón del Paste Your List (10-jul) */
.lskip{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--muted);font-size:.8rem;line-height:1;cursor:pointer;
  align-self:flex-start;margin-top:.15rem;transition:all .15s ease}
.lskip:hover{background:#F3E9E7;color:#8A4A3D;border-color:#D9BEB8}
/* Botonera bajo el resumen (Add all + Start over) */
.list-cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
/* Tarjeta de sugerencia ya aceptada (✅ en carrito, tap = quitar) */
.opt-card.is-added{border-color:var(--ok,#2F7A46);box-shadow:0 0 0 1px var(--ok,#2F7A46) inset}
.opt-card.is-added .oc-price{color:var(--ok,#2F7A46);font-weight:600}
.oc-check{position:absolute;top:4px;right:4px;font-size:.85rem}
.lrow{display:flex;gap:14px;align-items:flex-start;background:var(--ivory);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow)}
.lrow .st{font-size:1.15rem;line-height:1.4}
.lrow .main{flex:1;min-width:0;font-size:.93rem}  /* min-width:0 = deja que el carrusel haga scroll interno en vez de estirar el renglón */
.lrow .raw{font-size:.76rem;color:var(--muted);margin-top:.15rem}
.lrow .alt-chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.lrow .alt-chips .chip{font-size:.76rem;padding:.3rem .7rem}
.lrow.added{border-color:#BFE3CC;background:#F4FAF6}
.lgroup-head{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);margin:1.4rem 0 .6rem;padding-top:.8rem;border-top:1px solid var(--line)}

/* Barra fija del resumen (10-jul): en listas largas, el total y "Add all" siguen a la vista */
.list-sticky{position:sticky;top:8px;z-index:30;background:rgba(247,245,241,.94);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid var(--line);
  border-radius:16px;padding:.65rem .6rem .7rem;margin-bottom:1rem;box-shadow:var(--shadow)}
.list-sticky .list-summary{margin:0 0 .5rem}
.list-sticky .center:empty{display:none}

/* Paste Your List — CARRUSEL de opciones (10-jul, pedido de Carlos: "se abren muchas
   y se pierden"). Flechas ‹ ›, scroll-snap (imán), degradado "hay más" en los bordes. */
.opt-carousel{position:relative}
.opt-row{display:flex;gap:.55rem;overflow-x:auto;padding:.55rem 0 .35rem;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-left:.2rem}
.opt-row > *{scroll-snap-align:start}
/* Flechas circulares centradas verticalmente sobre la fila */
.oc-nav{position:absolute;top:calc(50% - 2px);transform:translateY(-50%);z-index:4;width:32px;height:32px;
  border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy,#043659);
  font-size:1.2rem;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.14);
  display:none;align-items:center;justify-content:center;padding:0;font-family:inherit}
.oc-nav:hover{background:var(--gold-soft)}
.oc-nav.prev{left:-6px}
.oc-nav.next{right:-6px}
/* Solo se muestran cuando hay desborde y hacia el lado que sí tiene más */
.opt-carousel.has-overflow .oc-nav{display:flex}
.opt-carousel.has-overflow.at-start .oc-nav.prev{display:none}
.opt-carousel.has-overflow.at-end .oc-nav.next{display:none}
/* Degradado sutil "hay más contenido" en el borde correspondiente */
.opt-carousel.has-overflow::before,.opt-carousel.has-overflow::after{content:"";position:absolute;
  top:0;bottom:8px;width:34px;pointer-events:none;z-index:2}
.opt-carousel.has-overflow::before{left:0;background:linear-gradient(90deg,var(--ivory),transparent)}
.opt-carousel.has-overflow::after{right:0;background:linear-gradient(270deg,var(--ivory),transparent)}
.opt-carousel.at-start::before{opacity:0}
.opt-carousel.at-end::after{opacity:0}
@media(max-width:640px){.oc-nav{display:none !important}}  /* en móvil se desliza con el dedo */
.opt-card{flex:0 0 auto;width:116px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:.45rem .45rem .55rem;text-align:center;cursor:pointer;font-family:inherit;color:var(--ink);
  text-decoration:none;transition:border-color .15s, box-shadow .15s, transform .15s}
.opt-card:hover{border-color:var(--gold);box-shadow:var(--shadow);transform:translateY(-2px)}
.opt-card .oc-img{display:block;width:100%;height:72px;background:var(--sand);border-radius:8px;
  overflow:hidden;margin-bottom:.35rem;position:relative}
.opt-card .oc-fav{position:absolute;top:2px;right:3px;font-size:.72rem;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.opt-card .oc-img img{width:100%;height:100%;object-fit:contain}
.opt-card .oc-emoji{display:flex;align-items:center;justify-content:center;font-size:1.9rem}
.opt-card .oc-name{display:block;font-size:.67rem;line-height:1.2;max-height:2.4em;overflow:hidden;
  margin-bottom:.2rem}
.opt-card .oc-price{display:block;font-size:.74rem;font-weight:700;color:var(--ocean)}
.opt-card .oc-price.muted{color:var(--muted);font-weight:600}
.opt-more{display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--ivory);border-style:dashed;font-size:1.05rem;font-weight:700;color:var(--muted)}
.opt-more:hover{color:var(--ink)}

/* Cantidad editable en el renglón (10-jul) */
.qty-ctl{display:inline-flex;align-items:center;gap:.45rem;vertical-align:middle;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:.1rem .45rem}
.qty-ctl button{width:22px;height:22px;border-radius:50%;border:none;background:var(--sand);
  cursor:pointer;font-size:.9rem;line-height:1;color:var(--ink);font-family:inherit}
.qty-ctl button:hover{background:var(--gold-soft)}
.qty-ctl b{font-size:.85rem;min-width:1.1em;text-align:center}

/* "De lujo" (10-jul) — foto en el renglón principal, voz de concierge, pasillos, tacto */
.lrow .lthumb{flex:0 0 auto;width:56px;height:56px;border-radius:10px;background:var(--sand);
  overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
.lrow .lthumb img{width:100%;height:100%;object-fit:contain}
.lrow .lthumb .lt-emoji{font-size:1.7rem}
.lrow .lthumb .lt-check{position:absolute;bottom:-3px;right:-3px;font-size:.8rem;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));animation:ltpop .32s ease-out}
@keyframes ltpop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
/* voz de concierge */
.concierge-note{max-width:620px;margin:0 auto 1.1rem;text-align:center;font-size:.86rem;
  color:var(--navy,#043659);background:#EDF3F1;border:1px solid #D7E6E1;border-radius:12px;
  padding:.55rem .9rem;line-height:1.4}
/* subtítulo de pasillo dentro del carrito */
.aisle-head{font-size:.82rem;font-weight:700;color:var(--navy,#043659);margin:.9rem 0 .45rem;
  padding-left:.15rem}
.aisle-head span{color:var(--muted);font-weight:600}
/* tacto: la mini-tarjeta reacciona al tocarla */
.opt-card:active{transform:scale(.95)}
/* Vaciar carrito (10-jul) */
.clear-cart{display:block;width:100%;text-align:center;margin:.6rem 0 0;font-size:.82rem;
  color:var(--muted);background:none;border:none;cursor:pointer;font-family:inherit}
.clear-cart:hover{color:#B23B3B}
@media(max-width:640px){.lrow .lthumb{width:46px;height:46px}}

/* Franja promo del home */
.list-promo{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
  background:var(--ivory);border:1px solid var(--line);border-left:5px solid var(--gold);
  border-radius:var(--radius);padding:24px 28px;box-shadow:var(--shadow)}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--sand);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.2;margin:0 0 .4em}
h1{font-size:2.6rem;letter-spacing:-.5px}
h2{font-size:1.9rem}
h3{font-size:1.2rem}
p{margin:0 0 1rem}
a{color:var(--ocean);text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
.center{text-align:center}
.eyebrow{font-size:.78rem;letter-spacing:2px;text-transform:uppercase;color:var(--ocean);font-weight:600;font-family:var(--sans)}

/* Botones */
.btn{display:inline-block;border:1px solid transparent;border-radius:999px;
  padding:.78rem 1.5rem;font-size:.95rem;font-weight:600;cursor:pointer;
  transition:.15s ease;font-family:inherit;text-align:center}
.btn-primary{background:var(--ocean);color:#fff}
.btn-primary:hover{background:var(--ocean-dark)}
.btn-outline{background:#fff;color:var(--ocean);border-color:var(--ocean)}
.btn-outline:hover{background:var(--ocean);color:#fff}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{filter:brightness(.94)}
.btn-sm{padding:.5rem 1rem;font-size:.85rem}
.btn-block{display:block;width:100%}

/* Header */
header.site{position:sticky;top:0;z-index:30;background:rgba(242,240,236,.93);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{font-family:var(--serif);font-weight:600;font-size:1.15rem;color:var(--ocean);display:flex;align-items:center;gap:.7rem}
.brand .dot{color:var(--gold)}
.nav-links{display:flex;gap:1.5rem;align-items:center}
.nav-links a{color:var(--ink);font-size:.92rem;font-weight:500}
.nav-links a:hover{color:var(--ocean)}
.cart-btn{position:relative;background:none;border:none;cursor:pointer;color:var(--ink);font-size:1.35rem;padding:.2rem}
.cart-count{position:absolute;top:-6px;right:-8px;background:var(--gold);color:#fff;
  font-size:.7rem;font-weight:700;min-width:18px;height:18px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;padding:0 4px}
.menu-toggle{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer}

/* Hero */
.hero{position:relative;background:linear-gradient(180deg,#043659 0%,#032840 100%);color:#fff;overflow:hidden}
.hero .wrap{padding:84px 24px 92px;position:relative;z-index:2;text-align:center}
.hero h1{color:#fff;max-width:760px;margin:0 auto .5rem}
.hero p.sub{color:#DCEAEC;max-width:640px;margin:0 auto 1.8rem;font-size:1.12rem}
.hero .eyebrow{color:var(--gold-soft)}
.hero-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.hero::after{content:"";position:absolute;inset:0;opacity:.10;z-index:1;
  background:radial-gradient(circle at 80% 20%, #fff 0, transparent 40%),
             radial-gradient(circle at 10% 90%, var(--gold) 0, transparent 45%)}

/* Trust bar */
.trust{background:var(--ivory);border-bottom:1px solid var(--line)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:center;padding:16px 24px}
.trust .item{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--muted)}
.trust .item b{color:var(--ink);font-weight:600}
.trust .ic{color:var(--ocean);font-size:1.05rem}

/* Secciones */
section.block{padding:64px 0}
.section-head{text-align:center;max-width:640px;margin:0 auto 2.4rem}
.section-head p{color:var(--muted)}
/* 5-jul (SEO): los encabezados principales de las 5 páginas internas pasaron de h2 a h1
   por SEO (una sola h1 real por página) — este selector conserva el tamaño visual de h2
   que ya existía, para no mover nada del diseño. */
.section-head h1{font-size:1.9rem}
/* Bloque de preguntas frecuentes (FAQ/AEO) reutilizado en varias páginas */
.faq-block{max-width:760px;margin:0 auto}
.faq-block .step{text-align:left}

/* Grids */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}

/* Tarjetas */
.card{background:var(--ivory);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;position:relative}
.card .thumb{height:120px;display:flex;align-items:center;justify-content:center;font-size:2.2rem}
.card .body{padding:16px;display:flex;flex-direction:column;gap:.35rem;flex:1}
.card .body h3{margin:0}
.card .price{color:var(--ocean);font-weight:700}
.card .meta{font-size:.82rem;color:var(--muted)}
.card .foot{margin-top:auto;padding-top:.6rem}

/* Etiquetas */
.tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;padding:3px 8px;border-radius:999px}
.tag-fav{background:var(--gold-soft);color:var(--warn)}
.tag-market{background:#E7F0F1;color:var(--ocean)}
.tag-sub{background:#E9F4ED;color:var(--ok)}
.tag-organic{background:#E9F4ED;color:var(--ok)}
.tag-premium{background:var(--gold-soft);color:var(--warn)}
.tag-usda{background:#F0E7D6;color:#7A5A1E}
.tag-bulk{background:#E3EDEE;color:#1D5A63}
.tag-gf{background:#EAF3E3;color:#3F6B2E}
.tag-vegan{background:#E4F2E2;color:#2F6B33}
.tag-lactose{background:#EEF1F6;color:#3C5578}

/* Categoría tiles */
.cat-tile{background:var(--ivory);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 14px;text-align:center;box-shadow:var(--shadow);cursor:pointer;transition:.15s}
.cat-tile:hover{transform:translateY(-2px)}
.cat-tile .ic{font-size:1.8rem;color:var(--ocean)}
.cat-tile div.name{margin-top:.5rem;font-weight:600;font-size:.95rem}

/* Pasos */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{background:var(--ivory);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.step .n{width:38px;height:38px;border-radius:999px;background:var(--ocean);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:.7rem}

/* Banda BDC */
.bdc-band{background:var(--stone);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bdc-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:30px 24px;flex-wrap:wrap}
.bdc-band h3{margin:0;font-size:1.35rem}

/* Filtros shop */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:2rem}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.45rem 1.05rem;
  font-size:.88rem;font-weight:600;cursor:pointer;color:var(--ink);transition:.12s}
.chip:hover{border-color:var(--ocean)}
.chip.active{background:var(--ocean);color:#fff;border-color:var(--ocean)}
a.chip{text-decoration:none;display:inline-block}
.chip-sm{font-size:.78rem;padding:.35rem .8rem}
.filters-sub{margin-bottom:1.6rem}
.chip{display:inline-flex;align-items:center;gap:.4rem}
.chip-pic{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}

/* ===== Fotos de categorías y productos (95+) ===== */
/* Mat color crema BDC + object-fit:contain (en vez de cover): el producto se ve completo,
   sobre un marco propio — así no parecen capturas sueltas del catálogo del proveedor. */
.thumb-photo{padding:14px;overflow:hidden;background:var(--sand);
  transition:top .3s ease, height .3s ease, box-shadow .3s ease}
.thumb-photo img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 6px 10px rgba(28,42,51,.10))}
.card .thumb{height:132px}
.cat-tile.photo{padding:0;overflow:hidden;text-align:left}
.cat-tile.photo .tp{height:150px;overflow:hidden;background:var(--stone)}
.cat-tile.photo .tp img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.cat-tile.photo:hover .tp img{transform:scale(1.06)}
.cat-tile.photo .tb{padding:14px 16px}
.cat-tile.photo .td{font-size:.78rem;color:var(--muted);margin-top:.2rem}
.grid-mini{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.mini-tile{display:block;background:var(--ivory);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;text-align:center;box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease}
.mini-tile:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(28,42,51,.12)}
.mini-tile img{width:100%;height:76px;object-fit:cover;display:block}
.mini-tile span{display:block;font-size:.73rem;font-weight:600;padding:.45rem .3rem;color:var(--ink)}
@media(max-width:880px){.grid-mini{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.grid-mini{grid-template-columns:repeat(2,1fr)}}

/* Producto: control de sustitución */
.subline{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);margin-top:.2rem}
.subline input{accent-color:var(--ocean)}

/* Cart drawer */
.overlay{position:fixed;inset:0;background:rgba(28,42,51,.45);opacity:0;pointer-events:none;
  transition:.2s;z-index:40}
.overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:400px;max-width:92vw;background:var(--sand);
  z-index:50;transform:translateX(100%);transition:.25s ease;display:flex;flex-direction:column;
  box-shadow:-12px 0 40px rgba(28,42,51,.18)}
.drawer.open{transform:translateX(0)}
.drawer .dhead{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer .dhead h3{margin:0}
.drawer .ditems{flex:1;overflow-y:auto;padding:12px 20px}
.drawer .dfoot{border-top:1px solid var(--line);padding:18px 20px;background:var(--ivory)}
.citem{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.citem .ci-thumb{width:46px;height:46px;border-radius:10px;background:var(--gold-soft);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.citem .ci-name{font-weight:600;font-size:.92rem}
.citem .ci-meta{font-size:.8rem;color:var(--muted)}
.qty{display:inline-flex;align-items:center;gap:.5rem;margin-top:.3rem}
.qty button{width:24px;height:24px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;font-weight:700}
.link-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.8rem;text-decoration:underline}
.drow{display:flex;justify-content:space-between;margin-bottom:.4rem}
.drow.total{font-weight:700;font-size:1.1rem;color:var(--ink)}
.note{font-size:.78rem;color:var(--muted);background:#E7F0F1;border-radius:10px;padding:10px 12px;margin-top:.6rem}

/* Formularios */
.form{background:var(--ivory);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow);max-width:680px;margin:0 auto}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.35rem}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;
  padding:.7rem .85rem;font-size:.95rem;font-family:inherit;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--ocean);border-color:var(--ocean)}
.field .hint{font-size:.78rem;color:var(--muted);margin-top:.25rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.check{display:flex;align-items:center;gap:.5rem}
.check input{width:auto}
.confirm-box{background:#E9F4ED;border:1px solid #BFE3CC;border-radius:var(--radius);padding:22px;color:var(--ink);display:none}
.confirm-box.show{display:block}

/* Footer */
footer.site{background:var(--ocean-dark);color:#CFE0E2;margin-top:48px}
footer.site .wrap{padding:48px 24px 28px;display:grid;grid-template-columns:1.6fr repeat(auto-fit,minmax(140px,1fr));gap:28px}
footer.site h4{color:#fff;font-family:var(--serif);margin:0 0 .6rem}
footer.site a{color:#CFE0E2;display:block;font-size:.9rem;padding:.15rem 0}
footer.site a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);text-align:center;font-size:.8rem;color:#9FB8BB;padding:16px}
.proto-badge{position:fixed;left:14px;bottom:14px;z-index:60;background:var(--ink);color:#fff;
  font-size:.72rem;padding:6px 12px;border-radius:999px;opacity:.85}

/* ===== Accesibilidad + engagement (10-jul, meta 92+ en todos los rubros) ===== */
/* Skip-link: oculto hasta enfocar con teclado */
.skiplink{position:absolute;left:-999px;top:0;z-index:200;background:var(--ocean);color:#fff;
  padding:.7rem 1.1rem;border-radius:0 0 10px 0;font-weight:600;text-decoration:none}
.skiplink:focus{left:0}
/* Foco visible para navegación con teclado (WCAG 2.4.7) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--logo-blue);outline-offset:2px;border-radius:4px}
#main:focus{outline:none}
/* Contraste AA: el brand-tag y eyebrows dorados chicos a un tono más oscuro (≥4.5:1) */
.brand-tag{color:#6E5E39}
/* Áreas táctiles ≥44px en móvil (WCAG 2.5.5) */
@media(max-width:760px){
  .nav-links a{padding:.55rem .2rem;min-height:44px;display:flex;align-items:center}
  .menu-toggle,.cart-btn.cart-top{min-width:44px;min-height:44px}
}

/* Botón "WhatsApp this list" en la barra del Paste Your List */
.btn-wa{background:#25D366;color:#fff;border:1px solid #1FBF5B}
.btn-wa:hover{background:#1FBF5B;color:#fff}

/* Listas starter (1 toque) + listas guardadas del Paste Your List */
.starter-chips{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin:0 0 .7rem}
.saved-chip{display:inline-flex;align-items:center;gap:.15rem;padding:0 .25rem 0 0}
.saved-chip .saved-load{border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;padding:.35rem .1rem .35rem .6rem}
.saved-chip .saved-del{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:.72rem;padding:.35rem .4rem}
.saved-chip .saved-del:hover{color:#8A4A3D}

/* ===== WhatsApp flotante (canal #1 de BDC) ===== */
.wa-fab{position:fixed;right:16px;bottom:16px;z-index:55;display:inline-flex;align-items:center;gap:.5rem;
  background:#25D366;color:#fff;padding:.7rem 1rem;border-radius:999px;text-decoration:none;font-weight:700;
  font-size:.9rem;box-shadow:0 6px 20px rgba(0,0,0,.22);transition:transform .15s ease,box-shadow .15s ease}
.wa-fab:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.28)}
.wa-fab svg{flex:0 0 auto}
@media(max-width:600px){
  .wa-fab{padding:.75rem;border-radius:50%}
  .wa-fab .wa-lbl{display:none}
}
@media(prefers-reduced-motion:reduce){ .wa-fab{transition:none} }

/* ===== Hero premium: dos columnas + refrigerador de villa animado =====
   Todo con CSS puro (transform/opacity) → GPU, cero impacto en performance. */
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:2.3rem;align-items:center;text-align:left}
.hero-grid h1,.hero-grid .sub{margin-left:0;max-width:none}
.hero-grid .hero-cta{justify-content:flex-start}
/* Video hero de marca (sustituye al refrigerador; el CSS del refri queda por si se reusa) */
.hero-media{position:relative;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.hero-media::before{content:"";position:absolute;inset:-8% -6%;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side, rgba(139,115,75,.32), transparent 70%)}
.hero-video{position:relative;z-index:1;width:min(540px,92vw);border-radius:18px;display:block;
  box-shadow:0 24px 48px rgba(4,20,25,.4);border:1px solid rgba(255,255,255,.14)}

.fridge-scene{position:relative;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.fridge-scene::before{content:"";position:absolute;inset:-8% -6%;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side, rgba(139,115,75,.32), transparent 70%)}
.fridge{position:relative;z-index:1;width:min(300px,80vw);
  background:linear-gradient(160deg,#FDFBF6,#EFE9DC);border-radius:22px;padding:14px 14px 12px;
  box-shadow:0 24px 48px rgba(4,20,25,.35), inset 0 1px 0 rgba(255,255,255,.8);
  animation:fridgeFloat 7s ease-in-out infinite alternate}
.fridge-handle{position:absolute;right:-7px;top:60px;width:7px;height:110px;
  border-radius:0 6px 6px 0;background:linear-gradient(180deg,#D9CDB4,#BCAE8F)}
.fridge-inside{background:linear-gradient(180deg,#EBF1F6,#DCE6EE);border-radius:14px;
  border:1px solid rgba(4,54,89,.15);box-shadow:inset 0 6px 18px rgba(4,54,89,.18);
  padding:10px 10px 12px;display:flex;flex-direction:column}
.fridge-light{height:6px;border-radius:999px;margin:0 22% 6px;opacity:.9;
  background:linear-gradient(90deg,transparent,#fff,transparent)}
.shelf{display:flex;justify-content:space-evenly;align-items:flex-end;padding:6px 2px 2px;
  border-bottom:3px solid rgba(255,255,255,.85);box-shadow:0 3px 2px -2px rgba(4,54,89,.15)}
.crisper{margin-top:8px;background:rgba(255,255,255,.55);border:1px solid rgba(4,54,89,.18);
  border-radius:8px;display:flex;justify-content:space-evenly;padding:5px 4px}
.shelf .item,.crisper .item{font-size:1.55rem;line-height:1.35;opacity:0;
  transform:translateY(12px) scale(.5);
  animation:itemIn .55s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:var(--d,0s)}
.fridge-caption{position:relative;z-index:1;background:#fff;color:var(--ocean-dark);
  font-weight:700;font-size:.88rem;padding:.5rem 1.1rem;border-radius:999px;box-shadow:var(--shadow);
  opacity:0;animation:captionIn .6s ease forwards;animation-delay:2.9s}
.fridge-caption .okc{color:var(--ok)}
@keyframes itemIn{60%{opacity:1;transform:translateY(-4px) scale(1.08)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes captionIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fridgeFloat{from{transform:translateY(0)}to{transform:translateY(-8px)}}

/* ===== Micro-interacciones premium (solo transform/opacity) ===== */
/* Al pasar el mouse SOLO LA FOTO crece — máximo posible SIN invadir tarjetas vecinas.
   Medido en vivo: gap real de la cuadrícula = 20px; espacio propio antes del nombre = 40px.
   Crece el ANCHO SIN TOCARSE (permanece en 100% de su propia columna → nunca invade a los
   lados) y crece 16px hacia arriba (cabe en el gap de 20px, con 4px de colchón) + 12px hacia
   abajo (dentro de su propia tarjeta, tapando solo la etiqueta gris de categoría, nunca el
   nombre del producto). Se usa position:absolute con top/height —no transform:scale— para
   que el ancho quede intacto (scale() crece ambos ejes por igual y sí invadía a los lados). */
.card{transition:box-shadow .25s ease;z-index:1}
/* 5-jul (pedido de Carlos): el zoom debe activarse SOLO al tocar la foto, no la tarjeta
   completa — se cambió el disparador de .card:hover a .thumb-photo:hover; se usa :has()
   para que la tarjeta padre habilite overflow:visible/sombra únicamente mientras la foto
   está en hover (si no, la foto agrandada se recortaría en el borde de la tarjeta). */
.card:has(.thumb-photo:hover){box-shadow:0 10px 20px rgba(28,42,51,.10), 0 22px 44px rgba(28,42,51,.16);z-index:5;overflow:visible}
.thumb-photo:hover{position:absolute;top:-16px;left:0;right:0;height:160px;z-index:6;
  box-shadow:0 14px 28px rgba(28,42,51,.22)}
.btn{transition:transform .15s ease, filter .15s ease, background .15s ease, color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.cat-tile{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.cat-tile:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 14px 30px rgba(28,42,51,.12)}

/* Aparición suave al hacer scroll (la clase la agrega app.js con IntersectionObserver) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* Accesibilidad + performance: si el usuario pide menos movimiento, todo queda estático */
@media (prefers-reduced-motion: reduce){
  .fridge{animation:none}
  .shelf .item,.crisper .item{opacity:1;transform:none;animation:none}
  .fridge-caption{opacity:1;animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .card,.cat-tile,.btn,.card .thumb{transition:none}
}

/* Responsive */
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:1.6rem}
  .hero-grid .hero-cta{justify-content:center}
  .fridge{width:min(230px,70vw)}
  .shelf .item,.crisper .item{font-size:1.25rem}
  .brand-tag{display:none}
  .bd-logo{height:18px}
  .grid-4,.grid-5{grid-template-columns:repeat(2,1fr)}
  /* 5-jul: .grid-2 faltaba aquí — los FAQ (grid-2) salían en 2 columnas apretadas en celular */
  .grid-2,.grid-3,.steps{grid-template-columns:1fr}
  footer.site .wrap{grid-template-columns:1fr}
  h1{font-size:2rem}
  .nav-links{display:none}
  .nav-links.show{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--sand);padding:14px 24px;border-bottom:1px solid var(--line);gap:.8rem;
    align-items:center;z-index:20}
  .menu-toggle{display:block}
  .row2{grid-template-columns:1fr}
}