/* Lo propio de Capacitación y certificación (sin D2, sin la letra, sin el parche del cromo).
   Trasladado de la maqueta aprobada (servicios-capacitacion.html) por
   herramientas/trasladar-capacitacion.mjs. No se edita a mano: se cambia la maqueta
   y se vuelve a trasladar. */
:root{--f-mono:'Chivo Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ══ COMUNES ═══════════════════════════════════════════════════════════ */
.cp-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}
.cp-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. */
.cp-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. */
.cp-migas{padding-top:calc(var(--e-2) + 96px)}
.cp-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}
.cp-migas li+li::before{content:"/";margin-right:var(--e-1);color:var(--linea)}
.cp-migas a{color:var(--gris-fuerte);text-decoration:none;
  display:inline-flex;align-items:center;min-height:24px}
.cp-migas a:hover{color:var(--azul-texto-hover);text-decoration:underline}
.cp-migas span{display:inline-flex;align-items:center;min-height:24px}

/* El ritmo de la portada es --e-6 entre secciones, no --e-5. Es una de las
   cinco cosas que delataban la maqueta anterior del índice. */
/* 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. */
.cp-sec{padding:var(--e-5) 0 var(--e-6)}
.cp-tit{margin:0;font-size:var(--tit-m);line-height:1.06;letter-spacing:-.03em;
  font-weight:800;text-wrap:balance}

/* ══ CABECERA ══════════════════════════════════════════════════════════
   La fotografía NO es una lámina con marco ni cruza por debajo del texto:
   ocupa su propio bloque a la derecha, sangra por el canto de la página y su
   borde izquierdo se DISUELVE, con la misma máscara con la que la portada
   funde la foto de su hero. Ni filete, ni caja, ni recuadro.
   Es el sitio que marcó el Director el 17-09. De paso cierra las tres cosas
   que se habían señalado: el hueco entre columnas, el aire de más sobre la
   cejilla —la sección ya no tiene relleno inferior, porque el que separa es
   el --e-6 de la siguiente— y el filete azul, que dejó de tener sentido en
   cuanto la fotografía dejó de ser una lámina aparte.
   **Lo que se pierde, y queda escrito:** el bloque es decorativo y su texto
   alternativo no llega a un lector de pantalla. Es la misma decisión que la
   portada tomó para su hero; si algún día hace falta describir la imagen,
   hay que devolverla al flujo como <img>. */
/* El hero de la portada lleva la misma fotografía dos veces: la lámina, y
   un lavado de esa misma imagen detrás de todo. Aquí igual. El lavado es
   .ep-fondo__foto tal cual —opacidad --fondo-op, filtro --filtro-hero y la
   máscara que disuelve el borde izquierdo y el pie—, heredado de la portada
   sin reescribir una línea. */
/* 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. */
.cp-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 ... .40  (peor caso medido 1,19× a 641-820 oscuro)
       · por debajo ......... .50  (peor caso medido 1,20× a 320 claro)

     **Y sí: el tramo ancho admite MENOS que el estrecho.** No es un error de
     transcripción, y la razón es la que enseñó esta página: entre 641 y 899 px
     el rótulo del contador —«certificados emitidos», 13 px— cae ENCIMA del
     lavado, y por debajo de 641 no. Así que quien pone el techo aquí no es la
     cabecera sino el contador: a 0,48 baja a 4,31 en oscuro y falla, a 0,62 a
     2,92. El primer intento fue 0,62 y lo cazó el barrido completo, no el de
     la cabecera. **El número no lo decide el ancho de la pantalla: lo decide
     qué texto está de pie sobre la fotografía.**

     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 de lo que se
     apoye en ella. Si se cambia cualquiera de las dos cosas, se vuelve a
     medir. */
  --fondo-op:.36}
@media (min-width:641px){.cp-cab{--fondo-op:.40}}
.cp-cab .ep-fondo{left:0;right:0}
.cp-cab__rej{display:grid;gap:var(--e-4)}
@media (min-width:900px){
  .cp-cab__rej{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    column-gap:var(--e-5);align-items:center}
}
/* LA FOTOGRAFÍA ACABA A RAS DE LAS CIFRAS · Director, 12-10-2026, sobre un borrador
   (residuo/BORRADORES/capacitacion-foto-y-cifras.html): «déjame ver cómo se vería con la foto a la
   altura de los contadores». Con las dos columnas centradas, el pie de la fotografía caía a una
   altura distinta en cada ancho —13 px por encima del pie de las cifras a 1905, 80 a 1440, 131 a
   1100—. Ahora las dos columnas se apoyan abajo y los mandos del carrusel salen del flujo y cuelgan
   bajo la fotografía, así que su borde inferior y el de las tres cifras son la misma línea en
   cualquier ancho. La rejilla deja debajo el sitio de los mandos (28 px y su aire). Sólo a dos
   columnas: en una, la fotografía va debajo de las cifras y no hay nada que alinear. */
@media (min-width:900px){
  .cp-cab__rej{margin-bottom:calc(28px + var(--e-2))}
  .cp-cab__rej>div:first-child,.cp-foto{align-self:end}
  .cp-foto__pie{position:absolute;top:100%;left:0;right:0}
}
/* ══ 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 enseña CUATRO caras de la línea: campo,
   gabinete, aula virtual y charla en obra.

   A 16/9 y no a 3/2: las cuatro son apaisadas y anchas —2,27 · 1,67 · 1,89 ·
   2,17— y a 3/2 se les iba un tercio del ancho. 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. */
.cp-foto{margin:0;position:relative;margin-right:calc(var(--pad-pagina) * -1)}
.cp-foto__lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-3)}
.cp-foto__i{aspect-ratio:16/9;overflow:hidden;background:var(--linea)}
.cp-foto__i img{display:block;width:100%;height:100%;object-fit:cover}
.cp-foto__lista[data-carrusel]{gap:0}
.cp-foto__lista[data-carrusel] .cp-foto__i{grid-area:1/1;opacity:0;
  transition:opacity .55s cubic-bezier(.4,0,.2,1)}
.cp-foto__lista[data-carrusel] .cp-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 <head> 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] .cp-foto__lista:not([data-carrusel]) .cp-foto__i:not(:first-child){display:none}
}
@media (prefers-reduced-motion:reduce){
  .cp-foto__lista[data-carrusel] .cp-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. */
.cp-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}
.cp-foto__indices{display:flex;gap:2px}
.cp-foto__indices[hidden],.cp-foto__pausa[hidden]{display:none}
.cp-foto__indices button{width:28px;height:28px;padding:0;cursor:pointer;font:inherit;
  background:transparent;border:0;display:grid;place-items:center}
.cp-foto__indices button::before{content:"";width:16px;height:0;
  border-top:2px solid var(--marca-inactiva);transition:border-color .25s}
.cp-foto__indices button:hover::before{border-top-color:var(--tinta)}
.cp-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. */
.cp-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}
.cp-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. */
.cp-foto__pausa:focus-visible,.cp-foto__indices button:focus-visible{
  outline:2px solid var(--acento-fuerte);outline-offset:-2px}
.cp-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 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. */
.cp-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}

/* ══ MODALIDADES, DENTRO DE LA BANDA ═══════════════════════════════════
   Dejan de ser sección propia y bajan a la columna izquierda del aula, que
   era el hueco más grande que quedaba ahí. Decisión del Director, 17-09.
   Dos bloques sin jerarquía entre ellos: misma anchura, mismo peso.
   Filete fino y no de marca: dentro de la banda el filete naranja de --marca
   lo llevan los dos bloques grandes, y modalidades es un subapartado. Si
   llevara el mismo, la banda tendría cuatro cosas del mismo rango.
   Se retira el enlace «Ver el aula»: apuntaba a la sección donde ahora vive. */
.cp-mods__tit{margin:var(--e-5) 0 0;font-size:var(--txt-xl);line-height:1.2;
  letter-spacing:-.02em;font-weight:800;color:var(--tinta)}
.cp-mods{list-style:none;margin:var(--e-3) 0 0;padding:0;display:grid;gap:var(--e-3)}
@media (min-width:780px){
  .cp-mods{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--e-4)}
}
/* --marca-inactiva y no --linea: modalidades vive dentro de la banda, y la
   banda ES --linea. Un filete de su propio color no existe. */
.cp-mod{padding-top:var(--e-2);border-top:var(--borde) solid var(--marca-inactiva)}
.cp-mod__n{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}
.cp-mod__t{margin:var(--e-2) 0 0;font-size:var(--txt-m);line-height:1.5;
  color:var(--tinta)}

/* ══ LA BANDA DEL AULA ═════════════════════════════════════════════════
   El centro de gravedad de la página. La banda va **en gris**, y el gris lo
   pone --linea: #d4dced en claro y #31353b en oscuro. Ni blanco ni negro, y
   sigue al tema — que es lo que pidió el Director el 17-09, en dos pasos:
   primero que el negro quedara para la vista en oscuro, y luego gris en vez
   de blanco.
   Medido, --linea se separa del fondo de página por 1,27 en claro, contra
   1,06 que daba --panel. Sigue siendo una diferencia de tinte más que de
   contraste, pero a la vista es un escalón claro: la banda se lee como otra
   superficie sin invertirse.
   **--linea nació como color de filete, no de superficie.** Usarlo aquí es
   deliberado —es el único gris de la paleta en esa claridad, y no se inventa
   ninguno— pero tiene una consecuencia: los filetes finos de dentro, que
   eran --linea, desaparecerían sobre su propio color. Pasan a
   --marca-inactiva, que es el gris medio con el que la portada dibuja los
   controles inactivos y que se ve sobre los dos tonos de banda.
   El acento de dentro es --acento-fuerte, azul en claro y naranja en oscuro,
   como el resto de la página.
   A sangre: la sección va fuera de .ep y lleva su propio .ep dentro, igual
   que el pie. */
/* La junta va CORTADA, con sus dos filetes. Se probó fundida —el gris
   disolviéndose en el fondo, como la junta del hero de la portada— y el
   Director la descartó el 17-09: el canto limpio dice mejor dónde empieza y
   dónde acaba la banda. El desvanecido queda anotado en el plan, no en el
   CSS. */
/* ══ 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. */
.cp-aula{margin-top:var(--e-6);color:var(--tinta)}
.cp-aula__col{margin-left:calc(var(--pad-pagina) * -1);
  margin-right:calc(var(--pad-pagina) * -1);
  padding:var(--e-5) var(--pad-pagina)}
.cp-aula__col:first-child{background:var(--panel)}
.cp-aula__col:last-child{background:var(--fondo)}
.cp-aula .cp-cejilla{color:var(--acento-fuerte)}
.cp-aula__tit{margin:0;font-size:var(--tit-l);line-height:1.06;letter-spacing:-.03em;
  font-weight:800;max-width:20ch;text-wrap:balance}

.cp-aula__txt{margin:var(--e-3) 0 0;font-size:var(--txt-l);line-height:1.5;
  color:var(--tinta);max-width:56ch}
/* Las dos formas de verificar pasan al COSTADO del código, no debajo.
   Encargo del Director, 17-09: la tarjeta del QR dejaba un hueco a su
   derecha y la lista caía por debajo, alargando la columna sin motivo. La
   primera pista queda a «auto» —la tarjeta manda su propio ancho— y la
   lista toma lo que sobra.

   El corte es de CONTENEDOR, no de pantalla, y eso no es un capricho: la
   primera versión preguntaba por la pantalla a 900 px y a ese ancho justo
   la página desbordaba 31 px. Ahí la columna mide 328, la tarjeta del QR no
   baja de 247 —se lo impone la dirección web, que va en dos trozos sin
   partir— y a la lista le quedaban 41. Lo que decide si caben dos columnas
   no es el ancho de la ventana sino el de esta columna, así que se pregunta
   por él. Por debajo de 520 px de columna, apiladas. */
.cp-verif{container-type:inline-size;align-content:start}
.cp-verif__rej{display:grid;gap:var(--e-4);grid-template-columns:minmax(0,1fr)}
@container (min-width:500px){
  .cp-verif__rej{grid-template-columns:auto minmax(0,1fr);column-gap:var(--e-4);
    align-items:start}
}
.cp-formas{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-3)}
.cp-forma{padding-top:var(--e-2);border-top:var(--borde) solid var(--marca-inactiva)}
.cp-forma b{display:block;font-size:var(--txt-m);color:var(--tinta)}
.cp-forma span{display:block;margin-top:var(--e-1);font-size:var(--txt-m);line-height:1.6;
  color:var(--gris-fuerte)}

/* El QR va oscuro sobre blanco TAMBIÉN en tema oscuro (PLAN-CAPACITACION
   §8.5): un lector no lee un código invertido con fiabilidad. Por eso estos
   dos valores no son tokens y no cambian con el tema. Los dos existen en la
   paleta —#fff es --sobre-marca y #121315 es --tinta en claro—, pero
   escritos como token se darían la vuelta en oscuro, que es justo lo que no
   puede pasar. */
/* forced-color-adjust:none es lo que cierra la regla de LEEME.md. Sin eso,
   el modo de alto contraste del sistema pasa por encima de los dos literales
   y dibuja el código en negativo —módulos blancos sobre tarjeta negra—, que
   es exactamente lo que muchos lectores no leen. Medido por la auditoría. */
.cp-qr{background:#fff;color:#121315;padding:var(--e-3);display:grid;justify-items:center;
  grid-template-columns:minmax(0,1fr);max-width:100%;box-sizing:border-box;
  gap:var(--e-2);justify-self:start;width:max-content;max-width:100%;
  forced-color-adjust:none;
  /* Canto: sobre el panel blanco del tema claro, una tarjeta blanca sin
     filete no existe. */
  border:var(--borde) solid var(--marca-inactiva)}
/* Pegada al canto interior de su columna, no al borde de la pagina: con
   justify-self:end quedaban 270 px de vacio entre el texto y el codigo, y la
   cabecera se leia como dos cosas sueltas en vez de una. */
@media (min-width:900px){.cp-qr{justify-self:start}}
/* 180 px para 45 modulos: 4 px justos por modulo, que es lo que pide
   crispEdges para que ninguno salga a medio pixel. */
.cp-qr svg{display:block;width:180px;height:180px}
/* La direccion es una sola palabra de 50 caracteres. Dejada a su aire se
   salia de la caja y arrastraba la rejilla entera —275 px de texto en una de
   158, y 41 px de desborde en toda la pagina—; con permiso para partir por
   donde fuera, se cortaba dentro del dominio. Asi que se parte donde se
   tiene que partir: el dominio en un renglon y la ruta en otro, cada uno sin
   partirse, y la tarjeta se ensancha lo que haga falta. */
.cp-qr__url{margin:0;font-family:var(--f-mono);font-size:var(--mono);letter-spacing:.04em;
  color:#121315;text-align:center;line-height:1.6}
.cp-qr__url span{display:block}
/* Letra grande (21-09): «nowrap» sacaba la dirección de la caja —y la caja de
   la pantalla, hasta 140 px—. Sigue partida en sus dos renglones; solo si uno
   no cabe, se corta dentro. Y la rejilla del aula declara su pista con mínimo
   cero, que sin plantilla tomaba el ancho de la caja del QR. */

/* ══ LA BANDA ES UNA SOLA REJILLA, NO DOS APILADAS ═════════════════════
   Pregunta del Director, 17-09: «¿por qué no subiste eso a ese espacio?».
   La respuesta era estructural y vale anotarla. La banda tenía DOS rejillas
   una encima de otra: arriba, titular y Modalidades contra el QR; abajo,
   los dos bloques. Una rejilla no termina hasta que termina su columna más
   alta, así que el bloque de la derecha no podía empezar hasta que
   Modalidades acabara: quedaban unos 330 px de gris muerto a la derecha,
   justo al lado de Modalidades, y no había forma de llenarlos moviendo
   contenido.

   Ahora es UNA rejilla de dos columnas, y cada columna es un flujo normal
   que apila sus bloques. Cada lado avanza a su ritmo y ninguno espera al
   otro. El precio es que los dos filetes de los bloques dejan de estar a la
   misma altura: la banda pasa de leerse por renglones a leerse por
   columnas, que es como ya se lee el catálogo de Servicios. */
/* 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. */
.cp-aula__rej{display:grid;gap:0;grid-template-columns:minmax(0,1fr)}
.cp-aula__col > .cp-bloque{margin-top:var(--e-6)}
.cp-aula__col > .cp-verif + .cp-bloque{margin-top:var(--e-6)}
/* Asimétrica, como todo lo demás. Al 50/50 la segunda columna —cuatro
   líneas— quedaba con el 63 % de aire mientras la primera —un párrafo y
   cinco puntos— iba llena. Era el último resto de »columnas simétricas
   donde la portada compone en asimétrico». */
/* 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){
  .cp-aula__rej{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .cp-aula__col{padding:var(--e-6) var(--e-4)}
  .cp-aula__col:first-child{margin-right:0;padding-left:var(--pad-pagina)}
  /* Sin relleno inferior: la tarjeta de «Hablemos» llega hasta el canto de
     la fila, y como la columna izquierda se estira a esa misma altura, los
     dos blancos acaban en la MISMA línea. Antes el relleno de 104 px dejaba
     una franja blanca a la izquierda por debajo de donde terminaba la
     tarjeta —medido: la tarjeta cerraba en y=2176 y la columna en y=2280—,
     y ese escalón se leía como un descuadre. Encargo del Director, 17-09.
     Solo de 900 para arriba: apiladas no hay nada que alinear. */
  .cp-aula__col:last-child{margin-left:0;padding-right:var(--pad-pagina);
    padding-bottom:0}
}
.cp-bloque{padding-top:var(--e-2);border-top:var(--marca) solid var(--acento-fuerte)}
.cp-bloque h3{margin:0;font-size:var(--txt-xl);line-height:1.2;letter-spacing:-.02em;
  font-weight:800;color:var(--tinta);text-wrap:balance}
.cp-bloque p{margin:var(--e-2) 0 0;font-size:var(--txt-m);line-height:1.6;
  color:var(--gris-fuerte);max-width:52ch}
.cp-puntos{list-style:none;margin:var(--e-3) 0 0;padding:0;display:grid;gap:var(--e-2)}
.cp-puntos li{font-size:var(--txt-m);line-height:1.55;color:var(--gris-fuerte);
  padding-left:var(--e-3);position:relative;max-width:52ch}
.cp-puntos li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:0;
  border-top:var(--marca) solid var(--acento-fuerte)}
.cp-puntos b{color:var(--tinta);font-weight:700}

/* ══ EL CIERRE, DENTRO DE LA BANDA ═════════════════════════════════════
   Encargo del Director, 17-09: «Hablemos» sube a la columna derecha de la
   banda, debajo de Respaldo, y **conserva su fondo actual** —»--fondo«—, así
   que dentro del gris se lee como una tarjeta y no como más banda.

   Todas las reglas llevan DOS clases a propósito. ».cp-bloque h3« es 0-1-1 y
   le ganaría a ».ep-contacto__tit«, que es 0-1-0: es la misma trampa de
   especificidad que ya costó una vuelta con el encabezado de Respaldo y
   otra con el panel del menú. Con ».cp-cierre« delante quedan en 0-2-0.

   La sección hereda su maquetación de la portada —dos columnas de 1.3fr y
   1fr con gap »--e-6«— pensada para el ancho de la página. Aquí vive en una
   columna de unos 536 px, así que se apila. */
/* 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. */
.cp-cierre{margin-top:var(--e-5);background:var(--panel);padding:var(--e-4)}
/* A 320 px la página se iba 19 px de lado, y el culpable era esta caja: la
   dirección de correo mide 227 px y NO se parte, más 40 px de relleno a cada
   lado son 307 contra los 288 que caben. Es el mismo defecto que apareció en
   Sistemas de gestión el 18-09 y por el mismo motivo —un correo es una sola
   palabra—, solo que allí la caja estaba dentro de una columna y hacía falta
   una consulta de contenedor; aquí va a ancho de página y basta con bajar el
   relleno: 227 + 48 = 275 y entra con holgura. El corte va en 360 y no en
   339 —el ancho exacto donde empieza a faltar— para no dejarlo al filo.
   Defecto HEREDADO, no del carrusel: estaba desde que se maquetó la página y
   no salió antes porque la comprobación de desborde miraba la página entera
   y no elemento por elemento. Medido 18-09. */
@media (max-width:360px){ .cp-cierre{padding:var(--e-3)} }
.cp-cierre .ep-contacto__cejilla{margin-bottom:var(--e-3)}
.cp-cierre .ep-contacto{display:block;padding:0;border-top:0}
.cp-cierre .ep-contacto__tit{font-size:var(--tit-m);max-width:none}
.cp-cierre .ep-contacto__baj{margin:var(--e-2) 0 var(--e-3);font-size:var(--txt-m);
  line-height:1.6;color:var(--gris-fuerte);max-width:none}
.cp-cierre .ep-contacto__acc{gap:var(--e-2)}
.cp-cierre .ep-contacto__datos{margin-top:var(--e-4)}
.cp-cierre .ep-contacto__datos dd{font-size:var(--txt-m)}

.cp-aula__acc{margin-top:var(--e-5);display:flex;flex-wrap:wrap;gap:var(--e-2)}
.cp-abtn{display:inline-flex;align-items:center;gap:var(--e-1);min-height:48px;
  padding:0 var(--e-3);font-size:var(--txt-m);font-weight:600;text-decoration:none;
  border:var(--marca) solid var(--acento-fuerte)}
.cp-abtn--solido{background:var(--acento-fuerte);color:var(--sobre-acento)}
.cp-abtn--solido:hover{background:var(--tinta);border-color:var(--tinta);color:var(--panel)}
.cp-abtn--contorno{color:var(--tinta);border-color:var(--marca-inactiva)}
.cp-abtn--contorno:hover{border-color:var(--acento-fuerte);color:var(--acento-fuerte)}
/* ══ 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. Estos dos botones no se estrechan: ya iban más ceñidos.
   Los botones que no llevaban flecha siguen sin ella. */
.cp-abtn svg{width:1em;height:1em;flex:none;transition:transform .2s}
.cp-abtn:hover svg,.cp-abtn:focus-visible svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.cp-abtn svg{transition:none}}
/* 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. */
.cp-aula a:focus-visible{outline:2px solid var(--acento-fuerte);outline-offset:3px}

/* ══ LA FRANJA DE CIFRAS, DENTRO DE LA CABECERA ═══════════════════════
   Deja de ser sección con encabezado propio y sube al hueco que quedaba bajo
   la entrada, en la columna del texto. Decisión del Director, 17-09. Se
   retira el título »El registro de la línea»: tres cifras con su rótulo
   debajo no necesitan que nadie las presente.
   Es el patrón que la portada ya tiene —su franja de cuatro cifras va justo
   debajo del hero—, así que no se inventa nada.
   Van a --cifra-m y no a --tit-l: dentro de la cabecera comparten sitio con
   un titular de 52 px, y a ese tamaño competían con él. Monoespaciada y con
   cifras tabulares, como el contador de la portada (ESPEC-D2 §13.2). */
.cp-reg{list-style:none;margin:var(--e-5) 0 0;padding:0;display:grid;gap:var(--e-3)}
@media (min-width:560px){
  .cp-reg{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--e-3)}
}
.cp-reg li{padding-top:var(--e-2);border-top:var(--marca) solid var(--tinta)}
.cp-reg b{display:block;font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:var(--cifra-m);line-height:1;letter-spacing:-.02em;color:var(--tinta);
  font-weight:700}
/* --tinta y no --gris-fuerte, por la misma trampa de ESPEC-D2 §13.1 que ya
   obligó a subir .cp-cab__baj. Al salir la nota del contador la cabecera
   perdió 60 px de alto, y el lavado de la fotografía —background-size:cover—
   se recortó de nuevo: detrás de «años de capacitaciones ininterrumpidas»
   quedó una zona más clara. Medido a 390 en oscuro: --gris-fuerte daba 4.35
   sobre el peor píxel, y la norma pide 4.5 porque a ese ancho el texto baja
   a 13 px y deja de contar como grande. Con --tinta pasa en los cuatro
   pares. El rótulo sigue distinguiéndose de la cifra por tamaño —13 contra
   32— y por peso —400 contra 700—, que es como ya se distinguen en la
   franja de la portada. */
.cp-reg span{display:block;margin-top:var(--e-1);font-size:var(--txt-s);
  color:var(--tinta);line-height:1.5}

/* ══ RESPALDO, DENTRO DE LA BANDA ══════════════════════════════════════
   Deja de ser sección y baja a la columna derecha del aula, bajo el bloque
   del trabajador. Decisión del Director, 17-09: ahí quedaba el último hueco
   de la banda, y la credencial es lo que respalda la constancia de la que
   habla toda la sección.
   Conserva su filete de credencial —el único de la página— y con él la
   distancia respecto del temario que pedía §4.8: entre los dos no queda
   ninguna sección porque el temario ya no está. */
/* .cp-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:
   .cp-bloque .cp-resp__tit. Puesto como .cp-mods__tit salía a 26 px y pegado
   al párrafo de arriba. */
.cp-bloque .cp-resp__tit{margin:var(--e-5) 0 0;font-size:var(--txt-xl);
  line-height:1.2;letter-spacing:-.02em;font-weight:800;color:var(--tinta)}
.cp-resp__cred{margin:var(--e-3) 0 0;padding-left:var(--e-3);
  border-left:var(--filete) solid var(--acento);
  font-size:var(--txt-m);line-height:1.5;color:var(--tinta);font-weight:600}

/* ══ 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. */
.cp-cli{list-style:none;margin:var(--e-4) 0 0;padding:0;display:grid;gap:var(--e-4)}
@media (min-width:900px){.cp-cli{grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--e-5)}}
.cp-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){
  .cp-cli li{grid-template-columns:160px minmax(0,1fr);column-gap:var(--e-3);
    align-items:start}
  .cp-cli__logo{grid-column:1}
  .cp-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. */
.cp-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}
.cp-cli b{display:block;font-size:var(--txt-l);line-height:1.3;letter-spacing:-.01em;
  color:var(--tinta);font-weight:700}
.cp-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}
.cp-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 ══════════════════════════════════════════════════════════
   Esta es la página del catálogo con más posibilidades de acabar impresa y
   adjuntada a un expediente: su lector es un auditor de homologación. Con la
   configuración por defecto del navegador —fondos desactivados— la banda
   perdía el relleno y conservaba la tinta: medido cuando la banda era
   oscura, el titular salía a 1,15 sobre papel blanco, o sea en blanco.
   Desde que la banda va sobre --panel el tema claro ya imprime bien solo,
   pero el oscuro no: ahí la tinta sigue siendo clara. Así que el bloque se
   queda, y sus dos valores van literales a propósito, como los del QR — el
   papel es blanco en los dos temas. */
@media print{
  .cp-aula,.cp-aula__col,.cp-cierre{background:#fff;color:#121315;border-color:#121315}
  .cp-aula .cp-cejilla,.cp-aula__tit,.cp-aula__txt,.cp-forma b,.cp-forma span,
  .cp-bloque h3,.cp-bloque p,.cp-puntos li,.cp-puntos b,.cp-abtn{color:#121315}
  .cp-bloque,.cp-forma{border-top-color:#121315}
  .cp-puntos li::before{border-top-color:#121315}
  .cp-abtn{background:transparent;border-color:#121315}
  /* ── 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. */
  .cp-foto__pie{display:none}
  /* 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. */
  .cp-foto__lista{gap:0}
  /* Los dos selectores, con y sin el atributo: en pantalla la regla que
     enciende la vista viva es .cp-foto__lista[data-carrusel]
     .cp-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. */
  .cp-foto__lista .cp-foto__i,
  .cp-foto__lista[data-carrusel] .cp-foto__i[data-viva]{grid-area:1/1;opacity:0}
  .cp-foto__lista .cp-foto__i:first-child,
  .cp-foto__lista[data-carrusel] .cp-foto__i:first-child{opacity:1}
  .cp-aula,.cp-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}


/* ══ EL CRISTAL Y LOS BOTONES · decisión del Director, 07-10-2026 ══════
   Lo vio sobre un borrador (BORRADORES/capacitacion-cristal.html), enmarcó
   en verde cinco piezas y las aprobó en cristal, con la receta de los
   contadores de la portada y de Nosotros: el panel al 45 %, el fondo
   desenfocado y --e-2 de relleno. Son las tres cifras de la cabecera, las dos
   modalidades, las dos formas de verificar (juntas), «Pensado para el día de
   la auditoría» y «Respaldo» —estas dos van envueltas en .cp-vidrio, que no
   existía—.
   EN LA COLUMNA BLANCA EL PANEL NO SE VE (blanco sobre blanco): ahí pidió
   «un color que combine con el tema», y es el acento al 9 % en claro y el
   azul de texto al 10 % en oscuro —el naranja del acento oscuro daba un
   marrón que no quiso: «un color azulado tenue»—.
   Los dos botones del aula pasan a redondeados, como los de todo el sitio
   desde el 28-09, y en cristal: el sólido con la receta azul del parche del
   cromo y el de contorno con la del botón «Menú». En papel, nada de esto.
   NO ESTÁ MEDIDO el contraste sobre el cristal: lo aprobó a la vista. */
@media screen{
  .cp-reg li,.cp-mod,.cp-formas,.cp-vidrio{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)}
  .cp-vidrio--resp{margin-top:var(--e-5)}
  .cp-bloque .cp-vidrio--resp .cp-resp__tit{margin-top:0}
  .cp-aula__col:first-child .cp-mod,.cp-aula__col:first-child .cp-vidrio{
    background:color-mix(in srgb,var(--acento-fuerte) 9%,transparent)}
  [data-tema=oscuro] .cp-aula__col:first-child .cp-mod,
  [data-tema=oscuro] .cp-aula__col:first-child .cp-vidrio{
    background:color-mix(in srgb,var(--azul-texto) 10%,transparent)}
  .cp-abtn{border-radius:999px}
  .cp-abtn--solido{background:color-mix(in srgb,var(--marca-azul-fuerte) 80%,transparent);
    border-color:transparent;color:var(--sobre-marca);
    backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
  .cp-abtn--solido:hover{background:var(--marca-azul-fuerte);border-color:transparent;
    color:var(--sobre-marca)}
  .cp-abtn--contorno{background:color-mix(in srgb,var(--panel) 45%,transparent);
    backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
}