/* ==========================================================================
   Espacio I3J — hoja de estilos de producción
   El diseño de escritorio vive en los atributos style= del HTML (tal como se
   aprobó). Aquí sólo hay tres cosas:
     1. las bases que antes iban en <helmet>
     2. los hovers, que antes generaba el runtime de React desde style-hover=
     3. la capa responsive, que sólo actúa por debajo de 980px
   ========================================================================== */

/* 1 · BASES ---------------------------------------------------------------- */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #F4F1EA; scroll-behavior: smooth; }
body { font-family: 'Hanken Grotesk', system-ui, sans-serif; color: #1B1917; -webkit-font-smoothing: antialiased; }
::selection { background: #A8894F; color: #FAF8F4; }
a { text-decoration: none; }
img { max-width: 100%; }

@keyframes kb        { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes fadeUp    { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes lineIn    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes scrollDot { 0% { transform: translateY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } }

.fu1 { animation: fadeUp 1s cubic-bezier(.22,1,.36,1) .15s both; }
.fu2 { animation: fadeUp 1s cubic-bezier(.22,1,.36,1) .32s both; }
.fu3 { animation: fadeUp 1s cubic-bezier(.22,1,.36,1) .5s  both; }
.fu4 { animation: fadeUp 1s cubic-bezier(.22,1,.36,1) .68s both; }
.fu5 { animation: fadeUp 1s cubic-bezier(.22,1,.36,1) .86s both; }
.goldrule { transform-origin: left center; animation: lineIn .9s cubic-bezier(.22,1,.36,1) .4s both; }

.scrim-top    { position:absolute; inset:0; background:linear-gradient(180deg,rgba(23,20,17,.55) 0%,rgba(23,20,17,.12) 26%,rgba(23,20,17,0) 46%); pointer-events:none; }
.scrim-bottom { position:absolute; inset:0; background:linear-gradient(0deg,rgba(23,20,17,.42) 0%,rgba(23,20,17,0) 40%); pointer-events:none; }
.vgn          { position:absolute; inset:0; box-shadow:inset 0 0 130px 24px rgba(20,18,16,.30); pointer-events:none; }

.idx   { display:inline-flex; align-items:center; gap:12px; font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; font-weight:600; }
.idx b { font-family:'Hanken Grotesk'; color:#A8894F; font-weight:700; }
.idx i { width:26px; height:1px; background:#C9AE76; display:inline-block; font-style:normal; }

.lift { transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1); }

/* Grano de película en toda la página */
.grain {
  position:fixed; inset:0; pointer-events:none; z-index:9000; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Accesibilidad: saltar al contenido y foco visible */
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:#1D1B18; color:#F4EFE6; padding:12px 20px; border-radius:0 0 6px 0; font-size:14px; font-weight:600;
}
.skip-link:focus { left:0; }
a:focus-visible, button:focus-visible {
  outline:2px solid #C6A15B; outline-offset:3px; border-radius:4px;
}

/* 2 · HOVERS ---------------------------------------------------------------
   Equivalentes exactos de los antiguos atributos style-hover=              */

.btn-cream:hover   { background:#C6A15B !important; }
.btn-ghost:hover   { background:rgba(250,248,244,.16) !important; }
.btn-dark:hover    { background:#A8894F !important; }
.btn-gold:hover    { background:#D8B978 !important; }
.btn-gold-dk:hover { background:#A8894F !important; }
.btn-outline:hover { background:#1D1B18 !important; color:#FAF8F4 !important; }

.lift-4:hover { transform:translateY(-4px); }
.lift-4.shadow-up:hover { box-shadow:0 50px 90px rgba(29,27,24,.22); }
.lift-3:hover { transform:translateY(-3px); }
.zoom:hover   { transform:scale(1.045); }

.foot-link:hover  { color:#F4EFE6 !important; }
.legal-link:hover { color:#C6A15B !important; }
.wa-fab:hover     { background:#A8894F !important; color:#1D1B18 !important; }

.doc-body a       { color:#8A6A30; }
.doc-body a:hover { color:#5F4A22; }

/* 3 · MENÚ MÓVIL -----------------------------------------------------------
   Oculto por completo en escritorio; el <nav> de siempre manda ahí.        */

.nav-toggle {
  display:none; align-items:center; justify-content:center;
  width:46px; height:46px; padding:0; margin:0;
  background:transparent; border:1px solid rgba(244,239,230,.34); border-radius:8px;
  color:#F4EFE6; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.nav-toggle span {
  display:block; position:relative; width:20px; height:1.5px; background:currentColor;
  transition:background .2s ease;
}
.nav-toggle span::before, .nav-toggle span::after {
  content:""; position:absolute; left:0; width:20px; height:1.5px; background:currentColor;
  transition:transform .28s cubic-bezier(.22,1,.36,1), top .28s cubic-bezier(.22,1,.36,1);
}
.nav-toggle span::before { top:-6px; }
.nav-toggle span::after  { top:6px; }
.nav-toggle[aria-expanded="true"] span { background:transparent; }
.nav-toggle[aria-expanded="true"] span::before { top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top:0; transform:rotate(-45deg); }

.nav-backdrop {
  display:none; position:fixed; inset:0; z-index:8100;
  background:rgba(14,12,11,.55); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .3s ease;
}
body.nav-open .nav-backdrop { display:block; opacity:1; }
body.nav-open { overflow:hidden; }

@media (max-width: 980px) {

  /* -- cabecera ---------------------------------------------------------- */
  /* Ojo: backdrop-filter convierte a la cabecera en bloque contenedor de sus
     descendientes position:fixed. Con él activo, el panel del menú se anclaría
     a la cabecera en lugar de a la ventana. Se desactiva sólo en móvil. */
  .site-header {
    padding:14px clamp(16px,5vw,28px) !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  .site-header .brand img { height:56px !important; }
  .nav-toggle { display:inline-flex; }

  /* La cabecera crea contexto de apilamiento (z-index:8000), así que el panel
     que vive dentro de ella debe superar al velo elevando la propia cabecera. */
  body.nav-open .site-header { z-index:8300 !important; }
  /* El botón debe quedar por encima del panel para poder cerrarlo */
  body.nav-open .nav-toggle { position:relative; z-index:8400; }

  .site-nav {
    position:fixed; top:0; right:0; bottom:0; z-index:8200;
    width:min(86vw, 340px);
    background:#1D1B18; border-left:1px solid #33302A;
    display:flex !important; flex-direction:column; align-items:stretch !important;
    justify-content:flex-start; gap:0 !important;
    padding:96px 26px 32px;
    transform:translateX(100%);
    /* visibility saca el panel cerrado del orden de tabulación y del árbol de
       accesibilidad sin depender de JavaScript; se retrasa hasta que acaba la
       animación de salida. */
    visibility:hidden;
    transition:transform .34s cubic-bezier(.22,1,.36,1), visibility 0s linear .34s;
    overflow-y:auto; overscroll-behavior:contain;
    box-shadow:-24px 0 60px rgba(14,12,11,.4);
  }
  body.nav-open .site-nav {
    transform:translateX(0); visibility:visible;
    transition:transform .34s cubic-bezier(.22,1,.36,1), visibility 0s;
  }

  .site-nav > a {
    font-size:17px !important; padding:17px 2px; color:#F4EFE6 !important;
    border-bottom:1px solid #2C2924; text-shadow:none !important; letter-spacing:.01em !important;
  }
  /* El CTA de reserva dentro del panel */
  .site-nav > a.nav-cta {
    margin-top:26px; border-bottom:0; text-align:center;
    background:#C6A15B !important; color:#1D1B18 !important;
    font-weight:700 !important; padding:17px 24px !important; border-radius:6px !important;
  }

  /* -- rejillas de 2 y 3 columnas a una sola ----------------------------- */
  .g-salon, .g-equip, .g-txiki, .g-catering, .g-reservar, .g-ubicacion, .g-footer {
    grid-template-columns:1fr !important;
  }
  .g-salon    { gap:34px !important; }
  .g-footer   { gap:38px !important; }
  .g-catering { gap:0 !important; }
  .g-catering .catering-photo { min-height:300px !important; position:relative !important; order:-1; }

  /* La tarjeta de tarifas deja de ser sticky al apilarse */
  .tarifas-card { position:static !important; }

  /* Galería: de mosaico 2x2 a dos filas legibles */
  .g-gallery {
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto auto !important;
    height:auto !important;
  }
  .g-gallery > *        { grid-row:auto !important; aspect-ratio:4/3; }
  .g-gallery > :first-child { grid-column:1 / -1; aspect-ratio:16/10; }

  /* Reservar: el panel oscuro ya no se sale de pantalla */
  .g-reservar .reservar-steps { padding:32px 26px !important; }
  .g-reservar .reservar-cta   { padding:34px 26px !important; }

  .txiki-price { flex-direction:column !important; align-items:stretch !important; gap:20px !important; }
  .txiki-price .btn-outline { width:100%; }

  .hero { height:auto !important; min-height:640px !important; padding:120px 0 116px; }
}

@media (max-width: 640px) {

  .site-header { padding:12px 16px !important; }
  .site-header .brand img { height:48px !important; }

  .hero { min-height:580px !important; }
  .hero-stats {
    display:grid !important; grid-template-columns:repeat(3,1fr); gap:0;
    margin-top:44px !important; max-width:100% !important;
  }
  .hero-stats > div {
    padding:0 6px !important; border-right:1px solid rgba(247,241,230,.2) !important;
  }
  .hero-stats > div:last-child { border-right:0 !important; }
  .hero-cta { flex-direction:column; align-items:stretch; }
  .hero-cta > a { text-align:center; }

  /* Listado de equipamiento a una columna */
  .g-equip-list { grid-template-columns:1fr !important; gap:18px !important; }

  .g-gallery { grid-template-columns:1fr !important; }
  .g-gallery > :first-child { aspect-ratio:4/3; }

  .g-txiki { gap:14px !important; }
  .g-txiki > * { aspect-ratio:4/3 !important; }

  .catering-features { gap:10px !important; }
  .catering-features span { font-size:11.5px !important; }
  /* Sin min-width:0 las tres columnas no bajan de su min-content y la tarjeta,
     que recorta el desbordamiento, se comía el texto en pantallas de 320px. */
  .cf-item { min-width:0; }
  .cf-item span { overflow-wrap:break-word; hyphens:auto; }

  .footer-legal { justify-content:flex-start !important; }

  /* Botón flotante de WhatsApp algo más discreto en pantallas pequeñas */
  .wa-fab { width:52px !important; height:52px !important; bottom:16px !important; right:16px !important; }

  /* Área táctil mínima cómoda */
  .site-nav > a, .footer-links a, .footer-legal a { min-height:44px; display:flex; align-items:center; }
}

@media (max-width: 400px) {
  /* A 320px no caben tres columnas con separadores */
  .cf-divider { display:none !important; }
  .g-catering > div:first-child { padding:32px 20px !important; }
}

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