/* ========================================
COMPONENTE: FOOTER
Inspirado en la estructura y estilos
de base.css, layout.css, header.css, etc.
======================================== */

:root {
  /* Variables específicas del Footer. Priorizar globales. */
  --footer-bg-color: var(
    --neutral-color-dark,
    #171717
  ); /* Asumiendo --neutral-color-dark o fallback */
  --footer-text-color: var(
    --neutral-color-light,
    #cccccc
  ); /* Asumiendo --neutral-color-light o fallback */
  --footer-title-color: var(--color-text-wt);
  --footer-link-color: var(--neutral-color-light, #cccccc);
  --footer-link-hover-color: var(--color-accent);
  --footer-border-color: var(
    --neutral-color,
    #444444
  ); /* Asumiendo --neutral-color o fallback */
  --footer-icon-color: var(--color-accent);
  --linkedin-color: #258dbf;
  --instagram-color: #e1306c;
  --whatsapp-color: #25d366; /* Coherente con solutions.css */
}

.footer {
  background-color: var(--footer-bg-color);
  color: var(--footer-text-color);
  /* Padding superior consistente con otras secciones, inferior lo da el bottom-bar */
  padding: var(--spacing-l) 0 0 0;
  font-family: var(--font-secondary); /* Fuente secundaria para texto general */
  font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1rem); /* Tamaño base responsive */
  line-height: 1.6; /* Buena legibilidad */
  border-top: 2px solid var(--color-accent);
}

.footer__container {
  /* Layout consistente con otros containers */
  max-width: var(--max-width);
  margin: 0 auto;
  /* Padding lateral consistente */
  padding: 0 var(--spacing-s); /* Mobile padding */
  /* Flexbox para las columnas */
  display: flex;
  flex-wrap: wrap; /* Para que se apilen en móvil */
  justify-content: space-between;
  gap: var(--spacing-m); /* Espacio entre columnas, ajustable */
}

.footer__column {
  flex: 1; /* Distribución equitativa del espacio */
  /* Ancho mínimo antes de envolver, ajustar según contenido */
  min-width: 200px;
  /* Espacio inferior cuando se apilan (ver media query max-width: 767px) */
  margin-bottom: var(--spacing-l);
}

/* --- Columna About --- */
.footer__column--about .footer__logo-link {
  display: inline-block; /* Para margen y transform */
  margin-bottom: var(--spacing-m);
  transition: transform 0.3s var(--transition-timing, ease),
    opacity 0.3s var(--transition-timing, ease);
}
.footer__column--about .footer__logo-link:hover {
  opacity: 0.85;
  transform: scale(1.03); /* Efecto hover sutil como en header */
}

.footer__column--about .footer__logo-image {
  display: block;
  /* Ajustar tamaño si es necesario, mantener proporción */
  max-width: 200px;
  height: auto;
}

.footer__about-text {
    margin: 0 0 var(--spacing-m) 0;
    max-width: 45ch; /* Limitar ancho de línea para legibilidad */
}

.footer__social-links {
    height: fit-content;
    padding: 0;
    display: flex;
    gap: var(--spacing-m);
}

.footer__social-links a {
    color: var(--footer-icon-color);
    font-size: 1.6rem;
    transition: all 0.3s ease;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border-radius: 6px;
    width: 35px;
    height: 35px;
}

.footer__social-links a:hover {
    /* transform: scale(1.15); */
}
/* Estilo específico LinkedIn :hover */
.footer__social-links a[aria-label="LinkedIn"]:hover {
    color: white;
    background-color: var(--linkedin-color);
}
/* Estilo específico Instagram :hover */
.footer__social-links a[aria-label="Instagram"]:hover {
    color: white;
    background: linear-gradient(
        to right,
        #833ab4,#fd1d1d,#fcb045);
}
/* Estilo específico WhatsApp :hover (como en solutions.css) */
.footer__social-links a[aria-label="WhatsApp"]:hover {
    color: white;
    background-color: var(--whatsapp-color);
}

/* --- Columnas Links & Contacto --- */
.footer__column-title {
  color: var(--footer-title-color);
  font-family: var(--font-primary); /* Fuente primaria para títulos */
  font-size: clamp(1.2rem, 1rem + 1vw, 1.4rem); /* Responsive */
  font-weight: 500; /* Consistente con otros títulos de sección */
  margin: 0 0 var(--spacing-m) 0;
  padding-bottom: var(--spacing-xs);
  position: relative;
  display: inline-block; /* Para que el ::after se ajuste al texto */
}

/* Línea decorativa bajo títulos (similar a section-divider) */
.footer__column-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px; /* Ancho fijo o % */
  height: 2px; /* Coherente con section-divider? Ajustar si es necesario */
  background-color: var(--color-accent);
  /* No necesita ::before como el divider completo */
}

.footer__links-list,
.footer__contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__links-list li,
.footer__contact-item {
  margin-bottom: var(--spacing-s); /* Espacio entre elementos de lista */
}
.footer__links-list li:last-child,
.footer__contact-item:last-child {
  margin-bottom: 0; /* Evitar doble margen */
}

.footer__link {
  color: var(--footer-link-color);
  text-decoration: none;
  /* Efecto hover sutil consistente */
  transition: color 0.3s var(--transition-timing, ease),
    padding-left 0.3s var(--transition-timing, ease);
  position: relative;
}
.footer__link:hover {
  color: var(--footer-link-hover-color);
  padding-left: 5px; /* Efecto de desplazamiento */
}

/* --- Columna Contacto Específico --- */
.footer__contact-item {
  display: flex;
  align-items: flex-start; /* Alinear al inicio por si texto ocupa varias líneas */
}

.footer__contact-icon {
  color: var(--footer-icon-color);
  margin-right: var(--spacing-s); /* Espacio icono-texto */
  margin-top: 0.2em; /* Ajuste vertical fino */
  font-size: 1.1em; /* Icono ligeramente más grande */
  min-width: 20px; /* Espacio uniforme para iconos */
  text-align: center;
  flex-shrink: 0; /* Evita que el icono se encoja */
}

.footer__contact-text {
  /* Estilos adicionales si son necesarios */
}

.footer__link--contact {
  /* Hereda estilos de .footer__link */
  /* Resetear efecto hover para enlaces de contacto */
  padding-left: 0;
  word-break: break-word; /* Permitir quiebre de palabras en textos largos */
}
.footer__link--contact:hover {
  padding-left: 0; /* Mantener sin desplazamiento */
  color: var(--footer-link-hover-color); /* Solo cambio de color */
  text-decoration: underline; /* Añadir subrayado en hover para claridad */
}

/* --- Barra Inferior --- */
.footer__bottom-bar {
  border-top: 1px solid var(--footer-border-color);
  margin-top: var(--spacing-l); /* Espacio sobre la barra */
  /* Padding vertical y horizontal */
  padding: var(--spacing-m) var(--spacing-s); /* Padding móvil */
  text-align: center;
}

.footer__copyright {
  margin: 0;
  /* Tamaño de fuente más pequeño, responsive */
  font-size: clamp(0.8rem, 0.7rem + 0.5vw, 0.9rem);
  color: var(--footer-text-color);
  opacity: 0.8; /* Ligeramente atenuado */
}

.footer__copyright i.fa-heart {
  font-size: 0.9em; /* Ajustar tamaño del corazón */
  /* El color ya está inline, pero se podría definir aquí */
  /* color: var(--color-accent); */
  vertical-align: baseline; /* Alinear mejor con el texto */
}

/* ========================================
    MEDIA QUERIES (Mobile First Approach)
    ======================================== */

/* Tablet y superiores (Ajustes generales para layout horizontal) */
@media only screen and (min-width: 768px) {
  .footer__container {
    padding: 0 var(--spacing-l); /* Padding lateral de tablet/desktop */
    gap: var(--spacing-l); /* Aumentar espacio entre columnas si se desea */
  }

  .footer__bottom-bar {
    padding: var(--spacing-m) var(--spacing-l); /* Padding lateral */
  }

  /* Restaurar margen inferior de columnas que se quitó en móvil */
  .footer__column {
    margin-bottom: 0; /* En layout horizontal, el gap ya separa */
  }
}

/* Desktop (Ajustes específicos si son necesarios) */
@media only screen and (min-width: 1024px) {
  /* Ejemplo: Aumentar min-width si el contenido lo requiere */
  .footer__column {
    min-width: 260px;
  }
}

/* --- ESTILOS ESPECÍFICOS PARA MÓVIL (cuando las columnas se apilan) --- */
/* Aplicar estos estilos SOLO cuando la pantalla sea menor que el breakpoint de tablet */
@media only screen and (max-width: 767px) {
  .footer__container {
    flex-direction: column; /* Apilar columnas */
    align-items: center; /* Centrar contenido de columnas */
    text-align: center; /* Centrar texto dentro de las columnas */
    gap: 0; /* El margen inferior de las columnas gestiona el espacio vertical */
  }

  .footer__column {
    min-width: 100%; /* Ocupa todo el ancho */
    /* El margen inferior ya está definido fuera de media queries */
    display: flex; /* Para centrar contenido interno */
    flex-direction: column;
    align-items: center;
  }
  /* Quitar margen inferior de la última columna apilada */
  .footer__column:last-child {
    margin-bottom: 0;
  }

  .footer__column--about .footer__logo-image {
    margin-left: auto;
    margin-right: auto; /* Centrar el logo */
  }

  .footer__social-links {
    /* El text-align: center del container padre ya los centra */
    margin-top: var(--spacing-s); /* Añadir espacio si es necesario */
  }

  .footer__column-title {
    display: block; /* Para centrar el ::after */
    text-align: center;
  }
  .footer__column-title::after {
    left: 50%; /* Centrar la línea */
    transform: translateX(-50%);
  }

  .footer__links-list {
    /* Centrado por text-align del contenedor */
  }

  .footer__contact-item {
    justify-content: flex-start; /* Alinear al inicio para mejor legibilidad */
    text-align: left; /* Mantener texto alineado a izq respecto al icono */
    /* Ajustar max-width si se ve muy ancho en pantallas "intermedias" */
    max-width: 300px;
    width: 100%; /* Para que el centrado funcione bien */
    margin: 0 auto; /* Centrar el item completo */
  }
  .footer__contact-icon {
    margin-top: 0.15em; /* Reajuste vertical si es necesario */
  }
}

/* Ajustes finos para pantallas muy pequeñas */
@media only screen and (max-width: 480px) {
  .footer {
    padding-top: var(--spacing-m); /* Menos padding superior */
  }
  .footer__container {
    padding: 0 var(--spacing-s); /* Asegurar padding lateral mínimo */
  }
  .footer__column--about .footer__logo-image {
    max-width: 160px; /* Logo más pequeño */
  }
  .footer__column-title {
    font-size: clamp(
      1.1rem,
      0.9rem + 1vw,
      1.2rem
    ); /* Título un poco más pequeño */
  }
  .footer__social-links a {
    font-size: 1.5rem;
    margin-right: var(--spacing-m); /* Reducir espacio entre iconos */
  }
  
  .footer__contact-item {
    max-width: 280px; /* Aún más estrecho en pantallas muy pequeñas */
    margin-bottom: var(--spacing-s); /* Añadir espacio entre items */
  }
  
  .footer__contact-icon {
    min-width: 18px; /* Ligeramente más pequeño en móviles pequeños */
  }
  .footer__copyright {
    font-size: clamp(0.75rem, 0.65rem + 0.5vw, 0.8rem);
  }
  .footer__bottom-bar {
    padding: var(--spacing-m) var(--spacing-s);
  }
}