/* Hoja de las paginas de contenido (no la del hero, que va en linea en index.html).
   Monocromo, una sola tipografia, jerarquia por peso y tamano. El naranja de la
   marca se reserva para la llamada a la accion; los enlaces del texto van
   subrayados en el color del texto, que a 17px se lee mejor que el color. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: #3E1F19;
  background: #FAF7F2;
  -webkit-font-smoothing: antialiased;
}

.contenedor { max-width: 680px; margin: 0 auto; padding: 0 32px; }

/* Cabecera: la marca y nada mas. El menu completo se quito a proposito el
   09-sep; estas paginas no lo reponen. */
header { padding: 26px 0 0; }
.marca { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; border-bottom: 0; }
.marca svg { width: 30px; height: 30px; flex: none; }
.marca .wm { font-size: 20px; letter-spacing: -.025em; color: #4A1C15; }
.marca .wm b { font-weight: 700; }
.marca .wm span { font-weight: 400; }

main { padding: 44px 0 0; }

.migas { font-size: 13.5px; color: #8A736B; margin: 0 0 18px; }
.migas a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(138,115,107,.4); }
.migas a:hover { color: #3E1F19; }

h1 {
  font-size: clamp(28px, 5.6vw, 38px);
  line-height: 1.12;
  letter-spacing: -.032em;
  font-weight: 700;
  margin: 0 0 20px;
}
.entrada { font-size: 19px; line-height: 1.58; margin: 0 0 8px; }

h2 {
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -.018em;
  font-weight: 700;
  margin: 46px 0 14px;
}
h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 28px 0 6px;
}

p { margin: 0 0 18px; }

a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(62,31,25,.32); }
a:hover { border-bottom-color: #EE5B36; color: #A33E23; }

ul { margin: 0 0 18px; padding-left: 20px; }
li { margin: 0 0 9px; }

strong { font-weight: 700; }

.nota { font-size: 15px; color: #6B4A42; }

hr { border: 0; border-top: 1px solid #E4D9CC; margin: 46px 0; }

/* Indice del hub: sin iconos ni vinetas, solo tipografia. */
.indice { margin: 34px 0 0; }
.indice .pieza { padding: 22px 0; border-top: 1px solid #E4D9CC; }
.indice .pieza:last-child { border-bottom: 1px solid #E4D9CC; }
.indice .pieza a { font-size: 19px; font-weight: 700; letter-spacing: -.018em; border-bottom: 0; }
.indice .pieza a:hover { color: #A33E23; }
.indice .pieza p { margin: 5px 0 0; color: #6B4A42; font-size: 15.5px; }

/* Llamada a la accion: el unico sitio donde entra el naranja. */
.cta { margin: 40px 0 0; padding: 26px 0 0; border-top: 1px solid #E4D9CC; }
.cta p { margin: 0 0 14px; }
.boton {
  display: inline-block;
  font-size: 13.5px; font-weight: 700;
  background: #EE5B36; color: #fff;
  border: 0; border-radius: 3px;
  padding: 12px 22px;
  text-decoration: none;
}
.boton:hover { background: #DC4E2B; color: #fff; }

footer {
  margin: 66px 0 0;
  padding: 22px 0 44px;
  border-top: 1px solid #E4D9CC;
  font-size: 14px;
  color: #8A736B;
}
footer a { color: inherit; border-bottom: 1px solid rgba(138,115,107,.4); }
footer a:hover { color: #3E1F19; }
footer .enlaces a { margin-right: 18px; }
footer .linea { margin: 10px 0 0; }

@media (max-width: 600px) {
  body { font-size: 16.5px; }
  .contenedor { padding: 0 22px; }
  header { padding: 18px 0 0; }
  main { padding: 34px 0 0; }
  .entrada { font-size: 18px; }
  h2 { font-size: 19.5px; margin-top: 38px; }
  footer .enlaces a { display: block; margin: 0 0 8px; }
}