:root{
  --bosque:#1F3524;      /* verde bosque profundo */
  --tinta:#1C2A18;
  --salvia:#EFF3E7;      /* fondo papel-salvia */
  --salvia2:#E3EAD6;
  --miel:#D89A2B;        /* acento miel */
  --miel-osc:#B57E1B;
  --oliva:#6B7F3A;
  --blanco:#FDFDF9;
  /* El alto de la tarjeta manda sobre todo el ritmo vertical: la calesita, el
     recuadro de la foto y el aro de selección se calculan a partir de él.
     Al ir en vh, todo el bloque (héroe + familias + calesita + panel) entra en
     una sola pantalla tanto en un monitor grande como en una notebook. */
  --card-h:clamp(252px, 37.5vh, 465px);
  --card-w:calc(var(--card-h) * .68);
  /* el recuadro de la calesita solo necesita un poco de aire: las tarjetas no se
     recortan si lo pasan, y con menos aire entran tarjetas más grandes */
  --stage-h:calc(var(--card-h) * 1.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Instrument Sans',sans-serif;
  background:var(--salvia);
  color:var(--tinta);
}

/* LA PÁGINA NO SE CORRE DE COSTADO, Y ACÁ ESTÁ EL PORQUÉ.
 *
 * La calesita guarda sus tarjetas girando en 3D: las que no están al frente
 * quedan a los costados y se salen de la pantalla a propósito, para que se
 * asomen por los bordes. Pero salirse cuenta: a 390 px de ancho el documento
 * medía 728, más de 300 de más, y eso se podía arrastrar.
 *
 * Y arrastrarlo ROMPÍA EL ENCABEZADO. El encabezado es pegajoso —se queda
 * arriba al bajar—, así que está anclado a la pantalla y no al contenido:
 * corriendo la página de costado, el logo se iba para afuera y quedaba cortado
 * por la izquierda. Se veía como un descuadre del encabezado y era esto.
 *
 * `clip` Y NO `hidden`, que es la diferencia que importa: `hidden` convierte al
 * elemento en un contenedor que se puede scrollear por código y le rompe el
 * `position: sticky` a lo que tenga adentro; `clip` sólo recorta y no crea nada.
 * Va en `html` y en `body` porque cuál de los dos manda depende del navegador.
 *
 * Las tarjetas se siguen asomando igual: se recorta en el borde de la pantalla,
 * que es donde ya se cortaban a la vista. */
html, body{ overflow-x:clip; }

/* ---------- barra superior ---------- */
.topbar{
  background:var(--miel);color:var(--tinta);
  font-size:.8rem;font-weight:600;letter-spacing:.04em;
  display:flex;justify-content:center;gap:2.5rem;padding:.45rem 1rem;flex-wrap:wrap;
}
header{
  background:var(--bosque);color:var(--blanco);
  padding:.7rem 5vw;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  position:sticky;top:0;z-index:50;
}
.logo{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.5rem;line-height:1;letter-spacing:-.02em}
.logo small{display:block;font-weight:400;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--miel);margin-top:.2rem}
.cartbtn{
  background:var(--miel);border:none;color:var(--tinta);font-family:inherit;font-weight:600;
  padding:.6rem 1.1rem;border-radius:999px;cursor:pointer;font-size:.9rem;display:flex;align-items:center;gap:.5rem;
  transition:transform .15s;
}
.cartbtn:hover{transform:scale(1.05)}
.cartbtn[hidden]{display:none}

/* ---------- acceso: entrar, quién está adentro, WhatsApp ----------
   Lo cliqueable se ve cliqueable (U6): los enlaces van subrayados y el WhatsApp
   con forma de botón. */
.acceso{display:flex;align-items:center;gap:1rem;font-size:.9rem;white-space:nowrap}
.acceso a{color:var(--blanco);text-decoration:underline}
.acceso a.wa{background:var(--oliva);text-decoration:none;padding:.5rem 1rem;border-radius:999px;font-weight:600}
.acceso button{background:transparent;border:1px solid rgba(253,253,249,.5);color:var(--blanco);font:inherit;padding:.4rem .9rem;border-radius:999px;cursor:pointer}
.acceso a:focus-visible,.acceso button:focus-visible{outline:3px solid var(--miel);outline-offset:3px}
@media (max-width:700px){ header{flex-wrap:wrap} .acceso{order:3;width:100%;justify-content:flex-end} }

/* ---------- entrar, en una ventana por delante del carrusel ---------- */
.ingreso{border:none;border-radius:18px;padding:0;width:min(380px,calc(100vw - 2rem));background:var(--blanco);color:var(--tinta)}
.ingreso::backdrop{background:rgba(28,42,24,.55)}
.ingreso-caja{padding:1.5rem;display:flex;flex-direction:column}
.ingreso-caja header{display:flex;align-items:center;justify-content:space-between;background:none;padding:0;position:static;margin-bottom:.75rem;color:var(--tinta)}
.ingreso-caja h2{margin:0;font-size:1.2rem}
.ingreso-caja label{font-size:.85rem;font-weight:600;margin:.75rem 0 .3rem}
.ingreso-caja input{font:inherit;padding:.6rem .75rem;border:1px solid #c9d2bd;border-radius:10px}
.ingreso-caja input:focus-visible{outline:3px solid var(--miel);outline-offset:1px}
.ingreso-error{margin:.75rem 0 0;padding:.6rem .75rem;border-left:4px solid #8C2F22;background:#F6E9E6;color:#5A1D14;font-size:.88rem}
.ingreso-entrar{margin-top:1rem;background:var(--oliva);color:var(--blanco);border:none;border-radius:999px;font:inherit;font-weight:600;padding:.7rem;cursor:pointer}
.ingreso-entrar:disabled{opacity:.6;cursor:wait}
.ingreso-entrar:focus-visible{outline:3px solid var(--miel);outline-offset:3px}
.ingreso-pie{margin:1rem 0 0;font-size:.8rem;color:#5a6650}

/* ---------- buscador ---------- */
.buscador{
  position:relative;flex:1;max-width:400px;min-width:0;
  display:flex;align-items:center;gap:.4rem;
  background:rgba(255,255,255,.13);border:1.5px solid rgba(255,255,255,.28);
  border-radius:999px;padding:.32rem .75rem;transition:background .16s,border-color .16s;
}
.buscador:focus-within{background:var(--blanco);border-color:var(--miel)}
.buscador .lupa{font-size:.85rem;opacity:.85;flex:none;line-height:1}
.buscador input{
  flex:1;min-width:0;border:none;background:none;outline:none;
  color:var(--blanco);font-family:inherit;font-size:.84rem;padding:.1rem 0;
}
.buscador input::-webkit-search-cancel-button{display:none}
.buscador:focus-within input{color:var(--tinta)}
.buscador input::placeholder{color:rgba(255,255,255,.6)}
.buscador:focus-within input::placeholder{color:#98a48d}
.qclear{
  border:none;background:none;cursor:pointer;font-size:1.1rem;line-height:1;
  color:var(--blanco);opacity:.7;flex:none;padding:0 .1rem;
}
.buscador:focus-within .qclear{color:var(--oliva);opacity:1}

.qres{
  position:absolute;top:calc(100% + .5rem);left:0;right:0;z-index:60;
  background:var(--blanco);border:1px solid #E2E7DA;border-radius:14px;
  box-shadow:0 24px 46px -20px rgba(28,42,24,.8);
  overflow:hidden auto;max-height:min(56vh,400px);
}
.qitem{
  display:flex;align-items:center;gap:.6rem;width:100%;border:none;background:none;
  padding:.42rem .55rem;cursor:pointer;text-align:left;font-family:inherit;
  border-bottom:1px solid #F1F4EB;
}
.qitem:last-child{border-bottom:none}
.qitem:hover,.qitem.sel{background:var(--salvia2)}
.qitem .qph{
  width:36px;height:36px;flex:none;border-radius:8px;overflow:hidden;
  background:var(--salvia2);display:grid;place-items:center;font-size:1.05rem;
}
.qitem .qph img{width:100%;height:100%;object-fit:cover;display:block}
.qitem .qtx{min-width:0;flex:1}
.qitem .qn{display:block;font-weight:600;font-size:.79rem;color:var(--bosque);line-height:1.15}
.qitem .qf{display:block;font-size:.65rem;color:#8b967f;font-family:'Spline Sans Mono'}
.qitem .qp{font-family:'Spline Sans Mono';font-weight:700;font-size:.78rem;color:#3F8626;flex:none}
.qitem mark{background:var(--miel);color:var(--tinta);border-radius:3px;padding:0 .12em}
.qvacio{padding:.9rem;text-align:center;color:#8b967f;font-size:.79rem;line-height:1.4}
.buscador input:focus-visible{outline:none}

/* en pantallas chicas el buscador es solo la lupa y se abre al tocarlo */
@media(max-width:760px){
  .buscador{flex:none;width:2.3rem;max-width:none;padding:.32rem;justify-content:center}
  .buscador input,.buscador .qclear{width:0;padding:0;opacity:0}
  .buscador.abierto{position:absolute;left:4vw;right:4vw;top:.5rem;width:auto;
    padding:.4rem .75rem;z-index:70;justify-content:flex-start}
  .buscador.abierto input{width:auto;flex:1;opacity:1;padding:.1rem 0}
  .buscador.abierto .qclear{width:auto;opacity:.9}
}
.cartbtn .count{background:var(--tinta);color:var(--miel);border-radius:999px;min-width:1.4rem;height:1.4rem;display:grid;place-items:center;font-size:.75rem;font-family:'Spline Sans Mono'}

/* ---------- fold: héroe + familias a la vista ---------- */
.fold{
  display:grid;grid-template-columns:minmax(230px,.72fr) 2fr;
  align-items:center;gap:1rem;padding:clamp(.4rem,1.5vh,.9rem) 4vw .2rem;
}
@media (max-width:940px){.fold{grid-template-columns:1fr}}
.hero{padding:0;text-align:left}
@media (max-width:940px){.hero{text-align:center;padding-top:.6rem}}
.hero h1{
  font-family:'Bricolage Grotesque';font-weight:800;
  font-size:clamp(1.35rem,min(3.4vw,4.6vh),2.7rem);line-height:1.02;letter-spacing:-.03em;
}
.hero h1 em{font-style:normal;color:var(--oliva);position:relative}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;background:var(--miel);border-radius:2px;opacity:.85}
.hero p{max-width:46ch;margin:clamp(.3rem,.8vh,.6rem) 0 0;color:#44523c;font-size:clamp(.75rem,1.15vh,.86rem);line-height:1.4}
@media (max-width:940px){.hero p{margin:.6rem auto 0}}

/* ---------- chips de conceptos ---------- */
.fam-title{
  text-align:left;font-family:'Bricolage Grotesque';font-weight:800;
  font-size:clamp(.86rem,min(1.7vw,2.15vh),1.15rem);letter-spacing:-.02em;padding:0;
}
.fam-title span{color:var(--oliva)}
/* ---------- menú de familias: pestañas + ficha explicativa ----------
   La pestaña dice cómo se llama la familia y cuántos productos tiene; la ficha
   de abajo agrega lo único que la pestaña no puede decir: qué hay adentro.
   Sin fotos chicas compitiendo entre sí — el apetito lo pone el carrusel. */
.fam-zone{min-width:0;display:flex;flex-direction:column;gap:clamp(.25rem,.7vh,.5rem);align-items:flex-start}

.famnav{
  display:flex;flex-wrap:wrap;gap:clamp(.25rem,.5vh,.4rem);
  width:100%;min-width:0;
}
.ftab{
  display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;
  border:1.5px solid #CFD9C3;background:var(--blanco);color:var(--bosque);
  font-family:inherit;font-weight:600;font-size:clamp(.66rem,1.12vh,.84rem);
  padding:clamp(.3rem,.62vh,.45rem) clamp(.5rem,.95vh,.8rem);
  border-radius:999px;cursor:pointer;transition:background .16s,border-color .16s,color .16s,transform .16s;
}
.ftab .ic{font-size:1.05em;line-height:1}
.ftab .n{
  font-family:'Spline Sans Mono';font-weight:700;font-size:.84em;
  color:#8b967f;background:var(--salvia);border-radius:999px;padding:0 .34em;
}
.ftab:hover{border-color:var(--oliva);transform:translateY(-1px)}
.ftab[aria-selected="true"]{
  background:var(--bosque);border-color:var(--bosque);color:var(--blanco);
  box-shadow:0 8px 18px -10px rgba(31,53,36,.85);
}
.ftab[aria-selected="true"] .n{background:var(--miel);color:var(--tinta)}

.famficha{
  display:flex;align-items:center;gap:clamp(.45rem,1vh,.7rem);min-width:0;
  background:var(--blanco);border:1px solid #E7ECDF;border-radius:14px;
  padding:clamp(.3rem,.7vh,.45rem);
  /* ancho de lectura: una línea de 12 px a 1300 px de ancho es ilegible */
  width:100%;max-width:min(100%,880px);
  box-shadow:0 14px 26px -22px rgba(28,42,24,.8);
}
.famficha .ff-ph{
  width:clamp(62px,9.2vh,92px);height:clamp(50px,7.5vh,74px);flex:none;
  border-radius:11px;overflow:hidden;background:var(--salvia2);display:grid;place-items:center;
  box-shadow:0 8px 16px -12px rgba(28,42,24,.6);
}
.famficha .ff-ph img{width:100%;height:100%;object-fit:cover;display:block}
.famficha .ff-ph .book{font-size:1.8rem}
.famficha .ff-tx{min-width:0;max-width:92ch}
.famficha .ff-lead{
  display:block;font-weight:700;color:var(--bosque);
  font-size:clamp(.66rem,1.08vh,.8rem);line-height:1.3;margin-bottom:.12rem;
}
.famficha .ff-desc{
  display:block;font-size:clamp(.62rem,1.02vh,.76rem);color:#5a6650;line-height:1.32;min-width:0;
}
.famficha.swap{animation:fswap .3s ease}
@keyframes fswap{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.ftab:focus-visible,.arrow:focus-visible,.cartbtn:focus-visible,
.pcard .add:focus-visible,.lbnav:focus-visible{outline:3px solid var(--miel);outline-offset:3px}
/* ---------- calesita ---------- */
.stage-wrap{position:relative;margin-top:clamp(.2rem,.9vh,.6rem)}
.stage{
  height:var(--stage-h);perspective:2000px;perspective-origin:50% 38%;
  display:grid;place-items:center;touch-action:pan-y;cursor:grab;user-select:none;
}
.stage.grabbing{cursor:grabbing}
.ring{position:relative;width:var(--card-w);height:var(--card-h);transform-style:preserve-3d}
.pcard{
  position:absolute;inset:0;transform-style:preserve-3d;
  border-radius:14px;background:#fff;border:1px solid #ececec;
  box-shadow:0 14px 30px -18px rgba(28,42,24,.45);
  display:flex;flex-direction:column;overflow:hidden;backface-visibility:hidden;
  text-align:center;
}
/* LA FOTO ENTRA ENTERA, NO RECORTADA — y esto no es estética.
 *
 * Las fotos de PRAMA son 4:5 y traen el TÍTULO DEL PRODUCTO impreso arriba y el
 * "Cont. Neto" abajo: el nombre es parte de la imagen, no un texto al costado.
 * El recuadro de la tarjeta es casi cuadrado, así que con `cover` la foto se
 * recortaba un 20% —10% arriba y 10% abajo— y lo primero que se perdía era
 * justamente el título.
 *
 * Con `contain` la foto se achica hasta entrar y quedan dos márgenes finos a los
 * costados. Es el intercambio correcto: un margen se ve; un título cortado se
 * lee mal y hace dudar de si el producto es el que dice. */
.pcard .visual{height:calc(var(--card-h) * .674);flex:none;position:relative;overflow:hidden}
.pcard .visual>img{width:100%;height:100%;object-fit:contain;display:block;image-rendering:-webkit-optimize-contrast}
.pcard .ficha,.bigcard .ficha{position:absolute;inset:0;display:flex;flex-direction:column}
.pcard .deco,.bigcard .deco{position:absolute;inset:0;pointer-events:none;opacity:.55}
.pcard .ficha h3,.bigcard .ficha h3{
  font-family:'Bricolage Grotesque';font-weight:700;font-size:.74rem;line-height:1.1;letter-spacing:-.01em;
  padding:.5rem .55rem 0;min-height:2.1rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;position:relative;
}
.pcard .mid,.bigcard .mid{
  flex:1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  padding:0 .3rem;position:relative;
}
.pcard .sellos,.bigcard .sellos{display:flex;flex-direction:column;gap:.3rem}
/* los sellos acompañan el tamaño de la tarjeta, como en las fotos de catálogo */
.pcard .sellos svg,.bigcard .sellos svg{width:calc(var(--card-h) * .128);height:calc(var(--card-h) * .128);display:block}
.pcard .pouch,.bigcard .pouch{
  width:64px;height:72px;margin:0 auto;border-radius:9px 9px 12px 12px;
  background:rgba(255,255,255,.88);box-shadow:0 6px 14px -8px rgba(0,0,0,.3);
  display:grid;place-items:center;font-size:2.1rem;position:relative;
}
.pcard .pouch::before,.bigcard .pouch::before{content:"";position:absolute;top:0;left:0;right:0;height:13px;border-radius:9px 9px 0 0;background:var(--acc,#6E4B8E);opacity:.85}
.pcard .pouch span,.bigcard .pouch span{position:relative;top:5px}
.pcard .pouch.envase,.bigcard .pouch.envase{background:none;box-shadow:none;width:auto;height:calc(var(--card-h) * .30);border-radius:0;filter:drop-shadow(0 7px 9px rgba(31,53,36,.28))}
.pcard .pouch.envase::before,.bigcard .pouch.envase::before{display:none}
.pcard .pouch.envase img,.bigcard .pouch.envase img{height:calc(var(--card-h) * .30);width:auto;display:block;object-fit:contain}
/* cqh = alto del recuadro: el envase escala con la tarjeta en cualquier pantalla */
.bigcard .pouch.envase{height:auto}
.bigcard .pouch.envase img{height:64cqh;max-height:300px;width:auto}

.pcard .neto,.bigcard .neto{font-size:.56rem;color:#55504a;padding:.1rem .5rem .3rem;position:relative}
.pcard .gbar,.bigcard .gbar{height:5px;background:#4B9B2F;flex:none;position:relative}
.pcard .info{
  flex:1;display:flex;flex-direction:column;justify-content:center;gap:.15rem;
  padding:.4rem .55rem .5rem;background:#fff;
}
/* nombre, precio y control escalan con el ancho de la tarjeta: en una notebook
   la tarjeta es más angosta y si no, el precio quedaba cortado */
.pcard .iname{
  color:#3F8626;font-weight:600;font-size:min(.76rem, calc(var(--card-w) * .092));line-height:1.15;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pcard .iprice{
  display:flex;align-items:center;justify-content:center;gap:min(.5rem, calc(var(--card-w) * .04));
  color:#3F8626;font-family:'Spline Sans Mono';font-weight:700;
  font-size:min(1.02rem, calc(var(--card-w) * .115));
}
.pcard .add{
  border:none;background:#4B9B2F;color:#fff;border-radius:999px;
  width:min(1.7rem, calc(var(--card-w) * .195));height:min(1.7rem, calc(var(--card-w) * .195));
  font-size:min(1rem, calc(var(--card-w) * .115));
  cursor:pointer;line-height:1;flex:none;transition:background .15s,transform .15s;
}
.pcard .add:hover{background:var(--miel-osc);transform:scale(1.12)}
.pcard .add.tiene{background:var(--miel-osc)}

/* ---------- contador +/− en la tarjeta ---------- */
.stepper{display:inline-flex;align-items:center;gap:.1rem;background:#4B9B2F;border-radius:999px;padding:.12rem;flex:none}
.stepper .sbtn{
  border:none;background:rgba(255,255,255,.2);color:#fff;width:1.3rem;height:1.3rem;
  border-radius:999px;font-size:.9rem;line-height:1;cursor:pointer;font-family:inherit;
  display:grid;place-items:center;transition:background .15s;
}
.stepper .sbtn:hover{background:rgba(255,255,255,.45)}
.stepper .sq{color:#fff;font-family:'Spline Sans Mono';font-weight:700;font-size:.74rem;min-width:1.15rem;text-align:center}
/* dentro de la tarjeta el contador también se ajusta al ancho disponible */
.pcard .stepper{padding:min(.12rem, calc(var(--card-w) * .012))}
.pcard .stepper .sbtn{
  width:min(1.3rem, calc(var(--card-w) * .152));height:min(1.3rem, calc(var(--card-w) * .152));
  font-size:min(.9rem, calc(var(--card-w) * .105));
}
.pcard .stepper .sq{
  font-size:min(.74rem, calc(var(--card-w) * .085));
  min-width:min(1.15rem, calc(var(--card-w) * .13));
}
.stepper .sbtn:focus-visible{outline:2px solid var(--tinta);outline-offset:1px}

/* ---------- resalte de la tarjeta seleccionada (sigue el giro) ---------- */
.pcard .selring{
  position:absolute;inset:0;border-radius:14px;z-index:4;pointer-events:none;
  border:3px solid var(--miel);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), 0 0 20px 2px rgba(216,154,43,.55);
  /* --hlr, no --hl: el aro solo aparece cuando la tarjeta está claramente al
     frente. Con la curva suave, al girar se veían dos aros a la vez y parecía
     que había dos productos seleccionados. */
  opacity:var(--hlr,0);
}
.pcard .seltag{
  position:absolute;bottom:calc(var(--card-h) * .29);left:50%;z-index:5;pointer-events:none;
  transform:translateX(-50%) scale(calc(.55 + .45*var(--hlr,0)));
  background:var(--miel);color:var(--tinta);
  font-weight:700;font-size:.5rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.22rem .55rem;border-radius:999px;white-space:nowrap;
  box-shadow:0 3px 8px rgba(0,0,0,.28);
  opacity:calc(var(--hlr,0)*var(--hlr,0));
}
.pcard .info{transition:background .18s}
.pcard.front .info{background:linear-gradient(#fff,#FFF4E0)}
.pcard.front .iprice{color:var(--miel-osc)}
.focuspanel{transition:transform .2s}
.focuspanel.pulse{transform:scale(1.035)}

/* flechas */
.arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:3rem;height:3rem;border-radius:50%;border:1.5px solid var(--bosque);
  background:var(--blanco);color:var(--bosque);font-size:1.3rem;cursor:pointer;transition:all .15s;
}
.arrow:hover{background:var(--bosque);color:var(--miel)}
.arrow.left{left:4vw}.arrow.right{right:4vw}

/* panel del producto al frente */
.focuspanel{
  text-align:center;min-height:clamp(2rem,4.95vh,2.9rem);padding:0 5vw clamp(.12rem,.48vh,.4rem);
  display:flex;flex-direction:column;align-items:center;gap:clamp(.05rem,.3vh,.2rem);
}
.focuspanel .fp-fam{font-family:'Spline Sans Mono';font-weight:700;font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--oliva)}
.focuspanel .fp-name{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(.85rem,min(2.1vw,2.16vh),1.25rem);letter-spacing:-.02em;line-height:1.1}
.focuspanel .fp-price{font-family:'Spline Sans Mono';font-weight:700;color:var(--miel-osc);font-size:clamp(.78rem,1.36vh,.92rem)}
.focuspanel .fp-meta{font-size:.64rem;color:#5a6650}
.hint{text-align:center;font-size:clamp(.55rem,.84vh,.58rem);color:#78846b;padding-bottom:clamp(.28rem,1.2vh,1.3rem);letter-spacing:.05em}
.hint b{color:var(--oliva)}

/* ---------- detalle expandido ---------- */
.lightbox{
  position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;gap:clamp(.4rem,2vw,1.6rem);
  background:rgba(28,42,24,.55);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .22s ease, padding-right .3s ease;padding:1rem;
}
.lightbox.open{opacity:1;pointer-events:auto}
.bigcard{
  width:min(460px,86vw);max-height:96vh;background:#fff;border-radius:22px;overflow:hidden;flex:none;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.55);cursor:zoom-out;
  transform:scale(.82);transition:transform .22s ease;text-align:center;
  display:flex;flex-direction:column;
}
.lightbox.open .bigcard{transform:scale(1)}
/* En el zoom el recuadro toma la proporción REAL de las fotos (4:5), así que la
   foto lo llena de borde a borde sin recortar nada. `contain` queda igual como
   red: una foto con otra proporción entra entera, con margen, en vez de perder
   la cabeza. Antes era 1:1 con `cover` y se comía el 26%. */
.bigcard .visual{height:auto;aspect-ratio:4/5;max-height:min(560px,58vh);position:relative;overflow:hidden;flex:none;container-type:size}
.bigcard .visual>img{width:100%;height:100%;object-fit:contain;display:block;image-rendering:-webkit-optimize-contrast}
.bigcard .ficha h3{font-size:1.3rem;min-height:3rem;padding:1rem 1rem 0;-webkit-line-clamp:3}
.bigcard .sellos svg{width:72px;height:72px}
.bigcard .sellos{gap:.7rem}
.bigcard .pouch{width:134px;height:152px;font-size:4.6rem;border-radius:16px 16px 20px 20px}
.bigcard .pouch::before{height:28px;border-radius:16px 16px 0 0}
.bigcard .pouch span{top:9px}
.bigcard .neto{font-size:.9rem;padding:.35rem .7rem .6rem}
.bigcard .gbar{height:9px}
.bigcard .binfo{padding:.8rem 1rem 1rem;display:flex;flex-direction:column;gap:.3rem}
.bigcard .bname{color:#3F8626;font-weight:700;font-size:1.22rem;line-height:1.2}
.bigcard .bdesc{font-size:.88rem;color:#5a6650;line-height:1.35}
.bigcard .brow{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:.25rem}
.bigcard .bprice{color:#3F8626;font-family:'Spline Sans Mono';font-weight:700;font-size:1.6rem}
.bigcard .badd{
  border:none;background:#4B9B2F;color:#fff;border-radius:999px;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:.88rem;padding:.55rem 1.1rem;
  transition:background .15s,transform .15s;
}
.bigcard .badd:hover{background:var(--miel-osc);transform:scale(1.05)}
/* Sin cuenta, el botón es un enlace a WhatsApp: se ve igual que el de la canasta. */
.bigcard a.badd{display:inline-block;text-decoration:none;text-align:center}
.bigcard .bentrar{margin:.6rem 0 0;font-size:.85rem}
.bigcard .bentrar a{color:inherit;text-decoration:underline}
.bigcard .bhint{font-size:.7rem;color:#9aa78d;margin-top:.15rem}

/* ---------- controles de canasta dentro del detalle ---------- */
.bigcard .bstep{display:inline-flex;align-items:center;gap:.25rem;background:#4B9B2F;border-radius:999px;padding:.22rem}
.bigcard .bsbtn{
  border:none;background:rgba(255,255,255,.2);color:#fff;width:1.9rem;height:1.9rem;border-radius:999px;
  font-size:1.15rem;line-height:1;cursor:pointer;font-family:inherit;display:grid;place-items:center;transition:background .15s;
}
.bigcard .bsbtn:hover{background:rgba(255,255,255,.45)}
.bigcard .bsq{color:#fff;font-family:'Spline Sans Mono';font-weight:700;font-size:1.05rem;min-width:1.9rem;text-align:center}
.bigcard .bencanasta{
  font-size:.82rem;color:var(--miel-osc);font-weight:600;margin-top:.3rem;
  display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap;
}
.bigcard .bencanasta b{font-family:'Spline Sans Mono'}
.bigcard .bdel{
  border:1px solid #d8bdb9;background:none;color:#A2483C;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:.74rem;padding:.28rem .7rem;transition:all .15s;
}
.bigcard .bdel:hover{background:#A2483C;color:#fff;border-color:#A2483C}
.bigcard .bvercanasta{
  border:none;background:var(--salvia2);color:var(--bosque);border-radius:999px;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:.78rem;padding:.34rem .8rem;margin-top:.5rem;
  display:inline-flex;align-items:center;gap:.4rem;transition:background .15s;
}
.bigcard .bvercanasta:hover{background:var(--miel);color:var(--tinta)}
.bigcard .bvercanasta .n{font-family:'Spline Sans Mono';font-weight:700;background:var(--bosque);color:var(--miel);border-radius:999px;padding:0 .4rem}
.bigcard .bsbtn:focus-visible,.bigcard .bdel:focus-visible,.bigcard .bvercanasta:focus-visible{outline:3px solid var(--miel);outline-offset:2px}
/* flechas para girar la calesita sin salir del detalle */
.lbnav{
  flex:none;width:3.2rem;height:3.2rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);
  background:rgba(255,255,255,.16);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(2px);transition:all .15s;
}
.lbnav:hover{background:var(--blanco);color:var(--bosque);transform:scale(1.08)}
/* sin arrastre nativo de imagenes: si no, el navegador corta el swipe (pointercancel) */
.lightbox img,.pcard img{-webkit-user-drag:none;user-select:none}
@media (max-width:640px){
  .lbnav{width:2.5rem;height:2.5rem;font-size:1.25rem}
  .bigcard{width:min(460px,74vw)}
}
.pcard{cursor:zoom-in}
/* ---------- franja de valores ----------
   También va en vh: es lo último que entra en pantalla, así que se achica antes
   que la calesita cuando la ventana es baja. */
.valores{
  background:var(--bosque);color:var(--salvia);padding:clamp(.45rem,1.6vh,2.6rem) 5vw;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(.35rem,1vw,1.6rem);text-align:center;align-items:center;
}
.valores h4{
  font-family:'Bricolage Grotesque';font-weight:600;color:var(--miel);
  font-size:clamp(.76rem,1.32vh,1.02rem);margin-bottom:clamp(0px,.25vh,.3rem);line-height:1.15;
}
.valores p{font-size:clamp(.65rem,1.03vh,.85rem);opacity:.85;line-height:1.28}
footer{
  background:var(--tinta);color:#9aa78d;text-align:center;
  font-size:clamp(.63rem,.95vh,.78rem);padding:clamp(.3rem,.95vh,1.4rem) 5vw;line-height:1.3;
}
footer b{color:var(--miel)}
.adminbtn{
  border:1px solid rgba(216,154,43,.45);background:none;color:var(--miel);
  font-family:inherit;font-size:.92em;padding:.15em .7em;border-radius:999px;
  cursor:pointer;margin-left:.6em;transition:background .15s,color .15s;
}
.adminbtn:hover{background:var(--miel);color:var(--tinta)}
.adminbtn:focus-visible{outline:2px solid var(--miel);outline-offset:2px}

/* ---------- panel de actualización de precios ---------- */
@media(max-width:640px){
}

/* ---------- carrito drawer ---------- */
.drawer{
  position:fixed;top:0;right:-380px;width:min(360px,92vw);height:100%;z-index:100;
  background:var(--blanco);box-shadow:-12px 0 40px rgba(0,0,0,.25);transition:right .3s ease;
  display:flex;flex-direction:column;
}
.drawer.open{right:0}
.drawer header{position:static;background:var(--bosque)}
.drawer h2{font-family:'Bricolage Grotesque';font-size:1.15rem;color:var(--blanco)}
.drawer .close{background:none;border:none;color:var(--miel);font-size:1.5rem;cursor:pointer}
.drawer .items{flex:1;overflow-y:auto;padding:1rem}
.ditem{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.85rem;padding:.6rem 0;border-bottom:1px dashed #d8ddc9}
.ditem.destaca{background:#FFF6E4;border-radius:10px;padding:.6rem .5rem;margin:0 -.5rem}
.ditem .dtx{min-width:0;flex:1}
.ditem .dname{display:block;font-weight:600;color:var(--bosque);line-height:1.15}
.ditem .dsub{display:block;font-family:'Spline Sans Mono';font-size:.68rem;color:#8b967f}
.ditem .dctl{display:flex;align-items:center;gap:.45rem;flex:none}
.ditem .dsub-total{font-family:'Spline Sans Mono';font-weight:700;font-size:.82rem;min-width:4.2rem;text-align:right}
.ditem .ddel{
  border:none;background:none;cursor:pointer;font-size:.95rem;line-height:1;opacity:.5;
  padding:.15rem;border-radius:6px;transition:opacity .15s,background .15s;
}
.ditem .ddel:hover{opacity:1;background:#F3DDD9}
.ditem .sbtn:focus-visible,.ditem .ddel:focus-visible{outline:2px solid var(--miel);outline-offset:2px}
/* el contador del encabezado pega un salto cuando cambia */
.cartbtn .count.bump{animation:bump .34s ease}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}
/* con la canasta abierta, el detalle se corre para que se vean los dos a la vez */
@media(min-width:760px){
  body.cart-open .lightbox{padding-right:calc(min(360px,92vw) + 1.5rem)}
}
.drawer .total{padding:.8rem 1rem;border-top:2px solid var(--bosque);display:flex;justify-content:space-between;font-family:'Spline Sans Mono';font-weight:700;font-size:1.05rem}
.drawer .minimo{padding:0 1rem .7rem;font-size:.74rem;color:#95521C;line-height:1.35}
.drawer .minimo.ok{color:#2F6B22}
.drawer .accion{padding:0 1rem 1rem}
.btn-pedido{
  width:100%;border:none;border-radius:999px;cursor:pointer;font-family:inherit;font-weight:700;
  font-size:.95rem;padding:.75rem 1rem;background:#4B9B2F;color:#fff;transition:transform .15s,background .15s;
}
.btn-pedido:hover{transform:scale(1.02);background:#3F8626}
.btn-pedido:disabled{background:#C3CDBA;color:#fff;cursor:not-allowed;transform:none}
.btn-pedido:focus-visible{outline:3px solid var(--miel);outline-offset:2px}

/* ---------- checkout mayorista ---------- */
.checkout{
  position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:1rem;
  background:rgba(28,42,24,.62);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .22s ease;
}
.checkout.open{opacity:1;pointer-events:auto}
.ck-caja{background:var(--blanco);border-radius:20px;width:min(680px,96vw);max-height:94vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 70px -20px rgba(0,0,0,.6)}
.ck-top{background:var(--bosque);color:var(--blanco);padding:.85rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.ck-top h2{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.1rem}
.ck-top p{font-size:.75rem;color:#A9BCA1;margin-top:.15rem}
.ck-x{background:none;border:none;color:var(--miel);font-size:1.6rem;line-height:1;cursor:pointer}
.ck-cuerpo{padding:1rem 1.1rem;overflow-y:auto;flex:1}
.ck-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem .7rem}
.ck-campo{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.ck-campo.ancho{grid-column:1 / -1}
.ck-campo label{font-size:.72rem;font-weight:700;color:var(--bosque);letter-spacing:.02em}
.ck-campo label .opt{font-weight:400;color:#98a48d}
.ck-campo input,.ck-campo select,.ck-campo textarea{
  border:1.5px solid #DCE3D3;border-radius:10px;padding:.5rem .6rem;font-family:inherit;font-size:.85rem;
  color:var(--tinta);background:var(--blanco);outline:none;transition:border-color .15s;min-width:0;
}
.ck-campo textarea{resize:vertical;min-height:56px}
.ck-campo input:focus,.ck-campo select:focus,.ck-campo textarea:focus{border-color:var(--miel)}
.ck-campo input.mal,.ck-campo select.mal{border-color:#C2604F;background:#FDF3F1}
.ck-campo .err{font-size:.68rem;color:#A2483C;min-height:.9rem}
.ck-resumen{background:var(--salvia);border-radius:14px;padding:.7rem .85rem;margin-top:.9rem;font-size:.82rem}
.ck-resumen .fila{display:flex;justify-content:space-between;gap:1rem;padding:.16rem 0}
.ck-resumen .fila b{font-family:'Spline Sans Mono'}
.ck-resumen .total{border-top:1px solid #CFD9C3;margin-top:.35rem;padding-top:.45rem;font-size:1rem;font-weight:700;color:var(--bosque)}
.ck-resumen .det{font-size:.72rem;color:#6b7663;max-height:9rem;overflow:auto;margin-bottom:.4rem;line-height:1.5}
.ck-pie{border-top:1px solid #E2E7DA;padding:.8rem 1.1rem;display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.ck-pie .nota{margin-right:auto;font-size:.73rem;color:#8b967f;max-width:40ch;line-height:1.4}
.ck-btn{border:none;border-radius:999px;cursor:pointer;font-family:inherit;font-weight:700;font-size:.88rem;padding:.6rem 1.2rem;transition:transform .15s}
.ck-btn:hover{transform:scale(1.03)}
.ck-btn.pagar{background:#009EE3;color:#fff}
.ck-btn.wa{background:#25D366;color:#fff}
.ck-btn.gris{background:var(--salvia2);color:var(--bosque)}
.ck-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.ck-aviso{background:#FBE7D6;color:#95521C;border-radius:12px;padding:.7rem .9rem;font-size:.79rem;line-height:1.45;margin-top:.8rem}
@media(max-width:640px){.ck-grid{grid-template-columns:1fr}.ck-pie .nota{order:3;flex-basis:100%;margin-right:0}}
.empty{color:#78846b;text-align:center;margin-top:2rem;font-size:.9rem}

/* toast */
.toast{
  position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%) translateY(120%);
  background:var(--tinta);color:var(--salvia);padding:.7rem 1.3rem;border-radius:999px;
  font-size:.85rem;z-index:120;transition:transform .3s;pointer-events:none;
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast b{color:var(--miel)}

@media (max-width:640px){
  :root{--card-h:clamp(200px,28.2vh,322px)}
  .topbar{font-size:.68rem;gap:.5rem;padding:.28rem .7rem;line-height:1.2}
  .fold{padding-top:.35rem}
  header{padding:.5rem 4vw}
  .logo{font-size:1.15rem}
  .logo small{font-size:.58rem;letter-spacing:.2em}
  /* en el celular la canasta queda como ícono: el buscador necesita el lugar */
  .cartbtn{padding:.4rem .6rem;font-size:.8rem;gap:.35rem}
  .cartbtn .cbtxt{display:none}
  header{padding:.45rem 4vw}
  .fold{gap:.35rem}
  .hero h1{font-size:1.32rem}
  /* el párrafo se recorta a 3 renglones para no empujar la calesita fuera de pantalla */
  /* en pantallas chicas se muestra solo la primera oración: la segunda empujaba
     la calesita fuera de la pantalla */
  .hero p{font-size:.75rem;max-width:42ch;margin-left:auto;margin-right:auto}
  .hero p .solo-ancho{display:none}
  .logo small{letter-spacing:.14em}
  .focuspanel{min-height:2.5rem}
  .hint{padding-bottom:.4rem;line-height:1.35}
  .fam-title{font-size:1rem;text-align:center;align-self:center}
  .fam-zone{align-items:center}
  /* en celular las pestañas se deslizan en una sola fila */
  .famnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:.2rem;
    scroll-snap-type:x proximity;justify-content:flex-start}
  .ftab{flex:none;scroll-snap-align:start;font-size:.74rem}
  .famficha{padding:.4rem;gap:.55rem}
  .famficha .ff-ph{width:76px;height:62px}
  .famficha .ff-lead{font-size:.7rem}
  /* en celular el párrafo se recorta: el texto completo se lee en escritorio */
  .famficha .ff-desc{font-size:.66rem;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
  /* la franja de valores pasa a dos columnas: tres bloques apilados se comían
     una pantalla entera en el celular */
  .valores{grid-template-columns:1fr 1fr;gap:.3rem .6rem;padding:.5rem 4vw;text-align:left}
  .valores div:last-child{grid-column:1 / -1}
  .valores h4{font-size:.72rem}
  .valores p{font-size:.62rem;line-height:1.25}
  footer{font-size:.6rem;padding:.35rem 4vw}
  .pcard .pouch{width:54px;height:62px;font-size:1.8rem}
  .stage{perspective:1500px}
  .pcard .foto{height:96px;font-size:2.5rem}
  .pcard h3{font-size:.76rem}
  .pcard .precio{font-size:.85rem}
  .arrow{width:2.5rem;height:2.5rem}
  .arrow.left{left:2vw}.arrow.right{right:2vw}
}
/* En pantallas altas sobra lugar después de acomodar todo: la calesita se queda
   con ese aire en vez de dejarlo vacío abajo. */
/* margen de seguridad en notebooks bajas: las tipografías de Google cambian un
   poco las alturas cuando cargan, y ahí no sobra casi nada */
@media (max-height:800px) and (min-width:641px){ :root{--card-h:clamp(246px, 35.3vh, 465px)} }
@media (min-height:860px) and (min-width:641px){ :root{--card-h:clamp(252px, 41.4vh, 520px)} }
@media (min-height:1000px) and (min-width:641px){ :root{--card-h:clamp(252px, 45.8vh, 574px)} }

@media (prefers-reduced-motion:reduce){
  .drawer,.toast{transition:none}
}

/* ------- mientras llega el catálogo -------
   El catálogo ya no viene adentro del archivo: se pide a la API, y entre que la
   página aparece y los datos llegan hay un momento en blanco. Si no se dice
   nada, ese momento se lee como "la tienda está vacía". */
.cargando{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:var(--salvia);color:var(--bosque);font-weight:600;text-align:center;padding:2rem;
}
.cargando.mal{background:#F6E3E0;color:#8C2F22}
.cargando button{
  font:inherit;font-weight:600;cursor:pointer;margin-top:.6rem;
  border:1px solid currentColor;background:transparent;color:inherit;
  border-radius:999px;padding:.4rem 1rem;
}
/* El acceso al panel, en el pie. Antes era el botón que abría el panel de
   precios acá mismo; ahora lleva a /admin/, que es donde se administra. */
.adminbtn{text-decoration:none;display:inline-block}