/* ============================================================================ LANDING DE ALMAGO — hoja de estilo ---------------------------------------------------------------------------- Dirección: DIRECCION_DISENO_2026-08-24.md, del Director. Minimalismo editorial sobre BLANCO PURO. «Producto complejo. Experiencia simple.» POR QUÉ ESTA HOJA ES AUTÓNOMA, y no hereda el canon del ecosistema: la página ya no carga marca/sistema.css ni marca/componentes.css. Aquellos pintan suelo topo, fichas de vidrio y resplandor cálido — justo lo que esta dirección deroga («fondo blanco dominante», «no beige», «sin gradientes decorativos, texturas, formas flotantes ni exceso de sombras»). Cargarlos y después taparlos sería pelearse con ellos en cada regla. La letra de la marca —Satoshi— sí se conserva: se declara aquí abajo apuntando al mismo archivo de marca/fuentes/, así que la marca no se bifurca. LO QUE NO ESTÁ AQUÍ: el color de los avatares y sus escenas. Son los protagonistas visuales y se desarrollan aparte; esta hoja es el escenario limpio que les deja el centro. Por eso los huecos se ven como andamio declarado —punteado gris sobre casi-blanco— y no como ilustración. ========================================================================== */ /* ── LA LETRA ──────────────────────────────────────────────────────────────── La dirección pide «SF Pro como referencia visual, Inter si se requiere una opción web ampliamente compatible». Se usa SATOSHI, que es la equivalente que la marca ya firmó y que ya vive en el repo: sans geométrica moderna, variable de 300 a 900, excelente en tamaños grandes. Cero dependencia nueva que descargar. El respaldo cae a SF Pro en Mac y a Inter/system-ui fuera. */ @font-face { font-family: 'Satoshi'; src: url('/static/landing/fuentes/Satoshi-Variable.woff2') format('woff2-variations'); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('/static/landing/fuentes/Satoshi-VariableItalic.woff2') format('woff2-variations'); font-weight: 300 900; font-style: italic; font-display: swap; } /* ── LOS TOKENS ──────────────────────────────────────────────────────────── */ :root { /* Color. Paleta reducida a propósito: blanco, dos grises de letra, dos de línea, y la marca SOLO como acento. */ --papel: #FFFFFF; /* fondo de toda la página */ --tinta: #1D1D1F; /* titulares y letra principal — negro suavizado */ --tinta-suave: #6E6E73; /* letra de apoyo */ --linea: #E5E5E5; /* separación entre secciones, cuando hace falta */ --borde: #D2D2D7; /* borde de tarjeta y de botón secundario */ --nada: #FAFAFA; /* casi-blanco: solo andamio de hueco de visual */ /* La marca. #3A7AFE es el azul frío del sistema de ALMAGO. --marca-fuerte es el MISMO tono oscurecido, y existe por una razón medible: blanco sobre #3A7AFE da ~3.6:1 y no alcanza el 4.5:1 que pide texto normal. El botón principal lleva texto blanco, así que usa el tono fuerte (~5.4:1). El claro se queda para filetes, puntos y estados. */ --marca: #3A7AFE; --marca-fuerte: #1F5FE0; --marca-honda: #1A4FBE; /* solo hover del botón principal */ /* LAS DOS VOCES DE LA FAQ — clara la pregunta, negra la respuesta, como en la referencia que firmó el Director el 2026-08-24. ⚠ LA CLARA NO ES BLANCA, y ahí está la única traducción que hubo que hacer: en la referencia la burbuja es blanca y se ve porque el fondo es crema. Esta página es blanco puro por dirección, así que una burbuja blanca sin sombra sencillamente no existe —y sombra no puede llevar, que la dirección prohíbe el «exceso de sombras» y aquí serían diez. El gris resuelve las dos cosas de un golpe. La negra usa la MISMA tinta de los titulares, no un negro nuevo: la paleta no crece por esto. */ --burbuja-pregunta: #F2F2F4; --burbuja-pregunta-viva: #E9E9EC; /* al pasar el cursor */ --burbuja-respuesta: var(--tinta); /* Letra */ --letra: 'Satoshi', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif; /* Aire. La dirección pide 140–240 px entre secciones en escritorio; el clamp lo sostiene y lo baja con la pantalla sin que se comprima. */ --aire-seccion: clamp(88px, 13vw, 220px); --aire-bloque: clamp(40px, 5vw, 80px); --aire-titulo: clamp(20px, 2.2vw, 32px); /* Medidas */ --franja: 1240px; /* ancho máximo de la caja */ --margen: clamp(20px, 6vw, 120px); --texto: 900px; /* ancho máximo de contenido textual */ --titular: 760px; /* más angosto: controla los saltos de línea */ --curva: 14px; --curva-chica: 10px; /* LO VISUAL CABE EN LA PANTALLA, NO AL REVÉS (Director, 2026-08-24: «se debe de ver en la página el texto y el visual en la misma página, no debo de leer y bajar para ver el visual»). VAN EN `svh` A PROPÓSITO. Lo que le sobra a una sección después del texto depende del ALTO DE LA PANTALLA, no del ancho. Un tope en px vuelve a dejar el visual debajo del doblez en cuanto la ventana es más baja que aquella en la que se ajustó. SON DOS PORQUE HAY DOS SITUACIONES: --visual el visual va DEBAJO del texto → comparte pantalla con él. --visual-lado el visual va AL LADO → no comparte con nada. ⚠ EL px VA DENTRO DEL `min()`, y no es adorno: es lo que hace que la foto larga del medidor siga siendo honesta. Ahí la página vive en un iframe tan alto como ella misma, así que `svh` vale miles de px; con el px dentro del `min()`, gana el px y lo medido sigue pareciéndose a lo que ve una persona. Cualquier `svh` que se agregue después, igual. */ --visual: min(46svh, 420px); --visual-lado: min(78svh, 620px); } /* ── EL SUELO ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 136px; /* la barra pegajosa no tapa el destino */ } body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--letra); font-weight: 400; font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { max-width: 100%; height: auto; display: block; } p, h1, h2, h3, ul, ol, li { margin: 0; } /* El
    ya no lo usa nadie: entró por los tres pasos numerados de «cómo empezar», y esa sección se volvió DOS CAMINOS el mismo día. Se queda porque el reset debe cubrir las dos listas o la primera
      que alguien escriba va a llegar con viñetas y sangría de navegador. */ ul, ol { padding: 0; list-style: none; } a { color: inherit; } /* Solo para lector de pantalla */ .vo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .saltar { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--tinta); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--curva-chica) 0; font-size: 15px; font-weight: 600; text-decoration: none; } .saltar:focus { left: 0; } :focus-visible { outline: 2px solid var(--marca-fuerte); outline-offset: 3px; border-radius: 4px; } /* ── LA CAJA ─────────────────────────────────────────────────────────────── */ .franja { width: 100%; max-width: var(--franja); margin-inline: auto; padding-inline: var(--margen); } .franja--angosta { max-width: 860px; } /* La sección. El aire es lo que las separa: sin fondo de color, sin filete automático, sin tarjeta envolvente. Cada una es un momento nuevo. */ .seccion { padding-block: calc(var(--aire-seccion) / 2); } .seccion--suelta { padding-block: calc(var(--aire-seccion) / 2); } /* La línea sutil quedó disponible pero NO se usa por defecto: la dirección pide separar con espacio. Si una sección llega a necesitarla, se le pone .seccion--linea y aparece a #E5E5E5, que es lo más callado que hay. */ .seccion--linea { border-top: 1px solid var(--linea); } .centro { text-align: center; } /* ── LA LETRA, EN ESCALA ───────────────────────────────────────────────────── Los tamaños son los de la dirección, sostenidos con clamp para que bajen a teléfono sin comprimirse: hero 48→96, titular de sección 36→72, apoyo 17→22. El interlineado se cierra conforme crece la letra, que es lo que hace que un titular grande se lea como una pieza y no como renglones. */ .display { font-size: clamp(46px, 7.4vw, 96px); font-weight: 800; line-height: 1.0; letter-spacing: -0.035em; margin: 0; text-wrap: balance; } .h1 { font-size: clamp(36px, 5.1vw, 72px); font-weight: 700; line-height: 1.05; letter-spacing: -0.028em; margin: 0; text-wrap: balance; } /* Para el remate de cuatro líneas: 64–80 px, un escalón arriba del titular. */ .gran { font-size: clamp(40px, 5.8vw, 80px); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; } .titular { max-width: var(--titular); } .titular--centro { margin-inline: auto; } .cuerpo { font-size: clamp(17px, 1.4vw, 22px); font-weight: 400; line-height: 1.45; color: var(--tinta-suave); letter-spacing: -0.011em; max-width: 640px; text-wrap: pretty; } .parrafo, .bajada { margin-top: var(--aire-titulo); } .parrafo--izq { margin-inline: 0; } .bajada--centro, .parrafo.centro { margin-inline: auto; } .nota { font-size: 15px; line-height: 1.5; color: var(--tinta-suave); letter-spacing: -0.006em; } .nota--centro { margin-inline: auto; max-width: 620px; } .etiqueta { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--tinta-suave); } /* Lo que todavía no firma el Director se ve como lo que es. */ .pendiente { display: inline-block; padding: 3px 10px; border: 1px dashed var(--borde); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--tinta-suave); } .marca-muestra { margin-top: 18px; } /* ── LA BARRA ──────────────────────────────────────────────────────────────── Extremadamente simple: nombre a la izquierda, tres destinos y la sesión a la derecha, y un botón. LA BARRA SE DISTINGUE, por orden del Director del 2026-08-24. La dirección pedía «sin borde visible inicialmente», pero él la vio y la barra se disolvía contra el blanco de la página: sin nada que la separe, el nombre y los destinos parecían flotar dentro del hero. Así que la línea va SIEMPRE puesta, y al bajar se le suma una sombra muy tenue para que el contenido se deslice por debajo y no la atraviese. Sigue siendo lo más callado que hay: un píxel de #E5E5E5. Y LA BARRA NO USA EL MARGEN DE LA PÁGINA. El contenido respira a 120 px del borde; la barra no debe — es la cornisa del sitio y se ancla a las orillas. Por eso tiene caja propia, de ancho completo y margen corto: el nombre se va a la izquierda de verdad y los destinos hasta la derecha. */ .barra { position: sticky; top: 0; z-index: 100; background: var(--papel); border-bottom: 1px solid var(--linea); transition: box-shadow .25s ease; } .barra--bajando { box-shadow: 0 1px 12px rgba(0, 0, 0, .05); } .franja.barra__caja { max-width: none; padding-inline: clamp(20px, 2.8vw, 46px); height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* EL NOMBRE Y EL «Beta», EN UNA SOLA CAJA. Tienen que ir juntos y no sueltos en la barra: la cornisa reparte con `space-between`, y un «Beta» hermano suelto sería un tercer bloque del reparto y se iría al centro. Y SE ALINEAN POR LA LÍNEA BASE, no por el centro. El nombre es un PNG, y un PNG se apoya en el renglón por su ORILLA DE ABAJO, no por donde termina la letra: la tinta de este archivo acaba al 70.3 % de su altura y abajo le sobra aire. Centrado, el «Beta» quedaría flotando bajo la palabra. La cuenta de abajo lo sube ese aire sobrante para que las dos letras se paren en el mismo renglón, y como va en proporción de --alto-marca, sigue cuadrando cuando la barra se encoge en teléfono. */ .barra__marca { --alto-marca: 46px; display: flex; align-items: flex-end; gap: 11px; } .marca { display: inline-flex; align-items: center; text-decoration: none; } .marca__palabra { width: auto; height: var(--alto-marca); } /* Chico, callado y editorial, por orden del Director (reporte del 2026-08-24 §7): ALMAGO está de verdad en beta y decirlo es parte del posicionamiento. Gris de apoyo, sin pastilla de color y sin borde — nada que se lea como advertencia. No debe crecer hasta competir con el nombre. */ .beta { margin-bottom: calc(var(--alto-marca) * 0.245); font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: 0.01em; color: var(--tinta-suave); } .barra__nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); margin-inline-start: auto; } .barra__nav a { font-size: 15px; font-weight: 500; /* ⚠ NUNCA SE PARTEN EN DOS RENGLONES, y esto se vio en foto, no en número. Al sumar el quinto destino («Contactar», Director 2026-08-25) la barra a 900 px NO se encimaba —la medida decía 24 px de holgura entre el logo y la nav— pero «Cómo funciona» y «Preguntas frecuentes» se partían por dentro y la barra crecía a dos pisos. El hueco medido seguía bien porque lo que se encogía era el TEXTO, no el espacio. Sin `nowrap`, la barra miente en la medida y falla en la pantalla. */ white-space: nowrap; color: var(--tinta-suave); text-decoration: none; transition: color .2s ease; } .barra__nav a:hover { color: var(--tinta); } .barra__acciones { display: flex; align-items: center; gap: 14px; } /* Aquí vivía `.barra__sesion`, el «Iniciar sesión» en letra gris que iba al lado del botón azul. Se fue el 2026-08-25: el Director subió esa acción AL botón azul, y la de agendar demo se salió de la barra. Una acción arriba, no dos. */ .barra .barra__menu { display: none; } /* ── LOS BOTONES ───────────────────────────────────────────────────────────── Simples y sólidos. Sin gradiente, sin sombra fuerte, curva suave, aire generoso. El hover es un cambio de tono y nada más. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding-inline: 22px; border: 1px solid transparent; border-radius: 999px; font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: -0.008em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .btn--primario { background: var(--marca-fuerte); color: #fff; } .btn--primario:hover { background: var(--marca-honda); } .btn--secundario { background: var(--papel); color: var(--tinta); border-color: var(--borde); } .btn--secundario:hover { border-color: var(--tinta-suave); } .btn--grande { height: 56px; padding-inline: 30px; font-size: 17px; } .btn--icono { width: 44px; height: 44px; padding: 0; background: transparent; color: var(--tinta); } .icono { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .flecha { width: 18px; height: 18px; } /* ── LA ENTRADA ────────────────────────────────────────────────────────────── El punto más limpio de la página: la idea sola, centrada, con mucho blanco alrededor. Sin bajada y sin botones, por orden expresa de la dirección — «el usuario debe encontrarse primero con la idea, no con una explicación». El visual entra DEBAJO, que es la composición de «visual dominante con texto arriba». */ /* LA ENTRADA OCUPA LA PANTALLA ENTERA Y SE CENTRA DENTRO DE ELLA. Antes era una sección normal con mucho aire arriba, y el resultado —visto por el Director el 2026-08-24— es que al abrir la página el nombre y el titular quedaban centrados pero LOS PERSONAJES SE CORTABAN abajo: el bloque medía más que la ventana. Un hero partido en dos es lo primero que ve un cliente, así que no es detalle. `svh` y no `vh`: en teléfono, `vh` mide la ventana CON la barra del navegador escondida, que es un alto que no existe mientras se está viendo la página — por eso el hero se salía justo en el momento de abrir. `svh` mide la ventana chica, la real. El `vh` queda antes como respaldo para navegadores viejos. Se le resta la barra, que es fija y siempre está encima. Su alto es token —104 en escritorio, 72 en teléfono— para que las dos medidas no se desincronicen nunca. */ .seccion--entrada { --alto-barra: 104px; min-height: calc(100vh - var(--alto-barra)); min-height: calc(100svh - var(--alto-barra)); display: flex; align-items: center; /* EL AIRE ES ASIMÉTRICO A PROPÓSITO: más abajo que arriba. Centrado exacto, el bloque quedaba «en medio» de forma matemática pero bajo de forma óptica —el ojo lee el centro un poco más arriba que la mitad geométrica—. Con el doble de aire abajo, el hero se asienta donde uno espera verlo, y de paso el borde de la escena queda más cerca de la orilla de la pantalla, que es lo que invita a seguir bajando. */ padding-block: clamp(24px, 2.6vw, 40px) clamp(56px, 7vw, 120px); } .entrada { text-align: center; width: 100%; } /* ── Y EL CONTENIDO TAMBIÉN SE MIDE CONTRA EL ALTO ─────────────────────────── Darle `min-height` a la sección no basta, y eso costó un intento: si el bloque de adentro mide más que la ventana, la sección crece y los personajes se cortan igual. El titular y la escena están dimensionados en `vw` —solo saben del ANCHO— y una laptop de 1440 × 780 es ancha y baja: el titular pedía 96 px y la escena 253, y entre los dos se pasaban 136 px. Así que en el hero —y SOLO en el hero, el resto de la página no cambia— cada medida lleva un segundo tope en `svh`. Gana el más chico de los dos: en una pantalla ancha y alta mandan los `vw` de siempre; en una ancha y baja entra el tope de altura y todo el bloque se encoge junto, en proporción. `svh` y no `vh` por lo mismo de arriba: `vh` mide la ventana con la barra del navegador escondida, un alto que no existe mientras se mira la página. */ .seccion--entrada .display { font-size: min(clamp(46px, 7.4vw, 96px), 10svh); } .seccion--entrada { --alto-3d: min(clamp(178px, 17.6vw, 254px), 24svh); } .seccion--entrada .entrada__visual { margin-top: min(clamp(32px, 4vw, 64px), 6svh); } .entrada__titular { max-width: 15ch; margin-inline: auto; } /* El `ch` de arriba se mide contra el tamaño de letra del ELEMENTO. Por eso el .display va en el

      y no en los de adentro: con la clase en los hijos, el

      valía 32 px, 15ch daban 270 px y el hero se partía en «Tu / propio / equipo». Se ve en el primer render del 2026-08-24. */ /* Este aire ya no es libre: la entrada tiene que caber en una pantalla, así que el hueco entre el titular y la escena compite con ella. Baja de 48-96 a 32-64, que sigue separando sin empujar a los personajes fuera de cuadro. */ .entrada__visual { margin-top: clamp(32px, 4vw, 64px); } /* LA ESCENA — un visual DE VERDAD, no un hueco. Va sin caja, sin borde y sin fondo: el archivo trae alfa, así que los personajes se paran directamente sobre el papel de la página. `display: block` deshace el `img{display:block}` del reset a nivel , que sí necesita decirlo: un es inline por defecto y deja un hueco de línea base debajo que se lee como aire de más. ── LA REGLA DE ESCALA (Director, 2026-08-24) ──────────────────────────────── «Todos los 3D se deben ver del mismo tamaño.» Es una regla de MUNDO, no de maquetación: si el mismo personaje mide distinto en dos secciones, deja de ser el mismo personaje y pasa a ser un dibujo que se estira. Y NO se cumple poniéndole el mismo `max-width` a cada imagen, que es la trampa obvia. El ancho del ARCHIVO no dice nada del tamaño del PERSONAJE: la escena del hero trae cinco en fila dentro de 1479 px, y Milo viene solo dentro de 685. Con el mismo ancho, los del hero saldrían tres veces más chicos que él. Lo que se fija es LA ALTURA DEL PERSONAJE, y el ancho de cada imagen se deriva. Cada archivo tiene su constante, medida con el canal alfa —la altura del personaje más alto, sin contar la sombra—: equipo-3d.png 1479 × 646 · el más alto mide 552 px → 0.3732 del ancho milo-3d.png 685 × 921 · Milo mide 884 px → 1.2905 del ancho kai-3d.png 819 × 894 · Kai mide 853 px → 1.0415 del ancho plan-1-3d.png 1015 × 870 · el más alto 834 px → 0.8217 del ancho plan-2-3d.png 1330 × 921 · el más alto 884 px → 0.6647 del ancho plan-3-3d.png 1520 × 854 · el más alto 815 px → 0.5362 del ancho cierre-3d.png 1391 × 709 · el más alto 680 px → 0.4889 del ancho remate-1.png 894 × 965 · Milo mide 936 px → 1.0470 del ancho remate-2.png 1358 × 926 · el más alto 897 px → 0.6605 del ancho remate-3.png 1535 × 723 · el más alto 694 px → 0.4521 del ancho Así que ancho = altura deseada / constante, y con eso se ven al mismo tamaño de verdad, no de ojo. ── LA REGLA TIENE DOS ESCALONES, no uno ───────────────────────────────────── El Director la matizó el mismo día, y el matiz es correcto: «si viene solo, sí que esté más grande». Un personaje que llega SOLO es un RETRATO —viene a presentarse, la sección se llama «Te presentamos a Milo»— y a la escala de grupo se veía como una figurita perdida en media columna. Así que hay DOS alturas y ninguna imagen se sale de la suya: --alto-3d los que vienen EN GRUPO. Todos iguales entre sí. --alto-3d-solo los que vienen SOLOS. Todos iguales entre sí, y más grandes. Es 1.75× la de grupo, que es donde el retrato llena su lado sin ganarle al titular. Lo que la regla original prohíbe sigue prohibido: dos personajes del MISMO escalón no pueden medir distinto. Lo que se abre es que un retrato y un grupo son dos escalones, no una incoherencia. PARA AGREGAR UN 3D NUEVO: se mide su constante igual —alto del personaje entre ancho del archivo, con alfa—, se decide a qué escalón pertenece, y se le da su clase. NO se le pone un max-width a mano: eso rompe la regla en silencio y no hay forma de verlo sin medir. */ :root { --alto-3d: clamp(150px, 15vw, 216px); --alto-3d-solo: clamp(230px, 26vw, 378px); /* TERCER ESCALÓN: las escenas de las tarjetas de plan. Más chico que los dos de arriba y por una razón de espacio, no de gusto — la escena de siete personajes a la escala normal pide 1 500 px de ancho y la tarjeta tiene 336. Lo que importa aquí es que las TRES midan igual ENTRE SÍ, porque eso es lo único que estas escenas tienen que decir: el equipo crece con el plan. Y como los personajes llenan casi toda la altura en los tres archivos, las tres imágenes salen de alto casi idéntico y las tarjetas cierran parejas sin una sola regla extra. */ /* ⚠ 2026-08-25 · ESTE NÚMERO YA NO ES LA ALTURA, ES SU TOPE. Antes la altura salía de `vw` y la tarjeta tenía que ser lo bastante ancha para aguantarla; con la cuarta tarjeta dejó de serlo y la escena más ancha se habría encogido sola mientras las otras dos se quedaban grandes. Ahora la altura la manda la TARJETA (ver `.escena--plan*` más abajo) y esto solo le pone techo, para que en una sola columna la escena no crezca sin freno. */ --alto-3d-plan: clamp(96px, 9.2vw, 140px); /* CUARTO ESCALÓN: el remate de cuatro líneas. Las tres escenas van una debajo de otra en la misma columna, así que lo único que importa es que se vean del mismo tamaño ENTRE SÍ. Milo llega solo y por la regla le tocaría el tamaño de retrato —1.75×—, pero ahí sería el doble que sus dos vecinos, y eso es justo lo que la regla vino a impedir. Manda la lista. */ /* ⚠ 160 Y NO 210 desde que los tres van en fila (2026-08-24). El tope NO lo decide el gusto, lo decide la columna: a 1600 la franja son 1240, tres columnas con 48 de hueco dejan 381 px cada una, y la escena más ancha —`--r3`, tres personajes, constante 0.4433— pide alto/0.4433 de ancho. A 210 pedía 474 px: el contenedor la habría recortado a 381 SIN QUE NINGUNA MEDIDA DE DESBORDE LO DELATARA, y los tres habrían dejado de verse del mismo tamaño. 250 Y NO 160 desde que las columnas dejaron de ser iguales (el porqué, en `.cuatro`): repartiendo el ancho en proporción a lo que pide cada escena, los 1144 px útiles dan 275/293/576 y las tres caben a 250 de alto. El tope sigue siendo geometría, no gusto. */ /* El tercer tope es la pantalla, por la misma orden del 2026-08-24: las tres escenas y las tres frases tienen que caber juntas. Los 250 px siguen mandando en una pantalla alta. */ --alto-3d-remate: min(clamp(96px, 16vw, 250px), 30svh); /* QUINTO ESCALÓN: los que van EN LA ESQUINA de una sección, fuera de la columna de texto. Orden del Director del 2026-08-25, textual: «están pero demasiado grandes, deben de estar pequeños y no justo abajo del texto centrado sino en las esquinas; tampoco justo en la esquina, no exageres, pero más esquinados». UN AVATAR DE ESQUINA NO ES UN RETRATO. Un retrato viene a presentarse —la sección se llama «Te presentamos a Milo»— y por eso se gana el 1.75×. Éste viene a acompañar desde el borde, y a escala de retrato deja de acompañar: se vuelve el tema de la sección. Por eso llega solo y AUN ASÍ no le toca `--alto-3d-solo`. Es el mismo matiz de arriba leído al revés. EL PISO DE 120 NO ES DE GUSTO: `marca/avatares/LEEME.md` prohíbe 3D por debajo de ~120 px porque a ese tamaño el brillo y la sombra se comen los rasgos y queda una mancha de color. El clamp arranca justo en el piso, así que en teléfono se queda quieto ahí y no baja más. */ --alto-3d-esquina: clamp(120px, 11vw, 168px); } .escena { display: block; width: 100%; height: auto; margin-inline: auto; } .escena img { width: 100%; height: auto; } .escena--equipo { max-width: calc(var(--alto-3d) / 0.3893); } .escena--milo { max-width: calc(var(--alto-3d-solo) / 1.2905); } .escena--kai { max-width: calc(var(--alto-3d-solo) / 1.0415); } /* LAS ESCENAS DE PLAN SE MIDEN CONTRA SU TARJETA, no contra la ventana. Reescrito el 2026-08-25 al entrar la cuarta tarjeta. Lo que tienen que cumplir es UNA sola cosa: las tres deben verse del mismo ALTO entre sí, porque eso —y nada más— es lo que dicen (el equipo crece con el plan). Sus tres archivos tienen proporciones distintas (alto/ancho de 0.6744, 0.4019 y 0.4388), así que igualar el alto obliga a darle a cada una un ancho distinto. Antes ese ancho salía de `--alto-3d-plan`, un número en `vw`: funcionaba mientras la tarjeta fuera lo bastante ancha para aguantarlo. Con cuatro columnas dejó de serlo — la tarjeta se angosta y `max-width` se rinde ante el ancho del padre— y la más ancha (plan2) se habría encogido sola. Tres escenas de altos distintos: exactamente lo que la regla prohíbe. AHORA LA MÁS ANCHA MANDA. plan2 ocupa el 100% de la tarjeta, y las otras dos se derivan de ella para quedar a su misma altura: plan1 → 0.4019 / 0.6744 = 59.59% plan3 → 0.4019 / 0.4388 = 91.59% Así comparten alto en CUALQUIER ancho de columna, sin un número que rehacer si mañana son cinco tarjetas o si el `gap` cambia. EL `min()` NO PUEDE DESCUADRARLAS, y conviene ver por qué: la rama de porcentaje da alto = 0.4019 × (ancho útil de la tarjeta) para las tres, y la rama de píxeles da alto = `--alto-3d-plan` para las tres. Cuál gana depende solo del ancho de la tarjeta, que es el mismo para todas → o ganan las tres por porcentaje, o ganan las tres por el tope. Nunca una por cada lado. */ .escena--plan1 { max-width: min(59.59%, calc(var(--alto-3d-plan) / 0.6744)); } .escena--plan2 { max-width: min(100%, calc(var(--alto-3d-plan) / 0.4019)); } .escena--plan3 { max-width: min(91.59%, calc(var(--alto-3d-plan) / 0.4388)); } /* LA CUARTA ESCENA ES DISTINTA A LAS OTRAS TRES, y su porcentaje no sale de la misma cuenta directa. Las tres primeras traen a sus personajes en UNA fila; ésta trae ocho en DOS. Igualar la altura del GRUPO —que es lo que hacen las otras— dejaría a cada personaje a poco más de la mitad del tamaño que tiene en sus vecinas, porque dos filas se reparten esa altura. Así que su porcentaje se midió sobre el archivo, no se copió de la fórmula: la tinta de este archivo ocupa 0.54 de su ancho (medido con Pillow, 1200 × 691, tinta 1158 × 648), y 0.419 es la altura de tinta que comparten las otras tres expresada en anchos de tarjeta. De ahí 0.419 / 0.54 = 77.6%. ⚠ EL SEGUNDO NÚMERO NO ES EL MEDIDO, Y ESO TIENE UNA RAZÓN EXACTA. Medir el archivo daba 0.5400, y con ese valor la escena salía 7 px más baja que sus vecinas entre 700 y 1100 px de ancho —donde manda la rama de píxeles y no la de porcentaje—. El invariante que las tres originales cumplen sin decirlo es que el PRODUCTO de sus dos números es el mismo: 0.5959 × 0.6744 = 0.4019 (plan1) 1.0000 × 0.4019 = 0.4019 (plan2) 0.9159 × 0.4388 = 0.4019 (plan3) Ese producto es lo que hace que las cuatro CAMBIEN DE RAMA a la vez; si una cambiara antes, se descolgaría sola. Con el porcentaje ya fijado en 77.59% por la medición de la tinta, el segundo número queda determinado: 0.4019 / 0.7759 = 0.5180. Medido después: la dispersión baja de 7-8 px a 2-3, que es la que las tres originales ya tenían por redondeo. Lo que esta escena deja, dicho de frente: los ocho personajes salen más chicos que los siete de la tarjeta de al lado. Es el precio de tener dos filas, y se acepta porque lo que la escena tiene que decir es «más gente», no «gente más grande» — y un grupo de ocho visto un poco más lejos sigue diciendo más gente. Si el Director prefiere lo contrario, la salida NO es subir estos números (la escena se saldría de la tarjeta y rompería la altura pareja de las cuatro): es un render nuevo de los ocho en una sola fila. */ .escena--plan4 { max-width: min(77.59%, calc(var(--alto-3d-plan) / 0.5180)); } /* El cierre es lo último que se ve y va CHICO: 0.72 de la escala de grupo, por orden del Director del 2026-08-24. A escala completa se comía el remate —y ahí lo que tiene que quedar en la cabeza son las dos frases y los dos botones, no los muñecos—. Sigue atado a --alto-3d, así que si la escala de la página cambia, éste la sigue en proporción. */ .escena--r1 { max-width: calc(var(--alto-3d-remate) / 0.9275); } .escena--r2 { max-width: calc(var(--alto-3d-remate) / 0.8711); } .escena--r3 { max-width: calc(var(--alto-3d-remate) / 0.4433); } /* CENTRADAS en su tarjeta, por orden del Director del 2026-08-24. Yo las había alineado a la izquierda para que hicieran columna con el precio y el límite, y visto en pantalla no funciona: las tres escenas tienen anchos distintos —2, 4 y 7 personajes— así que alineadas a la izquierda dejan un vacío creciente a su derecha y las tarjetas se ven descuadradas entre sí. Al centro, ese aire se reparte y las tres se leen como la misma tarjeta con distinto equipo, que es lo que son. */ .plan__equipo { margin-inline: auto; margin-bottom: 22px; } /* ── TEXTO A UN LADO, VISUAL AL OTRO ───────────────────────────────────────── La dirección pide alternar composiciones para que la página no se vuelva monótona sin tener que decorarla. Ésta es una de las tres. */ .dupla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } /* El TEXTO va siempre primero en el documento —lo primero que oye un lector de pantalla es el titular, no el marcador del visual—. De qué lado se ve el visual lo decide esta clase y nada más. Sin ella: a la derecha. Con ella: a la izquierda. Las cuatro secciones de dos columnas alternan L-D-L-D; hasta el 2026-08-24 las cuatro tenían el visual del mismo lado porque la regla vieja invertía el ORDEN DEL HTML, y dos secciones ya lo traían invertido — dos negativos que se cancelaban. */ /* ⚠ APUNTA AL SEGUNDO HIJO, NO A `.hueco`, y esto ya se rompió una vez. La regla decía `> .hueco`, y funcionó mientras TODOS los visuales eran huecos punteados. En cuanto §2 y §5 cambiaron su hueco por un con el 3D, dejaron de casar y las cuatro secciones de dos columnas volvieron a tener el visual del mismo lado — que es exactamente el bug que esta regla existe para evitar. Con `:last-child` da igual si el visual es hueco, imagen o lo que venga después. */ .dupla--invertida > :last-child { order: -1; } /* El titular de una sección a ancho completo va a 72 px; el mismo titular dentro de media columna no cabe y se parte en renglones de dos palabras. Baja un escalón —52 px— que es la medida que le toca a esa caja. */ /* EL TITULAR DE LAS DUPLAS SUBE A HERO (Director, 2026-08-24, viéndolo en pantalla: «la primera oración hero y lo demás pequeño» / «en el te presento que sea hero más grande»). Estaba en 30→46, un escalón por debajo del titular suelto, con el argumento de que media columna es media columna. El argumento se cae con las secciones podadas: cuando el titular es UNA frase —«Te presentamos a Milo.»— y al lado hay un retrato de 378 px, 46 px no compiten, se encogen. Ahora 34→62. ⚠ SÍ PARTE RENGLÓN, y está bien. «Te presentamos a Milo.» no cabe en los 572 px de columna a 62 px y cae en dos. Se probó bajarlo hasta que cupiera en uno y el precio era volver a los 46 de antes: cabía y no se veía. */ .dupla .h1 { font-size: clamp(34px, 4.2vw, 62px); letter-spacing: -0.024em; } /* `text-wrap: balance` es para titular CORTO y CENTRADO. Dentro de media columna hace lo contrario de lo que promete: con «Todo equipo necesita un reclutador.» reparte tres renglones flacos y deja la caja medio vacía. `pretty` llena el renglón y solo cuida la última línea. */ .dupla .h1, .dupla .golpe { text-wrap: pretty; } /* ── LOS HUECOS DE VISUAL ──────────────────────────────────────────────────── ANDAMIO, no diseño. Cada uno dice en voz alta qué escena va a vivir ahí. Se ven declaradamente provisionales —punteado sobre casi-blanco— para que nadie los confunda con una ilustración terminada. Cuando lleguen los avatares, esto se cambia por la escena y el punteado desaparece. */ .hueco { display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--nada); border: 1px dashed var(--borde); border-radius: var(--curva); text-align: center; } .hueco__nota { font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--tinta-suave); max-width: 34ch; } .hueco--alto { aspect-ratio: 4 / 5; } .hueco--cuadro { aspect-ratio: 1 / 1; } .hueco--ancho { aspect-ratio: 16 / 9; } .hueco--retrato { aspect-ratio: 3 / 2; } /* ── Y CADA CAJA, ATADA AL ALTO DE LA PANTALLA ─────────────────────────────── POR QUÉ `max-width` Y NO `max-height`. Estas cajas tienen `aspect-ratio`: su alto SALE de su ancho. Un `max-height` no las encoge, las DEFORMA —el ancho se queda donde estaba y la proporción se rompe—. Atándolas por el ancho, con el ancho derivado del alto que quiero, la proporción se respeta y el alto obedece. Es la misma cuenta que sostiene las escenas 3D. EL TEXTO NO SE TOCA. La orden lo dice completa: «lo que importa más es el texto, solo hazlo más pequeño si es necesario, ajusta antes el espacio del visual». Así que aquí no baja ni un tamaño de letra: lo que cede es la caja del visual, y solo en pantallas donde de verdad no cabe —el `min()` deja todo como estaba en una pantalla alta—. */ .hueco--ancho, .hueco--retrato { margin-top: min(var(--aire-bloque), 6svh); margin-inline: auto; } .hueco--ancho { max-width: calc(var(--visual) * 16 / 9); } .hueco--retrato { max-width: calc(var(--visual) * 3 / 2); } /* El de columna comparte pantalla solo con la barra, así que cede mucho menos: en una pantalla de portátil normal ni se mueve. */ .hueco--alto { max-width: calc(var(--visual-lado) * 4 / 5); margin-inline: auto; } /* §3 CARGA EL TITULAR MÁS LARGO DE LA PÁGINA —dos frases, y la primera cae en tres renglones a 72 px—. Con el tope común la sección se seguía pasando de pantalla, y se pasaba POR EL TITULAR, no por el visual. Como el texto no se toca, el que cede otro escalón es el visual. Es el orden que dio el Director, aplicado donde duele. */ #problema { --visual: min(38svh, 340px); } /* §7 carga titular DE DOS FRASES más una bajada de dos renglones: 274 px de texto antes de que empiece el visual. Mismo caso que §3, un escalón menos de castigo porque su titular sí cabe en dos renglones. */ #crecimiento { --visual: min(40svh, 360px); } /* LO QUE ESTA REGLA NO ALCANZA, Y HAY QUE DECIRLO. En teléfono quedan dos secciones que NO caben con su visual en una sola pantalla: §9 —tres escenas 3D apiladas con su frase cada una, más «Tú decides.»— y §15 —tres tarjetas de plan—. En las dos, lo que ocupa la pantalla es TEXTO, y el texto no se toca sin que lo diga el Director. El visual ya está en su piso: los 3D del remate topan en 130 px, que es donde un personaje deja de leerse. Bajarlas a una pantalla pide decidir sobre el texto, y esa decisión no es mía. */ .hueco--entrada { aspect-ratio: 16 / 9; } .hueco--celda { aspect-ratio: 4 / 3; } /* Aquí vivía `.hueco--ficha`, el andamio punteado de la cinta de herramientas. Se fue el 2026-08-25 con los logos de verdad: la ficha ahora es `.cinta__marca`, abajo, junto a la cinta. ⚠ SE LLAMA `.cinta__marca` Y NO `.marca` POR UNA RAZÓN CARA: `.marca` ya existía desde el principio —es el LOGO DE ALMAGO de la barra de arriba—. Nombrar la ficha de la cinta igual le puso al logo de la casa el plato, el filete y la caja cuadrada de un logo de tercero, y el CSS no se queja: simplemente gana la regla de más abajo. Lo cachó el Director en pantalla, no el código. */ /* CUATRO HUECOS SON DISTINTOS y esta clase los marca: el hero, la §3, la §6 y la §8 no llevan un avatar, llevan LA INTERFAZ REAL de Almago (orden del Director, reporte §4). No se ven distinto a propósito —siguen siendo andamio declarado— pero su encargo es más largo de leer, y sobre todo: cuando llegue el visual, esta clase es por dónde se agarran los cuatro. La entrada bajó de 21/9 a 16/9 por esto mismo. Una franja de 21/9 sirve para una escena panorámica; un chat dentro de ella queda de rendija. 16/9 es la proporción en la que una pantalla de producto se ve como lo que es. */ .hueco--interfaz .hueco__nota { max-width: 46ch; } /* ── EL NOMBRE, COMO IMAGEN DENTRO DEL TEXTO ───────────────────────────────── REGLA DEL DIRECTOR (2026-08-24): donde el texto diga ALMAGO no va la palabra escrita, va la IMAGEN del nombre — la misma de la barra. El problema real es que un PNG metido en una frase no se alinea solo: cae sobre la línea base por su borde de abajo, no por la línea base de sus letras, y se ve un centímetro más alto de lo que debe. Los tres números de abajo NO son a ojo — salen de medir el archivo y la letra: · el PNG mide 2172 × 724 y la tinta vive de y=21 a y=698; · su altura de equis va de y=208 a y=509 → 0.4157 de la altura del archivo; · su LÍNEA BASE está en y=509 → 0.297 de la altura queda POR DEBAJO; · Satoshi tiene altura de equis 0.484 em (regular) y 0.494 em (negrita), medido con measureText sobre el mismo woff2 de marca/fuentes/. De ahí: alto = 0.484 / 0.4157 ≈ 1.16 em (así la equis del nombre mide igual que la equis de la letra de al lado) bajar = 1.16 × 0.297 ≈ 0.345 em (así la línea base coincide) Y los márgenes negativos le quitan el aire de sobra que el PNG trae a los lados (67 px a la izquierda, 56 a la derecha, del mismo archivo), para que el espacio antes y después sea el espacio normal entre palabras y no un hueco. Sin eso, el punto de «Almago.» queda colgado. */ /* ⚠ Y DESDE EL 2026-08-25 NO ES UNA IMAGEN, ES UNA MÁSCARA. Orden del Director: «toda palabra que diga almago debe de ser así» — TODAS, no solo las de los titulares. Y ahí el `` se rompía, porque el PNG es NEGRO: · en el botón azul («Quiero conocer Almago») el texto es BLANCO; · en las notas del pie y en las razones el texto es GRIS; · solo en los titulares el texto es negro, que es donde ya se usaba. Un PNG negro sobre un botón azul no es «un poco distinto»: es una mancha. La máscara resuelve las tres de una vez — el archivo deja de aportar color y solo aporta FORMA, y el color lo pone `currentColor`, que es el color del texto de al lado, sea el que sea. Un solo `.nombre` para los tres casos. ⚠ CÓMO FALLA, Y HAY QUE SABERLO ANTES DE BAJAR A PRODUCCIÓN: si la ruta del archivo se rompe —y se va a mover al pasar a `/static/…`— la máscara no avisa. No hay error en consola, no hay imagen rota: queda un RECTÁNGULO sólido del color del texto. Es el mismo riesgo que ya trae anotado `BAJAR_A_PRODUCCION.md` desde el 2026-08-12. Se comprueba con el ojo, no con la consola. EL ANCHO SALE DE LA PROPORCIÓN, no de `auto`. Un `` sabe cuánto mide; un `` no. 2172 / 724 = 3 exacto, así que el ancho es tres veces el alto y la letra conserva su forma. */ .nombre { display: inline-block; --alto-nombre: 1.16em; height: var(--alto-nombre); width: calc(var(--alto-nombre) * 3); vertical-align: calc(var(--alto-nombre) * -0.297); margin-inline: calc(var(--alto-nombre) * -0.0925) calc(var(--alto-nombre) * -0.0774); background-color: currentColor; -webkit-mask: url(/static/landing/logo/palabra.png) no-repeat center / contain; mask: url(/static/landing/logo/palabra.png) no-repeat center / contain; } /* ── LOS DOS GOLPES ────────────────────────────────────────────────────────── El texto firmado tiene una forma que se repite en las doce secciones: cada una son DOS frases, no una. La primera plantea, la segunda remata («Todo equipo necesita un reclutador. / Te presentamos a Milo.»). Así que van como dos renglones de titular, con un respiro corto entre ellos. ⚠ Y DESDE EL 2026-08-24 NO SIEMPRE DEL MISMO TAMAÑO. En §3 y §8 el Director mandó bajar la SEGUNDA —ver `.golpe--baja` aquí abajo—. Donde no lleva esa clase, las dos siguen iguales, que es como estaba pensado. La tinta sí es siempre la misma: el gris se probó y él lo tumbó. Se resistió la tentación de poner el primero en gris y el segundo en tinta: sería un truco mío, no del texto. El único lugar donde SÍ hay cambio de tono es el remate de cuatro líneas, y ahí lo pide la dirección. */ .golpe { display: block; } .golpe + .golpe { margin-top: .42em; } /* LA LÍNEA QUE SIGUE A LA QUE MANDA (Director, 2026-08-24). En §3 y en §8 el titular son dos frases y NO valen lo mismo: la primera le habla al cliente y la segunda es lo que pasa después. Yo había bajado las dos al mismo tamaño y él lo corrigió en pantalla —«la primera frase es la que está grande y la segunda pequeña»—: bajar las dos no crea jerarquía, apaga la sección entera. Es SOLO tamaño. Mismo peso y misma tinta, porque el gris ya se probó en el remate de cuatro líneas y él lo tumbó: sobre tanto blanco no se lee como jerarquía, se lee como texto a medio cargar. ⚠ EL AIRE SE REPONE A MANO. `.golpe + .golpe` separa con .42em, y un em de esta línea es más chico que uno de la de arriba, así que la separación se encogía justo donde más falta hace. .62em de los suyos ≈ .42 de los de arriba: el escalón se ve, el renglón no se pega. */ .golpe--baja { font-size: clamp(22px, 2.3vw, 34px); line-height: 1.16; letter-spacing: -0.02em; } .golpe + .golpe--baja { margin-top: .62em; } .golpes--centro { margin-inline: auto; } /* El renglón del hero lleva la imagen del nombre, que sobresale del renglón por arriba y por abajo. Con line-height 1.0 se encimaría con lo de abajo. Y va con nowrap por una razón que costó un render: Chrome SÍ parte renglón entre una imagen en línea y el texto de al lado, aunque no haya espacio en medio. Con `text-wrap: balance` heredado del .display, el resultado fue el nombre en un renglón y el punto solo en el siguiente —y encima el nombre dejó de centrarse—. `nb` hace lo mismo para el nombre dentro de una frase. */ .golpe--marca { line-height: 1.22; } .golpe--marca, .nb { white-space: nowrap; } /* ── EL BLANCO POR LLENAR ──────────────────────────────────────────────────── El Director escribió los planes literalmente así: «$_____ / mes», «Límite: _____». No son cifras que falten por olvido — son blancos suyos. Se dibujan como lo que son: una raya sobre la línea base, del ancho de lo que va a caber. Poner cifras inventadas aquí sería exactamente lo que CONTEXT.md §3 prohíbe, y además la sección volvería a chocar con el ADR 027 §3.1. */ .blanco { display: inline-block; width: 2.6ch; border-bottom: 2px solid var(--borde); vertical-align: -0.12em; } .blanco--corto { width: 4.5ch; border-bottom-width: 1.5px; } /* `--nombre` DEJÓ DE USARSE el 2026-08-25, cuando el Director firmó los cuatro nombres de plan y las rayas se volvieron palabras. Se conserva —son dos líneas— porque es la única raya del ancho de un nombre y volvería a hacer falta el día que un nombre esté por decidirse. Si en tres meses sigue sin usarse, se borra. */ .blanco--nombre { width: 7ch; border-bottom-width: 1.5px; } /* ── LAS DOS PUERTAS DEL CIERRE ────────────────────────────────────────────── Aquí vivía `.botones`, una fila de dos botones y nada más. Desde que §10 se fusionó con el cierre (2026-08-24) cada botón lleva su nota debajo, así que la fila dejó de ser de botones y pasó a ser de PUERTAS: botón + explicación, como una sola pieza. POR QUÉ CADA PUERTA ES UNA COLUMNA y no un botón con texto suelto al lado: así la nota se envuelve DENTRO del ancho de su puerta y nunca queda debajo del botón equivocado. En teléfono la fila se envuelve y las dos puertas se apilan enteras, cada una con su nota pegada. */ .puertas { margin-top: clamp(30px, 3.6vw, 46px); display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(20px, 2.6vw, 40px); } .puerta { display: flex; flex-direction: column; align-items: center; gap: 12px; } /* LO MÁS CHICO DE LA PÁGINA, a propósito y por orden: «las explicaciones lo más breves y pequeñas que se pueda». 14 px queda por debajo de la nota de 15 px y del cuerpo de 17; el botón sigue siendo lo que se ve primero. */ .puerta__nota { font-size: 14px; line-height: 1.45; color: var(--tinta-suave); max-width: 27ch; text-wrap: pretty; } /* ── LOS AVATARES: SE FUERON (2026-08-24) ──────────────────────────────────── Vivían aquí `.av`, `.av--grande`, `.avs` y `.avs--faq`. Su único uso en toda la página era la cabecera de la FAQ, y el Director la mandó sin caras, así que el CSS se va con ellas: reglas que no aplican a nada son las que después nadie se atreve a borrar. Vive en el historial de git si hicieran falta. */ /* ── EL REMATE DE CUATRO LÍNEAS ────────────────────────────────────────────── Tratamiento especial que pide la dirección: cada línea grande, centrada, mucho aire vertical, apareciendo una a una. ⚠ LAS CUATRO VAN EN TINTA LLENA, por orden del Director del 2026-08-24. Yo había puesto las tres primeras en gris y solo la última en negro, para que el ojo aterrizara en «Tú decides.». Él lo vio en pantalla y lo corrigió: en una página que es casi toda blanco, el gris no leyó como jerarquía, leyó como si esas tres líneas estuvieran apagadas o a medio cargar. Las cuatro frases son del texto firmado y pesan igual. El remate sigue teniendo su acento, pero ahora es solo de TAMAÑO: la última va un escalón más grande. Con las cuatro en negro, eso alcanza. */ /* LOS TRES PASOS, CORRIDOS DE IZQUIERDA A DERECHA (Director, 2026-08-24). Iban uno debajo de otro; ahora Milo, Kai y el equipo van en una fila de tres y «Tú decides.» cae solo, a todo lo ancho, debajo. Es lo que dice la sección: los tres primeros son un proceso —pasa esto, luego esto, luego esto— y el cuarto no es un paso más, es quien manda sobre los tres. En columna, los cuatro se leían como una lista de cuatro cosas iguales. `align-items: end` es lo que para a los tres sobre la misma línea de piso. Sus cajas NO miden lo mismo de alto —cada archivo tiene su proporción y lo que se iguala es el PERSONAJE, no la caja—, así que sin esto cada frase quedaría a una altura distinta. */ .cuatro { margin-top: min(clamp(48px, 6vw, 88px), 6svh); display: grid; /* ⚠ LAS COLUMNAS NO SON IGUALES, Y AHÍ ESTABA EL TAMAÑO PERDIDO. Con tres columnas de 1fr manda la más ancha —la tercera son TRES personajes— y las otras dos se quedan cada una con 200 px de columna vacía que nadie usa. Como el alto es común, el que no cabe encoge a los tres. Los números son las constantes de escala invertidas: para un mismo alto de personaje, Milo pide 1.078 de ancho, Kai 1.148 y el trío 2.256. Dar a cada columna su proporción hace que las tres escenas terminen al filo de la suya, sin sobra, y el personaje pasa de 160 a 250 px de alto con la misma franja de 1240. */ grid-template-columns: 1.078fr 1.148fr 2.256fr; gap: clamp(24px, 3vw, 48px); align-items: end; justify-items: center; } .cuatro__tu { grid-column: 1 / -1; } .cuatro li { display: flex; flex-direction: column; align-items: center; gap: 18px; } /* ⚠ BAJÓ DE 64 A 34 al pasar a fila. No es capricho de gusto: la columna mide 381 px a 1600 y «Tu equipo trabaja.» a 64 px pide más del doble, así que se partía en tres renglones y la fila dejaba de leerse como fila. El acento de la sección sigue siendo el de siempre —«Tú decides.» un escalón arriba—, y ahora contrasta contra 34 en vez de contra 64, o sea que se nota más. */ .cuatro strong { display: block; font-size: clamp(22px, 2.3vw, 34px); font-weight: 700; line-height: 1.06; letter-spacing: -0.028em; color: var(--tinta); } .cuatro li:last-child strong { font-size: clamp(40px, 5.8vw, 80px); } /* «Tú decides.» perdió su avatar y con él la altura que lo separaba del renglón de arriba: las otras tres líneas respiran por el círculo de 96 px más sus 18 de aire, y sin nada de eso la última quedaba pegada a «Tu equipo trabaja.». No se le devuelven los 114 px completos —quedaría un boquete— sino la mitad, que es donde el espacio se ve igual al de los otros pares. */ .cuatro__tu { padding-top: clamp(24px, 3.4vw, 56px); } /* ── LOS DOS CAMINOS DE §10: SE FUERON (2026-08-24) ────────────────────────── Vivían aquí `.caminos`, `.camino`, `.camino__que`, `.camino__nota` y la «o» bisagra. La sección entera se fusionó con el cierre por orden del Director, así que su CSS se va con ella: reglas que no aplican a nada son las que después nadie se atreve a borrar. Vive en el historial de git. */ /* ── LAS DOS REJILLAS RESERVADAS ───────────────────────────────────────────── Casos de uso (§12) y herramientas (§13). El Director pidió dejar la ESTRUCTURA lista y NO el contenido, así que estas reglas existen para que el día que él firme la lista no haya que rediseñar: se cambia lo de adentro de las celdas y ya. Las dos son rejilla y ninguna es carrusel — orden suya, textual. Los casos van en celdas grandes de tres por hilera; las herramientas en fichas chicas de seis, que es la forma en que se lee una tira de conexiones. */ /* ── EL RIEL DE CASOS ──────────────────────────────────────────────────────── Una fila que se arrastra de lado, con la siguiente tarjeta ASOMANDO en el filo. El asomo es lo que lo separa de un carrusel: no hay nada escondido —el borde cortado dice que hay más— y no hace falta una flecha. ⚠ EL ANCHO DE TARJETA VA EN PORCENTAJE, NO EN NÚMERO DE COLUMNAS, y ésa es toda la mecánica del asomo: a 70% del riel nunca caben tres enteras ni dos justas, así que SIEMPRE sobra un pedazo visible de la siguiente, en cualquier pantalla. Con `repeat(n, 1fr)` el asomo desaparecería justo en los anchos donde las tarjetas cuadran exactas. `scroll-padding-inline` es para el teclado: sin él, al tabular a una tarjeta el navegador la pega al filo izquierdo y se come el asomo de ese lado. */ .riel { margin-top: min(clamp(40px, 5vw, 72px), 5svh); display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; text-align: left; /* UNA SOLA TARJETA AL CENTRO (Director, 2026-08-24). Este relleno es lo que permite que la PRIMERA y la ÚLTIMA también queden centradas: sin él, la primera se pega al filo izquierdo y no hay asomo de ese lado. Es la mitad del sobrante, calculada con la misma fórmula del ancho de tarjeta —si una cambia, la otra tiene que cambiar igual. */ /* ⚠ EL ANCHO VA EN vw, NO EN %, y costó un render entenderlo. Un `%` en el flex-basis de la tarjeta se resuelve contra la CAJA DE CONTENIDO del riel —que este mismo relleno ya encogió—, así que ancho y relleno se muerden la cola: pedí 76% de 1240 y salió 76% de 760. Con `vw` el número no depende de nadie y las dos fórmulas usan el MISMO valor. */ /* Y EL TERCER TOPE ES LA PANTALLA. La tarjeta es 4:3, así que su alto sale de su ancho igual que en los huecos; sin este tercer término la tarjeta medía 570 px de alto y el titular de la sección quedaba fuera de cuadro. */ --caso: min(72vw, 760px, calc(var(--visual) * 4 / 3)); padding-inline: max(0px, calc((100% - var(--caso)) / 2)); /* Los filos se desvanecen, igual que la cinta de herramientas: la tarjeta de al lado tiene que insinuarse, no exhibirse. Es lo que dice «hay más» sin poner una flecha. */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); } .riel::-webkit-scrollbar { display: none; } /* ── LAS FLECHAS DEL RIEL ──────────────────────────────────────────────────── Encima del contenido y a media altura, como las de la tienda de Apple. Van calladas —translúcidas— y se encienden al pasar el ratón por el riel o al llegarles con el teclado: son una ayuda, no un mando. ⚠ NACEN `hidden` Y LAS ENCIENDE EL JS. Si el script no corre, el riel se topa en el último caso, y una flecha que no da vuelta sería mentira. Mismo principio que las copias: falla hacia el lado seguro. */ .riel-caja { position: relative; } .riel__flecha { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; /* Disco gris LLENO, no translúcido de apenas. Es la diferencia entre un botón y una mancha: sobre el blanco de esta página un 5% de negro casi no existe, y la flecha parecía flotar sin soporte. */ background: rgba(0, 0, 0, .12); color: var(--tinta-suave); padding: 0; cursor: pointer; /* CALLADAS HASTA QUE EL CURSOR ENTRA AL RIEL (Director, 2026-08-24). Se probaron a la vista siempre —así están en la referencia— y sobre esta página tan blanca dos discos grises permanentes se leen como mobiliario. Con el cursor fuera no estorban; con el cursor dentro aparecen justo donde hacen falta. ⚠ SE OCULTAN CON `opacity`, NO CON `display`, y es a propósito: invisible pero presente, el teclado las sigue alcanzando y `:focus-visible` las enciende. Con `display: none` desaparecerían también para el tabulador. Y no hay clic accidental: viven DENTRO del riel, así que si el cursor puede tocarlas es porque ya está adentro y ya se encendieron. */ opacity: 0; transition: opacity .18s ease, background .18s ease; } .riel-caja:hover .riel__flecha, .riel-caja:focus-within .riel__flecha { opacity: 1; } /* ⚠ EL SIGNO ES UN TRAZO, NO UNA LETRA. Con «›» de texto la punta sale delgadísima, mal centrada en el disco y de distinto grosor en cada fuente —depende de la tipografía, no de nosotros—. Dibujado, el grosor y las puntas redondeadas son nuestros y se ven igual en todas partes. */ .riel__chevron { width: 22px; height: 22px; display: block; } .riel__flecha--izq .riel__chevron { transform: scaleX(-1); } .riel__flecha[hidden] { display: none; } .riel__flecha--izq { left: 8px; } .riel__flecha--der { right: 8px; } .riel__flecha:hover { background: rgba(0, 0, 0, .18); } /* En pantalla táctil no hay ratón que las encienda y el dedo ya arrastra. */ /* ⚠ SE PIDEN LAS DOS CONDICIONES, no solo `hover: none`. En un portátil con pantalla táctil el navegador puede decir que no hay hover aunque haya ratón conectado, y las flechas desaparecerían para alguien que sí las necesita. Con `pointer: coarse` además, solo se van donde de verdad manda el dedo — y ahí el arrastre ya resuelve. */ @media (hover: none) and (pointer: coarse) { .riel__flecha { display: none; } } .riel__caso { flex: 0 0 var(--caso); scroll-snap-align: center; } .rejilla { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* ── LA CINTA DE HERRAMIENTAS ──────────────────────────────────────────────── Dos filas que corren solas en sentidos contrarios, sin una línea de JS. ⚠ EL HUECO NO VA EN `gap`, VA EN `margin-right` DE CADA FICHA, y no es manía: el ciclo se cierra desplazando el tren exactamente -50%. Con `gap` de flex, un tren de 16 fichas mide 16 anchos + 15 huecos, y la mitad de eso NO es 8 anchos + 8 huecos —falta medio hueco—, así que cada vuelta da un brinco de 7 px. Con el hueco DENTRO de la ficha, el tren mide 16 veces lo mismo y la mitad cae clavada. Los dos filos se desvanecen con una máscara: sin eso las fichas aparecen y desaparecen de golpe contra el blanco y se ve el borde de la caja, no una cinta que sigue más allá. */ .cinta { margin-top: min(clamp(40px, 5vw, 72px), 5svh); display: grid; gap: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .cinta__fila { overflow: hidden; } /* Aquí vivía la cinta de NEGOCIOS del pie —fichas anchas y bajas, una sola fila, más despacio—. La pidió el Director el 2026-08-24 y el mismo día la quitó («quita la linea de movimiento de negocios hasta abajo»). Se va entera: la clase, las fichas y su hueco. Lo que se aprendió de ella —que §14 no aplica al pie, y que ningún nombre real entra sin permiso del negocio— quedó escrito en PENDIENTES_DEL_DIRECTOR.md, que es donde vive lo que sobrevive a una pieza borrada. */ .cinta__tren { display: flex; width: max-content; animation: cinta-corre 46s linear infinite; } .cinta__tren > * { flex: none; width: 110px; margin-right: 14px; } /* LA FICHA DE MARCA. Un plato neutro para veintiún logos que no se parecen en nada: unos son glifos sueltos sobre transparente (Slack, Zoom, Stripe) y otros vienen con su propio cuadro de color a sangre (Mercado Libre, Notion). Sin plato, los primeros flotan y los segundos parecen botones; con él, los veintiuno se leen como una misma familia de piezas. */ .cinta__marca { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; /* EL PLATO ES BLANCO Y NO CASI-BLANCO, y esto se midió, no se escogió. Tres de los veintiún archivos —Zoom, Clip y Shopify— traen fondo blanco SÓLIDO, no transparente. Sobre el casi-blanco del andamio se les veía el cuadrito blanco recortado alrededor del logo, como una calcomanía mal pegada. En blanco puro desaparece, y no hay que tocar un byte de un archivo oficial. Lo que sostiene la ficha entonces es el filete, no el relleno. */ background: var(--papel); border: 1px solid var(--linea); border-radius: var(--curva); } /* LA MEDIDA VA EN LOS DOS EJES, y son dos problemas resueltos con una regla. El primero: un SVG sin `width`/`height` propios NO tiene tamaño intrínseco, así que con `height:auto` colapsa a CERO y la ficha sale vacía —pasó con los cuatro de Microsoft y con Mailchimp en el mock, y el HTML se veía perfecto—. El segundo: los archivos van de 32 px a 512 px, y `contain` dentro de una caja fija es lo que los deja a todos del MISMO tamaño óptico sin tocar un solo archivo. Los marcados en el mock son los que quedan suaves por chicos —Dropbox de 32 px es el peor—; se cambian cuando llegue el archivo bueno y aquí no hay que mover nada. */ .cinta__marca img { width: calc(46px * var(--esc, 1)); height: calc(46px * var(--esc, 1)); object-fit: contain; display: block; } /* LA ESCALA ÓPTICA, MEDIDA Y NO A OJO. Veintiún archivos oficiales puestos todos a 46 px NO se ven del mismo tamaño, y la razón es que cada marca decide cuánto margen deja dentro de su propio archivo: el de Zoom trae aire alrededor del círculo, el de HubSpot es un cuadrado naranja a sangre. Igual de importante: una figura redonda pinta un 21% menos que un cuadrado del mismo alto, así que «misma caja» tampoco es «mismo peso». Cómo salió el número: se renderizó cada archivo en una caja de 240 px y se midió su tinta de dos formas —el rectángulo que la encierra y los píxeles que de verdad pinta—. El ajuste es la media geométrica de las dos contra la mediana del grupo: el rectángulo solo premiaría a los huecos, y los píxeles solos castigarían a los que llevan blanco adentro, como Notion. Se redondeó a cuatro escalones a propósito. El ojo no distingue un 0.87 de un 0.88, y dos decimales aquí serían precisión falsa. Lo que sí se nota es un logo que pesa el doble que su vecino, y eso es lo que esto arregla. ⚠ SI SE CAMBIA UN ARCHIVO POR EL OFICIAL BUENO, se vuelve a medir. Un logo nuevo con otro margen interno rompe el ajuste sin que nada se queje. */ .cinta__marca img[src$="hubspot.png"], .cinta__marca img[src$="dropbox.png"] { --esc: .85 } /* cuadrados a sangre */ .cinta__marca img[src$="stripe.svg"], .cinta__marca img[src$="docusign.ver.png"] { --esc: .90 } .cinta__marca img[src$="telegram.svg"], .cinta__marca img[src$="woocommerce.ver.png"], .cinta__marca img[src$="calendly.svg"] { --esc: .93 } /* discos llenos */ .cinta__marca img[src$="teams.svg"], .cinta__marca img[src$="notion.ver.png"], .cinta__marca img[src$="mailchimp.svg"], .cinta__marca img[src$="mifiel.ver.png"], .cinta__marca img[src$="mercadopago.ver.png"] { --esc: 1.08 } .cinta__marca img[src$="mercadolibre.svg"], .cinta__marca img[src$="facturama.ver.png"] { --esc: 1.15 } /* traen mucho aire */ /* La de abajo va al revés y un poco más rápido: dos filas al mismo paso se leen como un solo bloque moviéndose, no como dos cintas. */ .cinta__fila--izq .cinta__tren { animation-duration: 38s; /* Media ficha de desfase. Sin esto las dos filas arrancan con las fichas alineadas en columna y se leen como una rejilla que tiembla, no como dos cintas independientes. Va en `margin-left` y no en `animation-delay` a propósito: el desfase tiene que verse TAMBIÉN cuando la animación está apagada por `prefers-reduced-motion`. */ margin-left: -62px; /* media ficha: (110 + 14) / 2 */ } .cinta__fila--der .cinta__tren { animation-direction: reverse; } @keyframes cinta-corre { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Si el sistema pide menos movimiento, se para. No se esconde: se queda quieta y se sigue leyendo igual. */ @media (prefers-reduced-motion: reduce) { .cinta__tren { animation: none; } } /* ── LOS PLANES ────────────────────────────────────────────────────────────── La única parte donde la dirección autoriza tarjetas, porque la información necesita estructura. Muy limpias: fondo blanco, borde fino, curva, cero sombra. El destacado se distingue por un borde de marca de un píxel y una etiqueta chica — no por color de fondo ni por escala. */ /* EL MARCO DE LOS PLANES es más ancho que el resto de la página, y es a propósito (Director, 2026-08-24). Lo que manda el tamaño de los personajes dentro de las tarjetas no es la imagen: es el ancho útil de la tarjeta. Con la medida normal de 1240 px quedaban 278 útiles y los siete de la tercera salían a 100 px de alto —debajo del piso de 120 que el 3D necesita para leerse—. A 1440, con menos aire entre tarjetas y menos relleno, quedan 359 útiles y los tres suben a 130. Se ensancha el marco, no se encogen los personajes. El tope de 140 no es gusto: es lo que cabe. La tarjeta más estrecha manda, y la que manda es la de 1088 px de pantalla, donde quedan 262 útiles. Y la que aprieta NO es la de seis personajes sino la de cuatro: vienen más separados, así que por personaje cuesta más ancho (0.4019 contra 0.4212). Subir el número sin volver a medir recorta una en silencio, que es exactamente el fallo que costó el ajuste anterior. */ #precios .franja { max-width: 1440px; } .planes { margin-top: clamp(48px, 6vw, 80px); display: grid; /* CUATRO desde el 2026-08-25 (antes tres). El cuarto plan entró por orden del Director y va en la misma hilera, no en un renglón aparte: una tarjeta sola debajo de tres se lee como un caso especial, y los cuatro son el mismo tipo de cosa —los cuatro son suscripción, corrección textual suya—. La escena se encoge sola al angostarse la columna; la cuenta que lo permite está arriba, en `.escena--plan*`. */ grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; /* las cuatro cierran parejas abajo */ text-align: left; } .plan { position: relative; display: flex; flex-direction: column; padding: 22px; background: var(--papel); border: 1px solid var(--borde); border-radius: var(--curva); } .plan__nombre { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; } .plan__nombre + .plan__precio { margin-top: 4px; } .plan__precio { margin-top: 18px; font-size: clamp(30px, 2.8vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; } .plan__precio em { font-style: normal; font-size: 15px; font-weight: 500; color: var(--tinta-suave); letter-spacing: -0.005em; } .plan__que { margin-top: auto; /* empuja la línea final al pie de la tarjeta */ padding-top: 24px; font-size: 16px; line-height: 1.45; color: var(--tinta-suave); } /* ── LAS PREGUNTAS, COMO UNA CONVERSACIÓN ──────────────────────────────────── Acordeón de verdad, con
      nativo: abre sin una línea de JS y sigue abriendo si el JS falla. Encima de eso, y SOLO con CSS, la lista se lee como una plática (Director, 2026-08-24: «haz la a con los tres momentos», y en el turno siguiente la referencia con burbujas de colita: «aplícalo así»). LOS LADOS LOS PUSO EL DIRECTOR el 2026-08-24: PREGUNTA A LA DERECHA, RESPUESTA A LA IZQUIERDA. La referencia los traía al revés; éstos son los de un chat de verdad —lo que tú dices va de tu lado— y encima ponen la respuesta donde el ojo vuelve a empezar el renglón. Lo que NO cambia es el reparto de color: clara la pregunta, negra la respuesta. ⚠ SI ALGÚN DÍA SE VUELVEN A VOLTEAR, son CUATRO cosas y no una: el margen automático de cada burbuja, el lado de su colita, el `transform-origin` de la respuesta (crece desde la esquina de la que cuelga) y el `right` del signo de abrir. CÓMO SE ARMA: cada burbuja lleva `width: fit-content` —se encoge a lo que dice, que es justo lo que la distingue de una caja: la caja ocupa todo el ancho, la burbuja ocupa lo que dice— y un margen automático del lado contrario, que la empuja a su orilla. ⚠ EL
      SE QUEDA EN BLOQUE, NO EN FLEX, y eso es una cicatriz: con `display:flex` se veía idéntico pero es de lo más frágil de estilar entre navegadores. En bloque, `margin` hace el mismo trabajo que hacía `gap`. POR QUÉ ESTO NO ES «una caja por pregunta», que la dirección descarta por ruidoso: en reposo NO hay diez cajas. Hay diez burbujas sin borde, sin sombra y sin línea, cada una del ancho de lo que dice, y UNA sola respuesta abierta. Lo que la dirección rechaza es la rejilla de tarjetas iguales; esto es lo contrario, una columna dispareja que respira. SIN CARAS Y SIN NOMBRES — el porqué está en el HTML, junto a la sección: dar nombre a la voz que contesta sería inventar comportamiento del producto. */ /* MÁS ANGOSTA QUE EL RESTO DEL TEXTO, y no es capricho: las burbujas se recuestan a los lados, así que en una columna de 900 px la plática queda colgada de las orillas con un vacío en medio. A 800 los dos lados se ven como un intercambio. `.salida` baja al mismo ancho para seguir alineada. */ .faq { margin-top: clamp(40px, 5vw, 72px); max-width: min(var(--texto), 800px); margin-inline: auto; /* La franja va `.centro`, y centrar el BLOQUE no es centrar la LETRA: una respuesta de tres renglones centrada renglón por renglón no se lee, se descifra. Dentro de la burbuja el texto vuelve a la izquierda. */ text-align: left; display: flex; flex-direction: column; gap: 22px; } /* EL RÓTULO DEL MOMENTO — el separador de fecha de una app de mensajes, que es exactamente el mismo trabajo: partir una tira larga en tramos sin meter una caja ni una línea. Va en

      y no en

      porque además de verse como grupo ES un grupo: quien navegue con lector de pantalla oye los tres tramos. */ .faq__hito { align-self: center; margin: clamp(26px, 3vw, 44px) 0 clamp(8px, 1vw, 14px); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); } .faq__hito:first-child { margin-top: 0; } /* El par pregunta+respuesta se aprieta (10 px, el margen de la respuesta) y los pares se separan (22 px, el gap de `.faq`). Ese contraste es lo que agrupa: sin él, veinte burbujas igual de separadas no se leen como diez intercambios. */ .faq__par { display: block; } /* ── LA FORMA COMÚN DE LAS DOS BURBUJAS ────────────────────────────────────── Curva pareja de 24 px en las cuatro esquinas: con colita NO se cuadra la esquina, la colita sale de ella. Ese es el detalle que separa una burbuja de verdad de un rectángulo redondeado. EL HUECO DE 14 px DE SU LADO no es un margen de estética: es LA CASA DE LA COLITA. La colita se dibuja con dos pseudo-elementos que sobresalen de la burbuja, y si sobresalieran del renglón, el medidor de la página reportaría desborde en cada corrida —un descendiente que se sale cuenta como área desbordada de su padre. Con el hueco, la colita cae DENTRO de `.faq__par` y lo medido sigue limpio. Si algún día se agranda la colita, se agranda este hueco con ella. */ .faq__q, .faq__a { position: relative; width: fit-content; border-radius: 24px; } .faq__q { max-width: min(94%, 42ch); margin-left: auto; /* recostada a la derecha */ margin-right: 14px; /* la casa de la colita */ /* BLOQUE, NO FLEX. En flex el signo es un ítem aparte y se va a la orilla derecha de la burbuja: en una pregunta de dos renglones el texto acaba a media línea y el signo queda solo al fondo, con un hueco en medio que vuelve la burbuja una tarjeta ancha. En bloque el signo va EN el renglón, detrás de la última palabra. `display:block` en

      es además la forma estándar de quitarle el triangulito. */ display: block; /* El hueco de la derecha es de 50 y no de 24: 24 de aire + 14 del signo + 12 entre los dos. El signo va anclado ahí (ver `.faq__mas`). */ padding: 16px 50px 16px 24px; background: var(--burbuja-pregunta); /* PESO 500, no 600: en la referencia la pregunta es un MENSAJE, no un encabezado. A 600 cada burbuja pedía turno de titular y las diez juntas se leían como un índice. */ font-size: clamp(17px, 1.35vw, 20px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; cursor: pointer; list-style: none; transition: background .2s ease; } .faq__q:hover { background: var(--burbuja-pregunta-viva); } .faq__q::-webkit-details-marker { display: none; } /* El span que envuelve el texto ya no hace falta para el acomodo —eso era cuando la burbuja era flex y cada trozo suelto se volvía su propio ítem, y la pregunta que lleva el nombre como imagen salía partida en tres pedazos (render del 2026-08-24)—. Se queda porque el HTML lo tiene y porque agarra al texto sin agarrar al signo. */ /* El signo de abrir: dos trazos que se vuelven uno al desplegar. Se queda DENTRO de la burbuja —fuera flotaría en el blanco sin pertenecer a nada, porque la burbuja ya no llega a la orilla—, y ahora comparte esa orilla con la colita: la colita cuelga por FUERA y abajo, el signo va por DENTRO y centrado, así que no se estorban. ⚠ ANCLADO, NO EN LÍNEA, y es la tercera cicatriz de esta sección. En línea queda precioso pegado a la última palabra… hasta que el renglón se acaba: un `inline-block` es caja atómica y el navegador PUEDE cortar antes de ella, así que en teléfono media docena de preguntas quedaban con un `+` huérfano en su propio renglón (render del 2026-08-24). Anclado no hay renglón que cortar: en una pregunta de un renglón cae a los mismos 12 px de la última palabra —el `padding-right` de 50 se lo reserva— y en una de dos queda centrado a la derecha, que se lee como control, no como sobra. */ .faq__mas { position: absolute; right: 24px; top: 50%; margin-top: -7px; /* la mitad de su alto */ width: 14px; height: 14px; color: var(--tinta-suave); } .faq__mas::before, .faq__mas::after { content: ''; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: currentColor; border-radius: 2px; transform: translateY(-50%); transition: transform .25s ease, opacity .25s ease; } .faq__mas::after { transform: translateY(-50%) rotate(90deg); } .faq__par[open] .faq__mas::after { transform: translateY(-50%) rotate(0deg); opacity: 0; } /* LA RESPUESTA NACE, no aparece. Orden del Director del 2026-08-24: «que no sólo aparezca sino que nazca, como de una luz de genio». Son tres cosas a la vez, y ninguna se ve sola: 1. SALE DE UN PUNTO. `transform-origin` en la esquina de arriba a la DERECHA —la esquina que apunta a la pregunta, que vive arriba y a la derecha— y arranca en `scale(.55)`. Como la escala encoge HACIA el origen, la burbuja se despliega desde ese punto en vez de inflarse desde su centro. ⚠ EMPEZÓ EN .94, luego .86, luego .82 y NO SE VEÍA: el Director dijo «sigo sin ver que salga de un lugar» tres veces seguidas. El eje estaba bien —nacer de una esquina— pero el rango era el de un retoque, no el de un gesto. A la MITAD sí se lee. Si algún día se siente brusco, lo que se alarga es la duración, no el .55. 2. SE FORMA. `filter: blur(10px)` que se va a cero. Esto es la luz: la burbuja empieza siendo una mancha sin filo y termina siendo un objeto. Un `box-shadow` habría sido lo obvio y está prohibido —esta página no tiene sombras—; el desenfoque da el mismo «se está materializando» sin meter una sola sombra. 3. LAS PALABRAS LLEGAN DESPUÉS. El texto tiene su propia entrada con 260 ms de retardo, así que la burbuja nace vacía y las letras se encienden dentro. Ese desfase es el 80 % del efecto: sin él son una sola cosa que crece, con él es algo que se forma y luego habla. El retardo de arranque bajó de 90 a 60 ms porque ahora la animación dura 500 y no 340: el latido de espera ya lo pone el desenfoque. ⚠ CRECE, NO SUBE, y esa cicatriz costó un diagnóstico: la primera versión arrancaba en `translateY(8px)`, y un descendiente DESPLAZADO cuenta como área desbordada de su padre —el medidor reportaba `faq__par +8` en todas las corridas, en todos los anchos. No había recorte real, pero un falso positivo permanente ciega al instrumento que existe para ver los recortes de verdad. `scale` por debajo de 1 encoge HACIA ADENTRO y no desborda nunca. Y el origen NO es la izquierda: la pregunta está arriba y a la DERECHA desde que se cambiaron los lados, así que la burbuja tiene que nacer de esa esquina o el gesto apunta al lugar equivocado. `prefers-reduced-motion` la apaga sin regla propia: la hoja tiene un `* { animation-duration: .01ms !important }` global más abajo. */ .faq__a { max-width: min(94%, 48ch); margin: 10px auto 0 14px; /* pegada a su pregunta · casa de la colita · a la izquierda */ padding: 18px 26px; background: var(--burbuja-respuesta); transform-origin: 100% 0; animation: nace .5s cubic-bezier(.16, .84, .36, 1) .06s both; } @keyframes nace { from { opacity: 0; transform: scale(.55); filter: blur(10px); } 55% { opacity: 1; } to { opacity: 1; transform: none; filter: blur(0); } } /* Blanco pleno sobre la tinta: 16:1. Y renglón más suelto que en el resto de la página —1.6— porque un bloque de cinco renglones en negativo se lee peor apretado, no mejor. */ .faq__a p { animation: enciende .34s ease .26s both; margin: 0; font-size: 19px; line-height: 1.6; color: #FFFFFF; } @keyframes enciende { from { opacity: 0; } to { opacity: 1; } } /* ── LA COLITA ─────────────────────────────────────────────────────────────── Dos pseudo-elementos y ni una imagen: el primero es un cuadro del color de la burbuja con UNA esquina redonda, pegado a la esquina de abajo; el segundo es del color del PAPEL y le muerde la parte de afuera. Lo que queda entre los dos es el gancho. ⚠ EL SEGUNDO ES DEL COLOR DEL PAPEL, así que esto SOLO funciona sobre fondo liso. El día que la sección lleve fondo distinto —o la página deje el blanco puro—, este `var(--papel)` miente y la colita aparece recortada sobre un parche blanco. Si eso pasa, la salida es `mask` en vez de tapar. Y NO SE SALEN DEL RENGLÓN: los 14 px de margen de cada burbuja son exactamente la casa de estos 14 px de colita. Ver la nota de la forma común. */ .faq__q::before, .faq__q::after, .faq__a::before, .faq__a::after { content: ''; position: absolute; bottom: 0; } .faq__q::before { right: -8px; width: 24px; height: 22px; background: var(--burbuja-pregunta); border-bottom-left-radius: 16px; transition: background .2s ease; } .faq__q:hover::before { background: var(--burbuja-pregunta-viva); } .faq__q::after { right: -14px; width: 14px; height: 22px; background: var(--papel); border-bottom-left-radius: 12px; } .faq__a::before { left: -8px; width: 24px; height: 22px; background: var(--burbuja-respuesta); border-bottom-right-radius: 16px; } .faq__a::after { left: -14px; width: 14px; height: 22px; background: var(--papel); border-bottom-right-radius: 12px; } /* ── LA SALIDA DE LA FAQ ───────────────────────────────────────────────────── «¿Te quedó una duda?» y un solo botón. Se alinea con la lista de preguntas —mismo ancho máximo— para que se lea como el último renglón de la lista y no como una sección aparte: es una puerta, no un momento nuevo. En pantalla chica se envuelve y el botón cae debajo, en vez de encogerse. */ .salida { margin-top: clamp(36px, 4.4vw, 60px); max-width: min(var(--texto), 800px); margin-inline: auto; text-align: left; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; } .salida__duda { font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -0.02em; } /* ── EL CIERRE ─────────────────────────────────────────────────────────────── LA CAJA DEJÓ DE SER ANGOSTA el 2026-08-24, y por una razón medible. El titular era «Habla con Milo. / Construye tu equipo.» —dos frases cortas— y el Director lo cambió por «Cuéntanos qué necesitas. / Tu equipo se encarga.». A 72 px la primera pide unos 890 px de renglón; la .franja --angosta dejaba 668 px de caja útil, así que las DOS frases se partían y el cierre quedaba en cuatro renglones cortados a media idea. Con la franja normal la caja da 1048 px y cada frase cae entera en su renglón, que es como está escrita. Lo que sí se queda recogido es lo de abajo: el hueco y los botones vuelven a los 860 px de antes, porque ahí el ancho no lo pide nadie y una escena de 1048 px se comería el remate. */ .seccion--cierre { padding-block: var(--aire-seccion); } .seccion--cierre .titular { max-width: none; } /* Ya NO dice `.hueco`: el visual del cierre es una imagen desde el 2026-08-24, y esa regla habría dejado de aplicar en silencio — el mismo defecto que rompió el lado de las duplas. Se nombra la escena. */ .seccion--cierre .escena, .seccion--cierre .puertas { max-width: 860px; margin-inline: auto; } /* ── EL PIE ────────────────────────────────────────────────────────────────── Dejó de ser una línea el 2026-08-24, cuando el Director pidió «todos los apartados de legal y todo eso». Tres columnas arriba, y abajo el nombre con el lugar y el año. Las columnas van con `auto-fit` y un mínimo de 190 px: con eso pasan de tres a dos y a una según quepan, sin una sola media query. Un pie es el lugar donde más barato sale que la retícula se acomode sola. ⚠ Dos de estos enlaces —/privacidad y /terminos— apuntan a páginas que no existen. Está anotado como bloqueador en el HTML; no es cosa del CSS. */ .pie { border-top: 1px solid var(--linea); padding-block: clamp(48px, 5vw, 72px) 36px; } .pie__alto { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(28px, 4vw, 64px); } .pie__titulo { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinta); } .pie__enlaces { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; align-items: flex-start; } .pie__enlaces a { font-size: 15px; color: var(--tinta-suave); text-decoration: none; transition: color .18s ease; } .pie__enlaces a:hover { color: var(--tinta); } /* El renglón de abajo se separa con filete —no con más aire— porque arriba ya hay tres columnas y el aire solo las haría flotar. */ .pie__bajo { margin-top: clamp(40px, 4.4vw, 64px); padding-top: 26px; border-top: 1px solid var(--linea); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } /* La palabra vuelve aquí el 2026-08-24: el cierre se quedó sin visual, así que éste es el único lugar donde la página se firma. */ .pie__palabra { width: auto; height: 17px; opacity: .55; } .pie__nota { font-size: 14px; color: var(--tinta-suave); } /* La línea del stack va DEBAJO del renglón de copyright, no a su lado: es un dato de otra naturaleza —qué hay por dentro— y compartir renglón con el copyright lo convertiría en letra chica de aviso legal. Un poco más apagada todavía: está para el que la busca. */ .pie__stack { margin-top: 14px; } .pie__stack .pie__nota { font-size: 13px; opacity: .8; } /* ── LA APARICIÓN ──────────────────────────────────────────────────────────── Fade corto con un desplazamiento de 16 px y nada más — la dirección pide que la animación haga sentir viva la página, no que demuestre que sabemos animar. Solo se esconde si el JS puso html.js-motion; sin JS o con reduced-motion, todo nace en su estado final. */ .js-motion [data-entra] { opacity: 0; transform: translateY(16px); } .js-motion [data-entra].dentro { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22,.61,.36,1) calc(var(--i, 0) * 90ms), transform .7s cubic-bezier(.22,.61,.36,1) calc(var(--i, 0) * 90ms); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js-motion [data-entra] { opacity: 1; transform: none; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ── PANTALLAS CHICAS ──────────────────────────────────────────────────────── La versión de teléfono NO es el escritorio encogido: la retícula de dos columnas se vuelve una sola con el visual primero, los planes se apilan, las fichas se apilan, y la navegación se recoge en el botón de menú. */ /* EL ESCALÓN INTERMEDIO DE LOS PLANES — nuevo el 2026-08-25, y lo trajo la cuarta tarjeta. Con tres columnas se podía saltar de la fila a la pila de un golpe; con cuatro no: entre 1000 y 1240 la tarjeta baja de 210 px útiles y la escena queda del tamaño de un sello. Dos y dos mantienen la tarjeta ancha y siguen leyéndose como una tabla de planes, que es lo que es. ⚠ VA ANTES del bloque de 1000 px a propósito: los dos aciertan por debajo de 1000, y el que gana es el último. Si se mueve arriba, los planes se quedan en dos columnas en el teléfono. */ @media (max-width: 1240px) { .planes { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; } } @media (max-width: 1000px) { /* Con una sola columna la tarjeta pasa de 278 px útiles a más de 400, así que el tope de la escena puede subir. Lo que manda el tamaño real sigue siendo el ancho de la tarjeta, no el gusto: esto es solo el techo. */ :root { --alto-3d-plan: clamp(96px, 12vw, 160px); } .planes { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } /* Seis fichas en una hilera se vuelven ilegibles antes que nada más: bajan a tres por hilera aquí, antes de que la retícula grande se rompa. */ } @media (max-width: 860px) { /* ── EL MENÚ DE TELÉFONO ────────────────────────────────────────────────── Hasta el 2026-08-25 esto era `display:none` y el botón de las tres rayas no abría nada: los cinco destinos de arriba sencillamente NO existían en un celular. Era el hueco más grande que le quedaba al frente. NO SE DUPLICAN LOS ENLACES. La misma `.barra__nav` de escritorio se vuelve el panel: se cae en columna debajo de la barra. Un segundo juego de enlaces sería un cuarto sitio donde acordarse de agregar «Contactar». CERRADO SE ESCONDE CON `visibility`, no con `display`. Con `display:none` no hay transición que valga; con `visibility:hidden` sí la hay y —esto es lo que importa— los enlaces salen del recorrido del tabulador, así que quien navega con teclado no cae en un menú invisible. */ .barra__nav { display: flex; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 4px var(--margen) 18px; background: var(--papel); border-bottom: 1px solid var(--linea); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .barra--abierta .barra__nav { visibility: visible; opacity: 1; transform: none; } /* 17 px y 52 de alto: el dedo necesita blanco de sobra y el pulgar no acierta a un renglón de 15 px con 4 de aire. Los 44 px que pide Apple son el PISO, no la meta. */ .barra__nav a { padding: 15px 0; font-size: 17px; color: var(--tinta); border-top: 1px solid var(--linea); } .barra__nav a:first-child { border-top: 0; } .barra__nav a[aria-current="page"] { color: var(--marca-fuerte); font-weight: 600; } .barra .barra__menu { display: inline-flex; } /* El botón cambia de cara al abrir: tres rayas → equis. Sin esto, quien lo abrió no tiene por dónde cerrarlo salvo adivinando. */ .barra__equis { display: none; } .barra--abierta .barra__rayas { display: none; } .barra--abierta .barra__equis { display: inline; } .franja.barra__caja { height: 72px; } /* La barra se encoge, y con ella lo que hay que restarle a la entrada. */ .seccion--entrada { --alto-barra: 72px; } /* Se cambia el TOKEN, no la altura suelta: el «Beta» se sube en proporción a --alto-marca, así que con esto se recoloca solo. */ .barra__marca { --alto-marca: 30px; gap: 9px; } .dupla { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 48px); } /* El visual manda arriba en teléfono, sin importar de qué lado iba. Mismo motivo que arriba para no decir `.hueco`: los visuales ya no son todos huecos. */ .dupla > :last-child { order: -1; } /* APILADO CAMBIA EL TOPE, no solo la proporción: aquí el visual ya no está AL LADO del texto, está encima, así que vuelve a compartir pantalla con él y le toca `--visual`, el tope de apilado. El piso de 280 px es para que no se vuelva una estampilla en una pantalla baja: por debajo de eso una captura de producto deja de leerse y el remedio es peor. */ .hueco--alto { aspect-ratio: 3 / 4; max-width: max(280px, calc(var(--visual) * 3 / 4)); } .cuerpo { max-width: none; } .entrada__titular { max-width: none; } .rejilla { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { /* En teléfono la fila de tres deja de ser fila: tres personajes de 100 px con su frase debajo, en 350 px de ancho, no se leen. Vuelven a columna. */ /* Apilados vuelve a haber ancho de sobra, así que la escala sube otra vez. */ .cuatro { grid-template-columns: 1fr; gap: clamp(32px, 8vw, 56px); } :root { --alto-3d-remate: min(clamp(130px, 30vw, 240px), 20svh); } } @media (max-width: 520px) { .plan { padding: 24px; } /* En 350 px de ancho la burbuja necesita casi todo el renglón, o la pregunta se parte en cinco líneas para dejar un margen que nadie mira. La colita conserva su casa de 14 px: encogerla la vuelve una rebaba. */ .faq__q { padding: 14px 44px 14px 18px; max-width: calc(100% - 22px); } .faq__mas { right: 18px; } .faq__a { padding: 15px 20px; max-width: calc(100% - 22px); } .faq__a p { font-size: 17px; } .faq__q, .faq__a { border-radius: 20px; } .rejilla { grid-template-columns: 1fr; } /* La ficha de andamio medía 150 px porque dentro cabía la palabra «herramienta». Un logo no necesita ese ancho, y con fichas grandes en 350 px de pantalla solo se ven tres: la cinta deja de leerse como cinta. */ .cinta__tren > * { width: 88px; } .cinta__marca img { width: calc(38px * var(--esc, 1)); height: calc(38px * var(--esc, 1)); } /* La salida de la FAQ no necesita regla aquí: el `flex-wrap` la apila sola y el botón se queda a su ancho natural, que es como se ven todos los demás botones de la página. Se probó estirarlo a lo ancho y se ve peor: un botón de borde de 350 px parece una caja de formulario, no una puerta. */ }