/* BASE DE PAGINA */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');

*{
	margin: 0;
	padding-top: 0;
	box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}


body {
	font-family: "Comfortaa", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: #f8f9fa;
}



/*WHATSAPP*/
/*WHATSAPP*/
/*WHATSAPP*/
/* Contenedor principal flotante */
/* --- Floating WhatsApp Button and Modal --- */
.custom-wa-modal-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
}

.custom-wa-float-container {
  position: relative;
}

/* Botón flotante */
.custom-wa-float-btn {
  background: linear-gradient(135deg, #25d366, #00c851);
  border: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.custom-wa-float-btn img {
  width: 30px;
  height: 30px;
}

.custom-wa-float-btn:hover {
  transform: scale(1.08);
  background: linear-gradient(135deg, #00c851, #25d366);
}

/* Burbuja animada */
.custom-wa-float-bubble {
  background: #25d366;
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 50px;
  position: absolute;
  top: -10px;
  right: 72px;
  animation: bubbleBounce 2s infinite;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

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

/* Modal */
.custom-wa-modal {
  display: none;
  width: 370px;
  max-width: 95vw;
  background: rgba(255, 255, 255, 0.93); /* Menos transparente */
  backdrop-filter: blur(10px) saturate(150%);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 90px;
  right: 0;
  overflow: hidden;
  animation: fadeInUp 0.5s ease forwards;
  transform: translateY(20px);
  opacity: 0;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.custom-wa-modal.show {
  transform: translateY(0);
  opacity: 1;
}

/* Header */
.custom-wa-modal-header {
  background: linear-gradient(135deg, #00b27c, #25d366);
  padding: 1.6rem 1rem;
  color: #ffffff;
  text-align: center;
  position: relative;
  box-shadow: inset 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.custom-wa-modal-header h3 {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
  font-weight: 700;
}

.custom-wa-modal-header small {
  font-size: 0.95rem;
  opacity: 0.95;
  font-weight: 400;
}

.custom-wa-close {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 22px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.custom-wa-close:hover {
  transform: scale(1.2);
}

/* Body */
.custom-wa-modal-body {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Contact Card */
.custom-wa-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f4f8fa;
  border-radius: 16px;
  padding: 0.9rem 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  gap: 1rem;
}

.custom-wa-contact:hover {
  background: #e9f5f1;
  transform: translateY(-2px);
}

/* Contact Info */
.custom-wa-contact-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.custom-wa-contact-info img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.custom-wa-contact-text {
  display: flex;
  flex-direction: column;
}

.custom-wa-contact-text strong {
  font-size: 15px;
  font-weight: 700;
  color: #003366;
}

.custom-wa-contact-text small {
  font-size: 12px;
  color: #555;
}

/* Estado */
.custom-wa-status {
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 50px;
  font-weight: 600;
  background-color: #ccc;
  color: #fff;
  margin-top: 2px;
}

.custom-wa-status.online { background-color: #00c853; }
.custom-wa-status.break { background-color: #ffa000; }
.custom-wa-status.closing { background-color: #ff5722; }
.custom-wa-status.offline { background-color: #9e9e9e; }

/* Emergencia */
.custom-wa-contact.emergency {
  border: 2px solid #ff5252;
}

/* Botón de chat */
.custom-wa-chat-btn {
  background: linear-gradient(135deg, #25d366, #00c851);
  color: #fff;
  font-size: 13.5px;
  padding: 0.55rem 1.3rem;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.custom-wa-chat-btn:hover {
  background: linear-gradient(135deg, #00c851, #25d366);
  transform: translateY(-2px);
  color: #f0f0f0;
}

/* Animación */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Responsividad */
@media (max-width: 480px) {
  .custom-wa-modal {
    width: 94vw;
    right: -6px;
    bottom: 80px;
    border-radius: 18px;
  }

  .custom-wa-float-btn {
    width: 54px;
    height: 54px;
  }

  .custom-wa-float-bubble {
    font-size: 12px;
    right: 64px;
  }

  .custom-wa-modal-header h3 {
    font-size: 1.3rem;
  }

  .custom-wa-chat-btn {
    font-size: 12.5px;
    padding: 0.5rem 1.1rem;
  }

  .custom-wa-contact-info img {
    width: 36px;
    height: 36px;
  }

  .custom-wa-contact-text strong {
    font-size: 14px;
  }

  .custom-wa-contact-text small {
    font-size: 11px;
  }
}
 

/*WHATSAPP*/
/*WHATSAPP*/
/*WHATSAPP*/



/*FOOTER*/
/*FOOTER*/
/*FOOTER*/
/* FOOTER GENERAL */
.fluent-footer {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.92), rgba(219, 229, 255, 0.85));
  border-radius: 2rem 2rem 0 0;
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-top: 2rem;
}

/* Luces de fondo acrílicas */
.fluent-footer::before,
.fluent-footer::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  background: rgba(0, 120, 212, 0.12);
  filter: blur(80px);
  border-radius: 50%;
  z-index: 0;
}

.fluent-footer::before {
  top: -40px;
  left: 10%;
}

.fluent-footer::after {
  bottom: -40px;
  right: 15%;
}

/* Top - texto y redes */
.fluent-footer-top {
  background: rgba(255, 255, 255, 0.25);
  padding: 1rem 0;
  z-index: 1;
  position: relative;
}

.fluent-footer-text {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #004aad;
}

/* Redes sociales */
.fluent-footer-social {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.fluent-footer-btn-social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: 2rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.fluent-footer-btn-social i {
  font-size: 1.2rem;
}

/* Redes individuales */
.facebook {
  background: linear-gradient(135deg, #1877F2, #0d55c1);
}

.instagram {
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.whatsapp {
  background: linear-gradient(135deg, #25D366, #128C7E);
}

.fluent-footer-btn-social:hover {
  transform: translateY(-2px);
  opacity: 0.9;
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.15);
  color: #F0F4F8;
}

/* Middle - enlaces y logo */
.fluent-footer-middle {
  padding: 3rem 0;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 2rem;
  position: relative;
  z-index: 1;
}

.fluent-footer-logo {
  max-width: 180px;
  margin: 0 auto 1rem;
}

.fluent-footer-description {
  font-size: 1rem;
  max-width: 320px;
  margin: 0 auto;
  color: #333;
  line-height: 1.6;
}

/* Sección de enlaces */
.fluent-footer-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #004aad;
  margin-bottom: 1rem;
  position: relative;
}

.fluent-footer-title::before,
.fluent-footer-title::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 3px;
  background: #004aad;
  margin: 0 10px;
  vertical-align: middle;
}

.fluent-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fluent-footer-links li {
  margin-bottom: 0.6rem;
}

.fluent-footer-links a {
  text-decoration: none;
  color: #333;
  font-size: 1rem;
  transition: color 0.3s ease, transform 0.2s ease;
}

.fluent-footer-links a:hover {
  color: #0078d4;
  transform: translateX(6px);
}

/* Contacto - botones */
.fluent-footer-contact {
  background: rgba(255, 255, 255, 0.3);
  padding: 1.5rem 0;
  z-index: 1;
  position: relative;
}

.fluent-footer-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  font-size: 1rem;
  text-decoration: none;
  margin: 0.5rem;
  background: rgba(255, 255, 255, 0.45);
  color: #004aad;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.fluent-footer-btn i {
  margin-right: 0.6rem;
  font-size: 1.2rem;
}

.fluent-footer-btn:hover {
  background: rgba(255, 255, 255, 0.65);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
}

/* Bottom - derechos */
.fluent-footer-bottom {
  background: #003c8c;
  padding: 1.4rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
  letter-spacing: 0.3px;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  .fluent-footer-middle {
    flex-direction: column;
    text-align: center;
  }

  .fluent-footer-title::before,
  .fluent-footer-title::after {
    width: 20px;
  }

  .fluent-footer-btn,
  .fluent-footer-btn-social {
    font-size: 0.95rem;
    padding: 0.6rem 1.2rem;
  }

  /* Espaciado entre bloques de enlaces */
  .fluent-footer-middle .col-md-3:not(:first-child) {
    margin-top: 2rem;
  }

  /* Ajustes derechos en móvil */
  .fluent-footer-bottom {
    font-size: 0.95rem;
    padding: 1.2rem 1rem;
    line-height: 1.5;
  }
}








.fluent-footer-text {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #004aad;
  text-align: center;
  padding: 0 1rem;
  display: inline-block;
  max-width: 100%;
  word-wrap: break-word;
  line-height: 1.4;
}

/* Envolvente de texto y cursor */
#footer-typing-wrapper {
  display: inline;
  position: relative;
}

/* Cursor animado */
.typing-cursor {
  font-weight: 700;
  font-size: 1.3rem;
  color: #004aad;
  animation: blink 1s infinite;
  position: relative;
}

/* Cursor blink animado */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Responsivo */
@media (max-width: 480px) {
  .fluent-footer-text {
    font-size: 1rem;
  }

  .typing-cursor {
    font-size: 1.1rem;
  }
}






/*FOOTER*/
/*FOOTER*/
/*FOOTER*/


/*Cookies*/
/* Cookie Bar - Fluent Glassmorphism */
.custom-cookie-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  max-width: 680px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: #1a1a1a;
  padding: 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 15.5px;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  animation: slideUpFade 0.6s ease-out forwards;
  opacity: 0;
  transform: translate(-50%, 40px);
}

/* Texto */
.custom-cookie-bar p {
  margin: 0 0 12px;
  color: #1a1a1a;
  max-width: 540px;
  line-height: 1.6;
}

/* Link */
.custom-cookie-link {
  color: #0078d4;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.custom-cookie-link:hover {
  color: #005fa3;
  text-decoration: underline;
}

/* Botón */
.custom-cookie-btn {
  background: linear-gradient(135deg, #0078d4, #00b4f0);
  color: #ffffff;
  border: none;
  padding: 0.7rem 1.6rem;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 6px 16px rgba(0, 120, 212, 0.3);
  transition: all 0.3s ease;
}

.custom-cookie-btn:hover {
  background: linear-gradient(135deg, #006cbe, #009fd8);
  box-shadow: 0 8px 20px rgba(0, 120, 212, 0.4);
  transform: translateY(-2px);
}

/* Animación */
@keyframes slideUpFade {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Responsive Ajustado */
@media (min-width: 600px) {
  .custom-cookie-bar {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    align-items: center;
    padding: 1.2rem 1.5rem;
  }

  .custom-cookie-bar p {
    margin: 0;
    margin-right: 1rem;
    flex: 1;
  }

  .custom-cookie-btn {
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .custom-cookie-bar {
    bottom: 100px; /* Más arriba en móviles */
    padding: 1rem 1.2rem;
  }

  .custom-cookie-bar p {
    font-size: 14.5px;
    line-height: 1.5;
  }

  .custom-cookie-btn {
    width: 100%;
    margin-top: 10px;
    font-size: 14px;
    padding: 0.6rem 1.2rem;
  }
}



/*Cookies*/


/*EVENTOS*/


/*EVENTOS*/

/*FOOTER*/

/*FOOTER*/

/*MODAL CONTRATAR*/
/* Fondo general del modal */
.custom-contratar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  display: none; /* OCULTO por defecto */
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

/* Modal */
.custom-contratar-content {
  background: #ffffff;
  border-radius: 20px;
  width: 90%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: customFadeIn 0.5s ease;
}

/* Área scrollable */
.custom-contratar-scrollable {
  overflow-y: auto;
  padding: 2.5rem 2rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.custom-contratar-scrollable::-webkit-scrollbar {
  display: none;
}

/* Botón cerrar */
.custom-contratar-close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 30px;
  border: none;
  background: none;
  color: #333;
  cursor: pointer;
}

/* Header */
.custom-contratar-header {
  margin-bottom: 2rem;
  text-align: center;
}

.custom-contratar-icon {
  width: 80px;
  margin-bottom: 1rem;
}

.custom-contratar-header h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #0b2b66;
  margin-bottom: 0.5rem;
}

.custom-contratar-header p {
  font-size: 1.15rem;
  color: #4a4a4a;
}

/* Opciones */
.custom-contratar-options {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
}

.custom-contratar-option {
  background: #f1f7fe;
  border-radius: 16px;
  padding: 1.8rem 1.2rem;
  flex: 1 1 260px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.custom-contratar-option:hover {
  transform: translateY(-6px);
  background: #e1effc;
}

.custom-contratar-option img {
  width: 48px;
  margin-bottom: 1rem;
}

.custom-contratar-option h3 {
  font-size: 1.4rem;
  color: #0078d4;
  margin-bottom: 0.5rem;
}

.custom-contratar-option p {
  font-size: 1rem;
  color: #555;
  margin-bottom: 1rem;
}

/* Botón acción dentro del modal */
.custom-contratar-btn {
  background: linear-gradient(135deg, #0078d4, #00b4f0);
  color: #fff;
  padding: 0.75rem 2rem;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.custom-contratar-btn:hover {
  background: linear-gradient(135deg, #005fa3, #0099cc);
  color: #F0F4F8;
}

/* Footer */
.custom-contratar-footer {
  margin-top: 2.5rem;
  font-size: 0.95rem;
  color: #4a4a4a;
  text-align: center;
}

.custom-contratar-footer a {
  color: #0078d4;
  text-decoration: underline;
  font-weight: 600;
}

/* Animación */
@keyframes customFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Responsive */
@media (max-width: 600px) {
  .custom-contratar-scrollable {
    padding: 2rem 1.5rem;
  }

  .custom-contratar-options {
    flex-direction: column;
    gap: 1.5rem;
  }

  .custom-contratar-btn {
    font-size: 0.95rem;
    padding: 0.7rem 1.5rem;
  }
}


/*MODAL CONTRATAR*/

/* BASE DE PAGINA */

/* SCROLL */
/* Firefox (uncomment to work in Firefox, although other properties will not work!)  */
/** {
  scrollbar-width: thin;
  scrollbar-color: #455A64 #FAFAFA;
}*/

*::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
*::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: #FAFAFA;
}

*::-webkit-scrollbar-track:hover {
  background-color: #F5F5F5;
}

*::-webkit-scrollbar-track:active {
  background-color: #EEEEEE;
}

*::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background-color: #455A64;
  border: 2px solid #FFFFFF;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #37474F;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #263238;
}

/* SCROLL */


/* CONTENEDOR NUMERO DE TELEFONO */
/* Barra de contacto con Fluent Design */
/* Sección de Contacto */
.contact-bar {
  background: linear-gradient(135deg, #004AAD, #002E5C);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 40px 20px;
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Efecto de luces en el fondo */
.contact-bar::before,
.contact-bar::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.15);
  filter: blur(80px);
  border-radius: 50%;
}

.contact-bar::before {
  top: -30px;
  left: 10%;
}

.contact-bar::after {
  bottom: -30px;
  right: 15%;
}

/* Texto del mensaje */
.contact-text {
  font-size: 1.8rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 10px;
  line-height: 1.4;
}

/* Número de teléfono */
.contact-phone {
  font-size: 2rem;
  font-weight: 700;
}

/* Enlace del número de teléfono */
.highlight-number {
  position: relative;
  background: rgba(255, 255, 255, 0.2);
  padding: 14px 18px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

/* Efecto en hover */
.highlight-number:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.08);
  box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.4);
  color: #F0F4F8;
}

/* Efecto de vibración al hacer clic */
.highlight-number:active {
  transform: scale(1.05);
  animation: vibrate 0.2s ease-in-out;
}

/* Animación de vibración */
@keyframes vibrate {
  0% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  75% { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

/* Efecto de onda expansiva */
.wave-effect {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.3);
  opacity: 0;
  animation: wave 0.4s ease-out;
}

/* Animación de onda expansiva */
@keyframes wave {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Animación del icono de teléfono */
.phone-icon {
  margin-right: 10px;
  animation: phone-bounce 1.5s infinite ease-in-out;
}

/* Animación de rebote del icono */
@keyframes phone-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .contact-text {
      font-size: 1.5rem;
  }

  .contact-phone {
      font-size: 1.6rem;
  }

  .highlight-number {
      padding: 10px 14px;
      font-size: 1.4rem;
  }
}

@media (max-width: 480px) {
  .contact-bar {
      padding: 25px 10px;
  }

  .contact-text {
      font-size: 1.3rem;
  }

  .contact-phone {
      font-size: 1.4rem;
  }

  .highlight-number {
      padding: 8px 12px;
      font-size: 1.2rem;
  }
}



/* CONTENEDOR NUMERO DE TELEFONO */


/*CONTENEDOR BARRA SOCIAL*/
/* Sección Social Redes - Fluent + Glassmorphism */
.custom-social-section {
  background: linear-gradient(135deg, rgba(240, 244, 248, 0.6), rgba(230, 238, 248, 0.6));
  backdrop-filter: blur(14px);
  padding: 5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.custom-social-section::before,
.custom-social-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 120, 212, 0.2);
  filter: blur(120px);
  z-index: 0;
}

.custom-social-section::before {
  width: 300px;
  height: 300px;
  top: -60px;
  left: 10%;
}

.custom-social-section::after {
  width: 250px;
  height: 250px;
  bottom: -60px;
  right: 10%;
  background: rgba(0, 120, 212, 0.15);
}

/* Encabezado */
.custom-social-header {
  position: relative;
  z-index: 2;
  margin-bottom: 3rem;
}

.custom-social-icon {
  width: 80px;
  margin-bottom: 1rem;
}

.custom-social-header h2 {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0b2b66;
  margin-bottom: 1rem;
}

.custom-social-header p {
  font-size: 1.2rem;
  color: #4a4a4a;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Íconos sociales */
.custom-social-icons {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
}

.custom-social-icon-btn {
  width: 64px;
  height: 64px;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  background: #888;
}

.custom-social-icon-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
  color: #F0F4F8;
}

/* Redes específicas */
.custom-social-icon-btn.instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #f09433 25%, #e6683c 50%, #dc2743 75%, #cc2366 100%);
}

.custom-social-icon-btn.facebook {
  background: linear-gradient(135deg, #1877F2, #0d6efd);
}

.custom-social-icon-btn.youtube {
  background: linear-gradient(135deg, #FF0000, #C62828);
}

.custom-social-icon-btn.twitter {
  background: linear-gradient(135deg, #000000, #333333);
}

/* Botón CTA WhatsApp */
.custom-social-cta {
  position: relative;
  z-index: 2;
}

.custom-social-whatsapp-btn {
  background: linear-gradient(135deg, #25d366, #128c7e);
  padding: 1rem 2.5rem;
  border-radius: 50px;
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.custom-social-whatsapp-btn:hover {
  background: linear-gradient(135deg, #128c7e, #075e54);
  transform: scale(1.05);
  color: #F0F4F8;
}

/* Responsive Mejorado */
@media (max-width: 1024px) {
  .custom-social-icons {
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .custom-social-header h2 {
    font-size: 2.1rem;
  }

  .custom-social-header p {
    font-size: 1.05rem;
    padding: 0 1rem;
  }

  .custom-social-icons {
    gap: 1.2rem;
  }

  .custom-social-icon-btn {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }

  .custom-social-whatsapp-btn {
    font-size: 1rem;
    padding: 0.9rem 2rem;
  }
}

@media (max-width: 480px) {
  .custom-social-section {
    padding: 3rem 1rem;
  }

  .custom-social-header h2 {
    font-size: 1.8rem;
  }

  .custom-social-header p {
    font-size: 1rem;
    line-height: 1.5;
  }

  .custom-social-icon-btn {
    width: 50px;
    height: 50px;
    font-size: 22px;
  }

  .custom-social-icons {
    gap: 1rem;
  }

  .custom-social-whatsapp-btn {
    font-size: 0.95rem;
    padding: 0.8rem 1.5rem;
  }
}



/*CONTENEDOR BARRA SOCIAL*/

/*CONTACTO RAPIDO*/
.contacto-rapido {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #e3f2fd, #ffffff);
  position: relative;
  text-align: center;
  overflow: hidden;
}

.contacto-rapido::before,
.contacto-rapido::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 0;
}

.contacto-rapido::before {
  width: 300px;
  height: 300px;
  background: rgba(0, 150, 255, 0.2);
  top: -50px;
  left: 5%;
}

.contacto-rapido::after {
  width: 250px;
  height: 250px;
  background: rgba(0, 150, 255, 0.15);
  bottom: -60px;
  right: 10%;
}

.contacto-rapido-container {
  max-width: 1200px;
  margin: auto;
  position: relative;
  z-index: 2;
}

.contacto-rapido-titulo {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0b2b66;
  margin-bottom: 1rem;
}

.contacto-rapido-descripcion {
  font-size: 1.2rem;
  color: #555;
  margin-bottom: 3rem;
}

/* Grid de opciones */
.contacto-opciones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  justify-content: center;
  align-items: stretch;
}

/* Tarjetas */
.contacto-card {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 2rem;
  text-decoration: none;
  color: #1b2631;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contacto-card img {
  width: 64px;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
}

.contacto-card h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #0d47a1;
}

.contacto-card p {
  font-size: 1rem;
  color: #444;
}

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

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

/* Responsivo */
@media (max-width: 768px) {
  .contacto-rapido-titulo {
    font-size: 2rem;
  }

  .contacto-rapido-descripcion {
    font-size: 1.05rem;
  }

  .contacto-card h3 {
    font-size: 1.2rem;
  }

  .contacto-card p {
    font-size: 0.95rem;
  }
}

/*CONTACTO RAPIDO*/


/*Contacto Whatsapp*/

/*Contacto Whatsapp*/


/*BARRA FLOTANTE*/
  /*BARRA FLOTANTE*/
    /*BARRA FLOTANTE*/

    /* Navbar Base */
    .custom-navbar {
      background: linear-gradient(135deg, #ffffff, #f4f4f4);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      padding: 0.8rem 1rem;
      width: 100%;
      z-index: 999;
      transition: all 0.4s ease-in-out;
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      backdrop-filter: blur(0px); /* Inicial sin blur */
      -webkit-backdrop-filter: blur(0px);
    }
    
    /* Navbar Flotante */
    .custom-navbar.floating {
      position: fixed;
      top: 10px;
      left: 50%;
      transform: translateX(-50%) scale(0.96); /* El "scale" reduce el tamaño */
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(245, 245, 245, 0.9));
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      border-radius: 16px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      width: calc(100%);
      max-width: auto;
      padding: 0.6rem 1rem;
    }
    
    
    /* Logo */
    .logo-img {
      height: 40px;
      transition: height 0.5s cubic-bezier(0.42, 0, 0.58, 1); /* Animación suave */
    }
    
    .custom-navbar.floating .logo-img {
      height: 36px;
    }
    
   /* Hamburger Toggler (Botón de menú animado) */
.hamburger-toggler {
  border: none;
  background: transparent;
  padding: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  transition: all 0.3s ease-in-out;
}

/* Animación en hover: escala + color */
.hamburger-toggler:hover {
  transform: scale(1.1); /* Efecto de agrandar */
}

.hamburger-toggler:hover .hamburger-inner,
.hamburger-toggler:hover .hamburger-inner::before,
.hamburger-toggler:hover .hamburger-inner::after {
  background-color: #0056b3; /* Azul oscuro moderno */
}

.hamburger-box {
  position: relative;
  width: 24px;
  height: 16px;
  display: inline-block;
}

.hamburger-inner {
  position: absolute;
  top: 50%;
  display: block;
  width: 100%;
  height: 2px;
  background-color: #000;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
  transform: translateY(-50%);
}

/* Líneas arriba y abajo */
.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #000;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

.hamburger-inner::before {
  top: -8px;
}

.hamburger-inner::after {
  bottom: -8px;
}

/* Estado abierto (expandido, sin collapsed) */
.hamburger-toggler:not(.collapsed) .hamburger-inner {
  background-color: transparent;
}

.hamburger-toggler:not(.collapsed) .hamburger-inner::before {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-toggler:not(.collapsed) .hamburger-inner::after {
  transform: rotate(-45deg) translate(5px, -5px);
}

    
    /* Botón "Contrata Aquí" (Responsive) */
    .mobile-contract-btn {
      font-size: 0.9rem;
      padding: 0.5rem 1rem;
      border-radius: 16px;
      background: linear-gradient(135deg, #007aff, #5856d6);
      transition: all 0.3s ease;
    }
    
    .mobile-contract-btn:hover {
      background: linear-gradient(135deg, #5856d6, #007aff);
    }
    
    /* Links del Navbar */
    .nav-link {
      font-size: 1rem;
      font-weight: 600;
      color: #555;
      transition: color 0.3s ease;
    }
    
    .nav-link:hover {
      color: #007aff;
    }
    
    /* Dropdown */
    .dropdown-menu {
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    
    .dropdown-item {
      color: #555;
      font-size: 0.9rem;
      transition: background 0.3s ease, color 0.3s ease;
    }
    
    .dropdown-item:hover {
      background: #007aff;
      color: #ffffff;
    }
    
    /* Responsivo */
    @media (max-width: 768px) {
      .logo-img {
        height: 32px;
      }
    
      .nav-link {
        font-size: 0.9rem;
      }
    
      .mobile-contract-btn {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
      }
    
      .navbar-toggler-custom {
        font-size: 1rem;
      }
    }


    .nav-active-tab {
      color: #ffffff !important; /* Color del texto */
      background: linear-gradient(135deg, #007aff, #5856d6); /* Fondo degradado */
      border-radius: 18px; /* Bordes suaves */
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Sombra elegante */
      transition: all 0.3s ease-in-out; /* Suavidad en transiciones */
      text-align: center;
    }
      
    .nav-active-tab:hover {
      transform: translateY(-2px); /* Efecto de elevación en hover */
      color: #ffffff !important;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25); /* Sombra más pronunciada */
    }
        
  
  
  .color-barra {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(245, 245, 245, 0.9));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08); /* Sombra más ligera y difusa */
    transition: background 0.3s ease, box-shadow 0.3s ease; /* Transición suave al interactuar */
  }
  
  .color-menu {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(250, 250, 250, 1));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada para dropdown */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Efecto suave para dropdown */
  }
  
  .top-nav-collapse{
    background: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.7)) !important; /**Segundo Color**/
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
    }
  
  /* Logo centrado en móviles */
  @media (max-width: 991px) {
    .logo {
        margin: 0 auto;
        display: block;
    }
    .d-mobile-only {
        display: inline-block;
        margin-right: 10px;
    }
  }
  
  /* Ocultar botón en pantallas grandes */
  @media (min-width: 991px) {
    .d-mobile-only {
        display: none;
    }
  }
  
  /* Ajustes de layout en dispositivos móviles */
  @media (max-width: 991px) {
    .navbar-collapse {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px; /* Espaciado entre elementos */
    }
    .menu-items {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 10px; /* Separación entre ítems */
    }
    .menu-items .nav-item {
        margin-bottom: 10px;
    }
    .nav-flex-icons {
        margin-top: 15px;
    }
  }
  
  /* Efectos de interacción */
  .navbar-nav .nav-item .nav-link {
    color: #555;
    transition: color 0.3s ease, background 0.3s ease;
  }
  
  .navbar-nav .nav-item .nav-link:hover {
    background-color: rgba(0, 123, 255, 0.15);
    border-radius: 16px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Efecto de sombra al hover */
  }
  
  .dropdown-menu .dropdown-item:hover {
    background-color: rgba(0, 123, 255, 0.1);
    border-radius: 12px !important;
    box-shadow: inset 0 0 5px rgba(0, 123, 255, 0.1); /* Efecto interno */
  }
  
  /* Botón Redondeado */
  .btn-rounded {
    border-radius: 20px;
    background: linear-gradient(to right, #007aff, #5856d6);
    color: white;
    padding: 10px 20px;
    font-weight: bold;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .btn-rounded:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to right, #5856d6, #007aff);
  }
  
  /* Transición Suave para Toda la Barra */
  .color-barra, .color-menu, .btn-rounded {
    transition: all 0.3s ease;
  }
    
    
        /*BARRA FLOTANTE*/
      /*BARRA FLOTANTE*/
    /*BARRA FLOTANTE*/

/*SECCION APPS INDEX*/
/* Fondo con gradiente para darle dinamismo a la sección */
/* SECCIÓN DE APLICACIONES ESTILO FLUENT DESIGN */
.fluent-apps-section {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.9), rgba(219, 229, 255, 0.8));
  padding: 70px 0;
  border-radius: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Efecto de iluminación en el fondo */
.fluent-apps-section::before,
.fluent-apps-section::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  background: rgba(0, 120, 212, 0.15);
  filter: blur(80px);
  border-radius: 50%;
}

.fluent-apps-section::before {
  top: -40px;
  left: 10%;
}

.fluent-apps-section::after {
  bottom: -40px;
  right: 15%;
}

/* TÍTULO */
.fluent-apps-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* SUBTÍTULO */
.fluent-apps-subtitle {
  font-size: 1.3rem;
  color: #5a5a5a;
  margin-bottom: 40px;
}

/* TARJETAS DE APLICACIONES */
.fluent-app-card {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Hover */
.fluent-app-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.4);
}

/* Efecto de iluminación en hover */
.fluent-app-card::before {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  top: -100%;
  left: -50%;
  transition: all 0.5s ease;
}

.fluent-app-card:hover::before {
  top: 0;
}

/* LOGOS */
.fluent-app-logo {
  max-width: 80px;
  transition: transform 0.3s ease;
}

.fluent-app-card:hover .fluent-app-logo {
  transform: scale(1.1);
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .fluent-apps-title {
      font-size: 2.4rem;
  }

  .fluent-apps-subtitle {
      font-size: 1.2rem;
  }

  .fluent-app-card {
      padding: 15px;
  }

  .fluent-app-logo {
      max-width: 70px;
  }
}



/*SECCION APPS INDEX*/

/*PROMOS*/
/* SECCIÓN DE PROMOCIONES */
/* Sección de Promociones */
/* SECCIÓN DE PROMOCIONES */
/* ==== SECCIÓN PROMOCIONES GENERAL ==== */
.promociones-ilink {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #f0f4f8, #ffffff);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.promociones-ilink::before,
.promociones-ilink::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  filter: blur(100px);
}

.promociones-ilink::before {
  width: 300px;
  height: 300px;
  top: -60px;
  left: 8%;
  background: rgba(0, 150, 255, 0.1);
}

.promociones-ilink::after {
  width: 250px;
  height: 250px;
  bottom: -60px;
  right: 10%;
  background: rgba(0, 150, 255, 0.08);
}

.promociones-container {
  max-width: 1200px;
  margin: auto;
  position: relative;
  z-index: 2;
}

.promociones-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #0b2b66;
  margin-bottom: 0.5rem;
}

.promociones-subtitle {
  font-size: 1.2rem;
  color: #4a4a4a;
  margin-bottom: 3rem;
}

/* ==== GRID DE PROMOCIONES ==== */
.promociones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

/* ==== TARJETAS ==== */
.promo-card {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  padding: 2.5rem 1.8rem;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

.promo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);
}

.promo-card img {
  width: 72px;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
}

.promo-card h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0d47a1;
  margin-bottom: 0.5rem;
}

.promo-card p {
  font-size: 1rem;
  color: #444;
  line-height: 1.5;
  margin-bottom: 1.2rem;
}

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

/* ==== ETIQUETAS ==== */
.promo-etiqueta {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  margin-bottom: 1rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.verde {
  background: linear-gradient(135deg, #00c853, #64dd17);
}

.azul {
  background: linear-gradient(135deg, #2196f3, #00bcd4);
}

.naranja {
  background: linear-gradient(135deg, #ff9800, #ff5722);
}

/* ==== BOTÓN WHATSAPP ==== */
.promo-btn {
  background: linear-gradient(135deg, #00c77b, #03a26b);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  padding: 0.75rem 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 6px 16px rgba(0, 199, 123, 0.25);
  margin-top: auto;
}

.promo-btn:hover {
  background: linear-gradient(135deg, #1ebe57, #00b94e);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 199, 123, 0.4);
  color: #F0F4F8;
}

/* ==== TEMPORIZADOR ==== */
.promo-timer {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0b2b66;
  margin: 0.8rem 0 1rem;
}

/* ==== SKELETON LOADER ADAPTATIVO ==== */
.promo-expired {
  display: none;
  padding: 2rem 1rem;
  height: 100%;
}

.promo-skeleton-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  max-width: 100%;
  height: 100%;
  justify-content: center;
  animation: fadeIn 0.6s ease-in;
}

/* Skeleton Elements adaptables */
.skeleton-image {
  width: 64px;
  height: 64px;
  max-width: 80px;
  border-radius: 50%;
}

.skeleton-title {
  width: 60%;
  max-width: 300px;
  height: 20px;
  border-radius: 10px;
}

.skeleton-text {
  width: 80%;
  max-width: 500px;
  height: 14px;
  border-radius: 6px;
}

.skeleton-text.short {
  width: 50%;
  max-width: 250px;
}

.skeleton-button {
  width: 50%;
  max-width: 200px;
  height: 42px;
  border-radius: 25px;
}

/* Shimmer animation */
.shimmer {
  background: linear-gradient(100deg, #d9e4ff 30%, #ede6f7 50%, #d0d8ff 70%);
  background-size: 400% 100%;
  animation: shimmerMove 3s infinite linear;
}

@keyframes shimmerMove {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Responsivo en pantallas grandes === */
@media (min-width: 1024px) {
  .skeleton-title { height: 22px; }
  .skeleton-text { height: 16px; }
  .skeleton-button { height: 44px; }
}


/* ==== RESPONSIVO ==== */
@media (max-width: 768px) {
  .promociones-title {
    font-size: 2.2rem;
  }

  .promociones-subtitle {
    font-size: 1rem;
  }

  .promo-card h3 {
    font-size: 1.25rem;
  }

  .promo-card p {
    font-size: 0.95rem;
  }

  .promo-card img {
    width: 60px;
  }

  .promo-btn {
    font-size: 0.95rem;
    padding: 0.6rem 1.5rem;
  }

  .skeleton-title { width: 80%; }
  .skeleton-text { width: 90%; }
  .skeleton-button { width: 140px; height: 36px; }
}




/*PROMOS*

/*SECCION AWARD INDEX*/
/* SECCIÓN PRINCIPAL */
/* Sección de Premios */
.fluent-award-section {
  padding: 60px 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(230, 240, 255, 0.8));
  backdrop-filter: blur(15px);
  text-align: center;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

/* Efecto de iluminación en el fondo */
.fluent-award-section::before,
.fluent-award-section::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  background: rgba(0, 120, 212, 0.15);
  filter: blur(100px);
  border-radius: 50%;
}

.fluent-award-section::before {
  top: -40px;
  left: 15%;
}

.fluent-award-section::after {
  bottom: -40px;
  right: 10%;
}

/* TÍTULOS */
.fluent-title {
  font-size: 3rem;
  font-weight: 800;
  color: #0078D4;
  text-transform: uppercase;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  animation: fadeIn 1.5s ease-in-out;
}

.fluent-subtitle {
  font-size: 1.4rem;
  color: #444;
  margin-bottom: 35px;
  animation: fadeIn 1.8s ease-in-out;
}

/* GRID DE TARJETAS */
.fluent-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

/* TARJETAS */
.fluent-card {
  background: rgba(255, 255, 255, 0.9);
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  text-align: center;
  width: 320px;
  backdrop-filter: blur(12px);
  overflow: hidden;
  position: relative;
}

.fluent-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 245, 245, 0.9));
}

/* IMÁGENES */
.fluent-img {
  max-width: 90px;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.fluent-card:hover .fluent-img {
  transform: scale(1.15);
}

/* TITULO DE TARJETAS */
.fluent-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1b2631;
}

/* DISCLAIMER */
.fluent-disclaimer {
  font-size: 1rem;
  color: #555;
  margin-top: 30px;
}

/* BOTÓN ESTILO SECCIÓN PLANES */
.fluent-btn {
  display: inline-block;
  padding: 14px 40px;
  font-size: 18px;
  color: white;
  background: linear-gradient(135deg, #004AAD, #003B7A);
  border-radius: 12px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease, transform 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 120, 212, 0.3);
  border: none;
}

.fluent-btn:hover {
  background: linear-gradient(135deg, #003B7A, #002E5C);
  transform: scale(1.05);
  box-shadow: 0 7px 20px rgba(0, 120, 212, 0.4);
  color: #F0F4F8;
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .fluent-title {
      font-size: 2.4rem;
  }

  .fluent-subtitle {
      font-size: 1.2rem;
  }

  .fluent-grid {
      flex-direction: column;
      align-items: center;
  }

  .fluent-card {
      width: 90%;
      max-width: 350px;
  }

  .fluent-btn {
      font-size: 1rem;
      padding: 12px 25px;
  }
}

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




/*SECCION AWARD INDEX*/

/*NOTICIA*/
/* SECCIÓN DE NOTICIAS ESTILO FLUENT DESIGN */
.news-fluent-section {
  padding: 80px 20px;
  background: linear-gradient(145deg, #e0eaff, #f4f9ff);
  border-radius: 24px;
  box-shadow: inset 0 0 50px rgba(0, 119, 255, 0.05);
  overflow: hidden;
  position: relative;
}

/* Iluminación decorativa */
.news-fluent-section::before,
.news-fluent-section::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  background: rgba(0, 140, 255, 0.2);
  filter: blur(100px);
  border-radius: 50%;
  z-index: 0;
}

.news-fluent-section::before {
  top: -50px;
  left: 5%;
}

.news-fluent-section::after {
  bottom: -50px;
  right: 5%;
}

.news-container {
  position: relative;
  z-index: 1;
}

/* Encabezado */
.news-header {
  margin-bottom: 3rem;
}

.news-heading {
  font-size: 3rem;
  font-weight: 800;
  color: #004aad;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.news-subtitle {
  font-size: 1.25rem;
  color: #4c4c4c;
  max-width: 700px;
  margin: 0 auto;
}

/* Carrusel */
.news-carousel {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.desktop-image,
.mobile-image {
  width: 100%;
  border-radius: 16px;
  transition: transform 0.3s ease;
}

.desktop-image:hover,
.mobile-image:hover {
  transform: scale(1.015);
}

/* Mostrar imagen correcta por dispositivo */
.desktop-image { display: none; }
.mobile-image { display: block; }

@media (min-width: 768px) {
  .desktop-image { display: block; }
  .mobile-image { display: none; }
}

/* Indicadores */
.carousel-indicators li {
  background-color: #004aad;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin: 5px;
  transition: transform 0.3s ease;
}

.carousel-indicators .active {
  background-color: #ff9800;
  transform: scale(1.3);
}

/* Controles */
.news-carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  cursor: pointer;
  z-index: 10;
}

.news-carousel-control:hover {
  background: rgba(255, 255, 255, 0.5);
}

.prev { left: 10px; }
.next { right: 10px; }

.news-carousel-icon {
  font-size: 28px;
  color: #004aad;
}

/* Info adicional */
.news-info {
  margin-top: 40px;
  font-size: 1rem;
  color: #3a3a3a;
  line-height: 1.5;
}

.news-note {
  margin-bottom: 10px;
  font-style: italic;
}

.news-link {
  color: #004aad;
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.news-link:hover {
  color: #002f73;
}

/* Responsive */
@media (max-width: 768px) {
  .news-heading {
    font-size: 2.2rem;
  }

  .news-subtitle {
    font-size: 1.1rem;
  }

  .news-carousel-control {
    width: 38px;
    height: 38px;
  }

  .news-carousel-icon {
    font-size: 22px;
  }
}


/*NOTICIA*/

/*BOTON CALL ACTION FINAL INDEX*/
.btn-modern {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  color: #ffffff;
  background-color: transparent;
  border: 2px solid #ffffff;
  border-radius: 12px; /* Borde sutilmente redondeado para un look moderno */
  position: relative;
  z-index: 1;
  transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.btn-modern::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease;
  z-index: -1;
}

.btn-modern:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

.btn-modern:hover {
  color: #000000;
  background-color: #ffffff;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); /* Sombra suave para darle profundidad */
  border-color: #ffffff;
}
/*SECCION APPS INDEX*/



/* CAROUSEL */

/* CONTENEDOR DEL CARRUSEL */
.fluent-carousel-container {
  margin-top: 78px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

/* CARRUSEL */
.fluent-carousel {
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

/* IMÁGENES DEL CARRUSEL */
.fluent-desktop-image {
  display: none;
  width: 100%;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.fluent-mobile-image {
  display: block;
  width: 100%;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.fluent-desktop-image:hover,
.fluent-mobile-image:hover {
  transform: scale(1.02);
}

/* Mostrar imágenes de escritorio en pantallas grandes */
@media (min-width: 768px) {
  .fluent-desktop-image {
      display: block;
  }
  .fluent-mobile-image {
      display: none;
  }
}

/* INDICADORES DEL CARRUSEL */
.fluent-carousel-indicators {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}

.fluent-carousel-indicators li {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin: 5px;
  transition: background 0.3s ease;
}

.fluent-carousel-indicators .active {
  background: #FF9800;
  transform: scale(1.3);
}

/* CONTROLES DEL CARRUSEL */
.fluent-carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.fluent-carousel-control:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%) scale(1.05);
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

.fluent-carousel-icon {
  font-size: 28px;
  color: #004AAD;
  transition: color 0.3s ease;
}

.fluent-carousel-control:hover .fluent-carousel-icon {
  color: #002e5c;
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .fluent-carousel-indicators li {
      width: 10px;
      height: 10px;
  }

  .fluent-carousel-control {
    width: 40px;
    height: 40px;
  }
}

  /* CAROUSEL */


  /* CONSOLA */

  .console-underscore {
    display: inline-block;
    width: 3px;
    height: 1.2em; /* Ajuste de altura según el tamaño del texto */
    vertical-align: bottom;
    background-color: currentColor;
    animation: blink 1s step-end infinite;
}

  @keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* CONSOLA */

/* COLORES */

.cotizar{
  /* fallback for old browsers */
  background: #0056d7;

  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to right, rgba(0,86,215,1), rgba(0,75,162,1));

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to right, rgba(0,86,215,1), rgba(0,75,162,1))
}

.letras-barra {
  color: #17202a !important;
}

/* Barra */

.gradient-cotizar {
  /* fallback for old browsers */
  background: #1565c0;
  
  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to right, rgb(51, 160, 255), rgb(0, 213, 255));

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to right, rgb(21, 101, 192), rgb(0, 188, 212))
}

/* Fin Pagina */
.consola{
  /* fallback for old browsers */
  background: #f8f9fa;

  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to right, rgba(28,40,51,1), rgba(39,55,70,1));

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to right, rgba(28,40,51,1), rgba(39,55,70,1))
}

.cuerpo{
  /* fallback for old browsers */
  background: #17202a;

  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to right, rgba(23,32,42,1), rgba(33,47,61,1));

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to right, rgba(23,32,42,1), rgba(33,47,61,1))
}

.derechos {
  /* fallback for old browsers */
  background: #0056d7;

  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to right, rgba(0,86,215,1), rgba(0,75,162,1));

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to right, rgba(0,86,215,1), rgba(0,75,162,1))
      }

.gradient-5m {
    /* fallback for old browsers */
    background: #f28a11;
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgba(242,138,17,1), rgba(255,202,26,1));
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgba(242,138,17,1), rgba(255,202,26,1))
  }

  .gradient-10m {
    /* fallback for old browsers */
    background: #ff9c59;
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgba(255,156,89,1), rgba(255,78,133,1));
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgba(255,156,89,1), rgba(255,78,133,1))
  }

  .gradient-15m {
    /* fallback for old browsers */
    background: #ff525b;
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgba(255,82,91,1), rgba(176,40,176,1));
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgba(255,82,91,1), rgba(176,40,176,1))
  }

  .gradient-20m {
    /* fallback for old browsers */
    background: #ba20b4;
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgba(186,32,180,1), rgba(47,64,154,1));
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgba(186,32,180,1), rgba(47,64,154,1))
  }

  .gradient-25m {
    /* fallback for old browsers */
    background: #29cad4;
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgba(41,202,212,1), rgba(43,64,155,1));
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgba(41,202,212,1), rgba(43,64,155,1))
  }

  .gradient-40m {
    /* fallback for old browsers */
    background: #88008f;
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgba(136,0,143,1), rgba(219,65,123,1));
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgba(136,0,143,1), rgba(219,65,123,1))
  }
  

/* COLORES */


/* PLANES */

/* Efecto hover más fluido en la tarjeta */
.custom-card {
  transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

.custom-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

.custom-bg {
  background-color: #212f3d; /* Fondo negro */
  color: #fff; /* Texto claro */
  border-radius: 10px;
  border: 3px solid;
  border-image-slice: 1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Añade una sombra suave */
}

.black_custom {
  background-color: #212f3d; /* Fondo negro */
  color: #fff; /* Texto claro */
}

.btn-custom-plan {
  background-color: #4a148c; /* Botón con un color azul vibrante */
  border: none;
}

.card-footer {
  background-color: transparent;
  padding: 15px;
}

.card-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.2); /* Línea divisora */
  margin: 15px 0;
}

/* PLANES */

/*FINAL*/
/* Sección CTA */
.cta-fluent-section {
  position: relative;
  padding: 100px 20px;
  background: linear-gradient(135deg, #001f4d, #3e4fff);
  border-radius: 2rem;
  overflow: hidden;
  text-align: center;
  z-index: 1;
  color: #fff;
}

/* Efecto blur iluminado */
.cta-fluent-section::before,
.cta-fluent-section::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  background: rgba(255, 255, 255, 0.1);
  filter: blur(100px);
  border-radius: 50%;
  z-index: 0;
}

.cta-fluent-section::before {
  top: -40px;
  left: 15%;
}

.cta-fluent-section::after {
  bottom: -50px;
  right: 20%;
}

.cta-fluent-container {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
}

/* Título */
.cta-fluent-title {
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: 1.2rem;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  animation: fadeIn 1s ease-out;
}

/* Subtítulo */
.cta-fluent-subtitle {
  font-size: 1.3rem;
  font-weight: 400;
  color: #e0e0e0;
  max-width: 700px;
  margin: 0 auto 2rem;
  line-height: 1.6;
  animation: fadeIn 1.5s ease-out;
}

/* Contenedor del botón */
.cta-fluent-btn-container {
  display: flex;
  justify-content: center;
  animation: fadeIn 2s ease-out;
}

/* Botón */
.cta-fluent-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 2rem;
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 3rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

.cta-fluent-btn i {
  font-size: 1.3rem;
}

.cta-fluent-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  color: #F0F4F8;
}

.cta-fluent-btn:active {
  transform: scale(0.97);
}

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

/* Responsive */
@media (max-width: 768px) {
  .cta-fluent-title {
    font-size: 2.4rem;
  }

  .cta-fluent-subtitle {
    font-size: 1.15rem;
  }

  .cta-fluent-btn {
    font-size: 1.05rem;
    padding: 0.8rem 1.7rem;
  }
}

@media (max-width: 480px) {
  .cta-fluent-title {
    font-size: 2rem;
  }

  .cta-fluent-subtitle {
    font-size: 1rem;
  }

  .cta-fluent-btn {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
  }
}




/*FINAL*/

/*BARRA PLANES*/
/* Separación del contenido con respecto a la barra de navegación */
/* SECCIÓN HERO DE PAQUETES */
.inalambrico-header {
  width: 100%;
  padding: 5rem 2rem 4rem;
  background: linear-gradient(135deg, #0d2850, #005ca9);
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  z-index: 1;
  margin-top: 80px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.inalambrico-header-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.inalambrico-header-title {
  font-size: 3.2rem;
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -0.5px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.inalambrico-header-title span {
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.inalambrico-header-subtitle {
  font-size: 1.25rem;
  font-weight: 400;
  color: #e0e0e0;
  max-width: 800px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.inalambrico-header-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  margin: 0 auto 3rem;
  border-radius: 4px;
}

/* Beneficios */
.inalambrico-header-benefits {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.inalambrico-benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 1.2rem 1.5rem;
  border-radius: 1rem;
  backdrop-filter: blur(6px);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-width: 150px;
  max-width: 200px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.inalambrico-benefit-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.inalambrico-benefit-item img {
  width: 52px;
  height: 52px;
  margin-bottom: 0.6rem;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.1));
}

.inalambrico-benefit-item:hover img {
  transform: scale(1.1);
}

.benefit-label {
  font-size: 1.05rem;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .inalambrico-header-title {
    font-size: 2.5rem;
  }

  .inalambrico-header-subtitle {
    font-size: 1.1rem;
  }

  .inalambrico-header-benefits {
    gap: 1.5rem;
  }

  .inalambrico-benefit-item {
    flex: 1 1 45%;
  }
}

@media (max-width: 480px) {
  .inalambrico-header-title {
    font-size: 2rem;
  }

  .inalambrico-header-subtitle {
    font-size: 1rem;
  }

  .inalambrico-benefit-item {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .inalambrico-benefit-item img {
    width: 48px;
    height: 48px;
  }

  .benefit-label {
    font-size: 1rem;
  }
}



/*BARRA PLANES*/

/*PLANES HOGAR*/
/* Sección de planes */
.plans-section {
  background-color: #f8f9fa;
  padding: 60px 0;
}

.plan-card {
  border-radius: 20px;
  overflow: hidden;
  background-color: #f8f9fa;
  color: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plan-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.605);
}

.plan-header {
  padding: 30px 0;
  color: white;
}

.plan-body {
  padding: 20px;
}

.plan-footer {
  padding: 15px;
  text-align: center;
}

.plan-title {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.plan-speed {
  font-size: 2rem;
  font-weight: 700;
}

.plan-mbps {
  font-size: 1.5rem;
  font-weight: 700;
}

.plan-devices {
  margin-bottom: 10px;
}

.plan-description {
  font-size: 1rem;
  color: #4a4a4a;
  margin-bottom: 20px;
}

.plan-prices {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.icon-container {
  font-size: 1.5rem;
}

/* Color gradient for the different plans */
.bg-gradient-basic {
  background: linear-gradient(to right, rgba(0,163,224,1), rgba(0,120,212,1));
}

.bg-gradient-standard {
  background: linear-gradient(to right, rgba(0,201,224,1), rgba(0,120,180,1));
}

.bg-gradient-premium {
  background: linear-gradient(to right, rgba(0,217,224,1), rgb(0, 164, 55));
}

.bg-gradient-superior {
  background: linear-gradient(to right, rgba(0,150,136,1), rgba(33,150,243,1));
}

.bg-gradient-ultra {
  background: linear-gradient(to right, rgba(103,58,183,1), rgba(63,81,181,1));
}

.bg-gradient-mega {
  background: linear-gradient(to right, rgb(130, 0, 136), rgb(0, 14, 169));
}

/* Estilos de botón minimalista inspirado en Windows 11 */
.btn-customer-modern {
  padding: 0.6rem 1.2rem;
  font-size: 1.1rem;
  color: #000000 !important; /* Texto negro */
  background-color: #ffffff; /* Fondo blanco */
  border: 2px solid #0078D4; /* Borde azul */
  border-radius: 12px; /* Bordes redondeados */
  transition: all 0.4s ease; /* Transición más suave */
  position: relative;
  z-index: 1;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 120, 212, 0.15); /* Sombra suave */
}

/* Hover más sutil y suave */
.btn-customer-modern:hover {
  color: #ffffff !important; /* Texto blanco en hover */
  background-color: #0078D4; /* Fondo azul en hover */
  border-color: #0078D4;
  box-shadow: 0 6px 16px rgba(0, 120, 212, 0.3); /* Sombra más fuerte en hover */
  transform: translateY(-2px); /* Elevación ligera */
}

.btn-customer-modern::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 120, 212, 0.1); /* Fondo sutil */
  transition: background-color 0.4s ease;
  z-index: -1;
}

/* Hover más fluido */
.btn-customer-modern:hover::before {
  background-color: rgba(0, 120, 212, 0.3); /* Fondo azul más oscuro en hover */
}


/* Responsiveness */
@media (max-width: 768px) {
  .plan-card {
    margin-bottom: 20px;
  }

  .btn-customer-modern {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }

  .plan-title {
    font-size: 1.8rem;
  }

  .plan-speed {
    font-size: 1.4rem;
  }
}


/*PLANES HOGAR*/

/* VENTAJAS PLANES */


/* VENTAJAS PLANES */

/*MODAL PLANES*/
/* Clase personalizada para darle más estilo minimalista al modal */
.modal-content.custom-modal {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  border-radius: 16px; /* Ya estamos utilizando la clase 'rounded' */
  border: none; /* Elimina bordes adicionales */
}

.modal-header.custom-modal-header {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.plan-box-5m {
  background-color: #0078D4; /* Fondo plano azul */
  border-radius: 12px;
  padding: 15px;
}

.pricing-box.border-box {
  border-radius: 12px;
  padding: 20px;
  background-color: #f8f9fa;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.description-box {
  padding: 20px;
  background-color: #f0f4f8;
  border-radius: 12px;
}

.btn-rounded {
  border-radius: 50px;
  padding: 0.75rem 1.5rem;
}

.btn-cotizar {
  background-color: #0078D4;
  color: #ffffff;
  box-shadow: 0 6px 12px rgba(0, 120, 212, 0.3);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-cotizar:hover {
  background-color: #005fa3;
  transform: scale(1.05);
}

.text-primary {
  color: #0078D4 !important;
}

/*MODAL PLANES*/



/*TABS PLANES*/
/* Contenedor de los botones (nav) */
.custom-nav {
  max-width: 600px; /* Limita el ancho total de los botones */
  margin: 0 auto; /* Centra el contenedor en la pantalla */
}

/* Botones */
.custom-nav .nav-item .custom-tab {
  background-color: #f0f4f8; /* Fondo claro */
  border-radius: 15px; /* Bordes redondeados */
  color: #1b2631; /* Texto oscuro */
  padding: 10px 25px; /* Espaciado interno */
  transition: background-color 0.3s ease, transform 0.3s ease;
  margin: 0 10px; /* Espaciado entre los botones */
  font-weight: 600;
  font-size: 1rem;
  display: inline-block; /* Evita que ocupe todo el ancho */
}

.custom-nav .nav-item .custom-tab:hover {
  background-color: #0078D4; /* Color azul en hover */
  color: #ffffff;
  transform: translateY(-2px);
}

.custom-nav .nav-item .custom-tab.active {
  background-color: #005fa3;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 120, 212, 0.3);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .nav-justified .nav-item {
    flex: 0 0 auto; /* Evita que los botones ocupen el ancho completo */
    text-align: center;
  }
  
  .nav-justified .nav-link {
    display: inline-block;
    margin-bottom: 10px;
    width: auto;
  }

  /* Centra el contenido en móviles */
  .nav-justified {
    justify-content: center !important;
  }
}



/*TABS PLANES*/

/*FOOTER*/
.custom-footer {
  background-color: #181818; /* Fondo oscuro */
  color: #FFFFFF; /* Texto en blanco */
  font-size: 0.9rem; /* Tamaño de fuente */
  text-align: center; /* Centramos el texto */
  padding: 20px 15px; /* Espaciado */
  margin-top: 20px; /* Margen superior */
  border-top: 1px solid #333; /* Línea separadora en el pie */
}

.custom-footer p {
  margin: 0;
  padding: 0;
}

/*FOOTER*/


/* PANEL*/
.custom-nav {
  background-color: #F5F5F5;
  border-radius: 10px; /* Bordes redondeados */
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(145, 146, 255, 0.1); /* Sombra ligera */
}

.custom-nav .nav-link {
  color: #000000; /* Texto blanco */
  font-weight: bold;
  padding: 15px;
  transition: background-color 0.3s ease, color 0.3s ease; /* Transiciones suaves */
}

.custom-nav .nav-link.active {
  background-color: #1a237e; /* Color verde para la pestaña activa */
  color: #ffffff; /* Texto blanco */
}

.custom-nav .nav-link:hover {
  background-color: #2196f3; /* Color de hover */
  color: #ffffff; /* Mantiene el texto blanco en hover */
}

.panel-custom {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera */
  margin-top: 10px;
  transition: all 0.3s ease;
}

.panel-custom.fade.show {
  opacity: 1;
  transform: translateY(0);
}

.panel-custom.fade {
  opacity: 0;
  transform: translateY(20px); /* Animación suave cuando aparece el panel */
}

/* Media Queries para hacerlo responsivo */
@media (max-width: 768px) {
  .custom-nav .nav-item {
    flex: 1 1 100%; /* Las pestañas ocupan todo el ancho en móviles */
  }

  .custom-nav .nav-link {
    text-align: center;
    padding: 15px; /* Reducimos el padding en pantallas pequeñas */
    font-size: 20px !important; /* Reducimos el tamaño del texto */
  }

  .panel-custom {
    padding: 15px; /* Reducimos el padding en los paneles */
  }

  .custom-nav {
    box-shadow: none; /* Eliminamos la sombra para simplificar el diseño en móviles */
  }
}

@media (max-width: 576px) {
  .custom-nav .nav-link {
    font-size: 12px; /* Reducimos aún más el tamaño del texto en pantallas muy pequeñas */
  }
}
/* PANEL*/

/* MODALES */

/* Encabezado con gradiente */
.gradient-100m {
  background: linear-gradient(45deg, #f39c12, #e67e22);
  border-radius: 0 0 10px 10px;
  padding: 15px;
}

.plan-box {
  background: linear-gradient(45deg, #f39c12, #e67e22);
  padding: 30px;
  border-radius: 10px;
  color: white;
  width: 100%;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Agrega sombra suave */
  transition: transform 0.3s ease; /* Suavizar la transición */
}

/* Estilos de la caja plan-box para diferentes planes */

/* Plan Básico */
.plan-box-5m {
  background: linear-gradient(to right, #f28a11, #ffca1a);
  box-shadow: 0 6px 12px rgba(242, 138, 17, 0.2); /* Sombra más marcada */
}

/* Plan Estándar */
.plan-box-10m {
  background: linear-gradient(to right, #ff9c59, #ff4e85);
  box-shadow: 0 6px 12px rgba(255, 78, 133, 0.2);
}

/* Plan Pro */
.plan-box-15m {
  background: linear-gradient(to right, #ff525b, #b028b0);
  box-shadow: 0 6px 12px rgba(176, 40, 176, 0.2);
}

/* Plan Plus */
.plan-box-20m {
  background: linear-gradient(to right, #ba20b4, #2f409a);
  box-shadow: 0 6px 12px rgba(47, 64, 154, 0.2);
}

/* Plan Premium */
.plan-box-25m {
  background: linear-gradient(to right, #29cad4, #2b409b);
  box-shadow: 0 6px 12px rgba(43, 64, 155, 0.2);
}

/* Plan Supreme */
.plan-box-40m {
  background: linear-gradient(to right, #88008f, #db417b);
  box-shadow: 0 6px 12px rgba(219, 65, 123, 0.2);
}

/* Estilo general de la plan-box */
.plan-box h2 {
  font-size: 4rem; /* Tamaño más grande por defecto */
  font-weight: 700;
}

.plan-box h6, .plan-box p {
  font-size: 1.2rem;
  font-weight: 400;
}

.plan-details li {
  margin-bottom: 10px;
  font-size: 1rem;
}

/* Borde alrededor de la sección de precios */
.border-box {
  border: 2px solid #f39c12;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
}

/* Estilos de la caja de precios */
.pricing-box h3 {
  font-size: 1.7rem; /* Tamaño más grande para mayor visibilidad */
  font-weight: 600;  /* Más grosor para enfatizar */
}

.pricing-box h5 {
  font-size: 1.3rem;
  font-weight: 500;
}

.description-box {
  margin-top: 15px;
  padding: 10px;
  font-size: 1.1rem;
  color: #333; /* Color del texto más legible */
}

/* Botones en el Footer */
.custom-btn {
  border-radius: 12px;
  margin: 0 5px;
  padding: 10px 20px;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 200px;
  font-size: 1.1rem; /* Aumentar tamaño de fuente */
  font-weight: 600; /* Mayor grosor */
  letter-spacing: 0.5px; /* Mejor separación de letras */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Efecto hover para los botones */
.custom-btn:hover {
  transform: scale(1.08); /* Aumenta ligeramente más el tamaño al hacer hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Más profundidad */
}

.btn-primary.custom-btn:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

.btn-secondary.custom-btn:hover {
  background-color: #8e44ad;
  border-color: #8e44ad;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  flex-wrap: wrap;
}

/* Responsivo para pantallas pequeñas */
@media (max-width: 768px) {
  .custom-btn {
    width: 100%;
    margin-bottom: 10px;
  }

  .modal-footer {
    justify-content: center;
  }

  .plan-box h2 {
    font-size: 3rem; /* Ajuste un poco más grande en pantallas medianas */
  }

  .plan-box h6, .plan-box p {
    font-size: 1.1rem;
  }

  .pricing-box h3 {
    font-size: 1.4rem;
  }

  .pricing-box h5 {
    font-size: 1.1rem;
  }
}

/* Responsivo para pantallas muy pequeñas (móviles) */
@media (max-width: 576px) {
  .plan-box {
    padding: 20px;
  }

  .plan-box h2 {
    font-size: 2.8rem; /* Aumentar el tamaño de la fuente para móviles */
  }

  .plan-box h6, .plan-box p {
    font-size: 1.1rem; /* Mantener los subtítulos legibles en móviles */
  }

  .pricing-box h3 {
    font-size: 1.2rem;
  }

  .pricing-box h5 {
    font-size: 1rem;
  }

  .modal-footer {
    flex-direction: column;
    padding: 10px;
  }

  .custom-btn {
    max-width: 100%;
    margin-bottom: 10px;
  }
}

/* MODALES */




/* ESTILOS PERSONALIZADOS PARA SECCION DE INTERNET ESCOLAR */
/* ESTILOS PERSONALIZADOS PARA SECCION DE INTERNET ESCOLAR */
/* ESTILOS PERSONALIZADOS PARA SECCION DE INTERNET ESCOLAR */


/* SECCIÓN HERO ESTILO FLUENT DESIGN */
.escolar-header {
  width: 100%;
  padding: 5rem 2rem 4rem;
  background: linear-gradient(135deg, #1d2671, #c33764);
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  z-index: 1;
  margin-top: 80px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.escolar-header-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.escolar-header-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -0.5px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.escolar-header-title span {
  background: linear-gradient(90deg, #ffdf00, #ff9800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.escolar-header-subtitle {
  font-size: 1.25rem;
  font-weight: 400;
  color: #e0e0e0;
  max-width: 800px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.escolar-header-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #ffdf00, #ff9800);
  margin: 0 auto 3rem;
  border-radius: 4px;
}

/* Beneficios */
.escolar-header-benefits {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.escolar-benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 1.2rem 1.5rem;
  border-radius: 1rem;
  backdrop-filter: blur(6px);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-width: 150px;
  max-width: 200px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.escolar-benefit-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.benefit-icon img {
  width: 52px;
  height: 52px;
  margin-bottom: 0.6rem;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.1));
}

.escolar-benefit-item:hover .benefit-icon img {
  transform: scale(1.1);
}

.benefit-label {
  font-size: 1.05rem;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .escolar-header-title {
    font-size: 2.5rem;
  }

  .escolar-header-subtitle {
    font-size: 1.1rem;
  }

  .escolar-header-benefits {
    gap: 1.5rem;
  }

  .escolar-benefit-item {
    flex: 1 1 45%;
  }
}

@media (max-width: 480px) {
  .escolar-header-title {
    font-size: 2rem;
  }

  .escolar-header-subtitle {
    font-size: 1rem;
  }

  .escolar-benefit-item {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .benefit-icon img {
    width: 48px;
    height: 48px;
  }

  .benefit-label {
    font-size: 1rem;
  }
}





/* SECCIÓN INFORMATIVA ESTILO FLUENT DESIGN */
.fluent-internet-info {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.9), rgba(219, 229, 255, 0.8));
  padding: 70px 0;
  border-radius: 16px;
  text-align: center;
}

/* TÍTULO Y SUBTÍTULO */
.fluent-internet-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  margin-bottom: 30px;
}

.fluent-internet-subtitle {
  font-size: 1.3rem;
  color: #5a5a5a;
  margin-bottom: 50px; /* Espaciado adicional */
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* GRID DE INFORMACIÓN */
.fluent-internet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 30px;
  justify-content: center;
  margin-bottom: 50px; /* Aumenta el espacio entre las tarjetas y el mensaje */
}

/* TARJETAS DE INFORMACIÓN */
.fluent-internet-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Hover */
.fluent-internet-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.6);
}

/* ICONOS */
.fluent-internet-icon {
  max-width: 80px;
  transition: transform 0.3s ease;
  margin-bottom: 15px;
}

.fluent-internet-card:hover .fluent-internet-icon {
  transform: scale(1.1);
}

/* TÍTULOS */
.fluent-internet-card-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #004AAD;
  margin-bottom: 10px;
}

/* DESCRIPCIÓN */
.fluent-internet-card-text {
  font-size: 1rem;
  color: #5a5a5a;
}

/* NOTA FINAL */
.fluent-internet-note {
  font-size: 1.2rem;
  color: #5a5a5a;
  margin-bottom: 20px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px; /* Espaciado extra entre las tarjetas y el texto */
}

/* BOTÓN */
.fluent-internet-btn {
  display: inline-block;
  background: linear-gradient(135deg, #004AAD, #003B7A);
  color: white;
  padding: 14px 30px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.1rem;
  transition: background 0.4s ease, transform 0.3s ease;
}

/* Hover */
.fluent-internet-btn:hover {
  background: linear-gradient(135deg, #003B7A, #002E5C);
  transform: scale(1.08);
  color: #F0F4F8;
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .fluent-internet-title {
      font-size: 2.4rem;
  }

  .fluent-internet-subtitle {
      font-size: 1.2rem;
  }

  .fluent-internet-grid {
      grid-template-columns: 1fr;
  }

  .fluent-internet-btn {
      font-size: 1rem;
      padding: 12px 25px;
  }
}




/* SECCIÓN DE BENEFICIOS ESTILO FLUENT DESIGN */
.fluent-benefits-section {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.9), rgba(219, 229, 255, 0.8));
  padding: 70px 0;
  border-radius: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* TÍTULO */
.fluent-benefits-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* DESCRIPCIÓN */
.fluent-benefits-description {
  font-size: 1.3rem;
  color: #5a5a5a;
  margin-bottom: 40px;
}

/* TARJETAS DE BENEFICIOS */
.fluent-benefit-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Hover */
.fluent-benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.6);
}

/* ICONOS */
.fluent-benefit-icon {
  max-width: 80px;
  transition: transform 0.3s ease;
  margin-bottom: 15px;
}

.fluent-benefit-card:hover .fluent-benefit-icon {
  transform: scale(1.1);
}

/* TÍTULOS DE BENEFICIOS */
.fluent-benefit-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #004AAD;
  margin-bottom: 10px;
}

/* DESCRIPCIÓN */
.fluent-benefit-description {
  font-size: 1rem;
  color: #5a5a5a;
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .fluent-benefits-title {
      font-size: 2.4rem;
  }

  .fluent-benefits-description {
      font-size: 1.2rem;
  }

  .fluent-benefit-card {
      padding: 25px;
  }
}


/* Sección de Tecnología y Seguridad Personalizada */
/* SECCIÓN DE TECNOLOGÍA Y SEGURIDAD ESTILO FLUENT DESIGN */
.fluent-tech-section {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.9), rgba(219, 229, 255, 0.8));
  padding: 70px 0;
  border-radius: 16px;
  text-align: center;
}

/* TÍTULO Y SUBTÍTULO */
.fluent-tech-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.fluent-tech-subtitle {
  font-size: 1.3rem;
  color: #5a5a5a;
  margin-bottom: 40px;
}

/* GRID DE TECNOLOGÍA */
.fluent-tech-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 30px;
  justify-content: center;
}

/* TARJETAS */
.fluent-tech-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Hover */
.fluent-tech-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.6);
}

/* ICONOS */
.fluent-tech-icon {
  max-width: 80px;
  transition: transform 0.3s ease;
  margin-bottom: 15px;
}

.fluent-tech-card:hover .fluent-tech-icon {
  transform: scale(1.1);
}

/* TÍTULOS DE BENEFICIOS */
.fluent-tech-card-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #004AAD;
  margin-bottom: 10px;
}

/* DESCRIPCIÓN */
.fluent-tech-card-text {
  font-size: 1rem;
  color: #5a5a5a;
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .fluent-tech-title {
      font-size: 2.4rem;
  }

  .fluent-tech-grid {
      grid-template-columns: 1fr;
  }

  .fluent-tech-card {
      padding: 25px;
  }
}


/* Sección de Planes y Paquetes */
/* SECCIÓN DE PLANES ESTILO FLUENT DESIGN */
.fluent-plans-section {
  background: linear-gradient(135deg, rgba(230, 244, 255, 0.9), rgba(200, 220, 255, 0.8));
  padding: 70px 0;
  border-radius: 16px;
  text-align: center;
}

/* TÍTULO Y SUBTÍTULO */
.fluent-plans-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  margin-bottom: 30px;
}

.fluent-plans-subtitle {
  font-size: 1.3rem;
  color: #5a5a5a;
  margin-bottom: 40px;
}

/* TARJETAS DE PLANES */
.fluent-plan-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

/* Plan Destacado */
.fluent-plan-card.featured {
  border: 3px solid #004AAD;
}

/* Badge del plan destacado */
.fluent-plan-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: linear-gradient(135deg, #FF9800, #FF5E00);
  color: white;
  font-size: 14px;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 12px;
  transform: rotate(10deg);
}

/* ICONOS */
.fluent-plan-icon {
  max-width: 80px;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.fluent-plan-card:hover .fluent-plan-icon {
  transform: scale(1.1);
}

/* NOMBRE DEL PLAN */
.fluent-plan-name {
  font-size: 1.5rem;
  font-weight: bold;
  color: #004AAD;
}

/* VELOCIDAD Y PRECIO */
.fluent-plan-speed,
.fluent-plan-cost {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

/* LISTA DE CARACTERÍSTICAS */
.fluent-plan-features {
  list-style: none;
  padding: 0;
  font-size: 1rem;
  color: #5a5a5a;
}

.fluent-plan-features li {
  margin-bottom: 8px;
}

/* BOTÓN */
.fluent-plan-btn {
  background: linear-gradient(135deg, #004AAD, #003B7A);
  color: white;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 700;
  transition: background 0.4s ease, transform 0.3s ease;
}

/* Hover */
.fluent-plan-btn:hover {
  background: linear-gradient(135deg, #003B7A, #002E5C);
  transform: scale(1.08);
  color: #F0F4F8;
}


/* ESTILOS PERSONALIZADOS PARA SECCION DE INTERNET ESCOLAR */
/* ESTILOS PERSONALIZADOS PARA SECCION DE INTERNET ESCOLAR */
/* ESTILOS PERSONALIZADOS PARA SECCION DE INTERNET ESCOLAR */



/* ESTILOS PERSONALIZADOS PARA SECCION DE VIDEOVIGILANCIA */
/* ESTILOS PERSONALIZADOS PARA SECCION DE VIDEOVIGILANCIA */
/* ESTILOS PERSONALIZADOS PARA SECCION DE VIDEOVIGILANCIA */

/* SECCIÓN HERO FLUENT DESIGN */
.vigilancia-header {
  width: 100%;
  padding: 5rem 2rem 4rem;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  z-index: 1;
  margin-top: 80px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.vigilancia-header-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.vigilancia-header-title {
  font-size: 3.2rem;
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -0.5px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.vigilancia-header-title span {
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vigilancia-header-subtitle {
  font-size: 1.25rem;
  font-weight: 400;
  color: #e0e0e0;
  max-width: 800px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.vigilancia-header-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  margin: 0 auto 3rem;
  border-radius: 4px;
}

/* Beneficios */
.vigilancia-header-benefits {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.vigilancia-benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 1.2rem 1.5rem;
  border-radius: 1rem;
  backdrop-filter: blur(6px);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-width: 150px;
  max-width: 200px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.vigilancia-benefit-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.vigilancia-icon img {
  width: 52px;
  height: 52px;
  margin-bottom: 0.6rem;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.1));
}

.vigilancia-benefit-item:hover .vigilancia-icon img {
  transform: scale(1.1);
}

.vigilancia-label {
  font-size: 1.05rem;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .vigilancia-header-title {
    font-size: 2.5rem;
  }

  .vigilancia-header-subtitle {
    font-size: 1.1rem;
  }

  .vigilancia-header-benefits {
    gap: 1.5rem;
  }

  .vigilancia-benefit-item {
    flex: 1 1 45%;
  }
}

@media (max-width: 480px) {
  .vigilancia-header-title {
    font-size: 2rem;
  }

  .vigilancia-header-subtitle {
    font-size: 1rem;
  }

  .vigilancia-benefit-item {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .vigilancia-icon img {
    width: 48px;
    height: 48px;
  }

  .vigilancia-label {
    font-size: 1rem;
  }
}



/* Sección de Características */
/* SECCIÓN DE CARACTERÍSTICAS CON FLUENT DESIGN */
.fluent-features-section {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.9), rgba(219, 229, 255, 0.8));
  padding: 70px 0;
  border-radius: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* TÍTULO */
.fluent-features-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

/* TARJETAS DE CARACTERÍSTICAS */
.fluent-feature-card {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Hover */
.fluent-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.4);
}

/* ÍCONOS */
.fluent-feature-icon {
  max-width: 80px;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.fluent-feature-card:hover .fluent-feature-icon {
  transform: scale(1.1);
}

/* TÍTULOS DE CARACTERÍSTICAS */
.fluent-feature-heading {
  font-size: 1.6rem;
  font-weight: 700;
  color: #004AAD;
  margin-bottom: 10px;
}

/* TEXTO DE LAS CARACTERÍSTICAS */
.fluent-feature-text {
  font-size: 1.1rem;
  color: #5a5a5a;
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .fluent-features-title {
      font-size: 2.4rem;
  }

  .fluent-feature-card {
      padding: 20px;
  }

  .fluent-feature-icon {
      max-width: 70px;
  }
}



/* Sección de Fotos */
/* SECCIÓN DE GALERÍA CON FLUENT DESIGN */
.fluent-gallery-section {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.9), rgba(219, 229, 255, 0.8));
  padding: 70px 0;
  border-radius: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* TÍTULO */
.fluent-gallery-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

/* TARJETAS DE IMÁGENES */
.fluent-gallery-card {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 15px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  position: relative;
}

/* Hover */
.fluent-gallery-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.4);
}

/* IMÁGENES */
.fluent-gallery-img {
  width: 100%;
  border-radius: 12px;
  transition: transform 0.3s ease, filter 0.3s ease;
  object-fit: cover;
}

/* Hover en la imagen */
.fluent-gallery-card:hover .fluent-gallery-img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* DESCRIPCIÓN DE LAS IMÁGENES */
.fluent-gallery-description {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-top: 12px;
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .fluent-gallery-title {
      font-size: 2.4rem;
  }

  .fluent-gallery-card {
      padding: 12px;
  }

  .fluent-gallery-img {
      border-radius: 10px;
  }

  .fluent-gallery-description {
      font-size: 1rem;
  }
}



/* Sección de Planes */
/* SECCIÓN DE PRECIOS ESTILO FLUENT DESIGN */
/* --- Sección de Precios Glassmorphism --- */
.custom-pricing-section {
  background: linear-gradient(135deg, rgba(230, 238, 255, 0.7), rgba(210, 225, 255, 0.7));
  padding: 5rem 2rem;
  border-radius: 24px;
  text-align: center;
  overflow: hidden;
}

/* Encabezado */
.custom-pricing-header {
  max-width: 800px;
  margin: 0 auto 4rem;
}

.custom-pricing-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #003B7A;
  margin-bottom: 1rem;
}

.custom-pricing-subtitle {
  font-size: 1.2rem;
  color: #4a4a4a;
}

/* Grid */
.custom-pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 2rem;
  justify-content: center;
}

/* Tarjeta */
.custom-pricing-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(14px);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 420px;
}

/* Hover */
.custom-pricing-card:hover {
  background: rgba(255, 255, 255, 0.6);
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.15);
}

/* Nombre del plan */
.custom-pricing-name {
  font-size: 1.8rem;
  font-weight: 700;
  color: #003B7A;
}

/* Precio */
.custom-pricing-price {
  font-size: 2rem;
  color: #007bff;
  margin: 1rem 0;
  font-weight: 800;
}

/* Lista de características */
.custom-pricing-features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  text-align: left;
  color: #555;
  font-size: 1rem;
}

.custom-pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.custom-pricing-features i {
  color: #0078d4;
  font-size: 1.2rem;
}

/* Botón */
.custom-pricing-btn {
  background: linear-gradient(135deg, #004AAD, #0078d4);
  color: #ffffff;
  padding: 0.9rem 2rem;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.custom-pricing-btn:hover {
  background: linear-gradient(135deg, #003B7A, #0066cc);
  transform: translateY(-2px);
  color: #F0F4F8;
}

/* Responsive */
@media (max-width: 768px) {
  .custom-pricing-grid {
    grid-template-columns: 1fr;
  }

  .custom-pricing-title {
    font-size: 2.4rem;
  }

  .custom-pricing-subtitle {
    font-size: 1.1rem;
  }
}





/* ESTILOS PERSONALIZADOS PARA SECCION DE VIDEOVIGILANCIA */
/* ESTILOS PERSONALIZADOS PARA SECCION DE VIDEOVIGILANCIA */
/* ESTILOS PERSONALIZADOS PARA SECCION DE VIDEOVIGILANCIA */


/* COMO CONTRATAR */
/* COMO CONTRATAR */
/* COMO CONTRATAR */

/* Sección Hero */
/* Hero de Contratación - Fluent Design Mejorado */
.contratar-header {
  width: 100%;
  padding: 5rem 2rem 4rem;
  background: linear-gradient(135deg, #005c97, #00c9a7);
  color: #ffffff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-top: 80px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.contratar-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.contratar-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.contratar-title span {
  background: linear-gradient(90deg, #ffffff, #a0ffe0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contratar-subtitle {
  font-size: 1.2rem;
  color: #f0f0f0;
  max-width: 820px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
  font-weight: 400;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.contratar-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #00f9ff, #00ffd5);
  margin: 0 auto 3rem;
  border-radius: 4px;
}

/* Íconos de pasos */
.contratar-icons {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.contratar-icon-item {
  background: rgba(255, 255, 255, 0.06);
  padding: 1rem 1.2rem;
  border-radius: 1rem;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 140px;
  max-width: 180px;
}

.contratar-icon-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.contratar-icon-item img {
  width: 52px;
  height: 52px;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
  transition: transform 0.3s ease;
}

.contratar-icon-item:hover img {
  transform: scale(1.1);
}

.contratar-icon-item span {
  font-size: 1.05rem;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .contratar-title {
    font-size: 2.5rem;
  }

  .contratar-subtitle {
    font-size: 1.05rem;
  }

  .contratar-icon-item {
    flex: 1 1 45%;
  }
}

@media (max-width: 480px) {
  .contratar-title {
    font-size: 2rem;
  }

  .contratar-subtitle {
    font-size: 0.95rem;
  }

  .contratar-icon-item {
    flex: 1 1 100%;
  }

  .contratar-icon-item img {
    width: 44px;
    height: 44px;
  }

  .contratar-icon-item span {
    font-size: 1rem;
  }
}




/* Sección de Proceso de Contratación - Fluent Design */
.fluent-proceso-contratacion {
  background: linear-gradient(135deg, rgba(245, 248, 255, 0.95), rgba(230, 240, 255, 0.85));
  backdrop-filter: blur(12px);
  padding: 6rem 2rem;
  position: relative;
  overflow: hidden;
}

.fluent-proceso-contratacion::before,
.fluent-proceso-contratacion::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 0;
}

.fluent-proceso-contratacion::before {
  width: 300px;
  height: 300px;
  background: rgba(0, 120, 212, 0.15);
  top: -60px;
  left: 10%;
}

.fluent-proceso-contratacion::after {
  width: 250px;
  height: 250px;
  background: rgba(0, 120, 212, 0.1);
  bottom: -60px;
  right: 8%;
}

/* Títulos */
.fluent-proceso-titulo {
  font-size: 2.8rem;
  font-weight: 800;
  color: #0b2b66;
  margin-bottom: 0.5rem;
  animation: fadeInUp 1s ease-in-out forwards;
}

.fluent-proceso-subtitulo {
  font-size: 1.2rem;
  color: #4a4a4a;
  margin-bottom: 3rem;
  animation: fadeInUp 1.3s ease-in-out forwards;
}

/* Pasos */
.fluent-paso {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 2;
  text-align: center;
  animation: fadeInUp 1.5s ease forwards;
}

.fluent-paso:hover {
  transform: translateY(-10px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15);
}

.fluent-icono {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  transition: transform 0.3s ease;
}

.fluent-paso:hover .fluent-icono {
  transform: scale(1.1);
}

/* Gradientes por paso */
.paso1-icono {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
}

.paso2-icono {
  background: linear-gradient(135deg, #ff6f00, #ffc107);
}

.paso3-icono {
  background: linear-gradient(135deg, #00c853, #64dd17);
}

.fluent-icono i {
  font-size: 2.5rem;
}

.fluent-card-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #222;
  margin-top: 1rem;
}

.fluent-card-text {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
  margin-top: 0.5rem;
}

/* Animaciones */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsivo */
@media (max-width: 768px) {
  .fluent-proceso-titulo {
    font-size: 2.2rem;
  }

  .fluent-proceso-subtitulo {
    font-size: 1.05rem;
  }

  .fluent-card-title {
    font-size: 1.3rem;
  }

  .fluent-icono {
    width: 64px;
    height: 64px;
    font-size: 1.8rem;
  }

  .fluent-icono i {
    font-size: 2rem;
  }
}



/* Sección "Elige cómo contratar" - Fluent Design */
.iLink-contratar-section {
  background: linear-gradient(135deg, #f5f9ff, #ffffff);
  backdrop-filter: blur(10px);
  padding: 6rem 2rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.iLink-contratar-section::before,
.iLink-contratar-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 0;
}

.iLink-contratar-section::before {
  width: 300px;
  height: 300px;
  background: rgba(0, 120, 212, 0.15);
  top: -60px;
  left: 5%;
}

.iLink-contratar-section::after {
  width: 250px;
  height: 250px;
  background: rgba(0, 120, 212, 0.1);
  bottom: -60px;
  right: 10%;
}

.iLink-contratar-titulo {
  font-size: 2.6rem;
  font-weight: 800;
  color: #0b2b66;
  text-align: center;
  margin-bottom: 0.5rem;
  animation: fadeInUp 1s ease forwards;
}

.iLink-contratar-subtitulo {
  font-size: 1.2rem;
  color: #4a4a4a;
  text-align: center;
  margin-bottom: 3rem;
  animation: fadeInUp 1.3s ease forwards;
}

.iLink-contratar-card {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  animation: fadeInUp 1.4s ease forwards;
}

.iLink-contratar-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.iLink-icon-container {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  transition: transform 0.3s ease;
}

/* Gradientes personalizados */
.iLink-whatsapp-icon {
  background: linear-gradient(135deg, #25d366, #00c851);
}

.iLink-online-icon {
  background: linear-gradient(135deg, #0078d4, #005fa3);
}

.iLink-phone-icon {
  background: linear-gradient(135deg, #ffa726, #fb8c00);
  animation: pulseIcon 1.6s infinite ease-in-out;
}

.iLink-form-icon {
  background: linear-gradient(135deg, #9c27b0, #673ab7);
}

.iLink-contratar-card:hover .iLink-icon-container {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

@keyframes pulseIcon {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.iLink-card-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  color: #1b2631;
}

.iLink-card-text {
  font-size: 1rem;
  color: #4f5b66;
  line-height: 1.6;
  margin-bottom: 1.4rem;
}

.iLink-btn {
  background: linear-gradient(135deg, #0078d4, #005fa3);
  color: #fff;
  padding: 0.75rem 2rem;
  border-radius: 2rem;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.iLink-btn:hover {
  background: linear-gradient(135deg, #005fa3, #004a87);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  color: #F0F4F8;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .iLink-contratar-titulo {
    font-size: 2.2rem;
  }

  .iLink-contratar-subtitulo {
    font-size: 1.05rem;
  }

  .iLink-btn {
    font-size: 0.95rem;
    padding: 0.6rem 1.6rem;
  }

  .iLink-icon-container {
    width: 64px;
    height: 64px;
    font-size: 1.8rem;
  }

  .iLink-card-title {
    font-size: 1.25rem;
  }

  .iLink-card-text {
    font-size: 0.95rem;
  }
}



/* Sección "Beneficios de Nuestro Servicio" - Fluent Design */
.iLink-beneficio-section {
  background: linear-gradient(135deg, rgba(250, 250, 255, 0.9), rgba(240, 245, 255, 0.9));
  backdrop-filter: blur(10px);
  padding: 6rem 2rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.iLink-beneficio-section::before,
.iLink-beneficio-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 0;
}

.iLink-beneficio-section::before {
  width: 280px;
  height: 280px;
  top: -60px;
  left: 10%;
  background: rgba(0, 120, 212, 0.1);
}

.iLink-beneficio-section::after {
  width: 240px;
  height: 240px;
  bottom: -60px;
  right: 8%;
  background: rgba(0, 120, 212, 0.08);
}

/* Título */
.iLink-beneficio-titulo {
  font-size: 2.8rem;
  font-weight: 800;
  color: #0b2b66;
  text-align: center;
  margin-bottom: 1rem;
  animation: fadeInUp 1s ease-in-out forwards;
}

.iLink-beneficio-descripcion {
  font-size: 1.2rem;
  color: #4a4a4a;
  text-align: center;
  margin-bottom: 3rem;
  animation: fadeInUp 1.2s ease-in-out forwards;
}

/* Tarjetas */
.iLink-beneficio-card {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 2rem;
  text-align: center;
  position: relative;
  z-index: 2;
  animation: fadeInUp 1.4s ease-in-out forwards;
}

.iLink-beneficio-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.1);
}

.iLink-icon-container {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: #fff;
  transition: transform 0.3s ease;
}

.iLink-beneficio-card:hover .iLink-icon-container {
  transform: scale(1.1);
}

/* Iconos con degradado */
.iLink-wifi-icon {
  background: linear-gradient(135deg, #007aff, #5856d6);
}

.iLink-security-icon {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
}

.iLink-support-icon {
  background: linear-gradient(135deg, #ff9800, #ef6c00);
}

.iLink-speed-icon {
  background: linear-gradient(135deg, #f44336, #c62828);
}

.iLink-plans-icon {
  background: linear-gradient(135deg, #673ab7, #4527a0);
}

.iLink-app-icon {
  background: linear-gradient(135deg, #00bcd4, #0097a7);
}

/* Título de tarjeta */
.iLink-card-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0d47a1;
  margin-bottom: 0.8rem;
}

/* Texto de tarjeta */
.iLink-card-text {
  font-size: 1rem;
  color: #4a4a4a;
  line-height: 1.6;
}

/* Animación de entrada */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsivo */
@media (max-width: 768px) {
  .iLink-beneficio-titulo {
    font-size: 2.2rem;
  }

  .iLink-beneficio-descripcion {
    font-size: 1.05rem;
  }

  .iLink-card-title {
    font-size: 1.2rem;
  }

  .iLink-card-text {
    font-size: 0.95rem;
  }

  .iLink-icon-container {
    width: 64px;
    height: 64px;
    font-size: 2rem;
  }
}











.fluent-whatsapp-contact-section {
  background: linear-gradient(135deg, #f0f4f8, #ffffff);
  padding: 6rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.fluent-whatsapp-contact-section::before,
.fluent-whatsapp-contact-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  filter: blur(100px);
}

.fluent-whatsapp-contact-section::before {
  width: 280px;
  height: 280px;
  background: rgba(0, 150, 80, 0.1);
  top: -60px;
  left: 8%;
}

.fluent-whatsapp-contact-section::after {
  width: 240px;
  height: 240px;
  background: rgba(0, 150, 80, 0.08);
  bottom: -60px;
  right: 10%;
}

.fluent-whatsapp-container {
  max-width: 780px;
  margin: auto;
  position: relative;
  z-index: 2;
}

.fluent-whatsapp-icon img {
  width: 72px;
  margin-bottom: 1.2rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
  animation: float 3s ease-in-out infinite;
}

.fluent-whatsapp-title {
  font-size: 2.8rem;
  color: #0b2b66;
  font-weight: 800;
  margin-bottom: 1rem;
  animation: fadeInUp 1s ease forwards;
}

.fluent-whatsapp-subtitle {
  font-size: 1.3rem;
  color: #4a4a4a;
  margin-bottom: 2rem;
  line-height: 1.6;
  animation: fadeInUp 1.3s ease forwards;
}

/* Botón */
.fluent-whatsapp-btn {
  background: linear-gradient(135deg, #25d366, #00c851);
  color: #fff;
  font-size: 1.25rem;
  padding: 0.9rem 2.5rem;
  border-radius: 50px;
  box-shadow: 0 8px 18px rgba(0, 150, 80, 0.25);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  animation: fadeInUp 1.6s ease forwards;
}

.fluent-whatsapp-btn:hover {
  background: linear-gradient(135deg, #1ebe57, #00b94e);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 150, 80, 0.4);
  color: #F0F4F8;
}

.fluent-whatsapp-btn:active {
  transform: scale(0.98);
}

.fluent-whatsapp-btn i {
  font-size: 1.6rem;
}

/* Animaciones */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Responsive */
@media (max-width: 768px) {
  .fluent-whatsapp-title {
    font-size: 2.2rem;
  }

  .fluent-whatsapp-subtitle {
    font-size: 1.1rem;
  }

  .fluent-whatsapp-btn {
    font-size: 1.1rem;
    padding: 0.75rem 2rem;
  }

  .fluent-whatsapp-icon img {
    width: 60px;
  }
}







/* COMO CONTRATAR */
/* COMO CONTRATAR */
/* COMO CONTRATAR */

/*AYUDA Y SOPORTE*/
/*AYUDA Y SOPORTE*/
/*AYUDA Y SOPORTE*/


/* Hero Section */
/* Sección de Soporte - Fluent Design */
/* SECCIÓN HERO ESTILO FLUENT DESIGN */
.soporte-header {
  width: 100%;
  padding: 5rem 2rem 4rem;
  background: linear-gradient(135deg, #132c48, #005792);
  color: #ffffff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-top: 80px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.soporte-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.soporte-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.soporte-title span {
  background: linear-gradient(90deg, #00ffe5, #00b2ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.soporte-subtitle {
  font-size: 1.2rem;
  color: #e2eaf5;
  max-width: 800px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
  font-weight: 400;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.soporte-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #00b2ff, #00ffe5);
  margin: 0 auto 3rem;
  border-radius: 4px;
}

.soporte-icons {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.soporte-icon-item {
  background: rgba(255, 255, 255, 0.06);
  padding: 1rem 1.2rem;
  border-radius: 1rem;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 140px;
  max-width: 180px;
}

.soporte-icon-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.soporte-icon-item img {
  width: 52px;
  height: 52px;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
  transition: transform 0.3s ease;
}

.soporte-icon-item:hover img {
  transform: scale(1.1);
}

.soporte-icon-item span {
  font-size: 1.05rem;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .soporte-title {
    font-size: 2.4rem;
  }

  .soporte-subtitle {
    font-size: 1.05rem;
  }

  .soporte-icon-item {
    flex: 1 1 45%;
  }
}

@media (max-width: 480px) {
  .soporte-title {
    font-size: 2rem;
  }

  .soporte-subtitle {
    font-size: 0.95rem;
  }

  .soporte-icon-item {
    flex: 1 1 100%;
  }

  .soporte-icon-item img {
    width: 44px;
    height: 44px;
  }

  .soporte-icon-item span {
    font-size: 1rem;
  }
}



/* Sección de FAQs - Fluent Design */
/* SECCIÓN FAQs ESTILO FLUENT DESIGN */
.iLink-faqs-section {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.9), rgba(219, 229, 255, 0.85));
  padding: 80px 20px;
  border-radius: 0 0 32px 32px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

/* TÍTULO */
.iLink-faqs-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin-bottom: 40px;
  text-align: center;
}

/* ESTILO DE LOS ÍTEMS DE LAS FAQs */
.iLink-faq-item {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  border-radius: 15px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto Hover en los Ítems */
.iLink-faq-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.75);
}

/* BOTÓN DE PREGUNTAS */
.iLink-btn-faq {
  font-size: 1.2rem;
  font-weight: 600;
  color: #004AAD;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  padding: 18px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.3s ease, background 0.3s ease;
  border-radius: 12px;
}

/* Efecto Hover en el Botón */
.iLink-btn-faq:hover {
  color: #003B7A;
  background: rgba(0, 74, 173, 0.1);
}

/* ÍCONOS DE FLECHA */
.iLink-faq-icon {
  transition: transform 0.3s ease, color 0.3s ease;
  font-size: 1.2rem;
  color: #0078D4;
}

/* Cambio de Dirección de Flecha al Expandir */
.iLink-btn-faq[aria-expanded="true"] .iLink-faq-icon {
  transform: rotate(180deg);
  color: #004AAD;
}

/* CUERPO DE LA FAQ */
.iLink-faq-body {
  padding: 20px 25px;
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0 0 12px 12px;
  backdrop-filter: blur(10px);
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease;
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .iLink-faqs-title {
      font-size: 2.3rem;
  }

  .iLink-btn-faq {
      font-size: 1rem;
      padding: 15px 20px;
  }

  .iLink-faq-icon {
      font-size: 1rem;
  }
}


/* Estilos de la tarjeta */
.tutorial-card {
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 300px;
  margin: 20px auto;
}

.tutorial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Estilos del icono */
.icon-container {
  margin-bottom: 20px;
  justify-content: center;
}

.wifi-icon i, .phone-icon i, .settings-icon i {
  font-size: 3rem;
  animation: icon-bounce 2s infinite;
}

/* Colores de iconos */
.wifi-icon i {
  color: #0078D4;
}

.phone-icon i {
  color: #00C9E0;
}

.settings-icon i {
  color: #00A3E0;
}

/* Animación del icono */
@keyframes icon-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Sección de Guías y Tutoriales - Fluent Design */
/* SECCIÓN DE GUÍAS Y TUTORIALES ESTILO FLUENT DESIGN */
.fluent-guides-section {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.9), rgba(219, 229, 255, 0.8));
  padding: 70px 0;
  border-radius: 16px;
  text-align: center;
}

/* TÍTULO Y SUBTÍTULO */
.fluent-guides-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  margin-bottom: 30px;
}

.fluent-guides-subtitle {
  font-size: 1.3rem;
  color: #5a5a5a;
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* GRID DE TUTORIALES */
.fluent-guides-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 30px;
  justify-content: center;
}

/* TARJETAS */
.fluent-guide-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Hover */
.fluent-guide-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.6);
}

/* ICONOS */
.fluent-guide-icon {
  max-width: 80px;
  transition: transform 0.3s ease;
  margin-bottom: 15px;
}

.fluent-guide-card:hover .fluent-guide-icon {
  transform: scale(1.1);
}

/* TÍTULOS */
.fluent-guide-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #004AAD;
  margin-bottom: 10px;
}

/* DESCRIPCIÓN */
.fluent-guide-description {
  font-size: 1rem;
  color: #5a5a5a;
  margin-bottom: 20px;
}

/* BOTÓN */
.fluent-guide-btn {
  display: inline-block;
  background: linear-gradient(135deg, #004AAD, #003B7A);
  color: white;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.1rem;
  transition: background 0.4s ease, transform 0.3s ease;
  margin-top: 10px;
  text-decoration: none;
}

/* Hover */
.fluent-guide-btn:hover {
  background: linear-gradient(135deg, #003B7A, #002E5C);
  transform: scale(1.08);
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .fluent-guides-title {
      font-size: 2.4rem;
  }

  .fluent-guides-subtitle {
      font-size: 1.2rem;
  }

  .fluent-guides-grid {
      grid-template-columns: 1fr;
  }

  .fluent-guide-btn {
      font-size: 1rem;
      padding: 10px 24px;
  }
}



/* Sección de Soporte Técnico - Fluent Design */
/* SECCIÓN DE SOPORTE ESTILO FLUENT DESIGN */
.fluent-help-section {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.9), rgba(219, 229, 255, 0.8));
  padding: 70px 0;
  border-radius: 16px;
  text-align: center;
}

/* TÍTULO Y SUBTÍTULO */
.fluent-help-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  margin-bottom: 30px;
}

.fluent-help-subtitle {
  font-size: 1.3rem;
  color: #5a5a5a;
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* GRID DE SOPORTE */
.fluent-help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 30px;
  justify-content: center;
}

/* TARJETAS */
.fluent-help-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Hover */
.fluent-help-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.6);
}

/* ICONOS */
.fluent-help-icon {
  max-width: 80px;
  transition: transform 0.3s ease;
  margin-bottom: 15px;
}

.fluent-help-card:hover .fluent-help-icon {
  transform: scale(1.1);
}

/* TÍTULOS */
.fluent-help-card-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #004AAD;
  margin-bottom: 10px;
}

/* DESCRIPCIÓN */
.fluent-help-card-description {
  font-size: 1rem;
  color: #5a5a5a;
  margin-bottom: 20px;
}

/* BOTÓN */
.fluent-help-btn {
  display: inline-block;
  background: linear-gradient(135deg, #004AAD, #003B7A);
  color: white;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.1rem;
  transition: background 0.4s ease, transform 0.3s ease;
  margin-top: 10px;
  text-decoration: none;
}

/* Hover */
.fluent-help-btn:hover {
  background: linear-gradient(135deg, #003B7A, #002E5C);
  transform: scale(1.08);
  color: #F0F4F8;
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .fluent-help-title {
      font-size: 2.4rem;
  }

  .fluent-help-subtitle {
      font-size: 1.2rem;
  }

  .fluent-help-grid {
      grid-template-columns: 1fr;
  }

  .fluent-help-btn {
      font-size: 1rem;
      padding: 10px 24px;
  }
}




/* Sección de Estado del Servicio - Fluent Design */
/* SECCIÓN ESTADO DEL SERVICIO ESTILO FLUENT DESIGN */
/* Sección Estado de Infraestructura - Fluent + Glassmorphism */
.custom-service-status-section {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.7), rgba(220, 230, 255, 0.6));
  padding: 80px 20px;
  text-align: center;
  border-radius: 20px;
  overflow: hidden;
}

.custom-service-status-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Título */
.custom-service-status-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004aad;
  margin-bottom: 50px;
}

/* Grid */
.custom-service-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 30px;
}

/* Tarjetas */
.custom-service-status-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 30px 25px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.custom-service-status-card:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
}

/* Iconos */
.custom-service-status-icon {
  max-width: 80px;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.custom-service-status-card:hover .custom-service-status-icon {
  transform: scale(1.1);
}

/* Títulos de tarjeta */
.custom-service-status-card-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #004aad;
  margin-bottom: 10px;
}

/* Descripción */
.custom-service-status-card-description {
  font-size: 1.05rem;
  color: #555;
  margin-bottom: 15px;
  line-height: 1.5;
}

/* Indicadores de estado */
.custom-service-status-indicator {
  padding: 5px 14px;
  font-size: 0.9rem;
  font-weight: bold;
  border-radius: 50px;
  display: inline-block;
  margin-top: 10px;
  color: white;
  transition: background 0.3s ease;
}

/* Estados específicos */
.custom-service-status-indicator.active {
  background: #28a745; /* verde */
}

.custom-service-status-indicator.scheduled {
  background: #ff9800; /* naranja programado */
}

.custom-service-status-indicator.issue {
  background: #ff5252; /* rojo para problemas */
}

/* Responsive */
@media (max-width: 768px) {
  .custom-service-status-title {
    font-size: 2.3rem;
  }

  .custom-service-status-grid {
    grid-template-columns: 1fr;
  }
}





/*AYUDA Y SOPORTE*/
/*AYUDA Y SOPORTE*/
/*AYUDA Y SOPORTE*/

/*PRODUCTOS*/
/*PRODUCTOS*/
/*PRODUCTOS*/

/* Estilos generales */
/* Sección Hero - Fluent Design */
/* SECCIÓN HERO */
.productos-header {
  width: 100%;
  padding: 5rem 2rem 4rem;
  background: linear-gradient(135deg, #000d2f, #0055a4);
  color: #ffffff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-top: 80px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.productos-header-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.productos-header-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.productos-header-title span {
  background: linear-gradient(90deg, #00d2ff, #1cefff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.productos-header-subtitle {
  font-size: 1.25rem;
  color: #e0e0e0;
  max-width: 820px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
  font-weight: 400;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.productos-header-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #00f0ff, #0bc9e3);
  margin: 0 auto 3rem;
  border-radius: 4px;
}

.productos-header-benefits {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.productos-benefit-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 1.2rem 1.5rem;
  border-radius: 1rem;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-width: 160px;
  max-width: 200px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.productos-benefit-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.benefit-icon img {
  width: 56px;
  height: 56px;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.15));
  transition: transform 0.3s ease;
}

.productos-benefit-item:hover .benefit-icon img {
  transform: scale(1.1);
}

.benefit-label {
  font-size: 1.05rem;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
  .productos-header-title {
    font-size: 2.4rem;
  }

  .productos-header-subtitle {
    font-size: 1.1rem;
  }

  .productos-benefit-item {
    flex: 1 1 45%;
  }
}

@media (max-width: 480px) {
  .productos-header-title {
    font-size: 2rem;
  }

  .productos-header-subtitle {
    font-size: 1rem;
  }

  .productos-benefit-item {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .benefit-icon img {
    width: 48px;
    height: 48px;
  }
}






/* SECCIÓN CATÁLOGO */
.catalogo-productos-section {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.9), rgba(219, 229, 255, 0.8));
  padding: 70px 20px;
  border-radius: 16px;
  text-align: center;
}

/* TÍTULO */
.catalogo-productos-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  margin-bottom: 30px;
}

/* CATEGORÍAS */
.catalogo-productos-categorias {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.catalogo-btn {
  background: linear-gradient(135deg, #004AAD, #0078D4);
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.3);
}

.catalogo-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 95, 163, 0.4);
}

.catalogo-btn.active {
  background: linear-gradient(135deg, #00C853, #00E676);
  box-shadow: 0 6px 16px rgba(0, 200, 83, 0.4);
}

/* TARJETAS DE PRODUCTOS */
.producto-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  text-align: center;
}

.producto-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

/* IMAGEN DEL PRODUCTO */
.producto-imagen {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-bottom: 4px solid #004AAD;
}

/* INFORMACIÓN DEL PRODUCTO */
.producto-info {
  padding: 1rem;
}

.producto-nombre {
  font-size: 1.4rem;
  color: #004AAD;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.producto-precio {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 1rem;
}

/* BOTÓN */
.producto-btn {
  background: linear-gradient(135deg, #004AAD, #0078D4);
  color: white;
  padding: 8px 20px;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.3);
  transition: transform 0.3s ease;
  text-decoration: none;
}

.producto-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 95, 163, 0.4);
  color: #F5F5F5;
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .catalogo-productos-title {
      font-size: 2.4rem;
  }

  .catalogo-btn {
      font-size: 1rem;
      padding: 8px 16px;
  }

  .producto-card {
      padding: 15px;
  }
}












/* SECCIÓN DE BENEFICIOS */
.fluent-product-benefits {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.9), rgba(219, 229, 255, 0.8));
  padding: 70px 20px;
  border-radius: 16px;
  text-align: center;
}

/* TÍTULO Y SUBTÍTULO */
.fluent-benefits-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  margin-bottom: 30px;
}

.fluent-benefits-subtitle {
  font-size: 1.3rem;
  color: #5a5a5a;
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* GRID DE BENEFICIOS */
.fluent-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(250px, 1fr));
  gap: 30px;
  justify-content: center;
}

/* TARJETAS */
.fluent-benefits-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Hover */
.fluent-benefits-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.6);
}

/* ICONOS */
.fluent-benefits-icon {
  max-width: 80px;
  transition: transform 0.3s ease;
  margin-bottom: 15px;
}

.fluent-benefits-card:hover .fluent-benefits-icon {
  transform: scale(1.1);
}

/* TÍTULOS */
.fluent-benefits-card-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #004AAD;
  margin-bottom: 10px;
}

/* DESCRIPCIÓN */
.fluent-benefits-card-description {
  font-size: 1rem;
  color: #5a5a5a;
  margin-bottom: 20px;
}

/* RESPONSIVIDAD */
@media (max-width: 992px) {
  .fluent-benefits-grid {
      grid-template-columns: repeat(2, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .fluent-benefits-title {
      font-size: 2.4rem;
  }

  .fluent-benefits-subtitle {
      font-size: 1.2rem;
  }

  .fluent-benefits-grid {
      grid-template-columns: 1fr;
  }
}



/*PRODUCTOS*/
/*PRODUCTOS*/
/*PRODUCTOS*/


/*AVISO*/
/*AVISO*/
/*AVISO*/

/* Encabezado mejorado del aviso de privacidad */
/* SECCIÓN HERO PARA AVISO DE PRIVACIDAD */
.privacy-header {
  width: 100%;
  padding: 5rem 2rem 4rem;
  background: linear-gradient(135deg, #1e2a78, #3e3aa1);
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  z-index: 1;
  margin-top: 80px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.privacy-header-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.privacy-header-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -0.5px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.privacy-header-title span {
  background: linear-gradient(90deg, #00e0ff, #6f88fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.privacy-header-subtitle {
  font-size: 1.2rem;
  font-weight: 400;
  color: #e0e0e0;
  max-width: 800px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.privacy-header-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #00d2ff, #3a47d5);
  margin: 0 auto 3rem;
  border-radius: 4px;
}

.privacy-header-benefits {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.privacy-benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 1.2rem 1.5rem;
  border-radius: 1rem;
  backdrop-filter: blur(6px);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-width: 150px;
  max-width: 200px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.privacy-benefit-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.benefit-icon img {
  width: 52px;
  height: 52px;
  margin-bottom: 0.6rem;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.1));
}

.privacy-benefit-item:hover .benefit-icon img {
  transform: scale(1.1);
}

.benefit-label {
  font-size: 1.05rem;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .privacy-header-title {
    font-size: 2.5rem;
  }

  .privacy-header-subtitle {
    font-size: 1.1rem;
  }

  .privacy-header-benefits {
    gap: 1.5rem;
  }

  .privacy-benefit-item {
    flex: 1 1 45%;
  }
}

@media (max-width: 480px) {
  .privacy-header-title {
    font-size: 2rem;
  }

  .privacy-header-subtitle {
    font-size: 1rem;
  }

  .privacy-benefit-item {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .benefit-icon img {
    width: 48px;
    height: 48px;
  }

  .benefit-label {
    font-size: 1rem;
  }
}







/* Estilos para la sección del Aviso de Privacidad */
.privacy-policy-section {
  background-color: #f9fbfd;
  padding: 60px 0;
}

.privacy-policy-title {
  font-size: 2.8rem;
  color: #333333;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.privacy-policy-intro {
  font-size: 1.3rem;
  color: #666666;
  margin-bottom: 3rem;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

.privacy-policy-content {
  background-color: #ffffff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  font-size: 1rem;
  color: #333;
}

.privacy-policy-content h4 {
  font-size: 1.5rem;
  color: #0078D4;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.privacy-policy-content p {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* Responsividad */
@media (max-width: 768px) {
  .privacy-policy-title {
      font-size: 2.2rem;
  }

  .privacy-policy-intro {
      font-size: 1.1rem;
  }

  .privacy-policy-content {
      padding: 20px;
  }

  .privacy-policy-content h4 {
      font-size: 1.3rem;
  }

  .privacy-policy-content p {
      font-size: 0.9rem;
  }
}

/*AVISO*/
/*AVISO*/
/*AVISO*/

/*LEGAL*/
/*LEGAL*/
/*LEGAL*/
/* Sección principal */
/* ENCABEZADO LEGAL */
.legal-header {
  width: 100%;
  padding: 5rem 2rem 4rem;
  background: linear-gradient(135deg, #002347, #3d4b85);
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  z-index: 1;
  margin-top: 80px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.legal-header-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.legal-header-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -0.5px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.legal-header-title span {
  background: linear-gradient(90deg, #00c0ff, #6e8dfc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.legal-header-subtitle {
  font-size: 1.2rem;
  font-weight: 400;
  color: #e0e0e0;
  max-width: 800px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.legal-header-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #00d2ff, #3a47d5);
  margin: 0 auto 3rem;
  border-radius: 4px;
}

.legal-header-benefits {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.legal-benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 1.2rem 1.5rem;
  border-radius: 1rem;
  backdrop-filter: blur(6px);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-width: 150px;
  max-width: 200px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.legal-benefit-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.benefit-icon img {
  width: 52px;
  height: 52px;
  margin-bottom: 0.6rem;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.1));
}

.legal-benefit-item:hover .benefit-icon img {
  transform: scale(1.1);
}

.benefit-label {
  font-size: 1.05rem;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .legal-header-title {
    font-size: 2.5rem;
  }

  .legal-header-subtitle {
    font-size: 1.1rem;
  }

  .legal-header-benefits {
    gap: 1.5rem;
  }

  .legal-benefit-item {
    flex: 1 1 45%;
  }
}

@media (max-width: 480px) {
  .legal-header-title {
    font-size: 2rem;
  }

  .legal-header-subtitle {
    font-size: 1rem;
  }

  .legal-benefit-item {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .benefit-icon img {
    width: 48px;
    height: 48px;
  }

  .benefit-label {
    font-size: 1rem;
  }
}









/* Sección de colaboración mejorada */
/* SECCIÓN DE ALIANZAS */
.fluent-partnership-section {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.95), rgba(219, 229, 255, 0.9));
  padding: 70px 20px;
  border-radius: 16px;
  text-align: center;
}

/* TÍTULO Y SUBTÍTULO */
.fluent-partnership-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  margin-bottom: 20px;
}

.fluent-partnership-subtitle {
  font-size: 1.3rem;
  color: #5a5a5a;
  margin-bottom: 40px;
  max-width: 800px;
  margin: 0 auto;
}

/* CONTENEDOR DE LOGOS */
.fluent-partnership-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

/* TARJETAS DE LOGOS */
.fluent-partner-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  width: 280px;
}

.fluent-partner-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

/* LOGOS */
.fluent-partner-logo {
  width: 80%;
  max-width: 250px;
  transition: transform 0.3s ease;
}

/* ANIMACIÓN AL PASAR EL CURSOR */
.fluent-partner-card:hover .fluent-partner-logo {
  transform: scale(1.1);
}

/* SEPARADOR ANIMADO ENTRE LOGOS */
.fluent-partner-divider {
  width: 60px;
  height: 6px;
  background: linear-gradient(90deg, #004AAD, #0078D4);
  border-radius: 10px;
  animation: wave 2s infinite alternate ease-in-out;
}

/* BOTÓN */
.fluent-partner-btn-wrapper {
  margin-top: 40px;
}

.fluent-partner-btn {
  display: inline-block;
  background: linear-gradient(135deg, #004AAD, #003B7A);
  color: white;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  transition: background 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 12px rgba(0, 120, 212, 0.3);
}

/* EFECTO HOVER DEL BOTÓN */
.fluent-partner-btn:hover {
  background: linear-gradient(135deg, #003B7A, #002E5C);
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(0, 120, 212, 0.4);
  color: #F0F4F8;
}

/* ANIMACIÓN DE SEPARADOR */
@keyframes wave {
  0% {
      transform: scaleX(1);
  }
  100% {
      transform: scaleX(1.5);
  }
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .fluent-partnership-title {
      font-size: 2.4rem;
  }

  .fluent-partnership-subtitle {
      font-size: 1.2rem;
  }

  .fluent-partnership-logos {
      flex-direction: column;
      gap: 30px;
  }

  .fluent-partner-card {
      width: 90%;
      max-width: 300px;
  }

  .fluent-partner-btn {
      font-size: 1rem;
      padding: 10px 24px;
  }
}







/* Estilos Generales de la Sección Legal */
/* SECCIÓN INFORMACIÓN LEGAL */
.fluent-legal-section {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.95), rgba(219, 229, 255, 0.9));
  padding: 70px 20px;
  border-radius: 16px;
  text-align: center;
}

/* TÍTULO Y SUBTÍTULO */
.fluent-legal-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  margin-bottom: 20px;
}

.fluent-legal-subtitle {
  font-size: 1.3rem;
  color: #5a5a5a;
  margin-bottom: 40px;
  max-width: 800px;
  margin: 0 auto;
}

/* ESTILO DE LAS TARJETAS */
.fluent-legal-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 20px;
}

/* HEADER DE LA TARJETA */
.fluent-legal-header {
  padding: 15px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 16px 16px 0 0;
  text-align: center;
}

/* BOTÓN DEL ACORDEÓN */
.fluent-legal-btn {
  width: 100%;
  font-size: 1.2rem;
  color: #004AAD;
  font-weight: 600;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  gap: 10px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.fluent-legal-btn img {
  width: 24px;
  height: 24px;
}

.fluent-legal-btn:hover {
  background: rgba(0, 120, 212, 0.1);
  text-decoration: none;
  transform: scale(1.02);
}

/* CONTENIDO DEL ACORDEÓN */
.fluent-legal-body {
  padding: 20px;
}

/* SUBTÍTULOS DEL CONTENIDO */
.fluent-legal-item h6 {
  font-size: 1.2rem;
  color: #004AAD;
  font-weight: bold;
  margin-bottom: 8px;
}

/* TEXTO DEL CONTENIDO */
.fluent-legal-item p {
  font-size: 1rem;
  color: #5a5a5a;
  line-height: 1.6;
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .fluent-legal-title {
      font-size: 2.4rem;
  }

  .fluent-legal-subtitle {
      font-size: 1.2rem;
  }

  .fluent-legal-btn {
      font-size: 1.1rem;
  }

  .fluent-legal-item h6 {
      font-size: 1.1rem;
  }

  .fluent-legal-item p {
      font-size: 0.95rem;
  }
}








/* Sección de Cumplimiento Normativo */
/* SECCIÓN CUMPLIMIENTO NORMATIVO */
.fluent-compliance-section {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.95), rgba(219, 229, 255, 0.9));
  padding: 70px 20px;
  border-radius: 16px;
  text-align: center;
}

/* TÍTULO Y SUBTÍTULO */
.fluent-compliance-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  margin-bottom: 20px;
}

.fluent-compliance-subtitle {
  font-size: 1.3rem;
  color: #5a5a5a;
  margin-bottom: 40px;
  max-width: 800px;
  margin: 0 auto;
}

/* CONTENEDOR DE TARJETAS */
.fluent-compliance-card-link {
  text-decoration: none;
}

/* TARJETAS */
.fluent-compliance-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.fluent-compliance-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

/* ICONOS */
.fluent-compliance-card img {
  width: 64px;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.fluent-compliance-card:hover img {
  transform: scale(1.1);
}

/* TÍTULOS Y TEXTOS */
.fluent-compliance-card h4 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #004AAD;
  margin-bottom: 10px;
}

.fluent-compliance-card p {
  font-size: 1rem;
  color: #5a5a5a;
  margin-bottom: 20px;
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .fluent-compliance-title {
      font-size: 2.4rem;
  }

  .fluent-compliance-subtitle {
      font-size: 1.2rem;
  }

  .fluent-compliance-card {
      width: 100%;
  }
}









/* SECCIÓN RESPONSABILIDAD EN LA CONTINUIDAD DEL SERVICIO */
.fluent-continuity-section {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.95), rgba(219, 229, 255, 0.9));
  padding: 70px 20px;
  border-radius: 16px;
  text-align: center;
}

/* TÍTULO Y SUBTÍTULO */
.fluent-continuity-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  margin-bottom: 20px;
}

.fluent-continuity-subtitle {
  font-size: 1.3rem;
  color: #5a5a5a;
  margin-bottom: 40px;
  max-width: 800px;
  margin: 0 auto;
}

/* GRID DE RESPONSABILIDADES */
.fluent-continuity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 30px;
  justify-content: center;
}

/* TARJETAS */
.fluent-continuity-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* HOVER */
.fluent-continuity-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.8);
}

/* ICONOS */
.fluent-continuity-card img {
  width: 80px;
  transition: transform 0.3s ease;
  margin-bottom: 15px;
}

.fluent-continuity-card:hover img {
  transform: scale(1.1);
}

/* TÍTULOS Y TEXTOS */
.fluent-continuity-card h4 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #004AAD;
  margin-bottom: 10px;
}

.fluent-continuity-card p {
  font-size: 1rem;
  color: #5a5a5a;
  margin-bottom: 20px;
}

/* NOTA Y BOTÓN DE SOPORTE */
.fluent-continuity-disclaimer {
  margin-top: 40px;
}

.fluent-continuity-disclaimer p {
  font-size: 1.1rem;
  color: #444;
}

.fluent-continuity-btn {
  display: inline-block;
  background: linear-gradient(135deg, #004AAD, #003B7A);
  color: white;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  transition: background 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 12px rgba(0, 120, 212, 0.3);
  margin-top: 10px;
}

.fluent-continuity-btn:hover {
  background: linear-gradient(135deg, #003B7A, #002E5C);
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(0, 120, 212, 0.4);
  color: #F0F4F8;
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .fluent-continuity-title {
      font-size: 2.4rem;
  }

  .fluent-continuity-subtitle {
      font-size: 1.2rem;
  }

  .fluent-continuity-grid {
      grid-template-columns: 1fr;
  }

  .fluent-continuity-btn {
      font-size: 1rem;
      padding: 10px 24px;
  }
}









/* SECCIÓN DE REPORTES DE ABUSO Y SEGURIDAD */
.fluent-abuse-report-section {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.95), rgba(219, 229, 255, 0.9));
  padding: 70px 20px;
  border-radius: 16px;
  text-align: center;
}

/* TÍTULO Y SUBTÍTULO */
.fluent-abuse-report-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  margin-bottom: 20px;
}

.fluent-abuse-report-subtitle {
  font-size: 1.3rem;
  color: #5a5a5a;
  margin-bottom: 40px;
  max-width: 800px;
  margin: 0 auto;
}

/* GRID DE REPORTES */
.fluent-abuse-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 30px;
  justify-content: center;
}

/* TARJETAS */
.fluent-abuse-report-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* HOVER */
.fluent-abuse-report-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.8);
}

/* ICONOS */
.fluent-abuse-report-card img {
  width: 80px;
  transition: transform 0.3s ease;
  margin-bottom: 15px;
}

.fluent-abuse-report-card:hover img {
  transform: scale(1.1);
}

/* TÍTULOS Y TEXTOS */
.fluent-abuse-report-card h4 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #004AAD;
  margin-bottom: 10px;
}

.fluent-abuse-report-card p {
  font-size: 1rem;
  color: #5a5a5a;
  margin-bottom: 20px;
}

/* NOTA Y BOTÓN DE REPORTE */
.fluent-abuse-report-disclaimer {
  margin-top: 40px;
}

.fluent-abuse-report-disclaimer p {
  font-size: 1.1rem;
  color: #444;
}

.fluent-abuse-report-btn {
  display: inline-block;
  background: linear-gradient(135deg, #004AAD, #003B7A);
  color: white;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  transition: background 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 12px rgba(0, 120, 212, 0.3);
  margin-top: 10px;
}

/* EFECTO HOVER DEL BOTÓN */
.fluent-abuse-report-btn:hover {
  background: linear-gradient(135deg, #003B7A, #002E5C);
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(0, 120, 212, 0.4);
  color: #F0F4F8;
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .fluent-abuse-report-title {
      font-size: 2.4rem;
  }

  .fluent-abuse-report-subtitle {
      font-size: 1.2rem;
  }

  .fluent-abuse-report-grid {
      grid-template-columns: 1fr;
  }

  .fluent-abuse-report-btn {
      font-size: 1rem;
      padding: 10px 24px;
  }
}







/* Estilos para la notificación */
.notification {
  position: fixed;
    top: 80px; /* Ajusta según la altura de la barra de navegación */
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 1rem;
    color: #fff;
    background-color: #28a745; /* Verde para éxito por defecto */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1050;
    width: auto;
    max-width: 90%;
    opacity: 1;

    transition: opacity 0.3s ease, transform 0.3s ease;
}

.notification.hidden {
  opacity: 0;
  visibility: hidden;
}

.notification.success {
  background-color: #28a745; /* Verde para éxito */
}

.notification.error {
  background-color: #dc3545; /* Rojo para error */
}


/*LEGAL*/
/*LEGAL*/
/*LEGAL*/


/*NOTIFICACION*/
/*NOTIFICACION*/
/*NOTIFICACION*/

.noti-popup {
  position: fixed;
  bottom: 100px;
  left: 20px;
  max-width: 360px;
  width: 90%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 1.75rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  padding: 2rem 1.5rem;
  z-index: 9999;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.noti-popup.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.noti-popup.hide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
}

.noti-header img {
  width: 68px;
  height: 68px;
  margin-bottom: 1rem;
  animation: pulseIcon 2s infinite ease-in-out;
}

@keyframes pulseIcon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.noti-body h3 {
  font-size: 1.4rem;
  color: #0b2a57;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.noti-body p {
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.noti-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0055ff, #00c6ff);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 6px 18px rgba(0, 85, 255, 0.2);
  text-decoration: none;
  transition: all 0.3s ease;
}

.noti-btn i {
  margin-right: 0.5rem;
}

.noti-btn:hover {
  background: linear-gradient(135deg, #003ecc, #00a1d8);
  transform: translateY(-2px);
  color: #F0F4F8;
}

.noti-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: #999;
  cursor: pointer;
}

.noti-close:hover {
  color: #111;
}

.noti-float-btn {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 9999;
  cursor: pointer;
}

.noti-float-icon {
  position: relative;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  padding: 0.7rem;
  transition: transform 0.3s ease;
}

.noti-float-icon:hover {
  transform: scale(1.05);
}

.noti-float-icon img {
  width: 32px;
  height: 32px;
}

/* Ping mejorado */
.noti-ping {
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background: #ff4d4f;
  border-radius: 50%;
  animation: notiPingAnim 2.2s ease-out infinite;
  z-index: 2;
  box-shadow: 0 0 0 rgba(255, 77, 79, 0.4);
  display: none;
}

@keyframes notiPingAnim {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.6);
    opacity: 1;
  }
  50% {
    transform: scale(1.7);
    box-shadow: 0 0 0 8px rgba(255, 77, 79, 0);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 77, 79, 0);
    opacity: 0;
  }
}

#notiPing {
  display: none;
}

/* Responsive */
@media (max-width: 480px) {
  .noti-popup {
    left: 10px;
    right: 10px;
    bottom: 80px;
    max-width: 100%;
    padding: 1.25rem;
  }

  .noti-btn {
    font-size: 0.95rem;
    padding: 0.6rem 1.1rem;
  }

  .noti-float-icon img {
    width: 34px;
    height: 34px;
  }
}













/*NOTIFICACION*/
/*NOTIFICACION*/
/*NOTIFICACION*/


/*AMPLIAR COBERTURA*/
/*AMPLIAR COBERTURA**/
/*AMPLIAR COBERTURA**/
.expand-modal-content {
  background: linear-gradient(135deg, #fefefe, #f3f7ff);
  padding: 3rem 2rem;
  border-radius: 2rem;
  max-width: 600px;
  width: 100%;
  margin: 5vh auto;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  position: relative;
}

.expand-modal-close-btn {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 2rem;
  color: #888;
  cursor: pointer;
  transition: color 0.3s ease;
}
.expand-modal-close-btn:hover {
  color: #000;
}

.expand-form-title {
  font-size: 2.2rem;
  color: #0d47a1;
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.5rem;
}

.expand-form-subtitle {
  text-align: center;
  color: #555;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

/* Pasos */
.expand-form-step {
  display: none;
  margin-bottom: 1.5rem;
}
.expand-form-step.active {
  display: block;
  animation: expandFadeIn 0.4s ease;
}

.expand-options {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 1rem;
}
.expand-option-btn {
  padding: 0.7rem 1.6rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 2rem;
  border: none;
  background: #0d47a1;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}
.expand-option-btn:hover {
  background: #1565c0;
}

/* Inputs */
.expand-input {
  width: 100%;
  padding: 0.9rem 1.2rem;
  font-size: 1rem;
  border: 2px solid #cbd5e0;
  border-radius: 1rem;
  background-color: #f9fbff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

.expand-input:focus {
  border-color: #0d47a1;
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.15);
}

/* Botón de Envío */
.expand-submit-btn {
  width: 100%;
  padding: 0.95rem;
  background: #28a745;
  color: #fff;
  border: none;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 2rem;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.3s ease;
}
.expand-submit-btn:enabled {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(40, 167, 69, 0.3);
}
.expand-submit-btn:hover:enabled {
  background: #218838;
}

/* Popup */
.expand-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}
.expand-popup-overlay.active {
  display: flex;
}

.expand-popup-content {
  background: #ffffff;
  padding: 2rem 2.5rem;
  border-radius: 1.5rem;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.expand-popup-content h3 {
  font-size: 1.6rem;
  color: #c62828;
  margin-bottom: 0.5rem;
}
.expand-popup-content p {
  font-size: 1rem;
  color: #333;
  margin-bottom: 1.2rem;
}
.expand-popup-close-btn {
  background: #0d47a1;
  color: #fff;
  border: none;
  border-radius: 2rem;
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}
.expand-popup-close-btn:hover {
  background: #1565c0;
}

/* Animación */
@keyframes expandFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}




/* Sección de Introducción */
.expand-coverage-section {
  background: #f4f6f9;
  padding: 50px 20px;
  text-align: center;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.expand-title {
  font-size: 2.5rem;
  color: #0078D4;
  margin-bottom: 10px;
}

.expand-subtitle {
  color: #555;
  margin-bottom: 20px;
}

.expand-open-modal-btn {
  background: linear-gradient(45deg, #00c6ff, #0078d4, #00c6ff);
  color: #fff;
  padding: 15px 35px;
  border-radius: 50px;
  box-shadow: 0 8px 15px rgba(0, 120, 212, 0.4);
  transition: all 0.4s ease;
  font-size: 1.2rem;
  border: none;
  cursor: pointer;
}

.expand-open-modal-btn:hover {
  background-position: 100% 0;
  box-shadow: 0 15px 25px rgba(0, 94, 162, 0.6);
  transform: translateY(-3px);
}

/* Modal */
.expand-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.expand-modal-overlay.active {
  display: flex;
}

.expand-modal-content {
  background: #fff;
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  max-height: 90vh;
  position: relative;
}

.expand-modal-close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 2rem;
  color: #999;
  cursor: pointer;
  transition: color 0.3s;
}

.expand-modal-close-btn:hover {
  color: #333;
}





/*AMPLIAR COBERTURA**/
/*AMPLIAR COBERTURA**/
/*AMPLIAR COBERTURA**/



/*COBERTURA*/
/*COBERTURA*/
/*COBERTURA*/
/* Ajuste para que quede debajo del nav */
.cobertura-section {
  padding: 6rem 2rem;
  background: linear-gradient(135deg, #001533, #004aad);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
}

.cobertura-container {
  max-width: 1200px;
  margin: 0 auto;
}

.cobertura-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}

.cobertura-text {
  flex: 1 1 500px;
  z-index: 2;
}

.cobertura-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: #ffffff;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.cobertura-title span {
  background: linear-gradient(90deg, #00ffd1, #00cfff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cobertura-subtitle {
  font-size: 1.25rem;
  color: #e0e0e0;
  line-height: 1.6;
  max-width: 600px;
  margin-bottom: 2rem;
}

.cobertura-btn {
  display: inline-block;
  padding: 14px 36px;
  font-size: 1.1rem;
  font-weight: 600;
  background: linear-gradient(135deg, #00ffe7, #00bcd4);
  border-radius: 50px;
  color: #001533;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 255, 247, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cobertura-btn:hover {
  background: linear-gradient(135deg, #00bcd4, #00ffe7);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 24px rgba(0, 255, 247, 0.4);
}

.cobertura-animation {
  flex: 1 1 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cobertura-animation svg {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.2));
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .cobertura-row {
    flex-direction: column;
    text-align: center;
  }

  .cobertura-text {
    flex: 1 1 100%;
  }

  .cobertura-title {
    font-size: 2.4rem;
  }

  .cobertura-subtitle {
    font-size: 1.1rem;
  }

  .cobertura-animation {
    margin-top: 2rem;
  }
}

@media (max-width: 480px) {
  .cobertura-title {
    font-size: 2rem;
  }

  .cobertura-subtitle {
    font-size: 1rem;
  }

  .cobertura-btn {
    font-size: 1rem;
    padding: 12px 28px;
  }
}





/* SECCIÓN DE VERIFICACIÓN DE COBERTURA */
.fluent-coverage-check {
  background: linear-gradient(135deg, #f1f6fb, #eaf1ff);
  padding: 6rem 2rem;
  border-radius: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.fluent-coverage-check::before,
.fluent-coverage-check::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 0;
}

.fluent-coverage-check::before {
  width: 260px;
  height: 260px;
  top: -50px;
  left: 10%;
  background: rgba(0, 120, 212, 0.15);
}

.fluent-coverage-check::after {
  width: 220px;
  height: 220px;
  bottom: -60px;
  right: 8%;
  background: rgba(0, 120, 212, 0.1);
}

/* TÍTULOS */
.fluent-coverage-title {
  font-size: 2.6rem;
  font-weight: 800;
  color: #0b2b66;
  margin-bottom: 1rem;
  animation: fadeInUp 1s ease forwards;
}

.fluent-coverage-subtitle {
  font-size: 1.2rem;
  color: #4a4a4a;
  margin-bottom: 2.5rem;
  animation: fadeInUp 1.3s ease forwards;
}

/* FORMULARIO */
.fluent-coverage-form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  z-index: 2;
  position: relative;
}

.fluent-coverage-input-wrapper {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  padding: 0.75rem 1rem;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  width: 300px;
  transition: box-shadow 0.3s ease;
}

.fluent-coverage-input-wrapper:focus-within {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.fluent-coverage-icon {
  width: 32px;
  margin-right: 12px;
}

#fluent-coverage-input {
  padding: 0.6rem;
  font-size: 1.1rem;
  border: none;
  outline: none;
  width: 100%;
  background: transparent;
}

/* BOTÓN */
.fluent-coverage-btn {
  background: linear-gradient(135deg, #004AAD, #003B7A);
  color: #ffffff;
  padding: 0.9rem 2.2rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.1rem;
  transition: background 0.4s ease, transform 0.3s ease;
  border: none;
  cursor: pointer;
  min-width: 250px;
}

.fluent-coverage-btn:hover {
  background: linear-gradient(135deg, #003B7A, #002E5C);
  transform: translateY(-2px) scale(1.05);
}

/* POPUP */
.fluent-coverage-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.95);
  padding: 2rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  text-align: center;
  width: 90%;
  max-width: 380px;
  z-index: 999;
}

/* POPUP ICONO Y MENSAJE */
.fluent-coverage-popup-icon {
  width: 60px;
  margin-bottom: 1rem;
}

#fluent-coverage-message {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 1.2rem;
}

/* CERRAR POPUP (X) */
.fluent-coverage-close-x {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  color: #999;
}

/* POPUP BOTONES */
.fluent-coverage-popup-btn {
  display: inline-block;
  background: linear-gradient(135deg, #004AAD, #003B7A);
  color: white;
  padding: 10px 24px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  margin: 8px 6px;
  text-decoration: none;
}

.fluent-coverage-popup-btn:hover {
  background: linear-gradient(135deg, #003B7A, #002E5C);
  transform: scale(1.08);
}

/* ANIMACIONES */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .fluent-coverage-title {
    font-size: 2.2rem;
  }

  .fluent-coverage-subtitle {
    font-size: 1.05rem;
  }

  .fluent-coverage-btn {
    width: 100%;
  }

  .fluent-coverage-input-wrapper {
    width: 100%;
    max-width: 400px;
  }

  .fluent-coverage-form {
    flex-direction: column;
  }
}






.coverage-selection-section {
  padding: 60px 0;
  background-color: #f9fbfd;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.coverage-selection-title {
  font-size: 2.5rem;
  color: #333333;
  font-weight: 700;
}

.coverage-selection-description {
  font-size: 1.1rem;
  color: #666666;
  margin-bottom: 20px;
}

.coverage-selection-form {
  max-width: 500px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 8px;
}

.custom-select {
  width: 100%;
  font-size: 1rem;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  appearance: none;
  background-color: #ffffff;
}

.custom-select:focus {
  outline: none;
  border-color: #0078D4;
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
}

.coverage-check-button {
  padding: 12px 24px;
  font-size: 1rem;
  color: #ffffff;
  background-color: #0078D4;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.3);
  width: 100%;
}

.coverage-check-button:hover {
  background-color: #005fa3;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 95, 163, 0.4);
}

/* Estilos para el modal de WhatsApp */
.whatsapp-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  width: 320px;
  max-width: 90%;
  z-index: 1000;
  padding: 20px;
  text-align: center;
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.whatsapp-modal.show {
  display: block;
  opacity: 1;
}

.whatsapp-modal-content {
  position: relative;
}

.close-whatsapp-modal {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.2rem;
  color: #777;
  cursor: pointer;
}

.whatsapp-modal h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 10px;
}

.whatsapp-button {
  display: inline-block;
  padding: 10px 20px;
  color: #ffffff;
  background-color: #25D366;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 120, 212, 0.3);
  margin-top: 20px;
}

.whatsapp-button:hover {
  background-color: #1ebe5b;
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0, 95, 163, 0.4);
}

/*COBERTURA*/
/*COBERTURA*/
/*COBERTURA*/


/*TECNOLOGIA*/
/*TECNOLOGIA*/
/*TECNOLOGIA*/

/*TECNOLOGIA*/
/*TECNOLOGIA*/
/*TECNOLOGIA*/


/*FIBRA OPTICA*/
/*FIBRA OPTICA*/
/*FIBRA OPTICA*/
/* Hero Section - Fibra Óptica */
.fibra-header {
  width: 100%;
  padding: 5rem 2rem 4rem;
  background: linear-gradient(135deg, #010e2e, #3b1e99);
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  z-index: 1;
  margin-top: 80px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.fibra-header-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.fibra-header-title {
  font-size: 3.2rem;
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -0.5px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.fibra-header-title span {
  background: linear-gradient(90deg, #00d2ff, #3a47d5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fibra-header-subtitle {
  font-size: 1.25rem;
  font-weight: 400;
  color: #e0e0e0;
  max-width: 800px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.fibra-header-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #00d2ff, #3a47d5);
  margin: 0 auto 3rem;
  border-radius: 4px;
}

/* Beneficios */
.fibra-header-benefits {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.fibra-benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 1.2rem 1.5rem;
  border-radius: 1rem;
  backdrop-filter: blur(6px);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-width: 150px;
  max-width: 200px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.fibra-benefit-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.benefit-icon img {
  width: 52px;
  height: 52px;
  margin-bottom: 0.6rem;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.1));
}

.fibra-benefit-item:hover .benefit-icon img {
  transform: scale(1.1);
}

.benefit-label {
  font-size: 1.05rem;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .fibra-header-title {
    font-size: 2.5rem;
  }

  .fibra-header-subtitle {
    font-size: 1.1rem;
  }

  .fibra-header-benefits {
    gap: 1.5rem;
  }

  .fibra-benefit-item {
    flex: 1 1 45%;
  }
}

@media (max-width: 480px) {
  .fibra-header-title {
    font-size: 2rem;
  }

  .fibra-header-subtitle {
    font-size: 1rem;
  }

  .fibra-benefit-item {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .benefit-icon img {
    width: 48px;
    height: 48px;
  }

  .benefit-label {
    font-size: 1rem;
  }
}









/* Popup Overlay */
.fibra-popup-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.fibra-popup-overlay.show {
  opacity: 1;
  visibility: visible;
}

.fibra-popup-content {
  background: #ffffff;
  border-radius: 1.5rem;
  padding: 2.5rem 2rem;
  width: 90%;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  transform: scale(0.8);
  transition: transform 0.4s ease;
  position: relative;
}

.fibra-popup-overlay.show .fibra-popup-content {
  transform: scale(1);
}

.fibra-popup-icon {
  width: 72px;
  margin-bottom: 1rem;
}

.fibra-popup-title {
  font-size: 1.9rem;
  font-weight: 800;
  color: #0d1f42;
  margin-bottom: 0.8rem;
}

.fibra-popup-message {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 1.8rem;
  line-height: 1.6;
}

.fibra-popup-message .highlight {
  color: #0d47a1;
  font-weight: 600;
}

/* Botones */
.fibra-popup-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.fibra-popup-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 2rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  width: 100%;
}

.fibra-close-btn {
  background: #0d47a1;
  color: #fff;
}

.fibra-close-btn:hover {
  background: #1565c0;
  transform: translateY(-2px);
}

.fibra-whatsapp-btn {
  background: #25D366;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.fibra-whatsapp-btn:hover {
  background: #1ebe57;
  transform: translateY(-2px);
  color: #F0F4F8;
}

/* Responsive */
@media (max-width: 480px) {
  .fibra-popup-content {
    padding: 2rem 1.5rem;
  }

  .fibra-popup-title {
    font-size: 1.6rem;
  }

  .fibra-popup-message {
    font-size: 1rem;
  }

  .fibra-popup-btn {
    font-size: 0.95rem;
  }

  .fibra-popup-icon {
    width: 64px;
  }
}







/* Sección de planes */
.fibra-planes-section {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #eef3fb, #ffffff);
  text-align: center;
}

.fibra-section-header {
  margin-bottom: 3rem;
}

.fibra-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #0b2b66;
  margin-bottom: 1rem;
}

.fibra-description {
  font-size: 1.2rem;
  color: #4a4a4a;
  max-width: 750px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Layout de tarjetas */
.fibra-plan-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  justify-content: center;
}

@media (max-width: 1024px) {
  .fibra-plan-cards {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* Tarjetas */
.fibra-glass-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 1.75rem;
  padding: 3rem 2rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fibra-glass-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.1);
}

/* Íconos */
.fibra-plan-icon {
  margin-bottom: 1.25rem;
}

.fibra-plan-icon i {
  font-size: 3rem;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.1));
}

/* Velocidad */
.fibra-plan-speed {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 0.2rem;
  line-height: 1.2;
}

/* Nombre del plan */
.fibra-plan-name {
  font-size: 1.5rem;
  color: #5c6bc0;
  font-weight: 600;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}

/* Precio */
.fibra-plan-price {
  font-size: 1.9rem;
  color: #1b3c80;
  font-weight: bold;
  margin-bottom: 1rem;
}

.fibra-plan-period {
  font-size: 1rem;
  color: #607d8b;
}

/* Info técnica */
.fibra-plan-info {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  background-color: rgba(255, 255, 255, 0.12);
  padding: 1rem 1.25rem;
  border-radius: 0.85rem;
  margin-bottom: 2rem;
  font-size: 1.1rem;
  color: #1a237e;
  width: 100%;
}

.fibra-info-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fibra-info-item i {
  font-size: 1.4rem;
  color: #1565c0;
}

.fibra-info-label {
  display: block;
  font-size: 0.85rem;
  color: #607d8b;
  margin-bottom: 2px;
}

.fibra-info-value {
  font-weight: bold;
  font-size: 1.05rem;
}

/* Extras */
.fibra-extra-info {
  width: 100%;
  margin-bottom: 1.5rem;
  text-align: center;
}

.fibra-instalacion-info,
.fibra-equipos-info {
  margin-bottom: 0.8rem;
}

.fibra-instalacion-label,
.fibra-equipos-label {
  display: block;
  font-size: 1rem;
  color: #607d8b;
  font-weight: 500;
}

.fibra-instalacion-costo,
.fibra-equipos-cantidad {
  font-size: 1.3rem;
  color: #1a237e;
  font-weight: bold;
}

/* Botón */
.fibra-btn-solicitar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #0d47a1;
  color: #fff;
  padding: 0.8rem 1.75rem;
  border-radius: 2rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(13, 71, 161, 0.15);
}

.fibra-btn-solicitar:hover {
  background-color: #1565c0;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(13, 71, 161, 0.25);
  color: #F0F4F8;
}

.fibra-btn-solicitar i {
  margin-right: 0.5rem;
  font-size: 1.3rem;
}

/* Degradados únicos */
.fibra-icon-start i, .fibra-speed-start {
  background: linear-gradient(135deg, #00bcd4, #2196f3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fibra-icon-boost i, .fibra-speed-boost {
  background: linear-gradient(135deg, #4caf50, #009688);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fibra-icon-ultra i, .fibra-speed-ultra {
  background: linear-gradient(135deg, #ff5722, #e91e63);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fibra-icon-power i, .fibra-speed-power {
  background: linear-gradient(135deg, #673ab7, #3f51b5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fibra-icon-max i, .fibra-speed-max {
  background: linear-gradient(135deg, #0099ff, #003cb3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fibra-icon-ultrax i, .fibra-speed-ultrax {
  background: linear-gradient(135deg, #ff9800, #ff3d00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ESCALADO en pantallas grandes */
@media (min-width: 1280px) {
  .fibra-plan-speed {
    font-size: 3rem;
  }

  .fibra-plan-name {
    font-size: 1.6rem;
  }

  .fibra-plan-price {
    font-size: 2rem;
  }

  .fibra-plan-info {
    font-size: 1.2rem;
  }

  .fibra-btn-solicitar {
    font-size: 1.2rem;
    padding: 0.9rem 2rem;
  }

  .fibra-btn-solicitar i {
    font-size: 1.5rem;
  }
}

@media (min-width: 1440px) {
  .fibra-title {
    font-size: 3rem;
  }

  .fibra-description {
    font-size: 1.4rem;
  }

  .fibra-plan-speed {
    font-size: 3.2rem;
  }

  .fibra-plan-name {
    font-size: 1.75rem;
  }

  .fibra-plan-price {
    font-size: 2.2rem;
  }
}






/* Sección de Beneficios */
.beneficios-ilink {
  padding: 60px 5%;
  background: linear-gradient(135deg, #E2E8F0, #F0F4F8);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Efecto de luces en el fondo */
.beneficios-ilink::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(0, 120, 212, 0.15);
  filter: blur(100px);
  top: -50px;
  left: 10%;
  border-radius: 50%;
}

.beneficios-ilink::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  background: rgba(0, 120, 212, 0.1);
  filter: blur(80px);
  bottom: -50px;
  right: 15%;
  border-radius: 50%;
}

/* Título y Subtítulo */
.beneficios-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #0078D4;
  margin-bottom: 10px;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.beneficios-subtitle {
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 40px;
}

/* Contenedor de Beneficios */
.beneficios-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
  justify-items: center;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

/* Tarjetas de Beneficios */
.beneficio-card {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 30px;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.beneficio-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 16px 48px rgba(31, 38, 135, 0.3);
}

/* Iconos de Beneficios */
.beneficio-icon img {
  width: 80px;
  margin-bottom: 15px;
  transition: transform 0.4s ease;
}

.beneficio-card:hover .beneficio-icon img {
  transform: scale(1.15) rotate(5deg);
}

/* Título del Beneficio */
.beneficio-name {
  font-size: 1.8rem;
  font-weight: 700;
  color: #0078D4;
  margin-bottom: 10px;
}

/* Descripción del Beneficio */
.beneficio-description {
  font-size: 1rem;
  color: #555;
  margin: 0;
  line-height: 1.6;
}

/* Responsividad */
@media (min-width: 1200px) {
  .beneficios-container {
    grid-template-columns: repeat(4, minmax(250px, 1fr));
  }
}

@media (max-width: 1024px) {
  .beneficios-container {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .beneficios-container {
    grid-template-columns: 1fr;
  }

  .beneficio-card {
    width: 80%;
  }
}

@media (max-width: 480px) {
  .beneficio-card {
    width: 100%;
  }

  .beneficio-name {
    font-size: 1.6rem;
  }
}





/* Sección de Fibra Óptica */
.fiberzone-section {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #E2E8F0, #F0F4F8);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  text-align: center;
  margin: auto;
  position: relative;
  overflow: hidden;
}

/* Efecto de luces */
.fiberzone-section::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(0, 120, 212, 0.15);
  filter: blur(100px);
  top: -60px;
  left: 10%;
  border-radius: 50%;
  z-index: 0;
}

.fiberzone-section::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  background: rgba(0, 120, 212, 0.1);
  filter: blur(80px);
  bottom: -50px;
  right: 15%;
  border-radius: 50%;
  z-index: 0;
}

/* Encabezado */
.fiberzone-header h2 {
  font-size: 2.5rem;
  color: #0b2b66;
  font-weight: 800;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  position: relative;
  z-index: 1;
}

.fiberzone-header p {
  font-size: 1.2rem;
  color: #4a4a4a;
  max-width: 800px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

/* Grid de tarjetas */
.fiberzone-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 1;
}

.fiberzone-card {
  background: #ffffff;
  border-radius: 1.5rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fiberzone-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.fiberzone-card img {
  width: 64px;
  margin-bottom: 1rem;
}

.fiberzone-card h3 {
  font-size: 1.5rem;
  color: #0d47a1;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.fiberzone-card p {
  font-size: 1.05rem;
  color: #333;
  line-height: 1.5;
}

/* Mapa circular */
.fiberzone-map-circle {
  background: rgba(0, 74, 173, 0.1);
  border-radius: 50%;
  width: 180px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem auto 0;
  transition: transform 0.3s ease;
}

.fiberzone-map-circle:hover {
  transform: scale(1.1);
}

.fiberzone-map-circle img {
  width: 100px;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2));
}

/* Lista de colonias */
.fiberzone-card ul {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

.fiberzone-card li {
  font-size: 1.05rem;
  color: #333;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.fiberzone-card li i {
  color: #0d47a1;
}

/* Footer */
.fiberzone-footer {
  background: rgba(13, 71, 161, 0.07);
  padding: 1.8rem;
  border-radius: 1rem;
  max-width: 900px;
  margin: 0 auto;
  font-size: 1.1rem;
  color: #0d47a1;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.fiberzone-btn {
  margin-top: 1rem;
  background: #0d47a1;
  color: white;
  border: none;
  padding: 0.9rem 2rem;
  font-size: 1.1rem;
  border-radius: 2rem;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}

.fiberzone-btn:hover {
  background: #1565c0;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1024px) {
  .fiberzone-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .fiberzone-header h2 {
    font-size: 2rem;
  }

  .fiberzone-header p {
    font-size: 1.05rem;
  }
}




/*FIBRA OPTICA*/
/*FIBRA OPTICA*/
/*FIBRA OPTICA*/


/*RESIDENCIAL*/
/*RESIDENCIAL*/
/*RESIDENCIAL*/



/*RESIDENCIAL*/
/*RESIDENCIAL*/
/*RESIDENCIAL*/



/*NOSOTROS*/
/*NOSOTROS*/
/*NOSOTROS*/
/* SECCIÓN HERO "NOSOTROS" */
.nosotros-header {
  width: 100%;
  padding: 5rem 2rem 4rem;
  background: linear-gradient(135deg, #001a40, #004aad);
  color: #ffffff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-top: 80px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.nosotros-header-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.nosotros-header-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.nosotros-header-title span {
  background: linear-gradient(90deg, #00d2ff, #00ffa6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nosotros-header-subtitle {
  font-size: 1.25rem;
  color: #e0e0e0;
  max-width: 820px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
  font-weight: 400;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.nosotros-header-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #00ffa6, #00d2ff);
  margin: 0 auto 3rem;
  border-radius: 4px;
}

.nosotros-header-benefits {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.nosotros-benefit-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 1.2rem 1.5rem;
  border-radius: 1rem;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-width: 160px;
  max-width: 200px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nosotros-benefit-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.nosotros-icon img {
  width: 56px;
  height: 56px;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.15));
}

.nosotros-label {
  font-size: 1.05rem;
  font-weight: 500;
  color: #ffffff;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .nosotros-header-title {
    font-size: 2.4rem;
  }

  .nosotros-header-subtitle {
    font-size: 1.1rem;
  }

  .nosotros-benefit-item {
    flex: 1 1 45%;
  }
}

@media (max-width: 480px) {
  .nosotros-header-title {
    font-size: 2rem;
  }

  .nosotros-header-subtitle {
    font-size: 1rem;
  }

  .nosotros-benefit-item {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .nosotros-label {
    font-size: 1rem;
  }
}







/* SECCIÓN DE IMPACTO SOCIAL */
.fluent-impact-section {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.9), rgba(219, 229, 255, 0.8));
  padding: 70px 20px;
  border-radius: 16px;
  text-align: center;
}

/* TÍTULO Y SUBTÍTULO */
.fluent-impact-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  margin-bottom: 30px;
}

.fluent-impact-subtitle {
  font-size: 1.3rem;
  color: #5a5a5a;
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* GRID DE IMPACTO */
.fluent-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 30px;
  justify-content: center;
}

/* TARJETAS */
.fluent-impact-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Hover */
.fluent-impact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.6);
}

/* ICONOS */
.fluent-impact-icon {
  max-width: 80px;
  transition: transform 0.3s ease;
  margin-bottom: 15px;
}

.fluent-impact-card:hover .fluent-impact-icon {
  transform: scale(1.1);
}

/* TÍTULOS */
.fluent-impact-card-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #004AAD;
  margin-bottom: 10px;
}

/* DESCRIPCIÓN */
.fluent-impact-card-description {
  font-size: 1rem;
  color: #5a5a5a;
  margin-bottom: 20px;
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .fluent-impact-title {
      font-size: 2.4rem;
  }

  .fluent-impact-subtitle {
      font-size: 1.2rem;
  }

  .fluent-impact-grid {
      grid-template-columns: 1fr;
  }
}










/* SECCIÓN MISIÓN, VISIÓN Y VALORES */
.about-mvv-section {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.9), rgba(219, 229, 255, 0.8));
  padding: 70px 20px;
  border-radius: 16px;
  text-align: center;
}

/* TÍTULO Y SUBTÍTULO */
.about-mvv-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  margin-bottom: 30px;
}

.about-mvv-subtitle {
  font-size: 1.3rem;
  color: #5a5a5a;
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* GRID DE MISIÓN, VISIÓN Y VALORES */
.about-mvv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 30px;
  justify-content: center;
}

/* TARJETAS */
.about-mvv-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Hover */
.about-mvv-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.6);
}

/* ICONOS */
.about-mvv-icon {
  max-width: 80px;
  transition: transform 0.3s ease;
  margin-bottom: 15px;
}

.about-mvv-card:hover .about-mvv-icon {
  transform: scale(1.1);
}

/* TÍTULOS */
.about-mvv-card-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #004AAD;
  margin-bottom: 10px;
}

/* DESCRIPCIÓN */
.about-mvv-card-description {
  font-size: 1rem;
  color: #5a5a5a;
  margin-bottom: 20px;
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .about-mvv-title {
      font-size: 2.4rem;
  }

  .about-mvv-subtitle {
      font-size: 1.2rem;
  }

  .about-mvv-grid {
      grid-template-columns: 1fr;
  }
}














/* SECCIÓN PRINCIPAL */
.fluent-tech-section {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.9), rgba(219, 229, 255, 0.8));
  padding: 70px 20px;
  text-align: center;
}

/* TÍTULO Y SUBTÍTULO */
.fluent-tech-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  margin-bottom: 20px;
}

.fluent-tech-subtitle {
  font-size: 1.3rem;
  color: #5a5a5a;
  margin-bottom: 40px;
}

/* TEXTO DESTACADO */
.highlight-text {
  font-weight: bold;
  color: #004AAD;
}

/* CONTENEDOR GENERAL */
.fluent-tech-container {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* MENÚ LATERAL */
.fluent-tech-menu {
  width: 22%;
  background: rgba(255, 255, 255, 0.6);
  padding: 15px;
  border-radius: 16px;
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* LISTA DE PASOS */
.tech-menu-list {
  list-style: none;
  padding: 0;
}

.tech-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 8px;
  position: relative;
}

/* ICONOS */
.tech-step img {
  width: 40px;
  transition: transform 0.3s ease;
}

/* EFECTO HOVER */
.tech-step:hover {
  background: linear-gradient(135deg, #004AAD, #003B7A);
  color: white;
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.tech-step:hover img {
  transform: scale(1.1);
}

/* OPCIÓN ACTIVA */
.tech-step.active {
  background: #004AAD;
  color: white;
}

/* CONTENIDO DE LOS PASOS */
.fluent-tech-content {
  width: 75%;
  text-align: center;
  background: rgba(255, 255, 255, 0.6);
  padding: 30px;
  border-radius: 16px;
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* IMÁGENES RESPONSIVAS */
.tech-image {
  width: 100%;
  height: auto;
  max-height: 350px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 20px; /* Separación con el texto */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* EFECTO HOVER EN IMÁGENES */
.tech-image:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* SEPARACIÓN ENTRE IMAGEN Y TEXTO */
.tech-slide h3 {
  margin-top: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  color: #004AAD;
}

.tech-slide p {
  font-size: 1.1rem;
  color: #333;
  line-height: 1.6;
}

/* OCULTAR SLIDES NO ACTIVOS */
.tech-slide {
  display: none;
}

.tech-slide.active {
  display: block;
}

/* RESPONSIVIDAD */
@media (max-width: 1024px) {
  .tech-image {
    max-height: 300px;
  }
}

@media (max-width: 768px) {
  .fluent-tech-container {
    flex-direction: column;
  }

  .fluent-tech-menu {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
  }

  .tech-menu-list {
    display: flex;
    flex-direction: row;
    gap: 12px;
  }

  .tech-step {
    flex-direction: column;
    padding: 10px;
    font-size: 0.9rem;
  }

  .tech-step span {
    font-size: 0.8rem;
    text-align: center;
    display: block;
  }

  .fluent-tech-content {
    width: 100%;
  }

  .tech-image {
    max-height: 250px;
  }
}









/* SECCIÓN NUESTRO TRABAJO Y RESPONSABILIDAD SOCIAL */
.about-work-section {
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.9), rgba(219, 229, 255, 0.8));
  padding: 70px 20px;
  border-radius: 16px;
  text-align: center;
}

/* TÍTULO Y SUBTÍTULO */
.about-work-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #004AAD;
  margin-bottom: 30px;
}

.about-work-subtitle {
  font-size: 1.3rem;
  color: #5a5a5a;
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* GRID DE NUESTRO TRABAJO */
.about-work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 30px;
  justify-content: center;
}

/* TARJETAS */
.about-work-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Hover */
.about-work-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.6);
}

/* ICONOS */
.about-work-icon {
  max-width: 80px;
  transition: transform 0.3s ease;
  margin-bottom: 15px;
}

.about-work-card:hover .about-work-icon {
  transform: scale(1.1);
}

/* TÍTULOS */
.about-work-card-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #004AAD;
  margin-bottom: 10px;
}

/* DESCRIPCIÓN */
.about-work-card-description {
  font-size: 1rem;
  color: #5a5a5a;
  margin-bottom: 20px;
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .about-work-title {
      font-size: 2.4rem;
  }

  .about-work-subtitle {
      font-size: 1.2rem;
  }

  .about-work-grid {
      grid-template-columns: 1fr;
  }
}



/*NOSOTROS*/
/*NOSOTROS*/
/*NOSOTROS*/




/*BOLSA DE TRABAJO*/
/*BOLSA DE TRABAJO*/
/*BOLSA DE TRABAJO*/
.empleo-header {
  width: 100%;
  padding: 5rem 2rem 4rem;
  background: linear-gradient(135deg, #000428, #004e92);
  color: #ffffff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-top: 80px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.empleo-header-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.empleo-header-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.empleo-header-title span {
  background: linear-gradient(90deg, #00ffe7, #1a73e8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.empleo-header-subtitle {
  font-size: 1.2rem;
  color: #e0e0e0;
  max-width: 850px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.empleo-header-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #00ffe7, #1a73e8);
  margin: 0 auto 3rem;
  border-radius: 4px;
}

.empleo-header-benefits {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.empleo-benefit-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 1.2rem 1.5rem;
  border-radius: 1rem;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-width: 160px;
  max-width: 200px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empleo-benefit-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.empleo-icon img {
  width: 56px;
  height: 56px;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.15));
}

.empleo-label {
  font-size: 1.05rem;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .empleo-header-title {
    font-size: 2.4rem;
  }

  .empleo-header-subtitle {
    font-size: 1.05rem;
  }

  .empleo-benefit-item {
    flex: 1 1 45%;
  }
}

@media (max-width: 480px) {
  .empleo-header-title {
    font-size: 2rem;
  }

  .empleo-header-subtitle {
    font-size: 1rem;
  }

  .empleo-benefit-item {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .empleo-label {
    font-size: 1rem;
  }
}















.quienes-somos-ilink {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #f3f9ff, #ffffff);
  text-align: center;
}

.quienes-somos-container {
  max-width: 1200px;
  margin: 0 auto;
}

.quienes-somos-titulo {
  font-size: 2.8rem;
  font-weight: 800;
  color: #0d47a1;
  margin-bottom: 1rem;
}

.quienes-somos-subtitulo {
  font-size: 1.2rem;
  color: #444;
  max-width: 850px;
  margin: 0 auto 3rem;
  line-height: 1.7;
}

.quienes-somos-grid {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.quienes-somos-card {
  flex: 1 1 calc(33.333% - 1.5rem);
  min-width: 280px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 1.5rem;
  padding: 2.2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.quienes-somos-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
}

.quienes-somos-card img {
  width: 72px;
  margin-bottom: 1.2rem;
  transition: transform 0.3s ease;
}

.quienes-somos-card:hover img {
  transform: scale(1.1);
}

.quienes-somos-card h4 {
  font-size: 1.5rem;
  color: #0b2b66;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.quienes-somos-card p {
  font-size: 1.05rem;
  color: #444;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 1024px) {
  .quienes-somos-card {
    flex: 1 1 calc(50% - 1rem);
  }
}

@media (max-width: 600px) {
  .quienes-somos-card {
    flex: 1 1 100%;
  }

  .quienes-somos-titulo {
    font-size: 2.2rem;
  }

  .quienes-somos-subtitulo {
    font-size: 1.05rem;
  }
}








.vacantes-section {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #eaf6ff, #ffffff);
  text-align: center;
}

.vacantes-container {
  max-width: 1200px;
  margin: 0 auto;
}

.vacantes-titulo {
  font-size: 2.8rem;
  font-weight: 800;
  color: #0d47a1;
  margin-bottom: 1rem;
}

.vacantes-subtitulo {
  font-size: 1.2rem;
  color: #444;
  max-width: 850px;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

.vacantes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

.vacante-card {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 1.5rem;
  padding: 2rem;
  text-align: left;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vacante-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
}

.vacante-puesto {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0b2b66;
  margin-bottom: 0.5rem;
}

.vacante-ubicacion {
  font-size: 1rem;
  color: #607d8b;
  margin-bottom: 0.3rem;
}

.vacante-ubicacion i {
  margin-right: 0.4rem;
  color: #1e88e5;
}

.vacante-tipo {
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 1.2rem;
}

.vacante-detalles-btn {
  align-self: flex-start;
  background-color: #0d47a1;
  color: #fff;
  padding: 0.6rem 1.4rem;
  border-radius: 2rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.vacante-detalles-btn:hover {
  background-color: #1565c0;
  color: #F0F4F8;
}

/* Responsive */
@media (max-width: 1024px) {
  .vacantes-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (max-width: 600px) {
  .vacantes-titulo {
    font-size: 2.2rem;
  }

  .vacantes-subtitulo {
    font-size: 1.05rem;
  }

  .vacante-card {
    padding: 1.8rem;
  }

  .vacante-puesto {
    font-size: 1.25rem;
  }

  .vacante-detalles-btn {
    font-size: 0.95rem;
    padding: 0.55rem 1.3rem;
  }
}





/*Vacantes CARGANDO*/
/* --- Skeleton Loader Styles --- */
.custom-skeleton-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  border-radius: 20px;
  padding: 1.8rem 1.5rem;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  animation: pulseSkeleton 1.5s infinite ease-in-out;
}

/* Elementos */
.custom-skeleton-title {
  height: 20px;
  width: 70%;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 400% 100%;
  border-radius: 8px;
  animation: shimmer 1.8s infinite linear;
}

.custom-skeleton-location {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.custom-skeleton-icon {
  width: 20px;
  height: 20px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 400% 100%;
  border-radius: 50%;
  animation: shimmer 1.8s infinite linear;
}

.custom-skeleton-text {
  height: 14px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 400% 100%;
  border-radius: 8px;
  animation: shimmer 1.8s infinite linear;
}

.custom-skeleton-text.short {
  width: 50%;
}

.custom-skeleton-text.medium {
  width: 80%;
}

/* Botón */
.custom-skeleton-button {
  margin-top: 1rem;
  height: 40px;
  width: 60%;
  background: linear-gradient(90deg, #cce0ff 25%, #e0f0ff 50%, #cce0ff 75%);
  background-size: 400% 100%;
  border-radius: 50px;
  animation: shimmer 1.8s infinite linear;
  align-self: center;
}

/* Animaciones */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes pulseSkeleton {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Responsive */
@media (max-width: 480px) {
  .custom-skeleton-card {
    max-width: 100%;
    padding: 1.5rem 1.2rem;
  }
}








/* === OVERLAY OSCURO + DESENFOQUE === */
.modal-vacante-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 1.5rem;
  overflow-y: auto;
}

/* === CONTENEDOR DEL MODAL === */
.modal-vacante-contenido {
  background: #ffffff;
  border-radius: 1.5rem;
  padding: 2.5rem 2rem;
  max-width: 620px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.5);
  position: relative;
  text-align: center;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* === BOTÓN CERRAR === */
.modal-vacante-cerrar {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  font-size: 2rem;
  color: #333;
  cursor: pointer;
  z-index: 2;
}

/* === TÍTULO Y METADATOS === */
.modal-vacante-contenido h3 {
  font-size: 2rem;
  font-weight: 800;
  color: #0d47a1;
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.modal-vacante-ubicacion,
.modal-vacante-tipo {
  font-size: 1rem;
  color: #607d8b;
  margin-bottom: 0.8rem;
}

/* === DESCRIPCIÓN === */
.modal-vacante-descripcion {
  font-size: 1.05rem;
  color: #333;
  margin-bottom: 2rem;
  text-align: left;
  line-height: 1.6;
  max-height: 350px;
  overflow-y: auto;
}

.modal-vacante-descripcion ul {
  padding-left: 1.2rem;
}

.modal-vacante-descripcion li {
  margin-bottom: 0.6rem;
}

/* === SCROLL PERSONALIZADO === */
.modal-vacante-descripcion::-webkit-scrollbar {
  width: 6px;
}
.modal-vacante-descripcion::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

/* === BOTONES DE ACCIÓN === */
.modal-vacante-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.btn-vacante-whatsapp,
.btn-vacante-formulario {
  padding: 0.8rem 1.6rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 2rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  transition: all 0.3s ease;
}

.btn-vacante-whatsapp {
  background-color: #25d366;
}

.btn-vacante-whatsapp:hover {
  background-color: #1ebe5c;
  color: #F0F4F8;
}

.btn-vacante-formulario {
  background-color: #0d47a1;
}

.btn-vacante-formulario:hover {
  background-color: #1565c0;
  color: #F0F4F8;
}

/* === RESPONSIVO === */
@media (max-width: 768px) {
  .modal-vacante-contenido {
    padding: 2rem 1.5rem;
    max-width: 90vw;
  }

  .modal-vacante-contenido h3 {
    font-size: 1.6rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
  }

  .modal-vacante-cerrar {
    font-size: 1.8rem;
    top: 0.6rem;
    right: 1rem;
  }

  .modal-vacante-botones {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-vacante-whatsapp,
  .btn-vacante-formulario {
    width: 100%;
    justify-content: center;
  }
}

@media (max-height: 500px) {
  .modal-vacante-contenido {
    max-height: 90vh;
    overflow-y: auto;
  }
}
















/*BOLSA DE TRABAJO*/
/*BOLSA DE TRABAJO*/
/*BOLSA DE TRABAJO*/





/*PLANES RESIDENCIALES*/
/*PLANES RESIDENCIALES*/
/*PLANES RESIDENCIALES*/
.planes-toggle-section {
  padding: 5rem 2rem;
  text-align: center;
}

.planes-toggle-header {
  margin-bottom: 2.5rem;
}

.planes-toggle-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #0b2b66;
  margin-bottom: 1rem;
}

.planes-toggle-description {
  font-size: 1.2rem;
  color: #4a4a4a;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.6;
}

.planes-toggle-tabs {
  display: inline-flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(14px);
  border-radius: 2.5rem;
  padding: 0.4rem;
  margin-bottom: 3rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  gap: 1rem;
  scroll-behavior: smooth;
}

.planes-toggle-tabs::-webkit-scrollbar {
  display: none;
}

.planes-toggle-btn {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #0d47a1;
  border-radius: 2rem;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.planes-toggle-btn:hover {
  background-color: rgba(13, 71, 161, 0.07);
}

.planes-toggle-btn.active {
  background-color: #0d47a1;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(13, 71, 161, 0.2);
}

.planes-toggle-btn.active .planes-toggle-icon {
  filter: brightness(0) invert(1);
}

.planes-toggle-icon {
  width: 24px;
  height: 24px;
  transition: filter 0.3s ease;
}

.planes-toggle-content {
  max-width: 1440px;
  margin: 0 auto;
  animation: fadeIn 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

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

/* ✅ RESPONSIVE */
@media (max-width: 768px) {
  .planes-toggle-title {
    font-size: 2.2rem;
  }

  .planes-toggle-description {
    font-size: 1.05rem;
  }

  .planes-toggle-tabs {
    width: 100%;
    justify-content: center;
    padding: 0.5rem 1rem;
  }

  .planes-toggle-btn {
    font-size: 1rem;
    padding: 0.6rem 1.5rem;
  }

  .planes-toggle-icon {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 480px) {
  .planes-toggle-title {
    font-size: 1.8rem;
  }

  .planes-toggle-description {
    font-size: 1rem;
  }

  .planes-toggle-btn {
    font-size: 0.95rem;
    padding: 0.5rem 1.25rem;
  }

  .planes-toggle-icon {
    width: 20px;
    height: 20px;
  }
}

















.residencial-section {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #eef3fb, #ffffff);
  text-align: center;
}

.section-header .title {
  font-size: 3rem;
  font-weight: 800;
  color: #0b2b66;
  margin-bottom: 1rem;
  letter-spacing: -0.5px;
}

.section-header .description {
  font-size: 1.3rem;
  color: #444;
  max-width: 750px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}

/* Layout 3 columnas en escritorio */
.plan-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  justify-content: center;
}

@media (max-width: 1023px) {
  .plan-cards {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* Tarjeta base */
.glass-card {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 1.75rem;
  padding: 3rem 2rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.glass-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

/* Ícono principal */
.plan-icon {
  margin-bottom: 1.25rem;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.plan-icon i {
  font-size: 3.5rem;
  display: inline-block;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.1));
}

.glass-card:hover .plan-icon i {
  transform: scale(1.05);
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.15));
}

/* Velocidad */
.plan-speed {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 0.2rem;
  line-height: 1.2;
}

/* Nombre del plan */
.plan-name {
  font-size: 1.6rem;
  color: #5c6bc0;
  font-weight: 600;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Precio */
.plan-price {
  font-size: 2rem;
  color: #1b3c80;
  font-weight: bold;
  margin-bottom: 1rem;
}

.plan-period {
  font-size: 1.1rem;
  color: #607d8b;
}

/* Info de bajada/subida */
.plan-info {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  background-color: rgba(255, 255, 255, 0.12);
  padding: 1rem 1.25rem;
  border-radius: 0.85rem;
  margin-bottom: 2rem;
  font-size: 1.15rem;
  color: #1a237e;
  width: 100%;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.info-item i {
  font-size: 1.5rem;
  color: #1565c0;
}

.info-label {
  display: block;
  font-size: 0.9rem;
  color: #607d8b;
  margin-bottom: 2px;
}

.info-value {
  font-weight: 700;
  font-size: 1.1rem;
}

/* Costo de instalación y equipos */
.extra-info {
  width: 100%;
  margin-bottom: 2rem;
  text-align: center;
}

.instalacion-info,
.equipos-info {
  margin-bottom: 0.8rem;
}

.instalacion-label,
.equipos-label {
  display: block;
  font-size: 1rem;
  color: #607d8b;
  font-weight: 500;
}

.instalacion-costo,
.equipos-cantidad {
  font-size: 1.4rem;
  color: #0b2b66;
  font-weight: 700;
}

/* Botón */
.btn-solicitar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #0d47a1;
  color: #fff;
  padding: 0.9rem 2rem;
  border-radius: 2rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.15rem;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(13, 71, 161, 0.15);
}

.btn-solicitar:hover {
  background-color: #1565c0;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(13, 71, 161, 0.25);
  color: #F0F4F8;
}

.btn-solicitar i {
  margin-right: 0.6rem;
  font-size: 1.4rem;
}

/* Degradados por plan */
.icon-5m i, .speed-5m {
  background: linear-gradient(135deg, #2196f3, #4caf50);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-10m i, .speed-10m {
  background: linear-gradient(135deg, #1565c0, #1e88e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-15m i, .speed-15m {
  background: linear-gradient(135deg, #00bcd4, #2196f3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-20m i, .speed-20m {
  background: linear-gradient(135deg, #0288d1, #00acc1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-25m i, .speed-25m {
  background: linear-gradient(135deg, #3f51b5, #2196f3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-40m i, .speed-40m {
  background: linear-gradient(135deg, #1a237e, #0d47a1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Extra escalado en pantallas grandes */
@media (min-width: 1280px) {
  .glass-card {
    padding: 3rem;
  }

  .plan-icon i {
    font-size: 4rem;
  }

  .plan-speed {
    font-size: 3rem;
  }

  .plan-name {
    font-size: 1.75rem;
  }

  .plan-price {
    font-size: 2.2rem;
  }

  .plan-info {
    font-size: 1.2rem;
  }

  .btn-solicitar {
    font-size: 1.25rem;
    padding: 1rem 2.2rem;
  }

  .btn-solicitar i {
    font-size: 1.5rem;
  }
}

@media (min-width: 1440px) {
  .plan-icon i {
    font-size: 4.2rem;
  }

  .plan-speed {
    font-size: 3.3rem;
  }

  .plan-name {
    font-size: 1.9rem;
  }

  .plan-price {
    font-size: 2.4rem;
  }

  .section-header .title {
    font-size: 3.4rem;
  }

  .section-header .description {
    font-size: 1.5rem;
  }
}








.residenciales-filtros {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.residenciales-filtro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 1.5rem;
  padding: 1rem 1.5rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

.residenciales-filtro:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.residenciales-filtro label {
  font-weight: 600;
  color: #0d47a1;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.residenciales-filtro select {
  padding: 0.6rem 1.2rem;
  border-radius: 2rem;
  border: none;
  background: #ffffffcc;
  font-size: 1rem;
  color: #0d47a1;
  font-weight: 500;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  min-width: 180px;
}

.residenciales-filtro select:focus {
  outline: none;
  box-shadow: 0 0 0 2px #0d47a180;
}

/* Responsive */
@media (max-width: 768px) {
  .residenciales-filtro select {
    min-width: 100%;
    width: 100%;
  }

  .residenciales-filtro {
    width: 100%;
    align-items: stretch;
  }
}






















.simetricos-section {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #eef3fb, #ffffff);
  text-align: center;
}

.simetricos-header {
  margin-bottom: 2.5rem;
}

.simetricos-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #0b2b66;
  margin-bottom: 1rem;
}

.simetricos-description {
  font-size: 1.2rem;
  color: #4a4a4a;
  max-width: 750px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Layout: 3 columnas en escritorio */
.simetricos-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  justify-content: center;
}

@media (max-width: 1023px) {
  .simetricos-cards {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

.simetricos-card {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 1.75rem;
  padding: 3rem 2rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.simetricos-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

.simetricos-icon {
  margin-bottom: 1.25rem;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.simetricos-icon i {
  font-size: 3.5rem;
  display: inline-block;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.1));
}

.simetricos-card:hover .simetricos-icon i {
  transform: scale(1.05);
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.15));
}

.simetricos-speed {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 0.2rem;
  line-height: 1.2;
}

.simetricos-name {
  font-size: 1.6rem;
  color: #5c6bc0;
  font-weight: 600;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.simetricos-price {
  font-size: 2rem;
  color: #1b3c80;
  font-weight: bold;
  margin-bottom: 1rem;
}

.simetricos-period {
  font-size: 1.1rem;
  color: #607d8b;
}

.simetricos-info {
  display: flex;
  justify-content: center;
  gap: 1rem;
  background-color: rgba(255, 255, 255, 0.12);
  padding: 1rem 1.25rem;
  border-radius: 0.85rem;
  margin-bottom: 2rem;
  font-size: 1.15rem;
  color: #1a237e;
  width: 100%;
}

.simetricos-info-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.simetricos-info-item i {
  font-size: 1.5rem;
  color: #1565c0;
}

.info-label {
  display: block;
  font-size: 0.9rem;
  color: #607d8b;
  margin-bottom: 2px;
}

.info-value {
  font-weight: 700;
  font-size: 1.1rem;
}

.simetricos-extra {
  width: 100%;
  margin-bottom: 2rem;
  text-align: center;
}

.instalacion-info,
.equipos-info {
  margin-bottom: 0.8rem;
}

.instalacion-label,
.equipos-label {
  display: block;
  font-size: 1rem;
  color: #607d8b;
  font-weight: 500;
}

.instalacion-costo,
.equipos-cantidad {
  font-size: 1.4rem;
  color: #0b2b66;
  font-weight: 700;
}

.simetricos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #0d47a1;
  color: #fff;
  padding: 0.9rem 2rem;
  border-radius: 2rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.15rem;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(13, 71, 161, 0.15);
}

.simetricos-btn:hover {
  background-color: #1565c0;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(13, 71, 161, 0.25);
  color: #F0F4F8;
}

.simetricos-btn i {
  margin-right: 0.6rem;
  font-size: 1.4rem;
}

/* Degradados únicos */
.icon-simetricos-5m i, .speed-simetricos-5m {
  background: linear-gradient(135deg, #1de9b6, #00bcd4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-simetricos-10m i, .speed-simetricos-10m {
  background: linear-gradient(135deg, #00acc1, #2196f3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-simetricos-15m i, .speed-simetricos-15m {
  background: linear-gradient(135deg, #00bfa5, #00bcd4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-simetricos-20m i, .speed-simetricos-20m {
  background: linear-gradient(135deg, #0288d1, #00bcd4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-simetricos-25m i, .speed-simetricos-25m {
  background: linear-gradient(135deg, #1a237e, #5c6bc0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-simetricos-40m i, .speed-simetricos-40m {
  background: linear-gradient(135deg, #0d47a1, #2962ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Responsive ajustes grandes */
@media (min-width: 1280px) {
  .simetricos-card {
    padding: 3rem;
  }

  .simetricos-icon i {
    font-size: 4rem;
  }

  .simetricos-speed {
    font-size: 3rem;
  }

  .simetricos-name {
    font-size: 1.75rem;
  }

  .simetricos-price {
    font-size: 2.2rem;
  }

  .simetricos-info {
    font-size: 1.2rem;
  }

  .simetricos-btn {
    font-size: 1.25rem;
    padding: 1rem 2.2rem;
  }

  .simetricos-btn i {
    font-size: 1.5rem;
  }
}

@media (min-width: 1440px) {
  .simetricos-icon i {
    font-size: 4.2rem;
  }

  .simetricos-speed {
    font-size: 3.3rem;
  }

  .simetricos-name {
    font-size: 1.9rem;
  }

  .simetricos-price {
    font-size: 2.4rem;
  }

  .simetricos-title {
    font-size: 3.4rem;
  }

  .simetricos-description {
    font-size: 1.5rem;
  }
}








.simetricos-filtros {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.simetricos-filtro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 1.5rem;
  padding: 1rem 1.5rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

.simetricos-filtro:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.simetricos-filtro label {
  font-weight: 600;
  color: #0d47a1;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.simetricos-filtro select {
  padding: 0.6rem 1.2rem;
  border-radius: 2rem;
  border: none;
  background: #ffffffcc;
  font-size: 1rem;
  color: #0d47a1;
  font-weight: 500;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  min-width: 180px;
}

.simetricos-filtro select:focus {
  outline: none;
  box-shadow: 0 0 0 2px #0d47a180;
}

/* Responsive */
@media (max-width: 768px) {
  .simetricos-filtro select {
    min-width: 100%;
    width: 100%;
  }

  .simetricos-filtro {
    width: 100%;
    align-items: stretch;
  }
}









.ventajas-section {
  background: linear-gradient(135deg, #eaf3ff, #ffffff);
  padding: 5rem 2rem;
  text-align: center;
}

.ventajas-container {
  max-width: 1200px;
  margin: 0 auto;
}

.ventajas-title {
  font-size: 3rem;
  color: #0b2b66;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.ventajas-subtitle {
  font-size: 1.2rem;
  color: #4a4a4a;
  margin-bottom: 3rem;
}

.ventajas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 1023px) {
  .ventajas-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

.ventaja-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(16px);
  border-radius: 1.5rem;
  padding: 2.5rem 1.8rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ventaja-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.ventaja-card img {
  width: 72px;
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease;
}

.ventaja-card:hover img {
  transform: scale(1.08);
}

.ventaja-card h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0d47a1;
  margin-bottom: 0.75rem;
}

.ventaja-card p {
  font-size: 1.05rem;
  color: #444;
  line-height: 1.6;
}

/* Colores únicos para cada tarjeta (gradientes suaves) */
.ventaja-velocidad {
  background: linear-gradient(135deg, #e0f7fa, #ffffff);
}

.ventaja-4k {
  background: linear-gradient(135deg, #e1f5fe, #ffffff);
}

.ventaja-cobertura {
  background: linear-gradient(135deg, #ede7f6, #ffffff);
}






/*PLANES RESIDENCIALES*/
/*PLANES RESIDENCIALES*/
/*PLANES RESIDENCIALES*/


/*MAS*/
/*MAS*/
/*MAS*/

.ilink-extra-header {
  width: 100%;
  padding: 5rem 2rem 4rem;
  background: linear-gradient(135deg, #001f3f, #004aad);
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-top: 80px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.ilink-extra-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.ilink-extra-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ilink-extra-title span {
  background: linear-gradient(90deg, #00cfff, #7fddff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ilink-extra-subtitle {
  font-size: 1.2rem;
  color: #e0e0e0;
  max-width: 840px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.ilink-extra-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #00e6ff, #00cfff);
  margin: 0 auto 3rem;
  border-radius: 4px;
}

/* Íconos */
.ilink-extra-icons {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.extra-icon-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem 1.2rem;
  border-radius: 1rem;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 140px;
  max-width: 180px;
}

.extra-icon-item img {
  width: 48px;
  height: 48px;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
  transition: transform 0.3s ease;
}

.extra-icon-item span {
  font-size: 1.05rem;
  font-weight: 500;
  color: #ffffff;
}

.extra-icon-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.extra-icon-item:hover img {
  transform: scale(1.08);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .ilink-extra-title {
    font-size: 2.4rem;
  }

  .ilink-extra-subtitle {
    font-size: 1.05rem;
  }

  .extra-icon-item {
    flex: 1 1 40%;
  }
}

@media (max-width: 480px) {
  .ilink-extra-title {
    font-size: 2rem;
  }

  .ilink-extra-subtitle {
    font-size: 0.95rem;
  }

  .extra-icon-item {
    flex: 1 1 100%;
  }

  .extra-icon-item img {
    width: 44px;
    height: 44px;
  }

  .extra-icon-item span {
    font-size: 1rem;
  }
}

















.mas-cards-section {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #e3f2fd, #ffffff);
  text-align: center;
}

.mas-cards-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #0b2b66;
  margin-bottom: 3rem;
}

.mas-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Responsivo: 3 columnas en tablet horizontal */
@media (max-width: 1024px) {
  .mas-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Responsivo: 2 columnas en tablet vertical */
@media (max-width: 768px) {
  .mas-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsivo: 1 columna en móvil */
@media (max-width: 480px) {
  .mas-cards-grid {
    grid-template-columns: 1fr;
  }
}

.mas-card {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 1.5rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

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

.mas-card img {
  width: 72px;
  height: 72px;
  margin-bottom: 1.2rem;
  transition: transform 0.3s ease;
}

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

.mas-card h4 {
  font-size: 1.4rem;
  color: #0d47a1;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.mas-card p {
  font-size: 1.05rem;
  color: #444;
  line-height: 1.55;
}












.educacion-apoyo-section {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #eaf6ff, #ffffff);
  text-align: center;
}

.educacion-apoyo-container {
  max-width: 1280px;
  margin: 0 auto;
}

.educacion-apoyo-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #0d47a1;
  margin-bottom: 1rem;
}

.educacion-apoyo-subtitle {
  font-size: 1.2rem;
  color: #444;
  max-width: 850px;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

.educacion-apoyo-grid {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.educacion-apoyo-card {
  flex: 1 1 calc(33.333% - 1.5rem);
  min-width: 280px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.educacion-apoyo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.educacion-apoyo-card img {
  width: 72px;
  margin-bottom: 1.2rem;
  transition: transform 0.3s ease;
}

.educacion-apoyo-card:hover img {
  transform: scale(1.1);
}

.educacion-apoyo-card h4 {
  font-size: 1.5rem;
  color: #0b2b66;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.educacion-apoyo-card p {
  font-size: 1.05rem;
  color: #444;
  line-height: 1.55;
}

/* Botón YouTube */
.educacion-apoyo-youtube {
  margin-top: 3rem;
  position: relative;
}

.btn-youtube {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0.9rem 1.8rem;
  border-radius: 2rem;
  font-size: 1.1rem;
  color: #e53935;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  position: relative;
}

.btn-youtube:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  color: #f44336;
}

.btn-youtube img {
  width: 32px;
  height: 32px;
}

/* Badge Próximamente */
.badge-proximamente {
  background-color: #f44336;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
  position: absolute;
  top: -10px;
  right: -10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Responsivo */
@media (max-width: 1024px) {
  .educacion-apoyo-card {
    flex: 1 1 calc(50% - 1rem);
  }
}

@media (max-width: 600px) {
  .educacion-apoyo-card {
    flex: 1 1 100%;
  }

  .btn-youtube {
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
  }
}















.seccion-contacto-mas {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #f3f9ff, #ffffff);
  text-align: center;
}

.contacto-mas-container {
  max-width: 900px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 1.5rem;
  padding: 3rem 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.contacto-mas-titulo {
  font-size: 2.4rem;
  font-weight: 800;
  color: #0d47a1;
  margin-bottom: 1rem;
}

.contacto-mas-subtitulo {
  font-size: 1.15rem;
  color: #444;
  max-width: 700px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}

.contacto-mas-botones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.btn-contacto {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.85rem 1.6rem;
  border-radius: 2rem;
  text-decoration: none;
  color: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.btn-contacto i {
  font-size: 1.3rem;
}

/* Estilos individuales */
.btn-contacto.whatsapp {
  background-color: #25d366;
}

.btn-contacto.whatsapp:hover {
  background-color: #1ebe5c;
  color: #f1f1f1;
}

.btn-contacto.correo {
  background-color: #0d47a1;
}

.btn-contacto.correo:hover {
  background-color: #1565c0;
  color: #F0F4F8;
}

/* Responsivo */
@media (max-width: 600px) {
  .contacto-mas-titulo {
    font-size: 2rem;
  }

  .contacto-mas-subtitulo {
    font-size: 1rem;
  }

  .btn-contacto {
    font-size: 1rem;
    padding: 0.75rem 1.4rem;
  }
}












/*MAS*/
/*MAS*/
/*MAS*/