/* Reservar aspect-ratio de imágenes hero para evitar CLS */
#nuestras-lasanas img.pcvew { aspect-ratio: 1280 / 790; }
#nuestras-lasanas img.celvew { aspect-ratio: 920 / 1491; }

#precios-lasagnas img.pcvew { aspect-ratio: 1280 / 860; }
#precios-lasagnas img.celvew { aspect-ratio: 920 / 1251; }

#porciones-dimensiones img.pcvew { aspect-ratio: 1024 / 632; }
#porciones-dimensiones img.celvew { aspect-ratio: 900 / 1458; }

#sabores img.pcvew { aspect-ratio: 1280 / 692; }
#sabores img.celvew { aspect-ratio: 920 / 1325; }

img { aspect-ratio: attr(width) / attr(height); }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, a, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, select, button {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-family: inherit;
  font-size: 100%;
  background: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
table { border-collapse: collapse; border-spacing: 0; }

html {
  overflow-x: hidden;
  max-width: 100%;
  min-height: 100%;
  width: 100%;
  min-width: 100%;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth; /* Reemplaza niceScroll */
}

body {
  background-color: #000;
  color: rgba(255,255,255,.50);
  overflow-x: hidden;
  height: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 100%;
  overflow: hidden;
  background-image: url("../images/fondocook.avif");
  background-attachment: fixed;
  margin: 0;
  padding: 0;
}

a img { cursor: pointer; z-index: 4; position: relative; }
h6 a { cursor: pointer; z-index: 4; position: relative; }
p img { margin: 0; }
p.lead { color: #777; }
blockquote, blockquote p { color: #777; }
blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; }
blockquote cite { display: block; color: #555; }
blockquote cite a,
blockquote cite a:visited { color: #555; }
hr { border: solid #323a3d; border-width: 1px 0 0; clear: both; margin: 0 10px; height: 0; position: relative; }

a, a:visited { text-decoration: none; }
a:hover, a:focus { color: #e74c3c; }
p a, p a:visited { text-decoration: none; }
a:focus { outline: none; }
a { color: #FFFFFF; }
a:hover { color: #FF0A00; }

ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
  background: #363636;
  margin-top: 10px;
  border: none;
  color: #dfdfdf;
  display: inline-block;
  cursor: pointer;
  padding: 15px 25px;
  transition: all .3s ease-out;
  width: 100%;
}
.button:hover, button:hover,
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
  color: #e74c3c;
  background: #292929;
}
.button:active, button:active,
input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active {
  color: #e74c3c;
}
.button.full-width, button.full-width,
input[type="submit"].full-width, input[type="reset"].full-width, input[type="button"].full-width {
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center;
}

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

.remove-bottom { margin-bottom: 0 !important; }
.half-bottom   { margin-bottom: 10px !important; }
.add-bottom    { margin-bottom: 20px !important; }
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
::selection      { background: rgba(0,0,0,.2); }
::-moz-selection { background: rgba(0,0,0,.2); }

/* =========================================================
   NAVEGACIÓN (Menú lateral con JS vanilla)
   ========================================================= */

.navegador-uno {
  z-index: 88;
  margin: 7px 22px;
  position: fixed;
  top: 0;
  right: 0;
  cursor: pointer;
  display: block;
  background: none;
  border: none;
  padding: 0;
}
.navegador-dos {
  z-index: 66;
  margin: 7px 22px;
  position: relative;
  top: 0;
  right: 0;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.botonesnav {
  z-index: 66;
  position: fixed;
  top: 0;
  right: -400px;
  text-align: right;
  background-color: #07FF00;
  padding-bottom: 33px;
  border-bottom-left-radius: 100px;
  transition: all .3s ease-in-out;
}
/* JS activa esta clase al abrir el menú */
.botonesnav.activo { right: 0; }

.btons {
  font-size: 17px;
  z-index: 66;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  position: relative;
  top: 0;
  right: 0;
  cursor: pointer;
  margin: 8px 22px;
  font-weight: 700;
  color: #000;
  letter-spacing: -0.3px;
  transition: all .3s ease-in-out;
}
.btons:hover { color: #FF0B00; letter-spacing: 0.2px; }

/* Encabezados */
h1, h2, h3, h4 {
  color: rgba(98,98,98,.6);
  text-align: center;
  display: inline-block;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  font-size: 12px;
  font-weight: 100;
  line-height: 11px;
}
h5 {
  font-size: 17px;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  color: #FFF;
  line-height: 17.5px;
  font-weight: 500;
}
h6 {
  font-size: 14px;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  color: #FFF;
}

/* =========================================================
   WHATSAPP FLOTANTE
   ========================================================= */
.wh {
  z-index: 9999999;
  position: fixed;
  margin-right: 30px;
  margin-left: auto;
  margin-top: auto;
  margin-bottom: 18px;
  bottom: 18px;
  right: 0;
  left: auto;
  width: 185px;
  height: auto;
  display: block;
  transition: all .44s ease-in-out;
}
.wh a {
  width: 100%;
  height: auto;
  max-width: 222px;
  cursor: pointer;
  transition: all .35s ease-in-out;
}
.wh a img {
  filter: contrast(200%);
  width: 100%;
  height: auto;
  max-width: 222px;
  cursor: pointer;
  transition: all .35s ease-in-out;
}
.wh a img:hover { filter: contrast(150%); transform: scale(1.2); }

/* =========================================================
   BOTONES "RESERVA TUS LASAÑAS"
   ========================================================= */
.reserva {
  z-index: 3;
  position: relative;
  width: 350px;
  height: 106px;
  background-image: url("../images/reserva-tus-lasagnas.avif");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
  transition: all .2s ease-in-out;
}
.reserva img {
  cursor: pointer;
  margin: auto;
  opacity: 0;
  width: 350px;
  height: 106px;
}
.reserva img:hover { opacity: 1; width: 364px; }

/* =========================================================
   HEADER / LOGO
   ========================================================= */
#menu-wrap {
  position: fixed;
  padding-bottom: 10px;
  width: 100%;
  z-index: 1000;
  top: 0;
  left: 0;
}
.menu-back { height: 0; background-color: rgba(0,0,0,0); }
.cbp-af-header { transition: all .5s ease-out; }
.cbp-af-header.cbp-af-header-shrink { height: 0; background-color: rgba(0,0,0,0); }
.cbp-af-header.cbp-af-header-shrink .logo {
  width: 123px;
  height: 123px;
  background: url('../images/logo.avif') no-repeat center center;
  background-size: 123px auto;
  transition: all .5s ease-out;
}
.logo {
  position: absolute;
  width: 220px;
  height: 220px;
  z-index: 10000;
  left: 10px;
  top: 10px;
  background: url('../images/logo.avif') no-repeat center center;
  background-size: 220px auto;
}

/* =========================================================
   HERO + SLIDER
   ========================================================= */
#home {
  background-image: url("../images/fondocook.avif");
  background-size: 199px auto;
  position: relative;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
  z-index: 2;
  height: 100vh;          /* altura por defecto (JS la ajusta) */
  min-height: 500px;      /* evita colapso en móvil */
}

#wrapper-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: background-image 1s ease-in-out;
  z-index: 1;
}

.big-text {
  position: absolute;
  top: 50%;
  margin-top: -10px;
  width: 100%;
  text-shadow: 0 0 15px rgba(0,0,0,.3);
  text-align: center;
  color: #ededed;
  z-index: 20;
}
.big-text span { background: rgba(0,0,0,.3); padding: 15px 30px; }
.small-text {
  position: absolute;
  top: 50%;
  margin-top: 3px;
  width: 100%;
  text-shadow: 0 0 5px rgba(0,0,0,.1);
  text-align: center;
  line-height: 23px;
  z-index: 20;
}
.small-text img { width: 100%; max-width: 400px; }

.papa { text-align: center; margin: 33px auto; width: 200px; max-width: 140px; }
.papa img { width: 200px; max-width: 140px; }

.prev {
  top: 50%; margin-top: 10px;
  position: absolute; cursor: pointer; opacity: .4;
  background: url('../images/arrow-left.avif') no-repeat center center;
  transition: all .2s ease-out;
  left: 150px; width: 31px; height: 58px; z-index: 100000;
}
.next {
  top: 50%; margin-top: 10px;
  position: absolute; cursor: pointer; opacity: .4;
  background: url('../images/arrow-right.avif') no-repeat center center;
  transition: all .2s ease-out;
  right: 150px; width: 31px; height: 58px; z-index: 100000;
}
.prev:hover, .next:hover,
.prev:active, .next:active { opacity: .7; }

.just_pattern {
  background-image: url("../images/fondocook.avif");
  background-size: 134px auto;
  background-repeat: repeat;
  position: fixed;
  opacity: .04;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.scroll-btn {
  z-index: 9999;
  position: absolute;
  color: #fff;
  text-align: center;
  bottom: 16px;
  left: 50%;
  margin-left: -30px;
  transition: all .35s ease-in-out;
  width: 60px;
  height: 40px;
  background: url('../images/arrow-down.avif') no-repeat center bottom;
  background-size: 30px 16px;
  opacity: .8;
  cursor: pointer;
  animation: arrows 3.8s infinite;
  animation-delay: 1s;
}

/* =========================================================
   SECCIONES
   ========================================================= */
#nuestras-lasanas {
  width: 98%;
  border-top: double 1px;
  border-color: #FF0B00;
  margin: 0 auto;
  padding: 1%;
  padding-top: 40px;
  background-image: url("../images/fondo.avif");
  background-size: 199px auto;
  background-attachment: fixed;
  min-height: 100%;
  text-align: center;
}
#nuestras-lasanas img {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  height: auto;
  max-width: 1280px;
}

#precios-lasagnas {
  width: 98%;
  text-align: center;
  margin: 0 auto;
  border-top: double 1px;
  border-color: #43DC01;
  padding: 1%;
  padding-top: 10px;
  background-image: url("../images/fondo2.avif");
  background-size: 199px auto;
  background-color: black;
  background-attachment: fixed;
}
#precios-lasagnas img {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  height: auto;
  max-width: 1280px;
}

#porciones-dimensiones {
  margin: 0 auto;
  width: 98%;
  border-top: double 1px;
  border-color: #FF0B00;
  padding: 1%;
  text-align: center;
  padding-top: 40px;
  background-image: url("../images/fondo.avif");
  background-size: 199px auto;
  background-color: black;
  background-attachment: fixed;
}
#porciones-dimensiones img {
  text-align: center;
  width: 100%;
  height: auto;
  max-width: 1280px;
}

#sabores {
  width: 98%;
  margin: 0 auto;
  border-top: double 1px;
  border-color: #FF0B00;
  padding: 1%;
  padding-top: 40px;
  text-align: center;
  background-image: url("../images/fondo2.avif");
  background-size: 199px auto;
  background-color: black;
  background-attachment: fixed;
}
#sabores img {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  height: auto;
  max-width: 1280px;
}

#opiniones {
  z-index: 4;
  position: relative;
  margin: 0 auto;
  border-top: double 1px;
  border-color: #FF0B00;
  text-align: center;
  padding: 13px;
  padding-top: 40px;
  background-image: url("../images/fondocook2.avif");
  background-size: 199px auto;
  background-color: white;
  background-attachment: fixed;
}
#opiniones img {
  text-align: center;
  margin: 22px auto 33px;
  max-width: 350px;
  width: 100%;
  height: auto;
}

#contacto {
  background-image: url("../images/fondocook.avif");
  background-attachment: fixed;
  border-bottom: #45D70A 6px solid;
  text-align: center;
  padding: 13px;
  padding-bottom: 33px;
  padding-top: 66px;
  margin: 0 auto;
}
#contacto img {
  text-align: center;
  margin: 0 auto;
  max-width: 750px;
  max-height: 650px;
}

/* =========================================================
   RESEÑAS
   ========================================================= */
.reviews-container {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  text-align: left;
}
.paco { margin-top: 11px; padding-left: 11px; }
.review {
  max-width: 45%;
  width: 45%;
  color: #898989;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin: 20px 11px;
  padding-left: 15px;
  border-left: dotted 1px;
  border-color: #FF0B00;
  border-bottom: none;
  display: inline-block;
  vertical-align: top;
}
.review-author { font-weight: bold; display: flex; align-items: center; }
.review-author .caja img {
  width: 50px; height: 50px;
  max-width: 50px; max-height: 50px;
  min-width: 50px; min-height: 50px;
}
.caja {
  width: 50px; height: 50px;
  max-width: 50px; max-height: 50px;
  min-width: 50px; min-height: 50px;
  padding-right: 7px;
  margin-top: -25px;
}
.review-rating { color: #FFCE00; margin-top: 8px; margin-left: 75px; }
.review-text  { margin-top: 5px; line-height: 1.5; }

.coco {
  opacity: 1;
  margin: 0 auto;
  width: 100%;
  height: auto;
  max-width: 300px;
  z-index: 1;
  position: relative;
  cursor: pointer;
}
.coco:hover { filter: contrast(130%) saturate(200%); opacity: .8; }

.btnver {
  z-index: 1;
  position: relative;
  width: 100%;
  max-width: 256px;
  height: auto;
  margin: 0 auto;
  transition: all .35s ease-in-out;
}
.btnver img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  opacity: 1;
}
.btnver:hover {
  background: url("../images/opiniones5google2.avif") no-repeat;
  top: 45px;
  background-size: 246px auto;
}
.btnver:hover img { opacity: 0; }

/* =========================================================
   VISIBILIDAD PC / MÓVIL
   ========================================================= */
.pcvew { display: inline-block; width: 100%; }
.celvew { display: none; }

.botonio img { width: 100%; height: auto; max-width: 333px; cursor: pointer; transition: all .35s ease-in-out; }
.botonino img:hover { filter: contrast(200%); transform: scale(1.2); }

/* =========================================================
   FOOTER
   ========================================================= */
#footer {
  position: relative;
  margin: 0 auto;
  width: 100%;
  background: #000;
  padding-top: 60px;
  padding-bottom: 35px;
  color: rgba(255,255,255,.50);
}
#footer .back-top {
  position: absolute;
  cursor: pointer;
  top: -10px;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 40px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-align: center;
  z-index: 10000;
  line-height: 40px;
  transition: all 300ms linear;
}

/* =========================================================
   MEDIA QUERIES
   ========================================================= */
@media only screen and (max-width: 1150px) {
  .logo {
    width: 170px; height: 170px;
    left: 10px; top: 10px;
    background: url('../images/logo.avif') no-repeat center center;
    background-size: 150px auto;
  }
}

@media only screen and (max-width: 900px) {
  .logo {
    width: 105px; height: 105px;
    left: 10px; top: 10px;
    background: url('../images/logo.avif') no-repeat center center;
    background-size: 111px auto;
  }
  .wh { margin-right: 0; margin-bottom: 22px; width: 155px; }
  .review { max-width: 90%; width: 90%; }
  .wh a { max-width: 155px; }
  .wh a img { max-width: 155px; }
  #nuestras-lasanas img,
  #precios-lasagnas img,
  #sabores img,
  #porciones-dimensiones img { max-width: 920px; }
}

@media only screen and (max-width: 800px) {
  .logo {
    width: 94px; height: 94px;
    left: 10px; top: 10px;
    background: url('../images/logo.avif') no-repeat center center;
    background-size: 95px auto;
  }
  .wh { margin-right: 0; margin-bottom: 22px; width: 155px; }
  #opiniones img { max-width: 300px; }
  #contacto img { margin: 0 auto; max-width: 675px; max-height: 657px; }
}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
  .prev { left: 100px; }
  .next { right: 100px; }
  #contacto img { margin: 0 auto; max-width: 675px; max-height: 657px; }
  .review { max-width: 90%; width: 90%; }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
  .pcvew { display: none; }
  .celvew { display: inline-block; width: 100%; }
  .big-text { margin-top: -40px; line-height: 40px; }
  .small-text { margin-top: 25px; }
  .prev {
    top: auto; bottom: 20px; margin-top: 0;
    background: url('../images/arrow-left.avif') no-repeat center center;
    background-size: 16px 29px;
    left: 20px; width: 16px; height: 29px;
  }
  .next {
    top: auto; bottom: 20px; margin-top: 0;
    background: url('../images/arrow-right.avif') no-repeat center center;
    background-size: 16px 29px;
    right: 20px; width: 16px; height: 29px;
  }
  .review { max-width: 90%; width: 90%; }
  .wh { margin-right: 0; margin-bottom: 22px; width: 133px; }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #contacto img { margin: 0 auto; max-width: 460px; max-height: 448px; }
  h5 { font-size: 16px; font-weight: 400; }
  #opiniones img { max-width: 300px; }
  .pcvew { display: none; }
  .celvew { display: inline-block; width: 100%; }
  .big-text { margin-top: -40px; line-height: 30px; }
  .small-text { margin-top: 20px; line-height: 20px; }
  .prev {
    top: auto; bottom: 20px; margin-top: 0;
    background: url('../images/arrow-left.avif') no-repeat center center;
    background-size: 16px 29px;
    left: 20px; width: 16px; height: 29px;
  }
  .next {
    top: auto; bottom: 20px; margin-top: 0;
    background: url('../images/arrow-right.avif') no-repeat center center;
    background-size: 16px 29px;
    right: 20px; width: 16px; height: 29px;
  }
  .wh { margin-right: 0; margin-bottom: 30px; width: 120px; }
  .wh a { max-width: 120px; }
  .wh a img { max-width: 120px; }
  .review { max-width: 90%; width: 90%; }
  #opiniones img { max-width: 250px; }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
  #contacto img { margin: 0 auto; max-width: 315px; max-height: 307px; }
  .pcvew { display: none; }
  .celvew { display: inline-block; width: 100%; }
  .big-text { margin-top: -40px; line-height: 20px; }
  .big-text span { padding-left: 15px; padding-right: 15px; }
  .small-text { margin-top: 20px; line-height: 14px; }
  .prev {
    top: auto; bottom: 20px; margin-top: 0;
    background: url('../images/arrow-left.avif') no-repeat center center;
    background-size: 16px 29px;
    left: 20px; width: 16px; height: 29px;
  }
  .next {
    top: auto; bottom: 20px; margin-top: 0;
    background: url('../images/arrow-right.avif') no-repeat center center;
    background-size: 16px 29px;
    right: 20px; width: 16px; height: 29px;
  }
  .wh a { max-width: 111px; }
  .wh a img { max-width: 111px; }
  .review { max-width: 90%; width: 90%; }
}

@media only screen and (max-width: 319px) {
  #contacto img { margin: 0 auto; max-width: 310px; max-height: 302px; }
  .pcvew { display: none; }
  .celvew { display: inline-block; width: 100%; }
  .big-text { margin-top: -30px; line-height: 15px; }
  .prev {
    top: auto; bottom: 20px; margin-top: 0;
    background: url('../images/arrow-left.avif') no-repeat center center;
    background-size: 16px 29px;
    left: 20px; width: 16px; height: 29px;
  }
  .next {
    top: auto; bottom: 20px; margin-top: 0;
    background: url('../images/arrow-right.avif') no-repeat center center;
    background-size: 16px 29px;
    right: 20px; width: 16px; height: 29px;
  }
  .review { max-width: 90%; width: 90%; }
  .wh a { max-width: 111px; }
  .wh a img { max-width: 111px; }

  /* Evita CLS en imágenes con dimensiones específicas */
#precios-lasagnas .reserva img,
#sabores .reserva img,
#contacto .reserva img {
  aspect-ratio: 374 / 113;
  width: 100%;
  height: auto;
}

#contacto img.pcvew {
  aspect-ratio: 1080 / 955;
  width: 100%;
  height: auto;
}

#contacto img.celvew {
  aspect-ratio: 675 / 657;
  width: 100%;
  height: auto;
}}