/* ------------------------------ */
/* PALETA DE COLORES */
/* ------------------------------ */
:root {
  --verde-oscuro: #0f3d3e;
  --verde-claro: #74c69d;
  --gris-fondo: #f7f5ef;
  --gris-texto: #555;
  --blanco: #ffffff;
}

/* ------------------------------ */
/* RESET SUAVE */
/* ------------------------------ */
*{
  box-sizing: border-box;
}

/* ------------------------------ */
/* ESTILOS GENERALES */
/* ------------------------------ */
html{
  scroll-behavior: smooth;
}

body{
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--gris-fondo);
  color: var(--gris-texto);
  padding-top: 70px;
  margin: 0;
}

/* ------------------------------ */
/* NAVBAR */
/* ------------------------------ */
.navbar{
  background-color: var(--verde-oscuro);
}

.navbar-brand{
  font-weight: 700;
}

.navbar-brand,
.nav-link{
  color: var(--blanco) !important;
}

.nav-link{
  font-weight: 500;
  transition: color .3s ease;
}

.nav-link:hover{
  color: var(--verde-claro) !important;
}

/* ------------------------------ */
/* HERO / INICIO */
/* ------------------------------ */
#inicio{
  min-height: 60vh;
  background-color: var(--verde-oscuro);
  color: var(--blanco);
  display: flex;
  align-items: center;
}

#inicio h1{
  font-size: 2.5rem;
}

#inicio p{
  color: var(--verde-claro);
  max-width: 650px;
  margin: auto;
}

/* ------------------------------ */
/* FRASE */
/* ------------------------------ */
#frase{
  font-style: italic;
}

/* ------------------------------ */
/* HABILIDADES */
/* ------------------------------ */
#habilidades{
  background-color: #f8f9fa;
}

#habilidades h2{
  color: var(--verde-oscuro);
}

#habilidades i{
  font-size: 3rem;
}

/* ------------------------------ */
/* TARJETAS DE HABILIDADES */
/* ------------------------------ */
#habilidades .bg-white{
  transition: transform .2s ease, box-shadow .2s ease;
}

#habilidades .bg-white:hover{
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* ------------------------------ */
/* PROYECTOS */
/* ------------------------------ */
#proyectos h2{
  color: var(--verde-oscuro);
}

.accordion-button{
  font-weight: 600;
}

.accordion-button:not(.collapsed){
  background-color: var(--verde-claro);
  color: var(--verde-oscuro);
}

/* ------------------------------ */
/* BOTONES */
/* ------------------------------ */
.btn-success{
  background-color: var(--verde-oscuro);
  border: none;
}

.btn-success:hover{
  background-color: var(--verde-claro);
  color: var(--verde-oscuro);
}

/* ------------------------------ */
/* CONTACTO */
/* ------------------------------ */
#contacto{
  background-color: #f8f9fa;
}

#contacto h2{
  color: var(--verde-oscuro);
}

form .form-control{
  border-radius: 10px;
  border: 2px solid var(--verde-claro);
}

form .form-control:focus{
  box-shadow: none;
  border-color: var(--verde-oscuro);
}

form button{
  background-color: var(--verde-oscuro);
  color: var(--blanco);
  border-radius: 10px;
  border: none;
  transition: background .3s ease;
}

form button:hover{
  background-color: var(--verde-claro);
  color: var(--verde-oscuro);
}

/* ------------------------------ */
/* FOOTER */
/* ------------------------------ */
footer{
  background-color: var(--verde-oscuro);
  color: var(--blanco);
  text-align: center;
  padding: 15px;
  font-size: 0.9rem;
}

/* ------------------------------ */
/* AOS FIX */
/* ------------------------------ */
[data-aos]{
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos].aos-animate{
  opacity: 1;
}

/* ------------------------------ */
/* RESPONSIVE */
/* ------------------------------ */
@media (max-width:768px){

  #inicio h1{
    font-size: 2rem;
  }

  #inicio p{
    font-size: 1rem;
  }

}