/* ===================================================================
HORTALIZAS JL · "El Puesto" — sistema de diseño cinematográfico
Plaza tradicional + efectos profesionales. Autocontenido.
=================================================================== */
:root{
/* paleta plaza / campo */
--noche:#0a1a10; /* verde casi negro (cinematográfico) */
--bosque:#123022; /* verde profundo */
--hoja:#1f5734; /* verde hoja */
--hoja-claro:#2f7a4a;
--crema:#f6efdc; /* crema cartel */
--papel:#fbf7ea;
--ocre:#d8a24a; /* ocre/dorado */
--ocre-hondo:#b07d2c;
--terra:#b8512f; /* terracota acento */
--madera:#7a4e2b; /* madera del mostrador */
--madera-claro:#9a6638;
--tiza:#eae2c9;
--humo:rgba(10,26,16,.55);
--tinta:#0c2216;
--tinta-suave:#3a4a40;
/* tipografía */
--serif:"Fraunces",Georgia,serif;
--sans:"DM Sans",system-ui,-apple-system,sans-serif;
--mono:"DM Mono","SF Mono",ui-monospace,monospace;
--r:18px;
--r-lg:clamp(22px,3vw,40px);
--sombra:0 26px 60px -28px rgba(10,26,16,.55);
--sombra-suave:0 14px 36px -22px rgba(10,26,16,.4);
--ease:cubic-bezier(.22,.61,.36,1);
--nav-h:74px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
font-family:var(--sans);
color:var(--tinta);
background:var(--papel);
line-height:1.6;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--ocre);color:var(--noche)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.05;letter-spacing:-.01em}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;font-weight:500}
.wrap{width:min(1240px,92vw);margin-inline:auto}
/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.96rem;
padding:.92em 1.5em;border-radius:999px;transition:transform .3s var(--ease),box-shadow .3s,background .3s,color .3s;
will-change:transform}
.btn svg{width:1.05em;height:1.05em}
.btn--primary{background:var(--ocre);color:var(--noche);box-shadow:0 12px 30px -12px rgba(216,162,74,.7)}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(216,162,74,.85)}
.btn--green{background:var(--hoja);color:var(--crema)}
.btn--green:hover{transform:translateY(-3px);background:var(--hoja-claro)}
.btn--ghost{border:1.5px solid rgba(246,239,220,.5);color:var(--crema)}
.btn--ghost:hover{background:rgba(246,239,220,.12);transform:translateY(-3px)}
.btn--dark{background:var(--noche);color:var(--crema)}
.btn--dark:hover{transform:translateY(-3px);background:var(--bosque)}
/* =========================================================
PRELOADER
========================================================= */
#preloader{position:fixed;inset:0;z-index:9999;
background:radial-gradient(120% 92% at 50% 32%,#fdf8ec 0%,#f5ecd6 58%,#ecdfc0 100%);
display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s}
#preloader.gone{opacity:0;visibility:hidden}
.pre-centro{display:flex;flex-direction:column;align-items:center;gap:22px}
/* sello con arco ocre que gira a su alrededor */
.pre-aro{position:relative;width:150px;height:150px;display:grid;place-items:center}
.pre-aro::after{content:"";position:absolute;inset:0;border-radius:50%;border:4px solid rgba(216,162,74,.18)}
.pre-aro::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:1;
background:conic-gradient(from 0deg,transparent 0 60%,var(--ocre) 82%,var(--hoja) 96%,transparent 100%);
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
animation:preGirar 1.1s linear infinite}
@keyframes preGirar{to{transform:rotate(360deg)}}
.pre-sello{width:106px;height:106px;border-radius:50%;object-fit:cover;background:#fff;padding:5px;
box-shadow:0 16px 34px -12px rgba(10,26,16,.4),0 0 0 1px rgba(216,162,74,.35);
animation:preLatido 1.9s var(--ease) infinite}
@keyframes preLatido{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.pre-txt{display:inline-flex;align-items:center;font-family:var(--serif);font-style:italic;
color:var(--hoja);font-size:1.05rem;opacity:.95}
.pre-puntos{display:inline-flex;gap:3px;margin-left:5px}
.pre-puntos i{width:4px;height:4px;border-radius:50%;background:var(--ocre);display:inline-block;
animation:prePunto 1.2s infinite}
.pre-puntos i:nth-child(2){animation-delay:.16s}
.pre-puntos i:nth-child(3){animation-delay:.32s}
@keyframes prePunto{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.pre-barra{position:relative;width:168px;height:3px;border-radius:999px;overflow:hidden;background:rgba(31,87,52,.13)}
.pre-barra i{position:absolute;top:0;left:-42%;height:100%;width:42%;border-radius:999px;
background:linear-gradient(90deg,transparent,var(--ocre),var(--hoja));animation:preBarra 1.3s var(--ease) infinite}
@keyframes preBarra{to{left:100%}}
@media(prefers-reduced-motion:reduce){
.pre-aro::before,.pre-sello,.pre-puntos i,.pre-barra i{animation:none}}
/* =========================================================
NAV (logo circular CENTRADO, siempre legible)
Arregla el bug: barra translúcida oscura + logo en aro crema
========================================================= */
/* Nav institucional SIEMPRE crema y SIEMPRE grande (estilo soyliga.org):
barra de papel con filete superior verde→ocre, doble línea inferior,
y el sello central como medallón que sobresale hacia la escena. */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nav-h);
display:grid;grid-template-columns:1fr clamp(150px,17vw,184px) 1fr;align-items:center;
padding:0 clamp(16px,4vw,46px);
background:linear-gradient(180deg,#fcf8ec 0%,#f6efda 100%);
border-bottom:1px solid rgba(216,162,74,.55);
box-shadow:0 12px 30px -18px rgba(10,26,16,.5),inset 0 -3px 0 rgba(31,87,52,.10);
transition:box-shadow .4s var(--ease),height .4s var(--ease)}
/* filete decorativo superior tipo membrete */
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--hoja),var(--ocre) 50%,var(--hoja))}
.nav.scrolled{box-shadow:0 16px 40px -18px rgba(10,26,16,.6),inset 0 -3px 0 rgba(31,87,52,.12)}
.nav-links{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,32px);
font-weight:700;font-size:.96rem;font-family:var(--serif);letter-spacing:.01em}
/* el sello va en absoluto (fuera del flujo del grid), así que fijamos cada grupo
a su columna para que no se reacomoden ni invadan el centro */
.nav-links.left{grid-column:1}
.nav-links.right{grid-column:3;justify-content:center}
.nav-links a{color:var(--tinta);opacity:.92;position:relative;padding:.3em 0;transition:opacity .3s,color .3s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;
background:linear-gradient(90deg,var(--hoja),var(--ocre));transition:width .35s var(--ease)}
.nav-links a:hover,.nav-links a.activo{color:var(--hoja);opacity:1}
.nav-links a:hover::after,.nav-links a.activo::after{width:100%}
/* el sello se posiciona en absoluto para NO inflar la altura de la barra
(si queda en el flujo del grid, sus 96px estiran la fila y descentran el texto) */
.nav-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% + 12px));z-index:2}
.nav-logo img{width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--crema);padding:6px;
box-shadow:0 18px 34px -10px rgba(10,26,16,.5),0 0 0 2.5px rgba(216,162,74,.95),
0 0 0 9px rgba(246,239,220,.7),0 0 0 10px rgba(216,162,74,.32),inset 0 0 0 1px rgba(0,0,0,.06);
transition:transform .4s var(--ease),box-shadow .4s}
.nav-logo img:hover{transform:scale(1.05) rotate(-3deg);
box-shadow:0 22px 40px -10px rgba(10,26,16,.55),0 0 0 2.5px rgba(216,162,74,1),
0 0 0 9px rgba(246,239,220,.8),0 0 0 11px rgba(216,162,74,.45),0 0 32px -2px rgba(216,162,74,.6)}
.nav-perfil{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.72rem;
font-weight:700;letter-spacing:.06em;color:var(--tinta);background:rgba(31,87,52,.08);border:1px solid rgba(31,87,52,.22);
padding:.5em .9em;border-radius:999px;text-transform:uppercase;transition:all .3s}
.nav-perfil:hover{border-color:var(--ocre);color:var(--hoja)}
.nav-burger{display:none;flex-direction:column;gap:5px;justify-self:end;padding:8px}
.nav-burger span{width:26px;height:2px;background:var(--tinta);border-radius:2px;transition:.3s}
/* =========================================================
ESCENA DEL PUESTO (apertura cinematográfica por capas)
========================================================= */
#escena{position:relative;height:100svh;min-height:640px;overflow:hidden;
background:#0a1a10;display:grid;place-items:end center;
--ciclo:108s}
/* ============ CIELO con ciclo día/noche ============ */
/* amanecer → mañana → día pleno → atardecer → anochecer → noche → amanecer */
.escena-cielo{position:absolute;inset:0;z-index:0;pointer-events:none;
animation:cieloCiclo var(--ciclo) linear infinite}
/* paleta SUAVE y relajada: amanece y anochece sin oscuros pesados; la noche
se queda en un azul calmo (nunca negro) para que la página respire. */
@keyframes cieloCiclo{
0% {background:linear-gradient(180deg,#6f6086 0%,#c8917c 34%,#e2b27d 62%,#2c4029 100%)} /* amanecer suave */
22% {background:linear-gradient(180deg,#84b7d6 0%,#aed4e2 30%,#d3e7ba 60%,#34522f 100%)} /* mañana clara */
40% {background:linear-gradient(180deg,#74b2d8 0%,#abd9e8 28%,#d9edc2 60%,#3b5b37 100%)} /* día pleno */
56% {background:linear-gradient(180deg,#8e7ea8 0%,#d49c7c 34%,#e9ba7a 62%,#304731 100%)} /* atardecer */
72% {background:linear-gradient(180deg,#454671 0%,#62628c 32%,#727296 60%,#27392b 100%)} /* anochecer azulado */
86% {background:linear-gradient(180deg,#2a3760 0%,#3a4773 34%,#42526a 62%,#1d2d22 100%)} /* noche calma (azul) */
100%{background:linear-gradient(180deg,#6f6086 0%,#c8917c 34%,#e2b27d 62%,#2c4029 100%)} /* vuelve */
}
/* estrellas: aparecen de noche */
.escena-estrellas{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
background-image:radial-gradient(1.6px 1.6px at 12% 16%,#fff,transparent),
radial-gradient(1.1px 1.1px at 28% 28%,#fff,transparent),
radial-gradient(1.6px 1.6px at 46% 12%,#fff,transparent),
radial-gradient(1.1px 1.1px at 63% 24%,#fff,transparent),
radial-gradient(1.6px 1.6px at 78% 10%,#fff,transparent),
radial-gradient(1.1px 1.1px at 88% 26%,#fff,transparent),
radial-gradient(1.1px 1.1px at 55% 7%,#fff,transparent),
radial-gradient(1.4px 1.4px at 36% 20%,#fff,transparent);
animation:estrellasCiclo var(--ciclo) linear infinite}
@keyframes estrellasCiclo{0%,52%{opacity:0}70%,92%{opacity:.9}100%{opacity:0}}
/* astro: sol y luna cruzando el cielo en arco */
.escena-astro{position:absolute;top:0;left:0;z-index:0;width:clamp(58px,7vw,104px);aspect-ratio:1;
border-radius:50%;pointer-events:none;will-change:transform,opacity;
animation:astroArco var(--ciclo) linear infinite}
@keyframes astroArco{
0% {transform:translate(8vw,40vh) scale(.9); background:radial-gradient(circle,#ffd9a0,#e8945a);box-shadow:0 0 60px 18px rgba(232,148,90,.5);opacity:.85}
18% {transform:translate(30vw,11vh) scale(1); background:radial-gradient(circle,#fff3c4,#ffd86b);box-shadow:0 0 80px 26px rgba(255,216,107,.6);opacity:1}
34% {transform:translate(50vw,6vh) scale(1); background:radial-gradient(circle,#fffdf2,#ffe999);box-shadow:0 0 92px 30px rgba(255,233,153,.55);opacity:1}
50% {transform:translate(72vw,12vh) scale(1.05);background:radial-gradient(circle,#ffd2a0,#e87a45);box-shadow:0 0 90px 28px rgba(232,122,69,.6);opacity:1}
61% {transform:translate(88vw,38vh) scale(.92);background:radial-gradient(circle,#e89a6a,#b5543a);box-shadow:0 0 56px 16px rgba(181,84,58,.45);opacity:.45}
64% {opacity:0}
70% {transform:translate(16vw,18vh) scale(.72);background:radial-gradient(circle at 38% 38%,#f4f6ff,#c8d2e8);box-shadow:0 0 40px 10px rgba(200,210,232,.4);opacity:0}
75% {opacity:.92}
90% {transform:translate(62vw,8vh) scale(.74);background:radial-gradient(circle at 38% 38%,#f4f6ff,#c8d2e8);box-shadow:0 0 44px 12px rgba(200,210,232,.45);opacity:.92}
97% {transform:translate(80vw,22vh) scale(.72);opacity:0}
100%{transform:translate(8vw,40vh) scale(.9); opacity:0}
}
/* ============ PASILLO de plaza (perspectiva) ============ */
.escena-pasillo{position:absolute;left:0;right:0;bottom:0;height:80%;z-index:0;pointer-events:none;
perspective:560px;perspective-origin:50% 40%}
/* Estantería surtida del puesto (2 baldas con verduras VARIADAS → menos repetitivo).
Se define una sola vez y la reusan las paredes del pasillo y el muro de cada sección. */
:root{--estante:url("data:image/svg+xml,")}
/* Rieles de letreros tipo supermercado colgando de cada balda (sin precios ni
números: solo etiquetas kraft en blanco, para dar aire de "tienda"). */
:root{--letreros:url("data:image/svg+xml,")}
/* paredes genuinas del puesto, a izquierda y derecha (la del centro se eliminó) */
.escena-pasillo .pared{position:absolute;top:0;bottom:0;width:46%;opacity:.95;
background:
radial-gradient(70% 50% at 50% 8%,rgba(216,162,74,.16),transparent 60%),
linear-gradient(180deg,rgba(20,40,26,.22),rgba(8,18,12,.62)),
repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 1px,transparent 1px 46px),
var(--letreros) repeat-y,
var(--estante) repeat-y,
linear-gradient(180deg,#1d3b25,#0a1610);
background-size:auto,auto,auto,100% auto,100% auto,auto;
background-position:center,center,center,center top,center top,center}
.escena-pasillo .izq{left:0;transform:rotateY(40deg);transform-origin:left center;
clip-path:polygon(0 0,100% 16%,100% 84%,0 100%)}
.escena-pasillo .der{right:0;transform:rotateY(-40deg);transform-origin:right center;
clip-path:polygon(0 16%,100% 0,100% 100%,0 84%)}
/* piso de baldosa que se aleja (perspectiva) */
.escena-piso{position:absolute;left:-25%;right:-25%;bottom:0;height:36%;z-index:0;pointer-events:none;
transform:perspective(360px) rotateX(64deg);transform-origin:bottom center;opacity:.6;
background:
repeating-linear-gradient(0deg,rgba(0,0,0,.5) 0 2px,transparent 2px 42px),
repeating-linear-gradient(90deg,rgba(0,0,0,.42) 0 2px,transparent 2px 64px),
linear-gradient(180deg,#3a2a1c,#241509);
-webkit-mask:linear-gradient(180deg,transparent,#000 42%);
mask:linear-gradient(180deg,transparent,#000 42%)}
/* luz ambiental que sigue el ciclo (cálida de día, tenue de noche) */
.escena-luz{position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;
background:radial-gradient(58% 50% at 50% 16%,rgba(216,162,74,.34),transparent 60%);
animation:luzCiclo var(--ciclo) linear infinite}
@keyframes luzCiclo{0%{opacity:.55}18%{opacity:.82}34%{opacity:1}50%{opacity:.82}64%{opacity:.5}82%{opacity:.34}100%{opacity:.55}}
/* velo azul nocturno SUAVE: apenas insinúa la noche, sin oscurecer la página */
.escena-noche{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
background:radial-gradient(120% 90% at 50% 0%,rgba(40,60,110,.0),rgba(26,40,86,.42));
animation:veloNoche var(--ciclo) linear infinite}
@keyframes veloNoche{0%,40%{opacity:0}64%{opacity:.2}82%{opacity:.34}100%{opacity:0}}
.escena-polvo{position:absolute;inset:0;z-index:1;opacity:.45;pointer-events:none;
background-image:radial-gradient(2px 2px at 20% 30%,rgba(246,239,220,.5),transparent),
radial-gradient(1.5px 1.5px at 70% 50%,rgba(246,239,220,.4),transparent),
radial-gradient(1.5px 1.5px at 40% 70%,rgba(246,239,220,.35),transparent),
radial-gradient(2px 2px at 85% 25%,rgba(246,239,220,.4),transparent);
animation:polvo 12s linear infinite}
@keyframes polvo{from{transform:translateY(0)}to{transform:translateY(-40px)}}
/* ============ DOS CAMIONES de reparto DE FRENTE (corredor central) ============ */
/* Van EN EL CENTRO del pasillo, mirando al frente, sin que las paredes en
perspectiva los corten. Siluetas en reposo con faros que respiran. */
.escena-camiones{position:absolute;left:50%;transform:translateX(-50%);
bottom:calc(clamp(168px,26vh,262px) + clamp(16px,4vh,42px));width:clamp(104px,16vw,146px);z-index:0;pointer-events:none;
opacity:0;transition:opacity 1.2s .6s}
#escena.lista .escena-camiones{opacity:1}
/* UN solo camión de reparto, centrado y estilizado, mirando al frente */
.camion{position:relative;width:100%;transform-origin:50% 100%;animation:camionRespira 9s ease-in-out infinite}
.camion svg{width:100%;height:auto;display:block;
filter:drop-shadow(0 16px 20px rgba(0,0,0,.55)) drop-shadow(0 0 3px rgba(216,162,74,.45))}
/* silueta cálida oscura para que se lea contra el verde del pasillo */
.camion .caja,.camion .cabina,.camion .chasis,.camion .rueda{fill:rgba(20,38,26,.96)}
.camion .parrilla{fill:rgba(11,24,16,.96)}
.camion .vidrio{fill:rgba(126,160,180,.34)}
.camion .franja{fill:rgba(216,162,74,.85)} /* banda de marca en ocre */
.camion .faro{fill:rgba(255,232,168,.95)} /* faros encendidos */
/* halo tenue de cada faro que respira */
.camion-faro{position:absolute;bottom:20%;width:22%;height:20%;border-radius:50%;
background:radial-gradient(circle,rgba(255,236,176,.65),transparent 70%);
mix-blend-mode:screen;opacity:.5;animation:faroLatido 6.5s ease-in-out infinite}
.camion-faro.f-l{left:16%}
.camion-faro.f-r{right:16%}
@keyframes camionRespira{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes faroLatido{0%,100%{opacity:.32}50%{opacity:.62}}
/* capas con parallax (data-depth controlado por JS) */
.capa{position:absolute;left:50%;transform:translateX(-50%);will-change:transform}
/* siluetas de clientes */
.siluetas{bottom:0;width:min(1400px,135vw);display:flex;justify-content:space-between;align-items:flex-end;
padding:0 2vw;pointer-events:none;z-index:2}
.silueta{fill:rgba(8,18,12,.6);opacity:.9;transform-origin:50% 100%}
.silueta.s1{width:88px;animation:caminar1 6s ease-in-out infinite}
.silueta.s2{width:120px;animation:caminar2 7.2s ease-in-out infinite}
.silueta.s3{width:78px;animation:caminar1 5.4s ease-in-out infinite reverse}
.silueta.s4{width:110px;animation:caminar2 6.6s ease-in-out infinite reverse}
.silueta.s5{width:70px;animation:caminar1 5.8s ease-in-out infinite}
/* paso/gait: deriva lateral + balanceo + leve rebote = "andando" */
@keyframes caminar1{0%,100%{transform:translateX(-16px) rotate(-1.5deg)}
25%{transform:translateX(-4px) rotate(.5deg) translateY(-3px)}
50%{transform:translateX(16px) rotate(1.5deg)}
75%{transform:translateX(4px) rotate(-.5deg) translateY(-3px)}}
@keyframes caminar2{0%,100%{transform:translateX(18px) rotate(1.5deg)}
25%{transform:translateX(5px) rotate(-.5deg) translateY(-4px)}
50%{transform:translateX(-18px) rotate(-1.5deg)}
75%{transform:translateX(-5px) rotate(.5deg) translateY(-4px)}}
/* toldo / awning rayado del puesto */
.toldo{position:absolute;top:calc(var(--nav-h) - 8px);left:50%;transform:translateX(-50%) translateY(-16px);
width:min(1720px,170vw);height:clamp(54px,6.8vh,82px);z-index:6;pointer-events:none;
opacity:0;transition:opacity .8s .2s,transform .9s var(--ease) .2s;
background:
linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 42%),
repeating-linear-gradient(90deg,#2f5a24 0 clamp(30px,3.2vw,44px),#f4ecd6 clamp(30px,3.2vw,44px) clamp(60px,6.4vw,88px));
box-shadow:0 18px 38px -16px rgba(0,0,0,.6),inset 0 -12px 18px -12px rgba(0,0,0,.45)}
#escena.lista .toldo{opacity:1;transform:translateX(-50%) translateY(0)}
/* riel de montaje (la barra de la que cuelga el toldo) */
.toldo::before{content:"";position:absolute;left:-.6%;right:-.6%;top:-10px;height:13px;border-radius:7px;
background:linear-gradient(#6a4322,#3d240e);box-shadow:0 7px 15px -5px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.15)}
/* faldón ondulado (valance) que cuelga */
.toldo::after{content:"";position:absolute;left:0;right:0;bottom:-19px;height:23px;background:inherit;
-webkit-mask:radial-gradient(11px at 50% 0,transparent 96%,#000) repeat-x 0 0/clamp(30px,3.2vw,44px) 23px;
mask:radial-gradient(11px at 50% 0,transparent 96%,#000) repeat-x 0 0/clamp(30px,3.2vw,44px) 23px;
filter:drop-shadow(0 9px 7px rgba(0,0,0,.4))}
/* fundadores (retratos REALES enmarcados — los tenderos del puesto) */
.fundadores{bottom:0;width:min(1340px,94vw);height:100%;z-index:3;pointer-events:none}
/* medallón completo POR ENCIMA del canto del mostrador (nunca cortado) */
.fundador{position:absolute;bottom:calc(clamp(190px,30vh,300px) + 14px);display:flex;flex-direction:column;align-items:center;gap:13px}
/* sombra de contacto que asienta el medallón sobre la madera */
.fundador::after{content:"";position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);
width:72%;height:18px;border-radius:50%;background:rgba(0,0,0,.4);filter:blur(7px);z-index:-1}
.retrato{position:relative;width:clamp(118px,13.5vw,182px);aspect-ratio:1;overflow:hidden;
border-radius:50%;background:#16231a;border:3px solid rgba(216,162,74,.92);
box-shadow:0 32px 48px -18px rgba(0,0,0,.7),0 0 0 7px rgba(94,58,31,.42),
0 0 36px -4px rgba(216,162,74,.4),inset 0 0 0 2px rgba(255,255,255,.16);
transition:transform .6s var(--ease),box-shadow .6s}
.fundador:hover .retrato{transform:translateY(-6px) scale(1.03);
box-shadow:0 38px 54px -18px rgba(0,0,0,.72),0 0 0 7px rgba(216,162,74,.5),0 0 46px -2px rgba(216,162,74,.55)}
.retrato img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(1.05) contrast(1.03)}
/* Recortes reales cuadrados ya centrados al rostro → sin desplazamiento */
.fundador.jose .retrato img,
.fundador.laura .retrato img{object-position:50% 50%}
/* luz cálida de rim + oscuro perimetral que funde el medallón con la escena */
.retrato::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
background:radial-gradient(70% 60% at 32% 22%,rgba(255,238,200,.26),transparent 55%)}
.retrato::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
background:
radial-gradient(58% 58% at 50% 42%,transparent 60%,rgba(6,15,10,.5) 88%,rgba(6,15,10,.82) 100%),
radial-gradient(120% 100% at 50% 0%,rgba(255,238,200,.10),transparent 40%);
box-shadow:inset 0 0 22px 6px rgba(6,15,10,.55)}
/* plaquita de latón grabado clavada en la madera del mostrador */
.fundador-placa{position:relative;font-family:var(--serif);font-style:italic;white-space:nowrap;
font-size:clamp(.92rem,1.35vw,1.18rem);letter-spacing:.02em;line-height:1;
padding:.46em 1.15em;border-radius:7px;
color:#3a240e;
background:linear-gradient(180deg,#f0d589 0%,#e0bd63 38%,#c79c42 72%,#b3853a 100%);
box-shadow:0 9px 18px -9px rgba(0,0,0,.7),0 2px 3px -1px rgba(0,0,0,.45),
inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 3px rgba(120,80,20,.35),
0 0 0 1px rgba(120,80,28,.55);
text-shadow:0 1px 0 rgba(255,248,225,.55);
opacity:0;transform:translateY(8px);transition:.5s .7s}
/* dos tornillitos del latón */
.fundador-placa::before,.fundador-placa::after{content:"";position:absolute;top:50%;width:4px;height:4px;
border-radius:50%;transform:translateY(-50%);
background:radial-gradient(circle at 38% 32%,#6b4a18,#3a2607);
box-shadow:inset 0 .5px 0 rgba(255,255,255,.4)}
.fundador-placa::before{left:.5em}
.fundador-placa::after{right:.5em}
#escena.lista .fundador-placa{opacity:1;transform:none}
.fundador.jose{left:clamp(0px,3.5vw,86px)}
.fundador.laura{right:clamp(0px,3.5vw,86px)}
/* entrada: José y Laura "salen" desde detrás del mostrador y se asientan */
.fundador{translate:0 64px;opacity:0;
transition:translate 1s var(--ease),opacity 1s var(--ease)}
.fundador.jose{transition-delay:.35s}
.fundador.laura{transition-delay:.55s}
#escena.lista .fundador{translate:0 0;opacity:1}
/* mostrador de madera (realista) */
.mostrador{bottom:0;width:min(1640px,155vw);height:clamp(190px,30vh,300px);z-index:4;pointer-events:none}
.mostrador-tabla{position:absolute;inset:0;border-radius:16px 16px 0 0;overflow:hidden;
background:
repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px,rgba(255,255,255,.04) 3px 4px,transparent 4px clamp(120px,12vw,180px)),
repeating-linear-gradient(87deg,transparent 0 7px,rgba(60,34,14,.28) 7px 8px,transparent 8px 22px),
linear-gradient(180deg,#a86f3c 0%,#80532a 14%,#5e3a1f 52%,#3d240e 100%);
box-shadow:0 -18px 50px -16px rgba(0,0,0,.6)}
/* canto biselado con luz cálida */
.mostrador-tabla::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(16px,2.2vh,24px);
background:linear-gradient(180deg,#d8aa55 0%,#a8743a 55%,rgba(168,116,58,0) 100%);
box-shadow:0 2px 0 rgba(255,255,255,.22),0 7px 14px -5px rgba(0,0,0,.45)}
/* sombra de contacto bajo los huacales */
.mostrador-tabla::after{content:"";position:absolute;left:0;right:0;top:clamp(16px,2.2vh,24px);height:34px;
background:linear-gradient(180deg,rgba(0,0,0,.3),transparent)}
/* pila de producto sobre el mostrador (sin caja, apilado a la vista) */
.pila{position:absolute;bottom:42%;left:50%;transform:translateX(-50%);display:flex;align-items:flex-end;
z-index:5;pointer-events:none;padding:0 12px}
.pila .item{position:relative;pointer-events:auto;cursor:pointer;
transition:transform .45s var(--ease),translate .75s cubic-bezier(.34,1.56,.64,1),opacity .55s var(--ease);
margin-left:clamp(-26px,-1.8vw,-12px);
translate:0 76px;opacity:0}
#escena.lista .pila .item{translate:0 0;opacity:1}
/* aparecen uno por uno, como si los fueran sacando al mostrador */
.pila .item:nth-child(1){transition-delay:0s,.66s,.66s}
.pila .item:nth-child(2){transition-delay:0s,.72s,.72s}
.pila .item:nth-child(3){transition-delay:0s,.78s,.78s}
.pila .item:nth-child(4){transition-delay:0s,.84s,.84s}
.pila .item:nth-child(5){transition-delay:0s,.90s,.90s}
.pila .item:nth-child(6){transition-delay:0s,.96s,.96s}
.pila .item:nth-child(7){transition-delay:0s,1.02s,1.02s}
.pila .item:nth-child(8){transition-delay:0s,1.08s,1.08s}
.pila .item:nth-child(9){transition-delay:0s,1.14s,1.14s}
.pila .item:nth-child(10){transition-delay:0s,1.20s,1.20s}
.pila .item:nth-child(11){transition-delay:0s,1.26s,1.26s}
.pila .item:first-child{margin-left:0}
/* sombra de contacto que asienta cada producto en la madera */
.pila .item::after{content:"";position:absolute;left:8%;right:8%;bottom:-8px;height:12px;border-radius:50%;
background:rgba(0,0,0,.5);filter:blur(6px);z-index:-1}
.pila .item:hover{transform:translateY(-15px) rotate(-2deg);z-index:9}
/* foto real de BD → mini-bandeja redondeada (el blanco del fondo se vuelve marco) */
.pila .item img.producto-foto{display:block;width:clamp(62px,7.2vw,104px);aspect-ratio:1;object-fit:cover;
border-radius:22px;background:#fff;
box-shadow:0 18px 28px -10px rgba(0,0,0,.62),0 0 0 4px rgba(251,247,234,.94),inset 0 0 0 1px rgba(0,0,0,.05)}
/* emoji → producto suelto, sin fondo */
.pila .item span{display:block;font-size:clamp(46px,6.2vw,80px);line-height:1;
filter:drop-shadow(0 13px 12px rgba(0,0,0,.5))}
/* montículo: el producto del medio asoma más alto y va bajando hacia los bordes */
.pila .item:nth-child(2),.pila .item:nth-child(10){margin-bottom:clamp(4px,.9vh,11px);z-index:2}
.pila .item:nth-child(3),.pila .item:nth-child(9){margin-bottom:clamp(9px,1.8vh,20px);z-index:3}
.pila .item:nth-child(4),.pila .item:nth-child(8){margin-bottom:clamp(13px,2.6vh,30px);z-index:4}
.pila .item:nth-child(5),.pila .item:nth-child(7){margin-bottom:clamp(18px,3.4vh,40px);z-index:5}
.pila .item:nth-child(6){margin-bottom:clamp(22px,4.2vh,48px);transform:scale(1.09);z-index:6}
.pila .item:nth-child(6):hover{transform:scale(1.09) translateY(-15px) rotate(-2deg)}
/* leve inclinación alterna = apilado a mano, no en fila perfecta */
.pila .item:nth-child(odd) span{transform:rotate(-4deg)}
.pila .item:nth-child(even) span{transform:rotate(3deg)}
/* respiración leve del montículo: los productos flotan apenas (vivo, no estático).
Usa la propiedad translate (independiente del transform del hover) y arranca
tras la entrada para no perder el "pop" inicial. */
#escena.lista .pila .item{animation:pilaIdle 5.5s ease-in-out 2.2s infinite}
#escena.lista .pila .item:nth-child(even){animation-duration:6.4s;animation-delay:2.6s}
#escena.lista .pila .item:nth-child(3n){animation-duration:5.9s;animation-delay:3s}
@keyframes pilaIdle{0%,100%{translate:0 0}50%{translate:0 -5px}}
/* contenido sobre la escena */
.escena-frente{position:relative;z-index:7;align-self:start;width:100%;text-align:center;
padding-top:calc(var(--nav-h) + clamp(44px,9vh,116px))}
.escena-frente::before{content:"";position:absolute;inset:-6% -14% -46%;z-index:-1;pointer-events:none;
background:radial-gradient(64% 62% at 50% 40%,rgba(8,22,13,.68),rgba(8,22,13,.34) 56%,transparent 78%)}
.escena-frente .eyebrow{color:var(--ocre);display:block;margin:0 auto}
/* saludo personalizado: pastilla propia, centrada, en su propia línea */
.hero-saludo{display:flex;width:max-content;max-width:92%;align-items:center;gap:.5em;margin:0 auto 12px;
font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.25;
color:var(--crema);background:rgba(216,162,74,.16);border:1px solid rgba(216,162,74,.42);
padding:.55em 1.15em;border-radius:999px;backdrop-filter:blur(4px);text-align:center;
box-shadow:0 10px 26px -12px rgba(0,0,0,.6);
opacity:0;transform:translateY(-8px);transition:opacity .7s var(--ease) .3s,transform .7s var(--ease) .3s}
.hero-saludo::before{content:"👋";font-size:.95rem;flex:none}
.hero-saludo.ver{opacity:1;transform:none}
.escena-frente h1{color:var(--crema);font-size:clamp(2.05rem,4.9vw,3.95rem);line-height:1.0;margin:.18em auto .26em;max-width:16ch;
text-shadow:0 20px 50px rgba(0,0,0,.55)}
.escena-frente h1 em{font-style:italic;color:var(--ocre)}
.escena-sub{color:rgba(246,239,220,.9);max-width:42ch;margin:0 auto;font-size:1.02rem;
text-shadow:0 4px 18px rgba(0,0,0,.7)}
.scroll-pista{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:7;color:rgba(246,239,220,.7);
font-family:var(--mono);font-size:.66rem;letter-spacing:.25em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:6px}
.scroll-pista::after{content:"";width:1px;height:34px;background:linear-gradient(var(--ocre),transparent);animation:pista 1.8s infinite}
@keyframes pista{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:bottom}}
/* =========================================================
CUADRO DE DIÁLOGO DEL TENDERO (segmentación)
========================================================= */
#tendero{position:fixed;inset:0;z-index:950;display:grid;place-items:center;
background:rgba(10,26,16,.66);backdrop-filter:blur(8px);
opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}
#tendero.abierto{opacity:1;visibility:visible}
.tendero-card{width:min(680px,92vw);background:linear-gradient(180deg,var(--papel),var(--crema));
border-radius:var(--r-lg);padding:clamp(26px,4vw,46px);box-shadow:var(--sombra);
border:1px solid rgba(176,125,44,.35);transform:translateY(24px) scale(.96);transition:transform .6s var(--ease);
position:relative;overflow:hidden}
#tendero.abierto .tendero-card{transform:none}
.tendero-card::before{content:"";position:absolute;top:-40%;right:-10%;width:60%;height:120%;
background:radial-gradient(circle,rgba(216,162,74,.18),transparent 70%)}
.tendero-saludo{display:flex;align-items:center;gap:14px;margin-bottom:18px;position:relative}
.tendero-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--ocre);flex:none;
box-shadow:0 8px 20px -8px rgba(10,26,16,.5)}
.tendero-quien{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ocre-hondo)}
.tendero-quien b{display:block;font-family:var(--serif);font-size:1.05rem;letter-spacing:0;text-transform:none;color:var(--tinta)}
.tendero-msg{font-family:var(--serif);font-size:clamp(1.25rem,2.6vw,1.7rem);color:var(--tinta);line-height:1.25;
min-height:2.4em;position:relative}
.tendero-msg .cursor{display:inline-block;width:2px;height:1em;background:var(--ocre);vertical-align:-2px;animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.tendero-perfiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px;position:relative;
opacity:0;transform:translateY(10px);transition:.5s var(--ease)}
.tendero-perfiles.ver{opacity:1;transform:none}
.perfil-chip{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px;border-radius:var(--r);
background:var(--papel);border:1.5px solid rgba(18,48,34,.12);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
text-align:center}
.perfil-chip:hover{transform:translateY(-5px);border-color:var(--ocre);box-shadow:var(--sombra-suave)}
.perfil-chip .ic{font-size:1.9rem;line-height:1}
.perfil-chip b{font-family:var(--sans);font-weight:700;font-size:.92rem;color:var(--tinta)}
.perfil-chip small{font-size:.72rem;color:var(--tinta-suave);line-height:1.2}
.tendero-skip{display:block;margin:18px auto 0;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
color:var(--tinta-suave);text-decoration:underline;text-underline-offset:3px;position:relative}
/* =========================================================
SECCIONES GENERALES
========================================================= */
.seccion{position:relative;padding:clamp(72px,11vh,140px) 0}
.seccion--crema{background:var(--crema)}
.seccion--papel{background:var(--papel)}
.seccion--noche{position:relative;overflow:hidden;color:var(--crema);
background:
radial-gradient(150% 110% at 50% -12%,rgba(216,162,74,.18),transparent 44%),
radial-gradient(120% 90% at 50% 0%,#1d4129,#0c1a11 68%),
linear-gradient(180deg,#163420,#0a1610)}
.seccion--noche h2,.seccion--noche h3{color:var(--crema)}
/* aurora viva: dos manchas de luz que respiran y se desplazan */
.seccion--noche::before{content:"";position:absolute;inset:-30% -10%;z-index:0;pointer-events:none;
background:
radial-gradient(38% 46% at 22% 30%,rgba(216,162,74,.20),transparent 62%),
radial-gradient(34% 42% at 80% 18%,rgba(74,150,92,.26),transparent 60%),
radial-gradient(40% 50% at 65% 82%,rgba(31,87,52,.34),transparent 64%);
filter:blur(8px);animation:aurora 22s ease-in-out infinite alternate}
/* textura de partículas/grano que deriva muy lento */
.seccion--noche::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
background-image:
radial-gradient(1.5px 1.5px at 12% 22%,rgba(246,239,220,.5),transparent),
radial-gradient(1.5px 1.5px at 78% 36%,rgba(246,239,220,.4),transparent),
radial-gradient(1.5px 1.5px at 34% 68%,rgba(216,162,74,.5),transparent),
radial-gradient(1.5px 1.5px at 62% 84%,rgba(246,239,220,.35),transparent),
radial-gradient(1.5px 1.5px at 88% 72%,rgba(216,162,74,.4),transparent),
radial-gradient(1.5px 1.5px at 48% 14%,rgba(246,239,220,.4),transparent);
background-size:520px 520px;animation:granos 60s linear infinite}
.seccion--noche>.wrap{position:relative;z-index:1}
@keyframes aurora{
0%{transform:translate3d(-3%,-2%,0) scale(1);opacity:.85}
50%{transform:translate3d(3%,2%,0) scale(1.12);opacity:1}
100%{transform:translate3d(-2%,3%,0) scale(1.05);opacity:.9}}
@keyframes granos{to{background-position:520px 520px}}
@media(prefers-reduced-motion:reduce){
.seccion--noche::before,.seccion--noche::after{animation:none}}
.cabeza{max-width:60ch;margin-bottom:clamp(34px,5vh,60px)}
.cabeza.centro{margin-inline:auto;text-align:center}
.cabeza .eyebrow{color:var(--ocre-hondo);margin-bottom:.8em;display:block}
.seccion--noche .cabeza .eyebrow{color:var(--ocre)}
.cabeza h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.cabeza p{margin-top:1em;color:var(--tinta-suave);font-size:1.08rem}
.seccion--noche .cabeza p{color:rgba(246,239,220,.8)}
/* ===== PARED DE PLAZA: muro con estantes de verduras + cartel del puesto =====
Fondo estático y liviano (sin animación → sin repintado, sin "página lenta").
Reemplaza el verde plano por un muro de tablones con estantes surtidos a color
y un cartel colgante con el logo del puesto. */
.seccion>.wrap{position:relative;z-index:1}
.viva{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
--op-cuadro:.4;
--cuadroA:url("data:image/svg+xml,");
--cuadroB:url("data:image/svg+xml,");
--cuadroC:url("data:image/svg+xml,");
background:
repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0 1px, transparent 1px 64px),
repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 1px, transparent 1px 170px)}
.seccion--noche .viva{--op-cuadro:.5;
background:
repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 64px),
repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 170px)}
/* cuadros colgados SOLO en las esquinas/márgenes (lejos del texto, sin ruido visual):
esquina superior derecha y las dos inferiores; el centro y el bloque de título quedan limpios. */
.viva::before{content:"";position:absolute;inset:0;opacity:var(--op-cuadro);
background:
var(--cuadroC) no-repeat right 2% top 11%,
var(--cuadroA) no-repeat left 2% bottom 6%,
var(--cuadroB) no-repeat right 3% bottom 7%;
background-size:
clamp(80px,8.5vw,120px) auto,
clamp(80px,8.5vw,120px) auto,
clamp(70px,7.2vw,100px) auto}
/* historia y contacto se rediseñan con su propia ambientación → sin cuadros que estorben */
#historia .viva,#contacto .viva{display:none}
/* (gente caminando eliminada por petición del usuario) */
.viva::after{content:none}
/* =========================================================
IDENTIDAD POR SECCIÓN — cada parada del recorrido es su propio "lugar".
Sobre las variantes noche/crema/papel, cada id recibe fondo y atmósfera
propios para que el scroll NO se sienta "todo de corrido".
========================================================= */
/* ── HISTORIA · sala cálida del puesto al atardecer (madera + foco de relato) ── */
#historia{background:
radial-gradient(70% 52% at 50% 0%,rgba(247,201,120,.40),transparent 58%), /* foco cálido superior */
radial-gradient(120% 90% at 50% 114%,rgba(28,20,12,.95),transparent 66%), /* base de madera honda */
linear-gradient(180deg,#3a2a18 0%,#2a2415 30%,#1a2516 64%,#0f1c12 100%)} /* madera → bosque */
#historia::before{background:
radial-gradient(52% 44% at 50% 4%,rgba(247,201,120,.30),transparent 64%),
radial-gradient(46% 54% at 14% 74%,rgba(124,79,40,.34),transparent 66%),
radial-gradient(46% 54% at 86% 80%,rgba(31,87,52,.30),transparent 66%);
animation-duration:36s}
/* fondo "campo de cultivo" 100% CSS — sin imagen pesada, carga instantánea y sin jank.
Capas de gradiente compuestas una sola vez (sin animación de filtro/scale): brillo
cálido de horizonte arriba, dos lomas verdes a los lados y surcos sembrados. */
#historia .historia-fondo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#historia .historia-fondo::before{content:"";position:absolute;inset:0;
background:
radial-gradient(120% 64% at 50% -12%,rgba(216,162,74,.20),transparent 56%),
radial-gradient(72% 92% at 5% 110%,rgba(46,110,66,.46),transparent 62%),
radial-gradient(72% 92% at 95% 110%,rgba(46,110,66,.40),transparent 62%),
repeating-linear-gradient(180deg,rgba(255,255,255,.022) 0 1px,transparent 1px 34px),
linear-gradient(180deg,#15331e 0%,#0e2515 48%,#0a1c10 100%)}
#historia .historia-fondo::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(10,22,14,.45),rgba(10,22,14,.12) 40%,rgba(10,22,14,.62))}
/* intro centrada, grande y con peso (cabecera del relato) */
#historia .cabeza{max-width:min(680px,92%)}
#historia .historia-cuerpo{max-width:64ch;margin:0 auto;text-align:center;
color:rgba(247,240,222,.92);font-size:clamp(1.16rem,1.7vw,1.42rem);line-height:1.72;font-weight:500}
#historia .historia-cuerpo b{color:var(--ocre);font-weight:700}
/* ── MOSTRADOR · vitrina de DÍA, con toldo de plaza en el borde superior ── */
#mostrador{background:
radial-gradient(120% 70% at 50% 0,rgba(122,184,90,.16),transparent 52%),
linear-gradient(180deg,#fbf6e9,var(--crema))}
#mostrador::before{content:"";position:absolute;top:0;left:0;right:0;height:16px;z-index:2;pointer-events:none;
background:repeating-linear-gradient(90deg,#2f7d44 0 40px,#f6efdc 40px 80px);
box-shadow:0 4px 10px -4px rgba(0,0,0,.22)}
#mostrador::after{content:"";position:absolute;top:16px;left:0;right:0;height:13px;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.14),transparent)}
/* ── INFALTABLES · noche-mercado, verde más hondo + brasa baja ── */
#infaltables{background:
radial-gradient(120% 90% at 50% -10%,rgba(122,184,90,.18),transparent 48%),
radial-gradient(100% 80% at 50% 112%,rgba(216,162,74,.16),transparent 56%),
linear-gradient(180deg,#10301d,#0a1610)}
/* ── PORQUE · papel kraft con cinta de acento (pizarra de "cómo trabajamos") ── */
#porque{background:linear-gradient(180deg,#f3ead2,#efe6cf);border-top:3px solid var(--ocre)}
#porque::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
background:
radial-gradient(60% 42% at 0% 0%,rgba(31,87,52,.10),transparent 60%),
radial-gradient(60% 42% at 100% 100%,rgba(216,162,74,.12),transparent 60%)}
/* ── TESTIMONIOS · luz salvia clara, distinta del crema del mostrador ── */
#testimonios{background:
radial-gradient(120% 80% at 50% 0,rgba(31,87,52,.09),transparent 55%),
linear-gradient(180deg,#eef0e2,#e8ecdb)}
/* ── CONTACTO · cierre dorado: el lugar más cálido del recorrido ── */
#contacto{background:
radial-gradient(120% 100% at 50% -10%,rgba(216,162,74,.32),transparent 50%),
radial-gradient(90% 80% at 50% 112%,rgba(31,87,52,.55),transparent 62%),
linear-gradient(180deg,#1a3d26,#0c1c12)}
#contacto::before{background:
radial-gradient(46% 44% at 50% 6%,rgba(216,162,74,.36),transparent 62%),
radial-gradient(42% 48% at 18% 80%,rgba(216,162,74,.18),transparent 64%),
radial-gradient(42% 48% at 82% 84%,rgba(74,150,92,.22),transparent 64%)}
/* reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.1s}
.reveal[data-d="2"]{transition-delay:.2s}
.reveal[data-d="3"]{transition-delay:.3s}
.reveal[data-d="4"]{transition-delay:.4s}
/* entrada de cada sección estilo Apple: se desliza desde un costado, alternando
lado a lado, con un leve escalado. La 1ª (#escena) no es .seccion → intacta. */
body{overflow-x:clip}
.seccion{will-change:transform,opacity;opacity:0;
transform:translateX(-6vw) scale(.985);
transition:opacity 1s cubic-bezier(.16,.84,.34,1),transform 1.1s cubic-bezier(.16,.84,.34,1)}
.seccion:nth-of-type(even){transform:translateX(6vw) scale(.985)}
.seccion.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.seccion{opacity:1;transform:none;transition:none}}
/* =========================================================
HISTORIA — timeline emotiva
========================================================= */
/* corazón verde dibujado a mano alzada, encabezando el relato */
.historia-corazon{display:block;width:clamp(64px,9vw,104px);margin:0 auto .5em}
.historia-corazon svg{display:block;width:100%;height:auto;overflow:visible;
filter:drop-shadow(0 6px 16px rgba(31,87,52,.55))}
/* relleno suave que da cuerpo al corazón, aparece en suave fundido */
.corazon-relleno{fill:rgba(122,184,90,.18);opacity:0;transition:opacity 1s ease .5s}
.reveal.in .corazon-relleno{opacity:1}
.corazon-trazo{fill:none;stroke:#86c862;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:480;stroke-dashoffset:480;transition:stroke-dashoffset 1.5s ease .25s}
.corazon-trazo--2{stroke:rgba(134,200,98,.45);stroke-width:2.4;
transform:translate(2.2px,1.8px) rotate(-1.8deg);transform-origin:70px 72px;transition-delay:.35s}
.reveal.in .corazon-trazo{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.corazon-trazo{stroke-dashoffset:0;transition:none}.corazon-relleno{opacity:1;transition:none}}
#historia .historia-intro{position:relative;font-family:var(--serif);font-style:italic;font-weight:700;
font-size:clamp(1.55rem,2.4vw,2.15rem);line-height:1.24;width:min(640px,92%);max-width:100%;margin:0 auto;
color:#fdf6e2;text-shadow:0 2px 18px rgba(0,0,0,.5);text-align:center}
#historia .historia-intro b{font-style:normal;color:var(--ocre)}
.linea{position:relative;margin-top:clamp(40px,6vh,80px);padding-left:0}
.linea::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;
background:linear-gradient(var(--ocre),rgba(216,162,74,.15));
box-shadow:0 0 14px 1px rgba(216,162,74,.3)}
@media(min-width:760px){.linea::before{left:50%;transform:translateX(-50%)}}
.hito{position:relative;padding:0 0 clamp(30px,5vh,54px) 44px}
/* panel translúcido que asienta el texto sobre el fondo (la letra ya no se pierde) */
.hito::after{content:"";position:absolute;z-index:-1;inset:-14px -16px clamp(16px,2.6vh,30px) 30px;border-radius:16px;
background:linear-gradient(165deg,rgba(10,24,15,.5),rgba(10,24,15,.2));
border:1px solid rgba(216,162,74,.16);backdrop-filter:blur(2px);
opacity:0;transform:translateY(10px) scale(.98);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hito.in::after{opacity:1;transform:none}
@media(min-width:760px){
.hito{width:50%;padding:0 0 clamp(30px,6vh,60px)}
.hito:nth-child(odd){left:0;padding-right:48px;text-align:right}
.hito:nth-child(even){left:50%;padding-left:48px}
.hito:nth-child(odd)::after{inset:-14px 30px clamp(16px,2.6vh,30px) -16px}
.hito:nth-child(even)::after{inset:-14px -16px clamp(16px,2.6vh,30px) 30px}
}
.hito-dot{position:absolute;top:5px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ocre);
box-shadow:0 0 0 5px rgba(216,162,74,.22),0 0 16px 2px rgba(216,162,74,.55);z-index:2}
@media(min-width:760px){
.hito:nth-child(odd) .hito-dot{left:auto;right:-9px}
.hito:nth-child(even) .hito-dot{left:-9px}
}
.hito-anio{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--ocre);background:rgba(216,162,74,.12);border:1px solid rgba(216,162,74,.34);
padding:.32em .85em;border-radius:999px}
.hito h3{font-size:clamp(1.6rem,2.1vw,1.95rem);font-weight:700;margin:.5em 0 .35em;color:#fdf7e6;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.hito p{color:rgba(248,242,224,.94);font-size:clamp(1.08rem,1.5vw,1.24rem);line-height:1.62}
/* foto conjunta — bloque editorial */
.duo-foto{margin-top:clamp(48px,7vh,84px);position:relative;
border-radius:var(--r-lg);overflow:hidden;
background:linear-gradient(120deg,rgba(246,239,220,.07),rgba(246,239,220,.02));
border:1px solid rgba(216,162,74,.22);
box-shadow:0 40px 80px -40px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.03)}
/* RECONSTRUIDO simple e infalible:
- La foto es un ![]()
REAL (no background, no columna estirada).
- Su ALTURA NATURAL define la altura de la tarjeta (es el único elemento en
flujo). La cita se SUPERPONE absoluta sobre el lado derecho.
- Como la tarjeta mide exactamente lo que mide la foto, NO existe ningún
espacio debajo de la foto que pueda salir negro. No depende de estirar
nada (ni grid, ni flex, ni tabla) → funciona en cualquier navegador.
MÓVIL: foto arriba (ancho completo) y cita debajo, apiladas. */
.duo-foto-img{display:block;width:100%;height:auto;aspect-ratio:1000/702;object-fit:cover;background:#16231a}
.duo-firma{font-family:var(--serif);position:relative;display:flex;flex-direction:column;justify-content:center;
padding:clamp(34px,5vw,64px) clamp(28px,4vw,58px)}
@media(min-width:860px){
.duo-foto-img{width:40%} /* la foto ocupa el 40% izquierdo y fija la altura */
.duo-firma{position:absolute;top:0;right:0;bottom:0;width:60%} /* cita superpuesta a la derecha */
}
.duo-firma::before{content:"\201C";position:absolute;top:-.22em;left:.28em;font-size:clamp(6rem,12vw,11rem);
line-height:1;color:var(--ocre);opacity:.22;font-family:var(--serif);pointer-events:none}
.duo-firma .lema{position:relative;font-style:italic;font-size:clamp(1.45rem,2.7vw,2.1rem);
color:var(--crema);line-height:1.32;text-wrap:balance}
.duo-firma .quien{position:relative;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;
text-transform:uppercase;color:var(--ocre);margin-top:1.6em;padding-top:1.1em;
border-top:1px solid rgba(216,162,74,.28);display:inline-block}
/* =========================================================
MOSTRADOR / CATÁLOGO (dinámico desde BD)
========================================================= */
.cat-contador{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:24px}
/* franja de modalidades: comunica que vendemos en varias presentaciones */
.cat-modalidades{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:30px;
padding:16px clamp(16px,2.4vw,26px);border-radius:var(--r-lg);
background:linear-gradient(120deg,rgba(31,87,52,.07),rgba(216,162,74,.08));
border:1px solid rgba(31,87,52,.14)}
.cat-mod-titulo{font-family:var(--serif);font-size:clamp(1.02rem,1.8vw,1.22rem);font-weight:600;color:var(--hoja)}
.cat-mod-chips{display:flex;flex-wrap:wrap;gap:6px}
.cat-modalidades .prod-meta{font-size:.72rem;padding:.34em .8em;background:rgba(31,87,52,.14);border-color:rgba(31,87,52,.26)}
.cat-mod-pie{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--tinta-suave);margin-left:auto}
@media(max-width:620px){.cat-mod-pie{margin-left:0;width:100%}}
.cat-num{font-family:var(--serif)}
.cat-num b{display:block;font-size:clamp(2.4rem,5vw,3.6rem);color:var(--hoja);line-height:1}
.cat-num span{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}
.cat-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px;position:sticky;top:calc(var(--nav-h));z-index:50;
padding:10px 0;background:linear-gradient(var(--crema) 70%,transparent)}
.cat-tab{padding:.55em 1.2em;border-radius:999px;font-weight:600;font-size:.9rem;background:var(--papel);
border:1.5px solid rgba(18,48,34,.12);color:var(--tinta-suave);transition:.3s}
.cat-tab.activo,.cat-tab:hover{background:var(--hoja);color:var(--crema);border-color:var(--hoja)}
.cat-grupo{margin-bottom:clamp(40px,6vh,64px)}
.cat-grupo h3{font-size:1.6rem;margin-bottom:6px;display:flex;align-items:center;gap:.5rem}
.cat-grupo .linea-deco{height:1px;background:rgba(18,48,34,.12);margin:14px 0 26px}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.prod-card{position:relative;border-radius:var(--r);overflow:hidden;background:var(--papel);
border:1px solid rgba(18,48,34,.08);box-shadow:var(--sombra-suave);
transition:transform .4s var(--ease),box-shadow .4s;cursor:pointer}
.prod-card:hover{transform:translateY(-8px);box-shadow:var(--sombra)}
.prod-foto{aspect-ratio:4/3;display:grid;place-items:center;font-size:3.4rem;position:relative;overflow:hidden;
background:radial-gradient(circle at 50% 30%,#e9f0d8,#d6e3bf)}
.prod-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transition:transform .6s var(--ease),filter .5s}
.prod-foto::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s;
background:linear-gradient(180deg,transparent 46%,rgba(10,26,16,.34))}
.prod-card:hover .prod-foto::after{opacity:1}
.prod-card:hover .prod-foto img{transform:scale(1.07);filter:saturate(1.08)}
.prod-foto .emoji{filter:drop-shadow(0 6px 8px rgba(0,0,0,.18));transition:transform .4s var(--ease)}
.prod-card:hover .prod-foto .emoji{transform:scale(1.12) rotate(-4deg)}
.prod-cuerpo{padding:14px 16px 16px}
.prod-cuerpo h4{font-family:var(--serif);font-size:1.12rem;margin-bottom:3px}
.prod-meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;color:var(--hoja);text-transform:uppercase;
padding:.24em .64em;border-radius:999px;background:rgba(31,87,52,.12);border:1px solid rgba(31,87,52,.2)}
.prod-vars{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.prod-var{font-size:.7rem;padding:.2em .6em;border-radius:999px;background:rgba(31,87,52,.1);color:var(--hoja)}
.prod-add{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:var(--ocre);
color:var(--noche);font-size:1.3rem;display:grid;place-items:center;font-weight:700;opacity:0;transform:scale(.7);
transition:.3s var(--ease);box-shadow:0 6px 16px -6px rgba(216,162,74,.8);z-index:3}
.prod-card:hover .prod-add{opacity:1;transform:none}
.prod-add.puesto{background:var(--hoja);color:var(--crema)}
.cat-nota{font-family:var(--mono);font-size:.72rem;color:var(--tinta-suave);margin-top:6px}
/* =========================================================
INFALTABLES DEL PUESTO (más vendidos, sin números)
========================================================= */
/* Infaltables = HUACALES de madera alineados, como cajones del puesto.
El disco con el producto descansa sobre el cajón; etiqueta kraft al frente. */
.infaltables{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:20px;align-items:end}
.inf-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
padding-top:36px;transition:transform .5s var(--ease)}
.inf-card:nth-child(even){transform:translateY(6px)}
.inf-card:hover{transform:translateY(-9px)}
/* disco con el producto, posado sobre el borde del cajón */
.inf-disco{position:relative;z-index:2;width:clamp(92px,11vw,120px);aspect-ratio:1;border-radius:50%;
display:grid;place-items:center;margin-bottom:-30px;
background:radial-gradient(circle at 50% 30%,#fbf5e7,#e9dcbe);
border:3px solid #d8a24a;
box-shadow:0 18px 30px -14px rgba(0,0,0,.7),0 0 24px -7px rgba(216,162,74,.45),inset 0 0 0 1px rgba(255,255,255,.5);
transition:transform .55s var(--ease)}
.inf-card:hover .inf-disco{transform:translateY(-7px) rotate(-3deg)}
.inf-emoji{font-size:2.7rem;line-height:1;filter:drop-shadow(0 5px 7px rgba(0,0,0,.3))}
.inf-foto{position:absolute;inset:6px;width:auto;height:auto;object-fit:cover;border-radius:50%;
filter:saturate(1.05);transition:transform .55s var(--ease)}
/* el cajón de madera */
.inf-cajon{position:relative;width:100%;padding:44px 14px 18px;border-radius:9px 9px 6px 6px;
background:linear-gradient(180deg,#a86f3c 0%,#85572c 55%,#5e3a1c 100%);
box-shadow:0 24px 40px -24px rgba(0,0,0,.85),inset 0 2px 0 rgba(255,255,255,.14),inset 0 -4px 9px rgba(0,0,0,.4);
border:1px solid rgba(60,34,14,.55)}
/* listones verticales del cajón */
.inf-cajon::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.4;
background:repeating-linear-gradient(90deg,transparent 0 44px,rgba(60,34,14,.55) 44px 46px)}
/* etiqueta kraft clavada en el frente */
.inf-cajon h4{position:relative;display:inline-block;color:#3a240e;font-family:var(--serif);font-size:1.16rem;margin:0;
padding:.26em .7em;border-radius:5px;background:linear-gradient(180deg,#f5edd6,#e6d6ad);
box-shadow:0 3px 8px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.6)}
.inf-cajon h4::before,.inf-cajon h4::after{content:"";position:absolute;top:50%;width:5px;height:5px;border-radius:50%;
transform:translateY(-50%);background:radial-gradient(circle at 38% 32%,#6b4a18,#3a2607)}
.inf-cajon h4::before{left:5px}.inf-cajon h4::after{right:5px}
.inf-cajon small{display:block;margin-top:.6em;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
text-transform:uppercase;color:rgba(246,239,220,.85)}
/* INFALTABLES = "dentro del puesto": el puesto ES el fondo de la sección.
Toldo a rayas arriba + mostrador con huacales a lo ancho abajo; las
tarjetas de producto flotan al frente, como expuestas en el puesto. */
#infaltables{overflow:hidden}
#infaltables .viva{display:none} /* el puesto reemplaza el ambiente */
#infaltables>.wrap{position:relative;z-index:2;
padding-top:clamp(34px,5vh,60px);padding-bottom:clamp(170px,24vh,280px)}
.puesto-set{position:absolute;inset:0;z-index:1;pointer-events:none}
/* toldo a rayas con faldón ondulado, de borde a borde */
.set-toldo{position:absolute;top:0;left:0;right:0;height:48px;
background:repeating-linear-gradient(90deg,#2f7d44 0 60px,#f6efdc 60px 120px);
box-shadow:0 9px 18px -8px rgba(0,0,0,.5);
-webkit-mask:
linear-gradient(#000 0 0) top/100% 30px no-repeat,
radial-gradient(circle 16px at 18px 0,#000 96%,#0000 100%) bottom left/36px 18px repeat-x;
mask:
linear-gradient(#000 0 0) top/100% 30px no-repeat,
radial-gradient(circle 16px at 18px 0,#000 96%,#0000 100%) bottom left/36px 18px repeat-x}
.set-toldo::after{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:rgba(0,0,0,.18)}
/* mostrador con huacales, anclado al piso de la sección, a todo lo ancho */
.set-mostrador{position:absolute;left:0;right:0;bottom:0}
.set-mostrador svg{display:block;width:100%;height:auto;
filter:drop-shadow(0 -12px 26px rgba(0,0,0,.4))}
/* =========================================================
CÓMO PEDIMOS / POR QUÉ NOSOTROS (personalizado por perfil)
========================================================= */
.porque-grid{display:grid;gap:18px}
@media(min-width:820px){.porque-grid{grid-template-columns:repeat(3,1fr)}}
.porque-card{background:var(--papel);border-radius:var(--r-lg);padding:30px 26px;box-shadow:var(--sombra-suave);
border:1px solid rgba(18,48,34,.08);position:relative;overflow:hidden;
transition:transform .45s var(--ease),box-shadow .45s}
.porque-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
background:linear-gradient(var(--ocre),var(--hoja));transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.porque-card:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
.porque-card:hover::after{transform:scaleY(1)}
.porque-num{font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;color:var(--ocre-hondo);text-transform:uppercase}
.porque-card h3{font-size:1.3rem;margin:.4em 0 .2em;color:var(--hoja)}
.porque-sit{font-size:.96rem;color:var(--tinta-suave);font-style:italic;margin-bottom:1em;
padding-bottom:1em;border-bottom:1px dashed rgba(18,48,34,.18)}
.porque-card p{font-size:1rem;color:var(--tinta)}
.porque-card b{color:var(--hoja)}
.porque-cierre{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.9rem);
text-align:center;max-width:30ch;margin:clamp(36px,5vh,56px) auto 0;color:var(--tinta)}
.porque-cierre b{color:var(--hoja);font-style:normal}
/* presentaciones */
.presentaciones{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.pres-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.6em 1.1em;border-radius:999px;
background:var(--hoja);color:var(--crema);font-weight:600;font-size:.88rem}
/* =========================================================
TESTIMONIOS (configurable desde admin)
========================================================= */
.testi-grid{display:grid;gap:20px}
@media(min-width:820px){.testi-grid{grid-template-columns:1fr 1fr}}
.testi{background:var(--papel);border-radius:var(--r-lg);padding:32px 30px;box-shadow:var(--sombra-suave);
border:1px solid rgba(18,48,34,.08);position:relative;
transition:transform .45s var(--ease),box-shadow .45s,border-color .45s}
.testi:hover{transform:translateY(-6px);box-shadow:var(--sombra);border-color:rgba(216,162,74,.34)}
.testi::before{content:"\201C";position:absolute;top:6px;left:22px;font-family:var(--serif);font-size:5rem;color:var(--ocre);opacity:.35;line-height:1;
transition:opacity .45s,transform .45s var(--ease)}
.testi:hover::before{opacity:.55;transform:translateY(-3px)}
.testi p{font-family:var(--serif);font-size:1.18rem;line-height:1.4;color:var(--tinta);margin:.4em 0 1.2em;position:relative}
.testi-pie{display:flex;align-items:center;gap:12px}
.testi-logo{width:54px;height:54px;border-radius:50%;background:var(--crema);display:grid;place-items:center;
font-weight:800;color:var(--hoja);border:2px solid rgba(18,48,34,.1);flex:none;font-size:.8rem;text-align:center}
.testi-quien b{display:block;font-family:var(--sans)}
.testi-quien span{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--tinta-suave);text-transform:uppercase}
.testi-anios{position:absolute;top:18px;right:18px;display:inline-flex;align-items:center;gap:.4em;
font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--hoja);
background:rgba(74,150,92,.12);border:1px solid rgba(74,150,92,.28);padding:.42em .8em;border-radius:999px}
.testi-anios::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ocre)}
/* identidad propia: cada testimonio = nota de papel prendida en la pared,
con cinta washi arriba y una leve inclinación (se endereza al pasar el mouse) */
#testimonios .testi{background:
linear-gradient(180deg,#fdfaf0,#f6efdc),
repeating-linear-gradient(0deg,rgba(18,48,34,.035) 0 27px,transparent 27px 28px);
border:1px solid rgba(18,48,34,.1);border-radius:8px;
box-shadow:0 20px 36px -20px rgba(20,40,26,.45);transform:rotate(-1.4deg)}
#testimonios .testi:nth-child(even){transform:rotate(1.5deg)}
#testimonios .testi::after{content:"";position:absolute;top:-12px;left:50%;width:96px;height:26px;
transform:translateX(-50%) rotate(-3deg);background:rgba(216,162,74,.5);
border:1px solid rgba(216,162,74,.35);box-shadow:0 3px 7px rgba(0,0,0,.16);
-webkit-mask:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
mask:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
#testimonios .testi:nth-child(even)::after{transform:translateX(-50%) rotate(2.5deg)}
#testimonios .testi:hover{transform:rotate(0) translateY(-6px);box-shadow:0 30px 46px -22px rgba(20,40,26,.5)}
.confian{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:44px}
.confian-logo{width:74px;height:74px;border-radius:50%;background:rgba(18,48,34,.06);display:grid;place-items:center;
font-family:var(--mono);font-size:.6rem;color:var(--tinta-suave);border:1px dashed rgba(18,48,34,.2);text-align:center;padding:6px}
/* =========================================================
COTIZACIÓN (canasta flotante)
========================================================= */
#canasta-fab{position:fixed;right:20px;bottom:20px;z-index:600;display:flex;align-items:center;gap:.6rem;
background:var(--hoja);color:var(--crema);padding:.85em 1.3em;border-radius:999px;font-weight:700;
box-shadow:0 14px 34px -12px rgba(18,48,34,.7);transform:translateY(120px);transition:transform .45s var(--ease)}
#canasta-fab.ver{transform:none}
#canasta-fab .cnt{background:var(--ocre);color:var(--noche);border-radius:999px;min-width:24px;height:24px;
display:grid;place-items:center;font-size:.8rem;padding:0 .4em}
#wa-fab{position:fixed;left:20px;bottom:20px;z-index:600;width:56px;height:56px;border-radius:50%;background:#25d366;
display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(37,211,102,.7);transition:transform .3s}
#wa-fab:hover{transform:scale(1.08)}
#wa-fab svg{width:30px;height:30px;fill:#fff}
/* panel canasta (arranca bajo el nav para no cruzarse con él) */
#canasta{position:fixed;top:var(--nav-h);right:0;bottom:0;width:min(420px,92vw);z-index:700;background:var(--papel);
box-shadow:-20px 0 60px -20px rgba(10,26,16,.5);transform:translateX(110%);transition:transform .5s var(--ease);
display:flex;flex-direction:column}
#canasta.abierto{transform:none}
.canasta-cab{padding:24px;border-bottom:1px solid rgba(18,48,34,.1);display:flex;justify-content:space-between;align-items:center}
.canasta-cab h3{font-size:1.4rem}
.canasta-cab small{font-family:var(--mono);font-size:.7rem;color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.1em}
.canasta-x{font-size:1.6rem;color:var(--tinta-suave);line-height:1}
.canasta-items{flex:1;overflow-y:auto;padding:14px 24px}
.canasta-vacia{text-align:center;color:var(--tinta-suave);padding:40px 0;font-family:var(--serif);font-style:italic}
.ci{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dashed rgba(18,48,34,.14)}
.ci-emoji{font-size:1.8rem;width:46px;text-align:center;flex:none}
.ci-foto{width:46px;height:46px;flex:none;border-radius:10px;overflow:hidden;background:#fff;
border:1px solid rgba(18,48,34,.1);display:grid;place-items:center}
.ci-foto img{width:100%;height:100%;object-fit:cover;display:block}
.ci-info{flex:1}
.ci-info b{font-family:var(--serif);font-size:1.05rem}
.ci-info span{display:block;font-family:var(--mono);font-size:.68rem;color:var(--tinta-suave);text-transform:uppercase}
.ci-qty{display:flex;align-items:center;gap:8px}
.ci-qty button{width:26px;height:26px;border-radius:50%;background:rgba(18,48,34,.08);font-weight:700;color:var(--tinta)}
.ci-del{color:var(--terra);font-size:.74rem;font-family:var(--mono)}
.canasta-pie{padding:20px 24px;border-top:1px solid rgba(18,48,34,.1)}
.canasta-pie .nota{font-size:.82rem;color:var(--tinta-suave);margin-bottom:12px;text-align:center}
.canasta-pie .btn{width:100%;justify-content:center}
/* =========================================================
CONTACTO + FOOTER
========================================================= */
/* cabecera de contacto: legible sobre el resplandor dorado */
#contacto .cabeza .eyebrow{color:#ffe7b3;text-shadow:0 2px 10px rgba(0,0,0,.55)}
#contacto .cabeza h2{color:#fff8ea;text-shadow:0 3px 18px rgba(0,0,0,.6)}
#contacto .cabeza p{color:rgba(248,242,226,.94);text-shadow:0 2px 12px rgba(0,0,0,.5)}
/* ===== VALLA PUBLICITARIA (marco metálico + bombillas + patas) ===== */
.contacto-valla{position:relative;max-width:1124px;
margin:clamp(30px,5vh,58px) auto clamp(58px,9vh,96px);
padding-bottom:clamp(34px,5vh,60px)}
/* sombra en el piso bajo la valla */
.contacto-valla::after{content:"";position:absolute;left:50%;bottom:clamp(20px,3vh,38px);
transform:translateX(-50%);width:58%;height:18px;z-index:-2;filter:blur(4px);
background:radial-gradient(ellipse at center,rgba(0,0,0,.5),transparent 70%)}
/* marco/cabinete limpio de valla (acero oscuro con fino filete ocre) */
.cv-marco{position:relative;padding:clamp(12px,1.5vw,18px);
border-radius:clamp(20px,2vw,30px);
background:linear-gradient(165deg,#2b2f36 0%,#171a1f 52%,#24282f 100%);
box-shadow:0 38px 74px -30px rgba(0,0,0,.8),
inset 0 2px 2px rgba(255,255,255,.14),inset 0 -3px 6px rgba(0,0,0,.6),
inset 0 0 0 1px rgba(0,0,0,.5)}
/* fino filete ocre que enmarca el panel (marca) */
.cv-marco::before{content:"";position:absolute;inset:clamp(7px,.95vw,11px);border-radius:inherit;
pointer-events:none;z-index:3;border:1px solid rgba(216,162,74,.5)}
/* reflectores (proyectores) montados abajo, iluminando el cartel hacia arriba */
.cv-focos{position:absolute;left:0;right:0;bottom:clamp(-12px,-1.4vh,-8px);height:0;z-index:4;pointer-events:none}
.cv-foco{position:absolute;bottom:0;width:clamp(28px,3.2vw,42px);height:clamp(9px,1.2vh,14px);
border-radius:3px 3px 5px 5px;
background:linear-gradient(180deg,#3c414a,#0e1013);
box-shadow:0 7px 12px -5px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.22)}
/* brazo de montaje del reflector */
.cv-foco::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);
width:4px;height:9px;background:#23272d;border-radius:2px}
/* cono de luz cálido hacia arriba */
.cv-foco::after{content:"";position:absolute;bottom:calc(100% + 1px);left:50%;transform:translateX(-50%);
width:clamp(260px,32vw,440px);height:clamp(110px,15vh,188px);
background:linear-gradient(to top,rgba(255,244,214,.4),rgba(255,244,214,.05) 52%,transparent 76%);
clip-path:polygon(38% 100%,62% 100%,100% 0,0 0);
mix-blend-mode:screen;filter:blur(10px)}
.cv-foco--izq{left:27%}
.cv-foco--der{right:27%}
/* soporte tipo valla de carretera (poste de acero único + zapata)
lo subimos hasta el borde inferior del cabinete para que el poste quede pegado a la valla */
.cv-soporte{position:absolute;top:calc(100% - clamp(34px,5vh,60px));left:50%;transform:translateX(-50%);
width:clamp(170px,24vw,300px);height:clamp(92px,14vh,156px);z-index:-1}
/* cartela/gusset: triángulo que une el cabinete con el poste (se mete bajo el cabinete) */
.cv-cuello{position:absolute;top:-10px;left:50%;transform:translateX(-50%);
width:clamp(120px,15vw,210px);height:clamp(20px,2.8vh,34px);
clip-path:polygon(0 0,100% 0,62% 100%,38% 100%);
background:linear-gradient(180deg,#3b3f47,#1b1d22)}
/* poste cilíndrico de acero */
.cv-pilar{position:absolute;left:50%;top:clamp(17px,2.4vh,30px);transform:translateX(-50%);
width:clamp(40px,4.8vw,66px);height:calc(100% - clamp(31px,4.4vh,50px));
border-radius:4px 4px 2px 2px;
background:linear-gradient(90deg,#191b20 0%,#43474f 20%,#9aa0ab 50%,#43474f 80%,#191b20 100%);
box-shadow:0 20px 30px -16px rgba(0,0,0,.8),inset 0 2px 0 rgba(255,255,255,.18)}
/* anillos/bridas del poste (detalle metálico) */
.cv-pilar::before{content:"";position:absolute;left:-3px;right:-3px;top:14%;height:8px;border-radius:3px;
background:linear-gradient(90deg,#15171c,#5a5e68 50%,#15171c);box-shadow:0 22px 0 -1px #15171c,0 22px 0 0 rgba(0,0,0,.3)}
.cv-pilar::after{content:"";position:absolute;left:-3px;right:-3px;bottom:16%;height:8px;border-radius:3px;
background:linear-gradient(90deg,#15171c,#5a5e68 50%,#15171c)}
/* zapata / base de concreto en el piso */
.cv-base{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
width:clamp(104px,13vw,180px);height:clamp(15px,2.1vh,24px);border-radius:4px;
clip-path:polygon(11% 0,89% 0,100% 100%,0 100%);
background:linear-gradient(180deg,#6a6e76,#34373d);
box-shadow:0 18px 22px -10px rgba(0,0,0,.6)}
/* ===== PANEL DE CONTACTO INTEGRADO (foto + datos en un solo bloque) ===== */
.contacto-panel{position:relative;display:grid;overflow:hidden;
border-radius:clamp(14px,1.8vw,24px);
background:linear-gradient(155deg,rgba(18,40,26,.82),rgba(9,22,15,.92));
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 0 0 4px rgba(9,18,12,.6)}
.contacto-panel::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
background:radial-gradient(90% 70% at 0% 0%,rgba(216,162,74,.16),transparent 58%)}
@media(min-width:880px){.contacto-panel{grid-template-columns:.9fr 1.1fr}}
/* lado foto */
.cp-foto{position:relative;min-height:100%}
.cp-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cp-foto::after{content:"";position:absolute;inset:0;
background:linear-gradient(160deg,transparent 45%,rgba(9,22,15,.5)),
linear-gradient(90deg,transparent 72%,rgba(9,22,15,.7))}
@media(max-width:879px){.cp-foto{height:clamp(200px,40vw,300px)}}
/* lado datos */
.cp-datos{position:relative;z-index:2;display:flex;flex-direction:column;padding:clamp(12px,1.8vw,20px)}
.cp-row{display:flex;align-items:center;gap:clamp(14px,2vw,20px);
padding:clamp(16px,2.2vw,22px) clamp(14px,1.8vw,22px);border-radius:14px;transition:.4s var(--ease);color:inherit}
.cp-row + .cp-row{border-top:1px solid rgba(246,239,220,.1)}
a.cp-row:hover{background:rgba(246,239,220,.06)}
.cp-ic{flex:none;width:54px;height:54px;display:grid;place-items:center;font-size:1.45rem;border-radius:50%;
background:rgba(216,162,74,.14);border:1px solid rgba(216,162,74,.32);transition:transform .4s var(--ease)}
a.cp-row:hover .cp-ic{transform:scale(1.06) rotate(-4deg)}
.cp-txt{display:flex;flex-direction:column;min-width:0}
.cp-et{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ocre)}
.cp-val{font-family:var(--serif);font-size:1.2rem;color:var(--crema);margin-top:.18em;line-height:1.3;word-break:break-word}
/* fila WhatsApp = protagonista */
.cp-row--wa{background:linear-gradient(160deg,rgba(37,211,102,.14),rgba(31,87,52,.06));
border:1px solid rgba(37,211,102,.3);border-radius:16px;margin-bottom:6px}
.cp-row--wa + .cp-row{border-top:none}
.cp-row--wa .cp-ic{width:60px;height:60px;border:none;
background:linear-gradient(160deg,#37d36f,#128c4a);box-shadow:0 14px 26px -12px rgba(18,140,74,.75)}
.cp-row--wa .cp-ic svg{width:30px;height:30px;fill:#fff}
.cp-row--wa .cp-et{color:#8fe6ad}
.cp-row--wa .cp-val{font-size:clamp(1.5rem,2.6vw,1.9rem);letter-spacing:.01em}
.cp-cta{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);
font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#08160d;
background:linear-gradient(160deg,#39d873,#1aa94f);padding:.8em 1.35em;border-radius:999px;
box-shadow:0 14px 24px -12px rgba(18,140,74,.85);transition:.4s var(--ease)}
.cp-cta b{transition:transform .4s var(--ease)}
.cp-row--wa:hover .cp-cta{box-shadow:0 18px 30px -12px rgba(18,140,74,.95)}
.cp-row--wa:hover .cp-cta b{transform:translateX(4px)}
@media(max-width:520px){.cp-cta{display:none}.cp-row{flex-wrap:wrap}}
/* firma de cierre, sobre un sello tenue */
.contacto-firma{position:relative;margin-top:clamp(40px,6vh,64px);text-align:center;padding-top:36px}
.contacto-firma::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:64px;height:2px;
background:linear-gradient(90deg,transparent,var(--ocre),transparent)}
.contacto-firma .gracias{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2.4vw,1.7rem);
color:rgba(246,239,220,.92)}
.contacto-firma .gente{margin-top:1.2em;display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:center;align-items:baseline}
.contacto-firma .gente>span{display:inline-flex;flex-direction:column;align-items:center;gap:.18em}
.contacto-firma .gente b{font-family:var(--serif);color:var(--ocre);font-size:1.14rem}
.contacto-firma .gente span span{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
color:rgba(246,239,220,.6)}
.contacto-firma .gente .sep{align-self:center;color:rgba(246,239,220,.28)}
footer{background:var(--noche);color:rgba(246,239,220,.75);padding:60px 0 30px}
.foot-grid{display:grid;gap:32px;grid-template-columns:1fr;align-items:start}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-marca{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.foot-marca img{width:60px;height:60px;border-radius:50%;background:var(--crema);padding:4px}
.foot-marca b{font-family:var(--serif);font-size:1.4rem;color:var(--crema)}
.foot-col h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ocre);margin-bottom:1em}
.foot-col a{display:block;padding:.3em 0;transition:color .3s}
.foot-col a:hover{color:var(--crema)}
.foot-bottom{margin-top:46px;padding-top:22px;border-top:1px solid rgba(246,239,220,.12);
display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:.8rem;font-family:var(--mono);letter-spacing:.04em}
/* progreso scroll */
#progreso{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--ocre),var(--terra));z-index:999;transition:width .1s}
/* =========================================================
MENÚ MÓVIL
========================================================= */
#menu-movil{position:fixed;inset:0;z-index:880;background:var(--noche);display:flex;flex-direction:column;
justify-content:center;align-items:center;gap:18px;opacity:0;visibility:hidden;transition:.4s}
#menu-movil.abierto{opacity:1;visibility:visible}
#menu-movil a{font-family:var(--serif);font-size:2rem;color:var(--crema)}
#menu-movil .cerrar{position:absolute;top:24px;right:28px;font-size:2.4rem;color:var(--crema)}
@media(max-width:920px){
.nav{display:flex;justify-content:center;align-items:center}
.nav-links{display:none}
.nav-perfil{display:none}
.nav-logo{position:static}
.nav-burger{display:flex;position:absolute;right:clamp(14px,5vw,26px);top:50%;transform:translateY(-50%)}
.fundador{bottom:calc(clamp(150px,26vh,260px) + 10px)}
.fundador .retrato{width:clamp(110px,28vw,142px)}
.fundador.jose{left:clamp(4px,3vw,14px)}
.fundador.laura{right:clamp(4px,3vw,14px)}
.fundador-placa{font-size:.7rem;padding:.3em 1em}
.tendero-perfiles{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
.tendero-perfiles{grid-template-columns:1fr}
.fundador-placa{display:none}
.huacal{width:clamp(52px,15vw,82px)}
}
/* accesibilidad: reduce motion */
@media(prefers-reduced-motion:reduce){
*{animation:none!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
.reveal{opacity:1;transform:none}
}
/* ===== Galería "El puesto por dentro" (mosaico fluido, fotos reales) ===== */
#por-dentro .cabeza--dentro{max-width:820px}
#por-dentro .cabeza--dentro h2{color:var(--crema);line-height:1.02}
#por-dentro .cabeza--dentro p{color:rgba(246,239,220,.82)}
/* Grid en ORDEN DE LECTURA (izq→der, fila por fila): posición N del array = posición N visible */
.galeria-masonry{
margin-top:clamp(34px,5vw,60px);
display:grid;
grid-template-columns:repeat(4,1fr);
gap:clamp(12px,1.5vw,18px);
}
@media(max-width:1024px){.galeria-masonry{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.galeria-masonry{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.galeria-masonry{grid-template-columns:1fr}}
.gm-item{
position:relative;overflow:hidden;
border-radius:var(--r);
background:var(--bosque);
box-shadow:var(--sombra-suave);
aspect-ratio:4/3;
}
.gm-item img{
width:100%;height:100%;object-fit:cover;display:block;
filter:saturate(1.02) brightness(.97);
transition:transform .9s var(--ease), filter .6s var(--ease);
will-change:transform;
}
.gm-item::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(246,239,220,.08);
background:linear-gradient(200deg,rgba(216,162,74,0) 60%,rgba(31,87,52,.28));
opacity:0;transition:opacity .5s var(--ease);
}
.gm-item:hover img{transform:scale(1.07);filter:saturate(1.12) brightness(1.03)}
.gm-item:hover{box-shadow:var(--sombra)}
.gm-item:hover::after{opacity:1}
/* reveal escalonado más fluido dentro del mosaico */
.gm-item.reveal{opacity:0;transform:translateY(26px) scale(.985)}
.gm-item.reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease), transform .9s var(--ease)}
.gm-item[data-d="2"].reveal.in{transition-delay:.08s}
.gm-item[data-d="3"].reveal.in{transition-delay:.16s}
.gm-item[data-d="4"].reveal.in{transition-delay:.24s}
.galeria-pie{
margin-top:clamp(22px,3vw,34px);text-align:center;
font-family:var(--mono);font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;
color:rgba(246,239,220,.6);
}
/* ===== Marca de agua del logo sobre el anuncio de contacto (cp-foto) ===== */
.cp-foto .cp-watermark{
position:absolute;inset:auto;top:50%;left:50%;
width:min(52%,260px);height:auto!important;pointer-events:none;
opacity:.72;z-index:3;
transform:translate(-50%,-50%);
filter:brightness(1.15) drop-shadow(0 6px 16px rgba(0,0,0,.35)) drop-shadow(0 0 3px rgba(255,255,255,.45));
}