/* home.css */
body {
  background-color: #0d0b56;
  color: white;
  text-align: center;
  margin: 0;
  padding: 0;
  background-image: url('../assets/img/fondo-interna.png');
  /* Reemplaza con la ruta real */
  background-size: cover;
  /* La imagen cubrirá toda la pantalla */
  background-repeat: no-repeat;
  /* No se repetirá */
  background-position: center top;
  /* Centrada horizontalmente y pegada arriba */
  min-height: 100vh;
  /* MODIFICADO: Ocupa al menos el 100% de la altura */
  width: 100%;
  font-family: Nunito, sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-synthesis: none;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.desafio-mat {
  background-image: url('../assets/img/web-velocidad-auto-carrera.png');
}

header {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

main h1 {
  font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: #fff;
}

main {
  margin-top: 60px;
}

h3 {
  font-weight: 900;
  font-size: clamp(0.8rem, 2vw, 1.5rem);
}

.tc9 {
  color: #229fa9 !important;
  background: none !important;
}

.tc10 {
  color: #e97448 !important;
  background: none !important;
}

.tc10.mat {
  color: white !important;
}

.tc11 {
  color: #a9a7df !important;
  background: none !important;
}

.logo {
  height: 10px;
}

.icono-texto {
  display: flex;
  align-items: center;
  /* Centra verticalmente */
  gap: 10px;
  /* Espacio entre el icono y el texto */
  margin-top: 20px;
}

.icono-texto img,
.icono-texto svg {
  height: 1em;
  /* Ajusta al tamaño del texto */
  width: auto;
  /* Mantiene proporción */
}

section {
  margin: 0;
  padding: 0;
}

h2 {
  font-weight: 300;
  font-size: clamp(1.2rem, 3vw, 2rem);
  color: #fff;
}

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

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

.contenedor-botones {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 20px;
  border-radius: 50px 50px 0 0;
  /* SOLO esquinas superiores redondeadas */
  background: transparent;
  width: 100%;
  /* Asegurar que ocupe el ancho para centrar bien en desktop */
  box-sizing: border-box;
}

.contenedor-botones.mat {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 85px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 20px;
  border-radius: 50px 50px 0 0;
  /* SOLO esquinas superiores redondeadas */
  background: transparent;
  width: 100%;
  /* Asegurar que ocupe el ancho para centrar bien en desktop */
  box-sizing: border-box;
}

.contenedor-botones::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50px 50px 0 0;
  /* SOLO en la parte superior */
  padding: 2px;
  /* Grosor del borde */
  background: linear-gradient(to bottom, #8a89ee73, #007bbd00);
  /* Azul a transparente */
  mask:
    linear-gradient(white, white) content-box,
    linear-gradient(white, white);
  mask-composite: exclude;
  pointer-events: none;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px 0 80px;
  /* padding izquierdo = tamaño del círculo + margen interno */
  height: 70px;
  border: none;
  border-radius: 40px;
  /* font-size se define en btn-azul/rojo */
  cursor: pointer;
  position: relative;
  width: max-content;
  line-height: 1.2;
  /* Mejorado para posible multi-línea */
  box-shadow: 3px 3px 10px rgb(0 0 0 / 30%);
  text-decoration: none;
  /* Asegurar que los <a> no tengan subrayado por defecto */
  box-sizing: border-box;
}

.btn-azul {
  background: linear-gradient(185deg, #21c4a7, #2435b0);
  color: white;
  font-weight: 600;
  font-size: clamp(0.9rem, 2.2vw, 1.2rem);
  /* CORREGIDO: MIN, VAL, MAX */
}

.btn-rojo {
  background: linear-gradient(185deg, #f05345, #c12657);
  color: white;
  font-weight: 600;
  font-size: clamp(0.9rem, 2.2vw, 1.2rem);
  /* CORREGIDO: MIN, VAL, MAX */
  padding-left: 80px;
  /* Mantenido para desktop */
}

/* Círculo blanco para los íconos */
.btn::before {
  content: '';
  width: 70px;
  height: 70px;
  background: white;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Íconos personalizados */
.btn-1::before {
  background-image: url('../assets/img/btn-icon-home_01.png');
  background-size: 30%;
  background-position: center;
  background-repeat: no-repeat;
}

.btn-2::before {
  background-image: url('../assets/img/btn-icon-home_02.png');
  background-size: 30%;
  background-position: center;
  background-repeat: no-repeat;
}

.btn-3::before {
  background-image: url('../assets/img/btn-icon-home_03.png');
  background-size: 30%;
  background-position: center;
  background-repeat: no-repeat;
}

.btn-4::before {
  background-image: url('../assets/img/btn-icon-home_04.png');
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
}

.btn-5::before {
  background-image: url('../assets/img/btn-icon-home_05.png');
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
}

.btn-6::before {
  background-image: url('../assets/img/btn-icon-home_06.png');
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
}

.btn-6-tf::before {
  background-image: url('../assets/img/btn-icon-home_tf.png');
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
}

.btn-7::before {
  background-image: url('../assets/img/btn-icon-home_07.png');
  background-size: 30%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Links útiles */
.links-utiles {
  display: flex;
  flex-direction: column;
  /* Cambiado a columna para centrar el .contenedor-links */
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Para que el centrado del hijo funcione */
}

.contenedor-links {
  display: flex;
  flex-flow: row wrap;
  /* Mantener wrap para desktop */
  justify-content: center;
  align-items: center;
  border-radius: 40px;
  margin-top: 40px;
  padding: 15px;
  /* Añadido padding general */
  background: linear-gradient(to bottom, #0c1e7e73, #007bbd00);
  box-sizing: border-box;
}

.icono-texto-link {
  text-decoration: none;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.icono-texto-link img {
  height: 40px;
  width: auto;
  flex-shrink: 0;
  margin-right: 5px;
}

.font-links {
  font-weight: 800;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  /* CORREGIDO y ajustado */
  color: #a9a7df;
  margin-left: 20px;
  /* Para desktop */
}

/* Se elimina .font-btn ya que .btn-azul y .btn-rojo definen sus fuentes */

.contenedor-links a {
  /* Estilo base para los <a> dentro de .contenedor-links */
  color: white;
  text-decoration: none;
  font-size: 1rem;
  /* Tamaño base, puede ser ajustado por .font-links */
  padding: 10px 15px;
  /* Padding ajustado */
  border-radius: 20px;
  background: rgb(255 255 255 / 20%);
  margin: 5px;
  /* Añadido pequeño margen para wrap en desktop */
}

/* ----- home.css (agregá o reemplazá) ---------------- */
.logo-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 60px;
  gap: 20px;
  flex-wrap: nowrap;
  /* Evita que salten de línea en desktop por defecto */
}

.logo-container a {
  display: block;
  max-width: 180px;
  flex: 0 0 auto;
}

.logo-container img {
  width: 100%;
  height: auto;
  display: block;
}

@media (width <=768px) {
  header {
    flex-direction: column;
    align-items: center;
    padding: 15px;
    /* Reducir padding */
  }

  .logo-container {
    padding: 15px 10px;
    /* Reducir padding lateral */
    flex-wrap: wrap;
    /* Permitir que los logos se apilen si no caben */
    justify-content: center;
    /* Centrar logos si se apilan */
  }

  .logo-container a {
    max-width: 140px;
    /* Reducir tamaño máximo de logos */
    margin-bottom: 10px;
    /* Espacio si se apilan */
  }

  .logo-container a:last-child {
    margin-bottom: 0;
  }


  main {
    margin-top: 20px;
    /* Reducir margen superior */
    padding: 0 10px;
    /* Añadir padding lateral a main */
  }

  main h1 {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
  }

  main h2 {
    font-size: clamp(1rem, 4vw, 1.5rem);
  }

  h3 {
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
  }

  .icono-texto {
    justify-content: center;
    /* Centrar el icono y texto del título de sección */
    margin-top: 30px;
    margin-bottom: 0px;
  }

  .icono-texto span h3 {
    margin-bottom: 0;
    /* Evitar doble margen */
  }

  .contenedor-botones {
    flex-direction: column;
    align-items: center;
    padding: 20px 10px 10px 10px;
    /* Ajustar padding del contenedor de botones */
    gap: 12px;
    /* Reducir el gap entre botones */
    border-radius: 30px 30px 0 0;
    /* Reducir redondez de borde superior */
  }

  .contenedor-botones::before {
    border-radius: 30px 30px 0 0;
    /* Coincidir con el contenedor */
  }

  .btn {
    width: 90%;
    max-width: 380px;
    padding: 0 15px 0 65px;
    /* padding-izquierdo = nuevo tamaño círculo + margen */
    height: 60px;
    font-size: 0.95rem;
    /* Tamaño de fuente más consistente para móvil */
    line-height: 1.3;
    white-space: normal;
    /* Permitir que el texto del botón haga wrap */
    text-align: left;
  }

  .btn-rojo {
    /* Sobreescribir padding-left para móvil */
    padding-left: 65px;
  }

  .btn::before {
    /* Círculo del icono */
    width: 55px;
    /* Reducir tamaño del círculo */
    height: 55px;
    /* Reducir tamaño del círculo */
    left: 2.5px;
    /* Ajustar para que quede centrado en la nueva altura del botón */
  }

  /* Los background-size de los iconos btn-X::before se mantienen como porcentajes,
     escalarán proporcionalmente con el nuevo tamaño de .btn::before. */

  .links-utiles {
    margin-top: 30px;
    /* Margen superior para la sección */
  }

  .contenedor-links {
    flex-direction: column;
    /* Apilar links */
    align-items: stretch;
    /* Hacer que los items ocupen el ancho disponible */
    gap: 10px;
    padding: 15px;
    margin-top: 15px;
    /* Reducir margen superior del contenedor interno */
    width: 90%;
    max-width: 380px;
    border-radius: 30px;
    /* Reducir redondez */
  }

  /* Para el título "LINKS ÚTILES" (el div) */
  .contenedor-links div.font-links.icono-texto-link {
    margin-left: 0;
    /* Resetear margen */
    justify-content: center;
    /* Centrar el título y su icono */
    margin-bottom: 10px;
    font-size: 1rem;
  }

  /* Para cada link individual <a> */
  .contenedor-links a.font-links.icono-texto-link {
    margin-left: 0;
    /* Resetear margen */
    width: 100%;
    /* Ocupar el ancho de .contenedor-links */
    text-align: center;
    /* Centrar el texto del link */
    padding: 10px 15px;
    font-size: 0.9rem;
    justify-content: center;
    /* Centrar contenido (icono y texto) del link */
    box-sizing: border-box;
  }

  .contenedor-links a.font-links.icono-texto-link img {
    height: 20px;
    /* Reducir tamaño del icono en los links */
    margin-right: 8px;
  }

  .footer-redes img {
    max-height: 50px;
    padding: 8px;
  }

  .footer-links {
    flex-direction: column;
    gap: 8px;
  }

  .footer-links a {
    font-size: 0.8rem;
  }

  footer p {
    font-size: 0.75rem;
  }

  .tc10 {
    color: #ffffff !important;
    background: none !important;
  }

  .tc9 {
    color: #ffffff !important;
    background: none !important;
  }
}