/* ============================================================================
   #1412 — Configurador wizard de dedicados (6 pasos). Clases namespaced .cw-*
   propias de la vista (NO pisan comunes de landing.css). Vars locales en .cw-wrap;
   cian mapeado al token real de marca (#10b8d6). Espaciados/radios/sombras
   verbatim del mockup .claude/mockups/configurador-dedicados-wizard.html.
   ============================================================================ */
.cw-wrap{
  --cw-card:#fff; --cw-ink:#0b1220; --cw-ink2:#4a5a72; --cw-ink3:#8092ab;
  --cw-line:#e5ebf3; --cw-line2:#d5dee9;
  --cw-cy:#10b8d6; --cw-cyd:#0a7d95; --cw-cys:#e8f9fc; --cw-cyl:#a6e6f1; --cw-cyb:#13ceed;
  --cw-ok:#12a150; --cw-oks:#e7f7ee;
  --cw-sh:0 1px 2px rgba(10,25,55,.04),0 10px 30px rgba(10,25,55,.07);
  --cw-shcy:0 8px 26px rgba(16,184,214,.28);
  color:var(--cw-ink);
}
.cw-wrap *{box-sizing:border-box}

.cw-prog{background:var(--cw-card);border:1px solid var(--cw-line);border-radius:16px;padding:16px 14px;box-shadow:var(--cw-sh);margin-bottom:22px}
.cw-track{display:flex;align-items:flex-start}
.cw-node{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;flex:0 0 auto;width:84px;background:none;border:none;font-family:inherit}
.cw-node .cw-dot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;border:2px solid var(--cw-line2);color:var(--cw-ink3);background:#fff;transition:.2s}
.cw-node .cw-nlab{font-size:12.5px;font-weight:650;color:var(--cw-ink3);transition:.2s;text-align:center}
.cw-node.done .cw-dot{background:var(--cw-oks);border-color:var(--cw-ok);color:var(--cw-ok)}
.cw-node.done .cw-nlab{color:var(--cw-ink2)}
.cw-node.active .cw-dot{background:var(--cw-cy);border-color:var(--cw-cy);color:#fff;box-shadow:var(--cw-shcy)}
.cw-node.active .cw-nlab{color:var(--cw-cyd);font-weight:750}
.cw-seg{flex:1;height:2px;background:var(--cw-line2);margin:17px -6px 0;border-radius:2px}
.cw-seg.fill{background:var(--cw-ok)}

.cw-grid{display:grid;grid-template-columns:1fr 348px;gap:22px;align-items:start}
.cw-panel{background:var(--cw-card);border:1px solid var(--cw-line);border-radius:18px;padding:28px 30px;box-shadow:var(--cw-sh);min-height:460px}
.cw-panel .cw-steplab{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--cw-cyd)}
.cw-panel h3{font-size:23px;font-weight:750;margin:5px 0 5px;letter-spacing:-.3px}
.cw-panel .cw-sub{font-size:14.5px;color:var(--cw-ink2);margin-bottom:22px;max-width:660px}
.cw-wstep{display:none;animation:cwfade .28s ease}
.cw-wstep.on{display:block}
@keyframes cwfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.cw-toggle{display:inline-flex;background:#eef3f9;border:1px solid var(--cw-line);border-radius:11px;padding:3px;margin-bottom:22px}
.cw-toggle span{font-size:13.5px;font-weight:650;color:var(--cw-ink2);padding:8px 18px;border-radius:8px;cursor:pointer}
.cw-toggle span.on{background:#fff;color:var(--cw-cyd);box-shadow:0 1px 3px rgba(10,25,55,.1)}

.cw-seclab{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:750;letter-spacing:.8px;text-transform:uppercase;color:var(--cw-ink3);margin:26px 0 13px}
.cw-seclab i{font-size:16px;color:var(--cw-cyd);width:16px;text-align:center}
.cw-seclab .hint{margin-left:auto;font-size:12px;font-weight:600;color:var(--cw-ink2);background:#eef3f9;border-radius:999px;padding:2px 11px;text-transform:none;letter-spacing:0}
.cw-seclab:first-child{margin-top:2px}

.cw-opts{display:grid;gap:12px}
.cw-c3{grid-template-columns:repeat(3,1fr)} .cw-c2{grid-template-columns:repeat(2,1fr)} .cw-c1{grid-template-columns:1fr}
.cw-opt{border:1.5px solid var(--cw-line);border-radius:14px;padding:15px 16px;cursor:pointer;background:#fff;position:relative;transition:border-color .15s,background .15s,box-shadow .15s}
.cw-opt:hover{border-color:var(--cw-line2)}
.cw-opt.sel{border-color:var(--cw-cy);background:var(--cw-cys);box-shadow:0 0 0 3px rgba(16,184,214,.12)}
.cw-opt.dis{opacity:.55;cursor:not-allowed;background:#f7f9fc}
.cw-opt .t{font-size:15px;font-weight:650}
.cw-opt .d{font-size:13px;color:var(--cw-ink2);margin-top:2px}
.cw-opt .foot{display:flex;align-items:center;justify-content:flex-end;margin-top:11px;min-height:22px}
.cw-opt .badge{font-size:11.5px;font-weight:700;color:var(--cw-ok);background:var(--cw-oks);border-radius:6px;padding:3px 9px;margin-right:auto}
.cw-opt .plus{font-size:14px;font-weight:750;color:var(--cw-cyd)}
.cw-opt .no{font-size:11.5px;font-weight:700;color:#b4432e;background:#fbeae6;border-radius:6px;padding:3px 9px;margin-right:auto}
/* #1412 R2 — badge VISIBLE de "no disponible" en tarjetas (RAM…), estilo OVH. Solo visible en .dis */
.cw-opt-nostock{position:absolute;top:11px;right:12px;z-index:2;font-size:10px;font-weight:750;line-height:1.25;color:#b4432e;background:#fbeae6;border:1px solid #f3cfc6;border-radius:6px;padding:2px 7px;max-width:72%;text-align:right}
.cw-opt:not(.dis) .cw-opt-nostock{display:none}
.cw-opt .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.cw-opt .tags b{font-size:11px;font-weight:600;color:var(--cw-ink2);background:#eef3f9;border-radius:6px;padding:2px 8px}
.cw-opt .chk{position:absolute;top:13px;right:13px;width:21px;height:21px;border-radius:50%;background:var(--cw-cy);color:#fff;display:none;align-items:center;justify-content:center;font-size:11px}
.cw-opt.sel .chk{display:flex}

.cw-feat{border:2px solid var(--cw-line);border-radius:16px;padding:20px 22px;background:#fff;display:flex;gap:18px;align-items:center;position:relative;margin-bottom:14px;cursor:pointer;transition:.15s}
.cw-feat:hover{border-color:var(--cw-line2)}
.cw-feat.act{border-color:var(--cw-cy);background:var(--cw-cys)}
.cw-feat.dis{opacity:.55;cursor:not-allowed;background:#f7f9fc}
.cw-feat .reco{position:absolute;top:-11px;left:18px;font-size:11px;font-weight:750;color:#fff;background:var(--cw-cy);border-radius:7px;padding:3px 11px}
.cw-feat .reco.g{background:var(--cw-ok)}
.cw-feat .ico{width:52px;height:52px;border-radius:13px;background:#eef3f9;color:var(--cw-ink2);display:flex;align-items:center;justify-content:center;font-size:24px;flex:0 0 auto;transition:.15s}
.cw-feat.act .ico{background:#fff;color:var(--cw-cyd)}
.cw-feat .ico img,.cw-feat .ico svg{width:28px;height:28px;max-width:28px;max-height:28px;object-fit:contain;display:block}
.cw-feat .fb{flex:1}
.cw-feat .fb .t{font-size:17px;font-weight:750}
.cw-feat .fb .d{font-size:13.5px;color:var(--cw-ink2);margin-top:2px}
.cw-feat .fb .tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.cw-feat .fb .tags b{font-size:11px;font-weight:600;color:var(--cw-cyd);background:#eef3f9;border-radius:6px;padding:2px 9px}
.cw-feat.act .fb .tags b{background:#fff}
.cw-feat .pr{text-align:right;flex:0 0 auto}
.cw-feat .pr .amt{font-size:15px;font-weight:750;color:var(--cw-cyd)}
.cw-feat .pr .inc{font-size:11.5px;font-weight:700;color:var(--cw-ok);background:var(--cw-oks);border-radius:6px;padding:3px 9px}
.cw-feat .chk2{width:24px;height:24px;border-radius:50%;background:var(--cw-cy);color:#fff;display:none;align-items:center;justify-content:center;flex:0 0 auto;font-size:12px}
.cw-feat.act .chk2{display:flex}

.cw-input{font-family:inherit;font-size:14px;color:var(--cw-ink);border:1.5px solid var(--cw-line2);border-radius:10px;padding:10px 12px;background:#fff;width:100%;max-width:100%}
.cw-input:focus{outline:none;border-color:var(--cw-cy);box-shadow:0 0 0 3px rgba(16,184,214,.12)}
.cw-opt.dis{opacity:.5;cursor:not-allowed;background:#f7f9fc}
.cw-config-option{margin-bottom:6px}

/* Logos oficiales de marca en tarjetas de SO / recetas (#1412) — icono pequeño
   dentro de caja fija a la IZQUIERDA del nombre, MISMO tamaño/estilo que .cw-feat .ico.
   El logo NUNCA llena la tarjeta ni se pone de fondo: caja 40×40 flex-centrada +
   img/svg limitados a 24×24 con object-fit:contain. Visible en .sel y no .sel. */
.cw-os-row{display:flex;align-items:center;gap:12px}
.cw-os-txt{display:flex;flex-direction:column;min-width:0}
.cw-os-txt .t{font-size:15px;font-weight:650}
.cw-os-txt .d{font-size:13px;color:var(--cw-ink2);margin-top:2px}

/* Caja de icono fija (recetas y SO comparten TAMAÑO/forma; el fondo difiere).
   - Recetas: logo A COLOR sobre caja neutra #eef3f9.
   - SO: logo BLANCO monocromo (Simple Icons) sobre badge del color de marca del SO
     → el fondo lo pone el style inline (style="background:{color}") desde Blade;
     por eso .cw-os-logo NO fija fondo aquí. */
.cw-os-logo,.cw-recipe-logo{
  width:40px;height:40px;flex:0 0 auto;border-radius:11px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:20px;line-height:1;
}
.cw-recipe-logo{background:#eef3f9}
/* Cualquier logo (img o svg inline) dentro de la caja → 24×24 fijo, jamás 100% ni fondo */
.cw-os-logo img,.cw-os-logo svg,
.cw-recipe-logo img,.cw-recipe-logo svg{
  width:24px !important;height:24px !important;max-width:24px;max-height:24px;
  object-fit:contain;display:block;flex:0 0 auto;background:none;position:static;
}
/* Al seleccionar, la caja neutra de RECETA pasa a blanca. Los badges de OS
   NUNCA se blanquean (blanco sobre blanco = logo invisible): conservan su color. */
.cw-opt.sel .cw-recipe-logo,.cw-feat.act .cw-recipe-logo{background:#fff}

/* Chip «SO compatible» del slot de licencia: badge de color pequeño a la izquierda
   del texto (mismo criterio que .cw-os-logo — SVG blanco sobre color de marca). */
.cw-os-chip-logo{
  width:18px;height:18px;flex:0 0 auto;border-radius:4px;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;margin-right:6px;vertical-align:middle;
}
.cw-os-chip-logo img,.cw-os-chip-logo svg{
  width:13px !important;height:13px !important;max-width:13px;max-height:13px;
  object-fit:contain;display:block;background:none;position:static;
}

.cw-filt{display:flex;gap:8px;margin-bottom:13px;flex-wrap:wrap}
.cw-filt span{font-size:13px;font-weight:650;color:var(--cw-ink2);border:1.5px solid var(--cw-line);border-radius:999px;padding:6px 14px;cursor:pointer;background:#fff}
.cw-filt span.on{border-color:var(--cw-cy);color:var(--cw-cyd);background:var(--cw-cys)}

.cw-drow{display:flex;align-items:center;gap:14px}
.cw-drow .ic{width:40px;height:40px;border-radius:11px;background:#eef3f9;color:var(--cw-ink2);display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.cw-opt.sel .cw-drow .ic{background:#fff;color:var(--cw-cyd)}
.cw-drow .body{flex:1;min-width:0}
.cw-drow .right{text-align:right;flex:0 0 auto;padding-right:28px}

.cw-geonote{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--cw-ink2);background:#f4f8fc;border:1px solid var(--cw-line);border-radius:13px;padding:14px 16px;margin-bottom:18px}
.cw-geonote i{color:var(--cw-cyd);font-size:18px;margin-top:2px}
.cw-flags{display:flex;flex-wrap:wrap;gap:10px}
.cw-flag{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;border:1.5px solid var(--cw-line);border-radius:11px;padding:9px 15px;cursor:pointer;background:#fff}
.cw-flag img{width:20px;height:14px;border-radius:2px;object-fit:cover;flex:0 0 auto}
.cw-flag.sel{border-color:var(--cw-cy);background:var(--cw-cys);color:var(--cw-cyd)}
.cw-flag.dis{opacity:.5;cursor:not-allowed;background:#f7f9fc}

.cw-incl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 8px}
.cw-incl .box{background:#f4f8fc;border:1px solid var(--cw-line);border-radius:13px;padding:14px 16px}
.cw-incl .box .k{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--cw-ok);display:flex;align-items:center;gap:6px}
.cw-incl .box .v{font-size:14px;font-weight:600;margin-top:4px}

.cw-navb{display:flex;justify-content:space-between;align-items:center;margin-top:30px;padding-top:22px;border-top:1px solid var(--cw-line)}
.cw-btn{font-size:15px;font-weight:700;border-radius:12px;padding:13px 24px;cursor:pointer;border:1.5px solid var(--cw-line2);background:#fff;color:var(--cw-ink);display:inline-flex;align-items:center;gap:9px;font-family:inherit}
.cw-btn.ghost{color:var(--cw-ink2);border-color:transparent}
.cw-btn.primary{background:var(--cw-cy);border-color:var(--cw-cy);color:#fff;box-shadow:var(--cw-shcy)}
.cw-btn.more{border:1.5px dashed var(--cw-cyl);color:var(--cw-cyd);width:100%;justify-content:center}

.cw-side{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px}
.cw-summary{background:var(--cw-card);border:1px solid var(--cw-line);border-radius:18px;padding:22px;box-shadow:var(--cw-sh)}
.cw-summary h4{font-size:16px;font-weight:750;margin-bottom:15px;display:flex;align-items:center;gap:9px}
.cw-summary h4 i{color:var(--cw-cyd);font-size:16px}
.cw-cyc{display:flex;background:#eef3f9;border:1px solid var(--cw-line);border-radius:11px;padding:3px;margin-bottom:12px}
.cw-cyc span{flex:1;text-align:center;font-size:12.5px;font-weight:650;color:var(--cw-ink2);padding:8px 0;border-radius:8px;cursor:pointer}
.cw-cyc span.on{background:#fff;color:var(--cw-cyd);box-shadow:0 1px 3px rgba(10,25,55,.1)}
.cw-sline{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:7px 0;border-bottom:1px solid var(--cw-line)}
.cw-sline .k{color:var(--cw-ink2);flex:0 0 auto}
.cw-sline .v{text-align:right;font-weight:600}
.cw-sline .v.inc{color:var(--cw-ok);font-weight:700}
.cw-sline .v.up{color:var(--cw-cyd);font-weight:700}
.cw-stotal{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px}
.cw-stotal .k{font-size:15px;font-weight:700}
.cw-stotal .v{font-size:28px;font-weight:800;color:var(--cw-cyd);letter-spacing:-.5px}
.cw-stotal .v small{font-size:14px;color:var(--cw-ink2);font-weight:600}
/* #1412 — 2º total ("meses siguientes"): menor y atenuado, bajo el "Total primer mes" */
.cw-stotal.cw-stotal-next{margin-top:3px}
.cw-stotal.cw-stotal-next .k{font-size:13px;font-weight:600;color:var(--cw-ink2)}
.cw-stotal.cw-stotal-next .v{font-size:16px;font-weight:700;color:var(--cw-ink2)}
.cw-stotal.cw-stotal-next .v small{font-size:12px}
/* #1412 — mensaje del alta por ciclo: gancho a anual (m/q/s) y nota "sin alta" (anual) */
.cw-alta-hook{font-size:12px;color:var(--cw-cyd);margin-top:9px;display:flex;align-items:center;gap:6px;line-height:1.35}
.cw-alta-hook i{font-size:14px;flex:0 0 auto}
.cw-alta-free{font-size:12.5px;font-weight:650;color:var(--cw-ok);background:var(--cw-oks);border-radius:9px;padding:8px 11px;margin-top:9px;display:flex;align-items:center;gap:7px}
.cw-alta-free i{font-size:15px;flex:0 0 auto}
/* #1413 Fase C — oferta free-setup: alta normal tachada + GRATIS, gancho con fecha y nota junto al total */
.cw-sline .v.cw-alta-off{display:inline-flex;align-items:center;gap:9px;justify-content:flex-end}
.cw-alta-ref{color:var(--cw-ink2);font-weight:600;opacity:.6;text-decoration:line-through}
.cw-alta-gratis{color:#fff;background:var(--cw-ok);font-weight:800;font-size:11px;letter-spacing:.4px;padding:2px 9px;border-radius:6px;text-transform:uppercase}
.cw-alta-promo{font-size:12.5px;font-weight:700;color:var(--cw-ok);background:var(--cw-oks);border-radius:9px;padding:9px 11px;margin:9px 0 2px;display:flex;align-items:center;gap:6px;line-height:1.35}
.cw-alta-note{font-size:12.5px;font-weight:650;color:var(--cw-ok);margin-top:9px;display:flex;align-items:center;gap:6px}
.cw-alta-note i{font-size:15px;flex:0 0 auto}
.cw-billed{font-size:12px;color:var(--cw-ink3);text-align:right;margin-top:2px;min-height:15px}
.cw-cta{width:100%;margin-top:15px;background:var(--cw-cy);border:none;color:#fff;font-size:16px;font-weight:750;border-radius:12px;padding:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:var(--cw-shcy);font-family:inherit}
.cw-safe{text-align:center;font-size:12px;color:var(--cw-ink3);margin-top:11px;display:flex;align-items:center;justify-content:center;gap:7px}
.cw-note{font-size:12.5px;color:var(--cw-ink2);line-height:1.55;background:#f4f8fc;border:1px solid var(--cw-line);border-radius:14px;padding:14px 16px;display:flex;gap:11px}
.cw-note i{color:var(--cw-ok);font-size:18px;flex:0 0 auto;margin-top:2px}
.cw-note b{color:var(--cw-ink)}

@media(max-width:900px){
  .cw-grid{grid-template-columns:1fr}
  .cw-side{position:static}
  .cw-c3,.cw-c2{grid-template-columns:1fr}
  .cw-incl{grid-template-columns:1fr}
  .cw-track{overflow-x:auto;padding-bottom:4px}
  .cw-node{width:74px}
  .cw-node .cw-nlab{font-size:11px}
  .cw-seg{min-width:16px}
}