/* ============================================================================
   0. TIPOGRAFIAS PROPIAS
   Antes se pedian a Google en cada carga y bloqueaban el dibujado de la
   pagina hasta que respondiera. Ahora viven aca, en dos archivos variables.
   ========================================================================== */
@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:600 800;
  font-display:swap;
  src:url("../fonts/montserrat.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("../fonts/inter.woff2") format("woff2");
}

/* ============================================================================
   MEDIO PERRO — BBQ & HOME · El Calafate
   Hoja de estilos principal
   Paleta tomada del logo y del menú reales del cliente.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Color */
  --carbon:      #0B0A09;   /* fondo base */
  --carbon-2:    #121110;   /* superficie elevada */
  --carbon-3:    #1B1917;   /* tarjetas */
  --crema:       #ECF3D0;   /* color de las letras del logo */
  --crema-soft:  #C9CFB3;
  --humo:        rgba(236,243,208,.62);
  --humo-2:      rgba(236,243,208,.40);
  --brasa:       #E2571F;   /* naranja de fuego */
  --brasa-alta:  #FF8A3D;
  --rojo:        #AE2835;   /* rojo del menú impreso */
  --cyan:        #00AEEF;   /* acento del logo, uso mínimo */
  --linea:       rgba(236,243,208,.14);
  --linea-2:     rgba(236,243,208,.08);

  /* Tipografía fluida */
  --f-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --f-texto:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-mega:  clamp(31px, 4.9vw, 68px);
  --t-h1:    clamp(30px, 5.2vw, 72px);
  --t-h2:    clamp(26px, 3.9vw, 52px);
  --t-h3:    clamp(19px, 2.1vw, 29px);
  --t-body:  clamp(15.5px, 1.15vw, 18px);
  --t-small: clamp(13px, .95vw, 14.5px);
  --t-eyebrow: clamp(10.5px, .85vw, 12.5px);

  /* Ritmo */
  --pad-x:  clamp(20px, 5vw, 80px);
  --sec-y:  clamp(72px, 11vh, 160px);
  --max:    1400px;
  --max-txt: 68ch;

  --ease: cubic-bezier(.19,1,.22,1);
  --ease-suave: cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box }

html{
  overflow-x:hidden;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  overflow-x:hidden;
  background:var(--carbon);
  color:var(--crema);
  font-family:var(--f-texto);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,video,canvas{ max-width:100%; display:block }
img{ height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
ul,ol{ list-style:none }
::selection{ background:var(--brasa); color:#12100E }

:focus-visible{
  outline:2px solid var(--brasa-alta);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- 3. Tipografía ---------- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:800;
  line-height:1.03;
  letter-spacing:-.022em;
  text-transform:uppercase;
  text-wrap:balance;
}
h1{ font-size:var(--t-h1) }
h2{ font-size:var(--t-h2) }
h3{ font-size:var(--t-h3); line-height:1.16; letter-spacing:-.012em }
p{ text-wrap:pretty }

.eyebrow{
  font-family:var(--f-texto);
  font-size:var(--t-eyebrow);
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--brasa-alta);
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:22px;
}
/* Sin linea decorativa delante: la volanta se sostiene sola */
.eyebrow.centro{ justify-content:center }

.lead{
  font-size:clamp(17px,1.5vw,22px);
  line-height:1.65;
  color:var(--humo);
  max-width:var(--max-txt);
}
.texto{ color:var(--humo); max-width:var(--max-txt) }
.texto + .texto{ margin-top:1.1em }
.texto strong,.lead strong{ color:var(--crema); font-weight:600 }

.destacar{ color:var(--brasa-alta) }

/* ---------- 4. Layout ---------- */
.wrap{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--pad-x);
  width:100%;
}
.seccion{ padding-block:var(--sec-y); position:relative }
.seccion--linea{ border-top:1px solid var(--linea-2) }

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,90px);
  align-items:center;
}
.grid-2 > *{ min-width:0 }

.cabecera-seccion{ max-width:60ch; margin-bottom:clamp(40px,5vw,72px) }
/* El título de las páginas internas es más contenido que el de la portada:
   ahí manda el impacto, acá manda la lectura */
.cabecera-seccion h1{ font-size:clamp(29px,4.2vw,58px); max-width:19ch }
.cabecera-seccion.centro{ margin-inline:auto; text-align:center }
.cabecera-seccion.centro .lead,
.cabecera-seccion.centro .texto{ margin-inline:auto }

/* ---------- 5. Botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:16px 30px;
  border-radius:999px;
  font-size:var(--t-small);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:transform .45s var(--ease), background .35s, color .35s, border-color .35s, box-shadow .45s;
  will-change:transform;
  position:relative;
  overflow:hidden;
  text-align:center;
}
.btn--fuego{
  background:linear-gradient(100deg,var(--brasa),var(--brasa-alta));
  color:#140D07;
  box-shadow:0 10px 34px rgba(226,87,31,.30);
}
.btn--fuego:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 46px rgba(226,87,31,.46);
}
.btn--linea{
  border:1px solid var(--linea);
  color:var(--crema);
  backdrop-filter:blur(8px);
  background:rgba(11,10,9,.4);
}
.btn--linea:hover{
  border-color:var(--brasa);
  color:var(--brasa-alta);
  transform:translateY(-3px);
}
.btn--wa{ background:#25D366; color:#08240F; box-shadow:0 10px 30px rgba(37,211,102,.26) }
.btn--wa:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(37,211,102,.40) }
.btn svg{ width:17px; height:17px; flex:none }

.grupo-btn{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px }
.cabecera-seccion.centro .grupo-btn{ justify-content:center }

/* ---------- 6. Navegación ---------- */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px var(--pad-x);
  transition:background .5s var(--ease-suave), backdrop-filter .5s, border-color .5s, padding .5s;
  border-bottom:1px solid transparent;
}
.nav.compacta{
  background:rgba(11,10,9,.82);
  backdrop-filter:blur(16px);
  border-bottom-color:var(--linea-2);
  padding-block:11px;
}
.nav-logo{ display:flex; align-items:center; flex:none; z-index:2 }
.nav-logo img{
  height:clamp(46px,5.2vw,62px);
  width:auto;
  transition:height .5s var(--ease-suave);
}
.nav.compacta .nav-logo img{ height:clamp(40px,4.4vw,50px) }

.nav-menu{
  display:flex;
  align-items:center;
  gap:clamp(20px,2.4vw,38px);
}
.nav-link{
  font-size:var(--t-small);
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--humo);
  position:relative;
  padding:6px 0;
  transition:color .3s;
  white-space:nowrap;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:var(--brasa);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav-link:hover{ color:var(--crema) }
.nav-link:hover::after{ transform:scaleX(1); transform-origin:left }
.nav-link.activo{ color:var(--crema) }
.nav-link.activo::after{ transform:scaleX(1) }

.nav-acciones{ display:flex; align-items:center; gap:14px; flex:none }

/* Selector de idioma */
.idioma{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:var(--t-small);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--humo-2);
}
.idioma a{ transition:color .3s; padding:4px 2px }
.idioma a:hover{ color:var(--crema) }
.idioma a.activo{ color:var(--brasa-alta) }
.idioma span{ opacity:.3 }

/* Botón hamburguesa */
.hamburguesa{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px; height:44px;
  z-index:2;
  flex:none;
}
.hamburguesa span{
  display:block;
  width:23px; height:1.5px;
  background:var(--crema);
  margin-left:auto; margin-right:auto;
  transition:transform .45s var(--ease), opacity .3s;
}
.hamburguesa.abierta span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
.hamburguesa.abierta span:nth-child(2){ opacity:0 }
.hamburguesa.abierta span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }

/* Panel móvil */
.menu-movil{
  position:fixed;
  inset:0;
  z-index:99;
  background:rgba(9,8,7,.97);
  backdrop-filter:blur(20px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:100px var(--pad-x) 48px;
  opacity:0;
  visibility:hidden;
  transition:opacity .5s var(--ease-suave), visibility .5s;
}
.menu-movil.abierto{ opacity:1; visibility:visible }
.menu-movil a{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(24px,5.6vw,36px);
  text-transform:uppercase;
  letter-spacing:-.01em;
  color:var(--crema);
  padding:9px 0;
  opacity:0;
  transform:translateY(22px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.menu-movil.abierto a{ opacity:1; transform:none }
.menu-movil.abierto a:nth-child(1){ transition-delay:.08s }
.menu-movil.abierto a:nth-child(2){ transition-delay:.13s }
.menu-movil.abierto a:nth-child(3){ transition-delay:.18s }
.menu-movil.abierto a:nth-child(4){ transition-delay:.23s }
.menu-movil.abierto a:nth-child(5){ transition-delay:.28s }
.menu-movil.abierto a:nth-child(6){ transition-delay:.33s }
.menu-movil a:hover{ color:var(--brasa-alta) }
.menu-movil-pie{
  margin-top:34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  opacity:0;
  transition:opacity .5s .38s;
}
.menu-movil.abierto .menu-movil-pie{ opacity:1 }

/* ---------- 7. Portada ---------- */
.portada{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-block:120px 90px;
  overflow:hidden;
  isolation:isolate;
}
/* Video de fuego real de fondo */
.fondo-fuego{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:#080706;
}
.fondo-fuego video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  display:block;
}
/* En la franja de cierre el fuego es un acento, no el protagonista */
.fondo-fuego--franja video{ opacity:.42; object-position:center center }

/* Chispas WebGL por encima del video */
.fx-chispas{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  z-index:1;
  pointer-events:none;
  transition:opacity .8s ease;
}
.portada-velo{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  /* Solo oscurece detrás del texto. El lecho de brasas ya no se tapa:
     ahora es lo que da la imagen del encabezado */
  background:
    radial-gradient(ellipse 58% 50% at 30% 42%, rgba(9,8,7,.74), rgba(9,8,7,.05) 76%),
    linear-gradient(to bottom, rgba(9,8,7,.72) 0%, transparent 26%);
}
.portada .wrap{ position:relative; z-index:2 }

.portada-titulo{
  font-size:var(--t-mega);
  line-height:1.04;
  letter-spacing:-.025em;
  max-width:21ch;
}
.portada-titulo .linea{ display:block; overflow:hidden }
.portada-titulo .linea > span{ display:block }
.portada-sub{
  margin-top:clamp(24px,3vw,38px);
  font-size:clamp(16.5px,1.5vw,21px);
  line-height:1.6;
  color:var(--humo);
  max-width:52ch;
}

/* Franja de datos de la portada */
.portada-datos{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:3;
  border-top:1px solid rgba(236,243,208,.10);
  /* Translucida: deja ver el lecho de brasas por detras */
  background:linear-gradient(to top, rgba(9,8,7,.62), rgba(9,8,7,.18));
  backdrop-filter:blur(10px) saturate(1.1);
}
.portada-datos-inner{
  max-width:var(--max);
  margin-inline:auto;
  padding:16px var(--pad-x);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px clamp(20px,3.5vw,54px);
}
.dato{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:var(--t-small);
  color:var(--humo);
  white-space:nowrap;
}
.dato strong{ color:var(--crema); font-weight:600 }
.dato svg{ width:15px; height:15px; color:var(--brasa-alta); flex:none }
.dato-estrellas{ color:var(--brasa-alta); letter-spacing:.1em; font-size:12px }

/* ---------- 8. Tarjetas ---------- */
.tarjeta{
  background:var(--carbon-3);
  border:1px solid var(--linea-2);
  border-radius:16px;
  padding:clamp(24px,3vw,38px);
  position:relative;
  overflow:hidden;
  transition:transform .55s var(--ease), border-color .45s, background .45s;
}
.tarjeta:hover{
  transform:translateY(-5px);
  border-color:rgba(226,87,31,.4);
}
.tarjeta-num{
  font-family:var(--f-display);
  font-weight:800;
  font-size:12.5px;
  color:var(--brasa);
  letter-spacing:.16em;
  display:block;
  margin-bottom:16px;
}
.tarjeta h3{ margin-bottom:12px }
.tarjeta p{ color:var(--humo); font-size:var(--t-small); line-height:1.72 }

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,26px);
}
.grid-3 > *{ min-width:0 }
.grid-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,22px);
}
.grid-4 > *{ min-width:0 }

/* ---------- 9. Platos destacados ---------- */
.plato{
  display:flex;
  flex-direction:column;
  background:var(--carbon-2);
  border:1px solid var(--linea-2);
  border-radius:18px;
  overflow:hidden;
  transition:transform .55s var(--ease), border-color .45s;
  height:100%;
}
.plato:hover{ transform:translateY(-6px); border-color:rgba(226,87,31,.45) }
.plato-foto{
  aspect-ratio:4/3;
  background:
    linear-gradient(145deg, #1D1A17, #100E0C);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid var(--linea-2);
}
.plato-foto img{ width:100%; height:100%; object-fit:cover }
.plato-foto::after{
  content:attr(data-espera);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(236,243,208,.20);
  font-weight:600;
}
.plato-foto:has(img)::after{ display:none }
.plato-cuerpo{ padding:clamp(20px,2.4vw,30px); display:flex; flex-direction:column; flex:1 }
.plato-cuerpo h3{ margin-bottom:10px }
.plato-cuerpo p{ color:var(--humo); font-size:var(--t-small); line-height:1.7; flex:1 }
.plato-precio{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--linea-2);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.plato-precio .valor{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(20px,1.9vw,26px);
  color:var(--brasa-alta);
  letter-spacing:.01em;
}
.plato-precio .nota{ font-size:12px; color:var(--humo-2); text-align:right }
.plato-cinta{
  position:absolute;
  top:14px; left:14px;
  z-index:2;
  background:var(--rojo);
  color:var(--crema);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:999px;
}

/* ---------- 10. Carta ---------- */
.carta-seccion + .carta-seccion{ margin-top:clamp(46px,5vw,76px) }
.carta-titulo{
  display:flex;
  align-items:baseline;
  gap:18px;
  margin-bottom:26px;
  padding-bottom:14px;
  border-bottom:1px solid var(--linea);
}
.carta-titulo h3{ color:var(--crema); white-space:nowrap }
.carta-titulo .aclara{
  font-size:var(--t-small);
  color:var(--humo-2);
  text-transform:none;
  letter-spacing:0;
  font-family:var(--f-texto);
}
.carta-lista{ display:grid; gap:2px }
.carta-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px 20px;
  align-items:baseline;
  padding:13px 4px;
  border-bottom:1px solid var(--linea-2);
  transition:background .3s, padding-left .4s var(--ease);
}
.carta-item:hover{ background:rgba(236,243,208,.03); padding-left:12px }
.carta-item-nombre{ font-weight:500; color:var(--crema) }
.carta-item-desc{
  grid-column:1/-1;
  font-size:13.5px;
  color:var(--humo-2);
  margin-top:-2px;
  line-height:1.55;
}
.carta-item-precio{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(15.5px,1.35vw,19px);
  color:var(--brasa-alta);
  white-space:nowrap;
  letter-spacing:.01em;
}
.carta-item.destacado{
  background:linear-gradient(100deg, rgba(226,87,31,.10), transparent 70%);
  border-left:2px solid var(--brasa);
  padding-left:14px;
  border-radius:0 8px 8px 0;
}

/* Aviso de precios */
.aviso{
  border:1px solid var(--linea);
  border-left:3px solid var(--brasa);
  border-radius:0 12px 12px 0;
  padding:18px 22px;
  background:rgba(226,87,31,.05);
  font-size:var(--t-small);
  color:var(--humo);
}

/* ---------- 11. Reseñas ---------- */
.resena{
  background:var(--carbon-2);
  border:1px solid var(--linea-2);
  border-radius:16px;
  padding:clamp(22px,2.6vw,32px);
  display:flex;
  flex-direction:column;
  gap:14px;
  height:100%;
}
.resena-estrellas{ color:var(--brasa-alta); font-size:13px; letter-spacing:.14em }
.resena p{
  font-size:var(--t-small);
  line-height:1.75;
  color:var(--humo);
  flex:1;
  font-style:italic;
}
.resena-autor{
  font-size:12.5px;
  color:var(--humo-2);
  letter-spacing:.05em;
  display:flex;
  align-items:center;
  gap:8px;
}
.resena-autor strong{ color:var(--crema-soft); font-weight:600; font-style:normal }

/* ---------- 12. Preguntas frecuentes ---------- */
.faq-item{
  border-bottom:1px solid var(--linea-2);
}
.faq-pregunta{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:22px;
  padding:22px 0;
  text-align:left;
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(16px,1.45vw,20px);
  text-transform:uppercase;
  letter-spacing:-.005em;
  line-height:1.32;
  color:var(--crema);
  transition:color .3s;
}
.faq-pregunta:hover{ color:var(--brasa-alta) }
.faq-mas{
  flex:none;
  width:26px; height:26px;
  position:relative;
  margin-top:2px;
}
.faq-mas::before,.faq-mas::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  background:var(--brasa);
  transform:translate(-50%,-50%);
  transition:transform .45s var(--ease), opacity .3s;
}
.faq-mas::before{ width:14px; height:1.5px }
.faq-mas::after{ width:1.5px; height:14px }
.faq-item.abierto .faq-mas::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0 }
.faq-respuesta{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease);
}
.faq-item.abierto .faq-respuesta{ grid-template-rows:1fr }
.faq-respuesta-inner{ overflow:hidden }
.faq-respuesta p{
  color:var(--humo);
  font-size:var(--t-small);
  line-height:1.8;
  padding-bottom:24px;
  max-width:70ch;
}
.faq-respuesta p + p{ padding-top:12px }

/* ---------- 13. Franja de llamada ---------- */
.franja{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--linea-2);
  border-bottom:1px solid var(--linea-2);
  background:
    radial-gradient(ellipse 60% 100% at 50% 100%, rgba(226,87,31,.16), transparent 68%),
    var(--carbon-2);
  text-align:center;
}
.franja h2{ max-width:18ch; margin-inline:auto }

/* ---------- 14. Mapa ---------- */
.mapa-caja{
  border:1px solid var(--linea);
  border-radius:18px;
  overflow:hidden;
  background:var(--carbon-2);
  position:relative;
}
.mapa-caja iframe{
  width:100%;
  height:clamp(300px,45vh,470px);
  border:0;
  display:block;
  filter:grayscale(.5) invert(.92) hue-rotate(180deg) contrast(.9);
}

/* ---------- 15. Pie ---------- */
.pie{
  border-top:1px solid var(--linea-2);
  padding-top:clamp(52px,6vw,84px);
  background:var(--carbon-2);
}
.pie-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(34px,4vw,64px);
  padding-bottom:clamp(40px,4vw,60px);
}
.pie-grid > *{ min-width:0 }
.pie-logo img{ height:64px; width:auto; margin-bottom:18px }
.pie h4{
  font-family:var(--f-texto);
  font-size:var(--t-eyebrow);
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--brasa-alta);
  margin-bottom:18px;
}
.pie-lista{ display:flex; flex-direction:column; gap:11px }
.pie-lista a,.pie-lista span{
  font-size:var(--t-small);
  color:var(--humo);
  transition:color .3s;
}
.pie-lista a:hover{ color:var(--crema) }
.pie-social{ display:flex; gap:12px; margin-top:20px }
.pie-social a{
  width:40px; height:40px;
  border:1px solid var(--linea);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .35s, color .35s, transform .45s var(--ease);
  color:var(--humo);
}
.pie-social a:hover{
  border-color:var(--brasa);
  color:var(--brasa-alta);
  transform:translateY(-3px);
}
.pie-social svg{ width:17px; height:17px }
.pie-abajo{
  border-top:1px solid var(--linea-2);
  padding:22px 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  font-size:12.5px;
  color:var(--humo-2);
}

/* ---------- 16. Animaciones de entrada ---------- */
.rv{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
  will-change:opacity, transform;
}
.rv.visible{ opacity:1; transform:none }
.rv-d1{ transition-delay:.08s }
.rv-d2{ transition-delay:.16s }
.rv-d3{ transition-delay:.24s }
.rv-d4{ transition-delay:.32s }

/* ---------- 17. Cargador ---------- */
.cargador{
  position:fixed;
  inset:0;
  z-index:1000;
  background:var(--carbon);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .8s var(--ease-suave), visibility .8s;
}
.cargador.fuera{ opacity:0; visibility:hidden }
/* Si el JS tarda en llegar (conexion lenta), el cargador se retira solo a los
   2,2 segundos. Sin esto, tapaba la pagina hasta que el script decidiera. */
.cargador{ animation:cargadorSeVa .8s var(--ease-suave) 2.2s forwards }
@keyframes cargadorSeVa{ to{ opacity:0; visibility:hidden } }
.cargador img{
  width:clamp(120px,20vw,180px);
  animation:latir 2.2s var(--ease-suave) infinite;
}
@keyframes latir{
  0%,100%{ opacity:.35; transform:scale(.97) }
  50%    { opacity:1;   transform:scale(1) }
}

/* ---------- 18. Detalles ---------- */
.hilo{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--linea), transparent);
  border:0;
}
.cinta-idioma{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--humo-2);
  border:1px solid var(--linea-2);
  border-radius:999px;
  padding:7px 15px;
  transition:border-color .3s, color .3s;
}
.cinta-idioma:hover{ border-color:var(--brasa); color:var(--brasa-alta) }

/* Migas de pan */
.migas{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size:12.5px;
  color:var(--humo-2);
  padding-top:clamp(96px,11vw,132px);
}
.migas a{ transition:color .3s }
.migas a:hover{ color:var(--brasa-alta) }
.migas span{ opacity:.4 }

/* ---------- 19. Adaptación a pantallas ---------- */
@media (max-width:1080px){
  .grid-4{ grid-template-columns:repeat(2,1fr) }
  .pie-grid{ grid-template-columns:1fr 1fr; gap:40px }
  .pie-logo{ grid-column:1/-1 }
}

@media (max-width:900px){
  .nav-menu{ display:none }
  .hamburguesa{ display:flex }
  .nav-acciones .idioma{ display:none }
  /* El botón del encabezado se achica para no competir con el logo ni con el
     menú: la llamada grande ya está en la portada y dentro del menú */
  .nav-acciones .btn{ padding:11px 18px; font-size:12px; letter-spacing:.05em }
  .grid-2{ grid-template-columns:1fr; gap:40px }
  .grid-3{ grid-template-columns:1fr }
  .portada{ min-height:92svh }
  .portada-titulo{ max-width:100% }
}

@media (max-width:640px){
  :root{ --sec-y:clamp(58px,9vh,80px) }
  .grid-4{ grid-template-columns:1fr }
  .pie-grid{ grid-template-columns:1fr; gap:34px }
  .pie-abajo{ flex-direction:column; text-align:center; align-items:center }
  .grupo-btn{ flex-direction:column; align-items:stretch }
  .grupo-btn .btn{ width:100% }
  .portada-datos-inner{ gap:9px 20px; padding-block:13px }
  .dato{ font-size:12.5px }
  .carta-titulo{ flex-direction:column; align-items:flex-start; gap:5px }
  .carta-titulo h3{ white-space:normal }
}

/* ---------- 20. Accesibilidad de movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .rv{ opacity:1; transform:none }
  #fuego{ display:none }
}

/* ============================================================================
   21. SECCIONES CLARAS
   El contraste entre el carbón y el crema es lo que saca a la página del
   "todo oscuro". Se usan de a una, intercaladas, nunca dos seguidas.
   ========================================================================== */
.seccion--clara{
  --crema:      #17130F;          /* dentro de esta sección se invierte todo */
  --humo:       rgba(23,19,15,.72);
  --humo-2:     rgba(23,19,15,.52);
  --crema-soft: #3A322A;
  --linea:      rgba(23,19,15,.16);
  --linea-2:    rgba(23,19,15,.10);
  --carbon-2:   #EDE6D8;
  --carbon-3:   #E6DDCC;
  --brasa-alta: #C2410C;          /* el naranja claro no contrasta sobre crema */
  background:
    radial-gradient(ellipse 80% 60% at 78% 0%, rgba(226,87,31,.10), transparent 62%),
    linear-gradient(180deg, #F4EEE2 0%, #EDE6D8 100%);
  color:#17130F;
  border-top:1px solid rgba(23,19,15,.10);
  border-bottom:1px solid rgba(23,19,15,.10);
}
.seccion--clara h1,
.seccion--clara h2,
.seccion--clara h3,
.seccion--clara h4{ color:#17130F }
.seccion--clara .eyebrow{ color:#B03A0B }
.seccion--clara .eyebrow::before{ background:#C2410C }
.seccion--clara .tarjeta,
.seccion--clara .resena,
.seccion--clara .plato{
  background:rgba(255,255,255,.62);
  border-color:rgba(23,19,15,.12);
  box-shadow:0 2px 20px rgba(23,19,15,.05);
}
.seccion--clara .tarjeta:hover,
.seccion--clara .plato:hover{
  border-color:rgba(194,65,12,.42);
  box-shadow:0 14px 40px rgba(23,19,15,.10);
}
.seccion--clara .tarjeta-num{ color:#C2410C }
.seccion--clara .resena-estrellas{ color:#C2410C }
.seccion--clara .btn--linea{
  border-color:rgba(23,19,15,.24);
  color:#17130F;
  background:rgba(255,255,255,.5);
}
.seccion--clara .btn--linea:hover{ border-color:#C2410C; color:#B03A0B }
.seccion--clara .carta-item:hover{ background:rgba(23,19,15,.035) }
.seccion--clara .carta-item-precio{ color:#B03A0B }
.seccion--clara .faq-pregunta{ color:#17130F }
.seccion--clara .faq-pregunta:hover{ color:#B03A0B }
.seccion--clara .faq-mas::before,
.seccion--clara .faq-mas::after{ background:#C2410C }
.seccion--clara .hilo{
  background:linear-gradient(90deg,transparent,rgba(23,19,15,.18),transparent);
}

/* ============================================================================
   22. ANIMACIONES DE ENTRADA
   Todo entra en respuesta al scroll. Las variantes existen para que no se
   repita siempre el mismo movimiento a lo largo de la página.
   ========================================================================== */

/* Base: se aplica a cualquier elemento con [data-anim] */
[data-anim]{
  opacity:0;
  will-change:transform,opacity;
  transition:
    opacity 1s var(--ease),
    transform 1.15s var(--ease),
    filter 1s var(--ease),
    clip-path 1.2s var(--ease);
}
[data-anim].visible{ opacity:1; transform:none; filter:none }

[data-anim="subir"]      { transform:translateY(38px) }
[data-anim="subir-poco"] { transform:translateY(20px) }
[data-anim="izq"]        { transform:translateX(-44px) }
[data-anim="der"]        { transform:translateX(44px) }
[data-anim="escala"]     { transform:scale(.93) }
[data-anim="brillo"]     { transform:translateY(24px); filter:blur(9px) }
[data-anim="cortina"]    { clip-path:inset(0 0 100% 0) }
[data-anim="cortina"].visible{ clip-path:inset(0 0 0 0) }

/* Retardos en cascada */
[data-retardo="1"]{ transition-delay:.09s }
[data-retardo="2"]{ transition-delay:.18s }
[data-retardo="3"]{ transition-delay:.27s }
[data-retardo="4"]{ transition-delay:.36s }
[data-retardo="5"]{ transition-delay:.45s }
[data-retardo="6"]{ transition-delay:.54s }

/* Títulos que entran línea por línea */
.titulo-anim{ display:block }
.titulo-anim .ln{ display:block; overflow:hidden }
.titulo-anim .ln > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.15s var(--ease);
}
.titulo-anim.visible .ln > span{ transform:none }
.titulo-anim.visible .ln:nth-child(2) > span{ transition-delay:.10s }
.titulo-anim.visible .ln:nth-child(3) > span{ transition-delay:.20s }
.titulo-anim.visible .ln:nth-child(4) > span{ transition-delay:.30s }

/* Línea que se dibuja sola */
.linea-anim{
  height:1px;
  background:var(--linea);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.4s var(--ease);
}
.linea-anim.visible{ transform:scaleX(1) }

/* Números que cuentan */
.contador{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(34px,4.4vw,60px);
  color:var(--brasa-alta);
  line-height:1;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}

/* Parallax suave por scroll (lo mueve el JS) */
[data-parallax]{ will-change:transform }

/* Franja de cifras */
.cifras{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,3vw,44px);
}
.cifras > *{ min-width:0 }
.cifra{ text-align:left }
.cifra span{
  display:block;
  margin-top:10px;
  font-size:var(--t-small);
  color:var(--humo);
  line-height:1.5;
}
@media (max-width:760px){
  .cifras{ grid-template-columns:repeat(2,1fr); gap:28px 18px }
}

/* Cita destacada */
.cita{
  border-left:2px solid var(--brasa);
  padding-left:clamp(20px,3vw,34px);
  max-width:62ch;
}
.cita p{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(18px,2.1vw,28px);
  line-height:1.18;
  text-transform:uppercase;
  letter-spacing:-.01em;
  color:var(--crema);
}
.cita cite{
  display:block;
  margin-top:16px;
  font-family:var(--f-texto);
  font-style:normal;
  font-size:var(--t-small);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--humo-2);
}

@media (prefers-reduced-motion:reduce){
  [data-anim]{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important }
  .titulo-anim .ln > span{ transform:none !important }
  .linea-anim{ transform:scaleX(1) !important }
}

/* ============================================================================
   23. TRANSICIÓN ENTRE PÁGINAS
   El contenido se atenúa mientras llega la página nueva. Es corto a propósito:
   si dura mucho deja de sentirse instantáneo.
   ========================================================================== */
main, header.portada, footer.pie{
  transition:opacity .22s ease, transform .22s ease;
}
body.cambiando main,
body.cambiando header.portada,
body.cambiando footer.pie{
  opacity:0;
  transform:translateY(8px);
}
@media (prefers-reduced-motion:reduce){
  main, header.portada, footer.pie{ transition:none }
  body.cambiando main,
  body.cambiando header.portada,
  body.cambiando footer.pie{ opacity:1; transform:none }
}

/* Espacios de foto dentro de una sección clara: tienen que acompañar al fondo,
   no quedar como recuadros negros pegados */
.seccion--clara .plato-foto{
  background:linear-gradient(145deg,#E2D9C7,#D8CDB8);
  border-bottom-color:rgba(23,19,15,.12);
}
.seccion--clara .plato-foto::after{ color:rgba(23,19,15,.30) }
.seccion--clara .plato-cinta{ background:#B03A0B; color:#FDF6EA }
.seccion--clara .plato-precio{ border-top-color:rgba(23,19,15,.14) }
.seccion--clara .plato-precio .valor{ color:#B03A0B }
.seccion--clara .plato-precio .nota{ color:rgba(23,19,15,.52) }
.seccion--clara .aviso{
  background:rgba(194,65,12,.07);
  border-color:rgba(23,19,15,.16);
  border-left-color:#C2410C;
}

/* El velo va por encima del video y por debajo del texto */
.portada-velo{ z-index:2 }
.portada .wrap{ z-index:3 }
.portada-datos{ z-index:4 }
.franja .wrap{ position:relative; z-index:3 }
.franja{ isolation:isolate }

/* ============================================================================
   24. AJUSTE DE LOS VIDEOS DE FONDO
   ========================================================================== */

/* --- Portada del inicio: la llama asoma apenas por el borde inferior --- */

/* Sombra sobre el texto.
   Muchas paradas intermedias a proposito: con pocas, el degradado dibuja un
   borde visible en diagonal sobre el fondo oscuro. */
.portada-velo{
  background:
    linear-gradient(105deg,
      rgba(8,7,6,.95) 0%,
      rgba(8,7,6,.90) 18%,
      rgba(8,7,6,.78) 32%,
      rgba(8,7,6,.60) 44%,
      rgba(8,7,6,.42) 55%,
      rgba(8,7,6,.26) 66%,
      rgba(8,7,6,.14) 77%,
      rgba(8,7,6,.06) 88%,
      transparent 100%),
    linear-gradient(to bottom, rgba(8,7,6,.86) 0%, rgba(8,7,6,.40) 12%, transparent 26%);
}

/* --- Portadas internas --- */
.portada--interna .fondo-fuego{ height:100%; top:0 }
.portada--interna .fondo-fuego video{
  opacity:.50;
  -webkit-mask-image:none;
          mask-image:none;
}
/* Los fondos de paisaje son claros: piden mas sombra que los de fuego */
.portada--paisaje .fondo-fuego video{ opacity:.62 }
.portada--paisaje .portada-velo{
  background:
    linear-gradient(105deg,
      rgba(8,7,6,.93) 0%, rgba(8,7,6,.86) 22%, rgba(8,7,6,.68) 42%,
      rgba(8,7,6,.46) 60%, rgba(8,7,6,.28) 78%, rgba(8,7,6,.16) 92%, rgba(8,7,6,.10) 100%),
    linear-gradient(to bottom, rgba(8,7,6,.82) 0%, rgba(8,7,6,.26) 18%, rgba(8,7,6,.20) 100%);
}

@media (max-width:900px){
  .portada .fondo-fuego{ height:30% }
  .portada-velo{
    background:linear-gradient(to bottom,
      rgba(8,7,6,.93) 0%, rgba(8,7,6,.84) 26%, rgba(8,7,6,.66) 48%,
      rgba(8,7,6,.42) 68%, rgba(8,7,6,.20) 84%, transparent 100%);
  }
  .portada--paisaje .portada-velo{
    background:linear-gradient(to bottom,
      rgba(8,7,6,.94) 0%, rgba(8,7,6,.86) 30%, rgba(8,7,6,.72) 55%,
      rgba(8,7,6,.56) 78%, rgba(8,7,6,.44) 100%);
  }
}

/* Orden de capas */
.portada-velo{ z-index:2 }
.portada .wrap{ z-index:3 }
.portada-datos{ z-index:4 }
.franja .wrap{ position:relative; z-index:3 }
.franja{ isolation:isolate }

/* ============================================================================
   25. PORTADA DE PAGINAS INTERNAS
   ========================================================================== */
.portada--interna{
  min-height:auto;
  padding-block:clamp(150px,20vh,230px) clamp(56px,7vh,90px);
}
.portada--interna .portada-titulo{
  font-size:clamp(32px,4.8vw,66px);
  max-width:18ch;
}
.portada--interna .migas{ padding-top:0; margin-bottom:18px }

/* ============================================================================
   26. WHATSAPP FLOTANTE
   Siempre visible: es el unico canal de reserva del restaurante.
   ========================================================================== */
.wa-flotante{
  position:fixed;
  right:clamp(16px,2.5vw,30px);
  bottom:clamp(16px,2.5vw,30px);
  z-index:90;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  color:#08240F;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 30px rgba(37,211,102,.38), 0 2px 8px rgba(0,0,0,.4);
  transition:transform .45s var(--ease), box-shadow .45s, width .45s var(--ease);
  overflow:hidden;
  white-space:nowrap;
}
.wa-flotante svg{ width:29px; height:29px; flex:none }
.wa-flotante span{
  max-width:0;
  opacity:0;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.02em;
  transition:max-width .5s var(--ease), opacity .35s;
}
.wa-flotante:hover{
  width:auto;
  padding:0 22px 0 16px;
  gap:10px;
  transform:translateY(-3px);
  box-shadow:0 14px 40px rgba(37,211,102,.5), 0 2px 8px rgba(0,0,0,.4);
}
.wa-flotante:hover span{ max-width:230px; opacity:1 }
@media (prefers-reduced-motion:no-preference){
  .wa-flotante{ animation:waEntra .7s var(--ease) .9s both }
  @keyframes waEntra{
    from{ transform:scale(.4); opacity:0 }
    to  { transform:scale(1);  opacity:1 }
  }
}
@media (max-width:640px){
  .wa-flotante{ width:54px; height:54px }
  .wa-flotante svg{ width:27px; height:27px }
  .wa-flotante:hover{ width:54px; padding:0 }
  .wa-flotante:hover span{ max-width:0; opacity:0 }
}

/* ============================================================================
   27. AJUSTES FINOS
   ========================================================================== */


/* Las aclaraciones junto al precio tienen que leerse */
.carta-item-precio span{ color:var(--crema-soft) !important; opacity:.92 }
.carta-item-desc{ color:rgba(236,243,208,.60); font-size:14px }
.seccion--clara .carta-item-desc{ color:rgba(23,19,15,.68) }
.seccion--clara .carta-item-precio span{ color:rgba(23,19,15,.62) !important }
.plato-precio .nota{ color:var(--crema-soft); opacity:.88 }
.carta-titulo .aclara{ color:var(--crema-soft); opacity:.9 }
.seccion--clara .carta-titulo .aclara{ color:rgba(23,19,15,.66); opacity:1 }

/* ============================================================================
   28. AIRE ENTRE EL ENCABEZADO Y EL CONTENIDO
   El encabezado con video necesita respirar antes del texto que sigue: sin ese
   espacio, el primer parrafo parece encimarse sobre la imagen.
   ========================================================================== */
.portada--interna{
  padding-block:clamp(150px,20vh,230px) clamp(80px,11vh,140px);
  margin-bottom:clamp(24px,4vh,56px);
}
/* La primera seccion despues de una portada arranca mas abajo */
.portada + section.seccion,
.portada + .seccion{ padding-top:clamp(40px,6vh,80px) !important }

/* En el inicio, la franja de datos se apoya sobre el borde: el contenido que
   sigue necesita separarse de ella */
.portada:not(.portada--interna) + section.seccion,
.portada:not(.portada--interna) + .seccion{ padding-top:clamp(64px,9vh,120px) !important }

/* Respiro entre bloques de contenido dentro de una misma pagina */
.seccion + .seccion{ padding-top:clamp(56px,8vh,110px) }
.carta-bloque + .carta-bloque{ padding-top:clamp(46px,6vh,84px) }

@media (max-width:900px){
  .portada--interna{
    padding-block:clamp(130px,17vh,180px) clamp(56px,8vh,90px);
    margin-bottom:20px;
  }
}

/* ============================================================================
   29. PAGINAS DE PAISAJE
   Sin fuego: acá el video es el protagonista, no un telón de fondo.
   ========================================================================== */
.portada--paisaje .fondo-fuego video{ opacity:.95 }
/* Video del salon con gente: encuadre centrado en las personas (no en el borde
   inferior como el resto) y algo mas atenuado porque es una escena de dia. */
.portada--gente .fondo-fuego video{ object-position:45% 68%; opacity:.75 }
.portada--paisaje .portada-velo{
  /* La sombra se concentra detrás del texto y deja el paisaje a la vista */
  background:
    linear-gradient(105deg,
      rgba(8,7,6,.92) 0%, rgba(8,7,6,.84) 20%, rgba(8,7,6,.62) 38%,
      rgba(8,7,6,.34) 54%, rgba(8,7,6,.14) 70%, rgba(8,7,6,.04) 86%, transparent 100%),
    linear-gradient(to bottom, rgba(8,7,6,.72) 0%, rgba(8,7,6,.12) 20%, transparent 46%);
}
@media (max-width:900px){
  .portada--paisaje .fondo-fuego video{ opacity:.88 }
  .portada--paisaje .portada-velo{
    background:linear-gradient(to bottom,
      rgba(8,7,6,.88) 0%, rgba(8,7,6,.74) 32%, rgba(8,7,6,.56) 58%,
      rgba(8,7,6,.44) 80%, rgba(8,7,6,.38) 100%);
  }
}

/* ============================================================================
   30. FUEGO DEL ENCABEZADO (definitivo)
   Una sola mascara, sin capas superpuestas: cada borde extra dejaba una linea
   visible. La base de la llama queda por debajo del borde de la pantalla, de
   modo que solo asoman las puntas.
   ========================================================================== */
.portada:not(.portada--interna) .fondo-fuego{
  top:auto;
  bottom:-13%;          /* la base de la llama sale de cuadro */
  height:44%;
  -webkit-mask-image:none;
          mask-image:none;
  background:transparent;
}
.portada:not(.portada--interna) .fondo-fuego::after{ content:none }
.portada:not(.portada--interna) .fondo-fuego video{
  opacity:.92;
  object-position:center bottom;
  /* Curva larga y sin escalones: el humo de la parte alta del video se disuelve
     mucho antes de llegar al final del recuadro */
  -webkit-mask-image:linear-gradient(to top,
    #000 0%, rgba(0,0,0,.98) 18%, rgba(0,0,0,.90) 30%, rgba(0,0,0,.76) 40%,
    rgba(0,0,0,.58) 50%, rgba(0,0,0,.40) 60%, rgba(0,0,0,.25) 70%,
    rgba(0,0,0,.14) 78%, rgba(0,0,0,.06) 86%, rgba(0,0,0,.02) 93%, transparent 100%);
          mask-image:linear-gradient(to top,
    #000 0%, rgba(0,0,0,.98) 18%, rgba(0,0,0,.90) 30%, rgba(0,0,0,.76) 40%,
    rgba(0,0,0,.58) 50%, rgba(0,0,0,.40) 60%, rgba(0,0,0,.25) 70%,
    rgba(0,0,0,.14) 78%, rgba(0,0,0,.06) 86%, rgba(0,0,0,.02) 93%, transparent 100%);
}
@media (max-width:900px){
  .portada:not(.portada--interna) .fondo-fuego{ bottom:-11%; height:38% }
}


/* ============================================================================
   31. IDIOMA CON BANDERA Y PIE MAS COMPACTO
   ========================================================================== */

/* --- Conmutador de idioma --- */
.idioma{ gap:10px }
.idioma a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 9px;
  border:1px solid transparent;
  border-radius:999px;
  transition:color .3s, border-color .3s, background .3s;
}
.idioma a .bandera{
  width:18px; height:12.6px;
  border-radius:2px;
  flex:none;
  /* la bandera queda un punto atras: manda la sigla */
  opacity:.55;
  transition:opacity .3s;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
}
.idioma a:hover{ border-color:var(--linea-2) }
.idioma a:hover .bandera{ opacity:.9 }
.idioma a.activo{
  border-color:rgba(226,87,31,.42);
  background:rgba(226,87,31,.10);
}
.idioma a.activo .bandera{ opacity:1 }

@media (max-width:900px){
  .idioma a{ padding:5px 7px; gap:5px }
  .idioma a .bandera{ width:16px; height:11.2px }
}

/* --- Pie comprimido: se le quitaron tres lineas y todo el aire que sobraba --- */
.pie{ padding-top:clamp(30px,3.2vw,42px); padding-bottom:12px }
.pie-grid{
  gap:clamp(22px,2.8vw,46px);
  /* el hueco grande estaba aca: 58px de relleno mas 56px del bloque de abajo */
  padding-bottom:0;
}
.pie-logo img{ height:46px; margin-bottom:12px }
.pie-logo .texto{ line-height:1.55 }
.pie h4{ margin-bottom:12px }
.pie-lista{ gap:8px }
.pie-social{ gap:9px; margin-top:14px }
.pie-social a{ width:34px; height:34px }
.pie-social svg{ width:15px; height:15px }
.pie-abajo{ margin-top:clamp(16px,1.8vw,22px); padding:13px 0 0; font-size:12px }

@media (max-width:760px){
  .pie{ padding-top:30px }
  .pie-grid{ gap:26px }
}


/* ============================================================================
   32. LA CARTA COMO DESPLEGABLES
   Cada seccion se abre al tocar el titulo. Cerradas, las nueve entran juntas
   en pantalla y se lee de un vistazo todo lo que hay.
   ========================================================================== */

/* Cerradas ocupan poco; al abrirse la seccion recupera su aire */
.carta-bloque{
  padding-block:clamp(6px,1vh,12px) !important;
  transition:padding .5s var(--ease);
}
.carta-bloque.abierta{ padding-block:clamp(30px,4vh,54px) !important }
.carta-bloque + .carta-bloque{ padding-top:clamp(6px,1vh,12px) }
.carta-bloque.abierta + .carta-bloque{ padding-top:clamp(6px,1vh,12px) }

.carta-titulo{ margin:0; border:0; padding:0; display:block }

.carta-toggle{
  width:100%;
  display:flex;
  align-items:baseline;
  gap:18px;
  padding:22px 0;
  text-align:left;
  background:none;
  border:0;
  border-bottom:1px solid transparent;
  cursor:pointer;
  color:inherit;
  transition:border-color .4s ease, color .3s;
}
.carta-seccion.abierto .carta-toggle{ border-bottom-color:var(--linea) }

.carta-titulo-nombre{
  font-family:var(--f-display);
  font-size:var(--t-h4, 1.35rem);
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--crema);
  white-space:nowrap;
  transition:color .3s;
}
.carta-toggle:hover .carta-titulo-nombre{ color:var(--brasa-alta) }
.carta-toggle .aclara{
  font-size:var(--t-small);
  color:var(--crema-soft);
  opacity:.9;
  text-transform:none;
  letter-spacing:0;
  font-family:var(--f-texto);
}

/* El mas y el menos, igual que en preguntas frecuentes */
.carta-mas{
  flex:none;
  margin-left:auto;
  width:26px; height:26px;
  position:relative;
  align-self:center;
}
.carta-mas::before,.carta-mas::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  background:var(--brasa);
  transform:translate(-50%,-50%);
  transition:transform .45s var(--ease), opacity .3s;
}
.carta-mas::before{ width:14px; height:1.5px }
.carta-mas::after{ width:1.5px; height:14px }
.carta-seccion.abierto .carta-mas::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0 }

/* El panel: se despliega sin numeros magicos de altura */
.carta-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease);
}
.carta-seccion.abierto .carta-panel{ grid-template-rows:1fr }
.carta-panel-inner{ overflow:hidden }
.carta-panel .carta-lista{ padding-top:22px; padding-bottom:6px }

/* Secciones claras: el titulo y el signo cambian de color */
.seccion--clara .carta-titulo-nombre{ color:#17130F }
.seccion--clara .carta-toggle:hover .carta-titulo-nombre{ color:#B03A0B }
.seccion--clara .carta-toggle .aclara{ color:rgba(23,19,15,.66); opacity:1 }
.seccion--clara .carta-mas::before,
.seccion--clara .carta-mas::after{ background:#C2410C }
.seccion--clara .carta-seccion.abierto .carta-toggle{ border-bottom-color:rgba(23,19,15,.16) }

@media (max-width:760px){
  .carta-toggle{ flex-wrap:wrap; gap:4px 14px; padding:18px 0 }
  .carta-titulo-nombre{ white-space:normal }
  .carta-toggle .aclara{ flex-basis:100%; order:3 }
  .carta-mas{ order:2 }
}


/* ============================================================================
   33. FOTOS DEL LOCAL
   ========================================================================== */
.foto{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--linea-2);
  background:var(--carbon-2);
  position:relative;
}
.foto img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  /* entra con un acercamiento minimo, como el resto de la pagina */
  transition:transform 1.1s var(--ease);
}
.foto:hover img{ transform:scale(1.03) }
.foto figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:26px 22px 15px;
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--crema-soft);
  background:linear-gradient(to top, rgba(8,7,6,.86) 0%, rgba(8,7,6,.55) 45%, transparent 100%);
}

/* Banda ancha entre secciones */
.foto-banda{
  border-radius:0;
  border-left:0; border-right:0;
  border-top:1px solid var(--linea-2);
  border-bottom:1px solid var(--linea-2);
}
.foto-banda img{ width:100%; height:clamp(220px,34vh,420px); object-fit:cover }
.foto-banda figcaption{ padding:34px clamp(20px,5vw,64px) 18px }

/* En seccion clara el pie de foto no puede quedar sobre fondo negro */
.seccion--clara .foto{ border-color:rgba(23,19,15,.14) }


/* ============================================================================
   34. CORRECCIONES
   ========================================================================== */

/* --- El icono y el texto del boton de WhatsApp van en blanco --- */
.wa-flotante{ color:#fff }

/* --- Las bandas siguen recortadas a proposito, pero con material en alta --- */
.foto-banda img{ height:clamp(240px,36vh,460px) }
/* La banda del saxo se muestra entera, sin recorte: la foto manda la altura */
.foto-banda--entera img{ height:auto; object-fit:unset }

/* --- La foto que acompana un titulo, a lo ancho de la columna de texto --- */
.foto--ancha{ margin-top:clamp(30px,4vw,52px) }
.foto--ancha img{ width:100%; height:auto; display:block }

/* --- El idioma activo tiene que verse de lejos ---
   Antes el activo era naranja sobre fondo oscuro, al lado de un boton naranja:
   se perdia. Ahora el puesto va en solido claro y el otro queda apagado. --- */
.idioma a{
  padding:6px 11px;
  color:var(--crema);
  opacity:.62;
  border-color:rgba(236,243,208,.14);
}
.idioma a:hover{ opacity:1; border-color:rgba(236,243,208,.4) }
.idioma a .bandera{ opacity:1; box-shadow:0 0 0 1px rgba(0,0,0,.45) }
.idioma a.activo{
  opacity:1;
  background:var(--crema);
  border-color:var(--crema);
  color:#14100D;
  font-weight:800;
  box-shadow:0 2px 14px rgba(236,243,208,.22);
}
/* La regla vieja `.idioma span{opacity:.3}` era para el separador "/".
   Ahora la sigla tambien va en un span, asi que hay que devolverle el cuerpo. */
.idioma a span{ opacity:1 }
.idioma a.activo span{ color:#14100D }
.idioma a.activo:hover{ opacity:1; border-color:var(--crema) }


/* ============================================================================
   35. ENCABEZADO CON FOTO EN LUGAR DE VIDEO
   La carta usa una foto del propio local. Se comporta igual que el video:
   cubre el encabezado, va atenuada y las chispas siguen corriendo por encima.
   ========================================================================== */
.fondo-fuego--foto picture{ display:block; width:100%; height:100% }
.fondo-fuego--foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 46%;
  display:block;
  opacity:.78;
}
/* Velo parejo encima de la foto: sin el, las chispas se pierden sobre la carne */
.fondo-fuego--foto::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(8,7,6,.3);
  pointer-events:none;
}
@media (max-width:900px){
  .fondo-fuego--foto img{ opacity:.72; object-position:center 48% }
  .fondo-fuego--foto::after{ background:rgba(8,7,6,.3) }
}


/* ============================================================================
   36. TARJETAS SIN PRECIO
   Los precios se quitaron del sitio. La nota del plato queda sola, como etiqueta.
   ========================================================================== */
.plato-precio .nota:only-child{
  text-align:left;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brasa-alta);
}
.seccion--clara .plato-precio .nota:only-child{ color:#B03A0B }


/* ============================================================================
   37. BANDA DESTACADA DE PIZZA
   Fondo propio, ni oscuro ni claro: asi no rompe la alternancia del inicio y
   se ve como lo que es, un destacado.
   ========================================================================== */
.destacado-pizza{
  background:
    radial-gradient(ellipse 70% 90% at 85% 50%, rgba(226,87,31,.28), transparent 65%),
    linear-gradient(135deg, #2A120A 0%, #4A1C0E 55%, #6B2712 100%);
  border-top:1px solid rgba(226,87,31,.28);
  border-bottom:1px solid rgba(226,87,31,.28);
}
.destacado-pizza .eyebrow{ color:#FFB48A }
.destacado-pizza .eyebrow::before{ background:#FFB48A }
.destacado-pizza h2{ color:var(--crema) }
.destacado-pizza .lead{ color:var(--crema) }
.destacado-pizza .texto{ color:rgba(236,243,208,.82) }
.destacado-pizza .btn--linea{ border-color:rgba(236,243,208,.4); color:var(--crema) }
.destacado-pizza .btn--linea:hover{ border-color:var(--crema); background:rgba(236,243,208,.08) }


/* ============================================================================
   38. BARRA DE NAVEGACION SIEMPRE LEGIBLE
   Antes era transparente arriba y se oscurecia con una clase que ponia el JS al
   hacer scroll. Cuando esa clase no llegaba, el contenido se veia a traves de
   la barra. Ahora el fondo esta siempre; la clase solo la achica.
   ========================================================================== */
.nav{
  background:linear-gradient(to bottom, rgba(11,10,9,.92) 0%, rgba(11,10,9,.84) 100%);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(236,243,208,.06);
}
.nav.compacta{
  background:rgba(11,10,9,.88);
  border-bottom-color:var(--linea-2);
}


/* Encabezado de pizza: la imagen ya viene compuesta (pizza entera a la derecha
   sobre un fondo fundido), asi que cubre el encabezado apoyada a la derecha.
   En celular se usa la version vertical, centrada. */
.fondo-fuego--entera img{ object-fit:cover; object-position:right center; opacity:.9 }
@media (max-width:759px){
  .fondo-fuego--entera img{ object-fit:cover; object-position:center center }
}

/* Foto de la banda de pizza del inicio: velo calido encima para que se integre
   con el fondo marron y no compita con el texto. */
.destacado-pizza .foto::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to top, rgba(42,18,10,.5) 0%, rgba(42,18,10,.08) 40%, transparent 65%),
    linear-gradient(135deg, rgba(42,18,10,.28) 0%, rgba(74,28,14,.08) 50%, rgba(107,39,18,.2) 100%);
}
.destacado-pizza .foto figcaption{ z-index:2 }


/* ============================================================================
   39. CELULAR: ENCABEZADOS QUE SE VEN
   En pantallas angostas el texto ocupaba todo el encabezado y el video o la
   foto quedaban tapados por el velo: se veia un bloque negro. Ahora el texto
   va sobre fondo oscuro y el video tiene su propia franja debajo, con el borde
   superior fundido. En el inicio, el fuego tambien recibe su espacio.
   ========================================================================== */
@media (max-width:900px){
  /* Portadas internas: franja de video/foto debajo del texto */
  .portada--interna{ padding-bottom:clamp(220px,40vh,340px); margin-bottom:0 }
  .portada--interna .fondo-fuego{
    top:auto; bottom:0;
    height:min(50%, 380px);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 22%, #000 45%);
            mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 22%, #000 45%);
  }
  .portada--interna .fondo-fuego video{ opacity:.62 }
  .portada--interna.portada--paisaje .fondo-fuego video{ opacity:.68 }
  .portada--interna .portada-velo,
  .portada--interna.portada--paisaje .portada-velo{
    /* arriba, un toque detras del texto; abajo, sombra pareja sobre la franja */
    background:linear-gradient(to bottom, rgba(8,7,6,.35) 0%, transparent 35%, rgba(8,7,6,.30) 62%, rgba(8,7,6,.40) 100%);
  }
  .portada--interna .fondo-fuego--foto img{ opacity:.72; object-position:center 40% }
  .portada--interna .fondo-fuego--foto::after{ background:rgba(8,7,6,.34) }
  .portada--interna .fondo-fuego--entera img{ object-position:center 45% }
  .portada--interna .fx-chispas{ top:auto; bottom:0; height:min(50%, 380px) }

  /* Inicio: lugar para que asome el fuego entre los botones y los datos */
  .portada:not(.portada--interna){ padding-bottom:calc(110px + 28vh) }
  .portada:not(.portada--interna) .fondo-fuego{ bottom:-3%; height:52% }
  .portada:not(.portada--interna) .fondo-fuego video{
    -webkit-mask-image:linear-gradient(to top, #000 0%, #000 34%, rgba(0,0,0,.7) 55%, rgba(0,0,0,.3) 78%, transparent 100%);
            mask-image:linear-gradient(to top, #000 0%, #000 34%, rgba(0,0,0,.7) 55%, rgba(0,0,0,.3) 78%, transparent 100%);
  }
  /* La pagina de pizza va sin chispas en celular */
  .fx-chispas--escritorio{ display:none }
  .portada:not(.portada--interna) .fondo-fuego video{ opacity:1 }
  .portada-datos{ background:linear-gradient(to top, rgba(9,8,7,.55), rgba(9,8,7,.10)) }

  /* Pie: enlaces con alto de tap comodo */
  .pie-lista a{ display:inline-block; padding-block:5px }
}
@media (max-width:640px){
  /* Los cortes de linea de los titulos estan pensados para escritorio */
  .portada-titulo br, .seccion h2 br, .franja h2 br{ display:none }
}

/* Boton flotante escondido mientras se ve la portada del inicio (que ya tiene
   su boton de WhatsApp y lo pisaba) */
.wa-flotante.wa-escondido{
  animation:none;   /* la animacion de entrada fijaba la opacidad */
  opacity:0;
  pointer-events:none;
  transform:translateY(24px) scale(.7);
  transition:opacity .35s ease, transform .35s var(--ease);
}

/* ============================================================================
   40. CELULAR: IDIOMA A LA VISTA EN LA BARRA
   Antes el conmutador solo vivia dentro del menu desplegable: habia que abrirlo
   para saber en que idioma se estaba. Ahora queda en la barra, compacto.
   ========================================================================== */
@media (max-width:900px){
  .nav-acciones{ gap:8px }
  .nav-acciones .idioma{ display:flex; gap:4px }
  .nav-acciones .idioma a{ padding:5px 7px; gap:4px; font-size:11px; letter-spacing:.04em }
  .nav-acciones .idioma a .bandera{ width:15px; height:10.5px }
  .nav-acciones .btn{ padding:10px 14px; font-size:11.5px }
}
@media (max-width:400px){
  /* En los mas angostos, la sigla del idioma inactivo se esconde y queda la bandera */
  .nav-acciones .idioma a:not(.activo) span{ display:none }
  .nav-acciones .idioma a:not(.activo){ padding:5px 6px }
  .nav-acciones .btn{ padding:10px 12px }
}