@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/BodoniModa-latin.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 500; font-display: swap; src: url("fonts/BodoniModa-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/Jost-latin.woff2") format("woff2"); }
/* Showroom Food & Drinks · v6 · paso 1: la portada
   Estética copiada de la v3 del proyecto (2026-10-07-showroom/v3): azul noche + dorado, botones en paralelogramo
   con el ángulo de las rayas del monograma, enlaces en versales espaciadas, etiqueta de horario con borde fino.
   Fondo: cinco fotos que cambian despacio, una por cada plan (tardeo, partido y noche). */

/* Butler Stencil (Fabian De Smet): archivo y licencia web por confirmar. Mientras, fuentes del sistema. */
:root {
  --fondo: #0E141A; --hondo: #090D11;
  --tinta: #F3EEE4; --suave: #CBD2DC; --secundario: #A4B0C2;
  --acento: #E6AC5A; --acento-hover: #F0BC73; --sobre-acento: #0E141A;
  --ok: #5FD38D;
  --linea-suave: rgba(243, 238, 228, .14);
  --titular: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --texto: "Helvetica Neue", Inter, Helvetica, Arial, sans-serif;
  --ancho: 1320px; --gutter: clamp(16px, 4vw, 48px);
  --raya: 15deg;
  --curva: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 17px/1.6 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1 { margin: 0; font-family: var(--titular); font-weight: 500; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--acento); color: var(--sobre-acento); padding: 10px 16px; font-weight: 600; text-decoration: none; }
.saltar:focus { top: 12px; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }

/* Grano fino: rompe lo plano del azul sin ensuciar */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Botones: paralelogramos con el ángulo de las rayas */
.boton { --b-alto: 52px; --b-fondo: transparent; --b-borde: var(--acento); --b-texto: var(--acento); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: var(--b-alto); margin-inline: calc(var(--b-alto) * .134); padding: 0 1.9em; border: 0; background: none; color: var(--b-texto); font: 600 16px/1.2 var(--texto); letter-spacing: .01em; text-align: center; text-decoration: none; cursor: pointer; transition: color .2s ease, transform .2s var(--curva); }
.boton::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--b-fondo); border: 1px solid var(--b-borde); transform: skewX(var(--raya)); transition: background-color .2s ease, border-color .2s ease; }
.boton:hover { --b-fondo: rgba(230, 172, 90, .12); }
.boton:active { transform: scale(.97); }
.boton:focus-visible { outline: none; }
.boton:focus-visible::before { outline: 2px solid var(--tinta); outline-offset: 3px; }
.boton-lleno { --b-fondo: var(--acento); --b-texto: var(--sobre-acento); }
.boton-lleno:hover { --b-fondo: var(--acento-hover); --b-borde: var(--acento-hover); }
.boton-sm { --b-alto: 44px; padding: 0 1.3em; }
.boton svg { flex: none; }

/* Cabecera (planteamiento de Paradiso): menú a la izquierda, logo al centro y reserva a la derecha.
   Toque de la v3: línea fina dorada, rayas a 15° en el icono del menú y botón en paralelogramo. */
.cabecera { position: fixed; top: 0; left: 0; right: 0; z-index: 20; background: transparent; border-bottom: 1px solid rgba(230, 172, 90, .28); transition: background-color .35s ease, border-color .35s ease; }
.cabecera.con-scroll { background: rgba(14, 20, 26, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--linea-suave); }
.cabecera-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 76px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; justify-self: center; }
.marca .simbolo { width: 42px; height: auto; }
.marca-texto { width: 122px; height: auto; }
.boton-cab { justify-self: end; }
.menu-boton { justify-self: start; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--tinta); font: 500 13px/1 var(--texto); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; }
.menu-boton i { display: grid; gap: 6px; width: 26px; }
.menu-boton i::before, .menu-boton i::after { content: ""; height: 2px; background: currentColor; transform: skewX(var(--raya)); }
.menu-boton i::after { width: 70%; }
.menu-boton:hover { color: var(--acento); }
@media (max-width: 640px) { .menu-boton span { display: none; } .marca-texto { width: 96px; } .marca .simbolo { width: 34px; } }

/* Menú a pantalla completa */
.menu-movil { position: fixed; inset: 0; z-index: 50; background: var(--fondo); display: flex; flex-direction: column; padding: 20px var(--gutter) 32px; overflow: auto; animation: aparece .3s var(--curva) both; }
.menu-movil[hidden] { display: none; }
@keyframes aparece { from { opacity: 0; } }
.menu-movil-cab { display: flex; justify-content: space-between; align-items: center; min-height: 56px; }
.menu-movil-cab button { background: none; border: 0; color: var(--tinta); font-size: 16px; font-weight: 500; min-height: 44px; cursor: pointer; }
.menu-movil nav { display: grid; gap: 4px; margin: auto 0; }
.menu-movil nav a { font: 500 clamp(40px, 9vw, 76px)/1.15 var(--titular); text-decoration: none; animation: sube .45s var(--curva) both; }
.menu-movil nav a:nth-child(2) { animation-delay: .04s; } .menu-movil nav a:nth-child(3) { animation-delay: .08s; }
.menu-movil nav a:nth-child(4) { animation-delay: .12s; } .menu-movil nav a:nth-child(5) { animation-delay: .16s; }
.menu-movil nav a:nth-child(even) { color: var(--acento); padding-left: .5em; }
.menu-movil nav a:hover { color: var(--acento); }
.menu-movil .boton { align-self: flex-start; margin-top: 24px; }

/* Etiqueta de horario */
.estado { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--tinta); margin: 0 0 26px; padding: 10px 16px 10px 14px; border: 1px solid var(--linea-suave); background: rgba(9, 13, 17, .6); }
.estado::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--secundario); flex: none; }
.estado.abierto::before { background: var(--ok); }

/* Portada */
.escena { position: relative; isolation: isolate; min-height: max(620px, 100svh); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--fondo); }
.escena-fondo { position: absolute; inset: 0; z-index: -1; background: var(--hondo); }
.escena-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Velo azul noche y un fundido hacia abajo para que el texto siempre se lea */
.escena-fondo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 52%, rgba(14, 20, 26, .44) 0, rgba(14, 20, 26, .22) 65%, rgba(14, 20, 26, .1) 100%), linear-gradient(180deg, rgba(14, 20, 26, .28) 0, transparent 26%, transparent 62%, var(--fondo) 100%); }

.escena-in { width: 100%; padding-bottom: clamp(96px, 13vh, 150px); padding-top: 120px; }
.escena-texto { max-width: 760px; margin: 0 auto; display: grid; justify-items: center; text-align: center; animation: sube .8s var(--curva) .2s both; }
@keyframes sube { from { opacity: 0; transform: translateY(18px); } }
.escena-mono { width: clamp(64px, 6vw, 96px); height: auto; margin-bottom: clamp(22px, 3vh, 34px); }
.escena-logo { width: clamp(260px, 30vw, 460px); height: auto; }
/* Línea fina dorada con el corte del monograma (15°) separando logotipo y frase */
.escena-frase { position: relative; margin: clamp(22px, 3vh, 32px) 0 clamp(26px, 3.4vh, 36px); padding-top: clamp(22px, 2.8vh, 30px); font: 500 clamp(26px, 3.6vw, 52px)/1.1 var(--titular); color: var(--tinta); max-width: 18ch; text-wrap: balance; }
.escena-frase::before { content: ""; position: absolute; left: 50%; margin-left: -48px; top: 0; width: 96px; height: 1px; background: var(--acento); transform: skewX(calc(var(--raya) * -1)); }
.escena .acciones { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 24px; margin-bottom: 22px; }
.escena-estado { margin: 0; padding: 0; border: 0; background: none; font-size: 14px; letter-spacing: .02em; color: var(--suave); text-shadow: 0 1px 8px rgba(9, 13, 17, .9); }

@media (max-width: 960px) { .escena-logo { width: min(78vw, 400px); } }
@media (max-width: 760px) {
  .escena-in { padding-bottom: 110px; padding-top: 96px; }
  .escena .acciones { display: none; }
}
/* Móvil: vídeo a pantalla completa con el texto centrado encima, como en escritorio */
@media (max-width: 899px) {
  .escena-fondo::after { background: radial-gradient(90% 60% at 50% 52%, rgba(14, 20, 26, .6) 0, rgba(14, 20, 26, .3) 70%, rgba(14, 20, 26, .15) 100%), linear-gradient(180deg, rgba(14, 20, 26, .45) 0, transparent 24%, transparent 60%, var(--fondo) 100%); }
  .escena-mono { display: none; }
  .escena-logo { width: min(74vw, 340px); }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .escena-texto { animation: none; }
}

/* Secciones de fútbol y próximos partidos */
.etiqueta { margin: 0 0 14px; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--acento); }
h2 { margin: 0 0 18px; font: 500 clamp(34px, 5vw, 64px)/1.05 var(--titular); text-wrap: balance; }
.futbol-texto { max-width: 52ch; color: var(--suave); font-size: 18px; }
.pendiente, .simulacion { margin: 20px 0 0; font-size: 13px; color: #FF9A8A; border-left: 2px solid #FF9A8A; padding-left: 10px; max-width: 64ch; }
/* La portada acaba en el azul de la web y esta sección sale de él: sin corte entre una y otra */
.futbol { position: relative; isolation: isolate; overflow: hidden; background: var(--fondo); padding: clamp(110px, 14vw, 200px) 0; margin-top: -1px; }
.futbol-fondo { position: absolute; inset: 0; z-index: -1; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 28%, #000 72%, transparent 100%); }
.futbol-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 22%; }
.futbol-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 20, 26, .85) 0, rgba(14, 20, 26, .5) 50%, rgba(14, 20, 26, .15) 100%); }
.futbol .acciones { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 30px; }
.partidos { background: var(--hondo); padding: clamp(64px, 9vw, 120px) 0; }
.lista-partidos { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 10px; max-width: 880px; }
.pt { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 16px 18px; border: 1px solid var(--linea-suave); background: rgba(243, 238, 228, .03); }
.pt-destacado { border-color: rgba(230, 172, 90, .5); background: rgba(230, 172, 90, .06); padding: 22px 22px; }
.pt-centro { min-width: 0; }
.pt-cruce { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 14px; }
.pt-nombre { font: 500 18px/1.2 var(--texto); }
.pt-nombre:first-child { text-align: right; }
.pt-hora { font: 500 28px/1 var(--titular); color: var(--acento); letter-spacing: .04em; padding: 0 4px; }
.escudo { display: grid; place-items: center; width: 56px; height: 56px; }
.escudo img { width: 56px; height: 56px; object-fit: contain; }
.escudo-sigla { border: 1px dashed var(--secundario); border-radius: 50%; font: 500 15px/1 var(--texto); letter-spacing: .06em; color: var(--secundario); }
.pt-centro .pt-meta { text-align: center; margin-top: 10px; }
.pt-vs { display: none; }
.pt-fecha { display: grid; justify-items: center; min-width: 54px; font-family: var(--titular); color: var(--acento); line-height: 1; }
.pt-fecha b { font-size: 32px; font-weight: 500; }
.pt-fecha span { font: 400 12px/1.4 var(--texto); letter-spacing: .2em; text-transform: uppercase; color: var(--secundario); }
.pt-equipos { margin: 0; font: 500 20px/1.25 var(--texto); }
.pt-meta { margin: 4px 0 0; font-size: 14px; color: var(--secundario); }
.pt-tag { margin-left: 10px; padding: 2px 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: var(--acento); color: var(--sobre-acento); }
.lista-partidos .vacio { color: var(--suave); }

/* Planes: pestañas Tardeo / Partido / Noche */
.planes { padding: clamp(64px, 9vw, 130px) 0; background: var(--fondo); }
.plan-tabs { display: flex; gap: clamp(18px, 3vw, 44px); margin: 34px 0 0; border-bottom: 1px solid var(--linea-suave); overflow-x: auto; }
.plan-tab { position: relative; padding: 0 0 14px; background: none; border: 0; color: var(--secundario); font: 500 clamp(30px, 5vw, 58px)/1.1 var(--titular); cursor: pointer; transition: color .2s ease; white-space: nowrap; }
.plan-tab:hover { color: var(--tinta); }
.plan-tab[aria-selected="true"] { color: var(--tinta); }
.plan-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--acento); }
.plan { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 96px); align-items: center; margin-top: clamp(32px, 5vw, 64px); animation: aparece .45s var(--curva) both; }
.plan[hidden] { display: none; }
.plan-foto { position: relative; margin: 0; max-width: 470px; }
.plan-foto::before { content: ""; position: absolute; left: -9%; top: -4%; bottom: 8%; width: 3px; background: var(--acento); transform: skewX(calc(var(--raya) * -1)); transform-origin: top; }
.plan-foto img, .plan-media { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--hondo); }
.plan-texto h3 { margin: 0 0 16px; font: 500 clamp(32px, 4.4vw, 56px)/1.08 var(--titular); }
.plan-texto h3 em { color: var(--acento); font-style: normal; }
.plan-texto > p { max-width: 46ch; color: var(--suave); font-size: 18px; }
.plan-sub { margin: 28px 0 6px; color: var(--acento); font-weight: 600; }
.plan-carta { list-style: none; margin: 0 0 30px; padding: 0; max-width: 520px; }
.plan-carta li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; }
.plan-carta i { flex: 1; border-bottom: 1px dotted rgba(243, 238, 228, .3); transform: translateY(-4px); }
.plan-carta b { color: var(--acento); font-weight: 500; }
@media (max-width: 760px) {
  .plan { grid-template-columns: 1fr; }
  .plan-foto { max-width: none; }
  .plan-foto::before { display: none; }
  .plan-foto img, .plan-media { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .plan { animation: none; } }
@media (max-width: 640px) {
  .pt { grid-template-columns: auto 1fr; }
  .pt .boton { grid-column: 1 / -1; justify-self: start; }
  .pt-cruce { grid-template-columns: auto auto auto; justify-content: center; gap: 10px; }
  .pt-nombre { display: none; }
  .pt-vs { display: block; margin-bottom: 2px; color: var(--tinta); text-transform: none; font-weight: 500; }
  .escudo, .escudo img { width: 48px; height: 48px; }
}

/* La carta de cócteles: mosaico de fotos; el nombre se ve siempre y, al pulsar, salen lo que lleva y el precio */
.carta { padding: clamp(64px, 9vw, 130px) 0; background: var(--hondo); }
.carta-mosaico { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; margin-top: clamp(28px, 4vw, 56px); background: var(--hondo); }
.foto-coctel { position: relative; display: block; padding: 0; border: 0; background: #05090f; aspect-ratio: 3 / 4; overflow: hidden; cursor: pointer; color: var(--tinta); font: inherit; text-align: center; -webkit-tap-highlight-color: transparent; }
.foto-coctel img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Nombre siempre visible, abajo, con un fundido para que se lea */
.foto-coctel-pie { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: block; padding: 34px 12px 11px 14px; background: linear-gradient(180deg, transparent 0, rgba(9, 13, 17, .78) 70%); text-align: left; }
.foto-coctel-pie strong { font: 500 clamp(15px, 4.2vw, 19px)/1.15 var(--titular); color: var(--tinta); }
/* Ficha que sale al pulsar: nombre, lo que lleva, sabor y precio */
.foto-coctel-info { z-index: 2; position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 8%; background: rgba(9, 13, 17, .84); opacity: 0; transition: opacity .3s ease; }
.foto-coctel-info strong { font: 500 clamp(21px, 5.6vw, 34px)/1.1 var(--titular); color: var(--acento); }
.foto-coctel-info .ingr { font-size: clamp(12.5px, 3.4vw, 17px); line-height: 1.5; color: var(--tinta); max-width: 28ch; }
.foto-coctel-info em { font: italic 400 clamp(13px, 3.5vw, 15px)/1.4 var(--titular); color: var(--suave); }
.foto-coctel-info b { margin-top: 4px; font-weight: 500; font-size: clamp(15px, 4vw, 18px); color: var(--acento); letter-spacing: .08em; }
.foto-coctel[aria-expanded="true"] .foto-coctel-info { opacity: 1; }
.foto-coctel[aria-expanded="true"] .foto-coctel-pie { opacity: 0; }
.foto-coctel:focus-visible { outline: 2px solid var(--acento); outline-offset: -4px; }
@media (hover: hover) { .foto-coctel:hover .foto-coctel-info { opacity: 1; } .foto-coctel:hover .foto-coctel-pie { opacity: 0; } }
@media (min-width: 700px) { .carta-mosaico { grid-template-columns: repeat(4, 1fr); } .foto-coctel-pie strong { font-size: 18px; } .foto-coctel-info .ingr { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .foto-coctel-info { transition: none; } }
.carta-completa { margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--linea-suave); padding-top: 22px; }
.carta-completa summary { cursor: pointer; font-weight: 600; color: var(--acento); letter-spacing: .08em; list-style: none; }
.carta-completa summary::-webkit-details-marker { display: none; }
.carta-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px clamp(28px, 6vw, 80px); margin-top: 20px; }
.carta-cols h4 { margin: 18px 0 4px; font: 500 24px/1.2 var(--titular); color: var(--tinta); }
.carta-cols ul { list-style: none; margin: 0; padding: 0; }
.carta-cols li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; color: var(--suave); }
.carta-cols i { flex: 1; border-bottom: 1px dotted rgba(243, 238, 228, .25); transform: translateY(-4px); }
.carta-cols b { color: var(--acento); font-weight: 500; }
.carta-cta { margin-top: 36px; }
@media (max-width: 860px) { .carta-cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .coctel, .coctel-ing, .coctel-sabor, .carta-foto img { transition: none; } }

/* Pantalla de entrada (logo + frase). Solo se muestra si hay JavaScript; app.js la cierra al estar lista la portada */
.intro { display: none; }
.con-intro .intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--fondo); transition: opacity .9s ease, visibility .9s ease; }
.con-intro body { overflow: hidden; }
.intro.sale { opacity: 0; visibility: hidden; }
.intro-in { display: grid; justify-items: center; text-align: center; padding: 0 var(--gutter); }
.intro-mono { width: clamp(72px, 9vw, 120px); height: auto; animation: intro-entra 1s var(--curva) .1s both; }
.intro-logo { width: min(78vw, 460px); height: auto; margin-top: clamp(20px, 3vh, 32px); animation: intro-entra 1s var(--curva) .45s both; }
.intro-frase { position: relative; margin: clamp(24px, 4vh, 40px) 0 0; padding-top: clamp(22px, 3vh, 30px); font: 500 clamp(24px, 3.4vw, 44px)/1.12 var(--titular); max-width: 18ch; text-wrap: balance; animation: intro-entra 1s var(--curva) .9s both; }
.intro-frase::before { content: ""; position: absolute; left: 50%; margin-left: -48px; top: 0; width: 96px; height: 1px; background: var(--acento); transform: skewX(calc(var(--raya) * -1)); }
@keyframes intro-entra { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .intro-mono, .intro-logo, .intro-frase { animation: none; } .con-intro .intro { transition: none; } }

/* Menú con más secciones: letra algo menor para que quepan */
.menu-movil nav a { font-size: clamp(30px, 6.2vw, 54px); }

/* El local */
.local { padding: clamp(64px, 9vw, 130px) 0; background: var(--fondo); }
.local-galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: clamp(28px, 4vw, 56px); }
.local-galeria figure { margin: 0; overflow: hidden; }
.local-galeria img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.local-grande { grid-column: 1 / -1; }
.local-grande img { aspect-ratio: 21 / 9; }

/* Eventos y grupos */
.eventos { position: relative; isolation: isolate; overflow: hidden; background: var(--fondo); padding: clamp(100px, 13vw, 190px) 0; }
.eventos-fondo { position: absolute; inset: 0; z-index: -1; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%); }
.eventos-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.eventos-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 20, 26, .9) 0, rgba(14, 20, 26, .55) 55%, rgba(14, 20, 26, .2) 100%); }
.eventos .acciones, .donde .acciones { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 28px; }

/* Reseñas */
.resenas { padding: clamp(64px, 9vw, 120px) 0; background: var(--hondo); }
.resenas-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: clamp(28px, 4vw, 48px) 0 34px; }
.resena { padding: 26px; border: 1px solid var(--linea-suave); background: rgba(243, 238, 228, .03); }
.resena p { margin: 0 0 18px; font: 500 22px/1.3 var(--titular); }
.resena span { font-size: 13px; letter-spacing: .15em; text-transform: uppercase; color: var(--secundario); }
.resena-vacia { border-style: dashed; border-color: rgba(255, 154, 138, .5); }
.resena-vacia p, .resena-vacia span { color: var(--secundario); }

/* Sobre nosotros */
.nosotros { padding: clamp(64px, 9vw, 130px) 0; background: var(--fondo); }
.nosotros-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.nosotros-foto { margin: 0; max-width: 470px; }
.foto-pendiente { aspect-ratio: 4 / 5; display: grid; place-content: center; text-align: center; gap: 6px; border: 1px dashed rgba(255, 154, 138, .6); color: var(--secundario); background: rgba(243, 238, 228, .03); font: 500 26px/1.2 var(--titular); }
.foto-pendiente small { font: 400 13px/1 var(--texto); letter-spacing: .2em; text-transform: uppercase; color: #FF9A8A; }

/* Dónde estamos */
.donde { padding: clamp(64px, 9vw, 130px) 0; background: var(--hondo); }
.donde-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.horario { width: 100%; max-width: 440px; margin: 26px 0; border-collapse: collapse; }
.horario th, .horario td { padding: 11px 0; border-bottom: 1px solid var(--linea-suave); text-align: left; font-weight: 400; }
.horario td { text-align: right; color: var(--suave); }
.horario tr[data-hoy] th, .horario tr[data-hoy] td { color: var(--acento); font-weight: 600; }
.donde address { font-style: normal; color: var(--suave); line-height: 1.8; }
.por-confirmar { color: #FF9A8A; font-size: 13px; margin-left: 6px; }
.donde-foto { margin: 0; }
.donde-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* Pie */
.pie { padding: 48px var(--gutter) 56px; text-align: center; border-top: 1px solid var(--linea-suave); background: var(--fondo); }
.pie img { width: 150px; height: auto; margin: 0 auto 22px; }
.pie ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 22px; padding: 0; }
.pie a { text-decoration: none; letter-spacing: .15em; text-transform: uppercase; font-size: 13px; }
.pie a:hover { color: var(--acento); }
.pie .pc { margin: 0 0 6px; font-size: 12px; color: var(--secundario); }

@media (max-width: 860px) {
  .local-galeria { grid-template-columns: 1fr 1fr; }
  .local-grande img { aspect-ratio: 16 / 10; }
  .resenas-lista { grid-template-columns: 1fr; }
  .nosotros-grid, .donde-grid { grid-template-columns: 1fr; }
  .nosotros-foto { max-width: none; }
  .foto-pendiente { aspect-ratio: 4 / 3; }
}

.resenas-resumen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; margin-top: 24px; color: var(--suave); }
.resenas-resumen p { margin: 0; }
.resenas-nota b { font: 500 clamp(44px, 6vw, 72px)/1 var(--titular); color: var(--acento); }
.resenas-nota span { margin-left: 8px; }
.resenas-fecha { font-size: 13px; color: var(--secundario); }

.google-res { display: grid; grid-template-columns: auto minmax(0, 420px); gap: clamp(24px, 6vw, 80px); align-items: center; margin: 28px 0 34px; }
.google-nota b { font: 500 clamp(64px, 9vw, 110px)/1 var(--titular); color: var(--acento); }
.google-nota .estrellas { margin-left: 12px; font-size: 26px; color: var(--acento); letter-spacing: .1em; }
.google-nota p { margin: 6px 0 0; color: var(--suave); }
.google-nota .google-fecha { font-size: 13px; color: var(--secundario); }
.google-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.google-barras li { display: grid; grid-template-columns: 38px 1fr 40px; align-items: center; gap: 12px; font-size: 14px; color: var(--suave); }
.google-barras i { height: 8px; background: rgba(243, 238, 228, .12); }
.google-barras b { display: block; height: 100%; background: var(--acento); }
.google-barras em { font-style: normal; text-align: right; }
@media (max-width: 760px) { .google-res { grid-template-columns: 1fr; } }

.nosotros-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.nosotros-foto { max-width: none; }
.nosotros-foto img { width: 100%; height: auto; display: block; }
@media (max-width: 860px) { .nosotros-grid { grid-template-columns: 1fr; } }

.local-galeria { grid-template-columns: repeat(4, 1fr); }
.local-galeria .local-grande { grid-column: 1 / -1; }
@media (max-width: 860px) { .local-galeria { grid-template-columns: 1fr 1fr; } }

.local-grande img, .local-galeria .local-grande img { aspect-ratio: 16 / 9; }

/* Móvil: más velo en Eventos para que el texto se lea sobre la foto */
@media (max-width: 760px) { .eventos-fondo::after { background: linear-gradient(180deg, rgba(14, 20, 26, .88) 0, rgba(14, 20, 26, .8) 100%); } .futbol-fondo::after { background: linear-gradient(180deg, rgba(14, 20, 26, .8) 0, rgba(14, 20, 26, .6) 100%); } }


/* ===== Cócteles ampliados ===== */
.carta-intro { max-width: 60ch; color: var(--suave); font-size: 19px; }
.carta-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin-top: clamp(40px, 6vw, 80px); }
.cat header { padding-bottom: 14px; border-bottom: 1px solid var(--acento); margin-bottom: 8px; }
.cat h3 { margin: 0; font: 500 clamp(30px, 3.4vw, 44px)/1.1 var(--titular); color: var(--acento); }
.cat header p { margin: 4px 0 0; color: var(--secundario); letter-spacing: .12em; text-transform: uppercase; font-size: 13px; }
.cat ul { list-style: none; margin: 0; padding: 0; }
.cat li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea-suave); }
.cat li b { display: block; font-weight: 600; font-size: 18px; }
.cat li span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--suave); }
.cat li em { font-style: normal; color: var(--acento); white-space: nowrap; font-weight: 500; }
.carta-acciones { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: clamp(32px, 4vw, 56px); }
@media (max-width: 760px) { .carta-acciones { display: none; } }
.carta { padding-top: clamp(80px, 10vw, 150px); }

/* ===== Eventos: cabecera, carrusel y contacto ===== */
.eventos { padding: clamp(80px, 10vw, 150px) 0; }
.eventos-cabeza { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 90px); align-items: end; margin-bottom: clamp(32px, 5vw, 64px); }
.eventos-claves { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.eventos-claves li { padding: 16px 0 16px 22px; border-left: 2px solid var(--acento); margin-bottom: 14px; background: linear-gradient(90deg, rgba(230, 172, 90, .08), transparent); }
.eventos-claves b { display: block; font: 500 24px/1.2 var(--titular); }
.eventos-claves span { color: var(--suave); font-size: 15px; }

.carrusel { position: relative; }
.carrusel-pista { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: none; outline: none; }
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
.tarjeta { flex: 0 0 min(86%, 440px); scroll-snap-align: start; position: relative; display: flex; flex-direction: column; min-height: 540px; overflow: hidden; background: var(--hondo); border: 1px solid var(--linea-suave); }
.tarjeta-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--curva); }
.tarjeta:hover .tarjeta-foto img { transform: scale(1.04); }
.tarjeta-tipo { position: absolute; left: 14px; top: 14px; padding: 5px 12px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; background: var(--fondo); color: var(--acento); border: 1px solid var(--acento); }
.tarjeta.promo .tarjeta-tipo { background: var(--acento); color: var(--sobre-acento); }
.tarjeta-cuerpo { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px; }
.tarjeta h3 { margin: 0; font: 500 30px/1.1 var(--titular); }
.tarjeta p { margin: 0; color: var(--suave); }
.tarjeta .boton { margin-top: auto; align-self: flex-start; }
.carrusel-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.carrusel-btn { width: 48px; height: 48px; border: 1px solid var(--acento); background: transparent; color: var(--acento); font-size: 26px; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.carrusel-btn:hover { background: var(--acento); color: var(--sobre-acento); }
.carrusel-btn:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.carrusel-puntos { display: flex; gap: 10px; }
.carrusel-puntos button { width: 28px; height: 6px; padding: 0; border: 0; background: rgba(243,238,228,.25); cursor: pointer; transition: background .2s, width .2s; }
.carrusel-puntos button[aria-selected="true"] { background: var(--acento); width: 44px; }
.carrusel-puntos button:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

.contacto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 90px); margin-top: clamp(56px, 8vw, 110px); padding: clamp(24px, 4vw, 56px); border: 1px solid rgba(230, 172, 90, .45); background: rgba(9, 13, 17, .82); backdrop-filter: blur(6px); }
.contacto h3 { margin: 0 0 14px; font: 500 clamp(32px, 3.6vw, 46px)/1.1 var(--titular); }
.contacto p { color: var(--suave); }
.contacto-alt a { color: var(--acento); }
.form-contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-contacto label { display: grid; gap: 6px; font-size: 14px; color: var(--secundario); }
.form-contacto .ancho { grid-column: 1 / -1; }
.form-contacto input, .form-contacto select, .form-contacto textarea { width: 100%; min-height: 48px; padding: 10px 12px; background: var(--fondo); color: var(--tinta); border: 1px solid var(--linea-suave); border-radius: 0; font: inherit; }
.form-contacto textarea { resize: vertical; }
.form-contacto input:focus-visible, .form-contacto select:focus-visible, .form-contacto textarea:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.form-contacto .acepto { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.form-contacto .acepto input { width: 20px; min-height: 20px; margin-top: 2px; flex: none; }
.form-estado { margin: 0; padding: 12px 14px; border: 1px solid var(--linea-suave); font-size: 15px; }
.form-estado.ok { border-color: var(--ok); color: var(--ok); }
.form-estado.err { border-color: #FF9A8A; color: #FF9A8A; }

/* ===== Fútbol: franja compacta ===== */
.futbol-franja { padding: clamp(40px, 5vw, 64px) 0; background: var(--fondo); border-top: 1px solid var(--linea-suave); }
.futbol-franja-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; }
.futbol-franja h2 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 38px); }
.futbol-franja .futbol-texto { margin: 0; font-size: 17px; }
.futbol-franja .acciones { display: flex; flex-wrap: wrap; gap: 14px 24px; margin: 0; }
.partidos { padding: clamp(48px, 6vw, 84px) 0; }

@media (max-width: 860px) {
  .carta-cats, .eventos-cabeza, .contacto { grid-template-columns: 1fr; }
  .form-contacto { grid-template-columns: 1fr; }
  .tarjeta { flex-basis: 84%; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .carrusel-pista { scroll-behavior: auto; } .tarjeta-foto img { transition: none; } }


/* ===== Fotos de Drive: tira de la barra y galería de fiestas ===== */
.barra-tira { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 2px; }
.barra-tira figure { margin: 0; overflow: hidden; }
.barra-tira img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: transform .8s var(--curva); }
.barra-tira figure:hover img { transform: scale(1.04); }
.fiestas { margin-top: clamp(48px, 7vw, 96px); }
.fiestas h3 { margin: 0 0 18px; font: 500 clamp(28px, 3.2vw, 40px)/1.1 var(--titular); }
.fiestas-rejilla { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.fiestas-rejilla figure { margin: 0; overflow: hidden; }
.fiestas-rejilla img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .8s var(--curva); }
.fiestas-rejilla figure:hover img { transform: scale(1.05); }
@media (max-width: 860px) { .barra-tira { grid-template-columns: repeat(2, 1fr); } .fiestas-rejilla { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .barra-tira img, .fiestas-rejilla img { transition: none; } }


/* ===== Partidos (franja + calendario juntos) ===== */
.partidos-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; }
.partidos-cab h2 { margin: 0 0 8px; }
.partidos-cab .futbol-texto { margin: 0; }
.partidos { padding: clamp(56px, 7vw, 100px) 0; }

/* ===== Barra fija de acciones en móvil ===== */
.barra-movil { display: none; }
@media (max-width: 760px) {
  .barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(9, 13, 17, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(230, 172, 90, .35); }
  .barra-movil .boton { --b-alto: 46px; margin-inline: 6px; padding: 0 1em; font-size: 15px; }
  body { padding-bottom: 72px; }
  .cabecera .boton-cab { display: none; }
}
body:has(.menu-movil:not([hidden])) .barra-movil { display: none; }



/* ===== Eventos (rediseño): cabecera, "Ahora en Showroom", "Lo que hemos vivido" y contacto ===== */
.eventos { padding: clamp(64px, 9vw, 130px) 0; background: var(--fondo); }
.ev-cabeza { max-width: 640px; }
.ev-cabeza .carta-intro { margin-bottom: 0; }
.ev-bloque { margin-top: clamp(40px, 6vw, 84px); }
.ev-bloque-cab { margin-bottom: 18px; }
.ev-bloque-cab h3 { margin: 0; font: 500 clamp(26px, 6.8vw, 40px)/1.1 var(--titular); }
.ev-bloque-cab h3::after { content: ""; display: block; width: 40px; height: 1px; margin-top: 12px; background: var(--acento); }
.ev-bloque-cab p { margin: 12px 0 0; color: var(--suave); max-width: 46ch; }
/* tarjetas de promociones y eventos */
.eventos .carrusel-pista { gap: 14px; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
@media (min-width: 1400px) { .eventos .carrusel-pista { margin-right: 0; padding-right: 0; } }
.eventos .tarjeta { flex: 0 0 min(80%, 360px); min-height: 0; border-color: rgba(243, 238, 228, .14); }
.eventos .tarjeta-foto { aspect-ratio: 1 / 1; }
.eventos .tarjeta-cuerpo { padding: 18px; gap: 8px; }
.eventos .tarjeta h3 { font-size: clamp(24px, 6.4vw, 30px); }
.eventos .tarjeta p { font-size: 15px; line-height: 1.5; }
.eventos .tarjeta .boton { margin-top: 10px; }
/* fotos de lo vivido */
.vivido { flex: 0 0 min(66%, 300px); scroll-snap-align: start; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--hondo); border: 1px solid rgba(243, 238, 228, .14); }
.vivido img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--curva); }
.vivido:hover img { transform: scale(1.04); }
.vivido-pie { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 44px 16px 15px; background: linear-gradient(180deg, transparent 0, rgba(9, 13, 17, .88) 78%); text-align: left; }
.vivido-pie small { font: 600 10.5px/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--acento); }
.vivido-pie strong { font: 500 clamp(19px, 5.2vw, 24px)/1.15 var(--titular); color: var(--tinta); }
/* contacto */
.eventos .contacto { margin-top: clamp(48px, 7vw, 96px); }
@media (min-width: 861px) { .eventos .tarjeta { flex-basis: 340px; } .vivido { flex-basis: 280px; } }
@media (prefers-reduced-motion: reduce) { .vivido img { transition: none; } }


/* ===== Formulario de eventos: botones táctiles en vez de desplegables ===== */
.contacto-texto .boton { margin: 6px 0 4px; }
.form-contacto fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.form-contacto legend { padding: 0; margin-bottom: 8px; font-size: 14px; color: var(--secundario); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: block; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; min-height: 0; margin: 0; cursor: pointer; }
.chip span { display: block; padding: 11px 14px; border: 1px solid var(--linea-suave); color: var(--suave); font-size: 15px; line-height: 1.2; transition: background .2s, color .2s, border-color .2s; }
.chip input:checked + span { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* El local en móvil: carrusel que se desliza con el dedo (las fotos se ven grandes); en escritorio sigue la cuadrícula */
@media (max-width: 860px) {
  .local-galeria { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); -webkit-overflow-scrolling: touch; }
  .local-galeria::-webkit-scrollbar { display: none; }
  .local-galeria figure, .local-galeria .local-grande { flex: 0 0 84%; scroll-snap-align: start; grid-column: auto; }
  .local-galeria img, .local-grande img, .local-galeria .local-grande img { aspect-ratio: 4 / 3; height: auto; }
}


/* ===== Fútbol (rediseño): franja con la foto del salón; el calendario solo sale si hay partidos ===== */
.partidos { position: relative; isolation: isolate; overflow: hidden; background: var(--fondo); padding: clamp(56px, 8vw, 110px) 0; }
.partidos-fondo { position: absolute; inset: 0; z-index: -1; }
.partidos-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.partidos-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 20, 26, .94) 0, rgba(14, 20, 26, .72) 60%, rgba(14, 20, 26, .5) 100%); }
.partidos-sub { margin: clamp(28px, 4vw, 44px) 0 0; font: 500 clamp(24px, 6vw, 32px)/1.1 var(--titular); }
.partidos-sub[hidden], .lista-partidos[hidden] { display: none; }
@media (max-width: 760px) { .partidos-fondo::after { background: linear-gradient(180deg, rgba(14, 20, 26, .86) 0, rgba(14, 20, 26, .78) 100%); } }

/* En móvil la barra fija de abajo ya tiene Reservar por WhatsApp: se quita el botón repetido de «Dónde estamos» */
@media (max-width: 760px) { .boton-solo-escritorio { display: none; } }


/* ===== Mapa en «Dónde estamos» (se carga al pulsar, por privacidad) ===== */
.donde-mapa { position: relative; aspect-ratio: 4 / 3; min-height: 300px; background: radial-gradient(120% 90% at 50% 40%, rgba(230, 172, 90, .10), transparent 60%), var(--fondo); border: 1px solid var(--linea-suave); display: grid; place-items: center; overflow: hidden; }
.donde-mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.9) contrast(1.02); }
.mapa-aviso { display: grid; justify-items: center; gap: 12px; padding: 24px; text-align: center; max-width: 34ch; }
.mapa-titulo { margin: 0; font: 500 clamp(24px, 6vw, 30px)/1.15 var(--titular); }
.mapa-nota { margin: 0; font-size: 14px; line-height: 1.5; color: var(--secundario); }
.mapa-enlace { font-size: 15px; color: var(--acento); }


/* ===== Revisión general: mensaje de carga con más aire y puntos del carrusel más fáciles de tocar ===== */
.intro-frase { line-height: 1.32; letter-spacing: .01em; max-width: 20ch; font-size: clamp(25px, 3.4vw, 42px); }
.carrusel-puntos button { position: relative; }
.carrusel-puntos button::after { content: ""; position: absolute; inset: -18px -3px; }


/* ===== Mapa (mejoras): aspecto oscuro como el resto de la web, tapa para no atrapar el scroll y portada con el símbolo ===== */
.donde-mapa { aspect-ratio: 1 / 1; max-height: 520px; min-height: 340px; }
@media (min-width: 861px) { .donde-mapa { aspect-ratio: 4 / 3; max-height: none; } }
.donde-mapa iframe { filter: invert(92%) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.75); }
.mapa-pin { width: 48px; height: auto; margin-bottom: 4px; }
.mapa-ciudad { margin: 0; color: var(--suave); font-size: 15px; }
.mapa-aviso .boton { margin-top: 6px; }
.mapa-nota { margin-top: 4px; font-size: 12.5px; }
.mapa-tapa { position: absolute; inset: 0; z-index: 2; display: grid; place-items: end center; padding: 0 0 18px; border: 0; background: transparent; color: var(--tinta); font: 600 13px/1 var(--texto); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.mapa-tapa::before { content: ""; position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(180deg, transparent, rgba(14, 20, 26, .85)); z-index: -1; }

/* Escritorio: la foto grande del salón pesa menos (formato más ancho) para que las demás se vean pronto */
@media (min-width: 861px) { .local-grande img, .local-galeria .local-grande img { aspect-ratio: 21 / 9; object-position: 50% 45%; } }


/* Enlaces legales del pie */
.pie-legal { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 13px; }
.pie-legal a { color: var(--secundario); text-decoration: none; }
.pie-legal a:hover { color: var(--acento); text-decoration: underline; }
.form-contacto .acepto a { color: var(--acento); }

.mapa-oculta { position: absolute; top: 10px; right: 10px; z-index: 3; padding: 8px 12px; border: 1px solid var(--acento); background: rgba(14, 20, 26, .85); color: var(--acento); font: 600 12px/1 var(--texto); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.mapa-nota a { color: var(--acento); }
.info-form { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--secundario); }
.info-form a { color: var(--acento); }


/* ===== Carta completa (desplegable) ===== */
.carta-completa { margin-top: clamp(28px, 4vw, 48px); border: 1px solid var(--linea-suave); background: rgba(243, 238, 228, .03); }
.carta-completa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font: 500 clamp(22px, 5.6vw, 28px)/1.2 var(--titular); color: var(--acento); }
.carta-completa summary::-webkit-details-marker { display: none; }
.carta-completa summary::after { content: "+"; flex: none; width: 34px; height: 34px; border: 1px solid var(--acento); border-radius: 50%; display: grid; place-items: center; font: 400 22px/1 "Helvetica Neue", Arial, sans-serif; }
.carta-completa[open] summary::after { content: "–"; }
.carta-completa summary:focus-visible { outline: 2px solid var(--acento); outline-offset: -4px; }
.carta-completa-in { padding: 4px 20px 8px; display: grid; gap: 8px 48px; grid-template-columns: 1fr; }
@media (min-width: 861px) { .carta-completa-in { grid-template-columns: repeat(3, 1fr); padding: 8px 28px 12px; } }
.cc-grupo h3 { margin: 22px 0 4px; font: 500 clamp(26px, 6vw, 32px)/1.1 var(--titular); }
.cc-grupo h4 { margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--linea-suave); font: 600 12px/1 var(--texto); letter-spacing: .2em; text-transform: uppercase; color: var(--secundario); }
.cc-lista { list-style: none; margin: 0; padding: 0; }
.cc-lista li { padding: 8px 0; }
.cc-fila { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.cc-fila b { font-weight: 500; color: var(--tinta); }
.cc-precio { flex: none; color: var(--acento); letter-spacing: .04em; font-size: 15px; }
.cc-lista p { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--suave); }
.carta-notas { margin: 0; padding: 14px 20px 18px; font-size: 13.5px; color: var(--secundario); border-top: 1px solid var(--linea-suave); }
.pie-alcohol { margin: 16px 0 0; font-size: 13px; color: var(--secundario); text-align: center; }

/* ===== Carta completa: otro estilo (banda con título y subtítulo, pestañas en móvil) ===== */
.carta-completa { border: 1px solid rgba(230, 172, 90, .45); background: linear-gradient(90deg, rgba(230, 172, 90, .10), rgba(230, 172, 90, .02) 70%); transition: background .3s, border-color .3s; }
.carta-completa:hover { border-color: var(--acento); }
.carta-completa summary { padding: 20px 22px; font: inherit; color: inherit; }
.cc-tit { display: grid; gap: 6px; }
.cc-tit b { font: 500 clamp(24px, 6.4vw, 32px)/1.1 var(--titular); color: var(--tinta); }
.cc-tit small { font: 600 11.5px/1 var(--texto); letter-spacing: .22em; text-transform: uppercase; color: var(--acento); }
.carta-completa summary::after { width: 40px; height: 40px; background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-size: 26px; transition: transform .3s; }
.carta-completa[open] summary::after { transform: rotate(180deg); }
.cc-pestanas { display: flex; gap: 8px; padding: 4px 20px 6px; }
.cc-pestanas button { flex: 1; min-height: 46px; padding: 0 10px; border: 1px solid var(--linea-suave); background: transparent; color: var(--suave); font: 600 14px/1 var(--texto); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.cc-pestanas button[aria-selected="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.cc-pestanas button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
@media (max-width: 860px) { .cc-grupo { display: none; } .cc-grupo.activo { display: block; } .cc-grupo > h3 { display: none; } }
@media (min-width: 861px) { .cc-pestanas { display: none; } .carta-completa summary { padding: 24px 32px; } }

/* ===== El local: seis cuadrados bajo la foto grande; fondo del fútbol con la pantalla en el centro ===== */
@media (min-width: 861px) { .local-galeria { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 861px) { .local-galeria figure:not(.local-grande) img { aspect-ratio: 1 / 1; } }
@media (max-width: 860px) { .local-galeria figure:not(.local-grande) { flex-basis: 76%; } }
.partidos-fondo img { object-position: 50% 52%; }

/* Cinco cuadrados bajo la foto grande: cinco columnas en escritorio */
@media (min-width: 861px) { .local-galeria { grid-template-columns: repeat(5, 1fr); } }

/* Móvil: en la portada solo se ve el logo grande del centro; el de la cabecera aparece al bajar */
@media (max-width: 760px) {
  .cabecera .marca { transition: opacity .3s ease, visibility .3s ease; }
  .cabecera:not(.con-scroll) .marca { opacity: 0; visibility: hidden; }
}

/* ===== Web más conectada: un solo fondo, una línea que une las secciones y menos carga ===== */
body { background: linear-gradient(180deg, #0E141A 0%, #0A0F14 45%, #0E141A 100%); background-attachment: scroll; }
main { position: relative; isolation: isolate; }
main > section:not(.escena):not(.partidos) { background: transparent; }

/* "Ver la carta completa": centrado y con un solo gesto claro */
.carta-completa summary { flex-direction: column; justify-content: center; text-align: center; gap: 14px; padding: 24px 20px; }
.cc-tit { justify-items: center; text-align: center; }

/* Formulario escondido hasta que se pide */
.form-desplegable { grid-column: 1 / -1; }
.form-desplegable > summary { cursor: pointer; list-style: none; text-align: center; padding: 14px 18px; border: 1px solid rgba(230, 172, 90, .45); color: var(--acento); font: 600 15px/1.2 var(--texto); letter-spacing: .04em; }
.form-desplegable > summary::-webkit-details-marker { display: none; }
.form-desplegable[open] > summary { margin-bottom: 18px; }
.contacto-texto { text-align: left; }


/* ===== Eventos minimalista: una acción clara, dos promos en lista y fotos sueltas ===== */
#carrusel .carrusel-ctrl { display: none; }
#carrusel .carrusel-pista { display: grid; gap: 0; overflow: visible; margin-right: 0; padding-right: 0; scroll-snap-type: none; }
#carrusel .tarjeta { flex: none; display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; background: transparent; border: 0; border-top: 1px solid var(--linea-suave); padding: 18px 0; }
#carrusel .tarjeta:last-child { border-bottom: 1px solid var(--linea-suave); }
#carrusel .tarjeta-foto { aspect-ratio: 1 / 1; }
#carrusel .tarjeta-tipo, #carrusel .tarjeta .boton { display: none; }
#carrusel .tarjeta-cuerpo { padding: 0; gap: 6px; }
#carrusel .tarjeta h3 { font-size: clamp(22px, 5.8vw, 28px); }
#carrusel .tarjeta p { font-size: 15px; line-height: 1.45; }
@media (min-width: 861px) { #carrusel .carrusel-pista { grid-template-columns: 1fr 1fr; column-gap: 40px; } #carrusel .tarjeta:last-child { border-bottom: 0; } #carrusel .tarjeta:nth-child(2) { border-top: 1px solid var(--linea-suave); } #carrusel .tarjeta { grid-template-columns: 132px 1fr; } }
.contacto { margin-top: clamp(28px, 5vw, 48px); }
.ev-cabeza .acciones { margin-top: 22px; }
.contacto { border: 0; background: none; padding: 0; }

/* ===== Móvil: menos cosas a la vista ===== */
@media (max-width: 760px) {
  .escena .acciones { display: none; }            /* la barra de abajo ya tiene "Reservar" */
  .resenas { padding: 40px 0; }
  .resenas .google-barras { display: none; }      /* solo la nota y el enlace a Google */
  .resenas h2 { margin-bottom: 8px; }
}

/* ===== v6 (5-11): carta completa en pestañas también en escritorio, a dos columnas, y vídeo de la cocina ===== */
.cc-pestanas { display: flex; }
.carta-completa-in { grid-template-columns: 1fr; }
.cc-grupo { display: none; }
.cc-grupo.activo { display: block; }
.cc-grupo > h3 { display: none; }
.cc-grupo h4 { break-after: avoid; margin: 14px 0 6px; }
.cc-lista li { break-inside: avoid; padding: 6px 0; }
@media (min-width: 861px) {
  .cc-pestanas { display: flex; max-width: 620px; margin: 0 auto; padding: 4px 28px 6px; }
  .carta-completa-in { padding: 4px 32px 12px; }
  .cc-grupo.activo { column-count: 2; column-gap: 56px; }
}
.cc-video { position: relative; margin: 16px 0 8px; overflow: hidden; border: 1px solid var(--linea-suave); background: var(--hondo); column-span: all; break-inside: avoid; }
.cc-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cc-video figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 16px 12px; background: linear-gradient(180deg, transparent, rgba(9, 13, 17, .85)); font: 600 11.5px/1 var(--texto); letter-spacing: .22em; text-transform: uppercase; color: var(--acento); }

/* ===== v6 (5-11): eventos privados, boceto A ===== */
.ev6 { padding-top: 0; }
.ev6-portada { position: relative; isolation: isolate; min-height: min(78vh, 720px); display: flex; align-items: flex-end; padding: clamp(96px, 12vw, 150px) 0 clamp(40px, 6vw, 72px); margin-bottom: clamp(32px, 4vw, 48px); }
.ev6-portada > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ev6-portada::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--fondo) 0, rgba(9, 13, 17, .2) 22%, rgba(9, 13, 17, .88) 85%); }
.ev6-portada h2 { margin: 0 0 14px; font-size: clamp(44px, 6vw, 84px); line-height: 1; }
.ev6-lede { max-width: 52ch; font-size: clamp(18px, 1.6vw, 21px); color: var(--suave); }
/* En ordenador la foto ocupa la derecha (así no se agranda y se ve nítida) y el texto queda sobre el fondo oscuro */
@media (min-width: 900px) {
  .ev6-portada { align-items: center; }
  .ev6-portada > img { left: auto; width: 58%; }
  .ev6-portada::after { background: linear-gradient(90deg, var(--fondo) 40%, rgba(14, 20, 26, .55) 58%, rgba(14, 20, 26, .12) 80%, rgba(14, 20, 26, .45)), linear-gradient(180deg, var(--fondo) 0, transparent 18%, transparent 78%, var(--fondo)); }
}
.ev6-tipos { display: grid; gap: 14px; }
.ev6-tipo { position: relative; isolation: isolate; overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; padding: 18px; border: 1px solid var(--linea-suave); }
.ev6-tipo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--curva); }
.ev6-tipo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 13, 17, .05) 30%, rgba(9, 13, 17, .92)); }
.ev6-tipo:hover img { transform: scale(1.04); }
.ev6-tipo h3 { margin: 0 0 4px; font: 500 26px/1.1 var(--titular); }
.ev6-tipo p { margin: 0; font-size: 14px; color: var(--suave); }
/* Móvil: las cinco tarjetas en fila, para pasarlas con el dedo */
@media (max-width: 699px) { .ev6-tipos { grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); } .ev6-tipo { scroll-snap-align: start; } }
@media (min-width: 700px) { .ev6-tipos { grid-template-columns: repeat(6, 1fr); } .ev6-tipo { grid-column: span 2; min-height: 260px; } .ev6-tipo:nth-child(-n+2) { grid-column: span 3; min-height: 320px; } }
@media (prefers-reduced-motion: reduce) { .ev6-tipo img { transition: none; } }
.ev6-sello { margin-top: 20px; padding: 14px 16px; border-left: 2px solid var(--acento); background: rgba(243, 238, 228, .04); color: var(--suave); font-size: 15px; }
.ev6-contacto .form-contacto { padding: clamp(20px, 3vw, 32px); border: 1px solid rgba(230, 172, 90, .45); background: linear-gradient(160deg, rgba(230, 172, 90, .08), rgba(9, 13, 17, .6) 60%); }
.ev6-contacto .contacto-texto a { color: var(--acento); }
@media (max-width: 860px) { .ev6-contacto { grid-template-columns: 1fr; } }

/* ===== v6 (5-11): Jost en botones, menú, horario y pestañas (cambio 1) y la frase de los cócteles (cambio 3) ===== */
:root { --ui: "Jost", "Helvetica Neue", Arial, sans-serif; }
.boton { font: 500 14px/1.1 var(--ui); letter-spacing: .16em; text-transform: uppercase; }
.barra-movil .boton { font-size: 13px; letter-spacing: .12em; }
.menu-boton { font-family: var(--ui); }
.estado { font-family: var(--ui); letter-spacing: .06em; }
.escena-estado { font-size: 15px; }
.cc-pestanas button { font-family: var(--ui); font-weight: 500; letter-spacing: .14em; }
.carta-lema { max-width: 34ch; margin: 0 0 14px; font: italic 400 clamp(22px, 2.4vw, 27px)/1.3 var(--titular); color: var(--tinta); }
.carta-pista { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 12px/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--acento); }
.carta-pista::before { content: ""; width: 26px; height: 1px; background: currentColor; }

/* ===== v6 (5-11, tarde): carta sin desplegable, «Más cócteles», «Comida» y «Cafés y bebidas», y el vídeo en franja ===== */
.mas-cocteles { margin-top: clamp(28px, 4vw, 48px); padding-top: 22px; border-top: 1px solid var(--linea-suave); }
.mas-cocteles > h3, .cr-col > h3 { margin: 0 0 6px; font: 500 clamp(26px, 3vw, 34px)/1.1 var(--titular); }
.mc-lista { display: grid; gap: 0 48px; }
@media (min-width: 861px) { .mc-lista { grid-template-columns: repeat(3, 1fr); } }
.cc-sub h4 { margin: 16px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--linea-suave); font: 600 12px/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--secundario); }
.cc-pendiente { margin: 6px 0 0; padding: 8px 10px; border: 1px dashed rgba(230, 172, 90, .45); color: var(--acento); font-size: 14px; }
.carta-resto { margin-top: clamp(36px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--linea-suave); }
.cr-pestanas { display: flex; gap: 8px; margin-bottom: 8px; }
.cr-pestanas button { flex: 1; min-height: 46px; padding: 0 10px; border: 1px solid var(--linea-suave); background: transparent; color: var(--suave); font: 500 13px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.cr-pestanas button[aria-selected="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.cr-pestanas button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.cr-col { display: none; }
.cr-col.activo { display: block; }
.cr-col > h3 { display: none; }
@media (min-width: 861px) {
  .cr-pestanas { display: none; }
  .cr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; align-items: start; }
  .cr-col, .cr-col.activo { display: block; }
  .cr-col > h3 { display: block; }
}
.carta-resto .carta-notas { margin-top: 22px; }
/* Vídeo de la cocina: franja baja, en blanco y negro teñido de azul noche y dorado */
.carta-resto .cc-video { position: relative; isolation: isolate; margin: 10px 0 6px; aspect-ratio: 3 / 1; overflow: hidden; border: 1px solid var(--linea-suave); background: var(--hondo); }
.carta-resto .cc-video video { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(.9); }
.carta-resto .cc-video::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, #0E141A 0%, #3a2a12 50%, #E6AC5A 115%); mix-blend-mode: color; pointer-events: none; }
.carta-resto .cc-video::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14, 20, 26, .55), rgba(14, 20, 26, .1) 60%); pointer-events: none; }
.carta-resto .cc-video figcaption { z-index: 2; padding: 0 14px 12px; background: none; }

/* ===== v6 (5-11, tarde): opiniones en una cita grande (opción 2) ===== */
.r6 .envoltura { text-align: center; }
.r6-cab h2 { margin: 0 0 10px; }
.r6-nota { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0 0 clamp(28px, 4vw, 44px); font: 500 13px/1.3 var(--ui); letter-spacing: .08em; color: var(--secundario); }
.r6-nota a { color: var(--acento); text-decoration: none; border-bottom: 1px solid rgba(230, 172, 90, .5); }
.r6-citas { display: grid; max-width: 860px; margin: 0 auto; }
.r6-cita { grid-area: 1 / 1; margin: 0; display: grid; justify-items: center; align-content: center; gap: 18px; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.r6-cita.activa { opacity: 1; visibility: visible; }
.r6-cita blockquote { margin: 0; }
.r6-cita blockquote::before { content: "“"; display: block; height: .5em; font: 500 110px/1 var(--titular); color: rgba(230, 172, 90, .55); }
.r6-cita p { margin: 0; font: italic 400 clamp(24px, 3.2vw, 36px)/1.3 var(--titular); color: var(--tinta); }
.r6-cita figcaption { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; font: 500 13px/1.2 var(--ui); letter-spacing: .06em; }
.r6-cita figcaption b { color: var(--tinta); font-weight: 600; }
.r6-cita figcaption small { color: var(--secundario); }
.guia { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 6px; border: 1px solid rgba(230, 172, 90, .55); border-radius: 999px; color: var(--acento); font: 600 10.5px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.guia svg { width: 14px; height: 14px; }
.r6-puntos { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.r6-puntos button { width: 28px; height: 20px; padding: 8px 0; border: 0; background: var(--linea-suave); background-clip: content-box; cursor: pointer; }
.r6-puntos button[aria-current="true"] { background-color: var(--acento); }
.r6-puntos button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .r6-cita { transition: none; } }

/* ===== v6 (5-11, tarde): carta con el vídeo limpio a un lado y la carta al otro ===== */
.cr-pestanas, .cr-pestanas { display: flex; }
.cr-col, .cr-col.activo { display: none; }
.cr-col.activo { display: block; }
.cr-col > h3 { display: none; }
@media (min-width: 861px) {
  .cr-pestanas { display: flex; }
  .cr-cols { display: block; }
  .cr-col { display: none; }
  .cr-col.activo { display: block; }
  .cr-col > h3 { display: none; }
  .cr-dos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
  .cr-video { position: sticky; top: 96px; }
  .carta-resto .cr-video .cc-video { aspect-ratio: 4 / 5; margin: 0; }
}
.carta-resto .cr-video .cc-video { margin: 0 0 18px; aspect-ratio: 16 / 7; }
.carta-resto .cc-video::after { content: none; }

/* ===== v6 (5-11, tarde): formulario de eventos, más cuidado y cuadrado ===== */
.ev6-contacto { align-items: start; }
.ev6-contacto .form-contacto { gap: 18px 16px; }
.ev6-contacto .form-contacto > label:not(.acepto), .ev6-contacto .form-contacto legend { font: 500 12px/1.2 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--secundario); }
.ev6-contacto .form-contacto > label:not(.acepto) { gap: 8px; }
.ev6-contacto .form-contacto legend { margin-bottom: 10px; }
.ev6-contacto .form-contacto input, .ev6-contacto .form-contacto textarea { min-height: 50px; padding: 12px 14px; border: 1px solid rgba(243, 238, 228, .18); background: rgba(9, 13, 17, .55); color: var(--tinta); font: 400 16px/1.4 var(--texto); letter-spacing: 0; text-transform: none; color-scheme: dark; transition: border-color .2s; }
.ev6-contacto .form-contacto input:hover, .ev6-contacto .form-contacto textarea:hover { border-color: rgba(230, 172, 90, .45); }
.ev6-contacto .chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ev6-contacto .chip span { display: grid; place-items: center; min-height: 46px; padding: 8px 10px; text-align: center; font: 500 13px/1.2 var(--ui); letter-spacing: .06em; }
.ev6-contacto .acepto { font-size: 14px; line-height: 1.5; color: var(--suave); }
.ev6-contacto .acepto input { min-height: 20px; padding: 0; accent-color: var(--acento); }
.ev6-contacto .info-form { font-size: 12.5px; }
.ev6-contacto .form-contacto button[type="submit"] { margin-inline: 8px; }
@media (max-width: 640px) {
  .ev6-contacto .form-contacto { grid-template-columns: 1fr; }
  .ev6-contacto .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev6-contacto fieldset:has(input[name="personas"]) .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 861px) { .carta-resto .cr-video .cc-video { aspect-ratio: 4 / 5; margin: 0; } }

/* ===== Revisión del 5-11: fallos de la prueba en 45 tamaños, de código y de accesibilidad ===== */
/* Al saltar a una sección, la cabecera fija (77 px) y la barra de abajo no tapan el título ni el foco */
html { scroll-padding-top: 92px; }
@media (max-width: 760px) { html { scroll-padding-bottom: 84px; } }
/* Pantallas muy bajas (móvil en horizontal o mucho zoom): la cabecera y la barra no se quedan fijas */
@media (max-height: 500px) and (orientation: landscape) { html { scroll-padding: 0; } .cabecera { position: absolute; } .barra-movil { position: static; } body { padding-bottom: 0; } }
/* El mapa no se sale de su columna (la altura mínima le daba un ancho mínimo) */
.donde-mapa { min-width: 0; }
/* Fichas de cóctel: que el nombre y el precio quepan en la foto (de 700 a 1000 px y en móviles pequeños) */
.foto-coctel-info { justify-content: safe center; }
@media (min-width: 700px) { .foto-coctel-info strong { font-size: clamp(19px, 2.3vw, 30px); } .foto-coctel-info { gap: 6px; } }
@media (max-width: 400px) { .foto-coctel-info { padding: 6%; gap: 6px; } .foto-coctel-info strong { font-size: 19px; } .foto-coctel-info .ingr, .foto-coctel-info em { font-size: 12.5px; line-height: 1.4; } .foto-coctel-info b { font-size: 15px; } }
.foto-coctel:focus-visible { outline-offset: 0; }
/* Galería del local en móvil: sin franja vacía debajo de la primera foto */
@media (max-width: 860px) { .local-galeria { align-items: flex-start; } }
/* Vídeo de la cocina: tinte azul noche y dorado con filtro, sin mezclas que fallan en Safari */
.carta-resto .cc-video::before { content: none; }
.carta-resto .cc-video video { filter: grayscale(1) sepia(.55) hue-rotate(-12deg) saturate(1.25) brightness(.72) contrast(1.1); }
/* Formulario: bordes que se ven (3:1), opciones del tamaño de su botón y aviso que no ocupa sitio si está vacío */
.ev6-contacto .form-contacto input, .ev6-contacto .form-contacto textarea { border-color: rgba(243, 238, 228, .45); }
.ev6-contacto .chip input { min-height: 0; padding: 0; }
.form-estado:empty { padding: 0; border: 0; }
.form-estado .form-wa { margin-top: 10px; }
.ev6-contacto [aria-invalid="true"] { border-color: #FF9A8A; }
/* Reseñas: puntos más fáciles de tocar y de ver, y el botón Pausar */
.r6-ctrl { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.r6-ctrl .r6-puntos { margin-top: 0; }
.r6-puntos button { height: 24px; padding: 10px 0; background-color: rgba(243, 238, 228, .45); }
.r6-pausa { min-height: 32px; padding: 0 12px; border: 1px solid rgba(230, 172, 90, .55); background: none; color: var(--acento); font: 500 11.5px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.r6-pausa:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
/* Puntos de «Lo que hemos vivido»: zona de toque de 24 px */
.carrusel-puntos button { height: 24px; padding: 9px 0; background-clip: content-box; }
.carrusel-puntos button[aria-current="true"] { background-color: var(--acento); }
/* Botón de pausa de los vídeos: pequeño y discreto, en una esquina */
.pausa-video { position: absolute; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(243, 238, 228, .45); border-radius: 50%; background: rgba(9, 13, 17, .55); color: var(--tinta); cursor: pointer; }
.pausa-video svg { width: 14px; height: 14px; }
.pausa-video:hover { border-color: var(--acento); color: var(--acento); }
.pausa-video:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.escena > .pausa-video { right: var(--gutter); bottom: clamp(20px, 4vh, 36px); }
@media (max-width: 760px) { .escena > .pausa-video { bottom: 92px; } }
.pausa-cocina { right: 10px; bottom: 10px; width: 32px; height: 32px; }
/* Texto de la portada sobre el vídeo: un poco de sombra para que se lea en los fotogramas claros (sin oscurecer el vídeo) */
.escena-frase { text-shadow: 0 2px 16px rgba(9, 13, 17, .85); }
.escena-estado { text-shadow: 0 1px 10px rgba(9, 13, 17, 1); }
/* Pestañas de la carta: el título de cada panel, solo para el lector de pantalla */
.cr-col > h3 { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Filas que se pasan con el dedo: foco visible al recorrerlas con el teclado */
.ev6-tipos:focus-visible, .local-galeria:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
@media (max-width: 640px) { .r6-ctrl { flex-direction: column; gap: 12px; } .r6-pausa { order: 2; } .r6-puntos { gap: 6px; flex-wrap: nowrap; } .r6-puntos button { width: 20px; } }

/* ===== Revisión de diseño del 5-11 ===== */
/* Portada de eventos: el texto arranca en el margen de la página, como el resto */
.ev6-portada > .envoltura { width: 100%; }
/* Y la foto se funde con el fondo de la página sin corte de tono (antes se pintaba un color fijo encima) */
.ev6-portada > img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 72%, transparent 100%); }
.ev6-portada::after { background: linear-gradient(180deg, rgba(9, 13, 17, .05) 30%, rgba(9, 13, 17, .7) 88%); }
@media (min-width: 900px) {
  .ev6-portada > img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%), linear-gradient(180deg, transparent 0, #000 16%, #000 82%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 42%), linear-gradient(180deg, transparent 0, #000 16%, #000 82%, transparent 100%); mask-composite: intersect; }
  .ev6-portada::after { background: linear-gradient(90deg, rgba(9, 13, 17, .25) 40%, rgba(9, 13, 17, .05) 70%, rgba(9, 13, 17, .3)); }
}
/* iPad en vertical: el mapa llena el ancho; «Más cócteles» y la carta, a dos columnas (el precio no queda lejísimos) */
@media (min-width: 641px) and (max-width: 860px) { .donde-mapa { aspect-ratio: 4 / 3; max-height: none; } }
@media (min-width: 600px) and (max-width: 860px) { .mc-lista { grid-template-columns: 1fr 1fr; } .cr-col.activo { column-count: 2; column-gap: 40px; } .cr-col .cc-sub { break-inside: avoid; } }
/* Móvil en horizontal: la portada cabe en la pantalla, con el botón a la vista */
@media (orientation: landscape) and (max-height: 500px) {
  .escena { min-height: 100svh; }
  .escena-in { padding-top: 64px; padding-bottom: 28px; }
  .escena-mono { display: none; }
  .escena-logo { width: clamp(180px, 26vw, 300px); }
  .escena-frase { margin: 10px 0 14px; padding-top: 12px; font-size: clamp(20px, 3vw, 28px); }
}
/* Móviles muy estrechos (320-360 px): que los botones y las pestañas no se partan en dos líneas */
@media (max-width: 360px) {
  .boton, .barra-movil .boton { letter-spacing: .06em; padding-inline: 1.2em; }
  .cr-pestanas button { letter-spacing: .06em; font-size: 12px; }
  .escena-estado { font-size: 13px; letter-spacing: .02em; }
}
/* El botón del mapa cabe en una línea */
.mapa-aviso { max-width: 44ch; }
#ver-mapa { letter-spacing: .1em; }
/* Etiquetas: la misma letra que los botones y las pistas, y doradas también en el formulario */
.etiqueta, .vivido-pie small { font-family: var(--ui); }
.contacto .etiqueta { color: var(--acento); }
/* «Precios con IVA incluido…», alineado con la carta */
.carta-resto .carta-notas { padding-inline: 0; }
/* El mapa ocupa el ancho de su columna (con aspect-ratio y altura mínima, el navegador lo ensanchaba más de la cuenta) */
.donde-mapa { width: 100%; }
/* Móviles estrechos (hasta 380 px): opciones del formulario, botón del mapa y barra de abajo en una línea */
@media (max-width: 380px) {
  .ev6-contacto .chip span { padding: 8px 6px; font-size: 12.5px; letter-spacing: .02em; }
  #ver-mapa { letter-spacing: .04em; padding-inline: 1em; font-size: 13px; }
  .barra-movil .boton { padding-inline: .8em; font-size: 12.5px; letter-spacing: .05em; }
}

/* ===== Mejoras de diseño elegidas por Mattia (5-11) ===== */
/* 5 · En el móvil, los botones que van uno debajo de otro, todos del mismo ancho */
@media (max-width: 640px) {
  .eventos .acciones, .donde .acciones, .ev6-portada .acciones { flex-direction: column; align-items: stretch; }
  .eventos .acciones .boton, .donde .acciones .boton, .ev6-portada .acciones .boton { width: auto; }
}
/* 6 · Formulario en ordenador: el texto de la izquierda acompaña al bajar */
@media (min-width: 861px) { .ev6-contacto .contacto-texto { position: sticky; top: 100px; } }
/* 10 · Aviso de cookies (solo sale cuando haya identificador de Analytics) */
.aviso-cookies { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: grid; gap: 12px; max-width: 560px; margin-inline: auto; padding: 16px 18px; border: 1px solid rgba(230, 172, 90, .5); background: rgba(9, 13, 17, .96); color: var(--suave); font-size: 14px; line-height: 1.5; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.aviso-cookies p { margin: 0; }
.aviso-cookies a { color: var(--acento); }
.aviso-cookies-botones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 760px) { .aviso-cookies { bottom: 84px; } }
/* El botón de pausa de los vídeos no sale en el móvil (Mattia, 5-11); en ordenador se queda */
@media (max-width: 760px) { .pausa-video { display: none; } }