/* ═══════════════════════════════════════════════════════════════
   EL ÚLTIMO ADIÓS · doc.css · páginas de documento «Cal y mármol»
   Condiciones, privacidad, aviso legal y gracias (ES y EN).
   Se carga DESPUÉS de web.css: los tokens, la cabecera (.nav), el pie
   (.pie), la columna .doc, .pasos, .lista-ok, .transp y los botones
   vienen de allí. Aquí solo va lo propio de los documentos.
   Enlace: <link rel="stylesheet" href="web.css?v=20"> y después
   <link rel="stylesheet" href="doc.css?v=3">. Al cambiar este archivo,
   subid el ?v= en las ocho páginas que lo usan.
   Piezas propias: .doc-cab, .doc-otros (con .largo/.corto en móvil),
   .esencial, .indice, h2 > .n, .sub, .transp, .formatos, .modelo,
   .pasos de gracias y .gracias-fin.

   Marcado de una página:
   <main id="contenido">
     <div class="doc-cab"><div class="doc">
       <nav class="doc-otros">…</nav>  (o <p class="rotulo"> en gracias)
       <h1>…</h1><p class="meta">…</p><p class="entrada">…</p>
     </div></div>
     <div class="doc">
       <section class="esencial">…</section>   (opcional)
       <nav class="indice">…</nav>             (opcional)
       <h2 id="…"><span class="n">1.</span> …</h2> <p>…</p> …
       <p class="foot">…</p>
     </div>
   </main>
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1 · Columna de lectura (unos 70 caracteres por línea) ──── */
.doc { max-width: calc(700px + 2 * var(--margen)); padding: 44px var(--margen) 88px; }
.doc p, .doc li { font-size: 17px; line-height: 1.65; }
.doc p { max-width: none; }
.doc .nota { font-size: 15.5px; line-height: 1.5; color: var(--t2); }
.doc ul:not(.lista-ok) li::marker { color: var(--piedra); }
.doc a:hover { text-decoration-thickness: 2px; }
/* Los botones conservan su color dentro del documento (.doc a pintaría de añil el texto del botón) */
.doc .btn { text-decoration: none; }
.doc .btn--p, .doc .btn--p:hover { color: var(--cal); }
.doc .btn--s { color: var(--anil); }

/* ─── 2 · Cabecera del documento (franja de mármol) ──────────── */
.doc-cab { background: var(--marmol); border-bottom: 1px solid var(--linea-2); --t2: var(--piedra-osc); --linea: #C9C3B8; }
.doc-cab .doc { padding-top: 36px; padding-bottom: 40px; }
.doc-cab h1 { margin: 0; }
.doc-cab .meta { margin: 14px 0 0; color: var(--piedra-osc); }
.doc-cab .meta a { color: var(--anil); }
.doc-cab .entrada { margin-top: 20px; font-size: 18.5px; line-height: 1.55; color: var(--tinta-2); }
.doc-cab .rotulo { margin: 0 0 12px; font-size: 16.5px; color: var(--piedra-osc); }

/* Pestañas entre los tres documentos legales */
.doc-otros { display: flex; flex-wrap: wrap; gap: 0 26px; margin: 0 0 14px; }
.doc .doc-otros a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: var(--tinta-2); text-decoration: none; white-space: nowrap; }
.doc .doc-otros a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 6px; }
.doc .doc-otros a[aria-current="page"] { color: var(--tinta); font-weight: 700; text-decoration: underline; text-decoration-color: var(--anil); text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* ─── 3 · Apartados numerados ────────────────────────────────── */
.doc > h2 { margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--linea); }
.doc > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc h2 .n { color: var(--piedra); font-variant-numeric: lining-nums; margin-right: .12em; }
.doc > h2 + p, .doc > h2 + ul { margin-top: 0; }
.doc > ul { margin: 12px 0; }
.doc .sub { margin-top: 22px; }
.doc .sub b:first-child { color: var(--tinta); }

/* Línea de transparencia de la IA (la misma de la portada, con su filete de albero) */
.doc .transp { margin: 14px 0; max-width: none; font-size: 17.5px; line-height: 1.5; color: var(--tinta); }

/* Dibujos de los tres formatos (lápida o nicho, urna, marco) en las condiciones.
   Pie como en funerarias: <figcaption><b>Nombre</b>Medida</figcaption>, el nombre en su línea */
.doc .formatos { margin: 20px 0 4px; }
.doc .formatos figure { width: 168px; }
.doc .formatos figcaption { font-size: 15px; line-height: 1.35; text-wrap: balance; }
.doc .formatos figcaption b { display: block; font-weight: 700; color: var(--tinta); }

/* Modelo de desistimiento */
.modelo { margin: 14px 0 0; padding: 16px 20px; background: var(--papel); border: 1px solid var(--linea-2); border-radius: var(--radio); }
.doc .modelo p { font-size: 16.5px; line-height: 1.6; color: var(--tinta); }
.doc .modelo .modelo-tit { font-size: 15px; font-weight: 700; color: var(--t2); margin-bottom: 4px; }

/* ─── 4 · «Lo esencial» (resumen al principio de las condiciones) ── */
.esencial { padding: 24px 28px 20px; background: var(--papel); border: 1px solid var(--linea-2); border-radius: var(--radio-l); }
.doc .esencial h2 { margin: 0 0 4px; padding: 0; border: 0; font-size: 27px; }
.doc .esencial .lista-ok { display: block; padding: 0; margin: 0; }
.doc .esencial .lista-ok li { padding: 13px 0; border-bottom: 1px solid var(--linea); color: var(--tinta-2); }
.doc .esencial .lista-ok li:last-child { border-bottom: 0; padding-bottom: 4px; }

/* ─── 5 · Índice «En esta página» ────────────────────────────── */
.indice { margin-top: 36px; }
.doc > .indice:first-child { margin-top: 0; }
.indice-tit { display: block; font-size: 16px; font-weight: 700; color: var(--tinta); margin-bottom: 4px; }
.doc .indice ol { display: block; columns: 2; column-gap: 36px; list-style: none; padding: 0; margin: 0; counter-reset: ind; }
.doc .indice li { counter-increment: ind; display: flex; align-items: baseline; gap: 10px; break-inside: avoid; font-size: 16.5px; line-height: 1.35; }
.indice li::before { content: counter(ind) "."; flex: none; min-width: 1.35em; font-family: var(--serif); font-size: 1.1em; font-variant-numeric: lining-nums; color: var(--piedra); }
.doc .indice a { display: block; padding: 9px 0; color: var(--anil); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.doc .indice a:hover { text-decoration-thickness: 2px; }

/* ─── 6 · Gracias: pasos y despedida ─────────────────────────── */
.doc .pasos { display: block; padding: 0; margin: 22px 0 0; }
.doc .paso { padding-bottom: 34px; }
.doc .paso:last-child { padding-bottom: 0; }
.doc .paso h3 { margin: 10px 0 0; font-size: clamp(24px, 2vw, 27px); line-height: 1.2; }
.doc .paso p { margin-top: 8px; color: var(--tinta-2); }
.doc .paso .acciones { margin-top: 18px; }
.gracias-fin { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--linea); }
.gracias-fin .firma-nombre { margin-top: 20px; }

/* ─── 7 · Tableta y móvil ────────────────────────────────────── */
@media (max-width: 600px) {
  .doc { padding-top: 30px; padding-bottom: 60px; }
  .doc-cab .doc { padding-top: 14px; padding-bottom: 28px; }
  .doc-otros { gap: 0 20px; margin-bottom: 6px; }
  .doc .doc-otros a { font-size: 15.5px; }
  .doc h1 { font-size: 37px; }
  .doc-cab .entrada { font-size: 17.5px; margin-top: 16px; }
  .doc > h2 { font-size: 26px; margin-top: 38px; padding-top: 24px; }
  .esencial { padding: 18px 16px 14px; }
  .doc .esencial h2 { font-size: 25px; }
  .doc .indice ol { columns: 1; }
  .doc .indice li { font-size: 16px; }
  .doc .indice a { padding: 10px 0; }
  .doc .paso .acciones .btn { width: 100%; }
  .modelo { padding: 14px 16px; }
  .doc .formatos figure { width: auto; }
}

/* ─── 8 · Impresión: solo el documento ───────────────────────── */
@media print {
  .nav, .pie, .saltar, .aviso-idioma, .doc-otros, .indice, .acciones, .barra { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .doc-cab { background: none; border: 0; }
  .doc, .doc-cab .doc { max-width: none; padding: 0 0 12pt; }
  .doc p, .doc li { font-size: 11pt; line-height: 1.5; color: #000; }
  .doc a { color: inherit; }
  .doc > h2 { break-after: avoid; margin-top: 18pt; padding-top: 10pt; }
  .esencial, .modelo, .doc .paso { break-inside: avoid; }
}