@charset "UTF-8";
/* ============================================================
ITERACION DE DISEÑO — replica del diseño hecho en Lovable
(typo-centric-canvas.lovable.app)
Se carga DESPUES de style.css para poder sobrescribirlo.
Aislado a proposito: para revertir, se quita el de
index.html y case-saas-dashboard.html.
Sistema extraido de la referencia:
- Archivo 700 en titulos, tracking negativo fuerte (-3.5%)
- Instrument Serif italica como acento en una palabra
- Work Sans 400 en cuerpo, 20px
- Hero verde muy oscuro con texto crema; resto en claro
============================================================ */
:root {
/* --- paleta (convertida desde los oklch de la referencia) --- */
--c-dark: #062615; /* verde casi negro: fondo del hero */
--c-cream: #FBF9D2; /* crema: texto sobre el verde */
--c-ink: #133C25; /* verde de titulos sobre fondo claro */
--c-body: #2B4739; /* verde suavizado para parrafos en claro */
--c-light: #FFFFFF; /* fondo de las secciones de contenido */
--c-rule: rgba(19, 60, 37, 0.16);
--c-rule-dark: rgba(251, 249, 210, 0.22);
--c-rule-soft: #D7E1DA; /* lineas de la lista y borde de tags */
--c-muted: #485E50; /* numeros, tags y labels */
--c-accent-ink:#2C6E49; /* hover de titulos */
/* --- escala tipografica --- */
--t-h1: clamp(2.75rem, 9.4vw, 8.5rem); /* -> 136px */
--t-h2: clamp(2.125rem, 5vw, 5rem); /* -> 80px */
--t-h3: clamp(1.375rem, 2.2vw, 2rem);
--t-body: clamp(1.0625rem, 1.4vw, 1.25rem);/* -> 20px */
--t-micro: 0.75rem; /* eyebrows / tags */
--track-tight: -0.035em;
/* --- ritmo --- */
--sp-section: clamp(4.5rem, 10vw, 10rem);
--sp-block: clamp(2rem, 4vw, 3.5rem);
/* Ancho de las imagenes "angostas". Unica perilla: cambiando este valor se
achican o agrandan todas las figuras que usan --narrow o .case-media-narrow. */
--w-figure-narrow: 720px;
}
/* ---------- base ---------- */
body {
background-color: var(--c-light);
font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
font-size: var(--t-body);
line-height: 1.6;
color: var(--c-body);
-webkit-font-smoothing: antialiased; }
body p, body li { color: var(--c-body); font-size: var(--t-body); line-height: 1.6; }
p { margin-bottom: 1.2em; }
body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6,
#proyectos .display-4 { color: var(--c-ink); }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.display-1, .display-2, .display-3, .display-4 {
font-family: 'Archivo', system-ui, sans-serif;
font-weight: 700;
letter-spacing: var(--track-tight);
line-height: 1.02; }
h1, .h1 { font-size: var(--t-h1); }
h2, .h2 { font-size: var(--t-h2); margin-top: 0; margin-bottom: 0.4em; line-height: 1.03; }
h3, .h3 { font-size: var(--t-h3); line-height: 1.1; }
h5, .h5 { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.2; }
a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em;
text-decoration-thickness: 1px; }
a:hover { opacity: 0.65; color: inherit; }
/* acento en italica serif, como la referencia.
text-transform/color en none|inherit porque style.css tiene
"#lupe span { text-transform: uppercase; color: #676666 }" y le ganaba. */
.serif-accent {
font-family: 'Instrument Serif', Georgia, serif !important;
font-weight: 400 !important;
font-style: italic !important;
text-transform: none !important;
letter-spacing: -0.025em;
color: inherit !important; }
/* eyebrow / label en mayusculas espaciadas */
.eyebrow {
font-family: 'Work Sans', system-ui, sans-serif;
font-size: var(--t-micro);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase; }
/* ---------- navbar ---------- */
.navbar { background: var(--c-dark); height: auto; padding: 1.25rem 0; }
.navbar.scrolled, .navbar.navbar-toggled-show { background: var(--c-dark); }
/* .navbar es position:fixed, asi que el contenedor tiene que reservar su
alto o el contenido queda tapado. No poner 0 aca. */
.navbar-container { min-height: 84px; }
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
color: var(--c-cream);
font-family: 'Work Sans', sans-serif;
font-size: var(--t-micro);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none; }
.navbar-brand img { width: 150px; filter: brightness(0) invert(1) sepia(0.25) saturate(0.6); }
/* Icono del menu mobile.
Dos motivos por los que no se veia sobre el navbar oscuro nuevo:
1) style.css trae "img[data-inject-svg] { opacity: 0 }" — el icono
queda invisible hasta que SVGInjector lo cambia por un