/* Los cinco dominios como línea de tiempo fijada, con el equipo real al lado. LA HOJA TIENE DOS MAQUETACIONES Y EL ATRIBUTO `data-dominios` DECIDE CUÁL. Sin él —sin JS, con reduced-motion, con ahorro de datos, en una pantalla baja— la sección es un documento normal: el titular, los cinco dominios uno debajo de otro CON SU PÁRRAFO ABIERTO. El enlace al catálogo sigue a la sección, fuera del marco recortado. Con el atributo, el cuadro se fija, el riel se enciende estación a estación y sólo la estación en curso muestra su párrafo. DOS ESTACIONES ENSEÑAN FOTOGRAFÍA Y NO MALLA (Emergencias y Educación: no hay `.glb` de RCP ni de microscopio). El motor publica `data-foto-activa` en la sección cuando la estación en curso es de foto; esta hoja retira entonces el lienzo y enseña la foto, en el mismo marco. EL ACORDEÓN SE PLIEGA HACIA ADENTRO Y NUNCA HACIA AFUERA. Es la decisión de accesibilidad de esta hoja. El estado servido es ABIERTO: los cinco párrafos están en el documento y visibles, y es el motor el que pliega cuatro. Al revés —servir plegado y que el motor abra— una página sin JavaScript, un lector que no ejecuta guiones o un fallo de red dejarían cuatro quintas partes de la prosa de la sección invisibles y sin forma de sacarlas. POR QUÉ `grid-template-rows: 0fr → 1fr` Y NO `max-height`. Un `max-height` inventado tiene que ser mayor que el párrafo más largo, así que la transición corre a velocidad distinta en cada estación y llega tarde en la más corta. Las filas de rejilla animan la altura REAL del contenido, sin número mágico y sin medirla con JavaScript. El hijo lleva `overflow:hidden`, que es lo que hace que el recorte funcione mientras la fila se cierra. POR QUÉ EL CONECTOR SE PINTA CON UN PSEUDOELEMENTO Y NO CON UN DEGRADADO. El tramo recorrido y el que falta son dos colores planos con un borde nítido entre ellos, y ese borde se mueve con `--dom-riel`. Un degradado de dos paradas haría lo mismo pero repintando todo el tramo en cada fotograma; una escala sobre un pseudoelemento la compone la GPU. POR QUÉ NO HAY `will-change` EN NINGUNA PARTE. Ni el riel ni el acordeón lo necesitan: son cinco estaciones y dos propiedades. La pista de capa se reserva para lo que la paga, y aquí no la paga nadie. Es la misma decisión que `home-fases.css:69-77`. POR QUÉ EL RESERVADO NO CAMBIA ENTRE LAS DOS MAQUETACIONES. El recorrido trae un valor por defecto ESCRITO EN ESTA HOJA, así que la altura de la sección queda definida en el fotograma en que aterriza `data-dominios` y no espera a que el motor mida. Es la lección de `--film-top`, en `home-sequence.css`, donde no reservar el mismo hueco en las dos maquetaciones costó 0,0806 de CLS medidos a 390x844. EL BLOQUE DE REDUCED-MOTION VA AL FINAL Y CON LA MISMA ESPECIFICIDAD que las reglas encendidas, a propósito: así gana por orden de fuente y esta hoja no necesita un solo `!important`. */ /* ───────────────────────────────────────────────────────────────────────────── 1. El documento. Lo que se ve sin JS, y la base sobre la que monta el resto. ───────────────────────────────────────────────────────────────────────────── */ .home-dominios{ position:relative; padding:var(--s10) 0 0; background:var(--surface); border-top:1px solid var(--hairline); /* El diámetro del punto vive en una variable porque lo necesitan tres reglas que no se tocan: el propio punto, el ancho de la columna y el origen del conector. Cambiarlo en tres sitios era la clase de desajuste que deja el riel medio píxel torcido. */ --dot:13px; --riel-col:var(--s7); /* EL CUERPO DEL TITULAR DE ESTACIÓN, EN UNA VARIABLE, porque no lo usa sólo el titular: de él sale también dónde cae el punto que lo señala. Estaban separados —el titular con su `clamp` y la columna con un `padding-top` en `em` sobre el tipo base— y por eso al subir el tipo el riel se quedó arrancando alto: el `em` de la columna no sabía nada del `clamp` del titular. Ahora los dos leen el mismo número y no pueden separarse. */ --tit:clamp(25px,2.6vw,40px); /* EL RECORRIDO DEL RIEL, ESCRITO AQUÍ CON EL NÚMERO QUE ESCRIBE EL MOTOR, y no con uno inventado. Sale de `ACTO_ANCHO` y `medir()`, en `client/dominios.ts`: `acto·(estaciones-1) + REPOSO·acto`, o sea `460·11 + 0,4·460 = 5.244`. El compacto va en el bloque de 760, con el mismo cálculo sobre `ACTO_COMPACTO`: `360·11 + 0,4·360 = 4.104`. Son doce actos porque el riel del inicio tiene los once sectores y Educación. POR QUÉ IMPORTA UN NÚMERO QUE HOY NO PINTA NUNCA. `encender()` pone `data-dominios` y llama a `medir()` en la misma pasada síncrona, así que el valor en línea gana antes del primer pintado y este respaldo no llega a verse. Pero era 2.400 px contra los 2.269 que escribía el motor, y esa clase de discrepancia es justamente la que costó 0,0806 de CLS medidos en `--film-top`, en `home-sequence.css`: dos maquetaciones que no reservan el MISMO hueco. Aquí no puede haber dos números que discrepen porque los dos salen de la misma cuenta, y queda escrito de dónde. EL MOTOR LE SUMA EL PRÓLOGO CUANDO LO HAY: los píxeles que el riel sube antes del primer acto para que la primera estación quepa, que salen de medir la maquetación y por eso no pueden escribirse aquí. Donde la primera estación cabe —todo escritorio de alto normal— vale 0 y los dos números siguen siendo el mismo. */ --dominios-run:5244px} .home-dominios .dominios-frame{position:relative} .home-dominios .dominios-split{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s8); align-items:center} .home-dominios .dominios-titular{ margin:0 0 var(--s8);color:var(--text); font:400 clamp(34px,3.7vw,58px)/1.06 var(--font-display); letter-spacing:-.025em;max-width:18ch;text-wrap:balance} .home-dominios .dominios-titular b{color:var(--accent-soft);font-weight:400} /* La bajada del titular, que sólo trae el español. Va por debajo del cuerpo de las estaciones a propósito: es la entrada a la sección, no una sexta voz compitiendo con los cinco párrafos que vienen detrás. */ .home-dominios .dominios-ssub{ margin:calc(var(--s5) * -1) 0 var(--s6);max-width:44ch; color:var(--text-3); font-size:clamp(15px,1.2vw,18px);line-height:1.4} .home-dominios .dominios-linea{ list-style:none;margin:0;padding:0; display:grid} .home-dominios .dom-item{ display:grid; grid-template-columns:var(--riel-col) minmax(0,1fr); column-gap:var(--s4)} /* ── la columna del riel ────────────────────────────────────────────────── */ .home-dominios .dot-col{ display:grid; grid-template-rows:auto 1fr; justify-items:center; /* El punto se centra en la PRIMERA LÍNEA del titular, no en el borde de la caja. La caja de línea mide `--tit * 1.08`, así que su centro cae a la mitad de eso y al punto hay que descontarle su propio radio. Sin este empuje el riel arranca alto y se lee despegado del texto que señala. */ padding-top:calc(var(--tit) * .54 - var(--dot) / 2)} /* EL PUNTO NO ES UN SELLO, Y AUN ASÍ SIGUE SIENDO EL MISMO CÍRCULO. `--r-seal` (999px) es el rol semántico de §3 y sólo lo llevan `.pill`, `.cert` y los chips de estado; este punto va `aria-hidden` y es el dibujo del riel, así que `audit:forma` lo cantaba con razón —el valor está en la escala y aun así está mal—. Pasa a `--r-sm`, el rol más pequeño, para la marca más pequeña de la hoja, Y NO CAMBIA NI UN PÍXEL: CSS Backgrounds 3 §5.5 dice que si dos radios contiguos suman más que el lado, todos se escalan por f = lado / suma. La caja es de 13px y `box-sizing:border-box` —el reset universal de `base.css`—, así que con 8px sale f = 13/16 y el radio queda en 6,5px, que es exactamente la mitad del lado: círculo perfecto. Con los 999px de antes salía el mismo 6,5px por el mismo camino. Lo que se corrige es el nombre que se lee, no la forma que se ve. */ .home-dominios .dot{ width:var(--dot);height:var(--dot);border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--control-edge); transition:background var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease)} .home-dominios .connector{ position:relative; width:1px; justify-self:center; margin:var(--s2) 0; background:var(--hairline-2)} /* El tramo ya recorrido. Se dibuja encima del conector apagado y crece de arriba abajo con `--dom-riel`, que escribe el motor de 0 a 1. */ .home-dominios .connector::after{ content:"";position:absolute;inset:0 0 auto; width:100%;height:100%; background:var(--accent); transform:scaleY(var(--dom-riel,0));transform-origin:top; transition:transform 120ms linear} /* La última estación no lleva tramo: no hay siguiente a la que ir. */ .home-dominios .dom-item:last-child .connector{display:none} /* ── el contenido de la estación ────────────────────────────────────────── */ .home-dominios .dom-titulo{ margin:0; display:flex;align-items:baseline;gap:var(--s3); font:500 var(--tit)/1.08 var(--font-display);letter-spacing:-.02em} .home-dominios .dom-titulo a{ color:var(--text);text-decoration:none; transition:color var(--t-ui) var(--ease)} .home-dominios .dom-titulo a:hover, .home-dominios .dom-titulo a:focus-visible{color:var(--accent)} .home-dominios .domain-ix{color:var(--text-3);flex:none} .home-dominios .body-wrap{ display:grid;grid-template-rows:1fr; transition:grid-template-rows 420ms var(--ease)} .home-dominios .body-inner{overflow:hidden} /* La medida baja de 46ch a 40ch al subir el cuerpo: el número de caracteres por línea es lo que se conserva cuando el tipo crece, no el ancho de la caja. Con 46ch a este tamaño la línea se pasa de larga y el ojo pierde el retorno. */ .home-dominios .body-copy{ margin:var(--s4) 0 0;max-width:40ch; color:var(--text-2); font-size:clamp(17px,1.4vw,21px);line-height:1.45} /* El subtítulo de modelos, verbatim de la tabla del cliente (image16): lo que el área enseña, enumerado con punto medio. Va dentro del cuerpo plegable y no suelto bajo el titular —con cinco estaciones en un cuadro de 100svh, cinco subtítulos siempre visibles desbordarían la pantalla baja—. */ .home-dominios .dom-modelos{ margin:var(--s3) 0 0;max-width:44ch; color:var(--text-3); font-size:clamp(14px,1.1vw,16px);line-height:1.45} /* El enlace conserva el rol editorial de home-sequence.css. Su fila queda fuera del escenario de 100svh para que overflow:clip no lo corte. */ .dominios-actions{padding:var(--s7) 0 var(--s10);background:var(--surface)} .dominios-actions .editorial-link{margin-top:0} /* `.dominios-visual` es el anfitrión común del lienzo y las fotos (el frontmatter del bloque lo explica): con los dos hijos ocultos no debe generar item de rejilla, o la fila vacía deja un hueco del alto del `gap` bajo el riel. Mismo contrato que sus dos hijos, en los mismos estados: sin JS, pantalla estrecha y `prefers-reduced-motion`. */ .home-dominios .dominios-visual{display:none} /* El lienzo no ocupa sitio hasta que hay algo que enseñar. La isla marca `is-activo` cuando ya ha pintado su primer fotograma, que es lo que evita el hueco vacío mientras three y la malla llegan. */ .home-dominios .dominios-lienzo{ display:none; opacity:0; transition:opacity var(--t-scene) var(--ease-out)} .home-dominios.is-activo .dominios-lienzo{opacity:1} .home-dominios .dominios-lienzo canvas{display:block;width:100%;height:100%} /* LA FOTO DE ESTACIÓN, LA ALTERNATIVA A LA MALLA. Mismo contrato de marco que el lienzo: no ocupa sitio hasta que hay algo que enseñar, y lo que dice que lo hay es `data-foto-activa` en la sección —lo escribe el motor cuando la estación en curso declaró foto—, no la isla: una fotografía no necesita WebGL ni ocho megas para existir. Las fotos se apilan en absoluto y el relevo entre ellas es un fundido de opacidad; con foto activa el lienzo se retira del cuadro. */ .home-dominios .dominios-fotos{display:none} .home-dominios .dominios-foto{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:50% 46%; opacity:0;transition:opacity var(--t-scene) var(--ease-out)} .home-dominios .dominios-foto.is-activa{opacity:1} /* ───────────────────────────────────────────────────────────────────────────── 2. La línea de tiempo. Sólo con `data-dominios`, que escribe `dominios.js`. ───────────────────────────────────────────────────────────────────────────── */ /* El respaldo del recorrido ya no viaja aquí dentro: vive con las otras tres medidas de la sección, arriba, donde puede tener una variante compacta sin escribir dos veces esta expresión. Un `var()` con respaldo propio habría sido un cuarto número capaz de discrepar de los otros tres. */ .home-dominios[data-dominios]{ padding:0; height:calc(100svh + var(--dominios-run))} .home-dominios[data-dominios] .dominios-frame{ position:sticky;top:0; height:100svh;overflow:clip; display:grid;align-content:center} /* EL REPARTO EN DOS COLUMNAS CUELGA DE `is-activo` Y NO DE `data-dominios`, y es la diferencia entre una sección que se degrada y una con un agujero. `data-dominios` sólo dice que el motor del riel está corriendo. Que haya máquina que enseñar lo dice `is-activo`, que escribe la isla cuando ya ha pintado su primer fotograma. Son dos hechos distintos y hay tres casos reales en los que el primero es cierto y el segundo no: una tarjeta sin WebGL, una malla de ocho megas que no llega, y el propio `catch` de `arranque.ts`. Reservando la columna con `data-dominios` esos tres casos dejaban media pantalla vacía al lado del texto: en una ruta de laboratorio da igual, en el inicio es un agujero en la sección más visitada del sitio. Sin lienzo, el riel ocupa el cuadro entero y la sección se lee como lo que es. El lienzo pide algo más de ancho que el texto: el riel se compone bien en su mitad —el titular a 40px y el cuerpo a 21px— y una cabina en 4/3 entra en la otra sin encogerla. */ /* `width:100%` NO ES REDUNDANTE, y es la clase de detalle que se paga en pantalla. `.wrap` trae `margin:0 auto` (`base.css:99`), y dentro de una rejilla —que es lo que `.dominios-frame` pasa a ser al fijarse— un margen automático en el eje en línea NO estira el elemento: absorbe el hueco libre y lo deja en su ancho de contenido, centrado. Medido a 1440 sin lienzo, el reparto salía de 723px en vez de los 1340 del `--maxw`, y el riel quedaba flotando en mitad del cuadro. Con `width:100%` el elemento llena su pista y `max-width` vuelve a ser quien manda. */ .home-dominios[data-dominios] .dominios-split{ grid-template-columns:minmax(0,1fr); width:100%; gap:clamp(var(--s7),5vw,var(--s9)); min-height:100svh; /* El aire de ARRIBA va al 40 % del escalón, y no es una preferencia: el escenario mide `100svh` clavados y recorta con `overflow:clip`, así que todo lo que gaste el relleno se lo quita al contenido. Con los 64px enteros, la última estación —la más alta, porque su párrafo abre el acordeón— desbordaba y el texto se cortaba a media frase. Estos 38px liberados cubren ese desbordamiento y suben el bloque, que es lo que se pidió. El de abajo se queda: es el que separa del borde inferior. */ padding-top:calc(var(--s8) * .4);padding-bottom:var(--s8)} /* ONCE ESTACIONES NO CABEN EN UNA PANTALLA, Y EL RIEL SE DESLIZA. Con cinco el riel entraba en los 100svh del escenario; con los diez sectores y Educación mide ~1.300px a 900 de alto, y `overflow:clip` cortaba de la sexta estación para abajo: el scroll avanzaba el acordeón fuera de la vista y la parte de abajo parecía congelada. Además la fila de la rejilla crecía hasta el alto del riel y el lienzo, centrado en ella, quedaba medio fuera del cuadro. Ahora la fila mide lo que el escenario, el lienzo se centra en la pantalla y el riel arranca arriba y sube lo que el motor publica en `--dom-desliz` (`client/dominios.ts`), que deja la estación en curso siempre a la vista. */ .home-dominios[data-dominios] .dominios-split{ height:100svh;min-height:0; grid-template-rows:minmax(0,1fr)} .home-dominios[data-dominios] .dominios-riel{ align-self:start; transform:translate3d(0,calc(var(--dom-desliz,0px) * -1),0)} .home-dominios[data-dominios].is-activo .dominios-split, .home-dominios[data-dominios][data-foto-activa] .dominios-split{ grid-template-columns:minmax(0,1fr) minmax(0,1.04fr)} .home-dominios[data-dominios] .dominios-linea{gap:0} /* Las estaciones se separan por el tramo de conector, que es quien tiene que medir: un `gap` aquí partiría el riel en cinco trozos con hueco entre ellos. */ .home-dominios[data-dominios] .dom-item{ grid-template-rows:auto 1fr; padding-bottom:var(--s5)} .home-dominios[data-dominios] .dot{ background:var(--surface); border-color:var(--control-edge)} .home-dominios[data-dominios] .dom-item.is-hecho .dot{ background:var(--accent);border-color:var(--accent)} .home-dominios[data-dominios] .dom-item.is-activo .dot{ background:var(--accent);border-color:var(--accent); /* El halo marca la estación EN CURSO frente a las ya recorridas, que también van en acento. Es un anillo y no un tamaño distinto: cambiar el diámetro movería el riel entero medio píxel al pasar de estación. */ box-shadow:0 0 0 4px var(--accent-wash)} /* El titular apagado no baja de `--text-2`: son enlaces reales y siguen teniendo que leerse y poder pulsarse, no son un índice decorativo. */ .home-dominios[data-dominios] .dom-titulo a{color:var(--text-2)} .home-dominios[data-dominios] .dom-item.is-activo .dom-titulo a{color:var(--text)} .home-dominios[data-dominios] .dom-titulo a:hover, .home-dominios[data-dominios] .dom-titulo a:focus-visible{color:var(--accent)} /* EL PLEGADO. Sólo la estación en curso muestra su párrafo. */ .home-dominios[data-dominios] .body-wrap{grid-template-rows:0fr} .home-dominios[data-dominios] .dom-item.is-activo .body-wrap{grid-template-rows:1fr} /* El foco del teclado manda por encima del scroll: quien tabula hasta una estación plegada tiene que poder leer dónde ha llegado. */ .home-dominios[data-dominios] .dom-item:focus-within .body-wrap{grid-template-rows:1fr} .home-dominios[data-dominios] .dom-item:focus-within .dom-titulo a{color:var(--text)} /* EL PLEGADO CONTINUO. Con el motor corriendo, cuánto está abierta cada estación ya no lo decide una clase con una transición de 420ms, sino el scroll: el motor publica `--abre` (0 a 1) y `--alto` (el alto del párrafo) y la estación que se va se cierra a la vez que se abre la que llega. Es lo que deja al riel deslizarse sin tirones: las alturas no cambian por su cuenta entre dos fotogramas. `data-riel-continuo` lo escribe el motor al encender; sin él (el escáner de contraste, un motor viejo) rige el plegado de arriba. */ .home-dominios[data-dominios][data-riel-continuo] .body-wrap{ display:block;overflow:hidden;transition:none; height:calc(var(--abre,0) * var(--alto,0px))} .home-dominios[data-dominios][data-riel-continuo] .body-inner{opacity:var(--abre,0)} .home-dominios[data-dominios][data-riel-continuo] .dom-item:focus-within .body-wrap{height:auto} .home-dominios[data-dominios][data-riel-continuo] .dom-item:focus-within .body-inner{opacity:1} /* El hueco del lienzo no ocupa sitio hasta que hay un fotograma dentro, por lo mismo que el reparto de arriba. */ .home-dominios[data-dominios].is-activo .dominios-lienzo{ display:block; position:relative; height:min(72svh,620px); border-radius:var(--r-lg); overflow:clip} /* La foto hereda el marco del lienzo, y con foto activa el lienzo sale del cuadro: la estación enseña una cosa u otra. La regla de retirada va con la misma especificidad que la que lo enseña y detrás de ella, que es como esta hoja gana sin `!important`. */ .home-dominios[data-dominios][data-foto-activa] .dominios-fotos{ display:block; position:relative; height:min(72svh,620px); border-radius:var(--r-lg); overflow:clip} .home-dominios[data-dominios].is-activo[data-foto-activa] .dominios-lienzo{ display:none} /* El envoltorio se enciende con cualquiera de sus dos hijos: basta con que uno tenga algo que enseñar para que la celda deba existir. */ .home-dominios[data-dominios].is-activo .dominios-visual, .home-dominios[data-dominios][data-foto-activa] .dominios-visual{ display:block} /* ───────────────────────────────────────────────────────────────────────────── 3. Pantalla estrecha. El lienzo NO se va: baja a una banda propia al pie del escenario cuando cabe (el último bloque de esta sección), y si no cabe pasa DETRÁS del texto, a sangre y sin marco, que es lo que sigue. Aquí no hay dos columnas donde meter medio cuadro de cabina, así que el lateral no sirve. Pero el escenario ya existe en el teléfono y siempre existió: el bloque de abajo nunca tocó el `height:calc(100svh + run)` de la sección ni el `sticky` de `.dominios-frame`, así que un móvil ya recorría 1.677 px fijando una pantalla completa. Lo único que faltaba era que algo la ocupara. Se superpone en vez de reservar fila porque no hay ninguna altura que reservar: la columna de texto es un bloque normal cuyo alto cambia cada vez que el acordeón abre una estación. El bloque contenedor que este lienzo necesita es `.dominios-frame` —`position:sticky`, `overflow:clip` y 100svh clavados— y hay que PEDIRLO, que es lo que hace la primera regla de abajo. ───────────────────────────────────────────────────────────────────────────── */ @media (max-width:820px){ /* EL BLOQUE CONTENEDOR SE FIJA AQUÍ, Y ES UNA CORRECCIÓN. Este bloque daba por hecho que un `inset:0` bajo `.dominios-split` se resolvía contra `.dominios-frame`; no era verdad. `.dominios-split` lleva `wrap`, y `base.css:99` le da `position:relative`, así que el bloque contenedor era la COLUMNA DE TEXTO: el único de los dos cuyo alto cambia —`min-height` de 100svh más relleno, y encima animándose 420ms cada vez que el acordeón abre una estación—. Con eso, el `ResizeObserver` del lienzo disparaba por fotograma y cada disparo reasigna el búfer de dibujo; y el lienzo salía más alto que el escenario, que lo recorta centrado y descuadra el modelo. `position:static` devuelve el `inset:0` al marco. El `z-index:3` de `.wrap` NO se pierde: `.dominios-frame` es rejilla, así que esto sigue siendo un ítem de rejilla y el z-index se le aplica igual. */ .home-dominios[data-dominios] .dominios-split{position:static} .home-dominios[data-dominios] .dominios-split{ grid-template-columns:minmax(0,1fr); /* EL RELLENO CABE EN LO QUE SOBRA, Y LO QUE SOBRA SON 29px. En el teléfono la columna mide 815 dentro de un escenario de 844: los rótulos largos parten en dos líneas y el alto crece justo donde menos sitio hay. Con el escalón de escritorio —25,6 arriba y 64 abajo— el contenido se salía y `overflow:clip` cortaba el texto a media frase, que es el corte que se veía. Doce por lado son 24 y entran con margen. El aire NO se pierde: el velo sangra `--s5` por arriba y por abajo, así que sigue habiendo respiro alrededor del texto; lo que se recorta es la caja, no lo que se ve. */ padding-block:var(--s3)} /* UNA SOLA COLUMNA, TAMBIÉN CON LA ISLA MONTADA. Antes esto se cumplía solo porque en el teléfono la isla no llegaba a montar y `.is-activo` no se ponía nunca. Ahora sí monta, así que hay que ganarle explícitamente a la regla que abre el reparto en dos: lleva `.is-activo` en el selector y por tanto más especificidad que la genérica de arriba. Sin esta línea la columna de texto se queda en 141px y el titular sale una palabra por renglón. */ .home-dominios[data-dominios].is-activo .dominios-split, .home-dominios[data-dominios][data-foto-activa] .dominios-split{ grid-template-columns:minmax(0,1fr)} /* SIN MARCO: ni caja, ni borde, ni radio, ni alto reservado. El modelo flota sobre el suelo de la sección, que es como se ve en el computador. La variante con `.is-activo` va porque la de arriba le da `position:relative` y un alto de 72svh, pensados para la columna de escritorio. */ .home-dominios[data-dominios] .dominios-visual{ display:block;position:absolute;inset:0;z-index:0; /* AQUÍ NO HAY NADA QUE TOCAR, Y POR ESO NO SE TOCA. Esta capa cubre el escenario ENTERO —100svh a sangre—, no una caja acotada. Aquí decía `touch-action:pan-y` citando a `.equipo3d__lienzo` y a `.foot-globe`, y la cita no valía: aquellos dos SÍ tienen arrastre —el visor de la ficha y el globo del pie escuchan puntero— y ésta no escucha ninguno. `escena-equipo.ts` no registra un solo `pointerdown`: la vuelta del modelo es del reloj, no del dedo. Con `pan-y` sobre el viewport entero lo único que se conseguía era comerse el pellizco de zoom, que `pan-y` no incluye (WCAG 1.4.4). `pointer-events:none` dice la verdad: el dedo atraviesa la escena y la página se lee como cualquier otra. */ pointer-events:none} .home-dominios[data-dominios] .dominios-lienzo, .home-dominios[data-dominios].is-activo .dominios-lienzo{ display:block;position:absolute;inset:0; height:auto;border-radius:0} /* El texto por encima, y con velo. Sobre una malla que gira el contraste deja de ser una propiedad de la hoja y pasa a depender del fotograma: sin velo, la misma línea cumple AA con el modelo de frente y lo incumple cuando gira y le pone una manga oscura detrás. El velo lo fija. EL VELO ES EL FONDO DE LA COLUMNA Y SANGRA CON MARGEN NEGATIVO, no un pseudo-elemento. Aquí hubo un `::before` absoluto, y su comentario decía que el fondo directo no servía porque «se comía 67px de los 283 de la tarjeta»: cierto de un relleno a secas, falso de un relleno con su margen negativo al lado. Margen negativo y relleno del mismo valor dejan la caja de CONTENIDO exactamente donde estaba —el rótulo conserva su medida entera— y estiran sólo la caja pintada, que es el rectángulo que el `::before` dibujaba. Sangra por los CUATRO lados y por la misma razón en los dos ejes: el escenario mide 100svh clavados y recorta, así que el aire lo pone el velo saliéndose, no la columna encogiéndose. Y ASÍ LO MIDE LA PUERTA, que es la mitad que importa. `audit-contraste` resuelve la cascada de los elementos reales; un pseudo-elemento no entra en ella —`css-motor.mts:449` los descarta— así que el velo del `::before` era invisible para el escáner: medía este texto contra el fondo opaco de la sección y daba verde sobre un suelo que la malla tapa. Como fondo de un elemento con `data-velo`, el escáner lo compone y lo mide contra los dos suelos extremos. */ .home-dominios[data-dominios] .dominios-riel{ position:relative;z-index:1; margin-block:calc(var(--s5) * -1); padding-block:var(--s5); margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); background:var(--velo)} /* `--text` Y NO `--text-2`, QUE SERÍA EL ROL DE UN CUERPO. Es la misma corrección y el mismo argumento que `home-fases.css:193`, y por la misma causa: este párrafo no se apoya en una superficie plana sino en una MALLA QUE GIRA, a través del velo. El peor píxel de una malla es el negro, y compuesto con `--velo` da rgb(200,203,205); sobre él `--text-2` (#496576) mide 3,78:1 y no llega al 4,5:1 que exigen estos 15px. `--text` mide 11,75:1. La jerarquía frente al rótulo no se pierde: la lleva el cuerpo, 25px contra 15. Los demás roles de la columna ya pasaban —`--text-3` da 4,84:1 y los rótulos son texto grande, con umbral de 3—, así que sólo se corrige el que fallaba. */ .home-dominios[data-dominios] .body-copy{color:var(--text)} /* El motor SÍ corre en el teléfono —sólo la isla es la que no monta— y por eso `data-foto-activa` puede llegar a estar puesto aquí abajo. Las dos reglas de la foto van con la MISMA especificidad que las de arriba y detrás de ellas, que es como esta hoja gana sin `!important`: en pantalla estrecha la estación de foto se lee como las demás, sin lateral. El envoltorio necesita la misma reafirmación con `[data-foto-activa]`: la regla genérica de arriba pierde por especificidad contra la que lo enciende cuando hay foto activa. */ .home-dominios[data-dominios][data-foto-activa] .dominios-split{ grid-template-columns:minmax(0,1fr)} .home-dominios[data-dominios][data-foto-activa] .dominios-fotos{display:none} .home-dominios[data-dominios][data-foto-activa] .dominios-visual{display:none} /* LA BANDA: CUANDO CABE, LA MÁQUINA TIENE SU SITIO Y DEJA DE IR DETRÁS. Todo lo de arriba es lo que queda cuando no cabe. Detrás del velo la malla estaba montada y girando, y se leía como una mancha gris bajo el párrafo: en el teléfono la sección no enseñaba máquina ninguna. `client/dominios.ts` mide el escenario y, si entre la barra de navegación y el borde de abajo caben la estación abierta más alta Y una franja de al menos 180 px, escribe `data-banda` y el alto en `--dominios-banda`. Con eso el envoltorio deja de cubrir el escenario entero y pasa a ser esa franja, pegada abajo, opaca y POR ENCIMA del riel: el texto se desliza por detrás de ella y el motor para cada estación 24 px antes de su borde, así que el párrafo en curso nunca queda tapado. Es el reparto del computador puesto de pie. El lienzo y la foto llenan la franja con las reglas que ya tenían —`inset:0` contra el envoltorio—; aquí sólo cambia la caja del envoltorio. El fundido de arriba es un pseudo-elemento y va FUERA de la franja, sobre los 24 px que el motor deja libres: suaviza el borde por el que asoma el rótulo siguiente sin poner nada encima de lo que se está leyendo. Sin `data-banda` —el motor no la reserva en un 375×553, ni cuando la sección no declara isla— no aplica nada de esto. */ .home-dominios[data-dominios][data-banda] .dominios-visual, .home-dominios[data-dominios][data-banda][data-foto-activa] .dominios-visual{ display:block; inset:auto 0 0;height:var(--dominios-banda); z-index:2;background:var(--surface)} .home-dominios[data-dominios][data-banda] .dominios-visual::before{ content:"";position:absolute;inset:auto 0 100%;height:var(--s5); background:linear-gradient(to top,var(--surface),transparent)} .home-dominios[data-dominios][data-banda][data-foto-activa] .dominios-fotos{ display:block;position:absolute;inset:0;height:auto;border-radius:0} } /* 760 es el mismo umbral que consulta `dominios.ts` para elegir `ACTO_COMPACTO` (`matchMedia('(max-width: 760px)')`), y por eso el respaldo compacto va aquí y no en el bloque de 820, que es el del lienzo. Si un día se separan, la hoja reservaría un hueco y el motor mediría otro. */ @media (max-width:760px){ .home-dominios{--riel-col:var(--s5);--dominios-run:4104px} .home-dominios .body-copy{font-size:15px} } /* ───────────────────────────────────────────────────────────────────────────── 4. Sin movimiento. Al final y con la misma especificidad, para ganar por orden de fuente sin un `!important`. La sección vuelve a ser su documento, con LOS CINCO PÁRRAFOS ABIERTOS. ───────────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .home-dominios[data-dominios]{padding:var(--s10) 0;height:auto} .home-dominios[data-dominios] .dominios-frame{ position:relative;height:auto;overflow:visible;display:block} .home-dominios[data-dominios] .dominios-split{ grid-template-columns:minmax(0,1fr);min-height:0;padding-top:0;padding-bottom:0; height:auto;grid-template-rows:none} .home-dominios[data-dominios] .dominios-riel{transform:none} .home-dominios[data-dominios] .body-wrap, .home-dominios[data-dominios] .dom-item.is-activo .body-wrap{ grid-template-rows:1fr;transition:none} .home-dominios[data-dominios][data-riel-continuo] .body-wrap{height:auto} .home-dominios[data-dominios][data-riel-continuo] .body-inner{opacity:1} .home-dominios[data-dominios] .dom-titulo a, .home-dominios[data-dominios] .dom-item.is-activo .dom-titulo a{color:var(--text)} .home-dominios[data-dominios] .connector::after{transition:none} .home-dominios[data-dominios] .dominios-lienzo{display:none} .home-dominios[data-dominios] .dominios-visual{display:none} /* Defensa en el mismo umbral que el lienzo: con movimiento reducido el motor se apaga y retira `data-foto-activa`, así que esta regla no debería pintar nunca; va aquí para que un motor distinto no pueda dejar la foto puesta. */ .home-dominios[data-dominios][data-foto-activa] .dominios-fotos{display:none} .home-dominios[data-dominios][data-foto-activa] .dominios-visual{display:none} /* Y lo mismo para la banda del teléfono, que gana por especificidad a las dos de arriba: `apagar()` retira `data-banda`, y esto cubre al motor que no. */ .home-dominios[data-dominios][data-banda] .dominios-visual, .home-dominios[data-dominios][data-banda][data-foto-activa] .dominios-visual{display:none} }