/* ⚠ NO SE BORRAN AUNQUE PAREZCAN MUERTOS — 2026-08-12, y estuvieron borrados y publicados un minuto. Un crítico de movimiento auditó `instituto.html`, no encontró ni un `.respira` ni un `.filete--se-traza` y los dio por código muerto. Y en esa página lo son. Pero ESTA HOJA LA COMPARTEN LAS DOS: la portada usa `.respira` seis veces, `.filete--se-traza` tres y `.cartucho--sello` cuatro. La regla que queda escrita: **una auditoría hecha sobre una página no autoriza a tocar un fichero que sirve a dos.** Antes de borrar de `ornamentos.css`, `tokens.css`, `secciones.css` o `fuentes.css`, se cuenta en las DOS. */ @charset "utf-8"; /* ORNAMENTOS · v3 — el vocabulario de la capa egipcia. El porqué, en ORNAMENTOS.md; aquí el cómo y LA DOSIS, que es lo que fallaba. CARTUCHO: nombres y remates, nunca un párrafo. TRAZO DETERMINATIVO: la raya que sigue a cada cartucho, gramática y no adorno. AKHET: solo en un CORTE de superficie. MARCO: UNA figura que se ve entera. LÍNEA (filete, doble, tierra, trazos): puntuación, y de ahí sale la frecuencia. */ /* 0 · SUPERFICIE. El oro da 2,6:1 en claro y 8,4:1 en negro. Si tiene que PESAR en claro: [data-orn="hondo"]. */ :root{ --orn-oro: var(--oro); --orn-trazo: var(--filete-grosor, 1px); /* el oro SIEMPRE a 1 px */ } [data-orn="hondo"]{ --orn-oro: var(--oro-hondo); } /* 1 · EL CARTUCHO — la cuerda que rodea un nombre: lazo cerrado, y lo de dentro está protegido. CSS y no SVG: un SVG escalado engorda la línea, un borde crece limpio. */ .cartucho{ --cartucho-color: var(--orn-oro); --cartucho-y: 0.5em; --cartucho-x: 1.7em; /* Las dos medidas del trazo determinativo (1.d). Ninguna variante las toca. */ --trazo-alto: 58%; /* del alto del óvalo: crece y encoge CON la cuerda */ --trazo-hueco: 0.5rem; /* media eme del texto base. Igual en las tres escalas */ position: relative; display: inline-flex; align-items: center; justify-content: center; padding: var(--cartucho-y) var(--cartucho-x); /* media eme, trazo, media eme: el sitio del determinativo, reservado. */ margin-right: calc(var(--trazo-hueco) * 2 + var(--orn-trazo)); /* ⚠ EL BORDE SE QUEDA, PERO TRANSPARENTE, Y LA CUERDA SE DIBUJA EN `::before` — 2026-08-11. El motivo es que la cuerda tiene que poder MOVERSE sin arrastrar el texto: un `scaleX` sobre el elemento entero deforma las letras. Con la cuerda en un pseudoelemento superpuesto, el óvalo se cierra y la frase se queda quieta. El borde real NO se borra, se vuelve transparente: sigue aportando su píxel a la caja, así que la maqueta no se mueve ni un subpíxel y el CLS —que está en 0,0000— no se puede tocar desde aquí. Cambiarlo por `border: 0` movería el ancho de los seis cartuchos de la página. */ border: var(--orn-trazo) solid transparent; border-radius: 999px; color: inherit; text-align: center; text-decoration: none; } /* La cuerda. `inset` negativo del grosor del trazo para caer exactamente donde caía el borde: el pseudo se posiciona contra la caja de relleno, que está un píxel dentro. `pointer-events: none` porque hay cartuchos que son enlaces. */ .cartucho::before{ content: ""; position: absolute; inset: calc(var(--orn-trazo) * -1); border: var(--orn-trazo) solid var(--cartucho-color); border-radius: 999px; pointer-events: none; } /* 1.a · MARCA — el nombre de quien firma: cabecera y pie. */ .cartucho--marca{ --cartucho-y: 0.62em; --cartucho-x: 1.55em; font-family: var(--sans); font-size: var(--t-etiqueta); font-weight: var(--peso-medio); font-stretch: var(--ancho-etiqueta); letter-spacing: var(--tr-etiqueta); line-height: var(--lh-etiqueta); text-transform: uppercase; } /* 1.b · AMPLIO — el remate de la página. Un cartucho crece a lo ANCHO: pasado el centenar de píxeles de alto se lee pastilla de botón, así que el cuerpo lo pone la pieza y se planta en 3,5 rem — ~90 px de alto, 7 a 1 de largo. Una línea, no dos. */ .cartucho--amplio{ --cartucho-y: 0.28em; --cartucho-x: 1.8em; max-width: 100%; font-family: var(--serif); font-size: clamp(1.375rem, 6.6vw, 3.5rem); /* 22 → 56 px, y ahí se para */ line-height: var(--lh-display); letter-spacing: var(--tr-display); } /* 1.c · SELLO — el número de un apartado: encerrar un signo es decir «este y no otro». El min-width impide que un dígito suelto lo vuelva un círculo. */ .cartucho--sello{ --cartucho-y: 0.34em; --cartucho-x: 0.7em; min-width: 3.1em; font-family: var(--sans); font-size: var(--t-etiqueta); font-weight: var(--peso-medio); font-stretch: var(--ancho-etiqueta); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; } /* 1.d · EL TRAZO DETERMINATIVO — la raya vertical que sigue a todo cartucho. En egipcio un determinativo no se pronuncia: dice CÓMO se lee lo que va delante, y el trazo simple dice «esto significa literalmente lo que enseña». Aquí: lo de dentro se lee tal cual, no hay letra pequeña. Detrás y no delante, porque un determinativo cierra la palabra. Tres medidas y ninguna suelta: alto = --trazo-alto del óvalo · hueco = --trazo-hueco a cada lado · eje = el centro exacto del óvalo. Y uno, uno siempre: tres rayas ya son otro signo, el plural de .trazos (4.d). */ .cartucho::after{ content: ""; position: absolute; left: calc(100% + var(--trazo-hueco)); top: calc((100% - var(--trazo-alto)) / 2); width: var(--orn-trazo); height: var(--trazo-alto); background: var(--cartucho-color); } /* Pulsable: el metal sube. Nunca relleno: relleno es botón. */ a.cartucho{ transition: border-color var(--t-medio) var(--curva); } a.cartucho:hover{ --cartucho-color: var(--oro-claro); } [data-orn="hondo"] a.cartucho:hover{ --cartucho-color: var(--oro); } /* 2 · EL AKHET — el disco solar entre dos laderas: el horizonte, o sea el amanecer. Trazo no escalable: el sol crece sin que engorde el oro. */ .akhet{ display: block; flex: none; width: var(--akhet-ancho, 48px); height: calc(var(--akhet-ancho, 48px) / 2); margin-inline: auto; color: var(--orn-oro); } .akhet--medio{ --akhet-ancho: 84px; } .akhet--ancho{ --akhet-ancho: clamp(112px, 24vw, 168px); } /* Sobre negro, oro claro; sobre porcelana EN TINTA: a 2,6:1 un pelo no es discreto. */ .akhet--claro{ color: var(--oro-claro); } .akhet--tinta{ color: var(--texto); } /* 2.a · EL CORTE — el horizonte cruza la sección y se interrumpe donde sale el disco, igual que dentro del glifo. Un sello de 48 px es un dibujito; esto es el horizonte. */ /* ⚠ `--sol` ES NUEVO Y ES LA VARIACIÓN QUE PEDÍA CARLOS — 2026-08-11. Su observación: «el detallito se va repitiendo en todos igual, igual podemos variarlo». Y es cierto que los cinco akhets son idénticos, pero eso NO es un descuido: es la regla que los convierte en gramática —«un glifo que sale una vez es una anécdota; un glifo que sale siempre que ocurre lo mismo es un signo»—. Si cada uno fuera distinto dejarían de ser cinco veces el mismo signo. Así que el glifo NO se toca: lo que cambia es DÓNDE cae el disco en su horizonte. `--sol` va de 0 (pegado a la izquierda) a 2 (pegado a la derecha), y reparte el crecimiento de las dos mitades de la línea. Con los cinco valores en orden, el sol CRUZA la página de izquierda a derecha a lo largo del recorrido: la página entera se convierte en un día, y el ojo lo registra sin que nadie lo escriba. Cinco valores, en orden, y la comprobación sigue siendo aritmética: cinco cortes, cinco glifos, cinco posiciones crecientes. Si alguien añade un corte, le pone el valor que le toque en la serie; si alguien los pone todos iguales, se pierde la variación pero NO se rompe nada. Coste: cero bytes y cero cuadros — es el mismo `flex-grow` que ya había, con otro número. */ .akhet-corte{ --akhet-ancho: 84px; --sol: 1; /* centrado, que es el reparto de siempre */ display: flex; align-items: flex-end; gap: 0; width: 100%; } .akhet-corte--sol-1{ --sol: 0.42; } .akhet-corte--sol-2{ --sol: 0.72; } .akhet-corte--sol-3{ --sol: 1.00; } .akhet-corte--sol-4{ --sol: 1.30; } .akhet-corte--sol-5{ --sol: 1.60; } .akhet-corte::before, .akhet-corte::after{ content: ""; flex: 1 1 0; height: var(--orn-trazo); background: var(--orn-oro); opacity: .55; /* Al suelo del glifo (y=23 de 24, o sea ancho/48), no por el centro del sol. */ margin-bottom: calc(var(--akhet-ancho, 48px) / 48); } /* El reparto: la mitad izquierda crece `--sol` y la derecha lo que falta hasta 2. Con `flex-basis: 0` en las dos, la razón entre los dos números ES la posición del disco. `--sol: 1` deja las dos a 1 y el disco en el centro, o sea el estado que había antes de que esto existiera. */ .akhet-corte::before{ flex-grow: var(--sol); } .akhet-corte::after { flex-grow: calc(2 - var(--sol)); } .akhet-corte--corto{ --akhet-ancho: 56px; max-width: 20rem; margin-inline: auto; } .akhet-corte--tinta::before, .akhet-corte--tinta::after{ background: var(--texto); opacity: .22; } /* El amanecer dicho con movimiento: las dos mitades crecen DESDE el disco al entrar la sección. Sin JavaScript, y no existe si el navegador no lo soporta. */ @keyframes orn-amanece{ to{ transform: scaleX(1); } } /* ⚠ Y AHORA EL DISCO SUBE — 2026-08-11. Hasta hoy las dos mitades del horizonte crecían desde el disco pero el disco ya estaba puesto: el glifo significa «amanecer» y no amanecía. Ahora el sol entra subiendo, un 16 % de su propio ancho, mientras la línea se abre a los dos lados. Es la misma pieza haciendo lo que dice. POR QUÉ SUBE EL GLIFO ENTERO Y NO SOLO EL CÍRCULO, que era la idea bonita: para que el disco saliera POR DETRÁS de la línea haría falta una máscara, y aquí no hay nada detrás de lo que salir — el horizonte del glifo (`M0 23 H16 M32 23 H48`) tiene un HUECO justo donde va el disco, así que un círculo bajando se vería igual por debajo. Enmascararlo son un `clipPath` con su `id` y cinco copias del SVG en línea con el mismo identificador, o sea HTML inválido. Se ha elegido lo que se puede hacer con una regla y sin tocar el marcado: sube el conjunto. ⚠ Queda apuntado como lo siguiente si algún día se quiere el amanecer literal: un `` declarado UNA vez en el documento y referenciado desde los cinco. Es `transform` y `opacity` sobre la caja del SVG, o sea compositor puro: la verja de 0 % de cuadros por encima de 20 ms no se toca. Y sin `view()` el @supports entero se cae y el glifo se ve entero y quieto, que es el estado correcto. */ @keyframes orn-sale-el-sol{ to{ transform: none; opacity: 1; } } @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: view()){ .akhet-corte--amanece::before, .akhet-corte--amanece::after{ transform: scaleX(0); animation: orn-amanece linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; } .akhet-corte--amanece::before{ transform-origin: right center; } .akhet-corte--amanece::after { transform-origin: left center; } /* El disco entra un poco antes de que la línea acabe de abrirse: primero sale el sol y después se hace el horizonte, que es el orden en que amanece de verdad. */ .akhet-corte--amanece .akhet{ transform: translateY(calc(var(--akhet-ancho) * 0.16)); opacity: 0; animation: orn-sale-el-sol var(--curva-larga) both; animation-timeline: view(); animation-range: entry 0% entry 58%; } } } /* ══════════════════════════════════════════════════════════════════════════════ EL CARTUCHO QUE SE CIERRA, Y LOS CUATRO SELLOS QUE SE ESTAMPAN — 2026-08-11 Carlos pidió «algunos efectos de movimiento de un bloque a otro… para que dé ese efecto guau y quede todo más consolidado». Estas dos son la respuesta en el símbolo que más pesa del sistema. EL CARTUCHO ES LA CUERDA QUE ENCIERRA EL NOMBRE DE QUIEN IMPORTA, y en el cierre de la página encierra «Tú decides». Hasta hoy estaba ahí, quieta. Ahora **se cierra**: el óvalo entra estrechado y se abre hasta abrazar la frase mientras se llega a él. Es el último gesto de la página y es el sentido entero de la capa egipcia, ejecutado una vez y donde más se ve. ⚠ Y SOLO UNA VEZ. El cartucho de la cabecera y el del pie NO se animan: son la firma de la casa y una firma no se dibuja cada vez que pasas por delante. Si alguien anima los tres, el gesto deja de significar nada. LOS SELLOS son los números de los cuatro pilares. Se estampan uno detrás de otro al bajar el bloque, cada uno con su propia línea de tiempo, así que el decalado sale de estar más abajo y no de ningún `delay`. Cuatro sellos en serie es lo que convierte cuatro piezas en un sistema. Las dos son `transform` sobre un pseudoelemento de 1 px de borde: compositor puro. Y las dos empiezan en 0,62 y no en 0: un óvalo que nace de la nada parpadea; uno que entra estrechado se lee como una cuerda que se tensa. ══════════════════════════════════════════════════════════════════════════════ */ @keyframes orn-cierra{ to{ transform: none; opacity: 1; } } @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: view()){ .cartucho--amplio::before, .cartucho--sello::before{ transform: scaleX(0.62); opacity: 0; animation: orn-cierra var(--curva-larga) both; animation-timeline: view(); } /* El amplio se toma su tiempo: es el remate de la página. */ .cartucho--amplio::before{ animation-range: entry 8% entry 62%; } /* El sello es un golpe: entra y se acaba. */ .cartucho--sello::before{ animation-range: entry 0% entry 34%; } } } /* ══════════════════════════════════════════════════════════════════════════════ EL PLANO RESPIRA — 2026-08-11. Carlos: «me falta algún efecto guau más chulo; mira cómo empezamos en el héroe, es potentísimo, necesitamos alguna transición más que haga eso, para que sea más visual, sutil pero visual». Lo que hace potente al héroe es que **el plano se mueve gobernado por el scroll**. Esto es ese mismo principio en las fotografías fijas: cada plano entra un 6 % más grande y se asienta a su tamaño mientras cruza la pantalla. No hay corte, no hay fundido y no se ve «una animación»: se ve que la imagen está viva. POR QUÉ SE PUEDE HACER SIN TOCAR LA MAQUETA: las fotos viven en marcos con `overflow: hidden` y `aspect-ratio`, así que la imagen se mueve DENTRO de su marco y la caja no cambia de tamaño. El CLS no se puede mover desde aquí. ES `transform` Y NADA MÁS: compositor puro. Sin `will-change`, a propósito — forzar capa en seis imágenes grandes cuesta memoria todo el rato para ganar un cuadro al entrar—. El tramo va en `cover` porque el sujeto es alto: se asienta al 70 % del recorrido, o sea con tiempo de sobra antes de que la foto salga. Y el 6 % es el techo: por encima se nota el movimiento, y lo que tiene que notarse es la foto. ══════════════════════════════════════════════════════════════════════════════ */ /* ⚠ ABIERTO Y SIN DIAGNOSTICAR, y se escribe para que nadie lo declare limpio: de los SEIS planos marcados, CUATRO recorren el tramo entero —medido leyendo el `transform` calculado a ocho alturas de scroll: 1,060 → 1,021 → 1,000— y DOS se quedan clavados en 1,017 y no se mueven. Los dos que no se mueven quedan por tanto con un 1,7 % de escala permanente: son 5 px de recorte en un marco que ya recorta, o sea invisible, y las verjas no se enteran. Pero no funcionan. La sospecha, sin comprobar: los dos están dentro de contenedores con `overflow: hidden` colgados de una sección a sangre (`width: 100vw` con margen negativo), y la línea de tiempo `view()` del `` absolutamente posicionado puede estar midiendo contra un contenedor de scroll distinto del documento. Lo que hay que probar primero es mover la clase del `` al marco, o declarar `view-timeline` en el marco y consumirla con `animation-timeline` en la imagen. */ @keyframes orn-respira{ to{ transform: none; } } @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: view()){ .respira{ transform: scale(1.06); animation: orn-respira linear both; animation-timeline: view(); animation-range: cover 0% cover 70%; } } } /* 3 · EL MARCO DE ESQUINA — cuatro escuadras de 1 px, sin lados: encierra sin encerrar. Con degradados, porque un borde no puede estar solo en las esquinas. */ .marco{ --marco-lado: clamp(1.25rem, 3vw, 2.25rem); /* longitud del brazo */ --marco-color: var(--orn-oro); --marco-g: linear-gradient(var(--marco-color) 0 0); --marco-h: var(--marco-lado) var(--orn-trazo); /* brazo tumbado, y de pie */ --marco-v: var(--orn-trazo) var(--marco-lado); position: relative; padding: clamp(var(--e-5), 4vw, var(--e-8)); background-image: var(--marco-g), var(--marco-g), var(--marco-g), var(--marco-g), var(--marco-g), var(--marco-g), var(--marco-g), var(--marco-g); background-size: var(--marco-h), var(--marco-v), var(--marco-h), var(--marco-v), var(--marco-h), var(--marco-v), var(--marco-h), var(--marco-v); background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom; background-repeat: no-repeat; } /* 3.a · IMAGEN — las escuadras se apartan de la foto lo justo para leerse marco. */ .marco--imagen{ --marco-lado: clamp(1.5rem, 7vw, 3rem); padding: clamp(0.5rem, 2vw, 0.875rem); } .marco--imagen img{ display: block; width: 100%; } /* 3.b · TEXTO — más aire y brazos largos. */ .marco--texto{ --marco-lado: clamp(1.75rem, 5vw, 3.25rem); padding: clamp(var(--e-6), 6vw, var(--e-8)); } /* 3.c · CITA — dos esquinas: arriba izquierda ABRE, abajo derecha CIERRA. Es lo que hacen unas comillas, dicho con nuestro alfabeto. */ .marco--cita{ padding: clamp(var(--e-5), 4vw, var(--e-7)); background-size: var(--marco-h), var(--marco-v), 0 0, 0 0, 0 0, 0 0, var(--marco-h), var(--marco-v); } /* 4.a · FILETE — regla con marcas: separa sin meter caja. */ .filete{ height: var(--orn-trazo); border: 0; margin: 0; background: repeating-linear-gradient(to right, var(--orn-oro) 0 18px, transparent 18px 24px); opacity: .6; } .filete--liso{ background: var(--orn-oro); opacity: .45; } /* 4.b · FILETE DOBLE. Un muro egipcio se lee por REGISTROS: bandas horizontales, cada una una escena, y lo que las separa es una línea DOBLE. Nunca una raya gorda. */ /* ⚠ `--se-traza` ES NUEVO — 2026-08-11, y es la pieza más barata de todas las que pidió Carlos: «algún detallito de movimiento entre bloques para que quede todo más consolidado». El diagnóstico era que la página ya tenía este gesto —el filete que se escribe de izquierda a derecha— en tres sitios (bloques 01, 03 y el camino del 05) y en los otros tres el filete estaba simplemente dibujado. Tres costuras que se escriben y tres que no es lo que hace que una página parezca de dos manos. Ahora es una sola clase, con la misma curva y el mismo tramo en todas, así que cada costura hace exactamente el mismo gesto. Eso es lo que se siente como «consolidado»: no un efecto nuevo, el mismo efecto en todas partes. `scaleX` sobre una caja de 1 px de alto: compositor puro. Y de izquierda a derecha, como se lee — nunca desde el centro. */ .filete--se-traza{ transform-origin: left center; } @keyframes orn-traza-filete{ to{ transform: scaleX(1); } } @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: view()){ .filete--se-traza{ transform: scaleX(0); animation: orn-traza-filete var(--curva-larga) both; animation-timeline: view(); /* En `cover` y no en `entry`: el sujeto mide un píxel de alto, así que su `entry` es un salto de un píxel de scroll —o sea un parpadeo—. El 26 % de `cover` son unos 220 px, que es velocidad de lectura. Es el mismo motivo escrito en los bloques 01 y 03. */ animation-range: cover 4% cover 26%; } } } .filete--doble{ height: 4px; opacity: .5; background: linear-gradient(var(--orn-oro) 0 0) top / 100% var(--orn-trazo) no-repeat, linear-gradient(var(--orn-oro) 0 0) bottom / 100% var(--orn-trazo) no-repeat; } /* 4.c · LÍNEA DE TIERRA. En el relieve egipcio nada flota: cada figura se apoya en una línea trazada ANTES que ella. El criterio es lo que hay debajo de lo que se afirma. */ .linea-tierra{ position: relative; padding-bottom: var(--e-4); } .linea-tierra::after{ content: ""; position: absolute; left: 0; bottom: 0; width: var(--tierra-largo, 100%); height: var(--orn-trazo); background: var(--orn-oro); } .linea-tierra--corta{ --tierra-largo: 4.5rem; } /* la peana de una frase */ .linea-tierra--sale::after{ /* sigue por el muro */ left: calc(var(--seccion-x) * -1); width: calc(100% + var(--seccion-x)); } /* 4.d · TRAZOS DEL PLURAL. TRES rayas verticales detrás de un signo significan «más de uno»: no se pronuncian, clasifican. Anuncian una enumeración antes de que empiece, y como son gramática salen muchas veces sin gastarse. ⚠ UNA raya dice «léelo literal» (1.d); TRES dicen «hay varios». Distinta palabra. */ .trazos{ --trazo-g: linear-gradient(var(--orn-oro) 0 0); display: inline-block; width: 13px; height: 0.78em; margin-inline: 0.5ch; vertical-align: -0.04em; background: var(--trazo-g) left center / var(--orn-trazo) 100% no-repeat, var(--trazo-g) center center / var(--orn-trazo) 100% no-repeat, var(--trazo-g) right center / var(--orn-trazo) 100% no-repeat; } .trazos--menor{ width: 10px; height: 0.66em; } /* 5 · EL RESPLANDOR — la luz, no el objeto: quita el fondo plano del negro. */ .resplandor{ position: relative; isolation: isolate; } .resplandor::before{ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 80% at var(--resplandor-x, 78%) var(--resplandor-y, 50%), rgba(201,164,76,.16) 0%, rgba(201,164,76,.06) 38%, transparent 70%); } /* La luz entra por ABAJO, por donde se abrirá en claro: el akhet sin dibujarlo. */ .resplandor--amanece::before{ background: radial-gradient(75% 45% at 50% 100%, rgba(201,164,76,.18) 0%, rgba(201,164,76,.05) 45%, transparent 72%); } /* 6 · MOVIMIENTO. Todo estático salvo el amanecer, y ese se apaga a mano: una animación de línea de tiempo de scroll no depende de la duración. */ @media (prefers-reduced-motion: reduce){ .akhet-corte--amanece::before, .akhet-corte--amanece::after{ animation: none !important; transform: none !important; } a.cartucho{ transition: none; } }