/* ============================================
PIENSAENWEB — variables & reset
============================================ */
:root{
--ink: #1a1410;
--paper: #fdf6ec;
--pink: #f9dbdd;
--pink-deep: #f3b9bf;
--red: #e5304d;
--red-deep: #c41f38;
--yellow: #f3c11f;
--yellow-deep: #e0a800;
--orange: #ef7a22;
--orange-deep: #d85f0f;
--cream: #faeecb;
--cream-deep: #f0dca0;
--bg: var(--paper);
--bg-2: var(--pink);
--fg: var(--ink);
--accent: var(--red);
--border: rgba(0,0,0,.1);
--border-strong: rgba(0,0,0,.25);
--ff: 'Poppins', system-ui, sans-serif;
--ff-display: 'Poppins', system-ui, sans-serif;
--container: 1240px;
--text-col: 620px; /* fixed text column width; the floating object lives in the column on the other side */
--col-gap: clamp(40px, 6vw, 100px); /* breathing room between the text column and the image column */
--edge-extra: clamp(32px, 9vw, 180px); /* extra inset for the text column when it sits flush on the outer edge */
--pad: clamp(40px, 9vw, 160px); /* outer inset for section content — noticeably wider than --pad-nav, so sections read as a clearly narrower column than the header */
--pad-nav: clamp(20px, 3.5vw, 56px); /* outer inset for the header bar and the settings FAB, kept narrower so the header spans a bit wider than the section content */
--pad-img-edge: clamp(20px, 3.5vw, 56px); /* outer inset for the OUTER edge of a floating image's column — smaller than --pad so images can sit closer to the viewport edge than the text ever does */
--ease-out: cubic-bezier(.16,1,.3,1);
--ease-in-out: cubic-bezier(.65,0,.35,1);
}
/* ============================================
Optional heading typefaces, toggled from the settings panel. Only the
weights actually used by h1/h2 are loaded (700/800). Paths are
root-relative (/assets/...) since url() in a stylesheet resolves
against the STYLESHEET's own URL (/css/style.css), not the page's —
a plain "assets/fonts/…" would resolve to the wrong /css/assets/…
and 404 (as Nyght Serif silently did until this fix).
============================================ */
@font-face{
font-family:'Nyght Serif';
src:url('/assets/fonts/Nyght/700-NyghtSerif-Bold.woff2') format('woff2'),
url('/assets/fonts/Nyght/700-NyghtSerif-Bold.woff') format('woff');
font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Nyght Serif';
src:url('/assets/fonts/Nyght/800-NyghtSerif-Dark.woff2') format('woff2'),
url('/assets/fonts/Nyght/800-NyghtSerif-Dark.woff') format('woff');
font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
font-family:'BwModelica';
src:url('/assets/fonts/BwModelica/400-BwModelica-Regular.woff2') format('woff2'),
url('/assets/fonts/BwModelica/400-BwModelica-Regular.woff') format('woff');
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:'BwModelica';
src:url('/assets/fonts/BwModelica/700-BwModelica-Bold.woff2') format('woff2'),
url('/assets/fonts/BwModelica/700-BwModelica-Bold.woff') format('woff');
font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
font-family:'BwModelica';
src:url('/assets/fonts/BwModelica/800-BwModelica-ExtraBold.woff2') format('woff2'),
url('/assets/fonts/BwModelica/800-BwModelica-ExtraBold.woff') format('woff');
font-weight:800; font-style:normal; font-display:swap;
}
body[data-font="nyght"]{ --ff-display:'Nyght Serif', Georgia, serif; }
body[data-font="poppins"]{ --ff-display:'Poppins', system-ui, sans-serif; }
/* Modelica replaces BOTH the body copy and the heading typeface — the
only one of the four options that goes all-in rather than just
swapping titles. Its 'salt' stylistic-alternate glyphs apply to ALL
text sitewide (inherited from body). The capital A has no alternate
to begin with — its 'salt' substitution was removed directly from
the font files (assets/fonts/BwModelica/*), so it always renders in
its default form regardless of this feature setting; no CSS/JS
workaround needed for it. Headings keep whatever weight each
element already specifies (same as with Poppins/Nyght — no forced
override here), just a touch tighter in tracking. */
body[data-font="modelica"]{
--ff:'BwModelica', system-ui, sans-serif;
--ff-display:'BwModelica', system-ui, sans-serif;
font-feature-settings:'salt' on;
}
body[data-font="modelica"] h1,
body[data-font="modelica"] h2,
body[data-font="modelica"] h3{
letter-spacing:-.03em;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
margin:0;
font-family:var(--ff);
background:var(--bg);
color:var(--fg);
overflow-x:hidden;
transition:background-color .8s var(--ease-in-out), color .8s var(--ease-in-out);
cursor:none;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }
h1,h2,h3,p{ margin:0; }
h1,h2,h3{ text-wrap:balance; font-family:var(--ff-display); }
::selection{ background:var(--accent); color:#fff; }
body.no-cursor-fx *{ cursor:auto; }
/* Safety net while a floating image is being dragged: stops the drag
gesture from accidentally selecting the section's text underneath. */
body.is-dragging-floater{ -webkit-user-select:none; user-select:none; }
/* ============================================
Background dot grid — a confetti of small dots that only becomes
visible in a soft spotlight following the cursor (via mask-image),
like they're lighting up as you move over them. Sits behind every
section (z-index:1, below .section's 5 and the floaters' 6). Opacity
starts at 0 and is driven by main.js: it fades in on mousemove and
fades back out shortly after the cursor goes idle, so the dots never
sit lit wherever the cursor was last seen. The dots themselves are a
canvas texture generated once by main.js (buildDotTextures) — a
plain CSS radial-gradient can only repeat the same handful of
colours in a small, obviously tiling block, whereas a big canvas
tile with one random colour (or opacity) per dot reads as genuinely
scattered confetti. Two textures are swapped depending on the active
section theme: rainbow over the neutral grey sections, plain white
at varying opacities over the saturated colour sections. */
.bg-tiles{
position:fixed; inset:0; z-index:1; pointer-events:none;
--mx:50vw; --my:50vh;
opacity:0;
transition:opacity .6s var(--ease-out);
background-repeat:repeat;
-webkit-mask-image:radial-gradient(260px circle at var(--mx) var(--my), #000 0%, transparent 72%);
mask-image:radial-gradient(260px circle at var(--mx) var(--my), #000 0%, transparent 72%);
}
@media (max-width:900px){
.bg-tiles{ display:none; }
}
/* ============================================
Loader — temporarily disabled per request; the portal section now
plays that role as the page's opening beat. main.js still runs its
intro timeline harmlessly against a hidden element.
============================================ */
.loader{ display:none; }
.loader-logo{ width:220px; color:#fff; opacity:0; }
.loader-logo svg{ width:100%; height:auto; display:block; }
/* ============================================
Portal curtain — fixed above literally everything, header and
settings FAB included (z-index higher than both), so they read as
hidden "behind" this screen until scroll reveals them. A hole
centred on the final dot of "Piensa." grows via main.js (driven by
a ScrollTrigger that pins the first pair — see initScrollAnimations)
until it clears the whole viewport, revealing the real hero section
held static behind it — not a stand-in colour, the actual content.
============================================ */
.portal-curtain{
position:fixed; inset:0; z-index:950; pointer-events:none;
background:#F1F1F1;
display:flex; align-items:center; justify-content:center;
overflow:hidden;
}
.portal-curtain__brain-wrap{
/* handles the static centring/cut-off positioning via `transform`,
leaving `transform` on the itself entirely free for GSAP
Draggable's own x/y offset (see initDraggableFloaters) — same
wrapper/inner split already used for the standalone .floater. */
position:absolute; z-index:0; bottom:0; left:50%;
width:70vw;
/* shifted down past half its own height, so a bit less than the
top 50% is visible above the cut */
transform:translate(-50%, 65%);
}
.portal-curtain__brain{
display:block; width:100%; height:auto; max-width:none;
pointer-events:auto; cursor:grab; touch-action:none;
-webkit-user-select:none; user-select:none; -webkit-user-drag:none; -khtml-user-drag:none;
will-change:transform;
}
.portal-curtain__brain:active{ cursor:grabbing; }
.portal-curtain__brain.is-dragging{ transition:transform .7s cubic-bezier(.2,.8,.2,1); }
/* Small, blurred, scattered brains behind the main one — pure
background texture, each at its own size/blur/position so they
read as out-of-focus depth rather than repeated copies. Their
parallax drift (main.js) uses each one's own data-depth, on top of
this base position via the standalone `translate` property. */
.portal-curtain__brain-bg{
position:absolute; z-index:0; height:auto; max-width:none; opacity:.32;
}
.portal-curtain__brain-bg--1{ width:90px; top:12%; left:10%; filter:blur(4px); rotate:-14deg; opacity:.3; }
.portal-curtain__brain-bg--2{ width:150px; top:18%; right:8%; filter:blur(6px); rotate:10deg; scale:-1 1; opacity:.18; }
.portal-curtain__brain-bg--3{ width:60px; top:60%; left:16%; filter:blur(3px); rotate:22deg; opacity:.42; }
.portal-curtain__brain-bg--4{ width:190px; bottom:6%; right:14%; filter:blur(8px); rotate:-20deg; scale:-1 1; opacity:.16; }
.portal-curtain__brain-bg--5{ width:75px; top:70%; right:28%; filter:blur(4px); rotate:35deg; scale:-1 1; opacity:.36; }
.portal-curtain__logo{
position:relative; z-index:2;
/* matches the visual height the old text word used to occupy
(font-size at line-height:1) */
height:clamp(4rem, 15vw, 13rem); width:auto; color:#1a1410;
/* main.js reads #punto's live position each time it measures the
curtain (measureCurtain/onRefresh), so the reveal circle's centre
always tracks wherever the logo actually sits — moving it here
needs no other adjustment. */
transform:translateY(-60px);
}
.portal-curtain__logo svg{ height:100%; width:auto; display:block; }
.portal-veil{
position:fixed; inset:0; z-index:7; pointer-events:none;
background:#1a1410; opacity:1;
}
.portal-curtain__scroll{
position:absolute; left:50%; bottom:40px; transform:translateX(-50%); z-index:2;
color:#ffffff; opacity:.85; transition:opacity .3s;
}
.portal-curtain__wheel{
animation:portalWheel 1.7s ease-in-out infinite;
transform-origin:12px 11px;
}
@keyframes portalWheel{
0%{ transform:translateY(0); opacity:1; }
65%{ transform:translateY(9px); opacity:0; }
66%{ transform:translateY(0); opacity:0; }
100%{ transform:translateY(0); opacity:1; }
}
@media (max-width:900px){
.portal-curtain, .portal-veil{ display:none; }
}
/* ============================================
Custom cursor
============================================ */
.cursor-dot, .cursor-ring{
position:fixed; top:0; left:0; pointer-events:none; z-index:9998;
border-radius:50%;
transform:translate(-50%,-50%);
mix-blend-mode:difference;
}
.cursor-dot{ width:8px; height:8px; background:#fff; }
.cursor-ring{ width:40px; height:40px; border:1.5px solid #fff; transition:width .25s var(--ease-out), height .25s var(--ease-out), opacity .25s; }
.cursor-ring.is-hover{ width:70px; height:70px; }
@media (max-width:900px){
.cursor-dot,.cursor-ring{ display:none; }
body{ cursor:auto; }
}
/* ============================================
Floating object image — one per section. Lives in its own column
(the space the text column doesn't use), centred there, with a
subtle idle float plus a scroll-linked parallax drift (see main.js)
so it visibly travels as you scroll toward the next section.
============================================ */
.floater{
/* z-index:6 — one above .section (z-index:5). Sections are
full-viewport boxes that are mostly invisible empty space outside
their actual text content, but being higher in the DOM stacking
order they'd otherwise always win hit-testing over the image,
even where nothing is visibly painted there. */
position:absolute; top:0; bottom:0; z-index:6;
display:flex; align-items:center; justify-content:center;
pointer-events:none;
}
.floater img{
position:relative; left:0; top:0; width:100%; height:auto; display:block;
pointer-events:auto; cursor:grab; touch-action:none;
-webkit-user-select:none; user-select:none; -webkit-user-drag:none; -khtml-user-drag:none;
filter:drop-shadow(0 30px 26px rgba(0,0,0,.12));
animation:floaty 6s ease-in-out infinite;
/* promote to its own compositing layer up front, instead of the
browser doing it lazily on the very first drag — that late
promotion is what causes the first drag to stutter before it
"wakes up" and subsequent ones feel smooth. */
will-change:transform;
}
.floater img:active{ cursor:grabbing; }
/* while actively dragging, smooth each raw pointer-position jump into a
short trailing ease — makes the drag itself feel heavy/slow rather
than snapping 1:1 to the cursor. */
.floater img.is-dragging{ transition:transform .7s cubic-bezier(.2,.8,.2,1); }
/* Uses the standalone `rotate` CSS property (not `transform`) so it can
never fight with GSAP's scroll-driven `rotation` tween on the same
element (both would otherwise fight over `transform` every frame,
which is what was silently cancelling the travel-rotation out). */
@keyframes floaty{
0%, 100%{ rotate:-6deg; }
50%{ rotate:-1.5deg; }
}
/* text on the left → image column fills the right side, and vice versa.
max-width fills the real available column width (as large as it can
get without ever touching the text column) instead of a flat cap. */
.section[data-side="left"] .floater{
left:calc(var(--pad) + var(--text-col) + var(--col-gap));
right:var(--pad-img-edge);
}
.section[data-side="left"] .floater img{
max-width:calc(100vw - var(--pad) - var(--pad-img-edge) - var(--text-col) - var(--col-gap));
}
.section[data-side="right"] .floater{
left:var(--pad-img-edge);
right:calc(var(--pad) + var(--edge-extra) + var(--text-col) + var(--col-gap));
}
.section[data-side="right"] .floater img{
max-width:calc(100vw - var(--pad) - var(--pad-img-edge) - var(--edge-extra) - var(--text-col) - var(--col-gap));
}
@media (max-width:900px){
.floater{ display:none; }
}
/* ============================================
Pair-floater — ONE image shared by two consecutive sections. It
starts resting in the first section's column, then — driven by
scroll (see main.js) — travels down into the second section's
(opposite) column and stays there for the rest of that section.
Positioned in plain pixels by JS (left/top), so the idle "floaty"
keyframe animation below (which only touches `transform`) never
conflicts with the scroll-driven tween.
============================================ */
.pair{ position:relative; }
.pair-floater{
/* width/height are set inline by JS to fill the tighter of the two
columns it travels between — see main.js. z-index:6, same reasoning
as .floater above — must sit above the (mostly invisible) .section
boxes (z-index:5) so drags land on the image, not the section. */
position:absolute; top:0; left:0; z-index:6;
display:block; pointer-events:auto; cursor:grab; touch-action:none;
-webkit-user-select:none; user-select:none; -webkit-user-drag:none; -khtml-user-drag:none;
filter:drop-shadow(0 30px 26px rgba(0,0,0,.12));
animation:floaty 6s ease-in-out infinite;
will-change:transform;
}
.pair-floater:active{ cursor:grabbing; }
.pair-floater.is-dragging{ transition:transform .7s cubic-bezier(.2,.8,.2,1); }
@media (max-width:900px){
.pair-floater{ display:none; }
}
/* ============================================
NAV
============================================ */
.nav{
/* isolation:isolate + its own transform force the header onto its own,
guaranteed-on-top compositing layer. Without this, a dragged image
promoted to a GPU layer (for the drag's own smoothness) can end up
painted by the compositor above a fixed-position element that was
never itself promoted — a real browser quirk where z-index alone
isn't always enough once *some* elements are on separate layers and
others aren't. */
position:fixed; top:0; left:0; width:100%; z-index:900;
isolation:isolate; transform:translateZ(0);
display:flex; align-items:center; justify-content:space-between;
padding:20px var(--pad-nav);
gap:24px;
}
.nav__logo{ height:34px; width:auto; color:var(--fg); transition:color .6s; flex-shrink:0; }
.nav__logo svg{ height:100%; width:auto; display:block; }
.nav__menu{ flex:1; display:flex; justify-content:center; }
.nav__menu > ul{ display:flex; gap:8px; }
.nav__menu > ul > li{ position:relative; }
.nav__menu > ul > li > a{
display:block; padding:10px 16px; border-radius:999px;
font-size:14.5px; font-weight:500; letter-spacing:.01em;
transition:background-color .3s, color .6s;
}
.nav__menu > ul > li > a:hover{ background:rgba(0,0,0,.06); }
.megamenu{
position:absolute; top:100%; left:50%; margin-top:10px;
transform:translate(-50%,-8px);
background:#F1F1F1; color:#1a1410;
border-radius:18px; padding:14px; width:min(560px, 90vw);
display:grid; grid-template-columns:1fr 1fr; gap:4px;
opacity:0; visibility:hidden;
transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s;
box-shadow:0 24px 48px rgba(0,0,0,.18);
border:1px solid rgba(0,0,0,.06);
}
.megamenu--narrow{ width:min(300px, 90vw); grid-template-columns:1fr; }
.megamenu--cols3{ width:min(620px, 90vw); grid-template-columns:repeat(3,1fr); }
.has-sub:hover .megamenu{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.megamenu__col{ display:flex; flex-direction:column; gap:2px; }
.megamenu__heading{
font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
opacity:.4; padding:8px 12px 4px;
}
.megamenu__item{
display:flex; align-items:flex-start; gap:12px;
padding:10px 12px; border-radius:12px;
transition:background-color .2s; color:#1a1410;
}
.megamenu__item:hover{ background:rgba(197,18,31,.07); }
.megamenu__icon{
flex-shrink:0; width:34px; height:34px; border-radius:10px;
display:flex; align-items:center; justify-content:center;
background:rgba(197,18,31,.08); color:#C1121F;
}
.megamenu__icon svg{ width:18px; height:18px; }
.megamenu__item strong{ display:block; font-size:14.5px; font-weight:600; margin-bottom:3px; }
.megamenu__item small{ display:block; font-size:12px; font-weight:300; opacity:.55; line-height:1.35; }
.megamenu__item span{ font-size:14px; font-weight:500; align-self:center; }
.nav__cta{ flex-shrink:0; }
.nav__burger{ display:none; }
@media (max-width:1100px){
.nav__cta{ display:none; }
.nav__burger{
display:flex; flex-direction:column; gap:5px; background:none; border:0; padding:8px; cursor:pointer; z-index:950;
}
.nav__burger span{ width:26px; height:2px; background:var(--fg); border-radius:2px; transition:transform .3s, opacity .3s; }
.nav__burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav__menu{
position:fixed; inset:0; z-index:940;
background:var(--fg); color:var(--bg);
display:flex; align-items:center; justify-content:center;
opacity:0; visibility:hidden; transform:translateY(-12px);
transition:opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility .4s;
}
.nav__menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.nav__menu > ul{ flex-direction:column; align-items:center; gap:4px; }
.nav__menu > ul > li > a{ font-size:1.6rem; font-weight:600; padding:12px 20px; }
.nav__menu > ul > li > a:hover{ background:rgba(255,255,255,.1); }
.megamenu{ position:static; background:transparent; box-shadow:none; border:none; opacity:1; visibility:visible; transform:none;
display:none; grid-template-columns:1fr !important; width:auto; padding:0; margin-top:8px; }
.has-sub:hover .megamenu{ display:grid; }
.megamenu__heading{ color:#fff; opacity:.5; text-align:center; }
.megamenu__item{ justify-content:center; text-align:left; color:#fff; }
.megamenu__item:hover{ background:rgba(255,255,255,.1); }
.megamenu__icon{ background:rgba(255,255,255,.12); color:#fff; }
.megamenu__item small{ opacity:.6; }
}
/* ============================================
Layout / Sections
============================================ */
.section{
position:relative; z-index:5;
min-height:100vh;
display:flex; align-items:center;
padding:140px var(--pad) 100px;
}
/* Text always lives in a fixed-width column so the floating image,
anchored to the opposite side, never has text underneath it. */
.section__inner{ width:100%; max-width:var(--text-col); margin:0; }
.section--flip{ }
/* Text column flips sides per section (data-side); the floating image
always anchors to the opposite, empty column — see .floater. Each
side's own padding is pulled in to exactly the width of its text
zone, so `margin-inline:auto` centres the text block within that
zone instead of it just hugging the outer edge. */
.section[data-side="left"]:not(.hero){
padding-right:calc(100% - var(--pad) - var(--text-col) - var(--col-gap));
}
.section[data-side="left"] .section__inner{ margin-inline:auto; }
.section[data-side="right"]{
padding-left:calc(100% - var(--pad) - var(--text-col) - var(--col-gap) - var(--edge-extra));
}
.section[data-side="right"] .section__inner{ margin-inline:auto; }
@media (max-width:900px){
.section[data-side="left"], .section[data-side="right"]{ padding-left:var(--pad); padding-right:var(--pad); }
.section__inner{ max-width:100%; margin-left:0 !important; margin-right:0 !important; }
}
/* A single-column, full-width variant for long-form content sections
that have no floating image sharing the row (FAQ, method list, lead
form…) — skips the two-column text-vs-image split entirely instead
of leaving the image column empty. */
.section--wide{ padding-left:var(--pad); padding-right:var(--pad); }
.section--wide .section__inner{ max-width:1200px; margin-inline:auto; }
.eyebrow{
display:inline-block; font-size:13px; font-weight:600; letter-spacing:.16em;
text-transform:uppercase; color:var(--fg); opacity:.45; margin-bottom:22px;
transition:color .6s; text-wrap:balance;
}
.title-xl{
font-size:clamp(2.2rem, 5vw, 4.2rem);
font-weight:700; line-height:1.06; letter-spacing:-.02em;
margin-bottom:28px;
text-wrap:balance;
}
.accent{ font-weight:300; }
.lead{
font-size:clamp(.9rem, 1.2vw, 1.05rem); font-weight:300; line-height:1.55;
max-width:640px; margin-bottom:40px; opacity:.85; text-wrap:balance;
}
/* ============================================
HERO
============================================ */
.hero{ padding-top:100px; flex-direction:column; align-items:flex-start; justify-content:center; }
/* max-width:100% makes this box span the full section width, but most
of that width is empty space (only the constrained .hero__title and
.hero__actions actually have visible content) — without pointer-events
handling, that empty invisible area would sit (by z-index) on top of
the floating image and steal clicks/drags meant for it. */
.hero .section__inner{ max-width:100%; pointer-events:none; }
.hero .section__inner > *{ pointer-events:auto; }
.hero__title{
font-size:clamp(2.8rem, 7.4vw, 6.4rem); font-weight:800; line-height:.98; letter-spacing:-.03em;
margin-bottom:32px; text-wrap:balance; overflow-wrap:break-word;
/* Even though .section__inner itself is full-width, the title text
must stay inside the left text zone — otherwise a long line can
visually reach into the image column, sit on top of it (text has
the higher z-index) and steal clicks meant for the floating image. */
max-width:calc(var(--pad) + var(--text-col) + var(--col-gap));
}
/* padding-bottom + matching negative margin gives descenders (g, j, p, q)
room inside the overflow:hidden clip box without opening a visual gap. */
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.15em; margin-bottom:-.15em; }
.hero__actions{ display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; }
/* Trust strip — certification/partner logos, kept quiet in grayscale
until hovered, when each one reveals its own original colour. Pinned
near the bottom of the hero section (not in the centred text flow),
since .hero is already position:relative. */
.hero__trust{
position:absolute; left:var(--pad); bottom:56px; z-index:1;
display:flex; align-items:center; flex-wrap:wrap; gap:28px;
}
/* The hover trigger sits on this padded wrapper rather than the
itself — hovering the tight image box alone felt overly precise;
the padding gives a bigger, more forgiving target. */
.hero__trust-item{ display:flex; padding:10px; margin:-10px; }
.hero__trust img{
height:36px; width:auto; max-width:102px; object-fit:contain;
filter:grayscale(1); opacity:.8;
transition:filter .3s, opacity .3s;
}
.hero__trust-item:hover img{ filter:grayscale(0); opacity:1; }
@media (max-width:640px){
.hero__trust{ bottom:32px; gap:20px; }
.hero__trust img{ height:24px; max-width:76px; }
}
/* ============================================
Buttons
============================================ */
.btn{
/* z-index above the floating images (z-index:6) — a button must
always stay clickable even if a dragged image ends up over it. */
position:relative; z-index:10; display:inline-flex; align-items:center; gap:10px;
padding:16px 30px; border-radius:999px; border:none; font-weight:600; font-size:15px;
background:var(--fg); color:var(--bg); overflow:hidden;
transition:transform .4s var(--ease-out), background-color .6s, color .6s;
will-change:transform;
}
.btn span{ transition:transform .4s var(--ease-out); }
.btn:hover span{ transform:translateX(4px); }
.btn--lg{ padding:20px 38px; font-size:16.5px; }
.btn--sm{ padding:11px 22px; font-size:13.5px; }
.btn--ghost{ background:transparent; border:1.5px solid var(--fg); color:var(--fg); }
/* ============================================
Stats / tags / row-lists
============================================ */
.stat-row{ display:flex; gap:48px; flex-wrap:wrap; margin-top:8px; }
.stat__num{ font-size:clamp(2.6rem,5vw,4.2rem); font-weight:800; display:block; line-height:1; }
.stat__num::after{ content:'+'; }
.stat__label{ font-size:.95rem; font-weight:400; opacity:.7; max-width:180px; display:block; margin-top:8px; }
.tag-cloud{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }
.tag-cloud span{
padding:12px 22px; border-radius:999px; font-size:.95rem; font-weight:500;
background:rgba(0,0,0,.06); transition:background-color .3s, transform .3s;
}
.tag-cloud span:hover{ background:var(--fg); color:var(--bg); transform:translateY(-3px); }
.link-list{ display:flex; flex-direction:column; gap:4px; }
.link-list a{
font-size:1.4rem; font-weight:600; padding:14px 0; border-bottom:1px solid var(--border);
transition:border-color .6s;
display:flex; justify-content:space-between; transition:padding-left .3s var(--ease-out), color .3s;
}
.link-list a:hover{ padding-left:12px; }
/* Bullet list with a check icon — trust points, reasons to hire us. */
.check-list{ display:flex; flex-direction:column; gap:0; margin-top:8px; max-width:640px; }
.check-list li{
display:flex; gap:14px; align-items:flex-start; padding:16px 0;
border-bottom:1px solid var(--border); font-size:1rem; line-height:1.5; transition:border-color .6s;
}
.check-list li:last-child{ border-bottom:none; }
.check-list li svg{ flex:none; width:20px; height:20px; margin-top:2px; color:var(--accent); }
/* Pull quote — the Eric Ries line in the hero. */
.quote{
font-size:clamp(1.2rem, 2.2vw, 1.7rem); font-weight:500; line-height:1.4; font-style:italic;
border-left:3px solid var(--accent); padding-left:24px; margin:4px 0 28px; max-width:620px;
}
.quote cite{ display:block; margin-top:14px; font-size:.85rem; font-style:normal; font-weight:600; opacity:.6; }
/* Small helper line under a CTA (e.g. "sin compromiso…"). */
.hero__note{ font-size:.85rem; opacity:.6; margin:10px 0 0; }
/* FAQ accordion, native / — collapsed content stays
in the DOM (readable by search/AI crawlers) without any JS. */
.faq{ display:flex; flex-direction:column; gap:0; margin-top:20px; max-width:900px; }
.faq--full{ max-width:none; width:100%; }
.faq details{ border-bottom:1px solid var(--border); padding:22px 0; transition:border-color .6s; }
.faq details:last-child{ border-bottom:none; }
.faq summary{
cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
gap:20px; font-size:1.1rem; font-weight:600; line-height:1.4;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-size:1.6rem; font-weight:300; flex:none; transition:transform .3s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq__answer{ padding-top:16px; font-size:.96rem; line-height:1.65; opacity:.85; max-width:760px; }
.faq__answer p{ margin-bottom:10px; }
.faq__answer p:last-child{ margin-bottom:0; }
/* Numbered method steps. */
.method-list{ display:flex; flex-direction:column; gap:0; margin-top:20px; max-width:820px; }
.method-list li{ display:flex; gap:24px; padding:26px 0; border-bottom:1px solid var(--border); transition:border-color .6s; }
.method-list li:last-child{ border-bottom:none; }
.method-list__num{ flex:none; font-size:1.6rem; font-weight:800; opacity:.25; width:44px; }
.method-list li p{ font-size:1rem; line-height:1.55; margin:0; }
/* Collapsible info panels — "para perfiles técnicos" / "información
para las IAs". Content is present (and crawlable) whether open or
closed, just visually tucked away by default. */
.info-panel{ margin-top:8px; max-width:900px; }
.info-panel > summary{
cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:10px;
font-weight:600; font-size:.95rem; padding:14px 22px; border:1.5px solid var(--border-strong); border-radius:999px;
}
.info-panel > summary::-webkit-details-marker{ display:none; }
.info-panel > summary::before{ content:'+'; font-size:1.2rem; font-weight:300; }
.info-panel[open] > summary::before{ content:'−'; }
.info-panel__body{ margin-top:28px; font-size:.92rem; line-height:1.65; opacity:.85; }
.info-panel__body h4{ font-size:1rem; font-weight:700; margin:24px 0 8px; }
.info-panel__body h4:first-child{ margin-top:0; }
.info-panel__body p{ margin-bottom:10px; }
.info-panel--ai{ opacity:.7; }
.info-panel{ margin-top:56px; }
.info-panel + .info-panel{ margin-top:32px; }
.info-panel--ai{ margin-bottom:56px; }
/* ============================================
/transformacion-empresas/ — page-scoped overrides
============================================
Everything below is gated on body[data-page="transform"] (set only on
that page's ) or uses classes that only exist in that page's own
markup, so none of it can ever reach the home page's shared DOM. */
/* No portal-curtain intro on this page — replaced by the loader below. */
body[data-page="transform"] .portal-curtain,
body[data-page="transform"] .portal-veil{ display:none !important; }
body[data-page="transform"] .loader{
display:flex; position:fixed; inset:0; z-index:1000;
align-items:center; justify-content:center; background:#0d0d0d;
}
body[data-page="transform"] .loader-logo{ color:#fff; }
/* Hero quote variant (/transformacion-empresas/) — the title itself IS
the pull quote, so it runs a notch smaller than the site's usual
hero titles, with the attribution set tight against it. */
/* This hero has a real .floater image (not the pair-floater system the
home page's hero uses), positioned by the shared [data-side="left"]
.floater rule at left:calc(--pad + --text-col + --col-gap) — measured
from the SECTION's own edge. hero__title/.hero__cite, however, start
already offset by --pad (section__inner sits inside the section's own
padding), so capping their width at that same full formula would run
--pad too far into the image column; dropping --pad from the cap
lines their right edge up with where the floater actually starts. */
.hero--transform .hero__title{ font-size:clamp(2.2rem, 5.6vw, 4.8rem); max-width:calc(var(--text-col) + var(--col-gap)); }
.hero__cite{
max-width:calc(var(--text-col) + var(--col-gap));
margin-top:2px; text-align:right; font-size:.95rem; opacity:.6;
}
/* Hero ambient messages — the "hacer presupuestos 80% más rápido…" list,
split into individual phrases that drift lazily behind the real
content instead of reading as one dense sentence. */
.hero__ambient{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero__ambient-msg{
position:absolute; left:var(--x); top:var(--y);
font-size:.78rem; font-weight:600; padding:9px 18px; border-radius:999px;
background:rgba(0,0,0,.05); color:var(--fg); opacity:.5; white-space:nowrap;
animation:heroAmbientDrift 10s ease-in-out infinite;
animation-delay:var(--delay);
}
@keyframes heroAmbientDrift{
0%, 100%{ transform:translateY(0) rotate(-1.5deg); }
50%{ transform:translateY(-16px) rotate(1.5deg); }
}
@media (max-width:900px){ .hero__ambient{ display:none; } }
/* "¿Por qué nosotros?" — text + bullets alongside an illustration. */
.section--reasons .section__inner{ display:flex; align-items:center; gap:64px; flex-wrap:wrap; }
.section--reasons .reasons__text{ flex:1 1 420px; }
.reasons__visual{ flex:1 1 280px; display:flex; justify-content:center; }
.reasons__visual img{ width:100%; max-width:320px; height:auto; filter:drop-shadow(0 30px 26px rgba(0,0,0,.12)); }
@media (max-width:900px){ .section--reasons .section__inner{ flex-direction:column; } }
/* Casos de éxito — visual grid, each card destined to link to its own
case-study page once those exist. */
.case-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-top:28px; }
.case-card{ display:block; border-radius:20px; overflow:hidden; background:rgba(0,0,0,.04); text-decoration:none; color:var(--fg); transition:transform .35s var(--ease-out); }
.case-card:hover{ transform:translateY(-6px); }
.case-card__img{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.03); }
.case-card__img img{ width:56%; height:56%; object-fit:contain; filter:drop-shadow(0 20px 20px rgba(0,0,0,.1)); }
.case-card__body{ padding:22px 24px 26px; }
.case-card__body h3{ font-size:1.1rem; font-weight:700; margin-bottom:6px; }
.case-card__body p{ font-size:.88rem; opacity:.7; }
@media (max-width:900px){ .case-grid{ grid-template-columns:1fr; } }
/* El método — horizontal, pinned timeline (see initMethodTimeline in
main.js). Falls back to a native horizontally-swipeable row on narrow
viewports, where pin-scroll tends to feel janky. */
.method-section{ overflow:hidden; flex-direction:column; align-items:stretch; justify-content:center; }
.method-section .section__inner{ max-width:1200px; margin-inline:auto; width:100%; }
.method-track-wrap{ margin-top:44px; overflow:hidden; }
.method-track{ display:flex; gap:32px; width:max-content; padding:4px var(--pad-nav) 12px; will-change:transform; }
.method-step{
flex:0 0 clamp(260px, 30vw, 400px); background:rgba(0,0,0,.045); border-radius:24px;
padding:36px 32px; transition:background-color .4s, color .4s, transform .4s var(--ease-out);
}
.method-step__num{ font-size:1.1rem; font-weight:800; opacity:.35; display:block; margin-bottom:18px; }
.method-step h3{ font-size:1.35rem; font-weight:700; margin-bottom:12px; }
.method-step p{ font-size:.94rem; line-height:1.55; opacity:.8; margin:0; }
.method-step.is-active{ background:var(--fg); color:var(--bg); transform:scale(1.045); }
.method-step.is-active p{ opacity:.85; }
@media (max-width:900px){
.method-track-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.method-track{ padding-left:var(--pad); padding-right:var(--pad); }
}
/* Lead form — framed as an unmistakable form: a plain white panel that
fills the section's own container width, with every element inside
it centred rather than run as a left-aligned column. */
.lead-form-section{ padding-top:100px; }
.lead-form-section .section__inner{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.lead-form-card{
width:100%; max-width:none; margin-top:32px; padding:44px;
border-radius:28px; background:#fff;
display:flex; flex-direction:column; align-items:center;
}
.lead-form-progress{ display:flex; gap:8px; margin-bottom:8px; width:100%; max-width:520px; }
.lead-form-progress span{ flex:1; height:4px; border-radius:999px; background:rgba(0,0,0,.1); }
.lead-form-progress span.is-done, .lead-form-progress span.is-active{ background:var(--fg); }
@media (max-width:640px){ .lead-form-card{ padding:28px 22px; } }
/* ============================================
Contact form
============================================ */
.section--contact{ flex-direction:column; align-items:flex-start; }
.contact-form{ width:100%; max-width:560px; display:flex; flex-direction:column; gap:26px; margin-bottom:80px; }
.field{ position:relative; }
.field input, .field textarea{
width:100%; background:transparent; border:none; border-bottom:1.5px solid var(--border-strong);
padding:12px 4px; font-family:var(--ff); font-size:1.1rem; color:var(--fg); outline:none;
transition:border-color .3s; resize:none;
}
.field input:focus, .field textarea:focus{ border-color:var(--accent); }
.field label{
position:absolute; left:4px; top:12px; font-size:1.1rem; opacity:.5; pointer-events:none;
transition:transform .25s var(--ease-out), opacity .25s;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
transform:translateY(-24px) scale(.8); transform-origin:left; opacity:.8;
}
.footer{ width:100%; max-width:var(--container); display:flex; flex-direction:column; gap:20px; padding-top:40px; border-top:1px solid var(--border); transition:border-color .6s; }
.footer__logo{ width:150px; color:var(--fg); }
.footer p{ font-size:.85rem; opacity:.6; }
/* ============================================
Lead form — long, two-screen qualifying form (transformación de
empresas). Each screen is a real