/* Propuesta 5 · PRODUCTO INTERACTIVO — la página se comporta como la app: sub-nav lateral,
   demo clicable, configurador y buscador de preguntas */
.p5-app{display:grid;grid-template-columns:212px 1fr;gap:44px;align-items:start;margin-top:72px;transition:grid-template-columns .85s cubic-bezier(.16,.84,.24,1),gap .85s cubic-bezier(.16,.84,.24,1)}
@media (min-width:1081px){
.p5-app.wide{grid-template-columns:0px 1fr;gap:0}
.p5-app.wide .p5-nav{opacity:0;transform:translateX(-26px) scale(.92);pointer-events:none;filter:blur(6px)}
}
.p5-nav{transition:opacity .5s cubic-bezier(.16,.84,.24,1),transform .7s cubic-bezier(.16,.84,.24,1),filter .5s}

/* sub-header sticky: el rail se convierte en barra horizontal */
.p5-subnav{position:fixed;left:0;right:0;top:var(--subtop,74px);z-index:55;pointer-events:none;transform:translateY(-118%);opacity:0;transition:transform .78s cubic-bezier(.2,.9,.24,1.02),opacity .5s}
.p5-subnav.on{transform:none;opacity:1;pointer-events:auto}
.p5-subnav .in{max-width:1200px;margin:0 auto;padding:0 32px;display:flex;align-items:center;gap:18px}
.p5-subnav .lead{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);flex:none}
.p5-subnav .ls{position:relative;flex:1;display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.82);backdrop-filter:blur(20px) saturate(1.4);border:1px solid rgba(255,255,255,.85);box-shadow:0 14px 40px rgba(20,22,50,.13);border-radius:18px;padding:7px 9px;overflow:hidden}
.p5-subnav a{position:relative;z-index:2;display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:12px;font-size:13px;font-weight:700;color:var(--ink2);text-decoration:none;white-space:nowrap;opacity:0;transform:translateY(10px);transition:color .3s,opacity .5s cubic-bezier(.16,.84,.24,1),transform .55s cubic-bezier(.16,.84,.24,1)}
.p5-subnav.on a{opacity:1;transform:none;transition-delay:calc(var(--i) * 52ms + 180ms)}
.p5-subnav a span{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--faint);transition:color .3s}
.p5-subnav a:hover{color:var(--ink)}
.p5-subnav a.on{color:#fff}
.p5-subnav a.on span{color:rgba(255,255,255,.72)}
.p5-subnav .ind{position:absolute;z-index:1;top:7px;height:calc(100% - 14px);border-radius:12px;background:var(--navy);box-shadow:0 8px 20px rgba(20,22,50,.28);opacity:0;transition:transform .62s cubic-bezier(.2,.9,.24,1.02),width .62s cubic-bezier(.2,.9,.24,1.02),opacity .4s;left:0;width:0}
.p5-subnav.on .ind{opacity:1;transition-delay:.22s}
@media (max-width:1080px){.p5-subnav{display:none}}

/* iconos de las capacidades del copiloto */
.caps.ico .cap{display:flex;gap:13px;align-items:flex-start;padding:16px 17px;transition:transform .45s cubic-bezier(.2,.9,.3,1.2),border-color .35s,background .35s}
.caps.ico .cap:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.16)}
.caps.ico .cap .tile{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;position:relative;overflow:hidden}
.caps.ico .cap .tile svg{width:19px;height:19px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:2;transition:transform .5s cubic-bezier(.2,.9,.3,1.3)}
.caps.ico .cap .tile::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.28);opacity:0;transform:scale(.4);border-radius:inherit;transition:opacity .45s,transform .55s cubic-bezier(.2,.9,.3,1.2)}
.caps.ico .cap:hover .tile::after{opacity:1;transform:scale(1)}
.caps.ico .cap:hover .tile svg{transform:scale(1.12) rotate(-4deg)}
.caps.ico .cap .tx{min-width:0}
.caps.ico .cap .n{font-size:9.5px;letter-spacing:.12em;color:var(--faint)}
.caps.ico .cap p{margin:3px 0 0;font-size:13.5px;line-height:1.4}
.caps.ico .cap .tile.v{background:linear-gradient(148deg,var(--violet),var(--plum))}
.caps.ico .cap .tile.b{background:linear-gradient(148deg,var(--blue),var(--violet))}
.caps.ico .cap .tile.c{background:linear-gradient(148deg,var(--coral),#e0596d)}
.caps.ico .cap .tile.v::before,.caps.ico .cap .tile.b::before,.caps.ico .cap .tile.c::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 62%,rgba(255,255,255,.55) 78%,transparent 92%);opacity:0;animation:capsweep 3.4s linear infinite}
.caps.ico .cap:hover .tile::before{opacity:1}
@keyframes capsweep{to{transform:rotate(1turn)}}

/* ---------- AgentFlow: escena animada ---------- */
.ag{background:rgba(10,11,26,.5);border:1px solid rgba(255,255,255,.09);border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
.agh{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.agh .live{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#c3c8e6}
.agh .live i{width:7px;height:7px;border-radius:50%;background:#5fd68c;box-shadow:0 0 0 0 rgba(95,214,140,.6);animation:agpulse 2s infinite}
@keyframes agpulse{70%{box-shadow:0 0 0 9px rgba(95,214,140,0)}100%{box-shadow:0 0 0 0 rgba(95,214,140,0)}}
.agh .clock{font-size:11.5px;font-weight:800;color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.agdots{display:flex;gap:5px;padding:12px 18px 0}
.agdots i{height:3px;flex:1;border-radius:99px;background:rgba(255,255,255,.1);transition:background .45s}
.agdots i.on{background:linear-gradient(90deg,var(--blue),var(--violet))}
.agdots i.done{background:rgba(255,255,255,.26)}
.agstage{position:relative;height:296px;padding:16px 18px}
.ag .sc{position:absolute;inset:16px 18px;opacity:0;pointer-events:none;transition:opacity .45s cubic-bezier(.16,.84,.24,1)}
.ag .sc.on{opacity:1}

/* 1 · escaneo */
.ag .chips{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;height:150px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.ag .chips span{font-size:11.5px;font-weight:700;color:#aab0d2;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:6px 9px;opacity:0;transform:translateY(8px)}
.ag .sc.on .chips span{animation:agchip .5s cubic-bezier(.16,.84,.24,1) forwards;animation-delay:calc(var(--n,0) * 1ms)}
.ag .chips span:nth-child(1){--n:60}.ag .chips span:nth-child(2){--n:110}.ag .chips span:nth-child(3){--n:160}.ag .chips span:nth-child(4){--n:210}.ag .chips span:nth-child(5){--n:260}.ag .chips span:nth-child(6){--n:310}.ag .chips span:nth-child(7){--n:360}.ag .chips span:nth-child(8){--n:410}.ag .chips span:nth-child(9){--n:460}.ag .chips span:nth-child(10){--n:510}.ag .chips span:nth-child(11){--n:560}.ag .chips span:nth-child(12){--n:610}
@keyframes agchip{to{opacity:1;transform:none}}
.ag .scan{position:absolute;left:-18px;right:-18px;top:0;height:120px;background:linear-gradient(180deg,transparent,rgba(139,124,240,.22),transparent);opacity:0}
.ag .sc.on .scan{animation:agscan 2.6s cubic-bezier(.4,0,.6,1) infinite}
@keyframes agscan{0%{opacity:0;transform:translateY(-60px)}18%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translateY(210px)}}
.ag .big{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;gap:10px}
.ag .big b{font-size:52px;font-weight:800;letter-spacing:-2.4px;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.ag .big small{font-size:12.5px;font-weight:600;color:var(--faint)}

/* 2 · riesgo */
.ag .risk{display:flex;flex-direction:column;gap:9px;justify-content:center;height:100%}
.ag .rc{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:13px 15px;opacity:0;transform:translateX(-16px)}
.ag .sc.on .rc{animation:agslide .55s cubic-bezier(.16,.84,.24,1) forwards}
.ag .sc.on .rc:nth-child(2){animation-delay:.12s}
.ag .sc.on .rc:nth-child(3){animation-delay:.24s}
@keyframes agslide{to{opacity:1;transform:none}}
.ag .rc.lead{border-color:rgba(242,112,79,.45);background:linear-gradient(120deg,rgba(242,112,79,.14),rgba(255,255,255,.04))}
.ag .sc.on .rc.lead{animation:agslide .55s cubic-bezier(.16,.84,.24,1) forwards,agrise .8s .55s cubic-bezier(.2,.9,.3,1.3) forwards}
@keyframes agrise{to{transform:scale(1.035);box-shadow:0 18px 40px rgba(242,112,79,.22)}}
.ag .rc .pin{width:26px;height:26px;flex:none;border-radius:9px;background:var(--coral);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}
.ag .rc b{display:block;font-size:14px;font-weight:800;color:#fff;letter-spacing:-.2px}
.ag .rc em{font-style:normal;font-size:11.5px;color:var(--faint);font-weight:600}
.ag .rc>div{flex:1;min-width:0}
.ag .rc .sco{font-size:15px;font-weight:800;color:var(--coral2);font-variant-numeric:tabular-nums}

/* 3 · redacción */
.ag .mail{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:16px;overflow:hidden;height:100%;display:flex;flex-direction:column;opacity:0;transform:translateY(14px) scale(.985)}
.ag .sc.on .mail{animation:agpop .6s cubic-bezier(.16,.84,.24,1) forwards}
@keyframes agpop{to{opacity:1;transform:none}}
.ag .mh{display:flex;gap:10px;align-items:baseline;padding:11px 15px;border-bottom:1px solid rgba(255,255,255,.06)}
.ag .mh span{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);width:52px;flex:none}
.ag .mh b{font-size:13px;font-weight:700;color:#e6e8f4}
.ag .mb{flex:1;padding:14px 15px;position:relative}
.ag .mb p{margin:0;font-size:13.5px;line-height:1.6;color:#c9cee8;font-weight:500;display:inline}
.ag .mb .car{display:inline-block;width:2px;height:15px;background:var(--coral);vertical-align:-2px;margin-left:2px;animation:agcar 1s steps(2) infinite}
@keyframes agcar{50%{opacity:0}}
.ag .mf{padding:10px 15px;border-top:1px solid rgba(255,255,255,.06)}
.ag .mf .tone{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}

/* 4 · envío y tarea */
.ag .fly{display:flex;flex-direction:column;gap:12px;justify-content:center;height:100%}
.ag .sent,.ag .task{display:flex;align-items:center;gap:13px;border-radius:15px;padding:15px 16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045)}
.ag .sent{opacity:0;transform:translateY(10px)}
.ag .sc.on .sent{animation:agsent 1s cubic-bezier(.16,.84,.24,1) forwards}
@keyframes agsent{0%{opacity:0;transform:translateY(10px)}34%{opacity:1;transform:none}100%{opacity:1;transform:translateY(-4px)}}
.ag .sent .tick{width:30px;height:30px;flex:none;border-radius:50%;background:#1f8f52;color:#fff;display:grid;place-items:center;font-size:15px;font-weight:800;transform:scale(.4)}
.ag .sc.on .sent .tick{animation:agtick .6s .25s cubic-bezier(.2,.9,.3,1.7) forwards}
@keyframes agtick{to{transform:none}}
.ag .task{opacity:0;transform:translateY(20px) rotate(-1.5deg)}
.ag .sc.on .task{animation:agtask .7s .75s cubic-bezier(.2,.9,.3,1.25) forwards}
@keyframes agtask{to{opacity:1;transform:none}}
.ag .task .cal{width:38px;flex:none;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);text-align:center;padding:5px 0 6px;font-size:8.5px;font-weight:800;letter-spacing:.1em;color:var(--faint)}
.ag .task .cal b{display:block;font-size:16px;color:#fff;letter-spacing:-.5px}
.ag .sent b,.ag .task b{display:block;font-size:14px;font-weight:800;color:#fff;letter-spacing:-.2px}
.ag .sent em,.ag .task em{font-style:normal;font-size:11.5px;color:var(--faint);font-weight:600}

/* 5 · reasignación */
.ag .cols{display:grid;grid-template-columns:1fr 38px 1fr;gap:8px;align-items:stretch;height:100%}
.ag .cl{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:15px;padding:13px}
.ag .clh{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.ag .clh span{color:#fff;font-size:13px;letter-spacing:0;font-variant-numeric:tabular-nums}
.ag .pool{display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start;min-height:64px}
.ag .pool .av{width:34px;height:34px;border-radius:11px;background:var(--c);color:#fff;display:grid;place-items:center;font-size:11.5px;font-weight:800;transition:transform .55s cubic-bezier(.2,.9,.3,1.25),opacity .4s}
.ag .pool .av.gone{opacity:0;transform:translateX(38px) scale(.7)}
.ag .pool.dest .av{animation:agland .55s cubic-bezier(.2,.9,.3,1.4)}
@keyframes agland{from{opacity:0;transform:translateX(-30px) scale(.7)}}
.ag .arrow{display:grid;place-items:center}
.ag .arrow i{width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--violet),transparent);position:relative}
.ag .sc.on .arrow i{animation:agflow 1.5s linear infinite}
@keyframes agflow{0%{opacity:.25}50%{opacity:1}100%{opacity:.25}}

/* 6 · pronóstico */
.ag .fc{height:100%;display:flex;flex-direction:column;justify-content:center;gap:0}
.ag .fck{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--coral2)}
.ag .fcn{font-size:44px;font-weight:800;letter-spacing:-2.2px;color:#fff;margin:8px 0 0;line-height:1;font-variant-numeric:tabular-nums}
.ag .fcn b{font-weight:800}
.ag .fcb{display:flex;height:10px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.08);margin-top:18px}
.ag .fcb i{width:0;transition:width .9s cubic-bezier(.16,.84,.24,1)}
.ag .sc.on .fcb i{width:var(--w)}
.ag .sc.on .fcb i:nth-child(2){transition-delay:.12s}
.ag .sc.on .fcb i:nth-child(3){transition-delay:.24s}
.ag .fcl{font-size:11.5px;font-weight:700;color:#aeb4d6;margin-top:11px}
.ag .turn{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:13px;font-weight:600;color:#d3d7ee;opacity:0;transform:translateY(10px)}
.ag .sc.on .turn{animation:agpop .6s .7s cubic-bezier(.16,.84,.24,1) forwards}
.ag .turn .pill{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--coral);color:#fff;border-radius:999px;padding:5px 11px}

.agf{display:flex;align-items:center;gap:14px;padding:13px 18px;border-top:1px solid rgba(255,255,255,.07)}
.agf span:first-child{font-size:12px;font-weight:700;color:#b9bfdd;flex:1;min-width:0}
.agf .bar{width:96px;height:4px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;flex:none}
.agf .bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--violet),var(--coral))}
@media (max-width:760px){.ag .cols{grid-template-columns:1fr}.ag .arrow{display:none}.agstage{height:340px}}
.p5-nav{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;padding:14px;background:var(--card);border-radius:22px;box-shadow:var(--sh-sm)}
.p5-nav a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:13px;font-size:13.5px;font-weight:700;color:var(--ink2);text-decoration:none;transition:.28s}
.p5-nav a span{width:22px;height:22px;border-radius:8px;background:rgba(20,22,50,.06);display:grid;place-items:center;font-size:10.5px;font-weight:800;color:var(--muted);flex:none;transition:.28s}
.p5-nav a:hover{background:rgba(20,22,50,.04);color:var(--ink)}
.p5-nav a.on{background:var(--navy);color:#fff}
.p5-nav a.on span{background:var(--coral);color:#fff}
.p5-mod{padding:22px 0 74px}
.p5-mod+.p5-mod{border-top:1px solid rgba(20,22,50,.09);padding-top:56px}
.p5-h{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.p5-h .b{font-size:10.5px;font-weight:800;letter-spacing:.13em;color:#fff;background:var(--navy);border-radius:999px;padding:5px 11px}
.p5-h .b.hot{background:var(--coral)}

/* demo con puntos calientes */
.p5-demo{position:relative;margin-top:26px}
.p5-hot{position:absolute;width:30px;height:30px;border-radius:50%;background:var(--coral);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;cursor:pointer;z-index:2;box-shadow:0 8px 20px rgba(242,112,79,.5);transition:transform .3s cubic-bezier(.2,.9,.3,1.5)}
.p5-hot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--coral);opacity:0;animation:ping 2.4s ease-out infinite}
.p5-hot:hover,.p5-hot.on{transform:scale(1.18)}
.p5-hot .tip{position:absolute;left:44px;top:50%;transform:translateY(-50%) translateX(-8px);width:250px;background:#1e2138;color:#fff;border-radius:16px;padding:14px 16px;font-size:13px;line-height:1.5;font-weight:500;text-align:left;opacity:0;pointer-events:none;transition:.32s;box-shadow:var(--sh-lg);z-index:3}
.p5-hot .tip b{display:block;font-size:13.5px;font-weight:800;margin-bottom:4px}
.p5-hot:hover .tip,.p5-hot.on .tip{opacity:1;transform:translateY(-50%)}
.p5-hot.rt .tip{left:auto;right:44px}

/* preguntas clicables al copiloto */
.p5-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.p5-chip{font-size:12.5px;font-weight:700;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.07);color:#c7cbe4;cursor:pointer;border:1px solid rgba(255,255,255,.1);transition:.25s}
.p5-chip:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.p5-chip.on{background:var(--coral);color:#fff;border-color:transparent}
.p5-ans{display:none}
.p5-ans.on{display:block;animation:p5in .45s cubic-bezier(.16,.84,.24,1)}
@keyframes p5in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- pie: redes y direcciones ---------- */
.hactions .log,.hactions .btn.sm{white-space:nowrap}
.fadd{margin-top:12px!important;font-size:12px!important;line-height:1.6;color:var(--faint)!important;font-weight:600}
.fsoc{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08)}
.fsoc a{font-size:12.5px;font-weight:700;color:#9aa0c8;text-decoration:none;transition:color .25s}
.fsoc a:hover{color:var(--coral2)}
.fsoc .fmail{margin-left:auto}
.fsoc .fmail a{font-weight:800;color:#c9cee8}
.legal a{color:#9aa0c8;text-decoration:none}
.legal a:hover{color:var(--coral2)}
@media (max-width:640px){.fsoc .fmail{margin-left:0;width:100%}}

/* ---------- comparativa honesta ---------- */
.cmp{background:none;box-shadow:none;border-radius:0;overflow:visible}
.cmp table{border-collapse:separate;border-spacing:0;background:var(--card);box-shadow:var(--sh-sm);border-radius:var(--r);overflow:hidden}
.cmp thead th:first-child{border-top-left-radius:var(--r)}
.cmp thead th:last-child{border-top-right-radius:var(--r)}
.cmp tbody tr:last-child td:first-child{border-bottom-left-radius:var(--r)}
.cmp tbody tr:last-child td:last-child{border-bottom-right-radius:var(--r)}
.cmp td{vertical-align:top}
.cmp td:not(:first-child){vertical-align:middle}
.cmp td .nt{display:block;font-size:12px;line-height:1.45;color:var(--muted);font-weight:600;margin-top:5px;max-width:56ch}
.cmp td b{font-weight:800}
.cmp-f{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.cf{background:var(--card);border-radius:18px;box-shadow:var(--sh-sm);padding:22px 24px}
.cf b{display:block;font-size:15px;font-weight:800;letter-spacing:-.35px;margin-bottom:8px}
.cf p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink2);font-weight:500}
.cmp-n{font-size:12.5px;line-height:1.55;color:var(--ink2);font-weight:600;margin:16px 0 0;padding:0 4px;max-width:76ch}
@media (max-width:900px){.cmp{overflow:visible}.cmp table{min-width:0}.cmp-f{grid-template-columns:1fr}}

/* ---------- modal de agenda ---------- */
.dlg{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}
.dlg[hidden]{display:none}
.dlg-bd{position:absolute;inset:0;background:rgba(16,17,38,.52);backdrop-filter:blur(10px) saturate(1.2);opacity:0;transition:opacity .42s}
.dlg.on .dlg-bd{opacity:1}
/* alto explícito (no solo un tope): sin esto el contenedor se ajusta al
   contenido y .dlg-b nunca tiene espacio real para crecer via flex, quedando
   siempre al mínimo — aunque sobre pantalla de sobra. */
.dlg-w{position:relative;width:min(760px,100%);height:min(880px,calc(100vh - 48px));max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--card);border-radius:28px;overflow:hidden;box-shadow:0 50px 110px rgba(16,17,38,.42);opacity:0;transform:translateY(22px) scale(.965);transition:opacity .38s,transform .58s cubic-bezier(.2,.9,.24,1.04)}
.dlg.on .dlg-w{opacity:1;transform:none}
.dlg-h{position:relative;display:flex;gap:16px;align-items:flex-start;padding:19px 28px 15px;background:linear-gradient(150deg,#1d2036,#2a2450 62%,#3a2a4e);color:#fff;overflow:hidden}
.dlg-h::after{content:"";position:absolute;inset:auto -20% -70% 40%;height:210px;background:radial-gradient(closest-side,rgba(242,112,79,.5),transparent);filter:blur(38px)}
.dlg-t{position:relative;z-index:2;flex:1;min-width:0}
.dlg-t .k{font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--coral2)}
.dlg-t b{display:block;font-size:21px;font-weight:800;letter-spacing:-.7px;margin-top:6px}
.dlg-t em{font-style:normal;display:block;font-size:13.5px;line-height:1.55;color:#a9b0d4;font-weight:500;margin-top:9px;max-width:52ch}
.dlg-x{position:relative;z-index:2;flex:none;width:36px;height:36px;border:0;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.28s}
.dlg-x:hover{background:var(--coral);transform:rotate(90deg)}
.dlg-x svg{width:17px;height:17px}
/* el iframe llena el cuerpo entero (sin overflow propio): el único scroll que
   queda es el interno de Google, no uno de afuera compitiendo con él — antes
   el iframe medía más que .dlg-b y esos px de sobra quedaban tapados por el
   pie del modal, inalcanzables porque la rueda del mouse sobre el calendario
   scrollea el iframe, no este contenedor. */
.dlg-b{position:relative;flex:1;min-height:0;overflow:hidden;background:#fff}
.dlg-b iframe{display:block;width:100%;height:100%;min-height:420px;border:0;opacity:0;transition:opacity .5s}
.dlg-b iframe.ready{opacity:1}
.dlg-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-size:13px;font-weight:700;color:var(--muted);background:#fff}
.dlg-load .sp{width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(20,22,50,.12);border-top-color:var(--violet);animation:dlgsp .8s linear infinite}
@keyframes dlgsp{to{transform:rotate(1turn)}}
.dlg-f{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 28px;border-top:1px solid rgba(20,22,50,.08)}
.dlg-f span{font-size:11.5px;font-weight:600;color:var(--muted);flex:1;min-width:180px}
.dlg-f a{font-size:12.5px;font-weight:800;text-decoration:none}
.dlg-done{border:1.5px solid rgba(20,22,50,.12);background:none;font:inherit;font-size:12px;font-weight:800;color:var(--ink2);border-radius:999px;padding:7px 14px;cursor:pointer;transition:.28s}
.dlg-done:hover{border-color:var(--green,#16a34a);color:#16a34a;background:rgba(22,163,74,.07)}

/* confirmación dentro del modal */
.dlg-ok{position:absolute;inset:0;z-index:4;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 26px;background:linear-gradient(158deg,#1d2036,#2a2450 60%,#31284c);color:#fff;overflow:auto}
.dlg.okon .dlg-h,.dlg.okon .dlg-f{display:none}
.dlg-ok.on{display:flex;animation:okin .5s cubic-bezier(.16,.84,.24,1)}
@keyframes okin{from{opacity:0;transform:scale(1.02)}}
.dlg-ok .ring{width:58px;height:58px;flex:none;border-radius:50%;background:rgba(22,163,74,.16);border:2px solid rgba(95,214,140,.5);display:grid;place-items:center;color:#5fd68c;transform:scale(.5);opacity:0;animation:okring .7s .1s cubic-bezier(.2,.9,.3,1.5) forwards}
@keyframes okring{to{transform:none;opacity:1}}
.dlg-ok .ring svg{width:30px;height:30px;stroke-dasharray:34;stroke-dashoffset:34;animation:okpath .5s .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes okpath{to{stroke-dashoffset:0}}
.dlg-ok>b{font-size:26px;font-weight:800;letter-spacing:-1.1px;margin-top:15px;opacity:0;animation:okup .55s .35s cubic-bezier(.16,.84,.24,1) forwards}
.dlg-ok>em{font-style:normal;font-size:13.5px;line-height:1.5;color:#a9b0d4;font-weight:500;margin-top:8px;max-width:40ch;opacity:0;animation:okup .55s .45s cubic-bezier(.16,.84,.24,1) forwards}
@keyframes okup{from{transform:translateY(12px)}to{opacity:1;transform:none}}
.dlg-ok ul{list-style:none;margin:18px 0 0;padding:0;text-align:left;max-width:390px;width:100%;flex:none}
.dlg-ok li{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:#d5d9ef;font-weight:600;padding-bottom:8px;opacity:0;animation:okup .5s cubic-bezier(.16,.84,.24,1) forwards}
.dlg-ok li:nth-child(1){animation-delay:.6s}.dlg-ok li:nth-child(2){animation-delay:.7s}.dlg-ok li:nth-child(3){animation-delay:.8s}
.dlg-ok li span{flex:none;width:20px;height:20px;border-radius:7px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:10.5px;font-weight:800;color:#fff}
.dlg-ok .okc{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:10px;flex:none;opacity:0;animation:okup .5s .95s cubic-bezier(.16,.84,.24,1) forwards}
.dlg-ok .okx{border:0;background:none;font:inherit;font-size:12.5px;font-weight:800;color:#9aa0c8;cursor:pointer;transition:color .25s}
.dlg-ok .okx:hover{color:#fff}
.dlg-ok .okx i{font-style:normal;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.12);font-size:11px;margin-left:5px}

/* aviso flotante */
.toast{position:fixed;left:50%;bottom:26px;z-index:210;display:flex;align-items:center;gap:12px;background:rgba(20,22,50,.94);backdrop-filter:blur(14px);color:#fff;border-radius:16px;padding:13px 20px 13px 15px;box-shadow:0 24px 60px rgba(16,17,38,.4);transform:translate(-50%,26px);opacity:0;transition:opacity .4s,transform .55s cubic-bezier(.2,.9,.24,1.05)}
.toast[hidden]{display:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast .tk{width:28px;height:28px;flex:none;border-radius:50%;background:#1f8f52;display:grid;place-items:center;font-size:14px;font-weight:800}
.toast b{display:block;font-size:14px;font-weight:800;letter-spacing:-.3px}
.toast em{font-style:normal;font-size:12px;color:#a9b0d4;font-weight:600}
body.dlg-lock{overflow:hidden}
/* con el popup de horarios abierto, la barra fija inferior de conversión
   sobra: usa la misma clase que ya bloquea el scroll de fondo, así se anima
   con la transición que .p5-bar ya tiene y vuelve sola a su estado real
   (según el scroll) al cerrar, sin JS extra. */
body.dlg-lock .p5-bar{transform:translateY(110%)!important}
@media (max-width:640px){.dlg{padding:0}.dlg-w{width:100%;height:100vh;max-height:100vh;border-radius:0}.dlg-h{padding:17px 20px 13px}.dlg-t b{font-size:19px}.dlg-f{padding:9px 20px}}

/* ---------- sesión activa en el header ---------- */
.acct{position:relative}
.apill{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.72);border:1px solid rgba(20,22,50,.09);border-radius:999px;padding:5px 12px 5px 5px;font:inherit;cursor:pointer;box-shadow:0 4px 14px rgba(20,22,50,.06);transition:box-shadow .3s,border-color .3s,transform .3s}
.apill:hover{border-color:rgba(20,22,50,.16);box-shadow:0 10px 26px rgba(20,22,50,.12);transform:translateY(-1px)}
.acct.open .apill{border-color:rgba(139,124,240,.5);box-shadow:0 0 0 4px rgba(139,124,240,.13)}
.acct .av{position:relative;width:32px;height:32px;flex:none;border-radius:50%;background:linear-gradient(148deg,var(--blue),var(--violet));display:grid;place-items:center;overflow:hidden}
.acct .av b{font-size:12px;font-weight:800;color:#fff;letter-spacing:.02em}
.acct .av img{width:100%;height:100%;object-fit:cover;display:block}
.acct .av i.on{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#16a34a;border:2px solid #fff}
.acct .who{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;max-width:132px}
.acct .who b{font-size:13px;font-weight:800;letter-spacing:-.25px;color:var(--ink);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .who em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--muted);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apill .cv{width:14px;height:14px;color:var(--muted);transition:transform .35s}
.acct.open .apill .cv{transform:rotate(180deg)}
.amenu{position:absolute;right:0;top:calc(100% + 10px);width:288px;background:rgba(255,255,255,.94);backdrop-filter:blur(22px) saturate(1.4);border:1px solid rgba(255,255,255,.9);border-radius:20px;box-shadow:0 26px 66px rgba(20,22,50,.2);padding:8px;opacity:0;transform:translateY(-10px) scale(.97);transform-origin:100% 0;pointer-events:none;transition:opacity .3s,transform .42s cubic-bezier(.2,.9,.24,1.05)}
.acct.open .amenu{opacity:1;transform:none;pointer-events:auto}
.ahd{display:flex;align-items:center;gap:11px;padding:11px 12px 13px}
.acct .av.lg{width:40px;height:40px}
.acct .av.lg b{font-size:14px}
.ahd b{display:block;font-size:14px;font-weight:800;letter-spacing:-.3px}
.ahd em{font-style:normal;font-size:11.5px;color:var(--muted);font-weight:600;word-break:break-all}
.aplan{display:flex;align-items:center;gap:8px;margin:0 4px 8px;padding:9px 11px;border-radius:12px;background:linear-gradient(120deg,rgba(139,124,240,.14),rgba(242,112,79,.12))}
.aplan .tag{font-size:9.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#fff;background:var(--violet);border-radius:999px;padding:4px 9px}
.aplan .days{font-size:11.5px;font-weight:700;color:var(--ink2)}
.ai{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;border:0;background:none;font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);text-decoration:none;border-radius:13px;cursor:pointer;text-align:left;transition:background .25s,color .25s}
.ai:hover{background:rgba(20,22,50,.05)}
.ai .ic{width:26px;height:26px;flex:none;border-radius:9px;background:rgba(20,22,50,.06);display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--muted);transition:.25s}
.ai:hover .ic{background:var(--navy);color:#fff}
.ai em{font-style:normal;display:block;font-size:11px;font-weight:600;color:var(--muted)}
.ai.go{background:var(--navy);color:#fff;margin:0 0 6px}
.ai.go:hover{background:#171a30}
.ai.go .ic,.ai.go:hover .ic{background:var(--coral);color:#fff}
.ai.go em{color:rgba(255,255,255,.62)}
.ai .cnt{margin-left:auto;font-size:10.5px;font-weight:800;color:#fff;background:var(--coral);border-radius:999px;padding:3px 8px}
.ai.out{color:var(--muted);border-top:1px solid rgba(20,22,50,.08);border-radius:0 0 13px 13px;margin-top:4px}
.ai.out:hover{color:var(--coral2)}
@media (max-width:760px){.acct .who{display:none}.apill{padding:5px}.apill .cv{display:none}.amenu{width:262px}}

/* ---------- tarjeta de precio ---------- */
.p5-price{margin-top:26px}
.pcard{position:relative;display:grid;grid-template-columns:1.02fr .98fr;border-radius:28px;overflow:hidden;background:linear-gradient(152deg,#1c1f36,#282350 58%,#3a2a4e);box-shadow:0 40px 90px rgba(20,22,50,.32)}
.pcard .aur{position:absolute;inset:0;pointer-events:none;filter:blur(58px);opacity:.62}
.pcard .aur i{position:absolute;border-radius:50%;display:block}
.pcard .aur i:nth-child(1){width:340px;height:340px;background:var(--blue);left:-90px;top:-120px;animation:paur 13s ease-in-out infinite}
.pcard .aur i:nth-child(2){width:300px;height:300px;background:var(--violet);left:38%;bottom:-140px;animation:paur 16s ease-in-out infinite reverse}
.pcard .aur i:nth-child(3){width:280px;height:280px;background:var(--coral);right:-80px;top:-60px;animation:paur 19s ease-in-out infinite}
@keyframes paur{50%{transform:translate3d(26px,22px,0) scale(1.12)}}
.pcard>.pin{position:relative;z-index:2;padding:40px 40px 34px;display:flex;flex-direction:column;align-items:flex-start}
.pseg{position:relative;display:flex;gap:4px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:5px;margin-bottom:26px}
.pseg button{position:relative;z-index:2;border:0;background:none;font:inherit;font-size:13px;font-weight:800;color:#b3b9dc;padding:9px 20px;border-radius:999px;cursor:pointer;transition:color .32s}
.pseg button.on{color:var(--navy)}
.pseg .tab{position:absolute;z-index:1;top:5px;left:5px;height:calc(100% - 10px);width:0;border-radius:999px;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.22);transition:transform .5s cubic-bezier(.2,.9,.24,1.05),width .5s cubic-bezier(.2,.9,.24,1.05)}
.pbadge{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#fff;background:var(--coral);border-radius:999px;padding:6px 13px;box-shadow:0 8px 22px rgba(242,112,79,.42)}
.plist{font-size:12.5px;font-weight:700;color:#9aa0c8;margin-top:16px}
.plist s{color:#d8dcf0;text-decoration-color:var(--coral);text-decoration-thickness:2px;margin-left:5px}
.pbig{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:6px}
.pbig .cur{font-size:20px;font-weight:800;color:#c9cee9;letter-spacing:-.5px}
.pbig b{font-size:clamp(62px,7.6vw,96px);font-weight:800;letter-spacing:-.06em;line-height:.9;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 14px 40px rgba(139,124,240,.45)}
.pbig .per{font-size:13.5px;font-weight:700;color:#a8aed3}
.pnote{font-size:13px;font-weight:600;color:#9aa0c8;margin-top:14px;line-height:1.5}
.pcard>.pin .btn{margin-top:26px}
.pmicro{color:#8f96bb;margin-top:12px}
.pfeat{position:relative;z-index:2;padding:40px 38px;background:rgba(8,9,22,.34);border-left:1px solid rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.pfeat .pk{font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--coral2)}
.pfeat ul{list-style:none;margin:20px 0 0;padding:0}
.pfeat li{font-size:14px;line-height:1.5;color:#e2e5f2;font-weight:600;padding:0 0 13px 24px;position:relative}
.pfeat li::before{content:"✓";position:absolute;left:0;top:-1px;color:#7ee0a8;font-weight:800}

.pcalc{margin-top:14px;background:var(--card);border-radius:18px;box-shadow:var(--sh-sm);overflow:hidden}
.pcalc summary{display:flex;align-items:center;gap:10px;padding:15px 20px;font-size:13.5px;font-weight:700;color:var(--ink2);cursor:pointer;list-style:none}
.pcalc summary::-webkit-details-marker{display:none}
.pcalc summary em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-left:auto}
.pcalc summary .cx{width:22px;height:22px;border-radius:7px;background:rgba(20,22,50,.06);display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--muted);transition:transform .35s,background .3s}
.pcalc[open] summary .cx{transform:rotate(45deg);background:var(--coral);color:#fff}
.pcb{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:4px 20px 20px}
.pcr{display:flex;align-items:center;gap:6px;background:rgba(20,22,50,.05);border-radius:14px;padding:6px}
.pcr .mn{width:34px;height:34px;border:0;border-radius:10px;background:#fff;box-shadow:var(--sh-sm);font:inherit;font-size:17px;font-weight:800;color:var(--navy);cursor:pointer;transition:.25s}
.pcr .mn:hover{background:var(--navy);color:#fff}
.pcn{min-width:86px;text-align:center}
.pcn b{display:block;font-size:20px;font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.pcn span{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pct span{font-size:24px;font-weight:800;letter-spacing:-1px;display:block;font-variant-numeric:tabular-nums}
.pct em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--muted)}
@media (max-width:900px){.pcard{grid-template-columns:1fr}.pfeat{border-left:0;border-top:1px solid rgba(255,255,255,.08)}}

/* ---------- formulario web-to-lead del CRM ---------- */
.wtl{background:none;border-radius:0;box-shadow:none;padding:0;display:flex;flex-direction:column}
.wtl .micro{margin-top:14px}
.wtl-m{position:relative;min-height:780px;margin:0;background:none;border:0;border-radius:16px;overflow:visible}
.wtl-m iframe{display:block;width:100%;border:0;border-radius:16px;box-shadow:0 4px 24px rgba(20,22,50,.08);opacity:0;transition:opacity .55s}
.wtl-m iframe.ready{opacity:1}
.wtl-sk{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;padding:24px;background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(20,22,50,.08)}
.wtl-sk i{display:block;height:46px;border-radius:12px;background:linear-gradient(100deg,rgba(20,22,50,.05) 28%,rgba(20,22,50,.1) 50%,rgba(20,22,50,.05) 72%);background-size:220% 100%;animation:wtlsk 1.5s ease-in-out infinite}
.wtl-sk i.tall{height:124px}
.wtl-sk i.btn{height:48px;width:180px;border-radius:999px}
.wtl-sk i:nth-child(2){animation-delay:.1s}.wtl-sk i:nth-child(3){animation-delay:.2s}.wtl-sk i:nth-child(4){animation-delay:.3s}.wtl-sk i:nth-child(5){animation-delay:.4s}
@keyframes wtlsk{0%{background-position:120% 0}100%{background-position:-120% 0}}
@media (max-width:640px){.wtl{padding:0}.wtl-m{margin:0}}

/* encabezado y asteriscos del formulario */
.form .fhd{margin-bottom:22px}
.form .fhd h3{margin:0;font-size:25px;font-weight:800;letter-spacing:-.9px}
.form .fhd p{margin:7px 0 0;font-size:14px;line-height:1.5;color:var(--muted);font-weight:600}
.form label i{font-style:normal;color:var(--coral);font-weight:800}

/* configurador de plan */
.p5-cfg{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:26px;overflow:hidden;box-shadow:var(--sh);margin-top:26px}
.p5-cfg .in{background:var(--card);padding:34px 36px}
.p5-cfg .out{background:linear-gradient(158deg,#1d2036,#2a2450);color:#fff;padding:34px 36px;display:flex;flex-direction:column}
.p5-cfg label{font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--muted);display:block;margin-bottom:10px}
.p5-cfg label b{float:right;color:var(--navy);font-size:14px;letter-spacing:0}
.p5-cfg input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:rgba(20,22,50,.1);border:0;padding:0;margin-bottom:24px}
.p5-cfg input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--coral);cursor:pointer;box-shadow:var(--sh-sm)}
.p5-cfg .seg{display:flex;gap:6px;background:rgba(20,22,50,.05);border-radius:999px;padding:5px;margin-bottom:22px}
.p5-cfg .seg button{flex:1;border:0;background:none;font:inherit;font-size:13px;font-weight:800;color:var(--muted);padding:9px;border-radius:999px;cursor:pointer;transition:.28s}
.p5-cfg .seg button.on{background:#fff;color:var(--navy);box-shadow:var(--sh-sm)}
.p5-cfg .k{font-size:10.5px;font-weight:800;letter-spacing:.13em;color:var(--coral2)}
.p5-cfg .tot{font-size:clamp(40px,5vw,62px);font-weight:800;letter-spacing:-.055em;line-height:.94;margin:12px 0 4px;font-variant-numeric:tabular-nums}
.p5-cfg .sub{font-size:13.5px;line-height:1.55;color:#a9b0d4;font-weight:500}
.p5-cfg ul{list-style:none;margin:20px 0 0;padding:0}
.p5-cfg li{font-size:13.5px;line-height:1.5;color:#e2e5f2;font-weight:600;padding:0 0 9px 20px;position:relative}
.p5-cfg li::before{content:"✓";position:absolute;left:0;color:#7ee0a8;font-weight:800}
.p5-cfg .btn{margin-top:auto}

/* buscador de preguntas */
.p5-search{position:relative;margin-top:22px;max-width:460px}
.p5-search input{width:100%;font:inherit;font-size:15px;font-weight:600;color:var(--ink);padding:14px 16px 14px 44px;border-radius:14px;border:1.5px solid rgba(20,22,50,.1);background:var(--card);outline:none;transition:.25s}
.p5-search input:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(139,124,240,.12)}
.p5-search::before{content:"⌕";position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:19px;color:var(--muted)}
.p5-qs{margin-top:18px}
.p5-q{background:var(--card);border-radius:18px;box-shadow:var(--sh-sm);margin-bottom:9px;overflow:hidden}
.p5-q.hide{display:none}
.p5-q button{width:100%;text-align:left;background:none;border:0;font:inherit;font-size:15.5px;font-weight:700;color:var(--ink);padding:18px 22px;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center}
.p5-q .pm{width:24px;height:24px;border-radius:8px;background:rgba(20,22,50,.06);display:grid;place-items:center;flex:none;transition:.32s}
.p5-q.open .pm{background:var(--coral);color:#fff;transform:rotate(45deg)}
.p5-q .a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.8,.2,1)}
.p5-q.open .a{max-height:320px}
.p5-q .a p{margin:0;padding:0 22px 20px;font-size:14.5px;line-height:1.6;color:var(--ink2);font-weight:500}
.p5-empty{font-size:14px;color:var(--muted);font-weight:600;padding:14px 4px}

/* barra fija de conversión */
.p5-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border-top:1px solid rgba(20,22,50,.08);
transform:translateY(110%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.p5-bar.on{transform:none}
.p5-bar .in{max-width:1200px;margin:0 auto;padding:12px 32px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.p5-bar b{font-size:14.5px;letter-spacing:-.3px}
.p5-bar span{font-size:12.5px;color:var(--muted);font-weight:600;flex:1;min-width:140px}
@media (max-width:1080px){.p5-app{grid-template-columns:1fr;gap:20px}.p5-nav{position:relative;top:0;flex-direction:row;overflow-x:auto}.p5-cfg{grid-template-columns:1fr}.p5-hot{display:none}}
@media (max-width:640px){.p5-bar .in{padding:10px 20px}.p5-bar span{display:none}}

/* ---------------------------------------------------------------------------
   Fix de portado: por debajo de 1080px la navegación lateral pasa a fila
   horizontal y su max-content (457px) dimensionaba el track `1fr` del grid,
   desbordando el contenedor y recortando las secciones 01–05 en móvil.
   `minmax(0,1fr)` y `min-width:0` devuelven el track al ancho real disponible.
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .p5-app{grid-template-columns:minmax(0,1fr)}
  .p5-app.wide{grid-template-columns:minmax(0,1fr)}
  .p5-app>*{min-width:0}
  .p5-nav{min-width:0;max-width:100%}
}

/* Mismo patrón en la cabecera del copiloto: el track `1fr` tomaba el
   max-content de sus hijos y recortaba el bloque por debajo de 380px. */
@media (max-width:1080px){
  .copihead{grid-template-columns:minmax(0,1fr)}
  .copihead>*{min-width:0}
}

/* La comparativa de licencias no entra a ancho de móvil: en vez de recortarla,
   se desplaza en horizontal dentro de su propia tarjeta. */
@media (max-width:900px){
  .cmp{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .cmp table{min-width:448px}
}

/* La cabecera no entra por debajo de ~560px: la marca (282px) más el CTA de
   prueba (169px) exceden el ancho disponible y el botón quedaba cortado fuera
   de pantalla. Se reduce la marca y se retira el CTA del header — la barra fija
   inferior (.p5-bar) ya sostiene la conversión de forma permanente en móvil. */
@media (max-width:560px){
  #top .bar{gap:10px}
  /* Se reduce por --logo-h y no por width: la alineación del lado de producto
     se deriva de esa variable, así que fijar el ancho la dejaría descolgada. */
  #top .brand{min-width:0;flex:0 1 auto;overflow:hidden;--logo-h:15.8px}
  .hactions{margin-left:auto;flex:none}
  .hactions .btn{display:none}
}