:root {
  --arena: #f2ece5;
  --blanco: #ffffff;
  --primario: #b78380;
  --primario-profundo: #8a5d59;
  --texto: #4a4a4a;
  --texto-secundario: #6e6663;
  --texto-tenue: #8a807c;
  --borde: #e4d8cc;
  --divisor: #f2ebe2;
  --serif: Lora, Georgia, "Times New Roman", serif;
  --sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--arena);
  color: var(--texto-secundario);
  font: 400 16px/1.65 var(--sans);
}

.marco {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 16px 56px;
}

.cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
}

.marca {
  color: var(--texto);
  font: 500 20px/1.2 var(--serif);
  text-decoration: none;
}

.navegacion {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 14px;
}

.navegacion a[aria-current="page"] {
  color: var(--texto);
  text-decoration: none;
}

.hoja {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 32px 24px;
}

h1 {
  margin: 0 0 8px;
  color: var(--texto);
  font: 500 30px/1.2 var(--serif);
}

h2 {
  margin: 32px 0 8px;
  color: var(--texto);
  font: 500 22px/1.3 var(--serif);
}

h3 {
  margin: 20px 0 4px;
  color: var(--texto);
  font: 600 16px/1.4 var(--sans);
}

p,
ul,
ol {
  margin: 0 0 12px;
  text-wrap: pretty;
}

li {
  margin-bottom: 4px;
}

a {
  color: var(--primario-profundo);
}

strong {
  color: var(--texto);
  font-weight: 600;
}

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

.correo {
  display: inline-block;
  margin: 4px 0 12px;
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--primario);
  color: var(--blanco);
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.pie {
  margin-top: 24px;
  color: var(--texto-tenue);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 480px) {
  .hoja {
    padding: 24px 16px;
  }

  h1 {
    font-size: 26px;
  }
}