/* ==========================================================
   css/footer.css — footer de 3 columnas (acordeón en móvil)
   Usa variables de tokens.css. Mobile-first.
   ========================================================== */
.site-footer {
  --footer-error: #b93a27;                 /* rojo legible sobre #f7f7f8 */
  padding: 40px 0 32px;
  background-color: var(--color-scheme-1);
}
@media (min-width: 768px) { .site-footer { padding: 80px 0 40px; } }

/* ---------- Grid de columnas ---------- */
.footer-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 60px; }
}

/* ---------- Columna (<details>) ---------- */
.footer-col { border-top: 1px solid var(--footer-divider-col); }
.footer-col:last-child { border-bottom: 1px solid var(--footer-divider-col); }

.footer-col__title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
  font-size: 16px; font-weight: 700; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .05em;
  color: rgb(var(--heading-color));
  cursor: pointer; list-style: none;
}
.footer-col__title::-webkit-details-marker { display: none; }
.footer-col__chev {
  width: 12px; height: 12px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s ease;
}
.footer-col[open] .footer-col__chev { transform: rotate(180deg); }

.footer-col__list { display: grid; gap: 10px; padding-bottom: 22px; }
.footer-col__list a {
  font-size: 15px; color: rgb(var(--body-text-color));
  transition: color .2s ease;
}
.footer-col__list a:hover { color: rgb(var(--heading-color)); }
.footer-col__body { padding-bottom: 22px; }
.footer-col__text { margin-bottom: 16px; font-size: 15px; }

/* Desktop: sin acordeón (JS mantiene los <details> abiertos) */
@media (min-width: 768px) {
  .footer-col, .footer-col:last-child { border: 0; }
  .footer-col__title { padding: 0 0 20px; cursor: default; pointer-events: none; }
  .footer-col__chev { display: none; }
  .footer-col__list, .footer-col__body { padding-bottom: 0; }
}

/* ---------- Newsletter ---------- */
.footer-form__row { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-input {
  flex: 1 1 160px; min-width: 0; height: 48px;
  padding: 0 16px;
  font-size: 15px; color: rgb(var(--heading-color));
  background: #fff;
  border: 1px solid var(--input-border-color);
  border-radius: var(--btn-border-radius);
  transition: border-color .2s ease;
}
.footer-input::placeholder { color: rgb(var(--body-text-color)); opacity: 1; }   /* P20: AA 5.6:1 */
.footer-input:hover { border-color: var(--input-border-hover-color); }
.footer-input:focus { border-color: var(--input-border-active-color); }
.footer-input[aria-invalid="true"] { border-color: var(--footer-error); }

.footer-form .btn { height: 48px; padding: 0 1.8em; flex: 0 0 auto; }
.footer-form .btn:disabled { opacity: .6; cursor: default; }

.footer-form__msg { min-height: 1.4em; margin-top: 10px; font-size: 13px; line-height: 1.4; }
.footer-form__msg.is-error { color: var(--footer-error); }
.footer-form__msg.is-success { color: rgb(var(--heading-color)); }

/* ---------- Fila inferior: moneda + pagos ---------- */
.footer-bottom {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--footer-divider-col);
}
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

.footer-select {
  -webkit-appearance: none; appearance: none;
  height: 44px; padding: 0 40px 0 14px;
  font-size: 14px; color: rgb(var(--heading-color));
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23171717' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px;
  border: 1px solid var(--input-border-color);
  border-radius: var(--btn-border-radius);
  cursor: pointer;
  transition: border-color .2s ease;
}
.footer-select:hover { border-color: var(--input-border-hover-color); }

.footer-pay { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-icon { width: 38px; height: 24px; }

.footer-copy { margin-top: 24px; font-size: 13px; color: rgb(var(--body-text-color)); }   /* P20: AA 5.2:1 sobre #f7f7f8 */


/* ==========================================================
   PROMPT 20 — Breakpoints 480 / 1280 / 1600
   ========================================================== */
/* <480: el botón Subscribe ocupa todo el ancho bajo el input */
@media (max-width: 479px) { .footer-form .btn { flex: 1 1 100%; } }
@media (min-width: 1280px) { .footer-grid { gap: 40px 100px; } }
@media (min-width: 1600px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1.5fr; gap: 40px 140px; }
  .site-footer { padding-top: 100px; }
}