/* ========================================================================= STRIMS — sistema visual Sin frameworks. Animaciones nativas ligadas al scroll (animation-timeline), una variable animable para el estado de los relatos, :has() para el elenco. Identidad: el logo es un sombrero amarillo con un botón de play en la cinta. Eso manda: formas anchas y redondeadas, el amarillo como superficie (no como hilito de 1px), y el triángulo de play como marca repetida. ========================================================================= */ @property --abierta { syntax: ''; initial-value: 0; inherits: true; } :root{ --negro: #0A0A0A; --sup-2: #201E16; --oro: #FED513; --oro-claro: #FFE45C; --oro-hondo: #9C7C08; --hueso: #F7F6F2; --gris: #B0ADA3; /* 8,9:1 sobre negro — se lee sin forzar */ --gris-2: #85827A; /* 5,4:1 — para etiquetas chicas */ --borde-max: 1440px; --gutter: clamp(20px, 5vw, 72px); --r-xl: 36px; --r-lg: 26px; --r-md: 18px; --r-pill: 999px; --t-rapido: .28s cubic-bezier(.22,.61,.36,1); --t-medio: .55s cubic-bezier(.22,.61,.36,1); --fuente: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI Variable Display', 'Segoe UI', Inter, system-ui, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body{ margin: 0; background: var(--negro); color: var(--hueso); font-family: var(--fuente); font-synthesis: none; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { display: block; max-width: 100%; height: auto; } /* ========================================================================= EL CURSOR — tres opciones, se elige con un atributo en → el cursor del sistema. → un disco dorado chico; sobre lo clickeable se abre en anillo. → el triángulo de play de la cinta del sombrero (el original). Está puesto "punto": un punto dorado chico que se abre en anillo sobre lo clickeable. Es el que menos molesta de los dos —no tapa nada y la punta cae en su centro— y el que mejor se lee sobre el botón dorado y las fotos claras, gracias al contorno negro. Para volver al sistema, se saca el atributo del ; para el triángulo, se pone "play". Van en PNG y no en SVG porque Safari no acepta cursores vectoriales. La primera declaración de cada par es el respaldo; la segunda agrega la versión 2x para pantallas retina, y el navegador que no entienda image-set() se queda con la primera. Los números después de la url() son la punta: en el triángulo, el vértice de arriba a la izquierda; en el punto, el centro. Los archivos los dibuja `npm run cursor`. ========================================================================= */ [data-cursor="play"] body{ cursor: url(../img/cursor.png?v=f750b554) 5 3, auto; cursor: image-set(url(../img/cursor.png?v=f750b554) 1x, url(../img/cursor-2x.png?v=948a9ec3) 2x) 5 3, auto; } [data-cursor="play"] :is(a, button, [role="button"], .persona){ cursor: url(../img/cursor-activo.png?v=2809d232) 5 1, pointer; cursor: image-set(url(../img/cursor-activo.png?v=2809d232) 1x, url(../img/cursor-activo-2x.png?v=7b5d38b2) 2x) 5 1, pointer; } [data-cursor="punto"] body{ cursor: url(../img/cursor-punto.png?v=1ebec3c2) 10 10, auto; cursor: image-set(url(../img/cursor-punto.png?v=1ebec3c2) 1x, url(../img/cursor-punto-2x.png?v=63eff9c6) 2x) 10 10, auto; } [data-cursor="punto"] :is(a, button, [role="button"], .persona){ cursor: url(../img/cursor-punto-activo.png?v=74d7ebf4) 14 14, pointer; cursor: image-set(url(../img/cursor-punto-activo.png?v=74d7ebf4) 1x, url(../img/cursor-punto-activo-2x.png?v=2f7ac120) 2x) 14 14, pointer; } /* en pantallas táctiles no hay puntero: no tiene sentido pedir los archivos */ @media (hover: none){ [data-cursor] body, [data-cursor] :is(a, button, [role="button"], .persona){ cursor: auto; } } ::selection{ background: var(--oro); color: #0A0A0A; } /* ========================================================================= Fondo — LA SEÑAL Reemplaza la grilla de líneas de 64px. La grilla es el fondo por defecto de toda landing de tecnología: no tiene origen, no tiene dirección y sirve para cualquier empresa. Esto es lo contrario en las tres cosas. ORIGEN: todo sale de un punto que cae sobre el sombrero del logo. DIRECCIÓN: cerca del emisor las crestas son doradas y densas; lejos son blancas, más separadas y más apagadas, hasta desaparecer. CURVATURA: elipses de 1,615:1 — anchas y achatadas, la misma familia de formas que el ala del sombrero. Ni un solo ángulo recto. Se lee como una publicación que se propaga, que es lo que Strims vende. Tres números sostienen la geometría; no conviene tocar uno solo: · emisor 50% 30vh cae sobre el sombrero en cualquier alto · elipse base 168 × 104 la relación 1,615:1 · período 92px sobre el rayo horizontal (56,95px en vertical) Las crestas BLANCAS caen en 46, 138, 230… y las DORADAS del ::after en 0, 92, 184…: exactamente a mitad de camino. Nunca se pisan, así que los alfas no se suman (el pico real es 0,051, el mismo que tenía la grilla), y al estar en relación 2:1 bajo la misma transformación no pueden batir entre sí — no hay muaré posible. El selector cubre .grilla además de .fondo para que los bundles ya armados (entrega/index.html, work/strims-bundle.html), que todavía dicen "grilla", sigan funcionando sin rearmarlos. ========================================================================= */ .grilla, .fondo{ position: fixed; inset: 0 0 auto 0; height: 88vh; /* la máscara ya llega a cero en 83vh: más abajo sólo estaríamos rasterizando transparencia, y así la deriva de -11vh nunca deja el borde a la vista */ overflow: hidden; /* el ::after mide 720px de ancho; en un teléfono sobresale y algún navegador lo suma al scroll */ pointer-events: none; z-index: 0; /* Cada cresta es una elipse de 12px de espesor horizontal (7,4px vertical) con rampas de 4px y 2px: no hay ningún borde duro que pueda aliasear, y la rampa avanza 1,5–3 niveles por píxel, así que cada escalón de cuantización mide menos de un píxel y no aparece bandeado ni en un panel P3. */ background-image: repeating-radial-gradient(ellipse 168px 104px at 50% 30vh, #ffffff00 0px, #ffffff00 40px, #ffffff06 44px, /* hombro — alfa 0,024 */ #ffffff0d 46px, /* cresta — alfa 0,051 */ #ffffff06 48px, #ffffff00 52px, #ffffff00 92px); /* La energía se disipa con la distancia: la máscara está centrada en el emisor, no en la pantalla. Cae sobre un patrón que ya es 87% transparente, así que sus escalones pegan en crestas sueltas y no se leen como bandas. */ -webkit-mask-image: radial-gradient(ellipse 116vw 68vh at 50% 30vh, #000 0%, #000b 34%, #0006 58%, transparent 78%); mask-image: radial-gradient(ellipse 116vw 68vh at 50% 30vh, #000 0%, #000b 34%, #0006 58%, transparent 78%); will-change: transform; } /* El núcleo caliente: las crestas de más cerca, en amarillo de marca, intercaladas entre las blancas. Es lo que ata el fondo al sombrero y lo que rompe la lectura de "diana". La caja mide 720×450 y va centrada en el emisor, así que se rasterizan 324k píxeles y no la pantalla entera. Al compartir centro y elipse base, la fase calza sola. */ .grilla::after, .fondo::after{ content: ''; position: absolute; left: 50%; top: 30vh; width: 720px; height: 450px; /* El fondo es una imagen quieta: no sigue al puntero ni reacciona al scroll. Antes el núcleo se corría 17px con el mouse y crecía un 5% al scrollear rápido, con un bucle de rAF detrás escribiendo tres variables CSS. */ translate: -50% -50%; background-image: repeating-radial-gradient(ellipse 168px 104px at 50% 50%, #FED5130b 0px, /* cresta — alfa 0,043 */ #FED51306 3px, #FED51300 6px, #FED51300 86px, #FED51306 89px, #FED5130b 92px); /* misma relación 1,615:1 que las ondas: el corte se disuelve siguiendo la forma de la onda en vez de cruzarla por la mitad */ -webkit-mask-image: radial-gradient(ellipse 330px 204px at 50% 50%, #000 0%, #000a 44%, transparent 80%); mask-image: radial-gradient(ellipse 330px 204px at 50% 50%, #000 0%, #000a 44%, transparent 80%); } /* Acá había un parallax atado al scroll (senal-deriva y senal-nucleo): el campo derivaba -11vh y se apagaba, y el núcleo amarillo se iba a cero al salir del hero. Se sacó junto con el resto del movimiento del fondo. El campo queda fijo, que es lo que hace de textura sin pelearle a nada. */ /* Acá vivía la segunda capa del fondo: cinco frentes de onda (.pulsos i) que salían del sombrero y cruzaban la pantalla, y que sólo avanzaban cuando el usuario movía la rueda. Se sacó entera junto con el resto del movimiento. El
también salió del index.html. */ /* el resplandor amarillo de marca, detrás del hero */ .resplandor{ position: absolute; inset: -10% -20% auto -20%; height: 130%; background: radial-gradient(44% 42% at 50% 32%, #FED5131c, #FED5130a 42%, transparent 70%); pointer-events: none; z-index: 0; } /* ========================================================================= Layout y tipografía base ========================================================================= */ .envoltura{ position: relative; z-index: 1; max-width: var(--borde-max); margin-inline: auto; padding-inline: var(--gutter); } section { position: relative; z-index: 1; } h1, h2, h3 { margin: 0; font-weight: 760; letter-spacing: -.04em; line-height: .95; } /* la etiqueta de sección es una pastilla amarilla, no un texto gris perdido */ .pastilla{ display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px 9px 15px; border-radius: var(--r-pill); background: var(--oro); color: #0A0A0A; font-size: clamp(11px, .84vw, 13px); font-weight: 760; letter-spacing: .1em; text-transform: uppercase; width: fit-content; } /* el triángulo de play de la cinta del sombrero, repetido como marca */ .pastilla::before{ content:''; width: 0; height: 0; border-left: 8px solid #0A0A0A; border-block: 5px solid transparent; } .titulo-seccion{ font-size: clamp(38px, 7vw, 100px); letter-spacing: -.055em; line-height: .88; text-wrap: balance; } .titulo-seccion em{ font-style: normal; color: var(--oro); } /* para las secciones de apoyo, que no tienen que competir con casos de éxito */ .titulo-seccion--chico{ font-size: clamp(26px, 3.6vw, 52px); letter-spacing: -.045em; line-height: .95; } .bajada-seccion{ font-size: clamp(16px, 1.35vw, 20px); line-height: 1.5; color: var(--gris); margin: 0; max-width: 48ch; text-wrap: pretty; } /* ========================================================================= 1 · HERO ========================================================================= */ .hero{ position: relative; /* si no, el resplandor escapa del overflow y genera scroll lateral */ min-height: 100svh; display: grid; place-items: center; text-align: center; padding-block: clamp(44px, 7vh, 84px); overflow: hidden; } .hero__interior{ display: grid; justify-items: center; gap: clamp(11px, 1.9vh, 22px); } /* El halo NO va con filter: drop-shadow(). Safari lo aplica a la caja del elemento y no a la silueta, así que alrededor del sombrero aparecía un rectángulo. Va como un resplandor propio detrás del logo: se dibuja igual en todos los navegadores porque es una capa más, no un efecto sobre la forma. */ .hero__marca{ position: relative; display: grid; place-items: center; animation: logo-entrada 1.15s cubic-bezier(.16,1,.3,1) both; } .hero__marca::before{ content: ''; position: absolute; inset: -55% -34%; background: radial-gradient(50% 50% at 50% 54%, #FED51340, #FED51314 42%, #FED5130a 60%, transparent 74%); pointer-events: none; animation: logo-respira 5.5s ease-in-out 1.25s infinite; } .hero__logo{ position: relative; /* pinta encima del resplandor */ width: clamp(180px, min(28vw, 33vh), 340px); } @keyframes logo-entrada{ from { opacity: 0; scale: .82; translate: 0 24px; rotate: -5deg; } 60% { opacity: 1; } to { opacity: 1; scale: 1; translate: 0 0; rotate: 0deg; } } @keyframes logo-respira{ 0%, 100% { opacity: .72; scale: .97; } 50% { opacity: 1; scale: 1.03; } } .hero__nombre{ font-size: clamp(56px, min(14vw, 17vh), 164px); letter-spacing: -.055em; line-height: 1.04; /* con .82 se cortaban las mayúsculas */ padding-block: .05em; color: var(--hueso); text-shadow: 0 0 38px #FED51326; animation: subir .9s cubic-bezier(.16,1,.3,1) .18s both; } /* Una sola frase en dos niveles: van pegadas entre sí y separadas del resto */ .hero__texto{ display: grid; justify-items: center; gap: 3px; } .hero__foco{ margin: 0; font-size: clamp(21px, 2.2vw, 32px); font-weight: 620; line-height: 1.15; letter-spacing: -.035em; color: var(--hueso); white-space: nowrap; animation: subir .9s cubic-bezier(.16,1,.3,1) .28s both; } .hero__foco i{ font-style: normal; color: var(--oro); } .hero__bajada{ margin: 0; max-width: 46ch; font-size: clamp(14px, 1.15vw, 16.5px); font-weight: 480; line-height: 1.45; letter-spacing: -.005em; color: var(--gris); text-wrap: balance; animation: subir .9s cubic-bezier(.16,1,.3,1) .36s both; } @keyframes subir{ from { opacity: 0; translate: 0 20px; filter: blur(7px); } to { opacity: 1; translate: 0 0; filter: blur(0); } } /* ========================================================================= 2 · CASOS DE ÉXITO — el elenco. Pieza central de la página. ESCRITORIO. Cuatro figuras apoyadas sobre la línea de piso. Al pasar el mouse por una, las otras tres se apagan casi del todo y se corren hacia afuera, la elegida crece, y SU relato aparece por encima de ella, de la mitad para abajo. El relato es hijo de la persona en el DOM (no un panel aparte), así que el hover no se corta al bajar el mouse hasta el texto ni hasta el botón: todo es la misma persona. Cada caso muestra sus números con una forma distinta —salto desde cero, salto contra el reloj, multiplicador, número único— porque son cuatro trabajos distintos y leerlos iguales los aplanaba. CELULAR. No hay hover ni tap que valga: cada caso pasa a ser una tarjeta de casi una pantalla, con la figura grande, y se enciende solo cuando cruza el medio del viewport (js/main.js). Abajo flota el rastro, que marca en cuál de los cuatro estás. El bloque de móvil está más abajo, en MÓVIL. ========================================================================= */ .elenco{ /* Propio de la sección: el cambio de personaje pasa muchas veces seguidas y con .55s la cola de cosas moviéndose llegaba a 970ms. --t-medio se queda como está porque lo usan el mosaico, los proyectos y las marcas. */ --t-caso: .34s cubic-bezier(.22,.61,.36,1); min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(14px, 2vh, 34px); /* La caja del velo del último caso se estira 80% hacia la derecha (ver EL RELATO) y se iba de la página. clip y no hidden: hidden en un eje obliga al otro a volverse scrollable, y la figura activa crece hacia arriba y tiene que poder salirse. Con clip el eje vertical sigue visible. */ overflow-x: clip; } .elenco > .envoltura{ width: 100%; } /* los casos de éxito se llevan más ancho que el resto de la página */ .envoltura--ancha{ max-width: 1760px; --gutter: clamp(16px, 3vw, 44px); } .elenco__encabezado{ display: grid; gap: clamp(12px, 1.9vh, 22px); justify-items: center; text-align: center; margin-bottom: clamp(16px, 3vh, 44px); transition: opacity var(--t-caso); } /* La figura crece hacia arriba cuando toma la pantalla. En vez de dejarle menos lugar para crecer, el encabezado se corre solo del camino. */ .elenco:has(.persona:hover) .elenco__encabezado, .elenco:has(.persona:focus-within) .elenco__encabezado, .elenco:has(.persona[data-activa]) .elenco__encabezado{ opacity: .2; } /* "Casos de éxito" bajó a etiqueta —la pastilla, igual que en todas las otras secciones— y el titular pasó a ser la promesa. Antes competían: un título en oro y, abajo, una frase con la palabra fuerte también en oro. Ahora hay una sola cosa grande y un solo acento. */ .elenco__titulo{ font-size: clamp(28px, min(4.9vw, 6.1vh), 68px); letter-spacing: -.05em; line-height: .98; /* 22ch + balance parte la frase en dos renglones parejos y deja ROMPIMOS abriendo el segundo. Más angosto caían tres y el encabezado se comía 60px de la altura de las figuras. */ max-width: 22ch; text-wrap: balance; color: var(--hueso); } /* Las mayúsculas se ponen acá y no en el HTML: si alguna vez la palabra tiene que ir en minúscula, se saca esta línea y no se toca el texto. Las versales necesitan menos apretado que la caja baja de al lado. */ .elenco__titulo em{ font-style: normal; text-transform: uppercase; letter-spacing: -.025em; color: var(--oro); text-shadow: 0 0 52px #FED5132e; } .escenario{ --figura: clamp(260px, 56vh, 560px); /* la franja de abajo es de los nombres. Las figuras se apoyan en su borde superior, que es donde va la línea de piso: así la línea no cruza el texto. */ --pie: clamp(54px, 6.6vh, 72px); position: relative; /* Columnas iguales, y el ancho total atado al alto de las figuras. Con columnas al ancho de cada figura los huecos quedaban parejos pero los CUERPOS desparejos, y el ojo lee los cuerpos: el grupo se veía corrido. */ display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 0; max-width: calc(var(--figura) * 2.72); margin-inline: auto; min-height: calc(var(--figura) + var(--pie)); isolation: isolate; } .piso{ position: absolute; inset-inline: -4%; bottom: var(--pie); height: 2px; border-radius: var(--r-pill); background: linear-gradient(90deg, transparent, var(--oro-hondo) 20%, var(--oro) 50%, var(--oro-hondo) 80%, transparent); transform-origin: 50% 50%; opacity: .55; z-index: 2; } .piso::after{ content:''; position: absolute; inset-inline: 18%; bottom: -1px; height: 54px; background: radial-gradient(60% 100% at 50% 0%, #FED5131f, transparent 72%); pointer-events: none; } /* .persona va en position: static a propósito: así el relato, que es hijo suyo, se ubica contra el ESCENARIO y no contra su columna. Un panel del ancho de una columna no entra ni el nombre. */ .persona{ position: static; display: grid; justify-items: center; align-content: end; min-width: 0; margin: 0; -webkit-tap-highlight-color: transparent; /* Sin transform ni filter acá, nunca: cualquiera de los dos la convierte en bloque contenedor y el relato deja de medirse contra el escenario. Lo que hay que mover o desaturar va en .persona__figura o en .persona__img. */ transition: opacity var(--t-caso); /* Dónde cae el relato de este caso, ya recortado para que el panel nunca se salga del escenario: los de las puntas quedan pegados al borde y con el texto alineado hacia afuera, así el bloque igual cae encima de la figura. */ --rel: 50%; --ta: center; --ji: center; } .persona:nth-of-type(1){ --rel: 31%; --ta: left; --ji: start; --vi: -80%; } .persona:nth-of-type(2){ --rel: 37.5%; } .persona:nth-of-type(3){ --rel: 62.5%; } .persona:nth-of-type(4){ --rel: 69%; --ta: right; --ji: end; --vd: -80%; } /* Acá había una máscara horizontal con --corte-izq / --corte-der para disolver el lado que el cuadro original cortó. Esas dos variables no se definían en ningún lado, así que resolvía a "opaco de punta a punta": no borraba nada y sólo obligaba al motor a tratar el como capa enmascarada, que es justo lo que encarece animarle un filter encima. Si alguna vez hace falta disolver un lado, vuelve acá y se le definen las variables a esa .persona. */ .persona__figura picture{ display: block; } .persona__figura{ /* fit-content y no 100%: la caja ocupaba la columna entera aunque la persona recortada sea bastante más angosta, y al escalar 1.24 esos costados vacíos se metían en la columna del vecino y le robaban el puntero. Medido, con esto la zona muerta del cambio de personaje queda en cero a toda altura. */ position: relative; width: fit-content; display: grid; justify-items: center; /* crece desde los pies: la figura queda apoyada en la línea de piso */ transform-origin: 50% 100%; transition: scale var(--t-caso), translate var(--t-caso); } .persona__img{ width: auto; max-width: none; /* --alto iguala el tamaño de las cabezas: los recortes vienen de encuadres distintos y sin esto se nota que salieron de fotos diferentes */ height: calc(var(--figura) * var(--alto, 1)); object-fit: contain; object-position: bottom center; /* Sin filtro en reposo: la figura se ve como la foto. Antes acá había un grayscale(.6) contrast(1.05) brightness(.78) que le comía el 60% de la saturación y el 22% del brillo, y como en escritorio hay que pasar el mouse para verla bien, ése era el estado en el que casi todo el mundo veía la sección. La jerarquía la carga el apagado de las OTRAS tres, que sigue estando y es el recurso más fuerte. */ filter: none; transition: filter var(--t-caso); /* El recorte viene ajustado al bounding box del alfa, así que el borde de abajo del archivo SON los pies: hay un corte al ras (72-88% de la última fila es opaca) y por eso la máscara tiene que existir. Pero con 76% se comía el cuarto inferior del CUERPO —los antebrazos cruzados de Gael, las manos de Oscu, el buzo rosa de Valen desde la cintura— y eso es lo que se leía como transparencia. Ahora tapa el corte y nada más. */ -webkit-mask-image: linear-gradient(#000 90%, #000e 96%, transparent 100%); mask-image: linear-gradient(#000 90%, #000e 96%, transparent 100%); } /* Al entrar en una figura arrancan a la vez tres transiciones de filter (las otras tres se van a grayscale). grayscale, contrast y brightness son de las que el compositor sabe resolver solo, pero necesita que la imagen tenga capa propia; will-change se la da de antemano, que es lo que importa, porque pedirla recién en :hover crea la capa justo en el cuadro que tiene que salir fluido. OJO, esto NO está comprobado. Se midió el hover con punteros reales por CDP y el CPU frenado 6x, y el hilo principal no se despeina ni con capa ni sin ella: 16,7 ms por cuadro las dos veces, sin un solo cuadro largo. Pero esa medición es ciega justo acá: headless dibuja por software, donde las capas de compositor no existen, así que no puede ver ni para bien ni para mal lo único que hace esta línea. Queda porque es lo estándar para animar un filter y cuesta poco; si algún día se mide en una máquina con GPU y no cambia nada, se saca sin miedo. Sólo con mouse: son cuatro imágenes grandes y en un teléfono esa memoria se paga sin necesidad, porque ahí las figuras son chicas y nunca se apagan tres a la vez. */ @media (hover: hover){ .persona__img{ will-change: filter; } } .persona__halo{ position: absolute; inset: auto 0 -6% 0; height: 78%; background: radial-gradient(50% 60% at 50% 78%, #FED5133d, transparent 70%); opacity: 0; transition: opacity var(--t-caso); pointer-events: none; z-index: -1; } .persona__pie{ height: var(--pie); /* fija la franja: la línea de piso cae justo arriba */ align-content: center; transition: opacity var(--t-caso), translate var(--t-caso); display: grid; gap: 5px; justify-items: center; text-align: center; } .persona__nombre{ font-size: clamp(14px, 1.45vw, 20px); font-weight: 680; letter-spacing: -.025em; color: var(--gris); transition: color var(--t-rapido); white-space: nowrap; } .persona__rubro{ font-size: clamp(9.5px, .78vw, 11.5px); letter-spacing: .16em; text-transform: uppercase; color: var(--gris-2); transition: color var(--t-rapido); } /* --- el protagonista ---------------------------------------------------- */ .persona:is(:hover, :focus-within, [data-activa]){ z-index: 4; } /* la escala y el halo cargan el énfasis que antes cargaba el color */ .persona:is(:hover, :focus-within, [data-activa]) .persona__figura{ scale: 1.28; } /* El estado activo ya no toca el color. Antes subía a brightness(1.06), que recorta a blanco puro todo lo que pase de 236: el 25,6% del buzo amarillo de Oscu quedaba plano y con el tono corrido, justo en el momento de máxima atención. La figura elegida es, simplemente, la foto. */ .persona:is(:hover, :focus-within, [data-activa]) .persona__halo{ opacity: 1; } /* La línea de piso es de la tira completa. Cuando un caso se queda con la pantalla, una raya dorada de punta a punta por detrás del relato le pelea el foco a la figura: se apaga casi del todo y queda sólo el resplandor. Va por filter y no por opacity: la entrada ligada al scroll (piso-dibuja) anima opacity con fill both, y una animación le gana a una declaración normal — el apagado no se vería nunca. filter no lo toca nadie. */ .escenario:has(.persona:is(:hover, :focus-within, [data-activa])) .piso{ filter: opacity(.18); transition: filter var(--t-caso); } /* --- los otros tres: se apagan y le dejan la pantalla -------------------- */ .escenario:has(.persona:is(:hover, :focus-within, [data-activa])) .persona__pie{ opacity: 0; translate: 0 10px; } .escenario:has(.persona:is(:hover, :focus-within, [data-activa])) .persona:not(:hover, :focus-within, [data-activa]){ opacity: .13; } .escenario:has(.persona:is(:hover, :focus-within, [data-activa])) .persona:not(:hover, :focus-within, [data-activa]) .persona__img{ /* las tres funciones y en el mismo orden que los otros dos estados: si la lista es más corta, filter no interpola y pega un salto duro a mitad de camino en vez de deslizarse */ filter: grayscale(1) contrast(1.05) brightness(.34); } .escenario:has(.persona:is(:hover, :focus-within, [data-activa])) .persona:not(:hover, :focus-within, [data-activa]) .persona__figura{ scale: .84; } .escenario:has(.persona:is(:hover, :focus-within, [data-activa])) .persona:nth-of-type(1):not(:hover, :focus-within, [data-activa]) .persona__figura{ translate: -18% 0; } .escenario:has(.persona:is(:hover, :focus-within, [data-activa])) .persona:nth-of-type(2):not(:hover, :focus-within, [data-activa]) .persona__figura{ translate: -7% 0; } .escenario:has(.persona:is(:hover, :focus-within, [data-activa])) .persona:nth-of-type(3):not(:hover, :focus-within, [data-activa]) .persona__figura{ translate: 7% 0; } .escenario:has(.persona:is(:hover, :focus-within, [data-activa])) .persona:nth-of-type(4):not(:hover, :focus-within, [data-activa]) .persona__figura{ translate: 18% 0; } /* ========================================================================= EL RELATO — la historia de cada uno, por encima de la figura --baja lo deja caer un poco más abajo del escenario: sobre una pantalla corta, si el panel arrancara justo en el borde de abajo, le tapaba la cara a la figura además del cuerpo. ========================================================================= */ .elenco__cuerpo{ position: relative; --baja: clamp(22px, 4.4vh, 58px); padding-bottom: var(--baja); } .relato{ position: absolute; left: var(--rel, 50%); bottom: calc(var(--baja) * -1); width: min(620px, 62%); translate: -50% 18px; z-index: 5; display: grid; justify-items: var(--ji, center); gap: clamp(11px, 1.7vh, 19px); text-align: var(--ta, center); /* el relleno de abajo es lo que despega el botón del canto de la sombra */ padding: clamp(50px, 8.6vh, 116px) clamp(12px, 1.6vw, 26px) clamp(18px, 3vh, 38px); opacity: 0; pointer-events: none; transition: opacity var(--t-caso), translate var(--t-caso); } /* El velo que hace legible el texto sobre la persona. Era un degradado vertical dentro de una caja y se le veían los cantos: un rectángulo oscuro pegado encima de la figura. Ahora son dos elipses, y la regla que las hace invisibles es una sola: CADA ELIPSE TIENE QUE LLEGAR A TRANSPARENTE ANTES DEL BORDE DE SU CAJA. Si no llega, el borde de la caja corta el degradado a mitad de camino y vuelve a aparecer la línea recta. De ahí salen los números: la caja se estira un 52% hacia arriba y la elipse se centra al 90% de ese alto con radio 90% (90/90 = 1, o sea que arriba ya está en cero), y los radios horizontales quedan abajo de la mitad del ancho por lo mismo. En las columnas de las puntas el texto va alineado hacia afuera, así que la caja se estira del lado vacío (--vi / --vd) y el centro de la elipse vuelve a caer sobre el texto sin tener que correrlo. Si alguna vez hay que oscurecer más arriba, se agranda el estirado, NO el radio: agrandar el radio es lo que trae de vuelta la línea. */ .relato::before{ content:''; position: absolute; inset: -52% var(--vd, -26%) -16% var(--vi, -26%); background: radial-gradient(ellipse 54% 90% at 50% 90%, #0A0A0A 0%, #0A0A0Af7 38%, #0A0A0Ac9 60%, #0A0A0A5e 78%, #0A0A0A00 93%), radial-gradient(ellipse 56% 46% at 50% 100%, #0A0A0Ad9 0%, #0A0A0A6b 50%, #0A0A0A00 84%); z-index: -1; pointer-events: none; } .persona:is(:hover, :focus-within, [data-activa]) .relato{ --abierta: 1; opacity: 1; translate: -50% 0; } /* El relato mide 620px fijos y se dibuja ENCIMA de la figura del vecino: con pointer-events:auto en la caja, el puntero seguía cayendo en la persona abierta mientras cruzaba la columna de al lado, y el cambio no ocurría hasta salir del panel. Medido: 393px de recorrido muerto, más de una columna entera. El hit-test queda sólo en lo que hay que poder tocar o leer. */ .persona:is(:hover, :focus-within, [data-activa]) .relato{ pointer-events: none; } .persona:is(:hover, :focus-within, [data-activa]) .relato__link{ pointer-events: auto; } /* entrada escalonada: cada pieza del relato llega con su propio retraso */ .relato > *{ transition: opacity .28s cubic-bezier(.16,1,.3,1), translate .34s cubic-bezier(.16,1,.3,1), filter .28s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 45ms + 25ms); opacity: var(--abierta, 0); translate: 0 calc((1 - var(--abierta, 0)) * 14px); filter: blur(calc((1 - var(--abierta, 0)) * 6px)); } .relato > :nth-child(2){ --i: 1 } .relato > :nth-child(3){ --i: 2 } .relato > :nth-child(4){ --i: 3 } .relato > :nth-child(5){ --i: 4 } .relato__quien{ margin: 0; display: grid; gap: 4px; justify-items: var(--ji, center); } .relato__nombre{ display: block; font-size: clamp(26px, min(2.9vw, 4.6vh), 48px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--hueso); } .relato__rubro{ display: block; font-size: clamp(10px, min(.88vw, 1.45vh), 12.5px); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); } .relato__texto{ margin: 0; max-width: 46ch; font-size: clamp(14px, min(1.18vw, 2.05vh), 19px); line-height: 1.52; color: var(--gris); text-wrap: pretty; } .relato__texto b{ color: var(--hueso); font-weight: 720; } /* --- los números: una forma distinta para cada caso ---------------------- */ /* Las tres cifras tienen números de cuerpos distintos (60px, 36px, 23px). Con los bloques centrados verticalmente quedaban las etiquetas escalonadas y las cifras flotando a distintas alturas. Estirándolos y anclando la etiqueta arriba y el número abajo, las etiquetas caen todas en la misma línea y los números se apoyan en un mismo piso. */ .cifras{ display: flex; flex-wrap: wrap; align-items: stretch; justify-content: var(--ji, center); gap: clamp(11px, 1.9vw, 30px); } .cifra{ margin: 0; display: grid; gap: 6px; grid-template-rows: auto 1fr; justify-items: var(--ji, center); text-align: var(--ta, center); } .cifra__k{ font-size: clamp(10px, min(.86vw, 1.42vh), 12.5px); letter-spacing: .18em; text-transform: uppercase; color: var(--gris-2); } /* align-self: end apoya la caja en el piso de la fila, así las tres cifras de la fila quedan a la misma altura. Adentro va CENTRADO y no por línea de base. En "0 → 120 K" los dos números tienen cuerpos distintos (42 y 60px), y apoyados en la misma base el 0 queda con su centro más abajo que el del 120 K: la flecha no puede estar alineada con los dos a la vez. Centrados, los tres comparten un mismo eje. Y centrar las CAJAS acá centra los NÚMEROS: con line-height .9 la altura de mayúscula queda centrada en la caja (va de .085em a .795em de una caja de .9em), así que el centro de la caja y el centro óptico del número caen en el mismo lugar. Si alguna vez se toca ese line-height, hay que revisar esto. */ .cifra__v{ align-self: end; display: flex; align-items: center; gap: clamp(8px, 1.2vw, 15px); font-variant-numeric: tabular-nums; white-space: nowrap; } .cifra__v b, .salto__despues{ font-size: clamp(32px, min(3.8vw, 5.7vh), 60px); font-weight: 830; letter-spacing: -.055em; line-height: .9; color: var(--oro); font-variant-numeric: tabular-nums; } /* el dato de apoyo: mismo peso tipográfico, la mitad de voz */ .cifra--menor .cifra__v b{ font-size: clamp(21px, min(2.35vw, 3.6vh), 36px); color: var(--hueso); } /* el número único, cuando el caso se cuenta con una sola cifra */ .cifra--xl .cifra__v b{ font-size: clamp(40px, min(4.9vw, 7.3vh), 82px); } /* El dato que no es un número —"Día 1", "Clips de stream"—. Baja de cuerpo para que una palabra no le gane la voz a una cifra: es lo que reemplazó a las pastillas amarillas, que se comían la fila entera. */ .cifra--texto .cifra__v b{ font-size: clamp(15px, min(1.55vw, 2.5vh), 23px); font-weight: 720; letter-spacing: -.025em; line-height: .95; color: var(--hueso); } /* el dato que ES el titular del caso: los 4 meses de Valen, el ×3,5 de Gael */ .cifra--acento .cifra__v b{ color: var(--oro); } /* "desde 200 K" va en el mismo renglón que el número y no debajo: colgada abajo le sumaba una fila al bloque y la cifra de Gael quedaba 20px más alta que las otras dos de la fila. */ .cifra__nota{ align-self: flex-end; margin-bottom: .3em; font-size: clamp(10.5px, min(.88vw, 1.45vh), 13px); color: var(--gris-2); letter-spacing: -.01em; font-weight: 560; } .cifra__sep{ align-self: center; width: 1.5px; height: clamp(34px, 5vh, 58px); border-radius: var(--r-pill); background: linear-gradient(#ffffff00, #ffffff26, #ffffff00); } /* El cero de "0 → 120 K". Es la mitad del argumento —que el canal no existía— y estaba puesto como una nota al pie. Va casi al cuerpo del número de llegada, en blanco roto, para que se lea CERO de lejos. */ .salto__antes{ font-size: clamp(24px, min(2.8vw, 4.2vh), 42px); font-weight: 740; color: var(--gris); letter-spacing: -.04em; line-height: .9; font-variant-numeric: tabular-nums; } /* La flecha no tiene texto, así que cualquier alineación por línea de base le inventa una y la deja hundida contra el número. Va centrada, igual que los dos números. Pero centrar la CAJA no centra la TINTA: la caja de un texto es asimétrica respecto de sus cifras —arriba sobra lo que la fuente reserva para acentos, abajo lo que reserva para las colas— y el desfasaje vale (ascendente − descendente − altura de cifra) / 2, que en esta familia da .08em. Es una constante de la tipografía: no depende del cuerpo ni del line-height, así que no hay valor de line-height que lo arregle. Se compensa acá, y el font-size de al lado —que no imprime nada, la flecha es un rectángulo— está sólo para que ese em escale con el número en cada medida de pantalla. Si cambia el cuerpo de .salto__despues, cambia acá también. */ .salto__flecha{ flex: 0 0 auto; align-self: center; font-size: clamp(32px, min(3.8vw, 5.7vh), 60px); translate: 0 .08em; width: clamp(24px, 3vw, 44px); height: 2px; border-radius: var(--r-pill); background: linear-gradient(90deg, #55524A, var(--oro)); position: relative; /* la flecha se dibuja sola al abrirse el relato */ transform-origin: 0 50%; scale: var(--abierta, 0) 1; transition: scale .34s cubic-bezier(.16,1,.3,1) .12s; } .salto__flecha::after{ content:''; position:absolute; right: -1px; top: -3px; border-left: 7px solid var(--oro); border-block: 4px solid transparent; } /* El número lo cuenta el JS. La versión anterior era CSS puro (@property + counter()) y funcionaba en Chrome, pero Safari no repinta counter() mientras interpola la variable: el número saltaba del inicial al final de un tirón. */ .relato__link{ display: inline-flex; align-items: center; gap: 11px; padding: 15px 26px; border-radius: var(--r-pill); background: #FED5131a; box-shadow: inset 0 0 0 1.5px #FED51347; color: var(--oro); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; /* los retrasos van por propiedad: la entrada llega última, pero el hover del botón tiene que responder en el acto */ transition: opacity .28s cubic-bezier(.16,1,.3,1) 160ms, translate .34s cubic-bezier(.16,1,.3,1) 160ms, filter .28s cubic-bezier(.16,1,.3,1) 160ms, background var(--t-rapido) 0s, scale var(--t-rapido) 0s; } .relato__link:hover{ background: #FED51333; scale: 1.04; } .relato__link:focus-visible{ outline: 2px solid var(--oro); outline-offset: 3px; } .relato__link::after{ content:''; width:0; height:0; border-left: 7px solid var(--oro); border-block: 4.5px solid transparent; } /* ========================================================================= EL RASTRO — el marcador de scroll de celular Flota abajo de todo mientras la sección está en pantalla y va marcando en cuál de los cuatro casos estás. En escritorio no existe: ahí el estado lo dice la figura encendida. ========================================================================= */ .rastro{ display: none; } /* ========================================================================= Bloques genéricos + 4 · LA PRUEBA (capturas de YouTube Studio) ========================================================================= */ .bloque{ padding-block: clamp(64px, 10vh, 130px); } .bloque__encabezado{ display: grid; gap: clamp(16px, 2.2vh, 24px); justify-items: center; text-align: center; margin-bottom: clamp(34px, 6vh, 72px); } /* los dos casos van uno al lado del otro: apilados se comían media pantalla */ .prueba{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 470px), 1fr)); gap: clamp(14px, 1.8vw, 22px); } .prueba__caso{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(10px, 1.4vw, 18px); padding: clamp(16px, 1.8vw, 24px); border-radius: var(--r-xl); background: #121110; box-shadow: inset 0 0 0 1px #ffffff12; } .prueba__captura{ border-radius: var(--r-md); overflow: hidden; background: #000; /* ancho definido, no max-width: con max-width el contenedor quedaba en 0, la imagen diferida nunca entraba en cuadro y no cargaba nunca */ width: min(250px, 100%); justify-self: center; box-shadow: 0 20px 50px -24px #000; } .prueba__captura img{ width: 100%; } .prueba__flecha{ display: grid; place-items: center; width: clamp(36px, 3.4vw, 46px); aspect-ratio: 1; border-radius: var(--r-pill); background: var(--oro); box-shadow: 0 0 0 8px #FED51314, 0 0 26px #FED51338; } .prueba__flecha::after{ content:''; width: 0; height: 0; margin-left: 4px; border-left: clamp(10px, 1vw, 12px) solid #0A0A0A; border-block: clamp(6.5px, .68vw, 8px) solid transparent; } .prueba__quien{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 16px; margin: 0; text-align: center; } .prueba__nombre{ font-size: clamp(17px, 1.6vw, 22px); font-weight: 740; letter-spacing: -.035em; } .prueba__delta{ font-size: clamp(13.5px, 1.1vw, 16px); font-weight: 680; color: var(--oro); font-variant-numeric: tabular-nums; } .prueba__pie{ font-size: clamp(12.5px, .98vw, 14px); color: var(--gris-2); margin: 18px 0 0; text-align: center; } /* ========================================================================= 5 · NUESTROS MEJORES RESULTADOS — mosaico irregular y 6 · PARTE DEL PROCESO (el bloque .versiones, antes/después) ========================================================================= */ .mosaico{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: clamp(14px, 1.8vw, 22px); } /* Las del podcast son seis: con la medida del mosaico normal salen 4 + 2 y la segunda fila queda coja. Pidiendo columnas más anchas caen 3 + 3, y de paso se lee el texto de las miniaturas, que es la gracia del formato. */ .mosaico--podcast{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } .mini{ display: grid; gap: 10px; align-content: start; } .mini__marco{ position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--sup-2); box-shadow: 0 22px 50px -28px #000; transition: scale var(--t-medio), box-shadow var(--t-medio); } .mini__marco img{ width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) brightness(.94); transition: scale var(--t-medio), filter var(--t-medio); } .mini:hover .mini__marco{ scale: 1.015; box-shadow: 0 30px 70px -30px #000, 0 0 0 2px #FED51366; } .mini:hover .mini__marco img{ scale: 1.06; filter: saturate(1.05) brightness(1); } /* el número de vistas monta la esquina de la miniatura */ .mini__vistas{ position: absolute; left: 0; bottom: 0; margin: 0; /* es un

: sin esto el margen del navegador lo despega ~16px de la esquina y la chapa flota */ padding: 8px 15px 7px 13px; border-start-end-radius: var(--r-md); background: var(--oro); color: #0A0A0A; font-size: clamp(16px, 1.6vw, 22px); font-weight: 820; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; } .mini__vistas small{ display: block; font-size: 9.5px; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin-top: 4px; } .mini__texto{ display: grid; gap: 5px; padding-inline: 4px; } .mini__titulo{ margin: 0; font-size: clamp(13.5px, 1.05vw, 15.5px); font-weight: 600; letter-spacing: -.02em; line-height: 1.32; color: var(--hueso); } .mini__quien{ margin: 0; font-size: clamp(10.5px, .82vw, 12px); letter-spacing: .1em; text-transform: uppercase; color: var(--gris-2); } /* --- las dos versiones de una misma miniatura --------------------------- Cada par vive en su propia caja. Para sumar otro antes/después se duplica el bloque .versiones entero en el HTML: la grilla los apila sola. */ .versiones + .versiones{ margin-top: clamp(16px, 2.2vw, 26px); } .versiones{ padding: clamp(20px, 2.6vw, 34px); border-radius: var(--r-xl); background: #121110; box-shadow: inset 0 0 0 1px #ffffff12; display: grid; gap: clamp(18px, 2.6vw, 30px); } .versiones__pie{ margin: 0; text-align: center; max-width: 62ch; justify-self: center; font-size: clamp(13.5px, 1.05vw, 15.5px); line-height: 1.5; color: var(--gris); text-wrap: pretty; } .versiones__par{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(14px, 2.2vw, 26px); max-width: 900px; margin-inline: auto; } .version{ display: grid; gap: 12px; justify-items: center; } .version__marco{ border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/9; width: 100%; box-shadow: 0 20px 50px -26px #000; } .version__marco img{ width:100%; height:100%; object-fit: cover; } .version--antes .version__marco img{ filter: saturate(.5) brightness(.72); } .version__sello{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill); font-size: 11px; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; width: fit-content; } .version--antes .version__sello{ background: #2A2820; color: var(--gris); } .version--despues .version__sello{ background: var(--oro); color: #0A0A0A; } /* ========================================================================= 7 · PROYECTOS AISLADOS DONDE PARTICIPAMOS y 11 · MARCAS (van abajo de todo en el HTML, pero comparten familia) Grilla pareja y densa: acá el volumen es el argumento, no cada pieza. ========================================================================= */ .proyectos{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(16px, 2.2vw, 28px); } .proy{ display: grid; gap: 10px; align-content: start; } .proy__marco{ position: relative; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 16/9; background: var(--sup-2); box-shadow: 0 18px 44px -26px #000; transition: scale var(--t-medio), box-shadow var(--t-medio); } .proy__marco img{ width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.9); transition: filter var(--t-medio), scale var(--t-medio); } .proy:hover .proy__marco{ scale: 1.02; box-shadow: 0 26px 58px -28px #000, 0 0 0 2px #FED51347; } .proy:hover .proy__marco img{ filter: saturate(1.02) brightness(1); scale: 1.05; } .proy__vistas{ position: absolute; left: 0; bottom: 0; margin: 0; padding: 8px 15px 7px 13px; border-start-end-radius: var(--r-md); background: var(--oro); color: #0A0A0A; font-size: clamp(15px, 1.5vw, 20px); font-weight: 820; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; } .proy__titulo{ margin: 0; padding-inline: 3px; font-size: clamp(13.5px, 1.05vw, 15.5px); font-weight: 600; letter-spacing: -.02em; line-height: 1.32; color: var(--hueso); } .proy__con{ margin: 0; padding-inline: 3px; font-size: clamp(10.5px, .82vw, 12px); letter-spacing: .1em; text-transform: uppercase; color: var(--oro-hondo); } /* --- marcas — van abajo de todo, después del cierre ----------------------- */ .marcas-bloque{ padding-block: 0 clamp(24px, 4vh, 48px); } .marcas{ padding-top: clamp(30px, 4vh, 48px); border-top: 1px solid #ffffff12; display: grid; gap: clamp(18px, 2.6vh, 28px); justify-items: center; } .marcas__k{ margin: 0; font-size: clamp(10.5px, .84vw, 12px); letter-spacing: .18em; text-transform: uppercase; color: var(--gris-2); } .marcas__fila{ display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 2.4vw, 32px); } .marca{ width: clamp(140px, 15vw, 190px); border-radius: var(--r-lg); overflow: hidden; background: #000; box-shadow: inset 0 0 0 1.5px #ffffff12; transition: box-shadow var(--t-medio), scale var(--t-medio); } .marca img{ width: 100%; opacity: .88; transition: opacity var(--t-medio); } .marca:hover{ scale: 1.03; box-shadow: inset 0 0 0 1.5px #FED51347; } .marca:hover img{ opacity: 1; } /* ========================================================================= 9 · SERVICIOS — los tres caminos Cada camino es una barra ancha. Al pasarle el mouse, una luz amarilla la barre de izquierda a derecha y el CTA se llena: la fila entera reacciona, no un botoncito. ========================================================================= */ .caminos{ display: grid; gap: clamp(12px, 1.6vw, 18px); } .camino{ position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(18px, 3vw, 44px); padding: clamp(24px, 3.2vw, 42px) clamp(24px, 3.4vw, 46px); border-radius: var(--r-xl); background: #121110; box-shadow: inset 0 0 0 1px #ffffff12; text-decoration: none; color: inherit; transition: box-shadow var(--t-medio), translate var(--t-medio); } /* el barrido de luz: un gradiente que entra desde la izquierda */ .camino::before{ content:''; position: absolute; inset: 0; background: linear-gradient(100deg, #FED51314, #FED51305 38%, transparent 62%); translate: -102% 0; transition: translate .75s cubic-bezier(.16,1,.3,1); pointer-events: none; } .camino:hover, .camino:focus-visible{ translate: 0 -3px; background: #17150F; box-shadow: inset 0 0 0 1px #FED51333; outline: none; } .camino:hover::before, .camino:focus-visible::before{ translate: 0 0; } .camino__n{ font-size: clamp(30px, 4vw, 56px); font-weight: 820; letter-spacing: -.06em; line-height: 1; color: #ffffff12; transition: color var(--t-medio); } .camino:hover .camino__n, .camino:focus-visible .camino__n{ color: #FED5133d; } .camino__cuerpo{ display: grid; gap: 8px; min-width: 0; } .camino__t{ font-size: clamp(22px, 2.9vw, 40px); font-weight: 760; letter-spacing: -.04em; line-height: 1.02; } .camino__t em{ font-style: normal; color: var(--oro); } .camino__d{ font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.5; color: var(--gris); text-wrap: pretty; } .camino__cta{ display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: var(--r-pill); background: #FED5131a; box-shadow: inset 0 0 0 1.5px #FED51347; color: var(--oro); font-size: 13.5px; font-weight: 740; letter-spacing: .04em; white-space: nowrap; transition: background var(--t-medio), color var(--t-medio), box-shadow var(--t-medio), scale var(--t-medio); } .camino__cta::after{ content:''; width:0; height:0; border-left: 7px solid currentColor; border-block: 4.5px solid transparent; } .camino:hover .camino__cta, .camino:focus-visible .camino__cta{ background: var(--oro); color: #0A0A0A; box-shadow: 0 10px 24px -14px #FED5134d; scale: 1.03; } /* ========================================================================= 10a · LAS TRES ALTERNATIVAS (viven adentro del cierre) ========================================================================= */ .cierre__caja .alternativas{ width: 100%; margin-block: clamp(6px, 1.6vh, 18px); text-align: left; } .alternativas{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: clamp(14px, 2vw, 22px); align-items: stretch; } .alt{ position: relative; padding: clamp(24px, 2.6vw, 32px) clamp(22px, 2.4vw, 28px) clamp(26px, 2.8vw, 34px); border-radius: var(--r-lg); background: #131210; box-shadow: inset 0 0 0 1px #ffffff14; display: grid; gap: 14px; align-content: start; transition: translate var(--t-medio), box-shadow var(--t-medio), background var(--t-medio); } .alt:hover{ translate: 0 -3px; background: #17150F; box-shadow: inset 0 0 0 1px #FED5132e, 0 22px 46px -28px #000; } .alt__sello{ display: block; color: var(--oro-hondo); font-size: 11px; font-weight: 740; letter-spacing: .16em; text-transform: uppercase; } .alt:hover .alt__sello{ color: var(--oro); } .alt__t{ font-size: clamp(21px, 2vw, 28px); font-weight: 740; letter-spacing: -.035em; } .alt__d{ margin: 0; font-size: clamp(14.5px, 1.1vw, 16px); line-height: 1.55; color: var(--gris); text-wrap: pretty; } /* La fila 1fr se la come la descripción, así los botones de tarjetas con textos de distinto largo quedan alineados entre sí. Sólo en las que tienen botón: Cliente no lo lleva, y con la plantilla puesta igual se comería el gap de una cuarta fila vacía. */ .alt:has(.alt__cta){ grid-template-rows: auto auto 1fr auto; align-content: stretch; } .alt__cta{ justify-self: start; margin-top: 4px; display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: var(--r-pill); background: #ffffff0f; color: var(--hueso); box-shadow: inset 0 0 0 1px #ffffff26; font-size: 14px; font-weight: 700; letter-spacing: -.015em; text-decoration: none; white-space: nowrap; transition: background var(--t-rapido), box-shadow var(--t-rapido), color var(--t-rapido); } .alt__cta::after{ content:''; width:0; height:0; border-left: 7px solid currentColor; border-block: 4.5px solid transparent; } /* se enciende con la tarjeta entera y no sólo si le apuntás justo al botón */ .alt:hover .alt__cta, .alt__cta:hover{ background: var(--oro); color: #0A0A0A; box-shadow: none; } /* ========================================================================= 3 · CLIENTES — cada foto abre el canal de YouTube de esa persona La ficha es un entero, no una

con un link adentro: el objetivo de click es la foto completa, que es lo que la gente va a tocar. Los que todavía no tienen canal confirmado se quedan como
y comparten todo el estilo menos el estado de link. ========================================================================= */ .confian{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 152px), 1fr)); gap: clamp(12px, 1.6vw, 20px); } .confia{ margin: 0; display: grid; gap: 12px; text-decoration: none; color: inherit; } .confia__marco{ position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--sup-2); box-shadow: 0 18px 44px -26px #000; transition: scale var(--t-medio), box-shadow var(--t-medio); } .confia__marco img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(.82); transition: filter var(--t-medio), scale var(--t-medio); } .confia:hover .confia__marco, .confia:focus-visible .confia__marco{ scale: 1.02; box-shadow: 0 26px 60px -30px #000, 0 0 0 2px #FED51347; } .confia:hover .confia__marco img, .confia:focus-visible .confia__marco img{ filter: grayscale(0) contrast(1) brightness(1); scale: 1.05; } /* el anillo dorado del hover es de alfa .28: alcanza como adorno pero no como señal de foco. Con teclado va un contorno sólido, igual que en las figuras. */ .confia:focus-visible{ outline: none; } .confia:focus-visible .confia__marco{ outline: 2px solid var(--oro); outline-offset: 4px; } /* El disco con el triángulo de play: es la señal de que la foto lleva al canal. Sólo aparece en las que son ; las
no lo tienen en el HTML. */ .confia__play{ position: absolute; inset: auto 10px 10px auto; width: 34px; height: 34px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--oro); opacity: 0; scale: .7; translate: 0 6px; transition: opacity var(--t-rapido), scale var(--t-rapido), translate var(--t-rapido); } .confia__play::after{ content:''; width: 0; height: 0; margin-left: 3px; border-left: 10px solid #0A0A0A; border-block: 6.5px solid transparent; } .confia:hover .confia__play, .confia:focus-visible .confia__play{ opacity: 1; scale: 1; translate: 0 0; } .confia__nombre{ font-size: clamp(12.5px, 1vw, 14.5px); font-weight: 640; letter-spacing: -.015em; color: var(--gris); text-align: center; transition: color var(--t-rapido); } .confia:hover .confia__nombre, .confia:focus-visible .confia__nombre{ color: var(--hueso); } /* En táctil no hay hover, así que el estado de reposo TIENE que ser el estado terminado. Con el blanco y negro puesto, en un teléfono la grilla entera se veía apagada y la única forma de darle color a una foto era tocarla — que es justo lo que abre el canal. Un estado que sólo se puede ver yéndote de la página no es un estado. Van a color de entrada, y el play siempre puesto para que se entienda que la foto es tocable. El pasaje de gris a color queda para el mouse, que es donde existe el hover. */ @media (hover: none){ .confia__marco img{ filter: none; } .confia__play{ opacity: .92; scale: 1; translate: 0 0; } } /* ========================================================================= 10b · CIERRE ========================================================================= */ .cierre{ padding-block: clamp(70px, 12vh, 150px); } .cierre__caja{ position: relative; overflow: hidden; padding: clamp(42px, 6vw, 84px) clamp(26px, 5vw, 60px); border-radius: var(--r-xl); background: #111110; box-shadow: inset 0 0 0 1px #ffffff14; display: grid; justify-items: center; gap: clamp(18px, 3vh, 30px); text-align: center; } .cierre__t{ font-size: clamp(32px, 5.4vw, 76px); letter-spacing: -.05em; max-width: 16ch; text-wrap: balance; } .cierre__t em{ font-style: normal; color: var(--oro); } .boton{ display: inline-flex; align-items: center; gap: 11px; padding: 17px 32px; border-radius: var(--r-pill); background: var(--oro); color: #0A0A0A; font-weight: 740; font-size: 16px; letter-spacing: -.015em; text-decoration: none; transition: translate var(--t-rapido), box-shadow var(--t-rapido), background var(--t-rapido); } .boton::after{ content:''; width:0; height:0; border-left: 8px solid #0A0A0A; border-block: 5px solid transparent; } .boton:hover{ translate: 0 -2px; background: var(--oro-claro); box-shadow: 0 10px 26px -14px #FED51338; } .pie{ border-top: 1px solid #ffffff12; padding-block: 32px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--gris-2); } .pie img{ width: 40px; opacity: .9; } /* ========================================================================= Entradas ligadas al scroll — nativas, sobre el compositor ========================================================================= */ @supports (animation-timeline: view()) { /* La entrada va en el y NO en .persona: un translate o un filter sobre .persona la convierte en bloque contenedor de lo absoluto, y el relato —que es hijo suyo— se mediría contra la columna en vez de contra el escenario. Con 62% de una columna no entra ni el nombre. */ .persona__figura picture{ animation: figura-entra linear both; animation-timeline: view(); animation-range: entry 12% entry 92%; } .persona:nth-of-type(2) .persona__figura picture{ animation-range: entry 6% entry 86%; } .persona:nth-of-type(3) .persona__figura picture{ animation-range: entry 18% entry 98%; } .persona:nth-of-type(4) .persona__figura picture{ animation-range: entry 10% entry 90%; } /* Sin filter acá: con fill both el se queda con un blur(0) puesto para siempre, o sea una capa filtrada, y al escalarla al 124% aparecía una costura horizontal a la altura del cuello. La entrada se resuelve igual de bien con opacidad y desplazamiento. */ @keyframes figura-entra{ from { opacity: 0; translate: 0 9%; } to { opacity: 1; translate: 0 0; } } .piso{ animation: piso-dibuja linear both; animation-timeline: view(); animation-range: entry 25% entry 100%; } @keyframes piso-dibuja{ from { scale: 0 1; opacity: 0; } to { scale: 1 1; opacity: .55; } } .aparece, .mini, .proy, .camino, .alt, .confia, .prueba__caso, .versiones{ animation: aparece linear both; animation-timeline: view(); animation-range: entry 5% entry 92%; } @keyframes aparece{ from { opacity: 0; translate: 0 30px; filter: blur(8px); } to { opacity: 1; translate: 0 0; filter: blur(0); } } /* el mosaico entra escalonado, cada pieza con su propio tramo de scroll */ .mini:nth-child(2n), .proy:nth-child(2n), .confia:nth-child(2n){ animation-range: entry 11% entry 98%; } .mini:nth-child(3n), .proy:nth-child(3n), .confia:nth-child(3n){ animation-range: entry 17% entry 100%; } /* los caminos entran uno detrás del otro */ .camino:nth-child(1){ animation-range: entry 2% entry 84%; } .camino:nth-child(2){ animation-range: entry 8% entry 92%; } .camino:nth-child(3){ animation-range: entry 14% entry 100%; } } @supports not (animation-timeline: view()) { .persona__figura picture, .aparece, .mini, .proy, .camino, .alt, .confia, .prueba__caso, .versiones{ opacity: 1; } } /* ========================================================================= MÓVIL No es la misma página achicada. En un teléfono la página se lee de arriba abajo y con el pulgar, así que: · CASOS DE ÉXITO deja de ser una tira de cuatro figuritas que hay que tocar y pasa a ser cuatro tarjetas de casi una pantalla cada una, que se encienden solas al pasar por el medio del viewport. La data se ve scrolleando, sin un solo click. · Todo lo demás se compacta: las grillas de una columna eran kilómetros de scroll, y van a dos. Los títulos y las bajadas bajan de tamaño, y los textos de las tarjetas quedan a ras del borde de la imagen — antes tenían 3–4px de sangría y se veían corridos. ========================================================================= */ @media (max-width: 860px){ /* ── 2 · CASOS DE ÉXITO ───────────────────────────────────────────────── */ .elenco{ display: block; min-height: 0; padding-block: clamp(26px, 5vh, 48px) clamp(8px, 2vh, 22px); } .elenco__encabezado{ margin-bottom: clamp(12px, 2.6vh, 24px); gap: 9px; } /* en celular siempre hay uno activo: el encabezado no se apaga nunca */ .elenco:has(.persona:hover) .elenco__encabezado, .elenco:has(.persona:focus-within) .elenco__encabezado, .elenco:has(.persona[data-activa]) .elenco__encabezado{ opacity: 1; } .elenco__titulo{ font-size: clamp(29px, 8.8vw, 44px); max-width: 15ch; line-height: 1.02; } .escenario{ display: grid; grid-template-columns: 1fr; gap: clamp(16px, 3.5vh, 36px); max-width: none; min-height: 0; margin-inline: 0; isolation: auto; } .piso{ display: none; } /* no hay tira: no hay piso que compartir */ .persona__pie{ display: none; }/* el nombre lo dice el relato, más grande */ .elenco__cuerpo{ padding-bottom: 0; --baja: 0px; } /* La entrada ligada a view() es de la tira de escritorio. Acá cada tarjeta mide casi una pantalla: el tramo de entrada duraría medio scroll y la figura se vería a medio encender todo el tiempo. Acá la entrada ES el encendido al cruzar el medio. */ .persona__figura picture, .piso{ animation: none; opacity: 1; } .persona{ position: relative; display: block; padding-block: clamp(8px, 2vh, 22px); /* la alineación deja de depender de la columna y pasa a alternar: impares a la izquierda, pares a la derecha */ --ta: left; --ji: start; } .persona:nth-of-type(even){ --ta: right; --ji: end; } /* el número del caso, gigante y hueco, del lado contrario a la figura. Es lo que hace que scrollear se sienta como pasar capítulos. */ .persona::before{ content: attr(data-n); position: absolute; top: 0; z-index: 0; font-size: 32vw; font-weight: 830; letter-spacing: -.07em; line-height: .78; color: transparent; -webkit-text-stroke: 1.5px #FED5131f; transition: -webkit-text-stroke-color var(--t-medio); pointer-events: none; } .persona:nth-of-type(odd)::before { right: 0; } .persona:nth-of-type(even)::before{ left: 0; } .persona[data-activa]::before{ -webkit-text-stroke-color: #FED51352; } /* nada de apagar a los otros con opacidad: acá el que no está activo sigue en pantalla, apenas en blanco y negro, y se enciende al llegarle el turno */ .escenario:has(.persona[data-activa]) .persona:not([data-activa]){ opacity: 1; filter: none; } .escenario:has(.persona[data-activa]) .persona:not([data-activa]) .persona__figura{ scale: 1; translate: none; } .persona__figura{ position: relative; z-index: 1; width: 84%; transform-origin: 50% 100%; } .persona:nth-of-type(odd) .persona__figura{ margin-inline: 0 auto; } .persona:nth-of-type(even) .persona__figura{ margin-inline: auto 0; } .persona:is(:hover, :focus-within, [data-activa]) .persona__figura{ scale: 1.03; } .persona__figura picture{ width: 100%; } .persona__img{ width: 100%; max-width: 100%; /* recorte cerrado a cabeza y torso: de cuerpo entero, en un teléfono, la cara no se reconoce */ height: clamp(228px, 42svh, 400px); object-fit: cover; object-position: 50% 1%; filter: grayscale(1) contrast(1.05) brightness(.42); -webkit-mask-image: linear-gradient(#000 56%, #000b 80%, transparent 100%); mask-image: linear-gradient(#000 56%, #000b 80%, transparent 100%); } .persona[data-activa] .persona__img, .escenario:has(.persona[data-activa]) .persona:not([data-activa]) .persona__img{ filter: grayscale(1) contrast(1.05) brightness(.42); } /* misma decisión que en escritorio: el caso encendido es la foto, sin tocarle el color. El brightness(1.05) recortaba a blanco todo lo que pasara de 240, que en el buzo amarillo de Oscu es la cuarta parte de la prenda. */ .persona[data-activa] .persona__img{ filter: none; } /* --- el relato deja de flotar y pasa a montar el pie de la figura ------- */ .relato, .persona:is(:hover, :focus-within, [data-activa]) .relato{ position: relative; left: auto; bottom: auto; z-index: 2; width: auto; translate: none; opacity: 1; pointer-events: auto; margin-top: clamp(-140px, -19svh, -84px); padding: clamp(62px, 11svh, 104px) 0 0; gap: clamp(10px, 1.6vh, 16px); } /* el velo llega hasta los bordes de la pantalla, no del texto */ .relato::before{ inset: 0 calc(var(--gutter) * -1); background: linear-gradient(180deg, #0A0A0A00 0%, #0A0A0A99 26%, #0A0A0Aed 50%, #0A0A0A 74%); } /* el escalonado de entrada es de escritorio: acá todo ya está a la vista */ .relato > *{ opacity: 1; translate: none; filter: none; transition-delay: 0s; } .relato__link{ transition: background var(--t-rapido), scale var(--t-rapido); } .salto__flecha{ scale: 1 1; } /* los que todavía no llegaron al medio de la pantalla se leen apagados: marca cuál es el que está contando su historia ahora */ .persona:not([data-activa]) .relato{ opacity: .34; } .relato{ transition: opacity var(--t-medio); } .relato__nombre{ font-size: clamp(31px, 9.6vw, 48px); } .relato__rubro{ font-size: 10.5px; letter-spacing: .18em; } .relato__texto{ font-size: clamp(15px, 4.3vw, 18px); max-width: 32ch; } .cifras{ gap: 14px 22px; } .cifra__sep{ display: none; } .cifra__k{ font-size: 10px; } .cifra__v b, .salto__despues{ font-size: clamp(36px, 12vw, 56px); } .cifra--menor .cifra__v b{ font-size: clamp(22px, 6.8vw, 32px); } .cifra--xl .cifra__v b{ font-size: clamp(46px, 15.5vw, 74px); } .cifra--texto .cifra__v b{ font-size: clamp(15px, 4.6vw, 19px); } .salto__antes{ font-size: clamp(25px, 8vw, 36px); } .salto__flecha{ width: clamp(20px, 6vw, 30px); font-size: clamp(36px, 12vw, 56px); } .relato__link{ padding: 13px 22px; font-size: 12.5px; } /* --- el rastro: el marcador flotante --------------------------------- */ .rastro{ display: flex; align-items: center; gap: 10px; position: fixed; z-index: 40; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); translate: -50% 14px; padding: 8px 15px; border-radius: var(--r-pill); background: #12110Eeb; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px #FED51338, 0 16px 36px -18px #000; opacity: 0; pointer-events: none; transition: opacity var(--t-rapido), translate var(--t-rapido); } .rastro[data-visible]{ opacity: 1; translate: -50% 0; } .rastro__i{ font-size: 11px; font-weight: 830; letter-spacing: .03em; color: var(--oro); font-variant-numeric: tabular-nums; } .rastro__pista{ display: flex; align-items: center; gap: 5px; } .rastro__pista i{ display: block; width: 11px; height: 3px; border-radius: var(--r-pill); background: #ffffff30; transition: width var(--t-rapido), background var(--t-rapido); } .rastro__pista i[data-activa]{ width: 26px; background: var(--oro); } .rastro__quien{ font-size: 11.5px; font-weight: 700; letter-spacing: -.015em; color: var(--hueso); white-space: nowrap; } /* ── el resto de la página: menos aire, más densidad ─────────────────── */ .bloque{ padding-block: clamp(44px, 7.5vh, 72px); } .bloque__encabezado{ margin-bottom: clamp(20px, 3.4vh, 32px); gap: 12px; } .pastilla{ padding: 7px 15px 7px 13px; font-size: 10.5px; } .titulo-seccion{ font-size: clamp(28px, 8.6vw, 44px); } .titulo-seccion--chico{ font-size: clamp(24px, 7.2vw, 36px); } .bajada-seccion{ font-size: 14.5px; max-width: 40ch; } /* De una columna a dos. Nueve miniaturas apiladas a pantalla completa eran tres pantallas de scroll para decir lo mismo. */ .mosaico, .mosaico--podcast, .proyectos{ grid-template-columns: repeat(2, 1fr); gap: 16px 11px; } .mini, .proy{ gap: 8px; } /* a ras del borde de la imagen: la sangría de 3–4px los dejaba corridos */ .mini__texto{ padding-inline: 0; gap: 4px; } .mini__titulo{ font-size: 12.5px; line-height: 1.3; } .mini__quien{ font-size: 10px; } .mini__vistas{ font-size: 14px; padding: 6px 10px 5px 9px; } .mini__vistas small{ font-size: 8.5px; } .proy__titulo, .proy__con{ padding-inline: 0; } .proy__titulo{ font-size: 12.5px; line-height: 1.3; } .proy__con{ font-size: 10px; } .proy__vistas{ font-size: 14px; padding: 6px 11px 5px 9px; } /* La prueba en celular. Las capturas pasan al recorte -cel —sólo el bloque del número, los están en el HTML— y se estiran al ancho de la columna: tiras de 4,5:1 en vez de tarjetas de 2,2:1. Antes: dos capturas de 280px metidas en una tarjeta, 393px por caso y la sección entera pasando de una pantalla y media. Y más de la mitad de cada captura era la cabecera de YouTube Studio, que no prueba nada. La tarjeta además pierde fondo, borde y relleno: alrededor de dos tiras tan bajas, el marco era casi todo el alto del caso. Lo que separa un caso del otro ahora es el aire y la línea del nombre, que alcanza. Al ancho completo el número termina MÁS grande que antes, no más chico: es lo único que había que dejar obvio. */ .prueba{ gap: 24px; } .prueba__caso{ grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: stretch; gap: 8px; padding: 0; background: none; box-shadow: none; } /* La flecha sale del flujo y se monta sobre la junta de las dos capturas: en fila propia costaba 40px de los 230 del caso, y acá no cuesta ninguno. Va corrida a la derecha porque ese tercio de la captura es negro vacío; en el medio se sentaría justo encima del número, que es lo único que importa. */ .prueba__captura:first-of-type{ grid-area: 1 / 1; } .prueba__captura:last-of-type { grid-area: 2 / 1; } .prueba__quien{ grid-area: 3 / 1; } .prueba__captura{ width: 100%; box-shadow: none; } .prueba__flecha{ grid-area: 1 / 1 / 3 / 2; rotate: 90deg; width: 26px; align-self: center; justify-self: end; margin-right: 14px; z-index: 2; box-shadow: 0 0 0 5px #0A0A0A, 0 0 18px #FED51352; } /* el nombre deja de ir centrado: alineado a la izquierda cae en la misma vertical que el nombre del canal adentro de la captura */ .prueba__quien{ justify-content: flex-start; gap: 3px 12px; margin-top: 4px; } .prueba__pie{ font-size: 12.5px; margin-top: 12px; } /* sin las tarjetas, la seccion pesa menos y no necesita tanto aire alrededor */ #prueba{ padding-block: clamp(34px, 5.4vh, 54px); } .versiones__par{ grid-template-columns: 1fr; } .versiones__par .prueba__flecha{ rotate: 90deg; justify-self: center; } /* los tres caminos: el número deja de robar una columna y va arriba, así el título entra entero y el CTA no queda estrangulado contra el borde */ .camino{ grid-template-columns: 1fr; gap: 12px; padding: 24px 22px 22px; } .camino__n{ font-size: 26px; line-height: 1; } .camino__t{ font-size: clamp(22px, 6.6vw, 30px); } .camino__d{ font-size: 14.5px; } .camino__cta{ justify-self: start; padding: 12px 20px; font-size: 13px; } .cierre{ padding-block: clamp(52px, 9vh, 84px); } .cierre__caja{ padding: 34px 22px 38px; gap: 16px; } .cierre__t{ font-size: clamp(30px, 9vw, 46px); max-width: 14ch; } .alt{ padding: 22px 20px 24px; gap: 11px; } .alt__t{ font-size: 22px; } .alt__d{ font-size: 14.5px; } .boton{ padding: 15px 26px; font-size: 15px; } .alt__cta{ justify-self: stretch; justify-content: center; padding: 14px 20px; font-size: 14.5px; } .marcas{ padding-top: clamp(24px, 3.4vh, 36px); gap: 16px; } .marca{ width: clamp(120px, 34vw, 160px); } .pie{ padding-block: 26px; gap: 10px 18px; font-size: 12.5px; } } /* En un teléfono el auto-fit de clientes cae a una sola columna: catorce retratos a pantalla completa, uno abajo del otro. Y en dos columnas eran 1.900px de scroll para una grilla de caras. Se le fijan tres a mano —es la medida de una grilla de perfil— y la sección pasa a la mitad. */ @media (max-width: 860px){ .confian{ grid-template-columns: repeat(3, 1fr); gap: 14px 9px; } .confia{ gap: 7px; } .confia__nombre{ font-size: 11px; letter-spacing: -.02em; } .confia__play{ width: 26px; height: 26px; } .confia__play::after{ border-left-width: 8px; border-block-width: 5px; } } /* abajo de 360px tres columnas dejan retratos de 95px: mejor dos */ @media (max-width: 360px){ .confian{ grid-template-columns: repeat(2, 1fr); gap: 12px; } .confia__nombre{ font-size: 12px; } } /* "Especializada en distribución en YouTube" mide 358px en su tamaño mínimo: abajo de ~460px de ancho ya no entra en un renglón y el nowrap la dejaba cortada contra el borde (el body tiene overflow-x: hidden, así que no se veía una barra: se veía "...en YouT"). Acá se la deja partir en dos líneas equilibradas; de 460px para arriba sigue yendo de corrido. */ @media (max-width: 460px){ .hero__foco{ white-space: normal; text-wrap: balance; } .hero{ padding-block: clamp(36px, 6vh, 64px); } } /* ========================================================================= LA BARRA FIJA DE CELULAR El problema que resuelve: hasta acá la página tenía un solo botón y estaba al final de todo, a ocho secciones del principio. En un teléfono eso es un scroll largo antes de que aparezca la primera forma de comprar algo. Aparece cuando el hero sale de pantalla y se esconde al llegar al cierre, donde están los mismos dos botones más grandes y con su explicación al lado: dejarla puesta ahí sería repetirse y taparlos. Sólo con puntero grueso y pantalla angosta. En escritorio no existe: ahí el hero ya trae las dos acciones y no hay que tapar nada. ========================================================================= */ .barra{ display: none; } @media (max-width: 860px){ .barra{ display: flex; gap: 10px; position: fixed; z-index: 30; inset: auto 0 0 0; padding: 10px var(--gutter); padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: #0A0A0AE8; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -1px 0 #ffffff1a; /* guardada abajo hasta que el JS la pide. translate y no display: así entra y sale deslizándose y no de golpe */ translate: 0 110%; transition: translate var(--t-medio); } .barra[data-visible]{ translate: 0 0; } .barra__b{ flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 14px 10px; border-radius: var(--r-pill); font-size: 15px; font-weight: 740; letter-spacing: -.015em; text-decoration: none; white-space: nowrap; background: #ffffff12; color: var(--hueso); box-shadow: inset 0 0 0 1px #ffffff2b; } /* la guía es la que se puede comprar sola, sin que nadie conteste del otro lado: es la que se lleva el dorado */ .barra__b--guia{ background: var(--oro); color: #0A0A0A; box-shadow: none; } } /* ========================================================================= Accesibilidad ========================================================================= */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .persona__figura picture, .aparece, .piso, .mini, .proy, .camino, .alt, .confia, .prueba__caso, .versiones{ opacity: 1; translate: none; filter: none; scale: none; } .grilla, .fondo, .grilla::after, .fondo::after{ animation: none; } }