/*
  FOOTER
  ------------------------------------------------------------
  Layout de 3 columnas con Grid (no flexbox + space-between):
  con flexbox, si el ancho del email y el del copyright son
  distintos, el elemento central NO queda centrado de verdad
  respecto a la página — se desplaza hacia el lado más corto.
  Grid con columnas 1fr auto 1fr fuerza que el centro esté
  siempre centrado, con las columnas 1/3 empujando a los extremos.

  padding-bottom: usa un valor FIJO generoso (80-90px según
  breakpoint) en vez de depender solo de env(safe-area-inset-bottom)
  — esa función puede devolver 0px en algunos contextos de Safari
  iOS (documentado en developer.apple.com/forums). El padding se
  queda DENTRO del footer real (no un elemento position:fixed
  separado): un elemento fixed anclado al fondo de la ventana se
  probó y se descartó porque muestra su color fijo incluso cuando
  el usuario hace scroll y ve otra sección distinta al footer —
  el padding dentro del propio footer solo aparece cuando el
  footer real está siendo mostrado, sin ese problema.
*/

.footer {
  background-color: var(--color-fondo-footer);
  border-top: 1px solid rgba(20, 49, 11, 0.09);
  padding: 38px 64px;
  padding-bottom: max(38px, calc(38px + env(safe-area-inset-bottom)), 90px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

html[data-theme="noche"] .footer {
  border-color: rgba(255, 255, 255, 0.1);
}

.footer__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  grid-column: 2;
}

.footer__simbolo {
  display: block;
  width: 26px;
  height: calc(26px * 59 / 80);
  color: var(--color-simbolo);
}

.footer__simbolo svg {
  width: 100%;
  height: 100%;
}

.footer__wordmark-texto {
  font-family: var(--font-marca);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-wordmark);
}

/* Redes sociales: pendiente de activar. Cuando el usuario confirme
   qué redes están en uso, se añadirán aquí como una fila propia
   (probablemente centrada, bajo el logo) — no inventar iconos ni
   plataformas mientras tanto. El layout de 3 columnas actual
   (email / logo / copyright) no reserva hueco para esto todavía. */

.footer__email {
  font-family: var(--font-marca);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-texto-principal);
  opacity: 0.72;
  grid-column: 1;
  justify-self: start;
}

.footer__email:hover {
  color: var(--color-naranja);
  opacity: 1;
}

.footer__copy {
  font-family: var(--font-marca);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--color-texto-principal);
  opacity: 0.74;
  grid-column: 3;
  justify-self: end;
}

@media (max-width: 1080px) and (min-width: 641px) {
  .footer {
    padding: 32px 40px;
    padding-bottom: max(32px, calc(32px + env(safe-area-inset-bottom)), 84px);
  }
}

@media (max-width: 640px) {
  /* 2 filas: logo centrado arriba (fila 1, columna única) — email
     y copyright en su propia línea horizontal debajo (fila 2, dos
     columnas: izquierda/derecha). NUNCA apilar email y copyright
     verticalmente ni centrarlos — deben quedar en la misma línea,
     con el email a la izquierda y la firma a la derecha, igual
     que en desktop pero a menor escala. */
  .footer {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    row-gap: 56px;
    column-gap: 16px;
    padding: 28px 20px;
    padding-bottom: max(28px, calc(28px + env(safe-area-inset-bottom)), 80px);
  }

  .footer__marca {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    margin-top: 12px;
  }

  .footer__email {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    font-size: 13px;
  }

  .footer__copy {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    font-size: 10px;
  }
}