@import url('https://fonts.googleapis.com/css2?family=Merienda+One&family=Nunito:wght@200;300;400;500;600&display=swap');
*{
    font-family: 'futura-pt', sans-serif;
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; border:none;
    text-decoration: none;
    text-transform: capitalize;
 }
 
 *::selection{
    background-color: var(--main-color);
    color:var(--white);
 }
 
 :root {
   --primary-color: #f13033;
   --primary-color-dark: #c3282b;
   --secondary-color: #f9f9f9;
   --text-dark: #0f172a;
   --text-light: #64748b;
   --white: #ffffff;
   --max-width: 1200px;
 }
 
#menu-btn{
    display: none;
    font-size: 2.5rem;
    color:var(--black);
    cursor: pointer;
 }
/*--------------JEADER-----------------*/
header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  z-index: 1000;
  display: flex;
  justify-content: space-around;
  transition: 0.7s;
  padding: 30px 20px;
  background-color: rgba(238, 12, 12, 0);
  box-shadow: var(--box-shadow);
}

header.abajo {
  background: #000;
  padding: 15px 20px;
  position: fixed;
}

.header .flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 0;
}

.header .flex .logo img {
  height: 4.5rem;
}

.header .flex .navbar a {
  margin-left: 1rem;
  font-size: 1.5rem;
  color: var(--white);
}

header .logo {
  position: relative;
  color: #fff;
  font-weight: bold;
  font-size: 2em;
  letter-spacing: 2px;
  text-decoration: none;
  transition: 1.5s;
}

nav,
header ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

header ul {
  position: relative;
}

header ul li {
  list-style: none;
}

header ul li a {
  position: relative;
  font-family: helvetica;
  margin: 0 15px;
  text-decoration: none;
  color: #fff;
  letter-spacing: 2px;
  font-weight: 600;
  transition: 0.7s;
}

header.abajo .logo,
header.abajo ul li a {
  color: #000;
}
/*HEADER RESPONSIVE EN CELULARES*/
/* Estilo para el ícono hamburguesa */
#menu-btn {
  font-size: 2.5rem;
  color: white;
  cursor: pointer;
  display: none;
}

/* Ocultar menú en móviles y mostrar con toggle */
@media (max-width: 768px) {
  .header .flex {
    flex-wrap: wrap;
  }

  .navbar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #000;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 2rem;
    display: none;
  }

  .navbar.active {
    display: flex;
  }

  .navbar a {
    margin: 0.5rem 0;
  }

  #menu-btn {
    display: block;
  }
}

.zona1 {
  position: relative;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center center;
}

/*-------------------------------------------*/

 .bn632-hover {
   width: 10rem;
   height: 3.5rem;
   font-size: 14px;
   font-weight: 600;
   color: #fff;
   cursor: pointer;
   margin: 20px;
   padding: 8px 0px;
   text-align:center;
   border: none;
   background-size: 300% 100%;
   border-radius: 50px;
   moz-transition: all .4s ease-in-out;
   -o-transition: all .4s ease-in-out;
   -webkit-transition: all .4s ease-in-out;
   transition: all .4s ease-in-out;
 }
 
 .bn632-hover:hover {
   background-position: 100% 0;
   moz-transition: all .4s ease-in-out;
   -o-transition: all .4s ease-in-out;
   -webkit-transition: all .4s ease-in-out;
   transition: all .4s ease-in-out;
 }
 
 .bn632-hover:focus {
   outline: none;
 }
 
 .bn632-hover.bn26 {
   background-image: linear-gradient(
     to right,
     #25aae1,
     #4481eb,
     #04befe,
     #3f86ed
   );
   box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
 }
 
 .header .flex .navbar a:hover{
    text-decoration: underline;
    color:var(--main-color);
 }



:root{
   --main-color:#be9c79;
   --black:#333;
   --white:#fff;
   --light-color:#666;
   --border:.2rem solid var(--black);
   --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}
/*LENGUAJE*/
#language-switch {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999;
}

#lang-btn {
  
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: #000000;
  border: 1px solid #ccc;
  padding: 6px 10px;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: background-color 0.3s;
}

#lang-btn:hover {
  background-color: #ffffff;
}

.flag {
  width: 25px;
  height: 15px;
  object-fit: cover;
}


/* SCROLLBAR */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #000000;
  
}

::-webkit-scrollbar-thumb {
  background: #6e57e0;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4e3bb3;
}


html{
   font-size: 62.5%;
   overflow-x: hidden;
   scroll-behavior: smooth;
   scroll-padding-top: 6.5rem;
}

section{
   padding:3rem 2rem;
   max-width: 100vw;
   margin:0 auto;
}

.heading{
   text-align: center;
   margin-bottom: 3rem;
   color: #ffffff;
   font-size: 2rem;
}

.heading img{
   height: 4rem;
   margin-bottom: 1rem;
   
}

.heading h3{
   font-size:4rem;
   color:var(--white);
   font-family: 'Merienda One', cursive;
}
/*BOTON WSP*/
.btn-wsp{
   position:fixed;
   width:60px;
   height:60px;
   line-height: 63px;
   bottom:25px;
   right:25px;
   background:#25d366;
   color:#FFF;
   border-radius:50px;
   text-align:center;
   font-size:35px;
   box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
   z-index:100;
   transition: all 300ms ease;
}
.btn-wsp:hover{
   background: #20ba5a;
}
@media only screen and (min-width:320px) and (max-width:768px){
   .btn-wsp{
       width:63px;
       height:63px;
       line-height: 66px;
  }
}




#menu-btn{
   display: none;
   font-size: 2.5rem;
   color:var(--black);
   cursor: pointer;
}

.home-bg{
   background: linear-gradient(#000000 5%,#003b6e 50%,#0051ff 95%) ;

   
min-height: 100vh;

   
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.home {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start; /* 👉 sube los elementos */
  padding-top: 60px;  /* 👉 opcional: sube todo un poco más */
  
  
}

.home-bg .home .herocontainer {
  background-color: #9dff0000;
}

.home-bg .home .herocontainer .imagenhero {
  background-color: transparent;
  display: flex;
  gap: 0;
  padding: 0;
  scale: 80%;
  animation: float 4s ease-in-out infinite;
}


.home-bg .home .content {
  color: white;
  padding: 0 40px;
  font-size: 32px;
  font-weight: 300;
  min-width: 120px;
  max-width: 600px;
  align-self: center;
    /* ✅ Centra verticalmente */
  justify-self: end;      /* ✅ Alinea a la derecha */
}

.subtitulo-home {
  font-size: 2.5rem; /* Más grande */
  font-weight: bold;
  color: #ffffff;
  margin-top: 0.8rem;
  text-transform: uppercase;
}

.descripcion-home {
  font-size: 2rem; /* Más grande */
  
  line-height: 1.8;
  margin-top: 1rem;
  color: #ffffff;
  max-width: 600px;
}


@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.home-bg .home .herocontainer .imagenhero {
  animation: float 4s ease-in-out infinite;
}
.home-bg .home .content .botonmas {
  background-image: linear-gradient(
    to right,
    #25aae1,
    #4481eb,
    #04befe,
    #3f86ed
  );
  box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
  width: 10rem;
  height: 3.5rem;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  margin: 20px 0 0 0;     /* 👉 arriba: 20px, izquierda: 0 */
  padding: 8px 0;
  text-align: center;
  border: none;
  background-size: 300% 100%;
  border-radius: 50px;
  transition: all .4s ease-in-out;
}
/*RESPONSIVE*/
@media (max-width: 1024px) {
  .home {
    padding-top: 80px;
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
    justify-items: center;
  }

  .home .content {
    justify-self: center;
    align-self: center;
    padding: 0 20px;
    font-size: 28px;
  }

  .subtitulo-home {
    font-size: 2rem;
  }

  .descripcion-home {
    font-size: 1.5rem;
    margin: 1rem auto;
  }

  .herocontainer {
    display: flex;
    justify-content: center;
  }

  .imagenhero {
    width: 100%;
    max-width: 400px;
    scale: 100%;
  }
}

@media (max-width: 600px) {
  .home .content {
    font-size: 22px;
  }

  .subtitulo-home {
    font-size: 1.5rem;
  }

  .descripcion-home {
    font-size: 1.2rem;
    line-height: 1.5;
  }

  .botonmas {
    width: 100%;
    max-width: 220px;
    font-size: 14px;
    padding: 10px 0;
  }

  .imagenhero {
    max-width: 300px;
  }
}










/*SERVICIOS*/
.services-section {
  background: linear-gradient(to bottom, #000, #001a33);
  padding: 6rem 2rem 8rem;
  color: white;
  text-align: center;
  min-height: 100vh;
  
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.service {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid #00aaff55;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 220px; /* Asegura altura consistente */
}

.service:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 170, 255, 0.25);
}

.service h3 {
  font-size: 2rem;
  color: #00aaff;
  margin-bottom: 1rem;
}

.service p {
  font-size: 1.4rem;
  line-height: 1.6;
  color: #e0e0e0;
}



.about {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem; /* reemplaza height por padding */
  box-sizing: border-box;
  flex-direction: column; /* importante para móviles */
}

.about .row {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  width: 100%;
  justify-content: center;
}

.about .content {
  padding: 0 2rem;
  width: 100%;
}

.about .content h3 {
  font-size: 3rem;
  color: white;
  padding-bottom: 1rem;
}

.about .content p {
  font-size: 1.6rem;
  color: white;
  line-height: 1.8;
}

/* Responsive */
@media (min-width: 768px) {
  .about .content {
    width: 80%;
  }

  .about .content h3 {
    font-size: 3.5rem;
  }
}



/*
FORMULARIO DE CONTACTO #ae00ff
*/
.container {
   max-width: 85%;
   margin: auto;
 }
.hero{
   width: 100%;
   height: 100vh;
   background-image: linear-gradient(rgba(0,0,0,0.7), #3551b5), url(../assets/imagen3p.jpg);
   background: linear-gradient(#000000,#003b6e,#1100ff 90%) ;
   background-position: center;
   background-size: cover;
   display: flex;
   align-items: center;
   justify-content: center;
}

.hero .titulocontacto .h1titulo{
   color: #ffffff;
   font-style: normal;
   font-size: 50px;
   display: grid;
   place-items: center;
   padding: 5%;

}

form{
      width: 90%;
      max-width: 600px;
}

.input-group{
   margin-bottom: 30px;
   position: relative;
}

input, textarea{
   width: 100%;
   padding: 10px;
   outline: 0;
   border: 1px solid #fff;
   color: #fff;
   background: transparent;
   font-size: 15px;
}

label{
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
   padding: 10px;
   color: #fff;         
   cursor: text;
   transition: 0.2s;
   font-size: 1.4rem;
}

button{
   padding: 10px 0;
   color: #fff;
   outline: none;
   background: transparent;
   border: 1px solid #fff;
   width: 100%;
   cursor: pointer;
   font-size: 2rem;
}

input:focus~label,
input:valid~label,
textarea:focus~label,
textarea:valid~label{
   top: -35px;
   font-size: 14px;
}

.row{
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.row .input-group{
   flex-basis: 48%;
}


/* INTRO TRABAJOS*/

.intro-trabajos {
  width: 100vw;
  height: 100vh;
  padding: 100px 20px 50px;
  text-align: center;
  color: white;
  background-color: #000;
  background-image:
    radial-gradient(at 0% 0%, rgb(44, 38, 224) 0px, transparent 50%),
    radial-gradient(at 80% 100%, rgb(58, 52, 220) 0px, transparent 50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.intro-trabajos h2 {
  font-size: 3em;
  margin-bottom: 30px;
  color: #fff;
}

.intro-trabajos p {
  font-size: 2.4em;
  max-width: 800px;
  margin: 0 auto 40px;
  color: #e0e0e0;
  line-height: 1.8;
}

.intro-trabajos .arrow-down {
  width: 50px;
  animation: bounce 2s infinite;
  filter: invert(1);
}

 
 @keyframes bounce {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(10px); }
 }
 



 /*LABUROS*/
.trabajos {
  background-color: #fff;
  padding: 0;
  margin: 0;
}

.trabajos .container {
  background-color: #000;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0;
  margin: 0 auto;
  width: 100vw;
  max-width: 100vw;
}

.trabajos .project {
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.trabajos .project figure {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9; /* Mantiene 1920x1080 aunque el contenido no lo sea */
}

.trabajos .project img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Recorta bordes y rellena el espacio sin distorsionar */
  transition: transform 400ms ease-out;
}


.trabajos .project figure .capa {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 34, 41, 0.714);
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease-out;
  text-align: center;
}

.trabajos .project figure:hover .capa {
  opacity: 1;
  visibility: visible;
}

.trabajos .project figure:hover img {
  transform: scale(1.3);
}

.trabajos .project figure .capa h3 {
  color: #fff;
  font-weight: 400;
  margin: 30px 0 120px;
  transition: margin 400ms ease-out;
}

.trabajos .project figure:hover .capa h3 {
  margin-top: 70px;
  margin-bottom: 15px;
  font-size: 3rem;
}

.trabajos .project figure .capa p {
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  max-width: 220px;
  margin: auto;
  width: 100%;
  font-size: 2rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .trabajos .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .trabajos .container {
    grid-template-columns: 1fr;
  }
}
/* Para separar verticalmente las dos secciones en móvil */
@media (max-width: 600px) {
  .intro-trabajos {
    padding-bottom: 150px; /* más espacio debajo */
  }

  .trabajos .container {
    width: 100%; /* evito scroll horizontal */
    max-width: 100%;
    grid-template-columns: 1fr;
  }
}


/*FOOTER*/
.footer {
  background-color: #000;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between; /* espacio entre los bloques */
  padding: 0 3rem;
  height: 6rem;
  box-sizing: border-box;
  width: 100%;
}

/* Texto y logo a la izquierda */
.footer .text-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.5rem;
  color: white;
  flex: 1 1 auto;
  text-transform: none;
}

.footer .text-footer .logo img {
  height: 40px;
  width: auto;
}

/* Iconos centrados */
.footer .share {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex: 0 0 200px; /* ancho fijo para que quede centrado */
  font-size: 2rem;
  color: white;
}

.footer .share a {
  color: white;
  transition: color 0.3s ease;
}

.footer .share a:hover {
  color: #ae00ff;
  background: transparent;
}

/* Responsive para móviles */
@media (max-width: 767px) {
  .footer {
    flex-direction: column;
    height: auto;
    padding: 1rem 1.5rem;
    text-align: center;
    gap: 1rem;
  }

  .footer .text-footer {
    justify-content: center;
    font-size: 1.2rem;
    text-transform: none;
  }

  .footer .share {
    flex: none;
    justify-content: center;
    font-size: 2.5rem;
  }
}

/*PRUEBAS*/