/* ============================================================
   ACD&CO · Páginas de servicios y de servidores (renting, IA privada, servidores)
   Mismo lenguaje visual que el programa OEM: cabecera con luz azul,
   fichas con borde fino, etiquetas en mono. Solo tema oscuro, como el sitio.
   ============================================================ */
/* hidden tiene que ganar a los display:grid de los bloques */
[hidden]{display:none!important}

:root{
  --viz-blue:#3987e5;      /* serie propia (paleta de datos validada en oscuro) */
  --viz-aqua:#199e70;      /* segunda serie */
  --viz-gray:#7d8596;      /* comparación */
  --viz-gray-2:#5a6273;
  --viz-grid:oklch(100% 0 0 / .06);
  --viz-axis:oklch(100% 0 0 / .16);
  --viz-surface:#0a0d14;
}

/* ---------- Cabecera ---------- */
.sv-hero{padding:calc(var(--nav-h) + clamp(3.5rem,9vh,6.5rem)) clamp(1.5rem,5vw,5rem) clamp(3.25rem,7vh,4.75rem);position:relative;border-bottom:1px solid var(--border);background:#04070E;overflow:hidden}
.sv-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 65% 55% at 22% 22%,rgba(29,78,216,.12) 0%,transparent 62%);pointer-events:none}
.sv-hero-in{max-width:min(1200px,92vw);margin:0 auto;position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,5vw,4.5rem);align-items:end}
.sv-hero h1{font-family:var(--display);font-size:clamp(2.1rem,4.4vw,3.9rem);font-weight:700;line-height:1.04;letter-spacing:-.03em;color:#fff;margin:1.4rem 0 1.3rem;max-width:18ch}
.sv-hero h1 em{font-style:normal;color:var(--blue-3)}
.sv-lead{font-size:clamp(1rem,1.15vw,1.16rem);color:var(--text-2);line-height:1.7;max-width:60ch;margin-bottom:2.1rem}
.sv-ctas{display:flex;gap:.85rem;flex-wrap:wrap}
.sv-crumbs{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.sv-crumbs a{color:var(--text-3);transition:color .15s}
.sv-crumbs a:hover{color:var(--blue-3)}
.sv-crumbs span[aria-hidden]{opacity:.5}

/* Ficha técnica del servicio (misma familia que ACD·OEM / 26) */
.sv-sheet{border:1px solid var(--border-2);border-radius:var(--r);background:oklch(100% 0 0 / .022);overflow:hidden}
.sv-sheet-h{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.95rem 1.2rem;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.sv-sheet-h span:first-child{color:var(--blue-3)}
.sv-sheet-h span:last-child{color:var(--text-3)}
.sv-row{display:flex;justify-content:space-between;gap:1rem;padding:.72rem 1.2rem;border-bottom:1px solid var(--border);font-size:.85rem}
.sv-row:last-child{border-bottom:0}
.sv-row .k{color:var(--text-3)}
.sv-row .v{color:var(--text);font-weight:500;text-align:right}
.sv-row .v em{font-style:normal;font-family:var(--mono);color:var(--blue-3)}

/* ---------- Secciones ---------- */
.sv-sec{padding:clamp(3.5rem,8vh,6rem) clamp(1.5rem,5vw,5rem);border-bottom:1px solid var(--border)}
.sv-in{max-width:min(1200px,92vw);margin:0 auto}
.sv-num{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:.9rem}
.sv-num b{color:var(--blue-3);font-weight:600}
.sv-sec h2{font-family:var(--display);font-size:clamp(1.5rem,2.7vw,2.35rem);font-weight:700;letter-spacing:-.025em;line-height:1.15;color:#fff;margin-bottom:1rem;max-width:24ch}
.sv-sub{font-size:clamp(.95rem,1.05vw,1.05rem);color:var(--text-2);line-height:1.7;max-width:64ch;margin-bottom:2.4rem}

.sv-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem}
.sv-step{padding:1.55rem 1.4rem;border:1px solid var(--border);border-radius:var(--r);background:oklch(100% 0 0 / .02)}
.sv-step .n{font-family:var(--mono);font-size:.72rem;color:var(--blue-3);letter-spacing:.1em;margin-bottom:.8rem;display:block}
.sv-step b{display:block;font-size:.97rem;color:#fff;font-weight:600;margin-bottom:.45rem}
.sv-step p{font-size:.86rem;color:var(--text-3);line-height:1.65}

.sv-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem}
.sv-card{padding:1.55rem 1.45rem;background:oklch(100% 0 0 / .02);border:1px solid var(--border);border-radius:var(--r)}
.sv-card b{display:block;font-size:.98rem;font-weight:600;color:#fff;margin-bottom:.5rem}
.sv-card p{font-size:.87rem;color:var(--text-3);line-height:1.65}

.sv-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.sv-list{display:grid;gap:.8rem;list-style:none}
.sv-list li{display:flex;gap:.85rem;align-items:flex-start;font-size:.93rem;color:var(--text-2);line-height:1.65}
.sv-list li b{color:var(--text);font-weight:600}
.sv-list svg{width:16px;height:16px;flex:0 0 16px;margin-top:.3rem;stroke:var(--blue-3);stroke-width:2.5;fill:none}
.sv-aside{font-size:.88rem;color:var(--text-2);line-height:1.65;margin-top:1.4rem;padding:1rem 1.15rem;border-left:2px solid var(--blue-3);background:rgba(29,78,216,.07);border-radius:0 8px 8px 0}
.sv-aside b{color:var(--text)}

/* ---------- Calculadora ---------- */
.calc{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:1.25rem;align-items:start}
.calc-panel{border:1px solid var(--border-2);border-radius:var(--r);background:oklch(100% 0 0 / .025);padding:1.35rem 1.3rem;display:grid;gap:1.25rem;position:sticky;top:calc(var(--nav-h) + 1.25rem)}
.calc-panel h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:500}
.fld{display:grid;gap:.5rem}
.fld-top{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}
.fld label,.fld .lbl{font-size:.86rem;color:var(--text-2);font-weight:500}
.fld output{font-family:var(--mono);font-size:.85rem;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.fld .hint{font-size:.76rem;color:var(--text-3);line-height:1.5}
.fld select,.fld .num{width:100%;background:oklch(100% 0 0 / .04);border:1px solid var(--border-2);border-radius:8px;color:var(--text);font:inherit;font-size:.9rem;padding:.62rem .75rem;transition:border-color .15s}
.fld select:focus,.fld .num:focus{outline:none;border-color:var(--blue-3);box-shadow:0 0 0 3px oklch(72% 0.18 264 / .18)}
.fld select option{background:#0b0f18;color:var(--text)}
.num-wrap{display:flex;align-items:center;gap:.5rem}
.num-wrap .num{flex:1}
.num-wrap span{font-size:.8rem;color:var(--text-3);white-space:nowrap}
.fld input[type=range]{width:100%;accent-color:var(--blue-2);height:1.4rem;cursor:pointer}
.fld input[type=number]::-webkit-outer-spin-button,.fld input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fld input[type=number]{-moz-appearance:textfield;appearance:textfield}
.seg{display:flex;gap:.25rem;padding:.25rem;border:1px solid var(--border-2);border-radius:9px;background:oklch(100% 0 0 / .03)}
.seg button{flex:1;padding:.5rem .4rem;border-radius:6px;font-size:.84rem;font-weight:500;color:var(--text-2);transition:background .15s,color .15s}
.seg button:hover{color:#fff}
.seg button[aria-pressed="true"]{background:var(--blue);color:#fff;box-shadow:0 2px 10px var(--blue-glow)}
.seg button:focus-visible{outline:2px solid var(--blue-3);outline-offset:1px}
.chk{display:flex;gap:.7rem;align-items:flex-start;font-size:.86rem;color:var(--text-2);line-height:1.5;cursor:pointer}
.chk input{width:18px;height:18px;margin-top:.12rem;accent-color:var(--blue-2);flex:0 0 18px;cursor:pointer}
.chk b{color:var(--text);font-weight:600}

.calc-out{display:grid;gap:1.1rem;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.kpi{border:1px solid var(--border);border-radius:10px;background:oklch(100% 0 0 / .022);padding:1rem 1rem .95rem;display:grid;gap:.3rem;align-content:start;min-width:0}
.kpi-l{font-size:.76rem;color:var(--text-3);line-height:1.4}
.kpi-v{font-family:var(--sans);font-weight:650;font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.02em;color:#fff;line-height:1.1;overflow-wrap:anywhere}
.kpi-s{font-size:.74rem;color:var(--text-3);line-height:1.45}
.kpi.hl{border-color:oklch(60% 0.22 264 / .55);background:oklch(47% 0.22 264 / .12)}
.kpi.hl .kpi-v{color:var(--blue-3)}

.viz{border:1px solid var(--border);border-radius:var(--r);background:var(--viz-surface);padding:1.1rem 1.1rem .7rem;position:relative;min-width:0}
.viz-h{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:.55rem}
.viz-t{font-size:.95rem;font-weight:600;color:#fff}
.viz-s{font-size:.78rem;color:var(--text-3);margin-top:.1rem}
.viz-legend{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.8rem;color:var(--text-2)}
.viz-legend span{display:inline-flex;align-items:center;gap:.5rem}
.viz-legend i{display:inline-block;width:14px;height:2px;border-radius:1px}
.viz-legend i.sq{width:11px;height:11px;border-radius:3px}
.viz-svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.viz-svg text{font-family:var(--sans);font-size:12px}
.viz-svg:focus-visible{outline:2px solid var(--blue-3);outline-offset:4px;border-radius:6px}
.viz-tip{position:absolute;pointer-events:none;z-index:5;min-width:200px;max-width:280px;padding:.7rem .85rem;background:#0f1522;border:1px solid var(--border-2);border-radius:9px;box-shadow:0 12px 32px rgba(0,0,0,.5);font-size:.8rem}
.viz-tip-h{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:.35rem}
.viz-tip-r{display:grid;grid-template-columns:14px 1fr auto;gap:.5rem;align-items:center;padding:.12rem 0}
.viz-tip-r i{display:block;width:12px;height:2px;border-radius:1px}
.viz-tip-r em{font-style:normal;color:var(--text-2)}
.viz-tip-r strong{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.viz-tip-x{margin-top:.4rem;padding-top:.4rem;border-top:1px solid var(--border);color:var(--text-2)}
.viz-tip-x strong{color:#fff}

.viz-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px}
.viz-table{width:100%;border-collapse:collapse;font-size:.84rem}
.viz-table caption{text-align:left;font-size:.76rem;color:var(--text-3);padding:.65rem .9rem 0}
.viz-table th,.viz-table td{padding:.6rem .9rem;text-align:right;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
.viz-table th{white-space:nowrap}
.viz-table th:first-child,.viz-table td:first-child{text-align:left}
.viz-table thead th{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.viz-table td{color:var(--text-2)}
.viz-table tr:last-child td{border-bottom:0}
.viz-table td strong{color:#fff;font-weight:600}

.calc-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem 1.5rem;flex-wrap:wrap}
.calc-note{font-size:.76rem;color:var(--text-3);line-height:1.6;max-width:70ch}

/* ---------- Preguntas ---------- */
.sv-faq{display:grid;gap:.7rem;max-width:920px}
.sv-q{border:1px solid var(--border);border-radius:var(--r-sm);background:oklch(100% 0 0 / .02);overflow:hidden}
.sv-q summary{cursor:pointer;list-style:none;padding:1.05rem 1.3rem;font-size:.95rem;font-weight:500;color:var(--text);display:flex;justify-content:space-between;gap:1rem;align-items:center;transition:background .2s}
.sv-q summary::-webkit-details-marker{display:none}
.sv-q summary:hover{background:oklch(100% 0 0 / .03)}
.sv-q summary::after{content:'+';font-family:var(--mono);font-size:1.15rem;color:var(--blue-3);flex:0 0 auto;transition:transform .25s var(--ease-out)}
.sv-q[open] summary::after{transform:rotate(45deg)}
.sv-q .a{padding:0 1.3rem 1.2rem;font-size:.89rem;color:var(--text-2);line-height:1.75;max-width:78ch}

/* ---------- Llamada final ---------- */
.sv-cta{padding:clamp(3.5rem,8vh,6rem) clamp(1.5rem,5vw,5rem)}
.sv-cta-card{max-width:min(1200px,92vw);margin:0 auto;padding:clamp(2.25rem,4vw,3.5rem);border:1px solid var(--border-2);border-radius:var(--r);background:linear-gradient(135deg,oklch(100% 0 0 / .035),oklch(100% 0 0 / .012));text-align:center}
.sv-cta-card h2{font-family:var(--display);font-size:clamp(1.4rem,2.5vw,2.1rem);font-weight:700;letter-spacing:-.025em;color:#fff;margin-bottom:.9rem}
.sv-cta-card p{font-size:.98rem;color:var(--text-2);line-height:1.7;max-width:56ch;margin:0 auto 2rem}
.sv-cta-ctas{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap}

@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){
  .calc{grid-template-columns:minmax(0,1fr)}
  .calc-panel{position:static}
  .sv-hero-in{grid-template-columns:minmax(0,1fr);align-items:start}
}
@media (max-width:900px){.sv-split{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .sv-ctas .btn,.sv-cta-ctas .btn{flex:1 1 100%;justify-content:center}
  .kpi{padding:.85rem .85rem .8rem}
  .viz{padding:.9rem .75rem .5rem}
}
@media (max-width:380px){.kpis{grid-template-columns:minmax(0,1fr)}}

/* ---------- letra pequeña: condiciones que tienen que constar, sin protagonismo ---------- */
.sv-fine{font-size:.76rem;color:var(--text-3);line-height:1.6;margin-top:1.1rem;max-width:72ch}
.sv-fine a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.sv-in > .sv-fine{margin-top:1.4rem}
.sv-in > .sv-h3{font-family:var(--display);font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:600;color:#fff;letter-spacing:-.015em;line-height:1.25;margin-top:clamp(2.5rem,5vw,3.5rem)}
.sv-in > .sv-h3 + .sv-cards{margin-top:1.1rem}
/* IA privada: tramos de equipo debajo de la calculadora; servicios.js marca (.on) el de las personas elegidas */
.sv-tier{display:flex;flex-direction:column;transition:border-color .3s,background-color .3s,box-shadow .3s}
.sv-tier .k{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:.6rem;transition:color .3s}
.sv-tier p{flex:1}
.sv-tier .pr{margin-top:1.1rem;font-family:var(--mono);font-size:1.2rem;font-weight:600;color:#fff;letter-spacing:-.01em}
.sv-tier .pr small{display:block;margin-top:.3rem;font-size:.72rem;font-weight:400;color:var(--text-3);letter-spacing:0}
.sv-tier.on{border-color:var(--blue-3);background:rgba(29,78,216,.09);box-shadow:inset 0 0 0 1px var(--blue-3)}
.sv-tier.on .k{color:var(--blue-3)}
@media (prefers-reduced-motion:reduce){.sv-tier,.sv-tier .k{transition:none}}
.sv-in > .sv-cards + .sv-split,.sv-in > .sv-steps + .sv-cards,.sv-in > .sv-cards + .sv-cards{margin-top:clamp(2rem,4vw,3rem)}

/* ---------- conclusión de la calculadora ---------- */
.calc-verdict{font-size:.9rem;line-height:1.6;color:var(--text-2);padding:.85rem 1rem;border-left:2px solid var(--viz-blue);background:oklch(100% 0 0 / .025);border-radius:0 8px 8px 0}

/* ---------- tablas comparativas (IA privada / nube, formatos de servidor) ---------- */
.sv-compare-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);background:oklch(100% 0 0 / .015)}
.sv-compare{width:100%;border-collapse:collapse;font-size:.87rem;min-width:520px}
.sv-compare caption{text-align:left;font-size:.76rem;color:var(--text-3);padding:.8rem 1.1rem 0}
.sv-compare th,.sv-compare td{padding:.8rem 1.1rem;text-align:left;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.5}
.sv-compare thead th{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:500;white-space:nowrap}
.sv-compare.hl thead th:nth-child(2){color:var(--blue-3)}
.sv-compare tbody th{color:var(--text-2);font-weight:500;width:30%}
.sv-compare tbody td{color:var(--text-3)}
.sv-compare.hl tbody td:nth-child(2){color:var(--text)}
.sv-compare tbody tr:last-child th,.sv-compare tbody tr:last-child td{border-bottom:0}
@media (max-width:640px){.sv-compare{font-size:.82rem}.sv-compare th,.sv-compare td{padding:.7rem .8rem}}

/* ---------- 6 tarjetas: 3 + 3 en escritorio, sin huecos ---------- */
.sv-cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.sv-cards.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.sv-cards.c3{grid-template-columns:minmax(0,1fr)}}
.sv-cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.sv-cards.c2{grid-template-columns:minmax(0,1fr)}}
/* Enlaces dentro del texto: que se vea que lo son */
.sv-card a,.sv-list a,.sv-aside a,.sv-q .a a{color:var(--blue-3);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.sv-card a:hover,.sv-list a:hover,.sv-aside a:hover,.sv-q .a a:hover{color:#fff}