/* ============================================================
   Verdeo — capa de diseño de la tienda
   Tokens, componentes y estados. Sin framework: 0 dependencias.
   ============================================================ */

@font-face{font-family:'Fraunces';src:url('/static/fuentes/fraunces-latin.woff2') format('woff2');
  font-weight:400 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';src:url('/static/fuentes/fraunces-latin-ext.woff2') format('woff2');
  font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB}
@font-face{font-family:'Inter';src:url('/static/fuentes/inter-latin.woff2') format('woff2');
  font-weight:400 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url('/static/fuentes/inter-latin-ext.woff2') format('woff2');
  font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB}

:root{
  /* Color. El verde oscuro es el ancla; el brote solo acentúa. */
  --tinta:#102A21;          /* texto principal */
  --suave:#4E5F56;          /* texto secundario, 7.1:1 sobre crema */
  --tenue:#616F67;          /* metadatos: 4,93:1 sobre crema */
  --hoja:#16543F;           /* primario */
  --hoja-hover:#0F3E2E;
  --hoja-claro:#E6F0EA;
  --brote:#8CC63F;          /* acento vivo: fondos e iconos */
  --brote-texto:#A3D65C;    /* el mismo acento, legible como texto sobre --hoja */
  --tierra:#A8542F;         /* fermentos y picantes */
  --sol:#D99518;            /* ofertas, avisos */
  --rojo:#B3261E;
  --crema:#FAF7F0;          /* fondo de página */
  --papel:#FFFFFF;
  --borde:#E6DFD1;
  --borde-fuerte:#D3C9B6;

  /* Escala de radios única: todo sale de aquí */
  --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  --sombra-sm:0 1px 2px rgba(16,42,33,.06),0 1px 3px rgba(16,42,33,.05);
  --sombra:0 2px 6px rgba(16,42,33,.06),0 8px 24px rgba(16,42,33,.07);
  --sombra-lg:0 8px 20px rgba(16,42,33,.10),0 24px 56px rgba(16,42,33,.12);

  --cabecera:68px;
  --ancho:1200px;
  --fuente:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Fraunces','Georgia',serif;
  --transicion:180ms cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--fuente);color:var(--tinta);background:var(--crema);
  font-size:15px;line-height:1.6;font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.15;
  letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2rem,4.2vw,3.1rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--hoja);outline-offset:2px;border-radius:var(--r-xs)}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 20px}
.centro{text-align:center}
.oculto{display:none!important}

/* Animación de entrada. La clase la pone el JS (ver arranque en base.html):
   si el script falla, el contenido queda visible igual. */
.js .revelar{opacity:0;transform:translateY(14px)}
.js .revelar.visible{opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .js .revelar{opacity:1!important;transform:none!important}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ─────────────── Cabecera ─────────────── */

.aviso-superior{background:var(--hoja);color:#DCEAE1;font-size:12.5px;
  text-align:center;padding:7px 16px;letter-spacing:.01em}
.aviso-superior strong{color:var(--brote-texto)}

.cabecera{position:sticky;top:0;z-index:60;background:rgba(250,247,240,.92);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--borde)}
.cabecera-fila{display:flex;align-items:center;gap:18px;height:var(--cabecera)}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--display);
  font-size:1.42rem;font-weight:600;letter-spacing:-.02em;color:var(--hoja);flex-shrink:0}
.logo svg{width:30px;height:30px;flex-shrink:0}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{padding:8px 13px;border-radius:var(--r-full);font-size:14px;font-weight:500;
  color:var(--suave);transition:var(--transicion)}
.nav a:hover{background:var(--hoja-claro);color:var(--hoja)}
.nav a.activo{color:var(--hoja);background:var(--hoja-claro);font-weight:600}

.buscador{position:relative;margin-left:auto;flex:0 1 320px}
.buscador input{width:100%;height:40px;padding:0 38px 0 38px;border-radius:var(--r-full);
  border:1px solid var(--borde);background:var(--papel);font-size:14px;
  transition:var(--transicion)}
.buscador input:focus{outline:none;border-color:var(--hoja);
  box-shadow:0 0 0 3px rgba(22,84,63,.10)}
.buscador .lupa{position:absolute;left:13px;top:11px;width:17px;height:17px;
  color:var(--tenue);pointer-events:none}
.buscador .limpiar{position:absolute;right:8px;top:8px;width:24px;height:24px;
  border:0;background:none;color:var(--tenue);cursor:pointer;border-radius:var(--r-full)}
.buscador .limpiar:hover{background:var(--hoja-claro);color:var(--hoja)}
.resultados{position:absolute;top:46px;left:0;right:0;background:var(--papel);
  border:1px solid var(--borde);border-radius:var(--r);box-shadow:var(--sombra-lg);
  overflow:hidden;max-height:66vh;overflow-y:auto;z-index:70}
.resultados a{display:flex;gap:11px;padding:9px 12px;align-items:center;
  border-bottom:1px solid var(--crema)}
.resultados a:last-child{border-bottom:0}
.resultados a:hover,.resultados a.marcado{background:var(--hoja-claro)}
.resultados img{width:42px;height:42px;border-radius:var(--r-xs);object-fit:cover;
  background:var(--crema)}
.resultados .rn{font-size:13.5px;font-weight:550;line-height:1.3}
.resultados .rp{font-size:12.5px;color:var(--hoja);font-weight:600}
.resultados .vacio{padding:18px;text-align:center;color:var(--tenue);font-size:13.5px}

.acciones{display:flex;align-items:center;gap:8px;flex-shrink:0}
.icono-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--borde);
  background:var(--papel);border-radius:var(--r-full);cursor:pointer;position:relative;
  transition:var(--transicion)}
.icono-btn:hover{border-color:var(--hoja);color:var(--hoja)}
.icono-btn svg{width:19px;height:19px}
.contador{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;
  background:var(--tierra);color:#fff;border-radius:var(--r-full);font-size:11px;
  font-weight:700;display:grid;place-items:center;border:2px solid var(--crema)}
.contador:empty,.contador[data-n="0"]{display:none}
.menu-movil{display:none}

/* ─────────────── Botones ─────────────── */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;border-radius:var(--r-full);border:1px solid transparent;
  font-size:14.5px;font-weight:600;cursor:pointer;transition:var(--transicion);
  white-space:nowrap;text-align:center}
.btn svg{width:17px;height:17px;flex-shrink:0}
.btn-primario{background:var(--hoja);color:#fff}
.btn-primario:hover:not(:disabled){background:var(--hoja-hover);
  transform:translateY(-1px);box-shadow:var(--sombra)}
.btn-secundario{background:var(--papel);color:var(--tinta);border-color:var(--borde-fuerte)}
.btn-secundario:hover:not(:disabled){border-color:var(--hoja);color:var(--hoja)}
.btn-wa{background:#1DA851;color:#fff}
.btn-wa:hover:not(:disabled){background:#178a42}
.btn-fantasma{background:transparent;color:var(--hoja);padding:0 12px;height:38px}
.btn-fantasma:hover{background:var(--hoja-claro)}
.btn-lg{height:52px;padding:0 30px;font-size:16px}
.btn-sm{height:36px;padding:0 16px;font-size:13.5px}
.btn-bloque{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.cargando{pointer-events:none;position:relative;color:transparent!important}
.btn.cargando::after{content:'';position:absolute;width:17px;height:17px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:girar .7s linear infinite}
.btn-secundario.cargando::after{border-color:rgba(22,84,63,.25);border-top-color:var(--hoja)}
@keyframes girar{to{transform:rotate(360deg)}}

/* ─────────────── Portada ─────────────── */

.portada{position:relative;padding:56px 0 64px;overflow:hidden}
.portada::before{content:'';position:absolute;inset:0;
  background:radial-gradient(1000px 420px at 15% 0%,#EDF4EE 0%,transparent 62%),
             radial-gradient(760px 380px at 92% 20%,#F6EEE2 0%,transparent 60%);
  z-index:0}
.portada-rejilla{position:relative;z-index:1;display:grid;
  grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.portada h1{margin-bottom:16px}
.portada h1 em{font-style:normal;color:var(--hoja);position:relative;white-space:nowrap}
.portada h1 em::after{content:'';position:absolute;left:0;right:0;bottom:.06em;height:.28em;
  background:var(--brote);opacity:.30;border-radius:var(--r-xs);z-index:-1}
.portada .entrada{font-size:17px;color:var(--suave);max-width:47ch;margin-bottom:26px}
.portada-botones{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:26px}
.sellos{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:var(--suave)}
.sello{display:flex;align-items:center;gap:7px}
.sello svg{width:17px;height:17px;color:var(--hoja);flex-shrink:0}

.mosaico{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:150px 150px 150px;
  gap:12px}
.mosaico figure{margin:0;border-radius:var(--r-lg);overflow:hidden;position:relative;
  background:var(--hoja-claro);box-shadow:var(--sombra)}
.mosaico figure:first-child{grid-row:span 2}
.mosaico figure:last-child{grid-column:span 2;grid-row:3}
.mosaico img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.mosaico figure:hover img{transform:scale(1.05)}
.mosaico figcaption{position:absolute;left:11px;bottom:10px;background:rgba(255,255,255,.94);
  padding:5px 11px;border-radius:var(--r-full);font-size:12px;font-weight:600;
  color:var(--hoja);box-shadow:var(--sombra-sm)}

/* ─────────────── Secciones ─────────────── */

.seccion{padding:52px 0}
.seccion-cabeza{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:26px;flex-wrap:wrap}
.seccion-cabeza p{color:var(--suave);margin:6px 0 0;max-width:60ch;font-size:14.5px}
.antetitulo{font-size:12px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:var(--hoja);margin-bottom:7px;display:block}

.categorias{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px}
.categoria{background:var(--papel);border:1px solid var(--borde);border-radius:var(--r);
  padding:18px 16px;transition:var(--transicion);position:relative;overflow:hidden;
  display:block}
.categoria::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--c,var(--hoja));opacity:.85}
.categoria:hover{transform:translateY(-3px);box-shadow:var(--sombra);
  border-color:var(--borde-fuerte)}
.categoria .em{font-size:23px;display:block;margin-bottom:7px;line-height:1}
.categoria strong{display:block;font-size:14.5px;margin-bottom:3px}
.categoria span{font-size:12.5px;color:var(--tenue)}

/* ─────────────── Tarjeta de producto ─────────────── */

.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.tarjeta{background:var(--papel);border:1px solid var(--borde);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:transform var(--transicion),box-shadow var(--transicion),border-color var(--transicion)}
.tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra-lg);
  border-color:var(--borde-fuerte)}
.tarjeta-foto{position:relative;aspect-ratio:1;background:var(--hoja-claro);overflow:hidden;
  display:block}
.tarjeta-foto img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.tarjeta:hover .tarjeta-foto img{transform:scale(1.06)}
.sin-foto{width:100%;height:100%;display:grid;place-items:center;gap:6px;
  background:linear-gradient(150deg,var(--hoja-claro),#F3EFE4);color:var(--hoja);
  font-family:var(--display);font-size:2.4rem;font-weight:600;text-align:center;
  padding:14px;line-height:1}
.sin-foto small{font-family:var(--fuente);font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tenue);display:block;margin-top:8px}

.insignias{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;
  gap:5px;align-items:flex-start;z-index:2}
.insignia{background:var(--papel);color:var(--tinta);font-size:10.5px;font-weight:700;
  padding:4px 9px;border-radius:var(--r-full);letter-spacing:.03em;
  box-shadow:var(--sombra-sm);text-transform:uppercase}
.insignia.nuevo{background:var(--hoja);color:#fff}
.insignia.ahorro{background:var(--sol);color:#3A2A05}
.insignia.ultimas{background:var(--tierra);color:#fff}
.insignia.agotado{background:#4A4A4A;color:#fff}

.agregar-rapido{position:absolute;right:10px;bottom:10px;width:40px;height:40px;
  border-radius:var(--r-full);border:0;background:var(--hoja);color:#fff;cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--sombra);z-index:2;
  transition:var(--transicion)}
.agregar-rapido svg{width:19px;height:19px}
.agregar-rapido:hover{background:var(--hoja-hover);transform:scale(1.08)}
.agregar-rapido:disabled{background:#9AA69F;cursor:not-allowed;transform:none}
.agregar-rapido.hecho{background:var(--brote);color:var(--tinta)}
@media (hover:hover){
  .agregar-rapido{opacity:0;transform:translateY(6px)}
  .tarjeta:hover .agregar-rapido,.agregar-rapido:focus-visible{opacity:1;transform:none}
}

.tarjeta-cuerpo{padding:13px 14px 15px;display:flex;flex-direction:column;flex:1;gap:5px}
.tarjeta-cat{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--c,var(--hoja))}
.tarjeta-nombre{font-size:14.5px;font-weight:600;line-height:1.32;
  font-family:var(--fuente);letter-spacing:0}
.tarjeta-resumen{font-size:12.5px;color:var(--tenue);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tarjeta-pie{margin-top:auto;padding-top:9px;display:flex;align-items:baseline;
  justify-content:space-between;gap:8px}
.precio{font-size:17px;font-weight:700;color:var(--tinta);letter-spacing:-.01em}
.precio-antes{font-size:12.5px;color:var(--tenue);text-decoration:line-through;
  margin-left:6px;font-weight:400}
.unidad{font-size:11.5px;color:var(--tenue)}

/* ─────────────── Tienda: filtros ─────────────── */

.tienda-layout{display:grid;grid-template-columns:236px 1fr;gap:30px;
  align-items:start;padding:28px 0 60px}
.filtros{position:sticky;top:calc(var(--cabecera) + 16px);background:var(--papel);
  border:1px solid var(--borde);border-radius:var(--r);padding:18px;
  max-height:calc(100vh - var(--cabecera) - 32px);overflow-y:auto}
.filtro-grupo{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--crema)}
.filtro-grupo:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.filtro-titulo{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tenue);margin-bottom:10px}
.filtro-opcion{display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;
  font-size:13.5px;user-select:none}
.filtro-opcion input{width:16px;height:16px;accent-color:var(--hoja);cursor:pointer;
  flex-shrink:0;margin:0}
.filtro-opcion .n{margin-left:auto;font-size:11.5px;color:var(--tenue)}
.filtro-opcion:hover{color:var(--hoja)}
.rango{width:100%;accent-color:var(--hoja);margin:8px 0 4px}
.rango-valores{display:flex;justify-content:space-between;font-size:12px;color:var(--suave)}

.barra-tienda{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.barra-tienda .conteo{font-size:13.5px;color:var(--suave);margin-right:auto}
.barra-tienda select{height:38px;padding:0 32px 0 12px;border-radius:var(--r-sm);
  border:1px solid var(--borde);background:var(--papel);font-size:13.5px;cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23616F67' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-full);
  background:var(--hoja-claro);color:var(--hoja);font-size:12.5px;font-weight:600;
  border:1px solid transparent;cursor:pointer}
.chip button{border:0;background:none;cursor:pointer;padding:0;line-height:1;font-size:15px;
  color:inherit;opacity:.6}
.chip button:hover{opacity:1}
.btn-filtros{display:none}

.vacio-estado{text-align:center;padding:62px 20px;color:var(--tenue)}
.vacio-estado svg{width:52px;height:52px;margin:0 auto 14px;color:var(--borde-fuerte)}
.vacio-estado h3{margin-bottom:6px;color:var(--tinta)}

.esqueleto{background:linear-gradient(90deg,#F0EDE4 25%,#F8F5EE 50%,#F0EDE4 75%);
  background-size:200% 100%;animation:brillo 1.3s infinite;border-radius:var(--r)}
@keyframes brillo{to{background-position:-200% 0}}
.esqueleto-tarjeta{height:330px}

/* ─────────────── Cajón del carrito ─────────────── */

.velo{position:fixed;inset:0;background:rgba(16,42,33,.42);z-index:90;opacity:0;
  pointer-events:none;transition:opacity .25s ease}
.velo.abierto{opacity:1;pointer-events:auto}
.cajon{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);background:var(--crema);
  z-index:100;display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .3s cubic-bezier(.3,.8,.3,1);box-shadow:var(--sombra-lg)}
.cajon.abierto{transform:none}
.cajon-cabeza{display:flex;align-items:center;gap:12px;padding:17px 20px;
  border-bottom:1px solid var(--borde);background:var(--papel)}
.cajon-cabeza h3{flex:1;font-size:1.15rem}
.cajon-cuerpo{flex:1;overflow-y:auto;padding:14px 20px}
.cajon-pie{border-top:1px solid var(--borde);padding:16px 20px 20px;background:var(--papel)}

.linea{display:grid;grid-template-columns:64px 1fr auto;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--borde);align-items:start}
.linea:last-child{border-bottom:0}
.linea img{width:64px;height:64px;border-radius:var(--r-sm);object-fit:cover;
  background:var(--hoja-claro)}
.linea-nombre{font-size:13.5px;font-weight:600;line-height:1.35;margin-bottom:2px}
.linea-unidad{font-size:11.5px;color:var(--tenue);margin-bottom:7px}
.linea-precio{font-size:14px;font-weight:700;text-align:right;white-space:nowrap}
.linea-quitar{border:0;background:none;color:var(--tenue);cursor:pointer;font-size:11.5px;
  padding:4px 0;text-align:right;width:100%;text-decoration:underline;
  text-underline-offset:2px}
.linea-quitar:hover{color:var(--rojo)}

.paso{display:inline-flex;align-items:center;border:1px solid var(--borde-fuerte);
  border-radius:var(--r-full);overflow:hidden;background:var(--papel);height:32px}
.paso button{width:30px;height:30px;border:0;background:none;cursor:pointer;
  color:var(--hoja);font-size:16px;display:grid;place-items:center;line-height:1}
.paso button:hover:not(:disabled){background:var(--hoja-claro)}
.paso button:disabled{opacity:.35;cursor:not-allowed}
.paso span{min-width:30px;text-align:center;font-size:13.5px;font-weight:700}

.totales{font-size:14px}
.totales .fila{display:flex;justify-content:space-between;padding:5px 0;color:var(--suave)}
.totales .fila.grande{font-size:19px;font-weight:700;color:var(--tinta);
  border-top:1px solid var(--borde);margin-top:9px;padding-top:12px}
.totales .fila.ahorro{color:var(--tierra);font-weight:600}

.barra-envio{background:var(--hoja-claro);border-radius:var(--r-sm);padding:10px 13px;
  font-size:12.5px;color:var(--hoja);margin-bottom:13px;display:flex;flex-direction:column;
  gap:7px}
.barra-envio .via{height:5px;background:rgba(22,84,63,.16);border-radius:var(--r-full);
  overflow:hidden}
.barra-envio .via i{display:block;height:100%;background:var(--hoja);border-radius:var(--r-full);
  transition:width .4s ease}

/* ─────────────── Ficha de producto ─────────────── */

.miga{font-size:12.5px;color:var(--tenue);padding:18px 0 0}
.miga a:hover{color:var(--hoja);text-decoration:underline}
.producto-layout{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:24px 0 56px;
  align-items:start}
.galeria .principal{aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;
  background:var(--hoja-claro);border:1px solid var(--borde);position:relative}
.galeria .principal img{width:100%;height:100%;object-fit:cover}
.galeria .tiras{display:flex;gap:9px;margin-top:11px}
.galeria .tiras button{width:70px;height:70px;border-radius:var(--r-sm);overflow:hidden;
  border:2px solid var(--borde);background:var(--hoja-claro);cursor:pointer;padding:0}
.galeria .tiras button.activa{border-color:var(--hoja)}
.galeria .tiras img{width:100%;height:100%;object-fit:cover}

.ficha h1{font-size:clamp(1.7rem,3vw,2.35rem);margin-bottom:10px}
.ficha .resumen{font-size:16px;color:var(--suave);margin-bottom:18px}
.ficha-precio{display:flex;align-items:baseline;gap:11px;margin-bottom:6px}
.ficha-precio .precio{font-size:31px}
.ficha .presentacion{font-size:13px;color:var(--tenue);margin-bottom:20px}
.etiquetas{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}
.etiqueta{font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:var(--r-full);
  background:var(--papel);border:1px solid var(--borde);color:var(--suave)}
.comprar{display:flex;gap:11px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.comprar .paso{height:44px;border-radius:var(--r-full)}
.comprar .paso button{width:40px;height:42px;font-size:18px}
.comprar .paso span{min-width:38px;font-size:15px}
.comprar .btn{flex:1;min-width:180px}

.datos-producto{border:1px solid var(--borde);border-radius:var(--r);background:var(--papel);
  overflow:hidden;margin-top:22px}
.dato{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:12px 16px;
  border-bottom:1px solid var(--crema);font-size:13.5px}
.dato:last-child{border-bottom:0}
.dato dt{color:var(--tenue);font-weight:600;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.04em}
.dato dd{margin:0}

.bloque-texto{margin-top:34px}
.bloque-texto h2{font-size:1.4rem;margin-bottom:12px}
.bloque-texto p{color:var(--suave);max-width:68ch}
.usos{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:9px}
.usos li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--suave)}
.usos li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--brote);
  margin-top:8px;flex-shrink:0}
.nota-legal{background:#FBF5E8;border:1px solid #EBD9AF;border-radius:var(--r-sm);
  padding:11px 14px;font-size:12.5px;color:#6B5417;margin-top:16px}

.contenido-canasta{display:grid;gap:9px;margin-top:14px}
.contenido-canasta .ci{display:flex;align-items:center;gap:11px;background:var(--papel);
  border:1px solid var(--borde);border-radius:var(--r-sm);padding:9px 12px;font-size:13.5px}
.contenido-canasta img{width:38px;height:38px;border-radius:var(--r-xs);object-fit:cover;
  background:var(--hoja-claro)}
.contenido-canasta .cn{flex:1}
.contenido-canasta .cc{font-weight:700;color:var(--hoja)}

/* ─────────────── Checkout ─────────────── */

.checkout{display:grid;grid-template-columns:1fr 380px;gap:34px;padding:26px 0 60px;
  align-items:start}
.pasos{display:flex;gap:8px;margin-bottom:26px}
.paso-n{flex:1;padding:11px 8px 12px;border-radius:var(--r-sm);background:var(--papel);
  border:1px solid var(--borde);text-align:center;font-size:12.5px;font-weight:600;
  color:var(--tenue);position:relative;transition:var(--transicion)}
.paso-n.activo{border-color:var(--hoja);color:var(--hoja);background:var(--hoja-claro)}
.paso-n.hecho{color:var(--hoja);border-color:var(--hoja-claro);background:var(--hoja-claro)}
.paso-n i{display:block;font-style:normal;font-size:16px;font-weight:700;margin-bottom:2px}

.tarjeta-form{background:var(--papel);border:1px solid var(--borde);border-radius:var(--r);
  padding:22px;margin-bottom:16px}
.tarjeta-form h3{margin-bottom:4px}
.tarjeta-form .ayuda{font-size:13px;color:var(--tenue);margin-bottom:16px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo{display:flex;flex-direction:column;gap:5px}
.campo.ancho{grid-column:1/-1}
.campo label{font-size:12.5px;font-weight:600;color:var(--suave)}
.campo label .req{color:var(--tierra)}
.campo input,.campo select,.campo textarea{height:44px;padding:0 13px;border-radius:var(--r-sm);
  border:1px solid var(--borde);background:var(--papel);font-family:inherit;font-size:14px;
  color:var(--tinta);transition:var(--transicion);width:100%}
.campo textarea{height:auto;padding:11px 13px;resize:vertical;min-height:76px;line-height:1.5}
.campo select{appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23616F67' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;
  border-color:var(--hoja);box-shadow:0 0 0 3px rgba(22,84,63,.10)}
.campo.error input,.campo.error select{border-color:var(--rojo);
  box-shadow:0 0 0 3px rgba(179,38,30,.08)}
.campo .msg-error{font-size:12px;color:var(--rojo);display:none}
.campo.error .msg-error{display:block}

.opciones{display:grid;gap:10px}
.opcion{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r-sm);
  border:1.5px solid var(--borde);background:var(--papel);cursor:pointer;
  transition:var(--transicion)}
.opcion:hover{border-color:var(--borde-fuerte)}
.opcion.elegida{border-color:var(--hoja);background:var(--hoja-claro)}
.opcion input{margin-top:2px;accent-color:var(--hoja);width:17px;height:17px;flex-shrink:0}
.opcion .ot{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;
  flex-wrap:wrap}
.opcion .od{font-size:12.5px;color:var(--tenue);margin-top:3px;line-height:1.45}
.opcion .costo{margin-left:auto;font-weight:700;font-size:14px;white-space:nowrap}

.fechas{display:flex;gap:9px;overflow-x:auto;padding:3px 1px 8px}
.fecha{min-width:78px;padding:11px 8px;border-radius:var(--r-sm);border:1.5px solid var(--borde);
  background:var(--papel);cursor:pointer;text-align:center;transition:var(--transicion);
  flex-shrink:0}
.fecha:hover{border-color:var(--borde-fuerte)}
.fecha.elegida{border-color:var(--hoja);background:var(--hoja-claro);color:var(--hoja)}
.fecha b{display:block;font-size:15px}
.fecha span{font-size:11px;color:var(--tenue);text-transform:capitalize}
.fecha.elegida span{color:var(--hoja)}

.resumen-lateral{position:sticky;top:calc(var(--cabecera) + 16px);background:var(--papel);
  border:1px solid var(--borde);border-radius:var(--r);padding:20px}
.resumen-lateral h3{margin-bottom:14px;font-size:1.05rem}
.resumen-items{max-height:280px;overflow-y:auto;margin-bottom:14px}
.mini-linea{display:flex;gap:10px;align-items:center;padding:8px 0;
  border-bottom:1px solid var(--crema);font-size:13px}
.mini-linea:last-child{border-bottom:0}
.mini-linea img{width:42px;height:42px;border-radius:var(--r-xs);object-fit:cover;
  background:var(--hoja-claro);flex-shrink:0}
.mini-linea .mn{flex:1;line-height:1.35}
.mini-linea .mc{color:var(--tenue);font-size:12px}
.mini-linea .mp{font-weight:600;white-space:nowrap}

.cupon-fila{display:flex;gap:8px;margin:13px 0}
.cupon-fila input{flex:1;height:40px;padding:0 12px;border-radius:var(--r-sm);
  border:1px solid var(--borde);font-size:13.5px;text-transform:uppercase;
  font-family:inherit}
.cupon-msg{font-size:12.5px;margin-bottom:10px}
.cupon-msg.ok{color:var(--hoja)}
.cupon-msg.mal{color:var(--rojo)}

/* ─────────────── Pedido / seguimiento ─────────────── */

.gracias{text-align:center;padding:46px 20px 26px}
.gracias .marca-ok{width:66px;height:66px;border-radius:var(--r-full);background:var(--hoja-claro);
  color:var(--hoja);display:grid;place-items:center;margin:0 auto 18px}
.gracias .marca-ok svg{width:33px;height:33px}
.gracias .codigo{font-family:var(--display);font-size:1.5rem;font-weight:600;
  background:var(--papel);border:1px dashed var(--borde-fuerte);border-radius:var(--r-sm);
  padding:9px 20px;display:inline-block;margin:14px 0 6px;letter-spacing:.04em}

.linea-tiempo{position:relative;padding-left:30px;margin:26px 0}
.linea-tiempo::before{content:'';position:absolute;left:9px;top:8px;bottom:8px;width:2px;
  background:var(--borde)}
.hito{position:relative;padding-bottom:20px}
.hito::before{content:'';position:absolute;left:-26px;top:4px;width:12px;height:12px;
  border-radius:50%;background:var(--papel);border:2.5px solid var(--borde-fuerte);z-index:1}
.hito.hecho::before{background:var(--hoja);border-color:var(--hoja)}
.hito.actual::before{background:var(--brote);border-color:var(--hoja);
  box-shadow:0 0 0 4px rgba(140,198,63,.28)}
.hito b{font-size:14px;display:block}
.hito span{font-size:12.5px;color:var(--tenue)}
.hito p{font-size:13px;color:var(--suave);margin:3px 0 0}

.caja-datos{background:var(--papel);border:1px solid var(--borde);border-radius:var(--r);
  padding:18px 20px;margin-bottom:16px}
.caja-datos h3{font-size:1rem;margin-bottom:12px}
.caja-datos .df{display:flex;justify-content:space-between;gap:16px;padding:6px 0;
  font-size:13.5px;border-bottom:1px solid var(--crema)}
.caja-datos .df:last-child{border-bottom:0}
.caja-datos .df span:first-child{color:var(--tenue)}
.caja-datos .df span:last-child{font-weight:600;text-align:right}

/* ─────────────── Avisos ─────────────── */

.avisos{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:200;
  display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none;
  width:calc(100% - 32px);max-width:420px}
.aviso{background:var(--tinta);color:#fff;padding:12px 18px;border-radius:var(--r-full);
  font-size:13.5px;font-weight:500;box-shadow:var(--sombra-lg);display:flex;
  align-items:center;gap:10px;pointer-events:auto;
  animation:subir .3s cubic-bezier(.2,.8,.3,1)}
.aviso svg{width:17px;height:17px;flex-shrink:0}
.aviso.exito{background:var(--hoja)}
.aviso.error{background:var(--rojo)}
.aviso.saliendo{animation:bajar .25s ease forwards}
@keyframes subir{from{opacity:0;transform:translateY(14px)}}
@keyframes bajar{to{opacity:0;transform:translateY(10px)}}

.alerta{padding:13px 16px;border-radius:var(--r-sm);font-size:13.5px;margin-bottom:16px;
  display:flex;gap:10px;align-items:flex-start}
.alerta svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.alerta.aviso-suave{background:#FBF5E8;border:1px solid #EBD9AF;color:#6B5417}
.alerta.mala{background:#FDECEA;border:1px solid #F3C5C1;color:#8C1D18}
.alerta.buena{background:var(--hoja-claro);border:1px solid #C5DDCE;color:var(--hoja)}

/* ─────────────── Pie ─────────────── */

.pie{background:var(--tinta);color:#C7D3CC;margin-top:56px;padding:46px 0 26px}
.pie-rejilla{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:34px;
  margin-bottom:32px}
.pie h4{color:#fff;font-family:var(--fuente);font-size:12.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:13px}
.pie a{color:#C7D3CC;font-size:13.5px;display:block;padding:4px 0}
.pie a:hover{color:var(--brote-texto)}
.pie .logo{color:#fff;margin-bottom:12px}
.pie p{font-size:13.5px;line-height:1.6;color:#A9B8B0;max-width:36ch}
.pie-abajo{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;
  justify-content:space-between;gap:16px;font-size:12.5px;color:#8B9A92;flex-wrap:wrap}

.wa-flotante{position:fixed;right:20px;bottom:20px;width:54px;height:54px;
  border-radius:var(--r-full);background:#1DA851;color:#fff;display:grid;place-items:center;
  box-shadow:var(--sombra-lg);z-index:80;transition:var(--transicion)}
.wa-flotante:hover{transform:scale(1.07)}
.wa-flotante svg{width:27px;height:27px}

/* ─────────────── Adaptable ─────────────── */

@media (max-width:1000px){
  .portada-rejilla{grid-template-columns:1fr;gap:32px}
  .mosaico{grid-template-rows:130px 130px 130px}
  .checkout{grid-template-columns:1fr}
  .resumen-lateral{position:static;order:-1}
  .producto-layout{grid-template-columns:1fr;gap:28px}
  .pie-rejilla{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .nav,.buscador{display:none}
  .menu-movil{display:grid}
  .tienda-layout{grid-template-columns:1fr}
  .filtros{position:fixed;inset:auto 0 0 0;top:auto;max-height:82vh;border-radius:var(--r-lg) var(--r-lg) 0 0;
    z-index:110;transform:translateY(100%);transition:transform .3s cubic-bezier(.3,.8,.3,1);
    box-shadow:var(--sombra-lg);border-width:1px 0 0}
  .filtros.abierto{transform:none}
  .btn-filtros{display:inline-flex}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:13px}
  .agregar-rapido{opacity:1;transform:none}
  .campos{grid-template-columns:1fr}
  .seccion{padding:40px 0}
  .wa-flotante{bottom:16px;right:16px;width:50px;height:50px}
}
@media (max-width:560px){
  .pie-rejilla{grid-template-columns:1fr;gap:24px}
  .cajon{width:100%}
  .pasos{font-size:11px}
  .paso-n{padding:9px 4px 10px}
  .portada{padding:36px 0 44px}
  .mosaico{grid-template-rows:112px 112px 112px;gap:9px}
}

@media print{
  .cabecera,.pie,.wa-flotante,.avisos,.aviso-superior,.filtros{display:none!important}
  body{background:#fff}
}

/* ─────────────── Menú en pantalla pequeña ─────────────── */
/* La barra de navegación y el buscador se ocultan bajo 820 px; sin este panel
   no habría forma de llegar a la tienda desde un teléfono. */

.panel-movil{position:fixed;left:0;right:0;top:0;z-index:95;background:var(--crema);
  border-bottom:1px solid var(--borde);box-shadow:var(--sombra-lg);
  transform:translateY(-102%);transition:transform .28s cubic-bezier(.3,.8,.3,1);
  padding:14px 20px 20px;max-height:88vh;overflow-y:auto}
.panel-movil.abierto{transform:none}
.panel-movil-cabeza{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px}
.panel-movil .buscador-movil{position:relative;margin-bottom:14px}
.panel-movil .buscador-movil input{width:100%;height:46px;padding:0 14px 0 40px;
  border-radius:var(--r-full);border:1px solid var(--borde);background:var(--papel);
  font-size:16px;font-family:inherit}
.panel-movil .buscador-movil input:focus{outline:none;border-color:var(--hoja);
  box-shadow:0 0 0 3px rgba(22,84,63,.10)}
.panel-movil .buscador-movil svg{position:absolute;left:14px;top:14px;width:18px;
  height:18px;color:var(--tenue);pointer-events:none}
.panel-movil nav{display:grid;gap:2px}
.panel-movil nav a{padding:13px 14px;border-radius:var(--r-sm);font-size:15.5px;
  font-weight:600;color:var(--tinta);display:flex;align-items:center;
  justify-content:space-between}
.panel-movil nav a:active,.panel-movil nav a.activo{background:var(--hoja-claro);
  color:var(--hoja)}
.panel-movil .separador{height:1px;background:var(--borde);margin:12px 0}
.panel-movil .contacto{font-size:13px;color:var(--suave);display:grid;gap:8px}
.panel-movil .contacto a{color:var(--hoja);font-weight:600}
#resultados-movil{margin-bottom:6px}
#resultados-movil:empty{display:none}
#resultados-movil a{display:flex;gap:11px;padding:9px 10px;align-items:center;
  border-radius:var(--r-sm);background:var(--papel);margin-bottom:5px;
  border:1px solid var(--borde)}
#resultados-movil img{width:44px;height:44px;border-radius:var(--r-xs);
  object-fit:cover;background:var(--hoja-claro)}

/* Enlace a la cuenta en la cabecera. Cuando hay cliente reconocido crece para
   mostrar su nombre; sin él es solo el icono. */
#enlace-cuenta{width:auto;min-width:40px;padding:0;gap:0;overflow:hidden}
#enlace-cuenta .nombre-cuenta{max-width:0;opacity:0;white-space:nowrap;font-size:13px;
  font-weight:600;transition:max-width .25s ease,opacity .2s ease,margin .25s ease}
#enlace-cuenta.con-nombre{padding:0 14px 0 11px;gap:7px}
#enlace-cuenta.con-nombre .nombre-cuenta{max-width:120px;opacity:1;
  overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){
  #enlace-cuenta.con-nombre{padding:0;gap:0}
  #enlace-cuenta.con-nombre .nombre-cuenta{max-width:0;opacity:0}
}

/* Crédito de las fotos que no son propias. Discreto pero legible: una licencia
   CC obliga a atribuir, y esconder la línea sería no cumplirla. */
.credito-foto{font-size:11.5px;color:var(--tenue);margin:8px 0 0;line-height:1.4}
.credito-foto a{text-decoration:underline;text-underline-offset:2px}

/* ─────────────── Las fotos de la huerta ─────────────── */
/* Fotos reales de la finca. Rejilla asimétrica: la vertical manda a la
   izquierda y las dos horizontales se apilan a su lado. */

.huerta-seccion{background:var(--papel);border-block:1px solid var(--borde)}

.mosaico-huerta{display:grid;grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);
  grid-template-rows:auto auto;gap:14px}
.mosaico-huerta figure{margin:0;position:relative;overflow:hidden;
  border-radius:var(--r-lg);background:var(--hoja-claro);box-shadow:var(--sombra)}
.mosaico-huerta .hf-alta{grid-row:span 2}
.mosaico-huerta img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.mosaico-huerta figure:hover img{transform:scale(1.04)}
.mosaico-huerta .hf-alta img{min-height:420px}
.mosaico-huerta figure:not(.hf-alta) img{height:100%;min-height:200px}
.mosaico-huerta figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:26px 16px 13px;font-size:12.5px;font-weight:600;color:#fff;
  background:linear-gradient(to top,rgba(16,42,33,.78),transparent);
  letter-spacing:.01em}

@media (max-width:820px){
  .mosaico-huerta{grid-template-columns:1fr;grid-template-rows:auto}
  .mosaico-huerta .hf-alta{grid-row:auto}
  .mosaico-huerta .hf-alta img{min-height:0;max-height:440px}
  .mosaico-huerta figure:not(.hf-alta) img{min-height:0}
}