/* ═══ LA BARAJA · el sistema, en todas las pantallas ══════════════════════ * * Nació en la portada (V1, 2026-08-15) y aquí vive suelto porque el director * la quiere en los micrositios —tarjetas, gastronomía, auditoría, clientes—. * Esta hoja trae SOLO lo que vale en cualquier página: la tarjeta, el pin, el * solape, el imán, la cesión y el riel. Lo que sea de una página —qué sección * no se monta sobre la anterior, qué rieles sangran, cómo se aprieta un * hangar— se queda en la hoja de esa página. * * LO QUE PIDIÓ EL DIRECTOR, con sus palabras: cada sección sube como una * tarjeta que se coloca al desplazar; el título se ajusta al margen superior * y el resto del texto se desplaza hasta el final. Decidido con opciones el * 2026-08-15 (arquitectura §6): pin de rótulo en una línea, imán suave, y la * cesión de la tarjeta cubierta como MEJORA progresiva — donde no hay soporte * queda el apilado simple, y con menos movimiento no queda ni eso. * * V2 · LA BARAJA CRUZA EL CORTE (2026-08-19). Orden del director, con sus * palabras: «pasemos el mundo del celular al escritorio». La tarjeta, el pin, * el imán, la cesión, el riel con mandos, el cristal y la barra de secciones * dejan de ser exclusivos del teléfono: el sistema entero vale en cualquier * ancho. Lo que sigue siendo del teléfono es su RECALIBRACIÓN —tipos y aires * medidos sobre 650–740 px útiles— y el acomodo del héroe. Lo que era solo de * escritorio —el imán suave de proximity que vivía en portada.css— muere en * este mismo cambio: el sistema es dueño del imán y no puede haber dos. * * CÓMO FUNCIONA, pieza por pieza: * · la TARJETA: cada sección con superficie propia, esquinas redondeadas y * sombra hacia arriba, separada 6 px de los cantos — el cielo respira en * los bordes y la página se lee como una baraja, no como un rollo. * · el PIN: el antetítulo de la sección (mismo estilo del sistema) vive * duplicado como primera fila de la tarjeta y se PEGA bajo la barra * (`sticky`); el original del encabezado se esconde en el celular para * que no diga dos veces lo mismo. En escritorio es al revés: el pin no * existe y el original manda. * · el SOLAPE: cada tarjeta monta 14 px sobre la cola de la anterior — la * esquina redondeada y la sombra hacen el gesto de «subir por encima». * · la CESIÓN (mejora progresiva, @supports abajo): al salir por arriba, * la tarjeta cubierta se encoge un pelo y se apaga — el efecto App Store. * * QUIEN LA USE debe hacer tres cosas en su página: marcar cada sección con * `class="baraja"`, darle como PRIMER hijo un `

`, y quitarle el solape a la primera con * `margin-top: 0` en su propia hoja. La primera pantalla SÍ puede ser tarjeta * —la portada lo es desde el 2026-08-17, por decisión del director—; lo que * no cambia es que su parada sea 0 exacto, para que el scroll nazca quieto. */ /* V2: el pin vive en todas las pantallas. Aquí hubo un interruptor que lo apagaba en escritorio («ni una regla de este sistema cruza el corte»); murió el 2026-08-19 con la orden de cruzarlo entero. */ /* V2: el riel es riel en cualquier ancho. El escape a `display: contents` —que en escritorio disolvía el riel y devolvía sus tarjetas a la reja de la sección— murió con el cruce: las flechas y el imán son ahora la manera de recorrer una pista también con ratón, donde arrastrar en horizontal es un gesto que no existe. */ /* (V2: este bloque nació dentro de @media (max-width: 900px); hoy es de todas las pantallas y solo la franja de tableta conserva su acotación.) */ .baraja { position: relative; background: var(--superficie); border: 1px solid var(--borde); border-radius: 22px; margin-inline: 6px; padding-inline: calc(var(--margen-lateral) - 6px); box-shadow: 0 -22px 44px -26px rgba(10, 12, 16, .6); /* El solape (−14 px) murió en la recalibración: con el imán, el montado se veía como sobreposición al deslizar. Las tarjetas se tocan. */ margin-top: 0; scroll-snap-align: start; scroll-margin-top: calc(var(--alto-barra) + 6px); /* `clip` y NO `hidden`, y es la diferencia entre que la baraja exista o no: `hidden` convierte a la tarjeta en contenedor de scroll y el pin se pega a ELLA (o sea, a nada); `clip` recorta igual en las esquinas redondeadas pero deja al pin pegarse al viewport, que es su trabajo. Se paga con gusto: hay reglas heredadas con `hidden`. */ overflow: clip; } /* ── EL ALTO DE PANTALLA ES DEL TELÉFONO (2026-08-23) ── Cada tarjeta era dueña de su pantalla en TODOS los anchos desde el cruce, y en un monitor eso da secciones de 816 a 1 695 px con tres líneas dentro —medido a 1440 en las once de la portada—. En un teléfono la regla es buena porque el cuerpo siempre llena; en un monitor produce el «móvil ampliado» que el director vio. La tarjeta sigue siendo tarjeta en escritorio —fondo, filo, radio, pin, cristal y aliento cruzan igual—; lo que no cruza es el alto forzado: ahí la tarjeta vale lo que dice. */ @media (max-width: 900px) { .baraja { min-height: calc(100svh - var(--alto-barra)); } } /* ── En tableta la tarjeta mide lo que mide su cuerpo ── El mínimo de una pantalla se pensó para un teléfono, donde el cuerpo siempre la llena. En 768x1024 sobra tanto que la tarjeta se lee como si le faltara algo. Aquí el mínimo se retira y la tarjeta vale lo que dice. Todo lo demás —el pin, el solape, el imán, la cesión— sigue igual, porque nada de eso dependía del alto. Se guarda un piso holgado para que el pin no se coma la tarjeta cuando el cuerpo es de dos líneas. */ @media (min-width: 600px) and (max-width: 900px) { .baraja { min-height: 22rem; padding-block: var(--e5); } } /* EL PIN. Primera fila de la tarjeta, pegada bajo la barra del sitio. Fondo propio y filo abajo: sin ellos, el cuerpo se le transparenta al pasar. */ .baraja-pin { position: sticky; top: var(--alto-barra); z-index: 3; display: flex; align-items: center; min-height: 44px; margin: 0 calc((var(--margen-lateral) - 6px) * -1); padding-inline: calc(var(--margen-lateral) - 6px); background: var(--superficie); border-bottom: 1px solid var(--filo); border-radius: 22px 22px 0 0; } /* El antetítulo original del encabezado calla: su texto ya está en el pin, y dos veces el mismo rótulo es ruido. EL SELECTOR ES DESCENDIENTE Y NO DE HIJO DIRECTO (2026-08-23): con el `>` dejaba de casar en cuanto el encabezado entraba en un envoltorio —`.vista-col`, en las vistas que se componen a dos columnas— y el rótulo salía repetido bajo el pin. Se vio en la captura, no en el código. */ .baraja header .antetitulo:not(.baraja-pin), .baraja .encabezado .antetitulo:not(.baraja-pin) { display: none; } /* El cuerpo de la tarjeta arranca pegado al pin con su propio aire. */ .baraja.seccion { padding-block: 0 var(--e5); } .baraja.seccion > header { margin-top: var(--e3); } /* Sin el alto de pantalla que la sostenía, en escritorio la tarjeta cierra demasiado pronto: el aire de abajo sube a --e6 y el encabezado toma el suyo. Es lo único que el alto forzado hacía bien y hay que reponer. */ @media (min-width: 900.02px) { .baraja.seccion { padding-block: 0 var(--e6); } .baraja.seccion > header { margin-top: var(--e4); } } /* ── EL RIEL: una tarjeta a la vez, con mandos ── SOLO HASTA 900 (2026-08-23). El cruce lo llevó a todos los anchos y en un monitor de 2 000 px medía 496: doce casos de éxito de uno en uno, cinco valores, cinco pasos y diez preguntas. Un riel es la respuesta a una pantalla estrecha y a un dedo que arrastra; con ratón y 1 400 px de lienzo la respuesta es la reja, que además ya existe. Abajo, el escape a `display: contents` que el cruce mató: disuelve el riel y devuelve las tarjetas a la reja de su sección. */ @media (max-width: 900px) { /* Tres columnas y `align-items: center` para que las flechas se planten a media altura de la tarjeta sin un solo número mágico: la fila mide lo que mide la tarjeta más alta y ellas se centran solas. Los puntos ocupan su propia fila, así que no compiten por ese centro. Lo gobierna `/marca/riel.js`; sin él, se arrastra con el dedo. */ .riel { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; column-gap: 4px; /* El tope se le pone al RIEL, no a la pista: 420 de tarjeta más las dos flechas con su aire. Limitar la pista en su lugar obligaría a un padding calculado para centrar cada tarjeta, y ese padding deja la primera inalcanzable al arrastrar. Así la pista sigue midiendo exactamente lo que la tarjeta y el imán cae solo. En un teléfono no aplica: 390 px de pantalla nunca llegan a este techo. */ max-width: 496px; margin-inline: auto; } .riel .riel-pista { grid-column: 2; /* LO QUE HACE QUE UN RIEL SEA RIEL, y que al principio se quedó fuera de esta hoja: en la portada la pista ya era horizontal por su cuenta (`.principios` lo traía de portada.css), así que al extraer el sistema parecía completo y no lo estaba. En /auditoria la pista es otra —las seis dudas— y sin estas cuatro líneas se quedaron apiladas con las flechas apagadas a los lados. El sistema tiene que bastarse solo. */ display: grid; grid-auto-flow: column; grid-template-columns: none; /* Una sola fila: la pista de casos venía a dos filas y en el riel una tarjeta es una tarjeta. */ grid-template-rows: none; overflow-x: auto; overscroll-behavior-x: contain; grid-auto-columns: 100%; /* El riel tiene mandos: aquí el imán sí es obligatorio, porque una flecha que deja la tarjeta a medio camino se siente rota. */ scroll-snap-type: x mandatory; /* Sin sangre: las flechas ocupan justo el aire que la sangre se comía. */ margin-inline: 0; padding-inline: 0; padding-bottom: 0; scrollbar-width: none; } .riel .riel-pista::-webkit-scrollbar { display: none; } .riel .riel-pista > * { scroll-snap-align: center; } .riel-flecha { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: 50%; color: var(--texto); cursor: pointer; transition: opacity var(--transicion), border-color var(--transicion); } .riel-flecha svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* En el extremo la flecha se queda a la vista pero apagada: decir «ya no hay más por aquí» es información, y esconderla movería la tarjeta. */ .riel-flecha[disabled] { opacity: .28; cursor: default; } .riel-flecha:not([disabled]):active { border-color: var(--acento-fondo); } .riel-puntos { grid-column: 1 / -1; display: flex; justify-content: center; gap: 6px; margin: var(--e2) 0 0; padding: 0; list-style: none; } .riel-puntos li { width: 6px; height: 6px; border-radius: 99px; background: var(--borde); transition: width var(--transicion), background var(--transicion); } .riel-puntos li.es-aqui { width: 18px; background: var(--acento-fondo); } } /* EL ESCAPE. `display: contents` hace desaparecer la caja del riel sin tocar el marcado —que en su mayoría es GENERADO— y sus hijos pasan a ser hijos de la sección: la pista recupera la reja que su hoja le da y los mandos se apagan porque ya no hay nada que recorrer. */ @media (min-width: 900.02px) { .riel { display: contents; } .riel-flecha, .riel-puntos, .riel-cuenta { display: none; } /* LA REJA POR DEFECTO, con `:where()` y por tanto con especificidad CERO. Hay pistas que traen su propia composición en la hoja de su página —`.principios`, `.contactos`, `.preguntas`— y esas deben ganar sin pelear; pero las hay sin clase ninguna (las piezas y la galería de /gastronomia, los casos), y esas, sueltas, se apilaban a lo ancho: la galería medía 16 411 px de alto en un monitor. Una pista es una lista de piezas comparables; su forma natural en escritorio es la reja. */ :where(.riel-pista) { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--e4); align-items: start; } } /* (V2: aquí cerraba el @media del celular.) */ /* LA CESIÓN · mejora progresiva verificada (arquitectura §3): Chrome/Edge 115+, Safari 26; donde no, queda el apilado simple. Corre ENTERA en el compositor (scale + filter) y jamás con menos movimiento. El tramo arranca al 45 % de la salida: antes, el pin sigue trabajando y moverle el suelo se sentiría como perderlo. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .baraja { animation: baraja-cede linear both; animation-timeline: view(); animation-range: exit 45% exit 100%; transform-origin: 50% 15%; } /* EN LA BARAJA, LA CESIÓN SUSTITUYE A LA ENTRADA. Se intentó componer las dos animaciones en el mismo elemento (rangos por comas) y Chrome dejó la entrada clavada en 0: tarjetas invisibles y corridas 28 px — medido, no supuesto. Un solo lenguaje de movimiento por contexto: en las páginas de baraja la baraja ES el movimiento; la entrada de `aparece` sigue viva en las páginas sin baraja (blog, legales). La especificidad de dos clases le gana a `.aparece` de animacion.css, cargue donde cargue. */ .baraja.aparece { animation: baraja-cede linear both; animation-timeline: view(); animation-range: exit 45% exit 100%; } @keyframes baraja-cede { to { scale: .965; filter: brightness(.82) saturate(.92); } } } } /* ── EL IMÁN DEL TELÉFONO (2026-08-16, tercera y definitiva) ───────────── Las tarjetas llevaban `scroll-snap-align` desde V1, pero el único `scroll-snap-type` del sitio vivía en un @media de ESCRITORIO: en el iPhone el imán nunca existió. Se añadió, y las dos primeras versiones fallaron por lo mismo que aquí se prohíbe: UN SOLO DESPLAZAMIENTO. La parada de una tarjeta es `scroll-margin-top` (la barra más 6 px), que es lo mismo que la corrige para los enlaces con ancla. NO se pone además `scroll-padding-top` en el contenedor: los dos se SUMAN —el navegador alinea el área ampliada con el visor recortado— y la tarjeta asentaba 138 px bajo el borde, 77 por debajo de la cabecera. Medido con Chrome: era la queja del director de que «no se acopla a la parte superior». Si algún día una hoja de página vuelve a declarar `scroll-padding-top` en html, esto se rompe otra vez. (El imán suave que portada.css declaraba sobre html en escritorio murió en el cruce V2, por esta misma razón.) MANDATORY, no proximity: con proximity, soltar entre dos tarjetas dejaba la pantalla a medias, que era la otra queja. Y para que mandatory no encierre, TODO lo que se puede ver es parada: la primera pantalla de la página (el héroe) y el pie. Sin la del pie, al pasar la última tarjeta el imán devolvía y el final era inalcanzable —«se atora y rebota»—; sin la del héroe, Chrome salta a la primera tarjeta nada más cargar. El pie asienta por su BORDE INFERIOR con un margen que sobra, y el navegador recorta esa parada al final exacto del documento: así el último rebote de iOS cae en sitio, guarde la página el relleno que guarde. Y VUELVE A SER DEL TELÉFONO (2026-08-23). El cruce lo sacó a todos los anchos y en un monitor la rueda del ratón pasó a paginar tarjeta por tarjeta —`always`, un gesto por sección—, que es lo que un pulgar necesita y un ratón no: en escritorio se lee de corrido y vuelve a mandar el desplazamiento suave de `comun.css`. El imán es del pulgar. */ @media (max-width: 900px) and (prefers-reduced-motion: no-preference) { html { scroll-snap-type: y mandatory; scroll-padding-top: 0; } /* LAS ANCLAS VIAJAN INSTANTÁNEAS DONDE MANDA EL IMÁN (V2, medido): con `smooth`, un salto largo de la barra terminaba DEVUELTO al inicio — el imán re-imanta durante la animación y gana el origen. Instantáneo asienta exacto, con y sin `always`. Y es lo coherente: una app no planea entre pestañas, se coloca. Solo las páginas de baraja cargan esta hoja: el resto del sitio conserva su desplazamiento suave. */ html { scroll-behavior: auto; } /* La auditoría desplaza el BODY, no el documento; su hoja lo declara. */ body { scroll-snap-type: none; } /* Una tarjeta por gesto: el impulso no se salta ninguna. */ .baraja { scroll-snap-stop: always; } /* La primera pantalla: su parada es 0 EXACTO, sea tarjeta o no. Con el margen igual a la cabecera quedaba en 1 (la cabecera mide 61.1 con su filo, la barra 60.1) y Chrome imantaba ese píxel nada más cargar: un evento de scroll antes de pintar, y Lighthouse deja de buscar el LCP en el primer scroll — PageSpeed devolvía NO_LCP y nota 0 en tres de cinco páginas (2026-08-16, medido en el dominio). El margen sobra a propósito y la parada se recorta a 0, igual que la del pie al final. `main > :first-child` a secas desde que la portada metió su héroe DENTRO de la baraja (2026-08-17): antes decía `:not(.baraja)` y al volverse tarjeta habría heredado la parada de las demás —bajo la cabecera— y el scroll ya no nacería quieto. */ main > :first-child { scroll-snap-align: start; scroll-margin-top: 100svh; } /* El pie es la última carta: asienta por su INICIO bajo la cabecera, como una tarjeta (comun.css lo hace medir esa pantalla). El margen inferior sobra a propósito: extiende su área hasta más allá del final para que, si un día no cabe, cualquier posición hasta el final del documento sea válida y el último rebote de iOS caiga en sitio. */ .pie-sitio { scroll-snap-align: start; scroll-margin-top: var(--alto-barra); scroll-margin-bottom: 100vh; } } /* Las tarjetas del riel no se estiran a la más alta: cada una mide su contenido. Con una sola foto vertical en la pista, las otras dieciséis arrastraban medio metro de vacío debajo — visto en el iPhone real. */ @media (max-width: 900px) { .riel .riel-pista { align-items: start; } } /* ═══ RECALIBRACIÓN A LA PANTALLA REAL (2026-08-16) ═══════════════════════ * * Todo lo anterior se calculó sobre 844 px planos. Un iPhone con Safari deja * 650–740 útiles, y de ahí venían las dos quejas del director: tarjetas a * medias y espacios muertos. Este bloque cambia la regla del juego en móvil: * * · EL CUERPO ES 16. Dentro de las tarjetas los párrafos bajaban a * `--t-pie` (13.6 px) —principios, pasos, cifras, pies de foto—. Ahora * todo cuerpo de lectura mide `--t-base`; el pie se reserva para lo que * de verdad es pie: rótulos y notas. * · LOS AIRES CRECEN para llenar, no encogen para caber. Una tarjeta con * poco texto respira; una con mucho desfila bajo su pin. Nunca vacío. * · EL IMÁN ES FIRME: `y mandatory` con el pin al margen. Se sale del * riesgo de «no poder leer por el medio» porque las tarjetas largas * llevan `scroll-snap-stop: normal` y el navegador deja pasar. */ @media (max-width: 900px) { /* Cuerpo 16 en toda tarjeta: párrafos, listas, pies de figura. */ .baraja p, .baraja li, .baraja dd, .baraja figcaption, .baraja .principio p, .baraja .paso p, .baraja .idc-caja p, .baraja .idc-caja li, .baraja .idc-paso-d p { font-size: var(--t-base); line-height: 1.55; } /* Lo que sí es pie sigue siéndolo. */ .baraja .antetitulo, .baraja .riel-cuenta, .baraja .pie-cierre, .baraja .bahia-cuenta, .baraja .cifras span { font-size: var(--t-pie); } /* Los titulares de tarjeta suben un escalón: en 402 px de ancho un H2 de 1.35rem se ve pequeño para lo que manda. */ .baraja > header h2, .baraja > header .titular-grande { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.25rem); } /* La entradilla también es cuerpo 16 dentro de la tarjeta. La regla iba con dos clases y portada.css (`.seccion > header .entradilla`, cargada después) la dejaba en 18.8: cinco y seis renglones de entradilla por tarjeta, y en 06 no cabían la tarjeta demo y sus dos accesos por encima de la barra. Con tres clases gana; en escritorio no aplica. */ .baraja > header .entradilla, .baraja.seccion > header .entradilla { font-size: var(--t-base); line-height: 1.5; max-width: none; } /* Aire entre bloques dentro de la tarjeta. Crecía con la pantalla (clamp hasta 28 px) cuando la tarjeta tenía 683 útiles; con la zona de la barra descontada quedan 615, y ese aire era justo lo que sobraba en 08 y 09. Fijo y corto: el que reparte es `.reparte`, no el margen. */ .baraja > header { margin-bottom: 12px; } .baraja > header + * { margin-top: 12px; } /* (El solape: enterrado en la regla base desde V2.) */ } /* LA ZONA DE LA BARRA (V2: en toda pantalla). La tarjeta mide la pantalla menos la cabecera, así que sus últimos ~68 px quedan bajo la barra de secciones. Con `.reparte` el remate se iba justo ahí: el director vio «Qué será el portal» y los dos botones debajo del menú. La tarjeta reserva la zona como relleno inferior — 62 de barra (10 de suelo + 52 de pastilla) más un aire. Solo en las páginas que llevan barra. */ body:has(.barra-secciones) .baraja { padding-bottom: calc(var(--e3) + 62px + env(safe-area-inset-bottom)); } /* ── El aire, repartido (2026-08-16) ────────────────────────────────────── Cuando una tarjeta tiene menos contenido que pantalla, el sobrante NO se queda todo debajo: la tarjeta es flex-columna y su cuerpo se reparte con `justify-content: space-evenly` cuando lleva la clase `.reparte`. El pin sigue arriba porque es sticky y flex:none. Es la técnica del cierre de gastronomía —donde el aire era composición— hecha regla. */ /* (V2: era del celular; el aire sobrante existe igual en un monitor.) */ .baraja.reparte { display: flex; flex-direction: column; } .baraja.reparte > .baraja-pin { flex: none; } .baraja.reparte > *:not(.baraja-pin) { flex: none; } .baraja.reparte > header { flex: none; } /* SIN un `::after` que crezca. Lo hubo (`flex: 1 1 0`) y era el que mataba el reparto: en flexbox el espacio libre va primero a los que crecen y solo lo que sobra a los márgenes automáticos — que recibían cero. Medido en la landing: el ::after se llevaba 137 px y las dudas se quedaban arriba con el hueco abajo. Los márgenes automáticos son el reparto entero: el pin fijo arriba, el encabezado con sus aires, y el resto separado a partes iguales, con la misma parte al final. */ .baraja.reparte > .baraja-pin ~ *:not(header) { margin-top: auto; margin-bottom: auto; } /* ── EL CRISTAL (2026-08-16) ────────────────────────────────────────────── Pedido del director: que la tarjeta deje ver el cielo de estrellas detrás. La primera versión mezclaba al 72 % y DESENFOCABA 18 px, y el director la vio opaca: las estrellas miden uno o dos píxeles de radio, y un desenfoque de dieciocho las convierte en nada. El cristal es solo TINTE: la superficie al 55 % y ni un píxel de desenfoque, que además es GPU pura en una tarjeta de pantalla entera. Lo que va DENTRO —pasos, principios, casos, la tarjeta demo— conserva su superficie opaca: son los niveles de lectura, y el director los quiere así. El pin sí desenfoca: es una franja de 44 px con el cuerpo pasando por debajo, y ahí el desenfoque hace trabajo (funde el texto que cruza) en vez de comerse el cielo. */ /* (V2: el cristal cruza también — el cielo existe en todos los anchos y la tarjeta lo deja ver igual.) */ .baraja { background: color-mix(in srgb, var(--superficie) 55%, transparent); border-color: color-mix(in srgb, var(--borde) 70%, transparent); } /* Al 86 % con 8 px el texto que cruzaba por debajo se leía como fantasma en la franja alta del pin, y al 93 % con 12 todavía (visto en el simulador con una bahía abierta: el texto claro sobre superficie oscura asoma con un 7 %). Al 97 % con 14 px ya no queda nada legible; el cristal de verdad es el de la tarjeta, no el del pin. */ .baraja-pin { background: color-mix(in srgb, var(--superficie) 97%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } @media (prefers-reduced-motion: reduce) { .baraja-pin { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--superficie); } } /* ═══ V2.1 · LA VIDA DE CADA TARJETA (2026-08-19) ═════════════════════════ * Pedido del director al cruzar la baraja: «dale vida a cada sección según * el modo oscuro o claro». Un aliento del verde de la casa DENTRO del * cristal: un radial leve que respira despacio. En oscuro es luz —más * presente—; en claro es tinte, apenas. La posición cambia por tarjeta en * tres compases, para que la baraja no repita el mismo cuadro. * * El COLOR no cambia por sección, y es a propósito: el manual manda un solo * acento, y los seis colores de área ya tienen su casa en /servicios. Los * niveles de lectura quedan intactos: lo de dentro (pasos, casos, la * tarjeta demo) conserva su superficie opaca, como decidió el director en * el cristal. * * `isolation` es lo que permite el z-index −1: sin él, el aliento se * hundiría bajo el fondo de la tarjeta y no se vería nunca — la misma * trampa de apilamiento que el cielo del body documenta arriba en * comun.css. */ .baraja { isolation: isolate; } .baraja::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient( 52% 38% at var(--vida-x, 80%) var(--vida-y, 10%), color-mix(in srgb, var(--acento-fondo) var(--vida-fuerza, 6%), transparent), transparent 72%); } main > .baraja:nth-of-type(3n)::after { --vida-x: 16%; --vida-y: 78%; } main > .baraja:nth-of-type(3n+2)::after { --vida-x: 22%; --vida-y: 14%; } /* La fuerza según el tema, con el par de reglas de la casa (tema elegido manda; sin elección, decide el sistema). */ :root[data-tema="oscuro"] { --vida-fuerza: 11%; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --vida-fuerza: 11%; } } /* Respira en veinte segundos — vida, no parpadeo — y solo para quien acepta movimiento. Es opacity puro: compositor, cero maquetación. */ @media (prefers-reduced-motion: no-preference) { .baraja::after { animation: vida-late 20s ease-in-out infinite; } @keyframes vida-late { 50% { opacity: .45; } } } /* ═══════════════════════════════════════════════════════════════════════════ LA TRAVESÍA · el escritorio deja de ser una página y pasa a ser una ruta (2026-08-23, pedido del director: «cada tarjeta debe ser una publicación, un protagonista; que tome la pantalla completa y se ajuste como si enfocara esa sección; una página 360 como si navegáramos en el espacio y cada sección fuera una vista») SOLO ESCRITORIO. Nada de este bloque cruza los 900 px: el teléfono ya tiene su baraja, su imán firme y su menú de pulgar, y ahí no se toca una línea. ─── POR QUÉ ESTO NO ES LO QUE LA AUDITORÍA CONDENÓ ─────────────────────── El 23 se midió que las tarjetas a `100svh` en un monitor daban secciones de 816 a 1 695 px con tres líneas dentro, y que el imán `mandatory` con `stop: always` convertía la rueda en un paginador. Las dos cosas eran verdad y las dos se arreglaron. Lo que vuelve aquí NO es aquello: · Entonces la vista estaba vacía porque el contenido seguía compuesto para un teléfono —una columna contra el margen izquierdo—. Ahora cada sección tiene composición de escritorio (rejas, dos columnas, el manifiesto abierto), así que la pantalla se LLENA en vez de sobrar. · Entonces el imán era `mandatory` + `always`: el navegador OBLIGA a asentar y una sección más alta que la pantalla queda inalcanzable por el medio — el problema documentado del scroll-snap. Aquí es `proximity` + `normal`: el navegador SUGIERE. Si sueltas cerca de una vista, asienta; si sueltas leyendo, te deja. · Y ninguna de las dos cosas es «scrolljacking»: no se toca la posición del scroll con JavaScript. Se le entrega al navegador una lista de paradas y él usa su física, su rueda y su teclado. Lo que NN/g mide y condena es lo otro —cambiar la velocidad o el sentido del scroll—, y aquí no pasa: la rueda hace lo que hace en cualquier página. ─── LO QUE SÍ SE CONSTRUYE ─────────────────────────────────────────────── 1 · Cada sección reclama la pantalla (`min-height`, no `height`): la que tiene más contenido crece y se lee de corrido, y su parada sigue siendo su inicio. 2 · El cuerpo se centra en la vista. Sin esto, una sección corta se pega arriba y deja el hueco abajo, que es exactamente la queja de origen. 3 · La vista LLEGA desde el fondo: un acercamiento de opacidad y escala atado al scroll (compositor puro, nada de maquetación). Es la profundidad que el cielo ya insinúa con sus dos capas. ═════════════════════════════════════════════════════════════════════════ */ @media (min-width: 900.02px) { main > .baraja { /* La pantalla menos la cabecera: la vista es lo que queda de mundo. */ min-height: calc(100svh - var(--alto-barra)); /* EL PIN ARRIBA Y EL CUERPO LLENANDO LO QUE QUEDA. Aquí hubo un `align-content: center` y estuvo MAL: centra el bloque entero, o sea también el pin, y en las vistas cortas el rótulo «07_CLIENTES» aparecía a media pantalla con medio lienzo vacío encima —lo cazó el director en dos capturas—. Un rótulo de sección va arriba; lo que se reparte es el cuerpo. La columna flexible con márgenes automáticos es la técnica que esta hoja ya usa en `.reparte`; aquí vale para TODA vista de escritorio. Las dos secciones que se componen en reja (06 y 07) llevan su `display` con especificidad de id y no entran por aquí: cada una coloca su pin. */ display: flex; flex-direction: column; } main > .baraja > .baraja-pin { flex: none; position: sticky; } main > .baraja > header { flex: none; } /* El cuerpo —todo lo que va tras el pin y no es el encabezado— se centra en el aire sobrante. Si no sobra, no pasa nada: los márgenes automáticos valen cero y la vista crece. */ main > .baraja > .baraja-pin ~ *:not(header) { margin-block: auto; } /* ── EL PIN ES EL RÓTULO DE LA VISTA, Y SE LEE COMO TAL ── Pedido del director: «la línea 11_CONVERSEMOS debe quedar arriba con letra 50 % más grande; eso ayuda a saber que es un subtítulo de sección». Tiene razón y el porqué es de jerarquía: en el teléfono el pin compite con un titular que ocupa la pantalla, así que susurra; en un monitor, con la vista entera delante, un rótulo de 14 px no se lee como nivel sino como nota al pie. A 21 px es el primer escalón de lectura. */ main > .baraja > .baraja-pin { font-size: calc(var(--t-micro) * 1.5); min-height: 54px; } /* La zona de la barra inferior no existe aquí: la carta de navegación va al costado (comun.css). Sin esto la vista arrastraría 62 px de relleno fantasma y el centrado saldría alto. */ body:has(.barra-secciones) main > .baraja { padding-bottom: var(--e6); } /* ── EL VIAJE DE CADA VISTA: LLEGA Y CEDE ── Dos tramos del mismo trayecto, en UNA sola declaración con rangos por comas: la vista se acerca desde el fondo al entrar (`entry`) y se retira al salir (`exit`). Todo atado al scroll —no se dispara y ya: retrocede si retrocedes— y todo en escala, opacidad y filtro, que es lo que el navegador resuelve en el compositor. ESTO ESTUVO PROHIBIDO EN ESTA HOJA Y HOY YA NO. El 2026-08-16 se anotó que componer las dos con rangos por comas dejaba la entrada clavada en 0 —tarjetas invisibles— y por eso en el celular la cesión SUSTITUYE a la entrada. Se volvió a medir el 2026-08-23 en el Chrome de hoy, con cinco vistas y el scroll a 1 600: la primera cediendo, la segunda a medio ceder, la tercera entera, las dos siguientes esperando. Funciona. Queda escrito por si un día vuelve a fallar: el síntoma sería una vista que se queda en su estado de partida sin llegar nunca. Y POR ESO EL ESTADO DE PARTIDA ES BENIGNO: 0.65 de opacidad y 0.94 de escala. Si esa avería volviera, la vista se leería igual —velada, no invisible—. Un estado de partida en 0 es una página en blanco esperando a que un navegador se porte bien. LA ESPECIFICIDAD NO ES CASUAL: `main > .baraja.aparece` (0,2,1) tiene que ganarle a `.baraja.aparece` (0,2,0) del bloque de la cesión del teléfono, que si no se lleva la declaración entera y aquí no llega ninguna entrada. Se vio midiendo: solo la sección sin `.aparece` se animaba. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { main > .baraja, main > .baraja.aparece { animation: vista-llega linear both, vista-cede linear both; animation-timeline: view(), view(); animation-range: entry 10% entry 70%, exit 45% exit 100%; } @keyframes vista-llega { from { opacity: .65; scale: .94; } to { opacity: 1; scale: 1; } } @keyframes vista-cede { to { scale: .965; filter: brightness(.82) saturate(.92); } } } } /* ── EL IMÁN SUAVE ── `proximity`, y la diferencia con `mandatory` es la que decide si esto es una travesía o una jaula: con proximity el navegador solo asienta si ya soltaste cerca. Una vista más alta que la pantalla —los doce casos, el manifiesto— se lee entera sin pelear. Y `scroll-snap-stop: normal` (el valor de fábrica) para que un golpe de rueda largo pueda cruzar dos vistas: en un monitor, obligar a una por gesto es el paginador que el director no quiere. */ @media (prefers-reduced-motion: no-preference) { html { scroll-snap-type: y proximity; scroll-padding-top: 0; } main > .baraja { scroll-snap-align: start; scroll-snap-stop: normal; } /* La primera vista y el pie, como en el teléfono: paradas con margen que sobra, para que el navegador las recorte al borde exacto del documento y el viaje tenga principio y final. */ main > :first-child { scroll-snap-align: start; scroll-margin-top: 100svh; } .pie-sitio { scroll-snap-align: start; scroll-margin-top: var(--alto-barra); scroll-margin-bottom: 100vh; } } }