/* ─────────────────────────────────────────────────────────────────────
   Páginas de texto legal del storefront (devoluciones.php y las que
   vengan: términos, privacidad, envíos).

   Es chico a propósito, por el mismo motivo que producto.css: la página
   carga app.css completo antes de este archivo, así que hereda los tokens
   (--primary, --surface, --radius, --header-h…), el modo oscuro, el fondo
   animado, el header fijo y los botones. Acá va SÓLO lo que la SPA no
   necesitaba: el layout de un documento largo con scroll normal y la
   tipografía de un texto corrido.

   NO depende de producto.css: ese archivo está escrito para la ficha (el
   `.ficha-card` es una grilla de dos columnas arriba de 720px, que acá
   rompería el texto). Las dos clases que sí hacen falta —el logo del
   header y los enlaces sin subrayado— se repiten acá con el prefijo
   `legal-` en vez de arrastrar la hoja entera.
   ───────────────────────────────────────────────────────────────────── */

/* La app bloquea el scroll del body y maneja todo con paneles; acá el
   documento scrollea como una página cualquiera. El header de app.css es
   `position: fixed`, así que el contenido se corre con el padding. */
body.pagina-legal {
  overflow-y: auto;
  padding-top: var(--header-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Mismo criterio que .pagina-ficha: app.css está escrito para una SPA,
   donde estos controles son `<button>`. Acá son enlaces de verdad y el
   navegador les pone subrayado. Los enlaces DE TEXTO no entran: ahí el
   subrayado es correcto. */
.pagina-legal a.btn-icon,
.pagina-legal a.btn-checkout,
.pagina-legal a.header-logo { text-decoration: none; }

.legal-logo { display: inline-flex; align-items: center; text-decoration: none; }
.legal-logo img { height: 30px; width: auto; }

/* `.header-logo` de app.css lleva `flex: 1`, así que empuja los botones
   contra el borde derecho igual que en la app. */
.legal-btn-header { flex: 0 0 auto; }

.legal-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 18px 15px 48px;
}

/* ── Encabezado de la página ──────────────────────────────────────── */
.legal-hero { margin-bottom: 18px; }
.legal-hero h1 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 26px; font-weight: 800; line-height: 1.2;
  color: var(--text);
  margin-bottom: 8px;
}
.legal-hero p {
  font-size: 14px; line-height: 1.55; color: var(--text2);
}
.legal-vigencia {
  display: inline-block; margin-top: 10px;
  font-size: 12px; color: var(--text3);
}

/* ── Resumen de arriba ────────────────────────────────────────────────
   Los cuatro datos que Merchant Center pide declarar (plazo, costo,
   reintegro y cambios) van juntos y arriba de todo: es lo que alguien
   busca cuando entra, y lo que un revisor necesita encontrar sin leer el
   documento entero. El `auto-fit` los pone en cuatro, dos o una columna
   según el ancho, sin media queries. */
.legal-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.legal-dato {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 14px 13px;
}
.legal-dato i {
  font-size: 17px; color: var(--primary);
  display: block; margin-bottom: 8px;
}
.legal-dato dt {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text3);
  margin-bottom: 3px;
}
.legal-dato dd { font-size: 15px; font-weight: 700; color: var(--text); }

/* ── Tarjeta de contenido ─────────────────────────────────────────── */
.legal-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 18px;
  margin-bottom: 14px;
  font-size: 14.5px; line-height: 1.6; color: var(--text);
}
.legal-card > :last-child { margin-bottom: 0; }

.legal-card h2 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 18px; font-weight: 800; line-height: 1.3;
  color: var(--text);
  margin-bottom: 10px;
  /* `scroll-margin-top` para que el header fijo no tape el título cuando
     se entra con un ancla (#arrepentimiento). */
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.legal-card h3 {
  font-size: 15px; font-weight: 700; color: var(--text);
  margin: 16px 0 6px;
}
.legal-card p { margin-bottom: 12px; color: var(--text2); }
.legal-card strong { color: var(--text); font-weight: 700; }
.legal-card a { color: var(--primary); }

.legal-card ul, .legal-card ol { margin: 0 0 12px 20px; color: var(--text2); }
.legal-card li { margin-bottom: 7px; }
.legal-card li::marker { color: var(--primary); }

/* Pasos numerados del pedido de devolución: la numeración pesa más que el
   texto porque la secuencia es el contenido. */
.legal-pasos { list-style: none; margin-left: 0; counter-reset: paso; }
.legal-pasos li {
  position: relative; padding-left: 38px; margin-bottom: 13px;
  counter-increment: paso;
}
.legal-pasos li::before {
  content: counter(paso);
  position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary-lt); color: var(--primary-dk);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}

/* Aviso destacado (el derecho de arrepentimiento, que es el que no se
   puede pasar por alto). */
.legal-nota {
  background: var(--primary-lt);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  margin-bottom: 12px;
  font-size: 14px; line-height: 1.55; color: var(--text);
}
.legal-nota p { color: var(--text); margin-bottom: 0; }

/* ── Contacto ─────────────────────────────────────────────────────── */
.legal-contacto { list-style: none; margin: 0; }
.legal-contacto li {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; font-size: 14.5px; color: var(--text);
}
/* Ancho fijo: los datos arrancan alineados aunque cada glifo de Font
   Awesome tenga distinto ancho natural (mismo criterio que
   `.info-icon` en seguimiento.php). */
.legal-contacto i {
  width: 20px; text-align: center; flex-shrink: 0;
  font-size: 15px; color: var(--primary);
}
.legal-contacto a { color: var(--primary); text-decoration: none; }
.legal-contacto a:hover { text-decoration: underline; }

.legal-volver { margin-top: 22px; }
.legal-volver .btn-checkout { max-width: 320px; margin: 0 auto; }