/* Estilos mios */

:root {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
  }

.row {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}
  
.mb-4 {
    margin-bottom: 1.5rem !important;
}
  
@media (min-width: 992px) {
    col-lg-4 {
      flex: 0 0 auto;
      width: 33.33333333%;
    }
}

section#introduccion, section#menudia, section#platos, section#portfolio {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-bottom: 150px;
}

#introduccion h2,
#introduccion h3 {
    display: block !important;
    text-align: center;
}

ul.menu-semanal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
}

.menu-semanal li {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.menu-semanal li p {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px !important;
}

#menudia h2 {text-align: center;}

.page-section {
    padding: 6rem 0;
}
.page-section h2.section-heading, .page-section .section-heading.h2 {
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
}
.page-section h3.section-subheading, .page-section .section-subheading.h3 {
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
    font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    margin-bottom: 4rem;
}

#platos .row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-right: -15px;
  margin-left: -15px;
}

.col-md-4 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.text-center {
    text-align: center !important;
}

#platos .row .col-md-4 .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
}

#platos .card.hidden {
  opacity: 0;
  filter: blur(2px);
  translate: -100%;
}

@media (min-width: 768px) {
  .col-md-4 {
     flex: 0 0 33.333333%;
     max-width: 33.333333%;
  }
}

.banner-img {
    position: relative;
    background-image: url("/cocina/imagenes/banner.jpg");
    background-position: 50% 70%;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 70vh;
    overflow: hidden;
}
.banner-text {
    position: absolute;
    color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.subir, .bajar {display: none;}

@media (max-width: 700px) {
    .subir, .bajar {display: block;}
}
@media (max-width: 600px) {
    .subir{
        position: absolute;
        bottom: 0;
    }
    .bajar {
        position: absolute;
        top: 0;
    }
}

/* Estilos del modal */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}
  
.modal-dialog {
    position: relative;
    width: auto;
    margin: 0.5rem;
    pointer-events: none;
}

.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
      transition: none;
    }
}

.modal.show .modal-dialog {
    transform: none;
}

.modal.modal-static .modal-dialog {
    transform: scale(1.02);
}
  
.modal-dialog-scrollable {
    height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
}
  
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}
  
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem;
    outline: 0;
}
  
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}

.modal-backdrop.fade {opacity: 0;}

.modal-backdrop.show {opacity: 0.5;}
  
.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
}

.modal-header .btn-close {
    padding: 0.5rem 0.5rem;
    margin: -0.5rem -0.5rem -0.5rem auto;
}
  
.modal-title {
    margin-bottom: 0;
    line-height: 1.5;
}
  
.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}
  
.modal-footer {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: calc(0.3rem - 1px);
    border-bottom-left-radius: calc(0.3rem - 1px);
}

.modal-footer > * {
    margin: 0.25rem;
}
  
@media (min-width: 576px) {
/*.modal-dialog {max-width: 500px;margin: 1.75rem auto;} */
  
.modal-dialog-scrollable {height: calc(100% - 3.5rem);}
  
.modal-dialog-centered {min-height: calc(100% - 3.5rem);}
  
.modal-sm {max-width: 300px;}
}

@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {max-width: 800px;}
}

@media (min-width: 1200px) {
  .modal-xl {max-width: 1140px;}
}

/* Estilos portfolio modal */

#portfolio .portfolio-item {
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
}
  
#portfolio .portfolio-item .portfolio-link {
    position: relative;
    display: block;
    margin: 0 auto;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 200, 0, 0.9);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity ease-in-out 0.25s;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
    font-size: 1.25rem;
    color: white;
}

#portfolio .portfolio-item .portfolio-link:hover .portfolio-hover {
    opacity: 1;
}

#portfolio .portfolio-item .portfolio-caption {
    padding: 1.5rem;
    text-align: center;
    background-color: #fff;
}

#portfolio .portfolio-item .portfolio-caption .portfolio-caption-heading {
    font-size: 1.5rem;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 700;
    margin-bottom: 0;
}

#portfolio .portfolio-item .portfolio-caption .portfolio-caption-subheading {
    font-style: italic;
    font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
  
.portfolio-modal .modal-dialog {
    margin: 1rem;
    max-width: 100vw;
}

.portfolio-modal .modal-content {
    padding-top: 6rem;
    padding-bottom: 6rem;
    text-align: center;
}

.portfolio-modal .modal-content h2, .portfolio-modal .modal-content .h2 {
    font-size: 3rem;
    line-height: 3rem;
}

.portfolio-modal .modal-content p.item-intro {
    font-style: italic;
    margin-bottom: 2rem;
    font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.portfolio-modal .modal-content p {
    margin-bottom: 2rem;
}

.portfolio-modal .modal-content ul.list-inline {
    margin-bottom: 2rem;
}

.portfolio-modal .modal-content img {
    margin-bottom: 2rem;
}

.portfolio-modal .close-modal {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    background-color: transparent;
}

.portfolio-modal .close-modal:hover {opacity: 0.3;}
  
.img-fluid {max-width: 100%; height: auto;}

.img-fluid-modal {max-width: 70%;}

/* Estilos página superalimentos */

.modoOscuro {height: 1.8rem !important;}
.cabecera-img {
  height: 100vh;
  width: 100%;
  max-width: 100vw;
  background-image: url("../../imagenes/alimentos/cocina1.jpeg");
  background-position: center;
  background-size: cover;
  background-attachment: scroll;
  background-repeat: no-repeat;
  display: grid;
  place-items: center;
}
.cabecera-img::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: MidnightBlue;
  opacity: 0.3;
}
.cabecera-section {
  max-width: 40vw;
  color: black;
  background: rgba(255,255,255, .3);
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
  font-family: "Montserrat", sans-serif;
  transform: translate(-50%, -50%);
  animation: move 2s linear 4 alternate forwards;
}
.cabecera-section h1 {font-size: var(--font-size-xxl); font-weight: 500; text-align: center;}
.cabecera-section h2 {font-size: var(--font-size-xl); font-weight: 400;}
@keyframes move {
 from{transform: translate(-50%, -50%);}
  to{transform: translate(50%, 50%) rotateX(360deg);}
}
.menu-fixed {
  position: relative;
  top: 0;
  height: 80px;
  width: 100%;
  max-width: 100vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: black;
  transition: .3s linear;
}
.menu-fixed a {
  text-decoration: none;
  display: inline-block;
  color: white;
  flex-grow: 0;
  transition: .3s linear;
}
.menu-fixed a:hover {transition: .3s linear; flex-grow: 0.2;}
.menu-fixed.fixed {
  transition: .3s linear; 
  position: fixed; 
  top: 0; 
  left: 50%;
  font-size: var(--font-size-sm); 
  justify-content: space-evenly; 
  height: 40px; 
  max-width: 50vw; 
  z-index: 200;
  border-radius: 10px;
}

#contenido {transition: margin-left 0.5s linear; max-width: 100%;}
#contenido.margen {transition: 0.5s linear; margin-left: 350px; max-width: 90%;}
.superalimentos-flex {
  width: 100%;
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: space-evenly;
}
/*.flex .sup {}*/
.superalimentos-flex .sup h1, .flex .sup h2 {display: inline-block;}
.superalimentos-flex .sup p {padding: 20px 0;}
#contenido-superalimentos #grid {
  box-sizing: content-box;
  width: 100%;
  max-width: 100%;
  /*max-width: 100vw;
  margin: 0 auto;*/
  padding: 6vh 0;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  column-gap: 1em;
  row-gap: 6vh;
  transition: .3s linear;
}
#grid .sup {position: relative; cursor: pointer; transform: translateX(-50px);}
#grid .sup h3, #grid .sup h2 {margin-left: 3em; font-size: var(--font-size-xl);}

.imgrollo {
  position: relative;
  width: 100%;
  max-width: 550px;
  height: 350px;
  background-color: #fff;
  box-shadow: 1em 0.5em 2em #1234, 0 0 5em #1234 inset;
  perspective: 800px;
}
@media (max-width: 650px) {
 /* .imgrollo {max-width: 500px;} */
  #grid {transition: .3s linear; transform: scaleX(0.8);}
}
#grid .sup:nth-child(1) .imgrollo {--imageUrl: url("../../imagenes/alimentos/brocoli.jpg");}
#grid .sup:nth-child(2) .imgrollo {--imageUrl: url("../../imagenes/alimentos/coliflor.jpg");}
#grid .sup:nth-child(3) .imgrollo {--imageUrl: url("../../imagenes/alimentos/zanahoria.jpg");}
#grid .sup:nth-child(4) .imgrollo {--imageUrl: url("../../imagenes/alimentos/remolacha.jpg");}
#grid .sup:nth-child(5) .imgrollo {--imageUrl: url("../../imagenes/alimentos/espinaca.jpg");}
#grid .sup:nth-child(6) .imgrollo {--imageUrl: url("../../imagenes/alimentos/calabaza.jpg");}
#grid .sup:nth-child(7) .imgrollo {--imageUrl: url("../../imagenes/alimentos/jengibre.png");}
#grid .sup:nth-child(8) .imgrollo {--imageUrl: url("../../imagenes/alimentos/semillas_chia.jpg");}
#grid .sup:nth-child(9) .imgrollo {--imageUrl: url("../../imagenes/alimentos/hierba_trigo.jpg");}
#grid .sup:nth-child(10) .imgrollo {--imageUrl: url("../../imagenes/alimentos/ajo.jpg");}
#grid .sup:nth-child(11) .imgrollo {--imageUrl: url("../../imagenes/alimentos/curcuma.jpg");}
#grid .sup:nth-child(12) .imgrollo {--imageUrl: url("../../imagenes/alimentos/uva.png");}
#grid .sup:nth-child(13) .imgrollo {--imageUrl: url("../../imagenes/alimentos/manzana.jpg");}
#grid .sup:nth-child(14) .imgrollo {--imageUrl: url("../../imagenes/alimentos/platano.webp");}
#grid .sup:nth-child(15) .imgrollo {--imageUrl: url("../../imagenes/alimentos/acai.jpg");}
#grid .sup:nth-child(16) img {position: absolute; left: 0; top: -10%; opacity: 0; transition: .3s linear;}
#grid .sup:nth-child(16):hover img {transition: .3s linear; opacity: 1;}
#grid .sup:nth-child(16) .imgrollo {--imageUrl: url("../../imagenes/alimentos/aceite.jpg");}
#grid .sup:nth-child(17) .imgrollo {--imageUrl: url("../../imagenes/alimentos/aguacate.jpg");}
#grid .sup:nth-child(18) .imgrollo {--imageUrl: url("../../imagenes/alimentos/frutos_rojos.jpg");}
#grid .sup:nth-child(19) .imgrollo {--imageUrl: url("../../imagenes/alimentos/cereales.jpg");}
#grid .sup:nth-child(20) .imgrollo {--imageUrl: url("../../imagenes/alimentos/alga.jpg");}
#grid .sup:nth-child(21) .imgrollo {--imageUrl: url("../../imagenes/alimentos/huevos.jpg");}
#grid .sup:nth-child(22) .imgrollo {--imageUrl: url("../../imagenes/alimentos/yogur.jpg");}
#grid .sup:nth-child(22) .imgrollo i {background-position-x: calc(var(--bpx, 0) - 10px);}
#grid .sup:nth-child(23) .imgrollo {--imageUrl: url("../../imagenes/alimentos/legumbres.jpg");}
#grid .sup:nth-child(24) .imgrollo {--imageUrl: url("../../imagenes/alimentos/pescado.jpeg");}
#grid .sup:nth-child(24) .imgrollo i {background-position-x: calc(var(--bpx, 0) - 10px);}
#grid .sup:nth-child(25) .imgrollo {--imageUrl: url("../../imagenes/alimentos/frutos_secos.jpg");}
#grid .sup:nth-child(26) .imgrollo {--imageUrl: url("../../imagenes/alimentos/te.jpg");}
/*#grid .sup:nth-child(27) {grid-column: 0;}*/
#grid .sup:nth-child(27) .imgrollo {--imageUrl: url("../../imagenes/alimentos/agua.jpg");}
.imgrollo i {
  position: absolute;
  left: calc(100% - 7px);
  width: 36px;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: left;
  transition: transform 0.6s var(--delay, 0s) ease-in-out;
  background-image: linear-gradient(#0003, #0000 5% 95%, #0003), var(--imageUrl, "");
  background-position-x: calc(var(--bpx, 0) + 30px);
  background-size: 400px 400px;
}

.imgrollo > i {left: -5px; width: 5px;}

.imgrollo:hover i, 
.imgrollo:active i {
  transform: rotateY(var(--angle, 0deg)) skewY(var(--skew, 0deg));
  transition-delay: var(--delay2, 0s);
}

.imgrollo > i {
  --bpx: 0px;
  --delay: 0s;
  --delay2: 0.6s;
  --angle: -10deg;
  --skew: 0deg;
}
.imgrollo > i > i {
  --bpx: -10px;
  --delay: 0.01s;
  --delay2: 0.59s;
  --angle: -14deg;
  --skew: -1deg;
}
.imgrollo > i > i > i {
  --bpx: -20px;
  --delay: 0.02s;
  --delay2: 0.58s;
  --angle: -18deg;
  --skew: -2deg;
}
.imgrollo > i > i > i > i {
  --bpx: -30px;
  --delay: 0.03s;
  --delay2: 0.57s;
  --angle: -22deg;
  --skew: -3deg;
}
.imgrollo > i > i > i > i > i {
  --bpx: -40px;
  --delay: 0.04s;
  --delay2: 0.56s;
  --angle: -26deg;
  --skew: -4deg;
}
.imgrollo > i > i > i > i > i > i {
  --bpx: -50px;
  --delay: 0.05s;
  --delay2: 0.55s;
  --angle: -30deg;
  --skew: -5deg;
}
.imgrollo > i > i > i > i > i > i > i {
  --bpx: -60px;
  --delay: 0.06s;
  --delay2: 0.54s;
  --angle: -34deg;
  --skew: -6deg;
}
.imgrollo > i > i > i > i > i > i > i > i {
  --bpx: -70px;
  --delay: 0.07s;
  --delay2: 0.53s;
  --angle: -38deg;
  --skew: -7deg;
}
.imgrollo > i > i > i > i > i > i > i > i > i {
  --bpx: -80px;
  --delay: 0.08s;
  --delay2: 0.52s;
  --angle: -42deg;
  --skew: -8deg;
}
.imgrollo > i > i > i > i > i > i > i > i > i > i {
  --bpx: -90px;
  --delay: 0.09s;
  --delay2: 0.51s;
  --angle: -46deg;
  --skew: -9deg;
}
.imgrollo > i > i > i > i > i > i > i > i > i > i > i {
  --bpx: -100px;
  --delay: 0.1s;
  --delay2: 0.5s;
  --angle: -50deg;
  --skew: -10deg;
}
.imgrollo > i > i > i > i > i > i > i > i > i > i > i > i {
  --bpx: -110px;
  --delay: 0.11s;
  --delay2: 0.49s;
  --angle: -54deg;
  --skew: -11deg;
}
.imgrollo > i > i > i > i > i > i > i > i > i > i > i > i > i {
  --bpx: -120px;
  --delay: 0.12s;
  --delay2: 0.48s;
  --angle: -56deg;
  --skew: -12deg;
}
.imgrollo > i > i > i > i > i > i > i > i > i > i > i > i > i > i {
  --bpx: -130px;
  --delay: 0.13s;
  --delay2: 0.47s;
  --angle: -60deg;
  --skew: -13deg;
}
.imgrollo > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i {
  --bpx: -140px;
  --delay: 0.14s;
  --delay2: 0.46s;
  --angle: -64deg;
  --skew: -14deg;
}
.imgrollo > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i {
  --bpx: -150px;
  --delay: 0.15s;
  --delay2: 0.45s;
  --angle: -68deg;
  --skew: -15deg;
}
.imgrollo > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i {
  --bpx: -160px;
  --delay: 0.16s;
  --delay2: 0.44s;
  --angle: -72deg;
  --skew: -16deg;
}
.imgrollo > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i {
  --bpx: -170px;
  --delay: 0.17s;
  --delay2: 0.43s;
  --angle: -76deg;
  --skew: -17deg;
}
.imgrollo > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i {
  --bpx: -180px;
  --delay: 0.18s;
  --delay2: 0.42s;
  --angle: -80deg;
  --skew: -18deg;
}
.imgrollo > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i {
  --bpx: -190px;
  --delay: 0.19s;
  --delay2: 0.41s;
  --angle: -84deg;
  --skew: -19deg;
}
.imgrollo > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i {
  --bpx: -200px;
  --delay: 0.2s;
  --delay2: 0.4s;
  --angle: -88deg;
  --skew: -20deg;
}
.imgrollo > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i > i {
  --bpx: -210px;
  --delay: 0.21s;
  --delay2: 0.39s;
  --angle: -72deg;
  --skew: -21deg;
}
.imgrollo > figcaption {
  position: relative;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
#grid .sup .imgrollo > figcaption p {
  color: black;
  padding: 30px 5px 0px 60px;
  opacity: 0;
  transition: .3s linear;
  font-size: var(--font-size-sm);
  background: rgba(255,255,255,.6);
}
#grid .sup .imgrollo:hover > figcaption p {transition: .3s linear; opacity: 1;}
/*#grid .sup:nth-child(2) .imgrollo > figcaption p {font-size: var(--font-size-sm); background: rgba(255,255,255,.6);}
#grid .sup:nth-child(3) .imgrollo > figcaption p {font-size: var(--font-size-sm); background: rgba(255,255,255,.6);}
#grid .sup:nth-child(4) .imgrollo > figcaption p {font-size: var(--font-size-sm); background: rgba(255,255,255,.6);}
#grid .sup:nth-child(5) .imgrollo > figcaption p {background: rgba(255,255,255,.6);}
#grid .sup:nth-child(6) .imgrollo > figcaption p {background: rgba(255,255,255,.6);}
#grid .sup:nth-child(7) .imgrollo > figcaption {overflow-y: scroll;}
#grid .sup:nth-child(7) .imgrollo > figcaption p {font-size: var(--font-size-sm); background: rgba(255,255,255,.2);}
#grid .sup:nth-child(8) .imgrollo > figcaption {overflow-y: scroll;}
#grid .sup:nth-child(8) .imgrollo > figcaption p {font-size: var(--font-size-sm); background: rgba(255,255,255,.2);}
#grid .sup:nth-child(9) .imgrollo > figcaption p {background: rgba(255,255,255,.6);}
#grid .sup:nth-child(11) .imgrollo > figcaption {overflow-y: scroll;}
#grid .sup:nth-child(11) .imgrollo > figcaption p {font-size: var(--font-size-sm); background: rgba(255,255,255,.2);}
#grid .sup:nth-child(12) .imgrollo > figcaption {overflow-y: scroll;}
#grid .sup:nth-child(12) .imgrollo > figcaption p {font-size: var(--font-size-sm); background: rgba(255,255,255,.2);}
#grid .sup:nth-child(13) .imgrollo > figcaption p {font-size: var(--font-size-sm); background: rgba(255,255,255,.6);}
#grid .sup:nth-child(14) .imgrollo > figcaption p {font-size: var(--font-size-sm); background: rgba(255,255,255,.6);}
#grid .sup:nth-child(15) .imgrollo > figcaption {overflow-y: scroll;}
#grid .sup:nth-child(15) .imgrollo > figcaption p {font-size: var(--font-size-sm); background: rgba(255,255,255,.2);}
#grid .sup:nth-child(16) .imgrollo > figcaption {overflow-y: scroll;}
#grid .sup:nth-child(16) .imgrollo > figcaption p {font-size: var(--font-size-sm); background: rgba(255,255,255,.2);}
#grid .sup:nth-child(17) .imgrollo > figcaption {overflow-y: scroll;}
#grid .sup:nth-child(17) .imgrollo > figcaption p {background: rgba(255,255,255,.2);}
#grid .sup:nth-child(18) .imgrollo > figcaption {overflow-y: scroll;}
#grid .sup:nth-child(18) .imgrollo > figcaption p {background: rgba(255,255,255,.2);}
#grid .sup:nth-child(19) .imgrollo > figcaption {overflow-y: scroll;}
#grid .sup:nth-child(19) .imgrollo > figcaption p {font-size: var(--font-size-sm); background: rgba(255,255,255,.2);}
#grid .sup:nth-child(20) .imgrollo > figcaption {overflow-y: scroll;}
#grid .sup:nth-child(20) .imgrollo > figcaption p {font-size: var(--font-size-sm); background: rgba(255,255,255,.2);}
#grid .sup:nth-child(21) .imgrollo > figcaption {overflow-y: scroll;}
#grid .sup:nth-child(21) .imgrollo > figcaption p {background: rgba(255,255,255,.2);}
#grid .sup:nth-child(22) .imgrollo > figcaption {overflow-y: scroll;}
#grid .sup:nth-child(22) .imgrollo > figcaption p {background: rgba(255,255,255,.2);}
#grid .sup:nth-child(23) .imgrollo > figcaption {overflow-y: scroll;}
#grid .sup:nth-child(23) .imgrollo > figcaption p {font-size: background: rgba(255,255,255,.2);}
#grid .sup:nth-child(24) .imgrollo > figcaption {overflow-y: scroll;}
#grid .sup:nth-child(24) .imgrollo > figcaption p {font-size: background: rgba(255,255,255,.2);}
#grid .sup:nth-child(25) .imgrollo > figcaption {overflow-y: scroll;}
#grid .sup:nth-child(25) .imgrollo > figcaption p {background: rgba(255,255,255,.2);}
#grid .sup:nth-child(26) .imgrollo > figcaption {overflow-y: scroll;}
#grid .sup:nth-child(26) .imgrollo > figcaption p {background: rgba(255,255,255,.2);}
#grid .sup:nth-child(27) .imgrollo > figcaption {overflow-y: scroll;}
#grid .sup:nth-child(27) .imgrollo > figcaption p {background: rgba(255,255,255,.2);} */

/* Estilos para pagina educación nutricional */

#nutricion {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

#nutricion h2, 
#nutricion h3 {
  display: inline-block; 
  width: auto;
  padding: 6px 10px;
  background: black; 
  color: yellow; 
  text-align: center; 
  line-height: 25px; 
  margin-left: 7em;
}

#nutricion p {
  width: 100%; 
  font-size: 1em; 
  font-family: arial, sans-serif; 
  line-height: 35px;
}

/* Estilos de bootstrap */

/*#mainNav {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #212529;
}

@media (min-width: 992px) {
    #mainNav {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        border: none;
        background-color: transparent;
        transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
    }
}

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}
.navbar-dark {
    --bs-navbar-color: rgba(255, 255, 255, 0.55);
    --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
    --bs-navbar-toggler-icon-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
}
@media (min-width: 992px) {
    .navbar-expand-lg {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
}
.navbar {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: 0.5rem;
    --bs-navbar-color: rgba(0, 0, 0, 0.55);
    --bs-navbar-hover-color: rgba(0, 0, 0, 0.7);
    --bs-navbar-disabled-color: rgba(0, 0, 0, 0.3);
    --bs-navbar-active-color: rgba(0, 0, 0, 0.9);
    --bs-navbar-brand-padding-y: 0.3125rem;
    --bs-navbar-brand-margin-end: 1rem;
    --bs-navbar-brand-font-size: 1.25rem;
    --bs-navbar-brand-color: rgba(0, 0, 0, 0.9);
    --bs-navbar-brand-hover-color: rgba(0, 0, 0, 0.9);
    --bs-navbar-nav-link-padding-x: 0.5rem;
    --bs-navbar-toggler-padding-y: 0.25rem;
    --bs-navbar-toggler-padding-x: 0.75rem;
    --bs-navbar-toggler-font-size: 1.25rem;
    --bs-navbar-toggler-icon-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
    --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
    --bs-navbar-toggler-border-radius: 0.375rem;
    --bs-navbar-toggler-focus-width: 0.25rem;
    --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
}

.navbar {
    margin-bottom: 20px;
}

.navbar > .container, .navbar > .container-fluid, .navbar > .container-sm, .navbar > .container-md, .navbar > .container-lg, .navbar > .container-xl, .navbar > .container-xxl {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
}*/

@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1200px;
    }
}
@media (min-width: 1200px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1140px;
    }
}
@media (max-width: 992px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 960px;
    }
}
@media (max-width: 768px) {
    .container-md, .container-sm, .container {
        max-width: 720px;
    }
}
@media (max-width: 576px) {
    .container-sm, .container {
        max-width: 540px;
    }
}
.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x)* 0.5);
    padding-left: calc(var(--bs-gutter-x)* 0.5);
    margin-right: auto;
    margin-left: auto;
}

/*@media (min-width: 992px) {
    #mainNav .navbar-brand {
        font-size: 1.5em;
        transition: font-size 0.3s ease-in-out;
    }
}

#mainNav .navbar-brand {
    color: #ffc800;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 700;
    letter-spacing: 0.0625em;
    text-transform: uppercase;
}
.navbar-brand {
    padding-top: var(--bs-navbar-brand-padding-y);
    padding-bottom: var(--bs-navbar-brand-padding-y);
    margin-right: var(--bs-navbar-brand-margin-end);
    font-size: var(--bs-navbar-brand-font-size);
    color: var(--bs-navbar-brand-color);
    text-decoration: none;
    white-space: nowrap;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
}

.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}

@media (min-width: 992px) {
    #mainNav.navbar-shrink {
        padding-top: 1.2rem;
        padding-bottom: 1.2rem;
        background-color:#212529;
    }
}*/

/* Estilos de la galeria de menu semanal */

#menudia .titulo {
    display: block !important;
    text-align: center;
}

#galeria {
    width: 100%;
    max-width: 900px;
    height: 70vh;
    margin: 30px auto;
    position: relative;
    aspect-ratio: 4/3;
    border: 1px solid red; 
    border: 2px solid #000;
    border-bottom-width: 30px;
    background: #000;
    --slides: 7;
    --still: 4s;
    --slide: 2s;
    --delay:calc(var(--slide) * (-1));
    --time:calc(var(--still) + var(--slide));
    --total:calc(var(--time) * var(--slides));
}

#galeria #fotos {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden; 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

#galeria #fotos > section {
    width: 100%;
    height: 100%;
    position: absolute; 
    left: 100%;
    animation: slide var(--total) var(--delay) infinite;
    z-index: -1;
    background: #000;
    display: flex;
}

/* Tiempo de retardo de la animación de las fotos */

#galeria #fotos > section:nth-of-type(1) {animation-delay:var(--delay);}
#galeria #fotos > section:nth-of-type(2) {animation-delay:calc(var(--delay) + var(--time));}
#galeria #fotos > section:nth-of-type(3) {animation-delay:calc(var(--delay) + var(--time) * 2);}
#galeria #fotos > section:nth-of-type(4) {animation-delay:calc(var(--delay) + var(--time) * 3);}
#galeria #fotos > section:nth-of-type(5) {animation-delay:calc(var(--delay) + var(--time) * 4);} 
#galeria #fotos > section:nth-of-type(6) {animation-delay:calc(var(--delay) + var(--time) * 5);}
#galeria #fotos > section:nth-of-type(7) {animation-delay:calc(var(--delay) + var(--time) * 6);}

/* Para ajustar las imagenes en anchura y altura */

#galeria #fotos > section div img {
  display: block;
  max-width: 100%;
  object-fit: contain;
}

/* Tiempo de las transiciones de las imagenes */
@keyframes slide {
  0% {
     left: 100%;
     z-index: -1;
     }
  2.222% {
     left: 0%;      /* el segundo calculo: primer calculo * (--slide / (--still + --slide)) : 11.111% * 1/5 = 2.222% */
     z-index: 10;   /* el primer calculo: 100% / numero de fotos = 11.111% */
     }              /* el tercer calculo: primer calculo + segundo calculo: 11.111% + 2.222% = 13.333% */
  11.111% {         /* el cuarto calculo: tercer calculo + 0.001% : 13.333% + 0.001% = 13.334% */
     left: 0%;
     z-index: 10;
     }
  13.333% {
     left: -100%;
     z-index: 10;
     }
  13.334% {left: 100%;}
  100% {left: 100%;}
}

/* Codigo para cambiar el slide automático cuando se haga click en los botones */

#lunes:checked ~ #galeria {--delay:calc(var(--slide) * (-1));}
#martes:checked ~ #galeria {--delay:calc(var(--slide) * (-1) - var(--time));}
#miercoles:checked ~ #galeria {--delay:calc(var(--slide) * (-1) - var(--time) * 2);}
#jueves:checked ~ #galeria {--delay:calc(var(--slide) * (-1) - var(--time) * 3);}
#viernes:checked ~ #galeria {--delay:calc(var(--slide) * (-1) - var(--time) * 4);}
#sabado:checked ~ #galeria {--delay:calc(var(--slide) * (-1) - var(--time) * 5);}
#domingo:checked ~ #galeria {--delay:calc(var(--slide) * (-1) - var(--time) * 6);}

[name="fotograma"] {
  display: none;
}
/* Para reanudar el desplazamiento automatico despues de un click */
[name="fotograma"]:active ~ #galeria #fotos section,
[name="fotograma"]:active ~ #galeria #botones div {
  display: none;
  outline:0 !important; 
  -webkit-tap-highlight-color: transparent;
}

/* show selected slide as a background image when click/tap buttons to stop a blank flash as animation restarts */
[name="fotograma"]:active ~ #galeria #fotos {
  outline: 0 !important;
  -webkit-tap-highlight-color: transparent;
}

/* estilo del div botones */
#galeria #botones {
  position:absolute; 
  left:0; 
  bottom:-27px; 
  width:100%; 
  height:23px; 
  background:#000; 
  z-index:100;
}
#galeria #botones label {
  display:inline-block; 
  width: 13.8%; 
  height:22px; 
  padding:0; 
  margin:0; 
  background-image: linear-gradient(#8c8, #040, #8c8); 
  border:1px solid #000; 
  box-sizing:border-box;  
  z-index:1; 
  cursor:pointer;
}

/* current slide indication */

#galeria #botones div {
  display: block; 
  width: 14.28%; 
  height: 22px; 
  background:#fff6; 
  position:absolute; 
  z-index:10; 
  left:0; 
  top:0; 
  animation:counter var(--total) calc(var(--delay)) steps(var(--slides)) infinite; 
  border:1px solid #000; 
  box-sizing:border-box;
}

@keyframes counter {
  0% {left:0%}
  100% {left:100%;}
}

/* Show small image of slide when hovering a slide button */

#galeria #botones label::after {
  display:block; 
  content:""; 
  position:absolute; 
  bottom:150%; 
  left:-9999px; 
  transform:translateX(-50%); 
  width:30%; 
  aspect-ratio:1/1; 
  background-size:contain; 
  background-position:center center; 
  background-repeat:no-repeat; 
  background-color:#0008; 
  opacity:0; 
  transition:opacity 0.5s;
}
 
/* small images shown on hover of buttons */

#galeria #botones label:nth-of-type(1)::after {content: "LUNES";background-image: url(/imagenes/menus/cubiertos.png);}
#galeria #botones label:nth-of-type(2)::after {content: "MARTES";background-image: url(/imagenes/menus/cubiertos.png);}
#galeria #botones label:nth-of-type(3)::after {content: "MIERCOLES";background-image: url(/imagenes/menus/cubiertos.png);}
#galeria #botones label:nth-of-type(4)::after {content: "JUEVES";background-image: url(/imagenes/menus/cubiertos.png);}
#galeria #botones label:nth-of-type(5)::after {content: "VIERNES";background-image: url(/imagenes/menus/cubiertos.png);}
#galeria #botones label:nth-of-type(6)::after {content: "SABADO";background-image: url(/imagenes/menus/cubiertos.png);}
#galeria #botones label:nth-of-type(7)::after {content: "DOMINGO";background-image: url(/imagenes/menus/cubiertos.png);}
#galeria #botones label:hover::after {left:50%; opacity:1;}

/* styles for information panels */
#galeria #fotos div div {
    display:flex;
    width:100%; 
    height:100%; 
    position:absolute; 
    top:-100%; 
    left:0; 
    align-items:center; 
    background:#0007; 
    transition:0.5s;
}

#galeria #fotos p {
    font-size: 14px !important;
}

#galeria #fotos section:hover div div {top: 0%;}

#galeria #fotos div div h1 {
    width:100%; 
    text-align:center; 
    color:#aaa9; 
    font:500 90px/90px arial, sans-serif;
}

#galeria #fotos div div h1 span {
    display:block; 
    font:300 40px/40px arial, sans-serif; 
    color:#fff; 
    transform: translateY(-40px);
}

/* PLAY/PAUSE styles */

#label-holder {
  width:100px; 
  height:35px; 
  display:block; 
  margin:0 auto 30px auto; 
  position:relative;
}
#label-holder div {
  width:100%; 
  height:0; 
  position:absolute; 
  left:0; 
  top:0; 
  background:#0000; 
  z-index:100; 
  animation: coverslide var(--time) steps(1) infinite;
}
#label-holder #foto-control span {
  display:block; 
  width:100%; 
  height:100%; 
  position:absolute; 
  left:0;
  top:0; 
  text-align:center; 
  font:500 18px/36px arial, sans-serif; 
  transition:0.5s; 
  cursor:pointer;
}
#label-holder #foto-control span.play {
  background-image: linear-gradient(#d88, #600, #d88);
  color:#fff;
}
#label-holder #foto-control span.pause {
  background-image:
  linear-gradient(#8c8, #040, #8c8); 
  color:#fff;
}

/* cover play/pause button when image is sliding */
@keyframes coverslide {
0% {height:0%;}
88.889% {height:100%;} /* 100% - first calculation from @keyframes slide : 100% - 11.111% = 88.889% */
100% {height:100%;}
}

#play-pause {display:none;}
#play-pause:checked + #galeria #fotos,
#play-pause:checked + #galeria #fotos section,
#play-pause:checked + #galeria #botones div,
#play-pause:checked ~ #label-holder div {animation-play-state: paused;}

#play-pause:checked ~ #label-holder #foto-control span.pause {opacity:0;}
#play-pause:checked ~ #galeria #botones label {background-image: linear-gradient(#d88, #600, #d88);}