/* --------------------------------- */
/*      Fuentes y reset básico       */
/* --------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

:root { --font-ui: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body {
  font-family: var(--font-ui);
  color: #333;
  background: #fafafa;
  line-height: 1.6;
}

/* --------------------------------- */
/*            Topbar                 */
/* --------------------------------- */
.topbar {
  position: absolute;
  top: 0; left: 0; width: 100%;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 0.8rem 0;
  font-size: 0.85rem;
  z-index: 300; /* sobre slider y header */
}
.topbar .container {
  max-width: 1350px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 2rem;
}
.topbar .left, .topbar .right { display: flex; gap: 1.5rem; align-items: center; }
.topbar i { margin-right: 6px; }

/* --------------------------------- */
/*           Fullscreen slider       */
/* --------------------------------- */
section.fullscreen-slider{
  position: relative; height: 100vh; width: 100%; overflow: hidden;
}
section.fullscreen-slider::after{ /* overlay para contraste del caption */
  content:""; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,.30));
  z-index: 1;
}
section.fullscreen-slider .slide{
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: cover;
  opacity: 0; transition: opacity 1s ease;
}
section.fullscreen-slider .slide.active{ opacity: 1; z-index: 1; }

/* Caption fijo */
.slider-static-caption{
  position: absolute; z-index: 2;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; color: #fff; border: none;
  padding: .8rem 1.1rem; border-radius: 0; pointer-events: none;
  max-width: min(92vw, 820px);
}
.slider-static-caption h2{ font-size: 2.8rem; margin-bottom: .3rem; }
.slider-static-caption h1{
  font-size: 4.2rem;
  font-family: 'Cormorant Garamond', 'Montserrat', system-ui, serif;
  letter-spacing: .02em;
}
.slider-static-caption p{ font-size: 1.35rem; margin-bottom: 1rem; }

/* Botón del slider */
.slider-btn{
  display: inline-block; background-color: #dd5903; color: #fff;
  padding: .8rem 1.6rem; text-decoration: none; letter-spacing: .03em;
  margin: 1.15rem auto 0; font-size: .95rem; text-align: center;
  text-transform: uppercase; font-weight: 600; border-radius: 0 !important;
  transition: background-color .3s ease; pointer-events: auto; min-height: 44px;
}
.slider-btn:hover{ background-color: #e07b00; }

/* Bienvenidos (si lo usas en caption) */
.bienvenidos-header{
  display:flex; align-items:center; justify-content:center; gap:2rem; margin-bottom:.7rem;
}
.bienvenidos-header .line{ flex:2; height:1px; background:#fff; max-width:80px; }
.bienvenidos-h1{ font-size:20px; color:#fff; letter-spacing:.1em; }
.bienvenidos-h3{ text-transform:uppercase; font-size:1.25rem; color:#fff; letter-spacing:.1em; }

/* --------------------------------- */
/*      Header y navegación (PC)     */
/* --------------------------------- */
header.header-container{
  position: absolute; top: 70px; width: 100%;
  background: transparent; padding: 1rem 2rem; z-index: 290;
}
.header-inner{
  max-width: 1300px; margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{ height:6vh; display:flex; }
nav{ position: relative; isolation: isolate; }

:root{ --nav-item-gap: 2rem; --dropbtn-arrow-gap: .3rem; }
.nav-list{
  display:flex; gap:1.6rem; list-style:none; margin:0;
}
.nav-list > li{ position:relative; z-index:1; }

/* Enlaces y botón de dropdown (PC) */
.nav-list a, .nav-list .dropbtn{
  color:#fff; text-decoration:none; font-weight:500; text-transform:uppercase;
  font-size:13px; padding:.5rem 0; display:inline-block; position:relative; z-index:1;
}
/* Área de clic expandida */
.nav-list a::before, .nav-list .dropbtn::before{
  content:""; position:absolute; top:0; bottom:-10px; left:-15px; right:-15px; z-index:0;
}

/* Dropbtn + flecha (PC) */
.dropbtn{
  display:inline-flex; gap:.3rem; align-items:center; position:relative;
  padding:.8rem 1.5rem; margin:0 -.5rem 0 .1rem; background:none; border:0; cursor:pointer;
  color:#fff; font-weight:500; font-size:13px; text-transform:uppercase;
}
.dropbtn-text{ position:relative; display:inline-block; }
.dropbtn-text::after{
  content:''; position:absolute; bottom:-4px; left:0; width:100%; height:2px;
  background:#dd5903; transform:scaleX(0); transform-origin:left center; transition:transform .3s ease;
}
a:hover .dropbtn-text::after,
.dropbtn:hover .dropbtn-text::after,
.nav-list > li.active .dropbtn-text::after{ transform:scaleX(1); }

.dropbtn i{ margin-left:.5rem; margin-right:.4rem; font-size:.7rem; color:#fff; transition:transform .3s ease; }

/* Dropdown (PC) */
.dropdown .dropdown-content{
  position:absolute; top:calc(100% + 10px); left:0;
  transform: translate(0, 10px);
  background:#090909; border-radius:4px; min-width:210px;
  padding:1rem 0 1rem 1rem; opacity:0; visibility:hidden;
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  z-index: 301; text-align:left; height:auto; max-height:80vh; pointer-events:auto;
}
.dropdown:hover > .dropdown-content,
.dropbtn:hover + .dropdown-content,
.dropdown-content:hover{
  opacity:1; visibility:visible; transform: translate(0,0); transition-delay:0s,0s,0s;
}
.dropdown-content li{ list-style:none; text-align:left; }
.dropdown-content li a{
  position:relative; display:inline-block; font-size:13px; font-weight:500; color:#fff;
  text-transform:capitalize; padding:.6rem 0; margin-left:1rem; text-decoration:none;
}
.dropdown-content li a::after{
  content:''; position:absolute; left:0; bottom:4px; height:1px; background:#dd5903;
  width:100%; transform:scaleX(0); transform-origin:left center; transition:transform .3s ease;
}
.dropdown-content li a:hover::after,
.dropdown-content li.active a::after{ transform:scaleX(1); }

@media (max-width:1200px){
  .dropdown .dropdown-content{ max-width:90vw; overflow-wrap:anywhere; }
}

/* --------------------------------- */
/*        Hero Section Home          */
/* --------------------------------- */
.hero-section{ padding: 5rem 1rem; background:#fff8f5; }

.hero-grid{
  display:grid; grid-template-columns: 1.1fr 0.9fr; grid-template-rows:auto auto;
  gap:1.5rem; max-width:1300px; margin:0 auto; align-items:center; height:auto;
}
.hero-content{ grid-column:1; grid-row:1; }
.hero-subtitle{
  display:inline-flex; align-items:center; gap:16px; text-transform:uppercase;
  color:#dd5903; letter-spacing:.1em; font-size:1rem; margin-bottom:.6rem; font-weight:700; white-space:nowrap;
}
.hero-subtitle::after{
  content:""; display:block; height:0; width:70px; border-top:1.5px solid currentColor; opacity:.85;
}
@media (max-width:480px){ .hero-subtitle::after{ width:80px; } }

.hero-content h1{
  font-size:4.5rem; font-family:'Cormorant Garamond', serif; line-height:1.1; margin-bottom:1.5rem;
  width:auto; max-width:20ch;
}
.hero-content p{
  font-size:1rem; color:#363636; line-height:1.6; margin-bottom:1.5rem;
  width:auto; max-width:65ch;
}
.btn-hero{
  display:inline-block; background:#dd5903; color:#fff; padding:.8rem 1.6rem;
  text-decoration:none; border-radius:0; font-weight:600; transition:background-color .3s ease;
  margin-bottom:1.1rem; text-transform:uppercase; font-size:.85rem; letter-spacing:.03em; min-height:44px;
}
.btn-hero:hover{ background:#e07b00; }

/* Imágenes */
.hero-small-image{ grid-column:1; grid-row:2; }
.hero-small-image img{ width:100%; height:100%; display:block; object-fit:cover; }
.hero-large-image{ grid-column:2; grid-row:1 / span 2; height:100%; }
.hero-large-image img{ width:100%; height:100%; display:block; object-fit:cover; margin-top:0; }

/* Responsive hero */
@media (max-width: 768px){
  .hero-grid{ grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .hero-large-image{ grid-row:3; } /* al final */
}

/* --------------------------------- */
/*         Menu Columns Home         */
/* --------------------------------- */
.menu-section{ padding: 8rem 4rem; background:#fff; }
.menu-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:3rem; max-width:1400px; margin:0 auto;
}
.menu-col .menu-subtitle{
  display:block; text-transform:uppercase; font-size:.85rem; letter-spacing:.1em; color:#dd5903; margin-bottom:.5rem;
}
.menu-col .menu-title{ font-size:2rem; margin-bottom:1.5rem; }
.menu-list{ list-style:none; margin:0; padding:0; }
.menu-item{ display:flex; align-items:center; }
.menu-item .item-name{ white-space:nowrap; font-weight:500; }
.menu-item .dots{ flex:1; margin:0 1rem; border-bottom:1px solid #ccc; }
.menu-item .item-price{ white-space:nowrap; font-weight:500; }
.item-desc{ margin:.25rem 0 1rem; font-size:.9rem; color:#555; }
.menu-buttons{ text-align:center; margin-top:2.5rem; }
.btn-outlined{
  display:inline-block; margin:0 .5rem; padding:.75rem 1.5rem; color:#333; border:1px solid #333;
  text-decoration:none; font-weight:500; transition: background-color .3s ease, color .3s ease;
}
.btn-outlined:hover{ background:#333; color:#fff; }
@media (max-width:992px){ .menu-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .menu-grid{ grid-template-columns:1fr; } }

/* --------------------------------- */
/*         Sección Sobre Nosotros    */
/* --------------------------------- */
:root{
  --brand:#dd5903; --ink:#0f0f0f; --muted:#6b6b6b; --bg-soft:#faf7f5; --radius:0; --gap:1.25rem;
}
.about-section, .about-section *{ font-family: var(--font-ui); }
.about-section{ background:var(--bg-soft); padding: clamp(2rem,3.5vw,4rem) 1rem; color:var(--ink); }
.about-section .container{ max-width:1100px; margin:80px auto 90px auto; }
.about-header{ text-align:center; margin-bottom:2rem; }
.about-header h2{ font-weight:640; letter-spacing:.02em; font-size: clamp(1.6rem,2.8vw,2.2rem); margin:.2rem 0 .6rem; }
.about-header .subtitle{
  display:inline-flex; align-items:center; gap:12px; margin:0 auto .75rem; text-transform:uppercase;
  letter-spacing:.08em; font-weight:600; font-size:.95rem; color:var(--brand); white-space:nowrap;
}
.about-header .subtitle::before, .about-header .subtitle::after{
  content:""; display:block; height:0; width:120px; border-top:1px solid currentColor; opacity:.9;
}
.about-section p{ line-height:1.7; font-size:1.02rem; letter-spacing:.005em; margin:0 0 1rem; }
.about-section strong{ font-weight:620; }
.about-address{ display:block; margin:1rem 0 1.25rem; font-style:normal; color:var(--ink); }
.about-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem 1.25rem; margin-top:1.2rem;
}
.about-links a{
  position:relative; text-decoration:none; text-transform:uppercase; font-weight:600; letter-spacing:.08em;
  font-size:.85rem; color:var(--brand); padding:.35rem .5rem; border-radius:var(--radius);
  transition: opacity .2s ease, transform .15s ease;
}
.about-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:.15rem; margin:0 auto; width:0%; height:1px;
  background:currentColor; transition: width .25s ease;
}
.about-links a:hover::after{ width:100%; }
.about-links a:hover{ transform: translateY(-1px); }

.about-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:var(--gap); align-items:start; }
.about-col{ background:transparent; }

@media (max-width:768px){
  .about-header .subtitle::before, .about-header .subtitle::after{ width:80px; }
  .about-grid{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .about-header .subtitle{ gap:10px; letter-spacing:.07em; }
  .about-header .subtitle::before, .about-header .subtitle::after{ width:64px; }
  .about-links a{ font-size:.8rem; letter-spacing:.07em; }
}

/* --------------------------------- */
/*    Galería Instagram “Patio”      */
/* --------------------------------- */
.insta-gallery{ padding:1rem 0; background:#fafafa; position:relative; }
.insta-grid{
  display:grid; grid-template-columns: repeat(6, minmax(0,1fr));
  gap:10px; padding:0 16px; max-width:1400px; margin:0 auto;
}
.insta-grid .insta-item{ grid-column:auto !important; grid-row:auto !important; }
.insta-item{ display:block; overflow:hidden; position:relative; aspect-ratio:1/1; }
.insta-item img{ width:100%; height:100%; object-fit:cover; transition: transform .3s ease, opacity .3s ease; border-radius:0 !important; }
.insta-item:hover img{ transform: scale(1.05); }
.insta-big{ grid-column: span 3 !important; grid-row: span 3 !important; aspect-ratio:auto; }

.insta-follow{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:200px; height:200px; background:#fff; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:2; box-shadow:0 2px 8px rgba(0,0,0,.15); pointer-events:none;
}
.insta-follow a{
  color:#c59763; font-weight:600; text-decoration:none; text-align:center; line-height:1.4; font-size:1.3rem; pointer-events:auto;
}
@media (max-width:1200px){
  .insta-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .insta-big{ grid-column: span 2 !important; grid-row: span 2 !important; }
}
@media (max-width:768px){
  .insta-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .insta-big{ grid-column: 1 / -1 !important; grid-row: span 1 !important; }
  .insta-follow{ display:none; }
}

/* --------------------------------- */
/*      Sección Testimonios          */
/* --------------------------------- */
.testimonials-section{ padding:6rem 4rem; background:#fafafa; text-align:center; }
.testimonials-header{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
}
.testimonials-header .testimonials-subtitle{
  position:relative; display:inline-flex; align-items:center; gap:15px; margin:0;
  text-transform:uppercase; font-weight:bold; color:#dd5903; letter-spacing:.1em; font-size:1.1rem;
}
.testimonials-header .testimonials-subtitle::before,
.testimonials-header .testimonials-subtitle::after{
  content:""; display:block; height:0; width:70px; border-top:1px solid #dd5903;
}
.testimonials-header h2, .testimonials-header .testimonials-intro{
  flex:1 1 100%; text-align:center; margin:.5rem 0 0;
}
.testimonials-header h2{
  font-family:'Cormorant Garamond', serif; font-size:2.9rem; text-transform:uppercase; margin-bottom:1rem;
}
.testimonials-header .testimonials-intro{
  font-size:1rem; color:#555; max-width:600px; margin:0 auto 2.5rem; line-height:1.6;
}

/* Slider testimonios */
.testimonial-slider{ position:relative; overflow:hidden; max-width:800px; margin:0 auto; }
.testimonial-slider .slides{ display:flex; transition: transform .5s ease-in-out; }
.testimonial-slider .testimonial{ flex:0 0 100%; box-sizing:border-box; padding:1rem 2rem; }
.testimonial blockquote{ font-style:italic; font-size:1rem; color:#333; margin-bottom:1.5rem; line-height:1.6; }
.author-info{ display:inline-flex; align-items:center; gap:1rem; margin-top:1rem; }
.author-info img{ width:80px; height:80px; border-radius:50%; object-fit:cover; }
.author-info strong{ display:block; font-size:1rem; color:#333; }
.author-info span{ font-size:.85rem; color:#555; }

.slider-dots{ display:flex; justify-content:center; gap:.5rem; margin-top:2rem; }
.slider-dots .dot{
  width:10px; height:10px; background:#ccc; border:none; border-radius:50%; cursor:pointer; transition: background .3s;
}
.slider-dots .dot.active{ background:#333; }

@media (max-width:768px){
  .author-info{ flex-direction:column; gap:.5rem; }
  .testimonial blockquote{ font-size:.95rem; }
}

/* --------------------------------- */
/*             Responsive            */
/* --------------------------------- */
@media (max-width:768px){
  .nav-list{ gap:1rem; }
  header.header-container{ padding:.75rem 1rem; }
  .header-container .logo{ font-size:1.5rem; }
}

/* --------------------------------- */
/*           Site Footer             */
/* --------------------------------- */
.site-footer{ background:#111; color:#ddd; font-size:.95rem; line-height:1.5; margin-top:0; }
.footer-top{
  display:flex; flex-wrap:wrap; gap:0; max-width:1300px; margin:0 auto 0; padding:4rem 0 2.5rem;
}
.footer-col{ flex:1; min-width:440px; }
.footer-about h2{ color:#fff; margin-bottom:.75rem; font-size:1.8rem; }
.footer-about p{ margin-bottom:1rem; max-width:400px; }
.social-links a{ color:#ddd; margin-right:.5rem; font-size:1.2rem; transition: color .3s; }
.social-links a:hover{ color:#dd5903; }
.footer-hours h3, .footer-contact h3, .footer-newsletter h3{
  color:#fff; margin-bottom:.75rem; font-size:1.4rem; margin-top:1.5rem;
}
.footer-hours ul{ list-style:none; padding:0; }
.footer-hours li{ display:flex; justify-content:space-between; margin-bottom:.5rem; }
.footer-hours .happy-hour span:first-child{ font-style:italic; }
.footer-contact p{ display:flex; align-items:center; margin-bottom:.5rem; }
.footer-contact i{ margin-right:.5rem; color:#dd5903; }
.footer-newsletter p{ margin-bottom:.75rem; }
.newsletter-form{ display:flex; flex-direction:column; }
.newsletter-form input[type="email"]{
  padding:.6rem 1rem; border:none; border-radius:4px; margin-bottom:.5rem;
}
.newsletter-form button{
  align-self:flex-end; background:none; border:none; font-size:1.3rem; color:#fff; cursor:pointer; transition: color .3s;
}
.newsletter-form button:hover{ color:#dd5903; }
.newsletter-form .privacy{ display:flex; align-items:center; font-size:.85rem; margin-top:.5rem; }
.newsletter-form .privacy a{
  color:#ddd; text-decoration:none; margin-left:.4rem; border-bottom:1px solid transparent; transition: border-color .3s;
}
.newsletter-form .privacy a:hover{ border-color:#ff8c00; }
.newsletter-form .privacy input{ margin-right:.5rem; }

.footer-divider{ max-width:1300px; margin:0 auto; border-top:1px solid rgba(255,255,255,.1); }
.footer-bottom{
  max-width:1300px; margin:auto; padding:4rem 0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; font-size:.85rem;
}
.footer-bottom > p{ margin:0; color:rgba(255,255,255,.7); }
.footer-links{ display:flex; gap:1.5rem; list-style:none; font-size:.9rem; margin:0 20px; padding:0; }
.footer-links a{ color:rgba(255,255,255,.7); text-decoration:none; transition: color .3s; }
.footer-links a:hover{ color:#ff8c00; }

@media (max-width:768px){
  .footer-top{ flex-direction:column; padding:2rem; }
  .footer-divider{ display:none; }
  .footer-bottom{ flex-direction:column; text-align:center; gap:.5rem; }
}

/* --------------------------------- */
/*            Genéricos              */
/* --------------------------------- */
#scrollToTopBtn{
  position:fixed; bottom:2rem; right:2rem; width:3.5rem; height:3.5rem;
  background:#f3f3f3; color:#000; border:none; border-radius:50%;
  box-shadow:0 4px 6px rgba(0,0,0,.2); cursor:pointer; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .3s ease, visibility .3s; z-index:1000;
}
#scrollToTopBtn.show{ opacity:1; visibility:visible; }
#scrollToTopBtn:hover{ background:#000; color:#fff; }

.form-messages{ margin:.75rem 0; position:relative; }
.msg{ font-size:.95rem; padding:.6rem .8rem; border-radius:8px; }
.msg.success{ background:#e8f7ec; color:#0f5d2f; }
.msg.error{ background:#fde8e8; color:#8a1c1c; }
.msg.info{ background:#eef2ff; color:#273e74; }
.form-messages .msg{ position:relative; padding-right:2rem; opacity:1; transform:translateY(0); transition: opacity .35s ease, transform .35s ease; }
.form-messages .msg.is-fading{ opacity:0; transform:translateY(-4px); }
.form-messages .msg .msg-close{
  position:absolute; top:.35rem; right:.5rem; border:0; background:transparent; font-size:1.1rem; line-height:1; cursor:pointer; color:inherit;
}
.form-messages .msg .msg-close:focus{ outline:2px solid currentColor; outline-offset:2px; }

/* ----------------------- */
/*  Ajustes móviles global */
/* ----------------------- */
@media (max-width: 991.98px){
  /* HERO centrado */
  .hero-section{ padding: 2rem 1rem; }
  .hero-grid{
    grid-template-columns: 1fr !important; grid-template-rows: auto auto auto;
    gap: 1rem; max-width: 1100px; margin: 0 auto;
  }
  .hero-content{ grid-column:1; grid-row:1; text-align:center; padding: 0 12px; }
  .hero-content h1{
    width:auto !important; max-width:22ch; margin:0 auto .75rem;
    font-size: clamp(1.9rem, 6.4vw, 2.6rem); line-height:1.15;
  }
  .hero-content h2{
    width:auto; margin:0 auto .5rem; font-size: clamp(1.1rem, 4.6vw, 1.4rem);
  }
  .hero-content p{
    width:auto !important; max-width:65ch; margin:0 auto 1.25rem; text-align:left; padding:0 4px; line-height:1.65;
  }
  .btn-hero{ display:inline-block; margin-left:auto; margin-right:auto; }

  /* Imágenes del hero en pila */
  .hero-small-image, .hero-large-image{ grid-column:1; grid-row:auto; }
  .hero-large-image{ height:auto; }
  .hero-large-image img, .hero-small-image img{
    width:100%; height:auto; object-fit:cover; border-radius:6px; margin-top:0 !important;
  }
}

/* Títulos globales seguros en móvil */
@media (max-width:600px){
  h1{ font-size: clamp(1.7rem, 6.4vw, 2.3rem); text-align:center; }
  h2{ font-size: clamp(1.2rem, 5.2vw, 1.7rem); text-align:center; }
}

/* “Sobre nosotros” centrado + márgenes laterales */
@media (max-width: 991.98px){
  .about-section .container{ padding: 0 16px; }
  .about-header, .about-header h2{ text-align:center !important; margin-left:auto !important; margin-right:auto !important; }
  .menu-section .menu-title{ text-align:center !important; }
}

/* Slider caption responsive */
@media (max-width: 991.98px){
  .slider-static-caption h1{ font-size: clamp(1.9rem, 6.4vw, 2.6rem); line-height:1.15; margin-bottom:.35rem; }
  .slider-static-caption h2{ font-size: clamp(1.1rem, 4.2vw, 1.5rem); margin:.1rem 0 .25rem; }
  .slider-static-caption p{ font-size: clamp(.95rem, 3.6vw, 1.1rem); line-height:1.55; margin:.35rem 0 .7rem; }
}

/* === Refuerzos finales (capas/alineación escritorio) === */
.topbar{ z-index: 300; }
header.header-container{ z-index: 290; }
.dropdown .dropdown-content{ z-index: 301; pointer-events:auto; }

/* ========================= */
/*  MENÚ MÓVIL – ajustes UI  */
/* ========================= */

/* X grande tipo social “X” */
.mnav-close{
  appearance:none; border:0; background:transparent; color:#fff;
  font-size: 36px; line-height:1; width:48px; height:48px; cursor:pointer; font-weight:700;
}

/* Ocultar título del panel si existiese */
.mnav-title{ display:none !important; }

/* Aspecto de items */
.mnav-list > li > a,
.mnav-drop{
  font-weight: 700;
  letter-spacing: .12em;
  font-size: 0.95rem;
  color: #cfd3d7;
  text-transform: uppercase;
}
.mnav-list > li > a:hover,
.mnav-drop:hover,
.mnav-list .has-children.is-open > .mnav-drop{ color:#fff; }

/* Bloque inferior (botón + datos) */
.mnav-extra{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #cfd3d7;
  text-align: center; /* centrado por defecto */
}

/* Botón RESERVAR – centrado y naranja marca */
.mnav-btn{
  display:block;
  width: 60% !important;            /* ~mitad y un poco más, centrado */
  margin: 12px auto 18px !important;
  padding: 10px 14px;
  text-align:center;
  background:#dd5903 !important;    /* color marca */
  color:#fff !important;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.14em;
  font-size:.85rem;
  border-radius: 0;
  transition: filter .25s ease, background-color .3s ease;
}
.mnav-btn:hover{ background:#e07b00 !important; filter: none; }

/* Datos de contacto centrados */
.mnav-contact{ font-style: normal; }
.mnav-contact p{
  margin: 6px 0;
  line-height: 1.55;
  text-align: center !important;
}
.mnav-contact a{ color:#cfd3d7; text-decoration:none; }
.mnav-contact a:hover{ color:#fff; text-decoration:underline; }

/* Redes centradas */
.mnav-social{
  margin-top: 10px;
  display:flex; justify-content:center; gap:16px; align-items:center;
}
.mnav-social a{ color:#cfd3d7; font-size:1.05rem; }
.mnav-social a:hover{ color:#fff; }

/* Padding interior del panel (móvil) */
@media (max-width: 992px){
  .mnav-inner{ padding: 8px 24px 24px !important; }
  .mnav-list > li > a,
  .mnav-drop{ padding: 12px 16px 12px 8px; }
}

/* ===== Ajustes finos menú móvil (X + espaciados) ===== */

/* X de cerrar más grande (tipo logo X) */
.mnav-header{ min-height: 64px; }
.mnav-close{
  font-size: 56px;          /* antes 36px */
  width: 56px;
  height: 56px;
}

/* Más espacio debajo del botón de reservar */
.mnav-btn{
  margin: 12px auto 28px !important;  /* antes 18px abajo */
}

/* Contacto: más aire y jerarquía */
.mnav-contact p{
  margin: 10px 0;           /* antes 6px */
  line-height: 1.65;
  text-align: center !important;
}
/* Teléfono con un pelín más de presencia */
.mnav-contact p:nth-of-type(2){
  font-size: 1.30rem;       /* antes ~1.25rem */
  letter-spacing: .02em;
  margin: 14px 0 12px;
}

/* Redes: centradas y con más respiro */
.mnav-social{
  justify-content: center;
  gap: 18px;                /* antes 16px */
  margin-top: 14px;         /* antes 10px */
  margin-bottom: 6px;
}
/* — X compacta y fina (reemplaza bloques anteriores) — */
.mnav-header .mnav-close{
  position: relative !important;
  width: 26px !important;      /* antes 30px */
  height: 26px !important;     /* antes 30px */
  color: transparent !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
}

/* Dos trazos finos para la X */
.mnav-header .mnav-close::before,
.mnav-header .mnav-close::after{
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 20px;                  /* antes 28px */
  height: 1.6px;                /* más fina */
  background: #fff;
  border-radius: 2px;
  transform-origin: center;
  opacity: .95;
}
.mnav-header .mnav-close::before{ transform: translate(-50%,-50%) rotate(45deg); }
.mnav-header .mnav-close::after { transform: translate(-50%,-50%) rotate(-45deg); }

.mnav-header .mnav-close:hover::before,
.mnav-header .mnav-close:hover::after{ opacity: 1; }



/* ===== Topbar fija y compacta en móvil (≤ 992px) ===== */
@media (max-width: 992px){
  .topbar{
    position: fixed;
    top: 0; left: 0; right: 0;
    padding: 6px 0;                 /* más compacta */
    font-size: .9rem;
    background: rgba(0,0,0,.55);     /* un pelín más visible que antes */
    backdrop-filter: blur(6px);
    z-index: 500;                    /* por encima del header */
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
  }
  .topbar .container{
    padding: 0 12px;
    gap: 8px;
  }

  /* Oculta dirección (columna izquierda) */
  .topbar .left{ display: none; }

  /* En la derecha, deja solo el teléfono (oculta el email) */
  .topbar .right{
    gap: 10px;
    align-items: center;
  }
  .topbar .right span:last-child{
    display: none;                   /* oculta el correo */
  }

  /* Iconos de redes: solo si añades el bloque en el HTML (abajo) */
  .topbar .social-topbar{
    display: inline-flex;
    gap: 10px;
    align-items: center;
    margin-left: 6px;
  }
  .topbar .social-topbar a{
    color: #fff;
    font-size: 1.1rem;
    opacity: .9;
    text-decoration: none;
  }
  .topbar .social-topbar a:hover{ opacity: 1; }

  /* Desplaza el header para que la hamburguesa no quede oculta */
  header.header-container{
    top: 46px;                       /* altura de la topbar móvil */
  }
}


/* ===== Topbar móvil: ocultar dirección y centrar teléfono + redes ===== */
@media (max-width: 992px){
  /* Oculta la columna izquierda (dirección) */
  .topbar .left{ 
    display: none !important; 
  }

  /* Centra el contenido visible */
  .topbar .container{
    justify-content: center !important;
  }

  /* En la derecha: solo teléfono + redes, centrados */
  .topbar .right{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
  }

  /* Oculta el email */
  .topbar .right span:last-child{
    display: none !important;
  }

  /* Redes dentro de .right (si las añadiste) */
  .topbar .social-topbar{
    display: inline-flex;
    gap: 12px;
    align-items: center;
    margin-left: 6px;
  }
  .topbar .social-topbar a{
    color: #fff;
    font-size: 1.1rem;
    opacity: .9;
    text-decoration: none;
  }
  .topbar .social-topbar a:hover{
    opacity: 1;
  }
}

/* ===== Topbar móvil: teléfono izquierda, redes derecha ===== */
@media (max-width: 992px){
  /* Oculta la dirección (columna izquierda) */
  .topbar .left{
    display: none !important;
  }

  /* Contenedor a ancho completo */
  .topbar .container{
    padding: 0 1rem;
  }

  /* Dentro de .right: distribuimos en extremos */
  .topbar .right{
    display: flex !important;
    align-items: center;
    justify-content: space-between; /* tel. izq — redes dcha */
    gap: 12px;
    width: 100%;
  }

  /* Oculta el email (2º span original) */
  .topbar .right span:nth-child(2){
    display: none !important;
  }

  /* Teléfono con un poco más de presencia */
  .topbar .right span:first-child{
    font-weight: 600;
    white-space: nowrap;
  }

  /* Redes (si las has añadido como .social-topbar) a la derecha */
  .topbar .social-topbar{
    display: inline-flex;
    gap: 12px;
    align-items: center;
    margin-left: auto;              /* empuja a la derecha */
  }
  .topbar .social-topbar a{
    color: #fff;
    font-size: 1.1rem;
    opacity: .9;
    text-decoration: none;
  }
  .topbar .social-topbar a:hover{ opacity: 1; }
}


/* ===== Topbar: móvil -> teléfono izquierda, redes derecha ===== */
@media (max-width: 992px){
  /* Oculta la columna izquierda si existiera */
  .topbar .left{ display:none !important; }

  .topbar .container{
    padding: 0 1rem;
  }

  .topbar .right{
    display:flex !important;
    align-items:center;
    justify-content:space-between; /* tel izq — redes dcha */
    gap: 12px;
    width:100%;
  }

  /* Teléfono (primer span) con buen peso y sin cortes raros */
  .topbar .right > span{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    font-weight: 700;
    white-space: nowrap;
    color:#fff;
  }
  .topbar .right > span i{ margin-right: 0; }

  /* Redes a la derecha */
  .topbar .social-topbar{
    display:inline-flex;
    align-items:center;
    gap: 14px;
    margin-left: auto;       /* empuja a la derecha */
  }
  .topbar .social-topbar a{
    color:#fff;
    font-size: 1.05rem;
    opacity:.9;
    text-decoration:none;
    line-height:1;
  }
  .topbar .social-topbar a:hover{
    opacity:1;
    color:#dd5903;           /* acento al pasar */
  }
}

/* Topbar (móvil): tipografía del teléfono más estrecha */
@media (max-width: 992px){
  .topbar .right > span{
    font-weight: 500;       /* menos grueso que 600 */
    font-size: .90rem;      /* un pelín más pequeño */
    letter-spacing: -.02em; /* comprime visualmente */
    font-stretch: 95%;      /* hint (si el font lo soporta) */
  }

  /* Mantén el icono legible */
  .topbar .right > span i{
    font-size: 1.05rem;
  }
}

/* Teléfono "más estrecho" solo en móvil */
@media (max-width: 992px){
  /* Fallback: asume que el teléfono es el primer <span> dentro de .right */
  .topbar .container .right > span:first-child{
    font-weight: 400 !important;      /* más fino */
    font-size: .85rem !important;      /* un poco más pequeño */
    letter-spacing: -.03em !important; /* aspecto más compacto */
    line-height: 1.1 !important;
  }

  /* Preciso: apunta al <span> que contiene el icono de teléfono */
  @supports selector(:has(*)){
    .topbar .container .right > span:has(> i.fa-phone){
      font-weight: 400 !important;
      font-size: .85rem !important;
      letter-spacing: -.03em !important;
    }
  }

  /* Mantén el icono legible */
  .topbar .container .right > span i.fa-phone{
    font-size: 1.05rem !important;
    margin-right: .4rem;
  }
}



/* ====== LOGO centrado + un poco más grande (fix con máxima prioridad) ====== */
@media (max-width: 992px){
  header.header-container .header-inner{
    position: relative;
    display: grid !important;                     /* pisa el flex anterior */
    grid-template-columns: 1fr auto 1fr;         /* [espacio] [LOGO] [hamb] */
    align-items: center;
    gap: 12px;
  }

  header.header-container .logo{
    grid-column: 2;                               /* centro */
    justify-self: center;
    height: auto !important;                      /* anula 6vh */
  }
  header.header-container .logo img{
    display: block;
    width: auto !important;
    max-height: 78px !important;                  /* “un poco” más grande */
  }

  /* Hamburguesa a la derecha */
  header.header-container .mnav-toggle{
    grid-column: 3;
    justify-self: end;
    min-width: 44px; 
    min-height: 44px;
  }

  /* Oculta nav de escritorio en móvil por si algún override lo muestra */
  header.header-container nav{
    display: none !important;
  }
}

/* ===== Menú móvil: slide suave desde la derecha ===== */
:root{
  --mnav-duration: 340ms;
  --mnav-easing: cubic-bezier(.22,.61,.36,1); /* suave y natural */
}

.mnav-panel{
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  transform: translate3d(100%,0,0);
  transition: transform var(--mnav-duration) var(--mnav-easing);
  will-change: transform;
}
.mnav-panel.is-active{
  transform: translate3d(0,0,0);
}

.mnav-mask{
  opacity: 0; visibility: hidden;
  transition:
    opacity var(--mnav-duration) var(--mnav-easing),
    visibility 0s linear var(--mnav-duration);
}
.mnav-mask.is-active{
  opacity: 1; visibility: visible;
  transition-delay: 0s, 0s;
}

@media (prefers-reduced-motion: reduce){
  .mnav-panel, .mnav-mask{ transition: none !important; }
}

/* ==== Forzar menú móvil desde la DERECHA (override duro) ==== */
@media (max-width: 992px){
  /* Anula cualquier left previo */
  .mnav-panel{
    left: auto !important;
    right: 0 !important;

    /* para entornos RTL/LTR que usen propiedades lógicas */
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;

    /* posición de partida (fuera de la pantalla a la derecha) */
    transform: translate3d(100%,0,0) !important;
  }
  .mnav-panel.is-active{
    transform: translate3d(0,0,0) !important;
  }
}

/* Por si queda algún panel antiguo de otros estilos, lo desactivamos */
.pt-mobile-panel{ display: none !important; }


/* ======= Mobile header: logo izq + burger dcha; topbar arrastra ======= */
@media (max-width: 992px){
  :root{ --tb-h: 36px; } /* alto del topbar en móvil */

  /* Topbar fijo arriba en móvil */
  .topbar{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--tb-h);
    display: flex;
    align-items: center;
    padding: 0;               /* ya tiene padding interno .container */
    z-index: 400;             /* por encima del header */
    transition: transform .25s ease;
  }

  /* Header fijo, empujado por el topbar (lo "arrastra") */
  header.header-container{
    position: fixed;
    top: var(--tb-h);         /* debajo del topbar */
    left: 0; right: 0;
    background: transparent;
    padding: 10px 14px;
    z-index: 390;             /* debajo del topbar, por encima del slider */
    transition: top .25s ease, background .25s ease, padding .2s ease, box-shadow .25s ease;
  }

  /* Estructura: logo a la izquierda, burger a la derecha */
  header.header-container .header-inner{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  /* Logo más pequeño y perfectamente alineado */
  header.header-container .logo{
    height: auto !important;
    display: flex; align-items: center;
  }
  header.header-container .logo img{
    display: block;
    width: auto !important;
    max-height: 52px !important;   /* tamaño base en móvil */
  }

  /* Hamburguesa a la derecha */
  header.header-container .mnav-toggle{
    margin-left: auto;
    min-width: 44px; min-height: 44px;
  }

  /* Ocultar nav de escritorio en móvil (por si algo lo re-muestra) */
  header.header-container nav{ display: none !important; }

  /* Cuando se hace scroll: topbar se recoge, header sube y se solidifica */
  body.is-scrolled .topbar{
    transform: translateY(-100%);
  }
  body.is-scrolled header.header-container{
    top: 0;                                 /* sube al top */
    background: rgba(17,17,17,.92);
    backdrop-filter: blur(6px);
    padding: 8px 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
  }
  body.is-scrolled header.header-container .logo img{
    max-height: 42px !important;           /* encoge suave al hacer scroll */
  }
}

/* ====== Topbar móvil: mostrar solo teléfono (izq) + iconos (dcha) ====== */
@media (max-width: 992px){
  .topbar .container{
    max-width: 100%;
    padding: 0 12px;
    display: grid;
    grid-template-columns: 1fr auto;  /* teléfono | iconos */
    align-items: center;
    gap: 10px;
    height: var(--tb-h);
  }

  .topbar .left{ display: none !important; }      /* ocultar dirección */
  .topbar .right{
    display: contents;                              /* hijos ocupan rejilla */
  }

  /* Teléfono a la izquierda */
  .topbar .right > span{
    grid-column: 1 / 2;
    justify-self: start;
    font-weight: 600;
    letter-spacing: .02em;
    font-stretch: condensed;  /* afinado si el navegador lo soporta */
    font-size: .92rem;
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .topbar .right > span i{ opacity: .9; }

  /* Iconos a la derecha */
  .topbar .social-topbar{
    grid-column: 2 / 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
  }
  .topbar .social-topbar a{ color: #fff; opacity: .95; }
  .topbar .social-topbar a:hover{ opacity: 1; }
}

@media (max-width: 992px){
  header.header-container .header-inner{
    display:flex !important;
    align-items:center;
    justify-content: space-between;
    flex-direction: row-reverse; /* invierte visualmente: btn ←→ logo */
  }
  header.header-container .logo{ margin-left: 12px; }   /* un poco de aire */
  header.header-container .mnav-toggle{
    margin-right: 0; margin-left: 0;
  }
}

/* ===========================
   FOOTER — Fix responsive ≥1280
   =========================== */
@media (max-width: 1280px){
  /* Estructura en una o dos columnas sin desbordes */
  .footer-top{
    display: grid !important;
    grid-template-columns: 1fr 1fr;   /* dos columnas cómodas hasta ~992px */
    gap: 28px;
    padding: 2.25rem 1.25rem 2rem;
  }
  .footer-col{
    min-width: 0 !important;          /* anula los 440px que forzaban overflow */
    width: 100%;
  }

  /* Texto y bloques sin límites innecesarios */
  .footer-about p,
  .footer-contact p,
  .footer-hours ul{ max-width: none; }

  /* Horarios: evitar cortes feos si hay saltos de línea */
  .footer-hours li{
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
  }

  /* Newsletter */
  .footer-newsletter .newsletter-form{ gap: .5rem; }
  .footer-newsletter input[type="email"]{ width: 100%; }
  .footer-newsletter button{
    align-self: flex-start;
    padding: .5rem .75rem;
  }
  .footer-newsletter .privacy{
    align-items: flex-start;
    gap: .5rem;
  }

  /* Redes del bloque “About” */
  .social-links{
    margin-top: .75rem;
    display: flex;
    gap: 14px;
  }
  .social-links a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    font-size: 1.05rem;
    margin-right: 0;
    border-radius: 50%;
  }

  /* Bottom más compacto y centrado en pantallas medianas */
  .footer-divider{ display: none; }
  .footer-bottom{
    padding: 1.75rem 1.25rem 2.5rem;
    flex-direction: column;
    gap: .75rem;
    text-align: center;
  }
  .footer-links{
    justify-content: center;
    flex-wrap: wrap;
    gap: .9rem 1.25rem;
    margin: 0;
  }
}

/* Paso a 1 columna en móviles/tablets */
@media (max-width: 992px){
  .footer-top{
    grid-template-columns: 1fr;        /* una sola columna */
    gap: 24px;
  }
}

/* Afinado extra en pantallas pequeñas */
@media (max-width: 600px){
  .footer-about h2{ font-size: 1.6rem; }
  .footer-newsletter button{ font-size: 1rem; }
}

/* =========================
   TOPBAR — móvil ≤ 992 px
   Teléfono a la IZQUIERDA,
   iconos a la DERECHA
   ========================= */
@media (max-width: 992px){
  /* si existe .left con la dirección, ocúltala en móvil */
  .topbar .left{ display:none !important; }

  /* hacemos que .right ocupe todo el ancho y sea flex */
  .topbar .right{
    display:flex;
    align-items:center;
    gap: 10px;
    width:100%;
  }

  /* el span del teléfono queda a la izquierda */
  .topbar .right > span{
    font-size: .9rem;
    font-weight: 500;           /* más finito */
    letter-spacing: .02em;
    white-space: nowrap;
  }

  /* empujamos las redes a la derecha */
  .topbar .right > .social-topbar{
    margin-left:auto;           /* magia: se va al extremo derecho */
    display:flex;
    align-items:center;
    gap: 12px;
  }

  .social-topbar a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width: 28px; height: 28px;
    color:#fff;
    text-decoration:none;
  }
  .social-topbar a:hover{ opacity:.9; }
}

/* =========================
   TOPBAR — móvil ≤ 992 px
   Teléfono IZQ, redes DER
   (sin afectar escritorio)
   ========================= */
@media (max-width: 992px){
  /* Oculta dirección si existe */
  .topbar .left{ display:none !important; }

  /* Contenedor */
  .topbar .container{
    display:flex !important;
    align-items:center;
    justify-content:flex-start !important;
    gap: 0;
    padding: 6px 12px;
  }

  /* Línea derecha ocupa todo el ancho */
  .topbar .right{
    display:flex !important;
    align-items:center;
    flex: 1 1 auto !important;
    gap: 12px;
    flex-wrap: nowrap !important;   /* evita que salte de línea */
    min-width: 0;                   /* permite elipsis si hace falta */
  }

  /* Teléfono a la izquierda (crece) */
  .topbar .right > span:first-child{
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;               /* un pelín más contenido */
    font-weight: 500;
    letter-spacing: .02em;
  }

  /* Redes pegadas a la derecha */
  .topbar .right > .social-topbar{
    flex: 0 0 auto;
    margin-left: auto !important;   /* empuja a la derecha */
    display: flex !important;
    align-items: center;
    gap: 12px;
  }
  .topbar .right > .social-topbar a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width: 26px; height: 26px;
    color:#fff; text-decoration:none;
  }
  .topbar .right > .social-topbar a:hover{ opacity:.9; }
}

/* =========================================
   TOPBAR móvil: teléfono IZQ + redes DER
   (funciona aunque ambos estén en .right)
   ========================================= */
@media (max-width: 992px){
  /* Oculta la columna .left (dirección) */
  .topbar .left{
    display: none !important;
  }

  /* El contenedor no reparte espacios, deja que .right llene */
  .topbar .container{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 6px 12px;
    gap: 0;
  }

  /* .right ocupa todo el ancho y se convierte en grid 1fr | auto */
  .topbar .right{
    display: grid !important;
    grid-template-columns: 1fr auto;    /* [teléfono] | [redes] */
    align-items: center;
    column-gap: 12px;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0;                        /* permite elipsis si hace falta */
  }

  /* Teléfono: izquierda, con tipografía algo más estrecha */
  .topbar .right > span:first-child{
    justify-self: start;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
  }

  /* Redes: derecha, en fila */
  .topbar .right > .social-topbar{
    justify-self: end;
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    margin-left: 0 !important;           /* anulamos cualquier auto anterior */
  }
  .topbar .right > .social-topbar a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width: 26px; height: 26px;
    color:#fff; text-decoration:none;
  }
  .topbar .right > .social-topbar a:hover{
    opacity:.9;
  }
}

/* =========================================================
   TOPBAR móvil: Teléfono a la IZQ + Redes a la DER (100% fiable)
   ========================================================= */
@media (max-width: 992px){
  /* Oculta la dirección */
  .topbar .left{
    display: none !important;
  }

  /* El contenedor se mantiene en flex, sin repartir a los lados */
  .topbar .container{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 6px 12px !important;
  }

  /* .right ocupa todo el ancho y reparte internamente */
  .topbar .right{
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Teléfono: queda a la izquierda de forma natural */
  .topbar .right > span:first-of-type{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .95rem !important;
    font-weight: 500 !important;   /* un poco más “estrecha” */
    letter-spacing: .01em;
  }

  /* Redes: empuja a la derecha con margin-left:auto */
  .topbar .right > .social-topbar{
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .topbar .right > .social-topbar a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    color: #fff; text-decoration: none;
  }
  .topbar .right > .social-topbar a:hover{ opacity: .9; }
}

/* Fallback ultra-defensivo por si algo raro pisa lo de arriba */
@media (max-width: 992px){
  .topbar .right > .social-topbar{ float: right !important; }
}

/* Teléfono IZQ + Redes DER en móvil; oculta dirección y email */
@media (max-width: 992px){
  /* Oculta la columna izquierda (dirección) */
  .topbar .left{
    display: none !important;
  }

  /* Fila del topbar */
  .topbar .container{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 6px 12px !important;
  }

  /* Grupo derecho ocupa todo el ancho */
  .topbar .right{
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Teléfono pegado a la izquierda */
  .topbar .right > span:first-of-type{
    margin-right: auto !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .95rem !important;
    font-weight: 500 !important;
    letter-spacing: .01em;
  }

  /* Redes pegadas a la derecha */
  .topbar .right > .social-topbar{
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .topbar .right > .social-topbar a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    color: #fff; text-decoration: none;
  }
  .topbar .right > .social-topbar a:hover{ opacity: .9; }

  /* Oculta el email (es el último <span> dentro de .right) */
  .topbar .right > span:last-of-type{
    display: none !important;
  }
}

/* === TOPBAR móvil FIX FINAL — Teléfono IZQ, redes DER (≤992px) === */
@media (max-width: 992px){
  /* Oculta dirección */
  .topbar .left{ display:none !important; }

  /* Fila del topbar */
  .topbar .container{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:0 !important;
    padding:6px 12px !important;
    max-width:100% !important;
  }

  /* Anula cualquier grid/contents previo en .right */
  .topbar .right{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    min-width:0 !important;
  }

  /* Teléfono a la IZQ */
  .topbar .right > span:first-of-type{
    flex:0 1 auto !important;
    min-width:0 !important;
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    font: 500 .9rem/1 var(--font-ui);
    letter-spacing:.01em;
    margin-right:auto !important;   /* empuja redes a la derecha */
  }

  /* Redes a la DER */
  .topbar .right > .social-topbar{
    display:inline-flex !important;
    align-items:center !important;
    gap:12px !important;
    margin-left:auto !important;
  }
  .topbar .right > .social-topbar a{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; color:#fff; text-decoration:none;
  }

  /* Oculta el email (último span) */
  .topbar .right > span:last-of-type{ display:none !important; }
}

/* Ocultar iconos de redes del topbar en >1280px */
@media (min-width: 1281px){
  .topbar .social-topbar{
    display: none !important;
  }
}


/* ===== MENÚ DESTACADO: una sola columna centrada ===== */
.menu-section.menu-onecol .menu-grid{
  grid-template-columns: 1fr;             /* 1 columna */
  max-width: 720px;                       /* ancho cómodo de lectura */
  margin: 0 auto;                         /* centra el bloque */
  gap: 2rem;
}
.menu-section.menu-onecol .menu-col{
  text-align: left;
}
.menu-section.menu-onecol .menu-subtitle,
.menu-section.menu-onecol .menu-title{
  display:block;
  text-align:center;                      /* títulos centrados */
}
.menu-section.menu-onecol .menu-list{ margin-top: .5rem; }

/* Línea de puntos estable en 1 columna */
.menu-section.menu-onecol .menu-item{
  display:flex;
  align-items: baseline;
}
.menu-section.menu-onecol .menu-item .item-name{ font-weight: 600; }
.menu-section.menu-onecol .menu-item .dots{
  flex: 1 1 auto;
  margin: 0 1rem;
  border-bottom: 1px solid #ddd;
  min-width: 24px;
}
.menu-section.menu-onecol .menu-item .item-price{ white-space: nowrap; }
.menu-section.menu-onecol .menu-item .item-desc{
  margin: .25rem 0 1rem 0;
  color:#555;
}

/* Botonera centrada */
.menu-section.menu-onecol .menu-buttons{
  text-align: center;
  margin-top: 2rem;
}
.menu-section.menu-onecol .btn-outlined{ margin: 0 .5rem; }

/* Ajuste fino en móviles muy pequeños */
@media (max-width: 420px){
  .menu-section.menu-onecol .menu-grid{ max-width: 92vw; }
  .menu-section.menu-onecol .menu-item .dots{ margin: 0 .6rem; }
}

/* ===== MENÚ 1 columna: descripción en su propia fila ===== */
.menu-section.menu-onecol .menu-item{
  display: grid;
  grid-template-columns: auto 1fr auto; /* nombre | puntos | precio */
  grid-auto-rows: auto;
  column-gap: 1rem;
  align-items: baseline;
}

.menu-section.menu-onecol .menu-item .item-name{ grid-column: 1; }
.menu-section.menu-onecol .menu-item .dots{
  grid-column: 2;
  border-bottom: 1px solid #ddd;
  min-width: 24px;
  align-self: center;
}
.menu-section.menu-onecol .menu-item .item-price{
  grid-column: 3;
  white-space: nowrap;
}

/* La descripción ocupa toda la fila de abajo */
.menu-section.menu-onecol .menu-item .item-desc{
  grid-column: 1 / -1;         /* span 3 columnas */
  margin: .35rem 0 1.15rem;
  font-size: .95rem;
  color: #555;
}

/* Fallback por si alguna descripción quedó fuera del <li> */
.menu-section.menu-onecol .menu-list > p.item-desc{
  margin: .35rem 0 1.15rem;
  font-size: .95rem;
  color: #555;
}

/* ===== Botones apilados SOLO en responsive ===== */
@media (max-width: 768px){
  .menu-section.menu-onecol .menu-buttons,
  .menu-section .menu-buttons{
    display: flex;
    flex-direction: column;      /* uno encima de otro */
    align-items: center;         /* centrados */
    gap: 14px;                   /* separación vertical */
    margin-top: 2rem;
  }

  .menu-section.menu-onecol .menu-buttons .btn-outlined,
  .menu-section .menu-buttons .btn-outlined{
    display: block;
    width: 100%;
    max-width: 180px;            /* ancho cómodo en móvil */
    margin: 0 !important;        /* que mande el gap */
    text-align: center;
  }
}

/* === ABOUT (responsive fix) =============================== */
/* Subtítulo centrado y visible en móvil; sin líneas laterales */
@media (max-width: 768px){
  .about-section .about-header .subtitle{
    display: block !important;          /* en lugar de inline-flex */
    white-space: normal !important;      /* permite salto de línea */
    text-align: center !important;
    margin: 0 auto .8rem !important;
    max-width: 28ch;                     /* ancho cómodo para lectura */
    line-height: 1.35;
    font-size: .95rem;
  }
  .about-section .about-header .subtitle::before,
  .about-section .about-header .subtitle::after{
    content: none !important;           /* oculta las líneas decorativas */
  }

  /* Un poco de respiro vertical en móvil */
  .about-section{ padding: 2rem 1rem; }
  .about-section .container{ margin: 48px auto 64px auto; }
}

/* Tablet: deja las líneas, pero más cortas para que no desplacen el texto */
@media (min-width: 769px) and (max-width: 1024px){
  .about-section .about-header .subtitle{
    white-space: normal;                 /* por si queda el nowrap heredado */
  }
  .about-section .about-header .subtitle::before,
  .about-section .about-header .subtitle::after{
    width: 70px;                         /* más comedido que los 120px */
    opacity: .9;
  }
}

/* ===== Hero de la carta ===== */
section.hero-carta{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;              /* alto responsivo */
  max-height: 520px;
  min-height: 260px;
}
@supports not (aspect-ratio: 16 / 9){
  section.hero-carta{ height: 48vw; }
}
section.hero-carta > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
section.hero-carta .hero-overlay{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.35));
}

/* Título base (desktop) */
section.hero-carta .hero-overlay .hero-title{
  margin: 0;
  color: #fff;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(1.8rem, 3.5vw, 3rem) !important;
  text-align: center;
}

/* Solo responsive: más pequeño en móviles */
@media (max-width: 991.98px){
  section.hero-carta .hero-overlay .hero-title{
    font-size: clamp(1.3rem, 5.2vw, 2.1rem) !important;
  }
}
@media (max-width: 480px){
  section.hero-carta .hero-overlay .hero-title{
    font-size: clamp(1.15rem, 6.2vw, 1.6rem) !important;
    letter-spacing: .05em;
  }
}

/* ===== MENÚ ONE-COL: centrado y SIN puntos ===== */
.menu-section.menu-onecol{
  background:#fff;
  padding: clamp(2rem, 5vw, 4rem) 1rem;
}
.menu-section.menu-onecol .menu-grid{
  max-width: 760px;            /* ancho cómodo y centrado */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;  /* una sola columna */
  gap: 2.25rem;
}
.menu-section.menu-onecol .menu-col{ text-align: center; }
.menu-section.menu-onecol .menu-subtitle{
  display:block;
  text-transform:uppercase;
  font-size:.85rem;
  letter-spacing:.1em;
  color:#dd5903;
  margin-bottom:.35rem;
}
.menu-section.menu-onecol .menu-title{
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin:0 0 0.75rem;
}

/* Lista y elementos */
.menu-section.menu-onecol .menu-list{ list-style:none; margin:0; padding:0; }
.menu-section.menu-onecol .menu-item{
  display:flex;
  flex-wrap: wrap;                 /* permite que la descripción baje */
  align-items: baseline;
  justify-content: space-between;  /* nombre izq, precio dcha */
  gap: .5rem 1rem;
  padding: .6rem 0;
  text-align:left;                 /* contenido legible */
}

/* OCULTA los puntos */
.menu-section.menu-onecol .menu-item .dots{ display:none !important; }

/* Nombre / precio / descripción */
.menu-section.menu-onecol .item-name{ font-weight:600; }
.menu-section.menu-onecol .item-price{ font-weight:600; white-space:nowrap; }
.menu-section.menu-onecol .item-desc{
  flex: 1 1 100%;                 /* ocupa toda la fila inferior */
  margin-top:.25rem;
  font-size:.95rem;
  color:#555;
}

/* Responsive fino */
@media (max-width: 520px){
  .menu-section.menu-onecol .menu-item{
    gap:.35rem .75rem;
  }
  .menu-section.menu-onecol .item-name{ font-size:1rem; }
  .menu-section.menu-onecol .item-price{ font-size:1rem; }
  .menu-section.menu-onecol .item-desc{ font-size:.92rem; }
}

/* Más margen lateral para el bloque one-col */
.menu-section.menu-onecol{
  /*   top/bottom                left/right  */
  padding: clamp(2rem, 5vw, 4rem) clamp(1.75rem, 6vw, 3rem);
}


/* Cabecera del panel móvil: logo ⟷ X */
.mnav-header{
  position: sticky;      /* siempre visible mientras haces scroll en el panel */
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;      /* si tu panel es oscuro, cambia a #0e0d0a y ajusta colores */
  border-bottom: 1px solid #eee;
  z-index: 2;
}

/* Logo dentro del panel */
.mnav-logo img{
  display: block;
  height: 28px;          /* ajusta a tu gusto (24–36px suele ir bien) */
  width: auto;
}

/* Botón de cierre (X) cómodo de pulsar */
.mnav-close{
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #111;           /* si fondo oscuro, usa #fff */
  font-size: 28px;       /* tamaño de la “×” */
  line-height: 1;
  cursor: pointer;
}

/* ====== Panel móvil: header afinado ====== */
.mnav-header{
  padding: 18px 20px 16px;            /* más aire (arriba un poco más) */
  gap: 16px;
  border-bottom: 1px solid rgba(0,0,0,.12); /* línea más clara en fondo claro */
}

/* Logo un poco más grande */
.mnav-logo img{
  height: 56px;                        /* antes ~28px */
  width: auto;
  margin-top: 18px; 
  margin-left: 15px;
}

/* Botón “X” con más tamaño y ligero margen superior */
.mnav-close{
  width: 96px;
  height: 96px;
  font-size: 196px;                     /* X más grande */
  margin-top: 18px; 
  margin-right: 15px;                    /* la baja un pelín */
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 1;
}

/* Estado hover/focus (accesible) */
.mnav-close:hover,
.mnav-close:focus-visible{
  outline: none;
  filter: brightness(0.9);
}

/* ====== Si tu panel es oscuro, usa esta línea más clara ====== */
.mnav-panel { background:#0e0d0a; color:#fff; }
.mnav-panel .mnav-header{
  background:#0e0d0a;
  border-bottom: 1px solid rgba(255,255,255,.22); /* más visible en dark */
}
.mnav-panel .mnav-close{ color:#fff; }

/* Botonera hamburguesa SIN rayas (solo en responsive) */
@media (max-width: 991.98px){
  .mnav-list{
    list-style: none;
    margin: 0;
    padding: 12px 20px 28px;
    display: grid;
    gap: 0px;                 /* espacio entre items */
    border: 0;
  }
  .mnav-list li{
    margin: 0;
    padding: 0;
    border: 0 !important;      /* quita cualquier borde */
  }
  .mnav-list li + li{
    border-top: 0 !important;  /* por si había separadores arriba */
  }

  .mnav-list a{
    display: block;
    padding: 12px 10px;        /* buen área de toque */
    text-decoration: none;
    border: 0 !important;
    outline: none;
  }

  /* Apaga cualquier pseudo-línea que venga de before/after */
  .mnav-list a::before,
  .mnav-list a::after,
  .mnav-list li::before,
  .mnav-list li::after{
    content: none !important;
  }
}


/* ===== MENÚ MÓVIL: header ===== */
.mnav-panel{
  position: fixed;
  inset: 0 0 0 auto;              /* panel a la derecha */
  width: min(92vw, 420px);
  background: #fff;
  box-shadow: -10px 0 30px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
}
.mnav-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid #eee;  /* línea más clara */
}
.mnav-logo img{
  display: block;
  height: 44px;                   /* ↑ logo más grande */
  width: auto;
}
.mnav-close{
  background: transparent;
  border: 0;
  color: #222;
  line-height: 1;
  font-size: 46px;                /* X más grande */
  padding: 6px 6px 2px 6px;       /* un pelín de padding */
  cursor: pointer;
}

/* Contenido desplazable */
.mnav-inner{
  padding: 10px 14px 22px;
  overflow: auto;
  max-height: calc(100dvh - 74px);
}

/* ===== Listas ===== */
.mnav-list,
.mnav-sub{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Sin “rayas” entre elementos */
.mnav-list li + li,
.mnav-sub li + li{
  margin-top: 4px; /* solo espacio, sin bordes */
}

/* Enlaces y botones base (sin efectos de clic) */
.mnav-list a,
.mnav-drop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 12px 10px;
  border-radius: 8px;
  background: transparent;
  color: #222;
  text-decoration: none;
  border: 0;
  font: inherit;
  transition: none; /* sin animaciones de hover/click */
}

/* No cambiar al pasar/activar */
.mnav-list a:hover,
.mnav-list a:active{
  background: transparent;
  color: #222;
}

/* Submenú */
.mnav-drop{
  font-weight: 600;
  cursor: pointer;
}
.mnav-sub{
  padding-left: 10px;
  margin: 6px 0 4px;
}
.mnav-sub a{
  font-weight: 500;
  font-size: 0.98rem;
}

/* Activo en naranja (marca de la web) */
.mnav-list a.is-active,
.mnav-list a[aria-current="page"],
.mnav-list a[aria-current="true"]{
  color: var(--brand, #dd5903);
  font-weight: 700;
}

/* El padre (botón Menús/Carta) también en naranja si tiene un hijo activo */
.mnav-drop.is-active{
  color: var(--brand, #dd5903);
}
/* Ocultar submenús cuando hidden está presente */
.mnav-sub[hidden] { display: none !important; }

/* El atributo hidden siempre oculta el submenú */
.mnav-sub[hidden]{ display:none !important; }

/* Marca naranja cuando el drop está abierto y cuando el link es la página actual */
.mnav-drop.is-active { color:#dd5903; }
.mnav-sub a.is-active { color:#dd5903; }

/* Estado activo naranja */
.mnav-drop.is-active { color:#dd5903; }
.mnav-sub a.is-active { color:#dd5903; }

/* El atributo hidden manda */
.mnav-sub[hidden]{ display:none !important; }

/* Quitar efecto de clic/flash en móviles */
.mnav-list a,
.mnav-drop{
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease;
}
.mnav-list a:active,
.mnav-drop:active{
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Estado activo naranja */
.mnav-drop.is-active { color:#dd5903; }
.mnav-sub a.is-active { color:#dd5903; }

/* El atributo hidden manda */
.mnav-sub[hidden]{ display:none !important; }

/* Sin “flash” al pulsar en móvil */
.mnav-list a,
.mnav-drop{
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease;
}
.mnav-list a:active,
.mnav-drop:active{
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

.mnav-drop.is-active { color:#dd5903; }
.mnav-drop.is-open   { /* sin color */ }
.mnav-sub a.is-active,
.mnav-sub a[aria-current="page"] { color:#dd5903; }

/* ===== Menú móvil: botones más juntos (solo ≤ 992px) ===== */
@media (max-width: 992px){
  /* Lista principal */
  .mnav-list{
    padding: 8px 16px 14px;   /* menos aire lateral y vertical */
  }
  .mnav-list > li{ 
    margin: 2px 0;            /* menos separación entre items */
  }
  .mnav-list > li > a,
  .mnav-drop{
    display: block;
    padding: 8px 6px;         /* antes ~12-16: ahora más compacto */
    font-size: 0.98rem;
    line-height: 1.2;         /* mantiene hit-area ≈ 38–42px */
  }

  /* Submenús */
  .mnav-sub{
    margin: 4px 0 8px 12px;   /* menos sangría y separación */
  }
  .mnav-sub li + li{ 
    margin-top: 2px;
  }
  .mnav-sub a{
    padding: 7px 4px;
    font-size: .95rem;
    line-height: 1.2;
  }

  /* Por si quedaran líneas/separadores en algún tema */
  .mnav-list > li + li,
  .mnav-sub li + li{
    border-top: 0 !important;
  }
}

/* ===== Menú móvil: más margen arriba del bloque ===== */
@media (max-width: 992px){
  /* separa la lista del header del panel */
  .mnav-list{
    padding-top: 22px !important;   /* sube a 26–28px si quieres más aire */
  }
}

/* Fallback sin cambiar HTML: oculta 1er span (teléfono) y social */
/* Fallback sin cambiar HTML: oculta 1er span (teléfono) y social */
/* Ocultar teléfono e iconos en móvil/tablet */
@media (max-width: 992px){
  .topbar .right .phone,
  .topbar .right .social-topbar{
    display: none !important;
  }
}

/* Móvil: tipografía más pequeña en el bloque <address> del menú */
@media (max-width: 992px){
  .mnav-panel .mnav-extra .mnav-contact { 
    font-size: .88rem;     /* texto base más pequeño */
    line-height: 1.35;
    margin-top: 48px;
  }
  .mnav-panel .mnav-extra .mnav-contact p{
    margin: 16px 0;
    font-size: .88rem;     /* asegura tamaño homogéneo en <p> */
  }
  .mnav-panel .mnav-extra .mnav-contact a{
    font-size: .88rem;     /* enlaces (tel/email) a juego */
    color: inherit;
    text-decoration: none;
    word-break: break-word;
  }
  .mnav-panel .mnav-extra .mnav-contact a:hover{
    text-decoration: underline;
  }
  .mnav-panel .mnav-extra .mnav-contact i{
    font-size: 14px;       /* icono un poco más pequeño */
    margin-right: 8px;
    color: #dd5903;
    opacity: .9;
    width: 18px;
    text-align: center;
  }
}

.mnav-toggle{ display:flex !important; }
#scrollToTopBtn{position:fixed;right:16px;bottom:16px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:9999}
#scrollToTopBtn.show{opacity:1;pointer-events:auto}

/* Oculta por defecto (escritorio) */
.mnav-toggle{ display:none !important; }

/* Mostrar solo en pantallas ≤ 990px */
@media (max-width: 990px){
  .mnav-toggle{ display:flex !important; }
}