/* D-SIGNS · página del producto en officetech.com.co (dsigns.php).
   Todo va dentro de .ds para no tocar el resto del sitio ni la tienda. */
.ds{
  --negro:#111111; --negro2:#1A1A1A; --negro3:#242424;
  --naranja:#F5920C; --naranja-osc:#D97D00; --naranja-suave:#FFF3E3;
  --blanco:#FFFFFF; --papel:#F6F5F2; --linea:#E6E3DD;
  --texto:#1A1A1A; --texto2:#5A5753; --texto-inv:#EDEDED; --texto-inv2:#A3A3A3;
  --radio:14px;
  --letra:Calibri,Carlito,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.ds img,.ds svg{display:block}
.ds .env{max-width:1180px;margin:0 auto;padding:0 24px}
/* ---------- barra superior ---------- */
.ds .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;font:inherit;font-size:16px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.ds .btn:active{transform:translateY(1px)}
.ds .btn-n{background:var(--naranja);color:#111}
.ds .btn-n:hover{background:#ffa52e}
.ds .btn-l{border-color:rgba(255,255,255,.28);color:#fff}
.ds .btn-l:hover{border-color:#fff}
.ds .btn-o{border-color:var(--negro);color:var(--negro)}
.ds .btn-o:hover{background:var(--negro);color:#fff}
.ds .btn-g{min-height:56px;padding:0 30px;font-size:18px}
/* ---------- portada ---------- */
.ds .portada{background:radial-gradient(1100px 520px at 85% 10%,rgba(245,146,12,.20),transparent 60%),linear-gradient(180deg,var(--negro) 0%,var(--negro2) 100%);color:#fff;overflow:hidden}
.ds .portada .env{display:grid;grid-template-columns:1fr 1.12fr;gap:56px;align-items:center;padding-top:72px;padding-bottom:96px}
.ds .ceja{display:inline-flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--naranja);font-weight:700}
.ds .ceja:before{content:"";width:26px;height:3px;background:var(--naranja);border-radius:3px}
.ds h1{font-size:clamp(40px,5.4vw,66px);line-height:1.02;letter-spacing:-.02em;margin:18px 0 20px;font-weight:700}
.ds h1 em{font-style:normal;color:var(--naranja)}
.ds .portada p.lead{font-size:21px;color:var(--texto-inv);max-width:34em;margin:0 0 30px}
.ds .portada .cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ds .nota{font-size:15px;color:var(--texto-inv2);margin-top:16px}
.ds .nota b{color:#fff}
/* televisor de muestra */
.ds .tv{position:relative}
.ds .tv-marco{background:#050505;border-radius:16px;padding:12px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.07) inset}
.ds .tv-pie{width:28%;height:16px;margin:0 auto;background:linear-gradient(#1b1b1b,#0c0c0c);border-radius:0 0 8px 8px}
.ds .tv-base{width:44%;height:6px;margin:0 auto;background:#151515;border-radius:6px}
.ds .lienzo{aspect-ratio:16/9;display:grid;grid-template-columns:1fr 27%;grid-template-rows:1fr 11%;gap:5px;background:#0b0b0b;border-radius:6px;overflow:hidden;font-size:clamp(9px,1.05vw,14px)}
.ds .z1{position:relative;overflow:hidden;border-radius:4px}
.ds .pz{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:7%;opacity:0;transition:opacity 1s ease}
.ds .pz.on{opacity:1}
.ds .pz .et{font-size:.8em;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.ds .pz .ti{font-size:2.4em;line-height:1;font-weight:700;margin:.25em 0}
.ds .pz .tx{font-size:1em;opacity:.85}
.ds .pz-1{background:linear-gradient(135deg,#F5920C 0%,#c96a00 100%);color:#111}
.ds .pz-1:after{content:"";position:absolute;right:-12%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;border:2.2em solid rgba(255,255,255,.18)}
.ds .pz-2{background:linear-gradient(135deg,#1f2a44,#0e1424);color:#fff}
.ds .pz-2:after{content:"";position:absolute;right:8%;top:14%;width:34%;aspect-ratio:1;background:repeating-linear-gradient(45deg,rgba(245,146,12,.9) 0 6%,transparent 6% 12%);border-radius:10px;opacity:.75}
.ds .pz-3{background:linear-gradient(135deg,#f3efe8,#ddd5c8);color:#111}
.ds .pz-3:after{content:"%";position:absolute;right:7%;top:2%;font-size:9em;font-weight:700;color:rgba(17,17,17,.1);line-height:1}
.ds .z2{display:grid;grid-template-rows:auto auto 1fr;gap:5px}
.ds .w{background:#191919;border-radius:4px;color:#fff;padding:9% 10%}
.ds .w .k{font-size:.72em;color:#9a9a9a;text-transform:uppercase;letter-spacing:.12em}
.ds .w .v{font-size:2.1em;font-weight:700;line-height:1.05}
.ds .w .v small{font-size:.45em;color:var(--naranja);font-weight:700;margin-left:.2em}
.ds .w-qr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%;text-align:center}
.ds .qr{width:48%;aspect-ratio:1;background:
  linear-gradient(90deg,#fff 0 30%,transparent 30% 70%,#fff 70%) 0 0/100% 30% no-repeat,
  linear-gradient(90deg,#fff 0 30%,transparent 30%) 0 100%/100% 30% no-repeat,
  repeating-linear-gradient(90deg,#fff 0 10%,transparent 10% 20%) 0 50%/100% 22% no-repeat,
  repeating-linear-gradient(0deg,#fff 0 12%,transparent 12% 24%) 100% 100%/55% 55% no-repeat;border:3px solid #fff;border-radius:3px}
.ds .z3{grid-column:1/-1;display:flex;align-items:center;background:#191919;border-radius:4px;overflow:hidden;color:#fff;white-space:nowrap}
.ds .z3 b{flex:none;background:var(--naranja);color:#111;height:100%;display:flex;align-items:center;padding:0 1.2em;font-size:.95em;letter-spacing:.06em}
.ds .cinta{overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ds .cinta span{display:inline-block;padding-left:100%;animation:cinta 26s linear infinite;font-size:1em}
@keyframes cinta{to{transform:translateX(-100%)}}
.ds .chip{position:absolute;background:#fff;color:#111;border-radius:12px;padding:10px 14px;font-size:14px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);display:flex;align-items:center;gap:10px;line-height:1.25}
.ds .chip i{width:10px;height:10px;border-radius:50%;background:#1BB55C;box-shadow:0 0 0 4px rgba(27,181,92,.2);flex:none}
.ds .chip b{display:block}
.ds .chip.c1{left:-18px;bottom:-14px}
.ds .chip.c2{right:-10px;top:-46px}
.ds .chip.c2 i{background:var(--naranja);box-shadow:0 0 0 4px rgba(245,146,12,.22)}
/* ---------- franja de confianza ---------- */
.ds .franja{background:var(--negro2);color:var(--texto-inv2);border-top:1px solid rgba(255,255,255,.06)}
.ds .franja .env{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 28px;padding:20px 24px;font-size:16px}
.ds .franja span{display:flex;align-items:center;gap:10px}
.ds .franja span:before{content:"";width:8px;height:8px;border-radius:2px;background:var(--naranja);transform:rotate(45deg)}
/* ---------- secciones ---------- */
.ds section{padding:96px 0}
.ds .tit{max-width:760px;margin-bottom:48px}
.ds h2{font-size:clamp(32px,3.6vw,46px);line-height:1.08;letter-spacing:-.015em;margin:12px 0 14px}
.ds .tit p{font-size:20px;color:var(--texto2);margin:0}
.ds .ceja.osc{color:var(--naranja-osc)}
.ds .ceja.osc:before{background:var(--naranja-osc)}
/* pasos */
.ds .pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:p}
.ds .paso{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:30px 28px;position:relative}
.ds .paso:before{counter-increment:p;content:"0" counter(p);font-size:15px;font-weight:700;color:var(--naranja-osc);letter-spacing:.1em}
.ds .paso h3{font-size:23px;margin:10px 0 8px}
.ds .paso p{margin:0;color:var(--texto2);font-size:17px}
.ds .paso code{background:var(--naranja-suave);color:#8a4b00;padding:1px 7px;border-radius:6px;font-family:inherit;font-weight:700;letter-spacing:.12em}
/* funciones */
.ds .funciones{background:#fff;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.ds .rej{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.ds .f{background:#fff;padding:30px 28px}
.ds .f svg{width:34px;height:34px;margin-bottom:16px}
.ds .f h3{font-size:21px;margin:0 0 6px}
.ds .f p{margin:0;color:var(--texto2);font-size:16.5px}
.ds .f.dest{background:var(--negro);color:#fff;grid-column:span 2}
.ds .f.dest p{color:var(--texto-inv2)}
.ds .f.dest h3{font-size:25px}
.ds .f.dest .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ds .tags span{font-size:14px;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:4px 12px;color:#ddd}
/* compatibilidad */
.ds .disp{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ds .d{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:26px 24px;display:flex;flex-direction:column}
.ds .d svg{width:46px;height:46px;margin-bottom:14px}
.ds .d h3{font-size:20px;margin:0 0 4px}
.ds .d p{margin:0 0 14px;color:var(--texto2);font-size:16px;flex:1}
.ds .d .com{font-size:14px;font-weight:700;color:var(--naranja-osc)}
.ds .aviso-hw{margin-top:22px;font-size:16px;color:var(--texto2)}
/* por qué */
.ds .porque{background:var(--negro);color:#fff}
.ds .porque .tit p{color:var(--texto-inv2)}
.ds .dos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ds .pq{border-top:3px solid var(--naranja);padding-top:22px}
.ds .pq h3{font-size:23px;margin:0 0 8px}
.ds .pq p{margin:0;color:var(--texto-inv2);font-size:17px}
/* precios */
.ds .planes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;align-items:stretch}
.ds .plan{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:32px 30px;display:flex;flex-direction:column}
.ds .plan h3{margin:0;font-size:20px}
.ds .plan .pr{font-size:46px;font-weight:700;letter-spacing:-.02em;margin:14px 0 2px;line-height:1}
.ds .plan .pr small{font-size:16px;font-weight:400;color:var(--texto2);letter-spacing:0}
.ds .plan .sub{color:var(--texto2);font-size:15.5px;min-height:2.6em}
.ds .plan ul{list-style:none;padding:0;margin:20px 0 26px;flex:1}
.ds .plan li{padding:7px 0 7px 28px;position:relative;font-size:16.5px;border-bottom:1px dashed var(--linea)}
.ds .plan li:last-child{border-bottom:0}
.ds .plan li:before{content:"";position:absolute;left:2px;top:13px;width:12px;height:7px;border-left:2.5px solid var(--naranja-osc);border-bottom:2.5px solid var(--naranja-osc);transform:rotate(-45deg)}
.ds .plan.dest{background:var(--negro);color:#fff;border-color:var(--negro);position:relative}
.ds .plan.dest .sub,.ds .plan.dest .pr small{color:var(--texto-inv2)}
.ds .plan.dest li{border-color:rgba(255,255,255,.1)}
.ds .plan.dest li:before{border-color:var(--naranja)}
.ds .plan .sello{position:absolute;top:-13px;left:30px;background:var(--naranja);color:#111;font-size:13px;font-weight:700;letter-spacing:.06em;padding:4px 12px;border-radius:999px;text-transform:uppercase}
.ds .calc{margin-top:28px;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:26px 30px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px;align-items:center}
.ds .calc label{font-weight:700;display:block;margin-bottom:10px}
.ds .calc .num{display:flex;align-items:center;gap:14px}
.ds .calc input[type=range]{flex:1;accent-color:var(--naranja);height:28px}
.ds .calc output{min-width:3ch;font-size:30px;font-weight:700;text-align:right}
.ds .calc .r{border-left:1px solid var(--linea);padding-left:24px}
.ds .calc .r span{display:block;font-size:14px;color:var(--texto2);text-transform:uppercase;letter-spacing:.1em}
.ds .calc .r strong{font-size:30px;letter-spacing:-.01em}
.ds .calc .r em{display:block;font-style:normal;font-size:14.5px;color:#1a7f43;font-weight:700;min-height:1.3em}
.ds .pago{margin-top:16px;font-size:15.5px;color:var(--texto2)}
/* instalación */
.ds .inst{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.ds .inst ul{padding:0;list-style:none;margin:24px 0 30px}
.ds .inst li{display:flex;gap:14px;padding:10px 0;font-size:18px}
.ds .inst li b{flex:none;width:30px;height:30px;border-radius:50%;background:var(--naranja-suave);color:#8a4b00;display:grid;place-items:center;font-size:15px}
.ds .tarj-of{background:var(--negro);color:#fff;border-radius:20px;padding:40px;position:relative;overflow:hidden}
.ds .tarj-of:before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:var(--naranja)}
.ds .tarj-of .marca{font-size:40px;display:block;margin-bottom:6px}
.ds .tarj-of p{color:var(--texto-inv2);margin:0 0 22px}
.ds .tarj-of dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0;font-size:16.5px}
.ds .tarj-of dt{color:var(--naranja);font-weight:700}
.ds .tarj-of dd{margin:0;color:#e9e9e9}
/* preguntas */
.ds .faq{max-width:860px}
.ds details{background:#fff;border:1px solid var(--linea);border-radius:12px;margin-bottom:12px}
.ds summary{cursor:pointer;list-style:none;padding:20px 56px 20px 24px;font-weight:700;font-size:19px;position:relative}
.ds summary::-webkit-details-marker{display:none}
.ds summary:after{content:"";position:absolute;right:24px;top:50%;width:11px;height:11px;border-right:2.5px solid var(--naranja-osc);border-bottom:2.5px solid var(--naranja-osc);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.ds details[open] summary:after{transform:translateY(-30%) rotate(-135deg)}
.ds details p{margin:0;padding:0 24px 22px;color:var(--texto2);font-size:17px}
/* cierre */
.ds .cierre{background:linear-gradient(120deg,var(--naranja) 0%,#ffae3d 100%);color:#111;padding:80px 0}
.ds .cierre .env{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.ds .cierre h2{margin:0;max-width:16em}
.ds .cierre p{margin:8px 0 0;font-size:19px}
.ds .cierre .btn-n{background:#111;color:#fff}
.ds .cierre .btn-n:hover{background:#2a2a2a}
.ds .cierre .btn-o{border-color:#111}
@media (max-width:1020px){
  .ds .portada .env{grid-template-columns:1fr;gap:48px;padding-top:48px;padding-bottom:72px}
  .ds .rej{grid-template-columns:1fr 1fr}
  .ds .disp{grid-template-columns:1fr 1fr}
  .ds .planes{grid-template-columns:1fr}
  .ds .plan .sub{min-height:0}
  .ds .calc{grid-template-columns:1fr 1fr}
  .ds .calc>div:first-child{grid-column:1/-1}
  .ds .calc .r:nth-child(2){border-left:0;padding-left:0}
  .ds .inst{grid-template-columns:1fr;gap:36px}
  .ds .dos{grid-template-columns:1fr}
}
@media (max-width:820px){
  .ds .pasos{grid-template-columns:1fr}
}
@media (max-width:600px){
  .ds .env{padding:0 16px}
  .ds .ds-sec{padding:68px 0}
  .ds .tit{margin-bottom:32px}
  .ds .portada p.lead{font-size:19px}
  .ds .portada .cta .btn{width:100%}
  .ds .rej,.ds .disp{grid-template-columns:1fr}
  .ds .f.dest{grid-column:auto}
  .ds .calc{grid-template-columns:1fr;padding:22px}
  .ds .calc .r{border-left:0;padding-left:0;border-top:1px solid var(--linea);padding-top:16px}
  .ds .chip.c1{left:4px;bottom:-30px}
  .ds .chip.c2{right:4px;top:-44px}
  .ds .chip{font-size:12.5px;padding:8px 11px}
  .ds .tarj-of{padding:30px 24px}
  .ds .tarj-of dl{grid-template-columns:1fr;gap:2px}
  .ds .tarj-of dd{margin-bottom:10px}
  .ds .cierre .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .ds .cinta span{animation:none;padding-left:0}
  .ds .pz{transition:none}
}
.ds{font-family:var(--letra);color:var(--texto);background:var(--papel);font-size:18px;line-height:1.55}
.ds *,.ds *:before,.ds *:after{box-sizing:border-box}
.ds svg{display:block}
.ds a{color:inherit}
.ds h1,.ds h2,.ds h3{font-family:var(--letra);color:inherit}
.ds p{max-width:none}
.ds .ds-sec{padding:96px 0}
.ds .ds-logo{font-weight:700;white-space:nowrap}
.ds .ds-logo b{color:var(--naranja)}
.ds :focus-visible{outline:3px solid var(--naranja);outline-offset:3px;border-radius:6px}
.ds .acceso{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:15.5px;color:var(--texto-inv2)}
.ds .acceso a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(245,146,12,.7)}
@media (max-width:600px){.ds .ds-sec{padding:68px 0}}

.ds .calc .comprar{margin-top:12px;min-height:42px;font-size:15px;padding:0 16px;width:100%}
.ds .calc .r em{margin-bottom:2px}
.ds #calc{scroll-margin-top:110px}
/* La hoja general del sitio (style.css) también usa .pasos en Servicios con fondo gris y bordes: aquí no aplica. */
.ds .pasos{background:transparent;border:0;border-radius:0;overflow:visible}
@media (max-width:820px){.ds .pasos{gap:0}.ds .paso{padding:26px 0 30px}}
.ds .pasos .paso{padding-left:0;padding-right:24px}
/* Iniciar sesión (usuarios registrados) en la barra D·SIGNS */
.ds-subnav>div{align-items:center}
nav.ds-subnav>div>a.ds-sub-calc{color:#ffb04a}
nav.ds-subnav>div>a.ds-login{display:inline-flex;align-items:center;gap:8px;color:#111;background:#f5920c;border-radius:999px;padding:8px 16px;font-weight:600;font-size:13px;white-space:nowrap;transition:background .2s}
nav.ds-subnav>div>a.ds-login:hover{background:#ffa92f}
.ds-subnav .ds-login svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(max-width:600px){nav.ds-subnav>div>a.ds-login{padding:8px 14px;font-size:12px}}