body.eco-demo { margin: 0; background: #fff; font-family: 'Source Sans 3', 'Inter', sans-serif; letter-spacing: 0; }
.eco-demo .navigation { display: none !important; }
.eco-demo #root .App { background: #fff; }
.demo-header, .demo-hero, .demo-selector { --ink: #f0f5ff; --muted: #b5c7de; --cyan: #15b3cd; --green: #22cd7d; color: var(--ink); letter-spacing: 0; }
.demo-header { position: fixed; inset: 0 0 auto; z-index: 1050; background: #0b1423; transition: background 180ms ease, box-shadow 180ms ease; }
.demo-header.is-scrolled { box-shadow: 0 4px 18px #0002; }
.demo-nav { max-width: 1392px; min-height: 88px; margin: auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.demo-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.demo-brand-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; padding: 5px; }
.demo-brand-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.demo-brand-name { font-size: 18px; font-weight: 800; line-height: 1.1; }
.demo-brand-name small { display: block; margin-top: 6px; font-size: 11px; font-weight: 500; color: #b5c7de; }
.demo-nav-links { display: flex; align-items: center; gap: 23px; }
.demo-nav-links a { display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: #b5c7de; }
.demo-nav-links a:hover { color: #fff; }
.demo-nav-cta { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 8px; background: linear-gradient(115deg, #086da0, #147b4e); font-size: 15px; font-weight: 700; white-space: nowrap; }
.demo-menu-button { display: none; width: 44px; height: 44px; background: none; color: #fff; cursor: pointer; border: 1px solid #7aa1bc66; border-radius: 6px; }
.demo-menu-button svg { width: 22px; height: 22px; }
.demo-hero { position: relative; isolation: isolate; box-sizing: border-box; min-height: 100vh; min-height: 100dvh; background: #0b1423; display: flex; align-items: center; padding: 140px 32px 64px; }
.demo-hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.demo-video-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #06111ee6 0%, #06111ed9 46%, #06111e80 100%); pointer-events: none; }
.opcion-b .demo-video-shade { background: linear-gradient(90deg, #021827e6 0%, #021827d9 46%, #02182780 100%); }
.demo-hero-layout { position: relative; z-index: 2; width: 100%; max-width: 1328px; margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.demo-video-control { flex-shrink: 0; opacity: .8; transition: opacity 150ms ease; }
.demo-video-control:hover, .demo-video-control:focus-within { opacity: 1; }
.demo-video-control select { width: 66px; min-height: 36px; padding: 4px 6px; border: 1px solid #9ebed04d; border-radius: 6px; color: #c0d4e7; background: #081524; font-family: inherit; font-size: 13px; cursor: pointer; color-scheme: dark; }
.demo-video-control select:focus-visible { outline: 2px solid #35dec3; outline-offset: 3px; }
.demo-video-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.demo-copy { position: relative; z-index: 1; min-width: 0; }
.demo-eyebrow { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 0 0 22px; padding: 8px 16px; border: 1px solid #25534f; border-radius: 24px; background: #132f37; font-size: 15px; line-height: 1.3; color: #94debd; font-weight: 600; }
.demo-eyebrow > span { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #20b6c4; }
.demo-copy h1 { margin: 0 0 22px; font-family: 'Source Sans 3', 'Inter', sans-serif; font-size: 76px; line-height: .98; font-weight: 900; letter-spacing: 0; color: #eef4ff; }
.demo-copy h1 > span { background: linear-gradient(110deg, #1380a5 8%, #20aa93 58%, #28a869 92%); background-clip: text; -webkit-background-clip: text; color: transparent; }
.demo-description { max-width: 530px; margin: 0; color: #b5c7de; font-size: 21px; line-height: 1.5; }
.demo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.demo-actions a { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 12px 23px; border-radius: 8px; font-size: 16px; font-weight: 700; transition: transform 160ms ease, background 160ms ease; }
.demo-actions svg { width: 18px; height: 18px; flex-shrink: 0; }
.demo-primary { color: #fff; background: linear-gradient(110deg, #096e98, #167849); box-shadow: 0 9px 20px #0002; }
.demo-secondary { background: #0e1b2e; border: 1px solid #2d3b52; color: #e8f1ff; }
.demo-actions a:hover { transform: translateY(-2px); }
.demo-secondary:hover { background: #173044; }
.demo-stats { display: flex; gap: 36px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #243044; width: fit-content; }
.demo-stats dt { font-size: 34px; font-weight: 900; line-height: 1; color: #31b4c6; font-variant-numeric: tabular-nums; }
.demo-stats dd { margin: 7px 0 0; font-size: 14px; color: #b5c7de; line-height: 1.3; }
.demo-ecosystem { position: relative; width: min(100%, 530px); aspect-ratio: 1; justify-self: center; isolation: isolate; }
.demo-brand-ring { position: absolute; inset: 8%; border-radius: 50%; background: conic-gradient(from 160deg, #087bae, #1499b2 38%, #209d71 73%, #087bae); animation: demo-ring-turn 34s linear infinite; }
.demo-brand-ring::after { content: ''; position: absolute; inset: 13%; border: 24px solid #006c8340; border-radius: inherit; }
.demo-ring-depth { position: absolute; inset: 26%; border-radius: 50%; background: #0a1f2c; box-shadow: 0 4px 12px #0004; }
.demo-brand-core { position: absolute; inset: 30%; display: grid; place-items: center; padding: 5.5%; background: #fcffff; border-radius: 50%; box-shadow: 0 9px 18px #0003; }
.demo-brand-core img { width: 100%; height: 100%; object-fit: contain; }
.demo-orbit-outline { display: none; }
.demo-node { position: absolute; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 15px; white-space: nowrap; color: #24495a; background: #fff; border-radius: 24px; font-size: 14px; font-weight: 700; box-shadow: 0 3px 10px #06101d16; transition: transform 180ms ease; }
.demo-node::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #199eab; flex-shrink: 0; }
.demo-node [data-icon] { display: none; }
.demo-node:hover { transform: translateY(-3px); }
.node-finanzas { top: 16%; left: 8%; }
.node-tributario { top: 30%; right: 0; }
.node-tecnologia { bottom: 27%; left: 0; }
.node-estrategia { bottom: 21%; right: -1%; }
.node-digital { bottom: 3%; left: 50%; transform: translateX(-50%); }
.node-digital:hover { transform: translate(-50%, -3px); }
.demo-selector { display: flex; align-items: center; gap: 4px; position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 1100; background: #fff; color: #173346; padding: 5px; border: 1px solid #dde4eb; border-radius: 8px; box-shadow: 0 5px 18px #0613231a; }
.demo-selector > a { width: 44px; height: 40px; display: grid; place-items: center; border-radius: 5px; font-weight: 700; font-size: 15px; }
.demo-selector > a[aria-current] { color: #fff; background: #16754b; }
.demo-selector > a:not([aria-current]):hover { background: #edf3f6; }
.demo-motion { display: flex; align-items: center; gap: 7px; padding: 0 12px; min-height: 40px; border-left: 1px solid #dde4eb; font-size: 13px; cursor: pointer; white-space: nowrap; }
.demo-motion input { width: 16px; height: 16px; accent-color: #16754b; cursor: pointer; }
.demo-notice { position: fixed; bottom: 83px; left: 50%; transform: translateX(-50%); z-index: 1200; width: min(520px, calc(100% - 32px)); background: #fff; padding: 16px 20px; color: #173346; border: 1px solid #dce5ec; border-radius: 8px; box-shadow: 0 8px 28px #0b142326; }
.demo-header a:focus-visible, .demo-hero a:focus-visible, .demo-selector a:focus-visible, .demo-menu-button:focus-visible { outline: 3px solid #35dec3; outline-offset: 4px; }
.demo-hero ::selection { background: #22cd7d; color: #062638; }
.eco-demo { scrollbar-color: #56849a #eaf0f5; }
.demo-hero, .eco-demo section[id] { scroll-margin-top: 88px; }
.opcion-b .demo-header { background: #031b30; }
.opcion-b .demo-hero { background: radial-gradient(ellipse at 80% 5%, #063352 0, #031b30 56%, #031627 100%); }
.opcion-b .demo-eyebrow { border-color: #207185; background: #073149; color: #93edeb; margin-bottom: 28px; }
.opcion-b .demo-eyebrow > span { background: #25d898; }
.opcion-b .demo-copy h1 > span { color: #25d084; background: none; }
.opcion-b .demo-description { max-width: 510px; font-size: 23px; color: #b1d4e9; }
.opcion-b .demo-actions { margin-top: 34px; }
.opcion-b .demo-primary, .opcion-b .demo-nav-cta { color: #03293a; background: linear-gradient(110deg, #059bcd, #24df82); }
.opcion-b .demo-secondary { border-color: #2584a0; background: transparent; }
.opcion-b .demo-nav-cta { border-radius: 25px; }
.opcion-b .demo-ecosystem { width: min(100%, 540px); }
.opcion-b .demo-orbit-outline { display: block; position: absolute; inset: 5%; border: 1px solid #17bdd6; border-radius: 50%; }
.opcion-b .demo-orbit-outline::after { content: ''; position: absolute; inset: -8%; border: 1px solid #0b617933; border-radius: inherit; }
.opcion-b .demo-brand-ring { inset: 12%; background: conic-gradient(from 170deg, #23dc7c, #00bbbf 28%, #0868a4 54%, #0a96b7 79%, #23dc7c); }
.opcion-b .demo-brand-ring::after { inset: 15%; border: 0; background: #04324a; }
.opcion-b .demo-ring-depth { inset: 28%; background: #061b2c; }
.opcion-b .demo-brand-core { inset: 31%; padding: 7%; animation: demo-logo-sway 16s ease-in-out infinite; }
.opcion-b .demo-node { min-height: 66px; padding: 12px 24px; font-size: 19px; border: 1px solid transparent; border-radius: 40px; color: #f2f7ff; background: linear-gradient(#031d33, #031d33) padding-box, linear-gradient(115deg, #16ddb5, #129acd) border-box; box-shadow: 0 4px 12px #00172940; gap: 13px; }
.opcion-b .demo-node::before { position: absolute; width: 8px; height: 8px; bottom: -7px; background: #29dbb3; left: 50%; }
.opcion-b .demo-node [data-icon] { display: inline-flex; color: #20d6c0; }
.opcion-b .demo-node svg { width: 28px; height: 28px; stroke-width: 1.8; }
.opcion-b .node-finanzas { top: 0; left: 50%; transform: translateX(-50%); }
.opcion-b .node-finanzas:hover { transform: translate(-50%, -3px); }
.opcion-b .node-tributario { top: 35%; right: -3%; }
.opcion-b .node-tecnologia { bottom: 4%; left: 2%; }
.opcion-b .node-estrategia { bottom: 4%; right: 2%; }
.opcion-b .node-digital { top: 35%; bottom: auto; left: -3%; transform: none; }
.opcion-b .node-digital:hover { transform: translateY(-3px); }
.eco-demo.is-paused .demo-brand-ring, .eco-demo.is-paused .demo-brand-core, .eco-demo.is-paused .demo-node,
.eco-demo.is-offscreen .demo-brand-ring, .eco-demo.is-offscreen .demo-brand-core, .eco-demo.is-offscreen .demo-node { animation-play-state: paused; }
@keyframes demo-ring-turn { to { transform: rotate(360deg); } }
@keyframes demo-logo-sway { 0%, 100% { transform: perspective(800px) rotateY(-12deg); } 50% { transform: perspective(800px) rotateY(12deg); } }
@media (max-width: 1280px) {
  .demo-nav { gap: 18px; padding: 16px 24px; }
  .demo-nav-links { gap: 16px; }
  .demo-nav-links a, .demo-nav-cta { font-size: 14px; }
  .demo-brand-name { font-size: 16px; }
  .demo-hero-layout { gap: 40px; }
  .demo-copy h1 { font-size: 66px; }
  .demo-description { font-size: 20px; }
  .opcion-b .demo-description { font-size: 21px; }
  .opcion-b .demo-node { padding: 10px 18px; min-height: 58px; font-size: 17px; }
  .demo-actions { gap: 12px; }
  .demo-actions a { padding: 12px 18px; gap: 12px; }
}
@media (max-width: 1080px) {
  .demo-nav-links { display: none; }
  .demo-menu-button { display: grid; place-items: center; }
  .demo-nav-cta { margin-left: auto; }
  .demo-nav-links.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; top: 88px; left: 16px; right: 16px; padding: 14px 20px; background: #0b2235; border: 1px solid #305364; border-radius: 8px; box-shadow: 0 8px 24px #0003; }
  .demo-copy h1 { font-size: 58px; }
  .demo-hero { padding: 130px 28px 60px; }
  .demo-hero-layout { gap: 28px; }
  .demo-eyebrow { font-size: 13px; padding: 8px 12px; }
  .demo-actions a { font-size: 15px; }
  .opcion-b .demo-node { min-height: 50px; font-size: 15px; padding: 9px 15px; gap: 8px; }
  .opcion-b .demo-node svg { width: 23px; height: 23px; }
  .demo-brand-ring::after { border-width: 18px; }
}
@media (max-width: 760px) {
  .demo-nav { min-height: 76px; padding: 12px 20px; gap: 10px; }
  .demo-brand-icon { width: 38px; height: 38px; }
  .demo-brand { gap: 8px; }
  .demo-brand-name { font-size: 15px; }
  .demo-brand-name small { font-size: 11px; margin-top: 4px; }
  .demo-nav-cta { display: none; }
  .demo-menu-button { margin-left: auto; }
  .demo-video-control { margin-left: auto; }
  .demo-nav .demo-menu-button { margin-left: 0; }
  .demo-nav-links.is-open { top: 76px; }
  .demo-hero { padding: 96px 18px 24px; }
  .demo-hero-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 560px; }
  .demo-eyebrow, .opcion-b .demo-eyebrow { font-size: 12px; padding: 7px 10px; margin-bottom: 14px; }
  .demo-copy h1 { font-size: 44px; margin-bottom: 14px; }
  .demo-description, .opcion-b .demo-description { font-size: 16px; line-height: 1.5; }
  .demo-actions, .opcion-b .demo-actions { margin-top: 18px; gap: 8px; }
  .demo-actions a { flex: 1 1 calc(50% - 4px); padding: 10px 7px; min-height: 44px; font-size: 13.5px; gap: 5px; white-space: nowrap; }
  .demo-actions svg { width: 15px; height: 15px; }
  .demo-stats { gap: 32px; margin-top: 18px; padding-top: 16px; }
  .demo-stats dt { font-size: 26px; }
  .demo-stats dd { font-size: 12px; margin-top: 6px; }
  .demo-ecosystem { width: 240px; }
  .opcion-b .demo-ecosystem { width: 270px; }
  .demo-node { font-size: 11px; min-height: 36px; padding: 8px 10px; gap: 6px; }
  .node-tributario { right: -10%; }
  .node-tecnologia { left: -10%; }
  .node-estrategia { right: -8%; }
  .opcion-b .demo-node { font-size: 12px; min-height: 44px; padding: 8px 10px; gap: 6px; }
  .opcion-b .demo-node svg { width: 18px; height: 18px; }
  .opcion-b .node-tributario { right: -12%; }
  .opcion-b .node-digital { left: -12%; }
  .opcion-b .node-tecnologia { left: -3%; }
  .opcion-b .node-estrategia { right: -3%; }
  .demo-brand-ring::after { border-width: 15px; }
  .demo-hero, .eco-demo section[id] { scroll-margin-top: 76px; }
}
@media (max-width: 380px) {
  .demo-hero { padding-left: 18px; padding-right: 18px; }
  .demo-copy h1 { font-size: 42px; }
  .demo-eyebrow { font-size: 12px; }
  .demo-actions a { font-size: 12px; }
  .opcion-b .demo-ecosystem { width: 250px; }
  .opcion-b .demo-node { font-size: 11px; padding: 8px; gap: 5px; min-height: 44px; }
  .opcion-b .demo-node svg { width: 17px; height: 17px; }
}
@media (min-width: 761px) and (max-height: 800px) {
  .demo-hero { padding-top: 120px; padding-bottom: 40px; }
  .demo-copy h1 { font-size: 60px; }
  .demo-description, .opcion-b .demo-description { font-size: 18px; }
  .demo-ecosystem, .opcion-b .demo-ecosystem { max-width: 480px; }
  .demo-stats { padding-top: 16px; margin-top: 24px; }
  .demo-stats dt { font-size: 28px; }
  .demo-stats dd { font-size: 12px; }
}
@supports (offset-path: ellipse(45% 45% at 50% 50%)) {
  .eco-demo .demo-ecosystem .demo-node {
    top: 0; left: 0; right: auto; bottom: auto;
    offset-path: ellipse(45% 45% at 50% 50%);
    offset-anchor: center; offset-rotate: 0deg;
    offset-distance: var(--orbit-start);
    transform: none;
    animation: demo-label-orbit 90s linear infinite;
    animation-delay: var(--orbit-delay);
  }
  .node-finanzas { --orbit-start: 75%; --orbit-delay: -67.5s; }
  .node-tributario { --orbit-start: 95%; --orbit-delay: -85.5s; }
  .node-estrategia { --orbit-start: 15%; --orbit-delay: -13.5s; }
  .node-tecnologia { --orbit-start: 35%; --orbit-delay: -31.5s; }
  .node-digital { --orbit-start: 55%; --orbit-delay: -49.5s; }
  .eco-demo .demo-ecosystem .demo-node:hover { transform: translateY(-2px); }
  .eco-demo .demo-ecosystem:has(.demo-node:hover, .demo-node:focus-visible) .demo-node { animation-play-state: paused; }
  .eco-demo.is-paused .demo-ecosystem .demo-node,
  .eco-demo.is-offscreen .demo-ecosystem .demo-node { animation-play-state: paused; }
  @media (max-width: 760px) {
    .opcion-a .demo-node { max-width: 110px; white-space: normal; line-height: 1.2; text-align: center; }
  }
  @media (max-width: 380px) {
    .demo-ecosystem, .opcion-b .demo-ecosystem { width: 220px; }
    .opcion-a .demo-node { max-width: 104px; }
  }
}
@keyframes demo-label-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .demo-brand-ring, .demo-brand-core, .demo-node { animation: none !important; }
  .demo-header, .demo-node, .demo-actions a { transition: none; }
  html { scroll-behavior: auto !important; }
}



/* Nueva dirección visual: hero más despejado, sin anillo ni video de fondo. */
:root { --eco-navy:#102942; --eco-ink:#edf6fa; --eco-mint:#37c4a3; --eco-line:rgba(201,224,237,.15); }
html {scroll-behavior:smooth;}
body.eco-demo { background:var(--eco-navy); }
.eco-demo .demo-header { background:rgba(14,35,55,.94); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid rgba(207,234,246,.08); }
.eco-demo .demo-header.is-scrolled {background:rgba(11,29,48,.97);box-shadow:0 9px 35px rgba(0,0,0,.13);}
.eco-demo .demo-nav {max-width:1360px;min-height:82px;padding:14px clamp(20px,4vw,60px);gap:18px;}
.eco-demo .demo-brand {text-decoration:none;}
.eco-demo .demo-brand-icon {width:43px;height:43px;box-shadow:0 0 0 1px rgba(255,255,255,.2);}
.eco-demo .demo-brand-name {font-size:15px;letter-spacing:.045em;font-weight:800;}
.eco-demo .demo-brand-name small {font-size:9px;letter-spacing:.21em;margin-top:5px;}
.eco-demo .demo-nav-links {gap:clamp(11px,1.5vw,23px);}
.eco-demo .demo-nav-links a {font-size:13.5px;font-weight:600;color:#b9cedb;text-decoration:none;}
.eco-demo .demo-nav-links a:hover {color:#fff;}
.eco-demo .demo-nav-cta {border-radius:7px;min-height:42px;padding:0 17px;font-size:13px;background:#1ba686;color:#fff;text-decoration:none;box-shadow:none;transition:background .2s,transform .2s;}
.eco-demo .demo-nav-cta:hover {background:#20ba96;transform:translateY(-1px);}
.eco-demo .eco-film-hero {overflow:hidden;min-height:min(840px,100svh);min-height:max(700px,100svh);padding:148px clamp(24px,5vw,72px) 100px;background: radial-gradient(ellipse 50% 55% at 87% 38%,rgba(27,101,113,.25),transparent 75%),radial-gradient(ellipse 60% 75% at 7% 97%,rgba(23,76,120,.27),transparent 72%),linear-gradient(125deg,#102941 0%,#112b43 52%,#0d263d 100%);}
.eco-film-hero::before {content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(90deg,rgba(9,25,45,.18),transparent 52%);}
.eco-noise {position:absolute;inset:0;z-index:0;opacity:.13;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.19'/%3E%3C/svg%3E");}
.eco-hero-grid {position:absolute;inset:0 0 0 56%;background-image:linear-gradient(rgba(138,205,218,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(138,205,218,.035) 1px,transparent 1px);background-size:60px 60px;mask-image:linear-gradient(90deg,transparent,#000);pointer-events:none;z-index:0;}
.eco-demo .eco-film-hero .demo-hero-layout {max-width:1310px;margin:auto;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(34px,4.5vw,88px);position:relative;z-index:2;}
.eco-film-copy {padding:12px 0 32px;max-width:575px;}
.eco-film-kicker {margin:0 0 26px;display:flex;align-items:center;gap:11px;color:#99d9d0;letter-spacing:.21em;font-size:11px;font-weight:700;line-height:1.5;}
.eco-kicker-rule {width:25px;height:2px;background:var(--eco-mint);flex-shrink:0;}
.eco-demo .eco-film-copy h1 {font-size:clamp(48px,4.7vw,73px);line-height:1.04;letter-spacing:-.045em!important;font-weight:800;max-width:660px;margin:0 0 25px;color:var(--eco-ink);text-wrap:balance;}
.eco-demo .eco-film-copy h1 span {background:linear-gradient(95deg,#1e9fcb 8%,#3fceb0 65%,#54d392);background-clip:text;-webkit-background-clip:text;color:transparent;}
.eco-demo .eco-film-copy .demo-description {max-width:495px;color:#b9cbda;font-size:clamp(16px,1.4vw,19px);line-height:1.64;}
.eco-demo .eco-film-copy .demo-actions {margin-top:30px;gap:12px;}
.eco-demo .eco-film-copy .demo-actions a {display:inline-flex;min-height:51px;padding:12px 21px;gap:17px;font-size:14px;border-radius:7px;text-decoration:none;box-shadow:none;transform:none;transition:background .2s, border-color .2s, transform .2s;}
.eco-demo .eco-film-copy .demo-actions a:hover {transform:translateY(-2px);}
.eco-demo .eco-film-copy .demo-primary {background:#1baa89;color:white;}
.eco-demo .eco-film-copy .demo-primary:hover {background:#23c09b;}
.eco-demo .eco-film-copy .demo-secondary {background:transparent;border:1px solid #57758b;color:#ecf5fb;}
.eco-demo .eco-film-copy .demo-secondary:hover {background:rgba(255,255,255,.07);border-color:#a9cbd2;}
.eco-film-details {display:flex;flex-wrap:wrap;align-items:center;gap:11px 16px;margin-top:39px;padding-top:20px;border-top:1px solid var(--eco-line);color:#91abbc;letter-spacing:.13em;font-size:10px;font-weight:700;}
.eco-film-details span:not(:last-child)::after {content:'·';margin-left:15px;color:#38b99f;font-size:15px;vertical-align:-1px;}
.eco-film-scene {position:relative;min-width:0;width:100%;z-index:1;isolation:isolate;transform:translateY(7px);}
.eco-film-halo {position:absolute;inset:-24% -15%;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 57% 45%,rgba(19,154,167,.21),rgba(7,82,118,.11) 42%,transparent 69%);filter:blur(20px);}
.eco-film-label {display:flex;align-items:center;gap:9px;margin:0 0 14px 9px;font-size:10px;font-weight:800;letter-spacing:.17em;color:#b3d4db;}
.eco-label-dot {display:block;width:6px;height:6px;border-radius:50%;background:#45cdb0;box-shadow:0 0 13px rgba(69,205,176,.6);}
.eco-label-time {font-variant-numeric:tabular-nums;letter-spacing:.06em;color:#7e9ead;}
.eco-film-window {position:relative;isolation:isolate;aspect-ratio:16/9;border-radius:19px;overflow:hidden;border:1px solid rgba(159,209,226,.20);box-shadow:0 24px 65px rgba(0,0,0,.31),0 0 0 6px rgba(165,219,227,.025);background:#0a1d36;}
.eco-film-window::after {content:'';position:absolute;z-index:2;inset:0;border-radius:inherit;box-shadow:inset 0 0 44px rgba(5,21,36,.28);pointer-events:none;}
.eco-film-video {display:block;width:100%;height:100%;object-fit:contain;background:#091b32;}
.eco-film-vignette {position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(10,34,54,.29),transparent 14%,transparent 90%,rgba(9,24,43,.05)),linear-gradient(0deg,rgba(4,16,30,.62),transparent 22%);}
.eco-film-video-controls {position:absolute;inset:auto 14px 15px 16px;display:flex;align-items:end;justify-content:space-between;gap:10px;z-index:3;}
.eco-playback-status {display:flex;gap:8px;align-items:center;color:#e7f5f7;font-size:11px;font-weight:600;text-shadow:0 1px 4px #000;}
.eco-status-dot {height:5px;width:5px;border-radius:50%;background:#39c8aa;}
.eco-film-buttons {display:flex;gap:6px;}
.eco-icon-button {display:grid;place-items:center;min-height:39px;min-width:39px;padding:0;border-radius:9px;border:1px solid rgba(235,251,255,.28);color:#fff;background:rgba(8,22,37,.54);backdrop-filter:blur(7px);cursor:pointer;font-family:inherit;font-size:20px;font-weight:600;transition:background .18s;}
.eco-icon-button:hover {background:rgba(31,155,146,.8);}
.eco-film-progress {position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.22);z-index:4;}
.eco-film-progress span {display:block;width:0%;height:100%;background:linear-gradient(90deg,#0b99cb,#40cba2);transition:width .15s linear;}
.eco-film-bottom {display:flex;align-items:center;justify-content:space-between;gap:15px;margin:17px 5px 0;color:#91aebf;letter-spacing:.11em;font-size:10px;font-weight:700;}
.eco-film-bottom>span {display:flex;align-items:center;gap:9px;}
.eco-bottom-stroke {display:block;width:25px;height:1px;background:rgba(150,191,201,.55);}
.eco-see-video {background:none;border:0;color:#bfece4;cursor:pointer;font:inherit;font-weight:700;letter-spacing:0;font-size:12px;padding:9px 2px;white-space:nowrap;}
.eco-see-video span {margin-left:4px;}
.eco-see-video:hover {color:white;}
.eco-down-indicator {position:absolute;z-index:2;left:clamp(24px,5vw,72px);bottom:35px;display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.2em;font-weight:700;color:#91adbb;text-decoration:none;}
.eco-down-indicator span:last-child {font-size:18px;color:#40c4a5;}
.eco-video-dialog {position:fixed;inset:0;margin:auto;max-width:min(1180px,calc(100vw - 36px));width:100%;padding:16px;background:#071c30;border:1px solid #436478;border-radius:18px;color:#f1fbff;box-shadow:0 35px 100px #000b;}
.eco-video-dialog::backdrop {background:rgba(1,10,19,.89);backdrop-filter:blur(8px);}
.eco-dialog-top {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:5px 4px 16px;font-size:12px;letter-spacing:.11em;font-weight:800;}
.eco-dialog-muted {color:#85adbb;font-weight:500;}
.eco-dialog-close {background:#153b50;color:white;border:1px solid #467c83;border-radius:9px;padding:10px 14px;cursor:pointer;font-size:13px;}
.eco-video-dialog video {display:block;width:100%;max-height:calc(100svh - 150px);aspect-ratio:16/9;object-fit:contain;border-radius:9px;background:#061a2e;}
.eco-demo .demo-notice {background:#f4fbfa;color:#14354a;}
.eco-demo .demo-hero a:focus-visible,.eco-demo .demo-hero button:focus-visible,.eco-demo .demo-header a:focus-visible,.eco-demo .demo-header button:focus-visible,.eco-video-dialog button:focus-visible {outline:3px solid #58dbbf;outline-offset:3px;}
@media (prefers-reduced-motion:no-preference) {
 .eco-film-copy {animation:eco-copy-in .8s .1s both cubic-bezier(.2,.7,.15,1);}
 .eco-film-scene {animation:eco-scene-in 1s .24s both cubic-bezier(.2,.7,.15,1);}
 @keyframes eco-copy-in {from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
 @keyframes eco-scene-in {from{opacity:0;transform:translate(15px,7px)}to{opacity:1;transform:translateY(7px)}}
}
@media (max-width:1080px) {
 .eco-demo .eco-film-hero .demo-hero-layout {gap:30px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);}
 .eco-demo .eco-film-copy h1 {font-size:clamp(43px,5.5vw,62px);}
 .eco-demo .eco-film-copy .demo-description {font-size:16px;}
 .eco-demo .demo-nav-links {gap:11px;}
 .eco-demo .demo-nav-links a {font-size:12px;}
 .eco-film-details {gap:8px 12px;}
}
@media (max-width:880px) {
 .eco-demo .demo-nav-links {position:fixed;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;right:-105%;top:76px;width:min(310px,85vw);height:calc(100dvh - 76px);background:#102a41;box-shadow:-10px 20px 50px #0005;padding:25px;transition:right .25s ease;z-index:1102;}
 .eco-demo .demo-nav-links.is-open {right:0;}
 .eco-demo .demo-nav-links a {color:#eef9fd;font-size:16px;padding:10px 6px;}
 .eco-demo .demo-menu-button {display:grid;place-items:center;z-index:1103;}
 .eco-demo .demo-menu-button svg {width:22px;height:22px;}
 .eco-demo .demo-nav-cta {margin-left:auto;}
 .eco-demo .eco-film-hero {min-height:auto;padding:130px 28px 92px;}
 .eco-demo .eco-film-hero .demo-hero-layout {grid-template-columns:minmax(0,1fr);max-width:680px;gap:43px;}
 .eco-film-copy {padding:0;max-width:610px;}
 .eco-demo .eco-film-copy h1 {font-size:clamp(49px,7.7vw,70px);}
 .eco-demo .eco-film-copy .demo-description {max-width:580px;font-size:18px;}
 .eco-film-scene {transform:none;}
 .eco-down-indicator {bottom:22px;left:28px;}
 .eco-film-bottom {font-size:10px;}
}
@media (max-width:520px) {
 .eco-demo .demo-nav {padding:12px 17px;min-height:72px;}
 .eco-demo .demo-brand-name {font-size:12px;}
 .eco-demo .demo-brand-name small {font-size:8px;}
 .eco-demo .demo-brand-icon {width:37px;height:37px;}
 .eco-demo .demo-nav-cta {display:none;}
 .eco-demo .demo-nav-links {top:72px;height:calc(100dvh - 72px);}
 .eco-demo .eco-film-hero {padding:123px 18px 75px;}
 .eco-demo .eco-film-hero .demo-hero-layout {gap:33px;}
 .eco-film-kicker {font-size:9px;letter-spacing:.12em;margin-bottom:19px;}
 .eco-demo .eco-film-copy h1 {font-size:clamp(43px,11.4vw,59px);line-height:1.08;margin-bottom:17px;}
 .eco-demo .eco-film-copy .demo-description {font-size:15.5px;line-height:1.58;}
 .eco-demo .eco-film-copy .demo-actions {gap:9px;margin-top:23px;}
 .eco-demo .eco-film-copy .demo-actions a {min-height:46px;padding:10px 12px;gap:8px;font-size:12.5px;flex:initial;white-space:normal;}
 .eco-film-details {margin-top:26px;padding-top:15px;gap:5px 9px;font-size:8.5px;letter-spacing:.06em;}
 .eco-film-details span:not(:last-child)::after {margin-left:8px;}
 .eco-film-label {font-size:9px;margin-left:2px;}
 .eco-film-window {border-radius:12px;}
 .eco-film-video-controls {inset:auto 8px 9px 10px;}
 .eco-playback-status {font-size:9px;}
 .eco-icon-button {min-height:32px;min-width:32px;font-size:16px;border-radius:6px;}
 .eco-film-bottom {align-items:flex-start;flex-direction:column;gap:2px;margin:11px 1px 0;}
 .eco-see-video {font-size:12px;}
 .eco-down-indicator {left:18px;bottom:15px;font-size:9px;}
 .eco-dialog-top {font-size:10px;}
 .eco-video-dialog {padding:9px;}
}
@media (prefers-reduced-motion: reduce) {
 .eco-film-copy,.eco-film-scene {animation:none!important;transform:none!important;}
 .eco-demo .demo-nav-links {transition:none!important;}
 .eco-film-progress span {transition:none!important;}
}


/* EL HERO. Tipografía corta a la izquierda, logotipo animado y video oculto a la derecha. */
:root {--swap-navy:#10263e;--swap-blue:#167ba5;--swap-aqua:#31b6b9;--swap-green:#35c98e;}
.eco-demo .eco-swap-hero {
 position:relative;display:flex;align-items:center;justify-content:center;
 min-height:max(660px,calc(100svh - 82px));
 padding:100px clamp(22px,5.7vw,96px) 96px;isolation:isolate;
 background:radial-gradient(ellipse 62% 80% at 92% 47%,rgba(29,105,126,.22),transparent 72%),
 radial-gradient(ellipse 58% 72% at 0% 98%,rgba(12,66,112,.25),transparent 80%),
 linear-gradient(115deg,#0e2339 0%,#112c46 54%,#102c42 100%);
 overflow:hidden;
}
.eco-swap-hero::before {content:'';position:absolute;inset:0;pointer-events:none;opacity:.11;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");z-index:0;}
.eco-swap-glow {position:absolute;inset:20% 0% auto auto;width:60%;height:75%;background:radial-gradient(ellipse,rgba(17,131,144,.09),transparent 67%);pointer-events:none;}
.eco-demo .eco-swap-layout {position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.89fr) minmax(0,1.11fr);align-items:center;gap:clamp(22px,4vw,75px);width:100%;max-width:1390px;margin:auto;}
.eco-swap-copy {min-width:0;padding-bottom:10px;}
.eco-demo .eco-swap-copy h1 {margin:0 0 37px;line-height:1.04;font-size:clamp(48px,5.35vw,82px);letter-spacing:-.048em;font-weight:800;color:#f1f7fa;text-wrap:balance;}
.eco-swap-gradient {background:linear-gradient(100deg,#1897c2,#26b7b8 48%,#48ce97);background-clip:text;-webkit-background-clip:text;color:transparent;}
.eco-swap-strong {color:#f1f7fa;}
.eco-swap-actions {display:flex;align-items:center;flex-wrap:wrap;gap:11px;}
.eco-swap-actions a {font-size:13.5px;display:inline-flex;align-items:center;justify-content:space-between;gap:18px;white-space:nowrap;min-height:50px;padding:12px 18px;border-radius:8px;text-decoration:none;font-weight:700;transition:background .22s,transform .22s,border-color .22s;}
.eco-swap-actions a:hover {transform:translateY(-2px);}
.eco-swap-primary {background:#20a88c;color:white;box-shadow:0 12px 23px rgba(14,99,106,.12);}
.eco-swap-primary:hover {background:#2ac5a4;}
.eco-swap-secondary {border:1px solid #59778c;color:#e3f4f6;background:rgba(255,255,255,.025);}
.eco-swap-secondary:hover {background:rgba(255,255,255,.08);border-color:#7da1b6;}
.eco-swap-right {width:100%;min-width:0;max-width:710px;justify-self:center;}
.eco-swap-stage {position:relative;width:100%;height:auto;aspect-ratio:1.45;perspective:1000px;isolation:isolate;}
.eco-swap-backdrop {position:absolute;z-index:0;inset:7% -4%;background:radial-gradient(ellipse at center,rgba(5,163,178,.16),rgba(5,96,144,.04) 54%,transparent 75%);filter:blur(18px);pointer-events:none;}
/* La "sombra" tiene desde el inicio la forma real del video, pero queda detrás del logotipo. */
.eco-swap-video-card {position:absolute;left:50%;top:50%;width:96%;aspect-ratio:16/9;overflow:hidden;border-radius:17px;
 transform:translate(-42%,-44%) rotate(-7deg) scale(.91);transform-origin:center;
 background:#102842;border:1px solid rgba(84,197,205,.25);opacity:.26;filter:blur(3px) saturate(.72);
 box-shadow:0 30px 80px rgba(0,0,0,.52),0 0 30px rgba(52,187,187,.15);
 z-index:1;pointer-events:none;transition:transform 1050ms cubic-bezier(.16,.72,.12,1),opacity 800ms ease,filter 900ms ease,box-shadow 800ms ease;
}
.eco-swap-video {display:block;width:100%;height:100%;object-fit:contain;background:#061a31;}
.eco-swap-video-vignette {position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(7,24,42,.20),transparent 37%);}
.eco-swap-video-progress {position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(217,253,255,.17);opacity:0;transition:opacity .4s;}
.eco-swap-video-progress span {display:block;width:0%;height:100%;background:linear-gradient(90deg,#1a9ecd,#49d49e);}
/* No es otro anillo: es el logotipo original limpio, flotando frente a su sombra audiovisual. */
.eco-swap-logo {position:absolute;z-index:3;left:50%;top:49%;width:min(64%,360px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;
 padding:14px;border:0;border-radius:50%;background:transparent;color:#d7f8f6;cursor:pointer;
 transform:translate(-50%,-50%) scale(1);transform-origin:center;transition:transform 1050ms cubic-bezier(.16,.72,.12,1),opacity 700ms ease,filter 800ms ease;
 outline-offset:8px;}
.eco-swap-logo-light {position:absolute;inset:5%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(17,65,84,.71) 0%,rgba(12,42,65,.55) 55%,transparent 73%);filter:blur(10px);box-shadow:0 22px 52px rgba(1,11,26,.22);pointer-events:none;}
.eco-swap-logo img {position:relative;z-index:1;width:85%;height:85%;object-fit:contain;filter:drop-shadow(0 17px 21px rgba(0,14,35,.19));transition:filter .25s;user-select:none;}
.eco-swap-logo:hover img {filter:drop-shadow(0 0 15px rgba(54,206,189,.34));}
.eco-swap-logo-action {position:absolute;left:50%;bottom:-9%;display:flex;align-items:center;gap:10px;padding:10px 14px;transform:translateX(-50%);
 color:#d1f8f1;white-space:nowrap;font-size:11px;letter-spacing:.04em;font-weight:700;border:1px solid rgba(134,209,213,.25);background:rgba(8,33,55,.84);border-radius:100px;
 box-shadow:0 8px 26px rgba(1,15,29,.2);transition:background .2s;}
.eco-swap-logo:hover .eco-swap-logo-action {background:#15536b;}
.eco-swap-play-icon {color:#5cdbba;font-size:9px;}
/* Intercambio espacial: la sombra crece a video frontal, logo se retira como eco discreto. */
.eco-swap-stage.is-video-active .eco-swap-video-card {transform:translate(-50%,-50%) rotate(0) scale(1);filter:blur(0) saturate(1);opacity:1;z-index:4;pointer-events:auto;
 box-shadow:0 27px 63px rgba(0,0,0,.36),0 0 0 1px rgba(103,205,212,.2);}
.eco-swap-stage.is-video-active .eco-swap-logo {transform:translate(-72%,-76%) scale(.72) rotate(-13deg);opacity:.13;filter:blur(3px);z-index:2;pointer-events:none;}
.eco-swap-stage.is-video-active .eco-swap-video-progress {opacity:1;}
.eco-swap-skip {position:absolute;right:0;bottom:1px;z-index:5;border:1px solid rgba(181,225,230,.3);background:rgba(10,37,57,.87);color:#ecf9f8;border-radius:100px;
 padding:10px 14px;font-size:12px;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .3s,transform .3s;}
.eco-swap-skip:hover {background:#185067;}
.eco-swap-stage.is-video-active .eco-swap-skip {opacity:1;pointer-events:auto;transform:translateY(0);}
.eco-swap-understage {height:30px;margin-top:18px;color:#9bbbc8;display:flex;justify-content:center;align-items:center;gap:10px;font-size:12px;font-weight:500;text-align:center;}
.eco-swap-indicator {display:block;width:5px;height:5px;border-radius:50%;background:#37cda9;box-shadow:0 0 12px rgba(64,215,177,.42);flex:none;}
.eco-swap-playback {padding:5px 9px;border:1px solid #397785;background:#18415a;border-radius:6px;color:#fff;font-size:12px;cursor:pointer;}
.eco-swap-playback[hidden] {display:none;}
.eco-swap-scroll {position:absolute;bottom:24px;left:clamp(22px,5.7vw,96px);color:#91b2bf;font-size:11px;font-weight:650;letter-spacing:.13em;text-decoration:none;display:flex;align-items:center;gap:9px;}
.eco-swap-scroll span {color:#52d6b0;font-size:17px;}
.eco-swap-hero a:focus-visible,.eco-swap-hero button:focus-visible {outline:3px solid #65e8ce;outline-offset:4px;}
@media (prefers-reduced-motion:no-preference){
  .eco-swap-copy {animation:ecoSwapText .85s .12s both cubic-bezier(.19,.75,.15,1);}
  .eco-swap-right {animation:ecoSwapRight 1.05s .2s both cubic-bezier(.18,.68,.18,1);}
  @keyframes ecoSwapText {from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
  @keyframes ecoSwapRight {from{opacity:0;transform:translateY(19px)}to{opacity:1;transform:none}}
}
@media (max-width:1130px){
 .eco-demo .eco-swap-copy h1 {font-size:clamp(43px,5.2vw,67px);}
 .eco-demo .eco-swap-layout {grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:15px;}
 .eco-swap-logo {width:min(64%,315px);}
}
@media (max-width:880px){
 .eco-demo .eco-swap-hero {min-height:auto;padding:110px 26px 95px;}
 .eco-demo .eco-swap-layout {display:flex;flex-direction:column;align-items:stretch;gap:19px;max-width:640px;}
 .eco-swap-copy {text-align:left;padding-bottom:0;}
 .eco-demo .eco-swap-copy h1 {font-size:clamp(46px,7vw,69px);margin-bottom:26px;}
 .eco-swap-right {max-width:610px;}
 .eco-swap-stage {aspect-ratio:1.55;}
 .eco-swap-logo {width:min(58%,330px);}
 .eco-swap-scroll {bottom:22px;left:26px;}
}
@media (max-width:520px){
 .eco-demo .eco-swap-hero {padding:110px 18px 76px;}
 .eco-demo .eco-swap-copy h1 {font-size:clamp(41px,11vw,57px);margin-bottom:22px;}
 .eco-swap-actions {gap:9px;}
 .eco-swap-actions a {font-size:12px;min-height:44px;padding:9px 12px;gap:8px;}
 .eco-swap-right {margin-top:6px;}
 .eco-swap-stage {aspect-ratio:1.23;}
 .eco-swap-logo {width:68%;}
 .eco-swap-video-card {width:98%;border-radius:12px;}
 .eco-swap-logo-action {padding:8px 11px;font-size:10px;bottom:-5%;}
 .eco-swap-understage {font-size:11px;min-height:42px;height:auto;margin-top:4px;}
 .eco-swap-scroll {left:18px;bottom:15px;}
}
@media (prefers-reduced-motion:reduce){
 .eco-swap-copy,.eco-swap-right {animation:none!important;}
 .eco-swap-video-card,.eco-swap-logo,.eco-swap-skip,.eco-swap-video-progress {transition:none!important;}
}


/* COMPONENTES VISUALES DEL AMBIENTE: totalmente decorativos y sin afectar botones. */
.eco-demo .eco-swap-hero {background:
 radial-gradient(ellipse 49% 76% at 92% 52%, rgba(20,119,132,.13),transparent 78%),
 radial-gradient(ellipse 52% 69% at 0% 96%, rgba(14,77,117,.27),transparent 77%),
 linear-gradient(120deg,#0d2238 0%,#132f48 58%,#102b43 100%);}
.eco-swap-stage {isolation:isolate;}
.eco-fx-field {position:absolute;z-index:0;inset:-21% -12%;overflow:visible;pointer-events:none;transform:translate3d(calc(var(--fx-x, 0px) * .5),calc(var(--fx-y,0px) * .5),0);transition:transform .6s ease-out;}
.eco-fx-ambient {position:absolute;inset:10% 5%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(22,139,161,.16),rgba(18,92,137,.09) 37%,transparent 67%);filter:blur(21px);animation:fxBreathe 10s ease-in-out infinite alternate;}
.eco-fx-dots {position:absolute;inset:9%;opacity:.14;background:radial-gradient(circle,rgba(112,189,213,.75) .8px, transparent 1px) 0 0/27px 27px;mask-image:radial-gradient(ellipse at center, transparent 30%, black 75%, transparent 96%);-webkit-mask-image:radial-gradient(ellipse at center, transparent 30%, black 75%, transparent 96%);}
.eco-fx-lines {position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 12px rgba(18,116,153,.08));}
.eco-fx-lines g.fx-mode-orbits,.eco-fx-lines g.fx-mode-arcs,.eco-fx-lines g.fx-mode-ripples {opacity:0;transition:opacity .65s ease;}
@keyframes fxBreathe {from{opacity:.72;transform:scale(.97)}to{opacity:1;transform:scale(1.045)}}

/* A. ORBITAS: finísimas trayectorias completas, cada una a velocidad diferente. */
body[data-eco-fx="orbitas"] .fx-mode-orbits {opacity:1;}
.fx-orbit {fill:none;stroke:url(#fxSapphire);stroke-width:1.35;opacity:.38;transform-box:fill-box;transform-origin:center;}
.fx-orbit-one {stroke-width:1.9;opacity:.53;stroke-dasharray:530 110 220 1260;animation:fxSpin 63s linear infinite;}
.fx-orbit-two {opacity:.3;stroke-dasharray:100 8 380 200 410 800;animation:fxSpinBack 83s linear infinite;}
.fx-orbit-three {opacity:.18;stroke-width:.9;stroke-dasharray:15 8;animation:fxSpin 120s linear infinite;}
.fx-orbit-dashed {fill:none;stroke:#a0d9ed;stroke-width:.75;opacity:.16;stroke-dasharray:3 15;}
.fx-orbit-satellite {transform-box:view-box;transform-origin:379px 292px;animation:fxSpin 63s linear infinite;}
.fx-orbit-satellite-2 {animation:fxSpinBack 83s linear infinite;}
@keyframes fxSpin {to{transform:rotate(360deg)}}
@keyframes fxSpinBack {to{transform:rotate(-360deg)}}
body[data-eco-fx="orbitas"] .eco-fx-ambient {background:radial-gradient(ellipse,rgba(19,145,170,.16),rgba(17,61,96,.09) 48%,transparent 71%);}

/* B. ARCOS: líneas incompletas deliberadas con terminales luminosos, sin disco enorme. */
body[data-eco-fx="arcos"] .fx-mode-arcs {opacity:1;}
.fx-arc-guide {fill:none;stroke:#87c9dd;stroke-width:.9;opacity:.13;stroke-dasharray:2 11;}
.fx-arc-guide2 {opacity:.10;}
.fx-arc {fill:none;stroke:url(#fxEmerald);stroke-linecap:round;stroke-width:2.1;opacity:.7;filter:drop-shadow(0 0 4px rgba(45,168,177,.11));}
.fx-arc-major {stroke-width:2.6;opacity:.78;stroke-dasharray:485 500;animation:fxArcFlow 20s ease-in-out infinite alternate;}
.fx-arc-secondary {opacity:.62;stroke-width:1.8;stroke-dasharray:378 450;animation:fxArcFlow 26s ease-in-out infinite alternate-reverse;}
.fx-arc-tertiary {stroke-width:2.4;opacity:.62;}
.fx-arc-small {opacity:.45;stroke-width:1.6;}
.fx-arc-node {fill:#73edd7;opacity:.9;}
.fx-arc-node-halo {fill:#5bdac1;opacity:.13;filter:url(#fxSoftGlow);}
@keyframes fxArcFlow {to{stroke-dashoffset:25;opacity:.5}}
body[data-eco-fx="arcos"] .eco-fx-dots {opacity:.09;}
body[data-eco-fx="arcos"] .eco-fx-ambient {background:radial-gradient(ellipse at 60% 50%,rgba(16,157,150,.18),rgba(4,91,159,.04) 62%,transparent 72%);}

/* C. ONDAS: el diseño espera quieto y emite pulsos UNICAMENTE al intercambiar los planos. */
body[data-eco-fx="ondas"] .fx-mode-ripples {opacity:1;}
.fx-ripple-trace {fill:none;stroke:url(#fxSapphire);stroke-width:1;opacity:.22;stroke-dasharray:4 12;}
.fx-ripple-trace2 {opacity:.13;stroke-dasharray:3 19;}
.fx-ripple-crescent {fill:none;stroke:#5ad4c3;stroke-width:1.7;opacity:.33;stroke-linecap:round;}
.fx-ripple-wave {fill:none;stroke:url(#fxEmerald);stroke-width:2.2;opacity:0;transform-box:fill-box;transform-origin:center;}
body[data-eco-fx="ondas"] .eco-swap-stage.fx-pulsing .fx-ripple-wave {animation:fxRipple 2.4s ease-out both;}
body[data-eco-fx="ondas"] .eco-swap-stage.fx-pulsing .wave-2 {animation-delay:.26s;}
body[data-eco-fx="ondas"] .eco-swap-stage.fx-pulsing .wave-3 {animation-delay:.52s;}
@keyframes fxRipple {0%{transform:scale(.67);opacity:0;stroke-width:2.8}15%{opacity:.55}100%{transform:scale(1.75);opacity:0;stroke-width:.65}}
body[data-eco-fx="ondas"] .eco-fx-ambient {background:radial-gradient(ellipse at 50% 50%,rgba(36,174,170,.13),rgba(15,76,110,.06) 50%,transparent 72%);}

/* Sin movimiento si el dispositivo lo pide; las formas permanecen visibles. */
@media (prefers-reduced-motion:reduce) {
 .eco-fx-field,.eco-fx-ambient,.fx-orbit,.fx-orbit-satellite,.fx-arc,.fx-ripple-wave {animation:none!important;transition:none!important;}
 .eco-swap-stage.fx-pulsing .fx-ripple-wave {animation:none!important;opacity:0!important;}
}
@media (max-width:880px) {.eco-fx-field {inset:-16% -7%;}}
@media (max-width:520px) {.eco-fx-field {inset:-12% -5%;}.eco-fx-dots {opacity:.07}.fx-orbit-dashed{opacity:.06}}


.eco-swap-hero::before, .eco-swap-glow, .eco-swap-backdrop,
.eco-fx-ambient, .eco-fx-dots, .eco-swap-logo-light { display: none; }
.eco-demo .eco-swap-copy h1 { font-size: 72px; letter-spacing: 0; }
.eco-swap-stage { contain: layout; }
.eco-swap-video-card { border-radius: 8px; background: transparent; border-color: transparent; filter: none; opacity: 0; box-shadow: none; transition: transform 650ms cubic-bezier(.16,1,.3,1), opacity 450ms ease, filter 450ms ease; }
.eco-swap-logo { transition: transform 650ms cubic-bezier(.16,1,.3,1), opacity 350ms ease; }
.eco-swap-logo img, .eco-swap-logo:hover img { filter: none; }
.eco-swap-logo-action { letter-spacing: 0; min-height: 36px; font-size: 12px; box-shadow: none; }
.eco-swap-stage.is-video-active .eco-swap-logo { filter: none; opacity: 0; }
.eco-swap-stage.is-video-active .eco-swap-video-card { background: #061a31; border-color: #54c5cd40; filter: none; opacity: 1; box-shadow: 0 20px 48px #0005; }
.eco-swap-video-vignette, .eco-swap-video-progress { display: none; }
.eco-swap-video { border-radius: 7px; opacity: 0; visibility: hidden; transition: opacity 250ms ease; }
.eco-swap-stage.is-video-active .eco-swap-video { opacity: 1; visibility: visible; }
.eco-hero-shapes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
.eco-hero-shapes path, .eco-hero-shapes rect { fill: none; vector-effect: non-scaling-stroke; stroke-width: 1; }
.eco-shape-flow { stroke: #65a6b6; opacity: .13; }
.eco-shape-flow-secondary { stroke: #65b89c; opacity: .08; }
.eco-shape-frame { stroke: #72b29f; opacity: .15; }
.eco-swap-skip { min-height: 40px; padding: 8px 13px; border-radius: 6px; bottom: -12px; right: 8px; }
.eco-swap-understage { min-height: 44px; height: auto; flex-wrap: wrap; gap: 8px 12px; line-height: 1.5; }
.eco-swap-indicator { box-shadow: none; }
.eco-swap-logo-action { display: none; }
.eco-home-orbitas .eco-swap-logo-action {
  left: 62%; right: auto; top: -13%; bottom: auto;
  width: 56%; aspect-ratio: 340 / 180; transform: rotate(7deg);
  min-height: 0; padding: 0; gap: 0; border: 0; border-radius: 0;
  background: transparent; color: #082c42; font-size: 26px;
  line-height: 1.3; font-weight: 700; white-space: nowrap;
  box-shadow: none; z-index: 2;
}
.eco-home-orbitas .eco-swap-stage.needs-introduction .eco-swap-logo-action:not([hidden]) { display: block; }
.eco-home-orbitas .eco-swap-logo:hover .eco-swap-logo-action { background: transparent; }
.eco-home-orbitas .eco-swap-logo-action .eco-invite-bubble { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 12px #0003); }
.eco-home-orbitas .eco-invite-text { position: absolute; inset: 13.33% 10.29% 26.67% 2.65%; display: grid; place-items: center; }
@media (prefers-reduced-motion: no-preference) {
  .eco-home-orbitas .eco-swap-stage.needs-introduction .eco-swap-logo img { animation: ecoLogoInvite 3.8s ease-in-out infinite; }
  .eco-home-orbitas .eco-swap-stage.needs-introduction .eco-swap-logo-action { animation: ecoInviteEnter 350ms cubic-bezier(.16,1,.3,1) both; }
  .eco-home-orbitas.eco-hero-inactive .eco-swap-stage.needs-introduction .eco-swap-logo img,
  .eco-home-orbitas.eco-access-open .eco-swap-stage.needs-introduction .eco-swap-logo img { animation-play-state: paused; }
}
@keyframes ecoLogoInvite { 0%,52%,100% { transform: scale(1); } 16% { transform: scale(1.045); } 28% { transform: scale(1); } 38% { transform: scale(1.025); } }
@keyframes ecoInviteEnter { from { opacity: 0; transform: translateX(-12px) rotate(7deg); } to { opacity: 1; transform: rotate(7deg); } }
@media (max-width: 767px) {
  .eco-home-orbitas .eco-swap-logo-action { left: 50%; top: -16%; width: 54%; font-size: 17px; }
}
.eco-swap-video:focus-visible { outline: 2px solid #a4e5c7; outline-offset: 3px; }
.eco-swap-stage [hidden], .eco-swap-understage [hidden] { display: none !important; }
.eco-swap-scroll { letter-spacing: 0; font-size: 12px; }
.eco-fx-field { inset: -14% -6%; transform: none; transition: opacity 350ms ease; }
.eco-fx-lines { filter: none; }
.fx-orbit { animation: none !important; transform: none !important; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: none; }
.fx-orbit-one { opacity: .48; stroke-width: 1.15; }
.fx-orbit-two { opacity: .25; stroke-width: .8; }
.fx-orbit-three, .fx-orbit-dashed, .fx-orbit-satellite circle[filter] { display: none; }
.fx-orbit-satellite { animation: none !important; }
.eco-swap-stage.is-video-active .eco-fx-field { opacity: .18; }
.eco-hero-inactive .eco-fx-field *, .eco-hero-inactive .eco-fx-ambient { animation-play-state: paused !important; }
@media (max-width: 1130px) { .eco-demo .eco-swap-copy h1 { font-size: 62px; } }
@media (max-width: 880px) {
  .eco-demo .eco-swap-copy h1 { font-size: 56px; }
  .eco-fx-field { inset: -12% -4%; }
  .eco-hero-shapes { opacity: .7; }
}
@media (max-width: 520px) {
  .eco-demo .eco-swap-copy h1 { font-size: 42px; }
  .eco-swap-video-card { border-radius: 8px; }
  .eco-swap-logo-action { font-size: 12px; }
  .eco-swap-understage { font-size: 12px; margin-top: 14px; }
  .eco-swap-skip { bottom: -4px; }
  .eco-fx-field { inset: -6% -2%; }
}
@media (max-width: 360px) { .eco-demo .eco-swap-copy h1 { font-size: 38px; } }
@media (prefers-reduced-motion: reduce) {
  .eco-swap-video-card, .eco-swap-video, .eco-swap-logo, .eco-fx-field { transition: none; }
}

/* Production integration: retain the loader, forms and account navigation. */
.eco-home-loading .demo-header, .eco-home-loading #hero { display: none; }
.eco-home-loading .eco-home-transition { display: none; }
.eco-home-orbitas #root .navigation, .eco-home-orbitas #root .hero { display: none !important; }
.eco-home-orbitas #root .hero * { animation: none !important; }
.eco-home-orbitas #hero { min-height: 100svh; opacity: 1; transform: none; }
.eco-home-orbitas .demo-nav-links a { white-space: nowrap; }
@media (max-width: 1360px) {
  .eco-home-orbitas .demo-menu-button { display: grid; place-items: center; flex-shrink: 0; }
  .eco-home-orbitas .demo-nav-cta { margin-left: auto; }
  .eco-home-orbitas .demo-nav-links {
    position: fixed; top: 82px; left: auto; right: 0; z-index: 1102;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    width: min(320px,100%); height: calc(100dvh - 82px); margin: 0; padding: 20px 24px;
    gap: 4px; overflow-y: auto; border: 0; border-radius: 0; background: #102a41;
    box-shadow: -8px 12px 24px #0003; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 160ms ease, visibility 160ms ease;
  }
  .eco-home-orbitas .demo-nav-links.is-open { right: 0; opacity: 1; visibility: visible; pointer-events: auto; }
  .eco-home-orbitas .demo-nav-links a { min-height: 44px; padding: 8px 4px; font-size: 16px; color: #eef9fd; }
}
@media (max-width: 520px) {
  .eco-home-orbitas .demo-nav-links { top: 72px; height: calc(100dvh - 72px); }
}
@media (prefers-reduced-motion: reduce) {
  .eco-home-orbitas .demo-nav-links { transition: none; }
}

/* A separate band keeps the blend clear of hero controls and section text. */
.eco-home-orbitas #hero::after {
  content: ''; position: absolute; inset: auto 0 0; height: 48px; z-index: 0;
  background: linear-gradient(180deg,#102c4200,#102c42); pointer-events: none;
}
.eco-home-orbitas .eco-swap-scroll { z-index: 2; }
.eco-home-transition {
  height: 96px; width: 100%; pointer-events: none;
  background: linear-gradient(180deg,#102c42 0%,#355568 28%,#94adba 62%,#e3ebef 86%,#fff 100%);
}
.eco-home-orbitas #nosotros { padding-top: 48px; }
@media (max-width: 880px) {
  .eco-home-transition { height: 72px; }
  .eco-home-orbitas #nosotros { padding-top: 40px; }
}

@media (min-width: 1600px) {
  .eco-home-orbitas { --eco-home-shell: 1480px; --eco-home-gutter: 64px; }
  .eco-home-orbitas .demo-nav {
    max-width: calc(var(--eco-home-shell) + var(--eco-home-gutter) * 2);
    padding-inline: var(--eco-home-gutter);
  }
  .eco-home-orbitas .eco-swap-layout { max-width: var(--eco-home-shell); gap: 80px; }
  .eco-home-orbitas .eco-swap-right { max-width: 780px; }
  .eco-home-orbitas .eco-swap-copy h1 { font-size: 80px; }
  .eco-home-orbitas .eco-swap-logo { width: min(64%,400px); }
  .eco-home-orbitas :is(.about-container,.stats-container,.results-container,.methodology-container,.whyus-container,.team-container,.contact-container,.footer-container) {
    max-width: var(--eco-home-shell); width: 100%; margin-inline: auto;
  }
  .eco-home-orbitas #nosotros .about-container { max-width: var(--eco-home-shell); }
  .eco-home-orbitas .services-container { max-width: calc(var(--eco-home-shell) + 64px); }
  .eco-home-orbitas :is(.about-lead,.service-description,.step-description) { max-width: 70ch; }
  .eco-home-orbitas .eco-about-diagram { max-width: 640px; justify-self: center; }
}
@media (min-width: 2200px) {
  .eco-home-orbitas { --eco-home-shell: 1680px; --eco-home-gutter: 80px; }
  .eco-home-orbitas .eco-swap-layout { gap: 96px; }
  .eco-home-orbitas .eco-swap-right { max-width: 880px; }
  .eco-home-orbitas .eco-swap-copy h1 { font-size: 88px; }
  .eco-home-orbitas .eco-swap-logo { width: min(64%,440px); }
  .eco-home-transition { height: 112px; }
}
@media (min-width: 3000px) {
  .eco-home-orbitas { --eco-home-shell: 1840px; --eco-home-gutter: 96px; }
  .eco-home-orbitas .eco-swap-layout { gap: 112px; }
  .eco-home-orbitas .eco-swap-right { max-width: 960px; }
  .eco-home-orbitas .eco-swap-copy h1 { font-size: 96px; }
  .eco-home-orbitas .eco-swap-logo { width: min(64%,480px); }
}

@media (max-width: 767px) {
  .eco-home-orbitas .demo-nav { min-height: 68px; padding: 12px 18px; gap: 12px; }
  .eco-home-orbitas .demo-brand { gap: 9px; }
  .eco-home-orbitas .demo-brand-icon { width: 36px; height: 36px; }
  .eco-home-orbitas .demo-brand-name { font-size: 12px; }
  .eco-home-orbitas .demo-brand-name small { font-size: 8px; margin-top: 4px; }
  .eco-home-orbitas .demo-menu-button { width: 44px; height: 44px; }
  .eco-home-orbitas .demo-nav-links { top: 68px; height: calc(100dvh - 68px); padding: 16px 20px; }
  .eco-home-orbitas #root main > section { scroll-margin-top: 84px; }
  .eco-home-orbitas #hero {
    display: flex; flex-direction: column; align-items: stretch;
    padding: 100px 20px 76px; min-height: 100svh;
  }
  .eco-home-orbitas .eco-swap-layout { flex: 1; margin: 0 auto; gap: 20px; justify-content: flex-start; }
  .eco-home-orbitas .eco-swap-copy { flex-shrink: 0; }
  .eco-home-orbitas .eco-swap-copy h1 { font-size: 38px; line-height: 1.08; margin-bottom: 22px; }
  .eco-home-orbitas .eco-swap-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .eco-home-orbitas .eco-swap-actions a { min-width: 0; min-height: 46px; padding: 10px; gap: 6px; font-size: 13px; line-height: 1.3; white-space: normal; }
  .eco-home-orbitas .eco-swap-actions a > span { flex-shrink: 0; }
  .eco-home-orbitas .eco-swap-right { flex-shrink: 0; max-width: 360px; align-self: center; margin-block: auto; }
  .eco-home-orbitas .eco-swap-stage { aspect-ratio: 1.5; }
  .eco-home-orbitas .eco-swap-logo { width: 66%; }
  .eco-home-orbitas .eco-swap-understage { min-height: 32px; margin-top: 8px; font-size: 12px; line-height: 1.4; }
  .eco-home-orbitas .eco-swap-scroll { left: 20px; bottom: 22px; min-height: 36px; }

  .eco-home-orbitas :is(#resultados,#metodologia,#porque,#testimonios,#equipo,#contacto) { padding: 48px 20px; }
  .eco-home-orbitas #nosotros { padding: 32px 20px 40px; }
  .eco-home-orbitas #servicios { padding-block: 44px; }
  .eco-home-orbitas .services-container { padding-inline: 20px; }
  .eco-home-orbitas :is(.services-number,.results-number,.methodology-number,.whyus-number,.team-number,.contact-number) { display: none; }
  .eco-home-orbitas :is(.results-header,.methodology-header,.whyus-header,.team-header) { gap: 12px; margin-bottom: 24px; }
  .eco-home-orbitas :is(.services-title,.results-header-content h2,.methodology-header-content h2,.whyus-header-content h2,.testimonials-title,.team-header-content h2,.contact-title) { font-size: 28px; line-height: 1.18; margin-bottom: 10px; text-wrap: balance; }
  .eco-home-orbitas :is(.results-subtitle,.methodology-header-content p,.whyus-header-content p,.team-header-content p,.contact-subtitle) { font-size: 16px; line-height: 1.6; }
  .eco-home-orbitas #nosotros .about-title { font-size: 30px; line-height: 1.16; margin-bottom: 18px; }
  .eco-home-orbitas #nosotros .about-lead { font-size: 16px; line-height: 1.7; }
  .eco-home-orbitas #nosotros .about-description { font-size: 15px; line-height: 1.7; padding-top: 20px; }
  .eco-home-orbitas #nosotros .about-container { row-gap: 24px; }
  .eco-home-orbitas #nosotros .eco-about-diagram { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 12px; aspect-ratio: auto; min-width: 0; }
  .eco-home-orbitas #nosotros .eco-about-connections { display: none; }
  .eco-home-orbitas #nosotros .eco-about-center { position: static; grid-column: 1 / -1; width: auto; height: auto; margin-bottom: 8px; transform: none !important; opacity: 1 !important; }
  .eco-home-orbitas #nosotros .about-logo { max-width: 120px; }
  .eco-home-orbitas #nosotros .eco-about-objective { font-size: 13px; }
  .eco-home-orbitas #nosotros .eco-about-area { position: static; width: auto; min-width: 0; min-height: 48px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; padding: 6px 0; transform: none !important; }
  .eco-home-orbitas #nosotros .eco-about-area-4 { grid-column: 1 / -1; }
  .eco-home-orbitas #nosotros .eco-about-area-icon { width: 34px; height: 34px; flex: 0 0 34px; transform: none !important; opacity: 1 !important; }
  .eco-home-orbitas #nosotros .eco-about-area-icon svg { width: 20px; height: 20px; }
  .eco-home-orbitas #nosotros .eco-about-area-name { font-size: 14px; text-align: left; }

  .eco-home-orbitas .stats-bar { padding: 24px 20px 36px; }
  .eco-home-orbitas .stats-container { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 16px; }
  .eco-home-orbitas .stat-item { min-width: 0; padding: 0; text-align: left; }
  .eco-home-orbitas .stat-value { font-size: 36px; line-height: 1.1; }
  .eco-home-orbitas .stat-label { font-size: 14px; }
  .eco-home-orbitas .stat-sub { font-size: 12px; line-height: 1.4; }
  .eco-home-orbitas .services-header { flex-direction: row; align-items: center; gap: 12px; margin-bottom: 20px; }
  .eco-home-orbitas .services-title { min-width: 0; margin-bottom: 0; }
  .eco-home-orbitas .services-counter { align-self: center; font-size: 13px; }
  .eco-home-orbitas .eco-services .service-card-single { grid-template-columns: minmax(0,1fr); padding: 20px 18px; gap: 14px; text-align: left; }
  .eco-home-orbitas .service-icon-wrapper { width: 52px; height: 52px; margin: 0; }
  .eco-home-orbitas .service-icon { width: 28px; height: 28px; }
  .eco-home-orbitas .service-content { min-width: 0; text-align: left; }
  .eco-home-orbitas .service-name { font-size: 22px; line-height: 1.2; }
  .eco-home-orbitas .service-subtitle { font-size: 15px; line-height: 1.5; }
  .eco-home-orbitas .service-includes { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .eco-home-orbitas .service-include-item { font-size: 15px; line-height: 1.5; }
  .eco-home-orbitas .service-description { font-size: 14px; line-height: 1.6; }

  .eco-home-orbitas .results-grid { gap: 14px; min-width: 0; }
  .eco-home-orbitas .client-card { flex-direction: row; align-items: center; gap: 14px; padding: 16px; border: 1px solid #dbe5ed; border-radius: 8px; box-shadow: none; text-align: left; }
  .eco-home-orbitas .client-logo-wrapper { flex: 0 0 72px; width: 72px; height: 72px; margin: 0; border-radius: 6px; box-shadow: none; }
  .eco-home-orbitas .client-logo-wrapper.real-logo { padding: 6px; }
  .eco-home-orbitas .client-logo-wrapper .client-logo { object-fit: contain; }
  .eco-home-orbitas .client-info { min-width: 0; gap: 8px; }
  .eco-home-orbitas .client-company { font-size: 19px; line-height: 1.25; overflow-wrap: anywhere; }
  .eco-home-orbitas .client-service-label { font-size: 11px; letter-spacing: 0; }
  .eco-home-orbitas .client-service { font-size: 14px; line-height: 1.5; }
  .eco-home-orbitas .methodology-step { gap: 12px; padding-block: 18px; }
  .eco-home-orbitas .step-icon-wrapper { width: 44px; height: 44px; }
  .eco-home-orbitas .step-icon { width: 22px; height: 22px; }
  .eco-home-orbitas .step-connector { left: 22px; top: 44px; }
  .eco-home-orbitas .step-content { min-width: 0; padding: 0; }
  .eco-home-orbitas .step-header { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 8px; }
  .eco-home-orbitas .step-number { font-size: 12px; }
  .eco-home-orbitas .step-title { font-size: 20px; line-height: 1.25; }
  .eco-home-orbitas .step-description { font-size: 15px; line-height: 1.6; }
  .eco-home-orbitas .whyus-grid { gap: 14px; }
  .eco-home-orbitas .whyus-card { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 0 12px; padding: 18px; border: 1px solid #dbe5ed; border-radius: 8px; }
  .eco-home-orbitas .whyus-icon-wrapper { grid-column: 1; grid-row: 1 / 3; width: 44px; height: 44px; margin: 0; border-radius: 8px; }
  .eco-home-orbitas .whyus-icon { width: 24px; height: 24px; }
  .eco-home-orbitas .whyus-title { grid-column: 2; font-size: 19px; line-height: 1.25; margin-bottom: 8px; }
  .eco-home-orbitas .whyus-description { grid-column: 2; min-width: 0; font-size: 15px; line-height: 1.6; }
  .eco-home-orbitas .testimonials-header { margin-bottom: 24px; }
  .eco-home-orbitas .testimonial-card { padding: 24px 18px; border-radius: 8px; box-shadow: none; }
  .eco-home-orbitas .testimonial-quote-icon { width: 36px; height: 36px; }
  .eco-home-orbitas .testimonial-quote { font-size: 17px; line-height: 1.6; margin-bottom: 20px; }
  .eco-home-orbitas .testimonial-author-block { gap: 10px; margin-bottom: 20px; }

  .eco-home-orbitas .team-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .eco-home-orbitas .team-card { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 0 14px; padding: 16px; border: 1px solid #dbe5ed; border-radius: 8px; box-shadow: none; }
  .eco-home-orbitas .team-image-wrapper { grid-column: 1; grid-row: 1 / 4; align-self: start; width: 96px; height: 96px; aspect-ratio: 1; border-radius: 6px; }
  .eco-home-orbitas .team-image { width: 100%; height: 100%; object-fit: cover; }
  .eco-home-orbitas .team-info { display: contents; }
  .eco-home-orbitas .team-name { grid-column: 2; grid-row: 1; min-width: 0; font-size: 19px; line-height: 1.25; margin: 0 0 5px; overflow-wrap: anywhere; }
  .eco-home-orbitas .team-position { grid-column: 2; grid-row: 2; min-width: 0; font-size: 14px; line-height: 1.45; margin: 0 0 6px; }
  .eco-home-orbitas .team-profession { grid-column: 2; grid-row: 3; min-width: 0; font-size: 12px; line-height: 1.5; letter-spacing: 0 !important; margin: 0; padding: 0; border: 0; }
  .eco-home-orbitas .team-description { grid-column: 1 / -1; grid-row: 4; font-size: 15px; line-height: 1.6; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e1e9ef; }
  .eco-home-orbitas .team-overlay { padding: 4px; }
  .eco-home-orbitas .team-socials { gap: 0; }
  .eco-home-orbitas .team-social { width: 44px; height: 44px; }
  .eco-home-orbitas .team-image-wrapper:focus-within .team-overlay { opacity: 1; }
  .eco-home-orbitas :is(.team-card,.client-card,.whyus-card,.info-card):hover { transform: none; box-shadow: none; }

  .eco-home-orbitas .contact-header { text-align: left; margin-bottom: 24px; }
  .eco-home-orbitas .contact-content { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .eco-home-orbitas .contact-form { min-width: 0; padding: 20px 16px; border: 1px solid #dbe5ed; border-radius: 8px; box-shadow: none; }
  .eco-home-orbitas .form-group { min-width: 0; margin-bottom: 18px; }
  .eco-home-orbitas .form-label { font-size: 14px; }
  .eco-home-orbitas .form-input { min-height: 46px; max-width: 100%; padding: 11px 12px; border-radius: 6px; font-size: 16px; }
  .eco-home-orbitas .form-textarea { min-height: 112px; resize: vertical; }
  .eco-home-orbitas .form-consent { gap: 10px; }
  .eco-home-orbitas .form-consent label { font-size: 14px; line-height: 1.5; }
  .eco-home-orbitas .form-submit { min-height: 48px; padding: 12px 16px; font-size: 16px; box-shadow: none; }
  .eco-home-orbitas .form-note { font-size: 13px; line-height: 1.5; }
  .eco-home-orbitas .contact-info { min-width: 0; gap: 12px; }
  .eco-home-orbitas .info-card { min-width: 0; padding: 14px 16px; gap: 12px; align-items: flex-start; border: 1px solid #dbe5ed; border-radius: 8px; box-shadow: none; }
  .eco-home-orbitas .info-icon { width: 22px; height: 22px; margin-top: 2px; }
  .eco-home-orbitas .info-content { min-width: 0; gap: 3px; }
  .eco-home-orbitas .info-label { color: #52687b; font-size: 11px; line-height: 1.4; letter-spacing: 0; font-weight: 600; }
  .eco-home-orbitas .info-value { max-width: 100%; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
  .eco-home-orbitas a.info-value { display: flex; align-items: center; min-height: 44px; }
  .eco-home-orbitas .whatsapp-button { width: 48px; height: 48px; min-width: 48px; padding: 0; right: calc(12px + env(safe-area-inset-right,0px)); bottom: calc(12px + env(safe-area-inset-bottom,0px)); animation: none; box-shadow: 0 4px 12px #0002; }
  .eco-home-orbitas .whatsapp-icon { width: 22px; height: 22px; }
  .eco-home-orbitas .whatsapp-text { display: none; }
  .eco-home-orbitas .footer-display { display: none; }
  .eco-home-orbitas .footer-container { padding: 36px 20px 84px; }
  .eco-home-orbitas .footer-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .eco-home-orbitas .footer-column { min-width: 0; }
  .eco-home-orbitas .footer-text { overflow-wrap: anywhere; }
  .eco-home-orbitas .footer-column-title { margin-bottom: 16px; }
  .eco-home-orbitas .footer-brand { min-width: 0; }
  .eco-home-orbitas .footer-copyright { font-size: 13px; line-height: 1.5; }
  .eco-home-orbitas .footer-map iframe { height: 200px; width: 100%; }
}
@media (max-width: 360px) {
  .eco-home-orbitas .eco-swap-copy h1 { font-size: 34px; }
  .eco-home-orbitas .eco-swap-actions { grid-template-columns: minmax(0,1fr); }
  .eco-home-orbitas .eco-swap-actions a { justify-content: center; }
  .eco-home-orbitas .team-card { grid-template-columns: 80px minmax(0,1fr); gap: 0 12px; padding: 14px; }
  .eco-home-orbitas .team-image-wrapper { width: 80px; height: 80px; }
  .eco-home-orbitas .team-overlay { padding: 0; }
  .eco-home-orbitas .team-social { min-width: 40px; width: 40px; }
}

/* Restore the original light/dark navigation while keeping account links quiet. */
.eco-home-orbitas .demo-nav { display: grid; grid-template-columns: minmax(260px,1fr) auto minmax(260px,1fr); align-items: center; }
.eco-home-orbitas .demo-brand { justify-self: start; }
.eco-home-orbitas .demo-nav-links { justify-self: center; }
.eco-home-orbitas .demo-nav-actions { display: flex; align-items: center; justify-self: end; gap: 14px; }
.eco-home-orbitas .demo-header { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; transition: background 240ms ease, box-shadow 240ms ease; }
.eco-home-orbitas .demo-header.is-over-hero { background: #102b42f5; }
.eco-home-orbitas .demo-header.is-scrolled { background: #fffffff5; border-bottom-color: #e5ebef; box-shadow: 0 4px 20px #1029410d; }
.eco-home-orbitas .demo-brand-name, .eco-home-orbitas .demo-brand-name small { letter-spacing: 0; }
.eco-home-orbitas .demo-brand-name { color: #f1f7fa; }
.eco-home-orbitas .demo-brand-icon { background: transparent; padding: 0; border-radius: 0; box-shadow: none; }
.eco-home-orbitas .demo-brand-name { position: relative; display: block; width: 200px; aspect-ratio: 875 / 110; }
.eco-home-orbitas .eco-brand-wordmark { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 180ms ease; }
.eco-home-orbitas .eco-brand-on-dark { opacity: 1; }
.eco-home-orbitas .eco-brand-on-light { opacity: 0; }
.eco-home-orbitas .is-scrolled .eco-brand-on-dark { opacity: 0; }
.eco-home-orbitas .is-scrolled .eco-brand-on-light { opacity: 1; }
.eco-home-orbitas .demo-brand-name small { color: #c0d5e0; }
.eco-home-orbitas .is-scrolled .demo-brand-name { color: #192072; }
.eco-home-orbitas .is-scrolled .demo-brand-name small { color: #52687b; }
.eco-home-orbitas .demo-nav-links { position: static; display: flex; flex-direction: row; align-items: center; width: auto; height: auto; margin: 0; padding: 0; gap: 20px; background: transparent; border: 0; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; overflow: visible; }
.eco-home-orbitas .demo-nav-links a { position: relative; padding: 0; min-height: 44px; color: #e7f1f7; font-size: 14px; }
.eco-home-orbitas .demo-nav-links a::after { content: ''; position: absolute; inset: auto 0 5px; height: 2px; background: #54d6a4; transform: scaleX(0); transform-origin: left; transition: transform 180ms ease; }
.eco-home-orbitas .demo-nav-links a:hover::after, .eco-home-orbitas .demo-nav-links a[aria-current]::after { transform: scaleX(1); }
.eco-home-orbitas .is-scrolled .demo-nav-links a { color: #243c55; }
.eco-home-orbitas .is-scrolled .demo-nav-links a:hover, .eco-home-orbitas .is-scrolled .demo-nav-links a[aria-current] { color: #117a4e; }
.eco-home-orbitas .demo-nav-cta { display: inline-flex; margin-left: 0; min-height: 44px; background: linear-gradient(115deg,#0d6499,#21834f); border-radius: 4px; }
.eco-home-orbitas .demo-nav-cta[hidden] { display: none !important; }
.eco-home-orbitas .demo-nav-cta:hover { background: linear-gradient(115deg,#0a557f,#176e40); }
.eco-home-orbitas .demo-menu-button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; margin-left: 0; border: 0; border-radius: 4px; color: #d2e3ec; }
.eco-home-orbitas .demo-menu-button:hover { background: #ffffff12; }
.eco-home-orbitas .is-scrolled .demo-menu-button { color: #243c55; }
.eco-home-orbitas .is-scrolled .demo-menu-button:hover { background: #edf4f7; }
body.eco-access-open { overflow: hidden; }
.eco-access-panel { position: fixed; inset: 0 0 0 auto; width: min(360px,100%); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 24px; border: 0; border-radius: 0; background: #fff; color: #243c55; box-shadow: -12px 0 40px #0002; overflow-y: auto; }
.eco-access-panel[open] { display: flex; flex-direction: column; animation: ecoAccessEnter 260ms cubic-bezier(.16,1,.3,1); }
.eco-access-panel::backdrop { background: #061b2d80; }
.eco-access-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.eco-access-header h2 { margin: 0; font-size: 22px; font-weight: 700; }
.eco-access-close { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 4px; color: #243c55; cursor: pointer; }
.eco-access-close:hover { background: #edf4f7; }
.eco-access-panel svg { width: 20px; height: 20px; }
.eco-access-nav { display: none; }
.eco-access-links { display: grid; }
.eco-access-links a, .eco-access-nav a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 12px 0; gap: 16px; font-size: 17px; line-height: 1.4; text-decoration: none; color: #243c55; }
.eco-access-links a { border-bottom: 1px solid #e1e9ef; }
.eco-access-links a:hover, .eco-access-nav a:hover, .eco-access-nav a[aria-current] { color: #117a4e; }
.eco-access-links [data-icon] { color: #0d6499; }
.eco-access-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-top: auto; padding: 14px 16px; background: #18764b; color: #fff; border-radius: 4px; font-size: 16px; font-weight: 600; text-decoration: none; }
.eco-access-cta:hover { background: #12633e; }
.eco-access-panel a:focus-visible, .eco-access-panel button:focus-visible { outline: 3px solid #0d6499; outline-offset: 3px; }
@keyframes ecoAccessEnter { from { transform: translateX(28px); opacity: .6; } to { transform: none; opacity: 1; } }

.eco-home-orbitas .eco-swap-copy { animation: none; }
.eco-home-orbitas .eco-swap-copy h1 { margin-bottom: 24px; }
.eco-home-orbitas .eco-title-line { display: block; }
.eco-home-orbitas .eco-swap-gradient { position: relative; width: fit-content; padding-bottom: 12px; background: none; color: #65dfa8; }
.eco-home-orbitas .eco-swap-gradient::after { content: ''; position: absolute; left: 0; bottom: 0; width: 64%; height: 3px; border-radius: 2px; background: #65dfa8; transform-origin: left; }
.eco-home-orbitas .eco-swap-summary { max-width: 42ch; margin: 0 0 28px; color: #c4dce8; font-size: 19px; line-height: 1.55; }
.eco-home-orbitas .eco-swap-actions { display: flex; }
.eco-home-orbitas .eco-swap-primary { min-width: min(200px,100%); justify-content: space-between; gap: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .eco-home-orbitas:not(.eco-home-loading) #demo-title { animation: ecoTitleFloat 7s 1.1s ease-in-out infinite; }
  .eco-home-orbitas:not(.eco-home-loading) .eco-title-line { animation: ecoTitleEnter 650ms cubic-bezier(.16,1,.3,1) both; }
  .eco-home-orbitas:not(.eco-home-loading) .eco-title-line:nth-child(2) { animation-delay: 90ms; }
  .eco-home-orbitas:not(.eco-home-loading) .eco-title-line:nth-child(3) { animation-delay: 180ms; }
  .eco-home-orbitas:not(.eco-home-loading) .eco-title-line.eco-swap-strong { animation: ecoTitleEnter 650ms 90ms cubic-bezier(.16,1,.3,1) both, ecoWordLight 10s 1.8s ease-in-out infinite; }
  .eco-home-orbitas:not(.eco-home-loading) .eco-swap-gradient::after { animation: ecoTitleLine 700ms 250ms cubic-bezier(.16,1,.3,1) both, ecoAccentBreathe 6s 1s ease-in-out infinite; }
  .eco-home-orbitas #hero .eco-swap-primary::before { animation: ecoButtonSheen 10s 2s ease-in-out infinite; }
  .eco-home-orbitas.eco-hero-inactive #demo-title { animation-play-state: paused; }
  .eco-home-orbitas.eco-hero-inactive .eco-title-line.eco-swap-strong { animation-play-state: paused; }
  .eco-home-orbitas.eco-hero-inactive .eco-swap-gradient::after { animation-play-state: paused; }
  .eco-home-orbitas.eco-hero-inactive #hero .eco-swap-primary::before { animation-play-state: paused; }
}
@keyframes ecoWordLight { 0%,60%,100% { color: #f1f7fa; } 20%,36% { color: #a5efda; } }
@keyframes ecoAccentBreathe { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(1.22); } }
@keyframes ecoButtonSheen { 0%,6% { transform: translateX(-160%) skewX(-18deg); opacity: 0; } 9% { opacity: .24; } 22% { transform: translateX(420%) skewX(-18deg); opacity: 0; } 100% { transform: translateX(420%) skewX(-18deg); opacity: 0; } }
.eco-home-orbitas #hero .eco-swap-primary { position: relative; overflow: hidden; isolation: isolate; }
.eco-home-orbitas #hero .eco-swap-primary::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 35%; background: #fff; opacity: 0; pointer-events: none; }
.eco-home-orbitas #hero .eco-swap-primary > span { transition: transform 180ms ease; }
.eco-home-orbitas #hero .eco-swap-primary:hover > span, .eco-home-orbitas #hero .eco-swap-primary:focus-visible > span { transform: translate(2px,-2px); }
@keyframes ecoTitleFloat { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,calc(-1 * var(--eco-title-float,6px)),0); } }
@keyframes ecoTitleEnter { from { transform: translateY(14px); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes ecoTitleLine { from { transform: scaleX(.15); } to { transform: scaleX(1); } }
@media (max-width: 1180px) {
  .eco-home-orbitas .demo-nav { grid-template-columns: minmax(0,1fr) auto; }
  .eco-home-orbitas .demo-nav-links { display: none; }
  .eco-access-nav { display: grid; padding-bottom: 20px; margin-bottom: 16px; border-bottom: 1px solid #e1e9ef; }
  .eco-access-nav a { min-height: 44px; padding-block: 10px; font-size: 16px; }
  .eco-access-links { margin-bottom: 28px; }
}
@media (max-width: 767px) {
  .eco-home-orbitas .demo-brand-name { width: 148px; }
  .eco-home-orbitas .demo-nav-actions { gap: 8px; }
  .eco-home-orbitas .demo-header.is-scrolled .demo-brand-name { display: none; }
  .eco-home-orbitas .demo-nav-cta { padding-inline: 11px; font-size: 12px; }
  .eco-home-orbitas #demo-title { --eco-title-float: 4px; }
  .eco-home-orbitas .eco-swap-copy h1 { margin-bottom: 16px; }
  .eco-home-orbitas .eco-swap-summary { margin-bottom: 20px; font-size: 16px; line-height: 1.5; }
  .eco-home-orbitas .eco-swap-gradient { padding-bottom: 10px; }
  .eco-home-orbitas .eco-swap-gradient::after { height: 2px; }
  .eco-access-panel { padding: 16px 24px max(24px,env(safe-area-inset-bottom)); }
  .eco-access-header { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .eco-home-orbitas .demo-header, .eco-home-orbitas .demo-nav-links a::after { transition: none; }
  .eco-home-orbitas .eco-brand-wordmark { transition: none; }
  .eco-access-panel[open] { animation: none; }
  .eco-home-orbitas #hero .eco-swap-primary > span { transition: none; transform: none; }
}

.eco-home-orbitas .demo-nav {
  width: 100%;
  max-width: none;
  padding-inline: clamp(16px,2vw,28px);
}

@media (max-width: 767px) {
  .eco-home-orbitas .demo-nav {
    grid-template-columns: minmax(0,1fr) auto;
    padding-inline: max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right));
    gap: 8px;
  }
  .eco-home-orbitas .demo-brand { display: flex; justify-self: start; min-width: 0; }
  .eco-home-orbitas .demo-brand-icon { width: 34px; height: 34px; }
  .eco-home-orbitas .demo-nav-actions { justify-self: end; align-items: center; gap: 6px; }
  .eco-home-orbitas .demo-nav-cta { min-height: 40px; padding-inline: 10px; font-size: 11.5px; line-height: 1.2; }
  .eco-home-orbitas .demo-menu-button { flex-basis: 44px; width: 44px; height: 44px; }
  .eco-home-orbitas .whatsapp-button {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    right: calc(12px + env(safe-area-inset-right,0px));
    bottom: calc(12px + env(safe-area-inset-bottom,0px));
  }
  .eco-home-orbitas .whatsapp-text { display: none !important; }
}