/* Lo propio de Nosotros (sin D2, sin la letra, sin el parche del cromo).
   Trasladado de la maqueta aprobada (nosotros.html) por
   herramientas/trasladar-nosotros.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}
/* ══ LOS COLORES DE LA FIGURA ══════════════════════════════════════════
   Son los del logotipo, calibrados. Medido sobre el fondo de la página:
   el azul de marca da 4,44 en claro y 3,86 en oscuro y no hay que tocarlo;
   el naranja da 2,33 en claro y el verde 2,59, los dos por debajo del 3
   que exige un gráfico. Así que en claro el naranja usa la variante fuerte
   que la casa ya tiene —3,5— y el verde una propia, oscurecida un 15 %
   hasta 3,7. En oscuro los dos de marca pasan de sobra —7,36 y 6,62— y se
   usan tal cual, que es donde el color de marca se ve mejor. */
:root{--fig-azul:var(--marca-azul);--fig-naranja:var(--marca-naranja-fuerte);
  --fig-verde:#18905a}
[data-tema=oscuro]{--fig-azul:var(--azul-texto);--fig-naranja:var(--marca-naranja);
  --fig-verde:var(--marca-verde)}
/* ══ COMUNES ═══════════════════════════════════════════════════════════ */
.no-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}
.no-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. */
.no-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. */
.no-migas{padding-top:calc(var(--e-2) + 6em)}
.no-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}
/* El separador iba en --linea, que es un color de FILETE, y daba 1,27 en
   claro y 1,51 en oscuro. La estructura de la ruta la sostiene el <ol>, así
   que el daño era cosmético, pero el símbolo está puesto para leerse y es
   texto generado: le toca 4,5, no 3. Se probó --marca-inactiva y se quedó en
   3,34; va en --gris-suave, que da 4,58 y 7,04 y sigue siendo más callado
   que los rótulos de la propia ruta, que van en --gris-fuerte. */
.no-migas li+li::before{content:"/";margin-right:var(--e-1);color:var(--gris-suave)}
.no-migas a{color:var(--gris-fuerte);text-decoration:none;
  display:inline-flex;align-items:center;min-height:24px}
.no-migas a:hover{color:var(--azul-texto-hover);text-decoration:underline}
.no-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. */
.no-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». */
.no-sec--junta{padding-bottom:var(--e-5)}
.no-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. */
.no-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 ... .46  (peor caso medido 1,04× a 1440 oscuro)
       · por debajo ......... .40  (peor caso medido 1,04× a 390 oscuro)

     El tramo ancho bajó de .48 a .46 el 20-09, al subir el contador a la
     columna del texto: la glosa quedó sobre el lavado y a .48 se quedaba en
     4,49 contra 4,5 a 1440 en oscuro. Y NO se arregla subiendo el lavado —se
     probó .52 y salieron ocho fallos en vez de uno—: en esta fotografía más
     lavado no es más contraste, porque el lavado la acerca al fondo por los
     dos lados. Se prueba en los dos sentidos y se mide; no se deduce.

     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.

     **06-10-2026: la fotografía YA NO ES UNA, son cuatro que rotan** —ver «El
     fondo, que rota», más abajo—. Los dos valores no se han tocado, y todo
     lo que este comentario dice de «esta fotografía» vale para la primera,
     que es la de siempre. Las otras tres se midieron sobre la demostración
     con estos mismos valores; sobre esta maqueta, todavía no. */
  --fondo-op:.40}
@media (min-width:641px){.no-cab{--fondo-op:.44}}
.no-cab .ep-fondo{left:0;right:0}
.no-cab__rej{display:grid;gap:var(--e-4)}
@media (min-width:900px){
  .no-cab__rej{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    column-gap:var(--e-5);align-items:start}
}
/* ══ EL FONDO, QUE ROTA ════════════════════════════════════════════════
   Decisión del Director, 06-10-2026. El lavado deja de ser una fotografía
   fija: son CUATRO capas apiladas —la de siempre y las tres que iban
   delante, en el carrusel— y solo se ve la que lleva data-viva. Cambia cada
   6,5 s, que es el ritmo que tenía el carrusel, con un fundido de 1,4 s.

   La marca data-viva de la primera capa la trae el MARCADO, no el guion: si
   el guion no corre, o con «menos movimiento», se ve la primera y nada más,
   que es el fondo de siempre. Regla 3 de LEEME.md.

   La transición heredada de la portada es de background-image; aquí lo que
   cambia es la opacidad, así que se sustituye. Y el lavado NO se toca: las
   capas que no se ven van a opacidad 0 y la viva hereda --fondo-op.

   Medido el 06-10 sobre la demostración (spec, §6): los cinco textos de la
   cabecera × los cuatro fondos × nueve anchos × dos temas, 360 mediciones
   por el peor píxel de fondo bajo cada glifo. Con las cifras en ficha de
   cristal, 0 por debajo del mínimo; el caso más justo es el titular sobre la
   torre, en oscuro y a 641 px: 4,17 contra 3. **Esa medición es de la
   demostración, no de esta maqueta**: hay que repetirla aquí. */
.no-cab .ep-fondo__foto{transition:opacity 1.4s ease}
.no-cab .ep-fondo__foto:not([data-viva]){opacity:0}
@media (prefers-reduced-motion:reduce){.no-cab .ep-fondo__foto{transition:none}}
/* ══ LA ESFERA DE CLIENTES ═════════════════════════════════════════════
   Decisión del Director, 06-10-2026: ocupa el sitio del carrusel de tres
   fotografías, que desaparece con sus reglas y su guion. Los quince
   logotipos del carrusel de la portada, cada uno en un círculo, sobre una
   bola invisible que gira sola, se arrastra y acerca el logotipo señalado.

   Por omisión NO hay esfera: hay quince círculos blancos, quietos, en filas
   centradas. La esfera la enciende el guion con data-vivo, así que si el
   guion no corre no se esconde nada ni se queda nada a medio colocar.

   El círculo mide --d, que pone el guion; sin guion, 120 px. El logotipo va
   en posición absoluta con el ancho y el desplazamiento que el generador
   calculó al medirlo, en porcentajes del círculo: por eso max-width:none,
   porque varios miden más que su círculo y es el recorte redondo el que deja
   ver solo el dibujo. */
.no-esfera{display:flex;flex-direction:column;align-items:center;min-width:0}
.no-esfera__lista{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:12px;max-width:720px}
.no-esfera__disco{position:relative;flex:0 0 auto;width:var(--d,120px);height:var(--d,120px);
  border-radius:50%;overflow:hidden;background:#fff;border:1px solid var(--linea)}
.no-esfera__disco[data-oscura]{background:#121315;border-color:#31353b}
.no-esfera__disco img{position:absolute;display:block;max-width:none}
/* ── Con guion: la bola ────────────────────────────────────────────────
   La lista pasa a ser el lienzo: el guion le pone el alto y coloca cada
   círculo con transform, desde la esquina. touch-action:pan-y deja que el
   dedo en vertical siga desplazando la página; la bola se gira de lado. */
.no-esfera__lista[data-vivo]{display:block;position:relative;width:100%;max-width:none;
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.no-esfera__lista[data-arrastrando]{cursor:grabbing}
/* --velo lo pone el guion: 0 delante, hasta 0,66 en la cara de atrás. Los de
   atrás no se tapan ni desaparecen: se les desvanece el LOGOTIPO y queda el
   cristal, así que se ven a través de la bola. */
.no-esfera__lista[data-vivo] img{pointer-events:none;-webkit-user-drag:none;
  opacity:calc(1 - var(--velo,0) * 1.05)}
/* EL CRISTAL. La receta es la del botón flotante «Menú» de la portada
   —fondo al 45 % y backdrop-filter:blur(14px) saturate(1.4)—, con un filete
   claro y un brillo fino arriba. Pero **el cristal es BLANCO en los dos
   temas**, no --panel como el del botón: varios logotipos son de tinta
   oscura y sobre vidrio oscuro no se leen. Los colores van literales a
   propósito, por eso mismo: no siguen al tema.
   --alza la pone el guion, de 0 a 1, cuando el logotipo se acerca: levanta
   la sombra. */
.no-esfera__lista[data-vivo] .no-esfera__disco{position:absolute;left:0;top:0;
  margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);will-change:transform;--alza:0;
  background:color-mix(in srgb,#fff 45%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid color-mix(in srgb,#fff 62%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),
    0 calc(4px + var(--alza) * 14px) calc(14px + var(--alza) * 30px)
    rgba(8,20,40,calc(.10 + var(--alza) * .22))}
/* En oscuro la sombra es otra: más honda, solo cuando el logotipo se acerca,
   y SIN el brillo de arriba. Así quedó en la demostración que el Director
   aprobó, y así se deja; que en oscuro falte el brillo fino puede no haber
   sido una decisión sino un resto de la versión anterior a la de cristal.
   Queda dicho para cuando la apruebe mirándola en oscuro. */
[data-tema=oscuro] .no-esfera__lista[data-vivo] .no-esfera__disco{
  box-shadow:0 calc(var(--alza) * 14px) calc(var(--alza) * 34px) rgba(0,0,0,calc(var(--alza) * .6))}
/* Zelestra: su logotipo es claro, así que su círculo es de cristal oscuro. */
.no-esfera__lista[data-vivo] .no-esfera__disco[data-oscura]{
  background:color-mix(in srgb,#121315 58%,transparent);border-color:rgba(255,255,255,.16)}
/* Artesco e Inland Energy: sus logotipos son placas de color que llenan el
   círculo, así que el círculo va MACIZO, con el color de la placa —lo trae
   el marcado, medido— y sin filete. Como no hay cristal que quede al
   desvanecer el logotipo, en la cara de atrás se apaga el círculo entero. */
.no-esfera__lista[data-vivo] .no-esfera__disco[data-placa]{opacity:calc(1 - var(--velo,0) * .75)}
/* ══ UN SOLO BOTÓN DE PAUSA ════════════════════════════════════════════
   De icono, redondo y de cristal. Para a la vez la esfera y el fondo: antes
   había un mando por carrusel y aquí lo que se mueve son dos cosas, pero al
   visitante le molesta —o no— el movimiento, no cada pieza por separado.

   Aquí el cristal SÍ sigue al tema (--panel al 45 %, como el botón «Menú»):
   lo que lleva encima es un glifo del sitio, en --tinta, y no un logotipo
   ajeno.

   Nace oculto en el marcado y lo enseña el guion: sin guion no hay nada que
   pausar. Con «menos movimiento» tampoco, y el guion lo vuelve a ocultar.
   El [hidden] se declara porque display:grid le gana al del navegador. */
.no-pausa{display:grid;place-items:center;width:32px;height:32px;margin-top:var(--e-1);
  padding:0;border-radius:50%;color:var(--tinta);border:1px solid var(--linea);
  font:400 var(--mono)/1 var(--f-mono);cursor:pointer;
  background:color-mix(in srgb,var(--panel) 45%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
.no-pausa[hidden]{display:none}
/* El anillo va HACIA DENTRO, como el de los mandos del carrusel que
   sustituye: el botón está sobre la fotografía y un anillo por fuera caería
   encima de ella. **Sin medir sobre los cuatro fondos**: el foco es una de
   las cosas que la spec deja abiertas (§7.6). */
.no-pausa:focus-visible{outline:2px solid var(--acento);outline-offset:-4px}
.no-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. */
/* 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. */
/* 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. */
.no-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. */
/* ══ 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. */
/* Los dos rellenos son del 20-09 y del mismo encargo, en dos tiempos:
   primero «dale espacio para que respire el box blanco de HABLEMOS y no esté
   tan pegado al footer» —el panel del cierre llegaba a TOCAR la franja del
   pie—, y después «que respire más el espacio entre ambos sectores», entre la
   cabecera y las dos cajas. Medido, ese segundo hueco era de **0 px**: los
   paneles arrancaban exactamente donde terminaba la cabecera, y lo único que
   separaba era el relleno interior de cada caja, que no es separación sino
   margen de la caja.
   Arriba y abajo van iguales —104 px por encima de 640, 64 por debajo— para
   que la banda se lea como un bloque suelto entre la cabecera y el pie, y no
   como algo pegado a uno de los dos. */
.no-banda{padding:var(--e-6) 0;color:var(--tinta)}
@media (max-width:640px){.no-banda{padding:var(--e-5) 0}}
/* 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». */
.no-caja{background:transparent;padding:var(--e-5) 0}
@media (max-width:640px){.no-caja{padding:var(--e-4) 0}}

/* Dos clases y un descendiente, 0-3-0, porque más abajo .no-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. */
.no-banda .no-cejilla{color:var(--acento-fuerte)}
/* 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. */
.no-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){
  .no-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. */
.no-banda a:focus-visible{outline:2px solid var(--acento-fuerte);outline-offset:3px}
/* ══ 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. */
/* 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. */
/* ══ 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,.no-banda,.no-cierre,.no-caja,.no-sec,.no-cab{background:#fff;color:#121315}
  .no-cab .ep-fondo{display:none}
  .ep-btn,.ep-btn--solido{background:transparent;color:#121315;
    border:var(--marca) solid #121315}
  /* Las DOS cajas de la banda llevan marco en papel, porque en pantalla las
     dos lo llevan. Una caja que aparece o desaparece al imprimir contradice
     el diseño; lo que se hace aquí es sustituir el fondo —que en papel no se
     imprime— por el filete que lo suple. */
  .no-cierre,.no-caja{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. */
  /* ── LA ESFERA EN PAPEL ────────────────────────────────────────────
     En papel no hay nada que gire ni que pausar: el botón no se imprime y
     los quince logotipos salen QUIETOS Y EN FILAS, que es como se ven sin
     guion. Del fondo no se imprime ninguna de las cuatro fotografías —la
     regla de arriba retira la capa entera—: son decorativas.

     Las reglas llevan los dos selectores, con y sin data-vivo, y varios
     !important, y no es descuido. Ese atributo lo pone el guion, y con él
     van el alto de la lista y el transform de cada círculo ESCRITOS EN EL
     ELEMENTO, que le ganan a cualquier hoja. Sin esto el mismo papel diría
     dos cosas distintas según se imprimiera con el guion corriendo o sin él
     —la lección del carrusel, del 18-09—. El círculo va a 120 px fijos por
     lo mismo: es el tamaño de sin guion, y con guion --d depende de la
     pantalla desde la que se imprime.

     print-color-adjust:exact, porque el navegador no imprime fondos y aquí
     tres círculos DEPENDEN del suyo: Zelestra es un logotipo claro sobre
     círculo oscuro, y sin fondo saldría blanco sobre blanco; las dos placas
     continúan con el suyo el color del logotipo. */
  .no-pausa{display:none}
  .no-esfera__lista,.no-esfera__lista[data-vivo]{display:flex;position:static;width:auto;
    max-width:720px;height:auto!important}
  .no-esfera__lista .no-esfera__disco,
  .no-esfera__lista[data-vivo] .no-esfera__disco{position:relative;left:auto;top:auto;margin:0;
    width:120px;height:120px;transform:none!important;opacity:1!important;
    background:#fff;border:1px solid #c8ccd2;box-shadow:none!important;
    backdrop-filter:none;-webkit-backdrop-filter:none;break-inside:avoid;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .no-esfera__lista .no-esfera__disco[data-oscura],
  .no-esfera__lista[data-vivo] .no-esfera__disco[data-oscura]{background:#121315;
    border-color:#31353b}
  .no-esfera__lista[data-vivo] img{opacity:1}
  /* 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. */
  .no-cab__tit{font-size:var(--tit-m);max-width:42ch}
  .no-cab__tit .solo-lectores{position:static!important;width:auto;height:auto;
    overflow:visible;clip:auto;clip-path:none;white-space:normal;margin:0}
  /* Lo que no se puede partir es cada PIEZA, no el bloque entero: con
     break-inside:avoid sobre .no-cierre —un bloque de unos 600 px— la página
     3 del papel se iba con 552 px en blanco, el 66 % de la hoja, porque el
     panel no cabía en el hueco que quedaba y se empujaba entero a la 4. Es
     el mismo criterio que ya vale para las fichas. */
  .no-cifra,.no-prin__i,.no-cierre .ep-contacto__datos>div,.no-cred{break-inside:avoid}
  .no-banda,.no-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. */
@media (min-width:780px){
}
/* 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. */
@media (max-width:480px){
}
/* 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. */
/* ══ 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. */
@media (max-width:560px){
}


/* ══ 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. */
.no-cierre{background:var(--panel);padding:var(--e-5);container-type:inline-size}
@media (max-width:640px){.no-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){.no-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){
  .no-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){
  .no-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. */
.no-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. */
.no-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. */
.no-cierre .ep-contacto__tit{font-size:var(--tit-m);max-width:none}
.no-cierre .ep-contacto__baj{color:var(--gris-fuerte)}
@media (max-width:560px){.no-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. */
/* 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. */


/* ══ LAS CIFRAS, CON SU GLOSA ══════════════════════════════════════════
   Cuatro en renglón por encima de 900, dos entre 560 y 900, una debajo. La
   cifra en monoespaciada, como en la franja de la portada y en la cabecera de
   Capacitación: así se lee como DATO y no como titular.
   El filete superior en --tinta es el mismo idioma que el contador de la
   línea 02; lo que aquí se añade es el tercer renglón, la glosa, que es la
   condición que el plan le puso a repetir estas cifras. */
/* Dentro de la cabecera y dentro de la columna del texto, debajo de la
   entrada. Van las TRES en fila desde 560, y no en dos columnas ni apiladas:
   medido, apilarlas entre 900 y 1100 —que es donde la columna del texto mide
   427 px— subía la cabecera de 850 a 1.123 px y dejaba media pantalla vacía a
   la derecha, que es justo lo que el Director pidió quitar. En fila son más
   estrechas y la glosa hace cinco renglones, pero la cabecera no crece.
   El aire de abajo lo pone la cabecera. */
.no-cifras{list-style:none;margin:var(--e-5) 0 0;padding:0;display:grid;gap:var(--e-4)}
@media (min-width:560px){.no-cifras{grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--e-3)}}
/* FICHAS DE CRISTAL · decisión del Director, 06-10-2026, después de ver la
   esfera. Cada cifra pasa a ser una ficha: --e-2 de relleno por los cuatro
   lados y el fondo de la receta del botón «Menú». El filete superior se
   queda, y ahora es el borde de arriba de la ficha.
   Aquí el cristal SIGUE AL TEMA —--panel al 45 %—, al revés que en los
   círculos de la esfera: lo que lleva encima es texto del sitio, en --tinta,
   y no un logotipo ajeno de tinta oscura.
   No es solo acabado: con el fondo rotando entre cuatro fotografías, la
   ficha es lo que saca a la glosa de la discusión del contraste. Medido
   sobre la demostración, los fallos pasan de 3 a 0 de 360 (spec, §2.3 bis).
   NO van en cristal las dos cajas del final ni los tres discos de misión,
   visión y valores: están sobre fondo liso y en cristal no cambiarían. */
.no-cifra{padding:var(--e-2);border-top:var(--marca) solid var(--tinta);border-radius:3px;
  background:color-mix(in srgb,var(--panel) 45%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
.no-cifra__v{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}
.no-cifra__q{display:block;margin-top:var(--e-1);font-size:var(--txt-s);line-height:1.5;
  color:var(--tinta)}
/* La glosa iba en gris-fuerte mientras el contador vivía fuera del lavado.
   Desde que subió a la columna del texto, va SOBRE la fotografía lavada, y
   ahí el gris no aguanta: medido sobre el peor píxel del glifo, cae a 2,47 a
   641 en claro y a 3,07 a 1440 en oscuro, contra un mínimo de 4,5 —13 px no
   cuenta como texto grande—. Pasa a --tinta, que es lo mismo que hace el
   renglón de arriba. La jerarquía la sostienen el tamaño y el aire, no el
   color: la cifra va en monoespaciada grande y la glosa es la única frase
   con punto final. */
.no-cifra__g{display:block;margin-top:var(--e-2);font-size:var(--txt-s);line-height:1.6;
  color:var(--tinta)}

/* ══ EL RENGLÓN DE CREDENCIALES ════════════════════════════════════════
   Dejó de ser sección el 18-09 y dejó de estar suelta el 20-09: vive dentro
   del panel de «Hablemos», debajo del botón. En cuerpo pequeño: nombradas, no
   explicadas. El panel es opaco, así que aquí el gris sí aguanta. */
.no-cred{margin:var(--e-4) 0 0;
  font-size:var(--txt-s);line-height:1.7;color:var(--gris-fuerte);max-width:78ch}
.no-cred span{display:block;margin-top:var(--e-1)}

/* ══ EL LOGOTIPO ═══════════════════════════════════════════════════════
   Encargo del Director, 20-09: donde estaban los tres anillos va el logotipo
   completo. Se retiraron los anillos y con ellos su CSS: repetían los mismos
   tres íconos que los discos de abajo y no decían nada más.
   La palabra la dibuja el archivo con «currentColor», así que la pone este
   color: en claro el gris de marca #606062, que es el del logotipo original;
   en oscuro no se puede usar ese gris —queda casi invisible— y va el gris
   claro del tema. Las tres barras llevan sus degradados, y un logotipo está
   exento de la medida de contraste. */
.no-marca{margin:var(--e-4) 0 0;color:#606062}
[data-tema=oscuro] .no-marca{color:var(--gris-fuerte)}
.no-marca__svg{display:block;width:clamp(210px,46cqi,320px);height:auto}

/* ══ EL ANCHO DE LA PÁGINA · SE PROBÓ Y SE DESHIZO ════════════════════
   El 20-09 se topó el contenido de esta pantalla a 1440 px para cerrar la
   franja vacía que queda, en monitores grandes, entre el texto de los
   principios y el panel de «Hablemos» —101 px a 1440, 357 a 1900—. Funcionaba
   y estaba medido, y el Director lo retiró el mismo día: «creo que rompe la
   armonía». Tenía razón — Nosotros quedaba más estrecha que la portada y que
   las tres de servicios, que siguen a sangre, y eso se ve al pasar de una a
   otra.

   **La pantalla vuelve a sangrar, y la franja vacía se queda.** No es un
   olvido: es el precio de que el sitio entero sea a sangre, y arreglarlo aquí
   sola costaba más de lo que valía. Si algún día se acota, se acota el sitio,
   en los cuatro generadores y midiendo los cuatro. Anotado en
   PLAN-NOSOTROS.md §14.

   NO volver a poner aquí un --ancho-maximo sin esa decisión de sitio. */

/* ══ MISIÓN, VISIÓN Y VALORES — AL FINAL, EN SU PROPIO PANEL ═══════════
   Decisión del Director, 18-09. Comparten banda con «Hablemos», que es el
   sitio que les corresponde: ni se esconden ni mandan. El titular va a
   --tit-m y no a --tit-l, que es lo que quiere decir «en pequeño».
   
   **Revisado el 20-09: «podríamos darle más peso».** Se probaron tres formas
   —agrandar y nada más, filete de color por principio, y panel propio— y el
   Director eligió el PANEL, lo retiró un rato después —«quítale el fondo
   blanco»— y lo volvió a pedir al final del mismo día: **«ponle otra vez el
   fondo blanco»**. Queda el panel.

   Hay que decir en voz alta lo que esto significa, porque el CSS de más
   arriba dice lo contrario: la regla del 18-09 —«el método NO va en caja
   blanca, la única caja blanca de la sección es Hablemos»— **queda
   derogada**. La escribió el Director y el Director la levanta. Lo que aquí
   valía —dos cajas iguales dan el mismo peso a la explicación y a la
   llamada— deja de valer desde que misión, visión y valores pesan lo que
   pesan: son la pareja de «Hablemos», no su nota al margen.

   El resto del peso: el cuerpo del texto sube de 16 a 20 px y pasa de
   --gris-fuerte a --tinta, los discos crecen de 60 a 72 y el aire entre
   principios sube a 64 px. El titular NO crece: «en pequeño» sigue en pie. */
.no-caja{container-type:inline-size;background:var(--panel);padding:var(--e-5)}
@media (max-width:640px){.no-caja{padding:var(--e-4)}}
.no-prin__tit{margin:0;font-size:var(--tit-m);line-height:1.1;letter-spacing:-.02em;
  font-weight:800;color:var(--tinta)}
/* Cada principio: disco a la izquierda, rótulo y texto a la derecha. El disco
   lleva el ícono de su anillo, que es lo que ata el texto con la figura de
   arriba — antes lo hacía un filete, y un ícono dice más que una raya. */
.no-prin{margin:var(--e-5) 0 0;display:grid;gap:var(--e-5)}
.no-prin__i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--e-4);
  align-items:center}
.no-prin__disco{width:72px;height:72px;border-radius:50%;
  border:var(--marca) solid currentColor;display:grid;place-items:center}
.no-prin__disco[data-color=azul]{color:var(--fig-azul)}
.no-prin__disco[data-color=naranja]{color:var(--fig-naranja)}
.no-prin__disco[data-color=verde]{color:var(--fig-verde)}
.no-prin__disco .no-prin__ico{width:36px;height:36px}
/* Por debajo de 560 el disco se pone ENCIMA del texto y el cuerpo vuelve a
   16 px. Medido a 390: con el disco al lado, al principio le quedaban 180 px
   de columna y «Servicios personalizados, respaldados por profesionales
   altamente capacitados y experimentados.» hacía SEIS renglones de tres o
   cuatro palabras. El peso que el Director pidió es para la pantalla ancha;
   en el teléfono lo que hace falta es ancho de renglón. */
@media (max-width:560px){
  .no-prin__i{grid-template-columns:minmax(0,1fr);gap:var(--e-2)}
  .no-prin dd{font-size:var(--txt-m);max-width:none}
}
/* EL ÍCONO, DE MARCA DE AGUA · 21-09, aprobado por el Director. Encargo del Director: en el
   teléfono el disco encima del rótulo le quitaba protagonismo al texto. Por
   debajo de 560 el disco sale del flujo, crece, pierde su aro y se queda
   detrás del texto, a la derecha, tenue: el color sigue atando cada
   principio con su anillo de la figura, pero ya no compite con la lectura.
   Es decorativo —aria-hidden— y no cuenta para contraste de texto. */
@media (max-width:560px){
  .no-prin__i{position:relative;isolation:isolate;min-height:120px}
  .no-prin__disco,.no-prin__disco[data-color]{position:absolute;right:0;top:50%;
    transform:translateY(-50%);width:132px;height:132px;border:0;z-index:-1;opacity:.12}
  .no-prin__disco .no-prin__ico{width:132px;height:132px}
  [data-tema=oscuro] .no-prin__disco{opacity:.18}
}

.no-prin dt{font-family:var(--f-mono);font-size:var(--mono);letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;line-height:1;color:var(--acento-fuerte)}
/* El rótulo en tinta, siempre: es texto de 11 px y le tocan 4,5, y ni el
   naranja ni el verde del logotipo llegan ahí sin dejar de parecerse a sí
   mismos. El color lo lleva el disco, que es un gráfico y le basta 3. */
.no-prin dt{color:var(--tinta)}
/* El texto del principio sube a --txt-l y a --tinta el 20-09: es la mitad
   del peso que el Director pidió. Cabe porque el panel es opaco y aquí no
   hay fotografía debajo con la que pelearse. */
.no-prin dd{margin:var(--e-2) 0 0;font-size:var(--txt-l);line-height:1.5;
  color:var(--tinta);max-width:44ch}

/* ══ LA CABECERA, ENTERA EN UNA VISTA ══════════════════════════════════
   Decisión del Director, 06-10-2026: en pantalla de ordenador la primera
   sección tiene que entrar sin desplazar. Solo desde 900 px, que es donde la
   cabecera va en dos columnas, y **sin tocar el tamaño de la letra**:

     · menos aire sobre las migas y arriba y abajo de la sección;
     · la entrada pasa de 34 a 42 caracteres de ancho, y hace seis renglones
       en vez de siete;
     · las cifras se acercan al texto, --e-4 en vez de --e-5;
     · la esfera va centrada en el alto de su columna;
     · el botón de pausa deja de ocupar un renglón propio debajo de la
       esfera y va a la esquina inferior derecha de la columna.

   El resto lo hace el guion, que ajusta el radio de la bola a lo que queda
   de pantalla.

   Va AL FINAL de la hoja y no junto a cada regla, a propósito: tres de las
   seis empatan en especificidad con su regla de base —.no-cab__baj,
   .no-cifras y .no-pausa— y ganan por ir después.

   Por debajo de 900 no entra en una vista ni se pretende: el texto y la
   esfera van uno debajo de la otra. */
@media (min-width:900px){
  .no-migas{padding-top:calc(var(--e-1) + 6em)}
  .no-cab{padding-top:var(--e-3);padding-bottom:var(--e-3)}
  .no-cab__baj{max-width:42ch}
  .no-cifras{margin-top:var(--e-4)}
  .no-esfera{align-self:center;position:relative}
  .no-pausa{position:absolute;right:0;bottom:0;margin:0}
}