/* ==========================================================================
   FOOTER — DIGART Studio
   Pattern: Footer

   Referencia documental:
     project/10-HOME-BLUEPRINT.md (10. Footer)
     project/11-HOME-WIREFRAME.md (10. Footer)
     project/12-HOME-MOCKUP.md (3.10 Footer)
     project/13-UI-DESIGN-SYSTEM.md (4.1 Grid, 4.2 Contenedores, 5.4
     Jerarquía, Capítulo 9 Estados, Capítulo 10 Motion, Capítulo 11
     Responsive)
     D-015 (Metodología oficial de implementación de Patterns)

   Sección editorial: consume el Content Container (.l-container) y el
   Grid oficial de 12 columnas (.l-grid, .l-col-3, .l-col-12) ya
   resueltos en layout.css. Este archivo no redefine su comportamiento.

   Este archivo consume exclusivamente los Design Tokens (tokens.css) y
   la infraestructura de Layout (layout.css). No declara valores
   independientes de color, tipografía, espaciado, tiempo, easing,
   z-index, sombra ni punto de quiebre.

   Segunda implementación (Implementación visual, D-015): continuidad de
   fondo editorial con Call To Action y área de montaje del logotipo
   institucional. El espaciado entre bloques (Mensaje de cierre, Footer
   institucional, Información legal) y la tipografía de todos los
   elementos ya consumían Design Tokens desde la primera implementación
   y no requirieron cambios; tampoco se agregó un padding-block propio
   en Root para no duplicar el ritmo más compacto ya documentado en
   Elements (3). Se activó el movimiento de Aparición mediante
   .footer--ready, ya aplicado por footer.js. No incluye el logotipo
   real, JavaScript ni reglas Responsive específicas.

   Refinamiento visual (D-036): el Footer adopta el fondo editorial
   oscuro (--color-background-inverse) como continuación natural del
   Call To Action. El texto consume los Tokens existentes para
   superficies oscuras (--color-text-inverse y --color-overlay-inverse)
   y los enlaces adoptan el rojo institucional (--color-error) en Hover/
   Focus, mismo criterio cromático del resto de la nueva Dirección de
   Arte. Estructura, espaciados y jerarquía tipográfica sin cambios.

   Refinamiento premium (Pattern Footer compartido): corrige la
   sensación plana sin sobrecargar el diseño, únicamente con Tokens ya
   existentes. Acento editorial corto en rojo institucional sobre los
   títulos de Navegación/Especialidades/Contacto; Contacto se
   diferencia como punto focal con borde sutil y acento vertical rojo
   (mismo criterio del filete de Root); Redes sociales pasa de texto
   plano a controles compactos (icono + etiqueta) con el mismo
   tratamiento de borde; el bloque legal se agrupa en una fila
   equilibrada con separador editorial en Desktop y conserva su
   apilado original en Responsive (7).
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   .footer no redefine .l-container. Replica únicamente el mismo fondo
   editorial oscuro de Call To Action, para que el cierre institucional
   se perciba como continuación de la misma experiencia y no como un
   elemento aislado (Blueprint 10, "Composición visual"). No declara
   espaciado vertical propio: el ritmo más compacto del Footer ya se
   resuelve mediante los padding-block de cada bloque interno (3,
   Elements), y duplicarlo aquí alteraría esa jerarquía ya documentada.
   Refinamiento D-036: filete superior de 1px como separador editorial
   entre Call To Action y Footer, con el mismo tratamiento sobre fondo
   oscuro ya aprobado en el Header sólido (--color-text-secondary como
   color de borde); sin blanco puro ni colores independientes, y sin
   alterar alturas ni espaciados propios.
   -------------------------------------------------------------------- */
.footer {
  background-color: var(--color-background-inverse);
  border-block-start: var(--border-width-default) var(--border-style-solid) var(--color-text-secondary);
}

/* --------------------------------------------------------------------
   2. Container
   .footer__container delega por completo su comportamiento en
   .l-container (layout.css); no se declara ninguna propiedad adicional
   para evitar duplicar lógica ya resuelta (13.3 Consumo del Sistema).
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   3. Elements
   El Footer se organiza en tres bloques hermanos (Wireframe 10,
   "Estructura"): Mensaje de cierre, Footer institucional e Información
   legal. El espaciado entre bloques utiliza tokens moderados
   (--space-5, --space-6) para reforzar un ritmo visual más compacto que
   el resto de la Home (Wireframe 10, "Distribución"), manteniendo una
   jerarquía secundaria que no compite con el Call To Action.
   -------------------------------------------------------------------- */

/* Mensaje de cierre: punto focal inicial del Footer (Wireframe 10,
   "Jerarquía"), de menor peso visual que el mensaje principal del Call
   To Action para no competir con él. */
.footer__closing {
  padding-block: var(--space-6);
  text-align: center;
}

.footer__closing-message {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  color: var(--color-text-inverse);
}

/* Footer institucional: logotipo, navegación secundaria, unidades
   especializadas e información de contacto, distribuidos en columnas
   equivalentes (Wireframe 10, Esquema espacial "LOGO NAV CONTACTO
   REDES"). */
.footer__institutional {
  padding-block: var(--space-6);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Área de montaje del logotipo institucional: reserva una proporción
   contenida y discreta, coherente con la jerarquía secundaria del
   Footer (3, Elements), a la espera del recurso definitivo (SVG/
   imagen). Sin marca, color ni forma propia: mismo criterio ya
   aplicado en el área de montaje del logotipo de Loading Screen.
   Refinamiento D-036 (segunda iteración): el ancho gana nuevamente un
   ~22% de presencia (factor 1.8 → 2.2 sobre el mismo Token); el recurso
   conserva sus proporciones mediante height: auto del reset y la altura
   reservada no cambia. Ahora es un enlace a Inicio (<a>, antes <div>
   no interactivo): display: inline-flex (mismo criterio ya aplicado en
   .header__logo) preserva el ancho/alto reservados, que un elemento en
   línea por defecto ignoraría.
   Refinamiento Pattern Footer compartido: el ancho gana un ~80% de
   presencia adicional (factor 2.2 → 3.96 sobre el mismo Token). Como el
   ancho reservado supera ahora el tamaño intrínseco del recurso, se
   añade width: 100% al elemento img (Elements) para que el SVG llene el
   contenedor y escale correctamente; height: auto (reset) sigue
   preservando sus proporciones exactas. La altura reservada
   (var(--space-8)) no cambia: a este factor el alto renderizado del
   logotipo permanece por debajo de dicho Token, por lo que el espacio
   vertical frente a la descripción no requiere ajuste adicional. */
.footer__logo {
  display: inline-flex;
  align-items: center;
  width: calc(var(--space-8) * 3.96);
  height: var(--space-8);
}

.footer__logo img {
  width: 100%;
  height: auto;
}

.footer__description {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-overlay-inverse);
}

/* .footer__nav y .footer__units incorporan una etiqueta narrativa
   (footer__contact-title) sobre su lista de enlaces; mismo criterio de
   composición vertical ya utilizado en .footer__contact. Refinamiento
   premium: el Token de separación sube a --space-4 (antes --space-3)
   para una lectura más clara entre la etiqueta y su lista, sin alterar
   la jerarquía tipográfica existente. */
.footer__nav,
.footer__units {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__nav-list,
.footer__units-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* .footer__nav-item y .footer__units-item no requieren propiedades
   propias adicionales. */

.footer__nav-link,
.footer__units-link {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-inverse);
}

/* Punto focal del Footer institucional: borde sutil (--color-text-secondary,
   mismo Token ya usado en el filete de Root) más un acento vertical rojo
   discreto al lado izquierdo (--color-error), sin sombra ni fondo propio,
   para diferenciar el bloque de Contacto sobre el fondo oscuro sin
   convertirlo en una tarjeta flotante. border-radius-sm (Token existente)
   evita cualquier forma decorativa nueva. */
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border-width-default) var(--border-style-solid) var(--color-text-secondary);
  border-inline-start-width: var(--border-width-thick);
  border-inline-start-color: var(--color-error);
  border-radius: var(--border-radius-sm);
}

/* Etiqueta del bloque de contacto. Mismo nivel jerárquico Label (13.2)
   utilizado para las etiquetas narrativas de Success Stories
   (challenge/solution/result-label), manteniendo coherencia tipográfica
   entre Patterns editoriales. Refinamiento premium: acento editorial
   corto (::before) en rojo institucional, mismo Token cromático
   (--color-error) ya usado en Hover/Focus (5, States), sin introducir
   color nuevo. */
.footer__contact-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-overlay-inverse);
}

.footer__contact-title::before {
  content: '';
  display: block;
  width: var(--space-5);
  height: var(--border-width-thick);
  margin-block-end: var(--space-2);
  background-color: var(--color-error);
}

.footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Cada canal combina un icono lineal decorativo con su texto visible
   (12, Iconografía): el icono nunca es el único portador de significado. */
.footer__contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__contact-link,
.footer__address {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-inverse);
}

/* <address> aplica cursiva por defecto (reset no la neutraliza a nivel
   global); se restablece aquí para conservar la misma jerarquía
   tipográfica del resto del bloque de contacto. Incorpora el mismo
   patrón icono + texto que .footer__contact-item; align-items:
   flex-start ancla el icono a la primera línea cuando el domicilio
   envuelve a dos líneas. */
.footer__address {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-style: normal;
}

/* Iconografía del bloque de Contacto: trazo lineal geométrico
   (viewBox 24x24, stroke: currentColor), mismo criterio ya establecido
   en contact-channels.css. Color neutro (--color-overlay-inverse) para
   Teléfono, Correo y Ubicación; el icono de WhatsApp (assets/icons/
   whatsapp.svg) conserva su verde de marca propio, único caso permitido
   (12, Iconografía) y no hereda este color por tratarse de una imagen. */
.footer__contact-icon {
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
  color: var(--color-overlay-inverse);
}

.footer__contact-icon--whatsapp {
  border-radius: var(--border-radius-full);
}

.footer__social-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* .footer__social-item no requiere propiedades propias adicionales. */

/* Redes sociales como controles compactos (icono + etiqueta visible):
   borde sutil (mismo Token que .footer__contact) y área táctil
   adecuada mediante padding-block/padding-inline; sin fondo ni sombra
   propios. */
.footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border: var(--border-width-default) var(--border-style-solid) var(--color-text-secondary);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-inverse);
}

.footer__social-icon {
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
}

/* Información legal y derechos de autor: nivel jerárquico más bajo del
   Pattern (Wireframe 10, "Jerarquía"), reforzando la baja densidad
   visual exigida para este bloque. */
.footer__legal {
  padding-block: var(--space-5);
  text-align: center;
}

/* Refinamiento premium: en Desktop los tres elementos legales se
   presentan en una misma fila equilibrada (justify-content: center),
   con un separador editorial sutil (mismo Token de borde ya usado en
   .footer__contact) entre cada elemento; en Responsive (7) se restituye
   el apilado original de una sola columna. */
.footer__legal-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
}

.footer__legal-content > *:not(:first-child) {
  padding-inline-start: var(--space-4);
  border-inline-start: var(--border-width-default) var(--border-style-solid) var(--color-text-secondary);
}

.footer__legal-text,
.footer__copyright {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-overlay-inverse);
}

/* --------------------------------------------------------------------
   4. Variants
   El Pattern no define variantes en el Blueprint, Wireframe ni Mockup
   oficiales de la Home; sección reservada sin reglas.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   5. States
   Estado base (Default) representado por las reglas de Elements.
   Refinamiento D-036: los enlaces conservan su comportamiento actual y
   únicamente adoptan en Hover/Focus el rojo institucional ya existente
   (--color-error), mismo criterio cromático aplicado en los enlaces de
   Idea Origin y Success Stories. El resto de los estados se reserva al
   futuro Componente oficial Enlace/Navegación.
   -------------------------------------------------------------------- */
.footer__nav-link:hover,
.footer__nav-link:focus-visible,
.footer__units-link:hover,
.footer__units-link:focus-visible,
.footer__contact-link:hover,
.footer__contact-link:focus-visible {
  color: var(--color-error);
}

/* Los controles compactos de Redes sociales (3, Elements) refuerzan el
   mismo rojo institucional también en su borde, para que Hover/Focus
   sea perceptible en la caja completa del control, no solo en el
   texto. */
.footer__social-link:hover,
.footer__social-link:focus-visible {
  color: var(--color-error);
  border-color: var(--color-error);
}

/* --------------------------------------------------------------------
   6. Motion Hooks
   Activa una aparición discreta y consistente con el resto del sitio
   (Blueprint 10, "Interacción") mediante su disparador funcional real
   ya existente: footer.js aplica la clase .footer--ready directamente
   sobre .footer tan pronto el IntersectionObserver detecta la sección
   en el viewport, después de recibir calltoaction:ready. El disparador
   y el Motion Hook coinciden en el mismo elemento, sin necesidad de un
   selector descendiente.
   -------------------------------------------------------------------- */
.footer {
  opacity: 0;
  transition: opacity var(--motion-duration-slow) var(--motion-easing-standard);
}

.footer--ready {
  opacity: 1;
}

/* --------------------------------------------------------------------
   7. Responsive
   Sistema Responsive (Cap. 11), breakpoints oficiales de tokens.css
   reproducidos en valor literal, mismo criterio que layout.css.
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px
   El Grid oficial se reduce a 8 columnas (layout.css 8) y las columnas
   l-col-3/l-col-2/l-col-3/l-col-4 del Footer institucional dejan de
   representar la composición Desktop; el contenido se reorganiza en una
   sola columna de ancho completo conservando el orden natural del
   marcado: logotipo, descripción institucional, navegación secundaria,
   unidades especializadas, contacto, redes sociales, aviso de
   privacidad y copyright. El ritmo vertical entre bloques lo resuelve
   el row-gap del Grid oficial (--space-4 en este breakpoint) y la
   separación del bloque legal la conservan los padding-block ya
   declarados en Elements; no se introduce ningún valor de espaciado
   nuevo. El logotipo se centra visualmente y gana el mismo ~80% de
   presencia adicional ya documentado en Elements (factor 2.6 → 4.68
   sobre el mismo Token), conservando sus proporciones exactas mediante
   width: 100%/height: auto ya declarados en Elements. La lista de
   redes sociales conserva su estructura horizontal y únicamente se le
   permite envolver para garantizar que no desborde el viewport. */
@media (max-width: 768px) {
  .footer__brand,
  .footer__nav,
  .footer__units,
  .footer__contact {
    grid-column: 1 / -1;
  }

  .footer__logo {
    width: calc(var(--space-8) * 4.68);
    margin-inline: auto;
  }

  .footer__social-list {
    flex-wrap: wrap;
  }

  /* Bloque legal (D, Responsive y accesibilidad): reflow a una sola
     columna, retirando el separador editorial propio de la fila de
     Desktop (Elements). */
  .footer__legal-content {
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
  }

  .footer__legal-content > *:not(:first-child) {
    padding-inline-start: 0;
    border-inline-start: none;
  }
}