/*
 * Pie Fluyez. Hoja UNICA para los tres sitios.
 *
 * Vive en el mu-plugin y la encola inc/nav-assets.php. El marcado lo genera
 * fluyez_render_footer() en inc/footer-render.php, asi que vista y estilo
 * viajan juntos.
 *
 * Depende del tokens.css del tema.
 */

.fz-footer {
  margin: 0;
  padding: 0;
  background: var(--fz-footer-bg);
  color: var(--fz-footer-text);
  font-family: var(--fz-font);
}

.fz-footer__inner {
  max-width: var(--fz-container);
  margin-inline: auto;
  padding: 1rem;
}

.fz-footer a {
  color: inherit;
  text-decoration: none;
  transition: color var(--fz-transition), opacity var(--fz-transition);
}

.fz-footer a:hover {
  color: var(--fz-text-inverse);
}

/* Aviso de riesgo */
.fz-footer__risk {
  margin-bottom: 2.25rem;
  padding: 1.25rem;
  border-radius: var(--fz-radius-xl);
  background: var(--fz-footer-card);
  text-align: center;
}

.fz-footer__risk p {
  margin: 0;
}

.fz-footer__risk p + p {
  margin-top: 0.75rem;
}

.fz-footer__risk-link {
  text-decoration: underline;
}

/* Rejilla de columnas */
.fz-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.fz-footer__brand {
  grid-column: span 2;
}

.fz-footer__logo {
  display: inline-flex;
  margin-bottom: 1.5rem;
}

/* El logotipo es un SVG en linea y no un <img>: el archivo que los temas
   servian como logo-fluyez-white.svg era un PNG renombrado, de modo que el
   navegador no lo decodificaba. */
.fz-footer__logo svg {
  display: block;
  width: 120px;
  height: auto;
}

/* El parrafo de la marca registrada, bajo el logotipo. El segundo parrafo
   regulatorio cierra el pie, no va aqui. */
.fz-footer__brand-legal {
  margin: 1.5rem 0 0;
  font-size: var(--fz-font-size-xs);
  line-height: 1.6;
}

.fz-footer__social-title {
  /* El titulo es un <span>: sin display:block un elemento inline descarta los margenes verticales. */
  display: block;
  color: inherit;
  font-size: var(--fz-font-size-sm);
  font-weight: var(--fz-font-weight-regular);
}

.fz-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fz-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--fz-transition);
}

.fz-footer__social svg {
  display: block;
  width: 24px;
  height: 24px;
}

.fz-footer__social a:hover {
  opacity: 0.75;
}

/* Libro de reclamaciones */
.fz-footer__complaints {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.fz-footer__complaints-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: inherit;
}

.fz-footer__complaints-icon svg {
  width: 32px;
  height: 32px;
}

.fz-footer__complaints-label {
  max-width: 100px;
  font-size: var(--fz-font-size-sm);
  font-weight: var(--fz-font-weight-semibold);
  line-height: 1.3;
}

/* Columnas de enlaces */

/* Cada columna es un <nav>, y Elementor declara `nav { padding: 20px }` en su
   CSS en linea, que gana a cualquier regla por etiqueta. Sin esta neutralizacion
   las cuatro columnas del pie salen con 20px de relleno por los cuatro lados.
   Con la clase delante la regla pesa mas y el pie vuelve a su rejilla. */
.fz-footer__column {
  margin: 0;
  padding: 0;
  border: 0;
}

.fz-footer__column-title {
  /* El titulo es un <span>: sin display:block un elemento inline descarta los margenes verticales. */
  display: block;
  margin: 0 0 1.5rem;
  color: var(--fz-text-inverse);
  font-family: var(--fz-font);
  font-size: var(--fz-font-size);
  font-weight: var(--fz-font-weight-semibold);
  text-transform: uppercase;
}

.fz-footer__links {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fz-font-size-sm);
}

.fz-footer__links a {
  display: inline-block;
  line-height: 1.4;
}

/* Franja de contacto: apilada y centrada en movil, en una fila desde tablet.
   Mobile-first a proposito: la vista estrecha es la base y la ancha el anadido. */
.fz-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin: 1.75rem 0;
  text-align: center;
}

.fz-footer__contact-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fz-footer__contact-link,
.fz-footer__contact-text {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fz-font-size-sm);
}

/* El icono hereda el color del texto: los SVG usan currentColor, asi que el
   tema no tiene que reeditarlos para cambiar de tono. */
.fz-footer__contact-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: inherit;
}

.fz-footer__contact-icon svg {
  width: 20px;
  height: 20px;
}

.fz-footer__follow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Separador y texto regulatorio */
.fz-footer__divider {
  height: 1px;
  margin: 1.75rem 0;
  background: var(--fz-footer-divider);
  border: 0;
}

.fz-footer__legal {
  margin: 1.75rem 0;
  font-size: var(--fz-font-size-xxs);
  line-height: 1.5rem;
  text-align: center;
}

.fz-footer__legal p {
  margin: 0 0 1rem;
}

.fz-footer__legal p:last-child {
  margin-bottom: 0;
}

/* Pie: copyright y credito */
.fz-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--fz-radius-xl);
  background: var(--fz-footer-card);
  font-size: var(--fz-font-size-sm);
}

.fz-footer__credit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* El credito es el logotipo de Flowinpix en linea, no un subrayado: antes era
   texto en blog y noticias y un <img> en el home. */
.fz-footer__credit a {
  display: inline-flex;
  align-items: center;
  transition: opacity var(--fz-transition);
}

.fz-footer__credit a:hover {
  opacity: 0.75;
}

.fz-footer__credit svg {
  display: block;
  width: 104px;
  height: auto;
}

/* ===== RESPONSIVE DEL FOOTER =====
 * Es el unico bloque con un breakpoint intermedio (768px). La regla de un solo
 * breakpoint aplica a la NAVEGACION, donde el solape 1023/1024 causaba bugs
 * reales; una rejilla que salta de 2 a 5 columnas de golpe se ve peor que la
 * del home, que tambien pasa por 3. */

@media (min-width: 768px) {
  .fz-footer__inner {
    padding: 4rem 1rem 2.5rem;
  }

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

  .fz-footer__brand {
    grid-column: span 1;
  }

  .fz-footer__divider,
  .fz-footer__legal {
    margin-block: 2.25rem;
  }

  /* Desde tablet la franja de contacto pasa a una fila: los tres datos a la
     izquierda y "Siguenos" al otro extremo. */
  .fz-footer__contact {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-block: 2.25rem;
    text-align: left;
  }

  .fz-footer__contact-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.75rem;
  }

  .fz-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }
}

@media (min-width: 1024px) {
  .fz-footer__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}


/* Objetivo tactil en las redes solo donde hay dedos; en escritorio el icono
   mide 24px y respeta la separacion del diseno. */
@media (max-width: 1023px) {
  .fz-footer__social a {
    min-width: var(--fz-tap-target);
    min-height: var(--fz-tap-target);
  }
}