/* ============================================================
1. RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ============================================================
2. CUSTOM PROPERTIES
============================================================ */
/* DARK SYSTEM. The site is black-based; the tokens below describe that
system directly — there is no light theme left to fall back to.
Surfaces are a four-step ELEVATION scale, and the steps are FLAT: blocks
are separated by a change of layer plus a hairline, never by a gradient.
That is not a stylistic preference, it is the lesson from the hero's old
radial spotlight: a ramp between two dark greys only spans ~12 distinct
levels, so the browser paints it as hard-edged arcs (the "recortes en
blanco" the client reported twice). Anything here that genuinely needs
depth gets .grain on top to dither the steps — see section 3.
Contrast measured (WCAG relative luminance), not eyeballed:
L0 L1 L2 L3
--text-primary 17.99 16.74 15.48 13.75
--text-secondary 8.14 7.57 7.01 6.22
--text-muted 6.53 6.08 5.62 4.99
--accent 5.97 5.55 5.14 4.56
Nothing drops below 4.99:1 for text. --text-muted was picked for the L3
column specifically: #8A8884 reads identically at a glance and fails
there (4.28:1). */
:root {
/* ---- surfaces: flat elevation layers, never blended into each other ---- */
--bg-base: #0A0A0A; /* L0 — page, hero, #automations, #clientes, footer */
--bg-alt: #141414; /* L1 — alternating sections: #proceso, #diagnostico-limite, #implementacion, #faq, #contact, #team */
--bg-surface: #1C1C1C; /* L2 — cards, panels, the terminal, the form */
--bg-raised: #262626; /* L3 — hover surfaces, inputs, chips */
/* Kept as the page-background alias so `body`/section rules read the
same as before; it is L0, not a separate colour. */
--bg-primary: var(--bg-base);
/* The crema that used to BE the page is now the ink on it — same hue,
so the brand's warmth survives the inversion. */
--text-primary: #F5F4F0;
--text-secondary: #A8A6A1;
--text-muted: #96948F;
--border: #262626; /* hairline on L0/L1 */
--border-strong: #333333; /* hairline on L2/L3, where #262626 vanishes */
/* ---- accent — MINT (2026-07-28) ----
The single hierarchy colour of the site: active states, underlines, the
primary CTA, focus rings. Never body copy, never two accents in one
section. (--accent used to be near-black and meant "maximum contrast",
which is meaningless on a black page; then coral #FF4B3E; now mint.)
ONE LEVEL, and that was a decision, not an omission. A two-step accent
was proposed — #8effd7 for fills, a darker #4DC79E for thin marks —
because the mint sits at 1.09:1 against --text-primary, i.e. the accent
and the body ink have essentially the SAME luminance, where the old
coral had 3.02:1. The worry was that a 2px underline or a 17px dot would
read as "another light mark" rather than "the brand lit up".
Rejected on evidence. WCAG contrast measures luminance only; it answers
"is this text legible on this background", not "can I tell these two
colours apart". The right metric there is CIEDE2000:
#8effd7 vs --text-primary ΔE 23.7 (chroma 42.4 vs 2.1)
#4DC79E vs --text-primary ΔE 28.4
--text-secondary vs --text-primary ΔE 19.0 <- for scale
ΔE 1.0 is the just-noticeable difference. The mint is FURTHER from the
body ink than --text-secondary is, and nobody struggles to tell those
two apart: the separation comes from chroma, not luminance. The second
level bought +20% on a distance that was already unmistakable.
And it made things worse where it was supposed to help — screenshotted
side by side, #4DC79E visibly dulls the 16px .auto-icon glyphs, the
thin accent marks (the .dl-line-on underline, .ip-point-dot;
at the time, #ps's active step dot) and the #clientes underline and
arrow. It recovers
separation from the INK at the cost of separation from the BACKGROUND,
and background is what surrounds a thin mark. Don't reintroduce it
without re-running that comparison.
--accent-ink is the text colour ON a solid accent fill: it must be DARK
(16.44:1). --accent-hover goes DOWN in luminance — #8effd7 is already at
78% lightness, so lightening it just walks toward white. */
--accent: #8effd7;
--accent-ink: #0A0A0A; /* 16.44:1 on --accent */
--accent-hover: #6FE6BE; /* 12.95:1 on L0, ΔE 5.7 from --accent */
--accent-dim: rgba(142, 255, 215, 0.14); /* chips / soft fills */
/* Fine fractal noise as an inline SVG data-URI — no network request, no
asset file. This is the dither used on every soft gradient in the
page; see the .grain note in section 3 for why it is mandatory. */
--grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
--ff-display: 'Space Grotesk', system-ui, sans-serif;
--ff-body: 'DM Sans', system-ui, sans-serif;
--radius: 16px;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--t: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============================================================
3. BASE
============================================================ */
html {
font-size: 16px;
scroll-behavior: auto;
overflow-x: clip;
}
body {
background-color: var(--bg-primary);
color: var(--text-primary);
font-family: var(--ff-body);
font-weight: 400;
line-height: 1.6;
overflow-x: clip;
-webkit-font-smoothing: antialiased;
}
::selection { background: rgba(142, 255, 215, 0.28); color: var(--text-primary); }
a { text-decoration: none; color: inherit; }
/* Tell the UA this is a dark document, so form controls, scrollbars and
the like render their dark variants instead of light chrome on black. */
:root { color-scheme: dark; }
/* ---- .grain — the ONLY sanctioned way to add depth to a dark surface ----
A dark-on-dark gradient spans so few distinct grey levels that the
browser paints it as visible bands (see the note in section 2). Overlay
this on top of such a gradient and the noise dithers the steps apart, so
the ramp reads smooth instead of striped. Inline feTurbulence data-URI:
no network request, no image asset, ~400 bytes.
Usage: a positioned ::after or a child with .grain, inside anything that
carries a soft gradient — currently .cl-hero-scrim, .faq-glow,
.ct-form-glow, .demo-glow and #contact's own background.
baseFrequency is high (0.8) so the grain is fine enough to read as film
texture rather than as visible dots, and opacity stays low: it only has
to break up ~1/255 steps, not be seen. */
.grain::after,
.grain-layer {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.05;
mix-blend-mode: screen;
background-image: var(--grain-url);
}
/* Where the dither is actually applied, and why each one is a separate rule
rather than a shared class: the noise CANNOT be a child of the element it
dithers. Every one of these halos carries filter: blur(...) on itself, and
that filter applies to descendants too — noise nested inside would simply
be blurred away. So each layer is a sibling ::after painted after the glow
and before the content.
Measured, not assumed. Scanning a rendered column and counting flat runs
between luminance steps, before adding these:
#contact background 20 levels / 495px, bands averaging 21px
.faq-glow 31 levels / 540px, bands averaging 12px
Both are the same signature as the hero's old radial spotlight, which the
client reported twice as "recortes en blanco". */
.faq-stage::after,
.ct-form-wrap::after,
.demo-copy::after,
.demo-cta-zone::after,
.dc-wrap::after,
#contact::before {
content: '';
position: absolute;
z-index: 0;
pointer-events: none;
/* `screen`, not `overlay`. Overlay's formula collapses toward zero as the
backdrop darkens (2ab for b<0.5), so on an L0/L1 surface it barely
moves the pixel and leaves the bands intact — measured: it took
#contact's average band run from 21px only to 10px. Screen is additive
on dark (1-(1-a)(1-b) ≈ b when a≈0), which is exactly the ±1 level of
variance a dither needs. */
opacity: 0.05;
mix-blend-mode: screen;
background-image: var(--grain-url);
/* Feather the edges. `screen` of a non-zero-mean noise uniformly lifts the
whole rectangle a hair, which on pure black reads as a hard-edged
lighter BOX around each glass card ("recuadro" the client flagged) — a
band, then black. A radial mask fades the grain to transparent before
its own edge, so it only dithers the glow's core (where banding is)
and blends into the black instead of drawing a rectangle. */
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 40%, transparent 78%);
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 40%, transparent 78%);
}
/* Each one spans its own glow's box, which overflows its parent by a
different amount. */
.faq-stage::after { inset: -90px; }
.ct-form-wrap::after { inset: -70px; }
.demo-copy::after { inset: -80px; }
.demo-cta-zone::after{ inset: 0; }
.dc-wrap::after { inset: -70px; }
#contact::before { inset: 0; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ============================================================
4. TYPOGRAPHY
============================================================ */
h1, h2, h3, h4 {
font-family: var(--ff-display);
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.03em;
color: var(--text-primary);
}
/* ============================================================
5. LAYOUT
============================================================ */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
/* ============================================================
6. SCROLL REVEAL INITIAL STATES
============================================================ */
/* Hidden-by-default only once script.js confirms GSAP/ScrollTrigger/Lenis
loaded and tags as .js-ready — if the CDN fails, these elements
stay at their natural visible state instead of being stuck at opacity:0. */
.js-ready .rv { opacity: 0; transform: translateY(30px); will-change: transform, opacity; }
.js-ready .rv-l { opacity: 0; transform: translateX(-30px); will-change: transform, opacity; }
.js-ready .rv-r { opacity: 0; transform: translateX(30px); will-change: transform, opacity; }
/* Title "ink" scroll reveal — words start as a pale ghost, script.js
scrubs them to full color+opacity as the title scrolls through view.
Same .js-ready gating as .rv above: without it, words sit at their
normal color/opacity (no wrap needed either, but the class stays
harmless if script.js never runs). */
.tr-word { display: inline-block; }
/* Ghost state of the ink reveal. Must stay in sync with the `from` values
in script.js -> TITLE INK REVEAL (see the note there on why those are
literal hex and not var()). Was #DBD9D3, a pale warm grey for the old
light system. */
.js-ready .tr-word-inner { display: inline-block; opacity: 0.35; color: #2E2E2E; }
/* ============================================================
7. NAVBAR
============================================================ */
/* Translucent rather than a solid layer: the nav crosses L0 and L1 sections
as you scroll, and any single flat colour would read as a seam against
one of them. Blurred + tinted, it sits over both. The hairline is what
actually separates it, not the fill. */
#nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
background-color: rgba(10, 10, 10, 0.72);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid var(--border);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
#nav { background-color: #0D0D0D; }
}
.nav-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
height: 64px;
}
.nav-logo {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--ff-display);
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
white-space: nowrap;
}
/* No invert(1), and no recolouring of any kind. The mark is now
gummalogo-tiffa.png (836x200): "gu" and "a" in white, "mm" in the
brand mint — the same two-tone artwork the client supplied. It replaced
the old flat light-grey wordmark, which was a single #BABABA. Any
filter here (invert, brightness) would break the two-tone. */
.nav-logo img {
height: 32px;
width: auto;
display: block;
}
/* Logo puzzle entry — 5 spans, each a pixel-exact crop of
assets/img/gummalogo-tiffa.png. Letter column bounds measured from the
source PNG by scanning for alpha gaps: g[0,142] u[153,265] m[282,473]
m[483,680] a[694,835]. Each tile runs to the NEXT letter's start so it
carries its own trailing gap and the five tiles rebuild the image
exactly when placed edge-to-edge. 836x200 @ 32px display = 0.16 scale,
so the full mark is 133.76px wide. */
.logo-puzzle {
display: flex;
height: 32px;
}
.logo-letter {
display: block;
height: 32px;
background-image: url('assets/img/gummalogo-tiffa.png');
background-repeat: no-repeat;
background-size: 133.76px 32px;
overflow: hidden;
animation-duration: 0.6s;
animation-timing-function: cubic-bezier(.2, .8, .2, 1);
animation-fill-mode: both;
}
.logo-letter:nth-child(1) { width: 24.48px; background-position: 0 0; animation-name: logo-drop; animation-delay: 0.1s; }
.logo-letter:nth-child(2) { width: 20.64px; background-position: -24.48px 0; animation-name: logo-rise; animation-delay: 0.22s; }
.logo-letter:nth-child(3) { width: 32.16px; background-position: -45.12px 0; animation-name: logo-drop; animation-delay: 0.34s; }
.logo-letter:nth-child(4) { width: 33.76px; background-position: -77.28px 0; animation-name: logo-rise; animation-delay: 0.46s; }
.logo-letter:nth-child(5) { width: 22.72px; background-position: -111.04px 0; animation-name: logo-drop; animation-delay: 0.58s; }
@keyframes logo-drop {
from { transform: translateY(-140%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes logo-rise {
from { transform: translateY(140%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.logo-letter { animation: none; opacity: 1; transform: none; }
}
.nav-links {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
}
.nav-links a {
font-family: var(--ff-body);
font-size: 14px;
font-weight: 400;
color: var(--text-secondary);
transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--text-primary); }
/* The one accent-filled control in the nav. Dark ink on the coral, not
white: white on this hue measures 3.32:1 and fails. */
.nav-btn {
display: inline-flex;
align-items: center;
padding: 10px 24px;
background: var(--accent);
color: var(--accent-ink);
border-radius: 100px;
font-family: var(--ff-body);
font-size: 14px;
font-weight: 500;
transition: opacity 0.2s, transform 0.2s;
white-space: nowrap;
}
/* Explicit darker fill instead of the old `opacity: 0.8x`. Fading the
button faded its --accent-ink LABEL with it, dropping the label's own
contrast for no reason; --accent-hover changes only the surface. It
goes DOWN in luminance because --accent is already at 78% lightness —
lightening a mint that pale just walks it toward white. */
.nav-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
.nav-burger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.nav-burger span {
display: block;
width: 22px;
height: 2px;
background: var(--text-primary);
border-radius: 2px;
transition: var(--t);
}
.mob-menu {
display: none;
position: fixed;
inset: 0;
background: var(--bg-base);
z-index: 998;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 28px;
}
.mob-menu.open { display: flex; }
.mob-menu a {
font-family: var(--ff-display);
font-size: clamp(28px, 6vw, 48px);
font-weight: 700;
letter-spacing: -0.03em;
color: var(--text-secondary);
transition: color 0.2s;
}
.mob-menu a:hover { color: var(--text-primary); }
.mob-close {
position: absolute;
top: 24px; right: 28px;
background: none;
border: none;
color: var(--text-secondary);
font-size: 26px;
cursor: pointer;
}
.mob-close:hover { color: var(--text-primary); }
/* ============================================================
8. HERO
============================================================ */
/* Scroll runway + pin for the WebGL laptop frame animation (script.js,
"HERO — LAPTOP FRAME ANIMATION"). Purely additive: #hero itself is
unchanged and, once pinned inside the 100vh sticky wrapper, looks
exactly as it did before. .hero-scroll-off collapses both back to
normal document flow — added by script.js whenever the animation
won't run (prefers-reduced-motion, <768px, or Three.js/frames failing
to load), so nobody ever scrolls 300vh of nothing. */
/* The runway itself is painted black (2026-07-26, "recortes en blanco al
scrollear"). The page's base background is the crema --bg-primary, i.e.
almost white, and while a sticky box scrolls the browser rasterizes its
new tiles asynchronously — any tile that hasn't landed yet shows the
base background through. On the old crema hero that was invisible;
against #0A0A0A it reads as white patches flashing around the laptop.
Backing the whole 300vh runway in the hero's own black means a
not-yet-painted tile is black on black. */
/* The background here is no longer the white-flash patch it was created
as — the page base is black now, so a late-rasterized sticky tile shows
black regardless. It stays because it is still the correct paint source
for the sticky box, costs nothing, and removing it would make this
depend on body's paint order for no gain. */
.hero-scroll { height: 300vh; background-color: var(--bg-base); }
.hero-sticky {
position: sticky;
top: 0;
height: 100vh;
/* Hard guarantee that a pinned hero can never paint outside its 100vh
box and bleed over the section below it (today #automations; it was
#ps, then #proceso, when the bug was reported by the client). The
rules in the min-width:768px block below are what actually make the
hero FIT in that box, so nothing is clipped; this is just the safety
net. */
overflow: hidden;
}
.hero-scroll.hero-scroll-off { height: auto; }
.hero-scroll.hero-scroll-off .hero-sticky {
position: static;
height: auto;
}
/* Dark hero (2026-07-23, explicit request). This is the ONE dark section
above the fold — the site's palette is otherwise crema/near-black, and
nothing here leaks out: every rule in this block is scoped to #hero, and
the shared `.btn-primary`/`.btn-outline`/`.h-*` classes are overridden
only via `#hero ...` descendants, so the same classes in #nav, #contact
and the footer are untouched.
FLAT #0A0A0A, no gradient (2026-07-26). It used to carry a radial
spotlight centred on the laptop (#1a1a1a → #141414 → #0A0A0A). The idea
was fine, the maths isn't: that whole ramp is only ~12 distinct grey
levels spread over ~1000px, so the browser paints it as ~48px hard-edged
bands (measured on a render: levels 10..22, one step every ~48px). On a
decent dark screen those arcs read as light patches around the laptop —
the "recortes en blanco / fondo gris" the client kept seeing, and the
reason they thought a crema layer was still showing through. There is no
cheap fix: any dark-on-dark gradient this shallow bands unless it's
dithered with a noise overlay, which is a lot of machinery for a glow
nobody asked for. If a spotlight ever comes back, it needs either a much
wider luminance range or a noise/grain layer on top to break the steps.
History: the gradient replaced a subtle grey diffusion over crema, which
had itself replaced the fondomanos photo and, before that, the hands
video's poster frame. */
#hero {
background-color: var(--bg-base);
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 140px 0 120px;
position: relative;
overflow: clip;
}
/* The `#hero ... { }` override block that used to live here is GONE.
It existed because #hero was the one dark section on a light site, so
every colour inside it had to be re-stated as a literal. Now that the
tokens describe the dark system themselves, each of those seven rules
was restating exactly what it already inherits — keeping them would
have meant two sources of truth for the same colours. The base rules
further down (.hero-h, .h-outline, .h-line-sub, .h-caret, .hero-sub,
.btn-primary, .btn-outline) carry it now. */
/* ---- Pinned hero: make it fit the viewport exactly ----
The hero's natural height is its content + 260px of padding, which at
1440x900 came to 993px — 93px TALLER than the 100vh sticky box, so the
overflow spilled over the next section. Scoped to the pinned case only (>=768px and
not .hero-scroll-off), so the mobile and reduced-motion heroes keep
their normal, untouched flow layout. The vh term in the title clamp is
what makes this hold up on short-but-wide viewports (e.g. 1920x800),
where the poster type would otherwise still overflow; on a typical
1440x900 it resolves to ~171px, i.e. what it already was. */
@media (min-width: 768px) {
.hero-scroll:not(.hero-scroll-off) #hero {
height: 100%;
min-height: 0;
padding: clamp(84px, 11vh, 140px) 0 clamp(32px, 7vh, 120px);
}
/* Promote the pinned hero to its own compositor layer (2026-07-26).
Its background is a full-viewport radial gradient, and a sticky box
moves relative to its scroller on every scroll frame — without this,
that gradient plus the poster type is re-rasterized as the visitor
scrolls, which is both the async-paint source of the white flashes
above and real main-thread cost while the laptop is animating. Painted
once, then only moved by the compositor; the canvas inside keeps its
own layer and updates independently. Scoped to the pinned case, so
mobile / .hero-scroll-off don't pay for the extra layer. */
.hero-scroll:not(.hero-scroll-off) .hero-sticky {
will-change: transform;
}
/* .hero-frozen is the reduced-motion case: runway collapsed, but the
laptop canvas is still on screen frozen on frame 1, so the headline
needs the same smaller clamp or it runs into it (script.js adds the
class; see the comment there). */
.hero-scroll:not(.hero-scroll-off) .hero-h,
.hero-scroll.hero-frozen .hero-h {
/* Shrunk (2026-07-19) to give the laptop animation (script.js,
LAPTOP_W_FRAC) more room/protagonism — smaller headline, bigger
laptop, per explicit ask. Then stepped down once more (÷1.2, same
factor as the base .hero-h) to keep the whole title scale one notch
smaller everywhere. */
font-size: clamp(37px, min(6.7vw, 10.8vh), 108px);
}
}
/* WebGL layer: the dark/LED backdrop plus the laptop canvas. Sits behind
the hero copy (.hero-body is position:relative; z-index:1) and above
#hero's own crema background and retro grid — both show through, since
the renderer is alpha:true and the frames are real transparent cutouts.
Never intercepts clicks. */
.hero-webgl {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
/* Switched off as a unit when there's nothing to show at all (narrow
screen, Three.js missing, frames failed). NOT tied to .hero-scroll-off:
under prefers-reduced-motion the runway collapses but this stays, with
the canvas frozen on a single frame. */
.hero-webgl.hero-webgl-off { display: none; }
.hero-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.hero-body {
position: relative;
z-index: 1;
/* Centered (2026-08-11): the laptop animation is disabled for now (see
script.js's DISABLED flag), so there's nothing anchored to the right
edge to leave room for. Left-align returns automatically whenever the
laptop is active again, via the .hero-scroll:not(.hero-scroll-off)
override below — same reversible scoping the rest of this hero's
laptop-aware CSS already uses. */
text-align: center;
width: 100%;
}
.hero-scroll:not(.hero-scroll-off) .hero-body { text-align: left; }
/* Poster-style title: 'Anton' (condensed, single-weight ultra-bold display
face built for exactly this look — tight-set headline type) replaces
the site's usual Space Grotesk for the h1 only, per an explicit request
for an impactful street-poster feel. Loaded alongside the existing
Google Fonts in index.html's . Scoped to .hero-h — no
other heading on the site uses it. */
.hero-h {
font-family: 'Anton', var(--ff-display), sans-serif;
/* One step down the type scale (÷1.2, minor-third) from the original
clamp(60px,12vw,180px) — all three values scaled by the same factor
so the responsive ratio is unchanged, per an explicit "un escalón más
pequeño" ask. The pinned-variant and ≤480px overrides below were
stepped down by the same 1.2 factor to stay consistent. */
font-size: clamp(50px, 10vw, 150px);
font-weight: 400;
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--text-primary);
margin-bottom: 32px;
padding-top: 0.18em;
overflow-wrap: break-word;
text-transform: uppercase;
}
.h-line {
display: block;
/* was overflow: hidden — clipped the outline stroke's own overshoot
above the glyph tops on 'AUTOMATIZA' (h-outline below), especially
at the tight line-height this poster title used before. Visible
costs the hard-edged mask on the word-reveal GSAP timeline (script.js
'.h-word' from y:108%) — words now fade+rise instead of wiping in
behind a mask — but nothing about the stroke gets cut off. */
overflow: visible;
padding-bottom: 0.05em;
}
.h-word {
display: inline-block;
will-change: transform;
padding-right: 0.06em;
}
.h-word:last-child { padding-right: 0; }
/* Line 1 'AUTOMATIZA' — outline-only per the client spec: transparent
fill + a solid stroke so the page's own bg-primary shows through the
letterforms (color: white would be used instead on a dark backdrop —
this hero is light, so transparent is correct here). */
/* The stroke follows the TEXT colour, not --accent. It used to say
var(--accent) back when that token was near-black, i.e. the text colour;
now that --accent is coral, pointing at it would paint a 150px coral
outline across the fold — the opposite of a dosified accent. */
.h-outline {
color: transparent;
-webkit-text-stroke: 2px var(--text-primary);
}
/* Line 3, the original subtitle ('Tú solo tienes que crecer') — kept
discreet on purpose, so it drops back to the site's normal display
font/casing instead of inheriting Anton's shouting all-caps poster
treatment from .hero-h. */
.h-line-sub {
font-family: var(--ff-display);
font-size: 0.28em;
font-weight: 700;
letter-spacing: -0.01em;
text-transform: none;
/* Explicit token at full opacity rather than 0.55 off the headline fill:
fading white into black gives a flat, muddy grey, whereas the warm
--text-secondary keeps the hue and measures 8.14:1. */
color: var(--text-secondary);
opacity: 1;
/* Pushed down (was 0.3em) to separate this line from 'TU NEGOCIO' and
drop it clear of the busy robotic-hand area of the video, where its
low-contrast grey text was hard to read against the moving footage. */
margin-top: 0.9em;
}
/* Typewriter title reveal (script.js "HERO TITLE — typewriter"): each word
is split into per-character .h-char spans, hidden until typed in one at
a time behind a moving caret. Gated by .js-ready so a motion-lib CDN
failure leaves the whole title visible and static (no typing, no hidden
characters). Chars use display (not opacity) so the line's width grows
as it types, selling the "being written" feel. */
.js-ready .hero-h .h-char { display: none; }
.js-ready .hero-h .h-char.is-typed { display: inline; }
.h-caret {
display: inline-block;
width: 0.07em;
height: 0.74em;
margin-left: 0.02em;
vertical-align: -0.04em;
background: var(--accent);
animation: h-caret-blink 0.75s steps(1) infinite;
}
.h-caret.h-caret-done {
animation: none;
opacity: 0;
transition: opacity 0.4s ease;
}
@keyframes h-caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .h-caret { display: none; } }
.hero-sub {
font-family: var(--ff-body);
font-size: 18px;
font-weight: 400;
color: var(--text-secondary);
max-width: 520px;
/* auto side margins center the block itself -- text-align on .hero-body
only centers inline content, a block-level
with its own max-width
still needs this to actually move. Reverts to left with the rest of
the hero body when the laptop is active (see .hero-body above). */
margin: 0 auto 48px;
line-height: 1.72;
}
.hero-scroll:not(.hero-scroll-off) .hero-sub { margin: 0 0 48px; }
.js-ready .hero-sub { opacity: 0; }
.hero-ctas {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.hero-scroll:not(.hero-scroll-off) .hero-ctas { justify-content: flex-start; }
.js-ready .hero-ctas { opacity: 0; }
/* ============================================================
9. BUTTONS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 30px;
border-radius: 100px;
font-family: var(--ff-body);
font-size: 15px;
font-weight: 500;
transition: all 0.25s var(--ease);
white-space: nowrap;
}
/* Primary = the accent fill, with DARK ink on it (--accent-ink). This is
forced by measurement, not taste: white on any coral in this family tops
out at 3.32:1, while #0A0A0A on --accent gives 5.97:1.
These base rules now describe the dark system directly, which is why the
whole `#hero .btn-*` override block that used to invert them is gone. */
.btn-primary {
background: var(--accent);
color: var(--accent-ink);
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn-outline {
background: transparent;
color: var(--text-primary);
border: 1px solid rgba(245, 244, 240, 0.28);
}
.btn-outline:hover { border-color: var(--text-primary); transform: translateY(-2px); }
/* ============================================================
11. EL MODELO — #proceso, #diagnostico, #diagnostico-limite,
#entregable, #implementacion
============================================================ */
/* Estas cinco bandas vivieron en index.html (entre el hero y
#automations, sustituyendo a #ps) hasta que se movieron en bloque a
su propia página, diagnostico.html — el cliente pidió que el
diagnóstico no "estuviera en medio" del scroll de la home. Las
reglas de abajo no cambiaron: son selectores por id genéricos
(background-color/padding sobre los tokens de capa), así que
renderizan igual sea cual sea el HTML que las use.
En index.html el hero (L0) queda ahora pegado directamente a
#automations (L0) — sin banda intermedia, ambos son el mismo negro
plano, así que no hace falta hairline: el runway pineado del hero ya
hace de transición. La restricción de paridad de capas que exigía un
número IMPAR de bandas intermedias ya no aplica ahí, porque ya no
hay bandas intermedias.
Dentro de diagnostico.html, en cambio, SÍ hay alternancia propia y
cierra sola sin ayuda de ningún hero:
#proceso L1 -> #diagnostico L0 -> #diagnostico-limite L1 ->
#entregable L0 -> #implementacion L1 -> footer L0
ELEVACIÓN. Todas las tarjetas son L2 + hairline + un realce interior
de 1px arriba. Ni una box-shadow oscura (sobre negro no dibuja nada)
ni un degradado entre grises (bandea, es el bug de los "recortes en
blanco"). Ninguna de estas bandas lleva halo, así que ninguna
necesita el dither .grain. */
/* ---- 11.0 Fondo de red de nodos (SOLO #proceso, diagnostico.html) ----
Puntos que derivan despacio y se conectan con líneas finas al
acercarse, monocromo con nodos menta sueltos como acento (script.js
"DIAGNOSTICO — NODE NETWORK"). Rima con el tema de la página: mapear
procesos. NO es un gradiente — son puntos y líneas discretas —, así
que no bandea y no necesita el dither .grain.
ESTUVO EN LAS CINCO BANDAS y se replegó al hero de la página. Detrás
de todo el scroll dejaba de ser un gesto y pasaba a ser ruido de fondo
permanente; además obligaba a que las cinco secciones renunciaran a su
fill sólido y usaran un tinte translúcido para dejarlo asomar, lo que
aplanaba el ritmo de capas L0/L1 que da estructura a la página. Ahora
el canvas es ABSOLUTO dentro de #proceso (no fixed al viewport) y las
cinco bandas recuperan sus tokens de capa opacos. El canvas se suelta
en <768px y, bajo reduce-motion, queda como un frame estático (ver la
guarda en script.js). */
.dg-net {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
display: block;
}
/* El contenido de #proceso se eleva sobre su propio canvas. Las otras
cuatro bandas ya no necesitan z-index: no hay nada detrás de ellas. */
#proceso > .wrap { position: relative; z-index: 1; }
/* ---- 11.1 #proceso — dos ofertas, un orden ---- */
#proceso {
position: relative; /* ancla del canvas de la red */
overflow: hidden; /* el canvas no se sale de la banda */
background-color: var(--bg-alt); /* L1 */
padding: 120px 0;
}
.pr-head-text {
font-family: var(--ff-body);
font-size: 17px;
line-height: 1.7;
color: var(--text-secondary);
margin: 18px 0 0;
max-width: 60ch;
}
/* El orden ES el mensaje, así que la flecha es un elemento real y no un
::after decorativo: a <=900px rota 90 grados y sigue leyéndose, en vez
de desaparecer con el layout de dos columnas. Mismo patrón que
.cl-flow en #clientes. */
.pr-flow {
margin-top: 56px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
gap: 28px;
}
.pr-card {
background: var(--bg-surface); /* L2 */
border: 1px solid var(--border-strong);
border-radius: 20px;
padding: 36px 32px;
box-shadow: inset 0 1px 0 rgba(245, 244, 240, 0.06);
}
.pr-name {
font-family: var(--ff-display);
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 700;
color: var(--text-primary);
margin: 0 0 14px;
}
.pr-text {
font-family: var(--ff-body);
font-size: 15px;
line-height: 1.7;
color: var(--text-secondary);
margin: 0;
}
.pr-arrow {
align-self: center;
display: flex;
color: var(--accent);
}
.pr-arrow svg { width: 40px; height: 24px; }
/* Marca de acento como regla, no como color de texto. */
.pr-rule {
margin: 44px 0 0;
text-align: center;
font-family: var(--ff-display);
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 700;
color: var(--text-primary);
}
.pr-rule::before {
content: '';
display: block;
width: 40px;
height: 2px;
margin: 0 auto 18px;
background: var(--accent);
}
/* ---- 11.2 #diagnostico — las 4 áreas + las 4 fases ---- */
/* La sección principal de la página, y el reparto de peso lo dice: las
4 áreas son un apunte previo (texto sobre fondo, hairlines) y las 4
fases se llevan un runway pineado entero. Antes las dos cosas eran
tarjetas L2 idénticas y todo pesaba lo mismo.
Historia, por si alguien busca clases que ya no existen: la v1 eran
cuatro tarjetas apiladas con un .dg-num gris gigante; la v2 las
convirtió en línea de tiempo (.dg-fase + .dg-fase-node + raíl
.dg-fases::before + pastilla .dg-callout). Las dos siguen siendo el
mismo módulo repetido cuatro veces. La v3 es .dgf-* (más abajo) y
borró todas esas clases — viven en el historial de git. */
#diagnostico {
background-color: var(--bg-base); /* L0 */
padding: 120px 0;
}
.dg-head { max-width: 720px; margin-bottom: 48px; }
.dg-head-text {
font-family: var(--ff-body);
font-size: 17px;
line-height: 1.7;
color: var(--text-secondary);
margin: 18px 0 0;
}
/* ---- 4 áreas ---- */
.dg-areas-label {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--ff-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-secondary);
margin: 0 0 18px;
}
.dg-areas-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
/* Las 4 áreas: TEXTO SOBRE FONDO, no tarjetas. Antes eran cuatro cajas
L2 con el icono en su propio chip L3, exactamente el mismo tratamiento
que las fases — y las fases son el contenido principal de la página,
así que competían de tú a tú con ellas. Ahora se separan con un
hairline superior y el icono queda como glifo suelto: se siguen
leyendo de un vistazo, pero pesan lo que tienen que pesar. */
.dg-areas {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px 32px;
margin-bottom: 24px;
}
.dg-area {
display: flex;
align-items: flex-start;
gap: 12px;
border-top: 1px solid var(--border);
padding: 18px 0 0;
}
.dg-area-icon {
flex: 0 0 auto;
color: var(--accent);
font-size: 18px;
line-height: 1.35;
}
.dg-area-name {
font-family: var(--ff-display);
font-weight: 700;
font-size: 15px;
color: var(--text-primary);
margin: 0 0 4px;
}
.dg-area-desc {
font-family: var(--ff-body);
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
margin: 0;
}
/* ---- 4 fases: narrativa con scroll (.dgf-*) ----
SUSTITUYE a la línea de tiempo de tarjetas (las clases .dg-fase… y
.dg-callout, ya borradas — ojo al escribir comentarios aquí: un
".dg-fase*" seguido de "/" cierra el comentario y se come las reglas
de debajo). Aquello era el mismo módulo repetido cuatro veces — círculo
con icono, kicker, título, párrafo y pastilla mint — y un recurso
usado cuatro veces deja de ser una firma y pasa a ser un formulario.
Además las cuatro pastillas mint se anulaban entre sí: cuatro frases
lapidarias con idéntico tratamiento no destacan ninguna.
Ahora: runway pineado (mismo mecanismo que el difunto #ps de
index.html, clases propias) con el raíl de fases a la izquierda y el
esquema de la fase activa a la derecha. Una sola frase por fase, un
solo destacado mint en toda la sección (fase 03).
LA BASE DE ESTAS REGLAS ES EL LAYOUT COLAPSADO — lista vertical con
los cuatro esquemas visibles. Es .dgf-on, que añade script.js solo en
desktop y sin prefers-reduced-motion, quien activa runway, sticky y
dos columnas. Al revés que el viejo .ps-scroll-off, y a propósito: sin
JS queda una lista legible en vez de cuatro esquemas superpuestos. */
.dgf-label {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--ff-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-secondary);
margin: 0 0 32px;
}
.dgf-label-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.dgf-steps {
list-style: none;
display: flex;
flex-direction: column;
gap: 40px;
}
.dgf-step {
display: grid;
grid-template-columns: auto 1fr;
gap: 18px;
align-items: baseline;
}
.dgf-step + .dgf-step { border-top: 1px solid var(--border); padding-top: 40px; }
/* El número sustituye al círculo-con-icono: Anton, el mismo display de
cartel del hero de index.html, cargado aquí solo para esto. */
.dgf-num {
font-family: 'Anton', var(--ff-display);
font-weight: 400;
font-size: clamp(32px, 3.4vw, 52px);
line-height: 0.9;
color: var(--text-muted);
transition: color 0.4s var(--ease);
}
.dgf-body { min-width: 0; }
.dgf-title {
font-family: var(--ff-display);
font-size: clamp(19px, 2vw, 23px);
font-weight: 700;
line-height: 1.3;
color: var(--text-primary);
margin: 0;
transition: color 0.4s var(--ease);
}
.dgf-vis { margin: 22px 0 0; max-width: 560px; }
.dgf-cap {
font-family: var(--ff-body);
font-size: 15px;
line-height: 1.7;
color: var(--text-secondary);
margin-top: 22px;
max-width: 48ch;
}
/* EL ÚNICO destacado mint de la sección. Las frases lapidarias de las
fases 01, 02 y 04 se integraron en su propia frase; esta se queda
sola y gana peso precisamente por eso. Mint como FONDO tenue, texto en
tinta normal: mint nunca es color de cuerpo. */
.dgf-flag {
display: flex;
width: max-content;
max-width: 100%;
margin-top: 16px;
background: var(--accent-dim);
border: 1px solid rgba(142, 255, 215, 0.35);
border-radius: 10px;
padding: 10px 16px;
font-family: var(--ff-display);
font-weight: 700;
font-size: 14.5px;
line-height: 1.4;
color: var(--text-primary);
}
/* ---- Los esquemas ----
Dibujos honestos, no maquetas: ni una cifra, ni un nombre, ni una
línea de texto falso. Las "etiquetas" de dentro de cada caja son dos
barritas que dicen "aquí hay un texto" sin inventarse cuál. El color
base del trazo viaja por currentColor desde el