/* ============================================================================ ReconoCer IPS — Sistema de diseño v2 Ancla visual: su propio local. Vidrio, madera clara, techo industrial negro y un letrero iluminado en cian y magenta. El degradado del logo ES ese letrero: aquí es el recurso gráfico de toda la web. ========================================================================== */ :root { /* Marca */ --azul: #19255a; --azul-900: #0b1023; --azul-700: #243359; --cian: #009fe3; /* Enlaces y acentos de texto. Sobre oscuro es el celeste del manual sin tocar: da 6,1:1 y no hace falta aclararlo. Se redefine en el tema claro, donde el mismo color no llega. */ --cian-claro: var(--cian); --magenta: #e6007e; /* El letrero: degradado propio de la marca */ --letrero: linear-gradient(100deg, var(--cian) 0%, #6b57c4 52%, var(--magenta) 100%); /* El mismo letrero, pero para TEXTO recortado y para filos finos. Existe aparte porque un FONDO puede llevar el cian de marca y una LETRA no: sobre el tema claro #009fe3 da 2,79:1 y el arranque del titular se lava. Se redefine en el bloque del tema claro. Sobre oscuro NO son las mismas paradas que el letrero de fondo, y es a propósito. Medido en luminancia, el letrero original va 0,303 → 0,139 → 0,183: arranca brillante, se HUNDE en el violeta y termina apagado, así que el ojo se queda solo con el azul. Aquí el recorrido va 0,303 → 0,215 → 0,293, parejo de punta a punta, y el violeta se adelanta al 44% para que el magenta tenga sitio de verdad. */ --letrero-texto: linear-gradient(100deg, var(--cian) 0%, #8a6ce0 44%, #ff4da6 100%); /* Palabras resaltadas DENTRO de un párrafo. Son los DOS colores del manual sin retocar: celeste #009fe3 y magenta #e6007e. Que puedan ser los del manual depende de `.resalte`, que va en 700. El magenta puro como texto normal da 4,33:1 sobre oscuro y se queda a un pelo del 4,5:1 que exige el texto de párrafo; en negrita a 18,7 px la entradilla ya cuenta como texto grande (WCAG: ≥18,66 px en 700) y el listón baja a 3:1, que cumple de sobra. El peso no es maquillaje para pasar la medida: era necesario igual, porque en regular el celeste se leía como un ENLACE en vez de como una palabra resaltada. */ --resalte-cian: var(--cian); --resalte-magenta: var(--magenta); /* Magenta para ENLACES. Existe aparte de --magenta por la misma razón que --cian-claro existe aparte de --cian: el color del manual no cumple como texto pequeño. #e6007e sobre el vidrio de una tarjeta da 3,77:1 y los enlaces van a 14 px, así que el listón son 4,5. Este aclarado da 6,4:1, y no es inventado: es el mismo #ff4da6 con el que cierra el letrero escrito del titular. Se redefine en el tema claro. */ --enlace-magenta: #ff4da6; /* Fondo. El sitio entero vive sobre este pozo; la luz la pone body::before */ --fondo: #070c1a; /* Superficies de vidrio. No son colores planos: dejan pasar el degradado. Por eso todo el sitio se lee como UNA superficie con luz encima. */ --superficie: rgba(255, 255, 255, .045); --superficie-2: rgba(255, 255, 255, .075); --velo: rgba(255, 255, 255, .022); --borde: rgba(255, 255, 255, .10); --borde-fuerte: rgba(255, 255, 255, .20); /* Capas translúcidas: realces y filos. Cambian de signo con el tema. */ --capa-1: rgba(255, 255, 255, .07); --capa-2: rgba(255, 255, 255, .14); --nav-vidrio: rgba(11, 16, 35, .72); --nav-vidrio-fijo: rgba(11, 16, 35, .90); --nav-sombra: 0 18px 46px rgba(11, 16, 35, .30); --pie-fondo: rgba(3, 6, 16, .38); /* Texto sobre oscuro. --tinta ya no es tinta: es el blanco de titular. */ --tinta: #ffffff; --texto: #dde4f4; --suave: #aeb9d6; --sobre-azul: #c6d0e8; --fuente: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Escala. Techo 88px: por debajo del limite de impeccable (96px) */ /* --- Los titulares, en escala áurea ----------------------------------- La razón es √φ = 1,272 (la raíz de la áurea), no φ = 1,618. No es una rebaja: con φ entera, tres niveles seguidos van 1 : 1,618 : 2,618, y para que el h1 creciera el h2 tendría que ENCOGER por debajo de lo que ya tiene. √φ da una escalera de peldaños iguales donde los tres crecen. La escalera completa, desde el cuerpo de texto (17 px), multiplicando por 1,272 cada vez: 17 · 21,6 · 27,5 · 35 · 44,5 · 56 · 72 · 92 ↑ ↑ ↑ ↑ ↑ ↑ cuerpo lead h3 h2 h1 display Los tres titulares principales son ahora **peldaños consecutivos** —56, 72, 92—, que es lo que hace que la jerarquía se lea sin pensarla. Antes iban 50 · 60 · 88: entre h2 y h1 había un 1,2 (demasiado poco, se confundían) y entre h1 y display un 1,47 (demasiado, se rompía). El h3 NO sube: titula tarjetas («Carro o moto», el nombre de una sede) y al tamaño de un titular de sección dejaría de leerse como lo que es. Se queda en su peldaño de 27,5. Los mínimos suben menos que los máximos, y a propósito: en 320 px un titular de cinco palabras a 44 px ocupa cinco renglones. Medido en las 16 páginas a 320, 360 y 390 antes de darlo por bueno. */ --t-display: clamp(3.125rem, 6.97vw, 5.75rem); --t-h1: clamp(2.5rem, 5.45vw, 4.5rem); --t-h2: clamp(2.1875rem, 4.24vw, 3.5rem); --t-h3: clamp(1.375rem, 1.9vw, 1.75rem); --t-lead: clamp(1.0625rem, 1.3vw, 1.3125rem); /* Entradilla de titular GRANDE. Existe porque la escala tenía un agujero: la entradilla normal se calculó contra titulares de 50 px, y bajo uno de 60 la razón se iba a 3,2 y el texto se leía como un pie de foto. Un escalón por encima de --t-lead y por debajo de --t-h3, que ya es tamaño de titular. 🔴 SUBE CON LOS TITULARES, y no es opcional. Al pasar el h1 de 60 a 72 px, una entradilla de 23 dejaba la razón en 3,13 — otra vez dentro de la zona donde se lee como un pie de foto, que es justo el problema que este token vino a resolver. A 25,6 px la razón queda en 2,81. Agrandar un titular sin mirar lo que va debajo deshace el arreglo anterior. */ --t-lead-mayor: clamp(1.25rem, 1.95vw, 1.6rem); --t-cuerpo: 1.0625rem; --t-menor: 0.9375rem; --t-mini: 0.8125rem; --seccion: clamp(4.5rem, 9vw, 8rem); /* El aire entre una cabecera de sección y lo que encabeza. Es un TOKEN y no un valor suelto porque lo necesitan dos reglas (ver la nota de `.cabeza-seccion + *`), y dos copias de un clamp se separan solas. */ --aire-cabeza: clamp(2.75rem, 5vw, 4.5rem); --seccion-corta: clamp(3.5rem, 7vw, 6rem); --ancho: 1240px; --ancho-prosa: 720px; --canal: clamp(1.25rem, 5vw, 3rem); --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-xl: 34px; /* Sobre oscuro una sombra no se ve: la elevación se hace con luz, no con sombra */ --sombra-media: 0 24px 60px rgba(0, 0, 0, .45); --sombra-alta: 0 40px 110px rgba(0, 0, 0, .6); --brillo-cian: 0 20px 60px rgba(0, 159, 227, .22); /* El filo y el halo de «esto esta senalado». Existen aparte del cian porque el cian ya significa «esto se puede pulsar»: si los dos son iguales, la sede que salio mas cerca se ve igual que la tarjeta sobre la que esta el raton. El filo va a media tinta y no a magenta pleno: a 1 px y a plena saturacion el borde compite con la pildora y con la linea de la distancia, que son las que llevan el dato. Marcar no es gritar. La opacidad cambia por tema porque el mismo rgba sobre un fondo casi negro y sobre uno casi blanco no da el mismo peso visual. */ --filo-cercana: rgba(230, 0, 126, .62); --brillo-magenta: 0 20px 60px rgba(230, 0, 126, .18); /* === VOCABULARIO DE MOVIMIENTO ======================================= Medido en apple.com/iphone antes de escribir esto: 471 curvas, 82 duraciones distintas y 34 bloques de reduced-motion. Ni vídeo, ni canvas, ni scroll-driven CSS: transiciones normales con un vocabulario enorme. Aquí había 5 curvas sueltas por el archivo y ninguna decía para qué era. Una curva por TIPO DE GESTO, no por elemento: entra lo que llega a la pantalla. Frena al final, como algo que se posa. Es la de siempre (`--sal`), ahora con nombre. sale lo que se va. Arranca despacio y acelera al irse: al ojo no le interesa el final de algo que desaparece. toque la respuesta al cursor o al dedo. Corta y casi lineal al principio: si tarda, se siente floja. despliega lo que se abre en su sitio (un panel, una respuesta). empuje se PASA del destino y vuelve. Es el acento: solo donde algo tiene que sentir peso. Nunca en varios sitios a la vez. 🔴 Las tres primeras y `despliega` son monótonas (van de 0 a 1 sin volverse). `empuje` NO: su cuarto valor pasa de 1, así que sobrepasa. No usarla en nada que mida distancia real o el usuario percibe un rebote donde no lo hay. */ --mov-entra: cubic-bezier(.23, 1, .32, 1); --mov-toque: cubic-bezier(.33, 0, .2, 1); --mov-despliega: cubic-bezier(.32, .72, 0, 1); --mov-empuje: cubic-bezier(.34, 1.32, .64, 1); --t-toque: 220ms; --t-entra: 620ms; --t-despliega: 420ms; /* `--sal` y `--mov` son los nombres viejos y siguen vivos porque los usan 28 transiciones. `--sal` ES `--mov-entra`: se apunta al token nuevo para que haya UNA sola definición y no dos que se puedan separar con el tiempo. */ --sal: var(--mov-entra); --z-barra: 90; /* barra de acción del móvil: por debajo de la cabecera */ --z-sticky: 100; /* 🔴 No hay `--z-sheet`. Lo hubo, en 200, y no lo usaba nadie: la hoja del menú vive DENTRO del contexto de apilamiento de `.nav`, así que su z es local (1, por debajo de la píldora, que va en 2) y el peldaño global sobraba. Un peldaño con nombre y sin nadie encima engaña al que lo lee. */ --z-sheet-sobre: 210; /* la cabecera cuando la hoja está abierta */ --z-skip: 300; } /* === La maqueta dejaba de crecer a 1440 ================================== Todas las medidas son clamp() con tope, y ese tope se alcanzaba a 1440 px. De ahí en adelante la página no movía UNA SOLA medida. Medido en el canal: ventana envoltura % de pantalla usado 1280 1240 97% 1440 1240 86% 1920 1240 65% 2560 1240 48% 3840 1240 32% <- esto es quitar zoom al 50% El cuerpo se quedaba en 17 px y el display en 92 px en las cinco. Por qué el zoom lo destapa: alejar el zoom NO encoge la página, agranda el viewport en píxeles CSS. Quitar zoom al 50% en un monitor de 1920 es exactamente lo mismo que abrirla en uno de 3840, y la maqueta lo trataba como si no hubiera pasado nada: la misma columna de 1240 en medio de un desierto. El arreglo es REANUDAR el crecimiento a partir de 1440, no rehacer la escala. Por debajo de 1441 no se mueve ni un píxel, así que todo lo medido hasta hoy —móvil 320-560, portátil 1000-1366, contrastes, desbordes— sigue valiendo sin volver a medirlo. La forma `px + vw` y no `vw` a secas: cada valor tiene que arrancar EXACTAMENTE donde estaba a 1440 y llegar a su nuevo tope a 2200. Con solo `vw` el suelo del clamp aguantaría hasta cruzarse con la recta y ahí habría un escalón visible. Los titulares crecen MENOS que el texto corrido (+4% contra +12%). No es descuido: es cómo funciona una escala tipográfica. Lo que ya es grande se lee de sobra; lo que se pierde al alejarse es lo pequeño. Y el display se planta en 6rem (96 px) porque por encima de ahí un titular deja de diseñar y se pone a gritar. Las CAJAS de texto crecen con la letra, no se quedan en rem: si no, la columna encoge en caracteres por renglón justo cuando la pantalla crece. Detalle y trampa de especificidad, dentro del bloque. ======================================================================== */ @media (min-width: 1441px) { :root { --ancho: clamp(1240px, 557.9px + 47.37vw, 1600px); --canal: clamp(3rem, 17.7px + 2.11vw, 4rem); --t-display: clamp(5.75rem, 84.4px + 0.53vw, 6rem); --t-h1: clamp(4.5rem, 66.3px + 0.40vw, 4.6875rem); --t-h2: clamp(3.5rem, 51.5px + 0.32vw, 3.65rem); --t-h3: clamp(1.71rem, 22.4px + 0.347vw, 1.875rem); --t-lead: clamp(1.17rem, 10.6px + 0.563vw, 1.4375rem); --t-lead-mayor: clamp(1.6rem, 21.1px + 0.32vw, 1.75rem); --t-cuerpo: clamp(1.0625rem, 13.2px + 0.26vw, 1.1875rem); --t-menor: clamp(0.9375rem, 12.2px + 0.20vw, 1.03125rem); --t-mini: clamp(0.8125rem, 11.1px + 0.13vw, 0.875rem); /* 🔴 --t-h3 y --t-lead arrancan en 1,71rem y 1,17rem, NO en su tope. Sus clamps de abajo son 1.9vw y 1.3vw: no llegan al tope a 1440 sino a 1474 y 1615. Poner aquí el tope como suelo metía un SALTO justo al cruzar 1441 —la entradilla brincaba de 18,7 a 21 px de golpe, un 12%—. El suelo de cada token tiene que ser lo que VALE a 1440, no su máximo teórico. Medido con `ancho-fluido.js`, que barre 1430-1460. */ /* La caja de prosa crece con la letra, no se queda en 720px: ver abajo. */ --ancho-prosa: 42.35em; } /* --- Las CAJAS de texto crecen con la LETRA --------------------------- Si la letra crece y su caja se queda en rem, la caja encoge en la unidad que de verdad importa —caracteres por renglón— y el texto cabe PEOR en una pantalla MÁS grande. Medido a 2560 antes de esto: nueve bloques ganaban renglón, y la entradilla de «Tres sedes en Bogotá» pasaba de dos renglones a tres, desmintiendo lo que dice su propio comentario. Van en `em` y no en píxeles calculados: `em` se mide contra la letra del propio bloque, así que la medida en caracteres se queda clavada sola, a cualquier tamaño y sin cuentas. Y por debajo de 1441 dan EXACTAMENTE lo que había —42,35em x 17px = 720px; 25em x 25,6px = 640px— porque ahí la letra no se mueve. 🔴 El `:root` delante no es adorno. Estas reglas viven junto a los tokens y las que tienen que pisar están 600 líneas más abajo con el mismo peso (0,1,0). A igual peso gana la última del archivo, y una media query NO suma especificidad. Sin el `:root` esto se escribe, se despliega y no hace absolutamente nada. Pasó dos veces seguidas en este bloque. */ :root .cabeza-seccion { max-width: 45.18em; } /* eran 48rem */ :root .faq { max-width: 45.18em; } /* eran 48rem */ :root .sedes-cabeza { max-width: 54.59em; } /* eran 58rem */ :root .cabeza-seccion .lead, :root .sedes-cabeza > p { max-width: 25em; } /* eran 40rem */ /* La home redefine --t-h1 y --t-h2 SOBRE EL BODY (para agrandar el titular en el teléfono). Una propiedad puesta en `body` gana a la misma puesta en `:root` para todo lo que cuelga del body, así que sin repetirlas aquí la home sería la única página que NO crece: medido, su h1 se quedaba clavado en 72 px hasta 3840. Mismo `:root` por el mismo motivo de arriba. */ :root body[data-pagina="home"] { --t-h1: clamp(4.5rem, 66.3px + 0.40vw, 4.6875rem); --t-h2: var(--t-h1); /* mismo peldano: ver la nota de arriba */ } } /* --- Reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* 🔴 Sin rebote en los extremos de la página (15-09-2026). En Safari de Mac, al arrastrar hacia arriba estando ya arriba del todo, la página hace el rebote elástico y la píldora de navegación se veía CORTADA durante un instante. La píldora es vidrio (`backdrop-filter`) y va fija: mientras dura el rebote, el trozo de pantalla que tiene detrás queda FUERA del documento, WebKit no tiene nada que desenfocar ahí y ese trozo sale vacío. Justo arriba del todo, además, la píldora está en su versión más transparente (`--nav-vidrio`, antes del cambio a `-fijo` a los 12 px), así que es cuando más se nota. Chrome no rebota en escritorio: aquí no se ve. Se quita la causa, no el vidrio: sin rebote no hay hueco fuera del documento. Safari lo respeta desde la versión 16. Va en `html`, que es quien hace scroll, y en `body` por si alguna versión de WebKit mira ahí. No toca la inercia del dedo dentro de la página —el deslizamiento suave que se arregló el 14-09— porque sólo actúa cuando el scroll ya llegó al tope. 🔴 NO arreglarlo poniendo `background` en `html`. Parece lo obvio (pintar el hueco del rebote del color de la página) y rompe el campo de luz: con fondo propio en `html`, el de `body` deja de pasar al lienzo y se pinta sobre su propia caja, que va POR ENCIMA de `body::before` (z-index -2). El degradado de fondo de todo el sitio desaparecería. */ html, body { overscroll-behavior-y: none; } /* 🔴 NO poner `scroll-behavior: smooth` aquí. Es incompatible con ScrollTrigger: para medir posiciones, ScrollTrigger vuelve a cero, mide y restaura el scroll, y con el desplazamiento suave ese salto NO es inmediato, así que mide contra la posición equivocada. Medido: tras un refresco estando a 1400 px de scroll, el disparador del héroe pasaba de `start 141 / end 830` a `start -1320 / end -590` —desplazado justo el scroll que había— y la foto de los gemelos se quedaba invisible para siempre. Se disparaba al cambiar de tema (que refresca) y también al REDIMENSIONAR la ventana, que refresca sola. Lo notó el usuario en su teléfono. El sitio tiene un único ancla interna, el enlace de saltar al contenido, que además debe saltar al instante: en un salto de accesibilidad el desplazamiento suave estorba. */ body { position: relative; margin: 0; font-family: var(--fuente); font-size: var(--t-cuerpo); line-height: 1.65; color: var(--texto); background: var(--fondo); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* 🔴 `hidden` NO basta en iOS. Recorta lo que se sale, así que en Chrome la página parece correcta, pero Safari en iPhone sigue dejando ARRASTRAR el documento entero con el dedo: la barra fija se queda quieta y todo lo demás se corre y se corta por la derecha. Con un solo píxel de sobra ya pasa. Se vio en un iPhone de verdad; ninguna medición en Chrome lo detectaba. `clip` sí lo impide, y además —a diferencia de `hidden`— no convierte al body en un contenedor de scroll, así que no rompe `position: sticky`. Se dejan los dos: el navegador que no entienda `clip` se queda con `hidden`, que es lo que había. */ overflow-x: hidden; overflow-x: clip; } /* El campo de luz. Fijo al viewport: el contenido pasa por delante y el degradado se mantiene, que es lo que hace que la página se lea continua. z-index negativo => pinta por debajo del contenido en flujo sin envolverlo. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(78% 52% at 50% -4%, rgba(38, 54, 116, .95) 0%, transparent 64%), radial-gradient(52% 38% at 90% 20%, rgba(0, 159, 227, .17) 0%, transparent 62%), radial-gradient(58% 44% at 4% 56%, rgba(107, 87, 196, .17) 0%, transparent 64%), radial-gradient(66% 48% at 82% 88%, rgba(230, 0, 126, .13) 0%, transparent 62%); } /* Grano global. Le quita el plástico al degradado y evita el banding en pantallas de 8 bits, que sobre azules grandes se nota mucho. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .42; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.35'/%3E%3C/svg%3E"); } [hidden] { display: none !important; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd, fieldset { margin: 0; } ul, ol { padding: 0; list-style: none; } fieldset { border: 0; padding: 0; } :focus-visible { outline: 3px solid var(--cian); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--cian); color: var(--azul-900); } .saltar { position: absolute; left: var(--canal); top: -100px; z-index: var(--z-skip); background: var(--cian); color: var(--azul-900); padding: .75rem 1.25rem; border-radius: 0 0 var(--r-s) var(--r-s); text-decoration: none; font-weight: 500; transition: top 180ms var(--sal); } .saltar:focus { top: 0; } /* --- Tipografía --------------------------------------------------------- */ h1, h2, h3, h4 { color: var(--tinta); font-weight: 700; line-height: 1.06; letter-spacing: -0.032em; text-wrap: balance; } h3, h4 { line-height: 1.24; letter-spacing: -0.02em; } /* -0,02em, no -0,04em. Medido sobre la papelería de la marca: el titular de «Crecemos con propósito» (Ubuntu Bold a ~88 px sobre 1600×900) va a un interletrado de entre -0,015 y 0em. Estábamos apretando el doble que la propia marca, y -0,04em es además el suelo de lo aceptable: por debajo las letras se tocan. Margen de la medición: ±0,01em. */ .display { font-size: var(--t-display); letter-spacing: -0.02em; line-height: 1.0; } /* --- El letrero, escrito ------------------------------------------------- El degradado del logo aplicado a la propia letra: mismo ángulo y mismas paradas que el letrero de la fachada. 🔴 LA REGLA CAMBIÓ el 13-09-2026, y conviene saber por qué. Esta nota decía «solo el titular del héroe y el de las tres sedes; repetido en cada h2 deja de ser una firma». Eso valía cuando el degradado era un adorno suelto. Ahora es GRAMÁTICA, y la gramática tiene que ser la misma en todo el sitio o deja de significar nada: · degradado = AQUÍ EMPIEZA UNA SECCIÓN (h1 de página, h2 de sección, titular de cierre, y el h2 de artículo dentro de una guía) · tinta sólida = todo lo que vive DENTRO de una sección: h3 de tarjeta, h3 de paso, subtítulos de artículo. Lo que mantiene la escasez ya no es la lista corta: es que ningún titular de segundo nivel lo lleva. Un lector que baja ve aproximadamente un degradado por pantalla, que es la densidad que ya tenía la home. Y donde el bloque es de DOS COLUMNAS (`.alterno`, `.ficha`, `.prueba`) el titular lleva degradado pero NO el encendido palabra a palabra: ahí la entrada la hace el bloque entero, y dos animaciones peleándose por la misma opacidad hacen parpadear el texto. Está probado y anotado en sitio.js. El interletrado vive aquí y no en cada sitio de uso: lo que lleva el degradado lleva también el interletrado MEDIDO sobre la papelería de la marca (-0,02em), no el -0,032em genérico de los h2. Las dos cosas son el mismo gesto y tienen que viajar juntas. */ .letrero-texto { color: var(--tinta); letter-spacing: -0.02em; } @supports ((background-clip: text) or (-webkit-background-clip: text)) { .letrero-texto { background-image: var(--letrero-texto); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; /* El degradado se recorta a la CAJA, y con line-height 1.0 las mayúsculas y las colas de la "y" se salen de ella: sin este aire quedarían sin pintar, o sea invisibles. El margen negativo lo devuelve al maquetado, así que no mueve nada. */ padding-block: .14em .18em; margin-block: -.14em -.18em; } } /* En alto contraste de Windows no hay degradado, y sin degradado no hay letra: el titular desaparecería entero. Se devuelve el color del sistema. */ @media (forced-colors: active) { .letrero-texto { background-image: none; color: CanvasText; -webkit-text-fill-color: CanvasText; } } /* --- El degradado, repartido palabra a palabra --------------------------- Para el encendido por scroll de [data-enciende-palabras]. Lo pone sitio.js marcando `data-partido`, así que sin JS nada de esto existe y el titular es el de siempre. 🔴 POR QUÉ HACE FALTA. Con `background-clip: text` el color no lo pintan los glifos —son transparentes— sino el FONDO DEL PADRE. Un hijo no pinta nada, así que bajarle la opacidad no lo atenúa: comprobado con dos capturas idénticas píxel a píxel. Para poder encender una palabra, la palabra tiene que pintar su propio trozo del degradado. */ @supports ((background-clip: text) or (-webkit-background-clip: text)) { /* El padre deja de pintar. Si siguiera, sus letras saldrían a plena luz por debajo de las palabras apagadas y no se vería ningún encendido. */ .letrero-texto[data-partido] { background-image: none; } .letrero-texto[data-partido] .palabra { background-image: var(--letrero-texto); /* 🔴 Sin esto el degradado SE REPITE dentro de cada palabra: mide lo que el titular entero y va colocado en negativo, así que la baldosa de al lado entra en la caja. Se vería un arcoíris por palabra en vez de uno solo. */ background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; /* El mismo aire que lleva el titular y por la misma razón: el degradado se recorta a la caja, y con interlineado corto las mayúsculas y las colas de la "y" se saldrían de ella, o sea que quedarían sin pintar. El tamaño y la posición van en píxeles y los calcula sitio.js, que mide DESPUÉS de que esto se aplique: este aire cambia la caja de la palabra. */ padding-block: .14em .18em; /* Sin `margin-block` negativo, al revés que en el titular: estas palabras son `inline`, y en una caja en línea el relleno vertical NO empuja el maquetado —solo agranda la zona pintada, que es justo lo que hace falta— mientras que el margen vertical se ignora por completo. Ponerlo sería una línea que no hace nada. */ } } @media (forced-colors: active) { .letrero-texto[data-partido] .palabra { background-image: none; color: CanvasText; -webkit-text-fill-color: CanvasText; } } /* ======================================================================== HOME · Titulares de sección Solo la home: se trabaja por capas. El día que se quiera en las internas, es quitar el `body[data-pagina="home"]` de delante. ======================================================================== */ /* --- 🔴 El degradado se pintaba sobre la CAJA, no sobre el texto --------- "Tarifas" se veía MORADO. No era el degradado: era que `.letrero-texto` es un bloque de ancho completo y el degradado se reparte sobre esa caja, no sobre la palabra. Una palabra corta y centrada cae en el medio de la caja, y el medio de `--letrero-texto` es justo el violeta del 44%. Medido antes de tocar nada, qué tramo del degradado usa cada titular: "Tarifas" 39%–61% ← violeta puro, el del aviso "Guías informativas" 19%–81% "Preguntas frecuentes" 14%–86% ← este sí se veía bien Con la caja ajustada al texto, TODOS usan 0%–100%: cian a magenta enteros. Y no afecta a los que ya llenaban el ancho —si el texto envuelve, fit-content vale lo mismo que el ancho disponible—, así que solo cambia lo que estaba mal. `margin-inline: auto` porque al encoger la caja hay que devolverla al centro; estos titulares van centrados. */ body[data-pagina="home"] .cabeza-seccion > h2.letrero-texto, body[data-pagina="home"] .cabeza-seccion > h3.letrero-texto, body[data-pagina="home"] .sedes-cabeza > h2.letrero-texto { width: fit-content; margin-inline: auto; max-width: 100%; } /* --- Titulares más grandes en el teléfono ------------------------------- Se sube el SUELO del clamp, no se mete un @media. Con un corte duro, a 700 px el titular seguiría en 35 y a 639 saltaría a 44 de golpe; moviendo el suelo la subida es continua y el techo de escritorio no se toca (a 1440 sigue dando los mismos 56 y 72 de siempre). Los dos a la vez, y en √φ = 1,272, que es la escala del proyecto: h2 35 → 44 px (44/35 = 1,257) h1 40 → 56 px (56/44 = 1,272, la misma razón que el 72/56 de escritorio) El h1 sube con el h2 a propósito: `.sedes-cabeza h2` ("Tres sedes en Bogotá") usa --t-h1 para ser el titular grande de la home. Si solo subiera el h2, el titular pequeño pasaría a medir MÁS que el grande y se rompería la jerarquía. */ body[data-pagina="home"] { /* El SUELO tambien se encoge por debajo de ~392 px, y no es un capricho: a 56 px la palabra `valoraciones` mide 325 px y la columna de un movil de 320 solo da 280. Medido: la home se desplazaba de lado 25 px. Con `min(3.5rem, 14.3vw)` el titular baja a 45,8 px justo en los telefonos mas estrechos y vuelve a 56 en cuanto hay sitio (a partir de 392). Sigue siendo el mismo tamano para TODOS los titulares de la home: lo que cambia es el peldano entero, no uno solo. */ --t-h1: clamp(min(3.5rem, 14.3vw), 5.45vw, 4.5rem); --t-h2: var(--t-h1); /* mismo peldano: ver la nota de arriba */ } /* --- Aire entre secciones ------------------------------------------------ El hueco que se PERCIBE entre dos secciones no es el relleno de una: es la SUMA de las dos, porque se tocan. Medido en el canal, a 1440 px: hueco real entre secciones .............. 249–257 px alto de la ventana ...................... 900 px suma de todos los huecos de la home ..... 1.615 px = 17 % de la página Un cuarto de pantalla de nada entre bloque y bloque. Se baja el tope de escritorio de 128 a 88 px por lado (hueco 176) y el de móvil de 56 a 44 (hueco 88). No se toca la proporción entre secciones: el ritmo relativo es el mismo, solo cabe más página. 🔴 Hay que dar TAMBIÉN el valor de móvil. El escalón de abajo lo pone `:root` dentro de su media query, y un token declarado en `body` le gana siempre —body es descendiente de root—, así que sin esto la home se quedaría con el valor de escritorio en el teléfono. */ body[data-pagina="home"] { --seccion: clamp(3.5rem, 6.2vw, 5.5rem); --aire-cabeza: 2rem; --seccion-corta: clamp(2.75rem, 4.8vw, 4.25rem); } @media (max-width: 979px) { body[data-pagina="home"] { --seccion: 2.75rem; --seccion-corta: 2.25rem; } } /* --- Sede Nuestro Bogotá ------------------------------------------------- La única foto real de una sede de ReconoCer en la home. Estaba tratada como un rectángulo suelto y el texto enterraba el dato que vende: que en ese piso está TODO. */ /* A partes iguales. Con 1,15/0,85 el titular caía a tres líneas en la columna estrecha mientras la foto se quedaba el ancho. */ @media (min-width: 900px) { body[data-pagina="home"] .prueba-sede { grid-template-columns: 1fr 1fr; } } /* El resplandor de marca detrás de la foto, el mismo gesto que sostiene a los gemelos en el héroe: la saca de «rectángulo pegado» y la ata a la paleta. 🔴 Hay que soltar el `overflow: hidden` de `.prueba figure` —recortaría el halo— y llevar el redondeo a la propia imagen, que es lo único que hay que redondear. La leyenda va debajo, fuera de la caja de la foto. */ /* 🔴 `.prueba .foto-sede` y no `.foto-sede` a secas: `.prueba figure` pesa (0,1,1) y le ganaba a (0,1,0), así que el recorte seguía puesto. Se notaba en dos sitios y ninguno parecía un problema de especificidad: el halo no aparecía —lo cortaba el figure— y la esquina redondeada se comía la «S» de la leyenda, que va dentro del
. */ /* 🔴 `isolation: isolate`, y no es cosmético: arregla un fogonazo (15-09-2026). El halo de debajo va en `z-index: -1`, y un z-index negativo sólo se queda «detrás del contenido y delante del fondo» si hay un contexto de apilamiento que lo contenga. Este
lleva `data-sube`, que le anima `opacity` y `transform`: las dos ABREN un contexto mientras dura el tween, y `clearProps` lo cierra al terminar. O sea que el halo cambiaba de CAPA a mitad de la entrada, sin cambiar de opacidad: durante el tween -> dentro del contexto -> ENCIMA del velo de `.niebla` al terminar -> sin contexto -> DEBAJO de ese velo Y ese velo no es poca cosa en el tema claro: `--velo` es blanco al 62 % (en oscuro es blanco al 2,2 %). Medido, el aporte de color del halo en una franja al lado de la foto: asentado durante el tween salto tema claro 23 64 41 <- el fogonazo tema oscuro 28 26 2 Por eso sólo se veía en claro: un destello magenta al entrar que luego se apagaba solo. Con `isolate` el contexto es permanente y el halo vive SIEMPRE por delante del velo. Es el mismo arreglo que ya lleva `.cierre::before`. 🔴 Eso obliga a recalibrar la opacidad: por delante del velo el mismo valor rinde casi el triple. Los números nuevos están calibrados para que el resultado sea IDÉNTICO al estado asentado de antes, que es el bueno. */ .prueba .foto-sede { overflow: visible; border-radius: 0; isolation: isolate; } .foto-sede img { border-radius: var(--r-l); /* 3/2 en vez de 4/3: el encuadre original dejaba techo y suelo muertos arriba y abajo del local. El 42 % sube el centro de interés al letrero. */ aspect-ratio: 3 / 2; object-position: center 42%; } /* 🔴 SIN `filter: blur()` (15-09-2026), por el mismo fallo de Safari que el halo de los gemelos (ver `.heroe-gemelos-int::before`): este
lleva `data-sube` y `.prueba` lleva `data-entra`; mientras entran, sus transform los convierten en CAPAS COMPUESTAS, y Safari de Mac recorta el derrame de un blur en el borde de la capa. Salían cantos rectos durante la entrada. Mismo remedio: caja 140 px más grande por lado (dos sigmas del blur de 70) y el óvalo difuminado dibujado con una MÁSCARA radial que llega a transparente dentro de su propia caja. Los colores del degradado, recolocados con la caja real para que cada uno caiga donde caía. Calibrado contra la regla vieja reinyectada en el mismo render, en los dos temas y a 1440 y 390 (`sede-calibra.js`). En escritorio gana el perfil de CANTO difuminado con la opacidad al 80 %: diferencia media 0,23/255 en oscuro y 0,13 en claro. De ahí .27 (era .34). 🔴 Y `isolation: isolate` se queda en `.prueba .foto-sede`: es lo que arregló el fogonazo del 15-09 y no tiene nada que ver con esto. Las opacidades de antes (.34 / .16) ya estaban calibradas con él puesto. */ .foto-sede::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: calc(10% - 140px) calc(-5% - 140px) calc(16% - 140px) calc(-5% - 140px); background: linear-gradient(100deg, var(--cian) 16.8%, #6b57c4 51.3%, var(--magenta) 83.2%); -webkit-mask-image: radial-gradient(closest-side, #000 40%, rgba(0, 0, 0, .84) 50%, rgba(0, 0, 0, .5) 66%, rgba(0, 0, 0, .16) 83%, rgba(0, 0, 0, .02) 97%, transparent 100%); mask-image: radial-gradient(closest-side, #000 40%, rgba(0, 0, 0, .84) 50%, rgba(0, 0, 0, .5) 66%, rgba(0, 0, 0, .16) 83%, rgba(0, 0, 0, .02) 97%, transparent 100%); opacity: .27; } /* Sobre claro el halo necesita OTRA GEOMETRÍA, no sólo otra opacidad: un resplandor sobre casi blanco sólo puede oscurecer. Ensanchar rinde más que subir la opacidad, porque el halo se derrama por fuera del canto en vez de acumularse detrás de una foto opaca, que es donde no se ve. De ahí el `inset` más ancho, que se queda tal cual. 🔴 La OPACIDAD baja de .45 a .16, y no es que el halo se haya querido más flojo: es que ahora se pinta POR DELANTE del velo de `.niebla` —blanco al 62 %— en vez de por detrás, y por delante el mismo valor rinde casi el triple. Ver el bloque de `isolation: isolate` de más arriba. Calibrado barriendo la opacidad y comparando el aporte de color contra el estado asentado de antes, en una franja al lado de la foto (objetivo: 23): .08 -> 12 .14 -> 20 .10 -> 15 .16 -> 23 <- clavado .12 -> 19 .18 -> 26 O sea: se ve exactamente igual que antes, pero ya no da el salto. */ /* 15-09-2026, sin blur (ver la regla base): el `inset` ancho de claro se conserva con la misma holgura de 140 px, los colores se recolocan para esta caja, y la opacidad pasa de .16 a .13 —el mismo 80 % que en oscuro, que es el que reproduce el render de antes: diferencia media 0,13/255—. */ :root[data-tema="claro"] .prueba .foto-sede::before { opacity: .13; inset: calc(6% - 140px) calc(-9% - 140px) calc(12% - 140px) calc(-9% - 140px); background: linear-gradient(100deg, var(--cian) 16.0%, #6b57c4 51.4%, var(--magenta) 84.0%); } /* En el TELÉFONO, otro perfil de máscara. Pasa lo mismo que con el halo de los gemelos: con una foto de 350 px y un blur de 70, el desenfoque se comía la forma entera y lo que se veía era una MANCHA gaussiana, no un óvalo con el canto suave. Calibrado: gaussiana de dispersión 36 % con la opacidad de antes (.34 / .16), diferencia media 0,26/255 en oscuro y 0,20 en claro. El corte en 599 px y no en el de la rejilla (899): lo que decide el perfil es el TAMAÑO DE LA FOTO frente al blur, no si hay una o dos columnas. Entre 600 y 899 la foto va a una columna pero mide de 560 a 860 px, como en escritorio, y ahí el canto es el que acierta. La de claro repite el selector largo: la regla de tema pesa (0,3,1) y sin él le ganaría a esta. */ @media (max-width: 599px) { .foto-sede::before { opacity: .34; background: linear-gradient(100deg, var(--cian) 21.9%, #6b57c4 51.1%, var(--magenta) 78.1%); -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .962) 10%, rgba(0, 0, 0, .857) 20%, rgba(0, 0, 0, .707) 30%, rgba(0, 0, 0, .539) 40%, rgba(0, 0, 0, .381) 50%, rgba(0, 0, 0, .249) 60%, rgba(0, 0, 0, .151) 70%, rgba(0, 0, 0, .085) 80%, rgba(0, 0, 0, .044) 90%, transparent 100%); mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .962) 10%, rgba(0, 0, 0, .857) 20%, rgba(0, 0, 0, .707) 30%, rgba(0, 0, 0, .539) 40%, rgba(0, 0, 0, .381) 50%, rgba(0, 0, 0, .249) 60%, rgba(0, 0, 0, .151) 70%, rgba(0, 0, 0, .085) 80%, rgba(0, 0, 0, .044) 90%, transparent 100%); } :root[data-tema="claro"] .prueba .foto-sede::before { opacity: .16; background: linear-gradient(100deg, var(--cian) 21.0%, #6b57c4 51.2%, var(--magenta) 79.0%); } } /* Lo que hay en el piso, en lista. Mismo palote que la comparativa: es el mismo gesto de «esto está», no hace falta inventar otro. `--cian-claro` y no `--cian`: es el token que ya baja a #009fe3 sobre claro para cumplir contraste, así que sirve para los dos temas sin duplicar regla. */ .lista-piso { margin-top: 1.25rem; display: grid; gap: .75rem; } .lista-piso li { position: relative; padding-left: 1.75rem; font-size: var(--t-menor); color: var(--texto); } /* 🔴 El remate va a tamaño de ENTRADILLA, y no es solo jerarquía: es AA. `#e6007e` sobre el fondo oscuro da 4,16:1 y sobre el claro 4,40 — por debajo del 4,5 que exige el texto normal. A 17 px en negrita NO cuenta como texto grande (el listón son 18,66 px en negrita), así que fallaba en los dos temas. Medido por el barrido, no supuesto. Por eso todos los demás `.resalte-magenta` del sitio viven en una entradilla: ahí el tamaño los convierte en texto grande y les basta 3:1. La regla, para que no se vuelva a romper: **magenta de resalte, solo de --t-lead-mayor para arriba.** Y de paso es lo correcto de jerarquía: esta línea es el beneficio de la sección, no una nota al pie. */ /* 🔴 `.prueba-sede .lead` (0,2,0) y no una clase suelta (0,1,0): `.lead` ya fija font-size con el mismo peso, y a igual peso manda el ORDEN del archivo. Con el descendiente delante gana siempre, se mueva donde se mueva la regla. */ .prueba-sede .lead { font-size: var(--t-lead-mayor); line-height: 1.5; text-wrap: pretty; } .lista-piso li::before { content: ""; position: absolute; left: 0; top: .45em; width: 15px; height: 9px; border-left: 2px solid var(--cian-claro); border-bottom: 2px solid var(--cian-claro); transform: rotate(-45deg); } /* --- El hover del botón con marco -------------------------------------- 🔴 SIN HALO desde el 14-09-2026, a petición del cliente: al pasar el cursor, los botones del home ya no se difuminan. Lo que queda es el alzado de 2 px y la transición — «la animación de Apple», en sus palabras. Con él se va `--halo-boton`, que ya no lo usa nadie. Historia corta, por si alguien piensa en devolverlo: el halo nació en cian; se pasó a magenta porque sobre el tema claro un cian pálido no se percibía (medido con `herramientas/halo-fuerza.js`: pico 24/255 contra 52/255); y el 13-09-2026 se bajó de 20/60 a 6/18 porque parecía un foco encendido detrás del botón. Tres rondas de ajuste para acabar quitándolo: la señal de que el gesto no lo necesitaba. Lo que NO cambia: el marco degradado sigue siendo la identidad de este botón y no satura al pasar el cursor, y no hay cambio de relleno, de letra ni de peso —subir el peso reajustaría el ancho del texto y el botón daría un salto bajo el cursor—. */ /* --- Escalera de precios por categoría ---------------------------------- Antes: seis filas de las que CUATRO decían el mismo valor, dibujadas como seis tarjetas idénticas que ocupaban 925 px de alto en el teléfono. El dato que de verdad importa —que A1, A2 y B1 cuestan lo mismo— no se veía por ninguna parte. Ahora son cuatro bandas agrupadas por precio, separadas por filos finos en vez de por cajas. Menos ruido, menos altura, y la tabla cuenta sola que el precio solo se mueve en tres casos. Sigue siendo un : esto ES una tabla (categoría · uso · valor) y así la anuncia el lector de pantalla. Lo que cambia es cómo se dibuja. Y va en envoltura propia (.escalera, no .tabla-envoltura) para que el JS de tarjetas no la toque: aquí no hacen falta, la banda ya se apila sola. */ /* El titular del bloque, un escalón de √φ por debajo del de sección: 44/1,272 = 34,6 en móvil · 56/1,272 = 44 en PC. Con --t-h3 (22 px) el salto desde «Tarifas» era de 2:1 y no se leía como titular sino como rótulo. */ body[data-pagina="home"] .bloque-categorias { margin-top: clamp(3rem, 6vw, 5rem); } body[data-pagina="home"] .bloque-categorias .cabeza-seccion > .h3 { font-size: var(--t-h1); /* el mismo peldano que las otras cabeceras */ } /* === EL EJE DE LA HOME: qué va centrado y qué no ====================== Auditadas las nueve secciones a 1440 y a 390. Las CAJAS ya estaban todas centradas (izquierda = derecha al píxel); lo que no cuadraba era el text-align y la MEDIDA. Tres cosas se salian del sistema: 1. La nota al pie de Tarifas iba a 1144 px y a la izquierda, debajo de una tabla de 864 centrada. Era el bloque de texto más ancho de la sección y el único que no se alineaba con nada. 2. `.sedes-cabeza` medía 928 y las otras cinco cabeceras 768. Con el titular ya al mismo tamaño, la caja distinta era lo único que hacía que uno rompiera renglon donde los demás no. 3. De las tres rejillas de tarjetas, las de sede iban centradas y las de valoraciones y guías a la izquierda. El sistema, ahora escrito: - cabecera de sección (titular + entradilla): CENTRADA, misma medida - tarjetas de contenido: CENTRADAS, como las de sede - 🔴 listas con viñeta: SIEMPRE a la izquierda. Centrar una lista rompe su propia alineación —los checks dejan de formar columna— y por eso las tarjetas de precio se quedan como están: son listas, no prosa. - bloques a dos columnas junto a una foto: a la izquierda (la declaración y la sede Nuestro Bogotá). Centrar texto contra una foto lo descuadra. ==================================================================== */ /* 54rem = la medida de `.escalera`, la tabla que esta nota anota. */ body[data-pagina="home"] .bloque-categorias .menor { text-align: center; max-width: 54rem; margin-inline: auto; } /* 45,18em y no 48rem: por debajo de 1441 da 768 px EXACTOS (la letra del cuerpo vale 17 px fijos ahí) y por encima crece con ella, igual que el resto de cabeceras. Ver el bloque de tokens fluidos. */ body[data-pagina="home"] .sedes-cabeza { max-width: 45.18em; } /* Topada y centrada. A sangre, a 1160 px de ancho, el ojo tenía que cruzar casi un metro de vacío entre la categoría y su valor, y la fila dejaba de leerse como una fila. Un poco más ancha que la cabecera (48rem) para que no parezcan la misma columna. */ .escalera { overflow-x: auto; margin-block: clamp(1.75rem, 3vw, 2.5rem); max-width: 54rem; margin-inline: auto; } /* min-width 0 mata el mínimo de 460 px de las tablas normales: esta no necesita deslizar porque en el teléfono se apila. */ .escalera table { width: 100%; min-width: 0; border-collapse: collapse; } /* La cabecera, sin la losa gris de th: un filo y un rótulo pequeño bastan. */ .escalera thead th { background: none; border-bottom: 1px solid var(--borde-fuerte); padding: 0 0 .75rem; font-size: var(--t-mini); font-weight: 500; color: var(--suave); } .escalera thead th:last-child { text-align: right; } .escalera tbody td { border-bottom: 1px solid var(--borde); padding: 1.25rem 0; vertical-align: baseline; color: var(--texto); font-size: var(--t-menor); } .escalera tbody tr:last-child td { border-bottom: 0; } /* Las dos columnas de dato se ciñen a su contenido; la del medio se queda con el resto, que es la única que lleva texto de verdad. */ .escalera td:first-child { width: 1%; white-space: nowrap; padding-right: clamp(1rem, 3vw, 2rem); } .escalera td:last-child { width: 1%; white-space: nowrap; padding-left: clamp(1rem, 3vw, 2rem); text-align: right; } .escalera .cat { font-size: clamp(1.25rem, 1.9vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; color: var(--tinta); } /* El CASO, con el disco de marca: es la traducción de los códigos de la izquierda a lo que la gente dice de verdad («carro o moto»). Un escalón por debajo de `.cat` para que la columna de códigos siga mandando en su fila. El disco se dimensiona solo: va en `em` (ver `.precio-nexo`). */ .escalera .cat-caso { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); font-weight: 700; letter-spacing: -0.02em; color: var(--tinta); white-space: normal; } .escalera .cat-detalle { display: block; margin-top: .375rem; font-size: var(--t-mini); color: var(--suave); white-space: normal; } /* El valor es a lo que se vino, pero son cuatro: un escalón por debajo de la cifra del bento (40-56 px) para que no griten los cuatro a la vez. */ .escalera .valor { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; letter-spacing: -0.045em; color: var(--tinta); } @media (max-width: 680px) { /* La banda se apila: código y precio en la MISMA línea —que es como se comparan— y el «para qué sirve» debajo, a todo el ancho. */ .escalera table, .escalera tbody, .escalera tr, .escalera td { display: block; } .escalera thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .escalera tbody tr { display: grid; grid-template-columns: 1fr auto; gap: .25rem clamp(.75rem, 3vw, 1.25rem); align-items: baseline; padding: 1.125rem 0; border-bottom: 1px solid var(--borde); } .escalera tbody tr:last-child { border-bottom: 0; } .escalera tbody td { border: 0; padding: 0; } /* 🔴 `white-space: normal` obligatorio. La celda de códigos va `nowrap` en escritorio para que no se parta la lista, pero al agrupar las OCHO categorías en una sola fila esa línea mide ~290 px y a 390 px empujaba el precio fuera de la caja: «$238.000» salía cortado y solo se alcanzaba arrastrando dentro de la tabla. Ni `cab-ovf` ni `vis-barrido` lo veían, porque `.escalera` tiene su propio `overflow-x` y el desborde no llega a la página. */ .escalera td:first-child { grid-column: 1; grid-row: 1; width: auto; padding-right: 0; white-space: normal; } .escalera td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } .escalera td:last-child { grid-column: 2; grid-row: 1; width: auto; padding-left: 0; } } @media (hover: hover) and (pointer: fine) { body[data-pagina="home"] .btn-letrero:hover, body[data-pagina="home"] .oscura .btn-letrero:hover { /* El alzado, no el halo, es lo que dice «esto se puede pulsar». 2 px, no 6 como en las tarjetas: un boton es pequeno y el mismo desplazamiento en una pieza pequena se lee como un salto. */ transform: translateY(-2px); /* 🔴 El borde, tapado como ya se tapó el relleno. Estos botones llevan TAMBIÉN `.btn-secundario`, y su hover pinta `border-color: var(--tinta)`: en claro eso es el azul marino de marca, y salía un aro oscuro por FUERA del marco degradado (el ::before va `inset: 0`, o sea dentro del borde). Sigue haciendo falta aunque el marco ya no se pinte de magenta: el aro oscuro del botón secundario aparece igual. */ border-color: transparent; } /* Aqui el marco se repintaba de MAGENTA al pasar el cursor. Fuera desde el 13-09-2026: el marco degradado ES la identidad de este boton, y cambiarle el color justo cuando se le presta atencion borraba lo unico que lo distingue. Se queda el degradado de marca, que ya se satura de .88 a 1. */ /* Y el marco tampoco se satura: se queda EXACTAMENTE igual que en reposo. La regla general lo sube de .88 a 1 al pasar el cursor; aqui se anula. Lo pidio el cliente asi y tiene razon: si el halo y el alzado ya dicen «esto responde», mover ademas el contorno son tres senales para un gesto que solo necesita una. Es la leccion de la pagina de Apple —nada grita, todo responde— aplicada al boton. */ body[data-pagina="home"] .btn-letrero:hover::before { opacity: .88; } /* 🔴 NINGÚN botón del home se difumina al pasar el cursor (14-09-2026). Las sombras venían de tres reglas distintas y ninguna vive aquí: `.btn-primario:hover` trae `--brillo-cian`, el tema claro se la cambia por una sombra azul, y `.btn-letrero:hover` trae otra vez `--brillo-cian`. En vez de ir apagándolas una a una —y dejar el arreglo repartido por tres sitios de la hoja— se apagan todas aquí, que es el único bloque que es del home y solo del home. Especificidad (0,4,1): le gana a `:root[data-tema="claro"] .btn-primario:hover`, que es (0,4,0) y era la que más pesaba. 🔴 `:not(.nav-cta)` porque el «Agendar» de la cabecera NO es un botón del home: es el mismo en las 16 páginas. Apagárselo solo aquí dejaría la cabecera comportándose distinto según en qué página estés. */ body[data-pagina="home"] .btn:hover:not(.nav-cta) { box-shadow: none; } } .h1 { font-size: var(--t-h1); } .h2 { font-size: var(--t-h2); } .h3 { font-size: var(--t-h3); } .lead { font-size: var(--t-lead); line-height: 1.55; color: var(--suave); text-wrap: pretty; } .menor { font-size: var(--t-menor); } .mini { font-size: var(--t-mini); } .suave { color: var(--suave); } .centro { text-align: center; } a { color: var(--cian-claro); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--tinta); } /* --- Estructura --------------------------------------------------------- */ .envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--canal); } .estrecho { max-width: var(--ancho-prosa); margin-inline: auto; } .seccion { padding-block: var(--seccion); } .seccion-corta { padding-block: var(--seccion-corta); } .niebla { background: var(--velo); border-block: 1px solid var(--capa-1); } /* Superficie oscura, con profundidad atmosférica en vez de sombras */ .oscura { position: relative; background: transparent; color: var(--texto); } .oscura .lead, .oscura .suave { color: var(--sobre-azul); } .oscura a { color: var(--cian-claro); } .oscura a:hover { color: var(--tinta); } /* El trato que se diseñó para la cabecera de «Tres sedes», ahora para TODA cabecera de sección: centrada, y la entradilla más grande y en color de texto en vez del gris de lo secundario. Se replica el TRATO, no la escala: `.sedes-cabeza h2` sigue en --t-h1 porque preside las tarjetas más grandes de la home, y el resto se queda en --t-h2. El degradado lo pone `.letrero-texto` en el HTML, para que cada titular diga lo que es y para heredar sus dos respaldos (@supports y forced-colors) sin duplicar una sola regla. 🔴 La marca es `.cabeza-seccion`, que en este sitio ya significa «esto encabeza una sección entera». Los h2 que titulan una COLUMNA —los datos de una sede, el formulario de contacto— o un párrafo de artículo NO la llevan y siguen alineados a la izquierda: un titular centrado sobre un formulario alineado a la izquierda se lee como un fallo de maquetado, no como una decisión. `.centrada` ya no existe: sobrevivía solo por su `.btn-grupo`, y ninguna de las tres cabeceras que la llevaban tenía botones dentro. Era una clase que no hacía absolutamente nada en las tres páginas donde estaba escrita. */ .cabeza-seccion { max-width: 48rem; margin-inline: auto; text-align: center; } .cabeza-seccion .lead { margin: 1.125rem auto 0; max-width: 40rem; font-size: var(--t-lead-mayor); line-height: 1.5; color: var(--texto); text-wrap: balance; } /* 🔴 QUINTA vez que dos reglas del mismo peso se resuelven por orden en este archivo, y la primera que se ve a simple vista. Esta regla es (0,1,0) y pone el aire entre una cabecera y su contenido. El `margin: 0` con el que `.razones`, `.amano`, `.elige` y `.llegar` se quitan los márgenes de fábrica de `
como encabezado de fila (el "Total aproximado" de las guías): sin esto conservaba el fondo y el filo de y salía como una losa gris dentro de la tarjeta. Titula igual que un td. */ [data-tabla-tarjetas] tbody td:first-child, [data-tabla-tarjetas] tbody th { display: block; border: 0; padding: 0; background: none; text-align: left; font-size: 1.0625rem; font-weight: 500; color: var(--tinta); margin-bottom: .5rem; } [data-tabla-tarjetas] tbody td:not(:first-child) { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: .375rem; font-size: var(--t-menor); } [data-tabla-tarjetas] tbody td:not(:first-child)::before { content: attr(data-etiqueta); flex-shrink: 0; color: var(--suave); font-size: var(--t-mini); } /* El valor es a lo que se vino: que pese */ [data-tabla-tarjetas] tbody td:last-child { color: var(--tinta); font-weight: 500; text-align: right; } } @media (max-width: 979px) { /* El logo era un objetivo de 149×30: alto suficiente para leerlo, no para acertarle con el pulgar. */ .nav-marca { min-height: 44px; } /* Bento de tarifas: cinco bloques apilados. No se quita ninguno —el precio por categoría y lo que incluye son justo lo que se vino a mirar— pero se les quita relleno muerto. */ .celda { padding: 1.25rem; } .celda .precio-cifra { font-size: 2.25rem; flex-wrap: wrap; margin: .5rem 0 .25rem; } .celda ul { margin-top: .875rem; gap: .5rem; } .celda .btn { margin-top: 1.125rem; min-height: 48px; } .celda-foto img { min-height: 170px; } } @media (max-width: 979px) { /* Enlaces sueltos dentro de las listas de datos: los 8 documentos de /transparencia, los teléfonos y el WhatsApp de cada sede, las redes de /contacto. Medían 17 px de alto. No son enlaces en mitad de un párrafo —esos sí están exentos y estirarlos rompería el interlineado—, son acciones sueltas, y por ahí se marca un teléfono con el pulgar. */ .datos dd a { display: inline-flex; align-items: center; min-height: 44px; } .migas a { min-height: 44px; } } /* Lista de precios en el teléfono: categoría y valor en la misma línea. Se activa solo cuando el JS ha comprobado que la última columna es dinero en TODAS las filas; si no, la tabla se apila en líneas separadas, que es lo correcto cuando esa columna es texto largo. */ @media (max-width: 680px) { [data-tabla-tarjetas="precio"] tbody tr { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 1rem; padding: .8125rem 1rem; } [data-tabla-tarjetas="precio"] tbody td:first-child { grid-column: 1; grid-row: 1; margin-bottom: 0; } [data-tabla-tarjetas="precio"] tbody td:last-child { grid-column: 2; grid-row: 1; font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* El valor ya se lee al lado de su categoría: la etiqueta sobra */ [data-tabla-tarjetas="precio"] tbody td:last-child::before { content: none; } [data-tabla-tarjetas="precio"] tbody td:not(:first-child):not(:last-child) { grid-column: 1 / -1; grid-row: 2; padding-top: .25rem; color: var(--suave); } [data-tabla-tarjetas="precio"] tbody td:not(:first-child):not(:last-child)::before { display: none; } } /* --- Tarifas cuando sube al héroe en el teléfono ------------------------- `.oscura` no pinta fondo: es un contexto de COLOR que tiñe enlaces y entradillas para el bloque del héroe. Al meter ahí la sección de Tarifas, esa herencia le cambiaba tres cosas frente a como se ve en escritorio: la entradilla, el texto del botón «Agendar» del primer plan y el enlace de abajo. Se devuelven a sus valores propios: un mismo componente no debe verse distinto según dónde acabe colocado. */ .oscura > [data-tarifas] .lead { color: var(--suave); } .oscura > [data-tarifas] .btn-secundario { color: var(--tinta); } .oscura > [data-tarifas] .btn-texto { color: var(--cian-claro); } /* --- El héroe del teléfono no lleva foto --------------------------------- En móvil la fachada sale del héroe: queda el texto con su animación de entrada y, justo debajo, las tarifas. La foto sigue en escritorio y sigue apareciendo más abajo en la sección de Nuestro Bogotá, así que el archivo se descarga igual —es el mismo `fachada.jpeg`, misma entrada de caché— y ocultarla aquí no cuesta ancho de banda de más. */ @media (max-width: 979px) { /* --- Héroe: que el titular mande ------------------------------------- El problema no era el tamaño del título: era que la entradilla ocupaba casi la misma superficie (133 px contra 105) y no dejaba dominar a nadie. Se sube el titular, se acorta la entradilla y los botones pasan a una fila: entre las tres cosas el titular pasa a pesar el doble. */ /* Sube de 3rem fijo a un clamp que llega a 3,5rem (56 px), que es un peldaño REAL de la escala áurea —el del h2— en vez de un número suelto. El techo se puso midiendo, no a ojo. Lo que decide aquí no es el ancho sino si la línea del precio («Tres sedes en Bogotá · Tarifa desde $238.000») sigue cabiendo en la primera pantalla por encima de la barra fija. A 390 y 360 px aguanta hasta 3,5rem con holhura (acaba en 590 y la barra empieza en 771). 🔴 Y el suelo se queda en 3rem por los 320 px: ahí el titular pasa a cinco líneas y el precio se va de la primera pantalla. Conviene saber que en 320 el precio YA se salía antes de tocar nada (650 contra un tope de 617), así que esto no lo rompe; simplemente no lo empeora. */ .heroe .display { font-size: clamp(3rem, 14.4vw, 3.5rem); line-height: .98; } /* Ojo: la píldora de navegación es `position: fixed`, así que este relleno no es aire —es lo único que impide que el titular nazca por debajo de ella—. La píldora mide 88 px; por debajo de eso el texto se mete detrás. */ .heroe { padding-top: calc(88px + 1.6rem); } /* Dos botones apilados comían 123 px de la primera pantalla. En fila caben desde 360 px de ancho; por debajo se dejan apilar, que es preferible a que el texto se salga. */ @media (min-width: 360px) { .heroe .btn-grupo { flex-wrap: nowrap; gap: .625rem; } .heroe .btn-grupo .btn { flex: 1 1 0; padding-inline: .75rem; white-space: nowrap; } } /* El resplandor del letrero vivía SOLO detrás de los gemelos, así que al ocultarlos en el teléfono desaparecía con ellos y el héroe se quedaba plano. Aquí va por su cuenta, detrás del titular. 🔴 Los lados van casi a 0: con -22% el pseudoelemento ensanchaba la página a 448 px y la píldora de navegación salía cortada. */ .heroe-rejilla { position: relative; } /* 🔴 El lado derecho va a 0 y no a -6%. Con -6% la caja del resplandor se salía 22 px por la derecha y el DOCUMENTO se volvía más ancho que la pantalla. En Chrome no se notaba —`overflow-x` lo recorta— pero en un iPhone de verdad eso deja ARRASTRAR la página entera con el dedo: la barra fija se queda quieta y todo lo demás se corre y se corta. El `blur(52px)` sigue sacando el color fuera de la pantalla, así que se ve igual; lo que se acaba es el desbordamiento de la CAJA, que es lo que el navegador mide. */ .heroe-rejilla::before { content: ""; position: absolute; inset: -6% 0 62% 34%; z-index: -1; background: var(--letrero); filter: blur(52px); opacity: .22; border-radius: 50%; pointer-events: none; } /* 19 px y no 17. Dos razones que apuntan a lo mismo: en el teléfono la entradilla del héroe es el único texto que explica qué es esto, y a 17 px las palabras resaltadas en 700 se quedaban por debajo de los 18,66 px que WCAG pide para contar como texto grande, así que el listón les subía a 4,5:1 justo donde el fondo está más teñido. */ .heroe .lead { font-size: 1.1875rem; } /* 🔴 EN EL TELÉFONO VA EL RECORTE, sin fondo y sin marco (14-09-2026) Antes iba la pieza 16:9 con su propio fondo, dentro de una tarjeta redondeada, y rotando con las tres fotos de sede. Se quitaron las dos cosas —el marco y las transiciones— por la misma razón: en una pantalla estrecha una foto encajonada con esquinas y filo se lee como un cuadro pegado en medio de la página. El recorte no tiene canto, así que no hay nada que cuadre. 🔴 Lo que sostenía a la silueta en escritorio vuelve aquí ENTERO, y no es opcional: el resplandor del letrero por detrás de los hombros y la máscara que difumina el corte de cintura. Sin esas dos cosas el recorte sí se lee como una pegatina —que es exactamente por lo que en su día se cambió por la foto enmarcada—. Con ellas se lee como si salieran del fondo. El resplandor va con los lados a 0 y no al -8% del escritorio: a 390 px ese -8% son 31 px de caja fuera de la pantalla y el documento se vuelve más ancho que el teléfono, que es el fallo que deja ARRASTRAR la página entera con el dedo. El `blur(70px)` derrama el color igual; lo que se acaba es el desbordamiento de la caja, que es lo que el navegador mide. La imagen va al 110 % con -5 % de margen: un punto más grande que la columna, pero sin salirse del canal de 20 px. Medido, no estimado — al 112 % la caja se pasa 1 px del borde. */ .heroe-gemelos { display: block; width: 100%; margin: .75rem 0 0; } .heroe-gemelos-int { position: relative; border-radius: 0; overflow: visible; } .heroe-gemelos-int::after { content: none; } /* Con la holgura de 140 px, igual que en escritorio (ver la regla base). El desborde lateral lo recorta `section[data-heroe] { overflow-x: clip }`, que no crea contenedor de scroll: el documento no se ensancha (medido con cab-ovf y ancho-fluido). 🔴 Y con OTRO PERFIL de máscara, no el de escritorio. Aquel imita el canto difuminado de un óvalo grande: en escritorio el óvalo mide unas cinco sigmas del blur y lo que se ve es un borde suave. En el teléfono el óvalo es de 350 px y el blur seguía siendo de 70: el desenfoque se comía la forma entera y quedaba una MANCHA gaussiana. Con la máscara de escritorio el halo salía más luminoso y más extendido que antes (diferencia media 6,33/255 en oscuro, casi la mitad de los píxeles por encima de 3). Calibrado barriendo una familia gaussiana —alfa = e^(-(r/s)^2/2)— contra la regla vieja reinyectada en el mismo render. Gana s = 36 % con la misma opacidad: diferencia media 1,03 en oscuro y 0,69 en claro. Los colores del degradado, recolocados con la caja real medida a 390. */ .heroe-gemelos-int::before { display: block; opacity: .46; inset: calc(2% - 140px) -140px calc(12% - 140px) -140px; background: linear-gradient(100deg, var(--cian) 22.6%, #6b57c4 51.1%, var(--magenta) 77.4%); -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .962) 10%, rgba(0, 0, 0, .857) 20%, rgba(0, 0, 0, .707) 30%, rgba(0, 0, 0, .539) 40%, rgba(0, 0, 0, .381) 50%, rgba(0, 0, 0, .249) 60%, rgba(0, 0, 0, .151) 70%, rgba(0, 0, 0, .085) 80%, rgba(0, 0, 0, .044) 90%, transparent 100%); mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .962) 10%, rgba(0, 0, 0, .857) 20%, rgba(0, 0, 0, .707) 30%, rgba(0, 0, 0, .539) 40%, rgba(0, 0, 0, .381) 50%, rgba(0, 0, 0, .249) 60%, rgba(0, 0, 0, .151) 70%, rgba(0, 0, 0, .085) 80%, rgba(0, 0, 0, .044) 90%, transparent 100%); } .heroe-gemelos img { display: block; width: 110%; max-width: none; margin-left: -5%; height: auto; aspect-ratio: auto; object-fit: fill; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 99%); mask-image: linear-gradient(to bottom, #000 82%, transparent 99%); } .heroe-rejilla { gap: 0; } /* Los dos botones del héroe, a mitades iguales y 56 px de alto. Eran 54 px de ancho automático: el principal y el secundario no medían lo mismo y ninguno de los dos parecía el importante. El reparto a mitades ya lo hacía la regla de 360 px de aquí arriba; esto solo les da cuerpo. */ @media (min-width: 360px) { .heroe .btn-grupo .btn { min-height: 56px; font-size: 1.0625rem; } } } /* --- Enlaces de texto de las tarjetas de sede ---------------------------- El «Ver la sede →» va en magenta; el filo de resalte se queda celeste. Los dos colores siguen diciendo cosas distintas: el celeste marca la tarjeta, el magenta marca la salida a la ficha. 🔴 Hacen falta DOS reglas y no una. La sección de sedes vive dentro de `section.oscura`, y el tema claro trae `:root[data-tema="claro"] .oscura .btn-texto` con especificidad (0,4,0). Una regla de (0,2,0) pierde contra ella y sobre claro el enlace se quedaba celeste. La segunda empata en especificidad y gana por orden, que es el motivo de que este bloque esté al final de la hoja. */ .sede-card .btn-texto { color: var(--enlace-magenta); } :root[data-tema="claro"] .sede-card .btn-texto { color: var(--enlace-magenta); } @media (hover: hover) and (pointer: fine) { .sede-card .btn-texto:hover { color: var(--enlace-magenta); text-decoration: underline; } } /* --- «Sede más cercana» cuando vive en el héroe (solo teléfono) ---------- El JS mueve este bloque bajo la foto de los gemelos por debajo de 980 px. Ahí no está en una cabecera centrada sino en el héroe, así que hereda su alineación a la izquierda y un botón de ancho automático se queda flotando. A ancho completo se lee como lo que es: la siguiente acción del héroe. El selector es `> .sedes-cerca` y no `.sedes-cerca` a secas para que solo aplique cuando de verdad ha sido movido. */ @media (max-width: 979px) { .heroe-rejilla > .sedes-cerca { margin-top: 1.5rem; } .heroe-rejilla > .sedes-cerca .btn { width: 100%; } .heroe-rejilla > .sedes-cerca .sedes-cerca-aviso, .heroe-rejilla > .sedes-cerca .sedes-cerca-nota { text-align: left; } } /* --- La ficha de resultado ---------------------------------------------- Aparece bajo el botón con la sede ganadora, en vez de arrastrar la página hasta las tarjetas. Solo se enseña cuando el botón está lejos de ellas (el teléfono, donde el bloque sube al héroe); en escritorio están debajo. */ /* La ficha del resultado lleva el MISMO filo magenta que la tarjeta marcada, y por una razón práctica: en el teléfono es lo primero —y muchas veces lo único— que se ve al pulsar el botón. El riel de tarjetas queda pantallas más abajo, así que si el filo viviera sólo allí, en un móvil el resalte no existiría. Aquí no hace falta condición: esta ficha sólo aparece con la sede ganadora dentro. Lleva el halo pero no `--sombra-media`: va pegada bajo el botón, en un hueco estrecho, y una sombra de 60 px ahí se lee como suciedad y no como relieve. */ .cerca-ficha { margin-top: 1rem; padding: 1.125rem 1.25rem 1.25rem; border: 1px solid var(--filo-cercana); border-radius: var(--r-l); box-shadow: var(--brillo-magenta); background: var(--superficie); text-align: left; } .cerca-ficha[hidden] { display: none; } @supports (backdrop-filter: blur(1px)) { .cerca-ficha { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } } /* La misma píldora que la insignia de la tarjeta, y por eso el mismo relleno: las dos dicen «La más cercana» y las dos pueden estar en pantalla a la vez —ésta bajo el botón, aquélla sobre la foto de la tarjeta de más abajo—. Dos aspectos para la misma frase se leen como dos cosas distintas. */ .cerca-ficha-etiqueta { display: inline-flex; padding: .375rem .75rem; border-radius: 999px; background: var(--magenta); border: 0; font-size: .75rem; font-weight: 700; color: #fff; } .cerca-ficha-nombre { margin-top: .75rem; font-size: 1.1875rem; font-weight: 700; line-height: 1.24; letter-spacing: -0.015em; color: var(--tinta); } .cerca-ficha-dist { margin-top: .375rem; font-size: .9375rem; font-weight: 500; color: var(--enlace-magenta); } .cerca-ficha-dir { margin-top: .5rem; font-size: .9375rem; line-height: 1.5; color: var(--suave); } .cerca-ficha-acciones { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.125rem; } .cerca-ficha-acciones .btn { flex: 1 1 auto; padding: .75rem 1.25rem; font-size: .9375rem; } /* --- Foto de la ficha de resultado --------------------------------------- */ .cerca-ficha-foto { aspect-ratio: 1.618; border-radius: var(--r-m); background: var(--letrero); overflow: hidden; margin-bottom: 1rem; } .cerca-ficha-foto:empty { display: none; } /* sin foto no deja una franja de color */ .cerca-ficha-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- Riel de las otras sedes --------------------------------------------- Mismo patrón que los rieles de la home: sangrado negativo para que la siguiente asome por el borde —que es lo que le dice al dedo que hay más—, scroll-snap y la barra oculta. Con dos elementos podría ser una fila normal, pero el riel es lo que ya conoce quien usa este sitio en el teléfono, y así sigue funcionando si algún día son cuatro sedes. */ .cerca-otras { margin-top: 1.5rem; } .cerca-otras[hidden] { display: none; } .cerca-otras-titulo { font-size: var(--t-mini); font-weight: 700; letter-spacing: .01em; color: var(--suave); margin-bottom: .75rem; } .cerca-riel { display: flex; gap: .75rem; list-style: none; margin: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0; padding: 0 0 .5rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .cerca-riel::-webkit-scrollbar { display: none; } .cerca-riel > li { flex: 0 0 58%; max-width: 220px; scroll-snap-align: start; } .cerca-mini-enlace { display: block; text-decoration: none; color: inherit; border: 1px solid var(--borde); border-radius: var(--r-m); background: var(--velo); padding: .5rem .5rem .75rem; transition: border-color 220ms ease; } .cerca-mini-foto { display: block; aspect-ratio: 1.618; border-radius: var(--r-s); background: var(--letrero); overflow: hidden; margin-bottom: .625rem; } .cerca-mini-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .cerca-mini-nombre { display: block; font-size: .875rem; font-weight: 700; line-height: 1.3; color: var(--tinta); padding-inline: .25rem; } .cerca-mini-dist { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--suave); padding-inline: .25rem; } @media (hover: hover) and (pointer: fine) { .cerca-mini-enlace:hover { border-color: rgba(0, 159, 227, .45); } } /* === EL SELECTOR DE SEDE (/agendar) ====================================== Esta es la página que cierra la venta, y su único trabajo es que alguien elija una de tres sedes. La versión anterior daba nombre y dirección y ya: con eso no se puede decidir, así que la decisión se iba a /sedes o se perdía. Aquí cada tarjeta trae lo que de verdad decide —si está ABIERTA AHORA, qué nota tiene en Google y a qué distancia queda— y termina en un botón sólido, no en un enlace de texto. Ya no es la tarjeta entera la que enlaza. Con tres datos y dos acciones dentro (agendar y ver la sede), un contenedor pulsable se come los clics de lo que lleva dentro y deja al teclado un solo destino para dos caminos. El blanco grande de antes lo da ahora el botón, que ocupa el ancho completo. */ .elige { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; /* `auto-fit` y no tres columnas fijas: si algún día hay una cuarta sede, entra sola y sin tocar la hoja. */ grid-template-columns: repeat(auto-fit, minmax(18.5rem, 1fr)); } .elige-item { display: flex; } .elige-sede { position: relative; display: flex; flex-direction: column; gap: .5rem; width: 100%; padding: 1.5rem 1.5rem 1.375rem; border: 1px solid var(--borde); border-radius: var(--r-l); background: var(--superficie); transition: transform 400ms var(--sal), border-color 300ms ease, box-shadow 400ms var(--sal); } @supports (backdrop-filter: blur(1px)) { .elige-sede { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } } /* --- El estado de HOY ---------------------------------------------------- Lo pinta el JS con la hora de Bogotá y el horario verificado de cada sede. Nace `hidden`: sin JS no aparece una pastilla vacía, y el horario semanal de más abajo —que está escrito en el HTML— sigue diciendo lo mismo. Tres estados y tres colores, y ninguno es un semáforo de marca: el cian es el celeste de la casa, el apagado es el gris de texto secundario y el festivo va en magenta porque es el único que pide hacer algo (escribir). El color NUNCA va solo: cada estado dice su palabra (Abierto ahora, Cerrado ahora, Hoy es festivo), que es lo que lee quien no los separa. */ .elige-estado { align-self: flex-start; display: inline-flex; align-items: center; gap: .4375rem; margin-bottom: .125rem; padding: .3125rem .6875rem .3125rem .5625rem; border: 1px solid var(--borde); border-radius: 999px; font-size: .8125rem; font-weight: 600; line-height: 1.3; color: var(--tinta); } .elige-estado::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } /* Abierto: el celeste de marca. Como FONDO del punto y como letra a 13 px en 600, que sobre el vidrio oscuro da 6,1:1 con `--cian-claro` (el mismo token que usan los enlaces, justamente porque el cian plano no llega en claro). */ .elige-estado[data-estado="abierto"] { border-color: rgba(0, 159, 227, .38); background: rgba(0, 159, 227, .10); } .elige-estado[data-estado="abierto"]::before { background: var(--cian); } /* El punto del abierto respira. Es lo único que se mueve en la tarjeta en reposo, y significa algo: esto se está mirando ahora mismo. */ @media (prefers-reduced-motion: no-preference) { .elige-estado[data-estado="abierto"]::before { animation: elige-latido 2.4s ease-in-out infinite; } } @keyframes elige-latido { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 159, 227, .55); } 50% { opacity: .85; box-shadow: 0 0 0 4px rgba(0, 159, 227, 0); } } .elige-estado[data-estado="cerrado"] { color: var(--suave); } .elige-estado[data-estado="cerrado"]::before { background: currentColor; opacity: .5; } .elige-estado[data-estado="festivo"] { border-color: rgba(230, 0, 126, .34); background: rgba(230, 0, 126, .09); } .elige-estado[data-estado="festivo"]::before { background: var(--magenta); } .elige-nombre { font-size: 1.1875rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; color: var(--tinta); margin: 0; } .elige-dir { font-style: normal; font-size: .9375rem; line-height: 1.5; color: var(--suave); min-height: 2.8125rem; /* dos líneas: la más larga de las tres sedes */ } @media (max-width: 979px) { .elige-dir { min-height: 0; } } /* La distancia solo existe después de pulsar el botón de ubicación, así que nace oculta: sin permiso o sin JS la tarjeta se lee entera igual. */ .elige-dist { font-size: .875rem; font-weight: 600; color: var(--enlace-magenta); } /* Los dos datos duros, en una lista de definición de verdad: son pares etiqueta/valor, no párrafos con dos puntos. */ .elige-datos { margin: .75rem 0 0; padding-top: .875rem; border-top: 1px solid var(--borde); display: grid; gap: .625rem; font-size: .875rem; } .elige-datos > div { display: grid; grid-template-columns: 5.75rem 1fr; gap: .75rem; align-items: baseline; } .elige-datos dt { color: var(--suave); } .elige-datos dd { margin: 0; color: var(--texto); line-height: 1.45; } .elige-nota-g { font-weight: 700; color: var(--tinta); } /* La estrella es decorativa (`aria-hidden`): la nota ya está escrita al lado en número, que es lo que se anuncia. Va del color de la nota y NO del celeste de marca: a 14 px sobre el tema claro el celeste da 2,95:1, y una estrella que no se distingue del fondo no adorna nada. El acento de marca de esta tarjeta ya lo ponen el punto de la pastilla y el botón. */ .elige-estrella { color: var(--tinta); } /* `margin-top:auto` empuja el bloque al fondo para que las tres tarjetas alineen sus botones aunque las direcciones ocupen una, dos o tres líneas. */ .elige-acciones { margin-top: auto; padding-top: 1.125rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; } /* El botón ocupa el ancho entero de la tarjeta. Es la acción de la página: no compite con nada dentro de su caja, y en el teléfono da un blanco de 52 px de alto por todo lo ancho, que es el gesto más fácil que hay. */ .elige-cta { width: 100%; min-height: 52px; } @media (hover: hover) and (pointer: fine) { .elige-sede:hover { transform: translateY(-6px); border-color: rgba(0, 159, 227, .45); box-shadow: var(--sombra-media), var(--brillo-cian); } } /* El realce también con el teclado: `:focus-within` y no `:focus`, porque quien tabula entra en el BOTÓN, no en la tarjeta. Sin `transform`: mover la caja bajo un foco que acaba de aterrizar desorienta más de lo que ayuda. */ .elige-sede:focus-within { border-color: rgba(0, 159, 227, .45); box-shadow: var(--sombra-media), var(--brillo-cian); } /* --- La más cercana ------------------------------------------------------ Mismo trato que en la home: filo magenta y el HAZ giratorio. La regla del haz vive en el bloque de `.sede-card[data-cercana]`; aquí solo se añade este selector a esa lista. Lo que se marca es una sola tarjeta, y la marca la pide el propio usuario al pulsar: por eso no es decoración. */ .elige-sede[data-cercana] { border-color: var(--filo-cercana); box-shadow: var(--sombra-media), var(--brillo-magenta); } /* --- El botón de ubicación, en la portada -------------------------------- El botón y las tarjetas son la misma conversación, así que el aire de sección que hay entre la portada y lo que sigue sobra aquí: eran 150 px entre la pregunta y las tres respuestas. */ body[data-pagina="agendar"] .cabecera-pagina { padding-bottom: 1.5rem; } body[data-pagina="agendar"] [data-elige] { padding-top: 0; } .elige-cerca { margin-top: 1.75rem; } .elige-cerca-aviso { margin-top: .75rem; font-size: var(--t-menor); color: var(--suave); min-height: 1.4em; /* reserva su línea: sin esto la lista salta al responder */ } /* --- La tarifa y la nota al pie ------------------------------------------ */ .elige-tarifa { margin-top: 1.5rem; font-size: var(--t-menor); line-height: 1.6; color: var(--texto); } .elige-tarifa strong { color: var(--tinta); font-weight: 700; } .elige-tarifa .btn-texto { margin-left: .25rem; } /* 🔴 El hueco antes de la flecha. En el teléfono `.btn-texto` pasa a `inline-flex` para llegar a los 44 px de objetivo táctil, y un contenedor flex se come el nodo de espacio que hay en el HTML: salía «Ver la sede→». Es la misma trampa que ya está anotada arriba en `.resenas-todas`, y se arregla igual, con `gap`. Va calificado a este componente a propósito: `.btn-texto` a secas lo arreglaría también en la home y en las tarjetas de sede, que es otra capa y no toca hoy. */ .elige-acciones .btn-texto, .elige-tarifa .btn-texto { gap: .375rem; } .elige-pie-nota { margin-top: .875rem; font-size: .8125rem; line-height: 1.55; color: var(--suave); } /* --- Ten esto a mano ----------------------------------------------------- Cuatro fichas abiertas donde antes había cuatro pestañas cerradas. Es lo que evita que alguien abandone el formulario a mitad, así que esconderlo detrás de un clic era esconder justo lo útil. Sin tarjeta y sin vidrio: un número y una raya bastan, y así no compite con el selector de arriba, que es lo único de esta página que tiene que parecer pulsable. */ .amano, .razones, .oficios { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem 2.5rem; counter-reset: amano; } .amano-item, .razones-item, .oficios-item { counter-increment: amano; padding-top: 1rem; border-top: 1px solid var(--borde); } .amano-item::before { content: counter(amano); display: block; font-size: .875rem; font-weight: 700; letter-spacing: .02em; color: var(--cian-claro); margin-bottom: .5rem; } .amano-titulo, .razones-titulo, .oficios-titulo { font-size: 1.0625rem; font-weight: 700; color: var(--tinta); /* `em` y no `rem`: el título sube a 18 px por encima de 760, y el hueco tiene que subir con él. A 6 px fijos el párrafo se leía como la segunda línea del título en vez de como su explicación. */ margin-bottom: .5em; } .amano-item p, .razones-item p, .oficios-item p { color: var(--texto); font-size: var(--t-menor); line-height: 1.6; } @media (min-width: 760px) { .amano { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .amano { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } } /* --- Tres pasos, no cuatro ---------------------------------------------- `.pasos` reparte en cuatro columnas a partir de 720 px. Con tres hijos eso deja una celda vacía a la derecha y la fila se lee descuadrada. */ @media (min-width: 720px) { .pasos-3 { grid-template-columns: repeat(3, 1fr); } } /* --- La barra de acción de /agendar -------------------------------------- La barra general (`.barra-movil`) está apagada en esta página desde que se quitó el formulario falso, y con razón: llevaba a /agendar, que es donde ya estás. Pero apagarla dejó el teléfono sin ninguna acción a la vista en cuanto el selector se iba por arriba — tres pantallas leyendo, sin sitio donde pulsar. Esta es la misma barra con otro destino: lleva a la SEDE, no a la página. Nace oculta (`hidden` en el HTML) y la enciende el JS solo cuando el selector ya no se ve, así que nunca duplica un botón que esté en pantalla. Y cuando el usuario ha pedido la sede más cercana, la barra pasa a ser el botón de ESA sede, con su nombre escrito. */ .barra-elige { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barra); gap: .625rem; padding: .625rem var(--canal); padding-bottom: calc(.625rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--borde); background: var(--nav-vidrio-fijo); /* Entra desde abajo. `transform` y nada más: es lo único que se puede animar sin que el navegador vuelva a maquetar la página en cada fotograma. */ transform: translateY(120%); } @supports (backdrop-filter: blur(1px)) { .barra-elige { backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } } .barra-elige[data-ver] { transform: translateY(0); } .barra-elige-cta { flex: 1; min-height: 52px; padding: .875rem 1rem; /* menos que el 1.875rem de un botón normal: aquí el ancho es el recurso escaso */ font-size: 1.0625rem; /* El nombre de la sede puede ser largo (Terminal de Transportes El Salitre) y la barra no puede crecer ni partir en dos líneas: se recorta. */ white-space: nowrap; overflow: hidden; } .barra-elige-cta > span:first-child { overflow: hidden; text-overflow: ellipsis; } @media (max-width: 979px) { .barra-elige { display: flex; } /* Que la barra no se coma el final del pie. La regla general de `.pie` la anula `body[data-pagina="agendar"]`, que la puso a cero al apagar la barra de siempre; hay que devolverla aquí. */ body[data-pagina="agendar"] .pie { padding-bottom: calc(2.5rem + 76px + env(safe-area-inset-bottom)); } } /* Se aparta mientras el menú está abierto, igual que la barra general: la hoja lleva su propio botón de cierre y esta barra se lo taparía. */ body:has(.nav-hoja[data-abierta="si"]) .barra-elige { transform: translateY(120%); } @media (prefers-reduced-motion: no-preference) { .barra-elige { transition: transform 320ms var(--sal); } } /* --- El correo del pie no puede ensanchar la página ---------------------- `contacto@reconocerips.com` es una sola palabra de 194 px sin ningún sitio por donde partirla. Por debajo de 340 px de pantalla no cabe en su columna y estiraba el DOCUMENTO 9 px, que en iOS es suficiente para poder arrastrar la página de lado. Hace falta `anywhere` y no `break-word`: solo `anywhere` reduce el ancho MÍNIMO que el elemento le pide a su columna, que es justo lo que aquí sobra. `break-word` parte la palabra pero sigue reservando el hueco. Va sobre los enlaces del pie y no sobre todo el sitio: partir palabras por cualquier sitio es feo, y solo se gana algo donde de verdad hay cadenas sin espacios. */ .pie li a { overflow-wrap: anywhere; } /* 🔴 El carrusel solo existe donde el JS lo ENCIENDE, y esa marca no depende del ancho. Antes se apagaba con `min-width: 980px`, y eso trata como teléfono a cualquier ventana de PC más estrecha de 980 px: en un portátil con la ventana a media pantalla las fotos rotaban. El JS pone `data-vivo` solo si además el puntero es grueso, o sea pantalla táctil. Sin la marca —escritorio, ventana estrecha, o JS caído— solo se ve la diapositiva activa, que de fábrica es la de los gemelos. Falla del lado seguro: lo que no se enciende, no se mueve. Todo el estilo del carrusel vive dentro de `@media (max-width: 979px)`, así que estas dos reglas van FUERA de cualquier consulta de medios; si no, arriba de 980 las diapositivas extra se apilaban como bloques sueltos. */ [data-carrusel]:not([data-vivo]) .heroe-diapo:not([data-activa]) { display: none; } [data-carrusel]:not([data-vivo]) .heroe-puntos { display: none; } /* --- El héroe del teléfono cambia de foto -------------------------------- Solo en teléfono. En escritorio la figura es el recorte de los gemelos integrado en el héroe, y ahí una foto rotando pelearía con el titular. Las diapositivas van APILADAS en absoluto y el marco lleva su propia `aspect-ratio`. Si la primera se quedara en el flujo dando la altura, al desvanecerla se vería el fondo del marco por debajo; y en cuanto hubiera tres fotos habría que reescribirlo. Así el alto no depende de ninguna. */ @media (max-width: 979px) { /* 🔴 16/9 y no 3/2. La pieza de portada del telefono es una composicion 16:9 CON su titular impreso; en un hueco de 3/2 el `object-fit: cover` recortaba por los lados y se comia justo la franja del texto. Las fotos de sede que rotan detras son 16:9 dos de ellas y 3:2 la otra, asi que la que pierde algo de alto es una sola, y por arriba, donde solo hay cielo. */ .heroe-gemelos-int { aspect-ratio: 16 / 9; } /* 🔴 Un fundido cruzado normal —una baja mientras la otra sube— tiene un punto medio en el que las dos están al 50% y se ven SUPERPUESTAS. Ese instante turbio es lo que hace que parezca apresurado: el ojo ve una mezcla sucia y la lee como un salto, por lento que vaya. Aquí la que entra se funde ENCIMA de la que sale, y la que sale se queda opaca por debajo hasta que la nueva la ha tapado del todo. En ningún momento hay dos imágenes traslúcidas a la vez: se ve una fotografía revelándose sobre otra. Por eso puede ir más rápido sin parecer brusco. Requiere tres estados y no dos: la que entra (arriba, fundiéndose), la que sale (debajo, opaca, SIN transición) y el resto (invisibles). */ .heroe-diapo { position: absolute; inset: 0; opacity: 0; z-index: 0; transition: opacity 620ms cubic-bezier(.33, 0, .2, 1); } .heroe-diapo[data-activa] { opacity: 1; z-index: 2; } /* Sin transición: tiene que estar opaca YA, o vuelve el punto turbio. */ .heroe-diapo[data-saliendo] { opacity: 1; z-index: 1; transition: none; } /* 🔴 El TAMBIEN tiene que llenar la diapositiva. Es un envoltorio invisible que se cuela entre `.heroe-diapo` y la , y nadie lo dimensionaba: quedaba en alto automatico, asi que el `height: 100%` de la imagen no tenia contra que resolverse y caia en tamano intrinseco. Medido: la diapositiva 350x197 y la imagen 350x233 dentro. Con `cover`, esos 36 px de mas la agrandan y le comen 32 px por CADA LADO — justo la franja donde va el titular impreso de la pieza de portada. Se veia como «la imagen sale recortada» y parecia cosa del recorte o del zoom; no era ni lo uno ni lo otro. */ .heroe-diapo picture { display: block; width: 100%; height: 100%; } .heroe-diapo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* La curva se eligió midiendo, no a ojo. Con una desaceleración fuerte —`cubic-bezier(.22,.6,.3,1)`— el 62% del recorrido ocurría en el primer cuarto de tiempo y el último cuarto era un 2%: un tirón al principio y luego una foto quieta. Repartido por cuartos: .22,.6,.3,1 62% 27% 9% 2% ← tirón y parón .4,.12,.45,1 21% 44% 28% 7% .5,.2,.5,.9 17% 36% 34% 13% ← esta linear 25% 25% 25% 25% ← se mueve, pero sin carácter Arranca despacio mientras la foto se está revelando, se ve moverse todo el rato, y afloja al final para posarse. */ .heroe-diapo[data-activa] img { animation: heroe-posarse 4220ms cubic-bezier(.5, .2, .5, .9) forwards; } /* 🔴 La PRIMERA diapositiva no se posa: se queda quieta. Ese `scale(1.062)` es un acercamiento del 6,2% y recorta un 3% por cada lado. En una fotografia no se nota; en esta pieza SI, porque lleva el titular impreso cerca del borde y el zoom se lo come. Cualquier zoom, por pequeno que sea, se come texto pegado al margen. Las fotos de sede que vienen despues lo conservan: ahi no hay texto que proteger y el gesto es lo que hace que la foto se sienta viva. */ .heroe-diapo:first-child img { animation: none; transform: none; } @keyframes heroe-posarse { from { transform: scale(1.062) translate(-0.9%, 0.55%); } to { transform: scale(1) translate(0, 0); } } /* Los puntos. Van sobre la foto, dentro de una pastilla oscura: encima de una foto cualquiera, un punto blanco suelto puede caer sobre una zona clara y desaparecer. La pastilla le garantiza el fondo. z-index 3 porque el filo degradado del marco es 2. */ .heroe-puntos { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: .75rem; display: flex; gap: .1875rem; align-items: center; padding: .25rem .3125rem; border-radius: 999px; /* El azul del manual (#19255a) en vez de un gris neutro: la pastilla deja de parecer un control del navegador y pasa a ser de la marca. El filo claro la despega de las fotos con zonas oscuras. 🔴 La opacidad es 0,88 y no 0,6 por una razón medida. La pastilla se compone con lo que tenga detrás, y detrás va una foto que cambia. Sobre una foto media el punto celeste daba 3,17:1 —justo—, pero sobre una zona CLARA caía a 1,46:1 y el punto activo desaparecía. A 0,88 el peor caso sube a 3,4:1. Es lo que tiene poner un control encima de contenido que no controlas: hay que medir contra el fondo más desfavorable, no contra el que se ve ahora. */ background: rgba(25, 37, 90, .88); border: 1px solid rgba(255, 255, 255, .16); } @supports (backdrop-filter: blur(1px)) { .heroe-puntos { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } } /* El punto se ve de 8 px pero el botón mide 24: por debajo de eso el dedo falla. El área de toque no tiene por qué ser lo que se ve. */ .heroe-punto { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; } .heroe-punto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .5); transition: background-color 300ms ease, width 300ms var(--sal); } /* 🔴 `#ff4da6` y NO el `#e6007e` del manual, y no es un capricho: sobre la pastilla azul el magenta del manual da 2,84:1 con una foto media y 2,28:1 con una foto clara. El mínimo de un control es 3:1. Ni subiendo la pastilla al 94% llega. `#ff4da6` da 4,18 / 3,35 y es el mismo magenta que el sitio ya usa sobre oscuro —los «Ver la sede →» y el final del degradado del titular—, así que no entra un color nuevo. Va escrito y no como `var(--enlace-magenta)` a propósito: ese token cambia a #d4007a en tema claro, y esta pastilla es azul oscuro en los DOS temas. Un color fijo sobre un fondo fijo no puede depender del tema. El activo se distingue por color Y por forma (alargado), no solo por brillo: quien no separa bien los tonos lo ve igual. */ .heroe-punto[aria-current="true"]::before { background: #ff4da6; width: 18px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(255, 77, 166, .3); } .heroe-punto:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 999px; } } /* Quien pide menos movimiento se queda con la primera foto y nada se mueve: ni el cambio ni el acercamiento. El JS tampoco arranca el reloj. */ @media (prefers-reduced-motion: reduce) { .heroe-diapo { transition: none; } .heroe-diapo[data-activa] img { animation: none; } } /* 🔴 El halo de la foto del local ARRASTRABA LA PÁGINA sobre el tema claro. Sobre claro el halo necesita otra geometría y se ensancha a `-9%` por los lados (ver el bloque de `.foto-sede::before`). En un teléfono de 390 px eso son 31 px de caja fuera del canal por la derecha, y el DOCUMENTO pasaba a medir 402: la barra fija se quedaba quieta y todo lo demás se corría con el dedo. Medido: 402 sobre claro, 390 sobre oscuro, donde el inset es `-5%`. Es el mismo fallo que ya se documentó en `.heroe-rejilla::before`, y se arregla igual que allí: recortando en X la sección que lo contiene, no la geometría del halo. El `blur(70px)` sigue derramando el color hasta el borde de la pantalla, así que se ve exactamente igual; lo que se acaba es el desbordamiento de la CAJA, que es lo que el navegador mide. */ section:has(.foto-sede) { overflow-x: clip; } /* === PÁGINA DE SEDE ====================================================== Tres páginas que existen para una sola cosa: que quien ya sabe a cuál va, agende ahí. La versión anterior no lo cumplía, y no por diseño: **dos de las tres llamadas «Agendar en esta sede» apuntaban a `/agendar` a secas**, o sea al selector, a que volvieras a elegir la sede en la que ya estabas. Lo mismo hacía la barra del teléfono. Solo el botón enterrado dentro de «Los datos» llevaba de verdad a la agenda de esa sede. Corregido eso, el resto es hacer que la página se lea en el orden en que se decide: qué sede es y si está abierta → por qué esta y no otra → qué dice la gente → los datos duros → y, si no te sirve, las otras dos. */ /* --- La línea de estado del héroe --------------------------------------- Va entre la entradilla y los botones, y es lo que la primera pantalla no tenía: si está abierta AHORA y qué nota tiene. Dos datos, en una línea, sin caja: un bloque de cifras en el héroe convierte una página de sede en una ficha de producto. */ .sede-estado { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .625rem 1rem; margin-top: 1.5rem; } .sede-estado-nota { display: inline-flex; align-items: baseline; gap: .375rem; font-size: .9375rem; color: var(--suave); } .sede-estado-nota strong { font-size: 1.0625rem; font-weight: 700; color: var(--tinta); } /* La estrella va del color de la nota y no del celeste de marca: a 15 px el celeste da 2,95:1 sobre el tema claro. Misma razón que en /agendar. */ .sede-estado-nota .elige-estrella { color: var(--tinta); } /* --- Por qué esta sede --------------------------------------------------- Sube de la penúltima sección a justo debajo de la foto: es el argumento de la página, no un apéndice. Y deja de ser tres `.aviso` grises en columna —un componente pensado para advertencias— para ser tres fichas en fila. Comparte declaraciones con `.amano` de /agendar en vez de copiarlas: es la misma idea (raya arriba, título, texto, sin tarjeta) y tiene que verse igual. Lo único que cambia es que aquí NO van numeradas: tres razones no son una secuencia, y numerarlas insinúa un orden que no existe. */ .razones { list-style: none; margin: 0; padding: 0; } @media (min-width: 760px) { .razones { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } } /* --- La ficha de datos --------------------------------------------------- El horario deja de ser texto muerto: lleva la misma pastilla en vivo que el selector, que es el único dato de esta página que cambia durante el día. */ .datos .elige-estado { display: flex; width: fit-content; /* su propia línea: pegada a «Domingos, cerrado» se leía como lo contrario */ margin: .75rem 0 0; } /* WhatsApp y teléfono salían dentro de la lista de datos, en la columna de la derecha y en letra de dato. Son ACCIONES: una llama y el otro abre un chat. Salen de la `
` y se ponen donde se ponen las acciones. */ .datos-contacto { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: .875rem; } /* Los dos de contacto SÍ son menores que el de agendar, y a propósito: son el plan B. Antes pasaba al revés —el primario iba debajo y con menos relleno que ellos—, y la acción de la página parecía la tercera opción. */ .datos-contacto .btn { padding: .6875rem 1.125rem; font-size: var(--t-menor); min-height: 44px; /* el mínimo táctil; con el relleno solo daba 42 */ } /* La tarifa, en una línea y no en una sección: quien llega a una sede desde Google quiere confirmarla, no comparar. El mismo trato que en /agendar. */ /* Cruza las dos columnas de la ficha, no vive dentro de una. Ver la nota del HTML: es una confirmación de precio y en una columna de 600 px partía en dos líneas lo que a lo ancho cabe en una. */ .sede-tarifa { margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-top: 1.25rem; border-top: 1px solid var(--borde); font-size: var(--t-menor); line-height: 1.6; color: var(--texto); } /* Mismo arreglo que en `.elige-tarifa`: en el teléfono `.btn-texto` pasa a `inline-flex` y se come el espacio antes de la flecha. */ .sede-tarifa .btn-texto { gap: .375rem; margin-left: .25rem; } .sede-tarifa strong { color: var(--tinta); font-weight: 700; } /* --- Cómo llegar --------------------------------------------------------- Tres párrafos seguidos sin más jerarquía que un h3. Pasan a fichas con la misma raya que las razones, para que se vean como una lista de opciones —que es lo que son— y no como un texto corrido. */ .llegar { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; } .llegar-item { padding-top: .875rem; border-top: 1px solid var(--borde); } .llegar-titulo { font-size: 1rem; font-weight: 700; color: var(--tinta); margin-bottom: .5em; } .llegar-item p { color: var(--texto); font-size: var(--t-menor); line-height: 1.6; } .llegar-accion { margin-top: 1.25rem; } .llegar-accion .btn { padding: .75rem 1.25rem; font-size: var(--t-menor); } /* --- Las otras dos sedes ------------------------------------------------- Si ésta no te sirve, la salida no puede ser un «Ver las otras sedes» al final del todo: son dos tarjetas con su horario en vivo y su botón, las mismas del selector de /agendar. Mismo componente, misma información y el mismo motor de estado — aquí solo hay dos, y `auto-fit` las reparte. */ .otras-sedes { max-width: 52rem; margin-inline: auto; } /* Las dos sedes hermanas, en riel en el teléfono. Entran en el patrón de la casa (`.sedes-tarjetas`, `.valoraciones`, `.guias`, `.resenas-lista`), pero NO pueden ir en aquel bloque: está 470 líneas más arriba y `.elige { display: grid }` pesa lo mismo (0,1,0), así que le gana por orden y el riel se escribía sin aplicarse. Tiene que vivir DESPUÉS del componente que pisa. 🔴 Aquí sí y en /agendar no, y la diferencia es de fondo: allí las tres tarjetas SON la decisión, y meter dos detrás de un gesto es esconder dos tercios de las opciones. Aquí son la salida para quien ya vio que ésta no le sirve, y apiladas costaban media pantalla de una página que ya es larga. */ @media (max-width: 979px) { .otras-sedes { display: flex; grid-template-columns: none; gap: .875rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--canal); padding-inline: var(--canal); /* El sangrado negativo hace que la segunda tarjeta asome por el borde: es lo que le dice al dedo que hay más. */ margin-inline: calc(var(--canal) * -1); max-width: none; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .otras-sedes::-webkit-scrollbar { display: none; } .otras-sedes > * { flex: 0 0 84%; max-width: 320px; scroll-snap-align: center; } /* En un riel el hover no existe, y `.elige-sede` levanta 6 px al señalarlo: con el dedo se dispara al rozar y la tarjeta salta mientras desplazas. Misma corrección que ya lleva `.sede-card` en el bloque de rieles. */ .otras-sedes .elige-sede { transform: none; } } /* === RITMO DE LAS PÁGINAS REDISEÑADAS (18-09-2026) ====================== Medido con `ritmo.js`, no mirado. Dos cosas salieron de ahí. */ /* --- La foto de sede va CON el héroe ------------------------------------- Vive en su propia `
`, así que entre los botones del héroe y la foto había 48 px del héroe + 96 px de la sección = **144 px**, y la foto se leía como un bloque suelto en vez de como la imagen de esa portada. Debajo sí se queda el aire completo, que es donde de verdad empieza otra cosa. */ body[data-pagina^="sede-"] .cabecera-pagina + .seccion-corta { padding-top: 0; } /* --- La costura entre la foto y lo que sigue ----------------------------- Éste es el hueco que se ve en la página: **96 px del final de la foto + 128 del principio de la sección siguiente = 224 px** de fondo vacío antes de «Por qué la gente elige esta sede». Con el titular centrado encima, la pantalla entera se lee como un descanso. Es la ÚNICA costura de estas páginas en la que el fondo no cambia. En las otras tres lo hace —entra o sale una banda `.niebla` o `.oscura`— y ahí el aire no sobra: es el respiro de la banda, y recortarlo la deja apretada. 🔴 La primera versión de esta regla no hacía NADA: decía `.seccion:not(.niebla) + .seccion:not(.niebla)`, y la sección de la foto no es `.seccion` sino `.seccion-corta`. Lo delató medirla, no leerla. Por eso va nombrando las dos clases y cada una con SU token, que no valen lo mismo (`--seccion-corta` es 6rem y `--seccion` 8). */ body[data-pagina^="sede-"] .seccion-corta:has(+ .seccion:not(.niebla):not(.oscura)) { padding-bottom: calc(var(--seccion-corta) * .55); } body[data-pagina^="sede-"] .seccion-corta + .seccion:not(.niebla):not(.oscura) { padding-top: calc(var(--seccion) * .55); } /* --- Las fichas de tres columnas, con presencia -------------------------- `.razones` ocupaba 116 px dentro de una sección de 586: el 80 % de la caja era aire, y el bloque —titular de 17 px y texto de 15— se leía como una nota al pie de un titular de 56. No se arregla quitando aire, se arregla dándole cuerpo al texto, que además es el que lleva el argumento. `--t-cuerpo` y no `--t-menor`: en tres columnas de 373 px, 15 px se queda corto y la línea sale de 60 caracteres, por debajo del mínimo cómodo. */ @media (min-width: 760px) { .razones-titulo, .amano-titulo, .oficios-titulo { font-size: 1.125rem; } .razones-item p, .amano-item p, .oficios-item p { font-size: var(--t-cuerpo); line-height: 1.65; } /* Y la raya respira: 1 rem entre el filo y el título dejaba el título colgando de la línea. */ .razones-item, .amano-item, .oficios-item { padding-top: 1.25rem; } } /* ============================================================================ /SEDES: LAS TRES, CON LO QUE DE VERDAD LAS DIFERENCIA La página tenía tres tarjetas con nombre, dirección y una frase, y debajo una tabla comparativa de cinco filas de las que TRES decían «Sí · Sí · Sí». O sea: la mitad de la página repetía que no hay ninguna diferencia, en la única página del sitio que existe para contarlas. Ahora el dato vive en la tarjeta —horario, parqueadero, TransMilenio y nota de Google, las mismas cuatro filas y en el mismo orden en las tres— y la tabla se fue. Tres tarjetas en fila con filas idénticas SON la comparación, con la ventaja de que cada columna termina en su propio botón. 🔴 Nada de esto toca `.sede-card`: la home y /contacto usan el mismo componente y son otra capa. Lo que cambia va colgado de `body[data-pagina="sedes"]`, que es (0,2,0) y gana sin subirle la especificidad a nadie, o son elementos nuevos que solo existen aquí. ========================================================================== */ /* El botón de ubicación y las tarjetas son la misma conversación: el aire de sección entre la portada y lo que sigue sobra, igual que en /agendar. */ body[data-pagina="sedes"] .cabecera-pagina { padding-bottom: 1.5rem; } body[data-pagina="sedes"] [data-elige] { padding-top: 0; } /* --- La tarjeta pasa a alinearse a la izquierda -------------------------- `.sede-card` centra su texto, y en la home está bien: allí es un cartel de tres líneas. Aquí lleva cuatro pares etiqueta/valor, y un par centrado no se puede leer en columna —el ojo pierde el punto de partida en cada fila—. Los botones siguen centrados: `.sede-card-acciones` es flex con `align-items: center` y no hereda esto. */ body[data-pagina="sedes"] .sede-card { text-align: left; } body[data-pagina="sedes"] .sede-card address { margin-top: .5rem; } /* --- Que las tres tarjetas lean como una tabla --------------------------- 🔴 Medido, no supuesto: «Autopista Norte 106» cabe en UNA línea y los otros dos nombres en dos, y la frase de Salitre ocupa tres líneas donde las otras ocupan dos. Resultado: la fila «Horario» empezaba 53 px más arriba en la tercera tarjeta que en las otras dos, y con ella las cuatro filas de datos. Eso no es un detalle estético: el argumento entero de esta página es que tres tarjetas con las MISMAS cuatro filas en el mismo orden son la tabla comparativa que se quitó. Si las filas no se alinean, no lo son. Se reserva el alto de las líneas que hacen falta, que es lo mismo que ya hace `.elige-dir` en /agendar. En `em` y multiplicando por el interlineado declarado aquí al lado: así el hueco sube solo si algún día sube la letra, en vez de quedarse en un número que nadie recuerda de dónde salió. Solo de 980 px para arriba: en el riel del teléfono las tarjetas van una detrás de otra y no hay ninguna fila que alinear —reservar alto ahí sería dejar huecos vacíos dentro de cada tarjeta. */ @media (min-width: 980px) { body[data-pagina="sedes"] .sede-card-cuerpo .h3 { line-height: 1.25; min-height: calc(2 * 1.25em); /* dos líneas de nombre */ } body[data-pagina="sedes"] .sede-card-ventaja { line-height: 1.55; min-height: calc(3 * 1.55em); /* tres líneas de argumento */ } /* La dirección más larga (la de Salitre, con módulo, locales y piso) cabe en dos líneas a partir de unos 1.200 px y pide tres por debajo. Se reserva lo que hace falta en cada tramo en vez de reservar siempre tres: una línea vacía en las tres tarjetas a 1.440 px es justo el aire muerto que esta pasada vino a quitar. La medida es del texto real, no del caso teórico. */ body[data-pagina="sedes"] .sede-card address { line-height: 1.5; min-height: calc(3 * 1.5em); } } @media (min-width: 1200px) { body[data-pagina="sedes"] .sede-card address { min-height: calc(2 * 1.5em); } } /* La pastilla de estado va ARRIBA del todo, antes del nombre: es el único dato de la tarjeta que cambia durante el día, y lo primero que se pregunta quien mira una sede a las 5 de la tarde. Nace `hidden`; lo destapa el JS. */ body[data-pagina="sedes"] .sede-card-cuerpo .elige-estado { margin-bottom: .75rem; } /* La frase que diferencia a esta sede de las otras dos. Perdió el `flex: 1` —ahora el que empuja los botones al fondo es el bloque de acciones— y ganó una raya debajo, que separa el argumento de los datos duros. */ body[data-pagina="sedes"] .sede-card-ventaja { flex: none; margin-top: 1rem; font-size: var(--t-menor); line-height: 1.55; } /* `margin-top: auto` en las acciones: las tres tarjetas alinean sus botones aunque la dirección ocupe una línea o tres. Antes lo hacía el `flex: 1` de la ventaja, que ya no lo tiene. */ body[data-pagina="sedes"] .sede-card-acciones { margin-top: auto; padding-top: 1.25rem; gap: .5rem; } body[data-pagina="sedes"] .sede-card-acciones .btn { width: 100%; min-height: 52px; } /* Los dos enlaces de texto van EN FILA, no apilados: son el mismo rango —ver la ficha completa y abrir el mapa— y uno debajo del otro parecían una escalera de tres acciones con el botón. */ .sede-card-secundarias { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; margin: 0; } /* Misma trampa anotada en `.elige-tarifa`: en el teléfono `.btn-texto` pasa a `inline-flex` para llegar a los 44 px de objetivo táctil y se come el nodo de espacio del HTML, así que salía «Cómo llegar→». Calificado a este componente: `.btn-texto` a secas lo arreglaría también en la home, que es otra capa. */ .sede-card-secundarias .btn-texto { gap: .375rem; } /* --- La zona, sobre la foto --------------------------------------------- Occidente, noroccidente y norte es el eje por el que de verdad se elige, y hasta hoy solo estaba dicho de pasada en la entradilla. Va sobre la foto y no en el cuerpo por lo mismo que la insignia de «la más cercana»: ahí no ocupa sitio en el flujo, así que no desalinea los titulares de la fila. Fondo SÓLIDO y no translúcido. Encima de una foto, un fondo translúcido deja el contraste del texto a merced de lo que haya debajo, y estas tres fotos no son ni del mismo sitio ni de la misma luz. Negro al 88 % contra blanco puro compone un gris de 44, y #fff sobre él da 10,5:1. Y NO es magenta: el magenta de esta hoja significa «ésta es la tuya» y lo pone el usuario al pedir la más cercana. Una etiqueta de zona es un rótulo de mapa, no un estado. */ .sede-card-zona { position: absolute; top: 1rem; left: 1rem; z-index: 1; display: inline-flex; align-items: center; margin: 0; padding: .375rem .8125rem; border-radius: 999px; background: rgba(10, 14, 20, .88); border: 1px solid rgba(255, 255, 255, .22); font-size: .8125rem; font-weight: 700; line-height: 1.3; color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); } /* --- La distancia --------------------------------------------------------- 🔴 Cambia de token, y es una corrección de contraste, no un retoque. `--resalte-magenta` (#e6007e) a 14 px y 500 da 3,99:1 sobre el vidrio oscuro y 4,46:1 en el claro: las dos por debajo del 4,5 que pide la norma para texto normal. `--enlace-magenta` existe justo para esto y es el que ya arregló `.elige-dist` en /agendar. Va calificado a esta página: la home y /contacto usan el mismo elemento y tienen el mismo fallo, pero son otra capa y se avisa aparte. */ body[data-pagina="sedes"] .sede-card-cerca { color: var(--enlace-magenta); font-weight: 600; } /* --- Las cuatro filas de datos ------------------------------------------- Se reusa `.elige-datos` tal cual, sin tocarlo: es el mismo objeto —pares etiqueta/valor con una raya encima— y tiene que verse igual que en /agendar y que en las fichas de sede. Lo único que cambia es que aquí va pegado al fondo de la tarjeta, así que se le quita el margen de arriba. */ body[data-pagina="sedes"] .elige-datos { margin-top: 1rem; } /* --- La banda de lo idéntico --------------------------------------------- Lo que queda de la tabla: sus tres filas de «Sí · Sí · Sí», dichas una sola vez. Sin tarjetas y sin vidrio a propósito —es una garantía, no una oferta— y con una marca de verificación en vez de un número, porque no es una secuencia. Mismo dibujo que las listas de `.celda`, para que una marca de «esto lo tienes» se vea igual en todo el sitio. */ .igual { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem 2.5rem; } .igual li { position: relative; padding-left: 2rem; font-size: var(--t-cuerpo); line-height: 1.55; color: var(--texto); } .igual li strong { color: var(--tinta); font-weight: 700; } /* El palito de la marca de verificación, dibujado con dos bordes y un giro. Es un adorno: lo que informa es el texto, y por eso no lleva ni `content` con texto ni papel accesible. */ .igual li::before { content: ""; position: absolute; left: .3125rem; top: .5rem; width: .4375rem; height: .8125rem; border: solid var(--cian); border-width: 0 2px 2px 0; transform: rotate(45deg); } @media (min-width: 720px) { .igual { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .igual { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } } .igual-pie { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--borde); font-size: var(--t-menor); line-height: 1.6; color: var(--suave); } .igual-pie .btn-texto { gap: .375rem; margin-left: .25rem; } /* --- El teléfono --------------------------------------------------------- Por debajo de 980 px las tarjetas son un riel horizontal de 320 px de ancho máximo. Ahí una etiqueta de 92 px a la izquierda le deja 180 al valor, y «Cubierto, la primera hora sin costo» salía en tres renglones colgando de una palabra. En una columna estrecha el par se apila: la etiqueta encima, pequeña, y el valor debajo a todo el ancho. */ @media (max-width: 979px) { body[data-pagina="sedes"] .elige-datos > div { grid-template-columns: 1fr; gap: .1875rem; } body[data-pagina="sedes"] .elige-datos dt { font-size: var(--t-mini); } /* La barra general lleva a /agendar, que es el selector — y esta página ya es un selector, con la ventaja de que sabe cuál te queda más cerca. Se apaga y manda `.barra-elige`, igual que en /agendar. */ body[data-pagina="sedes"] .barra-movil { display: none; } /* Y se devuelve el hueco del pie que la barra general reservaba: la regla general lo cuenta con `.barra-movil` a la vista. */ body[data-pagina="sedes"] .pie { padding-bottom: calc(2.5rem + 76px + env(safe-area-inset-bottom)); } } /* ============================================================================ /NOSOTROS: LA PIEZA DE MARCA Y LO QUE RESPALDA A LA CASA La página era una columna de prosa: cinco de sus siete secciones eran texto dentro de `.estrecho`, con los dos lados de la pantalla vacíos. Y la página que tiene que decir quién eres no traía **ni un sello, ni una norma, ni un organismo**: todo eso vivía en /transparencia, que es donde se va a buscar un documento, no donde se llega a saber con quién estás tratando. ========================================================================== */ /* --- La pieza del cliente y su relevo en el teléfono --------------------- `.cartel` ya existe (lo estrenó /el-examen) y no se toca: fondo claro en los dos temas, esquinas redondas y la imagen a sangre. Lo único propio de aquí es CUÁNDO se ve. La pieza mide 2.960 × 1.240 (2,39:1). A 390 px de pantalla son 163 px de alto, y el titular de 100 px baja a 13: ilegible. No hay versión vertical, así que el relevo del teléfono no es una imagen más pequeña, es el MISMO mensaje en texto de verdad — que además se puede seleccionar, ampliar y leer en voz alta, cosa que un texto dibujado dentro de un PNG no. `display: none` y no `visibility` ni `opacity`: saca el bloque también del árbol de accesibilidad, así que nadie oye el mensaje dos veces. */ .cartel-nosotros { display: none; } @media (min-width: 980px) { .cartel-nosotros { display: block; } } /* --- La pieza, de portada ------------------------------------------------- Ya no ilustra un titular: ES la portada. Arriba solo van las migas, que son navegación y miden 13 px. El relleno de arriba es el de una cabecera de página menos lo que ocupan las migas, para que la pieza empiece donde empezaría un h1. */ .pieza-portada { padding-top: clamp(4.5rem, 8vw, 7rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); /* 🔴 El halo sangra un 6 % a cada lado de una caja que a 1.440 px ya mide 1.344: el documento se estiraba hasta 1.473 px y la página se arrastraba de lado. A 390 px pasaba lo mismo por un píxel. Lo cazó medir el ancho del documento, no mirarlo: 1 px de arrastre no se ve, se nota al deslizar. `clip` y no `hidden`: `hidden` crea un contenedor de scroll y rompería cualquier `position: sticky` que se meta aquí dentro; `clip` solo recorta. Y solo en X, para que el halo siga sangrando por arriba y por abajo. */ overflow-x: clip; } .pieza-portada .migas { margin-bottom: clamp(1rem, 2vw, 1.5rem); } /* La caja de la pieza es MÁS ANCHA que el resto del contenido. Con 2,39:1 de proporción, dentro de la columna de 1.240 la pieza medía 479 px de alto: menos que la tarjeta de una sede, para lo que es el mensaje de la marca. A 1.400 mide 585 y ya sostiene una pantalla. No va a sangre completa a propósito: la pieza trae su propio margen blanco dibujado y pegada a los cantos del navegador se leería como un error de recorte, no como una portada. */ .pieza-caja { position: relative; width: min(1400px, 100% - var(--canal) * 2); margin-inline: auto; } /* --- El halo de marca ----------------------------------------------------- La pieza tiene fondo casi blanco y sobre el pozo oscuro del sitio se pegaba como un recorte de papel. El halo la ilumina desde detrás con los dos colores de la casa. 🔴 Sin `filter: blur()`: son dos degradados radiales con parada suave. Un desenfoque dentro de una capa compuesta —y aquí hay una, porque GSAP anima la pieza— sale con cantos rectos en Safari y Chrome no lo enseña. Es la lección que vigila `blur-guardia.js`. `pointer-events: none` y `aria-hidden`: es luz, no contenido. */ .pieza-halo { position: absolute; z-index: 0; pointer-events: none; inset: -12% -6%; border-radius: 50%; background: radial-gradient(45% 55% at 22% 45%, rgba(0, 159, 227, .38), transparent 70%), radial-gradient(45% 55% at 78% 55%, rgba(230, 0, 126, .30), transparent 70%); opacity: 0; } /* Entra DESPUÉS de la pieza, no con ella: primero se lee el mensaje y luego se enciende la luz. Y respira muy despacio —14 s— porque una luz de fondo que late deprisa se convierte en el protagonista, y la protagonista es la pieza. */ @media (prefers-reduced-motion: no-preference) { .pieza-halo { animation: pieza-halo-entra 1.4s ease-out .9s forwards, pieza-halo-late 14s ease-in-out 2.3s infinite; } } @media (prefers-reduced-motion: reduce) { .pieza-halo { opacity: .55; animation: none; } } @keyframes pieza-halo-entra { to { opacity: .55; } } @keyframes pieza-halo-late { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .75; transform: scale(1.04); } } /* En el tema claro el halo sobra: sobre un fondo casi blanco, iluminar una pieza casi blanca no hace nada y deja dos manchas de color alrededor. */ :root[data-tema="claro"] .pieza-halo { display: none; } /* La pieza va ENCIMA del halo. Sin esto el halo, que es un hermano posterior en el HTML... no lo es —va antes—, pero el `position: absolute` lo saca del flujo y sin `z-index` en la pieza quedaría por encima en cuanto la pieza no cree contexto propio. Se declara y se acabó. */ .cartel-nosotros, body[data-pagina="nosotros"] .manifiesto { position: relative; z-index: 1; } /* --- La costura con lo que sigue ------------------------------------------ Debajo de la pieza va «Detrás de cada certificado», y el fondo no cambia: son los mismos 224 px de nada que ya se corrigieron en las páginas de sede —allí entre la foto y «Por qué esta sede»—. El relleno de abajo de la portada ya está acotado arriba; aquí se acota el de arriba de la sección. */ body[data-pagina="nosotros"] .pieza-portada + .seccion { padding-top: calc(var(--seccion) * .62); } /* Y la otra costura sin cambio de fondo de esta página: entre la presentación y «Por qué existimos». Dos `.seccion` lisas seguidas suman sus dos rellenos —256 px a 1.440— y ahí no separan nada que no separe ya el propio contenido. Es la única pareja lisa que queda: en las otras cinco costuras entra o sale una banda (`.niebla` o `.oscura`) y ese aire SÍ es el respiro de la banda. 🔴 La regla nombra las dos clases reales. La primera versión de esto en las páginas de sede decía `.seccion` cuando el elemento era `.seccion-corta`, y compiló, pasó el validador y no tocó un píxel. */ body[data-pagina="nosotros"] .seccion:not(.niebla):not(.oscura):has(+ .seccion:not(.niebla):not(.oscura)) { padding-bottom: calc(var(--seccion) * .62); } body[data-pagina="nosotros"] .seccion:not(.niebla):not(.oscura) + .seccion:not(.niebla):not(.oscura) { padding-top: calc(var(--seccion) * .62); } @media (min-width: 980px) { .manifiesto { display: none; } } .manifiesto { border: 1px solid var(--borde); border-radius: var(--r-l); padding: clamp(1.5rem, 6vw, 2.25rem); background: var(--superficie); } @supports (backdrop-filter: blur(1px)) { .manifiesto { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } } /* No es un `

`: es la misma frase que la pieza lleva dibujada, y en esta página el titular de sección de más abajo («Lo que nos respalda») sí es un h2. Meter aquí otro h2 metía un nivel en la escalera de titulares que no corresponde a ninguna sección. Va con la clase, no con la etiqueta. */ .manifiesto-titular { font-size: clamp(1.75rem, 7.5vw, 2.25rem); font-weight: 700; line-height: 1.1; } /* 🔴 `--t-lead-mayor`, no `--t-lead`. Es la regla de la casa y aquí se rompió: el magenta de resalte solo cuenta como TEXTO GRANDE —listón 3:1 en vez de 4,5— a partir de 18,66 px en peso 700. `--t-lead` da 17 px en el teléfono, y ahí «aprender» se quedaba en 3,99:1 sobre el vidrio oscuro. Medido, no supuesto. A 20 px el mismo magenta pasa con margen. */ .manifiesto-lema { margin-top: .75rem; font-size: var(--t-lead-mayor); line-height: 1.45; color: var(--tinta); } /* La cita, con el filo de marca a la izquierda. Es el único sitio de la página donde una raya vertical significa algo —«esto es una cita», que es su uso de toda la vida en tipografía— y no un adorno de tarjeta. */ .manifiesto-cita { margin: 1.5rem 0 0; padding-left: 1rem; border-left: 2px solid transparent; border-image: var(--letrero-texto) 1; font-size: var(--t-menor); line-height: 1.6; color: var(--texto); } .manifiesto-cita p { margin: 0; } .manifiesto-cita footer { margin-top: .375rem; font-size: var(--t-mini); color: var(--enlace-magenta); font-weight: 600; } /* La píldora que la pieza trae dibujada, aquí dibujada con CSS. No es un enlace y no lo parece: sin flecha, sin color de enlace y sin cursor de mano. Es una firma. */ .manifiesto-firma { position: relative; isolation: isolate; display: inline-flex; align-items: center; margin-top: 1.5rem; padding: .625rem 1.25rem; border: 1px solid var(--borde); border-radius: 999px; font-size: var(--t-menor); font-weight: 700; color: var(--tinta); } @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { .manifiesto-firma { border-color: transparent; } .manifiesto-firma::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; background: var(--letrero-texto); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } } /* --- Lo que nos respalda ------------------------------------------------- No es el desfile de logos de la home repetido por tercera vez. Un logo solo dice que un sello existe; aquí cada ficha dice QUÉ es, QUÉ autoriza y a quién acudir si algo no cuadra, que es lo que de verdad respalda. Los cuatro textos salen de /transparencia: aquí no se ha inventado ninguno. Cuatro columnas a partir de 1080 y dos entre 640 y 1080. Con tarjeta y vidrio, para que se lean como credenciales y no como los cuatro párrafos de «Cuatro cosas que no negociamos», que van sin caja dos secciones más abajo. */ .respalda { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } .respalda-item { display: flex; flex-direction: column; padding: 1.5rem 1.5rem 1.625rem; border: 1px solid var(--borde); border-radius: var(--r-l); background: var(--superficie); } @supports (backdrop-filter: blur(1px)) { .respalda-item { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } } /* El sello vive en una caja de alto FIJO. Los cinco logotipos tienen proporciones muy distintas (el de ONAC trae caja verde con aire propio), y sin un alto común cada ficha empezaba su titular a una altura. */ .respalda-sello { display: flex; align-items: center; height: 44px; margin-bottom: 1.25rem; } .respalda-sello img { height: 34px; width: auto; max-width: 100%; object-fit: contain; } /* El de ONAC va más alto, por la misma razón que en el desfile de la home: su logotipo trae caja con aire propio y a la misma altura la marca de DENTRO se ve más pequeña que las demás. */ .respalda-sello img.sello-onac { height: 42px; } .respalda-titulo { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--tinta); margin: 0; } /* La norma o el organismo: el dato duro. En magenta de ENLACE y no de resalte —a 13 px el de resalte da 3,99:1 sobre el vidrio oscuro—, y en versalitas no, que a este tamaño se leen peor de lo que decoran. */ .respalda-norma { margin-top: .25rem; font-size: var(--t-mini); font-weight: 600; color: var(--enlace-magenta); } .respalda-texto { margin-top: .875rem; padding-top: .875rem; border-top: 1px solid var(--borde); font-size: var(--t-menor); line-height: 1.6; color: var(--texto); } .respalda-texto strong { color: var(--tinta); font-weight: 700; } @media (min-width: 640px) { .respalda { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .respalda { grid-template-columns: repeat(4, 1fr); } } /* 🔴 En el teléfono las cuatro fichas apiladas medían **1.329 px**: casi dos pantallas para leer cuatro credenciales que se comparan de un vistazo. En riel ocupan una. No se oculta nada —el contenido es el mismo—, cambia el eje; es lo mismo que ya hacen las tarjetas de sede y las guías. Va en `max-width: 639px` y no dentro del bloque de rieles compartido de más arriba: aquel vive 1.100 líneas ANTES que `.respalda { display: grid }`, y con el mismo peso habría ganado la rejilla por orden. Es la trampa que ya mordió con `.otras-sedes`. Aquí los dos tramos no se solapan, así que no pueden pelearse. */ @media (max-width: 639px) { .respalda { display: flex; gap: .875rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--canal); padding-inline: var(--canal); margin-inline: calc(var(--canal) * -1); padding-bottom: .5rem; /* aire para la sombra al desplazar */ -webkit-overflow-scrolling: touch; scrollbar-width: none; } .respalda::-webkit-scrollbar { display: none; } /* El sangrado negativo hace que la siguiente ficha asome por el borde, que es lo que le dice al dedo que hay más. */ .respalda > * { flex: 0 0 84%; max-width: 320px; scroll-snap-align: center; } } .respalda-pie { margin-top: 1.75rem; font-size: var(--t-menor); line-height: 1.6; color: var(--suave); text-align: center; } /* El hueco antes de la flecha: en el teléfono `.btn-texto` pasa a `inline-flex` y el contenedor flex se come el nodo de espacio del HTML. Misma trampa ya anotada en `.elige-tarifa` y en `.sede-card-secundarias`, y acotada igual. */ .respalda-pie .btn-texto { gap: .375rem; margin-left: .25rem; } /* --- Las cuatro profesiones --------------------------------------------- Iban en una frase corrida («médicos, optómetras, fonoaudiólogos y psicólogos») donde se leían como una enumeración de adorno. Son las cuatro personas distintas que te van a atender, una por cada valoración del examen, y eso es una LISTA. El nombre de la profesión y lo que hace van en la misma línea desde 520 px: dos columnas de ancho desigual, la etiqueta fija. */ /* Cuatro columnas, no dos ni tres: son cuatro profesiones y una por valoración, así que la cuenta de columnas ES el dato. En una fila de tres, la cuarta quedaría sola debajo y la correspondencia se pierde. */ @media (min-width: 760px) { .oficios { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .oficios { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } } /* El párrafo de credenciales va al pie y no dentro de una ficha: habla de las cuatro a la vez. Medida de lectura acotada y centrado bajo la fila, que es como se cierra un bloque de columnas sin abrir otra sección. */ .oficios-pie { max-width: 46rem; margin: 2.25rem auto 0; font-size: var(--t-menor); line-height: 1.6; color: var(--suave); text-align: center; } /* --- Lo que viene -------------------------------------------------------- Eran dos `.aviso` apilados dentro de una columna estrecha. `.aviso` es el componente de ADVERTENCIA —punto magenta, caja gris— y estos dos no advierten de nada: anuncian un servicio que va a abrir. Pasan a dos fichas a lo ancho, con su estado escrito en vez de insinuado por un punto de color. */ .proximo { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } .proximo-item { padding: 1.5rem; border: 1px dashed var(--borde); border-radius: var(--r-l); } /* Borde DISCONTINUO, y es lo único de la página que lo lleva: dice «esto todavía no está» sin tener que escribirlo dos veces. La frase de debajo lo dice con palabras, que es lo que lee quien no ve el borde. */ .proximo-estado { display: inline-flex; align-items: center; gap: .4375rem; margin-bottom: .75rem; font-size: var(--t-mini); font-weight: 600; color: var(--suave); } .proximo-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--suave); } .proximo-titulo { margin: 0 0 .5em; font-size: 1.125rem; font-weight: 700; color: var(--tinta); line-height: 1.3; } .proximo-item p:last-child { margin: 0; font-size: var(--t-menor); line-height: 1.6; color: var(--texto); } .proximo-pie { margin-top: 1.5rem; font-size: var(--t-menor); color: var(--suave); text-align: center; } @media (min-width: 760px) { .proximo { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } } /* El sello de una credencial va al 100 %, no al 72 % del desfile: allí es un adorno de fondo y aquí es lo primero que se mira de la ficha. Lo único que se hereda del desfile es el TRATAMIENTO —blanco monocromo sobre oscuro para las marcas de línea, color intacto para las que traen caja—, que es lo que tiene que ser igual en todo el sitio. */ .respalda-sello img { opacity: 1; } /* --- La presentación: el titular sostiene, el texto explica --------------- Era un h1 y un párrafo de cinco líneas, centrados en una columna estrecha. El párrafo decía DOS cosas —qué somos en lenguaje de norma y qué significa eso en lenguaje de persona— y las decía seguidas, así que la segunda, que es la que se entiende, quedaba enterrada al final. Dos columnas: el titular a la izquierda y las dos frases a la derecha, separadas y con pesos distintos. La de norma en escala de entradilla; la de persona con una etiqueta delante que dice exactamente qué es. */ .presenta { display: grid; gap: clamp(1.5rem, 3vw, 2rem); } .presenta-titular { margin: 0; } .presenta-cuerpo { display: grid; gap: clamp(1.25rem, 2.4vw, 1.75rem); } .presenta .lead { font-size: var(--t-lead-mayor); line-height: 1.5; color: var(--texto); } /* La frase llana va SOBRE una raya y no dentro de una caja: no es un aviso ni una cita, es la misma idea dicha de otra manera. Una raya basta para decir «aquí cambia el registro». */ .presenta-llano { padding-top: clamp(1.25rem, 2.4vw, 1.75rem); border-top: 1px solid var(--borde); /* 🔴 `--t-lead-mayor` y no `--t-cuerpo`. Segunda vez en esta página con la misma regla de la casa: el magenta de resalte solo cuenta como TEXTO GRANDE —listón 3:1 en vez de 4,5— a partir de 18,66 px con peso 700, y `--t-cuerpo` son 17. Medido: 4,33:1 sobre el vidrio oscuro. La jerarquía entre las dos frases no se pierde: no la llevaba el tamaño, la llevan la raya y la etiqueta. Y que la frase que de verdad se entiende no sea más pequeña que la de lenguaje de norma es, si acaso, más correcto. */ font-size: var(--t-lead-mayor); line-height: 1.6; color: var(--texto); } /* La etiqueta en su propia línea y en magenta de enlace (no el de resalte, que a 13 px no llega al contraste). Es un rótulo de registro, no un titular. */ .presenta-etiqueta { display: block; margin-bottom: .375rem; font-size: var(--t-mini); font-weight: 700; color: var(--enlace-magenta); } @media (min-width: 900px) { .presenta { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } } /* --- Las credenciales responden al cursor --------------------------------- Pedido: que se sientan tarjetas sin convertirse en botones. Por eso lleva lo que dice «esto responde» y NADA de lo que dice «esto se pulsa»: se levanta y se enciende, pero no hay cursor de mano, ni flecha, ni enlace. Dentro no hay nada enfocable, así que tampoco hay estado de teclado que inventar: el que no usa ratón no se pierde ninguna información, porque el señalado no informa de nada que no esté ya escrito. El mismo gesto que las tarjetas de sede y las del selector —6 px de subida, filo celeste y halo— para que una tarjeta se comporte igual en todo el sitio. */ @media (hover: hover) and (pointer: fine) { .respalda-item { transition: transform 400ms var(--sal), border-color 300ms ease, box-shadow 400ms var(--sal); } .respalda-item:hover { transform: translateY(-6px); border-color: rgba(0, 159, 227, .45); box-shadow: var(--sombra-media), var(--brillo-cian); } /* Y el sello recupera su color de verdad. Es el detalle que hace que el señalado signifique algo en vez de solo moverse: en reposo los sellos van monocromos para que la fila se lea como un bloque, y al mirar uno aparece el sello REAL, que es lo que respalda. */ .respalda-sello img { transition: filter 320ms ease; } .respalda-item:hover .respalda-sello img { filter: none; } } @media (prefers-reduced-motion: reduce) { .respalda-item { transition-duration: 1ms; } .respalda-item:hover { transform: none; } }