/* ============================================================================ NOSOTROS — hoja de estilo ---------------------------------------------------------------------------- SEGUNDA hoja, y chica a propósito. Todo lo que esta página comparte con la landing —tokens, letra, barra, botones, huecos, pie, la aparición al entrar— lo trae `landing-nueva.css`, que se carga ANTES. Aquí abajo solo vive lo que nace en esta página. POR QUÉ NO SE METIÓ ESTO DENTRO DE `landing-nueva.css`. Aquélla es la hoja de LA landing y ya pesa lo suyo; una regla nueva ahí puede alcanzar a la página principal sin que nadie lo note. Separadas, la landing no puede romperse por nada de lo que se escriba en este archivo. ⚠ LA PÁGINA CAMBIÓ ENTERA EL 2026-08-25 con el texto firmado del Director (`TEXTO_NOSOTROS_2026-08-25.md`). Antes eran dos renglones y dos fichas vacías; ahora son cuatro partes con una historia de cinco párrafos. Lo que mandó el cambio de forma está explicado abajo, regla por regla. ========================================================================== */ /* ── LA COLUMNA, A LA IZQUIERDA Y CENTRADA EN LA PANTALLA ──────────────────── ORDEN DEL DIRECTOR (2026-08-25): «centra el texto de la página… el texto sigue normal del lado izquierdo pero centrado». SON DOS COSAS DISTINTAS Y HAY QUE SEPARARLAS, porque confundirlas costó un intento entero. Lo que se centra es la COLUMNA dentro de la pantalla; lo que NO se centra es el texto DENTRO de la columna, que sigue alineado a la izquierda. El primer intento puso `text-align: center` y centró las dos cosas: cinco párrafos de prosa donde cada renglón empieza en un punto distinto. No era eso. POR QUÉ NO ESTABA YA CENTRADA, si `.franja` trae `margin-inline: auto` desde la landing. Porque la caja centrada no centra su CONTENIDO: la caja medía 1000 px y las piezas de adentro son más angostas —el titular topa en 760 y los párrafos en 640—, así que se pegaban a la orilla izquierda de la caja y ahí se quedaban. En un monitor de 1600, el centro de los párrafos caía en 716 px y el de la pantalla en 800: por eso se veía cargada a la izquierda. LA CAJA SE MIDE DESDE EL TITULAR, no al revés. `760 + los dos márgenes` deja el área de contenido en 760 exactos en CUALQUIER ancho —y no solo en el que salía el número redondo—, así que la columna es la del titular y `.franja` la centra sola. Antes eran 1000 px fijos y el área útil crecía o encogía con el margen, que es lo que descentraba. Y LOS PÁRRAFOS SUELTAN SU TOPE DE 640. Con él puesto compartían el borde izquierdo con el titular pero terminaban 120 px antes por la derecha, y esa asimetría es justo lo que se ve como «cargado a la izquierda» aunque la columna esté centrada al píxel: el ojo no mide la caja, mide dónde caen los renglones. Con las dos orillas compartidas, la página entera es UN bloque y ese bloque sí se lee centrado. A 1600 px son 760 px a 22 px de letra ≈ 69 caracteres por renglón, que sigue dentro del ancho de lectura cómodo. */ .franja.nosotros__caja { max-width: calc(760px + 2 * var(--margen)); } .nosotros__caja .cuerpo { max-width: none; } /* ── 1 · LA IDEA ─────────────────────────────────────────────────────────── */ /* El rótulo de arriba. `.etiqueta` ya existía en la hoja de la landing —14 px, semibold, gris— y no la usaba nadie: es exactamente esto, el nombre de la sección dicho en voz baja antes de que hable el titular. */ .nosotros__rotulo { margin-bottom: clamp(14px, 1.4vw, 20px); } /* EL TITULAR, UN ESCALÓN ABAJO DEL DE LA LANDING (72 px). No por gusto: son 79 caracteres, y a 72 px dentro de 760 caen en cuatro o cinco renglones de tres palabras cada uno — un titular que se lee como una lista. A 54 px son tres renglones largos, que es como se lee una frase. */ .nosotros__tesis { font-size: clamp(32px, 4.2vw, 54px); } .relato { margin-top: var(--aire-titulo); } /* El aire entre párrafos es MENOR que el aire entre bloques: los cinco son la misma historia, no cinco ideas sueltas. */ .relato > * + * { margin-top: clamp(18px, 1.6vw, 26px); } /* EL GIRO SE FUE de la página el 2026-08-25, por orden del Director. Era la bisagra del relato —«Cualquiera puede hacerlo / Pero no debería tener que hacerlo», en tinta plena y con respiro largo— y era el único cambio de tinta de la página. LA REGLA SE QUEDA, sin nadie que la use, y es a propósito: son cuatro líneas, el texto está guardado en `TEXTO_NOSOTROS_2026-08-25.md`, y si vuelve —o si otra frase del relato pide el mismo peso— vuelve con su tratamiento exacto en vez de reinventarse a ojo. Si en tres meses sigue sin usarse, se borra. */ .relato__giro { margin-top: clamp(26px, 2.4vw, 38px); color: var(--tinta); font-weight: 500; } /* LA CONCLUSIÓN NO PAGA AIRE ARRIBA. Dos secciones seguidas suman su aire y entre la historia y su remate quedaban ~250 px: eso no es un respiro, es un cambio de tema, y aquí no hay cambio de tema —«Por eso creamos Almago.» es el final de la frase que empezó arriba—. Quitándole el de arriba, el aire de abajo de la historia queda solo, y eso sí es un respiro. ⚠ LAS OTRAS DOS COSTURAS SÍ PAGAN LAS DOS. De la conclusión a las personas y de las personas a los perfiles sí hay cambio de tema: ahí el silencio largo está haciendo su trabajo. */ .nosotros__conclusion { padding-top: 0; } /* ── 2 · LA CONCLUSIÓN Y 3 · LA PARTE HUMANA ───────────────────────────────── Los dos titulares de abajo son hermanos: mismo tamaño, un escalón por debajo del titular de la página. Si midieran lo mismo que él, la página tendría tres titulares gritando y ninguno mandando. LA ALTURA DE RENGLÓN SUBE A 1.15 —el `.h1` viene en 1.05— porque los dos llevan el nombre como IMAGEN, y esa imagen mide 1.16 em: cuelga por arriba y por abajo de su renglón. Con 1.05 roza lo que tiene encima. */ .nosotros__remate { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.15; } /* Las tres líneas «Sin…». Mismo tamaño que el cuerpo pero en tinta plena: son el remate, no la explicación. El respiro entre ellas lo pone `.golpe`. */ .nosotros__sin { margin-top: clamp(24px, 2.2vw, 34px); color: var(--tinta); font-weight: 500; } /* Los dos nombres, juntos y en un solo renglón. Más grande que el cuerpo y en tinta: es una firma, no un pie de foto. */ .nosotros__firma { margin-top: var(--aire-titulo); font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; letter-spacing: -0.014em; } /* LA FOTO DE LOS DOS. `.hueco--retrato` viene de la landing centrada y topando en 630 px, y aquí las dos estorban. El tope sube a 760 para compartir el borde izquierdo y el derecho con el titular —que es lo que hace que la página se lea como UNA columna y no como piezas sueltas de anchos distintos— y el centrado propio se apaga, porque la columna ya viene centrada desde arriba y centrar dos veces vuelve a descolgar la foto del texto. Es «foto grande» —palabra del Director— sin volverse un panorámico que se coma la sección. */ .nosotros__juntos { max-width: 760px; margin-inline: 0; } /* MISIÓN Y VISIÓN, debajo de la foto (Director, 2026-08-25). Tres reglas y ninguna es de gusto: EL AIRE DE ARRIBA es `--aire-bloque`, no `--aire-seccion`: esto sigue siendo la misma parte de la página que el nombre y la foto —quiénes somos y para qué estamos—, y separarlo como si fuera otra sección lo desconectaría de la cara que acaba de aparecer. Es el mismo respiro que la foto toma sobre la firma. EL AIRE ENTRE LOS DOS PÁRRAFOS es el corto de `.relato`, el mismo que usa la historia de arriba. Son misión y visión —dos tiempos de una sola idea—, no dos apartados; con el respiro largo se leerían como dos secciones sin título. EL ANCHO NO SE TOCA. Hereda los 760 px de la caja, así que arranca en el mismo borde izquierdo que el titular, la firma y la foto. Eso es lo que sostiene la columna única de la página; darle un ancho propio la rompería en este punto, que es justo donde más se nota porque viene después de una imagen. */ .nosotros__proposito { margin-top: min(var(--aire-bloque), 6svh); } .nosotros__proposito > * + * { margin-top: clamp(18px, 1.6vw, 26px); } /* ── 4 · LOS PERFILES ──────────────────────────────────────────────────────── Hereda `.dupla` —dos columnas que se apilan solas a 860 px, la misma regla que el resto del sitio—, y le cambia dos cosas: EL ANCHO Y LA POSICIÓN. La versión anterior topaba en 880 px y se centraba sola, porque eran dos fichas de foto y nombre y a lo ancho de la franja quedaban a dos metros una de la otra. Ahora cada bloque lleva rol, descripción y estudios: pide los 760 px completos de la columna, y arranca en el mismo borde izquierdo que todo lo demás de la página. LA ALINEACIÓN VERTICAL. `.dupla` centra porque allá empareja un texto con un visual de otro alto. Aquí los dos bloques tienen la misma estructura, así que se alinean por ARRIBA: el día que una descripción salga más larga que la otra, los dos retratos siguen a la misma altura. */ .nosotros__dupla { max-width: none; margin-inline: 0; align-items: start; } /* EL RETRATO, CUADRADO Y CHICO. Cuadrado porque es el único encuadre que no decide nada por el que todavía no manda su foto: uno vertical pide plano de medio cuerpo, uno panorámico pide ambiente. Y chico —300 px— porque el Director lo pidió así: «Foto pequeña o retrato individual». A ancho de columna serían dos caras de 450 px y la página dejaría de hablar de Almago. */ .persona__foto { max-width: 300px; margin-inline: 0; } .persona__nombre { margin-top: clamp(20px, 2vw, 28px); font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } .persona__rol { margin-top: 6px; } /* La descripción suelta el tope de 640 px del cuerpo: dentro de media columna nunca lo alcanza, y dejarlo puesto solo confunde a quien lea el CSS. */ .persona__linea { margin-top: clamp(14px, 1.4vw, 20px); max-width: none; } .persona__estudios { margin-top: clamp(12px, 1.2vw, 16px); } .persona__enlace { margin-top: clamp(16px, 1.6vw, 22px); } /* EL LINKEDIN QUE TODAVÍA NO EXISTE. Es el mismo andamio punteado de los visuales —misma orilla, mismo casi-blanco, misma nota gris— porque es exactamente lo mismo: algo declarado que aún no llega. Va en línea y del tamaño de un enlace, no de una caja: lo que falta es una dirección, no una imagen. `.hueco` viene con `display:flex` y `padding:24px`; aquí se vuelve una pastilla en línea. Sin `aspect-ratio`, que es lo que convierte a los otros huecos en cajas con proporción. AL LLENARSE, ESTA CLASE SE VA: el `` se cambia por un `` con la dirección y el punteado desaparece con él. No hay que rediseñar la ficha. */ .hueco--chip { display: inline-flex; padding: 8px 14px; border-radius: var(--curva-chica); } .hueco--chip .hueco__nota { font-size: 13px; } /* ── LA VUELTA ───────────────────────────────────────────────────────────── */ .nosotros__volver { margin-top: var(--aire-titulo); } /* ── TELÉFONO ──────────────────────────────────────────────────────────────── UNA SOLA REGLA, Y ES PARA DESHACER UNA HERENCIA QUE AQUÍ MIENTE. `landing-nueva.css` trae, dentro de este mismo corte de 860 px: .dupla > :last-child { order: -1; } Allá está bien y es deliberado: en la landing las duplas emparejan TEXTO con VISUAL, el texto va primero en el documento —que es lo primero que oye un lector de pantalla— y al apilarse el visual tiene que subir al frente. Aquí las dos mitades no son texto y visual: son DOS PERSONAS. Con la regla heredada, en teléfono Gael aparecía ARRIBA de Diego —el orden se invertía solo—. Se vio en la captura de 390 px, no en el código. `order: 0` las devuelve al orden del documento. No se toca `.dupla` en la otra hoja: aquella regla es correcta para lo que ella empareja. */ @media (max-width: 860px) { .nosotros__dupla > :last-child { order: 0; } } /* ── TELÉFONO CHICO: LOS RETRATOS SE ENCOGEN ───────────────────────────────── La foto de los dos es 3:2, así que su ALTO sale de su ancho; los retratos son cuadrados y topan en 300 px fijos. Por debajo de ~510 px de pantalla la foto de los dos baja de 300 px de alto y los retratos individuales pasan a verse MÁS GRANDES que ella — la jerarquía se invierte sola, y la parte que el Director puso primero queda de miniatura. Se vio en la captura de 390 px, no en ninguna medida: los dos números —300 px de retrato, 229 px de foto— eran los correctos cada uno por su lado. En porcentaje, los retratos siguen a la foto hacia abajo en vez de plantarse. */ @media (max-width: 560px) { .persona__foto { max-width: 56%; } } /* ── EL AVATAR DE LA CONCLUSIÓN — CHICO Y EN LA ESQUINA ────────────────────── UNO SOLO EN TODA LA PÁGINA, y es deliberado: abajo vienen tres fotos de personas reales —la de los dos juntos y los dos retratos— y cada avatar de más les compite. Va en la conclusión porque es el único momento de esta página que habla del producto. ⚠ ORDEN DEL DIRECTOR (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». Nació a escala de RETRATO y pegado al filo izquierdo de la columna: dos cosas mal a la vez, el tamaño y el sitio. Cambian las dos. 1. EL TAMAÑO — `--alto-3d-esquina`, el escalón chico de la regla de escala (el porqué del escalón, en `landing-nueva.css`). La constante SIGUE mandando el ancho: 1.0682 es el alto del personaje entre el ancho del archivo, medido con alfa, y es lo que hace que éste y el verde de la demo midan exactamente igual entre sí aunque los archivos sean de anchos distintos. Un `max-width` a mano rompería esa regla sin que ninguna medida lo delatara. 2. EL SITIO — sale del flujo y se cuelga de la esquina inferior derecha de la SECCIÓN, no de la columna. Esta página es una columna angosta centrada en la pantalla, así que a los lados sobra aire de verdad: a 1600 px hay 420 px libres a la derecha del último renglón, y el avatar ocupa 157. Queda a `clamp(24px, 3vw, 60px)` del filo de la pantalla — cerca de la esquina, sin pegarse a ella, que es exactamente lo que se pidió. ⚠ POR QUÉ EL CORTE ESTÁ EN 1120 px Y NO MÁS ABAJO. El aire de los lados se encoge más rápido que el avatar: a 1120 px quedan 180 px libres y el avatar pide 149 —31 px de holgura—; a 1000 px quedan 120 y pide 142, o sea que se montaría 22 px encima de los renglones. Está medido, no supuesto. Por debajo del corte vuelve al flujo y se va al filo DERECHO de la columna: sigue siendo una esquina, la del bloque en vez de la de la pantalla, y es la única que queda cuando ya no hay márgenes que usar. */ .escena--nosotros { max-width: calc(var(--alto-3d-esquina) / 1.0682); margin-inline-start: auto; margin-inline-end: 0; margin-top: clamp(20px, 2vw, 32px); } /* ⚠ EL SITIO EXACTO LO AJUSTÓ EL DIRECTOR (2026-08-25): «el morado bájalo un poco y hazlo más a la izquierda». Las dos cosas se movieron, y el horizontal dejó de ser un número suelto para volverse una regla. EL HORIZONTAL — VA CENTRADO EN LA BANDA LIBRE. La banda libre es lo que hay entre el filo derecho del texto y el filo de la pantalla, y el avatar se planta justo a la mitad. Estaba a `clamp(24px, 3vw, 60px)` del filo de la pantalla, que en un monitor de 1600 lo dejaba con 215 px de aire de un lado y 48 del otro: contra el borde, no en la esquina. Centrado, a 1600 le quedan 131 y 131. Y NO ES SOLO ESTÉTICA, es lo que hace que el número aguante todos los anchos. Un `clamp` en vw se mueve más rápido que la banda: 8vw a 1600 px cabía de sobra y a 1120 se montaba 25 px encima de los renglones. Centrado en la banda, el ajuste es grande donde hay aire y se vuelve nulo donde ya no lo hay —a 1120 px queda casi donde estaba, porque ahí no hay nada que mover—. EL FILO DEL TEXTO SE CALCULA, no se mide a mano: la caja de esta página es `--titular + 2 * --margen` y está centrada, así que su filo de texto cae siempre a `(100vw − --titular) / 2` del borde de la pantalla. Los dos `--margen` se cancelan solos. Comprobado contra la medida real: 420 px a 1600, 260 a 1280, 180 a 1120. EL VERTICAL — bajó de `clamp(20px, 2.4vw, 56px)` a casi cero, unos 29 px más abajo en un monitor de 1600. Cabe porque debajo de esta sección no hay contenido sino aire: la siguiente arranca con su propio respiro de 104 px. */ @media (min-width: 1120px) { .nosotros__conclusion { position: relative; } .escena--nosotros { position: absolute; inset-inline-end: calc((((100vw - var(--titular)) / 2) - (var(--alto-3d-esquina) / 1.0682)) / 2); bottom: clamp(0px, 0.6vw, 12px); margin: 0; } }