/* Reset y base */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: "Segoe UI", Roboto, sans-serif;
  line-height:1.6;
  color:#111;
  background:#fff;
}
.container{width:min(90%,1200px);margin:auto;}
section{padding:4rem 0;}
h1,h2,h3{font-weight:700;line-height:1.25; color:white;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;border-radius:12px;}

.intro{
  background-color:#0e1a5a;
  background-image: url(img/home/Background.png);
  background-size: cover;      
  background-position: center;  
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  position: relative;  
  
}
/* Header */
.header{
  display: flex;
  width:fit-content;
  background:rgba(255,255,255,.85);
  box-shadow:0 2px 10px rgba(0,0,0,.15);
  z-index:100;
  border: 2px solid #EAEAEA;
  border-radius: 999px;
  position: fixed;
  top: 32px;                /* separa del borde superior */
  left: 50%;                /* ubica el punto de referencia al centro */
  transform: translateX(-50%); 
  backdrop-filter: blur(8px);
}
.logo-img{height: 40px;}
.header .container{
  width: fit-content;
  height: fit-content;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 16px 48px;
  gap: 128px;
}

.home-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit; /* para mantener el color blanco o el que tengas */
  gap: 8px; /* espacio entre el logo y el texto */
}

.home-link:hover {
  opacity: 0.8; /* leve feedback visual */
}


.logo-text{font-size: 20px; color:#202992;font-weight:700;}
.nav ul{display:flex;gap:1.5rem;}
.nav a{font-weight:600;color:#202992;}
.nav a:hover{color:#060f6a; text-decoration: underline;}
.nav-toggle{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;}


.presentation-text {
  position: absolute;                 /* 🔹 se ancla dentro del .intro */
  bottom: 0;                          /* 🔹 lo lleva al fondo */
  left: 50%;                          /* 🔹 centrado horizontal */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  color: #fff;
  width: 100%;
  padding-bottom: 4rem;               /* espacio respecto al borde inferior */
}

/* Contenedor interno */
.presentation-text .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Título principal */
.presentation-text h2 {
  font-size: 80px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

/* Subtítulos */
.presentation-text .sub {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.presentation-text .desc {
  font-size: 26px;
  font-weight: 400;
  opacity: 0.9;
}




/* SEGUNDA SECCION */ 


.presentation-info {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  align-items: center;
  padding: 0 128px 128px 128px;
  background-color: #202992;
}

/* Contenedor principal (tarjeta blanca) */
.presentation-card {
  background-color: #fff;
  width: 1344px;
  height: fit-content;
  border-radius: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 64px;
  gap: 48px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Texto */
.presentation-card .text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 60%;
}

.presentation-card h3 {
  font-size: 32px;
  color: #202992;
  font-weight: 700;
}

.presentation-card p {
  font-size: 20px;
  color: #202992;
  font-weight: 400;
  line-height: 1.5;
}

/* Imagen */
.presentation-card .image img {
  width: 448px;
  height: 329px;
  border-radius: 32px;
  object-fit: cover;
}

/* Banner / Split */
.banner-img{margin:1rem 0;border-radius:12px;}
.split{display:grid;gap:2rem;align-items:center;}
.split-img{border-radius:12px;box-shadow:0 3px 10px rgba(0,0,0,.1);}


/* Secciones */
.section h2{font-size:2rem;margin-bottom:1rem;color:#0e1a5a;}
.section p{margin-bottom:1rem;}
.alt{background:#FFFFFF;}

/* Infrasestructura */
#infraestructura  {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  gap: 32px;
  padding: 128px;
  background-color:#EAEAEA ;
  align-items: center;
}

#infraestructura .container{
  display: flex;
  flex-direction: column;
  height: fit-content;
  width: 100%;
  max-width: 1344px;
  margin: 0 auto;
  gap: 32px;
}

#infraestructura .feature img{
  order: -1;                 /* sube la imagen arriba del h3 si estaba después */
  width: 64px;
  height: 64px;
  object-fit: contain;
}

#infraestructura h2{color: #202992; font-size: 32px; font-weight: 700; line-height: 1.25;}
#infraestructura p {color: #202992; font-size: 20px; font-weight: 700; line-height: 1.5;}
#infraestructura .feature h3{color: #202992; font-size: 20px; font-weight: 700; line-height: 1.5; width:224px; height: 60px; text-align: center;}



#infraestructura .features{
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1344px;
  height: fit-content;
  gap: 32px;
  justify-content: center;
}

#infraestructura .feature{
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  padding: 32px 16px 32px 16px;
  gap: 16px;
  align-items: center;
  justify-content: center;
  background-color:#FFFFFF;
  text-align: center;
  width: 312px;
  height: 234px;
}

/* Nosotros */

#nosotros{
  display: flex;
  flex-direction: column;
  height: fit-content;
  width: 100%;
  padding: 128px;
  gap: 32px;
}

#nosotros .container{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1344px;
    margin: 0 auto;
    height: fit-content;
    gap: 64px;
    border-radius: 48px;
    align-items: center;
}

#nosotros .split{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: fit-content;
  gap: 48px;
}

#nosotros .split-img{
  border-radius: 32px;
  width: 360px;
  height: 300px;
  object-fit: cover;
}

#nosotros .nosotrosMainText{
  display: flex;
  flex-direction: column;
  width: 848px;
  height: 322px;
  gap: 24px;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color:#202992 ;

}
#nosotros h2{
  font-weight: 700;
  line-height: 1.25;
  color: #202992;
}
#nosotros .destacado{
  font-weight: 700;
}

#nosotros .textoSecundario{
  text-align: center;
  font-weight: 400;
  color:#202992;
  font-size: 20px;
  line-height: 1.5;
}

#nosotros .linea {
  width: 512px;
  height: 1px;
  background-color: rgba(32, 41, 146, 0.5);
}

/* Entrenamientos y competencias*/

#entrenamiento{
  display:flex;
  flex-direction:column;
  width:100%;
  height:fit-content;
  background-color:#202992;
  gap:64px;
  padding:128px 192px;
}


#entrenamiento .container{
  width:100%;
  max-width:1344px;   
  margin:0 auto;
}

#entrenamiento .split{
  display:flex;
  flex-direction:row;
  align-items: center;
  width:100%;
  max-width:1344px;
  margin: 0 auto;
  height:fit-content;
  gap: 32px;         
}


#entrenamiento .mainText{
  display:flex;
  flex-direction:column;
  gap:24px;
  height:fit-content;       
  width:848px;        
  color:#fff;
}

/* Título */
#entrenamiento h2{
  font-weight:700;
  line-height:1.25;
  color:#fff;
  font-size: 32px;
}

/* Párrafos y strong */
#entrenamiento p{
  font-size:20px;
  line-height:1.5;
  margin:0;
}
#entrenamiento strong{
  font-weight:700;
}


#entrenamiento .list{
  list-style:circle;
  margin:0;
  padding-left:30px;
}
#entrenamiento .list li{
  margin:6px 0;
  font-size:20px;
  line-height:1.5;
}

/* Imagen (calculada para respetar split: 1344 - 848 - 48 = 448px) */
#entrenamiento .split-img{
  width:448px;        /* fijo para cerrar la suma */
  height:448px;       /* misma altura que .mainText para alinear */
  object-fit:cover;
  border-radius:32px;
  display:block;
}





/* ===== ENTRENADORES ===== */
#entrenadores {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #EAEAEA;
  padding: 128px 192px;
  gap: 64px;
}

#entrenadores .container {
  width: 100%;
  max-width: 1344px;
  margin: 0 auto;
}

#entrenadores h2 {
  color: #202992;
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 32px;
}

/* GRID de coaches */
.coaches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 1rem;
}

/* Tarjetas individuales */
.coach {
  background: rgba(255, 255, 255, 0.65);
  padding: 24px;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  height: fit-content;
}



/* Imagen */
.coach img {
  width: 100%;
  height: 284px;
  object-fit: cover;
  border-radius: 24px;
  margin-bottom: 12px;
}

/* Nombres */
.coach h3 {
  color: #202992;
  font-weight: 700;
  margin-top: 8px;
}

/* Texto */
.coach p {
  font-size: 16px;
  line-height: 1.5;
  color: #202992;
}

/* Lista de logros */
.coach ul {
  padding-left: 1.25rem;
  list-style: disc;
  margin: 0;
  color: #202992;
}

.coach ul li {
  margin-bottom: 4px;
  line-height: 1.5;
}



/* Galería */

#galeria{
  display: flex;
  flex-direction: column;
  height: fit-content;
  width: 100%;
  padding: 128px;
  gap: 32px;
}

#galeria .container{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#galeria h2{
  font-size: 32px;
  color:#202992 ;
  font-weight: 700;
  line-height: 1.25;
}

#galeria p{
  font-size: 20px;
  color:#202992 ;
  font-weight: 400;
  line-height: 1.5
}

.carousel {
  position: relative;
  width: 100%;             

  margin: 32px auto 16px auto;
  overflow: hidden;
  padding-bottom: 50px;    /* espacio para los dots */
}

.carousel-track {
  display: flex;
  transition: transform 0.6s ease;
}

.carousel-item {
  flex: 0 0 calc(100% / 3);   
  padding: 0 10px;            
  box-sizing: border-box;
}

.carousel-item img {
  width: 100%;
  height: 300px;              
  object-fit: cover;          
  border-radius: 20px;
  display: block;
}

/* PUNTITOS DEL CARRUSEL */

.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding-bottom: 10px;   /* espacio adicional para evitar cortes */
}

.carousel-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background-color: #d0d4e4;  /* gris clarito */
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.carousel-dots button.active {
  background-color: #202992;  
  transform: scale(1.2);
}


/* CONTACTO */

#contacto {
  display: flex;
  flex-direction: row;
  background-color: #202992;          /* azul INATEM */
  padding: 128px;
  color: #ffffff;
  height: 704px;
}

.contacto-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 64px;
}

.contacto-info{
  display: flex;
  gap: 32px;
  flex-direction: column;
}

.redes{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contacto-info h2 {
  font-size: 32px;

}

.contacto-info p {
  font-size: 20px;
  line-height: 1.5;
}

.contacto-info a {
  color: #ffd45a;              /* color de links sobre fondo azul */
  text-decoration: none;
}

.contacto-info a:hover {
  text-decoration: underline;
}

.contacto-mapa {
  flex: 0 0 360px;             /* ancho fijo aprox. del mapa */
}

.contacto-mapa iframe {
  width: 400px;
  height: 400px;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* Botón flotante WhatsApp */
.whatsapp-float{
  position:fixed;
  bottom:25px;right:25px;
  width:60px;height:60px;
  background:#25D366;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  transition:.3s ease;
  z-index:200;
}
.whatsapp-float:hover{transform:scale(1.05);}
.whatsapp-float img{width:35px;height:35px;}

/* ===== FOOTER INATEM ===== */

#footer-inatem {
  background-color: #ffffff;
  font-size: 16px;
  display: flex;
  flex-direction: row;
  gap: 64px;
  padding: 64px;
  font-size: 16px;
  border-top: 4px red solid;
}



/* contenido principal */
#footer-inatem .footer-content {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 64px;
  color: #202992; 
  align-items: center;
}

/* logo + texto INATEM */
#footer-inatem .footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 20px;
 
}

#footer-inatem .footer-logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 50%;
}

/* textos y links */
#footer-inatem .footer-text {
  color: #202992;
  text-decoration: none;
  white-space: nowrap;
}

#footer-inatem .footer-text:hover {
  text-decoration: underline;
}



/* ===== MEDIA QUERIES PARA TABLETS Y PANTALLAS INTERMEDIAS ===== */
@media (max-width: 1400px) {
  
  /* Reducir padding lateral en secciones grandes */
  #infraestructura,
  #nosotros,
  #entrenamiento,
  #entrenadores,
  #galeria,
  #contacto {
    padding-left: 64px;
    padding-right: 64px;
  }

  /* Hacer que la tarjeta de presentación sea más flexible */
  .presentation-info {
    padding: 0 64px 64px 64px;
  }

  .presentation-card {
    width: 100%;
    max-width: 1200px;
  }

  /* Ajustar features de infraestructura */
  #infraestructura .features {
    flex-wrap: wrap;
    justify-content: center;
  }

  #infraestructura .feature {
    width: calc(50% - 16px);
    max-width: 280px;
  }

  /* Ajustar sección de entrenamiento para pantallas medianas */
  #entrenamiento .split {
    gap: 24px;
  }

  #entrenamiento .mainText {
    width: 60%;
  }

  #entrenamiento .split-img {
    width: 38%;
    height: auto;
    max-height: 400px;
  }

  /* Ajustar coaches */
  .coaches {
    gap: 24px;
  }
}

/* Pantallas más pequeñas (tablets en portrait) */
@media (max-width: 1100px) {
  
  /* Hacer stack vertical en entrenamiento */
  #entrenamiento .split {
    flex-direction: column;
    align-items: center;
  }

  #entrenamiento .mainText {
    width: 100%;
  }

  #entrenamiento .split-img {
    width: 100%;
    max-width: 500px;
    max-height: 350px;
  }

  /* Ajustar nosotros */
  #nosotros .split {
    flex-direction: column;
  }

  #nosotros .nosotrosMainText {
    width: 100%;
    height: auto;
  }

  #nosotros .split-img {
    width: 100%;
    max-width: 500px;
    height: auto;
  }
}

  @media (max-width: 1024px){

    /* ===== HEADER / NAV ===== */
    .header{
      width: 100%;
      left: 0;
      transform: none;
      top: 0;
      border-radius: 0;
      border: none;
      box-shadow: none;
      background-color: #ffffff;
      border-bottom: 3px solid #202992;
    }
  
    .header .container{
      width: 100%;
      padding: 12px 16px;
      gap: 0;
      justify-content: space-between;
    }
  
    .logo-text{
      font-size: 18px;
    }
  
    .nav-toggle{
      display:block;
      color:#202992;
    }
  
    .nav{
      display:none;
      position: absolute;
      top: 56px;
      right: 0;
      left: 0;
      background:#ffffff;
      border-bottom: 1px solid #e0e0e0;
    }
  
    .nav.active{
      display:block;
    }
  
    .nav ul{
      flex-direction: column;
      gap: 0;
      padding: 8px 16px 16px;
    }
  
    .nav li{
      margin: 6px 0;
    }
  
    .nav a{
      display:block;
      padding: 6px 0;
    }
  
    .header.nav-open .nav{
      display:block;
    }
  
    /* ===== HERO ===== */
    .intro{
      height: 100vh;
    }
  
    .presentation-text{
      padding-bottom: 3rem;
    }
  
    .presentation-text h2{
      font-size: 40px;
    }
  
    .presentation-text .sub{
      font-size: 18px;
    }
  
    .presentation-text .desc{
      font-size: 16px;
    }
  
    /* ===== SECCIÓN 2 – TARJETA BLANCA ===== */
    .presentation-info{
      padding: 0 16px 64px 16px;
    }
  
    .presentation-card{
      width: 100%;
      border-radius: 32px;
      padding: 32px 20px;
      flex-direction: column;
      gap: 24px;
    }
  
    .presentation-card .text{
      max-width: 100%;
      gap: 16px;
    }
  
    .presentation-card h3{
      font-size: 24px;
    }
  
    .presentation-card p{
      font-size: 16px;
    }
  
    .presentation-card .image img{
      width: 100%;
      height: auto;
      border-radius: 24px;
    }
  
    /* ===== INFRAESTRUCTURA ===== */
    #infraestructura{
      padding: 64px 16px;
      align-items: center;
    }
  
    #infraestructura .container{
      width: 100%;
    }
  
    #infraestructura p{
      font-size: 16px;
      font-weight: 400;
    }
  
    #infraestructura h2{
      font-size: 24px;
    }
  
    #infraestructura .features{
      width: 100%;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
    }
  
    #infraestructura .feature{
      width: calc(50% - 12px);
      max-width: 220px;
      padding: 24px 12px;
      height: auto;
    }
  
    #infraestructura .feature h3{
      font-size: 16px;
      height: auto;
      width: 100%;  
      text-align: center;
      word-wrap: break-word;
    }
  
    #infraestructura .feature img{
      width: 48px;
      height: 48px;
    }
  
    /* ===== NOSOTROS ===== */
#nosotros{
  padding: 64px 16px;
}

#nosotros .container{
  width: 100%;
  gap: 32px;
}

/* Texto arriba, imagen debajo */
#nosotros .split{
  display: flex;
  flex-direction: column; /* apilados */
  gap: 24px;
}

#nosotros .nosotrosMainText{
  order: 1;              /* primero el texto */
  width: 100%;
  height: auto;
  font-size: 16px;
  gap: 16px;
}

#nosotros .split-img{
  order: 2;              /* luego la imagen */
  width: 100%;
  max-height: 250px;     /* limitar altura máxima */
  border-radius: 24px;
  object-fit: cover;     /* recortar para mantener proporciones */
  object-position: top;  /* mostrar la parte superior de la imagen */
}

#nosotros h2{
  font-size: 24px;
}

#nosotros .textoSecundario{
  font-size: 16px;
  padding: 0 8px;
}

#nosotros .linea{
  width: 100%;
}
  
    /* ===== ENTRENAMIENTOS Y COMPETENCIAS ===== */
    #entrenamiento{
      padding: 64px 16px;
      gap: 32px;
    }
  
    #entrenamiento .container{
      max-width: 100%;
    }
  
    #entrenamiento .split{
      flex-direction: column;
      width: 100%;
      gap: 24px;
    }
  
    #entrenamiento .mainText{
      width: 100%;
      gap: 16px;
    }
  
    #entrenamiento h2{
      font-size: 24px;
    }
  
    #entrenamiento p,
    #entrenamiento .list li{
      font-size: 16px;
    }
  
    #entrenamiento .split-img{
      width: 100%;
      height: 260px;
    }
  
    /* ===== ENTRENADORES ===== */
    #entrenadores{
      padding: 64px 16px;
    }
  
    #entrenadores .container{
      max-width: 100%;
    }
  
    #entrenadores h2{
      font-size: 24px;
      margin-bottom: 16px;
    }
  
    .coaches{
      grid-template-columns: 1fr;
      gap: 24px;
    }
  
    .coach{
      border-radius: 24px;
    }
  
    .coach img{
      height: 220px;
      object-position: top;  /* mostrar la parte superior de la imagen */
    }
  
    /* ===== GALERÍA ===== */
    #galeria{
      padding: 64px 16px;
    }
  
    #galeria h2{
      font-size: 24px;
    }
  
    #galeria p{
      font-size: 16px;
    }
  
    .carousel{
      margin-top: 24px;
    }
  
    .carousel-item{
      flex: 0 0 100%;
      padding: 0;
    }
  
    .carousel-item img{
      height: 260px;
    }
  
    /* ===== CONTACTO ===== */
    #contacto{
      padding: 64px 16px;
      height: auto;
    }
  
    .contacto-container{
      width: 100%;
      flex-direction: column;
      gap: 32px;
    }
  
    .contacto-info h2{
      font-size: 24px;
    }
  
    .contacto-info p{
      font-size: 16px;
    }
  
    .contacto-mapa{
      flex: 0 0 auto;
    }
  
    .contacto-mapa iframe{
      width: 100%;
      height: 260px;
    }
  
    /* ===== FOOTER ===== */
    #footer-inatem{
      display: flex;
      flex-direction: column;
      padding: 24px 16px;
      justify-content: center;
      gap: 12px;
    }
  
    #footer-inatem .footer-content{
      width: 100%;
      max-width: 100%;
      flex-direction: column;
      gap: 8px;

    }
  
    #footer-inatem .footer-text{
      white-space: normal;
    }
}