/* ============================================================
   DOCUMENTO LEGAL — /privacidad/ y /terminos/
   ------------------------------------------------------------
   Se carga DESPUÉS de index.css y pages.css, y SÓLO en esas dos rutas.
   Todo cuelga de `body.doc-page` o de un prefijo `.doc-`.

   ============================================================
   POR QUÉ ESTA HOJA NO SE PARECE A `escenas.css`
   ============================================================
   Las páginas de servicio están hechas para recorrerse: arco, escenas
   fijadas, revelados atados al scroll. Aquí eso sería un estorbo. A una
   política de privacidad se viene a leer, y a menudo a buscar un
   apartado concreto —«qué datos recogen», «cómo los borro»—, así que lo
   que la página tiene que dar es medida de lectura, jerarquía clara y un
   índice que salte.

   Lo que SÍ comparte con el resto del sitio, porque es la misma marca:
   la cabecera, el pie, el fondo, la tipografía, el sistema de
   micro-rótulos y los filos que decaen. Lo que NO comparte: el arco, los
   planos con sombra, el grano y cualquier cosa que se mueva.

   No hay animación de entrada. Un documento legal que aparece por partes
   mientras se baja es exactamente lo contrario de un documento legal
   accesible.
   ============================================================ */

.doc-page{
  --doc-rotulo:rgba(120,215,255,.72);
  --doc-tinta:#C2D2E6;
  --doc-filo:linear-gradient(90deg,var(--line-hi),rgba(122,166,220,.09) 52%,transparent);
}

/* Sin capa cósmica: el fondo se queda quieto y muy sobrio. La atmósfera
   compartida se mantiene apenas insinuada para no cambiar de marca. */
.doc-page .page-horizon{display:none}
.doc-page .page-atmos{opacity:.55}

.doc{
  width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto;
  padding:calc(var(--header) + clamp(34px,6vh,68px)) 0 clamp(56px,9vh,110px);
}

/* ---------- Cabecera del documento ---------- */
.doc-cabecera{max-width:72ch;padding-bottom:clamp(26px,4vh,42px);position:relative}
.doc-cabecera::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--doc-filo)}
.doc-cabecera .crumbs{margin-bottom:18px}
.doc-cabecera .eyebrow{display:block;color:var(--doc-rotulo);margin-bottom:16px}
.doc-cabecera h1{
  font-size:clamp(1.9rem,1.4rem + 2.1vw,3rem);line-height:1.08;letter-spacing:-.035em;
  max-width:18ch;margin-bottom:14px;
}
.doc-fecha{
  font:600 .68rem/1 ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:20px;
}
.doc-intro{color:var(--doc-tinta);font-size:var(--fs-lead);line-height:1.74;max-width:64ch}

/* ---------- Índice + texto ----------
   El índice acompaña la lectura en escritorio y encabeza el documento en
   pantalla estrecha. `sticky` y nada más: no se pliega, no se despliega y
   no hay nada que pulsar para verlo. */
.doc-cuerpo{
  display:grid;grid-template-columns:minmax(0,238px) minmax(0,1fr);
  gap:clamp(30px,5vw,80px);align-items:start;margin-top:clamp(30px,4.5vh,54px);
}
.doc-indice{position:sticky;top:calc(var(--header) + 26px)}
.doc-indice h2{
  font:600 .68rem/1 ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.2em;text-transform:uppercase;color:var(--doc-rotulo);margin-bottom:14px;
}
.doc-indice ol{display:grid;gap:0}
.doc-indice a{
  display:grid;grid-template-columns:2.4em minmax(0,1fr);gap:4px;
  padding:8px 0;font-size:.84rem;line-height:1.45;color:var(--muted);
  border-top:1px solid rgba(122,166,220,.07);
  transition:color var(--t-fast) ease;
}
.doc-indice li:first-child a{border-top:0}
.doc-indice a span{font:600 .64rem/1.6 ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.12em;color:var(--faint)}
.doc-indice a:hover{color:var(--text)}
.doc-indice a:hover span{color:var(--doc-rotulo)}

/* ---------- El texto ----------
   Medida de 72 caracteres. Es lo que hace que un documento largo se pueda
   leer de verdad; nada más de esta hoja importa tanto. */
.doc-texto{max-width:72ch}
.doc-seccion{padding:clamp(24px,3.4vh,36px) 0;position:relative}
.doc-seccion + .doc-seccion::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--doc-filo)}
.doc-seccion:first-child{padding-top:0}
/* La cabecera es fija: sin este margen, un salto desde el índice deja el
   titular del apartado medio tapado por la barra. */
.doc-seccion{scroll-margin-top:calc(var(--header) + 24px)}

/* El numeral CUELGA fuera de la columna de texto. Dentro de ella, el
   titular arrancaba desplazado respecto a sus propios párrafos y el
   apartado se leía descuadrado. Fuera, todo el texto comparte un único
   borde izquierdo y el número queda como referencia al margen. */
.doc-seccion h2{
  position:relative;
  font-size:clamp(1.1rem,1rem + .45vw,1.34rem);line-height:1.26;letter-spacing:-.02em;
  margin-bottom:14px;
}
.doc-n{position:absolute;left:-2.7em;top:.4em;
  font:600 .68rem/1 ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.14em;color:var(--doc-rotulo)}
.doc-seccion h3{
  font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text);margin:22px 0 10px;
}
.doc-seccion p{color:var(--doc-tinta);font-size:.98rem;line-height:1.78;margin-bottom:14px}
.doc-seccion p:last-child{margin-bottom:0}
.doc-seccion ul{display:grid;gap:9px;margin:0 0 16px}
.doc-seccion li{
  position:relative;padding-left:22px;color:var(--doc-tinta);font-size:.98rem;line-height:1.7;
}
.doc-seccion li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:1px;
  background:var(--line-lit)}
.doc-seccion ul:last-child{margin-bottom:0}

/* Los enlaces del texto legal se ven. Un correo de contacto que no
   parece un enlace es un derecho más difícil de ejercer. */
.doc-texto a{color:var(--cyan-soft);border-bottom:1px solid rgba(166,230,255,.34);
  transition:border-color var(--t-fast) ease,color var(--t-fast) ease}
.doc-texto a:hover{color:#fff;border-bottom-color:var(--cyan-soft)}

.doc-arriba{margin-top:clamp(26px,4vh,42px);padding-top:20px;position:relative}
.doc-arriba::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--doc-filo)}
.doc-arriba a{font-size:.86rem;color:var(--muted);border-bottom:0}
.doc-arriba a::before{content:"\2191";margin-right:9px;color:var(--doc-rotulo)}
.doc-arriba a:hover{color:var(--text)}

/* ---------- Estrecho ----------
   El índice deja de acompañar y pasa a encabezar, en dos columnas para
   que no ocupe media pantalla antes del primer apartado. */
@media (max-width:899px){
  .doc-cuerpo{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vh,38px)}
  .doc-indice{position:static;padding-bottom:clamp(22px,3vh,30px);
    border-bottom:1px solid var(--line)}
  .doc-indice ol{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
    display:grid;column-gap:clamp(18px,3vw,34px)}
  .doc-texto{max-width:none}
}

/* Con el índice arriba ya no hay margen izquierdo del que colgar: el
   numeral vuelve a la línea del titular. */
@media (max-width:899px){
  .doc-n{position:static;display:block;margin-bottom:7px}
}

/* ---------- Movimiento reducido ----------
   No hay nada que desactivar: esta hoja no anima nada. Se declara igual
   para que quede escrito que es deliberado y no un olvido. */
@media (prefers-reduced-motion:reduce){
  .doc-indice a,.doc-texto a{transition:none}
}