.header {
  width: 100%;
  height: 100vh;
  font-family: "Katler-Rough";
  background-image: url("../image/hero/hero-menu.webp");
  background-position: center;
  background-size: cover;
  overflow: hidden;
  z-index: 1;
}
.menu-button svg {
  width: 20px;
}
.menu-button:hover path {
  fill: #121111;
  border-radius: 5px;
}
.header .img-1,
.img-2 {
  position: absolute;
  width: 35%;
  top: 50%;
  transform: translateY(-50%);
}

.header .img-1 {
  left: -5%;
}
.header .img-2 {
  right: -5%;
}
.header .button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/*--------MENUU-----------*/

.container__menu {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.vector-4 {
  display: none;
}

.tituto_menu {
  margin-top: 35px;
  display: flex;
  align-items: center;
  font-family: Katler-Regular;
}
.tituto_menu h2 {
  text-align: center;
  font-size: 4rem;
  color: #000;
  letter-spacing: 1.5px;
  margin: 0px 5px;
  margin-top: 11px;
}
.tituto_menu span {
  display: block;
  letter-spacing: 3px;
  font-size: 4rem;
  margin-top: -10px;
}
.tituto_menu img:first-child {
  transform: rotate(180deg);
}
.tituto_menu img {
  width: 100px;
}

.aside__menu {
  margin: 50px auto;
  width: clamp(250px, 70%, 1200px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: aliceblue;
}

.aside__menu img {
  width: 340px;
  margin-right: -10px;
  z-index: 1;
  position: relative;
  z-index: 20;
}
.aside__menu img:nth-child(2n) {
  margin-left: -10px;
}

.aside__menu .aside__menu-text:nth-child(1) {
  text-align: end;
}

.aside__menu-text h3 {
  margin: 0;
  font-family: Katler-Regular;
  letter-spacing: 2px;
  line-height: 40px;
  font-size: 2.2rem;
  margin-bottom: 5px;
  font-weight: 100;
  color: #100;
}
.aside__menu-text span {
  margin: 0;
  display: block;
  font-size: 1.29em;
}
.aside__menu-text p {
  width: 250px;
  font-family: KumbhSans-Regular;
  font-size: 0.8rem;
  text-align: start;
  font-weight: 100;
  margin-top: 12px;
  letter-spacing: 1px;
  color: #100;
  font-weight: 900;
}
.menu__botones {
  display: flex;
  align-items: center;
  justify-content: start;
  align-items: center;
  gap: 10px;
}
.plato-1 {
  margin-top: 160px;
}
.plato-1 p, .plato-3 p {
  color: #e7e4e4;
}
.plato-1 .aside__menu-text h3 ,.plato-3 .aside__menu-text h3 {
  color: #e7e4e4;
  text-align: center;
}
.menu__botones .menu-button img {
  width: 20px;
}
.plato-2 .menu__botones,
.plate-4 .menu__botones {
  justify-content: start;
}

.menu__botones img {
  width: 100px;
}

.plato-2 span:nth-child(1) {
  font-size: 1.6rem;
  margin-top: -14px;
  letter-spacing: 2.4px;
}
.plato-2 span:nth-child(2) {
  font-size: 2rem;
  margin-top: -17px;
}
.plato-2,
.plate-4 {
  position: relative;
  z-index: 20;
}
.plato-2 .hoja1,
.plate-4 .hoja2 {
  position: absolute;
  right: 0;
  top: -10px;
  width: 100px;
  z-index: 5;
}

.plate-4 span {
  font-size: 2rem;
  letter-spacing: 1px;
  margin-top: -8px;
}
.plate-4 h3 {
  font-size: 2.8rem;
  letter-spacing: 5px;
}
.plato-1 p ,.plato-3 p{
  padding-right: 10px;
  text-align: end;
}
.plato-1 h3,.plato-3 h3{
  padding-right: 10px;
  text-align: end;
}

/*cortes de pollo----------*/
.fondo-hojas {
  object-fit: cover;
  object-position: bottom;
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  z-index: -10;
}
.vector-1,
.vector-2,
.vector-3 {
  position: absolute;
  width: 60%;
  z-index: -1;
}
.vector-1 {
  width: 55%;
  right: 0;
  top: 36%;
}
.vector-2 {
  width:0%;
  left: -10%;
  top: 48%;
}
.vector-3 {
  display: none;
}

.vector-4 {
  display: block;
  position: absolute;
  width: 60%;
  top: 0%;
  right: 0%;
  z-index: -1;
  display: none;
}
.vector-5 {
  display: block;
  position: absolute;
  width: 70%;
  top: 0%;
  right: 0%;
  z-index: -1;
}
.hoja-1 {
  position: absolute;
  left: -130px;
  top: 79%;
  transform: rotate(70deg);
  width: 230px;
  z-index: 5;
}
.hoja-2 {
  position: absolute;
  right: -120px;
  top: 50%;
  transform: rotate(-130deg);
  width: 230px;
  z-index: 5;
}
.tituto_menu h3 {
  text-align: center;
  font-size: 4rem;
  color: #e7e4e4;
  letter-spacing: 2.3px;
  margin: 0px 5px;
  margin-top: 11px;
}
.tituto_menu h3 span {
  display: block;
  letter-spacing: 3px;
  font-size: 2.5rem;
  margin-top: -10px;
}
.container__img {
  margin-top: 4px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.container__img .pollo {
  width: 320px;
}
.container__img .hoja2 {
  position: absolute;
  width: 100px;
  top: 0;
  right: 40px;
  z-index: -1;
}
.conainer__cortes {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.conainer__cortes .vector-3 {
  top: 25%;
  z-index: -1;
}
.conainer__cortes .vector-1 {
  top: 85%;
  z-index: -1;
}
.titulo__cortes {
  margin-top: 35px;
  font-family: Katler-Regular;
}
.titulo__cortes h3 {
  text-align: center;
  margin-top: -10px;
  font-size: 3rem;
  letter-spacing: 7px;
  color: var(--color-button);
  color: #fefefe;
}
.titulo__cortes span {
  display: block;
  letter-spacing: 2px;
  margin-top: -10px;
}
.titulo__cortes img {
  transform: rotate(-90deg);
  margin-left: 50px;
}

.cortes-pollo {
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}
.corte {
  position: relative;
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.corte .pollo {
  width: 400px;
  z-index: 10;
}
.cortes_contenido {
  overflow: hidden;
  backdrop-filter: blur(10px);
  margin-top: -150px;
  border: 2px solid #fefefe;
  padding: 200px 50px 150px 50px;
  width: 300px;
  border-radius: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cortes_contenido span {
  display: block;
  color: var(--color-button);
}
.cortes_contenido h3 {
  font-family: Katler-Regular;

  font-size: 2.4rem;
  text-align: center;
}
.cortes_contenido span:first-child {
  font-size: 3.5rem;
  letter-spacing: 10px;
  text-align: center;
  margin-left: 8px;
}
.cortes_contenido span:nth-child(2) {
  font-size: 1.7rem;
}
.cortes_contenido span:last-child {
  font-size: 2.7rem;
  letter-spacing: 3px;
}
.cortes_contenido p {
  font-family: KumbhSans-Bold;
  color: #fefefe;
  text-align: center;
  margin-top: 20px;
  width: 200px;
  text-align: justify;
}
.cortes_contenido img {
  width: 100px;
  margin-top: 0px;
}
.conainer__cortes .vector-1 {
  top: 60%;
  z-index: -1;
  width: 38%;
}
/*---fin----cortes de pollo----------*/

/*----------Guarnicionesss--------*/

.container__guarniciones {
  width: clamp(300px, 100%, 900px);
  margin: auto;
  margin-top: 80px;
  position: relative;
}

.guarniciones__titulo {
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.titulo h3 {
  font-size: 3.5rem;
  font-family: Katler-Regular;

  letter-spacing: 5px;
  color: #e68c07;
}
.titulo p {
  color: #e7e4e4;
  font-family: KumbhSans-Regular;
  font-size: 0.5rem;
  text-align: center;
  letter-spacing: 1px;
  margin-top: -8px;
}
.titulo {
  margin: 0 10px;
}
.guarniciones__titulo .fuego {
  transform: rotate(180deg);
}
/* Estilos generales del contenedor del slider */
.slider__Guarniciones {
  width: 80%;
  margin: 50px auto;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Estilos para el contenedor de cada slide */
.slider-container {
  display: flex;
  transition: transform 0.5s ease;
  width: 300%; /* Para 3 slides */
}

/* Cada slide ocupa el ancho completo del contenedor visible */
.slider {
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Estilos para las imágenes */
.slider__Guarniciones img {
  width: 300px;
  transition: transform 0.3s ease-out;
}

/* Efecto de escala en hover */
.slider img:hover {
  transform: scale(1.1);
}

/* Estilos del texto de cada slide */
.texto-guarniciones {
  width: 200px;
  text-align: start;
}

/* Estilos para el título */
.slider h4 {
  color: #e7e4e4;
  font-family: "Katler-Rough", sans-serif;
  letter-spacing: 2px;
  font-size: 1.5rem;
  font-weight: 200;
  margin: 0;
}

/* Para el span dentro del título */
.slider span {
  display: block;
}

/* Estilos para el párrafo de descripción */
.slider p {
  margin-bottom: 10px;
  font-family: "KumbhSans-Regular", sans-serif;
  font-size: 0.8rem;
  color: #e7e4e4;
}
.arrow-izquierda,
.arrow-derecha {
  position: absolute;
  width: 60px;
  top: 60%;
  transform: translateY(-50%);
  transition: all 0.2s ease-in;
  z-index: 50;
}
.arrow-derecha {
  right: 10%;
}
.arrow-izquierda {
  left: 10%;
}
svg:hover {
  cursor: pointer;
  scale: 1.1;
}
.arrow-izquierda path,
.arrow-derecha path {
  fill: #e7e4e4;
}
.slider-bebidas .arrow-izquierda {
  position: absolute;
  color: #e7e4e4;
}

/*----------Guarnicionesss--------*/

/*----------slider-bebidas------*/

.container__bebidas {
  width: clamp(300px, 100%, 1300px);
  margin: auto;
  margin-bottom: -150px;
  position: relative;
  padding: 0 20px;
}
.titulo__bebidas {
  text-align: center;
  font-size: 3rem;
  letter-spacing: 3px;
  color: #fefefe;
  font-family: Katler-Regular;
  margin-bottom: 30px;
}

.titulo__bebidas img {
  margin: 0;
  transform: rotate(-90deg);
  margin-left: -90px;
}
.titulo__bebidas h3 {
  margin-top: -20px;
  color: #fefefe;
}
.slider-bebidas {
  margin: auto;
  display: flex;
  justify-content: center;
}
.izquierda,
.derecha {
  position: absolute;
  width: 60px;
  top: 60%;
  transform: translateY(-50%);
  transition: all 0.2s ease-in;
  z-index: 50;
}
.derecha {
  right: 10%;
}
.izquierda {
  left: 10%;
}
svg:hover {
  cursor: pointer;
  scale: 1.1;
}
.izquierda path,
.derecha path {
  fill: #e7e4e4;
}
.slider-bebidas .izquierda {
  position: absolute;
  color: #e7e4e4;
}

.bebidas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 50px 120px 50px;
  border: 2px solid #e7e4e4;
  border-radius: 130px 130px 0 0;
}

.bebidas img {
  width: 120px;
}
.descripcion-bebida {
  display: flex;
  flex-direction: column;
}
.descripcion-bebida span {
  text-align: center;
  color: #e7e4e4;
  font-family: katler-Rough;
}
.descripcion-bebida span:first-child {
  font-size: 0.8rem;
  letter-spacing: 1px;
}
.descripcion-bebida span:nth-child(2) {
  font-size: 1.3rem;
}

/*----------fin-----slider-bebidas------*/
@media (min-width: 600px) and (max-width: 900px) {
  .header {
    background-image: url("../image/hero/hero-menu-tablet.webp");
  }
  .conainer__cortes {
    position: relative;
  }
  .conainer__cortes .vector-3 {
    width: 35%;
    top: 60%;
    z-index: -1;
  }
  .conainer__cortes .vector-1 {
    top: 70%;
    z-index: -1;
    width: 45%;
  }
  .cortes_contenido img {
    width: 100px;
  }
  .fondo-hojas {
    object-fit: cover;
    object-position: bottom;
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    z-index: -10;
  }
  .plato-1 {
    margin-top: 60px;
  }
  .vector-1,
  .vector-2,
  .vector-3 {
    position: absolute;
    width: 60%;
    z-index: -1;
  }
  .vector-1 {
    width: 70%;
    right: 0;
    top: 33%;
  }
  .vector-2 {
    width: 60%;
    left: -10%;
    top: 38%;
  }
  .vector-3 {
    display: none;
  }

  .vector-4 {
    display: block;
    position: absolute;
    width: 100%;
    top: -11%;
    right: 0;
    z-index: -1;
  }
  .hoja-1 {
    position: absolute;
    left: -130px;
    top: 79%;
    transform: rotate(70deg);
    width: 230px;
    z-index: 5;
  }
  .hoja-2 {
    position: absolute;
    right: -120px;
    top: 50%;
    transform: rotate(-130deg);
    width: 230px;
    z-index: 5;
  }
  .aside__menu .plato {
    width: 300px;
  }
  .corte .pollo {
    width: 350px;
  }
  .corte {
    width: 400px;
  }
}
/*section---responsive*/
@media only screen and (max-width: 600px) {
  .cortes_contenido img {
    width: 100px;
  }
  .cortes_contenido img{
    width: 100px;
  }
  .tituto_menu h2 {
    font-size: 2.8rem;
  }
  .tituto_menu span {
    font-size: 2.9rem;
  }
  .tituto_menu h3{
    font-size: 2.8rem;
  }
  .tituto_menu h3 span{
    font-size: 1.6rem;
  }
  .tituto_menu img {
    width: 70px;
  }
  .plato-1 {
    margin-top: 20px;
  }
  .header {
    width: 100%;
    height: 100vh;
    font-family: "Katler-Rough";
    position: relative;
    background-image: url("../image/hero/hero-menu-movil.webp");
    background-position: center;
    background-size: cover;
    overflow: hidden;
  }
  .fondo-hojas {
    object-fit: cover;
    object-position: bottom;
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    z-index: -10;
  }
  .vector-1,
  .vector-2,
  .vector-3 {
    position: absolute;
    width: 80%;
    z-index: -1;
  }
  .vector-1 {
    width: 100%;
    height: 350px;
    right: -55px;
    top: 16%;
  }
  .vector-2 {
    width: 100%;
    height: 450px;
    left: -10%;
    top: 38%;
  }
  .vector-3 {
    display: block;
    width: 83%;
    left: 0;
    top: 63%;
    transform: rotate(180deg);
  }

  .vector-4 {
    display: block;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .hoja-1 {
    position: absolute;
    left: -130px;
    top: 79%;
    transform: rotate(70deg);
    width: 230px;
    z-index: 5;
  }
  .hoja-2 {
    position: absolute;
    right: -120px;
    top: 50%;
    transform: rotate(-130deg);
    width: 230px;
    z-index: 5;
  }
  .aside__menu img {
    margin: 0;
    width: 250px;
  }
  .aside__menu-text p ,h3 {
    text-align: center;
    padding: 0;
  }
  .menu__botones {
    flex-direction: column;
    gap: 10px;
  }
  .menu__botones .menu-button {
    padding: 8px 20px;
  }
  .plato-1 .aside__menu-text p,
  h3 {
    color: #100;
  }
  .plato-1 .aside__menu-text h3 {
    color: #100;
  }
  .plato-1 .plato {
    order: 1;
  }
  .plato-1 .aside__menu-text {
    order: 2;
  }
  .plato-3 .plato {
    order: 1;
  }
  .plato-3 .aside__menu-text {
    order: 2;
  }
  .plato-2 .aside__menu-text {
    order: 2;
    text-align: center;
  }
  .plate-4 .aside__menu-text {
    order: 2;
    text-align: center;
  }
  .aside__menu .aside__menu-text:nth-child(1) {
    text-align: center;
  }
  .aside__menu img:nth-child(2n) {
    margin-left: 0;
  }
  .menu__botones img {
    width: 100px;
  }
  .header .button{
    left: 10%;
    bottom: 10%;
    transform: translateX(0);
  }
  .corte .pollo {
    width: 250px;
  }
  .cortes_contenido p {
    font-size: 0.7rem;
    font-weight: 200;
  }
  .cortes_contenido {
    width: 250px;
    padding: 150px 30px 120px 30px;
  }
  .arrow-izquierda,
  .arrow-derecha {
    width: 30px;
    top: 65%;
  }
  .arrow-izquierda {
    left: 15px;
  }
  .arrow-derecha {
    right: 15px;
  }

  .titulo h3,
  .titulo__bebidas {
    text-align: center;
    font-size: 2.5rem;
  }
  .titulo p {
    font-size: 0.35rem;
  }
  .titulo {
    margin: 0 10px;
  }
  .guarniciones__titulo img,
  .titulo__bebidas img {
    width: 40px;
  }
  .titulo__bebidas img {
    margin-left: -98px;
    margin-bottom: 5px;
  }
  .slider img {
    width: 160px;
  }
  .slider p {
    margin-bottom: 10px;
    font-family: "KumbhSans-Regular", sans-serif;
    font-size: 0.7rem;
  }
  .texto-guarniciones {
    width: 100px;
    text-align: start;
  }

  .bebidas {
    width: 100%;
    padding: 50px 20px 120px 20px;
  }

  .bebidas img {
    width: 80px;
  }

  .descripcion-bebida span {
    text-align: center;
    color: #e7e4e4;
    font-family: katler-Rough;
  }
  .descripcion-bebida span:first-child {
    font-size: 0.8rem;
    letter-spacing: 1px;
  }
  .descripcion-bebida span:nth-child(2) {
    font-size: 1.3rem;
  }
  .descripcion-bebida .menu-button {
    padding: 8px 20px;
  }
  .container__bebidas-slider {
    width: 55%;
    margin: auto;
    overflow: hidden;
  }
  .slider-bebidas {
    width: 300%;
    transition: transform 0.3s ease-in;
  }
  .izquierda,
  .derecha {
    width: 40px;
  }
  .corte { 
    width: 400px;
  }
  .plato-1 h3{
    text-align: center;
  }
}