/* Variables de colores */
:root {
    --verde-profundo: #7BBBAF;
    --verde-menta: #A6D4BF;
    --gris-claro: #F2F2F2;
    --gris-medio: #D9D9D9;
    --gris-oscuro: #262626;
    --blanco: #FFFFFF;
    --azul-profundo: #103F59;
    --azul-medio: #245D71;
    --naranja: #FF8E6A;
    --azul-claro-verde: #559B9E;
    --verde-muy-claro: #D3E7CE;
  }
  
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

  /* Estilos generales */
  .rectangulo {
    position: absolute;
    width: 80px;
    height: 80px;
  }
  
.titulo{
  color: #245D71;
}

  /* Colores de fondo */
  .bg-verde-profundo { background-color: var(--verde-profundo); }
  .bg-verde-menta { background-color: var(--verde-menta); }
  .bg-gris-claro { background-color: var(--gris-claro); }
  .bg-gris-medio { background-color: var(--gris-medio); }
  .bg-gris-oscuro { background-color: var(--gris-oscuro); }
  .bg-blanco { background-color: var(--blanco); }
  .bg-azul-profundo { background-color: var(--azul-profundo); }
  .bg-azul-medio { background-color: var(--azul-medio); }
  .bg-naranja { background-color: var(--naranja); }
  .bg-azul-claro-verde { background-color: var(--azul-claro-verde); }
  .bg-verde-muy-claro { background-color: var(--verde-muy-claro); }
  
  /* Estilo de texto */
  .text-grande {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 50px;
    line-height: 59px;
    text-align: center;
    color: #000000;
  }
  
  /* Clases de ancho */
  .width-165 { width: 165px; }
  .width-169 { width: 169px; }
  .width-172 { width: 172px; }
  .width-174 { width: 174px; }
  .width-175 { width: 175px; }
  .width-176 { width: 176px; }
  .width-177 { width: 177px; }
  .width-180 { width: 180px; }
  .width-184 { width: 184px; }
  .width-187 { width: 187px; }
  
  .card {
    border: none; /* Quita el borde */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Agrega una sombra */
    transition: box-shadow 0.3s ease; /* Añade una transición suave */
}

.border{
  border-radius: 35px;
}

.card:hover {
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* Sombra más fuerte al pasar el ratón */
}

.hero-image {
  max-width: 70vh; /* Ajusta el tamaño máximo de la imagen */
  width: 100%;      /* Asegura que sea responsive */
  height: auto;     /* Mantiene las proporciones */
  margin: 0 auto;   /* Centra la imagen horizontalmente */
  display: block;   /* Garantiza el centrado */
}


.bg-diferenciado {
  background-color: #f8f9fa; /* Color claro diferenciado */
  padding: 20px; /* Espaciado interno */
}
/* Estilo para botones */
.btn {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Botón específico para .btn-naranja */
.btn-naranja {
  background-color: var(--naranja);
  color: var(--blanco);
  border: none;
}

.btn-naranja:hover {
  background-color: #e57a58; /* Tonalidad más oscura al pasar el mouse */
  transform: translateY(-2px); /* Efecto de elevación */
}

.btn-lg {
  font-size: 1.25rem;
  padding: 0.75rem 1.5rem;
}

/* Bordes redondeados */
.rounded-pill {
  border-radius: 50px;
}

/* Sombra para mayor énfasis */
.shadow {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow:hover {
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2);
}

.navbar-nav .nav-link {
  color: white !important;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.navbar-nav .nav-link:hover {
  color: #ddd !important; /* Cambia el color al pasar el mouse */
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8); /* Efecto de resplandor */
}


/* Canvas ocupa todo el fondo */
#animated-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: #ffffff; /* Fondo blanco */
  display: block;           /* Evita márgenes en el canvas */
  margin: 0 auto;
}

/* Ajusta el hero para el contenido */
.hero {
  font-family: 'Orbitron', sans-serif;
  position: relative;
  height: 60vh; /* Toma el alto de la ventana */
  overflow: hidden;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Asegura que el contenido esté por encima del canvas */
.z-index-1 {
  position: relative;
  z-index: 1;
}

.orb{
  font-family: 'Orbitron', sans-serif;
}

.mon{
  font-family: 'Roboto', sans-serif;
}

#proyectos{
  width: 100%;
}