/* =============================
   Pizzeria Napolitana — Estilos
   ============================= */
:root{
  --rosso:#C62828; --rosso-hover:#8E1919;
  --verde:#2E7D32; --verde-hover:#1B5E20;
  --arancio:#FF7A00; --arancio-hover:#E66900;
  --bianco:#FFF8E7; --nero:#1B1B1B; --oro:#C8A45D;
  --text:#1B1B1B; --muted:#6B6B6B; --border:rgba(0,0,0,.08);
  --surface:#FFFFFF; --surface-2:#FFF4DF;
  --shadow:0 10px 24px rgba(0,0,0,.08);
  --radius:14px; --radius-2:10px; --dur:.2s;
  --container:1200px; --gutter:20px; --gutter-lg:48px;
  --pill-h:44px;
}

/* === Base optimizada para móviles === */
*,*::before,*::after{box-sizing:border-box}
html,body{
  height:100%;
  overflow-x:hidden; /* Previene scroll horizontal */
  -webkit-overflow-scrolling:touch; /* iOS smooth scrolling */
}
html{
  /* Corrige altura viewport en iOS */
  min-height:100vh;
  min-height:100dvh; /* Fallback para navegadores compatibles */
  min-height:-webkit-fill-available; /* iOS Safari */
}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bianco);
  color:var(--text);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  width:100%;
  max-width:100vw;
}
img{
  max-width:100%;
  height:auto;
  display:block;
}
a{color:inherit}
:focus-visible{outline:3px solid color-mix(in oklab, var(--rosso)65%, #000 0%);outline-offset:2px}

/* Skip link oculto salvo foco */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:16px;padding:8px 12px;background:var(--rosso);color:#fff;border-radius:10px;z-index:10000}

h1,h2,h3{font-family:"Playfair Display",serif;letter-spacing:.2px;margin:0 0 .5rem;color:#1f160a}
h1{font-size:clamp(2rem,4vw,3.2rem);line-height:1.1}
h2{font-size:clamp(1.6rem,3vw,2.4rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}

/* === Títulos más grandes en móvil === */
@media (max-width: 767px) {
  h1 {
    font-size: clamp(2.2rem, 8vw, 3.5rem); /* Títulos principales más grandes */
  }
  
  h2 {
    font-size: clamp(1.8rem, 6vw, 2.6rem); /* Subtítulos más grandes */
  }
  
  h3 {
    font-size: clamp(1.3rem, 4vw, 1.6rem); /* Títulos de sección más grandes */
  }
  
  .hero__grid h1 {
    font-size: clamp(2.4rem, 9vw, 3.8rem); /* Hero título extra grande */
  }
}

.muted{color:var(--muted)}
/* === Contenedores optimizados === */
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
  width:100%;
  box-sizing:border-box;
}
.section-px{
  padding-inline:var(--gutter);
  box-sizing:border-box;
}
.section-pt{padding-top:clamp(24px,6vw,72px)}
.section-pb{padding-bottom:clamp(24px,6vw,72px)}

/* === Header optimizado para móviles === */
.site-header{
  position:sticky;
  top:0;
  z-index:100; /* Mayor z-index para asegurar visibilidad */
  background:rgba(255,248,231,.95);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:64px;
  gap:12px;
}

/* Móvil: Elementos más grandes */
@media (max-width: 767px) {
  .nav-wrap {
    min-height: 72px; /* Header más alto */
    padding: 8px var(--gutter);
  }
  
  .brand__name {
    font-size: 1.35rem; /* Título más grande */
  }
  
  .nav-toggle {
    padding: 12px; /* Botón hamburguesa más grande */
    border-radius: 16px;
  }
  
  .nav-toggle__bar {
    width: 26px;
    height: 3px;
  }
}
.brand h1{font-size:1.2rem}
.brand small{font-weight:600;color:#7b6e59}
.nav-list{display:none;gap:18px;list-style:none;margin:0;padding:0}
.nav-list a{color:#3a3122;text-decoration:none;font-weight:600}
.nav-cta{display:none}
.nav-toggle{display:inline-flex;flex-direction:column;gap:5px;background:transparent;border:1px solid var(--border);padding:10px;border-radius:12px}
.nav-toggle__bar{width:26px;height:3px;background:#2f2519;display:block}
@media(min-width:1024px){.nav-list{display:flex}.nav-cta{display:block}.nav-toggle{display:none}}

/* === Menú móvil mejorado === */
.nav-mobile{
  border-top:1px solid var(--border);
  background:var(--surface);
  z-index:99;
}
.nav-mobile[hidden] {
  display: none !important;
}
.nav-mobile ul{
  list-style:none;
  margin:0;
  padding:24px 20px; /* Más padding */
  display:grid;
  gap:20px; /* Más espacio entre elementos */
}

/* Enlaces del menú móvil más grandes */
@media (max-width: 767px) {
  .nav-mobile a {
    display: block;
    padding: 16px 16px; /* Más padding */
    font-size: 1.2rem; /* Texto más grande */
    font-weight: 600;
    border-radius: 12px;
    background: rgba(198, 40, 40, 0.08);
    color: var(--text);
    text-decoration: none;
    transition: all 0.2s ease;
  }
  
  .nav-mobile a:hover,
  .nav-mobile a:focus {
    background: var(--rosso);
    color: #fff;
  }

  /* PEDIDO ONLINE destacado */
  .nav-mobile a.nav-mobile-cta {
    background: var(--rosso) !important;
    color: #fff !important;
    font-size: 1.4rem; /* Más grande */
    font-weight: 700;
    padding: 20px 16px; /* Más alto */
    margin-top: 8px;
    box-shadow: 0 4px 12px rgba(198, 40, 40, 0.3);
    border: 2px solid var(--rosso);
  }
  
  .nav-mobile a.nav-mobile-cta:hover,
  .nav-mobile a.nav-mobile-cta:focus {
    background: var(--rosso-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(198, 40, 40, 0.4);
  }
}

/* Botones */
/* === Botones optimizados para móviles === */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:var(--radius-2);
  border:1px solid var(--border);
  font-weight:700;
  transition:transform var(--dur) ease, background var(--dur) ease, border-color var(--dur) ease;
  min-height:44px;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  touch-action:manipulation; /* Optimiza para touch */
  -webkit-tap-highlight-color:transparent;
  box-sizing:border-box;
}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:14px 18px}
.btn-primary{background:var(--rosso);color:#fff;border-color:transparent}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--rosso-hover);color:#fff}
.btn-secondary{background:var(--arancio);color:#fff;border-color:transparent}
.btn-secondary:hover,.btn-secondary:focus-visible{background:var(--arancio-hover);color:#fff}
.btn-success{background:var(--verde);color:#fff;border-color:transparent}
.btn-success:hover,.btn-success:focus-visible{background:var(--verde-hover);color:#fff}
.btn-white{background:#fff;color:#2b2418;border:2px solid #ddd;border-color:#ddd}
.btn-white:hover,.btn-white:focus-visible{background:#f8f8f8;color:#2b2418;border-color:#ccc}
.btn-ghost{background:transparent;color:#2b2418}

/* === Optimizaciones móviles para botones === */
@media (max-width: 767px) {
  .btn {
    padding: 16px 20px; /* Botones más grandes */
    font-size: 1.1rem; /* Texto más grande */
    min-height: 52px; /* Altura mínima mayor */
    border-radius: 14px;
  }
  
  .btn-lg {
    padding: 18px 24px;
    font-size: 1.2rem;
    min-height: 56px;
  }
  
  /* Separación vertical entre botones en móvil */
  .hero__actions {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Pequeña separación vertical */
    align-items: flex-start; /* Alineación a la izquierda */
  }
  
  .hero__actions .btn {
    width: 100%; /* Botones de ancho completo en móvil */
    max-width: 280px;
  }
  
  /* Nivelar botones del hero - mismo tamaño */
  .hero__actions .btn,
  .hero__actions .glf-button {
    padding: 18px 24px !important;
    font-size: 1.2rem !important;
    min-height: 56px !important;
    width: 100% !important;
    max-width: 280px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 14px !important;
    font-weight: 600 !important;
  }
}

/* Grid / secciones */
.hero__media{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;background:var(--surface)}
.hero__media img{width:100%;height:100%;object-fit:cover}
.section-header{margin-bottom:12px}

/* === Grid optimizado para móviles (formato lista) === */
.grid{
  display:grid;
  gap:16px;
  grid-template-columns:1fr; /* UNA columna (formato lista) */
  align-items:stretch;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
@media(min-width:768px){.grid{grid-template-columns:1fr}} /* Mantener lista en tablet */
@media(min-width:1024px){.grid{grid-template-columns:1fr}} /* Mantener lista en desktop */
.grid>*{
  height:100%;
  max-width:100%;
  box-sizing:border-box;
  min-width:0; /* Previene overflow */
}

/* Cards */
/* === Cards optimizadas para móviles === */
.card{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  height:100%;
  max-width:100%;
  box-sizing:border-box;
  min-width:0; /* Previene overflow */
}
.card__media{
  position:relative;
  max-width:100%;
  overflow:hidden;
}
.ratio-4x3{
  aspect-ratio:4/3;
  width:100%;
}
.card__img{
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
  display:block;
}
.card__body{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}

/* Estilos mejorados para tarjetas sin imágenes (formato lista) */
.card:not(:has(.card__media)) {
  min-height: 100px;
  border: 2px solid var(--border);
  display: flex;
  flex-direction: row;
  align-items: center;
}
.card:not(:has(.card__media)) .card__body {
  padding: 20px;
  justify-content: space-between;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}
.card:not(:has(.card__media)) .card__title {
  font-size: 1.25rem;
  margin: 0;
  flex: 2;
  min-width: 0;
}
.card:not(:has(.card__media)) .card__desc {
  margin: 0;
  line-height: 1.4;
  flex: 3;
  min-width: 0;
}
.card:not(:has(.card__media)) .card__footer {
  margin: 0;
  flex: 1;
  text-align: right;
}

/* Responsive: en móvil mantener layout vertical */
@media(max-width: 767px) {
  .card:not(:has(.card__media)) .card__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .card:not(:has(.card__media)) .card__footer {
    text-align: left;
    width: 100%;
  }
}

.card__title{font-family:"Playfair Display",serif;font-size:1.15rem;margin:0 0 6px}
.card__desc{color:var(--muted);margin:0 0 8px}
.card__footer{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.card__meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.price{color:#8C5A21;font-weight:800}

/* Selector tamaño */
.size-picker{display:grid;grid-template-columns:1fr;gap:10px;min-height:calc(var(--pill-h)*2 + 10px)}
.size-picker .pill{position:relative;display:block}
.size-picker .pill input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;inset:auto}
.size-picker .pill .pill-inner{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:var(--pill-h);padding:0 12px;border:1px solid var(--border);border-radius:999px;background:#fff;font-weight:700;white-space:nowrap}
.size-picker .pill .opt::after{content:" – ";opacity:.8;margin:0 .15rem}
.size-picker .pill .price{font-weight:800}
.size-picker .pill input:checked + .pill-inner{background:var(--verde);color:#fff;border-color:transparent}
.field-error{color:var(--rosso);font-weight:700;font-size:.9rem}
@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}100%{transform:translateX(0)}}
.shake{animation:shake .35s ease}

/* Chip */
.chip{position:absolute;left:10px;top:10px;background:linear-gradient(180deg,var(--oro),#997a3e);color:#1B1B1B;font-weight:800;text-transform:uppercase;font-size:.75rem;padding:4px 8px;border-radius:999px;border:1px solid rgba(0,0,0,.05)}
.chip[data-variant="spicy"]{background:linear-gradient(180deg,#ff7a59,var(--rosso));color:#fff}

/* Filtros */
.filters{display:grid;gap:10px;margin-top:8px}
.input{height:44px;border-radius:12px;border:1px solid var(--border);padding:10px 12px;background:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .chip-btn{border:1px solid var(--border);padding:8px 10px;border-radius:999px;background:#fff;cursor:pointer}
.chips .chip-btn[aria-pressed="true"]{background:var(--verde);color:#fff;border-color:transparent}

/* Tabla carrito página */
.cart-table table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--border)}
.cart-table th,.cart-table td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
.cart-table th{background:var(--surface-2)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.qty button{height:32px;width:32px;border:0;background:transparent}
.qty input{height:32px;width:40px;text-align:center;border:0}
.cart-actions{display:flex;gap:10px;margin:12px 0}
.checkout-summary{max-width:420px;margin-left:auto;border:1px solid var(--border);border-radius:14px;background:#fff;padding:14px;box-shadow:var(--shadow)}
.summary-row{display:flex;justify-content:space-between;margin:.35rem 0}
.summary-row.total{font-weight:800;border-top:1px solid var(--border);padding-top:.5rem}
.error{color:var(--rosso);font-weight:600}

/* Off-canvas carrito */
#cart-panel{position:fixed;inset:0 0 0 auto;max-width:420px;width:92vw;background:#fff;border-left:1px solid var(--border);transform:translateX(100%);transition:transform var(--dur) ease;z-index:1000;display:grid;grid-template-rows:auto 1fr auto}
#cart-panel[open]{transform:none}
#cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity var(--dur) ease;z-index:999}
#cart-overlay[open]{opacity:1;pointer-events:auto}
.cart-header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--surface)}
.cart-header-actions{display:flex;gap:8px;align-items:center}
.cart-body{padding:12px;overflow:auto}
.cart-footer{padding:12px;border-top:1px solid var(--border);background:var(--surface)}
.cart-footer__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:999px;background:var(--rosso);color:#fff;font-weight:800;font-size:.8rem;padding:0 6px}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.7);display:grid;place-items:center;padding:24px;z-index:1500;opacity:0;transition:opacity .25s}
.lightbox[hidden]{display:none!important;opacity:0}
.lightbox[aria-hidden="false"]{opacity:1}
.lightbox__figure{max-width:min(1100px,92vw);max-height:90vh;margin:0;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;align-items:center}
.lightbox__img{display:block;max-width:100%;max-height:75vh;object-fit:contain}
.lightbox__cap{width:100%;padding:10px 14px;border-top:1px solid var(--border);color:#333}
.lightbox__close{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:999px;border:1px solid var(--border);background:#fff;color:#111;font-size:28px;display:grid;place-items:center}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding-block:18px;color:#6c5f4c}

/* CTA destacados */
.featured-cta{margin-top:32px}
@media(min-width:768px){.featured-cta{margin-top:40px}}

/* Utils */
.w-full{width:100%}
.hide-md{display:none}
@media(min-width:768px){.hide-md{display:inline}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* === Marca en el header con logo + título === */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand__logo{height:36px;width:auto;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.brand__name{font-family:"Playfair Display",serif;font-weight:700;font-size:1.15rem;letter-spacing:.2px;line-height:1}
.brand__name::after{
  content:"";display:block;height:4px;border-radius:999px;margin-top:3px;
  background:linear-gradient(90deg,var(--verde) 0%,#fff 50%,var(--rosso) 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset
}

/* === Título del hero más llamativo (trazo y subrayado tricolor) === */
.hero__grid h1{
  font-weight:800;letter-spacing:.3px;line-height:1.05;
}

/* Subrayado tricolor para todos los títulos principales */
h1, h2, .section-header h2 {
  display: inline-block; /* Para que el ::after se ajuste al ancho del texto */
}

h1::after, h2::after, .section-header h2::after {
  content:"";
  display:block;
  height:4px;
  border-radius:999px;
  margin-top:8px;
  background:linear-gradient(90deg,var(--verde) 0%,#fff 50%,var(--rosso) 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;
  width: 100%; /* Ahora será 100% del ancho del título inline-block */
}

/* Eliminar subrayado de títulos del acordeón */
.accordion-header h2::after,
.menu-accordion-section h2::after {
  display: none;
}

.hero__grid h1 {
  text-shadow:0 1px 0 #fff; /* sutil realce sobre fondo claro */
}

.hero__grid h1::after{
  content:"";display:block;width:180px;height:6px;border-radius:999px;margin-top:10px;
  background:linear-gradient(90deg,var(--verde) 0%,#fff 45%,var(--rosso) 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset
}

/* === Fondo ilustrado para todas las páginas === */
:root{
  --bg-opacity:.22;
  --bg-brightness:1.08;
  --bg-saturate:1.03;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("/assets/background/bg.png") center top / cover no-repeat fixed;
  opacity: var(--bg-opacity);
  filter: brightness(var(--bg-brightness)) saturate(var(--bg-saturate));
}

/* Optimización del fondo para móviles */
@media (max-width: 767px) {
  body::before {
    background: url("/assets/background/bg.png") center center / cover no-repeat;
    background-attachment: scroll; /* Fixed no funciona bien en móvil */
    background-size: cover;
    min-height: 100vh;
    width: 100vw;
    background-position: center 10%; /* Mejor posicionamiento vertical */
  }
}

/* Optimización adicional para móviles muy pequeños */
@media (max-width: 480px) {
  body::before {
    background-position: center 15%; /* Ajustar posición vertical */
    background-size: cover; /* Volver a cover para mantener el tamaño */
  }
}

/* Optimización para móviles en horizontal */
@media (max-width: 767px) and (orientation: landscape) {
  body::before {
    background-size: cover;
    background-position: center center;
  }
}

.site-header, main, .site-footer, #cart-panel, #mobile-menu{
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-transparency: reduce) {
  body::before { opacity: .1; }
}
@media print { body::before { display:none; } }

/* Reseñas Google */
.reviews{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:768px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review-card{border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(180deg,var(--surface),var(--surface-2));box-shadow:var(--shadow);padding:14px}
.review-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.review-head .avatar{width:36px;height:36px;border-radius:999px;background:var(--verde);color:#fff;display:grid;place-items:center;font-weight:800}
.stars{color:#E2C98F;letter-spacing:.5px;font-size:1rem;line-height:1}

/* === Off-canvas carrito (robusto) ======================================= */
#cart-panel{
  position:fixed; inset:0 0 0 auto; max-width:420px; width:92vw;
  background:#fff; border-left:1px solid var(--border);
  transform:translateX(100%); transition:transform var(--dur) ease;
  z-index:1000; display:grid; grid-template-rows:auto 1fr auto;
}
#cart-panel[open], #cart-panel.is-open{ transform:none; }

#cart-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px); opacity:0; pointer-events:none;
  transition:opacity var(--dur) ease; z-index:999;
}
#cart-overlay[open], #cart-overlay.is-open{
  opacity:1; pointer-events:auto;
}

/* Aseguramos que el fondo ilustrado no tape el panel */
body::before{ z-index:0; }

/* Checkout unificado en una sola card */
.checkout-card .checkout-grid{
  display:grid; gap:16px;
  grid-template-columns:1fr;
  align-items:start;
}
@media(min-width:1024px){
  .checkout-card .checkout-grid{ grid-template-columns:2fr 1fr; }
}
.checkout-card .checkout-summary.in-card{
  max-width:none; margin:0; padding:0;
  border:0; background:transparent; box-shadow:none;
}
.checkout-card .cart-actions{ margin:12px 0 0; }

/* === Checkout: más espaciado entre inputs de "Datos de entrega" === */
.checkout-form{
  display: grid;
  row-gap: 14px;            /* espacio vertical entre filas (móvil) */
}

@media (min-width: 768px){
  .checkout-form{ row-gap: 18px; } /* un pelín más en pantallas medianas+ */
}

/* Evita doble espaciamiento de los <div style="margin-top:8px"> del HTML */
.checkout-form > [style*="margin-top"]{ margin-top: 0 !important; }
.checkout-form .grid{ margin-top: 0 !important; }

/* Asegura ancho completo y consistencia visual */
.checkout-form .input,
.checkout-form select,
.checkout-form textarea{
  width: 100%;
}

/* Galería de 2 fotos en la página "Nuestra historia" */
.photo-grid{
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .photo-grid{ grid-template-columns:repeat(2,1fr); }
}
/* Historia + foto única en Sobre nosotros */
.about-photo{
  display:flex;
  justify-content:center;
  margin-top:16px;
}
.about-photo img{
  width:100%;
  height:auto;
  max-width:1184px;    /* no escalar por encima del original (1184x864) */
  border-radius:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.08);
}

/* Centrar y alargar el recuadro de la historia */
.about-story{
  width: 100%;
  max-width: 1000px;   /* alárgalo hasta 1000px en escritorio */
  margin: 0 auto 24px; /* centrado horizontal + separación inferior */
}
@media (min-width: 1280px){
  .about-story{ max-width: 1100px; } /* opcional: un poco más ancho en pantallas grandes */
}

/* Hacer la foto más pequeña y centrada */
.about-photo{
  display:flex;
  justify-content:center;
  margin-top: 12px;
}
.about-photo img{
  width: 100%;
  height: auto;
  max-width: 900px;   /* limita el ancho de la imagen */
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}

/* === Compatibilidad móvil mejorada === */
/* Corrige altura viewport en móviles */
@supports (height: 100dvh) {
  html { min-height: 100dvh; }
}

/* Previene zoom en inputs en iOS */
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  font-size: 16px; /* Previene zoom automático en iOS */
}

/* Optimización de rendimiento en móviles */
.card, .card__img, .grid {
  will-change: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Contenedor de escala móvil corregido */
#mobile-scale-container {
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
}

/* Mejoras para Android */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .card__img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Correcciones específicas para iOS */
@supports (-webkit-touch-callout: none) {
  body {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }
}

/* === Acordeón de categorías - Estilo Italiano Elegante === */
.menu-accordion-section {
  margin-bottom: 1.5rem;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem !important;
  background: linear-gradient(135deg, #f8f6f3, #fdfcfb) !important;
  border: 2px solid #e8e2d9 !important;
  border-radius: 16px !important;
  cursor: pointer;
  margin-bottom: 12px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(139, 123, 102, 0.1) !important;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.accordion-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #8b7b66, #a69482, #8b7b66);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.accordion-header:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(139, 123, 102, 0.15);
  border-color: #d4c7b8;
}

.accordion-header:hover::before {
  opacity: 1;
}

.menu-accordion-section .accordion-header h2 {
  margin: 0 !important;
  color: #3d3528 !important;
  font-size: clamp(1.5rem, 3vw, 1.9rem) !important;
  font-weight: 600 !important;
  font-family: 'Playfair Display', serif !important;
  letter-spacing: -0.5px !important;
  transition: all 0.3s ease;
}

.accordion-header.active {
  background: linear-gradient(135deg, #3d3528, #5a4f3f) !important;
  border-color: #3d3528 !important;
  transform: translateY(0);
}

.accordion-header.active::before {
  opacity: 0;
}

.menu-accordion-section .accordion-header.active h2,
.menu-accordion-section .accordion-header.active .section-note,
.menu-accordion-section .accordion-header.active .accordion-icon {
  color: #f8f6f3 !important;
}

.accordion-icon {
  font-size: 1.4rem;
  font-weight: 300 !important;
  color: #8b7b66 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 28px;
  text-align: center;
  opacity: 0.8;
}

.menu-accordion-section .accordion-header.active .accordion-icon {
  transform: rotate(180deg);
  color: #f8f6f3 !important;
  opacity: 1;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
  padding: 0 2rem;
  background: linear-gradient(180deg, #fdfcfb, #ffffff);
  border-radius: 0 0 16px 16px;
  margin-top: -12px;
  border: 2px solid #e8e2d9;
  border-top: none;
}

.accordion-content.open {
  padding: 2rem 2rem 3rem 2rem; /* Más padding bottom para PC */
  box-shadow: 0 4px 20px rgba(139, 123, 102, 0.08);
}

/* Espaciado adicional para el grid de productos dentro del acordeón */
.accordion-content .grid {
  margin-bottom: 1.5rem;
}

.accordion-content .grid:last-child {
  margin-bottom: 0; /* Remove margin from last grid */
}

/* Móvil: acordeón elegante optimizado */
@media (max-width: 767px) {
  .menu-accordion-section .accordion-header {
    padding: 1.2rem 1.5rem !important;
    border-radius: 12px !important;
  }
  
  .menu-accordion-section .accordion-header h2 {
    font-size: clamp(1.3rem, 4vw, 1.6rem) !important;
    letter-spacing: -0.3px !important;
  }
  
  .menu-accordion-section .accordion-icon {
    font-size: 1.6rem !important;
    min-width: 24px;
  }
  
  .accordion-content {
    padding: 0 1.5rem;
    border-radius: 0 0 12px 12px;
  }
  
  .accordion-content.open {
    padding: 1.5rem 1.5rem 2.5rem 1.5rem; /* Más padding bottom para móvil también */
  }
}

/* === Secciones de categorías mejoradas === */
.menu-section {
  margin-bottom: 3rem !important;
}

.category-header {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.category-header h2 {
  margin: 0 0 0.5rem;
  color: var(--rosso);
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.section-note {
  margin: 0;
  font-style: italic;
  color: var(--muted);
  transition: color 0.3s ease;
}

/* Móvil: categorías en menú */
@media (max-width: 767px) {
  .nav-mobile ul li:has(strong) {
    background: var(--surface-2);
    border-radius: 8px;
    margin: 8px 0;
    padding: 8px 12px;
  }
  
  .nav-mobile ul li strong {
    color: var(--rosso);
    font-size: 1rem;
  }
  
  .category-header {
    padding: 0.8rem;
  }
  
  .category-header h2 {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
  }
}

/* Centrar el recuadro de la historia al nivel de la imagen */
.section-header + .card,
.card.about-story{
  width: 100%;
  max-width: 860px;        /* mismo ancho que estás usando para la historia */
  margin-left: auto !important;
  margin-right: auto !important;
}
/* === GloriaFood / RestaurantLogin buttons === */
.glf-button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:999px;
  background:var(--rosso); color:#fff !important; font-weight:700;
  border:1px solid transparent; cursor:pointer; user-select:none;
  min-height:44px; text-decoration:none;
}
.glf-button:hover, .glf-button:focus-visible{ background:var(--rosso-hover); }
.glf-button.btn-lg{ padding:14px 18px; }

/* Variante reserva con color secundario */
.glf-button.reservation{
  background:var(--verde); color:#fff !important;
}
.glf-button.reservation:hover, .glf-button.reservation:focus-visible{
  background:var(--verde-hover);
}

/* === Reservar Mesa como enlace del menú (sin fondo ni hover) === */
.nav-list .glf-link{
  background:transparent; border:0; color:#3a3122 !important; font-weight:600;
  padding:0; min-height:auto; line-height:1; border-radius:0; text-decoration:none;
}
.nav-list .glf-link:hover,
.nav-list .glf-link:focus-visible{ text-decoration:underline; }

/* Mobile menu: que no se vea “mini” */
.nav-mobile .glf-link{ display:inline-block; padding:8px 10px; }

/* === Reservar Mesa como enlace del menú (sin fondo ni hover) === */
.site-header .nav-list .glf-link{
  /* Anula cualquier estilo del botón de GloriaFood */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  line-height: 1;
  /* Igualamos color y tipografía a los enlaces del menú */
  color: inherit !important;        /* usa el mismo color que "Carta"/"Nuestra historia" */
  font-weight: 600;                 /* ajusta si tus enlaces usan otro peso */
  text-decoration: none;
  display: inline;                  /* que no parezca botón */
  cursor: pointer;                  /* sigue siendo clicable */
}

/* Sin cambios de color ni fondo en hover/focus */
.site-header .nav-list .glf-link:hover,
.site-header .nav-list .glf-link:focus-visible{
  background: transparent !important;
  color: inherit !important;
  text-decoration: none;            /* o 'underline' si quieres subrayado como el resto */
}

/* Opcional: en el menú móvil, algo de espacio vertical como los <a> */
.nav-mobile .glf-link{
  display: inline-block;
  padding: 8px 10px !important;
}

/* === "Reservar Mesa" con el mismo look que los enlaces del menú === */
.site-header .nav-list .glf-button.glf-link{
  /* reset total de aspecto botón */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  line-height: 1;
  box-shadow: none !important;

  /* igualar a .nav-list a { font-weight:600; text-decoration:none } */
  color: inherit !important;
  font-weight: 600 !important;
  text-decoration: none !important;

  /* misma caja que un <a> del menú */
  display: inline;
  cursor: pointer;
}

/* sin efectos en hover/focus */
.site-header .nav-list .glf-button.glf-link:hover,
.site-header .nav-list .glf-button.glf-link:focus,
.site-header .nav-list .glf-button.glf-link:focus-visible{
  background: transparent !important;
  color: inherit !important;
  text-decoration: none !important;
  border: 0 !important; /* por si algún estilo externo añade subrayado vía border */
}

/* Utilidad para botón ovalado (pill) */
.btn-pill{ border-radius: 999px !important; }

/* (Ya tienes .btn y .btn-primary definidos, esto solo redondea) */

/* ===== Botonera de categorías (corporativa) ===== */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  align-items:center;
  padding:.5rem .75rem;
  margin-block: .5rem 1.25rem;                 /* respiro bajo los filtros */
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(58,49,34,.08);
  border-radius: 999px;
  backdrop-filter: blur(2px);
}

/* Botón base */
.chip-btn{
  appearance:none;
  border:1.5px solid rgba(58,49,34,.18);
  background:#fff;
  color:#3a3122;
  padding:.5rem .9rem;
  border-radius:999px;
  line-height:1;
  font-weight:600;
  font-size:.875rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .05s ease;
}

/* Hover/active suaves */
.chip-btn:hover{ background:#faf6ef; }
.chip-btn:active{ transform:translateY(1px); }

/* Seleccionado (match con tu color corporativo rojo) */
.chip-btn[aria-pressed="true"]{
  background: var(--rosso, #d13c2e);
  border-color: var(--rosso, #d13c2e);
  color:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 0 0 2px rgba(209,60,46,.10) inset;
}

/* Accesibilidad foco */
.chip-btn:focus-visible{
  outline:3px solid rgba(209,60,46,.25);
  outline-offset:2px;
}

/* Scroll amable en móvil si no cabe en una línea */
@media (max-width: 640px){
  .chips{ overflow:auto; white-space:nowrap; padding:.5rem .25rem; }
  .chip-btn{ white-space:nowrap; }
}

/* ===== Más separación entre secciones de la carta ===== */
.menu-section{
  margin-bottom: 90px;                /* separación extra entre categorías */
}
@media (min-width: 768px){
  .menu-section{ margin-bottom: 110px; }
}

/* Opcional: un poco más de aire bajo el título de cada sección */
.menu-section > .display{
  margin-bottom: 1.25rem;
}

/* Nota bajo el H2 de cada sección (cuando el título original llevaba paréntesis) */
.section-note{
  margin-top: -6px;
  margin-bottom: 18px;
  font-size: .95rem;
}

/* === Media de las tarjetas: todas con el mismo alto (no se deforma la tarjeta) === */
.card{ display:flex; flex-direction:column; height:100%; }

.card__media{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;   /* fija el alto del bloque de foto */
  overflow:hidden;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

/* Imagen siempre llena el marco sin deformar la tarjeta */
.card__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;      /* recorta sin deformar */
  display:block;
}

/* El resto del contenido ocupa el espacio restante de forma consistente */
.card__body{ flex:1 1 auto; display:flex; flex-direction:column; }
.card__footer{ margin-top:auto; }

/* === Acordeón: paleta sutil + espaciado inferior visible === */
:root{
  --acc-bg:#fbf7ef;         /* beige suave */
  --acc-bg-2:#fffdf7;       /* más claro */
  --acc-border:#eadfce;     /* borde pastel */
  --acc-ink:#3b2f23;        /* texto */
  --acc-stripe:linear-gradient(90deg, var(--verde) 0%, #e7cfa6 50%, var(--rosso) 100%);
}

.menu-accordion-section{ margin-bottom: 1.5rem; }

.menu-accordion-section .accordion-header{
  background: linear-gradient(135deg, var(--acc-bg), var(--acc-bg-2)) !important;
  border: 2px solid var(--acc-border) !important;
  border-radius: 16px !important;
  padding: 1.4rem 2rem !important;
  color: var(--acc-ink);
  box-shadow: 0 4px 20px rgba(139,123,102,.10) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  display:flex; justify-content:space-between; align-items:center;
}
.menu-accordion-section .accordion-header::before{
  content:""; position:absolute; inset:0 auto auto 0; right:0; height:3px;
  background: var(--acc-stripe); opacity:.9;
}
.menu-accordion-section .accordion-header:hover{
  transform: translateY(-2px);
  border-color:#decfb8 !important;
  box-shadow: 0 8px 28px rgba(139,123,102,.15) !important;
}
.menu-accordion-section .accordion-header h2{
  margin:0 !important; font-family:"Playfair Display",serif !important;
  font-weight:600 !important; letter-spacing:-.3px !important;
  color:#3d3528 !important; font-size: clamp(1.4rem,3vw,1.85rem) !important;
}
.menu-accordion-section .accordion-header .accordion-icon{
  font-size:1.35rem; min-width:28px; text-align:center; opacity:.9;
  transition: transform .25s ease;
  color:#8b7b66 !important;
}

/* Estado abierto (se activa desde JS con .active y .open) */
.menu-accordion-section .accordion-header.active{
  background: linear-gradient(135deg, #3d3528, #5a4f3f) !important;
  border-color:#3d3528 !important; color:#f8f6f3 !important;
}
.menu-accordion-section .accordion-header.active h2,
.menu-accordion-section .accordion-header.active .section-note,
.menu-accordion-section .accordion-header.active .accordion-icon{
  color:#f8f6f3 !important;
}
.menu-accordion-section .accordion-header.active .accordion-icon{ transform: rotate(180deg); }

.accordion-content{
  max-height:0; overflow:hidden;
  border:2px solid var(--acc-border); border-top:none;
  border-radius:0 0 16px 16px; background: linear-gradient(180deg,#fdfcfb,#ffffff);
  padding: 0 2rem !important;
  transition: max-height .4s ease, padding .25s ease;
  margin-top: -12px;
}
.accordion-content.open{
  /* clave: padding inferior generoso para que NO quede pegado el último item */
  padding: 1.5rem 2rem 3.5rem 2rem !important;
  box-shadow: 0 4px 20px rgba(139,123,102,.08);
}

.accordion-content .grid{ margin-bottom: 0.5rem; }

@media (max-width: 767px){
  .menu-accordion-section .accordion-header{ padding:1.1rem 1.4rem !important; border-radius:12px !important; }
  .accordion-content{ padding:0 1.2rem !important; border-radius:0 0 12px 12px; }
  .accordion-content.open{ padding:1.2rem 1.2rem 2.75rem 1.2rem !important; }
}

/* === Igualar alturas de tarjetas en los grids del acordeón === */
.accordion-content .grid { align-items: stretch; }
.accordion-content .grid > * { height: 100%; }
.card { display: flex; flex-direction: column; }
.card__footer { margin-top: auto; }

/* === Header: ocultar "PEDIDO ONLINE" en móvil === */
@media (max-width: 1023px){
  .nav-cta { display: none !important; }
}

/* === [1] Fondo a toda anchura (full-bleed) por categoría del acordeón === */
/* Crea una “banda” de fondo que ocupa todo el ancho de la ventana
   detrás de cada sección (header + contenido). */
.menu-accordion-section{
  position: relative;
}
.menu-accordion-section::before{
  content:"";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;        /* llega hasta los bordes de la página */
  top: 0;
  bottom: 0;           /* cubre toda la altura de la sección */
  pointer-events: none;
  z-index: 0;
  /* usa la misma paleta suave del acordeón */
  background: linear-gradient(180deg, var(--acc-bg, #fbf7ef), var(--acc-bg-2, #fffdf7));
  opacity: .85;        /* sutil para no “pisar” las tarjetas */
}
/* Asegura que el contenido quede por encima de la banda */
.menu-accordion-section > *{
  position: relative;
  z-index: 1;
}

/* Si prefieres un efecto de “líneas alternas” entre categorías, 
   descomenta este bloque: */
/*
.menu-accordion-section:nth-child(odd)::before{
  background: linear-gradient(180deg, rgba(251,247,239,.9), rgba(255,253,247,.9));
}
*/

/* Por si algún navegador tratase el button como inline: forzamos bloque */
.accordion-header{ display:flex; width:100%; }

/* === 1) Alinear cabeceras del acordeón cuando hay nota (PASTAS / PIZZAS) === */
/* Convertimos la cabecera en grid para que el icono quede centrado
   y el título + nota se apilen sin desplazar la tarjeta. */
.menu-accordion-section .accordion-header{
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: .2rem 1rem;
  min-height: 76px; /* altura base coherente con el resto */
}

/* El bloque del título (h2 + .section-note) ocupa la primera columna */
.menu-accordion-section .accordion-header > div:first-child{
  grid-column: 1;
  grid-row: 1 / span 2;
}

/* Icono “+” centrado verticalmente y separado a la derecha */
.menu-accordion-section .accordion-header .accordion-icon{
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

/* Nota bajo el título: sin márgenes negativos (evitan el “desplazado”) */
.menu-accordion-section .accordion-header .section-note{
  margin-top: .25rem !important;
  margin-bottom: 0 !important;
  line-height: 1.25;
  font-size: .95rem;
}

/* Opcional: si alguna cabecera queda muy alta, puedes bajar un poco el padding */
@media (min-width: 768px){
  .menu-accordion-section .accordion-header{
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
  }
}

/* === 2) Eliminar las franjas blancas horizontales bajo cada grupo === */
/* Si en algún momento añadimos un pseudo-elemento “full-bleed” para
   crear una banda de fondo por sección, lo apagamos aquí. */
.menu-accordion-section::before,
.menu-accordion-section::after{
  content: none !important;
  display: none !important;
}

/* Por si la franja venía de un background del propio contenedor: */
.menu-accordion-section{
  background: transparent !important;
}

/* === Alineación a la izquierda en todo el acordeón === */
.menu-accordion-section,
.menu-accordion-section .accordion-header,
.menu-accordion-section .accordion-content{
  text-align: left !important;
}

/* Título y nota bajo el título (PASTAS / PIZZAS) */
.menu-accordion-section .accordion-header h2,
.menu-accordion-section .accordion-header .section-note{
  text-align: left !important;
}

/* Mantener el icono “+” a la derecha y centrado verticalmente */
.menu-accordion-section .accordion-header .accordion-icon{
  justify-self: end;          /* para el layout en grid que usamos */
  align-self: center;
  text-align: center !important; /* evita heredar el text-align:left */
}

/* Fallback por si alguna cabecera usa flex en lugar de grid */
.menu-accordion-section .accordion-header .accordion-icon{
  margin-left: auto; /* lo empuja a la derecha en flex */
}

/* === INDEX — Héroe fijo, sin separación y sin cambios con el zoom === */
@media (min-width: 1024px){
  /* Forzamos layout en flex y sin hueco */
  .hero__grid{
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;                 /* sin separación */
  }

  /* Cada columna ocupa siempre el 50% (no “baila” con el zoom) */
  .hero__grid > div{
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* Quitamos el padding que separaba el texto de la imagen */
  .hero__grid > div:first-child{
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* === NUEVO: Secciones separadas del hero === */
@media (min-width: 1024px) {
  /* Sección de texto hero - alineado con el container */
  .hero-text-section {
    position: absolute;
    top: 150px; /* Alinear con la imagen */
    left: 0;
    right: 0;
    z-index: 10;
    padding: 0 !important;
  }
  
  .hero-text-content {
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: calc(50% + 40px); /* Dejar espacio para la imagen */
    text-align: left;
  }
  
  /* Sección de imagen hero - alineado con el container */
  .hero-image-section {
    position: absolute;
    top: 150px; /* Misma altura que el texto */
    left: 0;
    right: 0;
    z-index: 5;
    padding: 0 !important;
  }
  
  .hero-image-section .container {
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
    padding-left: calc(50% + 40px); /* Empezar después del texto */
    padding-right: var(--gutter);
  }
  
  .hero-image-section .hero__media {
    width: 300px; /* Tamaño más razonable */
    height: 225px; /* Mantener proporción 4:3 */
    margin: 0;
    border-radius: 12px; /* Esquinas redondeadas */
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15); /* Sombra elegante */
  }
  
  /* Ajustar el main para hacer espacio a las secciones absolutas */
  main {
    position: relative;
    padding-top: 450px; /* Reducir espacio para evitar solapamiento */
  }
}

/* En móvil y tablet mantener el diseño apilado normal */
@media (max-width: 1023px) {
  .hero-text-section {
    position: static;
  }
  
  .hero-image-section {
    position: static;
  }
  
  main {
    padding-top: 0;
  }
}
/* === INDEX · Héroe alineado a la franja del .container y estable al 100% de zoom === */
@media (min-width: 1024px){
  /* Fuerza layout definitivo del héroe */
  .container.hero__grid{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; /* 50/50 exacto */
    column-gap: 12px !important;  /* pon 0 si lo quieres totalmente pegado */
    align-items: flex-start !important; /* Cambiar a flex-start para alinear con header */
    padding-top: 0 !important; /* Sin padding superior */
  }

  /* Quita la sangría que desplazaba el título */
  .container.hero__grid > :first-child{
    padding-left: 0 !important;
    margin: 0 !important;
  }

  /* Sin márgenes en el bloque de imagen */
  .container.hero__grid .hero__media{
    margin: 0 !important;
  }

  /* Neutraliza cualquier gap antiguo que se haya quedado por duplicado */
  .hero__grid{ gap: 0 !important; grid-column-gap: 0 !important; }
}

/* === INDEX · Héroe perfectamente alineado (texto pegado a la imagen) === */
@media (min-width: 1024px){
  /* Forzamos la rejilla del héroe dentro de la franja del .container */
  .container.hero__grid{
    display: grid !important;
    /* Columna 1 del ancho de su contenido; la 2 ocupa el resto */
    grid-template-columns: max-content 1fr !important;
    column-gap: 12px !important;      /* pon 0 si lo quieres “tocando” */
    align-items: center !important;
    justify-items: start !important;   /* nada “flotando” en medio */
  }

  /* Anulamos reglas antiguas que abrían el hueco */
  .container.hero__grid > :first-child{
    padding-left: 0 !important;        /* quita el +140px heredado */
    margin: 0 !important;
  }
  .container.hero__grid .hero__media{
    margin: 0 !important;
    width: 100% !important;            /* ocupa toda su columna */
  }
}

/* === HERO HOME: texto e imagen alineados entre las franjas del .container === */
@media (min-width: 1024px){
  :root{
    --hero-media-w: 540px;   /* ancho de la foto (ajústalo si quieres) */
    --hero-gap: 16px;        /* separación entre texto e imagen */
  }

  /* Texto: reserva el ancho de la foto + gap a la derecha */
  .hero-text-section{ position:absolute; top:150px; left:0; right:0; z-index:10; }
  .hero-text-section .container{ padding-inline: var(--gutter) !important; }
  .hero-text-content{
    padding-left: 0 !important;
    padding-right: calc(var(--hero-media-w) + var(--hero-gap)) !important;
    max-width: 100% !important; /* evita que algo lo encoja */
  }

  /* Imagen: pegada al borde derecho del container */
  .hero-image-section{ position:absolute; top:150px; left:0; right:0; z-index:5; }
  .hero-image-section .container{
    padding-inline: var(--gutter) !important;
    display:flex; justify-content:flex-end; align-items:flex-start;
  }
  .hero-image-section .hero__media{
    width: var(--hero-media-w) !important;
    height: calc(var(--hero-media-w) * .75) !important; /* 4:3 */
    margin: 0 !important;
    border-radius: 12px;
    overflow: hidden;
  }

  /* Altura de la zona del héroe para que no pise la siguiente sección */
  main{ padding-top: calc(var(--hero-media-w) * .75 + 220px) !important; }
}

/* Anula reglas antiguas que la desplazaban (padding-left 50%+40 y width:300px) */
@media (min-width: 1024px){
  body .hero-image-section .container{ padding-left: var(--gutter) !important; }
  body .hero-image-section .hero__media{ width: var(--hero-media-w) !important; }
}

/* === Estilos para página SOBRE === */

/* Contenido de texto con mejor espaciado */
.content p {
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.content p:last-child {
  margin-bottom: 0;
}

/* Botones de redes sociales */
.social-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  transition: all var(--dur);
  min-width: 140px;
  justify-content: center;
}

.btn-instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: white;
}

.btn-instagram:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(240, 148, 51, 0.3);
}

.btn-facebook {
  background: #1877F2;
  color: white;
}

.btn-facebook:hover {
  background: #166FE5;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(24, 119, 242, 0.3);
}

.social-icon {
  font-size: 1.2rem;
}

/* Horarios */
.horarios {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.horario-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.horario-item:last-child {
  border-bottom: none;
}

.dia {
  font-weight: 600;
  color: var(--text);
}

.hora {
  color: var(--muted);
  font-weight: 500;
}

.hora.cerrado {
  color: var(--rosso);
  font-weight: 600;
}

/* Ubicación y mapa */
.ubicacion .mapa {
  margin-bottom: 24px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.direccion-actions {
  text-align: left; /* Alineado a la izquierda en móvil y PC */
  margin-bottom: 16px; /* Espacio entre botón y mapa */
}

/* Botón de ubicación con chincheta */
.btn-location {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* === Optimizaciones para PC === */
@media (min-width: 1024px) {
  /* Header más grande en PC */
  .site-header {
    padding: 8px 0; /* Añadir padding vertical */
  }
  
  .nav-wrap {
    min-height: 80px; /* Aumentar altura del header */
    gap: 24px; /* Más espacio entre elementos */
  }
  
  /* Logo más grande */
  .brand {
    gap: 16px; /* Más espacio entre logo y texto */
  }
  
  .brand__logo {
    height: 48px; /* Logo más grande (de 36px a 48px) */
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0,0,0,.1);
  }
  
  /* Título del brand más grande */
  .brand__name {
    font-size: 1.5rem; /* Aumentar tamaño (de 1.15rem a 1.5rem) */
    letter-spacing: .3px;
  }
  
  /* Navegación más grande */
  .nav-list {
    gap: 28px; /* Más espacio entre enlaces */
  }
  
  .nav-list a {
    font-size: 1.1rem; /* Texto de navegación más grande */
    font-weight: 600;
  }
  
  /* Botón Pedido Online igual al de index */
  .nav-cta .glf-button.btn-pill {
    background: var(--rosso) !important;
    color: white !important;
    padding: 12px 20px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    transition: all var(--dur) !important;
    border: none !important;
  }
  
  .nav-cta .glf-button.btn-pill:hover {
    background: var(--rosso-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(209, 60, 46, 0.3) !important;
  }
  
  /* Reducir espaciado superior en página sobre */
  .sobre-page main {
    padding-top: 80px !important; /* Subir más el contenido */
  }
  
  /* Reducir espaciado superior en página carta */
  .carta-page main {
    padding-top: 80px !important; /* Subir más el contenido */
  }
  
  /* Reducir espaciado entre secciones en index.html */
  .index-page .section-pt {
    padding-top: clamp(32px, 4vw, 48px) !important; /* Reducir espaciado superior */
  }
  
  .index-page .section-pb {
    padding-bottom: clamp(32px, 4vw, 48px) !important; /* Reducir espaciado inferior */
  }
  
  /* Reducir el espaciado específico entre hero y destacados */
  .index-page .hero-image-section + section {
    padding-top: 40px !important;
  }
  
  /* Botones sociales en horizontal */
  .social-buttons {
    justify-content: flex-start; /* Alinear a la izquierda */
  }
  
  .btn-social {
    flex: 0 0 auto; /* No crecer, mantener tamaño */
    min-width: 160px;
  }
  
  /* Mapa con ancho limitado y botón encima */
  .ubicacion {
    max-width: 600px; /* Limitar ancho del mapa */
  }
  
  .ubicacion .mapa {
    margin-bottom: 0; /* Sin margen inferior */
  }
  
  .direccion-actions {
    margin-bottom: 24px; /* Espacio entre botón y mapa */
    text-align: left; /* Alinear botón a la izquierda */
  }
}

/* Responsive para móviles */
@media (max-width: 767px) {
  .social-buttons {
    flex-direction: column;
  }
  
  .btn-social {
    width: 100%;
    max-width: 280px;
  }
  
  .horario-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .horarios {
    padding: 16px;
  }
}

/* === Sección de Reseñas === */
.reviews-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-bottom: 32px;
}

.review-card {
  background: var(--surface);
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform var(--dur);
}

.review-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

.review-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.review-avatar {
  width: 48px;
  height: 48px;
  background: var(--rosso);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
}

.review-info h4 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.review-stars {
  font-size: 0.9rem;
  line-height: 1;
}

.review-text {
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

.reviews-cta {
  text-align: left; /* Alineado a la izquierda como "Explorar toda la carta" */
}

/* Responsive para reseñas */
@media (min-width: 768px) {
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
  
  .review-card {
    padding: 32px;
  }
}