/* ============================================================
   OBYRA — Bloque legal del pie
   Se suma al pie que ya tiene cada página (home y construcción).
   Los nombres arrancan con "pieleg" para no chocar con los
   estilos propios de cada página.
   ============================================================ */

.pieleg{
  margin-top:2rem; padding-top:1.5rem;
  border-top:1px solid rgba(169,182,196,.25);
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem;
  font-size:.85rem; line-height:1.7;
}
.pieleg h4{
  font:700 .7rem/1 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 .9rem;
}
.pieleg ul{ list-style:none; padding:0; margin:0; }
.pieleg .pieleg__lista{ display:grid; gap:.55rem; }
.pieleg p{ margin:0 0 .75rem; }
.pieleg a{ text-decoration:none; }
.pieleg a:hover{ text-decoration:underline; text-underline-offset:3px; }

.pieleg__arrepentimiento{
  display:inline-block; margin-top:.35rem; font-weight:600;
  border:1px solid rgba(169,182,196,.4); border-radius:8px; padding:.55rem .9rem;
}

.pieleg .pieleg__medios{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0 0; padding:0; list-style:none; }
.pieleg .pieleg__medios li{
  background:#fff; color:#0D1B2A; font-size:.68rem; font-weight:700; letter-spacing:.03em;
  border-radius:6px; padding:.35rem .55rem;
}

/* El pie de la home es claro y el de construcción es oscuro:
   cada uno hereda el color de su propio pie. */
.pieleg, .pieleg a{ color:inherit; }
.pieleg h4{ color:inherit; opacity:.75; }

@media (max-width:820px){
  .pieleg{ grid-template-columns:1fr; gap:1.5rem; }
}

/* ------------------------------------------------------------
   Pie de OBYRA Pedidos: una sola fila con todo

   En esa página "Legales" y "Medios de pago" viven arriba, junto a los
   enlaces del sitio, en vez de en una segunda fila. Va como modificador y no
   tocando `.pie__grilla` porque esa clase la comparten la home y construcción,
   que siguen con sus tres columnas.
   ------------------------------------------------------------ */
.pie__grilla.pie__grilla--cinco{
  grid-template-columns:1.5fr 1fr 1.1fr 1.2fr 1.1fr;
  gap:1.5rem;
}
/* Dos filas de columnas angostas antes que cinco apretadas: a partir de acá
   los títulos empiezan a cortarse en dos líneas y se lee peor. */
@media (max-width:1100px){
  .pie__grilla.pie__grilla--cinco{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .pie__grilla.pie__grilla--cinco{ grid-template-columns:1fr; }
}

/* Al subir "Legales" y "Medios de pago" a la fila de arriba dejaron de estar
   dentro de `.pieleg`, que es de donde colgaban sus estilos. Se repiten acá
   para el pie de cinco columnas. */
.pie__grilla--cinco .pieleg__lista{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.pie__grilla--cinco .pieleg__medios{
  display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0 0; padding:0; list-style:none;
}
.pie__grilla--cinco .pieleg__medios li{
  background:#fff; color:#0D1B2A; font-size:.68rem; font-weight:700; letter-spacing:.03em;
  border-radius:6px; padding:.35rem .55rem;
}