/* Rokan · Imagina tu web */
.page-h{padding:clamp(24px,3.5vw,48px) 0 clamp(24px,3vw,40px)}
.page-h h1{font-size:clamp(26px,4.6vw,52px);letter-spacing:.05em;line-height:1.12;margin:0}
.page-h .sub{font-size:clamp(16px,1.4vw,18px);max-width:640px}
.privacy{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:13px;color:var(--gray)}
.privacy::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--lav) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 6V5a3 3 0 0 1 6 0v1M3.5 6h7v5h-7z' fill='none' stroke='%237B61FF' stroke-width='1.4'/%3E%3C/svg%3E") center/14px no-repeat}

/* ---------- controles ---------- */
.iv-app{display:grid;gap:20px;grid-template-columns:minmax(0,1fr);padding-bottom:clamp(56px,7vw,96px)}
@media (min-width:1040px){.iv-app{grid-template-columns:340px minmax(0,1fr);align-items:start;gap:28px}}
.iv-panel{padding:22px;min-width:0}
/* sin scroll propio: el panel solo se queda fijo si cabe completo en la pantalla */
@media (min-width:1040px) and (min-height:620px){.iv-panel{position:sticky;top:88px}}
.iv-g{padding:16px 0;border-top:1px solid var(--line)}
.iv-g:first-child{border-top:0;padding-top:0}
.iv-l{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px;font-size:13px;font-weight:600}
.iv-l small{font-weight:500;color:var(--gray);font-size:12px}
.iv-in{width:100%;height:46px;border-radius:10px;border:1.5px solid var(--line);background:#fff;padding:0 14px;font:500 15px Inter,sans-serif;color:var(--indigo)}
.iv-in:focus{border-color:var(--violet);outline:0;box-shadow:0 0 0 3px var(--lav)}
.iv-grid{display:grid;gap:6px;grid-template-columns:repeat(2,minmax(0,1fr))}
.iv-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:420px){.iv-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
.iv-opt{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font:500 13px/1.25 Inter,sans-serif;color:var(--indigo);text-align:center;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.iv-opt:hover{border-color:#cfcbef}
.iv-opt[aria-pressed=true]{background:var(--indigo);border-color:var(--indigo);color:#fff}
.iv-opt.big{flex-direction:column;min-height:74px;font-weight:600}
.iv-opt.big svg{width:22px;height:22px}
.iv-opt[aria-pressed=true] .pk{background:rgba(255,255,255,.15)}
.iv-opt .pk{width:34px;height:34px;border-radius:9px;background:var(--lav);display:grid;place-items:center}
.iv-opt .pk svg{width:17px;height:17px}
.iv-sw{display:flex;flex-wrap:wrap;gap:8px}
.iv-dot{width:32px;height:32px;border-radius:50%;border:0;background:var(--c);cursor:pointer;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line);transition:box-shadow .15s,transform .15s}
.iv-dot:hover{transform:scale(1.06)}
.iv-dot[aria-pressed=true]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--indigo)}
.iv-custom{position:relative;width:32px;height:32px;border-radius:50%;overflow:hidden;cursor:pointer;background:conic-gradient(#e5484d,#f5a524,#46a758,#3e63dd,#8e4ec6,#e5484d);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line)}
.iv-custom[aria-pressed=true]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--indigo)}
.iv-custom input{position:absolute;inset:-8px;width:48px;height:48px;opacity:0;cursor:pointer}
.iv-logo{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.iv-file{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:10px;border:1.5px dashed #cfcbef;background:#fbfaff;font:600 13px Inter,sans-serif;color:var(--violet);cursor:pointer}
.iv-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.iv-clear{background:none;border:0;font:500 13px Inter,sans-serif;color:var(--gray);cursor:pointer;padding:6px}
.iv-clear:hover{color:var(--indigo)}
.iv-note{font-size:12px;color:var(--gray);margin:8px 0 0}

/* ---------- escenario ---------- */
.iv-stage{min-width:0}
.iv-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.iv-dev{display:inline-flex;padding:3px;border-radius:10px;background:#fff;border:1px solid var(--line)}
.iv-dev button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:8px;background:transparent;font:600 13px Inter,sans-serif;color:var(--gray);cursor:pointer}
.iv-dev button[aria-pressed=true]{background:var(--indigo);color:#fff}
.iv-link{background:none;border:0;padding:6px 2px;font:600 13px Inter,sans-serif;color:var(--violet);cursor:pointer}
.iv-frame{max-width:100%;margin:0 auto;transition:max-width .35s var(--ease)}
.iv-frame.movil{max-width:390px}
.iv-browser{background:#fff;border-radius:14px;overflow:hidden;border:1px solid rgba(22,18,58,.08);box-shadow:var(--sh-l)}
.iv-top{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:#F3F2F7;border-bottom:1px solid var(--line)}
.iv-top i{width:10px;height:10px;border-radius:50%;background:#DCDAE6;flex:none}
.iv-top span{margin:0 auto;transform:translateX(-18px);font:500 12px/1 Inter,sans-serif;color:#7a7888;background:#fff;border-radius:6px;padding:6px 14px;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iv-frame.movil .iv-browser{border-radius:28px;border:8px solid var(--indigo)}
.iv-frame.movil .iv-top{background:var(--indigo);border-bottom:0;height:30px}
.iv-frame.movil .iv-top i{display:none}
.iv-frame.movil .iv-top span{transform:none;background:rgba(255,255,255,.12);color:#fff}
/* celular con proporción real: la web se desplaza dentro de la pantalla */
.iv-frame.movil{max-width:360px}
.iv-frame.movil .iv-browser{position:relative;border-width:10px 8px 22px}
.iv-frame.movil .iv-browser::after{content:"";position:absolute;left:50%;bottom:-14px;width:72px;height:4px;margin-left:-36px;border-radius:2px;background:rgba(255,255,255,.35)}
.iv-frame.movil .ws{height:560px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.iv-frame.movil .ws::-webkit-scrollbar{display:none}
.iv-frame.movil::after{content:"Desliza dentro del celular para ver toda la página";display:block;margin-top:12px;text-align:center;font-size:12px;color:var(--gray)}

/* ---------- cierre ---------- */
.iv-cta{display:grid;gap:22px;grid-template-columns:minmax(0,1fr);padding:clamp(22px,4vw,44px);margin-top:20px}
.iv-cta h2{margin-bottom:8px}
.iv-cta p{margin:0;color:var(--gray)}
.iv-sum{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.iv-sum span{height:28px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;background:var(--lav);font-size:12px;font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iv-cta .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ---------- pasos ---------- */
.iv-steps{display:flex;gap:6px;margin:0 0 18px;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.iv-steps::-webkit-scrollbar{display:none}
.iv-steps button{flex:none;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 6px;border-radius:999px;border:1px solid var(--line);background:#fff;font:600 13px Inter,sans-serif;color:var(--gray);cursor:pointer}
.iv-steps button i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--smoke);font:700 11px/1 Inter;font-style:normal}
.iv-steps button[aria-current=step]{border-color:var(--indigo);color:var(--indigo)}
.iv-steps button[aria-current=step] i{background:var(--indigo);color:#fff}
.iv-steps button.done i{background:var(--violet);color:#fff}
.iv-step h3{font-size:19px;margin:0 0 4px}
.iv-step>p{margin:0 0 18px;color:var(--gray);font-size:14px}
.iv-step .iv-g{border-top:0;padding:0 0 16px}
.iv-nav{display:flex;justify-content:space-between;gap:10px;padding-top:16px;margin-top:4px;border-top:1px solid var(--line)}
.iv-nav .btn{min-height:42px;padding:10px 18px;font-size:14px}
.iv-nav .iv-clear{padding:10px 0}

/* ---------- plantillas (web de ejemplo del visitante) ---------- */
.ws{--ac:#b5603a;--on:#fff;--hf:Georgia,serif;--hw:400;--rad:4px;
  --bg:color-mix(in srgb,var(--ac) 3%,#fff);--soft:color-mix(in srgb,var(--ac) 13%,#fff);--mid:color-mix(in srgb,var(--ac) 55%,#fff);--ink:color-mix(in srgb,var(--ac) 22%,#141414);--line:color-mix(in srgb,var(--ink) 12%,transparent);
  container-type:inline-size;background:var(--bg);color:var(--ink);font:400 13px/1.5 Inter,system-ui,sans-serif;transition:background .35s,color .35s}
.ws.dark{--bg:color-mix(in srgb,var(--ac) 12%,#111114);--soft:color-mix(in srgb,var(--ac) 22%,#1b1b20);--mid:color-mix(in srgb,var(--ac) 65%,#fff);--ink:#f2efea}
.ws *{transition:background-color .35s,color .35s,fill .35s,border-color .35s}
.ws .hf{font-family:var(--hf);font-weight:var(--hw)}
.ws .f-ac{fill:var(--ac)}.ws .f-soft{fill:var(--soft)}.ws .f-mid{fill:var(--mid)}.ws .f-ink{fill:var(--ink)}.ws .f-w{fill:var(--bg)}
.ws-ann{background:var(--ink);color:var(--bg);text-align:center;font-size:11px;padding:6px 12px}
.ws-h{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px}
.ws-h.centrado{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.ws-h.centrado .ws-links:last-child{justify-content:flex-end}
.ws-logo{display:flex;align-items:center;min-width:0;max-width:45%;font-size:20px;line-height:1.15}
.ws-h.centrado .ws-logo{max-width:46cqw;justify-content:center;font-size:21px}
.ws-logo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-logo img{max-height:34px;max-width:150px;object-fit:contain;display:block}
.ws-links{display:flex;gap:16px;font-size:12px;opacity:.75;white-space:nowrap}
.ws-btn{display:inline-block;background:var(--ac);color:var(--on);font-weight:600;font-size:12px;padding:10px 16px;border-radius:var(--rad);white-space:nowrap}
.ws-btn.sm{padding:8px 12px;font-size:11px}
.ws-hero{position:relative}
.ws-hero.dividido{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px;align-items:center;margin:0 24px;padding:28px;border-radius:calc(var(--rad) * 2 + 6px);background:var(--soft)}
.ws-hero.ancho{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:20px;align-items:center;padding:40px 28px;background:var(--ac);color:var(--on)}
.ws-hero.ancho .ws-btn{background:var(--on);color:var(--ac)}
.ws-hero.ancho .f-ac{fill:color-mix(in srgb,var(--on) 80%,var(--ac))}
.ws-hero.minimal{text-align:center;padding:52px 28px 40px;max-width:640px;margin:0 auto}
.ws-hero.minimal .ws-title{font-size:clamp(26px,5.2cqw,44px)}
.ws-kick{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-bottom:8px}
.ws-title{font-size:clamp(22px,4cqw,36px);line-height:1.1;margin:0 0 12px;overflow-wrap:anywhere}
.ws-sub{opacity:.78;margin:0 0 18px;font-size:13px}
.ws-img svg{width:100%;max-height:190px}
.ws-sec{padding:28px 24px 8px}
.ws-sec h3{font-size:20px;margin:0 0 14px}
.ws-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ws-more{font-size:12px;opacity:.7;text-decoration:underline}
.ws-prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ws-prod .ph{position:relative;aspect-ratio:1;border-radius:calc(var(--rad) + 4px);background:var(--soft);display:grid;place-items:center;color:var(--ink)}
.ws-prod .ph svg{width:58%}
.ws-prod em{position:absolute;top:8px;left:8px;background:var(--ac);color:var(--on);font:700 10px/1 Inter;font-style:normal;padding:4px 6px;border-radius:4px}
.ws-prod b{display:block;font-size:12px;margin-top:8px}
.ws-prod span{font-size:12px;opacity:.75}
.ws-prod s{opacity:.55;margin-right:4px}
.ws-two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start}
.ws-menu{display:flex;align-items:baseline;gap:8px;padding:8px 0;font-size:13px}
.ws-menu i{flex:1;border-bottom:1px dotted color-mix(in srgb,var(--ink) 35%,transparent)}
.ws-box{background:var(--soft);border-radius:calc(var(--rad) + 8px);padding:18px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.ws-box>span:not(.ws-btn){font-size:12px;opacity:.75}
.ws-box .ws-btn{margin-top:10px}
.ws-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ws-tile{background:var(--soft);border-radius:calc(var(--rad) + 8px);padding:16px;min-width:0;color:var(--ink)}
.ws-tile svg{width:22px;height:22px;margin-bottom:10px;color:var(--ac)}
.ws.dark .ws-tile svg{color:var(--mid)}
.ws-tile b{display:block;font-size:13px}
.ws-tile span{font-size:12px;opacity:.7}
.ws-svc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;padding:9px 0;border-bottom:1px solid var(--line)}
.ws-svc span{font-weight:600;font-size:13px}
.ws-svc small{grid-row:2;font-size:11px;opacity:.6}
.ws-svc b{grid-row:1/3;grid-column:2;align-self:center;font-size:13px}
.ws-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%;margin-top:8px}
.ws-slots i{font-style:normal;font-size:12px;text-align:center;padding:7px 0;border-radius:var(--rad);background:var(--bg)}
.ws-slots i.on{background:var(--ac);color:var(--on)}
.ws-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:24px;padding:22px 24px;border-radius:calc(var(--rad) * 2 + 6px);background:var(--soft)}
.ws-band b{font-size:17px;line-height:1.3}
.ws-f{display:flex;justify-content:space-between;gap:10px;padding:16px 24px;border-top:1px solid var(--line);font-size:12px}
.ws-f span{opacity:.6}
@container (max-width:560px){
  .ws-links{display:none}
  .ws-h.centrado{grid-template-columns:minmax(0,1fr)}
  .ws-h.centrado .ws-logo{max-width:100%}
  .ws-logo{max-width:60%}
  .ws-hero.dividido,.ws-hero.ancho{grid-template-columns:minmax(0,1fr);margin:0 16px;padding:22px}
  .ws-hero.ancho{margin:0}
  .ws-img svg{max-height:120px}
  .ws-h,.ws-sec,.ws-f{padding-left:16px;padding-right:16px}
  .ws-band{margin:20px 16px}
  .ws-prods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ws-two{grid-template-columns:minmax(0,1fr)}
  .ws-tiles{grid-template-columns:minmax(0,1fr)}
}
/* solo el paso actual muestra su nombre; los demás quedan como número */
.iv-steps{gap:4px}
.iv-steps button:not([aria-current=step]) span{display:none}
.iv-steps button:not([aria-current=step]){padding-right:5px;padding-left:5px}
@media (max-width:600px){.iv-dev{display:none}}