/* ============================================================================
   LEGAL — documento de lectura (aviso de privacidad y términos de uso).
   Carga DESPUÉS de type.css y layout.css.

   Estas páginas reusan el chrome del sitio (marca, nav, pie) y NO cargan el
   canvas, el scroll pinneado ni el arco visual: el movimiento de la pieza pelea
   con texto legal largo, y el requirement de la capability `aviso-de-privacidad`
   lo prohíbe explícitamente.

   El nav va en modo CLARO (sin html.on-dark): estas páginas no tienen portada
   oscura, así que la tinta invertida no aplica.
   ============================================================================ */

.legal {
  /* El nav es fixed y mide de 73px a 128px según ancho (ver base.css); sin este
     colchón el primer encabezado nace debajo del encabezado fijo. */
  padding-block: clamp(7rem, 12vw, 11rem) var(--space-head);
}

/* --- Medida de línea: el único parámetro que decide si un aviso se lee o se abandona.
   65ch sobre Inter a 1rem fluido cae en 60-75 caracteres en todo el rango. --- */
.legal__doc {
  max-width: 65ch;
  margin-inline: auto;
}

/* Las tablas necesitan más ancho que la prosa (la de conservación lleva 3 columnas
   y la de datos por canal tiene celdas largas), así que rompen la medida hacia
   fuera hasta donde el shell lo permite, y nunca más. */
.legal__wide {
  max-width: min(100%, 82ch);
  margin-inline: auto;
}

/* --- Encabezado del documento ---
   Sin eyebrow: el título solo se sostiene. Estas páginas llevaron un rótulo "Documento legal"
   sobre el título, que no decía nada que el título no dijera y empujaba en contra de todo lo
   demás que se hizo aquí: le anunciaba letra chica a un texto que se trabajó para que se
   leyera. Se retiró el 2026-08-13. Como ya no hay rótulo que separe, el título toma el aire
   que llevaba el par. --- */
.legal__title {
  margin-bottom: 1.75rem;
}

/* Los parrafos del intro necesitan su propio ritmo: este contenedor estilaba el bloque pero no
   la separacion entre sus hijos, asi que tres <p> distintos se renderizaban a 0px de distancia
   y se leian como UN parrafo con saltos duros. Lo reporto el dueno desde su telefono el
   2026-08-21 ("salto de linea en el primer parrafo"), y la medicion lo confirmo: hueco de 0px
   entre los tres. Mismo 1rem que .legal__doc p, para no inventar un ritmo nuevo.
   Se usa `p + p` y no margin-block-end para que el ultimo no sume al padding del contenedor. */
.legal__intro p + p { margin-block-start: 1rem; }

.legal__intro {
  color: var(--ink-2);
  border-block-end: var(--rule) solid var(--ground-3);
  padding-block-end: 2rem;
  margin-block-end: 2.5rem;
}

/* --- Índice de secciones ---
   Compacto a propósito: es un atajo, no un capítulo. Numerado con la misma numeración que
   llevan los encabezados en el texto, para que el renglón del índice y la sección se
   reconozcan como el mismo objeto. --- */
.legal__indice {
  max-width: 65ch;
  margin-inline: auto;
  margin-block-end: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--ground-2);
  border-inline-start: 2px solid var(--accent-bright);
}

.legal__indice-titulo {
  color: var(--ink-3);
  margin-block-end: 0.75rem;
}

.legal__indice ol {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Dos columnas donde cabe: siete renglones en una sola columna alargan el atajo hasta
     costar tanto como el scroll que venía a evitar. */
  columns: 2;
  column-gap: 2rem;
}

.legal__indice li { margin-block-end: 0.35rem; break-inside: avoid; }

.legal__indice a {
  display: block;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ink-2);
  padding-block: 0.35rem;   /* área táctil: el índice es de los pocos controles de la página */
  /* El relleno lateral con margen negativo hace que el resaltado cubra el RENGLÓN y no solo
     las letras, sin mover el texto de su sitio. */
  padding-inline: 0.6rem;
  margin-inline: -0.6rem;
  border-radius: 3px;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

/* Resaltado de RENGLÓN, no subrayado.
   Viene de una observación del dueño en el teléfono: ahí el navegador pinta su propio destello
   (`-webkit-tap-highlight-color`, negro al 18%) sobre todo el bloque del enlace, y ese gesto de
   "renglón seleccionado" se lee mucho mejor en una lista que la rayita de un enlace. En
   escritorio no existía nada equivalente. Se replica aquí con el token que el kit tiene
   declarado justo para esto (`--ground-3`, hover de superficies claras).
   El subrayado ANTERIOR se retira en vez de sumarse: dos indicadores del mismo estado sobre el
   mismo elemento es el defecto del doble subrayado que el dueño ya había cazado en el enlace
   de volver al inicio. El destello nativo del móvil se deja intacto: funciona y le gusta. */
.legal__indice a:hover,
.legal__indice a:focus-visible,
.legal__indice a:active {
  background-color: var(--ground-3);
  color: var(--accent-deep);
}

@media (max-width: 560px) {
  .legal__indice ol { columns: 1; }
  .legal__indice a { padding-block: 0.5rem; }
}

/* La dirección de la página, SOLO al imprimir: la hoja impresa oculta el encabezado y el pie,
   así que sin esto no dice de dónde salió. En pantalla estorba (la barra ya la muestra). */
.legal__url-impresa { display: none; }

/* --- Salida al inicio, en el pie ---
   El nav del sitio esconde su enlace rotulado bajo 900px, así que en teléfono la ÚNICA forma de
   regresar era el logotipo. Aquí va rotulada y siempre visible, al final del documento, que es
   donde uno acaba después de leer. --- */
.legal__volver {
  margin-block-end: 1rem;
  padding-block-end: 1rem;
  border-block-end: var(--rule) solid var(--ground-3);
}

/* El PIE ES OSCURO. La primera versión de esta regla usó `--accent`, que el propio kit
   documenta como "CTA sobre claro": sobre el pie daba 2.98 de contraste, o sea oscuro sobre
   oscuro, y el enlace estaba ahí sin verse. Lo reportó el dueño; yo lo había dado por bueno
   mirando una captura donde el subrayado me hizo creer que se leía. Ahora usa el mismo blanco
   que los demás enlaces del pie del sitio (16.93), y el hover va al menta, que es el acento
   que el kit reserva para fondo oscuro. */
.legal__volver a {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 44px;          /* área táctil: es la salida principal en pantalla chica */
  font-size: var(--fs-small);
  color: var(--ink-inverse);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* El remate lleva la firma de la casa en vez de un chevron de librería, que es lo que el
   checklist anti-look-AI persigue. Va AQUÍ y no en la home: el cierre de la home tiene
   footer__brand y el canvas de la firma en el mismo cuadrante, y por eso su arco se eliminó (lo
   guarda el assert `.footer svg` = 0, que corre solo sobre la home y encierra esa colisión, no
   una regla global). Este pie es mínimo (remate, copyright, CERO canvas): el anillo no compite.
   ESTÁTICO a propósito: el kit ya documenta que dos Ensōs latiendo competían, y por eso el logo
   del nav quedó quieto. Geometría canónica sin rotar (dasharray 223.6/40.3, gap a 7:30): la
   abertura ya mira abajo a la izquierda, así que la dirección la da el mark sin volverlo un
   ícono direccional, y la palabra hace el resto.
   currentColor y NO --accent: sobre el pie oscuro el accent da 2.98 de contraste, trampa que
   esta misma hoja documenta veinte líneas más arriba. Así el anillo sigue al texto en hover. */
.volver-enso { width: 1.15em; height: 1.15em; flex: none; }
.volver-enso__arc { stroke: currentColor; }
.volver-enso__dot { fill: currentColor; }
.legal__volver a:hover .volver-enso,
.legal__volver a:focus-visible .volver-enso { transform: translateX(-2px); }
.volver-enso { transition: transform var(--d-chrome) var(--ease-swift); }

.legal__volver a:hover,
.legal__volver a:focus-visible { color: var(--mint); }

/* --- Jerarquía de secciones --- */
/* TAMAÑOS: todo pasa por los pisos ergonómicos del kit (tokens.css "Lectura protegida"),
   NUNCA por rem crudo. El root de este sitio es fluido por vw con piso de 12.5px, y ese piso
   está activo en TODO viewport menor a ~1500px, o sea en cada teléfono, tablet y laptop
   común. Una primera versión de esta hoja usó rem directo y el documento legal rendía a
   12.5px de prosa, 11.25 de celda y 9 de encabezado de columna: ilegible justo en el
   documento que la gente tiene que leer entero. Los tokens existen para eso. */
.legal__doc h2 {
  font-family: var(--font-display);
  font-size: max(21px, 1.6rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-block: 3rem 1rem;
  scroll-margin-block-start: clamp(96px, 7vw, 150px);
}

.legal__doc h2:first-of-type { margin-block-start: 0; }

/* El índice de un servicio se dimensiona contra su h2 y NO contra el chrome. Cada contexto de la
   casa pone su propio token de índice (.section__head 15, .cap-row 18, .pinned-aside 22.5) y este
   era el ÚNICO sin override, así que caía a --fs-label, el token compartido con el nav, los
   eyebrows y los botones. Medido en /servicios/ a 1440 el 2026-08-22: índice 12px, IGUAL que el
   enlace de sección del nav, que el CTA y que el switch de idioma (los tres en 12px), y por debajo
   del enlace de la marca (13.125px). O sea el numeral de contenido empatado con el chrome en vez
   de por encima de él, que es justo lo que escala-editorial prohíbe. Se reusa --fs-section-label (15px), que ya existe: subir --fs-label
   habría movido nav, eyebrows y botones de todo el sitio para arreglar seis numerales.
   El tracking sale: es compensación óptica de versalitas y sobre dos cifras separa los dígitos.
   En el Note 8 físico "01" se leía "0 1". El resto del registro técnico (mono y peso) se queda. */
.legal__doc .t-index {
  font-size: var(--fs-section-label);
  letter-spacing: 0;
}

.legal__doc h3 {
  font-family: var(--font-body);
  font-size: max(17px, 1.25rem);
  font-weight: 600;
  margin-block: 2rem 0.75rem;
}

.legal__doc p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-2);
  margin-block-end: 1rem;
  text-wrap: pretty;
}

.legal__doc strong { color: var(--ink); font-weight: 600; }

/* Los enlaces en prosa se senalan igual en los TRES contenedores de documento, no solo en
   .legal__doc. Se agregaron intro y meta el 2026-08-21, al revisar /servicios/ en el Note 8
   fisico: el enlace a la pared de casos se pintaba con el MISMO color y peso que la prosa
   vecina (contraste entre uno y otra: 1, o sea indistinguibles) y sin subrayado, asi que no
   parecia enlace. No es cosmetico: segun el diseno de la pagina, ese es el unico camino a la
   prueba para quien aterriza desde la respuesta de un asistente sin haber visto la home.
   Inerte para las cuatro paginas legales: se verifico que ninguna tiene enlaces dentro de
   .legal__intro ni .legal__meta. El CTA queda fuera a proposito: ya se senala por color y
   subrayarlo lo volveria un enlace de texto en vez de la accion que es. */
.legal__doc a,
.legal__intro a,
.legal__meta a:not(.nav__book) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.legal__doc a:hover,
.legal__doc a:focus-visible,
.legal__intro a:hover,
.legal__intro a:focus-visible,
.legal__meta a:not(.nav__book):hover,
.legal__meta a:not(.nav__book):focus-visible { color: var(--accent-deep); }

/* --- Listas: la marca es un guion corto tipográfico, no un bullet redondo
   (el bullet grande es del sistema de la pieza y aquí compite con el texto) --- */
.legal__doc ul { margin-block-end: 1.25rem; }

.legal__doc li {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-2);
  position: relative;
  padding-inline-start: 1.5rem;
  margin-block-end: 0.6rem;
}

.legal__doc li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.7em;
  inset-inline-start: 0;
  width: 0.6rem;
  height: var(--rule);
  background: var(--accent-bright);
}

/* --- Tablas: contenedor con scroll propio para que el cuerpo NUNCA scrollee
   en horizontal (la de conservación no cabe en 360px de otro modo) --- */
.legal__tabla-wrap {
  overflow-x: auto;
  margin-block-end: 1.75rem;
  /* Sin esto, el foco del teclado dentro de la tabla no revela el desborde */
  scrollbar-width: thin;
}

.legal__doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  min-width: 34ch;
}

/* La caja con scroll recibe foco de teclado: sin esto, quien navega sin ratón no tiene NINGUNA
   forma de ver las columnas que quedan fuera (WCAG 2.1.1). Ninguna celda lleva enlaces, así que
   el contenedor jamás entraría en la secuencia de tabulación por su cuenta. */
.legal__tabla-wrap:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

.legal__doc th,
.legal__doc td {
  text-align: start;
  vertical-align: top;
  padding: 0.7rem 0.9rem;
  border-block-end: var(--rule) solid var(--ground-3);
}

/* Encabezado de COLUMNA: rótulo, en mono y versalitas. Va sin partir porque son
   palabras sueltas ("Canal", "Dato", "Plazo"). */
.legal__doc th[scope="col"] {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border-block-end-color: var(--ink-3);
  white-space: nowrap;
}

/* Encabezado de FILA: es contenido, no rótulo ("Agendado de una llamada"), así que
   conserva su caja alta y baja Y DEBE poder partirse. Con el nowrap del encabezado de
   columna heredado, esa celda empujaba la tabla a un ancho que en 360px obligaba a
   scrollear la tabla entera para leer la primera palabra de cada fila. */
.legal__doc th[scope="row"] {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  padding-inline-end: 1.25rem;
}

.legal__doc td { color: var(--ink-2); }

.legal__doc tbody tr:last-child th,
.legal__doc tbody tr:last-child td { border-block-end: none; }

/* --- Bloque de código del aviso corto (el mensaje literal que emite el bot) --- */
.legal__doc pre {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink);
  background: var(--ground-2);
  border-inline-start: 2px solid var(--accent-bright);
  padding: 1.1rem 1.25rem;
  margin-block-end: 1.5rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.legal__doc code { font-family: var(--font-mono); font-size: 0.9em; }

/* --- Pie del documento: fecha de última actualización --- */
.legal__meta {
  margin-block-start: 3.5rem;
  padding-block-start: 1.5rem;
  border-block-start: var(--rule) solid var(--ground-3);
  color: var(--ink-3);
}

/* --- Nav de las páginas legales: sin scroll-spy (no hay secciones que espiar),
   solo marca, enlace de vuelta, idioma y la salida de conversión.

   El enlace de vuelta NO lleva estilo propio a propósito. Vive dentro de `.nav__sections`
   para reusar el layout del nav, y ese contenedor ya le da el subrayado deslizante que usan
   todos los enlaces del encabezado del sitio. Una versión anterior le agregaba encima un
   borde inferior propio: los dos indicadores se pintaban a la vez y el enlace se subrayaba
   DOBLE en hover. Lo reportó el dueño mirándolo. Un enlace de navegación no necesita un
   lenguaje distinto solo porque la página sea legal. --- */

/* Fondo OPACO del encabezado. El del sitio es un degradado a 0.95 de opacidad, que sobre las
   secciones diseñadas del home se lee como un velo y aquí no: en un documento de texto corrido
   ese 5% deja pasar tinta casi negra sobre fondo casi blanco, y el resultado es texto fantasma
   cruzando la barra en CADA scroll. Se vio en el Galaxy Note 8 físico, no en el emulador, y no
   es cosa de soporte de `backdrop-filter` (el sitio no usa ninguno): es el valor de alfa.
   Aquí va opaco hasta el 82% y solo la cola se desvanece, con el MISMO tono para que el
   degradado no vire a gris. */
.nav--legal::before {
  background: linear-gradient(180deg,
              var(--ground) 0%,
              var(--ground) 82%,
              rgba(250, 251, 252, 0) 100%);
}

/* El nav del sitio esconde el switch de idioma bajo 560px, porque ahí compite con la lista
   de secciones, el menú y la salida de conversión. En estas páginas no compite con nada: la
   lista de secciones ya está oculta y no hay menú. Y esconderlo aquí cuesta más que en el
   home: quien lee en inglés y aterriza en el aviso en español se queda SIN forma de llegar a
   su versión, en el único documento del sitio donde el idioma no es preferencia sino
   comprensión. El área táctil se declara aquí porque el switch nunca vivió en móvil. */
@media (max-width: 560px) {
  .nav--legal .nav__meta .nav__meta-hide { display: inline-flex; align-items: center; gap: 0.5rem; }
  .nav--legal .lang-switch a,
  .nav--legal .lang-switch [aria-current] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 0.35rem;
  }
}

/* --- Impresión: un aviso de privacidad se imprime y se adjunta a expedientes --- */
@media print {
  .nav, .footer, .grain, .cursor, .skip-link { display: none !important; }
  /* El índice no viaja al papel: sus anclas no llevan a ninguna parte impresas, y una hoja
     archivada se recorre con la vista, no con saltos. */
  .legal__indice { display: none; }
  /* La dirección sí, porque con el encabezado y el pie ocultos la hoja quedaría sin decir
     de dónde salió. Va bajo el título, en gris y chico. */
  .legal__url-impresa {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #444;
    margin-block-end: 1.5rem;
  }
  .legal { padding-block: 0; }
  .legal__doc, .legal__wide { max-width: none; }
  .legal__doc p, .legal__doc td, .legal__doc li { color: #000; }
  .legal__doc a { color: #000; text-decoration: underline; }
  .legal__doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .legal__doc h2 { break-after: avoid; }
  .legal__tabla-wrap { overflow: visible; }
  .legal__doc table { break-inside: auto; }
  .legal__doc tr { break-inside: avoid; }
}