/* =========================================================
   Raicilla Hnos. Arrizón — Estilos
   Estética: artesanal-premium CLARA (fondo blanco/crema),
   hero oscuro con su imagen + footer oscuro como ancla
   ========================================================= */

:root{
  --bg:#fbf9f3;
  --bg-2:#f4eee1;
  --bg-3:#ece4d2;
  --card:#ffffff;
  --ink:#241e13;
  --ink-dim:#6e6552;
  --gold:#b9872c;
  --gold-2:#8f6a22;
  --copper:#a9722f;
  --line:rgba(143,106,34,.22);
  --line-soft:rgba(143,106,34,.12);
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Manrope', system-ui, sans-serif;
  --hand:'Caveat', cursive;
  --shadow:0 24px 60px rgba(60,40,10,.14);
  --shadow-lg:0 34px 90px rgba(60,40,10,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
  --radius:20px;
}

/* ---------- Hero y footer: tokens claros (texto claro sobre oscuro) ---------- */
.hero, .footer{
  --ink:#f2e9d4;
  --ink-dim:#d3c9af;
  --gold:#c9a24b;
  --gold-2:#e3c27a;
  --line:rgba(201,162,75,.3);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold);color:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--copper),var(--gold));border-radius:8px;border:2px solid var(--bg)}

/* ---------- Scroll progress ---------- */
.progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:1200;background:transparent}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--copper),var(--gold),var(--gold-2));transition:width .12s linear}

/* ---------- Utility ---------- */
.container{width:min(1200px,92%);margin-inline:auto}
.kicker{
  display:inline-block;font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:1rem;
}
.section-title{
  font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.6vw,3.4rem);
  line-height:1.12;letter-spacing:-.01em;margin-bottom:1rem;color:var(--ink);
}
.section{padding:clamp(4.5rem,9vw,7.5rem) 0;position:relative}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.12s}
html.no-js .reveal{opacity:1;transform:none}
html.no-js .preloader{display:none}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px;border-radius:4px}
.wa-share:focus-visible{outline-offset:3px}
.reveal[data-delay="2"]{transition-delay:.24s}
.reveal[data-delay="3"]{transition-delay:.36s}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.9rem;border-radius:999px;font-weight:700;font-size:.86rem;
  letter-spacing:.06em;text-transform:uppercase;border:1px solid transparent;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s,border-color .35s,color .35s;
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn--gold{
  background:linear-gradient(135deg,var(--gold),var(--copper));
  color:#fff;
}
.btn--gold:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(169,114,47,.32)}
.btn--ghost{
  border-color:rgba(143,106,34,.4);color:var(--gold-2);background:rgba(201,162,75,.08);
}
.btn--ghost:hover{background:rgba(201,162,75,.16);border-color:var(--gold);transform:translateY(-3px)}
.btn--outline{
  border-color:rgba(143,106,34,.35);color:var(--gold-2);background:transparent;
}
.btn--outline:hover{background:rgba(201,162,75,.1);border-color:var(--gold);transform:translateY(-3px)}
.btn--block{width:100%;margin-top:1rem}
.btn .btn__shine{position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-120%);transition:transform .8s}
.btn:hover .btn__shine{transform:translateX(120%)}

/* =========================================================
   AGE GATE
   ========================================================= */
.age-gate{
  position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
  background:rgba(10,13,9,.55);
  padding:1.5rem;overflow:hidden;
  transition:opacity .7s var(--ease),visibility .7s;
}
.js .age-gate{display:flex}
.js .age-gate.is-hidden{display:none}
.age-gate::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,11,7,.45),rgba(8,11,7,.68)),
    url("../images/fondo.jpeg") center/cover no-repeat;
  filter:blur(2px);
  transform:scale(1.02);
}
.age-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.age-gate__glow{
  position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,75,.25),transparent 65%);
  filter:blur(10px);animation:pulse 5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.15);opacity:1}}
.age-gate__card{
  position:relative;z-index:1;max-width:520px;width:100%;text-align:center;
  background:linear-gradient(180deg,#fff,#fbf6ec);
  border:1px solid var(--line);border-radius:26px;padding:clamp(2rem,5vw,3.2rem);
  box-shadow:var(--shadow-lg);
  animation:popIn .9s var(--ease) both .2s;
}
@keyframes popIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.age-gate__brand{margin-bottom:1.6rem}
.age-gate__logo{width:132px;margin:0 auto 1rem;display:block}
.age-gate__sub{display:block;font-size:.66rem;letter-spacing:.5em;color:var(--gold);margin-top:.6rem}
.age-gate .age-gate__title{font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.8rem;color:var(--ink)}
.age-gate p{color:var(--ink-dim);font-size:.95rem;margin-bottom:1.8rem}
.age-gate p strong{color:var(--gold-2)}
.age-gate__actions{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1.4rem}
.age-gate__note{font-size:.72rem;color:#9a8f76;margin-bottom:0}
.age-gate.is-denied{animation:shake .5s var(--ease)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-9px)}50%{transform:translateX(9px)}75%{transform:translateX(-5px)}}

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader{
  position:fixed;inset:0;z-index:3000;background:#fbf9f3;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s var(--ease),visibility .7s;
}
.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.preloader__inner{text-align:center}
.preloader__logo{width:110px;margin:0 auto 1.6rem;border-radius:14px;animation:popIn .8s var(--ease)}
.preloader__bar{width:190px;height:2px;background:rgba(143,106,34,.25);margin:0 auto;border-radius:4px;overflow:hidden}
.preloader__bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--copper),var(--gold));animation:load 1.4s var(--ease) forwards}
@keyframes load{from{width:0}to{width:100%}}
.preloader__text{margin-top:1.1rem;font-family:var(--hand);font-size:1.25rem;color:var(--gold-2);letter-spacing:.04em}

/* =========================================================
   NAVBAR
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1100;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem clamp(1rem,4vw,2.4rem);
  transition:background .4s,padding .4s,box-shadow .4s;
}
.nav__logo img{height:52px;transition:height .4s}
.nav.is-scrolled{background:rgba(251,249,243,.92);backdrop-filter:blur(16px);padding:.6rem clamp(1rem,4vw,2.4rem);box-shadow:0 10px 40px rgba(60,40,10,.12)}
.nav.is-scrolled .nav__logo img{height:44px}
.nav__links{display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1.7rem)}
.nav__links a{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#f2e9d4;position:relative;padding:.3rem 0}
.nav.is-scrolled .nav__links a{color:var(--ink)}
.nav__links a:not(.nav__cta)::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .35s var(--ease)}
.nav__links a:not(.nav__cta):hover::after{width:100%}
.nav__links a.is-active{color:var(--gold)}
.nav__links a.is-active::after{width:100%}
.nav.is-scrolled .nav__links a.is-active{color:var(--gold-2)}

/* ---------- Cabecera de páginas interiores ---------- */
.page-hero{
  position:relative;min-height:56vh;display:flex;align-items:flex-end;
  padding:150px 0 44px;overflow:hidden;
  background:url("../images/fondo.jpeg") center/cover no-repeat;
}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,16,11,.62),rgba(12,16,11,.38) 55%,var(--bg))}
.page-hero .container{position:relative;z-index:2}
.page-hero__kicker{display:inline-block;width:max-content;color:#e3c27a;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700;background:rgba(12,16,11,.38);border:1px solid rgba(201,162,75,.35);border-radius:999px;padding:.5rem 1.15rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.page-hero h1{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.6rem);color:#fff;font-weight:600;margin:.55rem 0 .4rem}
.page-hero p{width:max-content;max-width:640px;color:#f4ecda;font-size:1.02rem;background:rgba(12,16,11,.44);border:1px solid rgba(201,162,75,.3);border-radius:14px;padding:1rem 1.25rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(0,0,0,.32)}

/* ---------- Hero compacto de páginas legales (texto primero) ---------- */
.page-legal .page-hero{
  min-height:0;padding:150px 0 3.6rem;
  background:url("../images/fondo.jpeg") center/cover no-repeat;
}
.page-legal .page-hero::after{
  background:linear-gradient(180deg,rgba(12,16,11,.74),rgba(12,16,11,.48) 62%,rgba(12,16,11,.88));
}
.page-legal .page-hero__grid{
  display:grid;grid-template-columns:1fr minmax(0,200px);
  gap:clamp(1.6rem,4vw,3rem);align-items:center;
}
.page-legal .page-hero__text{max-width:680px}
.page-legal .page-hero h1{font-size:clamp(2.2rem,4.4vw,3.2rem)}
.page-legal .page-hero p{width:auto;max-width:540px;font-size:.95rem;padding:.95rem 1.15rem}
.page-legal .page-hero__fig{position:relative;margin:0;z-index:1}
.page-legal .page-hero__fig::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:20px;
  background:linear-gradient(135deg,rgba(201,162,75,.55),rgba(201,162,75,.1));
  transform:translate(12px,12px) rotate(2deg);
}
.page-legal .page-hero__fig img{
  width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  border-radius:20px;border:1px solid rgba(201,162,75,.5);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.page-legal .page-hero__fig figcaption{
  position:absolute;left:.9rem;bottom:.9rem;display:inline-flex;align-items:center;gap:.45rem;
  font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#f4d98a;
  background:rgba(12,16,11,.6);border:1px solid rgba(201,162,75,.35);border-radius:999px;
  padding:.4rem .8rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
@media(max-width:640px){
  .page-legal .page-hero__grid{grid-template-columns:1fr}
  .page-legal .page-hero__fig{display:none}
}

/* ---------- Página 404 (texto centrado, número grande) ---------- */
.page-404 .page-hero.notfound{min-height:78vh;align-items:center;text-align:center;padding:150px 0 70px}
.page-404 .page-hero.notfound .container{width:100%;max-width:720px;margin:0 auto}
.page-404 .notfound__code{
  display:block;font-family:var(--serif);font-weight:600;line-height:1;
  font-size:clamp(5rem,18vw,10rem);color:transparent;
  background:linear-gradient(180deg,#f4d98a,#c9a24b);
  -webkit-background-clip:text;background-clip:text;
  text-shadow:none;letter-spacing:.02em;
}
.page-404 .notfound__title{color:#fff;font-size:clamp(1.8rem,4.2vw,2.7rem)}
.page-404 .page-hero p{width:auto;max-width:560px;margin:0 auto 2.2rem;font-size:1rem;color:#f4ecda;background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0}
.page-404 .notfound__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}


.nav__cta{
  background:linear-gradient(135deg,var(--gold),var(--copper));color:#fff;
  padding:.7rem 1.3rem !important;border-radius:999px;font-weight:700;
  transition:transform .3s var(--ease),box-shadow .3s;
}
.nav__cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(169,114,47,.35)}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:.5rem}
.nav__burger span{width:26px;height:2px;background:#e3c27a;transition:transform .3s,opacity .3s}
.nav.is-scrolled .nav__burger span{background:var(--gold-2)}
.nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   HERO (se mantiene oscuro, respeta la imagen)
   ========================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:8rem 1.5rem 6rem}
.hero__bg{
  position:absolute;inset:-12% 0;background-size:cover;background-position:center;
  animation:kenburns 22s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12)}}
.hero__shade{
  position:absolute;inset:0;
  background:
    radial-gradient(900px 500px at 50% 30%,rgba(12,16,11,.25),transparent 60%),
    linear-gradient(180deg,rgba(8,11,7,.72) 0%,rgba(8,11,7,.45) 45%,rgba(8,11,7,.94) 100%);
}
.hero__content{position:relative;z-index:2;max-width:900px;min-width:0;width:100%}
.hero__eyebrow{
  display:inline-block;font-size:.72rem;letter-spacing:.5em;text-transform:uppercase;color:var(--gold-2);
  border:1px solid rgba(201,162,75,.35);padding:.55rem 1.2rem;border-radius:999px;margin-bottom:1.8rem;
  background:rgba(12,16,11,.4);backdrop-filter:blur(6px);
}
.hero__title{
  font-family:var(--serif);font-weight:600;font-size:clamp(2.6rem,8vw,5.6rem);line-height:1.05;
  text-shadow:0 6px 40px rgba(0,0,0,.6);color:var(--ink);
}
.hero__title em{
  font-style:italic;color:var(--gold-2);
  background:linear-gradient(90deg,var(--gold),var(--gold-2),var(--gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero__sub{max-width:640px;margin:1.6rem auto 2.4rem;color:var(--ink-dim);font-size:clamp(1rem,2vw,1.18rem)}
.hero__sub strong{color:var(--ink)}
.hero__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero__badges{
  position:absolute;z-index:2;left:50%;transform:translateX(-50%);
  bottom:5.5rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;
}
.hero__badge{
  background:rgba(12,16,11,.6);backdrop-filter:blur(10px);border:1px solid var(--line);
  border-radius:16px;padding:.8rem 1.3rem;text-align:center;min-width:120px;
}
.hero__badge strong{display:block;font-family:var(--serif);font-size:1.7rem;color:var(--gold-2);line-height:1.1}
.hero__badge span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.hero__scroll{position:absolute;z-index:2;bottom:1.4rem;left:50%;transform:translateX(-50%);text-align:center;color:var(--ink-dim)}
.hero__scroll span{display:block;font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;margin-bottom:.5rem}
.hero__scroll-line{width:1px;height:26px;margin:0 auto;background:linear-gradient(var(--gold),transparent);animation:drip 2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Pantallas medianas altas: se compacta el hero para que quepan botones,
   insignias y el indicador "Desliza para descubrir" sin encimarse */
@media (min-height:821px) and (max-height:1000px){
  .hero__eyebrow{font-size:.66rem;padding:.45rem .95rem;margin-bottom:1.2rem}
  .hero__title{font-size:clamp(2.4rem,6vw,3.6rem)}
  .hero__sub{margin:1.2rem auto 1.6rem;font-size:clamp(.95rem,1.8vw,1.05rem)}
  .hero__badges{bottom:5rem}
  .hero__badge{min-width:110px;padding:.65rem 1.05rem}
  .hero__badge strong{font-size:1.5rem}
  .hero__scroll{bottom:1.2rem}
}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{overflow:hidden;background:linear-gradient(90deg,var(--copper),var(--gold),var(--copper));padding:1rem 0;position:relative;z-index:3}
.marquee__track{display:flex;gap:2.6rem;white-space:nowrap;animation:scrollX 26s linear infinite;align-items:center}
.marquee__track span{font-family:var(--serif);font-size:1.15rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.marquee__track i{font-style:normal;color:#fff;font-size:1rem}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================
   PRESENTACIÓN
   ========================================================= */
.present__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.present__media{position:relative}
.present__frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.present__frame img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform 1.2s var(--ease)}
.present__media:hover .present__frame img{transform:scale(1.06)}
.present__stamp{
  position:absolute;bottom:-1.8rem;right:-1.2rem;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f4e2bd,#d9bd82);
  border:2px solid var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;box-shadow:0 20px 50px rgba(60,40,10,.3);animation:spinSlow 30s linear infinite;
}
@keyframes spinSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.present__stamp span{font-size:.58rem;letter-spacing:.3em;color:#7c5a1b}
.present__stamp strong{font-family:var(--serif);font-size:2.1rem;color:#7c5a1b;line-height:1}
.present__stamp small{font-size:.5rem;letter-spacing:.22em;color:#8a6b2a}
.present__text p{color:var(--ink-dim);margin-bottom:1.2rem;font-size:1.02rem}
.present__text p strong{color:var(--ink)}
.present__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.4rem}
.stat{text-align:center;padding:1.2rem .6rem;border:1px solid var(--line-soft);border-radius:16px;background:var(--card);box-shadow:0 8px 24px rgba(60,40,10,.06)}
.stat strong{display:block;font-family:var(--serif);font-size:2rem;color:var(--gold-2);line-height:1}
.stat span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}

/* ---------- Medallas (premium) ---------- */
.medals{margin-top:clamp(4rem,8vw,6rem)}
.medals__head{text-align:center;max-width:640px;margin:0 auto 3rem}
.medals__head h3{font-family:var(--serif);font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:600;color:var(--ink)}
.medals__head p{color:var(--ink-dim);margin-top:.6rem;font-size:.95rem}
.medals__row{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:980px;margin:0 auto}
.medal{
  position:relative;text-align:center;padding:1.7rem 1.8rem 2.3rem;
  border:1px solid var(--line-soft);border-radius:22px;overflow:hidden;
  background:
    radial-gradient(420px 180px at 50% -10%,rgba(185,135,44,.16),transparent 70%),
    linear-gradient(180deg,#fffdf8,#f6efdf);
  box-shadow:0 18px 40px rgba(60,40,10,.12);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .4s;
}
.medal::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,transparent 42%,rgba(255,255,255,.65) 50%,transparent 58%)}
.medal:hover{transform:translateY(-6px);border-color:rgba(185,135,44,.55);box-shadow:0 26px 54px rgba(60,40,10,.18)}
.medal__media{
  position:relative;width:100%;aspect-ratio:3/2;border-radius:18px;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,rgba(201,162,75,.16),transparent 62%),
             linear-gradient(180deg,#fffdf8,#f4ecdb);
  border:1px solid var(--line-soft);
  box-shadow:0 18px 40px rgba(60,40,10,.14);
}
.medal__media img{
  width:100%;height:100%;object-fit:contain;display:block;
  padding:1.2rem;transition:transform .8s var(--ease);
  filter:drop-shadow(0 12px 22px rgba(60,40,10,.28));
}
.medal:hover .medal__media img{transform:scale(1.05)}
.medal h4{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--gold-2);margin:1rem 0 .5rem}
.medal p{font-size:.9rem;color:var(--ink-dim);max-width:320px;margin:0 auto}

/* =========================================================
   CRONOLOGÍA (capítulos editoriales)
   ========================================================= */
.historia{
  background:
    radial-gradient(900px 600px at 85% 15%,rgba(201,162,75,.1),transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
}
.historia__head{max-width:720px;margin:0 auto clamp(2.4rem,5vw,3.4rem);text-align:center}
.historia__head p{color:var(--ink-dim)}
.tl-nav{
  position:sticky;top:74px;z-index:60;max-width:1180px;margin:0 auto 3.4rem;
  display:flex;gap:.5rem;overflow-x:auto;padding:.55rem;
  background:rgba(251,249,243,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line-soft);border-radius:999px;box-shadow:0 12px 32px rgba(60,40,10,.12);
  scrollbar-width:none;
}
.tl-nav::-webkit-scrollbar{display:none}
.tl-nav__item{
  display:flex;align-items:center;gap:.5rem;white-space:nowrap;flex:0 0 auto;
  border:0;background:none;padding:.6rem 1.1rem;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-dim);transition:background .35s var(--ease),color .35s,box-shadow .35s;
}
.tl-nav__item:hover{color:var(--gold-2)}
.tl-nav__item.is-active{
  background:linear-gradient(135deg,#e6c87a,#b9872c);color:#241e13;
  box-shadow:0 10px 22px rgba(169,114,47,.4);
}
.tl-nav__num{font-family:var(--serif);font-size:1.05rem;font-weight:700;line-height:1}
.tl-nav__name{font-size:.66rem}

.tl-flow{display:grid;gap:clamp(3.4rem,6vw,5rem);position:relative}
.tl-card{
  position:relative;display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(1.8rem,4vw,3.6rem);align-items:center;
}
.tl-card:nth-child(even){grid-template-columns:1fr 1.05fr}
.tl-card:nth-child(even) .tl-card__media{order:2}
.tl-card::before{
  content:attr(data-year);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--serif);font-size:min(20vw,15rem);font-weight:700;line-height:1;
  color:rgba(185,135,44,.08);z-index:0;pointer-events:none;user-select:none;
}
.tl-card__media{position:relative;z-index:1;width:100%;max-width:640px}
.tl-card__media-img{
  position:relative;overflow:hidden;border-radius:18px;aspect-ratio:16/10;
  background:radial-gradient(130% 95% at 50% 28%,#f6efdf 0%,#e9dfc8 100%);
  border:1px solid var(--line-soft);box-shadow:0 22px 50px rgba(60,40,10,.16);
}
.tl-card__media-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.tl-card:hover .tl-card__media-img img{transform:scale(1.06)}
.tl-card--fit .tl-card__media-img img{
  object-fit:contain;object-position:center;padding:1.2rem;
  filter:drop-shadow(0 18px 16px rgba(60,40,10,.18));
}
.tl-card--fit:hover .tl-card__media-img img{transform:scale(1.03)}
.tl-card__year{
  position:absolute;left:.9rem;bottom:.9rem;z-index:2;
  background:rgba(12,16,11,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:var(--gold-2);font-family:var(--serif);font-weight:700;font-size:1.05rem;
  padding:.3rem .8rem;border-radius:999px;border:1px solid var(--line);
}
.tl-card__body{position:relative;z-index:1}
.tl-card__badge{
  display:inline-block;font-size:.6rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-2);background:rgba(201,162,75,.12);border:1px solid var(--line-soft);
  border-radius:999px;padding:.38rem .85rem;margin-bottom:1rem;
}
.tl-card__body h3{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:600;color:var(--ink);margin-bottom:.8rem;line-height:1.08}
.tl-card__body p{color:var(--ink-dim);font-size:1.02rem;line-height:1.72;max-width:520px}

/* =========================================================
   PRODUCTOS
   ========================================================= */
.products{background:var(--bg)}
.products__head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-bottom:3rem;flex-wrap:wrap}
.products__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.pcard{
  display:flex;flex-direction:column;border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,#fff,#f9f4e8);
  transition:transform .5s var(--ease),box-shadow .5s,border-color .4s;
  transform-style:preserve-3d;will-change:transform;
}
.pcard:hover{transform:translateY(-6px);border-color:rgba(185,135,44,.45);box-shadow:var(--shadow-lg)}
.pcard__media{position:relative;overflow:hidden;aspect-ratio:4/3;background:radial-gradient(130% 95% at 50% 28%,#fffdf6 0%,#f3ecd9 58%,#e9dfc8 100%)}
.pcard__media > picture img{width:100%;height:100%;object-fit:contain;padding:1.4rem 1rem;transition:transform 1.1s var(--ease);filter:drop-shadow(0 20px 18px rgba(60,40,10,.18))}
.pcard:hover .pcard__media > picture img{transform:scale(1.08)}
.pcard__tag{
  position:absolute;top:1rem;left:1rem;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  color:var(--gold-2);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.45rem .9rem;border-radius:999px;border:1px solid var(--line-soft);box-shadow:0 6px 18px rgba(60,40,10,.15);
}
.pcard__medal{
  position:absolute;top:1rem;right:1rem;z-index:3;width:46px;height:46px;border-radius:50%;overflow:hidden;
  border:2px solid var(--gold);
  background:radial-gradient(circle at 50% 30%,#fff8e1,#e6c87a 55%,#b8903a);
  box-shadow:0 8px 18px rgba(60,40,10,.32),inset 0 1px 4px rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;
}
.pcard__medal span{font-family:var(--serif);font-weight:700;font-size:1.02rem;color:#7d5e14;opacity:.55}
.pcard__medal img{width:100%;height:100%;object-fit:cover;display:block}
.pcard__body{padding:1.35rem;display:flex;flex-direction:column;flex:1}
.pcard__body h3{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--ink)}
.pcard__body h3 span{font-size:.92rem;font-family:var(--sans);color:var(--gold-2);font-weight:700;letter-spacing:.06em}
.pcard__desc{color:var(--ink-dim);font-size:.9rem;margin:.6rem 0 .95rem}
.pcard__notes{border-top:1px dashed var(--line);padding-top:.9rem;display:grid;gap:.5rem}
.pcard__notes div{display:grid;grid-template-columns:64px 1fr;gap:.8rem;align-items:baseline}
.pcard__notes strong{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.pcard__notes span{font-size:.84rem;color:var(--ink-dim)}
.pcard__meta{display:flex;gap:1.2rem;margin-top:.9rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#a09478}

/* ---- Ponches de frutas ---- */
.punches{margin-top:4.5rem}
.punches__head{max-width:560px;margin-bottom:2rem}
.punches__head h3{font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--ink)}
.punches__head p{color:var(--ink-dim);font-size:.92rem;margin-top:.5rem}
.punches__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.punch{
  display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center;
  border:1px solid var(--line-soft);border-radius:var(--radius);
  background:var(--card);padding:1rem 1rem 1.15rem;
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s;
}
.punch:hover{transform:translateY(-4px);border-color:rgba(185,135,44,.45);box-shadow:var(--shadow-lg)}
.punch__img{width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#efe9da}
.punch__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.punch:hover .punch__img img{transform:scale(1.06)}
.punch h4{font-family:var(--serif);font-size:1.06rem;font-weight:600;color:var(--ink)}
.punch small{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2)}

/* =========================================================
   MAESTROS
   ========================================================= */
.maestros{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.maestros__head{text-align:center;margin-bottom:3.4rem}
.maestros__grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:980px;margin:0 auto}
.mcard{
  border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;
  background:var(--card);transition:transform .5s var(--ease),border-color .4s,box-shadow .4s;
}
.mcard:hover{transform:translateY(-8px);border-color:rgba(185,135,44,.45);box-shadow:var(--shadow-lg)}
.mcard__img{overflow:hidden;aspect-ratio:4/3}
.mcard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.mcard:hover .mcard__img img{transform:scale(1.07)}
.mcard figcaption{padding:1.6rem;text-align:center}
.mcard h3{font-family:var(--serif);font-size:1.45rem;font-weight:600;color:var(--ink)}
.mcard p{margin:.3rem 0 .6rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.mcard small{color:var(--ink-dim);font-size:.88rem}

/* =========================================================
   VALORES
   ========================================================= */
.valores::before{
  content:"";position:absolute;inset:0;opacity:.08;pointer-events:none;
  background:url("../images/agave-1.jpg") center/cover no-repeat;
  mask-image:linear-gradient(180deg,transparent,rgba(0,0,0,.7) 30%,rgba(0,0,0,.7) 70%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,rgba(0,0,0,.7) 30%,rgba(0,0,0,.7) 70%,transparent);
}
.valores__head{text-align:center;margin-bottom:3.4rem;position:relative}
.valores__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;position:relative}
.vcard{
  position:relative;border:1px solid var(--line-soft);border-radius:var(--radius);padding:2.2rem 1.8rem;
  background:var(--card);overflow:hidden;box-shadow:0 10px 30px rgba(60,40,10,.07);
  transition:transform .45s var(--ease),border-color .4s,box-shadow .4s;
}
.vcard:hover{transform:translateY(-6px);border-color:rgba(185,135,44,.45);box-shadow:var(--shadow)}
.vcard__n{
  position:absolute;top:1rem;right:1.4rem;font-family:var(--serif);font-size:3.4rem;font-weight:700;
  color:rgba(185,135,44,.16);line-height:1;
}
.vcard h3{font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--gold-2);margin-bottom:.6rem}
.vcard p{font-size:.9rem;color:var(--ink-dim)}

/* =========================================================
   PROCESO
   ========================================================= */
.proceso{background:linear-gradient(180deg,var(--bg),#f6f1e6);overflow:hidden}
.proceso__bg{
  position:absolute;inset:0;opacity:.6;pointer-events:none;
  background:radial-gradient(700px 500px at 85% 10%,rgba(169,114,47,.08),transparent 60%),
             radial-gradient(700px 500px at 10% 85%,rgba(185,135,44,.08),transparent 60%);
}
.proceso__head{text-align:center;max-width:760px;margin:0 auto 3.4rem;position:relative}
.proceso__lead{color:var(--ink-dim)}
.proceso__lead strong{color:var(--gold-2)}
.proceso__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;position:relative}
.pstep{
  position:relative;border:1px solid var(--line-soft);border-radius:18px;padding:2rem 1.4rem 1.6rem;
  background:var(--card);box-shadow:0 10px 30px rgba(60,40,10,.07);
  transition:transform .45s var(--ease),border-color .4s,box-shadow .4s;overflow:hidden;
}
.pstep:hover{transform:translateY(-8px);border-color:rgba(185,135,44,.45);box-shadow:var(--shadow)}
.pstep__num{
  font-family:var(--serif);font-size:1.05rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--gold),var(--copper));
  width:44px;height:44px;display:grid;place-items:center;border-radius:12px;margin-bottom:1.1rem;
  box-shadow:0 8px 20px rgba(169,114,47,.3);
}
.pstep h3{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--gold-2);margin-bottom:.5rem;line-height:1.25}
.pstep p{font-size:.84rem;color:var(--ink-dim)}
.proceso__sustain{
  margin-top:3.4rem;text-align:center;border:1px dashed rgba(185,135,44,.45);border-radius:var(--radius);
  padding:2.6rem 2rem;background:var(--card);box-shadow:0 14px 40px rgba(60,40,10,.08);position:relative;
}
.proceso__sustain h3{font-family:var(--serif);font-size:1.7rem;font-weight:600;color:var(--gold-2);margin-bottom:.8rem}
.proceso__sustain p{color:var(--ink-dim);max-width:760px;margin:0 auto 1.6rem}
.proceso__chips{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.proceso__chips span{
  border:1px solid var(--line-soft);border-radius:999px;padding:.5rem 1.1rem;font-size:.78rem;color:var(--ink);
  background:#fdfbf5;
}

/* =========================================================
   FAQ
   ========================================================= */
.faq{background:var(--bg)}
.faq__head{text-align:center;margin-bottom:3rem}
.faq__list{max-width:820px;margin:0 auto;display:grid;gap:.9rem}
.faq__item{border:1px solid var(--line-soft);border-radius:14px;background:var(--card);overflow:hidden;box-shadow:0 6px 18px rgba(60,40,10,.05)}
.faq__item summary{
  list-style:none;cursor:pointer;padding:1.1rem 1.4rem;font-weight:600;font-family:var(--serif);
  font-size:1.15rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:1rem;
  transition:color .3s;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-family:var(--sans);font-size:1.3rem;font-weight:400;color:var(--gold);transition:transform .3s;flex:0 0 auto}
.faq__item[open] summary{color:var(--gold-2)}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item p{padding:0 1.4rem 1.3rem;color:var(--ink-dim);font-size:.95rem}
.faq__item p strong{color:var(--gold-2)}
.faq__item p a{color:var(--gold);text-decoration:underline}

/* =========================================================
   VISITA / TABERNA
   ========================================================= */
.visita{background:var(--bg)}
.visita__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.visita__list{margin:1.6rem 0 2rem;display:grid;gap:.7rem}
.visita__list li{position:relative;padding-left:2rem;color:var(--ink-dim);font-size:.95rem}
.visita__list li::before{
  content:"✦";position:absolute;left:0;color:var(--gold);
}
.visita__cta{display:flex;gap:1rem;flex-wrap:wrap}
.visita__map{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.visita__map iframe{width:100%;height:480px;display:block;filter:grayscale(.25) contrast(1.02)}

/* =========================================================
   CONTACTO
   ========================================================= */
.contacto{
  background:
    linear-gradient(rgba(251,249,243,.94),rgba(244,238,225,.96)),
    url("../images/texture-mountains.jpg") center/cover fixed no-repeat;
}
.contacto__head{text-align:center;max-width:640px;margin:0 auto 3.4rem}
.contacto__head p{color:var(--ink-dim)}
.contacto__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.contacto__form{
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:2rem;
  background:var(--card);box-shadow:0 14px 40px rgba(60,40,10,.08);
}
.contacto__form label{display:block;margin-bottom:1.1rem;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.contacto__form input,.contacto__form select,.contacto__form textarea{
  display:block;width:100%;margin-top:.4rem;background:#f7f2e7;border:1px solid rgba(143,106,34,.28);
  color:var(--ink);border-radius:12px;padding:.85rem 1rem;font-family:inherit;font-size:.95rem;
  transition:border-color .3s,box-shadow .3s;
}
.contacto__form input:focus,.contacto__form select:focus,.contacto__form textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(185,135,44,.15);
}
.contacto__form select option{background:var(--card)}
.contacto__hint{display:block;text-align:center;margin-top:.9rem;font-size:.72rem;color:#9a8f76}
.contacto__data{display:grid;gap:1.1rem}
.citem{
  display:flex;gap:1.1rem;align-items:flex-start;border:1px solid var(--line-soft);border-radius:16px;padding:1.2rem 1.4rem;
  background:var(--card);box-shadow:0 8px 24px rgba(60,40,10,.06);
  transition:transform .35s var(--ease),border-color .35s;
}
.citem:hover{transform:translateX(6px);border-color:rgba(185,135,44,.45)}
.citem__ico{font-size:1.4rem;line-height:1.3}
.citem h4{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.2rem}
.citem a{color:var(--ink);font-weight:600;font-size:.98rem;transition:color .3s}
.citem a:hover{color:var(--gold-2)}
.citem p{color:var(--ink-dim);font-size:.92rem}
.socials{display:flex;gap:1rem;flex-wrap:wrap}
.socials a{display:inline-block;border:1px solid var(--line-soft);border-radius:999px;padding:.4rem 1rem;font-size:.78rem;font-weight:600;transition:all .3s}
.socials a:hover{background:rgba(201,162,75,.12);border-color:var(--gold);color:var(--gold-2)}

/* =========================================================
   FOOTER (se mantiene oscuro)
   ========================================================= */
.footer{border-top:1px solid var(--line);background:#0e120a;padding:4rem 0 2rem;position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 85% 0%,rgba(201,162,75,.07),transparent 60%),radial-gradient(50% 60% at 0% 100%,rgba(201,162,75,.05),transparent 55%);pointer-events:none}
.footer .container{position:relative;z-index:1}
.footer__top{display:grid;grid-template-columns:1.4fr .8fr 1.2fr .8fr;gap:2.6rem;align-items:start;margin-bottom:2.8rem}
.footer__brand img{width:96px;margin-bottom:1.1rem}
.footer__brand p{color:var(--ink-dim);font-size:.9rem;max-width:260px}
.footer__brand-slogan{font-family:var(--serif);font-style:italic;font-size:.98rem !important;color:var(--gold-2) !important;margin-top:.25rem}
.footer__cta{margin-top:1.2rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.3rem;font-size:.82rem}
.footer__title{
  font-family:var(--serif);font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.1rem;display:flex;align-items:center;gap:.7rem;
}
.footer__title::after{content:"";flex:1;max-width:34px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.footer__links{display:grid;gap:.55rem}
.footer__links a{color:var(--ink-dim);font-size:.9rem;transition:color .3s,transform .3s;width:fit-content}
.footer__links a:hover{color:var(--gold-2);transform:translateX(4px)}
.footer__links a.is-active{color:var(--gold-2);font-weight:700}
.footer__links a.is-active::before{content:"—";color:var(--gold);margin-right:.4rem}
.footer__contact{display:grid;gap:.65rem}
.footer__contact a{display:flex;align-items:center;gap:.6rem;color:var(--ink-dim);font-size:.86rem;transition:color .3s;width:fit-content;max-width:100%}
.footer__contact a svg{flex:none;color:var(--gold);transition:color .3s}
.footer__contact a:hover{color:var(--gold-2)}
.footer__contact a:hover svg{color:var(--gold-2)}
.footer__social{display:flex;gap:.7rem;margin-bottom:1.1rem}
.footer__social-btn{
  display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(201,162,75,.4);color:var(--gold);background:rgba(201,162,75,.08);
  transition:all .3s var(--ease);
}
.footer__social-btn:hover{background:var(--gold);color:#241e13;border-color:var(--gold);transform:translateY(-3px);box-shadow:0 10px 22px rgba(201,162,75,.3)}
.footer__legal{font-family:var(--serif);font-style:italic;color:#7c7460;font-size:.88rem;max-width:220px;line-height:1.5}
.footer__bottom{border-top:1px solid rgba(201,162,75,.18);padding-top:1.7rem;display:flex;flex-direction:column;gap:.4rem;text-align:center}
.footer__bottom p{font-size:.74rem;color:#7c7460}
.footer__legal-links{display:flex;justify-content:center;flex-wrap:wrap;gap:.55rem;margin-top:.55rem}
.footer__legal-links span{color:#7c7460}
.footer__legal-links a{font-size:.74rem;font-weight:700;letter-spacing:.04em;color:#7c7460;text-decoration:underline;text-decoration-color:rgba(201,162,75,.4);text-underline-offset:3px;transition:color .3s}
.footer__legal-links a:hover{color:var(--gold-2)}
@media (max-width:1080px){
  .footer__top{grid-template-columns:1fr 1fr;gap:2.2rem}
  .footer__brand{grid-column:1/-1}
  .footer__brand p{max-width:340px}
}

/* =========================================================
   FLOATING WHATSAPP
   ========================================================= */
.float-wa{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:1000;display:flex;align-items:center;gap:.6rem;
  background:#25d366;color:#07270f;font-weight:800;font-size:.82rem;letter-spacing:.04em;
  padding:.85rem 1.1rem;border-radius:999px;box-shadow:0 14px 40px rgba(37,211,102,.4);
  transition:transform .3s var(--ease);animation:waPulse 2.4s ease-in-out infinite;
}
.float-wa:hover{transform:translateY(-4px) scale(1.03)}
.float-wa span{display:none}
@keyframes waPulse{0%,100%{box-shadow:0 14px 40px rgba(37,211,102,.4)}50%{box-shadow:0 14px 52px rgba(37,211,102,.62)}}

/* =========================================================
   MODAL CATÁLOGO
   ========================================================= */
.modal{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:1.2rem;visibility:hidden;opacity:0;transition:opacity .4s,visibility .4s}
.modal.is-open{visibility:visible;opacity:1}
.modal__backdrop{position:absolute;inset:0;background:rgba(30,22,8,.55);backdrop-filter:blur(8px)}
.modal__panel{
  position:relative;z-index:2;width:min(820px,100%);max-height:88vh;overflow-y:auto;
  background:linear-gradient(180deg,#fff,#fbf6ec);border:1px solid var(--line);border-radius:24px;padding:2.2rem;
  transform:translateY(30px) scale(.97);transition:transform .45s var(--ease);box-shadow:var(--shadow-lg);
}
.modal.is-open .modal__panel{transform:none}
.modal__close{
  position:absolute;top:1rem;right:1rem;width:42px;height:42px;border-radius:50%;
  background:rgba(185,135,44,.12);border:1px solid var(--line-soft);color:var(--gold-2);font-size:1.4rem;
  transition:all .3s;
}
.modal__close:hover{background:rgba(185,135,44,.24);transform:rotate(90deg)}
.modal__head{margin-bottom:2rem;padding-right:3rem}
.modal__head h2{font-family:var(--serif);font-size:2.2rem;font-weight:600;color:var(--ink)}
.modal__head p{color:var(--ink-dim);font-size:.92rem;margin-top:.5rem}
.modal__grid{display:grid;gap:1rem}
.catrow{
  display:grid;grid-template-columns:86px 1fr auto;gap:1.2rem;align-items:center;
  border:1px solid var(--line-soft);border-radius:16px;padding:1rem;background:var(--card);
  transition:border-color .3s;
}
.catrow:hover{border-color:rgba(185,135,44,.45)}
.catrow img{width:86px;height:86px;object-fit:cover;border-radius:12px}
.catrow h3{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--gold-2)}
.catrow p{font-size:.84rem;color:var(--ink-dim)}
.catrow .btn{padding:.7rem 1.2rem;font-size:.74rem}

/* =========================================================
   RESPONSIVE
   ========================================================= */
.contact__grid>*,.present__grid>*,.visita__grid>*,.products__grid>*,.page-productos .shopgrid>*,.page-productos .shopmodal__panel>*{min-width:0}
@media (max-width:1024px){
  .proceso__grid{grid-template-columns:repeat(2,1fr)}
  .valores__grid{grid-template-columns:repeat(2,1fr)}
  .medals__row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .nav__links{
    position:fixed;top:0;right:0;height:100vh;width:min(320px,82vw);
    background:rgba(255,255,255,.98);flex-direction:column;justify-content:center;gap:1.6rem;
    transform:translateX(100%);transition:transform .45s var(--ease);box-shadow:-20px 0 60px rgba(60,40,10,.25);
  }
  .nav__links.is-open{transform:translateX(0)}
  .nav__links a,.nav.is-scrolled .nav__links a{color:var(--ink)}
  .nav__burger{display:flex}
  .present__grid,.visita__grid,.contacto__grid{grid-template-columns:1fr}
  .present__frame img{aspect-ratio:1/1}
  .products__grid{grid-template-columns:1fr}
  .punches__grid{grid-template-columns:repeat(2,1fr)}
  .maestros__grid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .hero__badges{flex-wrap:wrap;justify-content:center;bottom:6.6rem}
  .tl-nav{top:64px;border-radius:20px;justify-content:flex-start}
  .tl-card,.tl-card:nth-child(even){grid-template-columns:1fr}
  .tl-card:nth-child(even) .tl-card__media{order:0}
  .tl-card::before{font-size:8rem}
  .catrow{grid-template-columns:70px 1fr;grid-auto-rows:auto}
  .catrow .btn{grid-column:2;justify-self:start}
  .catrow img{width:70px;height:70px}
}
@media (max-width:560px){
  .proceso__grid,.valores__grid,.medals__row{grid-template-columns:1fr}
  .present__stats{grid-template-columns:repeat(2,1fr)}
  .present__stamp{right:0}
  .float-wa{padding:.85rem;border-radius:50%}
  .float-wa span{display:none}
  .contact__card{grid-template-columns:auto 1fr}
  .contact__go{grid-column:1/-1;justify-self:start}
  .contact__maplabel h3{font-size:1.15rem}
  .contact__maplabel p{font-size:.82rem}
  .pcard__medal{width:40px;height:40px}
  .kicker{letter-spacing:.3em}
}
@media (max-width:380px){
  .hero__title{font-size:2.2rem}
  .hero__eyebrow{font-size:.58rem;letter-spacing:.3em;padding:.5rem .9rem}
  .hero__actions{flex-direction:column}
  .hero__actions .btn{width:100%}
  .page-hero h1{font-size:2rem}
}
/* Hero: badges y scroll en flujo cuando el viewport es angosto o bajo
   (evita que las insignias se encimen con los botones de acción) */
@media (max-width:1024px), (max-height:820px){
  .hero{flex-direction:column;padding:7rem 1.25rem 4.5rem}
  .hero__content{width:100%}
  .hero__badges{position:relative;left:auto;bottom:auto;transform:none;width:100%;margin-top:2.2rem;gap:.6rem;justify-content:center;flex-wrap:wrap}
  .hero__badge{min-width:106px;padding:.65rem .9rem}
  .hero__badge strong{font-size:1.45rem}
  .hero__scroll{position:relative;bottom:auto;left:auto;transform:none;margin-top:2.6rem}
}

/* =========================================================
   PROCESO (proceso.html) — pasos editoriales
   ========================================================= */
.steps{background:linear-gradient(180deg,var(--bg),#f6f1e6);overflow:hidden}
.steps::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 500px at 85% 10%,rgba(169,114,47,.08),transparent 60%),
             radial-gradient(700px 500px at 10% 85%,rgba(185,135,44,.08),transparent 60%);
}
.page-proceso .page-hero{background:url("../images/fondos/agave_arriba.jpeg") center/cover no-repeat}
.page-contacto .page-hero{
  align-items:center;min-height:64vh;padding:150px 0 56px;
  background:url("../images/fondos/agave_lado_2.jpeg") center/cover no-repeat;
}
.page-contacto .page-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(12,16,11,.66),rgba(12,16,11,.34) 55%,rgba(12,16,11,.18));
}
.page-contacto .page-hero__grid{display:grid;grid-template-columns:1fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.page-contacto .page-hero p{width:auto;max-width:560px}
.page-contacto .page-hero__fig{position:relative;margin:0;z-index:1}
.page-contacto .page-hero__fig::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:28px;
  background:linear-gradient(135deg,rgba(201,162,75,.55),rgba(201,162,75,.1));
  transform:translate(16px,16px) rotate(2deg);
}
.page-contacto .page-hero__fig img{
  width:100%;height:auto;display:block;
  border-radius:24px;border:1px solid rgba(201,162,75,.5);
  box-shadow:0 44px 100px rgba(0,0,0,.5);
}
.page-contacto .page-hero__fig figcaption{
  position:absolute;left:1rem;bottom:1rem;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#f4d98a;
  background:rgba(12,16,11,.55);border:1px solid rgba(201,162,75,.35);border-radius:999px;
  padding:.45rem .9rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.steps-nav{
  position:sticky;top:74px;z-index:60;max-width:1180px;margin:0 auto 3.4rem;
  display:flex;gap:.5rem;overflow-x:auto;padding:.55rem;
  background:rgba(251,249,243,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line-soft);border-radius:999px;box-shadow:0 12px 32px rgba(60,40,10,.12);
  scrollbar-width:none;
}
.steps-nav::-webkit-scrollbar{display:none}
.steps-nav__item{
  display:flex;align-items:center;gap:.5rem;white-space:nowrap;flex:0 0 auto;
  border:0;background:none;padding:.6rem 1.1rem;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-dim);transition:background .35s var(--ease),color .35s,box-shadow .35s;
}
.steps-nav__item:hover{color:var(--gold-2)}
.steps-nav__item.is-active{
  background:linear-gradient(135deg,#e6c87a,#b9872c);color:#241e13;
  box-shadow:0 10px 22px rgba(169,114,47,.4);
}
.steps-nav__num{font-family:var(--serif);font-size:1.05rem;font-weight:700;line-height:1}
.steps-nav__name{font-size:.66rem}

.steps-flow{display:grid;gap:clamp(3.4rem,6vw,5rem);position:relative}
.step{
  position:relative;display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(1.8rem,4vw,3.6rem);align-items:center;
}
.step:nth-child(even){grid-template-columns:1fr 1.05fr}
.step:nth-child(even) .step__media{order:2}
.step::before{
  content:attr(data-index);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--serif);font-size:min(24vw,18rem);font-weight:700;line-height:1;
  color:rgba(185,135,44,.08);z-index:0;pointer-events:none;user-select:none;
}
.step__media{
  position:relative;z-index:1;display:flex;gap:.9rem;align-items:stretch;
  aspect-ratio:16/10;width:100%;max-width:640px;
}
.step__media-img{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:18px;
  background:radial-gradient(130% 95% at 50% 28%,#f6efdf 0%,#e9dfc8 100%);
  border:1px solid var(--line-soft);box-shadow:0 22px 50px rgba(60,40,10,.16);
}
.step__media-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.step:hover .step__media-img img{transform:scale(1.06)}
.step__video-slot{
  position:relative;flex:0 0 36%;min-width:0;overflow:hidden;border-radius:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  color:#d3c9af;text-align:center;cursor:default;user-select:none;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.08),transparent 60%),
             linear-gradient(160deg,#2e2617,#241e13 55%,#171209);
  border:1px dashed rgba(201,162,75,.45);
}
.step__video-slot.is-ready{cursor:pointer;border-style:solid}
.step__video-slot.is-ready:hover{border-color:var(--gold)}
.step__video-slot-ic{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  color:#f4d98a;background:rgba(244,217,138,.14);
  transition:transform .3s var(--ease),background .3s;
}
.step__video-slot-ic svg{width:18px;height:18px;fill:#f4d98a;margin-left:3px}
.step__video-slot.is-ready:hover .step__video-slot-ic{transform:scale(1.12);background:rgba(244,217,138,.28)}
.step__video-slot-txt{font-size:.62rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase}
.step__video-slot-ic,.step__video-slot-txt{position:relative;z-index:3;pointer-events:none}
.step__video-slot video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;
  background:#000;z-index:2;cursor:pointer;
}
.step__video-slot.is-ready video{
  filter:blur(6px) saturate(.95) brightness(.82);
  transform:scale(1.08);
  transition:filter .5s var(--ease),transform .5s var(--ease);
}
.step__video-slot.is-playing video{
  filter:none;
  transform:none;
}
.step__video-slot.is-playing .step__video-slot-ic,
.step__video-slot.is-playing .step__video-slot-txt{display:none}
.step__body{position:relative;z-index:1}
.step__badge{
  display:inline-block;font-size:.6rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-2);background:rgba(201,162,75,.12);border:1px solid var(--line-soft);
  border-radius:999px;padding:.38rem .85rem;margin-bottom:1rem;
}
.step__body h3{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:600;color:var(--ink);margin-bottom:.8rem;line-height:1.08}
.step__body p{color:var(--ink-dim);font-size:1.02rem;line-height:1.72;max-width:520px}
.sustain{
  margin:3.6rem auto 0;max-width:1180px;text-align:center;position:relative;overflow:hidden;
  border:1px solid rgba(201,162,75,.35);border-radius:var(--radius);
  padding:3.2rem 2.4rem;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.08),transparent 60%),
             linear-gradient(160deg,#2e2617,#241e13 55%,#171209);
  box-shadow:0 20px 50px rgba(12,16,11,.35);
}
.sustain__badge{
  display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#f4d98a;
  border:1px solid rgba(244,217,138,.4);border-radius:999px;padding:.34rem .85rem;margin-bottom:1.1rem;
}
.sustain h3{font-family:var(--serif);font-size:2rem;font-weight:600;color:#e3c27a;margin-bottom:.9rem}
.sustain p{color:#d3c9af;max-width:760px;margin:0 auto;font-size:1rem;line-height:1.7}

/* =========================================================
   CONTACTO (contacto.html)
   ========================================================= */
.contact{background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.contact__head{max-width:760px;margin:0 auto clamp(2.4rem,5vw,3.4rem);text-align:center}
.contact__tag{
  display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-2);background:rgba(201,162,75,.12);border:1px solid var(--line-soft);
  border-radius:999px;padding:.4rem .95rem;margin-bottom:1.1rem;
}
.contact__head h2{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.2rem);font-weight:600;line-height:1.1;color:var(--ink)}
.contact__head h2 em{font-style:italic;color:var(--gold-2)}
.contact__head p{color:var(--ink-dim);margin-top:1rem;font-size:1.02rem;line-height:1.7}
.contact__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.8rem,4vw,3rem);align-items:stretch}

.contact__cards{display:grid;gap:1rem;align-content:start}
.contact__card{
  display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:1.3rem 1.4rem;
  background:var(--card);box-shadow:0 8px 24px rgba(60,40,10,.06);
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
}
a.contact__card:hover{transform:translateY(-4px);border-color:rgba(185,135,44,.45);box-shadow:var(--shadow)}
.contact__card--wa{
  background:linear-gradient(120deg,#23402f,#14301f);border-color:rgba(201,162,75,.35);
  box-shadow:0 14px 34px rgba(20,48,31,.25);
}
.contact__card--wa:hover{border-color:rgba(244,217,138,.55)}
.contact__card--wa .contact__txt h3{color:#e3c27a}
.contact__card--wa .contact__value{color:#f4d98a}
.contact__card--wa .contact__note{color:#cfc6ac}
.contact__card--wa .contact__go{color:#e3c27a}
.contact__ic{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;flex:none;
  background:rgba(201,162,75,.14);color:var(--gold-2);
}
.contact__ic svg{width:24px;height:24px;fill:currentColor}
.contact__card--wa .contact__ic{background:rgba(244,217,138,.16);color:#f4d98a}
.contact__txt h3{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--ink)}
.contact__value{font-size:1rem;font-weight:700;color:var(--ink);word-break:break-word}
.contact__note{font-size:.82rem;color:var(--ink-dim);line-height:1.5}
.contact__go{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2);white-space:nowrap}
.contact__card--social{grid-template-columns:1fr;gap:.9rem}
.contact__socialrow{display:flex;gap:.7rem;flex-wrap:wrap}
.contact__socialrow a{
  border:1px solid var(--line-soft);border-radius:999px;padding:.55rem 1.3rem;
  font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--gold-2);
  background:#fdfbf5;transition:all .3s;
}
.contact__socialrow a:hover{background:rgba(201,162,75,.12);border-color:var(--gold)}

.contact__mapcard{
  display:flex;flex-direction:column;min-height:100%;
  border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;
  background:var(--card);box-shadow:var(--shadow-lg);
}
.contact__mapframe{position:relative;flex:1;min-height:340px;background:#e9dfc8}
.contact__mapframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.2) contrast(1.02)}
.contact__maplabel{display:flex;align-items:center;gap:1rem;padding:1.4rem 1.5rem;flex-wrap:wrap}
.contact__pin{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#e6c87a,#b9872c);color:#241e13;
  box-shadow:0 8px 18px rgba(169,114,47,.35);
}
.contact__pin svg{width:22px;height:22px;fill:currentColor}
.contact__maplabel h3{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--ink)}
.contact__maplabel p{font-size:.88rem;color:var(--ink-dim)}
.contact__mapacts{display:flex;gap:.7rem;flex-wrap:wrap;margin-left:auto}
.contact__mapacts .btn{padding:.7rem 1.3rem;font-size:.78rem}

/* ---------- Responsive de proceso y contacto ---------- */
@media (max-width:900px){
  .steps-nav{top:64px;border-radius:20px}
}
@media (max-width:860px){
  .contact__grid{grid-template-columns:1fr}
  .contact__mapframe{min-height:300px}
  .contact__maplabel{flex-direction:column;align-items:flex-start;gap:.9rem}
  .contact__mapacts{margin-left:0}
  .page-contacto .page-hero{padding:130px 0 44px;min-height:auto}
  .page-contacto .page-hero__grid{grid-template-columns:1fr;gap:2rem}
  .page-contacto .page-hero__fig{width:min(460px,100%);margin:0 auto}
  .steps-nav{justify-content:flex-start}
  .step,.step:nth-child(even){grid-template-columns:1fr}
  .step:nth-child(even) .step__media{order:0}
  .step::before{font-size:10rem}
}
@media (max-width:560px){
  .step__media{flex-direction:column;aspect-ratio:auto;gap:.9rem}
  .step__media-img{flex:none;width:100%;aspect-ratio:16/9}
  .step__video-slot{flex:none;width:100%;height:210px;border-radius:18px}
  .step__video-slot-ic{width:40px;height:40px}
  .step::before{font-size:8rem}
  .tl-card::before{font-size:7rem}
}

/* =========================================================
   PRODUCTOS (productos.html) — cuadrícula estilo tienda + modal
   ========================================================= */
.page-productos .pintro{
  position:relative;min-height:56vh;display:flex;align-items:flex-end;
  padding:150px 0 44px;overflow:hidden;
  background:url('../images/fondos/agave_lado.jpeg') center/cover no-repeat;
}
.page-productos .pintro::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,16,11,.62),rgba(12,16,11,.38) 55%,var(--bg))}
.page-productos .pintro .container{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
.page-productos .pintro .kicker{display:inline-block;width:max-content;color:#e3c27a;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700;background:rgba(12,16,11,.38);border:1px solid rgba(201,162,75,.35);border-radius:999px;padding:.5rem 1.15rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin-bottom:1.1rem;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.page-productos .pintro h1{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.6rem);font-weight:600;color:#fff;margin:.55rem 0 .4rem;line-height:1.12}
.page-productos .pintro p{width:max-content;max-width:640px;color:#f4ecda;font-size:1.02rem;background:rgba(12,16,11,.44);border:1px solid rgba(201,162,75,.3);border-radius:14px;padding:1rem 1.25rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(0,0,0,.32)}
.page-productos .psearch{
  display:flex;align-items:center;gap:.6rem;width:min(460px,100%);margin-top:1.4rem;
  background:rgba(12,16,11,.5);border:1px solid rgba(201,162,75,.4);border-radius:999px;
  padding:.55rem .7rem .55rem 1.1rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 30px rgba(0,0,0,.3);color:#e3c27a;transition:border-color .3s,box-shadow .3s;
}
.page-productos .psearch:focus-within{border-color:var(--gold);box-shadow:0 12px 34px rgba(0,0,0,.4),0 0 0 3px rgba(201,162,75,.18)}
.page-productos .psearch input{
  flex:1;min-width:0;border:0;outline:0;background:none;color:#f6f0e2;font-family:inherit;
  font-size:.95rem;letter-spacing:.01em;caret-color:var(--gold);
}
.page-productos .psearch input::placeholder{color:rgba(244,236,218,.55)}
.page-productos .psearch input::-webkit-search-cancel-button{-webkit-appearance:none}
.page-productos .psearch button{
  display:none;flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(201,162,75,.4);
  background:rgba(12,16,11,.5);color:#e3c27a;cursor:pointer;font-size:.72rem;line-height:1;align-items:center;justify-content:center;
  transition:background .3s,color .3s;
}
.page-productos .psearch button:hover{background:var(--gold);color:#241e13}
.page-productos .psearch.has-text button{display:flex}
.page-productos .shopcard.is-hidden,.page-productos .shopgroup.is-hidden{display:none}
.page-productos .psearch__empty{
  display:none;text-align:center;margin:2.6rem auto;max-width:460px;color:var(--ink-dim);
  font-family:var(--serif);font-size:1.25rem;font-style:italic;border:1px dashed var(--line);
  border-radius:var(--radius);padding:2.4rem 1.5rem;background:rgba(201,162,75,.06);
}
.page-productos .psearch__empty.is-visible{display:block}

.page-productos .products{background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.page-productos .shopgroup{margin-top:3.2rem}
.page-productos .shopgroup:first-child{margin-top:0}
.page-productos .shopgroup__title{
  font-family:var(--serif);font-size:.8rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem;
}
.page-productos .shopgroup__title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.page-productos .shopgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:min(1240px,100%);margin:0 auto}
.page-productos .shopcard{
  display:flex;flex-direction:column;border:1px solid var(--line-soft);border-radius:var(--radius);
  background:linear-gradient(180deg,#fff,#fbf6ea);overflow:hidden;box-shadow:0 12px 28px rgba(60,40,10,.08);
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;position:relative;
}
.page-productos .shopcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(185,135,44,.4)}
.page-productos .shopcard__open{
  position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  aspect-ratio:5/6;overflow:hidden;
}
.page-productos .shopcard__media{position:relative;display:block;width:100%;height:100%;background:radial-gradient(130% 95% at 50% 28%,#fffdf6 0%,#f3ecd9 58%,#e9dfc8 100%)}
.page-productos .shopcard__media > picture img{width:100%;height:100%;object-fit:contain;padding:1.2rem .9rem;transition:transform .9s var(--ease);filter:drop-shadow(0 20px 18px rgba(60,40,10,.18))}
.page-productos .shopcard:hover .shopcard__media > picture img{transform:scale(1.06)}
.page-productos .shopcard__medal{
  position:absolute;top:.8rem;right:.8rem;z-index:2;width:44px;height:44px;border-radius:50%;overflow:hidden;
  border:2px solid var(--gold);background:radial-gradient(circle at 50% 30%,#fff8e1,#e6c87a 55%,#b8903a);
  box-shadow:0 8px 18px rgba(60,40,10,.32);
}
.page-productos .shopcard__medal img{width:100%;height:100%;object-fit:cover;display:block}
.page-productos .wa-share{
  position:absolute;top:.85rem;left:.85rem;z-index:3;width:2.15rem;height:2.15rem;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  color:var(--gold-2);background:rgba(253,251,245,.88);border:1px solid var(--line);
  box-shadow:0 4px 12px rgba(60,40,10,.14);transition:background .3s,color .3s,transform .3s,box-shadow .3s;
}
.page-productos .wa-share svg{width:1rem;height:1rem}
.page-productos .wa-share:hover{background:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(60,40,10,.2)}
.page-productos .shopcard__open::after{
  content:"Ver detalles";position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:.6rem;text-align:center;font-size:.64rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:#241e13;background:linear-gradient(90deg,rgba(201,162,75,.92),rgba(185,135,44,.96));opacity:0;transition:opacity .3s;
}
.page-productos .shopcard:hover .shopcard__open::after{opacity:1}
.page-productos .shopcard__body{display:flex;flex-direction:column;gap:.4rem;padding:1.1rem 1.2rem 1.25rem;flex:1}
.page-productos .shopcard__tag{display:inline-block;width:max-content;font-size:.58rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);background:rgba(201,162,75,.12);border:1px solid var(--line-soft);border-radius:999px;padding:.3rem .7rem}
.page-productos .shopcard__body h3{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--ink);line-height:1.15;margin-top:.15rem}
.page-productos .shopcard__meta{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}
.page-productos .shopcard__desc{font-size:.85rem;color:var(--ink-dim);line-height:1.5;flex:1;margin-top:.15rem}
.page-productos .shopcard__price{font-family:var(--serif);font-size:1.5rem;font-weight:700;color:var(--gold-2);line-height:1;margin-top:.45rem}
.page-productos .shopcard__price small{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin-left:.35rem}
.page-productos .shopcard__actions{display:grid;grid-template-columns:1fr 1.35fr;gap:.6rem;margin-top:.75rem}
.page-productos .shopcard__details{
  border:1px solid var(--line);border-radius:999px;padding:.58rem 1rem;cursor:pointer;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2);
  background:#fdfbf5;transition:background .3s,border-color .3s;
}
.page-productos .shopcard__details:hover{background:rgba(201,162,75,.12);border-color:rgba(185,135,44,.45)}

/* Tarjeta CTA (rellena la cuadrícula y guía al pedido) */
.page-productos .shopcard--cta{display:none}
.page-productos .shopcard--cta a{display:flex;flex:1;text-align:center}
.page-productos .shopcard--cta__inner{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;flex:1;padding:2.2rem 1.6rem;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.12),transparent 60%),
    linear-gradient(160deg,var(--copper),var(--gold) 55%,#96701f);
  color:#fffdf6;
}
.page-productos .shopcard--cta-alt .shopcard--cta__inner{background:linear-gradient(160deg,#2e2617,#241e13 55%,#171209)}
.page-productos .shopcard--cta-taberna .shopcard--cta__inner{
  background:
    linear-gradient(180deg,rgba(15,12,6,.5),rgba(15,12,6,.78)),
    url("../images/historia/taberna.jpeg") center/cover no-repeat;
}
.page-productos .shopcard--cta-wa .shopcard--cta__inner{
  background:
    linear-gradient(180deg,rgba(15,12,6,.5),rgba(15,12,6,.78)),
    url("../images/fondos/agave_quiote.jpeg") center/cover no-repeat;
}
.page-productos .shopcard--cta__badge{
  font-size:.6rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#f4d98a;
  border:1px solid rgba(244,217,138,.4);border-radius:999px;padding:.32rem .8rem;
}
.page-productos .shopcard--cta h3{font-family:var(--serif);font-size:1.7rem;font-weight:600;line-height:1.1;color:#fff}
.page-productos .shopcard--cta p{font-size:.85rem;line-height:1.55;color:rgba(255,253,246,.78)}
.page-productos .shopcard--cta .btn{pointer-events:none}

/* Modal de producto */
.page-productos .shopmodal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:1.2rem;visibility:hidden;opacity:0;transition:opacity .35s var(--ease),visibility .35s}
.page-productos .shopmodal.is-open{visibility:visible;opacity:1}
.page-productos .shopmodal__backdrop{position:absolute;inset:0;border:0;cursor:pointer;background:rgba(12,16,11,.62);backdrop-filter:blur(4px)}
.page-productos .shopmodal__panel{
  position:relative;display:grid;grid-template-columns:1fr 1.1fr;width:min(920px,100%);max-height:88vh;overflow:auto;
  background:linear-gradient(180deg,#fff,#f9f4e8);border:1px solid var(--line-soft);border-radius:20px;
  box-shadow:0 40px 90px rgba(12,16,11,.45);
  transform:translateY(16px) scale(.985);transition:transform .35s var(--ease);
}
.page-productos .shopmodal.is-open .shopmodal__panel{transform:none}
.page-productos .shopmodal__close{
  position:absolute;top:.9rem;right:.9rem;z-index:3;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line-soft);background:#fdfbf5;color:var(--ink);cursor:pointer;
  font-size:1rem;line-height:1;transition:background .3s,transform .3s;
}
.page-productos .shopmodal__close:hover{background:var(--gold);color:#fff;transform:rotate(90deg)}
.page-productos .shopmodal__media{position:relative;min-height:320px;display:flex;align-items:center;justify-content:center;background:radial-gradient(130% 95% at 50% 28%,#fffdf6 0%,#f3ecd9 58%,#e9dfc8 100%)}
.page-productos .shopmodal__media img{position:static;width:100%;height:100%;object-fit:contain;padding:2rem 1.3rem;filter:drop-shadow(0 26px 24px rgba(60,40,10,.22))}
.page-productos .shopmodal__info{padding:2.2rem 2.1rem;display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.page-productos .shopmodal__tag{font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);background:rgba(201,162,75,.12);border:1px solid var(--line-soft);padding:.35rem .85rem;border-radius:999px}
.page-productos .shopmodal__info h3{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.3rem);font-weight:600;color:var(--ink);line-height:1.1}
.page-productos .shopmodal__price{font-family:var(--serif);font-size:1.9rem;font-weight:700;color:var(--gold-2);line-height:1}
.page-productos .shopmodal__price small{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin-left:.4rem}
.page-productos .shopmodal__format{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.page-productos .shopmodal__desc{font-size:.95rem;color:var(--ink-dim);line-height:1.6;margin:.2rem 0 .4rem}
.page-productos .shopmodal__notes{list-style:none;width:100%;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:.9rem 0;display:grid;gap:.6rem;margin:.4rem 0}
.page-productos .shopmodal__notes li{display:grid;grid-template-columns:72px 1fr;gap:.9rem;align-items:baseline}
.page-productos .shopmodal__notes strong{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.page-productos .shopmodal__notes span{font-size:.88rem;color:var(--ink-dim)}
.page-productos .shopmodal__chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.page-productos .shopmodal__chips span{border:1px solid var(--line-soft);border-radius:999px;padding:.38rem .85rem;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);background:#fdfbf5}
.page-productos .shopmodal__info .btn{width:100%}

@media (min-width:1440px){
  .page-productos .shopgrid{grid-template-columns:repeat(4,1fr);max-width:min(1480px,100%)}
  .page-productos .shopcard--cta{display:flex}
}
@media (max-width:1024px){
  .page-productos .shopgrid{grid-template-columns:repeat(2,1fr)}
  .page-productos .shopcard__open{aspect-ratio:5/6}
}
@media (max-width:860px){
  .page-productos .pintro{padding:120px 0 40px}
  .page-productos .pintro p,.page-hero p{width:auto;max-width:none;font-size:.95rem}
  .page-productos .shopmodal__panel{grid-template-columns:1fr;max-height:90vh}
  .page-productos .shopmodal__media{min-height:220px}
  .page-productos .shopmodal__media img{position:static;height:100%;aspect-ratio:4/3;object-fit:contain;padding:1.4rem .9rem}
}
@media (max-width:560px){
  .page-productos .shopgrid{grid-template-columns:1fr}
  .page-productos .shopmodal__info{padding:1.5rem 1.3rem}
}

/* ---------- Tour a La Vieja (productos.html) ---------- */
.tour{background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.tour__head{max-width:780px;margin:0 auto clamp(2.6rem,5vw,3.6rem);text-align:center}
.tour__head h2{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.2rem);font-weight:600;line-height:1.1;color:var(--ink);margin-bottom:1rem}
.tour__head h2 em{font-style:italic;color:var(--gold-2)}
.tour__head>p{color:var(--ink-dim);font-size:1.05rem;line-height:1.7}
.tour__note{font-style:italic;color:var(--ink-dim);font-size:.92rem;line-height:1.6;max-width:640px;margin:1.1rem auto 0}
.tour__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;align-items:stretch}
.tour__grid--3{grid-template-columns:repeat(3,1fr);margin-top:1.4rem}
.tour__card{
  position:relative;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:1.7rem 1.5rem;box-shadow:0 14px 38px rgba(60,40,10,.09);overflow:hidden;
  display:flex;flex-direction:column;gap:.7rem;
}
.tour__card-num{
  position:absolute;top:.55rem;right:1rem;font-family:var(--serif);font-size:3.1rem;font-weight:700;
  line-height:1;color:rgba(185,135,44,.16);pointer-events:none;
}
.tour__card h3{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--ink);line-height:1.1}
.tour__card p{color:var(--ink-dim);font-size:.93rem;line-height:1.65}
.tour__list{margin:.2rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.45rem}
.tour__list li{
  position:relative;padding-left:1.25rem;color:var(--ink-dim);font-size:.93rem;line-height:1.55;
}
.tour__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:.55em;height:.55em;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
}
.tour__menu{
  margin-top:auto;display:block;text-align:center;text-decoration:none;
  border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;
  background:#fffdf7;padding:.55rem .55rem .45rem;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.tour__menu:hover{border-color:rgba(185,135,44,.45);transform:translateY(-2px)}
.tour__menu img{display:block;width:100%;max-height:230px;object-fit:contain;border-radius:9px}
.tour__menu span{
  display:block;margin-top:.45rem;font-size:.66rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-2);
}
.tour__group{margin-top:3.4rem}
.tour__sub{
  display:flex;align-items:center;gap:1.1rem;font-family:var(--serif);font-size:1.7rem;font-weight:600;
  color:var(--ink);margin-bottom:1.5rem;
}
.tour__sub::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.tour__actgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.tour__actgrid--3{grid-template-columns:repeat(3,1fr)}
.tour__actgrid--2{grid-template-columns:repeat(2,1fr);max-width:980px}
.tour__act{
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.6rem;box-shadow:0 12px 32px rgba(60,40,10,.07);
}
.tour__act-time{
  display:inline-block;font-size:.58rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-2);background:rgba(201,162,75,.12);border:1px solid var(--line-soft);
  border-radius:999px;padding:.3rem .7rem;margin-bottom:.8rem;
}
.tour__act h4{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--ink);margin-bottom:.45rem}
.tour__act p{color:var(--ink-dim);font-size:.92rem;line-height:1.65}
.tour__rules{
  margin-top:3.4rem;position:relative;overflow:hidden;border:1px solid rgba(201,162,75,.35);
  border-radius:var(--radius);padding:3rem 2.6rem;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.08),transparent 60%),
             linear-gradient(160deg,#2e2617,#241e13 55%,#171209);
  box-shadow:0 20px 50px rgba(12,16,11,.35);
}
.tour__rules h3{font-family:var(--serif);font-size:2rem;font-weight:600;color:#e3c27a;margin-bottom:1.6rem;text-align:center}
.tour__rules-list{margin:0;padding:0;list-style:none;counter-reset:tour;max-width:920px;margin-inline:auto}
.tour__rules-list li{
  counter-increment:tour;position:relative;padding:.55rem 0 .55rem 3rem;
  color:#d3c9af;font-size:.95rem;line-height:1.62;
}
.tour__rules-list li::before{
  content:counter(tour);position:absolute;left:0;top:.55rem;width:2rem;height:2rem;
  display:grid;place-items:center;border:1px solid rgba(244,217,138,.4);border-radius:50%;
  font-family:var(--serif);font-weight:700;font-size:.95rem;color:#f4d98a;
}
.tour__rules-list strong{color:#f4ecda;font-weight:700}
.tour__rules .tour__note{color:#b8ad93}
.tour__cta{
  margin-top:3.4rem;text-align:center;padding:0 1rem;
}
.tour__cta h3{font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:600;color:var(--ink);margin-bottom:.6rem}
.tour__cta p{color:var(--ink-dim);font-size:1rem;line-height:1.65;max-width:560px;margin:0 auto 1.4rem}
@media (max-width:1024px){
  .tour__grid{grid-template-columns:repeat(2,1fr)}
  .tour__grid--3{grid-template-columns:1fr}
  .tour__actgrid--3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .tour__actgrid{grid-template-columns:1fr}
  .tour__actgrid--2{grid-template-columns:1fr}
  .tour__actgrid--3{grid-template-columns:1fr}
  .tour__rules{padding:2.4rem 1.5rem}
}
@media (max-width:560px){
  .tour__grid{grid-template-columns:1fr}
}

/* ---------- Páginas legales (aviso de privacidad / aviso legal) ---------- */
.page-legal .legal{background:linear-gradient(180deg,var(--cream) 0%,#fff 60%)}
.page-legal .legal__wrap{max-width:820px}
.page-legal .legal__date{font-family:var(--serif);font-size:1rem;color:var(--ink-dim);margin-bottom:2.2rem}
.page-legal .legal__block{padding:1.7rem 0;border-top:1px solid var(--line-soft)}
.page-legal .legal__block:first-of-type{border-top:0}
.page-legal .legal__block h2{font-family:var(--serif);font-size:1.55rem;font-weight:600;color:var(--ink);margin-bottom:.8rem}
.page-legal .legal__block p{font-size:.95rem;line-height:1.75;color:var(--ink-dim);margin-bottom:.6rem}
.page-legal .legal__block p:last-child{margin-bottom:0}
.page-legal .legal__block ul{list-style:none;display:grid;gap:.6rem;margin:.2rem 0 .2rem}
.page-legal .legal__block ul li{position:relative;padding-left:1.3rem;font-size:.95rem;line-height:1.7;color:var(--ink-dim)}
.page-legal .legal__block ul li::before{content:"";position:absolute;left:.15rem;top:.62em;width:.42rem;height:.42rem;border-radius:50%;background:var(--gold-2)}
.page-legal .legal__block a{color:var(--gold-2);text-decoration:underline;text-underline-offset:2px}
.page-legal .legal__block a:hover{color:var(--copper)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  html{scroll-behavior:auto}
}