:root {
      --color-primary:#1F3A3A;
      --color-light:#F0EDE6;
      --color-dark:#203040;
      --color-deep:#0E2A36;
    }

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    body{
      font-family:"Noto Sans",sans-serif;
      background:var(--color-light);
      color:var(--color-dark);
      line-height:1.6;
    }

    h1,h2,h3,h4{
      font-family:"Barlow Condensed",sans-serif;
      letter-spacing:1px;
    }

    header{
      position:fixed;
      width:100%;
      top:0;
      background:rgba(14,42,54,0.9);
      backdrop-filter:blur(6px);
      z-index:1000;
    }

    .nav-container{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:20px 8%;
      color:white;
    }

    nav a{
      margin-left:30px;
      text-decoration:none;
      color:white;
      font-weight:500;
    }

.social {
  display: flex;
  align-items: center;
  column-gap: 28px;
}
.social a {
  transition: opacity 0.35s ease;
}
.social a:hover {
  opacity: 0.5;
}
.social img{
    width:26px;
    height:26px;
    filter: grayscale(100%) brightness(0.6);
    transition: all 0.3s ease;
    cursor:pointer;
}

/* hover elegante */

.social img:hover{
    filter: grayscale(0%) brightness(1);
    transform: translateY(-3px);
}

    .hero{
      height:100vh;
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      color:white;
      text-align:center;
      overflow:hidden;
    }

    .hero video{
      position:absolute;
      width:100%;
      height:100%;
      object-fit:cover;
      top:0;
      left:0;
      z-index:-1;
    }

    .hero-overlay{
      position:absolute;
      width:100%;
      height:100%;
      background:rgba(14,42,54,0.6);
      top:0;
      left:0;
      z-index:-1;
    }

    .hero-content h1{
      font-size:4rem;
      margin-bottom:20px;
    }

    .btn-primary{
      text-decoration: none;
      padding:14px 32px;
      background:var(--color-primary);
      border:none;
      color:white;
      font-weight:500;
      cursor:pointer;
    }
    .btn-primary:hover{
      background-color: var(--color-dark);
    }

    section{
      padding:100px 8%;
    }

    .section-title{
      text-align:center;
      margin-bottom:60px;
    }

    .services-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:40px;
    }

    .service-card{
      background:white;
      padding:40px;
      border-left:6px solid var(--color-primary);
    }

    .portfolio-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
      gap:20px;
    }

    .portfolio-item img{
      width:100%;
      height:240px;
      object-fit:cover;
    }

    .about{
      background:var(--color-primary);
      color:white;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:60px;
      align-items:center;
    }

    .about img{
      width:100%;
      border-radius:6px;
    }

    footer{
      background:var(--color-deep);
      color:white;
      text-align:center;
      padding:40px;
    }

    @media(max-width:900px){
      .hero-content h1{
        font-size:2.8rem;
      }

      .about{
        grid-template-columns:1fr;
      }
    }