/* Livrana · web alternativa · estilo común (portada y páginas legales) */

@font-face { font-family: "Atkinson"; src: url("/fuentes/atkinson-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/fuentes/atkinson-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/fuentes/atkinson-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Serif"; src: url("/fuentes/ptserif-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Serif"; src: url("/fuentes/ptserif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "PT Serif"; src: url("/fuentes/ptserif-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --papel: #F5EEE1;
  --hoja: #FFFCF6;
  --tinta: #2B2722;
  --suave: #645B50;
  --enlace: #8A5410;
  --ambar: #E8A13D;
  --noche: #141A33;
  --sans: "Atkinson", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "PT Serif", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  /* El día entero en una franja: los cielos de los capítulos */
  --dia: linear-gradient(90deg, #1E2140, #DCE7EF 18%, #F5EEE1 34%, #F2DDAE 50%, #EDB596 66%, #141A33 83%, #EAA84A);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1.125rem/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { max-width: 100%; display: block; }
h1, h2, h3 { font-weight: 700; line-height: 1.1; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; border-radius: 6px; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* Etiqueta de máquina de escribir: CAPÍTULO 02 —— CAMINO */
.rotulo {
  display: inline-flex; align-items: center; gap: .9em;
  margin: 0;
  font: 500 .74rem/1.2 var(--mono);
  letter-spacing: .2em; text-transform: uppercase;
}
.rotulo i { display: inline-block; width: 38px; height: 1px; background: currentColor; opacity: .55; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Páginas legales ---------- */
.legal { background: var(--papel); }
.legal .franja { height: 5px; background: var(--dia); }
.cabecera {
  max-width: 900px; margin: 0 auto; padding: 22px 24px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.marca {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--tinta);
  font: 700 1.3rem/1 var(--sans); letter-spacing: -.01em;
}
.marca img { width: 38px; height: 38px; border-radius: 10px; }
.cabecera .rotulo { color: var(--suave); }
/* Idioma: desplegable (08/10/2026), sin JavaScript (<details>). */
.idiomas { margin-left: auto; position: relative; }
.idiomas summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 .74rem/1 var(--mono); letter-spacing: .14em;
  padding: 9px 13px; border-radius: 999px; background: var(--tinta); color: var(--papel);
}
.idiomas summary::-webkit-details-marker { display: none; }
.idiomas summary::after,
.pie-desplegable summary::after {
  content: ""; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s;
}
.idiomas[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.idiomas ul,
.pie-desplegable ul {
  position: absolute; z-index: 10; margin: 0; padding: 6px; list-style: none;
  min-width: 220px; background: var(--hoja); color: #2B2722;
  border: 1px solid rgba(43, 39, 34, .14); border-radius: 14px;
  box-shadow: 0 14px 34px rgba(43, 39, 34, .16);
}
.idiomas ul { right: 0; top: calc(100% + 8px); }
.idiomas li a,
.pie-desplegable li a {
  display: block; padding: 9px 12px; border-radius: 9px;
  text-decoration: none; color: #2B2722; font: 400 .98rem/1.3 var(--sans); letter-spacing: 0;
}
.idiomas li a:hover, .idiomas li a:focus-visible,
.pie-desplegable li a:hover, .pie-desplegable li a:focus-visible { background: rgba(43, 39, 34, .07); }
.idiomas li a[aria-current="page"] { font-weight: 700; }

.documento { max-width: 900px; margin: 0 auto; padding: 36px 24px 40px; }
.documento h1 {
  margin: 0 0 14px;
  font-size: clamp(2.4rem, 7vw, 4.6rem); letter-spacing: -.035em; line-height: 1;
  /* Títulos largos (Nutzungsbedingungen…): se parten con guion en el móvil. */
  hyphens: auto; overflow-wrap: break-word;
}
.documento p.fecha { font: 500 .78rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--suave); margin: 0 0 22px; }
.documento p.nota {
  border-left: 3px solid var(--ambar); padding: 6px 0 6px 16px;
  font-size: 1rem; color: var(--suave);
}
.documento h2 {
  margin: 44px 0 8px; padding-top: 18px;
  border-top: 1px solid rgba(43, 39, 34, .14);
  font-size: 1.35rem; letter-spacing: -.01em;
}
.documento a { color: var(--enlace); }
/* Preguntas de la página de ayuda (08/10/2026). */
.documento h3 { margin: 28px 0 6px; font-size: 1.08rem; letter-spacing: -.005em; }
.documento .volver { display: inline-block; margin-top: 18px; font-weight: 700; }

.pie-legal-pagina {
  max-width: 900px; margin: 0 auto; padding: 24px 24px 56px;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 24px;
  font-size: .95rem; color: var(--suave);
}
.pie-legal-pagina .flores { display: flex; align-items: flex-end; gap: 6px; height: 54px; }
.pie-legal-pagina .flores img { height: 100%; width: auto; }
.pie-legal-pagina p { margin: 0; }

@media (max-width: 640px) {
  body { font-size: 1.0625rem; }
  .cabecera .rotulo { display: none; }
}