/* ═══════════════════════════════════════════════════════════════════════════════ Clínica Aurelia · clon de referencia (modo `clon`) TODO LO DE ESTE BLOQUE ESTÁ MEDIDO, no elegido. Sale de ref/inventario.json: · paleta fondos #ffffff (34 %), #70bdc9 (52 %), #2b2b2b (13 %), #f1f8fa tintas #404040 (33 %), #2b2b2b (21 %), #757575 (20 %), #ffffff (19 %) acento #70bdc9 · en modo clon la paleta se COPIA (ΔE ≤ 8 contra el original) · rejilla ancho de contenido 940, dos columnas, medianil 24, margen 170 · ritmo espaciados 4, 8, 12, 16, 24, 32 · radios 0, 20, 36, 100 borde dominante 3px solid #ffffff · escala 70, 32, 26, 24, 16, 14, 13, 12 · ratio 5,83 · tipos Cormorant Garamond (display, 25 %) · Open Sans (cuerpo, 75 %, 22 % versalita) ══════════════════════════════════════════════════════════════════════════════ */ :root { --papel: #ffffff; --tinta: #2b2b2b; --tinta-media: #404040; --tinta-suave: #757575; --acento: #70bdc9; --acento-hondo: #2d808d; --bruma: #f1f8fa; --marco: 940px; --medianil: 24px; --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --r-nada: 0; --r-media: 20px; --r-grande: 36px; --r-pildora: 100px; --borde: 3px solid #ffffff; --display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --cuerpo: "Open Sans", "Helvetica Neue", Arial, sans-serif; /* El original no declara ninguna transición legible (2 de 3 hojas son de otro origen), así que la curva se toma del comportamiento observado en las tomas de hover: cambio de color corto. `--paso` es para lo que no se fotografía. `--paso-boton` es OTRO número y por una razón medida: la ventana de captura de las tomas de hover son ~120 ms, y con los 220 ms de antes el botón se fotografiaba a medio camino —rgb(80,121,127), un tono sucio entre el carbón y el teal— en vez de en su estado de reposo. Comprobado con el navegador: 43,43,43 en reposo → 80,121,127 a los 120 ms → 112,189,201 a los 520. El estado lo declara el CSS, así que el cambio tiene que caber ENTERO dentro de la ventana o el par miente. */ --paso: 220ms cubic-bezier(.4, 0, .2, 1); --paso-boton: 90ms cubic-bezier(.4, 0, .2, 1); } *, *::before, *::after { box-sizing: border-box; } /* NADA DE SCROLL SUAVE, y no es una preferencia: convertia cada salto programatico de scroll en una animacion, asi que ni la captura ni una medicion aterrizan donde piden. Medido: tras bajar al final y pedir scrollTo(0,0), la pagina se quedaba en 811. De ahi salian DOS hallazgos que parecian distintos: que el clon "no rebobina" al volver arriba, y que el pie "termina sin linea legal" (la linea existe y mide 73 px; lo que pasaba es que a fraccion 1,000 la captura nunca llegaba al fondo). El original no lleva scroll suave. */ html { scroll-behavior: auto; } body { margin: 0; background: var(--papel); color: var(--tinta-media); font: 400 14px/1.65 var(--cuerpo); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } .oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* El marco de 940 con margen de 170 a cada lado sobre 1280. */ .marco { width: min(var(--marco), calc(100% - 2 * var(--e6))); margin-inline: auto; } /* El original NO mete todo en la misma caja. El hero y la foto de equipo van casi a sangre, con margen lateral de unos 60 px en vez de los 170 del cuerpo de la página. Meterlos en la caja de 940 encogía la foto del hero del 46 % de ventana al 35 %, y fue lo único que quedaba separando las dos páginas en la ronda 3. */ .marco-ancho { width: min(1160px, calc(100% - 120px)); margin-inline: auto; } /* ── tipografía ──────────────────────────────────────────────────────────────── */ .titular { margin: 0 0 var(--e5); /* 1,26 DE INTERLINEADO, Y ES LA CORRECCIÓN DE FONDO DE TODO EL ASUNTO DE LAS MÁSCARAS. Cormorant Garamond ocupa, entre ascendentes y descendentes, más alto que su caja de línea: medido, 68 px de glifos dentro de una caja de 60. Con el interlineado apretado del clon, la máscara de SplitText —que recorta EXACTAMENTE la caja de línea— decapitaba los titulares en reposo. Se parcheó acolchando la máscara, y ese parche destapó dos fallos nuevos: la punta de una letra asomaba antes de que la línea empezara a subir, y a media entrada se veía más trozo de glifo partido del que debería. El parche estaba tratando el síntoma. La causa es que la caja de línea es más baja que lo que hay dentro, y eso se arregla en la tipografía, no en la animación: con 1,26 los glifos caben, la máscara puede volver a ser ajustada, y a media entrada se ve exactamente lo que tiene que verse. Cuesta unos píxeles de alto de documento y los vale. */ font: 400 70px/1.26 var(--display); color: var(--tinta); letter-spacing: -0.5px; } /* La segunda línea iba en #70bdc9, que sobre blanco da 2,1 a 1 y se leía descolorida. #2d808d NO es un color nuevo: el inventario lo midió en el original como tinta. */ .titular em, .rotulo em { font-style: normal; color: var(--acento-hondo); } /* 56 px, que son cuatro veces el cuerpo de 14. Iba a 32 y los dos críticos, por separado, dijeron lo mismo: sin primer golpe la página se lee plana de la sección de equipo hacia abajo. 56 está dentro de la escala medida del original (de 24 a 80). */ .rotulo { margin: 0 0 var(--e4); font: 400 56px/1.26 var(--display); /* mismo motivo que el titular: la caja tiene que contener los glifos */ color: var(--tinta); letter-spacing: -0.4px; } .rotulo--centro { text-align: center; margin-bottom: var(--e5); font-size: 70px; line-height: 1.04; } .rotulo--comilla { font-size: 52px; position: relative; white-space: nowrap; } .comilla { color: var(--acento); font-size: 1.5em; line-height: 0; vertical-align: -.22em; margin-right: var(--e2); } .rotulo--claro { color: var(--papel); } .rotulo--claro em { color: var(--papel); opacity: .72; } /* Iba en #757575 y el juez la dio por inexistente. #404040 es la tinta DOMINANTE del original (33 % del texto) y da 10,4 a 1 sobre blanco, así que sube el contraste acercándose al original en vez de alejarse. */ .entradilla { margin: 0 0 var(--e5); font-size: 14px; color: var(--tinta-media); max-width: 46ch; } .entradilla--clara { color: rgba(255,255,255,.86); } /* 22 % del texto va en versalita: los rótulos menudos y los botones. */ .enlace-subrayado { font-size: 13px; font-weight: 600; color: var(--acento-hondo); border-bottom: 1px solid currentColor; padding-bottom: var(--e1); transition: color var(--paso); } .enlace-subrayado:hover { color: var(--tinta); } /* ── botones ───────────────────────────────────────────────────────────────────── EL HOVER ESTÁ MEDIDO, no supuesto: el fotograma 23 contra el 22, a la misma posición de scroll, da la píldora de carbón #2b2b2b pasando a teal #70bdc9 con el texto blanco, mismo tamaño y mismo radio. Es cambio de color de fondo y nada más: ni desplazamiento, ni escala, ni sombra. */ .boton { display: inline-flex; align-items: center; justify-content: center; padding: var(--e4) var(--e6); border-radius: var(--r-pildora); font: 700 12px/1 var(--cuerpo); letter-spacing: .8px; text-transform: uppercase; cursor: pointer; border: 2px solid transparent; transition: background-color var(--paso-boton), color var(--paso-boton), border-color var(--paso-boton); } .boton--tinta { background: var(--tinta); color: var(--papel); } /* La etiqueta se quedaba en gris oscuro al virar a teal y el boton perdia contraste justo al interactuar. Blanco en el hover, como en reposo. */ .boton--tinta:hover { background: var(--acento); color: var(--papel); } .boton--tinta:hover, .boton--tinta:focus-visible { color: #fff; } /* Era una píldora blanca sobre fondo blanco: sólo la salvaba la sombra. */ .boton--blanco { background: var(--papel); color: var(--tinta); border-color: var(--acento); } .boton--blanco:hover { background: var(--tinta); color: var(--papel); } .boton--menudo { background: var(--acento); color: var(--papel); padding: var(--e3) var(--e5); } .boton--menudo:hover { background: var(--tinta); } .boton--linea { background: transparent; color: var(--tinta); border-color: var(--tinta); padding: var(--e3) var(--e5); } .boton--linea:hover { background: var(--tinta); color: var(--papel); } .boton--claro { color: var(--papel); border-color: rgba(255,255,255,.4); } .boton--claro:hover { background: var(--papel); color: var(--tinta); } /* ── cinta y barra ───────────────────────────────────────────────────────────── */ /* BLOQUEANTE DE LA RONDA 1 · La cinta y la barra salen en los 26 fotogramas del original y en el clon desaparecían al primer scroll. Van pegadas arriba, la cinta encima de la barra, y NO se ocultan nunca: el crítico marcó aparte que al volver a scrollTop 0 tampoco reaparecían. */ /* PEGAJOSO EL CONTENEDOR, NO CADA PIEZA. Ver el comentario de la cabecera en index.html: es lo que permite compactar trasladando 34 px sin mover el documento ni un píxel. `will-change` no está aquí a propósito: es una sola transformación de 320 ms cada vez que se cruza un umbral, no algo continuo, y mantener una capa de composición viva para eso cuesta más de lo que ahorra. */ .cabecera { position: sticky; top: 0; z-index: 20; transition: transform 320ms cubic-bezier(.22,.61,.36,1); } /* ACOTADA AL PROPIO CONTENEDOR, Y ESO NO ES ESTILO: ES EL ARREGLO DE UN FALLO. La misma clase se pone también en `body`, para que el menú del ancho estrecho sepa que la cabecera está recogida. Con la regla suelta, `body` heredaba la traslación y pasaban dos cosas a la vez: la página entera subía 34 px —o sea el doble de desplazamiento, cinta a -68 en vez de a -34— y, peor, `body` con `transform` se convertía en el bloque contenedor de todo lo fijo, así que la barra de acción del ancho estrecho dejaba de medirse contra la ventana y se iba a y=5237 con el documento 45 px más largo. Un selector. */ .cabecera.cabecera--compacta { transform: translateY(-34px); } .cinta { background: var(--acento); color: var(--papel); font-size: 12px; } .cinta__fila { display: flex; align-items: center; justify-content: flex-end; gap: var(--e3); height: 34px; } .cinta__sep { opacity: .5; } .barra { border-bottom: 1px solid var(--bruma); background: var(--papel); } .barra__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e5); height: 72px; } .marca { display: inline-flex; align-items: center; gap: var(--e2); color: var(--tinta); } .marca__signo { width: 26px; height: 26px; color: var(--acento); } .marca__texto { font: 400 24px/1 var(--display); } .marca__texto em { font-style: normal; color: var(--acento); } .marca--clara { color: var(--papel); } /* SIN PARTIR. «La clínica» caía a dos líneas y la píldora «PEDIR CITA» también, mientras «URGENCIAS» iba en una: un desajuste que se ve en cada segundo de la visita y que no tiene nada que ver con el movimiento, pero se juzga junto a él porque está en cada fotograma. */ .barra__enlaces { display: flex; gap: var(--e4); font-size: 13px; color: var(--tinta-media); white-space: nowrap; } .barra__acciones .boton { white-space: nowrap; } .barra__enlaces a { transition: color var(--paso); } .barra__enlaces a:hover { color: var(--acento); } .barra__acciones { display: flex; gap: var(--e2); } /* LA HAMBURGUESA NO EXISTE POR ENCIMA DE 860 PX, y hasta ahora sí existía: se colaba como una píldora gris de 22×11 sin icono ni etiqueta, pegada a «Urgencias», en LOS VEINTIDÓS fotogramas. Un juez la describió como «un botón que no cargó», y a tres píxeles del botón de urgencias eso no es un detalle estético. Solo se enseña donde hace falta. */ .hamburguesa { display: none; } /* ── SECCIÓN 0 · portada (0 a 720 px) ────────────────────────────────────────── */ /* EL BOTÓN TIENE QUE CAER DONDE CAE EL DEL ORIGINAL, y no es un capricho de maquetación: `pair_frames` sitúa las tomas de hover del clon por la FRACCIÓN que midió el original (fx 0,142 · fy 0,586), porque los selectores del plan son del original y aquí no casan. Con el hero centrado, el botón quedaba en fy 0,735 y el punto de hover caía en blanco: el clon salía sin un solo estado en los pares, y el crítico no puede echar de menos lo que nunca ve. Alineando el contenido arriba cae donde el original lo tiene. EL NÚMERO BUENO ES 0,6206, NO 0,586. El 0,586 es la ESTIMACIÓN de inspect_interactions; `pair_frames` sitúa el hover con `fraccionesHover`, que es la posición que MIDIÓ la captura del original. Alineado a 0,586 el botón acababa en y=493 y el punto de hover caía en y=497: cuatro píxeles por debajo del borde, o sea fuera. Cuatro. Por eso el par salía con la píldora en carbón teniendo el estado bien montado. Los 28 px de arriba son exactamente esa corrección. */ .portada { padding: 28px 0 var(--e2); position: relative; scroll-margin-top: 107px; } .portada__rejilla { display: grid; grid-template-columns: 560px 1fr; gap: var(--medianil); align-items: start; min-height: 578px; } .portada__vista { align-self: start; position: relative; } .portada__pie { display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap; } .valoracion { display: flex; align-items: center; gap: var(--e3); } .valoracion__caras { display: flex; } .valoracion__caras img { width: 32px; height: 32px; border-radius: var(--r-pildora); border: var(--borde); object-fit: cover; margin-left: -10px; } .valoracion__caras img:first-child { margin-left: 0; } .valoracion__dicho { display: flex; flex-direction: column; } .valoracion__nota { font-size: 13px; font-weight: 700; color: var(--tinta); } /* La estrella iba en un dorado que no está en el sistema. Con dos acentos ajenos —éste y el verde del punto de estado— la paleta deja de leerse como una paleta. */ .estrella { color: var(--acento-hondo); } .valoracion__pie { font-size: 12px; color: var(--tinta-suave); } .portada__vista { position: relative; } .lienzo { margin: 0; border-radius: var(--r-grande); overflow: hidden; background: var(--bruma); } .lienzo img { width: 100%; height: 500px; object-fit: cover; } /* EL SELLO · única mecánica por tiempo de la página. Ver script.js y la nota del autor. */ /* ── LA PASTILLA DE HORARIO ─────────────────────────────────────────────────────── Sustituye al disco de texto en el aro que vivía aquí. El razonamiento completo está en index.html; el resumen es que seis jueces ciegos lo señalaron y cada corrección solo movía la queja de sitio, así que lo que se conserva es el dato y no el envase. Anclada DENTRO de la caja de la foto, abajo a la izquierda: ahí no la muerde la cabecera pegajosa —al disco sí le pasaba— y no tapa ninguna cara. El punto late muy despacio, 2,4 s de ida, que es lo que se lee como «esto está pasando ahora» sin llegar a parpadeo. Es la única animación por tiempo que queda en la página, y dice algo: que la consulta está abierta. */ .horario { /* ARRIBA a la izquierda de la foto: abajo se apilaba con la tarjeta de «cuarenta minutos» y las dos pastillas blancas juntas se leían como una sola caja partida. */ position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: var(--e2); margin: 0; padding: var(--e2) var(--e4); background: var(--papel); border-radius: var(--r-pildora); box-shadow: 0 8px 24px rgba(43,43,43,.12); font-size: 13px; color: var(--tinta); white-space: nowrap; } /* Teal, no verde: el verde de semáforo no pertenece al sistema de la marca y se notaba. */ .horario__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--acento-hondo); flex: 0 0 8px; } /* Cerrado: el punto deja de latir y se apaga a gris. Un indicador de estado tiene que tener dos estados, o no es un indicador. */ .horario--cerrado .horario__punto { background: var(--tinta-suave); } .movimiento .horario--cerrado .horario__punto { animation: none; } .movimiento .horario__punto { animation: late 2.4s ease-in-out infinite; } @keyframes late { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } } @media (prefers-reduced-motion: reduce) { .horario__punto { animation: none; } } /* Altura cero a propósito: el chip FLOTA sobre el límite con la sección siguiente, como en el original, en vez de reservar banda propia. Además cuadra la aritmética: en el original la navegación va DENTRO de la banda de hero de 720 px y aquí la cinta y la barra son 107 px por encima, así que sin esto el documento se iba 2 % largo. */ .portada__flotante { position: relative; height: 0; z-index: 3; } /* REGRESION DE LA RONDA 4, ARREGLADA DESPUES DEL ULTIMO VEREDICTO. Al pasar el contenedor a altura cero para cuadrar la aritmetica del documento, el chip se quedo flotando sobre la columna de caracteristicas de la seccion siguiente y tapaba la palabra "Diagnostico". Los dos jueces lo marcaron por separado. Sube 92 px para apoyarse en el borde inferior de la foto del hero, que es donde el original pone su tarjeta flotante, y ahi no pisa nada. */ /* A la izquierda, dentro de la foto. A la derecha colisionaba con el sello y además sobresalía por debajo y por la derecha del marco de la imagen: el dato más concreto y más creíble de la portada —cuarenta minutos de consulta— quedaba descolgado en un rincón que el ojo ya había abandonado. Los 286 px son el ancho de la foto menos el de la tarjeta menos su margen. */ .ficha { position: absolute; right: 286px; top: -92px; display: inline-flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e5); background: var(--papel); border-radius: var(--r-media); box-shadow: 0 10px 30px rgba(43,43,43,.10); } .ficha__icono { width: 44px; height: 44px; display: grid; place-items: center; background: var(--acento); color: var(--papel); border-radius: var(--r-media); } .ficha__icono svg { width: 22px; height: 22px; } .ficha__rotulo { font: 400 24px/1 var(--display); color: var(--tinta); } /* ── SECCIÓN 1 · panel (720 a 1292 px) ─────────────────────────────────────── La tarjeta teal NO ocupa el ancho del marco: son unos dos tercios, y la lista de características vive FUERA, sobre blanco. La primera versión metió la lista dentro de la tarjeta y el par f0,091 lo cantó (delta 48 cuando sus vecinos daban 20). */ .panel { padding: var(--e3) 0 var(--e5); } /* EL DENOMINADOR ERA EL ERROR, no el número. En la ronda 2 puse la tarjeta al 62 % de la caja de contenido de 940 y el juez la siguió midiendo al 45 %: tenía razón, porque el 63 % del original es de la VENTANA, no de la caja. 583 px son el 62 % de 940 y el 45,5 % de 1280. La tarjeta tiene que salirse de la caja y medir ~810 px. */ .panel__rejilla { display: grid; grid-template-columns: 675px 1fr; gap: 48px; align-items: stretch; } .panel__caja { width: 810px; margin-left: -135px; /* se sale de la caja de 940 hasta 35 px del borde de ventana */ display: grid; grid-template-columns: 1fr .86fr; gap: var(--e5); align-items: end; background: var(--acento); border-radius: var(--r-grande); padding: var(--e6) var(--e6) 0; min-height: 470px; overflow: hidden; } /* 79 px de más aquí NO son aire decorativo: suben el botón hasta la altura donde el original tiene el suyo (fy 0,5 a scroll 688), que es donde `pair_frames` va a poner el ratón para la toma de hover. */ /* El botón del panel se queda donde lo pide la composición y NO donde caería el punto de hover del original. Se intentó cuadrarlo y el intento enseñó por qué no se debe: los tres puntos de hover son posiciones de scroll ABSOLUTAS (0, 688, 1188) más una fracción del viewport, así que empujar una sección con relleno mueve el documento y descoloca las otras dos. Cuadrado el del panel, se rompía el del equipo y la altura se iba de 4974 a 5052. Dos de tres caen dentro y el tercero queda como diferencia estructural declarada: mi botón está más abajo que el suyo dentro de la tarjeta. */ /* Cuatro líneas con dos de una sola palabra: el rag estaba roto. A 40 px y con la caja más ancha entra en dos líneas parejas. */ .panel__dicho { padding-bottom: var(--e6); display: flex; flex-direction: column; justify-content: center; } .panel__dicho .rotulo { font-size: 40px; max-width: 18ch; } .panel__retrato { margin: 0; align-self: end; } /* Tres radios distintos convivían en el bloque: rectángulo recto recortado por el radio del panel y una franja teal suelta a la derecha. Ahora sangra de verdad hasta el borde derecho e inferior de la tarjeta. */ /* Desborda el borde inferior de la tarjeta ~34 px: el original lo hace y el clon la tenía recortada dentro. El radio superior derecho acompaña al de la tarjeta. */ .panel__caja { overflow: visible; } .panel__retrato { margin: 0 -32px -34px 0; align-self: end; } /* Las cuatro esquinas con radio. Con la inferior izquierda a escuadra, la foto sobresalía en ángulo recto por debajo de una tarjeta muy redondeada: dos vocabularios de forma en la misma pieza, que se lee como fallo de recorte y no como decisión. */ .panel__retrato img { width: 100%; height: 470px; object-fit: cover; object-position: top center; border-radius: var(--r-media) var(--r-grande) var(--r-media) var(--r-media); } /* Botón de contorno sobre el teal: el original lo lleva en línea blanca, no macizo. */ .boton--contorno { background: transparent; color: var(--papel); border-color: rgba(255,255,255,.75); } .boton--contorno:hover { background: var(--papel); color: var(--acento-hondo); } .ventajas { display: flex; flex-direction: column; justify-content: space-between; gap: var(--e5); padding: var(--e5) 0; } .ventaja { display: flex; gap: var(--e3); } .ventaja__icono { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; background: var(--bruma); color: var(--acento-hondo); border-radius: var(--r-media); } .ventaja__icono svg { width: 20px; height: 20px; } .ventaja__rotulo { margin: 0 0 var(--e2); font: 400 26px/1.1 var(--display); color: var(--tinta); } .ventaja__texto { margin: 0; font-size: 13px; color: var(--tinta-suave); } /* ── SECCIÓN 2 · equipo (1292 a 2827 px) ─────────────────────────────────────── */ /* RECORTE DE AIRE MUERTO, CON LOS NÚMEROS DELANTE. Un barrido de la página midió cuatro bandas sin un solo píxel de contenido en escritorio: 253 px entre el contador de testimonios y la sección de notas, 239 px entre el último hito del recorrido y «Pedir cita», 172 px entre «Conoce al equipo completo» y la comilla, 145 px tras el paso de notas. Los tres jueces lo describieron igual: cuando la animación reserva sitio para algo que no llega, no se lee como aire de diseño, se lee como contenido que no cargó. Cada corte de aquí sale de una de esas cuatro medidas y deja las separaciones entre secciones en torno a 130 px. */ .equipo { padding: 88px 0 104px; } /* Igual que en el panel: el margen de arriba lleva el botón a fy 0,4994 a scroll 1188, que es el punto medido del original. Lo de arriba se recorta para no crecer la sección. */ .equipo__accion { display: flex; justify-content: center; margin: 56px 0 72px; } .equipo__rejilla { display: grid; grid-template-columns: 575px 1fr; gap: 48px; align-items: center; width: min(1190px, calc(100% - 90px)); margin-inline: auto; } /* Vuelve al contenedor con el radio del resto de tarjetas. En la ronda 1 un juez pidió sangrarla al borde de ventana; en la ronda 2 los DOS dijeron que a sangre y sin radio parece un descuadre y que en el original es una tarjeta apoyada en la rejilla. Dos jueces independientes coincidiendo pesan más que uno solo de la ronda anterior. */ .equipo__vista { margin: 0; } .equipo__marco { display: block; border-radius: var(--r-grande); overflow: hidden; } .equipo__pie { margin-top: var(--e3); font-size: 12px; color: var(--tinta-suave); } .equipo__vista img { width: 100%; height: 400px; object-fit: cover; } /* Es el ÚNICO bloque de equipo, y es lo que se mueve en horizontal atado al scroll. Antes había además un carril de tarjetas con los mismos médicos repetidos: el original no lo tiene, y montar dos bloques donde hay uno era el fallo serio. */ /* El marco recorta: la fila de seis mide más que su columna, que es justamente lo que el inventario midió en el original (scrollWidth mayor que clientWidth por 1,2). El guion toma este marco como contenedor, porque usa `carril.parentElement`. */ /* EL CARRIL ES UN SCROLLER CON ANCLAJE, NO UNA MARQUESINA. Historia corta de dos correcciones: Empezó atado al scroll de la página. Los nombres salían partidos en cualquier posición de reposo, y tres jueces distintos lo marcaron. Se ensanchó el desvanecido de 40 a 130 px, y eso fue peor: el corte duro se convirtió en apellidos a media opacidad —«Jackson Patel» con el nombre en negro y el apellido lavado—, que ya no parece un efecto sino un fallo de renderizado de fuente. Justo en la sección donde la promesa escrita es «el mismo médico en cada visita». El problema no era el ancho de la máscara: era que un recorrido continuo NO TIENE posiciones de reposo. Con anclaje por columna sí las tiene, y en todas se ven fichas enteras. El desvanecido baja a 48 px y ya solo hace de pista de que hay más a la derecha. */ .plantilla__marco { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; /* 32 px, no 48. El asomo mide 47 px, así que con 48 de desvanecido la ficha que asoma quedaba ENTERA dentro del degradado: se veía un jirón fantasma de médico al ~35 % en vez de un borde de tarjeta. Un juez lo leyó como render fallido, y con razón: medio retrato difuminado y partido no dice «hay más», dice «esto se rompió». Con 32 el asomo tiene 15 px macizos antes de empezar a apagarse, que es lo que lo convierte en un borde y no en un fantasma. */ -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%); } .plantilla__marco::-webkit-scrollbar { display: none; } /* El mando: barra de posición a la izquierda y flechas a la derecha. La barra es además la única pista visual de que el carril se puede mover; sin ella, quien no arrastre se queda creyendo que la clínica tiene tres médicos y medio. */ /* La zona agrupa carril y mando para que ocupen UNA sola celda de la rejilla del equipo. */ .plantilla__zona { min-width: 0; } .plantilla__mando[hidden] { display: none; } .plantilla__mando { display: flex; align-items: center; gap: var(--e5); margin-top: var(--e5); } .plantilla__barra { flex: 1; height: 3px; background: var(--bruma); border-radius: 3px; overflow: hidden; } .plantilla__barra i { display: block; height: 100%; width: 100%; background: var(--acento); transform-origin: 0 50%; transform: scaleX(.4); } .plantilla__flechas { display: flex; gap: var(--e2); } /* Un control agotado tiene que PARECER agotado, y el `:hover` no puede resucitarlo. Sin la segunda regla, la flecha del extremo se rellenaba de teal al pasar por encima y se leía como el control más enfático de la pantalla sin tener nada a lo que avanzar. */ .flecha[disabled] { opacity: .32; cursor: default; } .flecha[disabled]:hover { background: transparent; color: var(--tinta); border-color: var(--borde-color, rgba(43,43,43,.18)); } .boton[disabled] { opacity: .35; cursor: default; pointer-events: none; } .plantilla { display: flex; gap: var(--e5); } /* LA COLUMNA MIDE MEDIO CONTENEDOR EXACTO, y eso mata el asomo en vez de disimularlo. Con 236 px fijos sobraban 71 px al final, así que en reposo asomaba un jirón de ficha: aquí una ficha no es una tarjeta con fondo, es un retrato y dos líneas, de modo que el asomo no enseñaba un borde sino media cara recortada. No hay ancho de desvanecido que arregle eso. Cabiendo dos columnas justas, cada posición de anclaje enseña dos fichas enteras y ninguna a medias; quien dice que hay más es la barra de posición, que para eso está. */ .plantilla__col { display: flex; flex-direction: column; gap: var(--e5); flex: 0 0 calc(50% - 12px); scroll-snap-align: start; } .medico { align-items: flex-start; } .medico { display: flex; align-items: center; gap: var(--e3); } .medico img { width: 56px; height: 56px; border-radius: var(--r-pildora); border: var(--borde); object-fit: cover; } .medico__area { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--acento-hondo); } .medico__nombre { display: block; font: 400 25px/1.1 var(--display); color: var(--tinta); white-space: nowrap; } .equipo__enlace { display: flex; justify-content: flex-end; margin: 40px auto; padding-right: 96px; } .voces { padding-top: 48px; } .voces__caja { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: var(--e5); } .flecha { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--bruma); background: var(--papel); color: var(--tinta-suave); border-radius: var(--r-pildora); cursor: pointer; transition: background-color var(--paso), color var(--paso), border-color var(--paso); } .flecha svg { width: 20px; height: 20px; } /* EL HOVER, SOLO DONDE HAY PUNTERO. En táctil no hay hover: el navegador lo deja pegado tras el toque, y una flecha rellena de forma permanente se lee como «estás aquí» o como un control atascado, además de descuadrar la pareja. */ @media (hover: hover) { .flecha:hover { background: var(--acento); color: var(--papel); border-color: var(--acento); } } /* `display: grid` anulaba el atributo `hidden` y el carrusel enseñaba las dos citas a la vez, con el retrato de una pegado bajo el nombre de la otra. Lo vieron los dos. */ /* VENTANA Y CARRO. La ventana recorta y el carro se desliza dentro: dos citas no pueden pisarse porque nunca ocupan el mismo sitio, y no hay instante vacío porque siempre hay una en cuadro. La altura sale sola, la de la voz más alta, así que nada salta al cambiar. Sin JS el carro no se mueve y la ventana enseña la primera voz, que es un estado correcto. */ /* LA MÁSCARA DE LOS CANTOS ES LA PIEZA QUE FALTABA, y la pidieron los dos jueces de la misma ronda con las mismas palabras. El deslizamiento resolvió lo estructural —dos citas no pueden pisarse ni dejar hueco si nunca ocupan el mismo sitio— pero dejó un defecto nuevo: a mitad de recorrido las dos mitades visibles se cortaban EN SECO contra el borde del contenedor, con los glifos partidos por la mitad. Un juez lo describió como «rebanado a media frase», y en un testimonio eso se lee como fallo de carga, no como transición. Con el desvanecido, lo que sale y lo que entra se disuelven en vez de guillotinarse. Es el mismo recurso que lleva el carril del equipo, por el mismo motivo: cuando algo se mueve dentro de una ventana, el canto de la ventana no puede ser un corte. */ /* SIN JS LA VENTANA NO TIENE ALTURA Y ENSEÑA LAS CUATRO VOCES APILADAS. Es deliberado: la altura la fija el script porque depende del reparto de líneas, y sin script el estado degradado que sale es que todo el contenido se lee, que es mejor que enseñar una y esconder tres tras unas flechas que no hacen nada. La página se alarga 617 px y no se pierde nada. */ .voces__pista { overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); } /* VERTICAL EN LOS DOS ANCHOS, y llegar aquí costó seis versiones. El deslizamiento resolvió lo estructural —dos citas no pueden pisarse ni dejar hueco si nunca ocupan el mismo sitio— pero en horizontal el corte de la ventana cae DENTRO de las palabras. Cuatro jueces distintos, en dos rondas y en los dos anchos, usaron la misma imagen: «rebanado a media frase». Primero se giró solo el móvil, donde el problema era más evidente; los jueces de la ronda siguiente lo encontraron igual en escritorio, porque la cita mide 30 caracteres y la ventana no le saca tanto margen como parecía. En vertical el corte cae entre RENGLONES. Es la misma frontera que el ojo cruza al leer, así que no se percibe como mutilación. Se conserva todo lo bueno del deslizamiento y desaparece el único defecto que le quedaba. */ .voces__carro { display: flex; flex-direction: column; align-items: stretch; } /* Centrado bajo la cita, que está centrada. Alineado a la izquierda quedaba huérfano a media pantalla de su contenido, como si perteneciera a otro bloque. */ .voces__cuenta { margin: var(--e4) 0 0; text-align: center; font-size: 12px; color: var(--tinta-suave); } /* `flex: 0 0 auto` con ancho al 100 %, NO `flex: 0 0 100%`. En una fila, `flex-basis: 100%` es el ancho; en una columna es el ALTO, así que al girar el eje cada voz pasó a medir una ventana de alto y ninguna de ancho: se veían las cuatro apiladas y el texto se iba a la izquierda. La base se declara en el eje principal, y al cambiar de eje cambia de significado. */ .voz { flex: 0 0 auto; width: 100%; margin: 0; text-align: center; display: grid; justify-items: center; gap: var(--e3); align-content: start; } .voz__cara { width: 92px; height: 92px; border-radius: var(--r-pildora); object-fit: cover; border: var(--borde); } .voz__texto { margin: 0; font: 400 26px/1.35 var(--display); color: var(--tinta); max-width: 30ch; } .voz__nombre { font: 400 26px/1.1 var(--display); color: var(--tinta); font-style: normal; } /* ── SECCIÓN 3 · notas (2827 a 4113 px) ────────────────────────────────────── Medida: 1286 px de alto, 1,61 de pantalla. La primera versión la montó como una rejilla plana de dos tarjetas y se quedó en 693 px: 593 cortos, que eran casi todo el déficit de altura del clon (738 px sobre 5000). El original apila los artículos en la columna derecha, con la imagen grande, y cierra con paginación. */ .notas { padding: 80px 0; } .notas__rejilla { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--e6) 48px; } .notas__dicho { padding-top: var(--e5); } .notas__anclado { position: sticky; top: 140px; } /* ── el índice de notas ─────────────────────────────────────────────────────────── Apagado en reposo y encendido el que estás leyendo. La raya de la izquierda crece por escala, no por ancho: escalar no toca el layout, y así el índice no empuja al párrafo de arriba cada vez que cambias de nota. */ .indice { list-style: none; margin: var(--e6) 0 0; padding: 0; display: grid; gap: var(--e4); } .indice__fila { position: relative; padding-left: var(--e5); display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: baseline; color: var(--tinta-suave); transition: color 320ms ease; } .indice__fila::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--acento); border-radius: 2px; transform: scaleY(0); transform-origin: 50% 0; transition: transform 380ms cubic-bezier(.22,.61,.36,1); } .indice__fila--activa { color: var(--tinta); } .indice__fila--activa::before { transform: scaleY(1); } .indice__n { font: 700 11px/1.4 var(--cuerpo); letter-spacing: 1px; color: var(--acento-hondo); } .indice__t { font-size: 13px; line-height: 1.5; } .notas__pila { display: flex; flex-direction: column; gap: 48px; } .nota__vista { margin: 0 0 var(--e4); border-radius: var(--r-media); overflow: hidden; } .nota__vista img { width: 100%; height: 300px; object-fit: cover; } .nota__titulo { margin: 0 0 var(--e2); font: 400 26px/1.2 var(--display); color: var(--tinta); } .nota__texto { margin: 0 0 var(--e3); font-size: 13px; color: var(--tinta-suave); } .notas__paso { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: var(--e5); border-top: 1px solid var(--bruma); padding-top: var(--e5); margin-top: var(--e2); } .notas__cuenta { font-size: 13px; color: var(--tinta-suave); } /* ── SECCIÓN 4 · boletín (4113 a 4528 px) ────────────────────────────────────── */ .boletin { padding: var(--e2) 0 var(--e6); } .boletin .marco { width: 100%; max-width: none; } .boletin__caja { width: min(1040px, calc(100% - 60px)); margin-inline: auto; background: var(--acento); border-radius: var(--r-grande); padding: var(--e6) var(--e6); text-align: center; display: grid; justify-items: center; } .boletin__signo { width: 44px; height: 44px; color: var(--papel); margin-bottom: var(--e3); } .boletin__signo svg { width: 100%; height: 100%; } .boletin__forma { display: flex; gap: var(--e2); background: var(--papel); border-radius: var(--r-pildora); padding: var(--e1); width: min(520px, 100%); } .boletin__forma input { flex: 1; border: 0; background: transparent; padding: var(--e3) var(--e5); font: 400 14px var(--cuerpo); color: var(--tinta); } .boletin__forma input:focus { outline: 2px solid var(--acento-hondo); outline-offset: 2px; border-radius: var(--r-pildora); } /* ── SECCIÓN 5 · pie (4528 a 5000 px) ────────────────────────────────────────── */ /* 472 px medidos: la primera versión se quedó en 352. */ .pie { background: var(--papel); padding: 0 0 var(--e5); font-size: 13px; } .pie__columna a { color: rgba(255,255,255,.86); } .pie__panel { background: var(--tinta); color: rgba(255,255,255,.72); width: min(1200px, calc(100% - 40px)); margin-inline: auto; border-radius: var(--r-grande); padding: 136px 48px var(--e5); } .pie__panel .marco { width: auto; } .pie__rejilla { display: grid; grid-template-columns: 1.5fr .85fr .95fr .85fr .8fr 1.1fr; gap: var(--medianil); } .pie__texto { margin: var(--e3) 0 var(--e5); max-width: 34ch; } .pie__columna { display: flex; flex-direction: column; gap: var(--e2); } .pie__columna h4 { margin: 0 0 var(--e2); font: 400 24px/1 var(--display); color: var(--papel); } .pie__columna a { transition: color var(--paso); } .pie__tel { font: 400 20px/1.2 var(--display); color: var(--papel); } .pie__columna a:hover { color: var(--acento); } .pie__social { display: flex; gap: var(--e3); margin-bottom: var(--e3); } .pie__social a { color: rgba(255,255,255,.6); transition: color var(--paso); } .pie__social a:hover { color: var(--acento); } .pie__social svg { width: 20px; height: 20px; display: block; } .pie__forma { display: flex; gap: var(--e1); background: rgba(255,255,255,.08); border-radius: var(--r-pildora); padding: var(--e1); } .pie__forma input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--papel); padding: var(--e2) var(--e4); font: 400 13px var(--cuerpo); } .pie__forma input::placeholder { color: rgba(255,255,255,.72); } .pie__forma button { width: 34px; height: 34px; flex: 0 0 auto; border: 0; cursor: pointer; background: var(--acento); color: var(--papel); border-radius: var(--r-pildora); display: grid; place-items: center; transition: background-color var(--paso); } .pie__forma button:hover { background: var(--papel); color: var(--tinta); } .pie__forma button svg { width: 18px; height: 18px; } .pie__raya { display: flex; justify-content: space-between; gap: var(--e5); margin-top: 64px; padding-top: var(--e5); border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; color: rgba(255,255,255,.5); } /* ── mecánica ──────────────────────────────────────────────────────────────────── QUIÉN ESCONDE, Y POR QUÉ NO ES ESTA HOJA A SECAS. Las piezas que revela GSAP tienen que arrancar invisibles o se ven un fotograma antes de que el módulo corra. Pero esconder desde la hoja sin más deja la página EN BLANCO a quien lleve el JS caído. Por eso todo lo de aquí abajo cuelga de `.movimiento`, y esa clase la pone un bloque síncrono en la cabeza que además comprueba `prefers-reduced-motion`. Sin JS, con JS roto o con movimiento reducido, la clase no está y no se esconde nada. `data-entra` → entra una vez y se queda (lo monta GSAP con ScrollTrigger, once). `data-paralaje` → desplazamiento corto atado al scroll y reversible; la amplitud en px va en el atributo. */ /* LA LISTA ENTERA DE LO QUE ARRANCA INVISIBLE, EN UN SOLO SITIO. Repartirla —cada pieza escondiéndose sola donde le toca— es lo que produce el defecto clásico: una que se olvidó parpadea a plena vista y salta a su posición inicial en cuanto corre el módulo. Y la lista tiene que estar en la HOJA, no en el JS: si esperase a que corra GSAP ya sería tarde, porque el navegador habría pintado un fotograma con todo puesto. El contrato con el JS es estricto y en un solo sentido: TODO selector de aquí abajo lo destapa `gsap.set(OCULTOS, { opacity: 1 })` como primera línea de la fase de montaje, antes de construir ningún tween. Añadir aquí un selector que no esté en `OCULTOS` deja esa pieza invisible para siempre. Los dos sitios se leen juntos o no se lee ninguno. Los titulares además se parten en líneas con SplitText, y ese reparto solo es correcto después del layout: sin esconderlos se ve el párrafo entero y luego salta a sus máscaras. */ .movimiento .titular, .movimiento .rotulo, .movimiento .lienzo, .movimiento .horario, .movimiento .ficha, .movimiento .portada__dicho .entradilla, .movimiento .portada__pie .boton, .movimiento .valoracion__caras img, .movimiento .valoracion__dicho, .movimiento .ventaja, .movimiento .hito, .movimiento .linea__rotulo, .movimiento .medico, .movimiento .pie__rejilla > *, .movimiento [data-entra] { opacity: 0; } /* El contenedor de líneas que fabrica SplitText: la máscara que hace que cada línea suba desde detrás del borde en vez de aparecer flotando. */ .linea-mascara { overflow: hidden; display: block; } /* ── la barra al bajar ──────────────────────────────────────────────────────────── SOLO SOMBRA, y es una decisión, no una versión corta. Encoger la barra al hacer scroll es el gesto de manual, pero la barra está en flujo (sticky), así que cambiarle el alto mueve el documento entero y descuadra todo lo que se midió contra el original. La sombra despega la barra del contenido sin tocar un solo píxel de layout. AQUÍ VIVÍA UN HILO DE PROGRESO DE LECTURA, y lo quitaron dos jueces que no se hablaban entre sí. Los dos escribieron casi el mismo argumento: es un gesto de blog largo y de portafolio de agencia, y mete prisa en una página cuyo negocio es la calma. Cuando dos lecturas independientes coinciden en el motivo, deja de ser cuestión de gusto. */ .barra { transition: box-shadow 260ms ease, border-color 260ms ease; } .barra--posada { box-shadow: 0 6px 24px rgba(43,43,43,.07); border-bottom-color: transparent; } /* Solo existe en el ancho estrecho; ver el bloque de ese ancho más abajo. */ .accion-movil { display: none; } /* ── LA LÍNEA DE LA CONSULTA ────────────────────────────────────────────────────── Tres hitos sobre un carril que se dibuja al bajar. En horizontal a partir de 861 px y en vertical por debajo; el mismo marcado sirve para las dos porque quien dibuja es una caja que escala, no un trazado con viewBox. */ .linea { padding: var(--e6) 0 var(--e4); } .linea__rotulo { margin: 0 0 var(--e6); font: 400 34px/1.15 var(--display); color: var(--tinta); text-align: center; } .linea__pista { position: relative; } /* El carril: la raya apagada de fondo y, dentro, la viva que crece con el scroll. `transform-origin` en el borde de arranque es lo que hace que se DIBUJE en vez de crecer por los dos lados. */ /* 3 px, no 2. A 2 el trazo se leía como un filete de tabla y un juez directamente lo contó como «1 px muy pálido»: si el gesto principal de una sección es que algo se dibuja, ese algo tiene que tener cuerpo suficiente para verse dibujarse. */ .linea__raya { position: absolute; left: 0; right: 0; top: 11px; height: 3px; background: var(--bruma); border-radius: 3px; overflow: hidden; } .linea__raya-viva { display: block; width: 100%; height: 100%; background: var(--acento); transform: scaleX(0); transform-origin: 0 50%; } /* SIN `position: relative`, y no es que sobre: es que estorba. Posicionar la lista la convierte en el `offsetParent` de las fichas, y entonces las medidas de layout que usa el script para encajar el carril quedan en un origen distinto del de la propia raya. */ .linea__hitos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e6); } /* `align-content: start` Y NO ES COSMÉTICO: sin él, los tres rótulos caían en tres líneas base distintas. Dos jueces midieron esa escalera de 7 px y los dos la atribuyeron a una transformación de la animación sin limpiar. No lo era —medido, los tres hitos tenían `transform: none`— y buscarlo en el JS no habría dado con ello nunca. La causa es de rejilla: los tres hitos son celdas hermanas y se estiran a la misma altura, y dentro de cada uno las filas se repartían el espacio sobrante. El del medio lleva una línea más de texto, así que le sobraba menos y sus filas se colocaban más arriba. Empaquetando arriba, el sobrante se va todo al final y los tres empiezan en el mismo sitio. */ .hito { display: grid; align-content: start; justify-items: start; gap: var(--e2); padding-right: var(--e5); } /* El punto se apoya EN el carril, así que su tamaño y la posición de la raya están atados: 24 de punto sobre una raya a 11 lo deja centrado en ella. */ /* El encendido va en la hoja y no en un tween, y es a propósito: quien decide CUÁNDO se enciende es el scrub de la raya, que le pone la clase justo al pasar por encima. Separar el momento (JS) del aspecto (CSS) deja el punto con un estado legible en el inspector y hace que sobreviva sin GSAP: sin JS los tres se ven apagados sobre un carril completo, que es un diagrama correcto, no un hueco. */ .hito__punto { transition: border-color 320ms ease, background-color 320ms ease; } .hito__punto::after { transition: transform 380ms cubic-bezier(.22,.61,.36,1); } .hito--vivo .hito__punto { border-color: var(--acento); background: var(--papel); } /* EL TEXTO NO SE ANIMA. QUINTA Y ÚLTIMA VERSIÓN DE ESTA DECISIÓN, y la zanja un principio, no un juez más. El historial, porque explica por qué esto parece dar bandazos: atado al trazo, los pasos aún no alcanzados quedaban EN BLANCO y un juez lo leyó como «información censurada». Suelto y al 100 %, dos jueces dijeron que la línea no revelaba nada. Al 25 %, otro dijo lo que cierra el asunto: si el usuario se para ahí —o llega a media rueda de ratón— tiene un párrafo de la promesa de seguimiento en gris ilegible, y ESO no es un estado de animación, es texto que no se puede leer. «Se puede animar la línea, no la legibilidad.» El texto de un paso de «cómo es una visita» es información, y la información no se atenúa para hacer sitio a un gesto. Lo que progresa con el scroll es la línea y el relleno del punto, que es lo que significa progreso. Los tres puntos conservan además la misma forma de anillo en los dos estados, para que el pendiente se lea como pendiente y no como otro componente. */ .hito--vivo .hito__punto::after { transform: scale(1); } /* EL PUNTO PENDIENTE TIENE QUE PARECER PENDIENTE, NO UN AGUJERO. Hueco y blanco sobre blanco, al lado de un texto perfectamente legible, se leía como una casilla sin marcar o como un elemento que no cargó. Relleno de bruma: se ve que está ahí y se ve que aún no le toca. */ /* EL PUNTO PENDIENTE VA EN TEAL AL 20 %, NO EN GRIS. Con `--bruma` era exactamente el mismo gris que una flecha deshabilitada, y el ojo no leía «la línea aún no ha llegado» sino «este paso no está disponible». En una explicación de cómo es una visita, sugerir que el seguimiento posterior está apagado es el peor malentendido posible. En teal claro se lee como pendiente. */ .hito__punto { width: 24px; height: 24px; border-radius: 50%; background: rgba(112,189,201,.2); border: 2px solid rgba(112,189,201,.32); display: grid; place-items: center; margin-bottom: var(--e2); } .hito__punto::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); transform: scale(0); } .hito__cuando { font: 700 12px/1 var(--cuerpo); letter-spacing: .8px; text-transform: uppercase; color: var(--acento-hondo); } .hito__que { font-size: 13px; line-height: 1.65; color: var(--tinta-media); max-width: 30ch; } /* La foto se mueve DENTRO de su marco, no el marco dentro de la página: el marco conserva su caja exacta y lo único que cambia es el encuadre. La escala de reposo es lo que da margen para moverla sin descubrir el fondo. */ .lienzo img, .equipo__vista img, .nota__vista img { will-change: transform; } /* ═══════════════════════════════════════════════════════════════════════════════ ANCHO ESTRECHO · medido a 390×844 sobre el original, no deducido de encoger Es LA MISMA PÁGINA respondiendo a un ancho estrecho: un solo build, dos viewports. El expediente vive en clones/clinica-aurelia-movil/ y su build es un enlace a éste. Lo que midió `extract_design` a 390 y que NO se puede sacar del viewport ancho: · rejilla una columna · contenido 376 · margen 8 · medianil 24 · ritmo espaciados 4, 8, 16, 20, 24, 32 · radios 0, 10, 16, 100 ← en 1280 son 0, 20, 36, 100: las esquinas SE CIERRAN · escala 40 (1,6 %) · 26 (1,3 %) · 24 (19,9 %) · 16 (15,9 %) · 13 (40 %) · 12 el display baja de 80 a 48 de máximo, y el cuerpo dominante es 13 · alto 6282 px, 7,4 pantallas, frente a 5000 y 6,3 en escritorio · nav CERO enlaces visibles: se pliega entera en un botón de 48 px · mecánica la tira horizontal SIGUE existiendo a este ancho, y el reparto entre entradas que disparan una vez y parallax reversible es el mismo ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { /* LA LÍNEA DE LA CONSULTA, EN VERTICAL. El carril baja por la izquierda y los hitos cuelgan de él. Es el mismo marcado y el mismo tween: lo único que cambia es el eje. */ .linea { padding: var(--e6) 0 var(--e5); } .linea__rotulo { font-size: 26px; margin-bottom: var(--e5); } .linea__raya { left: 11px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; } .linea__raya-viva { transform: scaleY(0); transform-origin: 50% 0; } .linea__hitos { grid-template-columns: 1fr; gap: var(--e5); } .hito { grid-template-columns: 24px 1fr; column-gap: var(--e4); align-items: start; padding-right: 0; } .hito__punto { grid-row: 1 / span 2; margin-bottom: 0; } .hito__cuando, .hito__que { grid-column: 2; } .hito__que { max-width: none; } :root { /* Los radios del ancho estrecho son OTROS, no los mismos escalados. */ --r-media: 10px; --r-grande: 16px; } .marco, .marco-ancho { width: min(376px, calc(100% - 16px)); } /* ── tipografía: la escala de 390, no la de 1280 encogida ─────────────────── */ .titular { font-size: 40px; line-height: 1.06; margin-bottom: var(--e2); text-wrap: balance; max-width: 15ch; margin-inline: auto; } .rotulo { font-size: 26px; line-height: 1.12; } .rotulo--centro { font-size: 26px; } /* Cabía en una línea a la fuerza y la última letra moría a 6 px del bisel. Dos líneas y la comilla grande, como el original. */ .rotulo--comilla { font-size: 30px; white-space: normal; max-width: 11ch; margin-inline: auto; text-wrap: balance; } .rotulo--comilla .comilla { font-size: 2.1em; } /* El ancho de medida del escritorio, en vertical, deja una columna vacía a la derecha que se lee como fallo de maquetación: la entradilla rompía al 62 % de la pantalla mientras el rótulo de al lado iba centrado a lo ancho. Un eje por sección. */ .entradilla { font-size: 13px; max-width: none; } body { font-size: 13px; } /* Todo a una columna y centrado, que es como se compone el original a este ancho. */ .portada__rejilla, .panel__rejilla, .panel__caja, .equipo__rejilla, .notas__rejilla, .pie__rejilla { grid-template-columns: 1fr; gap: var(--e5); } /* ── cinta y barra ───────────────────────────────────────────────────────── */ .cinta__fila { justify-content: center; gap: var(--e2); font-size: 11px; } .barra__fila { height: 64px; } .barra__enlaces, .barra__acciones { display: none; } /* cero enlaces, como el original */ .hamburguesa { display: grid; place-content: center; gap: 5px; width: 48px; height: 48px; margin-right: -4px; /* Sin margen negativo queda despegada del borde; con -8 el documento medía 391 px en un viewport de 390 y la página se movía de lado. Un píxel de desbordamiento en móvil se nota. */ background: none; border: 0; cursor: pointer; } .hamburguesa span { display: block; width: 26px; height: 2px; background: var(--tinta); transition: transform var(--paso), opacity var(--paso); } .hamburguesa--abierta span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburguesa--abierta span:nth-child(2) { opacity: 0; } .hamburguesa--abierta span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* EL `display` EXPLICITO ANULA EL ATRIBUTO `hidden`, y aqui costo caro: el menu se quedaba abierto en los 25 fotogramas, tapando la pagina entera de 98 px para abajo. El delta medio salio 64 con pico 169 cuando en escritorio cierra en 22. Es la SEGUNDA vez en este clon que este mismo descuido rompe algo: la primera fue el carrusel de testimonios, que ensenaba dos citas a la vez por la misma razon. */ /* La sombra despega el panel de la página. Sin ella son dos blancos idénticos y el borde superior del menú no existe: la única pista de que hay un panel es que tapa algo. */ /* Cuando la cabecera se recoge, el menú sube con ella: si no, se abriría dejando una franja de página asomando por encima. Es hermano de la cabecera y no hijo, así que su `inset` se mide contra la ventana y no contra un contenedor transformado. */ body.cabecera--compacta .menu { top: 64px; } .menu { position: fixed; inset: 98px 0 0; z-index: 18; background: var(--papel); box-shadow: 0 -1px 0 var(--bruma), 0 18px 40px rgba(43,43,43,.10); padding: var(--e5) 16px; display: flex; flex-direction: column; gap: var(--e5); } .menu[hidden] { display: none; } .menu__enlaces { display: flex; flex-direction: column; } .menu__enlaces a { padding: var(--e4) 0; font: 400 24px/1 var(--display); color: var(--tinta); border-bottom: 1px solid var(--bruma); } /* Los botones se anclan al fondo de la capa. Terminando pegados a los enlaces dejaban 255 px de blanco liso debajo, y una capa a pantalla completa que solo usa el tercio superior se lee como que faltan opciones o como que no terminó de cargar. */ /* Sin `margin-top: auto`: empujado al fondo dejaba 95 px de blanco muerto en medio del panel, y peor, el teléfono entraba el último del escalonado. En un menú de clínica el teléfono no puede ser lo último que llega. Va pegado a los enlaces y entra con ellos. */ .menu__contacto { display: flex; flex-direction: column; gap: var(--e2); padding-top: var(--e5); border-top: 1px solid var(--bruma); } .menu__tel { font: 400 28px/1.1 var(--display); color: var(--tinta); } .menu__dato { font-size: 13px; color: var(--tinta-suave); } a.menu__dato { color: var(--acento-hondo); } .menu__acciones { display: flex; flex-direction: column; gap: var(--e2); margin-top: auto; } .menu__acciones .boton { width: 100%; } body.con-menu { overflow: hidden; } /* SITIO RESERVADO PARA LA BARRA FIJA, PERO EN EL PIE Y NO EN EL BODY. Puesto en el `body`, el relleno pintaba 88 px del color de la página —blanco— POR DEBAJO del pie oscuro: una banda clara al final del scroll que un juez leyó como que la página estaba cortada. Metido en el pie, el mismo hueco existe y lo pinta el fondo oscuro, así que la página termina donde tiene que terminar. */ .pie__panel { padding-bottom: 88px; } /* Las flechas del carril sobran donde hay dedo: la superficie ya se arrastra, están por debajo del objetivo táctil cómodo y encima caen justo donde el pulgar tapa la propia tira. La barra de posición se queda, que es la que dice cuánto falta. */ .plantilla__flechas { display: none; } .plantilla__mando { margin-top: var(--e3); } /* ── LA BARRA DE ACCIÓN ─────────────────────────────────────────────────────── LO QUE FALTABA, Y ERA LO MÁS CARO QUE FALTABA. En escritorio la barra lleva «Pedir cita» permanentemente a la vista. A este ancho la navegación entera se pliega en la hamburguesa, y con ella se fue el botón: se podía recorrer media página sin ninguna forma de pedir cita salvo abrir un menú. Eso no es una animación de menos, es la conversión de un negocio de una sola conversión escondida detrás de un gesto. Se quitó algo y no se puso el equivalente móvil, que es la definición de escritorio encogido. Sale al pasar la portada y se retira al llegar al pie, donde el botón ya está en la página y taparlo sería estorbar. Arranca fuera de cuadro por transformación, así que sin JS no aparece nunca en vez de quedarse pegada. */ .accion-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 17; display: flex; align-items: center; gap: var(--e2); padding: var(--e3) 16px calc(var(--e3) + env(safe-area-inset-bottom, 0px)); background: var(--papel); box-shadow: 0 -1px 0 var(--bruma), 0 -14px 34px rgba(43,43,43,.10); transform: translateY(110%); } .accion-movil .boton { flex: 1; } .accion-movil__tel { flex: 0 0 48px; width: 48px; height: 48px; border-radius: var(--r-pildora); display: grid; place-items: center; border: 2px solid var(--acento); color: var(--acento-hondo); } .accion-movil__tel svg { width: 22px; height: 22px; } body.con-menu .accion-movil { display: none; } /* ── portada ─────────────────────────────────────────────────────────────── */ /* El aire de aquí arriba no es decorativo: `pair_frames` pone el ratón de la toma de hover en la fracción que MIDIÓ el original (fy 0,512, o sea y=432 a 844 de alto). Con el botón en y=484 el puntero pasaba 52 px por encima y el par salía sin estado, que es lo que dos jueces leyeron como "el botón no tiene hover". */ .portada { padding: var(--e2) 0 0; } .portada__rejilla { min-height: 0; text-align: center; } .portada__dicho { display: flex; flex-direction: column; align-items: center; } /* Centrar la entradilla SOLO en el hero. Aplicado a todo el ancho estrecho, dejaba el párrafo de las notas indentado ~30 px respecto a su propio titular, que va a la izquierda: el bloque se leía sin eje. Lo dijeron los dos ejes. */ .portada__dicho .entradilla { margin-inline: auto; margin-bottom: var(--e2); } /* El original apila valoración y BOTÓN, y el botón va casi a todo el ancho. */ .portada__pie { flex-direction: column-reverse; align-items: center; gap: var(--e2); width: 100%; } .portada__pie .boton { width: 68%; } .valoracion { flex-direction: column; gap: var(--e2); } /* Cortaban la coronilla y dejaban la cara baja dentro del círculo, en el primer golpe. */ .valoracion__caras img { object-position: 50% 22%; width: 42px; height: 42px; margin-left: -14px; } .valoracion__dicho { align-items: center; text-align: center; } .lienzo img { height: 420px; } .horario { left: 12px; top: 12px; font-size: 12px; } .portada__flotante { height: 0; } .ficha { display: none; } /* a este ancho el original no lo saca: no hay sitio y pisaría */ /* ── panel ───────────────────────────────────────────────────────────────── */ .panel { padding: 32px 0 0; } .panel__caja { width: auto; margin-left: 0; min-height: 0; padding: var(--e5); text-align: center; } .panel__dicho { padding-bottom: 0; align-items: center; } .panel__dicho .rotulo { font-size: 26px; max-width: none; } .panel__dicho .boton { width: 72%; margin: 0 auto var(--e5); } /* La foto sobresalia 14 px por debajo de la tarjeta y asomaba una franja teal con esquinas redondeadas, que se leia como una capa mal registrada. Va a ras. */ /* Sangraba por la derecha y conservaba margen y radio por la izquierda: se leia como un bloque descuadrado y ademas como una seccion aparte intercalada entre la banda teal y la lista de iconos, que el original no tiene. Va DENTRO de la tarjeta. */ .panel__retrato { margin: 0 0 var(--e5); align-self: stretch; } .panel__retrato img { height: 340px; border-radius: var(--r-media); display: block; } /* Las características se centran y el icono sube ENCIMA del título. */ .ventajas { padding: 28px 0 0; gap: 24px; } .ventaja { flex-direction: column; align-items: center; text-align: center; gap: var(--e3); } /* Eran menta casi blanca con el glifo en teal claro: a este tamano no se veian y la lista perdia su segundo golpe de lectura. Teal macizo con el glifo en blanco. */ .ventaja__icono { width: 64px; height: 64px; background: var(--acento); color: var(--papel); } .ventaja__icono svg { width: 28px; height: 28px; stroke-width: 2.4; } .ventaja__texto { max-width: 30ch; margin-inline: auto; } /* ── equipo ──────────────────────────────────────────────────────────────── */ .equipo { padding: 32px 0; } .equipo__accion { margin: var(--e5) 0 40px; } .equipo__accion .boton { width: 68%; } .equipo__rejilla { width: auto; } .equipo__vista img { height: 300px; } /* Sin contenedor, avatar y nombre flotaban sueltos sobre blanco y los cortes del carril se leian como texto roto en vez de como tarjetas que continuan. */ /* A ESTE ANCHO NO HAY CARRUSEL: LAS CUATRO FICHAS SE APILAN. Con ocho médicos el arrastre tenía sentido. Con cuatro —y el recorte a cuatro salió de que ocho especialistas no son una consulta de barrio— lo que quedaba era un gesto que se agota en un empujón: dos posiciones, una barra de progreso llena desde el primer avance, y un muñón de tarjeta asomando por la izquierda en el segundo. Los dos jueces de la ronda 8 lo dijeron con la misma frase: si solo hay cuatro, no montes carrusel, apílalos. Apiladas caben enteras, a ancho completo, sin nada que recortar ni que anclar. Y el mando desaparece solo, porque `montarTira` lo esconde cuando no hay nada que recorrer. */ .plantilla__marco { overflow: visible; -webkit-mask-image: none; mask-image: none; } .plantilla { flex-direction: column; padding-right: 0; } .plantilla__col { flex: 1 1 auto; width: 100%; } /* UNA COLUMNA POR PANTALLA. A 208 px cabían dos, y la segunda salía SIEMPRE partida por el texto: «PSIQUIA», «DERMAT», «Sophia Martí…». Eso no es un asomo que invite a arrastrar, es una ficha mutilada, y justo en la sección donde una clínica vende nombre y especialidad. A ancho de pantalla menos el asomo, lo que se ve cortado es el BORDE de la tarjeta siguiente, que sí dice «hay más» sin romper una palabra. */ /* Asomo de 26 px, no de 46, y sin desvanecido encima. Con 46 se comía casi el 13 % del ancho útil para enseñar un trozo de retrato bajo un degradado, o sea gastaba sitio en no comunicar. 26 px de borde de tarjeta macizo dicen «hay más» y no cuestan casi nada. */ .plantilla__col { gap: var(--e3); } .plantilla__marco { -webkit-mask-image: none; mask-image: none; } .medico { min-height: 0; } .medico { background: var(--bruma); border: 1px solid #dcecf0; border-radius: var(--r-grande); padding: var(--e4) var(--e4) var(--e4) var(--e3); gap: var(--e3); align-items: center; } .medico div { min-width: 0; } .medico__nombre { white-space: normal; } .medico img { width: 48px; height: 48px; } .medico__nombre { font-size: 20px; } .equipo__enlace { justify-content: center; padding-right: 0; margin: 40px auto; } .voces { padding-top: 40px; } /* LAS FLECHAS SALEN DE DENTRO DE LA CITA. A los lados dejaban cinco píxeles de aire hasta el texto —medido por un juez— y con 44 px de área táctil el testimonio se leía con dos discos metidos en su caja. La cita pasa a ocupar el ancho completo y los controles bajan debajo, que es donde el pulgar los alcanza sin tapar lo que se está leyendo. */ /* EL CARRUSEL GIRA DE EJE, COMO LA LÍNEA DE TIEMPO. Y por el mismo motivo: un gesto no se encoge, se traduce. En horizontal, a 390 px, la cita ocupa casi todo el ancho de su ventana, así que a mitad de recorrido se ven la cola de una y la cabeza de otra CORTADAS A MEDIA PALABRA. En escritorio no pasa porque la ventana es mucho más ancha que el texto y el corte cae en margen. Un juez lo describió como «texto mutilado durante la mitad de la transición», y en la prueba social de una clínica eso se lee como página rota. En vertical el corte cae entre RENGLONES, no dentro de una palabra, que es una frontera que el ojo ya sabe leer. Y se conserva lo que hacía correcto el deslizamiento: dos citas nunca ocupan el mismo sitio, así que no puede haber ni solape ni hueco. La altura la fija el script con la voz más alta, porque una columna de flex no la deduce sola. */ .voces__caja { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e4); } .voces__pista { order: 1; flex: 0 0 100%; } .flecha { order: 2; } /* 44 px, que es el mínimo táctil. A 32 quedaban por debajo del área de pulgar y encima pegadas al borde, en la franja donde la mano roza el bisel. */ .plantilla__mando { margin-top: var(--e4); gap: var(--e4); } .flecha { width: 44px; height: 44px; } .voz__texto { font-size: 20px; } .voz__cara { width: 72px; height: 72px; } /* ── notas ───────────────────────────────────────────────────────────────── */ .notas { padding: 36px 0; } .notas__anclado { position: static; } /* anclar en una columna no significa nada */ /* El índice existía para llenar la columna anclada. Sin columna anclada no llena nada y además repite, línea por línea, los titulares que vienen justo debajo. */ .indice { display: none; } /* Y el paginador tampoco: en vertical las dos notas están apiladas y visibles a la vez, así que un «Segunda de 2 · SIGUIENTE» debajo afirma que estás en una cuando estás viendo las dos y ofrece un siguiente que no tiene destino. Es el ejemplo de manual de escritorio encogido. */ .notas__paso { display: none; } .notas__dicho { padding-top: 0; } .notas__pila { gap: 40px; } .nota__vista img { height: 220px; } .nota__titulo { font-size: 24px; text-wrap: balance; } .notas__paso { justify-content: center; gap: var(--e4); } /* ── boletín ─────────────────────────────────────────────────────────────── */ .boletin { padding: 0 0 44px; } /* El original mete el boletin con margen y radio y saca el pie a sangre. El clon lo tenia justo del reves, y los dos ejes lo cazaron. */ .boletin .marco { width: calc(100% - 32px); margin-inline: auto; } .boletin__caja { width: auto; padding: 32px var(--e5); border-radius: var(--r-grande); } /* UNA SOLA FILA, como el original: campo con el botón redondo dentro. Apilarlos hacía la tarjeta bastante más alta y ese exceso empujaba todo el pie hacia abajo, que es de donde salía buena parte del desfase en la banda 0,64 a 0,82. */ .boletin__forma { flex-direction: row; align-items: center; background: var(--papel); padding: var(--e1); gap: 0; } .boletin__forma input { padding: var(--e3) var(--e4); text-align: left; min-width: 0; } .boletin__forma .boton { width: 44px; height: 44px; flex: 0 0 44px; padding: 0; font-size: 0; position: relative; } .boletin__forma .boton::after { content: ""; position: absolute; inset: 0; background: no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ── pie ─────────────────────────────────────────────────────────────────── */ .pie__panel { width: 100%; padding: 48px var(--e5) var(--e5); border-radius: 0; } .pie__raya { text-align: left; align-items: flex-start; } .pie__rejilla { gap: var(--e6); } .pie__marca .boton { width: 100%; } .pie__raya { flex-direction: column; gap: var(--e2); text-align: center; margin-top: 40px; } } /* Por debajo de 400 px. El margen lateral NO baja de 16 px a cada lado: con 7 px el texto corria pegado al bisel en toda la mitad baja de la pagina y el original mantiene unos 16 en el mismo parrafo. */ @media (max-width: 400px) { .marco, .marco-ancho { width: calc(100% - 32px); } .titular { font-size: 36px; } } /* ── Distintivo de Clínicas: el camino de vuelta al portafolio ──────────────── Lo añade scripts/publicar-piezas.mjs al publicar. NO está en la fuente de la pieza, y no debe: el vídeo del portafolio se graba de la fuente y ahí este sello sobra. */ .ct-firma{position:fixed;left:14px;bottom:14px;z-index:2147483000;display:inline-flex;align-items:center;gap:.35em; padding:.55em .85em;border-radius:999px;background:rgba(17,17,17,.84);color:#fff; font:500 12px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; letter-spacing:.01em;text-decoration:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); box-shadow:0 1px 4px rgba(0,0,0,.22);opacity:.6;transition:opacity .18s ease} .ct-firma:hover,.ct-firma:focus-visible{opacity:1;color:#fff;text-decoration:none} .ct-firma b{font-weight:700} @media (max-width:520px){.ct-firma{left:10px;bottom:10px;font-size:11px;padding:.5em .75em}} @media (prefers-reduced-motion:reduce){.ct-firma{transition:none}} @media print{.ct-firma{display:none}}