* { 
  margin:0; 
  padding:0; 
  box-sizing:border-box; 
  font-family:'Montserrat', sans-serif; 
  scroll-behavior:smooth; 
}

body { 
  background:#F9FAFB; 
  color:#2E2E2E; 
  line-height:1.6; 
}

a { 
  text-decoration:none; 
  color:inherit; 
}

/* HEADER */
header { 
  position: sticky; 
  top:0; 
  background:rgba(13,59,102,0.95); 
  color:white; 
  padding:15px 30px; 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  z-index:1000; 
  backdrop-filter: blur(5px);
  gap: 40px;  
}

header img { height:50px; }

nav {
  display: flex;
  flex: 1;
  justify-content: flex-end; /* alinea los elementos del menú a la derecha */
}

nav ul { display:flex; list-style:none; gap:20px }

.logo-navbar {
  height: 50px;
  width: auto;
  display: block;
}


nav ul li a { 
  color:white; 
  font-weight:600; 
  transition:0.3s; 
}

nav ul li a:hover { color:#D4AF37; }

.lang-flag {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.lang-flag img {
  width: 25px;   /* tamaño de la bandera */
  height: auto;
  border-radius: 3px; /* opcional, bordes suaves */
   cursor: pointer;
  transition: transform 0.2s ease;
}

.lang-flag img:hover {
  transform: scale(1.1); /* efecto hover */
}

@media (max-width: 768px) {
  nav ul {
    display: none;
    flex-direction: column;
    background: rgba(13,59,102,0.95);
    position: absolute;
    top: 100%;
    right: 0;
    width: 100vw;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
  }

   nav ul li {
    width: 100%;        /* cada enlace ocupa todo el ancho */
  }

  nav ul li a {
    display: block;     /* para que todo el área sea clickeable */
    text-align: center; /* centrar el texto */
    padding: 15px 0;
    border-top: 1px solid rgba(255,255,255,0.2); /* opcional, separador */
  }

  nav ul.show {
    display: flex;
  }

  /* Botón hamburguesa */
  .hamburger {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
  }

  .hamburger div {
    width: 25px;
    height: 3px;
    background: white;
    transition: 0.3s;
  }
}

/* Opcional: animar la hamburguesa a X */
.hamburger.active div:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active div:nth-child(2) {
  opacity: 0;
}
.hamburger.active div:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* SECCIONES */
section { 
  padding:100px 20px; 
  max-width:1100px; 
  margin:auto; 
  opacity:0; 
  transform: translateY(50px); 
  transition: all 0.8s ease-out; 
  border-radius:12px; 
}

section.visible { 
  opacity:1; 
  transform: translateY(0); 
}

/* HERO */
.hero {
  background-image: url('../img/logo-hero.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 300px;
  background-blend-mode: lighten;
  opacity: 0.1;
  color:white;
  display:flex; 
  flex-direction:column; 
  justify-content:flex-end; 
  align-items:center; 
  text-align:center;
  position:relative;
  min-height: 100vh;
  padding: 40px 20px;
 
}

#inicio::before {
  content:""; 
  position:absolute; 
  top:0; left:0; 
  width:100%; 
  height:100%; 
  background:rgba(0,0,0,0.55);
}

#inicio h1, #inicio p, #inicio button { 
  position:relative; 
  z-index:1; 
}

.text-block {
  text-align: center;
  max-width: 600px;
  margin-bottom: 40px; /* Espacio desde el borde inferior */
}

h1,h2,h3 { margin-bottom:20px; }

p { margin-bottom:15px; }

/* BOTONES */
.btn { 
  background:#0D3B66; 
  color:white; 
  padding:12px 25px; 
  border:none; 
  border-radius:6px; 
  cursor:pointer; 
  font-weight:600; 
  transition: background-color 0.3s ease; 
}

.btn:hover { background:#006D77; }

/* CARDS */
.servicios-container, 
.portfolio-container { 
  display:flex; 
  flex-wrap:wrap; 
  gap:25px; 
  justify-content:center; 
}

.card { 
  background:#fff; 
  padding:30px; 
  border-radius:12px; 
  flex:1 1 250px; 
  text-align:center; 
  box-shadow:0 6px 15px rgba(0,0,0,0.08); 
  transition: transform 0.3s; 
}

.card:hover { transform: translateY(-8px); }

/* SOBRE MI */
#sobre-mi { 
  background:linear-gradient(135deg,#e0f7fa,#83C5BE); 
}

.about-content { 
  display:flex; 
  flex-wrap:wrap; 
  gap:40px; 
  max-width:1200px; 
  margin:0 auto; 
  align-items:center; 
}

.about-text { flex:1; min-width:300px; }

.about-text h2 { 
  font-size:32px; 
  margin-bottom:20px; 
  color:#0D3B66; 
}

.about-text p { font-size:18px; line-height:1.6; }

.highlight { 
  color:#006D77; 
  font-weight:bold; 
}

.valores { list-style:none; margin-top:20px; }

.valores li { margin-bottom:10px; font-size:16px; }

.about-image { flex:1; min-width:300px; text-align:center; }

.profile-img { 
  max-width:300px; 
  border-radius:8px; 
  box-shadow:0 4px 12px rgba(0,0,0,0.15); 
}

/* SERVICIOS */
#servicios { 
  background:linear-gradient(135deg,#83C5BE,#006D77); 
}

#servicios h2 { color:#fff; }

/* PORTFOLIO */
#portfolio { 
  background:linear-gradient(135deg,#006D77,#0D3B66); 
}

#portfolio h2 {
  margin-bottom: 10px;
  font-size: 2rem;
  color: #fff; /* tu azul */
}

.portfolio-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 40px auto;
  font-size: 1.1rem;
  color: #ADE8F4; /* gris claro */
  line-height: 1.6;
}

/* CONTACTO */
#contacto { 
  background:linear-gradient(135deg,#0D3B66,#D4AF37); 
}

#contacto h2 { color:#fff; }

#contacto h3 {
  margin-top: 30px; /* probá aumentar o reducir */
}

input, textarea { 
  width:100%; 
  padding:12px; 
  margin-bottom:12px; 
  border-radius:6px; 
  border:1px solid #ccc; 
}

a i {
  font-size: 28px;   /* tamaño del ícono */
  margin: 0 10px;    /* espacio entre íconos */
  color: #ffffff;    /* color inicial */
  transition: 0.3s;
}

a i:hover {
  color: #25D366; /* verde de WhatsApp o podés usar otro */
}

a[href*="linkedin"] i:hover {
  color: #0077b5; /* azul de LinkedIn */
}

/* FOOTER */
footer { 
  background:#0D3B66; 
  color:white; 
  text-align:center; 
  padding:25px 0; 
  margin-top:40px; 
}

/* RESPONSIVE */
@media(max-width:768px){
  nav ul{ flex-direction:column; gap:10px; }
  .servicios-container,
  .portfolio-container{ flex-direction:column; }
}