/* =========================================================
   Base / Reset
========================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }
html, body { overflow-x: hidden; } /* evita scroll lateral */

:root{
  --verde-oscuro:#0f1d17; /* banda oscura */
  --verde:#2e3b2e;        /* botones, acentos */
  --blanco:#fff;
  --gris-suave:#fafafa;
  --borde:#eee;
}

body{
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background: #fdfdfd;
  color: #333;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* El contenido empuja el footer hacia abajo */
main { flex: 1; }

/* Utilidades de sección/anchura común */
.section { padding: 2rem 1rem; }
.container { max-width: 1000px; margin: 0 auto; }

/* Full width (banda a ancho completo) — versión única */
.full-bleed{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;        /* importante para no desbordar */
  overflow-x: clip;        /* Safari/WebKit moderno */
}

/* =========================================================
   HEADER en una sola barra: logo | menú (centrado) | redes
========================================================= */
.main-header{
  background: var(--verde);
  position: relative;
}

/* Fila superior */
.top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.6rem 1rem;
  min-height:64px;           /* alto uniforme para centrar el menú */
}

/* Logo */
.brand{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
}
.brand img{
  height: 40px;              /* antes 100px: ahora mucho más limpio */
  width:auto; display:block;
}

/* Redes */
.social-icons{ display:flex; align-items:center; gap:.6rem; }
.social-icons img{ width:22px; height:22px; display:block; }

/* Menú centrado, alineado a la misma altura que redes/brand */
.main-nav{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);      /* centrado perfecto dentro de la barra */
}
.main-nav ul{
  display:flex; list-style:none; gap:1.5rem; align-items:center;
}
.main-nav a{
  color:#fff; text-decoration:none; font-weight:bold;
}
.main-nav a:hover,
.main-nav a.active{ text-decoration: underline; }



/* =========================================================
   Botones
========================================================= */
.btn{
  display:inline-block;
  padding:.65rem 1.05rem;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
}
.btn-primary{ background:var(--verde); color:var(--blanco); }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-ghost{ background:#fff; color:var(--verde); }
.btn-ghost:hover{ filter:brightness(.98); }

/* =========================================================
   Intro / Presentación (banda oscura)
========================================================= */
.intro{ background: var(--verde-oscuro); color:#fff; overflow:hidden; }
.intro .container{ text-align:center; }

.intro-eyebrow{
  letter-spacing:.1em; font-size:.8rem; color:#c8d3cd; margin-bottom:.25rem;
}
.intro-handle{ font-weight:700; margin-bottom:.75rem; }

.intro-title{
  font-size:clamp(1.6rem,3.2vw,2.4rem);
  line-height:1.2;
  margin:1rem 0 .75rem;
}
.intro-lead{
  max-width:820px; margin:0 auto 1.5rem; color:#e7efe9;
}

.intro-grid{
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap:1.2rem;
  margin-top:1.2rem;
}
.intro-grid article{
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  padding:1rem;
  text-align:left;
}

/* =========================================================
   Platos destacados (tarjetas)
========================================================= */
.platos .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;
  margin-top:1rem;
}
.card{
  background:#fff;
  border:1px solid var(--borde);
  border-radius:10px;
  overflow:hidden;
}
.card img{ width:100%; height:150px; object-fit:cover; display:block; }
.card .body{ padding:.9rem; text-align:center; }
.price{ color:var(--verde); font-weight:700; }

/* =========================================================
   Info simple / Horarios
========================================================= */
.info p{ margin:.2rem 0; }

/* =========================================================
   Mapa responsive
========================================================= */
.map-wrap{
  position:relative;
  padding-top:56.25%;
  width:100%;
  border-radius:8px;
  overflow:hidden;
}
.map-wrap iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

/* =========================================================
   Reseñas (carrusel)
========================================================= */
.reseñas{ text-align:center; }
.review-container{
  position:relative;
  max-width:700px;
  margin:1rem auto 0;
}
.review{
  display:none;
  padding:1rem;
  background:var(--gris-suave);
  border:1px solid var(--borde);
  border-radius:10px;
  font-style:italic;
}
.review.active{ display:block; }
.review .stars{ color:gold; font-size:1.1rem; margin:.5rem 0; }

/* =========================================================
   Footer
========================================================= */
footer {
  background: #333; color: white; text-align: center; padding: 1rem; width: 100%;
}
.footer {
  background-color: #1c1c1c; color:#fff; padding: 2rem 1rem 1rem; text-align:center; font-size:.9rem;
}
.footer-container { max-width: 1000px; margin: auto; }
.footer-title { margin-bottom: 1rem; font-size: 1.2rem; letter-spacing: 1px; }

.footer-nav { margin: 1rem 0; }
.footer-nav a { color:#fff; margin: 0 10px; text-decoration:none; font-weight:500; }
.footer-nav a:hover { color: #c0c0c0; }

.footer-social { margin: 1.5rem 0; }
.footer-social a { margin: 0 10px; display: inline-block; }
.footer-social img { width: 32px; height: 32px; transition: transform .3s, opacity .3s; }
.footer-social img:hover { transform: scale(1.1); opacity: .8; }

.footer-legal { margin-top: 2rem; }
.footer-legal h3 { font-size: .9rem; margin-bottom: .5rem; font-weight: bold; }
.footer-legal a { display:block; color:#8fbc8f; text-decoration:none; margin:.3rem 0; }
.footer-legal a:hover { text-decoration: underline; }

.footer-bottom {
  margin-top: 2rem; border-top: 1px solid #333; padding-top: 1rem;
  font-size: .8rem; color: #aaa;
}
.footer-bottom a { color: #8fbc8f; text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }

/* =========================================================
   Contacto / Formulario
========================================================= */
.link-strong { font-weight:700; color:#2e3b2e; text-decoration:underline; }

.contact-social-inline{
  margin:.75rem 0 0; display:flex; justify-content:center; gap:1rem;
}
.contact-social-inline img{ width:42px; height:42px; display:block; }

.contact-form{
  max-width:760px; margin:0 auto; background:#fff; border:1px solid var(--borde);
  border-radius:12px; padding:1.25rem;
}
.contact-form .form-group{ margin-bottom:1rem; }
.contact-form label{ display:block; margin-bottom:.35rem; font-weight:600; }
.contact-form input,
.contact-form textarea{
  width:100%; padding:.75rem .85rem; border:1px solid #d9dfe4; border-radius:10px; outline:none; font:inherit; background:#fff;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:#9aa4ae; }
.contact-form input:focus,
.contact-form textarea:focus{ border-color:#2e3b2e; box-shadow:0 0 0 3px rgba(46,59,46,.12); }

.error-msg{ display:block; color:#b3261e; font-size:.85rem; margin-top:.35rem; }
.form-ok{ margin-top:.75rem; color:#2e7d32; text-align:center; font-weight:600; }

/* =========================================================
   Tarjetas PDF del menú
========================================================= */
.menu-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.menu-card{
  position: relative; display:block; border-radius:12px; overflow:hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08); isolation:isolate; background:#000;
}
.menu-card img{
  width:100%; height:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  transition: transform .45s ease, opacity .45s ease;
}
.menu-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.0) 20%, rgba(0,0,0,.55) 100%);
  z-index:1; transition:opacity .35s ease;
}
.menu-card__label{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2;
  color:#fff; font-weight:800; letter-spacing:.04em; text-align:center;
  padding:.55rem .75rem; border-radius:10px; background:rgba(46,59,46,.85);
  backdrop-filter: blur(1px);
}
.menu-card:hover img,
.menu-card:focus img{ transform:scale(1.04); }
.menu-card:hover::after,
.menu-card:focus::after{ opacity:.9; }
.menu-card:focus{ outline:3px solid #2e3b2e; outline-offset:2px; }

/* =========================================================
   Arreglos móviles / alturas / WhatsApp / Hero
========================================================= */
@supports (height: 100svh){ body{ min-height:100svh; } }
@supports (height: 100dvh){ body{ min-height:100dvh; } }

@media (max-width: 900px){ .menu-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){ .menu-cards{ grid-template-columns: 1fr; } }

@media (max-width: 760px){
  .intro-grid{ grid-template-columns:1fr; }
  .brand img{ height:34px; }

  /* En móvil el menú baja debajo para no apretar la barra */
  .top-bar{ flex-wrap:wrap; padding:.6rem .75rem; }
  .main-nav{
    position: static; transform:none; width:100%; margin-top:.4rem;
  }
  .main-nav ul{ justify-content:center; gap:1rem; flex-wrap:wrap; }
}

/* Hero en móvil: altura controlada */
@media (max-width: 480px){ .hero-media{ height: 220px; } }

/* Botón de WhatsApp encima de todo pero sin tapar */
.whatsapp-float{ z-index:50; bottom:16px; right:16px; }
.whatsapp-float img{ width:52px; height:52px; }

/* =========================================================
   Popup cookies
========================================================= */
.cookie-popup{
  position:fixed; bottom:0; left:0; right:0; background:rgba(28,28,28,.95);
  color:#fff; padding:1rem; text-align:center; z-index:1000; display:none;
  animation: slideUp .4s ease;
}
.cookie-popup__content{ max-width:800px; margin:auto; }
.cookie-popup__content p{ margin-bottom:.5rem; font-size:.9rem; }
.cookie-popup__actions{ margin-top:.5rem; }
.cookie-popup .btn{ margin:0 .3rem; }

@keyframes slideUp{
  from{ transform:translateY(100%); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

/* ========= Secciones alternas / divisor / tarjetas suaves ========= */
.section--alt { background: #f6f8f7; }

.section-title {
  text-align: center;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  margin-bottom: 1.5rem;
  letter-spacing: .02em;
}

.divider {
  width: 90px; height: 3px;
  background: linear-gradient(90deg, #c7d6cc, #2e3b2e);
  margin: .5rem auto 1.5rem;
  border-radius: 999px;
}

.card-soft {
  background: #fff;
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: clamp(1rem, 2.2vw, 1.25rem);
}

/* ========= Animación de entrada (reveal on scroll) ========= */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* retrasos opcionales encadenados */
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }

/* ========= Header sticky con blur cuando haces scroll ========= */
.main-header { position: sticky; top: 0; z-index: 100; }
.main-header.is-scrolled .top-bar {
  background: rgba(46,59,46,.8);
  backdrop-filter: blur(6px);
  transition: background .25s ease, backdrop-filter .25s ease;
}

/* ========= Parallax sutil del hero (se activa con JS) ========= */
.hero-media { transform: translateZ(0); }
.parallax-on .hero-media {
  will-change: transform;
  transition: transform .12s linear;
}


/* --- HERO con carrusel --- */
.hero { position: relative; }
.hero .container { position: relative; }

/* El carrusel debe tener altura propia */
.hero-slider{
  position: relative;
  height: clamp(280px, 42vw, 420px);   /* misma lógica que tenías en .hero-media */
  border-radius: 8px;
  overflow: hidden;
}

/* Cada slide ocupa todo el carrusel */
.hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.hero-slide.is-active{ opacity: 1; }

/* La imagen llena el slide */
.hero-slide .hero-media{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Capas: overlay por encima de la foto, texto por encima de todo */
.hero-overlay {
  background: rgba(0, 0, 0, 0.35);
  z-index: 2;
  position: absolute;
  inset: 0;
  border-radius: 8px;
}
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  z-index: 3;
  padding: 0 1rem;
}

.legal-subtitle{
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: .5rem 0 1.2rem;
  letter-spacing: .03em;
}

.legal-page p{
  margin: .8rem 0;
  line-height: 1.7;
}

/* Sublistas a, b, c… */
.legal-sublist{
  margin-top: .5rem;
  padding-left: 1.2rem;
  list-style-type: lower-alpha;
}

.legal-sublist li{
  margin: .4rem 0;
}

/* ====== Legales: secciones + tabla + listas ====== */
.legal-note{
  margin: .4rem 0 1.2rem;
  font-size: .95rem;
  color: #555;
}

.legal-h2{
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 1.4rem 0 .55rem;
}

.legal-bullets{
  margin: .4rem 0 1rem;
  padding-left: 1.1rem;
  text-align: left;
}
.legal-bullets li{ margin: .45rem 0; line-height: 1.7; }

.legal-links{
  margin: .6rem 0 1rem;
  padding-left: 1.1rem;
}
.legal-links li{ margin: .35rem 0; }

/* Tabla responsive */
.legal-table-wrap{
  margin: .8rem 0 1.2rem;
  overflow-x: auto;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 10px;
  background: #fff;
}

.legal-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.legal-table th,
.legal-table td{
  text-align: left;
  padding: .75rem .8rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
  vertical-align: top;
  line-height: 1.5;
}

.legal-table thead th{
  font-weight: 800;
  background: #f6f8f7;
}
/* Sub-viñetas para páginas legales */
.legal-subbullets{
  margin-top: .45rem;
  padding-left: 1.1rem;
  list-style: disc;
}

.legal-subbullets li{
  margin: .35rem 0;
  line-height: 1.7;
}


/* Controles del carrusel por encima */
.hero-prev, .hero-next, .hero-dots{ z-index: 3; }