/* ===========================================================================
   Páginas legales — política de datos y términos y condiciones.

   No cargan `tienda.css` a propósito: son documentos de texto, no la tienda.
   Traerse todo el CSS de la carta para mostrar un texto es pedirle al
   navegador que descargue la cocina entera para servir un vaso de agua.
   Por eso las variables van repetidas aquí — son doce líneas, y a cambio
   estas páginas cargan solas.
   =========================================================================== */

:root {
  --rojo:      #C6202B;
  --rojo-osc:  #96131C;
  --amarillo:  #FFC72C;
  --carbon:    #241C18;
  --crema:     #FFF7E9;
  --blanco:    #fff;
  --linea:     #E7DCC9;
  --gris:      #6B625B;
  --naranja:   #C25A12;
  --fuente:    'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-sm: 8px; --r-md: 12px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--carbon);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* --- encabezado ---------------------------------------------------------- */

.cabecera {
  background: var(--rojo);
  color: #fff;
  padding: 18px 20px;
}
.cabecera .interior {
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
}
.cabecera img { width: 46px; height: 47px; border-radius: 50%; background: #fff; padding: 2px; flex: none; }
.cabecera .marca { font-weight: 700; font-size: 17px; letter-spacing: .01em; }
.cabecera .lema  { font-size: 12px; opacity: .9; margin-top: 1px; }
.cabecera a.volver {
  margin-left: auto; color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 600;
  border: 1px solid rgba(255,255,255,.4); border-radius: var(--r-sm);
  padding: 8px 13px; white-space: nowrap;
}
.cabecera a.volver:hover { background: rgba(255,255,255,.12); }

/* --- aviso de borrador --------------------------------------------------- */
/* Se imprime solo si el documento todavía tiene datos sin confirmar. Cuando
   se llenen, desaparece solo: no hay que acordarse de quitarlo. */

.borrador {
  background: var(--amarillo); color: #4A3300;
  padding: 12px 20px; text-align: center;
  font-size: 13px; font-weight: 600; line-height: 1.45;
}

/* --- documento ----------------------------------------------------------- */

.documento {
  max-width: 760px;
  margin: 0 auto;
  padding: 34px 20px 60px;
}

.documento h1 {
  font-size: 27px; font-weight: 700; line-height: 1.2;
  margin: 0 0 6px;
}
.documento h2 {
  font-size: 20px; font-weight: 700; line-height: 1.3;
  margin: 40px 0 12px; padding-top: 22px;
  border-top: 1px solid var(--linea);
}
.documento h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 28px; }
.documento h3 {
  font-size: 16px; font-weight: 700;
  margin: 26px 0 8px;
}
.documento p { margin: 0 0 14px; }
.documento strong { font-weight: 700; }

.documento ul, .documento ol { margin: 0 0 16px; padding-left: 22px; }
.documento li { margin-bottom: 7px; }

.documento a { color: var(--rojo-osc); text-decoration: underline; }
.documento a:hover { color: var(--rojo); }

.documento hr {
  border: 0; border-top: 1px solid var(--linea); margin: 32px 0;
}

.documento blockquote {
  margin: 0 0 16px; padding: 13px 16px;
  background: #FDF6E3; border-left: 3px solid var(--naranja);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 14.5px; color: #7A4A16;
}
.documento blockquote p:last-child { margin-bottom: 0; }

.documento code {
  background: #F2E9D8; border-radius: 4px;
  padding: 2px 6px; font-size: .88em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Tablas: en un celular se desbordan, así que ruedan dentro de su caja
   en vez de empujar la página entera hacia el lado. */
.tabla-envoltura {
  overflow-x: auto; margin: 0 0 18px;
  border: 1px solid var(--linea); border-radius: var(--r-md);
  background: var(--blanco);
}
.documento table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.documento th, .documento td {
  text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--linea);
}
.documento th { background: #FBF3E4; font-weight: 700; white-space: nowrap; }
.documento tr:last-child td { border-bottom: 0; }

/* Los datos sin confirmar tienen que gritar. Si alguien publica esto sin
   llenarlos, que sea imposible no verlos. */
.pendiente {
  background: #FFE08A; color: #6B4A00;
  border: 1px dashed #C08A00; border-radius: 4px;
  padding: 1px 6px; font-weight: 700; font-size: .92em;
}

/* --- pie ----------------------------------------------------------------- */

.pie-legal {
  border-top: 1px solid var(--linea);
  margin-top: 44px; padding-top: 22px;
  font-size: 13.5px; color: var(--gris);
}
.pie-legal a { color: var(--rojo-osc); }

@media (max-width: 560px) {
  body { font-size: 15.5px; }
  .documento { padding: 26px 16px 48px; }
  .documento h1 { font-size: 23px; }
  .documento h2 { font-size: 18px; }
  .cabecera .lema { display: none; }
}

@media print {
  .cabecera a.volver, .borrador { display: none; }
  body { background: #fff; }
}