/* Estilos del sitio de Artha.
 *
 * Un solo archivo para las dos páginas. Los colores son los mismos que usa
 * la app, para que quien llegue acá desde la pantalla de permisos de Google
 * reconozca que está en el lugar correcto.
 *
 * Sin fuentes de Google ni ninguna otra pieza traída de afuera: el sitio no
 * le pide nada a ningún tercero. En una página que habla de privacidad, eso
 * no es un detalle de estilo, es parte de lo que la página afirma. */

:root {
  color-scheme: light dark;
  --fondo: #FBF6F0;
  --texto: #2A2320;
  --tenue: #6B5E56;
  --marca: #B4552E;
  --linea: #E7DCD1;
  --caja: #FFFFFF;
}

/* Modo oscuro: lo decide el sistema del visitante, no una preferencia que
 * tengamos que guardar. Sin preferencia guardada no hace falta ninguna
 * cookie, que es justamente lo que la página promete. */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #17120F;
    --texto: #F4ECE4;
    --tenue: #B7A99C;
    --marca: #E0784B;
    --linea: #2E2520;
    --caja: #1F1916;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

/* 16px de aire a los costados: el ancho de un teléfono es el caso normal,
 * no la excepción. */
.hoja {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 16px 72px;
}

/* La marca se dibuja con texto sobre un cuadrado de color. No es una imagen
 * a propósito: una letra siempre se ve nítida y nunca falta. */
.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 40px;
}

.marca .sello {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--marca);
  color: #FBF6F0;
  font-size: 27px;
  font-weight: 800;
  line-height: 44px;
  text-align: center;
}

.marca .nombre { font-size: 20px; font-weight: 800; }

h1 {
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 16px;
}

h2 {
  font-size: 21px;
  font-weight: 700;
  margin: 40px 0 10px;
}

h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 26px 0 6px;
}

p, li { margin: 0 0 14px; }

a { color: var(--marca); }

.entrada {
  font-size: 19px;
  color: var(--tenue);
  margin-bottom: 32px;
}

.fecha {
  color: var(--tenue);
  font-size: 15px;
}

/* Lo que hay que leer sí o sí. Se usa poco, para que siga llamando la
 * atención cuando aparece. */
.destacado {
  background: var(--caja);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--marca);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 24px 0;
}

.destacado p:last-child { margin-bottom: 0; }

.pie {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--linea);
  color: var(--tenue);
  font-size: 15px;
}

/* Tabla de a dónde van los datos. En el teléfono las tablas se rompen, así
 * que abajo de 560px cada fila se muestra como un bloque. */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 16px;
}

th, td {
  text-align: left;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}

th { font-weight: 700; }

@media (max-width: 560px) {
  thead { display: none; }
  tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--linea); }
  td { display: block; border: 0; padding: 2px 0; }
  td:first-child { font-weight: 700; }
}