/* =========================
   Setup Document (Light App UI) - ROJO (10% accent)
   Regla 60/30/10:
   60%  -> --bg / --surface (claros cálidos)
   30%  -> --surface-2 / bordes (neutros suaves)
   10%  -> --accent (rojo suerte / CTA)
========================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,XOPQ,XTRA,YOPQ,YTDE,YTFI,YTLC,YTUC@8..144,100..1000,96,468,79,-203,738,514,712&display=swap');

*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  box-sizing: border-box;
  font-family: "Roboto Flex", sans-serif;;
  transition: all .2s linear;
}

:root{
  --bg: #FFF1F1;          /* más rojo suave */
  --surface: #FFFFFF;

  --surface-2: #F6F0F0;
  --border: #E9D4D4;
  --muted: #6B7280;
  --text: #111827;

  --accent: #B91C1C;      /* rojo más serio */
  --accent-2: #EAB308;    /* dorado más “festivo” */
  --success: #16A34A;

  --shadow-sm: 0 6px 18px rgba(17, 24, 39, 0.08);
  --shadow-md: 0 10px 30px rgba(17, 24, 39, 0.12);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --fontStyle1:"Noto Sans", sans-serif;
  --focus: rgba(185, 28, 28, .35);
  --accent-soft: rgba(185, 28, 28, .12);
}


html{
  scroll-behavior: smooth;
  overflow-x: hidden;
  scroll-padding-top: 6rem;
}

body{
  overflow-x: hidden;
  color: var(--text);
  background:linear-gradient(0, #2b1b1b, #351414);
}

section{
  min-height: 100svh;
}

/* Mejor UX: animaciones suaves solo donde toca */
a, button, 
.btnNavbar, 
.closeBtnIntro, 
.navbar, 
.idioma 
.selector span{
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}

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




.letsUp{
  position: fixed;
  right: -1rem;
  bottom: .5rem;
  z-index: 100;
  height: 2.5rem;
  width: 2.5rem;
  background:#555;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.5rem;
  color: #fff;
  border: 1px solid ;
  backdrop-filter: blur(5px);
  border: 1px solid #fff;
  box-shadow: 0 7px 18px rgba(0,0,0, .3);
  visibility: hidden;
  pointer-events: none;
  transition: .2s linear;
}
.letsUp i{
  rotate:180deg;
}

.letsUp.active{
  visibility: visible;
  pointer-events: all;
  right: 1rem;
}
.letsUp.active i{
  rotate: 0deg;
}





/* =========================
   Reservas (arriba)
========================= */
/* .reservasPhone{
  position: fixed;
  top: .75rem;
  right: .75rem;
  z-index: 60;
  border-radius: 7rem;
  padding: clamp(.2rem, 2vw, .3rem);
  background: rgba(128, 128, 128, 0.5);
  border: 2px solid #ddd;
  box-shadow: inset 0 0 10px rgba(253, 253, 253, 0.78);
  backdrop-filter: blur(5px);
  font-weight: 100;
}
.reservasPhone a{
  display: flex;
  align-items: center;
  justify-content: center;
} */
/* .reservasPhone a i{
  height: 2.2rem;
  width: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ff4500;
  color: #eee;
  font-size: 1rem;
  border: 1px solid #ff4500;
}
.reservasPhone a .numText{
  color: #fff;
  padding: .5rem;
  font-weight: 400;
}
.reservasPhone a .reservasText{
  color: #fff;
  font-size: clamp(.7rem, 2vw, 1rem);

} */






.reservasPhone{
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 60;
  border-radius: 7rem;
  padding:.6rem;
  background:radial-gradient(80% 170% at 50% 120%,#ffae00 0%,#ffa600 30%,rgba(216, 120, 10, 0.514) 55%, transparent 75%),rgba(207, 63, 10, 0.426);
  border: 1px solid #fdcb6e;
  font-weight: 100;
  backdrop-filter: blur(7px);
  box-shadow: inset 0 0 10px rgba(185, 117, 28, 0.781);
  filter: drop-shadow(0 5px 10px rgba(0,0,0, .6));
}
.reservasPhone:hover{
  scale: .995;
  box-shadow: inset 0 0 30px #ff9900;
  background:radial-gradient(80% 170% at 50% 120%,#ffc400 0%,#ffd51b 30%,rgba(216, 120, 10, 0.514) 55%, transparent 75%),rgba(207, 63, 10, 0.426);
  filter: drop-shadow(0 5px 10px rgba(0,0,0, .75));
  transform: translatey(1px);
}
.reservasPhone:hover a i{
  rotate: 360deg;
}



.reservasPhone a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.reservasPhone a i{
  height: 1.7rem;
  width: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff7000;
  background: #fff;
  border-radius: 50%;
  font-size: .9rem;
}
.reservasPhone a .numText{
  color: #fff;
  font-weight: 600;
}
.reservasPhone a .reservasText{
  color: #fff8d1;
  font-weight: 400;
}

/* Botón teléfono flotante */





.asisPhone{
  position: fixed;
  bottom: .75rem;
  left: .75rem;
  z-index: 55;
  cursor: pointer;
  height: 3.75rem;
  width: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.asisPhone i{
  color: var(--success);
  font-size: 1.35rem;
}

.asisPhone:hover{
  transform: translateY(-2px);
}






/* =========================
   Intro (moderno, claro)
========================= */
.intro{
  position: fixed;
  inset: 0;
  opacity: 1;
  z-index: 9999;
  padding: 2rem 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  /* background: url(/resources/background.webp) no-repeat center / cover; */
  cursor: default;
  background: linear-gradient(to bottom, #1b0c0c, #1b1010);
  visibility: visible;
  pointer-events: all;
  row-gap: .5rem;
}

/* .intro::before{
  content:"";
  position:absolute;
  inset:0;
  backdrop-filter: blur(6px);
} */

.intro.hide{
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.intro .heading{
  position: relative;
  width: 100%;
  padding: 1.1rem 1rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: linear-gradient(0, #330f0f, #411212);
  border: 1px solid #631111;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.intro .heading .text1{
  font-size: clamp(2rem, 3vw, 3rem);
  color: #fff;
  font-weight: 400;
  display:flex;
  gap:.5rem;
  align-items:center;
}


.intro .heading .typeText{
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  color: #cccccc;
  margin-top: .25rem;
  font-weight: 100;
}



.intro .heading .text2{
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  color: #fff;
  margin-top: .35rem;
  font-weight: 400;
  padding: 0rem .7rem;
  border: 1px solid #501818;
  border-radius: 1.5rem;
  background: linear-gradient(45deg, #330f0f, #411212);
  box-shadow: 0 5px 12px rgba(29, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.intro .heading .text2 i{
  color: #ff9900;
  font-size: clamp(1.5rem, 5vw, 3rem);
}

.intro .heading .text2 span{
  color: #ff4500;
}

.intro .container{
  width: 100%;
}
.intro .container a{
  border-radius: 5rem;
  display: flex;
  overflow: hidden;
  background: #ff4500;
  align-items: center;
  border: 1px solid #333;
  width: max-content;
  padding: 0 2.2rem 0 0;
  position: relative;
  gap: .2rem;
  border: 3px solid #ff4500;
}
.intro .container a .fa-location-dot{
  height: 3.2rem;
  width: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff7442;
  color: #fff;
  font-size: 1.2rem;
  border-radius: 50%;
}


.intro .container a .chd1{
  position: absolute;
  right:.3rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .8rem;
}

.intro .container a .chd2{
  position: absolute;
  right:.7rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: .5;
  font-size: .8rem;
}

.intro .container a .chd3{
  position: absolute;
  right:1.1rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: .2;
  font-size: .8rem;
}

.intro .container a:hover{
  background: #ff5e00;
}
.intro .container a:hover span{
  color: #fff;
}

.intro .container a:hover .fa-location-dot{
  background: #ff9900;
}



.intro .container a span{
  font-size: clamp(.6rem, 1.6vw, 1.1rem);
  color: #eee;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


.intro .closeBtnIntro{
  position: relative;
  background:#fff;
  color: #ff4500;
  cursor: pointer;
  font-weight: 500;
  margin-top: auto;
  outline: none;
  border-radius: 3rem;
  display: flex;
  align-items:center;
  gap: 1rem;
  justify-content: center;
  padding: 0 2rem 0 0;
  font-size: 1.5rem;
  font-weight: 400;
  outline: 3px solid #444;
  box-shadow: 0 5px 12px #000;
}
.intro .closeBtnIntro i{
  font-size: 2rem;
  padding: .2rem;
  margin-right: auto;
  color: #ff0000;
}




.intro .closeBtnIntro:hover i{
  animation: moveMe .8s linear infinite;
  transform: rotate(360deg);
}


@keyframes moveMe{
  0%{
    transform: translateX(0);
  }

  25%{
    transform: translateX(-2px);
  }
  50%{
    transform: translateX(0);
  }
  75%{
    transform: translateX(1px);
  }
  100%{
    transform: translateX(0);
  }
}

.avisoVac{
  z-index: 15;
  width: 100%;
  display:none;
  flex-direction: column;
  border-radius: 1rem;
  background: linear-gradient(0, #5f0000, #7a0000);
  padding: .5rem;
  row-gap: .3rem;
}
.avisoVac p{
  padding: .5rem;
  /* background: linear-gradient(45deg,#a00000,#c20000 ); */
  border-radius: .7rem;
  border: 1px solid #922c2c;
  color: #ffffff;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  width: 100%;
  text-align: left;
  box-shadow: 0 5px 12px rgba(0,0,0, .180);
}
.avisoVac p i{
  font-size: clamp(1.5rem, 2vw, 2rem);
  color: #9afa00;
}
.avisoVac p span{
  color: #f1f509;
  font-weight: 800;
}



/* =========================
   Cambio de Idioma (pill)
========================= */
.idioma{
  position: fixed;
  bottom: .5rem;
  left: .5rem;
  /* transform: translateX(-50%); */
  width: max-content;
  z-index: 100;
  cursor: default;
}

.idioma .selector{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .25rem;
  background: #333;
  border: 1px solid #8a8a8a;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.idioma .selector span{
  padding: .25rem .5rem;
  border-radius: 999px;
  cursor: pointer;
  color: #ddd;
  font-size: .8rem;
  font-weight: 300;
  background: #666;
}
.idioma .selector span:hover{
  background: #777;
  color: #eee;
}

.idioma .selector span.active{
  background: #fff;
  color: #000;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(200,30,30,.14);
}

/* =========================
   Menú Diario (cards + tipografía)
========================= */
.menuDiario{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  cursor: default;
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 3% 2rem;
}

.menuDiario.notShow{ 
  display: none; 
}




.menuDiario .heading{
  width: min(1100px, 100%);
  text-align: center;
  margin-top: 3.2rem;
  margin-bottom: 1.25rem;
  background: linear-gradient(45deg, #420404, #700000, #500a0a);
  border: 1px solid #852a2a;
  border-radius: var(--radius-lg);
  box-shadow: rgba(0,0,0, .780);
  padding: 1.25rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1rem;
}

.menuDiario .heading .menuPriceToday{
  font-size: clamp(.9rem, 2vw, 1.1rem);
  color: #fff;
}


.menuDiario .heading h1{
  font-family: var(--fontStyle1);
  font-size: clamp(2.8rem, 5vw, 4.4rem);
  color: #eee;
}


.menuDiario .heading .sectMenu{
  margin-top: .35rem;
  letter-spacing: -1px;
  box-shadow: 0 8px 18px rgba(0,0,0, .280);
  border: 1px solid #861e1e;
  padding: .5rem 1rem;
  border-radius: 1.7rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .2rem;
}

.menuDiario .heading .sectMenu p{
  color: #fff;
  font-weight: 600;
  font-size: clamp(3rem, 6vw, 5rem);
  text-shadow: 0 5px 5px #491313;
}
.menuDiario .heading .sectMenu .symbolMon{
  color: #ccc;
  font-weight: 200;
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-family: var(--fontStyle1);
}

.menuDiario .heading .sectMenu .menuPriceToday{
  width: 100%;
}



.menuDiario .heading .infoMenu{
  margin-top: .45rem;
  font-style: oblique;
  font-size: clamp(.9rem, 2vw, 1.3rem);
  color: #fff;
}

.menuDiario .heading .daysPrice{
  color: #ddd;
  margin-top: .6rem;
  font-size: clamp(.9rem, 2vw, 1.1rem);
}

.menuDiario .heading .daysPrice i{
  font-weight: 300;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: #fdd524;
  font-style: normal;
}
.menuDiario .heading .daysPrice strong{
  font-weight: 300;
}




.introPlatos{
  color: #fff;
  text-align: center;
  font-weight: 100;
  font-size: clamp(2.5rem, 3vw, 4rem);
  padding:.3rem 1rem;
  background:linear-gradient(0, #330e0e, #333);
  border-left: 1px solid #555;
  border-top: 1px solid #555;
  border-right: 1px solid #555;
  margin-top: 1.5rem;
  border-radius: 1.5rem 1.5rem 0 0;
  width: 90%;
}



.menuDiario .postres,
.menuDiario .segundoPlato,
.menuDiario .primerPlato{
  width: 100%;
  padding: 1rem;
  border-radius: var(--radius-lg);
  background: #8a0000;
  border: 1px solid #ac5252;
  box-shadow: 0 5px 15px rgba(0,0,0, .7);
  margin-bottom: .5rem;
  display: flex;
  flex-direction: column;
  row-gap: .5rem;
}

.menuDiario .postres h1,
.menuDiario .segundoPlato h1,
.menuDiario .primerPlato h1{
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  font-weight: 400;
  font-family: var(--fontStyle1);
  color: #fff;
  width: max-content;
  padding: 0 !important;
}

.menuDiario .postres .cardPostres,
.menuDiario .segundoPlato .cardSegundoPlato,
.menuDiario .primerPlato .cardPrimerPlato{
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: .65rem;
  /* background:linear-gradient(0, #2b0000, #550000); */
  padding: .5rem;
  border-radius: 1rem;
  /* box-shadow: 0 5px 12px rgba(0,0,0, .480); */
  /* border: 1px solid #9b4848; */
}

.menuDiario .postres .cardPostres li,
.menuDiario .segundoPlato .cardSegundoPlato li,
.menuDiario .primerPlato .cardPrimerPlato li{
  list-style-position: inside;
  font-weight: 400;
  font-size:clamp(1.2rem, 3vw, 1.7rem);
  text-transform: capitalize;
  border: 1px solid #913434;
  background:linear-gradient(0, #5e0707, #750404);
  padding: .8rem .85rem;
  border-radius: var(--radius-md);
  color: #fffbc1;
  /* box-shadow: 0 3px 8px rgba(0,0,0, .480); */
}

.menuDiario .postres .cardPostres .descriptionPostreCard,
.menuDiario .segundoPlato .cardSegundoPlato li .descriptionSegundoPlato,
.menuDiario .primerPlato .cardPrimerPlato li .descriptionPrimerPlato{
  margin-top: .35rem;
  font-weight: 300;
  font-size: .9rem;
  color: #ccc;
}

/* =========================
   Encabezados / bloques
========================= */
.bocadilloText{
  margin-top: 1.25rem;
  background: transparent;
  text-align: center;
  padding: 1.25rem 3% .5rem;
}

.bocadilloText p{
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #eee;
  font-weight: 500;
  letter-spacing: -.2px;
}

.suplementos{
  min-height: 15vh;
  padding: 1rem 1rem;
  border: 1px solid var(--border);
  background: var(--surface);
  width: min(520px, calc(100% - 6%));
  margin: 1rem 3% 1.25rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: default;
}

.suplementos h2{
  font-weight: 800;
  color: var(--text);
}

.suplementos p{
  font-style: oblique;
  color: var(--muted);
  margin-top: .25rem;
}

.suplementos h4{
  margin-top: .65rem;
  color: var(--accent);
  font-size: 1.25rem;
}

.especialBocadillo{
  min-height: 18vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 3%;
  cursor: default;
}

.especialBocadillo h1{
  width: min(900px, 100%);
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  text-align: center;
  color: rgba(17,24,39,.85);
  font-weight: 850;
}

.especialBocadillo h1 span{
  margin-top: .25rem;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 950;
  color: var(--accent-2);
}

.especialBocadillo h1 span strong{
  font-weight: 850;
  font-size: 1.25rem;
  color: rgba(200,30,30,.85);
}

/* =========================
   Bocadillos (grid card app)
========================= */
.bocadillosFrios,
.bocadillosCalientes{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .75rem;
  padding: 1.75rem 3% 2rem;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.bocadillosFrios{
  background: linear-gradient(180deg, var(--bg), rgba(244,245,247,.7));
}

.bocadillosCalientes{
  background: var(--bg);
}

.bocadillosFrios h1,
.bocadillosCalientes h1{
  width: min(1100px, 100%);
  font-size: clamp(2.8rem, 5vw, 4.6rem);
  font-weight: 500;
  font-family: var(--fontStyle1);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: .35rem;
  margin-bottom: .75rem;
}

.bocadillosFrios .containerFrios,
.bocadillosCalientes .containerCalientes{
  width: min(1100px, 100%);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  row-gap: 1.25rem;
  cursor: default;
}

/* Card común */
.bocadillosFrios .containerFrios .bocadilloFrio,
.bocadillosCalientes .containerCalientes .bocadilloCaliente{
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.bocadillosFrios .containerFrios .bocadilloFrio:hover,
.bocadillosCalientes .containerCalientes .bocadilloCaliente:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(200,30,30,.25);
}

.bocadillosFrios .containerFrios .bocadilloFrio h2,
.bocadillosCalientes .containerCalientes .bocadilloCaliente h2{
  background: linear-gradient(135deg, rgba(200,30,30,.10), rgba(255,255,255,.0));
  color: var(--text);
  text-align: center;
  padding: .75rem 1rem;
  font-weight: 900;
  width: 100%;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  border-bottom: 1px solid var(--border);
}

.bocadillosFrios .containerFrios .bocadilloFrio img,
.bocadillosCalientes .containerCalientes .bocadilloCaliente img{
  width: 100%;
  height: 10.5rem;
  object-fit: cover;
  background: var(--surface-2);
}

.bocadillosFrios .containerFrios .bocadilloFrio .wideCont,
.bocadillosCalientes .containerCalientes .bocadilloCaliente .wideCont{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
}

.bocadillosFrios .containerFrios .bocadilloFrio .wideCont p,
.bocadillosCalientes .containerCalientes .bocadilloCaliente .wideCont p{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .15rem;
  padding: .65rem .25rem;
  font-size: 1rem;
  background: rgba(244,245,247,.78);
  color: rgba(17,24,39,.7);
  font-weight: 750;
}

.bocadillosFrios .containerFrios .bocadilloFrio .wideCont p:nth-child(1),
.bocadillosCalientes .containerCalientes .bocadilloCaliente .wideCont p:nth-child(1){
  border-right: 1px solid var(--border);
}

.bocadillosFrios .containerFrios .bocadilloFrio .wideCont p span:nth-child(1),
.bocadillosCalientes .containerCalientes .bocadilloCaliente .wideCont p span:nth-child(1){
  font-weight: 900;
  color: rgba(17,24,39,.85);
}

.bocadillosFrios .containerFrios .bocadilloFrio .wideCont p span:nth-child(2),
.bocadillosCalientes .containerCalientes .bocadilloCaliente .wideCont p span:nth-child(2){
  font-weight: 950;
  font-size: 1.4rem;
  font-style: oblique;
  color: var(--accent);
}

.bocadillosCalientes .containerCalientes .bocadilloCaliente .wideCont p span:nth-child(2){
  color: var(--accent-2);
}

.bocadillosFrios .containerFrios .bocadilloFrio .wideCont p span strong,
.bocadillosCalientes .containerCalientes .bocadilloCaliente .wideCont p span strong{
  font-weight: 900;
  font-size: 1rem;
}

/* =========================
   Navbar (drawer moderno)
========================= */
.navbar{
  position: fixed;
  inset: 0;
  left: -100%;
  z-index: 100;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  width: 100%;
  background:#111;
  backdrop-filter: blur(5px);
  cursor: default;
  padding: 1rem;
  gap: .2rem;
  visibility: hidden;
  pointer-events: none;
  transition: .2s ease-in-out;
}

.navbar.show{ 
    visibility: visible;
    pointer-events: all;
    left: 0;
}


.navbar .contLinksNav{
  display: flex;
  flex-direction: column;
  row-gap: .2rem;
  border-radius: .7rem;
  width: 100%;
}
.navbar .contLinksNav a{
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .3rem;
  background: #222;
  overflow: hidden;
  border-radius: .7rem;
}
.navbar .contLinksNav a:hover{
  background: #333;
}

.navbar .contLinksNav a i{
  height: 2rem;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4b3027;
  border-radius: .5rem;
  color:#ff4400;
} 

.navbar .contLinksNav a span{
  color: #fff;
  display: flex;
  align-items: center;
  gap: .2rem;
  font-weight: 300;
  font-size: clamp(.8rem, 2vw, 1.1rem);
}


.navbar .horarios{
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding:.5rem;
  background: #333;
  border: unset;
  border-radius: .5rem;
}

.navbar .horarios .day{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .25rem;
  padding: .5rem;
  background: #555;
  border-radius: .5rem;
  flex: 1 1 7rem;
  border: unset;
  color: rgba(17,24,39,.7);
}

.navbar .horarios .day p{
  font-weight: 400;
  font-size: clamp(.8rem, 2vw, 1rem);
  color: #ddd;
}

.navbar .horarios .day h4{
  font-weight: 300;
  color: #c1fcd7;
  font-size: clamp(.8rem, 2vw, 1rem);
}

.navbar .horarios .day.today{
    color: var(--text);
    background:radial-gradient(80% 170% at 50% 100%,#ffce65 0%,#ffa600 30%,rgba(219, 169, 32, 0.349) 55%, transparent 75%),rgba(235, 134, 4, 0.426);
    /* border:1px solid #dfa855; */
    box-shadow: 0 5px 15px rgba(163, 130, 22, 0.658);
    border-radius: 1rem;
}
.navbar .horarios .day.today p{
    color: #fff;
    font-weight: 200;
}
.navbar .horarios .day.today h4{
    color: #fff;
    font-weight: 900;
}

/* .navbar .navbar span.closeNavbar{
  cursor: pointer;
  margin-top: auto;
  padding: .9rem 1.3rem;
  width: min(320px, 100%);
  text-align: center;
  color: #fff;
  font-weight: 900;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), #7F1D1D);
  box-shadow: var(--shadow-md);
  margin-left: 50%;
  transform: translateX(-50%);
} */










/* horarios Footer */
.horarios{
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding:.5rem;
  margin-top: .6rem;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.horarios .day{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .25rem;
  padding: .7rem .75rem;
  background: rgba(244,245,247,.88);
  border-radius: var(--radius-md);
  flex: 1 1 7rem;
  border: 1px solid var(--border);
  color: rgba(17,24,39,.7);
}

.horarios .day p{
  font-weight: 300;
  font-size: clamp(.6rem, 2vw, .9rem);
  color: #999;
}

.horarios .day h4{
  font-weight: 800;
  color: #999;
  font-size: clamp(.6rem, 2vw, .9rem);
}

.horarios .day.today{
    color: var(--text);
    background: rgba(22,163,74,.12);
    border-color: rgba(22,163,74,.35);
    box-shadow: 0 10px 25px rgba(22,163,74,.12);
}
.horarios .day.today p{
    color: #000;
    font-weight: 900;
}
.horarios .day.today h4{
    color: #000;
    font-weight: 900;
}

.navbar span.closeNavbar{
  cursor: pointer;
  margin-top: auto;
  padding: .7rem 1.3rem;
  width: min(320px, 100%);
  text-align: center;
  color: #333;
  font-weight: 600;
  border-radius: 999px;
  background:#fff;
  box-shadow: var(--shadow-md);
  margin-left: 50%;
  transform: translateX(-50%);
  letter-spacing: 1px;
  font-family: var(--fontStyle1);
}




/* Botón abrir navbar */
.btnNavbar{
  position: fixed;
  top: .5rem;
  right: .5rem;
  z-index: 55;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5rem;
  box-shadow: 0 5px 12px rgba(0,0,0, .780);
  overflow: hidden;
  padding:.5rem .5rem .5rem 1rem;
  gap: .7rem;
  border: 1px solid #ccc;
  background: #fff;
}

.btnNavbar i{
  font-size: 1.3rem;
  color: #fff;
  height: 2rem;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
  border-radius: 50%;
}
.btnNavbar span{
  color: #444;
  font-weight: 600;
}



/* =========================
   Footer (claro, limpio)
========================= */
.footer{
  min-height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  cursor: default;
  background: transparent;
  margin-top: 1.5rem;
  margin-bottom: 5rem;
  padding: 0 3% 2rem;
}

.footer .heading{
  width: min(1100px, 100%);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
}

.footer .heading p{
  color: rgba(200,30,30,.85);
  font-size: 1rem;
  font-weight: 800;
}

.footer .heading span{
  color: var(--text);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 950;
  letter-spacing: -0.5px;
}

.footer a{
  width: min(1100px, 100%);
  margin-top: .75rem;
  color: rgba(17,24,39,.8);
  text-align: center;
  padding: .75rem .9rem;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.footer a i{
  color: var(--accent);
}

.footer a:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: rgba(200,30,30,.22);
}

/* =========================
   Responsive
========================= */


@media(max-width:990px){
  .intro .closeBtnIntro i{
    animation: moveMe .8s infinite;
  }
}




@media (max-width: 640px){
  .intro .container a{
    flex: 1 1 100%;
  }

  .intro .container a{
    width: 100%;
  }

  .menuDiario{
    padding: 1rem 3% 1.5rem;
  }

  .menuDiario .postres,
  .menuDiario .segundoPlato,
  .menuDiario .primerPlato{
    padding: 1rem;
  }

  .bocadillosFrios .containerFrios,
  .bocadillosCalientes .containerCalientes{
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }
}