/* ──────────────── Footer (shared stylesheet) ────────────────
 * Canonical rules for the global <footer> partial in partials/footer.html.
 * Every page that injects #site-footer should link this file.
 *
 * Until 2026-05, these rules lived duplicated in base.css, conocenos.css,
 * index.css, kit-digital.css, planes.css, responsive.css — six copies, with
 * small drift between them (e.g. only index had .foot-privacy-note, only
 * index loaded the better mobile/tablet breakpoints from responsive.css).
 * Consolidated here so the footer renders identically everywhere.
 * ────────────────────────────────────────────────────────── */

footer{
  background:var(--bk);
  color:rgba(255,255,255,.7);
  padding:4rem 0 2rem;
  margin-top:4rem;
}

.foot-grid{
  display:grid;
  grid-template-columns:1.7fr 1fr 1fr 1fr 1.2fr;
  gap:3rem 2.5rem;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.foot-brand .logo{color:var(--wh);margin-bottom:1.25rem;display:inline-block}
.foot-brand p{font-size:.88rem;line-height:1.6;max-width:34ch;margin-bottom:1.5rem;color:rgba(255,255,255,.7)}

.foot-contact{display:flex;flex-direction:column;gap:.8rem;list-style:none;margin:0;padding:0}
.foot-contact li{display:flex;align-items:flex-start;gap:.6rem;font-size:.85rem;color:rgba(255,255,255,.7);line-height:1.5}
.foot-contact li svg{flex-shrink:0;margin-top:3px;color:var(--lm)}
.foot-contact li a{color:rgba(255,255,255,.78);transition:color .15s;text-decoration:none}
.foot-contact li a:hover{color:var(--lm)}

.foot-col h3,
.foot-col-title{
  display:block;
  font-family:var(--display);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:1.1rem;
  line-height:1.2;
}
.foot-col ul{display:flex;flex-direction:column;gap:.7rem;list-style:none;margin:0;padding:0}
.foot-col a{font-size:.88rem;color:rgba(255,255,255,.65);transition:color .15s}
.foot-col a:hover{color:var(--lm)}

/* Privacy note (single line between the grid divider and the legal row).
   Previously index-only — that's why other pages rendered it as default
   <p> text and looked inconsistent. */
.foot-privacy-note{
  font-size:.78rem;
  color:rgba(255,255,255,.55);
  margin:1.5rem 0 0;
  line-height:1.5;
}
.foot-privacy-note a{color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:2px;transition:color .15s}
.foot-privacy-note a:hover{color:var(--lm)}

.foot-bot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:1.75rem;
  font-size:.8rem;
  color:rgba(255,255,255,.5);
  flex-wrap:wrap;
  gap:1rem 2rem;
}
.foot-legal{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;list-style:none;margin:0;padding:0}
.foot-legal a{color:rgba(255,255,255,.55);font-size:.8rem;transition:color .15s}
.foot-legal a:hover{color:var(--lm)}

.foot-social{margin-top:1.25rem}
.foot-social .foot-social-label{
  font-family:var(--display);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-bottom:.7rem;
  display:block;
}
.foot-social-list{display:flex;gap:.55rem;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.foot-social-list a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.85);
  transition:background .2s,color .2s,transform .2s;
  border:1px solid rgba(255,255,255,.1);
}
.foot-social-list a:hover{background:var(--lm);color:var(--bk);transform:translateY(-2px)}
.foot-social-list svg{width:16px;height:16px}

/* ──────────────── Tablet (3-col reorganized: brand/soluciones/contacto, kit/empresa) ──────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  .foot-grid {
    grid-template-columns: 1.5fr 1fr 1.15fr;
    grid-template-areas:
      "brand soluc contact"
      "kitd  empr  empr";
    gap: 2.5rem 2rem;
    align-items: start;
  }
  .foot-brand { grid-area: brand; }
  .foot-grid > .foot-col:nth-child(2) { grid-area: soluc; }   /* Soluciones */
  .foot-grid > .foot-col:nth-child(3) { grid-area: kitd; }    /* Kit Digital */
  .foot-grid > .foot-col:nth-child(4) { grid-area: empr; }    /* Empresa */
  .foot-grid > .foot-col:nth-child(5) { grid-area: contact; } /* Contacto */

  .foot-bot {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 1rem 2rem;
  }
}

/* ──────────────── Mobile (≤640: centered, single column) ──────────────── */
@media (max-width: 640px) {
  footer {
    padding: 3rem 0 1.75rem;
    margin-top: 3rem;
  }
  .foot-grid {
    grid-template-columns: 1fr !important;
    gap: 2.25rem !important;
    text-align: center;
    padding-bottom: 2rem;
  }
  .foot-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .foot-brand p {
    max-width: 38ch;
    margin-left: auto;
    margin-right: auto;
  }
  .foot-social { margin-top: 1.1rem; text-align: center; }
  .foot-social-label { text-align: center; }
  .foot-social-list { justify-content: center; }
  .foot-col h3 { margin-bottom: .9rem; }
  .foot-col ul {
    align-items: center;
    gap: .65rem;
  }
  .foot-contact { align-items: center; }
  .foot-contact li {
    justify-content: center;
    gap: .55rem;
    text-align: left;
    max-width: 24rem;
    margin-left: auto;
    margin-right: auto;
  }
  .foot-bot {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 1rem;
    padding-top: 1.5rem;
  }
  .foot-legal {
    justify-content: center;
    gap: .35rem .9rem;
  }
}