/* ═══════════════════════════════════════════════════════════════════════ FEDATARIUM · el sistema visual del sitio publico ═══════════════════════════════════════════════════════════════════════ CUATRO DECISIONES QUE CONDICIONAN TODO LO DEMAS 1 · SE QUEDA LORA. El panel entero la usa y la coherencia entre la web y el producto vale mas que la novedad. Lo que cambia no es la fuente, es el atreverse con el tamano. 2 · GRANO DE PAPEL, NO DEGRADADO CON GRANO. El fondo SE COMPORTA como papel: filtro SVG incrustado, menos de un kilobyte, escala sin perder nitidez. 3 · CERO JAVASCRIPT DE ANIMACION. Todo por desplazamiento en CSS, que corre en el hilo compositor. Un notario en Guayaquil puede estar en un Android normal con 4G. 4 · CADA COLOR DE TEXTO VIVE CON SU FONDO. Esta es nueva y nace de un fallo real: el fondo del documento se volvio oscuro y las paginas legales se quedaron con texto azul tinta encima, a 1,22 de contraste. Invisibles, y publicadas. Desde ahora ninguna superficie se declara sin declarar a la vez el color del texto que lleva encima. Y una regla que atraviesa el archivo: cada margen y cada alto es multiplo entero de 8. ═══════════════════════════════════════════════════════════════════════ */ /* --------------------------------------------------------------------------- LAS FUENTES VAN DENTRO, NO SE PIDEN A GOOGLE --------------------------------------------------------------------------- Tres motivos: la politica de seguridad del navegador puede quedarse estricta, la pagina funciona sin salida hacia Google, y nadie de fuera se entera de quien visita el sitio de una notaria. Son 155 KB en total y van con `font-display: optional`, NO con `swap`: swap produce un parpadeo cuando la fuente llega tarde, y en una pagina que abre con un titular de cien pixeles ese parpadeo se ve enorme. --------------------------------------------------------------------------- */ /* ═══════════════════════════════════════════════════════════════════════ POR QUÉ `block` Y NO `optional` ═══════════════════════════════════════════════════════════════════════ ESTA ERA LA CAUSA DEL PARPADEO ENTRE PÁGINAS, y precargar las fuentes no la arregló porque el problema no era la descarga. Con `optional`, el navegador espera unos 100 ms y luego DECIDE: · si la fuente no llegó, usa la de respaldo y NO la cambia en toda esa página, aunque llegue un segundo después; · si llegó, usa la buena. Y ahí está el fallo: la PRIMERA página se abre sin la fuente en caché, no llega en 100 ms, y se pinta con Georgia. Al cambiar de página la fuente ya está en caché, llega al instante, y esa página SÍ usa Lora. O sea que no es un parpadeo dentro de una página: es que cada página se ve con una tipografía distinta. Por eso lo que «parpadeaba» cambiaba cada vez: a veces las negritas, a veces el tamaño, a veces el botón. Con `block` el navegador SIEMPRE espera a la fuente buena, y como están precargadas llegan antes de la primera pintura: no hay espera visible y todas las páginas se ven igual. ═══════════════════════════════════════════════════════════════════════ */ @font-face { font-family:'Lora'; font-style:normal; font-weight:400; font-display:block; src:url('/fuentes/lora-latin-400-normal.woff2') format('woff2'); } @font-face { font-family:'Lora'; font-style:normal; font-weight:500; font-display:block; src:url('/fuentes/lora-latin-500-normal.woff2') format('woff2'); } @font-face { font-family:'Lora'; font-style:normal; font-weight:600; font-display:block; src:url('/fuentes/lora-latin-600-normal.woff2') format('woff2'); } @font-face { font-family:'Lora'; font-style:normal; font-weight:700; font-display:block; src:url('/fuentes/lora-latin-700-normal.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:block; src:url('/fuentes/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:block; src:url('/fuentes/inter-latin-500-normal.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:block; src:url('/fuentes/inter-latin-600-normal.woff2') format('woff2'); } /* ═══════════════════════════════════════════════════════════════════════ LOS TOKENS ═══════════════════════════════════════════════════════════════════════ */ :root { --hondo: #0E192E; --tinta: #1B2A4A; --tinta-suave: #33456B; --laton: #A9812E; /* El laton de las lineas y los filos no sirve para TEXTO sobre claro: #A9812E sobre crema da 3,42 y el minimo es 4,5. Los rotulos van en versalitas de 13 pixeles, que no cuentan como texto grande. */ --laton-texto: #8A6A24; --brillo: #D9B871; --papel: #F3F0E1; --crema: #FBFAF4; --carta: #FFFFFF; --texto: #242621; --gris: #63615A; --linea: #DCD6C2; /* Texto sobre oscuro, nombrado aparte a proposito: es la unica forma de no volver a mezclarlo con el de arriba. */ --sobre-hondo: #C6D0E4; --sobre-hondo-tenue: #93A0BA; --borde-hondo: rgba(255,255,255,.11); /* Escala fluida, subida un escalon entero: el cuerpo se quedaba corto en monitores grandes y las notas al pie eran directamente pequenas. */ --display: clamp(2.9rem, 9.2vw, 8rem); --titulo: clamp(1.95rem, 4.4vw, 3.5rem); --subtitulo: clamp(1.2rem, 2.1vw, 1.75rem); --cuerpo: clamp(1.0625rem, 1.2vw, 1.25rem); --menor: clamp(.9375rem, 1vw, 1.0625rem); --micro: .8125rem; --e2:16px; --e3:24px; --e4:40px; --e5:64px; --e6:96px; --e7:144px; --curva: cubic-bezier(.22,1,.36,1); --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } /* EL PASO DE UNA PAGINA A OTRA, SIN CORTE. Son tres documentos HTML de verdad, no una aplicacion de una sola pagina: cada uno se sirve solo, se puede enlazar y se puede leer sin JavaScript. La transicion entre documentos deja que el navegador funda uno con otro sin renunciar a nada de eso. Donde no se admita, el salto es el de siempre. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: fundir-fuera .22s ease both; } ::view-transition-new(root) { animation: fundir-dentro .32s ease both; } @keyframes fundir-fuera { to { opacity:0; } } @keyframes fundir-dentro { from { opacity:0; } } /* La cabecera es la misma pieza en las tres, asi que se transporta entera y sin animarse: nada de fundirla ni de moverla, solo dejarla donde esta. */ .cabecera { view-transition-name: cabecera; } ::view-transition-group(cabecera) { animation-duration: .01ms; } ::view-transition-old(cabecera) { display: none; } ::view-transition-new(cabecera) { animation: none; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation:none; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; /* EL SALTO DEL BOTON AL CAMBIAR DE PESTANA. La portada es larga y lleva barra de desplazamiento; las paginas legales no siempre. Eso cambia el ancho util de la ventana en unos quince pixeles, y como la cabecera se transporta de una pagina a otra, llegaba con un ancho y se iba a otro: el navegador lo resolvia escalando el grupo entero, y lo que mas se nota al escalar es el boton. Reservando siempre el hueco de la barra, las dos paginas miden lo mismo y no hay nada que escalar. */ scrollbar-gutter: stable; } body { margin: 0; background: var(--hondo); color: var(--sobre-hondo); font: 400 var(--cuerpo)/1.65 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } body::before { content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04; background-image: var(--grano); } /* ═══════════════════════════════════════════════════════════════════════ LA RETICULA ═══════════════════════════════════════════════════════════════════════ Doce columnas, pero NO en partes iguales: aqui una columna manda y las otras acompanan. */ .lienzo { width: min(100% - var(--e4), 1280px); margin-inline: auto; } .rejilla { display:grid; grid-template-columns: repeat(12, 1fr); gap: var(--e3); } .ancho-7 { grid-column: 1 / 8; } .ancho-6 { grid-column: 1 / 7; } .ancho-4 { grid-column: 9 / 13; } /* ═══════════════════════════════════════════════════════════════════════ TIPOGRAFIA ═══════════════════════════════════════════════════════════════════════ */ h1, h2, h3 { font-family:'Lora', Georgia, 'Times New Roman', serif; font-weight:600; text-wrap: balance; margin:0; } h1 { font-size: var(--display); line-height:.95; letter-spacing:-.028em; } h2 { font-size: var(--titulo); line-height:1.08; letter-spacing:-.018em; } h3 { font-size: var(--subtitulo); line-height:1.22; } p { text-wrap: pretty; margin: 0 0 var(--e2); max-width: 64ch; } .rotulo { font-size: var(--micro); font-weight:600; letter-spacing:.18em; text-transform:uppercase; display:block; margin-bottom: var(--e2); } .nota { font-size: var(--menor); line-height:1.6; } /* ═══════════════════════════════════════════════════════════════════════ LAS SUPERFICIES · cada fondo trae su color de texto ═══════════════════════════════════════════════════════════════════════ Esto es lo que impide que se repita el fallo de las paginas legales. No existe «poner un fondo»: existe poner una superficie, y una superficie sabe de que color va la letra que lleva encima. */ .sup-hondo, .sup-tinta { background: var(--hondo); color: var(--sobre-hondo); } .sup-tinta { background: var(--tinta); } .sup-crema { background: var(--crema); color: var(--texto); } .sup-hondo h1, .sup-hondo h2, .sup-hondo h3, .sup-tinta h1, .sup-tinta h2, .sup-tinta h3 { color: var(--crema); } .sup-hondo .rotulo, .sup-tinta .rotulo { color: var(--brillo); } .sup-hondo p, .sup-tinta p { color: var(--sobre-hondo); } .sup-hondo .nota, .sup-tinta .nota { color: var(--sobre-hondo-tenue); } .sup-hondo strong, .sup-tinta strong { color: var(--crema); } .sup-hondo a, .sup-tinta a { color: var(--brillo); text-decoration-color: rgba(217,184,113,.45); } .sup-hondo a:hover, .sup-tinta a:hover { color: var(--crema); text-decoration-color: var(--crema); } .sup-papel h1, .sup-papel h2, .sup-papel h3, .sup-crema h1, .sup-crema h2, .sup-crema h3 { color: var(--tinta); } .sup-papel .rotulo, .sup-crema .rotulo { color: var(--laton-texto); } .sup-papel p, .sup-crema p { color: var(--texto); } .sup-papel .nota, .sup-crema .nota { color: var(--gris); } .sup-papel strong, .sup-crema strong { color: var(--tinta); } .sup-papel a, .sup-crema a { color: var(--tinta); text-decoration-color: var(--linea); } .sup-papel a:hover, .sup-crema a:hover { text-decoration-color: var(--laton); } a { text-underline-offset: .2em; } /* El contador vive en un `::after` de CSS y un lector de pantalla no siempre lo anuncia. La cifra va tambien en el texto, escondida a la vista. */ .visualmente-oculto { position:absolute; width:1px; height:1px; overflow:hidden; clip-path: inset(50%); white-space:nowrap; } /* ═══════════════════════════════════════════════════════════════════════ MOVIMIENTO ═══════════════════════════════════════════════════════════════════════ Si el navegador no entiende `animation-timeline`, ignora la regla y el contenido se ve. Nunca al reves. */ @keyframes surgir { from { opacity:0; transform: translateY(26px); } to { opacity:1; transform:none; } } @keyframes surgir-lado { from { opacity:0; transform: translateX(-22px); } to { opacity:1; transform:none; } } @keyframes crecer { from { transform: scaleX(0); } to { transform: scaleX(1); } } @supports (animation-timeline: view()) { /* `entry 25%` y no `entry 5%`: con 5% la animacion se consumia ANTES de que el ojo llegara, que es justo lo que hace que no se note. */ /* El escalonado va por RANGO, no por reloj: sigue atado al dedo. */ .escalona > *:nth-child(1) { animation-range: entry 25% cover 40%; } } .progreso { position:fixed; top:0; left:0; right:0; height:2px; z-index:90; background: linear-gradient(90deg, var(--laton), var(--brillo)); transform-origin:left; transform: scaleX(0); } @supports (animation-timeline: scroll()) { .progreso { animation: crecer linear both; animation-timeline: scroll(root block); } } /* ═══════════════════════════════════════════════════════════════════════ LA CABECERA ═══════════════════════════════════════════════════════════════════════ Arranca transparente sobre la apertura oscura y se vuelve papel al bajar. Es lo que la convierte en la puerta de la empresa y no en un folleto. */ .cabecera { position:fixed; top:0; left:0; right:0; z-index:80; display:flex; align-items:center; justify-content:space-between; gap: var(--e2); padding: 14px max(var(--e3), env(safe-area-inset-left)); /* EL MISMO MATERIAL QUE EL ZOCALO DE ABAJO. Eran dos vidrios distintos en la misma pantalla y se notaba. Ahora la barra de arriba y la de abajo son la misma pieza, una boca arriba y otra boca abajo. Lleva las dos cosas: filo de un pixel y sombra baja, porque sobre una trama en movimiento una sola no llega a despegarla. */ /* ── UNA CAPA OPACA DEBAJO DEL VIDRIO ────────────────────────────── El vidrio solo era translúcido, así que en las páginas con la hoja clara la barra se aclaraba al desplazar y quedaba crema con letras oscuras: la misma barra de dos colores según la página, y encima cambiando a mitad de scroll. Ahora hay un fondo sólido debajo y el gradiente encima: se conserva el material, pero el color ya no depende de lo que pase por detrás. */ background: linear-gradient(180deg, rgba(6,12,24,.66), rgba(6,12,24,.52)), var(--hondo); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); border-bottom: 1px solid rgba(255,255,255,.07); box-shadow: 0 10px 30px -12px rgba(0,0,0,.55); transition: background .35s ease, box-shadow .35s ease, border-color .35s ease; } @supports (animation-timeline: scroll()) { @keyframes posar-cabecera { from { background: linear-gradient(180deg, rgba(6,12,24,.66), rgba(6,12,24,.52)); box-shadow: 0 10px 30px -12px rgba(0,0,0,.55); } to { background: color-mix(in srgb, var(--crema) 95%, transparent); box-shadow: 0 1px 0 var(--linea), 0 10px 30px -12px rgba(10,18,34,.22); } } .cabecera { animation: posar-cabecera linear both; animation-timeline: scroll(root block); animation-range: 40px 140px; } } .marca { display:flex; align-items:center; gap:10px; text-decoration:none; } /* El logo va en CREMA, no en blanco. `invert(1)` da blanco puro y sobre un fondo tan oscuro el blanco puro vibra; el crema se posa. Se consigue apagando el logo a negro y volviendolo a subir con sepia y matiz. */ .marca img { width:30px; height:30px; filter: brightness(0) invert(.97) sepia(.24) saturate(.55) hue-rotate(3deg); } .marca span { font-family:'Lora', Georgia, serif; font-size:1.125rem; font-weight:600; letter-spacing:-.01em; color: var(--crema); } @supports (animation-timeline: scroll()) { @keyframes marca-texto { from { color: var(--crema); } to { color: var(--tinta); } } @keyframes marca-logo { from { filter: brightness(0) invert(.97) sepia(.24) saturate(.55) hue-rotate(3deg); } to { filter:none; } } .cabecera .marca span { animation: marca-texto linear both; animation-timeline: scroll(root block); animation-range: 40px 140px; } .cabecera .marca img { animation: marca-logo linear both; animation-timeline: scroll(root block); animation-range: 40px 140px; } } .menu { display:flex; align-items:center; gap: var(--e3); } .menu a { font-size: var(--micro); text-decoration:none; } /* ═══════════════════════════════════════════════════════════════════ LAS TRES PESTANAS ═══════════════════════════════════════════════════════════════════ Eran dos anclas de esta pagina y un enlace a otra, escritos igual, y nada avisaba de cual cambiaba de documento. Ahora son tres destinos del mismo rango y la pagina en la que estas se marca sola. El recuadro no aparece: se DIBUJA de izquierda a derecha, como se traza una linea a mano. Va en laton, el mismo del rotulo de la portada. Y la letra crece un pelo y se despega con una sombra corta: el conjunto se lee como que la pestana se levanta un milimetro de la barra. */ .pestanas { display:flex; align-items:center; gap:6px; } .separador { width:1px; height:18px; flex:none; margin: 0 4px; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0)); } .boton-panel svg { width:15px; height:15px; flex:none; margin-left:-1px; } .pestana { position:relative; padding: 8px 13px; border-radius: 9px; font-size: var(--micro); font-weight:600; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; white-space:nowrap; transition: color .22s ease, transform .22s var(--curva), text-shadow .22s ease; } /* UN SUBRAYADO que se traza de izquierda a derecha, como se pasa la regla por debajo de una palabra. Antes era un recuadro entero y pesaba demasiado para una barra de navegacion. */ .pestana::after { content:''; position:absolute; left:11px; right:11px; bottom:2px; height:2px; border-radius:2px; /* El mismo laton del rotulo «Fedatarium S.A.S. · Ecuador»: sobre oscuro ese laton es `--brillo`, no `--laton`, que se apagaria. */ background: var(--brillo); transform: scaleX(0); transform-origin: left center; transition: transform .34s var(--curva), opacity .2s ease; opacity:0; pointer-events:none; } .pestana:hover::after, .pestana:focus-visible::after { transform: scaleX(1); opacity:1; } .pestana:hover, .pestana:focus-visible { transform: scale(1.055); text-shadow: 0 2px 8px rgba(0,0,0,.45); } /* ═══════════════════════════════════════════════════════════════════════════ LOS GRUPOS DE LA BARRA ═══════════════════════════════════════════════════════════════════════════ Con seis páginas ya no caben todas arriba. Se agrupan en «UAFE» y «Legal», y con eso la barra vuelve a caber incluso en un teléfono de 390. ABRE DE DOS FORMAS, Y CADA UNA DONDE TIENE SENTIDO: · con el dedo o con el teclado, porque es un
de verdad: eso funciona en todas partes sin una línea de JavaScript, que además esta web no puede ejecutar (`script-src 'none'`). · con el ratón, al pasar por encima, añadido solo donde HAY ratón con la consulta `hover: hover`. En un teléfono esa regla no se aplica, y así se evita el clásico «el primer toque abre y el segundo navega». ═══════════════════════════════════════════════════════════════════════════ */ .grupo { position: relative; } .grupo > details { display: inline-flex; } .grupo summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .grupo summary::-webkit-details-marker { display: none; } .grupo summary svg { width: 13px; height: 13px; flex: none; opacity: .6; transition: transform .22s var(--curva), opacity .22s ease; } .grupo:has(details[open]) summary svg { transform: rotate(180deg); opacity: 1; } /* ═══════════════════════════════════════════════════════════════════════════ LA HOJA VA FUERA DEL
, Y ESA ES TODA LA HISTORIA ═══════════════════════════════════════════════════════════════════════════ El primer intento la puso DENTRO, y el hover no abría nada. La causa es que UN
CERRADO NO ESCONDE SU CONTENIDO CON CSS: lo esconde el navegador, a nivel de elemento. Un `display: block` desde fuera no lo saca, porque no hay ningún `display: none` que ganar. Así que la hoja es HERMANA del
, no hija: · el
se queda solo con su rótulo, y sirve para el TOQUE y el teclado, que es lo que funciona en un teléfono · la hoja se enseña cuando el grupo está señalado (hover) o cuando el
está abierto, con `:has()` Dos disparadores, un solo trozo de HTML, y sin JavaScript. */ .grupo-hoja { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; display: none; min-width: 232px; padding: 7px; border-radius: 12px; background: #16233C; border: 1px solid rgba(255,255,255,.10); box-shadow: 0 10px 34px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.3); } .grupo:has(details[open]) > .grupo-hoja { display: block; } .grupo-hoja a { display: block; padding: 9px 12px; border-radius: 8px; font-size: var(--micro); font-weight: 500; letter-spacing: .02em; text-transform: none; white-space: nowrap; color: rgba(255,255,255,.82); text-decoration: none; transition: background .18s ease, color .18s ease; } .grupo-hoja a:hover, .grupo-hoja a:focus-visible { background: rgba(255,255,255,.07); color: #fff; } /* La sección en la que ya estás lleva su grupo marcado, como la pestaña. */ .grupo[data-aqui] summary { color: var(--brillo); } /* ═══════════════════════════════════════════════════════════════════════════ CON RATÓN MANDA EL RATÓN ═══════════════════════════════════════════════════════════════════════════ Basta con señalar: no hay que pulsar. Y si uno quedó abierto de una pulsación anterior, al señalar OTRO el primero recoge su hoja, para que nunca haya dos abiertas montándose. En un teléfono esta regla entera no existe: allí manda el toque, y el
se encarga. */ @media (hover: hover) { /* ── CON RATÓN, EL TÍTULO NO SE PULSA ────────────────────────────────── `UAFE` y `Legal` no llevan a ninguna parte: son rótulos de un grupo. Con un `
`, pulsarlos lo dejaba ABIERTO PARA SIEMPRE, y entonces la hoja se quedaba colgando aunque el ratón se fuera a otro sitio. `pointer-events: none` quita solo el clic del puntero: el hover del grupo entero sigue abriendo, y el TECLADO sigue funcionando (ahí sí hace falta poder abrirlo con Intro, porque no hay hover). En un teléfono esta regla no existe y manda el toque. */ /* ── EL RÓTULO NO SE PULSA, PERO SIGUE SINTIENDO EL RATÓN ──────────── `UAFE` y `Legal` no llevan a ninguna parte: son rótulos de grupo. Con un `
`, pulsarlos lo dejaba ABIERTO PARA SIEMPRE y la hoja se quedaba colgando aunque el ratón se fuera. El arreglo es `pointer-events: none` en el ``, NO en el `
`: quitándoselo al `
` entero, el `:hover` del grupo dejaba de dispararse y el menú no abría de ninguna manera. Se probó, y por eso está escrito aquí. Con esto: el hover del grupo abre, el clic no clava nada, y el teclado sigue pudiendo abrirlo con Intro (que ahí sí hace falta, porque quien va con teclado no tiene hover). */ .grupo summary { pointer-events: none; } .grupo:hover > .grupo-hoja { display: block; } .grupo:hover summary svg { transform: rotate(180deg); opacity: 1; } .pestanas:hover .grupo:not(:hover) > .grupo-hoja { display: none; } /* Un puente invisible entre el rótulo y la hoja: sin él, el cursor cruza un hueco de ocho píxeles y la hoja se cierra a mitad de camino. */ .grupo-hoja::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } } /* La pagina en la que ya estas no se ofrece como destino. */ .pestana[aria-current="page"] { color: var(--brillo); } .pestana[aria-current="page"]::after { transform: scaleX(1); opacity:1; background: var(--brillo); } /* Si el dedo se va a otra pestana, la actual suelta su subrayado: en cada momento hay una sola marcada, la que vas a pulsar. Al salir vuelve sola, porque es la misma transicion recorrida al reves. */ .pestanas:has(.pestana:hover) .pestana[aria-current="page"]:not(:hover)::after { transform: scaleX(0); opacity:0; transform-origin: right center; } .menu a:not(.boton) { color: var(--sobre-hondo-tenue); } .menu a:not(.boton):hover { color: var(--crema); } @supports (animation-timeline: scroll()) { @keyframes menu-texto { from { color: var(--sobre-hondo-tenue); } to { color: var(--gris); } } .cabecera .menu a:not(.boton):not([aria-current]) { animation: menu-texto linear both; animation-timeline: scroll(root block); animation-range: 40px 140px; } } /* ═══════════════════════════════════════════════════════════════════════ BOTONES ═══════════════════════════════════════════════════════════════════════ */ .boton { display:inline-flex; align-items:center; gap:8px; background: var(--tinta); color: var(--crema); font-size: var(--menor); font-weight:500; padding: 12px 20px; border-radius:999px; text-decoration:none; white-space:nowrap; border:1px solid var(--tinta); transition: transform .16s var(--curva), background .2s ease, box-shadow .25s ease, border-color .2s ease; } .boton:hover { background: var(--laton); border-color: var(--laton); color:#14203A; transform: scale(1.045); box-shadow: 0 8px 26px rgba(169,129,46,.38), 0 2px 8px rgba(0,0,0,.22); } .boton:active { transform: scale(.985); } /* Sobre oscuro se invierte: papel con letra tinta. */ .sup-hondo .boton, .sup-tinta .boton, .portada .boton { background: var(--crema); color: var(--tinta); border-color: var(--crema); } /* EL HOVER DEL BOTON. Subia y se aclaraba, que es el hover de cualquier plantilla. Ahora se pinta de laton, crece un pelo y suelta una sombra teñida del mismo laton: se lee como que se levanta de la barra, no como que cambia de color. */ .cabecera .boton:hover, .sup-hondo .boton:hover, .sup-tinta .boton:hover, .portada .boton:hover { background: var(--laton); border-color: var(--brillo); color: #14203A; transform: scale(1.045); box-shadow: 0 8px 26px rgba(169,129,46,.42), 0 2px 8px rgba(0,0,0,.35); } /* ═══════════════════════════════════════════════════════════════════════ EL TECLADO ═══════════════════════════════════════════════════════════════════════ En una pagina que se recorre con Tab, no ver donde estas es no poder usarla. */ a:focus-visible, button:focus-visible, .boton:focus-visible { outline: 2px solid var(--laton); outline-offset:3px; border-radius:2px; } .sup-hondo a:focus-visible, .sup-tinta a:focus-visible, .portada a:focus-visible, .cabecera a:focus-visible, .pie a:focus-visible { outline-color: var(--brillo); } /* Quien llega con teclado se come la cabecera entera antes del texto. */ .salto { position:absolute; left: var(--e3); top:10px; z-index:100; transform: translateY(-200%); transition: transform .18s var(--curva); } .salto:focus { transform: translateY(0); } /* ═══════════════════════════════════════════════════════════════════════ BLOQUES A SANGRE ═══════════════════════════════════════════════════════════════════════ */ .bloque { position:relative; z-index:2; padding: clamp(88px, 10vw, 152px) 0; } /* La costura entre bloques: un filo de laton que crece al entrar. Es lo que convierte dos colores pegados en dos secciones. */ .bloque + .bloque::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:3; background: linear-gradient(90deg, transparent, var(--laton) 20%, var(--laton) 80%, transparent); transform-origin:center; } @supports (animation-timeline: view()) { .bloque + .bloque::before { animation: crecer linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; } } /* El grano se nota MAS sobre la tinta, igual que en el papel de verdad. */ .sup-hondo, .sup-tinta { position:relative; } .sup-hondo::after, .sup-tinta::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.055; background-image: var(--grano); } /* OJO CON `overflow: hidden` EN UNA SECCION QUE LLEVA ALGO PEGAJOSO. Esta regla llevaba `overflow: hidden` para recortar el grano, y eso convertia la seccion en su propio contenedor de desplazamiento: el panel del taller dejaba de engancharse a la ventana y se iba hacia arriba a mitad de recorrido. Medido: a un 35% de la seccion las dos ventanas ya no estaban en pantalla. El recorte se pide solo donde hace falta. */ .portada { overflow: hidden; } .taller { overflow: visible; } .taller::after { display: none; } /* el grano de `body` ya cubre esta zona */ /* ── LA FLECHA SE ANCLA AQUÍ, NO A LA SECCIÓN · v576 ──────────────────── La flecha va en `position:absolute` con `top:46%`, y su referencia era `.taller`, la sección entera. Mientras la sección solo contenía las dos ventanas, ese 46 % caía justo en el hueco entre ellas. Al ponerle cabecera a NotarIA (rótulo, titular, lista) la sección creció al doble y el 46 % pasó a caer sobre la lista: la flecha quedó flotando encima del texto. Se vio en una captura de pantalla, no en una prueba. Con `position:relative` aquí la referencia es el bloque de las dos ventanas, y la flecha vuelve a su hueco crezca lo que crezca la sección. ────────────────────────────────────────────────────────────────────── */ .taller-fijo { position: relative; z-index: 2; } /* ═══════════════════════════════════════════════════════════════════════ LA APERTURA ═══════════════════════════════════════════════════════════════════════ */ .portada { position:relative; overflow:hidden; min-height:100svh; display:grid; grid-template-rows: 1fr auto; padding: 128px 0 0; background: var(--hondo); color: var(--sobre-hondo); } /* Un filo de medio pixel y una sombra corta. Lo justo para despegarlo de la trama sin que parezca texto con contorno. */ /* ═══════════════════════════════════════════════════════════════════════════ EL TITULAR DE LA PORTADA TIENE SU PROPIA MEDIDA ═══════════════════════════════════════════════════════════════════════════ `--display` se calibró con «Tu notaría, ordenada»: tres palabras cortas que a 8rem caben en dos líneas y llenan la pantalla. Con «Software para notarías del Ecuador» son cinco palabras y una de nueve letras, y a ese tamaño CADA PALABRA SE VA A SU LÍNEA: cuatro renglones que se comen la portada entera. El titular ya no es el mismo, así que tampoco puede serlo la medida. Aquí baja a la mitad larga y vuelve a caber en dos líneas, con el salto puesto a mano después de «notarías». El resto de la web sigue usando `--display` tal cual: esto solo afecta a la portada. ═══════════════════════════════════════════════════════════════════════════ */ .portada h1 { font-size: clamp(2.4rem, 5.6vw, 5.2rem); line-height: 1.02; color: var(--crema); -webkit-text-stroke: .4px rgba(255,255,255,.16); text-shadow: 0 1px 0 rgba(255,255,255,.10), 0 6px 22px rgba(0,0,0,.45); } .portada .rotulo { color: var(--brillo); } /* ═══════════════════════════════════════════════════════════════════════ LA PLUMILLA DEL ROTULO ═══════════════════════════════════════════════════════════════════════ Cada siete segundos una luz recorre el rotulo de izquierda a derecha y deja un rastro que se apaga solo, como la tinta de una plumilla al levantarla del papel. Son dos piezas, y ahi esta el truco: una es el TRAZO, que se dibuja entero y luego se borra desde el mismo lado por el que empezo, o sea que la estela va detras; y la otra es la CABEZA, un punto de luz que va por delante del trazo. Siete segundos y no cinco a proposito: un adorno que se repite cada cinco se convierte en un tic. */ .rotulo-plumilla { position:relative; display:inline-block; } .rotulo-plumilla::before, .rotulo-plumilla::after { content:''; position:absolute; pointer-events:none; } /* ═══════════════════════════════════════════════════════════════════════ EL TRAZO BAJO EL RÓTULO, REHECHO ═══════════════════════════════════════════════════════════════════════ Antes: el trazo crecía desde la izquierda hasta llenar, y a mitad de ciclo CAMBIABA `transform-origin` de left a right para encoger por el otro lado. Ese cambio de origen es el salto. Con la barra llena no se nota (una barra completa se ve igual con cualquier origen), pero la CABEZA sí: llegaba al final, se apagaba, y al reiniciar reaparecía de golpe en el otro extremo. Eso es exactamente el «llega a un lado y un segundo después sale del otro». Ahora es UN SOLO BARRIDO CONTINUO, sin cambios de origen y sin encoger: · el trazo está SIEMPRE dibujado, pero apagado; lo que se mueve es una luz que lo recorre, hecha con una máscara que se desplaza; · la cabeza usa la MISMA curva y el MISMO tramo de tiempo, así que van pegadas por construcción y no por coincidencia; · las dos se desvanecen en los extremos, así que el ciclo empieza y acaba con todo a cero: no hay nada que pueda saltar al reiniciar. La curva es lineal a propósito. Una curva con aceleración hace que la luz frene a mitad de recorrido, y el ojo lee eso como que se atasca. */ .rotulo-plumilla::before { left:0; right:0; bottom:-5px; height:1.5px; border-radius:2px; background: linear-gradient(90deg, rgba(217,184,113,0), var(--brillo) 18%, #FFF1CE 50%, var(--brillo) 82%, rgba(217,184,113,0)); box-shadow: 0 0 10px 1px rgba(217,184,113,.55), 0 0 22px 4px rgba(217,184,113,.22); /* La máscara: una ventana de luz que viaja. Fuera de ella el trazo no se dibuja, así que no hace falta apagar nada. */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, #000 42%, #000 58%, transparent 74%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, #000 42%, #000 58%, transparent 74%, transparent 100%); -webkit-mask-size: 320% 100%; mask-size: 320% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: barrer-trazo 7s linear infinite; } /* LA BOLITA SE QUITA. Eran dos elementos con vidas distintas: una cabeza que iba de izquierda a derecha y un trazo que se dibujaba. Por muy sincronizados que estuvieran, se leían como dos cosas, y la cabeza era la que delataba el reinicio. Con solo el trazo, el reinicio es invisible porque no hay nada que reaparezca en el otro extremo. */ .rotulo-plumilla::after { content:none; } @keyframes barrer-trazo { /* DE IZQUIERDA A DERECHA, que es como se lee y como se pasa la plumilla. Iba al revés, y el motivo es una trampa clásica: con una máscara MÁS ANCHA que el elemento (aquí 320%), los porcentajes de posición no miden desplazamiento, sino ALINEACIÓN. 0% alinea el borde izquierdo de la máscara con el del elemento y 100% alinea los derechos, así que subir el número mueve la máscara HACIA LA IZQUIERDA y la ventana brillante viaja en sentido contrario al que uno espera. Por eso el comentario anterior decía «de izquierda a derecha» y se veía al revés: la intención era buena y los números iban invertidos. En los dos extremos la ventana está fuera del trazo, así que no se ve nada y el reinicio es invisible. */ 0% { -webkit-mask-position: 210% 0; mask-position: 210% 0; } 38% { -webkit-mask-position: -110% 0; mask-position: -110% 0; } 38.01%, 100% { -webkit-mask-position: 210% 0; mask-position: 210% 0; } } @keyframes _barrer-cabeza-retirada { /* MISMO tramo (0-38%) y MISMA curva que el trazo: van juntas por construcción. El fundido de entrada y salida ocupa los primeros y últimos puntos del recorrido, así que la cabeza nunca aparece ni desaparece de golpe. */ 0% { left:-2%; opacity:0; transform: scale(.5); } 6% { opacity:1; transform: scale(1); } 32% { opacity:1; transform: scale(1); } 38% { left:102%; opacity:0; transform: scale(.5); } 38.01%, 100% { left:-2%; opacity:0; } } /* LA LUZ. Antes eran dos manchas centradas y pequenas, y una mancha centrada se lee como una mancha. Ahora son dos focos ANCLADOS A LAS ESQUINAS y mucho mas grandes que la caja: su borde nunca entra en cuadro, asi que se lee como luz entrando en la habitacion y no como algo pintado encima. */ .portada::before { content:''; position:absolute; pointer-events:none; inset: -60% -30% -40% -55%; background: radial-gradient(46% 52% at 8% 14%, rgba(196,150,58,.30), transparent 70%), radial-gradient(52% 58% at 92% 88%, rgba(46,98,150,.30), transparent 72%); animation: respirar 19s ease-in-out infinite alternate; filter: blur(10px); } @keyframes respirar { from { transform: translate3d(-1.5%,-1%,0) scale(1); opacity:.82; } to { transform: translate3d(1.5%, 1.5%,0) scale(1.08); opacity:1; } } /* LA PLANCHA DE SELLOS. Antes era UN sello enorme. Un sello suelto sobre un fondo liso se lee como un logotipo puesto ahi de adorno. Lo que hace un papel timbrado de verdad es repetir la marca en una trama fina y regular, que es justo lo que impide falsificarlo: la marca deja de ser un adorno y pasa a ser el soporte. La trama deriva EXACTAMENTE una casilla por vuelta, en diagonal. Ese es el truco del bucle infinito: si el recorrido mide una casilla justa, el fotograma final es identico al primero y no hay salto que disimular. Y encima pasa una banda de luz mas lenta que la deriva, asi que la trama nunca se ve igual dos veces aunque solo haya dos animaciones. */ /* Ligeramente torcida. Una trama perfectamente a escuadra se lee como un fondo de plantilla; siete grados bastan para que parezca una plancha colocada a mano. Se agranda el recuadro para que al girar no asome el borde por ninguna esquina. */ .trama { position:absolute; inset:-32%; rotate: -7deg; pointer-events:none; z-index:0; opacity:.26; /* Dos mascaras que se cruzan: la casilla del logo, y un ovalo que apaga la trama en los bordes para que no compita con el titular. */ -webkit-mask-image: url('/logo-claro.svg'), radial-gradient(78% 74% at 68% 46%, #000 0%, #000 30%, rgba(0,0,0,.35) 62%, transparent 84%); mask-image: url('/logo-claro.svg'), radial-gradient(78% 74% at 68% 46%, #000 0%, #000 30%, rgba(0,0,0,.35) 62%, transparent 84%); -webkit-mask-size: 95px 95px, 100% 100%; mask-size: 95px 95px, 100% 100%; -webkit-mask-repeat: repeat, no-repeat; mask-repeat: repeat, no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect; background: linear-gradient(112deg, rgba(150,170,205,.42) 0%, rgba(150,170,205,.42) 30%, rgba(255,240,205,1) 45%, rgba(255,255,255,.92) 52%, rgba(150,170,205,.42) 66%, rgba(150,170,205,.42) 100%); background-size: 260% 260%; animation: derivar 23.4s linear infinite, pulir 15.3s cubic-bezier(.5,0,.5,1) infinite; } @keyframes derivar { from { -webkit-mask-position: 0 0, 50% 50%; mask-position: 0 0, 50% 50%; } to { -webkit-mask-position: 95px -95px, 50% 50%; mask-position: 95px -95px, 50% 50%; } } /* En las paginas legales la trama va fija al fondo de la ventana, con la misma casilla, el mismo giro y la misma deriva: es el mismo papel. */ .trama-fija { position: fixed; inset:-32%; z-index:0; } @keyframes pulir { 0%, 10% { background-position: 112% -12%; } 60%, 100% { background-position: -12% 112%; } } /* SIN `z-index` AQUI. Ver la nota larga del cristal: este `z-index: 2` creaba un contexto de apilamiento y encerraba al vidrio. La trama se queda detras igual, porque va antes en el documento. */ .portada .lienzo { position:relative; } .portada-cuerpo { align-self:center; align-items:center; } /* ═══════════════════════════════════════════════════════════════════════ LA TABLA DE CRISTAL ═══════════════════════════════════════════════════════════════════════ POR QUE ESTUVO ROTO TRES VECES SEGUIDAS, QUE ES LA PARTE QUE HAY QUE LEER ANTES DE TOCAR NADA DE AQUI. `backdrop-filter` deja de ver la pagina cuando el elemento que lo lleva esta ENCERRADO en un contexto de apilamiento. No basta con que la pagina este detras: tiene que haber camino libre hasta ella. En esta portada habia DOS encierros a la vez, y ese fue el motivo de que costara tanto: · el `z-index: 2` del lienzo de la portada; · y la animacion de entrada del envoltorio, que al animar la opacidad crea otro contexto aunque acabe en opacidad 1. Quitar uno solo no servia de nada: medido, seguia en 87,6 de nitidez con cualquiera de los dos puesto, y caia a 0,7 al quitar LOS DOS. Por eso las dos primeras reparaciones parecieron no hacer nada aunque eran correctas. Antes de eso hubo otras dos causas, y las tres son la misma familia: · una entrada que acababa en `filter: blur(0)`, que con relleno `both` se queda escrito para siempre, y cualquier `filter` en un antepasado corta el fondo; · y la matriz identidad de un `transform: none`, que corta igual. REGLA PARA EL FUTURO: sobre este panel no se pone `z-index`, ni `transform`, ni `filter`, ni animaciones de opacidad, en NINGUN antepasado. Si hace falta que algo aparezca, se anima cada capa por separado, que es lo que se hace mas abajo. COMO SE COMPRUEBA EN TREINTA SEGUNDOS: en la consola, document.querySelector(".cristal-vidrio").style.backdropFilter="invert(1)" Si el interior del panel no se pone claro, hay un encierro nuevo. ─────────────────────────────────────────────────────────────────────── LO QUE HACE UN CRISTAL DE VERDAD 1 · DESENFOCA lo que tiene detras. 2 · LO DOBLA EN EL CANTO. Un vidrio grueso no difumina el borde, lo TUERCE. Filtro SVG con `feDisplacementMap` usado como `backdrop-filter`, que hoy solo admite Chrome; donde no llega, queda el desenfoque y se sigue leyendo como un canto grueso. 3 · SEPARA LOS COLORES en el filo, apenas. Un pixel al 60%: en cuanto se nota, deja de parecer vidrio y parece un borde de neon. 4 · BRILLA DONDE LE DA LA LUZ, y aqui la luz es calida, asi que el reflejo lleva laton dentro y no blanco puro. ═══════════════════════════════════════════════════════════════════════ */ .panel-flotante { position:relative; border-radius: 22px; padding: calc(var(--e3) + 6px) var(--e3) calc(var(--e3) + 10px); } /* ── el vidrio, UNA SOLA CAPA ───────────────────────────────────────── La version anterior lo repartia en tres capas superpuestas y ese fue el error: un `backdrop-filter` dentro de otro no ve la pagina, y encima el `saturate(2)` del canto amplificaba el azul marino del fondo hasta dejar el panel de color azul electrico. La receta buena es de una sola pieza y viene de un generador ya probado: desenfoque MINIMO, la lente, y el bisel hecho con sombras interiores. El desenfoque grande es lo que convierte un cristal en un plastico esmerila- do; el vidrio de Apple deja ver el fondo, solo lo tuerce. La saturacion va en 1,08 y no en 1,5 como trae el generador: sus fondos de ejemplo son fotos de colores, y aqui detras hay un azul marino que con saturacion alta se vuelve fluorescente. El `-webkit-backdrop-filter` de la linea siguiente es el respaldo para quien no admite filtro SVG (Safari, Firefox): desenfoque bueno y sin lente, que sigue siendo un cristal decente. */ /* ═══════════════════════════════════════════════════════════════════════ EL RESPLANDOR QUE SIGUE AL PUNTERO ═══════════════════════════════════════════════════════════════════════ La primera versión tenía DOS capas: un reflejo ancho y una banda estrecha muy clara que cruzaba la pieza. Quedaba demasiado marcado, y sobre todo la banda se leía como un objeto pintado encima, no como luz. Ahora es UNA sola mancha, grande y muy suave, que sigue al ratón cuando está encima de la placa. Nada más. Un cristal iluminado no tiene bordes de luz visibles: tiene una zona más clara que se desplaza. Los números que importan: el degradado llega al 62% del ancho (una mancha pequeña se lee como una linterna) y la opacidad máxima es .16, no .30. Por encima de eso deja de parecer luz y empieza a parecer una capa blanca. */ /* ── el contenido, por delante ────────────────────────────────────────── */ .panel-flotante .boton { margin-top: var(--e3); } /* La inclinacion va SOLO en lo que esta por delante del vidrio. Ponerla en la placa la encerraria y volveriamos al principio. */ /* SE INCLINA LA PIEZA ENTERA. Antes solo se movian las letras y el boton, y eso se lee como papeles flotando delante de un cristal quieto. Ahora gira el panel completo, y el contenido gira ADEMAS un poco mas por el `translateZ`: ese desfase es el grosor del vidrio. Se puede porque el `transform` va en el propio panel y no en un antepasado. Comprobado midiendo: el fondo sigue desenfocandose igual con la pieza girada. */ /* APARECE CON UN POP DESDE LA DERECHA. No es un fundido que viene de la derecha: son dos cosas a la vez, un fundido y un empujon lateral que frena de golpe al llegar. La curva pasa ligeramente de 1 para que el frenazo se note. El `visibility` va DENTRO de los fotogramas a proposito: mientras la pieza no se ve tampoco se puede pulsar ni recoge reflejo. Antes era invisible y el boton seguia siendo clicable, que es de lo que peor sienta. Y va en el envoltorio `.cristal`, que aqui SI se puede porque ese elemento no es antepasado de ningun `backdrop-filter` que necesite ver la pagina: el vidrio es hijo suyo y ya se comprobo que aguanta. */ /* ═══════════════════════════════════════════════════════════════════════ POR QUÉ LA ENTRADA YA NO PARPADEA ═══════════════════════════════════════════════════════════════════════ La pieza entraba y un instante después «se encendían» los efectos de fondo, con un parpadeo muy visible. La causa: `opacity` menor que 1 crea un contexto de composición nuevo, y mientras dura, el navegador NO calcula el `backdrop-filter` de dentro. O sea que la pieza aparecía siendo un rectángulo plano y el cristal se activaba al llegar a opacidad 1. Se arregla no bajando nunca la opacidad del elemento que contiene el vidrio: la entrada se hace con `clip-path` y desplazamiento, que no crean ese contexto. El cristal está activo desde el primer fotograma y lo que se ve es la pieza destapándose, no encendiéndose. */ /* Al terminar la entrada, el mando pasa al puntero: si las dos siguieran vivas se pelearian por el mismo `transform` y ganaria la animacion. */ /* El SVG de los filtros no pinta nada: solo guarda la receta. */ .filtros { position:absolute; width:0; height:0; overflow:hidden; } /* LAS CIFRAS, ahora dentro de la apertura. Eran una seccion propia, con tres tarjetas grandes y un bloque de color entero para si. Tres datos no sostienen una seccion: sostienen un pie. Asi que bajan a ser el zocalo de la apertura, en una fila fina, que es donde un dato acompana en vez de interrumpir. */ /* El zocalo se apoyaba sobre la trama sin nada que lo separara y los numeros competian con las casillas de detras. Ahora lleva su propio vidrio: el mismo material que el panel, en version fina. */ .zocalo { position:relative; z-index:2; border-top:1px solid var(--borde-hondo); background: linear-gradient(180deg, rgba(6,12,24,.52), rgba(6,12,24,.66)); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); /* La misma sombra que la cabecera, hacia arriba: son la misma pieza. */ box-shadow: 0 -10px 30px -12px rgba(0,0,0,.55); } /* Iban alineados por la LINEA BASE, y con dos cuerpos tan distintos eso pega la base del numero a la del primer renglon: con un texto de dos lineas el numero queda colgando arriba. Centrados cuadran. */ .dato { display:flex; align-items:center; gap:14px; } /* LAS CIFRAS SUBEN AL CARGAR. Antes subian al pasar por delante, y como el zocalo ya se ve al abrir, la cuenta se consumia sin que nadie la mirase. Ahora arranca con la pagina. Y no es solo que el numero cambie. Un contador de verdad tiene INERCIA: las cifras entran estiradas y borrosas, como el tambor de un cuentakilo- metros girando deprisa, frenan, y al pararse se vuelven nitidas de golpe. Ese frenazo es todo el efecto. Sin el, un numero que cambia es un numero que parpadea. El valor final es ademas el valor por omision: sin `@property` la cuenta no interpola, pero la cifra correcta ya esta puesta. */ @property --n { syntax:''; initial-value:0; inherits:false; } @keyframes contar-651 { from { --n:0; } to { --n:1600; } } @keyframes contar-28 { from { --n:0; } to { --n:28; } } @keyframes contar-1 { from { --n:0; } to { --n:1; } } @keyframes frenar { 0% { opacity:0; filter: blur(9px); transform: translateY(.30em) scaleY(1.28); } 38% { opacity:1; } 72% { filter: blur(2.4px); transform: translateY(0) scaleY(1.06); } 88% { transform: translateY(0) scaleY(.985); } 100% { opacity:1; filter: blur(0); transform:none; } } /* CADA UNA CON SU PROPIO TIEMPO, y no solo con su retraso. Antes las tres duraban 1,9 segundos y solo cambiaba el arranque, asi que las tres se aclaraban casi a la vez y parecia que la pequena esperaba a la grande. Ahora la duracion va con el tamano de la cifra: contar hasta la grande pide recorrido, contar hasta 1 no. LA CLASE SE SIGUE LLAMANDO `c651` AUNQUE LA CIFRA YA NO SEA 651: renombrarla obligaria a tocar el HTML y las cinco reglas de aqui, y el nombre de una clase no lo lee nadie. Lo que si tiene que ser verdad es el numero, y hay una prueba que falla si la web promete mas pruebas de las que hay. Terminan en momentos claramente distintos y cada una se lee como suya. */ .c651 { animation: contar-651 2.05s cubic-bezier(.13,.9,.2,1) .05s both, frenar 2.05s cubic-bezier(.13,.9,.2,1) .05s both; } /* ═══════════════════════════════════════════════════════════════════════ EL TITULAR QUE SE COMPONE ═══════════════════════════════════════════════════════════════════════ El producto entero va de un texto que se compone, asi que el titular no aparece: se compone, palabra a palabra, como la tinta al posarse. Es la misma idea que el taller de mas abajo, dicha en dos segundos en vez de en tres pantallas. Se apunta a los SPAN y no a cualquier hijo: el
tambien es un hijo, contaba en la numeracion y descuadraba los retrasos. */ @keyframes posarse { from { opacity:0; transform: translateY(.34em); filter: blur(8px); } to { opacity:1; transform:none; filter: blur(0); } } .compone > span { display:inline-block; animation: posarse 1s cubic-bezier(.16,1,.3,1) both; } /* ═══════════════════════════════════════════════════════════════════════ LA PORTADA SE REBOBINA ═══════════════════════════════════════════════════════════════════════ Una entrada que solo ocurre una vez la ve quien llega y nadie mas. Cuando la portada sale de pantalla se le quita la marca `.animar`, y sin ella las animaciones ni siquiera estan declaradas: el titular vuelve a estar sin componer, el cristal sin asomar y los contadores en cero. Al volver a entrar se declaran de nuevo y arrancan desde el principio. Va por clase y no por `animation-play-state` a proposito: pausar deja la animacion a mitad, y lo que hace falta es que vuelva al primer fotograma. Quitar y volver a poner la regla es exactamente eso. */ .portada:not(.animar) .compone > span, .portada:not(.animar) .entra, .portada:not(.animar) .contador { animation: none; } .portada:not(.animar) .compone > span, .portada:not(.animar) .entra { opacity: 0; } /* El cristal vuelve a su sitio de partida. ═══════════════════════════════════════════════════════════════════════ AQUÍ ESTABA EL PARPADEO QUE QUEDABA. La animación de entrada ya se había pasado a `clip-path` justamente para no usar opacidad, PERO EL ESTADO DE PARTIDA SEGUÍA CON `opacity: 0`. Y eso basta: mientras la opacidad es menor que 1 el navegador no calcula el `backdrop-filter` de dentro. Así que la pieza esperaba siendo un rectángulo plano, y en cuanto la animación la subía a opacidad 1 se encendían de golpe el desenfoque, la distorsión y la aberración. Eso es lo que se veía como un parpadeo tardío de los efectos. Ahora el estado de partida usa el MISMO `clip-path` que el primer fotograma de la animación: la pieza está completamente recortada, o sea invisible, pero con opacidad 1 y el cristal ya calculado. Cuando entra, se destapa un cristal que ya estaba hecho. */ .portada:not(.animar) .c651 { --n:0; } .portada:not(.animar) .c28 { --n:0; } /* Sin JavaScript la marca no llega nunca, asi que la portada tiene que verse igual: aqui se le devuelve todo. */ .sin-guion .portada .compone > span, .sin-guion .portada .entra { opacity:1; } .compone > span:nth-of-type(1){animation-delay:.05s} .compone > span:nth-of-type(2){animation-delay:.13s} .compone > span:nth-of-type(3){animation-delay:.21s} .compone > span:nth-of-type(4){animation-delay:.29s} .compone > span:nth-of-type(5){animation-delay:.37s} .compone > span:nth-of-type(6){animation-delay:.45s} /* ENTRADAS, Y LA TRAMPA QUE HAY DETRAS. Un `backdrop-filter` deja de ver la pagina si CUALQUIER antepasado tiene `filter` o `transform`, y da igual que no hagan nada: `blur(0)` y la matriz identidad rompen igual que un desenfoque de veinte pixeles o un giro de treinta grados. Y una animacion con relleno `both` DEJA ESCRITO su ultimo fotograma para siempre. O sea que una entrada que termina en `transform: none` no deja el elemento limpio: le deja `matrix(1,0,0,1,0,0)` puesto. Aqui costo dos vueltas. La primera entrada terminaba en `filter: blur(0)` y mataba el cristal. Se cambio por una que terminaba en `transform: none` y lo siguio matando, por lo mismo. Medido las dos veces con `invert(1)` como `backdrop-filter`: si el interior del panel no se aclara, no esta llegando. Asi que lo que envuelve al cristal entra SOLO CON OPACIDAD. El desplazamiento se lo queda el contenido, que es hermano del vidrio y no antepasado suyo. */ @keyframes asomar { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } } .entra { animation: asomar .8s cubic-bezier(.16,1,.3,1) both; animation-delay:.56s; } /* `.entra-2` NO lleva animacion a proposito: ver la nota del cristal. */ .entra-2 { } /* ═══════════════════════════════════════════════════════════════════════ EL TALLER · dos ventanas, el antes y el despues ═══════════════════════════════════════════════════════════════════════ Es la pieza que no puede tener nadie mas, porque ES el producto. La version anterior ponia dos rectangulos de papel uno al lado del otro y se leia como dos citas. El salto esta en ensenar las dos HERRAMIENTAS y no los dos textos: a la izquierda el visor con el que hoy se pelea la notaria, apretado y gris, con un escaneado que se lee mal de verdad; a la derecha el editor, limpio, con el formato de la casa y algo mas de color para que se note vivo. La de la derecha se escribe sola segun bajas. Los rangos van sobre `contain`, que es exactamente el tramo en que el panel esta clavado en pantalla: con rangos sobre el recorrido entero, quien llegaba por el enlace #taller aterrizaba antes de que empezara nada y veia el documento VACIO. Paso de verdad, hay captura. ═══════════════════════════════════════════════════════════════════════ */ /* SE ACABO EL PANEL PEGAJOSO. Media el equivalente a tres pantallas y existia solo para dar recorrido a una animacion que ya no esta: el texto de la matriz aparece de una vez. Un tramo de tres pantallas que no cuenta nada es tres pantallas de scroll cobradas a quien lee, asi que la seccion vuelve a medir lo que ocupa. */ .taller { position:relative; } .taller-fijo { display:grid; grid-template-columns: 1fr 1fr; align-items:start; /* El hueco era de 48 como maximo y la flecha llegaba a tocar las dos ventanas. Ahora la flecha tiene su propio aire a los dos lados. */ gap: clamp(56px, 7vw, 132px); } .taller-lado { display:flex; flex-direction:column; min-width:0; } .taller-cabeza { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; } .taller-cabeza .rotulo { margin:0; } .folio { font-family:'Lora', Georgia, serif; font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height:.85; letter-spacing:-.04em; user-select:none; color: color-mix(in srgb, var(--laton) 45%, transparent); } /* ---------- el armazon comun de una ventana ---------- */ .ventana { position:relative; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; height: clamp(420px, 52vh, 560px); } /* UNA VENTANA ES UNA SUPERFICIE PROPIA. Sin esto, `.sup-hondo p` alcanzaba a los parrafos de dentro y pintaba el escaneado en azul claro sobre papel blanco: 1,43 de contraste, el mismo fallo que dejo invisibles las paginas legales, esta vez hacia dentro. Una superficie clara metida en un bloque oscuro tiene que cortar la herencia en su borde, y por eso los colores se declaran aqui con la especificidad suficiente para ganar. */ .ventana-vieja .hoja, .ventana-vieja .hoja p { color:#4A4A46; } .ventana-nueva .hoja, .ventana-nueva .hoja p, .ventana-nueva .hoja span { color: var(--texto); } .ventana-nueva .hoja .caratula, .ventana-nueva .hoja .cierre { color: var(--tinta); } .barra { display:flex; align-items:center; gap:10px; padding:9px 12px; flex:none; font-size:12px; font-weight:500; } .semaforos { display:flex; gap:6px; flex:none; } .semaforos i { width:11px; height:11px; border-radius:50%; display:block; } .barra-nombre { flex:1; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric: tabular-nums; } .herramientas { display:flex; align-items:center; gap:6px; flex:none; padding:6px 12px; font-size:11px; overflow:hidden; white-space:nowrap; } .hueco { flex:1; } .pastilla { padding:3px 9px; border-radius:5px; } .hoja { flex:1; overflow:hidden; position:relative; padding: var(--e3); } /* ---------- 01 · el visor de hoy, incomodo a proposito ---------- */ .ventana-vieja { background:#E9E9E6; border:1px solid #C9C9C4; box-shadow: 0 2px 8px rgba(0,0,0,.22), 0 14px 34px rgba(0,0,0,.20); transform: translateY(6px) rotate(-.35deg); } .ventana-vieja .barra { background: linear-gradient(#F0F0EE,#DEDEDA); border-bottom:1px solid #C4C4BF; color:#5C5C57; } .ventana-vieja .semaforos i:nth-child(1){ background:#E0655A; } .ventana-vieja .semaforos i:nth-child(2){ background:#E0B44E; } .ventana-vieja .semaforos i:nth-child(3){ background:#57B84C; } .ventana-vieja .herramientas { background:#E4E4E0; border-bottom:1px solid #CFCFC9; color:#5A5A52; } .ventana-vieja .pastilla { background:#D6D6D0; } .ventana-vieja .hoja { background:#EFEEE9; } /* EL ESCANEADO. Un escaneado de verdad no es texto gris: es texto torcido, con el contraste sucio y la banda de luz de la lampara del aparato. */ /* Mas gris, mas torcido y menos desenfocado: un escaneado malo no esta borroso, esta SUCIO y mal encuadrado. El desenfoque disimulaba la suciedad, que es justo lo que habia que ver. */ .escaneo { font-family:'Times New Roman', Times, serif; font-size:.8125rem; line-height:1.72; color:#4A4A46; text-align:justify; transform: rotate(-1.05deg) scale(1.022) translateX(-3px); filter: contrast(1.34) saturate(0) brightness(1.04) blur(.09px); opacity:.82; } .escaneo p { margin:0 0 8px; max-width:none; } .hoja-vieja::before { content:''; position:absolute; inset:0; pointer-events:none; background: linear-gradient(101deg, rgba(0,0,0,.12) 0%, transparent 24%, transparent 62%, rgba(0,0,0,.16) 100%); } .hoja-vieja::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.26; background-image: var(--grano); mix-blend-mode: multiply; } /* ---------- 02 · el editor, limpio y con color ---------- */ .ventana-nueva { background: var(--carta); border:1px solid rgba(255,255,255,.14); box-shadow: 0 2px 6px rgba(10,20,40,.30), 0 26px 70px rgba(10,20,40,.45), 0 0 0 1px rgba(217,184,113,.14), 0 0 60px -12px rgba(169,129,46,.30); transform: translateY(-6px); } .ventana-nueva .barra { background: linear-gradient(180deg, var(--tinta), #16243F); color:#D3DCEE; border-bottom:1px solid rgba(255,255,255,.10); } /* Eran tres puntos grises apagados y se leian como botones desactivados. Llevan los mismos tres colores de siempre, rebajados para que convivan con la barra en tinta, y un filo de luz arriba que los hace parecer vidrio en vez de circulos planos. */ .ventana-nueva .semaforos i { box-shadow: inset 0 1px 0 rgba(255,255,255,.45); } .ventana-nueva .semaforos i:nth-child(1){ background:#D8695E; } .ventana-nueva .semaforos i:nth-child(2){ background:#D9A94E; } .ventana-nueva .semaforos i:nth-child(3){ background:#5FB36A; } .ventana-nueva .herramientas { background:#F6F4EA; border-bottom:1px solid var(--linea); color: var(--gris); } .ventana-nueva .pastilla { background:#fff; border:1px solid var(--linea); color: var(--tinta); } .chispas { width:14px; height:14px; flex:none; margin-right:2px; color: var(--brillo); animation: chispear 3.4s ease-in-out infinite; } @keyframes chispear { 0%, 62%, 100% { opacity:.72; transform: scale(1); } 74% { opacity:1; transform: scale(1.16); } } .ventana-nueva .pastilla.viva { display:inline-flex; align-items:center; background: color-mix(in srgb, var(--laton) 14%, #fff); border-color: color-mix(in srgb, var(--laton) 40%, transparent); color: var(--laton); font-weight:600; } .ventana-nueva .hoja { background: var(--carta); padding: var(--e3) var(--e4); } /* el margen izquierdo de una foja, que en el papel existe */ .hoja-nueva::before { content:''; position:absolute; top:0; bottom:0; left:22px; width:1px; background: color-mix(in srgb, var(--laton) 26%, transparent); } .matriz { font-family:'Times New Roman', Times, serif; font-size:.875rem; line-height:1.8; color: var(--texto); text-align:justify; } .matriz .caratula { display:block; text-align:center; font-weight:700; letter-spacing:.04em; margin-bottom:12px; color: var(--tinta); } .matriz .clausula { display:block; margin-bottom:9px; } .matriz .cierre { display:block; margin-top:12px; font-weight:700; letter-spacing:.02em; color: var(--tinta); } .matriz mark { background: color-mix(in srgb, var(--laton) 20%, transparent); color:inherit; padding:0 2px; border-radius:2px; } /* EL TEXTO YA NO SE ESCRIBE SEGUN BAJAS. Componerlo trozo a trozo con el dedo era bonito y tenia un coste: obligaba a recorrer tres pantallas para leer un parrafo, y quien llegaba por el enlace directo se encontraba un documento a medio escribir. Ahora la matriz esta entera desde el primer fotograma y lo unico que se mueve es la ventana al entrar, una sola vez. */ .paso { opacity:1; } /* La flecha entre las dos ventanas. */ .flecha { position:absolute; left:50%; top:46%; transform: translate(-50%,-50%); width: clamp(38px, 3.6vw, 58px); z-index:4; pointer-events:none; color: var(--brillo); opacity:.9; } .flecha svg { width:100%; height:auto; display:block; filter: drop-shadow(0 3px 10px rgba(0,0,0,.5)); } /* ═══════════════════════════════════════════════════════════════════════ TARJETAS ═══════════════════════════════════════════════════════════════════════ */ .tarjetas { display:grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .sup-hondo .tarjeta, .sup-tinta .tarjeta { background: rgba(255,255,255,.045); border-color: var(--borde-hondo); backdrop-filter: blur(6px); } .sup-hondo .tarjeta .icono, .sup-tinta .tarjeta .icono { background: rgba(217,184,113,.15); color: var(--brillo); } /* La nota al margen: en una escritura no es un adorno, es donde se anota lo que le pasa al instrumento despues de otorgado. */ .al-margen { grid-column: 9 / 13; align-self:start; border-left:2px solid var(--laton); padding-left: var(--e2); font-size: var(--menor); line-height:1.55; } .sup-hondo .al-margen, .sup-tinta .al-margen { border-left-color: var(--brillo); } /* LA RÚBRICA. ═══════════════════════════════════════════════════════════════════════ Se veía con un color raro, azul apagado y a un tamaño que no cuadraba con nada de alrededor. El motivo: el color solo se daba a través de las clases de superficie (`.sup-crema`, `.sup-hondo`…), y donde el bloque NO lleva una de esas clases, la rúbrica heredaba lo que hubiera, que era el gris de párrafo secundario. Ahora tiene color propio y las clases de superficie solo lo AJUSTAN. Un estilo que depende de que alguien recuerde poner otra clase se rompe en cuanto se añade un bloque nuevo, y eso ya pasó aquí. También baja de tamaño: iba a `--subtitulo`, el mismo que los titulillos de sección, y competía con el titular que tiene al lado. Es una firma, no un encabezado. */ .rubrica { display:block; margin-top: var(--e3); padding-top: var(--e2); border-top:1px solid color-mix(in srgb, var(--laton) 45%, transparent); font-family:'Lora', Georgia, serif; font-size: calc(var(--subtitulo) * .86); line-height:1.5; color: var(--tinta); font-style: italic; } .sup-hondo .rubrica, .sup-tinta .rubrica { color: var(--crema); } /* ═══════════════════════════════════════════════════════════════════════ LAS PAGINAS LEGALES ═══════════════════════════════════════════════════════════════════════ La gente SI lee estas paginas: cuando tiene una duda. Y son las dos que revisa Meta para verificar el negocio. AQUI ESTUVO EL FALLO MAS CARO DE LA WEB. Al volver oscuro el fondo del documento, estas dos paginas se quedaron sin superficie propia: heredaron el azul casi negro con el texto todavia en azul tinta. Contraste 1,22 sobre 4,5 exigido. Invisibles, y publicadas. Por eso ahora el cuerpo legal es una HOJA: una superficie de papel con su color de texto declarado al lado, que es lo que impide que vuelva a pasar. */ .legal { padding: calc(96px + var(--e5)) 0 var(--e7); position:relative; z-index:2; } .hoja-legal .rotulo { color: var(--laton-texto); } .hoja-legal .nota { color: var(--gris); } /* El resumen: dos o tres frases que dicen lo mismo que el documento entero. Quien solo lea esto ya se ha enterado de lo importante. */ .resumen { border-left:3px solid var(--laton); padding: var(--e2) 0 var(--e2) var(--e3); margin: 0 0 var(--e5); } /* El indice, pegajoso en pantallas anchas: se queda al lado mientras se lee, como el lomo de un libro abierto. Con fondo propio, porque un elemento fijo sobre contenido que se mueve necesita su propia superficie. */ .indice { position:sticky; top:112px; align-self:start; grid-column: 1 / 5; z-index:3; background: var(--papel); border:1px solid var(--linea); border-radius:10px; padding: var(--e2); } /* ═══════════════════════════════════════════════════════════════════════ EL PIE ═══════════════════════════════════════════════════════════════════════ Los enlaces del pie estaban en azul tinta sobre el azul casi negro del fondo: el mismo fallo que las legales, en la portada, y llevaba publicado. */ .pie { position:relative; z-index:2; background: var(--hondo); color: var(--sobre-hondo); padding: var(--e5) 0 var(--e6); } .pie .marca span { color: var(--crema); animation:none; } .pie .marca img { filter: brightness(0) invert(.97) sepia(.24) saturate(.55) hue-rotate(3deg); animation:none; } .pie .nota { color: var(--sobre-hondo-tenue); } .pie-enlaces { display:flex; flex-direction:column; gap:10px; margin:0; } .pie-enlaces a { width:fit-content; color: var(--sobre-hondo); text-decoration:none; font-size: var(--menor); border-bottom:1px solid transparent; transition: color .2s ease, border-color .2s ease; } .pie-enlaces a:hover { color: var(--crema); border-bottom-color: var(--brillo); } /* ═══════════════════════════════════════════════════════════════════════ MOVIMIENTO REDUCIDO ═══════════════════════════════════════════════════════════════════════ NO BASTA CON ACORTAR LA ANIMACION A CERO. Una animacion por desplazamiento que empieza en opacidad 0 se queda EN CERO si se le quita la duracion: el elemento no aparece nunca. Quien activa esta opcion suele hacerlo por mareo o migrana, y darle una pagina con agujeros es peor que darle una que se mueve. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } /* Todo lo que entra con una animacion tiene que quedarse a la vista: una que empieza en opacidad 0 y se le quita la duracion se queda EN CERO. */ .surge, .surge-lado, .compone > span, .entra, .flecha, .trama, .cristal, .cristal-vidrio, .cristal-luz, .cristal-cuerpo, .contador, .chispas, .bloque + .bloque::before, .portada::before { animation:none !important; opacity:1 !important; filter:none !important; } .trama { opacity:.20 !important; } .flecha { transform: translate(-50%,-50%) !important; } .ventana-vieja { transform: rotate(-.35deg) !important; } .escaneo { transform: rotate(-.55deg) !important; filter: contrast(1.22) saturate(.15) !important; } /* La cabecera no puede quedarse transparente sobre fondo claro. */ .cabecera { background: color-mix(in srgb, var(--crema) 94%, transparent) !important; box-shadow: 0 1px 0 var(--linea) !important; } .cabecera .marca span { color: var(--tinta) !important; } .cabecera .marca img { filter:none !important; } .cabecera .menu a:not(.boton) { color: var(--gris) !important; } .pie .marca span { color: var(--crema) !important; } .pie .marca img { filter: brightness(0) invert(.97) sepia(.24) saturate(.55) hue-rotate(3deg) !important; } .progreso { display:none; } } /* ═══════════════════════════════════════════════════════════════════════ PANTALLAS ESTRECHAS ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 1000px) { .rejilla { grid-template-columns: 1fr; } .ancho-7, .ancho-6, .ancho-4, .todo, .al-margen, .indice, .legal-cuerpo { grid-column: 1 / -1; } .bloque { padding: clamp(72px, 12vw, 104px) 0; } /* En un telefono no caben dos ventanas: se apilan y la seccion deja de ser fija, porque un panel clavado en 390 pixeles tapa la lectura. */ .taller-fijo { grid-template-columns:1fr; gap: var(--e4); } .ventana { height: clamp(360px, 46vh, 440px); } .ventana-vieja, .ventana-nueva { transform:none; } /* La flecha pasa a estar ENTRE las dos ventanas, apuntando hacia abajo. */ .flecha { position:static; transform:none; margin:0 auto; width:40px; rotate:90deg; opacity:.85; animation:none; } /* La barra de la ventana se cortaba a media palabra: en estrecho se queda solo con lo que identifica el documento. */ .herramientas .hueco, .herramientas > span:last-child { display:none; } .herramientas { gap:5px; } .portada { min-height:auto; padding:120px 0 0; } .trama { inset:-20%; opacity:.20; } } @media (max-width: 860px) { /* CUARENTA Y CUATRO PIXELES, Y SOLO EN MOVIL. Con raton se apunta mejor y subirlo todo en un monitor hincharia la interfaz. Los enlaces del pie median 26 de alto: se fallan con el dedo. */ .pie-enlaces { gap:0; } .pie-enlaces a { min-height:44px; display:flex; align-items:center; } .marca { min-height:44px; } .menu a { min-height:44px; display:inline-flex; align-items:center; } .pestana { padding:8px 10px; } /* LA BARRA YA NO SE ESCONDE EN EL TELÉFONO. Se ocultaba porque cuatro pestañas largas no cabían, y el resultado era que en un móvil NO HABÍA NAVEGACIÓN: para pasar de una página a otra había que bajar hasta el pie. Con tres grupos cortos cabe. Lo que sí se recorta es el texto del botón del panel, que se queda en su icono: es el elemento que menos falta hace explicar. */ .pestanas { display:flex; } .pestana { padding:8px 8px; letter-spacing:.06em; }.panel-texto { /* v581: escondido A LA VISTA, no para un lector de pantalla. Con display:none el botón se quedaba sin nombre y se anunciaba solo como «enlace» (auditoría axe, en las siete páginas a 390 px). */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .boton-panel { padding:9px 11px; } .separador { margin:0 2px; } .cabecera { padding:12px 12px; } .grupo-hoja { min-width:min(72vw, 250px); } } /* ═══════════════════════════════════════════════════════════════════════════ LA MATRIZ DE EJEMPLO, CON EL ASPECTO DE UNA DE VERDAD ═══════════════════════════════════════════════════════════════════════════ Antes era un texto en párrafos separados con espacios entre ellos. Una matriz real no se parece a eso, y quien trabaja en una notaría lo nota antes de leer una palabra. Lo que la hace reconocible, por orden de importancia: 1. LOS NÚMEROS DE LÍNEA en el margen. Es lo primero que se ve. 2. EL TEXTO JUSTIFICADO CON GUIONADO. Las palabras partidas al final de línea («nacio-nalidad») son la firma visual de este formato, y ningún documento corriente las tiene. 3. EL RELLENO DE PUNTOS «.-.-.-» hasta el final. Lo exige el Art. 39 para que no queden huecos en blanco donde alguien pueda añadir algo. 4. LA CARÁTULA SANGRADA a la derecha, no centrada. 5. SIN ESPACIO ENTRE PÁRRAFOS. En una matriz el texto va seguido: cada línea cuenta, y una línea en blanco es una línea desperdiciada. La tipografía es serif y el interlineado fijo: las 28 líneas por foja solo cuadran si cada línea mide exactamente lo mismo. */ .matriz-real { position: relative; display: grid; grid-template-columns: 2.2em 1fr; gap: 0 .9em; font-family: 'Times New Roman', Times, Georgia, serif; font-size: 13.5px; line-height: 1.72; color: #14181F; text-align: left; } /* Los números, en su columna. `counter` en vez de escribirlos a mano: así siempre empiezan en 1 y nadie puede desalinearlos al editar el HTML. */ .matriz-real .lineas { list-style: none; margin: 0; padding: 0; counter-reset: linea; font-size: 9.5px; color: #9AA0A8; text-align: right; font-variant-numeric: tabular-nums; user-select: none; } .matriz-real .lineas li { counter-increment: linea; line-height: 1.72; /* El tamaño menor del número no puede alterar la altura de la línea: si lo hiciera, los números dejarían de cuadrar con el texto a las pocas líneas. Por eso la altura se fija en em del CUERPO, no del número. */ height: calc(13.5px * 1.72); } .matriz-real .lineas li::before { content: counter(linea); } .matriz-real .cuerpo-matriz { min-width: 0; } .matriz-real p { margin: 0; } /* La carátula: sangrada a la derecha, como en el papel. */ .matriz-real .caratula-real { margin-left: 32%; text-align: justify; text-align-last: left; hyphens: auto; } /* LAS INICIALES DEL MATRIZADOR, EN EL MARGEN Y SIN OCUPAR LÍNEA. ═══════════════════════════════════════════════════════════════════════ En el papel, «RAB/RAB» va al margen izquierdo, A LA ALTURA de la última línea de la carátula, aprovechando el hueco que deja la sangría. No es una línea del documento: es una marca al margen. Estaba como párrafo propio, así que se comía una línea entera de las 28 y descolocaba toda la numeración a partir de ahí. Con posición absoluta ocupa el hueco de la sangría sin gastar renglón, que es exactamente lo que hace en la matriz de verdad. Y VA ANCLADA AL FONDO DEL BLOQUE DE CARÁTULA, no a una altura contada. Estaba en «seis renglones desde arriba», que era cierto con el ancho con el que se escribió: en cuanto la carátula parte en otro número de líneas, esa altura cae sobre la primera línea del cuerpo y se monta encima. Con `bottom: 0` se pega sola al último renglón de la carátula, parta como parta. */ .matriz-real .caratula-bloque { position: relative; } .matriz-real .iniciales-real { position: absolute; left: 0; width: 30%; bottom: 0; font-size: 9.5px; letter-spacing: .06em; color: #3A4250; margin: 0; line-height: 1.72; } .matriz-real .cuerpo-matriz { position: relative; } /* EL CUERPO: justificado y CON GUIONADO. `hyphens: auto` necesita el idioma declarado en el HTML para saber dónde puede partir; sin `lang="es"` no parte nada y se pierde justo el detalle que hace reconocible el formato. */ .matriz-real .parrafo-real { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .matriz-real b { font-weight: 700; } @media (max-width: 640px) { .matriz-real { font-size: 12px; grid-template-columns: 1.8em 1fr; } .matriz-real .lineas li { height: calc(12px * 1.72); } .matriz-real .caratula-real { margin-left: 18%; } } /* ═══════════════════════════════════════════════════════════════════════ EL MONITOR DE LA PORTADA Y EL REPRODUCTOR ═══════════════════════════════════════════════════════════════════════ */ /* ── EL MONITOR SE SOLAPA CON EL TEXTO, Y HAY QUE ORDENARLO ───────────── Con `-6vw` el monitor subía por encima del panel de texto de la derecha y lo tapaba a medias: se leía «...ita, FE y» y nada más. Se vio en la captura, no leyendo el CSS. Ahora el panel de texto se pasa DEBAJO del titular (la columna derecha queda para el monitor) y el solape es solo con la trama del fondo. */ .portada-entrada { max-width: 30rem; margin: 22px 0 0; color: #CFD6E4; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.65; } /* El monitor sube para solaparse con la columna del texto: es lo que hace que la portada se vea como una sola composición y no como dos cajas. */ /* ── EL MONITOR NO EMPUJA: SE ASOMA Y LO CORTA EL ZÓCALO ──────────────── Iba en el flujo, así que el monitor ENTERO tenía que caber y la barra de cifras se iba por debajo del pliegue: había que bajar para ver los datos, que es lo que no puede pasar en una portada. En la referencia el monitor se mete por detrás de la barra y se corta ahí. Eso solo se consigue sacándolo del flujo: `.portada` ya recorta con `overflow: hidden`, y el zócalo, que lleva `z-index: 2`, le pasa por encima. El pie del monitor queda cortado a propósito: la pantalla parece seguir detrás de la barra y se ahorra el hueco muerto de la peana. SIN LA CLASE `lienzo` en el HTML: fijaba ancho máximo y márgenes automáticos, y eso impedía que el monitor se saliera por el borde. */ /* ── LA SOMBRA DEL MONITOR ───────────────────────────────────────────── `drop-shadow` y no `box-shadow`: el PNG es transparente alrededor del monitor, y `box-shadow` dibujaría la sombra del RECTÁNGULO de la imagen, o sea un cuadrado flotando. `drop-shadow` sigue el contorno real, así que la peana proyecta como peana. Van dos: una cerca y dura que despega el aparato del fondo, y otra lejos y difusa que lo asienta. En píxeles del mockup, que es el sistema de coordenadas de aquí dentro. */ /* ── AL PASAR POR EL BOTÓN, LA PANTALLA SE RETIRA UN PASO ─────────────── Se oscurece y pierde saturación, poco y despacio. Es lo que hace que el botón se adelante sin necesidad de crecer ni parpadear: el fondo cede en vez de que la llamada grite. `:has()` sobre el padre porque el vídeo va ANTES que el botón en el HTML, y los selectores de hermano solo miran hacia adelante. Donde no haya `:has()` simplemente no pasa nada: se pierde el matiz, no la función. */ /* Un brillo diagonal suave, como el reflejo de una pantalla de verdad. Sin esto el contenido se ve pegado, como una calcomanía. */ /* ── EL RESPLANDOR INTERIOR ──────────────────────────────────────────── Una sombra hacia dentro, negra y suave, por los cuatro lados. Es lo que hace que el contenido parezca estar DENTRO de un aparato y no una lámina pegada encima: en una pantalla de verdad los bordes caen siempre un poco. Va en píxeles del mockup, así que al escalarse queda en unos veinte de pantalla. */ /* ── LA ANIMACIÓN: UN DESTELLO QUE CRUZA, NO UN LATIDO ───────────────── Antes era un halo que se hinchaba y se desvanecía cada 2,8 segundos. Late, y lo que late en una página parece una notificación pendiente o un anuncio: llama la atención a costa de parecer barato. Esto es un reflejo que cruza el botón cada seis segundos, como la luz al pasar sobre un cristal. No cambia el tamaño de nada, así que el texto nunca se mueve, y el navegador solo desplaza una capa. DOS COSAS QUE ESTABAN MAL EN LA PRIMERA VERSIÓN: 1 · SE QUEDABA PARADO AL FINAL. Los fotogramas iban del 86% al 100% en la posición de llegada, así que el destello se plantaba a la derecha casi un segundo y luego desaparecía de golpe. Ahora ARRANCA Y TERMINA FUERA del botón: entra por un lado, sale por el otro y no se le ve nunca quieto. El `overflow: hidden` del botón lo recorta a los dos lados. 2 · EL BORDE ERA DURO. Se veía la banda, no la luz. Ahora el degradado tiene más pasos y además lleva `blur`: el desenfoque va en píxeles del mockup, así que al escalarse queda en unos ocho de pantalla. */ /* De fuera a fuera: -60% lo deja entero antes del borde izquierdo y 400% entero pasado el derecho. El tramo largo del final es la espera hasta la siguiente pasada, con el destello YA fuera de cuadro. */ /* ── POR QUÉ -190% Y NO -60% ─────────────────────────────────────────── `translateX` va en porcentaje DEL PROPIO ELEMENTO, y el destello mide el 30% del botón. Con -60% su borde derecho quedaba en el 30-18 = 12% del botón: DENTRO. O sea que durante el tramo de espera se quedaba asomando por la izquierda medio segundo y luego arrancaba, que es justo lo que se veía. Con -190% el borde derecho cae en el -27%, fuera del botón, y todavía sobra para el desenfoque de 38 px. Ahora la espera ocurre con el destello invisible y la pasada empieza de la nada. */ @keyframes sien-demo { 0%, 8% { transform: translateX(-190%) skewX(-14deg); } 38%, 100% { transform: translateX(430%) skewX(-14deg); } } /* UN FLOTE MUY CORTO: del 1 al 1,016, o sea medio píxel de pantalla arriba y abajo. No se ve moverse; se percibe que está vivo. Más amplitud y pasa de flotar a bombear, que es lo que se quitó del latido anterior. */ /* QUIEN PIDE MENOS MOVIMIENTO NO LO RECIBE. No es un adorno: a algunas personas el movimiento repetido les marea. */ @media (max-width: 860px) { .portada-entrada { max-width: 26rem; } } /* ═══════════════════════════════════════════════════════════════════════ LA PÁGINA DE FUNCIONES ═══════════════════════════════════════════════════════════════════════ ── LA REGLA QUE MANDA AQUÍ: TODO VISIBLE, SIEMPRE ────────────────────── La tentación con una lista de setenta y siete puntos es plegarla en acordeones. Aquí NO se hace, y es una decisión, no un descuido. Esta página existe para que un buscador y, sobre todo, los modelos que leen webs puedan comprobar qué hace el producto. Lo que está detrás de un `
` cerrado o pintado por JavaScript ES CONTENIDO QUE NO CUENTA: parte de esos lectores no despliegan nada y muchos ni ejecutan guiones. Esconder la lista para que «se vea ordenada» sería tirar la única razón por la que la página existe. El orden se consigue con OTRA cosa: un índice que NAVEGA en vez de plegar. Nada se oculta; solo se llega antes. ═══════════════════════════════════════════════════════════════════════ */ .funciones-marco { position: relative; z-index: 2; width: min(100% - var(--e4), 1280px); margin: 0 auto; padding: clamp(96px, 12vh, 150px) 0 clamp(60px, 8vw, 110px); display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; } /* ── el índice ───────────────────────────────────────────────────────── SE LLAMA `func-nav` Y NO `indice` A PROPÓSITO: `.indice` YA EXISTE en este archivo, para las páginas legales, con `grid-column: 1 / 5`, fondo claro y borde. Reutilizar el nombre hacía que esta página heredara la colocación de aquella rejilla de doce columnas: el contenido se metía en una columna de 268 px y cada punto de la lista salía de 280 px de alto. Se vio midiendo en el navegador, porque en pantalla solo parecía «que había quedado estrecho». */ .func-nav { /* CENTRADO EN VERTICAL Y CON SUPERFICIE PROPIA. Empezaba pegado arriba y, con nueve entradas cortas, quedaba flotando sobre la trama: se leía mal y parecía suelto. Con `top: 50%` y `translateY(-50%)` queda a media altura mientras el contenido pasa por al lado. */ position: sticky; top: 50%; transform: translateY(-50%); background: #101B31; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 16px 10px; box-shadow: 0 18px 50px rgba(4,8,16,.32); /* Se queda quieto mientras el contenido pasa, que es lo que hace que sirva de mapa y no de portada. */ max-height: calc(100vh - 140px); overflow-y: auto; } /* `aria-current` lo pone el guion al desplazar; sin guion, el índice sigue funcionando como lista de enlaces. */ .func-nav a[aria-current="true"] { background: rgba(201,162,39,.10); color: #F4F1E8; border-left-color: var(--laton); } /* ── las secciones ───────────────────────────────────────────────────── */ .funciones-cuerpo { min-width: 0; } /* La lista: sin bolitas, con un filo de latón. Setenta y siete puntos con viñeta redonda parecen un volcado; con el filo parecen un inventario. */ .func-seccion ul { list-style: none; margin: 0; padding: 0; } /* ── CADA PUNTO CON SU ICONO ──────────────────────────────────────────── Antes era un filo de latón igual para los ochenta y uno. Con el icono, una lista larga se recorre con la vista en vez de leerse entera: se distingue de un golpe lo que es un plazo, lo que es dinero y lo que es una persona. El icono se elige por lo que DICE el punto, no a mano uno por uno: así una función nueva entra ya con el suyo. */ .func-seccion li { display: flex; gap: 13px; align-items: flex-start; padding: 10px 0; color: rgba(233,237,245,.88); font-size: 15.3px; line-height: 1.6; border-bottom: 1px solid rgba(255,255,255,.05); } /* ── las cifras de arriba ────────────────────────────────────────────── */ .func-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; overflow: hidden; margin: 0 0 clamp(24px, 3vw, 40px); } /* ── lo que NO hace ──────────────────────────────────────────────────── */ .func-seccion.func-limites { background: rgba(201,162,39,.055); border-color: rgba(201,162,39,.20); } /* ── en pantalla estrecha el índice se pone arriba, en horizontal ────── */ @media (max-width: 980px) { /* En fila y con desplazamiento lateral: nueve secciones no caben apiladas encima del contenido sin comerse la pantalla. */ .func-nav-lista { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } } /* ═══════════════════════════════════════════════════════════════════════════ LA BARRA DE CIFRAS · v574 ═══════════════════════════════════════════════════════════════════════════ Cuatro números verificables, en una franja oscura entre la portada y el resto. En móvil se parte en dos columnas antes que encoger la cifra: un número que no se lee no sirve de nada. ═══════════════════════════════════════════════════════════════════════════ */ .cifras-barra { padding: var(--e4) 0; border-top: 1px solid var(--borde-hondo); border-bottom: 1px solid var(--borde-hondo); } .cifras-rejilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e3); } .cifra-celda { display: flex; flex-direction: column; gap: 6px; padding-left: var(--e2); border-left: 1px solid var(--borde-hondo); } .cifra-numero { font-family: 'Lora', Georgia, serif; font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 600; line-height: 1; color: var(--brillo); font-variant-numeric: tabular-nums; } .cifra-pie { font-size: var(--micro); line-height: 1.45; color: var(--sobre-hondo-tenue); } @media (max-width: 760px) { .cifras-rejilla { grid-template-columns: repeat(2, 1fr); gap: var(--e3) var(--e2); } } /* ═══════════════════════════════════════════════════════════════════════════ LAS SECCIONES DE FUNCIÓN · v574 ═══════════════════════════════════════════════════════════════════════════ Cabeza común para NotarIA, Antecedentes y Escudo: rótulo, titular, entrada y, si hace falta, una lista. Misma métrica en las tres para que el ojo reconozca «esto es una función» sin leer. ═══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ EL LÍMITE DE ANCHO VA EN EL TEXTO, NO EN EL CONTENEDOR · v577 ══════════════════════════════════════════════════════════════════════════ Estos bloques llevan a la vez `.lienzo` (que centra con `margin-inline: auto`) y un `max-width` propio. El resultado no era un texto de 62 caracteres alineado a la izquierda: era un bloque de 62 caracteres CENTRADO dentro de los 1280 del lienzo, mientras el contenido de debajo empezaba en el borde izquierdo. Los títulos aparecían desplazados hacia el medio y sin alinearse con nada. Se vio en una captura de pantalla. La regla: el contenedor conserva el ancho del lienzo y el límite de lectura se lo pone cada párrafo. Así los titulares arrancan en la misma vertical que la lista, la rejilla o las preguntas que vienen debajo. ══════════════════════════════════════════════════════════════════════════ */ .funcion-cabeza { margin-bottom: var(--e4); } .funcion-cabeza > h2, .funcion-cabeza > p, .funcion-cabeza > ul, .funcion-cabeza > .funcion-pastillas, .funcion-cabeza > .funcion-pie { max-width: 62ch; } .funcion-titulo { font-size: var(--titulo); line-height: 1.12; margin: var(--e2) 0 0; } .funcion-entrada { font-size: var(--subtitulo); line-height: 1.55; margin: var(--e3) 0 0; } .sup-crema .funcion-entrada { color: var(--gris); } .sup-hondo .funcion-entrada, .sup-tinta .funcion-entrada { color: var(--sobre-hondo); } .sup-crema .funcion-lista li { color: var(--gris); } /* ═══════════════════════════════════════════════════════════════════════════ LAS NUEVE FUENTES · v574 ═══════════════════════════════════════════════════════════════════════════ */ .fuentes-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); } /* ═══════════════════════════════════════════════════════════════════════════ EL ESCUDO · v574 ═══════════════════════════════════════════════════════════════════════════ */ .escudo-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); } /* ═══════════════════════════════════════════════════════════════════════════ EL SEMÁFORO DE FIRMA · v574 ═══════════════════════════════════════════════════════════════════════════ Tres luces. El punto de color late despacio, lo justo para que se lea como un estado vivo y no como una viñeta. El rojo no late más rápido: alarmar no es informar. ═══════════════════════════════════════════════════════════════════════════ */ .semaforo-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); } @keyframes latir { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* ═══════════════════════════════════════════════════════════════════════════ LAS DIEZ FICHAS · v574 ═══════════════════════════════════════════════════════════════════════════ Rejilla de cuatro columnas donde las dos primeras fichas ocupan el doble: NotarIA y el Motor de Antecedentes son las que venden, y el tamaño lo dice antes que el texto. El número va de marca de agua, grande y tenue. ═══════════════════════════════════════════════════════════════════════════ */ .funciones-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2); } .ficha { position: relative; overflow: hidden; border: 1px solid var(--borde-hondo); border-radius: 6px; padding: 20px 20px 22px; background: rgba(255, 255, 255, .025); transition: border-color .35s var(--curva), background .35s var(--curva); } .ficha:hover { border-color: var(--laton); background: rgba(217, 184, 113, .06); } .ficha-ancha { grid-column: span 2; } .ficha h3 { font-family: 'Lora', Georgia, serif; font-size: 1.18rem; font-weight: 600; line-height: 1.2; margin: 0 0 8px; color: var(--crema); position: relative; } .ficha-ancha h3 { font-size: 1.45rem; } .ficha p { font-size: var(--micro); line-height: 1.6; color: var(--sobre-hondo); margin: 0; } @media (max-width: 1000px) { .funciones-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .funciones-rejilla { grid-template-columns: 1fr; } .ficha-ancha { grid-column: span 1; } } @media (prefers-reduced-motion: reduce) { .ficha { transition: none; } } /* ═══════════════════════════════════════════════════════════════════════════ LAS SEIS PREGUNTAS · v574 ═══════════════════════════════════════════════════════════════════════════ Dos columnas: la pregunta en serifa a la izquierda, la respuesta a la derecha. En móvil se apilan y la pregunta conserva su filo de latón, que es lo que las separa unas de otras. ═══════════════════════════════════════════════════════════════════════════ */ .exigir-lista { display: grid; gap: 0; } /* ═══════════════════════════════════════════════════════════════════════════ PREGUNTAS FRECUENTES · v574 ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ EL CIERRE · v574 ═══════════════════════════════════════════════════════════════════════════ */ .cierre-caja > h2, .cierre-caja > p { max-width: 62ch; } .cierre-botones { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e4) 0 0; } .boton-suave { background: transparent; color: var(--crema); border: 1px solid var(--borde-hondo); } .boton-suave:hover { border-color: var(--laton); color: var(--brillo); } /* La coletilla de datos duros bajo una lista de función · v574 */ .funcion-pie { margin: var(--e3) 0 0; padding-left: var(--e2); border-left: 2px solid var(--laton); font-size: var(--micro); line-height: 1.6; color: var(--sobre-hondo-tenue); max-width: 58ch; } /* ═══════════════════════════════════════════════════════════════════════════ PASTILLEROS DE DATO · v576 ═══════════════════════════════════════════════════════════════════════════ Lo que antes eran puntos de lista sueltos. Dicen lo mismo, ocupan una línea y siguen siendo texto plano para quien lea la página con una máquina. ═══════════════════════════════════════════════════════════════════════════ */ .funcion-pastillas { display: flex; flex-wrap: wrap; gap: 7px; margin: var(--e3) 0 0; } .sup-crema .funcion-pastillas span { color: var(--laton-texto); border-color: rgba(169, 129, 46, .34); } /* ═══════════════════════════════════════════════════════════════════════════ LAS TRES REDES, YA DENTRO DE NOTARIA · v576 ═══════════════════════════════════════════════════════════════════════════ */ .redes-fila { margin-top: var(--e5); } /* ═══════════════════════════════════════════════════════════════════════════ LAS FICHAS, CON ICONO · v576 ═══════════════════════════════════════════════════════════════════════════ Sustituyen al número de marca de agua. Un icono de línea se reconoce antes que un «07», y además distingue de un vistazo una función de otra, que era justo lo que faltaba al compactar seis secciones en una rejilla. Los iconos van dibujados a mano en el propio HTML: la política de seguridad del sitio no carga nada de fuera, así que una librería de iconos no es una opción aquí, y tampoco hace falta para once trazos. ═══════════════════════════════════════════════════════════════════════════ */ .ficha-icono { display: block; width: 26px; height: 26px; color: var(--laton); margin-bottom: 12px; } .ficha-icono svg { width: 100%; height: 100%; display: block; } .ficha-marca { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; } .ficha-marca .ficha-icono { margin: 0; } .ficha-rotulo { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brillo); line-height: 1; } /* LA ESTRELLA se distingue por tres cosas y ni una más: filo de latón, un fondo apenas dorado y el titular más grande. Con cuatro empieza a chillar. */ .ficha-estrella { border-color: rgba(217, 184, 113, .45); background: linear-gradient(180deg, rgba(217, 184, 113, .10), rgba(217, 184, 113, .02)); } .ficha-estrella h3 { font-size: 1.6rem; } .ficha-estrella:hover { border-color: var(--brillo); } .ficha-pastillas { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; } .ficha-pastillas span { font-size: 11.5px; line-height: 1; color: var(--brillo); border: 1px solid rgba(217, 184, 113, .32); border-radius: 99px; padding: 5px 10px; white-space: nowrap; } .ficha-enlace { color: var(--brillo); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .ficha-enlace:hover { color: var(--crema); } /* LAS TRES LUCES, dentro de su ficha. El punto late despacio y el rojo no va más rápido que los otros: alarmar no es informar. */ /* ═══════════════════════════════════════════════════════════════════════════ REGLAS DE LAS OTRAS PÁGINAS, RECUPERADAS · v576 ═══════════════════════════════════════════════════════════════════════════ Al compactar la portada se hizo una limpieza de reglas sin uso mirando SOLO `index.html`, y este archivo lo comparten las siete páginas del sitio: se llevó por delante los estilos de `funciones.html`, `privacidad.html`, `datos.html` y las de cumplimiento. Se cazó comprobando las clases de todas las páginas contra el CSS, no las de una. Lección para la próxima limpieza: el conjunto de referencia es el sitio entero, nunca el documento que se está tocando. ═══════════════════════════════════════════════════════════════════════════ */ .legal-cabeza { margin-bottom: var(--e4); } .legal-cabeza h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height:1.02; margin-bottom: var(--e2); } .legal-fecha { font-size: var(--micro); letter-spacing:.14em; text-transform:uppercase; color: var(--gris); } .legal-aviso { border:1px solid var(--laton); border-radius:8px; background: color-mix(in srgb, var(--laton) 9%, transparent); padding: var(--e3); margin: var(--e3) 0; } .legal-aviso p:last-child { margin-bottom:0; } .pasos { list-style:none; counter-reset:p; margin: var(--e3) 0; padding:0; } .pasos li { counter-increment:p; display:grid; grid-template-columns:34px 1fr; gap: var(--e2); padding:14px 0; border-top:1px solid var(--linea); } .pasos li:last-child { border-bottom:1px solid var(--linea); } .pasos li::before { content: counter(p); font-family:'Lora', Georgia, serif; font-size:1.25rem; color: color-mix(in srgb, var(--laton) 80%, transparent); } .pasos li > * { margin:0; } .func-nav-titulo { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--laton-texto); margin: 0 0 12px 14px; } .func-cabeza { margin-bottom: clamp(28px, 4vw, 48px); } .func-cabeza h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.03; margin: 10px 0 18px; color: var(--sobre-hondo); } .func-entradilla { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; color: rgba(233,237,245,.88); max-width: 46rem; margin: 0 0 18px; } .func-aviso { border-left: 3px solid var(--laton); padding: 14px 0 14px 18px; margin: 0 0 10px; color: rgba(233,237,245,.84); font-size: 15px; max-width: 46rem; } .func-aviso b { color: #F4F1E8; } .func-num { display: inline-flex; align-items: center; justify-content: center; width: 1.85em; height: 1.85em; flex: none; border-radius: 10px; background: rgba(201,162,39,.14); color: var(--laton-texto); font-size: .62em; font-weight: 700; font-variant-numeric: tabular-nums; } .func-sub { color: rgba(233,237,245,.70); font-size: 14.5px; margin: 0 0 22px 0; padding-left: calc(1.85em * .62 + 14px); }/* (v581: aquí había `.func-nav-titulo { display: none; }` sacada por error de su @media (max-width: 980px) en la v576; ocultaba el título del índice también en escritorio. Su versión correcta, dentro del @media, sigue más abajo.) */ /* ═══════════════════════════════════════════════════════════════════════════ LA REJILLA DE FUNCIONES, PULIDA · v576 ═══════════════════════════════════════════════════════════════════════════ Cuatro columnas y once fichas que cuadran exactas en cinco filas: la estrella ocupa la primera entera, las cuatro que más pesan van a media fila y las cuatro menores en una sola. Así la jerarquía se ve antes de leer. El hover levanta la ficha dos píxeles y enciende el filo. Nada más: once tarjetas moviéndose a la vez sería una feria. ═══════════════════════════════════════════════════════════════════════════ */ .ficha-entera { grid-column: 1 / -1; } .ficha { display: flex; flex-direction: column; transition: border-color .35s var(--curva), background .35s var(--curva), transform .35s var(--curva); } .ficha:hover { transform: translateY(-2px); } /* EL ICONO, sobre un disco tenue. Suelto se perdía contra el fondo oscuro; el disco le da peso sin pintarlo de otro color. */ .ficha-icono { width: 42px; height: 42px; padding: 9px; border-radius: 50%; background: rgba(217, 184, 113, .10); border: 1px solid rgba(217, 184, 113, .18); } .ficha:hover .ficha-icono { background: rgba(217, 184, 113, .16); } .ficha-marca .ficha-icono { width: 38px; height: 38px; padding: 8px; } /* La estrella, más aire y un filo superior que la corona. */ .ficha-estrella { padding-top: 24px; } .ficha-estrella::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--brillo), transparent); } .ficha-estrella p { max-width: 74ch; } /* En las anchas, el texto no se estira de lado a lado: 62 caracteres es donde el ojo deja de saltar de línea con esfuerzo. */ .ficha-ancha p { max-width: 62ch; } /* La cabecera de la sección, con el mismo filete que separa las fichas. */ #funciones .funcion-cabeza { border-bottom: 1px solid var(--borde-hondo); padding-bottom: var(--e3); } @media (max-width: 1000px) { .ficha-entera, .ficha-ancha { grid-column: span 2; } } @media (max-width: 620px) { .ficha-entera, .ficha-ancha { grid-column: span 1; } .ficha-icono { width: 36px; height: 36px; padding: 7px; } } @media (prefers-reduced-motion: reduce) { .ficha:hover { transform: none; } } /* ═══════════════════════════════════════════════════════════════════════════ LAS PREGUNTAS, PLEGADAS · v576 ═══════════════════════════════════════════════════════════════════════════ Con `
`, igual que el menú de arriba: el navegador se encarga de abrir, cerrar, del teclado y del lector de pantalla, y esta web no puede ejecutar JavaScript aunque quisiera. LO QUE IMPORTA PARA QUIEN NOS LEE CON UNA MÁQUINA: el texto de la respuesta está en el documento esté plegado o no. `details` no oculta contenido del HTML, solo lo colapsa al pintarlo, así que los buscadores y los modelos que resumen la página se lo llevan entero, con sus microdatos `FAQPage`. La primera va abierta para que se vea de qué va esto sin tener que tocar. ═══════════════════════════════════════════════════════════════════════════ */ /* La flecha: dos filos girados. Al abrir gira y apunta hacia arriba. */ /* La respuesta entra desde arriba al desplegarse. Donde el navegador no entienda la animación de `details`, simplemente aparece. */ /* En una sola columna: una pregunta plegada ocupa una línea, así que dos columnas obligaban al ojo a saltar de lado para nada. */ /* El número de cada pregunta. Va en el latón oscuro del texto y no en el claro: sobre crema, el claro se queda en 3,4 de contraste y el mínimo es 4,5. Es la misma trampa que ya está anotada arriba con `--laton-texto`. */ .exigir-num { display: block; margin-bottom: 6px; font-family: 'Lora', Georgia, serif; font-size: .9rem; font-weight: 600; color: var(--laton-texto); letter-spacing: .06em; font-variant-numeric: tabular-nums; } /* ═══════════════════════════════════════════════════════════════════════════ LAS CIFRAS, DENTRO DE LA PRIMERA PANTALLA · v576 ═══════════════════════════════════════════════════════════════════════════ Estaban en una sección propia, justo debajo de la portada, y nunca se veían sin hacer scroll: `.portada` se reserva `100svh`, así que por corto que sea el titular la franja empezaba un píxel después del borde inferior. Se vio en una captura de pantalla. La portada ya era una rejilla de dos filas (`1fr auto`): la segunda la ocupaba el zócalo de contadores que se retiró en la v576, y ahí entran las cifras sin tocar la altura de nada. En pantallas bajas (un portátil de 768 con su barra de navegador) la portada suelta el `100svh` y se ajusta al contenido: es preferible que la página empiece a rodar antes a que el titular quede aplastado. ═══════════════════════════════════════════════════════════════════════════ */ .portada > .cifras-barra { /* ── CON FONDO PROPIO, NO FLOTANDO SOBRE LA TRAMA · v577 ───────────── Al bajarla dentro de la portada perdió el fondo que le daba su sección: los números quedaban encima del enrejado de logotipos, con separadores que apenas se veían y unos pies casi ilegibles. Parecía apagada. Ahora se apoya sobre un tono más oscuro que la propia portada, con un filo de latón que la separa del hero y separadores visibles. El fondo va a lo ancho de toda la ventana aunque la rejilla siga centrada, porque una franja que se corta a los 1280 px se lee como un recuadro suelto. ─────────────────────────────────────────────────────────────────── */ align-self: end; position: relative; z-index: 1; /* la trama del fondo va en 0: sin esto podría cruzarla */ padding: var(--e3) 0; background: #0A1426; border-top: 1px solid rgba(217, 184, 113, .22); border-bottom: 0; box-shadow: 0 0 0 100vmax #0A1426; clip-path: inset(0 -100vmax); } .portada > .cifras-barra .cifra-celda { border-left: 1px solid rgba(255, 255, 255, .09); } .portada > .cifras-barra .cifra-celda:first-child { border-left: 0; padding-left: 0; } .portada > .cifras-barra .cifra-numero { color: #E7C787; } .portada > .cifras-barra .cifra-pie { color: #A6B2C8; } .portada { padding-top: clamp(96px, 11vh, 128px); } /* ══════════════════════════════════════════════════════════════════════════ PANTALLAS BAJAS: SE COMPACTA, NO SE SUELTA LA ALTURA · v578 ══════════════════════════════════════════════════════════════════════════ Esta regla decía `min-height: auto`, y con eso la portada dejaba de ocupar la pantalla: quedaba un hueco oscuro debajo de la franja de cifras y asomaba el blanco de la sección siguiente nada más abrir la página. Y no era un caso raro. Windows con el escalado al 150 % convierte un monitor de 1080 en 720 px de viewport CSS, así que la regla se dispara en una pantalla grande y corriente. Se vio en la captura de Esteban. Lo correcto es lo contrario: mantener la altura completa y encoger el contenido para que quepa. Si el hero no cabe, el problema es que el hero es demasiado grande, no que la portada deba dejar de llenar la ventana. ══════════════════════════════════════════════════════════════════════════ */ @media (max-height: 820px) and (min-width: 861px) { .portada { padding-top: clamp(84px, 9vh, 104px); } .portada h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); } .portada-entrada { margin-top: 14px; font-size: clamp(14px, 1.05vw, 16px); } .portada-enlace { margin-top: var(--e2); } .cifra-numero { font-size: clamp(1.5rem, 2.4vw, 2rem); } .cifra-pie { font-size: 11.5px; } .portada > .cifras-barra { padding: var(--e2) 0; } } /* Los nombres de las listas, dentro del texto de la ficha. Van en negrita y en el latón claro: son marcas que se buscan por su nombre (OFAC, ONU) y se perdieron al comprimir la sección del cumplimiento en una ficha. · v576 */ .ficha p strong { color: var(--brillo); font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════════════ EL TABLERO DE VERIFICACIÓN · v577 ═══════════════════════════════════════════════════════════════════════════ La pieza de la portada. Siete fuentes que se comprueban una tras otra y un visto bueno al final; cinco segundos y vuelve a empezar. EL RITMO ES LO QUE LO HACE CREÍBLE: cada fila entra con su retardo, y el visto aparece CUATRO DÉCIMAS DESPUÉS que el texto de su fila. Si llegaran a la vez se leería como una lista que se pinta; así se lee como algo que se está comprobando. Todo son retardos sobre una misma animación de cinco segundos en bucle: sin JavaScript, que esta web no puede ejecutarlo de todas formas. ═══════════════════════════════════════════════════════════════════════════ */ /* La que sale se va hacia el otro lado, para que el movimiento tenga dirección y no sea un simple fundido. */ /* El tablero ocupa la columna derecha de la rejilla de doce, donde estaba la foja y, antes, el monitor. */ /* EL ENLACE DE LA PORTADA. Donde estaba el botón con caja y flecha: en una portada sobria, un enlace subrayado pide lo mismo sin gritar. */ .portada-enlace { /* `text-decoration: none` y no solo el filo de abajo: los enlaces de fondo oscuro ya vienen subrayados por la hoja base, y con el `border-bottom` salían DOS rayas, una pegada a la otra. · v578 */ display: inline-flex; align-items: center; gap: 8px; margin-top: var(--e3); font-size: var(--menor); color: var(--brillo); text-decoration: none; border-bottom: 1px solid rgba(217, 184, 113, .45); padding-bottom: 3px; transition: color .25s var(--curva), border-color .25s var(--curva); } .portada-enlace::after { content: "→"; font-size: 1.05em; line-height: 1; } .portada-enlace:hover { color: var(--crema); border-color: var(--crema); } /* ═══════════════════════════════════════════════════════════════════════════ LA SECCIÓN BREVE · v577 ═══════════════════════════════════════════════════════════════════════════ «Una escritura no se puede corregir después» es una idea de una línea y ocupaba una sección entera con el alto de las demás: rótulo, titular en dos renglones, párrafo de seis y una rúbrica. Aquí se queda con la mitad de aire vertical y el texto en dos columnas, de modo que el titular y su explicación se leen de un vistazo, sin que la página tenga que rodar para pasar de largo una idea que se entiende sola. ═══════════════════════════════════════════════════════════════════════════ */ .bloque-breve { padding: clamp(52px, 5.6vw, 84px) 0; } .oficio-fila { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--e4); align-items: end; } .oficio-texto { min-width: 0; } .oficio-titulo { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.14; margin: var(--e2) 0 0; } .oficio-nota { margin: 0; font-size: var(--menor); line-height: 1.6; color: var(--gris); max-width: 52ch; } @media (max-width: 860px) { .oficio-fila { grid-template-columns: 1fr; gap: var(--e2); align-items: start; } } /* En un teléfono estrecho, «INTERPOL · FBI» más «sin notificaciones» no caben en la misma línea con el nombre reservando 8,5 rem. La fila se parte en dos renglones antes que desbordar. · v577 */ /* ═══════════════════════════════════════════════════════════════════════════ TEXTO JUSTIFICADO · v578 ═══════════════════════════════════════════════════════════════════════════ Los párrafos de la portada y de las fichas llegan al mismo margen por los dos lados, como una página impresa, que es como se lee una escritura. `text-wrap: pretty` y la partición de palabras van con ello: justificar sin guiones abre ríos de espacio entre palabras, sobre todo en columnas estrechas como las fichas de una sola columna. ═══════════════════════════════════════════════════════════════════════════ */ .portada-entrada, .ficha p, .funcion-entrada, .oficio-nota { text-align: justify; text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; } @media (max-width: 620px) { /* En una columna muy estrecha, justificar deja huecos feos aunque haya guiones: por debajo de este ancho se vuelve a la izquierda. */ .portada-entrada, .ficha p, .funcion-entrada, .oficio-nota { text-align: left; } } /* ═══════════════════════════════════════════════════════════════════════════ LA FICHA ESTRELLA: SU TEXTO LLEGA HASTA EL BORDE · v578 ═══════════════════════════════════════════════════════════════════════════ Llevaba `max-width: 74ch`, heredado de cuando la estrella ocupaba media fila. Desde que ocupa la fila entera (1280 px), 74 caracteres se quedan a la mitad del cuadro y el párrafo parecía cortado por la mitad. ═══════════════════════════════════════════════════════════════════════════ */ .ficha-estrella p { max-width: none; } /* ═══════════════════════════════════════════════════════════════════════════ EL HOVER DE LA ESTRELLA NO PUEDE OSCURECERLA · v578 ═══════════════════════════════════════════════════════════════════════════ `.ficha:hover` pone un fondo dorado plano al 6 %. En las demás fichas eso las ilumina; en la estrella, que ya tiene un degradado del 10 % al 2 %, lo SUSTITUYE por algo más oscuro arriba: al pasar el ratón parpadeaba a azul y volvía. Aquí el hover sube el degradado en vez de reemplazarlo. ═══════════════════════════════════════════════════════════════════════════ */ .ficha-estrella:hover { border-color: var(--brillo); background: linear-gradient(180deg, rgba(217, 184, 113, .17), rgba(217, 184, 113, .05)); } /* ═══════════════════════════════════════════════════════════════════════════ LA NOTA DEL PROBLEMA, EN SU CAJA · v578 ═══════════════════════════════════════════════════════════════════════════ Suelta al lado del titular parecía flotar sin pertenecer a nada. En una caja con su filo de latón se lee como lo que es: el apunte que matiza la frase de al lado. ═══════════════════════════════════════════════════════════════════════════ */ .oficio-caja { border: 1px solid var(--linea); border-left: 3px solid var(--laton); border-radius: 0 6px 6px 0; background: var(--carta); padding: 16px 20px; } .oficio-caja .oficio-nota { max-width: none; } /* ═══════════════════════════════════════════════════════════════════════════ LA DEMOSTRACIÓN, SIN AIRE DE MÁS · v578 ═══════════════════════════════════════════════════════════════════════════ Perdió su cabecera y después su rótulo, así que la sección se quedó con el alto de las que sí llevan texto encima. Aquí basta con la mitad: las dos ventanas se explican solas. ═══════════════════════════════════════════════════════════════════════════ */ #notaria-ia { padding: clamp(56px, 6vw, 92px) 0; } /* ══ CICLO DE LA «IA» · generado por tipografias.py ══ */ /* NO SE EDITA A MANO: lo reescribe `python3 web/tipografias.py` (o `fuentes-ia` en el servidor). 8 tipografías · 0.92 s cada una · ciclo de 7.36 s · espacio con «Notar»: -0.020 em Todas igualadas a Lora, la letra de «Notar»: misma altura de mayúscula (size-adjust), mismas alturas de línea (ascent/descent/line-gap, cada una DIVIDIDA por size-adjust, que también las escala) y el mismo hueco con «Notar» (text-indent por fuente). La caja no se mueve. */ @font-face { font-family: 'IAlora'; src: url('/fuentes/ia-lora-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: block; unicode-range: U+0041, U+0049; /* solo «A» e «I» */ size-adjust: 100.00%; ascent-override: 100.60%; descent-override: 27.40%; line-gap-override: 0%; } @font-face { font-family: 'IAbodoni-moda'; src: url('/fuentes/ia-bodoni-moda-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: block; unicode-range: U+0041, U+0049; /* solo «A» e «I» */ size-adjust: 93.33%; ascent-override: 107.79%; descent-override: 29.36%; line-gap-override: 0%; } @font-face { font-family: 'IAroboto-slab'; src: url('/fuentes/ia-roboto-slab-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: block; unicode-range: U+0041, U+0049; /* solo «A» e «I» */ size-adjust: 98.46%; ascent-override: 102.17%; descent-override: 27.83%; line-gap-override: 0%; } @font-face { font-family: 'IAcinzel'; src: url('/fuentes/ia-cinzel-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: block; unicode-range: U+0041, U+0049; /* solo «A» e «I» */ size-adjust: 100.00%; ascent-override: 100.60%; descent-override: 27.40%; line-gap-override: 0%; } @font-face { font-family: 'IAlibre-caslon-text'; src: url('/fuentes/ia-libre-caslon-text-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: block; unicode-range: U+0041, U+0049; /* solo «A» e «I» */ size-adjust: 90.91%; ascent-override: 110.66%; descent-override: 30.14%; line-gap-override: 0%; } @font-face { font-family: 'IAeb-garamond'; src: url('/fuentes/ia-eb-garamond-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: block; unicode-range: U+0041, U+0049; /* solo «A» e «I» */ size-adjust: 107.03%; ascent-override: 93.99%; descent-override: 25.60%; line-gap-override: 0%; } @font-face { font-family: 'IAmerriweather'; src: url('/fuentes/ia-merriweather-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: block; unicode-range: U+0041, U+0049; /* solo «A» e «I» */ size-adjust: 94.21%; ascent-override: 106.78%; descent-override: 29.08%; line-gap-override: 0%; } @font-face { font-family: 'IAplayfair-display'; src: url('/fuentes/ia-playfair-display-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: block; unicode-range: U+0041, U+0049; /* solo «A» e «I» */ size-adjust: 98.87%; ascent-override: 101.75%; descent-override: 27.71%; line-gap-override: 0%; } @keyframes ia-viva { 0.0%, 12.499% { font-family: 'IAlora', 'Lora', Georgia, serif; font-weight: 700; text-indent: 0.0020em; } /* Lora */ 12.5%, 24.999% { font-family: 'IAbodoni-moda', 'Lora', Georgia, serif; font-weight: 700; text-indent: 0.0310em; } /* Bodoni Moda */ 25.0%, 37.499% { font-family: 'IAroboto-slab', 'Lora', Georgia, serif; font-weight: 700; text-indent: 0.0251em; } /* Roboto Slab */ 37.5%, 49.999% { font-family: 'IAcinzel', 'Lora', Georgia, serif; font-weight: 700; text-indent: 0.0100em; } /* Cinzel */ 50.0%, 62.499% { font-family: 'IAlibre-caslon-text', 'Lora', Georgia, serif; font-weight: 700; text-indent: 0.0138em; } /* Libre Caslon Text */ 62.5%, 74.999% { font-family: 'IAeb-garamond', 'Lora', Georgia, serif; font-weight: 600; text-indent: 0.0338em; } /* EB Garamond */ 75.0%, 87.499% { font-family: 'IAmerriweather', 'Lora', Georgia, serif; font-weight: 700; text-indent: 0.0148em; } /* Merriweather */ 87.5%, 100.0% { font-family: 'IAplayfair-display', 'Lora', Georgia, serif; font-weight: 700; text-indent: 0.0184em; } /* Playfair Display */ } .ia-viva { color: var(--brillo); animation: ia-viva 7.36s steps(1, end) infinite; display: inline-block; width: 1.1799em; /* la más ancha, ya compensada */ text-align: left; white-space: nowrap; margin-left: -0.020em; /* el espacio con «Notar» */ font-style: normal; } @media (prefers-reduced-motion: reduce) { .ia-viva { animation: none; font-family: 'IAlora', 'Lora', Georgia, serif; font-weight: 700; text-indent: 0.0020em; } } /* ══ fin del ciclo de la «IA» ══ */ /* ═══════════════════════════════════════════════════════════════════════════ EL CARRUSEL · v580 ═══════════════════════════════════════════════════════════════════════════ La pila es una rejilla de UNA celda con las tres tarjetas encima. Su altura la marca la más alta, que al tener las tres la misma estructura son las tres: el contenedor no cambia de tamaño al pasar de una a otra, que era lo que se pedía. `min-height` no se fija a mano a propósito: un número inventado se queda corto el día que una tarjeta lleve una línea más, y entonces el texto se sale. Que lo decida el contenido. ═══════════════════════════════════════════════════════════════════════════ */ /* LOS MANDOS. Flechas a los lados, puntos en medio. */ /* El punto de la tarjeta a la vista se alarga en vez de solo encenderse: a ese tamaño, un cambio de color se ve poco y uno de forma se ve seguro. */ /* ── SIN JAVASCRIPT SIGUE SIENDO ÚTIL ──────────────────────────────────── Si el guion no llega, no hay `data-activa` en ninguna tarjeta y no se vería ninguna. Esta regla las devuelve al flujo: se ponen en fila, con scroll horizontal y anclaje, y los enlaces de los mandos llevan a cada una. Es lo que ve un buscador y lo que queda si algo falla. */ /* ═══════════════════════════════════════════════════════════════════════════ EL ENREJADO, TAMBIÉN EN LAS FUNCIONES · v580 ═══════════════════════════════════════════════════════════════════════════ El mismo fondo de sellos de la portada, más apagado, porque aquí compite con once fichas y no con un titular. LAS FICHAS PASAN A FONDO SÓLIDO. Tenían `rgba(255,255,255,.025)`, que sobre un color liso se ve igual pero sobre el enrejado deja pasar los logotipos por debajo: los recuadros se perdían contra el fondo y el texto quedaba sobre un dibujo. Los tonos de abajo son EXACTAMENTE el resultado de mezclar aquellos translúcidos con el azul de la sección, así que el aspecto no cambia; lo que cambia es que ahora tapan. ═══════════════════════════════════════════════════════════════════════════ */ #funciones { position: relative; overflow: hidden; } .trama-funciones { opacity: .13; rotate: -5deg; } #funciones > .lienzo { position: relative; z-index: 1; } .ficha { background: #141F33; } .ficha:hover { background: #1A2332; } .ficha-estrella { background: linear-gradient(180deg, #222935, #121C2F); } .ficha-estrella:hover { background: linear-gradient(180deg, #313439, #182131); } /* Con el enrejado detrás, las fichas necesitan despegarse un poco más. */ .ficha { box-shadow: 0 10px 24px rgba(0, 0, 0, .28); } .ficha-estrella { box-shadow: 0 16px 38px rgba(0, 0, 0, .38); } /* ═══════════════════════════════════════════════════════════════════════════ LAS SUBPÁGINAS, RESTAURADAS DESDE LA v575 · v581 ═══════════════════════════════════════════════════════════════════════════ En la v576 se hizo una limpieza de reglas «sin uso» mirando SOLO el landing. Se recuperaron entonces las reglas cuyas clases habían quedado sin ningún estilo, pero NO las que compartían clase con otra regla superviviente: `.hoja-legal`, `.indice`, `.legal-cuerpo`, `.func-nav`… conservaban alguna regla suelta, así que la comprobación decía «todas las clases tienen estilo» y el destrozo pasó por bueno. Privacidad, datos, cumplimiento, calendario, manual PLAFT y funciones llevaban tres versiones sin su hoja crema, con el texto flotando sobre el enrejado y los enlaces en azul de navegador. Esta vez se hizo con un navegador de verdad: se cargó cada página, se preguntó a qué elementos aplica cada regla desaparecida, y se restauraron SOLO las que aplican a subpáginas y a ningún elemento del landing. Después se capturó cada subpágina y se comparó píxel a píxel con la v575. LA LECCIÓN, OTRA VEZ Y MÁS PRECISA: «ninguna clase sin estilo» no significa «ninguna regla perdida». Una regla borrada puede dejar su clase con otra regla viva y el hueco no se ve en ninguna lista. Lo que se ve es la página. ═══════════════════════════════════════════════════════════════════════════ */ .hoja-legal { position:relative; z-index:2; background: var(--crema); color: var(--texto); border:1px solid var(--linea); border-radius:18px; padding: clamp(28px, 4vw, 72px); box-shadow: 0 30px 80px rgba(0,0,0,.34); } .hoja-legal h1, .hoja-legal h2, .hoja-legal h3 { color: var(--tinta); } .hoja-legal p, .hoja-legal li { color: var(--texto); } .hoja-legal strong { color: var(--tinta); } .hoja-legal a { color: var(--tinta); text-decoration-color: var(--laton); } .hoja-legal a:hover { text-decoration-color: var(--tinta); } .resumen p { font-family:'Lora', Georgia, serif; font-size: var(--subtitulo); line-height:1.5; color: var(--tinta); margin:0; max-width:56ch; } .indice ol { list-style:none; margin:0; padding:0; counter-reset:i; } .indice li { counter-increment:i; } .indice a { display:block; padding:8px 0; font-size: var(--menor); color: var(--gris); text-decoration:none; transition: color .2s ease, padding-left .2s var(--curva); } .indice a::before { content: counter(i, decimal-leading-zero); font-variant-numeric: tabular-nums; margin-right:10px; font-size: var(--micro); color: color-mix(in srgb, var(--laton) 75%, transparent); } .indice a:hover { color: var(--tinta); padding-left:5px; } .legal-cuerpo { grid-column: 6 / 13; } .legal-cuerpo h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin: var(--e5) 0 var(--e2); scroll-margin-top:120px; } .legal-cuerpo h2:first-child { margin-top:0; } .legal-cuerpo p, .legal-cuerpo li { max-width:68ch; } .legal-cuerpo ul { margin: 0 0 var(--e2); padding-left:20px; } .legal-cuerpo li { margin-bottom:8px; } @media (max-width: 1000px) { .indice { position:static; margin-bottom: var(--e4); } } .func-nav a { display: flex; align-items: baseline; gap: 12px; padding: 11px 14px; border-radius: 10px; color: rgba(233,237,245,.68); text-decoration: none; font-size: 14.5px; line-height: 1.3; border-left: 2px solid transparent; transition: background .2s ease, color .2s ease, border-color .2s ease; } .func-nav a:hover { background: rgba(255,255,255,.05); color: #F4F1E8; } .func-nav a b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--laton-texto); flex: none; min-width: 1.1em; } .func-seccion { /* `scroll-margin` para que al saltar desde el índice el título no quede debajo de la barra fija. */ scroll-margin-top: 96px; margin-bottom: clamp(20px, 2.6vw, 34px); /* ── FONDO SÓLIDO, NO UN VELO ────────────────────────────────────── Estaba al 3,5% de blanco sobre la trama: los sellos del fondo se veían A TRAVÉS del texto y leer ochenta puntos así cansa a los dos párrafos. Una página de referencia tiene que leerse sin esfuerzo; el fondo se disfruta en la portada, aquí estorba. */ background: #101B31; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; box-shadow: 0 18px 50px rgba(4,8,16,.32); padding: clamp(22px, 2.6vw, 38px); } .func-seccion > h2 { display: flex; align-items: center; gap: 14px; font-size: clamp(1.35rem, 2.1vw, 1.85rem); line-height: 1.15; margin: 0 0 6px; color: var(--sobre-hondo); } .func-seccion h3 { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--laton-texto); margin: 26px 0 12px; } .func-seccion h3:first-of-type { margin-top: 4px; } .func-seccion li:last-child { border-bottom: 0; } .func-seccion li .fi { width: 19px; height: 19px; flex: none; margin-top: .18em; color: var(--laton); opacity: .82; } .func-seccion li b { color: #F4F1E8; font-weight: 600; } .func-cifra { background: #101B31; padding: 18px 20px; } .func-cifra b { display: block; font-family: 'Lora', Georgia, serif; font-size: clamp(1.5rem, 2.4vw, 2.1rem); color: #F4F1E8; line-height: 1; margin-bottom: 6px; font-variant-numeric: tabular-nums; } .func-cifra span { font-size: 13px; color: rgba(233,237,245,.6); line-height: 1.35; } @media (max-width: 980px) { .funciones-marco { grid-template-columns: minmax(0, 1fr); gap: 20px; } .func-nav { position: sticky; top: 74px; z-index: 3; max-height: none; /* `overflow: clip` y no `visible`: la tira de dentro se desplaza a lo ancho, y con los márgenes negativos el contenedor sobresalía del viewport y aparecía barra horizontal en toda la página. Se vio midiendo `scrollWidth` contra `innerWidth`, no mirando. */ overflow: clip; margin: 0 calc(var(--e3) * -1); padding: 10px var(--e3); max-width: 100vw; background: linear-gradient(180deg, rgba(6,12,24,.92), rgba(6,12,24,.86)); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.07); } .func-nav-titulo { display: none; } .func-nav-lista::-webkit-scrollbar { display: none; } .func-nav a { flex: none; white-space: nowrap; border-left: 0; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; padding: 9px 15px; font-size: 13.5px; min-height: 40px; align-items: center; } } /* LAS DE MÓVIL, DESPUÉS DE LAS GENERALES · v581 Las reglas restauradas arriba van al final del archivo, y eso las pone DESPUÉS de sus versiones para móvil, que seguían vivas en su sitio de siempre. Con la misma especificidad gana la última: `.legal-cuerpo` volvía a sus dos columnas en un teléfono y la página se salía 170 px por la derecha. Se repiten aquí, en su orden de la v575, para que vuelvan a mandar en pantalla pequeña. Duplicar una regla idéntica no cambia nada más. */ @media (max-width: 1000px) { .ancho-7, .ancho-6, .ancho-4, .todo, .al-margen, .indice, .legal-cuerpo { grid-column: 1 / -1; } .indice { position:static; margin-bottom: var(--e4); } } @media (max-width: 980px) { .funciones-marco { grid-template-columns: minmax(0, 1fr); gap: 20px; } .func-nav { position: sticky; top: 74px; z-index: 3; max-height: none; /* `overflow: clip` y no `visible`: la tira de dentro se desplaza a lo ancho, y con los márgenes negativos el contenedor sobresalía del viewport y aparecía barra horizontal en toda la página. Se vio midiendo `scrollWidth` contra `innerWidth`, no mirando. */ overflow: clip; margin: 0 calc(var(--e3) * -1); padding: 10px var(--e3); max-width: 100vw; background: linear-gradient(180deg, rgba(6,12,24,.92), rgba(6,12,24,.86)); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.07); } .func-nav-titulo { display: none; } .func-nav-lista { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .func-nav-lista::-webkit-scrollbar { display: none; } .func-nav a { flex: none; white-space: nowrap; border-left: 0; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; padding: 9px 15px; font-size: 13.5px; min-height: 40px; align-items: center; } } /* ═══════════════════════════════════════════════════════════════════════════ LA ENTRADA DE LOS BLOQUES: UNA VEZ, ENTERA, Y NO ATADA AL SCROLL · v581 ═══════════════════════════════════════════════════════════════════════════ `.surge` animaba con `animation-timeline: view()`: la opacidad de cada bloque dependía de CUÁNTO había entrado en la pantalla. Parece elegante y en la práctica deja la fila de abajo siempre a medio camino: al 40, al 70, al 90 %. Y como es la opacidad del bloque entero, el enrejado del fondo se transparentaba a través de las fichas por mucho que tuvieran fondo sólido. Lo vio Esteban: «a medida que van saliendo por abajo, cada vez son un poco más transparentes». Se midió con el navegador y era exactamente eso. Ahora un observador marca `.visto` cuando el bloque asoma, y la entrada se COMPLETA en siete décimas pase lo que pase con el scroll. Un bloque o se está terminando de mostrar o está entero; nunca se queda a medias. `html:not(.sin-guion)`: sin JavaScript nadie pondría `.visto` y los bloques se quedarían invisibles. La marca `sin-guion` viene puesta en el HTML y el guion la quita al arrancar; mientras siga ahí, todo se ve sin animación. ═══════════════════════════════════════════════════════════════════════════ */ /* `translate` Y NO `transform`: varias piezas con `.surge` llevan su propio `transform` (la ventana del escaneo va torcida, la de la matriz elevada 6 px). Animar `transform` y dejarlo en `none` al terminar les borraba ese gesto: se vio comparando capturas, 47.000 píxeles de diferencia en esa sección. La propiedad `translate` se SUMA al `transform` de cada pieza en vez de pisarlo, así que el gesto propio sobrevive a la entrada. */ html:not(.sin-guion) .surge { opacity: 0; translate: 0 18px; transition: opacity .7s var(--curva), translate .7s var(--curva); transition-delay: var(--retardo, 0s); } html:not(.sin-guion) .surge-lado { opacity: 0; translate: -18px 0; transition: opacity .7s var(--curva), translate .7s var(--curva); transition-delay: var(--retardo, 0s); } html:not(.sin-guion) .surge.visto, html:not(.sin-guion) .surge-lado.visto { opacity: 1; translate: none; } @media (prefers-reduced-motion: reduce) { html:not(.sin-guion) .surge, html:not(.sin-guion) .surge-lado { opacity: 1; translate: none; transition: none; } } /* ═══════════════════════════════════════════════════════════════════════════ EL MENÚ DE TELÉFONO · v581 ═══════════════════════════════════════════════════════════════════════════ Medido con un navegador a 360, 390 y 430 px: la barra de escritorio necesita unos 540 y el botón del panel acababa SIEMPRE en el píxel 586. Desde un teléfono no se podía entrar al panel, y «Legal» tampoco se veía. Por debajo de 640 px (donde la barra deja de caber) la fila de pestañas se esconde y aparece un botón de menú. El de escritorio no cambia en nada. EL BOTÓN lleva el mismo fondo sólido que el del panel, a su lado: la cabecera pasa de oscura a crema al hacer scroll, y un icono que dependiera del fondo habría que pintarlo dos veces. Con fondo propio se lee en los dos. LA HOJA es crema maciza con texto oscuro, sin transparencias: se abre encima de lo que haya, sea el enrejado de la portada o el texto de una página legal, y tiene que leerse igual sobre cualquiera. ═══════════════════════════════════════════════════════════════════════════ */ .menu-movil { display: none; } @media (max-width: 640px) { .pestanas, .separador { display: none !important; } .menu-movil { display: block; } .menu { gap: 8px; } } .menu-movil-boton { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; /* el mínimo que pide un dedo */ border-radius: 50%; background: #1B2A4A; border: 1px solid rgba(217, 184, 113, .28); transition: background .25s var(--curva), border-color .25s var(--curva); } .menu-movil-boton::-webkit-details-marker { display: none; } .menu-movil-boton:focus-visible { outline: 3px solid var(--brillo); outline-offset: 3px; } .menu-movil[open] .menu-movil-boton { background: var(--laton); border-color: var(--brillo); } /* Las tres rayas que se cruzan en una X al abrir. */ .menu-movil-rayas { position: relative; width: 18px; height: 12px; display: block; } .menu-movil-rayas i { position: absolute; left: 0; right: 0; height: 1.8px; border-radius: 2px; background: #FBFAF4; transition: transform .3s var(--curva), opacity .2s var(--curva), top .3s var(--curva); } .menu-movil-rayas i:nth-child(1) { top: 0; } .menu-movil-rayas i:nth-child(2) { top: 5px; } .menu-movil-rayas i:nth-child(3) { top: 10px; } .menu-movil[open] .menu-movil-rayas i { background: #14203A; } .menu-movil[open] .menu-movil-rayas i:nth-child(1) { top: 5px; transform: rotate(45deg); } .menu-movil[open] .menu-movil-rayas i:nth-child(2) { opacity: 0; } .menu-movil[open] .menu-movil-rayas i:nth-child(3) { top: 5px; transform: rotate(-45deg); } .menu-movil-hoja { position: absolute; top: calc(100% + 8px); left: 12px; right: 12px; display: flex; flex-direction: column; padding: 10px 10px 12px; background: #FBFAF4; border: 1px solid #DCD6C2; border-radius: 14px; box-shadow: 0 26px 60px rgba(8, 14, 28, .45), 0 6px 16px rgba(8, 14, 28, .22); max-height: calc(100dvh - 96px); overflow-y: auto; transform-origin: top right; } .menu-movil[open] .menu-movil-hoja { animation: hoja-movil .26s var(--curva) both; } @keyframes hoja-movil { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } } .menu-movil-hoja a:not(.boton) { display: flex; align-items: center; min-height: 46px; padding: 0 12px; border-radius: 9px; font-size: 1rem; font-weight: 500; color: #1B2A4A; text-decoration: none; letter-spacing: 0; text-transform: none; } /* LA HOJA NO SE APUNTA A LA ANIMACIÓN DE LA BARRA. `.cabecera .menu a` lleva una animación atada al scroll que lleva el color de los enlaces de claro a oscuro según la cabecera se vuelve crema. La hoja es crema siempre, y la animación le ponía el azul pálido de la cabecera oscura: se leía mal y ninguna regla normal podía impedirlo, porque una animación pisa cualquier declaración. Se vio con el navegador: color calculado ≠ color declarado. */ .cabecera .menu .menu-movil-hoja a:not(.boton):not([aria-current]) { animation: none; color: #1B2A4A; } .menu-movil-hoja a:not(.boton):hover, .menu-movil-hoja a:not(.boton):focus-visible { background: #F1ECDC; } .menu-movil-hoja a[aria-current="page"] { background: #F1ECDC; color: #14203A; box-shadow: inset 3px 0 0 var(--laton); } .menu-movil-grupo { margin: 10px 12px 2px; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8A6A24; } .menu-movil-panel { margin-top: 12px; justify-content: center; min-height: 48px; width: 100%; } .menu-movil-panel .panel-texto { display: inline !important; } @media (prefers-reduced-motion: reduce) { .menu-movil[open] .menu-movil-hoja { animation: none; } .menu-movil-rayas i { transition: none; } } /* LOS BOTONES LARGOS PARTEN EN DOS LÍNEAS EN UN TELÉFONO · v581 `.boton` lleva `white-space: nowrap`, que en escritorio está bien y en un teléfono de 360 px hacía que «Ver cómo funciona el control de cumplimiento» acabara en el píxel 423: se salía de la hoja y de la pantalla. Venía de antes de la v575; se midió con el navegador. Solo en el contenido: los botones de la cabecera tienen su propio tratamiento. */ @media (max-width: 640px) { main .boton { white-space: normal; max-width: 100%; text-align: center; justify-content: center; line-height: 1.3; } } /* ═══════════════════════════════════════════════════════════════════════════ EL CARRUSEL DE LA PORTADA · v581 · reescrito entero ═══════════════════════════════════════════════════════════════════════════ Sustituye a 58 reglas y cuatro animaciones de tres versiones distintas. ── POR QUÉ SE REESCRIBIÓ Y NO SE RETOCÓ ───────────────────────────────── Cada fila tenía su propia animación infinita con su propio retardo. Un retardo solo se aplica a la PRIMERA vuelta: a partir de la segunda, la fila uno volvía a entrar mientras las otras seis seguían a la vista, y cada fila «reaparecía encima de sí misma». Es lo que vio Esteban. Con animaciones CSS por fila no tiene arreglo; hace falta que alguien diga «empieza la tarjeta» y ponga todas las filas a cero a la vez. ── CÓMO VA AHORA ──────────────────────────────────────────────────────── · El guion revela los PASOS (`[data-paso]`) de la tarjeta activa uno por uno y, cuando termina el último y pasa un rato, avanza a la siguiente. Cada vez que una tarjeta entra, sus pasos se ponen a cero de golpe (`.reinicio` quita las transiciones un instante) y vuelven a salir. · La dirección cuenta: ir adelante saca la tarjeta por la izquierda y mete la nueva por la derecha; ir atrás, al revés. · Las flechas tienen TOPE: en la primera no hay «anterior» y en la última no hay «siguiente». Solo el avance automático vuelve de la última a la primera, y lo hace en la dirección de volver, no como un portal. · Las tres tarjetas comparten celda de rejilla y se estiran a la más alta: miden exactamente lo mismo, y el sello va empujado al fondo, así que cae en el mismo sitio en las tres. ── CREMA SOBRE AZUL ───────────────────────────────────────────────────── Crema maciza, texto en tinta y detalles en latón oscuro, para que la tarjeta se despegue del enrejado azul en vez de fundirse con él. Los tonos son los de la casa; todos los pares pasan el contraste mínimo. ═══════════════════════════════════════════════════════════════════════════ */ .verif-zona { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e2); } .portada-cuerpo .verif-zona { grid-column: 8 / 13; } .verif-pila { display: grid; width: min(100%, 440px); margin-inline: auto; } .verif { grid-area: 1 / 1; display: flex; flex-direction: column; width: 100%; background: #FBFAF4; border: 1px solid #DCD6C2; border-radius: 12px; overflow: hidden; color: #242621; box-shadow: 0 34px 70px rgba(4, 9, 20, .55), 0 10px 22px rgba(4, 9, 20, .35); opacity: 0; visibility: hidden; transform: scale(.985); transition: opacity .5s var(--curva), transform .5s var(--curva), visibility 0s linear .5s; } .verif[data-activa] { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--curva), transform .5s var(--curva), visibility 0s; } /* Entrar: se coloca al lado SIN transición y después se suelta hacia el centro. Salir: se va hacia el lado contrario. */ .verif[data-entrando="derecha"] { transform: translateX(38px) scale(.985); transition: none; } .verif[data-entrando="izquierda"] { transform: translateX(-38px) scale(.985); transition: none; } .verif[data-saliendo="izquierda"] { transform: translateX(-38px) scale(.985); } .verif[data-saliendo="derecha"] { transform: translateX(38px) scale(.985); } /* ── LA CABECERA DE LA TARJETA ───────────────────────────────────────────── */ .verif-cabeza { display: flex; align-items: center; gap: 9px; padding: 13px 16px; background: #F4EFDF; border-bottom: 1px solid #E5DECB; } .verif-pulso { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #4E8A1A; animation: verif-pulso 2.4s ease-in-out infinite; } @keyframes verif-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(78, 138, 26, .45); } 60% { box-shadow: 0 0 0 8px rgba(78, 138, 26, 0); } } .verif-titulo { font-size: var(--micro); font-weight: 500; color: #4E4C45; } .verif-cedula { margin-left: auto; font-family: 'Lora', Georgia, serif; font-size: var(--micro); color: #7A5C1C; letter-spacing: .04em; } /* ── LAS FILAS ───────────────────────────────────────────────────────────── */ .verif-lista { list-style: none; margin: 0; padding: 4px 0 12px; } .verif-fila { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid #EFE9D8; } .verif-fila:last-child { border-bottom: 0; } .verif-fuente { font-size: var(--micro); font-weight: 600; color: #1B2A4A; min-width: 8.5rem; } .verif-resultado { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: var(--micro); color: #5A584F; } .verif-bien { color: #3B6D11; font-weight: 600; } .verif-visto { width: 14px; height: 14px; flex: none; color: #3B6D11; } /* ── EL SELLO, SIEMPRE AL FONDO ──────────────────────────────────────────── */ .verif-sello { display: flex; align-items: center; gap: 10px; margin: auto 16px 16px; /* margin-top:auto lo empuja al fondo */ padding: 11px 14px; border: 1.5px solid rgba(59, 109, 17, .38); border-radius: 8px; background: rgba(99, 153, 34, .09); } .verif-sello svg { width: 18px; height: 18px; flex: none; color: #3B6D11; } .verif-sello-texto { font-family: 'Lora', Georgia, serif; font-size: .98rem; font-weight: 600; color: #2F5A0E; } .verif-sello-pie { margin-left: auto; font-size: var(--micro); color: #5A584F; } /* ── LA REVELACIÓN POR PASOS (la maneja el guion) ────────────────────────── */ .verif-pila[data-listo] [data-paso] { opacity: 0; translate: 0 6px; transition: opacity .38s var(--curva), translate .38s var(--curva); } .verif-pila[data-listo] [data-paso].revelado { opacity: 1; translate: none; } /* El visto llega CUATRO DÉCIMAS DESPUÉS que el texto de su fila: si llegaran a la vez se leería como una lista que se pinta, no como una comprobación. */ .verif-pila[data-listo] .verif-fila .verif-visto { opacity: 0; scale: .4; transition: opacity .22s var(--curva) .4s, scale .22s var(--curva) .4s; } .verif-pila[data-listo] .verif-fila.revelado .verif-visto { opacity: 1; scale: 1; } /* Poner a cero sin que se vea: un instante sin transiciones. */ .verif.reinicio [data-paso], .verif.reinicio .verif-visto { transition: none !important; } /* ── LOS MANDOS ──────────────────────────────────────────────────────────── */ .verif-mandos { display: flex; align-items: center; justify-content: center; gap: var(--e2); width: min(100%, 440px); margin-inline: auto; } .verif-flecha { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--borde-hondo); border-radius: 50%; color: var(--sobre-hondo); background: rgba(255, 255, 255, .04); text-decoration: none; transition: color .25s var(--curva), border-color .25s var(--curva), background .25s var(--curva), transform .25s var(--curva), opacity .25s var(--curva); } .verif-flecha svg { width: 17px; height: 17px; } .verif-flecha:hover { color: var(--brillo); border-color: var(--laton); background: rgba(217, 184, 113, .10); transform: scale(1.06); } .verif-flecha:focus-visible { outline: 3px solid var(--brillo); outline-offset: 3px; } /* En los extremos la flecha que no lleva a ninguna parte se apaga. */ .verif-flecha[aria-disabled="true"] { opacity: .28; pointer-events: none; transform: none; } .verif-puntos { display: inline-flex; align-items: center; gap: 9px; } .verif-punto { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: background .3s var(--curva), width .3s var(--curva); } .verif-punto[data-activo] { background: var(--brillo); width: 22px; border-radius: 99px; } .verif-punto:hover { background: rgba(217, 184, 113, .6); } .verif-punto:focus-visible { outline: 3px solid var(--brillo); outline-offset: 4px; } /* ── SIN JAVASCRIPT: EN FILA Y CON TODO A LA VISTA ───────────────────────── */ .verif-pila:not([data-listo]) { grid-auto-flow: column; grid-auto-columns: 100%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .verif-pila:not([data-listo])::-webkit-scrollbar { display: none; } .verif-pila:not([data-listo]) .verif { grid-area: auto; opacity: 1; visibility: visible; transform: none; scroll-snap-align: center; } @media (max-width: 1000px) { .portada-cuerpo .verif-zona { grid-column: 1 / -1; margin-top: var(--e3); } } @media (max-height: 820px) and (min-width: 861px) { .verif-fila { padding: 7px 16px; } .verif-lista { font-size: .95em; } } @media (max-width: 420px) { .verif-fila { flex-wrap: wrap; gap: 2px 10px; } .verif-fuente { min-width: 0; } .verif-resultado { margin-left: 0; width: 100%; justify-content: flex-start; } .verif-sello-pie { display: none; } } @media (prefers-reduced-motion: reduce) { .verif { transition: opacity .2s linear, visibility 0s; transform: none !important; } .verif-pulso { animation: none; } .verif-flecha:hover { transform: none; } } /* ═══════════════════════════════════════════════════════════════════════════ TARJETA 2 · DEL DATO A LA ESCRITURA · v581 ═══════════════════════════════════════════════════════════════════════════ A la izquierda el dato como llega (el tipo en latón y la cifra en una etiqueta de máquina), a la derecha cómo lo escribe la matriz, en la serifa de la casa. Al revelarse cada paso, el texto de la derecha se ESCRIBE de izquierda a derecha un cuarto de segundo después de que aparece el dato: primero lo que entra, luego lo que sale. ═══════════════════════════════════════════════════════════════════════════ */ .datos-lista { list-style: none; margin: 0; padding: 4px 16px 12px; } .dato { display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: 12px; row-gap: 3px; padding: 8px 0; border-bottom: 1px dashed #E3DCC7; align-items: start; } .dato:last-child { border-bottom: 0; } .dato-tipo { grid-column: 1; font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7A5C1C; } .dato-crudo { grid-column: 1; justify-self: start; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .7rem; color: #4E4C45; background: #F1ECDC; border: 1px solid #E3DCC7; border-radius: 5px; padding: 1px 6px; white-space: nowrap; } .dato-escrito { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-family: 'Lora', Georgia, serif; font-size: .8rem; line-height: 1.4; color: #1B2A4A; } .verif-pila[data-listo] .dato .dato-escrito { clip-path: inset(0 100% 0 0); transition: clip-path .8s var(--curva) .26s; } .verif-pila[data-listo] .dato.revelado .dato-escrito { clip-path: inset(0 0 0 0); } .verif.reinicio .dato-escrito { transition: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ TARJETA 3 · EL TABLERO DE TRÁMITES · v581 ═══════════════════════════════════════════════════════════════════════════ Las seis etapas del panel como seis columnas que crecen de izquierda a derecha, y debajo los avisos sin resolver: informan a quien decide. El ámbar de los avisos es de advertencia, no de alarma; el sistema no para ningún trámite y la tarjeta no finge que lo haga. ═══════════════════════════════════════════════════════════════════════════ */ .tablero-cuerpo { padding: 12px 16px 10px; display: flex; flex-direction: column; } .tablero-rotulo { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7A5C1C; } .tablero-rotulo-aviso { margin-top: 4px; color: #8A4B0A; } .aviso-punto { width: 7px; height: 7px; border-radius: 50%; background: #D98E1F; flex: none; } .etapas { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; height: 124px; } .etapa { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; } .etapa-cuenta { font-family: 'Lora', Georgia, serif; font-size: .92rem; font-weight: 600; color: #1B2A4A; line-height: 1; } .etapa-pista { flex: 1; width: 100%; min-height: 0; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid #DCD6C2; } .etapa-barra { width: 72%; max-width: 30px; height: var(--alto); border-radius: 5px 5px 1px 1px; background: linear-gradient(180deg, #C9A45A 0%, #A9812E 100%); } .etapa-nombre { font-size: .56rem; line-height: 1.15; text-align: center; color: #5A584F; min-height: 2.3em; overflow-wrap: anywhere; } .verif-pila[data-listo] .etapa .etapa-barra { transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--curva) .08s; } .verif-pila[data-listo] .etapa.revelado .etapa-barra { transform: none; } .verif.reinicio .etapa-barra { transition: none !important; } .avisos { list-style: none; margin: 0; padding: 0; } .aviso { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #EFE9D8; font-size: var(--micro); } .aviso-acto { font-weight: 600; color: #1B2A4A; } .aviso-texto { margin-left: auto; color: #8A4B0A; } /* El sello del tablero no es un visto verde: es lo que ve el equipo. */ .verif-tablero .verif-sello { border-color: rgba(169, 129, 46, .45); background: rgba(217, 184, 113, .12); } .verif-tablero .verif-sello svg { color: #8A6A24; } .verif-tablero .verif-sello-texto { color: #6B4F16; } @media (max-width: 420px) { .dato { grid-template-columns: 1fr; } .dato-escrito { grid-column: 1; grid-row: auto; margin-top: 3px; } .aviso { flex-wrap: wrap; gap: 0 10px; } .aviso-texto { margin-left: 0; width: 100%; } } @media (prefers-reduced-motion: reduce) { .verif-pila[data-listo] .dato .dato-escrito { clip-path: none; transition: none; } .verif-pila[data-listo] .etapa .etapa-barra { transform: none; transition: none; } } /* EL GRÁFICO OCUPA EL SITIO QUE SOBRE · v581 Las tres tarjetas se estiran a la más alta, que es la de la matriz. En la del tablero eso dejaba, en un teléfono, un hueco en blanco de unos 170 px encima del sello. En vez de rellenarlo con nada, el gráfico de barras crece hasta ocuparlo: el cuerpo toma todo el alto libre y las columnas se estiran con él. En escritorio crece un poco; en móvil, bastante. */ .verif-tablero .tablero-cuerpo { flex: 1; } .verif-tablero .etapas { flex: 1; height: auto; min-height: 124px; } /* «Protocolizado» no cabe en una columna de teléfono: parte por sílabas en vez de cortarse por donde caiga («Protocoliz / ado»). */ .etapa-nombre { overflow-wrap: normal; hyphens: auto; -webkit-hyphens: auto; } /* ═══════════════════════════════════════════════════════════════════════════ LAS PREGUNTAS FRECUENTES, COMO BLOQUES · v581 ═══════════════════════════════════════════════════════════════════════════ Cada pregunta es un bloque macizo: número, pregunta y un signo «+» que gira hasta «×» al abrir. La respuesta sale DEL bloque, colgando de una línea de latón que nace justo debajo del número, y se despliega de arriba abajo: se lee como un hijo del bloque, no como un párrafo que aparece debajo. LA ANIMACIÓN DE ALTURA es nativa: `::details-content` con `interpolate-size: allow-keywords` deja animar hasta `height: auto`, al abrir Y al cerrar. Donde el navegador aún no lo entiende, la respuesta aparece igual con su despliegue, solo que el bloque crece de golpe. Todas cerradas al llegar: la primera venía abierta y convertía la sección en «una respuesta y seis preguntas», que no es lo que es. ═══════════════════════════════════════════════════════════════════════════ */ .faq-marco { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--e5); align-items: start; } .faq-cabeza { position: sticky; top: 112px; } .faq-otra { margin: var(--e3) 0 0; max-width: 32ch; font-size: var(--menor); line-height: 1.6; color: var(--sobre-hondo); } .faq-otra a { color: var(--brillo); text-underline-offset: 3px; } .faq-lista { display: grid; gap: 12px; } .faq { interpolate-size: allow-keywords; background: #223358; border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px; box-shadow: 0 8px 22px rgba(4, 9, 20, .22); transition: border-color .3s var(--curva), background .3s var(--curva), box-shadow .3s var(--curva); } .faq:hover { border-color: rgba(217, 184, 113, .38); } .faq[open] { background: #25395F; border-color: rgba(217, 184, 113, .5); box-shadow: 0 16px 36px rgba(4, 9, 20, .34); } /* ── LA PREGUNTA ─────────────────────────────────────────────────────────── */ .faq-pregunta { list-style: none; cursor: pointer; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; } .faq-pregunta::-webkit-details-marker { display: none; } .faq-pregunta:focus-visible { outline: 3px solid var(--brillo); outline-offset: 2px; border-radius: 14px; } .faq-num { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: rgba(217, 184, 113, .10); border: 1px solid rgba(217, 184, 113, .22); font-family: 'Lora', Georgia, serif; font-size: .88rem; font-weight: 600; color: var(--brillo); font-variant-numeric: tabular-nums; transition: background .3s var(--curva), color .3s var(--curva); } .faq[open] .faq-num { background: var(--laton); color: #14203A; border-color: var(--brillo); } .faq-texto { font-family: 'Lora', Georgia, serif; font-size: 1.06rem; font-weight: 600; line-height: 1.35; color: #FBFAF4; } /* El signo: dos trazos que forman «+» y, al abrir, giran hasta «×». */ .faq-signo { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid rgba(217, 184, 113, .38); transition: background .3s var(--curva), border-color .3s var(--curva), transform .35s var(--curva); } .faq-signo::before, .faq-signo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.8px; border-radius: 2px; background: var(--brillo); translate: -50% -50%; transition: background .3s var(--curva); } .faq-signo::after { rotate: 90deg; } .faq-pregunta:hover .faq-signo { background: rgba(217, 184, 113, .12); } .faq[open] .faq-signo { transform: rotate(135deg); background: var(--laton); border-color: var(--brillo); } .faq[open] .faq-signo::before, .faq[open] .faq-signo::after { background: #14203A; } /* ── LA RESPUESTA, COLGANDO DEL BLOQUE ───────────────────────────────────── */ /* La línea cae desde el centro del número (18 px de relleno + la mitad de su caja) y el texto arranca en la misma vertical que la pregunta. */ /* SIN MARGEN INFERIOR, A PROPÓSITO: el hueco de abajo va como relleno. Con margen, durante la animación de altura el margen se salía de la caja y al terminar volvía a contar: el bloque crecía suave hasta 156 px y saltaba de golpe a 174 (medido). El relleno no se escapa. Por eso la rama no es un borde, que se alargaría con el relleno, sino un trazo que acaba antes. */ .faq-respuesta { position: relative; margin: 0 18px 0 calc(18px + 1.2rem - 1px); padding: 2px 8px 22px calc(1.2rem + 15px); } .faq-respuesta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 18px; width: 2px; border-radius: 2px; background: rgba(217, 184, 113, .55); } .faq-respuesta p { margin: 0; max-width: 64ch; font-size: .96rem; line-height: 1.68; color: #D3DAE8; } .faq::details-content { height: 0; overflow: clip; transition: height .45s var(--curva), content-visibility .45s allow-discrete; } .faq[open]::details-content { height: auto; } .faq[open] .faq-respuesta { animation: faq-hijo .5s var(--curva) .06s both; } @keyframes faq-hijo { from { opacity: 0; clip-path: inset(0 0 100% 0); translate: 0 -4px; } to { opacity: 1; clip-path: inset(0 0 0 0); translate: none; } } @media (max-width: 900px) { .faq-marco { grid-template-columns: 1fr; gap: var(--e3); } .faq-cabeza { position: static; } } @media (max-width: 520px) { .faq-pregunta { grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 11px; padding: 14px 14px; } .faq-num { width: 2rem; height: 2rem; font-size: .8rem; border-radius: 8px; } .faq-texto { font-size: .98rem; } .faq-signo { width: 28px; height: 28px; } .faq-respuesta { margin: 0 14px 0 calc(14px + 1rem - 1px); padding: 2px 6px 18px calc(1rem + 12px); } .faq-respuesta::before { bottom: 14px; } .faq-respuesta p { font-size: .92rem; } } @media (prefers-reduced-motion: reduce) { .faq::details-content { transition: none; } .faq[open] .faq-respuesta { animation: none; } .faq-signo { transition: none; } } /* ═══════════════════════════════════════════════════════════════════════════ LA BARRA CREMA, LEGIBLE ENTERA · v581 ═══════════════════════════════════════════════════════════════════════════ Al bajar, la cabecera pasa de oscura a crema, y una animación atada al scroll lleva los enlaces de claro a oscuro. Pero solo los ENLACES normales: los desplegables «UAFE» y «LEGAL» (son `summary`, no `a`) y la pestaña de la página actual se quedaban con sus tonos para fondo oscuro, gris azulado muy claro y latón claro, sobre crema. Casi no se leían. Venía de antes de la v575; se vio en una captura de las preguntas frecuentes. Los fotogramas solo dicen dónde ACABAN (`to`): el punto de partida es el color que cada pieza ya tiene, así que en la cabecera oscura nada cambia. La pestaña actual acaba en latón oscuro, para seguir distinguiéndose. Solo donde el navegador entiende `animation-timeline`, como la cabecera crema: donde no, la cabecera se queda oscura y los tonos claros son los buenos. */ @keyframes menu-texto-hasta-gris { to { color: var(--gris); } } @keyframes menu-actual-hasta-laton { to { color: #7A5C1C; } } @supports (animation-timeline: scroll()) { .cabecera .grupo summary { animation: menu-texto-hasta-gris linear both; animation-timeline: scroll(root block); animation-range: 40px 140px; } .cabecera .grupo[data-aqui] summary, .cabecera .pestanas a[aria-current] { animation: menu-actual-hasta-laton linear both; animation-timeline: scroll(root block); animation-range: 40px 140px; } } /* ═══════════════════════════════════════════════════════════════════════════ LAS PÁGINAS DE DOCUMENTO: EL BOTÓN QUE NO SE VEÍA · v581 ═══════════════════════════════════════════════════════════════════════════ `.hoja-legal a` pinta los enlaces del documento con el color de tinta, y es más específica que `.boton`: el texto del botón salía tinta sobre fondo tinta. En cumplimiento, calendario y manual PLAFT, el ÚNICO llamado a la acción de la página era una píldora oscura vacía. Pasaba ya en la v575. */ .hoja-legal a.boton { color: var(--crema); text-decoration: none; } .hoja-legal a.boton:hover { color: #14203A; } /* ═══════════════════════════════════════════════════════════════════════════ LAS GUÍAS DE UAFE, PARA LEERSE · v581 ═══════════════════════════════════════════════════════════════════════════ Cumplimiento, calendario y manual PLAFT eran una columna de texto de 68 caracteres a la izquierda de una hoja de 1.240 px: más de la mitad de la hoja vacía, y lo que se viene a buscar enterrado en párrafos. Ahora: · la hoja es más estrecha y va centrada, con una sombra que la despega del enrejado, como un documento sobre la mesa; · lo que se viene a buscar está a la vista: los plazos del calendario en fichas con el plazo en grande, los momentos del control y las cuatro exigencias del manual como pasos numerados unidos por una línea, y lo que Fedatarium no hace, en tres bloques; · los títulos, un punto más contenidos y con más aire encima, para que cada sección empiece donde se ve que empieza. ═══════════════════════════════════════════════════════════════════════════ */ .hoja-legal.hoja-guia { max-width: 940px; margin-inline: auto; box-shadow: 0 40px 90px rgba(4, 9, 20, .55), 0 12px 28px rgba(4, 9, 20, .30); } .hoja-guia > h2 { font-size: clamp(1.55rem, 2.6vw, 2.1rem); line-height: 1.15; margin: var(--e5) 0 var(--e2); } .hoja-guia > p { max-width: 66ch; } /* ── LOS PLAZOS DEL CALENDARIO ───────────────────────────────────────────── */ /* Una fila por obligación, el plazo a la izquierda: se lee como una tabla de arriba abajo. En rejilla de tres columnas las fichas salían de alturas muy dispares (la del ROS, el doble que la del umbral) y dejaban un hueco. */ .plazos { display: grid; gap: 12px; margin: var(--e3) 0 var(--e4); } .plazo { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); column-gap: 24px; align-items: start; background: #FFFFFF; border: 1px solid #E5DECB; border-radius: 12px; padding: 18px 20px 12px; box-shadow: 0 6px 18px rgba(20, 32, 58, .06); } .plazo > .plazo-cuanto { grid-column: 1; grid-row: 1; } .plazo > .plazo-desde { grid-column: 1; grid-row: 2; } .plazo > h3 { grid-column: 2; grid-row: 1; } .plazo > p:not(.plazo-cuanto):not(.plazo-desde) { grid-column: 2; } .plazo-cuanto { margin: 0; font-family: 'Lora', Georgia, serif; font-size: 1.75rem; font-weight: 600; line-height: 1.05; color: #7A5C1C; } .hoja-legal .plazo-desde { margin: 5px 0 12px; font-size: .74rem; line-height: 1.4; color: #6B685E; } .plazo h3 { font-size: 1.02rem; line-height: 1.3; margin: 0 0 6px; } .hoja-legal .plazo p:not(.plazo-cuanto):not(.plazo-desde) { font-size: .92rem; line-height: 1.6; margin: 0 0 8px; max-width: none; } /* ── LOS PASOS NUMERADOS ─────────────────────────────────────────────────── */ .pasos-doc { list-style: none; counter-reset: paso; margin: var(--e3) 0 var(--e4); padding: 0; } .paso-doc { counter-increment: paso; position: relative; padding: 0 0 20px 58px; } .paso-doc::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #1B2A4A; color: #FBFAF4; font-family: 'Lora', Georgia, serif; font-size: 1rem; font-weight: 600; box-shadow: 0 0 0 4px #F4EFDF; } /* la línea que une un paso con el siguiente */ .paso-doc::after { content: ""; position: absolute; left: 18px; top: 44px; bottom: 6px; width: 2px; border-radius: 2px; background: #E0D8C2; } .paso-doc:last-child { padding-bottom: 0; } .paso-doc:last-child::after { display: none; } .paso-doc h3 { margin: 6px 0 6px; font-size: 1.12rem; } .hoja-legal .paso-doc p { max-width: 62ch; } /* ── LO QUE NO HACE, EN TRES BLOQUES ─────────────────────────────────────── */ .no-hace { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: var(--e3) 0 var(--e4); } .hoja-legal .no-hace-item { margin: 0; max-width: none; padding: 16px 16px 14px; background: #F4EFDF; border-radius: 10px; border-top: 3px solid #A9812E; font-size: .92rem; line-height: 1.6; } .no-hace-item strong { display: block; margin-bottom: 4px; font-family: 'Lora', Georgia, serif; font-size: 1.04rem; } /* ── LOS SIETE SUPUESTOS, MARCADOS ───────────────────────────────────────── */ .lista-marcada { list-style: none; padding: 0; margin: var(--e2) 0 var(--e3); display: grid; gap: 8px; } .hoja-legal .lista-marcada li { position: relative; margin: 0; padding: 10px 14px 10px 40px; background: #FFFFFF; border: 1px solid #EDE7D6; border-radius: 9px; } .lista-marcada li::before { content: ""; position: absolute; left: 17px; top: 50%; width: 8px; height: 8px; border-radius: 50%; translate: 0 -50%; background: #A9812E; } @media (max-width: 760px) { .plazo { grid-template-columns: 1fr; } .plazo > * { grid-column: 1 !important; grid-row: auto !important; } .no-hace { grid-template-columns: 1fr; } .paso-doc { padding-left: 50px; } .paso-doc::before { width: 34px; height: 34px; font-size: .92rem; } .paso-doc::after { left: 16px; top: 40px; } } /* ── LATÓN LEGIBLE SOBRE EL AZUL DE FUNCIONES · v581 ────────────────────── La página de funciones es oscura, y sus títulos de sección y el «En esta página» del índice usaban el latón pensado para fondo CREMA: 3,4 de contraste, por debajo del 4,5 mínimo (lo encontró la auditoría axe). El latón medio da 7,3 sobre ese azul y sigue siendo dorado. */ .func-nav-titulo, .func-seccion h3 { color: #C9A45A; } .func-aviso a { color: var(--brillo); text-underline-offset: 3px; } /* ── LA NUMERACIÓN DE LA MATRIZ DE EJEMPLO, EN SU RENGLÓN · v581 ───────── Cada número ocupaba la casilla de su renglón (13,5 × 1,72 = 23,22 px), pero su interlineado se calculaba sobre SU tamaño, 9,5 px: 16 px dentro de una casilla de 23, así que el número quedaba pegado arriba y parecía de la línea anterior. Ahora el interlineado es el de la casilla, y el pequeño resto de línea base (la cifra es más pequeña que el texto) se corrige con un desplazamiento medido con el navegador. */ .matriz-real .lineas li { line-height: calc(13.5px * 1.72); } .matriz-real .lineas li::before { position: relative; top: var(--ajuste-numero, 0px); } /* (tamaño del texto − tamaño de la cifra) × (ascendente − descendente) / 2: lo que la cifra, más pequeña y centrada en la misma casilla, queda por encima de la línea base del texto. Medido: 1,35 px en escritorio. */ .matriz-real { --ajuste-numero: 1.35px; } @media (max-width: 640px) { .matriz-real .lineas li { line-height: calc(12px * 1.72); } .matriz-real { --ajuste-numero: .85px; } } /* ── AL IMPRIMIR, TODO A LA VISTA · v581 ─────────────────────────────────── Los bloques con entrada empiezan transparentes y se muestran al llegar a ellos. En papel no se llega a ninguno: sin esto, imprimir la portada dejaba fuera lo que no se hubiera recorrido antes. */ @media print { .surge, .surge-lado { opacity: 1 !important; translate: none !important; transition: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ LA MATRIZ DE EJEMPLO, CON LA PÁGINA DEL GENERADOR · v582 ═══════════════════════════════════════════════════════════════════════════ Esteban la puso al lado de una matriz real y no se parecía: los números pegados al borde, la carátula saliéndose por la derecha, la cuantía que no estaba y el «.-.-» que no llegaba al margen. Ahora la hoja se construye con las medidas de la página A4 de `plantilla.py` (en twips, sobre 11.906): margen izquierdo 2.552 → el texto empieza al 21,43 % de la hoja los números, a 360 (lo que Word pone por omisión) → acaban al 18,41 % el cuerpo acaba 1.418 + 567 antes del borde → un 16,67 % en blanco la carátula empieza 1.843 dentro del texto (un 25 %) y acaba donde el cuerpo: 566 contra 567, la misma vertical LA CARÁTULA SE SALÍA POR UNA REGLA GENERAL: todos los párrafos del sitio tienen un tope de 512 px. Con el mismo tope, la carátula, que empieza desplazada, acababa más a la derecha: +105 a +163 px en pantallas de 820 a 1.000, donde las dos ventanas se apilan (la de Esteban medía 735). Sin tope, carátula y cuerpo comparten columna a cualquier tamaño. Y como el generador: condensado de medio punto sobre 17 (-0,0294 em) y sin partir palabras con guion, que Word no parte. */ .hoja-nueva .matriz-real { margin-inline: -40px; grid-template-columns: 18.41% 3.02% minmax(0, 61.9%) minmax(0, 1fr); gap: 0; } .matriz-real .lineas { grid-column: 1; } .matriz-real .cuerpo-matriz { grid-column: 3; letter-spacing: -0.0294em; } .matriz-real p { max-width: none; } .matriz-real .caratula-real { margin-left: 25%; text-align: justify; hyphens: manual; -webkit-hyphens: manual; } .matriz-real .parrafo-real { hyphens: manual; -webkit-hyphens: manual; } /* Con el relleno ya calculado, la última línea llega al margen como en el papel. Sin él (sin JavaScript) se deja a la izquierda: estirar una línea con un relleno corto abriría huecos enormes entre palabras. */ .matriz-real.relleno-listo .caratula-real, .matriz-real.relleno-listo .parrafo-real { text-align-last: justify; } /* La línea de la cuantía tiene un solo espacio: al justificarla, lo que falta hasta el margen (menos de un «.-») se iba entero a ese hueco y abría «(CUANTÍA: US$80,000.00». En el papel esa línea no se estira. */ .matriz-real.relleno-listo .caratula-cuantia { text-align-last: left; } /* Las iniciales, al margen de la línea de la cuantía, sobre su línea base. */ .matriz-real .iniciales-real { width: 25%; bottom: calc(-1 * var(--ajuste-numero, 0px)); font-size: 9.5px; letter-spacing: .04em; line-height: calc(13.5px * 1.72); } /* Una foja son 28 renglones: el 29 vuelve a ser el 1. Con `counter-set`, que cambia el valor del contador que ya hay; `counter-reset` crea uno NUEVO solo para ese renglón, y la numeración salía «1, 1, 2, 3…» (visto en captura). */ .matriz-real .lineas li:nth-child(28n + 29) { counter-set: linea 0; } @media (max-width: 640px) { /* En un teléfono las proporciones de la página dejarían 200 px de texto: se estrechan los márgenes y se conserva todo lo demás. */ .hoja-nueva .matriz-real { grid-template-columns: 11% 3% minmax(0, 80%) minmax(0, 1fr); } .matriz-real .iniciales-real { line-height: calc(12px * 1.72); } } /* ── LAS MIGAS DE PAN · v583 ────────────────────────────────────────────── «Inicio › Cumplimiento UAFE › Calendario», arriba de cada subpágina, con microdatos BreadcrumbList. Discretas: son para orientarse y para que Google entienda cómo está organizado el sitio, no un titular. */ .migas { margin: 0 0 var(--e2); } .migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15em .5em; font-size: var(--menor); line-height: 1.5; color: #6B685E; } .migas li { display: inline-flex; align-items: baseline; gap: .5em; } .migas li + li::before { content: "›"; color: #A9812E; } .hoja-legal .migas a { color: #1B2A4A; text-decoration: none; border-bottom: 1px solid rgba(27, 42, 74, .25); } .hoja-legal .migas a:hover { border-bottom-color: #A9812E; } .migas [aria-current="page"] { color: #4E4C45; } /* En la página oscura de funciones */ .migas-oscuras { padding-top: var(--e2); } .migas-oscuras ol { color: #AEB7C9; } .migas-oscuras a { color: #E6EAF2; text-decoration: none; border-bottom: 1px solid rgba(230, 234, 242, .3); } .migas-oscuras [aria-current="page"] { color: #C9D1E0; }