/* =====================================================================
   3x0t1k -- content.css
   Paginas de lectura: politicas, guias de cuidado, contacto, boletin.
   Solo tokens de app.css. Mobile first, probado a 390px.
   Contrastes medidos sobre --void #04070C:
     --ink   #EAF4F7  18.4:1   titulos, strong, th
     --ink-2 #A3B6C4  10.6:1   cuerpo de texto
     --ink-3 #6F8494   5.2:1   metadatos y notas pequenas
     --cyan  #22E8D4  13.0:1   enlaces
   ===================================================================== */

.p-content main { padding-bottom: var(--sp-8); }

.doc { max-width: 1120px; }
.doc-narrow { max-width: var(--wrap-narrow); }

/* ---------------------------------------------------------- cabecera */
.doc-head {
  padding-block: var(--sp-6) var(--sp-5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-6);
}
.doc-head .eyebrow { margin-bottom: var(--sp-3); }
.doc-head h1 { max-width: 20ch; }
.doc-head .lead { margin-top: var(--sp-4); }
.doc-meta { margin-top: var(--sp-3); letter-spacing: .04em; }

/* ---------------------------------------------------------- rejilla */
.doc-grid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 900px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr) 260px; gap: var(--sp-7); }
  .doc-aside { position: sticky; top: calc(var(--stack-h) + 1rem); }
}

/* ---------------------------------------------------------- prosa */
.prose {
  color: var(--ink-2);
  font-size: var(--fs-base);
  line-height: 1.75;
  max-width: 70ch;
  padding-bottom: var(--sp-7);
}
.prose > * + * { margin-top: 1.15em; }

.prose h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-top: 2.4em;
  padding-top: .9em;
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: calc(var(--stack-h) + 1.5rem);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  margin-top: 1.9em;
  letter-spacing: -.01em;
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { color: var(--ink-2); }

.prose a {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s var(--ease);
}
.prose a:hover { color: var(--lime); }

.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: .55em; }
.prose ul { list-style: none; padding-left: 1.15em; }
.prose ul > li { position: relative; }
.prose ul > li::before {
  content: '';
  position: absolute;
  left: -1.05em;
  top: .72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 7px rgba(34, 232, 212, .55);
}
.prose ol { list-style: decimal; }
.prose ol > li::marker { color: var(--cyan); font-family: var(--font-mono); font-size: .85em; }

.prose blockquote {
  border-left: 2px solid var(--cyan);
  padding: .3em 0 .3em 1.1em;
  color: var(--ink-2);
  font-style: italic;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2em; }

/* una tabla ancha se desplaza sola, el cuerpo de la pagina nunca */
.prose table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  -webkit-overflow-scrolling: touch;
}
.prose th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  padding: .75rem .85rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: var(--surface);
}
.prose td {
  padding: .8rem .85rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  color: var(--ink-2);
}
.prose tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------- lateral */
.doc-aside { display: flex; flex-direction: column; gap: var(--sp-4); }
.doc-aside-h {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .8rem;
}
.doc-toc, .doc-links {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--abyss);
  padding: 1.05rem 1.15rem;
}
.doc-toc ul, .doc-links ul { list-style: none; padding: 0; display: grid; gap: .1rem; }
.doc-toc a, .doc-links a {
  display: block;
  padding: .42em 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.4;
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.doc-toc a:hover, .doc-links a:hover { color: var(--cyan); padding-left: .3em; }

/* ---------------------------------------------------------- indice de guias */
.care-list { margin-top: var(--sp-2); }
.guide-card { display: flex; flex-direction: column; gap: .7rem; height: 100%; position: relative; }
.guide-n {
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  color: var(--cyan);
  opacity: .85;
}
.guide-card h2 { line-height: 1.2; letter-spacing: -.02em; font-family: var(--font-display); font-weight: 700; }
.guide-card h2 a { color: var(--ink); transition: color .2s var(--ease); }
.guide-card h2 a:hover { color: var(--cyan); }
.guide-card p { max-width: 46ch; }
.guide-foot {
  margin-top: auto;
  padding-top: .8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  border-top: 1px solid var(--line-soft);
}

/* ---------------------------------------------------------- formularios */
.contact-form { max-width: 44rem; }
.help.err { color: var(--magenta); }
.p-content .alert { margin-bottom: var(--sp-4); }

/* trampa para bots: fuera de la vista y fuera del foco, nunca display:none
   porque algunos rellenadores automaticos ignoran lo que esta oculto asi */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

@media (max-width: 560px) {
  .doc-head { padding-block: var(--sp-5) var(--sp-4); }
  .prose { font-size: var(--fs-base); line-height: 1.7; }
}