/**
 * Estilos de las páginas legales de Nanay.
 *
 * Archivo aparte y compartido por las cuatro: términos, cambios, privacidad
 * y despacho. Copiarlo en cada una garantizaba que a la tercera edición
 * quedaran distintas entre sí.
 *
 * Criterio de diseño: son páginas para leer, no para vender. Columna
 * angosta, tipografía grande y mucho aire. Un texto legal apretado en
 * gris chico es una forma elegante de que nadie lo lea, y acá el público
 * es gente mayor o gente cuidando a alguien mayor.
 */

:root {
  --vino: #5E2A2A;
  --vino-claro: #7A3A38;
  --crudo: #EDE6D6;
  --crudo-claro: #F5F0E6;
  --rosa: #D9A7B0;
  --rosa-medio: #C98A95;
  --rosa-suave: #E9CDD2;
  --tinta: #2B2F3A;
  --tinta-suave: #5b606e;
  --blanco: #FBF8F2;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Mulish", system-ui, sans-serif;
  /* 17px de base, no 16. El público de Nanay incluye gente que ya no ve
     de cerca como antes. */
  font-size: 17px;
  line-height: 1.75;
  color: var(--tinta);
  background: var(--crudo);
  -webkit-font-smoothing: antialiased;
}

/* ===== Header ===== */
.legal-header {
  background: var(--blanco);
  border-bottom: 1px solid rgba(94, 42, 42, .1);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Las medidas salen de `.wrap` y `.topbar` en index.html: 1180 px de ancho,
 * 28 de aire a los lados y 81 de alto. El contenido de estas páginas sigue
 * siendo más angosto (780 px); solo la cabecera se ensancha, igual que en la
 * portada.
 *
 * Sin padding vertical a propósito: la etiqueta se posiciona contra el borde
 * de arriba, y cualquier padding la empuja hacia abajo y la deja asomando
 * por debajo de la cabecera. */
.legal-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  height: 81px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* La etiqueta, igual que en la portada.
 *
 * Cuelga del borde superior y se recorta ahí arriba, como una etiqueta de
 * ropa cosida por dentro que asoma. Antes era un logo chico de 38 px con la
 * palabra "Nanay" al lado, y el nombre quedaba escrito dos veces, porque la
 * etiqueta ya lo dice adentro.
 *
 * Las medidas son las mismas que las de `.tag` en index.html y conviene que
 * sigan siéndolo: 152 px de ancho, 46 de recorte y la misma sombra. Si se
 * cambia una, hay que cambiar la otra. */
.legal-logo {
  position: relative;
  width: 172px;          /* reserva el hueco para que el resto no se corra */
  flex: 0 0 auto;
  align-self: stretch;
  display: block;
  text-decoration: none;
}

.legal-logo img {
  position: absolute;
  top: -46px;
  left: 6px;
  width: 152px;
  display: block;
  filter: drop-shadow(0 12px 14px rgba(43, 26, 18, .22));
  z-index: 60;
}

/* Sin la animación de entrada que sí tiene la portada, y a propósito.
 *
 * Esa animación arranca en opacidad cero, así que si por lo que sea no
 * llega a correr, la etiqueta no aparece nunca. En la portada el riesgo se
 * asume porque es la primera impresión; acá el cliente está pagando, y una
 * cabecera sin logo en la pantalla del pago se lee como sitio roto.
 *
 * En reposo se ve idéntica: misma posición, mismo tamaño, misma sombra. */

.legal-volver {
  font-size: .9rem;
  color: var(--vino);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.legal-volver:hover { text-decoration: underline; }

/* ===== Contenido ===== */
.legal-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

.legal-kicker {
  display: inline-block;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rosa-medio);
  font-weight: 700;
  margin-bottom: 12px;
}

h1 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2rem, 5vw, 2.7rem);
  line-height: 1.15;
  color: var(--vino);
  font-weight: 600;
  margin-bottom: 12px;
}

.legal-bajada {
  font-size: 1.08rem;
  color: var(--tinta-suave);
  margin-bottom: 8px;
  max-width: 60ch;
}

.legal-fecha {
  font-size: .84rem;
  color: var(--tinta-suave);
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(94, 42, 42, .12);
}

h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.5rem;
  color: var(--vino);
  font-weight: 600;
  margin: 44px 0 14px;
  line-height: 1.3;
}

h3 {
  font-size: 1.06rem;
  color: var(--tinta);
  font-weight: 700;
  margin: 28px 0 10px;
}

p { margin-bottom: 16px; max-width: 68ch; }

a { color: var(--vino); }
a:hover { color: var(--vino-claro); }

ul, ol { margin: 0 0 18px 22px; max-width: 68ch; }
li { margin-bottom: 9px; }

strong { font-weight: 700; }

/* ===== Bloque destacado =====
   Para lo que el cliente tiene que leer sí o sí: sus derechos, los plazos
   que corren, lo que no se acepta. */
.legal-destacado {
  background: var(--blanco);
  border-left: 3px solid var(--rosa-medio);
  border-radius: 0 12px 12px 0;
  padding: 22px 26px;
  margin: 28px 0;
}
.legal-destacado p:last-child { margin-bottom: 0; }
.legal-destacado h3 { margin-top: 0; }

/* ===== Tablas ===== */
.legal-tabla-scroll { overflow-x: auto; margin: 22px 0; }

table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  background: var(--blanco);
  border-radius: 12px;
  overflow: hidden;
  font-size: .95rem;
}

th {
  background: var(--vino);
  color: var(--blanco);
  text-align: left;
  padding: 13px 16px;
  font-weight: 600;
  font-size: .87rem;
}

td {
  padding: 13px 16px;
  border-bottom: 1px solid rgba(94, 42, 42, .08);
  vertical-align: top;
}
tr:last-child td { border-bottom: none; }

/* El detalle de cada fila va debajo, no pegado al nombre. */
td small {
  display: block;
  color: var(--tinta-suave);
  font-size: .84rem;
  line-height: 1.5;
  margin-top: 3px;
}
/* Salvo cuando aclara el dato de al lado, como "(3 días hábiles)". */
td small.inline { display: inline; margin: 0; }

/* ===== Tabla que se vuelve tarjetas en mobile =====
   Para las tablas que el cliente necesita leer sí o sí, como la de precios
   de despacho. Con scroll horizontal, la columna del precio queda fuera de
   pantalla y hay que descubrirla deslizando. Nadie desliza.

   Uso: <table class="tabla-tarjetas"> y cada <td> con su data-label. */
@media (max-width: 620px) {
  /* La etiqueta se achica igual que en la portada: 95 px y menos recorte,
   * para que en un teléfono no se coma la cabecera entera. */
  .legal-logo { width: 104px; }
  .legal-logo img { width: 95px; top: -18px; left: 0; }
  .legal-header-inner { height: 62px; padding: 0 18px; }

  .legal-tabla-scroll:has(.tabla-tarjetas) { overflow-x: visible; }

  .tabla-tarjetas { min-width: 0; background: transparent; }
  .tabla-tarjetas thead { display: none; }

  .tabla-tarjetas tr {
    display: block;
    background: var(--blanco);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 12px;
  }
  .tabla-tarjetas tr:last-child { margin-bottom: 0; }

  .tabla-tarjetas td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(94, 42, 42, .07);
  }
  .tabla-tarjetas td:last-child { border-bottom: none; }

  .tabla-tarjetas td::before {
    content: attr(data-label);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinta-suave);
    font-weight: 700;
    flex-shrink: 0;
  }

  /* La primera celda es el nombre de la zona: va como título de la tarjeta,
     sin etiqueta al lado. */
  .tabla-tarjetas td:first-child {
    display: block;
    font-size: 1.05rem;
    color: var(--vino);
    font-weight: 700;
    padding-top: 0;
    padding-bottom: 10px;
  }
  .tabla-tarjetas td:first-child::before { content: none; }
  .tabla-tarjetas td:first-child small {
    display: block;
    font-size: .82rem;
    font-weight: 400;
    color: var(--tinta-suave);
    margin-top: 3px;
  }

  .tabla-tarjetas td:not(:first-child) { text-align: right; }
}

/* ===== Datos pendientes =====
   Marca visible mientras falte un dato. Feo a propósito: la idea es que
   sea imposible publicar la página sin darse cuenta. */
.pendiente {
  background: #FFF3CD;
  color: #7A5C00;
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 700;
  font-size: .87em;
  white-space: nowrap;
}

/* ===== Footer ===== */
.legal-footer {
  background: var(--vino);
  color: var(--rosa-suave);
  padding: 44px 24px;
  text-align: center;
  font-size: .9rem;
}
.legal-footer a { color: var(--blanco); text-decoration: underline; }
.legal-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: center;
  margin-bottom: 22px;
}
.legal-footer-links a { text-decoration: none; }
.legal-footer-links a:hover { text-decoration: underline; }
/* Los márgenes automáticos centran la caja del párrafo, no solo el texto de
 * adentro. Sin ellos el `max-width: 68ch` de más arriba la deja pegada a la
 * izquierda dentro de un pie que sí está centrado, y la nota queda corrida
 * respecto de los enlaces que tiene encima. */
.legal-footer-nota {
  opacity: .75;
  font-size: .84rem;
  line-height: 1.7;
  margin-inline: auto;
}

/* ===== Índice ===== */
.legal-indice {
  background: var(--crudo-claro);
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 40px;
}
.legal-indice h2 { margin: 0 0 12px; font-size: 1.05rem; }
.legal-indice ol { margin: 0 0 0 20px; }
.legal-indice li { margin-bottom: 5px; }
.legal-indice a { text-decoration: none; }
.legal-indice a:hover { text-decoration: underline; }

@media (max-width: 620px) {
  .legal-wrap { padding: 32px 20px 60px; }
  h2 { font-size: 1.32rem; }
}

/* Que imprimir salga legible: hay gente que va a querer el documento en papel. */
@media print {
  .legal-header, .legal-footer, .legal-volver { display: none; }
  body { background: #fff; font-size: 12pt; }
  a { color: var(--tinta); text-decoration: none; }
}