/* Importación de fuente desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
    --primary-color: #121212;
    --secundary-color: #ff0000;
    --black-color: #000000;
    --white-color: #ffffff;
}

/* General Styles
/*----------------------------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
body {
    background-color: var(--primary-color);
    font-size: 32px;
    font-weight: 400;
    line-height: 164%;
    letter-spacing: 0.32px;
  }
 /* p {
    color:rgba(253, 253, 253, 0);
    text-shadow: 5px 4px 3px black;
  } */

/* - Section Title
--------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--primary-color);
  font-family: "Poppins", sans-serif;;
  text-transform: capitalize;
  font-weight: 700;
  letter-spacing: 0.84px;
  line-height: 115%;
}


/* - Buttons
--------------------------------------------------------------*/
.btn {
    background-color: var(--secundary-color);
    padding: 10px;
    font-weight: 400;
    text-transform: uppercase;
    border-radius: 10px;
    letter-spacing: 0.1rem;
    transition: all 0.4s ease-in-out;
  }

  .btn-primary {
    --bs-btn-color: var(--white-color);
    --bs-btn-border-color:  var(--secundary-color);
    --bs-btn-hover-color: var(--white-color);
    --bs-btn-hover-bg: var(--black-color);
    --bs-btn-hover-border-color: var(--black-color);
  }
  .btn-secundary {
    background-color:var(--white-color);
    --bs-btn-color: var(--black-color);
    --bs-btn-border-color:  var(--white-color);
    --bs-btn-hover-color: var(--white-color);
    --bs-btn-hover-bg: var(--black-color);
    --bs-btn-hover-border-color: var(--black-color);
  }
  
  #backToTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: none;
    background-color: var(--secundary-color);
    color: var(--white-color);
    border: none;
    border-radius: 8px;
    padding: 5px;
    cursor: pointer;
    z-index: 1000;
    width: 48px;
    height: 48px;
}

#backToTopBtn i{
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;

}

#backToTopBtn:hover {
    background-color: #c41700;
}

/* Preloader full screen */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #111;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    z-index: 9999;
  }
  
  /* Barra de progreso */
/* Preloader full screen */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #111;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    z-index: 9999;
  }
  
  /* Barra de progreso */
  .progress-bar {
    height: 10vh; /* usar viewport height para que sea relativo al alto */
    width: 0%; /* empieza vacía */
    background: linear-gradient(
      to right,
      black 0%,
      black 79%,
      white 79%,
      white 80%,
      red 80%,
      red 94%,
      white 94%,
      white 95%,
      black 95%,
      black 100%
    );
    background-size: 100% 100%; /* tamaño fijo para el gradiente */
    transition: width 5s linear;
    border-radius: 5px; /* bordes suaves */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Texto porcentaje */
  .text-loading {
    font-family: 'Bebas Neue', sans-serif;
    position: absolute;
    left: 5vw; /* relativo a la pantalla */
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 2.2rem;
    font-weight: bold;
    z-index: 10000;
    user-select: none; /* evitar selección accidental */
  }  

/* Estilos del navbar */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 28px;
}

.logo img{
    height: 35px;
}

.hamburger{
    display: none;
}

.nav-list {
    list-style-type: none;
    display: flex;
    gap: 48px;
    margin:0;
    padding: 0;
}

.abrir-menu,
.cerrar-menu {
    display: none;
}

.nav-link {
    color: var(--white-color);
    font-size: 16px;
    font-weight: 400;
    text-decoration: none; /* Asegúrate de que los enlaces no tengan subrayado por defecto */
    position: relative;
    padding: 1px 0; /* Añadido espacio para el subrayado */
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: -1px; /* Ajustado para alinearse con el texto */
    left: 0;
    width: 0;
    height: 2px;
    background: var(--secundary-color);
    transition: 0.3s ease;
}

.nav-link:hover::before {
    color: var(--white-color);
    width: 100%;
    text-decoration: none;
}
.nav-link:hover {
    color: var(--white-color); /* Asegúrate de que el color del texto se mantenga blanco */
}

.btn-navbar {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 2px;
    border: 2px solid var(--secundary-color);
    color: var(--white-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    background-color: var(--primary-color);
}

.btn-navbar:hover {
    background-color: var(--secundary-color);
    transition: 0.5s linear;
}

.abrir-menu,
.cerrar-menu {
    display: none;
}



/* Estilos de Home */

section{
    padding:100px 100px;
}
.home{
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: var(--primary-color);
}

.home::before{
    z-index: 777;
    content:'';
    position: absolute;
    background: rgba(0,0,0, 0.5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.home .content {
    z-index: 888;
    color: var(--white-color);
    width: 70%;
    margin-top: 50px;
}

.home .content h1{
    color: var(--white-color);
    font-size: 64px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 5px;
    line-height: 75px;
    margin-bottom: 30px;
}

.home .content h1 span{
    font-size: 48px;
    font-weight: 600;
    color: var(--secundary-color);
}

.home .content p{
font-size: 24px;
font-weight: 400;
margin-bottom: 65px;
color: var(--white-color);
}
.home .content p strong{
    font-weight: 600;
    color: var(--secundary-color);
    }

.home .content a{
    background: var(--secundary-color);
    padding: 15px 35px;
    color: var(--white-color);
    font-size: 18px;
    font-weight: 300;
    text-decoration: none;
    border-radius: 5px;
}

.home .content a:hover{
    background: var(--white-color);
    padding: 15px 35px;
    color: var(--secundary-color);
    font-size: 18px;
    font-weight: 300;
    text-decoration: none;
    border-radius: px;
}

.home .media-icons{
    z-index: 888;
    position: absolute;
    right: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 0.5s ease;
}

.home .media-icons a{
    color: var(--white-color);
    font-size: 24px;
    transition: 0.5s ease;
}
.home .media-icons a:not(:last-child){
    margin-bottom: 20px;
}
.home .media-icons a:hover{
    transform: scale(1.3);
}

.home video{
    z-index:000 ;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-navigation{
    z-index: 888;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(80px);
    margin-bottom: 12px;
}

.slider-navigation .nav-btn {
    width: 12px;
    height: 12px;
    background: var(--white-color);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
    transition: 0.3s ease;
}

.slider-navigation .nav-btn.active {
    background: var(--secundary-color);
}

.slider-navigation .nav-btn:not(:last-child){
    margin-right: 20px;
}

.slider-navigation .nav-btn:hover{
    transform: scale(1.2);
}

.video-slide {
    position: absolute;
    width: 100%;
    clip-path: circle(0% at 0 50%);
}

.video-slide.active{
    clip-path: circle(150% at 0 50%);
    transition: 2s;
    transition-property: clip-path;
}

/* Estilos Row */

.sectionRow {
    background-color: var(--white-color);
    padding: 50px;
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
}

.row {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto; 
}

.contentWrapper {
    flex: 1;
    padding: 50px;
}

/* Estilos de texto */
.text-section-row .textWrapper {
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
    font-style: italic;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 15px;
}

.text-section-row h2 {
    font-size: 50px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--secundary-color);
    display: flex;
    justify-content: start;
    align-items: center;
    padding-bottom: 20px;
    text-shadow: 0px 0px 0px black;
}

.text-section-row p {
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 16px;
    line-height: 25px;
    padding-bottom: 25px;
}

/* Estilos de botones */
.button-row {
    font-size: 13px;
    letter-spacing: 2px;
    padding: 5px 10px;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    background: var(--white-color);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    user-select: none;
}

.button-row:hover {
    background: var(--secundary-color);
    color: var(--white-color);
    border: 2px solid var(--secundary-color);
}

/* Estilos de imágenes */
.image-section-row {
    flex: 1;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-section-row img {
    max-width: 100%; /* La imagen no puede exceder el ancho del contenedor */
    height: auto; /* Mantiene la proporción */
    min-width: 345px; /* Establece un ancho mínimo */
    min-height: 200px; /* Establece una altura mínima opcional */
    object-fit: contain; /* Mantiene la relación de aspecto sin recortar la imagen */
    filter: brightness(0.7); /* Filtro inicial */
    transition: transform 0.3s, filter 0.3s; /* Transiciones para las imágenes */
}

.image-section-row img:hover {
    transform: scale(1.1);
    filter: brightness(1); /* Devuelve el brillo a normal al pasar el ratón */
}

/* Estilos para el slider */
.sectionSlider {
    width: 100%;
    min-height: 80vh;
    background-color: var(--primary-color);
}

.sliderText {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
}

.sliderText h2 {
    color: var(--white-color);
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    font-style: italic;
    text-decoration: none;
    line-height: 1.1em;
    letter-spacing: 9px;
}

.sliderText h5 {
    color: var(--secundary-color);
    font-size: 50px;
    font-weight: 700;
    text-transform: uppercase;
    font-style: normal;
    text-decoration: none;
    line-height: 1.1em;
}

.swiper {
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.swiper-slide {
    display: flex;
    justify-content: center;
}

.card {
    width: 100%;
    max-width: 400px;
    display: block;
    overflow: hidden;
    transition: transform 0.3s ease;
    text-decoration: none;
    color: inherit;
    background-color: var(--primary-color);
}
.card:hover {
    transform: scale(1.1);
}

.card img {
    width: 100%;
    height: auto;
    filter: brightness(0.5);
    border-color: var(--primary-color);
}
.card img:hover {
    filter: brightness(1);
}

.card-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.card-body h3 {
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    font-style: italic;
    text-decoration: none;
    line-height: 1.3em;
    letter-spacing: 9px;
    color: var(--white-color);
}

.card-body p {
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    font-style: normal;
    text-decoration: none;
    line-height: 1em;
    color: var(--secundary-color);
}

.card h3:hover,.card-body p:hover {
    transform: scale(0.9);
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--white-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: var(--primary-color);
    color: var(--secundary-color);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 18px;
}

.container-equipo {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:var(--white-color);
    padding: 40px;
  }
  
  .content-equipo {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    padding: 40px;
  }
  
  .text-section-equipo {
    flex: 1;
    padding: 40px;
  }

  .text-section-equipo .textWrapper {
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
    font-style: italic;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}

  .text-section-equipo h2 {
    font-size: 50px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--secundary-color);
    padding-bottom: 20px;
    text-shadow: 0px 0px 0px black;
  }
  
  .text-section-equipo p {
    font-size: 16px;
    line-height: 25px;
    padding-bottom: 25px;
  }
  
  .button-equipo {
    font-size: 13px;
    letter-spacing: 2px;
    padding: 5px 10px;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    background: var(--white-color);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    user-select: none;
  }
  
  .button-equipo:hover {
    background: var(--secundary-color);
    color: var(--white-color);
    border: 2px;
    border: 2px solid var(--secundary-color);
  }
  
  .image-section-equipo {
    flex: 1;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .image-section-equipo img {
    max-width: 100%; /* La imagen no puede exceder el ancho del contenedor */
    height: auto; /* Mantiene la proporción */
    min-width: 345px; /* Establece un ancho mínimo */
    min-height: 200px; /* Establece una altura mínima opcional */
    object-fit: contain; /* Mantiene la relación de aspecto sin recortar la imagen */
    filter: brightness(0.7); /* Filtro inicial */
    transition: transform 0.3s, filter 0.3s; /* Transiciones para las imágenes */
  }

  .image-section-equipo img:hover {
    transform: scale(1.1);
    transition: 0.3s;
    filter: brightness(1);
  }

  .section-horarios {
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    background-color:var(--primary-color);
    padding: 40px;
}

.section-content {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    max-width: 1200px;
    margin: 40px auto;
    text-align: center; 
}

.text-section {
    margin-bottom: 20px;
}

.title {
    color: var(--white-color);
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    font-style: italic;
    text-decoration: none;
    line-height: 1.1em;
    letter-spacing: 9px;
}

.subtitle {
    color: var(--secundary-color);
    font-size: 50px;
    font-weight: 700;
    text-transform: uppercase;
    font-style: normal;
    text-decoration: none;
    line-height: 1.1em;
}

.text-section p {
    color: var(--white-color);
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.image-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-section img {
    max-width: 80%;
    height: auto;
    transition: transform 0.3s ease;
}

.image-section img:hover {
    transform: scale(1.05);
}


footer {
    display: grid;
    justify-content: center;
    align-content: end;
    background-color: black;
    padding: 50px 50px 0px 50px;
    position: relative;
    width: 100%;
}

footer .container-footer{
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    grid-gap: 30px;
}

footer .container-footer .sec h2{
    position: relative;
    color: var(--secundary-color);
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 20px;
}

footer .container-footer .sec p{
    color: var(--white-color);
    font-size: 14px;
    line-height: 1.2em;
}

footer .container-footer .sci {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3,50px);
}

footer .container-footer .sci li {
    list-style: none;
}

footer .container-footer .sci li a {
    display: inline-block;
    width: 32px ;
    height: 32px;
    display: grid;
    align-content: center;
    justify-content: center;
    text-decoration: none;
}

footer .container-footer .sci li a i{
    color: var(--white-color);
    font-size: 20px;
}

footer .container-footer .sci li a i:hover{
    color: var(--secundary-color);
    transform: scale(1.4);
}

footer .container-footer .quicklinks{
    position: relative;

}

footer .container-footer .quicklinks ul{
    margin: 0;
    padding: 0;
}

footer .container-footer .quicklinks ul li{
    list-style: none;
    line-height: .5em;
}

footer .container-footer .quicklinks ul li a {
    color: var(--white-color);
    text-decoration: none;
    margin-bottom: 10px;
    display: inline-block;
    font-size: 14px;
}

footer .container-footer .quicklinks ul li a:hover{
    color: var(--secundary-color);
    transform: scale(1.2);
    transition: 0.3s ease;
}

footer .container-footer .contact .info {
    position: relative;
    margin: 0;
    padding: 0;
}

footer .container-footer .contact .info li {
    display: grid;
    grid-template-columns: 30px 1fr;
    margin-bottom: 10px;
    align-items: center;
    line-height: 1.2em;
}

footer .container-footer .contact .info li a {
    display: contents; 
    color: var(--white-color);
    text-decoration: none;
    font-size: 13px;
}

footer .container-footer .contact .info li a i {
    font-size: 24px;
    color: var(--white-color);
}

footer .container-footer .contact .info li a:hover i,
footer .container-footer .contact .info li a:hover {
    color: var(--secundary-color);
    transform: scale(1.2);
    transition: 0.3s ease;
    cursor: pointer;
}

.copyrightText {
    width: 100%;
    color: var(--white-color);
    padding: 0px 100px;
    text-align: center;
    font-size: 12px;
}

.copyrightText p{
    margin: 0;
}
.copyrightText a{
    color: orange;
    text-decoration: none;
}


/* AGENDE SU CLASE DE PRUEBA */

.section-image {
    width: 100%;
    height: auto; /* Ajusta la altura según tus necesidades */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
}

.section-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7)
}

.section-form {
    background-color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
}

.form-container {
    width: 100%;
    max-width: 400px;
}

.form-container h1 {
    margin: 0px;
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
    font-style: italic;
    display: flex;
    justify-content: flex-start;
    text-align: center;
    color: var(--primary-color);
}
.form-container h2{
    margin: 0px;
    font-size: 50px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--secundary-color);
    text-align: center;
}
.form-container p {
    font-size: 16px;
    text-align: center;
    color: var(--primary-color);
    margin: 0;
}

.form-container a{
    width: 40%;
}
form {
    display: flex;
    flex-direction: column;
}

label {
    font-size: 14px;
    font-weight: bold;
    color: var(--primary-color);
}

input, textarea, select {
    width: 100%;
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    font-size: 14px;
    padding: 5px; /* Agrega padding interno */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
}

input{
    height: 45px;
}

textarea{
    margin-top: 10px;
}

select {
    height: 50px;
    margin-bottom: 16px;
}

button#send, button#volver {
    position: flex;
    align-content: center;
    font-size: 13px;
    letter-spacing: 2px;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    background-color: black;
    color: var(--white-color);
    border: 2px;
    border: 2px solid  var(--primary-color);
}
  
button#send:hover, button#volver:hover {
    background: var(--white-color);
    color:var(--primary-color);
    border: 2px;
    border: 2px solid var(--primary-color);
    transition: 0.3s ease;
  }
.form-gracias{
    display: flex;
    flex-direction: column
}
.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0;
    font-size: 14px;
    color: var( --secundary-color);
    width: 100%;
}

.form-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--secundary-color);
    flex-shrink: 0;
    margin: 0; 
    position: relative;
    top: 0.5px;
    cursor: pointer;
    border: 2px solid var(--primary-color);
}

.form-check label {
    font-weight: normal;
    line-height: 1.2;
    margin: 0;
    cursor: pointer;
}


.form-check a {
    color: var(--primary-color);
    text-decoration: underline;
}



  /* CONTACTO */

  .hero-section-contact {
    position: relative;
    width: 100%;
    height: 600px;
    background: url(/img/todos_byn.JPG) no-repeat center center/cover;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-content-contact {
    position: absolute;
    top: 50%;
    left: 100px; /* Ajuste la posición a la izquierda */
    transform: translateY(-50%);
    text-align: left; /* Alinea el texto a la izquierda */
}

.hero-content-contact h1, .hero-content-contact p {
    margin: 0;
}

.hero-content-contact p{
    font-size: 40px;
    font-weight: 400;
    text-transform: uppercase;
    font-style: italic;
    display: flex;
    justify-content: flex-start;
    text-align: center;
    color: var(--white-color);
}

.hero-content-contact h1{
    font-size: 70px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--secundary-color);
    text-align: center;
}

.contact-section {
    display: flex;
    flex-wrap: wrap;
    padding: 80px 80px 100px;
    background: var(--white-color);
}

.contact-info, .contact-form {
    flex: 1;
    padding: 20px;
}

.contact-info {
    max-width: 50%;
}

.contact-form {
    max-width: 50%;
}

.contact-info h2, .contact-form h2 {
    margin-top: 0;
    font-size: 32px;
    text-transform: uppercase;
    color: var(--secundary-color);
}

.contact-list {
    list-style: none;
    padding: 0;
    font-size: 16px;
}

.contact-list li {
    margin-bottom: 0px;
    line-height: 2em;
}

.contact-list i {
    margin-right: 10px;
    color: var(--secundary-color);
}

.contact-info .contact-hours p{
    font-size: 20px;
    line-height: 32px;
}

.contact-form label {
    display: block;
}

.contact-form input, .contact-form textarea, .contact-form select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
}

.maps-section {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
}

.map {
    flex: 1;
    margin: 10px;
}

.map h3{
    font-size: 20px;
    color: var(--white-color);
}

.map iframe {
    width: 100%;
    height: 300px;
    border: 0;
}

/* PROGRAMAS */

.programs-container {
    width: 100%;
    height: auto; /* Cambiar a auto */
    background: url(/img/bjj-27\ -\ copia.jpg) no-repeat center center/cover;
    background-attachment: scroll; /* <- Esto la hace fija */
    padding: 50px;
    color: var(--white-color);
    text-align: left;
}

.programs-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
}

.programs-header h3 {
    font-size: 40px;
    font-weight: 400;
    text-transform: uppercase;
    font-style: italic;
    display: flex;
    justify-content: flex-start;
    text-align: center;
    color: var(--white-color);
}

.programs-header h2 {
    font-size: 70px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--secundary-color);
    text-align: center;
}

.programs-description p {
    max-width: 80%;
    margin-bottom: 30px;
    line-height: 1.6;
    font-size: 16px;
}

.programs-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style-type: none;
    overflow-x: hidden; /* Cambiar a hidden para evitar scroll horizontal */
    padding: 0;
    margin: 0;
    border: none; /* Elimina bordes */
    box-shadow: none; /* Elimina sombras */
}

.programs-list li {
    flex: 1;
    border: none; /* Elimina bordes en los elementos de la lista */
    line-height: 1.2;
}

.programs-list a {
    display: block;
    color:var(--white-color);
    text-decoration: none;
    text-align: center;
    font-size: 16px;
}

.programs-list a:hover {
    color:var(--secundary-color);
}

.programs-list a i {
    padding: 5px;
    color:var(--secundary-color);
    text-decoration: none;
    text-align: center;
    justify-content: flex-start;
    font-size: 18px;
}

.programs-list a i:hover {
    color:var(--white-color);
}




/* Contenedor General */
.sectionRow-programs {
    background-color: var(--white-color);
    padding: 50px 0;
}

/* Estructura de las filas de programas */
.row-programs {
    display: flex;
    flex-direction: column; /* Cambia la dirección a columna en pantallas pequeñas */
    gap: 30px; /* Espacio entre los elementos */
}

/* Cada item del programa */
.programs-item {
    display: flex;
    align-items: center; /* Alinea los elementos al centro verticalmente */
    justify-content: space-between; /* Asegura que la imagen y el texto estén separados */
    gap: 20px; /* Espacio entre la imagen y el texto */
    flex-wrap: wrap; /* Permite que se ajusten los elementos si no hay espacio */
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--white-color); /* Fondo blanco para los items */
}

/* Ajuste de imágenes */
.image-programs-row {
    flex: 1 1 45%; /* Asigna 45% del ancho al contenedor de la imagen */
    min-width: 300px; /* Asegura un tamaño mínimo para pantallas pequeñas */
}

.programs-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen ocupe todo el espacio manteniendo la relación de aspecto */
    border-radius: 8px;
    filter: brightness(0.7); /* Filtro inicial */
    transition: transform 0.3s, filter 0.3s;
}

.programs-image:hover {
    transform: scale(1.05); /* Efecto de zoom */
    filter: brightness(1);
    cursor: pointer;
}


/* Ajuste del contenido de texto */
.contentWrapper-programs {
    flex: 1 1 50%; /* Asigna 50% del ancho al contenido de texto */
    padding: 20px;
}

.text-programs-row .textWrapper-programs {
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    font-style: italic;
}

.text-programs-row h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--secundary-color);
    text-transform: uppercase;
    margin-bottom: 15px;
}

.text-programs-row p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* END PROGRAMAS */



/* CLASES */

.clases-item {
    display: grid; /* Usar grid para estructurar el contenido */
    grid-template-columns: repeat(2, 1fr); /* Dos columnas de igual tamaño */
    align-items: center; /* Alinea verticalmente el contenido */
    justify-items: center; /* Centra horizontalmente cada ítem en la cuadrícula */
    gap: 20px; /* Espacio entre elementos */
    padding: 100px 40px; /* Espaciado vertical y horizontal */
    box-sizing: border-box;
    background-color: var(--white-color); /* Fondo blanco para los items */
    width: 100%; /* Ancho completo */
    min-height: 100vh; /* Asegura que el contenedor ocupe al menos la altura de la ventana */
}

.clases-content {
    display: contents; /* Permite que los elementos internos tomen el lugar en la cuadrícula */
}

.text-clases-row {
    text-align: left; /* Alinear texto a la izquierda */
    padding: 40px; /* Espaciado interno */
}

.text-clases-row .textWrapper-clases {
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
    font-style: italic;
    color: var(--primary-color);
}

.text-clases-row h2 {
    font-size: 70px;
    font-weight: 700;
    color: var(--secundary-color);
    text-transform: uppercase;
    margin-bottom: 15px;
}

.text-clases-row p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: var(--primary-color);
}

.image-clases-row {
    justify-self: center; /* Centra la imagen en su celda */
    max-width: 600px; /* Controla el tamaño máximo de la imagen */
}

.image-clases-row img {
    width: 100%; /* Hace que la imagen ocupe todo el ancho del contenedor */
    height: auto; /* Mantiene la relación de aspecto */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsión */
    filter: brightness(0.7); /* Filtro inicial */
    transition: transform 0.3s, filter 0.3s;
}

.image-clases-row img:hover {
    transform: scale(1.05); /* Efecto de zoom */
    filter: brightness(1.);
    cursor: pointer;
}

.container-program {
    max-width: 100%;
    margin-top: 50px;
    padding: 20px;
    background-color: var(--primary-color);
    justify-content: center;
}

.container-program h2 {
    font-size: 30px;
    font-weight: 200;
    text-transform: uppercase;
    font-style: italic;
    gap: 15px;
    color: var(--white-color);
    text-align: center;
}

.container-program h5 {
    font-size: 70px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--secundary-color);
    text-align: center;
}

.container-program p {
    line-height: 1.6;
    margin: 20px;
    font-size: 16px;
    text-align: center;
    color: var(--white-color);
}

/* Grid layout for flip boxes */
.flip-box-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    justify-content: center;
    margin-bottom: 20px;
    padding: 50px;
}

.flip-box {
    background-color: var(--primary-color);
    width:100%;
    perspective: 1000px;
    border-radius: 15px;
    gap: 10px;
}

.flip-box-inner {
    position: relative;
    width: 100%;
    height: 200px;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flip-box-front {
    background-color: var(--secundary-color);
    color: var(--white-color);
    border: 1px solid var(--secundary-color);
    border-radius: 15px;;
}

.flip-box-front h3{
    color: var(--white-color);
    font-size: 21px;
}

.flip-box-back {
    background-color: var(--white-color);
    color: var(--primary-color);
    transform: rotateY(180deg);
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid var(--white-color);
    border-radius: 15px;
}

.flip-box-back h3{
    font-size: 18px;
}

.flip-box-back p{
    font-size: 14px;
    color: var(--primary-color);
}

.icon {
    font-size: 48px;
    margin-bottom: 10px;
    color: var(--white-color);
}

/* Niños y adolescentes */

.programs-text p{
    margin: 5px;
    padding-bottom: 10px;
}

.container-text {
    text-align: center; /* Centra el texto */
    padding: 20px; /* Espaciado interno */
    margin: 0 auto; /* Centra el contenedor en la página */
}

.container-text h3{
    position: relative;
    color: var(--white-color);
    text-transform: uppercase;
    font-size: 2.5rem;
    z-index: 2;
    line-height: 1.2; /* Espaciado entre líneas */
    margin: 0; /* Elimina el margen por defecto */
    }

.container-text span {
    position: relative;
    color: var(--secundary-color);
    font-size: 2.5rem;
    z-index: 2;
}

/* Estilo de los íconos y listas */
.widget-icono-lista {
    margin: 20px 0;
}

.widget-icono-lista ul {
    list-style: none;
    padding: 0;
}
.widget-icono-lista ul p{
    list-style: none;
    padding: 0;
    margin: 0px;
}

.widget-icono-lista li {
    display: flex;
    align-items: center;
    margin: 0;
}

.widget-icono-lista li span {
    font-size: 24px;
    font-weight: 600;
    padding: 0px;
}

/* Estilos para el botón de descarga */
.download-button-container {
    display: flex;
    justify-content: center;  /* Centra el botón horizontalmente */
    text-align: center; /* Centra el botón dentro del contenedor */
    background-color: var(--white-color);
    color:var(--white-color)
}

.program-button {
    font-size: 13px;
    letter-spacing: 2px;
    padding: 5px 10px;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    background: var(--white-color);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    user-select: none;
}

.program-button:hover {
    background: var(--secundary-color);
    color: var(--white-color);
    border: 2px;
    border: 2px solid var(--secundary-color);
}

.container-kids {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px 100px 40px;
    background-color: var(--white-color);
    color: var(--white-color);
}

.section-kids {
    padding: 20px;
    border-radius: 12px;
    color: var(--white-color);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#comportamento {
    background-color: #5e5e5e; /* Gris */
    padding: 35px 25px;
}

#relacionamento {
    background-color: #fff200; /* Amarillo */
    padding: 35px 25px;
}

#organizacao {
    background-color: #f5a92f; /* Naranja */
    padding: 35px 25px;
}

#comprometimento {
    background-color: #008b17; /* Verde */
    padding: 35px 25px;
}

.section-kids h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--white-color);
    font-weight: 800;
}

.section-kids h4 {
    font-size: 14px;
    color: var(--white-color);
    margin-bottom: 15px;
    font-weight: 600;
}

.section-kids ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.section-kids ul li {
    font-size: 12px;
    font-style: italic;
    margin-bottom: 0px;
    padding-left: 20px;
    position: relative;
    line-height: 22px;
    font-weight: 400;
}

.section-kids ul li::before {
    content: '- ';
    color: var(--white-color);
    position: center;
    left: 0;
    font-size: 12px;
    line-height: 1;
}


#relacionamento h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--primary-color);
    font-weight: 800;
}

#relacionamento h4 {
    font-size: 14px;
    color: #f4f4f4;
    margin-bottom: 15px;
    color: var(--primary-color);
    font-weight: 600;
}

#relacionamento ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#relacionamento ul li {
    font-size: 12px;
    font-style: italic;
    margin-bottom: 0px;
    padding-left: 20px;
    position: relative;
    line-height: 22px;
    color: var(--primary-color);
}

#relacionamento ul li::before {
    content: '- ';
    color: var(--white-color);
    position: center;
    left: 0;
    font-size: 12px;
    line-height: 1;
    color: var(--primary-color);
}

/* ACADEMIAS */

/* Contenedor de cada sección de academias */
.programs-item-academias {
    margin: 20px auto;
    max-width: 1200px;
    text-align: center;
}

/* Contenido de academias: texto e imágenes */
/* Estilos generales */
.programs-content-academias {
    display: flex;
    flex-direction: column; /* En dispositivos pequeños, las imágenes y los mapas se apilan */
    align-items: center; /* Centrar el contenido */
    text-align: center;
}


.programs-text .textWrapper-academias {
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
    font-style: italic;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white-color);
    gap: 10px;
}
.programs-text h3 {
    font-size: 40px;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--secundary-color);
    gap: 10px;
}


.academia-container {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se acomoden al tamaño de la pantalla */
    justify-content: center; /* Centra los elementos */
    gap: 2rem; /* Espacio entre los contenedores */
    margin-top: 2rem;
}

.academia-map-container {
    display: flex;
    flex-direction: column; /* Las imágenes deben estar encima de los mapas */
    align-items: center;
    width: 100%; /* Ocupa todo el ancho disponible en dispositivos móviles */
    max-width: 400px; /* Limita el ancho en dispositivos grandes */
}
.map-container h3{
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    font-style: italic;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--white-color);
    gap: 15px;
}

/* Imagen */
.image-academia img {
    margin: 0 auto; /* Centra la imagen horizontalmente */
    display: block; /* Necesario para que el margin funcione correctamente */
    width: 60%; /* Asegura que la imagen se ajuste correctamente */
    height: auto;
    margin-bottom: 1rem; /* Espacio debajo de la imagen */
}

/* Mapa */
.map-container iframe {
    width: 100%; /* Ajusta el ancho del mapa */
    height: 300px; /* Altura constante para los mapas */
    border: 0;
    margin-bottom: 15px;
}

/* Efecto hover en imágenes */
.image-academia:hover {
    transform: scale(1.05);
}

.bio-swiper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
    min-height: 100vh;
    background-color: var(--white-color);
    padding: 50px;
}

.bio {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bio h2 {
    color: var(--secundary-color);
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1rem;
    grid-column: 1
}

.bio h6 {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
    grid-column: 1;
    font-style: italic;
}

.bio p {
    font-size: 14px;
    line-height: 1.6;
}

.logos-container-bio {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem; /* separación entre logos */
    padding: 2rem 1rem;
    flex-wrap: nowrap; /* 👈 evita que se vayan hacia abajo */
    overflow-x: auto;   /* opcional: permite scroll si son muy grandes */
  }

  .container-bio h2{
    color: white;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1rem;
    grid-column: 1
  }

  .container-bio p{
    color: white;
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  
  .logos-container-bio img {
    max-height: 100px;   /* altura máxima */
    width: auto;
    height: auto;
    max-width: 100%;     /* escalado responsivo */
    object-fit: contain;
    flex-shrink: 1;      /* permite que se achiquen */
  }

.champs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 40px; /* Espaciado interno */
}

.champs h2 {
    font-size: 70px;
    font-weight: 700;
    color: var(--secundary-color);
    text-transform: uppercase;
    margin-bottom: 15px;
    text-align: left;
}

.champs h3 {
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
    font-style: italic;
    color: var(--primary-color);
    text-align: left;
}

.champs p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: var(--primary-color);
    text-align: left;
}


.bio-swiper-container {
    margin-top: 50px;
    position: relative;
    max-width: 650px;
    min-height: 650px;
    width: 100%;
    overflow: hidden; /* Asegura que solo una diapositiva visible */
}

.bio-swiper-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.swiper-slide {
    width: 100%;
    flex-shrink: 0; /* Asegura que cada slide ocupe el 100% del ancho del contenedor */
}

.swiper-slide img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
.champions {
    background-color: var(--white-color);
    max-width: 100%;
    margin: 0 auto; /* Centra la imagen dentro del contenedor */
    display: block;
}

.app-champ {
    max-width: 100%;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.champion-header-title {
    color:var(--secundary-color);
    text-align: center;
    margin-bottom: 20px;
}

.champ-filter {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.champ-filter-item {
    padding: 5px 25px;
    margin: 10px;
    cursor: pointer;
    border: 1px solid var(--primary-color);
    font-size: 20px;
    border-radius: 5px;
    background-color: var(--white-color);
    transition: background-color 0.3s;
}

.champ-filter-item:hover {
    background-color: var(--secundary-color);
    color: var(--white-color);
}

.item-active{
    background-color: rgb(218, 56, 56);
    color: #000;
}

/* Contenedor de campeonatos usando Flexbox */
.products {
    display: flex;
    flex-wrap: wrap; /* Permite que las tarjetas se envuelvan en varias filas */
    gap: 20px; /* Espacio entre tarjetas */
    justify-content: center; /* Centra las filas en el contenedor */
  }
  
  /* Configuración de la tarjeta para que ocupe un tercio del contenedor */
  .product {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: calc(33.33% - 20px); /* Un tercio del ancho, menos el espacio entre tarjetas */
    min-height: 350px;
    padding: 15px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
  }
  
  /* Contenedor de imagen y etiqueta */
  .image-container {
    position: relative;
    width: 100%;
  }
  
  /* Imagen */
  .image-container img {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  
  /* Estilo de pestaña para campeonatos */
  .champ-card-tag {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0px 30px;
    background-color: var(--white-color);
    color:var(--white-color);
    border-radius: 5px;
    font-weight: bold;
    white-space: nowrap;
  }

  /* Títulos y subtítulos */
  .product h3 {
    margin: 10px 0 5px;
    font-size: 16px;
    line-height: 1;
  }
  
  .product h4 {
    margin: 5px 0;
    font-size: 14px;
    color:var(--primary-color);
  }
  
  .product p {
    font-size: 16px;
    color: var(--primary-color);
    margin:1px 0;
  }

  /* Estilos para la sección de preguntas frecuentes */
  .faq-section {
    display: flex;
    justify-content: center;
    padding: 2rem;
    background-color: var(--white-color);
}

.faq-content {
    display: flex;
    max-width: 1200px;
    width: 100%;
    gap: 2rem;
    margin-top: 2rem;
}

/* Alineación de preguntas a la izquierda */
.faq-left {
    flex: 1;
    text-align: left; /* Preguntas alineadas a la izquierda */
}

.faq-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.faq-right img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    flex-shrink: 0;
    margin-top: 1rem;
}

.faq-left h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--secundary-color);
    text-align: left;
}

.faq-item {
    padding-bottom: 0.5rem;
}

.faq-question {
    background: none;
    border: none;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: left;
    width: 100%;
    cursor: pointer;
    color: var(--primary-color);
    transition: color 0.3s;
}

.faq-question:hover {
    color: var(--secundary-color);
}

.faq-answer {
    display: none;
    padding: 10px;
    background-color: var(--white-color);
    border-top: 1px solid var(--white-color);
}

.faq-answer p {
    font-size: 1rem;
    line-height: 1.4;
}

.faq-item.active .faq-answer {
    display: block;
}

.pdp-section {
    display: flex;
    justify-content: center;
    padding: 2rem;
    background-color: var(--white-color);
}

.pdp-content {
    max-width: 1200px;
    width: 100%;
    gap: 2rem;
    margin-top: 2rem;
}
.pdp-content h3{
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}
.pdp-content h4{
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--secundary-color);
    text-align: left;
}
.pdp-content p,ul{
    font-size: 1.1rem;
    line-height: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: left;
}


@media (max-width: 1040px) {

    #backToTopBtn {
        bottom: 15px;
        right: 15px;
        padding: 8px;
    }

    .progress-bar {
        height: 8vh;
      }
      .text-loading {
        font-size: 1.9rem;
        left: 4vw;
      }

    header {
        padding: 12px 20px;
    }

    .abrir-menu,
    .cerrar-menu {
        display: block;
        border: 0;
        font-size: 1.25rem;
        background-color: transparent;
        cursor: pointer;
    }

    .abrir-menu {
        color: var(--white-color);
    }

    .cerrar-menu {
        color: var(--white-color);
    }

    .nav {
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: 1rem;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: var(--primary-color);
        padding: 2rem;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
    }

    .nav.visible {
        opacity: 1;
        visibility: visible;
    }
    
    .nav-list {
        flex-direction: column;
        align-items: end;
        gap: 12px;
    }

    section {
        padding: 100px 20px;
    }

    .home .media-icons {
        right: 15px;
    }

    .contentWrapper {
        padding: 10px; /* Espacio interno en los elementos de contenido */
    }
    .programs-header h3 {
        font-size: 30px; /* Ajuste del tamaño de h3 */
    }

    .programs-header h2 {
        font-size: 50px; /* Ajuste del tamaño de h2 */
    }

    .programs-description p {
        max-width: 100%; /* Aumentamos el ancho del texto */
        font-size: 14px; /* Disminuir el tamaño de fuente */
        line-height: 1.5; /* Mejora la legibilidad */
        padding: 0 10px; /* Añadir espaciado lateral */
    }

    /* Ajustes para la lista de programas */
    .programs-list {
        display: flex; /* Usar flexbox */
        flex-wrap: wrap; /* Permitir que los elementos se vayan a otra línea */
        overflow-x: hidden; /* Ocultar el scroll horizontal */
        padding: 10px 0; /* Espaciado vertical para la lista */
    }

    .programs-list li {
        flex: 0 0 auto; /* Cada elemento ocupa su tamaño natural */
        margin-right: 10px; /* Espacio entre elementos */
    }

    .programs-list li:last-child {
        margin-right: 0; /* Elimina el margen del último elemento */
    }

    .image-section-row {
        width: 100%; /* Imagen ocupará todo el ancho en móviles */
    }

    .programs-image {
        width: 100%; /* Asegura que las imágenes sean responsivas */
        height: auto; /* Mantener proporciones de imagen */
    }

    .button-row {
        width: 100%; /* Botones ocupan todo el ancho */
        text-align: center; /* Centrar botones */
    }


    #backToTopBtn {
        bottom: 20px; /* Mover botón un poco más arriba en móviles */
        right: 20px; /* Mover botón un poco más a la izquierda */
        width: 40px; /* Ajustar tamaño del botón */
        height: 40px; /* Ajustar tamaño del botón */
    }

    .content-equipo{
        grid-template-columns: 1fr;
    }

    .section-image {
        padding: 30px;
    }

    .section-form {
        padding: 30px;
    }

    .form-container {
        max-width: 350px;
    }

    .form-container h1 {
        font-size: 26px;
    }

    .form-container h2 {
        font-size: 40px;
    }

    .hero-content-contact {
        left: 50px; /* Ajuste la posición a la izquierda en pantallas más pequeñas */
    }

    .hero-content-contact h1 {
        font-size: 60px;
    }

    .hero-content-contact p {
        font-size: 35px;
    }

    .contact-section {
        padding: 60px 40px 80px;
    }

    .contact-info, .contact-form {
        max-width: 100%;
    }
    .clases-content {
        display: flex; /* Asegúrate de que el contenido esté en una fila */
        flex-direction: column; /* Coloca el texto y la imagen en columnas */
        align-items: center; /* Centra los elementos horizontalmente */
    }

    .image-clases-row img {
        margin-top: 5px; /* Reduce el margen superior de la imagen */
        width: 100%; /* Asegúrate de que la imagen se ajuste al contenedor */
        max-width: 600px; /* Ajusta esto según sea necesario */
        height: auto; /* Mantiene la proporción de la imagen */
    }
    .clases-item {
        grid-template-columns: 1fr; /* Cambia a una sola columna */
        min-height: auto; /* Elimina la altura mínima */
        padding: 50px 20px; /* Reducir espaciado en pantallas más pequeñas */
    }

    .text-clases-row {
        text-align: center; /* Centrar texto en pantallas pequeñas */
        padding: 20px; /* Reducir padding para centrar más el texto */
        margin-bottom: 10px; /* Reduce el margen inferior del texto */
    }

    .text-clases-row h2 {
        font-size: 40px; /* Ajuste del tamaño de h2 para pantallas más pequeñas */
    }

    .text-clases-row p {
        font-size: 14px; /* Ajuste del tamaño de fuente para pantallas más pequeñas */
    }

    .image-clases-row {
        justify-self: center; /* Centra la imagen en su celda */
        max-width: 100%; /* Ajusta el ancho máximo a 100% */
    }

    .image-clases-row img {
        width: 100%; /* Hace que la imagen ocupe todo el ancho del contenedor */
        height: auto; /* Mantiene la relación de aspecto */
        object-fit: cover; /* Asegura que la imagen cubra el área sin distorsión */
        max-height: 300px; /* Ajustar altura máxima según sea necesario */
    }

    .container-text h3 {
        font-size: 2rem; /* Tamaño de fuente más pequeño */
    }

    .container-kids {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas en max 1040px */
    }

    .bio-swiper {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 1rem;
        padding: 20px;
    }

    .bio-swiper-container {
        max-width: 100%;
        min-height: auto; /* Elimina la altura fija */
    }

    .products {
        gap: 15px;
    }

    .product {
        width: calc(50% - 15px); /* Dos tarjetas por fila */
    }

    .champ-filter-item {
        font-size: 18px; /* Ajusta el tamaño de los botones */
    }

    .faq-content {
        flex-direction: column; /* Cambiar a columna, para que la imagen esté debajo */
        padding: 1.5rem;
        gap: 1.5rem;
    }

    .faq-right {
        order: 2; /* Cambiar el orden de la imagen para que aparezca después de las preguntas */
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 1rem;
    }

    .faq-left {
        order: 1; /* Las preguntas seguirán siendo las primeras en el flujo */
    }

    .pdp-section {
        padding: 1.5rem; /* Relleno intermedio para tabletas */
    }

    .pdp-content {
        margin-top: 1.5rem;
    }

    .pdp-content h3 {
        font-size: 1.4rem; /* Ajustar tamaño de fuente */
        margin-bottom: 1.2rem;
    }

    .pdp-content h4 {
        font-size: 1.6rem; /* Ajustar tamaño de fuente */
        margin-bottom: 1.3rem;
    }

    .pdp-content p, ul {
        font-size: 1.05rem; /* Ajustar tamaño de fuente */
        line-height: 1.45rem;
        margin-bottom: 1.2rem;
    }
}


@media (max-width: 768px) {

    #backToTopBtn {
        bottom: 10px;
        right: 10px;
        padding: 7px;
    }

    .progress-bar {
        height: 7vh;
      }
      .text-loading {
        font-size: 1.7rem;
        left: 3.5vw;
      }

    .programs-header h3 {
        font-size: 24px; /* Ajuste del tamaño de h3 en pantallas pequeñas */
    }

    .programs-header h2 {
        font-size: 36px; /* Ajuste del tamaño de h2 en pantallas pequeñas */
    }

    .programs-description p {
        font-size: 13px; /* Ajuste del tamaño de fuente en pantallas pequeñas */
        line-height: 1.4; /* Mejorar legibilidad en pantallas pequeñas */
    }

    /* Ajustes para la lista de programas */
    .programs-list {
        display: flex; /* Usar flexbox para el diseño horizontal */
        overflow-x: auto; /* Permitir scroll horizontal si es necesario */
        padding: 10px 0; /* Espaciado vertical para la lista */
        white-space: nowrap; /* Evitar que los elementos se envuelvan */
    }

    .programs-list li {
        flex: 0 0 auto; /* Cada elemento ocupa su tamaño natural */
        margin-right: 10px; /* Espacio entre elementos */
        
    }

    .programs-list li:last-child {
        margin-right: 0; /* Elimina el margen del último elemento */
    }

    .row {
        width: 90%;
        display: flex;
        flex-direction: column; 
        align-items: center; 
    }
    .row .contentWrapper h2{
        font-size: 30px ;
        padding-bottom: 20px ;
    }

    .row .image-section-row {
        display: flex; /* Aseguramos que la fila se muestre como flex */
        padding: 10px; /* Reducimos el padding para un mejor ajuste */
        flex: 1 1 auto; /* Permite que la imagen ocupe el espacio disponible */
    }
    .row .image-section-row img {
        max-width: 100%; /* Asegura que la imagen nunca exceda el ancho del contenedor */
        height: auto; /* Mantiene la proporción */
        min-height: 200px; /* Puedes ajustar esto según lo necesites */
        min-width: 345px; /* Establece la anchura mínima a 345px */
        object-fit: contain; /* Mantiene la relación de aspecto sin recortar la imagen */
    }

    .row .contentWrapper p{
        display: flex;
        justify-content: start;
        align-items: center;
        line-height:24px ;
    }

    .sliderWrapper{
        margin: 0 10px 40px;
    }

    .sliderWrapper .swiper-slide-button{
        display: none;
    }

    .content-equipo {
        display: flex;
        flex-direction: column;
        align-items: center; 
    }

    .section-image {
        padding: 20px;
    }

    .section-form {
        padding: 20px;
    }

    .form-container {
        max-width: 300px;
    }

    .form-container h1 {
        font-size: 22px;
    }

    .form-container h2 {
        font-size: 35px;
    }

    .form-container p {
        font-size: 14px;
    }

    .form-container a {
        width: 50%;
    }

    .hero-content-contact {
        left: 20px; /* Ajuste la posición a la izquierda en pantallas más pequeñas */
        text-align: center;
    }

    .hero-content-contact h1 {
        font-size: 45px;
    }

    .hero-content-contact p {
        font-size: 28px;
    }

    .contact-section {
        padding: 40px 20px 60px;
        flex-direction: column;
    }

    .contact-info, .contact-form {
        max-width: 100%;
        padding: 10px;
    }

    .contact-info h2, .contact-form h2 {
        font-size: 24px;
    }

    .contact-list {
        font-size: 14px;
    }

    .contact-info .contact-hours p {
        font-size: 16px;
    }

    .map iframe {
        height: 250px;
    }

    .row-programs {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column; /* Aseguramos que los items se apilen uno debajo de otro */
    }

    .programs-item {
        display: flex;
        flex-direction: column; /* Aseguramos que dentro de cada item, imagen y texto se alineen en columna */
        margin-bottom: 20px; /* Añadimos un margen inferior entre items */
    }

    /* Especificamos que la imagen siempre va primero */
    .programs-item .image-programs-row {
        order: 1;
        width: 100%; /* Hacemos que la imagen ocupe todo el ancho */
        margin-bottom: 10px;
    }

    /* Aseguramos que el texto siga después */
    .programs-item .contentWrapper-programs {
        order: 2;
        padding: 10px; /* Ajustamos el padding para que se vea más compacto en pantallas pequeñas */
    }

    .container-program h2 {
        font-size: 24px; /* Tamaño más pequeño para el título */
    }
    
    .container-program h5 {
        font-size: 20px; /* Tamaño más pequeño para subtítulo */
        margin-bottom: 10px; /* Espacio debajo del subtítulo */
    }

    .container-program p {
        font-size: 12px; /* Tamaño más pequeño para el párrafo */
        line-height: 1.4; /* Ajuste de línea */
        padding: 0 10px; /* Espacio lateral reducido */
    }

    .clases-item h2 {
        font-size: 24px; /* Tamaño más pequeño para el título de clases */
    }

    .clases-item p {
        font-size: 12px; /* Tamaño más pequeño para el párrafo de clases */
        line-height: 1.4; /* Ajuste de línea */
        padding: 0 10px; /* Espacio lateral reducido */
    }

    .champs h2,h3 {
        font-size: 24px; /* Tamaño más pequeño para el título de clases */
    }

    .champs p {
        font-size: 12px; /* Tamaño más pequeño para el párrafo de clases */
        line-height: 1.4; /* Ajuste de línea */
        padding: 0 10px; /* Espacio lateral reducido */
    }

    .flip-box-container {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
        padding: 20px; /* Menos padding en pantallas pequeñas */
    }

    .flip-box-inner {
        min-height: 280px; /* Altura mínima ajustada para pantallas pequeñas */
    }

    .container-text h3 {
        font-size: 1.5rem; /* Aún más pequeño para dispositivos móviles */
    }

    .bio-swiper {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 1rem;
        padding: 20px;
    }

    .bio h2 {
        font-size: 2rem; /* Reducir el tamaño del título */
    }
    .bio h6 {
        font-size: 1rem;
    }

    .bio p {
        font-size: 12px; /* Reducir el tamaño del texto */
    }
    .bio-swiper-container {
        max-width: 100%;
        min-height: auto; /* Elimina la altura fija */
    }

    .container-bio h2{
        font-size: 2rem;
    }

    .container-bio p{
        font-size: .75rem;
    }

    .champs h2 {
        font-size: 2rem; /* Reducir el tamaño del título */
    }

    .champs p {
        font-size: 12px; /* Reducir el tamaño del texto */
    }

    .products {
        gap: 10px; /* Reduce el espacio entre tarjetas */
    }

    .product {
        width: 100%; /* Una tarjeta por fila */
        min-height: auto; /* Altura adaptable */
    }

    .champ-filter-item {
        font-size: 16px; /* Reduce el tamaño de los botones */
    }

    .faq-left h2 {
        font-size: 1.5rem;
    }

    .faq-question {
        font-size: 1rem;
        line-height: 0.8;
    }

    .-afaqnswer p {
        font-size: 0.9rem;
    }

    .faq-right img {
        width: 90%;
        margin: 0 auto;
    }

    .pdp-section {
        padding: 1rem; /* Menos relleno para pantallas pequeñas */
    }

    .pdp-content {
        margin-top: 1rem;
    }

    .pdp-content h3 {
        font-size: 1.3rem; /* Reducir tamaño de fuente */
        margin-bottom: 1rem;
    }

    .pdp-content h4 {
        font-size: 1.5rem; /* Reducir tamaño de fuente */
        margin-bottom: 1.2rem;
    }

    .pdp-content p, ul {
        font-size: 1rem; /* Reducir tamaño de fuente */
        line-height: 1.4rem;
        margin-bottom: 1rem;
    }

    footer{
        padding: 40px;
    }
    
    footer .container-footer {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 40px;
    } 
}

@media (max-width:575px) {

    #backToTopBtn {
        bottom: 8px;
        right: 8px;
        padding: 6px;
    }

    .progress-bar {
        height: 6vh;
      }
      .text-loading {
        font-size: 1.4rem;
        left: 3vw;
      }

    .programs-header h3 {
        font-size: 20px; /* Ajuste del tamaño de h3 en pantallas muy pequeñas */
    }

    .programs-header h2 {
        font-size: 30px; /* Ajuste del tamaño de h2 en pantallas muy pequeñas */
    }

    .programs-description p {
        font-size: 10px; /* Ajuste del tamaño de fuente en pantallas muy pequeñas */
        line-height: 1.4; /* Mejorar legibilidad en pantallas pequeñas */
        margin-bottom: 10px;
        padding: 0 5px; /* Espaciado lateral reducido */
    }

    /* Ajustes para la lista de programas */
    .programs-list {
        display: flex; /* Usar flexbox para el diseño horizontal */
        overflow-x: auto; /* Permitir scroll horizontal si es necesario */
        padding: 10px 0; /* Espaciado vertical para la lista */
        white-space: nowrap; /* Evitar que los elementos se envuelvan */
    }

    .programs-list li {
        flex: 0 0 auto; /* Cada elemento ocupa su tamaño natural */
        margin-right: 5px; /* Espacio entre elementos reducido */
    }

    .programs-list li a{
    font-size: 10px;
    }

    .programs-list li i{
        font-size: 10px;
    }

    .programs-list li:last-child {
        margin-right: 0; /* Elimina el margen del último elemento */
    }



    .home .content h1{
        font-size: 40px;
        line-height: 1.2em;
        margin: 0;
    }

    .home .content p{
        font-size: 18px;
        line-height: 1.2em;
        margin-bottom: 12px;
    }

    .home .content h1 span{
        font-size: 18px;
        line-height: .2em;
    }

    .sectionRow{
        padding: 20px;
    }

    .row{
        display: flex;
        flex-direction: column;
        align-items: center; 
        padding: 20px;
    }

    .row .contentWrapper{
        padding: 0px;
    }
    .row .contentWrapper span .textWrapper {
        font-size: 18px;
        margin: 0;
    }

    .row .contentWrapper h2{
        font-size: 25px ;
    }

    .row .contentWrapper p{
        font-size: 15px;
        line-height:22px ;
    }

    .row .contentWrapper a{
        font-size: 15px;
        padding: 5px 5px;
    }

    .container-equipo {
        padding: 20px;
    }

    .content-equipo {
        padding: 0px;
    }

    .text-section-equipo {
        padding: 0px;
    }

    .text-section-equipo h2 {
        font-size: 30px;
    }

    .text-section-equipo p {
        font-size: 12px;
        line-height: 18px;
    }

    .button-equipo {
        font-size: 11px;
        padding: 8px 12px;
    }

    .image-section-equipo img {
        max-width: 100%;
    }

    .section-horarios, .section-content {
        padding: 20px;
        margin: 20px auto;
    }

    .title, .subtitle {
        font-size: 18px;
    }

    .subtitle {
        font-size: 40px;
    }

    .section-image {
        padding: 10px;
    }

    .section-image img {
        height: auto;
    }

    .section-form {
        padding: 15px;
    }

    .form-container {
        max-width: 100%;
    }

    .form-container h1 {
        font-size: 20px;
        justify-content: center;
        text-align: center;
    }

    .form-container h2 {
        font-size: 28px;
    }

    .form-container p {
        font-size: 12px;
    }

    .form-container a {
        width: 100%;
    }

    .whatsapp-button {
        width: 100%;
        font-size: 16px;
        padding: 8px;
    }

    button#send {
        width: 100%;
        font-size: 16px;
        padding: 8px;
    }

    .hero-section-contact {
        height: 300px;
    }

    .hero-content-contact {
        left: 10px;
        text-align: center;
    }

    .hero-content-contact h1 {
        font-size: 35px;
    }

    .hero-content-contact p {
        font-size: 20px;
    }

    .contact-section {
        padding: 20px 10px;
    }

    .contact-info h2, .contact-form h2 {
        font-size: 20px;
    }

    .contact-list {
        font-size: 12px;
    }

    .contact-info .contact-hours p {
        font-size: 14px;
    }

    .map {
        flex: 1 1 100%; /* Asegura que los mapas ocupen el 100% del ancho disponible y se apilen verticalmente */
        margin: 5px 0; /* Añade un margen superior e inferior para separación */
    }

    .map iframe {
        height: 150px; /* Ajusta la altura del iframe para pantallas pequeñas */
    }

    .container-program h2 {
        font-size: 20px; /* Tamaño muy pequeño para el título */
    }
    
    .container-program h5 {
        font-size: 18px; /* Tamaño más pequeño para subtítulo */
        margin-bottom: 5px; /* Espacio reducido debajo del subtítulo */
    }

    .container-program p {
        font-size: 12px; /* Tamaño más pequeño para el párrafo */
        line-height: 1.3; /* Ajuste de línea */
        padding: 0 5px; /* Espacio lateral muy reducido */
    }

    .clases-item h2 {
        font-size: 20px; /* Tamaño muy pequeño para el título de clases */
    }

    .clases-item p {
        font-size: 12px; /* Tamaño más pequeño para el párrafo de clases */
        line-height: 1.3; /* Ajuste de línea */
        padding: 0 5px; /* Espacio lateral muy reducido */
    }

    .champs h2, h3 {
        font-size: 20px; /* Tamaño muy pequeño para el título de clases */
    }

    .champs p {
        font-size: 12px; /* Tamaño más pequeño para el párrafo de clases */
        line-height: 1.3; /* Ajuste de línea */
        padding: 0 5px; /* Espacio lateral muy reducido */
    }

    .flip-box-inner {
        min-height: 200px; /* Altura mínima ajustada para pantallas más pequeñas */
    }

    .container-text h3 {
        font-size: 1.3rem; /* Tamaño más pequeño para pantallas extra pequeñas */
    }

    .container-kids {
        grid-template-columns: 1fr; /* Regresar a una columna */
        padding: 20px; /* Menos padding para pantallas pequeñas */
    }

    .section-kids {
        text-align: left; /* Centrar texto para pantallas pequeñas */
    }

    .image-academia img {
        margin: 0 auto; /* Centra la imagen horizontalmente */
        display: block; /* Necesario para que el margin funcione correctamente */
        width: 50%; /* Asegura que la imagen se ajuste correctamente */
        height: auto;
        margin-bottom: 1rem; /* Espacio debajo de la imagen */
    }


/* Estilo para las secciones */
.section-kids {
    background-color: var(--white-color); /* Fondo blanco para cada sección */
    padding: 20px; /* Espaciado interno de cada sección */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Estilo para los encabezados */
.section-kids h3 {
    font-size: 1.8rem; /* Tamaño de fuente para h3 */
    margin-bottom: 10px; /* Margen inferior */
}

.section-kids h4 {
    font-size: 1.4rem; /* Tamaño de fuente para h4 */
    margin-bottom: 15px; /* Margen inferior */
}

/* Estilo para las listas */
.section-kids ul {
    list-style: disc; /* Estilo de lista de viñetas */
    padding-left: 20px; /* Espacio a la izquierda */
}

/* Ajustes de texto para mejorar la legibilidad */
.section-kids li {
    margin-bottom: 10px; /* Margen inferior para cada elemento de la lista */
    font-size: 1rem; /* Tamaño de fuente para la lista */
    list-style: none;
}

.faq-content {
    padding: 1rem;
    gap: 1rem;
}

.faq-right img {
    width: 100%;
    height: auto;
}

.faq-question {
    font-size: 0.9rem;
    line-height: 0.7;
}

.faq-answer p {
    font-size: 0.8rem;
}

    footer .container-footer {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        grid-gap: 40px;
    }

    .copyrightText {
        padding: 20px 40px 30px;
        line-height: 1.2em;
    }

    /* Ajustes para pantallas de hasta 344px */
@media (max-width: 346px) {

.progress-bar {
      height: 5vh;
    }
    .text-loading {
      font-size: 1.1rem;
      left: 2vw;
    }

    .sectionRow-programs {
        flex-direction: column; /* Cambia la dirección a columna para el contenedor principal */
    }

    .programs-item {
        display: flex; /* Usar flexbox para alinear imagen y texto */
        flex-direction: row; /* Alinear imagen y texto en fila */
        align-items: center; /* Centrar verticalmente los elementos */
        margin: 10px 0; /* Añadir margen superior e inferior entre items */
    }

    .image-programs-row {
        flex: 0 0 40%; /* Imagen ocupa el 40% del espacio */
        max-height: 100px; /* Ajustar la altura máxima de la imagen */
        overflow: hidden; /* Ocultar el desbordamiento de la imagen */
    }

    .programs-image {
        width: 100%; /* La imagen ocupará todo el ancho del contenedor */
        height: auto; /* Mantener la proporción de la imagen */
        object-fit: cover; /* Recortar la imagen si es necesario */
    }

    .contentWrapper-programs {
        flex: 1; /* El texto ocupará el espacio restante */
        padding: 10px; /* Espaciado interno reducido */
    }

    .programs-header h3 {
        font-size: 16px; /* Tamaño de h3 */
    }

    .programs-header h2 {
        font-size: 24px; /* Tamaño de h2 */
    }

    .programs-description p {
        font-size: 10px; /* Tamaño de fuente */
        line-height: 1.3; /* Mejora la legibilidad */
        padding: 0 5px; /* Espaciado lateral reducido */
    }

    /* Ajustes para la lista de programas */
    .programs-list {
        display: flex; /* Usar flexbox */
        overflow-x: auto; /* Permitir scroll horizontal */
        padding: 10px 0; /* Espaciado vertical para la lista */
        white-space: nowrap; /* Evitar que los elementos se envuelvan */
    }

    .programs-list li {
        flex: 0 0 auto; /* Cada elemento ocupa su tamaño natural */
        margin-right: 5px; /* Espacio entre elementos */
        padding: 5px; /* Espaciado interno para mejor clicabilidad */
    }

    .programs-list li:last-child {
        margin-right: 0; /* Elimina el margen del último elemento */
    }
}

}