/* ============================================================= ARANCAO — SISTEMA VISUAL Un solo sistema, dos tempos. La raíz y todas las experiencias, presentes y futuras, usan este archivo sin modificarlo. Para un nicho nuevo: copiar la carpeta, cambiar la evidencia. Nunca cambiar los tokens. Un sistema visual por rubro se lee como fábrica de plantillas. Última revisión: 29/08/2026 ============================================================= */ /* ------------------------------------------------------------- 1. FUENTES Autohospedadas siempre. Nunca por CDN: el diseño ES la tipografía, así que la tipografía no puede ser un tercero. font-display:block en las dos familias que sostienen la grilla —con preload desde el mismo origen el bloqueo es de milisegundos— y swap en la mono, que no mueve la maqueta. En el de cada pieza, precargar SOLO lo que pinta arriba del pliegue. Con font-display:block, lo que no se precarga queda invisible hasta que llega su archivo. ------------------------------------------------------------- */ @font-face{font-family:"Newsreader";font-style:normal;font-weight:300;font-display:block;src:url("/fonts/newsreader-300.woff2") format("woff2")} @font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:block;src:url("/fonts/newsreader-400.woff2") format("woff2")} @font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:block;src:url("/fonts/newsreader-500.woff2") format("woff2")} @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:block;src:url("/fonts/plex-sans-400.woff2") format("woff2")} @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:block;src:url("/fonts/plex-sans-500.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/plex-mono-400.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/plex-mono-500.woff2") format("woff2")} /* ------------------------------------------------------------- 2. TOKENS Ningún color de texto sale de una opacidad. Nunca. Cada valor lleva anotado su ratio de contraste medido. ------------------------------------------------------------- */ :root{ /* Superficies */ --papel:#ffffff; --papel-tono:#EDF1F5; /* 1.14 sobre papel — banda de respiro, no señal de estado */ --marino:#10243f; /* 15.60 sobre papel */ --marino-hondo:#0a1729; /* fondo del bloque invertido */ /* Texto sobre papel */ --tinta:#33445c; /* 9.90 sobre papel · 8.72 sobre el tono */ --tinta-suave:#5C6B7F; /* 5.43 sobre papel · 4.79 sobre el tono */ /* Texto sobre marino hondo */ --cuerpo-inv:#C9D3DE; /* 11.87 */ --tinta-suave-inv:#93A3B5; /* 6.98 */ /* Reglas. Dos niveles: una estructura bloques, la otra separa ítems. */ --regla-est:#C3CCD6; --regla:#DBE1E8; --regla-inv:#33455C; /* Familias */ --serif:"Newsreader",Georgia,"Times New Roman",serif; --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace; /* Métrica */ --ancho:660px; /* con padding-inline 26px → 608 útiles */ --medida:33em; /* ~74 caracteres por línea en todos los cuerpos */ --aire:clamp(72px,13vw,132px); --radio:2px; /* en todo. 8 y 12px dan aire de app; 2px da aire de imprenta */ } /* ------------------------------------------------------------- 3. BASE Y REGLA DE CONSTRUCCIÓN .bloque = ritmo vertical y fondo · .env = eje horizontal. NUNCA las dos clases en el mismo elemento: siempre section.bloque > div.env. Mientras .bloque no toque el eje horizontal y .env no toque el vertical, el atajo `padding` no puede volver a pisar la grilla. ------------------------------------------------------------- */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--papel); color:var(--marino); font-family:var(--sans); font-size:17px; line-height:1.62; font-synthesis:none; -webkit-font-smoothing:antialiased; } a{color:inherit} :focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:var(--radio)} .env{max-width:var(--ancho);margin:0 auto;padding-inline:26px} .bloque{padding-block:var(--aire)} .bloque + .bloque{border-top:1px solid var(--regla-est)} /* ------------------------------------------------------------- 4. TIPOGRAFÍA Newsreader: titulares y citas. IBM Plex Sans: cuerpo. IBM Plex Mono: rótulos, fechas, numerales y fuentes. REGLA DE USO DE LA MONO — la más importante del sistema: la mono es para DATO VERIFICABLE (fecha, fuente, numeral de orden, etiqueta de procedencia) y para ORIENTACIÓN ESTRUCTURAL (rótulo de sección, índice de paso). Nunca para prosa, nunca para énfasis. Es lo que hace que la evidencia se lea como registro y no como decoración. ------------------------------------------------------------- */ h1,.titular{ font-family:var(--serif);font-weight:300; font-size:clamp(31px,6.6vw,46px);line-height:1.22; letter-spacing:-.014em;margin:0 0 26px;text-wrap:balance; } h2,.titular-2{ font-family:var(--serif);font-weight:400; font-size:clamp(25px,4.6vw,33px);line-height:1.26; letter-spacing:-.012em;margin:0 0 20px;text-wrap:balance; } h3,.titular-3{ font-family:var(--serif);font-weight:400; font-size:clamp(21px,3.8vw,26px);line-height:1.3; letter-spacing:-.01em;margin:0 0 11px; } p{margin:0 0 18px;color:var(--tinta);max-width:var(--medida)} p:last-child{margin-bottom:0} /* Bajada del titular */ .bajada{font-size:19px;line-height:1.6;color:var(--tinta);max-width:30em} /* Declaración: una frase en VOZ DE ARANCAO dentro del flujo. No es titular —no abre nada—, ni cita —no es voz de otro—, ni bajada —no acompaña a un titular—. Es el remate: la línea donde una escena cierra su sentido, o la afirmación del bloque de cierre. Serif porque comparte la voz de los titulares; corta porque una declaración de cinco renglones ya no declara. En invertido no lleva regla propia: .invertido p (0,1,1) gana sobre .declaracion (0,1,0) y la pasa a --cuerpo-inv sin tocar el cuerpo serif. */ .declaracion{ font-family:var(--serif);font-weight:400; font-size:clamp(20px,3.6vw,25px);line-height:1.4; letter-spacing:-.008em;color:var(--marino);max-width:24em; } /* Cita textual: serif, porque es voz de otro */ .cita{ font-family:var(--serif);font-weight:400; font-size:clamp(20px,3.4vw,22px);line-height:1.4; color:var(--marino);max-width:26em;margin:0; } /* Rótulo de sección */ .rotulo{ font-family:var(--mono);font-size:11.5px;font-weight:500; letter-spacing:.15em;text-transform:uppercase; color:var(--tinta-suave);margin:0 0 22px; } /* Fuente y fecha. El pie de toda evidencia. */ .fuente{ font-family:var(--mono);font-size:11.5px; color:var(--tinta-suave);margin:0; } .fuente a{border-bottom:1px solid var(--tinta-suave);text-decoration:none} /* Numeral de orden. Va a color pleno cuando el orden es información —el método, los resultados de una SERP— porque entonces no es decoración. */ .orden{ font-family:var(--mono);font-size:11.5px;font-weight:500; letter-spacing:.13em;color:var(--marino);display:block;margin-bottom:9px; } /* ------------------------------------------------------------- 4 bis. ARTEFACTO CITADO La reproducción de una interfaz ajena —una barra de búsqueda, un post, una ficha de otro sitio— conserva la forma del original: su radio, su proporción, su marco. No se rediseña con los tokens de Arancao. Todo lo demás va a --radio. EL LÍMITE: un artefacto citado reproduce algo que existe y que el prospecto puede ir a ver. No es una licencia para decorar. Si no se puede señalar el original, no es artefacto citado. Se marca con .citado para que la excepción sea explícita en el marcado y no una decisión olvidada dentro de una hoja. ------------------------------------------------------------- */ .citado{border-radius:revert} /* ------------------------------------------------------------- 5. EL SIGNO Punto sobre la regla: un lugar ocupado sobre un terreno. Favicon, viñeta y separador. No hay logo, y no hace falta: sin casos ni clientes, un isotipo abstracto es una promesa sin prueba — lo contrario del argumento de la marca. ------------------------------------------------------------- */ .signo{display:inline-flex;align-items:center;width:34px;vertical-align:middle} .signo i{width:7px;height:7px;border-radius:50%;background:var(--marino);flex:none} .signo u{flex:1;height:1px;background:var(--regla-est);text-decoration:none} /* Eje vertical con punto: la firma estructural del sistema. Se usa como rail de una secuencia y como ancla de un hero. */ .eje{width:1px;background:var(--regla-est);position:relative} .eje::before{ content:"";position:absolute;left:-3px;top:0; width:7px;height:7px;border-radius:50%;background:var(--marino); } /* ------------------------------------------------------------- 6. BLOQUE INVERTIDO Cada pieza tiene AL MENOS UNO, y siempre en el mismo rol: el momento de cierre. En la raíz es «quién está detrás». En una experiencia, el cierre de la última escena. Esto es lo que hace que dos páginas distintas se reconozcan como la misma mano. El marino no es un acento del botón: estructura la página. ------------------------------------------------------------- */ .invertido{background:var(--marino-hondo);color:#fff} .bloque + .invertido{border-top:0} .invertido .rotulo{color:var(--tinta-suave-inv)} .invertido h1,.invertido h2,.invertido h3, .invertido .titular,.invertido .titular-2,.invertido .titular-3{color:#fff} .invertido p{color:var(--cuerpo-inv)} .invertido .fuente{color:var(--tinta-suave-inv)} .invertido hr,.invertido .separador{border:0;border-top:1px solid var(--regla-inv);margin:34px 0 24px} .invertido :focus-visible{outline-color:#fff} /* ------------------------------------------------------------- 7. ACCIÓN Un solo botón sólido por pantalla. Dentro del bloque invertido se da vuelta: blanco sobre marino. ------------------------------------------------------------- */ .boton{ display:inline-block; background:var(--marino);color:#fff; text-decoration:none; font-family:var(--sans);font-size:16px;font-weight:500; padding:17px 32px;border:0;border-radius:var(--radio); cursor:pointer;transition:background .18s ease; } .boton:hover{background:var(--marino-hondo)} .invertido .boton{background:#fff;color:var(--marino-hondo)} /* 17.99 */ .invertido .boton:hover{background:var(--cuerpo-inv)} /* Acota bajo el botón: «Respondo yo.» */ .acota{margin-top:16px;font-size:14.5px;color:var(--tinta-suave)} .invertido .acota{color:var(--tinta-suave-inv)} /* ------------------------------------------------------------- ENLACE SECUNDARIO El que no compite: recoge al que no está listo. Mismo componente que el WhatsApp de la cabecera de la raíz. Texto con regla, nunca un segundo botón: dos botones del mismo peso convierten una decisión tomada en una comparación, y el que dudaba elige siempre lo que compromete menos. ------------------------------------------------------------- */ .enlace-secundario{ display:inline-block; /* Sirve igual en y en