/* =========================================
   VARIABLES GLOBALES
========================================= */

:root{

  --bg:#050505;
  --bg2:#0b0b0f;
  --red:#990002;
  --white:#ffffff;
  --gray:#c4c4c4;

}

/* =========================================
   RESET
========================================= */

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

/* =========================================
   BODY
========================================= */

body{
  background:var(--bg);
  color:var(--white);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* =========================================
   LINKS
========================================= */

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

/* =========================================
   IMAGENES
========================================= */

img{
  width:100%;
  display:block;
}

/* =========================================
   SECCIONES
========================================= */

section{
  padding:140px 7%;
}

/* =========================================
   TITULOS
========================================= */

.title{
  font-family:'Oswald',sans-serif;
  font-size:5rem;
  line-height:1.05;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:35px;
}

.red{
  color:var(--red);
}

.mini-title{
  color:var(--red);
  letter-spacing:4px;
  font-size:0.8rem;
}

.section-text{
  max-width:500px;
  color:#b9b9b9;
  line-height:1.8;
}

/* =========================================
   LOADER
========================================= */

.loader{
  position:fixed;
  inset:0;
  background:black;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:999999;
  transition:1s;
}

.loader.hidden{
  opacity:0;
  pointer-events:none;
}

.loader-logo{
  font-size:4rem;
  font-family:'Oswald',sans-serif;
}

.loader-logo span{
  color:var(--red);
}

/* =========================================
   CURSOR
========================================= */

.cursor{
  width:20px;
  height:20px;
  border:2px solid var(--red);
  border-radius:50%;
  position:fixed;
  pointer-events:none;
  z-index:999999;
  transform:translate(-50%,-50%);
  transition:0.08s;
}

.cursor.grow{
  transform:translate(-50%,-50%) scale(2);
  background:rgba(255,42,42,0.2);
}

/* =========================================
   NAVBAR
========================================= */

nav{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:85px;
  padding:0 7%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(10px);
  z-index:999;
  transition:0.4s;
  letter-spacing:1px;
}

nav.scrolled{
  height:70px;
  background:black;
}

.logo-container{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo-img{
  width:65px;
  height:65px;
  object-fit:contain;
}

.logo{
  font-family:'Oswald',sans-serif;
  font-size:2rem;
  letter-spacing:2px;
}

.menu{
  display:flex;
  gap:40px;
}

.menu a{
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:0.9rem;
  transition:0.3s;
}

.menu a:hover{
  color:var(--red);
}

/* =========================================
   BOTONES
========================================= */

.btn{
  background:var(--red);
  padding:16px 30px;
  color:white;
  border:none;
  cursor:pointer;
  transition:0.4s;
  font-weight:600;
}

.btn:hover{
  transform:translateY(-6px);
}

.btn-outline{
  border:1px solid rgba(255,255,255,0.2);
  padding:16px 30px;
  transition:0.4s;
}

.btn-outline:hover{
  border-color:var(--red);
}

/* =========================================
   HERO
========================================= */

.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  position:relative;
  background:
  url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=1600&auto=format&fit=crop');
  background-size:cover;
  background-position:center;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to right,
  rgba(0,0,0,0.9),
  rgba(0,0,0,0.5));
}

.hero-content{
  position:relative;
  z-index:2;
  width:700px;
}

.hero p{
  color:#d0d0d0;
  line-height:1.8;
  margin-bottom:35px;
  max-width:600px;
}

.tag{
  display:inline-block;
  padding:10px 20px;
  border:1px solid rgba(255,255,255,0.1);
  margin-bottom:25px;
}

.hero-buttons{
    display:flex;
  gap:28px;
  margin-top:10px;
}

.stats{
  display:flex;
  gap:100px;
  margin-top:80px;
}

.stats h2{
  color:var(--red);
  font-size:3rem;
  font-family:'Oswald',sans-serif;
}

/* =========================================
   GRID
========================================= */

.services-grid,
.projects-grid{
  display:grid;
  gap:25px;
  margin-top:50px;
}

.services-grid{
  grid-template-columns:2fr 1fr 1fr;
}

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

/* =========================================
   CARDS
========================================= */

.service-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  padding:50px;
  min-height:260px;
  transition:0.4s;
  backdrop-filter:blur(10px);
}

.service-card:hover{
  transform:translateY(-10px);
  border-color:var(--red);
}

.service-card.large{
  grid-row:span 2;
}

.service-card h3{
  font-family:'Oswald',sans-serif;
  font-size:2rem;
  margin-bottom:15px;
}

/* =========================================
   PROYECTOS
========================================= */

.project{
  position:relative;
  overflow:hidden;
  height:420px;
}

.project img{
  height:100%;
  object-fit:cover;
  transition:0.5s;
}

.project:hover img{
  transform:scale(1.1);
}

.overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,
  rgba(0,0,0,0.9),
  transparent);

  display:flex;
  align-items:end;
  padding:40px;
}

.overlay h3{
  font-size:2.2rem;
  font-family:'Oswald',sans-serif;
}

/* =========================================
   CLIENTES
========================================= */

.clients{
  background:#080808;
}

.client-logos{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:25px;
  margin-top:50px;
}

.client-box{
  padding:40px;
  border:1px solid rgba(255,255,255,0.08);
  text-align:center;
  transition:0.4s;
  font-family:'Oswald',sans-serif;
  font-size:1.5rem;
}

.client-box:hover{
  border-color:var(--red);
  color:var(--red);
}

/* =========================================
   CONTACTO
========================================= */

.contact-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  margin-top:50px;
}

.contact-info{
  background:rgba(255,255,255,0.03);
  padding:40px;
  border:1px solid rgba(255,255,255,0.08);
}

.contact-info h3{
  margin-bottom:20px;
}

.contact-info p{
  margin-bottom:20px;
  color:#cfcfcf;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:18px;
  margin-bottom:20px;
  background:#0b0b0f;
  border:1px solid rgba(255,255,255,0.08);
  color:white;
}

.contact-form textarea{
  height:160px;
  resize:none;
}

/* =========================================
   FOOTER
========================================= */

footer{
  padding:30px 7%;
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex;
  justify-content:space-between;
  color:#999;
}

/* =========================================
   REVEAL
========================================= */

.reveal{
  opacity:0;
  transform:translateY(80px);
  transition:1s;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

/* =========================================
   MENU MOBILE
========================================= */

.menu-mobile-btn{
  display:none;
  font-size:2rem;
  cursor:pointer;
}

.mobile-menu{
  position:fixed;
  top:85px;
  right:-100%;
  width:260px;
  height:100vh;
  background:#080808;
  display:flex;
  flex-direction:column;
  padding:40px;
  gap:30px;
  transition:0.4s;
  z-index:998;
}

.mobile-menu.active{
  right:0;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1100px){

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

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

  .contact-container{
    grid-template-columns:1fr;
  }

  .client-logos{
    grid-template-columns:1fr 1fr;
  }

}

@media(max-width:768px){

  .cursor{
    display:none;
  }

  .menu{
    display:none;
  }

  .menu-mobile-btn{
    display:block;
  }

  .title{
    font-size:3rem;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:flex-start;
  }

  .stats{
    flex-direction:column;
    gap:30px;
  }

  .client-logos{
    grid-template-columns:1fr;
  }

/* =========================================
   TEXTO DEL LOGO
========================================= */

.logo-text{
  display:flex;
  flex-direction:column;
  line-height:1;
}

/* TEXTO PRINCIPAL */

.logo-main{
  font-family:'Oswald',sans-serif;
  font-size:2.2rem;
  font-weight:700;
  letter-spacing:4px;
  color:#ffffff;
}

/* TEXTO PEQUEÑO */

.logo-sub{
  font-size:0.7rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#bdbdbd;
  margin-top:4px;
}
}

/* =========================================
   NOSOTROS (FIX LIMPIO)
========================================= */

.about{
  background:#080808;
}

/* TEXTO PRINCIPAL */
.about-text{
  max-width:850px;
  color:#bdbdbd;
  line-height:2;
  margin-top:20px;
  margin-bottom:60px;
  font-size:1.05rem;
}

/* GRID 3 COLUMNAS */
.about-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:25px;
}

/* CUADROS */
.about-card{
  background:#101014;
  border:1px solid rgba(255,255,255,0.08);
  padding:40px;
  min-height:240px;
  transition:0.4s;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

/* HOVER */
.about-card:hover{
  transform:translateY(-8px);
  border-color:#990002;
}

/* TITULO */
.about-card h3{
  font-family:'Oswald',sans-serif;
  font-size:2rem;
  margin-bottom:15px;
  letter-spacing:2px;
}

/* TEXTO */
.about-card p{
  color:#c7c7c7;
  line-height:1.9;
}

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

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

}

/* =========================================
   LOGOS INFINITOS PERFECTOS
========================================= */

.logo-marquee{
  overflow:hidden;
  width:100%;
  margin-top:60px;
}

.logo-track{
  display:flex;
  width:max-content;
  animation:marquee 25s linear infinite;
}

.logo-set{
  display:flex;
  gap:80px;
  align-items:center;
  padding-right:80px;
}

.logo-set img{
  height:60px;
  width:auto;
  opacity:0.6;
  filter:grayscale(100%);
  transition:0.3s;
}

.logo-set img:hover{
  opacity:1;
  filter:grayscale(0%);
  transform:scale(1.1);
}

/* ANIMACIÓN PERFECTA SIN SALTO */

@keyframes marquee{
  0%{
    transform:translateX(0);
  }
  100%{
     transform:translateX(calc(-1 * (50%)));
  }
}

/* =========================================
   BLOQUE CORPORATIVO (NUEVA SECCIÓN)
========================================= */

.contact-info h3{
  font-family:'Oswald',sans-serif;
  font-size:2rem;
  margin-bottom:20px;
  letter-spacing:2px;
}

.contact-info p{
  margin-bottom:18px;
  line-height:1.9;
  color:#d0d0d0;
  letter-spacing:0.3px;
}

.contact-info strong{
  color:#ff2a2a;
}

/* =========================================
   CONTACTO CENTRADO + TEXTO GRANDE
========================================= */

.contact-info.center{
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:70px 40px;
  min-height:380px;
}

/* TÍTULO */
.contact-info.center h3{
  font-size:3rem;
  font-family:'Oswald',sans-serif;
  margin-bottom:30px;
  letter-spacing:3px;
}

/* TEXTO PRINCIPAL */
.contact-info.center p{
  font-size:1.35rem;
  line-height:2.2;
  margin-bottom:12px;
  color:#e0e0e0;
  letter-spacing:0.5px;
}

/* RESALTADO */
.contact-info.center strong{
  color:#ff2a2a;
  font-weight:600;
}

/* =========================================
   FOOTER CON LOGO
========================================= */

.footer{
  padding:30px 7%;
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#999;
}

.footer-left{
  display:flex;
  align-items:center;
  gap:15px;
}

.footer-logo{
  width:45px;
  height:45px;
  object-fit:contain;
  opacity:0.9;
  transition:0.3s;
}

.footer-logo:hover{
  opacity:1;
  transform:scale(1.05);
}

.footer-right{
  font-size:0.95rem;
  letter-spacing:1px;
}