/* FV Inteligencia de Negocios - estilos */

:root{
  --ink:#111315;
  --ink-soft:#5f656a;
  --ink-faint:#6f747a;
  --paper:#ffffff;
  --soft:#f4f5f3;
  --line:#e7e8e5;
  --green:#2fae72;
  --green-deep:#1f7d51;
  --green-light:#8fe3b6;
  --green-tint:#eef7f1;
  --night:#061620;
  --night-line:rgba(255,255,255,.1);
  --night-text:#c7d0ca;
  --night-mute:#9aa6a0;
  --font:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --err-soft:#ffb4b4;
  --dot-red:#ff6058;
  --dot-yellow:#ffbd2e;
  --dot-green:#28c941;
  --nav-h:76px;
}

*,*::before,*::after{box-sizing:border-box;}
html{background:var(--paper); scroll-padding-top:calc(var(--nav-h) + 8px); -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }
body{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--font);
  line-height:1.6; -webkit-font-smoothing:antialiased; font-feature-settings:"tnum" 1;
}
h1,h2,h3{text-wrap:balance; margin:0; font-weight:800; letter-spacing:-.02em; color:var(--ink);}
p{margin:0;}
a{color:inherit;}
img{max-width:100%;}
::selection{background:var(--green); color:#fff;}
:focus-visible{outline:2px solid var(--green); outline-offset:3px;}
[hidden]{display:none !important;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; scroll-behavior:auto !important;}
  /* Decorativas: sin flotado; los rellenos (donut, KPIs, sparkline) saltan al estado final sin demora; los fades de paneles se quitan */
  .hero-viz{animation:none !important;}
  .hero-viz *{animation-duration:.01ms !important; animation-delay:0s !important;}
  .value-panel.is-open,.board-box{animation:none !important;}
}

.wrap{max-width:1120px; margin:0 auto; padding:0 40px;}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.skip-link{position:absolute; left:16px; top:-60px; z-index:200; background:var(--green); color:#06160e; font-weight:700; padding:10px 18px; border-radius:99px; text-decoration:none; transition:top .15s;}
.skip-link:focus{top:12px;}

/* ---------- NAV ---------- */
.nav{position:sticky; top:0; z-index:50; background:var(--night); border-bottom:1px solid var(--night-line);}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:var(--nav-h);}
.brand{display:flex; align-items:center; text-decoration:none;}
.brand-mark{display:block; height:56px; flex-shrink:0;}
.brand-mark img{display:block; height:100%; width:auto; border-radius:8px; box-shadow:0 6px 16px -6px rgba(0,0,0,.55);}
.navlinks{display:flex; align-items:center; gap:34px;}
.navlinks a{font-size:14px; font-weight:500; color:var(--night-text); text-decoration:none; transition:color .15s;}
.navlinks a:hover{color:#fff;}
.nav-actions{display:flex; align-items:center; gap:12px;}
.nav-toggle{display:none; width:44px; height:44px; padding:0; border:1px solid rgba(255,255,255,.25); border-radius:50%; background:none; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px;}
.nav-toggle span{display:block; width:18px; height:2px; background:#fff; border-radius:2px; transition:transform .2s, opacity .2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.btn{
  font-family:var(--font); font-weight:700; font-size:14px;
  padding:12px 22px; border-radius:99px; text-decoration:none; white-space:nowrap; background:none;
  display:inline-flex; align-items:center; gap:8px; border:1px solid transparent; cursor:pointer; transition:opacity .15s, background .15s;
}
.btn-primary{background:var(--green); color:#06160e; min-height:44px;}
.btn-primary:hover{background:var(--green-light);}
.btn[disabled]{opacity:.6; cursor:wait;}
.txt-link{font-size:14.5px; font-weight:700; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:6px; border-bottom:1px solid var(--ink); padding-bottom:2px;}
.txt-link:hover{color:var(--green-deep); border-color:var(--green-deep);}
.txt-link.on-dark{color:#fff; border-color:rgba(255,255,255,.4);}
.txt-link.on-dark:hover{color:var(--green-light); border-color:var(--green-light);}

/* ---------- HERO ---------- */
.hero{position:relative; background:var(--night); color:#fff; overflow:hidden; min-height:calc(100vh - var(--nav-h)); min-height:calc(100svh - var(--nav-h)); display:flex; align-items:center;}
.hero-dots{
  position:absolute; top:56px; left:40px; width:150px; height:100px;
  background-image:radial-gradient(rgba(255,255,255,.28) 1.4px, transparent 1.6px);
  background-size:13px 13px; opacity:.5;
}
.hero-rings{position:absolute; right:-90px; bottom:-90px; width:380px; height:380px; opacity:.55;}
.hero-inner{position:relative; padding:64px 40px; z-index:1; width:100%;}
.hero h1{font-size:clamp(36px,5.4vw,64px); line-height:1.06; max-width:15ch; color:#fff;}
.hero h1 span{color:var(--green-light);}
.hero-sub{margin-top:26px; font-size:17.5px; color:var(--night-text); max-width:46ch;}
.hero-ctas{display:flex; align-items:center; flex-wrap:wrap; gap:20px 28px; margin-top:38px;}

.hero-viz{
  position:absolute; right:8%; top:50%; transform:translateY(-50%);
  pointer-events:none;
  animation:vizfloat 9s ease-in-out 2s infinite;
}
@keyframes vizfloat{0%,100%{transform:translateY(-50%);}50%{transform:translateY(calc(-50% - 10px));}}
.viz-window{
  width:290px; background:rgba(4,16,24,.9);
  border:1px solid rgba(255,255,255,.13); border-radius:16px; overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(47,174,114,.1);
}
.viz-titlebar{
  display:flex; align-items:center; gap:10px; padding:11px 16px;
  background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.07);
  font-size:10px; color:rgba(255,255,255,.5); letter-spacing:.02em;
}
.viz-traffic{display:flex; gap:5px;}
.viz-traffic i{width:9px; height:9px; border-radius:50%; display:block;}
.viz-traffic i:nth-child(1){background:var(--dot-red);}
.viz-traffic i:nth-child(2){background:var(--dot-yellow);}
.viz-traffic i:nth-child(3){background:var(--dot-green);}
.viz-body{display:flex; align-items:center; gap:18px; padding:20px 18px 14px;}
.viz-donut-svg{width:94px; height:94px; flex-shrink:0;}
.viz-donut-track{fill:none; stroke:rgba(255,255,255,.07); stroke-width:13;}
.viz-donut-arc{
  fill:none; stroke:var(--green); stroke-width:13; stroke-linecap:round;
  stroke-dasharray:238.8; stroke-dashoffset:238.8;
  transform:rotate(-90deg); transform-origin:50% 50%;
  animation:donut-fill 1.6s cubic-bezier(.4,0,.2,1) .4s forwards;
}
.viz-donut-ring{
  fill:none; stroke:var(--green-light); stroke-width:2;
  stroke-dasharray:163.4; stroke-dashoffset:163.4;
  transform:rotate(-90deg); transform-origin:50% 50%;
  animation:ring-fill 1.4s cubic-bezier(.4,0,.2,1) .9s forwards;
}
.viz-donut-num{fill:#fff; font-size:15px; font-weight:800; font-family:var(--font);}
.viz-donut-lbl{fill:rgba(255,255,255,.5); font-size:7px; font-family:var(--font);}
@keyframes donut-fill{to{stroke-dashoffset:59.7;}}
@keyframes ring-fill{to{stroke-dashoffset:40.8;}}
.viz-metrics{display:flex; flex-direction:column; gap:11px; flex:1;}
.viz-kpi-row{display:flex; justify-content:space-between; align-items:baseline;}
.viz-kpi-val{font-size:13px; font-weight:800; color:#fff;}
.viz-kpi-lbl{font-size:9px; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.05em;}
.viz-kpi-bar{height:3px; background:rgba(255,255,255,.08); border-radius:99px; margin-top:4px; overflow:hidden;}
.viz-kpi-fill{height:100%; background:var(--green); border-radius:99px; transform-origin:left; transform:scaleX(0);}
.viz-kpi:nth-child(1) .viz-kpi-fill{animation:kpi-grow .7s cubic-bezier(.4,0,.2,1) 1.1s forwards; width:70%;}
.viz-kpi:nth-child(2) .viz-kpi-fill{animation:kpi-grow .7s cubic-bezier(.4,0,.2,1) 1.3s forwards; width:85%; background:var(--green-light);}
.viz-kpi:nth-child(3) .viz-kpi-fill{animation:kpi-grow .7s cubic-bezier(.4,0,.2,1) 1.5s forwards; width:95%;}
@keyframes kpi-grow{to{transform:scaleX(1);}}
.viz-spark-wrap{padding:0 18px 14px;}
.viz-spark{width:100%; height:30px; display:block;}
.viz-spark-line{
  fill:none; stroke:var(--green); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:380; stroke-dashoffset:380;
  animation:spark-draw 1.6s cubic-bezier(.4,0,.2,1) 1.4s forwards;
}
.viz-spark-area{fill:url(#sparkGrad); opacity:0; animation:area-fade .4s ease 3s forwards;}
@keyframes spark-draw{to{stroke-dashoffset:0;}}
@keyframes area-fade{to{opacity:1;}}

/* ---------- SECCIONES ---------- */
section{padding:108px 0;}
.sec-head{max-width:620px; margin:0 0 56px;}
.sec-head .eyebrow{display:block; font-size:13px; font-weight:700; color:var(--green-deep); text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px;}
.sec-head h2{font-size:clamp(28px,3.2vw,40px);}
.sec-head p{margin-top:16px; color:var(--ink-soft); font-size:16px;}
.sec-soft{background:var(--soft);}
#quienes .sec-head{max-width:none;}
#quienes .sec-head p{max-width:none; font-size:17px;}

/* ---------- PESTAÑAS DE VALORES / SERVICIOS ---------- */
.values{display:grid; grid-template-columns:1fr 1.3fr; gap:24px; margin-top:8px; align-items:stretch;}
.value-list{display:flex; flex-direction:column; gap:12px;}
.value-tab{font-family:var(--font); display:flex; align-items:center; gap:16px; width:100%; text-align:left; cursor:pointer; padding:22px 24px; background:#fff; border:1px solid var(--line); border-radius:14px; font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--ink); transition:border-color .2s, background .2s, color .2s;}
.value-tab .value-num{font-size:13px; font-weight:700; color:var(--ink-faint);}
.value-tab .value-name{flex:1;}
.value-tab i{font-style:normal; color:var(--ink-faint); transition:transform .2s, color .2s;}
.value-tab:hover{border-color:var(--green);}
.value-tab[aria-selected="true"]{background:var(--green-deep); border-color:var(--green-deep); color:#fff;}
.value-tab[aria-selected="true"] .value-num, .value-tab[aria-selected="true"] i{color:#f2fcf7;}
.value-tab[aria-selected="true"] i{transform:translateX(4px);}
.value-detail{background:var(--green-tint); border:1px solid var(--line); border-radius:14px; padding:40px; display:flex; align-items:center;}
.value-panel.is-open{animation:casein .3s ease;}
.value-panel h3{font-size:clamp(22px,2.4vw,30px); color:var(--green-deep); margin-bottom:16px;}
.value-panel p{font-size:16.5px; line-height:1.75; color:var(--ink);}
@keyframes casein{from{opacity:0; transform:translateY(6px);}to{opacity:1; transform:none;}}

/* ---------- TABLEROS ---------- */
.sec-dark{background:var(--night);}
.sec-dark .sec-head .eyebrow{color:var(--green-light);}
.sec-dark .sec-head h2{color:#fff;}
.sec-dark .sec-head p{color:var(--night-text);}
.panels{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.board-card{
  font-family:var(--font); text-align:left; cursor:pointer; color:#fff; display:flex; flex-direction:column; padding:0 0 22px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden;
  transition:border-color .2s, transform .2s, background .2s;
}
.board-card:hover{border-color:var(--green); transform:translateY(-3px); background:rgba(255,255,255,.08);}
.panel-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; font-size:14.5px; font-weight:700;}
.panel-tag{font-size:11px; font-weight:700; background:rgba(47,174,114,.18); color:var(--green-light); border:1px solid rgba(47,174,114,.3); padding:5px 11px; border-radius:99px;}
.panel-desc{flex:1; display:block; color:rgba(255,255,255,.72); font-size:13.5px; line-height:1.55; padding:0 20px 18px;}
.board-open{margin:0 20px; align-self:flex-start; display:inline-flex; gap:8px; align-items:center; font-size:14px; font-weight:700; color:#06160e; background:var(--green); padding:11px 22px; border-radius:99px; transition:background .15s;}
.board-card:hover .board-open{background:var(--green-light);}
.board-open i{font-style:normal;}

.board-modal{padding:0; border:0; background:transparent; max-width:none; max-height:none; margin:auto; overflow:visible; color:inherit;}
.board-modal::backdrop{background:rgba(3,10,15,.82); backdrop-filter:blur(3px);}
.board-box{background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.6); animation:casein .25s ease;}
.board-bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 14px 10px 20px; background:var(--night); color:#fff; font-weight:700; font-size:15px;}
.board-title{margin:0; font-size:15px; font-weight:700; letter-spacing:0; color:#fff;}
.board-close{font-family:var(--font); font-size:26px; line-height:1; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.1); color:#fff; cursor:pointer;}
.board-close:hover{background:var(--green); color:#06160e;}
.board-stage{position:relative; overflow:hidden; background:#fff;}
.board-stage iframe{position:absolute; top:0; left:0; border:0; transform-origin:0 0;}
html.modal-open{overflow:hidden;}

/* ---------- CASOS DE ÉXITO ---------- */
.sector-list{display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 28px;}
.sector-tab{font-family:var(--font); font-size:19px; font-weight:800; cursor:pointer; min-height:60px; padding:14px 36px; border-radius:99px; background:#fff; border:1px solid var(--line); color:var(--ink); transition:border-color .2s, background .2s, color .2s;}
#casos .value-list{gap:8px;}
#casos .value-tab{padding:13px 18px; font-size:14.5px; border-radius:12px; gap:12px;}
#casos .value-tab .value-num{font-size:11.5px;}
.sector-tab:hover{border-color:var(--green);}
.sector-tab[aria-selected="true"]{background:var(--green-deep); border-color:var(--green-deep); color:#fff;}
.sector-empty h3{font-size:clamp(22px,2.4vw,30px); color:var(--green-deep); margin-bottom:16px;}
.sector-empty p{font-size:16.5px; line-height:1.75; color:var(--ink);}
.sector-panel > .case-cta{margin-top:20px;}
.case-panel .case-social{margin:16px 0 0; padding-top:0; border-top:0; font-size:14.5px;}
.case-logo{display:block; width:auto; max-width:100%; margin:0 auto 16px;}
.case-logo-ds{height:130px; margin-top:-12px; margin-bottom:0;}
.case-logo-ol{height:60px;}
.sector-empty .case-cta{margin-top:20px; background:#fff;}
.case-panel h3{font-size:clamp(20px,2vw,26px); color:var(--green-deep); margin-bottom:20px;}
.case-panel p{font-size:15.5px; line-height:1.7; color:var(--ink); margin-bottom:16px;}
.case-panel ul{margin:0 0 18px; padding-left:20px; color:var(--ink-soft); font-size:15px; line-height:1.65;}
.case-panel li{margin-bottom:8px;}
.case-panel p + p, .case-panel ul + p{border-top:1px solid var(--green); padding-top:22px; margin-top:22px;}
.case-panel p + ul{margin-top:-4px;}
.case-panel .case-result{background:#fff; padding:16px 20px; border-radius:10px;}
.case-cta{display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-weight:700; font-size:14px; color:var(--green-deep); text-decoration:none; border:1px solid var(--green-deep); border-radius:99px; padding:12px 24px; transition:background .15s,color .15s;}
.case-cta:hover{background:var(--green-deep); color:#fff;}

/* ---------- CONTACTO ---------- */
.cta{background:var(--night); color:#fff; position:relative; overflow:hidden;}
.cta-rings{position:absolute; left:-100px; top:-100px; width:340px; height:340px; opacity:.5;}
.cta-inner{position:relative; padding:80px 40px; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.cta-copy .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--green-light); text-transform:uppercase; letter-spacing:.06em;}
.cta-copy .eyebrow i{width:6px; height:6px; border-radius:50%; background:var(--green);}
.cta-copy h2{color:#fff; font-size:clamp(28px,3.4vw,42px); margin-top:14px;}
.cta-copy p{margin-top:16px; color:var(--night-text); font-size:16px; line-height:1.7;}
.cta-copy a{color:var(--green-light);}
.cta-copy a:hover{color:#fff;}

.contact-form{display:flex; flex-direction:column; gap:16px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:13px; font-weight:600; color:var(--night-text);}
.field label span{color:var(--green-light); margin-left:2px;}
.field input, .field textarea{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22);
  border-radius:8px; padding:12px 14px; font-family:var(--font); font-size:16px;
  color:#fff; transition:border-color .15s;
}
.field input::placeholder, .field textarea::placeholder{color:var(--night-mute);}
.field input:focus, .field textarea:focus{border-color:var(--green); outline-offset:1px;}
.field textarea{resize:vertical; min-height:110px;}
.field.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-submit{margin-top:4px;}
.form-status{font-size:14px; font-weight:600; min-height:20px;}
.form-status.ok{color:var(--green-light);}
.form-status.err{color:var(--err-soft);}
.form-note{font-size:12.5px; color:var(--night-mute);}

/* ---------- FOOTER ---------- */
footer{padding:36px 0; background:var(--night); border-top:1px solid var(--night-line);}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px 24px; font-size:13px; color:var(--night-text);}
footer a{color:var(--night-text);}
footer a:hover{color:#fff;}
.foot-meta{display:flex; align-items:center; flex-wrap:wrap; gap:8px 20px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1020px){
  .hero-viz{display:none;}
}
@media (max-width:900px){
  .wrap{padding:0 24px;}
  .hero-inner, .cta-inner{padding-left:24px; padding-right:24px;}
  section{padding:80px 0;}
  .hero-rings, .cta-rings, .hero-dots{display:none;}
  .values{grid-template-columns:1fr;}
  .value-detail{padding:28px 24px;}
  .panels{grid-template-columns:1fr;}
  .cta-inner{grid-template-columns:1fr; gap:40px; padding-top:64px; padding-bottom:64px;}
  .form-row{grid-template-columns:1fr;}

  .nav-toggle{display:inline-flex;}
  .navlinks{
    display:none;
    position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--night); border-bottom:1px solid var(--night-line); padding:8px 24px 16px;
  }
  .navlinks.is-open{display:flex;}
  .navlinks a{padding:14px 0; font-size:16px; border-bottom:1px solid var(--night-line);}
  .navlinks a:last-child{border-bottom:0;}
}
@media (max-width:480px){
  .nav-actions .btn{display:none;}
  .case-panel .case-result{padding:14px 16px;}
}

/* ---------- REDES ---------- */
.social{display:flex; gap:12px; margin-top:22px;}
.social a{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff; border:1px solid var(--night-line); text-decoration:none; transition:background .15s, color .15s, border-color .15s;}
.social a:hover{background:var(--green); border-color:var(--green); color:#06160e;}
footer .social{margin-top:0;}
footer .social a{color:var(--night-text);}
footer .social a:hover{color:#06160e;}