body { font-family: 'Poppins', sans-serif; }


:root{
  --bg:#0a0a0a;
  --fg:#ffffff;
  --gold:#d4af37;
  --muted: rgba(255,255,255,.7);
  --card: rgba(255,255,255,.05);
  --border: rgba(255,255,255,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  body { font-family: 'Noto Sans JP', sans-serif; }

  background:var(--bg);
  color:var(--fg);
  line-height:1.5;
  padding-top:70px; /* evita que el header tape contenido */
}
.container{max-width:1100px; margin-inline:auto; padding:0 16px}

/* ===== HEADER / NAV ===== */
.header{
  position: fixed;
  top: 0; left: 0; width: 100%;
  z-index: 1000;
  background: linear-gradient(90deg, rgba(0,0,0,0.9), rgba(20,20,20,0.8));
  backdrop-filter: blur(3px);
  border: none; box-shadow: none;
  transition: background 0.4s ease;
}
.header.scrolled{
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(3px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 18px rgba(212,175,55,.18);
}

/* --- FIX: tamaño y alineación del logo en el navbar --- */
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.logo-img{
  height:40px;     /* -> controla el alto del logo en el nav */
  width:auto;
  display:block;
  border-radius:8px; /* opcional */
}

.logo-text{
  font-weight:600;
  color:#fff;
  font-size:1.1rem;
  letter-spacing:.5px;
}
.logo-text span{ color:var(--gold); }

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; max-width:1200px; margin:0 auto;
}
.nav-links{
  display:flex; align-items:center; gap:16px; list-style:none; margin:0; padding:0;
}
.nav-link{
  color: rgba(255,255,255,0.9);
  text-decoration:none; padding:8px 12px; border-radius:8px;
  transition:.2s;
}
.nav-link:hover{ background:transparent !important; color:var(--gold) !important; }
.nav-toggle{
  display:none; flex-direction:column; gap:4px; padding:8px;
  border:1px solid var(--border); border-radius:8px; background:transparent; color:var(--fg);
}
.nav-toggle-bar{ width:20px; height:2px; background:currentColor; display:block; }


/* ===== BOTONES ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:10px; border:1px solid transparent;
  font-weight:600; text-decoration:none; transition:background-color .2s,color .2s,border-color .2s, transform .2s, box-shadow .2s;
  position:relative; z-index:0; overflow:hidden;
}
.btn-gold{background:var(--gold); color:#000; border-color:var(--gold)}
.btn-gold:hover{background:#fff; color:#000; border-color:#fff}
.btn-light{background:#fff; color:#000; border-color:#fff}
.btn-light:hover{background:var(--gold); border-color:var(--gold)}
.block{display:block; width:100%}
.w-auto{width:auto}
.row{display:flex; gap:12px; flex-wrap:wrap}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 0 12px rgba(212,175,55,.3); }

/* Borde dorado animado (para todos los botones/enlaces clave) */
.btn::after,
.nav-link::after,
.btn-carta::after,
.reserva-btn::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:2px;
  background: linear-gradient(120deg, #b99329, #d4af37, #fff2aa, #d4af37, #b8860b, #b99329);
  background-size:300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.btn:hover::after,
.btn:focus-visible::after,
.nav-link:hover::after,
.nav-link:focus-visible::after,
.btn-carta:hover::after,
.btn-carta:focus-visible::after,
.reserva-btn:hover::after,
.reserva-btn:focus-visible::after{
  opacity:1; animation: goldSweep 2s linear infinite;
}
@keyframes goldSweep{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

/* ===== HERO ===== */
/* === HERO CON VIDEO === */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 2rem;
  overflow: hidden;
  background: #000; /* color de fondo mientras carga el vídeo */
}

/* El vídeo ocupa todo el fondo */
.hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.6); /* ajusta a gusto (0.6 = más oscuro) */
}

/* Velo oscuro encima del vídeo */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25); /* leve sombra para texto legible */
  z-index: 1;
}



/* Degradado inferior opcional */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 180px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%);
  pointer-events: none;
  z-index: 2;
}

/* Caja dorada sobre el vídeo */
.gold-frame.hero-box {
  position: relative;
  z-index: 3;
}

.gold-frame{
  position:relative; border-radius:22px; padding:3rem 2.5rem;
  background:rgba(15,15,15,.9); overflow:hidden; z-index:1;
  box-shadow:0 0 25px rgba(212,175,55,.25);
}
.gold-frame::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:3px;
  background: linear-gradient(120deg, #d4af37, #fff2aa, #b8860b, #d4af37);
  background-size:300% 300%; animation: goldFlow 5s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; z-index:-1;
}
@keyframes goldFlow{
  0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}
}
.hero-box{ max-width:600px; }
.display{ font-size:clamp(42px,6vw,72px); font-weight:800; margin:0 0 .8rem; line-height:1.05; letter-spacing:.02em; text-shadow:0 2px 20px rgba(0,0,0,.35); }
.gold{ color:var(--gold); }
.tagline{ color:#cfcfcf; font-size:0.9rem; margin-bottom:2rem; }
.hero-actions{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }

/* Logo sustituyendo la “E” */
.display .logo-e{ display:inline-block; width:.92em; height:.82em; line-height:0; vertical-align:.3em; margin:-.3em; }
.display .logo-e img{ display:block; width:100%; height:100%; object-fit:contain; }

/* ===== SECCIONES GENERALES ===== */
.section{ padding:72px 0; }
.section-contrast{ background:var(--card); border-block:1px solid var(--border); }
.center{text-align:center}
h2{ font-size:clamp(24px,3.5vw,36px); margin:0 0 6px }
.muted{ color:var(--muted) }
.strong{ font-weight:600 }

/* ===== PRECIOS / CARD ===== */
.precios-grid{
  display:grid; grid-template-columns:2fr 1fr; align-items:stretch; gap:50px; margin-top:30px;
}
@media (max-width:900px){
  .precios-grid{ grid-template-columns:1fr; }
}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.card-pricing{ padding:22px }
.pricing-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px }
.pricing-title{ margin:0; font-size:22px }
.pricing-now .label{ display:block; font-size:12px; color:var(--muted); margin-bottom:2px }
.pricing-now .price{ font-size:22px; font-weight:800; color:#d4af37; text-shadow:0 0 12px rgba(212,175,55,.3) }

/* Lista simple de precios (sin tabla) */
.pricing-list{ display:flex; flex-direction:column; gap:12px; margin-top:1rem; padding:0; }
.price-item{
  display:flex; justify-content:space-between; align-items:center;
  background:none; border:none; color:#fff;
}
.price-item span{ flex:1; text-align:left; }
.price-item .price{ flex:0; text-align:right; font-weight:700; color:var(--gold); }

/* ===== Tabla de precios limpia ===== */
.pricing-table { margin-top: 8px; border-top: 1px solid var(--border); }
.pt-row {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.pt-head {
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.pt-precio {
  justify-self: end;
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(212,175,55,.25);
}
.text-right { text-align: right; }

/* Para móviles: apilar con etiquetas */
@media (max-width: 600px) {
  .pt-row { 
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .pt-head { display: none; }
  .pt-row .pt-precio { justify-self: start; }
  .pt-row > div { line-height: 1.25; }
  .pt-row .pt-franja { font-weight: 600; }
  .pt-row .pt-precio { margin-top: 2px; }
}

/* ===== Condiciones elegantes ===== */
.pricing-conditions {
  margin-top: 18px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
}
.conditions-title {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.conditions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.conditions-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
}
.conditions-list .term { font-weight: 600; }
.conditions-list .value { font-weight: 700; color: var(--gold); }
.conditions-list .note {
  grid-template-columns: 1fr;
  font-size: 12px;
}


/* Columna derecha: botón carta + imagen */
.carta-right{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; margin-top:40px; }
.btn-carta{
  font-size:1.2rem; padding:18px 42px; border-radius:12px; font-weight:700;
  background: linear-gradient(90deg, #d4af37, #b99329); color:#000; text-decoration:none;
  box-shadow:0 4px 16px rgba(212,175,55,.25); transition:all .3s ease;
}
.btn-carta:hover{ background: linear-gradient(90deg, #e3c24a, #d4af37); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.nigiri-img{ display:flex; justify-content:center; }
.nigiri-img img{ width:75px; height:auto; filter: drop-shadow(0 0 10px rgba(212,175,55,.2)); transition: transform .3s ease; }
.nigiri-img img:hover{ transform: scale(1.1) rotate(-2deg); }

/* ===== TÍTULOS CON BRILLO / SUBRAYADO ===== */
.precios-head{ text-align:center; padding:18px 0 30px; position:relative; isolation:isolate; }
/* Brillo dorado animado dentro del texto (unifica Precios y otros títulos) */
.title-precios .shine,
.title-shiny .shine{
  font-size: clamp(36px,6vw,64px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.05;

  background: linear-gradient(
      90deg,
      #8a6a1a 0%,
      #b99329 15%,
      #d4af37 30%,
      #fff7c8 42%,
      #d4af37 55%,
      #b99329 70%,
      #8a6a1a 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: shineMove 3s linear infinite;

  filter: drop-shadow(0 0 10px rgba(212,175,55,.25))
          drop-shadow(0 0 22px rgba(212,175,55,.15));
}

/* si no lo tienes ya en tu CSS */
@keyframes shineMove{
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.title-precios::after{
  content:""; position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
  width:0; height:4px; border-radius:999px;
  background: linear-gradient(90deg,#b99329,#d4af37,#fff2aa,#d4af37,#b8931d);
  box-shadow:0 4px 18px rgba(196, 187, 158, 0.45);
  animation: underline-grow .8s .3s ease forwards;
}
.subtitle-precios{ color: rgba(255,255,255,.75); font-size: clamp(14px,2vw,18px); margin:6px 0 0; }

.title-shiny{ margin:0 0 10px; display:inline-block; position:relative; }
.title-shiny::after{
  content:""; position:absolute; left:50%; bottom:-12px; transform:translateX(-50%);
  width:0; height:4px; border-radius:999px;
  background: linear-gradient(90deg,#b99329,#d4af37,#fff2aa,#d4af37,#b8931d);
  box-shadow:0 4px 18px rgba(212,175,55,.45);
  animation: underline-grow .8s .3s ease forwards;
}
.title-shiny .shine{
  font-size: clamp(36px,6vw,64px); font-weight:900; letter-spacing:.02em; line-height:1.05;
  background: linear-gradient(90deg,#8a6a1a 0%,#b99329 15%,#d4af37 30%,#fff7c8 42%,#d4af37 55%,#b99329 70%,#8a6a1a 100%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: shineMove 3s linear infinite;
  filter: drop-shadow(0 0 10px rgba(212,175,55,.25)) drop-shadow(0 0 22px rgba(212,175,55,.15));
}
@keyframes underline-grow{ to{ width:160px; } }
@keyframes shineMove{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ===== RESERVAS ===== */
.section-contrast{ background:#0a0a0a; color:#fff; padding:80px 20px; }
.reservas-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr));
  gap:60px; align-items:start; justify-content:center; margin:60px auto 0; width:90%; max-width:1200px;
}
@media (max-width:900px){
  .reservas-grid{ grid-template-columns:1fr; text-align:center; }
}
.reservas-card{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(212,175,55,.3);
  border-radius:18px; padding:40px 35px;
  box-shadow:0 6px 25px rgba(212,175,55,.07);
  backdrop-filter: blur(8px);
  transition: all .3s ease; width:100%;
}
.reservas-card:hover{ border-color: rgba(212,175,55,.6); box-shadow:0 8px 35px rgba(212,175,55,.18); transform: translateY(-4px); }
.descripcion{ color: rgba(255,255,255,.85); line-height:1.6; margin-bottom:20px; }
.reserva-btn{
  display:inline-block; margin:10px 0 25px; padding:14px 24px; border-radius:10px; font-weight:600;
  background: linear-gradient(90deg, #d4af37, #b99329); color:#000; text-decoration:none; transition: all .3s ease;
}
.reserva-btn:hover{ background: linear-gradient(90deg, #e3c24a, #d4af37); box-shadow:0 0 15px rgba(212,175,55,.4); transform: translateY(-3px); }

/* Alternativa: margen solo a partir del segundo elemento */
.reservas-card form > * + *{
  margin-top: 14px;
}
@media (min-width:900px){
  .reservas-card form > * + *{ margin-top: 16px; }
}

/* ===== GRID 2 / MAPA / IFRAMES ===== */
.grid-2{ display:grid; grid-template-columns:1fr; gap:22px }
@media (min-width:768px){ .grid-2{ grid-template-columns:1fr 1fr } }
.stack{ display:flex; flex-direction:column; gap:16px }
.iframe-frame{ border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.6); }
.iframe-frame iframe{ width:100%; height:520px; border:0; display:block; }
@media (max-width:900px){ .iframe-frame iframe{ height:480px; } }

/* ===== INPUTS ===== */
.input{
  width:100%; padding:12px 14px; border:1px solid rgba(255,255,255,.15);
  border-radius:10px; background:rgba(255,255,255,.03); color:#fff; outline:none; transition:.2s;
}
.input:focus{
  border-color: rgba(212,175,55,.6);
  box-shadow: 0 0 0 3px rgba(212,175,55,.15);
}

/* ===== SELECTOR DE IDIOMA (custom) ===== */
.lang-switch{ position:relative; display:flex; align-items:center; margin-left:8px; }
.lang-btn{
  display:flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.08); color:#fff; border:1px solid var(--border);
  padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:700;
}
.lang-btn .chev{ opacity:.7 }
.flag{ font-size:16px; line-height:1; display:inline-block }
.lang-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:120px; background:#111; border:1px solid var(--border); border-radius:10px;
  padding:6px; list-style:none; margin:0; box-shadow:0 12px 30px rgba(0,0,0,.45);
  display:none; z-index:1200;
}
.lang-menu.open{ display:block; }
.lang-menu li{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer; color:#fff;
}
.lang-menu li:hover, .lang-menu li:focus{ background:rgba(255,255,255,.08); outline:none; }
@media (max-width:900px){
  .lang-switch{ width:100%; }
  .lang-btn{ width:100%; justify-content:space-between; }
  .lang-menu{ width:100%; }
}

/* ===== REVEAL ON SCROLL ===== */
.reveal{ opacity:0; transform:translateY(30px); transition: all .8s ease-out; }
.reveal.visible{ opacity:1; transform:translateY(0); }

/* ===== FOOTER ===== */
.footer{ border-top:1px solid var(--border); padding:28px 0; background:#000 }
.footer-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.footer a{ color:var(--muted); text-decoration:none }
.footer a:hover{ color:var(--gold) }

/* ===== NAV MÓVIL ===== */
@media (max-width:900px){
  .nav-toggle{
    display:flex; position:relative; z-index:1000;
    border-radius:10px; background:rgba(0,0,0,.6);
  }
  .nav-links{
    display:none; position:fixed; top:60px; right:12px; left:auto;
    background:rgba(0,0,0,.95); border:1px solid var(--border); border-radius:12px;
    padding:12px; flex-direction:column; gap:8px; box-shadow:0 12px 30px rgba(0,0,0,.45); z-index:999;
  }
  .nav-links.open{ display:flex; }
  .nav-links .btn{ width:100% }
}

/* --- FIX NAV DESKTOP (sin cambios visuales) --- */
.header .nav{ flex-wrap: nowrap; }
.header .nav .nav-links{ flex-wrap: nowrap; gap: 14px; }
.header .nav .nav-links li{ white-space: nowrap; }      /* no partir items */
.header .nav .nav-links .nav-link{ white-space: nowrap; }/* no partir el texto */

/* evita que “Où sommes-nous” se rompa en dos */
.header .nav .nav-links a[data-i18n="nav.location"]{
  white-space: nowrap;
}

/* tamaño ligeramente más compacto para que quepa sin saltos en desktop estrecho */
@media (min-width: 768px){
  .header .nav a,
  .header .nav button{
    font-size: .95rem;
  }
}

/* en móvil, que SÍ pueda saltar dentro del menú desplegable si hace falta */
@media (max-width: 900px){
  .header .nav .nav-links li,
  .header .nav .nav-links .nav-link{
    white-space: normal;
  }
}

/* Contener el pseudo-elemento al propio link */
.nav-link{
  position: relative;      /* <<< clave */
  border-radius: 999px;    /* para el pill */
  padding: 8px 14px;       /* como ya tenías */
  overflow: hidden;        /* evita desbordes del borde animado */
}

/* El borde dorado animado del link: que ocupe SOLO el link */
.nav-link::after{
  inset: 0;                /* antes lo tenías en -1px y podía “salirse” */
  border-radius: inherit;
}

/* Hover normal: solo el link, no el nav entero */
.nav-link:hover::after{
  opacity: 1;
}

/* ===== PRELOADER ===== */
#preloader {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

.loader-logo img {
  width: 120px;
  height: auto;
  animation: spin 2s linear infinite;
  filter: drop-shadow(0 0 12px rgba(212,175,55,0.5));
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===== PRELOADER PREMIUM ===== */
:root{
  /* usa tu paleta si ya tienes variables */
  --gold: #d4af37;
  --gold-glow: rgba(212,175,55,.35);
  --bg-deep: #0a0a0a;
  --text: #eaeaea;
  --muted: #9aa0a6;
}

#preloader{
  position: fixed; inset: 0; z-index: 99999;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(1200px 600px at 60% -20%, rgba(212,175,55,0.08), transparent 60%),
              radial-gradient(900px 500px at 10% 120%, rgba(255,255,255,0.05), transparent 60%),
              var(--bg-deep);
  overflow: hidden;
  transition: opacity .6s ease, visibility .6s ease;
}
#preloader.fade-out{ opacity: 0; visibility: hidden; }

#preloader .pl-bg{
  position:absolute; inset:-20%;
  background:
    radial-gradient(120px 120px at 20% 30%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(160px 160px at 80% 70%, rgba(212,175,55,.10), transparent 60%),
    radial-gradient(100px 100px at 60% 40%, rgba(255,255,255,.04), transparent 60%);
  filter: blur(20px);
  animation: float-bg 12s ease-in-out infinite alternate;
  pointer-events:none;
}

#preloader .pl-content{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center; color:var(--text); padding:16px 20px;
}

#preloader .ring-wrap{ position:relative; width:150px; height:150px; }
#preloader .ring{
  position:absolute; inset:0; border-radius:50%;
  background:
    conic-gradient(from 0deg, var(--gold) 0 25%, rgba(255,255,255,.12) 25% 30%, transparent 30% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(50% - 8px), #000 calc(50% - 7px));
          mask: radial-gradient(farthest-side, transparent calc(50% - 8px), #000 calc(50% - 7px));
  box-shadow: 0 0 20px var(--gold-glow), inset 0 0 18px rgba(0,0,0,.6);
  animation: spin 1.4s linear infinite;
}
#preloader .ring::after{
  content:""; position:absolute; inset:8px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.06), transparent 60%);
  filter: blur(2px);
}

#preloader .logo{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  transform: translateZ(0);
}
#preloader .logo img{
  width: 86px; height:auto;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.6)) drop-shadow(0 0 10px var(--gold-glow));
  animation: breathe 2.6s ease-in-out infinite;
}

#preloader .progress{
  width:min(320px, 70vw); height:6px; background: rgba(255,255,255,.06);
  border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
#preloader .progress .bar{
  width: calc(var(--p, 0) * 1%); height:100%;
  background: linear-gradient(90deg, rgba(255,255,255,.5), var(--gold));
  box-shadow: 0 0 14px var(--gold-glow);
  transition: width .25s ease;
}

#preloader .meta{ display:flex; flex-direction:column; gap:6px; }
#preloader .percent{ font-weight:800; letter-spacing:.02em; }
#preloader .tagline{ font-size: 13px; color: var(--muted); }

#preloader .skip{
  opacity:0; pointer-events:none;
  margin-top:6px; padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.02);
  color:#fff; font-size:13px; letter-spacing:.02em;
  transition: opacity .4s ease, transform .2s ease;
}
#preloader.skip-visible .skip{ opacity:1; pointer-events:auto; }
#preloader .skip:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.25); }

/* Animaciones */
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes breathe{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.04); }
}
@keyframes float-bg{
  0%{ transform: translate3d(-2%, -1%, 0) scale(1); }
  100%{ transform: translate3d(2%, 1%, 0) scale(1.04); }
}

#preloader .ring{ animation: spin 1.4s linear infinite !important; }

/* ===== UBICACIÓN ELEGANTE ===== */
.ubicacion-grid{
  display:grid; grid-template-columns: 1fr; gap:24px; margin-top:18px;
}
@media (min-width: 900px){
  .ubicacion-grid{ grid-template-columns: 1fr 1.2fr; align-items:start; gap:36px; }
}

.ubicacion-card{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: 22px;
}

.ubi-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;
}
.ubi-title{ margin:0; font-size: clamp(20px, 3vw, 26px); }
.ubi-sub{ margin:0; }

.ubi-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:12px; letter-spacing:.03em;
  color:#000; background: linear-gradient(90deg, #d4af37, #b99329);
  padding:8px 12px; border-radius:999px; box-shadow:0 6px 18px rgba(212,175,55,.25);
}

.ubi-body{ display:flex; flex-direction:column; gap:16px; margin-top:8px; }
.ubi-row{ display:grid; grid-template-columns:120px 1fr; gap:12px; align-items:start; }
.ubi-label{ color: var(--muted); font-size:14px; }
.ubi-text{ margin:0; color:#fff; }

.ubi-horario{ display:flex; flex-direction:column; gap:4px; }
.ubi-note{ font-size:12px; }

.ubi-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.ubi-cta{ margin-top:6px; }

/* Mapa con cabecera flotante */
.mapa-wrap{
  position:relative;
}
.mapa-head{
  position:absolute; left:16px; right:16px; top:16px; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.mapa-info h4{ margin:0; font-size:16px; }
.mapa-info p{ margin:0; font-size:13px; }

.mapa-cta{ padding:8px 12px; }

.mapa-frame{
  border-radius:18px; overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.6);
}

/* Hover sutil en botones de esta sección */
#ubicacion .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(212,175,55,.25);
}


/* ===== CONTACTO ===== */

@media (min-width: 900px){
  .contacto-grid{ grid-template-columns: 1fr 1.3fr; gap:36px; }
}
.contact-card, .contact-form{
  background: rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:18px; padding:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.contact-title{ margin:0 0 12px; font-size: clamp(20px,3vw,26px); }

.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.contact-item{ display:grid; grid-template-columns:140px 1fr; gap:12px; }
.contact-item .label{ color:var(--muted); }
.contact-item .value{ color:#fff; text-decoration:none; }

.contact-cta{ display:grid; gap:10px; margin-top:16px; }

.form-grid{ gap:14px !important; }
.form-label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.contact-actions{ display:flex; align-items:center; gap:12px; margin-top:12px; }
.form-ok{ font-size:14px; color:#9be8a5; }

/* Separación entre el subtítulo y el recuadro de contacto */
.contacto-grid {
  margin-top: 40px; /* ajusta a tu gusto: 30px, 50px, etc. */
}

/* Línea gris divisoria entre secciones */
.section + .section {
  position: relative;
  margin-top: 80px; /* separación vertical */
  padding-top: 80px;
}

.section + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08); /* gris suave */
}


/* === Menú del día dentro del bloque de Buffet Libre === */
.daymenu-inline .amount {
  display: inline-block;
  font-weight: 700;         /* más grueso */
  font-size: 1.25rem;       /* un poco más grande */
  color: #d4af37;           /* dorado legible */
  margin: 0.2rem 0;        /* separación arriba y abajo */
  letter-spacing: 0.5px;    /* un poco más de aire entre letras */
}

.daymenu-inline .dm-price {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.daymenu-inline .dm-sub {
  line-height: 1.5;
  opacity: 0.9;
}

/* Botón VER CARTA dentro del buffet */
.carta-inline{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* El bloque derecho del Menú del día como card */
.daymenu-card .pricing-head{
  align-items: center;
}

.daymenu-card .dm-price .label{
  display:block;
  font-size:12px;
  color: var(--muted);
  margin-bottom:2px;
}

.daymenu-card .amount{
  display:inline-block;
  font-weight:800;
  font-size:1.25rem;
  color: var(--gold);
  letter-spacing:.4px;
}

.daymenu-card .dm-sub{
  line-height:1.55;
  margin: 10px 0 16px;
  opacity:.9;
}

/* El botón dentro de ambas cards */
.card .btn-carta{
  padding:16px 28px;
}

/* (Opcional) equilibrio de columnas en móvil */
@media (max-width:900px){
  .carta-inline{
    margin-top: 18px;
  }
}

/* ——— PRECIOS: abrir más el layout y mover el buffet a la izquierda ——— */

/* Ancha la “container” SOLO en la sección de precios */
#precios .container{
  max-width: 1280px;      /* antes 1100px */
  padding-left: 6px;      /* menos padding lateral */
  padding-right: 6px;
}

/* En desktop: dale más ancho al Menú del día y empuja el Buffet hacia la izquierda */
@media (min-width: 900px){
  .precios-grid{
    /* más ancho total y la derecha (menú) más grande */
    grid-template-columns: 2.1fr 1.5fr;   /* antes 2fr 1fr */
    gap: 40px;                            /* un poco de aire entre cards */
  }

  /* mueve el Buffet Libre ligeramente a la izquierda */
  .precios-grid > .card-pricing:first-child{
    margin-left: -28px;   /* prueba -20 / -36 según te guste */
  }

  /* opcional: estira un pelín la card de la derecha hacia el borde */
  .precios-grid > .daymenu-card{
    margin-right: -12px;  /* quita esto si no lo quieres al ras */
  }
}

/* Recortar la altura de la card del Menú del día */
.daymenu-card{
  align-self: start;     /* no se estira con la columna izquierda */
  min-height: unset;     /* anula el 100% que la hacía alta */
  height: auto;
  padding-bottom: 1.5rem;
}

/* Centrar SOLO el botón dentro de la card */
.daymenu-card > .btn-carta{
  display: inline-flex;
  margin: 8px auto 0;    /* centrado horizontal */
  min-width: 260px;
  text-align: center;
}

/* (Opcional) si aún ves estirado en algunos navegadores */
.precios-grid{ align-items: start; }

/* 1) Centrar SOLO el botón del Menú del día */
.daymenu-card{
  display: flex;              /* permite alinear hijos */
  flex-direction: column;
}
.daymenu-card .btn-carta{
  align-self: center;         /* centrado horizontal */
  margin-top: 12px;           /* un pelín de aire */
  min-width: 260px;           /* tamaño cómodo */
  text-align: center;
}

/* 2) Mismo color de fondo y borde para ambas cards */
.card,
.daymenu-card{
  background: var(--card) !important;   /* asegura el mismo tono */
  border: 1px solid var(--border) !important;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Por si la grid estira alturas, que empiece arriba (evita sombras raras) */
.precios-grid{ align-items: start; }

/* SELECT (input de hora) en tema oscuro */
select.input {
  color: #fff;                 /* en el control cerrado */
  background: rgba(255,255,255,.03);
}

/* Opciones del desplegable (lista nativa) */
select.input option {
  color: #000;                 /* texto negro para fondo claro nativo */
  background: #fff;            /* asegura contraste en la lista */
}

/* Por si usas optgroups alguna vez */
select.input optgroup {
  color: #333;
  background: #fff;
}

/* Placeholder "--:--" más tenue en el control cerrado */
select.input:invalid {
  color: rgba(255,255,255,.6);
}

/* 1) Nunca permitir desbordes horizontales globales (seguro extra) */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 2) La tarjeta de contacto no debe ser más ancha que el viewport */
.contact-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 3) Forzar corte en emails/números largos dentro de la lista */
.contact-item .value,
.contact-item a.value {
  display: block;             /* que ocupe su propia línea */
  max-width: 100%;
  white-space: normal;        /* permitir saltos de línea */
  overflow-wrap: anywhere;    /* cortar si no hay espacios (emails) */
  word-break: break-word;     /* compat extra */
  hyphens: auto;              /* si el idioma lo permite */
}

/* (opcional) por si hay otros textos largos en tarjetas similares */
.ubi-text,
.mapa-info p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* HERO debe ser relativo */
.hero, #hero { position: relative; }

/* Contenedor: se mueve SOLO en vertical */
.scroll-down{
  position:absolute;
  left:50%;
  bottom:140px;             /* súbela/bájala aquí */
  width:42px; height:42px;
  cursor:pointer;
  z-index:10;
  will-change: transform;
  animation: bob 1.6s ease-in-out infinite;
  /* no pongas aquí otro transform fuera de la animación */
}

/* La flecha: solo rotación, sin animación */
.scroll-down span{
  display:block;
  width:100%; height:100%;
  border-left:4px solid #d4af37;
  border-bottom:4px solid #d4af37;
  transform: rotate(-45deg);
  animation: none !important;   /* por si quedó algo previo */
  opacity:.9;
}

/* Movimiento vertical PURO del contenedor */
/* OJO: mantenemos translateX(-50%) en todos los frames */
@keyframes bob{
  0%   { transform: translateX(-50%) translateY(0); }
  50%  { transform: translateX(-50%) translateY(12px); }
  100% { transform: translateX(-50%) translateY(0); }
}

/* Elimina esto si lo añadiste antes porque puede desactivar la animación */
/*
@media (prefers-reduced-motion: reduce){
  .scroll-down{ animation: none; }
}
*/

.ubi-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:12px; letter-spacing:.03em;
  color:#000; background: var(--gold);
  padding:8px 12px; border-radius:999px;
  box-shadow:0 6px 18px rgba(212,175,55,.25);
}
.ubi-badge.is-closed{
  background:#a22; color:#fff; box-shadow:none;
}

/* Que el botón "Copiar dirección" ocupe el mismo ancho que "Cómo llegar" */
#btnCopiar {
  display: block;
  width: 100%;
}