/**
 * ============================================================
 *  L-LEDS — FOOTER INSTITUCIONAL — EXTENSIÓN CSS
 *  Archivo : ll-footer.css
 *  Dep.    : ll-tokens.css + ll-layout.css (deben cargarse antes)
 *
 *  PROPÓSITO:
 *   Este archivo EXTIENDE (no reemplaza) el CSS base del footer
 *   definido en ll-layout.css (§ FOOTER, líneas 431–615).
 *   Solo agrega clases y variantes que el archivo base no cubre:
 *
 *   §1  Override del fondo (Negro Ónix más profundo que surface)
 *   §2  Grid de 3 columnas (override del 4-col base)
 *   §3  Columna de contacto con íconos SVG inline
 *   §4  Enlace con dot decorativo (nav rápida)
 *   §5  Íconos sociales — color por red (Instagram, WhatsApp)
 *   §6  Barra legal extendida (link Instagram inline)
 *   §7  Micro-animación de entrada de la línea LED
 *   §8  Responsive — ajustes sobre la base de ll-layout.css
 *   §9  Reducción de movimiento
 * ============================================================
 */


/* ═══════════════════════════════════════════════════════════
   §1 — FONDO DIFERENCIADO
   Más oscuro que --ll-color-bg-surface (#1B4000) pero con
   un toque verde para mantener la coherencia de la familia.
   El borde superior en verde LED es la firma visual.
   ═══════════════════════════════════════════════════════════ */

.ll-footer {
  /* Override: fondo casi-negro con matiz verde muy sutil */
  background    : #030600;

  /* Override: borde superior en verde LED 20% — más visible que el base */
  border-top    : 1px solid rgba(125, 218, 0, 0.20);

  /* Override: margen superior reducido para integrarse mejor al layout SPA */
  margin-top    : 0;
}


/* ═══════════════════════════════════════════════════════════
   §2 — GRID 3 COLUMNAS (override del base 4-col)
   Proporciones: 1.8fr (marca) · 1fr (nav) · 1.2fr (contacto)
   La columna de marca es más ancha para el tagline.
   ═══════════════════════════════════════════════════════════ */

.ll-footer__grid--3col {
  grid-template-columns : 1.8fr 1fr 1.2fr;
}

@media (max-width: 1023px) {
  .ll-footer__grid--3col {
    grid-template-columns : 1fr 1fr;
  }
  /* La columna de marca ocupa toda la primera fila en tablet */
  .ll-footer__grid--3col .ll-footer__brand {
    grid-column : 1 / -1;
  }
}

@media (max-width: 639px) {
  .ll-footer__grid--3col {
    grid-template-columns : 1fr;
    text-align            : left;
  }
}


/* ═══════════════════════════════════════════════════════════
   §3 — COLUMNA DE CONTACTO CON ÍCONOS SVG
   ═══════════════════════════════════════════════════════════ */

/* Lista de ítems de contacto */
.ll-footer__contact-list {
  list-style    : none;
  margin        : 0;
  padding       : 0;
  display       : flex;
  flex-direction: column;
  gap           : var(--ll-space-4);
}

/* Ítem de contacto: ícono + dato */
.ll-footer__contact-item {
  display       : flex;
  align-items   : flex-start;
  gap           : var(--ll-space-3);
}

/* Ícono del ítems de contacto */
.ll-footer__contact-icon {
  flex-shrink   : 0;
  width         : 16px;
  height        : 16px;
  margin-top    : 2px;       /* alinear con la primera línea del texto */
  color         : var(--ll-color-primary);
}

.ll-footer__contact-icon svg {
  width         : 16px;
  height        : 16px;
  stroke        : currentColor;
  fill          : none;
  display       : block;
}

/* WhatsApp icon usa fill */
.ll-footer__contact-icon svg[fill="currentColor"] {
  stroke        : none;
}

/* Dato de texto */
.ll-footer__contact-data {
  font-size     : var(--ll-text-sm);
  color         : var(--ll-color-text-secondary);
  line-height   : var(--ll-leading-loose);
  font-style    : normal;   /* <address> tiene italic por defecto */
}

.ll-footer__contact-sub {
  display       : block;
  font-size     : var(--ll-text-xs);
  color         : var(--ll-color-text-muted);
  margin-top    : 1px;
}

/* Link dentro del ítem de contacto */
.ll-footer__contact-link {
  font-size     : var(--ll-text-sm);
  color         : var(--ll-color-text-secondary);
  text-decoration: none;
  font-style    : normal;
  transition    : color var(--ll-transition-base);
}

.ll-footer__contact-link:hover {
  color         : var(--ll-color-primary);
}

/* Resetear el estilo italic del <address> */
.ll-footer__contact-col {
  font-style    : normal;
}


/* ═══════════════════════════════════════════════════════════
   §4 — ENLACE CON DOT DECORATIVO (nav rápida)
   Un punto verde LED antes de cada enlace de navegación,
   visible solo al hacer hover para no saturar visualmente.
   ═══════════════════════════════════════════════════════════ */

.ll-footer__link--with-icon {
  display       : flex;
  align-items   : center;
  gap           : var(--ll-space-2);
}

.ll-footer__link-dot {
  width         : 4px;
  height        : 4px;
  border-radius : var(--ll-radius-full);
  background    : var(--ll-color-primary);
  flex-shrink   : 0;
  opacity       : 0;
  transform     : scale(0);
  transition    : opacity var(--ll-transition-base),
                  transform var(--ll-transition-spring);
}

.ll-footer__link--with-icon:hover .ll-footer__link-dot {
  opacity       : 1;
  transform     : scale(1);
}


/* ═══════════════════════════════════════════════════════════
   §5 — ÍCONOS SOCIALES — COLOR POR RED
   Override del color base para que cada red tenga
   su color de marca al hacer hover (solo en el ícono
   específico, no en todos los links del footer).
   ═══════════════════════════════════════════════════════════ */

/* Instagram: gradiente de marca */
.ll-footer__social-link--instagram:hover {
  background    : rgba(225, 48, 108, 0.10);
  border-color  : rgba(225, 48, 108, 0.40);
  color         : #e1306c;
}

/* WhatsApp: verde oficial WA */
.ll-footer__social-link--whatsapp:hover {
  background    : rgba(37, 211, 102, 0.10);
  border-color  : rgba(37, 211, 102, 0.40);
  color         : #25D366;
}

/* El social-link de WhatsApp usa SVG fill, ajustar heredado */
.ll-footer__social-link svg[fill="currentColor"] {
  stroke        : none;
}

/* Asegurar que el SVG fill hereda el color del link */
.ll-footer__social-link {
  color         : var(--ll-color-text-secondary);
}


/* ═══════════════════════════════════════════════════════════
   §6 — BARRA LEGAL EXTENDIDA
   Override del link legal para soportar el Instagram inline
   con ícono SVG pequeño.
   ═══════════════════════════════════════════════════════════ */

.ll-footer__legal-link {
  font-size     : var(--ll-text-xs);
  color         : var(--ll-color-text-muted);
  text-decoration: none;
  transition    : color var(--ll-transition-base);
}

.ll-footer__legal-link:hover {
  color         : var(--ll-color-text-secondary);
}

/* Link de Instagram en barra legal — con ícono inline */
.ll-footer__legal-link--instagram {
  display       : inline-flex;
  align-items   : center;
  gap           : var(--ll-space-1);
}

.ll-footer__legal-link--instagram svg {
  stroke        : currentColor;
  fill          : none;
  flex-shrink   : 0;
}

.ll-footer__legal-link--instagram:hover {
  color         : #e1306c;   /* rosa Instagram al hacer hover */
}

/* Separador · entre links legales */
.ll-footer__legal-links li[aria-hidden="true"] {
  color         : var(--ll-color-text-muted);
  font-size     : var(--ll-text-xs);
  user-select   : none;
}


/* ═══════════════════════════════════════════════════════════
   §7 — MICRO-ANIMACIÓN: LÍNEA LED
   La línea superior se enciende desde el centro hacia
   los extremos al entrar en el viewport.
   ═══════════════════════════════════════════════════════════ */

.ll-footer__led-line {
  /* Override: glow más intenso + gradiente bicolor de marca */
  background    : linear-gradient(
    90deg,
    transparent 0%,
    var(--ll-color-primary)  30%,
    var(--ll-color-secondary) 50%,
    var(--ll-color-primary)  70%,
    transparent 100%
  );
  opacity       : 0;
  animation     : ll-footer-led-on 1.2s ease forwards;
  animation-delay: 0.3s;

  /* Glow sutil */
  filter        : drop-shadow(0 0 6px rgba(125, 218, 0, 0.45));
}

@keyframes ll-footer-led-on {
  from {
    opacity     : 0;
    filter      : drop-shadow(0 0 0px rgba(125, 218, 0, 0));
  }
  to {
    opacity     : 0.55;
    filter      : drop-shadow(0 0 8px rgba(125, 218, 0, 0.40));
  }
}


/* ═══════════════════════════════════════════════════════════
   §8 — RESPONSIVE — AJUSTES ADICIONALES
   Complementa (no reemplaza) los breakpoints de ll-layout.css
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

  /* El tagline puede ser más ancho en tablet */
  .ll-footer__brand-tagline {
    max-width   : none;
  }

}

@media (max-width: 639px) {

  /* Barra legal: stack vertical en mobile muy pequeño */
  .ll-footer__bottom {
    flex-direction : column;
    align-items    : flex-start;
    gap            : var(--ll-space-3);
  }

  /* Reducir padding lateral del grid en mobile */
  .ll-footer__grid {
    gap           : var(--ll-space-8);
  }

}


/* ═══════════════════════════════════════════════════════════
   §9 — REDUCCIÓN DE MOVIMIENTO
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

  .ll-footer__led-line {
    animation   : none;
    opacity     : 0.40;
  }

  .ll-footer__link-dot,
  .ll-footer__social-link,
  .ll-footer__contact-link,
  .ll-footer__legal-link {
    transition  : none;
  }

}