/* ── Site footer ──────────────────────────────────────────────────────────
   Componente único para todo el sitio. El fondo ocupa todo el ancho y el
   contenido se centra en un máximo de 1120px, igual que el frame de la home.
   El fondo del documento usa --overscroll-bg para que el área de overscroll
   de iOS coincida con el fondo real de cada página. */

html {
  background-color: var(--overscroll-bg, #efeff1);
  background-image: none;
}

.site-footer {
  --sf-ink: #111827;
  --sf-text: #6b7280;
  --sf-muted: #9ca3af;
  --sf-line: #e5e7eb;
  --sf-soft: #fbfcfd;
  --sf-sky: #0ea5e9;
  background: var(--sf-soft);
  border-top: 1px solid var(--sf-line);
  color: var(--sf-text);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: left;
}

.site-footer *,
.site-footer *::before,
.site-footer *::after { box-sizing: border-box; }

.site-footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px clamp(24px, 4vw, 40px) 22px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 700px);
  grid-template-areas: "lead groups" "bottom bottom";
  gap: 30px 56px;
}

.site-footer__lead {
  grid-area: lead;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 360px;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--sf-ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
}

.site-footer__brand img {
  width: 30px;
  height: 30px;
  display: block;
  flex-shrink: 0;
}

.site-footer__brand:hover { text-decoration: none; }

.site-footer__lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  height: 34px;
  padding: 0 14px;
  line-height: 1;
  border: 1px solid var(--sf-line);
  border-radius: 999px;
  background: #fff;
  color: var(--sf-text);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}

.site-footer__lang:hover {
  color: var(--sf-ink);
  background: #f3f4f6;
  border-color: #d1d5db;
}

.site-footer__lang:focus-visible {
  outline: 2px solid var(--sf-sky);
  outline-offset: 2px;
}

.site-footer__tagline {
  margin: 2px 0 0;
  color: #374151;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -.01em;
}

.site-footer__made {
  color: var(--sf-muted);
  font-size: 11.5px;
}

.site-footer__groups {
  grid-area: groups;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  align-items: start;
  width: 100%;
}

.site-footer__group { min-width: 0; }

.site-footer__group h2 {
  margin: 0 0 6px;
  color: var(--sf-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.5;
  text-transform: uppercase;
}

.site-footer__links { display: block; }

.site-footer__group a {
  display: flex;
  align-items: center;
  min-height: 36px;
  color: var(--sf-text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.site-footer__group a:hover {
  color: var(--sf-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__group a:focus-visible,
.site-footer__brand:focus-visible {
  outline: 2px solid var(--sf-sky);
  outline-offset: 3px;
  border-radius: 4px;
}

.site-footer__bottom {
  grid-area: bottom;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 2px;
  padding-top: 16px;
  border-top: 1px dashed #d1d5db;
  color: var(--sf-muted);
  font-size: 11px;
}

.site-footer__copyright { white-space: nowrap; }

/* iPhone 16 Pro y móviles: el marco que contiene el pie pierde la sombra y
   cubre los bordes de la pantalla, de modo que el fondo del pie llega hasta el
   borde inferior sin dejar una franja gris (ni el shadow del frame) alrededor.
   Los insets de seguridad mantienen el contenido lejos de la isla y del
   indicador de inicio en modo PWA. */
@media (max-width: 480px), (max-height: 500px) and (orientation: landscape) {
  .frame {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

@media (max-width: 920px) {
  .site-footer__inner {
    grid-template-columns: minmax(180px, 1fr) minmax(0, 1fr);
    gap: 26px 32px;
  }
  .site-footer__groups { gap: 24px; }
}

@media (max-width: 720px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "groups groups" "lead bottom";
    gap: 0 12px;
    padding: 24px 18px calc(16px + env(safe-area-inset-bottom));
  }
  .site-footer__groups {
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--sf-line);
  }
  .site-footer__group--wide { grid-column: 1 / -1; }
  .site-footer__lead {
    max-width: none;
    padding-top: 16px;
    gap: 2px;
  }
  .site-footer__tagline { display: none; }
  .site-footer__made { font-size: 11px; }
  .site-footer__group h2 { margin-bottom: 4px; }
  .site-footer__group a { min-height: 44px; font-size: 13.5px; }
  .site-footer__bottom {
    align-self: end;
    justify-self: end;
    margin: 0;
    padding-top: 16px;
    border-top: 0;
  }
  .site-footer__copyright { font-size: 11px; }
}

/* Pricing: deja hueco para la CTA fija inferior en móvil. */
@media (max-width: 720px) {
  .site-footer--sticky-cta .site-footer__inner {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 360px) {
  .site-footer__groups { grid-template-columns: 1fr; }
  .site-footer__group--wide { grid-column: auto; }
}