/* Los cuatro bloques que la portada añade después del cromo, en su orden. Trasladado de la maqueta aprobada (portada-con-servicios.html) por herramientas/trasladar-portada.mjs. No se edita a mano: se cambia la maqueta y se vuelve a trasladar. */ #servicios{scroll-margin-top:calc(var(--e-3) - var(--e-5) - var(--mono) * 1.5 - var(--e-2))}@media (max-width:640px){#servicios{scroll-margin-top:calc(var(--e-3) - var(--e-4) - var(--mono) * 1.5 - var(--e-2))}}.ep-clientes__cab{flex-wrap:wrap;column-gap:var(--e-3);row-gap:var(--e-1)}.ep-clientes__cab>*{overflow-wrap:break-word} /* ── */ /* ══ EL FONDO DEL HERO · ESPEC-D2 §13.1 · desde gen-comparador.mjs ═══ */ /* El claro se revisó el 03-10-2026 por decisión del Director: la fotografía también de fondo en claro, fundiéndose bajo la barra. El porqué de cada valor, en gen-portada-servicios.mjs y en docs/superpowers/mediciones/2026-10-03-foto-en-el-hero-claro.md */ .ep-fondo__torre,.ep-fondo__trama,.ep-fondo__tinte{display:none} /* El respaldo sin guion (04-10-2026): la PRIMERA lámina por omisión, en hoja y para los dos temas, para que el fondo exista aunque el JavaScript no llegue. El guion la sigue cambiando al rotar: su estilo EN LÍNEA gana siempre a esta regla de hoja. Va aquí y no en la base de D2 —d2-portada-limpia.html, que se traslada tal cual a public/estilos/base.css— porque la base es común a las diez pantallas y esto es sólo de la portada. */ .ep-fondo__foto{background-image:url("/imagenes/portada/lamina-1.webp")} /* El velo de papel del claro: el espejo del tinte azul del oscuro. Con mix-blend-mode:screen ningún píxel de la fotografía puede quedar por debajo de este color, y ese suelo es el que decide el peor píxel de la letra gris. El valor lo fija la flecha ▼ de la barra, que es la letra gris que toca el suelo: con #dfebf6 da 5,16 contra 4,5 de mínimo; con #cfe2f2, 4,70. */ :root{--velo-papel:#dfebf6} /* — claro: muro de papel (la fotografía a sangre bajo un velo de papel) — */ [data-fondo=elegido]:not([data-tema=oscuro]) .ep-fondo__foto{ display:block;opacity:1;filter:contrast(1.28) saturate(.82); -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 74%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,#000 74%,transparent 100%)} [data-fondo=elegido]:not([data-tema=oscuro]) .ep-fondo__tinte{display:block; position:absolute;inset:0;mix-blend-mode:screen;background:var(--velo-papel)} /* El degradado de papel: transparente en la franja de la barra (88 px, que la barra mide 96) para que ahí la fotografía se vea, y 0,34 en el resto, que es donde está el texto pequeño. El color es el de --fondo, #f4f6f8. */ [data-fondo=elegido]:not([data-tema=oscuro]) .ep-fondo::after{content:""; position:absolute;inset:0; background:linear-gradient(to bottom,rgba(244,246,248,0) 0px, rgba(244,246,248,0) 88px,rgba(244,246,248,.28) 220px,rgba(244,246,248,.34) 100%)} /* El marco pierde el canto izquierdo disuelto: disuelto se fundía con una pared que ahora lleva la misma fotografía, que es justo la doble exposición que hay que evitar. Sombra NO, al revés que en oscuro, y por dos medidas: (1) la sombra cae sobre el pie del carrusel —el botón de pausa, gris #5c6168, 18 px por debajo del marco— y le baja el fondo de 230 a 210, con lo que la pausa cae de 5,43 a 4,35 contra 4,5 de mínimo; (2) sobre papel la sombra ACERCA el tono de la pared al del marco y el salto de canto baja de 3,11 a 2,94 (sombra suave) o a 2,44 (sombra a la izquierda). Sin sombra, el salto queda en 3,11 contra los 3,23 de hoy. En oscuro la sombra sí ayuda y por eso se queda. */ [data-fondo=elegido]:not([data-tema=oscuro]) .ep-lamina__marco{ -webkit-mask-image:none;mask-image:none} /* — oscuro: capa azul de marca — */ [data-fondo=elegido][data-tema=oscuro] .ep-fondo__foto{display:block;opacity:1; filter:none;-webkit-mask-image:none;mask-image:none} [data-fondo=elegido][data-tema=oscuro] .ep-fondo__tinte{display:block; position:absolute;inset:0;mix-blend-mode:multiply; background:linear-gradient(100deg,#062f49 0%,#0a4d76 42%,rgba(12,120,180,.72) 100%)} [data-fondo=elegido][data-tema=oscuro] .ep-fondo::after{content:"";position:absolute; inset:0;background:linear-gradient(to right,rgba(4,26,42,.86) 0%, rgba(4,26,42,.62) 46%,rgba(4,26,42,.20) 100%)} [data-fondo=elegido][data-tema=oscuro] .ep-portada{color:#ffffff; --tinta:#ffffff;--gris:#d3e2ee;--gris-fuerte:#e8f1f7;--gris-suave:#bccedd; --acento:#fe8017;--acento-fuerte:#ffa05a;--linea:rgba(255,255,255,.30); --panel:transparent;--fondo:transparent} [data-fondo=elegido][data-tema=oscuro] .ep-dato{border-top-color:rgba(255,255,255,.45)} /* LOS CONTADORES, EN CRISTAL · decisión del Director del 06-10-2026. Las tres cifras del hero pasan a ser fichas de cristal, con la receta del botón flotante «Menú» (base.css: el panel al 45 % y el fondo desenfocado). Lo decidió mirando una demostración de la portada con cristal en cuatro sitios —tarjetas de Servicios, contadores, mandos redondos y carrusel de clientes— y se quedó SOLO con éste. Los otros tres quedan descartados. El relleno es lo que convierte el renglón en ficha: sube el hero 24 px. En el hero oscuro --panel es transparent (cuatro reglas más arriba), así que ahí el cristal desenfoca sin teñir. La legibilidad la midió el Director. */ .ep-dato{padding:var(--e-2);background:color-mix(in srgb,var(--panel) 45%,transparent); backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)} [data-fondo=elegido][data-tema=oscuro] .ep-btn--solido{background:#ffffff; color:#0a4d76;border-color:#ffffff} [data-fondo=elegido][data-tema=oscuro] .ep-btn--solido:hover{background:#c9dceb; border-color:#c9dceb} [data-fondo=elegido][data-tema=oscuro] .ep-btn--contorno{color:#ffffff; border-color:rgba(255,255,255,.7)} [data-fondo=elegido][data-tema=oscuro] .ep-btn--contorno:hover{border-color:#fff; background:rgba(255,255,255,.10)} [data-fondo=elegido][data-tema=oscuro] .ep-lamina__marco{ box-shadow:0 18px 48px rgba(0,0,0,.35)} /* ── LOS MANDOS DEL CARRUSEL, EN OSCURO · auditoría del 05-10-2026 ────── Dos hallazgos del mismo sitio, así que un solo arreglo y una sola medición. (A) EL FONDO DEL BOTÓN DE PAUSA DEJA DE SER TRANSLÚCIDO. Decisión del Director, que descartó el efecto «glass» y eligió lo simple. El botón se dibuja con background:transparent y en el hero oscuro --panel es transparent, así que lo que se veía detrás de su signo era LA FOTOGRAFÍA: el contraste del signo dependía de qué lámina estuviera puesta y a qué ancho. Medido: 3,48 en el peor caso (1920 px, lámina 2) y por debajo de 4,5 en 5 de 48 combinaciones, siempre con las láminas 1 y 2 de 1180 a 1920. Es anterior a esta rama —las mismas cinco cifras salen sobre la maqueta de antes de que entrara la fotografía—, y con fondo sólido deja de depender de la imagen. El color NO es inventado: es #062f49, la primera parada del propio tinte azul de este bloque, doce líneas más arriba. (B) EL ANILLO DE FOCO, DE DOS TRAZOS. El anillo heredado es un solo trazo azul (:where(a,button):focus-visible, base.css). Sobre la fotografía del hero en oscuro daba mediana 2,82-3,39 y peor píxel 1,25-1,33 contra un mínimo de 3: NO es invisible —sobre la parte oscura de la foto se distingue bien—, se pierde A TROZOS, allí donde cruza la franja de tierra clara. Un trazo de un solo color no puede con las dos cosas, y eso ya está medido en esta casa (ver «volver arriba» en parche-cromo.mjs). La solución que aprobó el Director: DOS TRAZOS PEGADOS, uno claro y otro oscuro, para que haya siempre uno que destaque, caiga sobre el cielo o sobre la tierra. El claro va por dentro (box-shadow, pegado al botón) y el oscuro por fuera (outline, con su separación de 2 px). Declarados, los dos trazos contrastan ENTRE SÍ 1:18,9; PINTADOS sobre el hero, 1:10,4, porque la sombra del marco del carrusel cae encima de los mandos y apaga el blanco a rgb(196,196,196) — medido, y es también la razón de que el color del anillo heredado no apareciera nunca en la foto. SÓLO EN OSCURO: en claro el anillo de un trazo llega a 3 en el 100 % de las posiciones del perímetro (mediana 4,57, peor 4,49), y lo que pasa no se toca. */ [data-fondo=elegido][data-tema=oscuro] .ep-lamina__pausa{background:#062f49} [data-fondo=elegido][data-tema=oscuro] .ep-lamina__pausa:focus-visible, [data-fondo=elegido][data-tema=oscuro] .ep-lamina__indices button:focus-visible{ box-shadow:0 0 0 2px #ffffff;outline:2px solid #041a2a;outline-offset:2px} /* ── */ .ep-muro__pista{animation-duration:65s} /* El carrusel de clientes, cuando lo mueve el guion (Director, 07-10-2026). El relleno y el margen que se anulan dejan sitio para que la tarjeta que crece no se recorte, sin mover nada de sitio. */ .ep-muro[data-vivo]{padding:8px 0;margin:-8px 0;cursor:grab;touch-action:pan-y; -webkit-user-select:none;user-select:none} .ep-muro[data-vivo] .ep-muro__pista{animation:none;will-change:transform} .ep-muro[data-vivo] .ep-muro__pausa{bottom:calc(var(--e-2) + 8px)} .ep-muro[data-vivo] img{-webkit-user-drag:none;pointer-events:none} .ep-muro[data-vivo] .ep-muro__tarjeta{transition:transform .25s cubic-bezier(.4,0,.2,1)} .ep-muro[data-arrastra]{cursor:grabbing} /* La tarjeta que se mantiene pulsada crece, con el ratón o con el dedo: en el teléfono no hay cursor que pasar por encima (Director, 08-10-2026). */ .ep-muro[data-vivo] .ep-muro__tarjeta[data-tocada]{transform:scale(1.08);position:relative;z-index:1} @media (hover:hover){ .ep-muro[data-vivo]:not([data-arrastra]) .ep-muro__tarjeta:hover{transform:scale(1.08); position:relative;z-index:1} } .ep-muro__tarjeta img[alt="Artesco"]{max-width:76%;max-height:76%} .ep-muro__tarjeta img[alt="CJR Renewables Perú"]{max-width:109%;max-height:109%} .ep-muro__tarjeta img[alt="Cobra Perú"]{max-width:112%;max-height:112%} .ep-muro__tarjeta img[alt="Hytera"]{max-width:85%;max-height:85%} .ep-muro__tarjeta img[alt="HMF Smart Solutions"]{max-width:78%;max-height:78%} /* ── */ :root .ep-motivos{padding-block:0} :root .ep-serv{padding-block:var(--e-5)} :root .ep-clientes{padding-block:var(--e-5)} :root .ep-contacto{padding-top:var(--e-5);padding-bottom:var(--e-5)} @media (max-width:640px){ :root .ep-serv,:root .ep-clientes{padding-block:var(--e-4)} :root .ep-contacto{padding-top:var(--e-4);padding-bottom:var(--e-4)} .ep-serv > .ep-tiras{display:grid;grid-template-columns:minmax(0,1fr);gap:0} .ep-serv > .ep-tiras > div{grid-area:1/1;opacity:0;transition:opacity 1.2s cubic-bezier(.4,0,.2,1)} .ep-serv > .ep-tiras:not([data-rota]) > div:first-child, .ep-serv > .ep-tiras > div[data-viva]{opacity:var(--tira-op)} } /* LAS TRES LÍNEAS, EN TARJETAS · aprobado el 21-09. Encargo del Director: fondo blanco y que se lean como botones. Misma gramática que las tarjetas de Ejecución de proyectos: --panel, sin borde, la línea de acento se dibuja arriba al pasar o al llegar con el teclado, y la tarjeta se levanta. Hoy solo el botón «Ver más» es pulsable (Director, 29-09); el fondo, la sombra y la elevación de la tarjeta, más abajo en este bloque. */ .ep-linea{padding:var(--e-4);border-top:0} .ep-linea::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--marca); background:var(--acento-fuerte);transform:scaleX(0);transform-origin:left center; transition:transform .35s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:1} .ep-linea:hover::before,.ep-linea:has(.ep-linea__ver:focus-visible)::before{transform:scaleX(1)} .ep-lineas{column-gap:var(--e-3);row-gap:var(--e-3)} @media (max-width:640px){.ep-linea{padding:var(--e-3)}} /* LOS FILETES, A LA MISMA ALTURA · 21-09. Al pasar Ejecución de proyectos a la primera columna, su prueba —la única de dos renglones— dejó el filete de esa tarjeta 18 px más arriba que el de las otras dos (ya pasaba antes en la tercera). Con subgrid, las tres tarjetas comparten sus cuatro renglones —número, nombre, frase, pie—, así que el pie empieza a la misma altura en las tres y el filete queda alineado sin importar cuántos renglones tenga cada texto. «Ver más» se va al fondo del pie. Donde no hay subgrid, se ve como antes. */ @media (min-width:780px){ @supports (grid-template-rows:subgrid){ .ep-linea{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0} .ep-linea__pie{margin-top:0;display:flex;flex-direction:column} .ep-linea__ver{margin-top:auto;align-self:flex-start} } } /* ══ LAS TARJETAS, APROBADAS SOBRE LA DEMOSTRACIÓN · 28 al 30-09 ══════════ Todo lo de aquí abajo salió de la demostración que el Director aprobó (herramientas/demo-mejoras.mjs, secciones 3, 4 y 5 de su hoja) y se comprueba contra ella con «node herramientas/mediciones/contra-la-demo.mjs --bloque=tarjetas»; las cifras propias de esta maqueta, con su método, están en docs/superpowers/mediciones/2026-10-02-tarea-6-tarjetas.md. · Solo el botón es pulsable (Director, 29-09). El título dejó de ser enlace. · El botón es una píldora azul sólida, sin borde, texto blanco, y el blanco se mantiene al pasar el cursor —lo primero que corrigió al verlo—. El azul es --marca-azul, el de marca, no --acento, que es otro tono. Contraste calculado con la fórmula de siempre, calibrada contra los dos anclajes de REGLAS-DEL-SITIO §4 (21,00 y 4,48, exactos): blanco sobre --marca-azul (#0c78b4) = 4,82:1; sobre --marca-azul-fuerte (#08537c, al pasar el cursor) = 8,27:1. Los dos por encima del 4,5 exigido, y es el mismo par ya medido para .ep-btn--solido: no es un color nuevo sin probar. Esas dos cifras vienen del spec (docs/superpowers/specs/ 2026-09-30-mejoras-cromo-y-portada-design.md) y se volvieron a medir sobre esta maqueta, en el navegador y en los dos temas: informe, medida 1. · La tarjeta se eleva: sombra doble, fondo levemente distinto y 4 px. Los valores los midió la demostración en olympiatrust.com el 28-09 (su .modal usa 0 6px 12px rgba(6,11,39,.18) y su .contact-info 0 8px 8px -4px rgba(42,43,59,.15), leídas de su hoja servida; el fondo pálido es el de sus iconos y el de su menú desplegado); aquí NO se han vuelto a medir en su sitio —no se consulta ninguna página ajena desde esta maqueta—, se copian de la demostración y se comprueba que la maqueta calcula lo mismo que ella. Ninguna tarjeta suya junta las tres cosas: esto es una composición con sus valores reales, no una copia. · G1 de la auditoría, GRAVE: ese fondo pálido estaba escrito a mano, sin variante de tema. En oscuro la tarjeta pasaba a casi blanco con el texto también casi blanco: 1,06 de contraste en el título y la frase, 1,56 en el renglón gris, 1,86 en el número, contra 4,5 y 3 exigidos (cifras de la auditoría; el spec recoge el 1,06 en su tabla de hallazgos G1, y el informe de esta tarea recalcula los tres con los colores de antes: 1,06, 1,56 y 1,86, herramientas/mediciones/tarjetas.mjs). Arreglo de raíz con el sistema de temas, no con otro literal: un token nuevo, con el mismo valor de antes en claro y un tono por encima de --panel hacia el texto en oscuro. */ :root{--panel-alzado:rgb(243,246,252)} [data-tema=oscuro]{--panel-alzado:#262a2e} .ep-linea{box-shadow:none;background:var(--panel); transition:box-shadow .25s ease,background-color .25s ease,transform .25s ease} .ep-linea:hover,.ep-linea:has(.ep-linea__ver:focus-visible){ box-shadow:0 6px 12px rgba(6,11,39,.18),0 8px 8px -4px rgba(42,43,59,.15); background:var(--panel-alzado);transform:translateY(-4px)} .ep-linea__ver{ display:inline-flex;align-items:center;justify-content:center;gap:var(--e-1); min-height:44px;padding:0 var(--e-3);border-radius:999px;border:0; background:var(--marca-azul);color:var(--sobre-marca); font-family:var(--f-sans);font-size:var(--txt-m);font-weight:600; letter-spacing:normal;text-transform:none;text-decoration:none; transition:background-color .2s} /* ══ EL CRISTAL DE LA PORTADA · decisión del Director, 07-10-2026 ══════ (1) Los tres «Ver más» de las tarjetas, igual que los demás botones azules del sitio, que desde hoy van en cristal desde el parche del cromo: son botones azules con clase propia y el parche no los alcanza. Al pasar el cursor por la tarjeta vuelven al sólido; esa regla pesa más. (2) La caja de motivos —Know-How, Equipo profesional…—, que el Director señaló en una captura: la receta de los contadores del hero (el panel al 45 %, el fondo desenfocado y --e-2 de relleno). Aquí sí hay algo detrás: las fotografías lavadas de la banda. Su legibilidad no se midió. */ @media screen{ .ep-linea__ver{background:color-mix(in srgb,var(--marca-azul-fuerte) 80%,transparent); backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)} .ep-mline{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)} } .ep-linea:hover .ep-linea__ver, .ep-linea:has(.ep-linea__ver:focus-visible) .ep-linea__ver{ background:var(--marca-azul-fuerte);color:var(--sobre-marca)} .ep-linea__ver:focus-visible{outline:2px solid var(--tinta);outline-offset:2px} @media (prefers-reduced-motion:reduce){ .ep-linea,.ep-linea__ver,.ep-linea h3{transition:none} .ep-linea:hover,.ep-linea:has(.ep-linea__ver:focus-visible){transform:none} } /* ══ AIRE ENTRE LA FRASE Y EL BOTÓN · Director, 30-09 ═════════════════════ «El botón está muy cerca de las letras.» Medido por la demostración antes de tocar nada (herramientas/demo-mejoras.mjs, sección 5): en la tarjeta de Ejecución de proyectos —cuyo renglón gris ocupa tres renglones, uno más que las otras dos— el hueco entre el final del texto y el botón era de 0,00 px (20,8 px en las otras dos). LA PISTA QUE DIO NO ERA LA PALANCA, comprobado por la demostración inyectando la regla en vivo y volviendo a medir en tres valores (16/24/40 px): subir el padding-top del botón es relleno DENTRO del botón —crece de 44 a 48 y a 64 px de alto— y el hueco de delante no cambia ni un pixel; además descentra el texto dentro de la píldora, porque no hay relleno igual abajo. Descartada. LA PALANCA QUE SÍ: un margen inferior en .ep-linea__prueba. El margen cuenta para el reparto de esa fila de la subrejilla —así que crece en las tres tarjetas a la vez— pero no para el rectángulo del párrafo que mide getBoundingClientRect(), así que el hueco medido crece exactamente lo mismo que el margen: 16→16, 24→24, 40→40. Probados los dos candidatos que pidió: con e-4 (40 px) las dos tarjetas cortas se van a 60,8 px de hueco, más que el propio renglón que separan. Con e-3 (24 px) el mínimo garantizado queda igual que los demás huecos ya aprobados del sitio (.ep-lineas usa row-gap:var(--e-3)). Se elige e-3. Va con el mismo alcance que la subrejilla, así que a 390 —donde las tarjetas se apilan y no hay subrejilla— esta regla no aplica y el hueco de hoy no cambia. Sobre esta maqueta, el hueco se mide en el informe, medida 3. */ @media (min-width:780px){ @supports (grid-template-rows:subgrid){ .ep-linea__prueba{margin-bottom:var(--e-3)} } } @media (prefers-reduced-motion:reduce){ .ep-linea,.ep-linea::before{transition:none} /* (el transform:none del hover ya está arriba, en el bloque de reducir movimiento de las tarjetas: aquí se repetía idéntico, Tarea 7, pendiente 2). */ } @media (max-width:640px) and (prefers-reduced-motion:reduce){ .ep-serv > .ep-tiras > div{transition:none} } /* ══ LA FLECHA DEL HERO · Director, 28-09 ════════════════════════════════ Los mismos valores que la demostración aprobada (herramientas/demo-mejoras.mjs, .demo-flecha-*), comparados por el bloque 'bajar' de medidas.mjs; el anillo, el contraste y el recorrido, por herramientas/mediciones/flecha.mjs. Informe: docs/superpowers/mediciones/2026-10-02-tarea-7-flecha-del-hero.md. */ /* position:relative;z-index:1 (Tarea 7, ronda de arreglos 1): la flecha termina donde empieza Servicios y baja 3 px al pasar el cursor o enfocarla; sin capa propia, la banda .ep-serv (más abajo en el documento, position:relative) se pinta encima y se queda con los últimos píxeles del botón. Medido, también en la demostración aprobada: elementFromPoint a 20-23 px del centro devolvía .ep-serv y no el botón (docs/superpowers/mediciones/2026-10-02-tarea-7-flecha-del-hero.md, «Hallazgo»). Solo decide quién se pinta encima: no mueve nada. Declarado en DIFERENCIAS (medidas.mjs, bloque 'bajar'). */ .ep-bajar{position:relative;z-index:1;display:flex;justify-content:center;padding:var(--e-3) 0 0} .ep-bajar__btn{display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:999px;border:var(--borde) solid var(--linea); color:var(--tinta);background:var(--panel);text-decoration:none; transition:transform .2s ease,border-color .2s ease} .ep-bajar__btn:hover,.ep-bajar__btn:focus-visible{border-color:var(--acento); transform:translateY(3px)} /* EL ANILLO VA POR DENTRO (outline-offset NEGATIVO) · 04-10, consecuencia medida del flotado. Hasta el 04-10 era outline-offset:2px, o sea el anillo POR FUERA del botón. Funcionaba porque detrás había la banda lisa de Servicios: medido 4,28:1 en claro y 4,72:1 en oscuro. Al pasar la flecha a flotar sobre el hero, detrás hay FOTOGRAFÍA, y el mismo anillo se derrumbó a 1,00-1,80:1 en los dos temas (320/390/768/1280/1920, las cuatro láminas): por debajo del 3:1 que pide WCAG 2.2 §1.4.11 para un elemento no textual. Un anillo por fuera de un mando que flota no puede cumplir: lo que tiene detrás no se sabe. Por dentro, el anillo se apoya en el fondo opaco del propio botón (--panel) y ya no depende de nada. Es EXACTAMENTE lo que hace su gemelo «volver arriba» (.ep-arriba, outline-offset:-4px en cromo.css), y por el mismo motivo: también flota. Medido en herramientas/mediciones/flecha.mjs §7. */ .ep-bajar__btn:focus-visible{outline:2px solid var(--acento);outline-offset:-4px} @media (prefers-reduced-motion:reduce){ .ep-bajar__btn{transition:none} .ep-bajar__btn:hover,.ep-bajar__btn:focus-visible{transform:none} } /* ── LA FLECHA FLOTA SOBRE EL BORDE DE ABAJO · Director, 04-10 ────────── El fallo que cazó: la flecha que invita a bajar NO SE VE al entrar. Medido sobre el sitio vivo, al cargar y sin desplazar: cae fuera de la primera pantalla en los seis tamaños mirados (28 px fuera a 1920x1080, 94 a 1440x900, 128 a 1366x768, 300 a 390x844). La causa no es que el hero no llene la pantalla: es que la DESBORDA (926 px de hero contra 900 de ventana a 1440), y la flecha va detrás, en la junta con Servicios. Su decisión: que flote sobre el borde inferior mientras estás en el hero y se retire al empezar a bajar. EL MECANISMO YA EXISTÍA, no hace falta ni una línea de JavaScript nueva: es el ESPEJO EXACTO de «volver arriba». El guion de la portada pone data-fijo=si en al pasar de 120 px de desplazamiento y data-fijo=no por debajo (el mismo atributo, el mismo umbral); .ep-arriba aparece con el «si» y la flecha se retira con el «si». Una llega justo cuando la otra se va, y no se tocan: la flecha va centrada y «volver arriba» pegada a la derecha (medido, 12 anchos). COLGADO DE html[data-js]: sin guion no hay data-fijo que valga, así que la flecha se queda EXACTAMENTE como estaba, en el flujo, entre el hero y Servicios. El caso sin guion no empeora (demostrado por identidad de píxeles). left:0;right:0 + el justify-content:center de arriba la centran sin tocar la propiedad transform, que se queda libre para el translateY(3px) del cursor y del foco (dentro de esta hoja no caben acentos graves: va en una plantilla de JS). pointer-events: la banda invisible de lado a lado no puede comerse los clics; solo el botón responde. z-index 45 es el de .ep-arriba y el del mando flotante «MENÚ». */ html[data-js] .ep-bajar{position:fixed;left:0;right:0;bottom:var(--e-3);z-index:45; padding:0;pointer-events:none;opacity:1;visibility:visible;transform:translateY(0); transition:opacity .25s ease,transform .25s ease,visibility .25s} html[data-js][data-fijo=si] .ep-bajar{opacity:0;visibility:hidden;transform:translateY(8px)} html[data-js] .ep-bajar__btn{pointer-events:auto} /* Con el panel del menú abierto, fuera. Es la misma regla que ya tiene el mando flotante «MENÚ» (cromo.css: .ep-nav:has(#panel-nav[data-abierto]) .ep-nav__flotante), y aquí hace falta de verdad: .ep-nav es un contexto de apilado propio (z-index 30), así que el z-index 70 del panel NO alcanza a un elemento de fuera. Medido antes de escribir esta regla: con el panel abierto, elementFromPoint en el centro de la flecha devolvía la flecha, encima del panel. */ html[data-js]:has(#panel-nav[data-abierto]) .ep-bajar{ visibility:hidden;transition:visibility 0s linear .22s} @media (prefers-reduced-motion:reduce){ /* Ni al aparecer ni al retirarse: sin transición (como .ep-arriba) y, además, sin el desplazamiento de 8 px, que aquí sí se puede quitar sin perder nada. */ html[data-js] .ep-bajar, html[data-js][data-fijo=si] .ep-bajar{transition:none;transform:none} } /* ── EN EL MÓVIL NO HAY FLECHA · Director, 04-10 ──────────────────────── La flecha flotante se le echaba encima a los MANDOS del hero en las pantallas estrechas: el botón de pausa del carrusel y el botón «Contacto». Su decisión: que en el móvil no flote. Su razonamiento: en un teléfono nadie necesita una flecha para saber que puede deslizar hacia abajo, y ahí abajo, en el flujo, tampoco servía (quedaba 300 px fuera de la primera pantalla a 390x844). En móvil no se gana nada teniéndola y se pierde un mando tapado. display:none y no «ocultarla»: así no queda ni caja vacía, ni hueco, ni paso del teclado, ni nombre en el árbol de accesibilidad. Sin el @media, la regla .ep-bajar{display:flex} de arriba manda; con él, gana ésta por orden de hoja (misma especificidad, y el @media no suma ninguna). NO cuelga de html[data-js]: el encargo es que en móvil no se muestre «ni flotando ni en el flujo», así que también se va sin guion. Consecuencia medida: sin guion y en móvil, la junta hero↔Servicios pasa de 68 px a 0, que es exactamente lo que ya hace CON guion desde el 04-10. EL UMBRAL ES 760 px, Y ES UNO QUE YA EXISTE, no uno nuevo. El criterio es el ancho por debajo del cual desaparece el solape con un MANDO, y está medido con un barrido de dos dimensiones, 2.347 celdas en cuatro pasadas: · el solape contra un mando llega hasta 712 px de ancho —el botón «Contacto» del hero, de 3,5 x 1,4 px a 44 x 41,7 px, en ventanas de 580 a 680 px de alto—, y desde 720 px NO vuelve a aparecer en ningún alto (21 anchos x 25 altos barridos de 808 a 1920, cero solapes); · los 640 px de la portada —su corte de móvil, el de las tiras de Servicios y del matchMedia del guion— NO alcanzan: dejan vivo el tramo de 648 a 712 px, con lo peor en 648x620 (35,5 x 37,9 px) y 672x620 (23,5 x 44,0 px, el disco entero de alto); · los 760 px son el corte de móvil DEL CROMO (parche-cromo.mjs y base.css: el panel del menú pasa a ocupar todo el ancho, el bloque de contacto baja a una columna, el anillo del aspa se mete por dentro), y la flecha es un mando flotante del cromo —su gemelo «volver arriba» vive en cromo.css—. Cubren los 712 px con 48 px de margen. LO QUE ESTO NO CIERRA: el solape contra TEXTO (el rótulo «Sectores: energía, telecomunicaciones, construcción e industria») sigue vivo por encima del umbral, de 768 a 1408 px de ancho en ventanas bajas. Es otra cosa y sigue en la fila 34 del registro de deudas. Vigilado por herramientas/mediciones/flecha.mjs §10. */ @media (max-width:760px){.ep-bajar{display:none}} /* En papel no hay a dónde bajar, igual que «volver arriba». */ @media print{.ep-bajar{display:none}}