/* =========================================================
   MI NEGRA · Lounge café — Benetússer
   Paleta y marca tomadas del logotipo real del local.
   ========================================================= */

:root{
  --negro:      #080708;
  --negro-2:    #100d0f;
  --superficie: #171316;
  --superficie-2:#1e181c;
  --borde:      #2a2126;
  --borde-vivo: rgba(227,28,121,.35);

  --rosa:       #e31c79;
  --rosa-2:     #ff5da6;
  --rosa-tenue: rgba(227,28,121,.14);
  --dorado:     #d6b274;
  --dorado-2:   #f0d9a8;
  --crema:      #f4ece2;
  --gris:       #a3949a;
  --gris-2:     #6e6267;

  --display: "Cormorant Garamond", Georgia, serif;
  --texto:   "Montserrat", "Segoe UI", system-ui, sans-serif;

  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-io:  cubic-bezier(.65,0,.35,1);

  --cabecera: 78px;
  --ancho: 1180px;
  --radio: 20px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  background:var(--negro);
  color:var(--crema);
  font-family:var(--texto);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,video{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }
button{ font:inherit; color:inherit; background:none; border:none }

::selection{ background:var(--rosa); color:#fff }
:focus-visible{ outline:2px solid var(--rosa-2); outline-offset:3px; border-radius:6px }

/* grano sutil sobre todo: le quita el plano digital al negro */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------
   BARRA DE PROGRESO DE LECTURA
   --------------------------------------------------------- */
.progreso{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:60;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--rosa),var(--dorado));
}

/* ---------------------------------------------------------
   TIPOGRAFÍA
   --------------------------------------------------------- */
h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.08; letter-spacing:-.01em }
em{ font-style:italic }

.kicker{
  display:inline-flex; align-items:center; gap:12px;
  font-size:.68rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--rosa-2); margin-bottom:20px;
}
.kicker::before{
  content:""; width:26px; height:1px; background:var(--rosa);
}
.kicker.oro{ color:var(--dorado) }
.kicker.oro::before{ background:var(--dorado) }

.titular{
  font-size:clamp(2.1rem,5.2vw,3.6rem);
  max-width:20ch; margin-bottom:26px;
}
.titular em{ color:var(--dorado-2) }
.titular.centro{ margin-left:auto; margin-right:auto; text-align:center }

.parrafo{ color:var(--gris); max-width:60ch }
.parrafo + .parrafo{ margin-top:16px }
.parrafo.grande{ font-size:1.1rem; color:#c5b6bd; line-height:1.72 }
.parrafo.centro{ margin-left:auto; margin-right:auto; text-align:center }

/* ---------------------------------------------------------
   BOTONES
   --------------------------------------------------------- */
.acciones{ display:flex; gap:14px; flex-wrap:wrap; margin-top:36px }
.acciones.centro{ justify-content:center }

.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 32px; border-radius:999px;
  font-size:.82rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  border:1px solid transparent;
  transition:color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.btn span{ position:relative; z-index:1 }
.btn::before{
  content:""; position:absolute; inset:0; z-index:0;
  transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover::before{ transform:translateY(0) }

.btn-rosa{ background:var(--rosa); color:#fff; border-color:var(--rosa) }
.btn-rosa::before{ background:var(--dorado) }
.btn-rosa:hover{ color:var(--negro); border-color:var(--dorado); box-shadow:0 8px 30px rgba(214,178,116,.22) }

.btn-oro{ color:var(--dorado-2); border-color:var(--dorado) }
.btn-oro::before{ background:var(--dorado) }
.btn-oro:hover{ color:var(--negro) }

.btn-linea{ color:var(--crema); border-color:var(--borde) }
.btn-linea::before{ background:var(--rosa) }
.btn-linea:hover{ color:#fff; border-color:var(--rosa) }

/* ---------------------------------------------------------
   CABECERA
   --------------------------------------------------------- */
.cabecera{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:var(--cabecera);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(18px,4vw,48px);
  background:linear-gradient(to bottom, rgba(8,7,8,.9), rgba(8,7,8,0));
  border-bottom:1px solid transparent;
  transition:height .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.cabecera.compacta{
  height:62px;
  background:rgba(8,7,8,.92);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--borde);
}

.marca{ display:flex; align-items:center; gap:11px; z-index:2 }
.marca-logo{ height:48px; width:auto; transition:height .4s var(--ease) }
.cabecera.compacta .marca-logo{ height:40px }
.marca-texto{ display:none; font-family:var(--display); font-style:italic; font-size:1.5rem; color:var(--dorado-2) }
.marca.sin-logo .marca-logo{ display:none }
.marca.sin-logo .marca-texto{ display:block }

.nav{ display:flex; align-items:center; gap:clamp(16px,2.4vw,34px) }
.nav a{
  position:relative; padding:6px 2px;
  font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--crema); opacity:.75;
  transition:opacity .3s, color .3s;
}
.nav a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--rosa); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav a:not(.nav-cta):hover{ opacity:1 }
.nav a:not(.nav-cta):hover::after{ transform:scaleX(1); transform-origin:left }
.nav a[aria-current="page"]{ opacity:1; color:var(--dorado-2) }
.nav a[aria-current="page"]:not(.nav-cta)::after{ transform:scaleX(1); background:var(--dorado) }

.nav-cta{
  opacity:1 !important;
  border:1px solid var(--rosa); color:var(--rosa-2) !important;
  padding:10px 22px !important; border-radius:999px;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.nav-cta:hover{ background:var(--rosa); color:#fff !important }

.menu-btn{ display:none; flex-direction:column; gap:6px; cursor:pointer; padding:8px; z-index:2 }
.menu-btn i{ display:block; width:24px; height:1.5px; background:var(--crema); transition:transform .4s var(--ease), opacity .25s }
.menu-btn[aria-expanded="true"] i:nth-child(1){ transform:translateY(7.5px) rotate(45deg) }
.menu-btn[aria-expanded="true"] i:nth-child(2){ opacity:0 }
.menu-btn[aria-expanded="true"] i:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg) }

/* ---------------------------------------------------------
   SECCIONES
   --------------------------------------------------------- */
.seccion{ padding:clamp(84px,10vw,140px) clamp(18px,5vw,48px); position:relative }
.seccion.compacta{ padding-top:clamp(56px,7vw,90px); padding-bottom:clamp(56px,7vw,90px) }
.marco{ max-width:var(--ancho); margin:0 auto; width:100% }
.fondo-2{ background:var(--negro-2) }
.linea-arriba{ border-top:1px solid var(--borde) }

.dos-col{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(34px,5.5vw,76px); align-items:center }
.dos-col.arriba{ align-items:start }

/* número decorativo de fondo */
.marca-agua{
  position:absolute; right:clamp(10px,4vw,60px); top:clamp(30px,5vw,60px);
  font-family:var(--display); font-size:clamp(6rem,16vw,13rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(227,28,121,.13);
  pointer-events:none; user-select:none; z-index:0;
}
.seccion > .marco{ position:relative; z-index:1 }

/* ---------------------------------------------------------
   VÍDEO
   --------------------------------------------------------- */
.con-video{ position:relative; overflow:hidden; isolation:isolate }
.video-fondo{
  position:absolute; top:-8%; left:0; width:100%; height:116%;
  object-fit:cover; z-index:-2;
  opacity:0; transition:opacity 1.4s var(--ease);
  will-change:transform;
}
.video-fondo.puesto{ opacity:1 }

.velo{ position:absolute; inset:0; z-index:-1 }
.velo.lado{
  background:
    linear-gradient(100deg, rgba(8,7,8,.96) 6%, rgba(8,7,8,.74) 48%, rgba(8,7,8,.44) 100%),
    linear-gradient(to top, rgba(8,7,8,.97), rgba(8,7,8,.25) 50%, rgba(8,7,8,.7));
}
.velo.centro{
  background:
    radial-gradient(68% 58% at 50% 46%, rgba(8,7,8,.5) 0%, rgba(8,7,8,.86) 62%, rgba(8,7,8,.98) 100%),
    linear-gradient(to bottom, rgba(8,7,8,.72), rgba(8,7,8,.36) 38%, rgba(8,7,8,.95));
}
.velo.suave{
  background:linear-gradient(to top, rgba(8,7,8,.95) 4%, rgba(8,7,8,.42) 55%, rgba(8,7,8,.78));
}

/* recuadro de vídeo dentro de una sección */
.marco-video{
  position:relative; overflow:hidden;
  border-radius:var(--radio); border:1px solid var(--borde);
  aspect-ratio:4/5; background:var(--superficie);
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s var(--ease-io);
}
.marco-video.visible{ clip-path:inset(0 0 0 0) }
.marco-video.ancho{ aspect-ratio:16/9 }
.marco-video video,.marco-video img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.marco-video video{ opacity:0; transition:opacity 1.2s var(--ease) }
.marco-video video.puesto{ opacity:1 }
.marco-video::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(8,7,8,.7), transparent 52%);
}
.marco-video figcaption{
  position:absolute; left:24px; right:24px; bottom:20px; z-index:2;
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--crema);
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:calc(var(--cabecera) + 40px) clamp(18px,5vw,48px) 120px;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(42% 36% at 50% 30%, rgba(227,28,121,.16), transparent 68%),
    radial-gradient(46% 40% at 82% 88%, rgba(214,178,116,.09), transparent 66%);
}
/* El contenido del hero va por encima del degradado. Se excluyen las capas de
   fondo (vídeo, velo, humo y luz), que van detrás en posición absoluta: si
   entraran aquí, este `position:relative` les ganaría y acabarían colocadas en
   el flujo normal, como un recuadro suelto en mitad de la portada. */
.hero > *:not(.video-fondo):not(.velo):not(.humo):not(.luz){ position:relative }

.hero-logo{
  width:min(52vw,196px); margin:0 auto 32px;
  filter:drop-shadow(0 14px 46px rgba(227,28,121,.3));
}
.hero-nombre{ display:none; font-family:var(--display); font-style:italic; font-size:clamp(3rem,11vw,5.4rem); color:var(--dorado-2); margin-bottom:20px }
.hero.sin-logo .hero-logo{ display:none }
.hero.sin-logo .hero-nombre{ display:block }

.hero-lema{
  font-family:var(--display);
  font-size:clamp(1.5rem,3.6vw,2.35rem);
  line-height:1.28; color:var(--crema);
  max-width:19ch; margin:0 auto;
}
.hero-lema em{ color:var(--rosa-2) }

.hero-sub{
  margin:22px auto 0; max-width:44ch;
  color:var(--gris); font-size:.98rem;
}

.hero-pastilla{
  display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:8px 12px; margin-top:40px; padding:12px 26px;
  max-width:min(100%,470px);
  border:1px solid var(--borde); border-radius:999px;
  background:rgba(23,19,22,.5); backdrop-filter:blur(6px);
  font-size:.78rem; color:var(--gris); text-align:center; line-height:1.5;
}
.hero-pastilla b{ color:var(--dorado-2); font-weight:600 }
.punto{
  width:7px; height:7px; border-radius:50%; background:var(--rosa);
  animation:latido 2.6s ease-out infinite;
}
@keyframes latido{
  0%{ box-shadow:0 0 0 0 rgba(227,28,121,.6) }
  70%{ box-shadow:0 0 0 11px rgba(227,28,121,0) }
  100%{ box-shadow:0 0 0 0 rgba(227,28,121,0) }
}

.hero-abajo{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--gris-2);
}
.hero-abajo i{ width:1px; height:40px; background:linear-gradient(var(--rosa),transparent); animation:bajar 2s ease-in-out infinite }
.hero-abajo span{ font-size:.6rem; letter-spacing:.3em; text-transform:uppercase }
@keyframes bajar{
  0%{ transform:scaleY(0); transform-origin:top }
  48%{ transform:scaleY(1); transform-origin:top }
  50%{ transform:scaleY(1); transform-origin:bottom }
  100%{ transform:scaleY(0); transform-origin:bottom }
}

/* cabecera de las ventanas interiores */
.portada{
  position:relative; min-height:clamp(380px,56vh,540px);
  display:flex; align-items:flex-end;
  padding:calc(var(--cabecera) + 70px) clamp(18px,5vw,48px) 60px;
}
.portada h1{ font-size:clamp(2.6rem,7vw,4.6rem) }
.portada h1 em{ color:var(--rosa-2) }
.portada .parrafo{ margin-top:18px; max-width:50ch }

/* ---------------------------------------------------------
   CINTA (marquesina)
   --------------------------------------------------------- */
.cinta{
  border-top:1px solid var(--borde); border-bottom:1px solid var(--borde);
  background:var(--negro-2);
  padding:20px 0; overflow:hidden;
  display:flex; gap:0;
}
.cinta-pista{
  display:flex; align-items:center; gap:34px;
  flex:0 0 auto; padding-right:34px;
  animation:correr 34s linear infinite;
}
.cinta:hover .cinta-pista{ animation-play-state:paused }
.cinta span{
  font-family:var(--display); font-size:clamp(1.1rem,2.2vw,1.6rem);
  font-style:italic; color:var(--crema); white-space:nowrap;
}
.cinta i{ width:6px; height:6px; border-radius:50%; background:var(--rosa); flex:0 0 auto }
@keyframes correr{ to{ transform:translateX(-100%) } }

/* ---------------------------------------------------------
   CIFRAS
   --------------------------------------------------------- */
.cifras{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  margin-top:44px; padding-top:34px; border-top:1px solid var(--borde);
}
.cifra b{
  display:block; font-family:var(--display); font-weight:600;
  font-size:clamp(2rem,4.4vw,2.9rem); color:var(--dorado-2); line-height:1;
}
.cifra span{
  display:block; margin-top:8px;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris-2);
}

/* ---------------------------------------------------------
   EL DÍA (bloques alternos)
   --------------------------------------------------------- */
.momento + .momento{ margin-top:clamp(60px,8vw,110px) }
.momento:nth-child(even) .momento-media{ order:-1 }
.momento-hora{
  font-family:var(--display); font-size:clamp(2.6rem,6vw,4rem);
  color:transparent; -webkit-text-stroke:1px var(--borde-vivo);
  line-height:1; margin-bottom:14px;
}
/* los días en los que ese momento existe, debajo del número grande */
.momento-dias{
  display:block; margin-top:10px;
  font-family:var(--texto); font-size:.78rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--dorado-2); -webkit-text-stroke:0;
}
.momento h3{ font-size:clamp(1.6rem,3.2vw,2.2rem); margin-bottom:14px }
.momento h3 em{ color:var(--dorado-2) }

/* ---------------------------------------------------------
   TARJETAS DE VENTANA
   --------------------------------------------------------- */
.ventanas{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }

.ventana{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:340px; padding:32px 30px;
  border:1px solid var(--borde); border-radius:var(--radio);
  background:var(--superficie);
  transition:transform .6s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.ventana img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  opacity:.42; transform:scale(1.04);
  transition:opacity .7s var(--ease), transform 1.1s var(--ease);
}
.ventana::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(8,7,8,.97) 12%, rgba(8,7,8,.72) 52%, rgba(8,7,8,.5));
  transition:background .6s var(--ease);
}
.ventana:hover{
  transform:translateY(-6px);
  border-color:var(--rosa);
  box-shadow:0 20px 50px -20px rgba(227,28,121,.4);
}
.ventana:hover img{ opacity:.62; transform:scale(1.1) }
.ventana:hover::before{
  background:linear-gradient(to top, rgba(8,7,8,.95) 8%, rgba(60,10,35,.55) 60%, rgba(8,7,8,.42));
}

.ventana-num{
  margin-bottom:auto;
  font-size:.68rem; font-weight:700; letter-spacing:.2em; color:var(--dorado);
  font-variant-numeric:lining-nums tabular-nums;
}
.ventana h3{ font-size:1.75rem; margin-bottom:10px }
.ventana p{ color:var(--gris); font-size:.9rem; max-width:32ch }
.ventana-ir{
  display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--rosa-2);
}
.ventana-ir svg{ width:17px; height:17px; transition:transform .45s var(--ease) }
.ventana:hover .ventana-ir svg{ transform:translateX(6px) }

/* ---------------------------------------------------------
   TARJETAS SIMPLES
   --------------------------------------------------------- */
.tarjetas{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.tarjeta{
  position:relative;
  padding:34px 30px; border-radius:var(--radio);
  border:1px solid var(--borde); background:var(--superficie);
  transition:transform .5s var(--ease), border-color .4s, background .4s;
}
.tarjeta:hover{ transform:translateY(-5px); border-color:var(--rosa); background:var(--superficie-2) }
.tarjeta .icono{ width:44px; height:44px; color:var(--rosa-2); margin-bottom:22px }
.tarjeta .icono svg{ width:100%; height:100% }
.tarjeta h3{ font-size:1.35rem; color:var(--dorado-2); margin-bottom:10px }
.tarjeta p{ color:var(--gris); font-size:.92rem }

/* tarjeta con foto arriba en vez de icono (a David no le gustan los dibujos) */
.tarjeta.con-foto{ padding:0; overflow:hidden; display:flex; flex-direction:column }
.tarjeta-foto{
  position:relative; aspect-ratio:16/10; overflow:hidden; margin:0;
  border-bottom:1px solid var(--borde); background:var(--superficie-2);
}
.tarjeta-foto img{ width:100%; height:100%; object-fit:cover; display:block }
.tarjeta-foto::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(23,19,22,.55), transparent 45%);
}
.tarjeta-cuerpo{ padding:26px 28px 30px }

/* ---------------------------------------------------------
   ETIQUETAS
   --------------------------------------------------------- */
.etiquetas{ display:flex; flex-wrap:wrap; gap:11px; margin-top:28px }
.etiquetas li{
  padding:9px 20px; border:1px solid var(--borde); border-radius:999px;
  font-size:.79rem; color:var(--crema);
  transition:border-color .35s, color .35s, transform .35s var(--ease);
}
.etiquetas li:hover{ border-color:var(--rosa); color:var(--rosa-2); transform:translateY(-2px) }

/* ---------------------------------------------------------
   CARTA
   --------------------------------------------------------- */
.subnav{
  position:sticky; top:var(--cabecera); z-index:30;
  background:rgba(8,7,8,.9); backdrop-filter:blur(12px);
  border-top:1px solid var(--borde); border-bottom:1px solid var(--borde);
}
.subnav-pista{
  max-width:var(--ancho); margin:0 auto;
  display:flex; gap:6px; overflow-x:auto; padding:12px clamp(18px,5vw,48px);
  scrollbar-width:none;
}
.subnav-pista::-webkit-scrollbar{ display:none }
.subnav a{
  flex:0 0 auto; padding:9px 18px; border-radius:999px;
  font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gris); border:1px solid transparent;
  transition:color .3s, border-color .3s, background .3s;
}
.subnav a:hover{ color:var(--crema); border-color:var(--borde) }
.subnav a.activo{ color:var(--rosa-2); border-color:var(--rosa); background:var(--rosa-tenue) }
.subnav a[hidden]{ display:none }

.bloques{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(30px,4.5vw,58px) }
.bloques + .bloques{ margin-top:clamp(34px,5vw,64px) }

.bloque h3{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-size:1.5rem; color:var(--dorado-2);
  padding-bottom:14px; border-bottom:1px solid var(--borde);
}
.bloque h3 small{
  font-family:var(--texto); font-size:.62rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--rosa-2);
}
.bloque li{
  display:flex; align-items:baseline; gap:14px;
  padding:13px 0; border-bottom:1px solid rgba(42,33,38,.5);
  font-size:.95rem;
  transition:padding-left .35s var(--ease), color .35s;
}
.bloque li:hover{ padding-left:8px; color:#fff }
.bloque li .nombre{ display:block }
.bloque li .detalle{
  display:block; margin-top:4px;
  font-style:normal; font-size:.79rem; color:var(--gris-2); line-height:1.5;
}
.bloque li .precio{
  margin-left:auto; flex:0 0 auto;
  color:var(--dorado); font-size:.86rem; font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;
}

/* ---------------------------------------------------------
   FILTRO DE ALÉRGENOS
   --------------------------------------------------------- */
.filtro{
  border:1px solid var(--borde); border-radius:var(--radio);
  background:var(--superficie); padding:26px 28px;
}
.filtro-cab{ margin-bottom:18px }
.filtro-cab h3{ font-size:1.35rem; color:var(--dorado-2); margin-bottom:8px }
.filtro-cab p{ color:var(--gris); font-size:.88rem; max-width:64ch }

/* el aviso tiene que verse: es información de salud sin confirmar */
.filtro-aviso{
  display:flex; gap:12px; align-items:flex-start;
  margin-bottom:22px; padding:14px 18px;
  border:1px solid rgba(227,28,121,.45); border-radius:12px;
  background:rgba(227,28,121,.09);
  color:#e9d4dc; font-size:.83rem; line-height:1.55;
}
.filtro-aviso svg{ width:19px; height:19px; flex:0 0 19px; margin-top:2px; color:var(--rosa-2) }
.filtro-aviso strong{ color:#fff }

.filtro-chips{ display:flex; flex-wrap:wrap; gap:10px }
.chip-al{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 18px; border-radius:999px; cursor:pointer;
  border:1px solid var(--borde); background:transparent;
  color:var(--crema); font-size:.8rem; font-weight:500;
  transition:border-color .3s, background .3s, color .3s, transform .3s var(--ease);
}
.chip-al:hover{ border-color:var(--rosa); transform:translateY(-2px) }
.chip-al .marca-chip{
  width:15px; height:15px; border-radius:4px; flex:0 0 15px;
  border:1px solid var(--gris-2);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .25s, border-color .25s;
}
.chip-al .marca-chip svg{ width:11px; height:11px; opacity:0; transition:opacity .25s; color:#fff }
.chip-al[aria-pressed="true"]{
  border-color:var(--rosa); background:var(--rosa-tenue); color:#fff;
}
.chip-al[aria-pressed="true"] .marca-chip{ background:var(--rosa); border-color:var(--rosa) }
.chip-al[aria-pressed="true"] .marca-chip svg{ opacity:1 }

.filtro-pie{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-top:20px;
  padding-top:18px; border-top:1px solid var(--borde);
}
.filtro-cuenta{ font-size:.85rem; color:var(--gris) }
.filtro-cuenta b{ color:var(--dorado-2); font-weight:600 }
.filtro-limpiar{
  cursor:pointer; font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rosa-2);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.filtro-limpiar:hover{ border-bottom-color:var(--rosa) }
.filtro-limpiar[hidden]{ display:none }

/* etiquetas de alérgeno debajo de cada plato */
.al-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px }
.al-tag{
  padding:3px 9px; border-radius:5px;
  border:1px solid rgba(214,178,116,.3); background:rgba(214,178,116,.07);
  font-size:.62rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dorado);
}
.al-tag.sin{ border-color:rgba(163,148,154,.25); background:transparent; color:var(--gris-2) }

/* platos ocultos por el filtro */
.bloque li[hidden]{ display:none }
.bloque[hidden]{ display:none }
/* una sección entera que se queda sin platos al filtrar */
main .seccion[hidden]{ display:none }

.filtro-vacio{
  margin-top:34px; padding:26px; text-align:center;
  border:1px dashed var(--borde); border-radius:var(--radio);
  color:var(--gris); font-size:.92rem;
}
.filtro-vacio[hidden]{ display:none }

.nota{
  margin-top:40px; padding:22px 26px;
  border:1px solid var(--borde); border-left:2px solid var(--rosa);
  border-radius:0 14px 14px 0; background:var(--superficie);
  color:var(--gris); font-size:.88rem;
}
.nota strong{ color:var(--crema) }

/* fotos de platos dentro de la carta (banco de imágenes hasta tener las del local) */
.fotos-carta{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:clamp(14px,2vw,22px);
  margin:clamp(30px,4vw,44px) 0 clamp(38px,5vw,60px);
}
.foto-plato.marco-video{ aspect-ratio:4/3 }
/* una sola foto en la tira: apaisada, ocupando todo el ancho */
.fotos-carta > .foto-plato:only-child{ aspect-ratio:21/9 }
.foto-plato figcaption{ left:20px; right:20px; bottom:16px }
.nota a{ color:var(--rosa-2); border-bottom:1px solid transparent; transition:border-color .3s }
.nota a:hover{ border-bottom-color:var(--rosa) }

/* ---------------------------------------------------------
   RESEÑAS
   --------------------------------------------------------- */
.resenas{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.resena{
  position:relative; padding:34px 30px 30px;
  border:1px solid var(--borde); border-radius:var(--radio);
  background:var(--superficie);
  transition:border-color .4s, transform .5s var(--ease);
}
.resena:hover{ border-color:var(--dorado); transform:translateY(-4px) }
.resena .estrellas{ color:var(--dorado); letter-spacing:4px; font-size:.85rem; margin-bottom:16px }
.resena p{ font-family:var(--display); font-size:1.12rem; font-style:italic; color:var(--crema); line-height:1.5 }
.resena cite{
  display:block; margin-top:20px; font-style:normal;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--rosa-2);
}

/* ---------------------------------------------------------
   CONTACTO
   --------------------------------------------------------- */
.datos{ display:flex; flex-direction:column; gap:22px; margin-top:10px }
.dato{ display:flex; gap:16px; align-items:flex-start }
.dato .icono{ width:20px; height:20px; flex:0 0 20px; margin-top:4px; color:var(--rosa-2) }
.dato .icono svg{ width:100%; height:100% }
.dato h4{
  font-family:var(--texto); font-size:.64rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gris-2); margin-bottom:4px;
}
.dato a,.dato p{ color:var(--crema); font-size:1rem }
.dato a{ border-bottom:1px solid transparent; transition:color .3s, border-color .3s }
.dato a:hover{ color:var(--rosa-2); border-bottom-color:var(--rosa) }

.mapa{
  border:1px solid var(--borde); border-radius:var(--radio); overflow:hidden;
  aspect-ratio:4/3; filter:grayscale(.45) contrast(1.1) brightness(.88);
  transition:filter .6s var(--ease);
}
.mapa:hover{ filter:grayscale(0) contrast(1.05) brightness(.95) }
.mapa iframe{ width:100%; height:100%; border:0; display:block }

/* ---------------------------------------------------------
   CÓMO LLEGAR (rutas de Google Maps)
   --------------------------------------------------------- */
.rutas{ margin-top:24px }
.rutas-t{
  font-size:.64rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gris-2); margin-bottom:14px;
}
.rutas-btns{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.ruta-btn{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:18px 12px; border-radius:14px;
  border:1px solid var(--borde); background:var(--superficie);
  font-size:.78rem; font-weight:600; text-align:center; color:var(--crema);
  transition:border-color .3s, background .3s, transform .3s var(--ease), color .3s;
}
.ruta-btn svg{ width:26px; height:26px; color:var(--rosa-2); transition:color .3s }
.ruta-btn:hover{
  border-color:var(--rosa); background:var(--superficie-2);
  transform:translateY(-3px); color:#fff;
}
.ruta-btn:hover svg{ color:var(--dorado-2) }
.rutas-pie{ margin-top:12px; font-size:.76rem; color:var(--gris-2) }

@media (max-width:420px){
  .rutas-btns{ grid-template-columns:1fr }
  .ruta-btn{ flex-direction:row; justify-content:center; padding:14px }
}

.horario{ width:100%; border-collapse:collapse }
.horario th,.horario td{
  text-align:left; padding:14px 0; border-bottom:1px solid var(--borde);
  font-weight:400; font-size:.93rem;
}
.horario th{ color:var(--gris); width:44% }
.horario td{ color:var(--crema) }
.horario .destaca th,.horario .destaca td{ color:var(--dorado-2); font-weight:600 }
.horario .pdte{ color:var(--gris-2); font-style:italic; font-size:.85rem }

/* ---------------------------------------------------------
   CIERRE
   --------------------------------------------------------- */
.cierre{ text-align:center }
.cierre .kicker{ justify-content:center }

/* ---------------------------------------------------------
   PIE
   --------------------------------------------------------- */
.pie{
  border-top:1px solid var(--borde); background:var(--negro-2);
  padding:clamp(54px,7vw,80px) clamp(18px,5vw,48px) 32px;
}
.pie-grid{
  max-width:var(--ancho); margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:44px;
}
.pie-logo{ width:96px; margin-bottom:18px }
.pie-nombre{ display:none; font-family:var(--display); font-style:italic; font-size:1.5rem; color:var(--dorado-2); margin-bottom:14px }
.pie-marca.sin-logo .pie-logo{ display:none }
.pie-marca.sin-logo .pie-nombre{ display:block }
.pie-marca p{ color:var(--gris); font-size:.87rem; max-width:36ch }
.pie h4{
  font-family:var(--texto); font-size:.64rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--dorado); margin-bottom:18px;
}
.pie li{ margin-bottom:10px }
.pie li a{ color:var(--gris); font-size:.88rem; transition:color .3s, padding-left .3s var(--ease) }
.pie li a:hover{ color:var(--rosa-2); padding-left:5px }
.pie-legal{
  max-width:var(--ancho); margin:48px auto 0; padding-top:24px;
  border-top:1px solid var(--borde); color:var(--gris-2); font-size:.74rem;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
}

/* ---------------------------------------------------------
   ANIMACIONES DE ENTRADA
   --------------------------------------------------------- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal.visible{ opacity:1; transform:none }

/* titulares que entran palabra a palabra */
.palabra{ display:inline-block; overflow:hidden; vertical-align:top }
.palabra > i{
  display:inline-block; font-style:inherit;
  transform:translateY(105%);
  transition:transform .9s var(--ease);
}
.visible .palabra > i{ transform:translateY(0) }
/* =========================================================
   INTRO · "el neón se enciende"
   El logotipo es un disco NEGRO: sobre fondo negro no se ve.
   Por eso la intro no es negra del todo — hay un fondo de
   ciruela muy oscuro, dos halos (rosa y dorado), un disco de
   luz detrás del logo y un fogonazo cuando el tubo prende.
   ========================================================= */
.intro{
  position:fixed; inset:0; z-index:100; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:#0a0409;
}

/* ORDEN DE CAPAS — importante.
   Las cortinas son el FONDO de la intro, no una tapa: van detrás de todo
   (z-index 0) y al final suben dejando ver la web. Si se quedan por delante,
   como estaban al principio, tapan la animación entera y solo se ve negro. */
.intro-telon{ z-index:0 }
.intro-halo { z-index:1 }
.intro-centro{ z-index:2 }
.intro-fogonazo, .intro-lema{ z-index:3 }
.intro-saltar{ z-index:4 }

/* dos halos: el rosa manda, el dorado remata al final */
.intro-halo{
  position:absolute; width:min(170vw,1000px); aspect-ratio:1;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,
    rgba(255,93,166,.62) 0%,
    rgba(227,28,121,.34) 26%,
    rgba(227,28,121,.10) 52%,
    transparent 72%);
  opacity:0; animation:corriente 3.2s var(--ease) forwards;
}
.intro-halo.oro{
  width:min(120vw,720px);
  background:radial-gradient(circle,
    rgba(240,217,168,.42) 0%,
    rgba(214,178,116,.16) 40%,
    transparent 70%);
  animation:haloOro 1.8s var(--ease) forwards 1.9s;
}
@keyframes corriente{
  0%   { opacity:0;   transform:scale(.6) }
  6%   { opacity:.85; transform:scale(.72) }   /* primer chispazo */
  9%   { opacity:.22 }
  13%  { opacity:.95; transform:scale(.84) }
  17%  { opacity:.3 }
  26%  { opacity:.8;  transform:scale(.95) }
  60%  { opacity:.95; transform:scale(1.02) }
  100% { opacity:.8;  transform:scale(1.06) }
}
@keyframes haloOro{ from{ opacity:0; transform:scale(.8) } to{ opacity:.75; transform:scale(1) } }

.intro-centro{ position:relative; width:min(66vw,278px); aspect-ratio:1 }

/* disco de luz DETRÁS del logo: es lo que despega el disco negro del fondo */
.intro-disco{
  position:absolute; inset:-26%;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,
    rgba(255,93,166,.55) 0%,
    rgba(227,28,121,.28) 42%,
    transparent 70%);
  opacity:0; transform:scale(.7);
  animation:discoLuz 1.9s var(--ease) forwards 1.05s;
}
@keyframes discoLuz{
  0%   { opacity:0;   transform:scale(.7) }
  30%  { opacity:1;   transform:scale(1.05) }
  55%  { opacity:.72; transform:scale(.98) }
  100% { opacity:.95; transform:scale(1) }
}

/* el tubo se traza, ahora más grueso y con más brillo */
.intro-aro{ position:absolute; inset:-9%; transform:rotate(-90deg); overflow:visible }
.intro-aro .tubo{
  fill:none; stroke:#ffd7e9; stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:302; stroke-dashoffset:302;
  filter:drop-shadow(0 0 2px #fff)
         drop-shadow(0 0 8px var(--rosa-2))
         drop-shadow(0 0 22px rgba(227,28,121,.9));
  animation:trazarTubo 1.25s cubic-bezier(.5,0,.2,1) forwards .12s;
}
@keyframes trazarTubo{ to{ stroke-dashoffset:0 } }

.intro-chispa{
  position:absolute; inset:-9%; opacity:0;
  animation:girarChispa 1.25s cubic-bezier(.5,0,.2,1) forwards .12s;
}
.intro-chispa::after{
  content:""; position:absolute; top:-6px; left:50%; margin-left:-6px;
  width:12px; height:12px; border-radius:50%; background:#fff;
  box-shadow:0 0 14px 5px var(--rosa-2),
             0 0 40px 14px rgba(227,28,121,.85),
             0 0 70px 26px rgba(227,28,121,.4);
}
@keyframes girarChispa{
  0%{ transform:rotate(0deg); opacity:0 }
  7%{ opacity:1 }
  93%{ opacity:1 }
  100%{ transform:rotate(360deg); opacity:0 }
}

/* EL FOGONAZO: el golpe de luz de cuando prende el tubo */
.intro-fogonazo{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(closest-side circle at 50% 50%,
    rgba(255,255,255,.95) 0%,
    rgba(255,150,205,.6) 26%,
    rgba(227,28,121,.22) 48%,
    transparent 72%);
  opacity:0; animation:fogonazo .9s ease-out forwards 1.18s;
}
/* dos golpes secos y se va rápido: si el fogonazo se queda,
   deja una neblina blanca encima del logo y lo apaga */
@keyframes fogonazo{
  0%   { opacity:0;   transform:scale(.5) }
  6%   { opacity:1;   transform:scale(1.1) }
  12%  { opacity:.18; transform:scale(1.14) }
  20%  { opacity:.9;  transform:scale(1.2) }
  34%  { opacity:.22; transform:scale(1.28) }
  60%  { opacity:.07; transform:scale(1.38) }
  100% { opacity:0;   transform:scale(1.5) }
}

/* el logotipo arranca como un fluorescente: cortes secos, sin fundido */
.intro-logo{
  position:absolute; inset:4%; width:92%; height:92%; object-fit:contain;
  opacity:0;
  filter:drop-shadow(0 0 26px rgba(255,93,166,.9)) drop-shadow(0 0 60px rgba(227,28,121,.5));
  animation:neonPrende 1.5s steps(1,end) forwards 1.2s;
}
.intro-nombre{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  font-family:var(--display); font-style:italic; font-size:clamp(2rem,7vw,3rem);
  color:#fff; text-shadow:0 0 18px var(--rosa-2), 0 0 46px rgba(227,28,121,.8);
  opacity:0; animation:neonPrende 1.5s steps(1,end) forwards 1.2s;
}
.intro.sin-logo .intro-logo{ display:none }
.intro.sin-logo .intro-nombre{ display:flex }

@keyframes neonPrende{
  0%  { opacity:0 }
  5%  { opacity:1 }
  9%  { opacity:.06 }
  15% { opacity:1 }
  19% { opacity:.12 }
  25% { opacity:1 }
  29% { opacity:.4 }
  36% { opacity:1 }
  42% { opacity:.75 }
  48% { opacity:1 }
  100%{ opacity:1 }
}

/* el reclamo que remata */
.intro-lema{
  position:absolute; left:50%; top:calc(50% + min(34vw,158px));
  transform:translateX(-50%); white-space:nowrap;
  font-size:.68rem; letter-spacing:.42em; text-transform:uppercase;
  color:#fff; text-shadow:0 0 14px rgba(255,93,166,.8);
  opacity:0; animation:aparecerLema .9s var(--ease) forwards 2.5s;
}
@keyframes aparecerLema{
  from{ opacity:0; letter-spacing:.2em }
  to  { opacity:.95; letter-spacing:.42em }
}

/* Cuatro cortinas que hacen de fondo y al final suben descubriendo la web.
   Cada panel lleva un ciruela muy oscuro (no negro puro) para que el disco
   negro del logotipo no se funda con el fondo. */
.intro-telon{ position:absolute; inset:0; display:flex; pointer-events:none }
.intro-telon i{
  flex:1; transform:translateY(0);
  background:
    radial-gradient(120% 80% at 50% 46%, #2a0f1d 0%, #170811 46%, #0a0409 100%);
  background-size:400% 100%;
}
.intro-telon i:nth-child(1){ background-position:0%   50% }
.intro-telon i:nth-child(2){ background-position:33%  50% }
.intro-telon i:nth-child(3){ background-position:66%  50% }
.intro-telon i:nth-child(4){ background-position:100% 50% }

/* suben con un poco de retraso: primero se apaga el rótulo, luego se abren */
.intro.cerrando .intro-telon i{
  animation:subirTelon .9s cubic-bezier(.76,0,.24,1) forwards .3s;
}
.intro.cerrando .intro-telon i:nth-child(2){ animation-delay:.37s }
.intro.cerrando .intro-telon i:nth-child(3){ animation-delay:.44s }
.intro.cerrando .intro-telon i:nth-child(4){ animation-delay:.51s }
@keyframes subirTelon{ to{ transform:translateY(-100%) } }

/* al cerrar, lo de dentro se va antes que las cortinas */
.intro.cerrando .intro-centro,
.intro.cerrando .intro-halo,
.intro.cerrando .intro-fogonazo{
  animation:irseCentro .45s var(--ease) forwards;
}
@keyframes irseCentro{ to{ opacity:0; transform:scale(1.1) } }
.intro.cerrando .intro-lema{ animation:irseLema .4s var(--ease) forwards }
@keyframes irseLema{ to{ opacity:0; transform:translateX(-50%) translateY(10px) } }

.intro-saltar{
  position:absolute; right:28px; bottom:28px; cursor:pointer; z-index:3;
  border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.7);
  padding:9px 20px; border-radius:999px;
  font-size:.66rem; letter-spacing:.18em;
  transition:color .3s, border-color .3s;
}
.intro-saltar:hover{ color:#fff; border-color:var(--rosa-2) }

html.sin-intro .intro{ display:none }
/* mientras dura la intro no se puede hacer scroll por detrás */
html.con-intro, html.con-intro body{ overflow:hidden }

/* =========================================================
   CORTINA AL CAMBIAR DE VENTANA
   ========================================================= */
.cortina{
  position:fixed; inset:0; z-index:90; display:flex; pointer-events:none;
  visibility:hidden;
}
.cortina i{ flex:1; background:var(--negro); transform:translateY(100%) }
body.saliendo .cortina{ visibility:visible }
body.saliendo .cortina i{ animation:bajarCortina .5s cubic-bezier(.76,0,.24,1) forwards }
body.saliendo .cortina i:nth-child(2){ animation-delay:.05s }
body.saliendo .cortina i:nth-child(3){ animation-delay:.1s }
body.saliendo .cortina i:nth-child(4){ animation-delay:.15s }
@keyframes bajarCortina{ to{ transform:translateY(0) } }

/* =========================================================
   HUMO DEL HERO Y LUZ QUE SIGUE AL RATÓN
   ========================================================= */
.humo{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:-1; pointer-events:none; opacity:.85;
}
.luz{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(320px circle at var(--lx,50%) var(--ly,40%), rgba(227,28,121,.16), transparent 70%);
  opacity:0; transition:opacity .6s var(--ease);
}
.hero:hover .luz{ opacity:1 }

/* =========================================================
   CURSOR PROPIO (solo en ordenador)
   ========================================================= */
body.cursor-propio,
body.cursor-propio a,
body.cursor-propio button{ cursor:none }

.cursor,.cursor-aro{
  position:fixed; top:0; left:0; z-index:95; pointer-events:none;
  border-radius:50%; margin-left:-4px; margin-top:-4px;
  /* hasta que el ratón no se mueve no existen: si no, se ven pegados
     en la esquina de arriba a la izquierda nada más cargar */
  opacity:0; transition:opacity .3s ease;
}
body.raton-vivo .cursor,
body.raton-vivo .cursor-aro{ opacity:1 }
.cursor{
  width:8px; height:8px; background:var(--rosa-2);
  box-shadow:0 0 12px rgba(255,93,166,.9);
}
.cursor-aro{
  width:38px; height:38px; margin-left:-19px; margin-top:-19px;
  border:1px solid rgba(214,178,116,.65);
  transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease),
             border-color .3s, background .3s;
}
.cursor-aro{ transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease),
             border-color .3s, background .3s, opacity .3s ease }
body.raton-vivo.toca .cursor-aro{
  width:62px; height:62px; margin-left:-31px; margin-top:-31px;
  border-color:var(--rosa); background:rgba(227,28,121,.12);
}

/* =========================================================
   MOMENTO ACTUAL (solo decorativo: no dice si está abierto)
   ========================================================= */
.momento-hora{ position:relative; display:inline-block }
.ahora-tag{
  display:inline-flex; align-items:center; gap:7px;
  margin-left:14px; padding:5px 13px; border-radius:999px;
  border:1px solid var(--rosa); background:var(--rosa-tenue);
  font-family:var(--texto); font-size:.6rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--rosa-2);
  vertical-align:middle;
}
.ahora-tag::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--rosa);
  animation:latido 2.6s ease-out infinite;
}

/* =========================================================
   BARRA DE LLAMADA EN MÓVIL
   ========================================================= */
.movil{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:none; gap:1px;
  background:var(--borde);
  border-top:1px solid var(--borde);
}
.movil a{
  flex:1; padding:15px 10px; text-align:center;
  background:var(--negro-2);
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.movil a:first-child{ background:var(--rosa); color:#fff }
@media (max-width:820px){
  .movil{ display:flex }
  body{ padding-bottom:52px }
  /* la barra de llamar tapa 52 px: se los quitamos a la portada para que
     el botón de abajo y el "desliza" no queden escondidos detrás */
  .hero{ min-height:calc(100svh - 52px) }
  .hero-abajo{ bottom:18px }
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width:1000px){
  .ventanas,.tarjetas,.resenas{ grid-template-columns:1fr 1fr }
  .dos-col{ grid-template-columns:1fr; gap:38px }
  .momento:nth-child(even) .momento-media{ order:0 }
  .marco-video{ aspect-ratio:16/10 }
  .foto-plato.marco-video{ aspect-ratio:4/3 }
  .pie-grid{ grid-template-columns:1fr 1fr }
}

@media (max-width:820px){
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(84vw,340px); height:100svh;
    flex-direction:column; align-items:flex-start; justify-content:center; gap:8px;
    padding:40px 36px; background:var(--negro-2);
    border-left:1px solid var(--borde);
    transform:translateX(100%); transition:transform .55s var(--ease);
  }
  .nav.abierto{ transform:translateX(0) }
  .nav a{ font-size:1.05rem; letter-spacing:.06em; padding:14px 0; opacity:0; transform:translateX(24px) }
  .nav.abierto a{ opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease) }
  .nav.abierto a:nth-child(1){ transition-delay:.10s }
  .nav.abierto a:nth-child(2){ transition-delay:.16s }
  .nav.abierto a:nth-child(3){ transition-delay:.22s }
  .nav.abierto a:nth-child(4){ transition-delay:.28s }
  .nav.abierto a:nth-child(5){ transition-delay:.34s }
  .nav.abierto a:nth-child(6){ transition-delay:.40s }
  .nav-cta{ margin-top:16px }
  .menu-btn{ display:flex }
  .bloques{ grid-template-columns:1fr }
}

@media (max-width:620px){
  .ventanas,.tarjetas,.resenas{ grid-template-columns:1fr }
  .cifras{ grid-template-columns:1fr; gap:24px; text-align:left }
  .pie-grid{ grid-template-columns:1fr }
  .pie-legal{ flex-direction:column; gap:6px }
  .marca-agua{ display:none }
  .fotos-carta{ grid-template-columns:1fr }
  .fotos-carta > .foto-plato,.fotos-carta > .foto-plato:only-child{ aspect-ratio:16/10 }
}

/* ---------------------------------------------------------
   ACCESIBILIDAD
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.01ms !important; scroll-behavior:auto !important }
  .intro,.cortina,.humo,.luz,.cursor,.cursor-aro{ display:none !important }
  .reveal{ opacity:1 !important; transform:none !important }
  .palabra > i{ transform:none !important }
  .marco-video{ clip-path:none !important }
  .cinta-pista{ animation:none !important }
  body.cursor-propio,body.cursor-propio a,body.cursor-propio button{ cursor:auto }
}

/* en pantalla táctil no hay cursor propio ni luz que siga al ratón */
@media (hover:none){
  .cursor,.cursor-aro,.luz{ display:none }
  body.cursor-propio,body.cursor-propio a,body.cursor-propio button{ cursor:auto }
}