@charset "UTF-8";
html,body{height:100%}
html {box-sizing: border-box;} 
body{font-size: 1rem;line-height: 1.5;background:#ffffff; font-smoothing:antialiased;}
  :root{
    --bg:#fafafa;
    --ink:#09090b;
    --ink-soft:#5D5D5E;     
    --line:#e4e4e7; --line-soft:#f4f4f5; /*bordes linea*/
    --ink-faint:#a1a1aa;
    --brand:#bc002d; --brand-press:#82001f;
    --brand-soft:#fdeaed; --brand-line:#f3c3cd;
    --ok:oklch(0.62 0.13 165); --ok-soft:oklch(0.96 0.04 165); --ok-line:oklch(0.85 0.08 165);
    --warn:oklch(0.62 0.12 70); --warn-soft:oklch(0.96 0.04 75);
    --danger:oklch(0.55 0.17 25);
     --rail-2:#8a0021; --rail-line:#d94e6b;
     --ease:cubic-bezier(.22,.61,.24,1);
     --rail:#bc002d; --rail-soft:#ffd2dc;
  }
*{box-sizing:border-box;margin:0;padding:0}
.title.is-1, .is-size-1 {font-size: 4.5rem; line-height: 1.25;}.title.is-2, .is-size-2 {font-size: 3.5rem;line-height: 1.225;}
.title.is-3, .is-size-3 {font-size: 3rem;line-height:1.26; }.title.is-4, .is-size-4 {font-size: 2.25rem; line-height: 1.25;} .title.is-5, .is-size-5 {font-size: 1.875rem;line-height: 1.25;}/*32px*/.title.is-6, .is-size-6 {font-size: 1.5rem;line-height: 1.4;} /*24px*/.title.is-7, .is-size-7 {font-size: 1.25rem;line-height: 1.5;}/*20px*/.title.is-8, .is-size-8 {font-size: 1.125rem;line-height: 1.5;} .title.is-9, .is-size-9 {font-size: 1rem;line-height: 1.5;}.title.is-10, .is-size-10 {font-size: 0.875rem; line-height: 1.5;}/*14px*/
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { word-break: break-word;}
p {padding:0;width: 100%; margin: 0;/* float: left;*/}
.text-center {text-align: center!important;}.center {text-align:center;padding:40px 0}
b, strong { font-weight: 600 !important;}
.section {padding-top: 3.5rem; padding-bottom: 3.5rem; }
.margen-top {margin-top:1.2rem; }
.margen-top-boton{margin-top:1.5rem; }
.tit-submin {margin-bottom: 0.25rem !important;}
.tit-sub {margin-bottom: 1rem !important;}
/*bordes y colores*/
.border_top {border-top: 1px solid #e2e8f0 !important;}
.border_bottom {border-bottom: 1px solid #e2e8f0 !important;}
.primary {color: #bc002d;}
.gray-dark {color: #09090b;} .bg-gray-dark {background-color: #09090b !important; }
.gray {color: #5D5D5E;}
.main, .top, .footer, .opt, .pay {background:#ffffff;}
/*header y footer*/
.help{text-decoration:none}.help:hover, .btn.ghost:hover{color:var(--brand)}
.footer{display:flex;align-items:center; text-align: center;}
.brand {letter-spacing:-.01em}.brand span{color:var(--brand)}
/*general formulario*/
button, submit, label, textarea {font-family: "Outfit", ui-sans-serif, system-ui, sans-serif; height:auto; text-align:left;}
input,select {background: transparent;border: 1px solid #ffffff;transition: all 0.4s ease-out 0s; width: 100%;}
input:focus, input:active,button:focus,button:active {outline: none; border-color: #102a97;}
label, .flow.detail .f, .fld label, .chkrow, .stitle, .btn {font-weight:600; font-size:1rem; line-height: 1.5;}
label.f, .fld label {display:block; margin-bottom:8px}
.chkrow {display:flex;gap:9px;align-items:center;margin:16px 0 4px;cursor:pointer}
.chkrow input {accent-color:var(--brand)}
.chkrow input, .tos input {width:17px;height:17px;}
.tos input {width:19px;height:19px; margin-top:1px; flex:none;cursor:pointer}
/**/
.hide {display:none}
.top {align-items:center;padding:20px 40px;border-bottom:1px solid var(--line);}
.app {display:grid;grid-template-columns:1fr;max-width:1120px /*1180px*/;margin:0 auto;min-height:calc(100vh - 65px)}
/* ---- panel formulario ---- */
.steps{display:flex;gap:10px;margin-bottom:34px}
.dot{height:5px;max-width:64px;background:var(--line);transition:.5s var(--ease)}
.dot.done{background:var(--brand-line)} .dot.now{background:var(--brand)}
.screen{display:none;animation:enter .5s var(--ease) both}.screen.on{display:block}
@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.screen,.avail,.sg,.codebox,.reunion {animation:none!important}}
.eyebrow{letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:9px} .eyebrow::before{content:"";width:22px;height:1.5px;background:var(--brand)}
.sub{margin-bottom:30px;max-width:98%;}
.opts{display:flex;flex-direction:column;gap:12px}
.opt:hover{border-color:var(--brand-line);transform:translateY(-2px)}
.opt:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px}
/*general*/
p,h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6, .eyebrow, .opt, .sgc, .sgask, .btn, input, .cyc .save, .incl li, .flow.detail, .trust, .srow, .help, .err , .nrow .nn, .stitle, .badge, .inp, .svc .n {font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;}
h1{letter-spacing:-.02em;}
.codes input, .reunion, .pay, .cyc, .sgask, .avail, .opt .ic, .opt,.flow.detail, .inp, .btn, .card, .seg .opt, .card, .sgc {border-radius:14px}
.dot, .fmark {border-radius:99px;}
.plan .pn, .tot .big, .eyebrow, h1, .cyc .save, .codes input, .svc .n {font-weight:700;}
.fw-regular {font-weight: 400 !important;}
.fw-medium {font-weight: 500 !important;}
.fw-semibold { font-weight: 600 !important;}
.help, .sgc, .sgask, .coderow , .incl li, .srow, .tot .l, .nrow, err {font-size:0.9rem;font-weight:400;line-height:1.5}
.badge {font-size: 0.875rem; line-height: 1.5;}
.inp, .flow.detail .inp, .cyc .p, .svc .n, .seg .opt, .avail {font-size:1rem;}
/*iconos*/
.opt .ic {width:44px;height:44px;color:var(--brand);display:grid;place-items:center;flex:none;transition:.18s} 
.opt.sel .ic{background:var(--brand);color:#fff}
.opt b {display:block;margin-bottom:2px}
.help, .opt .d, .hint, .coderow, .reunion p, .pay .d, .cyc .d, .trust,  .tos, .btn.ghost {color:var(--ink-soft)}
.srow.muted .v, .tot .l, .promise, .incl .t , .as-h {color: rgba(255,255,255,.8);}
.inp, .sgc,.flow.detail .inp, .cyc {background: rgba(255,255,255,.5);}
.white, .srow, .aside, .srow .v, .incl li, .nrow, .incl svg {color:#ffffff}
.avail.wait, .reunion, .fmark, .opt .ic {background:var(--brand-soft);}
/*-----*/
.flow{display:none;margin-top:22px;padding-top:22px;border-top:1px solid var(--line-soft)}.flow.on{display:block;animation:enter .35s var(--ease) both}
.opt, .flow.detail, .inp, .cyc, .codes input, .pay, .btn.g, .seg .opt {border:1.5px solid var(--line);}
.opt, .flow.detail, .cyc {padding:20px;} 
.inp, .flow.detail .inp {padding:1rem;}
.inp, .opt {width:100%; transition:.16s}
.inp, .sgc {color: var(--ink);}
.opt {display:flex;align-items:center;gap:16px;text-align:left;cursor:pointer;}
.flow.detail{position:relative;margin-top:2px;border-top:none;}/*aca*/
.opt.sel, .flow.detail, .cyc.sel, .pay.sel, .flow.detail::before { background:#f4f9ff !important} /*cambo que despliega*/
.cyc.sel, .opt.sel, .pay.sel, .inp:focus, .sgc:hover, .codes input:focus {border-color:var(--brand);} /*campo que despliega*/
.flow.detail::before{content:"";position:absolute;top:-8px;left:34px;width:14px;height:14px;border-left:1.5px solid var(--brand-line);border-top:1.5px solid var(--brand-line);transform:rotate(45deg)}/*punta*/
.flow.detail .f {color:var(--brand);display:flex;align-items:center;gap:8px}
.flow.detail .f svg, .sgask svg, .incl svg {flex:none}
.inp:focus {outline:none;box-shadow:0 0 0 4px var(--brand-soft)}
.inp::placeholder{color:var(--ink-faint)}
.hint{margin-top:10px;} .hint a{color:var(--brand);cursor:pointer}
/*mensajes*/
.avail {display:none;margin-top:14px;padding:14px;font-weight:500}
.avail.show{display:block;animation:enter .3s var(--ease) both}
.avail.ok{background:var(--ok-soft);border:1px solid var(--ok-line);color:oklch(0.45 0.11 165)}
.avail.no{background:var(--warn-soft);border:1px solid oklch(0.86 0.07 75);color:oklch(0.48 0.1 70)}
.avail.wait{border:1px solid var(--brand-line);color:var(--brand)}
/*mensajes*/
.sg{display:none;flex-wrap:wrap;gap:9px;margin-top:14px}.sg.show{display:flex;animation:enter .35s var(--ease) both}
.sgc {display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--brand-line);padding:10px 14px;cursor:pointer;transition:.15s}
.sgc:hover{background:var(--brand-soft);transform:translateY(-1px)}.sgc .pr{color:var(--ink-faint);font-size:0.875rem}
.cycles {display:flex;flex-direction:column;gap:11px}
.cyc {display:flex;align-items:center;gap:15px;cursor:pointer;transition:.16s;position:relative}
.cyc:hover, .pay:hover{border-color:var(--brand-line)}.cyc:focus-within, .pay:focus-within{outline:2.5px solid var(--brand);outline-offset:2px}
.cyc input {position:absolute;opacity:0}
.cyc .radio, .pay .radio{width:20px;height:20px;border-radius:99px; border:2px solid var(--line);flex:none;display:grid;place-items:center;}
.cyc.sel .radio, .pay.sel .radio {border-color:var(--brand)}.cyc.sel .radio::after, .pay.sel .radio::after {content:"";width:10px;height:10px;border-radius:99px;background:var(--brand)}
.cyc .n, .cyc .d {display:block;} .cyc .d{margin-top:4px;}
.cyc .p {margin-left:auto;text-align:right;white-space:nowrap;color:var(--brand); font-weight: 600;}
.cyc .p .iva {font-weight:500;font-size:0.875rem;color:var(--ink-faint);margin-left:2px}
.cyc .save {position:absolute;top:-9px;right:16px;background:var(--ok); color:#fff;font-size:10.5px;padding:3px 10px;border-radius:99px}
.codes{display:flex;gap:10px;margin:14px 0}
.codes input {width:52px;height:60px;text-align:center;font-size:24px;color:var(--brand);}
.codes input:focus {outline:none;box-shadow:0 0 0 4px var(--brand-soft)}
.codebox{display:none;margin-top:8px}.codebox.show{display:block;animation:enter .35s var(--ease) both}
.reunion{display:none;margin-top:16px;padding:1rem 1.2rem;border:1px solid var(--brand-line)}
.reunion.show{display:block;animation:enter .4s var(--ease) both}
.reunion b {color:var(--brand)}
.reunion p {line-height:1.5;margin-top:4px}
.pay {display:flex;align-items:center;gap:15px;padding:16px;cursor:pointer;transition:.16s}
.pay input{position:absolute;opacity:0}
.pay b {font-size:1rem;}
.tos {display:flex;gap:11px;align-items:flex-start;line-height:1.5;margin:22px 0 4px}
.err {color:var(--danger);font-size:14px;margin-top:9px;display:none}.err.show{display:block}
.nav {display:flex;align-items:center;gap:14px;}
/*boton*/
.btn, .sgask {border:none;padding:16px 24px;cursor:pointer;text-decoration: none; }
.btn {transition:.18s var(--ease);display:inline-flex;align-items:center;gap:9px;}
.btn.p {background:var(--brand);color:#fff;margin-top: 1.5rem;}
.btn.p:hover {background:var(--brand);transform:translateY(-2px)}.btn.p:active{background:var(--brand-press)}
.btn.p:disabled {background:#e2c6cc;box-shadow:none;cursor:not-allowed;transform:none}
.btn.g {background:#ffffff;color:var(--ink-soft);}.btn.g:hover{border-color:var(--brand-line);color:var(--brand)}
.btn.ghost {background:none;padding:1rem 6px} /*boton atras*/
.btn:focus-visible {outline:2.5px solid var(--brand);outline-offset:3px}
.sgask{display:inline-flex;align-items:center;gap:9px;background:var(--brand);color:#fff;transition:.15s var(--ease);margin-top: 1.5rem;}
.sgask:hover{transform:translateY(-1px);}
/**/
.grow, .dot{flex:1}
.f4{text-align:center;padding:48px 0}
.fmark{width:76px;height:76px;display:grid;place-items:center;margin:0 auto 22px}
/* estados simples: centrados */
.center{max-width:520px;margin:0 auto;padding:42px 12px;text-align:center}
/* ---- entrar---- */
.wrap{flex:1;align-items:center;justify-content:center;padding:32px}
.card {width:100%;max-width:420px;border:2px solid var(--brand);padding:24px;}
/* ---- listo ---- */
.g2 {display:grid;grid-template-columns:1fr 1fr;gap:11px}
.svc {align-items:center;gap:13px;padding-bottom:20px;border-bottom:1px solid var(--rail-line)}
.svc .pi {width:44px;height:44px;border-radius:12px; background:rgba(255,255,255,.14);display:grid;place-items:center;flex:none}
.svc .s{font-size:12.5px;color:var(--rail-soft)}
.seg { gap:8px}
.seg .opt {flex:1;padding:12px;text-align:center;font-weight: 600; cursor:pointer}
.seg .opt:has(input:checked){border-color:var(--brand);background:var(--brand-soft);color:var(--brand-deep);font-weight:600}
.seg .opt input{display:none}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--ok-soft);color:oklch(0.42 0.11 165);padding:6px 12px;border-radius:99px;font-weight:600;}
.stitle{ line-height: 1.5; margin: 4px 0 14px}
.mark {width:56px;height:56px;border-radius:99px;display:grid;place-items:center;margin:0 auto 22px}
.mark.ok {background:var(--ok-soft)}.mark.wait{background:var(--brand-soft)}
.nrow {gap:12px;align-items:flex-start;padding:9px 0;}
.nrow .nn{width:24px;height:24px;border-radius:99px;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;font-size:0.875rem;font-weight:600;flex:none}
.fld{margin-bottom:12px}
/* ---- form y riel de resumen ---- */
.main {padding:40px clamp(20px,4vw,48px)}
.aside {background:linear-gradient(160deg,var(--brand),var(--rail-2));padding:40px clamp(24px,3vw,40px)}
.plan {align-items:center;gap:13px;padding-bottom:20px;border-bottom:1px solid var(--rail-line)}
.plan .pi{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:none}
.sum, .incl, .trust {padding:18px 0; /*border-bottom:1px solid var(--rail-line)*/}
.srow, .top, .tot {justify-content:space-between;}
.srow, .top, .tot, .nrow,.plan, .seg, .svc, .wrap, .promise, .trust, .tb {display:flex;}
.srow {gap:14px;margin-bottom:12px;}
.srow:last-child {margin-bottom:0}
.srow .v {font-weight:500;white-space:nowrap}
.tot {align-items:baseline;padding:18px 0 4px} /*total*/
.tot .big {font-size:1.2rem;letter-spacing:-.02em}
.promise {align-items:center;gap:9px;margin-top:14px;line-height:1.4}
.incl {margin-top:26px; border-top:1px solid var(--rail-line);}
.incl li {display:flex;gap:10px;align-items:center;padding:6px 0;list-style:none;}
.trust{gap:8px;flex-wrap:wrap;margin-top:26px;border-top:1px solid var(--rail-line)}
.tb {align-items:center;gap:4px;}
.spin {display:inline-block;width:15px;height:15px;border:2px solid var(--brand); border-top-color:transparent;border-radius:50%;animation:sp .8s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
@media(min-width:920px){ .app{grid-template-columns:minmax(0,1.12fr) minmax(340px,0.82fr) /*(360px,0.88fr)*/}, .aside{position:sticky;top:0;align-self:start;min-height:calc(100vh - 65px)}}
@media(max-width:919px){ .aside{order:2} .main{order:1} }