/* Lo propio de la Política de privacidad (sin D2, sin la letra, sin el parche del cromo).
   Trasladado de la maqueta aprobada (privacidad.html) por
   herramientas/trasladar-privacidad.mjs. No se edita a mano: se cambia la maqueta
   y se vuelve a trasladar. */
/* ══ EL SALTO AL CONTENIDO ═════════════════════════════════════════════ */
.pr-saltar{position:absolute;left:-9999px;top:0;z-index:60;background:var(--acento-fuerte);
  color:var(--sobre-acento);padding:var(--e-2) var(--e-3);font-size:var(--txt-s);font-weight:700}
.pr-saltar:focus{left:var(--pad-pagina)}

/* ══ LAS MIGAS ═════════════════════════════════════════════════════════
   Copiadas de Contacto, hasta el detalle del separador en --gris-suave:
   es texto generado y le toca 4,5, no 3. */
.pr-migas{padding-top:calc(var(--e-2) + 6em)}
.pr-migas ol{display:flex;flex-wrap:wrap;gap:var(--e-1);list-style:none;margin:0;padding:0;
  font-size:var(--txt-s);color:var(--gris-fuerte);align-items:center}
.pr-migas li{display:inline-flex;align-items:center}
.pr-migas li+li::before{content:"/";margin-right:var(--e-1);color:var(--gris-suave)}
.pr-migas a{color:var(--gris-fuerte);text-decoration:none;
  display:inline-flex;align-items:center;min-height:24px}
.pr-migas a:hover{color:var(--azul-texto-hover);text-decoration:underline}
.pr-migas span{display:inline-flex;align-items:center;min-height:24px}

/* ══ LA REJILLA ════════════════════════════════════════════════════════
   Encargo del Director, 20-09, señalando la política de CJR Renewables:
   índice a la izquierda, documento a la derecha. Es la forma correcta para
   un texto legal y resuelve de paso lo que sobraba aquí — una columna de
   66ch dejaba media pantalla vacía a 1440.

   El corte va a 1024 y no antes: por debajo, las dos columnas dejarían el
   documento en menos de 60ch y el índice en una tira de letras partidas.
   Debajo de 1024 se apila, con el índice arriba.

   Y la CABECERA va fuera de la rejilla, no dentro. Con ella dentro, al
   apilarse en móvil el índice salía ANTES del titular: diez enlaces antes
   de decir de qué página son. Moverla fuera arregla las dos cosas a la vez
   —orden de lectura y orden visual coinciden en los dos tamaños— sin tener
   que recolocar nada con «order», que es lo que separa lo que se ve de lo
   que lee un lector de pantalla. */
/* padding-BLOCK, no el atajo: «padding:… 0 …» anulaba el margen lateral que pone .ep
   y en el teléfono el texto llegaba al borde de la pantalla (lo vio la revisión de la
   vista móvil, 21-09). */
.pr-rej{display:grid;gap:var(--e-4);padding-block:var(--e-5) var(--e-6)}
@media (min-width:1024px){
  /* El índice va a la DERECHA. Encargo del Director del 20-09, tercera
     pasada, señalando con una flecha el hueco que quedaba al otro lado.
     En el ejemplo va a la izquierda; aquí no, y el motivo es que el
     documento se lee de izquierda a derecha y el índice es lo accesorio:
     a la izquierda obligaba a saltárselo para llegar al texto.

     La columna del documento mide 66ch —el ancho de lectura— y no 1fr:
     con 1fr el texto se quedaba en sus 66ch, el índice se iba al borde
     derecho de la pantalla y entre los dos quedaba medio metro de nada.
     Midiendo la columna, el índice se apoya en el texto. */
  /* El hueco entre el documento y el índice es de 104 y no de 64 —encargo
     del Director, quinta pasada—. A 64 las dos columnas se leían como una
     sola cosa de dos partes; a 104 el índice queda claramente aparte, que
     es lo que es. Sigue siendo un escalón de la escala, no un número
     suelto. */
  .pr-rej{grid-template-columns:minmax(0,66ch) minmax(0,220px);
    column-gap:var(--e-6);row-gap:var(--e-4);align-items:start;
    justify-content:start}
  /* Cada pieza en su celda, a mano. Ver la nota del armado: es lo que
     permite que el HTML lleve el titular primero y la pantalla lo enseñe
     con el índice al lado. */
  .pr-cab{grid-column:1;grid-row:1}
  .pr-col{grid-column:1;grid-row:2}
  /* Pegajoso, que es lo que el ejemplo no hace y se echa en falta: en un
     documento de once apartados el índice deja de verse en el segundo y ya
     no vuelve. El desplazamiento de 7em es el alto de la barra, que flota. */
  .pr-indice{grid-column:2;grid-row:1 / span 2;position:sticky;top:7em}
}
/* ── LA COLUMNA VACÍA DE LA IZQUIERDA ──────────────────────────────────
   Cuarta pasada del 20-09. Al mandar el índice a la derecha, el documento
   se corrió al borde izquierdo de la pantalla: se movió lo que no se había
   pedido mover. El encargo era mover el índice, no el texto.

   Así que por encima de 1400 vuelve una primera columna del mismo ancho
   que el índice, vacía a propósito. El documento recupera exactamente el
   sitio que tenía y el bloque entero queda simétrico —mismo margen a un
   lado que al otro—, que es lo que hace que un texto largo no parezca
   pegado a un canto.

   El corte es 1480 y no 1024 porque las tres columnas necesitan
   220+104+66ch+104+220 ≈ 1320 px por dentro, y a 1024 no caben: ahí el
   documento se estrecharía por debajo de su ancho de lectura, que es lo
   único que esta pantalla no puede perder. Entre 1024 y 1479 van dos
   columnas, sin margen. Cuando el hueco subió de 64 a 104, este corte
   tuvo que subir con él: el corte lo decide lo que necesita la caja, no
   el número redondo. */
@media (min-width:1480px){
  .pr-rej{grid-template-columns:minmax(0,220px) minmax(0,66ch) minmax(0,220px)}
  .pr-cab{grid-column:2}
  .pr-col{grid-column:2}
  .pr-indice{grid-column:3}
}

/* ══ EL ÍNDICE ═════════════════════════════════════════════════════════
   Sin caja ni panel: una lista, como en el ejemplo. La caja lo convertía en
   un cartel, y un índice no se mira, se usa.

   Los apartados llevan número —«1 · Qué datos pedimos»— y el número está en
   el texto, no puesto por CSS. Así se puede citar por teléfono, copiar y
   pegar, y buscar con Ctrl+F: «apartado 6» existe de verdad. */
.pr-indice h2{margin:0 0 var(--e-2);font-family:var(--f-mono);font-size:var(--mono);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--azul-texto)}
.pr-indice ol{margin:0;padding:0;list-style:none;display:grid;gap:var(--e-1)}
/* En rejilla de dos columnas y no en bloque suelto: un título que parte en
   dos renglones dejaba el segundo debajo del número, y la lista perdía su
   columna. Así el número cuelga y todos los títulos arrancan alineados. */
.pr-indice a{display:grid;grid-template-columns:1.7em minmax(0,1fr);
  padding:2px 0;font-size:var(--txt-s);line-height:1.45;
  color:var(--gris-fuerte);text-decoration:none;min-height:24px}
.pr-indice a:hover{color:var(--azul-texto-hover);text-decoration:underline}
.pr-indice a b{font-family:var(--f-mono);font-weight:700;color:var(--azul-texto)}
@media (max-width:1023px){
  .pr-indice{padding-bottom:var(--e-3);border-bottom:var(--borde) solid var(--linea)}
  .pr-indice ol{gap:0}
}

/* ══ LA CABECERA ═══════════════════════════════════════════════════════ */
.pr-cab__tit{margin:var(--e-2) 0 0;font-size:var(--tit-l);line-height:1.04;
  letter-spacing:-.03em;font-weight:800;color:var(--tinta);max-width:16ch;text-wrap:balance}
.pr-cab__baj{margin:var(--e-3) 0 0;font-size:var(--txt-l);line-height:1.5;
  color:var(--tinta);max-width:56ch}

/* ══ EL ÍNDICE ═════════════════════════════════════════════════════════
   Sin caja ni panel: una lista, como en el ejemplo. La caja lo convertía en
   un cartel, y un índice no se mira, se usa.

   Los apartados llevan número —«1 · Qué datos pedimos»— y el número está en
   el texto, no puesto por CSS. Así se puede citar por teléfono, copiar y
   pegar, y buscar con Ctrl+F: «apartado 6» existe de verdad. */
.pr-indice h2{margin:0 0 var(--e-2);font-family:var(--f-mono);font-size:var(--mono);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--azul-texto)}
.pr-indice ol{margin:0;padding:0;list-style:none;display:grid;gap:var(--e-1)}
/* En rejilla de dos columnas y no en bloque suelto: un título que parte en
   dos renglones dejaba el segundo debajo del número, y la lista perdía su
   columna. Así el número cuelga y todos los títulos arrancan alineados. */
.pr-indice a{display:grid;grid-template-columns:1.7em minmax(0,1fr);
  padding:2px 0;font-size:var(--txt-s);line-height:1.45;
  color:var(--gris-fuerte);text-decoration:none;min-height:24px}
.pr-indice a:hover{color:var(--azul-texto-hover);text-decoration:underline}
.pr-indice a b{font-family:var(--f-mono);font-weight:700;color:var(--azul-texto)}
@media (max-width:1023px){
  .pr-indice{padding-bottom:var(--e-3);border-bottom:var(--borde) solid var(--linea)}
  .pr-indice ol{gap:0}
}

/* ══ LA CABECERA ═══════════════════════════════════════════════════════ */
.pr-cab__tit{margin:var(--e-2) 0 0;font-size:var(--tit-l);line-height:1.04;
  letter-spacing:-.03em;font-weight:800;color:var(--tinta);max-width:16ch;text-wrap:balance}
.pr-cab__baj{margin:var(--e-3) 0 0;font-size:var(--txt-l);line-height:1.5;
  color:var(--tinta);max-width:56ch}

/* ══ EL CUERPO ═════════════════════════════════════════════════════════
   66ch es el ancho de lectura, no una cifra redonda: por encima, el ojo
   pierde el renglón al volver.

   Los titulares de apartado son PEQUEÑOS y en negrita, no grandes. Es lo
   que hace el ejemplo y es lo correcto aquí: en un documento legal el
   titular no anuncia nada, solo separa, y a 34 px cada apartado parecía el
   comienzo de otra página. El renglón alto —1,8— es la otra mitad del
   mismo encargo: un texto que se lee entero necesita aire entre líneas. */
.pr-cuerpo{max-width:66ch}
.pr-sec+.pr-sec{margin-top:var(--e-4)}
.pr-sec h2{margin:0;font-size:var(--txt-m);line-height:1.5;font-weight:700;
  color:var(--tinta);scroll-margin-top:7em}
.pr-sec h2 b{font-family:var(--f-mono);font-weight:700;color:var(--azul-texto)}
.pr-sec p{margin:var(--e-2) 0 0;font-size:var(--txt-m);line-height:1.8;color:var(--tinta)}
.pr-sec ul{margin:var(--e-2) 0 0;padding:0 0 0 var(--e-3);display:grid;gap:var(--e-1)}
.pr-sec li{font-size:var(--txt-m);line-height:1.8;color:var(--tinta)}
.pr-sec strong{font-weight:700}
/* El correo va dentro de un <strong> y no cabe: a 320 px con la letra del
   navegador en 32, «informes@eprojectperu.com» se salía 190 px de la
   pantalla. Medido, no supuesto. Va «anywhere» y no «break-word» porque
   sólo «anywhere» cuenta para el ancho mínimo de la caja — con
   «break-word» la palabra se parte pero la caja sigue reservando su ancho
   entero y la página se sigue yendo de lado. Es la misma lección que ya
   costó una tarde en el pie heredado; ver REGLAS-DEL-SITIO §4. */
.pr-sec p,.pr-sec li,.pr-sec strong{overflow-wrap:anywhere}
.pr-sec a{color:var(--azul-texto)}
.pr-sec a:hover{color:var(--azul-texto-hover)}

/* ══ LA VUELTA ═════════════════════════════════════════════════════════
   Un solo botón, «Volver», que lleva a la pantalla anterior (07-10, Director).
   Es el botón sólido del sitio (.ep-btn--solido), que desde ese mismo día va
   EN CRISTAL en todo el sitio, desde el parche del cromo: aquí ya no se
   repite la regla. Nació en esta página, y por eso se cuenta aquí: pidió «azul y
   glass». El azul de marca translúcido no sirve —sobre el fondo claro, el
   texto blanco baja de 4,82 a 3,49 al 80 % y a 2,02 al 45 %—, así que el
   cristal se hace con el azul FUERTE del sitio (el del propio botón al pasar
   el cursor) al 80 %: calculado, 5,15 sobre el fondo claro y 10,04 sobre el
   oscuro. Al pasar el cursor vuelve al sólido, como los demás. */
.pr-vuelta{margin:var(--e-5) 0 0}
.pr-volver{gap:var(--e-1)}
.pr-volver svg{width:1em;height:1em;flex:none;transition:transform .2s}
/* La flecha se corre 3 px al pasar el cursor o al llegar con el teclado, como
   en todos los botones con flecha del sitio (Director, 08-10-2026). Esta mira
   atrás, así que se corre a la izquierda. */
.pr-volver:hover svg,.pr-volver:focus-visible svg{transform:translateX(-3px)}
@media (prefers-reduced-motion:reduce){.pr-volver svg{transition:none}}

/* ══ EL CRISTAL · decisión del Director, 07-10-2026 ════════════════════
   La receta es la de los contadores de la portada y de Nosotros (.ep-dato,
   .no-cifra): el panel al 45 %, el fondo desenfocado y --e-2 de relleno. La
   vio en una demostración (BORRADORES/privacidad-cristal.html) y aprobó dos
   sitios: la cabecera, con su raya de tinta arriba como las fichas, y el
   índice, SIN la raya —la quitó él—. «Volver arriba» queda como estaba.
   Queda dicho lo que se le avisó: esta página tiene el fondo liso, así que
   aquí el cristal no desenfoca nada: cabecera e índice se ven como fichas
   claras. */
.pr-cab{padding:var(--e-2);border-top:var(--marca) solid var(--tinta);border-radius:3px;
  background:color-mix(in srgb,var(--panel) 45%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
/* border-bottom:0 — apilado, el índice llevaba un filete por debajo que lo
   separaba del documento; con la ficha ya no hace falta. */
.pr-indice{padding:var(--e-2);border-bottom:0;border-radius:3px;
  background:color-mix(in srgb,var(--panel) 45%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}

/* ══ EN PAPEL ══════════════════════════════════════════════════════════
   Esta es la pantalla del sitio que más sentido tiene imprimir: es el
   documento que alguien puede querer archivado, o adjuntar. Así que en
   papel se imprime ENTERA y bien, no como un recorte de la pantalla. */
@media print{
  .pr-saltar,.pr-migas{display:none}
  /* en papel no hay cristal: ni relleno, ni raya, ni fondo */
  .pr-cab{padding:0;border:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .pr-rej{display:block;padding:var(--e-3) 0 0}
  .pr-cuerpo{max-width:none}
  /* El índice en papel no sirve: sus enlaces no llevan a ninguna parte y
     el lector ya tiene las hojas delante. Los números de apartado, que van
     en el texto, sí quedan — que es justo para lo que sirven. */
  .pr-indice{display:none}
  /* Un apartado partido entre dos hojas se lee mal y, en un texto legal,
     se cita mal. */
  .pr-sec{break-inside:avoid}
  .pr-sec h2{break-after:avoid}
  .pr-ficha{border-top-color:#121315}
  /* La vuelta al formulario es un enlace: en papel no hace nada. */
  .pr-vuelta{display:none}
}