/* Lo propio de Sistemas de gestión (sin D2, sin la letra, sin el parche del cromo).
   Trasladado de la maqueta aprobada (servicios-sistemas-gestion.html) por
   herramientas/trasladar-sistemas-gestion.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 ═══════════════════════════════════════════════════════════ */
.sg-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}
.sg-saltar:focus{left:var(--e-2);top:var(--e-2)}
/* La cejilla de la portada, letra por letra: monoespaciada, versalitas, en el
   acento fuerte y en negrita. */
.sg-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, 96 px,
   igual que las cuatro maquetas del 03-08 y que el índice. */
.sg-migas{padding-top:calc(var(--e-2) + 6em)}
.sg-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}
.sg-migas li+li::before{content:"/";margin-right:var(--e-1);color:var(--linea)}
.sg-migas a{color:var(--gris-fuerte);text-decoration:none;
  display:inline-flex;align-items:center;min-height:24px}
.sg-migas a:hover{color:var(--azul-texto-hover);text-decoration:underline}
.sg-migas span{display:inline-flex;align-items:center;min-height:24px}
/* Arriba --e-5 y no --e-6: con 104 px, «Clientes principales» quedaba
   demasiado despegada de la banda. Abajo --e-6, porque la sección cerraba
   con CERO aire —medido: terminaba en y=2510 y el pie empezaba en y=2510—,
   así que la última línea de nombres y el filete naranja del pie se tocaban.
   Los dos, encargo del Director, 17-09. El valor de abajo es el mismo que
   la portada pone entre su cierre y el pie. */
.sg-sec{padding:var(--e-5) 0 var(--e-6)}
/* La sección que da paso a la banda cierra con la junta normal de la
   página, 64, y no con los 104 del pie de sección. Con 104 arriba y 64 de
   relleno de la columna del método, entre el puente y «EL MÉTODO» había 168
   px de blanco, y desde que el método no va en caja ese blanco no lo
   sostiene nada. Encargo del Director, 18-09: «se ve muy separado». */
.sg-sec--junta{padding-bottom:var(--e-5)}
.sg-tit{margin:0;font-size:var(--tit-m);line-height:1.06;letter-spacing:-.03em;
  font-weight:800;text-wrap:balance}
/* container-type porque --cifra-m y --tit-l se miden en cqi: sin contenedor
   la unidad no tiene contra qué resolver. Es lo que hace .ep-motivos en la
   portada. */
.sg-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, después de
     verlo en la línea 03. No se fuerza sobre la regla heredada: se redefine el
     token --fondo-op en esta cabecera, que es de donde la portada lo lee, así
     que el cambio no pelea con ninguna especificidad.

     Van DOS valores, y el reparto lo marca la ESCALA TIPOGRÁFICA y no el ancho
     de la pantalla: medido, la entrada mide 26 px por encima de 640 y 18 por
     debajo, y esos ocho píxeles 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.

       · por encima de 640 ... .48  (peor caso medido 1,28× a 700 oscuro)
       · por debajo ......... .40  (peor caso medido 1,14× a 320 oscuro)

     La portada trae 0,22 en claro y 0,38 en oscuro. **Y estos números NO son
     los de las páginas hermanas**: dependen de la fotografía, y ésta es
     «Gestión documentaria». Esta es la más oscura de las tres fotografías y por eso admite menos: a 0,62 el titular cae a 2,64 en oscuro, y 0,45 ya falla en el tramo estrecho. Si se cambia la fotografía, esto se
     vuelve a medir. */
  --fondo-op:.40}
@media (min-width:641px){.sg-cab{--fondo-op:.48}}
.sg-cab .ep-fondo{left:0;right:0}
.sg-cab__rej{display:grid;gap:var(--e-4)}
@media (min-width:900px){
  .sg-cab__rej{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    column-gap:var(--e-5);align-items:center}
}
/* ══ EL BLOQUE DE FOTOGRAFÍA, QUE ROTA ═════════════════════════════════
   Encargo del Director, 18-09, después de verlo en la línea 03. El bloque
   deja de ser una fotografía fija y pasa a enseñar TRES, sincronizadas con
   los tres textos de la entrada: cada vuelta cambia el dibujo y el texto a
   la vez.

   A 4/3 y no a 3/2: las tres son apaisadas de 1,33 a 1,48 y a 4/3 ninguna
   pierde su asunto. El foco va por fotografía, escrito en el marcado.

   Por omisión se ven las tres, 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. */
.sg-foto{margin:0;position:relative;margin-right:calc(var(--pad-pagina) * -1)}
.sg-foto__lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-3)}
.sg-foto__i{aspect-ratio:4/3;overflow:hidden;background:var(--linea)}
.sg-foto__i img{display:block;width:100%;height:100%;object-fit:cover}
.sg-foto__lista[data-carrusel]{gap:0}
.sg-foto__lista[data-carrusel] .sg-foto__i{grid-area:1/1;opacity:0;
  transition:opacity .55s cubic-bezier(.4,0,.2,1)}
.sg-foto__lista[data-carrusel] .sg-foto__i[data-viva]{opacity:1}
@media (prefers-reduced-motion:reduce){
  .sg-foto__lista[data-carrusel] .sg-foto__i{transition:none}
}
/* Los mandos van EN FLUJO, debajo del bloque. En la portada cuelgan en
   posición absoluta para no alterar la altura de su caja; aquí colgados se
   salen por debajo de la cabecera y aterrizan en la sección siguiente —lo
   midió la línea 03 y costó 44 px—. Mismas medidas que los del renglón
   rotativo de la portada: 28 × 28, filete de 16, acento en el activo. */
.sg-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}
.sg-foto__indices{display:flex;gap:2px}
.sg-foto__indices[hidden],.sg-foto__pausa[hidden]{display:none}
.sg-foto__indices button{width:28px;height:28px;padding:0;cursor:pointer;font:inherit;
  background:transparent;border:0;display:grid;place-items:center}
.sg-foto__indices button::before{content:"";width:16px;height:0;
  border-top:2px solid var(--marca-inactiva);transition:border-color .25s}
.sg-foto__indices button:hover::before{border-top-color:var(--tinta)}
.sg-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. */
.sg-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}
.sg-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, y fallaba de 900 a 1280 en
   claro y hasta 1440 en oscuro. Se había medido el glifo en dieciséis
   anchos y el foco en ninguno: el ESTADO también es parte de la medición. */
.sg-foto__pausa:focus-visible,.sg-foto__indices button:focus-visible{
  outline:2px solid var(--acento-fuerte);outline-offset:-2px}
/* ══ LA ENTRADA, QUE ROTA CON ELLAS ════════════════════════════════════
   Los tres textos se apilan en la misma celda, así que la caja toma la
   altura del más largo y no salta al cambiar. Sin guion se ven los tres,
   uno debajo de otro, igual que las fotografías. */
.sg-baj__v{display:block}
.sg-cab__baj[data-carrusel]{display:grid}
.sg-cab__baj[data-carrusel] .sg-baj__v{grid-area:1/1;opacity:0;
  transition:opacity .55s cubic-bezier(.4,0,.2,1)}
.sg-cab__baj[data-carrusel] .sg-baj__v[data-viva]{opacity:1}
@media (prefers-reduced-motion:reduce){
  .sg-cab__baj[data-carrusel] .sg-baj__v{transition:none}
}
/* 20ch y no 17: con tres titulares apilados manda el más largo, y a 17ch
   «Seguridad y salud en el trabajo» partía en TRES renglones contra uno de
   «Calidad». Dos renglones contra uno es un escalón; tres, un agujero. */
.sg-cab__tit{margin:0;font-size:var(--tit-l);line-height:1.06;letter-spacing:-.03em;
  font-weight:800;max-width:20ch;text-wrap:balance}
/* ══ EL TITULAR, QUE ROTA CON ELLAS ════════════════════════════════════
   Mismo mecanismo que la entrada, y por el mismo motivo: los tres nombres
   se apilan en la misma celda, la caja toma la altura del más alto —«Seguridad
   y salud en el trabajo», que parte en tres renglones— y no salta al cambiar.
   Sin guion se ven los tres, uno debajo de otro: nada se esconde. */
.sg-tit__v{display:block}
/* Alineados ABAJO, y es lo que arregla el hueco: la caja guarda la altura del
   titular más alto, así que al pintar «Calidad» sobran renglones. Anclados
   arriba, ese aire caía ENTRE el titular y la entrada y se leía como un fallo
   de maquetación. Anclados abajo, el titular va siempre pegado a su entrada y
   el aire sube al lado del lema, donde no rompe nada. */
.sg-cab__tit[data-carrusel]{display:grid;align-items:end}
.sg-cab__tit[data-carrusel] .sg-tit__v{grid-area:1/1;opacity:0;
  transition:opacity .55s cubic-bezier(.4,0,.2,1)}
.sg-cab__tit[data-carrusel] .sg-tit__v[data-viva]{opacity:1}
@media (prefers-reduced-motion:reduce){
  .sg-cab__tit[data-carrusel] .sg-tit__v{transition:none}
}
/* ══ EL PRIMER FOTOGRAMA · 21-09 ═══════════════════════════════════════
   Visto por el Director: al cargar, los textos salían «sobrepuestos» un
   instante. Eran dos fallos seguidos. Mientras el guion no llegaba, las tres
   variantes se pintaban una debajo de otra; y cuando llegaba y las apilaba en
   la misma celda, las dos que no tocaban se DESVANECÍAN desde opacidad 1
   —la transición de .55 s también corría en el arranque—, así que durante
   medio segundo se veían encima de la buena.

   El arreglo: un guion de una línea en el <head> marca data-js antes de la
   primera pintura, y con esa marca, hasta que el carrusel arranca, sólo se
   dibuja la variante viva. Las otras aparecen ya con opacidad 0, porque un
   elemento que pasa de display:none a visible no hace transición. Sin guion
   se siguen viendo las tres; con «movimiento reducido», también —la regla
   sólo vale cuando se va a rotar—. */
/* UN SOLO TITULAR MIENTRAS NO ROTE · auditoría del 02-10, G-B, y su caso gemelo con
   «reducir movimiento». Aquí se decía «sin guion se ven los tres, uno debajo de otro»
   (y con movimiento reducido, también), y en la cabecera eso se lee como un fallo:
   tres titulares y tres entradas apilados. La portada lo resuelve enseñando solo la
   variante viva (la primera) y esconde las demás, con guion o sin él y con o sin
   movimiento reducido; se hace igual: la regla vale siempre que el carrusel no esté
   rotando (sin data-carrusel), no solo sin guion. Solo titular y entrada: las
   fotografías siguen siendo una lista que se ve entera. */
.sg-cab__tit:not([data-carrusel]) .sg-tit__v:not([data-viva]),
.sg-cab__baj:not([data-carrusel]) .sg-baj__v:not([data-viva]){display:none}
@media (prefers-reduced-motion:no-preference){
  html[data-js] .sg-cab__tit:not([data-carrusel]) .sg-tit__v:not([data-viva]),
  html[data-js] .sg-cab__baj:not([data-carrusel]) .sg-baj__v:not([data-viva]),
  html[data-js] .sg-foto__lista:not([data-carrusel]) .sg-foto__i:not([data-viva]){display:none}
}
/* El lema oficial de la línea, que ya no es el titular. Va en tinta y no en
   acento: se levanta sobre el mismo lavado que la entrada, y el lavado está
   calibrado para tinta.
   20 px en NEGRITA, y el motivo es una medida, no un gusto: a 16 px redonda
   el mínimo es 4,5 y a 641 px en tema oscuro daba 4,25 sobre el lavado. A
   20 px con peso 700 entra en «texto grande» —el corte está en 18,66 px con
   negrita— y el mínimo baja a 3, que cumple con holgura. Subir el lavado no
   valía: está calibrado para la entrada y el titular. Medido 18-09. */
.sg-cab__lema{margin:0 0 var(--e-2);font-size:var(--txt-l);line-height:1.35;
  font-weight:700;letter-spacing:-.01em;color:var(--tinta);max-width:34ch}
/* En tinta, y el motivo está medido: 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 — en gris daba 4,35 en tema oscuro. Es la misma trampa que
   ESPEC-D2 §13.1 documentó para el hero de la portada. La jerarquía la hacen
   el tamaño y el peso: 52 px en negrita contra 18-26 en redonda. */
.sg-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}
/* --marca-inactiva y no --linea: modalidades vive dentro de la banda, y la
   banda ES --linea. Un filete de su propio color no existe. */
.sg-disc__norma{margin: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}
.sg-disc__t{margin:var(--e-2) 0 0;font-size:var(--txt-m);line-height:1.5;
  color:var(--tinta)}
/* ══ DOS CAMPOS DE COLOR, UNO POR COLUMNA ══════════════════════════════
   Encargo del Director, 17-09. La banda deja de ser un plano de un solo
   tono: cada columna lleva el suyo y los dos se tocan, sin calle de por
   medio, así que el corte vertical es el que separa el argumento de la
   prueba.

   Los tonos salen de la paleta, medidos los dos temas:
     · izquierda --panel   (#ffffff claro / #1e2023 oscuro)
     · derecha   --fondo   (#f4f6f8 claro / #121315 oscuro)
     · «Hablemos» --panel  (blanco en claro)
   Se separan 1,08 en claro y 1,14 en oscuro.

   **Segunda vuelta, 17-09.** La primera versión usaba --linea (#d4dced) en
   la derecha, que separaba 1,38. El Director lo cambió por el color de la
   propia página —el que se ve bajo la fotografía del encabezado— y puso
   «Hablemos» en blanco. La banda deja de ser un objeto con dos mitades y
   pasa a ser UN campo blanco a la izquierda sobre la página, que sigue
   corriendo por la derecha. Es más silencioso de lo que la paleta permite
   medir, y es la decisión: 1,08 no se lee como dos bloques, se lee como
   una página con una zona en blanco.

   La tarjeta de «Hablemos» y la columna izquierda comparten tono a
   propósito: lo que las distingue no es el color sino que una está dentro
   del campo de la página y la otra ES el campo.

   El color lo llevan las columnas y no la sección, así que la sección ya no
   pinta fondo ni aire vertical: si lo hiciera, asomaría por arriba y por
   abajo. Las columnas se estiran a la altura de la fila —stretch, el valor
   por defecto— para que los dos campos acaben a la misma altura aunque su
   contenido no. */
/* ══ LA BANDA, UN SOLO CAMPO BLANCO ════════════════════════════════════
   Encargo del Director, 17-09. Los dos campos de color desaparecen: la banda
   entera va en --panel, a sangre, y la página gris la rodea. Tercera vuelta
   sobre este objeto, y la que lo simplifica de verdad.

   Lo que se va con ellos, y no es poco: los fondos por columna, los márgenes
   negativos que los sangraban, el estirado a la misma altura y el
   margin-top:auto que empujaba la tarjeta al fondo. Todo eso existía para
   que dos campos distintos cerraran parejos. Con un solo campo el problema
   deja de existir en vez de resolverse, que es mejor arreglo que cualquiera
   de los tres que llevaba.

   La separación con la página es --panel contra --fondo: 1,08 en claro y
   1,14 en oscuro, la misma que el Director eligió para Capacitación. */
/* ══ DOS CAJAS BLANCAS, NO UNA BANDA ═══════════════════════════════════
   Encargo del Director, 17-09, cuarta vuelta sobre este objeto. La banda
   deja de ir a sangre: el método y el cierre son ahora dos CAJAS blancas
   dentro del ancho de la página, con el gris de fondo alrededor y entre
   ellas. La sección ya no pinta nada; pintan las cajas.

   Es la consecuencia de «distribuir bien lo que tenemos y no seguir un
   esquema»: a sangre, la banda obligaba a que todo lo de dentro compartiera
   una sola caja de color, y el cierre no tiene por qué. Separadas, cada una
   dice una cosa y el gris entre ellas hace de junta sin dibujar nada. */
/* ══ UNA SECCIÓN, DOS CAJAS BLANCAS EN PARALELO ════════════════════════
   Encargo del Director, 18-09, quinta y última vuelta. El método y el
   cierre dejan de ir uno debajo del otro y pasan a ser DOS COLUMNAS de la
   misma sección: las tres fases a la izquierda, «Hablemos» a la derecha,
   cada una en su caja blanca sobre el gris de la página.

   Sin relleno superior: la sección de arriba ya pone sus 104 px, y con los
   de la banda sumaban 208 contra los 64 de las otras juntas. Lo señaló el
   Director antes de que yo lo midiera. */
/* Sin relleno arriba NI abajo: la sección de arriba cierra con su junta y
   la de abajo abre con la suya. La banda ya no añade nada por su cuenta,
   que es lo que sumaba 168 px a cada lado. */
.sg-banda{padding:0;color:var(--tinta)}
/* El método NO va en caja blanca: va sobre el fondo de la página, y la única
   caja blanca de la sección es «Hablemos». Encargo del Director, 18-09, y es
   la decisión correcta: dos cajas iguales daban el mismo peso a la
   explicación y a la llamada, y solo una de las dos pide que hagas algo.
   Conserva el relleno vertical para que la cejilla arranque a la altura de
   «HABLEMOS». */
.sg-caja{background:transparent;padding:var(--e-5) 0}
@media (max-width:640px){.sg-caja{padding:var(--e-4) 0}}

/* Dos clases y un descendiente, 0-3-0, porque más abajo .sg-cierre vuelve a
   fijar su margen superior y una clase sola perdía. Es la tercera vez en el
   día que gana la especificidad y no el orden; medido antes de darlo por
   bueno: con una clase el escalón seguía en 455 px. */
.sg-banda .sg-cejilla{color:var(--acento-fuerte)}
.sg-banda__tit{margin:0;font-size:var(--tit-l);line-height:1.06;letter-spacing:-.03em;
  font-weight:800;max-width:20ch;text-wrap:balance}
.sg-banda__txt{margin:var(--e-3) 0 0;font-size:var(--txt-l);line-height:1.5;
  color:var(--tinta);max-width:56ch}
/* Sin calle en ninguna dirección. Apiladas —por debajo de 900— un gap
   habría dejado una franja del color de la página entre los dos campos, y
   eso se lee como costura, no como separación: la separación la dan los
   rellenos verticales de cada columna, 64 px y 64 px. */
.sg-banda__rej{display:grid;gap:var(--e-5)}
/* El primero de su columna no lleva ese aire: el relleno superior de la
   columna ya lo pone. En Capacitación no salía porque el primer hijo de
   la columna derecha es la tarjeta del QR y no un bloque; aquí es el
   Respaldo, y arrancaba 104 px por debajo de la columna izquierda. */
/* Sin calle entre columnas: los dos campos se tocan y la separación la dan
   los rellenos de cada uno —40 px y 40 px, o sea 80 entre contenidos—. El
   reparto baja de 1.3fr a 1.2fr para que la columna derecha no se quede sin
   sitio: con 1.3fr su contenido caía a 487 px y el bloque del QR, que pide
   500, se habría desarmado en dos renglones. */
@media (min-width:900px){
  .sg-banda__rej{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    column-gap:var(--e-4);align-items:stretch}
}
/* La cejilla se despega del titular: con --e-2 quedaban 16 px contra un
   titular de 34 px y line-height 1.06, y se leían pegados. Encargo del
   Director, 17-09. */

/* El titular de la llamada se partía en cuatro renglones de 10 caracteres
   entre 900 y 1100 px —medido: 253 px de columna a 900—, que es la franja
   del portátil pequeño. Baja un escalón de la escala en ese tramo. */
/* Dentro de la banda el anillo va en el naranja de banda, como en el pie,
   que es el mismo instrumento. Con --acento daba 3,60 sobre el fondo
   invertido; con --banda-acento, 7,36. */
.sg-banda a:focus-visible{outline:2px solid var(--acento-fuerte);outline-offset:3px}
/* .sg-bloque h3 gana por especificidad —una clase y un elemento contra una
   clase—, así que el margen y el tamaño hay que pedirlos con la misma arma:
   .sg-bloque .sg-resp__tit. Puesto como .sg-mods__tit salía a 26 px y pegado
   al párrafo de arriba. */
/* ══ CLIENTES ══════════════════════════════════════════════════════════
   El logotipo va en la tarjeta blanca de la portada —.ep-muro__tarjeta,
   heredada tal cual—, que es la que resuelve el problema de fondo: un
   logotipo de tinta oscura sobre página oscura desaparece, y la tarjeta le
   da su propio papel en los dos temas. Los dos logotipos tienen razones muy
   distintas —563 × 197 y 112 × 124— así que van contenidos, no recortados.
   Se dibuja a 160 × 96 y no a los 200 × 120 de la portada: allí la tarjeta
   es el contenido de su sección, y aquí acompaña a un nombre de dos
   palabras. */
.sg-cli{list-style:none;margin:var(--e-4) 0 0;padding:0;display:grid;gap:var(--e-4)}
@media (min-width:900px){.sg-cli{grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--e-5)}}
.sg-cli li{padding-top:var(--e-2);border-top:var(--borde) solid var(--linea);
  display:grid;gap:var(--e-2)}
/* Las celdas se piden por su clase y no con li>div: la tarjeta del logotipo
   TAMBIÉN es un div, así que li>div las mandaba a las dos a la columna 2 y
   el logotipo acababa encima del nombre. */
@media (min-width:560px){
  .sg-cli li{grid-template-columns:160px minmax(0,1fr);column-gap:var(--e-3);
    align-items:start}
  .sg-cli__logo{grid-column:1}
  .sg-cli__txt{grid-column:2}
}
/* La tarjeta es la de la portada —papel blanco, filete fino, 3 px de radio:
   .ep-muro__tarjeta, con sus mismos valores— pero el logotipo entra como
   FONDO y no como <img>, y el motivo es de mecánica, no de gusto.
   Con <img> dentro de una rejilla centrada, el max-height:100% se resuelve
   contra un área de alto indefinido y el navegador lo ignora: el logotipo de
   Sinohydro —112 × 124, más alto que ancho— se salía de la tarjeta por abajo
   y chocaba con el nombre. Con background-size:contain la contención está
   garantizada, y como el logotipo es decorativo —su nombre está escrito al
   lado— no pierde nada por dejar de ser <img>.
   background-origin:content-box hace que el relleno sea aire de verdad y el
   dibujo no lo invada. */
.sg-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}
.sg-cli b{display:block;font-size:var(--txt-l);line-height:1.3;letter-spacing:-.01em;
  color:var(--tinta);font-weight:700}
.sg-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}
.sg-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 ══════════════════════════════════════════════════════════
   La auditoría independiente del 17-09 imprimió esta página de verdad —A4,
   con los fondos desactivados, que es lo que hace el navegador por defecto—
   y encontró tres cosas, las tres por haber copiado el bloque de la página
   hermana sin revisarlo:

     · en tema OSCURO, 18 de 23 pares por debajo de AA sobre papel blanco: el
       titular a 1,15, las cuatro disciplinas a 1,15, las tres fases a 1,15 y
       1,68. La tinta clara del tema oscuro no cambia al imprimir;
     · el botón de la llamada salía a 1,00 sobre blanco —o sea invisible— en
       los DOS temas, porque el bloque arreglaba una clase que esta página no
       usa;
     · «Qué cubre la línea» se quedaba sola en una hoja y las cuatro fichas
       saltaban a la siguiente, porque la rejilla no se parte.

   Se rehace por RAÍZ y no por lista. Enumerar clases es lo que falló: la
   lista envejece cada vez que cambia el marcado, y el que la lee no se
   entera de que dejó de cubrir algo. Aquí el papel es blanco en los dos
   temas, así que la tinta se fuerza una vez arriba y los valores van
   literales a propósito, como los del QR de la página hermana. */
@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,.sg-banda,.sg-cierre,.sg-sec,.sg-cab{background:#fff;color:#121315}
  .sg-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 ya no la
     tiene, y una caja que aparece al imprimir contradice el diseño. */
  .sg-cierre{background:#fff;border:var(--borde) solid #c8ccd2}
  /* Por ficha y por fase, no por rejilla: lo que no se puede partir es cada
     una, no las cuatro juntas. */
  /* ── EL CARRUSEL EN PAPEL ──────────────────────────────────────────
     En papel no hay rotación, así que sobran los controles y «vista 1 de 3».
     Lo que se imprime no es un fotograma suelto: el titular sale con su
     NOMBRE COMPLETO —el mismo que oye un lector de pantalla, con las tres
     disciplinas— y la entrada saca los tres textos, uno debajo de otro. De
     las fotografías se imprime UNA: son decorativas —aria-hidden— y tres
     planchas de tinta no informan de nada. */
  .sg-foto__pie{display:none}
  /* El nombre completo a 52 px ocupaba SIETE renglones de papel. En papel el
     titular baja a --tit-m: el salto con la entrada sigue siendo claro y el
     encabezado cabe en tres renglones. */
  .sg-cab__tit{font-size:var(--tit-m);max-width:42ch}
  .sg-cab__tit .sg-tit__v{display:none}
  .sg-cab__tit .solo-lectores{position:static!important;width:auto;height:auto;
    overflow:visible;clip:auto;clip-path:none;white-space:normal;margin:0}
  /* Los dos selectores, con y sin el atributo, porque .sg-cab__baj[data-carrusel]
     es 0-2-0 y le gana a .sg-cab__baj por mucho que vaya después. Sin esto, en
     papel salían TRES entradas sin guion y UNA con él: el mismo papel decía dos
     cosas distintas según cómo se abriera. Medido 18-09. */
  .sg-cab__baj,.sg-cab__baj[data-carrusel]{display:block}
  .sg-cab__baj .sg-baj__v,.sg-cab__baj[data-carrusel] .sg-baj__v{opacity:1}
  .sg-cab__baj .sg-baj__v + .sg-baj__v{margin-top:var(--e-2)}
  /* 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. */
  .sg-foto__lista{gap:0}
  /* Los dos selectores, con y sin el atributo: en pantalla la regla que
     enciende la vista viva es .sg-foto__lista[data-carrusel]
     .sg-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 <li> a opacidad 1 en la misma
     celda: no se ve en el PDF porque una tapa a la otra, pero la regla no
     controlaba lo que decía controlar. */
  .sg-foto__lista .sg-foto__i,
  .sg-foto__lista[data-carrusel] .sg-foto__i[data-viva]{grid-area:1/1;opacity:0}
  .sg-foto__lista .sg-foto__i:first-child,
  .sg-foto__lista[data-carrusel] .sg-foto__i:first-child{opacity:1}
  .sg-disc,.sg-fase,.sg-cierre,.sg-cli li{break-inside:avoid}
  .sg-banda,.sg-sec{break-inside:auto}
}
/* ══ EL PANEL DE MENÚ · UNA LÍNEA, NO DOS ══════════════════════════════
   Encargo del Director, 17-09. Heredado de la portada, el panel dibujaba
   dos filetes paralelos a 40 px uno del otro: el border-bottom de
   .ep-menu__top y, justo debajo, el border-top del primer renglón de la
   navegación. Medido a 1440: el de arriba en y=129, el de abajo en y=169.
   Dos reglas para un solo corte, con un vacío entre ellas.
   Se retira la de .ep-menu__top —la lista ya trae la suya— y se acortan
   los dos aires, así que el menú entero sube 33 px. Va como capa encima:
   d2-portada-limpia.html no se toca. */
.ep-menu__top{border-bottom:0;padding-bottom:var(--e-3)}
/* La lista lleva los dos selectores porque el heredado que manda no es
   .ep-menu__cuerpo a secas, sino [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. Medido: sin esta segunda mitad el aire seguía en 40 px. */
.ep-menu__cuerpo,[data-menu=lateral] .ep-menu__cuerpo{padding-top:var(--e-3)}
/* ══ EL LOGOTIPO DEL PIE, A SU TAMAÑO ══════════════════════════════════
   Pregunta del Director, 17-09: «me parece que es muy pequeño el logo».
   Medidas de las tres instancias de la pagina: barra 176×48, panel de menú
   161×44, pie 125×34. El pie tenía la MAS PEQUENA, y está al revés de lo
   que hace cada una: en la barra el logotipo es un control que compite con
   los enlaces y con el botón de acción; en el pie es el sujeto de su propia
   columna —305 px— y no compite con nada.

   El argumento que cierra la discusion no es de composición sino de
   legibilidad: la línea «& Consulting» es un quinto del alto de la marca,
   o sea unos 6 px a 34. A 56 pasa de 6 a 11, que ya se lee.

   Va a 56: por encima de la barra, porque una firma de cierre puede ser la
   instancia mayor, y por debajo de 64, donde empieza a empujar al lema.
   **No cuesta alto**: el pie mide 469 px con 34, con 44, con 56 y con 64,
   porque la columna de marca no es la más alta de las cuatro.

   Va como capa encima, igual que el panel de menú: d2-portada-limpia.html
   no se toca. Es el SEGUNDO arreglo heredado duplicado en los dos guiones. */
.ep-pie__logo svg{height:56px}
/* ══ LAS CUATRO DISCIPLINAS ════════════════════════════════════════════
   El cuerpo de esta página, y la diferencia de fondo con Capacitación: allí
   los catorce temas salieron, aquí las cuatro disciplinas se quedan con su
   norma y su párrafo. No es incoherencia. Alli el catálogo era una lista de
   productos y achicaba la línea; aquí las cuatro disciplinas SON el
   servicio, y el visitante llega buscando UNA de ellas.

   Dos columnas y no cuatro: a cuatro, los párrafos caían a menos de 30
   caracteres por renglon. A dos, la rejilla se lee como cuatro fichas y no
   como una tabla. */
.sg-discs{list-style:none;margin:var(--e-5) 0 0;padding:0;display:grid;gap:var(--e-5)}
@media (min-width:780px){
  .sg-discs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--e-6)}
}
/* El ícono al lado del cuerpo, no encima: es el mismo reparto que el Director
   pidió para el motivo rotativo de la portada el 17-09. Pista fija de 40 px
   —el lado del lienzo— y el texto en lo que queda. Por debajo de 480 px de
   pantalla el ícono se va: a ese ancho compite con el titular por el renglón
   y no aporta nada que el titular no diga. */
.sg-disc{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}
.sg-disc__ico{display:block;color:var(--acento-fuerte)}
@media (max-width:480px){
  .sg-disc{grid-template-columns:1fr}
  .sg-disc__ico{display:none}
}
.sg-disc__n{margin:0;font-size:var(--txt-xl);line-height:1.2;letter-spacing:-.02em;
  font-weight:800;color:var(--tinta);text-wrap:balance}
.sg-disc__norma{margin:var(--e-1) 0 0}
/* Salud ocupacional va DENTRO de SST, con filete propio y en cuerpo menor:
   es una parte de la gestion del área, no una quinta disciplina. Como quinta
   parecería un servicio médico independiente, que es justo lo que la página
   no puede dar a entender. PLAN-SERVICIOS-INDICE.md §5.2. */
.sg-salud{margin:var(--e-3) 0 0;padding-left:var(--e-3);
  border-left:var(--filete) solid var(--acento-fuerte)}
.sg-salud b{display:block;font-size:var(--txt-m);color:var(--tinta);font-weight:700}
.sg-salud span{display:block;margin-top:var(--e-1);font-size:var(--txt-m);line-height:1.6;
  color:var(--gris-fuerte)}
/* ══ LAS TRES FASES, EN LA BANDA ═══════════════════════════════════════
   El número de fase va en monoespaciada y pequeño, no en cifra grande: en
   Capacitación la cifra grande es el contador, y la regla del catálogo dice
   que cada instrumento aparece una sola vez por página. Aqui 01, 02 y 03 no
   son magnitudes, son orden. */
/* El margen inferior es un SUELO, no una separación: lo que separa a las
   fases del cierre es el margin-top:auto de la tarjeta, que absorbe todo
   el sobrante de la columna. Cuando no sobra nada —y con las fases aquí
   arriba deja de sobrar— auto vale cero y la tarjeta se pegaba a la
   tercera fase. Medido antes de ponerlo: 0 px entre una y otra. */
/* ══ LA ESPINA DE LAS TRES FASES ═══════════════════════════════════════
   Encargo del Director, 17-09: «en ese espacio entre ambas columnas podemos
   poner algún diagrama o íconos, algo que le dé vida a los pasos».

   No es un adorno: es el argumento dibujado. Las tres fases son una
   secuencia, así que llevan una espina vertical con un nodo por fase. Y el
   titular de la banda dice «la tercera no termina», de modo que **la espina
   no termina tampoco**: se desvanece por debajo del tercer nodo en vez de
   cortarse. Lo que el texto afirma, la línea lo hace.

   El desvanecido va en el ::after y no en la propia espina para que el corte
   sea de opacidad y no de longitud: una línea que se acaba dice «fin», una
   que se disuelve dice «sigue». Los nodos son círculos huecos —relleno del
   color de la caja— salvo el tercero, que va macizo: es el que se queda.

   Sin fotografía, sin ícono de repertorio y sin biblioteca: son dos
   pseudoelementos y un degradado. */
.sg-fases{list-style:none;margin:0;padding:0 0 0 var(--e-5);display:grid;gap:var(--e-4);
  position:relative}
.sg-fases::before{content:"";position:absolute;left:7px;top:10px;bottom:0;width:2px;
  background:linear-gradient(to bottom,var(--acento-fuerte) 0,var(--acento-fuerte) 62%,
    transparent 100%)}
.sg-fase{position:relative}
.sg-fase::before{content:"";position:absolute;left:calc(var(--e-5) * -1 + 2px);top:8px;
  width:12px;height:12px;border-radius:50%;background:var(--panel);
  border:2px solid var(--acento-fuerte)}
.sg-fase:last-child::before{background:var(--acento-fuerte)}
@media (max-width:560px){
  .sg-fases{padding-left:var(--e-4)}
  .sg-fase::before{left:calc(var(--e-4) * -1 + 2px)}
}


/* ══ EL CIERRE · CAJA PROPIA, A TODO EL ANCHO ══════════════════════════
   Encargo del Director, 17-09. Ocupa el ancho entero —así recupera la
   maquetación que tiene en la portada, texto a la izquierda y datos a la
   derecha, que es para la que fue escrita y que en una columna de 563 px no
   cabía— pero en CAJA PROPIA y SIN FILETE.

   Lo que la separa del método es el gris que hay entre las dos cajas, que es
   separación de verdad y no una raya encima de dos cosas pegadas. */
/* 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 seccion ya es de dos
   columnas y la caja mide 347, mientras que a 768 px, apilada, mide 700.
   Una media query de ventana no puede distinguir esos dos casos. Medido:
   caja 1440/1280/1100/1024/900/390/320 = 587/516/436/402/347/358/288. */
.sg-cierre{background:var(--panel);padding:var(--e-5);container-type:inline-size}
@media (max-width:640px){.sg-cierre{padding:var(--e-4)}}
/* Y el mismo escalón de relleno en la franja donde la sección YA es de dos
   columnas pero la ventana todavía es estrecha. Ahí la caja se queda en 347
   px (ventana 900) y 402 (ventana 1024); con 64 de relleno a cada lado el
   contenido baja a 219 y 274, y el correo pide 227 incluso achicado. Con 40
   quedan 267 y 322 y entra en las dos: a --txt-m en la primera por la regla
   de contenedor de más abajo, a --txt-l en la segunda. Por encima de 1100 la
   caja pasa de 436 y el relleno grande vuelve solo. */
@media (min-width:900px) and (max-width:1099px){.sg-cierre{padding:var(--e-4)}}
/* Y un escalón más abajo, porque el correo no se parte. A 320 px la página
   tiene 288 de contenido; con 40 px de relleno a cada lado quedaban 208 y
   «informes@eprojectperu.com» mide 227, así que desbordaba 20 px —AA 1.4.10,
   umbral cero—. Con 24 quedan 240 y cabe. Medido, no estimado. */
@media (max-width:560px){
  .sg-cierre{padding:var(--e-3)}
}
/* Y el correo baja un escalón de la escala cuando la CAJA se estrecha, no
   cuando se estrecha la ventana. Medido con width:min-content:
   «informes@eprojectperu.com» a --txt-l son 284 px y no tiene dónde
   partirse. La consulta mide el CONTENIDO de la caja, ya descontado el
   relleno, así que el umbral es el ancho que pide el correo: por debajo de
   284 no cabe y baja a --txt-m, que pide 227. Esto atrapa los dos sitios
   donde la regla de ventana no llegaba: a 900 y 1024 px la sección ya es de
   dos columnas y a la caja le quedan 219 y 274 de contenido, con la ventana
   muy por encima de 560; ahí el correo se salía 65 y 10 px. 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){
  .sg-cierre .ep-contacto__datos dd{font-size:var(--txt-m)}
}
/* Las dos pistas se declaran aquí 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. A 320 px eso empujaba el bloque a 284 px dentro de una
   caja de 240 y desbordaba 4 px. Apiladas por debajo de 900. */
.sg-cierre .ep-contacto{padding:0;border-top:0;align-items:start;
  grid-template-columns:1fr;gap:var(--e-4)}
/* Y NO recupera las dos pistas: al volver a ser una columna de la sección,
   el cierre mide unos 600 px y el reparto 1.3fr/1fr dejaba el correo en 250.
   Apilado ocupa el alto que le sobra a la caja. */
.sg-cierre .ep-contacto__cejilla{margin-bottom:var(--e-3)}
/* Tamaño fijo y sin tope de anchura. El heredado es --tit-l, que es un
   clamp de 34 a 52 px 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. A --tit-m son 34
   y entra en dos. El tope de 16ch del heredado también sale: aquí quien
   manda el ancho es la columna. */
.sg-cierre .ep-contacto__tit{font-size:var(--tit-m);max-width:none}
.sg-cierre .ep-contacto__baj{color:var(--gris-fuerte)}
@media (max-width:560px){.sg-cierre{padding-top:var(--e-3)}}

/* ══ EL QUINTO PUNTO, DENTRO DEL BLOQUE DE LAS CUATRO ══════════════════
   Encargo del Director, 17-09: «la línea de capacitación debería estar en
   el bloque de arriba, a manera de cubrir todos los 4 sistemas». El brochure
   da CINCO puntos para esta línea y el quinto es hoy la línea 02; estaba
   abajo, suelto en la banda, y ahí no completaba nada. Arriba cierra la
   enumeración: las cuatro disciplinas y la puerta a la quinta.

   Ocupa las dos columnas porque no es una quinta disciplina en pie de
   igualdad: es un enlace a otra página, y con el ancho entero se lee como lo
   que es, un pie de la lista y no un elemento más de ella. */
.sg-disc--puente{grid-column:1 / -1}
/* ══ EL PANEL BLANCO · encargo del Director, 21-09 ═════════════════════
   El bloque de servicios —las cuatro disciplinas y el puente a
   capacitaciones— va sobre UN solo panel, como las especialidades de
   Ejecución de proyectos el mismo día: el fondo de la caja de «Hablemos»
   (--panel, gris elevado en oscuro), sin borde, y cada disciplina con su
   filete de acento arriba. Mismos rellenos y la misma pista con mínimo cero,
   que en la hermana hizo falta para la letra grande. */
.sg-discs{background:var(--panel);padding:var(--e-5) var(--e-4);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:780px){
  .sg-discs{padding:var(--e-5);grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:479px){.sg-discs{padding:var(--e-4) var(--e-2)}}
.sg-puente__ver{display:inline-flex;align-items:center;gap:var(--e-1);
  margin-top:var(--e-2);min-height:44px;font-family:var(--f-mono);font-size:var(--mono);
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--acento-fuerte);text-decoration:none}
.sg-puente__ver:hover{color:var(--tinta)}
/* ══ 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. Con la flecha fina al botón le sobraba aire: el relleno baja de --e-4 a --e-3.
   Los botones que no llevaban flecha siguen sin ella. */
.sg-puente__ver svg{width:1em;height:1em;flex:none;transition:transform .2s}
.sg-puente__ver:hover svg,.sg-puente__ver:focus-visible svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.sg-puente__ver svg{transition:none}}
.sg-fase{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}
.sg-fase__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. «Implementación» es una sola palabra de 14 letras: a
   --txt-xl mide 229 px de min-content y la columna de las fases mide 201 a
   900 px de ventana y 168 a 320. Sin partirla se salía 28 px de su caja en
   las dos. El documento declara lang="es", así que la separación es la del
   idioma y no un corte a ciegas; overflow-wrap queda de último recurso para
   una palabra que el diccionario no sepa partir. */
.sg-fase__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}
.sg-fase__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 CRISTAL, LAS TARJETAS QUE SE LEVANTAN Y LOS HITOS · Director, 07-10-2026 ══
   Lo decidió sobre un borrador (BORRADORES/sistemas-gestion-cristal.html), en
   cinco vueltas. Lo que quedó:
   · Las CUATRO tarjetas de disciplina, en cristal. Van sobre el panel blanco,
     así que el cristal se tiñe como en Capacitación: el acento al 9 % en claro
     y el azul de texto al 10 % en oscuro. Y se animan como las tarjetas de
     Servicios de la portada: la raya de arriba se dibuja de izquierda a
     derecha, la tarjeta sube 4 px y gana sombra. Por eso EN REPOSO YA NO
     LLEVAN la raya fija. La quinta, el puente a Capacitaciones (TAR), se queda
     como estaba: «quítale el glass».
   · Las tres fases del método, fichas de cristal (el panel al 45 %).
   · «Ver más», botón redondeado y en azul cristal, como los de la portada.
   · La figura de los hitos, animada: al entrar en pantalla la línea se traza
     de arriba abajo y cada fase aparece a su turno con su punto; el tercero
     —la fase que «no termina»— late tres veces. Al pasar el cursor por una
     fase, su punto se llena. Ocurre UNA vez por carga (lo preguntó y lo
     aprobó así). El latido son tres veces y para: uno sin fin obligaría a
     poner un mando para detenerlo.
   SE PROBARON Y SALIERON: el cristal en la cabecera —el lema, el titular y la
   entrada sobre una ficha— y en la caja «Hablemos».
   Sin guion, o con «menos movimiento», los hitos se ven enteros y quietos
   desde el principio: lo que los esconde exige html[data-js] y movimiento.
   En papel, nada de esto. NO ESTÁ MEDIDO: lo aprobó a la vista. */
@media screen{
  .sg-disc:not(.sg-disc--puente){position:relative;padding:var(--e-2);border-radius:3px;
    border-top-color:transparent;
    background:color-mix(in srgb,var(--acento-fuerte) 9%,transparent);
    backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
    transition:box-shadow .25s ease,background-color .25s ease,transform .25s ease}
  [data-tema=oscuro] .sg-disc:not(.sg-disc--puente){
    background:color-mix(in srgb,var(--azul-texto) 10%,transparent)}
  .sg-disc:not(.sg-disc--puente)::before{content:"";position:absolute;left:0;right:0;
    top:calc(var(--marca) * -1);height:var(--marca);background:var(--acento-fuerte);
    transform:scaleX(0);transform-origin:left center;
    transition:transform .35s cubic-bezier(.4,0,.2,1);pointer-events:none}
  .sg-disc:not(.sg-disc--puente):hover{transform:translateY(-4px);
    box-shadow:0 6px 12px rgba(6,11,39,.18),0 8px 8px -4px rgba(42,43,59,.15);
    background:color-mix(in srgb,var(--acento-fuerte) 14%,transparent)}
  [data-tema=oscuro] .sg-disc:not(.sg-disc--puente):hover{
    background:color-mix(in srgb,var(--azul-texto) 16%,transparent)}
  .sg-disc:not(.sg-disc--puente):hover::before{transform:scaleX(1)}

  .sg-fase{padding:var(--e-2);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)}
  .sg-fase::before{transition:background-color .2s ease,transform .2s ease}
  .sg-fase:hover::before{background:var(--acento-fuerte);transform:scale(1.25)}

  .sg-puente__ver{justify-content:center;padding:0 var(--e-3);border-radius:999px;
    background:color-mix(in srgb,var(--marca-azul-fuerte) 80%,transparent);color:var(--sobre-marca);
    font-family:var(--f-sans);font-size:var(--txt-m);font-weight:600;letter-spacing:normal;
    text-transform:none;
    backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
  .sg-puente__ver:hover{background:var(--marca-azul-fuerte);color:var(--sobre-marca)}

  @media (prefers-reduced-motion:reduce){
    .sg-disc:not(.sg-disc--puente),.sg-disc:not(.sg-disc--puente)::before,
    .sg-fase::before{transition:none}
    .sg-disc:not(.sg-disc--puente):hover,.sg-fase:hover::before{transform:none}
  }
  @media (prefers-reduced-motion:no-preference){
    html[data-js] .sg-fases:not([data-visto])::before{transform:scaleY(0)}
    html[data-js] .sg-fases:not([data-visto]) .sg-fase{opacity:0}
    .sg-fases::before{transform-origin:top center}
    .sg-fases[data-visto]::before{animation:sg-traza 1.4s cubic-bezier(.4,0,.2,1) backwards}
    .sg-fases[data-visto] .sg-fase{animation:sg-entra .5s ease backwards}
    .sg-fases[data-visto] .sg-fase:nth-child(2){animation-delay:.45s}
    .sg-fases[data-visto] .sg-fase:nth-child(3){animation-delay:.9s}
    .sg-fases[data-visto] .sg-fase::before{
      animation:sg-punto .35s cubic-bezier(.3,1.6,.5,1) .1s backwards}
    .sg-fases[data-visto] .sg-fase:nth-child(2)::before{animation-delay:.55s}
    .sg-fases[data-visto] .sg-fase:nth-child(3)::before{
      animation:sg-punto .35s cubic-bezier(.3,1.6,.5,1) 1s backwards,sg-late 1.8s ease-out 1.5s 3}
  }
  @keyframes sg-traza{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes sg-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes sg-punto{from{transform:scale(0)}to{transform:scale(1)}}
  @keyframes sg-late{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--acento-fuerte) 50%,transparent)}
    to{box-shadow:0 0 0 14px transparent}}
}