/* ============================================================ GEOLAPP 462 · sitio comercial — hoja compartida de las 5 páginas Construido el 8-sep-2026 sobre la maqueta aprobada. Paleta = manual de marca (60-30-10). Mundo único navy, a propósito: igual que el sitio de junio, todos los colores pintados explícitos. ============================================================ */ @font-face { font-family: "Helvena"; src: url("fuentes/helvena-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Helvena"; src: url("fuentes/helvena-600.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Helvena"; src: url("fuentes/helvena-800.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; } :root{ --navy:#001636; --navy-2:#0a2148; --navy-3:#132c58; --blanco:#ffffff; --azul:#0057D6; --azul-hover:#1a6ae0; --azul-claro:#99BCEF; --azul-palido:#CEDDF7; --dorado:#BCBF00; --rojo:#C40000; --tinta-72:rgba(255,255,255,.78); --tinta-55:rgba(255,255,255,.58); --sans:"Helvena",system-ui,"Segoe UI",sans-serif; --mono:"JetBrains Mono","Cascadia Code",ui-monospace,monospace; } *{box-sizing:border-box;margin:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} } body{ background:var(--navy);color:var(--blanco); font-family:var(--sans);font-weight:400;font-size:16.5px;line-height:1.6; -webkit-font-smoothing:antialiased; } a{color:var(--azul-claro)} img{max-width:100%} .contener{max-width:1080px;margin:0 auto;padding:0 24px} .eyebrow{ font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--dorado);display:flex;align-items:center;gap:12px; } .eyebrow::before{content:"";width:26px;height:2px;background:var(--dorado);flex:none} h1{font-weight:800;font-size:clamp(42px,7.2vw,76px);line-height:1.03;letter-spacing:-.015em;text-wrap:balance} h2{font-weight:800;font-size:clamp(28px,4.4vw,44px);line-height:1.12;text-wrap:balance;letter-spacing:-.01em} .sub{color:var(--tinta-72);max-width:62ch} section{padding:88px 0} .btn{ display:inline-block;background:var(--azul);color:var(--blanco);text-decoration:none; font-weight:600;font-size:15px;padding:12px 26px;border-radius:8px;border:1px solid transparent; transition:background .15s; } .btn:hover{background:var(--azul-hover)} .btn:focus-visible,a:focus-visible{outline:2px solid var(--azul-claro);outline-offset:3px} .btn-borde{background:transparent;border-color:var(--navy-3);color:var(--blanco)} .btn-borde:hover{background:var(--navy-2)} /* ---- nav compartida ---- */ nav.sitio{ position:sticky;top:0;z-index:50; background:rgba(0,17,42,.92);backdrop-filter:blur(10px); border-bottom:1px solid var(--navy-3); } .nav-fila{display:flex;align-items:center;gap:26px;padding:14px 0} .nav-logo{height:26px;display:block} .nav-links{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap} .nav-links a{color:var(--tinta-72);text-decoration:none;font-weight:600;font-size:14px} .nav-links a:hover{color:var(--blanco)} .nav-links a.activo{color:var(--blanco);border-bottom:2px solid var(--azul)} .nav-cta{padding:9px 20px;font-size:14px;flex:none;margin-left:auto} .nav-links + .nav-cta{margin-left:0} @media (max-width:840px){ .nav-links{display:none} } /* «Ingresar» (23-sep-2026): la puerta a la app, junto a la acción comercial. Botón de borde y no enlace de texto: no es una página del sitio, y en la fila de enlaces se leería como una más. Va pegado al botón de la derecha (12 px en vez del hueco de 26 de la fila) para que se lean como un par. En pantalla angosta no cabe en la barra —medido a 390 px: logo, botón y menú ya la llenan—, así que ahí vive dentro del menú, separado de las páginas. */ .nav-ingresar{padding:9px 20px;font-size:14px;flex:none} .nav-ingresar + .nav-cta{margin-left:-14px} @media (max-width:840px){ .nav-ingresar{display:none} .nav-ingresar + .nav-cta{margin-left:0} } /* Menú desplegable para pantallas angostas — sin JavaScript (details/summary). Existe porque ocultar .nav-links sin alternativa dejaba el sitio SIN menú en móvil — reportado por Julián el 8-sep mirando el panel del navegador. */ .nav-movil{display:none;position:relative;margin-left:0} @media (max-width:840px){ .nav-movil{display:block} } .nav-movil summary{ list-style:none;cursor:pointer;color:var(--blanco);line-height:1; padding:8px 12px;border:1px solid var(--navy-3);border-radius:8px;font-size:19px; } .nav-movil summary::-webkit-details-marker{display:none} .nav-movil summary:focus-visible{outline:2px solid var(--azul-claro);outline-offset:2px} .nav-movil[open] summary{background:var(--navy-2)} .nav-movil .panel{ position:absolute;right:0;top:calc(100% + 10px);z-index:60; background:var(--navy-2);border:1px solid var(--navy-3);border-radius:10px; padding:10px;display:grid;gap:2px;min-width:200px; box-shadow:0 12px 30px rgba(0,0,0,.4); } .nav-movil .panel a{ display:block;padding:11px 14px;color:var(--tinta-72);text-decoration:none; font-weight:600;font-size:15px;border-radius:7px; } .nav-movil .panel a:hover{background:var(--navy-3);color:var(--blanco)} .nav-movil .panel a.activo{color:var(--blanco);background:rgba(0,87,214,.18)} .nav-movil .panel a.nav-ingresar-movil{color:var(--blanco);margin-top:9px;position:relative} .nav-movil .panel a.nav-ingresar-movil::before{ content:"";position:absolute;left:8px;right:8px;top:-6px;border-top:1px solid var(--navy-3); } /* ---- cabeceras de página interior ---- */ .cabecera{padding:72px 0 8px} .cabecera h1{font-size:clamp(34px,5.6vw,58px);margin-top:18px} .cabecera .sub{margin-top:20px;font-size:clamp(16.5px,2vw,19px)} /* ── El hero: video de recorrido + bodegón de dispositivos (10-sep-2026) ── Reemplaza al hero de tres actos con scroll (el bloque vivía aquí desde el 9-sep; el proceso completo de diseño quedó en Web/propuestas/hero-app/). Sin scroll-reveal ni fotogramas: el fondo ya es un video real en bucle, y una sola vista fija muestra el mensaje "es una app" junto al bodegón — la app en los tres formatos donde se usa (tablero en el monitor, hallazgo en el celular y recorrido en la tablet), con contenido verificado contra el producto real. */ .hero{padding:40px 0} /* 1240 y no los 1080 del resto de la página: es el ancho de la muestra aprobada (Web/propuestas/hero-app/muestra.html). Con 1080, en una pantalla de 1240 px o más el bodegón salía un 24 % más chico que en ella. */ .hero .contener{max-width:1240px} .hero-muestra{ position:relative;overflow:hidden;border-radius:22px; min-height:660px;display:flex;align-items:center;background:var(--navy); } .hero-muestra .fondo{position:absolute;inset:0} .hero-muestra .fondo video{width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block} /* El velo se cierra un punto más del lado del texto: con el titular a dos líneas y en dorado, la tipografía competía con el video. */ .hero-muestra .velo{ position:absolute;inset:0; background: linear-gradient(100deg, rgba(0,22,54,.97) 4%, rgba(0,22,54,.9) 34%, rgba(0,22,54,.6) 58%, rgba(0,22,54,.8) 100%), linear-gradient(0deg, rgba(0,10,28,.55) 0%, transparent 42%, transparent 70%, rgba(0,10,28,.4) 100%); } .hero-contenido{ position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,450px) minmax(0,1fr); gap:32px;align-items:center;width:100%;padding:68px 36px 68px 60px; } .hero-texto{max-width:none;margin:0;text-align:left} .hero-texto .eyebrow{margin-bottom:0;justify-content:flex-start} .hero-texto h1{font-size:clamp(32px,4.2vw,52px);line-height:1.08;margin-top:18px;max-width:none;letter-spacing:0} /* La segunda mitad del titular, en dorado: es la promesa, no el sujeto. */ .hero-texto h1 .acento{color:var(--dorado)} .hero-texto .app-linea{margin-top:20px;font-size:18.5px;line-height:1.5;color:var(--azul-palido);max-width:44ch} .hero-texto .app-linea b{color:var(--blanco);font-weight:600} .hero-ctas{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-start} .hero-coords{ margin-top:38px;display:flex;gap:28px;flex-wrap:wrap;justify-content:flex-start; font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-55); } /* Los tres hechos del hero, en pastillas. Sustituyen a «Evidencia · Gestión · Expansión», que era vocabulario de adentro: no le decía nada a quien entra por primera vez. */ .hero-hechos{gap:10px;margin-top:32px} .hero-hechos span{ border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 14px; color:rgba(255,255,255,.82);letter-spacing:.1em; } /* ── El bodegón de dispositivos ── Rótulos, umbrales de severidad, formato de ID y proporciones del reparto de severidad verificados contra el producto real (dev + tablero operativo) el 10-sep-2026. Los números del tablero son ilustrativos — los contratos de prueba todavía no tienen hallazgos reales —, pero la estructura, los títulos y las proporciones sí son las reales. La composición está medida del boceto de Julián, en cuadritos de la hoja (1 cuadro = 36,36 px de la escena): el monitor arriba con su pie; el celular en la esquina inferior izquierda y la tablet en la derecha, rectos, montados sobre el monitor y sobresaliendo de él, con la base en la misma línea que el pie. Dos ajustes suyos sobre el boceto: la tablet en 4:3 con el alto del celular, y el pie centrado bajo la pantalla. La escena se dibuja SIEMPRE a 705 x 385 y se escala entera al ancho de la columna (--k lo pone el script que va pegado al bodegón en index.html): así las proporciones no cambian con el ancho de la ventana, y el contenido de cada pantalla ni se desborda ni deja huecos. */ .bodegon{position:relative;width:100%;aspect-ratio:705/385} /* line-height:normal porque la página hereda 1,6 del body y las pantallas se midieron con el alto de línea normal: con 1,6, los textos que no fijan el suyo crecen y descuadran el lienzo. */ .escena{position:absolute;left:0;top:0;width:705px;height:385px;transform-origin:0 0;transform:scale(var(--k,1));line-height:normal} .dispositivo{ position:absolute;background:var(--navy-2);border:1px solid rgba(255,255,255,.14); box-shadow:0 24px 48px -12px rgba(0,8,24,.65), 0 6px 16px rgba(0,8,24,.4); overflow:hidden; } .pantalla{position:absolute;background:var(--navy);overflow:hidden} /* Cada pantalla se diseña a un tamaño fijo (el ancho del lienzo) y se escala para llenar el hueco exacto: el contenido ocupa la pantalla completa, de borde a borde, sin espacio vacío. */ .lienzo{ position:absolute;left:0;top:0; width:calc(100% / var(--s));height:calc(100% / var(--s)); transform:scale(var(--s));transform-origin:0 0; display:flex;flex-direction:column; } /* monitor: arriba — el tablero operativo */ .monitor{left:58px;top:0;width:560px;height:298px;border-radius:12px;z-index:1} .monitor .pantalla{inset:9px;border-radius:5px} .monitor .lienzo{--s:1.31707} /* Centro del monitor: 58 + 560/2 = 338; el pie (124 de ancho) empieza en 338 - 62. */ .pie-monitor{position:absolute;left:276px;top:292px;width:124px;height:93px;z-index:0;overflow:visible;filter:drop-shadow(0 10px 12px rgba(0,8,24,.55))} /* celular: abajo a la izquierda — nuevo hallazgo */ .celular{left:0;top:207px;width:116px;height:178px;border-radius:18px;z-index:3} .celular .pantalla{inset:6px;border-radius:13px} .celular .lienzo{--s:.6375} /* tablet: abajo a la derecha — el recorrido. 4:3 con el alto del celular; conserva el borde derecho del boceto (705). Pantalla 223 x 164 sobre un lienzo de 280 de ancho. */ .tablet{left:468px;top:207px;width:237px;height:178px;border-radius:12px;z-index:3} .tablet .pantalla{inset:6px;border-radius:7px} .tablet .lienzo{--s:.79643} .barra-mini{flex:none;display:flex;align-items:center;gap:6px;padding:7px 9px;font-family:var(--mono);font-size:7px;line-height:1.2;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-55);border-bottom:1px solid var(--navy-3);white-space:nowrap} .barra-mini .g{width:11px;height:11px;border-radius:4px;background:var(--azul);flex:none} /* ---- tablero operativo (monitor) ---- */ .tablero-real{flex:1;min-height:0;padding:8px;display:flex;flex-direction:column;gap:6px} .tablero-stats{flex:none;display:grid;grid-template-columns:repeat(6,1fr);gap:4px} .tablero-stats .stat{background:var(--navy-3);border-radius:6px;padding:5px} .tablero-stats .stat b{display:block;font-size:12.5px;font-weight:800;color:var(--blanco);line-height:1.1} .tablero-stats .stat b.dorado{color:var(--dorado)} .tablero-stats .stat b.azul-claro{color:var(--azul-claro)} .tablero-stats .stat b.rojo{color:#E24B4A} .tablero-stats .stat b.verde{color:#a8d66b} .tablero-stats .stat span{display:block;margin-top:2px;font-family:var(--mono);font-size:5.2px;letter-spacing:.03em;text-transform:uppercase;color:var(--tinta-55);line-height:1.25} .tablero-graficos{flex:1;min-height:0;display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:minmax(0,1fr) auto;gap:6px} .tablero-panel{background:var(--navy-3);border-radius:8px;padding:7px;display:flex;flex-direction:column;min-height:0} .tablero-panel.ancho{grid-column:1/-1} .tablero-panel .titulo-mini{flex:none;font-family:var(--mono);font-size:6px;line-height:1.2;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-55);margin-bottom:5px} .barras-real{flex:1;min-height:0;display:flex;align-items:flex-end;gap:4px} .barras-real i{flex:1;border-radius:2px 2px 0 0} .torta-real{flex:1;min-height:0;display:flex;align-items:center;gap:7px} .torta-real svg{width:48px;height:48px;flex:none} .torta-leyenda{display:flex;flex-direction:column;gap:2.5px} .torta-leyenda div{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:5.3px;color:var(--tinta-72);white-space:nowrap} .torta-leyenda span{width:5px;height:5px;border-radius:50%;flex:none} .barra-apilada{display:flex;height:9px;border-radius:5px;overflow:hidden;margin-top:1px} .apilada-cifras{display:flex;gap:9px;margin-top:5px;font-family:var(--mono);font-size:5.3px;line-height:1.2;letter-spacing:.02em} /* ---- nuevo hallazgo (celular) ---- */ .hallazgo-real{flex:1;min-height:0;padding:7px;display:flex;flex-direction:column;gap:4px} .hallazgo-real .titulo-h{flex:none;font-weight:800;font-size:12px;line-height:1.15;color:var(--blanco)} .hallazgo-real .id-h{flex:none;font-family:var(--mono);font-size:5.5px;line-height:1.2;color:var(--tinta-55);letter-spacing:.03em} /* .sev-horas (no .horas): el sitio ya tiene un .horas propio (bloque de "antes/después" en #tiempo-dinero) -- con ese nombre heredaba su margin-top:46px y display:grid en las propiedades que esta regla no fijaba, e inflaba cada tarjeta a ~70px sin que nada lo explicara a simple vista. */ .sev-card{flex:none;display:flex;align-items:center;gap:5px;background:var(--navy-3);border-radius:6px;padding:4px 6px;border:1px solid transparent} .sev-card.activa{border-color:rgba(196,0,0,.5);background:rgba(196,0,0,.14)} .sev-card .punto{width:7px;height:7px;border-radius:50%;flex:none} .sev-card .info{flex:1;min-width:0} .sev-card .info b{display:block;font-size:8px;line-height:1.2;color:var(--blanco);font-weight:600} .sev-card .info span{display:block;font-size:5.5px;color:var(--tinta-55);line-height:1.15} .sev-card .sev-horas{font-family:var(--mono);font-size:7px;color:var(--tinta-72);flex:none} /* La foto toma todo el alto que sobra: sin hueco debajo y sin empujar el campo de ID fuera de la pantalla. */ .evidencia-real{flex:1;min-height:40px;margin-top:1px;border-radius:7px;overflow:hidden;position:relative;background:var(--navy-3)} .evidencia-real img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block} .evidencia-real .sello{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(0,8,24,.85),rgba(0,8,24,.1));padding:10px 5px 3px;font-family:var(--mono);font-size:4.6px;color:var(--blanco);letter-spacing:.02em;line-height:1.3} .evidencia-real .chip-ok{position:absolute;top:4px;right:4px;background:rgba(99,153,34,.85);color:var(--blanco);font-family:var(--mono);font-size:4.6px;letter-spacing:.05em;text-transform:uppercase;padding:1.5px 4px;border-radius:999px} .campo-real{flex:none} .campo-real .rotulo{font-family:var(--mono);font-size:5.5px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-55)} .campo-real .caja{margin-top:2px;height:15px;border-radius:5px;background:var(--navy-3);border:1px solid var(--navy-3);display:flex;align-items:center;padding:0 6px;font-size:6.4px;color:var(--tinta-55)} /* ---- recorrido / trayecto (tablet) ---- */ .trayecto-real{flex:1;min-height:0;padding:7px;display:flex;flex-direction:column;gap:5px} .cab-recorrido{flex:none;display:flex;align-items:center;justify-content:space-between} .trayecto-real .titulo-h{font-weight:800;font-size:11px;line-height:1.2;color:var(--blanco)} .badge-fin{font-family:var(--mono);font-size:5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 5px;border-radius:999px;background:rgba(99,153,34,.22);color:#a8d66b;white-space:nowrap} .trayecto-real .subrotulo{flex:none;font-family:var(--mono);font-size:6px;line-height:1.2;color:var(--tinta-55)} .trayecto-stats{flex:none;display:flex;gap:10px} .trayecto-stats div{font-size:5.5px;line-height:1.2;color:var(--tinta-55);text-transform:uppercase;letter-spacing:.04em;font-family:var(--mono)} .trayecto-stats b{display:block;font-size:10px;line-height:1.15;color:var(--blanco);font-weight:800;font-family:var(--sans);text-transform:none;letter-spacing:0} /* La textura la pide este CSS y no una página, así que sellar-recursos.py no la sella: es inmutable por nombre (si cambia el dibujo, cambia el nombre). Está hecha a la proporción de este mapa (2,34) y con la calle trazada por los mismos puntos que la línea y los pines. */ .trayecto-mapa{flex:1;min-height:0;position:relative;border-radius:6px;overflow:hidden;background:#0a2148 url("img/mapa-tablet-navy.jpg") center/100% 100%} .trayecto-mapa svg{position:absolute;inset:0;width:100%;height:100%} .trayecto-mapa .punto-ruta{position:absolute;width:6px;height:6px;border-radius:50%;background:#E24B4A;border:1.5px solid #fff;transform:translate(-50%,-50%)} /* A y B: mismos colores y forma que el mapa real de recorridos (mapa_recorridos_page.js / MapaPuntos.tsx) — azul de marca para el inicio, rojo para el fin, círculo con la letra adentro. */ .trayecto-mapa .punto-inicio,.trayecto-mapa .punto-fin{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid #fff;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:800;font-size:7px;color:#fff;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.4)} .trayecto-mapa .punto-inicio{background:var(--azul)} .trayecto-mapa .punto-fin{background:#C40000} @media (max-width:900px){ .hero-contenido{grid-template-columns:minmax(0,1fr);padding:44px 28px} .bodegon{margin-top:8px} } /* La ficha de evidencia: el mundo del producto, no una ilustración */ .ficha{ background:linear-gradient(160deg,#0b2350,#071b3f 55%,#06183a); border:1px solid var(--navy-3);border-radius:16px;overflow:hidden; box-shadow:0 30px 60px -25px rgba(0,10,40,.8), inset 0 1px 0 rgba(255,255,255,.07); } .ficha-cab{ display:flex;justify-content:space-between;align-items:center;gap:12px; padding:14px 20px;border-bottom:1px solid var(--navy-3); font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--azul-palido); } .punto-vivo{display:inline-flex;align-items:center;gap:8px;color:var(--dorado)} .punto-vivo i{width:8px;height:8px;border-radius:50%;background:var(--dorado);animation:latir 1.6s ease-in-out infinite} @keyframes latir{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}} .ficha-traza{display:block;width:100%;height:auto;background:#04122c} .ficha-traza .camino{ fill:none;stroke:var(--azul);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:640;stroke-dashoffset:640;animation:trazar 7s ease-in-out infinite; } .ficha-traza .camino-guia{fill:none;stroke:rgba(153,188,239,.16);stroke-width:2.5} .ficha-traza .poste{fill:rgba(153,188,239,.4)} .ficha-traza .hallazgo{fill:var(--dorado);animation:latir 2.2s ease-in-out infinite} @keyframes trazar{0%{stroke-dashoffset:640}55%,72%{stroke-dashoffset:0;opacity:1}86%,100%{stroke-dashoffset:0;opacity:0}} .ficha-datos{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--navy-3)} .ficha-datos > div{background:transparent;padding:13px 20px} .ficha-datos{background:transparent;border-top:1px solid var(--navy-3)} .ficha-datos > div + div{border-left:1px solid var(--navy-3)} .ficha-datos > div:nth-child(n+3){border-top:1px solid var(--navy-3)} .ficha-datos .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-55)} .ficha-datos .v{margin-top:4px;font-weight:600;font-size:14.5px;font-variant-numeric:tabular-nums} .ficha-pie{ padding:14px 20px;border-top:1px solid var(--navy-3); font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--azul-palido); } /* ---- movimiento: cascadas al entrar en pantalla ---- Progresivo: sin JavaScript nada se oculta (la clase .anima la pone motor.js), y prefers-reduced-motion lo apaga entero desde la regla global de arriba. */ .anima [data-reveal]{opacity:0;transform:translateY(18px)} .anima [data-reveal].visto{ opacity:1;transform:none; transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0) * 90ms); } @media (prefers-reduced-motion: reduce){ .anima [data-reveal]{opacity:1;transform:none} } /* ---- táctil y hover (motion 6, en CSS puro) ---- */ .btn{transition:background .18s, transform .18s cubic-bezier(.16,1,.3,1), box-shadow .25s} .btn:hover{box-shadow:0 10px 24px -10px rgba(0,87,214,.55)} .btn:active{transform:translateY(1px) scale(.98)} .plan,.tramo,.frente,.par{transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s} .plan:hover,.tramo:hover{transform:translateY(-3px);border-color:#1d3a6e;box-shadow:0 18px 40px -20px rgba(0,10,40,.7)} .paso-texto .num{transition:color .25s} .paso:hover .num{color:var(--dorado)} /* botón del menú angosto: icono SVG, no carácter */ .nav-movil summary svg{display:block} /* ---- el problema ---- */ /* ---- el problema · composición C, «la conclusión primero» (9-sep-2026) ---- Elegida por Julián entre cuatro propuestas. Invierte el orden de lectura: la frase que antes remataba pasa a mandar, y los tres momentos quedan a la derecha como la ficha que la sostiene. Así lo único que se recuerda va de primero y los tres momentos dejan de competir entre sí. El

sigue siendo el

: cambia de tamaño, no de papel en el documento. La frase grande es un

, no un encabezado. */ .problema-c{ display:grid;grid-template-columns:1.55fr 1fr;gap:0 72px;align-items:start; grid-template-areas:"texto ficha" "cierre ficha"; } .problema-c > .texto{grid-area:texto} .problema-c > .ficha-problema{grid-area:ficha} .problema-c > .problema-cierre{grid-area:cierre} .problema-c .antetitulo{ font-weight:600;font-size:clamp(17px,1.9vw,21px);line-height:1.35; letter-spacing:0;color:var(--azul-claro);max-width:26ch;margin-top:18px; } .problema-c .grande{ font-weight:800;font-size:clamp(30px,4.6vw,54px);line-height:1.06; letter-spacing:-.02em;margin-top:22px;text-wrap:balance; } /* El segundo tramo en azul claro: separa la afirmación de su consecuencia sin una sola palabra de más. */ .problema-c .grande em{font-style:normal;color:var(--azul-claro)} .problema-c .barra-corta{width:96px;height:4px;background:var(--azul);margin:30px 0 26px} .problema-c .problema-cierre{margin-top:0;max-width:52ch} /* La ficha: filete azul arriba y filas separadas por línea. Sin tarjeta — el cambio de densidad ya la distingue de la columna de al lado. */ .ficha-problema{border-top:2px solid var(--azul);padding-top:8px} .ficha-problema .fila{padding:18px 0;border-bottom:1px solid var(--navy-3)} .ficha-problema .num{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;color:var(--dorado)} .ficha-problema h3{font-weight:600;font-size:16.5px;margin:6px 0 6px} .ficha-problema p{color:var(--tinta-72);font-size:14px} @media (max-width:900px){ .problema-c{grid-template-columns:1fr;grid-template-areas:"texto" "ficha" "cierre"} .problema-c .ficha-problema{margin-top:30px} .problema-c .problema-cierre{margin-top:34px;max-width:62ch} } @media (max-width:600px){ .ficha-problema .num{font-size:12px} .ficha-problema p{font-size:14.5px} } .ancla{ margin-top:56px;border-left:3px solid var(--dorado);padding:6px 0 6px 26px; font-weight:800;font-size:clamp(22px,3.2vw,30px);line-height:1.25;max-width:26em;text-wrap:balance; } .problema-cierre{margin-top:30px;color:var(--tinta-72);max-width:62ch} .problema-cierre strong{color:var(--blanco)} /* ---- el ciclo (inicio) · cada paso con su foto ---------------------- Dos decisiones que conviene no deshacer sin releer esto: 1. EL TEXTO VA APARTE DE LA FOTO, no encima. Las cinco fotos ya llevan texto propio —la ficha de la luminaria, la bandeja de notificaciones, el mapa del tablero—, así que superponer el texto del sitio dejaba dos capas compitiendo y ninguna legible. Aparte, cada párrafo cae sobre navy sólido: el contraste está garantizado siempre, sin depender de qué zona de la foto quede detrás. 2. LA FOTO NO MANDA LA ALTURA, la manda el texto. La foto se posiciona absoluta dentro de su celda y llena con `cover`, así que NUNCA sobra espacio ni salen franjas — que fue exactamente el defecto de Recorre cuando el contenedor se dimensionaba por la proporción de la imagen. Por eso `.paso-foto` no lleva alto propio en escritorio: lo hereda de la fila, y la fila la estira el texto. */ .ciclo{ margin-top:48px;display:flex;flex-direction:column;gap:1px; background:var(--navy-3);border:1px solid var(--navy-3); border-radius:14px;overflow:hidden; } .paso{ display:grid;grid-template-columns:1.04fr .96fr;gap:1px; background:var(--navy-3); min-height:clamp(300px, 31vw, 372px); } /* Zig-zag: en las filas pares la foto pasa a la derecha. El orden del DOM no cambia (la foto siempre precede a su texto, que es como debe leerse sin hoja de estilos y como lo anuncia un lector de pantalla). Las proporciones se invierten con ella: si no, la columna ancha se queda siempre a la izquierda y la foto de las filas pares sale 41px más estrecha que la de las impares — medido. La foto manda el lado ancho en las cinco. */ .paso:nth-child(even){grid-template-columns:.96fr 1.04fr} .paso:nth-child(even) .paso-foto{order:2} .paso-foto{position:relative;overflow:hidden;background:var(--navy-2)} .paso-foto img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center;display:block; transition:transform .5s cubic-bezier(.16,1,.3,1); } .paso:hover .paso-foto img{transform:scale(1.035)} .paso-texto{ background:var(--navy);padding:34px 36px 36px; display:flex;flex-direction:column;justify-content:center; transition:background .25s; } .paso:hover .paso-texto{background:var(--navy-2)} .paso-texto .num{font-family:var(--mono);font-size:12px;color:var(--tinta-55);letter-spacing:.12em} .paso-texto h3{font-weight:800;font-size:26px;margin:8px 0 10px;color:var(--blanco)} .paso-texto p{color:var(--tinta-72);font-size:15.5px;max-width:46ch} .paso.final .paso-texto{background:var(--navy-2)} .paso.final:hover .paso-texto{background:#0d2650} @media (max-width:760px){ /* Una columna: la foto arriba, entera. El 16/9 del recuadro es la proporción real de las cinco, así que aquí `cover` no recorta nada. El `:nth-child(even)` va repetido a propósito: una media query no sube la especificidad, así que `.paso{grid-template-columns:1fr}` a secas PERDÍA contra la regla del zig-zag y las filas pares se quedaban en dos columnas en el celular — visto en pantalla, no deducido. */ .paso, .paso:nth-child(even){grid-template-columns:1fr;min-height:0} .paso:nth-child(even) .paso-foto{order:0} .paso-foto{aspect-ratio:16/9} .paso-texto{padding:26px 22px 30px} .paso-texto h3{font-size:23px} .paso-texto p{max-width:none} } /* ---- la declaración (antes: franja azul rellena) ---- El manual dice que el azul institucional NO es un fondo. Y el defecto que Julián nombró es anterior al color: cambiar el fondo sin cambiar la composición no crea jerarquía, solo pinta. Ahora el énfasis lo da la ESTRUCTURA -- una afirmación corta y tres hechos separados por filete -- sobre el mismo campo que el resto de la página. */ .declaracion h2{font-size:clamp(30px,5.2vw,52px)} .declaracion .apertura{color:var(--tinta-72);max-width:54ch;margin-top:20px;font-size:17px} .hechos{margin-top:46px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--navy-3)} .hechos > div{padding:26px 26px 0 0} .hechos > div + div{border-left:1px solid var(--navy-3);padding-left:26px} .hechos b{ display:block;font-family:var(--mono);font-weight:500;font-size:11px; letter-spacing:.16em;text-transform:uppercase;color:var(--azul-claro); } .hechos p{margin-top:12px;color:var(--tinta-72);font-size:15px} @media (max-width:840px){ .hechos{grid-template-columns:1fr} .hechos > div{padding-right:0} .hechos > div + div{border-left:none;border-top:1px solid var(--navy-3);padding-left:0} } /* ---- para quién / tarjetas de actor ---- */ /* La interventoría es quien paga y a quien le habla el resto del sitio — el operador y el municipio pesan menos en el negocio real, y ahora también en el layout. Reemplaza al trío de cajas iguales del 9-sep: el ícono y el título grandes de la principal hacen la jerarquía, no una foto (se probó y se descartó en Web/propuestas/bloque-para-quien.html, 10-sep-2026). Sustituye también la asimetría vieja de aquí abajo, que daba 1.25fr y un borde apenas perceptible — insuficiente para leerse a simple vista. */ .quien{ margin-top:46px;display:grid;grid-template-columns:1.3fr 1fr;gap:1px; background:var(--navy-3);border:1px solid var(--navy-3);border-radius:14px;overflow:hidden; } @media (max-width:900px){ .quien{grid-template-columns:1fr} } .quien-principal{ background:var(--navy-2);display:flex;flex-direction:column;justify-content:center; padding:46px 42px 48px; } .quien-ico-grande{width:56px;height:56px;stroke:var(--azul-claro);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round} .quien-principal .rol{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--dorado);margin-top:22px} .quien-principal h3{font-weight:800;font-size:clamp(30px,3.6vw,40px);line-height:1.05;margin-top:12px;max-width:11ch} .quien-principal p{color:var(--tinta-72);font-size:15.5px;margin-top:16px;max-width:42ch} .quien-secundarias{display:flex;flex-direction:column;gap:1px;background:var(--navy-3)} .quien-sec{background:var(--navy);padding:24px 26px;flex:1} .quien-sec .rol{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-55);margin-top:12px} .quien-sec h4{font-weight:800;font-size:19px;margin-top:9px} .quien-sec p{color:var(--tinta-72);font-size:13.5px;margin-top:9px} /* ---- caja normativa dirigida (inicio) ---- */ .norma{ background:var(--navy-2);border:1px solid var(--navy-3);border-radius:14px; padding:40px 42px;display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center; } @media (max-width:840px){ .norma{grid-template-columns:1fr;padding:30px 26px} } .norma h2{font-size:clamp(24px,3.4vw,32px)} .norma p{color:var(--tinta-72);margin-top:14px;font-size:15.5px} .norma .cita{ font-family:var(--mono);font-size:12.5px;line-height:1.8;color:var(--azul-palido); border-left:2px solid var(--azul);padding-left:18px; } .norma a.mas{font-weight:600;display:inline-block;margin-top:16px;text-decoration:none} .norma a.mas:hover{text-decoration:underline} /* ---- antes / después: interruptor + "vuelta" por tarjeta, 10-sep-2026 ---- Reemplaza la tabla estática: un interruptor voltea las seis tarjetas a la vez (data-modo en .comparador), y pasar el mouse o tocar UNA la gira sola. ⚠️ Probado primero con rotateY+perspective+backface-visibility real (giro 3D): en clics y hover REALES (no solo en :hover simulado) la tarjeta cambiaba de clase correctamente pero el navegador se quedaba con el `transform` sin aplicar -- reproducido varias veces, en pestañas nuevas, con el mismo resultado. En vez de perseguir un motivo exacto (candidato: backface-visibility + preserve-3d + grid es una combinación con historial de inconsistencias entre navegadores), se cambió a un mecanismo sin 3D: opacidad/visibility decide QUÉ cara se ve (igual de confiable que en cualquier otro fade del sitio), y un "pellizco" en 2D (scaleX, sin perspectiva) da la sensación de vuelta. Lógica en antes-despues.js. */ .sr-solo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .interruptor-envoltura{display:flex;justify-content:center;margin-top:46px;position:relative;z-index:2} /* Con su contenedor (14-sep-2026): el interruptor mensual/anual de precios usa la misma clase más abajo en este archivo y, con las reglas sueltas, encogía esta pastilla a una cápsula de 56 px con las dos opciones desbordadas (lo vio Julián en geolapp462.com). */ .interruptor-envoltura .interruptor{display:inline-flex;gap:3px;padding:5px;border-radius:999px;background:var(--blanco);box-shadow:0 10px 30px rgba(0,8,24,.28)} .interruptor-op{ font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase; border:none;background:transparent;color:rgba(0,22,54,.42); padding:12px 22px;border-radius:999px;cursor:pointer; display:flex;align-items:center;gap:8px;white-space:nowrap; transition:background-color .3s cubic-bezier(.16,1,.3,1),color .3s cubic-bezier(.16,1,.3,1); } .interruptor-op .flecha{width:14px;height:14px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round} .interruptor-op[aria-pressed="true"]{background:var(--navy);color:var(--blanco)} .interruptor-op[aria-pressed="true"] .flecha{transform:translateX(3px)} .interruptor-op:focus-visible{outline:2px solid var(--azul-claro);outline-offset:2px} /* invitación a oprimir "Geolapp 462": pulso + flecha, hasta el primer uso */ @keyframes pulso-invitacion{ 0%,100%{box-shadow:0 0 0 0 rgba(0,87,214,.42)} 50%{box-shadow:0 0 0 9px rgba(0,87,214,0)} } @keyframes nudge-flecha{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(4px)} } .interruptor-envoltura .interruptor:not(.tocado) .interruptor-op[data-valor="geolapp"]:not([aria-pressed="true"]){ animation:pulso-invitacion 2.4s ease-in-out infinite; } .interruptor-envoltura .interruptor:not(.tocado) .interruptor-op[data-valor="geolapp"]:not([aria-pressed="true"]) .flecha{ animation:nudge-flecha 1.6s ease-in-out infinite; } .pista{margin-top:16px;font-size:13px;color:var(--tinta-55);display:flex;align-items:center;justify-content:center;gap:8px;text-align:center} .pista svg{width:15px;height:15px;stroke:var(--azul-claro);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none} /* El panel es navy en los dos modos (14-sep-2026). Hasta ese día «Método actual» lo pintaba claro (#EEF0F4), el único bloque claro del sitio. Julián pidió navy detrás de las tarjetas, con las de hoy blancas y las de Geolapp 462 navy, para que el antes y el después se distingan a primera vista: el lado lo dice el color de la tarjeta, no el del panel. */ .comparador{margin-top:28px;border-radius:28px;padding:52px 36px 58px;background:var(--navy);border:1px solid var(--navy-3)} .tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media (max-width:880px){.tarjetas{grid-template-columns:1fr 1fr}} @media (max-width:600px){.tarjetas{grid-template-columns:1fr}} /* cada tarjeta muestra UNA de dos caras completas e independientes; cuál se ve lo decide opacity/visibility (nunca las dos a la vez), y un pellizco en scaleX encima da la sensación de vuelta sin depender de render 3D. .tarjeta = responde a hover/tap/teclado .tarjeta-interior = el que "pellizca" (scaleX), caras apiladas por grid .cara-antes/.cara-ahora = caras completas e independientes */ .tarjeta{ cursor:pointer;outline:none;-webkit-user-select:none;user-select:none; border-radius:16px; } .tarjeta:focus-visible{outline:2px solid var(--azul-claro);outline-offset:3px} .tarjeta-interior{ display:grid; border-radius:16px; transform:scaleX(1); } .tarjeta-interior.girando{ animation:pellizco-tarjeta .5s cubic-bezier(.16,1,.3,1); animation-delay:var(--retraso,0ms); } @keyframes pellizco-tarjeta{ 0%{transform:scaleX(1)} 48%{transform:scaleX(.04)} 52%{transform:scaleX(.04)} 100%{transform:scaleX(1)} } /* La cara cambia DE GOLPE a los 250 ms, cuando el pellizco deja la tarjeta en su punto más angosto (scaleX .04 entre el 48 y el 52 % de sus 500 ms): así el pellizco esconde el cambio. --retraso corre las dos cosas a la vez y lo pone antes-despues.js: 0 para una tarjeta sola, escalonado para el interruptor. Medido el 14-sep-2026: con un fundido de .22s desde el primer instante y el pellizco escalonado por el --i de motor.js, la sexta tarjeta cambiaba de cara entera y se pellizcaba después, sin esconder nada. */ .tarjeta-cara{ grid-area:1/1; border-radius:16px; padding:24px 22px; opacity:0; visibility:hidden; transition:opacity 0s linear calc(var(--retraso,0ms) + .25s),visibility 0s linear calc(var(--retraso,0ms) + .25s); } /* .volteada es SOLO de JS (antes-despues.js), nunca :hover directo, y quiere decir «muestra el OTRO lado del que marca el interruptor». Con :hover el clic no revertía nada si el mouse seguía encima (10-sep); y hasta el 14-sep la clase decía «muestra Geolapp 462», así que con el interruptor en Geolapp 462 ninguna tarjeta giraba (medido con mouse, clic y toques). */ .comparador[data-modo="actual"] .tarjeta:not(.volteada) .cara-antes, .comparador[data-modo="actual"] .tarjeta.volteada .cara-ahora, .comparador[data-modo="geolapp"] .tarjeta:not(.volteada) .cara-ahora, .comparador[data-modo="geolapp"] .tarjeta.volteada .cara-antes{ opacity:1;visibility:visible; } .cara-antes{background:var(--blanco);border:1px solid rgba(0,22,54,.08);box-shadow:0 14px 30px rgba(20,30,60,.07)} .cara-ahora{background:var(--navy-2);border:1px solid rgba(255,255,255,.07)} .tarjeta-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .tarjeta-ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none} .tarjeta-ico svg{width:19px;height:19px;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round} .cara-antes .tarjeta-ico{background:rgba(0,22,54,.05)} .cara-antes .tarjeta-ico svg{stroke:rgba(0,22,54,.5)} .cara-ahora .tarjeta-ico{background:rgba(0,87,214,.16)} .cara-ahora .tarjeta-ico svg{stroke:var(--azul-claro)} .tarjeta-pill{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;white-space:nowrap;height:fit-content} .cara-antes .tarjeta-pill{background:#F4E9C8;color:#8A6D1F} .cara-ahora .tarjeta-pill{background:rgba(188,191,0,.16);color:var(--dorado)} .tarjeta-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-top:18px} .cara-antes .tarjeta-eyebrow{color:rgba(0,22,54,.42)} .cara-ahora .tarjeta-eyebrow{color:var(--tinta-55)} .tarjeta-titulo{font-weight:800;font-size:18px;line-height:1.28;margin-top:8px} .cara-antes .tarjeta-titulo{color:var(--navy)} .cara-ahora .tarjeta-titulo{color:var(--blanco)} .tarjeta-desc{margin-top:8px;font-size:13.5px;line-height:1.55} .cara-antes .tarjeta-desc{color:rgba(0,22,54,.6)} .cara-ahora .tarjeta-desc{color:var(--tinta-72)} @media (prefers-reduced-motion: reduce){ .comparador,.tarjeta-cara,.interruptor-op{transition:none!important} .tarjeta-interior.girando,.interruptor-op[data-valor="geolapp"],.interruptor-op[data-valor="geolapp"] .flecha{animation:none!important} } /* ---- tiempo y dinero ---- */ .horas{margin-top:46px;display:grid;gap:14px} .par{display:grid;grid-template-columns:1fr 34px 1fr;gap:16px;align-items:center;background:var(--navy-2);border:1px solid var(--navy-3);border-radius:10px;padding:18px 22px} @media (max-width:760px){ .par{grid-template-columns:1fr} .par .flecha{transform:rotate(90deg);justify-self:start} } .par .antes{color:var(--tinta-55);font-size:15px} .par .flecha{color:var(--dorado);font-size:18px;text-align:center} .par .ahora{font-size:15px;font-weight:600} .riesgo{ position:relative;overflow:hidden; margin-top:44px;border:1px solid rgba(196,0,0,.55);border-radius:14px;padding:34px 36px; background:linear-gradient(rgba(196,0,0,.07),rgba(196,0,0,.03)); } @media (max-width:760px){ .riesgo{padding:26px 22px} } .riesgo > *{position:relative;z-index:1} .riesgo .eyebrow{color:#ff8d80} .riesgo .eyebrow::before{background:var(--rojo)} .riesgo h3{font-weight:800;font-size:clamp(22px,3.2vw,28px);margin-top:14px} .riesgo p{color:var(--tinta-72);margin-top:14px;max-width:66ch;font-size:15.5px} .riesgo p strong{color:var(--blanco)} /* La balanza (11-sep-2026, el intento que eligió Julián entre tres): el mismo tratamiento que el wifi de «La señal se va» —línea redondeada de 2,2 en rejilla de 24, a tamaño de figura, al 30 % y en el color del rótulo del bloque— con un solo elemento resaltado: el cuenco que baja, el de defender un proceso. Se retira por debajo de 1000 px, donde el hueco a la derecha del texto ya no alcanza y el dibujo quedaría detrás de las letras. */ .riesgo .riesgo-icono{ position:absolute;z-index:0;right:7%;top:50%;transform:translateY(-50%); width:210px;height:auto;pointer-events:none; fill:none;stroke:#ff8d80;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.3; } .riesgo .riesgo-icono .resalte{fill:#ff8d80} @media (max-width:1000px){ .riesgo .riesgo-icono{display:none} } /* ---- la app en el celular (11-sep-2026) ---- Capturas REALES de la app, tomadas a 412 x 915 (el viewport de un Android corriente) con el contrato de demostración: ningún dato es de un cliente. Sustituyen a los tres marcos de navegador vacíos («captura en preparación»). El marco repite el de los dispositivos del hero —mismo fondo, borde y sombra—; la barra de estado y la de gestos llevan el color medido de la cabecera y de la barra de navegación de cada captura, que va entera, sin recortes. En pantallas angostas los tres se desplazan en fila. */ .pantallas{margin-top:46px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start} .telefono{margin:0;display:flex;flex-direction:column;align-items:center;gap:20px} .telefono-marco{ width:100%;max-width:292px;padding:8px;border-radius:42px; background:var(--navy-2);border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 60px -20px rgba(0,8,24,.75), 0 8px 18px rgba(0,8,24,.4); } .telefono-pantalla{border-radius:34px;overflow:hidden} .telefono-estado{display:flex;justify-content:space-between;align-items:center;height:26px;padding:2px 20px 0 24px;font-size:11.5px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;background:#001736} .telefono-estado svg{width:46px;height:12px;fill:#fff} .telefono-pantalla img{display:block;width:100%;height:auto} .telefono-gesto{display:grid;place-items:center;height:18px;background:#08132a} .telefono-gesto::before{content:"";width:36%;height:4px;border-radius:2px;background:rgba(255,255,255,.6)} .telefono figcaption{max-width:292px;font-size:14px;line-height:1.55;color:var(--tinta-72);text-align:center} .telefono figcaption b{color:var(--blanco);font-weight:700} @media (max-width:900px){ .pantallas{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;padding:4px 2px 20px} .telefono{flex:0 0 min(78vw,292px);scroll-snap-align:center} } .pantallas-nota{margin-top:18px;font-size:13px;color:var(--tinta-55);font-family:var(--mono)} /* ---- pilares (producto) ---- */ .pilar{margin-top:52px;border:1px solid var(--navy-3);border-radius:14px;overflow:hidden} .pilar-cab{background:var(--navy-2);padding:26px 30px;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap} .pilar-cab .nombre{font-weight:800;font-size:clamp(22px,3vw,30px)} .pilar-cab .promesa{color:var(--tinta-72);font-size:15.5px} .pilar-lista{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--navy-3)} @media (max-width:760px){ .pilar-lista{grid-template-columns:1fr} } .pieza{background:var(--navy);padding:22px 26px} .pieza h4{font-weight:600;font-size:16.5px} .pieza p{color:var(--tinta-72);font-size:14.5px;margin-top:6px} .pieza.ancha{grid-column:1/-1} @media (max-width:760px){ .pieza.ancha{grid-column:auto} } /* Nota normativa: la cita puntual de un numeral del 4.6.2, pegada a la pieza cuya capacidad ya lo satisface -- no una sección propia, no un titular. Mismo lenguaje visual que la cita completa de normatividad.html (monoespaciada, borde azul) pero a tamaño de nota al pie, y con el mismo patrón de enlace discreto que ya usa el sitio (color, no subrayado, ver .nav-links y .pie-col): quien la busca la lee y la sigue; quien no, la pasa de largo sin que compita con el h4 de arriba. */ .pieza .norma-nota{ display:block;margin-top:10px;padding-left:10px; border-left:2px solid var(--azul); font-family:var(--mono);font-size:11px;line-height:1.5; color:var(--azul-palido);text-decoration:none; } .pieza .norma-nota:hover{color:var(--blanco)} /* ---- roles (producto) ---- */ .orgs{margin-top:46px;display:grid;gap:22px} .org{background:var(--navy-2);border:1px solid var(--navy-3);border-radius:12px;padding:26px 28px} .org .quien-es{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dorado)} .org h3{font-weight:800;font-size:21px;margin:10px 0 16px} .org-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media (max-width:840px){ .org-roles{grid-template-columns:1fr} } .rolcita h4{font-weight:600;font-size:15.5px;color:var(--azul-claro)} .rolcita p{color:var(--tinta-72);font-size:14px;margin-top:4px} /* ---- ciclo del hallazgo (producto) ---- */ .tramos{margin-top:46px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px} @media (max-width:980px){ .tramos{grid-template-columns:repeat(3,1fr)} } @media (max-width:640px){ .tramos{grid-template-columns:1fr} } .tramo{background:var(--navy-2);border:1px solid var(--navy-3);border-radius:10px;padding:18px 16px} .tramo .num{font-family:var(--mono);font-size:11px;color:var(--tinta-55);letter-spacing:.12em} .tramo h4{font-weight:600;font-size:15px;margin:8px 0 6px} .tramo p{color:var(--tinta-72);font-size:13px;line-height:1.5} /* ---- tabla normativa ---- */ .tabla-envoltura{margin-top:44px;overflow-x:auto;border:1px solid var(--navy-3);border-radius:12px} table.normas{width:100%;border-collapse:collapse;min-width:640px;font-size:14.5px} table.normas th{ font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-55); text-align:left;font-weight:500;background:var(--navy-2);padding:14px 18px; } table.normas td{padding:14px 18px;border-top:1px solid var(--navy-3);color:var(--tinta-72);vertical-align:top} table.normas td:first-child{color:var(--blanco);font-weight:600} table.normas .vigente{font-family:var(--mono);font-size:12px;color:var(--dorado)} .tabla-nota{margin-top:16px;font-size:13.5px;color:var(--tinta-55);max-width:70ch} /* ---- frentes de riesgo (normatividad) ---- */ .frentes{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media (max-width:980px){ .frentes{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .frentes{grid-template-columns:1fr} } .frente{border:1px solid rgba(196,0,0,.45);border-radius:10px;padding:20px;background:linear-gradient(rgba(196,0,0,.06),rgba(196,0,0,.02))} .frente h4{font-weight:800;font-size:17px} .frente p{color:var(--tinta-72);font-size:14px;margin-top:8px} /* ---- mapeo obligación → evidencia (normatividad) ---- */ .mapeo{margin-top:46px;display:grid;gap:12px} .mapeo .par .antes{color:var(--tinta-72)} .mapeo .par .antes b{color:var(--blanco);font-weight:600} /* ---- precios ---- */ .planes{margin-top:46px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start} @media (max-width:900px){ .planes{grid-template-columns:1fr} } .plan{background:var(--navy-2);border:1px solid var(--navy-3);border-radius:14px;padding:30px 28px;position:relative} .plan.popular{border-color:var(--azul)} .plan .badge{ position:absolute;top:-11px;left:26px;background:var(--azul);color:var(--blanco); font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; padding:4px 10px;border-radius:5px; } .plan h3{font-weight:800;font-size:23px} .plan .para{color:var(--tinta-72);font-size:14px;margin-top:6px;min-height:42px} /* El precio y sus notas van en líneas propias. Antes «COP / mes · IVA excluido» viajaba dentro de la línea de 34 px y, al partirse, dejaba «excluido» solo, un renglón gigante más abajo (captura de Julián, 11-sep-2026). */ .plan .precio{margin-top:18px;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px} .plan .precio-cifra{font-weight:800;font-size:34px;line-height:1.15;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .plan .precio-unidad{font-size:13px;color:var(--tinta-55);white-space:nowrap} .plan .facturado{margin-top:6px;font-size:13.5px;color:var(--azul-claro);font-variant-numeric:tabular-nums} .plan .alterno{margin-top:3px;font-size:12.5px;color:var(--tinta-55);font-variant-numeric:tabular-nums} /* ---- mensual / anual ---- Arranca en ANUAL (Julián, 11-sep-2026): lo primero que se ve es lo que se paga al mes pagando el año. Sin JavaScript el interruptor no aparece y las tarjetas quedan en anual, con el precio mes a mes en la línea de abajo. */ .facturacion{margin-top:40px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;font-size:15px} .facturacion[hidden]{display:none} .facturacion + .planes{margin-top:34px} .facturacion-opcion{color:var(--tinta-72);cursor:pointer;user-select:none;padding:8px 2px} .facturacion-opcion.activa{color:var(--blanco);font-weight:700} .facturacion .ahorro{display:inline-block;margin-left:6px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:rgba(99,153,34,.22);color:#a8d66b;vertical-align:1px} /* Con su contenedor (14-sep-2026): estas reglas, sueltas, pisaban la pastilla del interruptor de «Antes y después» del inicio —que es del 10-sep y comparte clase—, la encogían a esta cápsula y le regalaban su sombra. */ .facturacion .interruptor{position:relative;flex:none;width:56px;height:32px;padding:0;border-radius:999px;border:1px solid var(--navy-3);background:var(--navy-3);cursor:pointer;transition:background .25s,border-color .25s} .facturacion .interruptor::before{content:"";position:absolute;inset:-7px} .facturacion .interruptor[aria-checked="true"]{background:var(--azul);border-color:var(--azul)} .interruptor-perilla{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--blanco);box-shadow:0 2px 6px rgba(0,10,30,.45);transition:transform .25s cubic-bezier(.16,1,.3,1)} .facturacion .interruptor[aria-checked="true"] .interruptor-perilla{transform:translateX(24px)} .facturacion .interruptor:focus-visible{outline:2px solid var(--azul-claro);outline-offset:4px} @media (prefers-reduced-motion:reduce){ .facturacion .interruptor,.interruptor-perilla{transition:none} } .plan ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px;font-size:14.5px} .plan ul li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--navy-3);padding-bottom:10px} .plan ul li span:first-child{color:var(--tinta-72)} .plan ul li span:last-child{font-weight:600;font-variant-numeric:tabular-nums} .plan .btn{width:100%;text-align:center;margin-top:24px} .nota-planes{margin-top:26px;color:var(--tinta-72);max-width:70ch;font-size:15px} .nota-planes strong{color:var(--blanco)} /* ---- simulador ---- */ .simulador{margin-top:46px;background:var(--navy-2);border:1px solid var(--navy-3);border-radius:14px;padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:34px} @media (max-width:840px){ .simulador{grid-template-columns:1fr} } .campo{display:grid;gap:8px;margin-bottom:20px} .campo label{font-weight:600;font-size:14.5px} .campo select,.campo input,.campo textarea{ background:#000a1d;border:1px solid var(--navy-3);border-radius:8px;color:var(--blanco); font-family:var(--sans);font-size:15px;padding:11px 14px;width:100%; } .campo select:focus,.campo input:focus,.campo textarea:focus{outline:2px solid var(--azul);outline-offset:1px;border-color:var(--azul)} .sim-resultado{border-left:1px solid var(--navy-3);padding-left:34px;display:grid;gap:12px;align-content:start} @media (max-width:840px){ .sim-resultado{border-left:none;padding-left:0;border-top:1px solid var(--navy-3);padding-top:22px} } .sim-linea{display:flex;justify-content:space-between;gap:14px;font-size:15px;color:var(--tinta-72)} .sim-linea b{color:var(--blanco);font-variant-numeric:tabular-nums} .sim-total{display:flex;justify-content:space-between;gap:14px;font-size:19px;font-weight:800;border-top:1px solid var(--navy-3);padding-top:14px;font-variant-numeric:tabular-nums} .sim-aviso{font-size:13.5px;color:var(--dorado)} /* ---- guía / FAQ ---- */ .guia{margin-top:46px;display:grid;gap:12px} .guia details{background:var(--navy-2);border:1px solid var(--navy-3);border-radius:10px} .guia summary{cursor:pointer;font-weight:600;font-size:15.5px;padding:18px 22px;list-style:none;display:flex;justify-content:space-between;gap:14px} .guia summary::after{content:"+";color:var(--azul-claro);font-weight:400;font-size:19px} .guia details[open] summary::after{content:"−"} .guia .cuerpo{padding:0 22px 20px;color:var(--tinta-72);font-size:14.5px;max-width:75ch} .guia .cuerpo p + p{margin-top:10px} /* ---- contacto ---- */ .contacto-grid{margin-top:46px;display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start} @media (max-width:900px){ .contacto-grid{grid-template-columns:1fr} } .dato{border-top:1px solid var(--navy-3);padding:18px 0} .dato .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-55)} .dato .v{margin-top:6px;font-weight:600;font-size:16.5px} .dato p{color:var(--tinta-72);font-size:14px;margin-top:4px} form.contacto{background:var(--navy-2);border:1px solid var(--navy-3);border-radius:14px;padding:32px} .casilla{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--tinta-72);margin:6px 0 20px} .casilla input{width:17px;height:17px;margin-top:2px;flex:none;accent-color:var(--azul)} .form-nota{margin-top:14px;font-size:13px;color:var(--tinta-55)} /* Formulario de la prueba gratuita (11-sep-2026): dos campos cortos por fila, el estado del envío, y la trampa para bots — fuera de pantalla, sin foco y sin lectura para lectores de pantalla. */ .campos-fila{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} @media (max-width:600px){ .campos-fila{grid-template-columns:1fr} } .campo-trampa{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} .casilla a,.form-nota a,.nota-prueba a{color:var(--azul-claro)} form.contacto .btn:disabled{opacity:.65;cursor:default} .form-estado{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:14px;color:var(--blanco)} .form-estado.ok{background:rgba(46,160,90,.14);border:1px solid rgba(46,160,90,.5)} .form-estado.error{background:rgba(196,0,0,.1);border:1px solid rgba(196,0,0,.5)} /* ---- cierre y pie ---- */ .cierre{text-align:center;padding:100px 0} .cierre h2{font-size:clamp(30px,5vw,50px);max-width:20em;margin:0 auto} .cierre .btn{margin-top:34px} footer{border-top:1px solid var(--navy-3);padding:54px 0 40px;font-size:14px} .pie-fila{display:flex;gap:44px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start} .pie-marca img{height:24px;display:block} .pie-marca p{margin-top:16px;color:var(--tinta-72);max-width:34ch} .pie-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-55);font-weight:500} .pie-col ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px} .pie-col a{color:var(--tinta-72);text-decoration:none} .pie-col a:hover{color:var(--blanco)} .pie-col .apagado{color:var(--tinta-55)} .pie-legal{margin-top:44px;padding-top:22px;border-top:1px solid var(--navy-3);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--tinta-55);font-size:12.5px} /* ══════════════════════════════════════════════════════════════════════════ MARCA · segunda pasada, con el manual delante (9-sep-2026) La primera fue de mal gusto y Julián lo dijo. El error no fue usar la marca: fue usarla EN TODAS PARTES — fondo claro cada dos secciones, esquina redondeada y sombra en casi todas, textura debajo de todo. Eso no es ritmo, son rayas; y el propio skill lo prohíbe («no todo es una tarjeta»: borde, relleno, radio y sombra dicen «objeto aparte», y gastarlos en cada bloque aplana la jerarquía en vez de crearla). Y sobre todo: no había leído el manual. Dice tres cosas que yo incumplía. 1. EL PATRÓN es «uso exclusivo como textura de fondo; NUNCA superpuesto a texto cuerpo». Yo lo tenía bajo secciones enteras de lectura. Ahora vive solo donde no hay texto corrido encima: la franja azul, el pie, la tarjeta del video y una cinta de borde. 2. LAS OPACIDADES no son a ojo, están fijadas: azul 12 % sobre blanco, blanco 20 % sobre azul, navy 10 % sobre wash, azul claro sobre navy. 3. EL 60-30-10 no es lo que yo suponía. El 30 % es el AZUL INSTITUCIONAL «en headers, barras y botones» — y en el sitio solo estaba en los botones. De ahí lo monocromático: no faltaban fondos claros, faltaba azul. Ahora hay barras y filetes azules donde el manual los pide. El sexto elemento del sistema tampoco estaba: ICONOGRAFÍA (Lucide, 24 px, trazo 2). Va en los cinco verbos y en las tres organizaciones, monocroma. ══════════════════════════════════════════════════════════════════════════ */ :root{ --lavado:#EAF1FC; --borde-claro:#CEDDF7; --texto-claro:#3A4250; --texto-claro-2:#5D6675; } /* ── El patrón, solo donde el manual lo permite ─────────────────────────── El mosaico anterior metia las cadenas 08-03 y 08-06 en el mismo cuadro de 1200 y las dos ocupan el centro: se CRUZABAN. Lo vio Julian. Ahora cada cadena va en su celda dentro de un mosaico de 2400x1600, con calle de por medio, y el generador comprueba por geometria que ningun recuadro toca a otro -- ni a las copias de los mosaicos vecinos. Y no siempre hace falta el mosaico entero: en tres sitios va UNA SOLA figura, que es lo que Julian pidio. Un patron que se repite es fondo; una figura sola es un gesto. */ /* a · La declaración — la esquina la ocupa el wifi, sin textura detrás. Aquí vivía el mosaico de red (`img/red-clara.svg` al 13 %, enmascarado sobre la esquina de arriba a la derecha). Se retiró el 9-sep-2026 porque sus puntos y líneas se cruzaban con el icono y las dos capas se ensuciaban entre sí: en esa esquina ahora manda una figura sola, que es el uso que el manual llama gesto. El mosaico sigue vivo en el pie, sin cambios. */ .declaracion{position:relative;overflow:hidden;isolation:isolate} .declaracion > *{position:relative;z-index:1} /* El wifi sin señal, en la esquina que la textura ya reservaba — la misma donde NO hay texto. Es el mismo alfabeto de iconos del resto del sitio (trazo redondeado, rejilla de 24), solo que a tamaño de figura. El selector va con `.contener` delante a propósito: `.declaracion > *` fija `position:relative` con especificidad (0,1,1) y un `.senal-icono` a secas (0,1,0) PERDERÍA — el icono se quedaría en el flujo, empujando el texto hacia abajo en vez de posarse en la esquina. Y el punto va más marcado que los arcos: los arcos son la señal que se va, el punto es lo que queda. Es literalmente lo que dice el título. */ .declaracion .contener{position:relative} .declaracion .senal-icono{ position:absolute;z-index:0;pointer-events:none; /* Medido, no estimado: el hueco libre de esta sección va desde el eyebrow (40 px bajo el contenedor) hasta donde empiezan los hechos (313 px), y el título solo ocupa 411 px de los 1080 — quedan 668 px a la derecha. El alto es el que manda: el SVG es cuadrado y su dibujo ocupa de 2 a 20 de las 24 unidades, así que a 300 px pinta de 65 a 290 y deja 23 px antes del texto de los hechos. Más grande invadiría ese texto, que es lo único que el manual prohíbe sin matices. El «03» de la esquina vive en top:16px, así que arrancar en 40 lo deja libre. */ /* Medido sobre el recuadro que marcó Julián: va del 54,5 % al 87 % del ancho del contenido y arranca casi en su borde superior. En porcentaje —y no en píxeles— para que la figura y el recuadro escalen juntos cuando la ventana cambia. El dibujo ocupa ~21 de las 24 unidades del viewBox, así que a 29 % de ancho pinta unos 275 px de alto y termina antes del texto de los hechos, que empieza en 313. */ right:17.3%; top:clamp(30px,5.5vw,59px); width:17.9%;height:auto; fill:none;stroke:var(--azul-claro); /* Macizo, no de trazo fino: el ratio de grosor sube al 9 % del viewBox, que es el del icono de referencia. A trazo fino la figura se veía desvaída a este tamaño. */ stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; opacity:.3; } .declaracion .senal-icono .tachado{stroke-width:2.2} .declaracion .senal-icono .punto{fill:var(--azul-claro);stroke:none} /* Igual que la textura: en pantalla angosta el texto ocupa todo el ancho y ya no queda esquina libre, así que el icono se retira entero antes que quedar detrás del texto. */ @media (max-width:900px){ .declaracion .senal-icono{display:none} } /* b · Pie — «azul claro sobre navy: fondos oscuros» */ footer{position:relative;background:#000f28;overflow:hidden;isolation:isolate} footer::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:url("img/red-clara.svg") repeat;background-size:980px auto;opacity:.15; -webkit-mask-image:linear-gradient(to top,#000,transparent 62%); mask-image:linear-gradient(to top,#000,transparent 62%); } footer > *{position:relative;z-index:1} /* ── UNA SOLA figura, donde el mosaico seria demasiado ──────────────────── Tres gestos en todo el sitio, cada uno con su cadena distinta, sin repetir y sin que ninguno caiga sobre texto. */ .figura{position:absolute;pointer-events:none;z-index:0;background-repeat:no-repeat} /* El cierre de la pagina: una figura suelta, grande y muy tenue, a un lado. */ .cierre{position:relative;overflow:hidden;isolation:isolate} .cierre::before{ content:"";position:absolute;left:-90px;top:-40px;width:420px;height:340px; background:url("img/figura-3-clara.svg") no-repeat left top/contain; opacity:.13;pointer-events:none;z-index:0; } .cierre > *{position:relative;z-index:1} /* La cinta antes del pie: el manual autoriza el patron como «elemento decorativo de borde». Una franja fina con UNA figura, no un mosaico. */ .cinta{ height:96px;position:relative;overflow:hidden; background:url("img/figura-2-clara.svg") no-repeat center/auto 74px; opacity:.2; } /* ── El 30 % que faltaba: azul institucional en barras y filetes ────────── No es decorar: es que el color dominante de la identidad estaba ausente. */ .eyebrow::before{background:var(--azul)} /* el filete pasa a azul */ .eyebrow{color:var(--azul-claro)} .eyebrow.dorado{color:var(--dorado)} .eyebrow.dorado::before{background:var(--dorado)} /* Barra azul: marca el inicio de las secciones de peso, en vez de que cada sección lleve caja. Un filete de 3 px hace el trabajo de un borde entero. */ .barra-azul{position:relative} .barra-azul::before{ content:"";position:absolute;left:0;top:0;width:64px;height:3px;background:var(--azul); } /* ── Iconografía · Lucide 24 px, trazo 2 (elemento 05 del sistema) ──────── Monocroma y pequeña: acompaña, no ilustra. */ .ico{ width:24px;height:24px;display:block;flex:none; stroke:var(--azul-claro);stroke-width:2;fill:none; stroke-linecap:round;stroke-linejoin:round; } .paso-texto .ico{margin-bottom:14px} .paso:hover .ico{stroke:var(--dorado)} /* ── Menos caja, más aire ───────────────────────────────────────────────── Los tres pasos del problema no necesitaban tarjeta y no la tenían; lo que sí sobraba era la sombra en todo. Aquí las tarjetas pierden peso y ganan una sombra teñida al fondo, como pide el skill. */ .plan,.tramo,.par,.guia details{ box-shadow:0 14px 30px -26px rgba(0,10,30,.9); } .eyebrow-rojo{color:#ff8d80} .eyebrow-rojo::before{background:var(--rojo)} /* ═══════════════════════════════════════════════════════════════════════════ SISTEMA DE SUPERFICIES · tercera pasada (9-sep-2026) Dos observaciones de Julián, y las dos apuntan al mismo defecto: «fondos blancos no le sienta bien a la página» y «un solo bloque azul en todas las páginas no sigue ninguna técnica de diseño o consistencia». El manual de marca, en su página del sistema de color, dice literalmente: «#0057D6 Azul institucional — Aparece en headers, barras, botones primarios y estados activos. NO ES UN FONDO: es el elemento visual dominante que identifica la marca.» Así que la franja rellena no era discutible: era el único uso que el manual prohibe. Y el 60 % lo define como «negro y blanco para texto y página; navy para secciones oscuras» — un sitio enteramente navy está dentro de la regla; alternar navy y blanco cada dos secciones, no. Tres reglas nuevas, y son comprobables una por una: 1. UN SOLO CAMPO. Ninguna sección cambia de color de fondo. El degradado va sobre , o sea sobre el documento entero, así que no hay bordes donde pueda aparecer una franja. La profundidad la dan los COMPONENTES sobre el campo, no el campo partido en trozos. 2. EL AZUL ES ESTRUCTURA. Barras, cabeceras de bloque, filetes y estados activos. Deja de aparecer una vez en un sitio y pasa a aparecer muchas veces haciendo siempre el mismo trabajo — que es lo que convierte un color en sistema en vez de en mancha. 3. EL RITMO LO MARCA EL ÍNDICE. Cada sección abre con su numeral, su filete azul y una línea de corte, idéntico en las cinco páginas. Separa sin rayar, y se lee como un documento técnico, que es lo que es. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · Los componentes, un punto más azules ────────────────────── No es cambiar la paleta: es que el navy de las fichas y el filete de los bordes eran casi grises. Con dos tonos más azules, todo lo que ya existe — fichas, tablas, rejillas — deja de leerse monócromo sin añadir nada. */ :root{ --navy-2:#082047; --navy-3:#17376a; } /* ── 2 · El campo continuo ────────────────────────────────── El fondo va en para que el degradado de no se propague al lienzo y se posicione contra el documento entero. Tres lavados grandes de azul institucional — lo que el manual llama «washes» — y nada más: sin bordes, no hay forma de que aparezca una raya. */ html{background:var(--navy)} body{ background-color:transparent; background-image: radial-gradient(1200px 780px at 86% 4%, rgba(0,87,214,.26), transparent 62%), radial-gradient(1000px 900px at -12% 38%, rgba(0,87,214,.18), transparent 60%), radial-gradient(1100px 780px at 72% 88%, rgba(0,87,214,.15), transparent 64%); background-repeat:no-repeat; counter-reset:indice; } /* ── 3 · El índice: numeral + filete azul + línea de corte ──────────── El mismo dispositivo en las cinco páginas, y la numeración la lleva el CSS: nadie tiene que acordarse de renumerar al mover una sección. */ section{padding:52px 0 92px;scroll-margin-top:74px} section > .contener{ position:relative; border-top:1px solid rgba(153,188,239,.17); padding-top:40px; } section > .contener::before{ content:"";position:absolute;left:24px;top:-2px;width:72px;height:3px; background:var(--azul); } /* El numeral va de FOLIO, al otro extremo de la linea de corte: dentro del eyebrow chocaba con la numeracion de los pasos (01 EL PROBLEMA sobre 01 Los recorridos se hicieron). Dos sistemas de numeros a 40 px uno del otro se leen como un error, no como un indice. */ section:not(.cierre) > .contener{counter-increment:indice} section:not(.cierre) > .contener::after{ content:counter(indice,decimal-leading-zero); position:absolute;right:24px;top:16px; font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--tinta-55); } /* El filete del eyebrow sobra: la seccion ya abre con su barra azul arriba. */ section > .contener > .eyebrow::before{display:none} /* ── 4 · El 30 %: cabeceras y barras azules ────────────────────── Donde el manual lo pide, y en todas las páginas: la cabecera de cada bloque agrupado. Un color que aparece cinco veces haciendo lo mismo es un sistema; el mismo color una sola vez es una mancha. */ table.normas th{background:var(--azul);color:var(--blanco);font-weight:600} .pilar-cab{background:var(--azul)} .pilar-cab .promesa{color:#D6E5FA} .norma{border-top:3px solid var(--azul)} /* La cabecera de pagina conserva el filete del eyebrow y NO lleva la barra de seccion: no es una seccion del indice, es el titulo de la pagina. Con las dos cosas salian dos marcas azules a 20 px una de otra. */ .dato{border-top-color:var(--navy-3)} .dato:first-of-type{border-top:2px solid var(--azul)} /* ── 5 · El cierre: una caja con su barra, igual en las cuatro páginas ── El bloque de acción es lo único que lleva barra de ancho completo. Es el mismo filete azul del índice, crecido — no un color nuevo apareciendo al final sin haber estado antes. */ .cierre{text-align:center;padding:34px 0 96px} .cierre > .contener{border-top:none;padding-top:0} .cierre > .contener::before{display:none} .cierre .caja{ position:relative;overflow:hidden;border-radius:18px; border:1px solid var(--navy-3); background:linear-gradient(180deg,#0a2550,#03163a); padding:62px 34px 66px; } .cierre .caja::before{ content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--azul); } .cierre h2{font-size:clamp(28px,4.4vw,44px)} .cierre .btn{margin-top:32px} /* ── 6 · Lo que el mundo claro se llevaba puesto ────────────────── La caja normativa del inicio se pintaba aparte para no quedar navy sobre navy. Ahora el campo es uno solo y se distingue por elevación. */ .norma{background:linear-gradient(170deg,#0a2550,#061a3d)} .eyebrow-rojo{color:#FF9C90} /* ═══════════════════════════════════════════════════════════════════════════ REVISIÓN POR DISPOSITIVO · 9-sep-2026 Medido con el visor en 360, 393, 412, 820, 840, 940 y 1440 px. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Los campos del formulario, 16 px en celular ──────────────────── Por debajo de 16 px, Safari de iOS AMPLÍA la página al enfocar un campo y el visitante se queda con el sitio ampliado y desplazado. No es estética: es la diferencia entre rellenar el formulario y abandonarlo. */ @media (max-width:600px){ .campo input,.campo select,.campo textarea{font-size:16px} } /* ── Blancos de toque de 44 px ─────────────────────────────── Medido: el botón del menú era de 43×31 y el logo de 97×26. 44×44 es la medida que piden tanto Apple como Android, y el menú es la única forma de navegar en celular. */ @media (max-width:840px){ .nav-movil summary{ min-width:44px;min-height:44px; display:flex;align-items:center;justify-content:center; } nav.sitio .nav-fila > a:first-of-type{display:flex;align-items:center;min-height:44px} .norma a.mas{display:inline-block;padding:10px 0} .pie-col a,.pie-legal a{display:inline-block;padding:5px 0} } /* ── Los rótulos monoespaciados no bajan de 12 px en celular ────────── En pantalla ancha, 11 px en versalitas con mucho interletraje se leen bien; a 393 px de ancho y con el brillo del sol encima, no. Sube el peldaño más bajo, no todos los tamaños. */ @media (max-width:600px){ .eyebrow,.quien-principal .rol,.quien-sec .rol,.org .quien-es, table.normas th,.tarjeta-eyebrow,.tarjeta-pill,.pie-col h4,.dato .k,.hero-coords, .hechos b,.pantallas-nota{font-size:12px} .plan .badge{font-size:11.5px} } /* ── La tabla de normas se desplaza, y hay que decirlo ────────────── Medido a 393 px: la caja mide 344 y la tabla 640, así que la columna «Estado» queda entera fuera de la vista. La tabla se desplaza — eso ya funcionaba — pero nada lo anunciaba: se veía como una tabla completa a la que le faltan datos. */ .tabla-pista{ display:none;margin-top:12px; font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--azul-claro); } @media (max-width:840px){ .tabla-pista{display:block} } /* ═══════════════════════════════════════════════════════════════════════ LA PRUEBA GRATUITA · «La invitación» (11-sep-2026) Pedido de Julián: «menos seria sin dejar de tener nuestro branding, más invitacional, menos rígida». La página se apoya en todo lo de arriba y cambia solo lo suyo: sin folio ni filete de sección, formas redondas, el pase de prueba y la ruta de cuatro paradas. El mismo pase, en pequeño, cierra el inicio (`.invitacion`). ═══════════════════════════════════════════════════════════════════════ */ /* El resplandor se sale del ancho a propósito; el recorte evita que eso se vuelva desplazamiento horizontal (medido a 1280 px). */ .pagina-prueba{overflow-x:clip} .pagina-prueba section{padding:36px 0 76px} .pagina-prueba section > .contener{border-top:0;padding-top:0} .pagina-prueba section > .contener::before, .pagina-prueba section > .contener::after{display:none} .pp-hero{position:relative;isolation:isolate;padding:60px 0 64px} .pp-hero::before{ content:"";position:absolute;right:-8%;top:-12%;width:760px;height:760px;max-width:100%; background:radial-gradient(closest-side, rgba(0,87,214,.26), transparent 72%); z-index:-1;pointer-events:none; } .pp-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center} @media (max-width:900px){ .pp-hero-grid{grid-template-columns:1fr;gap:44px} } .pp-hero h1{font-size:clamp(38px,5.8vw,64px);margin-top:18px} .pp-hero h1 .acento{display:block;color:var(--dorado)} .pp-hero .sub{margin-top:18px;font-size:clamp(16.5px,2vw,19px)} .pp-chips{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0;list-style:none} .pp-chips li{ display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px; background:rgba(153,188,239,.09);border:1px solid rgba(153,188,239,.22);font-size:14px;font-weight:600; } .pp-chips svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--dorado);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .pp-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:30px} .pp-acciones .btn{font-size:16px;padding:14px 30px;border-radius:999px} .pp-enlace{color:var(--azul-claro);font-weight:600;text-decoration:none} .pp-enlace:hover{text-decoration:underline} /* ---- El pase de prueba ---- */ .pase{ position:relative;max-width:420px;margin:0 0 0 auto;border-radius:24px; background:linear-gradient(160deg,#123675 0%, var(--navy-2) 58%); border:1px solid rgba(153,188,239,.3); box-shadow:0 34px 70px -30px rgba(0,8,30,.95); /* Las dos muescas del corte, recortadas en la tarjeta misma: así sirven sobre cualquier fondo, también sobre el resplandor de la cabecera. */ -webkit-mask:radial-gradient(circle 13px at 0 150px,transparent 12px,#000 13px) left/51% 100% no-repeat, radial-gradient(circle 13px at 100% 150px,transparent 12px,#000 13px) right/51% 100% no-repeat; mask:radial-gradient(circle 13px at 0 150px,transparent 12px,#000 13px) left/51% 100% no-repeat, radial-gradient(circle 13px at 100% 150px,transparent 12px,#000 13px) right/51% 100% no-repeat; } .pase-escena{position:relative;padding:26px 22px 0 0;transform:rotate(-3deg);animation:pase-flota 7s ease-in-out infinite} @keyframes pase-flota{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-9px)}} @media (max-width:900px){ .pase-escena{max-width:420px;margin:0 auto;padding-right:14px} .pase{margin:0 auto} } .pase-cab{height:150px;padding:26px 28px 0} .pase-rotulo{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--azul-claro)} .pase-titulo{margin-top:14px;font-weight:800;font-size:44px;line-height:1;letter-spacing:-.01em} .pase-titulo small{display:block;margin-top:9px;font-size:16px;font-weight:600;letter-spacing:0;color:var(--tinta-72)} .pase-corte{margin:0 24px;border-top:2px dashed rgba(153,188,239,.36)} .pase-cuerpo{padding:22px 28px 24px;display:grid;grid-template-columns:1fr 1fr;gap:16px 18px} .pase-dato span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-55)} .pase-dato b{display:block;margin-top:4px;font-size:16.5px;font-weight:700} .pase-pie{ grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;gap:12px; border-top:1px solid rgba(153,188,239,.16);padding-top:14px;font-size:13.5px;color:var(--tinta-72); } .pase-codigo{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--azul-claro)} .pase-sello{ position:absolute;top:0;right:0;width:108px;height:108px;border-radius:50%; display:grid;place-items:center;text-align:center;z-index:2; background:var(--dorado);color:var(--navy);font-weight:800;font-size:16px;line-height:1.02; transform:rotate(12deg);box-shadow:0 14px 28px -12px rgba(188,191,0,.55); } .pase-sello::after{content:"";position:absolute;inset:6px;border-radius:50%;border:1.5px dashed rgba(0,22,54,.45)} /* ---- La ruta: los pasos, como un recorrido ---- */ .pp-titulo h2{margin-top:14px;max-width:18em} .ruta{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative} .ruta::before{content:"";position:absolute;left:24px;right:calc(25% - 12px);top:23px;border-top:2px dashed rgba(153,188,239,.36)} /* El punto que camina la ruta. Va en ::after y no en un elemento, porque un

    solo admite
  1. como hijos. */ .ruta::after{ content:"";position:absolute;top:18px;left:24px;width:12px;height:12px;border-radius:50%; background:var(--azul-claro);box-shadow:0 0 0 6px rgba(153,188,239,.16); animation:caminar 7s cubic-bezier(.45,0,.55,1) infinite; } @keyframes caminar{0%{left:24px;opacity:0}8%{opacity:1}88%{opacity:1}100%{left:calc(75% - 12px);opacity:0}} .ruta li{position:relative} .ruta-punto{ position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%; background:var(--navy-2);border:2px solid var(--azul);font-weight:800;font-size:18px; } .ruta li:last-child .ruta-punto{background:var(--dorado);border-color:var(--dorado);color:var(--navy)} .ruta b{display:block;margin-top:16px;font-size:18.5px} .ruta p{margin-top:6px;color:var(--tinta-72);font-size:15px} @media (max-width:800px){ .ruta{grid-template-columns:1fr;gap:26px} .ruta::before{left:23px;right:auto;top:24px;bottom:24px;border-top:0;border-left:2px dashed rgba(153,188,239,.36)} .ruta::after{display:none} .ruta li{padding-left:68px;min-height:48px} .ruta-punto{position:absolute;left:0;top:0} .ruta b{margin-top:10px} } /* ---- El formulario: tres datos, y lo demás plegado ---- */ .pp-final{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:start} @media (max-width:900px){ .pp-final{grid-template-columns:1fr} } .pagina-prueba form.contacto{border-radius:26px;padding:36px 34px 30px;background:linear-gradient(180deg,#0e2958,var(--navy-2));border-color:rgba(153,188,239,.24)} @media (max-width:600px){ .pagina-prueba form.contacto{padding:28px 20px 24px} } .pp-form-titulo{font-size:clamp(28px,3.6vw,38px);margin-top:14px} .pp-form-sub{margin:8px 0 24px;color:var(--tinta-72)} .pagina-prueba .campo input,.pagina-prueba .campo textarea{border-radius:12px} .pp-mas{margin:2px 0 18px;border:1px dashed rgba(153,188,239,.32);border-radius:16px;padding:0 16px} .pp-mas summary{cursor:pointer;list-style:none;padding:14px 0;font-weight:600;display:flex;align-items:center;gap:10px} .pp-mas summary::-webkit-details-marker{display:none} .pp-mas summary .opcional{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-55)} .pp-mas summary::after{content:"+";margin-left:auto;font-size:22px;line-height:1;color:var(--azul-claro)} .pp-mas[open] summary::after{content:"−"} .pp-mas[open]{padding-bottom:4px} .pagina-prueba form.contacto .btn{width:100%;font-size:17px;padding:15px 20px;border-radius:999px;cursor:pointer} .pp-mas summary:focus-visible,.pp-faq summary:focus-visible{outline:2px solid var(--azul-claro);outline-offset:3px;border-radius:10px} /* ---- Preguntas rápidas ---- */ .pp-faq h3{font-size:22px;font-weight:800} .pp-faq details{margin-top:12px;border-radius:18px;background:rgba(153,188,239,.06);border:1px solid rgba(153,188,239,.15);padding:0 18px} .pp-faq summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:600;display:flex;gap:12px} .pp-faq summary::-webkit-details-marker{display:none} .pp-faq summary::after{content:"+";margin-left:auto;color:var(--dorado);font-size:22px;line-height:1} .pp-faq details[open] summary::after{content:"−"} .pp-faq details p{padding:0 0 16px;color:var(--tinta-72);font-size:15px} /* ---- El mismo pase, en pequeño, cerrando el inicio ---- */ .invitacion{text-align:left} .invitacion .caja{padding:46px 34px 50px} @media (max-width:600px){ .invitacion .caja{padding:34px 20px 38px} } .invitacion-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center} @media (max-width:900px){ .invitacion-grid{grid-template-columns:1fr;gap:34px} } .invitacion h2{margin:16px 0 0;max-width:16em;font-size:clamp(26px,3.6vw,40px)} .invitacion .sub{margin-top:14px;max-width:34ch} .invitacion .pp-acciones{margin-top:26px} .invitacion .pp-acciones .btn{margin-top:0} .pase-escena-mini{padding:22px 18px 0 0;max-width:360px;margin-left:auto} @media (max-width:900px){ .pase-escena-mini{margin:0 auto} } .pase-mini{ max-width:330px; -webkit-mask:radial-gradient(circle 11px at 0 118px,transparent 10px,#000 11px) left/51% 100% no-repeat, radial-gradient(circle 11px at 100% 118px,transparent 10px,#000 11px) right/51% 100% no-repeat; mask:radial-gradient(circle 11px at 0 118px,transparent 10px,#000 11px) left/51% 100% no-repeat, radial-gradient(circle 11px at 100% 118px,transparent 10px,#000 11px) right/51% 100% no-repeat; } .pase-mini .pase-cab{height:118px;padding:20px 22px 0} .pase-mini .pase-titulo{margin-top:10px;font-size:34px} .pase-mini .pase-titulo small{margin-top:7px;font-size:14px} .pase-mini .pase-corte{margin:0 20px} .pase-mini .pase-cuerpo{padding:18px 22px 20px;gap:12px 14px} .pase-mini .pase-dato b{font-size:15px} .pase-mini .pase-pie{padding-top:12px;font-size:12.5px} .pase-escena-mini .pase-sello{width:84px;height:84px;font-size:13px} /* ── «Cómo funciona» como RIEL DE PASOS (11-sep-2026) ──────────────────── Elegido por Julián entre cuatro muestras. Todo lo de aquí abajo cuelga de .ciclo-riel, que pone ciclo.js SOLO cuando ya está corriendo: sin JavaScript no se aplica ni una regla y el bloque se queda siendo la pila de cinco filas de siempre, completa y legible. */ .ciclo-riel{display:block;background:transparent;border:0;border-radius:0;overflow:visible} .riel-barra{ display:flex;overflow-x:auto;scrollbar-width:thin; border:1px solid var(--navy-3);border-bottom:0;border-radius:14px 14px 0 0; background:var(--navy); } /* La pista de que el riel sigue: medido a 390 px, el riel mide 340 y su contenido 590, asi que la quinta pestana queda fuera y nada lo decia — se leia como si hubiera cuatro movimientos. El degradado lo enciende ciclo.js SOLO por el lado por el que falta contenido; permanente seria un adorno que miente. */ .ciclo-riel{position:relative} .ciclo-riel::before, .ciclo-riel::after{ content:"";position:absolute;top:1px;width:44px;pointer-events:none;z-index:2; opacity:0;transition:opacity .2s; } .ciclo-riel::after{right:1px;border-radius:0 13px 0 0;background:linear-gradient(to left, var(--navy) 12%, rgba(0,22,54,0) 100%)} .ciclo-riel::before{left:1px;border-radius:13px 0 0 0;background:linear-gradient(to right, var(--navy) 12%, rgba(0,22,54,0) 100%)} .ciclo-riel.riel-mas-der::after, .ciclo-riel.riel-mas-izq::before{opacity:1} .riel-pestana{ flex:1 0 auto;min-width:136px;text-align:left;cursor:pointer; background:none;border:0;border-bottom:3px solid transparent; padding:15px 18px 16px; font-family:var(--sans);font-size:15px;font-weight:600;color:var(--tinta-55); transition:color .2s, border-color .2s, background .2s; } .riel-pestana .n{ display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em; margin-bottom:6px;color:var(--tinta-55);transition:color .2s; } .riel-pestana:hover{color:var(--blanco);background:var(--navy-2)} .riel-pestana[aria-selected="true"]{color:var(--blanco);border-bottom-color:var(--dorado)} .riel-pestana[aria-selected="true"] .n{color:var(--dorado)} .riel-pestana:focus-visible{outline:2px solid var(--azul-claro);outline-offset:-3px} /* El degradado cubre solo la barra: se le da su alto con una variable que ciclo.js no necesita tocar porque la barra tiene alto propio. */ .ciclo-riel::before, .ciclo-riel::after{height:var(--alto-riel,68px)} .riel-cuerpo{ border:1px solid var(--navy-3);border-top:0;border-radius:0 0 14px 14px; overflow:hidden;background:var(--navy-2); } /* 🔴 Sin esta regla el atributo `hidden` no esconde nada: .paso declara display:grid y gana. Los cinco paneles saldrían apilados DEBAJO del riel. */ .ciclo-riel .paso[hidden]{display:none} .ciclo-riel .paso{ grid-template-columns:1.25fr .75fr;min-height:clamp(340px,34vw,420px); border:0; } /* El zig-zag deja de tener sentido con un solo panel a la vista: aquí la foto va siempre a la izquierda. */ .ciclo-riel .paso:nth-child(even){grid-template-columns:1.25fr .75fr} .ciclo-riel .paso:nth-child(even) .paso-foto{order:0} .ciclo-riel .paso-texto{background:var(--navy-2);padding:34px 32px 36px} /* El hover de fondo se retira dentro del riel: con un solo panel a la vista no marca nada. Y `.paso.final` —que en el zig-zag distinguia el ultimo— gana por especificidad, asi que se nombra: si no, pasar el raton por el quinto panel lo cambiaba de color y los otros cuatro no. */ .ciclo-riel .paso:hover .paso-texto, .ciclo-riel .paso.final .paso-texto, .ciclo-riel .paso.final:hover .paso-texto{background:var(--navy-2)} .ciclo-riel .paso-texto h3{font-size:28px} .ciclo-riel .paso-texto p{max-width:42ch} /* Como en la muestra que aprobó Julián: dentro del panel no van el icono ni el número. El número ya lo dicen la pestaña y el avance, y repetido tres veces en la misma vista era ruido. */ .ciclo-riel .paso-texto .ico, .ciclo-riel .paso-texto .num{display:none} .ciclo-riel .paso:focus-visible{outline:2px solid var(--azul-claro);outline-offset:-2px} /* El avance: con un solo paso a la vista, el orden deja de verse solo. Esto es lo que sigue contando que son cinco y que van seguidos. */ .riel-avance{ display:flex;align-items:center;gap:12px;margin-top:26px; font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--tinta-55); } .riel-avance i{flex:1;height:2px;background:rgba(255,255,255,.16);position:relative;display:block} .riel-avance i b{position:absolute;left:0;top:0;bottom:0;background:var(--dorado)} @media (max-width:820px){ .ciclo-riel .paso, .ciclo-riel .paso:nth-child(even){grid-template-columns:1fr;min-height:0} /* 16:9 y no un alto fijo: con 230 px, entre 761 y 820 px de ancho la foto quedaba en una franja de más de 3:1 y la ilustración se recortaba. */ .ciclo-riel .paso-foto{min-height:0;aspect-ratio:16/9} .ciclo-riel .paso-texto{padding:28px 22px 30px} .ciclo-riel .paso-texto h3{font-size:24px} .riel-pestana{min-width:118px;font-size:14px;padding:13px 15px 14px} } /* Al imprimir o guardar como PDF no hay pestañas que tocar: salen los cinco pasos, como en la versión sin JavaScript. Sin esto el papel llevaba uno. */ @media print{ .riel-barra{display:none} .ciclo-riel .paso[hidden]{display:grid !important} .ciclo-riel::before,.ciclo-riel::after{display:none} } /* En alto contraste de Windows el sistema sustituye los colores y el dorado de la pestaña abierta deja de distinguirse: se marca con el color de selección del sistema y con subrayado, que no depende del color. */ @media (forced-colors:active){ .riel-pestana[aria-selected="true"]{border-bottom-color:Highlight} .riel-pestana[aria-selected="true"] .t{text-decoration:underline} } /* ═══════════════════════════════════════════════════════════════════════════ PÁGINA DE PRODUCTO · LOS BLOQUES ELEGIDOS (13-sep-2026) De las cuatro propuestas de Web/propuestas/producto/, Julián eligió la cabecera de B, el ciclo de A, el reloj y los tres trabajos de C y los roles de D. «Sin señal», el cierre, la barra y el pie siguen como estaban. Todo lo de abajo está COPIADO LITERAL de comun.css, b.css, a.css, c.css y d.css; lo único adaptado es la ruta de la imagen del plano y que el margen de la cabecera se limita a esta página. Prefijos: gp- (común), ex- (cabecera), ca- (ciclo), rj- (reloj y tres trabajos), an- (roles). El comportamiento vive en producto.js. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --org-int:#99BCEF; /* interventoría: azul claro */ --org-op:#FFFFFF; /* operador AOM: blanco */ --org-mun:#BCBF00; /* municipio: dorado */ --e-abierto:#FF6B6B; --e-proceso:#F59E0B; --e-solucionado:#5DCAA5; --e-cerrado:#9AA6B8; } .gp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ── La cabecera de esta página recupera sus 24 px laterales ─────────────── Como en la muestra aprobada. .cabecera{padding:72px 0 8px} va después de .contener{padding:0 24px} con la misma especificidad y se los quita (medido el 13-sep-2026: a 390 px el titular tocaba el borde, y a 1280 px arrancaba 24 px antes que las secciones). Limitado a .ex-cabecera a propósito: precios, normatividad y contacto tienen el mismo defecto, y la barra de navegación también; su arreglo va aparte. */ .contener.cabecera.ex-cabecera{padding-left:24px;padding-right:24px} /* ── Cabecera partida: texto a la izquierda, pieza a la derecha ─────────── */ .gp-cab{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-bottom:40px} @media (max-width:920px){ .gp-cab{grid-template-columns:1fr;gap:36px} } .gp-cab .pp-acciones{margin-top:28px} /* A 58 px, en media columna el titular salía en cinco líneas y con «tres» sola en una (medido a 1280 px en la propuesta B). */ .gp-cab h1{font-size:clamp(34px,4.4vw,50px)} /* ── Quién: la organización con su punto de color ───────────────────────── */ .gp-actor{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-72)} .gp-actor::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c,var(--org-int));flex:none} .gp-actor[data-org="int"]{--c:var(--org-int)} .gp-actor[data-org="op"]{--c:var(--org-op)} .gp-actor[data-org="mun"]{--c:var(--org-mun)} .gp-actor[data-org="sis"]{--c:transparent} .gp-actor[data-org="sis"]::before{border:1.5px solid var(--tinta-55)} /* ── Estado del caso: la píldora de la app ──────────────────────────────── */ .gp-estado{ display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:999px; font-size:13px;font-weight:700;line-height:1.3;white-space:nowrap; color:var(--ce);border:1px solid color-mix(in srgb,var(--ce) 55%,transparent); background:color-mix(in srgb,var(--ce) 13%,transparent); transition:color .35s,border-color .35s,background-color .35s; } .gp-estado::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor} .gp-estado,[data-estado="Abierto"] > .gp-estado{--ce:var(--e-abierto)} [data-estado="En Proceso"] > .gp-estado,.gp-estado[data-estado="En Proceso"]{--ce:var(--e-proceso)} [data-estado="Solucionado"] > .gp-estado,.gp-estado[data-estado="Solucionado"]{--ce:var(--e-solucionado)} [data-estado="Cerrado"] > .gp-estado,.gp-estado[data-estado="Cerrado"]{--ce:var(--e-cerrado)} .gp-estado[data-estado="Abierto"]{--ce:var(--e-abierto)} .gp-severidad{display:inline-block;padding:3px 10px;border-radius:6px;font-size:12px;font-weight:800;letter-spacing:.06em;color:#fff;background:#C40000} /* ── Mandos: botones de control de los ciclos ───────────────────────────── */ .gp-mandos{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px} .gp-mando{ display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 18px;border-radius:999px; background:var(--navy-2);border:1px solid var(--navy-3);color:var(--blanco); font-family:var(--sans);font-size:14.5px;font-weight:600;cursor:pointer; transition:border-color .2s,background-color .2s,transform .15s; } .gp-mando:hover{border-color:#2a4f8f;background:#0e2a58} .gp-mando:active{transform:translateY(1px)} .gp-mando:focus-visible{outline:2px solid var(--azul-claro);outline-offset:3px} .gp-mando svg{width:16px;height:16px;flex:none;fill:currentColor} .gp-mando[aria-pressed="true"]{border-color:var(--dorado);color:var(--dorado);background:rgba(188,191,0,.08)} /* El interruptor: un sí/no que cambia el camino del caso */ .gp-interruptor{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:6px 16px 6px 8px;border-radius:999px;border:1px solid var(--navy-3);background:transparent;color:var(--tinta-72);font-family:var(--sans);font-size:14.5px;font-weight:600;cursor:pointer} .gp-interruptor i{position:relative;width:40px;height:24px;border-radius:999px;background:var(--navy-3);transition:background-color .25s;flex:none} .gp-interruptor i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .25s cubic-bezier(.16,1,.3,1)} .gp-interruptor[aria-pressed="true"]{color:var(--blanco);border-color:#2a4f8f} .gp-interruptor[aria-pressed="true"] i{background:var(--azul)} .gp-interruptor[aria-pressed="true"] i::after{transform:translateX(16px)} .gp-interruptor:focus-visible{outline:2px solid var(--azul-claro);outline-offset:3px} /* Sin JavaScript los ciclos se leen como lista; con él, la lista la reemplaza la pieza interactiva. La clase la pone cada módulo al armarse. */ .gp-armado .gp-solo-sin-js{display:none!important} /* ── Cabecera: «El sello», con el círculo de la invitación (14-sep-2026) ── */ /* Aquí iba la captura de la app en un teléfono. Julián pidió cambiarla por «El sello» y conservar el círculo «Evidencia inmutable». Su lugar se midió: a la derecha, como iba sobre el teléfono, tapaba la fecha y la ubicación del sello; pegado por dentro de la esquina de la izquierda, la cabeza de la luminaria, que es lo que muestra el hallazgo. Va centrado sobre esa esquina, sobresaliendo, y en celular más chico; las pruebas 2 y 6 de verificar-producto.mjs miden cuánto le sobra. Sin flotar: la muestra ya se mueve y se toca. */ .ex-sello-marco{position:relative;margin:0 0 0 auto;max-width:470px;padding:34px 0 0 30px} .ex-sello-marco .pase-sello{right:auto;left:-26px;top:-24px} @media (max-width:920px){ .ex-sello-marco{margin:0 auto;max-width:520px;padding-top:46px} .ex-sello-marco .pase-sello{top:-12px} } @media (max-width:600px){ .ex-sello-marco{padding-top:50px} .ex-sello-marco .pase-sello{left:-10px;top:-14px;width:84px;height:84px;font-size:13px} } .ex-sello-pie{margin-top:14px;text-align:center;font-size:13px;color:var(--tinta-55)} .ex-sello{width:104px;height:104px;font-size:14px} /* ── El escenario ───────────────────────────────────────────────────────── */ .ca-intro{margin-top:16px} .ca-ciclo{margin-top:36px} .ca-escena{ position:relative;height:372px;border:1px solid var(--navy-3);border-radius:16px;overflow:hidden; background:linear-gradient(180deg,rgba(10,33,72,.6),rgba(0,22,54,.15)); user-select:none;-webkit-user-select:none; } .ca-carriles{position:absolute;inset:0;display:grid;grid-template-rows:repeat(3,1fr)} .ca-carril{position:relative;display:flex;align-items:center;padding-left:22px;border-top:1px dashed rgba(153,188,239,.16);transition:background-color .45s} .ca-carril:first-child{border-top:0} .ca-carril.ca-activo{background:rgba(153,188,239,.065)} .ca-carril .gp-actor{font-size:12px;color:var(--tinta-55);transition:color .35s} .ca-carril.ca-activo .gp-actor{color:var(--blanco)} .ca-trazo{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none} .ca-base{fill:none;stroke:rgba(153,188,239,.34);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round} .ca-hecho{fill:none;stroke:var(--azul-claro);stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .ca-vuelta-trazo{fill:none;stroke:rgba(188,191,0,.32);stroke-width:2;stroke-dasharray:5 6;stroke-linecap:round;transition:stroke .35s} .ca-con-vuelta .ca-vuelta-trazo{stroke:var(--dorado)} .ca-etiqueta-vuelta{ position:absolute;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap; font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:rgba(188,191,0,.7);background:var(--navy);padding:3px 9px;border-radius:999px;border:1px solid rgba(188,191,0,.25); transition:color .35s,border-color .35s; } .ca-con-vuelta .ca-etiqueta-vuelta{color:var(--dorado);border-color:rgba(188,191,0,.6)} /* Las paradas: 44 px de toque, 16 px de punto */ .ca-parada{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;border-radius:50%;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center;z-index:2} .ca-parada[data-org="int"]{--c:var(--org-int)} .ca-parada[data-org="op"]{--c:var(--org-op)} .ca-parada[data-org="mun"]{--c:var(--org-mun)} .ca-parada-punto{width:16px;height:16px;border-radius:50%;background:var(--navy);border:2px solid var(--c);transition:transform .3s cubic-bezier(.16,1,.3,1),background-color .3s,box-shadow .3s} .ca-parada:hover .ca-parada-punto{transform:scale(1.2)} .ca-parada.ca-visto .ca-parada-punto{background:var(--c)} .ca-parada.ca-actual .ca-parada-punto{transform:scale(1.3);box-shadow:0 0 0 7px color-mix(in srgb,var(--c) 20%,transparent)} /* El halo navy deja leer el rótulo aunque el trazo le pase por debajo */ .ca-parada-rotulo{position:absolute;top:calc(100% - 2px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:13px;font-weight:600;color:var(--tinta-72);transition:color .3s;text-shadow:0 0 3px var(--navy),0 0 7px var(--navy),0 0 12px var(--navy)} /* En columnas, el desvío corre en vertical y su rótulo lo acompaña */ .ca-vertical .ca-etiqueta-vuelta{writing-mode:vertical-rl;transform:translate(-50%,-50%) rotate(180deg);padding:9px 3px} .ca-parada.ca-actual .ca-parada-rotulo{color:var(--blanco)} .ca-parada:focus-visible{outline:2px solid var(--azul-claro);outline-offset:2px} /* El caso que viaja: se arrastra con el dedo o el ratón */ .ca-caso{ position:absolute;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;z-index:3; border-radius:50%;background:var(--navy-2);border:2.5px solid var(--ce,var(--e-abierto)); display:grid;place-items:center;cursor:grab;touch-action:none; box-shadow:0 10px 22px -10px rgba(0,0,0,.9);transition:border-color .35s; } .ca-caso svg{width:16px;height:16px} .ca-caso::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--ce,var(--e-abierto));opacity:0;pointer-events:none} .ca-caso.ca-corre::after{animation:ca-pulso 1.5s ease-out infinite} .ca-caso.ca-agarrado{cursor:grabbing} @keyframes ca-pulso{0%{transform:scale(.72);opacity:.85}100%{transform:scale(1.4);opacity:0}} /* ── Mandos ─────────────────────────────────────────────────────────────── */ .ca-mandos{margin-top:18px} .ca-avance{flex:1 1 220px;min-width:160px;height:44px;margin:0;accent-color:var(--dorado);cursor:pointer} /* ── El caso ahora + lo que pasa en este momento ────────────────────────── */ .ca-tablero{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:30px;margin-top:22px;align-items:start} @media (max-width:860px){ .ca-tablero{grid-template-columns:1fr;gap:18px} } .ca-ficha{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:14px;border:1px solid var(--navy-3);border-radius:14px;background:var(--navy-2)} .ca-ficha img{width:92px;height:92px;object-fit:cover;border-radius:10px;display:block} .ca-ficha-datos{display:grid;gap:8px;align-content:start;min-width:0} .ca-ficha-id{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--tinta-55)} .ca-ficha-fila{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .ca-reloj{font-size:13.5px;line-height:1.4;color:var(--tinta-72)} .ca-reloj b{color:var(--blanco);font-weight:600} .gp-estado.ca-cambia{animation:ca-cambia .5s cubic-bezier(.16,1,.3,1)} @keyframes ca-cambia{0%{transform:scale(.8);opacity:.2}60%{transform:scale(1.06);opacity:1}100%{transform:none}} .ca-pasos{list-style:none;padding:0;margin:0;display:grid;gap:16px} .ca-paso-cab{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .ca-n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--dorado)} .ca-paso h3{font-size:clamp(22px,2.6vw,28px);font-weight:800;line-height:1.15;margin-top:10px} .ca-paso p{color:var(--tinta-72);margin-top:8px;max-width:62ch} .ca-queda{font-size:14.5px} .ca-queda b{color:var(--blanco);font-weight:600} .gp-armado .ca-paso[hidden]{display:none} .gp-armado .ca-paso.ca-entra{animation:ca-entra .5s cubic-bezier(.16,1,.3,1)} @keyframes ca-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* Sin JavaScript: los siete momentos, enteros, como tarjetas */ .ca-ciclo:not(.gp-armado) .ca-pasos{grid-template-columns:repeat(2,minmax(0,1fr))} .ca-ciclo:not(.gp-armado) .ca-paso{padding:20px 22px;border:1px solid var(--navy-3);border-radius:12px;background:var(--navy-2)} @media (max-width:760px){ .ca-ciclo:not(.gp-armado) .ca-pasos{grid-template-columns:1fr} } /* ── Celular: los carriles se vuelven columnas y el caso baja ───────────── */ @media (max-width:640px){ .ca-escena{height:600px} .ca-carriles{grid-template-rows:none;grid-template-columns:repeat(3,1fr)} .ca-carril{align-items:flex-start;justify-content:center;padding:16px 4px 0;border-top:0;border-left:1px dashed rgba(153,188,239,.16);text-align:center} .ca-carril:first-child{border-left:0} .ca-carril .gp-actor{font-size:10.5px;letter-spacing:.04em;flex-direction:column;gap:6px} .ca-parada-rotulo{top:50%;left:calc(100% - 6px);transform:translateY(-50%);font-size:12.5px} .ca-parada.ca-rotulo-izq .ca-parada-rotulo{left:auto;right:calc(100% - 6px)} .ca-ficha{grid-template-columns:72px 1fr} .ca-ficha img{width:72px;height:72px} } /* ── El simulador ───────────────────────────────────────────────────────── */ .rj-sim{margin-top:36px;border:1px solid var(--navy-3);border-radius:18px;background:linear-gradient(180deg,rgba(10,33,72,.62),rgba(0,22,54,.2));padding:22px 24px 24px} @media (max-width:600px){ .rj-sim{padding:16px 14px 18px} } .rj-ejemplo p{color:var(--tinta-72);max-width:70ch} .rj-ejemplo p + p{margin-top:12px} .rj-ejemplo b{color:var(--blanco)} .rj-controles{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px} .rj-sev{display:inline-flex;padding:4px;border-radius:999px;border:1px solid var(--navy-3);background:var(--navy)} .rj-sev button{min-height:40px;padding:6px 16px;border:0;border-radius:999px;background:transparent;color:var(--tinta-72);font-family:var(--sans);font-size:14.5px;font-weight:600;cursor:pointer;transition:background-color .2s,color .2s} .rj-sev button small{font-family:var(--mono);font-size:11.5px;font-weight:500;margin-left:4px;opacity:.8} .rj-sev button[aria-checked="true"]{background:var(--azul);color:#fff} .rj-sev button:focus-visible{outline:2px solid var(--azul-claro);outline-offset:2px} .rj-sev button{white-space:nowrap} /* A 390 px «Crítica 6 h» partía las horas en otra línea (medido). */ @media (max-width:600px){ .rj-sev{display:flex;width:100%} .rj-sev button{flex:1;padding:6px 6px;font-size:13.5px} .rj-controles .gp-interruptor{text-align:left} } .rj-cuadro{margin-top:22px;--etiqueta:66px;--fila:34px} @media (max-width:600px){ .rj-cuadro{--etiqueta:48px;--fila:31px} } .rj-regla{position:relative;height:20px;margin-left:var(--etiqueta);font-family:var(--mono);font-size:10.5px;color:var(--tinta-55)} .rj-regla span{position:absolute;top:0;transform:translateX(-50%)} .rj-regla span:first-child{transform:none} .rj-regla span:last-child{transform:translateX(-100%)} .rj-filas{position:relative;touch-action:pan-y;cursor:crosshair;user-select:none;-webkit-user-select:none} .rj-fila{display:grid;grid-template-columns:var(--etiqueta) 1fr;align-items:center;height:var(--fila)} .rj-dia{font-family:var(--mono);font-size:12px;color:var(--tinta-72)} .rj-finde .rj-dia{color:var(--tinta-55)} .rj-pista{position:relative;height:calc(var(--fila) - 8px);border-radius:5px;background:rgba(0,8,26,.55)} .rj-ventana{position:absolute;top:0;bottom:0;left:25%;width:50%;border-radius:4px;background:rgba(153,188,239,.11);box-shadow:inset 0 0 0 1px rgba(153,188,239,.1)} .rj-sin{position:absolute;inset:0;display:grid;place-items:center;font-size:11.5px;color:var(--tinta-55)} .rj-trazos{position:absolute;inset:0;pointer-events:none} .rj-trazos i{position:absolute;top:5px;bottom:5px;border-radius:3px} .rj-trazos .rj-corre{background:var(--azul-claro)} .rj-trazos .rj-tarde{background:var(--e-abierto)} .rj-trazos .rj-descuento{background:repeating-linear-gradient(-45deg,rgba(188,191,0,.85) 0 4px,rgba(188,191,0,.25) 4px 8px)} .rj-trazos .rj-pasa{top:50%;bottom:auto;height:0;border-top:1.5px dotted rgba(153,188,239,.45);border-radius:0} .rj-aviso{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.16);z-index:2} .rj-vence{position:absolute;top:-5px;bottom:-5px;width:0;border-left:2px solid var(--dorado);z-index:3} .rj-vence b{position:absolute;bottom:calc(100% + 1px);left:0;transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;color:var(--dorado);background:var(--navy);padding:0 4px;border-radius:3px} .rj-con-salvedad .rj-vence:not(.rj-imputable){opacity:.5} .rj-imputable{border-left-style:dashed} .rj-imputable b{bottom:auto;top:calc(100% + 1px)} .rj-salvedad{position:absolute;top:-3px;bottom:-3px;border-radius:4px;border:1.5px dashed var(--dorado);z-index:1;pointer-events:none} /* Arriba y con fondo: debajo quedaba montado sobre la barra del día siguiente y no se leía (medido con «Masiva» y la salvedad del martes). */ .rj-salvedad b{position:absolute;bottom:calc(100% + 3px);left:0;white-space:nowrap;font-size:11px;font-weight:600;color:var(--dorado);background:var(--navy);padding:0 5px;border-radius:4px} .rj-salvedad.rj-entra{animation:rj-entra .55s cubic-bezier(.16,1,.3,1)} @keyframes rj-entra{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}} .rj-pin{position:absolute;top:-7px;bottom:-7px;width:0;z-index:4;outline:none} .rj-pin::before{content:"";position:absolute;top:0;bottom:0;left:-1px;border-left:2px solid var(--e-proceso)} .rj-pin::after{content:"";position:absolute;top:50%;left:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--navy);border:3px solid var(--e-proceso);box-shadow:0 6px 14px -6px rgba(0,0,0,.9);transition:transform .2s} .rj-pin:focus-visible::after{box-shadow:0 0 0 4px rgba(153,188,239,.65)} .rj-filas:active .rj-pin::after{transform:scale(1.15)} .rj-pin-rotulo{position:absolute;bottom:calc(100% + 2px);left:0;transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:700;color:var(--e-proceso);background:var(--navy);padding:0 5px;border-radius:4px} .rj-pin.rj-rotulo-abajo .rj-pin-rotulo{bottom:auto;top:calc(100% + 2px)} /* Al saltar la noche, un aviso breve en la fila que se deja */ .rj-duerme .rj-pista::after{content:"18:00 · el reloj no corre de noche";position:absolute;left:75%;top:50%;transform:translate(8px,-50%);white-space:nowrap;font-size:11px;color:var(--azul-claro);animation:rj-duerme 1.1s ease-out both;pointer-events:none} @keyframes rj-duerme{0%{opacity:0}20%,70%{opacity:1}100%{opacity:0}} @media (max-width:600px){ .rj-duerme .rj-pista::after{content:"no corre de noche"} } .rj-lectura{margin-top:24px;display:grid;grid-template-columns:1fr auto;gap:6px 22px;align-items:end;padding-top:20px;border-top:1px dashed rgba(153,188,239,.2)} @media (max-width:700px){ .rj-lectura{grid-template-columns:1fr} } .rj-tomo{grid-column:1/-1;font-size:15px;color:var(--tinta-72)} .rj-cifra{font-size:15px;color:var(--tinta-72)} .rj-cifra b{font-size:clamp(30px,4vw,40px);font-weight:800;color:var(--blanco);letter-spacing:-.01em;margin-right:6px;font-variant-numeric:tabular-nums} .rj-veredicto{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;font-weight:700;font-size:16px;color:var(--ce);border:1px solid color-mix(in srgb,var(--ce) 55%,transparent);background:color-mix(in srgb,var(--ce) 13%,transparent)} .rj-veredicto[data-ok="true"]{--ce:var(--e-solucionado)} .rj-veredicto[data-ok="false"]{--ce:var(--e-abierto)} .rj-veredicto.rj-cambia{animation:rj-cambia .45s cubic-bezier(.16,1,.3,1)} @keyframes rj-cambia{0%{transform:scale(.85)}60%{transform:scale(1.05)}100%{transform:none}} .rj-dos{grid-column:1/-1;font-size:14.5px;color:var(--tinta-72)} .rj-dos b{color:var(--blanco)} .rj-nota{grid-column:1/-1;font-size:13.5px;color:var(--tinta-55)} /* ── Tres trabajos ──────────────────────────────────────────────────────── */ .rj-tres{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} @media (max-width:980px){ .rj-tres{grid-template-columns:1fr} } .rj-trabajo{border:1px solid var(--navy-3);border-radius:16px;overflow:hidden;background:var(--navy-2);display:flex;flex-direction:column} .rj-trabajo figure{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--navy-3)} .rj-trabajo figure img{width:100%;height:100%;object-fit:cover;display:block} .rj-plano{display:flex!important;flex-wrap:wrap;align-content:center;justify-content:center;gap:8px;padding:18px;background: linear-gradient(rgba(0,22,54,.55),rgba(0,22,54,.55)),url("img/mapa-tablet-navy.jpg") center/cover} .rj-plano span{font-family:var(--mono);font-size:13px;padding:6px 11px;border-radius:7px;border:1px solid rgba(153,188,239,.35);background:rgba(0,22,54,.7);color:var(--azul-claro)} .rj-trabajo-texto{padding:20px 22px 24px} .rj-trabajo h3{font-size:24px;font-weight:800} .rj-promesa{margin-top:4px;font-size:15px;color:var(--tinta-72)} .rj-trabajo ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px} .rj-trabajo li{font-size:14.5px;line-height:1.5;color:var(--tinta-72);padding-left:16px;position:relative} .rj-trabajo li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--dorado)} .rj-trabajo li b{color:var(--blanco);font-weight:600} /* ── ¿Desde qué lado mira el ciclo? ─────────────────────────────────────── */ .an-quien{margin-top:40px} .an-quien-pestanas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} .an-quien-pestanas button{--c:var(--org-int);display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:10px 20px;border-radius:999px;border:1px solid var(--navy-3);background:var(--navy-2);color:var(--tinta-72);font-family:var(--sans);font-size:15px;font-weight:600;cursor:pointer;transition:border-color .2s,color .2s,background-color .2s} .an-quien-pestanas button[data-org="op"]{--c:var(--org-op)} .an-quien-pestanas button[data-org="mun"]{--c:var(--org-mun)} .an-quien-pestanas button::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)} .an-quien-pestanas button[aria-selected="true"]{color:var(--blanco);border-color:var(--c);background:color-mix(in srgb,var(--c) 9%,var(--navy-2))} .an-quien-pestanas button:focus-visible{outline:2px solid var(--azul-claro);outline-offset:3px} .an-quien-panel{--c:var(--org-int);display:grid;grid-template-columns:200px 1fr;gap:36px;align-items:start;padding:28px;border:1px solid var(--navy-3);border-radius:18px;background:var(--navy-2)} .an-quien-panel[data-org="op"]{--c:var(--org-op)} .an-quien-panel[data-org="mun"]{--c:var(--org-mun)} .an-quien:not(.gp-armado) .an-quien-panel + .an-quien-panel{margin-top:16px} .gp-armado .an-quien-panel[hidden]{display:none} @media (max-width:760px){ .an-quien-panel{grid-template-columns:1fr;gap:18px;padding:22px} .an-mini{max-width:160px} } .an-quien-panel h3{margin-top:8px;font-size:26px;font-weight:800} .an-mini-dice{margin-top:8px;color:var(--tinta-72)} .an-roles{margin:18px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 26px} .an-roles dt{font-weight:600;color:var(--azul-claro)} .an-roles dd{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:var(--tinta-72)} .an-mini svg{display:block;width:100%;height:auto} .an-m-base{fill:none;stroke:rgba(153,188,239,.28);stroke-width:1.5;stroke-dasharray:2 5} .an-m-punto{fill:var(--navy);stroke:rgba(153,188,239,.35);stroke-width:1.5} .an-m-si{fill:var(--c);stroke:var(--c);transform-box:fill-box;transform-origin:center} .an-mini text{font-family:var(--mono);font-size:9px;fill:var(--tinta-55);text-anchor:middle;dominant-baseline:central} .an-mini .an-m-si + text{fill:var(--navy);font-weight:700} .an-entra .an-m-si{animation:an-pop .55s cubic-bezier(.34,1.56,.64,1) both} @keyframes an-pop{from{transform:scale(0)}to{transform:none}} .an-nota{margin-top:20px;font-size:14.5px;color:var(--tinta-55)} /* ── Los seis del equipo · «La fila» en el inicio y «Señales» en Producto (15-sep-2026) COPIADO LITERAL de las muestras 1 y 2 de Web/propuestas/roles/seis-individuos.html, que eligió Julián: los seis roles dibujados como personas, que se quitan y se vuelven a poner, con la línea que dice qué pasa con el ciclo. Reemplaza a las etiquetas de texto de «Quite un rol», publicadas unas horas antes el mismo día; de ellas siguen la cuenta, la línea, «Volver a los seis», la línea bajo el título de Producto y las filas apagadas dentro de las pestañas. El comportamiento vive en roles.js. */ .ro2-cuenta{display:grid;justify-items:center;gap:7px;margin:0} .ro2-cuenta b{font-size:52px;font-weight:800;line-height:.9;font-variant-numeric:tabular-nums} .ro2-cuenta span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dorado);white-space:nowrap} .ro2-dice{margin:0;max-width:70ch;min-height:3.2em;font-size:15px;color:var(--tinta-72)} .ro2-dice strong{color:var(--blanco);font-weight:600} .ro2-alto .ro2-dice strong,.ro2-alto .ro2-cuenta b{color:#FFB4A8} .ro2-todos{min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid var(--navy-3);background:var(--navy-2);color:var(--blanco);font:600 14px/1.2 var(--sans);cursor:pointer;white-space:nowrap} .ro2-todos:hover{border-color:#2a4f8f} .ro2-todos:focus-visible{outline:2px solid var(--azul-claro);outline-offset:2px} .ro2-todos[hidden]{display:none} .ro2-sub{margin-top:14px;max-width:64ch;font-size:17px;color:var(--tinta-72)} .ro2-sub b{color:var(--blanco);font-weight:600} .an-roles > div{transition:opacity .3s} .an-roles > div.ro2-fuera{opacity:.4} .an-roles > div.ro2-fuera dt::after{content:"fuera del equipo";margin-left:10px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-55)} .an-roles > div.ro2-falta{opacity:1} .an-roles > div.ro2-falta dt{color:#FFB4A8} .an-roles > div.ro2-falta dt::after{content:"hace falta";color:#FFB4A8} /* La franja del inicio y el tablero de Producto: el dibujo de los seis a la izquierda; la cuenta, la línea y «Volver a los seis» a la derecha. */ .eq-pie{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:24px 44px;padding:30px 42px 32px;background:var(--navy)} .eq-tablero{margin-top:30px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:24px 40px;padding:26px 30px;border:1px solid var(--navy-3);border-radius:18px;background:var(--navy-2)} .eq-pie[hidden],.eq-tablero[hidden]{display:none} .eq-tablero + .an-quien{margin-top:26px} .eq-estado{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px 22px} .eq-estado .ro2-dice{min-height:4.8em} .eq-estado .ro2-todos{grid-column:2;justify-self:start} /* minmax(0,1fr) y no 1fr: con 1fr el ancho fijo del anillo estiraba la columna y en celular se salía de la tarjeta. */ @media (max-width:980px){ .eq-pie,.eq-tablero{grid-template-columns:minmax(0,1fr)} } @media (max-width:600px){ .eq-pie{padding:24px 20px} .eq-tablero{padding:22px 16px} } /* Cada persona es un botón: se quita y se vuelve a poner. El color es el de su organización; lo que la distingue va encima, en navy. */ .eq-persona{--c:var(--org-int);--cuerpo:var(--c);--detalle:var(--navy);--corte:var(--c)} .eq-persona[data-org="op"]{--c:var(--org-op)} .eq-persona[data-org="mun"]{--c:var(--org-mun)} .eq-persona{position:relative;display:inline-grid;justify-items:center;align-content:end;gap:7px;margin:0;padding:6px 2px 2px;border:0;border-radius:12px;background:none;color:var(--tinta-72);font:500 10px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent} .eq-persona:focus-visible{outline:2px solid var(--azul-claro);outline-offset:2px} .eq-persona svg{display:block;overflow:visible} .eq-cap{white-space:nowrap;transition:color .25s} .eq-cu{fill:var(--cuerpo)} .eq-de{fill:var(--detalle)} .eq-co{fill:var(--corte)} .eq-cos{fill:none;stroke:var(--corte)} .eq-clip{stroke:var(--corte);stroke-width:.9} .eq-detalle{transition:opacity .25s} .eq-persona[aria-pressed="false"] .eq-cu{fill:none;stroke:var(--c);stroke-width:1.4;stroke-dasharray:3.2 2.6;vector-effect:non-scaling-stroke} .eq-persona[aria-pressed="false"] .eq-detalle{opacity:0} .eq-persona[aria-pressed="false"] .eq-cap{color:var(--tinta-55)} .eq-persona.eq-falta{--c:#FFB4A8} .eq-persona.eq-falta .eq-cap{color:#FFB4A8} .eq-persona.eq-falta::after{content:"!";position:absolute;top:0;right:6px;width:17px;height:17px;border-radius:50%;background:#FFB4A8;color:var(--navy);font:800 11px/17px var(--sans);text-align:center} .eq-grupo{--c:var(--org-int)} .eq-grupo[data-org="op"]{--c:var(--org-op)} .eq-grupo[data-org="mun"]{--c:var(--org-mun)} .eq-suelo{justify-self:stretch;padding-top:8px;border-top:2px solid var(--c);font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-55);text-align:center} /* 1 · La fila, en el inicio */ .eq-fila{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 22px} .eq-fila .eq-grupo{display:grid;justify-items:center;gap:8px} .eq-fila .eq-gente{display:flex;align-items:flex-end;gap:2px} .eq-fila .eq-persona{width:74px} .eq-fila .eq-persona svg{width:34px;height:68px;transition:transform .2s} .eq-fila .eq-persona:hover svg{transform:translateY(-3px)} @media (max-width:600px){ .eq-fila{gap:14px 16px} .eq-fila .eq-persona{width:64px} .eq-fila .eq-persona svg{width:30px;height:60px} } /* 2 · Señales, en Producto */ .eq-senales{display:flex;flex-wrap:wrap;gap:16px 24px} .eq-senales .eq-grupo{display:grid;gap:10px;align-content:start} .eq-senales .eq-gente{display:flex;gap:6px} .eq-senales .eq-persona{--cuerpo:var(--navy);--detalle:var(--c);--corte:var(--navy);width:76px} .eq-baldosa{display:grid;place-items:end center;width:64px;height:64px;box-sizing:border-box;border:1.5px solid var(--c);border-radius:15px;background:var(--c);overflow:hidden;transition:background-color .25s,border-color .25s,transform .2s} .eq-baldosa svg{width:56px;height:56px;margin-bottom:-2px} .eq-senales .eq-persona:hover .eq-baldosa{transform:translateY(-2px)} .eq-senales .eq-persona[aria-pressed="false"] .eq-baldosa{background:transparent;border-style:dashed} .eq-senales .eq-persona.eq-falta::after{right:0;top:-2px} @media (max-width:600px){ .eq-senales{gap:14px 16px} .eq-senales .eq-persona{width:62px} .eq-baldosa{width:54px;height:54px;border-radius:13px} .eq-baldosa svg{width:47px;height:47px} } @media (prefers-reduced-motion:reduce){ .eq-fila .eq-persona:hover svg,.eq-senales .eq-persona:hover .eq-baldosa{transform:none} } /* ══════════════════════════════════════════════════════════════════════════ PÁGINA DE PRODUCTO · LAS IMÁGENES DE «TRES TRABAJOS» (14 y 15-sep-2026) Copiado literal de Web/propuestas/producto/tres-trabajos/: lo común de las muestras, «Lo que abre el municipio» (Demostrar), «La lista, lo más apretado arriba» (Gestionar) y «La ficha de cada punto» (Crecer, de crecer.html). El JS vive al final de producto.js. ══════════════════════════════════════════════════════════════════════════ */ /* Cada muestra se dibuja a 340 × 191,25 px —el ancho real de la tarjeta en computador— y se escala entera al tamaño de su marco, como una imagen: en la tarjeta se ve a su tamaño, y en grande se ve lo mismo, más grande. */ .mu-escena{position:absolute;left:0;top:0;width:340px;height:191.25px;overflow:hidden;transform-origin:0 0;transform:scale(var(--k,1));font-family:var(--sans);color:#fff;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent} .mu-escena{line-height:1.2} .mu-escena [hidden]{display:none!important} /* La figura de la tarjeta del sitio no está posicionada: sin esto la muestra se colocaba contra la sección entera y la tarjeta quedaba vacía (medido). */ .rj-trabajo figure[data-lienzo]{position:relative} .mu-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible} /* 3 · Lo que abre el municipio */ /* La página del enlace es clara (no navy) y usa Helvetica/Arial, como la de verdad (mapa_recorridos_page.js). Los textos son los suyos, tal cual, incluidas las palabras sin tilde. */ .mu-enlace{background-color:#0a2148;background-image:linear-gradient(rgba(153,188,239,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(153,188,239,.06) 1px,transparent 1px);background-size:17px 17px} .mu-ven{position:absolute;left:10px;top:9px;width:320px;height:158px;border-radius:6px;overflow:hidden;background:#f4f6f9;box-shadow:0 12px 28px -10px rgba(0,0,0,.9);font-family:'Helvetica Neue',Arial,sans-serif;color:#111827} .mu-ven > *:not(.mu-ven-barra){transition:opacity .5s} .mu-ven.mu-abre > *:not(.mu-ven-barra){opacity:.2} .mu-ven-barra{height:11px;display:flex;align-items:center;gap:2px;padding:0 5px;background:#e5e7eb} .mu-ven-barra i{width:3.4px;height:3.4px;border-radius:50%;background:#c4c9d1} .mu-ven-barra span{display:flex;align-items:center;gap:2px;margin-left:8px;flex:1;height:7px;padding:0 4px;border-radius:3.5px;background:#fff;font-size:4.6px;color:#4b5563;white-space:nowrap;overflow:hidden} .mu-ven-barra svg{width:3.6px;height:4px;flex:none} .mu-mh{height:20px;box-sizing:border-box;padding:3.5px 7px 0;background:#001636;color:#fff} .mu-mh small{display:block;font-size:3.9px;letter-spacing:.6px;text-transform:uppercase;color:#BCBF00} .mu-mh b{display:block;margin-top:1.5px;font-size:8px;font-weight:700} .mu-per{display:flex;align-items:center;gap:5px;height:11px;box-sizing:border-box;padding:0 7px;background:#001636;border-bottom:.8px solid #BCBF00;color:#fff} .mu-per small{font-size:3.8px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:#BCBF00} .mu-per b{font-size:5.6px;font-weight:700} .mu-valido,.mu-aviso{height:8px;box-sizing:border-box;padding:0 5px;display:flex;align-items:center;white-space:nowrap;overflow:hidden} .mu-valido{background:#e8f4fd;border-left:1.5px solid #0057D6;font-size:4.1px;color:#003d99} .mu-valido b{margin:0 .25em} .mu-aviso{background:#f6f7f9;border-left:1.5px solid #9CA3AF;font-size:3.9px;color:#4b5563} .mu-aviso u{margin-left:.25em;color:#0057D6} .mu-cuerpo{position:absolute;left:0;right:0;top:58px;bottom:0;display:flex} .mu-panel{width:84px;flex:none;padding:3.5px 4px;box-sizing:border-box;background:#fff;border-right:.6px solid #e5e7eb;overflow:hidden} .mu-p-cab{display:flex;justify-content:space-between;align-items:baseline} .mu-p-cab b{font-size:5.4px;font-weight:700} .mu-p-cab span{font-size:3.9px;color:#6b7280} .mu-p-bts{display:flex;gap:2px;margin-top:3px} .mu-p-bts button{padding:1.2px 2.4px;border:.5px solid #d1d5db;border-radius:1.5px;background:#fff;font:4px/1.2 'Helvetica Neue',Arial,sans-serif;color:#374151;cursor:pointer} .mu-p-bts button:hover{background:#f3f4f6} .mu-p-t{margin-top:4px;font-size:4.1px;font-weight:700;color:#374151} .mu-p-barra{position:relative;margin-top:2.5px;font-size:3.5px;color:#4b5563} .mu-p-barra em{position:absolute;right:0;top:0;font-style:normal;font-weight:700;color:#111827} .mu-p-barra div{margin-top:1px;height:1.8px;border-radius:1px;background:#e5e7eb;overflow:hidden} .mu-p-barra i{display:block;height:100%;width:0;transition:width .3s} .mu-p-bus{display:flex;margin-top:4px;height:7px;border:.5px solid #d1d5db;border-radius:1.5px;overflow:hidden;font-size:3.5px} .mu-p-bus span{flex:1;padding:0 2px;display:flex;align-items:center;color:#9ca3af;white-space:nowrap;overflow:hidden} .mu-p-bus b{display:flex;align-items:center;padding:0 2.5px;background:#f3f4f6;font-weight:600;color:#374151} .mu-p-grupo{display:flex;align-items:center;gap:2px;margin-top:4.5px;font-size:4.3px} .mu-p-grupo i{width:3px;height:3px;border-radius:50%;background:#0057D6} .mu-p-grupo span{margin-left:auto;font-size:3.6px;color:#6b7280} .mu-p-fila{display:flex;align-items:center;gap:3px;margin-top:1.5px;padding:1.5px 2px;border-radius:1.5px;cursor:pointer} .mu-p-fila:hover,.mu-p-fila.foco{background:#f3f4f6} .mu-p-fila b{display:block;font-size:4.2px;font-weight:600} .mu-p-fila span{display:block;font-size:3.4px;color:#16a34a} .mu-p-caja{width:4.4px;height:4.4px;flex:none;box-sizing:border-box;border:.6px solid #9ca3af;border-radius:1px;background:#fff} .mu-p-fila.on .mu-p-caja{border-color:#0057D6;background:#0057D6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E") center/100% no-repeat} .mu-mapa{position:relative;flex:1} .mu-ruta{transition:opacity .3s} .mu-fundido .mu-ruta{opacity:0!important;transition:opacity .7s} .mu-leyenda{position:absolute;left:4px;top:4px;display:grid;gap:1.6px;padding:3px 4px;border-radius:2.5px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18);font-size:3.5px;color:#374151;pointer-events:none} .mu-leyenda div{display:flex;align-items:center;gap:2.5px;white-space:nowrap} .mu-leyenda i{flex:none;display:grid;place-items:center;font-style:normal} .mu-ly-traza{width:8px;height:1.8px;border-radius:1px;background:linear-gradient(90deg,#0057D6,#C40000)} .mu-ly-a,.mu-ly-b{width:5px;height:5px;box-sizing:border-box;border-radius:50%;border:.5px solid #fff;font-size:3px;font-weight:700;color:#fff} .mu-ly-a{background:#0057D6} .mu-ly-b{background:#C40000} .mu-ly-h{width:4px;height:4px;border-radius:50%;background:#C40000;box-shadow:0 0 0 .5px #fff} .mu-ly-l{width:2.6px;height:2.6px;margin:0 .7px;border-radius:50%;background:#0057D6;box-shadow:0 0 0 .5px #fff} .mu-agua{position:absolute;right:3px;bottom:2px;font-size:3.2px;color:#6b7280;pointer-events:none} .mu-pie-en{position:absolute;left:12px;right:12px;bottom:6px;font-size:8.6px;color:rgba(255,255,255,.72);white-space:nowrap} .mu-pie-en b{color:#fff;font-weight:600} /* 4 · La lista, lo más apretado arriba */ /* Fila de la app (hallazgos/page.tsx) en dos líneas: la categoría y el estado; la severidad, la cuenta atrás o «Vencido», y el identificador. */ .mu-lista{background:#001636} .mu-l-cab{position:absolute;left:10px;right:10px;top:7px;display:flex;align-items:baseline;justify-content:space-between} .mu-l-cab b{font-size:13px;font-weight:800} .mu-l-hora{font-family:var(--mono);font-size:8px;color:rgba(255,255,255,.6)} .mu-l-orden{position:absolute;left:10px;right:6px;top:26px;display:flex;align-items:center;gap:3px;white-space:nowrap} .mu-l-orden small{margin-right:2px;font-size:6.6px;color:rgba(255,255,255,.55)} .mu-l-orden button{padding:2px 5px;border-radius:999px;border:.8px solid rgba(255,255,255,.15);background:transparent;color:rgba(255,255,255,.55);font:600 6.6px/1.2 var(--sans);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s} .mu-l-orden button.on{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);color:#fff} .mu-fila{position:absolute;left:10px;right:10px;top:0;height:30px;box-sizing:border-box;padding:4.5px 7px 0 10px;border-radius:8px;background:#fff;color:#001636;overflow:hidden;cursor:pointer;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .45s,background-color .9s} .mu-fila.nueva{background:#FFF3C4} .mu-f-barra{position:absolute;left:0;top:0;bottom:0;width:3.5px;transition:background-color .3s} .mu-f-1{display:flex;align-items:center;gap:6px} .mu-f-1 b{flex:1;min-width:0;font-size:8px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mu-f-est{flex:none;padding:1.5px 5px;border-radius:999px;font-style:normal;font-size:6.2px;font-weight:700;transition:background-color .3s,color .3s} .mu-f-2{display:flex;align-items:center;gap:5px;margin-top:3.5px;white-space:nowrap} .mu-f-sev{padding:1px 3.5px;border-radius:2px;font-size:5.6px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#001636} .mu-f-reloj{font-size:6.6px;font-weight:600;color:#6A7282} .mu-f-reloj.rojo{font-weight:700;color:#C40000} .mu-f-venc{padding:1px 4px;border-radius:2px;background:#C40000;color:#fff;font-size:5.6px;font-weight:700} .mu-f-2 code{margin-left:auto;font-family:var(--mono);font-size:5.6px;color:#99A1AF} .mu-lista.mu-fundido .mu-fila{opacity:0!important} /* Crecer · La ficha de cada punto (15-sep-2026) */ /* La etiqueta del sector usa la pastilla de las muestras de Crecer: más pequeña y con la cifra en mono negrita, como sale en la muestra aprobada. Se acota a la escena para no cambiar la de «La jornada». */ .cr-zoom .mu-chip{gap:4px;background:rgba(0,16,42,.88);font-size:8.4px} .cr-zoom .mu-chip b{font-weight:800} .cr-zoom-chip{left:7px;top:7px} .cr-anillo{transform-box:fill-box;transform-origin:center;animation:cr-late 1.6s ease-out infinite} @keyframes cr-late{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.9);opacity:0}} .cr-hit{fill:transparent;cursor:pointer} .cr-ficha{position:absolute;left:217px;top:8px;right:8px;bottom:8px;box-sizing:border-box;padding:9px 9px 8px;border-radius:9px;background:rgba(0,14,38,.95);border:1px solid rgba(153,188,239,.24);box-shadow:0 10px 24px -12px rgba(0,0,0,.9)} .cr-ficha-in{transition:opacity .2s} .cr-ficha.cambia .cr-ficha-in{opacity:0} .cr-ficha-tipo{display:flex;align-items:center;gap:5px;font-size:8.8px;font-weight:800;line-height:1.1} .cr-ficha-tipo i{flex:none;width:8px;height:8px;border-radius:50%;box-sizing:border-box;border:1.3px solid #fff} .cr-ficha dl{margin:8px 0 0;display:grid;gap:5.5px} .cr-ficha dt{font:500 5.8px/1.1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#99BCEF} .cr-ficha dd{margin:1.8px 0 0;font-size:7.6px;font-weight:600;line-height:1.22;color:#fff} .cr-ficha-nota{position:absolute;left:9px;right:9px;bottom:8px;margin:0;padding-top:6px;border-top:.8px solid rgba(153,188,239,.2);font-size:6.6px;line-height:1.3;color:rgba(255,255,255,.7)} @media (prefers-reduced-motion:reduce){ .cr-anillo{animation:none} .cr-ficha-in{transition:none} } /* ══════════════════════════════════════════════════════════════════════════ INICIO Y PRODUCTO · «LA JORNADA» Y «EL SELLO» (14-sep-2026) Dos muestras de Demostrar, copiadas literal de Web/propuestas/producto/ tres-trabajos/: «La jornada sobre el mapa», a la derecha de «El problema» del inicio, con los tres momentos (01·02·03) debajo; y «La foto con su sello», en la cabecera de producto, con su círculo «Evidencia inmutable». El sello estuvo unas horas en el inicio; Julián lo cambió de sitio el mismo día. El JS vive en muestras.js. ══════════════════════════════════════════════════════════════════════════ */ /* El marco es el de la muestra en grande (.mk-lienzo). Sin JavaScript enseña la imagen sola. */ .lienzo-muestra{position:relative;margin:0;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--navy-3);background:var(--navy-3)} .lienzo-muestra > img{width:100%;height:100%;object-fit:cover;display:block} /* Lo común de la jornada: el velo, las pastillas, la marca que parpadea y el halo del técnico. */ .mu-velo{position:absolute;left:0;right:0;bottom:0;height:42px;background:linear-gradient(rgba(6,23,58,0),rgba(6,23,58,.92));pointer-events:none} .mu-chip{position:absolute;display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:999px;background:rgba(0,16,42,.86);border:1px solid rgba(153,188,239,.28);font-size:9.5px;font-weight:600;line-height:1.2;white-space:nowrap;pointer-events:none} .mu-chip b{font-family:var(--mono);font-weight:500} .mu-rec{width:5px;height:5px;border-radius:50%;background:#FF6B6B;animation:mu-parpadeo 1s steps(2,start) infinite} @keyframes mu-parpadeo{to{visibility:hidden}} .mu-halo{transform-box:fill-box;transform-origin:center;animation:mu-late 1.5s ease-out infinite} @keyframes mu-late{0%{transform:scale(.45);opacity:1}100%{transform:scale(1.7);opacity:0}} .mu-pista{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:4px 9px;border-radius:999px;background:rgba(0,16,42,.8);font-size:9px;font-weight:600;white-space:nowrap;pointer-events:none;transition:opacity .4s} @media (prefers-reduced-motion:reduce){ .mu-rec,.mu-halo{animation:none} } /* 1 · La jornada sobre el mapa */ .mu-jornada{touch-action:pan-y;cursor:ew-resize} .mu-lum{fill:rgba(153,188,239,.30);stroke:#fff;stroke-width:0;transition:fill .25s,stroke-width .25s} .mu-lum.on{fill:#0057D6;stroke-width:.8px} .mu-fundido .mu-lum.on{fill:rgba(153,188,239,.30);stroke-width:0;transition:fill .7s,stroke-width .7s} .mu-capa{transition:opacity .7s} .mu-fundido .mu-capa{opacity:0} .mu-pin-c{transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.34,1.56,.64,1)} .mu-pin.on .mu-pin-c{transform:scale(1)} .mu-pin-hit{fill:transparent;pointer-events:none;cursor:pointer} .mu-pin.on .mu-pin-hit{pointer-events:all} .mu-marca{transition:opacity .4s} .mu-riel{position:absolute;left:10px;right:10px;bottom:7px;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:8px;color:rgba(255,255,255,.62);pointer-events:none} .mu-riel-pista{position:relative;flex:1;height:2px;border-radius:2px;background:rgba(153,188,239,.25)} .mu-riel-pista i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:#99BCEF} .mu-riel-pista b{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,22,54,.8)} .mu-pop{position:absolute;display:flex;align-items:center;gap:6px;padding:4px 7px 4px 4px;border-radius:7px;background:#fff;color:#001636;box-shadow:0 8px 20px -8px rgba(0,0,0,.85);font-size:8.5px;line-height:1.25;white-space:nowrap;cursor:default} .mu-pop b{display:block;font-size:9.5px;font-weight:800} .mu-pop span{color:#5D6675} .mu-escena .mu-mini{width:30px;height:30px;border-radius:4px;object-fit:cover;display:block} /* 2 · La foto con su sello */ /* El sello NO tapa la foto: la app agranda el lienzo y lo imprime en una franja debajo (sello-foto.ts). Por eso se ve la imagen entera, como queda guardada; las medidas de la franja son las de la app, en proporción al ancho de la foto. */ .mu-sello{background-color:#0a2148;background-image:linear-gradient(rgba(153,188,239,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(153,188,239,.06) 1px,transparent 1px);background-size:17px 17px} .mu-print{position:absolute;left:14px;top:10px;width:148.6px;box-shadow:0 10px 24px -10px rgba(0,0,0,.9);cursor:zoom-in;touch-action:pan-y} .mu-print-foto{position:relative;width:148.6px;height:148.6px;overflow:hidden;background:#1b2a44} .mu-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} .mu-sb{position:relative;height:0;overflow:hidden;background:#001636} .mu-sb::before{content:"";position:absolute;left:0;right:0;top:0;height:.75px;background:#BCBF00;z-index:1} /* Como en el lienzo de la app, cada renglón lleva su texto a la izquierda y el suyo a la derecha, alineados abajo. Con dos columnas, el renglón largo del registro empujaba el rol y el contrato fuera de la foto (medido). */ .mu-sb-in{position:absolute;left:0;right:0;top:0;height:22.3px;box-sizing:border-box;display:flex;flex-direction:column;gap:1.49px;padding:2.67px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:700;white-space:nowrap} .mu-sb-r{display:flex;justify-content:space-between;align-items:flex-end;gap:3px} .mu-sb b{display:block;font-weight:700;line-height:1} .mu-sb-r b:first-child{color:#fff} .mu-sb-r b + b{color:#BCBF00} .mu-r1{height:5.65px} .mu-r2{height:4.46px} .mu-r3{height:3.86px} .mu-s1{font-size:5.65px} .mu-s2{font-size:4.46px} .mu-s3{font-size:3.86px} .mu-s4{font-size:4.41px} .mu-s5{font-size:3.79px} .mu-s6{font-size:3.28px} .mu-campos{position:absolute;left:176px;right:8px;top:9px;display:grid;gap:2.5px;line-height:1.15} .mu-campo{padding:2px 0 2px 8px;border-left:1.5px solid rgba(153,188,239,.25);opacity:0;transform:translateX(6px);transition:opacity .35s,transform .35s,border-color .25s;cursor:pointer} .mu-campo.on{opacity:1;transform:none} .mu-campo small{display:block;font-family:var(--mono);font-size:6.2px;letter-spacing:.14em;text-transform:uppercase;color:#BCBF00} .mu-campo span{display:block;margin-top:1.5px;font-size:8.6px;font-weight:700;color:#fff;white-space:nowrap} .mu-campo.foco{border-left-color:#BCBF00} .mu-marco-f{position:absolute;border:1px solid #BCBF00;border-radius:1.5px;box-shadow:0 0 0 1px rgba(0,22,54,.7);opacity:0;transition:opacity .2s;pointer-events:none} .mu-visor{position:absolute;inset:7px;pointer-events:none} .mu-visor i{position:absolute;width:10px;height:10px;border:1.4px solid rgba(255,255,255,.92)} .mu-visor i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0} .mu-visor i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0} .mu-visor i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0} .mu-visor i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0} .mu-foco{position:absolute;left:45px;top:28px;width:44px;height:38px;border:1.3px solid rgba(255,255,255,.92);border-radius:3px;transform:translate(-50%,-50%) scale(1.45);pointer-events:none} .mu-foco.fijo{border-color:#F5D547} .mu-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none} .mu-candado{position:absolute;left:184px;bottom:11px;display:inline-flex;align-items:center;gap:4px;padding:3px 7px 3px 5px;border-radius:5px;background:rgba(255,255,255,.95);color:#3A4250;font:500 7.4px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(-4px);transition:opacity .35s,transform .35s;pointer-events:none} .mu-candado svg{width:8px;height:9px} .mu-candado.on{opacity:1;transform:none} .mu-lupa{position:absolute;left:0;top:0;width:92px;height:92px;box-sizing:border-box;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.95);box-shadow:0 10px 26px -8px rgba(0,0,0,.85);opacity:0;pointer-events:none;transition:opacity .25s;background:#0a2148} .mu-copia{position:absolute;left:0;top:0;width:340px;height:191.25px;transform-origin:0 0} .mu-copia .mu-print{box-shadow:none} /* La composición del problema: texto y cierre a la izquierda, la jornada a la derecha a la altura de los dos, y los tres momentos debajo, en tres columnas bajo el mismo filete azul. En angosto, una columna: texto, jornada, cierre, momentos. */ .problema-c.con-muestra{grid-template-columns:1.15fr 1fr;gap:0 64px;grid-template-areas:"texto muestra" "cierre muestra" "ficha ficha"} .problema-c.con-muestra > .lienzo-muestra{grid-area:muestra;align-self:center} .problema-c.con-muestra > .ficha-problema{margin-top:64px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px} .problema-c.con-muestra .ficha-problema .fila{border-bottom:0;padding:18px 0 6px} @media (max-width:900px){ .problema-c.con-muestra{grid-template-columns:1fr;grid-template-areas:"texto" "muestra" "cierre" "ficha"} .problema-c.con-muestra > .lienzo-muestra{margin-top:8px} .problema-c.con-muestra > .problema-cierre{margin-top:34px} .problema-c.con-muestra > .ficha-problema{margin-top:40px;grid-template-columns:1fr} .problema-c.con-muestra .ficha-problema .fila{border-bottom:1px solid var(--navy-3);padding:18px 0} } /* ═══════════════════════════════════════════════════════════════════════ EL ARGUMENTO ANTE EL MUNICIPIO · «Un argumento para su próxima propuesta» (15-sep-2026). Variante B de Web/propuestas/argumento-municipio.html, elegida por Julián, con sus medidas. El municipio es el cliente de nuestra clienta: los tres momentos de su contrato van como cadena, y el nodo del concurso encendido porque ahí empieza la venta. ═══════════════════════════════════════════════════════════════════════ */ .am-intro{color:var(--tinta-72);max-width:62ch;margin-top:16px;font-size:16px} .am-cab{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center} .am-foto{margin:0;position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--navy-3);aspect-ratio:16/10;background:var(--navy-2)} .am-foto img{display:block;width:100%;height:100%;object-fit:cover} .am-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,22,54,.5),rgba(0,22,54,0) 42%);pointer-events:none} .am-video{aspect-ratio:auto;background:#000} .am-video::after{display:none} .am-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#000} .am-video figcaption{padding:10px 14px;font-size:13px;color:var(--tinta-72);background:var(--navy-2);border-top:1px solid var(--navy-3)} .am-video{position:relative} .am-play{position:absolute;left:50%;top:calc((100% - 40px) / 2);transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:rgba(0,22,54,.55);backdrop-filter:blur(2px);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:transform .15s,background .15s} .am-play:hover{background:var(--azul);transform:translate(-50%,-50%) scale(1.06)} .am-play:focus-visible{outline:3px solid var(--azul-claro,#99BCEF);outline-offset:3px} .am-play svg{width:30px;height:30px;fill:#fff;margin-left:4px} .am-play[hidden]{display:none} .am-video figcaption::before{content:"▶ ";color:var(--azul-claro,#99BCEF)} @media (max-width:900px){.am-cab{grid-template-columns:1fr;gap:28px}.am-foto{order:2}} .am-cadena{position:relative;margin-top:42px} .am-linea{position:absolute;top:29px;left:29px;right:29px;height:2px;background:var(--azul-claro);opacity:.28;z-index:0} .am-fila{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;position:relative} .am-paso{position:relative;z-index:1} .am-nodo{ width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center; margin-bottom:18px;border:2px solid var(--azul-claro);background:var(--navy); font-family:var(--mono);font-weight:700;font-size:17px;color:var(--azul-claro); } .am-paso.encendido .am-nodo{background:var(--azul);border-color:var(--azul);color:var(--blanco)} .am-momento{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-55)} .am-paso h3{font-weight:800;font-size:20px;margin-top:8px} .am-paso p{color:var(--tinta-72);font-size:14.5px;margin-top:10px;max-width:38ch} .am-material{ margin-top:44px;border:1px solid var(--navy-3);border-radius:12px;background:var(--navy-2); padding:26px 28px;display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:space-between; } .am-material p{color:var(--tinta-72);font-size:14.5px;max-width:52ch} .am-material p strong{color:var(--blanco)} .am-material .btn{font-size:14.5px;padding:11px 22px;flex:none} .am-botones{display:flex;gap:10px;flex-wrap:wrap} @media (max-width:760px){ .am-linea{display:none} .am-fila{grid-template-columns:1fr;gap:36px} } @media (max-width:600px){ .am-momento{font-size:12px} } /* ── El video de presentación (5-oct-2026) ────────────────────────────── El mismo video en dos lugares: la sección #video (el lugar fijo, entre el problema y cómo funciona) y la ventana de la primera visita. Lógica en presentacion.js; los archivos, en el bucket público (Web/README.md, «El video de presentación»). El fondo de la ventana es navy casi negro y no el azul de marca: el azul institucional no es un fondo. */ .btn-video{display:inline-flex;align-items:center;gap:10px} .btn-video svg{flex:none} .presentacion .video-marco{margin-top:34px} .video-marco{ position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:12px; background:#02070f;border:1px solid var(--navy-3); box-shadow:0 34px 80px -34px rgba(0,0,0,.7); } .video-marco video{display:block;width:100%;height:100%;object-fit:contain;background:#02070f} /* Los botones encima del video llevan display propio: sin esto, el atributo hidden no los escondería (la regla del autor le gana a la del navegador). */ .video-marco [hidden]{display:none!important} .video-play{ position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px; display:flex;align-items:center;justify-content:center; border:0;border-radius:50%;background:var(--azul);color:var(--blanco);cursor:pointer; box-shadow:0 0 0 10px rgba(0,87,214,.22),0 18px 40px -12px rgba(0,0,0,.7); transition:transform .15s,background .15s; } .video-play:hover{background:var(--azul-hover);transform:scale(1.06)} .video-play svg{margin-left:6px} .video-duracion{ position:absolute;left:16px;bottom:14px;padding:4px 9px;border-radius:6px;pointer-events:none; background:rgba(0,10,28,.72);font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--blanco); } .video-marco.en-curso .video-duracion{display:none} .video-sonido{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:inline-flex;align-items:center;gap:10px;white-space:nowrap; border:0;border-radius:999px;background:var(--azul);color:var(--blanco);cursor:pointer; font-family:inherit;font-weight:600;font-size:16px;padding:14px 24px; box-shadow:0 0 0 10px rgba(0,87,214,.22),0 18px 40px -12px rgba(0,0,0,.7); transition:background .15s; } .video-sonido:hover{background:var(--azul-hover)} .video-final,.video-error{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:14px;padding:24px;text-align:center;background:rgba(0,10,28,.8); } .video-final{flex-direction:row;flex-wrap:wrap} .video-error p{color:var(--tinta-72)} .video-marco button.btn{font-family:inherit;line-height:inherit;cursor:pointer} .video-play:focus-visible,.video-sonido:focus-visible,.video-cerrar:focus-visible,.video-marco button.btn:focus-visible{ outline:2px solid var(--azul-claro);outline-offset:4px; } /* La ventana: el ocupa la pantalla y es transparente —un clic que cae en él y no en la caja es un clic fuera del video—; lo oscuro es su ::backdrop. La X va encima de la caja, en el margen de arriba. */ dialog.video-modal{ position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0; padding:72px 24px 24px;border:0;background:transparent;color:var(--blanco);overflow:hidden; } dialog.video-modal[open]{display:flex;align-items:center;justify-content:center} dialog.video-modal::backdrop{background:rgba(1,7,18,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .video-modal-caja{position:relative;width:min(1100px,100%,calc((100vh - 120px) * 16 / 9))} @supports (height:100dvh){ .video-modal-caja{width:min(1100px,100%,calc((100dvh - 120px) * 16 / 9))} } .video-cerrar{ position:absolute;right:0;bottom:calc(100% + 12px);width:44px;height:44px; display:flex;align-items:center;justify-content:center; border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(0,17,42,.75);color:var(--blanco);cursor:pointer; transition:background .15s; } .video-cerrar:hover{background:var(--navy-3)} html.video-abierto{overflow:hidden} @media (max-width:600px){ dialog.video-modal{padding:68px 12px 12px} .video-play{width:68px;height:68px;margin:-34px 0 0 -34px} .video-sonido{font-size:15px;padding:12px 20px} .video-final .btn{font-size:14.5px;padding:11px 20px} }