/* Estilos de marca Tabellio para las páginas de contenido (pilar + blog).
   Azul Pretoriano #1A2B3C · Gris Estilete #6F7278 · Cinzel (display) + Inter (texto). */
:root {
  --azul: #1A2B3C;
  --gris: #6F7278;
  --linea: #e6e8eb;
  --acento: #1A2B3C;
  --bg-suave: #f6f7f9;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #1f2933;
  line-height: 1.7;
  background: #fff;
}
.site-header {
  background: var(--azul);
  color: #fff;
  padding: 14px 20px;
}
.site-header a { color: #fff; text-decoration: none; }
.site-header .marca {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 1.15rem;
}
.site-header .lema {
  font-family: "Cinzel", Georgia, serif;
  font-size: .72rem;
  letter-spacing: .12em;
  opacity: .8;
  margin-left: 10px;
}
main { max-width: 760px; margin: 0 auto; padding: 32px 20px 64px; }
nav[aria-label="ruta"] { font-size: .85rem; color: var(--gris); margin-bottom: 18px; }
nav[aria-label="ruta"] a { color: var(--gris); }
h1 {
  font-family: "Cinzel", Georgia, serif;
  color: var(--azul);
  font-size: 1.9rem;
  line-height: 1.25;
  margin: 0 0 18px;
}
h2 {
  font-family: "Cinzel", Georgia, serif;
  color: var(--azul);
  font-size: 1.3rem;
  margin: 34px 0 12px;
}
h3 { color: var(--azul); font-size: 1.05rem; margin: 20px 0 6px; }
.respuesta-directa {
  background: var(--bg-suave);
  border-left: 4px solid var(--acento);
  padding: 16px 18px;
  border-radius: 4px;
  font-size: 1.08rem;
}
ul { padding-left: 1.2rem; }
li { margin: 6px 0; }
a { color: #15507a; }
.faq { border-top: 1px solid var(--linea); margin-top: 36px; padding-top: 8px; }
.actualizado, .fuentes { font-size: .85rem; color: var(--gris); }
.fuentes { border-top: 1px solid var(--linea); margin-top: 28px; padding-top: 14px; }
.site-footer {
  border-top: 1px solid var(--linea);
  color: var(--gris);
  font-size: .85rem;
  text-align: center;
  padding: 24px 20px 40px;
}
@media (max-width: 600px) { h1 { font-size: 1.5rem; } main { padding: 22px 16px 48px; } }