/* Lo propio de Ejecución de proyectos (sin D2, sin la letra, sin el parche del cromo).
Trasladado de la maqueta aprobada (servicios-ejecucion-proyectos.html) por
herramientas/trasladar-ejecucion-proyectos.mjs. No se edita a mano: se cambia la
maqueta y se vuelve a trasladar. */
@font-face{font-family:'Chivo Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/chivo-mono-400.woff2) format('woff2')}@font-face{font-family:'Chivo Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fuentes/chivo-mono-700.woff2) format('woff2')}
:root{--f-mono:'Chivo Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
/* ══ COMUNES ═══════════════════════════════════════════════════════════ */
.ej-saltar{position:absolute;left:-9999px;top:0;z-index:200;display:inline-flex;margin:0;
padding:var(--e-1) var(--e-2);background:var(--tinta);color:var(--fondo);border-radius:4px}
.ej-saltar:focus{left:var(--e-2);top:var(--e-2)}
/* La cejilla de la portada, letra por letra. */
.ej-cejilla{margin:0 0 var(--e-2);font-family:var(--f-mono);font-size:var(--mono);
letter-spacing:.1em;text-transform:uppercase;color:var(--acento-fuerte);font-weight:700}
/* La barra heredada es position:absolute —en la portada flota sobre la foto
del hero— así que no ocupa sitio en el flujo. Se empuja con su alto. */
.ej-migas{padding-top:calc(var(--e-2) + 6em)}
.ej-migas ol{display:flex;flex-wrap:wrap;gap:var(--e-1);list-style:none;margin:0;padding:0;
font-family:var(--f-mono);font-size:var(--mono);color:var(--gris-fuerte);letter-spacing:.06em;
text-transform:uppercase}
.ej-migas li+li::before{content:"/";margin-right:var(--e-1);color:var(--linea)}
.ej-migas a{color:var(--gris-fuerte);text-decoration:none;
display:inline-flex;align-items:center;min-height:24px}
.ej-migas a:hover{color:var(--azul-texto-hover);text-decoration:underline}
.ej-migas span{display:inline-flex;align-items:center;min-height:24px}
.ej-sec{padding:var(--e-5) 0 var(--e-6)}
/* La junta de esta página es 64, y la pone cada sección: la que da paso a la
sección del método cierra con 64 y no con los 104 del pie de sección,
porque la columna del método no va en caja y su relleno no lo sostiene
ningún dibujo. Es la corrección que el Director pidió en la línea 01. */
.ej-sec--junta{padding-bottom:var(--e-5)}
.ej-tit{margin:0;font-size:var(--tit-m);line-height:1.06;letter-spacing:-.03em;
font-weight:800;text-wrap:balance}
/* ══ CABECERA ══════════════════════════════════════════════════════════
container-type porque --tit-l se mide en cqi: sin contenedor la unidad no
tiene contra qué resolver. Va SIN contador: esta línea no tiene cifras
oficiales propias y las generales de la empresa ya las da la franja de la
portada dos pantallas antes. Su único dato —10 a 120 m— vive dentro de su
especialidad, que es donde es literal. */
.ej-cab{position:relative;isolation:isolate;container-type:inline-size;
padding:var(--e-5) 0 0;
/* El lavado de fondo, MÁS presente. Encargo del Director, 18-09: «que se
pueda apreciar más». El valor no se fuerza sobre la regla heredada: se
redefine el token --fondo-op para esta cabecera, que es de donde la
portada lo lee, y así el cambio no pelea con ninguna especificidad.
Van DOS valores, y el reparto no es de gusto: es el que marca la escala
tipográfica. Medido en el navegador, la entrada mide 26 px por encima de
640 y 18 por debajo — el escalón cae entre 700 y 640 —, y esos 8 px lo
cambian todo: a 26 cuenta como texto grande y su mínimo es 3; a 18 deja
de contarlo y sube a 4,5. Así que el lavado puede ser mucho más fuerte
arriba que abajo, y no porque la pantalla sea más ancha sino porque la
letra es más grande.
· por encima de 640 ... 0,62 (peor caso medido 3,76 a 700 px)
· por debajo ......... 0,45 (peor caso medido 5,07 a 320 px)
La portada trae 0,22 en claro y 0,38 en oscuro; aquí el mismo valor sirve
para los dos temas. Los techos también están medidos: 0,66 deja el peor
caso en 3,31 y 0,55 hace fallar al tramo estrecho. **Si algún día se
cambia la fotografía de fondo hay que volver a medir esto**: el número
depende de ella y no del token. */
--fondo-op:.45}
@media (min-width:641px){.ej-cab{--fondo-op:.62}}
.ej-cab .ep-fondo{left:0;right:0}
.ej-cab__rej{display:grid;gap:var(--e-4)}
@media (min-width:900px){
.ej-cab__rej{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
column-gap:var(--e-5);align-items:center}
}
.ej-cab__tit{margin:0;font-size:var(--tit-l);line-height:1.06;letter-spacing:-.03em;
font-weight:800;max-width:17ch;text-wrap:balance}
/* En tinta y no en gris: con el lavado detrás, a 390 px la entrada baja de 26
a 18 px, deja de contar como texto grande y su mínimo sube de 3 a 4,5. Es
la trampa que ESPEC-D2 §13.1 documentó para el hero de la portada. */
.ej-cab__baj{margin:var(--e-3) 0 0;font-size:var(--txt-xl);line-height:1.35;
letter-spacing:-.01em;color:var(--tinta);max-width:34ch;text-wrap:balance}
/* ══ EL BLOQUE DE FOTOGRAFÍA, QUE ROTA ═════════════════════════════════
Encargo del Director, 18-09: la tira de tres deja de ser una sección y sus
fotografías pasan aquí. La cabecera ya tenía un bloque de fotografía; ahora
ese bloque enseña las cuatro caras de la línea en vez de una sola, y la
página se ahorra una sección entera.
A 4/3 y no a 3/2: TRES de las cuatro son verticales —3:4— y a 3/2 perdían
casi la mitad del alto. El foco va por fotografía, escrito en el marcado.
Por omisión se ven las cuatro, una debajo de otra: el carrusel lo enciende
el guion con data-carrusel, así que si el guion no corre no se esconde
nada. Regla 3 de LEEME.md, la misma que sigue la portada. */
.ej-foto{margin:0;position:relative;
margin-right:calc(var(--pad-pagina) * -1)}
.ej-foto__lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-3)}
.ej-foto__i{aspect-ratio:4/3;overflow:hidden;background:var(--linea)}
.ej-foto__i img{display:block;width:100%;height:100%;object-fit:cover}
/* modo carrusel: las cuatro en la misma celda, cruce por opacidad */
.ej-foto__lista[data-carrusel]{gap:0}
.ej-foto__lista[data-carrusel] .ej-foto__i{grid-area:1/1;opacity:0;
transition:opacity .55s cubic-bezier(.4,0,.2,1)}
.ej-foto__lista[data-carrusel] .ej-foto__i[data-viva]{opacity:1}
/* EL PRIMER FOTOGRAMA · 21-09 (REGLAS-DEL-SITIO §6.1.quaterdecies). Hasta que
el guion arranca el carrusel, las fotografías se pintaban una debajo de otra; y al
arrancar, las que no tocaban se desvanecían desde opacidad 1. Con la marca
data-js, que pone una línea del antes de la primera pintura, sólo se
dibuja la primera hasta el arranque. Sin guion o con «movimiento reducido»
se siguen viendo todas. */
@media (prefers-reduced-motion:no-preference){
html[data-js] .ej-foto__lista:not([data-carrusel]) .ej-foto__i:not(:first-child){display:none}
}
@media (prefers-reduced-motion:reduce){
.ej-foto__lista[data-carrusel] .ej-foto__i{transition:none}
}
/* Los mandos van EN FLUJO, debajo del bloque, y no colgados como en la
portada. Allí colgaban para no alterar la altura de su caja; aquí colgados
se salían 44 px por debajo de la cabecera y aterrizaban dentro de la
sección siguiente —medido: la cabecera cierra en 653 y los mandos en 697—.
En flujo el bloque mide fotografía + 36 y la cabecera lo absorbe sola,
porque su rejilla centra las dos columnas.
Mismas medidas que los del renglón rotativo de la portada: 28 × 28, filete
de 16, acento en el activo. El relleno de la derecha los devuelve al margen
de la página, que el bloque se sangra. */
.ej-foto__pie{margin-top:var(--e-2);padding-right:var(--pad-pagina);
display:flex;align-items:center;justify-content:flex-end;gap:var(--e-1);min-height:28px}
.ej-foto__indices{display:flex;gap:2px}
.ej-foto__indices[hidden],.ej-foto__pausa[hidden]{display:none}
.ej-foto__indices button{width:28px;height:28px;padding:0;cursor:pointer;font:inherit;
background:transparent;border:0;display:grid;place-items:center}
.ej-foto__indices button::before{content:"";width:16px;height:0;
border-top:2px solid var(--marca-inactiva);transition:border-color .25s}
.ej-foto__indices button:hover::before{border-top-color:var(--tinta)}
.ej-foto__indices button[aria-current=true]::before{border-top:3px solid var(--acento)}
/* El glifo del control es TEXTO, y como tal le toca 4,5 y no 3. En --gris
daba 3,99 a 1024 px en tema claro, que es el ancho donde el pie del
carrusel cae sobre el lavado de la cabecera en vez de sobre el fondo
liso. En --gris-fuerte sube y no baja en ningún otro ancho: el testigo es
más oscuro en claro y más claro en oscuro. Medido 18-09.
**Y --gris-fuerte tampoco bastó**: a 900 px en claro daba 4,24. Va en
--tinta, que es el color con el que ya se medía la bajada sobre este mismo
lavado y pasa con holgura en todo el barrido. El glifo queda más marcado que
en la portada, y es correcto: es el control activo del carrusel, mientras
que los guiones de al lado siguen en --marca-inactiva. Medido 18-09, en
dieciséis anchos por tema tras el fallo de 900 — que apareció justo porque
900 NO estaba en la lista de anchos del barrido anterior. */
.ej-foto__pausa{width:28px;height:28px;cursor:pointer;font:inherit;font-size:var(--mono);
background:transparent;border:var(--borde) solid var(--marca-inactiva);color:var(--tinta);
border-radius:2px;display:grid;place-items:center;margin-right:var(--e-1);
transition:border-color .2s,color .2s}
.ej-foto__pausa:hover{border-color:var(--tinta);color:var(--tinta)}
/* El anillo de foco de los dos mandos va HACIA DENTRO. Los mandos llevan
fondo opaco porque el pie del carrusel cae sobre la parte clara del
lavado; el anillo, con desplazamiento positivo, aterrizaba FUERA de ese
fondo y volvía a caer sobre la fotografía. Medido en Nosotros: 1,58
contra un mínimo de 3 a 1000 px en claro. Se había medido el glifo en
dieciséis anchos y el foco en ninguno: el ESTADO también se mide. */
.ej-foto__pausa:focus-visible,.ej-foto__indices button:focus-visible{
outline:2px solid var(--acento-fuerte);outline-offset:-2px}
/* ══ LAS SIETE ESPECIALIDADES ══════════════════════════════════════════
Dos columnas y no tres: a tres, los párrafos caían por debajo de 30
caracteres por renglón. El ícono al lado del cuerpo y no encima —pista
fija de 40 px, el lado del lienzo— que es el reparto que el Director pidió
para el motivo rotativo de la portada. Por debajo de 480 px el ícono se
va: a ese ancho compite con el titular y no dice nada que el titular no
diga. */
.ej-especs{list-style:none;margin:var(--e-5) 0 0;padding:0;display:grid;gap:var(--e-5)}
/* ══ EL PANEL BLANCO · aprobado por el Director el 21-09 ═══════════════
Las siete especialidades van sobre UN panel —no en tarjetas sueltas, que
se probaron y se descartaron—, con el fondo de la caja de «Hablemos» y
como ella sin borde. Dentro, cada especialidad sigue con su filete de
acento arriba. En oscuro, --panel es el gris elevado. */
.ej-especs{background:var(--panel);padding:var(--e-5) var(--e-4)}
@media (min-width:780px){.ej-especs{padding:var(--e-5)}}
/* Con la letra del sistema a 32 y 320 px de pantalla, el relleno del panel
dejaba sin sitio a las palabras largas y la página se iba 55 px de lado
(15 de ellos ya estaban en la versión aprobada, sin panel). En estrecho el relleno lateral baja, y el titular puede partir por
cualquier punto: «break-word» no reduce el ancho mínimo, «anywhere» sí
—quinta vez que aparece esta distinción, REGLAS §4—. */
@media (max-width:479px){.ej-especs{padding:var(--e-4) var(--e-2)}}
/* Y la pista de la rejilla se declara con mínimo cero: sin plantilla, la
columna implícita toma el ancho mínimo de su contenido, y a 32 de letra
«telecomunicaciones» solo ya mide 310 px. */
.ej-especs{grid-template-columns:minmax(0,1fr)}
.ej-especs .ej-esp__n,.ej-especs .ej-esp__t{overflow-wrap:anywhere}
@media (min-width:780px){
.ej-especs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--e-6)}
}
.ej-esp{padding-top:var(--e-2);border-top:var(--marca) solid var(--acento-fuerte);
display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:var(--e-3);
align-items:start}
.ej-esp__ico{display:block;color:var(--acento-fuerte)}
@media (max-width:480px){
.ej-esp{grid-template-columns:1fr}
.ej-esp__ico{display:none}
}
.ej-esp__n{margin:0;font-size:var(--txt-xl);line-height:1.2;letter-spacing:-.02em;
font-weight:800;color:var(--tinta);text-wrap:balance;hyphens:auto;overflow-wrap:break-word}
/* El rótulo del dato, en la misma tecla que las normas ISO de la línea 01:
monoespaciada, versalitas, acento fuerte. Solo lo lleva el montaje de
torres, que es la única especialidad con una cifra oficial. */
.ej-esp__dato{margin:var(--e-1) 0 0;font-family:var(--f-mono);font-size:var(--mono);
letter-spacing:.14em;text-transform:uppercase;color:var(--acento-fuerte);
font-weight:700;line-height:1}
.ej-esp__t{margin:var(--e-2) 0 0;font-size:var(--txt-m);line-height:1.5;color:var(--tinta)}
/* ══ EL MÉTODO Y HABLEMOS · UNA SECCIÓN, DOS COLUMNAS ══════════════════
El diseño definido de la línea 01, §0.2: la izquierda sobre el fondo de la
página —sin caja— y la derecha en la ÚNICA caja blanca de la página. Dos
cajas iguales darían el mismo peso a la explicación y a la llamada, y solo
una de las dos pide que hagas algo.
Sin relleno arriba ni abajo: cada sección vecina pone su junta. */
.ej-banda{padding:0;color:var(--tinta)}
.ej-caja{background:transparent;padding:var(--e-5) 0}
@media (max-width:640px){.ej-caja{padding:var(--e-4) 0}}
.ej-banda .ej-cejilla{color:var(--acento-fuerte)}
.ej-banda__rej{display:grid;gap:var(--e-5)}
@media (min-width:900px){
.ej-banda__rej{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
column-gap:var(--e-4);align-items:stretch}
}
.ej-banda a:focus-visible{outline:2px solid var(--acento-fuerte);outline-offset:3px}
/* ══ LA ESPINA · AQUÍ CIERRA ═══════════════════════════════════════════
En la línea 01 la tercera fase no termina —el seguimiento es continuo— y
la espina se desvanece por debajo del último nodo. Aquí el cuarto paso es
«entrega conforme»: la espina llega al final y REMATA en un travesaño.
Es la misma pieza diciendo lo contrario, y en las dos dice la verdad de su
línea.
Los nodos son círculos huecos —relleno del color de la página— salvo el
cuarto, macizo: es el que cierra. Dos pseudoelementos y ninguna imagen. */
.ej-pasos{list-style:none;margin:0;padding:0 0 0 var(--e-5);display:grid;gap:var(--e-4);
position:relative}
/* La espina ES la torre. El dibujo compartido de la casa ocupa la calle de la
izquierda y los cuatro nodos van montados sobre su eje. No hay línea
dibujada aparte: la torre hace de línea, y sus anclajes hacen de remate —el
cuarto paso es una entrega conforme y una torre se queda de pie—.
Se estira a lo alto a propósito —preserveAspectRatio en none—: la torre es
una CELOSÍA, o sea líneas, y una celosía más alta es lo que parece una torre
más alta. El trazo no engorda porque el recurso ya trae vector-effect en
non-scaling-stroke. Y se estira solo lo que hace falta: el
dibujo mide 228×1228 —razón 0,186— y aquí va a 56 px de ancho contra el alto
de la lista. */
/* La opacidad no es de gusto, es de umbral. A 0,5 el trazo efectivo daba
2,44 en claro y 3,15 en oscuro, y ese es EXACTAMENTE el defecto que este
mismo recurso arrastró al índice el 12-09 —no llegaba al 3 de WCAG 1.4.11—.
Medida la mezcla contra el fondo de cada tema: a 0,62 da 3,15 y 4,21, y los
dos pasan. Más arriba la torre empieza a competir con los titulares. */
.ej-torre{position:absolute;left:0;top:0;width:56px;height:100%;
color:var(--acento-fuerte);opacity:.62;pointer-events:none}
.ej-paso{position:relative;padding-top:var(--e-2);
border-top:var(--borde) solid var(--marca-inactiva);
display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--e-3);
align-items:baseline}
/* Centrado en el eje de la torre: 56 de ancho, eje en 28, nodo de 16 con su
borde, así que su canto izquierdo va en 20. */
.ej-paso::before{content:"";position:absolute;left:calc(var(--e-5) * -1 + 20px);top:8px;
width:12px;height:12px;border-radius:50%;background:var(--fondo);
border:2px solid var(--acento-fuerte);z-index:1}
.ej-paso:last-child::before{background:var(--acento-fuerte)}
/* Por debajo de 560 la calle se estrecha y la torre con ella. */
@media (max-width:560px){
.ej-pasos{padding-left:var(--e-4)}
.ej-torre{width:36px}
.ej-paso::before{left:calc(var(--e-4) * -1 + 12px)}
}
.ej-paso__n{font-family:var(--f-mono);font-size:var(--mono);letter-spacing:.14em;
font-weight:700;color:var(--acento-fuerte);font-variant-numeric:tabular-nums}
/* Se parte con guión: el documento declara lang="es", así que la separación
es la del idioma y no un corte a ciegas. Es la corrección que la línea 01
necesitó para «Implementación». */
.ej-paso__t{margin:0;font-size:var(--txt-xl);line-height:1.2;letter-spacing:-.02em;
font-weight:800;color:var(--tinta);hyphens:auto;overflow-wrap:break-word}
.ej-paso__d{grid-column:2;margin:var(--e-1) 0 0;font-size:var(--txt-m);line-height:1.6;
color:var(--gris-fuerte);max-width:52ch}
/* ══ EL CIERRE ═════════════════════════════════════════════════════════
Contenedor de consulta: quien decide si el correo cabe no es el ancho de
la ventana sino el de ESTA caja. A 900 px la sección ya es de dos columnas
y la caja se queda estrecha, mientras que a 768, apilada, es ancha. Una
media query de ventana no puede distinguir esos dos casos. */
.ej-cierre{background:var(--panel);padding:var(--e-5);container-type:inline-size}
@media (max-width:640px){.ej-cierre{padding:var(--e-4)}}
@media (min-width:900px) and (max-width:1099px){.ej-cierre{padding:var(--e-4)}}
@media (max-width:560px){.ej-cierre{padding:var(--e-3)}}
/* «informes@eprojectperu.com» pide 284 px a --txt-l y no tiene dónde
partirse; a --txt-m pide 227. La consulta mide el CONTENIDO de la caja, ya
descontado el relleno, así que el umbral es exactamente lo que el correo
necesita. Se prefiere achicar la letra a partir el correo por la mitad,
que es la otra salida y deja una dirección ilegible. */
@container (max-width:283px){
.ej-cierre .ep-contacto__datos dd{font-size:var(--txt-m)}
}
/* Las pistas se declaran con minmax(0,...) y no se heredan: la heredada es
«1.3fr 1fr» sin mínimo, y una pista fr sin mínimo no baja de su
min-content. Apilada, el cierre ocupa el alto que le sobra a la caja. */
.ej-cierre .ep-contacto{padding:0;border-top:0;align-items:start;
grid-template-columns:1fr;gap:var(--e-4)}
.ej-cierre .ep-contacto__cejilla{margin-bottom:var(--e-3)}
/* --tit-m y no el heredado --tit-l, que es un clamp de 34 a 52 medido en
cqi: en una caja de media página resolvía a 52 y el titular caía en cuatro
renglones de dos palabras. */
.ej-cierre .ep-contacto__tit{font-size:var(--tit-m);max-width:none}
.ej-cierre .ep-contacto__baj{color:var(--gris-fuerte)}
/* ══ CLIENTES ══════════════════════════════════════════════════════════
Cuatro con evidencia, que es el doble que las hermanas, porque esta línea
tiene el doble de material. El logotipo va en la tarjeta blanca de la
portada: un logotipo de tinta oscura sobre página oscura desaparece, y la
tarjeta le da su propio papel en los dos temas. Entra como FONDO y no como
![]()
porque con ![]()
el max-height se resuelve contra un área de alto
indefinido y el navegador lo ignora; con background-size:contain la
contención está garantizada, y el logotipo es decorativo —su nombre está
escrito al lado—. */
.ej-cli{list-style:none;margin:var(--e-4) 0 0;padding:0;display:grid;gap:var(--e-4)}
@media (min-width:900px){.ej-cli{grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:var(--e-5)}}
.ej-cli li{padding-top:var(--e-2);border-top:var(--borde) solid var(--linea);
display:grid;gap:var(--e-2)}
@media (min-width:560px){
.ej-cli li{grid-template-columns:160px minmax(0,1fr);column-gap:var(--e-3);
align-items:start}
.ej-cli__logo{grid-column:1}
.ej-cli__txt{grid-column:2}
}
.ej-cli__logo{width:160px;height:96px;padding:var(--e-2);
background-color:#fff;background-image:var(--logo);
background-size:contain;background-repeat:no-repeat;background-position:center;
background-origin:content-box;
border:var(--borde) solid var(--linea);border-radius:3px}
/* Dos logotipos juntos en la misma caja: menos relleno, para que cada uno
no quede en la mitad de tamaño que el de sus vecinas. */
.ej-cli__logo--par{padding:var(--e-1)}
.ej-cli b{display:block;font-size:var(--txt-l);line-height:1.3;letter-spacing:-.01em;
color:var(--tinta);font-weight:700}
.ej-cli span{display:block;margin-top:var(--e-1);font-size:var(--txt-s);line-height:1.6;
color:var(--gris-fuerte);max-width:48ch}
.ej-cli__mas{margin:var(--e-4) 0 0;padding-top:var(--e-2);
border-top:var(--borde) solid var(--linea);
font-family:var(--f-mono);font-size:var(--txt-s);line-height:1.8;letter-spacing:.02em;
color:var(--gris-fuerte)}
/* ══ EN PAPEL ══════════════════════════════════════════════════════════
Por RAÍZ y no por lista de clases: enumerar clases es lo que falló en la
línea 01 —la lista envejece cada vez que cambia el marcado y quien la lee
no se entera de que dejó de cubrir algo—. El papel es blanco en los dos
temas, así que la tinta se fuerza una vez arriba, con valores literales. */
@media print{
:root,:root[data-tema=oscuro]{
--tinta:#121315;--gris:#3f434a;--gris-fuerte:#3f434a;--fondo:#fff;--panel:#fff;
--linea:#c8ccd2;--acento:#121315;--acento-fuerte:#121315;--azul-texto:#121315;
--marca-inactiva:#8b9097}
body,.ej-banda,.ej-cierre,.ej-sec,.ej-cab{background:#fff;color:#121315}
.ej-cab .ep-fondo{display:none}
.ep-btn,.ep-btn--solido{background:transparent;color:#121315;
border:var(--marca) solid #121315}
/* Solo el cierre lleva caja en papel: en pantalla el método no la tiene, y
una caja que aparece al imprimir contradice el diseño. */
.ej-cierre{background:#fff;border:var(--borde) solid #c8ccd2}
/* Por ficha y por paso, no por rejilla: lo que no se puede partir es cada
una, no las siete juntas. */
.ej-esp,.ej-paso,.ej-cierre,.ej-cli li,.ej-foto__i{break-inside:avoid}
/* ── EL CARRUSEL EN PAPEL ──────────────────────────────────────────
No hay rotación en papel: sobran los controles, y de las fotografías
—decorativas, aria-hidden— se imprime una sola. Tres planchas de tinta
no informan de nada. */
.ej-foto__pie{display:none}
/* En papel no hay ventanas: «Ver el servicio» no lleva a ninguna parte. */
.ej-esp__abre{display:none!important}
/* Y la ventana tampoco, aunque esté abierta: un enlace #servicio-… la abre
al cargar y al imprimir salía encima de todo. Auditoría del 21-09. */
.ej-dlg{display:none!important}
html[data-dialogo]{overflow:visible}
/* SIN [data-carrusel] a propósito: ese atributo lo pone el guion, y solo si
corre y si no hay «menos movimiento». Colgando de él, quien imprimiera con
movimiento reducido o con JavaScript apagado se llevaba las cuatro
fotografías —medido: 4.589 px de alto contra 3.159—. En papel no hay
rotación NUNCA, así que la regla no puede depender de que la haya. */
.ej-foto__lista{gap:0}
/* Los dos selectores, con y sin el atributo: en pantalla la regla que
enciende la vista viva es .ej-foto__lista[data-carrusel]
.ej-foto__i[data-viva] —0-4-0— y una de 0-3-0 no la gana por mucho
que vaya después. Sin esto quedaban DOS a opacidad 1 en la misma
celda. */
.ej-foto__lista .ej-foto__i,
.ej-foto__lista[data-carrusel] .ej-foto__i[data-viva]{grid-area:1/1;opacity:0}
.ej-foto__lista .ej-foto__i:first-child,
.ej-foto__lista[data-carrusel] .ej-foto__i:first-child{opacity:1}
.ej-banda,.ej-sec{break-inside:auto}
}
/* ══ LOS DOS PARCHES HEREDADOS DE D2 ═══════════════════════════════════
Van como capa encima: d2-portada-limpia.html no se toca. Son los mismos
que llevan la portada de servicios, el índice y las dos líneas cerradas —
cuarta copia, y la deuda de duplicación sigue anotada en PLAN-SITIO.md. */
/* El panel de menú dibujaba dos filetes paralelos a 40 px uno del otro: el
border-bottom de .ep-menu__top y el border-top del primer renglón. Se
retira el de arriba y se acortan los dos aires. La lista lleva los dos
selectores porque el heredado que manda es [data-menu=lateral]
.ep-menu__cuerpo —atributo más clase, 0-2-0— y le gana a una clase sola
por mucho que vaya después. */
.ep-menu__top{border-bottom:0;padding-bottom:var(--e-3)}
.ep-menu__cuerpo,[data-menu=lateral] .ep-menu__cuerpo{padding-top:var(--e-3)}
/* El logotipo del pie, a 56: en el pie la marca es el sujeto de su propia
columna y no compite con nada, y la línea «& Consulting» pasa de 6 a 11 px,
que ya se lee. No cuesta alto: la columna de marca no es la más alta. */
.ep-pie__logo svg{height:56px}
/* ══ LAS TARJETAS QUE ABREN · aprobado el 21-09 ═════════════════════════
Encargo del Director: cada especialidad es un botón y abre una ventana
con su parte. El botón va dentro del titular y su ::after cubre la
tarjeta entera, así que se pulsa en cualquier punto y el lector de
pantalla oye un solo control con nombre propio. Sin guion no hay
ventanas, así que el botón no se pinta: la tarjeta queda como estaba. */
.ej-esp{position:relative}
.ej-esp__abre{display:none;margin:var(--e-2) 0 0;padding:0;border:0;background:transparent;
font:inherit;font-family:var(--f-mono);font-size:var(--mono);letter-spacing:.12em;
text-transform:uppercase;font-weight:700;color:var(--acento-fuerte);cursor:pointer;
min-height:24px}
html[data-js] .ej-esp__abre{display:inline-flex;align-items:center;gap:var(--e-1)}
.ej-esp__abre::after{content:"";position:absolute;inset:calc(var(--e-2) * -1)}
.ej-esp__abre:focus-visible{outline:none}
.ej-esp__abre:focus-visible::after{outline:2px solid var(--acento-fuerte);outline-offset:2px}
/* El nombre oculto no hereda las versalitas: algunos lectores deletrean las
palabras cortas en mayúscula. Auditoría del 21-09. */
.ej-esp__abre .solo-lectores{text-transform:none}
.ej-esp:hover .ej-esp__abre span:first-child{text-decoration:underline;
text-underline-offset:3px}
/* ══ UNA SOLA FLECHA EN LOS BOTONES · Director, 08-10-2026 ════════════════
Vio que unos botones llevaban una flecha larga dibujada, otros un carácter
«→» y la mayoría ninguna. Se probó a quitarlas todas y prefirió lo
contrario: que los que ya llevaban flecha lleven TODOS la del botón
«Volver» de Privacidad —un ángulo—, mirando a la derecha y detrás del
texto. Va a la altura de la letra (1em), y se corre 3 px al pasar el
cursor o al llegar con el teclado, como ya hacían las de Ejecución de
proyectos. Aquí la flecha era un carácter «→» y ya se movía, con el cursor sobre la tarjeta: eso no cambia. El relleno del botón baja de --e-4 a --e-3.
Los botones que no llevaban flecha siguen sin ella. */
.ej-esp__flecha{display:inline-flex;transition:transform .2s}
.ej-esp__flecha svg{width:1em;height:1em;flex:none}
.ej-esp:hover .ej-esp__flecha{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.ej-esp__flecha{transition:none}}
/* Las tarjetas que todavía no tienen material no llevan botón, y no se
distinguen de otra forma: no se anuncia lo que falta. */
/* ══ LA VENTANA ════════════════════════════════════════════════════════