/* ============================================================================ Umbra Tech ---------------------------------------------------------------------------- El suelo es claro y no oscuro, y la decision no salio de la categoria sino de la escena de uso: esto lo lee un directivo en su oficina, de dia, en un portatil, comparando consultoras. La categoria entera es negra con dos neones; ir a la luz es lo que separa esta pagina de las otras veinte que esa persona abrio hoy. El cyan y el violeta son la marca y se quedan tal cual (#00f2ff y #7000ff, los mismos hex que declara el sitio actual). Lo que cambia es donde viven: dejan de ser un degradado sobre texto y pasan a ser la LUZ de la pagina, mas la accion y el foco. Un degradado sobre un titular esta prohibido por la guia de craft y ademas se lee generico; el mismo par, convertido en atmosfera sobre piedra, no se parece a nada del rubro. ========================================================================== */ /* EL 400 ES EL CUERPO. Faltaba: la fuente estaba cargada solo en 500, 600 y 700, o sea tres pesos de interfaz y titular y ninguno de parrafo. Con el cuerpo en 500, un texto largo pesaba lo mismo que una etiqueta y la jerarquia se aplanaba. Son 26 KB los dos cortes. */ @font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap; src:url('assets/fonts/archivo-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap; src:url('assets/fonts/archivo-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap; src:url('assets/fonts/archivo-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap; src:url('assets/fonts/archivo-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap; src:url('assets/fonts/archivo-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap; src:url('assets/fonts/archivo-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap; src:url('assets/fonts/archivo-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap; src:url('assets/fonts/archivo-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} :root{ /* --- suelo y tinta ------------------------------------------------------ */ --piedra:#E3E2E7; /* el suelo. gris frio con un resto de violeta, no crema */ --luz:#F1F0F4; /* un escalon mas claro, para lo que se eleva */ --sombra:#C9C7D1; /* la penumbra y los filetes */ --tinta:#15151A; /* el texto. casi negro, nunca #000 */ --tinta-2:#34343C; /* el cuerpo largo. un escalon mas suave que el titular */ --humo:#63626B; /* secundario. un solo gris, no una escala de siete */ --tenue:#8B887F; /* el placeholder, lo unico por debajo del secundario */ /* --- la marca, sin tocar ------------------------------------------------ */ --cyan:#00F2FF; --violeta:#7000FF; /* El violeta de marca sobre piedra no llega y no llega al minimo de texto. Este es el mismo tono, bajado en luminosidad hasta pasar el 4.5:1. El de marca se sigue usando entero donde es superficie y no letra. */ --violeta-hondo:#4A0BA6; --error:#B3261E; /* 5,9:1 sobre piedra. Es un rojo de texto, no de superficie */ /* EL ACENTO CUANDO ES LETRA, que no es el mismo que cuando es superficie. Sobre suelo claro el violeta de marca da 5,20:1 y sirve; sobre suelo oscuro da 2,87:1 y no. Este token es el que se da vuelta en el modo oscuro, y `--violeta` se queda para lo que es superficie (el boton), que ahi manda el color de la marca y el contraste lo pone el texto blanco. */ --acento:var(--violeta); --acento-2:var(--violeta-hondo); /* --- las superficies que son oscuras EN LOS DOS MODOS ------------------- */ /* La banda, las tarjetas de caso y la vitrina no se dan vuelta: son negras tambien de noche. Lo que cambia ahi no es la tinta sino que en modo oscuro necesitan un filete para despegarse del suelo, que tambien es oscuro. */ --noche:#07070A; --noche-2:#0B0B0E; --noche-tinta:#FFFFFF; --noche-humo:#FFFFFF; /* El acento SOBRE superficie negra. Faltaba: habia tres violetas escritos a mano (#B48CFF, #C4A0FF) porque la familia `--noche-*` no tenia su rol de acento, y un valor crudo es un lugar al que el sistema no llega. No es el mismo violeta que el de suelo claro: sobre negro, el de marca da 2,87:1. */ --noche-acento:#B48CFF; --noche-filete:transparent; /* La pastilla de los iconos: oscura con el glifo cian. En modo oscuro no puede seguir siendo `--tinta`, que ahi es casi blanco y dejaria el cian en 1,4:1. */ --chip:#15151A; --chip-filete:transparent; --radio:2px; /* casi nada. el radio no es el gesto de esta pagina */ --ease:cubic-bezier(.22,1,.36,1); --display:'Archivo',ui-sans-serif,system-ui,sans-serif; } *,*::before,*::after{box-sizing:border-box} /* El scroll del nav es suave y lo hace el navegador, igual que en los otros dos sitios: `scroll-behavior` en el html y nada de JavaScript. Se apaga solo con menos movimiento pedido, mas abajo. `scroll-padding-top` es lo que hace que el titulo de la seccion no quede debajo de la barra pegada. Va aca ademas del `scroll-margin-top` de cada `[id]`: el margen resuelve el salto a un ancla, el padding resuelve tambien el `scrollIntoView` y el foco de teclado. */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px} body{ /* `100vw` cuenta la barra de scroll y `clientWidth` no, asi que en un sistema con barra clasica (Windows) la salida del marco se pasa por esos 15px. `clip` recorta ese sobrante y, a diferencia de `hidden`, NO declara un contenedor de scroll: la barra pegada arriba sigue funcionando. */ overflow-x:clip; margin:0;background:var(--piedra);color:var(--tinta); /* EL CUERPO ES SANS, Y ESO SE MIDIO. Iba en Source Serif 4 y la queja fue que su web se leia mejor. Su web usa Inter, una sans, para todo. Al mismo font-size de 15px, la minuscula de Archivo mide 53 de altura de x contra 45 de la serif: un 18% mas grande sin cambiar un solo pixel del tamano declarado, y el trazo un 20% mas grueso. Sobre fondo oscuro eso pesa doble, porque los trazos finos se comen contra el negro. `--serif` sigue declarada y la fuente sigue cargando: revertir esto es cambiar esta linea. */ font-family:var(--display);font-weight:400;font-size:1.0625rem;line-height:1.62; font-variant-numeric:oldstyle-nums; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } /* Las superficies que no dibuje yo tambien son la pagina. Seleccion, cursor, barra de scroll, anillo de foco y subrayado vienen con un default que no es de ningun sistema de diseno: se pintan con la paleta. */ ::selection{background:var(--cyan);color:var(--tinta)} :root{accent-color:var(--violeta);caret-color:var(--violeta);scrollbar-color:var(--sombra) var(--piedra)} :focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:1px} a{color:inherit;text-decoration-color:var(--sombra);text-underline-offset:.22em;text-decoration-thickness:1px} a:hover{text-decoration-color:var(--acento)} img{max-width:100%;display:block} h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1.03;margin:0; text-wrap:balance} /* `pretty` mira las ultimas cuatro lineas y evita que un parrafo termine en una palabra sola. Cuesta cero y se nota en cada bajada del sitio. El `balance` de los titulares ya estaba; esto es su equivalente para el cuerpo. */ p{margin:0;text-wrap:pretty} /* TODO LO DE LOS COSTADOS VA EN PROPIEDADES LOGICAS, no fisicas: `margin-inline-start` y no `margin-left`. Hoy no cambia nada, porque los dos idiomas del sitio se leen de izquierda a derecha. Cambia el dia que aparezca uno que no, y ese dia son cinco reglas escondidas en 1400 lineas en vez de cero. Cuesta lo mismo escribirlo bien ahora. LA GOTERA DE LOS COSTADOS VIVE ACA Y NADIE LA PUEDE PISAR. Cinco secciones (.hero .tira .sec .cierre .legal) declaraban su padding vertical con el atajo `padding: X 0`, y ese `0` de los costados le ganaba a estos 24px por venir despues en el archivo. Resultado: en cualquier pantalla de menos de 1240px el texto tocaba los dos bordes, en las cuatro paginas. Arriba de 1240 no se veia, porque ahi el margen lo da el `max-width`. Si una seccion necesita padding vertical, va `padding-block`, NUNCA el atajo. LOS DOS NUMEROS SON VARIABLES A PROPOSITO. El hero necesita saber cuanto mide la gotera para poder salirse del marco hasta el borde de la pantalla, y con los numeros escritos a mano en los dos lugares ya se desincronizaron una vez: la imagen quedaba 32px corta, que es justo la diferencia entre los 24 que yo habia asumido y los 56 de verdad. */ :root{--marco:1240px;--gotera:24px;--barra:72px} @media(min-width:900px){:root{--gotera:56px}} @media(min-width:960px){:root{--barra:76px}} .marco{width:100%;max-width:var(--marco);margin:0 auto;padding-inline:var(--gotera)} /* ---------------------------------------------------------------- la umbra El unico momento animado de la pagina. Es el par de marca convertido en luz: una penumbra enorme que cae desde arriba a la derecha y se corre muy despacio. Va en position fixed y detras de todo, asi que ninguna seccion la recorta. */ .umbra{position:fixed;inset:-10% -10% auto -10%;height:150vh;z-index:0;pointer-events:none; background: radial-gradient(58% 46% at 88% 2%, rgba(112,0,255,.20), transparent 68%), radial-gradient(44% 34% at 100% 16%, rgba(0,242,255,.16), transparent 66%), radial-gradient(70% 52% at 78% -8%, rgba(20,22,25,.16), transparent 70%); translate:var(--px,0) var(--py,0); animation:umbra-cae 34s var(--ease) infinite alternate} /* `translate` y `transform` son propiedades distintas: el puntero mueve la primera y la deriva lenta la segunda, asi que no se pisan y no hace falta componer una matriz a mano en JavaScript. */ @keyframes umbra-cae{to{transform:translate3d(-3.5vw,2.5vw,0) scale(1.07)}} /* El grano que ya usaba el sitio, conservado: es lo unico de su CSS que valia la pena y evita que la piedra se vea a plano digital. */ .grano{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.075; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} main,header,footer{position:relative;z-index:1} /* ------------------------------------------------------------------ la barra */ /* La barra mide siempre lo mismo, y eso no es un detalle: si la altura la decidiera el contenido, pegarse arriba correria toda la pagina un par de pixeles. Se fija aca y adentro se centra todo. */ /* EN ESCRITORIO ES UNA BARRA. EN TELEFONO ES UNA PANTALLA ENTERA. Son los MISMOS nodos: no hay un nav para escritorio y otro para telefono. Antes si los habia, con los mismos seis links duplicados en el DOM: seis links que se podian desincronizar y que un lector de pantalla oia dos veces. Con dos hijos (la marca y este grupo) `space-between` reparte el aire en un solo hueco. Con cinco lo repartia en cuatro iguales, y el conmutador de idioma terminaba a media pantalla del boton de tema. */ .barra{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2.4vw,32px); height:var(--barra)} .barra-der{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);min-width:0} .barra-ctrl{display:flex;align-items:center;gap:clamp(10px,1.4vw,14px);flex:none} .barra-marca{display:flex;align-items:center;flex:none;min-height:44px} .barra-marca img{height:27px;width:auto;display:block} @media(min-width:640px){.barra-marca img{height:29px}} .barra-nav{display:flex;align-items:center;gap:clamp(18px,2vw,30px); margin-inline-end:clamp(6px,1.2vw,16px); font-family:var(--display);font-size:.9375rem;font-weight:500} /* EL SUBRAYADO NO ES CIAN, Y ESA FUE LA CORRECCION. El hover pintaba un filete #00F2FF sobre el suelo piedra: 1,4:1 de contraste, o sea invisible. El cian de esta marca solo funciona sobre negro. Sobre claro manda el violeta. Crece desde la izquierda con `scaleX`, que la GPU compone sola: animar el ancho obligaria a recalcular el layout de la barra en cada cuadro. */ .barra-nav a{position:relative;display:flex;align-items:center; color:var(--humo);text-decoration:none;padding:8px 0;line-height:1; transition:color .18s var(--sale)} /* El area de toque se estira a 44 de alto con un pseudo transparente, no con padding: con padding, el subrayado (que se cuelga de `bottom:0`) se despegaria del texto y quedaria flotando a trece pixeles de la palabra. */ .barra-nav a::before{content:'';position:absolute;left:-6px;right:-6px; top:50%;height:44px;transform:translateY(-50%)} .barra-nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px; background:var(--acento);transform:scaleX(0);transform-origin:left center; transition:transform .18s var(--sale)} .barra-nav a[data-aqui],.barra-nav a[aria-current]{color:var(--tinta)} .barra-nav a[data-aqui]::after,.barra-nav a[aria-current]::after{transform:scaleX(1)} @media (hover:hover) and (pointer:fine){ .barra-nav a:hover{color:var(--tinta)} .barra-nav a:hover::after{transform:scaleX(1)} } .barra-nav a:focus-visible{color:var(--tinta)} .barra-nav a:focus-visible::after{transform:scaleX(1)} /* Contacto es el unico boton de la barra: en un sitio de servicios, la barra tiene una sola cosa que hacer. */ .barra-nav a.es-contacto{color:var(--luz);background:var(--tinta);font-weight:600; min-height:44px;padding:0 20px;border-radius:var(--radio); transition:background .18s var(--sale),color .18s var(--sale)} .barra-nav a.es-contacto::before,.barra-nav a.es-contacto::after{display:none} @media (hover:hover) and (pointer:fine){ .barra-nav a.es-contacto:hover{background:var(--violeta-hondo);color:#fff} } .barra-nav a.es-contacto[aria-current]{background:var(--violeta-hondo);color:#fff} /* El conmutador de idioma. Muestra a donde vas, no donde estas, igual que el boton de tema: los dos contestan "que pasa si aprieto". Es un con un href real, asi que anda sin JavaScript y el buscador lo sigue. */ .idioma{display:grid;place-items:center;min-width:44px;height:44px;flex:none;padding:0 10px; border:1px solid var(--sombra);border-radius:var(--radio);text-decoration:none; font-family:var(--display);font-size:.875rem;font-weight:600;letter-spacing:.06em; color:var(--tinta);} .tema{display:grid;place-items:center;width:44px;height:44px;flex:none; border:1px solid var(--sombra);background:none;cursor:pointer;color:var(--tinta); border-radius:var(--radio);} @media (hover:hover) and (pointer:fine){ .idioma:hover,.tema:hover{background:var(--luz);border-color:var(--humo)} } .tema .ico{width:19px;height:19px} /* Se ve el sol o la luna, nunca los dos. Con el atributo `hidden` y no con una clase: el estado vive en el DOM, que es donde un lector de pantalla lo lee. */ /* Los dos iconos viven en el DOM y se cruzan, no se cambian de golpe. El que entra viene de `scale(.25)` con desenfoque, que es como el ojo lee que una cosa aparecio y no que otra cambio de forma. `[hidden]` sigue existiendo porque es el estado que lee un lector de pantalla; lo que se le saca es el `display:none` que impedia animarlo. */ .tema{position:relative} .tema .ico{grid-area:1/1;transition:opacity .22s cubic-bezier(.2,0,0,1), scale .22s cubic-bezier(.2,0,0,1),filter .22s cubic-bezier(.2,0,0,1)} .tema .ico[hidden]{display:block;opacity:0;scale:.25;filter:blur(4px);pointer-events:none} .barra-menu{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--sombra); background:none;cursor:pointer;color:var(--tinta);border-radius:var(--radio)} @media (hover:hover) and (pointer:fine){ .barra-menu:hover{background:var(--luz);border-color:var(--humo)} } .ico{width:1em;height:1em;fill:currentColor;flex:none} /* ------------------------------------------------ el panel de telefono Debajo de 960 el mismo bloque deja de ser una fila y pasa a ser la pantalla entera: los seis links en grande y, al pie, el idioma y el tema. Que esos dos vivan adentro y no en la barra es la diferencia entre una barra con tres botones apretados y una barra con una sola cosa que tocar. */ @media(max-width:959px){ .barra-menu{display:grid} .barra-der{position:fixed;inset:0;z-index:60;display:none; flex-direction:column;justify-content:center;gap:0; background:var(--piedra); padding:calc(var(--barra) + 24px) var(--gotera) calc(24px + env(safe-area-inset-bottom))} /* `display:flex` y no `visibility`: mientras esta cerrado no tiene que haber nada tabulable adentro, y `display:none` es lo unico que lo garantiza sin tocar cada hijo. */ /* El panel entra y sale de verdad. `display` no se puede transicionar, pero `transition-behavior:allow-discrete` mas `@starting-style` si permiten animar la entrada de algo que aparece de `display:none`. Sin eso, la unica alternativa era dejarlo siempre en el DOM con `visibility`, y entonces sus ocho controles quedan tabulables con el menu cerrado. La salida es mas corta que la entrada: cerrar es una respuesta, abrir es una decision. */ .barra-der{opacity:0;transform:translateY(-8px); transition:opacity .18s var(--sale),transform .18s var(--sale),display .18s allow-discrete} .barra-der[data-abierto]{display:flex;opacity:1;transform:none; transition-duration:.28s,.28s,.28s} @starting-style{ .barra-der[data-abierto]{opacity:0;transform:translateY(-8px)} } /* LA MARCA Y LA CRUZ QUEDAN ARRIBA DEL PANEL. El panel es `fixed` y tapaba la barra entera, asi que el boton para cerrarlo desaparecia debajo de lo que abria: quedaba Escape y tocar un link, y ninguna de las dos cosas se ve. `.cab` es un contexto de apilado propio (es `sticky` con z-index), asi que este 61 solo compite dentro de la barra. */ .barra-der[data-abierto] ~ .barra-marca, .barra-marca{position:relative;z-index:61} .barra-menu{position:relative;z-index:61} .barra-nav{flex-direction:column;align-items:stretch;gap:0;margin:0; font-size:clamp(1.5rem,7vw,2.25rem);font-weight:600;letter-spacing:-.03em; overflow-y:auto} .barra-nav a{padding:clamp(12px,2.4vh,20px) 0;color:var(--tinta); border-bottom:1px solid var(--sombra)} .barra-nav a::before,.barra-nav a::after{display:none} .barra-nav a.es-contacto{background:none;color:var(--acento); min-height:0;padding:clamp(12px,2.4vh,20px) 0;border-radius:0} .barra-nav a.es-contacto[aria-current]{background:none;color:var(--acento)} .barra-ctrl{margin-top:clamp(24px,4vh,44px);gap:12px} .idioma,.tema{height:52px;min-width:52px} .tema{width:52px} /* Con el panel abierto la pagina de atras no scrollea. */ html[data-menu-abierto],html[data-menu-abierto] body{overflow:hidden} } @media(min-width:960px){.barra-menu{display:none}} /* -------------------------------------------------------------------- hero */ /* EL HERO MIDE CONTRA EL ALTO DE LA PANTALLA, NO SOLO CONTRA EL ANCHO, y ese era el bug del portatil de 13 pulgadas. Todo estaba atado a `vw`: en un Mac de 1440x780 el hero daba 929px de alto y el boton principal caia 154px por debajo del pliegue. En uno de 1280x680, 226px. En un monitor grande no se notaba porque ahi sobra alto. La correccion es `min(vw, vh)` en el titular y `vh` en los aires: en una pantalla ancha y baja manda el alto, en una angosta y alta manda el ancho, y el que manda es siempre el que escasea. */ /* LA PORTADA MIDE UNA PANTALLA MENOS LA BARRA, Y EL +30 QUEDA EN EL BORDE. No se calcula ninguna altura a mano: el hero absorbe el sobrante con `flex:1` y la linea del +30 se apoya sola contra el pliegue, sea cual sea el alto de la ventana. Con alturas escritas a mano, cada pantalla distinta dejaria asomar una tira de logos o un hueco, y un sliver de diez pixeles se lee como error, no como suspenso. `svh` y no `vh`: en un telefono `vh` cuenta la barra del navegador que se esconde al scrollear, asi que con `vh` la portada mide siempre un poco mas que la pantalla y los logos asomarian. Es `min-height`: si el contenido no entra (una pantalla muy baja, letra mas grande), la portada crece en vez de recortar. Ahi se pierde el efecto, que es exactamente el orden de prioridades correcto. */ .portada{display:flex;flex-direction:column; min-height:calc(100vh - var(--barra));min-height:calc(100svh - var(--barra))} .hero{flex:1 1 auto;padding-block:clamp(36px,5.2vh,100px) clamp(28px,4vh,64px)} .hero h1{font-size:clamp(2.25rem,min(5.6vw,7.8vh),4.25rem);max-width:14ch} .hero-lede{margin-top:clamp(16px,2.2vh,32px);max-width:48ch; font-size:clamp(1.0625rem,min(1.5vw,2.2vh),1.3125rem); line-height:1.55;color:var(--tinta-2)} .hero-acc{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px; margin-top:clamp(22px,3vh,44px)} /* En una pantalla baja el hero no entraba y la portada crecia 34px, o sea que el +30 quedaba cortado por el pliegue. Eso es peor que ver los logos: un dato a medias se lee como error. Se aprieta el aire y se baja el tope de la foto hasta que entra. La consulta es por ALTO y no por ancho, que es la dimension que de verdad escasea aca. VA DESPUES DE LAS REGLAS QUE PISA, no antes. Una consulta de medios no suma especificidad, asi que puesta arriba le ganaba la regla normal de `.hero h1` por venir despues en el archivo y no encogia nada. Es el tercer tropiezo con esto en esta pagina. */ @media (max-height:760px) and (min-width:900px){ .hero{padding-block:clamp(20px,3vh,52px) clamp(16px,2.2vh,34px)} .hero-vis img{max-height:min(50vh,420px)} .tira-t{padding-bottom:clamp(16px,2.4vh,30px)} /* Los 34px que sobraban los ponia el titular, que a este ancho se va a cuatro renglones. Se le baja el termino de alto de 7,8vh a 6,4vh: encoge solo donde el alto escasea y no toca ninguna otra pantalla. */ .hero h1{font-size:clamp(2rem,min(5.2vw,6.4vh),3.5rem)} .hero-lede{margin-top:clamp(12px,1.6vh,22px)} .hero-acc{margin-top:clamp(16px,2.2vh,28px)} } /* El boton primario es violeta de marca entero, con blanco encima: 7.4:1. Es el unico lugar de la pagina donde el color de marca ocupa una superficie. */ .boton{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border:1px solid transparent; border-radius:var(--radio);background:var(--violeta);color:#fff; font-family:var(--display);font-size:1rem;font-weight:600;letter-spacing:-.01em;text-decoration:none; transition:background .3s var(--ease),transform .3s var(--ease)} .boton:hover{background:var(--violeta-hondo);transform:translateY(-1px)} .boton--lineal{background:none;color:var(--tinta);border-color:var(--sombra)} .boton--lineal:hover{background:none;border-color:var(--tinta)} /* --------------------------------------------------------- la tira de logos Los siete son lo mejor que tiene el sitio y hoy estan en una banda gris debajo del hero. Suben. Van repintados de tinta con su alfa original, y con un factor por logo: escalarlos todos a la misma altura no alcanza porque Galdana lleva un mundo encima del nombre y MiiN y Tiketblok llevan bajada. */ .tira{padding-block:clamp(24px,3vh,40px) clamp(40px,6vw,72px)} /* LA LINEA DEL +30 SE LEE, y antes no: la mascara que desvanece los logos en los bordes estaba puesta en `.tira`, o sea sobre la seccion entera, asi que se comia la primera palabra del titulo. Ahora la mascara vive en `.tira-cinta`, que es solo el carril de los logos. Y ademas pesa lo que tiene que pesar: treinta empresas es la prueba mas dura que tiene esta pagina y estaba escrita en gris a 15px, mas chica que el pie. */ /* Dos renglones y no uno: el numero grande metido en medio de una frase chica se lee como un error de maqueta. Arriba la frase, abajo el dato solo, y las dos centradas sobre el carril de logos, que tambien esta centrado. */ /* Ya no vive adentro de la tira: es el pie de la portada. El padding de abajo es lo unico que la separa del pliegue. VA `margin-block` Y NO `margin`. Con el atajo `margin:0` se mata el `margin:0 auto` que `.marco` necesita para centrarse, y la caja arranca pegada a la izquierda: el texto se centraba adentro de una caja corrida, con un desvio que crecia con la pantalla (20px a 1280, 100 a 1440, 340 a 1920). Es el mismo error del atajo de `padding` que ya paso en cinco secciones. */ .tira-t{margin-block:0;padding-bottom:clamp(22px,3.4vh,44px);font-size:1rem;color:var(--tinta-2); letter-spacing:.02em;text-align:center} .tira-t b{display:block;margin-top:6px;font-family:var(--display);font-weight:600; color:var(--tinta);font-variant-numeric:lining-nums;letter-spacing:-.03em;line-height:1; font-size:clamp(1.5rem,2.2vw,1.875rem)} .tira-logos{display:flex;flex-wrap:wrap;align-items:center;gap:22px 40px} .tira-logos img{height:calc(22px * var(--k,1));width:auto;opacity:.65; transition:opacity .35s var(--ease)} .tira-logos img:hover{opacity:1} @media(min-width:900px){.tira-logos{gap:26px 52px}.tira-logos img{height:calc(26px * var(--k,1))}} /* ---------------------------------------------------------------- secciones */ /* SIN FILETE ENTRE SECCIONES. Cada `.sec` dibujaba una linea arriba, asi que la que venia despues de una banda pintaba una raya justo debajo del video, y la banda ademas traia la suya: dos lineas en el mismo borde. Lo que separa una seccion de la siguiente son los 104px de aire de arriba mas los 104 de abajo. Con 208px de por medio, la raya no estaba separando nada que el espacio no separara ya. */ .sec{padding-block:clamp(56px,8vw,104px)} .sec h2{font-size:clamp(1.875rem,3.6vw,3rem);max-width:22ch} .sec-lede{margin-top:22px;max-width:64ch;font-size:clamp(1.0625rem,1.35vw,1.1875rem);color:var(--tinta-2)} .sec-cuerpo{margin-top:clamp(32px,4vw,56px)} /* Etiquetas de capacidad. No son pastillas de color: son texto con un filete. */ .tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding:0;list-style:none} .tags li{padding:8px 14px;border:1px solid var(--sombra);border-radius:var(--radio); font-family:var(--display);font-size:.9375rem;font-weight:500;color:var(--tinta-2);background:var(--luz)} /* Los dos servicios. Lista de definicion, no dos tarjetas iguales: la tarjeta es el contenedor perezoso y aca no aporta nada que no aporte el aire. */ .serv{border-top:1px solid var(--sombra)} .serv-item{display:grid;gap:14px 48px;padding:clamp(26px,3.4vw,40px) 0;border-bottom:1px solid var(--sombra)} @media(min-width:820px){.serv-item{grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:14px 56px;align-items:start}} .serv-item h3{font-size:clamp(1.375rem,2.1vw,1.75rem)} .serv-item p{color:var(--tinta-2);max-width:56ch} .serv-lista{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px} @media(min-width:620px){.serv-lista{grid-template-columns:1fr 1fr;gap:10px 32px}} .serv-lista li{position:relative;padding-inline-start:24px;font-size:1rem;color:var(--tinta-2)} .serv-lista li::before{content:'';position:absolute;left:0;top:.72em;width:13px;height:1px;background:var(--violeta);opacity:.5} /* Los tres pasos. El sitio los tiene con emoji adentro de un circulo; van con Phosphor y sin circulo. El numero de paso no se escribe: el orden ya lo dice la fila, y numerar por numerar esta en la lista de defaults. */ .pasos{display:grid;gap:26px;margin-top:clamp(36px,4.5vw,60px)} @media(min-width:760px){.pasos{grid-template-columns:repeat(3,1fr);gap:40px}} .paso{display:grid;gap:10px;align-content:start} .paso .ico{font-size:26px;color:var(--violeta-hondo)} .paso h3{font-family:var(--display);font-size:1.125rem;font-weight:600;letter-spacing:-.02em} .paso p{font-size:1rem;color:var(--tinta-2)} /* Los casos. Una tabla de verdad, no cuatro tarjetas: son cuatro filas del mismo tipo de dato y una tabla es lo que se lee de un vistazo. */ .tabla{width:100%;border-collapse:collapse;margin-top:clamp(28px,3.4vw,44px);font-size:1rem} .tabla th{font-family:var(--display);font-size:.875rem;font-weight:600;color:var(--humo);text-align:left; padding:0 24px 12px 0;border-bottom:1px solid var(--tinta);white-space:nowrap} .tabla td{padding:20px 24px 20px 0;border-bottom:1px solid var(--sombra);vertical-align:top;color:var(--tinta-2)} .tabla td:first-child{font-family:var(--display);font-weight:600;color:var(--tinta)} .tabla b{font-family:var(--display);font-weight:600;color:var(--violeta-hondo);font-variant-numeric:lining-nums} @media(max-width:719px){ /* En telefono la tabla deja de ser tabla: cada caso es un bloque con su etiqueta delante, que es lo unico legible en 360 de ancho. */ .tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .tabla tr{display:block;padding:20px 0;border-bottom:1px solid var(--sombra)} .tabla td{display:grid;grid-template-columns:9ch 1fr;gap:12px;padding:4px 0;border:0} .tabla td::before{content:attr(data-l);font-family:var(--display);font-size:.8125rem;font-weight:600; color:var(--humo);padding-top:.28em} .tabla td:first-child{font-size:1.0625rem} } /* Las tres cifras del sitio. NO van como el bloque de metrica gigante con etiqueta chica, que es una plantilla reconocible: van en linea, del tamano del cuerpo, y con la explicacion pegada, porque las tres son estimaciones y no mediciones. Ver la nota en PRODUCT.md. */ .cifras{display:grid;gap:0;margin-top:clamp(32px,4vw,52px);border-top:1px solid var(--sombra)} @media(min-width:820px){.cifras{grid-template-columns:repeat(3,1fr);gap:0 40px}} .cifra{padding:22px 0;border-bottom:1px solid var(--sombra)} @media(min-width:820px){.cifra{border-bottom:0}} .cifra b{font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.03em; color:var(--violeta-hondo);font-variant-numeric:lining-nums} .cifra h3{display:inline;font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.03em} .cifra p{margin-top:8px;font-size:1rem;color:var(--noche-humo);max-width:40ch} /* Rasgos y publicos: dos rejillas de tres, con icono y sin caja. */ .rejilla3{display:grid;gap:28px;margin-top:clamp(28px,3.4vw,44px)} @media(min-width:760px){.rejilla3{grid-template-columns:repeat(3,1fr);gap:44px}} .rasgo{display:grid;gap:9px;align-content:start;padding-top:20px;border-top:1px solid var(--sombra)} .rasgo .ico{font-size:22px;color:var(--violeta-hondo)} .rasgo h3{font-family:var(--display);font-size:1.0625rem;font-weight:600;letter-spacing:-.02em} .rasgo p{font-size:1rem;color:var(--tinta-2)} /* ------------------------------------------------------------- cierre y pie */ .cierre{padding-block:clamp(64px,9vw,120px)} .cierre h2{font-size:clamp(2rem,4.6vw,3.5rem);max-width:18ch} .pie{padding:36px 0 44px;border-top:1px solid var(--sombra);display:flex;flex-wrap:wrap; gap:14px 32px;align-items:center;justify-content:space-between;font-size:.9375rem;color:var(--humo)} /* Los dos links legales son los que exige la ley que esten y los que menos blanco de toque tenian: 23 pixeles de alto. Se estiran a 44 con el mismo pseudo transparente que el nav, asi el pie no crece ni un renglon. */ .pie-links{display:flex;flex-wrap:wrap;gap:8px 22px} .pie a{text-decoration:none} .pie-links a{position:relative;display:inline-flex;align-items:center;min-height:24px} .pie-links a::before{content:'';position:absolute;left:-6px;right:-6px; top:50%;height:44px;transform:translateY(-50%)} @media (hover:hover) and (pointer:fine){ .pie a:hover{text-decoration:underline} } .pie a:focus-visible{text-decoration:underline} /* ------------------------------------------------------------ el formulario */ /* ------------------------------------------------------- la pagina de contacto OCUPA LA PANTALLA MENOS LA BARRA, y esa resta es literal: la barra mide 76px pegada arriba, asi que el alto util es `100svh - 76px`. Va `svh` y no `vh` porque en un telefono `vh` cuenta la barra del navegador que se esconde al scrollear, y con `vh` la seccion queda siempre un poco mas alta que la pantalla real. Es `min-height`, nunca `height`: si el formulario crece (un error de validacion, un idioma mas largo, letra mas grande), la seccion tiene que poder crecer con el. Con `height` el contenido se cortaria. */ .ctc{display:grid;gap:clamp(30px,4vw,64px); padding-block:clamp(32px,4.4vh,72px) clamp(40px,5vh,80px); align-content:center;min-height:calc(100vh - 76px);min-height:calc(100svh - 76px)} @media(min-width:900px){ .ctc{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(40px,5vw,90px);align-items:center} } .ctc-txt h1{font-size:clamp(2rem,min(4.4vw,6.6vh),3.25rem);max-width:15ch} .ctc-txt .hero-lede{margin-top:clamp(14px,2vh,24px);max-width:46ch} .form{display:grid;gap:clamp(14px,2vh,20px);max-width:620px} /* En dos columnas el formulario ya no lleva margen de arriba: lo centra la grilla de `.ctc`. Apilado si, porque queda debajo del texto. */ .ctc .form{margin-top:0;max-width:none} @media(max-width:899px){.ctc .form{max-width:620px}} @media(min-width:620px){.form{grid-template-columns:1fr 1fr}.form .ancho{grid-column:1/-1}} .campo{display:grid;gap:7px} .campo label{font-family:var(--display);font-size:.875rem;font-weight:600;color:var(--humo)} .campo input,.campo textarea{width:100%;padding:13px 14px;border:1px solid var(--sombra);border-radius:var(--radio); background:var(--luz);color:var(--tinta);font-family:var(--display);font-weight:400;font-size:1rem; transition:border-color .3s var(--ease)} /* El textarea es lo primero que se recorta en una pantalla baja: es el unico campo cuyo alto es una decision y no una consecuencia. */ .campo textarea{min-height:clamp(96px,14vh,140px);resize:vertical} .campo input:hover,.campo textarea:hover{border-color:var(--humo)} .campo input:focus,.campo textarea:focus{border-color:var(--violeta);outline:none;box-shadow:0 0 0 3px rgba(112,0,255,.14)} .campo input::placeholder,.campo textarea::placeholder{color:var(--tenue)} /* EL ERROR SE MARCA CON `:user-invalid`, NO CON `:invalid`. La diferencia decide si el formulario es amable o insoportable: `:invalid` pinta de rojo los campos vacios desde que se abre la pagina, antes de que nadie escriba una letra. `:user-invalid` espera a que la persona haya tocado el campo o intentado enviar. El color no viaja solo: el borde cambia de grosor tambien, porque un estado que solo se distingue por el color no existe para quien no lo ve. */ .campo input:user-invalid,.campo textarea:user-invalid{ border-color:var(--error);box-shadow:0 0 0 1px var(--error)} .campo input:user-invalid:focus,.campo textarea:user-invalid:focus{ box-shadow:0 0 0 3px color-mix(in srgb,var(--error) 30%,transparent)} .consent:has(input:user-invalid){color:var(--error)} /* Toda la etiqueta es el blanco de toque, no solo la casilla, y por eso mide 44 de alto: en un telefono, apuntarle a un cuadrado de 18 pixeles al lado de un renglon de letra chica es el error mas facil de cometer del formulario. */ .consent{display:flex;gap:12px;align-items:flex-start;font-size:.9375rem;color:var(--tinta-2); min-height:44px;padding:8px 0;cursor:pointer} .consent input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--violeta-hondo); cursor:pointer} /* --------------------------------------------------------------- movimiento */ @media (prefers-reduced-motion: reduce){ /* Se va el desplazamiento, se queda el color. Menos movimiento no es ninguna respuesta: el boton tiene que seguir avisando que se apreto. */ .umbra{animation:none;translate:none} .boton:hover,.boton:active{transform:none} .par .sombra:hover img,.serv-item:hover .sombra--serv img{transform:none} [data-anim] [data-ve] img{transform:none;opacity:1} } /* ============================================================================ IMAGENES Y MOVIMIENTO ---------------------------------------------------------------------------- Las imagenes son las suyas, las mismas seis que ya servia el sitio, pasadas a webp al tamanio en que se ven: de 5,6 MB a 618 KB. No se descartaron porque sobre este suelo dejan de ser decoracion: son oscuras, y una imagen oscura sobre piedra es literalmente la umbra. La marca se llama sombra. Las curvas son las de la guia de Emil Kowalski y no las que trae el CSS, que son demasiado flojas. Nunca ease-in: arranca lento justo en el momento en que la persona esta mirando, y eso se siente como lentitud. ========================================================================== */ :root{ --sale:cubic-bezier(.23,1,.32,1); /* entra o sale. arranca rapido */ --mueve:cubic-bezier(.77,0,.175,1); /* se mueve o se transforma */ } /* ------------------------------------------------------------- los bloques */ .sombra{margin:0;position:relative;overflow:hidden;border-radius:var(--radio);background:#0b0b0e; box-shadow:0 24px 60px -32px rgba(21,21,26,.55), 0 2px 8px -4px rgba(21,21,26,.3)} .sombra img{width:100%;height:100%;object-fit:cover;display:block} /* Un velo del color de la pagina encima: sin el, seis imagenes de neon sobre piedra se leen como seis pegatinas de otra web. Con el, pertenecen. */ .sombra::after{content:'';position:absolute;inset:0; background:linear-gradient(150deg,rgba(112,0,255,.18),transparent 45%,rgba(0,242,255,.10)); mix-blend-mode:screen;pointer-events:none} .sombra figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px; background:linear-gradient(transparent,rgba(6,6,9,.85)); color:var(--noche-tinta);font-family:var(--display);font-size:.875rem;font-weight:500} /* ================================================== el hero, version desbordada Deja de ser el split 50/50 de todo el rubro. La imagen se sale de la grilla por la derecha hasta pisar el borde de la pantalla, y lo que queda afuera es justamente lo que dice que hay mas. Suelo claro: la barra no cambia. */ .hero{display:grid;gap:clamp(28px,4vw,52px);align-items:center} @media(min-width:900px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}} /* El figure mide lo que mide la foto y se queda adentro del marco. Llego a salirse hasta el borde de la pantalla con un margen negativo y se saco: el sitio entero se lee contra la misma columna de 1240, y una sola pieza rompiendola no se leia como una decision sino como un descuido. */ .hero-vis{position:relative;margin:0;width:100%} .hero-vis img{width:100%;height:auto;display:block;border-radius:4px; box-shadow:0 40px 90px -50px rgba(21,21,26,.7)} @media(min-width:900px){ /* LA FOTO SE QUEDA ADENTRO DEL MARCO. Llego a salirse hasta el borde de la pantalla con un margen negativo, y se saco: el sitio entero se lee contra la misma columna de 1240, y una sola pieza rompiendola no se leia como una decision sino como un descuido. La asimetria la sigue dando el reparto desparejo de las dos columnas, no el desborde. La foto es cuadrada: sin tope de alto, a 500 de ancho mide 500 de alto y empuja el hero fuera del pliegue de un portatil. Se recorta a retrato contra el alto de la pantalla. */ .hero-vis img{max-height:min(60vh,540px); object-fit:cover;object-position:center 45%} } @media(max-width:899px){ .hero-vis img{max-height:min(46vh,420px);object-fit:cover;object-position:center 45%} } /* El sello con los veinte anios cae sobre el borde de la imagen. Es el dato que sostiene toda la venta y hasta ahora vivia enterrado nueve secciones abajo. */ .sombra--serv{margin-top:18px;aspect-ratio:16/10} @media(min-width:820px){.sombra--serv{aspect-ratio:5/4}} .par{display:grid;gap:18px;margin-top:clamp(28px,3.4vw,44px)} @media(min-width:720px){.par{grid-template-columns:1fr 1fr;gap:24px}} .par .sombra{aspect-ratio:16/10} /* ----------------------------------------------------------------- la banda Tres capas positivas y explicitas: video, velo, texto. Nada de z-index negativos debajo del fondo del propio contenedor. */ /* LA BANDA ES BAJA A PROPOSITO, Y ESO ES LO QUE LA HACE VERSE NITIDA. Medido sobre la captura de cinco tratamientos del mismo video, normalizada a 1000px de ancho: a 572px de alto la banda daba 29,96 de nitidez y a 428px da 34,52, un 15% mas. No es un filtro ni un bitrate: a 572px el video se estira para llenar la banda y a 428px se sirve mas chico que su tamano real, que es la unica forma de ganar nitidez que no cuesta bytes. `clip` y no `hidden`: recorta igual pero no declara un contenedor de scroll, que congelaria cualquier animacion atada al scroll que caiga adentro. */ .banda{position:relative;isolation:isolate;padding:clamp(64px,8vw,116px) 0;overflow:clip; background:var(--noche);color:var(--noche-tinta)} .banda-cine{position:absolute;inset:0;z-index:0} /* SIN DESENFOQUE, Y ESO SE PROBO. Un blur de 3px daba 34,87 de nitidez contra los 34,52 sin nada: 0,35 de diferencia es ruido de medicion. Un efecto que no se puede medir es un efecto que sobra, asi que el video va limpio y solo se le levanta el color, que si se ve. Ver banners.html para los cinco tratamientos comparados. */ .banda-fondo{width:100%;height:100%;object-fit:cover;display:block; filter:saturate(1.18) contrast(1.04)} /* EL VELO NUNCA SE ABRE, y esa es la decision de fondo. Antes iba de 0,95 a 0,10: en ese 0,10 el video quedaba expuesto y era justo donde se veia lo que Kling le saco. Ahora va de 0,93 a 0,72, que es la proporcion del cierre de Dmeter. El video no se mira, se siente, y su nitidez deja de ser un dato que el ojo pueda juzgar. Los 96 grados en vez de 90 son de ahi tambien: la diagonal minima sigue la direccion de la cinta de luz en vez de cortarla en angulo recto. */ .banda-velo{position:absolute;inset:0; background:linear-gradient(180deg,rgba(7,7,10,.93),rgba(7,7,10,.86))} @media(min-width:960px){.banda-velo{ background:linear-gradient(96deg,rgba(7,7,10,.93) 18%,rgba(7,7,10,.8) 52%,rgba(7,7,10,.72) 100%)}} /* El grano se queda aunque el desenfoque se haya ido, y por otro motivo: el velo nuevo es un degradado grande y parejo sobre un fondo oscuro, que es exactamente donde el banding de 8 bits se ve. El grano lo rompe. */ .banda-velo::after{content:'';position:absolute;inset:0;opacity:.11;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .banda-txt{position:relative;z-index:1} .banda h2{font-size:clamp(2rem,4.4vw,3.5rem);max-width:19ch;color:var(--noche-tinta)} .banda p{margin-top:20px;max-width:50ch;color:var(--noche-tinta);font-size:clamp(1.0625rem,1.4vw,1.1875rem)} .banda--cifras{padding:clamp(56px,7vw,96px) 0;background:var(--noche)} .banda--cifras .cifras{border-top-color:rgba(241,240,244,.16);margin-top:0} .banda--cifras .cifra{border-bottom-color:rgba(241,240,244,.16)} .banda--cifras .cifra b{color:var(--noche-acento)} .banda--cifras .cifra h3{color:var(--noche-tinta)} .banda--cifras .cifra p{color:var(--noche-humo)} .cifras-pie{margin-top:26px;font-size:.9375rem;color:var(--noche-humo)} .sub{margin-top:clamp(44px,5vw,72px);font-family:var(--display);font-size:1.25rem;font-weight:600;letter-spacing:-.02em} /* Los casos ganan su nombre, que es como los llama el sitio original. */ .caso-n{display:block;font-family:var(--display);font-weight:600;color:var(--tinta)} .caso-c{display:block;margin-top:3px;font-family:var(--display);font-size:.9375rem;font-weight:400;color:var(--tinta-2)} /* ------------------------------------------------------------- el carrusel Movimiento constante: lineal, por definicion. Se para al pasar por encima, porque si alguien mira un logo es que lo quiere leer. */ .tira-pista{display:flex;width:max-content;gap:22px 40px;animation:pista 48s linear infinite} @media(min-width:900px){.tira-pista{gap:26px 52px}} /* La mascara y el recorte, solo sobre el carril. `clip` y no `hidden` para no declarar un contenedor de scroll de mas. */ .tira-cinta{overflow:clip; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)} .tira .tira-logos{flex:none;flex-wrap:nowrap} @keyframes pista{to{transform:translateX(calc(-50% - 26px))}} /* -------------------------------------------------------------- la entrada UN solo momento y en la primera pantalla: el titular, la bajada, el boton y la imagen, escalonados. No hay una entrada identica repetida en cada seccion, que es el default que se reconoce de lejos. */ /* Tres propiedades y no dos: opacidad, desplazamiento y DESENFOQUE. El desenfoque es lo que hace que algo parezca llegar en vez de simplemente encenderse, y es la unica de las tres que se nota por su ausencia. Escalonado de 100ms entre bloques: titular, bajada, boton. Es keyframe y no transicion a proposito: corre una sola vez y no hay nada que interrumpir. */ [data-entra]{opacity:0;transform:translateY(12px);filter:blur(4px); animation:entra .68s var(--sale) both;animation-delay:calc(var(--t,0) * 100ms + 60ms)} @keyframes entra{to{opacity:1;transform:none;filter:blur(0)}} /* Las imagenes de mas abajo se destapan al llegar, y solo ellas: son lo pesado de la pagina y lo unico que gana algo con aparecer. */ /* VA CON MASCARA Y NO CON `clip-path`, y no es un detalle de gusto: un clip-path cerrado esconde al elemento del IntersectionObserver, que le da ratio 0 y nunca lo ve entrar. Medido: con clip, 0 de 4 se destapaban. Con mascara el observer lo sigue midiendo entero. */ /* Se destapa moviendo la imagen dentro de su caja, que ya recorta. Solo `transform` y `opacity`, o sea lo unico que la GPU compone sin repintar. La version anterior animaba `mask-position`, que repinta en cada cuadro, y la de antes usaba `clip-path`, que ademas escondia el elemento del IntersectionObserver y no disparaba nunca. */ /* EL ESTADO INICIAL LO PONE EL SCRIPT, NUNCA ESTA HOJA. La condicion es `[data-anim]`, que el script cuelga del antes de pintar: sin JavaScript el atributo no existe, la regla no aplica y las cuatro imagenes se ven, que es la regla de toda la capa de movimiento. Escrito al reves, una imagen en opacidad 0 esperando una clase que nadie va a poner desaparece para siempre y en la consola no hay un solo error. */ [data-anim] [data-ve] img{transform:translateY(9%) scale(1.07);opacity:0; transition:transform .82s var(--sale),opacity .5s var(--sale)} [data-anim] [data-ve].vista img{transform:none;opacity:1} /* -------------------------------------------------------------- el apretado Todo lo que se toca baja. 120ms, que es lo que la guia da para un boton. */ /* Todo el movimiento de hover detras de una consulta de puntero: en una pantalla tactil no hay hover y el navegador lo emula pegajoso al tocar. */ @media (hover:hover) and (pointer:fine){ .tabla tbody tr{transition:background .25s ease} .tabla tbody tr:hover{background:rgba(112,0,255,.045)} [data-anim] [data-ve].vista img{transition:transform .7s var(--mueve),opacity .5s var(--sale)} .par .sombra:hover img,.serv-item:hover .sombra--serv img{transform:scale(1.04)} } @media (prefers-reduced-motion: reduce){ /* El salto vuelve a ser instantaneo: un scroll animado de media pagina es justamente el tipo de movimiento que esta consulta pide que no pase. */ html{scroll-behavior:auto} .tira-pista{animation:none} [data-entra]{animation:none;opacity:1;transform:none} [data-ve]{-webkit-mask-image:none;mask-image:none;transition:none} } /* ------------------------------------------------ las cifras se destapan Estaban ahi puestas desde siempre. Ahora entran: el numero sube desde detras de su propia linea de base y la etiqueta y el parrafo suben detras, escalonados de a 90ms. Se recorta con `overflow:clip` sobre un envoltorio y se mueve con `transform`, NO con `clip-path` ni con `mask-position`. Los dos motivos se aprendieron en esta misma pagina: un `clip-path` cerrado esconde al elemento del IntersectionObserver, y animar `mask-position` es pintura, no composicion. `transform` y `opacity` los compone la GPU sola. `padding-bottom` mas `margin-bottom` negativo es para que el recorte no le coma la panza a la letra: sin eso, el `overflow:clip` corta el trazo de abajo del 3 y del 0. */ .cifra-tapa{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em} [data-anim] .cifras[data-ve] .cifra-tapa b{transform:translateY(110%); transition:transform .78s var(--mueve);transition-delay:calc(var(--i,0) * 90ms)} [data-anim] .cifras[data-ve] .cifra h3, [data-anim] .cifras[data-ve] .cifra p{opacity:0;transform:translateY(12px); transition:opacity .55s var(--sale),transform .55s var(--sale); transition-delay:calc(var(--i,0) * 90ms + 180ms)} [data-anim] .cifras[data-ve].vista .cifra-tapa b{transform:none} [data-anim] .cifras[data-ve].vista .cifra h3, [data-anim] .cifras[data-ve].vista .cifra p{opacity:1;transform:none} /* Este apagado va DESPUES de las reglas que apaga y no arriba, en el bloque general de menos movimiento. Con la misma especificidad manda el orden del archivo: puesto antes, no apagaria nada. Ya se tropezo con esto en esta pagina y esta anotado en el CLAUDE.md del proyecto. */ @media (prefers-reduced-motion: reduce){ [data-anim] .cifras[data-ve] .cifra-tapa b{transform:none} [data-anim] .cifras[data-ve] .cifra h3, [data-anim] .cifras[data-ve] .cifra p{opacity:1;transform:none;transition-delay:0s} } /* ============================================================================ LA TARJETA ---------------------------------------------------------------------------- Robada de la referencia que pasaste, con su reparto: la columna de la izquierda lleva el nombre, el parrafo, el boton y la lista viva; la pantalla ocupa el resto y cambia con el renglon abierto. Medido sobre sus capturas: 40 y 60 de ancho, 27 de hueco, cada renglon de 57 con su filete abajo, y la barra de avance APOYADA sobre ese filete, no debajo. Lo que no se copio: alli el suelo es negro y la tarjeta es de vidrio. Aca la tarjeta es papel sobre piedra, porque el suelo de esta pagina es claro. ========================================================================== */ .tarjeta{margin-top:clamp(32px,4vw,52px);padding:clamp(16px,2vw,20px); border:1px solid var(--sombra);border-radius:10px;background:var(--luz); display:grid;grid-template-columns:minmax(0,1fr);gap:22px} @media(min-width:960px){ /* 46/54 y no 40/60: la foto es una ilustracion, no el contenido, y ocupando seis decimos de la tarjeta pesaba mas que las cuatro capacidades que hay al lado. El texto ademas gana seis puntos de ancho, que a esta medida son dos o tres palabras mas por renglon. */ .tarjeta{grid-template-columns:minmax(0,46%) minmax(0,1fr); grid-template-rows:auto 1fr;column-gap:clamp(28px,3vw,44px);row-gap:0} .tarjeta-cab{grid-column:1;grid-row:1} .lista{grid-column:1;grid-row:2;margin-top:32px} .tarjeta-vis{grid-column:2;grid-row:1/-1} } /* En telefono la pantalla va ENTRE el boton y la lista, que es donde la pone la referencia: primero que es, despues se ve, despues el detalle. */ .tarjeta-cab{order:1}.tarjeta-vis{order:2}.lista{order:3} @media(min-width:960px){.tarjeta-cab,.tarjeta-vis,.lista{order:0}} /* EL TITULO LLEVA SU ICONO Y CRECE. Antes eran 24px sin nada al lado, o sea del tamano de un subtitulo cualquiera: la tarjeta empezaba sin decir que era. A 32px y con un simbolo delante, el nombre del servicio se lee primero. El icono va a `1em`, atado al tamano del texto: asi crece y encoge con el titulo en vez de quedarse fijo cuando el `clamp` se mueve. `align-items:baseline` no sirve aca porque un SVG no tiene linea de base; va `center` con un ajuste optico chico. */ .tarjeta-nom{display:flex;align-items:center;gap:.45em; font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600; letter-spacing:-.03em;line-height:1.1} .tarjeta-nom .ico{width:1em;height:1em;flex:none;color:var(--acento); position:relative;top:.02em} .tarjeta-p{margin-top:12px;max-width:42ch;font-size:1rem;line-height:1.6;color:var(--tinta-2)} /* La lista arranca mas cerca: entre la bajada y la primera capacidad ya no hay un boton que separe. */ @media(min-width:960px){.lista{margin-top:24px}} /* ACORDEON, COMO LA REFERENCIA: las cuatro arrancan cerradas y se abre la que le toca el turno, sola, con la barra de abajo marcando cuanto le queda. Lo que SI se quedo del intento de dejarlas abiertas es el tamano de letra: el nombre paso de 15 a 17px y la descripcion de 15 a 16. Eso era el problema real, no el acordeon. Se abre con `grid-template-rows` de 0fr a 1fr y no con un `max-height` inventado: con max-height hay que adivinar un numero y el dia que un texto se va a tres renglones se corta sin avisar. */ .lista{margin:26px 0 0;padding:0;list-style:none} .lista-it{position:relative;border-bottom:1px solid var(--sombra)} .lista-b{display:flex;align-items:center;gap:11px;width:100%;padding:17px 0;background:none;border:0; cursor:pointer;text-align:left;font-family:var(--display);font-size:1.0625rem;font-weight:600; letter-spacing:-.015em;color:var(--tinta-2);transition:color .25s ease} .lista-b .ico{width:1.15em;height:1.15em;color:var(--humo);transition:color .25s ease} .lista-it.on .lista-b{color:var(--tinta)} .lista-it.on .lista-b .ico{color:var(--acento)} .lista-caja{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--sale)} .lista-caja>div{overflow:hidden} .lista-it.on .lista-caja{grid-template-rows:1fr} .lista-caja p{padding-bottom:16px;font-size:1rem;line-height:1.6;color:var(--tinta-2);max-width:46ch} .lista-caja .serv-lista{margin:14px 0 16px} .lista-caja .serv-lista li{font-size:.9375rem} /* La barra se apoya SOBRE el filete del renglon abierto. En la referencia ese filete se ve mitad claro y mitad oscuro, que es exactamente esto. */ .lista-prog{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--violeta);border-radius:2px} .lista-it.on .lista-prog{animation:lista-avanza var(--dur,7s) linear forwards} @keyframes lista-avanza{to{width:100%}} .tarjeta-vis{position:relative;overflow:hidden;border-radius:8px;background:var(--noche-2); aspect-ratio:4/3;box-shadow:inset 0 0 0 1px rgba(21,21,26,.1)} @media(min-width:960px){.tarjeta-vis{aspect-ratio:auto;min-height:380px;max-height:min(60vh,520px)}} .tarjeta-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transform:scale(1.04);transition:opacity .5s var(--sale),transform .9s var(--sale)} .tarjeta-vis img.on{opacity:1;transform:none} /* ------------------------------------------------------- el apretado UN solo valor para todo lo que se toca: `scale(.96)` en 150ms con salida suave. Estaba en .95, .975 y .95 segun el elemento, o sea tres respuestas distintas a la misma accion. Por debajo de .95 el gesto se lee exagerado. Se nombra la propiedad, no `all`: con `all` entra tambien el color y el apretado deja de ser instantaneo. */ .boton,.barra-menu,.idioma,.tema,.lista-b,.pq-chip{ transition-property:scale,background-color,border-color,color; transition-duration:150ms;transition-timing-function:var(--sale)} .boton:active,.barra-menu:active,.idioma:active,.tema:active{scale:.96} @media (prefers-reduced-motion: reduce){ .lista-it.on .lista-prog{animation:none;width:100%} .tarjeta-vis img{transform:none;transition:opacity .01ms} .lista-caja{transition:none} } /* LAS DOS TARJETAS VAN IGUAL, con el texto a la izquierda. La segunda estaba espejada (texto a la derecha, foto a la izquierda) para que dos tarjetas seguidas no se leyeran como una plantilla. El costo era peor que el beneficio: el ojo, que viene bajando por la columna de texto de la primera, tiene que cruzar todo el ancho para encontrar donde sigue la segunda. Un patron se lee rapido justamente porque se repite. */ /* El video del hero vive en el mismo marco que tenia la imagen. */ /* ================================================================ los casos Los cuatro miden lo mismo y pesan lo mismo: son cuatro clientes del mismo rango y hacer uno grande decia que los otros tres importaban menos. SIN HALO. Habia dos capas de luz encima de la imagen, un foco que seguia al puntero y un borde conico que giraba alrededor del marco, y las dos se sacaron: sobre una tarjeta que ya es negra sobre un suelo claro, el halo competia con la imagen en vez de sostenerla. Lo unico que queda al acercarse es la imagen acercandose, que no pinta nada encima de nada. */ .casos{display:grid;gap:18px;margin-top:clamp(30px,3.6vw,48px)} @media(min-width:760px){.casos{grid-template-columns:1fr 1fr;gap:22px}} /* `clip` y no `hidden`: recorta las esquinas igual pero no declara un contenedor de scroll. */ .cs{position:relative;border-radius:10px;background:var(--noche);overflow:clip; box-shadow:0 22px 54px -34px rgba(21,21,26,.55); transition:box-shadow .45s var(--sale)} .cs-marco{position:relative;display:block;overflow:clip;background:var(--noche); aspect-ratio:16/10} .cs-img{width:100%;height:100%;object-fit:cover;display:block; transition:transform 1s var(--mueve)} .cs-velo{position:absolute;inset:0; background:linear-gradient(0deg,rgba(7,7,10,.55),rgba(7,7,10,0) 62%); transition:opacity .5s var(--sale)} .cs-txt{position:relative;background:var(--noche); padding:clamp(20px,2.2vw,26px) clamp(20px,2.2vw,26px) clamp(22px,2.4vw,30px)} .cs-tipo{margin:0;font-family:var(--display);font-size:.9375rem;font-weight:600;color:var(--noche-acento)} .cs h3{margin:6px 0 0;font-family:var(--display);font-size:clamp(1.25rem,1.7vw,1.5rem);font-weight:600; letter-spacing:-.025em;color:var(--noche-tinta)} .cs-que{margin:8px 0 0;font-size:1rem;line-height:1.5;color:var(--noche-humo)} .cs-res{margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(241,240,244,.14); font-size:1rem;line-height:1.5;color:var(--noche-tinta)} .cs-res b{font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.03em; color:var(--noche-tinta);margin-inline-end:.3em;font-variant-numeric:lining-nums} /* Solo con puntero fino: en una pantalla tactil no hay hover y el navegador lo emula pegajoso, asi que la tarjeta quedaria acercada despues de tocarla. */ @media (hover:hover) and (pointer:fine){ .cs:hover{box-shadow:0 30px 64px -32px rgba(21,21,26,.62)} .cs:hover .cs-img{transform:scale(1.055)} .cs:hover .cs-velo{opacity:.7} } /* Se cae el movimiento, no el color: la tarjeta sigue teniendo su velo. */ @media (prefers-reduced-motion: reduce){ .cs-img,.cs-velo{transition:none} .cs:hover .cs-img{transform:none} } /* ================================================================= la barra Pegada arriba desde el primer pixel. Se despega con un fondo translucido y un filete que aparecen recien cuando la pagina se movio: sobre el hero, una barra con fondo corta la imagen por la mitad; sin fondo, sobre el contenido, el texto se mezcla. El estado lo decide un centinela de un pixel arriba de todo, no un listener de scroll. */ .cab{position:sticky;top:0;z-index:50; transition:background .35s var(--sale),border-color .35s var(--sale),backdrop-filter .35s var(--sale)} .cab{border-bottom:1px solid transparent} .cab.pegada{background:color-mix(in srgb,var(--piedra) 82%,transparent); border-bottom-color:var(--sombra); -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)} /* Sin soporte de backdrop-filter, opaco: una barra semitransparente sin desenfoque deja leer el texto de abajo a traves y es peor que un fondo solido. */ @supports not (backdrop-filter: blur(1px)){ .cab.pegada{background:var(--piedra)} } /* La barra ya mide 76px fijos y no cambia de alto al pegarse: no hay padding que transicionar ni contenido que se corra. Lo unico que aparece es el fondo, el filete y el desenfoque, que son tres propiedades de pintura. ACA NO VA UN `scroll-margin-top`. Lo llevaba, y se sumaba al `scroll-padding-top` del html: los dos offsets se acumulan (uno agranda la caja del destino, el otro achica el area de alineacion del scroller), asi que la seccion aterrizaba 192px abajo en vez de 96 y quedaba media pantalla de aire muerto arriba del titulo. El offset se declara UNA vez, en el html, que ademas cubre el `scrollIntoView` y el foco de teclado. */ /* Las paginas legales */ .legal{padding-block:clamp(56px,8vw,110px) clamp(64px,9vw,120px);max-width:none} .legal h1{font-family:var(--display);font-size:clamp(2rem,4.4vw,3.25rem);font-weight:600; letter-spacing:-.035em;line-height:1.04;margin:0 0 clamp(28px,3.4vw,44px)} .legal h2,.legal h3{font-family:var(--display);font-size:1.0625rem;font-weight:600;letter-spacing:-.015em; margin:36px 0 10px;color:var(--tinta)} .legal p,.legal li{max-width:74ch;font-size:1rem;line-height:1.68;color:var(--tinta-2)} .legal p{margin:12px 0 0} .legal ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px} .legal li{position:relative;padding-inline-start:22px} .legal li::before{content:'';position:absolute;left:0;top:.75em;width:12px;height:1px;background:var(--acento);opacity:.7} .legal strong{font-weight:600;color:var(--tinta)} /* Las dos salidas del 404. Reusa la caja de texto de las paginas legales, que ya tiene el ancho de lectura y el ritmo vertical: la pagina de error no necesita un maquetado propio, necesita decir que paso y adonde ir. */ .error-acc{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:32px} /* La tabla no baja de unos 470px de ancho por su contenido, asi que en un telefono desbordaba la pagina entera y arrastraba el scroll horizontal a todo el documento. Ahora scrollea ella sola adentro de su carril: lo ancho se mueve, la pagina se queda quieta. `-webkit-overflow-scrolling` para que en iOS el arrastre tenga inercia, y el `tabindex` del carril lo pone el guion, para que tambien se pueda recorrer con el teclado. */ .tabla-carril{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:18px} .tabla-carril:focus-visible{outline:2px solid var(--acento);outline-offset:3px} .legal table{width:100%;min-width:470px;border-collapse:collapse;font-size:1rem} .legal th,.legal td{text-align:left;padding:11px 18px 11px 0;border-bottom:1px solid var(--sombra);vertical-align:top} .legal th{font-family:var(--display);font-size:.875rem;font-weight:600;color:var(--humo)} /* Las dos tarjetas de servicios, una debajo de la otra y la segunda espejada. Lado a lado no entran: cada una necesita su columna de texto y su pantalla, y a media pagina las dos quedan ilegibles. Apiladas y con el reparto dado vuelta, la segunda no se lee como la copia de la primera. */ .dupla{display:grid;gap:clamp(20px,2.6vw,34px);margin-top:clamp(28px,3.4vw,44px)} .dupla .tarjeta{margin-top:0} /* ============================================================ expertos senior Antes eran tres notas al pie de la misma medida que el cuerpo, y la seccion que sostiene toda la venta (veinte anios de oficio) pesaba menos que una lista de servicios. Ahora el titular manda, el numero de orden es grande y gris, y las tres filas se leen bajando. */ .senior{display:grid;gap:clamp(34px,4vw,60px)} @media(min-width:1000px){.senior{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(48px,5vw,90px)}} .senior-t h2{font-size:clamp(2rem,4vw,3.25rem);max-width:16ch} .senior-l{margin:0;padding:0;list-style:none;display:grid;gap:0;border-top:1px solid var(--sombra)} .senior-l li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr); gap:4px clamp(20px,2.4vw,34px); padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--sombra)} /* MISMO TRATO QUE LOS NUMEROS DE "TU PARTNER TECNOLOGICO": violeta de marca en reposo, sin depender del hover, porque en un telefono no hay hover y un color que solo aparece al acercarse es un color que la mitad de la gente no ve. Antes iban en el tono del filete y daban 1,30:1, despues en `--humo` a 4,67:1. `--violeta` da 5,20:1 y ademas pone marca donde solo habia gris. Sin `opacity`: bajarle el alfa a un color es cambiarle el contraste sin decirlo, y a 0,75 estos volvian a 3,3:1. Se contiene con el peso. */ .senior-n{grid-row:span 2;font-family:var(--display);font-size:clamp(1.75rem,2.6vw,2.5rem); font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--acento); font-variant-numeric:lining-nums; transition:color .3s var(--ease),transform .3s var(--ease)} /* El filete violeta crece desde la izquierda tapando el gris, igual que en las siete capacidades. */ .senior-l li::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px; background:var(--acento);transform:scaleX(0);transform-origin:left center; transition:transform .34s var(--sale)} /* Y el hover del numero es el del boton, el mismo que el de las capacidades: a `--violeta-hondo` y un pixel para arriba. */ @media (hover:hover) and (pointer:fine){ .senior-l li:hover .senior-n{color:var(--acento-2);transform:translateY(-1px)} .senior-l li:hover::after{transform:scaleX(1)} } .senior-l h3{font-family:var(--display);font-size:clamp(1.0625rem,1.4vw,1.25rem);font-weight:600; letter-spacing:-.02em;margin:0} .senior-l p{margin:6px 0 0;font-size:1rem;line-height:1.55;color:var(--tinta-2);max-width:44ch} /* ================================================================= las cifras Estaban en 1.5rem, o sea del tamanio de un subtitulo cualquiera: un numero que quiere impactar tiene que ser lo mas grande de su pantalla. Van a cuatro veces eso, con el signo de porcentaje en chico al lado. */ .banda--cifras .cifras{display:grid;gap:0;border-top:1px solid rgba(241,240,244,.16)} @media(min-width:860px){.banda--cifras .cifras{grid-template-columns:repeat(3,1fr);gap:0 clamp(32px,4vw,64px)}} .banda--cifras .cifra{padding:clamp(28px,3.4vw,44px) 0;border-bottom:1px solid rgba(241,240,244,.16)} @media(min-width:860px){.banda--cifras .cifra{border-bottom:0}} .banda--cifras .cifra b{display:block;font-family:var(--display); font-size:clamp(3.75rem,7.6vw,6.5rem);font-weight:600;letter-spacing:-.05em;line-height:.88; color:var(--noche-tinta);font-variant-numeric:lining-nums} .banda--cifras .cifra b i{font-style:normal;font-size:.46em;letter-spacing:-.02em;color:var(--noche-acento);margin-inline-start:.06em} /* LA ETIQUETA CRECE PORQUE EL NUMERO ES ENORME. Al lado de una cifra de 104px, una etiqueta de 17 se lee como diminuta aunque su contraste sea de 17:1: el problema no es el color sino la proporcion, 6 a 1 entre las dos. A 20 y 18 la relacion baja a 5 a 1 y el renglon vuelve a ser algo que se lee y no un pie de foto. */ .banda--cifras .cifra h3{display:block;margin-top:16px;font-family:var(--display); font-size:clamp(1.125rem,1.5vw,1.25rem); font-weight:600;letter-spacing:-.02em;color:var(--noche-tinta)} .banda--cifras .cifra p{margin-top:10px;font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.6; color:var(--noche-humo);max-width:38ch} /* ================================================================ para quien Ni la tarjeta de Domu, que aca no aporta (seis renglones cortos no necesitan abrirse), ni las seis cajas iguales con emoji del sitio original. Son dos listas enfrentadas porque el contenido son dos cosas distintas: a quien le servimos, y que tiene que estar buscando. */ .pq{display:grid;gap:clamp(38px,4.4vw,60px);margin-top:clamp(32px,3.8vw,52px)} /* `column-gap` y no `gap`: con el atajo, esos 63px se aplicaban TAMBIEN entre las filas de la subgrilla, y se sumaban al margen del rotulo y al padding de la fila. Del filete al primer icono habia 115px, o sea dos tercios de aire que nadie pidio. Las filas ya traen su propio respiro en su padding. */ @media(min-width:900px){.pq{grid-template-columns:1fr 1fr;column-gap:clamp(40px,4.4vw,72px);row-gap:0}} /* LAS FILAS DE LAS DOS COLUMNAS SE ALINEAN ENTRE SI, y no lo hacian solas. Cada columna es su propia lista, asi que cada una repartia su alto por su cuenta: bastaba que una descripcion ocupara dos renglones y la de al lado uno para que las pastillas se corrieran. Medido, la segunda y la tercera fila estaban 26px desfasadas en 1024, 1280, 1440 y 1920. Con `subgrid` las cuatro filas (el rotulo y los tres items) las decide la grilla de afuera, asi que la fila mas alta manda en las dos columnas. Es la unica forma de conseguirlo sin romper que cada columna sea una lista de verdad: alinearlas metiendo los seis items en una sola grilla costaria las dos `