/* =====================================================
Trascend · Growth intelligence
Design tokens
===================================================== */
:root {
/* Royal violet palette */
--ink: #060416;
--night: #0a0420;
--indigo: #130C49;
--royal: #1F137D;
--violet: #5C21C3;
--orchid: #874AD7;
--magenta: #9303C5;
--lilac: #C9A8F2;
/* Bright variants for text over dark backgrounds (WCAG-safe) */
--orchid-bright: #B98CEC;
--magenta-bright: #DC78F2;
--paper: #F4EFFA;
--paper-2: #E7DEF5;
--line: rgba(255, 255, 255, 0.08);
--line-strong:rgba(255, 255, 255, 0.16);
--line-dark: rgba(6, 4, 22, 0.12);
--text: #F4F0FC;
--text-soft: #D4CCEC;
--text-dim: #B5ABD6;
--text-on-light: #1A0E3E;
--text-on-light-soft: #4B3B7A;
--radius-sm: 10px;
--radius: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--shadow-soft: 0 30px 80px -40px rgba(11, 4, 36, 0.9);
--shadow-card: 0 24px 60px -30px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255,255,255,0.04) inset;
--container: 1240px;
--gutter: clamp(20px, 4vw, 48px);
--font-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", ui-sans-serif, system-ui, sans-serif;
--font-body: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
}
/* =====================================================
Fallback font sizing — reduce CLS del font-swap
size-adjust calibra el fallback (Arial) para que ocupe
el mismo espacio visual que la web font cuando llega,
eliminando el salto de layout (CLS 0.382 → ~0.05).
===================================================== */
@font-face {
font-family: "Bricolage Grotesque Fallback";
src: local("Arial"), local("Helvetica Neue"), local(sans-serif);
size-adjust: 99%;
ascent-override: 88%;
descent-override: 22%;
line-gap-override: 0%;
}
@font-face {
font-family: "Plus Jakarta Sans Fallback";
src: local("Arial"), local("Helvetica Neue"), local(sans-serif);
size-adjust: 103%;
ascent-override: 92%;
descent-override: 24%;
line-gap-override: 0%;
}
/* =====================================================
Reset & base
===================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
color: var(--text);
background: var(--ink);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: var(--violet); color: var(--paper); }
.skip {
position: absolute; left: -9999px;
background: var(--violet); color: var(--paper);
padding: 10px 16px; border-radius: 8px; z-index: 999;
}
.skip:focus { left: 16px; top: 16px; }
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding-inline: var(--gutter);
}
/* =====================================================
Typography
===================================================== */
.display {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.12;
font-size: clamp(2.2rem, 5.4vw, 4.6rem);
color: var(--text);
text-wrap: balance;
}
.display em {
font-style: normal;
font-weight: 700;
background: linear-gradient(96deg, var(--orchid-bright) 0%, var(--magenta-bright) 55%, var(--lilac) 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.display.huge { font-size: clamp(2.6rem, 6.4vw, 5.6rem); }
/* Italic glyphs overhang their inline box; background-clip: text only paints
inside it, so extend the paint area generously to avoid "cut" letters
(accents on top, descenders below, italic overhang on both sides).
box-decoration-break: clone repeats the extended paint area on EVERY line
fragment, so ems that wrap across lines don't get clipped at the break. */
.display em,
.hero-title em {
padding: 0.18em 0.22em 0.22em 0.1em;
margin: -0.18em -0.22em -0.22em -0.1em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.lede {
font-size: clamp(1rem, 1.15vw, 1.18rem);
color: var(--text-soft);
line-height: 1.6;
max-width: 58ch;
text-wrap: pretty;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--lilac);
margin-bottom: 22px;
}
.eyebrow .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--magenta);
box-shadow: 0 0 14px var(--magenta);
}
.section-head { max-width: 760px; margin-bottom: clamp(48px, 6vw, 80px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head .lede { margin-top: 18px; }
.section-head.center .lede { margin-inline: auto; }
/* =====================================================
Buttons
===================================================== */
.btn {
--bg: var(--paper);
--fg: var(--ink);
--br: transparent;
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 20px;
border-radius: 999px;
background: var(--bg);
color: var(--fg);
border: 1px solid var(--br);
font-weight: 600;
font-size: 0.93rem;
letter-spacing: -0.005em;
white-space: nowrap;
transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
position: relative;
overflow: hidden;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
--bg: linear-gradient(180deg, var(--paper) 0%, #E2D6F4 100%);
--fg: #1A0E3E;
box-shadow: 0 0 0 1px rgba(255,255,255,0.4) inset, 0 16px 30px -16px rgba(192, 160, 240, 0.4);
}
.btn-primary:hover {
box-shadow: 0 0 0 1px rgba(255,255,255,0.6) inset, 0 20px 36px -16px rgba(192, 160, 240, 0.6);
}
.btn-ghost {
--bg: transparent;
--fg: var(--text);
--br: rgba(255,255,255,0.18);
backdrop-filter: blur(6px);
}
.btn-ghost:hover { --br: rgba(255,255,255,0.4); background: rgba(255,255,255,0.04); }
.btn-lg { padding: 15px 26px; font-size: 1rem; }
.btn-block { width: 100%; justify-content: center; }
/* On light sections, ghost flips */
.section-light .btn-ghost {
--fg: var(--text-on-light);
--br: rgba(26, 14, 62, 0.16);
}
/* =====================================================
NAV
===================================================== */
.nav {
position: fixed; top: 0; left: 0; right: 0;
z-index: 50;
padding: 14px 0;
transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
background: rgba(10, 4, 32, 0.72);
backdrop-filter: blur(18px) saturate(140%);
border-bottom-color: var(--line);
}
.nav-inner {
width: 100%; max-width: var(--container);
margin: 0 auto;
padding-inline: var(--gutter);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
}
.logo {
display: inline-flex; align-items: center; gap: 12px;
color: var(--text);
}
.logo img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(147,3,197,0.45)); }
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-text strong {
font-family: var(--font-display);
font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em;
}
.logo-text em {
font-family: var(--font-mono);
font-style: normal;
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-soft);
margin-top: 2px;
}
.nav-links {
justify-self: center;
display: flex; gap: 6px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px;
backdrop-filter: blur(10px);
}
.nav-links a {
padding: 8px 16px;
border-radius: 999px;
font-size: 0.9rem;
color: var(--text-soft);
transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-cta .btn-ghost { padding: 10px 16px; }
.nav-cta .btn-primary { padding: 10px 18px; }
.nav-burger {
display: none;
width: 44px; height: 44px;
border-radius: 999px;
background: transparent;
border: 1px solid var(--line-strong);
align-items: center; justify-content: center;
flex-direction: column; gap: 5px;
color: var(--text);
}
.nav-burger span { width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .25s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }
.mobile-menu {
position: fixed; left: 16px; right: 16px; top: 78px;
background: rgba(10, 4, 32, 0.96);
backdrop-filter: blur(20px);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 20px;
display: flex; flex-direction: column; gap: 4px;
z-index: 49;
box-shadow: var(--shadow-soft);
}
.mobile-menu a {
padding: 14px 16px;
border-radius: var(--radius-sm);
font-size: 1.05rem;
color: var(--text);
border-bottom: 1px solid var(--line);
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu .mobile-cta { margin-top: 12px; justify-content: center; border-bottom: none; }
.mobile-menu[hidden] { display: none; }
@media (max-width: 1000px) {
.nav-links { display: none; }
.nav-cta .btn-ghost, .nav-cta .btn-primary { display: none; }
.nav-burger { display: inline-flex; }
}
/* =====================================================
HERO
===================================================== */
.hero {
position: relative;
min-height: 100vh;
padding: 170px 0 140px;
overflow: hidden;
isolation: isolate;
--mx: 50;
--my: 30;
--flicker: 1;
}
/* Layered background */
.hero-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero-bg-base {
position: absolute; inset: 0;
background:
radial-gradient(120% 80% at 0% 50%, var(--royal) 0%, var(--indigo) 40%, var(--ink) 80%),
var(--ink);
}
.hero-bg-palms {
position: absolute; inset: 0;
background-image: url("assets/palms-canopy.jpg");
background-size: cover;
background-position: 100% 30%;
filter: saturate(1.05) contrast(1.05) brightness(0.78);
/* clear on right, fade to solid color on left */
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
rgba(0,0,0,0.05) 25%,
rgba(0,0,0,0.35) 50%,
rgba(0,0,0,0.75) 75%,
#000 100%);
mask-image: linear-gradient(90deg,
transparent 0%,
rgba(0,0,0,0.05) 25%,
rgba(0,0,0,0.35) 50%,
rgba(0,0,0,0.75) 75%,
#000 100%);
mix-blend-mode: screen;
opacity: 0.55;
}
.hero-bg-vignette {
position: absolute; inset: 0;
background:
radial-gradient(60% 80% at 0% 60%, rgba(31, 19, 125, 0.55), transparent 70%),
linear-gradient(180deg, rgba(6,4,22,0) 60%, rgba(6,4,22,0.9) 100%);
}
.hero-bg-grain {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.35;
mix-blend-mode: overlay;
}
/* Lamp / spotlight that follows mouse */
.hero-stage {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
overflow: hidden;
}
/* Lamp pivot: anchored to top of hero, follows mouse 1:1 horizontally */
.lamp {
position: absolute;
top: 0;
left: calc(var(--mx) * 1%);
width: 0; height: 0;
transform-origin: top center;
transform: rotate(calc((var(--mx) - 50) * 0.22deg));
transition: left .28s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1);
will-change: transform, left;
z-index: 2;
}
/* The cable hanging from the ceiling */
.lamp-cable {
position: absolute;
top: 0; left: 50%;
width: 14px; height: 74px;
transform: translateX(-50%);
display: block;
pointer-events: none;
z-index: 2;
filter: drop-shadow(0 0 1px rgba(199, 168, 242, 0.25));
}
/* Lamp fixture group sits at end of cable */
.lamp-fixture {
position: absolute;
top: 66px; left: 50%;
width: 140px; height: 86px;
transform: translateX(-50%);
z-index: 3;
}
/* Curved bell shade drawn as SVG — no straight edges */
.lamp-shade-svg {
position: absolute; inset: 0;
width: 100%; height: 100%;
display: block;
filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.55));
}
/* The hot bulb inside the shade */
.lamp-bulb {
position: absolute;
top: 55px; left: 50%;
width: 60px; height: 20px;
transform: translateX(-50%);
background: radial-gradient(ellipse at center,
#ffffff 0%,
#fff6ff 30%,
#d4b8ff 55%,
rgba(180, 120, 240, 0.25) 80%,
transparent 100%);
border-radius: 50%;
filter: blur(0.6px) brightness(calc(0.85 + 0.4 * var(--flicker)));
opacity: calc(0.55 + 0.45 * var(--flicker));
z-index: 3;
box-shadow:
0 0 42px 14px rgba(255, 240, 255, calc(0.6 * var(--flicker))),
0 0 110px 32px rgba(199, 130, 250, calc(0.5 * var(--flicker))),
0 0 210px 60px rgba(135, 74, 215, calc(0.34 * var(--flicker)));
}
/* Cone beam — pure conic gradients, soft edges, no clipped SVG lines */
.lamp-cone {
position: absolute;
top: 130px; left: 50%;
width: 1400px; height: 145vh;
transform: translateX(-50%);
pointer-events: none;
z-index: 1;
opacity: calc(0.55 + 0.45 * var(--flicker));
mix-blend-mode: screen;
}
.lamp-cone .beam {
position: absolute; inset: 0; display: block;
/* Fade in at the very top (light emerges from inside the shade — kills the
hard horizontal edge) and fade out progressively with distance. */
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.92) 3.5%, rgba(0,0,0,0.55) 28%, rgba(0,0,0,0.26) 52%, rgba(0,0,0,0.10) 74%, transparent 93%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.92) 3.5%, rgba(0,0,0,0.55) 28%, rgba(0,0,0,0.26) 52%, rgba(0,0,0,0.10) 74%, transparent 93%);
}
/* The cone's apex sits 132px ABOVE the element (i.e. hidden inside the
shade), so at the shade's mouth the beam is already rim-wide instead of
tapering to a point. Edge angle ±26° for a generous, natural spread. */
.lamp-cone .beam-wide {
background: conic-gradient(from 154deg at 50% -132px,
transparent 0deg,
rgba(180, 130, 245, 0.07) 8deg,
rgba(212, 179, 255, 0.18) 14deg,
rgba(243, 230, 255, 0.30) 21deg,
rgba(243, 230, 255, 0.30) 31deg,
rgba(212, 179, 255, 0.18) 38deg,
rgba(180, 130, 245, 0.07) 44deg,
transparent 52deg);
filter: blur(16px);
}
.lamp-cone .beam-core {
background: conic-gradient(from 168deg at 50% -132px,
transparent 0deg,
rgba(255, 250, 255, 0.36) 7deg,
rgba(255, 250, 255, 0.36) 17deg,
transparent 24deg);
filter: blur(10px);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.88) 3%, rgba(0,0,0,0.35) 42%, rgba(0,0,0,0.12) 60%, transparent 78%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.88) 3%, rgba(0,0,0,0.35) 42%, rgba(0,0,0,0.12) 60%, transparent 78%);
}
/* Atmospheric haze inside the cone */
.lamp-haze {
position: absolute;
top: 130px; left: 50%;
width: 1240px; height: 115vh;
transform: translateX(-50%);
background:
radial-gradient(46% 70% at 50% 8%, rgba(220, 190, 255, 0.20), transparent 70%),
radial-gradient(64% 100% at 50% 35%, rgba(170, 120, 240, 0.12), transparent 75%);
filter: blur(18px);
opacity: calc(0.55 + 0.4 * var(--flicker));
z-index: 1;
mix-blend-mode: screen;
/* Fade in below the shade so the element's top edge never paints a line */
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.9) 7%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.25) 78%, transparent 97%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.9) 7%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.25) 78%, transparent 97%);
}
/* Light pool at the floor — follows mouse */
.lamp-pool {
position: absolute;
bottom: 0; left: calc(var(--mx) * 1%);
width: 82vw; height: 28vh;
transform: translateX(-50%);
background: radial-gradient(50% 100% at 50% 100%,
rgba(220, 184, 255, calc(0.38 * var(--flicker))) 0%,
rgba(160, 100, 240, calc(0.22 * var(--flicker))) 40%,
transparent 70%);
filter: blur(24px);
z-index: 1;
mix-blend-mode: screen;
transition: left .35s cubic-bezier(.2,.7,.2,1);
pointer-events: none;
}
/* Cursor glow — soft halo around pointer */
.cursor-glow {
position: absolute;
width: 680px; height: 680px;
left: calc(var(--mx) * 1%);
top: calc(var(--my) * 1%);
transform: translate(-50%, -50%);
background: radial-gradient(circle,
rgba(220, 184, 255, 0.16) 0%,
rgba(147, 3, 197, 0.08) 30%,
transparent 65%);
filter: blur(24px);
mix-blend-mode: screen;
pointer-events: none;
opacity: calc(0.8 * var(--flicker));
}
@media (prefers-reduced-motion: reduce) {
.lamp-beam, .lamp-pool, .lamp { transition: none; transform: none; }
}
/* Hero content */
.hero-content {
position: relative;
z-index: 2;
max-width: 920px;
}
.hero-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.6rem, 7.4vw, 6rem);
letter-spacing: -0.035em;
line-height: 1.08;
margin-bottom: 28px;
text-wrap: balance;
}
.hero-title span { display: block; }
.hero-title em {
font-style: normal;
background: linear-gradient(96deg, var(--orchid-bright), var(--magenta-bright) 60%, var(--lilac));
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.hero-lede {
font-size: clamp(1.05rem, 1.3vw, 1.25rem);
color: var(--text-soft);
max-width: 620px;
line-height: 1.55;
margin-bottom: 36px;
text-wrap: pretty;
}
.hero-lede strong { color: var(--text); font-weight: 600; }
.hero-cta {
display: flex; flex-wrap: wrap; gap: 12px;
margin-bottom: 44px;
}
.hero-trust {
display: flex; flex-wrap: wrap; gap: 18px 36px;
padding-top: 26px;
border-top: 1px solid var(--line);
font-size: 0.92rem;
color: var(--text-soft);
max-width: 720px;
}
.hero-trust li { display: flex; align-items: baseline; gap: 8px; }
.hero-trust b {
font-family: var(--font-display);
font-weight: 700;
color: var(--text);
font-size: 1.05rem;
letter-spacing: -0.01em;
}
.hero-scroll {
position: absolute;
bottom: 32px; left: 50%;
transform: translateX(-50%);
display: flex; align-items: center; gap: 10px;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-dim);
z-index: 1;
}
.hero-scroll i {
width: 1px; height: 40px;
background: linear-gradient(180deg, var(--text-dim), transparent);
display: block;
position: relative;
}
.hero-scroll i::after {
content: "";
position: absolute; top: 0; left: -1px;
width: 3px; height: 8px;
background: var(--orchid);
border-radius: 2px;
animation: scroll-dot 2.2s ease-in-out infinite;
}
@keyframes scroll-dot {
0%, 100% { transform: translateY(0); opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { transform: translateY(34px); opacity: 0; }
}
/* =====================================================
BAND (sectors)
===================================================== */
.band {
position: relative;
padding: 28px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background:
linear-gradient(180deg, rgba(31, 19, 125, 0.15), rgba(6, 4, 22, 0.6)),
var(--ink);
overflow: hidden;
}
.band-inner {
display: flex; align-items: center; gap: 36px;
flex-wrap: wrap;
justify-content: center;
}
.band-label {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-dim);
}
.band-items {
display: flex; flex-wrap: wrap; gap: 18px;
align-items: center;
font-size: 0.95rem;
color: var(--text-soft);
}
.band-items li { font-weight: 500; }
.band-items li:nth-child(even) { color: var(--text-dim); opacity: 0.8; }
/* =====================================================
SECTION TRANSITIONS (Pendulum-style vertical light bars)
===================================================== */
.insight,
.method,
.manifesto,
.audiences,
.stories,
.final {
position: relative;
/* `clip` instead of `hidden`: hidden creates a scroll container and
breaks position: sticky inside (insight section) */
overflow: hidden;
overflow: clip;
isolation: isolate;
}
/* Soft section transitions: a centered hairline that fades at the edges
plus a very gentle violet bloom — subtle and elegant. */
.insight::before,
.method::before,
.manifesto::before,
.audiences::before,
.stories::before,
.final::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 180px;
pointer-events: none;
z-index: 2;
background:
linear-gradient(90deg, transparent 15%, rgba(199, 168, 242, 0.16) 50%, transparent 85%) top / 100% 1px no-repeat,
radial-gradient(46% 100% at 50% 0%, rgba(135, 74, 215, 0.09), transparent 75%);
}
/* =====================================================
INSIGHT — sticky scroll: copy stays, symptoms reveal one by one
===================================================== */
.insight {
padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 10vw, 140px);
background: var(--ink);
}
/* Texture and darkening live on separate stacked layers (not multi-layer
background shorthand) so every renderer composites them identically. */
.insight-bg {
position: absolute; inset: 0; z-index: 0;
}
.insight-bg::before {
content: "";
position: absolute; inset: 0;
background: url("assets/lamp-room.jpg") center / cover no-repeat;
opacity: 0.5;
}
.insight-bg::after {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(6,4,22,0.92) 0%, rgba(6,4,22,0.78) 30%, rgba(6,4,22,0.78) 70%, rgba(6,4,22,0.96) 100%),
radial-gradient(60% 60% at 100% 0%, rgba(92, 33, 195, 0.20), transparent 60%),
radial-gradient(50% 50% at 0% 100%, rgba(31, 19, 125, 0.25), transparent 70%);
}
.insight-layout {
position: relative; z-index: 3;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(40px, 6vw, 96px);
align-items: start;
}
/* Left column: sticky headline + progress */
.insight-copy {
position: sticky;
top: 120px;
align-self: start;
padding-block: 40px 0;
}
.insight-copy h2 { margin-bottom: 24px; font-size: clamp(2rem, 3.5vw, 3.5rem); }
.insight-copy h2 em {
font-style: italic;
font-family: var(--font-display);
}
.insight-copy .lede { margin-bottom: 32px; max-width: 46ch; }
.symptoms-progress {
display: flex; flex-direction: column; gap: 16px;
padding: 22px;
background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
border: 1px solid var(--line);
border-radius: var(--radius-lg);
backdrop-filter: blur(8px);
max-width: 360px;
}
.sym-counter {
display: flex; align-items: baseline; gap: 8px;
font-family: var(--font-mono);
color: var(--text-soft);
font-size: 0.85rem;
letter-spacing: 0.06em;
}
.sym-counter b {
font-family: var(--font-display);
font-weight: 700;
font-size: 2rem;
letter-spacing: -0.02em;
color: transparent;
background: linear-gradient(96deg, var(--paper), var(--lilac));
-webkit-background-clip: text; background-clip: text;
line-height: 1;
}
.sym-bar {
position: relative;
height: 3px;
background: rgba(255,255,255,0.08);
border-radius: 2px;
overflow: hidden;
}
.sym-bar i {
position: absolute; left: 0; top: 0; bottom: 0;
background: linear-gradient(90deg, var(--violet), var(--magenta), var(--orchid));
border-radius: 2px;
transition: width .5s cubic-bezier(.2,.7,.2,1);
display: block;
}
.sym-dots {
display: flex; gap: 8px;
align-items: center;
}
.sym-dots li {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
transition: background .35s, transform .35s;
}
.sym-dots li.is-active {
background: var(--magenta);
box-shadow: 0 0 12px var(--magenta);
transform: scale(1.25);
}
.sym-dots li.is-done {
background: var(--orchid);
}
/* Right column: vertically scrolling symptoms */
.symptoms {
display: flex; flex-direction: column;
gap: 0;
}
.symptom {
position: relative;
min-height: 70vh;
padding: 60px 0;
display: flex; flex-direction: column; justify-content: center;
opacity: 0.68;
transition: opacity .6s cubic-bezier(.2,.7,.2,1);
border-top: 1px solid var(--line);
}
/* Giant ghost numeral gives each stage visual weight */
.symptom::after {
content: attr(data-num);
position: absolute;
top: 50%; right: -10px;
transform: translateY(-50%);
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(8rem, 15vw, 14rem);
line-height: 1;
letter-spacing: -0.04em;
color: transparent;
-webkit-text-stroke: 1.5px rgba(199, 168, 242, 0.10);
pointer-events: none;
opacity: 0.55;
transition: opacity .6s ease, -webkit-text-stroke-color .6s ease;
z-index: -1;
}
.symptom.is-active::after {
opacity: 1;
-webkit-text-stroke-color: rgba(199, 168, 242, 0.22);
}
.symptom:first-child { border-top: none; }
.symptom.is-active { opacity: 1; }
.symptom .num {
font-family: var(--font-mono);
font-size: 1rem;
letter-spacing: 0.18em;
color: var(--lilac);
margin-bottom: 20px;
display: inline-flex; align-items: center; gap: 10px;
}
.symptom .num::before {
content: "";
width: 28px; height: 1px;
background: var(--orchid);
display: block;
}
.symptom h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.6rem, 4.4vw, 4.1rem);
letter-spacing: -0.025em;
line-height: 1.08;
margin-bottom: 20px;
text-wrap: balance;
}
.symptom > p {
font-size: clamp(1.12rem, 1.45vw, 1.35rem);
color: var(--text-soft);
max-width: 50ch;
line-height: 1.55;
margin-bottom: 28px;
text-wrap: pretty;
}
.sym-list {
display: flex; flex-direction: column; gap: 12px;
padding-top: 24px;
border-top: 1px solid var(--line);
max-width: 46ch;
}
.sym-list li {
font-family: var(--font-mono);
font-size: 1rem;
letter-spacing: 0.04em;
color: var(--text-soft);
display: flex; align-items: center; gap: 12px;
}
.sym-list li::before {
content: "";
width: 16px; height: 1px;
background: var(--orchid);
}
@media (max-width: 1000px) {
.insight-layout { grid-template-columns: 1fr; }
.insight-copy { position: static; padding-block: 0 40px; }
.symptom { min-height: auto; padding: 36px 0; opacity: 1; }
.symptom::after { display: none; }
.symptoms-progress { display: none; }
}
/* =====================================================
METHOD
===================================================== */
.method {
padding: clamp(100px, 13vw, 180px) 0;
background: linear-gradient(180deg, var(--ink) 0%, var(--night) 50%, var(--ink) 100%);
}
.method-bg { position: absolute; inset: 0; z-index: 0; }
.method-bg-palms {
position: absolute; inset: 0;
background-image: url("assets/palms-beach.jpg");
background-size: cover;
background-position: center 30%;
opacity: 0.22;
filter: saturate(1.2) hue-rotate(-6deg);
-webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 30%, transparent 90%);
mask-image: radial-gradient(70% 60% at 50% 35%, #000 30%, transparent 90%);
}
.method-bg-fade {
position: absolute; inset: 0;
background:
linear-gradient(180deg, var(--ink) 0%, transparent 25%, transparent 75%, var(--ink) 100%);
}
/* Without a stacking context the absolutely-positioned bg layers paint OVER
the in-flow heading, washing it out. Raise the content above them. */
.method-layout {
position: relative;
z-index: 3;
}
.steps {
display: flex;
align-items: stretch;
gap: 18px;
position: relative; z-index: 3;
}
.step {
flex: 1 1 0;
min-width: 0;
position: relative;
padding: 32px 26px 28px;
background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
backdrop-filter: blur(6px);
display: flex; flex-direction: column; gap: 12px;
transition: flex-grow .55s cubic-bezier(.2,.7,.2,1), transform .35s, border-color .35s, background .35s, opacity .35s, box-shadow .35s;
min-height: 340px;
}
.step-dur {
position: absolute;
top: 32px; right: 26px;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-soft);
}
.step-more {
color: var(--text-soft);
font-size: 0.92rem;
line-height: 1.55;
text-wrap: pretty;
}
/* Desktop with mouse: cards expand on hover and reveal extra detail */
@media (hover: hover) and (min-width: 1101px) {
.step .step-more {
max-height: 0;
opacity: 0;
overflow: hidden;
margin: 0;
transition: max-height .5s cubic-bezier(.2,.7,.2,1), opacity .35s ease .08s;
}
.step:hover {
flex-grow: 1.9;
transform: translateY(-6px);
border-color: rgba(199, 168, 242, 0.45);
background: linear-gradient(180deg, rgba(135, 74, 215, 0.14) 0%, rgba(255,255,255,0.03) 100%);
box-shadow: 0 30px 60px -30px rgba(92, 33, 195, 0.55);
}
.step:hover .step-more {
max-height: 240px;
opacity: 1;
}
.steps:hover .step:not(:hover) { opacity: 0.78; }
}
.step-num {
display: inline-flex;
align-items: center; justify-content: center;
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid var(--line-strong);
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--lilac);
background: rgba(135, 74, 215, 0.14);
margin-bottom: 8px;
}
.step h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.32rem;
letter-spacing: -0.02em;
}
.step > p {
color: var(--text-soft);
font-size: 0.94rem;
}
.step ul {
display: flex; flex-direction: column; gap: 6px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.step ul li {
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--text-soft);
letter-spacing: 0.03em;
display: flex; align-items: center; gap: 8px;
}
.step ul li::before {
content: "";
width: 4px; height: 4px;
background: var(--orchid);
border-radius: 50%;
}
/* =====================================================
SERVICES
===================================================== */
.services {
position: relative;
padding: clamp(100px, 13vw, 180px) 0;
background: var(--ink);
overflow: hidden;
}
.services::before {
content: "";
position: absolute;
top: -200px; left: 50%;
width: 100%; height: 600px;
transform: translateX(-50%);
background: radial-gradient(60% 60% at 50% 0%, rgba(135, 74, 215, 0.25), transparent 60%);
pointer-events: none;
}
.services .container {
position: relative;
z-index: 1;
}
.services-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 18px;
}
.services-grid > .service:nth-child(1) { grid-row: span 2; }
.services-grid > .service:nth-child(2) { grid-column: 2 / span 2; }
.service {
position: relative;
padding: 32px;
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
border: 1px solid var(--line);
border-radius: var(--radius-lg);
display: flex; flex-direction: column;
gap: 16px;
min-height: 280px;
overflow: hidden;
transition: transform .35s, border-color .35s;
}
.service::before {
content: "";
position: absolute;
top: -50%; right: -50%;
width: 100%; height: 100%;
background: radial-gradient(circle, rgba(135, 74, 215, 0.18), transparent 70%);
opacity: 0; transition: opacity .35s;
pointer-events: none;
}
.service:hover {
transform: translateY(-3px);
border-color: rgba(199, 168, 242, 0.35);
}
.service:hover::before { opacity: 1; }
.service-tag {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-soft);
}
.service-tag .ix {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
border: 1px solid var(--line-strong);
color: var(--lilac);
font-size: 0.7rem;
}
.service h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.25rem, 1.8vw, 1.7rem);
letter-spacing: -0.02em;
line-height: 1.15;
text-wrap: balance;
}
.service > p { color: var(--text-soft); font-size: 0.95rem; }
.service-bullets {
display: flex; flex-direction: column; gap: 8px;
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.service-bullets li {
font-size: 0.88rem;
color: var(--text-soft);
display: flex; align-items: center; gap: 10px;
}
.service-bullets li::before {
content: ""; width: 5px; height: 5px;
background: var(--magenta); border-radius: 50%;
}
.service--feature {
background:
radial-gradient(80% 60% at 100% 100%, rgba(147, 3, 197, 0.28), transparent 70%),
linear-gradient(180deg, rgba(135, 74, 215, 0.16) 0%, rgba(20, 12, 73, 0.4) 100%);
border-color: rgba(199, 168, 242, 0.25);
}
.service--feature h3 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); }
.link-arrow {
display: inline-flex; align-items: center; gap: 8px;
margin-top: auto;
font-family: var(--font-mono);
font-size: 0.82rem;
letter-spacing: 0.05em;
color: var(--lilac);
width: max-content;
padding-top: 8px;
}
.link-arrow svg { width: 14px; height: 14px; transition: transform .25s; }
.link-arrow:hover { color: var(--paper); }
.link-arrow:hover svg { transform: translateX(3px); }
/* =====================================================
MANIFESTO / KPIs
===================================================== */
.manifesto {
padding: clamp(100px, 12vw, 180px) 0;
background: var(--night);
}
.manifesto-bg {
position: absolute; inset: 0; z-index: 0;
}
.manifesto-bg::before {
content: "";
position: absolute; inset: 0;
background: url("assets/lamp-room.jpg") center / cover no-repeat;
opacity: 0.45;
}
.manifesto-bg::after {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(10,4,32,0.86), rgba(6,4,22,0.94)),
radial-gradient(80% 60% at 50% 50%, rgba(147, 3, 197, 0.14), transparent 60%);
}
.manifesto-layout {
position: relative; z-index: 3;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
.manifesto-copy h2 { margin-bottom: 24px; }
.manifesto-copy h2 em {
font-style: italic;
}
.manifesto-copy .lede { margin-bottom: 32px; }
.kpi-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.kpi-grid li {
padding: 28px;
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
border: 1px solid var(--line);
border-radius: var(--radius-lg);
display: flex; flex-direction: column; gap: 8px;
backdrop-filter: blur(8px);
}
.kpi-grid strong {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2rem, 3.4vw, 3rem);
letter-spacing: -0.03em;
line-height: 1;
background: linear-gradient(96deg, var(--paper), var(--lilac));
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.kpi-grid span {
font-size: 0.9rem;
color: var(--text-soft);
line-height: 1.4;
}
/* =====================================================
AUDIENCES
===================================================== */
.audiences {
padding: clamp(100px, 13vw, 180px) 0;
background: var(--ink);
}
.audience-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.audience {
padding: 36px;
background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
border: 1px solid var(--line);
border-radius: var(--radius-xl);
display: flex; flex-direction: column; gap: 14px;
position: relative;
overflow: hidden;
transition: border-color .35s, transform .35s;
}
.audience::after {
content: "";
position: absolute;
bottom: -30%; left: -20%;
width: 70%; height: 70%;
background: radial-gradient(circle, rgba(135, 74, 215, 0.15), transparent 70%);
opacity: 0; transition: opacity .4s;
pointer-events: none;
}
.audience:hover {
border-color: rgba(199, 168, 242, 0.3);
transform: translateY(-3px);
}
.audience:hover::after { opacity: 1; }
.aud-label {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--lilac);
padding: 6px 12px;
border: 1px solid rgba(199, 168, 242, 0.3);
border-radius: 999px;
width: max-content;
background: rgba(135, 74, 215, 0.10);
}
.audience h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.25rem, 1.8vw, 1.6rem);
letter-spacing: -0.02em;
text-wrap: balance;
line-height: 1.18;
}
.audience > p { color: var(--text-soft); font-size: 0.96rem; }
.audience ul {
display: flex; flex-direction: column; gap: 8px;
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.audience ul li {
font-size: 0.88rem;
color: var(--text-soft);
display: flex; align-items: center; gap: 10px;
}
.audience ul li::before {
content: "";
width: 16px; height: 1px; background: var(--orchid);
}
/* =====================================================
STORIES
===================================================== */
.stories {
padding: clamp(100px, 13vw, 180px) 0;
background: var(--night);
}
.stories-bg {
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(50% 50% at 80% 30%, rgba(135, 74, 215, 0.25), transparent 70%),
radial-gradient(60% 60% at 10% 80%, rgba(31, 19, 125, 0.35), transparent 70%);
}
.stories .container { position: relative; z-index: 3; }
.stories-grid {
display: grid;
grid-template-columns: 1.35fr 1fr 1fr;
gap: 18px;
}
.stories-grid > .story:nth-child(1) { grid-row: span 2; }
.stories-grid > .story:nth-child(2) { grid-column: 2 / span 2; }
.stories-grid > .story:nth-child(6) { grid-column: 2 / span 2; }
.stories-grid > .story:nth-child(1) blockquote { font-size: clamp(1.3rem, 1.8vw, 1.6rem); }
.story {
padding: 32px;
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
border: 1px solid var(--line);
border-radius: var(--radius-lg);
display: flex; flex-direction: column; gap: 16px;
min-height: 250px;
transition: opacity .45s ease, transform .45s ease, border-color .35s ease;
}
.story.is-swapping {
opacity: 0;
transform: translateY(10px) scale(0.99);
}
.stars { color: var(--orchid-bright); font-size: 1rem; letter-spacing: 0.15em; }
.story blockquote {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 500;
letter-spacing: -0.015em;
line-height: 1.35;
margin: 0;
color: var(--text);
}
.story footer {
display: flex; align-items: center; gap: 12px;
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.avatar {
width: 42px; height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, var(--violet), var(--magenta));
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-weight: 600;
color: var(--paper);
font-size: 0.85rem;
}
.story footer strong {
display: block; font-weight: 600; color: var(--text); font-size: 0.95rem;
}
.story footer span {
font-family: var(--font-mono);
font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--text-dim);
}
.story-tag {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.05em;
color: var(--lilac);
}
.story--quote {
background:
radial-gradient(80% 80% at 100% 100%, rgba(147, 3, 197, 0.3), transparent 60%),
linear-gradient(180deg, rgba(92, 33, 195, 0.25), rgba(20, 12, 73, 0.5));
border-color: rgba(199, 168, 242, 0.25);
justify-content: space-between;
}
.quote-big {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.5rem, 2.4vw, 2rem);
letter-spacing: -0.025em;
line-height: 1.15;
color: var(--text);
margin: 0;
text-wrap: balance;
}
.quote-big em { font-style: italic; color: var(--lilac); }
/* =====================================================
FINAL CTA
===================================================== */
.final {
padding: clamp(110px, 14vw, 200px) 0;
background: var(--ink);
}
.final-bg { position: absolute; inset: 0; z-index: 0; }
.final-bg-palms {
position: absolute; inset: 0;
background-image: url("assets/palms-beach.jpg");
background-size: cover;
background-position: center 50%;
filter: saturate(1.2) contrast(1.05) brightness(0.85);
opacity: 0.6;
-webkit-mask-image: radial-gradient(60% 70% at 50% 60%, #000 0%, rgba(0,0,0,0.4) 50%, transparent 90%);
mask-image: radial-gradient(60% 70% at 50% 60%, #000 0%, rgba(0,0,0,0.4) 50%, transparent 90%);
}
.final-bg-fade {
position: absolute; inset: 0;
background: linear-gradient(180deg,
var(--ink) 0%,
rgba(6,4,22,0.72) 30%,
rgba(6,4,22,0.68) 70%,
var(--ink) 100%);
}
.final-layout {
position: relative; z-index: 3;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
.final-copy h2 { margin-bottom: 24px; }
.final-copy h2 em { font-style: italic; }
.final-copy .lede { margin-bottom: 32px; }
.final-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.lead-card {
padding: 28px;
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
border: 1px solid var(--line-strong);
border-radius: var(--radius-xl);
backdrop-filter: blur(20px);
display: flex; flex-direction: column; gap: 14px;
box-shadow: var(--shadow-card);
}
.lead-head {
display: flex; align-items: center; gap: 10px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
margin-bottom: 6px;
}
.lead-head .dot {
width: 8px; height: 8px; border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 10px #4ade80;
}
.lead-head strong {
font-family: var(--font-display);
font-weight: 600;
color: var(--text);
}
.lead-status {
margin-left: auto;
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-dim);
}
.lead-card label {
display: flex; flex-direction: column; gap: 6px;
}
.lead-card label span {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-soft);
}
.lead-card input,
.lead-card select,
.lead-card textarea {
width: 100%;
padding: 13px 14px;
font: inherit;
color: var(--text);
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
outline: none;
transition: border-color .2s, background .2s;
font-size: 0.95rem;
}
.lead-card input:focus,
.lead-card select:focus,
.lead-card textarea:focus {
border-color: var(--orchid);
background: rgba(0, 0, 0, 0.35);
}
.lead-card textarea { resize: vertical; min-height: 80px; }
.lead-card select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .lead-row { grid-template-columns: 1fr; } }
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 0.84rem; color: var(--lilac); margin-top: 4px; min-height: 18px; }
.lead-card input::placeholder,
.lead-card textarea::placeholder { color: var(--text-dim); opacity: 1; }
/* =====================================================
FOOTER
===================================================== */
.footer {
background: var(--ink);
border-top: 1px solid var(--line);
padding: 80px 0 32px;
color: var(--text-soft);
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: 48px;
margin-bottom: 64px;
}
.footer-brand p { font-size: 0.92rem; margin: 18px 0 22px; max-width: 32ch; }
.footer h4 {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text);
margin-bottom: 18px;
font-weight: 500;
}
.footer-grid > div > a {
display: block;
font-size: 0.95rem;
padding: 4px 0;
color: var(--text-soft);
transition: color .2s;
}
.footer-grid > div > a:hover { color: var(--text); }
.social { display: flex; gap: 10px; }
.social a {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid var(--line-strong);
color: var(--text-soft);
transition: color .2s, border-color .2s, background .2s;
}
.social a:hover { color: var(--paper); border-color: var(--orchid); background: rgba(135, 74, 215, 0.15); }
.social svg { width: 18px; height: 18px; }
.footer-region {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--text-dim);
margin-top: 10px;
}
.footer-bottom {
padding-top: 24px;
border-top: 1px solid var(--line);
display: flex; justify-content: space-between; gap: 16px;
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: 0.76rem;
letter-spacing: 0.06em;
color: var(--text-dim);
}
/* =====================================================
SERVICE DETAIL SHEETS (slide-in side panel)
===================================================== */
.sheets {
position: fixed; inset: 0;
z-index: 100;
pointer-events: none;
}
.sheets[aria-hidden="false"] { pointer-events: auto; }
.sheet-backdrop {
position: absolute; inset: 0;
background: rgba(6, 4, 22, 0.6);
backdrop-filter: blur(8px);
opacity: 0;
transition: opacity .35s ease;
}
.sheets[aria-hidden="false"] .sheet-backdrop { opacity: 1; }
.sheet {
position: absolute;
top: 0; right: 0; bottom: 0;
width: min(560px, 100%);
background: linear-gradient(180deg, #0d0628 0%, #060416 100%);
border-left: 1px solid var(--line-strong);
box-shadow: -30px 0 80px -20px rgba(0,0,0,0.6);
transform: translateX(100%);
transition: transform .45s cubic-bezier(.2,.7,.2,1);
display: flex; flex-direction: column;
overflow: hidden;
visibility: hidden;
}
.sheet.is-open {
transform: translateX(0);
visibility: visible;
}
.sheet-head {
display: flex; align-items: center; justify-content: space-between;
padding: 22px 28px;
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, rgba(135, 74, 215, 0.10) 0%, transparent 100%);
}
.sheet-tag {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--lilac);
}
.sheet-close {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.04);
border: 1px solid var(--line-strong);
color: var(--text);
display: inline-flex; align-items: center; justify-content: center;
transition: background .2s, border-color .2s;
}
.sheet-close:hover {
background: rgba(255,255,255,0.08);
border-color: var(--orchid);
}
.sheet-close svg { width: 16px; height: 16px; }
.sheet-body {
padding: 32px 28px 24px;
overflow-y: auto;
flex: 1;
scrollbar-width: thin;
scrollbar-color: var(--violet) transparent;
}
.sheet-body::-webkit-scrollbar { width: 6px; }
.sheet-body::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 3px; }
.sheet-body h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.7rem, 2.5vw, 2.2rem);
letter-spacing: -0.025em;
line-height: 1.05;
margin-bottom: 12px;
text-wrap: balance;
}
.sheet-lede {
color: var(--text-soft);
font-size: 1.02rem;
line-height: 1.5;
margin-bottom: 28px;
text-wrap: pretty;
}
.sheet-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px 28px;
}
.sheet-grid > div {
display: flex; flex-direction: column; gap: 10px;
}
.sheet-grid h4 {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--lilac);
font-weight: 500;
margin: 0;
}
.sheet-grid ul {
display: flex; flex-direction: column; gap: 8px;
}
.sheet-grid ul li {
font-size: 0.92rem;
color: var(--text-soft);
line-height: 1.45;
display: flex; align-items: flex-start; gap: 10px;
}
.sheet-grid ul li::before {
content: "";
flex: 0 0 auto;
width: 5px; height: 5px;
background: var(--magenta);
border-radius: 50%;
margin-top: 8px;
}
.sheet-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 14px;
padding: 20px 28px;
border-top: 1px solid var(--line);
background: rgba(255,255,255,0.02);
}
.sheet-foot > span {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-dim);
}
/* Make link-arrow buttons clean */
button.link-arrow {
background: none;
border: none;
cursor: pointer;
padding: 8px 0 0;
text-align: left;
}
@media (max-width: 600px) {
.sheet-grid { grid-template-columns: 1fr; }
}
.js-reveal .reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }
/* Safety net: anything still hidden after 2s gets revealed */
.js-reveal.reveal-flush .reveal:not(.is-in) { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
.js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}
/* =====================================================
Responsive
===================================================== */
@media (max-width: 1100px) {
.insight-layout { grid-template-columns: 1fr; }
.insight-copy { position: static; }
.steps { flex-wrap: wrap; }
.step { flex: 1 1 calc(50% - 9px); }
.services-grid { grid-template-columns: 1fr 1fr; }
.services-grid > .service:nth-child(1) { grid-row: auto; grid-column: 1 / -1; }
.services-grid > .service:nth-child(2) { grid-column: auto; }
.manifesto-layout, .final-layout { grid-template-columns: 1fr; }
.stories-grid { grid-template-columns: 1fr 1fr; }
.stories-grid > .story:nth-child(1) { grid-row: auto; }
.stories-grid > .story:nth-child(2),
.stories-grid > .story:nth-child(6) { grid-column: auto; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
/* Hero */
.hero { padding: 110px 0 80px; min-height: auto; }
.hero-title { font-size: clamp(2.4rem, 9vw, 3.4rem); }
.hero-lede { font-size: 1rem; }
.hero-cta { flex-direction: column; align-items: flex-start; gap: 10px; }
.hero-cta .btn-lg { width: 100%; justify-content: center; }
.hero-trust { font-size: 0.85rem; gap: 10px 20px; flex-wrap: wrap; }
.hero-scroll { display: none; }
/* Band: ocultar separadores de puntos en móvil */
.band-items > li:nth-child(even) { display: none; }
.band-items { gap: 10px 16px; flex-wrap: wrap; justify-content: center; }
/* Insight */
.insight { padding-block: 60px 40px; }
.insight-copy { padding-block: 0 32px; }
.symptoms-progress { max-width: 100%; }
/* Steps */
.step { flex: 1 1 100%; min-height: 0; }
/* Services */
.services-grid { grid-template-columns: 1fr; }
.service { padding: 24px 20px; }
/* Manifesto */
.kpi-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
.kpi-grid li strong { font-size: clamp(2rem, 8vw, 2.8rem); }
.manifesto { padding-block: 80px; }
/* Audiences */
.audience-grid { grid-template-columns: 1fr; }
/* Stories */
.stories-grid { grid-template-columns: 1fr; }
.stories-grid > .story:nth-child(2),
.stories-grid > .story:nth-child(6) { grid-column: auto; }
/* Final CTA */
.final-layout { gap: 48px; }
.final-cta { flex-direction: column; align-items: flex-start; gap: 10px; }
.final-cta .btn-lg { width: 100%; justify-content: center; }
/* Footer */
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
.footer-bottom { flex-direction: column; gap: 4px; text-align: center; }
/* Nav */
.nav-inner { grid-template-columns: auto 1fr; }
.nav-cta { justify-self: end; gap: 6px; }
/* Symptoms */
.symptoms li { grid-template-columns: 1fr; gap: 6px; }
.symptoms .num { padding-top: 0; }
/* Sheets: panel completo en móvil */
.sheet { width: 100vw; right: 0; }
}
/* Pantallas muy chicas */
@media (max-width: 400px) {
.hero-title { font-size: 2.2rem; }
.display { font-size: clamp(1.9rem, 8vw, 2.6rem); }
.btn-lg { padding: 13px 20px; font-size: 0.95rem; }
.kpi-grid { grid-template-columns: 1fr; }
}
/* =====================================================
TRASCEND AGE · product spotlight (entry to AGE marketing site)
===================================================== */
.age-spot { position: relative; padding: clamp(90px, 11vw, 160px) 0; background: var(--night); overflow: hidden; overflow: clip; isolation: isolate; }
.age-spot::before { content: ""; position: absolute; top: -160px; left: 50%; width: 120%; height: 540px; transform: translateX(-50%); background: radial-gradient(48% 60% at 50% 0%, rgba(147, 3, 197, 0.24), transparent 66%); pointer-events: none; z-index: 0; }
.age-spot::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, transparent 15%, rgba(199,168,242,0.16) 50%, transparent 85%) top / 100% 1px no-repeat; }
.age-layout { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
.age-copy .badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lilac); padding: 6px 13px; border: 1px solid rgba(199, 168, 242, 0.3); border-radius: 999px; background: rgba(135, 74, 215, 0.12); margin-bottom: 22px; }
.age-copy .badge b { color: #fff; font-weight: 700; }
.age-copy h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3.2rem); letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; }
.age-copy h2 em { font-style: normal; background: linear-gradient(96deg, var(--orchid-bright), var(--magenta-bright) 60%, var(--lilac)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.age-copy .lede { margin: 20px 0 26px; max-width: 52ch; }
.age-points { display: flex; flex-direction: column; gap: 13px; margin-bottom: 32px; }
.age-points li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-soft); font-size: 0.98rem; line-height: 1.45; }
.age-points svg { width: 20px; height: 20px; color: var(--magenta-bright); flex: none; margin-top: 2px; }
.age-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.age-vis { position: relative; border: 1px solid var(--line-strong); border-radius: var(--radius-xl); padding: 22px; background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015)); box-shadow: var(--shadow-card); backdrop-filter: blur(8px); }
.age-vis .vh { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.age-vis .vh .av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(140deg, var(--violet), var(--magenta)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.8rem; }
.age-vis .vh b { font-size: 0.92rem; color: var(--text); }
.age-vis .vh small { display: block; font-family: var(--font-mono); font-size: 0.64rem; color: var(--text-dim); }
.age-vis .vh .live { margin-left: auto; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: #3ECF8E; display: inline-flex; align-items: center; gap: 6px; }
.age-vis .vh .live i { width: 6px; height: 6px; border-radius: 50%; background: #3ECF8E; box-shadow: 0 0 8px #3ECF8E; }
.age-bub { max-width: 86%; padding: 9px 12px; border-radius: 13px; font-size: 0.86rem; line-height: 1.4; margin-bottom: 9px; }
.age-bub.inb { background: rgba(255,255,255,0.06); border-top-left-radius: 4px; color: var(--text-soft); }
.age-bub.out { background: linear-gradient(120deg, var(--violet), var(--magenta)); color: #fff; margin-left: auto; border-top-right-radius: 4px; }
.age-stat { display: flex; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.age-stat > div { flex: 1; }
.age-stat .v { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; background: linear-gradient(96deg, var(--paper), var(--lilac)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.age-stat .l { font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; }
@media (max-width: 900px) { .age-layout { grid-template-columns: 1fr; } .age-vis { order: -1; max-width: 460px; } }
/* =====================================================
RUMBO 2026 · Automatización & operaciones digitales
Añadidos del reposicionamiento. Aditivo: no modifica
ninguna regla anterior.
===================================================== */
/* --- Selector de idioma --- */
.lang-switch {
display: inline-flex; align-items: center;
border: 1px solid var(--line-strong);
border-radius: 999px;
padding: 3px;
background: rgba(255,255,255,0.04);
gap: 2px;
}
.lang-switch button {
font-family: var(--font-mono);
font-size: 0.68rem; letter-spacing: 0.08em;
padding: 5px 10px;
border: 0; border-radius: 999px;
background: transparent; color: var(--text-dim);
transition: color .25s, background .25s;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button.is-on {
background: linear-gradient(135deg, var(--violet), var(--magenta));
color: #fff;
}
.mobile-menu .lang-switch { margin-top: 6px; align-self: flex-start; }
/* --- Manifiesto: principios en lugar de métricas --- */
.kpi-grid--principles strong {
font-size: clamp(1.15rem, 1.6vw, 1.45rem);
letter-spacing: -0.01em;
line-height: 1.15;
display: block;
margin-bottom: 10px;
}
.kpi-grid--principles li { padding: 24px 26px; }
.kpi-grid--principles span { font-size: 0.88rem; line-height: 1.5; }
/* --- Grilla de 3 (evidencia / lo construido) --- */
.audience-grid--3 { grid-template-columns: repeat(3, 1fr); }
.audience .aud-foot {
margin-top: auto; padding-top: 18px;
border-top: 1px solid var(--line);
}
.audience .link-arrow { padding: 0; }
/* --- Nota honesta bajo un título de sección --- */
.section-head .lede-note {
font-family: var(--font-mono);
font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--lilac); margin-top: 14px;
}
@media (max-width: 1180px) {
.audience-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.audience-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) {
.nav-cta .lang-switch { display: none; }
}
/* =====================================================
ANCHO Y RESPIRO · el sitio usa el ancho real de la
pantalla en lugar de amontonarse en una columna central.
Aditivo: gana por orden de aparición, no pisa reglas.
===================================================== */
:root {
--container: 1560px;
--gutter: clamp(20px, 4vw, 64px);
}
/* --- Nav: una sola línea, sin recortes --- */
.nav-inner { gap: clamp(16px, 3vw, 48px); }
.logo { flex: 0 0 auto; }
.logo-text strong, .logo-text em { white-space: nowrap; }
.nav-links { gap: 2px; }
.nav-links a { white-space: nowrap; padding-inline: clamp(12px, 1.1vw, 20px); }
.nav-cta { flex: 0 0 auto; }
@media (max-width: 1220px) {
.nav-links { display: none; }
.nav-cta .btn-ghost, .nav-cta .btn-primary { display: none; }
.nav-burger { display: inline-flex; }
}
/* --- Bloques de texto: acompañan el ancho nuevo --- */
.hero-content { max-width: 1120px; }
.hero-title { max-width: 17ch; }
.hero-lede { max-width: 58ch; }
.hero-trust { gap: clamp(20px, 3vw, 56px); }
.section-head { max-width: 900px; }
.section-head .lede { max-width: 68ch; }
.insight-copy .lede { max-width: 46ch; }
/* --- Más aire vertical entre secciones --- */
.services, .audiences, .stories, .age-spot { padding-block: clamp(96px, 10vw, 168px); }
.band { padding-block: 36px; }
.band-inner { gap: clamp(24px, 3vw, 56px); }
/* --- Grillas: aprovechan el ancho en pantallas grandes --- */
@media (min-width: 1360px) {
.audience-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.audience-grid--3 { grid-template-columns: repeat(3, 1fr); }
.audience { padding: 34px 30px; }
.audience h3 { font-size: clamp(1.15rem, 1.35vw, 1.4rem); }
.services-grid { gap: 20px; }
.kpi-grid { gap: 18px; }
.footer-grid { gap: clamp(32px, 4vw, 72px); }
}
@media (min-width: 1600px) {
.steps { gap: 4px; }
}
/* =====================================================
RUTA COMERCIAL · qué pasa, cuánto dura, cuánto cuesta
===================================================== */
.btn-hint { font-family: var(--font-mono); font-style: normal; font-size: 0.68rem; letter-spacing: 0.06em; opacity: 0.72; padding-left: 10px; margin-left: 2px; border-left: 1px solid rgba(255,255,255,0.28); }
@media (max-width: 520px) { .btn-hint { display: none; } }
.ruta { padding-block: clamp(96px, 10vw, 168px); position: relative; }
.ruta-steps { margin-top: clamp(40px, 5vw, 64px); }
.ruta-step { display: grid; grid-template-columns: 56px minmax(170px, 0.9fr) 2fr minmax(170px, 220px); gap: clamp(16px, 2.4vw, 40px); align-items: start; padding: clamp(22px, 2.4vw, 30px) 0; border-top: 1px solid var(--line); transition: background .3s; }
.ruta-step:last-child { border-bottom: 1px solid var(--line); }
.ruta-step:hover { background: linear-gradient(90deg, rgba(199,168,242,0.05), transparent 70%); }
.ruta-num { font-family: var(--font-mono); font-size: 0.82rem; color: var(--lilac); opacity: 0.75; padding-top: 5px; }
.ruta-main h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.55rem); letter-spacing: -0.02em; text-wrap: balance; }
.ruta-dur { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.ruta-step > p { color: var(--text-soft); font-size: 0.95rem; max-width: 62ch; }
.ruta-side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ruta-price { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-dim); white-space: nowrap; }
.ruta-price.is-free { color: var(--lilac); border-color: rgba(199,168,242,0.38); background: rgba(199,168,242,0.09); }
.ruta-price.is-paid { color: var(--magenta-bright); border-color: rgba(220,120,242,0.34); background: rgba(147,3,197,0.14); }
@media (max-width: 1000px) {
.ruta-step { grid-template-columns: 44px 1fr; gap: 8px 16px; }
.ruta-step > p, .ruta-side { grid-column: 2; }
.ruta-step > p { margin-top: 6px; }
.ruta-side { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 12px; }
}
/* --- Servicios: soluciones vs. productos --- */
.svc-group { display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lilac); margin-bottom: 18px; }
.svc-group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.svc-group + .services-grid { margin-bottom: 0; }
.services-grid + .svc-group { margin-top: clamp(48px, 5vw, 72px); }
.svc-sub { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.svc-sub h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; margin-bottom: 6px; }
.svc-sub p { font-size: 0.88rem; color: var(--text-soft); margin-bottom: 12px; }
.service--products { display: grid; grid-template-columns: 1fr minmax(200px, 260px); gap: clamp(24px, 3vw, 56px); align-items: center; background: radial-gradient(70% 120% at 100% 0%, rgba(147, 3, 197, 0.22), transparent 70%), linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); }
.service--products h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); }
.service--products > .svc-prod-copy > p { color: var(--text-soft); font-size: 0.95rem; }
.svc-prod-side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
@media (max-width: 1200px) { .svc-sub { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 900px) {
.service--products { grid-template-columns: 1fr; }
}
/* --- Seguridad y control --- */
.trustsec { padding-block: clamp(96px, 10vw, 168px); }
.trustsec .kpi-grid { grid-template-columns: repeat(4, 1fr); margin-top: clamp(36px, 4vw, 56px); }
@media (max-width: 1180px) { .trustsec .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .trustsec .kpi-grid { grid-template-columns: 1fr; } }
/* --- Nota metodológica bajo un lede --- */
.lede-note--inline { font-size: 0.86rem; line-height: 1.55; color: var(--text-dim); max-width: 62ch; margin: -14px 0 30px; padding-left: 18px; border-left: 1px solid var(--line-strong); }
/* --- CTA fijo en mobile --- */
.sticky-cta { display: none; }@media (max-width: 900px) {
.sticky-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 120; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 22px; border-radius: 999px; color: var(--paper); background: linear-gradient(96deg, var(--violet), var(--magenta)); box-shadow: 0 18px 40px -18px rgba(0,0,0,0.9); transition: transform .35s, opacity .35s; }
.sticky-cta strong { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.sticky-cta span { font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.85; white-space: nowrap; }
.sticky-cta.is-hidden { transform: translateY(150%); opacity: 0; pointer-events: none; }
.footer { padding-bottom: 90px; }
}
/* --- Jerarquía de CTA: una sola acción principal por bloque --- */
.hero-alt,.final-alt{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.05em;color:var(--text-dim);transition:color .3s}
.hero-alt svg,.final-alt svg{width:14px;height:14px}
.hero-alt:hover,.final-alt:hover{color:var(--lilac)}
.hero-cta{align-items:center;gap:clamp(16px,2.4vw,30px)}
.final-cta{align-items:center;gap:clamp(14px,2vw,26px)}
/* --- Trust band: tres verticales y el resto implícito --- */
.band-more{font-style:italic;color:var(--text-dim);opacity:.8}
@media (max-width:720px){.band-more{flex-basis:100%;font-size:.8rem}}
/* --- Automate: dos capacidades de una misma línea --- */
.svc-sub-note{margin-top:auto;padding-top:20px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--lilac)}
.svc-sub-note+.svc-sub{margin-top:0;padding-top:14px}
.svc-sub-ix{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-bottom:9px;border:1px solid rgba(199,168,242,.34);border-radius:5px;font-family:var(--font-mono);font-size:.64rem;color:var(--lilac)}
/* --- Prueba de capacidad: qué demuestra cada sistema --- */
.aud-proof{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.88rem;line-height:1.55;color:var(--text-soft);text-wrap:pretty}
.aud-proof b{font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--lilac);display:block;margin-bottom:5px}
.audience > .aud-detail{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:.72rem;line-height:1.55;letter-spacing:.02em;color:var(--text-dim);text-wrap:pretty}
/* --- Servicios por proyecto vs. productos por mes --- */
.svc-group--prod{color:var(--magenta-bright)}
.svc-group--prod::after{background:linear-gradient(90deg,rgba(220,120,242,.36),var(--line) 60%)}
/* =====================================================
COOKIES · dos categorías, sin terceros
===================================================== */
.ck{position:fixed;left:14px;right:14px;bottom:14px;z-index:200;max-width:1120px;max-height:80vh;overflow-y:auto;margin:0 auto;padding:clamp(22px,2.3vw,30px) clamp(24px,2.6vw,34px);border:1px solid rgba(199,168,242,.22);border-radius:20px;background:linear-gradient(135deg,rgba(24,11,48,.985),rgba(12,5,28,.985));backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 30px 70px -26px rgba(0,0,0,.92),0 0 0 1px rgba(255,255,255,.04) inset;transform:translateY(140%);opacity:0;transition:transform .46s cubic-bezier(.16,1,.3,1),opacity .4s}
.ck::before{content:"";position:absolute;inset:0;border-radius:20px;background:radial-gradient(60% 130% at 8% 0%,rgba(147,3,197,.16),transparent 62%);pointer-events:none}
.ck.is-in{transform:translateY(0);opacity:1}
.ck-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:clamp(22px,3.4vw,54px);align-items:center}
.ck-eyebrow{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.64rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--lilac);margin-bottom:11px}
.ck-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--magenta);box-shadow:0 0 9px var(--magenta)}
.ck-copy b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.14rem;letter-spacing:-.018em;margin-bottom:7px}
.ck-copy p{font-size:.9rem;line-height:1.6;color:var(--text-soft);max-width:70ch;text-wrap:pretty}
.ck-more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lilac);transition:color .25s}
.ck-more::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .3s}
.ck-more:hover{color:var(--magenta-bright)}
.ck-more[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-1px)}
.ck-detail{display:none}
.ck-detail:not([hidden]){display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:18px;border-top:1px solid var(--line);padding-top:18px}
.ck-detail>div{padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.028)}
.ck-detail span{font-family:var(--font-display);font-weight:600;font-size:.92rem}
.ck-detail em{font-style:normal;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--lilac);border:1px solid rgba(199,168,242,.26);border-radius:999px;padding:2px 7px;margin-left:9px;white-space:nowrap}
.ck-detail p{font-size:.83rem;line-height:1.55;color:var(--text-dim);margin-top:6px}
.ck-act{display:flex;flex-direction:column;align-items:stretch;gap:12px;min-width:216px}
.ck-act .btn{justify-content:center}
.ck-no{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--text-dim);padding:9px;border-radius:10px;transition:color .25s,background .25s}
.ck-no:hover{color:var(--text-soft);background:rgba(255,255,255,.04)}
.ck-link{display:block;text-align:center;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);transition:color .25s}
.ck-link:hover{color:var(--lilac)}
@media (max-width:860px){
.ck-in{grid-template-columns:1fr}
.ck-detail:not([hidden]){grid-template-columns:1fr}
.ck-act{min-width:0}
}
/* =====================================================
PRECIOS · las tarjetas se arman desde el CRM
===================================================== */
.precios{padding-block:clamp(96px,10vw,168px);position:relative}
.pk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(36px,4vw,56px)}
.pk{display:flex;flex-direction:column;padding:clamp(24px,2.4vw,32px);border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));transition:border-color .35s,transform .35s}
.pk:hover{border-color:rgba(199,168,242,.3);transform:translateY(-2px)}
.pk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.pk-head h3{font-family:var(--font-display);font-weight:600;font-size:1.22rem;letter-spacing:-.018em;text-wrap:balance}
.pk-badge{flex:0 0 auto;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--line-strong);color:var(--text-dim);white-space:nowrap}
.pk-tag{font-size:.9rem;line-height:1.5;color:var(--text-soft);margin-bottom:20px;text-wrap:pretty}
.pk-price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.pk-price b{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3vw,2.5rem);line-height:1;letter-spacing:-.035em}
.pk-price em{font-style:normal;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--text-dim)}
.pk-price s{font-family:var(--font-mono);font-size:.86rem;color:var(--text-dim);text-decoration-color:rgba(220,120,242,.6)}
.pk-inc{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.pk-inc li{position:relative;padding-left:20px;font-size:.89rem;line-height:1.5;color:var(--text-soft)}
.pk-inc li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:4px;border-left:1.5px solid var(--lilac);border-bottom:1.5px solid var(--lilac);transform:rotate(-45deg)}
.pk-ex,.pk-note{font-size:.8rem;line-height:1.55;color:var(--text-dim);margin-bottom:18px;text-wrap:pretty}
.pk-ex b{font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--lilac);display:block;margin-bottom:5px}
.pk-excl{padding-left:14px;border-left:1px solid var(--line-strong)}
.pk-cta{margin-top:auto;justify-content:center}
.pk-featured{border-color:rgba(220,120,242,.36);background:radial-gradient(80% 100% at 50% 0%,rgba(147,3,197,.2),transparent 68%),linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015))}
.pk-featured .pk-badge{color:var(--magenta-bright);border-color:rgba(220,120,242,.4);background:rgba(147,3,197,.14)}
.pk-free .pk-badge{color:var(--lilac);border-color:rgba(199,168,242,.4);background:rgba(199,168,242,.1)}
.pk-free .pk-price b{background:linear-gradient(120deg,var(--orchid-bright),var(--magenta-bright));-webkit-background-clip:text;background-clip:text;color:transparent}
.pk-monthly{border-style:dashed}
.pk-offer .pk-badge{color:var(--magenta-bright);border-color:rgba(220,120,242,.45);background:rgba(147,3,197,.16)}
.pk-foot{margin-top:clamp(28px,3vw,40px);font-family:var(--font-mono);font-size:.76rem;letter-spacing:.03em;color:var(--text-dim);text-wrap:pretty}
@media (max-width:1080px){.pk-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pk-grid{grid-template-columns:1fr}}
/* =====================================================
MAPA DE AUTOMATIZACIÓN · áreas + antes/después
===================================================== */
.mapa { padding-block: clamp(96px, 10vw, 168px); }
.mapa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(36px, 4vw, 56px); }
.mapa-card { padding: 30px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)); transition: border-color .35s, transform .35s; }
.mapa-card:hover { border-color: rgba(199,168,242,0.3); transform: translateY(-2px); }
.mapa-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; margin-bottom: 16px; display: flex; align-items: center; gap: 11px; }
.mapa-card h3::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--magenta); flex: 0 0 auto; }
.mapa-card ul { display: flex; flex-wrap: wrap; gap: 8px; }
.mapa-card li { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--text-dim); padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; transition: color .3s, border-color .3s; }
.mapa-card:hover li { color: var(--text-soft); border-color: var(--line-strong); }
.ad-title { margin-top: clamp(56px, 6vw, 88px); }
.ad-row { display: grid; grid-template-columns: minmax(160px, 1fr) 1.7fr 1.7fr; gap: clamp(16px, 2.4vw, 36px); align-items: start; padding: clamp(20px, 2.2vw, 28px) 0; border-top: 1px solid var(--line); }
.ad-row:last-child { border-bottom: 1px solid var(--line); }
.ad-rubro h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.ad-rubro span { display: block; margin-top: 6px; font-size: 0.86rem; color: var(--text-dim); }
.ad-flow { padding-left: clamp(14px, 1.6vw, 22px); border-left: 1px solid var(--line); }
.ad-tag { display: block; margin-bottom: 12px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.ad-after .ad-tag { color: var(--lilac); }
.ad-after { border-left-color: rgba(199,168,242,0.3); }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 11px; }
.chain li { display: flex; align-items: center; gap: 11px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim); }
.chain li:not(:last-child)::after { content: "→"; color: var(--line-strong); }
.ad-after .chain li { color: var(--text-soft); }
.ad-after .chain li:not(:last-child)::after { color: rgba(199,168,242,0.55); }
.ad-note { margin-top: 26px; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.03em; color: var(--text-dim); }
.svc-links { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
@media (max-width: 1080px) { .mapa-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) {
.ad-row { grid-template-columns: 1fr; gap: 18px; }
.ad-flow { padding-left: 16px; }
}
@media (max-width: 620px) { .mapa-grid { grid-template-columns: 1fr; } }
/* =====================================================================
MOBILE / iOS · endurecimiento del sitio público
---------------------------------------------------------------------
- 100vh en iOS Safari incluye el URL bar; se usa 100dvh (dynamic
viewport) con fallback.
- Inputs con font-size < 16px hacen zoom automático en iOS al focus.
- env(safe-area-inset-*) respeta el notch/dynamic island.
===================================================================== */
:root { --appHeight: 100vh; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
/* Sin lag de 300ms ni sombra azul al tapear */
a, button, [role="button"], summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* Aspecto uniforme de inputs (sin sombras internas ni redondeo raro iOS) */
input, select, textarea, button {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
font-family: inherit;
}
input[type=checkbox], input[type=radio] { -webkit-appearance: auto; appearance: auto; }
/* 16px mínimo en móvil para no dispara zoom auto de iOS al enfocar */
@media (max-width: 900px), (pointer: coarse) {
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=search], input[type=url], textarea, select {
font-size: 16px !important;
}
}
/* Alturas que respetan la barra dinámica del navegador móvil */
.hero, .final, [class*="min-vh"] {
min-height: 100vh; min-height: 100dvh;
}
/* Safe area: nav sticky + CTA sticky respetan el notch */
.site-header, .sticky-cta { padding-top: max(0px, env(safe-area-inset-top)); }
.sticky-cta { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
/* Objetivos táctiles: mínimo 44x44 en touch */
@media (pointer: coarse) {
.btn { min-height: 44px; }
nav a { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Imágenes responsivas (se agranda mucho en iPad Pro sin esto) */
img { max-width: 100%; height: auto; }
/* Tablas / bloques anchos scroll horizontal en mobile */
@media (max-width: 720px) {
.dx-table, .pk-grid { max-width: 100%; }
.doc-page { padding: 12px; }
}