/* =====================================================================
   17 · FOOTER / PIE DE PÁGINA (id="footer")
   Logo a la izquierda y 3 columnas de links a la derecha.
   ===================================================================== */

.footer { background: var(--negro); border-top: 1px solid var(--carbon); padding: 80px 0 32px; }

.footer__fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; }

/* Logo (imagen img/logo.png). Para agrandarlo o achicarlo, cambia el alto */
.footer__logo { display: inline-block; }
.footer__logo img { height: 84px; width: auto; display: block; }

/* Menú del footer: los mismos links del navbar, en 2 columnas de 4 */
.footer__menu { display: grid; grid-template-columns: repeat(2, auto); grid-auto-flow: column; grid-template-rows: repeat(4, auto); column-gap: 48px; }
.footer__lema { font-size: 15px; color: var(--texto-suave); margin-top: 10px; }

.footer__columnas { display: flex; gap: 96px; font-size: 16px; line-height: 2; }
.footer__columna { display: flex; flex-direction: column; }
.footer__columna h3 { font-size: 26px; font-weight: 300; margin-bottom: 10px; }
.footer__columna a,
.footer__columna span { color: var(--texto-2); text-decoration: none; }
.footer__columna a:hover { color: var(--cobre); }


/* ---------- Tablet y celular ---------- */
@media (max-width: 1024px) {
  .footer__fila { flex-direction: column; }
  .footer__columnas { gap: 48px; flex-wrap: wrap; }
}

@media (max-width: 700px) {
  .footer { padding: 56px 0 28px; }
  .footer__logo img { height: 64px; }
  .footer__columna--menu { grid-column: 1 / -1; }
  .footer__columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .footer__columna h3 { font-size: 22px; }
}


/* ---------- Pie final: derechos reservados y créditos ---------- */
.footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--borde);
  font-size: 15px;   /* tamaño de la letra del pie final */
  color: var(--texto-apagado);
}
.footer__legal a { font-weight: 600; color: var(--texto-suave); text-decoration: none; transition: color var(--transicion); }
.footer__legal a:hover { color: var(--cobre); }

/* Firma "NurturaCode Studio": letra Syne y "Studio" en rosado */
.footer__firma { font-family: "Syne", var(--fuente); font-weight: 700; letter-spacing: -0.01em; }
.footer__firma span { color: #FF3D9D; }

@media (max-width: 700px) {
  .footer__legal { flex-direction: column; align-items: flex-start; }
}