/* 1. Variables globales */
:root {
  --color-primario: #2A8BFF;
  --color-fondo-1: #ffffff;
  --color-fondo-2: #F9FAFB;
  --color-texto-1: #000000;
  --color-texto-2: #ffffff;        
  --color-hover: #1e6fd1;

  --fuente-principal: 'Inter', sans-serif;
  --espaciado-seccion: 6rem;
  --sombra-suave: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.25);
 
  /* Tamaños de fuente (en rem) */
  --tamaño-12: 0.75rem;    /* 12px */
  --tamaño-14: 0.875rem;   /* 14px */
  --tamaño-16: 1rem;       /* 16px */
  --tamaño-18: 1.125rem;   /* 18px */
  --tamaño-24: 1.5rem;     /* 24px */
  --tamaño-32: 2rem;       /* 32px */
  --tamaño-48: 3rem;       /* 48px */
  --tamaño-64: 4rem;       /* 64px */
  --tamaño-96: 6rem;       /* 96px */
   /* Pesos tipográficos */
  --peso-fino: 100;
  --peso-claro: 300;
  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semicursiva: 600;
  --peso-negrita: 700;
  --peso-negro: 900;
}

/* 2. Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, p, a{
    color: inherit ;
    text-decoration: none;
    letter-spacing: 0.04rem; /* 0.64px */
}
h1 {
    color: var(--color-texto-2);
    font-size: var(--tamaño-96);
    font-weight: var(--peso-negro);
}
h2 {
    font-size: var(--tamaño-48);
}
h3{
    font-size: var(--tamaño-24);
    font-weight: var(--peso-negrita);
    text-align: center;
}
p{
    font-size: var(--tamaño-18);
    transition: 600ms ease;
}
.menu ul{
    list-style: none;
}

  li {
  cursor: pointer;
   transition: 600ms ease;
}
  .opcion p:hover,  li:hover{
    color: var(--color-primario);
  }
/* 3. Componentes globales */
.content{
    width: 100%;
    max-width: 88.125rem; /* 1410px */
    margin: 0 auto;
    padding: 8rem 0;
    display: flex;
    align-items: center;
    gap: 3rem;
}
.column{
    display: flex;
    flex-direction: column;
    gap: 3rem; /* 48px */
}
.card{
    display: flex;
    gap: 2rem; /* 32px */
}
.star{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 8rem; /* 128px */

}
.star img{
    width: 1.125rem !important; /* 18px */
}
button {
    padding: 1.5rem;
    background: var(--color-primario);
    color: var(--color-texto-2);
    border: 0;
    font-size: var(--tamaño-18);
    font-weight: 500;
    transition: 600ms;
    font-family: var(--fuente-principal);
    width: 17.031vw;
    cursor: pointer;
}
button:hover{
    background-color: var(--color-hover);
    transition: 600ms;
}
p{
    margin: 0rem;
    letter-spacing: 0.04rem; /* 0.64px */
    font-weight: var(--peso-medio);
}
/**/
body {
  font-family: var(--fuente-principal);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*header*/

/*header top*/
.header .header-top {
  background-color: var(--color-primario); /* Fondo azul */
  color: var(--color-fondo-2);               /* Texto blanco */
  font-size: 0.75rem;                   /* 12px */
  padding: 1rem 0;   
}
.header .header-top .content {
  max-width: 88.125rem;                     /* 1410px */
  margin: 0 auto;                           
  padding: 0;                     
  display: flex;                         
  justify-content: space-between;       
  align-items: center;                  
  flex-wrap: wrap;
  color: var(--color-texto-2);
}
.content-left,
.redes-sociales {
  display: flex;
  align-items: center;
  gap: 1.5rem; /* 24px */
}
.header .content-left p{
    display: flex;
    gap: 0.375rem; /* 6px */
    font-size: var(--tamaño-12);
}
.header-top i[class^="fa-"]{
    font-size: 1rem; /* 16px */
}

/*header barra de navegacion*/
.header .header-nav {
  background-color: var(--color-fondo-1); 
  padding: 2rem 0;                         
}
.header .header-medio .content {
  display: flex;                          
  justify-content: space-between;        
  align-items: center;                   
  margin: 0 auto;                        
  padding: 2rem 0;                     
  font-size: var(--tamaño-16); 
}
.header .header-medio .content ul {
  display: flex;
  width: 43rem; /* 688px */
  justify-content: space-between;
}
.header .header-medio button{
    padding: 1rem !important; 
    font-size: var(--tamaño-16);
    width: 12.813rem; /* 205px */
}

/*header banner*/
.header .header-Bottom {
    background-image: url('imagenes/banner.webp'); 
    color: var(--color-texto-2); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    align-content: center;
    height: 100%;
    min-height: 93vh;
}
.header .header-Bottom .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
}
.header .header-Bottom button{
    width:17.031vw; 
}

/*Somos*/
.somos .content{
    gap: 9.5rem; /* 152px */
}
.metrica{
    display: flex;
    flex-direction: column;
    gap: 2rem; /* 32px */
    padding: 3rem; /* 48px */
    align-items: center !important;
    box-shadow: var(--sombra-suave); 
}
.somos .column img{
    height: 42.875rem;
    width: 43rem;
}
.metrica i{
    font-size: 4rem; 
    color: var(--color-primario); 
}
/*Proyecto*/
.proyecto{
    background: var(--color-fondo-2);
}

.proyecto .content{
    flex-direction: column;
    gap: 3rem; /* 48px */
    align-items: center;
    text-align: center;
}
.proyecto .opcion, .material .dato{
    display: flex;
    flex-direction: row;
    width: 28rem; /* 448px */
    justify-content: space-between;
}
.proyecto p{
    cursor: pointer;
}
.proyecto button{
    width: 28rem; /* 448px */
}

.proyecto .galeria{
    display: grid;
    grid-template-columns: repeat(3, 2fr);
    gap: 2rem; /* 32px */
}
.proyecto .galeria .item, .proyecto img{
    width: 28rem;  /* 448px */
    height: 28rem; /* 448px */
    overflow: hidden;
}
/*Soluciones*/

.soluciones .content{
    flex-direction: column;
    align-items: center;
    gap: 3rem; /* 48px */
}
.soluciones h2{
  text-align: center;
}
.soluciones .card, .trabajo .card{
    flex-direction: row;
    align-items: center;
    text-align: center;
    gap: 2rem; /* 32px */
}
.soluciones .area{
    box-shadow: var(--sombra-suave); 
}
.soluciones .descripcion{
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem 1.5rem 1.5rem; /* 32px 24px 24px 24px */
    gap: 1.5rem; /* 24px */
}
/*Materiales*/

.material .content{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.material .descripcion{
    display: flex;
    flex-direction: column;
    gap: 2rem; /* 32px */
}
.material .dato{
    width: 35.5rem; /* 568px */
}
.material .imagenes {
  overflow: hidden;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem; /* 32px */
  padding-bottom: 8rem; /* 128px */
}

.material .lista-material {
  display: flex;
  flex-direction: row;
  gap: 2rem; /* 32px */
  animation: scrollLoop 30s linear infinite;
  width: max-content;
}

.material .lista-material img {
  width: 12.5rem; /* 200px */
  height: auto;
  object-fit: cover;
  flex-shrink: 0;
  pointer-events: none;
}

.fila-2 {
  animation-delay: 10s; 
}

/* Animación en bucle infinito */
@keyframes scrollLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-25%);
  }
}
/*Trabajo*/

.trabajo {
    background: var(--color-fondo-2);
}
.trabajo .content{
    flex-direction: column;
    align-items: center;
    gap: 3rem; /* 48px */
}
.trabajo .proceso{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* 24px */
    padding: 2rem; /* 32px */
}
.trabajo .proceso:hover{
    box-shadow: var(--sombra-suave); 
}
.trabajo .proceso img{
    padding: 2.4375rem 0; /* 39px */
    height: 10.875rem;    /* 174px */
}
/*Comentarios*/

.comentario .content{
    gap: 10rem; /* 160px */
    flex-direction: column;
}

.comentario .fila{
    display: flex;
    gap: 2rem; /* 32px */
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.comentario .column{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem; /* 32px */
    padding: 5.5rem 2rem 2rem 2rem; /* 88px 32px 32px 32px */
    background-color: var(--color-fondo-2);
    position: relative;
}
.comentario .column > img{
    width: 8rem;  /* 128px */
    position: absolute;
    top: -4rem;   /* 64px */
    z-index: 2;
}
.comentario .descripcion{
    display: flex;
    flex-direction: column;
    gap: 2rem; /* 32px */
    align-items: center;
    text-align: center;
    padding: 5.5rem 2rem 2rem 2rem; /* 88px 32px 32px 32px */
    background: var(--color-fondo-2);
    position: relative;
}
.comentario .dato{
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* 4px */
    align-items: center;
    text-align: center;
}
.comentario h4{
    font-size: 0.875rem; /* 14px */
    color: #cae2ff;
    font-weight: var(--peso-regular);
}
/*Call to action*/
.call-to-action {
    background-image: url('imagenes/cta.webp'); 
    background-repeat: no-repeat; 
    background-position: center; 
}
.call-to-action .content {
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem; /* 48px */
    color: var(--color-texto-2);
    padding: 4rem 0; /* 64px */
}

/*Footer*/
.footer {
    display: flex;
    flex-direction: column;
align-items: center;
}
.footer .content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 9.5rem; /* 152px */
}
.footer .column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.footer img {
    width: 100%; /* 328px */
}

.footer .redes-sociales i{
    font-size: 2.5rem; 
    color: var(--color-primario); 
}
.footer .menu ul{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 28rem; /* 448px */
}
.footer .dato{
    display: flex;
    flex-direction: column;
    gap: 2rem; /* 32px */
    align-items: center;
    text-align: center;
}
.footer .parametro{
    display: flex;
    flex-direction: row;
    gap: 1rem; /* 16px */
    justify-content: flex-start;
    align-items: center;
}
.footer .parametro i{
    font-size: 1.5rem; 
}
.footer .parametro p{
text-align: left;
}
.footer .bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1.875rem 0; /* 30px */
    border-top: 0.0625rem solid #ccc; /* 1px */
    justify-content: space-between;
    width: 88.125rem; /* 1410px */
}
.footer .bottom p {
    font-size: var(--tamaño-12);
    color: var(--color-texto-1);
}


/* Responsive Design */

/* Para pantallas grandes (escritorio) */
@media (max-width: 1600px) {
  .header .header-top .content,
  .content, .footer .bottom {
    max-width: 1010px;
    width: 100%;
  }
  .content {
    padding: 5rem 0;
    gap:2rem;
  }
  .column{
    gap: 2rem; /* 32px */
  }
  .footer .content {
    gap: 80px;
  }
  h1 { font-size: var(--tamaño-64); }
  h2 { font-size: var(--tamaño-32); }
  h3 { font-size: var(--tamaño-18); }
  p, a, li { font-size: var(--tamaño-14); }
  button { font-size: var(--tamaño-14); padding: 1.25rem; gap: 0.75rem; }

.header .header-medio .content ul{
width: 28rem;
}
.footer .content ul{
    width: 23rem;
}
    .somos .content{
    gap: 4rem; /* 120px */
    }
    .somos .column img{
        height: 30rem;
        width: 31rem;
    }
    .somos .metrica{
        padding: 2rem; /* 32px */
    }
    .metrica i{
        font-size: 3rem; /* 48px */
    }
  .soluciones .card img {
    width: 228px;
  }
  .proyecto .opcion{
    width: 19.7rem; /* 315px */
  }
  .proyecto .galeria .item,
  .proyecto img{
    width: 19.7rem;
    height: 19.7rem;
  }
  .proyecto button{
    width: 19.7rem;
  }
  .trabajo .proceso{
    padding: 1.5rem; /* 32px */
  }
  .trabajo .proceso img{
    width: 100%;
    height: 8.875rem;
  };
   .footer .column {
    gap: 2rem; /* 32px */
  }
}

/* Para laptops y tablets grandes */
@media (max-width: 1200px) {
  .header .header-medio .content ul {
    width: 22rem;
  }
  .footer .content ul {
    width: 16rem;
  }
  .soluciones .card img {
    width: 180px;
  }
  .proyecto .galeria .item,
  .proyecto img {
    width: 14rem;
    height: 14rem;
  }
  .proyecto button {
    width: 14rem;
  }
  .header .header-top .content,
  .content, .footer .bottom {
    max-width: 975px;
    width: 100%;
    padding: 4rem 1.5rem;
  }
  .footer .content {
    gap: 48px;
  }

  .proyecto .galeria .item, .proyecto img {
    width: 300px;
    height: 300px;
  }
  h1 { font-size: var(--tamaño-48); }
  h2 { font-size: var(--tamaño-24); }
  h3 { font-size: var(--tamaño-16); }
  p, a, li { font-size: var(--tamaño-14); }
  button { font-size: var(--tamaño-14); padding: 1.125rem; gap: 0.75rem; }
}

/* Para tablets */
@media (max-width: 900px) {
  .header .header-medio .content ul {
    width: 16rem;
  }
  .footer .content ul {
    width: 12rem;
  }
  .soluciones .card img {
    width: 120px;
  }
  .proyecto .galeria .item,
  .proyecto img {
    width: 10rem;
    height: 10rem;
  }
  .proyecto button {
    width: 10rem;
  }
  .header .header-top .content,
  .content, .footer .bottom {
    max-width: 700px;
    width: 100%;
    padding: 2rem 1rem;
  }
  .footer .content {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .somos .content {
    flex-direction: column;
    gap: 48px;
  }
  .proyecto .galeria {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .proyecto .galeria .item, .proyecto img {
    width: 100%;
    height: 200px;
  }
  h1 { font-size: var(--tamaño-32); }
  h2 { font-size: var(--tamaño-18); }
  h3 { font-size: var(--tamaño-14); }
  p, a, li { font-size: var(--tamaño-12); }
  button { font-size: var(--tamaño-12); padding: 1rem; gap: 0.5rem; }
}

/* Para móviles */
@media (max-width: 600px) {
  .header .header-medio .content ul {
    width: 100%;
  }
  .footer .content ul {
    width: 100%;
  }
  .soluciones .card img {
    width: 100%;
    max-width: 100px;
  }
  .proyecto .galeria .item,
  .proyecto img {
    width: 100%;
    height: 6rem;
  }
  .proyecto button {
    width: 100%;
  }
  .header .header-top .content,
  .content, .footer .bottom {
    max-width: 100%;
    width: 100%;
    padding: 1rem 0.5rem;
    flex-direction: column;
    align-items: flex-start;
  }
  .footer .content {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .footer .bottom {
    flex-direction: column;
    gap: 8px;
    width: 100%;
    text-align: center;
  }
  .proyecto .galeria {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .proyecto .galeria .item, .proyecto img {
    width: 100%;
    height: 150px;
  }
  .somos .column img {
    width: 100%;
    height: auto;
  }
  button {
    width: 100% !important;
    font-size: var(--tamaño-12);
    padding: 0.75rem;
    gap: 0.5rem;
  }
  h1 { font-size: var(--tamaño-24); }
  h2 { font-size: var(--tamaño-14); }
  h3 { font-size: var(--tamaño-12); }
  p, a, li { font-size: var(--tamaño-12); }
}