/* ============================================================================
   Composición de las páginas de texto largo · Fase 2, capa 2
   ============================================================================
   La primera capa de la Fase 2 cambió el color y nada más. El resultado era
   legible y coherente, y Andrés lo describió con una palabra exacta: básico.
   Tenía razón — una página de lectura no se compone eligiendo tintas, se
   compone decidiendo medida, escala y ritmo. Esto es la segunda capa.

   No introduce ni un color ni un componente nuevo: todo sale de tokens.css.

   Las cinco decisiones, y por qué cada una:

   1. MEDIDA (--pp-medida, 680px). El cuerpo corría al ancho del contenedor
      —hasta 1080px— y a esa medida el ojo pierde el renglón al volver. 680px
      con Fraunces a 18px da 70-75 caracteres por línea, que es la horquilla
      donde la lectura larga deja de cansar. Es el cambio que más hace por sí
      solo: lo que se sentía plano era, en buena parte, esto.

   2. ESCALA DE DISPLAY. Un h1 tímido y un cuerpo de 17px se parecen
      demasiado, y sin distancia entre ellos no hay jerarquía que leer. El
      clamp() da 40px en un móvil y 76px en escritorio sin puntos de ruptura.

   3. KICKER MONO AL MARGEN. La numeración y el rótulo de sección viven en la
      columna izquierda, fuera del texto. Estructuran sin adornar: el lector
      sabe dónde está sin que nada le interrumpa el párrafo.

   4. RITMO Y FILETE. Las secciones respiran con clamp(56px, 7vw, 104px) y se
      separan con el filete de 1px del sistema, que ya es el único borde que
      existe. Nada de cajas para marcar una división.

   5. CALLOUT. Lo que hoy es un párrafo indistinguible del resto y debería
      destacarse pasa a la superficie de tarjeta con el borde y la sombra
      únicos del sistema.

   Se carga aparte de tokens.css a propósito: tokens no impone ni una regla
   de maqueta, y este archivo es todo maqueta.
   ============================================================================ */

:root {
    --pp-medida: 680px;      /* medida de lectura del cuerpo */
    --pp-margen: 132px;      /* columna del kicker en escritorio */
    --pp-aire: clamp(56px, 7vw, 104px);   /* ritmo entre secciones */
}

/* --- medida ---------------------------------------------------------------
   Se aplica al CONTENEDOR del texto, no al ancho de la página: los rótulos,
   las rejillas de tarjetas y las láminas siguen usando el ancho completo. */
.pp-medida { max-width: var(--pp-medida); }

/* --- escala de display ---------------------------------------------------- */
.pp-display {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(40px, 6.4vw, 76px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.021em;
    color: var(--fg, #111B24);
    margin: 0;
    text-wrap: balance;
}
.pp-entrada {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(19px, 2.1vw, 24px);
    line-height: 1.5;
    color: var(--fg-dim, #545E68);
    max-width: var(--pp-medida);
    margin: 20px 0 0;
    text-wrap: pretty;
}
.pp-h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(27px, 3.1vw, 40px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.014em;
    color: var(--fg, #111B24);
    margin: 0 0 18px;
    text-wrap: balance;
}
.pp-h3 {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: clamp(19px, 1.7vw, 22px);
    font-weight: 600;
    line-height: 1.25;
    color: var(--fg, #111B24);
    margin: 0 0 8px;
}

/* --- cuerpo --------------------------------------------------------------- */
.pp-cuerpo {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    line-height: 1.68;
    color: var(--fg, #111B24);
    max-width: var(--pp-medida);
    text-wrap: pretty;
}
.pp-cuerpo p { margin: 0 0 20px; }
.pp-cuerpo p:last-child { margin-bottom: 0; }
.pp-cuerpo a {
    color: var(--cyan, #0B6B63);
    text-decoration: none;
    /* 1.5px y no color solo: el enlace se lee como enlace sin depender de
       distinguir dos tintas oscuras. */
    border-bottom: 1.5px solid var(--deco-underline, #A8CFCB);
}
.pp-cuerpo a:hover { border-bottom-color: var(--cyan, #0B6B63); }

/* --- kicker al margen ------------------------------------------------------
   La sección es una rejilla de dos columnas: el rótulo mono a la izquierda,
   el contenido a la derecha. En móvil se apila y el rótulo queda encima. */
.pp-seccion {
    display: grid;
    grid-template-columns: var(--pp-margen) minmax(0, 1fr);
    gap: 0 40px;
    padding-block: var(--pp-aire);
}
.pp-seccion + .pp-seccion { border-top: 1px solid var(--hair, #E2DACA); }
.pp-kicker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;            /* nunca menos · ver frontend_i18n_style.md */
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-faint, #464E58);
    line-height: 1.5;
    padding-top: 10px;          /* alinea con la primera línea del titular */
}
.pp-kicker-num {
    display: block;
    font-size: 34px;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--deco-num, #C9BFA9);
    line-height: 1;
    margin-bottom: 8px;
}

/* --- callout ---------------------------------------------------------------
   La única sombra del sistema. Un párrafo que importa deja de parecerse a
   los que lo rodean sin necesidad de un color de aviso. */
.pp-callout {
    background: var(--paper-card, #FFFCF6);
    border: 1px solid var(--hair, #E2DACA);
    border-radius: 10px;
    box-shadow: 0 1px 2px var(--paper-shadow, rgba(17,27,36,0.04));
    padding: clamp(22px, 2.6vw, 34px);
    max-width: var(--pp-medida);
}
.pp-callout > :first-child { margin-top: 0; }
.pp-callout > :last-child  { margin-bottom: 0; }
.pp-callout .pp-kicker { padding-top: 0; margin-bottom: 10px; }

/* --- filete suelto -------------------------------------------------------- */
.pp-filete { border: 0; border-top: 1px solid var(--hair, #E2DACA); margin: 0; }

@media (max-width: 900px) {
    .pp-seccion {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .pp-kicker { padding-top: 0; margin-bottom: 14px; }
    .pp-kicker-num { display: inline-block; font-size: 26px; margin: 0 10px 0 0; vertical-align: -3px; }
    .pp-cuerpo { font-size: 17px; line-height: 1.62; }
}

/* --- chip mono -------------------------------------------------------------
   El dato de apoyo de un paso ("47 fuentes públicas conectadas"). Va antes
   del titular porque es el hecho que lo respalda, no un adorno posterior. */
.pp-chip {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--cyan, #0B6B63);
    background: var(--paper-card, #FFFCF6);
    border: 1px solid var(--hair, #E2DACA);
    border-radius: 3px;
    padding: 4px 9px;
    margin: 0 0 14px;
}