.solution-page {
  --area:#c4def7;
  --area-strong:#447da6;
  background:#fff
}
.page-retencion { --area:#d5cbf4; --area-strong:#7666ad }
.page-comunicacion { --area:#b9e9e8; --area-strong:#3a9290 }
.page-cultura { --area:#efd3e6; --area-strong:#a5628d }
.solution-page .announcement { background:var(--area) }
.solution-page .button-mint { background:var(--area) }
.solution-page .button-mint:hover { background:#fff }
.solution-page .nav-mobile-cta { color:var(--area-strong)!important }
.solution-page .contact-inner { background:var(--area) }
.solution-page .contact h2 span { color:var(--area-strong) }
.solution-page .contact .eyebrow { color:var(--area-strong) }
.solution-page .contact p { color:#425464 }

.solution-hero {
  overflow:hidden;
  position:relative;
  isolation:isolate;
  background:radial-gradient(ellipse 42% 60% at 75% 70%,rgba(92,136,168,.28),transparent 75%),linear-gradient(145deg,#0e1828,#17283b 72%,#1a3545);
  color:#fff;
  padding:185px 0 95px
}
.solution-hero:before {
  content:'';
  position:absolute;
  width:700px;
  height:700px;
  right:-270px;
  top:40px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:50%;
  box-shadow:0 0 0 95px rgba(255,255,255,.02),0 0 0 200px rgba(255,255,255,.015)
}
.solution-hero-grid {
  position:relative;
  display:grid;
  grid-template-columns:1.03fr .97fr;
  gap:45px;
  align-items:center;
  min-height:565px
}
.solution-hero-copy { position:relative; z-index:2 }
.solution-hero .eyebrow { color:var(--area) }
.solution-hero h1 {
  font:800 clamp(51px,5.5vw,78px)/1.08 Aptos Display,Segoe UI,Arial,sans-serif;
  letter-spacing:-.075em;
  margin:27px 0 24px;
  max-width:690px
}
.solution-hero h1 span { color:var(--area) }
.solution-hero-copy>p {
  max-width:520px;
  margin:0;
  color:#c8d8dc;
  font-size:17px;
  line-height:1.65
}
.solution-hero-actions {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:32px
}
.solution-hero-actions .text-link { white-space:nowrap }
.solution-hero-foot {
  margin-top:70px;
  color:#8da6ae;
  font-size:10px;
  font-weight:800;
  letter-spacing:.2em
}
.solution-visual {
  position:relative;
  height:520px;
  display:grid;
  place-items:center;
  min-width:0
}
.solution-visual:before {
  content:'';
  position:absolute;
  width:540px;
  height:540px;
  border-radius:50%;
  background:radial-gradient(circle,var(--area),transparent 65%);
  opacity:.25;
  filter:blur(20px)
}
.visual-board {
  position:relative;
  width:min(100%,555px);
  min-height:440px;
  padding:20px;
  border:7px solid #d6e3e6;
  border-radius:28px;
  background:#f8faf9;
  color:#1a3041;
  box-shadow:0 38px 90px rgba(0,0,0,.32);
  transform:rotate(-2deg)
}
.board-top {
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 2px 16px;
  border-bottom:1px solid #e4ebeb;
  color:#263d4d;
  font-size:11px
}
.board-top>span:last-child { margin-left:auto; color:var(--area-strong); font-size:17px }
.board-dots { display:flex; gap:4px }
.board-dots i { width:6px; height:6px; border-radius:50%; background:#b7c9cb }
.board-dots i:first-child { background:var(--area-strong) }
.board-dots i:nth-child(2) { background:#c5d7d4 }
.person {
  display:grid;
  place-items:center;
  flex:none;
  width:28px;
  height:28px;
  border-radius:50%;
  font-size:8px;
  font-style:normal;
  font-weight:800
}
.person.blue { background:#b6d9ee; color:#285774 }
.person.peach { background:#f0c5b3; color:#88533d }
.person.lilac { background:#d8cef0; color:#66538c }

.pipeline {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  padding-top:20px
}
.pipeline-stage {
  min-height:288px;
  border:1px solid #e2e9e9;
  border-radius:12px;
  background:#edf3f3;
  padding:10px 8px
}
.pipeline-stage>span {
  display:flex;
  justify-content:space-between;
  gap:4px;
  color:#758990;
  font-size:8px;
  font-weight:800;
  letter-spacing:.07em;
  margin-bottom:12px
}
.pipeline-stage>span b { color:#537782 }
.candidate {
  display:grid;
  grid-template-columns:28px 1fr;
  gap:0 7px;
  min-height:72px;
  margin-bottom:8px;
  padding:10px 7px;
  border:1px solid #e7eded;
  border-radius:9px;
  background:#fff;
  box-shadow:0 5px 12px rgba(28,70,75,.05)
}
.candidate .person { grid-row:span 2 }
.candidate strong { align-self:end; font-size:9px; white-space:nowrap }
.candidate small { color:#8b9da3; font-size:7px; white-space:nowrap }
.candidate.selected { border-color:#acd6e9; box-shadow:0 0 0 2px #d4edf8 }
.board-note {
  width:max-content;
  max-width:100%;
  margin:16px auto 0;
  border-radius:100px;
  background:#dceef7;
  color:#2e7192;
  padding:8px 13px;
  font-size:9px;
  font-weight:800
}

.pulse-heading { display:grid; gap:6px; margin:25px 8px 0 }
.pulse-heading span { color:var(--area-strong); font-size:9px; font-weight:800; letter-spacing:.15em }
.pulse-heading strong { font:800 28px Aptos Display,Segoe UI,Arial,sans-serif; letter-spacing:-.05em }
.pulse-chart {
  display:flex;
  align-items:end;
  gap:12px;
  height:155px;
  margin:22px 8px 17px;
  padding:0 6px;
  border-bottom:1px solid #dce5e7
}
.pulse-chart i { flex:1; height:var(--bar); border-radius:8px 8px 0 0; background:var(--area) }
.pulse-chart i:nth-last-child(-n+2) { background:var(--area-strong) }
.pulse-list { display:grid; gap:8px }
.pulse-list>div { display:flex; align-items:center; gap:11px; padding:10px; background:#fff; border:1px solid #e6eded; border-radius:10px }
.pulse-icon { display:grid; place-items:center; width:29px; height:29px; border-radius:8px; background:#eee9fa; color:var(--area-strong); font-size:18px }
.pulse-list strong,.pulse-list small { display:block }
.pulse-list strong { font-size:10px }
.pulse-list small { color:#899ca1; font-size:8px; margin-top:3px }

.communication-board { padding-bottom:13px }
.news-post { margin-top:17px; padding:14px; background:#fff; border:1px solid #e6eeee; border-radius:14px }
.news-author { display:flex; align-items:center; gap:9px }
.news-author strong,.news-author small { display:block }
.news-author strong { font-size:10px }
.news-author small { color:#96a5ab; font-size:8px; margin-top:3px }
.news-art {
  display:flex;
  align-items:center;
  min-height:190px;
  margin:13px 0;
  padding:23px;
  border-radius:10px;
  background:radial-gradient(circle at 85% 20%,#98d9d4,transparent 28%),linear-gradient(135deg,#2c6e82,#183b56 65%,#142940);
  color:#e9fcff
}
.news-art span { font:800 28px/1.05 Aptos Display,Segoe UI,Arial,sans-serif; letter-spacing:-.06em }
.news-post p { color:#627781; font-size:9px; line-height:1.5; margin:0 }
.news-reactions { margin-top:12px; padding-top:10px; border-top:1px solid #e9eeee; color:#7b9299; font-size:9px }
.message-float { position:absolute; right:-12px; bottom:23px; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #e0ebeb; border-radius:10px; box-shadow:0 15px 30px rgba(0,0,0,.16); padding:10px 13px; font-size:9px; transform:rotate(5deg) }
.message-float span { color:var(--area-strong); font-size:17px }

.celebration-banner {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:135px;
  margin-top:18px;
  padding:16px;
  border-radius:13px;
  background:radial-gradient(circle at 83% 30%,#f5d9e9 0%,transparent 38%),linear-gradient(130deg,#e9eff4,#c9dbea);
  color:#304661
}
.celebration-banner span { color:var(--area-strong); font-size:26px }
.celebration-banner strong { font:800 20px/1.1 Aptos Display,Segoe UI,Arial,sans-serif; letter-spacing:-.05em }
.recognition-card { margin-top:12px; padding:14px; background:#fff; border:1px solid #e6eeee; border-radius:12px }
.recognition-card p { font-size:10px; line-height:1.45; color:#5f7280; margin:11px 0 }
.recognition-badge { width:max-content; border-radius:20px; padding:7px 9px; background:#f8e9f1; color:#a35e88; font-size:8px; font-weight:800 }
.culture-mini { display:flex; align-items:center; justify-content:space-between; margin-top:12px; background:#f1f5f6; border-radius:9px; padding:11px 13px }
.culture-mini span { color:#9aa7ac; font-size:8px; font-weight:800 }
.culture-mini strong { color:#476679; font-size:9px }

.solution-switcher {
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  margin-top:-29px;
  padding:8px;
  border:1px solid #e3ebea;
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 38px rgba(14,43,50,.09)
}
.solution-switcher a {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:56px;
  padding:12px 17px;
  border-radius:13px;
  color:#536570;
  font-size:12px;
  font-weight:800;
  transition:background .25s,color .25s
}
.solution-switcher a:hover,.solution-switcher a[aria-current="page"] { background:#edf4f3; color:#142e3a }
.solution-switcher a[aria-current="page"] { box-shadow:inset 0 -3px var(--area-strong) }
.solution-switcher .area-icon { width:21px; height:21px; flex:0 0 auto }
.solution-switcher a:nth-child(1) .area-icon { color:#5594b5 }
.solution-switcher a:nth-child(2) .area-icon { color:#8671b6 }
.solution-switcher a:nth-child(3) .area-icon { color:#439b9b }
.solution-switcher a:nth-child(4) .area-icon { color:#b27698 }

.solution-intro { background:#fff }
.intro-grid { display:grid; grid-template-columns:1fr .8fr; gap:90px; align-items:end }
.solution-intro .eyebrow,.tools-heading .eyebrow,.spotlight-copy .eyebrow,.other-heading .eyebrow { color:var(--area-strong) }
.solution-intro h2,.tools-heading h2,.other-heading h2 {
  font:800 clamp(39px,4.7vw,65px)/1.14 Aptos Display,Segoe UI,Arial,sans-serif;
  letter-spacing:-.07em;
  margin:19px 0 0
}
.solution-intro h2 span,.tools-heading h2 span,.other-heading h2 span { color:#98a8a8 }
.intro-side>p { color:#61727a; font-size:16px; line-height:1.72; max-width:510px; margin:0 0 24px }
.tag-row { display:flex; flex-wrap:wrap; gap:8px }
.tag-row span { padding:10px 12px; border:1px solid #dce7e5; border-radius:100px; color:#51716d; font-size:11px; font-weight:700 }

.solution-tools { background:#f5f8f7 }
.tools-heading { max-width:760px; margin-bottom:55px }
.tools-heading p { max-width:460px; margin:18px 0 0; color:#63777d; font-size:15px; line-height:1.65 }
.solution-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 60px }
.solution-feature { min-height:195px; padding:31px 0; border-top:1px solid #dbe6e4 }
.solution-feature:nth-last-child(-n+2) { border-bottom:1px solid #dbe6e4 }
.feature-count { display:inline-flex; margin-bottom:14px; color:var(--area-strong); font-size:10px; font-weight:800; letter-spacing:.15em }
.solution-feature h3 { font:800 28px/1.2 Aptos Display,Segoe UI,Arial,sans-serif; letter-spacing:-.045em; margin:0 0 10px }
.solution-feature p { color:#6d7d83; font-size:14px; line-height:1.6; max-width:420px; margin:0 }

.solution-spotlight { background:#fff }
.spotlight-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center }
.spotlight-copy h2 { font:800 clamp(37px,4.3vw,61px)/1.17 Aptos Display,Segoe UI,Arial,sans-serif; letter-spacing:-.065em; margin:20px 0 }
.spotlight-copy p { max-width:500px; color:#61727a; font-size:15px; line-height:1.75; margin:0 0 20px }
.spotlight-flow { padding:30px; border:1px solid #e3eaea; border-radius:23px; background:linear-gradient(145deg,#eff5f4,#e5efef) }
.flow-title { display:flex; justify-content:space-between; align-items:center; color:#608083; font-size:10px; font-weight:800; letter-spacing:.13em; padding-bottom:22px }
.flow-title span { color:var(--area-strong); font-size:26px; letter-spacing:0 }
.spotlight-flow ol { list-style:none; margin:0; padding:0 }
.spotlight-flow li { display:flex; align-items:center; gap:18px; min-height:67px; border-top:1px solid #d7e4e3; color:#29434a; font-size:15px; font-weight:800 }
.spotlight-flow li span { color:var(--area-strong); font-size:10px; letter-spacing:.1em }
.solution-faq { background:#f8faf9 }
.solution-faq .faq-intro .eyebrow { color:var(--area-strong) }
.other-solutions { background:#eaf1f0 }
.other-heading { margin-bottom:40px }
.related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px }
.related-card { position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:205px; padding:24px; border:1px solid #dce7e5; border-radius:20px; background:#fff; transition:transform .25s,box-shadow .25s }
.related-card:hover { transform:translateY(-5px); box-shadow:0 18px 40px rgba(14,43,50,.09) }
.related-card>span:first-child { color:var(--area-strong); font-size:10px; font-weight:800; letter-spacing:.13em }
.related-card strong { max-width:210px; font:800 27px/1.16 Aptos Display,Segoe UI,Arial,sans-serif; letter-spacing:-.05em }
.related-arrow { position:absolute; right:22px; bottom:20px; color:var(--area-strong); font-size:25px }
.solution-page .footer-links { margin-right:20px }

@media(max-width:1050px) {
  .solution-hero-grid { grid-template-columns:1fr; gap:35px }
  .solution-hero-copy { max-width:760px }
  .solution-hero h1 { max-width:800px }
  .solution-hero-foot { margin-top:38px }
  .solution-visual { height:450px; max-width:590px; width:100%; margin-inline:auto }
  .visual-board { min-height:405px }
  .pipeline-stage { min-height:248px }
  .solution-switcher a { padding:12px 9px; font-size:11px }
  .intro-grid,.spotlight-grid { gap:45px }
}
@media(max-width:760px) {
  .solution-hero { padding:160px 0 70px }
  .solution-hero h1 { font-size:clamp(48px,8vw,68px) }
  .solution-hero-copy>p { font-size:15px }
  .solution-visual { height:420px }
  .solution-switcher { grid-template-columns:repeat(2,1fr); margin-top:-23px }
  .solution-switcher a { min-height:49px }
  .intro-grid,.spotlight-grid { grid-template-columns:1fr; gap:28px }
  .solution-intro h2,.tools-heading h2,.other-heading h2 { font-size:clamp(39px,7.5vw,56px) }
  .solution-feature-grid { gap:0 28px }
  .related-grid { grid-template-columns:1fr 1fr }
  .related-card:last-child { grid-column:1/-1 }
  .solution-page .footer-links { margin-right:0 }
}
@media(max-width:520px) {
  .solution-hero { padding:145px 0 55px }
  .solution-hero h1 { font-size:clamp(42px,10.5vw,55px) }
  .solution-hero-copy>p { font-size:14px }
  .solution-hero-actions { flex-direction:column; align-items:flex-start; gap:5px }
  .solution-hero-actions .button { width:100%; max-width:265px }
  .solution-hero-foot { margin-top:25px }
  .solution-visual { height:360px }
  .visual-board { min-height:340px; padding:12px; border-width:5px; border-radius:20px }
  .board-top { font-size:9px; padding-bottom:11px }
  .pipeline { gap:4px; padding-top:12px }
  .pipeline-stage { min-height:240px; padding:7px 4px }
  .pipeline-stage>span { font-size:6px }
  .candidate { grid-template-columns:1fr; justify-items:start; gap:3px; padding:7px 5px; min-height:75px }
  .candidate .person { grid-row:auto; width:22px; height:22px; font-size:6px }
  .candidate strong { font-size:7px }
  .candidate small { font-size:6px }
  .board-note { margin-top:10px; font-size:7px }
  .pulse-heading { margin-top:16px }
  .pulse-heading strong { font-size:23px }
  .pulse-chart { height:112px; margin:14px 6px }
  .pulse-list>div { padding:7px }
  .news-post { margin-top:11px; padding:10px }
  .news-art { min-height:130px; padding:14px }
  .news-art span { font-size:22px }
  .message-float { right:-5px; bottom:5px }
  .celebration-banner { height:110px; margin-top:11px }
  .recognition-card { margin-top:8px; padding:9px }
  .recognition-card p { margin:7px 0 }
  .culture-mini { margin-top:8px; padding:8px }
  .solution-switcher { gap:2px; padding:5px }
  .solution-switcher a { padding:8px; font-size:10px; gap:5px }
  .solution-switcher .area-icon { width:16px; height:16px }
  .solution-feature-grid,.related-grid { grid-template-columns:1fr }
  .solution-feature { min-height:0; padding:24px 0; border-bottom:1px solid #dbe6e4; border-top:0 }
  .solution-feature:first-child { border-top:1px solid #dbe6e4 }
  .spotlight-flow { padding:22px }
  .related-card { min-height:145px }
  .related-card:last-child { grid-column:auto }
}
