/* ============================================================
   FOOTER SITE-WIDE · ToolTank
   Un solo footer para todo el sitio: el del homepage. El markup
   es identico en cada pagina (<footer class="footer tt-footer">)
   y este archivo lo pinta igual sin importar si la pagina carga
   site.css, brand-override.css o solo su <style> local.

   Los valores van fijos (no tokens de pagina) a proposito: cada
   pagina define --brass, --wrap, etc. a su manera y el footer
   tiene que verse igual en todas. Selectores con "html body"
   delante para ganarle a las reglas locales de cada pagina.

   Al editar este archivo, subir el ?v en TODAS las paginas que
   lo enlazan (gotcha de cache: el navegador cachea por URL).
   ============================================================ */

html body footer.tt-footer{
  display:block;margin-bottom:0;
  background:#16191D;color:#F3F5F6;border:0;
  padding:clamp(66px,7vw,98px) 0 40px;
  font-family:"Space Grotesk",system-ui,sans-serif;
  text-align:left;
}
html body footer.tt-footer *{box-sizing:border-box}
html body footer.tt-footer .tt-wrap{max-width:1280px;margin-inline:auto;padding-inline:clamp(22px,4.5vw,60px)}

html body footer.tt-footer .footer-top{
  display:grid;grid-template-columns:1.4fr 1.15fr 1fr 1fr 1fr;gap:clamp(28px,3.5vw,52px)
}
@media(max-width:960px){html body footer.tt-footer .footer-top{grid-template-columns:1fr 1fr;gap:40px 30px}}
@media(max-width:960px){html body footer.tt-footer .footer-brand{grid-column:1/-1}}
@media(max-width:520px){html body footer.tt-footer .footer-top{grid-template-columns:1fr}}

html body footer.tt-footer .footer-brand img{display:block;height:20px;width:auto;margin:0 0 22px}
html body footer.tt-footer .footer-brand p{
  line-height:1.62;font-size:.95rem;max-width:40ch;margin:0 0 12px
}
html body footer.tt-footer .footer-brand p:last-child{font-size:.9rem}

html body footer.tt-footer .footer-col h3{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;line-height:1.4;
  margin:0 0 16px;font-weight:500
}
html body footer.tt-footer .footer-col a{
  display:block;font-size:.95rem;line-height:1.5;
  padding:7px 0;text-decoration:none;transition:color .2s
}


html body footer.tt-footer .footer-base{
  margin-top:clamp(48px,6vw,72px);padding-top:26px;border-top:1px solid rgba(237,239,241,.16);
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:center;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:.74rem;letter-spacing:.05em;color:rgba(237,239,241,.40)
}
html body footer.tt-footer .footer-base .legal{display:flex;gap:20px;flex-wrap:wrap}
html body footer.tt-footer .footer-base a{text-decoration:none;transition:color .2s}


html body footer.tt-footer a:focus-visible{outline:2px solid #C9C2B6;outline-offset:3px;border-radius:2px}

/* Colores tal como se ven hoy en el homepage. El homepage (y varias
   paginas) traen reglas globales de tema oscuro con !important
   (body h3 {crema}, body a {teal}) que ganan a las de arriba; sin
   estas lineas, el footer cambiaria de color segun la pagina. */
html body footer.tt-footer .footer-brand p,
html body footer.tt-footer .footer-brand p:last-child{color:rgba(237,239,241,.74) !important}
html body footer.tt-footer .footer-col h3{color:#EDEFF1 !important;font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace !important}
html body footer.tt-footer .footer-col a,
html body footer.tt-footer .footer-base a{color:#C9C2B6 !important}
html body footer.tt-footer .footer-col a:hover,
html body footer.tt-footer .footer-base a:hover{color:#F3F5F6 !important}
html body footer.tt-footer .footer-base,
html body footer.tt-footer .footer-base span{color:rgba(237,239,241,.40) !important}

/* Zonas tactiles, minimo 44x44 */
@media(max-width:900px){
  html body footer.tt-footer .footer-col a{padding-top:14px;padding-bottom:14px}
  html body footer.tt-footer .footer-base a{display:inline-flex;align-items:center;min-height:44px}
}

/* El logo del footer lleva al inicio */
html body footer.tt-footer .footer-logo{display:inline-block;margin:0 0 22px;border-radius:4px;transition:opacity .2s}
html body footer.tt-footer .footer-logo img{margin:0}
html body footer.tt-footer .footer-logo:hover{opacity:.8}

/* Transicion sutil entre paginas (navegadores que la soportan; los demas navegan igual).
   El nav queda fijo y el contenido se funde. */
@view-transition{navigation:auto}
header.top,header.nav{view-transition-name:site-nav}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:cubic-bezier(.2,0,0,1)}
::view-transition-group(site-nav){animation-duration:.28s}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}}

/* Móvil: áreas de toque de 44px para logo y enlaces legales (antes 20px de alto a 11.8px) */
@media(max-width:640px){
  html body footer.tt-footer .footer-brand > a:first-child,
  html body footer.tt-footer a.footer-logo{display:inline-flex;align-items:center;min-height:44px;margin-bottom:10px}
  html body footer.tt-footer a.footer-logo img,html body footer.tt-footer .footer-brand > a:first-child img{margin:0}
  html body footer.tt-footer .footer-col a{padding:10px 0}
  html body footer.tt-footer .footer-base{font-size:.8rem}
  html body footer.tt-footer .footer-base .legal{gap:4px 22px}
  html body footer.tt-footer .footer-base a{display:inline-flex;align-items:center;min-height:44px}
}