.elementor-kit-2394{--e-global-color-primary:#060D1A;--e-global-color-secondary:#0B1A34;--e-global-color-text:#F4F0E6;--e-global-color-accent:#D41F77;--e-global-color-60da78b:#02010100;--e-global-color-c696dce:#FFFFFF;--e-global-color-14ef391:#C8D5DC;--e-global-color-764183d:#F9FAFD;--e-global-color-d6cea4e:#FFFFFF;--e-global-color-86b4fcd:#02010100;--e-global-color-57c8da2:#000000CC;--e-global-color-a1b2c3d4:#EE4B9F;--e-global-color-b2c3d4e5:#243561;--e-global-color-c3d4e5f6:#6E7892;--e-global-color-d4e5f6a1:#EBE5D4;--e-global-color-e5f6a1b2:#1A1A1A;--e-global-color-f6a1b2c3:#060D1A;--e-global-typography-primary-font-family:"Fraunces";--e-global-typography-primary-font-size:64px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-text-decoration:none;--e-global-typography-primary-line-height:1.1em;--e-global-typography-primary-letter-spacing:-0.02em;--e-global-typography-secondary-font-family:"Inter Tight";--e-global-typography-secondary-font-size:36px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-font-style:normal;--e-global-typography-secondary-text-decoration:none;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-secondary-letter-spacing:-0.01em;--e-global-typography-text-font-family:"Inter Tight";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-font-style:normal;--e-global-typography-text-text-decoration:none;--e-global-typography-text-line-height:1.6em;--e-global-typography-text-letter-spacing:0em;--e-global-typography-accent-font-family:"JetBrains Mono";--e-global-typography-accent-font-size:13px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-font-style:normal;--e-global-typography-accent-text-decoration:none;--e-global-typography-accent-line-height:1.4em;--e-global-typography-accent-letter-spacing:0.05em;--e-global-typography-392b9e0-font-family:"Poppins";--e-global-typography-392b9e0-font-size:22px;--e-global-typography-392b9e0-font-weight:600;--e-global-typography-392b9e0-text-transform:capitalize;--e-global-typography-392b9e0-font-style:normal;--e-global-typography-392b9e0-text-decoration:none;--e-global-typography-392b9e0-line-height:1.2em;--e-global-typography-392b9e0-letter-spacing:0px;--e-global-typography-c05b693-font-family:"Poppins";--e-global-typography-c05b693-font-size:22px;--e-global-typography-c05b693-font-weight:300;--e-global-typography-c05b693-text-transform:none;--e-global-typography-c05b693-font-style:normal;--e-global-typography-c05b693-text-decoration:none;--e-global-typography-c05b693-line-height:1.5em;--e-global-typography-c05b693-letter-spacing:0px;--e-global-typography-6558fb1-font-family:"Poppins";--e-global-typography-6558fb1-font-size:16px;--e-global-typography-6558fb1-font-weight:300;--e-global-typography-6558fb1-text-transform:uppercase;--e-global-typography-6558fb1-font-style:normal;--e-global-typography-6558fb1-text-decoration:none;--e-global-typography-6558fb1-line-height:1.5em;--e-global-typography-6558fb1-letter-spacing:10px;--e-global-typography-92bce3b-font-family:"Poppins";--e-global-typography-92bce3b-font-size:16px;--e-global-typography-92bce3b-font-weight:400;--e-global-typography-92bce3b-text-transform:capitalize;--e-global-typography-92bce3b-font-style:italic;--e-global-typography-92bce3b-text-decoration:underline;--e-global-typography-92bce3b-line-height:1em;--e-global-typography-92bce3b-letter-spacing:0px;--e-global-typography-b2deeae-font-family:"Poppins";--e-global-typography-b2deeae-font-size:85px;--e-global-typography-b2deeae-font-weight:600;--e-global-typography-b2deeae-text-transform:none;--e-global-typography-b2deeae-font-style:normal;--e-global-typography-b2deeae-text-decoration:none;--e-global-typography-b2deeae-line-height:1em;--e-global-typography-b2deeae-letter-spacing:0px;--e-global-typography-fb1a3e0-font-family:"Poppins";--e-global-typography-fb1a3e0-font-size:200px;--e-global-typography-fb1a3e0-font-weight:600;--e-global-typography-fb1a3e0-text-transform:none;--e-global-typography-fb1a3e0-font-style:normal;--e-global-typography-fb1a3e0-text-decoration:none;--e-global-typography-fb1a3e0-line-height:1.2em;--e-global-typography-fb1a3e0-letter-spacing:0px;--e-global-typography-397e168-font-family:"Poppins";--e-global-typography-397e168-font-size:16px;--e-global-typography-397e168-font-weight:400;--e-global-typography-397e168-text-transform:capitalize;--e-global-typography-397e168-font-style:italic;--e-global-typography-397e168-text-decoration:none;--e-global-typography-397e168-line-height:1.3em;--e-global-typography-397e168-letter-spacing:0px;--e-global-typography-a53aaf6-font-family:"Poppins";--e-global-typography-a53aaf6-font-size:131px;--e-global-typography-a53aaf6-font-weight:600;--e-global-typography-a53aaf6-text-transform:capitalize;--e-global-typography-a53aaf6-font-style:normal;--e-global-typography-a53aaf6-line-height:1.2em;--e-global-typography-a53aaf6-letter-spacing:0px;--e-global-typography-d70bf87-font-family:"Poppins";--e-global-typography-d70bf87-font-size:62px;--e-global-typography-d70bf87-font-weight:300;--e-global-typography-d70bf87-text-transform:none;--e-global-typography-d70bf87-font-style:normal;--e-global-typography-d70bf87-text-decoration:none;--e-global-typography-d70bf87-line-height:1.5em;--e-global-typography-d70bf87-letter-spacing:0px;--e-global-typography-3a3bd20-font-family:"Poppins";--e-global-typography-3a3bd20-font-size:33px;--e-global-typography-3a3bd20-font-weight:300;--e-global-typography-3a3bd20-text-transform:none;--e-global-typography-3a3bd20-font-style:normal;--e-global-typography-3a3bd20-text-decoration:none;--e-global-typography-3a3bd20-line-height:1.5em;--e-global-typography-3a3bd20-letter-spacing:0px;--e-global-typography-6dfcdfc-font-family:"Poppins";--e-global-typography-6dfcdfc-font-size:27px;--e-global-typography-6dfcdfc-font-weight:300;--e-global-typography-6dfcdfc-text-transform:none;--e-global-typography-6dfcdfc-font-style:normal;--e-global-typography-6dfcdfc-text-decoration:none;--e-global-typography-6dfcdfc-line-height:1.5em;--e-global-typography-6dfcdfc-letter-spacing:0px;--e-global-typography-60e38d1-font-family:"Poppins";--e-global-typography-60e38d1-font-size:34px;--e-global-typography-60e38d1-font-weight:300;--e-global-typography-60e38d1-text-transform:none;--e-global-typography-60e38d1-font-style:normal;--e-global-typography-60e38d1-text-decoration:none;--e-global-typography-60e38d1-line-height:1.5em;--e-global-typography-60e38d1-letter-spacing:0px;--e-global-typography-0f52b32-font-family:"Poppins";--e-global-typography-0f52b32-font-size:29px;--e-global-typography-0f52b32-font-weight:300;--e-global-typography-0f52b32-text-transform:none;--e-global-typography-0f52b32-font-style:normal;--e-global-typography-0f52b32-text-decoration:none;--e-global-typography-0f52b32-line-height:1.5em;--e-global-typography-0f52b32-letter-spacing:0px;--e-global-typography-10963f5-font-family:"Poppins";--e-global-typography-10963f5-font-size:25px;--e-global-typography-10963f5-font-weight:300;--e-global-typography-10963f5-text-transform:none;--e-global-typography-10963f5-font-style:normal;--e-global-typography-10963f5-text-decoration:none;--e-global-typography-10963f5-line-height:1.5em;--e-global-typography-10963f5-letter-spacing:0px;--e-global-typography-8b296b5-font-family:"Poppins";--e-global-typography-8b296b5-font-size:23px;--e-global-typography-8b296b5-font-weight:300;--e-global-typography-8b296b5-text-transform:none;--e-global-typography-8b296b5-font-style:normal;--e-global-typography-8b296b5-text-decoration:none;--e-global-typography-8b296b5-line-height:1.5em;--e-global-typography-8b296b5-letter-spacing:0px;--e-global-typography-9ead33a-font-family:"Poppins";--e-global-typography-9ead33a-font-size:26px;--e-global-typography-9ead33a-font-weight:300;--e-global-typography-9ead33a-text-transform:none;--e-global-typography-9ead33a-font-style:normal;--e-global-typography-9ead33a-text-decoration:none;--e-global-typography-9ead33a-line-height:1.5em;--e-global-typography-9ead33a-letter-spacing:0px;--e-global-typography-1a7e6f8-font-family:"Poppins";--e-global-typography-1a7e6f8-font-size:24px;--e-global-typography-1a7e6f8-font-weight:300;--e-global-typography-1a7e6f8-text-transform:none;--e-global-typography-1a7e6f8-font-style:normal;--e-global-typography-1a7e6f8-text-decoration:none;--e-global-typography-1a7e6f8-line-height:1.5em;--e-global-typography-1a7e6f8-letter-spacing:0px;--e-global-typography-1df4b79-font-family:"Poppins";--e-global-typography-1df4b79-font-size:23px;--e-global-typography-1df4b79-font-weight:300;--e-global-typography-1df4b79-text-transform:none;--e-global-typography-1df4b79-font-style:normal;--e-global-typography-1df4b79-text-decoration:none;--e-global-typography-1df4b79-line-height:1.5em;--e-global-typography-1df4b79-letter-spacing:0px;--e-global-typography-486f4ab-font-family:"Poppins";--e-global-typography-486f4ab-font-size:23px;--e-global-typography-486f4ab-font-weight:300;--e-global-typography-486f4ab-text-transform:none;--e-global-typography-486f4ab-font-style:normal;--e-global-typography-486f4ab-text-decoration:none;--e-global-typography-486f4ab-line-height:1.5em;--e-global-typography-486f4ab-letter-spacing:0px;--e-global-typography-d8851d5-font-family:"Poppins";--e-global-typography-d8851d5-font-size:25px;--e-global-typography-d8851d5-font-weight:300;--e-global-typography-d8851d5-text-transform:none;--e-global-typography-d8851d5-font-style:normal;--e-global-typography-d8851d5-text-decoration:none;--e-global-typography-d8851d5-line-height:1.5em;--e-global-typography-d8851d5-letter-spacing:0px;--e-global-typography-dfa7683-font-family:"Poppins";--e-global-typography-dfa7683-font-size:23px;--e-global-typography-dfa7683-font-weight:300;--e-global-typography-dfa7683-text-transform:none;--e-global-typography-dfa7683-font-style:normal;--e-global-typography-dfa7683-text-decoration:none;--e-global-typography-dfa7683-line-height:1.5em;--e-global-typography-dfa7683-letter-spacing:0px;--e-global-typography-f5d29e2-font-family:"Poppins";--e-global-typography-f5d29e2-font-size:23px;--e-global-typography-f5d29e2-font-weight:300;--e-global-typography-f5d29e2-text-transform:none;--e-global-typography-f5d29e2-font-style:normal;--e-global-typography-f5d29e2-text-decoration:none;--e-global-typography-f5d29e2-line-height:1.5em;--e-global-typography-f5d29e2-letter-spacing:0px;background-color:var( --e-global-color-c696dce );}.elementor-kit-2394 e-page-transition{background-color:#FFBC7D;}.elementor-kit-2394 a{color:var( --e-global-color-accent );}.elementor-kit-2394 a:hover{color:var( --e-global-color-primary );}.elementor-kit-2394 h4{color:var( --e-global-color-primary );font-family:var( --e-global-typography-392b9e0-font-family ), Sans-serif;font-size:var( --e-global-typography-392b9e0-font-size );font-weight:var( --e-global-typography-392b9e0-font-weight );text-transform:var( --e-global-typography-392b9e0-text-transform );font-style:var( --e-global-typography-392b9e0-font-style );text-decoration:var( --e-global-typography-392b9e0-text-decoration );line-height:var( --e-global-typography-392b9e0-line-height );letter-spacing:var( --e-global-typography-392b9e0-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1680px;}.e-con{--container-max-width:1680px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-2394{--e-global-typography-primary-font-size:45px;--e-global-typography-secondary-font-size:25px;--e-global-typography-text-font-size:14px;--e-global-typography-accent-font-size:14px;--e-global-typography-c05b693-font-size:14px;--e-global-typography-6558fb1-font-size:14px;--e-global-typography-92bce3b-font-size:14px;--e-global-typography-b2deeae-font-size:65px;--e-global-typography-fb1a3e0-font-size:145px;--e-global-typography-397e168-font-size:14px;--e-global-typography-d70bf87-font-size:14px;--e-global-typography-3a3bd20-font-size:14px;--e-global-typography-6dfcdfc-font-size:14px;--e-global-typography-60e38d1-font-size:14px;--e-global-typography-0f52b32-font-size:14px;--e-global-typography-10963f5-font-size:14px;--e-global-typography-8b296b5-font-size:14px;--e-global-typography-9ead33a-font-size:14px;--e-global-typography-1a7e6f8-font-size:14px;--e-global-typography-1df4b79-font-size:14px;--e-global-typography-486f4ab-font-size:14px;--e-global-typography-d8851d5-font-size:14px;--e-global-typography-dfa7683-font-size:14px;--e-global-typography-f5d29e2-font-size:14px;}.elementor-kit-2394 h4{font-size:var( --e-global-typography-392b9e0-font-size );line-height:var( --e-global-typography-392b9e0-line-height );letter-spacing:var( --e-global-typography-392b9e0-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-2394{--e-global-typography-primary-font-size:28px;--e-global-typography-primary-line-height:1.1em;--e-global-typography-secondary-font-size:20px;--e-global-typography-392b9e0-font-size:18px;--e-global-typography-b2deeae-font-size:48px;--e-global-typography-b2deeae-line-height:1em;--e-global-typography-fb1a3e0-font-size:100px;--e-global-typography-fb1a3e0-line-height:1em;--e-global-typography-a53aaf6-font-size:18px;}.elementor-kit-2394 h4{font-size:var( --e-global-typography-392b9e0-font-size );line-height:var( --e-global-typography-392b9e0-line-height );letter-spacing:var( --e-global-typography-392b9e0-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Solunet — Estilos globales inyectados via Kit */
/* ─────────────────────────────────────────────────────────────
SOLUNET · tokens
Paleta de 6 colores + trinidad tipográfica + ritmo.
No se introducen colores ni familias fuera de este archivo.
───────────────────────────────────────────────────────────── */
:root {
/* Paleta fija · 6 tokens + derivados de opacidad */
--navy-ink: #060D1A;
--navy-deep: #0B1A34;
--navy: #1B2A52;
--navy-soft: #243561;
--magenta: #D41F77;
--magenta-2: #EE4B9F;
--pearl: #F4F0E6;
--pearl-2: #EBE5D4;
--carbon: #1A1A1A;
--steel: #6E7892;
/* Hairlines y líneas derivadas · solo opacidad de los tokens */
--line: rgba(244, 240, 230, .10);
--line-hi: rgba(244, 240, 230, .22);
--line-xhi: rgba(244, 240, 230, .38);
--line-dark: rgba(11, 26, 52, .15);
--line-dark-hi:rgba(11, 26, 52, .32);
/* Tipografía */
--ff-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
--ff-body: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--ff-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
/* Ritmo tipográfico */
--step--2: clamp(10px, .66vw, 11px);
--step--1: clamp(12px, .78vw, 13px);
--step-0: clamp(15px, 1vw, 16px);
--step-1: clamp(17px, 1.2vw, 19px);
--step-2: clamp(22px, 1.8vw, 28px);
--step-3: clamp(30px, 3vw, 44px);
--step-4: clamp(48px, 5vw, 72px);
--step-5: clamp(64px, 9vw, 148px);
--step-6: clamp(72px, 12vw, 220px);
--step-7: clamp(96px, 18vw, 320px); /* número compositivo */
/* Ritmo espacial */
--gutter: clamp(20px, 3vw, 48px);
--max-w: 1680px;
--section: clamp(96px, 12vw, 192px);
--rail-l: 56px; /* rúbrica lateral izquierda (desktop) */
--bridge-h: 64px; /* header fijo */
/* Efectos */
--ease: cubic-bezier(.2, .8, .2, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
color-scheme: dark;
}
@media (max-width: 900px) {
:root {
--rail-l: 0px;
--bridge-h: 56px;
}
}
/* ─────────────────────────────────────────────────────────────
SOLUNET · base
Reset mínimo + tipografía + utilidades.
───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
background: var(--navy-deep);
color: var(--pearl);
font-family: var(--ff-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
}
body {
min-height: 100vh;
font-variant-numeric: lining-nums proportional-nums;
overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
svg { fill: none; stroke: currentColor; }
a {
color: inherit;
text-decoration: none;
transition: color .2s var(--ease);
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
::selection { background: var(--magenta); color: var(--pearl); }
/* Focus visible · uniforme */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--magenta);
outline-offset: 3px;
}
/* Tipografía · clases funcionales */
.ff-display { font-family: var(--ff-display); font-variation-settings: 'opsz' 48, 'SOFT' 30, 'WONK' 0; }
.ff-body { font-family: var(--ff-body); font-weight: 400; }
.ff-mono { font-family: var(--ff-mono); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.mono { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--steel); }
.mono-hi { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase; color: var(--pearl); }
.tabular { font-variant-numeric: tabular-nums; }
.anchor { /* palabra ancla en claims */
font-family: var(--ff-display);
font-style: italic;
font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
color: var(--magenta);
}
/* Layout · utilidades */
.wrap {
width: min(100% - var(--gutter) * 2, var(--max-w));
margin-inline: auto;
}
.grid { display: grid; gap: var(--gutter); }
.eyebrow {
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--steel);
display: inline-flex;
align-items: center;
gap: 10px;
}
.eyebrow::before {
content: "";
display: inline-block;
width: 32px; height: 1px;
background: var(--magenta);
}
/* Secciones */
section { position: relative; padding-block: var(--section); }
/* Reduced motion · respetar */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
/* Skip link · accesibilidad */
.skip {
position: absolute; top: -100px; left: 12px;
background: var(--magenta); color: var(--pearl);
padding: 10px 14px; font-family: var(--ff-mono); font-size: 12px;
letter-spacing: .14em; text-transform: uppercase;
z-index: 1000;
}
.skip:focus { top: 12px; }
/* ─────────────────────────────────────────────────────────────
SOLUNET · layout
Bridge, rúbrica lateral, ceremonia, fondo atmosférico, footer.
───────────────────────────────────────────────────────────── */
/* ── Fondo atmosférico global ─────────────────────────────── */
body::before,
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
}
/* Cuadrícula técnica muy sutil · 80px */
body::before {
background-image:
linear-gradient(to right, var(--line) 1px, transparent 1px),
linear-gradient(to bottom, var(--line) 1px, transparent 1px);
background-size: 80px 80px;
opacity: .5;
mask-image: radial-gradient(ellipse 120% 80% at 50% 30%, #000 55%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 120% 80% at 50% 30%, #000 55%, transparent 100%);
}
/* Grano analógico ~3% · SVG inline */
body::after {
background-image: url("data:image/svg+xml;utf8,");
opacity: .28;
mix-blend-mode: overlay;
}
main { position: relative; z-index: 1; }
/* ── Bridge · header fijo ─────────────────────────────────── */
.bridge {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--bridge-h);
z-index: 50;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
padding-inline: clamp(16px, 2.4vw, 32px);
background: color-mix(in oklab, var(--navy-ink) 78%, transparent);
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
border-bottom: 1px solid var(--line);
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .14em;
text-transform: uppercase;
}
.bridge__brand {
display: flex;
align-items: center;
gap: 12px;
user-select: none;
}
.wordmark {
display: inline-flex;
align-items: baseline;
gap: 2px;
font-family: var(--ff-display);
font-variation-settings: 'opsz' 48, 'SOFT' 30, 'WONK' 0;
font-weight: 500;
font-size: 22px;
letter-spacing: -.01em;
line-height: 1;
text-transform: lowercase;
}
.wordmark__solu { color: var(--pearl); }
.wordmark__net { color: var(--magenta); font-style: italic; font-variation-settings: 'opsz' 48, 'SOFT' 80, 'WONK' 1; }
.wordmark__emit { /* trazo señal heredero del logo original */
width: 18px; height: 18px;
margin-left: 2px;
transform: translateY(-8px);
color: var(--magenta);
}
.bridge__nav {
display: flex;
justify-content: center;
gap: clamp(16px, 2.4vw, 36px);
color: var(--steel);
}
.bridge__nav a {
position: relative;
padding: 4px 0;
transition: color .2s var(--ease);
}
.bridge__nav a:hover { color: var(--pearl); }
.bridge__nav a::after {
content: "";
position: absolute;
left: 0; bottom: -2px;
width: 0; height: 1px;
background: var(--magenta);
transition: width .25s var(--ease);
}
.bridge__nav a:hover::after { width: 100%; }
.bridge__right {
display: flex;
align-items: center;
gap: 18px;
justify-self: end;
}
/* Píldora de estado · signature permanente */
.status-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 12px 7px 10px;
border: 1px solid var(--line-hi);
border-radius: 999px;
background: color-mix(in oklab, var(--navy) 50%, transparent);
color: var(--pearl);
cursor: default;
transition: border-color .3s var(--ease), background .3s var(--ease);
}
.status-pill:hover { border-color: var(--magenta); background: color-mix(in oklab, var(--navy) 70%, transparent); }
.status-pill__dot {
width: 7px; height: 7px;
border-radius: 999px;
background: var(--magenta);
box-shadow: 0 0 0 0 color-mix(in oklab, var(--magenta) 60%, transparent);
animation: pulseDot 4s var(--ease) infinite;
}
.status-pill__label { opacity: .9; }
.status-pill__value { color: var(--magenta); font-weight: 500; }
@keyframes pulseDot {
0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--magenta) 60%, transparent); }
70% { box-shadow: 0 0 0 12px color-mix(in oklab, var(--magenta) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--magenta) 0%, transparent); }
}
.bridge__utc {
color: var(--steel);
font-variant-numeric: tabular-nums;
letter-spacing: .14em;
}
@media (max-width: 1100px) {
.bridge__nav { display: none; }
.bridge { grid-template-columns: auto 1fr auto; }
}
@media (max-width: 640px) {
.bridge__utc { display: none; }
.status-pill__label { display: none; }
}
/* ── Rúbrica lateral izquierda · marca de servicio vertical ──── */
.rail {
position: fixed;
top: var(--bridge-h);
bottom: 0;
left: 0;
width: var(--rail-l);
z-index: 40;
pointer-events: none;
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding-block: 20px;
font-family: var(--ff-mono);
font-size: var(--step--2);
letter-spacing: .28em;
text-transform: uppercase;
color: var(--steel);
}
.rail__text {
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
}
.rail__text--top { opacity: .8; }
.rail__text--bot { opacity: .5; }
.rail__divider {
width: 1px; height: 48px;
background: var(--magenta);
opacity: .8;
}
@media (max-width: 900px) { .rail { display: none; } }
/* ── Ceremonia de entrada ────────────────────────────────── */
.overture {
position: fixed;
inset: 0;
z-index: 100;
background: var(--navy-ink);
display: grid;
place-items: center;
overflow: hidden;
}
.overture__body {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
width: min(640px, 86vw);
}
.overture__mono {
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .28em;
text-transform: uppercase;
color: var(--pearl);
opacity: 0;
animation: overtureText .6s var(--ease) forwards;
animation-delay: .3s;
}
.overture__line {
position: relative;
width: 100%;
height: 1px;
background: var(--line);
overflow: hidden;
}
.overture__line::after {
content: "";
position: absolute; top: 0; left: 0;
width: 0; height: 100%;
background: var(--magenta);
animation: overtureLine .8s var(--ease-out) forwards;
animation-delay: .9s;
}
.overture__coord {
font-family: var(--ff-mono);
font-size: var(--step--2);
letter-spacing: .24em;
text-transform: uppercase;
color: var(--steel);
opacity: 0;
animation: overtureText .5s var(--ease) forwards;
animation-delay: 1.2s;
}
@keyframes overtureText {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes overtureLine {
to { width: 100%; }
}
.overture--leaving { animation: overtureOut .45s var(--ease) forwards; animation-delay: .05s; }
@keyframes overtureOut {
to { opacity: 0; visibility: hidden; }
}
/* ── Cuerpo principal · offset bajo bridge + rail ──────────── */
.shell { padding-left: var(--rail-l); padding-top: var(--bridge-h); }
/* ── Footer ──────────────────────────────────────────────── */
.footer {
position: relative;
z-index: 1;
margin-top: 0;
padding: clamp(64px, 8vw, 120px) 0 40px;
background: var(--navy-ink);
color: var(--pearl);
border-top: 1px solid var(--line);
}
.footer__inner { display: grid; gap: 64px; }
.footer__grid {
display: grid;
grid-template-columns: 1.6fr repeat(3, 1fr);
gap: 48px;
}
.footer__brand .wordmark { font-size: 36px; }
.footer__tagline {
margin-top: 20px;
font-family: var(--ff-display);
font-size: var(--step-2);
font-variation-settings: 'opsz' 72, 'SOFT' 40, 'WONK' 0;
font-weight: 400;
line-height: 1.2;
color: var(--pearl);
max-width: 30ch;
}
.footer__col h4 {
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--steel);
margin: 0 0 18px;
font-weight: 500;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer__col a {
font-family: var(--ff-body);
color: var(--pearl);
opacity: .82;
transition: opacity .2s var(--ease), color .2s var(--ease);
}
.footer__col a:hover { opacity: 1; color: var(--magenta); }
.footer__colophon {
border-top: 1px solid var(--line);
padding-top: 32px;
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--steel);
}
.footer__colophon a:hover { color: var(--magenta); }
@media (max-width: 900px) {
.footer__grid { grid-template-columns: 1fr 1fr; }
.footer__colophon { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.footer__grid { grid-template-columns: 1fr; }
}
/* ─────────────────────────────────────────────────────────────
SOLUNET · components
Botones, paneles técnicos, split-flap, gauges, tarjetas, iconos.
───────────────────────────────────────────────────────────── */
/* ── Botones ─────────────────────────────────────────────── */
.btn {
--bg: transparent;
--fg: var(--pearl);
--bd: var(--line-hi);
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 22px;
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .2em;
text-transform: uppercase;
background: var(--bg);
color: var(--fg);
border: 1px solid var(--bd);
border-radius: 0;
position: relative;
cursor: pointer;
transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
overflow: hidden;
isolation: isolate;
}
.btn__arrow {
width: 18px; height: 10px;
transition: transform .3s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--primary {
--bg: var(--magenta);
--fg: var(--pearl);
--bd: var(--magenta);
}
.btn--primary:hover { background: var(--magenta-2); border-color: var(--magenta-2); }
.btn--ghost { --bg: transparent; --fg: var(--pearl); --bd: var(--line-hi); }
.btn--ghost:hover { --bd: var(--magenta); --fg: var(--magenta); }
.btn::after { /* ping de fondo en hover */
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
color-mix(in oklab, var(--magenta) 22%, transparent) 0%,
transparent 70%);
opacity: 0;
transition: opacity .3s var(--ease);
z-index: -1;
}
.btn:hover::after { opacity: 1; }
/* ── Paneles ─────────────────────────────────────────────── */
.panel {
position: relative;
background: color-mix(in oklab, var(--navy) 60%, transparent);
border: 1px solid var(--line);
padding: clamp(20px, 2vw, 28px);
}
.panel--noc {
background:
repeating-linear-gradient(0deg, rgba(244,240,230,.02) 0 1px, transparent 1px 3px),
color-mix(in oklab, var(--navy-deep) 80%, transparent);
border-color: var(--line-hi);
}
.panel__corner {
position: absolute;
width: 12px; height: 12px;
border: 1px solid var(--line-hi);
}
.panel__corner--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel__corner--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.panel__corner--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.panel__corner--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.panel__header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--steel);
}
.panel__header strong { color: var(--pearl); font-weight: 500; }
/* ── Métrica NOC (label + valor + unidad) ─────────────────── */
.metric { display: grid; gap: 6px; }
.metric__label {
font-family: var(--ff-mono);
font-size: var(--step--2);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--steel);
}
.metric__value {
font-family: var(--ff-mono);
font-weight: 500;
font-size: clamp(24px, 2.4vw, 36px);
font-variant-numeric: tabular-nums;
line-height: 1;
color: var(--pearl);
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.metric__value--lg {
font-size: clamp(40px, 4.2vw, 64px);
color: var(--magenta);
}
.metric__unit {
font-family: var(--ff-mono);
font-size: .42em;
letter-spacing: .2em;
color: var(--steel);
}
.metric__meta {
font-family: var(--ff-mono);
font-size: var(--step--2);
letter-spacing: .18em;
text-transform: uppercase;
color: var(--steel);
margin-top: 4px;
display: flex; align-items: center; gap: 8px;
}
/* Sparkline dot */
.spark-dot {
width: 6px; height: 6px;
border-radius: 999px;
background: var(--magenta);
box-shadow: 0 0 10px color-mix(in oklab, var(--magenta) 80%, transparent);
}
/* ── Split-flap para cifras grandes ─────────────────────── */
.flap {
display: inline-flex;
gap: 2px;
font-family: var(--ff-mono);
font-weight: 500;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.flap__cell {
position: relative;
display: inline-block;
min-width: .6em;
height: 1.05em;
overflow: hidden;
background: var(--navy-ink);
border: 1px solid var(--line-hi);
padding: .06em .15em .06em;
color: var(--pearl);
text-align: center;
}
.flap__cell::before {
/* línea central horizontal (gesto tablero aeropuerto) */
content: "";
position: absolute;
top: 50%; left: 0; right: 0;
height: 1px;
background: rgba(0,0,0,.5);
z-index: 3;
}
.flap__digit {
display: inline-block;
transition: transform .35s var(--ease);
}
/* ── Gauge semicircular ─────────────────────────────────── */
.gauge {
--val: 75; /* 0-100 */
width: 100%;
aspect-ratio: 2 / 1;
position: relative;
}
.gauge svg { width: 100%; height: 100%; overflow: visible; }
.gauge__bg { stroke: var(--line); stroke-width: 1.5; }
.gauge__fg {
stroke: var(--magenta);
stroke-width: 1.5;
stroke-dasharray: 157; /* π * r, r=50 */
stroke-dashoffset: calc(157 - (157 * var(--val) / 100));
transition: stroke-dashoffset 1.4s var(--ease);
}
.gauge__tick { stroke: var(--line-hi); stroke-width: 1; }
.gauge__readout {
position: absolute;
bottom: 14%; left: 50%;
transform: translateX(-50%);
text-align: center;
}
.gauge__value {
font-family: var(--ff-mono);
font-weight: 500;
font-size: clamp(22px, 2.2vw, 30px);
color: var(--pearl);
font-variant-numeric: tabular-nums;
}
.gauge__label {
display: block;
font-family: var(--ff-mono);
font-size: var(--step--2);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--steel);
margin-top: 2px;
}
/* ── Tarjeta de servicio ─────────────────────────────────── */
.card {
position: relative;
padding: clamp(24px, 3vw, 40px);
background: color-mix(in oklab, var(--navy) 40%, transparent);
border: 1px solid var(--line);
display: grid;
gap: 24px;
transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
overflow: hidden;
}
.card::before { /* hairline magenta a la izquierda, discreta */
content: "";
position: absolute;
top: 0; left: 0; bottom: 0;
width: 1px;
background: var(--magenta);
transform: scaleY(0);
transform-origin: top;
transition: transform .35s var(--ease);
}
.card:hover { background: color-mix(in oklab, var(--navy) 70%, transparent); border-color: var(--line-hi); }
.card:hover::before { transform: scaleY(1); }
.card__num {
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--magenta);
}
.card__title {
font-family: var(--ff-display);
font-variation-settings: 'opsz' 72, 'SOFT' 30, 'WONK' 0;
font-weight: 450;
font-size: clamp(28px, 2.6vw, 40px);
line-height: 1.05;
margin: 0;
text-transform: lowercase;
letter-spacing: -.01em;
}
.card__desc { color: color-mix(in oklab, var(--pearl) 82%, transparent); max-width: 46ch; }
.card__list {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 10px;
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--steel);
}
.card__list li {
display: grid;
grid-template-columns: 16px 1fr;
gap: 10px;
align-items: baseline;
}
.card__list li::before {
content: "";
width: 10px; height: 1px;
background: var(--magenta);
align-self: center;
}
/* Link bajo tarjeta */
.card__cta {
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--pearl);
display: inline-flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--line-hi);
padding-bottom: 4px;
transition: color .2s var(--ease), border-color .2s var(--ease);
}
.card__cta:hover { color: var(--magenta); border-color: var(--magenta); }
/* ── Chip / tag técnico ─────────────────────────────────── */
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
border: 1px solid var(--line);
font-family: var(--ff-mono);
font-size: var(--step--2);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--steel);
}
.chip--mag { border-color: var(--magenta); color: var(--magenta); }
/* ── Trazo 028 · separador editorial ─────────────────────── */
.stroke-028 {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 20px;
margin-block: clamp(40px, 6vw, 96px);
}
.stroke-028__line {
height: 1px;
background: linear-gradient(to right, var(--magenta), color-mix(in oklab, var(--magenta) 10%, transparent));
position: relative;
overflow: hidden;
}
.stroke-028__num {
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .28em;
text-transform: uppercase;
color: var(--magenta);
}
.stroke-028__label {
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--steel);
}
/* ── Entradas de registro (diario técnico) ─────────────── */
.log {
display: grid;
grid-template-columns: 160px 1fr;
gap: 32px;
padding: 24px 0;
border-top: 1px solid var(--line);
align-items: baseline;
}
.log:last-child { border-bottom: 1px solid var(--line); }
.log__meta {
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .18em;
text-transform: uppercase;
color: var(--steel);
display: grid; gap: 4px;
}
.log__meta strong { color: var(--magenta); font-weight: 500; }
.log__body h3 {
font-family: var(--ff-display);
font-variation-settings: 'opsz' 72, 'SOFT' 30, 'WONK' 0;
font-weight: 450;
font-size: clamp(22px, 1.8vw, 28px);
margin: 0 0 8px;
text-transform: lowercase;
letter-spacing: -.005em;
}
.log__body p { margin: 0; color: color-mix(in oklab, var(--pearl) 80%, transparent); max-width: 62ch; }
@media (max-width: 700px) {
.log { grid-template-columns: 1fr; gap: 8px; }
}
/* ── Iconografía · wrapper ───────────────────────────────── */
.icon {
width: 32px; height: 32px;
color: var(--magenta);
flex: none;
}
.icon--sm { width: 20px; height: 20px; }
.icon--lg { width: 56px; height: 56px; }
/* ── Formulario (canal abierto) ─────────────────────────── */
.form { display: grid; gap: 24px; }
.field { display: grid; gap: 8px; }
.field label {
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .18em;
text-transform: uppercase;
color: var(--steel);
}
.field input,
.field textarea,
.field select {
font-family: var(--ff-body);
font-size: var(--step-0);
color: var(--pearl);
background: transparent;
border: 0;
border-bottom: 1px solid var(--line-hi);
padding: 12px 0;
outline: none;
transition: border-color .25s var(--ease);
}
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--magenta); }
.field textarea { resize: vertical; min-height: 100px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.form__hint {
font-family: var(--ff-mono);
font-size: var(--step--2);
letter-spacing: .18em;
text-transform: uppercase;
color: var(--steel);
}
/* ── Cursor custom (desktop only) ────────────────────────── */
.cursor {
position: fixed;
top: 0; left: 0;
width: 10px; height: 10px;
border-radius: 999px;
background: var(--magenta);
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), opacity .25s var(--ease);
mix-blend-mode: screen;
opacity: 0;
}
.cursor.is-ready { opacity: 1; }
.cursor.is-over {
width: 34px; height: 34px;
background: transparent;
border: 1px solid var(--magenta);
}
@media (hover: none) { .cursor { display: none; } }
@media (prefers-reduced-motion: reduce) { .cursor { display: none; } }
/* ─────────────────────────────────────────────────────────────
SOLUNET · home
Composición editorial-instrumental asimétrica.
───────────────────────────────────────────────────────────── */
/* ── HERO ─────────────────────────────────────────────────── */
.hero {
position: relative;
padding-top: calc(var(--bridge-h) + 64px);
padding-bottom: clamp(80px, 10vw, 160px);
min-height: 100vh;
overflow: hidden;
}
.hero__grid {
display: grid;
grid-template-columns: minmax(140px, 1fr) 7fr minmax(280px, 3.4fr);
gap: clamp(24px, 3vw, 48px);
align-items: start;
}
/* Columna 1 · metadata izquierda */
.hero__meta {
display: grid;
gap: 24px;
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--steel);
padding-top: 8px;
}
.hero__meta strong { color: var(--pearl); font-weight: 500; }
.hero__meta-row { display: grid; gap: 4px; }
/* Columna 2 · claim editorial */
.hero__claim {
font-family: var(--ff-display);
font-variation-settings: 'opsz' 144, 'SOFT' 40, 'WONK' 0;
font-weight: 400;
font-size: var(--step-6);
line-height: .92;
letter-spacing: -.025em;
text-transform: lowercase;
margin: 0;
color: var(--pearl);
text-wrap: balance;
}
.hero__claim-line { display: block; }
.hero__cycle {
display: inline-grid;
align-items: baseline;
position: relative;
min-width: 7ch;
}
.hero__cycle-word {
grid-area: 1 / 1;
font-family: var(--ff-display);
font-style: italic;
font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
color: var(--magenta);
opacity: 0;
transform: translateY(12px);
transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.hero__cycle-word.is-active { opacity: 1; transform: translateY(0); }
.hero__cycle-word.is-out { opacity: 0; transform: translateY(-10px); }
.hero__lede {
margin-top: 40px;
font-family: var(--ff-body);
font-size: var(--step-1);
line-height: 1.55;
max-width: 44ch;
color: color-mix(in oklab, var(--pearl) 86%, transparent);
}
.hero__cta {
margin-top: 40px;
display: inline-flex;
flex-wrap: wrap;
gap: 14px;
}
/* Número 028 compositivo */
.hero__ordinal {
margin-top: 56px;
display: inline-flex;
align-items: flex-end;
gap: 22px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.hero__ordinal-num {
font-family: var(--ff-display);
font-variation-settings: 'opsz' 144, 'SOFT' 20, 'WONK' 0;
font-weight: 300;
font-size: clamp(96px, 14vw, 220px);
line-height: .85;
color: var(--pearl);
font-variant-numeric: tabular-nums;
}
.hero__ordinal-num em {
font-style: italic;
font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
color: var(--magenta);
}
.hero__ordinal-text {
padding-bottom: 14px;
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--steel);
max-width: 20ch;
line-height: 1.7;
}
/* Columna 3 · panel NOC */
.noc {
position: sticky;
top: calc(var(--bridge-h) + 32px);
display: grid;
gap: 20px;
}
.noc__metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
padding-block: 22px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.noc__full {
padding-block: 18px;
display: grid; gap: 8px;
}
.noc__gauge {
padding-block: 18px;
}
.noc__foot {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--ff-mono);
font-size: var(--step--2);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--steel);
}
@media (max-width: 1200px) {
.hero__grid { grid-template-columns: 1fr; }
.hero__meta { order: 2; display: flex; flex-wrap: wrap; gap: 24px 40px; }
.noc { position: static; order: 3; }
.noc__metrics { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
.noc__metrics { grid-template-columns: 1fr 1fr; }
}
/* ── Separador de sección · § ────────────────────────────── */
.section-head {
display: grid;
grid-template-columns: minmax(140px, 1fr) 4fr minmax(140px, 1fr);
gap: clamp(24px, 3vw, 48px);
align-items: baseline;
padding-bottom: clamp(32px, 4vw, 56px);
margin-bottom: clamp(40px, 5vw, 72px);
border-bottom: 1px solid var(--line);
}
.section-head__num {
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .28em;
text-transform: uppercase;
color: var(--magenta);
}
.section-head__title {
font-family: var(--ff-display);
font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
font-weight: 400;
font-size: var(--step-4);
line-height: 1;
letter-spacing: -.02em;
text-transform: lowercase;
margin: 0;
text-wrap: balance;
}
.section-head__title em {
font-style: italic;
font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
color: var(--magenta);
}
.section-head__meta {
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--steel);
text-align: right;
}
@media (max-width: 900px) {
.section-head { grid-template-columns: 1fr; }
.section-head__meta { text-align: left; }
}
/* ── Sistemas · grid 2×2 asimétrico ──────────────────────── */
.sistemas {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
}
.sistemas .card:nth-child(1) { grid-column: 1 / span 7; }
.sistemas .card:nth-child(2) { grid-column: 8 / span 5; }
.sistemas .card:nth-child(3) { grid-column: 1 / span 5; }
.sistemas .card:nth-child(4) { grid-column: 6 / span 7; }
@media (max-width: 900px) {
.sistemas .card { grid-column: 1 / -1 !important; }
}
/* ── Diferenciadores · 3 columnas con cifra enorme ───────── */
.diferencias {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
align-items: start;
}
.dif {
padding: 32px 28px;
border-top: 1px solid var(--line);
display: grid;
gap: 20px;
position: relative;
}
.dif__num {
font-family: var(--ff-display);
font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
font-weight: 300;
font-size: clamp(80px, 10vw, 160px);
line-height: .85;
color: var(--pearl);
font-variant-numeric: tabular-nums;
text-transform: lowercase;
}
.dif__num em {
font-style: italic;
font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
color: var(--magenta);
}
.dif__kicker {
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--magenta);
}
.dif__title {
font-family: var(--ff-display);
font-variation-settings: 'opsz' 72, 'SOFT' 30, 'WONK' 0;
font-weight: 450;
font-size: clamp(22px, 2vw, 30px);
line-height: 1.15;
margin: 0;
text-transform: lowercase;
letter-spacing: -.01em;
text-wrap: balance;
}
.dif__desc {
color: color-mix(in oklab, var(--pearl) 82%, transparent);
max-width: 40ch;
}
@media (max-width: 900px) {
.diferencias { grid-template-columns: 1fr; }
}
/* ── Trayectoria · tres anclas temporales ───────────────── */
.trayectoria {
display: grid;
grid-template-columns: minmax(120px, 1fr) 3fr;
gap: 0;
}
.hito {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 40px;
padding: clamp(32px, 4vw, 56px) 0;
border-top: 1px solid var(--line);
align-items: start;
}
.hito:last-child { border-bottom: 1px solid var(--line); }
.hito__year {
font-family: var(--ff-display);
font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
font-weight: 300;
font-size: clamp(48px, 6vw, 96px);
line-height: 1;
color: var(--pearl);
font-variant-numeric: tabular-nums;
}
.hito__body { display: grid; gap: 10px; }
.hito__kicker {
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--magenta);
}
.hito__title {
font-family: var(--ff-display);
font-variation-settings: 'opsz' 72, 'SOFT' 30, 'WONK' 0;
font-weight: 450;
font-size: clamp(24px, 2.2vw, 36px);
margin: 0;
text-transform: lowercase;
letter-spacing: -.01em;
text-wrap: balance;
max-width: 28ch;
}
.hito__desc {
color: color-mix(in oklab, var(--pearl) 82%, transparent);
max-width: 58ch;
}
.trayectoria { grid-template-columns: 1fr; }
@media (max-width: 700px) {
.hito { grid-template-columns: 1fr; gap: 12px; }
}
/* ── Alcance (pearl · rechazo orgulloso) ────────────────── */
.alcance-wrap {
position: relative;
background: var(--pearl);
color: var(--carbon);
margin-top: var(--section);
padding: var(--section) 0;
border-top: 1px solid var(--line-dark);
border-bottom: 1px solid var(--line-dark);
}
.alcance-wrap::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
pointer-events: none;
mix-blend-mode: multiply;
opacity: .6;
}
.alcance-wrap .section-head { border-color: var(--line-dark); }
.alcance-wrap .section-head__num { color: var(--magenta); }
.alcance-wrap .section-head__title { color: var(--carbon); }
.alcance-wrap .section-head__meta { color: var(--carbon); opacity: .6; }
.alcance {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
}
.alcance__col {
display: grid; gap: 16px;
}
.alcance__col h3 {
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .22em;
text-transform: uppercase;
font-weight: 500;
margin: 0 0 12px;
}
.alcance__col--yes h3 { color: var(--carbon); }
.alcance__col--no h3 { color: var(--magenta); }
.alcance__item {
display: grid;
grid-template-columns: 32px 1fr;
gap: 16px;
padding: 18px 0;
border-top: 1px solid var(--line-dark);
align-items: baseline;
color: var(--carbon);
}
.alcance__item:last-child { border-bottom: 1px solid var(--line-dark); }
.alcance__item-num {
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .14em;
color: var(--magenta);
}
.alcance__item-text {
font-family: var(--ff-body);
font-size: var(--step-1);
line-height: 1.4;
max-width: 50ch;
}
@media (max-width: 900px) {
.alcance { grid-template-columns: 1fr; }
}
/* ── Posición · manifiesto destilado ────────────────────── */
.posicion {
display: grid;
grid-template-columns: minmax(140px, 1fr) 4fr;
gap: clamp(32px, 4vw, 64px);
align-items: start;
}
.posicion__side {
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--steel);
position: sticky;
top: calc(var(--bridge-h) + 32px);
display: grid; gap: 12px;
}
.posicion__side strong { color: var(--pearl); font-weight: 500; }
.posicion__body {
font-family: var(--ff-display);
font-variation-settings: 'opsz' 72, 'SOFT' 40, 'WONK' 0;
font-weight: 400;
font-size: clamp(26px, 2.6vw, 40px);
line-height: 1.2;
color: var(--pearl);
text-wrap: balance;
letter-spacing: -.01em;
}
.posicion__body p { margin: 0 0 1em; }
.posicion__body em {
font-style: italic;
font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
color: var(--magenta);
}
.posicion__sign {
margin-top: 32px;
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--steel);
}
@media (max-width: 900px) {
.posicion { grid-template-columns: 1fr; }
.posicion__side { position: static; }
}
/* ── Registro (diario) · home teaser ────────────────────── */
.registro-home { display: grid; gap: 0; }
/* ── Canal (contacto) ──────────────────────────────────── */
.canal {
display: grid;
grid-template-columns: 3fr 2fr;
gap: clamp(32px, 4vw, 72px);
align-items: start;
}
.canal__lead {
font-family: var(--ff-display);
font-variation-settings: 'opsz' 144, 'SOFT' 40, 'WONK' 0;
font-weight: 400;
font-size: var(--step-4);
line-height: 1;
letter-spacing: -.02em;
text-transform: lowercase;
margin: 0 0 32px;
text-wrap: balance;
}
.canal__lead em {
font-style: italic;
font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
color: var(--magenta);
}
.canal__info {
display: grid;
gap: 32px;
padding-top: 12px;
}
.canal__item {
display: grid; gap: 6px;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.canal__item-label {
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--steel);
}
.canal__item-value {
font-family: var(--ff-display);
font-variation-settings: 'opsz' 72, 'SOFT' 20, 'WONK' 0;
font-weight: 400;
font-size: clamp(22px, 2vw, 28px);
line-height: 1.2;
color: var(--pearl);
letter-spacing: -.005em;
}
.canal__item-value a { border-bottom: 1px solid var(--line-hi); }
.canal__item-value a:hover { color: var(--magenta); border-color: var(--magenta); }
.canal__item-meta {
margin-top: 4px;
font-family: var(--ff-mono);
font-size: var(--step--2);
letter-spacing: .18em;
text-transform: uppercase;
color: var(--steel);
}
/* Declaración sin chatbots */
.canal__declaration {
margin-top: 40px;
padding: 22px 24px;
border: 1px dashed var(--line-hi);
font-family: var(--ff-mono);
font-size: var(--step--1);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--steel);
line-height: 1.7;
}
.canal__declaration strong { color: var(--pearl); font-weight: 500; }
@media (max-width: 900px) { .canal { grid-template-columns: 1fr; } }
/* ── Reveal en viewport ──────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }/* End custom CSS */