/* ── Landing de proyecto ─────────────────────────────────────
   Hereda todo el sistema de style.css: tokens, filtro de lectura,
   tipografía y comportamiento de foco. Aquí solo va lo que la
   landing añade, que es un recorrido de una sola columna sin
   índice lateral: la página es corta y el índice competiría con
   los botones, que deben quedar por encima del pliegue.        */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Cabecera compacta ──────────────────────────────────────
   Deliberadamente baja: cada píxel de cabecera es un píxel que
   le quitamos a los botones de «Pruébalo» en móvil.            */
.p-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-paper-alt);
}
.p-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.6rem var(--gap);
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
}
.p-brand {
  font-family: var(--font-serif);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
}
.p-brand:hover, .p-brand:focus-visible { text-decoration: underline; }
.p-brand__sub {
  font-size: var(--font-size-sm);
  color: var(--color-ink-muted);
  font-style: italic;
}

.p-main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--gap) var(--gap) var(--gap-lg);
}
.p-main section + section { margin-top: var(--gap-lg); }

.p-h1 {
  font-family: var(--font-serif);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-heading);
  color: var(--color-accent);
  margin: 0.6rem 0 0.8rem;
  text-wrap: balance;
}
.p-main h2 {
  font-family: var(--font-serif);
  font-size: var(--font-size-xl);
  color: var(--color-accent);
  margin: 0 0 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--color-border);
}
.p-main h3 {
  font-size: var(--font-size-lg);
  color: var(--color-ink);
  margin: var(--gap) 0 0.4rem;
}
.p-main p, .p-main li { line-height: var(--line-height); }
.p-main ul { padding-left: 1.2rem; }
.p-main li { margin-bottom: 0.5rem; }

.p-lead { font-size: var(--font-size-lg); margin: 0 0 0.8rem; }
.p-lead--second { color: var(--color-ink-secondary); }

/* ── Botones de prueba ──────────────────────────────────────
   Bloque completo y apilado: en móvil los dos tienen que caber
   sin scroll horizontal y con área de pulsación holgada.       */
.p-btn {
  display: block;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.7rem;
  background: var(--color-paper-raised);
  border: 2px solid var(--color-accent);
  border-radius: 4px;
  text-decoration: none;
  color: var(--color-ink);
}
.p-btn:hover { background: var(--color-link-focus-bg); border-color: var(--color-link); }
.p-btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.p-btn__title {
  display: block;
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--color-link);
  text-decoration: underline;
  margin-bottom: 0.2rem;
}
.p-btn__sub {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-ink-secondary);
  line-height: 1.5;
}

.p-verifica {
  margin: var(--gap) 0 0.8rem;
  padding: 1rem 1.1rem;
  background: var(--color-paper-raised);
  border-left: 4px solid var(--color-accent);
}
.p-verifica h3 { margin-top: 0; }
.p-verifica p { margin: 0 0 0.6rem; }
.p-verifica p:last-child { margin-bottom: 0; }
.p-verifica__pregunta {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  font-style: italic;
  padding-left: 0.8rem;
  border-left: 2px solid var(--color-border-strong);
}

.p-aviso, .p-nota-demos {
  font-size: var(--font-size-sm);
  color: var(--color-ink-muted);
  line-height: 1.6;
}
.p-mas { margin-top: 0.8rem; }

/* ── Demos plegadas ─────────────────────────────────────────
   details/summary nativos: teclado y lector de pantalla sin una
   línea de JavaScript. El veredicto es la información y va
   visible; la transcripción es la prueba y va dentro.          */
.p-demo {
  border: 1px solid var(--color-ink-muted);
  border-radius: 4px;
  margin-bottom: 0.7rem;
  background: var(--color-paper-raised);
}
.p-demo > summary {
  cursor: pointer;
  padding: 0.8rem 1rem;
  list-style: none;
}
.p-demo > summary::-webkit-details-marker { display: none; }
.p-demo > summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }
.p-demo__caso {
  display: block;
  font-weight: 700;
  color: var(--color-link);
  margin-bottom: 0.3rem;
}
.p-demo__caso::before { content: "▸ "; color: var(--color-ink-muted); }
.p-demo[open] .p-demo__caso::before { content: "▾ "; }
.p-demo__veredicto {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-ink-secondary);
  line-height: 1.6;
}
.p-demo__cuerpo {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--color-border);
}

/* Cada turno lleva su etiqueta textual, no solo un color de
   fondo: quien navega con lector de pantalla no percibe el
   color, y sin la etiqueta no sabría quién dice qué.           */
.p-turno {
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-paper);
}
.p-turno__quien {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-muted);
  margin-bottom: 0.3rem;
}
.p-turno--pregunta { border-left-color: var(--color-ink-muted); }
.p-turno--sin      { border-left-color: var(--color-border-strong); }
.p-turno--con      { border-left-color: var(--color-accent); }
.p-demo__lectura {
  margin: 0.9rem 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-ink-secondary);
  font-style: italic;
  line-height: 1.6;
}

.p-hallazgo {
  margin: var(--gap) 0;
  padding: 1rem 1.1rem;
  background: var(--color-paper-raised);
  border-left: 4px solid var(--color-accent);
}

/* ── Tablas ─────────────────────────────────────────────────
   Material de comprobación, no el argumento. Se desbordan en
   su propio contenedor para que el cuerpo de la página nunca
   tenga scroll horizontal.                                     */
.p-tabla { margin: var(--gap) 0; }
.p-tabla figcaption {
  font-size: var(--font-size-sm);
  color: var(--color-ink-muted);
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.p-tabla__scroll { overflow-x: auto; }
.p-tabla table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: var(--font-size-sm);
}
.p-tabla th, .p-tabla td {
  border: 1px solid var(--color-border-strong);
  padding: 0.5rem 0.6rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.p-tabla thead th { background: var(--color-paper-alt); }
.p-tabla tbody th { background: var(--color-paper-raised); font-weight: 700; }

.p-llamada {
  padding: 1rem 1.1rem;
  background: var(--color-paper-raised);
  border: 1px solid var(--color-ink-muted);
  border-radius: 4px;
}
.p-llamada h2 { border-bottom: none; margin-bottom: 0.4rem; }
.p-llamada p:last-child { margin-bottom: 0; }

.p-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-paper-alt);
  margin-top: var(--gap-lg);
}
.p-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--gap);
  font-size: var(--font-size-sm);
  color: var(--color-ink-secondary);
}
.p-footer p { margin: 0 0 0.4rem; line-height: 1.6; }
.p-footer p:last-child { margin-bottom: 0; }

@media (max-width: 30rem) {
  .p-main { padding-left: 1rem; padding-right: 1rem; }
  .p-h1 { font-size: var(--font-size-xl); }
  .p-turno, .p-verifica, .p-hallazgo { padding-left: 0.8rem; padding-right: 0.8rem; }
}

@media print {
  .p-btn { border-width: 1px; }
  .p-demo[open] .p-demo__cuerpo { display: block; }
}

/* ── La guía, con peso propio ────────────────────────────────
   El asistente es la puerta; la guía es la casa. Un enlace
   suelto la dejaba por debajo de los dos botones de prueba,
   que es al revés de lo que importa.
   El enlace va en el encabezado y no envolviendo la tarjeta
   entera: un ancla que contiene cinco párrafos convierte los
   cinco en el nombre accesible del enlace.                    */
.p-guia {
  margin: var(--gap) 0 0.8rem;
  padding: 1.1rem 1.2rem;
  background: var(--color-paper-raised);
  border: 2px solid var(--color-accent);
  border-radius: 4px;
}
.p-guia__eyebrow {
  margin: 0 0 0.2rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-ink-muted);
}
.p-guia__titulo {
  font-family: var(--font-serif);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-heading);
  margin: 0 0 0.5rem;
}
.p-guia__titulo a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.p-guia__titulo a::after { content: " →"; text-decoration: none; }
.p-guia__titulo a:hover { background: var(--color-link-focus-bg); }
.p-guia__titulo a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.p-guia__desc { margin: 0 0 0.7rem; }
.p-guia__lista { margin: 0 0 0.7rem; padding-left: 1.2rem; }
.p-guia__lista li { margin-bottom: 0.35rem; line-height: 1.6; }
.p-guia__datos {
  margin: 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-ink-muted);
}