@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=Pacifico&family=Roboto:ital,wght@0,100..900;1,100..900&family=Sigmar&family=Special+Gothic+Expanded+One&display=swap');
body {
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
  font-family: sans-serif;
  overflow-x: hidden; 
}

.navbar {
  background-color: #FFFFFF;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  z-index: 9999;
}

.navbar.scrolled {
background-color: #252440;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.navbar.scrolled .nav-links a,
.navbar.scrolled .ri-linkedin-box-fill,
.navbar.scrolled .linkedin-btn {
  color: #FFFFFF; 
}

.logo {
  max-height: 95px;
  margin-bottom: 0;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 60px;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  color: #808080;
  font-size: 18px;
  transition: color 0.3s;
  font-family: 'Inter', sans-serif;
}

.nav-links a:hover {
  color: #000000;
}
.linkedin-btn {
  color: #000000;
  font-size: 36px;
  text-decoration: none;
  outline: none;
  box-shadow: none;
  border: none;
}

.ri-linkedin-box-fill {
    color: #252440;
    font-size: 36px;
    text-decoration: none;
    outline: none;
    box-shadow: none;
    border: none;
}

.mobile-sidebar {
  display: none;
  flex-direction: column;
  align-items: flex-start; /* Alineación a la izquierda */
  background-color: #252440;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 20px; /* Menos padding vertical, más horizontal */
  z-index: 100;
}

/* Media query para móviles */
@media (max-width: 768px) {
  .mobile-sidebar {
    display: flex;
    height: 8vh; 
  }

  .navbar {
    display: none;
  }

  .mobile-logo {
    display: block;
    height: 120px;
    width: auto;
    filter: brightness(0) invert(1);
    margin: 0;
    padding: 0;
    margin-top: -30px;
    margin-left: -40px;
  }
}


#checkbox {
  display: none;
}

.toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1001;
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  
}

.bars {
  height: 4px;
  background-color: white;
  border-radius: 5px;
  transition: 0.3s ease;
}

#bar1, #bar2 {
  width: 100%;
}

#checkbox:checked + .toggle #bar1 {
  transform: rotate(45deg) translateY(6px);
}
#checkbox:checked + .toggle #bar2 {
  transform: rotate(-45deg) translateY(-6px);
}

.mobile-menu-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 102vh;
  background-color: #FFFFFF;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  transition: right 0.3s ease;
  z-index: 1000;
  touch-action: none;
  -ms-touch-action: none;
  overscroll-behavior: none;

}
.mobile-menu-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  width: 100%;
}

.mobile-menu-panel ul li {
  margin: 0; 
}

.mobile-menu-panel > ul > li > a {
  display: block;
  width: 100%;
  padding: 15px 20px;
  color: white;
  font-size: 20px;
  text-decoration: none;
  background-color: #252440;
  transition: background-color 0.3s ease, padding-left 0.3s ease;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.mobile-menu-panel > ul > li > a:hover,
.mobile-menu-panel > ul > li > a:focus {
  background-color: #FFFFFF;
  padding-left: 30px;
  color: #808080;
}

.mobile-menu-panel > ul > li > a:active {
  background-color: #252440;
}

#checkbox:checked ~ .mobile-menu-panel {
  right: 0;
}
@keyframes slideInRightCustom {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRightCustom {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.animate-slide-in {
  animation: slideInRightCustom 0.6s ease both;
}

.animate-slide-out {
  animation: slideOutRightCustom 0.6s ease both;
}
/* Submenú oculto por defecto */
.submenu {
  display: none;
  list-style: none;
  padding-left: 20px;
  margin-top: 5px;
  max-height: 200px; /* Ajusta según el espacio que quieras permitir */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;         /* Firefox */
  scrollbar-color: #808080 #252440; /* Firefox */
}

/* Scroll personalizado para navegadores WebKit (Chrome, Edge, Safari) */
.submenu::-webkit-scrollbar {
  width: 6px;
}

.submenu::-webkit-scrollbar-track {
  background: #000;
}

.submenu::-webkit-scrollbar-thumb {
  background-color: #FFFFFF;
  border-radius: 10px;
}
.has-submenu.active .submenu {
  display: block;
}

.submenu li a {
  display: block;
  width: 100%;
  padding: 10px 20px;
  color: white;
  background-color: #252440;
  text-decoration: none;
  transition: background-color 0.3s ease, padding-left 0.3s ease;
   border: 2px solid #FFFFFF;       
    box-sizing: border-box;  /* Borde verde visible */
  border-radius: 8px;   
}

.submenu li a:hover,
.submenu li a:focus {
  background-color: #FFFFFF;
  padding-left: 30px; 
  border: 1px solid #808080;      
  box-sizing: border-box;  /* Borde verde visible */
  border-radius: 8px; 
  color: #808080;
}
.ri-arrow-down-fill{
  font-size: 25px;
  margin-left: 5px;
  color: #ffffff;
}
/* Para pantallas en orientación horizontal  
@media screen and (orientation: landscape) and (max-height: 500px) {
  body {
    overflow: hidden;
    touch-action: none;
    -ms-touch-action: none;
    overscroll-behavior: none;
  }

  .social-icons-container {
    display: none !important;
  }

  .mobile-menu-panel {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
    -ms-touch-action: auto;
    overscroll-behavior: auto;
  }
}  */
  

@media screen and (orientation: landscape) and (max-height: 500px) {
  body {
    overflow: auto; /* Permite scroll si es necesario */
    touch-action: auto;
    -ms-touch-action: auto;
    overscroll-behavior: auto;
  }

  .social-icons-container {
    display: none !important;
  }

  .mobile-menu-panel {
    display: block !important;
    visibility: visible !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
    -ms-touch-action: auto;
    overscroll-behavior: auto;
  }

  .desktop-menu {
    display: none !important;
  }

  .mobile-menu {
    display: block !important;
  }
}

.social-icons-container {
  position: absolute; 
  bottom: 0;
  left: 0;
  width: 100%;
  height: 250px;
  background-color: #FFFFFF;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  font-size: 24px;
}

.social-icons-container li i {
  color: #808080;
  font-size: 30px;
  background-color: #FFFFFF;
  border: 1px solid #808080; 
  padding: 12px;
  border-radius: 50%; /* Círculo perfecto */
  transition: transform 0.3s ease, background-color 0.3s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: -100px; /
}

.social-icons-container li i:hover {
  transform: scale(1.2);
  background-color: #FFFFFF; /* Color de fondo en hover */
  color: #5A76FF; /* Color del icono en hover */
  border-radius: 20px; /* Bordes redondeados */
}


.ri-facebook-box-fill,
.ri-mail-fill {
  font-size: 37px; /* Ya se define arriba */
  border-radius: 10px; /* Ya no se necesita */
}


@media (min-width: 768px) {
  .toggle,
  .mobile-menu-panel {
    display: none !important;
  }
}
 .carousel-container {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100dvh;
  margin-top: 20px;
}

.carousel-slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%;
}

.slide {
  min-width: 100vw;
  height: 100vh;
  position: relative;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #5a76ff3b; 
  z-index: 1;
}
.carousel-caption {
  position: absolute;
  z-index: 2;
}

.carousel-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: 700px;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  padding: 40px 20px;
  border-radius: 12px;
  animation: zoomInFade 1s ease-out forwards;

}

@keyframes zoomInFade {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
}
.carousel-caption h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  margin-bottom: 15px;
  color: white;  
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7); 
    font-family: 'Inter', sans-serif;
}

.carousel-caption p {
  font-size: clamp(1rem, 3vw, 2rem);
  font-family: 'Inter', sans-serif;
  margin-bottom: 20px;
  color: white; 
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);  
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -60%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

@media (max-width: 768px) {
  .carousel-container {
    height: 70vh;
    margin-top: 50px;
  }

  .carousel-slides {
    flex-direction: row;
    height: 100%;
  }

  .slide {
    min-width: 100vw;
    height: 70vh;
  }

  .carousel-caption {
    width: 95%;
    padding: 20px 15px;
    top: 37%;
    transform: translate(-50%, -50%);
  }

  .carousel-caption h2 {
    font-size: 2rem;
    
  }

  .carousel-caption p {
    font-size: 1rem;
  }

  .caption-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
    display: none;
    font-size: 18px;
  }
}

@media (min-width: 1440px) {
  .carousel-container {
    height: 90vh;
    margin-top: 40px;
  }

  .carousel-slides {
    height: 100%;
  }

  .slide {
    min-width: 100vw;
    height: 90vh;
  }

  .carousel-caption {
    max-width: 900px;
  }

  .carousel-caption h2 {
    font-size: 4.5rem;
  }

  .carousel-caption p {
    font-size: 2.5rem;
  }

  .caption-btn {
    font-size: 1.2rem;
  }
}
/* Estilos para el contenedor del texto de abajo descubre el poder de nuestras herramientas*/
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    text-align: center;
    border-radius: 10px;
    padding: 20px;
    margin: 20px auto;
    max-width: 90%;
    margin-top: 50px;
    transform: translateX(100px);
    opacity: 0;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.container.animate {
  opacity: 1;
  transform: translateX(0);
  opacity: 1;
}

.container h3 {
    font-size: 44px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #252440;
    --webkit-background-clip: text;
    --webkit-text-fill-color: transparent;
}
.container-information {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
}

.image-slider {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: slide 10s linear infinite;
}

.image-slider img {
  width: 200px;
  height: auto;
  border-radius: 10px;
}

@keyframes slide {
  from {
      transform: translateX(0);
  }
  to {
      transform: translateX(-50%);
  }
}
/* Estado inicial en pantallas grandes */
@media (min-width: 769px) {
    .container {
        transform: translateX(100px);
    }
}

/* Estado inicial en tablets y celulares grandes */
@media (max-width: 768px) {
    .container h3 {
        font-size: 32px;
        letter-spacing: 1px;
    }
    .container {
        height: auto;
        padding: 10px;
        transform: translateX(50px); 
    }
}

/* Estado inicial en celulares */
@media (max-width: 480px) {
    .container h3 {
        font-size: 24px;
        letter-spacing: 0.5px;
        word-break: break-word;
    }
    .container {
        flex-direction: column;
        height: auto;
        padding: 10px;
        margin-top: 20px;
        transform: translateX(30px); 
    }
}
/* Estilos para la descripción del contenedor de el robot*/
.container-description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 40px;
  transform: translateX(100px);
  opacity: 0;
 transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.container-description.animate {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 768px) {
  .container-description {
    transform: translateX(50px);
  }
}


/* Tablets */
@media (max-width: 768px) {
  .container-description {
    transform: translateX(50px);
  }
}

/* Celulares */
@media (max-width: 480px) {
  .container-description {
    transform: translateX(30px);
    padding: 20px;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out; 
    margin-top: 70px;
  }
}

.browser-warning {
  margin-bottom: 20px;
  font-size: 14px;
}

@supports (aspect-ratio: 1 / 1) {
  .browser-warning {
    display: none;
  }
}

/* Tarjetas */
.stack {
  width: 55%;
  max-width: 400px;
  transition: 0.25s ease;
}

.stack:hover {
  transform: rotate(5deg);
}

.stack:hover .card:before {
  transform: translateY(-2%) rotate(-4deg);
}

.stack:hover .card:after {
  transform: translateY(2%) rotate(4deg);
}
.card {
  aspect-ratio: 3 / 2;
  border: 4px solid #252440;
  background-color: #fff;
  position: relative;
  transition: 0.15s ease;
  cursor: pointer;
  padding: 5% 5% 15% 5%;

}


.card:before,
.card:after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  border: 4px solid #252440;
  background-color: #fff;
  transform-origin: center center;
  z-index: -1;
  transition: 0.15s ease;
  top: 0;
  left: 0;
}

.card:before {
  transform: translateY(-2%) rotate(-6deg);
}

.card:after {
  transform: translateY(2%) rotate(6deg);
}
.image {
  width: 100%;
  border: 4px solid #252440;
  background-color: #eee;
  aspect-ratio: 1 / 1;
  position: relative;
}
.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.description {
  margin-top: 30px;
  max-width: 600px;
  text-align: center; /* Alinea el texto a la derecha */
  margin-left: auto; /* Empuja el contenido hacia la derecha */
  margin-right: 0;
  margin-top: -400px;
  transform: translateX(100px);
  transition: all 0.6s ease-out;
}
.description.animate {
  opacity: 1;
  transform: translateX(0);
}

.description h2 {
  font-size: 30px;
  color: #808080;
  margin-bottom: 10px;
}

.description p {
  font-size: 20px;
  color: #808080;
  line-height: 1.5;
  margin-bottom: 10px;
}
@media screen and (max-width: 1024px) {
   body, html {
    overflow-x: hidden; /* Evita el scroll horizontal */
  }
    .container-description {
      flex-direction: column; 
      align-items: center; 
      text-align: center;
    }
  
    .stack {
      width: 90%; 
      max-width: 100%;
      margin-bottom: 20px; 
    }
  
    .description {
      margin-top: 0;
      margin-left: 0;
      margin-right: 0;
      text-align: center;
    }
  }
  
.container-service {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 50px;
   overflow-x: hidden;
   margin-top: 50px;
}

.box {
  width: 210px;
  height: 300px;
  color: #252440;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 18px;
  margin: 20px;
  transition: all 0.3s ease-in-out; /* más rápido para hover */
  padding: 20px;
  border-radius: 10px;
}
/* Efecto al pasar el mouse */
.box:hover {
  transform: translateX(0) scale(1.05); /* crece un poco */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* sombra */
}
.box i {
  font-size: 40px;
  margin-bottom: 10px;
  transition: transform 0.3s ease; /* para animar el ícono */
}
.box:hover i {
  transform: rotate(10deg) scale(1.2); /* pequeño giro y aumento */
}
.box h3 {
  margin-bottom: 5px;
  font-size: 20px;
}
.box.show {
  opacity: 1;
  transform: translateX(0);
}
.box.show {
  opacity: 1;
  transform: translateX(0);
}


/* ===================== */
.scroll-container {
  width: 100%;
  overflow: hidden;
  padding: 1rem 0;
}

.scroll-track {
  display: flex;
  gap: 2rem;
  animation: scrollLeft 20s linear infinite;
}

.card-scroll {
  flex: 0 0 auto;
}

.card-scroll img {
  width: 60px;
  height: auto;
  display: block;
}

/* Animación infinita */
@keyframes scrollLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Responsivo */
@media (max-width: 768px) {
  .card-scroll img {
    width: 45px;
  }
}

@media (max-width: 480px) {
  .card-scroll img {
    width: 35px;
  }
}

.card-scroll {
  flex: 0 0 auto;
  width: 20vw;
  max-width: 120px;
  height: 20vw;
  max-height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
  margin-right: 1rem; /* Espacio entre tarjetas */
}

.card-scroll:hover {
  transform: scale(1.1);
}

.card-scroll img {
  width: 60%;
  height: auto;
  object-fit: contain;
}

/* Animación del track que se mueve a la izquierda */
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 600px) {
  .card-scroll {
    width: 25vw;
    height: 25vw;
  }
}
/* Espacio Formulario Email */
html {
  scroll-behavior: smooth;
}

.contact-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem;
  gap: 2rem;
  flex-wrap: wrap;
}

.robot-img {
  width: 450px;
  max-width: 100%;
  cursor: pointer;
  transition: transform 0.3s ease;
  margin-left: 2rem;
}

.robot-img:hover {
  transform: scale(1.05);
}

.formulario {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  background-color: #FFFFFF;
  color: black;
  padding: 2rem;
  border-radius: 1rem;
  max-width: 1000px;
  animation: fadeIn 0.5s ease forwards;
  box-sizing: border-box;
}
.formulario input,
.formulario textarea {
  padding: 1rem 0;                 /* espacio arriba y abajo */
  border: none;                    /* quita todos los bordes */
  border-bottom: 2px solid rgba(0,0,0,0.2); /* borde inferior inicial gris */
  background: transparent;         /* fondo transparente */
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  color: #000;
}

.formulario input:focus,
.formulario textarea:focus {
  outline: none;
  border-bottom: 2px solid #1e90ff !important; /* borde azul al enfocar */
  box-shadow: 0 2px 6px rgba(30,144,255,0.3);  /* glow sutil azul */
}



.formulario button {
  padding: 1rem;
  background-color: #00ff00;
  color: black;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  width: 100%;
  font-weight: bold;
  font-size: 1.05rem;
  transition: background-color 0.3s ease;
}

.formulario button:hover {
  background-color: #ffffff;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .contact-container {
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
  }

  .robot-img {
    width: 80%;
    margin-left: 0;
  }

  .formulario {
    width: 100%;
    max-width: none;
  }
}
/* Borde rojo cuando hay error */
#formulario-contacto input.error {
  border-bottom: 2px solid red !important;
  box-shadow: 0 2px 6px rgba(255,0,0,0.3);
}

/* Footer */
.footer {
  background-color: #111827;
  color: #f9fafb;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
  font-size: 0.95rem;
  width: 100%;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 600px) {
  .footer {
    font-size: 0.85rem;
    padding: 0.75rem;
  }
}

  
.btn-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.btn-whatsapp:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

.btn-whatsapp img {
  width: 32px;
  height: 32px;
  pointer-events: none;
}

  .contenedor-2 {
    display: flex;
    height: 100vh; 
  }

  /* Columna izquierda (información) */
.col-izquierda {
  flex: 1;
 background-image: url('img/bajo1.gif');
 background-repeat: no-repeat;
   background-size: cover;    
  background-position: center; 
  padding: 30px;
  color: #808080;
  font-family: 'Segoe UI', sans-serif;
  
    /* Centrado vertical y horizontal */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra el contenido verticalmente */

}

.col-izquierda h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  font-weight: 700;
  color: #808080;
}

.col-izquierda p {
  font-size: 1rem;
  line-height: 1.6;
  color: #808080;
}

.frase-final {
  margin-top: 10px;
  font-size: 1.1rem;
  font-weight: bold;
  color: rgb(6, 6, 0);
}

.contacto {
  margin-top: 20px;
}

.item-contacto {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 1rem;
}

.item-contacto i {
  font-size: 1.4rem;
  margin-right: 10px;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  padding: 6px;
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease;
}

.item-contacto i:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.3);
}

.item-contacto span {
  word-break: break-word;
}


  /* Columna derecha (módulos tipo TikTok) */
 .col-derecha {
  width: 400px;
  max-width: 100%;
  text-align: center;
  color: #FFFFFF;
  height: 100vh;
  overflow-y: auto; /* Aquí ya permites el scroll */
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  background: #252440;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
/* 👇 Esto quita la barra solo de este div */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE y Edge antiguos */
}

.col-derecha::-webkit-scrollbar {
  display: none;  /* Chrome, Safari y Opera */
}

/* Cada módulo ocupa toda la altura */
.modulo {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  background-color: #ffffff;
}

/* Fondo GIF para módulo 3 */
#modulo2 {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url('https://i.pinimg.com/originals/d2/71/d6/d271d6f8a93c1f6120ee9924a53f460c.gif') center/cover repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

#modulo3 .overlay {
  z-index: 1;
  color: white;
  text-align: center;
}

#modulo1 {
  
  display: flex;
  justify-content: center;   /* centra horizontal */
  align-items: center;       /* centra vertical */
  flex-direction: column;    /* apila título y formulario en columna */
  height: 100vh;             /* ocupa toda la pantalla */
  text-align: center;
}

#modulo1 h2 {
  font-size: 3rem;
  font-weight: 900;
  animation: fadeIn 2s ease-in-out;
  margin-bottom: 20px; /* espacio entre título y formulario */
  color: #120934;
}

#formulario-contacto {
  display: flex;
  flex-direction: column;
  gap: 15px;           /* espacio entre inputs */
  width: 100%;
  max-width: 350px;    /* ancho máximo para que no se extienda demasiado */
}

#formulario-contacto input,
#formulario-contacto textarea,
#formulario-contacto button {
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
}

#formulario-contacto button {
  background: #252440;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s;
}

#formulario-contacto button:hover {
  transform: scale(1.05);
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
  /* Formulario */
  .contact-container {
    text-align: center;
    width: 100%;
  }

  .formulario {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
  }

  .formulario input,
  .formulario textarea,
  .formulario button {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
  }

  .formulario button {
    background: #252440;
    color: white;
    border: none;
    cursor: pointer;
  }

  .formulario button:hover {
    background: #252440;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .contenedor-2 {
      flex-direction: column;
    }
    .col-izquierda {
      display: none;
    }
    .col-derecha {
      width: 100%;
    }
  }

.whatsapp-btn {
  position: fixed !important;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #25D366;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2147483647 !important;
  
  /* Estado inicial oculto */
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.whatsapp-btn.show {
  transform: translateY(0);
  opacity: 1;
}

.whatsapp-btn:hover {
  transform: scale(1.1) translateY(0);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.whatsapp-btn img {
  width: 40px;
  height: 40px;
}

  /* FOOTER  */

:root{
  --bg: linear-gradient(180deg, #252440);
  --glass: rgba(255,255,255,0.02);
  --muted: rgba(255, 255, 255, 0.75);
  --accent: rgba(0, 0, 0, 0.9);
  --radius: 1px;
  --pad: 1rem;
  --max-width: 1200px;
  --gap: 1rem;
}

/* Básico */
.site-footer{

  background: var(--bg);
  color: white;
  padding: calc(var(--pad) * 0.8) var(--pad);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  box-shadow: 0 -6px 18px rgba(0,0,0,0.45);
  position: relative;
  z-index: 10;
   
}

.footer-inner{
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  gap: var(--gap);
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  box-sizing: border-box;
  backdrop-filter: blur(6px);
}

/* Brand */
.brand strong{
  display: inline-block;
  padding: 0.4rem 0.6rem;
  background: var(--glass);
  border-radius: 8px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.6px;
}

/* Copyright */
.copyright{
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
  flex: 1 1 auto;
  margin: 0 0.5rem;
}

/* Links */
.footer-links{
  display: flex;
  gap: 0.7rem;
  align-items: center;
}
.f-link{
  color: var(--muted);
  text-decoration: none;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  font-size: 0.88rem;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.f-link:hover,
.f-link:focus{
  transform: translateY(-3px);
  background: rgba(255,255,255,0.04);
  color: var(--accent);
  outline: none;
}



/* Móviles pequeños (teléfonos) */
@media (max-width: 479px){
  .site-footer{
    margin-top: 20px; /* menos espacio en móviles */
  }
  .footer-inner{
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .brand{ order: 1; text-align: center; }
  .copyright{ order: 2; margin: 0; }
  .footer-links{ order: 3; justify-content: center; flex-wrap: wrap; gap: 0.5rem; }
  .f-link{ font-size: 0.85rem; padding: 0.35rem 0.5rem; }
}

/* Tablet / pantallas medianas */
@media (min-width: 480px) and (max-width: 767px){
  .site-footer{
    margin-top: 25px;
  }
  .footer-inner{
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
  }
  .brand{ flex: 0 0 auto; }
  .copyright{ flex: 1 1 auto; }
  .footer-links{ flex: 0 0 auto; }
}

/* Desktop pequeño a mediano */
@media (min-width: 768px) and (max-width: 1023px){
  .footer-inner{
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  .copyright{ font-size: 0.95rem; }
}

/* Desktop grande */
@media (min-width: 1024px){
  .footer-inner{
    padding-left: 0;
    padding-right: 0;
  }
  .copyright{ text-align: center; }
  .brand{ margin-left: 0.4rem; }
}

/* Pequeño ajuste visual para pantalla ultra-ancha */
@media (min-width: 1400px){
  .footer-inner{ gap: 2rem; }
  .copyright{ font-size: 1rem; }
}

  .popup {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #333;
    color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    z-index: 9999;
    font-family: Arial, sans-serif;
  }
  .popup.show {
    opacity: 1;
    pointer-events: auto;
  }
  .popup.success { background: #28a745; }
  .popup.error { background: #dc3545; }
  .popup.warning { background: #ffc107; color: #000; }
  


.ri-contacts-book-3-fill {
    color: #ffffff;
    font-size: 36px;
    text-decoration: none;
    outline: none;
    box-shadow: none;
    border: none;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Contenedor principal (barra flotante lateral derecha) */
  .example-1 {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column; /* En columna */
    justify-content: center;
    align-items: center;
    background-color: #c5c5c5;
    border-radius: 20px 0 0 20px; /* Bordes redondeados a la izquierda */
    padding: 10px;
    width: 50px;

    z-index: 999;
  }

  .example-1 .icon-content {
    margin: 10px 0;
    position: relative;
  }

  /* Tooltip (pestañita de texto) */
  .example-1 .icon-content .tooltip {
    position: absolute;
    right: 80px; /* Se muestra hacia la izquierda */
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    color: #252440;
    padding: 6px 10px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    transition: all 0.3s ease;
  }

  .example-1 .icon-content:hover .tooltip {
    opacity: 1;
    visibility: visible;
    right: 100px;
  }

  /* Iconos circulares */
  .example-1 .icon-content .link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    background-color: #252440;
    transition: all 0.3s ease-in-out;
  }

  .example-1 .icon-content .link:hover {
    box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 20%);
  }

  .example-1 .icon-content .link svg {
    width: 28px;
    height: 28px;
    fill: #fff;
  }
  .example-1 .icon-content .link[data-social="spotify"]:hover {
    background-color: #bbbbbb;
  }

  .example-1 .icon-content .link[data-social="pinterest"]:hover {
    background-color: #bbbbbb;
  }

  .example-1 .icon-content .link[data-social="dribbble"]:hover {
    background-color: #bbbbbb;
  }

  .example-1 .icon-content .link[data-social="telegram"]:hover {
    background-color: #bbbbbb;
  }

@media (max-width: 992px) {
  .example-1 {
    display: none !important;
  }
}
.lang-switch {
  display: flex;
  background: #f2f3f7;
  padding: 6px;
  border-radius: 30px;
  gap: 5px;
  align-items: center;
}

.lang-switch button {
  border: none;
  background: transparent;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: 0.25s ease;
  color: #444;
}

.lang-switch button:hover {
  background: #e0e4ff;
}

.lang-switch button.active {
  background: #252440;
  color: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.mobile-lang-container {
  display: none;
}

.desktop-lang {
  display: flex;
}
body {
  background: #f6f7fb;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* ============================= */
/* SECCIÓN CONTACTO – ÚNICA */
/* ============================= */

.contacto-section {
  position: relative;
  overflow: hidden;
  padding: 80px 20px;
}

.contacto-section::before,
.contacto-section::after {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(17, 98, 203, 0.18),
    rgba(1, 26, 68, 0.12),
    transparent 70%
  );
  filter: blur(75px);
  z-index: 0;
}

.contacto-section::before {
  top: -120px;
  left: -120px;
}

.contacto-section::after {
  bottom: -140px;
  right: -140px;
}

/* Asegura que el contenido quede arriba */
.contacto-section * {
  position: relative;
  z-index: 1;
}

/* ============================= */
/* TEXTO SUPERIOR */
/* ============================= */

.contacto-header {
  max-width: 600px;
  margin: 0 auto 50px;
  text-align: center;
}

.contacto-header h2 {
  font-size: 32px;
  color: #011a44;
  margin-bottom: 10px;
}

.contacto-header p {
  font-size: 16px;
  color: #444;
  line-height: 1.6;
}

/* ============================= */
/* CONTENEDOR TARJETAS */
/* ============================= */

.contacto-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.contacto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  max-width: 900px;
  width: 100%;
}

/* ============================= */
/* TARJETAS */
/* ============================= */

.contacto-card {
  background: #ffffff;
  padding: 30px 20px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contacto-card i {
  font-size: 40px;
  color: #252440;
  margin-bottom: 12px;
}

.contacto-card h3 {
  font-size: 18px;
  color: #011a44;
  margin-bottom: 8px;
}

.contacto-card p {
  font-size: 15px;
  color: #333;
}

.contacto-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

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

@media (max-width: 900px) {
  .contacto-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .contacto-grid {
    grid-template-columns: 1fr;
  }

  .contacto-header h2 {
    font-size: 26px;
  }

  .contacto-header p {
    font-size: 15px;
  }
}

/* Estado inicial (oculto) */
.contact-empresas {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

/* Cuando entra en pantalla */
.contact-empresas.show {
  opacity: 1;
  transform: translateY(0);
}

.contact-empresas h2 {
  font-size: 2.2rem;
  margin-bottom: 40px;
  color: #252440;
  text-align: center;
}

/* Contenedor principal */
.empresas-grid {
  position: relative;
  width: 100vw;          /* 🔥 ocupa toda la pantalla */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  overflow: hidden;
  min-height: 140px;
}
.empresas-grid::before,
.empresas-grid::after {
  content: "";
  position: absolute;
  top: 0;
  width: 160px;     /* más ancho = efecto más visible */
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.empresas-grid::before {
  left: 0;
  background: linear-gradient(to right, #0f172a56 30%, transparent);
}

.empresas-grid::after {
  right: 0;
  background: linear-gradient(to left, #0f172a56 30%, transparent);
}
.empresa-card p {
  margin-top: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #0f172a;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Tarjeta de empresa */
.empresa-card {
  padding: 30px 20px;
  border-radius: 16px;
  text-align: center;
  transition: transform 0.3s ease; /* animación suave al escalar */
  cursor: pointer; /* indica que es interactiva */
}

/* Logo */
.empresa-card img {
  max-width: 100px;
  opacity: 1;
  transition: transform 0.3s ease; /* transición suave al hacer hover */
}

.empresa-card:hover img {
  transform: scale(1.15); /* aumenta tamaño al pasar mouse */
}

/* Empresa seleccionada (la del centro) */
.empresa-card.active img {
  transform: scale(1.15); /* mantiene el zoom si está activa */
}