/* =========================================================
   BENDITA TABLA — sistema de diseño
   Cream + espresso + oro + vino, tipografía Fraunces/Work Sans
   ========================================================= */

/* Fuentes cargadas desde <link> en el <head> de cada página (más rápido que @import) */

:root{
  /* --- Escala tipográfica ---
     Antes había 51 tamaños distintos, once de ellos dentro de una franja
     de 2,5 píxeles. Nadie distingue .93rem de .94rem, pero el conjunto se
     nota: es lo que hace que una web parezca montada a trozos. Once pasos
     y todo cuelga de aquí. */
  --t-4xs:0.52rem;
  --t-3xs:0.62rem;
  --t-2xs:0.68rem;
  --t-xs:0.74rem;
  --t-sm:0.82rem;
  --t-md:0.9rem;
  --t-base:1.0rem;
  --t-lg:1.12rem;
  --t-xl:1.3rem;
  --t-2xl:1.5rem;
  --t-3xl:1.9rem;

  --cream: #F4EEE3;
  --cream-2: #E9E0D0;
  --paper: #FBF8F2;
  --espresso: #232A1B;
  --banda:#232A1B;          /* fondo de las franjas oscuras */
  --banda-texto:#FBF8F2;    /* texto sobre esas franjas */
  --espresso-70: rgba(29,25,19,.72);
  --espresso-50: rgba(29,25,19,.5);
  --gold: #A57D43;
  --gold-deep: #8A6532;
  /* Marrón muestreado del reloj de arena del logotipo */
  --marron-logo: #2E3624;
  --marron-logo-oscuro: #232A1B;
  --gold-soft: #D9BE8C;
  --wine: #1D1913;
  --wine-deep: #2E3624;
  --wine-ink: #4a1015;
  --wine-texto:#1D1913;     /* el vino cuando es texto, no fondo */
  --paper-rgb:251,248,239;  /* fondos translucidos claros */
  --banda-texto-rgb:251,248,239; /* texto translucido sobre franja oscura */
  --blanco:#FFFFFF;         /* campos y botones claros */
  --olive: #3B4530;
  --error: #A3271E;
  --line: rgba(29,25,19,.14);

  --glass-bg: rgba(var(--paper-rgb),.55);
  --glass-bg-strong: rgba(var(--paper-rgb),.78);
  --glass-border: rgba(255,255,255,.55);
  --glass-shadow: 0 8px 32px rgba(29,25,19,.14);

  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif;

  --container: 1180px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;

  --ease: cubic-bezier(.22,.9,.28,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;}
body{
  margin:0;
  background:var(--cream);
  color:var(--espresso);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  max-width:100vw;
  position:relative;
}
body::before{
  content:'';
  position:fixed;inset:0;
  z-index:2000;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{
  content:'';
  position:fixed;
  inset:-10%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(38% 28% at 18% 15%, rgba(165,125,67,.16), transparent 65%),
    radial-gradient(34% 30% at 85% 25%, rgba(29,25,19,.13), transparent 65%),
    radial-gradient(42% 34% at 45% 90%, rgba(59,69,48,.13), transparent 65%),
    radial-gradient(30% 26% at 95% 80%, rgba(165,125,67,.1), transparent 65%);
  animation:aurora-drift 32s ease-in-out infinite alternate;
}
@keyframes aurora-drift{
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-2.5%,3%) scale(1.06);}
  100%{transform:translate(3%,-2%) scale(1);}

}
@media (max-width:768px){
  body::after{animation:none;}

}
@media (prefers-reduced-motion: reduce){
  body::after{animation:none;}

}
::selection{
  background:var(--wine);
  color:var(--banda-texto);
}

/* Unifica el tono de todas las fotos reales, vengan de la sesión que vengan */
.plate-glass-photo img,
.tabla-visual-photo img,
.insta-card-photo img,
.showcase-media img,
.experience-visual img,
.lightbox-media img{
  filter:saturate(1.08) contrast(1.05) brightness(1.01);
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
p{margin:0 0 1em;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}

}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--wine);color:var(--banda-texto);
  padding:12px 18px;border-radius:0 0 10px 0;z-index:1000;
}
.skip-link:focus{left:0;}

:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;}

/* ---------- eyebrow / kicker ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-style:italic;
  font-size:var(--t-base);
  color:var(--wine-texto);
  margin-bottom:14px;
}
.kicker::before{
  content:'';flex:none;box-sizing:border-box;
  width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--gold);
  background:radial-gradient(circle, var(--gold) 3px, transparent 3.5px) no-repeat center;
}
.kicker::after{
  content:'';width:22px;height:1px;background:var(--gold);
}

.section{
  padding:64px 0;
  position:relative;
}
@media (max-width:640px){
  .section{padding:48px 0;}

}
.section-head{
  max-width:640px;
  margin-bottom:52px;
}
.section-head.center{margin-inline:auto;text-align:center;}
.section-head p{color:var(--espresso-70);font-size:var(--t-lg);}
.section-head h2{font-size:clamp(2.1rem,4vw,3rem);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--t-base);
  padding:15px 28px;
  border-radius:100px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-primary{
  background:var(--wine);
  color:var(--banda-texto);
  box-shadow:0 10px 24px rgba(29,25,19,.28);
}
.btn-primary:hover{background:var(--wine-deep);transform:translateY(-2px);box-shadow:0 14px 30px rgba(29,25,19,.36);}
.btn-glass{
  background:var(--glass-bg);
  color:var(--espresso);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.btn-glass:hover{background:var(--glass-bg-strong);transform:translateY(-2px);}
.btn-whatsapp{
  background:#2E5C45;
  color:#fff;
  box-shadow:0 10px 24px rgba(46,92,69,.3);
}
.btn-whatsapp:hover{background:#254a38;transform:translateY(-2px);}
.btn svg{width:19px;height:19px;flex:none;}
.btn-block{width:100%;}

/* =========================================================
   LIQUID GLASS — navbar
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;
  z-index:500;
  padding:16px 0;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  will-change:transform;
  transition:transform .35s var(--ease);
}
.site-header.is-hidden{
  transform:translateY(-130%);
}
.glass-nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  padding:10px 14px 10px 18px;
  border-radius:100px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  position:relative;
  transform:translateZ(0);
  transition:background .4s ease, box-shadow .4s ease;
}
.glass-nav::before{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 28%);
  pointer-events:none;
}
.site-header.is-scrolled .glass-nav{
  background:var(--glass-bg-strong);
  box-shadow:0 10px 30px rgba(29,25,19,.18);
}
.brand{
  display:flex;align-items:center;gap:14px;
  text-decoration:none;
  position:relative;z-index:1;
  flex:none;
}
.brand picture,.footer-brand picture{display:block;flex:none;line-height:0;}
.brand-mark{
  width:58px;height:58px;flex:none;
  margin:-6px 0;
  border-radius:50%;
  box-shadow:0 2px 10px rgba(29,25,19,.12);
}
.brand-text{
  display:flex;flex-direction:row;align-items:center;gap:10px;
  padding-left:14px;
  border-left:1px solid rgba(165,125,67,.35);
  line-height:1;
}
.brand-word{
  font-family:var(--font-display);
  font-size:var(--t-xl);
  font-weight:400;
  letter-spacing:.22em;
  margin-right:-.22em;
  color:var(--espresso);
}
.brand-sub{
  font-family:var(--font-body);
  font-size:var(--t-4xs);
  line-height:1.35;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold-deep);
  white-space:nowrap;
}
.nav-links{
  display:flex;align-items:center;gap:15px;
  position:relative;z-index:1;
}
.nav-links a{
  text-decoration:none;
  font-size:var(--t-md);
  font-weight:500;
  color:var(--espresso-70);
  white-space:nowrap;
  transition:color .25s ease;
  position:relative;
}
.nav-links a::after{
  content:'';
  position:absolute;left:0;right:0;bottom:-4px;
  height:1.5px;
  background:var(--wine);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav-links a:hover{color:var(--wine-texto);}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left;}
.nav-actions{display:flex;align-items:center;gap:10px;position:relative;z-index:1;}
.nav-actions .btn{padding:11px 20px;font-size:var(--t-md);}
.nav-toggle{
  display:none;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  align-items:center;justify-content:center;
  cursor:pointer;
}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--espresso);position:relative;}
.nav-toggle span::before,.nav-toggle span::after{
  content:'';position:absolute;left:0;width:18px;height:2px;background:var(--espresso);
}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}

/* ---------- Desplegable de la barra de navegación ---------- */
.nav-dropdown{position:relative;}
.nav-dropdown > a::before{
  content:'';
  position:absolute;right:-13px;top:50%;
  width:5px;height:5px;margin-top:-4px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .3s var(--ease);
}
.nav-dropdown{padding-right:14px;}
.nav-dropdown-menu{
  list-style:none;margin:0;padding:10px;
  position:absolute;top:calc(100% + 14px);left:-14px;
  min-width:232px;
  display:flex;flex-direction:column;gap:2px;
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  border-radius:18px;
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:var(--glass-shadow);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;

  pointer-events:none;
}
.nav-dropdown-menu::before{
  content:'';position:absolute;top:-14px;left:0;right:0;height:14px;
}
.nav-dropdown-menu a{
  display:block;padding:10px 14px;border-radius:12px;
  font-size:var(--t-md);color:var(--espresso-70);
  transition:background .25s ease,color .25s ease;
}
.nav-dropdown-menu a::after{display:none;}
.nav-dropdown-menu a:hover{background:rgba(165,125,67,.1);color:var(--wine-texto);}
.nav-dropdown:hover > a::before{transform:rotate(225deg);margin-top:-1px;}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}

@media (max-width: 480px){
  .brand{gap:10px;}
  .brand-mark{width:48px;height:48px;margin:-4px 0;}
  .brand-text{padding-left:10px;gap:6px;}
  .brand-word{font-size:var(--t-lg);letter-spacing:.18em;}
  .brand-sub{font-size:var(--t-4xs);letter-spacing:.18em;}

}
@media (max-width: 340px){
  .brand-sub{display:none;}

}

@media (max-width: 1300px){
  /* En móvil el desplegable se muestra siempre abierto, anidado bajo su categoría */
  .nav-dropdown{padding-right:0;}
  .nav-dropdown > a::before{display:none;}
  .nav-dropdown-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:0 0 4px 14px;min-width:0;
    border-left:1.5px solid var(--line);margin-left:10px;
  }
  .nav-dropdown-menu a{font-size:var(--t-md);padding:10px 12px;}
  .nav-links{
    position:fixed;top:88px;left:16px;right:16px;
    z-index:550;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--glass-bg-strong);
    border:1px solid var(--glass-border);
    border-radius:24px;
    padding:14px;
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    box-shadow:var(--glass-shadow);
    transform:translateY(-12px);
    opacity:0;
    visibility:hidden;
    /* Decisivo: mientras está cerrado NO captura el dedo, pase lo que pase
       con la transición. Sin esto, el panel invisible se tragaba los toques
       y te mandaba a la página del enlace que hubiera debajo del dedo. */
    pointer-events:none;
    transition:transform .35s var(--ease), opacity .35s var(--ease), visibility .35s;
  }
  .nav-links a{padding:12px 10px;border-radius:12px;}
  .nav-links a::after{display:none;}
  .nav-links a:hover{background:rgba(29,25,19,.06);}
  .site-header.nav-open .nav-links{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;}
  .nav-toggle{display:flex;}
  .nav-actions .btn-glass{display:none;}

}

/* =========================================================
   HERO — escena 3D
   ========================================================= */
.hero{
  position:relative;
  padding:136px 0 64px;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(700px 480px at 82% -6%, rgba(165,125,67,.22), transparent 60%),
    radial-gradient(620px 460px at 8% 18%, rgba(29,25,19,.14), transparent 60%),
    var(--cream);
  z-index:-2;
}
.hero-bg::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(420px 420px at var(--mx,50%) var(--my,30%), rgba(217,190,140,.16), transparent 65%);
  transition:opacity .4s ease;
  opacity:0;
  pointer-events:none;
}
.hero:hover .hero-bg::before{opacity:1;}
.hero-bg::after{
  content:'';
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(29,25,19,.06) 1px, transparent 1px);
  background-size:26px 26px;
  opacity:.5;
  mask-image:linear-gradient(to bottom, black, transparent 75%);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:40px;
  align-items:center;
}
.hero-copy .kicker{margin-bottom:20px;}
.hero-copy h1{
  font-size:clamp(2.4rem,4.6vw,3.9rem);
  line-height:1.04;
  letter-spacing:-.02em;
  text-wrap:balance;
  color:var(--espresso);
}
.hero-copy h1 em{
  font-style:italic;
  color:var(--wine-texto);
  font-weight:500;
}
.hero-copy .lede{
  font-size:var(--t-lg);
  color:var(--espresso-70);
  max-width:520px;
  margin-bottom:34px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.hero-events-link{margin:0 0 30px;}
.hero-events-link a{
  font-size:var(--t-sm);color:var(--wine-texto);font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(122,30,38,.3);padding-bottom:1px;transition:border-color .2s ease,color .2s ease;
}
.hero-events-link a:hover{color:var(--wine-texto);border-color:var(--wine-texto);}
.hero-meta{
  display:flex;gap:0;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid var(--line);
  max-width:540px;
}
.hero-meta div{padding:0 26px;border-left:1px solid var(--line);}
.hero-meta div:first-child{padding-left:0;border-left:0;}
.hero-meta div{display:flex;flex-direction:column;gap:2px;}
.hero-meta strong{font-family:var(--font-display);font-size:var(--t-xl);}
.hero-meta span{font-size:var(--t-sm);color:var(--espresso-50);}

/* --- escena 3D con perspectiva --- */
.hero-scene{
  position:relative;
  height:520px;
  perspective:1400px;
}
.scene-stage{
  position:relative;
  width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .15s ease-out;
}
.plate-glass{
  position:absolute;
  left:50%;top:50%;
  width:400px;height:400px;
  transform:translate(-50%,-50%) translateZ(0px);
  border-radius:50%;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  display:flex;align-items:center;justify-content:center;
}
.plate-glass svg{width:82%;height:82%;}
.plate-glass-photo{
  overflow:hidden;
  padding:10px;
  border-radius:36px;
}
.plate-glass-photo picture,
.plate-glass-photo img{
  width:100%;height:100%;
  border-radius:26px;
  object-fit:cover;
  display:block;
}
.plate-glass-photo img{
  animation:heroKenBurns 18s ease-in-out infinite alternate;
  transform-origin:52% 46%;
}
@keyframes heroKenBurns{
  0%{transform:scale(1);}
  100%{transform:scale(1.09);}

}
@media (prefers-reduced-motion: reduce){
  .plate-glass-photo img{animation:none;}

}

@keyframes bob{
  0%,100%{translate:0 0;}
  50%{translate:0 -14px;}

}
.ring-orbit{
  position:absolute;inset:6%;
  border:1px dashed rgba(165,125,67,.4);
  border-radius:50%;
  transform:translateZ(20px) rotate(0deg);
  animation:spin 46s linear infinite;
}
@keyframes spin{
  to{transform:translateZ(20px) rotate(360deg);}

}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-scene{height:320px;margin-top:12px;overflow:visible;}
  .plate-glass{width:280px;height:280px;}
  .floaty,.ring-orbit{display:none;}

}
@media (max-width: 420px){
  .hero-scene{height:280px;}
  .plate-glass{width:230px;height:230px;}

}

/* =========================================================
   Tarjeta glass genérica
   ========================================================= */
.glass-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  position:relative;
  overflow:hidden;
}
.glass-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(125deg,rgba(255,255,255,.45),rgba(255,255,255,0) 35%);
  pointer-events:none;
}
.experience .kicker{color:var(--gold-soft);}
.experience .kicker::before{
  border-color:var(--gold-soft);
  background:radial-gradient(circle, var(--gold-soft) 3px, transparent 3.5px) no-repeat center;
}
.experience .kicker::after{background:var(--gold-soft);}
.step:hover .step-num{color:var(--wine-texto);}
.step-num{transition:color .35s var(--ease);}
.step-num{
  font-family:var(--font-display);
  font-style:italic;
  font-size:var(--t-2xl);
  color:var(--gold);
  margin-bottom:14px;
  display:block;
}

/* =========================================================
   Reserva — disponibilidad + formulario
   ========================================================= */
.reserva{
  background:linear-gradient(180deg,var(--cream) 0%, var(--cream-2) 55%, var(--cream) 100%);
}
.reserva-wrap{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:0;
  border-radius:32px;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(29,25,19,.16);
}
.reserva-form-side{
  background:var(--paper);
  padding:52px;
  position:relative;
}
.reserva-side{
  background:var(--banda);
  color:var(--banda-texto);
  padding:52px 44px;
  display:flex;flex-direction:column;
  gap:26px;
}
.reserva-side h3{color:var(--banda-texto);font-size:var(--t-xl);}
.reserva-side p{color:rgba(244,238,227,.72);font-size:var(--t-md);}
.reserva-side .btn-whatsapp{margin-top:auto;}
.reserva-side ul{display:flex;flex-direction:column;gap:14px;}
.reserva-side ul li{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-md);color:rgba(244,238,227,.85);}
.reserva-side ul svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--gold-soft);}

.field{margin-bottom:20px;}
.field label{
  display:block;font-size:var(--t-sm);font-weight:600;margin-bottom:8px;color:var(--espresso);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field input,.field select,.field textarea{
  width:100%;
  padding:13px 15px;
  border-radius:12px;
  border:1.5px solid var(--line);
  background:var(--blanco);
  font-family:var(--font-body);
  font-size:var(--t-base);
  color:var(--espresso);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(165,125,67,.15);
  outline:none;
}
.field textarea{resize:vertical;min-height:90px;}
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:var(--error);
  background:#FBF1F0;
}
.field-error{
  display:none;
  color:var(--error);
  font-size:var(--t-sm);
  margin-top:6px;
  font-weight:600;
}
.field.has-error .field-error{display:block;}

.field-consent{margin-bottom:22px;}
.consent-check{
  display:flex;align-items:flex-start;gap:10px;
  cursor:pointer;
  font-size:var(--t-sm);
  color:var(--espresso-70);
  line-height:1.45;
}
.consent-check input[type="checkbox"]{
  width:19px;height:19px;flex:none;margin-top:1px;
  accent-color:var(--wine-texto);
  cursor:pointer;
}
.consent-check a{color:var(--wine-texto);text-decoration:underline;}
.field-consent.has-error .consent-check{color:var(--error);}
.field-consent.has-error .consent-check input[type="checkbox"]{outline:2px solid var(--error);outline-offset:2px;}

/* selector de disponibilidad */
.avail-label{font-size:var(--t-sm);font-weight:600;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;}
.avail-label span{font-weight:500;color:var(--espresso-50);font-size:var(--t-sm);}
.day-picker{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:6px;
}
.day-chip{
  flex:none;
  width:64px;
  padding:10px 0 12px;
  border-radius:14px;
  border:1.5px solid var(--line);
  background:var(--blanco);
  text-align:center;
  cursor:pointer;
  transition:all .2s ease;
  scroll-snap-align:start;
}
.day-chip .dow{display:block;font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:.04em;color:var(--espresso-50);margin-bottom:4px;}
.day-chip .num{display:block;font-family:var(--font-display);font-size:var(--t-lg);}
.day-chip.is-selected{border-color:var(--wine-texto);background:var(--wine);color:#fff;}
.day-chip.is-selected .dow{color:rgba(255,255,255,.75);}
.day-chip.is-closed{opacity:.38;cursor:not-allowed;}
.day-chip:not(.is-closed):not(.is-selected):hover{border-color:var(--gold);transform:translateY(-2px);}

.time-picker{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:6px;min-height:44px;}
.time-chip{
  padding:9px 16px;border-radius:100px;border:1.5px solid var(--line);
  background:var(--blanco);font-size:var(--t-sm);font-weight:600;cursor:pointer;transition:all .2s ease;
}
.time-chip.is-selected{background:var(--wine);border-color:var(--wine-texto);color:#fff;}
.time-chip:not(.is-selected):hover{border-color:var(--gold);}
.time-picker-empty{font-size:var(--t-sm);color:var(--espresso-50);font-style:italic;}

/* En móvil: chips algo más pequeños, y la etiqueta centrada */
@media (max-width:980px){
  .day-chip{width:62px;flex:0 0 auto;}
  .time-picker{justify-content:center;}
  .avail-label{text-align:center;justify-content:center;}
}
@media (max-width:420px){
  .day-chip{width:56px;}

}

.form-note{
  font-size:var(--t-sm);color:var(--espresso-50);margin-top:14px;text-align:center;
}
.form-success{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
  padding:40px;
  background:var(--paper);
  opacity:0;
  pointer-events:none;
  transform:scale(.96);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.form-success.is-visible{opacity:1;pointer-events:auto;transform:scale(1);}
.form-success strong{font-family:var(--font-display);font-size:var(--t-xl);color:var(--espresso);}
.form-success p{color:var(--espresso-70);font-size:var(--t-base);max-width:320px;margin:0;}
.success-icon{
  width:70px;height:70px;border-radius:50%;
  background:rgba(59,69,48,.14);
  color:var(--olive);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:8px;
}
.success-check-circle{
  stroke-dasharray:151;stroke-dashoffset:151;
  animation:success-circle .5s ease forwards;
}
.success-check-mark{
  stroke-dasharray:40;stroke-dashoffset:40;
  animation:success-mark .35s .45s ease forwards;
}
@keyframes success-circle{
  to{stroke-dashoffset:0;}

}
@keyframes success-mark{
  to{stroke-dashoffset:0;}

}
@media (prefers-reduced-motion: reduce){
  .success-check-circle,.success-check-mark{animation:none;stroke-dashoffset:0;}

}

@media (max-width:980px){
  .reserva-wrap{grid-template-columns:1fr;}
  .reserva-form-side,.reserva-side{padding:34px 26px;}
  .field-row{grid-template-columns:1fr;}

}
/* En el formulario de eventos los campos cortos caben de dos en dos tambien
   en movil. Apilados de uno en uno el formulario se hacia larguisimo. */
@media (max-width:980px){
  #events-form .field-row{grid-template-columns:1fr 1fr;gap:14px;}
}
@media (max-width:380px){
  #events-form .field-row{grid-template-columns:1fr;}

}

/* =========================================================
   Testimonios
   ========================================================= */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.testi-card{
  padding:30px 26px;
  border-radius:var(--radius-md);
  background:var(--paper);
  border:1px solid var(--line);
}
.testi-stars{color:var(--gold);font-size:var(--t-md);margin-bottom:14px;letter-spacing:2px;}
.testi-card p{font-size:var(--t-base);color:var(--espresso-70);font-style:italic;font-family:var(--font-display);font-size:var(--t-lg);}
.testi-who{display:flex;align-items:center;gap:12px;margin-top:16px;}
.testi-avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(150deg,var(--gold-soft),var(--wine));
  flex:none;
}
.testi-who strong{display:block;font-size:var(--t-md);}
.testi-who span{font-size:var(--t-sm);color:var(--espresso-50);}
@media (max-width:900px){
  .testi-grid{grid-template-columns:1fr;}

}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background:var(--banda);
  color:rgba(244,238,227,.7);
  padding:76px 0 30px;
  margin-top:48px;
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
  gap:40px 56px;
  padding-bottom:50px;
  border-bottom:1px solid rgba(244,238,227,.14);
}
.footer-brand{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.footer-brand .brand-mark{width:64px;height:64px;margin:0;box-shadow:none;}
.footer-brand .brand-text{border-left-color:rgba(217,190,140,.4);}
.footer-brand .brand-word{color:var(--banda-texto);font-size:var(--t-xl);}
.footer-brand .brand-sub{color:var(--gold-soft);}
.footer-col h4{
  color:var(--banda-texto);font-family:var(--font-body);font-size:var(--t-sm);
  text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:16px;
}
.footer-col ul{display:flex;flex-direction:column;gap:11px;}
.footer-datos li{font-size:var(--t-md);line-height:1.5;}
.footer-datos strong{display:block;color:var(--gold-soft);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px;}
.footer-col a{text-decoration:none;font-size:var(--t-md);transition:color .2s ease;}
.footer-col a:hover{color:var(--gold-soft);}
.footer-social{display:flex;gap:12px;margin-top:18px;}
.footer-social a{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(244,238,227,.25);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.footer-social a:hover{background:rgba(244,238,227,.1);border-color:var(--gold-soft);}
.footer-social svg{width:17px;height:17px;}
.footer-bottom{
  padding-top:26px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  font-size:var(--t-sm);
}
.footer-bottom a{text-decoration:underline;text-underline-offset:3px;}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;}

}
@media (max-width:560px){
  /* Al quitar la columna Legal (duplicada abajo) quedan tres bloques. En dos
     columnas el contacto se cortaba por la derecha, asi que van apilados y es
     la lista de "Explorar" la que se reparte en dos columnas. */
  .footer-grid{grid-template-columns:1fr;gap:26px;}
  .footer-grid > div:first-child{grid-column:auto;}

}

/* =========================================================
   WhatsApp flotante
   ========================================================= */
.whatsapp-float{
  position:fixed;
  bottom:calc(26px + var(--alto-cookies,0px));right:26px;
  transition:bottom .35s var(--ease);
  z-index:400;
  width:60px;height:60px;
  border-radius:50%;
  background:#2E5C45;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px rgba(46,92,69,.4);
  text-decoration:none;
  animation:pulse-wa 3.2s ease-in-out infinite;
}
.whatsapp-float svg{width:28px;height:28px;color:#fff;}

.back-to-top{
  position:fixed;
  bottom:calc(98px + var(--alto-cookies,0px));right:29px;
  z-index:399;
  width:52px;height:52px;
  border-radius:50%;
  border:1px solid var(--glass-border);
  background:var(--glass-bg-strong);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:var(--glass-shadow);
  display:flex;align-items:center;justify-content:center;
  color:var(--espresso);
  cursor:pointer;
  padding:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(14px);
  transition:opacity .3s ease, transform .3s var(--ease), visibility .3s, background .2s ease;
}
.back-to-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);}
.back-to-top:hover{background:var(--paper);transform:translateY(-3px);}
.back-to-top svg{width:20px;height:20px;}

@media (max-width:560px){
  .back-to-top{
    bottom:92px;right:24px;
    width:44px;height:44px;
  }
  .back-to-top svg{width:18px;height:18px;}

}
.whatsapp-float:hover{animation-play-state:paused;transform:scale(1.06);}
@keyframes pulse-wa{
  0%,100%{box-shadow:0 14px 30px rgba(46,92,69,.4),0 0 0 0 rgba(46,92,69,.4);}
  50%{box-shadow:0 14px 30px rgba(46,92,69,.4),0 0 0 12px rgba(46,92,69,0);}

}

/* =========================================================
   Cookie banner
   ========================================================= */
.cookie-banner{
  position:fixed;
  left:20px;right:20px;bottom:20px;
  max-width:640px;
  margin-inline:auto;
  z-index:1000;
  padding:22px 24px;
  border-radius:22px;
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  box-shadow:0 20px 44px rgba(29,25,19,.24);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  transform:translateY(140%);
  transition:transform .5s var(--ease);
}
.cookie-banner.is-visible{transform:translateY(0);}
.cookie-banner p{font-size:var(--t-md);color:var(--espresso-70);margin-bottom:16px;}
.cookie-banner a{color:var(--wine-texto);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;}
.cookie-actions .btn{padding:11px 20px;font-size:var(--t-sm);}
.btn-outline{
  background:transparent;
  border:1.5px solid var(--line);
  color:var(--espresso);
}
.btn-outline:hover{border-color:var(--wine-texto);color:var(--wine-texto);}

/* ---------- páginas legales ---------- */
.legal{
  padding:168px 0 100px;
  max-width:780px;
  margin-inline:auto;
}
.legal h1{font-size:clamp(2.1rem,4vw,2.8rem);margin-bottom:10px;}
.legal .updated{color:var(--espresso-50);font-size:var(--t-md);margin-bottom:44px;}
.legal h2{font-size:var(--t-xl);margin-top:40px;}
.legal p, .legal li{color:var(--espresso-70);font-size:var(--t-base);}
.legal ul{list-style:disc;padding-left:22px;margin-bottom:16px;}
.legal li{margin-bottom:8px;}
.legal a{color:var(--wine-texto);text-decoration:underline;}
.legal-note{
  background:#FBF1F0;
  border:1.5px solid var(--error);
  border-radius:14px;
  padding:18px 20px;
  margin:18px 0 28px;
}
.legal-note strong{color:var(--error);display:block;margin-bottom:4px;}
.legal-note p{margin:0;color:var(--espresso);font-size:var(--t-md);}

/* ---------- página de gracias ---------- */
.thanks{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:140px 24px 80px;
  text-align:center;
}
.thanks-card{
  max-width:560px;
  padding:56px 44px;
}
.thanks-icon{
  width:74px;height:74px;border-radius:50%;
  background:var(--wine);color:#fff;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 26px;
}
.thanks-icon svg{width:34px;height:34px;}
.thanks-card h1{font-size:clamp(1.9rem,4vw,2.5rem);}
.thanks-card p{color:var(--espresso-70);font-size:var(--t-base);}
.thanks-detail{
  margin:26px 0;padding:20px;border-radius:16px;
  background:rgba(165,125,67,.1);
  font-size:var(--t-base);
}
.thanks-detail strong{color:var(--wine-texto);}
.thanks-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px;}

/* =========================================================
   Preguntas frecuentes — acordeón
   ========================================================= */
.faq-list{
  max-width:760px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
}
.faq-item{border-bottom:1.5px solid var(--line);transition:border-color .3s ease;}
.faq-item:first-child{border-top:1.5px solid var(--line);}
.faq-item:hover{border-color:rgba(217,190,140,.55);}
.faq-question-wrap{margin:0;font-weight:normal;}
.faq-question{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:none;border:none;
  padding:22px 4px;
  font-family:var(--font-display);
  font-size:var(--t-lg);
  color:var(--espresso);
  text-align:left;
  cursor:pointer;
  transition:color .25s ease;
}
.faq-question:hover{color:var(--wine-texto);}
.faq-chevron{
  width:34px;height:34px;flex:none;padding:8px;box-sizing:border-box;
  border-radius:50%;border:1.5px solid var(--line);
  color:var(--gold-deep);
  transition:transform .4s var(--ease),background .3s ease,border-color .3s ease,color .3s ease;
}
.faq-question:hover .faq-chevron{border-color:rgba(217,190,140,.6);}
.faq-item.is-open .faq-chevron{transform:rotate(180deg);background:var(--gold-deep);border-color:var(--gold-deep);color:var(--banda-texto);}
.faq-item.is-open .faq-question{color:var(--wine-texto);}
.faq-answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--ease);
}
.faq-item.is-open .faq-answer{grid-template-rows:1fr;}
.faq-answer-inner{overflow:hidden;}
.faq-answer-inner p{padding:0 30px 22px 4px;color:var(--espresso-70);font-size:var(--t-base);max-width:640px;margin:0;}

.hotspot{
  position:absolute;
  transform:translate(-50%,-50%);
  width:9.5%;height:9.5%;
  border-radius:50%;
  border:none;background:none;padding:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.hotspot::after{
  content:'';
  position:absolute;inset:0;
  border-radius:50%;
  border:2px solid var(--gold-soft);
  opacity:0;
  transform:scale(.75);
  transition:opacity .25s ease, transform .25s ease;
}
.hotspot:hover::after,.hotspot:focus-visible::after,.hotspot.is-active::after{
  opacity:1;
  transform:scale(1);
}
.hotspot-detail.is-changing .hotspot-detail-num{transform:scale(.8);}
.hotspot-detail.is-changing strong,.hotspot-detail.is-changing p{opacity:0;}
@media (prefers-reduced-motion: reduce){
  .hotspot::after,.hotspot-detail-num,.hotspot-detail strong,.hotspot-detail p{transition:none;}

}

/* =========================================================
   Bodas y eventos
   ========================================================= */
.events-section{background:var(--cream-2);}
.wave-divider{display:block;width:100%;line-height:0;background:var(--cream-2);margin-top:-1px;}
.wave-divider path{fill:var(--cream);}
.events-wrap{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:56px;
  align-items:center;
}
.events-photos{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:end;
}
.events-photo{border-radius:24px;overflow:hidden;box-shadow:0 24px 46px rgba(29,25,19,.2);}
.events-photo picture,.events-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.events-photo-a{aspect-ratio:3/4;align-self:start;}
.events-photo-b{aspect-ratio:3/4;transform:translateY(28px);}
.events-copy p{color:var(--espresso-70);font-size:var(--t-base);}
.events-facts{
  display:flex;gap:28px;flex-wrap:wrap;
  margin:26px 0 30px;
  padding:20px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.events-facts li{display:flex;flex-direction:column;gap:2px;}
.events-facts strong{font-family:var(--font-display);font-size:var(--t-xl);color:var(--wine-texto);}
.events-facts span{font-size:var(--t-sm);color:var(--espresso-50);}

.events-copy .form-success{position:static;display:none;margin-bottom:20px;border-radius:20px;padding:24px;background:rgba(59,69,48,.12);}
.events-copy .form-success.is-visible{display:flex;flex-direction:row;align-items:center;text-align:left;gap:16px;opacity:1;transform:none;pointer-events:auto;}
.events-copy .form-success .success-icon{margin-bottom:0;flex:none;width:52px;height:52px;}
.events-copy .form-success strong{display:block;margin-bottom:2px;}
.events-copy .form-success p{margin:0;font-size:var(--t-md);}

@media (max-width:900px){
  .events-wrap{grid-template-columns:1fr;}
  .events-photos{max-width:420px;margin-inline:auto;}

}
@media (max-width:560px){
  /* Las fotos se quedan en dos columnas tambien en movil: apiladas ocupaban
     casi 950px y alargaban muchisimo el final de la pagina. */
  .events-photos{grid-template-columns:1fr 1fr;gap:12px;max-width:none;}
  .events-photo-b{transform:translateY(18px);}

}

/* =========================================================
   Lo más solicitado — galería con fotos reales
   ========================================================= */
.showcase-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.showcase-card{
  position:relative;
  aspect-ratio:1/1;
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 22px 44px rgba(29,25,19,.2);
  isolation:isolate;
  border:none;
  padding:0;
  cursor:pointer;
  background:none;
  font-family:inherit;
  text-align:left;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.showcase-card:hover{transform:translateY(-4px);box-shadow:0 30px 54px rgba(29,25,19,.26);}
.showcase-card:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;}
.showcase-media{position:absolute;inset:0;}
.showcase-media picture,.showcase-media img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s var(--ease);
}
.showcase-card::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(20,18,13,.82) 0%, rgba(20,18,13,.28) 42%, rgba(20,18,13,0) 68%);
  z-index:1;
  transition:opacity .4s ease;
}
.showcase-card:hover .showcase-media img{transform:scale(1.09);}
.showcase-caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:22px 24px;
  z-index:2;
  color:var(--banda-texto);
}
.showcase-tag{
  display:inline-block;
  font-size:var(--t-xs);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--gold-soft);
  font-weight:700;
  margin-bottom:6px;
}
.showcase-caption h3{
  font-size:var(--t-lg);
  color:var(--banda-texto);
  margin:0;
}

@media (max-width:980px){
  .showcase-grid{grid-template-columns:repeat(2,1fr);}

}
@media (max-width:560px){
  /* En movil las cuatro fotos apiladas obligaban a bajar mucho. Pasan a
     deslizarse con el dedo: se ve una entera y asoma la siguiente, que es
     lo que invita a seguir pasando. Sin JavaScript. */
  .showcase-grid:not(.menu-grid-2){
    display:flex;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* Frena el gesto en el borde del carrusel. Sin esto, al llegar al
       extremo el deslizamiento se encadena al navegador y dispara el
       "atras", sacandote de la pagina en mitad de un desplazamiento. */
    overscroll-behavior-x:contain;
    touch-action:pan-x pan-y;
    /* el carrusel se sale del margen del contenedor para que la foto
       siguiente asome por el borde de la pantalla */
    padding-inline:24px;
    margin-inline:-24px;
    scroll-padding-inline:24px;
    padding-block:4px 6px;
  }
  .showcase-grid:not(.menu-grid-2)::-webkit-scrollbar{display:none;}
  .showcase-grid:not(.menu-grid-2) .showcase-card{
    flex:0 0 80%;
    scroll-snap-align:center;
  }
  /* al deslizar no tiene sentido el efecto de levantar al pasar el raton */
  .showcase-grid:not(.menu-grid-2) .showcase-card:hover{transform:none;}
  .showcase-grid.menu-grid-2{grid-template-columns:1fr;}

}

/* =========================================================
   Lightbox — detalle de tabla al hacer clic
   ========================================================= */
.lightbox{
  position:fixed;inset:0;
  z-index:1100;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.lightbox.is-open{opacity:1;pointer-events:auto;}
.lightbox-backdrop{
  position:absolute;inset:0;
  background:rgba(20,13,8,.74);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.lightbox-panel{
  position:relative;
  background:var(--paper);
  border-radius:28px;
  max-width:920px;width:100%;
  max-height:86vh;
  overflow:auto;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  box-shadow:0 50px 90px rgba(0,0,0,.4);
  transform:scale(.94) translateY(18px);
  transition:transform .4s var(--ease);
}
.lightbox.is-open .lightbox-panel{transform:scale(1) translateY(0);}
.lightbox-media{position:relative;min-height:320px;background:var(--cream-2);}
.lightbox-media img{width:100%;height:100%;object-fit:cover;display:block;}
.lightbox-info{padding:44px 40px;display:flex;flex-direction:column;justify-content:center;}
.lightbox-info h3{font-size:clamp(1.5rem,2.6vw,2rem);margin:8px 0 16px;}
.lightbox-info p{color:var(--espresso-70);font-size:var(--t-base);margin-bottom:26px;}
.lightbox-close{
  position:absolute;top:16px;right:16px;
  z-index:3;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.9);
  border:none;
  color:var(--espresso);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.2);
  transition:background .2s ease, transform .2s ease;
}
.lightbox-close:hover{background:var(--blanco);transform:scale(1.06);}

@media (max-width:780px){
  .lightbox-panel{grid-template-columns:1fr;max-height:92vh;}
  .lightbox-media{min-height:240px;}
  .lightbox-info{padding:30px 26px;}

}

/* =========================================================
   Scroll: barra de progreso + reveal al bajar
   ========================================================= */
.scroll-progress{
  position:fixed;
  top:0;left:0;
  height:3px;
  width:0%;
  background:linear-gradient(90deg,var(--gold),var(--wine));
  z-index:900;
  pointer-events:none;
}
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  will-change:transform,opacity;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.word-reveal{
  display:inline-block;
  opacity:0;
  transform:translateY(.4em);
  filter:blur(4px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
}
.word-reveal-wrap.is-revealed .word-reveal{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* =========================================================
   Hero — tarjetas flotantes (sustituyen a las ilustraciones)
   ========================================================= */
.hero-badge{
  position:absolute;z-index:2;
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  border-radius:18px;
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  box-shadow:0 18px 40px rgba(29,25,19,.16);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  animation:bob 8s ease-in-out infinite;
}
.hero-badge strong{display:block;font-family:var(--font-display);font-size:var(--t-base);font-weight:400;line-height:1.2;}
.hero-badge span{display:block;font-size:var(--t-sm);color:var(--espresso-70);line-height:1.35;}
.hero-badge-a{left:0;bottom:12%;transform:translateZ(110px);}
.hero-badge-b{right:2%;top:8%;flex-direction:column;align-items:flex-start;gap:2px;max-width:190px;transform:translateZ(90px);animation-delay:1.4s;}
.hero-badge-b strong{font-size:var(--t-2xl);color:var(--wine-texto);}
.hero-badge-dot{
  width:10px;height:10px;border-radius:50%;flex:none;
  background:var(--olive);
  box-shadow:0 0 0 5px rgba(59,69,48,.16);
}
@media (max-width:980px){
  .hero-badge{display:none;}

}

/* =========================================================
   Página de menús
   ========================================================= */
.nav-links a[aria-current="page"]{color:var(--wine-texto);}
.menu-jump-links{
  display:flex;justify-content:center;flex-wrap:wrap;gap:10px;
  margin-top:-18px;
}
/* Marrón tomado del reloj de arena del logotipo (#2E3624).
   Con texto blanco da 9,38:1 de contraste, muy por encima del mínimo. */
.menu-jump-links a{
  text-decoration:none;
  font-size:var(--t-md);font-weight:600;
  padding:11px 22px;border-radius:100px;
  background:var(--marron-logo);
  border:1px solid var(--marron-logo);
  color:#FFFFFF;
  box-shadow:0 6px 16px rgba(46,54,36,.22);
  transition:background .25s ease, border-color .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.menu-jump-links a:hover{
  background:var(--marron-logo-oscuro);
  border-color:var(--marron-logo-oscuro);
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(46,54,36,.3);
}
.menu-jump-links a:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;}
.showcase-grid.menu-grid-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:900px;margin-inline:auto;gap:28px;
}
@media (max-width:640px){
  .showcase-grid.menu-grid-2{grid-template-columns:1fr;}

}
.menu-ingredients-title{
  font-family:var(--font-body);
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);margin:18px 0 10px;
}
.menu-ingredients-list{display:grid;gap:6px;margin-bottom:14px;}
.menu-ingredients-list li{
  position:relative;padding-left:18px;font-size:var(--t-md);color:var(--espresso-70);
}
.menu-ingredients-list li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--gold-soft);
}
.menu-allergens-note,.menu-occasion-note{font-size:var(--t-sm);color:var(--espresso-50);margin-bottom:10px;}
.menu-occasion-note{font-style:italic;}

/* ---------- Bloques de menú (carta) ---------- */
.menu-tier{margin-bottom:54px;}
.menu-tier-label{
  display:flex;align-items:center;gap:16px;
  font-family:var(--font-display);font-style:italic;
  color:var(--wine-texto);font-size:var(--t-lg);margin-bottom:26px;
}
.menu-tier-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(165,125,67,.4),transparent);}

.menu-icon{
  width:46px;height:46px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(165,125,67,.1);color:var(--gold-deep);
  margin-bottom:16px;
}
.menu-icon svg{width:22px;height:22px;}

.menu-blocks-featured{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start;
}
.menu-block{
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-top:3px solid var(--gold);
  border-radius:var(--radius-lg);
  padding:34px 30px 30px;
  box-shadow:0 18px 40px rgba(29,25,19,.07);
  scroll-margin-top:120px;
}
.menu-block-head{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid rgba(165,125,67,.3);}
.menu-block-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(165,125,67,.35);
  font-family:var(--font-display);font-style:italic;color:var(--gold-deep);font-size:var(--t-sm);
  margin-bottom:16px;
}
.menu-block-head h2{font-size:clamp(1.5rem,2.2vw,1.85rem);margin-bottom:8px;}
.menu-block-head p{font-size:var(--t-md);color:var(--espresso-70);margin:0;}
.menu-options{display:grid;gap:0;margin-bottom:26px;flex:1;align-content:start;}
.menu-options li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;
  border-bottom:1px dashed var(--line);
  font-size:var(--t-base);
}
.menu-options li:last-child{border-bottom:0;}
.menu-options-compact{
  grid-template-columns:1fr 1fr;column-gap:24px;
}
.menu-options-compact li{
  flex-direction:column;align-items:flex-start;gap:4px;
  padding:9px 0;font-size:var(--t-md);border-bottom:1px dashed var(--line);
}
.menu-options-compact li .menu-price{margin-left:18px;}
@media (max-width:520px){
  .menu-options-compact{grid-template-columns:1fr;}

}
.menu-options li > span:first-child{position:relative;padding-left:18px;}
.menu-options li > span:first-child::before{
  content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--gold-soft);
}
.menu-price{
  flex:none;font-size:var(--t-sm);font-weight:600;color:var(--wine-texto);white-space:nowrap;margin-left:12px;
}
.menu-tbd{
  flex:none;font-size:var(--t-2xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;background:rgba(165,125,67,.12);color:var(--gold-deep);white-space:nowrap;
}
.menu-block-dark .menu-block-head{border-bottom-color:rgba(217,190,140,.35);}
.menu-block-dark .menu-block-num{color:var(--gold-soft);border-color:rgba(217,190,140,.4);}
.menu-block-dark .menu-block-head p{color:rgba(var(--banda-texto-rgb),.7);}
.menu-block-dark .menu-options li{border-bottom-color:rgba(var(--banda-texto-rgb),.15);}
.menu-block-dark .menu-price{color:var(--gold-soft);}
.menu-block-dark .menu-tbd{background:rgba(217,190,140,.18);color:var(--gold-soft);}
.menu-block-dark .menu-icon{background:rgba(217,190,140,.18);color:var(--gold-soft);}

/* ---------- Complementos (tarjetas compactas en masonry) ---------- */
.menu-blocks-addons{
  columns:2 260px;column-gap:22px;
}
.menu-block-addon{
  break-inside:avoid;display:inline-block;width:100%;margin-bottom:22px;vertical-align:top;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:26px 24px 22px;box-shadow:0 10px 26px rgba(29,25,19,.06);
  transition:transform .25s ease, box-shadow .25s ease;
  scroll-margin-top:120px;
}
.menu-block-addon:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(29,25,19,.1);}
.menu-block-addon .menu-block-head{margin-bottom:14px;padding-bottom:0;border-bottom:0;}
.menu-block-addon .menu-block-head h3{font-family:var(--font-display);font-size:var(--t-lg);margin-bottom:4px;}
.menu-block-addon .menu-block-head p{font-size:var(--t-sm);}
.menu-block-addon .menu-options{margin-bottom:0;}
.menu-block-addon .menu-options li{padding:8px 0;font-size:var(--t-md);}
.menu-block-addon .menu-block-cta{margin-top:16px;display:block;}
.menu-block-addon .menu-block-cta a{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-sm);font-weight:600;color:var(--wine-texto);text-decoration:none;
}
.menu-block-addon .menu-block-cta a::after{content:'→';transition:transform .2s ease;}
.menu-block-addon .menu-block-cta a:hover::after{transform:translateX(4px);}
@media (max-width:520px){
  .menu-blocks-addons{columns:1;}

}

/* ---------- Cenas privadas: banner de cierre ---------- */
.menu-banner-dark{
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  background:var(--banda);color:var(--banda-texto);
  border-radius:var(--radius-lg);
  padding:38px 42px;
  scroll-margin-top:120px;
}
.menu-banner-dark .menu-banner-text{display:flex;align-items:flex-start;gap:20px;flex:1;min-width:260px;}
.menu-banner-dark .menu-icon{margin-bottom:0;background:rgba(217,190,140,.18);color:var(--gold-soft);}
.menu-banner-dark h2{font-size:clamp(1.4rem,2.4vw,1.7rem);margin-bottom:6px;}
.menu-banner-dark p{margin:0;color:rgba(var(--banda-texto-rgb),.72);font-size:var(--t-md);}
.menu-banner-dark .btn-whatsapp{flex:none;}
@media (max-width:640px){
  .menu-banner-dark{padding:30px 26px;}
  .menu-banner-dark .btn-whatsapp{width:100%;}

}

.menu-conditions{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:30px;
}
.menu-condition{
  display:flex;gap:16px;align-items:flex-start;
  padding:22px 24px;border-radius:var(--radius-md);
  background:var(--glass-bg);border:1px solid rgba(165,125,67,.28);
}
.menu-condition svg{width:26px;height:26px;flex:none;color:var(--gold-deep);margin-top:2px;}
.menu-condition h3{font-size:var(--t-lg);margin-bottom:4px;}
.menu-condition p{margin:0;font-size:var(--t-md);color:var(--espresso-70);}
@media (max-width:980px){
  .menu-blocks-featured{grid-template-columns:1fr;max-width:620px;margin-inline:auto;}
  .menu-blocks-addons{max-width:620px;margin-inline:auto;}
  .menu-conditions{grid-template-columns:1fr;max-width:620px;margin-inline:auto;}

}

/* =========================================================
   Página "Pedir catering" (catálogo)
   ========================================================= */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:501;
  background:var(--banda);color:rgba(var(--banda-texto-rgb),.82);
  font-size:var(--t-sm);letter-spacing:.02em;
}
.topbar-inner{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;padding-block:8px;text-align:center;}
.topbar strong{color:var(--gold-soft);font-weight:600;}
.topbar-sep{color:rgba(217,190,140,.6);}
.site-header-topbar{top:34px;}
@media (max-width:640px){
  .topbar-inner{gap:2px 8px;font-size:var(--t-xs);}
  .topbar-inner span:nth-child(n+4),.topbar-sep{display:none;}
  .topbar-inner{flex-direction:column;}
  .site-header-topbar{top:32px;}

}
.catalogo-banner{
  margin-top:0;padding:206px 0 56px;
  background:
    radial-gradient(600px 300px at 85% 0%, rgba(217,190,140,.22), transparent 60%),
    linear-gradient(180deg,#232A1B,#2E3624);
  color:var(--banda-texto);
}
.catalogo-banner .kicker{color:var(--gold-soft);}
.catalogo-banner h1{font-size:clamp(2.2rem,4.4vw,3.4rem);margin:0;color:var(--banda-texto);}
.catalogo{padding-top:44px;}
.catalogo-intro{max-width:760px;font-size:var(--t-lg);color:var(--espresso-70);margin-bottom:26px;}
.cat-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px;}
.cat-chip{
  border:1px solid rgba(165,125,67,.35);background:var(--glass-bg);
  color:var(--espresso);font-size:var(--t-md);font-weight:500;
  padding:10px 18px;border-radius:100px;cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.cat-chip:hover{border-color:var(--espresso);}
.cat-chip.is-active{background:var(--banda);color:var(--banda-texto);border-color:var(--banda);}

.catalogo-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start;}
.catalogo-main{scroll-margin-top:130px;}
.catalogo-toolbar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid var(--line);
  font-size:var(--t-md);color:var(--espresso-50);
}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;color:var(--espresso);font-weight:500;}
.switch input{position:absolute;opacity:0;width:1px;height:1px;}
.switch-track{width:38px;height:22px;border-radius:100px;background:rgba(29,25,19,.18);position:relative;transition:background .25s ease;flex:none;}
.switch-track::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--blanco);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s var(--ease);}
.switch input:checked + .switch-track{background:var(--olive);}
.switch input:checked + .switch-track::after{transform:translateX(16px);}
.switch input:focus-visible + .switch-track{outline:3px solid var(--gold-deep);outline-offset:2px;}

.producto-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.producto{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.producto:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(29,25,19,.12);}
.producto-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--cream-2);}
.producto-media picture,.producto-media img{width:100%;height:100%;object-fit:cover;display:block;}
.producto-media img{transition:transform .6s var(--ease);filter:saturate(1.08) contrast(1.05);}
.producto:hover .producto-media img{transform:scale(1.04);}
/* Placa de marca para los productos que aun no tienen foto.
   Antes era un icono gris con la palabra "Proximamente", que ademas
   confundia: el producto SI se vende, lo que falta es la foto. Ahora es
   una placa compuesta, con el nombre bien puesto y la textura de la casa. */
.producto-placeholder{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  background:
    radial-gradient(ellipse at 50% 24%, rgba(217,190,140,.20), transparent 62%),
    repeating-linear-gradient(135deg, rgba(46,54,36,.040) 0 1px, transparent 1px 10px),
    linear-gradient(165deg, var(--cream-2) 0%, var(--paper) 52%, var(--cream-2) 100%);
  color:var(--gold);
  position:relative;
  padding:16% 12%;
  text-align:center;
  overflow:hidden;
}
/* filete fino arriba y abajo, como una tarjeta impresa */
.producto-placeholder::after{
  content:'';position:absolute;inset:11% 9%;
  border-top:1px solid rgba(165,125,67,.26);
  border-bottom:1px solid rgba(165,125,67,.26);
  pointer-events:none;
}
.producto-placeholder::before{
  content:'';position:absolute;width:54%;aspect-ratio:1/1;border-radius:50%;
  border:1px solid rgba(165,125,67,.20);
  top:50%;left:50%;transform:translate(-50%,-52%);
}
.producto-placeholder svg{width:17%;height:17%;position:relative;z-index:1;opacity:.5;margin-bottom:9px;}
.producto-placeholder span{
  font-size:var(--t-3xs);letter-spacing:.30em;text-transform:uppercase;font-weight:700;
  color:var(--gold-deep);opacity:.78;position:relative;z-index:1;
  padding-left:.30em;
}
/* En la rejilla de tienda el nombre ya va justo debajo de la foto, asi que
   en la placa sobra: se quedan el sello y la filigrana. En las paginas de box
   el texto va al lado, no debajo, y alli el nombre si hace falta. */
.producto-media .producto-placeholder small{display:none;}
.producto-media .producto-placeholder svg{width:22%;height:22%;margin-bottom:12px;}
.producto-media .producto-placeholder span{font-size:var(--t-3xs);}

.producto-placeholder small{
  display:block;margin-top:7px;font-family:var(--font-display);font-style:normal;
  font-size:clamp(.92rem,2.1vw,1.12rem);line-height:1.22;
  color:var(--espresso);font-weight:400;letter-spacing:0;text-transform:none;
  position:relative;z-index:1;
}
.producto-tags{position:absolute;top:12px;left:12px;display:flex;flex-wrap:wrap;gap:6px;}
.producto-tag{
  font-size:var(--t-2xs);font-weight:600;letter-spacing:.04em;
  padding:5px 10px;border-radius:100px;
  background:rgba(var(--paper-rgb),.92);color:var(--wine-texto);
  box-shadow:0 2px 8px rgba(29,25,19,.1);
}
.producto-tag-veg{color:var(--olive);}
.producto-body{display:flex;flex-direction:column;flex:1;padding:18px 18px 18px;}
.producto-body h3{font-size:var(--t-lg);line-height:1.2;margin-bottom:6px;}
.producto-desc{font-size:var(--t-sm);color:var(--espresso-70);line-height:1.5;margin-bottom:14px;}
.producto-alergenos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.producto-alergeno{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:22px;padding:0 6px;border-radius:6px;
  background:var(--cream-2);color:var(--espresso-50);
  font-size:var(--t-3xs);font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  border:1px solid var(--line);cursor:default;
}
.producto-alergeno.is-ok{background:rgba(122,143,90,.14);color:var(--olive);border-color:rgba(122,143,90,.3);}
.producto-precio{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;margin-bottom:14px;}
.producto-precio strong{font-family:var(--font-display);font-size:var(--t-xl);font-weight:400;color:var(--wine-texto);}
.producto-precio .producto-consultar{font-size:var(--t-base);font-style:italic;color:var(--gold-deep);}
.producto-precio span{font-size:var(--t-sm);color:var(--espresso-50);}
.producto-acciones{display:flex;gap:10px;align-items:stretch;}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:100px;background:var(--blanco);flex:none;}
.qty button{width:34px;height:40px;border:0;background:none;font-size:var(--t-lg);cursor:pointer;color:var(--espresso);}
.qty button:hover{color:var(--wine-texto);}
.qty input{width:30px;border:0;text-align:center;font:inherit;font-weight:600;background:none;-moz-appearance:textfield;}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.producto-btn{flex:1;padding:10px 14px;font-size:var(--t-md);}
/* En movil el catalogo arranca con unas pocas fichas y el resto se despliega
   con este boton: 25 productos de golpe hacian una pagina sin fin. */
.catalogo-mas{margin-top:18px;}
.catalogo-mas[hidden]{display:none;}
@media (min-width:561px){
  .catalogo-mas{display:none;}

}

.catalogo-vacio{grid-column:1/-1;text-align:center;color:var(--espresso-50);padding:40px 0;}

.catalogo-side{position:sticky;top:130px;display:grid;gap:18px;}
.side-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:22px;
}
.side-card h2{font-size:var(--t-lg);margin-bottom:14px;}
.side-calc{background:linear-gradient(160deg,#EAD9BF,#E2CCA9);border-color:transparent;}
.radio{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;cursor:pointer;}
.radio input{margin-top:4px;accent-color:var(--wine-texto);}
.radio strong{display:block;font-size:var(--t-md);}
.radio small{display:block;font-size:var(--t-sm);color:var(--espresso-70);}
.side-field{display:grid;gap:6px;font-size:var(--t-sm);font-weight:600;margin:6px 0 12px;}
.side-field input{padding:10px 12px;border:1px solid rgba(29,25,19,.2);border-radius:10px;font:inherit;background:var(--blanco);}
.calc-result{font-size:var(--t-md);margin-bottom:6px;}
.calc-result strong{color:var(--wine-texto);}
.calc-note{font-size:var(--t-xs);color:var(--espresso-70);margin:0;}
.side-cats button.is-active{background:rgba(29,25,19,.08);color:var(--wine-texto);font-weight:600;}
.side-card-dark{background:var(--banda);color:var(--banda-texto);border-color:transparent;}
.side-card-dark p{font-size:var(--t-md);color:rgba(var(--banda-texto-rgb),.75);}

@media (max-width:1100px){
  .producto-grid{grid-template-columns:repeat(2,minmax(0,1fr));}

}
@media (max-width:980px){
  .catalogo-layout{grid-template-columns:1fr;}
  .catalogo-side{position:static;order:-1;grid-template-columns:1fr;}
  .catalogo-side .side-card:not(.side-calc){display:none;}

}
@media (max-width:560px){
  /* Catalogo compacto: 25 fichas de 410px hacian una pagina interminable.
     Foto algo mas baja, textos ajustados y precio en una sola linea. */
  .producto-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .producto-media{aspect-ratio:4/3;}
  .producto-body{padding:10px 10px 11px;}
  .producto-body h3{font-size:var(--t-md);line-height:1.18;margin-bottom:4px;}
  .producto-desc{display:none;}
  .producto-formato{font-size:var(--t-3xs);letter-spacing:.06em;line-height:1.25;margin-bottom:4px;}
  .producto-alergenos{margin-bottom:6px;}
  .producto-precio{flex-direction:row;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:9px;}
  .producto-precio strong{font-size:var(--t-lg);}
  .producto-precio span{font-size:var(--t-2xs);}
  .producto-en-carrito{font-size:var(--t-xs);margin-top:6px;}
  .producto-acciones{flex-direction:column;}
  .producto-btn{padding:9px 10px;font-size:var(--t-sm);}
  .qty{justify-content:space-between;}
  .cat-chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;margin-inline:-24px;padding-inline:24px;scrollbar-width:none;}
  .cat-chip{flex:none;}

}
.site-header-topbar .glass-nav{background:rgba(var(--paper-rgb),.92);}

/* =========================================================
   Tienda a domicilio v2
   ========================================================= */
.no-scroll,.no-scroll body{overflow:hidden;}
.topbar-inner{justify-content:space-between;}
.topbar-cp{display:flex;align-items:center;gap:8px;position:relative;}
.topbar-cp label{color:rgba(var(--banda-texto-rgb),.7);}
.topbar-cp input{
  width:118px;padding:4px 10px;border-radius:100px;border:1px solid rgba(217,190,140,.45);
  background:rgba(var(--paper-rgb),.08);color:var(--banda-texto);font:inherit;font-size:var(--t-xs);
}
.topbar-cp input::placeholder{color:rgba(var(--banda-texto-rgb),.45);}
.topbar-cp .cp-result{
  position:absolute;right:0;top:calc(100% + 8px);width:280px;max-width:calc(100vw - 32px);
  background:var(--paper);color:var(--espresso);padding:10px 12px;border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);font-size:var(--t-sm);line-height:1.4;
}
.topbar-cp .cp-result:empty{display:none;}
.cp-result{font-size:var(--t-sm);margin:6px 0 0;}
.cp-result.is-ok{color:#2E5C45;}
.cp-result.is-ok::before{content:'✓ ';font-weight:700;}
.cp-result.is-maybe{color:var(--gold-deep);}
.cp-result.is-no{color:var(--error);}
@media (max-width:760px){
  .topbar-inner{flex-direction:column!important;gap:4px;padding-block:6px;}
  .topbar-inner > span{font-size:var(--t-2xs);}
  .topbar-cp label{display:none;}
  .topbar-cp input{width:140px;padding:3px 10px;}
  .topbar-cp .cp-result{right:auto;left:50%;transform:translateX(-50%);}
  .site-header-topbar{top:58px;}
  .catalogo-banner{padding-top:190px!important;}

}

.cart-btn{
  position:relative;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(165,125,67,.35);background:var(--paper);color:var(--espresso);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .25s var(--ease),background .25s ease;
}
.cart-btn:hover{transform:translateY(-2px);background:var(--blanco);}
.cart-btn svg{width:21px;height:21px;}
.cart-count{
  position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:100px;
  background:var(--wine);color:#fff;font-size:var(--t-2xs);font-weight:700;display:flex;align-items:center;justify-content:center;
}
.cart-count.bump{animation:bump .45s var(--ease);}
@keyframes bump{
  40%{transform:scale(1.35);}

}

.catalogo-banner-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;}
.catalogo-banner-lede{color:rgba(var(--banda-texto-rgb),.78);font-size:var(--t-lg);max-width:520px;margin:16px 0 0;}
.pasos-pedido{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.pasos-pedido li{
  display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:16px;
  background:rgba(var(--paper-rgb),.06);border:1px solid rgba(217,190,140,.25);
}
.pasos-pedido li > span{
  flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--gold-soft);color:var(--espresso);font-family:var(--font-display);font-weight:400;
}
.pasos-pedido strong{display:block;font-family:var(--font-display);font-size:var(--t-base);}
.pasos-pedido small{display:block;color:rgba(var(--banda-texto-rgb),.7);font-size:var(--t-sm);}
@media (max-width:900px){
  .catalogo-banner-grid{grid-template-columns:1fr;gap:26px;}

}

.promesas{background:var(--paper);border-bottom:1px solid var(--line);}
.promesas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:26px;}
.promesas-grid > div{display:flex;gap:12px;align-items:flex-start;}
.promesas-grid svg{width:26px;height:26px;flex:none;color:var(--gold);margin-top:2px;}
.promesas-grid p{margin:0;font-size:var(--t-sm);color:var(--espresso-70);line-height:1.45;}
.promesas-grid strong{display:block;color:var(--espresso);font-size:var(--t-md);margin-bottom:2px;}
@media (max-width:900px){
  .promesas-grid{grid-template-columns:1fr 1fr;}

}
@media (max-width:520px){
  .promesas-grid{grid-template-columns:1fr;gap:14px;}

}

.catalogo-toolbar{flex-wrap:wrap;gap:12px 18px;}
.buscar{position:relative;flex:1 1 240px;}
.buscar svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--espresso-50);}
.buscar input{
  width:100%;padding:11px 14px 11px 40px;border-radius:100px;border:1px solid var(--line);
  background:var(--blanco);font:inherit;font-size:var(--t-md);
}
.buscar input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,190,140,.2);}
.orden{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--espresso-70);}
.orden select{padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--blanco);font:inherit;font-size:var(--t-sm);}
.catalogo-count{font-size:var(--t-sm);color:var(--espresso-50);margin-left:auto;}

/* tarjeta v2 */
.producto-media{border:0;padding:0;cursor:pointer;width:100%;display:block;font:inherit;text-align:inherit;}
.producto-ver{
  position:absolute;left:50%;bottom:14px;transform:translate(-50%,8px);opacity:0;
  background:rgba(29,25,19,.82);color:var(--banda-texto);font-size:var(--t-sm);font-weight:600;
  padding:7px 14px;border-radius:100px;transition:opacity .3s ease,transform .3s var(--ease);white-space:nowrap;
}
.producto:hover .producto-ver,.producto-media:focus-visible .producto-ver{opacity:1;transform:translate(-50%,0);}
.producto-formato{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin:0 0 6px;}
.producto-body h3 button{all:unset;cursor:pointer;}
.producto-body h3 button:hover{color:var(--wine-texto);}
.producto-body h3 button:focus-visible{outline:3px solid var(--gold-deep);outline-offset:2px;}
.producto-en-carrito{display:block;margin-top:10px;font-size:var(--t-sm);color:#2E5C45;font-weight:600;}
.producto-en-carrito::before{content:'✓ ';}
.producto-placeholder small{max-width:80%;text-align:center;line-height:1.3;}
.catalogo-vacio{grid-column:1/-1;text-align:center;padding:50px 0;color:var(--espresso-50);}

/* ficha */
.ficha,.cesta{position:fixed;inset:0;z-index:900;}
.ficha-backdrop,.cesta-backdrop{position:absolute;inset:0;background:rgba(26,16,9,.55);opacity:0;transition:opacity .3s ease;backdrop-filter:blur(3px);}
.ficha.is-open .ficha-backdrop,.cesta.is-open .cesta-backdrop{opacity:1;}
.ficha-panel{
  position:absolute;left:50%;top:50%;width:min(1040px,calc(100% - 32px));max-height:calc(100% - 48px);
  overflow:auto;background:var(--paper);border-radius:26px;box-shadow:0 40px 80px rgba(0,0,0,.3);
  transform:translate(-50%,-46%);opacity:0;transition:transform .35s var(--ease),opacity .3s ease;
}
.ficha.is-open .ficha-panel{transform:translate(-50%,-50%);opacity:1;}
.ficha-cerrar{
  position:absolute;top:14px;right:14px;z-index:2;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:rgba(var(--paper-rgb),.95);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--espresso);
}
.ficha-grid{display:grid;grid-template-columns:1fr 1.1fr;}
.ficha-media{position:sticky;top:0;align-self:start;aspect-ratio:1/1;background:var(--cream-2);}
.ficha-media picture,.ficha-media img{width:100%;height:100%;object-fit:cover;display:block;}
.ficha-info{padding:40px 40px 34px;}
.ficha-info h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:6px;}
.ficha-formato{color:var(--espresso-50);font-size:var(--t-md);margin-bottom:16px;}
.ficha-precio{display:flex;align-items:baseline;gap:12px;padding:14px 0;border-block:1px solid var(--line);margin-bottom:22px;}
.ficha-precio strong{font-family:var(--font-display);font-size:var(--t-3xl);font-weight:400;color:var(--wine-texto);}
.ficha-precio span{font-size:var(--t-sm);color:var(--espresso-50);}
.ficha-texto p{font-size:var(--t-base);line-height:1.7;color:var(--espresso-70);}
.ficha-info h3{font-family:var(--font-body);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin:24px 0 10px;}
.ficha-ingredientes{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;}
.ficha-ingredientes li{position:relative;padding-left:16px;font-size:var(--t-md);}
.ficha-ingredientes li::before{content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--gold-soft);}
.ficha-alergenos{display:flex;flex-wrap:wrap;gap:8px;}
.ficha-alergenos li{font-size:var(--t-sm);font-weight:600;padding:5px 12px;border-radius:100px;background:rgba(29,25,19,.08);color:var(--wine-texto);}
.ficha-nota{font-size:var(--t-sm);color:var(--espresso-50);margin:10px 0 0;}
.ficha-datos{margin:22px 0 0;display:grid;gap:12px;}
.ficha-datos div{display:grid;grid-template-columns:120px 1fr;gap:12px;font-size:var(--t-md);}
.ficha-datos dt{font-weight:600;}
.ficha-datos dd{margin:0;color:var(--espresso-70);}
.ficha-comprar{
  position:sticky;bottom:0;display:flex;gap:12px;align-items:center;
  margin:26px -40px -34px;padding:16px 40px;background:rgba(var(--paper-rgb),.96);border-top:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.ficha-comprar .btn{flex:1;}
.ficha-rel-titulo{margin-top:34px!important;}
.ficha-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.ficha-rel-item{border:1px solid var(--line);background:var(--blanco);border-radius:14px;overflow:hidden;padding:0 0 10px;cursor:pointer;text-align:left;font:inherit;}
.ficha-rel-item picture,.ficha-rel-item img,.ficha-rel-item .producto-placeholder{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:flex;}
.ficha-rel-item .producto-placeholder span,.ficha-rel-item .producto-placeholder small{display:none;}
.ficha-rel-item > span{display:block;font-size:var(--t-sm);font-weight:600;padding:8px 10px 0;line-height:1.25;}
.ficha-rel-item small{display:block;padding:2px 10px 0;color:var(--wine-texto);font-size:var(--t-sm);}
@media (max-width:820px){
  .ficha-panel{top:auto;bottom:0;left:0;width:100%;max-height:92%;border-radius:24px 24px 0 0;transform:translateY(40px);}
  .ficha.is-open .ficha-panel{transform:none;}
  .ficha-grid{grid-template-columns:1fr;}
  .ficha-media{position:relative;aspect-ratio:4/3;}
  .ficha-info{padding:26px 22px 24px;}
  .ficha-comprar{margin:22px -22px -24px;padding:14px 22px;}
  .ficha-ingredientes{grid-template-columns:1fr;}
  .ficha-datos div{grid-template-columns:1fr;gap:2px;}

}

/* cesta */
.cesta-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(460px,100%);
  background:var(--paper);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.25);
  transform:translateX(100%);transition:transform .35s var(--ease);
}
.cesta.is-open .cesta-panel{transform:none;}
.cesta-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line);}
.cesta-head h2{margin:0;font-size:var(--t-xl);}
.cesta-head .ficha-cerrar{position:static;}
.cesta-body{overflow:auto;padding:18px 22px 30px;flex:1;}
.cesta-vacia{text-align:center;padding:30px 10px;color:var(--espresso-70);}
.cesta-vacia p:first-child{font-family:var(--font-display);font-size:var(--t-lg);color:var(--espresso);}
.cesta-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center;}
.cesta-thumb{width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--cream-2);}
.cesta-thumb picture,.cesta-thumb img,.cesta-thumb .producto-placeholder{width:100%;height:100%;object-fit:cover;}
.cesta-thumb .producto-placeholder span,.cesta-thumb .producto-placeholder small{display:none;}
.cesta-thumb .producto-placeholder svg{width:50%;height:50%;}
.cesta-item-info strong{display:block;font-size:var(--t-md);line-height:1.25;}
.cesta-item-info > span{display:block;font-size:var(--t-xs);color:var(--espresso-50);margin-bottom:6px;}
.qty-sm{display:inline-flex;height:32px;}
.qty-sm button{width:30px;height:30px;}
.qty-sm span{min-width:22px;text-align:center;font-weight:600;font-size:var(--t-md);}
.cesta-item-precio{text-align:right;font-weight:600;font-size:var(--t-md);}
.cesta-item-precio em{font-weight:500;color:var(--gold-deep);font-size:var(--t-sm);}
.cesta-quitar{display:block;margin-left:auto;margin-top:6px;border:0;background:none;color:var(--espresso-50);font-size:var(--t-xs);text-decoration:underline;cursor:pointer;}
.cesta-resumen{padding:16px 0 6px;}
.cesta-total{display:flex;justify-content:space-between;align-items:baseline;}
.cesta-total strong{font-family:var(--font-display);font-size:var(--t-2xl);font-weight:400;color:var(--wine-texto);}
.cesta-consultar{font-size:var(--t-sm);color:var(--gold-deep);margin:0;}
.cesta-progreso{height:6px;border-radius:100px;background:rgba(29,25,19,.1);margin:12px 0 8px;overflow:hidden;}
.cesta-progreso span{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,var(--gold-soft),var(--olive));border-radius:inherit;transition:width .5s var(--ease);}
.cesta-progreso-texto{font-size:var(--t-sm);color:var(--espresso-70);}
.cesta-form{border-top:1px solid var(--line);padding-top:18px;margin-top:8px;}
.cesta-form .field{margin-bottom:12px;}
.cesta-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.field-hint{font-size:var(--t-sm);color:var(--espresso-50);margin:-6px 0 12px;}
.modo{border:0;padding:0;margin:0 0 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.modo legend{font-weight:600;font-size:var(--t-md);margin-bottom:8px;}
.modo label{cursor:pointer;}
.modo input{position:absolute;opacity:0;}
.modo span{display:block;text-align:center;padding:11px 8px;border-radius:12px;border:1px solid var(--line);font-size:var(--t-sm);font-weight:500;background:var(--blanco);}
.modo input:checked + span{border-color:var(--wine-texto);background:rgba(29,25,19,.06);color:var(--wine-texto);font-weight:600;}
.modo input:focus-visible + span{outline:3px solid var(--gold-deep);outline-offset:2px;}
.cesta-form.is-recogida .solo-domicilio{display:none;}
.cesta-ok{text-align:center;padding:24px 8px;display:grid;gap:10px;}
.cesta-ok strong{font-family:var(--font-display);font-size:var(--t-xl);}
.cesta-ok p{color:var(--espresso-70);font-size:var(--t-md);}
.cesta-form .field-error{display:none;}
.cesta-form .has-error .field-error{display:block;}

.cart-bar{
  position:fixed;left:16px;right:96px;bottom:calc(18px + var(--alto-cookies,0px));z-index:900;
  transition:bottom .35s var(--ease);
  display:none;justify-content:space-between;align-items:center;gap:10px;
  padding:14px 18px;border-radius:100px;border:0;cursor:pointer;
  background:var(--banda);color:var(--banda-texto);font:inherit;font-size:var(--t-md);
  box-shadow:0 14px 30px rgba(29,25,19,.35);
}
.cart-bar strong{color:var(--gold-soft);}
@media (max-width:1300px){
  .cart-bar:not([hidden]){display:flex;}

}

.toast{
  position:fixed;left:50%;bottom:calc(28px + var(--alto-cookies,0px));z-index:950;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:14px;padding:12px 14px 12px 20px;border-radius:100px;
  background:var(--banda);color:var(--banda-texto);font-size:var(--t-md);box-shadow:0 18px 40px rgba(0,0,0,.3);
  transition:opacity .3s ease,transform .3s var(--ease);max-width:calc(100% - 32px);
}
.toast.is-visible{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
.toast button{border:0;background:var(--gold-soft);color:var(--espresso);font-weight:600;font-size:var(--t-sm);padding:7px 14px;border-radius:100px;cursor:pointer;white-space:nowrap;}
@media (max-width:1300px){
  .toast{bottom:calc(84px + var(--alto-cookies,0px));}

}

.entrega{background:var(--paper);}
.entrega-wrap{align-items:center;}
.entrega-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.entrega-item{padding:22px;border-radius:var(--radius-md);background:var(--cream);border:1px solid var(--line);}
.entrega-item h3{font-size:var(--t-base);margin:10px 0 6px;}
.entrega-item p{font-size:var(--t-md);color:var(--espresso-70);margin:0;}
@media (max-width:900px){
  .entrega-wrap{grid-template-columns:1fr;}
  .entrega-wrap .banner-photos{order:-1;width:100%;max-width:420px;margin:0 auto 8px;}

}
@media (max-width:520px){
  .entrega-grid{grid-template-columns:1fr;}

}

@media (max-width:560px){
  .producto-ver{display:none;}
  .producto-acciones .btn{font-size:var(--t-sm);padding:10px 8px;white-space:normal;}
  .catalogo-toolbar .switch{font-size:var(--t-sm);}
  .orden{width:100%;}
  .orden select{flex:1;}
  .catalogo-count{margin-left:0;}

}
.cart-count[hidden]{display:none;}
.cesta.is-open ~ .toast{opacity:0;pointer-events:none;}
.t-short{display:none;}
@media (max-width:760px){
  .topbar-inner{flex-direction:row!important;justify-content:space-between;gap:8px;padding-block:7px;}
  .t-long{display:none;}
  .t-short{display:inline;}
  .topbar-cp input{width:112px;}
  .topbar-cp .cp-result{right:0;transform:none;width:min(280px,calc(100vw - 32px));}
  .site-header-topbar{top:40px;}
  .catalogo-banner{padding-top:160px!important;}
  .toast{left:16px;right:16px;transform:translateY(20px);justify-content:space-between;}
  .toast.is-visible{transform:none;}
  .cart-bar{font-size:var(--t-sm);white-space:nowrap;padding:14px 16px;}

}
@media (max-width:760px){
  .topbar-inner{flex-wrap:nowrap!important;}
  .topbar-inner > span{white-space:nowrap;}
  .topbar-cp input{width:104px;}

}
@media (max-width:480px){
  .catalogo-banner h1{font-size:var(--t-3xl);}

}
.domicilio-card{
  display:grid;grid-template-columns:1.05fr .95fr;gap:0;overflow:hidden;
  border-radius:var(--radius-lg);background:var(--banda);color:var(--banda-texto);
  box-shadow:0 30px 60px rgba(29,25,19,.2);
}
.domicilio-copy{padding:56px 52px;}
.domicilio-copy .kicker{color:var(--gold-soft);}
.domicilio-copy h2{font-size:clamp(2rem,3.6vw,2.8rem);color:var(--banda-texto);}
.domicilio-copy > p{color:rgba(var(--banda-texto-rgb),.78);font-size:var(--t-base);}
.domicilio-puntos{display:grid;gap:8px;margin:18px 0 28px;}
.domicilio-puntos li{position:relative;padding-left:26px;font-size:var(--t-md);}
.domicilio-puntos li::before{content:'✓';position:absolute;left:0;color:var(--gold-soft);font-weight:700;}
.domicilio-nota{font-size:var(--t-sm);color:rgba(var(--banda-texto-rgb),.55);margin:14px 0 0;}
.domicilio-fotos{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px;align-items:start;}
.domicilio-fotos picture{display:block;width:100%;aspect-ratio:3/4;}
.domicilio-fotos img{width:100%;height:100%;object-fit:cover;border-radius:18px;display:block;}
.domicilio-fotos picture:last-child{margin-top:40px;}
@media (max-width:860px){
  .domicilio-card{grid-template-columns:1fr;}
  .domicilio-copy{padding:36px 26px;}
  .domicilio-fotos{height:auto;}

}

/* =========================================================
   Pulido de navegación y usabilidad
   ========================================================= */
html{scroll-padding-top:118px;}
[id]{scroll-margin-top:118px;}
.nav-cta-mobile{display:none;}
@media (max-width:1300px){
  .nav-links{
    background:rgba(var(--paper-rgb),.985)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    padding:10px 10px 14px!important;
    max-height:calc(100vh - 110px);overflow:auto;
    box-shadow:0 30px 60px rgba(29,25,19,.25)!important;
  }
  .nav-links li:not(.nav-cta-mobile){border-bottom:1px solid var(--line);}
  .nav-links a:not(.btn){display:block;padding:15px 12px!important;font-size:var(--t-base) !important;color:var(--espresso)!important;font-weight:500;}
  .nav-links a[aria-current="page"]{color:var(--wine-texto)!important;}
  .nav-cta-mobile{display:grid;gap:10px;padding:16px 4px 2px;}
  .nav-cta-mobile .btn{padding:14px 20px!important;font-size:var(--t-base) !important;}

}
/* Eventos: fotos fijas mientras se lee el formulario */
@media (min-width:981px){
  .events-wrap{align-items:start;}
  .events-photos{position:sticky;top:120px;}
}
/* Cookies: barra compacta en móvil */
@media (max-width:640px){
  .cookie-banner{left:12px;right:12px;bottom:12px;padding:14px 16px;border-radius:18px;background:rgba(var(--paper-rgb),.98);}
  .cookie-banner p{font-size:var(--t-sm);line-height:1.45;margin-bottom:10px;}
  .cookie-actions{flex-wrap:nowrap;}
  .cookie-actions .btn{flex:1;padding:10px 12px;}
}
/* Hero: datos en 3 columnas sin saltos */
.hero-meta{display:grid!important;grid-template-columns:repeat(3,auto);justify-content:start;}
@media (max-width:420px){
  .hero-meta div{padding:0 14px;}
  .hero-meta strong{font-size:var(--t-lg);}

}
/* Selector de días en cuadrícula de 7 */
.day-picker{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;}
.day-chip{width:auto!important;}
.reserva-wrap > *,.events-wrap > *,.experience-inner > *{min-width:0;}
@media (max-width:980px){
  .reserva-wrap{grid-template-columns:minmax(0,1fr)!important;}

}
@media (max-width:480px){
  .reserva-form-side,.reserva-side{padding:28px 18px!important;}
  .day-picker{gap:4px;}
  .day-chip{padding:8px 0 9px!important;border-radius:10px!important;}
  .day-chip .num{font-size:var(--t-base);}
  .day-chip .dow{font-size:var(--t-3xs);}

}
.nav-cta-mobile .btn-primary{color:var(--banda-texto)!important;}
.nav-cta-mobile .btn-outline{color:var(--espresso)!important;background:var(--blanco);}
.nav-cta-mobile a::after{display:none!important;}
.legal{padding-left:24px!important;padding-right:24px!important;}

/* =========================================================
   Menús → enlaces a las páginas de cada box
   ========================================================= */
.menu-block-link{text-decoration:none;color:inherit;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .35s var(--ease);}
.menu-block-link:hover{background-size:100% 1.5px;}
.menu-options li > a{position:relative;padding-left:18px;text-decoration:none;color:inherit;transition:color .2s ease;}
.menu-options li > a::before{content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--gold-soft);}
.menu-options li > a:hover{color:var(--wine-texto);}
.menu-options li > a::after{content:' →';opacity:0;transition:opacity .2s ease;}
.menu-options li > a:hover::after{opacity:1;}
.menu-block-cta{display:grid;gap:10px;}
.menu-block-cta .btn-outline{background:var(--blanco);font-size:var(--t-md);white-space:normal;}

/* =========================================================
   Página de cada menú (boxes)
   ========================================================= */
/* ---------- Sello de marca (home) ---------- */
/* Va al principio de la home. La barra de navegación es fija (ocupa 86px),
   así que el bloque arranca justo por debajo, sin solaparse con ella. */
.sello{
  background:var(--banda);
  color:var(--banda-texto);
  border-radius:40px;
  margin:132px 24px 0;
  padding:58px 24px 56px;
  text-align:center;
  overflow:hidden;
  position:relative;
}
/* El hero ya no tiene que esquivar la barra: la esquiva el sello */
.sello + .hero{padding-top:54px;}
/* Barra más opaca al ir sobre fondo oscuro */
body:has(.sello) .glass-nav{background:rgba(var(--paper-rgb),.94);}
/* Halo cálido detrás del sello, para que no flote plano sobre el fondo */
.sello::before{
  content:'';
  position:absolute;left:50%;top:50%;
  width:min(760px,88%);aspect-ratio:1/1;
  transform:translate(-50%,-58%);
  background:radial-gradient(circle, rgba(217,190,140,.16) 0%, rgba(217,190,140,.05) 42%, transparent 68%);
  pointer-events:none;
}
.sello-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(20px,4vw,48px);
  max-width:var(--container);margin-inline:auto;
}
.sello-rule{
  flex:1 1 0;max-width:300px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(217,190,140,.55));
}
.sello-inner .sello-rule:last-child{
  background:linear-gradient(90deg, rgba(217,190,140,.55), transparent);
}
/* El logo original es un JPEG con fondo blanco cuadrado: lo recortamos
   en círculo y lo reencuadramos para que no asome nada de ese blanco.
   El círculo del logo no está centrado en el lienzo (centro 252/247 de 512),
   de ahí el desplazamiento. */
.sello-marca{
  flex:none;line-height:0;
  width:clamp(168px,24vw,252px);
  aspect-ratio:1/1;
  perspective:1100px;
}
.sello-marca .moneda-cara{box-shadow:0 18px 40px rgba(0,0,0,.42);}
.sello-claim{
  position:relative;z-index:1;
  margin:32px auto 0;max-width:760px;
  font-family:var(--font-display);
  font-style:italic;font-weight:400;
  font-size:clamp(1.34rem,2.5vw,1.95rem);
  line-height:1.3;
  color:var(--banda-texto);
  text-wrap:balance;
}

@media (max-width:760px){
  .sello{margin:134px 10px 0;border-radius:26px;padding:44px 18px 42px;}
  .sello + .hero{padding-top:40px;}
  .sello-rule{display:none;}
  .sello-claim{margin-top:26px;}

}

/* ---------- Sello de marca en cabecera de página interior ----------
   Mismo recorte circular que el sello de la home: el logo original es un
   JPEG con fondo blanco cuadrado, así que se recorta y reencuadra. */
.marca-pagina{
  width:clamp(94px,11vw,126px);
  aspect-ratio:1/1;
  margin:0 auto 24px;
  line-height:0;
  perspective:800px;
}
.marca-pagina .moneda-cara{box-shadow:0 12px 28px rgba(29,25,19,.17);}
@media (max-width:640px){
  .marca-pagina{margin-bottom:18px;}

}

/* ---------- Efecto moneda: el logo gira sobre su eje al hacer scroll ----------
   Dos caras con el mismo logo (la trasera girada 180°) para que nunca se
   vea reflejado. El giro lo aplica thyme-main.js según el scroll. */
.moneda{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  will-change:transform;
}
.moneda-cara{
  position:absolute;inset:0;
  border-radius:50%;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.moneda-dorso{transform:rotateY(180deg);}
.moneda-cara img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  transform:translate(0.8%,1.8%) scale(1.045);
}
/* Si el usuario ha pedido menos animación, la moneda se queda quieta */
@media (prefers-reduced-motion:reduce){
  .moneda{transform:none!important;}
}

/* ---------- Carrusel horizontal de opciones de menú ---------- */
.carrusel{position:relative;margin:4px 0 22px;}
.carrusel-pista{
  display:flex;gap:14px;
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:4px 2px 10px;
  scroll-padding-left:2px;
}
.carrusel-pista::-webkit-scrollbar{display:none;}
.carrusel-pista:focus-visible{outline:3px solid var(--gold-deep);outline-offset:4px;border-radius:16px;}

.carrusel-card{
  flex:0 0 clamp(150px,42vw,182px);
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
a.carrusel-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 30px rgba(29,25,19,.13);
  border-color:rgba(217,190,140,.5);
}
.carrusel-foto{
  display:block;position:relative;
  aspect-ratio:1/1;overflow:hidden;
  background:var(--cream-2);
}
.carrusel-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease);}
a.carrusel-card:hover .carrusel-foto img{transform:scale(1.07);}
/* Placeholder para los productos que aún no tienen foto */
.carrusel-sinfoto{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 50% 42%, rgba(217,190,140,.14), transparent 62%),
    var(--cream-2);
}
.carrusel-sinfoto svg{width:38%;height:38%;color:var(--gold);opacity:.62;}

.carrusel-info{display:flex;flex-direction:column;gap:6px;padding:13px 14px 15px;flex:1;}
.carrusel-nombre{
  font-family:var(--font-display);
  font-size:var(--t-md);line-height:1.25;color:var(--espresso);
  display:block;
}
.carrusel-precio{
  margin-top:auto;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
}
.carrusel-unid{font-size:var(--t-xs);color:var(--espresso-50);letter-spacing:.03em;}
.carrusel-precio strong{font-size:var(--t-base);color:var(--wine-texto);font-weight:600;}

/* Flechas de navegación */
.carrusel-nav{
  position:absolute;top:calc(50% - 30px);transform:translateY(-50%);
  z-index:3;
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--glass-border);
  background:var(--glass-bg-strong);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 8px 20px rgba(29,25,19,.18);
  color:var(--espresso);cursor:pointer;
  transition:opacity .3s ease,visibility .3s ease,background .25s ease,color .25s ease;
}
.carrusel-nav svg{width:19px;height:19px;}
.carrusel-nav:hover{background:var(--gold-deep);color:var(--banda-texto);border-color:var(--gold-deep);}
.carrusel-prev{left:-14px;}
.carrusel-next{right:-14px;}
.carrusel-nav[hidden]{opacity:0;visibility:hidden;pointer-events:none;display:flex;}

@media (max-width:1140px){
  .carrusel-prev{left:-6px;}
  .carrusel-next{right:-6px;}

}
@media (max-width:760px){
  /* En móvil se desliza con el dedo: las flechas sobran */
  .carrusel-nav{display:none;}
  .carrusel-card{flex-basis:clamp(144px,40vw,168px);}

}

.box-banner{padding-top:184px;}
.box-banner-solo .catalogo-banner-grid{grid-template-columns:1fr;}
.box-banner-solo .catalogo-banner-lede{max-width:640px;}
.migas{font-size:var(--t-sm);color:rgba(var(--banda-texto-rgb),.6);margin-bottom:22px;}
.migas a{color:rgba(var(--banda-texto-rgb),.8);text-decoration:none;}
.migas a:hover{color:var(--gold-soft);}
.migas span{margin:0 6px;}
.migas strong{color:var(--banda-texto);font-weight:500;}
.box-banner h1{font-size:clamp(2.6rem,5.5vw,4.2rem)!important;}
.box-banner-datos{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.box-banner-datos span{
  font-size:var(--t-sm);padding:9px 16px;border-radius:100px;
  border:1px solid rgba(217,190,140,.35);background:rgba(var(--paper-rgb),.06);color:rgba(var(--banda-texto-rgb),.85);
}
.box-banner-datos strong{color:var(--gold-soft);font-weight:600;margin-right:4px;}
.box-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;}
.box-card{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 14px 34px rgba(29,25,19,.06);transition:box-shadow .35s var(--ease),transform .35s var(--ease);
}
.box-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(29,25,19,.12);}
.box-card:target{outline:2px solid var(--gold);outline-offset:4px;}
.box-media{position:relative;min-height:100%;background:var(--cream-2);}
.box-media picture,.box-media img,.box-media .producto-placeholder{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.box-media .producto-placeholder svg{width:38%;height:38%;}
/* Las tablas son fotos cenitales cuadradas y la tabla entera es el producto:
   en esta pagina la foto va en 1:1 para que no se recorte por los lados. */
.box-grid-tablas .box-card{grid-template-columns:1fr 1fr;}
.box-grid-tablas .box-media{aspect-ratio:1/1;min-height:0;}
@media (max-width:760px){
  .box-grid-tablas .box-card{grid-template-columns:1fr;}

}
.box-tag{position:absolute;top:14px;left:14px;}
.box-num{position:absolute;bottom:14px;left:16px;font-family:var(--font-display);font-style:italic;font-size:var(--t-xl);color:var(--gold-deep);background:rgba(var(--paper-rgb),.85);padding:2px 10px;border-radius:10px;}
.box-body{padding:26px 26px 24px;display:flex;flex-direction:column;}
.box-body h2{font-size:var(--t-2xl);margin-bottom:10px;}
.box-texto{font-size:var(--t-md);color:var(--espresso-70);line-height:1.6;}
.box-det{margin:4px 0 14px;border-top:1px solid var(--line);padding-top:12px;}
.box-det summary{cursor:pointer;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-deep);list-style:none;display:flex;justify-content:space-between;}
.box-det summary::-webkit-details-marker{display:none;}
.box-det summary::after{content:'+';font-size:var(--t-lg);line-height:1;}
.box-det[open] summary::after{content:'−';}
.box-det .ficha-ingredientes{margin-top:10px;grid-template-columns:1fr;}
.box-aler{margin-bottom:16px;}
.box-aler > span{display:block;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-deep);margin-bottom:8px;}
.box-aler .ficha-alergenos li{font-size:var(--t-xs);padding:4px 10px;}
.box-pie{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);}
.box-pie .producto-precio{margin-bottom:12px;}
.box-botones{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.box-botones .btn{padding:11px 20px;font-size:var(--t-md);}
.box-ficha{font-size:var(--t-sm);color:var(--espresso-70);text-underline-offset:3px;}
.box-ficha:hover{color:var(--wine-texto);}
.box-completa{padding-top:0;}
.box-completa-card{align-items:stretch;}
.box-personas{display:grid;gap:6px;font-size:var(--t-sm);font-weight:600;max-width:240px;margin:6px 0 16px;color:rgba(var(--banda-texto-rgb),.85);}
.box-personas input{padding:12px 14px;border-radius:12px;border:1px solid rgba(217,190,140,.4);background:rgba(var(--paper-rgb),.08);color:var(--banda-texto);font:inherit;}
.box-otro{
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:48px;text-decoration:none;
  background:radial-gradient(circle at 70% 30%,rgba(217,190,140,.25),transparent 60%),#2E3624;color:var(--banda-texto);
  transition:background .3s ease;
}
.box-otro:hover{background:radial-gradient(circle at 70% 30%,rgba(217,190,140,.35),transparent 60%),#452d1c;}
.box-otro .kicker{color:var(--gold-soft);}
.box-otro strong{font-family:var(--font-display);font-size:var(--t-3xl);font-weight:400;line-height:1.15;}
.box-otro small{color:rgba(var(--banda-texto-rgb),.7);font-size:var(--t-md);}
.toast a{background:var(--gold-soft);color:var(--espresso);font-weight:600;font-size:var(--t-sm);padding:7px 14px;border-radius:100px;text-decoration:none;white-space:nowrap;}
@media (max-width:1060px){
  .box-grid{grid-template-columns:1fr;max-width:760px;margin-inline:auto;}

}
@media (max-width:620px){
  .box-card{grid-template-columns:1fr;}
  .box-media{aspect-ratio:4/3;min-height:0;}
  .box-body{padding:20px 18px;}
  /* Apilado bajo la tarjeta oscura, este enlace se fundia con ella y parecia
     un bloque negro sin explicacion. Le damos una separacion clara arriba y
     una flecha, para que se lea como lo que es: un enlace a otra pagina. */
  .box-otro{padding:26px 24px 28px;border-top:1px solid rgba(217,190,140,.32);}
  .box-otro .kicker{font-size:var(--t-md);margin-bottom:6px;}
  .box-otro strong{font-size:var(--t-xl);}
  .box-banner{padding-top:164px;}

}
body:has(.box-banner) .glass-nav{background:rgba(var(--paper-rgb),.94);}
.domicilio-card > *{min-width:0;}
@media (max-width:860px){
  .domicilio-card{grid-template-columns:minmax(0,1fr)!important;}
  .domicilio-copy .btn{white-space:normal;text-align:center;}

}
.menu-blocks-featured > *{min-width:0;}
.menu-block-cta .btn{white-space:normal;text-align:center;}
@media (max-width:980px){
  .menu-blocks-featured{grid-template-columns:minmax(0,1fr)!important;}

}

/* =========================================================
   Accesos directos al final de página (footer quick-links)
   ========================================================= */
.quick-links{
  background:var(--paper);
  border-top:1px solid var(--line);
  padding:36px 0;
}
.quick-links-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;
  text-align:center;
}
.quick-links-label{
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--gold-deep);width:100%;text-align:center;margin-bottom:6px;
}
.quick-links a{
  text-decoration:none;font-size:var(--t-md);font-weight:500;
  padding:10px 18px;border-radius:100px;
  background:var(--glass-bg);border:1px solid rgba(165,125,67,.28);color:var(--espresso);
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.quick-links a:hover{background:var(--banda);color:var(--banda-texto);border-color:var(--banda);transform:translateY(-2px);}
.quick-links a.is-cta{background:var(--wine);color:var(--banda-texto);border-color:var(--wine-texto);}
.quick-links a.is-cta:hover{background:var(--wine-deep);}
@media (max-width:640px){
  .quick-links{padding:26px 0;}
  .quick-links-inner{gap:8px;}
  .quick-links a{font-size:var(--t-sm);padding:9px 14px;}

}

/* =========================================================
   Trust strip — confianza a primer vistazo
   ========================================================= */
.trust-strip{
  padding:22px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:relative;
  overflow:hidden;
}
.trust-strip::before{
  content:'';
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(29,25,19,.05) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(600px 120px at 50% 50%, black, transparent 85%);
  pointer-events:none;
}
.trust-strip-inner{position:relative;z-index:1;}
.trust-strip-inner{display:flex;flex-direction:column;gap:12px;}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 40px;}
.trust-row-secondary{padding-top:12px;border-top:1px solid var(--line);}
.trust-item{display:flex;align-items:center;gap:10px;font-size:var(--t-md);color:var(--espresso-70);transition:transform .3s var(--ease);}
.trust-item:hover{transform:translateY(-2px);}
.trust-item:hover svg{color:var(--wine-texto);}
.trust-item svg{width:20px;height:20px;flex:none;color:var(--olive);transition:color .3s ease;}
.trust-item strong{color:var(--espresso);font-weight:600;}
.trust-row-secondary .trust-item svg{color:var(--gold-deep);}
@media (max-width:640px){
  .trust-row{gap:10px 22px;}
  .trust-item{font-size:var(--t-sm);}

}
@media (max-width:480px){
  .trust-row{flex-direction:column;align-items:flex-start;gap:10px;}
  .trust-row-secondary{align-items:flex-start;}

}

/* =========================================================
   Antojo / showcase — despierta el hambre y crea urgencia
   ========================================================= */
.antojo{padding:8px 0 52px;position:relative;overflow:hidden;}
.antojo::before{
  content:'';
  position:absolute;right:-140px;top:-140px;
  width:340px;height:340px;border-radius:50%;
  border:1.5px solid rgba(165,125,67,.16);
  pointer-events:none;
}
.antojo::after{
  content:'';
  position:absolute;right:-60px;top:-60px;
  width:200px;height:200px;border-radius:50%;
  border:1.5px solid rgba(165,125,67,.12);
  pointer-events:none;
}
.antojo-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:24px;}
.antojo-head h2{margin:4px 0 0;font-size:clamp(1.5rem,2.6vw,2rem);}
@keyframes antojoPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(122,30,38,.35);}
  50%{box-shadow:0 0 0 8px rgba(122,30,38,0);}

}
.antojo-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:clamp(120px,16vw,220px);
  gap:18px;
}
.antojo-card{
  position:relative;border-radius:var(--radius-md,18px);overflow:hidden;
  box-shadow:0 14px 30px rgba(29,25,19,.14);
}
.antojo-card:nth-child(1){grid-column:1 / 3;grid-row:1 / 3;}
.antojo-card:nth-child(2){grid-column:3 / 4;grid-row:1 / 2;}
.antojo-card:nth-child(3){grid-column:4 / 5;grid-row:1 / 2;}
.antojo-card:nth-child(4){grid-column:3 / 5;grid-row:2 / 3;}
.antojo-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease);filter:saturate(1.1) contrast(1.05);}
.antojo-card:hover img{transform:scale(1.08);}
.antojo-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(20,12,7,.82) 100%);
  pointer-events:none;
}
.antojo-tag{
  position:absolute;top:10px;left:10px;z-index:2;
  background:rgba(var(--paper-rgb),.92);color:var(--espresso);
  font-size:var(--t-2xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 10px;border-radius:100px;
}
.antojo-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px;color:var(--banda-texto);}
.antojo-caption strong{display:block;font-family:var(--font-display);font-size:var(--t-lg);font-weight:400;}
.antojo-caption span{font-size:var(--t-sm);opacity:.85;}
.antojo-card.is-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 30% 20%, rgba(217,190,140,.24), transparent 55%),
    linear-gradient(150deg,var(--cream-2),var(--cream));
}
.antojo-card.is-placeholder::before{
  content:'';position:absolute;width:56%;height:56%;max-width:110px;max-height:110px;border-radius:50%;
  border:1px solid rgba(165,125,67,.28);z-index:1;
}
.antojo-placeholder-icon{position:relative;z-index:2;width:24%;height:24%;color:var(--gold);}
.antojo-placeholder-icon svg{width:100%;height:100%;}
.antojo-placeholder-kicker{
  position:relative;z-index:2;margin-top:10px;font-size:var(--t-3xs);letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--gold-deep);opacity:.85;
}
.antojo-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-top:30px;text-align:center;}
.antojo-cta p{margin:0;font-size:var(--t-md);color:var(--espresso-70);}
.btn-urgente{
  background:var(--wine);color:var(--banda-texto);border:1px solid var(--wine);
  animation:antojoPulse 2.4s ease-in-out infinite;
}
.btn-urgente:hover{background:var(--wine-deep);border-color:var(--wine-texto);}
@media (max-width:900px){
  .antojo-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;}
  .antojo-card{aspect-ratio:1/1;}
  .antojo-card:nth-child(1),.antojo-card:nth-child(2),.antojo-card:nth-child(3),.antojo-card:nth-child(4){grid-column:auto;grid-row:auto;}

}
@media (max-width:640px){
  .antojo-grid{gap:12px;}
  .antojo-caption{padding:12px;}
  .antojo-caption strong{font-size:var(--t-md);}

}

/* =========================================================
   Banner photo collage — cabeceras de Coffee Break / Cocktail Box
   ========================================================= */
.banner-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-self:end;}
.banner-photo{
  position:relative;border-radius:16px;overflow:hidden;aspect-ratio:1/1;
  box-shadow:0 18px 36px rgba(0,0,0,.35);
}
.banner-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease);}
.banner-photo:hover img{transform:scale(1.06);}
.banner-photo-single{aspect-ratio:1/1;}
@media (max-width:900px){
  .banner-photos{margin-top:24px;max-width:340px;}

}

/* ---------- Barra de aviso (envío gratis) ----------
   Va al final a propósito: la barra de pedidos.html usa space-between
   porque tiene dos bloques; esta es un solo mensaje y va centrada. */
.topbar-inner.topbar-aviso{justify-content:center;gap:0 14px;}
@media (max-width:760px){
  .topbar-inner.topbar-aviso{
    flex-direction:row!important;
    justify-content:center;
    flex-wrap:wrap!important;
    gap:0 8px;
    padding-block:7px;
  }
  /* En pantalla pequeña dejamos solo lo esencial */
  .topbar-aviso .topbar-sep,
  .topbar-aviso > span:nth-child(n+3){display:none;}

}

/* ---------- Ritmo visual de la portada ----------
   Alternamos fondo en secciones alternas para que cada bloque se lea
   como una unidad y la página no parezca una sola masa de contenido. */
.showcase-section{background:var(--paper);border-block:1px solid var(--line);}
#faq{background:var(--paper);border-block:1px solid var(--line);}

/* =========================================================
   EFECTOS MODERNOS (2026)
   Dos cosas que antes hacia JavaScript y ahora hace el
   navegador solo: las transiciones entre paginas y las
   animaciones ligadas al scroll. Van sobre la tarjeta
   grafica, asi que el movil no se entera.
   Los navegadores que no lo soporten simplemente no lo
   aplican: la web sigue funcionando igual.
   ========================================================= */

/* --- 1. Cambio de pagina sin parpadeo en blanco --- */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-sale .26s ease both; }
::view-transition-new(root) { animation: vt-entra .34s var(--ease) both; }
@keyframes vt-sale  {
  to   { opacity: 0; }

}
@keyframes vt-entra {
  from { opacity: 0; transform: translateY(10px); }

}

/* La cabecera y el logo no parpadean: se quedan fijos de una pagina a otra. */
.site-header { view-transition-name: cabecera; }
.site-header .brand-mark { view-transition-name: sello; }
.topbar      { view-transition-name: avisos; }

/* --- 2. Animaciones ligadas al scroll, en CSS --- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* El sello gira solo con el scroll de la pagina, sin JS. */
    .moneda {
      animation: girar-sello linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 900px;
    }
    @keyframes girar-sello { to { transform: rotateY(1080deg); } }

    /* Las fotos entran con un leve acercamiento mientras suben. */
    .showcase-media img,
    .events-photo img,
    .domicilio-fotos img {
      animation: foto-entra linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 38%;
    }
    @keyframes foto-entra {
      from { transform: scale(1.07); opacity: .55; }
      to   { transform: scale(1);    opacity: 1; }
    }

    /* La franja de confianza se despliega al asomar. */
    .trust-strip li {
      animation: sube-suave linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 90%;
    }
    @keyframes sube-suave {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* --- 3. Apertura suave de la ventana de fotos y la cesta --- */
@supports (transition-behavior: allow-discrete) {
  .lightbox, .cesta {
    transition: opacity .3s var(--ease), overlay .3s allow-discrete, display .3s allow-discrete;
  }
}

/* --- 4. Titulares que no parten mal --- */
h1, h2, .hero-title { text-wrap: balance; }
.hero-lede, .section-head p { text-wrap: pretty; }

/* =========================================================
   GALERÍA
   Rejilla de alturas distintas para que no parezca un catálogo
   de fichas. Cada foto se abre a pantalla completa al pulsar.
   ========================================================= */
.galeria-seccion{background:var(--cream);}

/* Mosaico de verdad: en rejilla, las fotos bajas dejaban hueco debajo
   porque la fila se alinea con la mas alta. Con columnas, cada foto se
   apoya en la anterior y no queda aire muerto. */
.galeria-grid{
  columns:3;
  column-gap:18px;
}
.galeria-item{
  position:relative;
  display:block;
  width:100%;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  margin-bottom:18px;
  border:0;padding:0;margin:0;
  background:var(--cream-2);
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  aspect-ratio:1/1;
  box-shadow:0 14px 30px rgba(29,25,19,.12);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
/* alturas alternas: da ritmo y evita la cuadrícula plana */
.galeria-item:nth-child(7n+1),
.galeria-item:nth-child(7n+4){aspect-ratio:4/5;}
.galeria-item:nth-child(7n+3),
.galeria-item:nth-child(7n+6){aspect-ratio:5/4;}
.galeria-item:nth-child(7n+2){aspect-ratio:3/4;}

.galeria-item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease);}
.galeria-item:hover{transform:translateY(-4px);box-shadow:0 26px 50px rgba(29,25,19,.2);}
.galeria-item:hover img{transform:scale(1.06);}
.galeria-item:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;}

.galeria-item::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top, rgba(20,18,13,.80) 0%, rgba(20,18,13,.22) 44%, rgba(20,18,13,0) 70%);
  opacity:0;transition:opacity .35s ease;
}
.galeria-item:hover::after,
.galeria-item:focus-visible::after{opacity:1;}

.galeria-pie{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;gap:3px;
  padding:16px 18px 17px;
  text-align:left;
  opacity:0;transform:translateY(8px);
  transition:opacity .35s ease, transform .35s var(--ease);
}
.galeria-item:hover .galeria-pie,
.galeria-item:focus-visible .galeria-pie{opacity:1;transform:none;}
.galeria-etiqueta{
  font-size:var(--t-3xs);letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--gold-soft);
}
.galeria-pie strong{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--t-base);line-height:1.2;color:var(--banda-texto);
}

/* En tactil no hay raton que pase por encima: el pie se ve siempre */
@media (hover:none){
  .galeria-item::after{opacity:1;}
  .galeria-pie{opacity:1;transform:none;}
}

.galeria-cierre{
  margin-top:46px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.galeria-cierre p{font-family:var(--font-display);font-size:var(--t-xl);color:var(--espresso);}
.galeria-botones{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}

@media (max-width:900px){
  .galeria-grid{columns:2;column-gap:14px;}
  .galeria-item{margin-bottom:14px;}

}
@media (max-width:520px){
  .galeria-grid{columns:2;column-gap:10px;}
  .galeria-item{margin-bottom:10px;}
  .galeria-pie{padding:11px 12px 12px;}
  .galeria-pie strong{font-size:var(--t-sm);}
  .galeria-etiqueta{font-size:var(--t-4xs);letter-spacing:.12em;}

}

/* --- Pasar fotos dentro del visor --- */
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:4;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--glass-border);
  background:var(--glass-bg-strong);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 10px 24px rgba(29,25,19,.26);
  color:var(--espresso);cursor:pointer;padding:0;
  transition:background .25s ease,color .25s ease,opacity .25s ease,transform .25s var(--ease);
}
.lightbox-prev{left:14px;}
.lightbox-next{right:14px;}
.lightbox-nav:hover:not(:disabled){background:var(--gold-deep);color:var(--banda-texto);border-color:var(--gold-deep);}
.lightbox-nav:disabled{opacity:.3;cursor:default;}
.lightbox-nav:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;}
.lightbox-nav[hidden]{display:none;}

.lightbox-contador{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  z-index:4;
  font-size:var(--t-xs);letter-spacing:.08em;font-weight:600;
  color:var(--banda-texto);
  background:rgba(20,18,13,.58);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:5px 12px;border-radius:100px;
}
.lightbox-contador[hidden]{display:none;}

@media (max-width:620px){
  /* En movil se reducen y se pegan al borde, pero siguen centradas: abajo
     chocaban con los botones flotantes y con el texto del panel. El gesto
     principal aqui es deslizar con el dedo; las flechas son el respaldo. */
  .lightbox-nav{width:38px;height:38px;}
  .lightbox-prev{left:8px;}
  .lightbox-next{right:8px;}
  .lightbox-contador{top:10px;font-size:var(--t-4xs);}

}

/* =========================================================
   MODO NOCTURNO
   ---------------------------------------------------------
   No es el modo claro invertido ni un negro de plantilla: es
   la misma marca de noche. El fondo son los marrones de la
   casa, el dorado sube de luz para que siga leyendose y el
   vino se aclara lo justo para que el blanco encima cumpla
   contraste. Todos los pares comprobados: ninguno baja de
   4,5:1, que es el minimo legible.
   Se activa solo si el sistema del visitante lo pide.
   ========================================================= */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;

    --cream:#181009;            /* fondo de pagina */
    --cream-2:#211710;          /* superficies */
    --paper:#271B13;            /* tarjetas */
    --espresso:#EFE7D9;         /* texto */
    --espresso-70:rgba(241,231,213,.74);
    --espresso-50:rgba(241,231,213,.54);

    --banda:#120C07;            /* franjas oscuras, aun mas hondas */
    --banda-texto:#EFE7D9;

    --gold:#D9A862;
    --gold-deep:#D9BE8C;
    --gold-soft:#E8C590;
    --marron-logo:#6B4F2B;
    --marron-logo-oscuro:#2E3624;

    --wine:#B8313E;
    --wine-deep:#1D1913;
    --wine-ink:#EFE7D9;
    --wine-texto:#E8737E;
    --paper-rgb:39,27,19;
    --blanco:#2E2119;
    --olive:#97A066;
    --error:#E8796C;

    --line:rgba(241,231,213,.16);
    --glass-bg:rgba(39,27,19,.62);
    --glass-bg-strong:rgba(33,23,16,.86);
    --glass-border:rgba(241,231,213,.14);
    --glass-shadow:0 8px 32px rgba(0,0,0,.55);
  }

  /* Las sombras de color crema no existen de noche: pasan a negro */
  .showcase-card,.galeria-item,.box-card,.producto,.domicilio-card,
  .banner-photo,.events-photo,.lightbox-panel{
    box-shadow:0 18px 40px rgba(0,0,0,.45);
  }

  /* La barra de navegacion necesita algo mas de cuerpo sobre fondo oscuro */
  .glass-nav{background:rgba(33,23,16,.88);}
  body:has(.sello) .glass-nav{background:rgba(33,23,16,.92);}

  /* El sello de marca es un JPG con fondo claro: se recorta en circulo y
     sobre fondo oscuro cantaria el borde. Le damos un halo calido. */
  .moneda-cara,.brand-mark{box-shadow:0 0 0 1px rgba(241,231,213,.12);}

  /* La placa de los productos sin foto, en version noche */
  .producto-placeholder{
    background:
      radial-gradient(ellipse at 50% 24%, rgba(217,168,98,.16), transparent 62%),
      repeating-linear-gradient(135deg, rgba(241,231,213,.035) 0 1px, transparent 1px 10px),
      linear-gradient(165deg, var(--cream-2) 0%, var(--paper) 52%, var(--cream-2) 100%);
  }
}

/* =========================================================
   IMPRESIÓN
   ---------------------------------------------------------
   En catering de empresa la carta se imprime y se pasa en una
   reunión. Sin esto salía con el menú, el botón de WhatsApp
   flotante, el banner de cookies y los fondos oscuros
   gastando tinta. Aquí queda una hoja limpia, en blanco y
   negro, con el teléfono y la web visibles.
   ========================================================= */
@media print{
  /* Fuera todo lo que no es contenido */
  .site-header, .topbar, .whatsapp-float, .back-to-top, .cookie-banner,
  .cart-bar, .toast, .lightbox, .cesta, .ficha, .nav-toggle,
  .carrusel-nav, .lightbox-nav, .galeria-cierre, .skip-link,
  .sello, .hero-scene, .form-success, .cat-chips, .filtros,
  .producto-acciones, .box-botones, .cesta-form, form{
    display:none !important;
  }

  html, body{
    background:#fff !important;
    color:#000 !important;
    font-size:11pt;
  }
  *{
    background-image:none !important;
    box-shadow:none !important;
    text-shadow:none !important;
    color:#000 !important;
    animation:none !important;
    transition:none !important;
  }
  .section, section{padding:0 0 14pt !important;}
  .container{max-width:none;padding:0 !important;}

  /* Las franjas oscuras en papel: marco fino en vez de tinta maciza */
  .banda, .domicilio-card, .menu-block-dark, .side-card-dark,
  .menu-banner-dark, .catalogo-banner, .box-banner{
    background:#fff !important;
    border:1pt solid #999 !important;
    border-radius:0 !important;
  }

  h1{font-size:20pt;} h2{font-size:15pt;} h3{font-size:12pt;}
  h1,h2,h3,h4{page-break-after:avoid; break-after:avoid;}
  .producto, .box-card, .menu-block, .galeria-item, .carrusel-card, .faq-item{
    page-break-inside:avoid; break-inside:avoid;
  }

  /* Fotos: pequeñas y en gris, para que la hoja se lea y no chupe tinta */
  img{max-width:42mm !important;height:auto !important;filter:grayscale(1);}
  .galeria-grid{columns:3;column-gap:6mm;}
  .showcase-grid, .box-grid, .producto-grid{display:block !important;}

  /* Que los enlaces digan a dónde van, que en papel no se pueden pulsar */
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555 !important;}
  main a[href^="#"]::after, main a[href$=".html"]::after{content:"";}

  /* Los desplegables salen abiertos: en papel no se pueden pulsar, y
     cerrados dejaban un hueco vacío dentro de cada ficha. */
  details > *{display:block !important;}
  details summary{list-style:none;font-weight:700;margin-bottom:3pt;}
  details summary::-webkit-details-marker{display:none;}
  details summary::after{content:"";}
  .box-det, .faq-answer{max-height:none !important;height:auto !important;
    overflow:visible !important;opacity:1 !important;}
  .faq-chevron{display:none !important;}

  /* Pie de página con los datos de contacto en cada hoja */
  .site-footer{border-top:1pt solid #999;padding-top:8pt;}
  .footer-social, .footer-bottom{display:none !important;}
}

/* --- Los boxes, de deslizar en móvil ---
   Ocho cajas apiladas son 6,7 pantallas de scroll. Deslizando, se ven de
   una en una y asoma la siguiente. Mismo patrón que el escaparate, con el
   freno puesto para que el gesto no se escape al navegador. */
@media (max-width:760px){
  .box-grid{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-inline:24px;
    margin-inline:-24px;
    scroll-padding-inline:24px;
    padding-block:4px 8px;
    align-items:stretch;
  }
  .box-grid::-webkit-scrollbar{display:none;}
  .box-grid .box-card{
    flex:0 0 82%;
    scroll-snap-align:center;
    margin:0;
  }
  .box-grid .box-card:hover{transform:none;}

  /* Pista visual de que hay más a los lados */
  .box-seccion .section-head p::after{
    content:' Desliza para ver todos.';
    color:var(--espresso-50);
  }
}