/* Orvelyx: a calm, customer-focused visual system. */
:root {
  --bg-0:#fafbf8;
  --bg-1:#fff;
  --bg-2:#eeeaf7;
  --ink:#26243c;
  --muted:#626477;
  --cyan:#267873;
  --violet:#7154be;
  --magenta:#8060ca;
  --lime:#237960;
  --grad:linear-gradient(115deg,#7050b4,#765dbc);
  --glass:#fff;
  --border:#e3e3e9;
  --border-strong:#c6bddb;
  --radius:24px
}
body {
  background:#fafbf8
}
body::before,body::after {
  display:none
}
a {
  color:inherit
}
.container {
  width:min(1240px,90%)
}
section {
  padding:100px 0;
  scroll-margin-top:90px
}
header.nav {
  background:rgba(250,251,248,.94);
  border-bottom:1px solid #e8e7ed
}
.nav-wrap {
  padding:20px 0;
  gap:24px
}
.logo-text {
  color:var(--ink);
  letter-spacing:2px
}
.logo-x {
  background:none;
  color:#7154be;
  -webkit-text-fill-color:#7154be
}
.logo-mark {
  background:#eeebf6;
  border:1px solid #dfd8ef;
  border-radius:13px
}
.logo-icon {
  filter:none
}
.orbit-1 {
  animation: orbitSpin 12s linear infinite;
  transform-origin: 18px 18px;
}
.orbit-2 {
  animation: orbitSpin 18s linear infinite reverse;
  transform-origin: 18px 18px;
}
.nav nav a {
  color:#565469;
  font-size:14px
}
.btn {
  border:1px solid #d9d7e3;
  background:transparent;
  color:var(--ink);
  border-radius:12px;
  padding:14px 20px;
  font-size:14px;
  box-shadow:none;
  gap:10px
}
.btn:hover {
  background:#efedf5;
  box-shadow:none;
  border-color:#a699c2;
  transform:translateY(-2px)
}
.btn-primary {
  background:#7353b6;
  color:#fff;
  border-color:#7353b6;
  box-shadow:0 5px 14px #7255b618
}
.btn-primary:hover {
  background:#5e419d;
  color:#fff;
  box-shadow:0 7px 22px #7255b628
}
.btn-primary::before {
  display:none
}
.lang-switch {
  background:#fff;
  border-color:var(--border)
}
.lang-switch button {
  color:#646171
}
.lang-switch button.active {
  background:#eee9f7;
  color:#5e419d
}
.pill {
  font-family:inherit;
  font-size:11px;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  border:0;
  background:#eeebf5;
  color:#69518e;
  padding:9px 13px
}
.pill .dot {
  background:#568e77;
  box-shadow:none;
  animation:none
}
.hero {
  padding:85px 0 92px;
  overflow:hidden;
  background:radial-gradient(ellipse at 88% 48%,#e7e2f4 0,transparent 52%)
}
.hero-grid {
  grid-template-columns:1.05fr 1fr;
  gap:65px;
  align-items:center
}
.hero h1 {
  font-size:clamp(46px,5.4vw,76px);
  line-height:1.08;
  font-weight:500;
  letter-spacing:-3.8px;
  margin:27px 0 23px
}
.hero h1 .accent,.section-head h2 .accent,.cta .accent {
  background:none;
  color:#8063b1;
  -webkit-text-fill-color:#8063b1
}
.hero .lead {
  font-size:18px;
  line-height:1.8;
  max-width:500px;
  color:#666578
}
.hero-cta {
  margin-top:29px;
  gap:12px
}
.hero-cta .btn {
  padding:17px 21px
}
.solution-scene {
  min-width:0;
  position:relative;
  padding:55px 0 65px
}
.scene-label {
  font-size:10px;
  letter-spacing:2px;
  color:#7b728d;
  text-align:center;
  margin-bottom:24px
}
.scene-orbit {
  position:absolute;
  inset:-7% -5%;
  border:1px solid #d9d2e5;
  border-radius:50%;
  transform:rotate(-25deg);
  pointer-events:none
}
.scene-orbit::after {
  content:'';
  position:absolute;
  inset:22px;
  border:1px solid #e4dfee;
  border-radius:50%
}
.workspace-preview {
  position:relative;
  background:#fff;
  border:1px solid #ded8e9;
  border-radius:22px;
  box-shadow:0 30px 65px #51406715;
  transform:rotate(-2deg);
  overflow:hidden
}
.preview-toolbar {
  padding:19px 23px;
  border-bottom:1px solid #eeeaf3;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px
}
.preview-brand {
  font-weight:600;
  font-size:16px;
  color:#6e51a3
}
.preview-tag {
  font-size:10px;
  color:#777082;
  padding:5px 8px;
  background:#f6f4f8;
  border-radius:5px
}
.preview-content {
  padding:30px 25px 20px
}
.preview-eyebrow {
  font-size:10px;
  letter-spacing:1.7px;
  color:#8a8196
}
.preview-content h2 {
  font-size:27px;
  font-weight:500;
  letter-spacing:-1px;
  margin:12px 0 26px
}
.workflow {
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:space-between
}
.workflow>div {
  flex:1;
  min-width:0;
  text-align:center;
  background:#f4f1f8;
  border:1px solid #e8e1f2;
  border-radius:12px;
  padding:15px 6px
}
.workflow>div:nth-of-type(2) {
  background:#eae3f6;
  border-color:#d7c9e9
}
.workflow span {
  display:block;
  color:#947cb3;
  font-size:11px;
  margin-bottom:8px
}
.workflow strong {
  font-size:10px;
  font-weight:500;
  line-height:1.4;
  display:block
}
.workflow>b {
  font-weight:400;
  color:#b3a3c6
}
.preview-message {
  display:flex;
  align-items:center;
  gap:13px;
  margin:25px 0;
  background:#f2f7f3;
  border:1px solid #e2ece4;
  padding:16px;
  border-radius:12px
}
.message-icon {
  font-size:28px;
  color:#5c8d77
}
.preview-message strong {
  font-size:12px;
  font-weight:500
}
.preview-message p {
  font-size:11px;
  line-height:1.7;
  color:#71786f;
  margin:5px 0 0
}
.preview-footer {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:#7b7484
}
.preview-footer .dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#719c80
}
.preview-footer>span:last-child {
  margin-left:auto
}
.scene-note {
  position:absolute;
  bottom:27px;
  right:-13px;
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  padding:17px 24px;
  border:1px solid #e8e4ef;
  border-radius:14px;
  box-shadow:0 10px 30px #54466b10;
  transform:rotate(3deg)
}
.note-icon {
  background:#e9f2eb;
  color:#568263;
  border-radius:50%;
  width:31px;
  height:31px;
  display:grid;
  place-items:center
}
.scene-note strong {
  display:block;
  font-size:13px;
  font-weight:500
}
.scene-note div>span {
  display:block;
  font-size:10px;
  color:#87808f;
  margin-top:4px
}
.marquee {
  background:#f1f1ed;
  border-block:1px solid #e5e5df;
  padding:22px 0
}
.marquee-inner {
  animation-duration:65s
}
.marquee span {
  color:#7e7b87;
  font-size:15px;
  letter-spacing:0;
  font-family:inherit
}
.marquee span::after {
  color:#bcb3cb
}
.section-head {
  max-width:720px;
  margin-bottom:44px
}
.section-head h2 {
  font-size:clamp(32px,3.8vw,49px);
  font-weight:500;
  letter-spacing:-1.8px;
  line-height:1.16
}
.section-head p {
  font-size:16px;
  line-height:1.8;
  max-width:620px
}
.services-grid {
  gap:18px
}
.card {
  background:#fff;
  padding:30px;
  border-color:#e4e2e8;
  backdrop-filter:none
}
.card .icon {
  background:#f1edf8;
  border:none;
  color:#7a5aa9;
  width:48px;
  height:48px;
  border-radius:13px;
  margin-bottom:25px
}
.card:nth-child(3n+2) .icon {
  background:#edf3ed;
  color:#60836a
}
.card:nth-child(3n) .icon {
  background:#faf0e7;
  color:#a97d53
}
.card h3 {
  font-size:20px;
  font-weight:500
}
.card p {
  line-height:1.8;
  color:#686574
}
.card::before {
  display:none
}
#proceso {
  background:#f0edf6
}
.process-num {
  background:#fff;
  color:#7353b6;
  box-shadow:none;
  border-color:#d6cde4;
  font-family:inherit
}
.process-line {
  background:#dcd4e8
}
.process-step h3 {
  font-weight:500
}
.process-step p {
  line-height:1.8
}
.products-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px
}
.product {
  background:#fff;
  display:flex;
  flex-direction:column
}
.product .thumb {
  aspect-ratio:16/9;
  background:#ebe8f1;
  padding:20px
}
.product .thumb::before {
  display:none
}
.product .thumb img {
  position:relative;
  object-fit:contain;
  border-radius:9px;
  box-shadow:0 5px 18px #34264417
}
.product .body {
  padding:28px;
  display:flex;
  flex-direction:column;
  flex:1
}
.product .badge {
  align-self:flex-start;
  color:#6b5393;
  background:#f1edf8;
  border:0;
  font-family:inherit;
  font-size:10px;
  letter-spacing:1px
}
.product h3 {
  font-size:25px;
  font-weight:500;
  margin:4px 0 12px
}
.product p {
  font-size:15px;
  line-height:1.8
}
.product .foot {
  margin-top:auto
}
.product .price {
  display:none
}
.product .foot .btn {
  border:0;
  background:#f3eff8;
  color:#6b4d9c;
  width:100%;
  justify-content:space-between
}
.testimonial {
  background:#fff;
  box-shadow:none
}
.testimonial-stars {
  color:#967951
}
.testimonial-avatar {
  background:#ede8f4;
  color:#70519d
}
.cta {
  padding:65px 30px;
  background:#eeebf5;
  border:1px solid #e2dbea;
  border-radius:28px;
  box-shadow:none
}
.cta::before {
  display:none
}
.cta h2 {
  font-weight:500;
  font-size:clamp(32px,4vw,52px);
  line-height:1.15;
  letter-spacing:-1.8px
}
.cta p {
  color:#6b6577;
  line-height:1.8;
  max-width:590px;
  margin:22px auto 30px
}
.cta>div {
  flex-direction:row-reverse
}
footer {
  background:#f2f2ee;
  border-top:1px solid #e4e4df;
  padding-bottom:100px
}
.foot-grid h4 {
  color:#383446
}
.foot-grid p,.foot-grid a,.foot-bottom {
  color:#706c7b
}
.foot-bottom {
  border-color:#dedde3
}
.mobile-menu {
  background:#fafbf8
}
.mobile-close {
  background:#eeebf5;
  border:1px solid #ddd5ea;
  color:#26243c
}
.hamburger span {
  background:#645873
}
.skip-link {
  position:fixed;
  top:-70px;
  left:20px;
  padding:15px;
  background:#fff;
  color:#533388;
  z-index:2000
}
.skip-link:focus {
  top:12px
}
:focus-visible {
  outline:3px solid #8366b5;
  outline-offset:5px
}
.reveal {
  opacity:1;
  transform:none
}
.whatsapp-float {
  animation:none!important;
  background:#287e5b!important;
  box-shadow:0 5px 18px #265d4426!important
}
.chat-toggle {
  animation:none!important;
  box-shadow:none!important;
  background:#e4dcec!important
}
.chat-toggle svg {
  color:#6d4c9b!important
}
.chat-panel {
  background:#fff!important;
  border-color:#d9d2e5!important;
  box-shadow:0 20px 60px #3e315b25!important
}
.chat-header {
  background:#f6f3fa!important
}
.chat-input-area {
  background:#f7f5fa!important
}
.chat-input {
  background:#fff!important;
  color:var(--ink)!important
}
.chat-msg.bot {
  background:#f1edf7!important;
  color:var(--ink)!important
}
.chat-suggestions button {
  color:#6e5491!important;
  border-color:#d8cee7!important
}
.chat-status {
  color:#5e7d68!important
}
@media(min-width:1000px) {
  #servicios .section-head,#productos .section-head {
    text-align:left;
    margin-left:0
  }
  #servicios .section-head p,#productos .section-head p {
    margin-left:0
  }
}
@media(max-width:1050px) {
  .hero-grid {
    gap:35px
  }
  .hero h1 {
    font-size:56px
  }
  .nav nav {
    display:none
  }
  .hamburger {
    display:flex
  }
  .hero-cta {
    flex-wrap:wrap
  }
  .nav-wrap {
    gap:12px
  }
}
@media(max-width:760px) {
  section {
    padding:68px 0
  }
  .container {
    width:90%
  }
  .hero {
    padding:50px 0
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:20px
  }
  .hero h1 {
    font-size:54px;
    letter-spacing:-2.8px
  }
  .hero .lead {
    font-size:17px
  }
  .hero-cta .btn {
    padding:15px 16px
  }
  .solution-scene {
    max-width:520px;
    width:95%;
    margin:0 auto;
    padding:40px 0 65px
  }
  .scene-note {
    right:0
  }
  .services-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .products-grid {
    grid-template-columns:1fr
  }
  .nav-wrap>.logo {
    gap:5px
  }
  .logo-text {
    font-size:17px
  }
  .nav-wrap>div>.btn-primary {
    display:none
  }
  .section-head h2 {
    letter-spacing:-1.2px
  }
  .cta {
    padding:42px 22px
  }
  .product .body {
    padding:24px
  }
  .scene-orbit {
    inset:0 -3%
  }
  .foot-grid {
    gap:28px
  }
}
@media(max-width:480px) {
  .hero h1 {
    font-size:47px
  }
  .hero-cta {
    flex-direction:column;
    align-items:stretch
  }
  .hero-cta .btn {
    justify-content:center
  }
  .services-grid {
    grid-template-columns:1fr
  }
  .preview-content {
    padding:25px 17px 18px
  }
  .preview-content h2 {
    font-size:24px
  }
  .workflow {
    gap:7px
  }
  .preview-toolbar {
    padding:16px
  }
  .scene-label {
    font-size:9px;
    letter-spacing:1.3px
  }
  .chat-panel {
    width:calc(100vw - 24px)!important;
    right:12px!important;
    max-height:70vh!important
  }
  .foot-grid {
    grid-template-columns:1fr 1fr
  }
  .foot-grid>div:first-child,.foot-grid>div:last-child {
    grid-column:1/-1
  }
  .foot-bottom {
    align-items:flex-start;
    gap:16px;
    flex-direction:column
  }
}
@media(prefers-reduced-motion:reduce) {
  html,body {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}
.project-visit {
  display:inline-flex;
  align-self:flex-start;
  color:#6b4d9c;
  font-size:13px;
  font-weight:500;
  margin:0 0 22px;
  text-decoration:underline;
  text-underline-offset:4px
}
.product .foot {
  width:100%
}
.products-grid .product:first-child {
  background:#f7f5fb
}
.products-grid .product:first-child .badge {
  background:#e9e2f3
}
.msg.bot {
  background:#f1edf7;
  border-color:#e4dcef
}
.chat-input-wrap input {
  background:#fff;
  border-color:#dad4e5
}
.chat-input-wrap button {
  background:#7957b7
}
.chat-input-wrap button svg {
  color:#fff
}
.chat-powered {
  color:#746c81
}
.mobile-menu a.btn-primary {
  color: #fff;
}

/* Mia: Orvelyx's atom-inspired companion, drawn as a lightweight SVG. */
.chat-toggle .mia-mascot { width: 66px; height: 66px; overflow: visible; }
.chat-toggle { background: #f1ebfa !important; border: 1px solid #ded2ed; }
.chat-toggle.open .mia-mascot { display: none; }
.chat-avatar { width: 48px; height: 48px; background: #eee6f7; border-radius: 16px; flex-shrink: 0; }
.chat-avatar .mia-mascot { width: 48px; height: 48px; }
.mia-body { transform-origin: 40px 44px; animation: mia-breathe 5s ease-in-out infinite; }
.mia-eyes { transform-origin: 40px 42px; animation: mia-blink 6s infinite; }
.mia-orbit { transform-origin: 40px 40px; }
.chat-panel.open .chat-avatar .mia-body { animation: mia-hello .8s ease-in-out 1, mia-breathe 5s .8s ease-in-out infinite; }
.mia-thinking .mia-orbit { animation: orbitSpin 2.5s linear infinite; }
@keyframes mia-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes mia-blink { 0%,42%,46%,100% { transform: scaleY(1); } 44% { transform: scaleY(.12); } }
@keyframes mia-hello { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 65% { transform: rotate(7deg); } }

/* Keep Mia centered inside the circular chat launcher at every breakpoint. */
.chat-toggle .mia-mascot {
  width: 100%;
  height: 100%;
  display: block;
}
.chat-toggle {
  padding: 0;
  place-items: center;
}
.chat-toggle.open .mia-mascot {
  display: none;
}

/* Captura de Agentes IA a todo el ancho de la tarjeta. */
.product .thumb-agents, .product .thumb-conecta, .product .thumb-gym { padding: 0; }
.product .thumb-agents img, .product .thumb-conecta img, .product .thumb-gym img {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
  box-shadow: none;
}