/* ── Las páginas de texto del sitio ──

   /estudio y /privacidad. NO es la hoja del inicio: el inicio lleva sus 780
   líneas de CSS en línea, con fotos a sangre, galería, formulario y catorce
   bloques animados. Estas dos son documentos: una columna de prosa, la barra
   y el pie. Copiar aquella entera para usar el 15 % sería dejar dos copias de
   lo que hay que mantener al día.

   Lo que SÍ se copia, y a propósito, son los tokens. Cada color de esta hoja
   está en el bloque `:root` de index.html con su contraste medido al lado
   (ver el comentario de --text-light ahí). Ninguno es nuevo: un color sin
   razón medida no entra al sitio. Si allá se corrige uno, acá también — es la
   misma marca, y `migracion/sitio-agentes.test.cjs` compara las dos listas
   para que no se separen en silencio. */

@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url('fuentes/dmsans-100-1000-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url('fuentes/dmsans-100-1000-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url('fuentes/cormorant-300-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url('fuentes/cormorant-italic-300-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme: light;
  --bg:          #F5F0E8;
  --bg-mid:      #EDEAE0;
  --bg-dark:     #1A1A18;
  --bg-footer:   #111110;
  --text:        #2C2C2A;
  --text-mid:    #5A5650;
  --text-light:  #6E6962;
  --accent:      #7A6449;
  --accent-lt:   #C4A882;
  --border:      #D8D0C4;
  --white:       #FFFFFF;
  --tinta-inv:   rgba(255,255,255,0.80);
  --tinta-inv-2: rgba(255,255,255,0.55);
  --tinta-inv-3: rgba(255,255,255,0.70);
  --fs-label: 0.75rem;
  --fs-hint:  0.78rem;
  --display: 'Cormorant Garamond', Georgia, serif;
  --sans:    'DM Sans', system-ui, sans-serif;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:var(--sans); background:var(--bg); color:var(--text);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* Mismo anillo que el inicio y que la app: 2 px en nogal, arena sobre oscuro. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:1px}
nav :focus-visible,footer :focus-visible{outline-color:var(--accent-lt)}

/* ── Barra ──
   Opaca desde el primer cuadro, no translúcida como en el inicio: ahí flota
   sobre una foto a sangre y acá lo que hay detrás es la crema del fondo. Sin
   foto, el desenfoque no separa nada y sólo cuesta pintura. */
.barra{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 2.5rem; background:var(--bg-dark);
}
/* `title` de sitio.DESIGN.md, que lo nombra con todas las letras: "el nombre
   de un paso del método, y el logotipo de la barra". */
.barra-logo{
  display:flex; align-items:center; gap:0.7rem;
  font-family:var(--display); font-size:1.15rem; font-weight:400;
  color:var(--tinta-inv); text-decoration:none; letter-spacing:0.01em;
}
.barra-logo em{font-style:italic}
.barra-logo img{width:30px;height:30px;object-fit:contain}
.barra-volver{
  font-size:var(--fs-label); text-transform:uppercase; letter-spacing:0.12em;
  color:var(--tinta-inv-3); text-decoration:none; padding:0.5rem 0;
}
.barra-volver:hover{color:var(--tinta-inv)}

/* ── La columna de prosa ──
   65ch y no más: una línea de 120 caracteres se lee perdiendo el renglón, y
   estas dos páginas son justamente las que alguien lee de corrido. */
.hoja{max-width:65ch;margin:0 auto;padding:4.5rem 1.5rem 5rem}

/* ── La miga, que antes era un antetítulo ──

   Arriba del h1 había una etiqueta en versalitas espaciadas —"EL ESTUDIO",
   "PRIVACIDAD"— copiada de las cinco secciones del inicio. En el inicio sirve:
   son secciones de una página larga y la etiqueta dice cuál empieza. Acá no:
   son páginas enteras a las que se llega por la barra, y repetir el nombre de
   la página encima de su propio título no agrega nada que no diga ya el <h1>,
   la pestaña y el enlace por el que entraste.

   La miga hace ese mismo trabajo y además dice de dónde venís, con un enlace
   de verdad a la raíz. Que es, de paso, lo que estas dos páginas necesitan:
   nacieron para que un rastreador verifique que el negocio existe, y un enlace
   interno vale más que una etiqueta decorativa. Va acompañada de un
   `BreadcrumbList` en el JSON-LD de cada página.

   Caja baja y no versalitas: el espaciado de letras es justo lo que convertía
   al antetítulo en la figura que es hoy el valor por defecto de cualquier
   portada generada. */
/* `hint`, el mismo escalón que los enlaces del pie: es navegación secundaria,
   no contenido. */
.miga{
  display:flex; align-items:center; flex-wrap:wrap; gap:0.45rem;
  margin-bottom:1.25rem; font-size:var(--fs-hint); color:var(--text-light);
}
.miga a{color:var(--text-mid); text-decoration:none}
.miga a:hover{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.miga span[aria-hidden]{color:var(--border)}
/* ── Toda la rampa sale de sitio.DESIGN.md, y de ninguna otra parte ──

   La primera versión de esta hoja inventó cuatro tamaños —3,4rem, 1,65rem,
   1,1rem y 1rem— que no estaban en ningún lado. Es exactamente lo que el
   propio sistema prohíbe en la Regla de los Dos Pasos Chicos, y la razón por
   la que esa regla existe: el 10-09-2026 había cuatro tamaños chicos que
   cabían en 0,96 px de diferencia, escritos de a uno.

   Acá el `h1` es `headline` y no `display`: display es "el titular del héroe",
   y estas dos no tienen héroe —son documentos, no portadas—. El `h2` es
   `title`, que es el mismo escalón que usa `.met-title` en el inicio, y el
   salto grande entre los dos es el mismo que hay allá entre `.sec-title` y
   `.met-title`. Con una diferencia que no es de tamaño: el `h2` lleva su
   regla arriba, que es lo que separa una sección de la siguiente en una
   página que se lee de corrido. */
.hoja h1{
  font-family:var(--display); font-weight:300; line-height:1.15;
  font-size:clamp(2rem,3.8vw,3rem); letter-spacing:-0.01em;
  margin-bottom:1.75rem;
}
.hoja h1 em{font-style:italic;color:var(--accent)}
.hoja h2{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:1.15rem; line-height:1.4; margin:3rem 0 1rem;
  padding-top:1.75rem; border-top:1px solid var(--border);
}
/* `body`: 0,92rem con interlínea 1,75. La medida la corta el `max-width` de
   .hoja en 65ch, no un segundo tamaño. */
.hoja p,.hoja li{color:var(--text-mid); font-size:0.92rem; line-height:1.75}
.hoja p{margin-bottom:1.1rem}
/* El párrafo de entrada se distingue por TINTA, no por tamaño: subirlo a
   1,1rem habría sido un quinto escalón para un solo párrafo por página. */
.hoja .entrada{color:var(--text)}
.hoja ul,.hoja ol{margin:0 0 1.3rem 1.2rem}
.hoja li{margin-bottom:0.5rem;padding-left:0.2rem}
.hoja li::marker{color:var(--accent)}
.hoja strong{color:var(--text);font-weight:600}
/* Los enlaces del cuerpo SÍ se subrayan. En la barra y el pie se distinguen
   por posición; aquí, en medio de un párrafo, el color solo no alcanza. */
.hoja a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.hoja a:hover{text-decoration-thickness:2px}
.hoja time{color:var(--text-light);font-size:var(--fs-hint)}

/* ── Pie ──
   El mismo del inicio, con los mismos tres enlaces más las dos páginas
   nuevas: sin esto quedarían huérfanas y ningún rastreador llegaría. */
footer{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
  padding:2.5rem; background:var(--bg-footer); color:var(--tinta-inv);
}
.footer-logo{display:flex;align-items:center;gap:0.7rem;font-family:var(--display);font-size:1.15rem}
.footer-logo img{width:26px;height:26px;object-fit:contain}
.footer-copy{font-size:var(--fs-hint);color:var(--tinta-inv-2)}
.footer-links{display:flex;flex-wrap:wrap;gap:1.5rem}
.footer-links a{
  font-size:var(--fs-label); text-transform:uppercase; letter-spacing:0.1em;
  color:var(--tinta-inv-2); text-decoration:none;
}
.footer-links a:hover{color:var(--tinta-inv-3)}

@media (max-width:720px){
  .barra{padding:0.9rem 1.25rem}
  .hoja{padding:3rem 1.25rem 4rem}
  footer{flex-direction:column;align-items:flex-start;gap:0.9rem;padding:2rem 1.25rem}
}

/* ── El blanco del dedo, por PUNTERO y no por ancho ──

   Esto empezó dentro del `max-width: 720px` de arriba y estaba mal por la
   misma razón que H125 ya documentó para la app: con `max-width`, un tablet
   táctil en horizontal recibe blancos chicos y una ventana angosta de
   escritorio con mouse recibe los grandes sin necesitarlos. Lo que decide es
   con qué se toca, no cuánto mide la pantalla.

   Y la miga entró a la lista después de medirla: su enlace daba **21 px** de
   alto, por debajo incluso del mínimo de 24 px de la WCAG 2.2. Va con relleno
   y no con `min-height` para no estirar la fila entera. */
@media (pointer: coarse){
  .footer-links a,.barra-volver{min-height:44px;display:flex;align-items:center}
  .miga a{padding:0.7rem 0; margin:-0.7rem 0}
}