/* Home: planet → graphite services → warm-white system. */
html:has(body.landing-open){scroll-padding-top:0}
body.landing-open #capacidades,
body.landing-open #layers{position:relative;isolation:isolate;scroll-margin-top:44px}
body.landing-open #capacidades::before{display:none}
body.landing-open #capacidades{
  min-height:92svh;
  display:flex;
  align-items:center;
  padding:clamp(105px,10vw,156px) 0;
  background:linear-gradient(150deg,#222935 0%,#171d27 52%,#101721 100%);
  border:0;
  overflow:hidden;
}
body.landing-open #capacidades::after{
  content:"";
  position:absolute;
  width:min(54vw,760px);
  aspect-ratio:1;
  right:-18%;top:-28%;z-index:-1;
  background:url('assets/fxcell-cell-gradient.svg') center/contain no-repeat;
  opacity:.055;pointer-events:none;
}
body.landing-open #capacidades .section-heading{align-items:end;margin-bottom:clamp(42px,5vw,76px)}
body.landing-open #capacidades .eyebrow{color:#aab8d1;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
body.landing-open #capacidades h2{color:#fff;font-size:clamp(2.6rem,5vw,5rem);line-height:1.06;letter-spacing:-.058em;max-width:660px}
body.landing-open #capacidades .section-heading>p{color:#c4cad5;max-width:310px;font-size:1.06rem}
body.landing-open #capacidades .capability-grid{gap:18px}
body.landing-open #capacidades .capability{
  display:flex;flex-direction:column;min-height:435px;padding:28px;
  border:1px solid rgba(255,255,255,.12);border-radius:20px;
  background:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  box-shadow:0 18px 45px rgba(0,0,0,.08);
  transition:transform .35s ease,border-color .35s ease,background-color .35s ease;
}
body.landing-open #capacidades .capability:hover{transform:translateY(-6px);border-color:rgba(154,182,233,.42);background-color:rgba(255,255,255,.045)}
.capability-art{height:144px;display:flex;align-items:center;justify-content:center;margin:-4px 0 14px}
.capability-art svg{width:150px;height:150px;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;filter:drop-shadow(0 7px 24px currentColor)}
.capability-art--strategy{color:#9bb8ff}
.capability-art--agents{color:#88d9e8}
.capability-art--products{color:#c2a9fb}
.capability-art .icon-orbit{stroke-width:3;stroke-dasharray:338 28;transform-origin:center;transform:rotate(-35deg)}
.capability-art .icon-core{fill:currentColor;stroke:none}
.capability-art .icon-cell{stroke-width:3;stroke-dasharray:120 32;transform-origin:center;transform:rotate(-35deg)}
body.landing-open #capacidades .card-index{color:#aab8d1;font-size:.7rem;font-weight:600;letter-spacing:.12em;margin:0 0 18px}
body.landing-open #capacidades .capability h3{color:#fff;min-height:0;max-width:310px;font-size:clamp(1.35rem,1.75vw,1.7rem);line-height:1.24;letter-spacing:-.035em;margin:0 0 14px}
body.landing-open #capacidades .capability p{color:#c6cbd5;line-height:1.6;font-size:.95rem;margin:0 0 24px}
body.landing-open #capacidades .capability-link{color:#e5ecff;font-size:.83rem;font-weight:600;letter-spacing:.015em;margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.11)}
body.landing-open #capacidades .capability-link:hover{color:#9fdcea}

body.landing-open #layers{
  min-height:92svh;display:flex;align-items:center;
  padding:clamp(105px,10vw,165px) 0;
  background:#f7f8fa;border:0;
}
.home-layers-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(55px,8vw,130px);align-items:center}
body.landing-open #layers :where(h2,p,a,span,strong,small,figcaption){color:#18212e;text-shadow:none}
body.landing-open #layers .eyebrow{color:#556983;font-size:.77rem;font-weight:600;letter-spacing:.16em;margin-bottom:24px}
body.landing-open #layers h2{font-size:clamp(2.9rem,5.4vw,5.4rem);line-height:1.04;letter-spacing:-.06em;max-width:630px}
body.landing-open #layers .home-layers-copy>p:not(.eyebrow){color:#4e5b68;font-size:1.08rem;line-height:1.75;max-width:530px;margin:32px 0}
body.landing-open #layers .text-link{display:inline-flex;color:#2458b8;font-size:.92rem;font-weight:600;border-bottom:1px solid #b9c9e6;padding-bottom:5px}
body.landing-open #layers .text-link:hover{color:#133a85;border-color:currentColor;text-decoration:none}
.layers-figure{position:relative;margin:0;padding:39px 36px 28px;border:1px solid #dce3ec;border-radius:27px;background:#fff;box-shadow:0 27px 70px rgba(36,58,89,.09)}
.layers-figure::before{content:"";position:absolute;inset:-40px -28px auto auto;width:210px;aspect-ratio:1;background:url('assets/fxcell-cell-gradient.svg') center/contain no-repeat;opacity:.07;pointer-events:none}
.layers-spine{position:absolute;left:67px;top:72px;bottom:105px;width:1px;background:linear-gradient(#b8c9ee,#72bed4,#b8c9ee)}
.layer-card{position:relative;display:grid;grid-template-columns:46px 1fr 65px;gap:18px;align-items:center;min-height:108px;padding:18px 18px 18px 8px;margin-bottom:13px;border:1px solid #e5eaf0;border-radius:15px;background:#fbfcfe}
.layer-card:nth-of-type(3){border-color:#d9e6f5;background:#f5f9ff}
.layer-card:nth-of-type(4){border-color:#d9e8ea;background:#f5fbfb}
body.landing-open #layers .layer-number{position:relative;z-index:1;display:grid;place-items:center;width:38px;height:38px;border:1px solid #d1dbea;border-radius:50%;background:#fff;color:#3762a2;font-size:.72rem;font-weight:700}
.layer-card strong{display:block;font-size:1.17rem;letter-spacing:-.03em;line-height:1.25}
body.landing-open #layers .layer-card small{display:block;color:#647282;font-size:.78rem;line-height:1.5;margin-top:5px}
.layer-glyph{position:relative;display:flex;align-items:center;justify-content:center;width:54px;height:54px;border:1px solid #dbe5f1;border-radius:15px;color:#4174bd;background:#edf4ff}
.layer-glyph--data{display:grid;grid-template-columns:repeat(2,9px);gap:6px}
.layer-glyph--data i{width:9px;height:9px;border-radius:3px;background:currentColor;opacity:.8}
.layer-glyph--mind{color:#4b82bd;background:#e8f7fa;border-color:#cae8ed}
.layer-glyph--mind::before{content:"";width:30px;height:30px;border:3px solid currentColor;border-right-color:transparent;border-radius:50%;transform:rotate(-32deg)}
.layer-glyph--mind i{position:absolute;width:9px;height:9px;border-radius:50%;background:currentColor}
.layer-glyph--action{color:#247f9e;background:#e5f8f8;border-color:#c7e9e8;font-size:1.85rem;line-height:1}
.human-loop{display:flex;align-items:center;justify-content:center;gap:10px;padding:17px 10px 0;border-top:1px solid #e8ebef;text-align:center}
body.landing-open #layers .human-loop{color:#566373;font-size:.78rem;font-weight:600;letter-spacing:.02em}
body.landing-open #layers .human-loop-symbol{color:#3a6bb4;font-size:1.7rem;line-height:1}

/* Keep the journey light after the first white screen; close on a dark CTA. */
body.landing-open .home-about::before{background:#f0f2f5}
body.landing-open #landing .home-about :where(h2,p,a,span){color:#1b2532;text-shadow:none}
body.landing-open #landing .home-about .eyebrow{color:#65768b}
body.landing-open #landing .home-about-grid p{color:#4e5b68}
body.landing-open #landing .home-about .text-link{color:#2458b8}
body.landing-open #productos{background:#fff}
body.landing-open #productos :where(h2,h3,p,a,span){color:#1b2532;text-shadow:none}
body.landing-open #productos .eyebrow,body.landing-open #productos .product-kicker{color:#647794}
body.landing-open #productos .lead,body.landing-open #productos .product p{color:#4e5b68}
body.landing-open #productos .product{border-color:#d9dfe7}
body.landing-open #productos .text-link{color:#2458b8}
body.landing-open #contacto::before{background:#141a25}

@media(max-width:950px){
  .home-layers-grid{grid-template-columns:1fr;gap:58px}
  .home-layers-copy{max-width:650px}
  .layers-figure{max-width:700px;width:100%;margin-inline:auto}
  body.landing-open #capacidades .capability-grid{gap:12px}
  body.landing-open #capacidades .capability{padding:22px;min-height:450px}
}
@media(max-width:700px){
  body.landing-open #capacidades,body.landing-open #layers{min-height:0;padding:90px 0 100px}
  body.landing-open #capacidades .section-heading{margin-bottom:36px}
  body.landing-open #capacidades .capability-grid{gap:14px}
  body.landing-open #capacidades .capability{min-height:0;padding:22px 24px 25px}
  .capability-art{height:110px;margin:0 0 12px;justify-content:flex-start}
  .capability-art svg{width:116px;height:116px}
  body.landing-open #capacidades .capability p{margin-bottom:20px}
  body.landing-open #layers h2{font-size:clamp(2.7rem,10vw,4.3rem)}
  .home-layers-grid{gap:38px}
  .layers-figure{padding:20px 15px 20px;border-radius:20px}
  .layers-spine{left:43px;top:55px;bottom:90px}
  .layer-card{grid-template-columns:32px 1fr 43px;gap:10px;min-height:100px;padding:13px 10px;margin-bottom:10px}
  body.landing-open #layers .layer-number{width:30px;height:30px;font-size:.62rem}
  .layer-card strong{font-size:1rem}
  body.landing-open #layers .layer-card small{font-size:.72rem}
  .layer-glyph{width:40px;height:40px;border-radius:12px}
  .layer-glyph--mind::before{width:24px;height:24px}
}
@media(prefers-reduced-motion:reduce){body.landing-open #capacidades .capability:hover{transform:none}}

/* The service stories are diagrams, not tiny decorative icons. */
body.landing-open #capacidades .capability{min-height:490px}
body.landing-open #capacidades .capability-art{
  height:205px;min-height:205px;margin:-8px -8px 24px;
  border:1px solid rgba(177,197,235,.13);border-radius:14px;
  background-position:center;background-repeat:no-repeat;
  background-size:contain;
}
body.landing-open #capacidades .capability-art svg{display:none}
body.landing-open #capacidades .capability-art--strategy{
  background-image:url('assets/fxcell-graphic-strategy.svg'),radial-gradient(ellipse at 50% 45%,rgba(96,128,215,.19),transparent 72%);
}
body.landing-open #capacidades .capability-art--agents{
  background-image:url('assets/fxcell-graphic-agents.svg'),radial-gradient(ellipse at 50% 45%,rgba(63,175,198,.16),transparent 72%);
}
body.landing-open #capacidades .capability-art--products{
  background-image:url('assets/fxcell-graphic-products.svg'),radial-gradient(ellipse at 50% 45%,rgba(151,112,212,.16),transparent 72%);
}
@media(max-width:950px){body.landing-open #capacidades .capability{min-height:490px}}
@media(max-width:700px){
  body.landing-open #capacidades .capability{min-height:0}
  body.landing-open #capacidades .capability-art{height:190px;min-height:190px;margin:-5px -7px 20px}
}