/* ÓPTICA FIJA — Footer global (estilo Servilock: oscuro, multi-columna, acento rojo). */
.offoot{
  --of-red:#E02B20; --of-red-dark:#B81F17; --of-line:rgba(255,255,255,.10);
  --of-fade:#9a9aa0;
  background:#0f0f11; color:#c9c9cc;
  font-family:'Albert Sans',Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased;
  position:relative; z-index:1;
}
.offoot *{ box-sizing:border-box; }
.offoot a{ color:inherit; text-decoration:none; }

.offoot-top{
  max-width:1320px; margin:0 auto;
  padding:clamp(48px,7vw,82px) clamp(18px,4vw,40px) clamp(34px,5vw,52px);
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr 1fr; gap:clamp(26px,3.5vw,52px);
}

/* ---- Marca ---- */
.offoot-brand{ max-width:none; }
.offoot-logo{ display:inline-block; margin-bottom:22px; line-height:0; }
.offoot-logo img{ height:92px; width:auto; display:block; } /* compuesto 2.16:1 — a 92px el wordmark lee como el logo antiguo a 48px */
.offoot-tag{ font-size:.95rem; line-height:1.65; color:var(--of-fade); max-width:38ch; }
.offoot-contact{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:13px; }
.offoot-contact li{ display:flex; gap:11px; align-items:flex-start; font-size:.95rem; line-height:1.45; color:#cfcfd3; }
.offoot-contact li svg{ width:17px; height:17px; flex-shrink:0; color:var(--of-red); margin-top:2px; }
.offoot-contact a{ transition:color .18s ease; }
.offoot-contact a:hover{ color:#fff; }
.offoot-contact .offoot-hours{ color:var(--of-fade); }
.offoot-social{ display:flex; gap:10px; margin-top:24px; }
.offoot-social a{
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--of-line); color:#fff; transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.offoot-social a:hover{ background:var(--of-red); border-color:var(--of-red); transform:translateY(-2px); }
.offoot-social svg{ width:18px; height:18px; }

/* ---- Columnas de enlaces ---- */
.offoot-col h3{
  position:relative; font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#fff; margin:0 0 20px; padding-bottom:12px;
}
.offoot-col h3::after{ content:""; position:absolute; left:0; bottom:0; width:26px; height:2px; background:var(--of-red); }
.offoot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.offoot-col a{ font-size:.95rem; color:var(--of-fade); transition:color .18s ease,padding-left .18s ease; }
.offoot-col a:hover{ color:var(--of-red); padding-left:4px; }

/* ---- Subpie ---- */
.offoot-bottom{ border-top:1px solid var(--of-line); }
.offoot-bottom-in{
  max-width:1320px; margin:0 auto; padding:22px clamp(18px,4vw,40px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 18px;
  font-size:.85rem; color:#7c7c82;
}
.offoot-bottom-in a{ color:var(--of-fade); transition:color .18s ease; }
.offoot-bottom-in a:hover{ color:#fff; }
.offoot-bottom .offoot-epoint a:hover{ color:var(--of-red); }

/* ---- Chevron (solo móvil/acordeón) ---- */
.offoot-col h3 .offoot-chev{ display:none; }

/* ---- Responsive ---- */
@media(max-width:1080px){
  .offoot-top{ grid-template-columns:1fr 1fr 1fr; }
  .offoot-brand{ grid-column:1 / -1; }
}
@media(max-width:640px){
  .offoot-top{ grid-template-columns:1fr; gap:0; padding-top:36px; }
  .offoot-brand{ padding-bottom:30px; border-bottom:1px solid var(--of-line); margin-bottom:6px; }
  .offoot-col{ border-bottom:1px solid var(--of-line); }
  .offoot-col h3{
    margin:0; padding:18px 2px; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  }
  .offoot-col h3::after{ display:none; }
  .offoot-col h3 .offoot-chev{ display:block; width:16px; height:16px; color:var(--of-red); transition:transform .25s ease; }
  .offoot-col.is-open h3 .offoot-chev{ transform:rotate(180deg); }
  .offoot-col ul{ overflow:hidden; max-height:0; transition:max-height .3s ease, padding .3s ease; padding:0; }
  .offoot-col.is-open ul{ max-height:600px; padding:0 2px 20px; }
  .offoot-bottom-in{ flex-direction:column; align-items:flex-start; text-align:left; }
}