@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url("../fonts/inter-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url("../fonts/inter-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 600 800;
font-display: swap;
src: url("../fonts/manrope-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 600 800;
font-display: swap;
src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
--brand-900: #0c2340; 
--brand-800: #123258;
--brand-700: #17457a; 
--brand-600: #1d5796; 
--brand-100: #dbe5f1;
--brand-50: #eff3f8; 
--accent-700: #8a5616;
--accent-600: #95601a; 
--accent-300: #e0b880;
--accent-50: #fbf3e8;
--surface: #ffffff;
--surface-2: #f7f8fa;
--surface-3: #eef0f4;
--surface-inverse: var(--brand-900);
--text: #10233a; 
--text-strong: #071a2e;
--text-muted: #556b7b; 
--text-inverse: #ffffff;
--text-inverse-muted: #b6c4d4;
--border: #e3e7ec;
--border-strong: #cfd6df;
--border-inverse: rgba(255, 255, 255, 0.16);
--success: #14804a;
--success-bg: #e8f5ee;
--warning: #b45309;
--warning-bg: #fdf3e7;
--error: #b42318;
--error-bg: #fdecea;
--whatsapp: #0f7a6d; 
--whatsapp-hover: #0b6255;
--font-heading: "Manrope", "Segoe UI", system-ui, sans-serif;
--font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
--text-display: clamp(2.35rem, 1.55rem + 3.1vw, 3.75rem);
--text-h1: clamp(2rem, 1.45rem + 2.1vw, 2.875rem);
--text-h2: clamp(1.625rem, 1.35rem + 1.05vw, 2.125rem);
--text-h3: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
--text-h4: 1.0625rem;
--text-lead: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
--text-body: 1rem;
--text-sm: 0.9375rem;
--text-xs: 0.8125rem;
--leading-tight: 1.14;
--leading-snug: 1.3;
--leading-normal: 1.55;
--leading-relaxed: 1.68;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.06em;
--measure: 68ch;
--measure-narrow: 58ch;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-32: 8rem;
--section-y: clamp(4rem, 7vw, 7rem);
--section-y-lg: clamp(5rem, 9vw, 9rem);
--container: 71.25rem; 
--container-wide: 82.5rem;
--container-narrow: 46rem;
--gutter: clamp(1.25rem, 4vw, 2rem);
--header-h: 4.5rem;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-full: 999px;
--shadow-xs: 0 1px 2px rgba(12, 35, 64, 0.05);
--shadow-md: 0 10px 30px -12px rgba(12, 35, 64, 0.22);
--duration-fast: 150ms;
--duration-base: 200ms;
--duration-slow: 320ms;
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--z-header: 100;
--z-dock: 90;
--z-overlay: 200;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + var(--space-4));
}
body {
min-height: 100vh;
min-height: 100svh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
img {
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
background: none;
border: 0;
cursor: pointer;
}
ul[class],
ol[class] {
list-style: none;
padding: 0;
}
a {
color: inherit;
text-decoration: none;
}
table {
border-collapse: collapse;
}
:where(h1, h2, h3, h4, h5, h6, p) {
overflow-wrap: break-word;
}
[hidden] {
display: none !important;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
body {
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-normal);
color: var(--text);
background-color: var(--surface);
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
h1,
h2,
h3,
h4 {
font-family: var(--font-heading);
color: var(--text-strong);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
font-weight: 700;
text-wrap: balance;
}
h1 {
font-size: var(--text-h1);
}
h2 {
font-size: var(--text-h2);
}
h3 {
font-size: var(--text-h3);
line-height: var(--leading-snug);
}
h4 {
font-size: var(--text-h4);
line-height: var(--leading-snug);
}
p {
text-wrap: pretty;
}
strong,
b {
font-weight: 600;
color: var(--text-strong);
}
a {
color: var(--brand-700);
transition: color var(--duration-fast) var(--ease);
}
a:hover {
color: var(--brand-600);
}
:focus-visible {
outline: 2px solid var(--accent-600);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
::selection {
background: var(--brand-100);
color: var(--text-strong);
}
.eyebrow {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--accent-600);
margin-bottom: var(--space-3);
}
.lead {
font-size: var(--text-lead);
line-height: var(--leading-relaxed);
color: var(--text-muted);
max-width: var(--measure);
}
.label {
font-size: var(--text-xs);
font-family: var(--font-body);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--brand-700);
margin-bottom: var(--space-2);
}
.label--muted {
color: var(--text-muted);
}
.tag {
display: inline-block;
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--text-muted);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-full);
padding: 0.25rem 0.7rem;
}
.icon-sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.icon {
width: 1.5rem;
height: 1.5rem;
flex: none;
fill: none;
stroke: currentColor;
}
.icon--sm {
width: 1.125rem;
height: 1.125rem;
}
.icon--lg {
width: 1.75rem;
height: 1.75rem;
}
.icon--solid {
fill: currentColor;
stroke: none;
}
.visually-hidden {
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;
border: 0;
}
.skip-link {
position: absolute;
top: var(--space-2);
left: var(--space-2);
z-index: calc(var(--z-overlay) + 1);
padding: var(--space-3) var(--space-5);
background: var(--brand-900);
color: var(--text-inverse);
border-radius: var(--radius-sm);
font-weight: 600;
transform: translateY(-200%);
transition: transform var(--duration-base) var(--ease);
}
.skip-link:focus-visible {
transform: translateY(0);
color: var(--text-inverse);
}
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--wide {
max-width: var(--container-wide);
}
.container--narrow {
max-width: var(--container-narrow);
}
.section {
padding-block: var(--section-y);
}
.section--tinted {
background: var(--surface-2);
}
.section--brand {
background: var(--brand-900);
color: var(--text-inverse);
}
.section--brand h2,
.section--brand h3 {
color: var(--text-inverse);
}
.section--brand .lead {
color: var(--text-inverse-muted);
}
.section--brand .eyebrow {
color: var(--accent-300);
}
.section--tight {
padding-block: calc(var(--section-y) * 0.6);
}
.section__head {
max-width: var(--measure);
margin-bottom: var(--space-12);
}
.section__head--center {
margin-inline: auto;
text-align: center;
}
.section__head p {
margin-top: var(--space-4);
}
.section__bar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-6);
flex-wrap: wrap;
margin-bottom: var(--space-10);
}
.section__bar .section__head {
margin-bottom: 0;
}
.grid {
display: grid;
gap: var(--space-6);
}
.grid--2 {
grid-template-columns: 1fr;
}
.grid--3,
.grid--4 {
grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
.grid--2,
.grid--3,
.grid--4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.split {
display: grid;
gap: var(--space-10);
align-items: start;
}
@media (min-width: 64rem) {
.split {
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: var(--space-16);
}
.split--even {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.split__aside--sticky {
position: sticky;
top: calc(var(--header-h) + var(--space-6));
}
}
.prose {
max-width: var(--measure);
}
.prose > * + * {
margin-top: var(--space-5);
}
.prose p {
color: var(--text-muted);
line-height: var(--leading-relaxed);
}
.prose h3 {
margin-top: var(--space-10);
}
.rule {
border: 0;
border-top: 1px solid var(--border);
margin-block: var(--section-y);
}
.accordion {
border-top: 1px solid var(--border);
}
.accordion__item {
border-bottom: 1px solid var(--border);
}
.accordion__heading {
margin: 0;
font-size: inherit;
font-family: inherit;
letter-spacing: 0;
}
.accordion__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
width: 100%;
padding: var(--space-5) 0;
text-align: left;
font-family: var(--font-heading);
font-size: 1.0625rem;
font-weight: 600;
color: var(--text-strong);
transition: color var(--duration-fast) var(--ease);
}
.accordion__trigger:hover {
color: var(--brand-700);
}
.accordion__chevron {
flex: none;
color: var(--text-muted);
transition: transform var(--duration-base) var(--ease);
}
.accordion__trigger[aria-expanded="true"] .accordion__chevron {
transform: rotate(180deg);
color: var(--brand-700);
}
.accordion__panel {
display: grid;
grid-template-rows: 0fr;
visibility: hidden;
transition: grid-template-rows var(--duration-base) var(--ease),
visibility 0s linear var(--duration-base);
}
.accordion__panel.is-open {
grid-template-rows: 1fr;
visibility: visible;
transition: grid-template-rows var(--duration-base) var(--ease),
visibility 0s linear 0s;
}
.accordion__content {
overflow: hidden;
}
.accordion__content p {
padding-bottom: var(--space-5);
color: var(--text-muted);
line-height: var(--leading-relaxed);
max-width: var(--measure);
}
.no-js .accordion__panel {
grid-template-rows: 1fr;
visibility: visible;
}
.no-js .accordion__chevron {
display: none;
}
.btn {
--btn-h: 2.875rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--btn-h);
padding-inline: var(--space-6);
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
line-height: 1.2;
text-align: center;
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease),
border-color var(--duration-fast) var(--ease),
color var(--duration-fast) var(--ease),
transform var(--duration-fast) var(--ease);
}
.btn:active {
transform: translateY(1px);
}
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
.btn--lg {
--btn-h: 3.25rem;
padding-inline: var(--space-8);
font-size: var(--text-body);
}
.btn--block {
width: 100%;
}
.btn--primary {
background: var(--brand-700);
color: var(--text-inverse);
}
.btn--primary:hover {
background: var(--brand-600);
color: var(--text-inverse);
}
.btn--secondary {
background: var(--surface);
border-color: var(--border-strong);
color: var(--text-strong);
}
.btn--secondary:hover {
border-color: var(--brand-700);
color: var(--brand-700);
background: var(--surface);
}
.btn--ghost {
background: transparent;
color: var(--brand-700);
padding-inline: var(--space-4);
}
.btn--ghost:hover {
background: var(--brand-50);
color: var(--brand-700);
}
.btn--whatsapp {
background: var(--whatsapp);
color: var(--text-inverse);
}
.btn--whatsapp:hover {
background: var(--whatsapp-hover);
color: var(--text-inverse);
}
.on-brand .btn--secondary,
.section--brand .btn--secondary {
background: transparent;
border-color: var(--border-inverse);
color: var(--text-inverse);
}
.on-brand .btn--secondary:hover,
.section--brand .btn--secondary:hover {
border-color: var(--text-inverse);
background: rgba(255, 255, 255, 0.06);
color: var(--text-inverse);
}
.btn[data-loading="true"] {
pointer-events: none;
opacity: 0.75;
}
.btn[data-loading="true"]::before {
content: "";
width: 1rem;
height: 1rem;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: btn-spin 700ms linear infinite;
}
@keyframes btn-spin {
to {
transform: rotate(360deg);
}
}
.btn-group {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
@media (max-width: 24rem) {
.btn-group .btn {
width: 100%;
}
}
.service-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
transition: border-color var(--duration-base) var(--ease),
transform var(--duration-base) var(--ease);
}
.service-card:hover {
border-color: var(--brand-100);
transform: translateY(-2px);
}
.service-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: var(--radius-sm);
background: var(--brand-50);
color: var(--brand-700);
margin-bottom: var(--space-2);
}
.service-card__title {
font-size: 1.125rem;
}
.service-card__text {
color: var(--text-muted);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
flex: 1;
}
.service-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-2);
font-size: var(--text-sm);
font-weight: 600;
color: var(--brand-700);
}
.service-card__link .icon {
transition: transform var(--duration-fast) var(--ease);
}
.service-card:hover .service-card__link .icon {
transform: translateX(3px);
}
.service-detail {
padding-block: var(--space-12);
border-top: 1px solid var(--border);
scroll-margin-top: calc(var(--header-h) + var(--space-6));
}
.service-detail:first-of-type {
border-top: 0;
padding-top: 0;
}
.service-detail__head {
display: flex;
gap: var(--space-5);
align-items: flex-start;
margin-bottom: var(--space-8);
}
.service-detail__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.25rem;
height: 3.25rem;
flex: none;
border-radius: var(--radius-sm);
background: var(--brand-50);
color: var(--brand-700);
}
.service-detail__title {
font-size: var(--text-h2);
}
.service-detail__lead {
margin-top: var(--space-3);
color: var(--text-muted);
font-size: var(--text-lead);
line-height: var(--leading-relaxed);
max-width: var(--measure);
}
.service-detail__body {
display: grid;
gap: var(--space-8);
}
.service-detail__block p {
color: var(--text-muted);
max-width: var(--measure);
}
.service-detail__block--pricing {
padding: var(--space-5);
background: var(--accent-50);
border-left: 3px solid var(--accent-600);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.service-detail__block--pricing p {
color: var(--text);
}
.service-detail__foot {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-8);
}
@media (min-width: 48rem) {
.service-detail__body {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-8) var(--space-12);
}
.service-detail__block--pricing {
grid-column: 1 / -1;
}
}
.principle {
display: flex;
flex-direction: column;
padding: var(--space-6);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.principle__head {
display: flex;
gap: var(--space-4);
align-items: flex-start;
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--border);
}
.principle__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
flex: none;
border-radius: var(--radius-sm);
background: var(--brand-900);
color: var(--accent-300);
}
.principle__title {
font-size: 1.25rem;
}
.principle__claim {
margin-top: var(--space-1);
font-size: var(--text-sm);
color: var(--accent-600);
font-weight: 500;
}
.principle__body {
display: grid;
gap: var(--space-5);
padding-block: var(--space-5);
flex: 1;
}
.principle__col p {
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
color: var(--text-muted);
}
.principle__foot {
padding-top: var(--space-4);
border-top: 1px solid var(--border);
}
@media (min-width: 48rem) {
.principle__body {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-8);
}
}
.project-card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color var(--duration-base) var(--ease);
}
.project-card:hover {
border-color: var(--border-strong);
}
.project-card__media {
display: block;
padding: var(--space-5);
background: var(--surface-2);
border-bottom: 1px solid var(--border);
}
.project-card__placeholder {
display: block;
aspect-ratio: 16 / 9;
border-radius: var(--radius-sm);
background: var(--surface-3);
}
.project-card__body {
padding: var(--space-5) var(--space-6) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-2);
flex: 1;
}
.project-card__meta {
font-size: var(--text-xs);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.project-card__title {
font-size: 1.125rem;
}
.project-card__title a:hover {
color: var(--brand-700);
}
.project-card__text {
font-size: var(--text-sm);
color: var(--text-muted);
line-height: var(--leading-relaxed);
}
.project-full {
padding-block: var(--space-16);
border-top: 1px solid var(--border);
scroll-margin-top: calc(var(--header-h) + var(--space-6));
}
.project-full:first-of-type {
border-top: 0;
padding-top: var(--space-4);
}
.project-full__title {
font-size: var(--text-h2);
}
.project-full__summary {
margin-top: var(--space-4);
font-size: var(--text-lead);
line-height: var(--leading-relaxed);
color: var(--text-muted);
max-width: var(--measure);
}
.project-full__type {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-4);
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--text-muted);
}
.project-full__grid {
display: grid;
gap: var(--space-10);
margin-top: var(--space-10);
}
.narrative-block + .narrative-block {
margin-top: var(--space-6);
}
.narrative-block p {
color: var(--text-muted);
line-height: var(--leading-relaxed);
max-width: var(--measure);
}
.narrative-block--problem {
padding-left: var(--space-5);
border-left: 3px solid var(--border-strong);
}
.narrative-block--solution {
padding-left: var(--space-5);
border-left: 3px solid var(--brand-700);
}
.project-full__aside {
display: grid;
gap: var(--space-6);
align-content: start;
}
.project-full__media {
margin: 0;
}
.project-full__media figcaption {
margin-top: var(--space-3);
font-size: var(--text-xs);
color: var(--text-muted);
}
.project-full__features {
padding: var(--space-5);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
@media (min-width: 64rem) {
.project-full__grid {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: var(--space-16);
}
}
.steps {
display: grid;
gap: var(--space-6);
counter-reset: step;
}
.step {
display: flex;
gap: var(--space-5);
padding: var(--space-6);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.step__no {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--accent-600);
padding-top: 0.15rem;
}
.step__title {
font-size: 1.125rem;
}
.step__duration {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-2);
font-size: var(--text-xs);
color: var(--text-muted);
}
.step__text {
margin-top: var(--space-3);
font-size: var(--text-sm);
color: var(--text-muted);
line-height: var(--leading-relaxed);
}
@media (min-width: 48rem) {
.steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.cert-grid {
display: grid;
gap: var(--space-4);
}
.cert {
display: flex;
gap: var(--space-4);
align-items: flex-start;
padding: var(--space-5);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.cert__issuer {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
flex: none;
border-radius: var(--radius-sm);
background: var(--brand-50);
color: var(--brand-700);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 600;
}
.cert__body {
flex: 1;
min-width: 0;
}
.cert__title {
font-size: var(--text-body);
line-height: var(--leading-snug);
}
.cert__meta {
margin-top: var(--space-1);
font-size: var(--text-sm);
color: var(--text-muted);
}
.cert__serial {
display: block;
margin-top: var(--space-2);
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--text-muted);
word-break: break-all;
}
.cert__serial--none {
font-style: italic;
opacity: 0.75;
}
.cert__category {
display: none;
}
@media (min-width: 48rem) {
.cert-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 75rem) {
.cert-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.edu-list {
display: grid;
}
.edu {
display: flex;
gap: var(--space-4);
align-items: flex-start;
padding-block: var(--space-5);
border-bottom: 1px solid var(--border);
}
.edu:last-child {
border-bottom: 0;
}
.edu__mark {
color: var(--brand-700);
padding-top: 0.1rem;
}
.edu__body {
flex: 1;
min-width: 0;
}
.edu__school {
font-size: var(--text-body);
}
.edu__program {
margin-top: var(--space-1);
font-size: var(--text-sm);
color: var(--text-muted);
}
.edu__note {
display: inline-block;
margin-left: var(--space-2);
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--accent-600);
}
.edu__years {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--text-muted);
white-space: nowrap;
padding-top: 0.2rem;
}
.service-card__link {
padding-block: var(--space-1);
min-height: 1.75rem;
}
.channel {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.channel__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: var(--radius-sm);
background: var(--brand-50);
color: var(--brand-700);
}
.channel--whatsapp .channel__icon {
background: var(--success-bg);
color: var(--whatsapp);
}
.channel__title {
font-size: 1.0625rem;
}
.channel__value {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--text-strong);
word-break: break-word;
}
.channel__text {
font-size: var(--text-sm);
color: var(--text-muted);
line-height: var(--leading-relaxed);
flex: 1;
}
.channel .btn {
margin-top: var(--space-2);
}
.map {
position: relative;
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--surface-2);
aspect-ratio: 16 / 10;
}
.map__facade {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
padding: var(--space-6);
text-align: center;
background-image: linear-gradient(
to right,
rgba(12, 35, 64, 0.06) 1px,
transparent 1px
),
linear-gradient(to bottom, rgba(12, 35, 64, 0.06) 1px, transparent 1px),
linear-gradient(115deg, transparent 47%, rgba(12, 35, 64, 0.1) 47.5% 49%, transparent 49.5%);
background-size: 2.5rem 2.5rem, 2.5rem 2.5rem, 100% 100%;
cursor: pointer;
width: 100%;
color: var(--text-muted);
}
.map__pin {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: var(--radius-full);
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-md);
color: var(--brand-700);
}
.map__label {
font-size: var(--text-sm);
max-width: 32ch;
}
.map__label strong {
display: block;
color: var(--text-strong);
margin-bottom: var(--space-1);
}
.map iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.brief {
padding: var(--space-6);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
@media (min-width: 48rem) {
.brief {
padding: var(--space-10);
}
}
.brief__head {
margin-bottom: var(--space-8);
}
.brief__head h2 {
font-size: var(--text-h3);
}
.brief__head p {
margin-top: var(--space-3);
color: var(--text-muted);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
max-width: var(--measure);
}
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.15rem 0.6rem;
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0;
background: var(--surface-3);
color: var(--text-muted);
vertical-align: middle;
}
.badge--live {
background: var(--success-bg);
color: var(--success);
}
.badge--live::before {
content: "";
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: currentColor;
}
.chip-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.chip-list--tight {
margin-top: var(--space-4);
}
.chip {
padding: 0.3rem 0.7rem;
border: 1px solid var(--border);
border-radius: var(--radius-full);
background: var(--surface);
font-size: var(--text-xs);
color: var(--text-muted);
}
.chip--sm {
font-size: 0.75rem;
padding: 0.2rem 0.6rem;
}
.check-list {
display: grid;
gap: var(--space-3);
}
.check-list__item {
display: flex;
gap: var(--space-3);
align-items: flex-start;
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--text-muted);
}
.check-list__item .icon {
color: var(--brand-700);
margin-top: 0.15rem;
}
.app-frame {
display: block;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--surface);
box-shadow: var(--shadow-xs);
}
.app-frame__bar {
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.5rem 0.65rem;
background: var(--surface-3);
border-bottom: 1px solid var(--border);
}
.app-frame__bar i {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--border-strong);
}
.app-frame__viewport {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16 / 10;
padding: var(--space-4);
background: var(--surface-2);
}
.app-frame img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
border-radius: 2px;
}
.callout {
margin-top: var(--space-8);
padding: var(--space-6);
border-radius: var(--radius-md);
background: var(--surface-2);
border: 1px solid var(--border);
}
.callout__title {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-h4);
margin-bottom: var(--space-3);
}
.callout p {
color: var(--text-muted);
line-height: var(--leading-relaxed);
max-width: var(--measure);
}
.callout--parametric {
background: var(--accent-50);
border-color: var(--accent-300);
}
.callout--parametric .callout__title .icon {
color: var(--accent-600);
}
.compare {
display: grid;
gap: var(--space-5);
}
.compare__col {
padding: var(--space-6);
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: var(--surface);
}
.compare__col--bad {
background: var(--surface-2);
}
.compare__col--good {
border-color: var(--brand-100);
background: var(--brand-50);
}
.compare__head {
display: flex;
align-items: center;
gap: var(--space-3);
padding-bottom: var(--space-4);
margin-bottom: var(--space-4);
border-bottom: 1px solid var(--border);
}
.compare__col--good .compare__head {
border-bottom-color: var(--brand-100);
}
.compare__title {
font-size: var(--text-h4);
}
.compare__list {
display: grid;
gap: var(--space-4);
}
.compare__list li {
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
color: var(--text-muted);
padding-left: var(--space-5);
position: relative;
}
.compare__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55rem;
width: 0.5rem;
height: 1px;
background: var(--border-strong);
}
.compare__col--good .compare__list li::before {
background: var(--brand-700);
}
@media (min-width: 48rem) {
.compare {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.stack-group {
padding-block: var(--space-6);
border-top: 1px solid var(--border-inverse);
}
.stack-group:first-child {
border-top: 0;
padding-top: 0;
}
.stack-group__name {
font-size: var(--text-h4);
margin-bottom: var(--space-4);
color: var(--text-inverse);
}
.section--brand .chip {
background: rgba(255, 255, 255, 0.05);
border-color: var(--border-inverse);
color: var(--text-inverse-muted);
}
.filter-bar {
display: flex;
gap: var(--space-2);
overflow-x: auto;
padding-bottom: var(--space-3);
margin-bottom: var(--space-8);
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.filter-chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
flex: none;
min-height: 2.5rem;
padding: 0 var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-full);
background: var(--surface);
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-muted);
white-space: nowrap;
transition: border-color var(--duration-fast) var(--ease),
color var(--duration-fast) var(--ease),
background-color var(--duration-fast) var(--ease);
}
.filter-chip:hover {
border-color: var(--border-strong);
color: var(--text-strong);
}
.filter-chip.is-active {
background: var(--brand-900);
border-color: var(--brand-900);
color: var(--text-inverse);
}
.filter-chip__count {
font-family: var(--font-mono);
font-size: 0.75rem;
opacity: 0.7;
}
.empty-state {
padding: var(--space-12) var(--space-6);
text-align: center;
border: 1px dashed var(--border-strong);
border-radius: var(--radius-md);
color: var(--text-muted);
}
.empty-state__title {
font-size: var(--text-h4);
color: var(--text-strong);
margin-bottom: var(--space-2);
}
.notice {
display: flex;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
line-height: var(--leading-normal);
}
.notice--info {
background: var(--brand-50);
color: var(--brand-800);
}
.notice--success {
background: var(--success-bg);
color: var(--success);
}
.notice--error {
background: var(--error-bg);
color: var(--error);
}
.notice .icon {
flex: none;
margin-top: 0.1rem;
}
.cta-band {
background: var(--brand-900);
color: var(--text-inverse);
padding-block: var(--section-y);
}
.cta-band__inner {
display: grid;
gap: var(--space-8);
align-items: center;
}
.cta-band__title {
color: var(--text-inverse);
font-size: var(--text-h2);
max-width: 22ch;
}
.cta-band__text {
margin-top: var(--space-4);
color: var(--text-inverse-muted);
line-height: var(--leading-relaxed);
max-width: 50ch;
}
.cta-band__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.cta-band__note {
margin-top: var(--space-5);
font-size: var(--text-xs);
color: var(--text-inverse-muted);
display: flex;
align-items: center;
gap: var(--space-2);
}
@media (min-width: 64rem) {
.cta-band__inner {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: var(--space-16);
}
.cta-band__actions {
justify-content: flex-end;
}
}
.site-footer {
background: var(--brand-900);
color: var(--text-inverse-muted);
border-top: 1px solid var(--border-inverse);
padding-block: var(--space-16) var(--space-8);
font-size: var(--text-sm);
}
.site-footer a {
color: var(--text-inverse-muted);
}
.site-footer a:hover {
color: var(--text-inverse);
}
.footer__grid {
display: grid;
gap: var(--space-10);
}
.footer__brand-name {
font-family: var(--font-heading);
font-size: 1.125rem;
font-weight: 700;
color: var(--text-inverse);
}
.footer__tagline {
margin-top: var(--space-3);
max-width: 32ch;
line-height: var(--leading-relaxed);
}
.footer__title {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-inverse);
margin-bottom: var(--space-4);
}
.footer__list {
display: grid;
gap: var(--space-3);
}
.footer__contact {
display: grid;
gap: var(--space-3);
}
.footer__contact a {
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.social-link {
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.social-link__handle {
color: rgba(255, 255, 255, 0.45);
font-size: var(--text-xs);
}
.footer__bottom {
margin-top: var(--space-12);
padding-top: var(--space-6);
border-top: 1px solid var(--border-inverse);
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
justify-content: space-between;
align-items: center;
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.5);
}
@media (min-width: 48rem) {
.footer__grid {
grid-template-columns: 1.4fr 1fr 1.2fr;
gap: var(--space-12);
}
}
.action-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-dock);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
padding: var(--space-3) var(--gutter)
calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
background: var(--surface);
border-top: 1px solid var(--border);
}
.action-bar .btn {
min-height: 2.75rem;
padding-inline: var(--space-3);
}
body {
padding-bottom: 4.5rem;
}
@media (min-width: 64rem) {
.action-bar {
display: none;
}
body {
padding-bottom: 0;
}
}
.footer__list a,
.footer__contact a {
display: inline-flex;
align-items: center;
min-height: 1.75rem;
}
.form {
display: grid;
gap: var(--space-5);
}
.field {
display: grid;
gap: var(--space-2);
}
.field__label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-strong);
}
.field__optional {
font-weight: 400;
color: var(--text-muted);
}
.field__hint {
font-size: var(--text-xs);
color: var(--text-muted);
}
.field__control {
width: 100%;
min-height: 2.875rem;
padding: var(--space-3) var(--space-4);
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
font-size: var(--text-body);
color: var(--text);
transition: border-color var(--duration-fast) var(--ease),
box-shadow var(--duration-fast) var(--ease);
}
.field__control::placeholder {
color: var(--text-muted);
opacity: 0.8;
}
.field__control:hover {
border-color: var(--text-muted);
}
.field__control:focus {
outline: none;
border-color: var(--brand-700);
box-shadow: 0 0 0 3px var(--brand-100);
}
.field__control:disabled {
background: var(--surface-2);
color: var(--text-muted);
cursor: not-allowed;
}
textarea.field__control {
min-height: 8rem;
resize: vertical;
line-height: var(--leading-normal);
}
select.field__control {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23556b7b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-3) center;
background-size: 1.25rem;
padding-right: var(--space-10);
}
.field[data-invalid="true"] .field__control {
border-color: var(--error);
}
.field[data-invalid="true"] .field__control:focus {
box-shadow: 0 0 0 3px var(--error-bg);
}
.field__error {
display: none;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--text-xs);
color: var(--error);
}
.field[data-invalid="true"] .field__error {
display: flex;
}
.field__error .icon {
width: 1rem;
height: 1rem;
margin-top: 0.05rem;
}
.option-group {
display: grid;
gap: var(--space-3);
}
@media (min-width: 30rem) {
.option-group {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.option {
position: relative;
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 2.875rem;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: var(--text-sm);
transition: border-color var(--duration-fast) var(--ease),
background-color var(--duration-fast) var(--ease);
}
.option:hover {
border-color: var(--text-muted);
}
.option input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.option__mark {
width: 1.125rem;
height: 1.125rem;
flex: none;
border: 1px solid var(--border-strong);
border-radius: 50%;
transition: border-color var(--duration-fast) var(--ease),
box-shadow var(--duration-fast) var(--ease);
}
.option input:checked ~ .option__mark {
border-color: var(--brand-700);
border-width: 5px;
}
.option:has(input:checked) {
border-color: var(--brand-700);
background: var(--brand-50);
}
.option:has(input:focus-visible) {
outline: 2px solid var(--accent-600);
outline-offset: 2px;
}
.form__status:empty {
display: none;
}
.form__foot {
display: grid;
gap: var(--space-3);
}
.form__note {
font-size: var(--text-xs);
color: var(--text-muted);
display: flex;
gap: var(--space-2);
align-items: flex-start;
}
.form__note .icon {
flex: none;
margin-top: 0.05rem;
color: var(--text-muted);
}
.message-preview {
padding: var(--space-4) var(--space-5);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: var(--text-xs);
line-height: var(--leading-relaxed);
color: var(--text-muted);
white-space: pre-wrap;
word-break: break-word;
max-height: 12rem;
overflow-y: auto;
}
.fieldset {
border: 0;
padding: 0;
margin: 0;
min-width: 0;
}
.fieldset > legend {
padding: 0;
}
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
background: var(--surface);
border-bottom: 1px solid transparent;
transition: border-color var(--duration-base) var(--ease),
box-shadow var(--duration-base) var(--ease);
}
.site-header[data-scrolled="true"] {
border-bottom-color: var(--border);
box-shadow: var(--shadow-xs);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
min-height: var(--header-h);
}
.brand {
display: inline-flex;
align-items: center;
gap: var(--space-3);
color: var(--text-strong);
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: var(--tracking-tight);
}
.brand:hover {
color: var(--text-strong);
}
.brand__avatar {
width: 2.25rem;
height: 2.25rem;
border-radius: var(--radius-full);
object-fit: cover;
object-position: 50% 22%;
border: 1px solid var(--border);
background: var(--surface-2);
}
.brand__name {
font-size: 1.0625rem;
line-height: 1.1;
}
.brand__role {
display: block;
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
color: var(--text-muted);
letter-spacing: 0;
}
.nav {
display: none;
}
.nav__list {
display: flex;
align-items: center;
gap: var(--space-1);
}
.nav__link {
position: relative;
display: inline-block;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-muted);
transition: color var(--duration-fast) var(--ease),
background-color var(--duration-fast) var(--ease);
}
.nav__link:hover {
color: var(--text-strong);
background: var(--surface-2);
}
.nav__link.is-current {
color: var(--text-strong);
font-weight: 600;
}
.nav__link.is-current::after {
content: "";
position: absolute;
left: var(--space-4);
right: var(--space-4);
bottom: 0;
height: 2px;
background: var(--accent-600);
border-radius: var(--radius-full);
}
.header__actions {
display: none;
align-items: center;
gap: var(--space-3);
}
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
color: var(--text-strong);
background: var(--surface);
}
.nav-toggle:hover {
background: var(--surface-2);
}
.nav-toggle__close {
display: none;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
display: none;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__close {
display: block;
}
.mobile-nav {
position: fixed;
inset: var(--header-h) 0 0 0;
z-index: var(--z-header);
background: var(--surface);
border-top: 1px solid var(--border);
padding: var(--space-6) 0 var(--space-10);
overflow-y: auto;
overscroll-behavior: contain;
display: flex;
flex-direction: column;
}
.mobile-nav[hidden] {
display: none;
}
.mobile-nav__list {
display: flex;
flex-direction: column;
}
.mobile-nav__link {
display: block;
padding: var(--space-4) 0;
border-bottom: 1px solid var(--border);
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 600;
color: var(--text-strong);
}
.mobile-nav__link[aria-current="page"] {
color: var(--brand-700);
}
.mobile-nav__actions {
margin-top: var(--space-8);
display: grid;
gap: var(--space-3);
}
.mobile-nav__contact {
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid var(--border);
display: grid;
gap: var(--space-3);
font-size: var(--text-sm);
color: var(--text-muted);
}
.mobile-nav__contact a {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--text-muted);
}
.mobile-nav__contact a:hover {
color: var(--brand-700);
}
body.has-open-nav {
overflow: hidden;
}
@media (min-width: 64rem) {
.nav,
.header__actions {
display: flex;
}
.nav-toggle,
.mobile-nav {
display: none !important;
}
}
.hero {
position: relative;
padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6rem);
background: var(--surface);
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(
to right,
rgba(12, 35, 64, 0.045) 1px,
transparent 1px
),
linear-gradient(to bottom, rgba(12, 35, 64, 0.045) 1px, transparent 1px);
background-size: 3.5rem 3.5rem;
mask-image: radial-gradient(120% 90% at 70% 15%, #000 20%, transparent 72%);
-webkit-mask-image: radial-gradient(
120% 90% at 70% 15%,
#000 20%,
transparent 72%
);
pointer-events: none;
}
.hero__inner {
position: relative;
display: grid;
gap: var(--space-10);
align-items: center;
}
.hero__title {
font-size: var(--text-display);
font-weight: 800;
max-width: 18ch;
}
.hero__title em {
font-style: normal;
color: var(--brand-700);
}
.hero__text {
margin-top: var(--space-5);
font-size: var(--text-lead);
line-height: var(--leading-relaxed);
color: var(--text-muted);
max-width: 52ch;
}
.hero__actions {
margin-top: var(--space-8);
}
.hero__note {
margin-top: var(--space-4);
font-size: var(--text-xs);
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.hero__figure {
position: relative;
margin: 0;
justify-self: center;
width: min(100%, 22rem);
}
.hero__portrait {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: 50% 18%;
border-radius: var(--radius-lg);
background: var(--surface-3);
filter: contrast(1.04) saturate(0.94) brightness(1.02);
}
.hero__figure::before {
content: "";
position: absolute;
inset: var(--space-5) calc(var(--space-5) * -1) calc(var(--space-5) * -1)
var(--space-5);
border: 1px solid var(--accent-300);
border-radius: var(--radius-lg);
z-index: -1;
}
.hero__stamp {
position: absolute;
left: calc(var(--space-4) * -1);
bottom: var(--space-6);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: var(--space-3) var(--space-4);
display: flex;
align-items: center;
gap: var(--space-3);
max-width: 15rem;
}
.hero__stamp .icon {
color: var(--brand-700);
}
.hero__stamp-text {
font-size: var(--text-xs);
line-height: 1.35;
color: var(--text-muted);
}
.hero__stamp-text strong {
display: block;
font-size: var(--text-sm);
color: var(--text-strong);
}
.metrics {
display: grid;
gap: var(--space-6);
margin-top: var(--space-10);
padding-top: var(--space-8);
border-top: 1px solid var(--border);
}
.metric__value {
display: block;
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--brand-800);
letter-spacing: var(--tracking-tight);
}
.metric__label {
display: block;
margin-top: var(--space-1);
font-size: var(--text-sm);
color: var(--text-muted);
}
@media (min-width: 30rem) {
.metrics {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.hero__inner {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--space-16);
}
.hero__figure {
justify-self: end;
width: min(100%, 24rem);
}
}
.timeline {
position: relative;
display: grid;
}
.timeline::before {
content: "";
position: absolute;
left: 0.4375rem;
top: 0.75rem;
bottom: 0.75rem;
width: 1px;
background: var(--border);
}
.timeline__item {
position: relative;
padding-left: var(--space-8);
padding-bottom: var(--space-10);
}
.timeline__item:last-child {
padding-bottom: 0;
}
.timeline__marker {
position: absolute;
left: 0;
top: 0.4rem;
width: 0.9375rem;
height: 0.9375rem;
border-radius: 50%;
background: var(--surface);
border: 2px solid var(--border-strong);
}
.timeline__item--current .timeline__marker {
border-color: var(--brand-700);
background: var(--brand-700);
box-shadow: 0 0 0 4px var(--brand-50);
}
.timeline__date {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--text-muted);
letter-spacing: 0.02em;
}
.timeline__duration {
opacity: 0.75;
}
.timeline__title {
margin-top: var(--space-2);
font-size: 1.125rem;
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.timeline__company {
margin-top: var(--space-1);
font-size: var(--text-sm);
color: var(--brand-700);
font-weight: 500;
}
.timeline__text {
margin-top: var(--space-3);
font-size: var(--text-sm);
color: var(--text-muted);
line-height: var(--leading-relaxed);
max-width: var(--measure);
}
@media (min-width: 48rem) {
.timeline__item {
padding-left: var(--space-10);
}
}
.text-center {
text-align: center;
}
.mt-6 {
margin-top: var(--space-6);
}
.mt-10 {
margin-top: var(--space-10);
}
.mt-12 {
margin-top: var(--space-12);
}
.mx-auto {
margin-inline: auto;
}
.flow > * + * {
margin-top: var(--space-4);
}
.reveal-ready .reveal {
opacity: 0;
transform: translateY(12px);
transition: opacity var(--duration-slow) var(--ease),
transform var(--duration-slow) var(--ease);
will-change: opacity, transform;
}
.reveal-ready .reveal.is-visible {
opacity: 1;
transform: none;
will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
.reveal-ready .reveal {
opacity: 1;
transform: none;
transition: none;
}
}
@media print {
.site-header,
.action-bar,
.cta-band,
.mobile-nav,
.filter-bar {
display: none !important;
}
body {
padding-bottom: 0;
}
.section {
padding-block: var(--space-8);
break-inside: avoid;
}
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.75em;
color: #555;
}
}
.flush-top {
margin-top: 0;
}
.text-muted-sm {
color: var(--text-muted);
font-size: var(--text-sm);
}
.text-muted-inherit {
color: var(--text-muted);
}
.on-surface {
background: var(--surface);
}
.text-left {
text-align: left;
}
.btn-group--center {
justify-content: center;
}