/* ============================================================================
   site.css — bloques propios del portfolio. Se carga después de
   tokens.css + chrome.css, que vienen del kit (podeley/identity) y no se
   editan acá: se corre `npm run sync`.

   Acá viven sólo las piezas que no tiene ninguna demo: la grilla de casos con
   captura, el selector de área del home, el three-up de «Tres reglas» y el
   bloque de contacto.
   ============================================================================ */

/* ---------- grilla de casos ----------------------------------------------- */

.cards {
  display: grid; grid-template-columns: repeat(2, 1fr);
  column-gap: 2.5rem; row-gap: 3.5rem; margin-top: 2rem;
}
.card { position: relative; display: flex; flex-direction: column; gap: .6rem; margin: 0; }
.card .shot { margin: 0; }
.card .shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16/10; object-fit: cover;
  border: 1px solid var(--pd-border-soft); border-radius: var(--pd-r-2);
  background: var(--pd-surface-2); transition: border-color var(--pd-dur-2);
}
.card:hover .shot img { border-color: #b9bec6; }
.card h3 {
  font-family: var(--pd-font-display); font-weight: 500;
  font-size: var(--pd-fs-h3); line-height: 1.25; margin: .35rem 0 0;
}
.card h3 a { text-decoration: none; color: var(--pd-text); }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card:hover h3 a { color: var(--pd-link); }
.card .pitch { margin: 0; color: var(--pd-text-muted); font-size: var(--pd-fs-sm); line-height: 1.55; }
.card .meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .45rem .8rem; margin: .15rem 0 0;
  font-family: var(--pd-font-mono); font-size: .62rem;
  letter-spacing: .05em; text-transform: uppercase;
}
.card .meta a {
  position: relative; z-index: 1;
  color: var(--pd-link); text-decoration: none; font-weight: 600;
}
.card .meta a:hover { text-decoration: underline; }
.proj { font-family: var(--pd-font-mono); color: var(--pd-text-faint); text-transform: none; letter-spacing: 0; }

.aside-link { margin: 2rem 0 0; font-size: var(--pd-fs-sm); color: var(--pd-text-muted); }
.aside-link a { font-weight: 600; text-decoration: none; color: var(--pd-link); }
.aside-link a:hover { text-decoration: underline; }

.cta-strip { margin: 3.4rem 0 0; font-size: var(--pd-fs-lead); }
.cta-strip a { text-decoration: none; font-weight: 600; color: var(--pd-link); }
.cta-strip a:hover { text-decoration: underline; }

/* ---------- «Tres reglas» ------------------------------------------------- */
/* El three-up con regla de color del brochure. Mismo patrón que .findings en
   las demos, pero acá las reglas no llevan título. */

.principles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--pd-sp-5); margin-top: var(--pd-sp-6);
}
.principle {
  border-top: 2px solid var(--pd-orange-ink);
  padding-top: var(--pd-sp-3); margin: 0;
}
.principle:nth-child(2) { border-top-color: var(--pd-blue-ink); }
.principle:nth-child(3) { border-top-color: var(--pd-green-ink); }
.principle p { margin: 0; color: var(--pd-text); font-size: var(--pd-fs-sm); line-height: 1.55; }

/* El mismo three-up sirve para «Qué obtenés», donde cada bloque sí lleva
   título: arriba el modo de trabajo, abajo el entregable. */
.principle h3 {
  font-family: var(--pd-font-display); font-weight: 500;
  font-size: var(--pd-fs-sm); line-height: 1.25;
  margin: 0 0 .45rem; color: var(--pd-text);
}
.principle h3 + p { color: var(--pd-text-muted); }

/* El mismo three-up sirve de tira de prueba en el home, con la cifra arriba y
   el bloque entero clickeable al segmento que la produce. Quien llega de un
   grupo de WhatsApp no eligió su área: la prueba tiene que entrar antes que
   el menú. */
.principles--proof .principle { position: relative; }
.principles--proof .shot { margin: 0 0 .8rem; }
.principles--proof .shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16/10; object-fit: cover;
  border: 1px solid var(--pd-border-soft); border-radius: var(--pd-r-2);
  background: var(--pd-surface-2);
}
.principles--proof .fig {
  display: block; font-family: var(--pd-font-display); font-weight: 500;
  font-size: var(--pd-fs-h3); line-height: 1.15;
  margin: 0 0 .45rem; color: var(--pd-text);
}
.principles--proof .fig a { text-decoration: none; color: inherit; }
.principles--proof .fig a::after { content: ""; position: absolute; inset: 0; }
.principles--proof .principle:hover .fig a { color: var(--pd-link); }

/* El proceso de consultoría: pasos apilados, número grande, la misma regla de
   color del three-up extendida al cuarto paso con la tinta dorada. */
.steps { display: grid; gap: var(--pd-sp-5); margin-top: var(--pd-sp-6); }
.step {
  display: grid; grid-template-columns: 3.2rem 1fr; gap: var(--pd-sp-4);
  border-top: 2px solid var(--pd-orange-ink); padding-top: var(--pd-sp-3);
}
.step:nth-child(2) { border-top-color: var(--pd-blue-ink); }
.step:nth-child(3) { border-top-color: var(--pd-green-ink); }
.step:nth-child(4) { border-top-color: var(--pd-gold-ink); }
.step-n {
  font-family: var(--pd-font-display); font-weight: 500;
  font-size: var(--pd-fs-h2); line-height: 1; margin: 0;
  color: var(--pd-text-faint);
}
.step h3 {
  font-family: var(--pd-font-display); font-weight: 500;
  font-size: var(--pd-fs-h3); line-height: 1.25;
  margin: 0 0 .45rem; color: var(--pd-text);
}
.step p:not(.step-n) { margin: 0; color: var(--pd-text-muted); }

/* La figura del hero, sólo en el home. */
.hero-figure { margin: var(--pd-sp-6) 0 0; }
.hero-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--pd-border); border-radius: var(--pd-r-2);
}
.hero-figure figcaption {
  margin: .8rem 0 0; max-width: 68ch;
  color: var(--pd-text-muted); font-size: var(--pd-fs-sm); line-height: 1.55;
}

/* El párrafo de equipo, debajo de las reglas, y la nota de límite del home. */
.team-note,
.note-limit {
  max-width: 68ch; color: var(--pd-text-muted);
  font-size: var(--pd-fs-sm); line-height: var(--pd-lh-body);
  margin: var(--pd-sp-6) 0 0;
}

/* ---------- trayectoria (/perfil/) ---------------------------------------- */

/* Un recruiter escanea empresa, rol y fechas antes de leer una línea, así que
   los tres van arriba y la prosa abajo. La fecha va en la mono de los datos
   para que la columna se lea de un saque. */
.roles { list-style: none; margin: var(--pd-sp-6) 0 0; padding: 0; }
.role + .role { margin-top: var(--pd-sp-5); padding-top: var(--pd-sp-5); border-top: 1px solid var(--pd-border-soft); }
.role-when {
  font-family: var(--pd-font-mono); font-size: var(--pd-fs-cap);
  letter-spacing: .06em; color: var(--pd-text-faint); margin: 0;
}
.role h3 {
  font-family: var(--pd-font-display); font-weight: 500;
  font-size: var(--pd-fs-h3); line-height: 1.25; margin: .3rem 0 0;
}
.role-where { margin: .2rem 0 0; color: var(--pd-text-muted); font-size: var(--pd-fs-sm); }
.role p:last-child { max-width: 68ch; margin: .6rem 0 0; color: var(--pd-text-muted); font-size: var(--pd-fs-sm); line-height: 1.55; }

/* ---------- bio y contacto ------------------------------------------------ */

.bio-text {
  max-width: 60ch; color: var(--pd-text-muted);
  font-size: var(--pd-fs-sm); line-height: var(--pd-lh-body); margin: .6rem 0 0;
}
.contact-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; align-items: center; }
.contact-note {
  font-family: var(--pd-font-mono); font-size: var(--pd-fs-cap);
  color: var(--pd-text-faint); margin: 1rem 0 0;
}

/* ---------- selector de área (home) --------------------------------------- */

.seg-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; }
.seg-card {
  position: relative; display: flex; flex-direction: column; gap: .45rem;
  border: 1px solid var(--pd-border); border-radius: var(--pd-r-2);
  padding: 1.5rem; margin: 0; transition: border-color var(--pd-dur-2);
}
.seg-card:hover { border-color: var(--pd-primary); }
.seg-card .path {
  font-family: var(--pd-font-mono); font-size: var(--pd-fs-cap);
  letter-spacing: .08em; color: var(--pd-text-faint); margin: 0;
}
.seg-card h3 {
  font-family: var(--pd-font-display); font-weight: 500;
  font-size: var(--pd-fs-h3); line-height: 1.25; margin: 0;
}
.seg-card h3 a { text-decoration: none; color: var(--pd-text); }
.seg-card h3 a::after { content: ""; position: absolute; inset: 0; }
.seg-card:hover h3 a { color: var(--pd-link); }
.seg-card p { margin: 0; color: var(--pd-text-muted); font-size: var(--pd-fs-sm); line-height: 1.55; }
.seg-card--quiet { border-style: dashed; border-color: var(--pd-border-soft); }

.other-line { margin: 2.5rem 0 0; font-size: var(--pd-fs-lead); }
.other-line a { text-decoration: none; font-weight: 600; color: var(--pd-link); }
.other-line a:hover { text-decoration: underline; }

/* ---------- registro de incidentes (/ciber/) ------------------------------ */

/* Trece filas por seis columnas no entran en un teléfono sin romper algo. Se
   elige que scrollee la tabla y no la página: el ancho de la columna de fecha
   queda fijo en la mono, así el ojo puede seguir el orden cronológico mientras
   arrastra el resto. */
/* El aviso va arriba y no en el pie: el registro nombra empresas y se publica sin
   consultarlas antes, así que la salvedad tiene que leerse antes que la tabla. */
.aviso {
  max-width: 68ch; margin: var(--pd-sp-6) 0 0;
  padding: var(--pd-sp-5); border: 1px solid var(--pd-caveat); border-radius: var(--pd-r-2);
  background: var(--pd-data-bg);
}
.aviso-t {
  margin: 0 0 var(--pd-sp-3); color: var(--pd-caveat);
  font-family: var(--pd-font-mono); font-size: var(--pd-fs-cap);
  letter-spacing: var(--pd-track-mono); text-transform: uppercase;
}
.aviso p:not(.aviso-t) {
  margin: 0; color: var(--pd-text-muted);
  font-size: var(--pd-fs-sm); line-height: var(--pd-lh-body);
}
.aviso p + p:not(.aviso-t) { margin-top: var(--pd-sp-4); }

/* El hero del registro no cierra en un botón: lo que corresponde ahí es cuándo
   se actualizó y por dónde entrar. */
.hero-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pd-sp-5);
  margin: var(--pd-sp-6) 0 0;
}
.hero-when {
  font-family: var(--pd-font-mono); font-size: var(--pd-fs-cap);
  letter-spacing: var(--pd-track-mono); color: var(--pd-text-faint);
}

.reg-scroll { margin: var(--pd-sp-6) 0 0; overflow-x: auto; }
/* En un teléfono la tabla se corta contra el borde y nada avisa que sigue. */
.reg-hint { display: none; }
@media (max-width: 760px) {
  .reg-hint {
    display: block; margin: var(--pd-sp-3) 0 0;
    font-family: var(--pd-font-mono); font-size: var(--pd-fs-cap);
    letter-spacing: var(--pd-track-mono); color: var(--pd-text-faint);
  }
}
.reg { border-collapse: collapse; width: 100%; min-width: 46rem; font-size: var(--pd-fs-sm); }
.reg-cap {
  caption-side: bottom; margin-top: var(--pd-sp-3); text-align: left;
  color: var(--pd-text-faint); font-size: var(--pd-fs-cap); line-height: 1.5;
}
.reg th {
  text-align: left; font-family: var(--pd-font-mono); font-weight: 500;
  font-size: var(--pd-fs-cap); letter-spacing: var(--pd-track-mono);
  text-transform: uppercase; color: var(--pd-text-faint);
  padding: 0 var(--pd-sp-4) var(--pd-sp-3) 0; border-bottom: 1px solid var(--pd-border);
}
.reg td {
  padding: var(--pd-sp-3) var(--pd-sp-4) var(--pd-sp-3) 0; vertical-align: top;
  border-bottom: 1px solid var(--pd-border-soft); color: var(--pd-text-muted);
}
.reg tbody tr:hover td { background: var(--pd-data-bg); }
.reg td:nth-child(2) { color: var(--pd-text); }
.reg-d { font-family: var(--pd-font-mono); white-space: nowrap; color: var(--pd-text-faint); }
/* Cada fila tiene ancla con el id del dataset: son el destino de las entradas del
   feed Atom y de los links cruzados de fichas y mapas. La fila apuntada se marca. */
.reg tbody tr:target td {
  background: var(--pd-data-bg);
  box-shadow: inset 2px 0 0 var(--pd-primary);
}

/* La confianza es la columna que decide cómo leer la fila, así que se lee como
   etiqueta y no como texto corrido. Media usa el color de reserva del sistema,
   el mismo que marca los límites en el resto del sitio. */
.conf {
  display: inline-block; padding: .1rem .45rem; border-radius: var(--pd-r-pill);
  font-family: var(--pd-font-mono); font-size: var(--pd-fs-cap);
  letter-spacing: var(--pd-track-mono); border: 1px solid currentColor;
}
.conf--alta { color: var(--pd-primary); }
.conf--media { color: var(--pd-caveat); }

/* La hoja de ruta se lee como agenda, no como promesa: cada ítem nombra el
   límite que cierra. Mismo patrón apilado que .roles en /perfil/. */
.ruta { list-style: none; margin: var(--pd-sp-6) 0 0; padding: 0; }
.ruta li + li { margin-top: var(--pd-sp-5); padding-top: var(--pd-sp-5); border-top: 1px solid var(--pd-border-soft); }
.ruta h3 {
  font-family: var(--pd-font-display); font-weight: 500;
  font-size: var(--pd-fs-h3); line-height: 1.25; margin: 0;
}
.ruta p {
  max-width: 68ch; margin: .5rem 0 0; color: var(--pd-text-muted);
  font-size: var(--pd-fs-sm); line-height: var(--pd-lh-body);
}

/* Recursos: el nombre lleva el link y la línea de al lado dice para qué sirve.
   Once entradas anotadas, no un directorio. */
.rsrc-g {
  margin: var(--pd-sp-6) 0 0; font-family: var(--pd-font-mono);
  font-size: var(--pd-fs-cap); letter-spacing: var(--pd-track-mono);
  text-transform: uppercase; color: var(--pd-text-faint);
}
.rsrc { list-style: none; margin: var(--pd-sp-4) 0 0; padding: 0; max-width: 68ch; }
.rsrc li + li { margin-top: var(--pd-sp-3); }
.rsrc li { color: var(--pd-text-muted); font-size: var(--pd-fs-sm); line-height: var(--pd-lh-body); }
.rsrc a { font-weight: 600; text-decoration: none; color: var(--pd-link); }
.rsrc a:hover { text-decoration: underline; }

/* Fichas de actores: <details> nativo, sin JS. El summary tiene que leerse
   cerrado (nombre + tipo + estado fechado): hojear el mazo sin abrir nada ya
   enseña el ecosistema. */
.fichas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pd-sp-4); align-items: start; margin: var(--pd-sp-6) 0 0; }
@media (max-width: 760px) { .fichas { grid-template-columns: 1fr; } }
.ficha { border: 1px solid var(--pd-border-soft); border-radius: var(--pd-r-2); background: var(--pd-surface); }
details.ficha[open] { border-color: var(--pd-border); }
/* El resaltado al navegar a un ancla interna (fila→ficha) marca la card entera. */
.ficha:has(:target) { border-color: var(--pd-primary); }
.ficha summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pd-sp-2) var(--pd-sp-3);
  padding: var(--pd-sp-4); cursor: pointer; list-style: none;
}
.ficha summary::-webkit-details-marker { display: none; }
.ficha summary::after {
  content: "+"; margin-left: auto; font-family: var(--pd-font-mono);
  color: var(--pd-text-faint);
}
details.ficha[open] summary::after { content: "–"; }
.ficha-nombre { margin: 0; font-family: var(--pd-font-display); font-weight: 500; font-size: var(--pd-fs-h3); line-height: 1.25; }
.ficha-meta { display: flex; gap: var(--pd-sp-2); }
.tag {
  display: inline-block; padding: .1rem .45rem; border-radius: var(--pd-r-pill);
  border: 1px solid currentColor; font-family: var(--pd-font-mono);
  font-size: var(--pd-fs-cap); letter-spacing: var(--pd-track-mono); color: var(--pd-text-faint);
}
.tag--activo { color: var(--pd-primary); }
.tag--caveat { color: var(--pd-caveat); }
.tag--quieto { color: var(--pd-text-faint); }
.ficha-body { padding: 0 var(--pd-sp-4) var(--pd-sp-4); }
.ficha-body p { margin: var(--pd-sp-3) 0 0; color: var(--pd-text-muted); font-size: var(--pd-fs-sm); line-height: var(--pd-lh-body); }
.ficha-datos { margin: 0; display: grid; gap: .35rem; }
.ficha-datos div { display: flex; gap: var(--pd-sp-3); }
.ficha-datos dt {
  flex: 0 0 9.5rem; padding-top: .15rem; font-family: var(--pd-font-mono);
  font-size: var(--pd-fs-cap); letter-spacing: var(--pd-track-mono);
  text-transform: uppercase; color: var(--pd-text-faint);
}
.ficha-datos dd { margin: 0; font-size: var(--pd-fs-sm); color: var(--pd-text-muted); }
.ficha-fuentes { font-size: var(--pd-fs-cap); }
/* "Sin atribuir" no colapsa: es la tesis del mazo y se lee siempre. */
.ficha--abierta { margin: var(--pd-sp-5) 0 0; padding: var(--pd-sp-4); max-width: 68ch; border-style: dashed; }
.ficha--abierta p { margin: var(--pd-sp-3) 0 0; color: var(--pd-text-muted); font-size: var(--pd-fs-sm); line-height: var(--pd-lh-body); }
.ficha--abierta .ficha-nombre { margin: 0; }

/* Columna Actor y términos del glosario: subrayado punteado, para distinguir
   el link interno de referencia del link externo de fuente. */
.actor-link, .gl {
  color: inherit; text-decoration: underline dotted;
  text-decoration-color: var(--pd-text-faint); text-underline-offset: .2em;
}
.actor-link:hover, .gl:hover { color: var(--pd-link); text-decoration-style: solid; }

/* Glosario: lista de <details> compacta, un término por renglón. */
.gloss { margin: var(--pd-sp-6) 0 0; max-width: 68ch; }
.gloss-item { border-top: 1px solid var(--pd-border-soft); }
.gloss-item:last-child { border-bottom: 1px solid var(--pd-border-soft); }
.gloss-item summary { display: flex; padding: var(--pd-sp-3) 0; cursor: pointer; list-style: none; }
.gloss-item summary::-webkit-details-marker { display: none; }
.gloss-item summary::after { content: "+"; margin-left: auto; font-family: var(--pd-font-mono); color: var(--pd-text-faint); }
.gloss-item[open] summary::after { content: "–"; }
.gloss-item:target dfn { color: var(--pd-primary); }
.gloss-item dfn { font-style: normal; font-weight: 600; }
.gloss-item p { margin: 0 0 var(--pd-sp-4); color: var(--pd-text-muted); font-size: var(--pd-fs-sm); line-height: var(--pd-lh-body); }

/* Mapas: SVG inline generado por tools/ciber-maps.mjs. El conteo va siempre
   visible dentro del punto (en táctil no hay hover) y la tabla de al lado es
   la lectura canónica; el tooltip del mapamundi es decorativo. */
.mapa { margin: var(--pd-sp-6) 0 0; }
.mapa svg { display: block; width: 100%; height: auto; }
.mapa--ar svg { max-width: 26rem; }
.mapa figcaption { margin-top: var(--pd-sp-3); max-width: 68ch; color: var(--pd-text-faint); font-size: var(--pd-fs-cap); line-height: 1.5; }
.map-prov { fill: var(--pd-surface-2); stroke: var(--pd-border); stroke-width: 1; }
.map-land-path { fill: var(--pd-surface-2); stroke: var(--pd-border-soft); stroke-width: .5; }
.map-leader { stroke: var(--pd-text-faint); stroke-width: 1; }
.map-dot .dot { fill: var(--pd-primary); fill-opacity: .85; stroke: var(--pd-bg); stroke-width: 2; }
.map-dot:hover .dot, .map-dot:focus-visible .dot { fill-opacity: 1; }
.map-dot:focus-visible .dot { stroke: var(--pd-focus); stroke-width: 3; }
.map-dot .dot--estatal { fill: var(--pd-blue-ink); }
.map-dot .dot--nn { fill: none; stroke: var(--pd-text-faint); stroke-width: 2; stroke-dasharray: 3 2; }
.dot-n {
  fill: #fff; font-family: var(--pd-font-mono); font-size: 13px;
  text-anchor: middle; dominant-baseline: central; pointer-events: none;
}
.map-dot .tip { opacity: 0; visibility: hidden; transition: opacity var(--pd-dur-2) var(--pd-ease); }
.map-dot:hover .tip, .map-dot:focus-visible .tip { opacity: 1; visibility: visible; }
.tip text {
  fill: var(--pd-text); font-family: var(--pd-font-mono); font-size: 14px; text-anchor: middle;
  paint-order: stroke; stroke: var(--pd-bg); stroke-width: 4px; stroke-linejoin: round;
}
.map-key {
  margin: var(--pd-sp-3) 0 0; font-family: var(--pd-font-mono);
  font-size: var(--pd-fs-cap); letter-spacing: var(--pd-track-mono); color: var(--pd-text-faint);
}
.key { display: inline-block; width: .7rem; height: .7rem; margin-right: .3rem; }
.key--criminal { border-radius: 50%; background: var(--pd-primary); }
.key--estatal { background: var(--pd-blue-ink); }
.key--nn { border-radius: 50%; border: 2px dashed var(--pd-text-faint); }
.map-list { list-style: none; margin: var(--pd-sp-4) 0 0; padding: 0; max-width: 68ch; }
.map-list li { color: var(--pd-text-muted); font-size: var(--pd-fs-sm); line-height: var(--pd-lh-body); }
.map-list li + li { margin-top: .35rem; }
.map-list-prov {
  margin-right: .5rem; font-family: var(--pd-font-mono); font-size: var(--pd-fs-cap);
  letter-spacing: var(--pd-track-mono); text-transform: uppercase; color: var(--pd-text-faint);
}
.map-list a { color: var(--pd-link); text-decoration: none; }
.map-list a:hover { text-decoration: underline; }

/* Ficción: la lista reusa .rsrc; el título de la obra lleva el peso. */
.obra { font-weight: 600; color: var(--pd-text); }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 860px) {
  .principles { grid-template-columns: 1fr; gap: var(--pd-sp-4); }
}
@media (max-width: 760px) {
  .cards,
  .seg-cards { grid-template-columns: 1fr; }
  .cards { row-gap: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .card .shot img, .seg-card { transition: none; }
}

/* La foto de /perfil/, entre el sub y el CTA. Cuadrada con el radio de la casa. */
.perfil-photo {
  display: block; width: 168px; height: 168px; object-fit: cover;
  border: 1px solid var(--pd-border); border-radius: var(--pd-r-2);
  margin: var(--pd-sp-5) 0 0;
}

/* Con seis secciones el nav móvil scrolleaba y "Perfil" nacía fuera de pantalla.
   Ahora envuelve a una segunda fila: se ve todo, sin scroll que adivinar. Pisa el
   overflow-x del chrome.css vendoreado, que acá no se edita. */
@media (max-width: 760px) {
  .nav { flex-wrap: wrap; overflow-x: visible; row-gap: 0; }
}

/* La segunda mitad del hero del home: la prueba, un escalón abajo del pitch.
   En teléfono el hero de un solo párrafo era un ladrillo de 14 líneas. */
.hero-proof {
  max-width: 60ch; color: var(--pd-text-muted);
  font-size: 1rem; line-height: var(--pd-lh-body);
  margin: 0 0 1.5rem;
}

/* El gutter del kit clampa en ~17 px en teléfono y el texto nace pegado al
   borde. Se pisa el token acá (site.css carga después de tokens.css, que es
   vendoreado y no se edita): piso de 1.6rem a todo ancho, mismo techo de
   escritorio. El rol del kicker se oculta para que la firma no envuelva. */
:root { --pd-gutter: clamp(1.6rem, 5vw, 2rem); }
@media (max-width: 480px) {
  .kicker-role { display: none; }
}

/* Piso duro del margen, sin var() ni clamp(): en algunos webviews la cadena
   var(clamp()) del token no resuelve y el padding colapsa a cero — el texto
   nace en el borde físico de la pantalla. La base fija funciona en cualquier
   navegador; el token la pisa solo donde el navegador demuestra resolverlo. */
.wrap { padding-left: 1.6rem; padding-right: 1.6rem; }
@supports (width: clamp(1rem, 2vw, 3rem)) {
  .wrap { padding-left: var(--pd-gutter); padding-right: var(--pd-gutter); }
}