/* ================================================================== EL DISENO APROBADO . LA HOJA DEL DOCUMENTO ================================================================== Esta es LA hoja del documento comercial: la portada, las secciones, las tablas, la metodologia e-bita, el cierre y las dos caras --`data-v="web"` y `data-v="pdf"`--. Referencia: `docs/mockups-orvik/propuesta-diseno-aprobado.html`. -- POR QUE ESTE ARCHIVO EXISTE -- Hasta el 9/oct/2026 el mismo CSS vivia TRES veces: 1. aqui, en un archivo que **no cargaba nadie** --era una copia de referencia, y resulta que es la que yo venia tratando como fuente al hacer cambios--; 2. dentro de `propuesta/index.html`, en una etiqueta de estilo pegada a mano (sin el signo de menor-que escrito aqui: esta hoja acaba DENTRO de esa etiqueta, y la secuencia la cerraria antes de tiempo); 3. dentro de `cotizador/estilos.css`, que ademas es de donde `hacer-visor.py` saca el molde archivado de cada motor. O sea que un cambio de diseno habia que escribirlo tres veces, y la tercera alimentaba los documentos congelados. Se comprobo el 9/oct que las tres coincidian --mismo contenido al quitar comentarios y espacios--, pero coincidian por disciplina, no por construccion: cada arreglo de esta semana hubo que aplicarlo a mano en las tres, y bastaba olvidarse de una para que la vista previa, la liga y el contrato dijeran cosas distintas. Es el mismo defecto que el documento tenia en su armado --dos funciones gemelas escribiendo el mismo orden-- y se resuelve igual: un solo lugar. Ver `apps/panel/armar-documento.js` y [[la-senal-se-decide-una-sola-vez]]. -- QUIEN LA CARGA -- . `propuesta/index.html` - la liga que lee el cliente . `index.html` del panel - la vista previa del ejecutivo, DESPUES de `cotizador/estilos.css`, porque tiene que ganarle al traje del documento viejo . `cotizador/motores/hacer-visor.py` - la pega en el visor archivado de cada motor -- LO QUE NO VA AQUI -- Nada acotado a `#cot-zona`: eso es del formulario del cotizador y vive en `cotizador/estilos.css`. Aqui todo cuelga de `.doc`, que es el documento, y por eso la misma hoja sirve en el panel, en la liga y en un visor archivado sin cambiar una linea. ================================================================== */ /* IDENTIDAD FIJA DE LYKOS — tomada de apps/panel/propuesta/index.html. Lo único que cambia entre las cinco opciones es la MAQUETACIÓN; la tipografía (Inter), el navy, el amarillo y el radio son los de la casa y no se tocan. Los tres acabados —papel, navy y blanco y negro— usan la misma paleta, no otra. */ .doc{ --navy:#041E42; --navy2:#0A2E5C; --amar:#FFC207; --amar-d:#854F0B; --bg:#F5F7FA; --sup:#fff; --sup2:#FAFBFD; --borde:#E8ECF1; /* ── EL GRIS DEL RITMO TIENE SU PROPIO TOKEN ── Tenía razón: el ritmo usaba `--sup2`, que es #FAFBFD — a un punto del blanco. Medido contra el blanco puro, esa diferencia es casi imperceptible en una pantalla con brillo bajo. No se sube `--sup2`, que se usa en otros 27 sitios --cajas, chips, celdas-- y ahí el tono claro sí es el correcto. El ritmo de secciones tiene ahora su propio color, y así se puede ajustar sin mover nada más. */ --ritmo:#E8EEF6; /* ── LOS COLORES QUE ANDABAN SUELTOS ── Medido sobre la hoja: 33 colores escritos a mano en 126 sitios, frente a 44 variables ya declaradas. La mayoria son de un solo uso --el color de una pieza concreta-- y ahi un literal esta bien. Pero seis se repetian en tres o mas sitios sin tener nombre, que es como empieza el desorden: el dia que uno cambia, hay que cazarlo en seis lugares y siempre se escapa alguno. Ninguno cambia de tono. Esto no toca el aspecto: le pone nombre a lo que ya estaba. Comprobado midiendo los 2,299 elementos del documento antes y despues en dos anchos: misma huella de color. */ --niv-alto:#C8452F; /* el rojo del semaforo de riesgo */ --niv-bajo:#2E9E6B; /* y su verde */ --txt-cuerpo:#2C3F57; /* el texto corrido, ni titulo ni nota */ --txt-pie:#7D91AC; /* pies de pagina, vigencias y notas */ --sobre-navy:#B7C5D8; /* el texto que va encima del navy */ --mesa:#E4E8EE; /* la mesa gris donde se apilan las hojas */ --txt:#041E42; --txt2:#5D6B7E; --txt3:#9BA8B8; --ok:#0E8F5C; --ok-bg:#E8F6EF; --avi:#854F0B; --avi-bg:#FFFBEB; --mal:#C9302C; --mal-bg:#FEF2F2; --r:14px; --sombra:0 1px 3px rgba(4,30,66,.06),0 8px 24px rgba(4,30,66,.05); --f:Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --app-bg:#EEF1F6; --app-fg:#041E42; --app-mu:#5D6B7E; --app-card:#fff; --app-ln:#D9E0EA; } @media (prefers-color-scheme:dark){ .doc :root:not([data-theme="light"]){ --app-bg:#0C131D; --app-fg:#E6ECF4; --app-mu:#93A3B8; --app-card:#141D29; --app-ln:#25313F; color-scheme:dark; } } .doc :root[data-theme="dark"]{ --app-bg:#0C131D; --app-fg:#E6ECF4; --app-mu:#93A3B8; --app-card:#141D29; --app-ln:#25313F; color-scheme:dark; } .doc, .doc *{box-sizing:border-box} .doc{background:var(--app-bg);color:var(--app-fg);font:400 var(--t-p)/1.6 var(--f);margin:0} .doc .env{max-width:1480px;margin:0 auto;padding-inline:16px;padding-block:18px 44px} .doc .cab h1{font:800 var(--t-h3)/1.25 var(--f);margin:0 0 4px;letter-spacing:-.3px} .doc .cab p{margin:0 0 14px;color:var(--app-mu);font-size:var(--t-sec);max-width:70ch} .doc .barras{display:flex;gap:8px 14px;flex-wrap:wrap;align-items:center;margin-bottom:12px} .doc .grupo{display:flex;gap:4px;background:var(--app-card);border:1px solid var(--app-ln); border-radius:10px;padding:4px;flex-wrap:wrap} .doc .grupo button{appearance:none;background:none;border:0;color:var(--app-mu); font:400 var(--t-sec) var(--f);padding:7px 11px;border-radius:7px;cursor:pointer;white-space:nowrap} .doc .grupo button[aria-pressed="true"]{background:var(--navy);color:#fff} .doc .grupo button:focus-visible{outline:2px solid var(--amar);outline-offset:2px} .doc .nota{font:400 var(--t-min) var(--f);color:var(--app-mu);margin:0;padding:4px 10px; border:1px solid var(--app-ln);border-radius:999px} .doc .esc{display:flex;justify-content:center} .doc .marco{width:100%;background:#fff;border:1px solid var(--app-ln);border-radius:12px; overflow:hidden;transition:max-width .3s ease;box-shadow:var(--sombra)} .doc .marco[data-d="pc"]{max-width:1240px} .doc .marco[data-d="ipad"]{max-width:834px} .doc .marco[data-d="movil"]{max-width:390px} @media (prefers-reduced-motion:reduce){ .doc .marco{transition:none} } .doc .visor{max-height:78vh;min-height:560px;overflow-y:auto;overflow-x:hidden; container-type:inline-size;position:relative} /* ══════════════════════════════════════════════════════════════════ EL DOCUMENTO TIENE QUE SER SU PROPIO CONTENEDOR ────────────────────────────────────────────────────────────────── El diseño aprobado usa 35 consultas de CONTENEDOR (`@container`), no de pantalla: las tablas que se vuelven tarjetas en angosto, la ruta de arranque en cuatro columnas, la comparativa, el valor agregado… Una consulta de contenedor sólo funciona si algún ancestro se declara contenedor. En la maqueta ese ancestro era `.visor` —la cajita que simulaba un teléfono o una compu, con su botoncito para cambiar de aparato—. En la liga de verdad no hay `.visor`: el documento cuelga directo de `#doc`. Resultado medido en pantalla de 375 px: las SEIS tablas se quedaban anchas, saliéndose hasta 237 px de la pantalla, y ninguna celda enseñaba su rótulo. Las 35 consultas no apuntaban a nada. No es un error que truene: es el mismo modo de falla que una variable CSS inexistente. La regla está escrita, se lee bien, y simplemente no se aplica. ══════════════════════════════════════════════════════════════════ */ .doc{container-type:inline-size} /* ═════ EL DOCUMENTO ═════ */ .doc{background:var(--sup);color:var(--txt);font-family:var(--f)} .doc *{box-sizing:border-box} /* El aire de lykos.lat son 96 px arriba. Aqui no se copia tal cual --un documento es mas denso que una pagina de venta-- pero se sube para que las secciones respiren y no se lean como un solo bloque. */ .doc .pad{padding:30px 20px;--val-margen:20px} @container (min-width:700px){ .doc .pad{padding:48px 48px;--val-margen:48px} } @container (min-width:1000px){ .doc .pad{padding:60px 68px} } /* ══════════════════════════════════════════════════════════════════ EL RITMO DE LA PAGINA · SECCIONES QUE ALTERNAN ══════════════════════════════════════════════════════════════════ Y dio la referencia: *"asi es nuestra pagina web, lykos.lat"*. Medido alli el 9/oct, las secciones NO son todas blancas: alternan #F8FAFC (casi blanco) #F5F7FA (un punto mas gris) #041E42 (navy, de tanto en tanto) con 96 px de aire arriba. O sea: mismo papel, dos tonos que se turnan. El ojo encuentra donde empieza y acaba cada bloque sin que nadie dibuje una caja. Aqui se hace igual: las secciones pares toman el tono gris. Y el filo de separacion se quita donde ya hay cambio de tono, porque entonces sobra --dos senales para lo mismo es ruido--. ══════════════════════════════════════════════════════════════════ */ .doc .sec{background:var(--sup)} /* ── LA ALTERNANCIA NO PUEDE TOCAR EL AZUL · 13/oct/2026 ── Y era culpa del cambio de ayer: al sacar «Condiciones» como sección propia, el cierre pasó de ser la 13.ª a la 12.ª --de impar a par-- y esta regla le pintó el gris del ritmo sobre el navy. El título es blanco, así que quedó blanco sobre gris claro. Confiar en que la regla del navy gane por ir después es frágil: basta añadir o quitar una sección para que vuelva a pasar, y no truena, sólo despinta. Así que la alternancia EXCLUYE las oscuras por nombre: no es que el navy gane, es que aquí no entra. */ .doc .cuerpo .sec:nth-of-type(even):not(.port):not(.cierre){background:var(--ritmo)} .doc .sec + .sec{border-top:1px solid rgba(4,30,66,.05)} /* El navy manda sobre el turno: donde hay azul no hay gris. */ .doc .sec.port,.doc .sec.cierre{background:var(--navy)} /* ── EN PAPEL NO HAY TURNO DE TONOS ── El gris alterna para dar ritmo EN PANTALLA. Impreso, cada seccion gris sale como una banda de tinta: cuesta tinta, se ve sucio si la impresora no calibra, y el documento ya esta partido por sus filos. La hoja va blanca. */ .doc[data-v="pdf"] .cuerpo .sec:nth-of-type(even):not(.port):not(.cierre){background:var(--sup)} @media print{ .doc .cuerpo .sec:nth-of-type(even):not(.port):not(.cierre){background:var(--sup)} } .doc .sec:first-child{border-top:0} /* ── Y LA LINEA BLANCA DE ARRIBA, POR FIN ── Las dos veces anteriores le quite el `border-bottom` a la barra. Y la barra ya no lo tenia: medido, 0px. La linea era el `border-top` de LA PORTADA --el filo claro que separa una seccion de la siguiente--, y no se le quitaba porque la regla de arriba exige ser el primer hijo... y la portada va DESPUES de la barra. O sea que el diseño ya decia "la primera seccion no lleva filo", pero al meter la barra delante dejo de ser la primera. La portada no lleva filo nunca --es navy, y un filo claro sobre navy es justo lo que se veia-- y la seccion que siga a la barra tampoco, sea cual sea. */ .doc .sec.port{border-top:0} .doc .barra-doc + .sec{border-top:0} /* ══════════════════════════════════════════════════════════════════ LA REGLA DE TIPOGRAFIA · UNA SOLA, Y SE RESPETA ══════════════════════════════════════════════════════════════════ Tenia razon y se medio: en el documento convivian pesos 500, 600, 700 y 800 y tamanos sueltos --15px, 14.5px, 13.5px, 12.5px, 11px, 10.5px, 9px-- puestos uno a uno segun hiciera falta. La escala sale de lykos.lat, que es la referencia que el dio. Medida alli el 9/oct: H1 65 px / 800 P 19 px / 400 H2 48 px / 800 P 15 px / 400 H3 20-36 px / 800 P 14 px / 400 P 13 px / 400 De ahi estos seis peldanos, y NO se usa ninguno fuera de la lista. Los titulos van en 800 --en la web todos lo estan, sin excepcion--; el texto en 400; los rotulos en 800 porque son etiquetas, no texto. El `clamp()` mantiene la escala en telefono sin inventar medidas: es el mismo peldano, encogido. ══════════════════════════════════════════════════════════════════ */ /* ── LA ESCALA, REVISADA EL 13/OCT ── Se le enseñó el muestrario de lo que había --seis pesos distintos y trece tamaños fuera de la lista-- y aprobó esta escala viéndola pintada. Tres cambios, y el por qué de cada uno: · El SUBTÍTULO sube de 16 a 20 px. A 16 estaba a un punto del texto corrido (15) y no hacía escalón: dos cosas del mismo tamaño no se leen como jerarquía. Es el principio de las guías de Apple, y es el criterio aprobado para este documento: la jerarquía la hace el TAMAÑO, no el peso. · La DESCRIPCIÓN pasa de 13.5 a 13. Un medio pixel no se ve y sí obliga al navegador a redondear distinto en cada pantalla. · El MICRO se funde con el RÓTULO en 11 px. Eran dos peldaños para el mismo trabajo --etiquetas en versalitas-- y a 10 px el texto impreso se pierde. El titular arranca un poco más arriba (22 en vez de 20) para que no se junte con el subtítulo nuevo de 20. */ .doc{ --t-rot:11px; /* rotulo de seccion, en versalitas */ --t-h3:clamp(22px,2.6cqw,28px); /* titulo de seccion */ --t-h4:20px; /* titulo dentro de una seccion (era 16) */ --t-p:15px; /* texto corrido */ --t-sec:13px; /* texto secundario y listas (era 13.5) */ --t-min:12px; /* pie, notas al margen */ --t-micro:11px; /* fundido con el rotulo (era 10) */ /* Los iconos tambien tenian su desorden: siete medidas sueltas. Tres peldanos, uno por uso. */ --i-linea:14px; /* el icono que acompana una linea de texto */ --i-rotulo:16px; /* el que encabeza un rotulo */ --i-grande:20px; /* el que vale por si solo */ } /* ══════════════════════════════════════════════════════════════════ LA REGLA DE TIPOGRAFIA · Y NO SE SALE NADA DE AQUI ══════════════════════════════════════════════════════════════════ Se midio sobre el documento armado, y tenia razon de sobra: 21 tamaños distintos · 6 pesos · 1 tipo El tipo estaba bien (Inter, uno solo). Lo que sobraba eran los tamaños: 17 peldaños para el CUERPO del texto --17, 17.4, 17.7, 16, 15, 14, 13.5, 13, 12.8, 12.5, 12, 11.5, 11, 10.5, 10, 9.5 y 8 px-- puestos uno a uno segun hiciera falta, y seis pesos del 300 al 800. Ahora son SEIS tamaños y DOS pesos: TITULOS (intocables, los dio por buenos) h1 portada clamp(25 - 46px) / 800 h3 seccion clamp(20 - 28px) / 800 --t-h3 vs-tit clamp(21 - 36px) / 300 (la excepcion, ver abajo) CUERPO --t-h4 16px / 800 titulo dentro de una seccion --t-p 15px / 400 texto corrido --t-sec 13.5px / 400 secundario, listas, celdas --t-min 12px / 400 pie, notas, encabezados de tabla --t-rot 11px / 800 rotulos en versalitas --t-micro 10px / 400 el rotulo de una celda PESOS: 400 y 800. Nada de 500, 600 ni 700. TIPO: Inter. Uno. COLOR: los tokens de `.doc` --navy, txt2, txt3, amar--, ninguno suelto. Si algo necesita un tamaño que no esta en la lista, lo que hay que cambiar es la lista, no la regla suelta. */ .doc .rot{font:800 var(--t-rot) var(--f);letter-spacing:.13em;text-transform:uppercase; color:var(--txt2);margin:0 0 14px;display:flex;align-items:center;gap:11px} .doc .rot::after{content:"";flex:1;height:1px;background:var(--borde)} .doc h3{font:800 var(--t-h3)/1.22 var(--f);margin:0 0 10px;letter-spacing:-.02em; color:var(--txt);text-wrap:balance} .doc h4{font:800 var(--t-h4)/1.3 var(--f);margin:0 0 6px;color:var(--txt)} .doc p{margin:0 0 12px;max-width:66ch;color:var(--txt-cuerpo);font-size:var(--t-p)} .doc small{color:var(--txt2);font-size:var(--t-min)} .doc ul.lim{margin:0 0 12px;padding-left:18px} .doc ul.lim li{margin-bottom:5px;color:var(--txt-cuerpo);font-size:var(--t-sec)} .doc li{font-size:var(--t-sec)} /* ── Y LAS NEGRITAS TAMBIEN SON DEL SISTEMA ── `` y `` traen 700 por omision del navegador, y ese 700 no esta en la escala: medido, 17 nodos del documento se salian por ahi sin que ninguna regla lo pidiera. El peso fuerte del sistema es 800; el 700 no existe. */ .doc b,.doc strong{font-weight:800} /* ── CONDICIONES COMERCIALES ── Van en cajones, como el Anexo: el anexo tecnico se presenta en botones expandibles, no en una lista abierta. Usan el mismo componente `.det`, asi que no necesitan reglas propias; lo unico suyo es el respiro antes del primer cajon. */ /* Los cajones de condiciones no se apilan en pantalla grande: cuatro apartados independientes en una columna dejan media pagina vacia y alargan el documento por nada. En telefono vuelven a una columna, que es donde apilar si tiene sentido. */ .doc .con-rej{display:grid;gap:9px;margin-top:4px} @container (min-width:720px){ .doc .con-rej{grid-template-columns:1fr 1fr;gap:10px 14px} } @container (min-width:1040px){ .doc .con-rej{grid-template-columns:repeat(2,1fr)} } .doc .con-rej .det{margin:0} /* ══════════════════════════════════════════════════════════════════ LA ESCALA MANDA TAMBIEN EN PUNTO DE CONTROL ══════════════════════════════════════════════════════════════════ La escala ya existe --seis peldaños sacados de lykos.lat-- pero esta seccion no la usaba: venia de un constructor viejo con 9, 10 y 11 px escritos a mano en la tabla. Aqui se le obliga a usarla. LA REGLA, para no salirse nunca: --t-rot 11 px / 800 rotulo de seccion, versalitas --t-h3 20-28 px / 800 titulo de seccion --t-h4 16 px / 800 titulo dentro de una seccion --t-p 15 px / 400 texto corrido --t-sec 13.5 px / 400 texto secundario, listas, celdas --t-min 12 px / 400 pie, notas, encabezados de tabla Un solo tipo (Inter), dos pesos (400 y 800) y los colores del bloque de tokens: nada fuera de ahi. ══════════════════════════════════════════════════════════════════ */ .doc #s-pto table{font-size:var(--t-sec)} .doc #s-pto th{font-size:var(--t-min)} .doc #s-pto td{font-size:var(--t-sec)} .doc #s-pto small,.doc #s-pto .nota-ok,.doc #s-pto .nota-avi{font-size:var(--t-min)} .doc #s-pto p{font-size:var(--t-p)} /* La leyenda de la tabla: los tres estados con su muestra de color. Tamaño y peso salen de la escala, no del marcado. */ .doc .leyenda{display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center; padding:9px 13px;background:var(--sup2);border-radius:var(--r);margin-bottom:9px} .doc .leg-it{display:inline-flex;align-items:center;gap:7px; font:400 var(--t-min) var(--f);color:var(--txt2)} .doc .leg-c{width:10px;height:10px;border-radius:3px;flex:0 0 auto; background:var(--navy);border:1px solid var(--borde)} .doc .leg-c.c-rec{background:var(--txt3)} .doc .leg-c.c-no{background:var(--mal)} .doc .pie-nota{display:block;font:400 var(--t-min) var(--f);color:var(--txt2); font-style:italic;margin-top:7px} /* La lista de accesos del sitio y los dos separadores que quedaban con el margen escrito en el marcado. */ .doc .acc-lista{margin-bottom:11px} .doc .acc-it{padding:4px 0;font-size:var(--t-sec);color:var(--txt2); display:flex;align-items:center;gap:7px;flex-wrap:wrap} .doc .acc-it i{color:var(--txt3)} .doc .bloque-sep{margin-top:18px;border-top:1px solid var(--borde);padding-top:13px} .doc .p-sep{margin-top:13px} /* El "2 / 2" de la columna de elementos no se parte en dos renglones. */ .doc #s-pto td,.doc #s-pto th{white-space:nowrap} .doc #s-pto td:first-child,.doc #s-pto th:first-child{white-space:normal} /* ══════════════════════════════════════════════════════════════════ EN EL MENSUALIZADO, LA INVERSION MENSUAL MANDA ══════════════════════════════════════════════════════════════════ Es la tercera columna. Se destaca con lo que el diseño ya usa para jerarquizar --peso, tamaño y un fondo tenue-- sin inventar un color nuevo ni añadir una palabra. Las demas cifras bajan un punto de peso para que el contraste se note. ══════════════════════════════════════════════════════════════════ */ .doc #s-men thead th:nth-child(3){color:var(--txt);font-weight:800} .doc #s-men tbody td:nth-child(3), .doc #s-men tfoot td:nth-child(3){ /* El `calc(--t-sec + 1.5px)` daba 14.5 px: un peldaño inventado que no esta en la escala, y medido en pantalla era el ultimo tamaño fuera de ella. Sube a Texto (15), que si existe. La diferencia es medio pixel: la columna sigue destacando por el peso, el color y el fondo ambar, que es lo que la hace resaltar. */ font-weight:800;font-size:var(--t-p);color:var(--navy); background:rgba(255,194,7,.10); box-shadow:inset 1px 0 0 rgba(255,194,7,.45), inset -1px 0 0 rgba(255,194,7,.45), inset 0 -1px 0 rgba(4,30,66,.09)} .doc #s-men thead th:nth-child(3){background:rgba(255,194,7,.18)} .doc #s-men tbody td:nth-child(n+4){font-weight:400;color:var(--txt2)} /* ══════════════════════════════════════════════════════════════════ LOS CAJONES SE LEVANTAN AL PASAR EL CURSOR ══════════════════════════════════════════════════════════════════ Un cajon cerrado no se distingue de un renglon de texto hasta que alguien lo toca. Con esto se levanta, se le marca el borde y el signo de mas gira: dice "soy un boton" antes de que lo pulses. No se aplica en papel --ahi no hay cursor-- ni para quien pidio menos movimiento en su sistema. */ .doc .det{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease} .doc .det summary{transition:background .18s ease} @media (hover:hover){ /* ── EL MISMO NIVEL QUE EN EL TELÉFONO · 13/oct/2026 ── Y era literal: el teléfono subía 6 px, crecía 2.2 % y levantaba una sombra de verdad; el cursor sólo 2 px y 0.6 %, que a su lado no se nota. Ahora son los MISMOS valores, con la franja ámbar incluida. */ .doc .det:hover{transform:translateY(-6px) scale(1.022); box-shadow:0 14px 34px rgba(4,30,66,.20), inset 4px 0 0 0 var(--amar); border-color:var(--amar)} .doc .det:hover summary{background:var(--sup2)} .doc .det:hover summary::after{transform:rotate(90deg);color:var(--amar-d)} } /* ── Y EN EL TELÉFONO, EL MISMO EFECTO AL PASAR CON EL SCROLL ── `efectos.js` pone `.al-paso` al cajón que cruza la franja central. Es exactamente lo que hace el hover en computadora, para que el cajón no pase desapercibido en una pantalla sin cursor. ⚠ ESTAS REGLAS VAN FUERA DEL `@media (hover:hover)`. La primera vez las pegué dentro sin darme cuenta, así que en un teléfono --que es el único sitio donde hacen falta-- no existían: `efectos.js` ponía la clase y no pasaba nada. Medido: clase puesta, `transform: none`. */ /* ⚠ Y SOBRE TODO: TIENE QUE NOTARSE. El efecto de antes era `translateY(-2px) scale(1.006)`. En una pantalla de 390 px, ese 1.006 son DOS PIXELES de ancho repartidos entre los dos lados: un pixel por lado. No es que se viera poco, es que no se veia. Copiarle al hover de la computadora fue el error: ahi el cursor ya dice cual es, y basta un guino. En el telefono el efecto ES la unica senal, asi que tiene que ser una afirmacion. Ahora: sube 6 px, crece al 2.2 %, levanta una sombra de verdad y enciende una franja ambar de 4 px pegada al borde izquierdo --que es lo que se ve de reojo, antes incluso de mirar--. */ .doc .det{transition:transform .34s cubic-bezier(.22,.61,.36,1), box-shadow .34s ease, border-color .34s ease} .doc .det.al-paso{transform:translateY(-6px) scale(1.022); box-shadow:0 14px 34px rgba(4,30,66,.20), inset 4px 0 0 0 var(--amar); border-color:var(--amar)} .doc .det.al-paso summary{background:var(--sup2);color:var(--navy)} /* El signo tambien gira al pasar, como con el cursor. */ .doc .det.al-paso summary::after{transform:rotate(90deg) scale(1.18);color:var(--amar-d)} /* Quien pidio menos movimiento conserva la senal, sin el movimiento: apagarlo del todo lo dejaria sin saber cual es. */ @media (prefers-reduced-motion:reduce){ .doc .det.al-paso{transform:none; box-shadow:0 2px 8px rgba(4,30,66,.10), inset 4px 0 0 0 var(--amar)} } .doc .det summary::after{transition:transform .22s ease, color .18s ease} @media (prefers-reduced-motion:reduce){ .doc .det,.doc .det summary,.doc .det summary::after{transition:none} .doc .det:hover{transform:none} } @media print{ .doc .det{transition:none;transform:none;box-shadow:none} } .doc th{font-size:var(--t-min)} .doc td{font-size:var(--t-sec)} /* portada */ .doc .port{background:var(--navy);color:#fff} .doc .port .pad{padding-block:34px 30px} @container (min-width:700px){ .doc .port .pad{padding-block:54px 44px} } .doc .mk{display:flex;align-items:center;gap:10px;margin-bottom:26px} /* ── LAS ACCIONES, DENTRO DEL AZUL ── Los botones de idioma y descarga comparten renglon con el logotipo, empujados a la derecha. Ya no hay franja propia --ver `_accionesDoc()` en el motor-- y por tanto no hay filo entre dos bloques, que es de donde salia la linea blanca. En telefono se quedan en su renglon, debajo del logotipo, para no apretar la marca. */ /* ── LOS BOTONES, A LA ALTURA DEL LOGOTIPO ── Eran dos cosas sumandose. `align-self:flex-start` los pegaba al borde de arriba mientras el logotipo se quedaba centrado, y el menu de idiomas --que viaja dentro de este mismo bloque-- lo estiraba por abajo. Entre una cosa y la otra quedaba un hueco de azul vacio mas alto que el propio logotipo. Ahora van centrados con la marca, en su renglon, y el menu se posiciona desde el bloque sin ocupar sitio. */ /* ── EL MENÚ DE IDIOMAS CUELGA DE LOS BOTONES, NO DE LA SECCIÓN ── Esto decía `position:static` a propósito, cuando la portada tampoco estaba posicionada: el menú se anclaba entonces al documento. Pero al poner `position:relative` en la portada --para la aurora-- pasó a anclarse a la SECCIÓN ENTERA, y como abre con `top:100%`, caía al fondo del bloque azul, a media pantalla del botón. Con `relative` aquí, el menú abre pegado a su botón, que es de donde tiene que colgar. */ .doc .mk .bd-acc{margin-left:auto;display:flex;gap:9px;flex:0 0 auto; align-items:center;position:relative} /* ── LOS BOTONES, COLOCADOS ── El renglon del logotipo arranca donde arranca el relleno de la portada, asi que los botones quedaban contra el borde. Se les da su propio respiro arriba, dentro del azul. */ /* ── Y EL DE DESCARGAR NO ES AMARILLO ── El amarillo es de la accion principal --aceptar la propuesta--, y usarlo tambien aqui ponia dos llamadas del mismo peso compitiendo. Descargar es secundario: mismo trato que el de idioma. */ .doc .bd-pdf{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff} .doc .bd-pdf:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)} @container (max-width:479px){ .doc .mk{flex-wrap:wrap;row-gap:14px} .doc .mk .bd-acc{margin-left:0;width:100%} } /* Sólo el isotipo. La palabra "LYKOS" en texto era un logotipo inventado: el logotipo de la casa es el que ya trae el motor. */ .doc .iso{width:42px;height:auto;flex:0 0 auto;display:block} .doc[data-a="bn"] .iso{filter:grayscale(1) brightness(2.4)} .doc .eyeb{font:800 var(--t-rot) var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--amar);margin:0 0 12px} .doc .port h1{font:800 clamp(25px,5.2cqw,46px)/1.1 var(--f);margin:0 0 15px;letter-spacing:-.03em; color:#fff;max-width:21ch;text-wrap:balance} .doc .lede{font-size:clamp(14.5px,1.7cqw,17.5px);color:var(--sobre-navy);max-width:52ch;margin:0 0 24px} .doc .pied{display:flex;gap:10px 26px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.17);padding-top:15px;margin:0} .doc .pied dt{font:800 var(--t-micro) var(--f);letter-spacing:.11em;text-transform:uppercase;color:var(--txt-pie);margin:0 0 3px} .doc .pied dd{margin:0;font-size:var(--t-sec);color:#fff;font-weight:400} /* piezas */ .doc .campos{display:grid;gap:0;border:1px solid var(--borde);border-radius:var(--r);overflow:hidden} @container (min-width:620px){ .doc .campos{grid-template-columns:1fr 1fr} } @container (min-width:980px){ .doc .campos{grid-template-columns:repeat(3,1fr)} } .doc .campos div{padding:12px 15px;border-top:1px solid var(--borde);min-width:0} .doc .campos div:first-child{border-top:0} @container (min-width:620px){ .doc .campos div:nth-child(2){border-top:0} } @container (min-width:980px){ .doc .campos div:nth-child(3){border-top:0} } .doc .campos dt{font:800 var(--t-micro) var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--txt2);margin:0 0 4px} .doc .campos dd{margin:0;font-size:var(--t-p);font-weight:400;word-break:break-word} .doc .caja{border:1px solid var(--borde);border-radius:var(--r);overflow:hidden;margin-bottom:13px} .doc .fila{display:flex;gap:12px;justify-content:space-between;align-items:baseline;padding:12px 16px;border-top:1px solid var(--borde)} .doc .fila:first-child{border-top:0} .doc .fila.tot{background:var(--sup2)} .doc .et{font-size:var(--t-p);min-width:0} .doc .et small{display:block;margin-top:2px} .doc .vl{font-weight:800;font-size:var(--t-p);white-space:nowrap;font-variant-numeric:tabular-nums} .doc .pild{display:inline-block;font:800 var(--t-micro) var(--f);letter-spacing:.09em;text-transform:uppercase; padding:3px 8px;border-radius:999px;margin-bottom:7px} .doc .p-ri{background:var(--mal-bg);color:var(--mal)} .doc .p-ok{background:var(--ok-bg);color:var(--ok)} .doc .falta{background:var(--avi-bg);border:1px dashed var(--amar-d);border-radius:9px; padding:10px 13px;font-size:var(--t-sec);color:var(--amar-d);margin:0 0 13px} .doc .falta b{font-weight:800} /* comparativa */ .doc .vs{display:grid;gap:0;border:1px solid var(--borde);border-radius:var(--r);overflow:hidden} .doc .vs .enc{display:none} /* ══════════════════════════════════════════════════════════════════ LA DIFERENCIA · DOS COLUMNAS TAMBIEN EN EL TELEFONO ══════════════════════════════════════════════════════════════════ Y tiene razon: esta seccion ES una comparacion. Apilada se pierde --el cliente lee "un codigo pegado en la pared" y, tres renglones mas abajo, "cada acceso queda sellado con hora y fotografia", sin que una cosa se lea contra la otra--. El contraste solo existe si las dos estan a la vez delante de los ojos. Asi que en telefono la pregunta ocupa el ancho completo y debajo van las dos respuestas, lado a lado. Los rotulos de las columnas --que en movil estaban escondidos-- se encienden, porque sin ellos no se sabe cual es cual; el de la pregunta se queda fuera, que ahi ya no es una columna. El texto baja de 13.5 a 12.5 px en esa anchura: media pantalla de telefono son unos 160 px, y a 13.5 se partian las palabras. ══════════════════════════════════════════════════════════════════ */ @container (max-width:759px){ .doc .vs{grid-template-columns:1fr 1fr} .doc .vs .q{grid-column:1 / -1} .doc .vs .enc{display:block} .doc .vs .enc.e1{display:none} /* ── A 160 px DE ANCHO, CADA PÍXEL DE PADDING ES UN RENGLÓN ── 13/oct/2026. Las dos columnas se quedan --el contraste sólo existe si se ven juntas-- pero medido con el documento de una cotización real la sección abierta medía 2 046 px: a 13 px de padding lateral quedan unos 134 px de texto, catorce caracteres por renglón, y ahí 250 palabras se vuelven una tira. Se recupera ancho donde no cuesta nada --el aire lateral-- y se aprieta el interlineado. `hyphens` evita los ríos blancos que deja una columna tan estrecha cuando una palabra larga no cabe. */ .doc .vs .a,.doc .vs .b{font-size:var(--t-sec);padding:11px 9px; line-height:1.42;overflow-wrap:break-word} /* Sin separación silábica: probada a 116 px, partía «verifi-cados» y «confia-bilidad» cada dos renglones. Comprime, sí, pero un texto lleno de guiones se LEE más denso, que es justo lo contrario de lo que se buscaba. */ .doc .vs .a{border-right:1px solid var(--borde)} .doc .vs .q{padding:10px 11px} } @container (min-width:760px){ .doc .vs{grid-template-columns:1fr 1fr 1fr} .doc .vs .enc{display:block} } .doc .vs > div{padding:13px 16px;border-top:1px solid var(--borde);min-width:0} .doc .vs .q{font:800 var(--t-min) var(--f);color:var(--txt);background:var(--sup2)} .doc .vs .a{font-size:var(--t-sec);color:var(--txt2)} .doc .vs .b{font-size:var(--t-sec);color:var(--txt-cuerpo)} .doc .vs .b b{color:var(--navy);font-weight:800} .doc .vs .enc{font:800 var(--t-rot) var(--f);letter-spacing:.1em;text-transform:uppercase;border-top:0;padding:11px 16px} .doc .vs .enc.e1{background:var(--navy);color:#fff} .doc .vs .enc.e2{background:var(--sup2);color:var(--txt2)} .doc .vs .enc.e3{background:var(--amar);color:var(--navy)} /* ── EN TELÉFONO SIGUE SIENDO UNA TABLA, NO TEXTO CORRIDO ── Tenía razón: apiladas sin marco, las dos respuestas se leían como un párrafo. Cada pregunta se vuelve una tarjeta con sus dos celdas, con fondos distintos y el filo amarillo del lado de Lykos, para que la comparación se vea de un golpe. */ @container (max-width:759px){ .doc .vs{border:0;border-radius:0;gap:13px;background:none;overflow:visible} .doc .vs .enc{display:none} .doc .vs > div{border:0;padding:0} .doc .vs .q{background:var(--navy);color:#fff;padding:11px 14px;border-radius:12px 12px 0 0; font:800 var(--t-sec) var(--f);line-height:1.35} .doc .vs .a, .doc .vs .b{padding:12px 14px;font-size:var(--t-sec)} .doc .vs .a{background:var(--sup2);border-left:1px solid var(--borde);border-right:1px solid var(--borde)} .doc .vs .b{background:var(--sup);border:1px solid var(--borde);border-top:0; border-radius:0 0 12px 12px;box-shadow:inset 3px 0 0 var(--amar)} .doc .vs .a::before, .doc .vs .b::before{display:block;font:800 var(--t-micro) var(--f); letter-spacing:.11em;text-transform:uppercase;margin-bottom:5px} .doc .vs .a::before{content:"Proveedor tradicional";color:var(--txt3)} .doc .vs .b::before{content:"Lykos";color:var(--amar-d)} } /* valor agregado */ /* ══════════════════════════════════════════════════════════════════ VALOR AGREGADO · CARRETE EN EL TELEFONO ══════════════════════════════════════════════════════════════════ Son ocho tarjetas. Apiladas en un telefono ocupan pantalla y media de puro scroll vertical, y el cliente las pasa de largo. En carrete se ven de una en una, se recorren con el pulgar y cada una se detiene donde debe --`scroll-snap`, que lo hace el navegador: ni una linea de JavaScript, ni un gesto que capturar--. La barra de desplazamiento se esconde pero el carrete SIGUE siendo scroll de verdad: funciona con el dedo, con la rueda, con el teclado y con un lector de pantalla. Un carrusel hecho a mano con botones se habria llevado las tres ultimas. De 720 px en adelante vuelve a la rejilla de dos columnas: en tablet y escritorio caben, y leerlas juntas es mejor. ══════════════════════════════════════════════════════════════════ */ .doc .val{display:grid;gap:12px} /* El aviso nace escondido y lo enciende el carrete. Declarado DESPUES de las consultas les ganaba por orden y no se veia nunca: medido. */ .doc .val-nota{display:none;font:800 var(--t-rot) var(--f);color:var(--txt3); letter-spacing:.06em;text-transform:uppercase;margin:2px 0 10px} @container (max-width:719px){ .doc .val{ grid-auto-flow:column; grid-auto-columns:82%; /* se asoma la siguiente: invita a pasarla */ overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--val-margen,20px); padding-bottom:10px; /* El carrete se sale del margen de la seccion para que la primera tarjeta empiece donde empieza el texto y la ultima pueda deslizarse hasta el borde. */ margin-inline:calc(var(--val-margen,20px) * -1); padding-inline:var(--val-margen,20px); -webkit-overflow-scrolling:touch; scrollbar-width:none; } .doc .val::-webkit-scrollbar{display:none} .doc .val article{scroll-snap-align:start} /* El aviso de que hay mas: sin esto parece una tarjeta cortada. */ .doc .val-nota{display:block} } @container (min-width:560px) and (max-width:719px){ .doc .val{grid-auto-columns:56%} } @container (min-width:720px){ .doc .val{grid-template-columns:1fr 1fr} .doc .val-nota{display:none} } /* ── LA TARJETA DE VALOR, COMO EN lykos.lat ── El diseño se toma de la sección "04 — LA PRUEBA" de la web. Lo que la distingue no es el color, es el AIRE: la tarjeta respira, el chip ámbar tiene cuerpo, el título pesa más que el párrafo, y el pie va separado por una línea en vez de quedar pegado al texto. Eso es lo que se trae aquí. */ .doc .val article{border:1px solid rgba(242,181,13,.42);border-radius:14px; padding:22px 21px 20px;min-width:0;background:var(--sup); box-shadow:0 1px 3px rgba(4,30,66,.05)} /* ── LA TARJETA, COMO EN lykos.lat ── Chip amarillo arriba, titulo, texto, y el contraste separado por una linea. Medido en su pagina: el chip es #FFC207 con texto navy, 800, versalitas y letra espaciada; el titulo 800; el pie en gris. */ .doc .val article{display:flex;flex-direction:column} .doc .val-chip{align-self:flex-start;background:var(--amar);color:var(--navy); font:800 var(--t-rot) var(--f);letter-spacing:.12em;text-transform:uppercase; padding:6px 13px;border-radius:7px;margin-bottom:15px;line-height:1} /* El título pesa: en la captura es lo primero que se lee después del chip, bastante mayor que el párrafo. */ .doc .val h4{font:800 clamp(17px,1.9cqw,20px)/1.28 var(--f);margin:0 0 10px; color:var(--navy);letter-spacing:-.015em} /* ── EL NUMERO DE LOS DOCUMENTOS YA EMITIDOS ── El motor ya no emite el numero dentro del titulo: desde hoy es el chip amarillo de arriba. Pero las propuestas que YA se enviaron llevan guardado el marcado anterior, `

G1Materia...`, y al reescribir este bloque se perdio la regla que vestia ese ``: sin ella vuelve a ser cursiva --lo que hace el navegador por omision-- y queda pegado al titulo. Una propuesta enviada tiene que seguir viendose bien el dia que el cliente la abra, asi que la regla se queda. Es la misma leccion de [[una-propuesta-enviada-lleva-sus-numeros-congelados]]: el motor cambia, los documentos emitidos no. */ .doc .val h4 i{font:800 var(--t-micro) var(--f);font-style:normal; color:var(--amar-d);margin-right:9px;letter-spacing:.09em; display:inline-block;vertical-align:1px} .doc .val p{font-size:var(--t-sec);line-height:1.62;margin:0 0 9px; max-width:none;color:var(--txt2)} /* El pie: rotulo en versalitas y, debajo, el dato. Es el remate de las tarjetas de lykos.lat --medido alli: el rotulo en 800 con letra espaciada--. Aqui el dato es el contraste, asi que el rotulo va arriba y el texto debajo: se lee "UN PROVEEDOR TRADICIONAL / una libreta en la caseta". */ .doc .val .ant{border-top:1px solid var(--borde);padding-top:11px; margin:auto 0 0;display:flex;flex-direction:column;gap:3px} /* El pie de la tarjeta va DESPUES de una linea, con su rotulo en versalitas encima del dato --igual que los dos datos del pie en la captura de lykos.lat--, y pegado al fondo para que todas las tarjetas de una fila alineen su pie aunque el texto mida distinto. */ .doc .val article > .ant, .doc .val article > .ant-et{margin-top:auto;padding-top:13px; border-top:1px solid var(--borde)} .doc .val article > .ant-et + .ant-dato{margin-top:3px} .doc .ant-et{font:800 var(--t-micro) var(--f);letter-spacing:.11em; text-transform:uppercase;color:var(--txt3)} .doc .ant-dato{font-size:var(--t-sec);color:var(--txt2);line-height:1.45} /* niveles */ .doc .nivs{display:grid;gap:11px;margin-bottom:14px} @container (min-width:720px){ .doc .nivs{grid-template-columns:repeat(3,1fr)} } .doc .niv{appearance:none;text-align:left;width:100%;background:var(--sup);border:1px solid var(--borde); border-radius:var(--r);padding:16px;cursor:pointer;font-family:var(--f);color:var(--txt);min-width:0} .doc .niv:hover{border-color:#C3CEDC} .doc .niv:focus-visible{outline:2px solid var(--amar);outline-offset:2px} .doc .niv[aria-pressed="true"]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)} .doc .niv .rec{display:inline-block;font:800 var(--t-micro) var(--f);letter-spacing:.1em;text-transform:uppercase; background:var(--amar);color:var(--navy);padding:2px 7px;border-radius:999px;margin-bottom:8px} .doc .niv .nom{font:800 var(--t-rot) var(--f);letter-spacing:.11em;text-transform:uppercase;color:var(--txt2);margin-bottom:6px} .doc .niv .mto{font:800 clamp(21px,2.7cqw,27px)/1 var(--f);letter-spacing:-.03em;font-variant-numeric:tabular-nums} .doc .niv .un{font-size:var(--t-min);color:var(--txt2);margin-top:4px} .doc .niv ul{margin:11px 0 0;padding:0;list-style:none} .doc .niv li{font-size:var(--t-min);color:var(--txt2);padding-left:14px;position:relative;margin-bottom:4px} .doc .niv li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--amar)} /* tablas */ .doc .tenv{overflow-x:auto} /* ══════════════════════════════════════════════════════════════════ EL PLAN MENSUALIZADO SE DESLIZA, NO SE PARTE ══════════════════════════════════════════════════════════════════ Son doce renglones de dinero que se leen COMPARANDOLOS: que el mes con dias de alta demanda cuesta mas que el siguiente. Convertida en tarjetas --como las demas tablas del documento-- cada mes quedaba en su isla y la comparacion se perdia. Aqui no hace falta apilar; hace falta poder correr la vista. Dos cosas lo hacen encajar en vez de parecer una tabla cortada: · La primera columna --el periodo-- se queda quieta mientras el resto se desliza. Sin eso, a la tercera columna ya no se sabe de que mes es la cifra. · El deslizamiento se detiene columna por columna, no a medias. ══════════════════════════════════════════════════════════════════ */ @container (max-width:760px){ .doc #s-men .tenv{ overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; /* Se sale del margen de la seccion: la tabla empieza donde empieza el texto y puede correrse hasta el borde de la pantalla. */ margin-inline:calc(var(--val-margen,20px) * -1); padding-inline:var(--val-margen,20px); } /* `position:sticky` sobre una celda NO funciona con `border-collapse:collapse` --el navegador colapsa los bordes y con ellos la posicion--: medido, la primera columna se iba con el scroll. Se separa y los bordes se dibujan a mano con sombras. */ /* Y `overflow:hidden` en la tabla --que la hoja le pone para redondearle las esquinas-- tambien lo rompe: cualquier ancestro recortado entre la celda y el contenedor que hace scroll anula el `sticky`. Medido: con el `hidden` puesto, la columna se iba con el scroll aunque todo lo demas estuviera bien. */ .doc #s-men table{min-width:560px;font-size:var(--t-min); border-collapse:separate;border-spacing:0;overflow:visible;border:0} .doc #s-men th,.doc #s-men td{border-top:0; box-shadow:inset 0 -1px 0 rgba(4,30,66,.09)} .doc #s-men th,.doc #s-men td{padding:8px 10px;white-space:nowrap;scroll-snap-align:start} /* El periodo se queda fijo a la izquierda. */ .doc #s-men th:first-child,.doc #s-men td:first-child{ position:sticky;left:0;z-index:2;background:var(--sup); box-shadow:inset 0 -1px 0 rgba(4,30,66,.09), 1px 0 0 var(--borde)} .doc #s-men thead th:first-child{background:var(--sup2)} .doc #s-men tfoot td:first-child{background:var(--sup2)} /* Y el rotulo que `tablas-tarjeta.js` pone delante de cada celda no va aqui: esta tabla conserva su encabezado. */ .doc #s-men tbody td:first-child::before{content:none} } /* ── Y ESTO VA DESPUÉS, A PROPÓSITO ── Las reglas de arriba y éstas pesan lo mismo, así que decide el orden. Aquí se apagan el `sticky` del periodo y el `scroll-snap` que causaban la columna inmóvil y el rebote al deslizar. */ @container (max-width:760px){ .doc #s-men .pm-t{overflow-x:auto;-webkit-overflow-scrolling:touch; padding:0;margin-inline:0;scroll-snap-type:none; border:1px solid var(--borde);border-radius:var(--r); /* El desvanecido del borde dice que la tabla sigue; se apaga al llegar al final. */ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent 100%); mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent 100%)} .doc #s-men .pm-t.alfinal{-webkit-mask-image:none;mask-image:none} .doc #s-men .pm-t table{min-width:646px;font-size:12px;table-layout:fixed; border-collapse:separate;border-spacing:0} .doc #s-men .pm-t th,.doc #s-men .pm-t td{box-sizing:border-box; scroll-snap-align:none;padding:9px 8px;position:static;left:auto;z-index:auto; box-shadow:inset 0 -1px 0 rgba(4,30,66,.09)} .doc #s-men .pm-t thead th{white-space:normal;line-height:1.2;font-size:9px; letter-spacing:.06em;vertical-align:bottom} .doc #s-men .pm-t tbody td,.doc #s-men .pm-t tfoot td{white-space:nowrap} .doc #s-men .pm-t th:nth-child(1),.doc #s-men .pm-t td:nth-child(1){width:178px; white-space:normal;line-height:1.3} .doc #s-men .pm-t th:nth-child(2),.doc #s-men .pm-t td:nth-child(2){width:84px} .doc #s-men .pm-t th:nth-child(3),.doc #s-men .pm-t td:nth-child(3){width:112px} .doc #s-men .pm-t th:nth-child(4),.doc #s-men .pm-t td:nth-child(4){width:88px} .doc #s-men .pm-t th:nth-child(5),.doc #s-men .pm-t td:nth-child(5){width:80px} .doc #s-men .pm-t th:nth-child(6),.doc #s-men .pm-t td:nth-child(6){width:104px} /* Con el `id`, por lo mismo que la pista: este bloque quedó antes de las reglas base y por orden perdía. En el teléfono la cifra va arriba y el argumento debajo; en dos columnas de 180 px el texto salía en tiras de tres palabras. */ .doc #s-men .pm-hero{grid-template-columns:1fr} .doc #s-men .pm-hero-t{border-left:0;border-top:1px solid rgba(255,255,255,.12)} .doc #s-men .pm-hero-n,.doc #s-men .pm-hero-t{padding:20px 20px 18px} /* Con el `id` gana pase lo que pase: al mover este bloque quedó ANTES de la regla que la apaga, y por orden perdía. */ .doc #s-men .pm-pista{display:block} } /* La tabla hereda el color a la fuerza. Sin esto, en modo quirks --y un fragmento HTML sin doctype lo es-- las tablas NO heredan `color` y toman el del cuerpo: medido, toda la tabla del mensualizado salía en #E6ECF4, o sea blanco sobre blanco en la hoja impresa. */ .doc table, .doc thead, .doc tbody, .doc tfoot, .doc tr, .doc th, .doc td{color:inherit} .doc table{border-collapse:collapse;width:100%;font-size:var(--t-sec);min-width:430px} .doc th{text-align:left;font:800 var(--t-micro) var(--f);letter-spacing:.09em;text-transform:uppercase; color:var(--txt2);padding:9px;border-bottom:1px solid var(--borde);white-space:nowrap} /* Las celdas EXISTEN, con poca opacidad pero visibles: una tabla de dinero sin rejilla se le pierde al ojo al cruzar de columna. */ .doc td{padding:9px;border-bottom:1px solid rgba(4,30,66,.09); border-right:1px solid rgba(4,30,66,.06);font-variant-numeric:tabular-nums} .doc td:last-child, .doc th:last-child{border-right:0} .doc th{border-right:1px solid rgba(4,30,66,.09)} .doc tbody tr:nth-child(even) td{background:rgba(4,30,66,.022)} .doc table{border:1px solid rgba(4,30,66,.12);border-radius:var(--r);overflow:hidden} .doc td.n, .doc th.n{text-align:right;white-space:nowrap} .doc tfoot td{border-top:1px solid var(--borde);border-bottom:0;font-weight:800;background:var(--sup2)} .doc .sin{color:var(--txt3)} @container (max-width:619px){ /* Doce renglones de dinero con scroll lateral se leen mal en un teléfono. En modo tarjeta el encabezado sobra: cada celda ya lleva su rótulo en `data-t`, y esconderlo con `clip` lo dejaba invisible pero midiendo igual --medido: 125 px de exceso--. */ /* ── TODAS LAS TABLAS SE VUELVEN TARJETAS... MENOS UNA ── Apilar funciona cuando cada renglon se lee SOLO --un apostamiento, un concepto del glosario--. El mensualizado no: son doce meses de dinero que se leen comparandolos, y en tarjetas cada mes queda en su isla. Esa se queda como tabla y se desliza; ver el bloque de `#s-men` mas arriba. `:not(#s-men ...)` en vez de deshacerlo despues: deshacer deja las dos reglas vivas peleandose, y gana la que este mas abajo. */ .doc .tenv:not(#s-men .tenv){overflow:visible} .doc table:not(#s-men table){min-width:0} .doc thead:not(#s-men thead){display:none} .doc tbody tr:not(#s-men tr), .doc tfoot tr:not(#s-men tr){display:block;border:1px solid var(--borde);border-radius:11px;padding:12px 14px;margin-bottom:8px} .doc tbody td:not(#s-men td), .doc tfoot td:not(#s-men td){display:flex;justify-content:space-between;align-items:baseline;gap:14px; border:0;padding:4px 0;font-size:var(--t-sec);text-align:left;background:none} .doc tbody td:not(#s-men td)::before, .doc tfoot td:not(#s-men td)::before{content:attr(data-t);color:var(--txt2); font:800 var(--t-micro) var(--f);letter-spacing:.08em;text-transform:uppercase;flex:0 0 auto} .doc tbody td:not(#s-men td):first-child, .doc tfoot td:not(#s-men td):first-child{display:block;font-weight:800;font-size:var(--t-sec); padding:0 0 8px;margin-bottom:5px;border-bottom:1px solid var(--borde)} .doc tbody td:not(#s-men td):first-child::before, .doc tfoot td:not(#s-men td):first-child::before{content:none} /* ── Y EL TEXTO LARGO PARTE ANTES DE SALIRSE ── Medido en 375 px: dos celdas del glosario se salian 9 y 14 px --"Solo si hay un apostamiento con cobertura..."--. En tarjeta la celda es flex y el texto no partia; con eso el renglon se asomaba por el borde de la pagina. Se parte la palabra antes que desbordar: una palabra cortada se lee, un renglon fuera de pantalla no. */ .doc tbody td:not(#s-men td), .doc tfoot td:not(#s-men td){ overflow-wrap:anywhere;min-width:0} } /* ruta */ .doc .ruta{display:grid;gap:0;counter-reset:p;margin:0;padding:0} @container (min-width:700px){ .doc .ruta{grid-template-columns:repeat(4,1fr)} } .doc .ruta li{list-style:none;counter-increment:p;padding:13px 13px 13px 0;border-top:1px solid var(--borde);min-width:0} @container (min-width:700px){ .doc .ruta li{border-top:2px solid var(--borde);padding:12px 15px 0 0} .doc .ruta li:first-child{border-top-color:var(--amar)} } .doc .ruta b{display:block;font:800 var(--t-rot) var(--f);color:var(--txt2);letter-spacing:.09em;margin-bottom:4px} .doc .ruta b::before{content:counter(p) " · "} .doc .ruta h4{font:800 var(--t-p) var(--f);margin:0 0 3px} .doc .ruta p{font-size:var(--t-sec);margin:0;color:var(--txt2);max-width:none} /* anexo expandible */ .doc .dets{display:grid;gap:9px} .doc .det{border:1px solid var(--borde);border-radius:var(--r);background:var(--sup);overflow:hidden} /* ── EL CAJÓN DEL RESUMEN NO ES UN CAJÓN DEL ANEXO ── Va al final del documento y nace plegado (v606). Para que se lea como la conclusión y no como un apartado más, lleva el borde de la casa y su título a tamaño de sección. Sin amarillo: ese pinta y enciende, no delinea. */ .doc .det-res{border-color:var(--navy);box-shadow:0 2px 10px rgba(11,27,51,.07)} .doc .det-res>summary{background:var(--sup2);font-size:var(--t-sec);font-weight:800; color:var(--navy)} .doc .det-res[open]>summary{border-bottom:1px solid var(--borde)} .doc .det summary{cursor:pointer;list-style:none;padding:13px 16px;display:flex;align-items:center;gap:10px; font:800 var(--t-sec) var(--f);color:var(--txt)} .doc .det summary::-webkit-details-marker{display:none} .doc .det summary::after{content:"+";margin-left:auto;font:400 var(--t-h4) var(--f);color:var(--txt2);line-height:1} .doc .det[open] summary::after{content:"\2212"} .doc .det[open] summary{border-bottom:1px solid var(--borde)} .doc .det summary:hover{background:var(--sup2)} .doc .det summary:focus-visible{outline:2px solid var(--amar);outline-offset:-2px} .doc .det-cuerpo{padding:16px} .doc .det-cuerpo > h3:first-child{margin-top:0} @media print{ .doc .det{break-inside:avoid} .doc .det[open] summary::after{content:""} } /* foto del uniforme */ .doc .uni-foto{display:grid;gap:14px;margin-bottom:13px} /* ── EL BLOQUE DEL UNIFORME ── El cajon "Como se presenta el guardia" traia nueve estilos escritos a mano sobre trece elementos: era el mas viejo del Anexo en proporcion. Al portarlo a `.uni-foto` / `.marco-foto` le hacian falta dos piezas que la maqueta no llego a necesitar --alli el marco era un hueco con una leyenda, sin texto al lado--: el nombre de la linea y los rotulos de sus listas. Se escriben con los mismos tamanos y pesos que `.eb-paso h4` y `.rot`, que es lo que el diseno usa para lo mismo en otras secciones. */ .doc .uni-foto h4{font:800 var(--t-h4) var(--f);margin:0 0 5px;color:var(--txt)} .doc .uni-foto > div > p{font-size:var(--t-sec);color:var(--txt2);margin:0 0 9px;max-width:none} .doc .uni-foto p.sub{font:800 var(--t-micro) var(--f);letter-spacing:.09em;text-transform:uppercase; color:var(--txt2);margin:11px 0 5px} .doc .uni-foto .nota-ok{margin-top:10px} @container (min-width:620px){ .doc .uni-foto{grid-template-columns:200px 1fr;align-items:start} } /* ── LA REJILLA DE LAS EVIDENCIAS DEL LEVANTAMIENTO ── Tres por renglon en pantalla ancha, dos en tablet, una en telefono. Cada una recortada a 4:3 con `cover`, que es la proporcion en que sale una foto de telefono en horizontal: asi el renglon queda parejo aunque el inspector mezcle verticales y apaisadas. NO se reusa `.marco-foto`, que es el marco 2:3 de la foto del uniforme: con evidencias apaisadas dentro, una salia diminuta y la siguiente ocupaba la pantalla entera. */ /* En estrecho el conteo se metia DENTRO del nombre del frente: se leia "A1 - Mercancia y activo 3 fotografias de alto valor". La `.fila` generica es de dos columnas y no se toca; aqui se parte en dos renglones y ya. */ /* El guion lo pone la hoja y no el texto: asi el nombre del frente queda como un nodo limpio y lo encuentra el diccionario. */ .doc .ev-cod{color:var(--txt3);font-weight:800} .doc .ev-cod::after{content:" \2014 ";color:var(--txt3);font-weight:400} .doc .ev-cab{flex-wrap:wrap} @container (max-width:519px){ .doc .ev-cab{display:block} .doc .ev-cab .vl{display:block;margin-top:3px} } /* Lo que el inspector escribio, dentro de su bloque del acta. */ .doc .ev-nota{margin:0 0 10px;color:var(--txt);font-size:var(--t-sec);line-height:1.55} .doc .ev-nota:last-child{margin-bottom:0} /* Respaldo del `beforeprint` de efectos.js: si el navegador no diera el aviso, al menos se intenta desde la hoja. En Chrome esta regla sola NO basta --el contenido de un `details` cerrado lo oculta el propio navegador-- y por eso el arreglo de verdad es el de `cajonesAlImprimir`. Puesta aqui no estorba y en otros navegadores si sirve. */ @media print{ .doc details:not([open]) > *:not(summary){display:block} } .doc .ev-rej{display:grid;gap:10px;grid-template-columns:1fr} @container (min-width:520px){ .doc .ev-rej{grid-template-columns:1fr 1fr} } @container (min-width:760px){ .doc .ev-rej{grid-template-columns:1fr 1fr 1fr} } .doc .ev-foto{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r); border:1px solid var(--borde);background:var(--ritmo)} .doc .ev-foto img{width:100%;height:100%;object-fit:cover;display:block} /* En papel la rejilla se queda en dos columnas: a tres, cada foto baja de 5 cm y deja de servir como prueba de nada. */ @media print{ .doc .ev-rej{grid-template-columns:1fr 1fr} .doc .ev-foto{break-inside:avoid} } .doc .marco-foto{aspect-ratio:2/3;max-width:100%;border:1px solid var(--borde);border-radius:var(--r); background:var(--sup2);display:grid;place-items:center;text-align:center;padding:14px;overflow:hidden} .doc .marco-foto span{font:800 var(--t-min) var(--f);color:var(--txt3);line-height:1.5} /* El marco de la maqueta es un hueco con su dibujo y su leyenda: ahi todavia no habia fotografia de verdad. Cuando SI la hay --la evidencia del levantamiento CRO, y el dia que el uniforme traiga la suya-- la imagen tiene que llenar el marco sin deformarse, que es el defecto de [[la-foto-de-la-credencial-es-4-5]]: estirar en vez de recortar. El marco ya es 4:5 y `overflow:hidden`, asi que basta con que la imagen lo cubra. */ .doc .marco-foto{padding:0} .doc .marco-foto:has(> span),.doc .marco-foto:has(> div){padding:14px} /* ── `cover` LE CORTABA LOS PIES AL GUARDIA ── La causa es literal: `object-fit:cover` llena el marco recortando lo que sobra, y lo que sobra en una ilustración vertical son los pies y la gorra. `contain` la mete entera. Y el marco crece --de 4:5 a 3:4-- porque la ilustración es más alargada que el hueco que tenía: con 4:5 cabía pero quedaba diminuta, con dos franjas de aire a los lados. */ /* ── POR QUÉ `contain` NO BASTÓ ── Medido: el marco es 200×267 y la imagen se dibujaba a 198×297 — 30 px más alta, desbordando por abajo, y el `overflow:hidden` le comía los pies. La causa es que `place-items:center` pone `align-self:center`, y con eso el `height:100%` NO estira: la altura la calculaba la imagen por su proporción natural (560×840). Con `max-height` en vez de `height` ya no puede pasarse del marco, y `width:auto` la deja encontrar su propio ancho dentro del límite. */ .doc .marco-foto img{max-width:100%;max-height:100%;width:auto;height:auto; object-fit:contain;display:block} .doc .marco-foto svg{width:58px;height:58px;margin:0 auto 9px;display:block;color:var(--txt3)} /* constancia de aceptación */ .doc .sello{border:1px solid var(--borde);border-radius:var(--r);overflow:hidden} .doc .sello .top{background:var(--navy);color:#fff;padding:13px 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap} .doc .sello .top b{font:800 var(--t-sec) var(--f)} .doc .sello .top span{font:800 var(--t-rot) var(--f);letter-spacing:.1em;text-transform:uppercase; color:var(--navy);background:var(--amar);padding:3px 8px;border-radius:999px;margin-left:auto} .doc .sello .r{display:flex;justify-content:space-between;gap:12px;padding:11px 16px; border-top:1px solid var(--borde);font-size:var(--t-sec)} .doc .sello .r:first-of-type{border-top:0} .doc .sello .r b{font-weight:800;font-variant-numeric:tabular-nums;word-break:break-all;text-align:right} /* ══ METODOLOGÍA E-BITA · el riel de luz de la web de Lykos ══ Traído de `lykos-web/index.html`: un riel gris con un relleno amarillo que avanza con el scroll y tres sombras superpuestas para el halo. Los números se encienden al pasar. Mismo amarillo de la casa, mismo gesto. */ .doc .ebw{font-weight:800;letter-spacing:-.04em} .doc .eb{position:relative;display:grid;gap:26px;margin-top:20px} /* En el teléfono los pasos se tocaban: 26 px entre uno y otro, con un título, un párrafo y un chip dentro de cada uno, se leían como una lista continua en vez de como cuatro etapas. */ @container (max-width:699px){ .doc .eb{gap:38px;margin-top:26px} .doc .eb-paso > p{margin-bottom:12px} } @container (min-width:860px){ .doc .eb{grid-template-columns:1fr 1fr 1fr 1.05fr;gap:20px;align-items:start} } .doc .eb-riel{position:absolute;pointer-events:none;background:rgba(4,30,66,.1);border-radius:3px; left:21px;top:0;bottom:0;width:3px} @container (min-width:860px){ .doc .eb-riel{left:22px;right:22px;top:21px;bottom:auto;height:3px;width:auto} } .doc .eb-luz{position:absolute;left:0;top:0;width:100%;height:0;border-radius:3px;background:var(--amar); box-shadow:0 0 8px rgba(255,194,7,.95),0 0 18px rgba(255,194,7,.7),0 0 36px rgba(255,194,7,.4); transition:height .12s linear,width .12s linear} @container (min-width:860px){ .doc .eb-luz{height:100%;width:0} } @media (prefers-reduced-motion:reduce){ .doc .eb-luz{transition:none} } .doc .eb-paso{position:relative;z-index:1;padding-left:62px;min-width:0} @container (min-width:860px){ .doc .eb-paso{padding-left:0} } .doc .eb-n{width:45px;height:45px;border-radius:50%;background:var(--sup);border:2px solid rgba(4,30,66,.14); color:var(--txt);font:800 var(--t-h4) var(--f);display:flex;align-items:center;justify-content:center; position:absolute;left:0;top:0; transition:background .35s,border-color .35s,box-shadow .35s} @container (min-width:860px){ .doc .eb-n{position:static;margin-bottom:14px} } .doc .eb-paso.on .eb-n{background:var(--amar);border-color:var(--amar); box-shadow:0 0 0 6px rgba(255,194,7,.18),0 0 22px rgba(255,194,7,.55)} .doc .eb-paso h4{font:800 var(--t-h4) var(--f);margin:0 0 5px;color:var(--txt)} .doc .eb-paso > p{font-size:var(--t-sec);margin:0 0 9px;color:var(--txt2);max-width:none} .doc .eb-l{margin:0 0 10px;padding-left:16px} .doc .eb-l li{font-size:var(--t-sec);color:var(--txt-cuerpo);margin-bottom:4px} .doc .eb-d{display:inline-block;font:800 var(--t-rot) var(--f);letter-spacing:.09em;text-transform:uppercase; color:var(--txt2);border:1px solid var(--borde);border-radius:999px;padding:4px 11px} .doc .eb-res{background:var(--amar);border-color:var(--amar);color:var(--navy)} .doc .eb-fin h4{color:var(--navy)} /* Lo dimensionado contra lo contratado */ .doc .dim{display:grid;gap:9px;margin-bottom:13px} .doc .dim-f{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--borde); border-radius:var(--r);padding:13px 15px;min-width:0} .doc .dim-f.on{border-color:var(--ok);background:var(--ok-bg)} .doc .dim-n{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--sup2); display:grid;place-items:center;font:800 var(--t-p) var(--f);color:var(--txt)} .doc .dim-f.on .dim-n{background:var(--ok);color:#fff} .doc .dim-f b{display:block;font:800 var(--t-sec) var(--f);margin-bottom:2px} .doc .dim-f small{color:var(--txt2);font-size:var(--t-sec)} .doc .nota-ok{background:var(--ok-bg);border-left:3px solid var(--ok);border-radius:0 8px 8px 0; padding:11px 14px;font-size:var(--t-sec);color:#14543B;margin:0 0 12px;max-width:none} .doc .nota-ok b{font-weight:800} /* La misma nota, en ambar: lo que hay que tener en cuenta, no lo que ya esta bien. El diseño solo traia la verde porque en la maqueta no habia ningun aviso; el documento real si los tiene --como se cuentan los dias de alta demanda, o que un recomendado no esta contratado-- y venian con el color escrito a mano en el marcado. */ .doc .nota-avi{background:var(--avi-bg);border-left:3px solid var(--amar-d); border-radius:0 8px 8px 0;padding:11px 14px;margin:12px 0; font-size:var(--t-sec);color:var(--avi)} .doc .nota-avi b{font-weight:800} .doc .falta-et{display:block;font:800 var(--t-micro) var(--f);letter-spacing:.12em;text-transform:uppercase; color:var(--amar-d);opacity:.75;margin-bottom:5px} @media print{ .doc .falta{display:none} } /* ══ MASTER STAFFING · el rol de turnos, que siempre va ══ */ .doc .ms{display:grid;gap:5px;margin:4px 0 9px;overflow-x:auto} .doc .ms-dias, .doc .ms-fila{display:grid;grid-template-columns:78px repeat(7,minmax(34px,1fr));gap:4px;align-items:center;min-width:330px} .doc .ms-dias span{font:800 var(--t-micro) var(--f);color:var(--txt3);text-align:center;letter-spacing:.08em} .doc .ms-fila b{font:800 var(--t-rot) var(--f);color:var(--txt2);text-transform:uppercase;letter-spacing:.06em} .doc .ms-c{font:800 var(--t-rot) var(--f);text-align:center;padding:9px 2px;border-radius:7px; background:var(--sup2);color:var(--txt3);border:1px solid var(--borde)} /* El color de la celda SI es dato: en una jornada 12x36 hay cuatro guardias y la cuadricula tiene que decir quien cubre cada dia. Viaja como variable, asi que la hoja sigue mandando -- y el documento del diseño, que no la pone, cae en el navy de siempre. */ .doc .ms-c.on{background:var(--c,var(--navy));color:var(--cf,#fff); border-color:var(--c,var(--navy))} /* La hora del guardia, debajo de su nombre, en la columna de etiqueta. */ .doc .ms-fila b i{display:block;font:400 var(--t-micro) var(--f); color:var(--txt3);text-transform:none;letter-spacing:0;margin-top:1px} /* El domingo se senala, y mas fuerte si ese apostamiento lo tiene contratado con cobertura dominical. */ .doc .ms-dias span.dom{color:var(--txt2)} .doc .ms-dias span.dom.con{color:var(--navy);background:var(--sup2); border-radius:5px;padding:2px 0} .doc .ms-pie{display:flex;gap:8px 16px;flex-wrap:wrap;align-items:center;font:400 var(--t-min) var(--f);color:var(--txt2);margin-bottom:10px} .doc .ms-pie b{margin-left:auto;color:var(--ok);font-weight:800} .doc .ms-p{width:11px;height:11px;border-radius:3px;display:inline-block;vertical-align:-1px; background:var(--sup2);border:1px solid var(--borde);margin-right:5px} .doc .ms-p.on{background:var(--navy);border-color:var(--navy)} /* ══════════════════════════════════════════════════════════════════ EL ROL DE TURNOS · VESTIDO POR LA HOJA ══════════════════════════════════════════════════════════════════ El cajon "Dimensionamiento tecnico y turnos" era el peor del Anexo: 18 estilos escritos a mano sobre el marcado --colores de cabecera, tamanos de letra, bordes, rellenos-- y por tanto 18 decisiones de diseno que no estaban en ninguna hoja. Ahora el marcado dice QUE es cada bloque y esto dice como se ve. Los cuatro tipos de elemento --guardia, jefe de turno, jefe de servicio, rondinero-- se distinguen por clase, no por un color escrito en el HTML; y el recomendado-no-contratado se atenua, como en el resto del documento. Lo unico que sigue viajando en el marcado es el color de cada guardia en la cuadricula: ahi el color ES el dato --distingue al guardia A del B--, asi que entra por `--c` y la hoja lo dibuja. */ /* ── LOS VEHICULOS DEL SERVICIO ── Dos tarjetas que antes llevaban diez estilos en linea. Lo unico que el marcado dice ahora es si el vehiculo esta contratado o solo recomendado; el color lo decide esta hoja. */ /* ── DOS REGLAS DEL DISEÑO APROBADO QUE SE PERDIERON AL ACOTAR ── `.n` alinea el dinero a la derecha y le impide partirse de renglón; `.tot` marca el renglón de total de una caja. Las dos están en `propuesta-diseno-aprobado.html` y no habían llegado aquí, así que el marcado que las usara no se veía distinto de las demás. Se recuperan tal cual, sin cambiarles nada. */ .doc .n{text-align:right;white-space:nowrap} .doc .fila.tot, .doc .tot{background:var(--sup2)} /* ── LA RAMA DE EVENTO ── Sus dos bloques --Resumen y Despliegue-- llevaban 71 estilos en linea y el marcado viejo `pdf-section`. Ahora solo necesitan decir que son, y lo demas ya lo sabe esta hoja: la tabla, `.caja`, `.fila`, `.campos`, `.n`, `.nota-avi` y `.pie-nota` ya estaban escritas. */ /* Ya es una `section.sec`, asi que el espaciado y el `.pad` se los da la seccion. Aqui solo queda lo suyo. */ .doc .bloque-evt .rot{margin-bottom:6px} .doc .sec-int{font-size:var(--t-sec);color:var(--txt2);margin:0 0 11px} .doc .evt-tot{margin-top:13px;margin-left:auto;max-width:420px} .doc .evt-tot .pie-nota{text-align:right;padding:4px 15px 0} .doc .bloque-evt .campos{margin-top:13px} /* ── LA AURORA DETRÁS DE LOS BLOQUES NAVY ── Medido: de 9.260 px de documento, **8.427 son blanco o gris claro seguidos** — el 91 %. Los dos únicos respiros son la portada y el cierre, y entre ellos no hay nada. El lienzo va DETRÁS del contenido y más alto que el bloque: esa sobra es lo que el parallax recorre. La opacidad es baja a propósito: tiene que leerse como profundidad, no como un fondo de pantalla. `isolation:isolate` en el bloque: sin eso el `screen` con el que se componen las cintas se escaparía al resto del documento. */ /* ── EL LIENZO NO PUEDE SALIRSE DEL BLOQUE ── Este era el defecto de verdad, y lo di por arreglado mirando el z-index cuando el problema era otro: el lienzo se dibuja MAS ALTO que el bloque --esa sobra es el parallax-- y sin `overflow:hidden` se derramaba por abajo sobre la seccion siguiente. En la captura de produccion las ondas invadian el Resumen ejecutivo, encima del fondo blanco. `isolation` aisla el modo de fusion; `overflow` es lo que recorta. */ /* `position:relative` NO es decorativo aquí: sin él estos bloques son `static`, y un hijo `absolute` se posiciona contra el ancestro posicionado más cercano --que no es la sección--. El lienzo se iba fuera y oscurecía media página. Medido: 801 px de alto arrancando 87 px por encima del bloque. */ /* Sin `overflow` aquí: el menú de idiomas se despliega hacia abajo, sale del bloque y quedaba cortado. El recorte lo hace `.aur-caja`, que es la única que lo necesita. */ .doc .sec.port, .doc .sec.cierre{position:relative;isolation:isolate} .doc .aur-caja{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none} .doc .aur{position:absolute;inset:0 0 auto 0;z-index:0; opacity:.8;pointer-events:none;will-change:transform; -webkit-mask-image:linear-gradient(#000 62%, transparent 100%); mask-image:linear-gradient(#000 62%, transparent 100%)} /* ── Y EL TEXTO TIENE QUE GANARLE AL FONDO ── Con las cintas detras, el titular perdia contraste: el amarillo de "sin que quede registrado" se leia verdoso contra el azul claro de una onda. Un velo navy entre el lienzo y el texto lo devuelve, sin tapar la aurora: es un degradado, no una cortina. */ .doc .sec.port::before, .doc .sec.cierre::before{content:"";position:absolute; inset:0;z-index:1;pointer-events:none; background:linear-gradient(100deg, rgba(4,30,66,.80) 0%, rgba(4,30,66,.46) 52%, rgba(4,30,66,.10) 100%)} /* ── EL TEXTO DELANTE, EL FONDO DETRÁS ── Esto decía `> .pad` y sólo subía a ese hijo. Cualquier OTRO hijo del bloque --la franja de botones de la portada, el hueco del cierre-- se quedaba sin contexto de apilado y el lienzo le pasaba por encima. Ahora sube TODO lo que no sea el lienzo, sin enumerar hijos: el día que el bloque gane uno nuevo, también estará delante. */ /* ── TRES CAPAS, Y SE DICEN EN ORDEN ── 0 · la aurora el fondo, al fondo 1 · el velo navy entre medias, para que el texto contraste 2 · TODO lo demás las letras, al frente El velo estaba en 0, igual que el lienzo, y como un `::before` se pinta antes que los hijos quedaba DEBAJO de la aurora: no servía de nada. Ahora cada capa tiene su número y no dependen del orden del árbol. */ .doc .sec.port > *:not(.aur-caja), .doc .sec.cierre > *:not(.aur-caja){position:relative;z-index:2} /* El cierre mide la mitad que la portada, y con el mismo degradado la aurora se le comia entera: quedaba un navy plano. Ahi la mascara empieza mas abajo y las cintas suben un punto. */ .doc .sec.cierre .aur{opacity:.62; -webkit-mask-image:linear-gradient(#000 86%, transparent 100%); mask-image:linear-gradient(#000 86%, transparent 100%)} /* En papel no hay animación, y el degradado saldría como una mancha. */ .doc[data-v="pdf"] .aur{display:none} @media print{ .doc .aur{display:none} } @media (prefers-reduced-motion:reduce){ .doc .aur{opacity:.34} } /* ── LA BANDA DE FOTO QUE CORTA EL BLANCO ── Va en el punto medio del documento, entre Valor agregado y Objetivos. El fondo se dibuja mas alto que la banda y se mueve mas lento que el scroll: eso es el parallax. El velo navy la ata al resto del documento --sin el, una foto a todo color en medio de un documento sobrio se lee como un anuncio-- y evita que compita con el texto que va antes y despues. En papel se queda quieta y sin velo: una foto impresa no necesita amarrarse a nada. */ .doc .banda-foto{position:relative;overflow:hidden;height:clamp(170px,19cqw,250px); isolation:isolate;background:var(--navy)} .doc .banda-img{position:absolute;inset:-32px 0;background-size:cover; background-position:center 42%;will-change:transform} .doc .banda-foto::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg, rgba(4,30,66,.82) 0%, rgba(4,30,66,.55) 42%, rgba(4,30,66,.86) 100%)} @media print{ .doc .banda-foto{height:120px;break-inside:avoid} .doc .banda-img{inset:0;transform:none!important} .doc .banda-foto::after{background:rgba(4,30,66,.35)} } /* ── LA COLUMNA FIJA TIENE QUE TAPAR DE VERDAD ── La celda fija llevaba `--sup`, pero las filas del mensualizado alternan color: en las filas grises la celda quedaba de otro tono y por la junta se veía pasar la tabla. Cada celda fija toma el color de SU fila, y el borde derecho pasa a sombra para que no quede una rendija por donde se asome el contenido. */ .doc #s-men thead th:first-child{background:var(--sup2)} .doc #s-men tbody tr:nth-child(odd) td:first-child{background:var(--bg)} .doc #s-men tbody tr:nth-child(even) td:first-child{background:var(--sup2)} .doc #s-men tfoot td:first-child{background:var(--sup2)} .doc #s-men th:first-child, .doc #s-men td:first-child{ box-shadow:inset 0 -1px 0 rgba(4,30,66,.09), 6px 0 7px -6px rgba(4,30,66,.16)} /* ══ LA BANDA DEL PUNTO DE CONTROL ══ Elegida entre dos mockups, y acotada desde el principio: el degradado navy→teal vive SOLO en esta cabecera. Los títulos de la tabla van en azul plano --"ahí simplemente que sea azul"--, que es lo que pidió después de ver la otra propuesta. */ .doc .sec-apost{padding:0} /* ══════════════════════════════════════════════════════════════════ EL TITULAR DEL PUNTO DE CONTROL · 13/oct/2026 ────────────────────────────────────────────────────────────────── El tratamiento aprobado es un titular blanco con una palabra en degradado, sobre el fondo blanco del documento. La frase vivía dentro de la banda azul con el icono del escudo —`.pto-banda`, que SE QUEDA en la hoja: las ligas ya enviadas llevan su HTML congelado y la siguen usando—. Aquí sale al fondo del documento y pasa de 22 px a 60. El reparto lo hace `efectos.js` sobre el texto ya traducido; ver el porqué en `degradarTitular`. */ .doc .ptoh{padding:46px var(--val-margen,24px) 28px} .doc .ptoh .rot{margin:0 0 16px} .doc .ptoh h3{margin:0;font:800 clamp(30px,6.4cqw,60px)/1.06 var(--f); letter-spacing:-.035em;color:var(--navy);text-wrap:balance;max-width:17ch} .doc .ptoh .deg{ background:linear-gradient(95deg,#F2B50D 0%,#E07A3E 38%,#2E6E9E 76%,#0F4C75 100%); -webkit-background-clip:text;background-clip:text;color:transparent; -webkit-text-fill-color:transparent} /* ── EL PAPEL NO SABE RECORTAR UN DEGRADADO A LA LETRA ── `background-clip:text` depende del navegador, y al imprimir el relleno sale transparente más veces de las que no: la frase DESAPARECE. En papel se apaga el degradado y vuelve a tinta sólida. Texto invisible en lo que firma el cliente, nunca. Ver [[el-diseno-se-audita-en-imagen]]. */ @media print{ .doc .ptoh .deg{background:none !important;color:var(--navy) !important; -webkit-text-fill-color:var(--navy) !important} .doc .ptoh h3{font-size:30px} } @container (max-width:559px){ .doc .ptoh{padding:34px var(--val-margen,20px) 22px} } /* ══════════════════════════════════════════════════════════════════ EL PLAN DE INVERSIÓN: LA CIFRA PRIMERO, LA TABLA CON JERARQUÍA ══════════════════════════════════════════════════════════════════ */ .doc .pm-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:0;margin:22px 0 0;border-radius:var(--r);overflow:hidden;background:var(--navy)} .doc .pm-hero-n{padding:26px 28px 24px} .doc .pm-et{display:flex;align-items:center;gap:8px;margin:0 0 12px; font:800 var(--t-micro) var(--f);letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.6)} .doc .pm-et i{font-size:16px;color:var(--amar)} .doc .pm-hero-n b{display:block;font:900 clamp(32px,5.4cqw,52px)/1 var(--f);color:#fff; letter-spacing:-.035em;font-variant-numeric:tabular-nums} .doc .pm-hero-n span{display:block;margin:10px 0 0;font-size:var(--t-min); color:rgba(255,255,255,.72)} .doc .pm-hero-t{padding:26px 28px 24px;background:rgba(255,255,255,.06); border-left:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column; justify-content:center;gap:10px} .doc .pm-hero-t p{margin:0;font:700 clamp(16px,2.1cqw,21px)/1.4 var(--f);color:#fff; letter-spacing:-.01em;text-wrap:balance} .doc .pm-hero-t p em{font-style:normal;color:var(--amar)} .doc .pm-hero-t small{font-size:var(--t-min);color:rgba(255,255,255,.66);line-height:1.5} /* ── NO TODAS LAS COLUMNAS PESAN LO MISMO ── La inversión mensual es lo que se paga siempre: va resaltada. La proyección y el máximo con IVA son escenarios —esos días pueden no caer—, así que pierden peso visual. Ni se quitan ni se esconden. */ .doc .pm-t thead th:nth-child(3), .doc .pm-t tbody td:nth-child(3){background:rgba(46,110,158,.07)} .doc .pm-t tbody td:nth-child(3){font-weight:900;color:var(--navy); font-size:calc(var(--t-sec) + 1px)} .doc .pm-t thead th:nth-child(3){color:var(--navy);box-shadow:inset 0 -2px 0 var(--amar)} .doc .pm-t tbody td:nth-child(4),.doc .pm-t tbody td:nth-child(6), .doc .pm-t thead th:nth-child(4),.doc .pm-t thead th:nth-child(6){opacity:.52} .doc .pm-t tfoot td:nth-child(3){font-weight:900} .doc .pm-t tfoot td:nth-child(4),.doc .pm-t tfoot td:nth-child(6){opacity:.62} .doc .pm-pista{display:none;margin:14px 0 6px;font-size:11.5px;color:var(--txt3); text-align:center} /* ══════════════════════════════════════════════════════════════════ LA TABLA EN EL TELÉFONO · 13/oct/2026 ────────────────────────────────────────────────────────────────── Esta tabla ya tenía su trato aparte más abajo —`@container (max-width:760px)`— y de ahí salían los tres defectos que aparecieron al probarla: 1 · EL REBOTE. `scroll-snap-type:x proximity` en el contenedor y `scroll-snap-align` en cada celda: al soltar, el navegador engancha a la columna más cercana. Se apagan los dos. 2 · LA COLUMNA FIJA. El periodo pegado a la izquierda ocupaba 150 de los 358 px de un teléfono: media pantalla inmovilizada para repetir una fecha que ya se lee al principio del renglón. 3 · EL TEXTO ENCIMADO. `white-space:nowrap` en todas las celdas: con anchos fijos, lo que no cabe NO se recorta, se sale por encima de la celda vecina. Así se pisaban los títulos y el «2027» del periodo más largo. El arreglo no es apretar más: es darle a cada columna el ancho que su contenido pide, y dejar que SÓLO los títulos puedan partir en dos líneas. Un dato no parte nunca: una cifra cortada no se lee. Medido celda por celda: cero desbordes. */ @media print{ .doc #s-men .pm-t{overflow:visible;-webkit-mask-image:none;mask-image:none} .doc #s-men .pm-t table{min-width:0;table-layout:auto} .doc .pm-pista{display:none} .doc .pm-t tbody td:nth-child(4),.doc .pm-t tbody td:nth-child(6), .doc .pm-t thead th:nth-child(4),.doc .pm-t thead th:nth-child(6){opacity:.8} } .doc .pto-banda{display:flex;gap:18px;align-items:center; padding:22px var(--val-margen,24px); background:linear-gradient(100deg, var(--navy) 0%, #1E4A66 52%, #458086 100%)} .doc .pto-ico{width:62px;height:62px;flex:0 0 auto;border-radius:16px; background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16); display:grid;place-items:center;color:var(--amar)} .doc .pto-ico svg{width:30px;height:30px} .doc .pto-banda .rot{color:var(--amar);margin:0 0 4px} .doc .pto-banda .rot::after{display:none} .doc .pto-banda h3{color:#fff;margin:0} /* La seccion alterna de color como las demas; la banda va encima y el cuerpo recupera su margen. */ .doc .sec-apost > .pad{padding-top:20px} /* ── Y LOS TITULOS DE LA TABLA, AZUL PLANO ── */ .doc #s-pto thead th{background:var(--navy);color:#fff; font:800 var(--t-micro) var(--f);letter-spacing:.11em;text-transform:uppercase; border-bottom:0;padding:11px 12px} .doc #s-pto thead th:first-child{border-radius:9px 0 0 9px} .doc #s-pto thead th:last-child{border-radius:0 9px 9px 0} @container (max-width:559px){ .doc .pto-banda{gap:13px;padding:18px var(--val-margen,20px)} .doc .pto-ico{width:48px;height:48px;border-radius:13px} .doc .pto-ico svg{width:24px;height:24px} } /* ── "Españoloriginal" ── El botón del menú lleva el idioma y, en el español, la palabra "original". El CSS que los separa vive en la hoja de la página y no alcanza al menú cuando éste se dibuja dentro del documento. Aquí se dice otra vez, en la hoja que sí lo alcanza. */ .doc #idioma-menu button{display:flex;align-items:center; justify-content:space-between;gap:12px;width:100%} .doc #idioma-menu .nativo{color:var(--txt3);font-weight:400;font-size:var(--t-min)} /* ══════════════════════════════════════════════════════════════════ SU SITUACIÓN · EL RIESGO COMO LO CALCULA EL ALGORITMO ────────────────────────────────────────────────────────────────── La escala es la aprobada: fuera el verde, que decía "todo bien" en el documento donde le pedimos al cliente que contrate vigilancia. Teal para LATENTE --ni bien ni mal, vigilado-- y de ahí en frío → ámbar → naranja → rojo. ══════════════════════════════════════════════════════════════════ */ .doc .sec-situacion{ --n0:#1C4C53; --n0b:#E6F1F2; --n0d:#BBD6D9; /* latente */ --n1:#B8860B; --n1b:#FFF8E1; --n1d:#F2D98D; /* medio */ --n2:#C2410C; --n2b:#FFF1E8; --n2d:#F5C9AE; /* alto */ --n3:#B42318; --n3b:#FEF0EF; --n3d:#F3BDB8; /* crítico */} /* ── EL TERMÓMETRO ── */ .doc .term{display:flex;gap:18px;align-items:center;padding:17px 19px; border-radius:14px;margin-bottom:14px;border:1px solid;break-inside:avoid} .doc .term.l0{background:var(--n0b);border-color:var(--n0d)} .doc .term.l1{background:var(--n1b);border-color:var(--n1d)} .doc .term.l2{background:var(--n2b);border-color:var(--n2d)} .doc .term.l3{background:var(--n3b);border-color:var(--n3d)} .doc .term-et{font:800 var(--t-micro) var(--f);letter-spacing:.12em; text-transform:uppercase;color:var(--txt2);margin:0 0 3px} .doc .term-niv{font:800 clamp(22px,2.6cqw,28px)/1 var(--f);letter-spacing:-.02em} .doc .term.l0 .term-niv{color:var(--n0)} .doc .term.l1 .term-niv{color:var(--n1)} .doc .term.l2 .term-niv{color:var(--n2)} .doc .term.l3 .term-niv{color:var(--n3)} .doc .term-txt{flex:1;font-size:var(--t-sec);color:var(--txt2);line-height:1.5;margin:0} .doc .term-pts{text-align:right;font:800 var(--t-h4) var(--f);color:var(--txt2);white-space:nowrap} .doc .term-pts small{display:block;font:400 var(--t-micro) var(--f);color:var(--txt3)} /* Con el CRO pendiente no hay cifra: el hueco lo ocupa la leyenda, que es mas ancha y no debe quedar en una sola linea apretada. */ .doc .term-pts small.sin{max-width:9em;white-space:normal;font-weight:600; line-height:1.3;color:var(--txt2)} /* ── LA COMBINACIÓN QUE ELEVA EL NIVEL ── */ .doc .combo{padding:13px 16px;border-radius:11px;margin-bottom:14px; background:var(--n3b);border:1px solid var(--n3d);break-inside:avoid} .doc .combo b{color:var(--n3);font-weight:800} .doc .combo p{margin:3px 0 0;font-size:var(--t-sec);color:var(--txt);line-height:1.5} /* ── LOS CINCO FRENTES ── */ .doc .frentes{display:grid;gap:8px;margin-bottom:18px} .doc .fr{display:flex;gap:14px;align-items:center;padding:12px 15px;border-radius:11px; background:var(--sup);border:1px solid var(--borde);break-inside:avoid} .doc .fr.r1{background:var(--n1b);border-color:var(--n1d)} .doc .fr.r2{background:var(--n2b);border-color:var(--n2d)} .doc .fr.r3{background:var(--n3b);border-color:var(--n3d)} /* El codigo y el marcador toman EL COLOR DE SU NIVEL, no el gris mas claro de la hoja. En el renglon que esta en cero se quedan grises, que es lo que deben decir. */ .doc .fr-cod{font:800 var(--t-micro) var(--f);letter-spacing:.09em;color:var(--txt3); width:24px;flex:0 0 auto} .doc .fr.r1 .fr-cod, .doc .fr.r1 .fr-n{color:var(--n1)} .doc .fr.r2 .fr-cod, .doc .fr.r2 .fr-n{color:var(--n2)} .doc .fr.r3 .fr-cod, .doc .fr.r3 .fr-n{color:var(--n3)} .doc .fr-d{flex:1;min-width:0} .doc .fr-t{font:800 var(--t-sec) var(--f);color:var(--navy)} .doc .fr-s{font-size:var(--t-min);color:var(--txt2);margin-top:2px} .doc .fr.r2 .fr-s, .doc .fr.r3 .fr-s{color:var(--txt)} .doc .fr-pips{display:flex;gap:3px;flex:0 0 auto} .doc .fr-pips i{width:16px;height:6px;border-radius:3px;background:#E4E9F0;display:block} .doc .fr.r0 .fr-pips i.on{background:var(--n0)} .doc .fr.r1 .fr-pips i.on{background:var(--n1)} .doc .fr.r2 .fr-pips i.on{background:var(--n2)} .doc .fr.r3 .fr-pips i.on{background:var(--n3)} .doc .fr-n{font:800 var(--t-min) var(--f);color:var(--txt3);width:26px; text-align:right;flex:0 0 auto} /* ── EL CONTEXTO ES UNA FICHA, NO DOCE TARJETAS · 12/oct/2026 ── Cada dato tenía su caja: borde, sombra, 12px de aire arriba y abajo e icono de 17px para decir tres palabras. Doce de esas, y en el teléfono --donde la rejilla cae a UNA columna-- eran novecientos píxeles de scroll. Ahora es un renglón: etiqueta a la izquierda, dato a la derecha, separados por una línea fina. Mismo contenido, un tercio del alto. El dato pesa (600) y la etiqueta no, para que el ojo salte de valor en valor sin leer las etiquetas dos veces. */ .doc .ctx-rot{font:800 var(--t-micro) var(--f);letter-spacing:.11em; text-transform:uppercase;color:var(--txt3);margin:0 0 15px} .doc .ctx-bloque{margin:0 0 15px;break-inside:avoid} .doc .ctx-bloque:last-of-type{margin-bottom:0} /* El rotulo necesita aire ABAJO: con 1px, la linea superior de la primera celda caia a su misma altura y parecia subrayarlo. */ .doc .ctx-g{display:block;font:800 var(--t-micro) var(--f);letter-spacing:.09em; text-transform:uppercase;color:var(--navy);opacity:.62;margin:0 0 8px} .doc .ctxg{display:grid;grid-template-columns:repeat(3,1fr);gap:0 22px} /* Dato DEBAJO de su etiqueta, no a la derecha: alineado a la derecha, un valor largo como "Sí — funcional y con cobertura total" caía de línea y quedaba flotando, y cada dato arrancaba en un punto distinto. Apilado, los once empiezan en la misma vertical y el ojo baja en columna. */ .doc .cx{display:grid;grid-template-columns:auto 1fr;gap:0 7px; padding:8px 0 9px;min-width:0;border-top:1px solid var(--borde); break-inside:avoid;align-content:start} .doc .cx i{grid-row:1;font-size:14px;color:var(--navy);opacity:.55;line-height:1.45} .doc .cx dt{grid-row:1;font:600 var(--t-min) var(--f);color:var(--txt3); margin:0;letter-spacing:0;text-transform:none} .doc .cx dd{grid-column:2;margin:1px 0 0;font-size:var(--t-sec);font-weight:600; line-height:1.3;word-break:break-word} .doc .cx>div{display:contents} .doc .det .ctxg{margin:0} @container (max-width:759px){ .doc .ctxg{grid-template-columns:1fr 1fr} } @container (max-width:479px){ /* DOS columnas tambien en el telefono, no una. Los valores son cortos --"Residencial", "21-50", "24/7 continuo"-- y en una sola columna la ficha medía 670px de scroll para siete datos. En dos, 390px. */ .doc .ctxg{grid-template-columns:1fr 1fr;gap:0 14px} .doc .cx dd{font-size:var(--t-min)} .doc .term{flex-wrap:wrap;gap:11px} .doc .term-txt{order:3;flex:1 0 100%} .doc .term-pts{margin-left:auto} } .doc .ms-veh{margin-bottom:14px} .doc .veh{display:flex;align-items:center;gap:13px;padding:10px 14px; background:var(--sup2);border:1px solid var(--borde);border-radius:var(--r); margin-bottom:7px} .doc .veh i{font-size:18px;color:var(--navy);flex:0 0 auto} .doc .veh.es-rec{opacity:.62} .doc .veh.es-rec i{color:var(--txt3)} .doc .veh-d{flex:1;min-width:0} .doc .veh-t{font:800 var(--t-min) var(--f);color:var(--navy)} .doc .veh.es-rec .veh-t{color:var(--txt2)} /* El fondo NO va con un token inventado: `--sup3` no existe en esta hoja --se midio-- y una variable inexistente no falla, desaparece. La tarjeta ya es `--sup2`, asi que el chip se distingue por su borde, no por otro gris. */ .doc .veh-m{font:800 var(--t-micro) var(--f);color:var(--txt2); background:var(--bg);border:1px solid var(--borde); border-radius:4px;padding:1px 6px; text-transform:uppercase;letter-spacing:.06em;white-space:nowrap} .doc .veh-s, .doc .veh-p{font:400 var(--t-micro) var(--f);color:var(--txt3);margin-top:2px} .doc .ms-blq{margin-bottom:20px;break-inside:avoid} .doc .ms-blq.es-rec{opacity:.62} .doc .ms-cab{background:var(--navy);border-radius:var(--r) var(--r) 0 0; padding:14px 18px;display:flex;justify-content:space-between; align-items:center;flex-wrap:wrap;gap:10px} .doc .ms-cab.jt{background:#8A4B08} .doc .ms-cab.js{background:#0E6B4A} .doc .ms-cab.fpr{background:#1D4F91} .doc .ms-cab.rec{background:var(--txt3)} .doc .ms-cab h4{color:#fff;margin:0;font-size:var(--t-h4)} .doc .ms-cab .ms-sub{color:rgba(255,255,255,.72);margin:2px 0 0; font-size:var(--t-min);max-width:none} .doc .ms-cab .ms-nota{color:rgba(255,255,255,.6);font-size:var(--t-min); font-style:italic;margin:4px 0 0;max-width:none} .doc .ms-jor{color:var(--amar);font:800 var(--t-min) var(--f);flex:0 0 auto} .doc .ms-marca{font:800 var(--t-micro) var(--f);background:rgba(255,255,255,.2); padding:2px 8px;border-radius:4px;margin-left:8px;letter-spacing:.04em} .doc .ms-info{background:var(--sup2);padding:10px 18px; border-inline:1px solid var(--borde);font-size:var(--t-sec);color:var(--txt2)} .doc .ms-tabla{border:1px solid var(--borde);border-top:0; border-radius:0 0 var(--r) var(--r);overflow:hidden} .doc .ms-tabla table{border:0;border-radius:0} .doc .ms-lg{display:inline-flex;align-items:center;gap:6px} .doc .ms-p{background:var(--c,var(--sup2));border:1px solid var(--borde)} .doc .ms-tot{background:var(--navy);border-radius:var(--r);padding:12px 18px; display:flex;gap:10px 24px;align-items:center;flex-wrap:wrap;margin-top:14px; font:400 var(--t-min) var(--f);color:rgba(255,255,255,.8)} .doc .ms-tot .et{color:var(--amar);font-weight:800;letter-spacing:.05em} .doc .ms-tot .ok{color:#6FD3A6} .doc[data-a="bn"] .ms-c.on{background:#000} /* ══ EL TÍTULO DE LA COMPARATIVA · el gesto de la web ══ La barra amarilla vertical pegada al título es de `lykos-web`: ahí abre la metodología. Aquí abre la comparación. */ /* El 300 es LA UNICA excepcion de peso en todo el documento, y es a proposito: en este titulo "Proveedor tradicional" va en ligera y "Lykos" en 800 --`.vs-ly`--, y el contraste entre los dos ES el gesto. Los titulos quedaron aprobados y no se tocan. */ .doc .vs-tit{display:flex;align-items:center;gap:13px;flex-wrap:wrap; font:300 clamp(21px,3.1cqw,36px)/1.1 var(--f);letter-spacing:-.03em;color:var(--txt); margin:0 0 12px;text-transform:none} .doc .vs-tit::after{display:none} .doc .vs-bar{width:5px;align-self:stretch;min-height:1em;background:var(--amar);border-radius:3px;flex:0 0 auto} .doc .vs-vs{font-size:.56em;color:var(--txt3);font-weight:400;letter-spacing:0} .doc .vs-ly{font-weight:800;letter-spacing:-.04em} .doc .vs .b b{color:var(--navy)} .doc .vs .enc.e3{box-shadow:inset 0 0 0 1px rgba(4,30,66,.12)} .doc .optima{background:var(--ok-bg);border-left:3px solid var(--ok);border-radius:0 8px 8px 0; padding:10px 14px;font-size:var(--t-sec);color:#14543B;margin:0 0 12px;max-width:none} .doc .optima b{font-weight:800} /* ══ CÓMO QUEDA EL PDF DESCARGADO ══ Hoja carta a 96 ppp: 816 × 1056 px, con los márgenes del `@page` del visor real (12 mm). Las guías marcan dónde termina cada hoja, que es lo que de verdad importa: un corte a media tabla de dinero se ve aquí antes de que lo vea el cliente. */ /* ══════════════════════════════════════════════════════════════════ SON DOS DISEÑOS, NO UNO: LA LIGA Y EL PDF DESCARGADO ────────────────────────────────────────────────────────────────── Su maqueta YA traia los dos: los botones "Liga" y "PDF descargado" cambian `data-v` y con el cambian diez reglas. Lo que pasaba es que esas diez colgaban de `.esc` --el escenario del prototipo, la cajita con los botones-- y `.esc` NO EXISTE en lo que construimos. Diez reglas escritas que no se aplicaban nunca. Es el mismo modo de falla de las 35 consultas de contenedor: la regla esta, el ancestro no. Dos veces el mismo dia. Asi que se vuelven a acotar sobre el propio documento. `data-v` vive en `.doc`: data-v="web" (o sin atributo) la liga que lee el cliente data-v="pdf" la hoja que se descarga ── QUE CAMBIA EN EL PDF ── · el documento mide 816 px, que es una carta · el aire interior sube a 34/45 · los cajones del Anexo se abren y pierden su encabezado y su borde: en papel no se pliega nada · desaparecen el pie vivo y las notas internas ══════════════════════════════════════════════════════════════════ */ /* `!important` a proposito: la pagina que hospeda el documento le pone `#doc{width:100%}` y un id le gana a una clase. En la maqueta no hacia falta porque ahi el documento no tenia id. */ .doc[data-v="pdf"]{width:816px !important;max-width:100% !important; margin:0 auto;box-shadow:0 2px 10px rgba(4,30,66,.14)} .doc[data-v="pdf"] .pad{padding:34px 45px !important} .doc[data-v="pdf"] .pie-vivo{display:none} .doc[data-v="pdf"] .falta{display:none} .doc[data-v="pdf"] .det{border:0;border-radius:0} .doc[data-v="pdf"] .det summary{display:none} .doc[data-v="pdf"] .det:not([open]) .det-cuerpo{display:block} .doc[data-v="pdf"] .det-cuerpo{padding:0} /* La barra es de la liga: en una hoja no hay botones que pulsar. */ .doc[data-v="pdf"] .barra-doc{display:none} /* ── Y LOS BOTONES TAMPOCO SE IMPRIMEN ── Visto en el papel simulado el 9/oct: "Español" y "Descargar" salian impresos dentro del bloque azul. La regla de arriba los escondia mientras vivian en la franja; al moverlos DENTRO de la portada --la portada ya no lleva encabezado-- dejo de alcanzarlos. Un boton en una hoja de papel no es un boton: es una caja con una palabra dentro. */ .doc[data-v="pdf"] .bd-acc{display:none} @media print{ .doc .bd-acc{display:none} .doc .barra-doc{display:none} } .doc .hoja{position:absolute;left:0;right:0;height:0;border-top:1px dashed rgba(201,48,44,.55); pointer-events:none;z-index:4} .doc .hoja span{position:absolute;right:6px;top:3px;font:800 var(--t-micro) var(--f);color:var(--mal); background:#fff;padding:1px 6px;border-radius:999px;border:1px solid rgba(201,48,44,.3)} .doc{position:relative} /* ══ EL TITULAR, CON LAS PALABRAS QUE PESAN EN AMARILLO ══ El gesto es el de `lykos-web`: frase en blanco sobre navy con el concepto clave en amarillo. Aquí lo que se vende no es el guardia: es que quede registrado. Ésa es la parte que se enciende. */ .doc .port h1 em{font-style:normal;color:var(--amar)} .doc[data-a="bn"] .port h1 em{color:#fff;text-decoration:underline;text-underline-offset:5px} /* ══ BORDE NEÓN · traído de lykos-web ══ Misma doctrina que allá, y por la misma razón: nace QUIETO y tenue, da UNA vuelta cuando la tarjeta entra en pantalla y se queda. Doce contornos girando sin parar se comen la batería del teléfono y se ven nerviosos. Al pasar el cursor sí se enciende, porque ahí hay intención. */ @property --beam-ang { syntax: ''; inherits: false; initial-value: 0deg; } @keyframes beamSpin { to { --beam-ang: 360deg; } } .doc .beam{position:relative;isolation:isolate} .doc .beam::before{ content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:2px; background:conic-gradient(from var(--beam-ang, 0deg), transparent 0deg, rgba(255,194,7,.4) 30deg, var(--amar) 70deg, #F8FAFC 90deg, var(--amar) 110deg, rgba(255,194,7,.4) 150deg, transparent 180deg, transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; /* ── EL NEON TIENE QUE CONTRASTAR CON SU PROPIO BORDE ── El 9/oct le puse a la tarjeta un borde ambar para parecerse a lykos.lat, y con eso ANULE este efecto: un neon ambar girando sobre un borde ambar no se ve. Medido fotograma a fotograma: el angulo interpolaba --0, 90, 180, 270-- y en la captura las dos posiciones eran indistinguibles. La cresta sube a opacidad plena y el halo tambien, para que el punto brillante gane al borde de abajo. Sigue siendo sutil porque lo que brilla son 70 grados de 360: el resto del contorno queda transparente y se ve el borde normal. */ opacity:.9; filter:drop-shadow(0 0 7px rgba(255,194,7,.75)); pointer-events:none; animation:none; transition:opacity .45s ease, filter .45s ease} /* ── "MOVIÉNDOSE CONSTANTEMENTE, PERO SUTIL" ── Estaba en `1 both`: daba UNA vuelta al entrar en pantalla y se quedaba quieto. Lo pedido es que no pare. Va en bucle, y para que sea sutil en vez de un letrero: vuelta lenta --9s-- y `linear`, que no acelera ni frena, así el ojo no la persigue. Se apaga sola donde debe: en el PDF, al imprimir, y para quien pide menos movimiento en su sistema. */ .doc .beam.in::before{animation:beamSpin 9s linear infinite} .doc[data-v="pdf"] .beam.in::before{animation:none} @media print{ .doc .beam.in::before{animation:none} } .doc .beam:hover::before{opacity:.95; filter:drop-shadow(0 0 9px rgba(255,194,7,.8)) drop-shadow(0 0 20px rgba(255,194,7,.55))} @media (prefers-reduced-motion:reduce){ .doc .beam.in::before{animation:none} } .doc[data-a="bn"] .beam::before{display:none} .doc[data-v="pdf"] .beam::before{display:none} /* ══ EL BOTÓN DE MARCA · dos tonos de ámbar que se deslizan ══ Esta se eligió entre cinco propuestas. El relleno es un degradado de dos ámbares al doble de ancho del botón: al pasar el cursor la mancha clara lo recorre de lado a lado. En reposo no se mueve nada --ni destellos ni latidos--: toda la vida está en el gesto. El filo navy de abajo no es una capa encima, es el canto del botón; la capa encima era lo que hacía que el anterior pareciera dos botones encimados. Por eso este botón ya NO lleva `destello` ni `palpita`: esas clases genéricas (más abajo en esta hoja) le pintaban un resplandor cónico y un halo que volvían a partirlo en dos. */ .doc .pie-vivo .btn.btn-marca{position:relative;overflow:hidden;isolation:isolate; color:var(--navy);border:0; background:linear-gradient(100deg, var(--amar) 0%, #FFD95C 46%, var(--amar) 100%); background-size:220% 100%;background-position:0% 0; box-shadow:0 4px 16px rgba(4,30,66,.26); transition:background-position .7s cubic-bezier(.3,1,.4,1), box-shadow .25s ease} .doc .pie-vivo .btn.btn-marca > span{position:relative;z-index:2} .doc .pie-vivo .btn.btn-marca::after{content:"";position:absolute;left:0;right:0;bottom:0; height:3px;z-index:1;background:var(--navy);opacity:.14;pointer-events:none} .doc .pie-vivo .btn.btn-marca:hover{background-position:100% 0; box-shadow:0 6px 24px rgba(255,194,7,.36)} .doc .pie-vivo .btn.btn-marca:focus-visible{outline:2px solid var(--navy);outline-offset:3px} .doc .pie-vivo .btn.btn-marca:active{transform:translateY(1px)} @media (prefers-reduced-motion:reduce){ .doc .pie-vivo .btn.btn-marca{transition:none} } .doc[data-a="bn"] .pie-vivo .btn.btn-marca{background:#000;color:#fff;border:1px solid #fff} .doc[data-a="bn"] .pie-vivo .btn.btn-marca::after{display:none} /* Las hojas son `.doc` para heredar su paleta, pero su fondo es la mesa gris sobre la que se apilan, no el papel. */ .doc .pdf-hojas.doc{background:var(--mesa); /* En papel el gris más claro se pierde: medido, 28 textos a 2.4 de contraste --"ninguno", los guiones de "no aplica", las notas al pie de cada tarjeta--. En la hoja impresa ese gris se oscurece; en la liga se queda como está, que ahí sí se lee. */ --txt3:#6E7D90} .doc[data-a="bn"].pdf-hojas{background:#DCDCDC} /* ── LA PORTADA OCUPA LA HOJA ENTERA ── Antes el navy llegaba hasta donde llegaba el texto y el resto del folio quedaba en blanco: parecía un error de impresión. */ .doc .pdf-hoja.portada{background:var(--navy)} .doc .pdf-hoja.portada .pdf-cuerpo{display:flex;flex-direction:column;padding:0} .doc .pdf-hoja.portada .pdf-flujo{flex:1 1 auto;display:flex;flex-direction:column} .doc .pdf-hoja.portada .port{flex:1 1 auto;display:flex;flex-direction:column} .doc .pdf-hoja.portada .port .pad{flex:1 1 auto;display:flex;flex-direction:column; justify-content:center;padding:58px 56px !important} .doc .pdf-hoja.portada .pied{margin-top:auto;padding-top:26px} /* ══════════════════════════════════════════════════════════════════ EN PAPEL, NADA DE MANCHAS DE TINTA ══════════════════════════════════════════════════════════════════ Un folio entero en navy se come el tóner, se transparenta y sale bandeado en casi cualquier impresora de oficina. Así que en la HOJA --sólo en la hoja, la liga se queda como está-- la portada, el cierre y el pie van en blanco, y cada color se invierte: lo que era blanco pasa a navy, el gris claro a gris de texto, y el amarillo al dorado oscuro, que es el que sí se lee sobre papel. ══════════════════════════════════════════════════════════════════ */ .doc .pdf-hoja.portada{background:var(--sup)} .doc .pdf-hoja .port, .doc .pdf-hoja .cierre{background:var(--sup)} .doc .pdf-hoja .port .pad, .doc .pdf-hoja .cierre .pad{background:var(--sup)} /* lo que era blanco, ahora es navy */ .doc .pdf-hoja .port h1, .doc .pdf-hoja .cierre h3, .doc .pdf-hoja .pied dd{color:var(--navy)} /* ── NI CAFÉ NI AMARILLO FLOTANDO ── El amarillo de la casa sobre papel blanco da 1.7 de contraste: no se lee. Y oscurecerlo lo vuelve café, que no es un color de Lykos. Así que el texto va en navy y el amarillo hace lo que sabe hacer: pintar. El énfasis queda resaltado con una franja amarilla por detrás, que imprime limpio y es inconfundiblemente de la marca. */ .doc .pdf-hoja .eyeb{color:var(--navy)} .doc .pdf-hoja .port h1 em{color:var(--navy); background:linear-gradient(transparent 58%, rgba(255,194,7,.6) 58%); -webkit-box-decoration-break:clone;box-decoration-break:clone; padding:0 .06em} /* los grises claros, al gris de texto */ .doc .pdf-hoja .lede, .doc .pdf-hoja .cierre p, .doc .pdf-hoja .vence, .doc .pdf-hoja .pied dt, .doc .pdf-hoja .cierre .rot{color:var(--txt2) !important} /* las reglas que eran translúcidas sobre navy, al borde del documento */ .doc .pdf-hoja .pied{border-top-color:var(--borde)} /* el pie de marca deja de ser una banda oscura */ .doc .pdf-hoja .piedoc{background:var(--sup2);color:var(--txt2); border-top:1px solid var(--borde)} /* el lobo se queda amarillo: es una figura, no un fondo */ .doc .pdf-hoja .port .iso{width:40px} /* el botón de aceptar no se imprime: en papel no se hace clic */ .doc .pdf-hoja .cierre .btn{display:none} .doc .pdf-hoja .cierre h3{margin-bottom:10px} /* ── LA LUZ DEL RIEL, EN PAPEL ── El clon llega con el ancho en línea que le puso el JS para la pantalla --1058 px-- y en una hoja de 726 px eso desbordaba y pintaba el bloque entero de amarillo. En la hoja la luz no se anima: el riel se dibuja completo y fino, que es lo que debe quedar impreso. */ .doc .pdf-hoja .eb-riel{position:absolute;left:21px;top:0;bottom:0;width:3px; height:auto !important;background:rgba(4,30,66,.12)} .doc .pdf-hoja .eb-luz{position:absolute !important;left:0 !important;top:0 !important; width:100% !important;height:100% !important;background:var(--amar); box-shadow:none !important;filter:none !important} .doc .pdf-hoja .eb{display:grid !important;grid-template-columns:1fr !important;gap:22px} .doc .pdf-hoja .eb-paso{padding-left:62px !important} .doc .pdf-hoja .eb-n{position:absolute !important;left:0;top:0;margin:0 !important; background:var(--amar);border-color:var(--amar);box-shadow:none} /* cierre */ /* El cierre no lleva contorno ni esquinas: es el mismo bloque azul que la portada, de borde a borde. que el bloque superior azul"*. */ .doc .cierre{background:var(--navy);color:#fff;border:0;border-radius:0} .doc .cierre .pad{padding-bottom:34px} .doc .cierre h3{color:#fff} .doc .cierre p{color:var(--sobre-navy);max-width:54ch} /* ── EL BOTON TIENE SU ANCHO, NO EL DE LA PANTALLA ── En lykos.lat los botones miden entre 184 y 276 px --medido-- y nunca cruzan la pagina: un boton que ocupa el ancho completo se lee como una barra, no como algo que se pulsa. Mismas medidas que alli: 15/26 de relleno y radio 12. */ .doc .btn{display:inline-block;width:auto;max-width:max-content; background:var(--amar);color:var(--navy);font:800 var(--t-p) var(--f); padding:15px 26px;border-radius:12px;border:0;cursor:pointer;margin-top:4px} /* El hueco que la liga rellena no debe estirar lo que le metan. */ .doc #cierre-accion{display:block} .doc #cierre-accion .btn{width:auto} .doc .btn:focus-visible{outline:2px solid #fff;outline-offset:3px} .doc .vence{font:400 var(--t-min) var(--f);color:var(--txt-pie);margin:12px 0 0} /* ── EL PIE VA DENTRO DEL CIERRE, NO DEBAJO ── Era una franja propia, en un navy MAS OSCURO (#02142D) que el del cierre, o sea que se leia como un cuarto bloque. Ahora comparte el fondo del cierre y se separa con un filo tenue del mismo azul: una sola carta que termina con los datos de la empresa. El `margin-top:-1px` cierra la costura entre las dos: con dos fondos identicos, un pixel de diferencia de redondeo dejaba una linea clarisima --la misma clase de defecto que la de arriba--. */ .doc .piedoc{padding:18px 20px 24px;background:var(--navy);color:var(--txt-pie); font:400 var(--t-rot) var(--f);display:flex;gap:8px 18px;flex-wrap:wrap; justify-content:space-between;margin-top:-1px; border-top:1px solid rgba(255,255,255,.08)} @container (min-width:700px){ .doc .piedoc{padding:18px 68px 28px} } /* ══ LA BARRA DE ABAJO APARECE CUANDO YA LEYÓ, NO POR RELOJ ══ Un `IntersectionObserver` cuenta secciones vistas; a partir de siete la barra se queda pegada abajo con el monto y el botón. Es `sticky` dentro del visor, no `fixed`: un `fixed` dentro de un marco con scroll propio se ancla a la ventana y se va a otro lado. */ /* Sin filo amarillo arriba: se ha rechazado cada vez que se le pone. La barra se separa del documento con una sombra, no con una línea de color. */ .doc .pie-vivo{position:sticky;bottom:0;z-index:5;background:var(--navy);color:#fff; box-shadow:0 -10px 26px rgba(4,30,66,.22);padding:11px 20px;display:flex;gap:10px 16px; align-items:center;flex-wrap:wrap; transform:translateY(130%);opacity:0;transition:transform .34s ease,opacity .34s ease; pointer-events:none} .doc .pie-vivo.visible{transform:none;opacity:1;pointer-events:auto} @container (min-width:700px){ .doc .pie-vivo{padding:12px 48px} } @media (prefers-reduced-motion:reduce){ .doc .pie-vivo{transition:none} } .doc .pie-vivo .rotulo{font:800 var(--t-micro) var(--f);letter-spacing:.12em;text-transform:uppercase; color:rgba(255,255,255,.62);display:block} .doc .pie-vivo .monto{font:800 var(--t-h3) var(--f);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15;display:block} .doc .pie-vivo .sub{font:400 var(--t-min) var(--f);color:rgba(255,255,255,.62)} /* El botón, más grande y más ancho: lo pidió así el 13/oct --"es demasiado pequeño en anchura en la version pc, hazlo mas ancho"--. De 192x38 pasa a 330x56. El `min-width` tiene que vencer al `max-width:max-content` del `.btn` base, que lo encogía al texto. */ .doc .pie-vivo .btn{margin:0 0 0 auto;padding:19px 56px;font-size:17px; min-width:330px;max-width:none;text-align:center;border-radius:14px} /* En teléfono el botón NO se va a la derecha: con el monto a la izquierda y el botón al otro extremo, las dos cosas arrancan de bordes distintos y se pelean. Apilados y alineados al mismo margen. */ @container (max-width:559px){ .doc .pie-vivo{flex-direction:column;align-items:stretch;gap:10px} /* En el teléfono, casi a lo ancho de toda la pantalla: sólo le queda el margen del propio pie. También lo pidió el 13/oct. */ .doc .pie-vivo .btn{margin:0;width:100%;min-width:0;padding:19px 20px;text-align:center} } /* ══════════ LAS CINCO MAQUETACIONES ══════════ Misma identidad, distinta estructura de página. */ /* 1 · CORRIDO — una columna, ritmo vertical, fondos alternos. */ /* El alterno NO alcanza a la portada ni al cierre: son navy y el texto va en blanco. Al pintarles el fondo claro quedaba blanco sobre blanco --invisible--. Se cazó de casualidad, que es la peor forma de encontrar un defecto. */ .doc[data-m="corr"] .sec:nth-of-type(even):not(.port):not(.cierre) > .pad{background:var(--ritmo)} /* 2 · FICHA TÉCNICA — rótulo a la izquierda, contenido a la derecha. */ @container (min-width:860px){ .doc[data-m="dos"] .sec > .pad{display:grid;grid-template-columns:190px 1fr;gap:34px;align-items:start} .doc[data-m="dos"] .rot{margin:0;display:block} .doc[data-m="dos"] .rot::after{display:none} .doc[data-m="dos"] .port > .pad, .doc[data-m="dos"] .cierre > .pad{display:block} } /* 3 · FICHAS — cada sección es una tarjeta suelta sobre el fondo gris. */ .doc[data-m="fich"]{background:var(--bg)} .doc[data-m="fich"] .sec{border-top:0;padding:9px 14px} @container (min-width:700px){ .doc[data-m="fich"] .sec{padding:10px 24px} } .doc[data-m="fich"] .sec > .pad{background:var(--sup);border:1px solid var(--borde); border-radius:18px;box-shadow:var(--sombra);padding:22px 20px} @container (min-width:700px){ .doc[data-m="fich"] .sec > .pad{padding:30px 34px} } .doc[data-m="fich"] .port, .doc[data-m="fich"] .cierre{padding:0;background:var(--navy)} .doc[data-m="fich"] .port > .pad, .doc[data-m="fich"] .cierre > .pad{ border:0;border-radius:0;box-shadow:none;background:var(--navy)} /* 4 · ÍNDICE LATERAL — navegación pegada al lado del contenido. */ .doc .idx{display:none} .doc[data-m="ind"] .idx{display:block} @container (min-width:900px){ .doc[data-m="ind"] .cuerpo{display:grid;grid-template-columns:212px 1fr;align-items:start} .doc[data-m="ind"] .idx{position:sticky;top:0;padding:30px 18px; background:var(--sup2);border-right:1px solid var(--borde)} } .doc .idx b{display:block;font:800 var(--t-micro) var(--f);letter-spacing:.12em;text-transform:uppercase; color:var(--txt3);margin-bottom:10px} .doc .idx a{display:block;font:400 var(--t-sec) var(--f);color:var(--txt2);text-decoration:none; padding:6px 9px;border-radius:7px} .doc .idx a:hover{background:var(--sup);color:var(--navy)} .doc .idx a:focus-visible{outline:2px solid var(--amar);outline-offset:1px} @container (max-width:899px){ .doc[data-m="ind"] .idx{padding:12px 20px;border-bottom:1px solid var(--borde); background:var(--sup2);display:flex;gap:6px;overflow-x:auto;white-space:nowrap} .doc[data-m="ind"] .idx b{display:none} .doc[data-m="ind"] .idx a{flex:0 0 auto;border:1px solid var(--borde);background:var(--sup)} } /* 5 · CAPÍTULOS — banda navy a sangre en cada sección. */ .doc[data-m="cap"] .sec{border-top:0} .doc[data-m="cap"] .sec > .pad > .rot{background:var(--navy);color:#fff;margin:-24px -20px 20px; padding:12px 20px;letter-spacing:.15em} @container (min-width:700px){ .doc[data-m="cap"] .sec > .pad > .rot{margin:-38px -48px 24px;padding:13px 48px} } @container (min-width:1000px){ .doc[data-m="cap"] .sec > .pad > .rot{margin:-46px -68px 26px;padding:14px 68px} } .doc[data-m="cap"] .rot::after{display:none} .doc[data-m="cap"] .cierre > .pad > .rot{background:none;margin:0 0 14px;padding:0} /* ══════════ LOS TRES ACABADOS ══════════ */ /* Navy: el papel flota sobre navy. Útil para pantalla y para portada. */ .doc[data-a="navy"]{background:var(--navy)} .doc[data-a="navy"] .sec{border-top-color:rgba(255,255,255,.12)} .doc[data-a="navy"] .sec > .pad{background:var(--sup)} .doc[data-a="navy"] .port > .pad, .doc[data-a="navy"] .cierre > .pad{background:var(--navy)} .doc[data-a="navy"] .cuerpo, .doc[data-a="navy"] .idx{background:var(--navy)} @container (min-width:900px){ .doc[data-a="navy"][data-m="ind"] .idx{background:var(--navy2)} } .doc[data-a="navy"][data-m="ind"] .idx a{color:var(--sobre-navy)} .doc[data-a="navy"][data-m="ind"] .idx a:hover{background:rgba(255,255,255,.1);color:#fff} /* Blanco y negro: para imprimir. La misma maqueta sin color. */ .doc[data-a="bn"]{--navy:#000;--navy2:#1A1A1A;--amar:#000;--amar-d:#3A3A3A; --txt:#000;--txt2:#4A4A4A;--txt3:#8A8A8A;--borde:#C8C8C8;--sup2:#F2F2F2;--bg:#EDEDED; --ok:#000;--ok-bg:#EDEDED;--avi:#3A3A3A;--avi-bg:#F2F2F2;--mal:#000;--mal-bg:#EDEDED; --sombra:none} .doc[data-a="bn"] .iso{background:#fff} .doc[data-a="bn"] .eyeb{color:#fff} .doc[data-a="bn"] .niv .rec{background:#fff;color:#000;border:1px solid #000} .doc[data-a="bn"] .vs .enc.e3{background:#000;color:#fff} .doc[data-a="bn"] .btn{background:#fff;color:#000;border:1.5px solid #000} .doc[data-a="bn"] .cierre .btn{background:#fff;color:#000;border-color:#fff} .doc[data-a="bn"] .pie-vivo{box-shadow:0 -10px 26px rgba(0,0,0,.3)} .doc[data-a="bn"] .sello .top span{background:#fff;color:#000} .doc[data-a="bn"] .niv li::before{background:#000} /* ══════════════════════════════════════════════════════════════════ LOS BOTONES QUE LLAMAN A LA ACCIÓN ══════════════════════════════════════════════════════════════════ Este bloque va al FINAL de la hoja a propósito: las reglas base de `.btn` están más arriba y, a igualdad de especificidad, gana la que viene después. Ya pasó una vez --el degradado de marca no entraba porque `.btn{background:var(--amar)}` lo pisaba--. Aquí no se repite. ══════════════════════════════════════════════════════════════════ */ /* ── EL DESTELLO QUE SIGUE AL CURSOR ── Sirve para los dos botones sin tocarles el fondo: el amarillo sigue amarillo y el de marca sigue con su degradado. Lo que se agrega es un halo plateado que persigue al puntero y un filo que recorre el contorno. En teléfono no hay puntero: ahí respira solo. */ .doc .destello{position:relative;overflow:hidden;isolation:isolate} .doc .destello > span{position:relative;z-index:2} .doc .destello::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.52), rgba(255,255,255,.16) 42%, transparent 68%); opacity:0;transition:opacity .28s ease} .doc .destello::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none; border-radius:inherit;padding:1px; background:conic-gradient(from var(--beam-ang,0deg), transparent 0deg, rgba(255,255,255,.12) 40deg, rgba(255,255,255,.9) 72deg, rgba(232,238,245,1) 88deg, rgba(255,255,255,.8) 104deg, rgba(255,255,255,.12) 140deg, transparent 180deg, transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0;transition:opacity .3s ease} .doc .destello:hover::before{opacity:1} .doc .destello:hover::after{opacity:1;animation:beamSpin 3.4s linear infinite} .doc .destello:active{transform:translateY(1px) scale(.985)} .doc .destello.pulso::before{opacity:1;animation:pulsoBtn .5s ease-out} @media (hover:none){ .doc .destello::after{opacity:.7;animation:beamSpin 5s linear infinite} .doc .destello::before{opacity:.42} } /* ── EL PALPITEO ── Es un anillo que nace pegado al botón y se desvanece al expandirse: late, no parpadea. Tres segundos por ciclo --más rápido se siente ansioso, más lento no se nota-- y el halo nunca pasa del 26 % de opacidad. Se detiene al pasar el cursor: ahí ya conseguiste la atención y el destello toma el relevo. */ @keyframes palpito{ 0% { box-shadow:0 2px 6px rgba(4,30,66,.26), 0 0 0 0 rgba(255,255,255,.26) } 55% { box-shadow:0 3px 12px rgba(4,30,66,.3), 0 0 0 9px rgba(255,255,255,0) } 100% { box-shadow:0 2px 6px rgba(4,30,66,.26), 0 0 0 0 rgba(255,255,255,0) } } @keyframes palpitoOro{ 0% { box-shadow:0 2px 6px rgba(4,30,66,.26), 0 0 0 0 rgba(255,194,7,.45) } 55% { box-shadow:0 3px 14px rgba(4,30,66,.3), 0 0 0 10px rgba(255,194,7,0) } 100% { box-shadow:0 2px 6px rgba(4,30,66,.26), 0 0 0 0 rgba(255,194,7,0) } } .doc .palpita{animation:palpitoOro 3s ease-out infinite} .doc .pie-vivo .palpita{animation:palpito 3s ease-out infinite} .doc .palpita:hover{animation-play-state:paused} .doc[data-a="bn"] .palpita{animation:none} @media (prefers-reduced-motion:reduce){ .doc .palpita{animation:none} .doc .destello::after{animation:none;opacity:.55} .doc .destello.pulso::before{animation:none} } /* ══════════════════════════════════════════════════════════════════ LA VERSIÓN IMPRESA ══════════════════════════════════════════════════════════════════ En papel no hay cursor, ni barra que siga al scroll, ni nada que desplegar. Se queda el documento y nada más: se van los efectos, los controles y mis notas, y el anexo sale abierto para que no falte información por estar plegada. ══════════════════════════════════════════════════════════════════ */ @media print{ @page{ size:Letter; margin:12mm 12mm 14mm 12mm } .doc .env{max-width:none;padding:0} .doc .cab, .doc .barras, .doc .grupo, .doc .nota{display:none !important} .doc .marco{max-width:none !important;border:0;border-radius:0;box-shadow:none} .doc .visor{max-height:none;min-height:0;overflow:visible} .doc .pie-vivo, .doc .hoja{display:none !important} .doc .falta{display:none !important} .doc .beam::before, .doc .destello::before, .doc .destello::after{display:none !important} .doc .palpita{animation:none !important;box-shadow:none !important} .doc .det{border:0;border-radius:0;break-inside:avoid} .doc .det summary{display:none} /* ── EL RESUMEN CONSERVA SU TÍTULO EN PAPEL ── Era un `

` y al volverse cajón (v606) ese título pasó a vivir en el `summary`. Como aquí arriba TODOS los summary se esconden, la hoja impresa habría perdido "Lo que pasó, lo que proponemos y lo que cuesta": el único texto del documento que se iba sin que nadie lo quitara. Se le devuelve su aspecto de título, sin el signo de más, que en papel no significa nada. */ .doc .det-res>summary{display:block !important;padding:0 0 9px;background:none; font:800 var(--t-h3)/1.25 var(--f);color:var(--navy);border:0 !important} .doc .det-res>summary::after{content:none !important} .doc .det-res{box-shadow:none} .doc .det-cuerpo{padding:0} .doc .det:not([open]) .det-cuerpo{display:block} /* nada se queda plegado */ /* Los fondos navy son identidad, no decoración: se imprimen. */ .doc .port, .doc .cierre, .doc .vs .q, .doc .vs .enc.e1, .doc .ms-c.on, .doc .eb-n, .doc .sello .top{ -webkit-print-color-adjust:exact;print-color-adjust:exact} /* Las reglas de corte que ya costaron caro una vez. */ .doc .sec, .doc .caja, .doc .campos, .doc .val article, .doc .ms, .doc .eb-paso, .doc .sello, .doc .dim-f{break-inside:avoid} /* ── UNA SECCION SOLO SE PUEDE PEDIR ENTERA SI CABE ENTERA ── `break-inside:avoid` sobre `.sec` es la regla del diseño, y para las secciones cortas esta bien. Pero medido sobre una cotizacion real, convertido a hojas carta utiles (255 mm): Anexo tecnico ................ 6.69 hojas Valor agregado ............... 2.32 Plan mensualizado ............ 1.81 La diferencia (Vs) ........... 1.63 Dimensionamiento ............. 1.22 cajon "Dimensionamiento" ..... 1.87 cajon "Glosario" ............. 1.30 ───── el documento entero .......... 17.8 Un bloque mas alto que la hoja con `avoid` no se puede cumplir: el navegador lo empuja a hoja nueva, la anterior se queda en blanco y al final lo parte igual. Con un Anexo de casi siete hojas eso es una hoja en blanco garantizada y el riesgo de encadenar mas. Asi que lo que puede crecer con la cotizacion fluye, y lo que se protege son los PEDAZOS de adentro --la tarjeta de valor, el renglon de la comparativa, el paso de e-bita, la caja de datos, el sello de aceptacion, el renglon de tabla--, que ya traen su `avoid` unas lineas arriba y SI caben. Se quedan enteras las que no crecen nunca: portada, resumen, objetivos, arranque, condiciones y aceptacion. */ .doc #s-vs, .doc #s-val, .doc #s-men, .doc #s-anx, .doc #s-dim, .doc #s-pto, .doc #s-inv, .doc #s-sit, .doc .det{break-inside:auto} .doc #s-men table{break-inside:auto} .doc #s-men thead{display:table-header-group} .doc #s-men tr{break-inside:avoid} .doc h3, .doc .rot{break-after:avoid} } /* ══ LA BARRA DEL DOCUMENTO · idioma y descarga ══ Van arriba y juntos, que es donde el cliente los busca, y se quedan pegados al desplazar. Sin precio: el monto vive abajo, en la barra que aparece cuando ya leyó. */ /* ── LA BARRA SE VA CON LA PAGINA, NO SE PEGA ── En la maqueta esta regla dice `position:sticky`, pero alli el documento vive dentro de `#visor`, un marco con scroll propio que simula la pantalla del cliente: el sticky se pega al tope DEL MARCO, no al de la ventana. Fuera del marco --que es donde corre de verdad-- la misma regla deja la barra clavada encima de todo el documento, que es lo que el vio. Suelta, la barra es navy y lo que sigue es la portada navy: se leen como un solo bloque azul, y se va hacia arriba con el scroll. El que se queda abajo es `.pie-vivo`, y aparece cuando el cliente ya vio el precio. */ .doc .barra-doc{position:relative;z-index:30;background:var(--navy); display:flex;align-items:center;gap:12px;padding:10px 20px} /* ── LA BARRA Y LA PORTADA SON UN SOLO BLOQUE AZUL ── Eran dos cosas en la misma franja. La LINEA era el `border-bottom:1px solid rgba(255,255,255,.1)` de la barra: dos navys identicos partidos por un filo claro, que es justo lo que hacia que se leyeran como dos bloques en vez de uno. Y el HEADER era `.bd-quien`, el renglon con la razon social y el folio. Esos dos datos ya estan en la portada --el folio en el rotulo "PROPUESTA DE SERVICIO · ..." y el cliente en "PARA"--, asi que era una cabecera de mas, repitiendo lo de abajo. Se esconde por CSS en vez de solo dejar de emitirlo, porque las propuestas ya enviadas lo llevan guardado en su instantanea y deben verse igual que las nuevas. Lo que no se toca es su contenido: la instantanea sigue intacta. */ .doc .barra-doc .bd-quien{display:none} .doc .barra-doc .bd-acc{margin-left:auto} @container (min-width:700px){ .doc .barra-doc{padding:11px 48px} } .doc .bd-quien{min-width:0;flex:1 1 auto} .doc .bd-quien b{display:block;color:#fff;font:800 var(--t-p) var(--f);line-height:1.2; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .doc .bd-quien span{display:block;color:rgba(255,255,255,.58);font:400 var(--t-rot) var(--f);margin-top:1px} @container (max-width:559px){ .doc .bd-quien b{white-space:normal} } .doc .bd-acc{display:flex;gap:7px;flex:0 0 auto} .doc .bd-b{display:inline-flex;align-items:center;gap:7px;appearance:none;cursor:pointer; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff; font:800 var(--t-sec) var(--f);padding:8px 13px;border-radius:9px; transition:background .2s ease,border-color .2s ease} .doc .bd-b:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)} .doc .bd-b:focus-visible{outline:2px solid var(--amar);outline-offset:2px} .doc .bd-b svg{flex:0 0 auto} /* El de descargar NO es amarillo, y es a proposito. El amarillo queda para la accion principal --aceptar la propuesta--; dos llamadas del mismo peso compiten entre si. Su aspecto vive arriba, junto al de idioma, que es su igual. */ /* La etiqueta "Idioma" sólo existe en el teléfono. */ .doc .bd-et{display:none} @container (max-width:479px){ /* El de descargar se queda con su icono solo, como él pidió. */ .doc .bd-b span{display:none} /* El de idiomas no: enseña su icono Y la palabra. */ .doc .bd-idi .bd-et{display:inline} .doc .bd-idi{padding:8px 13px} .doc .bd-b{padding:8px 10px} } /* `hidden` es `display:none` del navegador, y una regla de autor le gana siempre. Sin esto, el menu de idiomas se queda abierto para siempre --medido: 150 px de tarjeta blanca colgando bajo el boton--. Es el mismo modo de falla de un estilo en linea contra `!important`. */ .doc .bd-menu[hidden]{display:none !important} .doc .bd-menu{position:absolute;top:calc(100% - 4px);right:20px;z-index:31; background:var(--sup);border:1px solid var(--borde);border-radius:11px; box-shadow:0 8px 30px rgba(4,30,66,.2);padding:5px;display:grid;gap:1px;min-width:150px} @container (min-width:700px){ .doc .bd-menu{right:48px} } .doc .bd-menu button{appearance:none;background:none;border:0;text-align:left;cursor:pointer; font:400 var(--t-sec) var(--f);color:var(--txt);padding:8px 11px;border-radius:7px} .doc .bd-menu button:hover{background:var(--sup2)} .doc .bd-menu button:focus-visible{outline:2px solid var(--amar);outline-offset:-2px} .doc[data-a="bn"] .bd-pdf{background:#fff;border-color:#fff;color:#000} /* ══ LAS HOJAS DEL PDF ══ Cada hoja es una caja de alto fijo. El reparto lo hace el JS: un módulo que no cabe en lo que queda se va ENTERO a la siguiente, y sólo se parte cuando él solo mide más que una hoja --y entonces se parte por sus piezas, nunca a media caja--. */ .doc .pdf-hojas{display:grid;gap:18px;padding:18px 0;background:var(--mesa)} .doc .pdf-hoja{width:816px;min-height:1056px;margin:0 auto;background:#fff;position:relative; box-shadow:0 2px 12px rgba(4,30,66,.16);display:flex;flex-direction:column} .doc .pdf-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px; padding:34px 45px 10px;margin:0 45px 0;flex:0 0 auto; border-bottom:2px solid var(--navy);box-sizing:content-box; padding-left:0;padding-right:0;margin-left:45px;margin-right:45px} .doc .pdf-cab img{height:34px;width:auto;display:block} .doc .pdf-ref{text-align:right;line-height:1.35} .doc .pdf-ref b{display:block;font:800 var(--t-min) var(--f);color:var(--navy)} .doc .pdf-ref span{display:block;font:400 var(--t-rot) var(--f);color:var(--txt2)} .doc .pdf-cuerpo{flex:1 1 auto;padding:18px 45px 0;overflow:hidden} /* `flow-root` y no `block`: los márgenes del primer y el último hijo se COLAPSAN fuera de un contenedor block, así que medía de menos y el paginador creía que cabía más de lo que cabía. Medido: tres hojas pasadas entre 37 y 179 px, siempre las mismas. */ .doc .pdf-flujo{display:flow-root} .doc .pdf-pie{flex:0 0 auto;margin:0 45px;padding:9px 0 26px;display:flex; justify-content:space-between;align-items:center; border-top:1px solid var(--borde); font:800 var(--t-micro) var(--f);color:var(--txt2);letter-spacing:.06em;text-transform:uppercase} .doc .pdf-hoja.portada .pdf-cab, .doc .pdf-hoja.portada .pdf-cuerpo{padding-left:0;padding-right:0;padding-top:0} .doc .pdf-hoja.portada .pdf-cab{display:none} .doc .pdf-hoja.portada .pdf-pie{display:none} .doc .pdf-flujo > .sec{border-top:0} .doc .pdf-flujo > .sec > .pad{padding:0 0 20px !important} .doc .pdf-cuerpo .det{border:0;border-radius:0} .doc .pdf-cuerpo .det summary{display:none} .doc .pdf-cuerpo .det-cuerpo{padding:0 0 16px} .doc .pdf-cuerpo .falta{display:none} .doc .pdf-cuerpo .beam::before{display:none} .doc .pdf-cuerpo .barra-doc{display:none} .doc .sigue{font:800 var(--t-micro) var(--f);letter-spacing:.1em;text-transform:uppercase; color:var(--txt2);margin:0 0 9px} /* ══════════════════════════════════════════════════════════════════ OXÍGENO EN EL TELÉFONO · 13/oct/2026 ────────────────────────────────────────────────────────────────── Y no era el espacio ENTRE secciones --30 px arriba y 30 abajo ya daban 60 px, dentro de lo que recomiendan los sistemas de diseño para móvil--. Era el espacio DENTRO: el rótulo, el título, el párrafo y el bloque que viene después iban todos a 10-12 px unos de otros, así que la sección entera se leía como un solo muro. La escala que se aplica es la convención de los sistemas de diseño consultados (Queensland Health, Red Hat, Cinch): cada frontera con su propio escalón, y el salto de sección SIEMPRE mayor que el de título, que a su vez es mayor que el de párrafo. Si todos los huecos miden lo mismo, ninguno significa nada. párrafo -> párrafo 16 px título -> contenido 14 px texto -> bloque 22 px <- el que faltaba por completo sección -> sección 72 px Sólo en el teléfono: en escritorio las secciones ya respiran con sus 48-60 px de padding y nadie se quejó. ══════════════════════════════════════════════════════════════════ */ /* ── EL AIRE ES ASIMÉTRICO, COMO LO HARÍA APPLE ── Arriba más que abajo, no mitad y mitad. El hueco pertenece a la sección que EMPIEZA, no a la que termina: así el ojo agrupa el rótulo con su contenido sin que nadie se lo explique. Con el hueco repartido por igual, cada sección parecía flotar suelta y por eso se leían todas como un muro continuo. Y va en los TRES tamaños, no sólo en el teléfono: el escritorio tenía 48 y 48, que es el reparto que no agrupa. */ /* Tercera subida del espacio entre módulos y entre secciones: el anterior seguía sin ser suficiente. De 52/44 a 64/54 en el teléfono, y en proporción arriba. El reparto sigue siendo asimétrico. */ .doc .pad{padding:64px 20px 54px} @container (min-width:700px){ .doc .pad{padding:78px 48px 64px;--val-margen:48px} } @container (min-width:1000px){ .doc .pad{padding:92px 68px 76px} } /* Cada frontera con su propio escalón, y el de sección siempre mayor que el de título, que es mayor que el de párrafo. Si todos los huecos miden lo mismo, ninguno significa nada. */ .doc .rot{margin-bottom:12px} .doc h3{margin-bottom:14px} .doc p{margin-bottom:16px;line-height:1.62} /* ── EL TEXTO DE ENTRADA NO COMPITE CON SU TÍTULO ── El párrafo que abre una sección baja de tamaño, se aclara y acorta la línea. Es texto de apoyo y tiene que PARECERLO: mientras tuvo el mismo peso que el resto, el ojo lo leía como una obligación más en lugar de como una entrada. */ /* `:not(.port):not(.cierre)` por lo mismo: sobre fondo azul este gris no se lee. El párrafo del cierre tiene su propio color (#B7C5D8) y esta regla se lo estaba pisando. */ .doc .sec:not(.port):not(.cierre) .pad > .rot + h3 + p, .doc .sec:not(.port):not(.cierre) .pad > h3 + p{font-size:var(--t-sec); color:var(--txt2);line-height:1.65;max-width:52ch} @container (max-width:699px){ .doc .sec:not(.port):not(.cierre) .pad > h3 + p{max-width:42ch} } /* El aire que faltaba: entre el texto que presenta la sección y el bloque que la desarrolla --la ficha, las tarjetas, el cajón, la tabla--. Sin esto el párrafo y el bloque se tocaban. */ .doc .pad > p + :not(p){margin-top:26px} .doc .pad > .det + .det{margin-top:12px} /* Un cajón abierto tampoco debe pegarse a lo que sigue. */ .doc .det[open]{margin-bottom:18px} /* ══════════════════════════════════════════════════════════════════ EL CARRUSEL DE VALOR AGREGADO · 13/oct/2026 ────────────────────────────────────────────────────────────────── El efecto se toma del carrusel de Calendly: la tarjeta grande al centro, los lomos de las vecinas asomando a los lados, y unas pestañas que se van llenando. ── LA REJILLA ES EL ESTADO BASE ── Todo lo de aquí abajo cuelga de `.vcar.on`, y esa clase la pone `efectos.js`. Sin JavaScript --en papel, en un documento suelto-- `.val` sigue siendo la rejilla de siempre con sus diez tarjetas. Nada de esto puede esconder contenido por su cuenta. ══════════════════════════════════════════════════════════════════ */ /* La foto, que ahora llevan todas las tarjetas. En la rejilla va arriba, como cabecera; en el carrusel pasa a la mitad derecha. */ .doc .beam-foto{border-radius:14px;overflow:hidden;background:var(--sup2); aspect-ratio:16/10;margin:-2px 0 13px} .doc .beam-foto img{width:100%;height:100%;object-fit:cover;display:block} .doc .beam-txt{display:flex;flex-direction:column;min-width:0} .doc .vcar.on{position:relative;display:block;height:var(--vcar-alto,470px); overflow:visible;margin:26px 0 8px;touch-action:pan-y} /* ── EL PASO, MÁS SUAVE · 13/oct/2026 ── Eran 0.42 s con `cubic-bezier(.22,.61,.36,1)`: esa curva arranca de golpe --el 60 % del camino en el primer tercio del tiempo-- y por eso el cambio se sentía como un salto, aunque fuera corto. Ahora son 0.66 s con `cubic-bezier(.4,0,.15,1)`: sale despacio, coge velocidad en medio y frena largo al llegar. Es la curva de un objeto con peso, que es lo que hace que un movimiento se lea como elegante en lugar de como un corte. La opacidad va un poco por detrás (0.44 s) y con retardo: así la tarjeta que entra termina de colocarse antes de acabar de aparecer, en vez de las dos cosas a la vez. */ /* ── 1.25 s, Y LO QUE SALE SE APAGA ANTES · 13/oct/2026 ── Eran 0.66 s. La curva ya frenaba al llegar, pero en medio segundo el reacomodo entero --ancho, alto, arriba e izquierda a la vez-- se lee como un corte. Con 1.25 s y una curva que sale casi sin acelerar y frena larguísimo, la tarjeta se posa en vez de aterrizar. Y el desvanecido va DESFASADO: la que entra termina de colocarse antes de acabar de aparecer (0.34 s de retraso), así que no hay dos tarjetas a media opacidad cruzándose por el camino. */ .doc .vcar.on .beam{position:absolute;left:50%;top:0;margin:0; transition:transform 1.25s cubic-bezier(.2,.85,.2,1), left 1.25s cubic-bezier(.2,.85,.2,1), width 1.25s cubic-bezier(.2,.85,.2,1), height 1.25s cubic-bezier(.2,.85,.2,1), top 1.25s cubic-bezier(.2,.85,.2,1), opacity .5s ease; will-change:transform,width,height} .doc .vcar.on .beam[data-off="0"]{transition-delay:0s,0s,0s,0s,0s,.34s} /* Y lo que va dentro --la foto y el texto-- entra con el mismo compás, no de golpe cuando la tarjeta ya llegó. */ .doc .vcar.on .beam .beam-foto, .doc .vcar.on .beam .beam-txt{transition:opacity .5s ease .1s} .doc .vcar.on .beam[data-off="0"] .beam-txt{opacity:1} /* ── LA TARJETA DEL CENTRO ── Texto a la izquierda, foto a la derecha, como en el original. */ /* ── TODO SE MIDE EN PORCENTAJES, NO EN PÍXELES ── El carrusel de Calendly vive en 1.240 px y puede permitirse una tarjeta de 762 más dos lomos a cada lado. Aquí el ancho útil de una sección son unos 760 px: con esas medidas los lomos se montaban ENCIMA de la tarjeta del centro. Medido en la primera prueba. Así que las medidas son relativas al contenedor --la tarjeta el 64 %, los lomos el 13 %-- y así cabe a cualquier ancho. Y queda un lomo a cada lado en vez de dos: el segundo par habría tenido que salirse del contenedor para no solapar. */ .doc .vcar.on .beam[data-off="0"]{ width:60%;height:var(--vcar-alto,470px); transform:translateX(-50%);opacity:1;z-index:3;cursor:default; display:grid;grid-template-columns:1fr minmax(0,40%);gap:20px;align-items:stretch} .doc .vcar.on .beam[data-off="0"] .beam-foto{ aspect-ratio:auto;height:100%;margin:0;order:2;border-radius:18px} .doc .vcar.on .beam[data-off="0"] .beam-txt{order:1;justify-content:center;gap:12px} /* ── EL TEXTO DE LA TARJETA ABIERTA, MÁS GRANDE ── Y era cierto: la tarjeta heredaba el cuerpo de una tarjeta de rejilla --pensada para verse de diez en diez-- cuando ahora ocupa media sección ella sola. Sólo la que está en pantalla: los lomos no tienen texto. */ @container (min-width:720px){ .doc .vcar.on .beam[data-off="0"] h4{font-size:var(--t-h3);line-height:1.18; margin-bottom:10px} .doc .vcar.on .beam[data-off="0"] .beam-txt > p{font-size:var(--t-p); line-height:1.58;margin-bottom:0} .doc .vcar.on .beam[data-off="0"] .ant{margin-top:16px;padding-top:14px; border-top:1px solid var(--borde)} .doc .vcar.on .beam[data-off="0"] .ant-dato{font-size:var(--t-sec)} .doc .vcar.on .beam[data-off="0"] .val-chip{margin-bottom:14px} } /* ── LOS LOMOS ── Sólo la foto, estrechos, a los lados. Dicen que hay más sin gastar una palabra. Al pulsarlos, esa tarjeta viene al centro. */ .doc .vcar.on .beam[data-off="-1"], .doc .vcar.on .beam[data-off="1"]{ width:13%;height:calc(var(--vcar-alto,470px) - 108px); top:54px;opacity:1;z-index:2;cursor:pointer;overflow:hidden} /* ── EL SITIO SE DA CON `left`, NO CON `translateX` ── Un porcentaje en `translateX` es del PROPIO elemento, no del contenedor: el lomo mide el 13 %, así que `translateX(-41.5%)` lo movía 38 px en vez de 300 y se quedaba escondido detrás de la tarjeta central. Medido en la segunda prueba. Con `left` el porcentaje sí es del contenedor, y `translateX(-50%)` --que ahí sí se quiere relativo al elemento-- lo centra sobre ese punto. */ /* Medido: con la central al 60 % va del 20 % al 80 %; el lomo mide el 13 %, así que centrado en el 10 % ocupa del 3.5 % al 16.5 % y queda un hueco limpio. Antes, centrado en el 23 %, entraba 101 px por debajo de la tarjeta. */ .doc .vcar.on .beam[data-off="-1"]{left:10%;transform:translateX(-50%)} .doc .vcar.on .beam[data-off="1"]{left:90%;transform:translateX(-50%)} /* Lo que no está a la vista: fuera, sin ocupar y sin leerse. */ .doc .vcar.on .beam:not([data-off="0"]):not([data-off="-1"]):not([data-off="1"]){ width:13%;height:200px;top:130px;opacity:0;z-index:0;pointer-events:none; left:-12%;transform:translateX(-50%)} .doc .vcar.on .beam[data-off="2"], .doc .vcar.on .beam[data-off="3"], .doc .vcar.on .beam[data-off="4"]{left:112%} .doc .vcar.on .beam:not([data-off="0"]) .beam-txt{display:none} .doc .vcar.on .beam:not([data-off="0"]) .beam-foto{ height:100%;aspect-ratio:auto;margin:0;border-radius:inherit} /* ── LAS PESTAÑAS ── La de la tarjeta en pantalla se alarga y se va llenando: dice en qué punto va y cuánto falta, sin una sola palabra. */ /* ── LAS FLECHAS DE LA COMPUTADORA · 13/oct/2026 ── El lomo ya se podía pulsar, pero nada lo decía, y de diez tarjetas se veía una sin saber que había diez. Las flechas son la puerta visible y la cuenta dice cuántas son. En el teléfono no salen: ahí manda el dedo. */ .doc .vcar-nav{display:flex;align-items:center;justify-content:center;gap:14px; margin:10px 0 0} .doc .vcar-nav button{width:40px;height:40px;border-radius:999px;cursor:pointer; border:1px solid var(--borde);background:var(--sup);color:var(--navy); display:grid;place-items:center;font-size:17px;padding:0; transition:background .2s ease,border-color .2s ease} .doc .vcar-nav button:hover{background:var(--sup2);border-color:var(--navy)} .doc .vcar-cuenta{font:700 var(--t-min) var(--f);color:var(--txt3); font-variant-numeric:tabular-nums;min-width:62px;text-align:center} /* El lomo es un botón: que se note al pasar el ratón. */ .doc .vcar.on .beam[data-off="1"]:hover, .doc .vcar.on .beam[data-off="-1"]:hover{opacity:.82} @media print{ .doc .vcar-nav{display:none} } /* ══════════════════════════════════════════════════════════════════ EL TELÉFONO: UN CARRETE QUE VA CON EL DEDO · 13/oct/2026 ────────────────────────────────────────────────────────────────── Hasta hoy, en el teléfono la tarjeta ponía la foto arriba recortada a 142 px de alto. Las diez fotos son VERTICALES --346×620--, así que se tiraba más de la mitad de la imagen, justo donde está el elemento de cuerpo entero. Así que en el teléfono la tarjeta ES la foto: vertical, a sangre, con el texto encima sobre un degradado. El vecino asoma por el borde, y eso --no una fila de cuadritos-- es lo que dice que hay más. Lo coloca `efectos.js` con `transform`, que es lo único que el navegador mueve sin repintar. Si ese código no corre --papel, documento suelto-- el carrusel no se monta y las diez tarjetas se leen en rejilla, como siempre. Nunca al revés. */ /* `.val.riel`, no `.riel` a secas: en el teléfono `.val` ya es un carrete nativo --`grid-auto-flow:column`, `overflow-x:auto`, `scroll-snap`-- y con la misma especificidad ganaría el que fuera después en el archivo. Con la clase encima no hay dudas. */ .doc .val.riel{display:block;position:relative;height:var(--riel-alto,520px); margin:22px 0 8px;padding:0;overflow:hidden; grid-auto-flow:row;scroll-snap-type:none; touch-action:pan-y;user-select:none;-webkit-user-select:none} .doc .val.riel .beam{position:absolute;top:0;left:50%;margin:0;padding:0;border:0; background:transparent;box-shadow:none;display:block;overflow:hidden; width:84%;height:var(--riel-alto,520px);border-radius:18px; transform-origin:50% 50%;will-change:transform,opacity} .doc .val.riel.suave .beam{transition:transform .5s cubic-bezier(.33,.9,.3,1), opacity .35s ease} .doc .val.riel .beam::before{display:none} /* el filo ámbar sobra sobre la foto */ .doc .val.riel .beam .beam-foto{position:absolute;inset:0;width:auto;height:auto; min-height:0;margin:0;aspect-ratio:auto;border-radius:18px;overflow:hidden;order:0} .doc .val.riel .beam .beam-foto img{width:100%;height:100%;object-fit:cover;display:block} .doc .val.riel .beam .beam-txt{position:absolute;left:0;right:0;bottom:0;top:auto;z-index:2; display:flex;flex-direction:column;justify-content:flex-end;gap:7px; padding:76px 18px 18px;order:0; background:linear-gradient(to top,rgba(5,16,36,.95) 26%,rgba(5,16,36,.72) 56%,rgba(5,16,36,0))} .doc .val.riel .beam .beam-txt h4{color:#fff;margin:0} .doc .val.riel .beam .beam-txt p{color:rgba(255,255,255,.88);margin:0} .doc .val.riel .beam .beam-txt .ant{color:rgba(255,255,255,.64);margin:9px 0 0;padding:9px 0 0; border-top:1px solid rgba(255,255,255,.22)} .doc .val.riel .beam .val-chip{align-self:flex-start;margin:0} .doc .val.riel .beam.lejos{visibility:hidden} @media (prefers-reduced-motion:reduce){ .doc .val.riel.suave .beam{transition:none} } @media print{ .doc .val.riel{height:auto;overflow:visible} } .doc .vcar-tabs{display:flex;justify-content:center;gap:6px;margin:14px 0 2px} .doc .vcar-tabs button{height:8px;width:8px;border:0;padding:0;cursor:pointer; border-radius:4px;background:var(--borde);overflow:hidden; transition:width .3s ease, background .3s ease} .doc .vcar-tabs button:hover{background:var(--txt3)} .doc .vcar-tabs button.es{width:74px;background:var(--borde)} .doc .vcar-tabs button i{display:block;height:100%;width:100%;border-radius:4px; background:var(--amar);transform:scaleX(0);transform-origin:0 50%; transition:transform .1s linear} /* ── EL TELÉFONO ── Una tarjeta y dos lomos finos: a 375 px no cabe más, y con dos columnas la tarjeta del centro se quedaba sin sitio para el texto. */ @container (max-width:719px){ /* Medido en 375 px: con lomos de 36 y 92 px de hueco, la tarjeta se quedaba en 209 px --menos de la mitad de la pantalla-- y el texto salía en columnas de cuatro palabras. Los lomos bajan a 24: siguen diciendo que hay más, sin robarle la pantalla a lo que se lee. */ .doc .vcar.on{--vcar-alto:520px} .doc .vcar.on .beam[data-off="0"]{ width:calc(100% - 62px);grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:11px} .doc .vcar.on .beam[data-off="0"] .beam-foto{order:1;height:142px;min-height:142px} .doc .vcar.on .beam[data-off="0"] .beam-txt{order:2;justify-content:flex-start;gap:0} .doc .vcar.on .beam[data-off="-1"], .doc .vcar.on .beam[data-off="1"]{width:24px;height:calc(var(--vcar-alto) - 170px);top:85px} .doc .vcar.on .beam[data-off="-1"]{left:0;transform:translateX(0)} .doc .vcar.on .beam[data-off="1"]{left:auto;right:0;transform:translateX(0)} .doc .vcar.on .beam[data-off="-2"], .doc .vcar.on .beam[data-off="2"]{opacity:0;pointer-events:none} .doc .vcar-tabs button.es{width:48px} } /* En papel manda la rejilla: `efectos.js` quita la clase `on` y esconde las pestañas, pero por si acaso, aquí también. */ @media print{ .doc .vcar.on{display:grid;height:auto} .doc .vcar.on .beam{position:static;width:auto;height:auto;opacity:1; transform:none;display:block} .doc .vcar.on .beam .beam-txt{display:block} .doc .vcar-tabs{display:none} } /* ══════════════════════════════════════════════════════════════════ ANEXO Y CONDICIONES, EN DOS GRUPOS · 13/oct/2026 ────────────────────────────────────────────────────────────────── Eran dos secciones separadas con el mismo componente dentro --`_cajon()`, o sea `
`--. Ahora son dos grupos bajo un mismo título, y el botón dice cuál se está viendo. Los dos botones miden lo mismo (`1fr` cada uno) porque ninguno de los dos manda sobre el otro: son dos caras de lo mismo. ── EN PAPEL SE VEN LOS DOS ── Una hoja no tiene pestañas. Al imprimir se enseñan los dos grupos, uno tras otro, y los botones desaparecen: lo que el cliente firma no puede depender de en qué pestaña estaba. ══════════════════════════════════════════════════════════════════ */ .doc .dos-grupos{margin:18px 0 0} .doc .gr-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px} .doc .gr-tabs button{font:800 var(--t-sec) var(--f);letter-spacing:.01em; border:1px solid var(--borde);background:var(--sup);color:var(--txt2); padding:13px 14px;border-radius:var(--r);cursor:pointer;min-width:0; transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease} .doc .gr-tabs button:hover{border-color:var(--amar);color:var(--navy)} .doc .gr-tabs button[aria-selected="true"]{background:var(--navy);color:#fff; border-color:var(--navy);box-shadow:0 6px 16px rgba(4,30,66,.16)} .doc .gr-cuerpo{display:grid;gap:10px} /* ── `hidden` PIERDE CONTRA `display:grid` ── El atributo esconde con `display:none` a nivel de elemento, y cualquier regla de clase le gana. Sin esta línea el botón decía "Condiciones comerciales" y debajo seguían los cajones del Anexo: el estado se marcaba y el contenido no cambiaba. Medido al armar el documento completo. Es el mismo tropiezo de [[un-estilo-en-linea-pierde-contra-important]]. */ .doc .gr-cuerpo[hidden]{display:none} /* Los cajones son los mismos del Anexo: mismo componente, mismo alto, misma forma. No se redefine nada suyo aquí a propósito. */ @container (max-width:479px){ .doc .gr-tabs{grid-template-columns:1fr;gap:7px} .doc .gr-tabs button{padding:12px 13px} } /* En papel: los dos grupos, sin botones. */ @media print{ .doc .gr-tabs{display:none} .doc .gr-cuerpo{display:grid !important} .doc .gr-cuerpo[hidden]{display:grid !important} } /* Y el mismo estado cuando se pide "ver todo" desde la pantalla. */ .doc .dos-grupos.abierto-todo .gr-cuerpo[hidden]{display:grid} .doc .dos-grupos.abierto-todo .gr-tabs{opacity:.45;pointer-events:none} /* ══════════════════════════════════════════════════════════════════ LA DIFERENCIA · DOS COLUMNAS EN PC, PAR A PAR EN EL TELÉFONO ────────────────────────────────────────────────────────────────── El HTML es UNO solo --cabeceras, preguntas y doce celdas, todo hermano dentro de una rejilla-- y lo que cambia es dónde se coloca cada pieza. Así el texto largo existe una sola vez. · PC: las dos cabeceras arriba y cada celda en su columna. Las filas quedan alineadas, cosa que dos listas sueltas no logran, y el fondo continuo de cada columna las hace leer como dos tarjetas. · Teléfono: la pregunta ocupa el ancho, y debajo las dos respuestas una sobre otra. ══════════════════════════════════════════════════════════════════ */ .doc .vsx{display:grid;gap:0;margin:18px 0 0} .doc .vsx-c{display:flex;gap:10px;min-width:0} .doc .vsx-c > div{min-width:0} .doc .vsx-c p{margin:0;font-size:var(--t-sec);line-height:1.52} .doc .vsx-ic{flex:0 0 auto;width:19px;height:19px;border-radius:6px;display:grid; place-items:center;font-size:11px;margin-top:2px} .doc .vsx-mal .vsx-ic{background:var(--mesa);color:#7B8795} .doc .vsx-bien .vsx-ic{background:var(--amar);color:var(--navy)} .doc .vsx-mal p{color:var(--txt2)} .doc .vsx-bien p{color:var(--txt-cuerpo)} .doc .vsx-bien b,.doc .vsx-bien strong{color:var(--navy);font-weight:800} .doc .vsx-et,.doc .vsx-mini{display:block;font:800 var(--t-micro) var(--f); letter-spacing:.08em;text-transform:uppercase;margin:0 0 5px} .doc .vsx-mal .vsx-et,.doc .vsx-mal .vsx-mini{color:var(--txt3)} .doc .vsx-bien .vsx-et,.doc .vsx-bien .vsx-mini{color:var(--navy)} .doc .vsx-cab h4{margin:0 0 4px;font:800 var(--t-h4) var(--f);display:flex; align-items:center;gap:8px;flex-wrap:wrap} .doc .vsx-cab p{margin:0;font-size:var(--t-min);color:var(--txt3)} .doc .vsx-cab-mal h4{color:var(--txt2)} .doc .vsx-chip{font:800 var(--t-micro) var(--f);letter-spacing:.08em; text-transform:uppercase;background:var(--amar);color:var(--navy); padding:4px 9px;border-radius:99px} /* ── ESCRITORIO · LAS DOS COLUMNAS (variante B) ── */ @container (min-width:720px){ .doc .vsx{grid-template-columns:1fr 1fr;column-gap:14px;row-gap:0} .doc .vsx-q{display:none} /* va dentro de la celda */ .doc .vsx-et{display:none} /* lo dice la cabecera */ .doc .vsx-cab{padding:16px 16px 13px;border:1px solid var(--borde); border-bottom:0;border-radius:var(--r) var(--r) 0 0} .doc .vsx-cab-mal{background:var(--sup2)} .doc .vsx-cab-bien{background:var(--sup);border-color:var(--amar)} .doc .vsx-c{padding:14px 16px;border:1px solid var(--borde);border-top:0; border-bottom:0} .doc .vsx-mal{grid-column:1;background:var(--sup2)} .doc .vsx-bien{grid-column:2;background:var(--sup);border-color:var(--amar)} /* El último de cada columna cierra la tarjeta. `nth-last-child(2)` y `(1)` son las dos últimas celdas del grid: la mala y la buena. */ .doc .vsx-c:nth-last-child(2), .doc .vsx-c:nth-last-child(1){border-bottom:1px solid var(--borde); border-radius:0 0 var(--r) var(--r);padding-bottom:16px} .doc .vsx-c:nth-last-child(1){border-color:var(--amar)} .doc .vsx-bien{box-shadow:0 0 0 0 transparent} /* Una línea fina entre puntos, dentro de cada columna. */ .doc .vsx-c + .vsx-c + .vsx-c{box-shadow:inset 0 1px 0 var(--borde)} } /* ── TELÉFONO · PAR A PAR (variante A) ── */ @container (max-width:719px){ .doc .vsx{grid-template-columns:1fr;gap:0} .doc .vsx-cab{display:none} /* cada celda se nombra sola */ .doc .vsx-mini{display:none} /* la pregunta va arriba */ .doc .vsx-q{font:800 var(--t-sec) var(--f);color:var(--txt); margin:20px 0 11px;letter-spacing:-.01em;border-top:1px solid var(--borde); padding-top:19px} .doc .vsx-q:first-of-type{border-top:0;padding-top:2px;margin-top:4px} .doc .vsx-c{padding:13px 14px;border-radius:12px;border:1px solid var(--borde); margin:0 0 8px} .doc .vsx-mal{background:var(--sup2)} .doc .vsx-bien{background:var(--sup);border-color:var(--amar); box-shadow:0 2px 10px rgba(255,194,7,.14)} } /* En papel manda la de escritorio: es la que cabe en una hoja. */ @media print{ .doc .vsx{grid-template-columns:1fr 1fr} .doc .vsx-q,.doc .vsx-mini{display:none} .doc .vsx-cab{display:block} .doc .vsx-c{break-inside:avoid} } /* ══════════════════════════════════════════════════════════════════ LOS CINCO FRENTES, COMO TABLERO · 13/oct/2026 ────────────────────────────────────────────────────────────────── Y de los frentes en concreto: *"siento que todavía puedes hacer algo mejor... lo quiero con una cuenta progresiva en el momento en que se va deslizando"*. Cada frente es una ficha con su anillo. El anillo es un círculo de 132 de perímetro al que se le quita lo que falta por llenar, así que animarlo es mover un solo número. Todo lo que se mueve cuelga de `.lleno`, que pone `efectos.js` al llegar. Sin esa clase las fichas están a la vista y los números son los finales: si el JavaScript no corre, no se pierde un dato. ══════════════════════════════════════════════════════════════════ */ .doc .tbf{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 0} .doc .tbf-c{border:1px solid var(--borde);border-radius:var(--r);background:var(--sup); padding:15px 15px 14px;display:flex;gap:13px;align-items:flex-start;min-width:0} .doc .tbf-anillo{position:relative;flex:0 0 auto;width:52px;height:52px} .doc .tbf-anillo svg{width:52px;height:52px;transform:rotate(-90deg);display:block} .doc .tbf-anillo circle{fill:none;stroke-width:5;stroke-linecap:round} .doc .tbf-anillo .pista{stroke:var(--borde)} .doc .tbf-anillo .val{stroke:#C9D2DD;stroke-dasharray:132} .doc .tbf-anillo b{position:absolute;inset:0;display:grid;place-items:center; font:900 var(--t-sec) var(--f);color:var(--txt3);font-variant-numeric:tabular-nums} .doc .tbf-t{min-width:0} .doc .tbf-t span{display:block;font:800 var(--t-micro) var(--f);letter-spacing:.09em; text-transform:uppercase;color:var(--txt3);margin:0 0 3px} .doc .tbf-t h5{margin:0 0 3px;font:800 var(--t-sec) var(--f);color:var(--txt);line-height:1.25} .doc .tbf-t p{margin:0;font-size:var(--t-min);color:var(--txt3);line-height:1.4} /* El color lo pone la gravedad, no el adorno. */ .doc .tbf-c.g3{border-color:#E8B9AE;background:rgba(200,69,47,.05)} .doc .tbf-c.g3 .val{stroke:var(--niv-alto)} .doc .tbf-c.g3 .tbf-anillo b{color:var(--niv-alto)} .doc .tbf-c.g2{border-color:#F0DCA0;background:rgba(255,194,7,.08)} .doc .tbf-c.g2 .val{stroke:var(--amar)} .doc .tbf-c.g2 .tbf-anillo b{color:#8A6A00} .doc .tbf-c.g0{background:var(--sup2)} .doc .tbf-c.g0 .tbf-t h5{color:var(--txt2)} /* El movimiento: sólo cuando `efectos.js` arma el tablero. */ .doc .sec-situacion[data-tb] .tbf-c{opacity:0;transform:translateY(9px); transition:opacity .42s ease, transform .42s cubic-bezier(.4,0,.15,1)} .doc .sec-situacion[data-tb] .tbf-anillo .val{stroke-dashoffset:132; transition:stroke-dashoffset .85s cubic-bezier(.4,0,.15,1)} .doc .sec-situacion[data-tb].lleno .tbf-c{opacity:1;transform:none} .doc .sec-situacion[data-tb] .term-pts b{font-variant-numeric:tabular-nums} @container (max-width:900px){ .doc .tbf{grid-template-columns:repeat(2,1fr)} } @container (max-width:719px){ .doc .tbf{grid-template-columns:1fr} .doc .tbf-c{padding:13px 14px} } @media (prefers-reduced-motion:reduce){ .doc .sec-situacion[data-tb] .tbf-c, .doc .sec-situacion[data-tb] .tbf-anillo .val{transition:none} } /* En papel, todo lleno y quieto. */ @media print{ .doc .sec-situacion[data-tb] .tbf-c{opacity:1;transform:none} .doc .tbf{grid-template-columns:repeat(2,1fr)} .doc .tbf-c{break-inside:avoid} } /* ══════════════════════════════════════════════════════════════════ LA SECCIÓN ENTERA, COMO TABLERO · 13/oct/2026 ────────────────────────────────────────────────────────────────── Faltaban tres piezas que no entraron en la propuesta: la tarjeta del riesgo, los datos del contexto y las dos cifras del final. Aquí las tres hablan el mismo idioma que las fichas de los frentes. ══════════════════════════════════════════════════════════════════ */ /* ── LA TARJETA DEL RIESGO ── */ .doc .tbr{border:1px solid var(--borde);border-radius:var(--r);background:var(--sup); padding:18px 18px 16px;margin:14px 0 0} .doc .tbr-cab{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 13px} .doc .tbr-et{margin:0;font:800 var(--t-micro) var(--f);letter-spacing:.1em; text-transform:uppercase;color:var(--txt3)} .doc .tbr-niv{font:900 var(--t-h4) var(--f);letter-spacing:-.01em;color:var(--navy)} .doc .tbr-cifra{display:flex;align-items:baseline;gap:9px;margin:0 0 13px} .doc .tbr-cifra b{font:900 clamp(30px,5.2cqw,42px)/1 var(--f);letter-spacing:-.03em; color:var(--navy);font-variant-numeric:tabular-nums} .doc .tbr-cifra span{font:700 var(--t-sec) var(--f);color:var(--txt2)} .doc .tbr-barra{display:flex;gap:3px;height:9px;margin:0 0 11px} .doc .tbr-barra i{flex:1;border-radius:3px;background:var(--borde)} .doc .tbr-barra i.on1{background:var(--niv-bajo)} .doc .tbr-barra i.on2{background:var(--amar)} .doc .tbr-barra i.on3{background:#E08A2B} .doc .tbr-barra i.on4{background:var(--niv-alto)} .doc .tbr-ley{display:flex;flex-wrap:wrap;gap:4px 14px;font:700 var(--t-micro) var(--f); letter-spacing:.06em;text-transform:uppercase;color:var(--txt3);margin:0 0 12px} .doc .tbr-ley span{display:flex;align-items:center;gap:5px} .doc .tbr-ley u{width:7px;height:7px;border-radius:99px;text-decoration:none} .doc .tbr-ley u.n1{background:var(--niv-bajo)} .doc .tbr-ley u.n2{background:var(--amar)} .doc .tbr-ley u.n3{background:#E08A2B} .doc .tbr-ley u.n4{background:var(--niv-alto)} .doc .tbr-ley span.es{color:var(--navy)} .doc .tbr-txt{margin:0;font-size:var(--t-sec);color:var(--txt2);line-height:1.5;max-width:68ch} .doc .tbr-pend{margin:10px 0 0;font:800 var(--t-micro) var(--f);letter-spacing:.08em; text-transform:uppercase;color:var(--txt3)} /* El nivel tiñe la tarjeta, como las fichas de los frentes. */ .doc .tbr.l0{border-color:#BFE0D0;background:rgba(46,158,107,.05)} .doc .tbr.l0 .tbr-niv{color:#1F7A4F} .doc .tbr.l1{border-color:#F0DCA0;background:rgba(255,194,7,.07)} .doc .tbr.l1 .tbr-niv{color:#8A6A00} .doc .tbr.l2{border-color:#EFC79B;background:rgba(224,138,43,.07)} .doc .tbr.l2 .tbr-niv{color:#B06A14} .doc .tbr.l3{border-color:#E8B9AE;background:rgba(200,69,47,.06)} .doc .tbr.l3 .tbr-niv{color:var(--niv-alto)} /* La barra se llena al llegar, como el resto del tablero. */ .doc .sec-situacion[data-tb] .tbr-barra i{transform:scaleX(0);transform-origin:0 50%; transition:transform .5s cubic-bezier(.4,0,.15,1)} .doc .sec-situacion[data-tb] .tbr-barra i:nth-child(1){transition-delay:.05s} .doc .sec-situacion[data-tb] .tbr-barra i:nth-child(2){transition-delay:.13s} .doc .sec-situacion[data-tb] .tbr-barra i:nth-child(3){transition-delay:.21s} .doc .sec-situacion[data-tb] .tbr-barra i:nth-child(4){transition-delay:.29s} .doc .sec-situacion[data-tb].lleno .tbr-barra i{transform:scaleX(1)} /* ── CADA DATO DEL CONTEXTO, UNA FICHA ── */ .doc .cx{display:flex;gap:11px;align-items:flex-start;padding:12px 13px; border:1px solid var(--borde);border-radius:12px;background:var(--sup); grid-template-columns:none;border-top-width:1px} .doc .cx-ic{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid; place-items:center;background:var(--sup2);color:var(--navy);font-size:15px} .doc .cx-ic i{opacity:.72} /* ── ESTE `div` SÍ EXISTE ── Más arriba hay `.doc .cx>div{display:contents}`, que se puso para que las ligas YA ENVIADAS --cuyo HTML congelado anida un div entre `.cx` y el `
`-- siguieran leyéndose. Pero ahora el contenedor del texto también es un div hijo, y `display:contents` lo borraba del layout: el `dd` quedaba como hijo flex sin ancho y el texto caía LETRA POR LETRA. Medido al armar el documento. Así que se le devuelve su caja, con `flex:1` para que ocupe lo que queda y `min-width:0` para que el texto largo rompa dentro en vez de estirar la ficha. */ .doc .cx > .cx-t{display:block;flex:1 1 auto;min-width:0} .doc .cx .cx-t dt{font:700 var(--t-micro) var(--f);letter-spacing:.07em; text-transform:uppercase;color:var(--txt3);margin:0 0 3px;grid-row:auto} .doc .cx .cx-t dd{margin:0;font:700 var(--t-sec) var(--f);color:var(--txt); line-height:1.35;overflow-wrap:break-word;grid-column:auto;padding-left:0; text-align:left} .doc .ctxg{gap:9px} .doc .ctx-bloque{margin-bottom:16px} /* ── LAS DOS CIFRAS DEL FINAL ── */ .doc .tbd{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 0} .doc .tbd-c{border:1px solid var(--borde);border-radius:var(--r);background:var(--sup); padding:15px 16px 14px;min-width:0} .doc .tbd-et{display:block;font:800 var(--t-micro) var(--f);letter-spacing:.1em; text-transform:uppercase;color:var(--txt3);margin:0 0 7px} .doc .tbd-c b{display:block;font:900 var(--t-h4) var(--f);color:var(--navy); letter-spacing:-.02em;margin:0 0 5px;font-variant-numeric:tabular-nums} .doc .tbd-c b.tbd-txt{font-size:var(--t-sec);letter-spacing:0} .doc .tbd-c p{margin:0;font-size:var(--t-min);color:var(--txt3);line-height:1.42} @container (max-width:719px){ .doc .tbd{grid-template-columns:1fr} .doc .cx{padding:11px 12px;gap:10px} .doc .cx-ic{width:27px;height:27px;font-size:14px} } @media print{ .doc .sec-situacion[data-tb] .tbr-barra i{transform:scaleX(1)} } /* ══════════════════════════════════════════════════════════════════ LA FICHA DEL SITIO, COMO PANEL · 13/oct/2026 ────────────────────────────────────────────────────────────────── Arriba el riesgo y los cinco frentes ya eran tablero; aquí seguían nueve tarjetas idénticas, un cajón y dos cajas de texto. LOS DIVISORES LOS DIBUJA CADA CELDA, no el fondo del contenedor asomando por el `gap`. Parece lo mismo y no lo es: con el `gap`, la última fila incompleta dejaba un rectángulo gris --el fondo a la vista-- cada vez que una cotización traía siete datos en vez de nueve. Con `box-shadow` por celda, donde no hay celda no hay línea. El panel se adapta a cuantos datos haya sin tocar nada. El `.cx` de antes NO se borra: las ligas ya enviadas llevan su HTML congelado --ver [[la-liga-sirve-la-instantanea-el-css-no]]-- y se siguen leyendo con él. */ /* ── EL LEVANTAMIENTO PENDIENTE, DICHO A TIEMPO · 13/oct/2026 ── Los cinco frentes sin medir salen en gris, con el anillo vacío: se ve que FALTAN, no que no existan. Y el aviso de la portada va sobre el azul, que es lo primero que se lee. */ .doc .tbf-pend .tbf-anillo b{color:var(--txt3);font-size:var(--t-sec)} .doc .tbf-pend .tbf-c{border-style:dashed} .doc .tbf-falta{margin:12px 0 0;padding:13px 15px;border-radius:var(--r); background:var(--sup2);border:1px solid var(--borde); font-size:var(--t-min);color:var(--txt2);line-height:1.5} .doc .tbf-falta b{color:var(--txt);font-weight:800} .doc .port .port-prelim{display:flex;gap:10px;align-items:flex-start; margin:16px 0 0;padding:13px 15px;border-radius:var(--r); background:rgba(255,194,7,.12);border:1px solid rgba(255,194,7,.45); font-size:var(--t-min);line-height:1.5;color:#fff} .doc .port .port-prelim i{font-size:18px;color:var(--amar);flex:0 0 auto;margin-top:1px} .doc .port .port-prelim b{color:var(--amar);font-weight:800} @media print{ .doc .port .port-prelim{color:#1A2742;background:rgba(255,194,7,.18)} } .doc .tbs{margin:26px 0 0} .doc .tbs-tit{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 12px} .doc .tbs-tit span{font:800 var(--t-sec) var(--f);color:var(--txt);letter-spacing:-.01em} .doc .tbs-tit em{font-style:normal;font:600 var(--t-min) var(--f);color:var(--txt3)} .doc .tbs-rej{display:grid;grid-template-columns:repeat(3,1fr);gap:0; background:var(--sup);border:1px solid var(--borde);border-radius:var(--r);overflow:hidden} .doc .tbs-cel{background:var(--sup);box-shadow:0 0 0 1px var(--borde); padding:15px 16px 14px;min-width:0;display:flex;flex-direction:column;gap:7px; opacity:0;transform:translateY(7px); transition:opacity .4s ease, transform .4s cubic-bezier(.4,0,.15,1)} .doc .sec-situacion.lleno .tbs-cel{opacity:1;transform:none} .doc .tbs-cel dt{display:flex;align-items:center;gap:7px;margin:0; font:800 var(--t-micro) var(--f);letter-spacing:.09em;text-transform:uppercase;color:var(--txt3)} .doc .tbs-cel dt i{font-size:14px;opacity:.6;color:var(--navy)} .doc .tbs-cel dd{margin:0;font:800 clamp(15px,2.1cqw,18px)/1.25 var(--f);color:var(--navy); letter-spacing:-.01em} /* El tramo donde cae, sobre la escala entera. */ .doc .tbs-rango{display:flex;gap:3px;height:7px;margin:3px 0 0} .doc .tbs-rango i{flex:1;border-radius:3px;background:var(--borde); transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.4,0,.15,1)} .doc .sec-situacion.lleno .tbs-rango i{transform:scaleX(1)} .doc .tbs-rango i.es{background:var(--navy)} .doc .tbs-esc{display:flex;justify-content:space-between;gap:4px; font:700 10px var(--f);letter-spacing:.04em;color:var(--txt3);margin:1px 0 0} /* Las 24 horas del día, y cuántas se cubren. */ .doc .tbs-horas{display:flex;gap:2px;height:14px;margin:3px 0 0} .doc .tbs-horas i{flex:1;border-radius:2px;background:var(--borde); opacity:0;transition:opacity .3s ease, background .3s ease} .doc .sec-situacion.lleno .tbs-horas i{opacity:1} .doc .sec-situacion.lleno .tbs-horas i.on{background:var(--niv-bajo)} .doc .tbs-sello{display:inline-flex;align-items:center;gap:6px;margin:3px 0 0; font:700 var(--t-min) var(--f);color:var(--txt2)} .doc .tbs-sello u{width:8px;height:8px;border-radius:99px;text-decoration:none;background:var(--borde)} .doc .tbs-sello.ok u{background:var(--niv-bajo)} .doc .tbs-sello.medio u{background:var(--amar)} .doc .tbs-sello.no u{background:var(--niv-alto)} /* ── EL PERFIL RECOMENDADO Y SU AJUSTE ── El ajuste vive DENTRO de la tarjeta del perfil porque nace de él: separados, el cliente leía dos veces lo mismo sin que nada se lo dijera. El logotipo va sobre navy porque los cinco son amarillo Lykos sobre transparente, y sobre blanco se pierden. */ .doc .tbs-dos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 0} .doc .tbs-g,.doc .tbs-cal{border:1px solid var(--borde);border-radius:var(--r); background:var(--sup);padding:16px 17px 15px;min-width:0} .doc .tbs-rot{display:flex;align-items:center;gap:7px;margin:0 0 10px; font:800 var(--t-micro) var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--txt3)} .doc .tbs-rot i{font-size:15px;opacity:.5;color:var(--navy)} .doc .tbs-pie{margin:9px 0 0;font-size:var(--t-min);color:var(--txt2);line-height:1.45} .doc .tbs-pie b{color:var(--txt);font-weight:800} .doc .tbs-perf{display:flex;align-items:center;gap:15px;margin:0 0 14px} .doc .tbs-perf-logo{flex:0 0 auto;width:74px;height:74px;margin:0;border-radius:18px; display:grid;place-items:center;background:var(--navy)} .doc .tbs-perf-logo img{width:56px;height:56px;display:block;object-fit:contain} .doc .tbs-perf-t{min-width:0} .doc .tbs-perf-t b{display:block;font:900 clamp(18px,2.8cqw,23px)/1.15 var(--f); color:var(--navy);letter-spacing:-.02em;margin:0 0 5px} .doc .tbs-perf-t p{margin:0;font-size:var(--t-min);color:var(--txt2);line-height:1.45} .doc .tbs-aj{border-top:1px solid var(--borde);padding:13px 0 0} .doc .tbs-aj-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .doc .tbs-aj-t span{font:800 var(--t-micro) var(--f);letter-spacing:.1em; text-transform:uppercase;color:var(--txt3)} .doc .tbs-aj-t b{font:900 clamp(22px,3.6cqw,29px)/1 var(--f);color:var(--navy); letter-spacing:-.03em;font-variant-numeric:tabular-nums} .doc .tbs-aj-barra{height:10px;border-radius:5px;background:var(--borde); overflow:hidden;margin:9px 0 0} .doc .tbs-aj-barra i{display:block;height:100%;width:var(--pc);border-radius:5px; background:var(--amar);transform:scaleX(0);transform-origin:0 50%; transition:transform .8s cubic-bezier(.4,0,.15,1) .2s} .doc .sec-situacion.lleno .tbs-aj-barra i{transform:scaleX(1)} /* Los días de alta demanda: el mes entero, y cuáles caen. */ .doc .tbs-dias{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;margin:0 0 11px} .doc .tbs-dias i{aspect-ratio:1;border-radius:3px;background:var(--borde); opacity:0;transform:scale(.6);transition:opacity .3s ease, transform .3s ease} .doc .sec-situacion.lleno .tbs-dias i{opacity:1;transform:none} .doc .tbs-dias i.es{background:var(--amar)} .doc .tbs-cal-v{margin:0;font:600 var(--t-sec) var(--f);color:var(--txt2)} .doc .tbs-cal-v b{font-weight:900;color:var(--navy)} @container (max-width:900px){ .doc .tbs-rej{grid-template-columns:repeat(2,1fr)} } @container (max-width:719px){ .doc .tbs-rej{grid-template-columns:1fr} .doc .tbs-dos{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .doc .tbs-cel,.doc .tbs-rango i,.doc .tbs-horas i,.doc .tbs-dias i, .doc .tbs-aj-barra i{transition:none} } /* En papel no hay recorrido que medir: todo nace puesto. */ @media print{ .doc .tbs-cel,.doc .tbs-dias i,.doc .tbs-horas i{opacity:1;transform:none} .doc .tbs-rango i,.doc .tbs-aj-barra i{transform:scaleX(1)} } /* ══════════════════════════════════════════════════════════════════ LA RONDA DEL 13 DE OCTUBRE · lo que quedó aprobado en la demo ────────────────────────────────────────────────────────────────── Todo esto se le presentó pintado antes de programarlo y lo aprobó viéndolo. Va al FINAL de la hoja a propósito: varias de estas reglas corrigen valores que las reglas base ponen más arriba, y a igual especificidad manda la última. Ya se perdió tiempo con reglas que no se aplicaban por estar escritas antes que las que corregían. ══════════════════════════════════════════════════════════════════ */ /* ── 1 · UN SOLO CANAL DE MÁRGENES ──────────────────────────────── Y así era: el titular vive en `.ptoh`, que es HERMANO de `.pad` y no hereda su relleno. En escritorio `.pad` tiene un padding mayor que `--val-margen`, así que el titular arrancaba antes que todo lo demás. Ahora los dos beben del mismo canal y arrancan en el mismo pixel. Un canal, no dos. */ /* ── POR QUÉ EL TITULAR SE SALÍA, Y CÓMO SE ARREGLA DE VERDAD ── El documento YA tenía un canal bien hecho: `--val-margen` vale 20 px en teléfono, 48 en pantalla ancha y 68 en muy ancha. El defecto era dónde se declaraba: en `.pad`. Y `.ptoh` --la banda del titular-- es HERMANO de `.pad`, no descendiente, así que la variable nunca le llegaba y caía al valor de respaldo, 24 px. Por eso el titular arrancaba 24 px más a la izquierda que todo lo demás. La variable se sube al padre común, `.sec`, que los dos heredan. No se inventa un canal nuevo: se arregla el que había. ── Y UN ERROR MÍO QUE ESTO CORRIGE ── La primera versión declaraba `--pad-x` dentro de un `@container` sobre `.doc`. Eso NO aplica nunca: una consulta de contenedor mide un ANCESTRO, y `.doc` es el contenedor mismo, no puede consultarse a sí mismo. El resultado era que todas las secciones se quedaban en el valor de respaldo --24 px-- también en pantalla ancha, o sea que el documento perdía márgenes en vez de ganarlos. Medido en pantalla: 24 px donde debían ser 68. */ .doc .sec{--val-margen:20px} @container (min-width:700px){ .doc .sec{--val-margen:48px} } @container (min-width:1000px){ .doc .sec{--val-margen:68px} } .doc .sec-apost .ptoh{padding-left:var(--val-margen);padding-right:var(--val-margen)} /* Nada se sale del canal salvo lo que se sale a propósito: la tabla que se desliza con el dedo en el teléfono. */ .doc .sec > .pad > *{max-width:100%} .doc img, .doc table{max-width:100%} /* ── 2 · MÁS AIRE ENTRE MÓDULOS ─────────────────────────────────── El respiro de cada sección sube cerca de un tercio. La portada y el cierre llevan menos porque son pantallas enteras de color, no bloques de lectura. */ .doc .sec > .pad{padding-top:84px;padding-bottom:72px} .doc .cuerpo .sec > .pad{padding-top:84px;padding-bottom:72px} .doc .sec.port > .pad, .doc .sec.cierre > .pad{padding-top:64px;padding-bottom:58px} /* ── EL TITULAR Y SU CUERPO SON LA MISMA SECCIÓN ── Y es cierto: `.ptoh` --la banda del titular-- y `.pad` --el cuerpo-- son dos cajas hermanas, pero UNA sola sección. El aire de entre módulos va ARRIBA del rótulo, que es donde empieza la sección, y ABAJO del todo. Entre el titular y la tarjeta va el respiro de dentro de una sección, no el de entre dos. Medido: 24 px desde el pie del titular hasta la tarjeta --4 de la banda, 0 del cuerpo y los 20 de margen que ya trae `.inv`--. */ .doc .sec-apost .ptoh{padding-top:84px;padding-bottom:4px} .doc .sec-apost > .pad{padding-top:0} @container (max-width:719px){ .doc .sec > .pad{padding-top:52px;padding-bottom:46px} .doc .sec-apost .ptoh{padding-top:52px} } /* ── 3 · «CUÁNDO ARRANCA», CON PASOS ───────────────────────────── El componente de referencia es React con Ark UI; este documento son cadenas de texto, no React, así que se replica en CSS plano con la paleta de la casa: el indicador redondo, el conector vertical y la palomita del paso que cierra. Los cuatro pasos y sus textos NO se tocan: son los mismos que el motor ya escribe en `
    `. Cambia cómo se ven, no lo que dicen. */ .doc .ruta{display:flex;flex-direction:column;gap:0;margin:24px 0 0; grid-template-columns:none} .doc .ruta li{list-style:none;border:0;padding:0 0 26px 0;margin:0; position:relative;display:grid;grid-template-columns:34px minmax(0,1fr); gap:0 16px;align-items:start} .doc .ruta li:last-child{padding-bottom:0} .doc .ruta li::before{ content:counter(p);grid-column:1;grid-row:1 / span 3; width:34px;height:34px;border-radius:50%;display:flex; align-items:center;justify-content:center; font:800 var(--t-sec) var(--f);font-variant-numeric:tabular-nums; background:var(--sup2);color:var(--txt3); box-shadow:inset 0 0 0 2px var(--borde);z-index:2;position:relative} /* El primero es el que toca: el cliente está a punto de aceptar. */ .doc .ruta li:first-child::before{ background:var(--navy);color:#fff;box-shadow:inset 0 0 0 2px var(--navy), 0 0 0 5px rgba(4,30,66,.08)} /* El último es el resultado, y por eso lleva el ámbar de la casa. */ .doc .ruta li:last-child::before{ content:"\f129";font-family:"tabler-icons";font-size:17px; background:var(--amar);color:var(--navy); box-shadow:inset 0 0 0 2px var(--amar),0 0 0 5px rgba(255,194,7,.18)} /* El conector va de cada paso al siguiente; el último no lo tiene, y por eso la línea termina en la bolita y no en el aire. */ .doc .ruta li::after{content:"";position:absolute; left:16px;top:34px;bottom:0;width:2px;background:var(--borde);z-index:1} .doc .ruta li:last-child::after{display:none} .doc .ruta li:first-child::after{background:linear-gradient( var(--navy) 0%, var(--borde) 100%)} /* `justify-self:start`, o la píldora se estira a toda la columna: en una rejilla un hijo ocupa su celda entera aunque sea `inline-flex`. */ .doc .ruta b{grid-column:2;grid-row:1;display:inline-flex; align-self:start;justify-self:start;width:auto; font:600 var(--t-micro) var(--f);letter-spacing:.11em;text-transform:uppercase; color:var(--txt3);background:var(--sup2);border:1px solid var(--borde); border-radius:999px;padding:4px 10px;margin:0 0 7px} .doc .ruta b::before{content:none} .doc .ruta li:last-child b{background:rgba(255,194,7,.14); border-color:rgba(255,194,7,.45);color:var(--amar-d)} .doc .ruta h4{grid-column:2;grid-row:2; font:800 var(--t-h4) var(--f);margin:0 0 4px;color:var(--navy)} .doc .ruta p{grid-column:2;grid-row:3; font-size:var(--t-sec);margin:0;color:var(--txt2);max-width:62ch} @media print{ .doc .ruta li::after{background:var(--app-ln)} } /* ── 4 · LA LÍNEA DEL MÉTODO TERMINA EN LA BOLITA ──────────────── El riel es UN solo elemento que abarca todo el contenedor, así que seguía después del último círculo. Lo recorta `efectos.js`, que mide dónde cae ese círculo: en CSS no hay forma de saberlo. Sin transición, o el recorte se ve crecer. */ .doc .eb-riel{transition:none} /* ── 5 · LA ACEPTACIÓN NO VIVE EN EL CUERPO ────────────────────── Así que se guarda y aparece cuando el cliente pulsa el botón, que es cuando esa constancia significa algo. La enseña `efectos.js`. En papel no hay botón que pulsar, así que ahí sale siempre: una hoja impresa a la que le falta una sección es una hoja incompleta. */ .doc .acp-guardada{display:none} .doc .acp-guardada.abierta{display:block;animation:acpEntra .45s ease} @keyframes acpEntra{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } } @media print{ .doc .acp-guardada{display:block !important;animation:none} } @media (prefers-reduced-motion:reduce){ .doc .acp-guardada.abierta{animation:none} } /* ── 6 · EL PUNTO DE CONTROL SE COMIÓ DOS SECCIONES ────────────── Y tenía razón: el precio aparecía CUATRO veces seguidas --Resumen, Punto de control, Su inversión y la tarjeta del Plan--, cuatro veces en cuatro pantallas seguidas. Ahora el Punto de control lleva, en este orden: · el titular · la inversión, UNA sola vez, con su desglose y su frase · lo que esa inversión viene a cerrar --el riesgo y el evento, que es lo único que el Resumen ejecutivo decía y no se repetía-- · qué cubre, con su tabla El cajón «¿Cómo se calcula su inversión?» NO se movió: sigue donde ya estaba, en Anexo y condiciones. en los anexos y condiciones, no quiero que me lo muevas de ahí"*. */ /* El titular, más contenido en escritorio: de 60 px a 40. En el teléfono no cambia, que ahí ya estaba bien. */ .doc .ptoh h3{font:800 clamp(28px,4.4cqw,40px)/1.1 var(--f); letter-spacing:-.03em;max-width:19ch} /* La inversión: la cifra a la izquierda, lo que significa a la derecha. Navy, porque es el dato que manda en la sección. */ .doc .inv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0; margin:20px 0 0;border-radius:var(--r);overflow:hidden;background:var(--navy)} .doc .inv-n{padding:24px 26px 22px} /* Con el id, como la frase: `.doc #s-pto p` pisaba también este rótulo y salía a 15 px en versalitas --medido--, el tamaño del texto corrido, cuando un rótulo son 11. Por eso «SU INVERSIÓN» se veía casi tan grande como la frase que explica la cifra. */ .doc #s-pto p.inv-et, .doc .inv-et{display:flex;align-items:center;gap:8px;margin:0 0 12px; font:600 var(--t-micro) var(--f);letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.6)} .doc .inv-et i{font-size:var(--i-rotulo);color:var(--amar)} .doc .inv-n > b{display:block;font:800 clamp(30px,4.8cqw,46px)/1 var(--f);color:#fff; letter-spacing:-.035em;font-variant-numeric:tabular-nums} .doc .inv-n > span{display:block;margin:9px 0 0;font-size:var(--t-min); color:rgba(255,255,255,.72)} .doc .inv-d{margin:14px 0 0;padding:13px 0 0;border-top:1px solid rgba(255,255,255,.14); display:flex;flex-direction:column;gap:7px} .doc .inv-d > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px; font-size:var(--t-min);color:rgba(255,255,255,.76)} .doc .inv-d > div u{text-decoration:none;font-variant-numeric:tabular-nums;color:#fff} .doc .inv-d > div.inv-q{justify-content:flex-start;color:rgba(255,255,255,.66)} .doc .inv-d > div.inv-tot{color:#fff} .doc .inv-d > div.inv-tot u{color:var(--amar);font-size:var(--t-sec)} .doc .inv-t{padding:24px 26px 22px;background:rgba(255,255,255,.06); border-left:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column; justify-content:center;gap:10px} /* ── POR QUÉ ESTOS DOS LLEVAN EL ID ── La frase decía `clamp(15px,1.9cqw,19px)` y en pantalla salía a 15. La pisaba `.doc #s-pto p{font-size:var(--t-p)}`, que lleva un ID y gana a cualquier cantidad de clases. O sea que esta frase NUNCA tuvo los 19 px que decía su regla: siempre fue texto corrido. Es la misma trampa que ya se cobró al subtítulo de bloque; aquí dentro, cualquier regla sobre un `

    ` tiene que llevar `#s-pto`. ── Y POR QUÉ AHORA ES MÁS GRANDE ── Y sí: al acortar las dos frases, el panel derecho se quedó medio vacío mientras el izquierdo lleva una cifra de 46 px. A 29 px la frase entra en diálogo con esa cifra en vez de leerse como su pie. Medido: pasa de 45 px de alto a 94, y el aire sobrante del panel baja de 205 a 157. */ .doc #s-pto .inv-t p, .doc .inv-t p{margin:0;font-size:clamp(20px,2.6cqw,29px);line-height:1.25;color:#fff; font-weight:600;letter-spacing:-.015em;text-wrap:balance} .doc #s-pto .inv-t small, .doc .inv-t small{font-size:var(--t-sec);color:rgba(255,255,255,.66);line-height:1.5} .doc .inv-t{gap:14px} /* La clase se llama `inv-tot` y no `tot`: `.tot` ya existe en las tablas del documento y pintaba una barra blanca aquí dentro. */ /* Lo que la inversión viene a cerrar: el riesgo declarado y lo que registró el levantamiento. Es lo único que el Resumen ejecutivo aportaba sin repetir a nadie, y por eso es lo que se conservó. */ .doc .rq{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:14px 0 0; background:var(--sup);border:1px solid var(--borde);border-radius:var(--r);overflow:hidden} .doc .rq-c{background:var(--sup);box-shadow:0 0 0 1px var(--borde);padding:14px 16px 13px; display:flex;flex-direction:column;gap:6px;min-width:0} .doc .rq-c dt{margin:0;display:flex;align-items:center;gap:7px; font:600 var(--t-micro) var(--f);letter-spacing:.09em;text-transform:uppercase;color:var(--txt3)} .doc .rq-c dt i{font-size:var(--i-linea);opacity:.6;color:var(--navy)} .doc .rq-c dd{margin:0;font-size:var(--t-sec);color:var(--navy);line-height:1.3} /* Y lo mismo: es un

    dentro de `#s-pto`, así que sin el id salía a 15 px en vez de a 12 --medido--. */ .doc #s-pto p.rq-p, .doc .rq-p{margin:11px 0 0;font-size:var(--t-min);color:var(--txt2)} /* El subtítulo que separa los tres bloques de la sección. */ .doc .sub-rot{margin:22px 0 10px;color:var(--txt);letter-spacing:-.01em} @container (max-width:719px){ .doc .inv{grid-template-columns:1fr} .doc .inv-t{border-left:0;border-top:1px solid rgba(255,255,255,.12)} .doc .rq{grid-template-columns:1fr} } /* En la hoja impresa la inversión y el riesgo no se parten. */ @media print{ .doc .inv, .doc .rq{break-inside:avoid} } /* ══════════════════════════════════════════════════════════════════ LA HOMOLOGACIÓN DE PESOS Y TAMAÑOS · 13/oct/2026 ────────────────────────────────────────────────────────────────── Fundamento, de las guías de Apple: un estilo de texto son TRES cosas --tamaño, peso e interlineado--, la jerarquía la hace el TAMAÑO, y el peso sirve para un escalón más, no para marcarlo todo. Una sola familia. Tres pesos: 400 para leer, 600 para destacar, 800 para mandar. Estas reglas NO están escritas a ojo. Salen de barrer la hoja y recoger cada selector que usaba un valor fuera de la lista, y luego de MEDIR el documento ya pintado para cazar los que se escapaban. Por eso son tantas, y por eso no se escapa ninguno. ══════════════════════════════════════════════════════════════════ */ /* ── LOS RÓTULOS Y ETIQUETAS BAJAN DE 800 A 600 ── Son 45 sitios. Un rótulo de 11 px en versalitas no necesita el peso de un titular: a 800 competía con él. */ .doc #s-pto thead th, .doc .ant-et, .doc .campos dt, .doc .ctx-g, .doc .ctx-rot, .doc .eb-d, .doc .eyeb, .doc .falta-et, .doc .fr-cod, .doc .hoja span, .doc .idx b, .doc .ms-c, .doc .ms-dias span, .doc .ms-fila b, .doc .ms-marca, .doc .niv .nom, .doc .niv .rec, .doc .pdf-pie, .doc .pie-vivo .rotulo, .doc .pied dt, .doc .pild, .doc .pm-et, .doc .rot, .doc .sello .top span, .doc .sigue, .doc .tbd-et, .doc .tbf-t span, .doc .tbr-et, .doc .tbr-pend, .doc .tbs-aj-t span, .doc .tbs-cel dt, .doc .tbs-rot, .doc .tbs-tit span, .doc .term-et, .doc .uni-foto p.sub, .doc .val h4 i, .doc .val-chip, .doc .val-nota, .doc .veh-m, .doc .vs .a::before, .doc .vs .b::before, .doc .vs .enc, .doc .vsx-chip, .doc .vsx-et, .doc .vsx-mini, .doc .rq-c dt, .doc .inv-et, .doc tbody td:not(#s-men td)::before, .doc tfoot td:not(#s-men td)::before, .doc th{font-weight:600} /* ── EL 700 NO EXISTE EN EL SISTEMA ── Medido sobre el documento pintado: quedaban siete pesos. El 700 de `b`, `strong` y `u` es el énfasis del navegador, no una decisión de diseño. El énfasis de esta casa es 600. */ .doc b, .doc strong, .doc u, .doc .tbs-sello, .doc .vcar-cuenta, .doc .tbr-ley span{font-weight:600} /* ── LAS CIFRAS BAJAN DE 900 A 800 ── Una cifra de 44 px ya destaca por tamaño; el peso máximo encima es gritar dos veces. Y van después del bloque de arriba a propósito: son las excepciones al 600 de `b`. */ .doc .pm-hero-n b, .doc .tbd-c b, .doc .tbf-anillo b, .doc .tbr-cifra b, .doc .tbr-niv, .doc .tbs-aj-t b, .doc .tbs-perf-t b, .doc .inv-n > b, .doc .inv-d > div.inv-tot u{font-weight:800} .doc .inv-t p, .doc .pm-hero-t p, .doc .inv-d > div.inv-tot{font-weight:600} .doc .rq-c dd{font-weight:800;font-size:var(--t-sec)} /* ── LOS TAMAÑOS QUE ESTABAN FUERA DE LA ESCALA ── Trece valores sueltos. Cada uno vuelve al peldaño que le toca. */ .doc .lede{font-size:var(--t-p)} /* era clamp(14.5–17.5) */ .doc .vs-vs{font-size:var(--t-h4)} /* era .56em */ .doc #s-men .pm-t table{font-size:var(--t-min)} .doc #s-men .pm-t thead th{font-size:var(--t-rot)} /* era 9px */ .doc .pm-pista{font-size:var(--t-rot)} /* era 11.5px */ .doc .cx dd, .doc .tbs-cel dd{font-size:var(--t-p)} /* eran 18px */ .doc .tbs-esc, .doc .tbs-esc span{font-size:var(--t-rot)} /* eran 10px */ /* ── POR QUÉ ESTE SELECTOR LLEVA EL ID ── El subtítulo de bloque se quedaba en 15 px por mucho que esta regla fuera después y tuviera más clases. La que ganaba es `.doc #s-pto p{font-size:var(--t-p)}`: lleva un ID, y un ID gana a cualquier cantidad de clases --por eso sólo cedía ante `!important`, que es tapar el problema, no resolverlo--. Los dos `.sub-rot` del documento viven precisamente dentro de `#s-pto`. Así que la regla se escribe con el mismo id y gana por especificidad, limpiamente. La segunda mitad cubre cualquier `.sub-rot` que mañana se use fuera de esa sección. */ .doc #s-pto p.sub-rot, .doc p.sub-rot{font-weight:800;font-size:var(--t-h4);line-height:1.25} .doc .ruta h4{font-size:var(--t-h4);font-weight:800} .doc .ruta p{font-size:var(--t-sec)} /* El titular de la comparativa usaba un 300 que no existe en el sistema: el contraste lo hace el peso de al lado, no un peso nuevo. */ .doc .vs-tit{font-weight:400;font-size:var(--t-h3)} .doc .vs-ly{font-weight:800;font-size:var(--t-h3)} /* ── LOS ICONOS: DE SIETE MEDIDAS A TRES ── */ .doc .vsx-ic{font-size:var(--i-linea)} .doc .cx i, .doc .tbs-cel dt i{font-size:var(--i-linea)} .doc .cx-ic, .doc .tbs-rot i, .doc .pm-et i, .doc .inv-et i{font-size:var(--i-rotulo)} .doc .vcar-nav button, .doc .veh i, .doc .port .port-prelim i{font-size:var(--i-grande)} /* ── 8 · NADA SE SALE DEL DOCUMENTO ────────────────────────────── Hallado midiendo, y sólo aparece cuando el carrusel ya está montado: la tarjeta ACTIVA de Valor agregado se abre a 626 px y se salía 36 px por la derecha en escritorio y 26 en iPad, lo que le daba al documento un desplazamiento horizontal que no debería existir. En teléfono no pasaba. Se recorta en `.pad`, que es el canal de la sección. Se probó antes en `.val` y en la tarjeta misma y ninguno de los dos lo contiene. `clip` y no `hidden` a propósito: `hidden` crea un contenedor de desplazamiento y el pie de precio dejaría de quedarse pegado abajo. Comprobado con `clip`: el pie sigue `sticky`, las tablas del plan siguen deslizándose con el dedo --su `overflow-x:auto` funciona dentro de un padre recortado-- y el eje vertical se queda en `visible`, que es lo que hace falta para que nada se corte de alto. En papel NO se recorta: ahí no hay desplazamiento que corregir y lo que se saliera se perdería para siempre. */ .doc[data-v="web"] .sec > .pad{overflow-x:clip} @media print{ .doc .sec > .pad{overflow-x:visible} } /* ── 9 · LOS RESIDUOS QUE SALIERON AL MEDIR ────────────────────── Esto no se adivinó: se pintó el documento en 1180, 834 y 390 px y se le preguntó a cada elemento qué peso y qué tamaño llevaba. Quedaban siete en 700, uno en 900 y quince en 14.5 px. Ésta es la lista, con el sitio exacto de cada uno. */ .doc .tbr-cifra span, .doc .tbs-esc span{font-weight:600} /* La cifra del calendario: es cifra, así que 800, no 900. */ .doc .tbs-cal-v b{font-weight:800} /* Las celdas de dinero iban a 14.5 px, que no existe en la escala. Van a Texto (15) y no a Descripción (13): son importes, y bajarlos los haría menos legibles justo donde más se miran. */ .doc td.n{font-size:var(--t-p)} /* El nombre del perfil KRYPTOS iba a 23 px: es un subtítulo. */ .doc .tbs-perf-t b{font-size:var(--t-h4)} /* ── 10 · EL BOTÓN DE LAS PROPUESTAS YA ENVIADAS ───────────────── Hallado midiendo, y no se habría visto leyendo el archivo: las ligas enviadas llevan su documento CONGELADO, y ahí el botón del pie sigue teniendo las clases `destello palpita` que el motor ya no escribe. Sus reglas genéricas --que siguen vivas más arriba porque las usan otros botones-- le pintarían encima el resplandor cónico y el halo que late: justo las dos capas que hacían que el botón pareciera dos botones encimados, y que es lo que se rechazó. Así que aquí se apagan, pero SÓLO sobre este botón y SÓLO dentro del pie. Las demás piezas que usan `.destello` siguen intactas. */ .doc .pie-vivo .btn.btn-marca.destello::before{display:none} .doc .pie-vivo .btn.btn-marca.palpita{animation:none} /* ── EL INTERLINEADO, QUE ANTES NO ESTABA EN NINGÚN SITIO ── Es la tercera pata del estilo de texto. Sin él, dos textos del mismo tamaño respiran distinto según quién los escribiera. */ .doc .rot{line-height:1.2} .doc h3{line-height:1.15} .doc h4{line-height:1.25} .doc p{line-height:1.6} .doc .ptoh h3{line-height:1.05} /* ══════════════════════════════════════════════════════════════════ Y LO QUE NADA DE ESTO DEBE HACERLE AL PDF ────────────────────────────────────────────────────────────────── La hoja que se descarga tiene su propio respiro --`.doc[data-v="pdf"] .pad{padding:34px 45px !important}`-- y manda él, porque lleva `!important`. Pero hay dos piezas que NO son `.pad` y se habrían colado con el aire de pantalla: la banda del titular del Punto de control y la aceptación guardada. Aquí se les pone su medida de papel. Se comprueba generando el PDF, no leyendo el archivo. ══════════════════════════════════════════════════════════════════ */ .doc[data-v="pdf"] .sec-apost .ptoh{padding:34px 45px 8px !important} .doc[data-v="pdf"] .sec-apost > .pad{padding-top:10px !important} /* En la hoja no hay botón que pulsar: la constancia sale siempre. */ .doc[data-v="pdf"] .acp-guardada{display:block !important;animation:none} /* ── LAS TARJETAS DE VALOR NO CABÍAN DE DOS EN DOS ── Visto en el PDF: páginas con dos tarjetas arriba y el resto en blanco. Medido: la hoja carta con márgenes de 12 mm deja 965 px útiles, y el navegador se come otro tanto con su cabecera y su pie. Cada tarjeta medía 461 px, así que una fila son 473 y dos filas 946: entraban por los pelos sobre el papel teórico y NO entraban sobre el real. Cuando una fila no cabe salta entera --cada tarjeta lleva `break-inside: avoid`, y así debe ser: una tarjeta partida es peor--, y eso es lo que dejaba media página vacía. La foto pasa de proporción libre a 150 px de alto. La tarjeta baja a 416 y la fila a 428, así que dos filas son 856: caben con 44 px de holgura incluso descontando lo que se queda el navegador. La foto no se deforma, sigue con `object-fit:cover`; se recorta un poco más. Y `align-items:start` para que una tarjeta corta no se estire hasta la altura de su vecina larga: eso era espacio desperdiciado dentro de cada fila. */ /* ── CÓMO NO HACERLO, QUE YA SE INTENTÓ ── La primera versión ponía `aspect-ratio:auto;height:150px`. Reventó las tarjetas: al quitar la proporción, la altura pasó a decidirla `.doc .vcar.on .beam .beam-foto{height:100%}`, que tiene más peso, y la foto creció sin control hasta montarse encima del texto. La altura de esta foto SIEMPRE la ha fijado su proporción. Así que no se le quita: se le cambia. 16/6.8 sobre los 357 px de ancho de la columna da los ~151 px que hacían falta, sin pelear con ninguna regla de `height`. */ .doc[data-v="pdf"] .beam-foto{aspect-ratio:16/6.8} .doc[data-v="pdf"] .val{align-items:start} @media print{ .doc .beam-foto{aspect-ratio:16/6.8} .doc .val{align-items:start} } /* ── LA TABLA DEL PUNTO DE CONTROL SE CORTABA EN EL PDF ── Hallado al auditar la hoja descargada, no leyendo el archivo: en papel la tabla pedía 799 px y sólo tenía 726, así que la columna «Subtotal» se iba fuera de la hoja. Y no era por los cambios de esta ronda: medido con la letra vieja, con la nueva y con una más chica, pedía los mismos 799 px en los tres casos. Venía de antes. En pantalla la tabla se desliza con el dedo y por eso nadie lo veía. En papel no hay dedo: lo que no cabe, no existe. Se le quita el ancho mínimo, se deja que el texto parta y se aprieta el relleno. Comprobado: pasa a 726 px justos y las otras tres tablas del documento siguen cabiendo igual que antes. */ /* Los `!important` no son capricho: el motor escribe `min-width:120px` y `white-space:nowrap` EN LÍNEA sobre las celdas, y un estilo en línea le gana a cualquier regla que no lleve `!important`. Sin ellos la tabla seguía pidiendo 738 px. Y los anchos van en porcentaje con `table-layout:fixed` porque, si no, la píldora «Punto de Control» fija sola el ancho de su columna y desbarata el reparto. Medido: las cuatro tablas pasan a 726 px justos. */ .doc[data-v="pdf"] .tenv{overflow:visible} .doc[data-v="pdf"] .tenv table{min-width:0 !important;width:100% !important;table-layout:fixed} .doc[data-v="pdf"] .tenv th, .doc[data-v="pdf"] .tenv td{white-space:normal !important;overflow-wrap:break-word; padding:5px 6px !important;min-width:0 !important;box-sizing:border-box} .doc[data-v="pdf"] .tenv .pild{white-space:normal;display:inline-block;max-width:100%} .doc[data-v="pdf"] #s-pto .tenv th:nth-child(1),.doc[data-v="pdf"] #s-pto .tenv td:nth-child(1){width:25%} .doc[data-v="pdf"] #s-pto .tenv th:nth-child(2),.doc[data-v="pdf"] #s-pto .tenv td:nth-child(2){width:9%} .doc[data-v="pdf"] #s-pto .tenv th:nth-child(3),.doc[data-v="pdf"] #s-pto .tenv td:nth-child(3){width:8%} .doc[data-v="pdf"] #s-pto .tenv th:nth-child(4),.doc[data-v="pdf"] #s-pto .tenv td:nth-child(4){width:15%} .doc[data-v="pdf"] #s-pto .tenv th:nth-child(5),.doc[data-v="pdf"] #s-pto .tenv td:nth-child(5){width:13%} .doc[data-v="pdf"] #s-pto .tenv th:nth-child(n+6),.doc[data-v="pdf"] #s-pto .tenv td:nth-child(n+6){width:10%} /* Y lo mismo cuando se imprime de verdad, no sólo al descargar. */ @media print{ .doc .tenv{overflow:visible} .doc .tenv table{min-width:0 !important;width:100% !important;table-layout:fixed} .doc .tenv th,.doc .tenv td{white-space:normal !important;overflow-wrap:break-word; padding:5px 6px !important;min-width:0 !important;box-sizing:border-box} .doc .tenv .pild{white-space:normal;display:inline-block;max-width:100%} .doc #s-pto .tenv th:nth-child(1),.doc #s-pto .tenv td:nth-child(1){width:25%} .doc #s-pto .tenv th:nth-child(2),.doc #s-pto .tenv td:nth-child(2){width:9%} .doc #s-pto .tenv th:nth-child(3),.doc #s-pto .tenv td:nth-child(3){width:8%} .doc #s-pto .tenv th:nth-child(4),.doc #s-pto .tenv td:nth-child(4){width:15%} .doc #s-pto .tenv th:nth-child(5),.doc #s-pto .tenv td:nth-child(5){width:13%} .doc #s-pto .tenv th:nth-child(n+6),.doc #s-pto .tenv td:nth-child(n+6){width:10%} } /* Y el pie de precio no existe en papel, así que su botón grande tampoco: ya lo esconde `.doc[data-v="pdf"] .pie-vivo{display:none}`. Esta línea sólo deja constancia de que se revisó. */