/* Diseño aprobado: estilos originales y ajustes de accesibilidad al final. */
:root { color-scheme: dark; --bg:#07151d; --bg2:#091e27; --pane:#102830; --pane2:#13313a; --line:rgba(183,225,222,.17); --soft:#9bb2b8; --light:#eff8f7; --teal:#7af4c4; --teal2:#42c8bb; --gold:#c9df91; --radius:22px; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
html {scroll-behavior:smooth;}
body {margin:0; color:var(--light); background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased;}
a {color:inherit; text-decoration:none;}
button {font:inherit;}
.wrap {width:min(1160px,calc(100% - 48px)); margin-inline:auto;}
.site-header {position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(221,249,241,.08); background:rgba(7,21,29,.87); backdrop-filter:blur(18px);}
.head-in {height:80px; display:flex; align-items:center; justify-content:space-between; gap:20px;}
.brand {display:inline-flex; align-items:center; gap:12px; white-space:nowrap;}
.brand-mark {width:37px; height:37px; display:block; flex-shrink:0;}
.brand-name {font-weight:850; font-size:24px; line-height:1; letter-spacing:.14em;}
.brand-sub {font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--soft); margin-top:6px;}
nav {display:flex; align-items:center; gap:31px;}
nav a {font-size:13px; color:#b7c8cb; transition:color .2s;}
nav a:hover {color:white;}
.header-actions {display:flex; align-items:center; gap:14px;}
.btn {min-height:47px; display:inline-flex; justify-content:center; align-items:center; gap:10px; border:1px solid transparent; border-radius:11px; padding:11px 19px; font-size:13px; font-weight:750; white-space:nowrap; transition:transform .2s, background .2s, border-color .2s;}
.btn:hover {transform:translateY(-2px);}
.btn-main {background:var(--teal); color:#052322; box-shadow:0 6px 24px rgba(122,244,196,.12);}
.btn-main:hover {background:#adffdd;}
.btn-line {border-color:rgba(195,232,225,.29); color:#e2f5f0; background:rgba(255,255,255,.025);}
.btn-line:hover {border-color:var(--teal); background:rgba(122,244,196,.08);}
.button-arrow {font-size:17px; line-height:1;}
.hero {position:relative; overflow:hidden; isolation:isolate; padding:96px 0 111px; border-bottom:1px solid var(--line);}
.hero::before {content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse 55% 64% at 84% 28%,rgba(32,147,145,.21),transparent 70%),radial-gradient(ellipse 42% 65% at 12% 70%,rgba(30,112,102,.12),transparent 72%);}
.hero::after {content:""; position:absolute; inset:0; z-index:-1; opacity:.13; background-image:linear-gradient(rgba(145,216,211,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(145,216,211,.2) 1px,transparent 1px); background-size:60px 60px; mask-image:linear-gradient(90deg, transparent,black 46%,black);}
.hero-inner {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:55px; align-items:center;}
.eyebrow {display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.19em; color:var(--teal);}
.eyebrow .dot {height:7px; width:7px; border-radius:100%; background:var(--teal); box-shadow:0 0 13px var(--teal);}
h1,h2,h3,p {margin-top:0;}
h1 {font-size:clamp(48px,5.4vw,78px); line-height:1.065; letter-spacing:-.065em; font-weight:820; margin:24px 0; text-wrap:balance;}
h1 span {color:var(--teal);}
.lead {max-width:550px; color:#b0c5c7; font-size:17px; line-height:1.78; margin-bottom:32px;}
.hero-actions {display:flex; flex-wrap:wrap; gap:12px; margin-bottom:44px;}
.hero-bottom {display:flex; gap:22px; flex-wrap:wrap;}
.hero-bottom span {display:inline-flex; align-items:center; gap:9px; color:#a3bcc0; font-size:12px;}
.tick {display:inline-grid; place-items:center; height:19px; width:19px; border-radius:50%; background:rgba(122,244,196,.12); color:var(--teal); font-weight:900; font-size:11px;}
.visual {position:relative;}
.dashboard-scene {position:relative;padding:20px 0 50px;}
.visual::before {content:""; position:absolute; width:340px; height:340px; border-radius:50%; background:var(--teal2); filter:blur(105px); opacity:.11; left:14%; top:8%; z-index:-1;}
.dashboard {border:1px solid rgba(198,250,234,.19); background:#10252e; border-radius:19px; overflow:hidden; box-shadow:0 35px 90px rgba(0,0,0,.41), 0 1px 0 rgba(255,255,255,.1) inset; transform:rotate(-1.5deg);}
.dash-top {display:flex; align-items:center; justify-content:space-between; padding:15px 20px; background:#142e37; border-bottom:1px solid var(--line);}
.dash-dot {width:7px;height:7px;border-radius:50%;background:#69858a;display:inline-block;margin-right:6px;}
.dash-title {font-size:11px; color:#c7d9dc; font-weight:760; letter-spacing:.05em;}
.dash-pill {font-size:10px; color:var(--teal); background:rgba(122,244,196,.1);border-radius:30px;padding:5px 9px;}
.dash-content {padding:24px;}
.dash-kicker {color:#90adb3; font-size:10px; letter-spacing:.14em; text-transform:uppercase;}
.dash-heading {font-size:23px; font-weight:750; margin:5px 0 21px; letter-spacing:-.03em;}
.metrics {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:24px;}
.metric {border:1px solid var(--line); background:rgba(255,255,255,.025);border-radius:10px;padding:14px 13px;min-height:100px;}
.metric-label {color:#9eb7bb;display:block;font-size:10px;line-height:1.3;margin-bottom:13px;}
.metric strong {font-size:26px;letter-spacing:-.055em;line-height:1;}
.metric small {font-size:10px;display:block;margin-top:7px;color:var(--teal);}
.metric .warn {color:#e4df9e;}
.dash-table-head {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:6px;}
.dash-table-head strong {font-size:12px;}
.dash-table-head span {color:#8fadad;font-size:10px;}
.dash-row {border-top:1px solid var(--line); padding:13px 0;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:12px;}
.unit-icon {height:29px;width:29px;display:grid;place-items:center;border-radius:8px;background:#22424b;color:#b3f4d9;font-size:15px;}
.unit-name {font-size:11px;font-weight:720;}
.unit-sub {font-size:10px;color:#8eaaac;margin-top:2px;}
.status {font-size:10px;font-weight:700;border-radius:20px;padding:5px 9px;background:rgba(122,244,196,.10);color:#9cf4cc;white-space:nowrap;}
.status.attn {color:#f3dc9a;background:rgba(241,207,123,.11);}
.floating {position:absolute;right:-18px;bottom:0;background:#f0faf3;color:#103330;border-radius:13px;padding:16px 19px;box-shadow:0 18px 42px rgba(0,0,0,.23);transform:rotate(3deg);max-width:228px;}
.floating .caption {color:#4d766f;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;}
.floating strong {font-size:13px;display:block;margin-top:7px;line-height:1.3;}
.floating em {font-style:normal;display:block;font-size:11px;margin-top:4px;color:#54756e;}
.concept {display:block;text-align:right;color:#8fadad;margin:14px 0 0;font-size:10px;}
.trustbar {background:#0b2028;border-bottom:1px solid var(--line);}
.trust-items {padding:22px 0;display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap;}
.trust-items span {font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#a4bec1;font-weight:750;}
.trust-items b {color:var(--teal);font-size:17px;font-weight:300;}
section.section {padding:110px 0;}
.sect-head {max-width:695px;margin-bottom:45px;}
.sect-head.center {margin-inline:auto;text-align:center;}
.section h2 {font-size:clamp(34px,4vw,51px);font-weight:790;line-height:1.12;letter-spacing:-.052em;margin:18px 0; text-wrap:balance;}
.sect-head p {color:var(--soft);font-size:16px;line-height:1.75;max-width:600px;}
.sect-head.center p {margin-inline:auto;}
.feature-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.feature-card {position:relative; padding:31px 27px;min-height:250px;border-radius:var(--radius);background:linear-gradient(160deg,#112a33,#0c2028);border:1px solid var(--line);transition:border .2s,transform .2s;}
.feature-card:hover {border-color:rgba(122,244,196,.45);transform:translateY(-3px);}
.feature-icon {width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(122,244,196,.2);border-radius:13px;background:rgba(122,244,196,.07);color:var(--teal);margin-bottom:27px;}
.feature-icon svg {width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.feature-card h3 {font-size:18px;margin-bottom:10px;letter-spacing:-.028em;}
.feature-card p {color:#9eb7ba;font-size:13px;line-height:1.8;margin-bottom:0;}
.work-section {background:#0b2028;border-block:1px solid var(--line);}
.steps {display:grid;grid-template-columns:repeat(3,1fr);gap:33px;position:relative;}
.step {position:relative;}
.step-number {display:inline-grid;place-items:center;width:47px;height:47px;border-radius:12px;border:1px solid rgba(122,244,196,.35);color:var(--teal);font-size:13px;font-weight:800;margin-bottom:21px;}
.step h3 {font-size:21px;letter-spacing:-.03em;margin-bottom:10px;}
.step p {font-size:14px;color:#a6bfc1;line-height:1.75;max-width:305px;}
.statement {display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
.statement .sect-head {margin-bottom:0;}
.statement .eyebrow {margin-bottom:8px;}
.statement .cta-text {color:var(--soft);font-size:14px;line-height:1.75;margin-bottom:27px;}
.focus-panel {border:1px solid var(--line);border-radius:var(--radius);padding:35px;background:linear-gradient(145deg,#13343b,#0b252b);position:relative;overflow:hidden;}
.focus-panel::before {content:"";position:absolute;right:-100px;top:-100px;width:260px;height:260px;background:var(--teal);filter:blur(120px);opacity:.12;}
.focus-item {display:flex;gap:14px;padding:17px 0;border-bottom:1px solid var(--line);align-items:start;position:relative;}
.focus-item:first-child {padding-top:0;}
.focus-item:last-child {padding-bottom:0;border:0;}
.focus-item .num {color:var(--teal);font-size:11px;font-weight:800;padding-top:3px;letter-spacing:.1em;}
.focus-item strong {display:block;font-size:14px;margin-bottom:5px;}
.focus-item p {color:#9eb6b9;font-size:12px;margin:0;line-height:1.7;}
.banner-section {padding:0 0 105px;}
.banner {padding:70px 64px;border-radius:28px;position:relative;overflow:hidden;background:linear-gradient(120deg,#78f1c0 0%,#81d9bd 58%,#bdeac6 100%);color:#082b2c;}
.banner::before {content:"";position:absolute;right:-90px;bottom:-190px;height:430px;width:430px;border:1px solid rgba(8,43,44,.15);border-radius:50%;box-shadow:0 0 0 42px rgba(8,43,44,.045),0 0 0 90px rgba(8,43,44,.04);}
.banner-inner {position:relative;display:flex;justify-content:space-between;gap:30px;align-items:end;}
.banner p.eyebrow {color:#20594e;font-size:11px;}
.banner h2 {font-size:clamp(33px,4vw,51px);line-height:1.13;letter-spacing:-.05em;max-width:590px;margin:15px 0 14px;}
.banner p.note {font-size:15px;max-width:510px;color:#27534d;margin:0;}
.banner .btn {background:#0b2730;color:#e8fcf5;min-height:54px;}
.banner .btn:hover {background:#163c42;}
footer {border-top:1px solid var(--line);padding:37px 0 45px;}
.foot {display:flex;justify-content:space-between;gap:30px;align-items:center;}
.foot .brand-name {font-size:19px;}
.foot .brand-mark {width:30px;height:30px;}
.foot small {display:block;color:#839fa4;font-size:11px;margin-top:14px;}
.foot-links {display:flex;gap:26px;align-items:center;flex-wrap:wrap;}
.foot-links a {font-size:12px;color:#a2bac0;}
.foot-links a:hover {color:var(--teal);}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
:focus-visible {outline:3px solid var(--teal);outline-offset:3px;}
@media (max-width:1060px) {nav {gap:18px;} .hero-inner {gap:23px;} h1 {font-size:56px;} .floating {right:-3px;} }
@media (max-width:820px) {.head-in {height:70px;} nav {display:none;} .hero {padding:76px 0 80px;} .hero-inner {grid-template-columns:1fr;gap:40px;} .lead {max-width:650px;} .visual {max-width:600px;margin:auto;width:100%;} .feature-grid {grid-template-columns:repeat(2,1fr);} .statement {grid-template-columns:1fr;gap:32px;} .steps {gap:18px;} .banner {padding:55px 40px;} .banner-inner {display:block;} .banner .btn {margin-top:26px;} }
@media (max-width:590px) {.wrap {width:min(100% - 34px,1160px);} .brand-name {font-size:21px;} .brand-sub {font-size:8px;} .head-in .btn {font-size:11px;padding:9px 11px;min-height:40px;} .head-in .brand-mark {width:31px;height:31px;} .hero {padding:66px 0 78px;} h1 {font-size:clamp(43px,10vw,59px);letter-spacing:-.058em;} .lead {font-size:15px;} .hero-actions .btn {flex:1;padding-inline:11px;} .hero-bottom {gap:11px 18px;} .dash-content {padding:16px;} .dashboard {transform:none;} .dash-top {padding:12px 15px;} .metric {padding:11px 9px;min-height:91px;} .metric strong {font-size:23px;} .metric-label {font-size:9px;} .floating {right:-4px;bottom:2px;padding:13px 15px;} .concept {margin-top:14px;} section.section {padding:77px 0;} .sect-head {margin-bottom:30px;} .feature-grid {grid-template-columns:1fr;gap:12px;} .feature-card {min-height:0;padding:26px;} .feature-icon {margin-bottom:21px;} .steps {grid-template-columns:1fr;gap:22px;} .step {padding-bottom:12px;border-bottom:1px solid var(--line);} .step:last-child {border:0;} .trust-items {justify-content:space-between;gap:12px 17px;} .trust-items span {font-size:9px;} .trust-items b {display:none;} .focus-panel {padding:23px;} .banner-section {padding-bottom:68px;} .banner {padding:40px 27px;border-radius:22px;} .banner h2 {font-size:37px;} .foot {align-items:start;flex-direction:column;} .foot-links {gap:20px;} }
@media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto;} .btn,.feature-card {transition:none;} .btn:hover,.feature-card:hover {transform:none;} }

/* Mejoras funcionales sin reemplazar la composición ni la paleta aprobadas. */
.brand-sub {display:block;}
.unit-name {margin-inline-end:4px;}
html {scroll-padding-top:96px;}
:target {scroll-margin-top:12px;}
.skip-link {position:fixed;top:12px;left:12px;z-index:100;padding:12px 18px;border-radius:11px;background:var(--teal);color:#052322;font-weight:750;transform:translateY(-160%);}
.skip-link:focus {transform:translateY(0);}
.banner :focus-visible {outline-color:#082b2c;}
.desktop-nav a,.foot-links a {display:inline-flex;align-items:center;min-height:44px;}
.hero-inner > *,.statement > *,.steps > *,.banner-inner > * {min-width:0;}
.mobile-menu {display:none;position:relative;}
.mobile-menu summary {display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(195,232,225,.29);border-radius:11px;cursor:pointer;list-style:none;color:#e2f5f0;}
.mobile-menu summary::-webkit-details-marker {display:none;}
.mobile-menu[open] summary {border-color:var(--teal);background:rgba(122,244,196,.08);}
.mobile-menu nav {position:absolute;right:0;top:calc(100% + 14px);width:min(300px,calc(100vw - 34px));max-height:calc(100dvh - 100px);overflow-y:auto;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px;border:1px solid var(--line);border-radius:13px;background:var(--bg);box-shadow:0 18px 42px rgba(0,0,0,.3);}
.mobile-menu:not([open]) nav {display:none;}
.mobile-menu nav a {display:flex;align-items:center;min-height:48px;padding:10px 14px;border-radius:7px;}
.mobile-menu nav a:hover {background:rgba(122,244,196,.08);}
@media (max-width:820px) {
  html {scroll-padding-top:86px;}
  .mobile-menu {display:block;}
  .head-in {gap:8px;}
  .header-actions {gap:6px;}
}
@media (max-width:590px) {
  .head-in .btn {min-height:44px;}
  .btn {white-space:normal;text-align:center;}
  .hero-actions .btn {flex:1 1 180px;}
  .eyebrow {line-height:1.6;}
  .eyebrow .dot {flex-shrink:0;}
  .dash-top {gap:8px;flex-wrap:wrap;}
  .dash-title {flex:1;text-align:right;}
  .dash-pill {margin-left:auto;}
  .dash-row {grid-template-columns:29px minmax(0,1fr) auto;gap:8px;}
  .unit-name,.unit-sub {display:block;}
  .banner h2 {font-size:clamp(30px,8.2vw,37px);overflow-wrap:break-word;}
}
@media (max-width:380px) {
  .head-in .brand {gap:8px;}
  .head-in .brand-name {font-size:19px;}
  .head-in .brand-sub {letter-spacing:.1em;}
  .head-in .btn {gap:6px;padding-inline:9px;}
  .dash-top {padding-inline:12px;}
  .dash-content {padding:12px;}
  .metrics {gap:6px;}
  .metric {padding:10px 6px;}
}
@media (prefers-reduced-motion:reduce) {
  nav a {transition:none;}
}


/* Botón flotante WhatsApp Vordia */
#vordia-whatsapp {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    background: #25d366;
    color: #073b25;
    font: 600 14px/1.3 system-ui, sans-serif;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(0,0,0,.3);
    transition: transform .2s, box-shadow .2s;
}
#vordia-whatsapp:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 28px rgba(0,0,0,.4);
}
#vordia-whatsapp:focus-visible {
    outline: 3px solid white;
    outline-offset: 4px;
}
#vordia-whatsapp svg {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    #vordia-whatsapp {
        right: 16px;
        bottom: 16px;
        padding: 13px;
    }
    #vordia-whatsapp span {
        display: none;
    }
}