/* ══ RealControl · páginas de contenido ══
   Las páginas por tema (acreditación, accesos, permisos, riesgo laboral, preguntas frecuentes, F30-1, registro de inmersiones e industrias) que
   construye paginas-construir.mjs. Livianas: sin el túnel, sin Three.js, sin intro. Mismo sistema de diseño que el sitio (sitio.css): tokens,
   tipografía, botones, cabecera y pie. Solo lo propio de una página de lectura va aquí; todo con tokens. ══ */

body.pg{background:var(--bg)}
html{scroll-padding-top:calc(var(--top-h) + 16px)}

/* Cabecera: sobre la banda oscura de la página, como en el inicio */
body.pg .top{position:fixed}

/* ── Banda de entrada ───────────────────────────────────── */
.pg-hero{padding:calc(var(--top-h) + clamp(36px,5vw,64px)) 0 clamp(48px,6vw,84px);background:
  radial-gradient(ellipse 55% 70% at 88% 0%,color-mix(in srgb,var(--marca) 16%,transparent),transparent 70%),var(--ink);color:var(--on-ink)}
.aq .pg-hero{background:radial-gradient(ellipse 55% 70% at 88% 0%,color-mix(in srgb,var(--aqora) 28%,transparent),transparent 70%),var(--ink)}
.pg-miga ol{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;margin:0 0 clamp(20px,3vw,32px);padding:0;font:500 12px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-ink-3)}
.pg-miga li:not(:last-child)::after{content:"/";margin-left:10px;color:var(--ink-line)}
.pg-miga a{color:var(--on-ink-2);text-decoration:none}
.pg-miga a:hover{color:var(--on-ink);text-decoration:underline;text-underline-offset:3px}
.pg-miga [aria-current]{color:var(--on-ink)}
.pg-hero h1{font:600 clamp(34px,5vw,62px)/1.04 var(--f-display);letter-spacing:-.035em;max-width:21ch;text-wrap:balance;margin:0}
.pg-bajada{max-width:64ch;margin:clamp(16px,2vw,24px) 0 0;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--on-ink-2);text-wrap:pretty}
.pg-bajada strong{color:var(--on-ink);font-weight:600}
.pg-botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vw,34px)}

/* ── Cuerpo ─────────────────────────────────────────────── */
.pg-sec{padding:clamp(44px,6vw,84px) 0}
.pg-sec:nth-of-type(even){background:var(--surface-2);border-block:1px solid var(--line)}
.pg-in{max-width:780px}
.pg-sec .h2{font-size:clamp(26px,3vw,38px);margin:0 0 clamp(16px,2vw,24px)}
.pg-sec h3{font:600 clamp(18px,1.6vw,21px)/1.3 var(--f-display);letter-spacing:-.02em;margin:clamp(22px,2.4vw,30px) 0 8px}
.pg-sec p{margin:0 0 16px;font-size:clamp(16px,1.25vw,18px);line-height:1.65;color:var(--text-2);text-wrap:pretty}
.pg-sec strong{color:var(--text);font-weight:600}
.pg-sec ul,.pg-sec ol{margin:0 0 18px;padding-left:1.25em;display:flex;flex-direction:column;gap:10px;font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--text-2)}
.pg-sec li::marker{color:var(--marca-fuerte)}
.aq .pg-sec li::marker{color:var(--aqora-fuerte)}
.pg-sec code{font:500 .9em var(--f-mono);background:var(--surface-3);padding:1px 6px;border-radius:5px}
.pg-sec a{color:var(--marca-fuerte);text-underline-offset:3px;text-decoration-thickness:1px}
.aq .pg-sec a{color:var(--aqora-fuerte)}
.pg-sec a:hover{text-decoration-thickness:2px}
.pg-mas{margin:-4px 0 18px!important;font-weight:500}
.pg-mas a{text-decoration:none}
.pg-mas a:hover{text-decoration:underline}

.pg-tabla{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.pg-tabla table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;min-width:480px}
.pg-tabla th,.pg-tabla td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.pg-tabla tr:last-child > *{border-bottom:0}
.pg-tabla thead th{font:500 11.5px/1.3 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);background:var(--surface-2)}
.pg-tabla tbody th{font-weight:600;color:var(--text);white-space:nowrap}
.pg-tabla td{color:var(--text-2)}
.pg-tabla:focus-visible{outline:2px solid var(--marca-fuerte);outline-offset:2px}

/* ── Preguntas frecuentes ───────────────────────────────── */
.pg-q{border-top:1px solid var(--line);padding:16px 0 4px}
.pg-q:first-of-type{margin-top:6px}
.pg-q h3{margin:0 0 6px;font-size:clamp(17px,1.5vw,19px)}
.pg-q p{margin:0 0 12px}

/* ── Cierre ─────────────────────────────────────────────── */
.pg-cierre{padding:clamp(48px,6vw,84px) 0;background:var(--ink);color:var(--on-ink);text-align:center}
.pg-cierre-t{max-width:34ch;margin:0 auto 22px;font:600 clamp(24px,3vw,36px)/1.2 var(--f-display);letter-spacing:-.025em;text-wrap:balance}
.pg-cierre-t strong{font-weight:600}
.pg-legal{max-width:62ch;margin:26px auto 0;font-size:13px;line-height:1.5;color:var(--on-ink-3)}

@media (max-width:760px){
  .pg-hero h1{max-width:none}
  .pg-botones .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}