/* === Footer base === */
.main-footer {
  background: radial-gradient(circle at top, #1e293b 0%, #0f172a 100%);
  color: var(--lazarus-light);
  padding: 4rem 2rem 2rem;
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Cuando entra al viewport */
.main-footer.visible {
  opacity: 1;
  transform: translateY(0);
}

/* === Contenido del footer === */
.footer-content {
  /* Valor por defecto para pantallas grandes (4 columnas) */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

/* --- ADICIÓN CLAVE: Estilos para listas (QUITAR PUNTOS) --- */
.footer-section ul {
  list-style-type: none; 
  padding-left: 0;      
}

/* --- MEDIA QUERY PARA TABLETS (Ej: 768px y menos) --- */
@media (max-width: 768px) {
  .footer-content {
    /* En tablets, reduce a 2 columnas para que quepa mejor */
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 1.5rem; /* Aumenta la separación vertical, reduce la horizontal */
  }
}

/* --- MEDIA QUERY PARA MÓVILES (Ej: 576px y menos) --- */
@media (max-width: 576px) {
  .footer-content {
    /* En móviles, cambia a una sola columna para la mejor legibilidad */
    grid-template-columns: 1fr;
    gap: 2.5rem; /* Espacio entre secciones apiladas */
  }
}
/* ------------------------------------------------------------------- */

.footer-section h3 {
  color: var(--lazarus-white);
  margin-bottom: 1rem;
}

.footer-section a {
  color: var(--lazarus-light);
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer-section a:hover {
  color: var(--lazarus-accent-1, #fdfdfd);
  transform: translateX(4px);
}

/* === Redes sociales === */
.social-links {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

/* ... (El resto de estilos de redes sociales y footer-bottom se mantienen) ... */
.social-link {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.social-link svg {
  width: 22px;
  height: 22px;
  fill: var(--lazarus-light);
  transition: transform 0.3s ease, fill 0.3s ease;
}

/* === Hover individual por red === */

/* LinkedIn */
.social-link[aria-label="LinkedIn"]:hover {
  background-color: #0a66c2;
  box-shadow: 0 0 12px #0a66c2aa;
}
.social-link[aria-label="LinkedIn"]:hover svg {
  fill: #fff;
  transform: scale(1.2);
}

/* YouTube */
.social-link[aria-label="YouTube"]:hover {
  background-color: #ff0000;
  box-shadow: 0 0 12px #ff0000aa;
}
.social-link[aria-label="YouTube"]:hover svg {
  fill: #fff;
  transform: scale(1.2);
}

/* Facebook */
.social-link[aria-label="Facebook"]:hover {
  background-color: #1877f2;
  box-shadow: 0 0 12px #1877f2aa;
}
.social-link[aria-label="Facebook"]:hover svg {
  fill: #fff;
  transform: scale(1.2);
}

/* Instagram (degradado animado) */
.social-link[aria-label="Instagram"]:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  box-shadow: 0 0 12px #fd5949aa;
}
.social-link[aria-label="Instagram"]:hover svg {
  fill: #fff;
  transform: scale(1.2);
}

/* === Línea inferior === */
.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.5rem;
  font-size: 0.85rem;
  opacity: 0.8;
}