/* ═══════════════════════════════════════════════════════════════════════ 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; } .todo { grid-column: 1 / -1; } /* ═══════════════════════════════════════════════════════════════════════ 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-papel { background: var(--papel); color: var(--texto); } .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. */ .surge { animation: surgir linear both; animation-timeline: view(); animation-range: entry 25% cover 42%; } .surge-lado { animation: surgir-lado linear both; animation-timeline: view(); animation-range: entry 25% cover 45%; } /* El escalonado va por RANGO, no por reloj: sigue atado al dedo. */ .escalona > *:nth-child(1) { animation-range: entry 25% cover 40%; } .escalona > *:nth-child(2) { animation-range: entry 32% cover 47%; } .escalona > *:nth-child(3) { animation-range: entry 39% cover 54%; } } .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 */ .taller-fijo { 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); } .cristal { position:relative; } /* ── 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. */ .cristal-vidrio { position:absolute; inset:0; border-radius:inherit; background: rgba(255,255,255,.055); /* MÁS DESENFOQUE DE FONDO. Estaba en 9px y el fondo se leía casi entero detrás del cristal, que es lo que hace que parezca una lámina y no una pieza con grosor. A 15px la trama de detrás se adivina sin distinguirse, que es como se ve a través de un vidrio de verdad. */ -webkit-backdrop-filter: blur(15px) saturate(1.3) brightness(1.06); backdrop-filter: blur(15px) saturate(1.3) brightness(1.06); box-shadow: /* el aro de un pixel que cierra la pieza */ inset 0 0 0 1px rgba(255,255,255,.16), /* el filo de luz en el borde de arriba y a la izquierda: es lo que da la sensacion de canto biselado sin dibujar ningun borde */ inset 1.5px 1.5px 0 rgba(255,255,255,.42), /* el resplandor interior, como el que recorre el canto de un vidrio */ inset 0 0 14px rgba(255,255,255,.14), /* y la sombra que lo despega del papel */ 0 30px 70px rgba(0,0,0,.44), 0 4px 14px rgba(0,0,0,.20); } @supports (backdrop-filter: url(#lente)) { .cristal-vidrio { /* Con la lente: el desenfoque va DESPUÉS del desplazamiento, para que la distorsión se vea nítida y sea el fondo lo que queda blando. Al revés se emborrona la propia deformación y se pierde. */ backdrop-filter: blur(1px) url(#lente) blur(4px) saturate(1.12) brightness(1.05); } } /* ═══════════════════════════════════════════════════════════════════════ 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. */ .cristal-luz { position:absolute; inset:0; border-radius:inherit; pointer-events:none; overflow:hidden; --lx: 34%; --ly: 26%; } .cristal-luz::before { content:''; position:absolute; inset:-50%; background: radial-gradient(62% 70% at var(--lx) var(--ly), rgba(255,255,255,.16), rgba(255,255,255,.05) 46%, transparent 72%); /* Solo se enciende con el puntero encima: fuera de la pieza no hay nada que reflejar, y un resplandor permanente se convierte en una mancha. */ opacity:0; transition: opacity .5s var(--curva); } .cristal:hover .cristal-luz::before { opacity:1; } @media (hover: none), (pointer: coarse) { .cristal-luz { display:none; } } /* ── el contenido, por delante ────────────────────────────────────────── */ .cristal-cuerpo { position:relative; } .panel-flotante p { margin:0; color: var(--sobre-hondo); } .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. */ .cristal { transform: perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transform-style: preserve-3d; transition: transform .55s var(--curva); } .cristal-cuerpo { transform: translateZ(26px); } .cristal-luz { transform: translateZ(6px); } @media (hover: none), (pointer: coarse) { .cristal { transform:none; } } /* 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. */ @keyframes entrar-cristal { 0% { visibility:hidden; clip-path: inset(0 0 0 100% round 22px); transform: translateX(22px) scale(.985); } 1% { visibility:visible; } 100% { visibility:visible; clip-path: inset(0 0 0 0 round 22px); transform: none; } } .cristal { animation: entrar-cristal .9s cubic-bezier(.22,1.08,.34,1) 1.22s both; } /* Al terminar la entrada, el mando pasa al puntero: si las dos siguieran vivas se pelearian por el mismo `transform` y ganaria la animacion. */ .cristal.puesto { animation: none; } /* 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); } .zocalo-fila { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--e3); padding: var(--e3) 0 calc(var(--e3) + env(safe-area-inset-bottom)); } /* 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; } .dato + .dato { padding-left: var(--e3); border-left:1px solid var(--borde-hondo); } .contador { font-family:'Lora', Georgia, serif; font-size: clamp(2rem, 3.4vw, 3rem); line-height:1; color: var(--crema); font-variant-numeric: tabular-nums; counter-reset: n var(--n); } .contador::after { content: counter(n); } .dato p { margin:0; font-size: var(--menor); color: var(--sobre-hondo-tenue); max-width: 30ch; } /* 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; } .c651 { --n:2200; } .c28 { --n:28; } .c1 { --n:1; } @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; } } .contador { animation-fill-mode: both; animation-timing-function: cubic-bezier(.13,.9,.2,1); } /* 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; } .c28 { animation: contar-28 1.30s cubic-bezier(.13,.9,.2,1) .30s both, frenar 1.30s cubic-bezier(.13,.9,.2,1) .30s both; } .c1 { animation: contar-1 .80s cubic-bezier(.13,.9,.2,1) .62s both, frenar .80s cubic-bezier(.13,.9,.2,1) .62s 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) .cristal { animation: none; visibility: hidden; clip-path: inset(0 0 0 100% round 22px); transform: translateX(22px) scale(.985); } .portada:not(.animar) .c651 { --n:0; } .portada:not(.animar) .c28 { --n:0; } .portada:not(.animar) .c1 { --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)); } .tarjeta { position:relative; overflow:hidden; border-radius:14px; padding: var(--e3); background: var(--carta); border:1px solid var(--linea); transition: transform .3s var(--curva), box-shadow .3s ease, border-color .3s ease; } .sup-hondo .tarjeta, .sup-tinta .tarjeta { background: rgba(255,255,255,.045); border-color: var(--borde-hondo); backdrop-filter: blur(6px); } .tarjeta:hover { transform: translateY(-4px); box-shadow: 0 12px 34px rgba(10,20,40,.20); border-color: color-mix(in srgb, var(--laton) 55%, transparent); } .tarjeta::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; opacity:0; background: linear-gradient(90deg, transparent, var(--laton), transparent); transition: opacity .3s ease; } .tarjeta:hover::before { opacity:1; } .tarjeta .icono { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; margin-bottom: var(--e2); background: color-mix(in srgb, var(--laton) 12%, transparent); color: var(--laton); } .sup-hondo .tarjeta .icono, .sup-tinta .tarjeta .icono { background: rgba(217,184,113,.15); color: var(--brillo); } .tarjeta .icono svg { width:21px; height:21px; } .tarjeta h3 { margin-bottom:8px; font-size:1.1875rem; } .tarjeta p { margin:0; font-size: var(--menor); } /* 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 { 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 .rotulo { color: var(--laton-texto); } .hoja-legal .nota { color: var(--gris); } .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); } .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); } /* 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); } .resumen p { font-family:'Lora', Georgia, serif; font-size: var(--subtitulo); line-height:1.5; color: var(--tinta); margin:0; max-width:56ch; } /* 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); } .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; } .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; } /* ═══════════════════════════════════════════════════════════════════════ 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; } .cristal { transform:none !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; } .al-margen { margin-top: var(--e2); } .indice { position:static; margin-bottom: var(--e4); } .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; } .paso { opacity:1; } /* 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; } .zocalo-fila { grid-template-columns:1fr; gap:14px; } .dato + .dato { padding-left:0; border-left:0; border-top:1px solid var(--borde-hondo); padding-top:14px; } .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 { display:none; } .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. */ .monitor-zona { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .monitor { /* ── LOS DOS MANDOS DE AJUSTE FINO ────────────────────────────────── Están aquí para poder mover el monitor sin tocar nada más. Son píxeles de pantalla de verdad, porque `.monitor` NO va escalado: el `scale` vive dentro, en `.monitor-escala`. Así «20 px» son 20 px vistos. Positivo = derecha y abajo; negativo = izquierda y arriba. sed -i 's/--empuje-x: .*;/--empuje-x: 90px;/' estilo.css LOS VALORES DE ABAJO SON LOS BUENOS, no ceros de fábrica: 80 y 30 es el punto que se ajustó mirando la página en el servidor. Si alguien los devuelve a cero «para limpiar», el monitor se descoloca. */ --empuje-x: 80px; --empuje-y: 30px; transform: translate(var(--empuje-x), var(--empuje-y)); position: absolute; pointer-events: auto; /* La caja lleva la proporción del mockup; lo de dentro va posicionado y no ocupa por sí solo. */ aspect-ratio: 3550 / 3226; /* ── DÓNDE SE COLOCA, Y POR QUÉ ASÍ ───────────────────────────────── Se ancla POR ABAJO y no por arriba: lo que tiene que quedar fijo es dónde lo corta el zócalo, no dónde empieza. Con `top` el recorte cambiaba con cada altura de ventana, y en pantallas bajas la peana quedaba entera y al aire. El valor negativo es lo que mete el pie por detrás de la barra de cifras, que es lo de la referencia: la pantalla parece seguir detrás y se ahorra el hueco muerto de la peana. Y se sale un poco por la derecha: cortarlo contra el borde es lo que hace que la composición no parezca una tarjeta pegada en el centro. */ /* SE ALINEA CON LA COLUMNA DE TEXTO, NO CON EL BORDE DE LA VENTANA. Estaba en negativo para que asomara por el lado, y en pantallas anchas se comía medio monitor: la pantalla quedaba cortada por la mitad y se perdía justo lo que hay que enseñar. `max()` con el margen del contenedor lo pega al mismo borde derecho que el resto de la página, así que la composición se lee como una sola pieza a cualquier ancho. */ /* ── DÓNDE VA, MEDIDO CONTRA LA REFERENCIA ───────────────────────── Estaba anclado POR ABAJO con `bottom: -20%`. Conseguía que el zócalo lo cortara siempre igual, pero a costa de empujarlo hacia abajo: el corte se comía la peana ENTERA y hasta un trozo de pantalla, que es justo lo que hay que enseñar. Comparando las dos capturas al mismo ancho: referencia → el monitor arranca pegado a la cabecera, se ve el cuello y parte de la base, y la barra corta LA BASE. antes → arrancaba a media altura y la barra cortaba la PANTALLA. Ahora se ancla por ARRIBA y el alto lo pone la proporción del mockup, así que el monitor llega por debajo del zócalo por sí solo y el corte cae en la peana. Con estos números, de los 843 px de alto la pantalla ocupa los primeros 565 y la peana el resto: la barra entra a 141 px de la base. */ /* ── EL TAMAÑO SE ATA AL ALTO, NO AL ANCHO ───────────────────────── Se intentó con `width` en vw y no cuadra: la captura de referencia se hizo en una ventana ANCHA Y BAJA (proporción 2,23) y las pruebas van en una alta (1,67). Con el ancho atado a `vw`, en una ventana alta el monitor se queda corto y flota sobre la barra sin que lo corte; y si se agranda para que llegue, se come el titular. Lo que tiene que quedar constante es la COMPOSICIÓN: el monitor arranca bajo la cabecera y la barra de cifras le corta la base. Las dos son medidas verticales, así que el alto manda y el ancho sale de la proporción del mockup. El `max-width` es el freno para pantallas muy altas, donde si no se comería el titular. */ /* ── EL ANCHO LO MANDA EL TITULAR ────────────────────────────────── La regla que de verdad importa, y que se saltaron los tres intentos anteriores: EL MONITOR EMPIEZA DONDE ACABA EL TEXTO. En la referencia el titular llega al 43% del ancho y el monitor arranca en el 50%: hay un pasillo de siete puntos entre los dos. Con el margen derecho de la columna (10%), eso deja 44% para el monitor. Más ancho y se come el titular, que fue lo que pasó al atarlo al alto de la portada: llegaba a la barra, sí, pero tapando «Software para notarías del». El `top` sale de esa anchura: es lo que hace que la base del monitor caiga por debajo del zócalo y la barra le corte la peana. Si se cambia el ancho, hay que recalcularlo. */ right: max(2vw, calc((100vw - 1280px) / 2)); /* ── SE ANCLA POR ABAJO, PEGADO AL ZÓCALO ────────────────────────── Con `top` en porcentaje el corte bailaba con cada tamaño de ventana: medido, iba de 39 px de recorte a 1600 de ancho a -61 (o sea, el monitor flotando SOBRE la barra sin tocarla) a 1024. La composición cambiaba de una pantalla a otra. Anclado por abajo, el recorte es siempre el mismo trozo de peana, porque el zócalo mide lo mismo en todas: el 4% deja su base metida detrás de la barra y el resto de la peana a la vista. */ bottom: 4%; width: min(44vw, 760px); } .monitor-escala { /* El mockup mide 3550 x 3226. Todo lo de dentro trabaja en ESOS píxeles y se escala aquí de una vez. ── FUERA DEL FLUJO, Y NO ES UN DETALLE ────────────────────────────── `transform` NO cambia la maqueta: el navegador sigue reservando los 3550 px de ancho aunque en pantalla se vean 742. Sin `position: absolute` la página entera se iba a 2400 px, el título salía cortado y aparecía barra horizontal. Se vio renderizando en Chrome, no leyendo. El sitio lo reserva el `aspect-ratio` del padre. */ position: absolute; top: 0; left: 0; width: 3550px; height: 3226px; transform-origin: 0 0; /* ── LA ESCALA VIENE DE `--k`, Y LA PONE UN OBSERVADOR ──────────────── Primero se intentó con unidades de contenedor: `scale(calc(100cqw / 3550px))`. Chrome DESCARTA esa declaración: la división de longitud entre longitud dentro de `scale()` no le vale, y el monitor salía a tamaño natural (3550 px) desbordando la página. No avisa de nada; se vio midiendo `transform` en el navegador, que daba `none`. Con `--k` funciona en todos, y el respaldo de 0.209 es el valor a 742 px de ancho, que es lo que mide la caja en un portátil normal: si el JavaScript no llega, se ve bien igual en vez de romperse. */ transform: scale(var(--k, .209)); } /* ── 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. */ .monitor-marco { display: block; width: 3550px; height: 3226px; filter: drop-shadow(0 60px 90px rgba(4, 8, 16, .55)) drop-shadow(0 180px 260px rgba(4, 8, 16, .45)); } .monitor-pantalla { position: absolute; top: 0; left: 0; width: 2969px; height: 1895px; /* la pantalla, ya enderezada */ overflow: hidden; transform-origin: 0 0; /* ── LA MATRIZ ────────────────────────────────────────────────────── Sale de las cuatro esquinas de la pantalla verde del mockup, medidas leyendo los píxeles. Mete el rectángulo de 2969x1895 exactamente en el cuadrilátero del monitor; las cuatro esquinas caen al píxel. Si alguien cambia el mockup, ESTA MATRIZ HAY QUE VOLVER A CALCULARLA: no es un ajuste a ojo que se pueda retocar a mano. */ transform: matrix3d( 0.9434475, 0.038234085, 0, -0.000016048269, -0.13711218, 0.95997474, 0, -0.0000032111840, 0, 0, 1, 0, 395, 116, 0, 1); background: #0E192E; } .monitor-bucle { width: 100%; height: 100%; object-fit: cover; display: block; /* ALGO APAGADA DE BASE. La pantalla es el fondo del titular, no el protagonista: a pleno brillo compite con el texto blanco de al lado y la portada se lee peor. */ filter: brightness(.86) saturate(.94); transition: filter .45s ease; } /* ── 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. */ .monitor-pantalla:has(.ver-demo:hover) .monitor-bucle, .monitor-pantalla:has(.ver-demo:focus-visible) .monitor-bucle { /* Y BASTANTE MÁS AL PASAR POR EL BOTÓN. Partiendo de .86 ya apagado, el salto a .64 se nota sin parpadear porque la transición es de casi medio segundo: el fondo se retira y la llamada se adelanta sola. */ filter: brightness(.64) saturate(.74); } /* 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. */ .monitor-brillo { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 190px 40px rgba(0, 0, 0, .38), inset 0 0 60px rgba(0, 0, 0, .22); background: linear-gradient(107deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 26%, rgba(255,255,255,0) 47%, rgba(255,255,255,0) 100%); } /* ── el botón, DENTRO de la perspectiva ──────────────────────────────── Vive dentro de `.monitor-pantalla`, así que hereda su matriz y se inclina con el monitor. Todas las medidas van en píxeles del mockup (la pantalla son 2969 x 1895) porque ese es el sistema de coordenadas de aquí dentro. */ .ver-demo { position: absolute; left: 50%; top: 50%; /* ── CENTRADO Y ESCALA, POR SEPARADO ─────────────────────────────── `translate` y `scale` son propiedades independientes de `transform` desde hace años, y aquí eso resuelve un choque real: el centrado tiene que estar SIEMPRE, la escala la mueven el flote y el hover. Metidos los tres en un solo `transform`, cualquiera de los dos borraba el centrado y el botón saltaba a la esquina. */ translate: -50% -50%; scale: 1; animation: flote-demo 4.6s ease-in-out infinite; display: inline-flex; align-items: center; gap: 60px; padding: 78px 150px 78px 110px; border: 0; border-radius: 60px; /* LIGERAMENTE TRANSPARENTE: se intuye el panel por debajo, así que el botón se lee como algo puesto SOBRE la pantalla y no como un recorte pegado encima. Al pasar por encima se vuelve opaco: es la señal de que está activo, y de paso el texto gana contraste justo cuando se va a pulsar. */ background: rgba(18, 29, 50, .78); backdrop-filter: blur(2px); color: #F4F1E8; font-family: inherit; font-size: 148px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1; white-space: nowrap; cursor: pointer; overflow: hidden; /* DOS SOMBRAS Y UN FILO. La de abajo asienta el botón sobre la pantalla; la envolvente lo despega del fondo claro del panel, que es donde antes se veía plano; y el filo interior le da el canto. */ box-shadow: 0 70px 150px rgba(4, 8, 16, .55), 0 0 110px 26px rgba(6, 10, 20, .45), 0 0 0 5px rgba(244,241,232,.10) inset; transition: scale .32s cubic-bezier(.2,.7,.3,1), background .3s ease, box-shadow .3s ease; } .ver-demo-play { display: inline-flex; align-items: center; justify-content: center; width: 200px; height: 200px; border-radius: 50%; background: #F4F1E8; color: #16233D; flex: none; } .ver-demo-play svg { width: 110px; height: 110px; margin-left: 10px; } /* ── 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. */ .ver-demo-sien { position: absolute; top: -70%; bottom: -70%; left: 0; width: 30%; pointer-events: none; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.035) 22%, rgba(255,255,255,.10) 40%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.10) 60%, rgba(255,255,255,.035) 78%, rgba(255,255,255,0) 100%); filter: blur(38px); will-change: transform; animation: sien-demo 6s cubic-bezier(.45,.05,.25,1) infinite; } /* 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. */ @keyframes flote-demo { 0%, 100% { scale: 1; } 50% { scale: 1.016; } } .ver-demo:hover, .ver-demo:focus-visible { /* El flote se detiene al pasar por encima: con la animación puesta, el valor animado gana al del hover y el botón no crecía. */ animation: none; scale: 1.045; background: rgba(20, 33, 57, 1); box-shadow: 0 80px 170px rgba(4, 8, 16, .62), 0 0 130px 32px rgba(6, 10, 20, .5), 0 0 0 5px rgba(201,162,39,.5) inset; } .ver-demo:active { animation: none; scale: .995; } .ver-demo:focus-visible { outline: 12px solid #C9A227; outline-offset: 14px; } /* QUIEN PIDE MENOS MOVIMIENTO NO LO RECIBE. No es un adorno: a algunas personas el movimiento repetido les marea. */ @media (prefers-reduced-motion: reduce) { .ver-demo-sien { animation: none; opacity: 0; } .ver-demo { animation: none; } .ver-demo, .ver-demo:hover { transition: none; } .monitor-bucle { display: none; } } .ver-demo-movil { display: none; align-items: center; gap: 12px; margin-top: 26px; padding: 15px 26px 15px 18px; border: 0; border-radius: 12px; background: #16233D; color: #F4F1E8; font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; min-height: 44px; box-shadow: 0 14px 34px rgba(4,8,16,.5); } .ver-demo-movil svg { flex: none; } .ver-demo-movil:focus-visible { outline: 3px solid #C9A227; outline-offset: 3px; } /* ── el reproductor ───────────────────────────────────────────────────── */ .reproductor { border: 0; padding: 0; background: transparent; max-width: min(1180px, 94vw); width: 100%; } .reproductor::backdrop { background: rgba(8, 12, 22, .82); backdrop-filter: blur(6px); } .reproductor-caja { position: relative; border-radius: 16px; overflow: hidden; background: #05080F; box-shadow: 0 40px 120px rgba(0,0,0,.6); aspect-ratio: 16 / 9; } .reproductor-video { width: 100%; height: 100%; display: block; } .reproductor-mandos { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 14px 18px 16px; background: linear-gradient(to top, rgba(5,8,15,.92), rgba(5,8,15,0)); opacity: 1; transition: opacity .3s ease; } /* Se esconden solos mientras se reproduce: lo que estorba en una demostración es la barra tapando la parte de abajo de la pantalla. */ .reproductor-mandos[data-ocultos] { opacity: 0; pointer-events: none; } .rep-btn { border: 0; background: transparent; color: #F4F1E8; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; flex: none; transition: background .18s ease; } .rep-btn:hover { background: rgba(255,255,255,.12); } .rep-btn:focus-visible { outline: 2px solid #C9A227; outline-offset: 2px; } .i-pausa, .i-mudo { display: none; } .reproductor-caja[data-sonando] .i-play { display: none; } .reproductor-caja[data-sonando] .i-pausa { display: block; } .reproductor-caja[data-mudo] .i-son { display: none; } .reproductor-caja[data-mudo] .i-mudo { display: block; } .rep-barra { position: relative; flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.22); cursor: pointer; } .rep-barra:focus-visible { outline: 2px solid #C9A227; outline-offset: 6px; } .rep-cargado, .rep-progreso { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; width: 0; } .rep-cargado { background: rgba(255,255,255,.2); } .rep-progreso { background: #C9A227; } .rep-tirador { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #F4F1E8; box-shadow: 0 2px 6px rgba(0,0,0,.5); opacity: 0; transition: opacity .18s ease; } .rep-barra:hover .rep-tirador, .rep-barra:focus-visible .rep-tirador { opacity: 1; } .rep-tiempo { color: #CFD6E4; font-size: 13px; font-variant-numeric: tabular-nums; flex: none; min-width: 88px; text-align: center; } .reproductor-cerrar { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: rgba(5,8,15,.62); color: #F4F1E8; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .reproductor-cerrar:hover { background: rgba(5,8,15,.85); } .reproductor-cerrar:focus-visible { outline: 2px solid #C9A227; outline-offset: 2px; } @media (max-width: 620px) { .rep-tiempo { display: none; } /* con la barra basta, y cabe */ } /* ── EN MÓVIL NO CABEN LOS DOS AL LADO ────────────────────────────────── A 390 px de ancho el monitor salía de 172 px: la pantalla de dentro se veía como un sello y el botón, de 69 px, no se podía tocar con el dedo. Aquí manda el titular. El monitor pasa a ser un fondo grande que asoma por la derecha, atenuado: se entiende que hay un producto detrás sin competir con el texto. Y el botón de dentro deja de ser pulsable, porque uno de 69 px es una trampa: se ve, se intenta y se falla. VA AL FINAL DEL ARCHIVO A PROPÓSITO: la regla base de `.ver-demo-movil` es `display: none`, y a igual especificidad gana la última que se lee. Puesto antes, el botón no aparecía nunca y en el teléfono no había forma de abrir la demostración. */ @media (max-width: 860px) { .monitor { right: -20vw; bottom: 2%; width: min(118vw, 640px); opacity: .45; } .ver-demo { display: none; } /* `inline-flex` y no `flex`, o el botón se estira a toda la columna. El alto se fija aquí porque con el `padding` solo se quedaba en 24 px, lejos de los 44 que pide el dedo. */ .ver-demo-movil { display: inline-flex; min-height: 48px; padding: 0 26px 0 18px; } .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; } .func-nav-titulo { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--laton-texto); margin: 0 0 12px 14px; } .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; } /* `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); } .func-nav a b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--laton-texto); flex: none; min-width: 1.1em; } /* ── las secciones ───────────────────────────────────────────────────── */ .funciones-cuerpo { min-width: 0; } .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-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-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); } .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; } /* 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); } .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; } /* ── 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); } .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; } /* ── 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) { .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; } /* 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; } .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; } .func-nav a[aria-current="true"] { border-color: var(--laton); background: rgba(201,162,39,.14); } }