:root{ /* ══ MARCA ══ Todo el color de la página sale de estas seis líneas, planos y transparencias incluidas: las versiones *-rgb existen para que un rgba() no tenga que repetir el número. Cambiar la paleta es cambiar acá y nada más. El esmeralda (#0b6b5e) y el dorado (#b07d34) que había antes salieron en agosto de 2026: el verde se leía como cualquier sistema clínico y el dorado envejecía todo lo que tocaba. */ --cielo: #33708f; --cielo-rgb: 51,112,143; --cielo-vivo: #4a8fae; --cielo-luz: #79b3cd; --cielo-luz-rgb: 121,179,205; --cobre: #c4553f; --cobre-rgb: 196,85,63; --cobre-luz: #e2896a; /* el mismo cobre, dos pasos más oscuro: el de marca no llega a contraste AA cuando el texto es chico (3.95:1 sobre el fondo del día) */ --cobre-hondo: #a8422e; --cream: #fbf8f1; --ink: #211d18; --noche: #050403; /* ⚠ EL PRIMER ESCALÓN DEL ALBA, Y TIENE QUE SER EL MISMO NÚMERO QUE `ALBA[0]` EN `noche.js`. El acto 4 NO arranca en `--noche`: arranca acá, once puntos de azul más arriba, porque un negro puro no es una noche —es la ausencia de imagen— y la rampa del amanecer necesita de dónde salir. Vive en un token porque la costura que baja hasta el acto tiene que ATERRIZAR en este color y no en el negro de la marca. Cuando aterrizaba en `--noche` había un escalón de 44 puntos en un solo píxel —medido con `costura-perfil`: 5,4,3 → 13,19,24— y eso es exactamente una línea dibujada a mano cruzando la página. Se veía, y nadie sabía nombrarla. */ --alba-0: 11,17,22; /* ══ LA LUZ DE AIRA ══ Lo que el teléfono derrama sobre la sala en la escena. Es marca, no decorado: era verde-agua cuando la marca era esmeralda, y se corrió al azul con el resto. Mismo brillo, otro tono — si alguna vez hay que volver atrás o entibiarla, se toca sólo acá. */ --luz-rgb: 124,196,222; --luz-viva-rgb: 84,196,224; --luz-media-rgb: 62,150,186; --luz-honda-rgb: 26,120,150; --luz-sombra-rgb: 3,17,24; /* ══ EL DÍA ══ Un blanco con el cielo de la marca adentro: el color de una sala con la persiana recién abierta. --dia-suave es 0.66 y no 0.62 por una razón medida: con 0.62 da 4.48:1 y no llega al piso de AA. */ --dia-fondo: #eef2f5; --dia-alto: #f8fafb; --dia-tinta: #14202a; --dia-suave: rgba(20,32,42,0.66); --dia-linea: rgba(51,112,143,0.20); --dia-hueso: #dde5ea; /* Largo de las dos costuras entre el día y la noche. Vive acá arriba porque el colchón de #planes se calcula A PARTIR de él: si el degradé y el padding se miden en unidades distintas, en algún alto de pantalla uno le pasa por encima al otro (pasaba en tablet vertical: el degradé tapaba «Sin tarjeta.»). Con un solo token la relación se sostiene en cualquier viewport. */ --costura: 300px; /* ══ LA BARRA ══ El margen lateral y el alto de la barra viven acá porque hay cosas ABAJO que tienen que alinearse con ella: el reloj del hero arrancaba en `left:6vw` y `top:76px`, o sea desalineado del logo en todos los anchos —38px a 1440— y METIDO 18px adentro de la barra, que es por qué se leía como parte del menú y no como la hora del consultorio. Atados al mismo token, no se vuelven a separar. El alto es el medido, no el calculado: la barra la define el botón, no el texto. */ --barra-x: 48px; --barra-h: 94px; /* ══ MOVIMIENTO ══ La misma curva que el panel (PR #447): un resorte SIN rebote. Se eligió allá comparándola contra `ease`, contra la emphasized de Material y contra un resorte con overshoot — el rebote es divertido una vez y molesto a la décima. Que la página y el producto se muevan igual es parte de la marca, tanto como el color. La regla que viene con ella: el movimiento sólo explica cambios de estado —algo entra, algo se resuelve, algo carga, algo se puede deshacer—. Si una animación no contesta una de esas cuatro, no va. */ --spring: linear(0, .009, .035, .078, .276, .523, .72, .857, .936, .976, .994, 1); --ease-salida: cubic-bezier(.2, 0, 0, 1); --dur-rapida: 220ms; /* responde a un click: tiene que empezar ya */ --dur-base: 440ms; /* algo que entra, se despliega o se acomoda */ --dur-plano: 760ms; /* un plano entero entrando: acá sí hay recorrido */ --f-d: ui-serif, Georgia, 'Times New Roman', serif; --f-s: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--noche);color:var(--dia-tinta);font-family:var(--f-s)} /* El día ya está DEBAJO de la escena: es el fondo sobre el que termina de entregarse (ver `amanecer()` en hero.js). Mientras la escena manda no se ve, porque el stage pegajoso tapa la pantalla entera. */ /* 865 y no 820: los últimos 0,45 de pantalla son el AMANECER y ocurre acá adentro, con la escena pegada. Antes pasaba mientras el track salía y había que compensar el sticky con JS en cada cuadro: eso se siente como un scroll roto. Pegada, el scroll es nativo y ningún borde cruza la pantalla. */ .track{height:865vh;position:relative;background:var(--dia-fondo)} /* El z-index hace posible la disolución: la escena sigue pegada y las secciones del día le pasan por DEBAJO. Sin él, #que-es se pinta encima y le corta el borde inferior con un filo horizontal. Muy por debajo del nav. */ .stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--noche);z-index:2} /* EL RELLENO: lo que rodea al cuadro. Antes era negro plano —dos barras—. Usa object-fit: cover a propósito: acá no hay cámara que mover, es un fondo (la regla de «la placa entera» vale para .plate). */ .relleno{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--noche);contain:paint} .relleno img{width:100%;height:100%;object-fit:cover; filter:blur(34px) brightness(.42) saturate(.7);transform:scale(1.12)} .relleno-dia{position:absolute;inset:0;z-index:0;display:block;opacity:0; background:var(--dia-fondo);will-change:opacity} /* El CUADRO. En pantalla ancha ocupa todo; en vertical es una banda apaisada y alrededor queda el relleno. Todo lo fotográfico vive acá adentro. */ .frame{position:absolute;left:0;top:50%;transform:translateY(-50%); width:100%;aspect-ratio:1.18;max-height:100%;overflow:hidden} /* dos placas: la general y el primer plano de la madera. La cámara corta de una a otra, como en una secuencia filmada. */ .world{position:absolute;inset:0;will-change:transform,opacity;transform-origin:50% 50%} /* La placa NO se recorta con object-fit: entera y más grande que el cuadro, que es el que recorta. Con object-fit lo que sobraba se tiraba antes de que la cámara se moviera y desplazarse hacia el monitor no lo traía. */ .plate,.over,.haz{position:absolute;left:50%;top:50%;display:block;will-change:transform} /* ── SI EL JAVASCRIPT NO ESTÁ ── El tamaño y el centrado de las placas los pone `medirPlacas()` en píxeles (`width` y un `marginLeft` de -W/2). Sin JS la placa se quedaba con `left:50%; top:50%` y su tamaño natural: una foto que ARRANCA en el centro de la pantalla y se va hacia abajo a la derecha, con el resto en relleno desenfocado. No es una hipótesis de laboratorio: es lo que ve cualquiera al que se le cayó el pedido de un `.js`, y también parte de lo que ve un crawler que no ejecuta scripts. Sin nadie que la mueva, la placa deja de ser una cámara y pasa a ser un fondo — que es lo único honesto que puede ser. Las capas vectoriales se apagan: el haz y el overlay están clavados a coordenadas de una placa que ya no está donde ellos creen. Y del segundo plano se muestra sólo el primero: los dos `world` se cruzan por opacidad desde el JS, así que sin él quedaban los dos encima, y ganaba el teléfono en primerísimo plano, que es el final de la escena y no su principio. */ html:not(.js) .plate { left: 0; top: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; transform: none; } html:not(.js) .haz, html:not(.js) .over { display: none; } html:not(.js) #worldB { display: none; } /* El haz de luna. Con feGaussianBlur de SVG se comía 32 de 54 fps: la cámara reescala el mundo por cuadro y el filtro se recalculaba entero. Con blur de CSS se rasteriza una vez. El clip va en el hijo porque el filtro se aplica ANTES del recorte: al revés el haz perdería los bordes. */ .haz{pointer-events:none;opacity:0;filter:blur(26px);will-change:opacity,transform} .haz>i{display:block;width:100%;height:100%} .haz-a>i{clip-path:polygon(14.53% 0, 33.43% 0, 94.48% 100%, 61.77% 100%)} .haz-b>i{clip-path:polygon(5.81% 0, 30.52% 0, 45.06% 80.73%, 18.90% 80.73%)} .luna>i{background:linear-gradient(180deg, rgba(198,222,255,0.20), rgba(198,222,255,0))} .teal>i{background:linear-gradient(180deg, rgba(var(--luz-rgb),0.28), rgba(var(--luz-rgb),0))} .glow{position:absolute;border-radius:50%;pointer-events:none;will-change:opacity} .g-phone{width:20%;height:22%;left:46%;top:46%;background:rgba(var(--luz-rgb),0.42);filter:blur(50px);opacity:0} .g-room {width:80%;height:58%;left:10%;top:24%;background:rgba(var(--luz-honda-rgb),0.20);filter:blur(140px);opacity:0} .g-scr {width:19%;height:23%;left:6%;top:38%;background:rgba(var(--luz-honda-rgb),0.50);filter:blur(44px);opacity:0} /* Aira no ilumina el teléfono: ilumina la sala. Va en 'screen' para LEVANTAR lo que ya está en la foto; un filtro encima la lavaba. */ .flood{position:absolute;inset:-10%;pointer-events:none;opacity:0; mix-blend-mode:screen;will-change:opacity; background: radial-gradient(36% 44% at 46% 52%, rgba(var(--luz-viva-rgb),0.52), rgba(var(--luz-media-rgb),0.15) 44%, transparent 74%), radial-gradient(92% 84% at 44% 46%, rgba(var(--luz-honda-rgb),0.26), transparent 76%)} /* el contraste que el verde se come, devuelto por los bordes */ .floodv{position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(70% 64% at 46% 50%, transparent 44%, rgba(var(--luz-sombra-rgb),0.66) 100%)} .grade{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light; background:linear-gradient(180deg, rgba(120,160,220,0.26), rgba(0,0,0,0) 45%, rgba(0,0,0,0.40))} .grain{position:absolute;inset:-110px;pointer-events:none;opacity:0.15;mix-blend-mode:overlay} /* mientras la escena se va, lo caro de la película deja de existir: el grano y el polvo no se ven —la luz ya está quemando la sala— pero se seguían componiendo cuadro a cuadro */ .stage.saliendo .grain, .stage.saliendo #aDust, .stage.saliendo #bDust{display:none} /* y con ellos, todo lo que se mezcla: cada capa con blend mode obliga a recomponer el subárbol entero de la escena en cada cuadro. La luz de Aira y el viraje no tienen nada que hacer acá —la sala se está volviendo blanca—, pero la viñeta SE QUEDA: no lleva blend, no cuesta, y sacarla se notaba como un salto de la escena a una foto pelada. */ .stage.saliendo .flood, .stage.saliendo .floodv, .stage.saliendo .grade, .stage.saliendo .over{display:none} .vig{position:absolute;inset:0;pointer-events:none; background:radial-gradient(80% 76% at 50% 48%, transparent 42%, rgba(0,0,0,0.70) 100%)} /* La sobreexposición: blanco en `screen`, la misma técnica que la luz de Aira. Con filter: brightness() costaba 15 fps —reprocesa todo el cuadro—. */ .quema{position:absolute;inset:0;pointer-events:none;opacity:0; background:#fff;mix-blend-mode:screen;will-change:opacity} /* EL AMANECER. El origen (16% 26%) es donde cae la ventana en la placa A: si se cambia la foto, se re-mide con ?cal=a. Vive fuera del .frame para cubrir también el relleno. Lo empuja `amanecer()` en hero.js. */ .sol{position:absolute;inset:-40%;z-index:10;pointer-events:none;opacity:0; transform:scale(.25);transform-origin:16% 26%;will-change:opacity,transform; background:radial-gradient(closest-side, #fff 0%, rgba(255,255,255,.92) 42%, rgba(255,247,232,.5) 66%, rgba(255,247,232,0) 100%)} .cap{position:absolute;left:0;right:0;bottom:88px;text-align:center;z-index:9;padding:0 6vw;pointer-events:none} .cap .t{display:inline-block;font-family:var(--f-d);font-size:clamp(17px,2.2vw,27px);line-height:1.35; color:rgba(251,248,241,0.94);text-shadow:0 2px 26px rgba(0,0,0,0.9); transition:opacity .38s ease, transform .38s ease} .cap .t.out{opacity:0;transform:translateY(6px)} .cap .t em{font-style:italic;color:var(--cielo-luz)} .dlg{position:absolute;top:22vh;right:6vw;width:34vw;min-width:280px;z-index:9;pointer-events:none} .dlg .ln{opacity:0;transform:translateY(12px);transition:opacity .55s ease, transform .55s ease;margin-bottom:22px} .dlg .ln.on{opacity:1;transform:none} .dlg .rol{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:700; color:rgba(251,248,241,.4);display:block;margin-bottom:4px} .dlg .tx{font-family:var(--f-d);font-size:clamp(15px,1.5vw,19px);line-height:1.42; color:rgba(251,248,241,.9);text-shadow:0 2px 18px rgba(0,0,0,.85)} .dlg .ln.aira{text-align:right} .dlg .ln.aira .tx{color:var(--cielo-luz)} .hora{position:absolute;top:calc(var(--barra-h) + 18px);left:var(--barra-x);z-index:9;pointer-events:none} .hora .hh{font-family:var(--f-d);font-size:clamp(30px,3.6vw,46px);line-height:1; color:rgba(251,248,241,.9);text-shadow:0 2px 22px rgba(0,0,0,.9);font-variant-numeric:tabular-nums} /* El cobre de marca sobre la sala de noche da 3.7:1 —y contra la pared ya iluminada del amanecer, 2.9:1— a 9.5px con letter-spacing ancho: no se leía, se adivinaba. Es el mismo caso del punto del logo, que ya se aclara sobre la escena, y se arregla con la misma variable: --cobre-luz da 5.9:1 de noche y sigue pasando AA cuando la sala se aclara. */ .hora .cc{margin-top:7px;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase; font-weight:700;color:var(--cobre-luz);text-shadow:0 1px 14px rgba(0,0,0,.75)} .hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:10; display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border-radius:999px; background:rgba(251,248,241,.09);border:1px solid rgba(251,248,241,.16); color:rgba(251,248,241,.8);font-size:12px;backdrop-filter:blur(8px);transition:opacity .4s ease} .hint.off{opacity:0} /* ── LA FLECHA SE MUEVE, PORQUE SI NO NADIE LA MIRA ── La única instrucción de la página estaba QUIETA: 12px sobre una foto de noche, compitiendo con el reloj, el sonido y un diálogo que se escribe solo. En una pantalla donde todo se mueve, lo quieto no se ve — y no se vio. Es la excepción a la regla de la casa («el movimiento sólo explica cambios de estado»): acá no explica uno, lo PIDE. Casi segundo y medio de quietud entre pulso y pulso: dos bajadas seguidas leen como un banner. */ @keyframes hint-baja{ 0%,62%,100%{transform:translateY(0);opacity:.55} 18%{transform:translateY(4px);opacity:1} 40%{transform:translateY(0);opacity:.75} } .hint svg{display:block;animation:hint-baja 2.1s var(--spring) infinite} .hint.off svg{animation:none} /* ══ EL HILO DE LA PELÍCULA ══ El aviso se apaga apenas scrolleás; esto acompaña las nueve pantallas que siguen, al pie, que es donde un reproductor pone su progreso. El color es la luz de Aira: no entra un color nuevo a la película. `scaleX` y no `width`: `render()` lo escribe en cada cuadro y animar `width` a 60 fps rehace el layout de la escena entera. */ .hilo{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:10; background:rgba(251,248,241,.10);transition:opacity .4s ease;pointer-events:none} .hilo i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0); background:linear-gradient(90deg,rgba(var(--luz-rgb),.45),rgba(var(--luz-rgb),.95))} @keyframes ringx{0%{opacity:0;transform:scale(.55)}18%{opacity:.85}100%{opacity:0;transform:scale(1.5)}} .rc{transform-box:fill-box;opacity:0} .rc.rt{transform-origin:0% 50%} .rc.lf{transform-origin:100% 50%} .ringing .rc{animation:ringx 2.2s ease-out infinite;opacity:1} .ringing .rc.r2{animation-delay:.73s} .ringing .rc.r3{animation-delay:1.46s} /* El sonido arranca APAGADO siempre: nadie quiere que una página le haga ruido sin permiso, y los navegadores tampoco lo dejan. El botón es el permiso. */ /* 116 y no 74: a 74 quedaba pegado abajo del botón del nav —dos pastillas tocándose en la esquina— y se leían como si fueran del mismo grupo. */ .snd{position:absolute;top:116px;right:6vw;z-index:11;display:inline-flex;align-items:center;gap:8px; padding:9px 15px;border-radius:999px;cursor:pointer; background:rgba(5,12,10,.5);border:1px solid rgba(251,248,241,.16); color:rgba(251,248,241,.55);font-family:var(--f-s);font-size:12px; backdrop-filter:blur(8px);transition:color .3s ease, border-color .3s ease} .snd:hover{color:rgba(251,248,241,.85);border-color:rgba(251,248,241,.3)} .snd .s-on{opacity:0} .snd .s-off{opacity:1} .snd.on{color:var(--cielo-luz);border-color:rgba(var(--luz-rgb),.42)} .snd.on .s-on{opacity:1} .snd.on .s-off{opacity:0} /* En vertical el cuadro es una banda apaisada: el diálogo no puede quedar montado a caballo del borde —se parte en dos— así que baja al negro de abajo, que es donde hay aire. */ @media (max-width:760px){ /* EL RÓTULO DEL RELOJ SE METÍA DEBAJO DEL BOTÓN DE SONIDO, y ahí se terminaba de leer. Los dos viven arriba y a la misma altura —el rótulo cuelga del reloj, a la izquierda; el botón está a la derecha en top:116— y el rótulo CAMBIA DE TEXTO a mitad de la película: «tu consultorio, hoy» entra, «y mañana tenés un paciente más» mide 256px y no. Medido: se pisaban 80px a 320, 42 a 360 y 14 a 390 — o sea en todo teléfono, y justo con la frase que remata el hero. Arriba de 430 no pasa, y ésa es la razón por la que nadie lo había visto. No se arregla moviendo el botón: a 74 ya se probó y quedaba pegado al del nav, y bajarlo lo deja flotando sobre la foto. El rótulo tiene lugar de sobra para romper en dos renglones, y `.hora` es `absolute`, así que romper no empuja nada. 50vw deja 17px de aire en el peor caso. */ .hora .cc{max-width:50vw} /* ══ EL RELOJ Y LA FRASE SE PEGAN A LA FOTO ══ En vertical el cuadro es una banda apaisada centrada, y arriba y abajo queda relleno. El reloj colgaba del borde de ARRIBA de la pantalla y la frase del de abajo: a 390×844 quedaban a 157 y 133 px de la foto — dos textos flotando en dos manchas grises, con la película partida en tres. Ahora los dos cuelgan DEL CUADRO: su alto es 100vw/1,18 y está centrado, así que su borde de arriba cae en `50% - 100vw/2,36`. El reloj se apoya 76 px por encima (lo que pide su rótulo de dos renglones) y la frase, 44 por debajo. El `max()` es el seguro: en una pantalla apaisada y baja la cuenta da negativo y ahí gana el valor de siempre. */ .hora{top:max(calc(var(--barra-h) + 18px), calc(50% - 100vw / 2.36 - 76px))} .dlg{top:auto;bottom:118px;left:5vw;right:5vw;width:auto} .dlg .ln{margin-bottom:14px} /* 104 es el piso —abajo de eso el aviso de scroll, que a este ancho rompe en dos renglones, le quedaba apoyado encima— pero el valor que manda es el que la pega al cuadro. Ver la cuenta en `.hora`, arriba. */ .cap{bottom:max(104px, calc(50% - 100vw / 2.36 - 44px))} /* 12,5 y no 11,5: es la única instrucción de toda la página —le dice al visitante qué tiene que hacer para que la película arranque— y en un teléfono es justo donde peor se lee. Entra igual en una línea. */ .hint{font-size:12.5px;white-space:nowrap;padding:8px 14px} } @media (prefers-reduced-motion: reduce){ .ringing .rc, .hint svg{animation:none} } /* El día arranca ANTES de que el track termine y la escena —pegada y por encima— le pasa por delante mientras se disuelve: el título ya está en su lugar cuando la luz se apaga, sin mover nada con JS. Sin esto quedaba casi una pantalla de blanco entre la luz y el título. */ /* `clip` y NO `hidden`: hidden convierte a main en contenedor de scroll y rompe el sticky del mazo. clip recorta sin crear scrollport. Hace falta porque el barrido mete un plano entero desde la derecha, y sin esto son cientos de píxeles de scroll horizontal — el mismo bug que dio el `100vw` y que en headless no se ve, así que lo mira qa-final. */ main.dia { background: var(--dia-fondo); margin-top: -62vh; position: relative; overflow-x: clip; } /* el nav es fijo: sin esto los anclas dejan el título debajo de la barra */ main.dia section { scroll-margin-top: 72px; } /* sin position: la sección era relativa sólo para colgarle el degradé de la costura, y posicionarla la ponía a pintar por encima de la escena */ /* 40 y no 96 arriba: el título tiene que entrar MIENTRAS la luz del amanecer sigue encendida, para nacer de ella. Con 96 la escena terminaba de irse antes y quedaba una pantalla vacía. */ #agenda { background: var(--dia-fondo); padding: 40px 24px 64px; text-align: center; } /* La costura de entrada no se pinta: acá no hay ninguna capa. El puente entre la noche y el día es la luz, y vive en `amanecer()` (hero.js). */ /* El primero era un h1 y los otros cinco son h2. El margen se fija acá, con el mismo 0.83em que el navegador le da a un h2, para que el cambio de tag no mueva nada: sin esto el h1 traería su propio margen y el título quedaría unos píxeles más arriba que los demás. */ .s-tit { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.12; letter-spacing: -0.01em; margin: 0.83em 0; } .s-sub { margin-top: 14px; font-size: 17px; color: var(--dia-suave); } /* ══ PRUEBA: LOS PLANOS SE APILAN ══ Probado en un solo paso —del reproductor al panel— para poder mirarlo antes de comprometer la página entera. Cómo funciona: el plano de abajo queda PEGADO en pantalla (sticky) y el siguiente sube por encima y lo tapa, como una carta que cae sobre otra. Lo que lo vende son tres cosas: el canto redondeado de la que sube, la sombra que tira sobre la que queda, y que la de abajo se hunde un poco mientras la tapan (se achica y se oscurece). Se activa sólo en pantallas anchas y con altura suficiente: apilar en un alto de 700 px deja el contenido cortado, y en un teléfono no hay dónde. Para sacarlo alcanza con borrar este bloque. */ @media (min-width: 900px) and (min-height: 760px) { #escuchar{ position:sticky;top:0;min-height:100vh; display:flex;align-items:center; /* mientras lo tapan se hunde: es lo que hace que se lea como profundidad y no como que la de arriba le pasa por encima */ transform:scale(calc(1 - var(--sal, 0) * .045)); filter:brightness(calc(1 - var(--sal, 0) * .10)); transform-origin:50% 30%; } #escuchar > .ec{width:100%} /* el dolly de salida se apaga acá: el plano ya se va tapado, y las dos cosas juntas lo hacían desaparecer dos veces. `translate` y `scale` van explícitas por lo mismo que `opacity`: este plano NO tiene entrada —viene del hero, ya está—, y desde que la entrada de los planos se mudó de `transform` a sus propias propiedades, apagar sólo el `transform` dejaba de alcanzar. Le quedaban los 60px de abajo hasta que el observer marcaba la sección. */ .js #escuchar .s-tit, .js #escuchar .s-sub, .js #escuchar .an:not(.s-tit):not(.s-sub){ opacity:1;filter:none;translate:none;scale:none; transform:translateY(calc((var(--p,.5) - .5) * -18px)); } #agenda{ position:relative;z-index:3; border-radius:36px 36px 0 0; /* la sombra es lo que vende el apilado: las dos secciones son casi del mismo claro, así que sin ella el canto no se lee como un plano nuevo sino como un borde raro */ box-shadow:0 -34px 80px rgba(20,32,42,.22), 0 -1px 0 rgba(255,255,255,.75); } /* el halo del amanecer se recorta con el canto de la que sube */ #agenda{overflow:hidden} } /* ══ ACTO 2 — LA AGENDA QUE SE LLENÓ SOLA ══ Era una tabla centrada sobre fondo liso: se leía como una tabla y no como el panel de la clínica. Lo que cambió no es el dato, es la puesta en escena. Tres cosas la hacen objeto y no caja: · la ventana entera —barra, menú, contenido—, para que se entienda de qué se está mirando una foto; · perspectiva: llega inclinada y se endereza mientras subís (--ag-p lo maneja el scroll, transform-only); · luz: el halo del amanecer sigue encendido arriba, así el plano nace de la escena en vez de empezar de cero sobre un fondo liso. */ #agenda{position:relative;overflow:hidden;padding:40px 24px 96px} /* el resto de la luz del amanecer, que muere justo antes de la ventana */ .ag-luz{position:absolute;left:50%;top:-14%;width:min(1100px,120%);height:520px; transform:translateX(-50%);pointer-events:none;z-index:0; background:radial-gradient(50% 50% at 50% 50%, rgba(var(--luz-rgb),.22), rgba(var(--luz-rgb),.06) 46%, transparent 72%)} #agenda > *:not(.ag-luz){position:relative;z-index:1} /* la caja de perspectiva: vive acá y no en la ventana, si no el 3D se aplana */ .ag-escena{perspective:1400px;perspective-origin:50% 0%;margin-top:44px} .ag-ventana{ --ag-p:0; /* 0 = llegando · 1 = enderezada */ width:min(940px,100%);margin:0 auto;text-align:left; background:var(--pn-bg);border-radius:20px;overflow:hidden; border:1px solid var(--dia-linea); transform: perspective(1400px) rotateX(calc((1 - var(--ag-p)) * 9deg)) translateY(calc((1 - var(--ag-p)) * 34px)) scale(calc(0.955 + var(--ag-p) * 0.045)); /* la sombra crece con la ventana: es lo que la despega del fondo */ box-shadow: 0 calc(18px + var(--ag-p) * 30px) calc(40px + var(--ag-p) * 60px) rgba(20,32,42,calc(.10 + var(--ag-p) * .10)), 0 2px 6px rgba(20,32,42,.06); will-change:transform; } /* ══ LA VENTANA ES EL PANEL DE VERDAD ══ Contra el panel de HOY (`origin/main`, post PR #500), no contra el de hace tres meses: la copia anterior venía de la paleta esmeralda y de un shell que ya no existe. Los tokens son los de `globals.css`, literales — ojo con los dos grises de texto, que estaban un escalón claros. Lo único que cambia es la ESCALA: la ventana mide 940 px y el panel se dibuja sobre 1600, así que lo grande baja un escalón (barra 56→46, menú 220→200, título 30→22). Nada que ya esté en su piso de legibilidad se toca: 11 px el turno, 12 los rótulos, 13 el menú. Y los números NO van en Fraunces: en el panel `font-serif` está mapeado a Geist, que es una sans. */ .ag-ventana{ --pn-bg:#f9f8f5; --pn-sup:#ffffff; --pn-sup2:#f2f0ea; --pn-line:#e5e2da; --pn-line-f:#cfcabd; --pn-ink:#211d18; --pn-muted:#615951; --pn-faint:#726b63; --pn-ac:#33708f; --pn-ac-fuerte:#275770; --pn-ac-suave:#e8f1f6; --pn-ac-luz:#79b3cd; --pn-cobre:#c4553f; --pn-verde:#2f7d5f; --pn-r-ctrl:14px; --pn-r-card:20px; --pn-sombra:0 1px 2px rgba(33,29,24,.04),0 6px 20px rgba(33,29,24,.05); --pn-sombra-alta:0 2px 6px rgba(33,29,24,.06),0 14px 40px rgba(33,29,24,.09); /* la monoespaciada del panel es Geist Mono; acá va la del sistema, que no cuesta un pedido de red y hace el mismo trabajo: alinear horas */ --pn-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace; color:var(--pn-ink); } /* ── LA BARRA DE ARRIBA ── Eran los tres puntos de macOS, y el panel no es una app de escritorio: su barra lleva el wordmark, el buscador y quién está adentro. Es lo primero que dice de qué producto es esta foto. */ .ag-top{display:flex;align-items:center;gap:12px;height:46px;padding:0 14px; background:var(--pn-sup);border-bottom:1px solid var(--pn-line)} .ag-marca{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1; color:var(--pn-ink)} /* el punto es el mismo cobre que cierra la marca en el resto de la página */ .ag-marca i{font-style:normal;color:var(--pn-cobre)} .ag-ham,.ag-cerrar{display:none} .ag-buscar{display:flex;align-items:center;gap:8px;margin-left:10px; height:30px;width:230px;padding:0 11px;border-radius:11px; background:var(--pn-sup2);color:var(--pn-faint);font-size:12.5px} .ag-buscar svg{width:14px;height:14px;flex:none} .ag-buscar kbd{margin-left:auto;font:inherit;font-size:10px;font-weight:600; color:var(--pn-muted);background:var(--pn-sup); border:1px solid var(--pn-line-f);border-radius:4px;padding:1px 5px} .ag-yo{display:flex;align-items:center;gap:9px;margin-left:auto} .ag-yo-av{display:grid;place-items:center;width:25px;height:25px;border-radius:50%; flex:none;background:var(--pn-sup2);color:var(--pn-muted); font-size:10px;font-weight:700;letter-spacing:.02em} .ag-yo-tx{font-size:11.5px;color:var(--pn-muted);white-space:nowrap} /* alto fijo: sin esto la ventana crecía y se achicaba con cada pantalla del menú, y el plano entero saltaba al navegar */ .ag-cuerpo{position:relative;display:grid;grid-template-columns:200px 1fr; background:var(--pn-bg);min-height:512px} .ag-pant{height:100%} /* El velo del cajón NO existe fuera del teléfono. Sin este `display:none` es un hijo más de la grilla y se come la primera columna. */ .ag-velo{display:none} /* ── EL MENÚ ── Era blanco con una línea a la derecha. En el panel es una ZONA MATE y el contenido es la hoja blanca que se apoya encima: esa línea era lo que lo hacía leer como una plantilla. Y «OPERACIÓN» no existe más. */ .ag-menu{background:var(--pn-sup2);padding:11px 10px; display:flex;flex-direction:column;min-width:0} .ag-menu-cab{display:flex;align-items:center;gap:8px;margin-bottom:11px} /* en el panel es surface-2 sobre una barra que ya es surface-2: no se ve. Acá tampoco, a propósito. */ .ag-clinica{display:flex;align-items:center;gap:10px;padding:5px 4px;min-width:0;flex:1} .ag-ini{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;flex:none; background:linear-gradient(135deg,var(--pn-ac-luz),var(--pn-ac-fuerte)); color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em} .ag-clinica-tx{display:grid;min-width:0} .ag-clinica-tx b{font-size:12px;font-weight:700;color:var(--pn-ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ag-clinica-tx i{font-style:normal;font-size:10px;color:var(--pn-faint)} /* ⚠ EL RESET NO ES DECORATIVO: en esta hoja `nav`, `footer` y `main` están estilados POR ELEMENTO, así que un