:root {
	  --backservice: #FFF;
	  --backcontent: #FFF;
      --primary: #fff;
	  --header: #fff;
      --secondary: #f5f5f5;
	  --font-heder: #FFF;
	  --font-light: #000;
	  --font-light-link: #282828;
	  --font-light-link-hover: #000000;
	  --font-dark: #e0e0e0;
      --accent: #264992;
      --background: #ffffff;
      --text-color: #333333;
	  --text-color-blue: #204886;
	  --text-color-orange: #E8AE30;
	  --text-color-grey: #434244;
	  --buttom-blue: #204886;
	  --icon: #204886;
	  --circle:#ffffff;
	   --brand: #e8ae30; /* naranja */
    --blue: rgba(0,0,0,0.65); /* overlay base */
	--backtable: #fff;
	--backcell: #fff;
	--backcellzebra: #fbfdff;
	--image-opacity: 0.4; /* 50% de opacidad para modo claro */
    }

    body.dark-mode {
	  --backservice: #101e2c;
	  --backcontent: #354457; /* #575b5f; 3c3f42*/
      --primary: #1B3A6A;/* #204886 */
	  --header: #7FB3E3;/* #204886 */
      --secondary: #2f3640;
	  --font-heder: #FFF;
	  --font-light: #eaeaea;
	  --font-light-link: #fff;
	  --font-light-link-hover: #fff;
	  --font-dark: #204886;
      --accent: #00a8ff;
	  --background: #2a2d2f;
      --text-color: #f5f6fa;
	  --text-color-orange: #FFF;
	  --text-color-blue: #FFF;
	  --text-color-grey: #FFF;
	  --buttom-blue: #e8ae30;
	  --icon: #e8ae30;
	  --circle:#0D2F60;
	  --backtable: #204886;
	  --backcell: #c5c5c5;
	  --backcellzebra: #c1c1c1;
	  --image-opacity: 1; /* 100% de opacidad para modo oscuro */

    }
  * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Roboto', sans-serif;
    }
	html, body {
      margin: 0;
      padding: 0;
      height:100%;
	  width:100%;
	  display:block;
	  position:relative;
    }
	html { scroll-behavior: smooth; /* Efecto de suavidad en el desplazamiento */ }
	body {
	  background-color: var(--backcontent);
	  background-image: url("../images/test.jpg");
	  background-repeat: no-repeat;
	  background-position: bottom center;
	  background-size: cover;
	  background-attachment: fixed;
	  background-blend-mode: multiply;
	  position: relative;
	  color: var(--text-color);
	  line-height: 1.6;
	  transition: background-color 0.3s, color 0.3s;
	  overflow-x: hidden;
	}

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

 body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }

        /* Header con imagen de fondo */
        header {
            background-size: cover; /* Cubre todo el área, adaptándose al tamaño */
			background-blend-mode: multiply;
            width: 100%;
            display: flex;
            flex-direction: column;
		}
		main {
            width: 100%;
			margin-top:50px;
		}
		
		/* Index */
		.contact-menu {
		display: none;
		}
		.header-home {
		 min-height: 125vh;
		 background-image: url("../images/global-network-connection.png");
		 background-position: bottom center; /* Centrado para mejor adaptación */
		}

		/* Quienes somos */
		.header-qsomos {
		 min-height: 50vh;
		 background-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 120px),url("../images/qsomos.png");
		 background-position: bottom center; /* Centrado para mejor adaptación */
		}
		/* Contacto */
		.header-contacto {
		 min-height: 55vh;
		 background-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 120px), url("../images/contacto.png");
		 background-position: bottom center; /* Centrado para mejor adaptación */
		}
		/* Servicios */
		.header-virtual-ip {
		 min-height: 50vh;
		 background-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 120px), url("../images/service_virtual_ip.png");
		 background-position: bottom center; /* Centrado para mejor adaptación */
		}
		.header-voicesms {
		 min-height: 50vh;
		 background-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 120px), url("../images/service_voicesms.png");
		 background-position: bottom center; /* Centrado para mejor adaptación */
		}
		.header-sms {
		 min-height: 50vh;
		 background-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 120px), url("../images/service_sms.png");
		 background-position: bottom center; /* Centrado para mejor adaptación */
		}
		.header-clictocall {
		 min-height: 50vh;
		 background-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 120px), url("../images/service_clickcall.png");
		 background-position: bottom center; /* Centrado para mejor adaptación */
		}
		.header-numerosvirtuales {
		 min-height: 50vh;
		 background-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 120px), url("../images/service_numbers.png");
		 background-position: bottom center; /* Centrado para mejor adaptación */
		}
		.header-news {
		 min-height: 50vh;
		 background-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 120px), url("../images/news_header.png");
		 background-position: bottom center; /* Centrado para mejor adaptación */
		}
		
		/* Legales */
		.header-legal {
		 min-height: 50vh;
		 background-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 120px), url("../images/legal.png");
		 background-position: bottom center; /* Centrado para mejor adaptación */
		}

        /* DIV superior en header */
        .header-top {
            max-width: 1024px; /* Ancho máximo */
            margin: 0 auto; /* Centrado */
            width: 100%; /* Ancho completo dentro del max */
			height:40px;
        }

        /* DIV de menú */
        .header-menu {
            height: 50px; /* Altura de ejemplo para el menú */
            max-width: 1024px; /* Ancho máximo */
            margin: 0 auto; /* Centrado */
            width: 100%; /* Ancho completo dentro del max */
            transition: all 0.3s ease; /* Transición suave para cambios */
        }

        /* Clase para cuando el menú está sticky (con JS) */
        .header-menu.sticky {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10; /* Por encima de otros elementos */
            width: 100%; /* Ancho completo para fixed */
            max-width: none; /* Removemos el max-width para que ocupe todo */
            margin: 0; /* Sin margen */
        }

        /* Contenedor interno para centrar contenido en sticky */
        .header-menu.sticky .menu-inner {
            max-width: 1024px;
            margin: 0 auto;
        }

        /* Hero spacer con contenido centrado */
        .hero-spacer {
            flex: 1; /* Ocupa el espacio restante para completar 100vh */
            display: flex;
            flex-direction: column;
            justify-content:var(--align-hero); /* Centrado vertical */
            align-items: center; /* Centrado horizontal */
            text-align: center; /* Para centrar texto */
			text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.9);
        }

        /* Estilos para los elementos centrados */
        .hero-spacer h1,
        .hero-spacer h2 {
            margin: 10px 0; /* Espacio entre elementos */
        }

        .button-sim {
            background-color: #007bff; /* Color de botón de ejemplo */
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer; /* Simula comportamiento de botón */
            margin-top: 20px; /* Espacio superior */
        }

        /* Carrusel */
		.carousel {
		  overflow: hidden;
		  position: relative;
		  width: 100%;
		  max-width: 1024px;
		  margin: 0 auto 60px auto !important;
		  height: 400px;
		}

		.carousel-inner {
		  display: flex;
		  transition: transform 0.5s ease; /* Transición suave para slides */
		  gap: 30px; /* Espacio entre items */
		  width: 100%;
		  height: 400px;
		}

		.carousel-item {
		  position: relative;
		  overflow: hidden;
		  flex-shrink: 0;
		  height: 350px;
		  border-radius: 40px;
		  flex: 0 0 calc((100% - 60px) / 3); /* Para 3 items: (100% - 2*gap)/3 */
		  box-sizing: border-box;
		  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
		}

		.background {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-size: cover;
		  background-position: center;
		  transition: transform 0.3s ease;
		}

		/* Overlay negro transparente inicial (solo detrás del título) */
		.overlay {
		  position: absolute;
		  bottom: 0;
		  left: 0;
		  width: 100%;
		  height: 120px; /* cubre título */
		  background-color: rgba(0, 0, 0, 0.8);
		  transition: height 0.3s ease;
		  transition: transform 0.8s ease-out; /* rápido al inicio, lento al final */
		  z-index: 1;
		}

		/* Grupo de texto (título + hover content) */
		.text-group {
		  position: absolute;
		  bottom: 0;  /* sobre el overlay negro */
		  left: 0;
		  z-index: 2; /* encima del overlay */
		  color: white;
		  max-width: 80%;
		  transition: all 0.3s ease;
		  padding: 20px;
		  /*margin-bottom: -100px;*/
		  transition: transform 0.8s ease-out; /* rápido al inicio, lento al final */
		}

		/* Título */
		.title-hero {
		  font-size: 18px;
		  color: white;
		}

		/* Contenido en hover (línea + descripción) */
		.hover-content {
		  opacity: 0;
		  max-height: 0;
		  overflow: hidden;
		  transition: opacity 0.3s ease, max-height 0.3s ease;
		}

		.hover-content .line {
		  width: 25%; /* 25% del ancho */
		  height: 3px;
		  background-color: orange;
		  margin: 10px 0;
		}

		.hover-content p {
		  margin: 0 0 10px;
		  text-align: left;
		  color: white;
		}

		/* Botón ver más */
		.view-more {
		  position: absolute;
		  bottom: 20px;
		  right: 20px;
		  opacity: 0;
		  transition: opacity 0.3s ease;
		  z-index: 2;
		}

		.view-more button {
		  background-color: #007bff;
		  color: white;
		  border: none;
		  padding: 10px 20px;
		  border-radius: 5px;
		  cursor: pointer;
		}

		/* Efectos en hover */
		.carousel-item:hover .background {
		  transform: scale(1.2); /* Solo la imagen de fondo crece 20% */
		}

		.carousel-item:hover .overlay {
		  height: 100%; /* Sube para cubrir toda la imagen */
		}

		.carousel-item:hover .text-group {
		  bottom: auto;   /* ya no abajo */
		  top: 20px;      /* se alinea arriba */
		  left: 20px;
		}

		.carousel-item:hover .hover-content {
		  opacity: 1; /* Muestra la línea y descripción */
		  max-height: 200px; /* Ajusta este valor según la longitud máxima esperada de los párrafos; 200px debería ser suficiente para la mayoría */
		}

		.carousel-item:hover .view-more {
		  opacity: 1; /* Muestra el botón */
		}

		/* Botones next/prev en forma circular */
		.prev, .next {
		  position: absolute;
		  top:175px;
		  transform: translateY(-50%);
		  width: 40px;          /* ancho fijo */
		  height: 40px;         /* alto fijo */
		  border-radius: 50%;   /* círculo */
		  background-color: rgba(0, 0, 0, 0.5);
		  color: white;
		  font-size: 18px;
		  display: flex;        /* centra el contenido */
		  align-items: center;
		  justify-content: center;
		  border: 1px solid #fff;
		  cursor: pointer;
		  z-index: 3;
		  transition: background-color 0.3s ease;
		}

		.prev:hover, .next:hover {
		  background-color: rgba(0, 0, 0, 0.8);
		}

		.prev {
		  left: 10px;
		}

		.next {
		  right: 10px;
		}

		.hidden {
		  opacity: 0;
		  pointer-events: none;
		  transition: opacity 0.3s ease;
		}

		/* Media queries para responsive */
		@media (max-width: 768px) {
		  .carousel {
			width: 90%;
			margin: 0 auto;
			}
		  .carousel-item {
			flex: 0 0 calc((100% - 30px) / 2); /* Para 2 items: (100% - 1*gap)/2 */
		  }
		}

		@media (max-width: 480px) {
		  .carousel {
			width: 90%;
			margin: 0 auto;
			}
		  .carousel-inner {
			gap: 0px; /* Eliminar gap en mobile para evitar espacios en transiciones */
		  }
		  .carousel-item {
			flex: 0 0 100%; /* Para 1 item */
		  }
		}

		/* Responsive: Número de items visibles y ajustes */
		@media (min-width: 1024px) { /* Desktop */
			.carousel {
			width: 90%;
			margin: 0 auto;
			}
			.carousel-item {
				width: calc((100% - 20px) / 3); /* 3 items con gaps */
			}
		}

		@media (min-width: 768px) and (max-width: 1023px) { /* Tablet */
		    .carousel {
			width: 90%;
			margin: 0 auto;
			}
			.carousel-item {
				width: calc((100% - 10px) / 2); /* 2 items con gap */
			}
		}

		@media (max-width: 767px) { /* Mobile */
			.carousel {
			width: 90%;
			margin: 0 auto;
			}
			.carousel-inner {
				gap: 0; /* Sin gap en mobile para slide exacto */
			}
			.carousel-item {
				width: 100%; /* 1 item */
				height: 300px; /* Altura más pequeña en móvil */
			}
			.title {
				font-size: 1.2em; /* Ajusta tamaños de texto */
			}
			.hover-content p {
				font-size: 0.9em;
			}
			/* Servicios */
			.header-virtual-ip {
			 min-height: 50vh;
			 background-position: bottom center; /* Centrado para mejor adaptación */
			}
			.header-voicesms {
			 min-height: 50vh;
			 background-position: bottom center; /* Centrado para mejor adaptación */
			}
			.header-sms {
			 min-height: 50vh;
			 background-position: bottom center; /* Centrado para mejor adaptación */
			}
		    /* Quienes somos */
			.header-qsomos {
			 min-height: 50vh;
			 background-position: bottom center; /* Centrado para mejor adaptación */
			}
			/* Contacto */
			.header-contacto {
			 min-height: 50vh;
			 background-position: bottom center; /* Centrado para mejor adaptación */
			}
			.header-clictocall {
			min-height: 50vh;
			 background-position: bottom center; /* Centrado para mejor adaptación */
			}
		}
		.header-numerosvirtuales {
			min-height: 50vh;
			 background-position: bottom center; /* Centrado para mejor adaptación */
			}
        /* Footer */
        footer {
            width: 100%; /* Ancho completo */
        }
 /* HEADER---------------------------------------------- */
 
 .contacto {
 margin-top:5px;
		}

 .material-symbols-outlined {
		  font-size: 18px !important; /* Ajusta el tamaño */
		  cursor: pointer; /* opcional, si quieres efecto clic */
		  margin-top:3px;
		}
    
	
    .numbers {
	  display: flex;
      width: 100%;
	  max-width:1040px;
	  justify-content: space-between;
	  margin:10px auto 0 auto;
      height: auto;
      position: relative;
	  font-size: 14px;
      z-index: 1002;
	  color:var(--font-heder);
	  padding:5px 20px;
    }
	.icon-numbers {
	  font-size: 18px; position: relative; top: 4px; margin-left: 20px;margin-right: 5px;
	}
	.icon-footer {
	font-size: 15px;position: relative;top: -2px;
	}
	
	.link-header {
	  position: relative;
	  display: inline-block;
	  color: var(--font-heder);
	  text-decoration: none;
	  transition: color 0.6s ease;
	  font-weight: 100;
	}

	.link-header::after {
	  content: "";
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  height: 1px;
	  width: 100%;
	  background-color: var(--font-heder);
	  transform: scaleX(0);
	  transform-origin: left;
	  transition: transform 0.6s ease;
	}

	.link-header:hover {
	  color:var(--font-heder.);
	}

	.link-header:hover::after {
	  transform: scaleX(1);
	}
	
	.tittle-hero {
	  font-size: 2.7em;
	  color: #95d0f5;
	  font-weight: 400;
	  line-height: 1.0;
	  text-align: center;
	  text-transform: uppercase;
	  font-family: 'Roboto', sans-serif;
	  font-weight: 100;
	  font-size: 45px;
	  max-width: 60%;
	  /*text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.9);*/
	  text-shadow: 0px 0px 5px #c1f4ff, 0px 0px 5px #c1f4ff, 0px 0px 5px #c1f4ff,
    0px 0px 20px #c1f4ff;
	  margin: 0 auto; /* asegura el centrado horizontal */
	  margin-top:-10% !important;
	}

	.subtittle-hero {
	  color: #fff;
	  text-align: center;
	  font-family: 'Roboto', sans-serif;
	  font-weight: 400;
	  font-size: 21px;
	  max-width: 60%;
	  text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.9);
	}

	.subtitle {
		color:var(--icon);text-align:center;text-transform:uppercase;font-family: 'Roboto', sans-serif;font-weight:100;font-size:30px;bottom: 0;left:0;right:0;margin-top:80px;
	}
	.subtitle_service {
		color:#ffffff;text-align:center;text-transform:uppercase;font-family: 'Roboto', sans-serif;font-weight:100;font-size:30px;bottom: 0;left:0;right:0;margin-bottom:30px;
	}
	p {
		color:var(--text-color-grey);text-align:center;font-family: 'Roboto', sans-serif;font-weight:100;font-size:18px;bottom: 0;left:0;right:0;
	}
	label, input {
		color:var(--text-color-grey);text-align:left;font-family: 'Roboto', sans-serif;font-weight:100;font-size:18px;bottom: 0;left:0;right:0;
	}
    #menu {
	  display: block;  
      width: 100%;
	  align-items: center;   /* centra verticalmente */
	  justify-content: flex-start; /* ajusta según prefieras */
	  max-width: 1080px;
	  max-height: 80px;  /* límite de altura */
	  margin:0 auto;
      position: sticky;
      top: 0;
      z-index: 4;
    }
	.nav-menu {
	  line-height: 0;
	}


	.logotype {
	  height:auto;
	  width: 250px;
	  display: block;
	}
	
	/* Estilos para el botón hamburguesa */
	.hamburger {
	  display: none; /* Oculto en pantallas grandes */
	  background: none;
	  border: none;
	  cursor: pointer;
	  padding: 10px;
	  z-index: 1001; /* Asegura que el botón esté por encima del menú */
	}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  display: block;
  width: 25px;
  height: 3px;
  background-color:#204886; /* Color coherente con el tema */
  transition: all 0.3s ease;
}

.hamburger-icon {
  position: relative;
}

.hamburger-icon::before {
  position: absolute;
  top: -8px;
}

.hamburger-icon::after {
  position: absolute;
  top: 8px;
}

.hamburger.active .hamburger-icon {
  background: transparent; /* Oculta la línea central al activar */
}					

.hamburger.active .hamburger-icon::before {
  transform: rotate(45deg);
  top: 0;
}

.hamburger.active .hamburger-icon::after {
  transform: rotate(-45deg);
  top: 0;
}

/* Moviles */
.btn-contacto {
  display: none; /* Oculto en desktop */
  background: #E8AE30;
  color: #fff;
  border: none;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  margin: 5px 10px 5px 5px; /* espacio respecto al menú hamburguesa */
}

.contacto-dropdown {
  display: none;
  position: absolute;
  top: 28px;  /* ajusta según tu header */
  right: 10px;
  background: #fff;
  color: #333;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
  padding: 15px;
  min-width: 220px;
  z-index: 12000;
}

.contacto-dropdown a {
  display: block;
  color: #333;
  text-decoration: none;
  padding: 6px 0;
}

.contacto-dropdown a:hover {
  text-decoration: underline;
}
.contacto-item {
  display: flex;
  align-items: left !important;
  margin-bottom: 10px; /* espacio entre filas */
}

.contacto-item span {
  font-size: 18px;
  margin-right: 8px; /* espacio entre ícono y texto */
  color: #444;
}

/* Solo en móvil/tablet */
@media (max-width: 992px) {
  .btn-contacto {
    display: inline-block;
  }
}
.contacto-dropdown.show {
  display: block;
}

	/* Estilos para el menú */
   	
	nav {
	  z-index: 999;
	  display: flex;
	  position: sticky;
	  width: 100%;
	  max-width: 1080px;
	  max-height: 85px;
	  justify-content: space-between;
	  align-items: center;
	  padding: 10px;
	  box-sizing: border-box;
	  margin: 0 auto;
	  top: 0;
	  left: 0;
	  right: 0;
	  backdrop-filter: blur(5px);
	  -webkit-backdrop-filter: blur(5px);
	  background: rgba(255, 255, 255, 0.7);
	  border-radius: 30px;
	  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	  background-image: url("../images/header_background.png");
	  background-repeat: no-repeat;
	  background-position: left center;
	  background-size: contain;
	}

    nav img {
      height: 100%;
    }

    nav ul {
      display: flex;
      gap: 20px;
      list-style: none;
      /* margin-right: 40px; */
      color: #204886;
    }

    nav ul li a {
      text-transform: uppercase;
      padding: 10px;
      text-decoration: none;
      font-weight: 800;
	  transition: color 0.6s ease;
	  /* width:200px; */
	  color: #204886;
	  padding:15px;
    }
	nav ul li a:hover {
	  background:#e8ae30;
	  color: #fff  !important;
	  border-radius: 15px; /* opcional */
    }
	nav ul li a.active {
	  background: #204886;
	  color: #fff !important;
	  border-radius: 15px; /* opcional */
	}
	
	/* Estilos para el menú desplegable */
    .nav-menu .dropdown {
      position: relative;
    }

    .nav-menu .submenu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      border-radius: 15px;
      list-style: none;
      padding: 10px 0;
      min-width: 250px;
      z-index: 999;
	  width:auto;
	  margin-top:20px;
    }

    .nav-menu .submenu li {
      padding: 10px 10px;
    }

    .nav-menu .submenu li a {
      color:#204886;
      font-weight: 400;
      text-transform: none;
      display: block;
	  padding:20px;
    }

    .nav-menu .dropdown:hover .submenu {
      display: block;
    }
	
	
	 /* Switch toggle */
    .switch {
      position: relative;
      display: inline-block;
      width: 40px;
      height: 20px;
    }
	

    .switch input {
      display: none;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--accent);
      transition: .4s;
      border-radius: 24px;
    }
	

    .slider:before {
      position: absolute;
      content: "";
      height: 14px;
      width: 14px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }

    input:checked + .slider {
      background-color: var(--primary);
    }

    input:checked + .slider:before {
      transform: translateX(26px);
    }
	.slider_qsomos{
	  width: 100%;
      height:60vh;
    }
    #slider_contacto{
      background-image: url("../images/contacto.jpg");
	  margin-top: -125px; /* 50 + 100 para que quede detrás visualmente */
    }
	#slider_serv_ip{
      background-image: url("../images/earth.jpg");
	  margin-top: -125px; /* 50 + 100 para que quede detrás visualmente */
    }
	
	#slider_inicio {
	  display: flex;
	  width: 100%;
	  height: 100vh;
	  background-image: url("../images/global-network-connection.jpg");
	  background-color: var(--header);
	  background-repeat: no-repeat;
	  background-position: top center;
	  background-size: var(--bg-size, 100%);
	  background-blend-mode: multiply;
	  position: relative;
	  z-index: 1;
	  margin-top: -130px;
	  transition: background-size 0.4s ease, background-position 0.4s ease;
	  will-change: background-size, background-position;
	  overflow: hidden;
	  align-items: center;
	  justify-content: center;
	}

	material-symbols-outlined {
		font-size: 22px;
	}
	
	.btn-animado {
	  background: #204886; /* azul */
	  color: white;
	  font-size: 1.2rem;
	  padding: 15px 30px 15px 30px;
	  border: none;
	  border-radius: 50px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  z-index: 1;
	  font-weight: bold;
	  letter-spacing: 1px;
	  top:40%;
	  left: 50%;
	  right:50%;
	  transform: translate(-20%, -50%);
	  transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.4s ease;
	  display: inline-block; left: 5%; text-align: center; text-decoration: none; font-weight: 100; text-transform: uppercase; box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
	}

	/* Pulso animado */
	.btn-animado::before {
	  content: "";
	  position: absolute;
	  top: -50%;
	  left: -50%;
	  width: 200%;
	  height: 200%;
	  background: radial-gradient(circle, rgba(255,255,255,0.25) 20%, transparent 70%);
	  animation: pulse 2s infinite;
	  z-index: 0;
	}
	/* Hover */
	.btn-animado:hover {
	  background: #e8ae30; /* naranja */
	  transform: scale(1.08);
	  box-shadow: 0 0 20px rgba(232, 174, 48, 0.6);
	 }
	
	
/* From Uiverse.io by adamgiebl */ 

	/* Boton hero */
.button {
		transform: translate(0%, -50%);
        }
	.btn-service {
		width:150px;
        }

		
.button-hero {
	
	margin-top:100px !important;
	font-size: 18px !important;
	}

.cssbuttons-io-button {
  background: #e8ae30;
  color: white;
  font-family: inherit;
  padding: 0.35em;
  padding-left: 1.2em;
  font-size: 14px;
  font-weight: 500;
  border-radius: 1.9em;
  border: none;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  box-shadow: inset 0 0 1.6em -0.6em #765a10;
  overflow: hidden;
  position: relative;
  height: 2.8em;
  padding-right: 3.3em;
  cursor: pointer;
  text-decoration:none;
}

.cssbuttons-io-button .icon {
  background: white;
  margin-left: 1em;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.2em;
  width: 2.2em;
  border-radius: 1.7em;
  box-shadow: 0.1em 0.1em 0.6em 0.2em #765a10;
  right: 0.3em;
  transition: all 0.3s;
}
.material-symbols-outlined {
  font-size: 24px; /* igual que tu SVG original */
  color: #e8ae30; /* para heredar el color del texto */
}

.cssbuttons-io-button:hover .icon {
  width: calc(100% - 0.6em);
}

.cssbuttons-io-button:active .icon {
  transform: scale(0.95);
}

/* Quienes Somos */
	.frases {
	  max-width:1000px;
	  margin:0 auto;
	  font-size:18px;
	   line-height: 2.0;
	   text-align:center;
	}
	
	.circle{
	  width:100%;
	  max-width:300px;           /* ajusta tamaño máximo */
	  aspect-ratio:1/1;
	  border-radius:50%;
	  background:var(--circle);
	  position:relative;         /* necesario para el contenido absoluto */
	  overflow:hidden;
	  margin:0 auto;
	}
	/* contenido siempre centrado (independiente de márgenes internos) */
	.circle__content{
	  position:absolute;
	  inset:0;                   /* top:0; right:0; bottom:0; left:0; */
	  display:flex;
	  flex-direction:column;
	  justify-content:center;
	  align-items:center;
	  text-align:center;
	  padding:1rem;              /* evita que el texto choque con el borde */
	  box-sizing:border-box;
	}

	/* tamaños responsivos */
	.circle .icon-index{
	  font-size: clamp(1.4rem, 4vw, 2.6rem);
	  line-height:1;
	  margin-bottom:.4rem;
	}
	.circle h3{
	  margin:0;
	  font-size: clamp(.8rem, 2.2vw, 1rem);
	  color:var(--text-color-grey);
	}

	.circle span {
	  font-size: 2.5rem;         /* tamaño de ícono adaptable */
	  color: var(--text-color-blue);
	  margin-bottom: 10px;       /* separación con el texto */
	}


	/* Onda como borde */
	.circle::after {
	  content: "";
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  width: 70%;
	  height: 70%;
	  border: 1px solid rgba(0, 123, 255, 0.6); /* Borde visible */
	  border-radius: 50%;
	  transform: translate(-50%, -50%) scale(1);
	  opacity: 0;
	  z-index: 1; /* Detrás del icono */
	}

	.circle:hover span {
	  transform: scale(1.3);
	}

	.circle:hover::after {
	  animation: ripple-border 1s ease-out infinite;
	}

	.icons span {
	  display: inline-block;
	  transition: transform 0.3s ease;
	  position: relative;
	  z-index: 2; /* Icono por encima */
	}
	.icons:hover span {
	  transform: scale(1.3);
	}

	@keyframes ripple-border {
	  0% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0.6;
	  }
	  100% {
		transform: translate(-50%, -50%) scale(1.4);
		opacity: 0;
	  }
	}

/* HEADER END---------------------------------------------- */
	
/* CONTENT ---------------------------------------------- */
	.tittle {
	color:white;text-align:center;text-transform:uppercase;font-family: 'Roboto', sans-serif;position: absolute;font-weight:100;font-size:56px;bottom: 0;left:0;right:0;text-shadow: 2px 2px 15px rgba(0,0,0,0.9); /* sombra */
	}
	.tittle-index {
		color:var(--text-color-blue);
		text-align:center;
		text-transform:uppercase;
		font-family: 'Roboto', sans-serif;
		font-weight:600 !important;
		font-size:35px;
		padding:5px;
		letter-spacing: 0.10em; /* espacio entre letras */
	}
	
	.grid-columns {
	  display: grid;
	  grid-template-columns: repeat(4, 1fr);
	  gap: 20px;
	  margin-top: 20px;
	}
	.grid-columns-two {
	  display: grid;
	  grid-template-columns: repeat(2, 1fr);
	  gap: 50px;
	  margin-top: 20px;
	  text-align:left;
	}
	/* grid responsive de ejemplo */
		.grid-columns-tree{
		  max-width:1024px;
		  margin:0 auto;
		  display:grid;
		  grid-template-columns: repeat(3, 1fr);
		  gap:24px;
		  align-items:start;
		}
	.grid-columns-responsive {
		display:grid; 
		grid-template-columns: 1fr 1fr; 
		align-items:top; 
		gap:40px;
		max-width:900px;
		margin:0 auto;
		}
		.contenedor_50-50 {
	  display: grid;
	  width:100%;
	  max-width:1100px;
	  grid-template-columns: 50% 50%;
	  gap: 10px;
	  margin:0 auto;
	  position:relative;
	  align-items:center;
	}
	.contenedor_40-60 {
	  display: grid;
	  width:100%;
	  max-width:1100px;
	  grid-template-columns: 40% 60%;
	  gap: 10px;
	  margin:0 auto;
	  position:relative;
	  align-items:center;
	}
	.contenedor_60-40 {
	  display: grid;
	  width:100%;
	  max-width:1100px;
	  grid-template-columns: 60% 40%;
	  gap: 30px;
	  margin:60px auto 0 auto;
	  position:relative;
	  align-items:center;
	}
	.contenedor_70-30 {
	  display: grid;
	  width:100vw;
	  max-width:1024px;
	  grid-template-columns: 70% 30%;
	  gap: 0;
	  margin:0 auto; 
	  position:relative;
	  align-items:center;
	}
	.column{
	  display:flex;
	  justify-content:center;
	}

	.column-one, .column-two {
		display: grid;
		width:100%;
		align-items: center; /* 🔹 centra solo en vertical */
		text-align:left;
		image-rendering: -webkit-optimize-contrast;
		box-shadow: none !important;
	}
	.column-one img {
	  width: 100%;
	  height: auto;
	  margin: 0; /* quita márgenes extra */
	  display: block;
	}
	.column-two img {
	  width: 100%;
	  height: auto;
	  margin: 0; /* quita márgenes extra */
	  display: block;
	  image-rendering: -webkit-optimize-contrast;
	}
	.girl {
	  display: block;
	  width: 120% !important;
	  height: auto;
	  margin-top:50px !important;
	}
	.dynamic-image {
	  image-rendering: -webkit-optimize-contrast;
	}
	.title_service {
		color:var(--text-color-blue);font-size:4.5rem;text-align:left;font-weight:100;line-height:100%;
	}
	
	/* Servicios | Centrales IP Virtuales | Tabla */
	.table {
		display:block;
		max-width:1080px;
		margin:0 auto 150px auto;
		width:100%;
		border-radius:30px;
		box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
		background:url("../images/texture_steel.png") center center var(--primary);
		background-size: cover;
		padding-top:40px;
	}
	.table-tittleback {
		display:block;width:100%;height:auto;padding:5px;background:var(--icon);position:relative;
	}
	.table-tittle {
		margin-top:10px;color:#fff;text-transform:uppercase;text-align:center;font-size:25px;font-weight:100;padding-bottom:10px;
	}
	.table-interior {
		columns:3;list-style:none;padding:50px;font-size:1.1rem;margin-top:15px;text-align:left; line-height:350%;margin:30px;
	}
	.table-benefits {
		list-style: none;columns:3;list-style:none;padding:50px;font-size:1.1rem;margin-top:15px;text-align:left; line-height:350%;margin:30px;
	}

	.table-benefits li {
		display: flex;             /* ícono + texto alineados */
		  align-items: flex-start;   /* ícono se alinea arriba */
		  margin-bottom:30px;
		  line-height: 1.4;
	}
		.table-benefits  li i {
		  color: #ff9800;
		  font-size: 1.1rem;
		  margin-right: 18px;
		  min-width: 30px;           /* reserva espacio fijo para el ícono */
		  margin-top: 1px;           /* pequeño ajuste vertical */
		}
	.img-people {
	 display:block;
	 background-image:url('../images/businessman.jpg');
	 background-size: cover;
	 background-position: center;
	 width:85%;
	 border-radius:50%;
	 aspect-ratio: 1 / 1;
	 margin:0 auto;
	}
	.img-sms {
	  display: block;
	  background-image: url('../images/sms-masive.jpg');
	  background-size: cover;
	  background-position: center;
	  width: 80%;
	  aspect-ratio: 1 / 1;
	  border-radius: 50%;
	  margin: 0 auto;
	}
	.img-sms-casos {
	  display: block;
	  background-image: url('../images/sms_receive.jpg');
	  background-size: cover;
	  background-position: center;
	  width: 70%;
	  aspect-ratio: 1 / 1;
	  border-radius: 50%;
	  margin: 0 auto;
	}
	.img-clicktocall {
	  display: block;
	  background-image: url('../images/clicktocall.jpg');
	  background-size: cover;
	  background-position: center;
	  width: 70%;
	  aspect-ratio: 1 / 1;
	  border-radius: 50%;
	  margin: 0 auto;
	}
	.img-international_call {
	  display: block;
	  background-image: url('../images/international_call.jpg');
	  background-size: cover;
	  background-position: center;
	  width: 70%;
	  aspect-ratio: 1 / 1;
	  border-radius: 50%;
	  margin: 0 auto;
	}
	.float-container {
	  position: relative;
	  display: inline-block;
	}
	.floating-img {
	  width: 200px;
	  animation: float 3s ease-in-out infinite;
	}
	.shadow {
	  position: absolute;
	  bottom: -20px;          /* debajo de la imagen */
	  left: 50%;
	  transform: translateX(-50%);
	  width: 60%;
	  height: 15px;
	  background-image:url('../images/voice-sms-shadow.png');background-size: cover;display:block;width:100%;min-width:100px;height:100%;
	  z-index: -1; /* debajo de la imagen */
	}
	.hand3d {
	  position: absolute;
	  bottom: -20px;          /* debajo de la imagen */
	  width: 60%;
	  height: 15px;
	  background-image:url('../images/hand.png');background-size: cover;display:block;width:100%;min-width:100px;height:100%;
	  z-index: 2; /* debajo de la imagen */
	  animation: flotar-h 3s ease-in-out infinite;
	}
	
	

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

	@keyframes float {
	  0%   { transform: translateY(0px); }
	  50%  { transform: translateY(-15px); }
	  100% { transform: translateY(0px); }
	}
	@keyframes flotar-h {
	  0%   { transform: translateX(0); }
	  50%  { transform: translateX(80px); } /* mueve a la derecha */
	  100% { transform: translateX(0); }    /* regresa al inicio */
	}
	
	.column {
	  align-items: center; /* Centra horizontalmente */
	  text-align: center;  /* Centra el texto */
	  position:relative;
	  display:block;
	}
	.column-left {
		display:block;width:100%;text-align:left;padding:20px;line-height:2;
	}
	.column-center {
		text-align:center;
	}
	.column-right {
		display:block;width:100%;text-align:left;line-height:2;
	}
	
	
/* Seccion Testimonios */
	.testimonios {
	  display: block;
	  width: 100%;
	  max-width: 1100px;
	  margin: 0 auto 60px auto;
	  padding: 10px 10px; /* si esto es mucho, bájalo */
	  text-align: center;
	}
	.swiper,
	.swiper-wrapper,
	.swiper-slide {
	  height: auto !important;   /* rompe el comportamiento full height */
	}

	.swiper {
      width: 100%;
	  padding-bottom:10px; /* controla espacio con la paginación */
      margin: 0 auto;
    }
	.swiper-slide {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      justify-content: flex-start; /* ya no centrado vertical */
      text-align: center;
      width: 100%;
      /* height: 100%;  <-- quita esta línea */
	  padding:10px 10px; /* opcional: para dar aire */
    }
	.slide-testimonio {
	}

	.slide-testimonio .quote {
	  font-size: 60px;
	  margin-bottom: -20px;
	  font-family: Verdana, sans-serif;
	  color: var(--brand, #007BFF);
	}

	.slide-testimonio p {
	  font-size: 38px;
	  font-style: italic;
	  font-weight: 100;
	  margin: 35px 0;   /* reduce espacio arriba/abajo del párrafo */
	  padding: 0 50px;  /* menos padding lateral */
	}

	.slide-testimonio .stars {
	  font-size: 22px;
	  color: gold;
	}
	.fa-star {
	  font-size:25px;
	  color:gold;
	  letter-spacing:5px;
	}

	.swiper-button-next,
	.swiper-button-prev {
	  color: var(--brand, #007BFF);
	}
	small {
	display:block;margin-bottom:40px;
	}	
	
	/* logos loop */
	.logo-slider {
      overflow: hidden;
      width: 80%;
      background: #ccc;
	  margin:30px auto 60px auto;
      padding: 10px 0;
	  border-radius:20px;
	  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.4) 0px 18px 36px -18px inset;
    }

    .logo-slider__track {
      display: flex;
      width: max-content; /* duplicamos para el loop */
      animation: scroll 30s linear infinite;
    }

    .logo-slider__item {
      flex: 0 0 auto;
      width: 200px; /* tamaño base de cada logo */
      margin: 0 20px;
    }

    .logo-slider__item img {
      width: 100%;
      height: auto;
      object-fit: contain;
      filter: grayscale(100%);
      transition: filter 0.3s;
    }

    .logo-slider__item img:hover {
      filter: grayscale(0%);
    }

    @keyframes scroll {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-50%);
      }
    }

    /* Responsive */
    @media (max-width: 768px) {
      .logo-slider__item {
        width: 100px;
        margin: 0 10px;
      }
    }

    @media (max-width: 480px) {
      .logo-slider__item {
        width: 80px;
        margin: 0 5px;
      }
    }
/* ----- */
	.section-cta {
		display:grid;
		margin: auto;
		padding-top:40px;
		background-image: url("../images/tca_background.png"); 
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		background-blend-mode:multiply;
	}
	.image-qsomos {
            position: relative;
            width: 400px;
            height: 300px;
        }

        .image-qs {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 30px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease;
        }

        .image-front {
            z-index: 2;
            transform: translate(50px, 50px);
        }

        .image-back {
            z-index: 1;
            transform: translate(-50px, -50px);
        }
		.listado {
		  list-style: none;
		  margin: 0;
		}

		.listado li {
		  display: flex;             /* ícono + texto alineados */
		  align-items: flex-start;   /* ícono se alinea arriba */
		  margin-bottom: 20px;
		  line-height: 1.4;
		}

		.listado li i {
		  color: #ff9800;
		  font-size: 1.1rem;
		  margin-right: 8px;
		  min-width: 30px;           /* reserva espacio fijo para el ícono */
		  margin-top: 1px;           /* pequeño ajuste vertical */
		}


	
	
/* Contacto */	



/* FORM */
		.contact-form {
		max-width: 40%;
		margin: auto;
		font-family: Arial, sans-serif;
		color: #333;
		padding-bottom:80px;
	}

	.contact-form label {
		display: block;
		margin-top: 20px;
		font-size: 14px;
	}

	.contact-form input,
	.contact-form textarea {
		width: 100%;
		border: none;
		border-bottom: 2px solid #999;
		padding: 8px 0;
		font-size: 14px;
		outline: none;
		background: transparent;
	}

	.contact-form input:focus,
	.contact-form textarea:focus {
		border-bottom-color: #007BFF;
	}

	.contact-form button {
		margin-top: 20px;
		padding: 10px 20px;
		background: #007BFF;
		border: none;
		color: white;
		font-size: 14px;
		cursor: pointer;
		border-radius: 4px;
	}

	.contact-form button:hover {
		background: #0056b3;
	}
	
	.container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        padding: 20px;
    }

    .card {
        background: ;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        text-align: center;
        padding: 20px;
        flex: 1 1 300px; /* ancho mínimo de 300px y flexible */
        max-width: 350px;
        transition: transform 0.2s;
    }

    .card:hover {
        transform: translateY(-5px);
    }

    .icons {
        margin-bottom: 15px;
		font-size:86px;
		margin-bottom:25px;
		color: var(--text-color-blue);
    }
	
	.icon-index {
        margin-bottom: 15px;
		font-size:86px !important;
		color: var(--text-color-blue);
    }

    .title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
		color:var(--icon);
    }

    .description {
        font-size: 14px;
        color: var(--text-color-grey);
    }
/* MAPA RESPONSIVE */
	.map-container {
		position: relative;
		width: 100%;
		max-width:1024px;
		height: 60vh; /* 60% de la altura de la pantalla */
		margin:0 auto 50px auto;
		
	}

	.map-container iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 20px;
	}


/* Section Servicios ---------------------------------------------- */
.carousel-container {
		width:100%;
		height:400px;
		position: relative;
		max-width: 1100px;
		margin: 40px auto;
		overflow: hidden; /* antes estaba hidden */
		isolation: isolate; /* asegura z-index de flechas */
	  }

	  .carousel {
		display: flex;
		transition: transform .45s ease-in-out;
		will-change: transform;
	    gap: 20px; /* espacio entre tarjetas */
		justify-content: space-between; /* reparte de extremo a extremo */
	  }

	  /* 3 visibles siempre en desktop; se adaptará en móvil */
	 .service {
	  flex: 0 0 calc(30% - 4.5%); /* 3 en desktop */
	  margin: 0 32px;
	  height: 350px;
	  border-radius: 40px;
	  overflow: hidden;
	  position: relative;
	  background: #0d0d0d;
	  box-shadow: 0 8px 20px rgba(0,0,0,.35);
	}
	.service-interior {
	  flex: 0 0 calc(30% - 4.5%); /* 3 en desktop */
	  margin: 0 32px;
	  height: 270px;
	  border-radius: 40px;
	  overflow: hidden;
	  position: relative;
	  background: #0d0d0d;
	  box-shadow: 0 8px 20px rgba(0,0,0,.35);
	}
	.service-interior:hover .bg { transform: scale(1.1) }
	.service-interior:hover .bg::after { background: rgba(0,0,0,0.25) }
	.service-interior:hover .overlay { height: 100% }
	.service-interior:hover .overlay h3 { transform: translateY(0) }
	.service-interior:hover .overlay hr { opacity: 1; transform: translateY(0) }
	.service-interior:hover .overlay p { opacity: 1; transform: translateY(0) } 

	  /* Fondo */
	  .bg {
		position: absolute; inset: 0;
		transition: transform .6s ease;
		z-index: 1;
	  }

	  .bg-call  {background:url('../images/call-center.jpg') no-repeat center/cover;}
	  .bg-voice {background:url('../images/voicesms.jpg') no-repeat center/cover;}
	  .bg-sms   {background:url('../images/sms.jpg') no-repeat center/cover;}
	  .bg-click {background:url('../images/clickcall.jpg') no-repeat center/cover;}
	  .bg-number{background:url('../images/virtual_numbers.jpg') no-repeat center/cover;}

	  .bg::after {
		content:""; position:absolute; inset:0;
		background: rgba(0,0,0,0.2);
		transition: background .6s ease;
	  }

	  .service:hover .bg { transform: scale(1.1) }
	  .service:hover .bg::after { background: rgba(0,0,0,0.25) }

	  /* Overlay inferior */
	
		.overlay {
		  position: absolute;
		  left: 0; right: 0; bottom: 0;
		  height: 100px;
		  background: rgba(0,0,0,0.5);
		  color:#fff;
		  z-index: 2;
		  padding: 5px 20px;
		  display:flex;
		  flex-direction:column;
		  transition: height .5s ease;
		}	

	  .service:hover .overlay { height: 100% }

	  .overlay h3 {
		margin: 0; font-size: 18px;
		transform: translateY(30px); transition: transform .5s ease;padding:20px;
	  }
	  .service:hover .overlay h3 { transform: translateY(0) }

	  .overlay hr {
		width: 40px; height: 3px; background: var(--brand);
		border: 0; margin: 10px 0;
		opacity: 0; transform: translateY(20px);
		transition: all .4s ease .2s;
	  }
	  .service:hover .overlay hr { opacity: 1; transform: translateY(0) }

	  .overlay p {
		margin: 10px 0; font-size: 14px; line-height: 1.4;
		opacity: 0; transform: translateY(20px);
		transition: all .4s ease .3s;
		color:#fff;
		text-align:left;
		padding:20px;
	  }
	  .service:hover .overlay p { opacity: 1; transform: translateY(0) } 
	  
	 /* Botón: ícono visible siempre; texto aparece en hover */

	  

	  /* Flechas */
	  .nav-btn {
		position: absolute; top: 50%; transform: translateY(-50%);
		background: rgba(0,0,0,.6); color:#fff;
		border: 0; cursor: pointer;
		padding: 8px 16px; border-radius: 50%;
		font-size: 22px; 
		transition: background .3s;
		z-index: 1000; /* más alto que cualquier overlay */
	  }
	  .nav-btn:hover { background: var(--brand); color:#000 }
	  .prev { left: 8px; } .next { right: 8px }
	  .nav-btn[disabled] { opacity: .0; cursor: default }  
	  
	 /* Servicios Shortcut */ 
	 .services_shortcut {
	  display:grid;
	  padding-top:50px;
	  width:100%;
	  background-image: url('../images/service_short_back.png');
	  background-repeat: repeat-x;
	  background-position: top center;
	  background-blend-mode: multiply;
	 }
	 
	  /* Legal Stye */ 
	  .legal-section {
		  display:block;
		  width:90%;
		  max-width:1024px;
		  text-align:justify ! important;
		  align-items:left;
		  margin:60px auto;
		  }
	 .legal-title {
		  display:block;
		  font-size: 2.5em;
		  color:text-color-blue;
		  font-weight: 100;
		  line-height: 1.0;
		  text-align: center;
		  text-transform: uppercase;
		  font-family: 'Roboto', sans-serif;
		  font-weight: 100;
		  font-size: 45px;
		  margin: 0 auto 50px auto; /* asegura el centrado horizontal */
		}
		.legal-subtitles {
			font-size: 1.2em;
		}
		.legal-section p {
			text-align:justify;
			margin-bottom:30px;
		}
		.legal-section ul {
			padding-left:50px;
			margin-bottom:30px;
		}
		/* Contenedor del formulario */
		#libro-reclamaciones {
		  max-width: 700px;
		  margin: 0 auto;
		  padding: 40px;
		  background: #fafafa;
		  border: 1px solid #e0e0e0;
		  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
		  border-radius: 10px;
		}

		/* Campos de texto y selects */
		#libro-reclamaciones label {
		  display: block;
		  margin-bottom: 6px;
		  font-size: 0.95rem;
		  color: #333;
		}

		#libro-reclamaciones input,
		#libro-reclamaciones select,
		#libro-reclamaciones textarea {
		  width: 100%;
		  padding: 15px;
		  margin-bottom: 15px;
		  font-size: 0.95rem;
		  border: 1px solid #ccc;
		  border-radius: 6px;
		  background: #fff;
		  transition: border 0.3s ease, box-shadow 0.3s ease;
		}

		#libro-reclamaciones input:focus,
		#libro-reclamaciones select:focus,
		#libro-reclamaciones textarea:focus {
		  border: 1px solid #009fe3;
		  box-shadow: 0 0 4px rgba(0, 159, 227, 0.3);
		  outline: none;
		}

		/* Botón */
		#libro-reclamaciones button {
		  display: inline-block;
		  background: #009fe3;
		  color: #fff;
		  padding: 12px 20px;
		  border: none;
		  border-radius: 6px;
		  font-size: 1rem;
		  cursor: pointer;
		  transition: background 0.3s ease;
		}

		#libro-reclamaciones button:hover {
		  background: #007bb8;
		}

		/* Responsivo */
		@media (max-width: 600px) {
		  #libro-reclamaciones {
			padding: 15px;
		  }

		  #libro-reclamaciones button {
			width: 100%;
		  }
		}
		
	/* Numeros Virtuales */
	.price-numbers  {
	  width: 100%;
	  max-width:1024px;
	  margin:0 auto;
	}
	/* Nombres espacios de clases únicos para evitar choques */
	.vn-search-box{max-width:520px;margin:10px 0 18px}
	.vn-search-input{width:100%;padding:10px 14px;border:1px solid #d8dbe0;border-radius:10px;font-size:15px;box-sizing:border-box}

	.vn-pricing-table{width:100%;border-collapse:separate;border-spacing:0;	background:var(--backcell);box-shadow:0 6px 18px rgba(19,24,31,0.06);border-radius:32px;overflow:hidden;}
	.vn-pricing-table thead th{color:var(--text-color-blue);padding:14px 16px;text-align:left;font-weight:600;font-size:14px;}
	.vn-pricing-table thead {
	background-image: url("../images/texture_steel.png");
	  background-repeat: no-repeat;
	  background-position: top center;
	  background-size: cover;
      background-blend-mode: luminosity;
      background-color: var(--backtable);
	  }
	.vn-pricing-table thead th small{display:block;font-weight:100;font-size:11px;opacity:.95;color:rgba(255,255,255,.95)}
	.vn-pricing-table thead .pic{width:64px;padding:0;border-right:1px solid rgba(255,255,255,0.06)}
	.vn-pricing-table tbody td{padding:12px 16px;border-bottom:1px solid #f2f4f7;vertical-align:middle}
	.vn-pricing-table tbody tr:last-child td{border-bottom:0}
	.vn-pricing-table td.pic img{width:54px;height:54px;border-radius:50%;object-fit:cover;display:block}
	.vn-pricing-table td.name h4{margin:0;font-size:15px;color:var(--text-color-blue);font-weight:400}
	.vn-pricing-table td.price{text-align:center;font-weight:100;color:var(--text-color-blue);}
	thead th.tariff {text-align: center;}
	thead th.virtual, thead th.trunk {text-align: center;}

	/* Zebra rows */
	.vn-pricing-table tbody tr:nth-child(even){background:var(--backcellzebra)}

	/* Hover */
	.vn-pricing-table tbody tr:hover{background:linear-gradient(90deg, rgba(11,111,178,0.03), rgba(11,111,178,0.02))}

	/* Responsive: convierte filas en tarjetas en pantallas pequeñas */
	@media (max-width:820px){
	  .vn-pricing-table thead{display:none}
	  .vn-pricing-table, .vn-pricing-table tbody, .vn-pricing-table tr, .vn-pricing-table td{display:block;width:100%}
	  .vn-pricing-table tr{margin:10px 0;padding:12px;border-radius:10px;border:1px solid #eef2f6;background:#fff}
	  .vn-pricing-table td{padding:8px 10px;text-align:left;border:0;position:relative}
	  .vn-pricing-table td::before{
		content:attr(data-label);
		display:inline-block;
		width:160px;
		font-weight:700;
		color:#334155;
	  }
	  .vn-pricing-table td.price{text-align:right;display:flex;justify-content:space-between}
	  .vn-pricing-table td.pic{padding:0 0 8px}
	  .vn-pricing-table td.pic img{width:48px;height:48px}
	 }
	 
	 .link-content {
	  position: relative;
	  display: inline-block;
	  color: var(--font-light-link);
	  text-decoration: none;
	  transition: color 0.6s ease;
	  font-weight: 600;
	  padding-bottom:5px;
	}

	.link-content::after {
	  content: "";
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  height: 1px;
	  margin-bottom:6px;
	  width: 100%;
	  background-color: var(--font-light-link-hover);
	  transform: scaleX(0);
	  transform-origin: left;
	  transition: transform 0.6s ease;
	}

	.link-content:hover {
	  color:var(--font-light-link-hover);
	}

	.link-content:hover::after {
	  transform: scaleX(1);
	}
	
.earth-container {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100vh;
}

#earth {
  width: min(80vw, 400px);   /* se adapta a la pantalla, max 400px */
  aspect-ratio: 1 / 1;       /* mantiene forma circular */
  border-radius: 50%;
  background: url('../images/globe.jpg')  repeat-x 0 0;
  background-size: 200% 100%; /* Ajusta el tamaño para permitir repetición */
  box-shadow:
    inset 40px 40px 80px rgba(0,0,0,0.8),     /* sombra hacia abajo-derecha */
    inset -25px -25px 50px rgba(164,198,248,0.5);
  user-select: none;
  touch-action: none;
  -webkit-user-drag: none;
}

.global-location {
		position: absolute;
		bottom: 50px; /* Debajo de la imagen */
		width: 100%; /* Ajusta según necesites */
		max-width: 700px; /* Limita el ancho máximo para evitar que sea demasiado grande */
		aspect-ratio: 16 / 9; /* Ajusta según la proporción de tu imagen */
		background-image: url('../images/global-location.png');
		background-size: contain; /* Cambia a contain para evitar recortes */
		background-repeat: no-repeat;
		background-position: center; /* Centra la imagen */
		display: block;
		min-width: 80px; /* Tamaño mínimo */
		z-index: 1; /* Debajo de la imagen */
		pointer-events: none; /* Ignora eventos del mouse */
		animation: float 3s ease-in-out infinite;
	}
.shadow-globe {
	  position: absolute;
	  bottom: -20px;          /* debajo de la imagen */
	  left: 50%;
	  transform: translateX(-50%);
	  width: 60%;
	  height: 15px;
	  background-image:url('../images/shadow-globe.png');background-size: cover;display:block;width:100%;min-width:100px;height:100%;
	  z-index: -1; /* debajo de la imagen */
	  opacity:var(--image-opacity); /* Usa la propiedad personalizada para opacidad */
	}
	@keyframes rotate {
	  from {
		background-position: 0px 0px;
	  }
	  to {
		background-position: -800px 0px;
	  }
	}
	@-webkit-keyframes rotate {
	  from {
		background-position: 0px 0px;
	  }
	  to {
		background-position: -800px 0px;
	  }
	}
	
	/* NEWS */
	.news-container {
            max-width: 1024px;
            margin: 20px auto;
            padding: 20px;
        }
        .news-header {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .news-title {
            flex: 0 0 40%;
        }
        .news-title h1 {
			font-family: 'Roboto', sans-serif;
			text-transform:uppercase;
			font-weight:100;
            font-size: 2.5em;
			line-height:1;
            margin: 0 0 20px;
            color:var(--text-color-blue);
        }
        .news-date {
            font-size: 0.9em;
            color: var(--text-color-blue);
            margin-bottom: 20px;
			text-transform:uppercase;
        }
        .news-image {
            flex: 0 0 60%;
        }
        .news-image img {
            width: 100%;
            height: auto;
            border-radius: 30px;
            object-fit: cover;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .news-body {
		  margin-top: 50px;
		  font-size: 1.1em;
		  color: #444;
		  column-count: 2;
		  column-gap: 2.5rem;
		}

		.news-body p {
		  font-family: 'Roboto', sans-serif;
		  margin: 0 0 15px;
		  text-align: justify;
		  letter-spacing: 1.5px;
		}
        .news-divider {			
            border-top: 1px solid #666;
            margin: 100px auto;
			max-width:50%;
        }
        @media (max-width: 768px) {
			.news-body {
				  column-count: 1;
			 }
            .news-header {
                flex-direction: column;
            }
            .news-title, .news-image {
                flex: 0 0 100%;
            }
            .news-title h1 {
                font-size: 1.8em;
            }
        }

/* FOOTER---------------------------------------------- */
    footer {
      
	  background-image: url("../images/footer.png");
	  background-repeat: no-repeat;
	  background-position: top center;
	  background-size: cover;
      background-blend-mode: luminosity;
      color: var(--font-light);
	  padding-top:140px;
      width: 100%;
      height: auto;
      display: block;
    }

    .footer-grid {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 30px;
      max-width: 1024px;
      margin: auto;
    }
	

	.footer-button-wrapper {
	  display: flex;
	  justify-content: flex-end;
	  margin-top: auto;
	  padding-right: 10px; /* Adds some space on the right */
	}
	
	.footer-col {
	  background: green;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  height: 100%;
	  padding-bottom: 10px;
	}

    .footer-copy {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 1024px;
      margin: auto;
      height: auto;
      width: 100%;
      border-top: 1px solid var(--font-light);
      margin-top: 25px;
    }
	.link-footer {
	  position: relative;
	  display: inline-block;
	  color: var(--font-light-link);
	  text-decoration: none;
	  transition: color 0.6s ease;
	  font-weight: 100;
	  line-height:2;
	}

	.link-footer::after {
	  content: "";
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  height: 1px;
	  margin-bottom:6px;
	  width: 100%;
	  background-color: var(--font-light-link-hover);
	  transform: scaleX(0);
	  transform-origin: left;
	  transition: transform 0.6s ease;
	}

	.link-footer:hover {
	  color:var(--font-light-link-hover);
	}

	.link-footer:hover::after {
	  transform: scaleX(1);
	}

    .social-links {
	  display: flex;
	  gap: 15px;
	  justify-content: left;
	  align-items: left;
	  padding: 20px 0;
	  margin-top:30px;
	}

	.social-links a {
	  display: inline-flex;
	  justify-content: center;
	  align-items: center;
	  width: 40px;
	  height: 40px;
	  font-size: 18px;
	  color: white;
	  border-radius: 50%;
	  transition: transform 0.3s, background-color 0.3s;
	  text-decoration: none;
		color:var(--font-dark);
	}

	.facebook { background-color:var(--font-light-link); }
	.twitter { background-color:var(--font-light-link); }
	.youtube { background-color:var(--font-light-link); }
	.linkedin { background-color:var(--font-light-link); }

	.social-links a:hover {
	  transform: scale(1.1);
	  filter: brightness(1.2);
	}
	
	/* FOOTER END---------------------------------------------- */
	
	
/* RESPONSIVE---------------------------------------------- */
  /* Responsive: en tablets 2 visibles, en móvil 1 */
  @media (max-width: 1024px) {
	.tittle-hero {
	  font-size:2.5em;
	}
	.subtittle-hero {

	}
	#slider_contacto{
      height:50vh;
    }
	.contact-form {
		max-width: 60%;
	}
	.carousel-container {
		width:80%;
	  }
	.service, .service-interior {
		 flex: 0 0 calc(50% - 13%); /* 3 en desktop */
    }
	.frases {
	  width:80%;
	  margin:0 auto;
	  font-size:18px;
	   line-height: 2.0;
	   text-align:center;
	}
	.grid-columns-tree {
	  display: grid;
	  grid-template-columns: repeat(2, 1fr);
	  gap: 50px;
	  margin-top: 20px;
	  text-align:left;
	  width:70%;margin:0 auto;
	}
	
	
  .footer-grid {
		padding:30px 20px 15px 15px;
	}
  .image-qsomos {	
            position: relative;
            width: 350px;
            height: 250px;
        }
	.contenedor-two {
	  width:90%;
	  grid-template-columns: 50% 50%;
	}
	.table {
	  width:90%;
	  margin:0 auto;
	}
	.table-interior {
	  columns:2;
	}
	.table-benefits {
		columns:2;
	}
	.contenedor_60-40, .contenedor_70-30, .contenedor_40-60 {
		grid-template-columns: 45% 55%;
		width:90vw;
		margin:0 5% 0 5%;
	}
	
		
	.title_service {
		color:var(--text-color-blue);font-size:3.5rem;text-align:left;font-weight:100;line-height:100%;
	}
 }
/* Estilos del menú en móviles */
@media (max-width: 992px) {
	
	.contacto {
		  display:none;
		}
	
  #numbers {
      width: 95%;
	  margin:0 auto;
    }	
  
  .nav-menu {
    position: relative; /* Asegura que el menú y el botón estén bien posicionados */
  }

  .hamburger {
    display: block; /* Muestra el botón hamburguesa en móviles */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }

  .menu-principal {
    display: none; /* Oculta el menú por defecto */
    position: absolute;
    top: 100%; /* Se muestra justo debajo del nav */
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 0 0 15px 15px;
    padding: 20px;
    flex-direction: column;
    z-index: 999;
  }
  

  .menu-principal.active {
    display: flex; /* Muestra el menú cuando está activo */
  }

  nav ul {
    flex-direction: column;
    gap: 10px;
  }

  nav ul li a {
    padding: 20px 10px;
    display: block;
    text-align: center;
  }
  
  .nav-menu {
	position: relative;
	}
	.nav-menu .submenu {
	  position: static; /* Fluye en el documento, no flotante */
	}
  .nav-menu .submenu {
    display: none;
    position: static; /* Fluye en el documento, no flotante */
    background: rgba(255, 255, 255, 0.95);
    box-shadow: none;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
  }

  .nav-menu .submenu.active {
    display: block; /* Muestra el submenú cuando está activo */
  }
  @media (hover: hover) {
	  .nav-menu .dropdown:hover .submenu {
		display: block; /* Solo en pantallas que sí tienen hover (PCs) */
	  }
	}

  .nav-menu .dropdown-toggle {
    display: block;
    position: relative;
  }
}

/* Mostrar solo en móvil */
@media (max-width: 992px) {
	  .contact-menu {
		position: relative;
		display: inline-block;
	  }

	  #contact-btn {
		background-color: orange;
		color: white;
		border: none;
		padding: 10px 15px;
		border-radius: 10px;
		cursor: pointer;
		text-transform:uppercase;
		margin-top:-5px;
		font-weight:600;
	  }

	  #contact-btn.active {
		background-color: white;
		color:#204886;;
		border: 1px solid #ccc;
		border-radius: 10px 10px 0px 0px;
	  }

	  .contact-dropdown-menu {
		display: none;
		position: absolute;
		right: 0;
		margin-top: -1px;
		background-color: white;
		border-radius: 10px 0 10px 10px;
		min-width: 150px;
		box-shadow: 0 4px 8px rgba(0,0,0,0.1);
		flex-direction: column;
	  }

	  .contact-dropdown-menu a {
		display: block;
		padding: 10px;
		text-align: left;
		color: black;
		text-decoration: none;
	  }

	  .contact-dropdown-menu a:hover {
		background-color:#204886;
		border-radius: 10px;
		color: white;
	  }

	  .contact-dropdown-menu.show {
		display: flex;
	  }
	}

	/* Ocultar en desktop */
	@media (min-width: 769px) {
	  
	}



  @media (max-width: 600px) {
	  .header-home {
		 min-height: 115vh;
		 background-image: url("../images/global-network-connection_movil.png");
		 background-position: top center; /* Centrado para mejor adaptación */
		}
	  .hero-spacer h1,
		.hero-spacer h2 {
            margin:0; /* Espacio entre elementos */
        }
	  .tittle {
		font-size:36px;
		}
	
	  .button {
		    transform: translate(0%, -50%);
			font-size: 14px !important;
        }
	  
	  .material-symbols-outlined {
		  font-size: 18px !important; /* Ajusta el tamaño */
		  margin-top:3px;
		}
    
	  #menu {
		width:100%;
		margin: 0 auto;
		left:0; right:0;
	  }
	  .logotype {
		  height:auto;
		  width: 180px;
		  display: block;
		  margin: 0;
		  padding: 0;
		}
		

    .tittle-hero {
	  font-size:2em;
		max-width: 90%;
		margin-top: -40px !important;
		margin: 0;
		padding: 0;
	}
	.fa-cloud{
	  font-size:2.2rem !important;
	 }
	.subtittle-hero {
	font-size:1.1em;
	max-width: 90%;
	margin-top: 20px !important;
	margin: 0;
	}
	#menu, .nav-menu {
      max-height: 60px;
	  border-radius: 0;
    }
	.menu-principal {
    gap: 0px; /* reduce separación */
    flex-wrap: wrap; /* permite que los items bajen en vez de desbordar */
	display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    flex-direction: column;
    z-index: 9998; /* 👈 Asegura que se muestre sobre todo */
    } 
  .carousel-container {
		width:100%;
	  }
	  .service, .service-interior {
		flex: 0 0 calc(80% - 20%); /* 3 en desktop */ /* 1 columna en móvil */
	  }
	   
  .logo-slider__item {
      width: 200px; /* tamaño base de cada logo */
    }
  .grid-columns-tree {
	  display: grid;
	  grid-template-columns: repeat(1, 1fr);
	  gap: 50px;
	  margin-top: 20px;
	  text-align:left;
	  width:70%;margin:0 auto;
	}
	.slide-testimonio p {
	  font-size: 28px;
	  padding: 0 30px;  /* menos padding lateral */
	}
  .contact-form {
		max-width: 80%;
	}
    .button {
            font-size: 14px;
        }
  #slider_inicio{
	  background-image: url("../images/global-network-connection_movil.jpg");
	  background-position: top center;
	  margin-top: -95px; /* 50 + 100 para que quede detrás visualmente */
	  width: 100%;
      height:100vh;
	  }
	  
	.contenedor_60-40, .contenedor_70-30, .contenedor_40-60, .contenedor_50-50 {
		grid-template-columns: 90vw;
		width:90vw;
		margin:0 5% 0 5%;
	}
  .icon-index {
		font-size:66px !important;
		margin-bottom: 5px;
    }
  .material-symbols-outlined {
		font-size: 4px;
	}
	.nav-menu .submenu {
	  margin-top:0px;
    }
  .submenu {
		text-align:center;
		width:100%;
		left:0;
		right:0;
	}
  .checkbox {
		font-size: 4px;
	}
	.footer-grid {
		padding:20px 20px 15px 15px;
	}
	.btn-animado {
	  font-size: 1rem;
	  padding: 15px 30px 12px 30px;
	  top:35%;
	  left: 0%;transform: translateY(35%);
	}
	H1 {
		font-size:41px;
	}
	.tittle-index {
		width:80%;
		font-size:20px;
		padding:10px 0px;
		text-align:center !important;
		margin:0 auto;
	}
	.subtitle {
		font-size:30px;bottom: 0;left:0;right:0;margin:80px auto 25px auto;line-height:100%;
	}
	#slider_contacto{
      height:60vh;
    }
	.grid-columns {
    grid-template-columns: 1fr;
  }
  .grid-columns-responsive {
		display:grid; 
		grid-template-columns: 1fr; 
		align-items:center; 
		gap:40px;
		max-width:900px;
		margin:0 auto;
		width:90%;
		}
	.column-left {
		display:block;width:100%;text-align:center;padding:0px;line-height:2;margin:0 auto 50px auto;
	}
	.image-qsomos {	
			margin:0 auto;
            position: relative;
            width: 240px;
            height: 140px;
        }
	.circle {
	  width: 100%;
	  padding: 15%;
	  margin:0 auto;
	  aspect-ratio: 1 / 1;
	}
	.contenedor-two {
	  width:90%;
	  grid-template-columns: 100%;
	  text-align:center;
	}
	.table {
	  width:90%;
	  margin:0 auto;
	}
	.table-interior {
	columns:1;
	padding:15px;
	}
	.table-benefits {
		columns:1;
		padding:15px;
	}
	.column-two img, .column-one img {
	  width: 100%;
	  height: auto;
	  margin: 0; /* quita márgenes extra */
	  display: block;
	}
	.title_service {
		color:var(--text-color-blue);font-size:3rem;text-align:left;font-weight:100;line-height:100%;
	}
	.icons {
       font-size:40px;
    }
	.girl {
	  width: 100% !important;
	}
	
 }

@keyframes ripple-border {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
  }
}