/* Estilos específicos para la página de Nosotros */

/* Ajustes para el header */
.interaction-team {
  padding-top: 8rem;
  padding-bottom: 4rem;
}

/* Ajustes para la sección principal */
.nosotros-section {
  padding-top: 0;
  padding-bottom: 0.3em; /* Añadido padding-bottom de 0.3em */
}

/* Contenedor para el texto del título */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 4em;
  padding-right: 4em;
}

/* Contenedor específico para Nosotros con menos margen a la izquierda */
.nosotros-container {
  padding-left: 0.5em; /* Reducimos el padding a la izquierda */
  max-width: 100%; /* Aseguramos que use todo el ancho disponible */
}

/* Ajuste adicional para el título Nosotros */
#nosotros-title {
  margin-left: 0 !important; /* Aseguramos que no haya margen a la izquierda */
  padding-left: 0 !important; /* Sin padding a la izquierda */
}

/* Asegurar que el texto sea del tamaño adecuado */
.word-item div {
  font-size: 15vw;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #000000;
}

/* Estilos para la animación del título "Nosotros" */
.animated-text {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.animated-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animated-text.visible span {
  opacity: 1;
  transform: translateY(0);
}

/* Retrasos escalonados para cada letra, para crear efecto de cascada */
.animated-text span:nth-child(1) { transition-delay: 0.1s; }
.animated-text span:nth-child(2) { transition-delay: 0.2s; }
.animated-text span:nth-child(3) { transition-delay: 0.3s; }
.animated-text span:nth-child(4) { transition-delay: 0.4s; }
.animated-text span:nth-child(5) { transition-delay: 0.5s; }
.animated-text span:nth-child(6) { transition-delay: 0.6s; }
.animated-text span:nth-child(7) { transition-delay: 0.7s; }
.animated-text span:nth-child(8) { transition-delay: 0.8s; }

/* Forzar color negro en elementos del navbar */
.navbar .text-size-small,
.navbar .caps,
.navbar .text-weight-medium,
.navbar-logo-text,
.navbar-text-logo,
.navbar a div,
.menu-button div {
  color: #000000 !important;
}

/* Específicamente para la página de nosotros */
.navbar-component .text-size-small,
.navbar-component .caps,
.navbar-component .text-weight-medium,
.navbar-link-block div,
.navbar-year div,
.menu-button div {
  color: #000000 !important;
}

/* Override para cualquier estilo inline */
[style*="color: #ffffff"],
[style*="color: rgb(255, 255, 255)"],
[style*="color:#ffffff"] {
  color: #000000 !important;
}

.section{
    padding-bottom: 0.3em;
}

/* Estilos para hacer que la página sea más responsiva */
@media screen and (max-width: 991px) {
  .word-item div {
    font-size: 18vw;
  }
  
  .interaction-team {
    padding-top: 6rem;
  }

  #nosotros-title {
    font-size: 10rem !important;
    padding-top: 120px !important; /* Aumentado el padding superior */
  }
  
  .container {
    padding-left: 3em;
    padding-right: 3em;
  }

  .nosotros-container {
    padding-left: 0.5em;
  }
}

@media screen and (max-width: 767px) {
  .word-item div {
    font-size: 20vw;
  }

  #nosotros-title {
    font-size: 8rem !important;
    padding-top: 100px !important; /* Aumentado el padding superior */
    padding-bottom: 40px !important;
  }
  
  .container {
    padding-left: 2em;
    padding-right: 2em;
  }

  .nosotros-container {
    padding-left: 0.25em;
  }
}

@media screen and (max-width: 479px) {
  .word-item div {
    font-size: 22vw;
  }
  
  .interaction-team {
    padding-top: 4rem;
    padding-bottom: 2rem;
  }

  #nosotros-title {
    font-size: 5rem !important;
    padding-top: 80px !important; /* Aumentado el padding superior */
    padding-bottom: 30px !important;
  }
  
  .container {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }

  .nosotros-container {
    padding-left: 0;
  }
}