/* ============================================================
   TU COLITA LOUNGE — estilos.css
   Sistema visual del sitio: páginas públicas, puerta de
   preapertura y panel de administración.
   Negro profundo, oro metálico y superficies de vidrio.
   ============================================================ */

/* ------------------------------------------------------------
   TOKENS — la única fuente de color del sitio.
   Nada de hexadecimales sueltos fuera de este bloque.
   ------------------------------------------------------------ */
:root{
  /* Superficies */
  --fondo:          #0B0908;
  --fondo-2:        #120E0C;
  --superficie:     #17120F;
  --superficie-2:   #1F1815;
  --elevada:        #241C18;

  /* Tinta */
  --tinta:          #F5EFE3;
  --tinta-suave:    #A2968A;
  --tinta-tenue:    #948779;

  /* Marca */
  --oro:            #D8AC54;
  --oro-claro:      #F4E2AC;
  --oro-hondo:      #9A6F22;
  --oro-degradado:  linear-gradient(135deg, #9A6F22 0%, #F4E2AC 38%, #D8AC54 62%, #8A5F1B 100%);

  /* Acentos de apoyo. El color puro va en bordes y fondos; la
     variante "-texto" es la que pasa AA en las pastillas diminutas. */
  --brasa:          #C4552E;
  --menta:          #6E9083;
  --vino:           #8E3B4E;
  --brasa-texto:    #D9714A;
  --menta-texto:    #7EA093;
  --oro-texto:      #F4E2AC;

  /* Estados */
  --ok:             #7BAE7F;
  --error:          #C96F5B;

  /* VIDRIO — paneles translúcidos con desenfoque de fondo.
     El brillo interior superior es lo que les da el canto de cristal. */
  --vidrio:         rgba(255,255,255,.045);
  --vidrio-fuerte:  rgba(255,255,255,.075);
  --vidrio-borde:   rgba(255,255,255,.10);
  --vidrio-brillo:  inset 0 1px 0 rgba(255,255,255,.11);
  --vidrio-hondo:   inset 0 -1px 0 rgba(0,0,0,.35);
  --desenfoque:     blur(24px) saturate(165%);
  --desenfoque-sutil: blur(14px) saturate(140%);

  /* Estructura */
  --linea:          rgba(216,172,84,.16);
  --linea-suave:    rgba(245,239,227,.08);
  --sombra:         0 18px 48px -24px rgba(0,0,0,.85);
  --sombra-honda:   0 32px 80px -40px rgba(0,0,0,.95);
  --sombra-oro:     0 0 0 1px rgba(216,172,84,.22), 0 20px 40px -28px rgba(216,172,84,.35);
  --radio:          20px;
  --radio-sm:       13px;
  --radio-xl:       28px;

  /* Curvas. La "suave" es la de casi todo; la "resorte" da el
     rebote corto de los elementos que aparecen. */
  --suave:          620ms cubic-bezier(.22,.61,.36,1);
  --rapida:         260ms cubic-bezier(.22,.61,.36,1);
  --resorte:        780ms cubic-bezier(.16,1.08,.32,1);

  /* Tipografía */
  --display:        "Anton", "Arial Narrow", sans-serif;
  --texto:          "Manrope", system-ui, sans-serif;
  --voz:            "Fraunces", Georgia, serif;

  --grano-opacidad: .03;

  /* Margen lateral real del contenedor. Los bloques que salen a sangre
     lo usan en negativo: calcularlo con 50vw fallaba cuando el bloque
     ocupaba solo una columna de la rejilla y se pasaba de la pantalla. */
  --margen-lateral: max(1.25rem, calc((100vw - 1160px) / 2));
}

/* Modo día ("Tarde"): reasignación cálida clara. El oro se conserva,
   las superficies pasan a crema y la tinta a café oscuro. */
:root[data-tema="dia"]{
  --fondo:          #F7F1E6;
  --fondo-2:        #F1E9DA;
  --superficie:     #FDF8EE;
  --superficie-2:   #F1E7D4;
  --elevada:        #FFFFFF;
  --tinta:          #221B17;
  --tinta-suave:    #6B5D50;
  --tinta-tenue:    #6E6152;
  --oro:            #A87B25;
  --oro-claro:      #8A5F1B;
  --oro-hondo:      #7A5617;
  --brasa-texto:    #A8431F;
  --menta-texto:    #3F5F52;
  --oro-texto:      #8A5F1B;
  --vidrio:         rgba(255,255,255,.55);
  --vidrio-fuerte:  rgba(255,255,255,.75);
  --vidrio-borde:   rgba(34,27,23,.10);
  --vidrio-brillo:  inset 0 1px 0 rgba(255,255,255,.9);
  --vidrio-hondo:   inset 0 -1px 0 rgba(122,86,23,.06);
  --linea:          rgba(154,111,34,.28);
  --linea-suave:    rgba(34,27,23,.10);
  --sombra:         0 18px 48px -30px rgba(80,60,30,.35);
  --sombra-honda:   0 32px 80px -44px rgba(80,60,30,.45);
  --sombra-oro:     0 0 0 1px rgba(154,111,34,.25), 0 20px 40px -30px rgba(154,111,34,.30);
  --grano-opacidad: .018;
}

/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

/* Varias piezas llevan display propio, que le gana al atributo hidden.
   Esta regla hace que hidden signifique siempre lo que dice. */
[hidden]{ display:none !important }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* Los bloques a sangre se calculan con 100vw, que incluye el ancho de
     la barra de scroll. "clip" recorta ese sobrante sin crear un
     contenedor de scroll, así que position:sticky sigue funcionando. */
  overflow-x:clip;
}

body{
  background:var(--fondo);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:1rem;
  line-height:1.6;
  min-height:100vh;
  position:relative;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Grano: textura de ruido sobre el fondo, NUNCA sobre el contenido.
   Va detrás de todo (z-index 0) y el contenido se apila encima, para
   que no ensucie la tipografía. */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  opacity:var(--grano-opacidad);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > *{ position:relative; z-index:1 }

img{ max-width:100%; display:block }
a{ color:inherit }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0 }
input,select,textarea{ font:inherit; color:inherit }

::selection{ background:var(--oro-hondo); color:var(--tinta) }

:focus-visible{
  outline:2px solid var(--oro);
  outline-offset:3px;
  border-radius:6px;
}

h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.04;
  /* Sin sombras ni relieves: el display va limpio y plano. */
  text-shadow:none;
}

.voz{
  font-family:var(--voz);
  font-style:italic;
  font-weight:500;
  color:var(--tinta-suave);
}

.contenedor{
  width:min(1160px, 100% - 2.5rem);
  margin-inline:auto;
}

/* ------------------------------------------------------------
   LOGO SEGÚN EL TEMA
   El emblema tiene la tipografía en blanco: sobre crema se
   perdería, así que en modo día entra la versión en tinta.
   ------------------------------------------------------------ */
.logo-dia{ display:none }
:root[data-tema="dia"] .logo-noche{ display:none }
:root[data-tema="dia"] .logo-dia{ display:block }

.kicker{
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
  display:block;
  margin-bottom:1rem;
}

/* ------------------------------------------------------------
   EL FILETE — la firma del sitio.
   Línea dorada con un rombo centrado, como el separador bajo
   LOUNGE en el emblema. El rombo lleva un halo del color del
   fondo para que nunca se monte sobre otra cosa.
   ------------------------------------------------------------ */
.filete{
  position:relative;
  height:1px;
  background:var(--oro-degradado);
  border:0;
  opacity:.7;
  overflow:visible;
}
.filete::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:7px; height:7px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--oro);
  box-shadow:0 0 0 5px var(--fondo);
}
.filete--izq::after{ left:20px }
/* Sobre superficies de tarjeta el halo toma el color de la tarjeta */
.filete--superficie::after{ box-shadow:0 0 0 5px var(--superficie) }

.filete-v{
  width:1px; align-self:stretch;
  background:var(--oro-degradado);
  opacity:.5;
}

/* ------------------------------------------------------------
   VIDRIO — panel translúcido reutilizable.
   ------------------------------------------------------------ */
.vidrio{
  background:var(--vidrio);
  backdrop-filter:var(--desenfoque);
  -webkit-backdrop-filter:var(--desenfoque);
  border:1px solid var(--vidrio-borde);
  border-radius:var(--radio);
  box-shadow:var(--vidrio-brillo), var(--vidrio-hondo), var(--sombra);
}

/* ------------------------------------------------------------
   BOTONES
   El botón dorado lleva un destello que cruza al pasar el cursor.
   ------------------------------------------------------------ */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:50px;
  padding:.78rem 1.6rem;
  border-radius:99px;
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
  border:1px solid transparent;
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--rapida), box-shadow var(--rapida),
             background var(--rapida), border-color var(--rapida), color var(--rapida);
}
.btn svg{ flex:none }
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) scale(.985) }

.btn--oro{
  background:var(--oro-degradado);
  color:#1A1207;
  box-shadow:var(--sombra-oro);
}
.btn--oro::after{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform:translateX(-120%);
  transition:transform 900ms cubic-bezier(.22,.61,.36,1);
}
.btn--oro:hover::after{ transform:translateX(120%) }

.btn--vidrio{
  background:var(--vidrio);
  backdrop-filter:var(--desenfoque-sutil);
  -webkit-backdrop-filter:var(--desenfoque-sutil);
  border-color:var(--vidrio-borde);
  color:var(--tinta);
  box-shadow:var(--vidrio-brillo);
}
.btn--vidrio:hover{
  background:var(--vidrio-fuerte);
  border-color:var(--linea);
}

.btn--borde{
  border-color:var(--linea);
  color:var(--tinta);
  background:transparent;
}
.btn--borde:hover{ border-color:var(--oro); box-shadow:var(--sombra-oro) }

.btn--fantasma{ color:var(--tinta-suave); padding-inline:1rem }
.btn--fantasma:hover{ color:var(--oro-claro) }

.btn[disabled], .btn[aria-disabled="true"]{ opacity:.45; pointer-events:none }

/* ------------------------------------------------------------
   ORBES — halos dorados que respiran detrás del hero y la puerta.
   Son el "movimiento ambiente" del sitio: lentos, casi imperceptibles.
   ------------------------------------------------------------ */
.orbes{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.orbe{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.5;
  will-change:transform;
}
.orbe--1{
  width:44vmax; height:44vmax;
  top:-14vmax; left:50%;
  margin-left:-22vmax;
  background:radial-gradient(circle, rgba(216,172,84,.20), transparent 68%);
  animation:derivaA 26s ease-in-out infinite;
}
.orbe--2{
  width:30vmax; height:30vmax;
  bottom:-8vmax; left:-8vmax;
  background:radial-gradient(circle, rgba(154,111,34,.20), transparent 70%);
  animation:derivaB 34s ease-in-out infinite;
}
.orbe--3{
  width:26vmax; height:26vmax;
  top:38%; right:-10vmax;
  background:radial-gradient(circle, rgba(196,85,46,.13), transparent 70%);
  animation:derivaC 30s ease-in-out infinite;
}
@keyframes derivaA{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  50%    { transform:translate3d(2vmax,3vmax,0) scale(1.09) }
}
@keyframes derivaB{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  50%    { transform:translate3d(4vmax,-2vmax,0) scale(1.12) }
}
@keyframes derivaC{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  50%    { transform:translate3d(-3vmax,2vmax,0) scale(.92) }
}

/* ------------------------------------------------------------
   NAV SUPERIOR — píldora de vidrio flotante.
   ------------------------------------------------------------ */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:40;
  padding-top:.7rem;
  transition:padding-top var(--rapida);
}
.nav__fila{
  display:flex;
  align-items:center;
  gap:1.2rem;
  min-height:60px;
  padding:.45rem .5rem .45rem 1.1rem;
  border-radius:99px;
  border:1px solid transparent;
  transition:background var(--suave), border-color var(--suave),
             box-shadow var(--suave), backdrop-filter var(--suave);
}
.nav.con-fondo{ padding-top:.5rem }
.nav.con-fondo .nav__fila{
  background:var(--vidrio);
  backdrop-filter:var(--desenfoque);
  -webkit-backdrop-filter:var(--desenfoque);
  border-color:var(--vidrio-borde);
  box-shadow:var(--vidrio-brillo), var(--sombra);
}
.nav__logo{
  display:flex; align-items:center;
  text-decoration:none;
  flex:none;
  min-height:44px;
}

/* Conmutador Día / Noche: dos pastillas dentro de una cápsula de vidrio */
.conmutador{
  display:inline-flex;
  padding:3px;
  border-radius:99px;
  border:1px solid var(--vidrio-borde);
  background:var(--vidrio);
  backdrop-filter:var(--desenfoque-sutil);
  -webkit-backdrop-filter:var(--desenfoque-sutil);
  box-shadow:var(--vidrio-brillo);
  flex:none;
}
.conmutador button{
  padding:.4rem .85rem;
  min-height:36px;
  border-radius:99px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
  transition:background var(--rapida), color var(--rapida);
}
.conmutador button[aria-pressed="true"]{
  background:var(--vidrio-fuerte);
  color:var(--oro-texto);
  box-shadow:var(--vidrio-brillo);
}
.nav__logo img{
  height:34px; width:auto;
  transition:height var(--rapida);
}
.nav.con-fondo .nav__logo img{ height:30px }

.nav__enlaces{
  display:flex; gap:1.7rem;
  margin-left:auto;
  list-style:none;
}
.nav__enlaces a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:40px;
  text-decoration:none;
  font-weight:600;
  font-size:.9rem;
  color:var(--tinta-suave);
  transition:color var(--rapida);
}
/* Subrayado dorado que crece desde el centro */
.nav__enlaces a::after{
  content:"";
  position:absolute;
  left:50%; bottom:0;
  width:0; height:1px;
  background:var(--oro-degradado);
  transform:translateX(-50%);
  transition:width var(--rapida);
}
.nav__enlaces a:hover{ color:var(--oro-claro) }
.nav__enlaces a:hover::after{ width:100% }
.nav .btn{ min-height:44px; padding:.5rem 1.3rem }

@media (max-width:820px){
  .nav__enlaces{ display:none }
  .nav .btn{ margin-left:auto }
  .nav__fila{ padding-left:.9rem }
}

/* ------------------------------------------------------------
   HERO — una sola pieza de vidrio flotando sobre el fondo.
   Los orbes viven dentro de la tarjeta, así que el halo dorado
   se ve como luz atrapada en el cristal.
   ------------------------------------------------------------ */
.hero{
  min-height:100svh;
  display:flex;
  align-items:center;
  position:relative;
  padding:6.5rem 0 3.5rem;
}
.hero__tarjeta{
  position:relative;
  overflow:hidden;
  text-align:center;
  border-radius:clamp(20px, 3vw, 34px);
  padding:clamp(2.6rem,6vw,4.6rem) clamp(1.4rem,4vw,3.5rem);
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(216,172,84,.13), transparent 68%),
    var(--vidrio);
  backdrop-filter:var(--desenfoque);
  -webkit-backdrop-filter:var(--desenfoque);
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--vidrio-brillo), var(--vidrio-hondo), var(--sombra-honda);
}
.hero__interior{ position:relative; z-index:2 }

/* La marca del hero es el bloque sin círculo, a tamaño contenido:
   el titular es el que manda, no el logo. */
.hero__marca{
  width:clamp(150px, 26vw, 215px);
  height:auto;
  margin:0 auto clamp(1.4rem,3vw,2rem);
  filter:drop-shadow(0 0 48px rgba(216,172,84,.24));
  animation:flotar 7s ease-in-out infinite;
  will-change:transform;
}
@keyframes flotar{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-8px) }
}

.hero__kicker{
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--oro-texto);
  margin-bottom:1rem;
}

.hero h1{
  font-size:clamp(2.3rem, 7.4vw, 4.6rem);
  line-height:.95;
  max-width:16ch;
  margin-inline:auto;
}
.hero__bajada{
  max-width:48ch;
  margin:1.4rem auto 0;
  color:var(--tinta-suave);
  font-size:1.04rem;
}
.hero__voz{ display:block; margin-top:1.1rem; font-size:1.05rem; color:var(--oro-texto) }
.hero__acciones{
  display:flex; flex-wrap:wrap; gap:.8rem;
  justify-content:center;
  margin-top:2.2rem;
}

/* Fila de atajos: pastillas pequeñas con icono */
.atajos{
  display:flex; flex-wrap:wrap; gap:.55rem;
  justify-content:center;
  margin-top:1.1rem;
}
.atajo{
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:42px;
  padding:.45rem 1rem;
  border-radius:99px;
  font-size:.82rem;
  font-weight:600;
  text-decoration:none;
  color:var(--tinta-suave);
  border:1px solid var(--vidrio-borde);
  background:var(--vidrio);
  backdrop-filter:var(--desenfoque-sutil);
  -webkit-backdrop-filter:var(--desenfoque-sutil);
  transition:color var(--rapida), border-color var(--rapida), transform var(--rapida);
}
.atajo:hover{ color:var(--oro-texto); border-color:var(--oro); transform:translateY(-2px) }

/* Flecha de "sigue bajando" */
.hero__abajo{
  position:absolute;
  left:50%; bottom:1.6rem;
  transform:translateX(-50%);
  z-index:2;
  color:var(--tinta-tenue);
  display:grid; place-items:center;
  width:44px; height:44px;
  animation:rebote 2.6s ease-in-out infinite;
}
@keyframes rebote{
  0%,100%{ transform:translateX(-50%) translateY(0); opacity:.55 }
  50%    { transform:translateX(-50%) translateY(7px); opacity:1 }
}

/* Indicador Abierto / Cerrado en píldora de vidrio */
.estado{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:600; font-size:.85rem;
  color:var(--tinta-suave);
  margin-top:1.8rem;
  padding:.45rem 1rem;
  border-radius:99px;
  background:var(--vidrio);
  backdrop-filter:var(--desenfoque-sutil);
  -webkit-backdrop-filter:var(--desenfoque-sutil);
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--vidrio-brillo);
}
.estado__punto{
  width:8px; height:8px; border-radius:50%;
  background:var(--tinta-tenue);
  flex:none;
}
.estado--abierto .estado__punto{
  background:var(--ok);
  animation:pulso 2.4s ease-in-out infinite;
}
@keyframes pulso{
  0%,100%{ box-shadow:0 0 0 0 rgba(123,174,127,.5) }
  50%    { box-shadow:0 0 0 7px rgba(123,174,127,0) }
}

/* ------------------------------------------------------------
   SECCIONES DEL INICIO
   Ritmo vertical variable: cada zona respira distinto.
   ------------------------------------------------------------ */
.seccion{ position:relative }

/* 01 / CONCEPTO — rejilla asimétrica 7/5 */
.concepto{ padding:clamp(4rem,10vw,7.5rem) 0 clamp(3rem,7vw,5rem) }
.concepto__rejilla{
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.concepto h2{ font-size:clamp(1.9rem,4.6vw,3.1rem); max-width:18ch }
.concepto p{ color:var(--tinta-suave); margin-top:1.2rem; max-width:56ch }
.concepto__media{ margin-top:clamp(2rem,6vw,4.5rem) }

/* Fichas de datos duros: una sola tira de vidrio, separadas por filetes */
.fichas{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(1.2rem,3vw,2.4rem);
  margin-top:clamp(2.5rem,6vw,4rem);
  padding:clamp(1.3rem,3vw,1.9rem) clamp(1.3rem,3vw,2.2rem);
  border-radius:var(--radio-xl);
  background:var(--vidrio);
  backdrop-filter:var(--desenfoque-sutil);
  -webkit-backdrop-filter:var(--desenfoque-sutil);
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--vidrio-brillo);
}
.ficha{ flex:1 1 150px }
.ficha__dato{
  font-family:var(--display);
  font-size:clamp(1.3rem,2.6vw,1.8rem);
  color:var(--oro-texto);
}
.ficha__nota{ font-size:.85rem; color:var(--tinta-tenue); margin-top:.3rem }

/* 02 / LA NOCHE */
.noche{
  background:var(--fondo-2);
  border-block:1px solid var(--linea-suave);
  padding:clamp(4.5rem,11vw,8.5rem) 0;
  overflow:hidden;
  position:relative;
}
.noche__rejilla{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.noche h2{ font-size:clamp(1.9rem,4.6vw,3.1rem) }
.noche p{ color:var(--tinta-suave); margin-top:1.2rem; max-width:48ch }
.noche .voz{ display:block; margin-top:1.8rem; font-size:1.12rem }
/* La foto rompe el contenedor hasta el borde derecho de la pantalla */
.noche__media{ margin-right:calc(-1 * var(--margen-lateral)) }

/* ------------------------------------------------------------
   PRÓXIMAMENTE — marco de vidrio donde irán las fotos del local.
   Mientras no haya fotos, esto no es un hueco: es una promesa.
   ------------------------------------------------------------ */
.proximamente{
  position:relative;
  display:grid;
  place-items:center;
  align-content:center;   /* agrupa icono y textos al centro, no repartidos */
  text-align:center;
  gap:.2rem;
  padding:clamp(2.5rem,7vw,4rem) 1.5rem;
  border-radius:var(--radio-xl);
  overflow:hidden;
  background:
    radial-gradient(ellipse 120% 90% at 50% 0%, rgba(216,172,84,.10), transparent 62%),
    var(--vidrio);
  backdrop-filter:var(--desenfoque-sutil);
  -webkit-backdrop-filter:var(--desenfoque-sutil);
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--vidrio-brillo), var(--sombra);
}
.proximamente--alto{ aspect-ratio:1/1; max-height:460px }
.proximamente--ancho{ aspect-ratio:16/10; max-height:420px }
/* Brillo que barre el marco muy de vez en cuando */
.proximamente::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.055) 50%, transparent 60%);
  transform:translateX(-100%);
  animation:barrido 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes barrido{
  0%,68%{ transform:translateX(-100%) }
  100%  { transform:translateX(100%) }
}
.proximamente__icono{
  color:var(--oro);
  opacity:.75;
  margin-bottom:.9rem;
}
.proximamente__titulo{
  font-family:var(--display);
  font-size:clamp(1.15rem,3vw,1.6rem);
  letter-spacing:.14em;
  color:var(--tinta);
}
.proximamente__nota{
  font-family:var(--voz);
  font-style:italic;
  color:var(--tinta-suave);
  font-size:.95rem;
  max-width:26ch;
}

/* 03 / EL MURO */
.muro{ padding:clamp(4rem,9vw,6.5rem) 0 }
.muro h2{ font-size:clamp(1.8rem,4.4vw,2.8rem) }
.muro__marco{
  margin-top:2rem;
  border-radius:var(--radio-xl);
  overflow:hidden;
  background:var(--vidrio);
  backdrop-filter:var(--desenfoque-sutil);
  -webkit-backdrop-filter:var(--desenfoque-sutil);
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--vidrio-brillo), var(--sombra);
  min-height:600px;
  position:relative;
}
.muro__marco iframe{ width:100%; height:600px; border:0; display:block }
.muro__cargando{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--tinta-tenue); font-size:.9rem;
}
.muro__pie{ margin-top:1.6rem; display:flex; justify-content:center }

/* 04 / LA CARTA — tarjeta de vidrio, sin precios (que den ganas, no cuentas) */
.carta-cta{ padding:clamp(1rem,4vw,2.5rem) 0 clamp(4rem,9vw,6rem) }
.carta-cta__tarjeta{
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:clamp(2.8rem,7vw,4.5rem) clamp(1.4rem,4vw,3rem);
  border-radius:clamp(20px, 3vw, 34px);
  background:
    radial-gradient(ellipse 80% 120% at 50% 118%, rgba(216,172,84,.16), transparent 66%),
    var(--vidrio);
  backdrop-filter:var(--desenfoque);
  -webkit-backdrop-filter:var(--desenfoque);
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--vidrio-brillo), var(--vidrio-hondo), var(--sombra);
}
.carta-cta h2{ font-size:clamp(2rem,5.6vw,3.4rem) }
.carta-cta__platos{
  display:flex; flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
  margin:2rem auto;
  max-width:780px;
  list-style:none;
}
.carta-cta__platos li{
  font-weight:600;
  font-size:.92rem;
  color:var(--tinta);
  padding:.5rem 1.1rem;
  border-radius:99px;
  background:var(--vidrio);
  backdrop-filter:var(--desenfoque-sutil);
  -webkit-backdrop-filter:var(--desenfoque-sutil);
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--vidrio-brillo);
  transition:transform var(--rapida), border-color var(--rapida);
}
.carta-cta__platos li:hover{ transform:translateY(-2px); border-color:var(--linea) }

/* 05 / DÓNDE ESTAMOS */
.ubicacion{ padding:clamp(4rem,9vw,6.5rem) 0 }
.ubicacion__rejilla{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:clamp(2rem,5vw,4rem);
}
.ubicacion h2{ font-size:clamp(1.9rem,4.6vw,3rem) }
.ubicacion address{ font-style:normal; color:var(--tinta-suave); margin-top:1rem }
.ubicacion__acciones{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem }

.horarios-caja{ padding:1.4rem 1.6rem }
.horarios{ width:100%; border-collapse:collapse }
.horarios td{
  padding:.6rem 0;
  border-bottom:1px solid var(--linea-suave);
  font-size:.95rem;
}
.horarios tr:last-child td{ border-bottom:0 }
.horarios td:last-child{ text-align:right; color:var(--tinta-suave) }
.horarios tr.hoy td{ color:var(--oro-texto); font-weight:700 }

/* ------------------------------------------------------------
   FOOTER — todo centrado en una sola columna: marca, lema,
   horarios en dos tarjetas de vidrio, atajos y dirección.
   ------------------------------------------------------------ */
.footer{
  border-top:1px solid var(--linea-suave);
  padding:clamp(3rem,7vw,4.2rem) 0 1.8rem;
}
.footer__interior{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.footer__marca{ height:58px; width:auto }
.footer__lema{
  margin-top:.9rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--tinta-suave);
}

.footer__horarios{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.7rem;
  margin-top:1.8rem;
  width:100%;
}
.footer__horario{
  flex:0 1 260px;
  padding:1rem 1.2rem;
  border-radius:var(--radio);
  background:var(--vidrio);
  backdrop-filter:var(--desenfoque-sutil);
  -webkit-backdrop-filter:var(--desenfoque-sutil);
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--vidrio-brillo);
  font-size:.88rem;
  color:var(--tinta-suave);
}
.footer__dias{
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--oro-texto);
  margin-bottom:.35rem;
}

.footer__atajos{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.55rem;
  margin-top:1.6rem;
}
/* Los dos atajos que venden van en oro; el resto en vidrio */
.atajo--oro{
  background:var(--oro-degradado);
  border-color:transparent;
  color:#1A1207;
  font-weight:700;
}
.atajo--oro:hover{ color:#1A1207; border-color:transparent }

.footer__direccion{
  margin-top:1.4rem;
  font-style:normal;
  font-size:.82rem;
  color:var(--tinta-tenue);
  line-height:1.7;
}
.footer__direccion a{
  display:inline-block;
  padding-block:.6rem;
  color:inherit;
  text-decoration:none;
  white-space:nowrap;
}
.footer__direccion a:hover{ color:var(--oro-claro) }

.redes{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center }
.redes a{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:50%;
  color:var(--tinta-suave);
  background:var(--vidrio);
  backdrop-filter:var(--desenfoque-sutil);
  -webkit-backdrop-filter:var(--desenfoque-sutil);
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--vidrio-brillo);
  transition:color var(--rapida), border-color var(--rapida), transform var(--rapida);
}
.redes a:hover{ color:var(--oro-claro); border-color:var(--oro); transform:translateY(-3px) }

.footer__legal{
  width:100%;
  margin-top:2rem;
  padding-top:1.3rem;
  border-top:1px solid var(--linea-suave);
  font-size:.74rem;
  color:var(--tinta-tenue);
  display:grid;
  justify-items:center;
  gap:.7rem;
}
.aviso-licor{ max-width:62ch; line-height:1.7 }
.footer__cierre{
  display:flex; flex-wrap:wrap;
  gap:.4rem 1rem;
  align-items:center; justify-content:center;
}
/* Crédito del estudio: presente, pero sin pedir atención */
.footer__credito{
  display:inline-flex; align-items:center;
  min-height:38px;
  color:var(--tinta-tenue);
  text-decoration:none;
  opacity:.8;
  transition:color var(--rapida), opacity var(--rapida);
}
.footer__credito:hover{ color:var(--oro-claro); opacity:1 }

/* Botón de administración: discreto, al final del todo */
.btn-admin{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.66rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-tenue);
  padding:.45rem .85rem;
  min-height:38px;
  border-radius:99px;
  border:1px solid var(--linea-suave);
  opacity:.8;
  transition:color var(--rapida), border-color var(--rapida), opacity var(--rapida);
}
.btn-admin:hover{ color:var(--oro-claro); border-color:var(--linea); opacity:1 }

/* ------------------------------------------------------------
   MODAL GENÉRICO (clave de administración, plato al azar)
   ------------------------------------------------------------ */
.modal{
  position:fixed; inset:0;
  z-index:80;
  display:none;
  align-items:center; justify-content:center;
  padding:1.25rem;
  background:rgba(4,3,3,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.modal.visible{ display:flex; animation:aparecer .32s ease both }
@keyframes aparecer{ from{ opacity:0 } to{ opacity:1 } }

.modal__caja{
  width:min(440px,100%);
  padding:2rem 1.7rem 1.7rem;
  text-align:center;
  border-radius:var(--radio-xl);
  background:var(--elevada);
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--vidrio-brillo), var(--sombra-honda);
  animation:subirModal .45s cubic-bezier(.16,1.08,.32,1) both;
}
@keyframes subirModal{
  from{ opacity:0; transform:translateY(22px) scale(.97) }
  to  { opacity:1; transform:none }
}
.modal__caja h2{ font-size:1.35rem; margin-bottom:.5rem }
.modal__caja p{ color:var(--tinta-suave); font-size:.92rem }
.modal__cerrar{
  position:absolute; top:1rem; right:1rem;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:50%;
  color:var(--tinta-suave);
}
.modal__cerrar:hover{ color:var(--tinta) }
.modal__campo{
  width:100%;
  min-height:52px;
  margin-top:1.2rem;
  padding:.7rem 1.1rem;
  text-align:center;
  letter-spacing:.2em;
  border-radius:var(--radio-sm);
  background:var(--fondo-2);
  border:1px solid var(--linea-suave);
  color:var(--tinta);
}
.modal__campo:focus{ outline:none; border-color:var(--oro) }
.modal__error{ color:var(--error); font-size:.85rem; margin-top:.7rem; min-height:1.2em }
.modal__acciones{ display:flex; gap:.7rem; margin-top:1.2rem }
.modal__acciones .btn{ flex:1 }

/* ------------------------------------------------------------
   MENÚ — menu.html
   ------------------------------------------------------------ */
.cab-menu{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--fondo) 72%, transparent);
  backdrop-filter:var(--desenfoque);
  -webkit-backdrop-filter:var(--desenfoque);
  border-bottom:1px solid var(--vidrio-borde);
}
.cab-menu__fila{
  display:flex; align-items:center; gap:.9rem;
  min-height:64px;
}
.cab-menu__logo{ display:flex; align-items:center; text-decoration:none; flex:none; min-height:44px }
.cab-menu__logo img{ height:30px; width:auto }
.cab-menu__acciones{
  margin-left:auto;
  display:flex; align-items:center; gap:.25rem;
}
.cab-menu__acciones a,
.cab-menu__acciones button{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:50%;
  color:var(--tinta-suave);
  text-decoration:none;
  transition:color var(--rapida), background var(--rapida);
}
.cab-menu__acciones a:hover,
.cab-menu__acciones button:hover{ color:var(--oro-claro); background:var(--vidrio) }
.cab-menu .estado{ margin:0; font-size:.78rem; padding:.35rem .8rem }
/* En angosto el indicador cedería el paso a los botones y quedaría
   como un punto suelto sin sentido, así que se retira: el estado en
   vivo está en la portada, que es donde se lee. */
@media (max-width:760px){
  .cab-menu .estado{ display:none }
}

/* Buscador */
.buscador{ position:relative; margin:1.5rem 0 1rem }
.buscador input{
  width:100%;
  min-height:54px;
  background:var(--vidrio);
  backdrop-filter:var(--desenfoque-sutil);
  -webkit-backdrop-filter:var(--desenfoque-sutil);
  border:1px solid var(--vidrio-borde);
  border-radius:99px;
  padding:.75rem 3.2rem .75rem 3.1rem;
  color:var(--tinta);
  box-shadow:var(--vidrio-brillo);
  transition:border-color var(--rapida), background var(--rapida);
}
.buscador input::placeholder{ color:var(--tinta-tenue) }
.buscador input:focus{ outline:none; border-color:var(--oro); background:var(--vidrio-fuerte) }
.buscador__lupa{
  position:absolute; left:1.2rem; top:50%;
  transform:translateY(-50%);
  color:var(--tinta-tenue);
  pointer-events:none;
}
.buscador__limpiar{
  position:absolute; right:.5rem; top:50%;
  transform:translateY(-50%);
  width:42px; height:42px;
  display:none; place-items:center;
  color:var(--tinta-suave);
  border-radius:50%;
}
.buscador__limpiar:hover{ color:var(--tinta) }
.buscador.con-texto .buscador__limpiar{ display:grid }

/* Fila de filtros + botón de azar */
.filtros{
  display:flex; flex-wrap:wrap; gap:.5rem;
  align-items:center;
  margin-bottom:.5rem;
}
.chip{
  border:1px solid var(--vidrio-borde);
  background:var(--vidrio);
  backdrop-filter:var(--desenfoque-sutil);
  -webkit-backdrop-filter:var(--desenfoque-sutil);
  border-radius:99px;
  padding:.45rem 1rem;
  font-size:.82rem;
  font-weight:600;
  color:var(--tinta-suave);
  min-height:40px;
  box-shadow:var(--vidrio-brillo);
  transition:border-color var(--rapida), color var(--rapida),
             background var(--rapida), transform var(--rapida);
}
.chip:hover{ border-color:var(--linea); transform:translateY(-1px) }
.chip.activo{
  background:var(--oro-degradado);
  border-color:transparent;
  color:#1A1207;
}

/* "Elegí por mí" — el botón del dado */
.btn-azar{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:40px;
  padding:.45rem 1.1rem;
  border-radius:99px;
  font-size:.82rem; font-weight:700;
  color:var(--oro-texto);
  border:1px solid var(--linea);
  background:var(--vidrio);
  backdrop-filter:var(--desenfoque-sutil);
  -webkit-backdrop-filter:var(--desenfoque-sutil);
  box-shadow:var(--vidrio-brillo);
  transition:transform var(--rapida), border-color var(--rapida), background var(--rapida);
}
.btn-azar:hover{ transform:translateY(-2px); border-color:var(--oro) }
.btn-azar:active{ transform:translateY(0) scale(.97) }
.btn-azar svg{ transition:transform var(--suave) }
.btn-azar:hover svg{ transform:rotate(90deg) }

/* Resultado del azar */
.azar__marco{
  margin-top:1.3rem;
  padding:1.3rem;
  border-radius:var(--radio);
  background:var(--superficie);
  border:1px solid var(--linea);
  text-align:left;
}
.azar__categoria{
  font-size:.7rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--tinta-tenue);
}
.azar__nombre{
  font-family:var(--display);
  font-size:clamp(1.4rem,5vw,2rem);
  margin:.4rem 0 .3rem;
  line-height:1.05;
}
.azar__desc{ color:var(--tinta-suave); font-size:.9rem }
.azar__precio{
  font-family:var(--display);
  font-size:1.5rem;
  color:var(--oro-texto);
  margin-top:.7rem;
  display:block;
}
/* Sacudida corta del dado mientras "piensa" */
.girando{ animation:girar .55s cubic-bezier(.3,.1,.3,1) }
@keyframes girar{
  0%{ transform:rotate(0) } 100%{ transform:rotate(360deg) }
}

/* Pastillas de categoría */
.pastillas{
  position:sticky;
  top:64px;
  z-index:30;
  background:color-mix(in srgb, var(--fondo) 78%, transparent);
  backdrop-filter:var(--desenfoque);
  -webkit-backdrop-filter:var(--desenfoque);
  border-bottom:1px solid var(--linea-suave);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  margin-inline:calc(-1 * var(--margen-lateral));
  padding-inline:var(--margen-lateral);
}
.pastillas::-webkit-scrollbar{ display:none }
.pastillas__fila{
  display:flex; gap:.4rem;
  padding:.65rem 0;
  width:max-content;
}
.pastilla{
  white-space:nowrap;
  border-radius:99px;
  padding:.45rem 1.05rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--tinta-suave);
  min-height:40px;
  border:1px solid transparent;
  transition:background var(--rapida), color var(--rapida), border-color var(--rapida);
}
.pastilla:hover{ color:var(--tinta) }
.pastilla.activa{
  background:var(--vidrio-fuerte);
  color:var(--oro-texto);
  border-color:var(--vidrio-borde);
}

/* Categoría */
.categoria{ padding-top:2.8rem }
.categoria__cab{ margin-bottom:1.5rem }
.categoria__cab .kicker{ margin-bottom:.4rem }
.categoria__cab h2{ font-size:clamp(1.5rem,4.2vw,2.2rem) }
.categoria__cab p{
  color:var(--tinta-suave);
  font-size:.92rem;
  margin:.45rem 0 0;
  max-width:52ch;
}
/* El filete va siempre separado del bloque de arriba, haya descripción
   o no: sin este margen el rombo se monta sobre las tildes del título. */
.categoria__cab .filete{ margin-top:1.1rem }

/* Tarjeta de producto */
.productos{ display:grid; gap:.7rem }
@media (min-width:860px){ .productos{ grid-template-columns:1fr 1fr } }
.producto{
  display:flex; gap:1rem;
  align-items:flex-start;
  background:var(--vidrio);
  backdrop-filter:var(--desenfoque-sutil);
  -webkit-backdrop-filter:var(--desenfoque-sutil);
  border:1px solid var(--vidrio-borde);
  border-radius:var(--radio);
  padding:1.05rem 1.15rem;
  box-shadow:var(--vidrio-brillo);
  transition:transform var(--rapida), border-color var(--rapida), box-shadow var(--rapida);
}
.producto:hover{
  transform:translateY(-2px);
  border-color:var(--linea);
  box-shadow:var(--vidrio-brillo), var(--sombra-oro);
}
.producto__cuerpo{ flex:1; min-width:0 }
/* El nombre es un h3 por semántica, pero no lleva el display:
   va en Manrope y con su mayúscula y minúscula normales. */
.producto__nombre{
  font-family:var(--texto);
  font-weight:700;
  font-size:1rem;
  line-height:1.3;
  text-transform:none;
  letter-spacing:0;
}
.producto__desc{
  color:var(--tinta-suave);
  font-size:.86rem;
  margin-top:.32rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.producto__pie{
  display:flex; align-items:center; gap:.8rem;
  margin-top:.75rem;
  flex-wrap:wrap;
}
.producto__precio{
  font-family:var(--display);
  font-size:1.18rem;
  letter-spacing:.03em;
  color:var(--oro-texto);
}
.producto__pedir{
  font-size:.78rem;
  font-weight:700;
  color:var(--tinta-suave);
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .85rem;
  border-radius:99px;
  border:1px solid var(--vidrio-borde);
  text-decoration:none;
  min-height:38px;
  transition:color var(--rapida), border-color var(--rapida), background var(--rapida);
}
.producto__pedir:hover{ color:var(--oro-claro); border-color:var(--oro); background:var(--vidrio) }
.producto__foto{
  width:88px; height:88px;
  flex:none;
  border-radius:var(--radio-sm);
  object-fit:cover;
  border:1px solid var(--vidrio-borde);
}

/* Etiquetas */
.etiquetas{ display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.5rem }
.etiqueta{
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.2rem .6rem;
  border-radius:99px;
  border:1px solid;
}
.etiqueta--promocion{ color:var(--brasa-texto); border-color:var(--brasa) }
.etiqueta--favorito{ color:var(--oro-texto); border-color:var(--oro) }
.etiqueta--compartir{ color:var(--menta-texto); border-color:var(--menta) }
.etiqueta--sinlicor{ color:var(--tinta-suave); border-color:var(--tinta-tenue) }
.etiqueta--agotado{ color:var(--tinta-tenue); border-color:var(--tinta-tenue) }

.producto.agotado{ opacity:.5 }
.producto.agotado .producto__precio{ text-decoration:line-through }
.producto.agotado .producto__pedir{ pointer-events:none; opacity:.6 }

/* Esqueletos */
@keyframes brillo{ 0%{ background-position:-300px 0 } 100%{ background-position:300px 0 } }
.esqueleto{
  border-radius:var(--radio);
  background:var(--vidrio);
  border:1px solid var(--vidrio-borde);
  min-height:112px;
  position:relative;
  overflow:hidden;
}
.esqueleto::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(245,239,227,.05), transparent);
  background-size:300px 100%;
  animation:brillo 1.4s infinite linear;
}

/* Cero resultados */
.sin-resultados{ text-align:center; padding:4rem 1rem; display:none }
.sin-resultados.visible{ display:block }
.sin-resultados p{ color:var(--tinta-suave); margin-bottom:1.4rem }

/* Botón flotante de volver arriba */
.subir{
  position:fixed;
  right:1.1rem; bottom:1.1rem;
  z-index:35;
  width:52px; height:52px;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--vidrio-fuerte);
  backdrop-filter:var(--desenfoque);
  -webkit-backdrop-filter:var(--desenfoque);
  border:1px solid var(--vidrio-borde);
  color:var(--oro-texto);
  box-shadow:var(--vidrio-brillo), var(--sombra);
  opacity:0;
  pointer-events:none;
  transform:translateY(10px) scale(.9);
  transition:opacity var(--rapida), transform var(--rapida);
}
.subir.visible{ opacity:1; pointer-events:auto; transform:none }

/* Pie del menú */
.pie-menu{
  margin-top:3.5rem;
  padding:2rem 0 6rem;
  border-top:1px solid var(--linea-suave);
  font-size:.8rem;
  color:var(--tinta-tenue);
  display:grid;
  gap:.6rem;
}

/* Cinta de vista previa */
.cinta-preview{
  position:sticky; top:0; z-index:60;
  background:var(--brasa);
  color:#FFF6EC;
  text-align:center;
  font-weight:700;
  font-size:.85rem;
  padding:.5rem 1rem;
}

/* Aviso de carga fallida */
.aviso-carga{
  margin:2rem 0;
  padding:1.5rem;
  border-radius:var(--radio);
  background:var(--vidrio);
  border:1px solid var(--linea);
  color:var(--tinta-suave);
  font-size:.92rem;
  display:none;
}
.aviso-carga.visible{ display:block }

/* ------------------------------------------------------------
   PUERTA DE PREAPERTURA
   ------------------------------------------------------------ */
#puerta{ display:none }
/* El centrado se hace con márgenes automáticos, no con justify-content:
   así, cuando el contenido es más alto que la pantalla, la parte de
   arriba sigue siendo alcanzable en vez de quedar recortada. */
html.cerrado #puerta{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  position:fixed;
  inset:0;
  z-index:100;
  overflow-y:auto;
  background:var(--fondo);
  padding:2.5rem 1.25rem;
  text-align:center;
}
html.cerrado, html.cerrado body{ overflow:hidden }

.puerta__interior{
  width:min(680px,100%);
  margin:auto;
  position:relative;
  z-index:2;
}
.puerta__emblema{
  width:clamp(160px, 34vw, 230px);
  margin:0 auto 2rem;
  filter:drop-shadow(0 0 60px rgba(216,172,84,.25));
  animation:flotar 7s ease-in-out infinite;
}
.puerta__titulo{
  font-size:clamp(1.7rem, 6.2vw, 2.9rem);
  line-height:1.02;
  max-width:20ch;
  margin-inline:auto;
}
.puerta__bajada{
  color:var(--tinta-suave);
  margin:1.1rem auto 0;
  max-width:40ch;
  font-size:1rem;
}

/* Cuenta regresiva en bloques de vidrio */
.cuenta{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:clamp(.5rem,2vw,.85rem);
  margin:2.4rem auto 0;
}
.cuenta__bloque{
  min-width:clamp(62px,17vw,86px);
  padding:.85rem .5rem .65rem;
  border-radius:var(--radio);
  background:var(--vidrio);
  backdrop-filter:var(--desenfoque-sutil);
  -webkit-backdrop-filter:var(--desenfoque-sutil);
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--vidrio-brillo);
}
.cuenta__num{
  font-family:var(--display);
  font-size:clamp(1.9rem, 7vw, 3rem);
  line-height:1;
  color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
/* Latido corto cada vez que el número cambia */
.cuenta__num.tic{ animation:tic .45s ease }
@keyframes tic{
  0%{ transform:translateY(-3px); opacity:.35 }
  100%{ transform:none; opacity:1 }
}
.cuenta__rotulo{
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
  margin-top:.5rem;
}
.puerta__fecha{ margin-top:1.3rem; font-size:.92rem; color:var(--tinta-suave) }

/* Captación */
.puerta__captacion{ margin:2.6rem auto 0; width:min(440px,100%) }
.puerta__captacion > p{ font-weight:600; font-size:.96rem }
.puerta__form{ display:flex; gap:.5rem; margin-top:1rem }
.puerta__form input{
  flex:1; min-width:0; min-height:52px;
  background:var(--vidrio);
  backdrop-filter:var(--desenfoque-sutil);
  -webkit-backdrop-filter:var(--desenfoque-sutil);
  border:1px solid var(--vidrio-borde);
  border-radius:99px;
  padding:.7rem 1.2rem;
  color:var(--tinta);
  box-shadow:var(--vidrio-brillo);
}
.puerta__form input:focus{ outline:none; border-color:var(--oro) }
.puerta__form input::placeholder{ color:var(--tinta-tenue) }
/* Campo trampa: fuera de la vista, no display:none */
.p-trampa{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px;
  overflow:hidden;
}
.puerta__nota{ font-size:.74rem; color:var(--tinta-tenue); margin-top:.7rem }
.puerta__error{ color:var(--error); font-size:.84rem; margin-top:.7rem; min-height:1.2em }

.puerta__codigo{ margin-top:1.8rem }
.puerta__codigo-enlace{
  font-size:.84rem;
  color:var(--tinta-tenue);
  text-decoration:underline;
  text-underline-offset:4px;
  padding:.5rem;
  min-height:38px;
}
.puerta__codigo-enlace:hover{ color:var(--tinta-suave) }
.puerta__codigo-form{
  display:none;
  gap:.5rem;
  margin:1rem auto 0;
  width:min(340px,100%);
}
.puerta__codigo-form.visible{ display:flex; animation:subirModal .4s cubic-bezier(.16,1.08,.32,1) both }
.puerta__codigo-form input{
  flex:1; min-width:0; min-height:48px;
  background:var(--vidrio);
  border:1px solid var(--vidrio-borde);
  border-radius:99px;
  padding:.55rem 1.1rem;
  color:var(--tinta);
  text-transform:uppercase;
  letter-spacing:.14em;
  text-align:center;
}
.puerta__codigo-form input:focus{ outline:none; border-color:var(--oro) }

.puerta__pie{
  margin-top:3rem;
  padding-top:1.8rem;
  border-top:1px solid var(--linea-suave);
  font-size:.86rem;
  color:var(--tinta-suave);
  display:grid;
  gap:1rem;
  justify-items:center;
}
.puerta__pie > a{
  display:inline-flex; align-items:center;
  min-height:42px;
  color:var(--tinta-suave);
  text-decoration:none;
}
.puerta__pie a{ color:var(--tinta-suave); text-decoration:none }
.puerta__pie a:hover{ color:var(--oro-claro) }

#puerta.abriendo{
  transition:opacity .75s ease, transform .75s ease;
  opacity:0;
  transform:scale(1.035);
  pointer-events:none;
}

/* ------------------------------------------------------------
   PANEL DE ADMINISTRACIÓN — admin.html
   ------------------------------------------------------------ */
.admin{ padding-bottom:5rem }
.admin main{ width:min(880px,100% - 2rem); margin-inline:auto }

.adm-entrada{
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:2rem 1.25rem;
}
.adm-entrada__caja{
  width:min(430px,100%);
  padding:2.2rem 1.7rem;
  border-radius:var(--radio-xl);
  background:var(--vidrio);
  backdrop-filter:var(--desenfoque);
  -webkit-backdrop-filter:var(--desenfoque);
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--vidrio-brillo), var(--sombra-honda);
}
.adm-entrada__caja img{ height:46px; width:auto; margin:0 auto 1.4rem }
.adm-entrada__caja h1{ font-size:1.3rem; text-align:center }
.adm-sub{
  text-align:center;
  font-size:.88rem;
  color:var(--tinta-suave);
  margin-top:.5rem;
}

.campo{ display:grid; gap:.4rem; margin-top:1.1rem }
.campo label{ font-size:.82rem; font-weight:700; color:var(--tinta-suave) }
.campo input,
.campo select,
.campo textarea{
  min-height:50px;
  background:var(--fondo-2);
  border:1px solid var(--linea-suave);
  border-radius:var(--radio-sm);
  padding:.65rem .95rem;
  color:var(--tinta);
  width:100%;
  transition:border-color var(--rapida);
}
.campo textarea{ min-height:92px; resize:vertical }
.campo input:focus,
.campo select:focus,
.campo textarea:focus{ outline:none; border-color:var(--oro) }
.campo--fila{ grid-template-columns:auto 1fr; align-items:center; gap:.7rem }
.campo .ayuda{ font-size:.76rem; color:var(--tinta-tenue); font-weight:400 }

.adm-error{ color:var(--error); font-size:.85rem; margin-top:.9rem; min-height:1.2em }

details.plegable{
  margin-top:1.3rem;
  border:1px solid var(--linea-suave);
  border-radius:var(--radio-sm);
  background:var(--fondo-2);
}
details.plegable summary{
  cursor:pointer;
  padding:.85rem 1rem;
  font-weight:700;
  font-size:.88rem;
  color:var(--tinta-suave);
  list-style:none;
  min-height:44px;
}
details.plegable summary::-webkit-details-marker{ display:none }
details.plegable[open] summary{ color:var(--oro-texto) }
details.plegable .plegable__cuerpo{ padding:0 1rem 1rem; font-size:.88rem; color:var(--tinta-suave) }
details.plegable ol{ padding-left:1.2rem; display:grid; gap:.5rem }

.adm-cab{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--fondo) 78%, transparent);
  backdrop-filter:var(--desenfoque);
  -webkit-backdrop-filter:var(--desenfoque);
  border-bottom:1px solid var(--vidrio-borde);
}
.adm-cab__fila{
  width:min(880px,100% - 2rem);
  margin-inline:auto;
  display:flex; align-items:center; gap:.8rem;
  min-height:62px;
  flex-wrap:wrap;
  padding-block:.55rem;
}
.adm-cab__fila img{ height:30px; width:auto }
.adm-cab__estado{
  font-size:.78rem;
  color:var(--tinta-tenue);
  line-height:1.3;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.adm-cab__acciones{ margin-left:auto; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap }
.adm-cab .btn{ min-height:42px; padding:.45rem 1.1rem; font-size:.85rem }

.adm-pestanas{
  display:flex; gap:.3rem;
  overflow-x:auto;
  scrollbar-width:none;
  margin:1.3rem 0;
  border-bottom:1px solid var(--linea-suave);
}
.adm-pestanas::-webkit-scrollbar{ display:none }
.adm-pestana{
  white-space:nowrap;
  padding:.7rem 1.05rem;
  font-weight:700;
  font-size:.88rem;
  color:var(--tinta-tenue);
  border-bottom:2px solid transparent;
  min-height:46px;
  transition:color var(--rapida), border-color var(--rapida);
}
.adm-pestana.activa{ color:var(--oro-texto); border-bottom-color:var(--oro) }

/* Barra de acciones: buscar + agregar */
.adm-barra{
  display:flex; gap:.6rem; align-items:center;
  flex-wrap:wrap;
  margin-bottom:1rem;
}
.adm-buscar{ position:relative; flex:1; min-width:180px }
.adm-buscar svg{
  position:absolute; left:1rem; top:50%;
  transform:translateY(-50%);
  color:var(--tinta-tenue);
  pointer-events:none;
}
.adm-buscar input{
  width:100%;
  min-height:48px;
  padding:.6rem 1rem .6rem 2.9rem;
  border-radius:99px;
  background:var(--vidrio);
  border:1px solid var(--vidrio-borde);
  color:var(--tinta);
}
.adm-buscar input:focus{ outline:none; border-color:var(--oro) }

.adm-filtros{
  display:flex; gap:.4rem;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:.4rem;
  margin-bottom:.8rem;
}
.adm-filtros::-webkit-scrollbar{ display:none }
.adm-filtro{
  white-space:nowrap;
  min-height:38px;
  padding:.4rem .9rem;
  border-radius:99px;
  font-size:.8rem;
  font-weight:600;
  color:var(--tinta-suave);
  border:1px solid var(--vidrio-borde);
  background:var(--vidrio);
  transition:background var(--rapida), color var(--rapida);
}
.adm-filtro.activo{ background:var(--oro-degradado); color:#1A1207; border-color:transparent }

.adm-resumen{ font-size:.8rem; color:var(--tinta-tenue); margin-bottom:.8rem }
.adm-vacio{ text-align:center; color:var(--tinta-tenue); padding:2.5rem 1rem }
.adm-titulo{ font-size:1.05rem; margin:2rem 0 1rem }
.adm-lista{ padding-left:1.2rem; display:grid; gap:.55rem }
.adm-hash{
  font-family:ui-monospace, monospace;
  font-size:.72rem;
  color:var(--oro-texto);
  word-break:break-all;
  margin-top:.8rem;
}

/* Rejilla de productos, al estilo de una caja registradora */
.adm-productos{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
  gap:.7rem;
}
.adm-tarjeta{
  position:relative;
  display:flex; flex-direction:column;
  text-align:left;
  border-radius:var(--radio);
  overflow:hidden;
  background:var(--vidrio);
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--vidrio-brillo);
  transition:transform var(--rapida), border-color var(--rapida);
}
.adm-tarjeta:hover{ transform:translateY(-2px); border-color:var(--linea) }
.adm-tarjeta__foto{
  aspect-ratio:1;
  width:100%;
  object-fit:cover;
  background:var(--superficie-2);
  display:block;
}
.adm-tarjeta__sinfoto{
  aspect-ratio:1;
  display:grid; place-items:center;
  background:
    radial-gradient(ellipse at center, rgba(216,172,84,.09), transparent 70%),
    var(--superficie-2);
  color:var(--tinta-tenue);
}
.adm-tarjeta__cuerpo{ padding:.7rem .8rem .8rem; display:grid; gap:.15rem }
.adm-tarjeta__nombre{
  font-weight:700; font-size:.85rem; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.adm-tarjeta__precio{ font-family:var(--display); font-size:1rem; color:var(--oro-texto) }
.adm-tarjeta__pie{
  display:flex; align-items:center; justify-content:space-between;
  gap:.4rem;
  padding:.5rem .6rem .6rem .8rem;
  border-top:1px solid var(--linea-suave);
  margin-top:auto;
}
.adm-tarjeta__rotulo{ font-size:.66rem; color:var(--tinta-tenue); font-weight:700; letter-spacing:.08em; text-transform:uppercase }
.adm-tarjeta.agotado .adm-tarjeta__foto,
.adm-tarjeta.agotado .adm-tarjeta__sinfoto{ opacity:.35 }
.adm-tarjeta.agotado .adm-tarjeta__nombre{ color:var(--tinta-tenue) }
.adm-tarjeta.agotado .adm-tarjeta__precio{ text-decoration:line-through; color:var(--tinta-tenue) }
.adm-tarjeta__editar{
  position:absolute; inset:0 0 auto 0;
  height:100%;
  width:100%;
  z-index:1;
}
.adm-tarjeta__pie *{ position:relative; z-index:2 }

/* Interruptor pequeño para la tarjeta */
.interruptor--chico{ width:40px; height:24px }
.interruptor--chico::after{ width:18px; height:18px }
.interruptor--chico[aria-checked="true"]::after{ transform:translateX(16px) }

.adm-fila-switch{
  display:flex; align-items:center; gap:1rem;
  justify-content:space-between;
  padding:1rem 1.1rem;
  border-radius:var(--radio);
  background:var(--vidrio);
  border:1px solid var(--vidrio-borde);
  margin:1.2rem 0;
}
.adm-fila-switch .ayuda{ display:block; font-size:.78rem; color:var(--tinta-tenue); margin-top:.2rem }

.adm-pie-acciones{
  display:flex; gap:.6rem; flex-wrap:wrap;
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--linea-suave);
}

/* Barra flotante de publicación */
.adm-publicar{
  position:fixed;
  left:50%; bottom:1rem;
  transform:translateX(-50%);
  z-index:60;
  width:min(680px, calc(100vw - 1.6rem));
  display:flex; align-items:center; gap:1rem;
  flex-wrap:wrap;
  justify-content:space-between;
  padding:.7rem .8rem .7rem 1.2rem;
  border-radius:99px;
  background:var(--elevada);
  border:1px solid var(--linea);
  box-shadow:var(--vidrio-brillo), var(--sombra-honda);
  animation:subirModal .4s cubic-bezier(.16,1.08,.32,1) both;
}
.adm-publicar span{ font-size:.85rem; font-weight:700 }
.adm-publicar__botones{ display:flex; gap:.5rem; margin-left:auto }
.adm-publicar .btn{ min-height:42px; padding:.45rem 1.2rem; font-size:.85rem }
@media (max-width:520px){
  .adm-publicar{ border-radius:var(--radio-xl); justify-content:center; text-align:center }
  .adm-publicar__botones{ margin-left:0; width:100% }
  .adm-publicar__botones .btn{ flex:1 }
}

.btn-icono{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:var(--radio-sm);
  color:var(--tinta-suave);
  flex:none;
  transition:color var(--rapida), background var(--rapida);
}
.btn-icono:hover{ color:var(--oro-texto); background:var(--vidrio) }
.btn-icono.peligro:hover{ color:var(--error) }
.btn-icono[disabled]{ opacity:.3; pointer-events:none }

.interruptor{
  position:relative;
  width:48px; height:28px; flex:none;
  border-radius:99px;
  background:var(--elevada);
  border:1px solid var(--linea-suave);
  transition:background var(--rapida), border-color var(--rapida);
}
.interruptor::after{
  content:"";
  position:absolute;
  top:2px; left:2px;
  width:22px; height:22px;
  border-radius:50%;
  background:var(--tinta-tenue);
  transition:transform var(--rapida), background var(--rapida);
}
.interruptor[aria-checked="true"]{ background:var(--oro-hondo); border-color:var(--oro-hondo) }
.interruptor[aria-checked="true"]::after{ transform:translateX(20px); background:var(--oro-claro) }

.adm-modal{
  position:fixed; inset:0; z-index:70;
  display:none;
  align-items:flex-end;
  justify-content:center;
  background:rgba(4,3,3,.7);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.adm-modal.visible{ display:flex }
.adm-modal__caja{
  width:min(560px,100%);
  max-height:92svh;
  overflow-y:auto;
  background:var(--elevada);
  border:1px solid var(--vidrio-borde);
  border-radius:var(--radio-xl) var(--radio-xl) 0 0;
  padding:1.5rem 1.35rem 2rem;
  animation:subirModal .4s cubic-bezier(.16,1.08,.32,1) both;
}
@media (min-width:640px){
  .adm-modal{ align-items:center; padding:2rem }
  .adm-modal__caja{ border-radius:var(--radio-xl) }
}
.adm-modal__cab{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem }
.adm-modal__cab h2{ font-size:1.15rem }

.adm-etiquetas{ display:flex; flex-wrap:wrap; gap:.5rem }
.adm-etiquetas label{
  display:inline-flex; align-items:center; gap:.45rem;
  border:1px solid var(--linea-suave);
  border-radius:99px;
  padding:.5rem 1rem;
  font-size:.82rem;
  cursor:pointer;
  min-height:42px;
}
.adm-etiquetas input{ accent-color:var(--oro) }
.adm-etiquetas label:has(input:checked){ border-color:var(--oro); color:var(--oro-texto) }

.adm-imagen-preview{
  width:124px; height:124px;
  border-radius:var(--radio-sm);
  object-fit:cover;
  border:1px solid var(--vidrio-borde);
  display:none;
}
.adm-imagen-preview.visible{ display:block }

.adm-acciones-modal{ display:flex; gap:.7rem; margin-top:1.6rem }
.adm-acciones-modal .btn{ flex:1 }

.adm-codigo{
  display:flex; align-items:center; gap:.7rem;
  padding:.75rem 1rem;
  border:1px solid var(--vidrio-borde);
  border-radius:var(--radio-sm);
  margin-bottom:.6rem;
  background:var(--vidrio);
  flex-wrap:wrap;
}
.adm-codigo__etiqueta{ font-weight:700; flex:1; min-width:120px }
.adm-codigo__hash{ font-size:.7rem; color:var(--tinta-tenue); font-family:ui-monospace, monospace }

.adm-codigo-nuevo{
  border:1px dashed var(--oro);
  border-radius:var(--radio-sm);
  padding:1.1rem;
  margin:.9rem 0;
  text-align:center;
}
.adm-codigo-nuevo .codigo-grande{
  font-family:var(--display);
  font-weight:400;
  font-size:1.7rem;
  letter-spacing:.16em;
  color:var(--oro-texto);
  display:block;
  margin:.4rem 0 .9rem;
}

.adm-tabla{ width:100%; border-collapse:collapse; font-size:.85rem }
.adm-tabla th{
  text-align:left;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tinta-tenue);
  padding:.55rem .6rem;
  border-bottom:1px solid var(--linea);
}
.adm-tabla td{
  padding:.6rem;
  border-bottom:1px solid var(--linea-suave);
  color:var(--tinta-suave);
}

.toast{
  position:fixed;
  left:50%; bottom:1.4rem;
  transform:translateX(-50%) translateY(20px);
  z-index:90;
  background:var(--elevada);
  border:1px solid var(--vidrio-borde);
  border-radius:99px;
  padding:.85rem 1.4rem;
  font-size:.88rem;
  box-shadow:var(--vidrio-brillo), var(--sombra);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--rapida), transform var(--rapida);
  max-width:min(480px, calc(100vw - 2rem));
  text-align:center;
}
.toast.visible{ opacity:1; transform:translateX(-50%) translateY(0) }
.toast.error{ border-color:var(--error) }
.toast a{ color:var(--oro-texto) }

/* ------------------------------------------------------------
   REVELADO AL HACER SCROLL — una sola vez, 14px, con escalonado.
   ------------------------------------------------------------ */
.revelar{
  opacity:0;
  transform:translateY(14px);
  transition:opacity var(--resorte), transform var(--resorte);
  transition-delay:var(--retraso, 0ms);
}
.revelar.visto{ opacity:1; transform:none }

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width:820px){
  .concepto__rejilla,
  .noche__rejilla,
  .ubicacion__rejilla{ grid-template-columns:1fr }
  .concepto__media{ margin-top:0; max-width:440px }
  .noche__media{ margin-inline:calc(-1 * var(--margen-lateral)) }
  .noche__media .proximamente{ border-radius:0; border-inline:0 }
  .noche__rejilla{ gap:2.5rem }
  .filtros{ gap:.45rem }
  .btn-azar{ margin-left:0; width:100%; justify-content:center }

  /* Los filetes verticales solo funcionan en una fila. Al envolver
     quedaría uno suelto en el borde, así que en angosto se retiran
     y las fichas pasan a una rejilla limpia de dos columnas. */
  .fichas{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 1.2rem }
  .fichas .filete-v{ display:none }
}
@media (max-width:420px){
  .fichas{ grid-template-columns:1fr }
}

/* ------------------------------------------------------------
   MOVIMIENTO REDUCIDO — se apaga todo lo animado.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .revelar{ opacity:1; transform:none }
  .orbes{ display:none }
}