:root{
  --green-deep:#0B3D0B;
  --green-mid:#0B3D0B;
  --green-soft:#55756a;
  --sage:#55756a;
  --mist:#dfe5e2;
  --paper:#dfe5e2;
  --white:#FFFFFF;
  --ink:#1f1f1f;
  --graphite:#3a3a3a;
  --fg-dim:#55756a;
  --fg-faint:#55756a;
  --line:rgba(31,31,31,.10);
  --line-soft:rgba(31,31,31,.07);
  --line-on-dark:rgba(255,255,255,.14);

  --font-display:'Manrope',system-ui,sans-serif;
  --font-body:'Source Sans 3',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --maxw:1280px;
  --gutter:clamp(20px,4vw,56px);
  --radius:14px;
  --ease:cubic-bezier(.23,1,.32,1);
  --ease-inout:cubic-bezier(.77,0,.175,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-weight:400;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;font-weight:700;letter-spacing:-.01em;line-height:1.08;}
p{margin:0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-deep);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:22px;height:2px;background:var(--green-deep);display:inline-block;}
.eyebrow.on-dark{color:var(--mist);}
.eyebrow.on-dark::before{background:var(--mist);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:999px;
  font-family:var(--font-display);font-size:.86rem;font-weight:700;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .35s var(--ease),background .3s ease,color .3s ease,border-color .3s ease;
}
.btn svg{width:14px;height:14px;transition:transform .3s var(--ease);}
.btn:hover svg{transform:translate(3px,-3px);}
.btn-primary{background:var(--green-deep);color:var(--white);}
.btn-primary:hover{background:var(--ink);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-outline:hover{border-color:var(--green-deep);color:var(--green-deep);}
.btn-ghost-light{background:transparent;color:var(--white);border-color:var(--line-on-dark);}
.btn-ghost-light:hover{border-color:var(--white);}
@media (hover:none){.btn:hover{transform:none;}}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:border-color .4s ease;
}
.site-header::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:transparent;backdrop-filter:none;
  transition:background-color .4s ease,backdrop-filter .4s ease;
}
.site-header.is-scrolled{border-bottom-color:var(--line-soft);}
.site-header.is-scrolled::before{
  background:rgba(223,229,226,.88);backdrop-filter:blur(16px) saturate(160%);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px;}
.header-logo{height:30px;width:131px;flex:0 0 auto;position:relative;}
.header-logo img{height:100%;width:auto;position:absolute;top:0;left:0;transition:opacity .4s ease;}
.header-logo .logo-light{opacity:1;}
.header-logo .logo-dark{opacity:0;}
.site-header.is-scrolled .header-logo .logo-light{opacity:0;}
.site-header.is-scrolled .header-logo .logo-dark{opacity:1;}
.main-nav{display:flex;align-items:center;gap:36px;}
.main-nav a{
  font-family:var(--font-mono);font-size:.78rem;font-weight:500;text-decoration:none;color:rgba(255,255,255,.72);
  letter-spacing:.06em;text-transform:uppercase;position:relative;padding-block:4px;transition:color .3s ease;
}
.main-nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:#55756a;transition:right .3s var(--ease);}
.main-nav a:hover{color:#fff;}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{right:0;}
.main-nav a[aria-current="page"]{color:#fff;}
.main-nav a.btn{color:var(--white);text-transform:none;letter-spacing:.01em;font-family:var(--font-display);}
.main-nav a.btn::after{display:none;}
.header-actions{display:flex;align-items:center;gap:18px;}
.header-ecosystem{font-family:var(--font-body);font-size:.76rem;color:rgba(255,255,255,.65);text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.65);transition:color .4s ease,border-color .4s ease;}
.header-ecosystem:hover{color:var(--white);border-color:var(--white);}
.site-header.is-scrolled .header-ecosystem{color:var(--fg-faint);border-color:var(--fg-faint);}
.site-header.is-scrolled .header-ecosystem:hover{color:var(--green-deep);border-color:var(--green-deep);}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--white);margin:5px 0;transition:transform .3s ease,opacity .3s ease,background .4s ease;}
.site-header.is-scrolled .nav-toggle span{background:var(--ink);}
.nav-open .site-header .nav-toggle span{background:var(--ink);}

@media (max-width:860px){
  .header-ecosystem{display:none;}
  .nav-toggle{display:block;}
  .main-nav{
    position:fixed;top:var(--header-h,84px);left:0;right:0;bottom:0;z-index:200;
    background:#000;flex-direction:column;align-items:stretch;
    padding:4px var(--gutter) 36px;gap:0;overflow-y:auto;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;
  }
  .main-nav.is-open{opacity:1;transform:translateY(0);pointer-events:auto;}
  .main-nav a{
    width:100%;padding:19px 2px;border-bottom:1px solid var(--line-on-dark);
    font-size:.95rem;letter-spacing:.08em;
  }
  .main-nav a::after{display:none;}
  .main-nav a[aria-current="page"]{color:#55756a;}
  .main-nav .btn{
    margin-top:26px;justify-content:center;border-bottom:none;padding:17px 26px;
  }
  body.nav-open{overflow:hidden;}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  @media (prefers-reduced-motion:no-preference){
    .main-nav a,.main-nav .btn{opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease,color .3s ease,border-color .3s ease;}
    .main-nav.is-open a,.main-nav.is-open .btn{opacity:1;transform:none;}
    .main-nav a:nth-child(1){transition-delay:.06s;}
    .main-nav a:nth-child(2){transition-delay:.1s;}
    .main-nav a:nth-child(3){transition-delay:.14s;}
    .main-nav a:nth-child(4){transition-delay:.18s;}
    .main-nav a:nth-child(5){transition-delay:.22s;}
    .main-nav a:nth-child(6){transition-delay:.26s;}
    .main-nav .btn{transition-delay:.3s;}
  }
}

/* ---------- Hero (dark) ---------- */
.hero{
  position:relative;background:linear-gradient(165deg,#000000 0%,var(--green-deep) 68%,var(--green-mid) 100%);
  color:var(--white);overflow:hidden;padding-top:clamp(64px,10vw,120px);padding-bottom:clamp(64px,9vw,110px);
}
.hero .bg-liquid{opacity:1;}
.hero-grid{position:absolute;inset:0;opacity:.35;z-index:1;
  background-image:linear-gradient(var(--line-on-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-on-dark) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(ellipse 90% 70% at 70% 30%,#000 40%,transparent 85%);
}
.hero-spark{position:absolute;right:-8%;top:50%;width:min(620px,60vw);height:min(620px,60vw);transform:translateY(-50%);
  opacity:.5;pointer-events:none;}
.hero .wrap{position:relative;z-index:2;}
.hero-inner{max-width:760px;}
.hero h1{font-size:clamp(2.3rem,3.6vw + 1rem,4.2rem);margin-top:20px;text-shadow:0 2px 28px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4);}
.hero-sub{margin-top:24px;max-width:56ch;font-size:clamp(1rem,.3vw + .95rem,1.15rem);color:rgba(255,255,255,.85);line-height:1.65;text-shadow:0 2px 16px rgba(0,0,0,.5);}
.hero .eyebrow.on-dark{text-shadow:0 1px 10px rgba(0,0,0,.5);}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px;}
.hero-tagline{margin-top:56px;padding-top:24px;border-top:1px solid var(--line-on-dark);
  font-family:var(--font-display);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);}

.page-hero{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(44px,6vw,72px);}
.page-hero h1{font-size:clamp(2rem,2.6vw + 1rem,3.2rem);margin-top:18px;}
.page-hero .hero-sub{margin-top:18px;}

/* ---------- Sections ---------- */
.section{padding-block:clamp(56px,8vw,112px);}
.section-dark{background:var(--ink);color:var(--white);}
.section-mist{background:var(--mist);}
.section-head{max-width:640px;}
.section-head h2{font-size:clamp(1.7rem,2vw + 1rem,2.6rem);margin-top:16px;}
.section-head p{margin-top:16px;color:var(--fg-dim);font-size:1.05rem;line-height:1.65;}
.section-dark .section-head p{color:rgba(255,255,255,.72);}
.section-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;}

/* ---------- Grids & cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:48px;}
@media (max-width:860px){.grid-3{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr;gap:18px;}}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:20px;padding:32px 28px;
  transition:transform .4s var(--ease),border-color .4s ease,box-shadow .4s ease;position:relative;
}
.card:hover{transform:translateY(-4px);border-color:var(--green-deep);box-shadow:0 20px 40px -24px rgba(11,61,11,.35);}
.card-index{
  display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.08em;color:var(--green-deep);border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;text-transform:uppercase;
}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.card-icon{
  width:46px;height:46px;border-radius:13px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(11,61,11,.08),rgba(11,61,11,.02));
  border:1px solid var(--line);color:var(--green-deep);
  transition:transform .45s var(--ease),border-color .35s ease,background .35s ease;
}
.card-icon svg{width:22px;height:22px;}
.card h3{font-size:1.2rem;margin-top:18px;}
.card p{margin-top:10px;color:var(--fg-dim);font-size:.95rem;line-height:1.6;}
.card-link{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);
  font-size:.82rem;font-weight:700;color:var(--green-deep);text-decoration:none;}
.card-link svg{width:12px;height:12px;transition:transform .3s var(--ease);}
.card-link:hover svg{transform:translate(3px,-3px);}

.card-dark{background:rgba(255,255,255,.04);border:1px solid var(--line-on-dark);}
.card-dark:hover{border-color:var(--mist);box-shadow:none;}
.card-dark h3{color:var(--white);}
.card-dark p{color:rgba(255,255,255,.68);}

/* ---------- Methodology steps ---------- */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;margin-top:64px;position:relative;}
.steps::before{content:'';position:absolute;top:21px;left:0;right:0;height:1px;background:var(--line);z-index:0;}
.step{position:relative;z-index:1;}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;
  margin-bottom:18px;font-family:var(--font-mono);font-size:.82rem;font-weight:500;
  background:var(--paper);border:1px solid var(--line);color:var(--fg-dim);
}
.step h4{font-size:.92rem;margin-top:0;text-transform:uppercase;letter-spacing:.04em;}
.step p{margin-top:10px;font-size:.82rem;color:var(--fg-dim);line-height:1.55;}
@media (max-width:960px){.steps{grid-template-columns:repeat(3,1fr);row-gap:40px;}.steps::before{display:none;}}
@media (max-width:640px){.steps{grid-template-columns:1fr 1fr;}}
@media (max-width:420px){.steps{grid-template-columns:1fr;}}

/* ---------- Methodology: branching timeline, GSAP-scrubbed ---------- */
/* A fixed-size box can't both (a) look exactly like every other stacked card and
   (b) auto-grow to hold extra invisible scroll room for the branch reveal — those two
   need opposite height behaviour on the same element. So #metodologia's own <section>
   stays the plain, auto-growing sticky anchor (uninvolved visually — no border, no
   background of its own), while .method-tl-frame is the one visible card, pinned to
   the exact same size as every sibling. .method-tl-spacer, a sibling of the frame
   inside that auto-growing section, is what actually delays Experiencia's arrival
   until after the reveal — entirely invisible, never touching the frame's own size. */
body.home #metodologia.section{
  border:none;background:#000;padding-block:0;
}
@media (max-width:640px){body.home #metodologia.section{border-radius:22px;}}
.method-tl-frame{
  position:relative;overflow:hidden;border-radius:32px;border:1px solid var(--line-on-dark);
  background:#000;padding-block:clamp(14px,1.6vw,24px);
  height:calc(100svh - var(--header-h,92px) - 44px);
}
@media (max-width:640px){.method-tl-frame{border-radius:22px;}}
.method-tl-spacer{height:500px;}
.method-tl-viewport{
  position:relative;z-index:1;height:100%;overflow:hidden;
}

/* The whole section is one horizontal filmstrip: the cover (photo+title) is stop 0,
   then 3 stops of 2 steps each — scrolling pans this track left, exactly like the
   site's original frame-by-frame carousel, just with 2 items per stop instead of 1.
   The spine + travelling tip dot are a single continuous stroke drawn across the
   WHOLE track (not per-stop), so the line keeps "navigating" right along with the pan. */
.method-tl-pan-track{
  position:relative;height:100%;width:300%;display:flex;
}
.method-tl-stop{
  flex:0 0 33.3334%;height:100%;min-width:0;box-sizing:border-box;
  display:flex;align-items:center;
  padding-left:clamp(16px,5vw,80px);padding-right:clamp(16px,4vw,56px);
}

/* Stop 0: the cover — big photo, big title, its own starting dot. Everything else
   branches off the line that starts right next to it. */
.method-tl-stop-cover{gap:clamp(40px,6vw,96px);}
.method-tl-intro-media{
  flex:0 0 auto;align-self:center;width:clamp(220px,30vw,420px);height:auto;
  max-height:82%;aspect-ratio:3/4;
  border-radius:24px;overflow:hidden;
}
.method-tl-intro-media img{width:100%;height:100%;object-fit:cover;display:block;}
.method-tl-intro-copy{
  flex:1;align-self:stretch;height:100%;
  display:flex;flex-direction:column;text-align:left;min-width:0;
}
.method-tl-intro-top{flex:1;display:flex;align-items:flex-end;min-height:0;}
.method-tl-intro-bottom{flex:1;display:flex;align-items:flex-start;min-height:0;}
.method-tl-intro-copy h2{font-size:clamp(2rem,1.8vw + 1.5rem,3.6rem);margin:0;line-height:1.1;}
.method-tl-intro-divider{display:flex;align-items:center;flex-shrink:0;margin:26px 0;}
.method-tl-intro-dot{width:13px;height:13px;border-radius:50%;background:var(--green-deep);flex-shrink:0;box-shadow:0 0 0 4px rgba(11,61,11,.1);}
.method-tl-intro-caption{
  font-family:var(--font-mono);font-size:.88rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-dim);margin:0;
}

/* The line itself: one spine spanning from the cover's dot to the last step's dot,
   positioned and sized in % of the track's own width so it pans — and keeps the right
   pixel math — together with everything else, regardless of the track's transform. */
.method-tl-spine{
  position:absolute;top:50%;height:1px;background:transparent;z-index:1;
}
.method-tl-spine-fill{
  position:absolute;left:0;top:0;width:100%;height:100%;
  background:var(--green-deep);transform:scaleX(0);transform-origin:0 50%;
}
.method-tl-tip-dot{
  position:absolute;top:50%;left:0;z-index:2;pointer-events:none;opacity:0;
  width:13px;height:13px;border-radius:50%;background:var(--green-deep);
  box-shadow:0 0 0 4px rgba(11,61,11,.1);transform:translate(-50%,-50%);
}

/* Stops 1-2: 3 steps each, zig-zagging above/below the spine. Each one is a flag: a
   bare stem rises/drops from the spine with no dot at its base, then the dot sits at
   the stem's tip where the text branches off to the right of it. */
.method-tl-stop-items{position:relative;justify-content:center;}
/* The branch's own box is a fixed size from frame one — it does NOT grow with the
   connector's animation the way it used to. That's what pinned the dot (and the text
   anchored to it) down: nothing sizes off the connector's current state anymore, so
   nothing can drag the dot along as the line draws. The connector itself is free to
   animate its real height exactly like before (0 to its full clamp value, anchored at
   the spine end) — it's simply no longer the thing the dot's position depends on. */
.method-tl-branch{
  position:absolute;left:0;
  height:calc(13px + clamp(130px,15vw,230px));
}
.method-tl-branch.is-below{height:calc(13px + clamp(70px,8vw,120px));}
.method-tl-branch.is-above{bottom:50%;}
.method-tl-branch.is-below{top:50%;}
.method-tl-branch:nth-child(1){left:14%;}
.method-tl-branch:nth-child(2){left:48%;}
.method-tl-branch:nth-child(3){left:68%;}
.method-tl-branch-connector{
  position:absolute;left:6px;width:1px;height:clamp(130px,15vw,230px);
  background:var(--green-deep);overflow:hidden;
}
.method-tl-branch.is-above .method-tl-branch-connector{bottom:0;}
.method-tl-branch.is-below .method-tl-branch-connector{top:0;height:clamp(70px,8vw,120px);}
/* Fixed at exactly the dot's own size and positioned independently of the connector —
   the card inside (title+paragraph, much taller) is already out of flow via its own
   absolute positioning below, so nothing here depends on how long the paragraph runs
   either. The 6.5px offset (half the dot's size) is what lines the dot's CENTER up
   with the connector's full-grown tip, instead of its near edge. */
.method-tl-branch-content{position:absolute;left:0;height:13px;}
.method-tl-branch.is-above .method-tl-branch-content{top:6.5px;}
.method-tl-branch.is-below .method-tl-branch-content{bottom:6.5px;}
.method-tl-branch-dot{
  display:block;width:13px;height:13px;border-radius:50%;background:var(--green-deep);flex-shrink:0;
  box-shadow:0 0 0 4px rgba(11,61,11,.1);
}
.method-tl-branch-card{position:absolute;left:27px;top:0;min-width:0;text-align:left;width:clamp(190px,19vw,280px);}
.method-tl-branch:nth-child(3) .method-tl-branch-card{width:clamp(170px,14vw,220px);}
.method-tl-num{
  display:inline-block;overflow:hidden;line-height:1;
  font-family:var(--font-mono);font-size:.86rem;font-weight:500;
  color:var(--green-deep);letter-spacing:.04em;margin-bottom:8px;
}
.method-tl-branch-card h4{overflow:hidden;font-size:1.55rem;margin:0;text-transform:uppercase;letter-spacing:.04em;}
.method-tl-branch-card p{
  overflow:hidden;margin-top:10px;font-size:1.05rem;color:var(--fg-dim);line-height:1.5;
  max-width:34ch;
}
/* The text never moves — not the card, not these rows either. Each row reveals purely
   by its own clip edge opening left to right, one row after another (number, then
   title, then paragraph), with the text sitting still in its final spot throughout. */
.method-tl-row-inner{display:block;clip-path:inset(0 100% 0 0);}

body.home .section-dark .method-tl-intro-copy h2{color:#fff;}
body.home .section-dark .method-tl-intro-caption{color:rgba(255,255,255,.55);}

body.home .section-dark .method-tl-intro-dot{background:#55756a;box-shadow:0 0 0 4px rgba(85,117,106,.16);}
body.home .section-dark .method-tl-tip-dot{background:#55756a;box-shadow:0 0 0 4px rgba(85,117,106,.16);}
body.home .section-dark .method-tl-spine-fill{background:#55756a;}
body.home .section-dark .method-tl-branch-dot{background:#55756a;box-shadow:0 0 0 4px rgba(85,117,106,.16);}
body.home .section-dark .method-tl-branch-connector{background:#55756a;}
body.home .section-dark .method-tl-num{color:#55756a;}
body.home .section-dark .method-tl-branch-card h4{color:#fff;}
body.home .section-dark .method-tl-branch-card p{color:rgba(255,255,255,.6);}

@media (prefers-reduced-motion:reduce){
  .method-tl-row-inner{clip-path:none;}
}

@media (max-width:760px){
  .method-tl-pan-track{display:block;width:auto;height:auto;position:relative;}
  .method-tl-stop{display:block;width:100%;height:auto;padding:0;}
  .method-tl-stop-cover{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:0 clamp(16px,5vw,32px) 8px;}
  .method-tl-intro-media{width:100%;max-width:260px;height:200px;}
  .method-tl-intro-copy{height:auto;}
  .method-tl-intro-top,.method-tl-intro-bottom{flex:0 0 auto;}
  .method-tl-stop-items{min-height:0;padding:0 clamp(16px,5vw,32px);}

  /* The desktop horizontal spine, rotated: one vertical stroke centered between the two
     columns of branches, spanning from the first item's dot to the last. It rides the
     page's own scroll directly (see methodology-timeline.js's setupMobile) instead of
     the desktop version's hijacked horizontal pan, so no pin/spacer is needed here. */
  .method-tl-spine{
    display:block;position:absolute;left:50%;top:0;width:2px;height:0;
    margin-left:-1px;background:transparent;z-index:1;
  }
  .method-tl-spine-fill{transform-origin:50% 0%;}
  .method-tl-tip-dot{display:block;left:50%;top:0;}

  /* Desktop has .method-tl-branch.is-above/.is-below rules (branch height, top/bottom
     positioning) that out-specificity a plain .method-tl-branch override — every one of
     those compound selectors needs to be repeated here, at matching specificity, or
     desktop's absolute-positioning values keep winning underneath the mobile layout. */
  .method-tl-branch,
  .method-tl-branch.is-above,
  .method-tl-branch.is-below,
  .method-tl-branch:nth-child(1),
  .method-tl-branch:nth-child(2),
  .method-tl-branch:nth-child(3){
    position:relative;opacity:1;width:100%;height:auto;margin-top:34px;
    top:auto;bottom:auto;left:auto;right:auto;
  }
  .method-tl-stop-cover + .method-tl-stop-items .method-tl-branch:first-child{margin-top:40px;}

  /* Two equal columns give the dot an exact 50% center to sit on; the card lands in
     whichever column matches its side (is-above → left, is-below → right — the same
     alternation desktop uses for above/below the horizontal spine), and the connector
     is an absolutely positioned stub growing from center out to the dot, same real-width
     growth technique as the desktop connector's real-height growth. */
  .method-tl-branch-content,
  .method-tl-branch.is-above .method-tl-branch-content,
  .method-tl-branch.is-below .method-tl-branch-content{
    position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:start;
    height:auto;margin:0;min-height:13px;top:auto;bottom:auto;
  }
  .method-tl-branch-dot{position:absolute;top:0;left:50%;transform:translateX(-50%);}
  .method-tl-branch-connector,
  .method-tl-branch.is-above .method-tl-branch-connector,
  .method-tl-branch.is-below .method-tl-branch-connector{
    display:block;position:absolute;top:6px;bottom:auto;height:1px;width:0;
    background:var(--green-deep);overflow:hidden;
  }
  .method-tl-branch.is-above .method-tl-branch-connector{right:50%;left:auto;}
  .method-tl-branch.is-below .method-tl-branch-connector{left:50%;}

  .method-tl-branch-card{position:relative;text-align:left;width:auto;}
  .method-tl-branch.is-above .method-tl-branch-card{grid-column:1;padding-right:24px;}
  .method-tl-branch.is-below .method-tl-branch-card{grid-column:2;padding-left:24px;}
  .method-tl-branch-card p{max-width:none;}

  .method-tl-num{font-size:.68rem;margin-bottom:6px;}
  .method-tl-branch-card h4{font-size:1rem;}
  .method-tl-branch-card p{font-size:.78rem;line-height:1.45;margin-top:8px;}
}

/* ---------- Stats row ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px;}
.stat{padding:26px 24px;border:1px solid var(--line);border-radius:18px;transition:transform .4s var(--ease),border-color .4s ease,box-shadow .4s ease;}
.stat:hover{transform:translateY(-3px);}
.stat-num{font-family:var(--font-display);font-size:clamp(1.8rem,2vw + 1rem,2.6rem);font-weight:700;color:var(--green-deep);}
.stat-label{margin-top:8px;font-size:.84rem;color:var(--fg-dim);line-height:1.5;}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr;}}

/* ---------- Home: "one system" section ---------- */
.system-section{
  position:relative;overflow:hidden;margin-inline:24px;border-radius:32px;
  border:1px solid var(--line-on-dark);
  background:linear-gradient(180deg,rgba(11,61,11,.24) 0%,rgba(11,61,11,.1) 30%,rgba(31,31,31,0) 55%),#000000;
  padding-top:clamp(16px,2vw,32px);padding-bottom:clamp(20px,2.5vw,36px);
}
.system-section .wrap{position:relative;z-index:1;}

/* Every screen shares the same rounded-card look. section-final-cta is the
   last screen on the page and deliberately doesn't pin (see the sticky rule
   below): it just rises into view via main.js's scale treatment, then keeps
   scrolling normally past that point like regular content, instead of locking
   in place. section-experience DOES still pin, same as every screen before it
   — without that dwell it swept past its own "covering Metodología" position
   in a single frame instead of parking there, so Metodología could still peek
   out above it for a moment. Sticky's own release (once its content has fully
   scrolled past) already hands off to section-final-cta at a normal 1:1 scroll
   speed on its own — no separate un-pinning needed for that part. */
/* This pinned-stack mechanic is the homepage's own scrollytelling device (paired with
   main.js's scale-on-scroll), not a general page pattern — scoped to .home-stack
   (index.html only) so other dark pages scroll normally instead of pinning every
   section into a single-viewport card. */
body.home.home-stack main > .section{
  overflow:hidden;
  transform-origin:50% 0%;will-change:transform;
}
body.home.home-stack main > .section:not(.section-final-cta){
  min-height:calc(100svh - var(--header-h,92px) - 44px);
}
body.home.home-stack main > .section:not(.section-final-cta){
  margin-inline:24px;border-radius:32px;border:1px solid var(--line-on-dark);
}
@media (max-width:640px){
  body.home.home-stack main > .section:not(.section-final-cta){margin-inline:12px;border-radius:22px;}
}
/* Every screen pins while scrolling except section-final-cta (see comment above). */
body.home.home-stack main > .section:not(.section-final-cta){
  position:sticky;top:calc(var(--header-h,92px) + 20px);
}
/* The grow-in SCALE is desktop-only (main.js gates it off below 761px) since it's tuned
   around short, single-viewport content — but the sticky "rises and docks where the
   previous screen was" stacking itself is exactly what mobile should keep too. The only
   thing that actually broke on mobile was the forced viewport-height min-height: text
   wraps onto far more lines there, so a section's real content routinely exceeded that
   box, and the next section started pinning in before the previous one had actually
   finished — producing the overlap. Dropping just the min-height (content sizes itself
   naturally) while keeping position:sticky lets the browser's own sticky stacking handle
   variable-height sections correctly: each one pins at the same top until its own
   content has scrolled past, then the next one takes over and covers it, no JS needed. */
@media (max-width:760px){
  body.home.home-stack main > .section:not(.section-final-cta){
    min-height:0;overflow:visible;transform:none !important;
  }
  /* #metodologia is pinned by GSAP itself now (see methodology-timeline.js's
     setupMobile), not CSS position:sticky — GSAP's pin duration and the internal
     pan/cascade's own [start, end] are the exact same number, which CSS's own
     independently-computed sticky duration never quite matched (it kept releasing the
     section early, cutting the cascade off mid-item regardless of spacer height).
     Leaving this as position:sticky too would just pin it twice over, fighting GSAP's
     own fixed-position pin. */
  body.home.home-stack main > #metodologia.section{
    position:static;
  }
}
/* Desktop: the frame is the sticky card inside a plain-scrolling #metodologia, so it
   stays put until Experiencia (pulled up over the spacer by methodology-timeline.js)
   has fully covered it. overflow:clip, not hidden — hidden would make the section a
   scroll container and break the frame's sticky. */
@media (min-width:761px){
  body.home.home-stack main > #metodologia.section{position:relative;overflow:clip;display:flow-root;}
  body.home.home-stack #metodologia .method-tl-frame{position:sticky;top:calc(var(--header-h,92px) + 20px);}
}
body.home .section-experience{background:#000000;}
/* Final screen: no card container at all — edge-to-edge, square, solid black,
   not the rounded floating-card look every other screen shares. */
body.home .section-final-cta{
  background:#000;position:relative;
  margin-inline:0;border-radius:0;border:none;
  padding-block:clamp(24px,4vw,48px);
}
body.home .site-footer{position:relative;z-index:3;}


.section-pulse{
  position:absolute;top:0;left:24px;right:24px;height:1px;z-index:3;
  background:rgba(255,255,255,.08);pointer-events:none;
}
.section-pulse::before{
  content:'';position:absolute;top:50%;left:-14%;width:16%;height:1px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,#55756a 35%,#dfe5e2 50%,#55756a 65%,transparent);
  box-shadow:0 0 14px 3px rgba(85,117,106,.75),0 0 2px 1px rgba(223,229,226,.9);
  opacity:0;
}
@media (prefers-reduced-motion:no-preference){
  .section-pulse.is-visible::before{animation:sectionPulseSweep 1.3s .15s cubic-bezier(.3,.85,.25,1) forwards;}
}
@media (prefers-reduced-motion:reduce){
  .section-pulse.is-visible::before{opacity:.5;left:40%;}
}
@keyframes sectionPulseSweep{
  0%{left:-14%;opacity:0;}
  12%{opacity:1;}
  88%{opacity:1;}
  100%{left:102%;opacity:0;}
}
.system-section .system-title{
  font-family:var(--font-display);font-weight:500;color:rgba(255,255,255,.48);
  font-size:clamp(1.9rem,2.6vw + 1rem,3.4rem);line-height:1.16;letter-spacing:-.01em;
  max-width:900px;
}
.system-section .system-title strong{
  font-weight:800;color:#fff;
  background:linear-gradient(100deg,#fff 30%,#dfe5e2 45%,#fff 60%);
  background-size:260% 100%;background-position:160% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
@media (prefers-reduced-motion:no-preference){
  .system-section .system-title.is-visible strong{
    animation:titleShimmer 1.8s ease-out .4s 1 forwards;
  }
}
@keyframes titleShimmer{
  0%{background-position:160% 0;}
  100%{background-position:-40% 0;}
}
.system-intro{margin-top:64px;margin-left:auto;max-width:600px;display:flex;flex-direction:column;gap:14px;}
.system-intro p{color:rgba(255,255,255,.7);font-size:clamp(.95rem,.3vw + .85rem,1.08rem);line-height:1.55;text-align:justify;text-justify:inter-word;}

.system-section .btn{padding:10px 20px;font-size:.76rem;}

/* ---------- Process list + holographic preview ---------- */
.process-grid{
  display:grid;grid-template-columns:minmax(180px,230px) minmax(230px,340px);
  width:fit-content;max-width:100%;gap:clamp(18px,3vw,32px);margin-top:-104px;align-items:stretch;
}

.process-list{display:flex;flex-direction:column;transform:translateY(34px);}
.process-item{
  all:unset;position:relative;display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:11px 4px;border-top:1px solid rgba(255,255,255,.1);
  transition:padding-left .3s var(--ease);
}
.process-item:last-child{border-bottom:1px solid rgba(255,255,255,.1);}
.process-item::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:#55756a;
  transform:scaleY(0);transform-origin:center;transition:transform .3s var(--ease);
}
.process-item-num{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.02em;
  color:rgba(255,255,255,.32);transition:color .3s ease;flex:0 0 auto;
}
.process-item-title{
  font-family:var(--font-display);font-weight:800;font-size:1rem;
  color:rgba(255,255,255,.52);letter-spacing:-.01em;transition:color .3s ease;flex:1 1 auto;min-width:0;
}
.process-item-arrow{
  width:13px;height:13px;flex:0 0 auto;color:#55756a;opacity:0;transform:translate(-4px,4px);
  transition:opacity .3s ease,transform .3s var(--ease);
}
.process-item:hover .process-item-title,.process-item.is-active .process-item-title{color:#fff;}
.process-item:hover .process-item-num,.process-item.is-active .process-item-num{color:#55756a;}
.process-item.is-active{padding-left:10px;}
.process-item.is-active::before{transform:scaleY(1);}
.process-item.is-active .process-item-arrow{opacity:1;transform:translate(0,0);}
.process-item-panel{display:none;}

.process-stage{position:relative;min-height:255px;}
.process-holo{
  position:absolute;left:0;right:0;top:var(--holo-top,0px);height:190px;z-index:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  border-radius:16px;overflow:hidden;
  background:
    radial-gradient(120% 140% at 85% 0%,rgba(85,117,106,.1),transparent 60%),#000000;
  border:1px solid transparent;
  opacity:0;transform:scale(.94);
  transition:opacity .4s ease,border-color .4s ease,top .5s var(--ease),transform .6s var(--ease);
  pointer-events:none;
}
.process-holo.is-active{
  opacity:1;transform:scale(1);border-color:rgba(85,117,106,.16);
  animation:holoFlicker .7s ease both;
}
.process-holo-img{
  position:absolute;inset:0;
  background-image:
    linear-gradient(180deg,rgba(31,31,31,.1) 0%,rgba(31,31,31,.4) 55%,rgba(31,31,31,.95) 100%),
    linear-gradient(140deg,rgba(85,117,106,.3),rgba(31,31,31,.1) 60%),
    var(--img);
  background-size:auto,auto,185%;background-position:center,center,center;
  filter:saturate(.35) brightness(.95) contrast(1.08);
  opacity:.78;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(95% 95% at 50% 42%,#000 72%,transparent 100%);
  mask-image:radial-gradient(95% 95% at 50% 42%,#000 72%,transparent 100%);
}
.process-holo-scan{
  position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:overlay;
  -webkit-mask-image:radial-gradient(95% 95% at 50% 42%,#000 72%,transparent 100%);
  mask-image:radial-gradient(95% 95% at 50% 42%,#000 72%,transparent 100%);
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.08) 0px,rgba(255,255,255,.08) 1px,transparent 2px,transparent 4px);
  animation:holoScan 5s linear infinite;
}
.process-holo-num{
  position:relative;z-index:2;font-family:var(--font-display);font-weight:800;color:rgba(255,255,255,.55);
  font-size:2.2rem;line-height:1;padding:14px 16px 2px;text-shadow:0 0 18px rgba(85,117,106,.5);
}
.process-holo-desc{
  position:relative;z-index:2;margin:0;padding:4px 16px 16px;max-width:85%;
  font-size:.78rem;line-height:1.45;color:rgba(255,255,255,.85);
}
@keyframes holoScan{0%{background-position:0 0;}100%{background-position:0 48px;}}
@keyframes holoFlicker{
  0%{opacity:0;}
  8%{opacity:.5;}
  16%{opacity:.08;}
  24%{opacity:.7;}
  36%{opacity:.2;}
  50%{opacity:1;}
  62%{opacity:.6;}
  100%{opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .process-holo-scan{animation:none;}
  .process-holo.is-active{animation:none;}
}
@media (max-width:860px){
  .system-intro{margin-left:0;max-width:100%;}
  .system-intro p{text-align:left;}
  .process-grid{grid-template-columns:1fr;}
  .process-stage{min-height:240px;order:-1;}
}

/* Shared rotating glow-ring effect — a travelling conic-gradient masked down to just the
   border, same mask-composite:exclude trick the desktop tilt cards already use for their
   cursor glow. Reused by both mobile accordions/carousels below instead of redefined per
   component. */
@property --glow-angle{syntax:'<angle>';inherits:false;initial-value:0deg;}
@keyframes glowSpin{to{--glow-angle:360deg;}}

/* Below 760px, hover isn't a thing, so the list+preview split pane becomes a tap
   accordion instead: the list stays a list, and tapping an item expands a small panel
   right underneath it — photo beside the description — instead of a separate stage
   nobody can hover into. */
@media (max-width:760px){
  .process-grid{margin-top:0;}
  .process-stage{display:none;}
  .process-list{display:block;}
  .process-item{width:100%;}
  .process-item-panel{
    display:flex;gap:14px;align-items:center;overflow:hidden;
    max-height:0;opacity:0;padding:0 4px;margin:0;
    transition:max-height .45s var(--ease),opacity .35s ease,padding .45s var(--ease);
  }
  .process-item[aria-expanded="true"] + .process-item-panel{
    max-height:170px;opacity:1;padding:12px 4px 20px;
  }
  .process-item-panel-img{
    flex:0 0 auto;width:92px;height:92px;border-radius:12px;overflow:hidden;
    background-image:linear-gradient(140deg,rgba(85,117,106,.25),rgba(31,31,31,.08) 65%),var(--img);
    background-size:cover;background-position:center;
  }
  .process-item-panel p{margin:0;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.72);}
  .process-item[aria-expanded="true"]{padding-left:10px;}
  .process-item[aria-expanded="true"]::before{transform:scaleY(1);}
  .process-item[aria-expanded="true"] .process-item-title{color:#fff;}
  .process-item[aria-expanded="true"] .process-item-num{color:#55756a;}
  .process-item[aria-expanded="true"] .process-item-arrow{opacity:1;transform:translate(0,0) rotate(90deg);}
}

/* Servicios' 4 cards become the swipeable/auto-advancing carousel instead — same
   mechanic as the process accordion's sibling feature, built by createMobileCardCarousel
   in main.js. */
@media (max-width:760px){
  .section-mist .grid-2{
    display:flex;gap:14px;margin-top:20px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 10px;
  }
  .section-mist .grid-2::-webkit-scrollbar{display:none;}
  .section-mist .grid-2 .card{
    flex:0 0 82%;scroll-snap-align:center;position:relative;
    transition:transform .4s var(--ease),opacity .4s ease,box-shadow .4s ease;
  }
  .section-mist .grid-2.has-expanded .card:not(.is-expanded){opacity:.4;transform:scale(.94);}
  .section-mist .grid-2 .card.is-expanded{transform:scale(1.045);box-shadow:0 24px 48px -18px rgba(0,0,0,.75);z-index:2;}
  .section-mist .grid-2 .card-glow{
    display:block;position:absolute;inset:0;z-index:3;pointer-events:none;
    border-radius:inherit;padding:1.5px;opacity:0;transition:opacity .4s ease;
    background:conic-gradient(from var(--glow-angle,0deg),transparent 0%,#55756a 18%,#dfe5e2 27%,#55756a 36%,transparent 55%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
  }
  .section-mist .grid-2 .card.is-expanded .card-glow{opacity:1;}
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .section-mist .grid-2 .card.is-expanded .card-glow{animation:glowSpin 2.6s linear infinite;}
}

.system-tagstrip{margin-top:28px;padding-block:12px;border-color:var(--line-on-dark);}

/* ---------- Service family blocks ---------- */
.family{padding-block:44px;border-top:1px solid var(--line);}
.family:first-of-type{border-top:0;}
.family-head{display:grid;grid-template-columns:260px 1fr;gap:40px;}
.family-head h3{font-size:1.3rem;}
.family-tag{font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);}
.family-list{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;}
.family-list li{padding-left:22px;position:relative;font-size:.96rem;color:var(--graphite);line-height:1.5;}
.family-list li::before{content:'';position:absolute;left:0;top:.6em;width:10px;height:1px;background:var(--green-deep);}
@media (max-width:760px){.family-head{grid-template-columns:1fr;gap:16px;}.family-list{grid-template-columns:1fr;}}

/* ---------- Certification accordion ---------- */
.cert-item{border-top:1px solid var(--line);}
.cert-item:last-child{border-bottom:1px solid var(--line);}
.cert-q{width:100%;background:none;border:0;padding:24px 4px;display:flex;align-items:center;justify-content:space-between;
  gap:20px;cursor:pointer;text-align:left;font-family:var(--font-display);font-size:1.02rem;font-weight:700;color:var(--ink);}
.cert-q svg{flex:0 0 auto;width:16px;height:16px;transition:transform .35s var(--ease);color:var(--green-deep);}
.cert-item[open] .cert-q svg{transform:rotate(45deg);}
.cert-a{padding:0 4px 26px;color:var(--fg-dim);font-size:.96rem;line-height:1.65;max-width:68ch;}
.cert-a ul{margin:12px 0 0;padding-left:20px;}
.cert-a li{margin-bottom:6px;}

/* ---------- Project cards ---------- */
.project-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white);
  transition:transform .4s var(--ease),box-shadow .4s ease;}
.project-card:hover{transform:translateY(-4px);box-shadow:0 24px 44px -28px rgba(31,31,31,.28);}
.project-visual{aspect-ratio:16/10;background:linear-gradient(135deg,var(--mist),var(--white));position:relative;overflow:hidden;}
.project-visual svg{position:absolute;inset:0;width:100%;height:100%;}
.project-body{padding:24px 26px 28px;}
.project-tag{font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);}
.project-card h3{font-size:1.1rem;margin-top:10px;}
.project-card p{margin-top:10px;font-size:.9rem;color:var(--fg-dim);line-height:1.55;}

/* ---------- Form ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field.full{grid-column:1 / -1;}
.field label{font-family:var(--font-display);font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--graphite);}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:1rem;padding:13px 14px;border:1px solid var(--line);border-radius:8px;
  background:var(--white);color:var(--ink);transition:border-color .25s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green-deep);}
.field textarea{resize:vertical;min-height:120px;}
.form-note{margin-top:14px;font-size:.82rem;color:var(--fg-faint);}
.form-status{margin-top:18px;font-size:.9rem;font-weight:600;}
.form-status[data-state="ok"]{color:var(--green-deep);}
.form-status[data-state="error"]{color:#a33;}

.contact-side{display:grid;gap:22px;}
.contact-channel{display:flex;align-items:flex-start;gap:16px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);}
.contact-channel svg{flex:0 0 auto;width:20px;height:20px;color:var(--green-deep);margin-top:2px;}
.contact-channel h4{font-size:.95rem;}
.contact-channel p{margin-top:6px;font-size:.88rem;color:var(--fg-dim);}
.contact-channel a{color:var(--green-deep);text-decoration:none;font-weight:600;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink);color:var(--white);border-radius:24px;padding:clamp(40px,6vw,72px);
  display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;position:relative;overflow:hidden;}
.cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(11,61,11,.45),transparent 60%);}
.cta-band > *{position:relative;z-index:1;}
.cta-band h2{font-size:clamp(1.5rem,1.8vw + 1rem,2.2rem);max-width:18ch;}
.cta-band-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.82);padding-block:clamp(48px,6vw,80px) 28px;}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line-on-dark);}
.footer-logo{height:26px;width:auto;}
.footer-tagline{margin-top:16px;font-size:.85rem;color:rgba(255,255,255,.5);max-width:26ch;}
.footer-col h5{font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:16px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer-col a{font-size:.88rem;color:rgba(255,255,255,.78);text-decoration:none;}
.footer-col a:hover{color:var(--white);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:24px;font-size:.78rem;color:rgba(255,255,255,.45);}
.footer-bottom a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
@media (max-width:860px){.footer-top{grid-template-columns:1fr 1fr;}}
@media (max-width:540px){.footer-top{grid-template-columns:1fr;}}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px) scale(.97);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.is-visible{opacity:1;transform:none;}
.reveal-d1{transition-delay:.08s;}
.reveal-d2{transition-delay:.16s;}
.reveal-d3{transition-delay:.24s;}
.reveal-d4{transition-delay:.32s;}
.reveal-d5{transition-delay:.40s;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:opacity .3s ease;}}
noscript .reveal,html.no-js .reveal{opacity:1;transform:none;}

/* ---------- Animated liquid-texture backgrounds (brandbook "superficies dinámicas") ---------- */
.bg-liquid{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.bg-liquid img,.bg-liquid video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform-origin:center center;
  animation:bgPan 32s var(--ease-inout,ease-in-out) infinite alternate;will-change:transform;
}
.bg-liquid::after{content:'';position:absolute;inset:0;}
@keyframes bgPan{
  0%{transform:scale(1.01) translate3d(0,0,0);}
  100%{transform:scale(1.06) translate3d(-1%,-.6%,0);}
}
@media (prefers-reduced-motion:reduce){.bg-liquid img,.bg-liquid video{animation:none;}}
.system-bg{
  inset:auto 0 auto 0;top:0;height:min(340px,42vw);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 92%);
  mask-image:linear-gradient(to bottom,#000 0%,transparent 92%);
}
.system-bg img{
  opacity:.6;filter:brightness(.68) contrast(1.04) saturate(.9);
  transition:filter .4s ease;
  object-fit:cover;object-position:center 18%;
}
.system-bg::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(40% 50% at 92% 3%,rgba(85,117,106,.18),transparent 68%),
    radial-gradient(45% 60% at 6% 96%,rgba(11,61,11,.14),transparent 60%);
  mix-blend-mode:overlay;
}
.system-bg::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background-image:url(assets/liquid-mono.jpg?v=2);background-size:cover;background-position:center;
  -webkit-mask-image:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),#000 0%,#000 55%,transparent 100%);
  mask-image:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),#000 0%,#000 55%,transparent 100%);
  transition:opacity .5s ease;
}
@media (hover:hover) and (pointer:fine){
  .system-section:hover .system-bg::after{opacity:1;}
}

.liquid-hero{position:relative;overflow:hidden;color:var(--white);
  padding-top:clamp(64px,9vw,108px);padding-bottom:clamp(56px,7vw,88px);background:var(--ink);}
.liquid-hero .bg-liquid{opacity:.55;}
.liquid-hero .bg-liquid::after{background:linear-gradient(165deg,rgba(31,31,31,.92) 0%,rgba(11,61,11,.85) 55%,rgba(31,31,31,.95) 100%);}
.liquid-hero .hero-grid{position:absolute;inset:0;opacity:.28;z-index:1;
  background-image:linear-gradient(var(--line-on-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-on-dark) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 60% at 75% 25%,#000 40%,transparent 85%);}
.liquid-hero .wrap{position:relative;z-index:2;}
.liquid-hero h1{font-size:clamp(2.1rem,2.7vw + 1rem,3.4rem);margin-top:18px;}
.liquid-hero .hero-sub{margin-top:18px;max-width:58ch;color:rgba(255,255,255,.76);}

.cta-band.liquid-cta{background:var(--ink);}
.cta-band.liquid-cta .bg-liquid{opacity:.5;}
.cta-band.liquid-cta .bg-liquid::after{background:linear-gradient(135deg,rgba(31,31,31,.88),rgba(11,61,11,.8));}

/* ---------- Header scroll state ---------- */
.site-header{transition:box-shadow .35s ease,border-color .35s ease;}
.site-header.is-scrolled{box-shadow:0 8px 24px -16px rgba(31,31,31,.18);}

/* ---------- Magnetic buttons ---------- */
[data-magnetic]{transition:transform .35s var(--ease);}

/* ---------- Card tilt glow ---------- */
.card[data-tilt],.project-card[data-tilt]{position:relative;}
.card[data-tilt]::before,.project-card[data-tilt]::before{
  content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(11,61,11,.12),transparent 70%);
  transition:opacity .4s ease;z-index:0;
}
.card[data-tilt]:hover::before,.project-card[data-tilt]:hover::before{opacity:1;}
.card[data-tilt] > *,.project-card[data-tilt] > *{position:relative;z-index:1;}

/* ---------- Count-up stats ---------- */
.stat-num[data-count]{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.stat-num[data-count].is-visible{opacity:1;transform:none;}

/* ---------- Parallax spark ---------- */
.hero-spark,.liquid-hero .hero-spark{transition:transform .6s cubic-bezier(.33,1,.68,1);}

/* ---------- Marquee (service tag strip) ---------- */
.tag-strip{overflow:hidden;border-top:1px solid var(--line-on-dark);border-bottom:1px solid var(--line-on-dark);padding-block:18px;margin-top:48px;}
.tag-track{display:flex;gap:48px;width:max-content;animation:tagScroll 26s linear infinite;}
.tag-track span{font-family:var(--font-display);font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap;}
.tag-track span::after{content:'—';margin-left:48px;color:rgba(255,255,255,.25);}
@keyframes tagScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.tag-track{animation:none;}}

/* ---------- Breadcrumb-ish page eyebrow ---------- */
.ecosystem-note{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:rgba(255,255,255,.55);margin-top:28px;}
.ecosystem-note a{color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:3px;}

/* ======================================================================
   HOME HERO — boceto-specific variant (Inicio only, scoped under body.home)
   ====================================================================== */
body.home{background:#000;}
.home-shell{padding:0 24px 24px;}
.hero-fixed-bg{
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#000;
}
.hero-fixed-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Background video, never a player: hide Safari's native play button if autoplay gets
   refused — the poster stays visible behind it. */
.hero-fixed-bg video::-webkit-media-controls,
.hero-fixed-bg video::-webkit-media-controls-start-playback-button,
.hero-fixed-bg video::-webkit-media-controls-overlay-play-button{display:none !important;-webkit-appearance:none;opacity:0;}
.home-shell-spacer{display:none;}
body.home main{position:relative;z-index:2;}

.home-header{
  position:fixed;top:0;left:0;right:0;z-index:50;background:#000;
}
.home-header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 32px;max-width:1400px;margin:0 auto;
}
.home-header-spacer{display:block;}
.home-logo-m{position:relative;display:block;flex:0 0 auto;}
.home-logo-m img{height:30px;width:auto;display:block;}
.home-logo-spark{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  -webkit-mask-image:url(assets/logo-m-light.png);mask-image:url(assets/logo-m-light.png);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:left center;mask-position:left center;
  background-repeat:no-repeat;background-size:250% 100%;background-position:160% 0;
  background-image:linear-gradient(115deg,transparent 36%,#55756a 45%,#fff 50%,#55756a 55%,transparent 64%);
}
.home-logo-m.is-sparking .home-logo-spark{animation:logoSpark 1.3s linear infinite;}
@keyframes logoSpark{
  0%{background-position:160% 0;opacity:0;}
  6%{opacity:1;}
  55%{opacity:1;}
  70%{background-position:-60% 0;opacity:0;}
  100%{background-position:-60% 0;opacity:0;}
}
@media (prefers-reduced-motion:reduce){.home-logo-spark{display:none;}}
.home-nav-pill{
  display:flex;align-items:center;gap:30px;
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:14px 30px;
}
.home-nav-pill a{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.72);text-decoration:none;transition:color .3s ease;
}
.home-nav-pill a:hover{color:#fff;}
.home-nav-pill a[aria-current="page"]{color:#fff;}
.home-contact-btn{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  background:#3a3a3a;color:#fff;padding:15px 28px;border-radius:999px;text-decoration:none;white-space:nowrap;
  transition:background .3s ease;flex:0 0 auto;
}
.home-contact-btn:hover{background:#3a3a3a;}
/* Cotizador: the header's call to action, in brand sage */
.home-quote-btn{
  background:#55756a;color:#fff;border:1px solid #55756a;
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.06em;
  padding:16px 26px;line-height:normal;transition:background .3s ease,box-shadow .3s ease;
}
@media (max-width:1080px){.home-quote-btn{padding:14px 22px;}}
.home-quote-btn:hover,.home-quote-btn[aria-current="page"]{background:#0B3D0B;box-shadow:0 0 0 1px #55756a;}
.home-nav-toggle{display:none;}
.home-nav-toggle span{background:#fff;}
.main-nav{display:none;}
/* Six links in the pill: tighten it before the hamburger takes over at 860px */
@media (max-width:1080px){
  .home-nav-pill{gap:16px;padding:12px 20px;}
  .home-header-inner{padding-inline:24px;}
}
@media (max-width:860px){
  .home-nav-pill,.home-contact-btn{display:none;}
  .home-nav-toggle{display:block;}
  .main-nav{display:flex;}
}

.hero-card{
  position:relative;
  max-width:1400px;margin:0 auto;height:calc(100svh - 110px);min-height:520px;max-height:920px;
}
.hero-card-inner{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,4vw,64px);
}
.hero-card-content{display:flex;flex-direction:column;align-items:flex-start;gap:22px;max-width:1180px;}
.hero-card-title{
  font-family:var(--font-display);color:#dfe5e2;font-weight:600;text-transform:uppercase;
  font-size:clamp(1.9rem,3vw + .9rem,4.1rem);line-height:1.08;letter-spacing:-.01em;
}
.hero-card-title strong{color:#fff;font-weight:800;}
.hero-card-title-light{color:#fff;font-weight:600;}
.hero-card-text{
  font-family:Arial,Helvetica,sans-serif;color:rgba(255,255,255,.8);
  font-size:clamp(.95rem,.3vw + .85rem,1.08rem);line-height:1.55;max-width:560px;
  text-shadow:0 2px 16px rgba(0,0,0,.45);
}
.hero-card-cta{
  font-family:var(--font-mono);font-size:.78rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:12px;
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);
  padding:16px 26px;border-radius:999px;text-decoration:none;white-space:nowrap;
  transition:transform .35s var(--ease),background .3s ease,color .3s ease,border-color .3s ease;
}
.hero-card-cta svg{width:16px;height:16px;flex:0 0 auto;}
.hero-card-cta:hover{background:#fff;color:#1f1f1f;border-color:#fff;}
.hero-card-logo{
  position:absolute;right:clamp(28px,4vw,64px);bottom:clamp(28px,4vw,64px);
  height:clamp(30px,2.6vw,42px);width:auto;max-width:none;filter:drop-shadow(0 2px 10px rgba(0,0,0,.4));
}

@media (max-width:640px){
  .home-shell{padding:0 12px 12px;}
  .home-header-inner{padding:18px 16px;}
  .hero-card{height:calc(100svh - 90px);min-height:560px;}
  .hero-card-inner{padding:24px;}
  .hero-card-content{max-width:100%;}
  .hero-card-cta{width:100%;justify-content:center;}
}

/* ---------- HOME: dark theme for every section below the hero (body stays black) ---------- */
body.home{color:#fff;}
body.home h2{color:#fff;}
body.home main p{color:rgba(255,255,255,.72);}
body.home .section-head p{color:rgba(255,255,255,.66);}
body.home .eyebrow{color:#55756a;}
body.home .eyebrow::before{background:#55756a;}
body.home .card-link{color:#55756a;}
body.home .card-link:hover{color:#dfe5e2;}


body.home .section-mist{
  background:radial-gradient(1100px 560px at 12% 0%,rgba(85,117,106,.06),transparent 60%),#1f1f1f;
}

/* Compact every stacked screen so it shows fully on one viewport, like the system
   section — only relevant to the pinned-stack mechanic (see .home-stack above), so it
   stays scoped there instead of shrinking normal-scrolling dark pages too. */
body.home.home-stack .section-mist,
body.home.home-stack .section-dark,
body.home.home-stack .section-experience{padding-block:clamp(14px,1.6vw,24px);}

body.home.home-stack .section-mist .section-head p,
body.home.home-stack .section-experience .section-head p,
body.home.home-stack .section-dark .section-head p{font-size:.84rem;margin-top:8px;line-height:1.45;}
body.home.home-stack .section-mist .section-head h2,
body.home.home-stack .section-experience .section-head h2,
body.home.home-stack .section-dark .section-head h2{font-size:clamp(1.4rem,1.3vw + .8rem,1.9rem);margin-top:8px;}


body.home.home-stack .section-mist .grid-2{margin-top:14px;gap:14px;}
body.home.home-stack .section-experience .grid-3{margin-top:14px;gap:14px;}
body.home.home-stack .section-mist .card,
body.home.home-stack .section-experience .card{padding:16px 18px;}
body.home.home-stack .section-mist .card h3,
body.home.home-stack .section-experience .card h3{font-size:.96rem;margin-top:8px;}
body.home.home-stack .section-mist .card p,
body.home.home-stack .section-experience .card p{font-size:.8rem;line-height:1.45;margin-top:6px;}
body.home.home-stack .section-mist .card-link,
body.home.home-stack .section-experience .card-link{margin-top:8px;}

body.home.home-stack .section-mist > .wrap > div[style*="margin-top:40px"],
body.home.home-stack .section-experience > .wrap > div[style*="margin-top:40px"]{margin-top:16px !important;}
body.home.home-stack .section-mist .btn,
body.home.home-stack .section-experience .btn{padding:10px 20px;font-size:.76rem;}

body.home.home-stack .section-dark .steps{margin-top:28px;}
body.home.home-stack .section-dark .step p{font-size:.78rem;}

body.home .stat{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)) padding-box,
             linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.03)) border-box;
  border:1px solid transparent;
}
body.home .stat:hover{box-shadow:0 20px 40px -28px rgba(0,0,0,.6);}
body.home .stat-num{color:#55756a;}
body.home .stat-label{color:rgba(255,255,255,.58);}

body.home .card{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)) padding-box,
             linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.03)) border-box;
  border:1px solid transparent;
}
body.home .card:hover{border-color:transparent;box-shadow:0 24px 44px -24px rgba(0,0,0,.55);}
body.home .card h3{color:#fff;}
body.home .card p{color:rgba(255,255,255,.62);}
body.home .card-index{color:#dfe5e2;border-color:rgba(85,117,106,.32);background:rgba(85,117,106,.08);}
body.home .card-icon{
  background:linear-gradient(160deg,rgba(85,117,106,.16),rgba(85,117,106,.03));
  border-color:rgba(85,117,106,.26);color:#dfe5e2;
}
body.home .section-mist .card[data-tilt]:hover .card-icon{
  transform:scale(1.1) rotate(-5deg);
  border-color:rgba(85,117,106,.6);
  background:linear-gradient(160deg,rgba(85,117,106,.32),rgba(85,117,106,.08));
}
body.home .card[data-tilt]::before{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(85,117,106,.14),transparent 70%);}

/* Servicios cards: real cursor-tilt + scale on hover, siblings dim, accent line draws in */
body.home .section-mist .card[data-tilt]{
  overflow:hidden;will-change:transform;cursor:pointer;
  transform:perspective(900px) rotateX(0deg) rotateY(0deg) scale(1);
  transition:transform .5s cubic-bezier(.2,.9,.25,1),box-shadow .45s ease,opacity .4s ease;
}
body.home .section-mist .card[data-tilt]:hover{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.07);
  box-shadow:0 40px 72px -20px rgba(0,0,0,.7);
  z-index:2;
}
body.home .section-mist .grid-2:hover .card[data-tilt]:not(:hover){opacity:.55;transform:perspective(900px) scale(.92);}
body.home .section-mist .card[data-tilt]::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  padding:1.5px;border-radius:inherit;
  background:radial-gradient(170px circle at var(--mx,50%) var(--my,50%),#dfe5e2,#55756a 45%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .4s ease;
}
body.home .section-mist .card[data-tilt]:hover::after{opacity:1;}
body.home .section-mist .card-index{transition:transform .4s var(--ease),background-color .35s ease,border-color .35s ease;}
body.home .section-mist .card[data-tilt]:hover .card-index{
  background:rgba(85,117,106,.16);border-color:rgba(85,117,106,.5);transform:scale(1.08);
}
body.home .section-mist .card-link{position:relative;}
body.home .section-mist .card-link::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
body.home .section-mist .card-link:hover::after{transform:scaleX(1);}
@media (prefers-reduced-motion:reduce),(hover:none){
  body.home .section-mist .card[data-tilt]{transform:none !important;}
  body.home .section-mist .grid-2:hover .card[data-tilt]:not(:hover){opacity:1;transform:none !important;}
}

body.home .steps::before{background:rgba(255,255,255,.12);}
body.home .step-num{background:#1f1f1f;border-color:rgba(85,117,106,.32);color:#dfe5e2;}
body.home .step h4{color:#fff;}
body.home .step p{color:rgba(255,255,255,.6);}

body.home .btn-outline{color:#fff;border-color:var(--line-on-dark);}
body.home .btn-outline:hover{border-color:#55756a;color:#55756a;}

body.home .project-card{background:rgba(255,255,255,.04);border-color:var(--line-on-dark);}
body.home .project-visual{background:linear-gradient(135deg,#1f1f1f,#1f1f1f);}
body.home .project-card h3{color:#fff;}
body.home .project-card p{color:rgba(255,255,255,.62);}
body.home .project-tag{color:#55756a;}

body.home .family{border-top-color:var(--line-on-dark);}
body.home .family-tag{color:#55756a;}
body.home .family-list li{color:rgba(255,255,255,.66);}
body.home .family-list li::before{background:#55756a;}

body.home .cert-item{border-top-color:var(--line-on-dark);}
body.home .cert-item:last-child{border-bottom-color:var(--line-on-dark);}
body.home .cert-q{color:#fff;}
body.home .cert-q svg{color:#55756a;}
body.home .cert-a{color:rgba(255,255,255,.66);}

body.home .field label{color:rgba(255,255,255,.75);}
body.home .form-note{color:rgba(255,255,255,.5);}
body.home .form-status[data-state="ok"]{color:#55756a;}

body.home .contact-channel{border-color:var(--line-on-dark);}
body.home .contact-channel svg{color:#55756a;}
body.home .contact-channel p{color:rgba(255,255,255,.62);}
body.home .contact-channel a{color:#55756a;}

/* MELO palette: links and confirmations on dark backgrounds read in mist (sage is for marks,
   lines, labels and icons; it falls under 4.5:1 for small text on black). */
body.home .card-link,body.home .contact-channel a,.sl-link,.qz-hero-link,.ct-channels .ab-panel a,
body.home .form-status[data-state="ok"],#contactForm .form-status[data-state="ok"],body.home .qz-status[data-state="ok"],
.main-nav a[aria-current="page"]{color:#dfe5e2;}
body.home .card-link:hover{color:#fff;}

/* ---------- Inicio, screen 3: solutions as photo cards ---------- */
/* Each card shows the photo, its name and number; on hover (or focus, or when it reaches
   the middle of the screen on touch devices) the photo blurs and the description takes over. */
body.home .sx-section{
  background:
    radial-gradient(70% 85% at 0% 0%,rgba(11,61,11,.62),transparent 70%),
    radial-gradient(60% 70% at 100% 100%,rgba(85,117,106,.16),transparent 70%),
    linear-gradient(160deg,#1f1f1f 0%,#000 78%);
}
.sx-section .wrap{display:flex;flex-direction:column;}
.sx-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;}
.sx-title{
  position:relative;padding-left:18px;color:#fff;
  font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;line-height:1.14;
  font-size:clamp(1.4rem,1.3vw + .8rem,1.9rem);
}
.sx-title::before{content:'';position:absolute;left:0;top:.12em;bottom:.12em;width:5px;background:#0B3D0B;}
.sx-title strong{font-weight:800;color:#fff;}
.sx-all{flex:0 0 auto;}

.sx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.2vw,18px);margin-top:clamp(16px,2.2vw,30px);}
.sx-card{
  position:relative;display:block;overflow:hidden;border-radius:18px;background:#000;color:#fff;text-decoration:none;isolation:isolate;
  height:clamp(150px,calc((100svh - var(--header-h,92px) - 44px - 250px) / 2),280px);
}
.sx-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:filter .55s var(--ease),transform .7s var(--ease);
}
.sx-card::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.78) 100%);
  transition:background-color .55s var(--ease);
}
.sx-card h3,.sx-desc{position:absolute;left:clamp(16px,1.8vw,26px);bottom:clamp(14px,1.6vw,22px);margin:0;transition:opacity .45s var(--ease),transform .55s var(--ease);}
.sx-card h3{right:clamp(84px,9vw,130px);color:#fff;font-family:var(--font-display);font-weight:700;font-size:clamp(1rem,.7vw + .7rem,1.4rem);line-height:1.2;}
body.home .sx-desc{
  right:clamp(16px,1.8vw,26px);color:#fff;opacity:0;transform:translateY(10px);
  font-family:var(--font-body);font-weight:300;font-size:16px;line-height:1.45;
}
.sx-desc strong{font-weight:700;}
.sx-num{
  position:absolute;right:clamp(14px,1.6vw,24px);bottom:clamp(8px,1vw,14px);
  font-family:var(--font-display);font-weight:800;line-height:1;letter-spacing:-.02em;
  font-size:clamp(2.6rem,3.6vw,4rem);color:rgba(223,229,226,.62);
  transition:opacity .45s var(--ease),transform .55s var(--ease);
}
.sx-card:hover img,.sx-card:focus-visible img,.sx-card.is-on img{filter:blur(9px) brightness(.62);transform:scale(1.08);}
.sx-card:hover::after,.sx-card:focus-visible::after,.sx-card.is-on::after{background-color:rgba(0,0,0,.25);}
.sx-card:hover h3,.sx-card:focus-visible h3,.sx-card.is-on h3,
.sx-card:hover .sx-num,.sx-card:focus-visible .sx-num,.sx-card.is-on .sx-num{opacity:0;transform:translateY(-8px);}
.sx-card:hover .sx-desc,.sx-card:focus-visible .sx-desc,.sx-card.is-on .sx-desc{opacity:1;transform:none;}
.sx-card:focus-visible{outline:2px solid #55756a;outline-offset:3px;}

body.home .sx-foot{
  margin:clamp(16px,2vw,28px) 0 0;max-width:96ch;color:#fff;
  font-family:var(--font-body);font-weight:300;font-size:16px;line-height:1.5;
}
.sx-foot strong{font-weight:700;}

@media (max-width:1100px){.sx-card br,.sx-desc br{display:none;}}
@media (max-width:760px){
  .sx-head{flex-direction:column;gap:14px;}
  /* One card at a time, swiped sideways, so the screen still fits the phone */
  .sx-grid{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) 6px;scroll-padding-inline:var(--gutter);
  }
  .sx-grid::-webkit-scrollbar{display:none;}
  .sx-card{flex:0 0 86%;height:210px;scroll-snap-align:center;}
  .sx-card h3{font-size:1.1rem;}
  body.home .sx-desc{font-size:15px;}
  .sx-num{font-size:2.6rem;}
}
@media (prefers-reduced-motion:reduce){
  .sx-card img,.sx-card::after,.sx-card h3,.sx-desc,.sx-num{transition:none;}
  .sx-card:hover img,.sx-card:focus-visible img,.sx-card.is-on img{transform:none;}
}

/* ---------- Inicio, screen 2 laid out like the user's mockup (05/11) ----------
   Title top-left, description below it, the Integrar/Conectar/Optimizar list beside the
   description, and the hover card in the top-right corner. */
.system-section .system-title{font-size:clamp(1.7rem,1.7vw + 1rem,2.9rem);}
body.home .system-intro p{
  font-family:Arial,Helvetica,sans-serif;color:#fff;
  font-size:clamp(1rem,.35vw + .85rem,1.15rem);line-height:1.4;
  -webkit-hyphens:auto;hyphens:auto;
}
.process-holo{
  background:radial-gradient(120% 140% at 85% 0%,rgba(11,61,11,.55),transparent 60%),#000;
}
.process-holo.is-active{border-color:rgba(85,117,106,.45);box-shadow:0 0 0 1px rgba(11,61,11,.5),0 24px 50px -24px rgba(11,61,11,.9);}
.process-holo-num{color:#55756a;font-size:clamp(2.2rem,2.4vw,2.8rem);text-shadow:0 0 18px rgba(11,61,11,.9);}
.process-holo-desc{font-size:.86rem;}
@media (min-width:861px){
  .system-section .wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(180px,230px) minmax(250px,360px);
    grid-template-areas:"title title stage" "intro list stage" "cta cta cta";
    grid-template-rows:minmax(clamp(160px,24vh,215px),auto) auto auto;
    column-gap:clamp(22px,2.6vw,48px);align-items:start;
  }
  .system-section .system-title{grid-area:title;align-self:center;}
  .system-intro{grid-area:intro;margin:clamp(12px,1.8vh,26px) 0 0;max-width:640px;gap:10px;}
  .process-grid{display:contents;}
  .process-list{grid-area:list;transform:none;margin-top:clamp(14px,2vh,28px);}
  /* The stage runs down beside the list; main.js slides the card to the hovered item */
  .process-stage{grid-area:stage;align-self:stretch;}
  .process-holo{top:var(--holo-top,0px);height:clamp(160px,24vh,215px);}
  .system-section .wrap > div[style*="margin-top:28px"]{grid-area:cta;}
}
/* Content sits in the vertical middle of the screen instead of hugging the top */
@media (min-width:861px){
  body.home.home-stack .system-section{display:flex;flex-direction:column;}
  .system-section .wrap{width:100%;box-sizing:border-box;margin-block:auto;}
}
@media (min-width:1101px){
  .system-section .wrap{max-width:1440px;grid-template-columns:minmax(0,1fr) minmax(190px,240px) minmax(280px,380px);}
  .system-intro{max-width:680px;}
}
@media (min-width:861px) and (max-width:1100px){
  .system-section .wrap{grid-template-columns:minmax(0,1fr) minmax(230px,290px);grid-template-areas:"title stage" "intro list" "cta cta";}
  .process-stage{align-self:end;}
  .process-holo{top:auto;bottom:0;}
}