/* PRIVACY — estilos de privacy/index.html: verde Lincoln con texto lima (6,98:1), la misma letra y los mismos dos pesos que About
   (700 título, entrada y títulos de bloque; 400 lectura), sin rayas ni etiquetas apagadas.
   Orden: colores y base · barra de navegación · título · filas · pie · móvil · movimiento. */

:root {
  --bg: var(--green);
  --ink: var(--lime);
  --dim: .8; /* opacidad de lo secundario: 5,1:1 sobre el verde */
  --gutter: clamp(16px, 1.2vw, 24px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { overflow-x: clip; color: var(--ink); background: var(--bg); font-family: var(--font-ui); font-size: var(--fs-read); font-weight: var(--fw-regular); line-height: var(--lh-body); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 4px; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- Barra de navegación (como la del resto de la web) ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 9; height: var(--nav-h); display: flex; align-items: center; padding: 0 var(--bar-gutter); } /* sin fondo: el texto pasa por debajo al hacer scroll*/
.nav-logo { flex: none; display: block; width: 44px; height: 47px; transition: transform .3s var(--ease-out); }
.nav-logo:hover { transform: rotate(-8deg) scale(1.06); }
.nav-links { display: flex; align-self: stretch; margin: 0 -16px 0 auto; list-style: none; }
.nav-links a { display: flex; align-items: center; height: 100%; padding: 0 16px; color: var(--ink); font-size: var(--fs-s); letter-spacing: 0; text-decoration: none; }
body .nav-links a { color: var(--ink); }
.nav-links a:hover, .nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

main { padding: 0 var(--gutter); }

/* ---------- Título ---------- */
.pv-head { padding: calc(var(--nav-h) + clamp(40px, 7vw, 110px)) 0 clamp(40px, 6vw, 96px); }
.pv-head h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-title); letter-spacing: -.055em; line-height: .95; }
.pv-updated { margin-top: clamp(14px, 1.6vw, 24px); opacity: var(--dim); font-size: var(--fs-s); letter-spacing: 0; }

/* ---------- Filas: título a la izquierda y texto a la derecha, separadas solo por espacio ---------- */
.pv-row { display: grid; grid-template-columns: 25% minmax(0, 1fr); column-gap: 16px; padding: clamp(28px, 3.4vw, 52px) 0; }
.pv-row h2 { font-size: inherit; font-weight: var(--fw-bold); line-height: 1.3; }
.pv-row p { max-width: var(--measure); }
.pv-row ul { list-style: none; } /* la lista de las FAQs (faq/index.html reutiliza estas filas) */
.pv-row:first-of-type p { font-weight: var(--fw-bold); } /* la entrada: el primer párrafo de la página */
.pv-row p a { text-decoration-thickness: 1px; }
.pv-row p a:hover { text-decoration-thickness: 2px; }

.pv-back { padding: clamp(28px, 3.4vw, 52px) 0; font-weight: var(--fw-bold); }
.pv-back a { text-decoration: none; }
.pv-back a:hover { text-decoration: underline; }
.pv-back a[href^="mailto:"] { text-decoration: underline; text-underline-offset: 4px; } /* «Write to me →» en las FAQs: se ve que es un enlace */

/* ---------- Pie ---------- */

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  .nav { padding: 0 16px; }
  .nav-links a { padding: 0 10px; font-size: var(--fs-s); }
  .nav-links { margin-right: -10px; }
  .pv-row { grid-template-columns: 1fr; row-gap: 8px; }
}

/* ---------- Movimiento: el título y las filas aparecen suavemente al cargar (sin "reducir movimiento") ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pv-head h1, .pv-updated { animation: pv-in .6s var(--ease-out) both; }
  .pv-updated { animation-delay: .06s; }
  .pv-row { animation: pv-in .6s var(--ease-out) both; animation-delay: calc(.1s + var(--i, 0) * 50ms); }
}
@keyframes pv-in { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0; } }