/**
 * ============================================================================
 * UDLAP Footers — CSS portátil (v1)
 * ============================================================================
 *
 * Archivo autónomo para reutilizar el pie de página UDLAP en otros proyectos.
 * No depende de styles.css / visita-ciudad.css / components.css del sitio origen.
 *
 * VARIANTES
 * --------
 * 1) Footer INTERNAS (simple)
 *    Markup: <footer class="footer"> … .footer-content / .footer-logo / .footer-text / .footer-link
 *    Componente de referencia: FooterSimple.astro
 *
 * 2) Footer PRINCIPAL (full / visita-footer)
 *    Markup: <footer class="footer visita-footer"> … clases BEM visita-footer__*
 *    Componente de referencia: Footer.astro
 *
 * BREAKPOINTS
 * -----------
 * - Footer principal desktop (3 columnas, checks visibles, texto a la izquierda): min-width 993px
 * - Logo footer simple (max-width 250px): max-width 1024px
 *
 * TOKENS (definidos abajo; también se exponen aliases compatibles)
 * -----
 * --color-footer, --color-footer-copyright
 * --color-accent-orange (fallback #ff6b35)
 * --ease-in-out
 * --font-hero / --font-body  (Lexend / Source Sans 3; este archivo las carga)
 *
 * TIPOGRAFÍA
 * ----------
 * Lexend + Source Sans 3 se importan aquí para que el CSS no “se rompa” si el
 * proyecto destino aún no las tiene.
 *
 * AÑO DINÁMICO (el CSS no puede calcular el año)
 * --------------
 * En Astro / plantillas:
 *   const year = new Date().getFullYear();
 *   … © <span class="udlap-footer-year">{year}</span> …
 *
 * En HTML estático + JS (opcional):
 *   document.querySelectorAll('.udlap-footer-year').forEach((el) => {
 *     el.textContent = String(new Date().getFullYear());
 *   });
 *
 * LOGO (imagen remota, no es CSS)
 * -------------------------------
 * https://www.udlap.mx/web/images/85Aniversario-UDLAP.png
 *
 * USO
 * ---
 * <link rel="stylesheet" href="…/udlap-footers.css" />
 * ============================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   Tokens
   Prefijo --udlap-footer-* + aliases (--color-footer, --font-hero, etc.)
   para no depender de que el :root del host ya los defina.
   -------------------------------------------------------------------------- */
:root {
  --udlap-footer-bg: #262d27;
  --udlap-footer-bg-copyright: #1e2420;
  --udlap-footer-bg-full: #1a1a1a;
  --udlap-footer-accent: #ff6b35;
  --udlap-footer-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --udlap-footer-font-hero: 'Lexend', sans-serif;
  --udlap-footer-font-body: 'Source Sans 3', sans-serif;
  --udlap-footer-text: #ffffff;
  --udlap-footer-text-muted: #cccccc;
  --udlap-footer-text-dim: rgba(255, 255, 255, 0.75);
  --udlap-footer-border: rgba(255, 255, 255, 0.1);
  --udlap-footer-link-hover-simple: #e2e8f0;
}

/*
 * No se redefinen --color-footer / --font-hero / etc. en :root global
 * para no pisar el design system del host. Las reglas usan:
 *   var(--token-host, var(--udlap-footer-*))
 * Así, si el host ya tiene el token, se usa; si no, el fallback portátil.
 */
[data-theme='dark'] {
  --udlap-footer-bg: #131517;
  --udlap-footer-bg-copyright: #0a0b0c;
}

/* --------------------------------------------------------------------------
   Contenedor propio del footer principal
   Evita depender de la utilidad global .container de styles.css.
   -------------------------------------------------------------------------- */
.udlap-footer__container,
.visita-footer__inner.udlap-footer__container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
}

/* Año dinámico: solo marca el nodo; el valor lo pone la plantilla / JS */
.udlap-footer-year {
  font: inherit;
  color: inherit;
}

/* ============================================================================
   FOOTER INTERNAS (simple)
   Markup: FooterSimple — <footer class="footer"> sin .visita-footer
   ============================================================================ */

/**
 * .footer — Contenedor raíz compartido (simple y base del full).
 * Uso: FooterSimple y Footer (junto con .visita-footer).
 * Móvil/tableta/desktop: full width, centrado, tipografía body.
 */
.footer {
  background: var(--color-footer, var(--udlap-footer-bg));
  color: var(--udlap-footer-text);
  margin-top: 50px;
  padding: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  text-align: center;
  font-family: var(--font-body, var(--udlap-footer-font-body));
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.75;
}

/**
 * .footer-content — Bloque logo + copy legal (solo footer simple).
 * Fondo copyright; padding 3rem 1.5rem 2rem; ancho completo.
 */
.footer-content {
  background: var(--color-footer-copyright, var(--udlap-footer-bg-copyright));
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 3rem 1.5rem 2rem;
  box-sizing: border-box;
}

/**
 * .footer-logo — Logo 85 aniversario centrado (imagen).
 * Desktop: max-width 300px. ≤1024px: max-width 250px.
 */
.footer-logo {
  max-width: 300px;
  margin: 0 auto 30px;
  display: block;
  height: auto;
}

/**
 * .footer-text — Párrafo legal + contacto en una sola composición.
 * Max-width 800px; Source Sans 3 0.9375rem.
 */
.footer-text {
  max-width: 800px;
  margin: 0 auto 0.5rem;
  font-family: var(--font-body, var(--udlap-footer-font-body));
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: inherit;
}

/**
 * .footer-link — mailto / aviso de privacidad en footer simple.
 * Color naranja; hover #E2E8F0 (también en dark).
 */
.footer-link {
  color: var(--color-accent-orange, var(--udlap-footer-accent));
  transition: color 0.45s var(--ease-in-out, var(--udlap-footer-ease));
  text-decoration: none;
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--udlap-footer-link-hover-simple);
}

[data-theme='dark'] .footer-link:hover,
[data-theme='dark'] .footer-link:focus-visible {
  color: var(--udlap-footer-link-hover-simple);
}

@media (max-width: 1024px) {
  .footer-logo {
    max-width: 250px;
  }
}

/* ============================================================================
   FOOTER PRINCIPAL (visita-footer / full)
   Markup: Footer — <footer class="footer visita-footer">
   Breakpoint desktop: 993px
   ============================================================================ */

/**
 * .visita-footer — Shell del footer completo (home).
 * Fondo #1a1a1a, borde superior, margin-top 3.125rem, texto claro.
 * Sobrescribe el fondo verde de .footer.
 */
.visita-footer {
  margin-top: 3.125rem;
  background: var(--udlap-footer-bg-full) !important;
  color: #e8e8e8;
  border-top: 1px solid var(--udlap-footer-border);
  text-align: left;
}

/**
 * .visita-footer__inner — Wrapper interno (+ .udlap-footer__container).
 * Padding 3rem 1rem; ≥993px: 4rem 1rem.
 */
.visita-footer__inner {
  padding: 3rem 1rem;
}

/**
 * .visita-footer__grid — Grid brand / contacto / nav.
 * <993px: 1 columna, gap 2.5rem. ≥993px: 3 columnas, gap 2rem.
 */
.visita-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 75rem;
  margin-inline: auto;
}

@media (min-width: 993px) {
  .visita-footer__inner {
    padding: 4rem 1rem;
  }

  .visita-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

/**
 * .visita-footer__col — Columna genérica del grid.
 */
.visita-footer__col {
  min-width: 0;
}

/**
 * .visita-footer__col--brand — Logo + redes. Siempre centrada (flex column).
 */
.visita-footer__col--brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/**
 * .visita-footer__logo — Logo 85 aniversario (img).
 * Alto fluido clamp(6rem–8rem), max-width 13.75rem.
 */
.visita-footer__logo {
  width: auto;
  height: clamp(6rem, 14vw, 8rem);
  max-width: 13.75rem;
  margin: 0 0 1.5rem;
  object-fit: contain;
}

/**
 * .visita-footer__social — Lista de redes (ul). Flex centrado, wrap, gap 1rem.
 */
.visita-footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/**
 * .visita-footer__social-btn — Botón circular por red (a).
 * 2.5rem; fondo blanco 10%; hover naranja.
 */
.visita-footer__social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
  transition:
    background 0.35s var(--ease-in-out, var(--udlap-footer-ease)),
    color 0.35s var(--ease-in-out, var(--udlap-footer-ease));
}

/**
 * .visita-footer__social-btn svg — Icono SVG dentro del botón (1.25rem).
 */
.visita-footer__social-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.visita-footer__social-btn:hover,
.visita-footer__social-btn:focus-visible {
  background: var(--color-accent-orange, var(--udlap-footer-accent));
  color: #fff;
  text-decoration: none;
}

/**
 * .visita-footer__col--contacto / --nav — Alineación.
 * <993px: centrado. ≥993px: text-align left.
 */
.visita-footer__col--contacto,
.visita-footer__col--nav {
  text-align: center;
}

@media (min-width: 993px) {
  .visita-footer__col--contacto,
  .visita-footer__col--nav {
    text-align: left;
  }
}

/**
 * .visita-footer__heading — Títulos “Contacto” / “Menú de navegación”.
 * Lexend 1.25rem / 700 / blanco (alineado a referencia Deportes / ~20px).
 */
.visita-footer__heading {
  margin: 0 0 1rem;
  font-family: var(--font-hero, var(--udlap-footer-font-hero));
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff !important;
}

/**
 * .visita-footer__address — Bloque dirección / tel / correo.
 * 1.1875rem (~19px), mismo tamaño que .visita-footer__nav-link; #ccc; sin itálica.
 */
.visita-footer__address {
  font-style: normal;
  font-size: 1.1875rem;
  line-height: 1.45;
  color: var(--udlap-footer-text-muted);
  font-family: var(--font-body, var(--udlap-footer-font-body));
}

.visita-footer__address p {
  margin: 0 0 0.5rem;
}

.visita-footer__address p:last-child {
  margin-bottom: 0;
}

/**
 * .visita-footer__link — Enlaces naranja (mailto, privacidad). Hover a blanco.
 */
.visita-footer__link {
  color: var(--color-accent-orange, var(--udlap-footer-accent));
  text-decoration: none;
  transition: color 0.35s var(--ease-in-out, var(--udlap-footer-ease));
}

.visita-footer__link:hover,
.visita-footer__link:focus-visible {
  color: #fff;
}

/**
 * .visita-footer__nav — Lista del menú. Sin bullets; line-height 1.25.
 */
.visita-footer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.25;
}

.visita-footer__nav li + li {
  margin-top: 0.125rem;
}

/**
 * .visita-footer__nav-link — Enlace de menú con check + texto.
 * Source Sans ~1.1875rem, #ccc, hover naranja.
 */
.visita-footer__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  font-family: var(--font-body, var(--udlap-footer-font-body));
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--udlap-footer-text-muted);
  text-decoration: none;
  transition: color 0.35s var(--ease-in-out, var(--udlap-footer-ease));
}

.visita-footer__nav-link:hover,
.visita-footer__nav-link:focus-visible {
  color: var(--color-accent-orange, var(--udlap-footer-accent));
  text-decoration: none;
}

/**
 * .visita-footer__check — SVG check del menú.
 * Oculto <993px; visible ≥993px. Color naranja.
 */
.visita-footer__check {
  display: none;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--color-accent-orange, var(--udlap-footer-accent));
}

@media (min-width: 993px) {
  .visita-footer__check {
    display: block;
  }
}

/**
 * .visita-footer__legal — Franja inferior legal. Padding, borde superior, centrado.
 */
.visita-footer__legal {
  padding: 1.25rem 1rem 2rem;
  border-top: 1px solid var(--udlap-footer-border);
  text-align: center;
}

/**
 * .visita-footer__copyright — Copy legal del footer principal.
 * Max-width 800px, 0.9375rem, blanco 75% opacidad.
 * Incluir año con <span class="udlap-footer-year">…</span>.
 */
.visita-footer__copyright {
  margin: 0 auto 0.5rem;
  max-width: 800px;
  font-family: var(--font-body, var(--udlap-footer-font-body));
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--udlap-footer-text-dim);
}