/* `apps/publico/pie.css` — el pie de página de KokoroCo, UNA sola vez para las páginas que lo llevan
   (tienda y aliados; el inicio NO: Ana, 8-OCT-2026, «La landing page esta bien que se vea todo en una sola vista»). Ana, 8-OCT-2026: «El pie de pagina no se ve en todas las páginas».
   Antes vivía en `estilo.css` (sólo la tienda) y ahí se ocultaba a ≤1024px porque la barra inferior
   «lo reemplazaba»; pero la barra inferior no lleva «Nuestros aliados», «Dónde estamos», «Contacto»
   ni «Privacidad». Ahora se ve en todo ancho; en teléfono y tablet deja sitio debajo para esa barra.
   Todo va bajo `.site-footer` para no tocar nada de la página que lo carga. Colores: sólo los
   `--ink/--paper/--soft/--accent` de `marca/tokens.css`. */
@font-face { font-family: 'Homemade Apple'; src: url('assets/fonts/HomemadeApple-Regular.ttf') format('truetype'); font-display: swap; }
.brand-logo-footer {
  display: block; width: 10rem; margin-bottom: 1.25rem; aspect-ratio: 1080 / 709; background: var(--soft);
  -webkit-mask: url('assets/brand/wordmark-verde.svg') center / contain no-repeat;
  mask: url('assets/brand/wordmark-verde.svg') center / contain no-repeat;
}
.site-footer { clear: both; padding: clamp(1rem, 3vw, 2rem) max(1rem, calc((100% - var(--content, 76rem)) / 2)) 2rem; background: var(--ink); color: var(--paper); font-family: var(--fuente-interfaz), system-ui, sans-serif; font-size: 1rem; line-height: 1.5; letter-spacing: .025em; }
.site-footer *, .site-footer *::before, .site-footer *::after { box-sizing: border-box; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:focus-visible { outline: 3px solid var(--soft); outline-offset: 3px; }
.site-footer p { margin: 0; }
.site-footer .eyebrow { font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; }
.footer-invitation { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); padding: clamp(1.5rem, 4vw, 3rem) 0; background-image: radial-gradient(circle, var(--accent) 1.5px, transparent 1.6px); background-repeat: repeat-x; background-position: left bottom; background-size: 8px 4px; }
.footer-invitation > img { width: clamp(4.5rem, 9vw, 7rem); height: auto; object-fit: contain; filter: brightness(0) invert(1); }
.footer-invitation h2 { max-width: 11ch; margin: 0; font-family: var(--fuente-encabezado), var(--fuente-interfaz), sans-serif; font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 400; letter-spacing: .02em; line-height: .95; text-transform: uppercase; text-wrap: balance; }
.footer-button { display: inline-flex; min-height: var(--touch, 3rem); align-items: center; justify-content: center; padding: .8rem 1.25rem; border-radius: 999px; background: var(--soft); color: var(--ink); font-weight: 700; }
.site-footer a.footer-button { color: var(--ink); }
.footer-directory { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); padding-block: clamp(3rem, 7vw, 5rem); }
.footer-hand { font-family: var(--fuente-anotacion), 'Homemade Apple', cursive; transform: rotate(-4deg); }
.footer-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 2rem; }
.footer-links nav { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.footer-links nav a { display: inline-flex; min-height: var(--touch, 3rem); align-items: center; }
.footer-heading { font-family: var(--fuente-encabezado), var(--fuente-interfaz), sans-serif; font-size: 1.2rem; text-transform: uppercase; }
.footer-floor { display: grid; grid-template-columns: auto minmax(15rem, 1fr) auto; align-items: start; gap: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--soft); font-size: .78rem; }
.footer-floor .fine-print { max-width: 46rem; justify-self: center; opacity: .78; }
@media (hover: hover) { .footer-links a:hover, .footer-floor a:hover { text-decoration: underline; text-underline-offset: .2rem; } }
/* En teléfono y tablet la barra inferior es fija y tapa el final de la página: el pie deja su alto. */
@media (max-width: 1024px) { .site-footer { padding-bottom: calc(6.75rem + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 800px) {
  .footer-invitation, .footer-floor { display: block; }
  .footer-button { width: 100%; margin-top: 1.5rem; }
  .footer-directory { grid-template-columns: 1fr; gap: 2rem; }
  .footer-floor p + p { margin-top: .75rem; }
  .footer-floor .fine-print { justify-self: start; }
}
@media (max-width: 520px) { .footer-invitation > img { width: 4.75rem; } }