html,
body,
#root {
height: 100%;
margin: 0;
color-scheme: dark;
}
/*
* CARDALI PORTAL — Estilos (design system base + capa v2)
* Branding navy + gold · glassmorphism · clases prefijadas (ca-, sb-, pp-, login-, v2-)
*
* Hoja ESTÁTICA: main.jsx la importa y Vite la enlaza en el , así que
* está aplicada antes del primer pintado. Hasta el 19-oct vivía como texto en
* theme.js y App.jsx la inyectaba en un useEffect — que React corre DESPUÉS de
* pintar: cada recarga mostraba un instante el HTML crudo (logo a 608 px,
* fuente por defecto, botones grises). No volver a inyectarla desde JS.
*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Open Sans',system-ui,sans-serif;font-size:15px;line-height:1.55;color:#edf2f7;background:#1a2535;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,.pp-brand-name,.sb-logo-name,.login-name,.welcome-name,.stat-val,.pp-stat-val,.role-title,.login-card-title{font-family:'Poppins','Open Sans',system-ui,sans-serif}
::selection{background:rgba(233,186,53,.45);color:#fff}
:focus-visible{outline:3px solid rgba(242,202,80,.9);outline-offset:2px;border-radius:4px}
.f-input:focus-visible,.bot-inp:focus-visible{outline:none}
button,input,select,textarea{font-family:inherit}
a{color:inherit;text-decoration:none}
/* Layout privado */
.ca-shell{display:flex;height:100vh;height:100dvh;overflow:hidden}
.ca-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;position:relative;background:radial-gradient(820px 480px at 100% -8%,rgba(233,186,53,.12),transparent 60%),radial-gradient(700px 520px at -12% 112%,rgba(44,62,87,.45),transparent 55%),#1a2535}
.ca-content{flex:1;overflow-y:auto;padding:28px;background:transparent;position:relative;z-index:1}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.logo-mosaic{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;--mx:50%;--my:50%}
.mosaic-layer{position:absolute;inset:0;background:url(/cardali-tile.svg) repeat;background-size:122px 122px;animation:mosaicDrift 55s linear infinite}
.mosaic-base{opacity:.05}
.mosaic-spot{opacity:.22;-webkit-mask:radial-gradient(280px circle at var(--mx) var(--my),#000 0,rgba(0,0,0,.35) 48%,transparent 72%);mask:radial-gradient(280px circle at var(--mx) var(--my),#000 0,rgba(0,0,0,.35) 48%,transparent 72%)}
@keyframes mosaicDrift{to{background-position:122px 122px}}
@media (prefers-reduced-motion:reduce){.mosaic-layer{animation:none}}
/* Sidebar */
.sb{width:256px;background:linear-gradient(180deg,#D8C277,#C3A852 80%);display:flex;flex-direction:column;flex-shrink:0;border-right:1px solid rgba(0,0,0,.16);box-shadow:4px 0 30px -10px rgba(0,0,0,.5);position:relative;z-index:3;overflow:hidden}
.sb-bg{position:absolute;inset:0;background:url(/cardali-tile-navy.svg) repeat;background-size:104px 104px;opacity:.12;animation:mosaicDrift 55s linear infinite;pointer-events:none;z-index:0}
.sb-logo{position:relative;z-index:1;padding:17px 20px 19px;display:flex;align-items:center;justify-content:center;gap:13px;cursor:pointer}
.sb-logo-icon{height:50px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sb-logo-icon img{height:50px;width:auto;display:block}
.sb-logo-name{color:#15233f;font-size:19px;font-weight:800;line-height:1.05;letter-spacing:-.01em;position:relative;top:-1px}
.sb-logo-name span{display:block;font-weight:500}
.sb-logo-sub{color:rgba(21,35,63,.7);font-size:11px;letter-spacing:.26em;font-weight:700;margin-top:3px}
.sb-nav{flex:1;padding:12px 0;overflow-y:auto;position:relative;z-index:1}
.sb-section{padding:18px 20px 8px;color:rgba(21,35,63,.85);font-size:11px;letter-spacing:.14em;font-weight:800}
.sb-item{display:flex;align-items:center;gap:12px;margin:5px 12px;padding:11px 15px;color:#fff;font-size:15px;font-weight:600;cursor:pointer;background:rgba(21,35,63,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);border-radius:12px;box-shadow:0 5px 14px -6px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1);transition:all .18s cubic-bezier(.2,.7,.2,1)}
.sb-item:hover{background:rgba(21,35,63,.72);transform:translateY(-2px);box-shadow:0 12px 24px -6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14)}
.sb-item.on{background:linear-gradient(135deg,#1b2c49,#15233f);color:#F2CA50;font-weight:700;border-color:rgba(242,202,80,.5);box-shadow:0 12px 26px -6px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16),inset 3px 0 0 #E9BA35}
.sb-item.sb-sub{margin-left:34px;padding:8px 13px;font-size:13.5px;background:rgba(21,35,63,.38)}
.sb-item.sb-sub.on{box-shadow:0 12px 26px -6px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16),inset 3px 0 0 #5FE0B0;border-color:rgba(95,224,176,.5);color:#5FE0B0}
.sb-user{padding:15px 18px;border-top:1px solid rgba(0,0,0,.16);display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.sb-av{width:36px;height:36px;background:#15233f;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#F2CA50;flex-shrink:0}
.sb-uname{color:#15233f;font-size:14px;font-weight:700}
.sb-urole{color:rgba(21,35,63,.65);font-size:11px;font-weight:500}
.sb-build{margin-top:-8px;padding:0 18px 12px;text-align:center;font-size:10px;letter-spacing:.05em;color:rgba(21,35,63,.42);position:relative;z-index:1}
/* Header privado */
.hdr{height:54px;background:rgba(26,37,53,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0;position:relative;z-index:2}
.hdr-search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:7px 13px;max-width:280px;flex:1}
.hdr-search input{border:none;background:transparent;font-size:13px;color:#E6EAF2;outline:none;width:100%}
.hdr-search input::placeholder{color:rgba(255,255,255,.4)}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:11px;font-size:13px;font-weight:500;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#E6EAF2;cursor:pointer;transition:all .18s ease}
/* El ícono no se encoge: cuando el texto de un botón se parte en dos líneas,
flex aplastaba el SVG (pasó con la llave de «Activar con mi NPN»). */
.btn svg{flex-shrink:0}
.btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);transform:translateY(-1px)}
.btn-p{background:linear-gradient(135deg,#F2CA50,#E9BA35);color:#1a2535;border-color:transparent;box-shadow:0 8px 18px -8px rgba(233,186,53,.7)}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 12px 26px -8px rgba(233,186,53,.9)}
.btn-sm{padding:6px 11px;font-size:12px}
.btn-lg{padding:13px 26px;font-size:15px;border-radius:13px}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.22)}
.btn-ic{width:34px;height:34px;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;font-size:16px;color:rgba(255,255,255,.7);cursor:pointer;transition:all .18s ease}
.btn-ic:hover{background:rgba(255,255,255,.08);color:#fff}
/* Efecto presión + barrido de luz (shine) en el botón primario */
.btn:active{transform:translateY(0) scale(.96)}
.btn-p{position:relative;overflow:hidden}
.btn-p::before{content:"";position:absolute;top:0;left:-80%;width:45%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);transition:left .55s ease;pointer-events:none}
.btn-p:hover::before{left:130%}
/* Deshabilitado: sin esto un botón apagado se veía idéntico a uno activo (dorado,
con elevación y barrido al pasar el ratón), y parecía que se podía tocar. Va
después de los :hover para ganarles; el style en línea de quien ya atenuaba
a mano sigue mandando. */
.btn:disabled,.btn:disabled:hover,.btn:disabled:active{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-p:disabled::before{display:none}
/* Cards — glassmorphism */
.card{background:rgba(255,255,255,.07);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.10);border-radius:16px;box-shadow:0 16px 40px -24px rgba(0,0,0,.6)}
.stat-card{background:rgba(255,255,255,.07);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:18px 16px;text-align:center;position:relative;overflow:hidden;box-shadow:0 16px 36px -24px rgba(0,0,0,.6);transition:transform .2s,box-shadow .2s}
.stat-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#E9BA35,#F2CA50)}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 24px 44px -22px rgba(0,0,0,.72)}
.stat-val{font-size:30px;font-weight:800;letter-spacing:-.02em;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.stat-lbl{font-size:12px;color:rgba(255,255,255,.62);margin-top:4px;font-weight:500}
/* Badges */
.bdg{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:7px}
/* Progress */
.prg{height:6px;background:rgba(255,255,255,.10);border-radius:4px;overflow:hidden}
.prg-f{height:100%;border-radius:4px;position:relative;overflow:hidden;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.prg-f::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-100%);animation:shimmer 2.2s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
/* Welcome banner */
.welcome{position:relative;overflow:hidden;background:linear-gradient(120deg,#1e2d3d 0%,#1a2535 50%,#243347 100%);border-radius:22px;padding:26px 28px;margin-bottom:22px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 24px 48px -28px rgba(0,0,0,.85)}
.welcome::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-70px;top:-120px;background:radial-gradient(circle,rgba(233,186,53,.45),transparent 70%);pointer-events:none}
.welcome::after{content:"";position:absolute;width:210px;height:210px;border-radius:50%;left:34%;bottom:-130px;background:radial-gradient(circle,rgba(201,160,32,.3),transparent 70%);pointer-events:none}
.welcome>*{position:relative;z-index:1}
.welcome-eye{color:#E9BA35;font-size:12px;margin-bottom:6px;letter-spacing:.14em;font-weight:700;text-shadow:0 1px 8px rgba(233,186,53,.3)}
.welcome-name{color:#fff;font-size:25px;font-weight:800;margin-bottom:6px;letter-spacing:-.015em;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.welcome-sub{color:rgba(255,255,255,.6);font-size:13px}
/* Grids */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.stats-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.dept-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
/* Pistas de ancho ACOTADO (no 1fr): una sección de 2 cursos tiene que verse
como las dos primeras tarjetas de una fila llena, no como dos pancartas.
Con auto-fill el número de columnas ya se adapta al ancho disponible, así
que no hacen falta overrides por media query. */
.courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),360px));gap:14px;justify-content:start}
/* Dept cards */
.dept-card{background:rgba(255,255,255,.07);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:18px;cursor:pointer;position:relative;overflow:hidden;transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,border-color .22s;box-shadow:0 14px 34px -24px rgba(0,0,0,.6)}
.dept-card:hover{transform:translateY(-5px);border-color:rgba(233,186,53,.45);box-shadow:0 26px 50px -22px rgba(0,0,0,.72)}
.dept-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}
/* Course cards */
.c-card{background:rgba(255,255,255,.07);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.10);border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,border-color .22s;box-shadow:0 14px 32px -24px rgba(0,0,0,.6)}
.c-card:hover{transform:translateY(-5px);border-color:rgba(233,186,53,.45);box-shadow:0 26px 48px -22px rgba(0,0,0,.72)}
.c-card:hover .c-thumb span{transform:scale(1.16) rotate(-5deg)}
.c-thumb{height:104px;display:flex;align-items:center;justify-content:center;font-size:34px;position:relative;overflow:hidden;background-image:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 50%),radial-gradient(circle at 78% 16%,rgba(255,255,255,.32),transparent 45%)}
.c-thumb span{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 4px 8px rgba(0,0,0,.28))}
.c-body{padding:12px}
.c-title{font-size:14.5px;font-weight:600;line-height:1.4;margin-bottom:8px;color:#edf2f7}
.c-meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.62)}
.c-add{border:2px dashed rgba(255,255,255,.16);border-radius:16px;min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;color:rgba(255,255,255,.5);transition:border-color .15s,color .15s}
.c-add:hover{border-color:#E9BA35;color:#E9BA35}
/* Filters */
.f-tabs{display:flex;gap:4px;background:rgba(255,255,255,.06);padding:4px;border-radius:11px;width:fit-content;border:1px solid rgba(255,255,255,.08);flex-wrap:wrap}
.f-tab{padding:7px 15px;font-size:13px;font-weight:600;border:none;background:transparent;border-radius:7px;color:rgba(255,255,255,.6);cursor:pointer;transition:all .15s}
.f-tab.on{background:rgba(255,255,255,.14);color:#fff;box-shadow:0 2px 8px -4px rgba(0,0,0,.5)}
/* Upload */
.dropzone{border:2px dashed rgba(255,255,255,.18);border-radius:14px;padding:48px 24px;text-align:center;cursor:pointer;background:rgba(255,255,255,.04);transition:border-color .15s,background .15s}
.dropzone:hover{border-color:#E9BA35;background:rgba(233,186,53,.10)}
.f-label{display:block;font-size:13px;color:rgba(255,255,255,.68);margin-bottom:6px;font-weight:600}
.f-input{width:100%;padding:10px 13px;border:1px solid rgba(255,255,255,.14);border-radius:10px;font-size:14px;color:#edf2f7;background:rgba(255,255,255,.06);outline:none;transition:border-color .15s}
.f-input:focus{border-color:#E9BA35}
.f-input option{color:#111827}
.f-input[aria-invalid="true"]{border-color:#F87171}
.f-err{font-size:12.5px;color:#FCA5A5;margin-top:5px;line-height:1.4}
.f-aviso{font-size:12.5px;color:#F2CA50;margin-top:5px;line-height:1.4}
.f-sug{background:none;border:0;padding:0;font:inherit;font-weight:700;color:inherit;text-decoration:underline;cursor:pointer;word-break:break-all}
.f-sug:focus-visible{outline:2px solid #E9BA35;outline-offset:2px;border-radius:3px}
/* Panel de opciones compartido: filtros de la Biblioteca (SelectorMultiple) y
Desplegable.jsx. Solo el aspecto — la posición la pone cada componente.
La barra de scroll es la del navegador en ambos, a propósito: sin estilo. */
.sel-panel{background:rgba(22,32,46,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:6px;box-shadow:0 24px 50px -18px rgba(0,0,0,.85)}
.sel-lista{max-height:240px;overflow-y:auto;outline:none;margin:0;padding:0;list-style:none}
.sel-opt{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border-radius:8px;cursor:pointer;text-align:left;border:none;font-size:12.5px;line-height:normal;background:transparent;color:rgba(255,255,255,.78);user-select:none}
.sel-opt.act{background:rgba(255,255,255,.08)}
.sel-opt[aria-selected="true"]{color:#E9BA35}
.sel-marca{width:14px;height:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.sel-casilla{border-radius:4px;border:1px solid rgba(255,255,255,.28)}
.sel-casilla.unico{border-radius:50%}
.sel-opt[aria-selected="true"] .sel-casilla{border-color:#E9BA35;background:rgba(233,186,53,.22)}
/* Desplegable (Desplegable.jsx) — el botón hereda .f-input; el panel va en portal */
.dd-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}
.dd-btn:disabled{cursor:default;opacity:.6}
.dd-btn:focus-visible{box-shadow:0 0 0 3px rgba(233,186,53,.3)}
.dd-btn svg{flex-shrink:0;opacity:.7;transition:transform .15s}
.dd-btn[aria-expanded="true"]{border-color:#E9BA35}
.dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.dd-val{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-ph{color:rgba(255,255,255,.45)}
.dd-panel{position:fixed;z-index:1000}
.dd-panel .sel-lista{overscroll-behavior:contain}
.f-tel{display:flex;align-items:center;gap:8px}
.f-tel>span{padding:10px 11px;border-radius:10px;font-size:14px;font-weight:700;color:#b0c4d8;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12);flex-shrink:0}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Breadcrumb */
.bc{display:flex;align-items:center;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.bc-item{font-size:13px;color:rgba(255,255,255,.55);cursor:pointer}
.bc-item:hover{color:#fff}
.bc-item.cur{color:#fff;font-weight:500;cursor:default}
.bc-sep{color:rgba(255,255,255,.3)}
/* Section header */
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sh-title{font-size:16px;font-weight:700;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.4)}
/* Recent */
.rec-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.rec-item:last-child{border-bottom:none}
.rec-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
/* Course viewer */
.cv{display:grid;grid-template-columns:1fr 280px;gap:16px}
.cv-thumb{border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin-bottom:14px;height:260px;position:relative;overflow:hidden;background-image:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,0) 55%),radial-gradient(circle at 80% 12%,rgba(255,255,255,.28),transparent 42%);box-shadow:0 24px 50px -26px rgba(16,24,40,.5)}
.play-btn{width:54px;height:54px;background:rgba(255,255,255,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;border:none;cursor:pointer}
.play-btn:hover{background:rgba(255,255,255,.25)}
.mod-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px}
.mod-item:last-child{border-bottom:none}
.mod-ck{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px}
/* ═══════════════════════════════════════════════
PORTAL PÚBLICO (pp-)
═══════════════════════════════════════════════ */
.pp{position:relative;min-height:100vh;min-height:100dvh;background:radial-gradient(1100px 700px at 80% -10%,rgba(233,186,53,.10),transparent 55%),radial-gradient(900px 700px at -10% 110%,rgba(44,62,87,.5),transparent 55%),#141d2b;overflow-x:hidden}
/* Aurora lenta: manchas de luz que respiran DEBAJO del mosaico y la red */
.pp::before{content:"";position:fixed;width:58vw;height:58vw;max-width:880px;max-height:880px;border-radius:50%;left:-16vw;top:-18vw;background:radial-gradient(circle,rgba(233,186,53,.13),transparent 65%);filter:blur(64px);animation:aur1 26s ease-in-out infinite;pointer-events:none;z-index:0}
.pp::after{content:"";position:fixed;width:52vw;height:52vw;max-width:800px;max-height:800px;border-radius:50%;right:-14vw;bottom:-18vw;background:radial-gradient(circle,rgba(28,79,156,.22),transparent 65%);filter:blur(70px);animation:aur2 32s ease-in-out infinite;pointer-events:none;z-index:0}
@keyframes aur1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,6vh) scale(1.12)}}
@keyframes aur2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,-6vh) scale(1.1)}}
/* Grano de película sutil sobre toda la app */
body::after{content:"";position:fixed;inset:0;background-image:url("data:image/svg+xml;utf8,");opacity:.05;mix-blend-mode:overlay;pointer-events:none;z-index:80}
/* Glare: reflejo de luz que sigue al cursor sobre las tarjetas (complemento del tilt) */
.pp-bcard,.pp-ncard,.v2-lead-card{position:relative}
.pp-bcard::after,.pp-ncard::after,.v2-lead-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(430px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.12),transparent 46%);opacity:0;transition:opacity .3s;pointer-events:none}
.pp-bcard:hover::after,.pp-ncard:hover::after,.v2-lead-card:hover::after{opacity:1}
/* Border-beam: haz de luz dorado recorriendo el borde de la tarjeta destacada */
@property --ba{syntax:"";inherits:false;initial-value:0deg}
.beam::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ba),transparent 0deg,transparent 300deg,rgba(242,202,80,.9) 345deg,#fff 355deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:beamSpin 7s linear infinite;pointer-events:none}
@keyframes beamSpin{to{--ba:360deg}}
.pp-scroll{position:relative;z-index:1}
/* Topnav público */
.pp-nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;padding:9px 30px;background:rgba(18,26,38,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}
.pp-brand{display:flex;align-items:center;gap:11px;cursor:pointer;flex-shrink:0}
.pp-brand img{display:block;height:48px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.pp-brand-name{font-size:26px;font-weight:800;color:#edf2f7;letter-spacing:-.015em;line-height:1.05}
.pp-brand-name span{color:#F2CA50}
.pp-beta{font-size:9px;font-weight:800;letter-spacing:.12em;color:#1a2535;background:linear-gradient(90deg,#F2CA50,#E9BA35);padding:2px 6px;border-radius:5px;line-height:1;box-shadow:0 2px 8px -2px rgba(233,186,53,.6);transform:translateY(-1px)}
.pp-brand-sub{font-size:9px;font-weight:700;letter-spacing:.16em;line-height:1.3;color:rgba(237,242,247,.55);margin-top:2px}
.pp-links{display:flex;align-items:center;gap:4px;margin-left:14px}
.pp-link{padding:8px 14px;font-size:14px;font-weight:600;color:rgba(255,255,255,.72);border-radius:9px;cursor:pointer;background:transparent;border:none;transition:all .15s}
.pp-link:hover{color:#fff;background:rgba(255,255,255,.06)}
.pp-link.on{color:#F2CA50;background:rgba(233,186,53,.12)}
.pp-nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.pp-login-btn{white-space:nowrap}
/* Menú móvil público (hamburguesa) */
.pp-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.14);border-radius:11px;background:rgba(255,255,255,.06);color:#edf2f7;cursor:pointer;flex-shrink:0;transition:background .15s}
.pp-burger:hover{background:rgba(255,255,255,.12)}
.pp-menu-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:38}
.pp-mobile-menu{display:none}
.pp-mlink{display:block;width:100%;text-align:left;padding:14px 16px;font-size:16px;font-weight:600;color:rgba(255,255,255,.82);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;cursor:pointer;transition:all .15s}
.pp-mlink:hover,.pp-mlink.on{color:#F2CA50;background:rgba(233,186,53,.12);border-color:rgba(233,186,53,.3)}
.pp-mlogin{width:100%;justify-content:center;padding:13px;font-size:15px;margin-top:4px}
/* Hero XL — cinematográfico a ancho completo (foto + scrim navy) */
.hx{position:relative;overflow:hidden;min-height:620px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.07)}
.hx-bg{position:absolute;inset:0}
.hx-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hx-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,26,38,.97) 0%,rgba(18,26,38,.9) 36%,rgba(18,26,38,.55) 66%,rgba(20,29,43,.35) 100%),linear-gradient(0deg,rgba(20,29,43,.92),transparent 32%)}
.hx::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#E9BA35 40%,#F2CA50 60%,transparent);z-index:2}
/* Red Cardali expandida: el globo 3D cubre TODO el hero como capa translúcida.
Máscara degradada → tenue sobre el texto (izq), plena a la derecha.
pointer-events: el texto/botones responden; el resto del hero se puede arrastrar. */
.hx-3d{position:absolute;inset:0;z-index:1;opacity:.32;-webkit-mask:linear-gradient(90deg,rgba(0,0,0,.28),#000 54%);mask:linear-gradient(90deg,rgba(0,0,0,.28),#000 54%)}
.hx-3d .pp-hero-3d{height:100%;animation:none}
.hx-3d .pp-hero-3d::before{display:none}
/* Noticias del hero: pestaña lateral que se despliega */
.hn{position:absolute;right:0;top:28px;z-index:5}
.hn-tab{display:flex;align-items:stretch;width:430px;max-width:calc(100vw - 20px);padding:0;overflow:hidden;border:1px solid rgba(233,186,53,.6);border-right:0;border-radius:16px 0 0 16px;background:rgba(18,26,38,.88);backdrop-filter:blur(10px);color:#E9BA35;cursor:pointer;box-shadow:-8px 10px 32px rgba(0,0,0,.4);transition:background .2s,opacity .15s}
.hn-solo{width:auto}
.hn-lbl{display:flex;align-items:center;gap:10px;flex:none;padding:18px 18px 18px 18px;font:800 15px/1 inherit;letter-spacing:.16em;background:rgba(233,186,53,.14);border-left:1px solid rgba(233,186,53,.35)}
.hn-marq{flex:1;min-width:0;display:flex;align-items:center;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hn-track{display:inline-flex;white-space:nowrap;animation:hnScroll 34s linear infinite;will-change:transform}
.hn-set{display:inline-flex}
.hn-it{padding-right:46px;font-size:14px;color:rgba(255,255,255,.9);letter-spacing:.01em}
.hn-it b{color:#E9BA35;font-size:11.5px;letter-spacing:.12em;margin-right:8px}
.hn-it::after{content:"◆";margin-left:46px;color:#E9BA35;font-size:9px;vertical-align:middle}
@keyframes hnScroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.hn-track{animation-duration:120s}}
.hn-tab:hover{background:rgba(26,37,53,.95)}
.hn.is-open .hn-tab{opacity:0;pointer-events:none}
.hn-dot{width:8px;height:8px;border-radius:50%;background:#E9BA35;box-shadow:0 0 0 0 rgba(233,186,53,.6);animation:hnPulse 2s infinite}
@keyframes hnPulse{70%{box-shadow:0 0 0 9px rgba(233,186,53,0)}100%{box-shadow:0 0 0 0 rgba(233,186,53,0)}}
.hn-panel{position:absolute;top:0;right:0;transform-origin:top right;width:380px;max-width:calc(100vw - 24px);border:1px solid rgba(233,186,53,.4);border-right:0;border-radius:18px 0 0 18px;background:rgba(18,26,38,.94);backdrop-filter:blur(14px);box-shadow:-10px 14px 44px rgba(0,0,0,.5);overflow:hidden;touch-action:pan-y}
.hn-x{position:absolute;top:8px;right:8px;z-index:2;width:28px;height:28px;border-radius:50%;border:0;background:rgba(13,20,33,.7);color:#fff;display:grid;place-items:center;cursor:pointer}
.hn-img{height:132px;flex:none;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:12px}
.hn-tag{font:700 10.5px/1 inherit;letter-spacing:.14em;padding:6px 10px;border-radius:99px;background:rgba(13,20,33,.75);color:#E9BA35}
.hn-slide{height:332px;display:flex;flex-direction:column}
.hn-body{padding:14px 18px 6px;flex:1;min-height:0;display:flex;flex-direction:column}
.hn-body h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hn-body p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hn-cta{margin-top:auto;align-self:flex-start;margin-bottom:4px}
.hn-date{font-size:11.5px;color:#E9BA35;letter-spacing:.06em;margin-bottom:6px}
.hn-body h3{font-size:18px;line-height:1.25;margin:0 0 8px;color:#fff}
.hn-body p{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.72);margin:0 0 12px}
.hn-cta{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;border:0;background:#E9BA35;color:#121a26;font-weight:700;font-size:13px;cursor:pointer}
.hn-nav{display:flex;align-items:center;justify-content:space-between;padding:8px 14px 14px}
.hn-nav>button{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer}
.hn-dots{display:flex;gap:7px}
.hn-dots button{width:8px;height:8px;padding:0;border-radius:99px;border:0;background:rgba(255,255,255,.28);cursor:pointer;transition:width .2s,background .2s}
.hn-dots button.on{width:22px;background:#E9BA35}
@media (max-width:820px){.hn{top:auto;bottom:96px}.hn-panel{top:auto;bottom:0;transform-origin:bottom right}.hn-tab{width:min(360px,calc(100vw - 20px))}.hn-lbl{font-size:13px;padding:15px 12px}.hn-img{height:104px}}
/* Teléfono y iPad en vertical (820): la pestaña flotante tapaba el chip del
diagnóstico y los ítems del hero. Pasa a ser una franja de ancho completo
EN EL FLUJO, arriba del hero (justo debajo de la barra), y al abrirse el
panel ocupa su lugar y empuja el contenido en vez de taparlo. `.hx>.hn` y
no `.hn` para no tocar la vista previa del admin (.hn.hn-prev), que sigue
siendo absoluta. Mismo corte que la regla de arriba. */
@media (max-width:820px){
.hx{flex-direction:column;align-items:stretch}
.hx>.hn{position:relative;top:auto;bottom:auto;right:auto;order:-1;width:100%}
.hx>.hn .hn-tab{width:100%;max-width:none;border-radius:0;border-left:0;border-right:0;border-top:0;box-shadow:none}
.hx>.hn.is-open .hn-tab{display:none}
.hx>.hn .hn-panel{position:relative;top:auto;bottom:auto;width:100%;max-width:none;border-radius:0;border-left:0;border-right:0;border-top:0;box-shadow:none}
.hx>.hx-in{margin-top:auto;margin-bottom:auto}
}
/* Admin · Noticias del inicio */
.spin{animation:naSpin 1s linear infinite}@keyframes naSpin{to{transform:rotate(360deg)}}
.na{padding-bottom:84px}
.na-card{padding:18px 20px;margin-bottom:14px}
.na-h{font-weight:700;font-size:14px;margin-bottom:12px;color:#fff}
.na-aviso{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;margin-bottom:14px;border-radius:12px;background:rgba(233,186,53,.12);border:1px solid rgba(233,186,53,.35);color:#F2CA50;font-size:13px;line-height:1.45}
.na-aviso svg{flex:none;margin-top:2px}.na-aviso code{background:rgba(0,0,0,.25);padding:1px 6px;border-radius:6px;font-size:12px}
.na-prev{position:relative;height:58px;border-radius:12px;background:linear-gradient(90deg,#141d2b,#1c2a3f);overflow:hidden}
.hn.hn-prev{position:absolute;top:0;right:0}
.hn-prev .hn-tab{cursor:default;box-shadow:none;max-width:100%}
.na-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;align-items:start}
.na-sw{display:flex;gap:12px;align-items:flex-start;cursor:default}
.na-sw span{display:flex;flex-direction:column;gap:2px;font-size:13.5px}.na-sw small{color:rgba(255,255,255,.55);font-size:12px}
.na-chips{display:flex;gap:8px}
.na-chip{padding:8px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;cursor:pointer;font-size:13px}
.na-chip.on{background:#E9BA35;color:#1a2535;border-color:#E9BA35;font-weight:700}
.na-lista-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:22px 0 10px}
.na-item.off{opacity:.62}
.na-item-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.na-num{width:26px;height:26px;border-radius:50%;background:rgba(233,186,53,.18);color:#E9BA35;display:grid;place-items:center;font-weight:700;font-size:13px}
.na-acc{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.na-cols{display:grid;grid-template-columns:240px 1fr;gap:22px}
.na-img{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.na-thumb{width:100%;aspect-ratio:12/5;border-radius:12px;background:rgba(255,255,255,.06) center/cover;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center}
.na-sub{display:flex;gap:8px;align-items:center;font-size:12px;background:rgba(13,20,33,.8);padding:6px 10px;border-radius:99px}
.na-up{cursor:pointer}
.na-campos .f-label{margin-top:12px}.na-campos>.f-label:first-child{margin-top:0}
.na-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.na-bar{position:sticky;bottom:0;padding-right:150px !important;display:flex;align-items:center;gap:10px;justify-content:flex-end;padding:12px 16px;margin-top:18px;background:rgba(18,26,38,.92);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:14px}
.na-bar>span{margin-right:auto}
@media (max-width:820px){.na-grid,.na-cols,.na-row2{grid-template-columns:1fr}.na-acc{margin-left:0}}
.hx-in{position:relative;z-index:2;max-width:1140px;margin:0 auto;padding:88px 30px;width:100%;pointer-events:none}
.hx-in .hx-copy{max-width:660px;pointer-events:auto}
.hx .pp-h1{font-size:clamp(38px,5.2vw,64px);line-height:1.05;text-wrap:balance}
.hx .pp-lead{font-size:clamp(17px,1.6vw,19px);line-height:1.65;color:#c3d2e4}
.hx-cols{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.pp-trust{display:flex;gap:20px;margin-top:26px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(255,255,255,.1)}
.pp-trust span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:#c3d2e4;font-weight:600}
.pp-trust svg{color:#F2CA50;flex-shrink:0}
/* ── Escena isométrica 3D (estilo process-plan) ── */
.iso{position:relative;height:420px;max-width:480px;margin:0 auto;perspective:1200px;--px:0;--py:0}
.iso-stage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(57deg + var(--py)*7deg)) rotateZ(calc(-42deg + var(--px)*7deg));transition:transform .3s ease-out}
.iso-card{position:absolute;left:50%;top:50%;width:215px;height:215px;margin:-108px 0 0 -108px;border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(242,202,80,.3);box-shadow:0 40px 70px -34px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:17px;transform:translateZ(var(--z));animation:isoBob 6.5s ease-in-out var(--d,0s) infinite}
.iso-c1{--z:120px}
.iso-c2{--z:10px;--d:1.4s;opacity:.92}
@keyframes isoBob{0%,100%{transform:translateZ(var(--z))}50%{transform:translateZ(calc(var(--z) + 18px))}}
.iso-row{display:block;height:10px;border-radius:6px;background:rgba(255,255,255,.16);margin-bottom:12px}
.iso-row.gold{background:linear-gradient(90deg,#F2CA50,#C9A020);box-shadow:0 0 14px -2px rgba(233,186,53,.5)}
.w40{width:40%}.w60{width:60%}.w80{width:80%}
.iso-bars{display:flex;align-items:flex-end;gap:8px;height:70px;margin-top:16px}
.iso-bars span{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#F2CA50,rgba(201,160,32,.35))}
.iso-bars span:nth-child(1){height:38%}.iso-bars span:nth-child(2){height:62%}.iso-bars span:nth-child(3){height:88%}.iso-bars span:nth-child(4){height:52%}
.iso-ring{position:absolute;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;border:5px solid rgba(255,255,255,.14);border-top-color:#F2CA50;transform:rotate(-30deg)}
/* Mock de pregunta del diagnóstico (opciones, una seleccionada) */
.iso-opt{display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:7px 10px;margin-bottom:8px}
.iso-opt i{width:10px;height:10px;border-radius:50%;border:2px solid rgba(255,255,255,.35);flex-shrink:0}
.iso-opt span{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.18);flex:1;margin:0}
.iso-opt.sel{border-color:rgba(242,202,80,.65);background:rgba(233,186,53,.10)}
.iso-opt.sel i{border-color:#F2CA50;background:#F2CA50;box-shadow:0 0 8px rgba(242,202,80,.8)}
.iso-opt.sel span{background:linear-gradient(90deg,#F2CA50,rgba(201,160,32,.5))}
/* Etiquetas legibles de cada placa (billboard, fuera de la perspectiva) */
.iso-tag{position:absolute;z-index:4;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#F2CA50;background:rgba(18,26,38,.78);border:1px solid rgba(233,186,53,.35);border-radius:20px;padding:5px 12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transform:translate(calc(var(--px)*12px),calc(var(--py)*9px));transition:transform .3s ease-out}
.iso-t1{top:5%;left:4%}
.iso-t2{bottom:7%;right:5%}
.iso-float{position:absolute;z-index:3;transform:translate(calc(var(--px)*22px),calc(var(--py)*16px));transition:transform .3s ease-out}
.iso-float-in{width:60px;height:60px;border-radius:17px;background:linear-gradient(135deg,#F2CA50,#C9A020);color:#1a2535;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 38px -10px rgba(233,186,53,.6),0 0 44px -4px rgba(233,186,53,.35),inset 0 1px 0 rgba(255,255,255,.5);animation:haFloat 5.5s ease-in-out var(--d,0s) infinite}
.iso-f1{top:13%;right:14%}
.iso-f2{bottom:19%;left:10%;--d:1.6s}
.iso-dotgo{filter:drop-shadow(0 0 8px rgba(242,202,80,.9))}
.iso-f2 .iso-float-in{width:52px;height:52px;border-radius:15px}
.iso-arc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.iso-arc path{fill:none;stroke:rgba(242,202,80,.55);stroke-width:1.6;stroke-dasharray:5 7;stroke-linecap:round;animation:isoDash 9s linear infinite}
.iso-arc circle{fill:#F2CA50;filter:drop-shadow(0 0 6px rgba(242,202,80,.8))}
@keyframes isoDash{to{stroke-dashoffset:-144}}
.iso-glow{position:absolute;left:50%;top:60%;width:360px;height:130px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(233,186,53,.22),transparent 70%);filter:blur(20px);pointer-events:none}
/* Pasos verticales (junto a la escena iso) — cada paso en su marco de vidrio */
.steps-v{display:flex;flex-direction:column;gap:14px}
.step-v{position:relative;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px 22px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 14px 34px -26px rgba(0,0,0,.7);transition:border-color .22s,transform .22s}
.step-v:hover{border-color:rgba(233,186,53,.38);transform:translateY(-2px)}
.step-chip{display:inline-flex;align-items:center;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#F2CA50;background:rgba(233,186,53,.12);border:1px solid rgba(233,186,53,.3);border-radius:20px;padding:4px 12px;margin-bottom:9px}
.step-v h4{font-size:19px;font-weight:700;color:#fff;margin-bottom:6px}
.step-v p{font-size:14px;line-height:1.6;color:#a8b8cc;max-width:460px}
/* Hero */
.pp-section{max-width:1140px;margin:0 auto;padding:64px 30px}
.pp-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;max-width:1140px;margin:0 auto;padding:78px 30px 56px}
.pp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;color:#F2CA50;background:rgba(233,186,53,.12);border:1px solid rgba(233,186,53,.28);padding:6px 13px;border-radius:30px;margin-bottom:20px}
.pp-h1{font-size:50px;line-height:1.05;font-weight:800;letter-spacing:-.025em;color:#fff;margin-bottom:18px;text-shadow:0 4px 24px rgba(0,0,0,.5)}
.pp-h1 .grad{color:#F2CA50}
.pp-lead{font-size:18px;line-height:1.6;color:#b6c6da;margin-bottom:28px;max-width:540px}
.pp-hero-cta{display:flex;gap:13px;flex-wrap:wrap}
.pp-hero-art{position:relative;height:380px;border-radius:26px;overflow:hidden;background:linear-gradient(150deg,rgba(233,186,53,.14),rgba(44,62,87,.4));border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 80px -40px rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center}
.pp-hero-art img{width:62%;opacity:.92;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5)) drop-shadow(0 0 30px rgba(233,186,53,.35))}
.pp-hero-ring{position:absolute;inset:0;margin:auto;border:1px solid rgba(233,186,53,.22);border-radius:50%}
.pp-hero-ring.r1{width:300px;height:300px;animation:spin 26s linear infinite}
.pp-hero-ring.r2{width:420px;height:420px;animation:spin 40s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
/* Hero 3D — globo-red Cardali (three.js), sin marco: flota sobre el fondo */
.pp-hero-3d{position:relative;height:460px;animation:artIn .6s ease both}
.pp-hero-3d::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(233,186,53,.16),transparent 68%);filter:blur(10px);pointer-events:none}
.pp-hero-3d canvas{position:relative;z-index:1;touch-action:pan-y}
.pp-hero-3d-hint{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);z-index:2;white-space:nowrap;font-size:11px;font-weight:600;letter-spacing:.08em;color:rgba(233,186,53,.75);background:rgba(18,26,38,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(233,186,53,.22);padding:5px 13px;border-radius:20px;pointer-events:none;animation:hintFade 1s ease 1.2s both}
@keyframes hintFade{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
/* Hero art — escena de salud interactiva + watermark Cardali */
.pp-hero-art.health{--accent:#F2CA50;animation:artIn .6s ease both}
.pp-hero-art.health.blue{--accent:#2E9FE0;background:linear-gradient(150deg,rgba(46,159,224,.16),rgba(44,62,87,.4))}
.pp-hero-art.health.blue .pp-hero-ring{border-color:rgba(46,159,224,.22)}
@keyframes artIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.ha-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px;-webkit-mask:radial-gradient(circle at 50% 50%,#000,transparent 76%);mask:radial-gradient(circle at 50% 50%,#000,transparent 76%);opacity:.55}
.ha-ecg{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;opacity:.7}
.ha-ecg-track{display:flex;width:200%;animation:ecgScroll 7s linear infinite}
.ha-ecg svg{width:50%;height:130px;flex-shrink:0}
.ha-ecg path{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 7px var(--accent))}
@keyframes ecgScroll{to{transform:translateX(-50%)}}
.ha-parallax{position:absolute;inset:0;transition:transform .18s ease-out;pointer-events:none}
.ha-wm{position:absolute;top:50%;left:50%;width:58%;transform:translate(-50%,-50%);opacity:.16;filter:drop-shadow(0 8px 22px rgba(0,0,0,.55));animation:wmPulse 4.5s ease-in-out infinite}
@keyframes wmPulse{0%,100%{opacity:.13}50%{opacity:.22}}
.ha-ico{position:absolute;color:var(--accent);opacity:.85;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));animation:haFloat 6s ease-in-out infinite;display:flex}
.ha-ico.i1{top:15%;left:13%;animation-delay:0s}
.ha-ico.i2{top:20%;right:15%;color:#fff;opacity:.7;animation-delay:1.2s}
.ha-ico.i3{bottom:17%;left:18%;color:#fff;opacity:.62;animation-delay:.6s}
.ha-ico.i4{bottom:19%;right:16%;animation-delay:1.8s}
@keyframes haFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.ha-chip{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:#dfeaf6;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);padding:6px 12px;border-radius:20px;z-index:2}
.ha-dot{width:8px;height:8px;border-radius:50%;background:#22C55E;animation:haPulse 1.8s infinite}
@keyframes haPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
/* Hero art — FOTO limpia (sin overlays), llena el marco con su proporción */
.pp-hero-art.photo{aspect-ratio:3/2;height:auto;min-height:0;padding:0;overflow:hidden;display:block;animation:artIn .6s ease both}
.pp-hero-art.photo .ha-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:1;filter:none}
/* Stat strip */
.pp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1140px;margin:0 auto;padding:0 30px}
.pp-stat{position:relative;overflow:hidden;text-align:center;padding:22px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:16px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .3s ease,box-shadow .3s ease}
.pp-stat:hover{transform:translateY(-4px);box-shadow:0 24px 46px -28px rgba(0,0,0,.7)}
/* Foto temática de fondo — duotono navy+gold visto por transparencia */
.pp-stat-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.22) saturate(1.15) contrast(1.05) brightness(.78);opacity:.58;z-index:0;transition:opacity .3s ease,transform .5s ease}
.pp-stat-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(233,186,53,.26),rgba(26,37,53,0) 50%,rgba(28,79,156,.22));mix-blend-mode:color}
.pp-stat:hover .pp-stat-bg{opacity:.7;transform:scale(1.06)}
/* Variante mapa (SVG ya en oro Cardali) — contenido, sin duotono */
.pp-stat-bg--map{background-size:80% auto;background-position:center 44%;background-repeat:no-repeat;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5));opacity:.5}
.pp-stat-bg--map::after{display:none}
.pp-stat:hover .pp-stat-bg--map{opacity:.66;transform:scale(1.05)}
.pp-stat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,37,53,.2),rgba(26,37,53,.52));z-index:1;pointer-events:none}
.pp-stat-val{position:relative;z-index:2;font-size:34px;font-weight:800;letter-spacing:-.02em;color:#F2CA50;font-variant-numeric:tabular-nums;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.pp-stat-lbl{position:relative;z-index:2;font-size:13px;color:#cdd9e8;margin-top:5px}
/* Section heading */
.pp-head{text-align:center;max-width:680px;margin:0 auto 44px}
.pp-kicker{font-size:12px;font-weight:700;letter-spacing:.18em;color:#F2CA50;text-transform:uppercase;margin-bottom:12px}
.pp-h2{font-size:36px;font-weight:800;letter-spacing:-.02em;color:#fff;margin-bottom:14px;line-height:1.12}
.pp-sub{font-size:16px;line-height:1.6;color:#a8b8cc}
/* Benefit cards */
.pp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pp-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pp-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pp-bcard{position:relative;overflow:hidden;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:26px 22px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:transform .22s,border-color .22s,box-shadow .22s;box-shadow:0 16px 40px -28px rgba(0,0,0,.7)}
.pp-bcard:hover{transform:translateY(-6px);border-color:rgba(233,186,53,.4);box-shadow:0 32px 60px -28px rgba(0,0,0,.8)}
.pp-bicon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(233,186,53,.22),rgba(233,186,53,.08));border:1px solid rgba(233,186,53,.3);color:#F2CA50;margin-bottom:16px}
.pp-bcard h3{font-size:17px;font-weight:700;color:#fff;margin-bottom:9px}
.pp-bcard p{font-size:14px;line-height:1.6;color:#a0b1c6}
/* Steps */
.pp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step}
.pp-step{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:26px 20px}
.pp-step-n{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#F2CA50,#C9A020);color:#1a2535;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;box-shadow:0 10px 22px -8px rgba(233,186,53,.6)}
.pp-step h4{font-size:16px;font-weight:700;color:#fff;margin-bottom:7px}
.pp-step p{font-size:13.5px;line-height:1.55;color:#a0b1c6}
/* News */
.pp-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pp-ncard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .22s,border-color .22s,box-shadow .22s;box-shadow:0 14px 36px -26px rgba(0,0,0,.7);display:flex;flex-direction:column}
.pp-ncard:hover{transform:translateY(-5px);border-color:rgba(233,186,53,.4);box-shadow:0 28px 54px -26px rgba(0,0,0,.8)}
.pp-ncard.feat{grid-column:span 2}
.pp-nthumb{height:150px;position:relative;overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform .5s ease}
.pp-ncard:hover .pp-nthumb{transform:scale(1.05)}
.pp-ncard.feat .pp-nthumb{height:210px}
.pp-nthumb-tag{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px;color:#fff;background:rgba(0,0,0,.35);backdrop-filter:blur(6px)}
.pp-nbody{padding:16px 18px;flex:1;display:flex;flex-direction:column}
.pp-nbody h3{font-size:16px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:8px}
.pp-ncard.feat .pp-nbody h3{font-size:21px}
.pp-nbody p{font-size:13.5px;line-height:1.55;color:#a0b1c6;flex:1}
.pp-nmeta{display:flex;align-items:center;gap:10px;font-size:12px;color:#7f93ab;margin-top:12px}
/* Compare table */
.pp-compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:16px}
.pp-compare{width:100%;min-width:480px;border-collapse:separate;border-spacing:0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden}
.pp-compare th,.pp-compare td{padding:15px 18px;text-align:left;font-size:14px;border-bottom:1px solid rgba(255,255,255,.07)}
.pp-compare thead th{font-size:13px;font-weight:700;color:#fff;background:rgba(255,255,255,.04)}
.pp-compare thead th.cardali{color:#F2CA50}
.pp-compare td{color:#a8b8cc}
.pp-compare td.cardali{color:#edf2f7;font-weight:600;background:rgba(233,186,53,.06)}
.pp-compare tr:last-child td{border-bottom:none}
/* CTA band */
.pp-cta-band{position:relative;overflow:hidden;max-width:1140px;margin:64px auto;padding:52px 40px;border-radius:26px;background:linear-gradient(120deg,#1e2d3d,#243347);border:1px solid rgba(233,186,53,.22);text-align:center;box-shadow:0 30px 70px -34px rgba(0,0,0,.85)}
.pp-cta-band::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-90px;top:-150px;background:radial-gradient(circle,rgba(233,186,53,.4),transparent 70%)}
.pp-cta-band>*{position:relative;z-index:1}
/* Lead form */
.pp-form{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:30px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 24px 60px -30px rgba(0,0,0,.8)}
.pp-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pp-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;max-width:1140px;margin:0 auto;padding:20px 30px 40px}
/* Footer */
.pp-footer{border-top:1px solid rgba(255,255,255,.08);background:rgba(14,20,30,.6);margin-top:40px}
.pp-footer-in{max-width:1140px;margin:0 auto;padding:40px 30px;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.pp-footer-col h5{font-size:13px;font-weight:700;color:#fff;margin-bottom:12px}
.pp-footer-col a{display:block;font-size:13.5px;color:#8fa3bc;margin-bottom:8px;cursor:pointer}
.pp-footer-col a:hover{color:#F2CA50}
.pp-footer-bottom{text-align:center;padding:18px;font-size:12px;color:rgba(255,255,255,.4);border-top:1px solid rgba(255,255,255,.06)}
/* ── AXIS BOT (mascota SVG) ── */
.axis-bot{display:block;overflow:visible}
.axis-bot .ax-body{animation:axBob 4.6s ease-in-out infinite}
@keyframes axBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.axis-bot .ax-eye{transform-box:fill-box;transform-origin:50% 50%;animation:axBlink 4.4s ease-in-out infinite}
@keyframes axBlink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.12)}}
.axis-bot .ax-arm-l{transform-box:fill-box;transform-origin:60% 85%;transform:rotate(-24deg)}
.axis-bot .ax-arm-r{transform-box:fill-box;transform-origin:40% 85%;animation:axWave 3.8s ease-in-out infinite}
@keyframes axWave{0%,100%{transform:rotate(22deg)}50%{transform:rotate(38deg) translateY(-2px)}}
.axis-bot .ax-shadow{transform-box:fill-box;transform-origin:50% 50%;animation:axShadow 4.6s ease-in-out infinite}
@keyframes axShadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.88);opacity:.75}}
/* ── BOT WIDGET ── */
.bot-fab{position:fixed;bottom:28px;right:28px;width:58px;height:58px;background:linear-gradient(135deg,#E9BA35,#C9A020);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;box-shadow:0 10px 26px -6px rgba(233,186,53,.55);border:none;z-index:9999;transition:transform .2s}
.bot-fab::before{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;z-index:-1;animation:pulse 2.6s ease-out infinite}
.bot-fab:hover{transform:scale(1.08) rotate(6deg)}
@keyframes pulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}
.bot-badge{position:absolute;top:-4px;right:-4px;background:#DC2626;color:#fff;border-radius:10px;font-size:10px;font-weight:700;padding:1px 5px;min-width:18px;text-align:center;border:2px solid #fff}
.bot-panel{position:fixed;bottom:96px;right:28px;width:400px;height:590px;background:#fff;border-radius:18px;box-shadow:0 4px 20px rgba(0,0,0,.14);border:1px solid #E5E7EB;display:flex;flex-direction:column;z-index:9998;overflow:hidden}
.bot-hdr{padding:14px 16px;background:#1a2535;display:flex;align-items:center;gap:10px;flex-shrink:0}
.bot-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#E9BA35,#C9A020);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.bot-name{color:#fff;font-size:13px;font-weight:600}
.bot-status{color:#22C55E;font-size:11px}
.bot-close{margin-left:auto;background:rgba(255,255,255,.1);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;cursor:pointer}
.bot-close:hover{background:rgba(255,255,255,.2)}
/* «Guías» en la cabecera: empuja a la derecha y la X queda pegada a él */
.bot-guias{margin-left:auto;display:flex;align-items:center;gap:5px;flex-shrink:0;background:rgba(233,186,53,.16);border:1px solid rgba(233,186,53,.45);border-radius:999px;padding:5px 10px;color:#F2CA50;font-size:11px;font-weight:600;cursor:pointer}
.bot-guias:hover{background:rgba(233,186,53,.26)}
.bot-guias:disabled{opacity:.5;cursor:default}
.bot-guias + .bot-close{margin-left:0}
.bot-tabs{display:flex;border-bottom:1px solid #E5E7EB;flex-shrink:0}
.bot-tab{flex:1;padding:10px;text-align:center;font-size:12px;font-weight:500;border:none;background:transparent;color:#6B7280;border-bottom:2px solid transparent;cursor:pointer;transition:color .15s,border-color .15s}
.bot-tab.on{color:#C9A020;border-bottom-color:#E9BA35}
.bot-msgs{flex:1;overflow-y:auto;padding:14px 12px}
.msg-row{display:flex;gap:8px;margin-bottom:14px;align-items:flex-start}
.msg-row.usr{flex-direction:row-reverse}
.msg-av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#E9BA35,#C9A020);display:flex;align-items:center;justify-content:center;font-size:12px;color:#1a2535;font-weight:700;flex-shrink:0}
/* El ancho lo limita el contenedor de la burbuja (82% de la fila, en Bot.jsx).
Un max-width en % aquí se calculaba sobre ese contenedor, que se ajusta al
contenido: con "ninguno" la burbuja quedaba al 79% de su propio texto y el
texto se salía por la derecha. overflow-wrap parte palabras o enlaces que
no caben en una línea (375 px). */
.msg-bbl{max-width:100%;box-sizing:border-box;padding:10px 13px;font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.msg-bbl.bot{background:#F3F4F6;color:#111827;border-radius:4px 14px 14px 14px}
.msg-bbl.usr{background:#E9BA35;color:#1a2535;border-radius:14px 4px 14px 14px}
.msg-time{font-size:10px;color:#9CA3AF;margin-top:3px}
.bot-quick{padding:0 12px 10px;display:flex;gap:6px;flex-wrap:wrap}
.bot-qq{font-size:11px;padding:5px 11px;border-radius:20px;border:1px solid #E5E7EB;background:#fff;color:#6B7280;cursor:pointer}
.bot-qq:hover{border-color:#E9BA35;color:#C9A020}
.bot-inp-area{padding:10px 12px;border-top:1px solid #E5E7EB;display:flex;gap:8px;flex-shrink:0;background:#fff}
.bot-inp{flex:1;border:1px solid #E5E7EB;border-radius:22px;padding:9px 14px;font-size:13px;color:#111827;background:#F8FAFC;outline:none}
.bot-inp:focus{border-color:#E9BA35}
.bot-send{width:36px;height:36px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;flex-shrink:0;cursor:pointer}
.bot-send:disabled{background:#E5E7EB;cursor:not-allowed}
/* Ticket */
.tkt{border-radius:10px;overflow:hidden;margin-top:8px;border-width:1.5px;border-style:solid}
.tkt-hd{padding:9px 13px;display:flex;align-items:center;gap:8px}
.tkt-bd{background:#fff;padding:11px 13px}
.tkt-sum{font-size:12px;font-weight:500;color:#111827;margin-bottom:5px}
.tkt-rsn{font-size:11px;color:#6B7280;line-height:1.55;margin-bottom:10px}
.tkt-acts{display:flex;gap:8px}
.tkt-ok{flex:1;padding:7px 0;border-radius:10px;border:none;color:#fff;font-size:12px;font-weight:500;cursor:pointer}
.tkt-no{padding:7px 12px;border-radius:10px;border:1px solid #E5E7EB;background:transparent;color:#6B7280;font-size:12px;cursor:pointer}
.tkt-sent{background:#EAF3DE;border-radius:10px;padding:8px 12px;display:flex;align-items:center;gap:8px;font-size:12px;color:#065F46;font-weight:500}
/* Typing */
.typing{display:flex;gap:5px;align-items:center;padding:4px 0}
.typing-dot{width:7px;height:7px;border-radius:50%;background:#9CA3AF;animation:tdot 1s infinite}
.typing-dot:nth-child(2){animation-delay:.15s}
.typing-dot:nth-child(3){animation-delay:.30s}
@keyframes tdot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
/* Utilities */
.flex{display:flex}.flex-1{flex:1}.items-c{align-items:center}.just-b{justify-content:space-between}
.gap-8{gap:8px}.gap-12{gap:12px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}
.p-14{padding:14px}.p-16{padding:16px}
.text-sm{font-size:13px}.text-xs{font-size:12px}.text-muted{color:rgba(255,255,255,.62)}
.fw-500{font-weight:600}.fw-600{font-weight:700}
.trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Sidebar logout */
.sb-logout{background:rgba(21,35,63,.14);border:none;border-radius:8px;width:30px;height:30px;color:rgba(21,35,63,.7);font-size:14px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.sb-logout:hover{background:#15233f;color:#F2CA50}
/* ═══ LOGIN ═══ */
.login{position:relative;overflow:hidden;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(1200px 820px at 50% -12%,#26384f,#1a2535 52%,#121a26 100%)}
.login::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(233,186,53,.06) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(circle at 50% 38%,#000,transparent 72%);mask-image:radial-gradient(circle at 50% 38%,#000,transparent 72%);pointer-events:none}
.login-orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(46px)}
.orb-1{width:460px;height:460px;background:radial-gradient(circle,rgba(233,186,53,.5),transparent 62%);top:-140px;left:-110px;animation:orbf1 13s ease-in-out infinite}
.orb-2{width:400px;height:400px;background:radial-gradient(circle,rgba(201,160,32,.42),transparent 62%);bottom:-140px;right:-90px;animation:orbf2 16s ease-in-out infinite}
.orb-3{width:340px;height:340px;background:radial-gradient(circle,rgba(44,62,87,.6),transparent 62%);top:40%;left:54%;animation:orbf3 19s ease-in-out infinite}
@keyframes orbf1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,44px) scale(1.14)}}
@keyframes orbf2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-54px,-50px) scale(1.18)}}
@keyframes orbf3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-46px,34px) scale(1.22)}}
.login-box{position:relative;z-index:1;width:100%;max-width:660px}
.login-brand{display:flex;align-items:center;gap:15px;justify-content:center;margin-bottom:30px}
.login-logo{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.login-logo img{height:84px;width:auto;display:block;filter:drop-shadow(0 14px 32px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(233,186,53,.45))}
.login-name{color:#edf2f7;font-size:30px;font-weight:800;letter-spacing:-.015em;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(233,186,53,.38))}
.login-name-grad{color:#F2CA50}
.login-sub{color:#8fa3bc;font-size:13px;letter-spacing:.08em;margin-top:4px}
.login-q{color:#b0c4d8;font-size:16px;text-align:center;margin-bottom:22px;font-weight:600}
.login-tabs{display:flex;gap:6px;background:rgba(255,255,255,.05);padding:5px;border-radius:13px;width:fit-content;margin:0 auto 22px;border:1px solid rgba(255,255,255,.09)}
.login-tab{padding:9px 20px;font-size:14px;font-weight:600;border:none;background:transparent;border-radius:9px;color:rgba(255,255,255,.6);cursor:pointer;transition:all .16s;display:flex;align-items:center;gap:8px}
.login-tab.on{background:linear-gradient(135deg,#F2CA50,#E9BA35);color:#1a2535;box-shadow:0 8px 18px -8px rgba(233,186,53,.7)}
.login-card{position:relative;overflow:hidden;background:rgba(255,255,255,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:30px;box-shadow:0 16px 38px -24px rgba(0,0,0,.8)}
.login-card-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.login-card-badge{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.login-card-title{font-size:18px;font-weight:700;color:#edf2f7}
.login-card-desc{font-size:13px;color:#8fa3bc;line-height:1.5;margin-top:3px}
.login-foot{text-align:center;color:rgba(255,255,255,.3);font-size:11px;margin-top:24px}
.login-back{position:absolute;top:24px;left:24px;z-index:2}
/* role select cards (login) */
.login-roles{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.role-card{position:relative;overflow:hidden;background:rgba(255,255,255,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:26px 22px;text-align:left;cursor:pointer;transition:box-shadow .25s,border-color .25s,background .25s;display:flex;flex-direction:column;gap:10px;box-shadow:0 16px 38px -24px rgba(0,0,0,.8)}
.role-card::after{content:"";position:absolute;top:-45%;right:-30%;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.role-card:hover{border-color:rgba(233,186,53,.45);background:rgba(255,255,255,.08);box-shadow:0 30px 64px -20px var(--glow),0 16px 38px -24px rgba(0,0,0,.8)}
.role-card:hover::after{opacity:.55}
.role-card:hover .role-badge{transform:translateY(-2px) scale(1.07) rotate(-5deg)}
.role-badge{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;position:relative;z-index:1;transition:transform .3s cubic-bezier(.2,.7,.2,1);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.role-title{font-size:17px;font-weight:700;color:#edf2f7;display:flex;align-items:center;gap:8px;position:relative;z-index:1}
.role-tag{font-size:10px;font-weight:700;background:rgba(233,186,53,.2);color:#F2CA50;padding:3px 9px;border-radius:20px;letter-spacing:.04em}
.role-desc{font-size:13px;color:#8fa3bc;line-height:1.6;flex:1;position:relative;z-index:1}
.role-go{font-size:13px;font-weight:700;margin-top:6px;display:flex;align-items:center;gap:6px;position:relative;z-index:1}
/* Responsive */
.upload-grid{display:grid;grid-template-columns:1fr 280px;gap:16px}
.hamburger{display:none;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.06);color:#edf2f7;cursor:pointer;flex-shrink:0;transition:background .15s}
.hamburger:hover{background:rgba(255,255,255,.12)}
@media (max-width:980px){
.pp-hero{grid-template-columns:1fr;gap:26px;padding-top:48px}
.hx-cols{grid-template-columns:1fr;gap:30px}
.pp-hero-art{height:300px}
.pp-hero-3d{height:340px}
.pp-h1{font-size:40px}
.pp-grid,.pp-grid-3{grid-template-columns:repeat(2,1fr)}
.pp-steps{grid-template-columns:repeat(2,1fr)}
.pp-stats{grid-template-columns:repeat(2,1fr)}
.pp-news-grid{grid-template-columns:repeat(2,1fr)}
.pp-ncard.feat{grid-column:span 2}
.pp-split{grid-template-columns:1fr}
.upload-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
.hamburger{display:flex}
.hide-mobile{display:none!important}
.sb{position:fixed;top:0;left:0;bottom:0;width:82vw;max-width:300px;transform:translateX(-100%);transition:transform .28s cubic-bezier(.2,.7,.2,1);z-index:60}
.sb.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.65)}
.sb-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:55;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
/* Con el cajón abierto los botones flotantes (z-index 9999/9998) le
quedaban encima y «Enviar comentario» tapaba cerrar sesión. */
.ca-shell.menu-abierto .bot-fab,.ca-shell.menu-abierto .fb-fab{visibility:hidden;pointer-events:none}
.ca-content{padding:16px}
.stats-grid,.stats-grid-3{grid-template-columns:repeat(2,1fr);gap:10px}
.dept-grid{grid-template-columns:1fr}
.cv{grid-template-columns:1fr}
.welcome{flex-direction:column;align-items:flex-start;gap:14px;padding:20px 18px}
.welcome-name{font-size:22px}
.stat-val{font-size:26px}
.hdr{padding:0 14px;gap:10px}
.bot-panel{width:calc(100vw - 24px);height:74vh;right:12px;bottom:84px}
.bot-fab{bottom:18px;right:18px}
.login-name{font-size:26px}
.login-logo img{height:74px}
.login-roles{grid-template-columns:1fr}
.pp-nav{padding:9px 16px;gap:8px}
.pp-links{display:none}
.pp-burger{display:flex}
.pp-menu-backdrop{display:block}
.pp-mobile-menu{display:flex;flex-direction:column;gap:8px;position:fixed;top:64px;left:12px;right:12px;z-index:39;padding:14px;background:rgba(20,28,40,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 24px 60px -24px rgba(0,0,0,.85)}
.pp-section{padding:46px 18px}
.pp-hero{padding:36px 18px}
.hx{min-height:520px}
.hx-in{padding:52px 18px}
.hx-bg::after{background:linear-gradient(180deg,rgba(18,26,38,.88),rgba(18,26,38,.94))}
.hx .pp-h1{font-size:clamp(31px,8.4vw,42px)}
.hx .pp-lead{font-size:16px}
/* Capa 3D más tenue y con máscara vertical (el texto ocupa todo el ancho) */
.hx-3d{opacity:.22;-webkit-mask:linear-gradient(180deg,rgba(0,0,0,.35),#000 62%);mask:linear-gradient(180deg,rgba(0,0,0,.35),#000 62%)}
/* Rendimiento móvil: aurora y grano fuera (blur y blend caros en GPU de teléfono) */
.pp::before,.pp::after{display:none}
body::after{display:none}
.pp-trust{gap:10px 16px;margin-top:20px;padding-top:18px}
.pp-trust span{font-size:12.5px}
.iso-tag{font-size:10px}
/* Targets táctiles ≥44px */
.btn{min-height:44px}
.btn-sm{min-height:40px}
.f-tab{padding:11px 16px;min-height:42px}
/* La escena iso rotada desborda el viewport angosto: se escala para contenerla */
.iso-stage{transform:rotateX(calc(57deg + var(--py)*7deg)) rotateZ(calc(-42deg + var(--px)*7deg)) scale(.78)}
/* El hint de arrastre choca con el FAB de Axis en móvil */
.pp-hero-3d-hint{display:none}
.iso{height:340px}
.iso-card{width:190px;height:190px;margin:-95px 0 0 -95px;padding:14px}
.iso-c1{--z:110px}
.iso-bars{height:52px}
.pp-h1{font-size:33px}
.pp-h2{font-size:28px}
.pp-grid,.pp-grid-2,.pp-grid-3,.pp-steps,.pp-stats,.pp-news-grid,.pp-form-grid{grid-template-columns:1fr}
.pp-ncard.feat{grid-column:span 1}
.pp-ncard.feat .pp-nbody h3{font-size:18px}
.pp-cta-band{padding:38px 22px;margin:40px 18px}
.pp-compare{font-size:13px}
.pp-compare th,.pp-compare td{padding:11px 12px}
/* iOS: evita el zoom automático al enfocar inputs (<16px lo dispara) */
.f-input,.bot-inp,.hdr-search input,.pp-form input,.pp-form select,.pp-form textarea,input,select,textarea{font-size:16px}
/* Safe-area (iPhone con notch / home indicator) */
.pp-nav{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.bot-fab{bottom:max(18px,env(safe-area-inset-bottom));right:max(18px,env(safe-area-inset-right))}
.bot-panel{bottom:max(84px,calc(env(safe-area-inset-bottom) + 76px))}
.sb{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
}
@media (max-width:560px){
/* Nav: el subtítulo largo de la marca empujaba el botón Ingresar fuera de pantalla */
.pp-brand-sub{display:none}
.pp-brand-name{font-size:20px}
.pp-brand img{height:38px}
.pp-nav{padding:10px 14px;gap:10px}
}
@media (max-width:520px){
/* Barra con dos botones («Activar» + «Ingresar»): no caben junto al nombre.
Queda solo la marca CL y los dos botones cortos, en una línea cada uno.
Ingresar NO se oculta — es la única puerta al login (no hay menú burger). */
.pp-brand>div{display:none}
.pp-nav-largo{display:none}
.pp-login-btn{padding:8px 12px;font-size:12.5px}
}
@media (max-width:430px){
.hdr-search{display:none}
.pp-h1{font-size:28px}
.pp-section{padding:38px 15px}
.pp-hero{padding:28px 15px}
.pp-hero-3d{height:280px}
.pp-stats{padding:0 15px;grid-template-columns:1fr 1fr;gap:11px}
.pp-stat-val{font-size:28px}
.pp-cta-band{padding:32px 18px;margin:32px 15px}
.pp-form{padding:22px 18px}
.welcome-name{font-size:20px}
.ca-content{padding:14px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* ── Diagnóstico (quiz) ── */
.v2-quiz{max-width:780px;margin:0 auto;padding:56px 24px 80px;position:relative;z-index:1}
.v2-qcard{background:rgba(255,255,255,.06);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:28px;box-shadow:0 24px 50px -28px rgba(0,0,0,.8)}
.v2-qnum{font-size:12px;font-weight:700;letter-spacing:.14em;color:#F2CA50;margin-bottom:10px}
.v2-qtext{font-size:21px;font-weight:700;color:#fff;line-height:1.35;margin-bottom:20px;letter-spacing:-.01em}
.v2-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;margin-bottom:10px;border-radius:13px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#dbe5f0;cursor:pointer;font-size:14.5px;line-height:1.5;transition:all .16s ease}
.v2-opt:hover{border-color:rgba(233,186,53,.55);background:rgba(233,186,53,.08);transform:translateY(-1px)}
.v2-opt.sel{border-color:#E9BA35;background:rgba(233,186,53,.16);color:#fff}
.v2-opt-dot{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.3);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.v2-opt.sel .v2-opt-dot{border-color:#E9BA35;background:#E9BA35}
/* Líneas del formulario de agente: 2×2 en todos los anchos. En celular la
celda mide ~125px y «Suplementarios» no cabe junto al punto y el ícono,
así que la marca sube encima del texto. */
.v2-lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:6px 0 18px}
.v2-lines .v2-opt{margin-bottom:0}
.v2-lines-mark{display:inline-flex;align-items:center;gap:12px;flex-shrink:0}
@media (max-width:480px){
.v2-lines .v2-opt{flex-direction:column;justify-content:center;gap:6px;padding:12px 8px;text-align:center;font-size:13.5px}
.v2-lines-mark{gap:8px}
}
.v2-qbar{height:7px;background:rgba(255,255,255,.10);border-radius:4px;overflow:hidden;margin:14px 0 26px}
.v2-qbar-f{height:100%;background:linear-gradient(90deg,#C9A020,#F2CA50);border-radius:4px;transition:width .4s cubic-bezier(.2,.7,.2,1)}
.v2-anon{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#34D399;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.3);padding:6px 13px;border-radius:30px}
.v2-layer-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.1em;color:#8fa3bc;text-transform:uppercase;margin-bottom:8px}
/* ── Informe de perfil ── */
.v2-report{max-width:880px;margin:0 auto;padding:48px 24px 90px;position:relative;z-index:1}
.v2-rp-head{text-align:center;margin-bottom:28px}
.v2-rp-level{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:800;color:#1a2535;background:linear-gradient(135deg,#F2CA50,#E9BA35);padding:10px 22px;border-radius:30px;box-shadow:0 12px 30px -10px rgba(233,186,53,.7);margin-top:14px}
.v2-bar-row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.v2-bar-lbl{width:150px;flex-shrink:0;font-size:13.5px;font-weight:600;color:#edf2f7;display:flex;align-items:center;gap:8px}
.v2-bar-track{flex:1;height:14px;background:rgba(255,255,255,.08);border-radius:8px;overflow:hidden}
.v2-bar-fill{height:100%;border-radius:8px;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.v2-bar-val{width:64px;text-align:right;font-size:13px;font-weight:700;flex-shrink:0}
.v2-rp-list li{font-size:14px;line-height:1.7;color:#c4d2e2;margin-bottom:6px;list-style:none;display:flex;gap:10px;align-items:flex-start}
.v2-rp-cta{position:relative;overflow:hidden;border-radius:22px;padding:30px;text-align:center;background:linear-gradient(120deg,#1e2d3d,#243347);border:1px solid rgba(233,186,53,.3);box-shadow:0 26px 60px -30px rgba(0,0,0,.85);margin-top:24px}
.v2-rp-cta::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-80px;top:-140px;background:radial-gradient(circle,rgba(233,186,53,.4),transparent 70%)}
.v2-rp-cta>*{position:relative;z-index:1}
/* ── Catálogo estilo Hotmart ── */
.v2-cover{height:132px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background-image:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),radial-gradient(circle at 80% 14%,rgba(255,255,255,.3),transparent 45%)}
.v2-cover svg{filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.c-card:hover .v2-cover svg{transform:scale(1.18) rotate(-5deg)}
/* Carátula con imagen real (miniatura de Bunny). 16/9 —el formato en que se
grabó el video— en vez de una altura fija: así la carátula acompaña al
ancho de la tarjeta y nunca recorta de más. El encuadre tira hacia arriba
(50% 30%) porque en estos videos la cara está en el tercio superior. El
bloque de color conserva sus 132px: sin imagen no hay proporción que
respetar. El icono de línea ya no baila en hover: aquí crece la foto. */
.v2-cover.is-img{height:auto;aspect-ratio:16/9;background-image:none;background-color:rgba(255,255,255,.05)}
.v2-cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.c-card:hover .v2-cover-img{transform:scale(1.06)}
.v2-cover-shade{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 45%,rgba(0,0,0,.55));pointer-events:none}
.v2-cover-badge{position:absolute;top:10px;left:10px;width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(12,20,32,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14)}
.v2-cover.is-img svg{filter:none}
.c-card:hover .v2-cover.is-img svg{transform:none}
.v2-chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.02em}
.v2-row{display:grid;grid-auto-flow:column;grid-auto-columns:262px;gap:14px;overflow-x:auto;padding:4px 2px 14px;scrollbar-width:thin}
.v2-banner{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:linear-gradient(120deg,rgba(233,186,53,.14),rgba(44,62,87,.4));border:1px solid rgba(233,186,53,.3)}
/* ── Player del curso ── */
.v2-player{aspect-ratio:16/9;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:relative;overflow:hidden;background-image:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),radial-gradient(circle at 80% 12%,rgba(255,255,255,.26),transparent 42%);box-shadow:0 24px 50px -26px rgba(16,24,40,.6);margin-bottom:14px}
.v2-lesson{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.08);cursor:pointer;transition:background .15s}
.v2-lesson:hover{background:rgba(255,255,255,.04)}
.v2-lesson:last-child{border-bottom:none}
.v2-check{width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:all .18s;background:transparent}
.v2-check.done{background:rgba(52,211,153,.2);border-color:#34D399}
/* ── Arco de ruta (Inicio → Desarrollo → Cierre) ── */
.v2-arc{display:flex;align-items:flex-start;margin:18px 0 6px}
.v2-arc-seg{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}
.v2-arc-seg::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:3px;background:rgba(255,255,255,.12);z-index:0}
.v2-arc-seg:first-child::before{display:none}
.v2-arc-seg.done::before{background:linear-gradient(90deg,#C9A020,#F2CA50)}
.v2-arc-dot{width:32px;height:32px;border-radius:50%;background:#243347;border:2px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:all .3s}
.v2-arc-seg.done .v2-arc-dot{background:linear-gradient(135deg,#F2CA50,#C9A020);border-color:transparent;box-shadow:0 8px 20px -6px rgba(233,186,53,.7)}
.v2-arc-seg.cur .v2-arc-dot{border-color:#E9BA35;box-shadow:0 0 0 5px rgba(233,186,53,.18)}
.v2-arc-lbl{margin-top:8px;font-size:12px;font-weight:700;color:rgba(255,255,255,.55)}
.v2-arc-seg.cur .v2-arc-lbl,.v2-arc-seg.done .v2-arc-lbl{color:#F2CA50}
/* ── Admin ── */
.v2-tkt-row{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.v2-tkt-row:last-child{border-bottom:none}
.v2-status{font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px;border:none;cursor:pointer;appearance:none;-webkit-appearance:none}
.v2-status option{color:#111827}
.v2-toggle{width:46px;height:26px;border-radius:20px;border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
.v2-toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s cubic-bezier(.2,.7,.2,1);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.v2-toggle.on{background:linear-gradient(135deg,#F2CA50,#C9A020)}
.v2-toggle.off{background:rgba(255,255,255,.14)}
.v2-toggle.on::after{transform:translateX(20px)}
.v2-lesson-builder{display:flex;gap:8px;align-items:center;margin-bottom:8px}
/* ── Login v2 (badges credenciales demo) ── */
.v2-cred{display:flex;align-items:center;gap:8px;font-size:12px;color:#b0c4d8;background:rgba(255,255,255,.06);border:1px dashed rgba(233,186,53,.4);border-radius:10px;padding:7px 11px;margin-top:10px;font-family:ui-monospace,Menlo,monospace}
/* ── Bifurcación + track de orientación (starter) ── */
.v2-fork{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.v2-fork .role-card{width:100%}
.v2-tl{position:relative;margin:8px 0 4px;padding-left:38px}
.v2-tl::before{content:"";position:absolute;left:13px;top:10px;bottom:14px;width:2px;background:rgba(255,255,255,.14)}
.v2-tl-item{position:relative;padding-bottom:20px}
.v2-tl-item:last-child{padding-bottom:0}
.v2-tl-dot{position:absolute;left:-38px;top:0;width:28px;height:28px;border-radius:50%;background:#243347;border:2px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:rgba(255,255,255,.6)}
.v2-tl-item.done .v2-tl-dot{background:rgba(52,211,153,.2);border-color:#34D399;color:#34D399}
.v2-tl-item.cur .v2-tl-dot{background:linear-gradient(135deg,#F2CA50,#C9A020);border-color:transparent;color:#1a2535;box-shadow:0 0 0 5px rgba(233,186,53,.18)}
.v2-tl-title{font-size:14.5px;font-weight:700;color:#edf2f7;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.v2-tl-item.cur .v2-tl-title{color:#F2CA50}
.v2-tl-desc{font-size:13px;line-height:1.6;color:#a0b1c6;margin-top:3px}
.v2-tl-eta{font-size:11.5px;color:#8fa3bc;margin-top:3px;font-weight:600}
.v2-here{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:#1a2535;background:linear-gradient(90deg,#F2CA50,#E9BA35);padding:3px 10px;border-radius:20px;box-shadow:0 4px 12px -4px rgba(233,186,53,.7)}
/* ── Responsive v2 ── */
@media (max-width:768px){
.v2-fork{grid-template-columns:1fr}
.v2-quiz{padding:32px 16px 60px}
.v2-qtext{font-size:18px}
.v2-report{padding:32px 16px 70px}
.v2-bar-lbl{width:104px;font-size:12px}
.v2-row{grid-auto-columns:230px}
}
/* ── Impresión del informe (Descargar mi informe) ── */
@media print{
body{background:#fff!important;color:#111827!important}
.v2-noprint,.fx-canvas,.logo-mosaic,.bot-fab,.bot-panel{display:none!important}
.v2-report{padding:0;max-width:100%}
.v2-report .card,.v2-report .v2-rp-cta{background:#fff!important;border:1px solid #d7dee8!important;box-shadow:none!important;backdrop-filter:none!important}
.v2-report,.v2-report *{color:#1a2535!important;text-shadow:none!important}
.v2-rp-level{box-shadow:none!important}
.v2-bar-track{background:#e5eaf1!important}
.v2-bar-fill,.v2-rp-level{print-color-adjust:exact;-webkit-print-color-adjust:exact}
/* Dentro de la academia (Mi perfil): el armazón mide 100vh y el contenido
scrollea dentro de .ca-content, así que el papel recibía solo la ventana
visible, desde donde estuviera el scroll. Al imprimir se suelta todo para
que el informe corra completo desde arriba, sin menú, barra ni flotantes. */
.ca-shell,.ca-main{display:block!important;height:auto!important;overflow:visible!important}
.ca-content{overflow:visible!important;height:auto!important;padding:0!important}
.sb,.hdr,.fb-fab,.v2-tour{display:none!important}
}
/* ── TOUR (guías paso a paso de Axis) ── */
.v2-tour{position:fixed;inset:0;z-index:200}
/* Sin desenfoque: oscurecer basta para separar el foco, y lo de alrededor
se sigue leyendo (el agente ve dónde está, no una mancha). */
.v2-tour-dim{position:absolute;inset:0;background:rgba(10,16,26,.55)}
.v2-tour-spot{position:fixed;border:2px solid #F2CA50;border-radius:14px;box-shadow:0 0 0 9999px rgba(10,16,26,.55),0 0 24px rgba(242,202,80,.5);pointer-events:none;transition:all .35s cubic-bezier(.2,.7,.2,1);z-index:1}
/* Axis + su burbuja. El ancho lo mide Tour.jsx para colocarlo; con la
burbuja a la izquierda del foco, Axis pasa a la derecha (lado-left). */
.v2-tour-axis{position:fixed;z-index:2;display:flex;align-items:flex-start;gap:10px;width:372px;max-width:calc(100vw - 32px)}
.v2-tour-axis.lado-left{flex-direction:row-reverse}
.v2-tour-axis-av{flex-shrink:0;margin-top:4px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
/* Fondo sólido: sobre una pantalla que ya no se desenfoca, el vidrio
translúcido dejaba ver el contenido de detrás a través del texto. */
.v2-tour-card{position:relative;flex:1;min-width:0;background:#16202e;border:1px solid rgba(233,186,53,.35);border-radius:16px;padding:16px;box-shadow:0 30px 70px -20px rgba(0,0,0,.9)}
/* La colita de la burbuja, hacia Axis */
.v2-tour-card::before{content:"";position:absolute;top:22px;left:-7px;width:12px;height:12px;background:#16202e;border-left:1px solid rgba(233,186,53,.35);border-bottom:1px solid rgba(233,186,53,.35);transform:rotate(45deg)}
.v2-tour-axis.lado-left .v2-tour-card::before{left:auto;right:-7px;border:0;border-right:1px solid rgba(233,186,53,.35);border-top:1px solid rgba(233,186,53,.35)}
.v2-tour-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.v2-tour-kicker{font-size:10px;font-weight:800;letter-spacing:.12em;color:#F2CA50}
.v2-tour-step{font-size:11px;color:#8fa3bc;margin-top:2px}
.v2-tour-x{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:transparent;color:#8fa3bc;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.v2-tour-x:hover{color:#fff;background:rgba(255,255,255,.08)}
.v2-tour-title{font-size:15px;font-weight:700;color:#fff;margin-bottom:6px}
.v2-tour-body{font-size:13px;line-height:1.6;color:#c4d2e2;margin-bottom:12px}
.v2-tour-dots{display:flex;gap:5px;margin-bottom:12px}
.v2-tour-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18);transition:all .2s}
.v2-tour-dot.on{background:#F2CA50;transform:scale(1.25)}
.v2-tour-dot.done{background:rgba(242,202,80,.5)}
.v2-tour-acts{display:flex;justify-content:space-between;gap:8px}
/* Presentación de Axis (la oferta del tour de la plataforma): Axis grande
arriba y su burbuja debajo, con la colita hacia él. */
.v2-tour-axis.v2-tour-intro{flex-direction:column;align-items:center;gap:6px;width:420px}
.v2-tour-intro .v2-tour-card{width:100%;flex:none;padding:20px;text-align:center}
.v2-tour-intro .v2-tour-card::before{top:-7px;left:50%;margin-left:-6px;border:0;border-left:1px solid rgba(233,186,53,.35);border-top:1px solid rgba(233,186,53,.35)}
.v2-tour-intro .v2-tour-title{font-size:18px}
.v2-tour-pregunta{font-size:14px;font-weight:600;color:#F2CA50;margin-bottom:14px}
.v2-tour-intro .v2-tour-acts{justify-content:center;gap:10px}
.v2-tour-nota{font-size:11px;color:#8fa3bc;margin-top:12px}
/* 16 px de aire a cada lado: el mismo MARGEN con el que Tour.jsx la acota */
@media (max-width:768px){
.v2-tour-axis{width:calc(100vw - 32px)}
.v2-tour-axis-av svg{width:40px;height:40px}
.v2-tour-intro .v2-tour-axis-av svg{width:96px;height:96px}
}
/* Durante la guía, Axis y «Enviar comentario» se apartan (z-index 9999/9998:
quedarían por encima del oscurecido y se podrían pulsar). Vuelven a verse
solo en el paso que los señala, y ni ahí se pulsan: el foco es para mirar. */
.ca-shell.en-tour .bot-fab,.ca-shell.en-tour .bot-panel,.ca-shell.en-tour .fb-fab{visibility:hidden;pointer-events:none}
.ca-shell.en-tour[data-tour-foco="bot-fab"] .bot-fab,.ca-shell.en-tour[data-tour-foco="feedback-fab"] .fb-fab{visibility:visible}
/* ── HUB DE HERRAMIENTAS ── */
/* Tarjetas del cotizador: columnas de al menos 280 px (o todo el ancho si no
caben) y todas iguales. Con repeat(3,1fr) el mínimo de cada columna era el
contenido, y el nombre de plan más largo ensanchaba su columna y la página. */
.v2-quote-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:12px}
/* Compañía y nombre del plan: se parten en varias líneas, sin recortar. */
.v2-quote-txt{min-width:0;overflow-wrap:anywhere}
/* El botón de copiar va al pie de la tarjeta: con nombres de distinto largo,
los botones de una fila quedan alineados. */
/* El margin-bottom del bloque anterior conserva los 10 px de separación
que antes daba el margin-top del botón. */
.v2-quote-card{display:flex;flex-direction:column}
.v2-quote-card>:nth-last-child(2){margin-bottom:10px}
.v2-quote-copiar{margin-top:auto}
.v2-gen-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.v2-gen-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden}
.v2-gen-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 13px;font-size:12px;font-weight:700;color:#F2CA50;background:rgba(233,186,53,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.v2-gen-text{margin:0;padding:12px 13px;font-family:inherit;font-size:12.5px;line-height:1.65;color:#c4d2e2;white-space:pre-wrap;word-break:break-word}
.v2-gen-list{margin:0;padding:12px 13px 12px 28px;font-size:12.5px;line-height:1.9;color:#c4d2e2}
/* Hogar del cotizador: una fila por persona; en móvil cada fila es una
tarjeta de dos líneas y la etiqueta viaja dentro de la celda. */
.v2-hogar-fila{display:grid;grid-template-columns:140px 72px 112px 62px 92px 92px 150px 30px;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.v2-hogar-cab{font-size:11px;font-weight:700;color:#8fa3bc;border-bottom:1px solid rgba(255,255,255,.12)}
.v2-hogar-lbl{display:none;font-size:11px;color:#8fa3bc;margin-bottom:3px}
.v2-hogar-check{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#c8d3e0}
.v2-hogar-nota{grid-column:1/-1;font-size:11.5px;color:#F59E0B}
/* La tabla mide ~806 px: cuando el área de contenido es más angosta (pantallas
de ~900 a ~1150 px, con la barra lateral), se desplaza dentro de su caja en
vez de ensanchar la página. Cada fila ocupa al menos su ancho real, para
que el borde inferior acompañe al desplazar. */
.v2-hogar-scroll{overflow-x:auto}
.v2-hogar-scroll>.v2-hogar-fila{min-width:max-content}
@media (max-width:900px){.v2-hogar-fila{grid-template-columns:repeat(3,minmax(0,1fr));padding:10px 0}.v2-hogar-scroll>.v2-hogar-fila{min-width:0}.v2-hogar-cab{display:none}.v2-hogar-lbl{display:block}}
@media (max-width:480px){.v2-hogar-fila{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ── ROADMAP AXIS (admin) ── */
.v2-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.v2-tier{display:flex;flex-direction:column}
.v2-tier-list{list-style:none;margin:0 0 12px;padding:0;flex:1}
.v2-tier-list li{display:flex;gap:8px;font-size:12.5px;line-height:1.55;color:#c4d2e2;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.v2-tier-list li:last-child{border-bottom:none}
.v2-tier-metric{display:flex;gap:8px;font-size:12px;line-height:1.55;color:#e8eef6;border:1px solid;border-radius:10px;padding:10px 12px}
@media (max-width:1100px){.v2-tiers{grid-template-columns:1fr}}
/* ── TEASER + CAPTURA DE LEADS (landing) ── */
.v2-locked{cursor:default}
.v2-lock{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.08em;color:#F2CA50;background:rgba(26,37,53,.85);border:1px solid rgba(233,186,53,.4);padding:4px 10px;border-radius:20px;z-index:1}
.v2-lead-card{max-width:860px;margin:34px auto 0;background:linear-gradient(135deg,rgba(233,186,53,.12),rgba(44,62,87,.42));border:1px solid rgba(233,186,53,.32);border-radius:22px;padding:26px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.v2-lead-card .pp-form-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.v2-lead-card .pp-form-grid{grid-template-columns:1fr 1fr}.v2-gen-grid{grid-template-columns:1fr}}
@media (max-width:560px){.v2-lead-card .pp-form-grid{grid-template-columns:1fr}}
/* Tarjeta «Activa tu cuenta con tu NPN» (portada y /solicitar-acceso): todo
centrado en columna — icono, título, texto, botón y enlace. Los campos del
formulario van en un bloque centrado pero con su texto a la izquierda (una
etiqueta centrada sobre una caja se lee peor). En móvil el botón ocupa el
ancho entero. */
.v2-activar{display:flex;flex-direction:column;align-items:center;text-align:center}
.v2-activar .v2-activar-icono{margin:0 0 12px}
.v2-activar .v2-activar-campos{width:100%;max-width:360px;text-align:left}
.v2-activar .v2-activar-btn{justify-content:center}
@media (max-width:560px){.v2-activar .v2-activar-btn{width:100%}}
/* ── BIBLIOTECA — barra de filtros ── */
/* Una fila: buscador, los dos desplegables y los dos grupos de fichas, con
un filete entre grupo y grupo. Al envolverse en estrecho el filete ya no
separa nada y estorba, así que desaparece. */
.bib-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.bib-fam{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding-left:12px;border-left:1px solid rgba(255,255,255,.12)}
@media (max-width:900px){
.bib-fam{padding-left:0;border-left:none}
}
/* ── COMENTARIOS DE AGENTES — botón flotante + formulario ── */
/* A la IZQUIERDA de .bot-fab, no encima: el panel de Axis ocupa desde
bottom:96px hacia arriba, y un botón ahí queda tapado justo cuando más
se necesita — «Axis me respondió mal» se reporta con el panel abierto.
Mismo peso visual (58px) en azul para que no se confunda con el
asistente: el oro es de Axis. */
.fb-fab{position:fixed;bottom:28px;right:98px;width:58px;height:58px;background:linear-gradient(135deg,#2E9FE0,#1B7BB5);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 26px -6px rgba(46,159,224,.55);border:none;z-index:9998;transition:transform .2s}
.fb-fab:hover{transform:scale(1.08)}
/* La etiqueta se despliega a la IZQUIERDA porque el botón vive pegado al
borde derecho. Sin eventos de puntero para que no robe el clic al botón. */
.fb-fab-lbl{position:absolute;right:calc(100% + 12px);white-space:nowrap;font-size:12px;font-weight:700;color:#e8eef6;background:rgba(22,32,46,.95);border:1px solid rgba(46,159,224,.4);padding:6px 12px;border-radius:20px;opacity:0;transform:translateX(6px);transition:opacity .18s,transform .18s;pointer-events:none;box-shadow:0 10px 24px -12px rgba(0,0,0,.8)}
.fb-fab:hover .fb-fab-lbl,.fb-fab:focus-visible .fb-fab-lbl{opacity:1;transform:translateX(0)}
/* z-index por encima de .bot-fab (9999): con el formulario abierto nada de
la interfaz debe quedar por delante. */
.fb-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px}
.fb-dim{position:absolute;inset:0;background:rgba(10,16,26,.72);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.fb-card{position:relative;z-index:1;width:520px;max-width:100%;max-height:calc(100vh - 40px);overflow-y:auto;background:rgba(22,32,46,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(46,159,224,.32);border-radius:18px;padding:20px;box-shadow:0 30px 70px -20px rgba(0,0,0,.9)}
.fb-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:20px;cursor:pointer;color:rgba(255,255,255,.7);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);transition:all .18s}
.fb-chip:hover{background:rgba(255,255,255,.09);color:#fff}
.fb-ta{min-height:132px;resize:vertical;font-family:inherit;line-height:1.6}
.fb-count{font-size:11px;color:#8fa3bc;text-align:right;margin-top:5px}
/* En estrecho solo se va la etiqueta: el tamaño se mantiene para que los dos
botones sigan pesando lo mismo, y a 58px cada uno caben de sobra en la
misma fila (28..86 el de Axis, 98..156 este). */
@media (max-width:768px){
.fb-fab-lbl{display:none}
}