/* COMMANDER BUSINESS · página de inicio (planes) */
:root{
  --tinta:#14213D; --tinta-2:#1C2D52; --tinta-3:#2A3D68; --naranja:#F28C28; --naranja-tinta:#1E1304; --naranja-suave:#FDEBD8;
  --fondo:#EEF1F6; --papel:#FFF; --linea:#D5DCE8; --gris:#5B6880; --azul:#2D5BA8;
  --ok:#1C7F4E; --ok-f:#DDF1E5; --warn:#A86300; --warn-f:#FBEACB; --bad:#B9352B; --bad-f:#F8DDD9; --info-f:#E0E9F8;
  --f-disp:"Archivo","Arial Narrow",system-ui,sans-serif; --f-cuerpo:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ancho:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;font:16px/1.55 var(--f-cuerpo);color:var(--tinta);background:var(--fondo);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
button,input,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:3px solid var(--naranja);outline-offset:2px;border-radius:6px}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-60px;background:var(--tinta);color:#fff;padding:10px 14px;border-radius:8px;z-index:10}
.saltar:focus{top:12px}

/* ---------- botones ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border:2px solid var(--naranja);border-radius:10px;background:var(--naranja);
  color:var(--naranja-tinta);font-weight:700;text-decoration:none;cursor:pointer;transition:transform .12s,filter .12s}
.boton:hover{filter:brightness(1.06)} .boton:active{transform:translateY(1px)} .boton:disabled{opacity:.6;cursor:progress}
.boton.linea{background:transparent;border-color:var(--tinta);color:var(--tinta)}
.boton.linea:hover{background:var(--tinta);color:#fff;filter:none}

/* ---------- barra ---------- */
.barra{max-width:var(--ancho);margin:0 auto;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.barra nav{display:flex;align-items:center;gap:26px;font-weight:600;font-size:.95rem}
.barra nav a:not(.boton){text-decoration:none;color:var(--gris)}
.barra nav a:not(.boton):hover{color:var(--tinta);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--naranja)}
.barra .boton{padding:9px 18px}

/* ---------- encabezado ---------- */
main{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.hero{padding:44px 0 34px;max-width:900px}
.hero h1{margin:0;font-family:var(--f-disp);font-stretch:112%;font-weight:800;font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.03;letter-spacing:-.022em;text-wrap:balance}
.hero p{margin:20px 0 0;font-size:1.13rem;color:var(--gris);max-width:62ch}

/* ---------- controles ---------- */
.controles{display:flex;flex-wrap:wrap;gap:16px 36px;margin-bottom:22px}
.seg{border:0;margin:0;padding:0;min-width:0}
.seg legend{padding:0;margin-bottom:8px;font-weight:600;font-size:.9rem;color:var(--gris)}
.ops{display:flex}
.seg label{margin-right:-2px;flex:0 1 auto}
.seg label:last-of-type{margin-right:0}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label span{display:flex;flex-direction:column;padding:9px 20px 10px;border:2px solid var(--tinta);background:transparent;cursor:pointer;min-width:150px;transition:background .15s,color .15s}
.seg label:first-of-type span{border-radius:10px 0 0 10px}
.seg label:last-of-type span{border-radius:0 10px 10px 0}
.seg label b{font-weight:700;line-height:1.25}
.seg label small{font-size:.8rem;color:var(--gris);transition:color .15s}
.seg input:checked+span{background:var(--tinta);color:#fff}
.seg input:checked+span small{color:#B9C4DA}
.seg input:focus-visible+span{outline:3px solid var(--naranja);outline-offset:2px}

/* ---------- lista de planes + vista previa ---------- */
.tablero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:28px;align-items:start}
.lista{list-style:none;margin:0;padding:0;border-top:2px solid var(--tinta)}
.lista>li{border-bottom:1px solid var(--linea)}
.plan{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;width:100%;padding:17px 14px 17px 22px;border:0;background:none;text-align:left;cursor:pointer;transition:background .15s}
.plan .marca-sel{position:absolute;left:0;top:10px;bottom:10px;width:5px;border-radius:3px;background:var(--naranja);transform:scaleY(0);transition:transform .18s}
.plan[aria-checked=true] .marca-sel{transform:scaleY(1)}
.plan.viendo,.plan:hover{background:var(--papel)}
.plan[aria-checked=true]{background:var(--papel)}
.plan .quien b{display:block;font-family:var(--f-disp);font-stretch:108%;font-weight:700;font-size:1.16rem;line-height:1.2}
.plan .quien i{font-style:normal;font-weight:500;color:var(--gris)}
.plan .quien small{display:block;margin-top:2px;color:var(--gris);font-size:.86rem}
.plan .cuanto{text-align:right;white-space:nowrap}
.plan .cuanto b{display:block;font-family:var(--f-disp);font-weight:800;font-size:1.16rem;font-variant-numeric:tabular-nums}
.plan .cuanto small{color:var(--gris);font-size:.8rem}
.xx{color:var(--gris)}

.vista{position:sticky;top:18px;background:var(--tinta);color:#fff;border-radius:20px;padding:22px;display:grid;gap:22px}
.detalle{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px;align-items:end;padding:0 6px 6px}
.para{margin:0 0 4px;color:#F6B26B;font-weight:600;font-size:.86rem}
.detalle h3{margin:0;font-family:var(--f-disp);font-stretch:110%;font-weight:800;font-size:1.55rem;line-height:1.1;letter-spacing:-.01em}
.resumen{margin:8px 0 12px;color:#C7D0E2;font-size:.95rem}
.incluye{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.92rem}
.incluye li{padding-left:22px;position:relative}
.incluye li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:6px;border-left:2px solid var(--naranja);border-bottom:2px solid var(--naranja);transform:rotate(-45deg)}
.incluye li.mas{color:#C7D0E2}
.incluye li.mas::before{border:0;width:8px;height:2px;top:.7em;background:#8FA0C0;transform:none}
.cierre{display:grid;gap:12px}
.extra{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--tinta-3);border-radius:10px;cursor:pointer;font-size:.86rem}
.extra:hover{border-color:#5F76A8}
.extra input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--naranja)}
.extra b{display:block;font-size:.92rem} .extra small{color:#AEB9D0;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.extra em{font-style:normal;font-weight:700;white-space:nowrap}
.total{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 12px;padding-top:4px}
.total span{color:#C7D0E2;font-size:.9rem}
.total b{font-family:var(--f-disp);font-stretch:110%;font-weight:800;font-size:1.9rem;line-height:1;font-variant-numeric:tabular-nums}
.total b.xx{color:#fff;opacity:.75}
.total small{grid-column:1/-1;text-align:right;color:#AEB9D0;font-size:.82rem;margin-top:3px}
.cierre .boton{width:100%}
.fino{margin:0;color:#AEB9D0;font-size:.8rem;text-align:center}

/* vista previa en video */
.pantalla{background:#DDE3EE;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.p-barra{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#DDE3EE}
.p-barra span{width:9px;height:9px;border-radius:50%;background:#B4BFD3}
.p-barra em{margin-left:8px;font-style:normal;font-weight:600;color:var(--gris);font-size:11.5px}
.p-video{position:relative;aspect-ratio:16/10;background:var(--fondo)}
.p-video video{display:block;width:100%;height:100%;object-fit:cover}
.p-pausa{position:absolute;right:10px;bottom:10px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(20,33,61,.78);cursor:pointer;opacity:0;transition:opacity .15s}
.pantalla:hover .p-pausa,.p-pausa:focus-visible,.p-pausa.play{opacity:1}
.p-pausa::before,.p-pausa::after{content:"";position:absolute;top:12px;width:4px;height:12px;background:#fff;border-radius:1px}
.p-pausa::before{left:13px} .p-pausa::after{left:19px}
.p-pausa.play::after{display:none}
.p-pausa.play::before{left:14px;top:11px;width:0;height:0;background:none;border-radius:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff}
.nota-us{display:block;margin-top:6px;color:var(--warn);font-size:.84rem}

/* ---------- núcleo ---------- */
.nucleo{padding:92px 0 20px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:28px}
h2{margin:0;font-family:var(--f-disp);font-stretch:112%;font-weight:800;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.08;letter-spacing:-.018em}
.nucleo .cab{position:sticky;top:24px;align-self:start}
.nucleo .cab p{color:var(--gris);margin:14px 0 0;max-width:40ch}
.rasgos{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px;border-top:2px solid var(--tinta)}
.rasgos div{padding:15px 0;border-bottom:1px solid var(--linea)}
.rasgos dt{font-weight:700}
.rasgos dd{margin:2px 0 0;color:var(--gris);font-size:.93rem}

/* ---------- cómo empezar ---------- */
.empezar{padding:92px 0 80px}
.pasos{list-style:none;counter-reset:paso;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.pasos li{counter-increment:paso;border-top:2px solid var(--tinta);padding-top:14px;display:grid;gap:6px;align-content:start}
.pasos li::before{content:counter(paso);font-family:var(--f-disp);font-stretch:112%;font-weight:800;font-size:2.4rem;line-height:1;color:var(--naranja)}
.pasos b{font-size:1.08rem}
.pasos span{color:var(--gris)}
.fila-fin{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

.pie{max-width:var(--ancho);margin:0 auto;padding:26px 24px 40px;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;color:var(--gris);font-size:.88rem}

/* ---------- solicitud ---------- */
dialog{border:0;border-radius:16px;padding:0;width:min(560px,calc(100vw - 24px));color:var(--tinta);box-shadow:0 30px 80px rgba(20,33,61,.35)}
dialog::backdrop{background:rgba(20,33,61,.55)}
dialog form{padding:28px 28px 26px;position:relative}
dialog h2{font-size:1.5rem;padding-right:36px}
.s-resumen{margin:8px 0 6px;padding:10px 12px;background:var(--naranja-suave);border-radius:8px;font-weight:600;font-size:.92rem}
dialog label{display:block;font-weight:600;font-size:.88rem;margin:14px 0 5px}
dialog input,dialog textarea{width:100%;padding:11px 12px;border:1px solid var(--linea);border-radius:8px;background:#fff}
dialog input:focus,dialog textarea:focus{outline:0;border-color:var(--naranja);box-shadow:0 0 0 3px rgba(242,140,40,.22)}
dialog textarea{resize:vertical}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
dialog .boton{width:100%;margin-top:20px}
.cerrar{position:absolute;right:16px;top:16px;width:36px;height:36px;border:0;border-radius:8px;background:var(--fondo);font-size:1.3rem;line-height:1;cursor:pointer}
.error{margin:14px 0 0;padding:10px 12px;border-radius:8px;background:var(--bad-f);color:var(--bad);font-weight:600;font-size:.92rem}
#s-listo p{color:var(--gris);margin:12px 0 0}

/* ---------- angosto ---------- */
@media (max-width:940px){
  .barra nav a:not(.boton){display:none}
  .tablero{grid-template-columns:1fr}
  .vista{position:static;margin:4px 0 18px;border-radius:16px;padding:14px}
  .nucleo{grid-template-columns:1fr;padding-top:64px}
  .empezar{padding-top:64px}
  .pasos{grid-template-columns:1fr;gap:20px}
}
@media (max-width:620px){
  main,.barra{padding-left:16px;padding-right:16px}
  .barra .marca img{width:180px}
  .hero{padding-top:22px}
  .seg{width:100%} .seg label{flex:1 1 0} .seg label span{min-width:0;height:100%;padding-left:12px;padding-right:12px}
  .detalle{grid-template-columns:1fr;gap:18px}
  .rasgos{grid-template-columns:1fr}
  .dos{grid-template-columns:1fr}
  .plan{padding-left:16px}
}

/* v1.8 · contratar en línea: la vía de contacto queda como opción secundaria */
.otra-via{display:block;width:100%;margin:10px 0 2px;padding:6px;background:none;border:0;color:#D5DCEA;font:inherit;font-size:.88rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.otra-via:hover{color:#fff}
.otra-via:focus-visible{outline:2px solid var(--naranja);outline-offset:2px;border-radius:6px}

/* símbolo de cada plan: el cuadro toma el color del módulo */
.plan .pmk{display:flex;width:34px;height:34px}

/* ---------- demo antes de los planes ---------- */
.demo{margin:0 0 56px}
.demo-cab{display:flex;align-items:end;justify-content:space-between;gap:12px 40px;flex-wrap:wrap;margin-bottom:18px}
.demo-cab h2{margin:0;font-family:var(--f-disp);font-stretch:108%;font-weight:800;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.015em}
.demo-cab p{margin:0;color:var(--gris);max-width:58ch}
.demo-marco{display:block;width:min(1440px,calc(100vw - 48px));margin-left:50%;transform:translateX(-50%);height:min(820px,calc(100vh - 40px));min-height:640px;border:0;border-radius:18px;background:var(--tinta)}
.demo-movil{display:none}
.demo-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 16px}
.demo-chips button{display:flex;align-items:center;gap:7px;flex:none;padding:7px 12px 7px 9px;border:1.5px solid var(--linea);border-radius:999px;background:var(--papel);font-weight:600;font-size:.88rem;cursor:pointer}
.demo-chips button[aria-pressed=true]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.demo-chips button[aria-pressed=true] svg path{fill:#fff}
.demo-chips button svg path{fill:var(--tinta)}
.telefono{position:relative;display:block;width:min(300px,78vw);margin:0 auto;padding:12px;border-radius:44px;background:var(--tinta);box-shadow:0 30px 60px -30px rgba(20,33,61,.7);text-decoration:none}
.tel-pantalla{display:block;position:relative;aspect-ratio:9/18.5;border-radius:32px;overflow:hidden;background:#F3F5F9}
.tel-pantalla iframe{position:absolute;left:0;top:0;width:390px;height:802px;border:0;transform-origin:0 0;pointer-events:none}
.tel-toca{display:block;margin:14px auto 2px;text-align:center;color:#fff;font-weight:700}
.tel-toca::after{content:" →"}
@media (max-width:900px){ .demo-marco{display:none} .demo-movil{display:block} }