/* [ajustes] */
:root {
  --c-fondo: #FFFFFF;
  --c-tierra: #2A221B;
  --c-tierra-media: #5C5147;
  --c-surco: #3F7D20;
  --c-surco-hondo: #2F5E18;
  --c-brote: #EAF2E3;
  --c-rastrojo: #F6F3EC;
  --c-borde: #8A8078;
  --c-alerta: #A3262A;

  --t-titular: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --t-lectura: "Lexend", system-ui, sans-serif;
  --t-cifra: "Martian Mono", ui-monospace, monospace;
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.25rem;
  --t-xl: 2rem;
  --t-xxl: clamp(2.5rem, 1.8rem + 3vw, 3.75rem);
  --t-alto-texto: 1.55;
  --t-alto-titular: 1.05;

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 20px;
  --e-5: 32px;
  --e-6: 56px;
  --e-texto: 40rem;
  --e-ficha: 19rem;
  --e-hoja: 76rem;

  --r-panel: 6px;
  --r-campo: 4px;
  --sombra-panel: 0 1px 2px rgba(42, 34, 27, 0.14);
  --m-rapido: 120ms;
  --m-curva: ease-out;
}

/* [elementos] */
*,
::before,
::after {
  box-sizing: border-box;
}

body {
  background: var(--c-fondo);
  color: var(--c-tierra);
  font-family: var(--t-lectura);
  font-size: var(--t-m);
  line-height: var(--t-alto-texto);
  margin: 0;
  /* Un correo o una URL larga no tienen donde partirse y se llevan la pagina
     al costado; abajo de 360 px eso pasa con cualquier direccion. */
  overflow-wrap: break-word;
  padding: 0;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

h1,
h2,
h3 {
  font-family: var(--t-titular);
  font-weight: 800;
  line-height: var(--t-alto-titular);
  margin: 0 0 var(--e-3);
}

h1 {
  font-size: var(--t-xxl);
  letter-spacing: 0.01em;
}

h2 {
  font-size: var(--t-xl);
  margin-top: var(--e-6);
}

h3 {
  font-size: var(--t-l);
  font-weight: 600;
  margin-top: var(--e-5);
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--e-4);
}

ul,
ol {
  padding-left: var(--e-4);
}

li + li {
  margin-top: var(--e-2);
}

a {
  color: var(--c-surco-hondo);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--c-surco);
  outline-offset: 2px;
}

strong,
b {
  font-weight: 600;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

figure {
  margin: 0;
}

table {
  border-collapse: collapse;
  font-size: var(--t-s);
  width: 100%;
}

caption {
  font-family: var(--t-titular);
  font-size: var(--t-l);
  font-weight: 600;
  padding-bottom: var(--e-2);
  text-align: left;
}

th,
td {
  padding: var(--e-2) var(--e-3);
  text-align: left;
  vertical-align: top;
}

th {
  font-weight: 600;
}

time,
data {
  font-variant-numeric: tabular-nums;
}

hr {
  border: 0;
  border-top: 1px solid var(--c-borde);
  margin: var(--e-5) 0;
}

abbr[title] {
  text-decoration: underline dotted;
}

summary {
  cursor: pointer;
}

input,
select,
textarea,
button {
  font: inherit;
}

::placeholder {
  color: var(--c-tierra-media);
  opacity: 1;
}

/* [estructura] */
.l-hoja {
  margin: 0 auto;
  max-width: var(--e-hoja);
  padding: 0 var(--e-4);
  width: 100%;
}

.l-dos-columnas {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: minmax(0, 1fr);
}

.l-tablero {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: minmax(0, 1fr);
}

main {
  display: block;
  padding-bottom: var(--e-6);
}

@media (min-width: 820px) {
  /* Con la cabecera pegada, un salto a un id dejaria el destino debajo de
     ella. Esto reserva su alto mas un respiro. */
  html {
    scroll-padding-top: 7rem;
  }

  .l-dos-columnas {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) var(--e-ficha);
  }

  .l-tablero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}