@media screen and (min-width: 1024px) {

  .breadcrumbs{
    max-width: 1920px;
    margin:5rem auto 0;
    padding:  3rem;
  }

.header-style {
    justify-content: center;
}   

.header-style .nav-bar{
  max-width: 1920px;
    justify-content: center;
}


.header-style .nav-bar-desktop{
    width: 55%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap:1rem; 
  }

  .nav-bar-desktop .nav-bar-menu{
    display: flex;
    flex-direction: row;
    list-style: none;

  }

.nav-bar-desktop .nav-bar-menu li a{
    display: block;
    padding: 0.25rem 1rem;
    color:white;
    font-family: var(--font-ui);
    font-weight: var(--font-medium);
    text-decoration: none;
}


.nav-bar-desktop .nav-bar-menu li a:hover{
  color: black;
  background-color: var(--light-rose);
  border-radius: 10rem;
}

.nav-bar-desktop .nav-bar-menu li a:active{
    background-color: var(--neutral-rose);
    box-shadow: inset 2px 2px 5px #e38d6e;
}
.header-style .logo-mobile{
    display:none;
}

.header-style .logo-desktop{
    display: flex;
      margin: auto;
    display: flex;
    justify-content: center;
    padding: 1rem;
    
}

.header-style .btn-menu-mobile{
    display: none;
}


.btn-hero{
    width: 210px;
    height: 80px;
    right: 1rem;
}

/* ===== section hero ===== */
.hero-index{
    height: 800px;
}


.hero-index .hero-cta{
    margin-top: 7rem;
}

.hero-index .container-buttons-hero{
    flex-direction: row;
    justify-content: center;
    gap:3rem;
}

/* ===== section localization ===== */
body main .section-localization{
  margin: auto;
    height: 500px;
    align-items: flex-start;
    padding: 4rem 3rem;
    overflow: hidden;
       margin: -6rem auto 0;
      
  
}

.section-localization .localization-content{
  margin: auto;

}

.localization-bg {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 30%;
  height: auto;
  z-index: 0;
}


/* ===== section reviews ===== */


/* Flechas mover slider */

.slider-container::-webkit-scrollbar,
.slider-container-blog::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.slider-container,
.slider-container-blog {
    position: relative;
      scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
    
  }

 .slider-container .slider-arrow ,
 .slider-container-blog .slider-arrow {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;  
    border:none;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
    z-index: 10;

  }

  .slider-container .left-arrow{
    left: 0;
  }

  .slider-container .right-arrow{
    right: 0;
  }

  .slider-arrow img {
    width: 40px;
    height: 40px;
  }

  /* nimación al hacer hover */
  .slider-arrow:hover {
    transform: translateY(-50%) scale(1.1);
    transition: transform 0.3s ease;
  }

  /* desactivar flechas visualmente */
  .slider-arrow:disabled {
    opacity: 0.3;
    cursor: default;
  }




/* Container reviews */  

.main-class .section-container-reviews{
  top:8.5rem;
}



.container-title-reviews{
  margin:auto;
  gap:1rem;
}
main .section-container-reviews{
  position: relative;
  background-image: url(../img/vectors/vector-bg-reviews-desktop.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center -40px;
  z-index: 100;
     margin: auto;
}



/* Slider reviews */

.section-container-reviews .slider-container{
  padding: 0;
}



.slider-container,
.slider-container-blog{
  display: flex;
  flex-direction: row;
  margin: auto;
    max-width: 1100px;
    align-self: center;
}



/* section about */

.section-about{
    top:-13rem;
    height: 600px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: var(--primary-100);
    padding: 0;
    z-index: 4;
       margin: auto;
}

.section-about .container-img-about{
    width: 100%;
    grid-column: 2;
    grid-row:span 2;
}

.section-about .about-content{
    max-width: 900px;
    place-items: flex-end;
    text-align: right;
    padding: 6rem  3rem 0;
    grid-column: 1;
    grid-row:2;
    margin: 1rem auto 4rem
    
}

.container-img-about img{
  height: 600px;
}


/* ===== Section blog ===== */
.section-container-blog{
    padding: 4rem 3rem 8rem;
       margin: auto;
}

.section-container-blog h2{
    margin-bottom: 2rem;
}

.slider-track{
  margin-top: 3rem;
}


   .slider-container-blog .left-arrow-blog  {
    left:0;
  }

 
  .slider-container-blog .right-arrow-blog {
    right: 0;
  }


.section-container-blog .container-title-blog{
  margin:auto;
}

/* ===== section contact ===== */

.section-contact-index{
  height: 650px;
    background-image: url(../img/yoga-v-2.webp);
    background-size: cover;
    background-position: bottom;
    position: relative;
    padding:  0;
    z-index: 0;
       margin: -13rem auto 3rem;
       display: flex;
       justify-content: center;
       align-items: flex-start;
}

.section-contact{
  height: 900px;
    background-image: url(../img/yoga-v-2.webp);
    background-size: cover;
    background-position: bottom;
    padding:  0;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
       margin: auto;
}

.section-contact-index .contact-wrapper .contact-content{
    margin:auto;
}


  .contact-wrapper {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap:2rem;
  }

  .contact-image {
    display: none;

  }
.contact-image img {
    width: 100%;
    height: auto;
  object-fit: cover;         /* recorta la imagen para llenar el contenedor */
  object-position: top left; /* muestra solo la esquina superior izquierda */
}


  .contact-content {   
    width: 40%;
    text-align: left;
    padding-left: 2rem;
    border-radius: 30px;
    background-color: #f4f4ec;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.621);
  }


  /* Flechas blog */


  .slider-container-blog .slider-arrow-blog img {
    width: 40px;
    height: 40px;
  }

  /* ✅ Animación opcional al hacer hover */
    .slider-container-blog .slider-arrow-blog:hover {
    transform: translateY(-50%) scale(1.1);
    transition: transform 0.3s ease;
  }

  /* ✅ Desactivadas visualmente si no hay más contenido */
    .slider-container-blog .slider-arrow-blog:disabled {
    opacity: 0.3;
    cursor: default;
  }

  /* ===== footer ===== */

  .section-footer{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:1rem;
       margin: auto;
  }




  .section-footer .footer-menu{
    grid-column: span 2;
    grid-row: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap:3rem;
  }

  .section-footer .footer-contact-content{
    grid-row: 1;
    grid-column: 4;
  }

  .section-footer .footer-logo{
    width: 100px;
    grid-row: 2;
    grid-column: span 3;
    place-items: flex-end;
    margin-left: auto;
   

  }

  .section-footer .footer-copy{
    height: 50px;
    grid-column: 4;
    grid-row: 2;
    margin: 0 3rem;
  }
  


  /* ===== PAGE SCHEDULE ===== */
  
 body main .section-container-schedule{
     max-width: 1400px;
     margin:0  auto 3rem;
 } 

 body main .section-container-schedule h2{
    margin-bottom: 4rem;
 } 

.item-schedule{
    place-items: center;
}

.section-container-schedule .container-buttons {
    margin-top: 4rem;
}


/* ===== PAGE LOCALIZATION ===== */

.section-page-localization{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 2rem 3rem;
  width: 100%;
  max-width: 1920px;
     margin: auto;
}

.section-page-localization h2{
  grid-column: span 3;
  grid-row: 1;
  margin-bottom: 2rem;
}

.section-page-localization .items-localization{
  grid-column: 1;
  grid-row: 2;
  gap:2rem;
}
.section-page-localization .hero-bg{
  grid-column: 2 / -1; /* ocupa todas las columnas */
  grid-row:2;    /* ocupa todas las filas */
  width: 100%;
  height: 80%;
  object-fit: cover;
  object-position: center;
 
}

.main-localization .vector-bg{
  left: 74rem;
  top: -10rem;
}


/* ===== PAGE ABOUT US ===== */

.section-page-about-us{
  max-width: 1960px;
  margin: 0 auto 17rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:1rem;
  padding: 0;
}
.section-page-about-us h2{
  padding: 1rem 3rem;
  grid-column: span 2;
  grid-row: 1;
}

.section-page-about-us p{
  line-height: 1.75rem;
  margin-bottom: 2rem;

}

.section-page-about-us .text-1{
  grid-column: span 2;
  grid-row: 2;
  padding: 0 3rem;

}
.section-page-about-us .text-2{
  grid-column: 2;
  padding: 0 3rem 0 1rem;

}
.section-page-about-us .text-3{
  grid-column:1;
  grid-row: 4;
  padding: 0 1rem 0 3rem;
}
.section-page-about-us .img-1{
  object-fit: cover;
  grid-column: 1;
  grid-row: 3;
  padding: 0 1rem 0 3rem;
}
.section-page-about-us .img-2{
  object-fit: cover;
  grid-column: 2;
  grid-row: 4;
  padding: 0 3rem 0 1rem;
}

/* ================================     PAGE CLASS    ================================ */

.section-container-classes{
    max-width: 1400px;
  padding: 2rem 0 2rem;
  margin: auto;
}

.section-container-classes h2{
  padding: 2rem 3rem;
}


.section-container-classes .hero-bg{
  width: 100%;
  height: 300px; /* o el alto del contenedor */
  object-fit: cover;       /* recorta la imagen para llenar el marco */
  object-position: center 30%;
}


.section-container-classes .item-class{
  padding: 2rem 3rem;
  max-width: 1100px;
}

.section-container-classes .container-buttons{
  margin-top: 4rem;
}
/* ================================     Vector BG     ================================ */

.vector-bg{
  width: 300px;
  height: auto;
  display: block;
  position:relative;
}
.vector-bg img{
  object-fit: contain;
  position: absolute;
  top:4rem;
  z-index: 99999;

}


/* ================================    Container BOOKING    ================================ */

.modal-booking-container {
  position: fixed;
  top: 0;
  right: 0;
  height: auto;
  width: 100%;
  max-width: 1000px; /* ajusta según tu diseño */
  background-color: #fff;
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 10000000;
  box-shadow: 0 0 20px black;

  /* Oculto por defecto */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* Animación de entrada desde la derecha */
  transform: translateX(-100%);
  transition: transform 0.4s ease, opacity 0.4s ease;
}


.modal-booking-container.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.items-booking-time .item-time-1,
.items-booking-time .item-time-2{
 width: auto;
 padding: 0.5rem 1rem;
}

.form-booking-style{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:1rem;
}

.container-booking-name{
  padding: 1rem;
}

.form-group{
  width: 500px;
  grid-row: 1;
  grid-column: 1;
}

.checkbox-group{
  grid-row: 2;
}

.button-form-booking{
  grid-column: 2;
  align-self: center;
}

/* ================================     SECTION CANCEL CLASS    ================================ */
.section-cancel-class{
  height: 300px;
  max-height: 500px;
  padding: 8rem 1rem 4rem;
   margin: 0 auto 5rem;
}



/* ================================   PAGE  BLOG    ================================ */

 .section-page-container-blog p {
    padding: 2rem 0;
 }
.container-blog-content{
  max-width: 1100px;
  margin:auto;
}

.blog-filters{
  margin: auto;
  display: flex;
  gap:2rem;
}

.blog-filters select{
  padding: 0.5rem 1rem;
}

.blog-grid{
  padding: 1rem 3rem;
}

.post-card{
  align-items: center;
}

.post-card img{
  width: 1100px;
  height: 300px;
}

.post-card h3{
  padding: 1rem 0;
}

.post-card p {
  padding: 0;
  max-width: 1100px;
}

.post-card .btn-blog{
  margin-top: 3rem;
  justify-self: flex-end;
  padding: 0.25rem 0;

}

.main-blog .section-localization{
  top:2rem;
  margin: auto;
}


/* ===== MODAL CANCEL ===== */
.container-modal-cancel{
  width: 600px;
}

.container-modal-cancel p{
  width: 90%;
  padding: 2rem 0;
}

.modal-booking-canceled .container-modal-cancel .booking-cancel{
  display: flex;
  flex-direction: column;
  gap:2rem;
} 
  
 /*REVIEWS Y CONTACT*/ 
 
 body .main-class .section-localization{
     margin:4rem auto 0;
     padding: 11rem 1rem;
 }
  
 body #main-schedule .section-localization{
     padding: 21rem 3rem 9rem;
     height: auto;
 } 

}

/* ================================     > 1280PX    ================================ */
@media screen and (min-width: 1920px){

body main .section-container-reviews{
  background-position: center -200px;

}

.slider-container, .slider-container-blog{
  max-width: 1440px;
}

.container-blog-content{
  max-width: 1400px;
  margin:auto;
}

.post-card img{
  width: 1400px;
  height: 300px;
}

.post-card h3{
  padding: 1rem 0;
}

.post-card p {
  padding: 0;
  max-width: 1400px;
}

.section-page-about-us,
 .section-page-localization,
.container-title-reviews {
  max-width: 1400px;}

.container-title-reviews{
  width: 1440px;
}


.main-localization .vector-bg{
  left:0;
}

.main-localization .section-container-reviews {
top: 0;
}

.btn-hero{
    right: 11rem;
}
    
    
    }