/*---  footer.css  ---*/

/* ============================================= */
/* FOOTER - Estilos principales del pie de página */
/* ============================================= */

footer {
  background-color: #585858; /* Color de fondo gris oscuro */
  color: white; /* Color de texto blanco */
  position: fixed; /* Posicionamiento fijo en la parte inferior */
  bottom: 0; /* Alineado al fondo de la ventana */
  left: 0; /* Alineado a la izquierda */
  width: 100%; /* Ancho completo */
  z-index: 1000; /* Asegura que esté por encima de otros elementos */
  font-size: 1.0em; /* Tamaño de fuente reducido */
  transition: transform 0.3s ease-in-out; /* Transición suave para animaciones */
}

/* ============================================= */
/* ESTADO OCULTO - Para esconder el footer       */
/* ============================================= */

footer.hidden {
  transform: translateY(100%); /* Mueve el footer completamente hacia abajo */
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL - Organización interna   */
/* ============================================= */

.footer-container {
  display: flex; /* Activa el modelo de caja flexible */
  justify-content: space-between; /* Distribuye el espacio entre elementos */
  align-items: center; /* Centra verticalmente los elementos */
  flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas pequeñas */
  padding: 10px 50px 5px 50px; /* Relleno interno */
}

/* ============================================= */
/* REDES SOCIALES - Estilos para los iconos      */
/* ============================================= */

.footer-social a {
  color: #fff; /* Color blanco para los iconos */
  margin-right: 15px; /* Espacio entre iconos */
  font-size: 15px; /* Tamaño ligeramente mayor para los iconos */
  text-decoration: none; /* Elimina subrayado de enlaces */
  transition: color 0.3s ease; /* Transición suave para efecto hover */
}

/* Efecto hover para iconos de redes sociales */
.footer-social a:hover {
  color: #ccc; /* Color gris claro al pasar el mouse */
}

/* ============================================= */
/* ENLACES - Menú de navegación del footer       */
/* ============================================= */

.footer-links {
  list-style: none; /* Elimina los estilos de lista por defecto */
  display: flex; /* Muestra los elementos en línea */
  gap: 50px; /* Espacio entre elementos */
  margin: 0; /* Elimina márgenes por defecto */
  padding: 0; /* Elimina relleno por defecto */
}

.footer-links li a {
  color: #fff; /* Color blanco para los enlaces */
  text-decoration: none; /* Elimina subrayado */
  font-size: 11px; /* Tamaño de fuente reducido */
  transition: color 0.3s ease; /* Transición suave para efecto hover */
}

/* Efecto hover para enlaces */
.footer-links li a:hover {
  color: #ccc; /* Color gris claro al pasar el mouse */
}

/* ============================================= */
/* COPYRIGHT - Franja inferior de derechos       */
/* ============================================= */

.footer-copyright {
  background-color: #4d4d4d; /* Color de fondo ligeramente más oscuro */
  text-align: center; /* Texto centrado */
  padding: 5px 0px; /* Relleno interno */
  
}

/* Elimina margen por defecto del párrafo */
.footer-copyright p {
  margin: 0;
  font-size: 11px; /* Tamaño de fuente más pequeño */
  /*font-size: 2.29vw;*/
}

/* ============================================= */
/* MEDIA QUERIES - Ajustes para móviles          */
/* ============================================= */

@media (max-width: 768px) {

  footer {
    transform: translateY(100%); /* oculta visualmente */
    pointer-events: none; /* evita clics */
  }

  /* Cambia la dirección del contenedor a columna 600 px inicialmente*/
  .footer-container {
    flex-direction: column; /* Apila elementos verticalmente */
    align-items: center; /* Centra horizontalmente */
    gap: 1px; /* Espacio entre elementos */
  }

  /* Ajustes para los enlaces en móvil */
  .footer-links {
    flex-direction: column; /* Apila enlaces verticalmente */
    align-items: center; /* Centra horizontalmente */
    gap: 1px; /* Reduce el espacio entre elementos */
  }
}

/* ============================================= */
/* LAUNCHER DUAL (Ikal + WhatsApp)               */
/* ============================================= */

#ttl-launcher {
  position: fixed;
  bottom: 70px;
  right: 24px;
  z-index: 99998;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  transition: opacity 0.3s ease;
}

.ttl-launcher-wrap {
  position: relative;
  width: 114px;
  height: 114px;
  flex-shrink: 0;
}

.ttl-ring-svg {
  position: absolute;
  top: -23px;
  left: -23px;
  pointer-events: none;
  transform-origin: center center;
  animation: ttlRingSpin 18s linear infinite;
}

@keyframes ttlRingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

#ttl-launcher.scroll-transparente {
  opacity: 0.35;
  pointer-events: auto;
}

#ttl-launcher-btn {
  position: relative;
  width: 114px;
  height: 114px;
  padding: 0;
  background: #4a3060;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 32px rgba(74, 48, 96, 0.55), 0 0 0 6px rgba(74, 48, 96, 0.15);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

#ttl-launcher-btn:hover {
  background: #6b4a8a;
  transform: scale(1.06);
  box-shadow: 0 8px 36px rgba(74, 48, 96, 0.7), 0 0 0 8px rgba(74, 48, 96, 0.2);
}

#ttl-launcher-btn img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  display: block;
}

@media (max-width: 768px) {
  #ttl-launcher {
    right: 16px;
    bottom: 18px;
  }

  .ttl-launcher-wrap {
    width: 96px;
    height: 96px;
  }

  .ttl-ring-svg {
    width: 136px;
    height: 136px;
    top: -20px;
    left: -20px;
  }

  #ttl-launcher-btn {
    width: 96px;
    height: 96px;
  }

  #ttl-launcher-btn img {
    width: 84px;
    height: 84px;
  }
}

#ttl-launcher-btn span {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: #b978e5;
  color: #000000;
  padding: 9px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}


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

@keyframes launcherParpadeo {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 32px rgba(74, 48, 96, 0.55), 0 0 0 6px rgba(74, 48, 96, 0.15); }
  25%       { transform: scale(0.96); box-shadow: 0 4px 20px rgba(74, 48, 96, 0.35), 0 0 0 4px rgba(74, 48, 96, 0.1); }
  50%       { transform: scale(1.07); box-shadow: 0 8px 36px rgba(74, 48, 96, 0.7), 0 0 0 10px rgba(74, 48, 96, 0.25); }
  75%       { transform: scale(0.96); box-shadow: 0 4px 20px rgba(74, 48, 96, 0.35), 0 0 0 4px rgba(74, 48, 96, 0.1); }
}

#ttl-launcher-btn.parpadea {
  animation: launcherParpadeo 0.6s ease-in-out 2;
}