/* ================= RESET GLOBAL =================
Quita márgenes por defecto del navegador y normaliza estilos */
*{
  margin:0; /* Elimina márgenes por defecto */
  padding:0; /* Elimina relleno por defecto */
  box-sizing:border-box; /* Incluye padding y border dentro del ancho/alto */
  text-decoration:none; /* Quita subrayado en enlaces */
  list-style:none; /* Quita viñetas de listas */
}

/* ================= CONTENEDOR GENERAL =================
Limita ancho del contenido */
.content{
  max-width:1200px; /* Ancho máximo del contenido */
  margin:0 auto; /* Centra horizontalmente */
  padding: top 0;
}

/* ================= NAVBAR ================= */
.menu-content{
  min-height:45px; /* Altura mínima del navbar */
  background-image:linear-gradient(to right,rgb(29,26,27),rgb(98,183,238)); /* Fondo degradado */
  display:flex; /* Activa flexbox */
  align-items:center; /* Centra verticalmente */
  justify-content:space-between; /* Separa logo y menú */
  padding:0 20px; /* Espacio lateral interno */
  position:fixed; /* Fija arriba */
  top:0; /* Pegado arriba */
  left:0; /* Pegado izquierda */
  width:100%; /* Ocupa todo el ancho */
  z-index:1000; /* Se mantiene encima del contenido */
}

.navbar ul{
  display:flex; /* Menú horizontal */
}

.navbar ul li a{
  font-size:15px; /* Tamaño texto */
  padding:10px 15px; /* Espacio interno clickeable */
  color:white; /* Color texto */
  display:block; /* Hace todo el bloque clickeable */
  font-weight:bold; /* Texto en negrita */
  transition:.3s; /* Animación suave */
}

.navbar ul li a:hover{
  color:#9e50ff; /* Cambia color al pasar mouse */
}

.menu-icon{
  width:35px; /* Tamaño icono hamburguesa */
  cursor:pointer; /* Cambia cursor */
  display:none; /* Oculto en desktop */
}

#menu{
  display:none; /* Oculta checkbox */
}

/* ================= HERO PRINCIPAL ================= */
.container{
  
  width:100%; /* Ocupa todo el ancho */
  max-width:100%;
  margin:0;
  background-image:
  linear-gradient(135deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.6) 40%, rgba(0,0,0,.2) 100%),
  url(../imagenes/imagen-emc-digital.png);
  min-height:600px; /* Altura mínima */
  color:white; /* Texto blanco */
  padding:50px 10px; /* Espaciado interno */
}

.h1-container h1{
   font-family: "Bangers", system-ui;
   font-size: 100px;
   font-style: normal;
   margin-top: 100px;
   text-align: center; 
}

.button-container{
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   text-align:center; /* Centra botón */
   margin-top:45px; /* Separación superior */
   font-weight:700; /* Texto más grueso */
}
  
button{
  background: linear-gradient(135deg, #0a58ca, #1e90ff); /* Gradiente moderno */
  padding: 14px 28px; /* Más presencia */
  border-radius: 12px; /* Más suave y premium */
  font-weight: 600; /* Semi-negrita */
  font-size: 16px; /* Tamaño profesional */
  letter-spacing: .5px; /* Más aire entre letras */
  border: none;
  color: white;
  cursor: pointer;

  box-shadow: 0 10px 25px rgba(10,88,202,.3); /* Sombra elegante */
  transition: all .3s ease; /* Animación suave */
}

button:hover{
  transform: translateY(-4px); /* Se eleva */
  box-shadow: 0 15px 35px rgba(10,88,202,.45); /* Sombra más intensa */
}

button:active{
  transform: translateY(0); /* Efecto presionado */
  box-shadow: 0 5px 15px rgba(10,88,202,.3);
}

.parrafo-container{
  margin-top: 80px;
  text-align:center; /* Texto alineado izquierda */
  font-size:24px; /* Tamaño grande */
  font-weight:550; /* Peso medio */
  margin: top 80px; /* Separación superior */
}


/* ===== SECCION H2 CON IMAGEN LATERAL ===== */
.h2-section{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:80px 10px;   
  gap:40px;
}

.h2-text h2{
  font-size:36px;
  font-weight:900;

  background: linear-gradient(270deg, #00c6ff, #0072ff, #6a11cb);
  background-size: 400% 400%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: gradientMove 6s ease infinite;
}

.h2-image{
  flex:0 0 40%;       /* ocupa solo 40% del ancho */
  display:flex;
  justify-content:flex-end;
}

.h2-image img{
  width:100%;
  max-width:400px;    /*  límite real de tamaño */
  height:auto;
}

body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

main{
  flex:1;
  padding-top:80px;
}

footer{
  margin-top:80px;
}

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

form{
  max-width:600px;
  margin:80px auto;
  padding:50px;
  background: linear-gradient(145deg, #0f0f0f, #1e3c72);
  border-radius:20px;
  box-shadow:0 25px 60px rgba(0,0,0,.4);
  display:flex;
  flex-direction:column;
  gap:25px;
}

/* Labels */
form label{
  display:flex;
  flex-direction:column;
  font-weight:600;
  font-size:14px;
  letter-spacing:1px;
  color:white;
  gap:10px;
  text-transform:uppercase;
}

/* Inputs y textarea */
/* Inputs y textarea */
form input,
form textarea{
  width:100%;              /* mismo ancho */
  padding:15px;            /* mismo padding */
  border-radius:12px;      /* mismo redondeado */
  border:none;
  outline:none;
  font-size:15px;
  background:#f5f5f5;
  transition:.3s ease;
  box-sizing:border-box;   /* evita diferencias raras */
}

/* Focus */
form textarea:focus{
  box-shadow:0 0 0 3px #1e90ff;
  background:white;
}

/* Botón */
form button{
  background: linear-gradient(135deg, #0a58ca, #1e90ff);
  padding:15px;
  border-radius:12px;
  font-weight:700;
  font-size:16px;
  border:none;
  color:white;
  cursor:pointer;
  letter-spacing:1px;
  transition:.3s ease;
  box-shadow:0 10px 25px rgba(30,144,255,.3);
}

form button:hover{
  transform:translateY(-4px);
  box-shadow:0 15px 35px rgba(30,144,255,.5);
}

form button:active{
  transform:translateY(0);
}

/* ================= CARRUSEL ================= */
.carousel-item{
  position:relative; /* Permite overlay absoluto */
}

.carousel-item img{
  width:100%;
  height: 800px;;        /*  elimina altura fija */
  object-fit:contain; /*  muestra toda la imagen */
}

.carousel-overlay{
  position:absolute; /* Encima de la imagen */
  inset:0; /* Ocupa todo */
  background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.2)); /* Oscurece lado izquierdo */
  display:flex; /* Flexbox */
  align-items:center; /* Centra vertical */
  padding:5%; /* Espacio interno */
  color:white; /* Texto blanco */
}

.carousel-overlay-content{
  max-width:520px; /* Limita ancho texto */
  animation:fadeUp .1s ease; /* Animación entrada */
}

.carousel-overlay h3{
  font: size 2.2em; /* Título grande */
  font: weight 1200px;; /* Negrita */
}

.carousel-overlay p{
  margin:15px 0; /* Separación vertical */
  opacity: 0.9;; /* Ligera transparencia */
}

.carousel-overlay .btn-emc{
  background: linear-gradient(135deg, #0a58ca, #1e90ff); /* Gradiente moderno */
  padding: 14px 28px; /* Más presencia */
  border-radius: 12px; /* Bordes más suaves y premium */
  font-weight: 600; /* Semi-negrita real */
  font-size: 15px; /* Tamaño equilibrado */
  letter-spacing: .5px; /* Espaciado elegante */
  border: none;
  color: white;
  display: inline-block; /* Asegura comportamiento correcto */
  text-decoration: none; /* Quita subrayado */
  box-shadow: 0 8px 20px rgba(10,88,202,.35); /* Sombra base */
  transition: all .3s ease; /* Animación suave */
}

.carousel-overlay .btn-emc:hover{
  transform: translateY(-4px); /* Se eleva */
  box-shadow: 0 15px 35px rgba(10,88,202,.5); /* Sombra más fuerte */
}

.carousel-overlay .btn-emc:active{
  transform: translateY(0); /* Efecto presionado */
  box-shadow: 0 5px 15px rgba(10,88,202,.3);
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px);} /* Inicio animación */
  to{opacity:1;transform:translateY(0);} /* Fin animación */
}

/* ------------------------------------------- PAGINA QUE HACEMOS ---------------------------------------*/

.hero-que-hacemos{
   background-image: linear-gradient(to right, rgb(29,26,27), rgb(98,183,238)); /* mismo color que el menú */
   padding:120px 20px 80px 20px;
   margin-top:70px; /* separación del navbar fijo */
   text-align:center;
}

.container-que-hacemos h1{
   font-family: "Bangers", system-ui;
   font-size:60px;
   letter-spacing:2px;
   color:white;
}

.container-hacemos-2{
   font-family: "Segoe UI", sans-serif;
   max-width:800px;
   margin:40px auto 0 auto;
}

.container-hacemos-2 h2{
   font-size:28px;
   font-weight:700;
   margin-bottom:20px;
   color:white;
}

.container-hacemos-2 p{
   font-size:20px;
   line-height:1.6;
   font-weight:400;
   color:white;
}

.servicios-section{
  padding:80px 20px;
  max-width:1200px;
  margin:0 auto;
}

.servicio{
  display:flex;
  align-items:center;
  gap:60px;
  margin-bottom:80px;
}

.servicio.reverse{
  flex-direction:row-reverse;
}

.servicio-img{
  flex:1;
}

.servicio-img img{
  width:100%;
  border-radius:20px;
  box-shadow:0 20px 40px rgba(0,0,0,.2);
}

.servicio-text{
  flex:1;
}

.servicio-text h3{
  font-family: "Bangers", system-ui;
  font-size:32px;
  margin-bottom:20px;
  font-weight:800;
  letter-spacing: 2px;
}

.servicio-text p{

   font-family: "Segoe UI";
   text-align:left; /* Texto alineado izquierda */
   font-size:30px; /* Tamaño grande */
   font-weight:550; /* Peso medio */
   margin-top:80px; /* Separación superior */
}


.servicio-doble .servicio-img{
  display:flex;              /* Las pone al lado */
  gap:20px;                  /* Espacio entre imágenes */
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;            /* En mobile se apilan */
}

/* Tamaño controlable */
.servicio-doble .servicio-img img{
  width:auto;                /* Mantiene tamaño original */
  height:auto;
  max-width:100%;            /* Nunca se rompe */
}

/* 🔥 CONTROL DE TAMAÑO */
.servicio-doble .servicio-img img{
  max-width:300px;           /* Cambiá esto para agrandar o achicar */
}

/* ================= SECCIÓN MIXTA ================= */
.seccion-mixta{
  display:flex; /* Columnas lado a lado */
  align-items:center; /* Centra vertical */
  gap:50px; /* Espacio entre columnas */
  padding:40px;
  margin-bottom:50px;
  line-height:1.6; /* Espaciado líneas */
  font-size:18px;
}

.texto-columna{flex:1.5;} /* Más espacio al texto */

.imagen-columna{
  flex:.4; /* Menos espacio imagen */
  display:flex;
  justify-content:center; /* Centra imagen */
}

.imagen-columna img{
  max-width:100%; /* No se desborda */
  height:auto; /* Mantiene proporción */
}

.banner-destacado{
  background-image: linear-gradient(to right, rgb(29,26,27), rgb(98,183,238)); /* Fondo con degradado horizontal (oscuro → celeste) */
  color: white;        /* Color del texto en blanco */
  padding: 30px;       /* Espacio interno en todos los lados */
  text-align: center;  /* Centra el texto horizontalmente */
}

/* ================= SCROLL ANIMATION SERVICIOS ================= */

.servicio-img{
  opacity:0;
  transition:all .4s ease;
}

/* Entran desde derecha */
.servicio .servicio-img{
  transform:translateX(100px);
}

/* Entran desde izquierda */
.servicio.reverse .servicio-img{
  transform:translateX(-100px);
}

/* Estado visible */
.servicio-img.visible{
  opacity:1;
  transform:translateX(0);
}

.servicio-img img{
  outline: 3px solid rgb(0, 0, 0);
}

/* ================= BLOQUE DERECHO LOGO + FORM ================= */

/* WRAPPER */

.contacto-form-wrapper{
  flex:1;
  min-width:350px;
  display:flex;
  align-items:center;
  justify-content:center;   /* centra el conjunto */
  gap:40px;                 /* menos separación */
}

/* LOGO */

.contacto-logo{
  flex:0 0 300px;           /* tamaño realista */
  display:flex;
  justify-content:flex-end; /* lo acerca al formulario */
}

.contacto-logo img{
  width:260px;              /* grande pero controlado */
  max-width:100%;
  transition:.3s ease;
}


/* FORMULARIO */

.contacto-form{
  flex:1;
  min-width:320px;
}

.contacto-form form{
  background:rgba(0,0,0,.35);
  padding:45px;
  border-radius:25px;
  backdrop-filter:blur(10px);
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  display:flex;
  flex-direction:column;
  gap:25px;
}

.contacto-form label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:14px;
  letter-spacing:1px;
}

.contacto-form input,
.contacto-form textarea{
  width:100%;
  padding:18px;
  border-radius:15px;
  border:none;
  outline:none;
  font-size:15px;
  box-sizing:border-box;
}

.contacto-form input:focus,
.contacto-form textarea:focus{
  box-shadow:0 0 0 3px #1e90ff;
}

.contacto-form button{
  background: linear-gradient(135deg, #0a58ca, #1e90ff);
  padding:18px;
  border-radius:15px;
  font-weight:700;
  border:none;
  color:white;
  cursor:pointer;
  transition:.3s ease;
  box-shadow:0 15px 35px rgba(30,144,255,.4);
}

.contacto-form button:hover{
  transform:translateY(-6px);
  box-shadow:0 25px 60px rgba(30,144,255,.6);
}

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

.contacto-home{
  background: linear-gradient(135deg, rgb(29,26,27), rgb(98,183,238));
  padding:140px 20px;
  margin-top:80px;
  color:white;
  position:relative;
  overflow:hidden;
}

/* efecto glow suave */
.contacto-home::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
  top:-150px;
  right:-150px;
}

.contacto-wrapper{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  gap:80px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  position:relative;
  z-index:2;
}

/* IZQUIERDA */

.contacto-info{
  flex:1;
  min-width:320px;
}

.contacto-info h2{
  font-family:"Bangers", system-ui;
  font-size:60px;
  margin-bottom:30px;
  letter-spacing:2px;
}

.contacto-texto{
  font-size:18px;
  line-height:1.8;
  margin-bottom:50px;
  max-width:600px;
}

.contacto-datos{
  display:flex;
  flex-direction:column;
  gap:25px;
}

.contacto-item span{
  display:block;
  font-size:14px;
  opacity:.7;
  margin-bottom:5px;
}

.contacto-item a{
  color:white;
  font-weight:600;
  text-decoration:none;
  font-size:16px;
  transition:.3s;
}

.contacto-item a:hover{
  color:#9e50ff;
}

.contacto-item p{
  margin:0;
  font-size:15px;
}

/* FORM DERECHA */

.contacto-form{
  flex:1;
  min-width:350px;
}

.contacto-form form{
  background:rgba(0,0,0,.35);
  padding:45px;
  border-radius:25px;
  backdrop-filter:blur(10px);
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  display:flex;
  flex-direction:column;
  gap:25px;
}

.contacto-form label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:14px;
  letter-spacing:1px;
}

.contacto-form input,
.contacto-form textarea{
  width:100%;
  padding:18px;
  border-radius:15px;
  border:none;
  outline:none;
  font-size:15px;
  box-sizing:border-box;
}

.contacto-form input:focus,
.contacto-form textarea:focus{
  box-shadow:0 0 0 3px #1e90ff;
}

.contacto-form button{
  background: linear-gradient(135deg, #0a58ca, #1e90ff);
  padding:18px;
  border-radius:15px;
  font-weight:700;
  border:none;
  color:white;
  cursor:pointer;
  transition:.3s ease;
  box-shadow:0 15px 35px rgba(30,144,255,.4);
}

.contacto-form button:hover{
  transform:translateY(-6px);
  box-shadow:0 25px 60px rgba(30,144,255,.6);
}

/* ================= WHATSAPP ================= */
.whatsapp-container{
  position: fixed;            /* Fija el contenedor en la pantalla */
  bottom: 20px;               /* Lo separa 20px del borde inferior */
  right: 20px;                /* Lo separa 20px del borde derecho */
  display: flex;              /* Activa flexbox */
  flex-direction: column;     /* Coloca los elementos uno debajo del otro */
  align-items: center;        /* Centra los elementos horizontalmente */
  z-index: 9999;              /* Lo pone por encima de casi todo */
}

.whatsapp-button img{
  width: 100px;               /* Tamaño del icono de WhatsApp */
  transition: .3s;            /* Hace suave cualquier animación (0.3 segundos) */
}

.whatsapp-button img:hover{
  transform: translateY(-5px); /* Mueve la imagen 5px hacia arriba al pasar el mouse */
}

.whatsapp-tooltip{
  background: #25D366;        /* Color verde oficial de WhatsApp */
  color: black;               /* Color del texto */
  padding: 8px 12px;          /* Espacio interno arriba/abajo y lados */
  border-radius: 20px;        /* Bordes redondeados */
  font-size: 14px;            /* Tamaño del texto */
  margin-bottom: 8px;         /* Espacio entre el tooltip y el botón */
}


/* ================= FOOTER ================= */
.footer-container{
  background-image:linear-gradient(to right,rgb(29,26,27),rgb(98,183,238));  /* Fondo con degradado horizontal oscuro estilo tech */
  padding:60px 20px; /* Espacio interno: 60px arriba/abajo y 20px a los lados */
  display:flex; /* Activa Flexbox */
  flex-direction:column; /* Coloca los elementos uno debajo del otro */
  align-items:center; /* Centra horizontalmente todo el contenido */
  gap:25px; /* Espacio entre cada bloque interno */
  color:white; /* Color general del texto en blanco */
}

.redes-sociales p{
  font-size:20px; /* Tamaño del texto */
  font-weight:500; /* Grosor medio */
  margin-bottom:15px; /* Espacio debajo del título */
  letter-spacing:1px; /* Espaciado entre letras */
}

.instagram-icon img{
  width:45px; /* Tamaño del ícono */
  transition:transform .3s ease, filter .3s ease; /* Animación suave para movimiento y sombra */
}

.instagram-icon{
  display:flex;
  justify-content:center;
  width:100%;
}

.instagram-icon img:hover{
  transform:translateY(-6px) scale(1.05); /* Sube 6px y agranda levemente al pasar el mouse */
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.4)); /* Agrega sombra elegante */
}

.copyright{
  border-top:1px solid rgba(255,255,255,.15); /* Línea superior sutil */
  padding-top:25px; /* Espacio entre la línea y el texto */
  width:100%; /* Ocupa todo el ancho disponible */
  text-align:center; /* Centra el texto */
}

.copyright p{
  font-size:13px; /* Tamaño pequeño */
  color:rgba(255,255,255,.7); /* Blanco con transparencia */
  letter-spacing:2px; /* Espaciado amplio entre letras */
}



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

@media (max-width: 991px) {  

  .menu-icon {
    display: block;
  }

  /* NAVBAR MOBILE */
  .menu-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }    

  .navbar {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: linear-gradient(to right, rgb(29,26,27), rgb(98,183,238));
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
  }

  #menu:checked ~ .navbar {
    max-height: 500px;
  }

  .navbar ul {
    flex-direction: column;
    text-align: center;
    padding: 20px 0;
  }

  /* HERO */
  .container {
    padding: 60px 20px;
    min-height: 450px;
  }

  .h1-container {
    margin-top: 10px; 
    text-align: center;
  }

  .parrafo-container {
    font-size: 16px;
    text-align: center;
    margin-top: 20px;
  }

  .button-container {
    margin-top: 20px;
  }

  /* SECCIÓN H2 */
  .h2-section{
    flex-direction: column;
    text-align: center;
  }

  .h2-image{
    width:100%;
    justify-content:center;
    margin-top:20px;
  }

  .h2-image img{
    width:90%;
    max-width:350px;
    height:auto;
    display:block;
  }

  /* SECCIÓN MIXTA */
  .seccion-mixta {
    flex-direction: column;
    padding: 20px;
    gap: 20px;
    text-align: center;
  }

  .texto-columna,
  .imagen-columna {
    width: 100%;
  }

  .imagen-columna img {
    max-width: 80%;
    margin: 0 auto;
  }

  /* CARRUSEL */
  .carousel-item img {
    height: 300px;
  }

  .carousel-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.2));
    padding: 20px;
  }

  .carousel-overlay h3 {
    font-size: 1.4rem;
  }

  .carousel-overlay p {
    font-size: .9rem;
  }

  /* FOOTER */
  .footer-container {
    padding: 30px 10px;
  }

  /* SERVICIOS */
  .servicio{
    flex-direction:column;
    text-align:center;
    gap:30px;
  }

  .servicio.reverse{
    flex-direction:column;
  }

  .servicio-text h3{
    font-size:24px;
  }

  .servicio-text p{
    font-size:16px;
  }

  .servicio-doble .servicio-img{
    flex-direction:column;
  }

  form{
    padding:30px 20px;
    margin:60px 15px;
  }

 .servicio{
  transform: none !important;   /* elimina movimiento vertical */
}

.servicio .servicio-img{
  transform: none !important;   /* elimina movimiento lateral */
}

}

/* Animación gradiente */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (max-width:991px){

  .contacto-wrapper{
    flex-direction:column;
    gap:60px;
  }

  .contacto-info h2{
    font-size:45px;
    text-align:center;
  }

  .contacto-texto{
    text-align:center;
  }

  .contacto-form{
    width:100%;
  }

  .whatsapp-button img{
    width:70px;
  }

  .contacto-logo img{
    width:200px;
  }

  .contacto-wrapper{
    flex-direction:column;
    gap:60px;
  }

  .contacto-info h2{
    font-size:45px;
    text-align:center;
  }

  .contacto-texto{
    text-align:center;
  }

  .contacto-form{
    width:100%;
  }

  .whatsapp-button img{
    width:70px;
  }

  .contacto-wrapper{
    flex-direction:column;     /*  apila todo vertical */
    gap:40px;
    text-align:center;
  }


  .contacto-wrapper{
    flex-direction: column;
    align-items: center;   /*  evita que se estire */
  }

  .contacto-form-wrapper{
    flex-direction: column;
    align-items: center;   /*  evita deformación */
  }

  .contacto-logo{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .contacto-logo img{
    width: 450px;          /* tamaño correcto en celular */
    height: auto;          /*  mantiene proporción */
    max-width: 100%;
    object-fit: contain;
  }

}