/* ═══════════════════════════════════════════════════════════════════ SISTEMA WEB · 180 Grados CAM Fuente única para /landing/ y para /lab/web/, que es donde se ve pieza por pieza. Si algo se afina aquí, se afina en los dos: el lab NO copia el CSS, lo carga. El armado viene de tayanecklace.com, medido en el sitio y no a ojo: barra de 64 sin borde, rayas de 40x2, fila de acordeón de 58 con la pregunta a interlineado 1.0 y el signo en caja de 20x20 que al abrir se vuelve un menos. Lo que NO se copia son los números que en español no funcionan; están anotados donde tocan. La tipografía, el color y la retícula son los de la casa (/lab/tokens.css). Aquí sólo vive la capa web. ═══════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────── Landing pública · la estructura de tayanecklace.com con el sistema de 180 Grados CAM. Lo que se toma de Taya es el ARMADO, no la piel: · barra de papel con el wordmark a la izquierda y el menú a la derecha, que abre a pantalla completa; · portada a sangre con el titular abajo a la izquierda, nunca centrado, y sin botones - el único CTA vive en la barra; · tarjetas apiladas a todo lo ancho, con la categoría en serif arriba y la línea que remata abajo, en vez de tres en fila; · UN solo momento centrado en toda la página. Centrar una cosa cuando todo va a bandera izquierda le da peso; centrar todo es la portada por defecto de cualquier generador; · acordeón de preguntas con el + a la derecha y los grupos rotulados en versalitas; · pie con el wordmark grande, la frase en serif y tres columnas. La tipografía, el color y la retícula son los de la casa. Los interlineados de titular van cerrados (1.0–1.05) como en Taya. ───────────────────────────────────────────────────────────────────── */ /* CURVAS CIRCULARES. Son cuartos de círculo, no las de siempre. Lo que las distingue es que tienen un TIRÓN: arrancan o rematan de golpe en vez de subir parejo. Una curva parecida a la recta no se siente como nada, y por eso una animación bien hecha con la curva equivocada se ve barata. salida arranca disparada y frena duro · para lo que aparece entrada arranca lenta y remata acelerando · para lo que se va ambas lenta, tirón, lenta · para lo que cambia */ :root{ --circ-sal:cubic-bezier(0,.55,.45,1); --circ-ent:cubic-bezier(.55,0,1,.45); --circ:cubic-bezier(.85,0,.15,1); /* El alto de la barra. Lo necesitan la barra misma, las migas del cuaderno (que se pegan justo debajo) y el desfase del scroll suave. Estaba escrito tres veces a mano y con tres valores distintos. */ --nav-alto:64px; } *{box-sizing:border-box;margin:0;padding:0;font-synthesis:none} /* Lenis interpola el scroll de la rueda, así que el «smooth» nativo tiene que estar apagado o pelean. */ html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:hidden} .lenis.lenis-smooth iframe{pointer-events:none} body{background:var(--color-papel);color:var(--color-tinta); font-family:var(--font-texto);font-weight:var(--peso-texto);font-size:1.0625rem;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:clip} img{display:block;max-width:100%} a{color:inherit} /* 24 de canal en móvil, que es el de Taya */ .w{max-width:1180px;margin:0 auto;padding:0 clamp(24px,4vw,48px)} /* ── SALTAR AL CONTENIDO ─────────────────────────────────────────── No se ve hasta que recibe el foco. Quien navega con teclado tiene que pasar por toda la barra en cada página para llegar al texto, y eso en una página larga son doce tabulaciones antes de la primera palabra. No se esconde con display:none ni con left:-9999px: lo primero lo saca del orden de tabulación y lo segundo deja un fantasma a nueve mil píxeles que sale en cualquier auditoría de desbordamiento. */ .salto{position:absolute;left:12px;top:-100px;z-index:200; background:var(--pal-d-fondo);color:var(--color-papel); font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em; padding:11px 16px;border-radius:0 0 10px 10px;text-decoration:none; transition:top .18s var(--circ-sal,ease)} .salto:focus-visible{top:0;outline:2px solid var(--color-papel);outline-offset:-5px} /* ── EL ARO DE FOCO, POR DEFECTO Y PARA TODO ─────────────────────── El .cta y los puntos de la portada traían el suyo, pero los nueve enlaces del panel de menú no: quien navega con teclado abría el menú y dejaba de ver dónde estaba. Esto es la red de seguridad: cualquier cosa enfocable que no declare su propio aro, lleva éste. Va en color de marca sobre papel y en papel sobre oscuro, que es donde vive el menú. */ a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--pal-d-fondo);outline-offset:3px;border-radius:3px} .oscuro a:focus-visible, .oscuro button:focus-visible, .menu a:focus-visible, .portada a:focus-visible, .portada button:focus-visible{outline-color:var(--color-papel)} /* ── ÁREA DE TOQUE DE LAS LISTAS DE ENLACES ──────────────────────── Un enlace de una línea mide 17 px de alto: por debajo del mínimo de 24 que pide la WCAG para un blanco de toque. En una lista de pie o de menú no hay texto alrededor que justifique la excepción de los enlaces en línea, así que se les da el alto con relleno vertical, que además los separa entre sí. */ footer .columnas li a, .menu ul a, .mas-cuaderno a, .contacto .datos dd a{display:inline-block;padding-block:4px} footer .columnas li{margin-block:-1px} .contacto .datos dd a{padding-block:3px} /* rótulos: la mono sólo rotula, nunca narra */ /* El rótulo es mono, en versales y con tracking: a igualdad de cuerpo se ve más chico que cualquier otra cosa de la página, y a .72rem quedaba en once píxeles y medio debajo de titulares de cincuenta. */ .rot{display:block;font-family:var(--font-mono);font-size:.78rem;font-weight:var(--peso-mono); text-transform:uppercase;letter-spacing:var(--track-mono);color:var(--color-tenue)} /* El de una cabecera de sección acompaña a un titular que crece con la pantalla, así que crece con él. Los de las tarjetas se quedan donde están: ahí el rótulo va pegado a un texto chico. */ .cabeza .rot{font-size:clamp(.82rem,1.02vw,1rem)} h1,h2,h3{font-family:var(--font-display);font-weight:var(--peso-display);text-wrap:balance} h1 b,h2 b,h3 b{font-weight:var(--peso-display-b)} p{text-wrap:pretty} .tenue{color:var(--color-tenue)} /* superficies oscuras: el acento es luz y va detrás */ .oscuro{background:var(--pal-d-fondo);color:var(--color-papel);position:relative;overflow:hidden; background-image:var(--brillo)} .oscuro .rot{color:color-mix(in oklch,var(--color-papel) 62%,transparent)} .oscuro .tenue{color:color-mix(in oklch,var(--color-papel) 80%,transparent)} /* ── barra ───────────────────────────────────────────────────────── */ /* Medido en tayanecklace.com: barra de 64px, papel sólido, SIN borde inferior, sin sombra y sin blur. (Allá es `fixed` con un espaciador; aquí va `sticky`, que da exactamente el mismo resultado en el flujo sin tener que compensar los 64px a mano.) */ nav{position:sticky;top:0;z-index:60;background:var(--color-papel)} nav .w{display:flex;align-items:center;justify-content:space-between;height:var(--nav-alto);gap:16px} /* El wordmark de Taya mide 140x23 de tinta en una barra de 375: ocupa el 37% del ancho y es lo que ancla la barra. El nuestro iba a 21.6px en Light, o sea del tamaño y el peso del texto de cuerpo, y al lado se leía como un renglón más, no como una marca. Va a 28 y en 400. (Esa nota decía que mientras no existiera el isotipo la cifra ERA el wordmark. Ya existe, así que la cifra dejó de serlo.) */ @media (max-width:359px){.marca .nom{font-size:.95rem}} /* ── EL WORDMARK ─────────────────────────────────────────────────── EL SIGNO VA AL LADO DEL NOMBRE, NUNCA DENTRO. Meterlo donde iría el ° de «180°» está descartado, y por una razón que no es de gusto: el nombre no es registrable y va a cambiar. Un signo encajado en la cifra se muere con el nombre; uno que va al lado sobrevive. El armado sale del taller: signo a 1.5 veces el cuerpo del texto, 14 de separación, y el nombre COMPLETO -«180 Grados CAM», no «180° CAM»- en la serif a peso 400 y .01em. Encima va el kerning óptico, que sí se conserva porque está medido. Se rasterizó cada glifo a 300px, se sacó el área de blanco entre cada par contando sólo los renglones donde ambos tienen tinta, y se buscó el corrimiento que iguala esa área. El ojo lee áreas, no distancias. El hueco de cada renglón va acotado a .42em: sin tope, la cuña que abre la A domina la cuenta y «CA» pedía -.166em, que es una barbaridad. Antes de corregir, blanco por renglón a 300px: 18 77.3 80 65.9 CA 100.2 AM 92.4 Los deltas van sumados al .01em de base, que es el tracking del nombre. OJO con lo que decía aquí antes. Decía «después, todos en su objetivo», y no es verdad: lo que se aplicó mueve cada par en la dirección correcta pero se queda corto, y los cuatro terminan con un 15.3% de dispersión entre ellos. Igualarlos del todo con el mismo tope pide bastante más, sobre todo en CA. Se deja como está, que es la versión prudente, pero queda dicho. Para volver a medirlo o para moverlo está /lab/kerning/, que reproduce las cifras de arriba con 1.1px de diferencia. */ .marca,footer .marca-grande{font-kerning:none;font-variant-ligatures:none} .marca{display:inline-flex;align-items:center;gap:.82em;text-decoration:none} .marca .signo{flex:none;width:1.5em;height:1.5em;color:currentColor} .marca .nom{font-family:var(--font-display);font-weight:400;letter-spacing:.01em; line-height:1;white-space:nowrap;font-size:1.05rem} .wm-1{letter-spacing:-.0092em} /* 1 → 8 · .01 - .0192 */ .wm-8{letter-spacing:.0301em} /* 8 → 0 · .01 + .0201 */ .wm-c{letter-spacing:-.0161em} /* C → A · .01 - .0261 */ .wm-a{letter-spacing:.0269em} /* A → M · .01 + .0169 */ footer .marca-grande{display:inline-flex;align-items:center;gap:.82em} footer .marca-grande .signo{flex:none;width:1.5em;height:1.5em;color:currentColor} footer .marca-grande .nom{font-family:var(--font-display);font-weight:400; letter-spacing:.01em;line-height:1;white-space:nowrap} .nav-der{display:flex;align-items:center;gap:14px} .cta{display:inline-flex;align-items:center;justify-content:center;background:var(--pal-d-fondo); color:var(--color-papel);text-decoration:none;padding:.72rem 1.25rem;border-radius:999px; font-weight:var(--peso-texto-b);font-size:.9rem;line-height:1;border:1px solid transparent; white-space:nowrap;cursor:pointer;font-family:inherit; /* background-COLOR, no el atajo `background`: el atajo incluye la imagen, que es el degradado del resplandor, y ésa no interpola. */ /* CUERPO. Un filo clarísimo arriba y una sombra corta abajo. Sin esto el botón es una mancha de color con letras: no tiene canto, y por eso se siente pegado al papel en vez de apoyado encima. Es lo que hace el trazo base del specular. LA LUZ SE SALE. El tercer resplandor sangra FUERA del botón y su desenfoque lo maneja --luz: en cero el desenfoque es cero y no hay nada; al acercarte crece. Esto es lo que separa la luz de un degradado pintado, porque un degradado se queda dentro de su caja. El overflow:hidden no lo recorta: las sombras se dibujan fuera de la caja y no las toca. */ /* NADA de resplandor por fuera. Se probó -una sombra de color cuyo desenfoque subía con la cercanía- y produce una aureola gorda alrededor del botón que se ve mal. La luz se queda dentro. */ box-shadow:inset 0 1px 0 rgba(251,251,250,.08), 0 1px 2px rgba(6,0,79,.2); transition:background-color 260ms var(--circ), transform 90ms var(--circ-sal), box-shadow 150ms var(--circ-sal)} /* NADA de crecer al pasar el cursor. Se probó con scale(1.022) y se ve de caricatura: un botón que se infla lee como juguete, no como algo editorial. El tope lo hace la luz, que entra rápido; mover la geometría era el atajo. Al PRESIONAR sí se hunde, porque eso no es decoración sino la respuesta a un clic. */ /* el relleno también cambia al tocar. Se había ido junto con el scale que se quitó, y con él parte del escalón. */ .cta:hover{background-color:var(--d-medio)} .cta.claro:hover{background-color:var(--d-hielo)} /* al presionar se hunde: la sombra de abajo se colapsa y el filo de arriba se apaga, que es lo que hace un botón de verdad al aplastarlo */ .cta:active{transform:scale(.985); box-shadow:inset 0 1px 2px rgba(6,0,79,.3); transition-duration:60ms} /* ── UNA LUZ ─────────────────────────────────────────────────────── Hubo dos: el ronda (::after) y un aro de contacto en la orilla (::before). Roberto quitó el aro y la mezcla; queda el ronda solo, y el escalón entre acercarse y tocar lo hacen el relleno y la sombra, no una segunda capa de luz. EL RONDA va fuerte a propósito. Se probó con techo en 34% para que el contacto se distinguiera, y fue el error: la diferencia se consiguió APAGANDO el acercamiento en vez de subir el contacto, y lo que se perdió fue justo el jalón. Llega a .78 de teal puro acercándose y .82 en contacto, que es el máximo que aguanta antes de que el texto blanco encima baje de 4.5:1. Medido: 5.75 acercándose, 4.79 en contacto. Nada de núcleo brillante en medio: se probó y el verde luz cae justo debajo de la etiqueta; medido, el texto blanco quedaba en 2.4:1 contra un mínimo de 4.5. Por eso el degradado se mueve con el cursor pero nunca sube de .82. */ .cta{position:relative;overflow:hidden;isolation:isolate} .cta::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit; background:radial-gradient(circle 170px at var(--mx,50%) var(--my,50%), var(--pal-d-luz-2) 0%, color-mix(in oklch,var(--pal-d-luz-2) 55%,transparent) 46%, transparent 78%); /* sin transition: el script interpola cuadro a cuadro y una transición encima sólo añadiría retraso sobre algo que ya es suave */ opacity:calc(var(--luz,0) * .78)} .cta:hover::after{opacity:calc(var(--luz,1) * .82)} /* Estados forzados. Existen para /lab/web/, donde hay que ver los tres a la vez; en el sitio salen del pseudo-selector y estas clases no se usan. Estaban prometidos en el texto del laboratorio y no existían en el código, que es la peor versión de un comentario. OJO: estas clases NO pueden depender de --luz. Se escribieron como calc(var(--luz,1) * .82) y se rompían solas: mientras nadie movía el cursor la variable no existía, salía el respaldo 1 y el brillo se veía bien; en cuanto el cursor se movía una vez, el bucle de cercanía le escribía --luz:0.000 en línea a TODOS los .cta y la fila de muestra se apagaba. O sea que el estado de muestra dependía de si el cursor ya se había movido, que es justo lo que una muestra no debe hacer. Ahora llevan el valor fijo al que llega el hover de verdad, y boton.js se salta los elementos con estas clases para no pisarles nada. */ .cta.es-hover::after{opacity:.82} .cta.es-hover{background-color:var(--d-medio)} .cta.claro.es-hover{background-color:var(--d-hielo)} .cta.es-foco{outline:2px solid var(--pal-d-fondo);outline-offset:2px} .cta.es-activo{transform:scale(.985)} /* del lado claro el filo va abajo: sobre papel el canto que se ve es el de abajo, no el de arriba */ .cta.claro{background:var(--color-papel);color:var(--pal-d-fondo); box-shadow:inset 0 -1px 0 rgba(6,0,79,.1), 0 1px 3px rgba(6,0,79,.24)} /* sobre papel el teal apagaría el texto azul, así que del lado claro las dos luces salen del verde hielo */ .cta.claro::after{background:radial-gradient(circle 170px at var(--mx,50%) var(--my,50%), var(--d-hielo) 0%, color-mix(in oklch,var(--d-hielo) 58%,transparent) 46%, transparent 78%)} nav .cta{display:none} @media (min-width:700px){nav .cta{display:inline-flex}} /* el botón del menú: dos rayas, como el de Taya, que se cruzan al abrir */ /* LA TACHA DE TAYA, medida con un clic de verdad. Lo primero que hay que saber es que NO es a 45 grados: las dos rayas convergen al mismo centro y rotan ±15°. Por eso se ve ancha y suave en vez de la crucecita de siempre. Con 40 de ancho, 15° dan una tacha que se lee como un trazo, no como un icono. Cerrada: dos rayas de 40×2 con los centros a 6 de distancia (±3). Abierta: los dos centros en el mismo punto, una a -15 y otra a +15. (Una medición anterior decía que no se transformaban. Estaba mal: la hice con un click() sintético que ni siquiera abría el menú.) */ .hamb{position:relative;width:44px;height:44px;background:none;border:0;cursor:pointer; color:var(--color-tinta)} .hamb:focus-visible{outline:2px solid var(--pal-d-fondo);outline-offset:2px;border-radius:4px} .hamb span{position:absolute;top:50%;left:50%;width:40px;height:2px;margin:-1px 0 0 -20px; background:currentColor;transform-origin:50% 50%; transition:transform 420ms cubic-bezier(.22,1,.36,1)} .hamb span:first-child{transform:translateY(-3px)} .hamb span:last-child{transform:translateY(3px)} body.menu-abierto .hamb span:first-child{transform:rotate(-15deg)} body.menu-abierto .hamb span:last-child{transform:rotate(15deg)} /* EL MENÚ DE TAYA no es una pantalla completa: es un panel que cae bajo la barra, metido 20 por cada lado, con la página todavía visible debajo. Medido: x=20, y=84 (o sea 64 de barra más 20 de aire), 335 de ancho, 204 de alto. Los enlaces van CENTRADOS, a 24px y separados 42 de línea a línea, y abajo una pastilla oscura de 137×34, también centrada. OJO con el nombre: la clase del panel y la que se le pone al tienen que ser distintas, o `.menu{opacity:0}` apaga la página entera. */ .menu{position:fixed;left:20px;right:20px;top:84px;z-index:50; background:var(--color-papel);border:1px solid var(--color-linea);border-radius:16px; display:grid;justify-items:center;align-content:start;gap:20px;padding:34px 24px; box-shadow:0 18px 50px -24px color-mix(in oklch,var(--pal-d-fondo) 28%,transparent); opacity:0;visibility:hidden;transform:translateY(-10px); transition:opacity 280ms var(--ease-out),transform 280ms var(--ease-out), visibility 0s linear 280ms} body.menu-abierto .menu{opacity:1;visibility:visible;transform:none;transition-delay:0s} .menu ul{list-style:none;display:grid;justify-items:center;gap:18px;padding:0;width:100%} .menu ul a{display:inline-block;text-decoration:none;font-family:var(--font-display); font-weight:400;font-size:1.5rem;line-height:1;letter-spacing:-.012em; transition:color var(--dur-base) var(--ease-out)} .menu ul a:hover{color:var(--color-tenue)} .menu .cta{font-size:.78rem;padding:.62rem 1.3rem} /* ── portada: a sangre, el titular abajo a la izquierda ──────────── */ /* El relleno de abajo es cero porque la cinta de logos trae el suyo y se apoya en el borde. Y el de arriba baja de 14vw a 9vw: con la cinta dentro, la portada medía 751px en una ventana de 720 y la prueba social caía justo debajo del pliegue, que es el único sitio donde no sirve. */ .portada{position:relative;min-height:min(92svh,900px);display:grid;align-items:end; padding:min(clamp(76px,9vw,120px),12vh) 0 0} .portada canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} /* DOS COLUMNAS EN ESCRITORIO. Una sola columna dejaba media pantalla vacía a la derecha y empujaba la prueba social debajo del pliegue. La afirmación va a la izquierda, el caso que cambia ocupa la derecha, y la cinta de logos cruza el pie a todo lo ancho. La portada pasa a `grid-template-rows: 1fr auto` para que la cinta se pegue abajo pase lo que pase con el alto del texto. */ .portada{grid-template-rows:1fr auto} /* En móvil el caso va ENTRE el párrafo y el botón: después del botón interrumpe el cierre, y antes del titular le roba la entrada. En escritorio ocupa su columna y el botón vuelve debajo del texto. */ /* `minmax(0,1fr)` y no la columna implícita. Sin esto, la columna se dimensiona al max-content del hijo más ancho, y el hijo más ancho es el desfile de casos, que lleva un scroller con `min-width:auto`. En un teléfono de 390 la rejilla medía 443 y `.portada` escondía los 53 de sobra: el renglón de cada caso se cortaba por la derecha. No se veía porque los casos eran cortos. Al alargarlos Lili, apareció «intimida a su» con el «su» fuera de cuadro. Es la misma trampa de la tira de logos, y se arregla igual: la columna manda, no el contenido. */ .portada-rejilla{position:relative;display:grid;gap:clamp(20px,2.6vw,30px); align-content:center;align-items:start; grid-template-columns:minmax(0,1fr); grid-template-areas:"texto" "caso" "boton"} #dicho{min-width:0} /* La portada quiere alto, no economía: apretarla para ganar pantalla la dejaba sintiéndose estrecha. En teléfono se le da MÁS aire entre las piezas, no menos alto. (Estuvo un rato en 78svh y no era eso.) */ @media (max-width:700px){ .portada-rejilla{gap:26px} .dicho-lado{gap:20px} } .dicho-lado{grid-area:texto} #dicho{grid-area:caso} .portada-boton{grid-area:boton} @media (min-width:900px){ .portada-rejilla{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); grid-template-areas:"texto caso" "boton caso"; gap:clamp(26px,3vw,40px) clamp(34px,5vw,80px);align-items:start;align-content:center} #dicho{align-self:center} } .dicho-lado{display:grid;gap:clamp(16px,2.2vw,26px);justify-items:start;min-width:0} .portada .signo{width:clamp(56px,7vw,86px);color:var(--color-papel)} /* El titular también obedece al ALTO de la ventana, no sólo al ancho. En una portátil ancha y baja (1440×700) el conjunto medía 793px y la cinta se salía; con el tope en vh, el titular cede lo justo y todo cabe. */ .portada h1{font-size:min(clamp(2.7rem,8.4vw,6rem),11.5vh); line-height:1.0;letter-spacing:-.03em;max-width:17ch} /* al 86% daba 3.79 en teléfono, donde el agua sale más clara; el mínimo de un texto de 18px que no es negrita es 4.5 */ .portada p{font-family:var(--font-display);font-size:clamp(1.12rem,1.65vw,1.4rem);line-height:1.38; letter-spacing:-.012em;max-width:42ch;color:var(--color-papel)} /* ── EL SILENCIO ────────────────────────────────────────────────── Una pantalla, una frase, y la respuesta que tarda en llegar. La sección mide dos pantallas y la de dentro se queda pegada mientras se recorren. En ese trayecto aparece «nadie dice nada»: el lector pregunta, espera, y la respuesta no viene. La forma hace lo que dice el texto, que es lo único que justifica mover algo aquí. Va sobre papel-2 y no sobre un crema nuevo: el sistema tiene dos papeles declarados y con eso basta. Un tercer color por una sola sección es como empieza a deshacerse una paleta. svh y no vh: en un teléfono, vh cuenta con la barra del navegador escondida, así que la pantalla «entera» se sale por abajo hasta que alguien desplaza. */ .silencio{position:relative;height:200svh;background:var(--color-papel-2); color:var(--color-tinta)} /* la barra es pegajosa y mide --nav-alto: si el bloque se centra en la pantalla entera queda alto por esos pixeles, asi que se centra en la banda que de verdad se ve */ .silencio .fija{position:sticky;top:0;height:100svh;display:grid;place-items:center; text-align:center;padding:var(--nav-alto) clamp(20px,6vw,40px) 0} .silencio .w{display:grid;justify-items:center;gap:clamp(24px,3.6vw,44px)} .silencio .w > *{min-width:0;max-width:100%} .silencio .signo{width:clamp(50px,6vw,78px);color:var(--pal-d-fondo)} .silencio .linea{font-family:var(--font-display);font-weight:var(--peso-display); font-size:clamp(1.55rem,5.4vw,3.6rem);line-height:1.08;letter-spacing:-.03em; max-width:19ch} /* Cada frase es un bloque aparte, y no un
dentro del mismo parrafo, porque `text-wrap: balance` reparte los renglones de UN bloque: con el salto forzado dentro, la primera frase partia dejando «dudas.» sola en su renglon. Asi cada una se equilibra por su cuenta. */ .silencio .linea > span{display:block;text-wrap:balance} /* La segunda linea llega tarde. El desplazamiento es de diez pixeles y ni uno mas: esto no quiere que se note el efecto, quiere que se note la espera. El sitio que ocupa esta reservado desde el principio, asi que al aparecer no mueve nada de lo que hay debajo. */ .silencio .dos{display:block;font-weight:var(--peso-display-b)} /* la clase la pone silencio.js. Sin JS, sin clase: la frase entera se lee de una vez, que es lo unico aceptable como estado de reposo. */ .silencio.corre .dos{opacity:var(--aparece,0); transform:translateY(calc((1 - var(--aparece,0)) * 10px))} /* Va solo en una pantalla entera, debajo de una frase de sesenta píxeles: a .68rem no era discreto, era un pie de página perdido. */ .silencio .cuando{font-family:var(--font-mono);font-size:clamp(.82rem,1.02vw,1rem); letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--color-tenue)} /* sin movimiento, la sección deja de medir dos pantallas: doscientos por ciento de alto sin nada que pase dentro es media pantalla de nada */ .silencio[data-quieto]{height:auto} .silencio[data-quieto] .fija{position:static;height:auto;padding:clamp(80px,14vh,170px) 0} @media (prefers-reduced-motion:reduce){ .silencio{height:auto} .silencio .fija{position:static;height:auto;padding:clamp(80px,14vh,170px) 0} .silencio .dos{opacity:1;transform:none} } /* ── bloque a sangre con tarjeta encajada (la sección 2 de Taya) ──── */ .escena{position:relative;padding:clamp(64px,10vw,130px) 0} /* La escena va sobre PAPEL. Estaba en azul justo debajo de la portada, que también es azul, y quedaba azul sobre azul sin corte. Sobre papel la portada cierra y esto abre. La tarjeta encajada sí se queda oscura: ahí está el contraste ahora. */ .escena{background:var(--color-papel);color:var(--color-tinta)} .escena .rot{color:var(--color-tenue)} .escena .w{position:relative;display:grid;gap:clamp(26px,4vw,44px);justify-items:start} .escena h2{font-size:clamp(1.9rem,5vw,3.3rem);line-height:1.05;letter-spacing:-.028em;max-width:19ch} .escena .cuerpo{max-width:52ch;color:var(--color-tenue)} /* la tarjeta encajada: rótulo arriba, dato abajo, como la del video */ .tarjeta{position:relative;width:min(100%,540px);border-radius:14px;overflow:hidden; aspect-ratio:16/10;background:var(--d-pizarra)} /* la tarjeta admite el agua o una foto; lo de encima es lo mismo */ .tarjeta canvas,.tarjeta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .tarjeta q{position:absolute;z-index:2;left:18px;right:18px;top:50%;transform:translateY(-50%); quotes:"«" "»";font-family:var(--font-display);font-weight:var(--peso-display); font-size:clamp(1.5rem,4.4vw,2.1rem);line-height:1.1;letter-spacing:-.022em;color:#fff} .tarjeta::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,transparent 34%,transparent 58%,rgba(0,0,0,.46) 100%)} /* la de la escena lleva foto y una frase en medio, así que el velo va parejo y algo más oscuro: aquí el texto NO está en las puntas. Subido con el lote V3, que viene más luminoso. Con el velo anterior («¿Alguna duda?» sobre la ventana de la derecha) el blanco caía a 3.55:1, debajo del mínimo de 4.5. Medido componiendo los píxeles de verdad, no a ojo: la foto tal como sale en pantalla, el degradado encima con sus paradas, y el peor píxel bajo cada renglón. Peor caso con cada velo en el medio: .46 (el de antes) 3.55 .56 4.80 .58 5.15 .62 5.96 Se queda en .58, que es lo mínimo con margen. Subirlo más apaga justo la luz que se pidió para este lote. */ .tarjeta:has(>img)::after{ background:linear-gradient(180deg,rgba(4,0,40,.64) 0%,rgba(4,0,40,.58) 38%, rgba(4,0,40,.58) 62%,rgba(4,0,40,.74) 100%)} .tarjeta .et,.tarjeta .pie-tar{position:absolute;z-index:2;font-family:var(--font-mono); font-size:.68rem;text-transform:uppercase;letter-spacing:var(--track-mono);color:#fff} .tarjeta .et{top:16px;left:18px} .tarjeta .pie-tar{bottom:16px;left:18px;right:18px;display:flex;justify-content:space-between;gap:16px} /* ── tarjetas apiladas a todo lo ancho (los «techspecs» de Taya) ──── */ .apiladas{display:grid;gap:clamp(12px,1.6vw,20px);margin-top:clamp(30px,4vw,54px)} .apiladas article{position:relative;border-radius:16px;overflow:hidden;isolation:isolate; min-height:clamp(330px,44vw,430px);display:grid;align-content:space-between; padding:clamp(24px,3.4vw,40px);color:var(--color-papel)} .apiladas canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2} /* Estas tarjetas van con el AGUA, no con fotografía. Se probó con foto -08, 09 y 10 del lote- y Roberto prefiere lo abstracto aquí. Tiene sentido: los tres planos son una idea, no una escena, y la foto los volvía tres momentos distintos en vez de tres caras de lo mismo. La fotografía se queda donde sí cuenta algo: la tarjeta de la escena y los retratos. Si alguien vuelve a meter foto aquí, OJO: el velo de abajo está hecho para el agua, que lleva techo y nunca se aclara. Con una foto cálida encima el texto blanco cae a 1.47 contra un mínimo de 3, y hace falta un velo que pese en las DOS puntas -que es donde hay letras- más un punto menos de brillo en la imagen. Medido, no supuesto. (Lo de abajo estaba calibrado para el agua, que lleva techo y nunca se aclara de más. Una fotografía cálida es mucho más clara, y medido el texto blanco encima caía a 1.5 contra un mínimo de 3. Por eso el velo de la tarjeta con foto pesa mucho más EN LAS DOS PUNTAS, que es donde hay letras, y deja el medio casi limpio, que es donde está la gente. Un velo parejo taparía la foto entera para resolver un problema que sólo existe arriba y abajo. */ .apiladas article::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(4,0,40,.30) 0%,transparent 30%,transparent 46%,rgba(4,0,40,.74) 100%)} .apiladas h3{font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.0;letter-spacing:-.028em} .apiladas .abajo{display:grid;gap:14px;max-width:34ch} .apiladas .abajo p{font-size:1.0625rem;line-height:1.45; color:color-mix(in oklch,var(--color-papel) 88%,transparent)} .apiladas .marca-chica{width:22px;color:color-mix(in oklch,var(--color-papel) 70%,transparent)} @media (min-width:900px){.apiladas{grid-template-columns:1fr}} /* ── el único momento centrado de la página ──────────────────────── */ /* OTRA VEZ min-width:auto, y otra vez escondido. `justify-items:center` hace que cada hijo se mida por su contenido, y un hijo de rejilla no encoge por debajo de él: en un teléfono de 390 el párrafo pedía sus 44ch -unos 430 px- y se salía por la derecha, cortado. Y no se veía venir, porque `overflow-x:clip` del body lo esconde y scrollWidth sigue diciendo que todo cabe. El `min-width:0` es lo que le da permiso a encoger; el `max-width:100%` es el cinturón por si alguien añade otro hijo mañana. */ .centro{padding:clamp(86px,13vw,180px) 0;text-align:center} .centro .w{display:grid;justify-items:center;gap:clamp(18px,2.4vw,26px)} .centro .w > *{min-width:0;max-width:100%} .centro h2{font-size:clamp(2.1rem,5.6vw,3.8rem);line-height:1.03;letter-spacing:-.03em;max-width:17ch} .centro p{max-width:min(44ch,100%);color:var(--color-tenue);font-size:1.0625rem} .centro .fuerte{max-width:min(26ch,100%)} .centro .cta{margin-top:10px} /* ── la cuenta ───────────────────────────────────────────────────── */ .seccion{padding:clamp(64px,9.5vw,128px) 0} .seccion+.seccion:not(.oscuro){border-top:1px solid var(--color-linea)} .cabeza{display:grid;gap:14px;justify-items:start;margin-bottom:clamp(26px,3.4vw,44px)} /* La medida va en `em` y no en `ch`: el ch se calcula sobre la fuente del contenedor y no sobre la de la línea, y a 19ch «Una fuga que ningún estado» se partía dejando «estado» solo en su renglón. Y cada línea escrita es su propio bloque en lugar de ir separada por un
, porque `text-wrap: balance` reparte los renglones de UN bloque: con el salto forzado dentro no se equilibraba ninguna de las dos mitades. Ojo con la tentación de apagar el
en teléfono con `display:none`: el
no aporta espacio, así que las dos palabras que separaba se quedan pegadas («comunicacióny liderazgo»). */ .cabeza h2{font-size:clamp(1.9rem,5vw,3.3rem);line-height:1.05;letter-spacing:-.028em; max-width:14em} /* La regla va sobre CUALQUIER titular y no sólo sobre los de cabecera: el de «¿Y cómo lo van a hacer?» vive en otra sección, sus dos mitades se quedaban en línea y se leía «lovan». Un que no sea bloque no parte nada. */ h1 .l,h2 .l,h3 .l{display:block;text-wrap:balance} .cabeza p{max-width:56ch} .cuenta{display:grid;border-top:1px solid color-mix(in oklch,var(--color-papel) 22%,transparent)} .cuenta>div{display:grid;gap:4px 24px;padding:19px 0; border-bottom:1px solid color-mix(in oklch,var(--color-papel) 22%,transparent)} .cuenta .q{font-size:1.05rem;color:color-mix(in oklch,var(--color-papel) 82%,transparent)} .cuenta .n{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase; letter-spacing:var(--track-mono);color:color-mix(in oklch,var(--color-papel) 55%,transparent)} .cuenta .c{font-family:var(--font-display);font-weight:var(--peso-display); font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.08;letter-spacing:-.022em} @media (min-width:760px){.cuenta>div{grid-template-columns:1.4fr auto 1fr;align-items:baseline}} /* lo ÚNICO que entra animado en toda la página, porque aquí el argumento es la acumulación: un renglón no dice nada, cinco cayendo uno tras otro sí. La clase la pone el script, así que sin JS se ve igual. */ .cuenta.arma>div{opacity:0;transform:translateY(16px); transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)} .cuenta.arma>div.dentro{opacity:1;transform:none} /* ── filas numeradas ─────────────────────────────────────────────── */ .pasos{display:grid;border-top:1px solid var(--color-linea)} .pasos>div{display:grid;gap:2px clamp(20px,4vw,60px);padding:clamp(20px,3vw,34px) 0; border-bottom:1px solid var(--color-linea)} .pasos i{font-style:normal;font-family:var(--font-display);font-weight:var(--peso-display); font-size:clamp(1.9rem,4vw,2.9rem);line-height:.86;letter-spacing:-.03em; /* 28% de tinta daba 2.02 de contraste, y el mínimo de un texto de 30px es 3.0. A 44% da 3.2: sigue siendo claramente secundario frente al título del paso, que va en tinta plena, pero ya se lee. */ color:color-mix(in oklch,var(--color-tinta) 44%,var(--color-papel))} .pasos h3{font-size:1.28rem;font-weight:var(--peso-display-b);letter-spacing:-.018em;margin-bottom:.3rem} .pasos p{font-size:1rem;color:var(--color-tenue);max-width:54ch} @media (min-width:760px){.pasos>div{grid-template-columns:clamp(70px,7vw,104px) 1fr;align-items:start} /* El número se queda en su celda y TODO lo demás se manda a la columna dos, sin contar cuántos hijos hay. Antes decía «span 2» y el paso tenía dos hijos; al entrar la línea de «te llevas» el tercero caía en la columna del número, hecho una tira de tres palabras por renglón. Y `1 / -1` no arregla nada: con filas implícitas, -1 es la última línea de la rejilla EXPLÍCITA, que aquí no existe. */ .pasos i{grid-column:1;grid-row:1} .pasos>div>:not(i){grid-column:2}} /* ── acordeón (el FAQ de Taya) ───────────────────────────────────── */ /* El rótulo de grupo del FAQ de Taya NO va en mono chiquita: va en la SANS a 16px, en versalitas y con el tracking del cuerpo (-0.04em). Es bastante más grande de lo que uno pone por instinto, y es lo que hace que los grupos separen de verdad en vez de ser una etiqueta. */ /* Medido en Taya: de la regla de la fila anterior al rótulo hay ~50, y del rótulo a la siguiente pregunta ~38. Los 17 de relleno de la fila aportan parte de ese segundo hueco. */ .grupo{margin-top:clamp(40px,5vw,52px)} /* OJO: esto iba escrito como `.grupo > .et-grupo`, o sea atado a que alguien lo envolviera. Fuera de la landing salía sin versalitas. El rótulo es un componente y se vale solo. */ .et-grupo{display:block;font-family:var(--font-texto);font-weight:var(--peso-texto); font-size:1rem;line-height:1.1;text-transform:uppercase;letter-spacing:-.04em; color:var(--color-tinta);margin-bottom:20px} /* LAS LÍNEAS VAN SÓLO ENTRE FILAS. En el DOM de Taya la regla es un elemento hermano entre pregunta y pregunta: con seis preguntas hay cinco líneas. Ni encima de la primera ni debajo de la última. Con border-bottom en todas sobraba una al cerrar cada grupo, y con border-top en el acordeón sobraba otra pegada al rótulo. Eso era lo que lo hacía leer como otro componente. */ .acordeon details+details{border-top:1px solid var(--color-linea)} /* Medido en el FAQ de Taya: fila de 58px cerrada, pregunta de 24px con interlineado 24 (o sea 1.0) y 17 de aire arriba y abajo. Aquí el interlineado va en 1.08: Sentient tiene descendentes más largas que la Aguila de Taya, y a 1.0 una pregunta de dos renglones se toca con la siguiente. El PESO va en 400, no en el 300 de la casa: la Aguila Medium de Taya pesa 500 y al lado la Sentient Light se ve deshilachada. 400 es lo más cerca sin irse al 600, que ahí sí sería otra cosa. */ .acordeon summary,.desplegable summary{display:flex;align-items:center;justify-content:space-between;gap:20px; min-height:58px;padding:17px 0;cursor:pointer;list-style:none; font-family:var(--font-display);font-weight:400; font-size:1.5rem;line-height:1.08;letter-spacing:-.018em} .acordeon summary::-webkit-details-marker,.desplegable summary::-webkit-details-marker{display:none} .acordeon summary:focus-visible,.desplegable summary:focus-visible{outline:2px solid var(--pal-d-fondo);outline-offset:3px;border-radius:3px} .acordeon summary:hover,.desplegable summary:hover{color:var(--color-tenue)} /* EL SIGNO, sacado del DOM de Taya: una caja de 20x20 con DOS barras idénticas de 13x1; la segunda nace girada 90°. Al abrir, las dos van a 180°. La horizontal da media vuelta completa aunque termine viéndose igual, y eso es lo que hace que el icono gire en vez de encogerse. Las dos acaban acostadas y encimadas: un menos. (Antes esto eran dos pseudo-elementos y la vertical se aplastaba con scaleY(0). Se veía parecido quieto y nada parecido en movimiento.) */ .mas{flex:none;width:20px;height:20px;position:relative;color:var(--color-tinta)} .mas span{position:absolute;top:50%;left:50%;width:13px;height:1px;margin:-.5px 0 0 -6.5px; background:currentColor;transform-origin:50% 50%; transition:transform 400ms cubic-bezier(.22,1,.36,1)} .mas span:last-child{transform:rotate(90deg)} .acordeon details[open] .mas span,.desplegable[open] .mas span{transform:rotate(180deg)} /* La respuesta en Taya va a 16/17.6, o sea interlineado 1.1. Aquí va en 1.3: en español los acentos suben por encima de las mayúsculas y a 1.1 la «á» de un renglón choca con la «j» del anterior. Sigue siendo mucho más cerrado que el 1.6 del cuerpo, que es de donde viene el carácter. */ .acordeon .resp{font-size:1rem;line-height:1.3;letter-spacing:-.01em; padding:0 0 22px;max-width:62ch;color:var(--color-tinta)} /* LA ANIMACIÓN.
abre de golpe, y el de Taya no: la fila crece de 58 a 213 en unos 220ms con un ease-out fuerte (a los 63ms ya lleva el 85% del camino). Se anima la caja de la respuesta, que el script abre y cierra a mano para que el
no salte antes de tiempo. Sin JS el
sigue funcionando, sólo que sin transición. */ /* La animación cuelga del
y no del contenedor: así sirve igual para un acordeón de varios y para un desplegable suelto. */ .acordeon .caja,.desplegable .caja{overflow:hidden} details.vive .caja{height:0} details.vive[open] .caja{height:auto} details.vive .caja.anima{transition:height 240ms cubic-bezier(.22,1,.36,1)} /* ── socias y logos ──────────────────────────────────────────────── */ .tres{display:grid;gap:clamp(20px,3vw,40px);margin-top:clamp(28px,3.4vw,44px)} /* height:auto NO es de adorno. Los atributos width/height del están para reservar el hueco antes de que la imagen cargue, pero el navegador los usa como alto real: sin esto, `aspect-ratio` se ignora y el retrato sale de 98 px de ancho por los 1000 del atributo. */ .tres img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover; background:var(--color-papel-2);border-radius:12px;margin-bottom:1rem} .tres b{display:block;font-family:var(--font-display);font-weight:var(--peso-display-b); font-size:1.28rem;letter-spacing:-.018em} .tres em{font-style:normal;color:var(--color-tenue);font-size:.95rem} @media (min-width:760px){.tres{grid-template-columns:repeat(3,minmax(0,1fr))}} /* EN TELÉFONO, UNA FICHA POR RENGLÓN. Con una sola columna, cada retrato ocupaba el ancho entero en 3/4: 456 px de alto en un teléfono de 390, y tres seguidos son metro y medio de fotos para leer seis renglones de texto. Aquí el retrato es lo que es -una miniatura que pone cara al nombre- y el nombre manda. */ @media (max-width:759px){ /* Una ficha por renglón: retrato a la izquierda y el bloque de texto a la derecha. El nombre y el cargo van envueltos en .quien porque si son dos hijos sueltos de la rejilla, el cargo se va a la fila de abajo y aparece debajo de la foto; y si se le pide a la foto que ocupe las dos filas, son las filas las que crecen hasta el alto de la foto y queda un agujero entre el nombre y el cargo. Con el bloque entero como un solo hijo, no hay filas que repartir. */ .tres{gap:0;margin-top:26px} .tres > div{display:flex;gap:16px;align-items:center;padding:16px 0; border-bottom:1px solid var(--color-linea)} .tres > div:first-child{border-top:1px solid var(--color-linea)} .tres img{flex:none;width:clamp(92px,26vw,116px);aspect-ratio:4/5; margin-bottom:0;border-radius:10px} .tres .quien{min-width:0} .tres b{font-size:1.1rem;line-height:1.16} .tres em{font-size:.88rem;line-height:1.35;display:block;margin-top:4px} } /* minmax(0,1fr) y NO 1fr pelado. Un item de grid tiene min-width:auto, o sea que no encoge por debajo de su contenido; con una imagen dentro y padding en porcentaje, las columnas se niegan a achicarse y la rejilla se desborda por la derecha, cortando la última columna. Y no se veía venir: el overflow-x:clip del body lo esconde, así que scrollWidth reporta que todo cabe. Hay que medir el elemento, no el scroll de la página. */ .logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--color-linea); border:1px solid var(--color-linea);margin-top:1.2rem} .logos div{background:var(--color-papel);aspect-ratio:3/2;display:grid;place-items:center;padding:18%} /* multiply ya se come el fondo blanco del archivo; bajarles además la opacidad los deja como si se hubieran exportado mal */ .logos img{mix-blend-mode:multiply;max-height:100%;object-fit:contain;filter:grayscale(1)} @media (min-width:640px){.logos{grid-template-columns:repeat(6,minmax(0,1fr))}.logos div{padding:22%}} /* ── contacto ────────────────────────────────────────────────────── */ /* LOS CAMPOS son un componente, no una parte de la sección de contacto. Estaban escritos como `.contacto input`, así que fuera de esa sección el formulario salía con los estilos por defecto del navegador. Se vio en /lab/web/, que es exactamente para lo que sirve tener el lab. */ .campos{display:grid;gap:14px} .campos label{display:grid;gap:6px;font-family:var(--font-mono);font-size:.68rem; letter-spacing:var(--track-mono);text-transform:uppercase; color:color-mix(in oklch,var(--color-papel) 62%,transparent)} .campos input,.campos textarea{font:inherit;font-family:var(--font-texto);font-size:1rem; color:var(--color-papel);background:color-mix(in oklch,var(--color-papel) 8%,transparent); border:1px solid color-mix(in oklch,var(--color-papel) 26%,transparent); padding:.8rem .9rem;border-radius:6px;width:100%} .campos input::placeholder,.campos textarea::placeholder{color:color-mix(in oklch,var(--color-papel) 42%,transparent)} /* el foco NO se quita: es lo único que ve quien navega con teclado */ .campos input:focus-visible,.campos textarea:focus-visible{outline:2px solid var(--d-azul-papel);outline-offset:1px} .campos textarea{min-height:120px;resize:vertical} .campos .dos{display:grid;gap:14px} @media (min-width:640px){.campos .dos{grid-template-columns:1fr 1fr}} .contacto{display:grid;gap:clamp(30px,5vw,72px)} .contacto .campos{margin-top:1.8rem} .datos{display:grid;gap:20px;align-content:start} .datos dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:var(--track-mono); text-transform:uppercase;color:color-mix(in oklch,var(--color-papel) 62%,transparent);margin-bottom:5px} .datos dd{font-size:1.05rem} .datos a{text-decoration:none;border-bottom:1px solid color-mix(in oklch,var(--color-papel) 30%,transparent)} .aviso{font-size:.85rem;color:color-mix(in oklch,var(--color-papel) 62%,transparent);max-width:44ch} @media (min-width:860px){.contacto{grid-template-columns:1.2fr 1fr}} /* ── pie (el de Taya) ────────────────────────────────────────────── */ footer{border-top:1px solid var(--color-linea);padding:clamp(48px,7vw,86px) 0 clamp(34px,4vw,52px)} /* El nombre va en una sola linea y no se parte, asi que el tamano tiene que caber en el ancho: signo mas medianil mas nombre miden unas diez veces y media el cuerpo. A 2rem fijos, en una pantalla de 320 el pie medida 330 y empujaba el documento entero. El termino de en medio es el que hace que crezca con la pantalla en lugar de saltar. */ footer .marca-grande{font-family:var(--font-display);font-weight:var(--peso-display); font-size:clamp(1.55rem,8.2vw,3rem);letter-spacing:.01em;line-height:1;max-width:100%} footer .frase{font-family:var(--font-display);font-weight:var(--peso-display); font-size:clamp(1.7rem,4.2vw,2.35rem);line-height:1.18;letter-spacing:-.024em; max-width:16ch;margin-top:.5rem} .columnas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px; margin-top:clamp(40px,5.5vw,72px)} @media (min-width:640px){.columnas{grid-template-columns:repeat(3,minmax(0,1fr))}} .columnas h4{font-family:var(--font-texto);font-weight:var(--peso-texto);font-size:.82rem; text-transform:uppercase;letter-spacing:.02em;color:var(--color-tenue);margin-bottom:14px} .columnas ul{list-style:none;display:grid;gap:11px} .columnas a{text-decoration:none;font-size:.95rem} .columnas a:hover{color:var(--color-tenue)} .cierre{margin-top:clamp(38px,5vw,64px);text-align:center;font-size:.78rem;color:var(--color-tenue)} /* Quien pidió menos movimiento no recibe el script, así que --luz nunca se escribe y el acercamiento no existe. Para esa persona el hover tiene que bastar solo, y sin transiciones. */ @media (prefers-reduced-motion:reduce){ .cta,.cta::after{transition:none!important} .cta:hover::after{opacity:.7} .portada canvas{opacity:.55} .hamb span,.menu,.acordeon .caja{transition:none!important} .cuenta.arma>div{opacity:1;transform:none;transition:none} .hamb span,.mas{transition:none} } /* ── FILA ESCALONADA QUE SE ALINEA AL BAJAR ──────────────────────── El patrón de Tayá. El desnivel vive aquí, no en el script: cada tarjeta trae su --esc y el script sólo mueve --avance de 0 a 1. Sin script queda el escalonado quieto, que también es una composición válida, y no un montón de tarjetas caídas. El escalonado es de números primos a propósito. Con 0-40-80-120 se lee como una diagonal, que es otra cosa; con alturas que no hacen serie se lee como una fila que todavía no acomoda. */ .escalonadas{display:grid;gap:clamp(16px,2.2vw,26px)} @media (min-width:860px){ .escalonadas{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); align-items:start;padding-bottom:var(--esc-max,96px)} .escalonadas > *{transform:translateY(calc(var(--esc,0px) * (1 - var(--avance,1)))); will-change:transform} .escalonadas > :nth-child(1){--esc:0px} .escalonadas > :nth-child(2){--esc:74px} .escalonadas > :nth-child(3){--esc:31px} .escalonadas > :nth-child(4){--esc:96px} .escalonadas > :nth-child(5){--esc:19px} .escalonadas > :nth-child(6){--esc:58px} } @media (prefers-reduced-motion:reduce){ .escalonadas > *{transform:none} } /* la tarjeta de la fila: foto a sangre, texto encima abajo */ .tarj-foto{position:relative;border-radius:12px;overflow:hidden;isolation:isolate; aspect-ratio:var(--prop,3/4);display:block;text-decoration:none;color:var(--color-papel)} .tarj-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform 620ms var(--circ-sal,ease)} .tarj-foto:hover img{transform:scale(1.032)} /* DOS VELOS, Y EL SEGUNDO VA PEGADO AL TEXTO. El de la tarjeta entera hace el ambiente. El que de verdad sostiene la lectura es el de abajo, que empieza donde empieza el bloque de texto y no donde empieza la tarjeta: así el rótulo, que es lo más chico y lo más alto del bloque, cae siempre en la parte honda. Medido escondiendo el texto y fotografiando su recuadro: el rótulo estaba entre 1.00 y 2.10 contra un mínimo de 4.5, o sea invisible. */ .tarj-foto::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(6,0,79,.04) 0%,rgba(6,0,79,.22) 46%,rgba(6,0,79,.62) 100%)} .tarj-foto .cont{position:absolute;left:0;right:0;bottom:0;z-index:2; padding:clamp(14px,2vw,22px);display:grid;gap:6px;isolation:isolate} .tarj-foto .cont::before{content:"";position:absolute;z-index:-1; left:0;right:0;bottom:0;top:calc(-1 * clamp(28px,5vw,54px)); background:linear-gradient(180deg,rgba(6,0,79,0) 0%,rgba(6,0,79,.72) 34%,rgba(6,0,79,.94) 100%)} /* EL COLOR, QUE ERA EL PROBLEMA DE VERDAD. `.rot` nace gris (--color-tenue) porque casi siempre va sobre papel. Encima de una fotografía ese gris da 2.6 contra un mínimo de 4.5: es el rótulo que no se leía. Aquí manda el papel, y sin opacidad, que a 10px cada décima cuenta. */ .tarj-foto .rot{font-family:var(--font-mono);font-size:.72rem;letter-spacing:var(--track-mono,.09em); text-transform:uppercase;color:var(--color-papel)} .tarj-foto h3{font-family:var(--font-display);font-weight:400; font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.08;letter-spacing:-.022em} .tarj-foto p{font-size:.92rem;line-height:1.38;max-width:34ch; color:color-mix(in oklch,var(--color-papel) 90%,transparent)} /* ── TRES COLUMNAS CORTAS ────────────────────────────────────────── Para lo que se lee de un vistazo y no se lee dos veces: qué es, para quién, cómo empieza. Sin tarjeta ni caja, sólo un filete arriba, que es lo que ya hace la retícula del resto de la página. */ .tres-cortas{display:grid;gap:clamp(22px,3vw,34px);margin-top:clamp(26px,4vw,42px)} @media (min-width:760px){.tres-cortas{grid-template-columns:repeat(3,minmax(0,1fr))}} .tres-cortas > div{border-top:1px solid var(--color-linea);padding-top:14px} .tres-cortas h3{font-family:var(--font-mono);font-size:.7rem;font-weight:400; letter-spacing:var(--track-mono,.09em);text-transform:uppercase;color:var(--color-tenue); margin-bottom:9px} .tres-cortas p{font-size:1.0625rem;line-height:1.48;max-width:36ch;text-wrap:pretty} /* ── LOS CASOS ───────────────────────────────────────────────────── Una lista y no tarjetas: son situaciones para reconocerse, y una tarjeta invita a compararlas, que es justo lo contrario. */ .casos{list-style:none;margin:clamp(24px,3.4vw,38px) 0 0;padding:0;display:grid; gap:0;border-top:1px solid var(--color-linea)} .casos li{padding:clamp(16px,2.2vw,22px) 0;border-bottom:1px solid var(--color-linea); font-size:clamp(1.05rem,1.55vw,1.22rem);line-height:1.45;max-width:62ch;text-wrap:pretty} .casos li b{font-weight:var(--peso-display-b,600);font-family:var(--font-display); font-size:1.06em;letter-spacing:-.012em} /* ── LO QUE NO ES ────────────────────────────────────────────────── La misma lista de .casos, pero estas cuatro son negaciones, y una negación necesita que se vea de lejos qué se está negando. El filete de la izquierda separa el «no» del resto sin tener que gritarlo con un icono de prohibido. */ .casos.no-es li{border-left:2px solid var(--color-linea);padding-left:clamp(14px,1.8vw,20px)} .casos.no-es li b{display:block;margin-bottom:3px} /* ── LO QUE TE LLEVAS DE CADA PASO ───────────────────────────────── Un paso que sólo dice qué se hace deja al lector calculando qué gana. Esta línea lo dice. Va en mono y en el color de rótulo para que se lea como ficha y no como una segunda oración del párrafo. */ .pasos .entrega{margin-top:9px;font-size:.98rem;line-height:1.45;color:var(--color-tinta); max-width:54ch} .pasos .entrega span{display:inline-block;font-family:var(--font-mono);font-size:.66rem; font-weight:var(--peso-mono);letter-spacing:.09em;text-transform:uppercase; color:var(--color-tenue);margin-right:9px;transform:translateY(-1px)} .nota-metodo{margin-top:clamp(22px,3vw,34px);max-width:64ch;color:var(--color-tenue); font-size:1rem;line-height:1.5;text-wrap:pretty} /* ── LA PUERTA DE RECURSOS HUMANOS ───────────────────────────────── Va dentro de «cuándo nos buscan» y no en sección aparte, porque es la segunda entrada al mismo servicio y no otro servicio. El fondo de papel-2 la separa de la lista de situaciones sin abrir un capítulo. */ .puerta-rh{margin-top:clamp(34px,4.6vw,58px);background:var(--color-papel-2); border-radius:16px;padding:clamp(24px,3.4vw,42px)} .puerta-rh .cabeza{margin-bottom:clamp(14px,2vw,22px)} .puerta-rh > .cabeza h3{font-family:var(--font-display);font-weight:var(--peso-display); font-size:clamp(1.45rem,2.9vw,2.1rem);line-height:1.1;letter-spacing:-.024em;max-width:22ch} .puerta-rh .tres-cortas{margin-top:0} .puerta-rh .tres-cortas > div{border-top-color:color-mix(in oklch,var(--color-tinta) 16%,transparent)} /* ── LA SALIDA AL CUADERNO ───────────────────────────────────────── Las tres tarjetas llevan a tres artículos. Quien quiera los demás necesita una puerta, y antes no había ninguna. */ .mas-cuaderno{margin-top:clamp(22px,3vw,32px)} .mas-cuaderno a{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em; text-decoration:none;border-bottom:1px solid var(--color-linea);padding-bottom:3px} .mas-cuaderno a:hover{border-bottom-color:var(--color-tinta)} /* la frase que carga el peso del interstitial va en tinta plena */ .centro .fuerte{color:var(--color-tinta);font-family:var(--font-display); font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.3;letter-spacing:-.018em;max-width:26ch} .centro .rot{color:var(--color-tenue)} /* ── EL REMATE ───────────────────────────────────────────────────── Una frase sola que cierra una sección. No es un titular: llega después de la demostración y por eso puede ser corta y afirmativa. Va centrada porque no encabeza nada, remata. */ .remate{margin:clamp(34px,6vw,62px) auto 0;max-width:20ch;text-align:center; font-family:var(--font-display);font-weight:var(--peso-display); font-size:clamp(1.7rem,4.2vw,2.8rem);line-height:1.08;letter-spacing:-.028em; text-wrap:balance} .remate b{font-weight:var(--peso-display-b)} /* ── LO QUE SE OYE ───────────────────────────────────────────────── Cinco casos que van cambiando, en la parte alta de la portada. NO LLEVA TARJETA. La primera versión iba en un panel de vidrio esmerilado, con blur, borde claro de un píxel y esquinas redondeadas. Eso es el componente más genérico que hay en la web ahora mismo, y además tiraba a la basura el sistema: aquí la estructura la hacen filetes de un píxel y rótulos en mono, no paneles flotantes. Así que el texto va sobre el agua, con un filete encima, igual que el par rótulo + titular de cualquier sección de la página. SIN SALTO DE ALTURA: los cinco apilados en la misma celda, la caja mide lo que mide el más largo desde el primer cuadro. SE PUEDE PARAR: se detiene con el cursor encima, con el foco de teclado y al tocar una marca, que además la deja fija ahí. */ /* SIN FILETE PROPIO. Lo tenía, y en un teléfono se juntaba con el del pie de la portada y con las marcas del paso: tres rayas apiladas en poco espacio, que se lee como suciedad y no como estructura. El caso se separa con aire, que es más limpio y no compite con nada. */ .dicho{align-self:start;justify-self:start;max-width:min(34rem,100%); color:var(--color-papel)} /* 74% daba 4.06 en un teléfono, donde el agua sale más clara que en escritorio; el mínimo de un texto de 10px es 4.5. El agua cambia con el ancho, así que este rótulo necesita margen, no el valor justo. */ /* EL RÓTULO DE ARRIBA SE FUE. El bloque traía tres textos: un rótulo en mono arriba, la escena en serif y la factura en mono abajo. Dos rótulos en versalitas apretando una frase hacen que el conjunto se lea como ruido y no como una idea. Queda la escena y su factura, que son el argumento; que hay varias lo dicen los puntos. */ /* LA CAJA SE DESLIZA, NO SE CRUZA. Era una pila de cinco encimadas y sólo cambiaba cuál estaba encendida. Se veía algo moverse, uno intentaba arrastrarlo y el gesto se lo quedaba la página, que es exactamente lo que ya había pasado con la tira de logos. Ahora es un scroller de verdad con imán: el arrastre es el del sistema, con su inercia y su frenada. `overflow-y:hidden` no es adorno: poner `overflow-x:auto` vuelve scrolleable TAMBIÉN el eje Y y la caja se puede empujar dos píxeles hacia arriba. Y `overscroll-behavior-x:contain` evita que pasarse de largo al deslizar dispare el «atrás» del navegador. */ .dicho .pila{display:flex;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;overscroll-behavior-x:contain; scrollbar-width:none;cursor:grab} .dicho .pila::-webkit-scrollbar{display:none} .dicho .pila.agarrando{cursor:grabbing;scroll-snap-type:none} .dicho .pila:focus-visible{outline:2px solid var(--color-papel);outline-offset:6px;border-radius:4px} .dicho .caso{flex:0 0 100%;min-width:0;scroll-snap-align:start; display:grid;gap:6px;align-content:start} .dicho .caso q{quotes:none;font-family:var(--font-display);font-weight:var(--peso-display); font-size:clamp(1.12rem,1.8vw,1.42rem);line-height:1.24;letter-spacing:-.018em;text-wrap:pretty} .dicho .caso em{font-style:normal;font-family:var(--font-mono);font-size:.66rem; letter-spacing:var(--track-mono,.09em);text-transform:uppercase;color:var(--d-hielo)} /* Puntos y no filetes. Como filetes no se leían como control: en escritorio parecían decoración y nadie adivina que se pueden tocar. Un punto sí se reconoce, crece al pasarle encima y tiene su área de toque de 24px aunque el punto mida seis. */ .dicho .puntos{display:flex;gap:2px;margin-top:16px;margin-left:-8px} .dicho .puntos button{appearance:none;border:0;background:none;cursor:pointer; width:24px;height:24px;display:grid;place-items:center;padding:0} .dicho .puntos button::before{content:"";width:6px;height:6px;border-radius:50%; background:color-mix(in oklch,var(--color-papel) 34%,transparent); transition:background .3s var(--circ,ease),transform .3s var(--circ,ease)} .dicho .puntos button:hover::before{background:color-mix(in oklch,var(--color-papel) 70%,transparent); transform:scale(1.35)} .dicho .puntos button[aria-pressed="true"]::before{background:var(--d-hielo);transform:scale(1.35)} .dicho .puntos button:focus-visible{outline:2px solid var(--d-hielo);outline-offset:-2px;border-radius:50%} @media (prefers-reduced-motion:reduce){.dicho .caso{transition:none}} /* ── LAS MARCAS DE LA PORTADA ────────────────────────────────────── Seis y quietas. Se probó con las dieciocho deslizándose y Roberto lo cortó: pocas y las más reconocibles. Tiene razón, una marca quieta se lee más que una que pasa de largo. EL ARCHIVO ERA EL PROBLEMA, NO LA IDEA. Los originales son JPEG con la marca oscura sobre blanco: sobre papel funcionan con multiply, sobre el azul no hay manera. Se generaron los dieciocho en `deck/img/logos/blanco/`, blanco puro con el alfa sacado de la oscuridad del original y recortados a la caja de su tinta, para que con un alto común todos pesen ópticamente igual. Sirven ahora sobre cualquier fondo, y también para el deck en negativo, redes y LinkedIn. */ /* SIN FILETE, TAMBIÉN AQUÍ. El filete pretendía separar el botón de las marcas y lo que hacía era partir el fondo del hero con una raya a lo ancho de toda la ventana. Lo que separa es el aire y el rótulo. */ .confian{padding-top:clamp(18px,4.2vw,58px);padding-bottom:clamp(16px,2.4vw,30px)} .confian .w{display:grid;gap:clamp(13px,1.6vw,22px);justify-items:start} .confian i{font-style:normal;font-family:var(--font-mono);font-size:.62rem; letter-spacing:var(--track-mono,.09em);text-transform:uppercase; color:color-mix(in oklch,var(--color-papel) 78%,transparent)} .confian ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap; gap:clamp(18px,3vw,44px);align-items:center} /* LAS SEIS, REPARTIDAS A LO ANCHO. Iban en fila desde la izquierda y se paraban a media pantalla: en un monitor grande quedaba medio muro y medio vacío, que es lo que hace que un muro de clientes se vea pobre. En seis columnas iguales la banda ocupa el ancho del texto y cada marca tiene su sitio. */ @media (min-width:701px){ .confian .w{justify-items:stretch} .confian ul{display:grid;grid-template-columns:repeat(6,1fr); justify-items:center;align-items:center;gap:clamp(20px,2.4vw,40px)} /* La primera a ras del rótulo y la última a ras del margen. Centradas en su columna las de los extremos quedaban metidas hacia dentro y la banda no cuadraba con el texto de al lado, que es de lo poco que se nota sin saber por qué. */ .confian li:first-child{justify-self:start} .confian li[data-m="worldvision"]:not([aria-hidden]){justify-self:end} } /* La altura base, y la corrección de cada una. Los cuadrados (pwc, tec) se ven chicos a la misma altura que un wordmark, y Cuervo, que mide tres veces su alto de ancho, se come a las demás. Los números salieron de mirar la banda, no de una fórmula. */ .confian li{--k:1} .confian li[data-m="pwc"],.confian li[data-m="tec"]{--k:1.24} .confian li[data-m="oxxo"]{--k:.98} .confian li[data-m="worldvision"]{--k:.92} .confian li[data-m="cuervo"]{--k:.76} .confian img{display:block;height:calc(clamp(30px,3.1vw,50px) * var(--k)); width:auto;max-width:100%;opacity:.92;object-fit:contain} /* EN TELÉFONO, EL MURO NO CABE. Seis marcas en fila envuelven a dos renglones y el último queda solo, que es justo lo que hace que un muro de logos se vea pobre. En pantalla chica la tira desfila y se ve más grande; en escritorio siguen quietas, que es como se pidieron. Y desfila SOBRE UN SCROLLER, no sobre un transform. Con transform, el dedo pasa por encima y no agarra nada: se ve algo moviéndose, uno lo intenta arrastrar y el gesto se lo queda la página. Aquí la tira es un scroller de verdad, así que el arrastre es el del sistema, con su inercia, y el guión sólo empuja el scrollLeft cuando nadie la está tocando. overflow-y:hidden es obligatorio: poner overflow-x:auto convierte TAMBIÉN el eje Y en scrolleable y la tira se puede empujar hacia arriba dos píxeles. */ @media (min-width:701px){ .confian li[aria-hidden="true"]{display:none} } @media (max-width:700px){ .confian{overflow:hidden;padding-top:clamp(26px,5vh,40px)} /* LA TIRA SANGRA Y SE DESVANECE. Antes el scroller empezaba y terminaba en el margen del contenedor: las marcas aparecían y desaparecían de golpe contra una línea invisible, y a la izquierda se veía como si algo las cortara. Ahora el scroller cruza toda la ventana (margen negativo del ancho del margen, y ese mismo ancho de padding adentro, para que la primera marca siga arrancando alineada con el rótulo) y una máscara apaga los dos cantos. La máscara va en el scroller, así que se apaga en el borde de lo que se ve y no en el del contenido: acompaña el desplazamiento sola. */ /* justify-self:stretch y min-width:0 no son adorno: .confian .w es una rejilla con justify-items:start, así que la tira se medía por su contenido (626 px en una pantalla de 375) y se salía del cuadro. El recorte lo escondía, pero el canto derecho de la máscara quedaba fuera de la pantalla y el desplazamiento contaba sobre un ancho que no era el que se ve. */ .confian ul{--margen:clamp(24px,4vw,48px);--fundido:clamp(26px,9vw,54px); justify-self:stretch;min-width:0; flex-wrap:nowrap;gap:34px; margin-inline:calc(var(--margen) * -1);padding-inline:var(--margen); overflow-x:auto;overflow-y:hidden; overscroll-behavior-x:contain;touch-action:pan-x; scrollbar-width:none;-ms-overflow-style:none; scroll-behavior:auto; /* el guión mueve scrollLeft cuadro a cuadro */ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fundido), #000 calc(100% - var(--fundido)),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 var(--fundido), #000 calc(100% - var(--fundido)),transparent 100%)} .confian ul::-webkit-scrollbar{display:none} .confian li{flex:none} /* la misma corrección óptica que en escritorio, sobre la altura de la tira: si no, en el desfile Cuervo pasa como un tren y el Tec como un sello */ .confian img{height:calc(40px * var(--k))} } /* ── LA LÍNEA DE ENTRADA ────────────────────────────────────────────── Al fusionar secciones hacía falta algo entre una cabecera completa y un párrafo cualquiera: una frase que anuncie el bloque que viene sin volver a montar rótulo, titular y bajada. Es lo que permitió pasar de trece secciones a siete sin perder el hilo. */ .entrada{font-family:var(--font-display);font-weight:var(--peso-display); font-size:clamp(1.25rem,2.1vw,1.72rem);line-height:1.24;letter-spacing:-.022em; max-width:30ch;margin:clamp(46px,6vw,74px) 0 clamp(22px,2.6vw,32px); color:var(--color-tenue)} .entrada b{font-weight:var(--peso-display-b);color:var(--color-tinta)} .seccion.oscuro .entrada{color:color-mix(in oklch,var(--color-papel) 72%,transparent)} .seccion.oscuro .entrada b{color:var(--color-papel)} /* ── EL DESPLEGABLE ─────────────────────────────────────────────────── Dos sitios de la página, y sólo dos: el catálogo de bloques y lo que pide un área de compras. Los dos son material de CONSULTA, no argumento: quien ya se convenció los quiere, quien no, no. Esconder argumento detrás de un clic sería el error: quien dice «es mucho texto» está hojeando, y un desplegable empeora el hojeo porque obliga a abrir para saber si te interesa. Por eso el resto de la página sigue abierta. */ .desplegable{display:block;margin-top:clamp(40px,5vw,60px); border-top:1px solid var(--color-linea);border-bottom:1px solid var(--color-linea)} .desplegable summary{color:var(--color-tinta)} .desplegable .caja > .tenue{max-width:62ch;padding-top:2px} .desplegable .caja > :last-child{padding-bottom:26px} .desplegable .grupo{margin-top:clamp(26px,3vw,36px)} /* la lista de bloques: el nombre y lo que trae, sin convertir cada uno en un subtítulo más de los que ya pesan en la página */ .bloques{display:grid;gap:0;margin:10px 0 0} .bloques dt{font-family:var(--font-display);font-weight:var(--peso-display-b); font-size:1.05rem;letter-spacing:-.016em;padding-top:16px} .bloques dd{margin:4px 0 0;color:var(--color-tenue);max-width:62ch; padding-bottom:16px;border-bottom:1px solid var(--color-linea)} .bloques dd:last-child{border-bottom:0} /* ── WHATSAPP FLOTANTE ──────────────────────────────────────────── EL VERDE OFICIAL DE WHATSAPP (#25D366), no el de la marca. Este botón no es un elemento de marca: es una pieza de terceros, como el logo de una tarjeta o el badge de una tienda de apps. Esas no se repintan en los colores de la casa. Se probó en navy (desaparece sobre el hero, que es azul) y en el verde de la marca (#2dbc94), que está a 21° de tono del de WhatsApp: lo bastante cerca para parecer el mismo mal reproducido y lo bastante lejos para verse equivocado. Medido: el verde de la marca no aparece en ninguna otra parte de la landing, así que no hay dos verdes conviviendo y no había razón para ceder el reconocimiento. EL GLIFO VA EN TINTA, NO EN BLANCO. El blanco es el oficial, pero sobre este verde da 1.98:1 y no llega ni al 3:1 que pide un objeto gráfico. El azul tinta da 9.45:1, y de paso ata el botón a la casa sin tocar el verde, que es lo que hace el reconocimiento. Vive por DEBAJO de la cortina (z-index 200) para no asomar mientras carga, y por encima de todo lo demás. */ #wasap{position:fixed;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px); z-index:120;display:inline-flex;align-items:center;gap:0; height:56px;padding:0 16px;border-radius:999px; background:var(--wasap, #25D366);color:var(--pal-d-fondo); text-decoration:none;font-family:inherit;font-size:.9rem; font-weight:var(--peso-texto-b);line-height:1;white-space:nowrap; box-shadow:inset 0 1px 0 rgba(251,251,250,.3), 0 6px 22px rgba(6,0,79,.3); transition:background-color 260ms var(--circ), box-shadow 150ms var(--circ-sal), transform 90ms var(--circ-sal)} #wasap svg{width:24px;height:24px;flex:none} /* la etiqueta se despliega midiendo su propio ancho, no con un ancho inventado: `max-width` en ch se queda corto o largo según la fuente */ #wasap span{display:inline-block;max-width:0;overflow:hidden;opacity:0; transition:max-width 300ms var(--circ), opacity 200ms var(--circ), margin-left 300ms var(--circ)} #wasap:hover span,#wasap:focus-visible span{max-width:11rem;opacity:1;margin-left:10px} /* al pasar el cursor aclara, no oscurece: en un botón claro oscurecer se lee como apagado. Es el mismo verde subido de luz, no otro color. */ #wasap:hover{background-color:#3ee07a} #wasap:active{transform:scale(.985); box-shadow:inset 0 1px 0 rgba(251,251,250,.12), 0 2px 8px rgba(6,0,79,.26)} #wasap:focus-visible{outline:2px solid var(--pal-d-fondo);outline-offset:3px} /* en teléfono no hay cursor que anticipe: círculo limpio y ya */ @media (max-width:720px){ #wasap{height:52px;padding:0 14px} #wasap span{display:none} } @media (prefers-reduced-motion:reduce){ #wasap,#wasap span{transition:none} } @media print{ #wasap{display:none} } /* ── EL PESO DE LA NEGRITA DEL DISPLAY, EN EL SITIO ─────────────── Sentient NO TIENE 600. Sus pesos reales son 200, 300, 400, 500 y 700. El sitio le pedía a Fontshare `sentient@300,400,600` y Fontshare devolvía sólo 300 y 400, porque el 600 no existe: todo lo que pedía 600 caía en 400, y así se diseñó y así se aprobó. Al bajar las caras al servidor declaré el archivo Bold cubriendo «600 a 700», y esos mismos titulares saltaron de 400 a Bold de golpe. En «No entenderse SALE CARO» a 96px eso no es un matiz. Aquí se restituye lo que había. Los decks NO pasan por este archivo y se quedan como estaban: ellos sí pedían la familia entera, así que su 600 siempre resolvió al Bold de verdad, y ahí funciona. */ :root{--peso-display-b:400}