:root{--bg:#080a0e;--surface:#0f1117;--surface2:#171b24;--surface3:#1e2330;--border:#252b38;--border2:#2e3547;--accent:#4f9cf9;--accent2:#7c3aed;--success:#10b981;--danger:#f43f5e;--warning:#f59e0b;--text:#eef0f6;--text2:#8892a4;--text3:#4a5468;--r:12px;--rl:18px;} *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;} body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);} /* Install banner */ .install-banner{position:fixed;bottom:16px;left:16px;right:16px;background:linear-gradient(135deg,#4f9cf9,#7c3aed);color:white;padding:14px 16px;border-radius:14px;box-shadow:0 10px 30px rgba(79,156,249,.4);z-index:9995;display:none;align-items:center;gap:12px;animation:slideInBanner .3s ease;max-width:500px;margin:0 auto;} .install-banner.show{display:flex;} .install-banner-icon{width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:15px;flex-shrink:0;} .install-banner-text{flex:1;font-size:13px;line-height:1.3;} .install-banner-text strong{display:block;font-size:14px;margin-bottom:2px;} .install-banner-btn{background:white;color:#4f9cf9;border:none;padding:8px 14px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;} .install-banner-close{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;font-size:20px;padding:0 4px;} @keyframes slideInBanner{from{transform:translateY(120px);opacity:0;}to{transform:translateY(0);opacity:1;}} /* iOS install hint */ .ios-install-hint{position:fixed;bottom:80px;left:16px;right:16px;background:var(--surface);border:1px solid var(--border);padding:16px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:9996;display:none;animation:slideInBanner .3s ease;max-width:500px;margin:0 auto;} .ios-install-hint.show{display:block;} .ios-install-hint strong{font-size:14px;color:var(--accent);display:block;margin-bottom:6px;} .ios-install-hint p{font-size:13px;color:var(--text2);line-height:1.5;} .ios-install-hint .close-hint{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--text3);cursor:pointer;font-size:20px;} /* iOS Safari: el scroll horizontal se da en (documentElement), no en body; overflow-x:hidden solo en body no lo frena. clip evita crear scroll-container (no rompe position:sticky); hidden = fallback. */ html{overflow-x:hidden;overflow-x:clip;} body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;overflow-x:hidden;overflow-x:clip;max-width:100%;} .screen{display:none!important;min-height:100vh;}.screen.active{display:block!important;} #screen-login.active{display:flex!important;align-items:center;justify-content:center;min-height:100vh;padding:20px;position:relative;overflow:hidden;} #screen-login::before{content:'';position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(79,156,249,.08) 0%,transparent 70%);top:-100px;right:-100px;pointer-events:none;} .public-access-card{display:flex;align-items:center;gap:14px;padding:18px;background:linear-gradient(135deg,rgba(79,156,249,.12),rgba(124,58,237,.12));border:1px solid rgba(79,156,249,.3);border-radius:14px;margin-bottom:24px;text-decoration:none;color:var(--text);transition:all .2s;cursor:pointer;} .public-access-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(79,156,249,.2);} .public-access-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#4f9cf9,#7c3aed);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;} .public-access-content{flex:1;min-width:0;} .public-access-title{font-family:'Syne',sans-serif;font-weight:700;font-size:16px;} .public-access-sub{font-size:12px;color:var(--text3);margin-top:2px;} .public-access-arrow{color:var(--accent);font-size:20px;} .login-divider{display:flex;align-items:center;gap:14px;margin-bottom:20px;} .login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--border);} .login-divider span{color:var(--text3);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;} .login-wrap{width:100%;max-width:420px;position:relative;z-index:1;} .brand{text-align:center;margin-bottom:40px;} .brand-logo{font-family:'Syne',sans-serif;font-size:28px;font-weight:800;background:linear-gradient(135deg,#4f9cf9,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-0.5px;line-height:1.1;} .brand-tag{font-size:12px;color:var(--text3);letter-spacing:3px;text-transform:uppercase;margin-top:4px;} .login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:32px;} .login-tabs{display:flex;background:var(--surface2);border-radius:10px;padding:4px;margin-bottom:28px;} .login-tab{flex:1;padding:9px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;color:var(--text3);text-align:center;transition:all .2s;} .login-tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.3);} .login-error{background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.2);color:#f43f5e;border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:16px;display:none;} .login-section{display:none;}.login-section.active{display:block;} #screen-app.active{display:flex!important;flex-direction:row;min-height:100vh;} .sidebar{width:240px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;transition:transform .3s;padding-top:env(safe-area-inset-top);} .sidebar-brand{padding:24px 20px;border-bottom:1px solid var(--border);} .sidebar-brand-name{font-family:'Syne',sans-serif;font-size:15px;font-weight:800;background:linear-gradient(135deg,#4f9cf9,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px;} .sidebar-automotora{font-size:12px;color:var(--text3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sidebar-nav{flex:1;padding:12px 0;overflow-y:auto;} .nav-section{padding:6px 20px 4px;font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;font-weight:600;margin-top:8px;} .nav-item{display:flex;align-items:center;gap:10px;padding:9px 20px;color:var(--text2);font-size:13.5px;font-weight:500;cursor:pointer;transition:all .15s;border-left:2px solid transparent;margin:1px 0;} .nav-item:hover{color:var(--text);background:var(--surface2);} .nav-item.active{color:var(--accent);border-left-color:var(--accent);background:rgba(79,156,249,.06);} .nav-badge{background:var(--danger);color:white;border-radius:10px;padding:1px 7px;font-size:10px;margin-left:auto;} .sidebar-footer{padding:16px 20px;border-top:1px solid var(--border);} .sidebar-user{display:flex;align-items:center;gap:10px;} .sidebar-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:white;flex-shrink:0;} .sidebar-user-info strong{display:block;font-size:13px;color:var(--text);} .sidebar-user-info span{font-size:11px;color:var(--text3);} .sidebar-logout{background:none;border:none;color:var(--text3);cursor:pointer;font-size:12px;margin-top:10px;padding:6px 0;width:100%;text-align:left;} .sidebar-logout:hover{color:var(--danger);} .sb-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;display:none;} .main{margin-left:240px;flex:1;min-width:0;padding:32px;min-height:100vh;} .page{display:none;}.page.active{display:block;} .page-header{margin-bottom:28px;display:flex;justify-content:space-between;align-items:flex-end;} .page-title{font-family:'Syne',sans-serif;font-size:28px;font-weight:700;letter-spacing:-0.5px;} .page-sub{color:var(--text3);font-size:13px;margin-top:3px;} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;} .stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;position:relative;overflow:hidden;} .stat-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--stat-color,var(--accent));opacity:.6;} .stat-card[onclick]{cursor:pointer;transition:transform .15s,border-color .15s;} .stat-card[onclick]:hover{transform:translateY(-2px);border-color:var(--accent);} .stat-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;font-weight:600;} .stat-value{font-family:'Syne',sans-serif;font-size:36px;font-weight:700;color:var(--text);margin-top:6px;line-height:1;} #gmes,#gtot{font-size:22px;} .stat-icon{position:absolute;right:16px;top:16px;font-size:24px;opacity:.1;} .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px;margin-bottom:18px;} .card-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--text3);margin-bottom:16px;} .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;} table{width:100%;border-collapse:collapse;min-width:480px;} th{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text3);padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);font-weight:600;} td{padding:12px 14px;font-size:13.5px;border-bottom:1px solid rgba(255,255,255,.03);vertical-align:middle;} tr:last-child td{border-bottom:none;}tr:hover td{background:rgba(255,255,255,.02);} .vg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .vc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:all .2s;} .vc:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3);} .vi{height:130px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:44px;position:relative;overflow:hidden;} .vib{position:absolute;top:10px;right:10px;z-index:2;} .vinfo{padding:14px;} .vname{font-weight:600;font-size:14px;font-family:'Syne',sans-serif;} .vdetail{font-size:12px;color:var(--text3);margin-top:3px;} .vprice{font-family:'DM Mono',monospace;font-size:15px;color:var(--accent);margin-top:8px;} .vact{display:flex;gap:6px;padding:0 14px 14px;} .badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;} .bg{background:rgba(16,185,129,.12);color:#10b981;}.by{background:rgba(245,158,11,.12);color:#f59e0b;} .br{background:rgba(244,63,94,.12);color:#f43f5e;}.bb{background:rgba(79,156,249,.12);color:#4f9cf9;} .bp{background:rgba(124,58,237,.12);color:#7c3aed;}.bgr{background:rgba(255,255,255,.06);color:var(--text2);} .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 20px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .15s;font-family:'DM Sans',sans-serif;touch-action:manipulation;} .btnp{background:var(--accent);color:white;}.btnp:hover{background:#3b8ef0;} .btns{background:var(--surface2);color:var(--text);border:1px solid var(--border);}.btns:hover{border-color:var(--border2);} .btnd{background:rgba(244,63,94,.12);color:#f43f5e;border:1px solid rgba(244,63,94,.2);} .btnsc{background:rgba(16,185,129,.12);color:#10b981;border:1px solid rgba(16,185,129,.2);} .bsm{padding:6px 14px;font-size:12px;border-radius:8px;}.bfull{width:100%;padding:13px;} .btn:disabled{opacity:.4;cursor:not-allowed;} .fg{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;} .fgr{display:flex;flex-direction:column;gap:6px;}.fgr.full{grid-column:1/-1;} label{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:1px;} input,select,textarea{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:11px 14px;color:var(--text);font-size:14px;font-family:'DM Sans',sans-serif;transition:border-color .15s;outline:none;-webkit-appearance:none;appearance:none;width:100%;} input[type="checkbox"],input[type="radio"]{width:18px!important;height:18px!important;padding:0!important;-webkit-appearance:auto!important;appearance:auto!important;flex-shrink:0;} input:focus,select:focus,textarea:focus{border-color:var(--accent);} select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a5468' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;} select option{background:var(--surface2);}textarea{resize:vertical;min-height:80px;font-size:13px;} .mo{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:999;display:none;align-items:flex-end;justify-content:center;backdrop-filter:blur(6px);} .mo.open{display:flex;} .modal{background:var(--surface);border:1px solid var(--border);border-radius:20px 20px 0 0;padding:26px;width:100%;max-width:100%;max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;animation:slideUp .25s ease;} .mh{width:36px;height:4px;background:var(--border2);border-radius:2px;margin:0 auto 20px;} .mhdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;} .mtitle{font-family:'Syne',sans-serif;font-size:22px;font-weight:700;} .mclose{background:var(--surface2);border:none;color:var(--text2);width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;} .mfoot{margin-top:22px;display:flex;gap:10px;flex-direction:column;} @keyframes slideUp{from{transform:translateY(100%);opacity:0;}to{transform:translateY(0);opacity:1;}} @media(min-width:768px){ .mo{align-items:center;}.modal{border-radius:var(--rl);max-width:640px;max-height:90vh;animation:fadeUp .2s ease;} .modal.mlg{max-width:800px;}.mh{display:none;}.mfoot{flex-direction:row;justify-content:flex-end;}.bfull{width:auto;} @keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}} .mhd{display:none;position:fixed;top:0;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);z-index:100;align-items:center;padding:0 16px;gap:12px;height:calc(58px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);} .mmb{background:var(--surface2);border:1px solid var(--border);border-radius:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;} .mbl{font-family:'Syne',sans-serif;font-size:18px;font-weight:800;background:linear-gradient(135deg,#4f9cf9,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .bn{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);z-index:100;padding-bottom:env(safe-area-inset-bottom);} .bni{display:flex;}.bnim{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;cursor:pointer;color:var(--text3);font-size:10px;font-weight:500;} .bnim.active{color:var(--accent);}.bnicon{font-size:19px;line-height:1;} .fab{display:none;position:fixed;bottom:calc(80px + env(safe-area-inset-bottom));right:18px;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:white;font-size:26px;border:none;cursor:pointer;z-index:99;box-shadow:0 4px 20px rgba(79,156,249,.4);align-items:center;justify-content:center;} .ml{display:none;}.mc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:10px;cursor:pointer;} .mc:active{border-color:var(--accent);}.mch{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;} .mct{font-weight:600;font-size:15px;}.mcs{font-size:12px;color:var(--text3);margin-top:2px;} .mcm{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;} .dg{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .ds{background:var(--surface2);border-radius:10px;padding:16px;} .dst{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text3);margin-bottom:12px;font-weight:600;} .dr{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:13.5px;gap:8px;} .dr:last-child{border-bottom:none;}.dr span:first-child{color:var(--text3);flex-shrink:0;}.dr span:last-child{font-weight:500;text-align:right;} .empty{text-align:center;padding:56px 20px;color:var(--text3);}.empty-icon{font-size:44px;margin-bottom:12px;opacity:.3;}.empty p{font-size:14px;} .cr{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}.cr:last-child{border-bottom:none;} .cn{font-family:'DM Mono',monospace;font-size:11px;color:var(--text3);width:58px;flex-shrink:0;} .pw{background:var(--surface2);border-radius:4px;height:5px;overflow:hidden;}.pb{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:4px;} .tabs{display:flex;gap:4px;background:var(--surface2);border-radius:10px;padding:4px;margin-bottom:18px;overflow-x:auto;} .tab{padding:7px 16px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;color:var(--text3);white-space:nowrap;}.tab.active{background:var(--surface);color:var(--text);} .notif{position:fixed;bottom:80px;left:16px;right:16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;font-size:13.5px;z-index:9999;transform:translateY(120px);transition:transform .3s;text-align:center;max-width:400px;} @media(min-width:768px){.notif{left:auto;right:24px;bottom:24px;transform:translateY(100px);}}.notif.show{transform:translateY(0);} .notif.success{border-color:var(--success);}.notif.error{border-color:var(--danger);} .loader{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.2);border-top-color:white;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;} @keyframes spin{to{transform:rotate(360deg);}} .lovo{position:fixed;inset:0;background:rgba(8,10,14,.95);z-index:9998;display:flex;align-items:center;justify-content:center;} .lovb{text-align:center;}.lovl{font-family:'Syne',sans-serif;font-size:28px;font-weight:800;background:linear-gradient(135deg,#4f9cf9,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:20px;} .bl{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto;}.lovb p{margin-top:16px;color:var(--text3);font-size:14px;} .uz{border:2px dashed var(--border);border-radius:10px;padding:18px;text-align:center;cursor:pointer;}.uz:hover{border-color:var(--accent);} .fl{margin-top:10px;display:flex;flex-direction:column;gap:7px;} .fi{display:flex;align-items:center;gap:10px;background:var(--surface2);border-radius:8px;padding:9px 12px;} .fin{font-size:12px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.fid{background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;} .dg2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px;} .di{background:var(--surface2);border-radius:9px;padding:11px;display:flex;align-items:center;gap:9px;cursor:pointer;text-decoration:none;position:relative;}.di:hover{background:var(--surface3);} .dn{font-size:11px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);} .cfm{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:24px;width:100%;max-width:380px;} .sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;} .acard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px;}.acname{font-family:'Syne',sans-serif;font-size:16px;font-weight:700;} #screen-catalogo.active{display:block!important;min-height:100vh;background:var(--bg);} #screen-marketplace.active{display:block!important;min-height:100vh;background:var(--bg);} .doc-tab{padding:10px 16px;cursor:pointer;color:var(--text3);font-size:14px;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;} .doc-tab.active{color:var(--accent);border-bottom-color:var(--accent);} .doc-tab:hover{color:var(--text);} .doc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:14px;} .doc-card-info{flex:1;min-width:0;} .doc-card-name{font-weight:600;font-size:14px;margin-bottom:3px;} .doc-card-meta{font-size:12px;color:var(--text3);} .doc-card-actions{display:flex;gap:6px;flex-shrink:0;} .doc-tipo-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;background:rgba(79,156,249,.15);color:var(--accent);margin-right:6px;} #screen-reset.active{display:block!important;min-height:100vh;background:var(--bg);} .cath{background:var(--surface);border-bottom:1px solid var(--border);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;} .catg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:24px;max-width:1200px;margin:0 auto;} .catc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:all .2s;} .catc:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.4);border-color:var(--accent);} .catimg{height:200px;background:var(--surface2);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;font-size:56px;} .catimg img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}.catinfo{padding:16px;} .catname{font-family:'Syne',sans-serif;font-size:16px;font-weight:700;}.catdet{font-size:12px;color:var(--text3);margin-top:4px;} .catprice{font-family:'DM Mono',monospace;font-size:20px;color:var(--accent);margin-top:10px;}.catcta{display:flex;gap:8px;padding:0 16px 16px;} /* LANDING PAGE */ .landing-nav{position:fixed;top:env(safe-area-inset-top);left:0;right:0;z-index:100;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(8,10,14,.92);border-bottom:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;align-items:center;padding:14px 18px;box-sizing:border-box;} .landing-nav-logo{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;background:linear-gradient(135deg,#4f9cf9,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px;} .landing-nav-actions{display:flex;gap:12px;align-items:center;} .landing-nav-link{color:var(--text2);text-decoration:none;font-size:13px;font-weight:500;padding:8px 14px;border-radius:8px;transition:all .15s;} .landing-nav-link:hover{color:var(--text);background:var(--surface);} .landing-nav-cta{background:linear-gradient(135deg,#4f9cf9,#7c3aed);color:white;text-decoration:none;font-size:13px;font-weight:600;padding:10px 18px;border-radius:10px;transition:all .15s;} .landing-nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(79,156,249,.3);} .landing-section{padding:80px 24px;position:relative;} .landing-container{max-width:1200px;margin:0 auto;} /* HERO */ .landing-hero{padding:140px 24px 80px;text-align:center;position:relative;overflow:hidden;} .landing-hero::before{content:'';position:absolute;width:800px;height:800px;background:radial-gradient(circle,rgba(79,156,249,.12) 0%,transparent 60%);top:-200px;left:50%;transform:translateX(-50%);pointer-events:none;} .landing-hero::after{content:'';position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(124,58,237,.1) 0%,transparent 60%);bottom:-100px;right:-100px;pointer-events:none;} .landing-badge{display:inline-block;background:rgba(79,156,249,.1);border:1px solid rgba(79,156,249,.3);color:var(--accent);padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:24px;position:relative;z-index:1;} .landing-h1{font-family:'Syne',sans-serif;font-size:64px;font-weight:800;line-height:1.05;letter-spacing:-2px;margin-bottom:24px;position:relative;z-index:1;} .landing-h1 .gradient{background:linear-gradient(135deg,#4f9cf9,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .landing-h-sub{font-size:19px;color:var(--text2);max-width:680px;margin:0 auto 36px;line-height:1.6;position:relative;z-index:1;} .landing-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1;} .landing-cta{padding:16px 32px;border-radius:12px;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:8px;} .landing-cta-primary{background:linear-gradient(135deg,#4f9cf9,#7c3aed);color:white;box-shadow:0 8px 24px rgba(79,156,249,.3);} .landing-cta-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(79,156,249,.4);} .landing-cta-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border);} .landing-cta-secondary:hover{border-color:var(--accent);background:var(--surface2);} /* MOCKUPS */ .landing-mockups{padding:60px 24px 80px;display:flex;justify-content:center;gap:30px;flex-wrap:wrap;align-items:flex-end;position:relative;} .landing-mockup{background:linear-gradient(135deg,#0f1117,#171b24);border:1px solid var(--border);border-radius:18px;padding:14px;box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative;} .landing-mockup-desktop{width:100%;max-width:680px;aspect-ratio:16/10;} .landing-mockup-mobile{width:240px;aspect-ratio:9/19;border-radius:30px;} .landing-mockup-screen{width:100%;height:100%;background:linear-gradient(135deg,#080a0e,#0f1117);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px;overflow:hidden;} .landing-mockup-mobile .landing-mockup-screen{border-radius:22px;} .landing-mockup-bar{height:8px;background:rgba(79,156,249,.15);border-radius:4px;} .landing-mockup-bar.short{width:30%;} .landing-mockup-bar.medium{width:60%;} .landing-mockup-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px;} .landing-mockup-card{aspect-ratio:1;background:rgba(79,156,249,.08);border:1px solid rgba(79,156,249,.15);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;} /* FEATURES */ .landing-features{background:linear-gradient(180deg,transparent,rgba(15,17,23,.5));border-top:1px solid rgba(255,255,255,.03);} .landing-section-title{font-family:'Syne',sans-serif;font-size:42px;font-weight:800;text-align:center;letter-spacing:-1px;margin-bottom:18px;} .landing-section-sub{text-align:center;font-size:17px;color:var(--text2);max-width:600px;margin:0 auto 56px;line-height:1.6;} .landing-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;} .landing-feature{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px;transition:all .2s;} .landing-feature:hover{border-color:rgba(79,156,249,.4);transform:translateY(-4px);} .landing-feature-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,rgba(79,156,249,.2),rgba(124,58,237,.2));display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px;} .landing-feature-title{font-family:'Syne',sans-serif;font-size:18px;font-weight:700;margin-bottom:10px;} .landing-feature-desc{font-size:14px;color:var(--text2);line-height:1.6;} /* TRAYECTORIA */ .landing-trayectoria{background:linear-gradient(135deg,#0f1117,#171b24);border:1px solid var(--border);border-radius:24px;padding:48px;display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;} .landing-trayectoria-photo{width:160px;height:160px;border-radius:50%;background:linear-gradient(135deg,#4f9cf9,#7c3aed);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:60px;font-weight:800;color:white;flex-shrink:0;} .landing-trayectoria-content h3{font-family:'Syne',sans-serif;font-size:26px;font-weight:700;margin-bottom:10px;} .landing-trayectoria-content .role{color:var(--accent);font-size:13px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:18px;font-weight:600;} .landing-trayectoria-content p{color:var(--text2);font-size:15px;line-height:1.7;margin-bottom:14px;} /* PLANS */ .landing-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:800px;margin:0 auto;} .landing-plan{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:32px;position:relative;transition:all .2s;} .landing-plan.featured{border-color:rgba(79,156,249,.5);background:linear-gradient(180deg,rgba(79,156,249,.08),transparent);box-shadow:0 16px 48px rgba(79,156,249,.15);} .landing-plan-badge{position:absolute;top:-12px;right:24px;background:linear-gradient(135deg,#4f9cf9,#7c3aed);color:white;padding:4px 14px;border-radius:14px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;} .landing-plan-name{font-family:'Syne',sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:2px;color:var(--accent);font-weight:600;margin-bottom:8px;} .landing-plan-title{font-family:'Syne',sans-serif;font-size:30px;font-weight:800;margin-bottom:12px;} .landing-plan-desc{color:var(--text2);font-size:14px;margin-bottom:24px;line-height:1.5;} .landing-plan-features{list-style:none;padding:0;margin:0 0 24px;} .landing-plan-features li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:14px;display:flex;align-items:center;gap:10px;} .landing-plan-features li::before{content:'✓';color:#10b981;font-weight:bold;} .landing-plan-features li:last-child{border-bottom:none;} /* CONTACTO */ .landing-contact-wrap{background:linear-gradient(135deg,#0f1117,#171b24);border:1px solid var(--border);border-radius:24px;padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;} .landing-contact-info h3{font-family:'Syne',sans-serif;font-size:34px;font-weight:800;line-height:1.1;letter-spacing:-1px;margin-bottom:18px;} .landing-contact-info p{color:var(--text2);font-size:15px;line-height:1.7;margin-bottom:24px;} .landing-contact-trial{background:linear-gradient(135deg,rgba(79,156,249,.15),rgba(124,58,237,.15));border:1px solid rgba(79,156,249,.3);border-radius:14px;padding:18px;margin-bottom:24px;} .landing-contact-trial-title{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px;} .landing-contact-trial-text{font-size:14px;color:var(--text);line-height:1.5;} .landing-contact-form{display:flex;flex-direction:column;gap:14px;} .landing-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .landing-form-field input,.landing-form-field textarea{width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:13px 14px;border-radius:10px;font-size:14px;font-family:inherit;transition:all .15s;} .landing-form-field input:focus,.landing-form-field textarea:focus{outline:none;border-color:var(--accent);background:var(--bg);} .landing-form-field textarea{resize:vertical;min-height:90px;} .landing-form-msg{padding:14px;border-radius:10px;font-size:13px;line-height:1.5;} .landing-form-msg.success{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:#10b981;} .landing-form-msg.error{background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.3);color:#f43f5e;} /* FOOTER */ .landing-footer{padding:48px 24px;border-top:1px solid var(--border);text-align:center;color:var(--text3);font-size:13px;} .landing-footer-logo{font-family:'Syne',sans-serif;font-size:20px;font-weight:800;background:linear-gradient(135deg,#4f9cf9,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;} /* MOBILE */ @media(max-width:768px){ .landing-h1{font-size:32px;letter-spacing:-.5px;line-height:1.15;} .landing-h-sub{font-size:16px;} .landing-section{padding:60px 20px;} .landing-hero{padding:120px 20px 40px;} .landing-section-title{font-size:28px;} .landing-section-sub{font-size:15px;margin-bottom:36px;} .landing-trayectoria{grid-template-columns:1fr;text-align:center;padding:32px 24px;gap:20px;} .landing-trayectoria-photo{margin:0 auto;width:120px;height:120px;font-size:46px;} .landing-contact-wrap{grid-template-columns:1fr;padding:32px 24px;gap:32px;} .landing-contact-info h3{font-size:24px;} .landing-form-row{grid-template-columns:1fr;} .landing-mockup-desktop{max-width:100%;} .landing-mockup-mobile{display:none;} .landing-nav{padding:12px 14px;} .landing-nav-logo{font-size:16px;} .landing-nav-link{display:none;} .landing-nav-cta{font-size:12px;padding:8px 14px;} .landing-cta{font-size:14px;padding:14px 20px;} .landing-badge{font-size:10px;padding:5px 12px;letter-spacing:1px;} } @media(max-width:380px){ .landing-h1{font-size:30px;} .landing-section-title{font-size:24px;} .landing-nav-logo{font-size:15px;} } #screen-landing.active{display:block!important;min-height:100vh;background:var(--bg);} /* LANDING PAGE */ .landing-nav{position:fixed;top:env(safe-area-inset-top);left:0;right:0;z-index:100;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(8,10,14,.92);border-bottom:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;align-items:center;padding:14px 18px;box-sizing:border-box;} .landing-nav-logo{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;background:linear-gradient(135deg,#4f9cf9,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px;} .landing-nav-actions{display:flex;gap:12px;align-items:center;} .landing-nav-link{color:var(--text2);text-decoration:none;font-size:13px;font-weight:500;padding:8px 14px;border-radius:8px;transition:all .15s;} .landing-nav-link:hover{color:var(--text);background:var(--surface);} .landing-nav-cta{background:linear-gradient(135deg,#4f9cf9,#7c3aed);color:white;text-decoration:none;font-size:13px;font-weight:600;padding:10px 18px;border-radius:10px;transition:all .15s;} .landing-nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(79,156,249,.3);} .landing-section{padding:80px 24px;position:relative;} .landing-container{max-width:1200px;margin:0 auto;} /* HERO */ .landing-hero{padding:140px 24px 80px;text-align:center;position:relative;overflow:hidden;} .landing-hero::before{content:'';position:absolute;width:800px;height:800px;background:radial-gradient(circle,rgba(79,156,249,.12) 0%,transparent 60%);top:-200px;left:50%;transform:translateX(-50%);pointer-events:none;} .landing-hero::after{content:'';position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(124,58,237,.1) 0%,transparent 60%);bottom:-100px;right:-100px;pointer-events:none;} .landing-badge{display:inline-block;background:rgba(79,156,249,.1);border:1px solid rgba(79,156,249,.3);color:var(--accent);padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:24px;position:relative;z-index:1;} .landing-h1{font-family:'Syne',sans-serif;font-size:64px;font-weight:800;line-height:1.05;letter-spacing:-2px;margin-bottom:24px;position:relative;z-index:1;} .landing-h1 .gradient{background:linear-gradient(135deg,#4f9cf9,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .landing-h-sub{font-size:19px;color:var(--text2);max-width:680px;margin:0 auto 36px;line-height:1.6;position:relative;z-index:1;} .landing-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1;} .landing-cta{padding:16px 32px;border-radius:12px;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:8px;} .landing-cta-primary{background:linear-gradient(135deg,#4f9cf9,#7c3aed);color:white;box-shadow:0 8px 24px rgba(79,156,249,.3);} .landing-cta-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(79,156,249,.4);} .landing-cta-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border);} .landing-cta-secondary:hover{border-color:var(--accent);background:var(--surface2);} /* MOCKUPS */ .landing-mockups{padding:60px 24px 80px;display:flex;justify-content:center;gap:30px;flex-wrap:wrap;align-items:flex-end;position:relative;} .landing-mockup{background:linear-gradient(135deg,#0f1117,#171b24);border:1px solid var(--border);border-radius:18px;padding:14px;box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative;} .landing-mockup-desktop{width:100%;max-width:680px;aspect-ratio:16/10;} .landing-mockup-mobile{width:240px;aspect-ratio:9/19;border-radius:30px;} .landing-mockup-screen{width:100%;height:100%;background:linear-gradient(135deg,#080a0e,#0f1117);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px;overflow:hidden;} .landing-mockup-mobile .landing-mockup-screen{border-radius:22px;} .landing-mockup-bar{height:8px;background:rgba(79,156,249,.15);border-radius:4px;} .landing-mockup-bar.short{width:30%;} .landing-mockup-bar.medium{width:60%;} .landing-mockup-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px;} .landing-mockup-card{aspect-ratio:1;background:rgba(79,156,249,.08);border:1px solid rgba(79,156,249,.15);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;} /* FEATURES */ .landing-features{background:linear-gradient(180deg,transparent,rgba(15,17,23,.5));border-top:1px solid rgba(255,255,255,.03);} .landing-section-title{font-family:'Syne',sans-serif;font-size:42px;font-weight:800;text-align:center;letter-spacing:-1px;margin-bottom:18px;} .landing-section-sub{text-align:center;font-size:17px;color:var(--text2);max-width:600px;margin:0 auto 56px;line-height:1.6;} .landing-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;} .landing-feature{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px;transition:all .2s;} .landing-feature:hover{border-color:rgba(79,156,249,.4);transform:translateY(-4px);} .landing-feature-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,rgba(79,156,249,.2),rgba(124,58,237,.2));display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px;} .landing-feature-title{font-family:'Syne',sans-serif;font-size:18px;font-weight:700;margin-bottom:10px;} .landing-feature-desc{font-size:14px;color:var(--text2);line-height:1.6;} /* TRAYECTORIA */ .landing-trayectoria{background:linear-gradient(135deg,#0f1117,#171b24);border:1px solid var(--border);border-radius:24px;padding:48px;display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;} .landing-trayectoria-photo{width:160px;height:160px;border-radius:50%;background:linear-gradient(135deg,#4f9cf9,#7c3aed);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:60px;font-weight:800;color:white;flex-shrink:0;} .landing-trayectoria-content h3{font-family:'Syne',sans-serif;font-size:26px;font-weight:700;margin-bottom:10px;} .landing-trayectoria-content .role{color:var(--accent);font-size:13px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:18px;font-weight:600;} .landing-trayectoria-content p{color:var(--text2);font-size:15px;line-height:1.7;margin-bottom:14px;} /* PLANS */ .landing-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:800px;margin:0 auto;} .landing-plan{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:32px;position:relative;transition:all .2s;} .landing-plan.featured{border-color:rgba(79,156,249,.5);background:linear-gradient(180deg,rgba(79,156,249,.08),transparent);box-shadow:0 16px 48px rgba(79,156,249,.15);} .landing-plan-badge{position:absolute;top:-12px;right:24px;background:linear-gradient(135deg,#4f9cf9,#7c3aed);color:white;padding:4px 14px;border-radius:14px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;} .landing-plan-name{font-family:'Syne',sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:2px;color:var(--accent);font-weight:600;margin-bottom:8px;} .landing-plan-title{font-family:'Syne',sans-serif;font-size:30px;font-weight:800;margin-bottom:12px;} .landing-plan-desc{color:var(--text2);font-size:14px;margin-bottom:24px;line-height:1.5;} .landing-plan-features{list-style:none;padding:0;margin:0 0 24px;} .landing-plan-features li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:14px;display:flex;align-items:center;gap:10px;} .landing-plan-features li::before{content:'✓';color:#10b981;font-weight:bold;} .landing-plan-features li:last-child{border-bottom:none;} /* CONTACTO */ .landing-contact-wrap{background:linear-gradient(135deg,#0f1117,#171b24);border:1px solid var(--border);border-radius:24px;padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;} .landing-contact-info h3{font-family:'Syne',sans-serif;font-size:34px;font-weight:800;line-height:1.1;letter-spacing:-1px;margin-bottom:18px;} .landing-contact-info p{color:var(--text2);font-size:15px;line-height:1.7;margin-bottom:24px;} .landing-contact-trial{background:linear-gradient(135deg,rgba(79,156,249,.15),rgba(124,58,237,.15));border:1px solid rgba(79,156,249,.3);border-radius:14px;padding:18px;margin-bottom:24px;} .landing-contact-trial-title{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px;} .landing-contact-trial-text{font-size:14px;color:var(--text);line-height:1.5;} .landing-contact-form{display:flex;flex-direction:column;gap:14px;} .landing-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .landing-form-field input,.landing-form-field textarea{width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:13px 14px;border-radius:10px;font-size:14px;font-family:inherit;transition:all .15s;} .landing-form-field input:focus,.landing-form-field textarea:focus{outline:none;border-color:var(--accent);background:var(--bg);} .landing-form-field textarea{resize:vertical;min-height:90px;} .landing-form-msg{padding:14px;border-radius:10px;font-size:13px;line-height:1.5;} .landing-form-msg.success{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:#10b981;} .landing-form-msg.error{background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.3);color:#f43f5e;} /* FOOTER */ .landing-footer{padding:48px 24px;border-top:1px solid var(--border);text-align:center;color:var(--text3);font-size:13px;} .landing-footer-logo{font-family:'Syne',sans-serif;font-size:20px;font-weight:800;background:linear-gradient(135deg,#4f9cf9,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;} /* MOBILE */ @media(max-width:768px){ .landing-h1{font-size:32px;letter-spacing:-.5px;line-height:1.15;} .landing-h-sub{font-size:16px;} .landing-section{padding:60px 20px;} .landing-hero{padding:120px 20px 40px;} .landing-section-title{font-size:28px;} .landing-section-sub{font-size:15px;margin-bottom:36px;} .landing-trayectoria{grid-template-columns:1fr;text-align:center;padding:32px 24px;gap:20px;} .landing-trayectoria-photo{margin:0 auto;width:120px;height:120px;font-size:46px;} .landing-contact-wrap{grid-template-columns:1fr;padding:32px 24px;gap:32px;} .landing-contact-info h3{font-size:24px;} .landing-form-row{grid-template-columns:1fr;} .landing-mockup-desktop{max-width:100%;} .landing-mockup-mobile{display:none;} .landing-nav{padding:12px 14px;} .landing-nav-logo{font-size:16px;} .landing-nav-link{display:none;} .landing-nav-cta{font-size:12px;padding:8px 14px;} .landing-cta{font-size:14px;padding:14px 20px;} .landing-badge{font-size:10px;padding:5px 12px;letter-spacing:1px;} } @media(max-width:380px){ .landing-h1{font-size:30px;} .landing-section-title{font-size:24px;} .landing-nav-logo{font-size:15px;} } #screen-landing.active{display:block!important;min-height:100vh;background:var(--bg);} /* LIGHTBOX */ .lightbox{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:9999;display:none;align-items:center;justify-content:center;flex-direction:column;padding:20px;} .lightbox.open{display:flex;} .lightbox-img{max-width:100%;max-height:85vh;border-radius:8px;} .lightbox-close{position:absolute;top:20px;right:20px;background:rgba(255,255,255,.15);border:none;color:white;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:22px;} .lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:none;color:white;width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:20px;} .lightbox-nav.prev{left:20px;}.lightbox-nav.next{right:20px;} .lightbox-counter{position:absolute;bottom:20px;color:white;font-size:13px;background:rgba(0,0,0,.5);padding:6px 14px;border-radius:20px;} #screen-portal.active{display:flex!important;min-height:100vh;background:var(--bg);flex-direction:column;} .porth{background:var(--surface);border-bottom:1px solid var(--border);padding:16px 20px;padding-top:calc(16px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;} .portbr{font-family:'Syne',sans-serif;font-size:18px;font-weight:800;background:linear-gradient(135deg,#4f9cf9,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .portb{flex:1;padding:20px;max-width:680px;margin:0 auto;width:100%;} .portc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:14px;} .portct{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text3);font-weight:600;margin-bottom:14px;} #screen-super.active{display:flex!important;min-height:100vh;flex-direction:column;} .suph{background:var(--surface);border-bottom:1px solid var(--border);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;} @media(max-width:767px){ /* iOS Safari hace zoom-in al enfocar un input con font-size<16px; forzar 16px en mobile lo evita. !important para vencer los font-size inline chicos (filtro Leads 12px, buscador Resumen, gcompf) y textarea 13px. Desktop queda a 14px. */ input,select,textarea{font-size:16px !important;} .sidebar{transform:translateX(-100%);bottom:calc(56px + env(safe-area-inset-bottom));}.sidebar.open{transform:translateX(0);}.sidebar.open ~ .sb-backdrop{display:block;} .main{margin-left:0;padding:16px;padding-top:calc(74px + env(safe-area-inset-top));padding-bottom:80px;} .mhd{display:flex;}.bn{display:block;}.fab{display:flex;} .page-title{font-size:22px;}.stats-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px;} .stat-card{padding:14px;}.stat-value{font-size:28px;}#gmes,#gtot,#gcant{font-size:18px;}.vg{grid-template-columns:repeat(2,1fr);gap:10px;} table{display:none;}.ml{display:block;}.page-header{flex-direction:column;align-items:flex-start;gap:10px;}.page-header .btn{display:none;}.page-header #quick-lead-btn{display:inline-flex !important;width:100%;justify-content:center;padding:14px;font-size:15px;}#page-gastos .page-header .btn{display:inline-flex;} .dg{grid-template-columns:1fr;}.catg{grid-template-columns:repeat(2,1fr);padding:14px;gap:12px;} .sgrid{grid-template-columns:1fr;}.dashgrid{grid-template-columns:1fr!important;}} @media(max-width:400px){.stats-grid{grid-template-columns:repeat(2,1fr);}.vg{grid-template-columns:1fr;}.catg{grid-template-columns:1fr;}.fg{grid-template-columns:1fr;}.fgr.full{grid-column:1;}} /* Responsive para mockups del landing */ @media (max-width: 768px){ section[style*="max-width:1200px"][style*="padding:40px 24px"] { flex-direction: column !important; padding: 30px 16px 60px !important; gap: 0 !important; } section[style*="max-width:1200px"][style*="padding:40px 24px"] > div:first-child { transform: scale(0.85); transform-origin: top center; margin-bottom: -30px; } section[style*="max-width:1200px"][style*="padding:40px 24px"] > div:nth-child(2) { margin-left: 0 !important; margin-top: -20px !important; transform: scale(0.85); } } /* Fotos del vehiculo: drag&drop, flechas, borrar */ .vf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px} .vf-item{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--surface2);border:2px solid transparent;cursor:grab;transition:all .15s} .vf-item:hover{border-color:var(--accent)} .vf-item.dragging{opacity:.4;cursor:grabbing} .vf-item.drag-over{border-color:var(--accent);background:rgba(79,156,249,.1)} .vf-item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} .vf-item-num{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.7);color:white;font-size:10px;padding:2px 6px;border-radius:10px;font-weight:600;backdrop-filter:blur(4px)} .vf-item-actions{position:absolute;top:6px;right:6px;display:flex;gap:3px;opacity:0;transition:opacity .15s} .vf-item:hover .vf-item-actions,.vf-item-actions.show-mobile{opacity:1} .vf-item-btn{background:rgba(0,0,0,.75);border:none;color:white;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);padding:0} .vf-item-btn:hover{background:rgba(255,255,255,.2)} .vf-item-btn.del:hover{background:#ef4444} @media(max-width:768px){.vf-item-actions{opacity:1}} /* ====================================== */ /* DETALLE VEHICULO ESTILO MERCADOLIBRE */ /* ====================================== */ .ml-detail{max-width:1200px;margin:0 auto;padding:24px;display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start;box-sizing:border-box} .ml-detail *{box-sizing:border-box} .ml-back{margin-bottom:16px;display:inline-flex;align-items:center;gap:8px;color:var(--text2);text-decoration:none;font-size:14px;padding:8px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:all .15s} .ml-back:hover{border-color:var(--accent);color:var(--accent)} /* GALERIA (col izquierda) */ .ml-gallery-wrap{width:100%;min-width:0} .ml-gallery{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:row;align-items:stretch;width:100%} .ml-thumbs{display:flex;flex-direction:column;gap:6px;padding:14px 8px 14px 14px;max-height:560px;overflow-y:auto;flex-shrink:0;width:80px} .ml-thumbs::-webkit-scrollbar{width:4px} .ml-thumbs::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px} .ml-thumb{width:64px;height:64px;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .15s;flex-shrink:0;background:var(--surface2)} .ml-thumb img{width:100%;height:100%;object-fit:cover;display:block} .ml-thumb.active{border-color:var(--accent)} .ml-thumb:hover{border-color:rgba(79,156,249,.5)} .ml-main-img{flex:1;background:#0a0c10;position:relative;cursor:zoom-in;min-height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden;min-width:0} .ml-main-img img{width:100%;height:auto;max-height:60vh;object-fit:contain;display:block} .ml-main-empty{font-size:80px;opacity:.3} .ml-counter{position:absolute;bottom:14px;right:14px;background:rgba(0,0,0,.75);color:white;padding:6px 12px;border-radius:14px;font-size:12px;backdrop-filter:blur(6px)} .ml-zoom-icon{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.6);color:white;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;backdrop-filter:blur(6px);pointer-events:none} .ml-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.6);color:white;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;border:none;cursor:pointer;transition:all .15s;backdrop-filter:blur(6px)} .ml-arrow:hover{background:rgba(0,0,0,.85);transform:translateY(-50%) scale(1.05)} .ml-arrow.prev{left:14px} .ml-arrow.next{right:14px} /* INFO (col derecha) */ .ml-info{position:sticky;top:20px;display:flex;flex-direction:column;gap:14px} .ml-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px} .ml-title{font-family:'Syne',sans-serif;font-size:24px;font-weight:700;line-height:1.2;margin-bottom:6px;letter-spacing:-.5px} .ml-subtitle{font-size:13px;color:var(--text3);margin-bottom:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center} .ml-subtitle span{display:inline-flex;align-items:center;gap:4px} .ml-price{font-family:'DM Mono',monospace;font-size:32px;color:var(--accent);font-weight:600;letter-spacing:-.5px;margin-bottom:18px;line-height:1} .ml-quick-specs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--border)} .ml-quick-spec{background:var(--surface2);padding:6px 12px;border-radius:18px;font-size:12px;color:var(--text2);display:inline-flex;align-items:center;gap:5px} .ml-cta{display:flex;flex-direction:column;gap:8px} .ml-cta-wa{background:#25d366;color:white;padding:14px 18px;border-radius:10px;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:all .15s;border:none;cursor:pointer} .ml-cta-wa:hover{background:#1ea854;transform:translateY(-1px);box-shadow:0 8px 20px rgba(37,211,102,.3)} .ml-cta-secondary{background:var(--surface2);color:var(--text);padding:12px 18px;border-radius:10px;font-weight:500;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:all .15s;border:1px solid var(--border)} .ml-cta-secondary:hover{border-color:var(--accent);color:var(--accent)} .ml-share{display:flex;gap:6px;margin-top:12px} .ml-share-btn{flex:1;background:transparent;border:1px solid var(--border);color:var(--text3);padding:10px;border-radius:8px;font-size:12px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:5px} .ml-share-btn:hover{border-color:var(--accent);color:var(--accent)} /* TARJETA AUTOMOTORA */ .ml-auto{display:flex;align-items:center;gap:12px;padding:14px;background:var(--surface2);border-radius:10px;margin-top:14px;text-decoration:none;color:inherit;transition:all .15s} .ml-auto:hover{background:var(--surface)} .ml-auto-logo{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#4f9cf9,#7c3aed);display:flex;align-items:center;justify-content:center;font-weight:700;color:white;font-size:18px;flex-shrink:0;overflow:hidden} .ml-auto-logo img{width:100%;height:100%;object-fit:cover} .ml-auto-info{flex:1;min-width:0} .ml-auto-name{font-weight:600;font-size:14px;margin-bottom:2px;color:var(--text)} .ml-auto-loc{font-size:12px;color:var(--text3)} /* CARACTERISTICAS Y DESCRIPCION (abajo) */ .ml-bottom{grid-column:1/-1;display:flex;flex-direction:column;gap:16px;margin-top:8px} .ml-section{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px} .ml-section h3{font-family:'Syne',sans-serif;font-size:18px;font-weight:700;margin-bottom:18px;letter-spacing:-.3px} .ml-specs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px} .ml-spec{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px} .ml-spec:last-child{border-bottom:none} .ml-spec-label{color:var(--text3);font-weight:500} .ml-spec-value{color:var(--text);font-weight:600;text-align:right} .ml-desc{font-size:14px;line-height:1.7;color:var(--text2);white-space:pre-wrap} /* RESPONSIVE */ @media(max-width:900px){ .ml-detail{grid-template-columns:1fr;padding:10px;gap:10px;width:100%;max-width:100%;overflow-x:hidden} .ml-info{position:static;width:100%;min-width:0} .ml-info > div{width:100%;min-width:0} .ml-bottom{grid-template-columns:1fr;width:100%} .ml-gallery{flex-direction:column-reverse;width:100%;align-items:stretch} .ml-thumbs{flex-direction:row;width:100%;max-height:none;padding:8px;overflow-x:auto;overflow-y:hidden;gap:6px} .ml-thumb{width:54px;height:54px;flex-shrink:0} .ml-main-img{min-height:280px;height:60vh;width:100%;display:flex;align-items:center;justify-content:center;flex:none} .ml-main-img img{object-fit:contain;width:100%;max-width:100%;height:100%;display:block} .ml-title{font-size:18px;margin-bottom:4px;word-wrap:break-word;line-height:1.3} .ml-price{font-size:24px;margin-bottom:14px} .ml-card{padding:14px;width:100%;min-width:0} .ml-section{padding:16px;width:100%;min-width:0} .ml-section h3{font-size:16px;margin-bottom:14px} .ml-quick-spec{font-size:11px;padding:5px 10px} .ml-quick-specs{flex-wrap:wrap} .ml-cta{width:100%} .ml-cta a, .ml-cta button{width:100%;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ml-cta-wa{padding:13px 12px;font-size:14px;width:100%;box-sizing:border-box} .ml-cta-secondary{padding:11px 12px;font-size:13px;width:100%;box-sizing:border-box} .ml-share{width:100%} .ml-share-btn{font-size:11px;padding:9px 6px;flex:1;min-width:0;white-space:nowrap;overflow:hidden} .ml-back{font-size:13px;padding:7px 12px;margin-bottom:10px} .ml-arrow{width:34px;height:34px;font-size:16px} .ml-arrow.prev{left:6px} .ml-arrow.next{right:6px} .ml-spec{font-size:12px;padding:8px 0} .ml-specs-grid{grid-template-columns:1fr;gap:0} .ml-auto{padding:10px;min-width:0} .ml-auto-info{min-width:0;overflow:hidden} .ml-auto-name, .ml-auto-loc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} } @media(max-width:900px){ body{overflow-x:hidden} #pub-main, #mkt-main{overflow-x:hidden;width:100%;max-width:100vw} } /* === MARKETPLACE V2 (sidebar + grid 3-col + seller badge) === */ :root{ --mkt-brand:#4f9cf9; --mkt-brand-hover:#3a8ae8; --mkt-brand-soft:rgba(79,156,249,.12); --mkt-bg:#0d0d0f; --mkt-bg-2:#16161a; --mkt-bg-card:#17171b; --mkt-bg-card-hover:#1d1d22; --mkt-line:rgba(255,255,255,.07); --mkt-line-strong:rgba(255,255,255,.12); --mkt-text:#f5f5f7; --mkt-text-2:#b4b4ba; --mkt-text-3:#76767e; --mkt-text-4:#4a4a52; --mkt-green:#22c55e; } #mkt-main{ background:var(--mkt-bg);color:var(--mkt-text); font-family:'Geist','Inter',-apple-system,sans-serif; font-size:14px;-webkit-font-smoothing:antialiased; margin:0;padding:0; } #mkt-main ::selection{background:var(--mkt-brand);color:#fff;} #mkt-main a{color:inherit;text-decoration:none;} #mkt-main button{font-family:inherit;cursor:pointer;} #mkt-main img{display:block;max-width:100%;} .mk-container{max-width:1400px;margin:0 auto;padding:0 24px;} @media(max-width:640px){.mk-container{padding:0 16px;}} /* === NAV === */ .mkn{ background:rgba(13,13,15,.92); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-bottom:1px solid var(--mkt-line); padding:14px 0;position:sticky;top:0;z-index:50; } .mkn-grid{display:flex;align-items:center;justify-content:space-between;gap:24px;} .mkn-brand{display:flex;align-items:center;gap:10px;} .mkn-logo{ width:32px;height:32px;border-radius:7px; background:var(--mkt-brand);color:#fff; display:flex;align-items:center;justify-content:center; font-weight:700;font-size:16px;letter-spacing:-.02em; } .mkn-name{font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--mkt-text);} .mkn-name span{color:var(--mkt-brand);} .mkn-links{display:flex;gap:4px;} .mkn-link{ padding:7px 13px;border-radius:6px; color:var(--mkt-text-2);font-size:13.5px;font-weight:500; transition:color .15s,background .15s; } .mkn-link:hover,.mkn-link.active{color:var(--mkt-text);background:rgba(255,255,255,.04);} .mkn-cta{ background:var(--mkt-brand);color:#fff; padding:9px 16px;border-radius:6px;font-weight:600;font-size:13px; transition:background .15s; } .mkn-cta:hover{background:var(--mkt-brand-hover);} @media(max-width:760px){.mkn-links{display:none;}} /* === HERO === */ .mk-hero{ background:linear-gradient(180deg,rgba(79,156,249,.06) 0%,transparent 70%); padding:56px 0 40px; text-align:center; border-bottom:1px solid var(--mkt-line); } .mk-hero-eyebrow{ display:inline-flex;align-items:center;gap:8px; background:var(--mkt-brand-soft);color:var(--mkt-brand); padding:6px 14px;border-radius:20px; font-size:12px;font-weight:600;letter-spacing:.02em; margin-bottom:20px; } .mk-hero-eyebrow svg{width:14px;height:14px;} .mk-hero-title{ font-size:clamp(32px,5vw,52px); font-weight:700;letter-spacing:-.03em;line-height:1.05; margin-bottom:16px;color:var(--mkt-text); } .mk-hero-title span{color:var(--mkt-brand);} .mk-hero-lead{ font-size:16px;color:var(--mkt-text-2);line-height:1.6; max-width:580px;margin:0 auto 28px; } .mk-hero-search-wrap{ max-width:680px;margin:0 auto 24px; position:relative;display:flex;gap:8px; background:var(--mkt-bg-card); border:1px solid var(--mkt-line-strong); border-radius:12px;padding:6px; transition:border-color .15s; } .mk-hero-search-wrap:focus-within{border-color:var(--mkt-brand);} .mk-hero-search-icon{ position:absolute;left:18px;top:50%;transform:translateY(-50%); width:20px;height:20px;color:var(--mkt-text-3);pointer-events:none; } .mk-hero-search-wrap input{ flex:1;background:transparent;border:none;outline:none; color:var(--mkt-text); padding:12px 12px 12px 42px; font-size:15px;font-family:inherit; } .mk-hero-search-wrap input::placeholder{color:var(--mkt-text-3);} .mk-hero-search-btn{ background:var(--mkt-brand);color:#fff;border:none; padding:0 22px;border-radius:8px;font-weight:600;font-size:14px; transition:background .15s; } .mk-hero-search-btn:hover{background:var(--mkt-brand-hover);} .mk-hero-stats{ display:flex;gap:32px;justify-content:center;flex-wrap:wrap; margin-top:8px; } .mk-hero-stat{ display:inline-flex;align-items:center;gap:8px; font-size:13px;color:var(--mkt-text-2); } .mk-hero-stat svg{width:14px;height:14px;color:var(--mkt-green);flex-shrink:0;} .mk-hero-stat strong{color:var(--mkt-text);font-weight:700;} @media(max-width:640px){ .mk-hero{padding:36px 0 28px;} .mk-hero-search-wrap{flex-direction:column;} .mk-hero-search-wrap input{padding-left:14px;} .mk-hero-search-icon{display:none;} .mk-hero-search-btn{padding:11px 22px;} .mk-hero-stats{gap:18px;font-size:12px;} } /* === QUICK FILTERS (sticky) === */ .mk-qf{ background:var(--mkt-bg); border-bottom:1px solid var(--mkt-line); padding:14px 0; position:sticky;top:60px;z-index:40; } .mk-qf-grid{display:flex;gap:8px;align-items:center;flex-wrap:wrap;} .mk-qf-label{ font-size:12px;color:var(--mkt-text-3);font-weight:500; text-transform:uppercase;letter-spacing:.05em;margin-right:6px; } .mk-qf-pill{ padding:7px 14px;border-radius:6px;font-size:12.5px;font-weight:500; background:transparent;color:var(--mkt-text-3);border:1px solid var(--mkt-line); transition:all .15s; } .mk-qf-pill:hover{color:var(--mkt-text);border-color:var(--mkt-line-strong);} .mk-qf-pill.active{background:var(--mkt-brand);color:#fff;border-color:var(--mkt-brand);} /* === MAIN (sidebar + results) === */ .mk-main{padding:24px 0 56px;} .mk-main-grid{ display:grid;grid-template-columns:260px 1fr;gap:32px; } @media(max-width:960px){ .mk-main-grid{grid-template-columns:1fr;} } /* === SIDEBAR === */ .mk-sidebar{ background:var(--mkt-bg-card); border:1px solid var(--mkt-line); border-radius:10px; padding:20px; align-self:start; position:sticky;top:118px; max-height:calc(100vh - 140px);overflow-y:auto; } .mk-sidebar-toggle{display:none;} .mk-sidebar-title{ font-size:13px;font-weight:600;color:var(--mkt-text); text-transform:uppercase;letter-spacing:.08em; margin:0 0 16px;padding-bottom:12px; border-bottom:1px solid var(--mkt-line); } @media(max-width:960px){ .mk-sidebar{ background:transparent;border:none;padding:0; position:static;max-height:none;overflow:visible; } .mk-sidebar-toggle{ display:flex;width:100%; background:var(--mkt-bg-card); border:1px solid var(--mkt-line); border-radius:10px; padding:14px 18px; color:var(--mkt-text); font-size:13px;font-weight:600; text-transform:uppercase;letter-spacing:.05em; justify-content:space-between;align-items:center; cursor:pointer; font-family:inherit; } .mk-sidebar-toggle-arrow{ color:var(--mkt-brand); transition:transform .2s; font-size:14px; } .mk-sidebar-toggle.open .mk-sidebar-toggle-arrow{ transform:rotate(180deg); } .mk-sidebar-body{ max-height:0;overflow:hidden; transition:max-height .3s ease, padding .3s ease; background:var(--mkt-bg-card); border:1px solid var(--mkt-line); border-top:none; border-radius:0 0 10px 10px; padding:0 20px; margin-top:-1px; } .mk-sidebar-body.open{ max-height:2000px; padding:20px; } .mk-sidebar-title{display:none;} } .mk-filter{margin-bottom:14px;} .mk-filter label{ display:block;font-size:11px;color:var(--mkt-text-3); text-transform:uppercase;font-weight:600;letter-spacing:.05em; margin-bottom:6px; } .mk-filter select,.mk-filter input{ width:100%;background:var(--mkt-bg); color:var(--mkt-text);border:1px solid var(--mkt-line); border-radius:6px;padding:8px 10px; font-size:13px;font-family:inherit;outline:none; transition:border-color .15s; } .mk-filter select:focus,.mk-filter input:focus{border-color:var(--mkt-brand);} .mk-range{display:grid;grid-template-columns:1fr 1fr;gap:6px;} .mk-clear{ width:100%;background:transparent;color:var(--mkt-text-3); border:1px solid var(--mkt-line);border-radius:6px; padding:9px 14px;font-size:12px;font-weight:500; transition:color .15s,border-color .15s; margin-top:6px; } .mk-clear:hover{color:var(--mkt-text);border-color:var(--mkt-line-strong);} /* === RESULTS === */ .mk-results-head{ display:flex;justify-content:space-between;align-items:center; margin-bottom:18px;gap:12px;flex-wrap:wrap; } .mk-results-count{font-size:14px;color:var(--mkt-text-2);} .mk-results-count strong{color:var(--mkt-text);font-size:16px;font-weight:700;margin-right:4px;} .mk-results-sort{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mkt-text-3);} .mk-results-sort select{ background:var(--mkt-bg-card); color:var(--mkt-text);border:1px solid var(--mkt-line); border-radius:6px;padding:7px 10px;font-size:13px;font-family:inherit;outline:none; } /* === GRID === */ .mk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} @media(max-width:1100px){.mk-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:600px){.mk-grid{grid-template-columns:1fr;}} .mk-card{ background:var(--mkt-bg-card);border:1px solid var(--mkt-line); border-radius:10px;overflow:hidden; transition:transform .2s,border-color .2s,background .2s; display:flex;flex-direction:column;cursor:pointer; } .mk-card:hover{ transform:translateY(-2px); border-color:var(--mkt-line-strong); background:var(--mkt-bg-card-hover); } .mk-card-img{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--mkt-bg);} .mk-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;} .mk-card:hover .mk-card-img img{transform:scale(1.04);} .mk-card-img-placeholder{ width:100%;height:100%; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:8px;color:var(--mkt-text-4); background:linear-gradient(135deg,var(--mkt-bg-2) 0%,var(--mkt-bg) 100%); } .mk-card-img-placeholder svg{width:44px;height:44px;opacity:.45;} .mk-card-img-placeholder span{ font-size:10px;text-transform:uppercase;letter-spacing:.1em; opacity:.55;font-weight:500; } .mk-card-tag{ position:absolute;top:10px;left:10px; padding:4px 9px;border-radius:5px; font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;z-index:1; } .mk-card-tag.km0{background:var(--mkt-brand);color:#fff;} .mk-card-tag.usado{background:rgba(0,0,0,.6);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);} .mk-card-year{ position:absolute;top:10px;right:10px; padding:4px 9px;border-radius:5px; background:rgba(0,0,0,.6);color:#fff; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;z-index:1; } .mk-card-photos{ position:absolute;bottom:10px;right:10px; background:rgba(0,0,0,.65);color:#fff; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); padding:3px 8px;border-radius:4px; font-size:10px;font-weight:500; display:flex;align-items:center;gap:4px;z-index:1; } .mk-card-photos svg{width:11px;height:11px;} .mk-card-body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1;} .mk-card-meta{ font-family:'JetBrains Mono',monospace; font-size:11px;color:var(--mkt-text-3);margin-bottom:3px; display:flex;justify-content:space-between; } .mk-card-title{ font-size:15px;font-weight:600;line-height:1.25;letter-spacing:-.01em; margin-bottom:6px;color:var(--mkt-text); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .mk-card-specs{ display:flex;gap:6px;font-size:11px;color:var(--mkt-text-3); margin-bottom:10px;flex-wrap:wrap; } .mk-card-divider{height:1px;background:var(--mkt-line);margin-bottom:10px;} /* === SELLER BADGE en cards === */ .mk-card-seller{ display:flex;align-items:center;gap:8px; background:var(--mkt-bg);border:1px solid var(--mkt-line); border-radius:7px;padding:7px 9px;margin-bottom:10px; } .mk-card-seller-logo{ width:24px;height:24px;border-radius:5px; background:#fff; display:flex;align-items:center;justify-content:center; overflow:hidden;flex-shrink:0; } .mk-card-seller-logo img{max-width:78%;max-height:78%;object-fit:contain;} .mk-card-seller-fb{ width:100%;height:100%;background:var(--mkt-brand);color:#fff; display:flex;align-items:center;justify-content:center; font-weight:700;font-size:11px; } .mk-card-seller-info{flex:1;min-width:0;} .mk-card-seller-name{ font-size:11px;font-weight:600;color:var(--mkt-text); line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .mk-card-seller-city{ font-size:10px;color:var(--mkt-text-3); line-height:1.2; } .mk-card-seller-badge{ width:18px;height:18px;border-radius:50%; background:rgba(34,197,94,.15);color:var(--mkt-green); display:flex;align-items:center;justify-content:center;flex-shrink:0; } .mk-card-seller-badge svg{width:11px;height:11px;} .mk-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;} .mk-card-price{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--mkt-text);} .mk-card-price-cur{font-size:11px;color:var(--mkt-text-3);font-weight:500;margin-right:2px;} .mk-card-action{ background:rgba(34,197,94,.1);color:#22c55e; width:32px;height:32px;border-radius:6px;border:none; display:flex;align-items:center;justify-content:center; transition:background .15s; } .mk-card-action:hover{background:rgba(34,197,94,.18);} .mk-card-action svg{width:15px;height:15px;} /* === EMPTY STATE === */ .mk-empty{ text-align:center;padding:48px 24px; color:var(--mkt-text-3);font-size:14px;grid-column:1/-1; } /* === CÓMO FUNCIONA === */ .mk-how{ background:var(--mkt-bg-2); border-top:1px solid var(--mkt-line); border-bottom:1px solid var(--mkt-line); padding:64px 0; } .mk-how-title{ font-size:clamp(26px,3vw,34px); font-weight:700;letter-spacing:-.025em;line-height:1.15; text-align:center;margin:0 0 36px;color:var(--mkt-text); } .mk-how-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px; } @media(max-width:820px){.mk-how-grid{grid-template-columns:1fr;}} .mk-how-step{ background:var(--mkt-bg-card);border:1px solid var(--mkt-line); border-radius:12px;padding:28px; position:relative; } .mk-how-num{ font-family:'JetBrains Mono',monospace; font-size:32px;font-weight:700;color:var(--mkt-brand); margin-bottom:14px;letter-spacing:-.02em;line-height:1; } .mk-how-step h3{ font-size:17px;font-weight:600;letter-spacing:-.01em; color:var(--mkt-text);margin:0 0 10px; } .mk-how-step p{ font-size:13.5px;color:var(--mkt-text-2);line-height:1.65;margin:0; } .mk-how-note{ text-align:center; margin-top:32px; font-size:13px;color:var(--mkt-text-3); font-style:italic; } /* === FOOTER === */ .mk-footer{ background:var(--mkt-bg); border-top:1px solid var(--mkt-line); padding:48px 0 24px; } .mk-footer-grid{ display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:32px; } @media(max-width:900px){.mk-footer-grid{grid-template-columns:1fr 1fr;gap:32px;}} @media(max-width:520px){.mk-footer-grid{grid-template-columns:1fr;}} .mk-footer-brand{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--mkt-text);margin-bottom:10px;} .mk-footer-brand span{color:var(--mkt-brand);} .mk-footer-tag{font-size:13px;color:var(--mkt-text-3);max-width:300px;line-height:1.6;margin:0;} .mk-footer-col h4{ font-size:12px;font-weight:600;color:var(--mkt-text-3); text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px; } .mk-footer-col a{ display:block;color:var(--mkt-text-2);font-size:13px;line-height:1.9; transition:color .15s; } .mk-footer-col a:hover{color:var(--mkt-brand);} .mk-footer-disclaimer{ background:var(--mkt-bg-2); border:1px solid var(--mkt-line); border-radius:10px; padding:18px 22px; font-size:12.5px;line-height:1.7; color:var(--mkt-text-3); margin-bottom:24px; } .mk-footer-disclaimer a{color:var(--mkt-brand);} .mk-footer-disclaimer a:hover{text-decoration:underline;} .mk-footer-bottom{ border-top:1px solid var(--mkt-line);padding-top:20px; font-size:12px;color:var(--mkt-text-4); } /* === CATÁLOGO PÚBLICO V2 (concesionaria oficial) === */ body.pub-brand-active{ --pb-brand:#e63946; --pb-bg:#0d0d0f; --pb-bg-2:#16161a; --pb-bg-card:#17171b; --pb-bg-card-hover:#1d1d22; --pb-line:rgba(255,255,255,.07); --pb-line-strong:rgba(255,255,255,.12); --pb-text:#f5f5f7; --pb-text-2:#b4b4ba; --pb-text-3:#76767e; --pb-text-4:#4a4a52; --pb-green:#22c55e; background:var(--pb-bg);color:var(--pb-text); font-family:'Geist','Inter',-apple-system,BlinkMacSystemFont,sans-serif; font-size:14px;-webkit-font-smoothing:antialiased; } body.pub-brand-active ::selection{background:var(--pb-brand);color:#fff;} body.pub-brand-active a{color:inherit;text-decoration:none;} body.pub-brand-active button{font-family:inherit;cursor:pointer;} body.pub-brand-active img{display:block;max-width:100%;} body.pub-brand-active #pub-main{margin:0;padding:0;} .pb-container{max-width:1400px;margin:0 auto;padding:0 24px;} @media(max-width:640px){.pb-container{padding:0 16px;}} /* === BANNER (arriba del todo) === */ .pb-banner{ position:relative;width:100%;height:300px;overflow:hidden; background:linear-gradient(135deg,var(--pb-brand) 0%,#161616 100%); border-bottom:1px solid var(--pb-line); } @media(max-width:768px){.pb-banner{height:200px;}} .pb-banner.has-image{background-size:cover;background-position:center;} .pb-banner:not(.has-image)::before{ content:'';position:absolute;inset:0; background-image:radial-gradient(circle at 25% 35%,rgba(255,255,255,.06) 0%,transparent 30%),radial-gradient(circle at 75% 65%,rgba(255,255,255,.04) 0%,transparent 30%); } .pb-banner:not(.has-image)::after{ content:'';position:absolute;inset:0; background-image:repeating-linear-gradient(45deg,transparent,transparent 35px,rgba(255,255,255,.02) 35px,rgba(255,255,255,.02) 36px); } .pb-banner-content{ position:absolute;bottom:0;left:0;right:0; padding:0 24px 26px;display:flex;align-items:flex-end; justify-content:space-between;gap:24px;flex-wrap:wrap;z-index:1; } @media(max-width:640px){.pb-banner-content{padding:0 16px 18px;}} .pb-banner-brand{display:flex;align-items:flex-end;gap:18px;} .pb-banner-logo{ width:96px;height:96px;border-radius:14px;background:#fff; display:flex;align-items:center;justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.4);flex-shrink:0;overflow:hidden; } .pb-banner-logo img{max-width:78%;max-height:78%;object-fit:contain;} .pb-banner-logo-fb{ width:100%;height:100%;background:var(--pb-brand);color:#fff; display:flex;align-items:center;justify-content:center; font-weight:700;font-size:42px;letter-spacing:-.04em; } @media(max-width:640px){ .pb-banner-logo{width:64px;height:64px;border-radius:10px;} .pb-banner-logo-fb{font-size:30px;} } .pb-banner-text{padding-bottom:6px;color:#fff;} .pb-banner-name{ font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1; text-shadow:0 2px 8px rgba(0,0,0,.4); } @media(max-width:640px){.pb-banner-name{font-size:20px;}} .pb-banner-meta{ display:flex;gap:14px;align-items:center;margin-top:8px; font-size:13px;color:rgba(255,255,255,.85); text-shadow:0 1px 4px rgba(0,0,0,.5);flex-wrap:wrap; } @media(max-width:640px){.pb-banner-meta{font-size:11px;gap:10px;}} .pb-banner-sep{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.5);} .pb-banner-actions{display:flex;gap:8px;align-items:center;padding-bottom:6px;} .pb-banner-action{ display:inline-flex;align-items:center;gap:6px; padding:9px 14px;border-radius:8px; background:rgba(255,255,255,.1);color:#fff; backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.15); font-size:13px;font-weight:500;transition:background .15s; } .pb-banner-action:hover{background:rgba(255,255,255,.18);} .pb-banner-action svg{width:14px;height:14px;} .pb-banner-action.primary{background:var(--pb-brand);border-color:var(--pb-brand);} .pb-banner-action.primary:hover{filter:brightness(.92);background:var(--pb-brand);} .pb-banner-badge{ position:absolute;top:18px;right:24px; background:rgba(0,0,0,.4);backdrop-filter:blur(12px); color:#fff;font-size:11px;font-weight:600; padding:6px 12px;border-radius:20px; border:1px solid rgba(255,255,255,.15); display:inline-flex;align-items:center;gap:6px;z-index:1;letter-spacing:.02em; } .pb-banner-badge svg{width:13px;height:13px;color:var(--pb-green);} @media(max-width:640px){ .pb-banner-badge{top:12px;right:16px;font-size:10px;padding:5px 10px;} } /* === NAV sticky === */ .pbn{ background:rgba(13,13,15,.92);backdrop-filter:blur(20px); border-bottom:1px solid var(--pb-line); padding:14px 24px;position:sticky;top:0;z-index:50; display:flex;align-items:center;justify-content:space-between;gap:24px; } @media(max-width:640px){.pbn{padding:14px 16px;}} .pbn-brand{display:flex;align-items:center;gap:10px;} .pbn-logo{ width:36px;height:36px;border-radius:7px;background:#fff; display:flex;align-items:center;justify-content:center; overflow:hidden;flex-shrink:0; } .pbn-logo img{max-width:78%;max-height:78%;object-fit:contain;} .pbn-logo-fb{ width:100%;height:100%;background:var(--pb-brand);color:#fff; display:flex;align-items:center;justify-content:center; font-weight:700;font-size:16px;letter-spacing:-.02em; } .pbn-name{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--pb-text);} .pbn-links{display:flex;gap:4px;align-items:center;} .pbn-links a{ padding:7px 13px;border-radius:6px; color:var(--pb-text-2);font-size:13.5px;font-weight:500; transition:color .15s,background .15s; } .pbn-links a:hover{color:var(--pb-text);background:rgba(255,255,255,.04);} .pbn-cta{ background:var(--pb-brand);color:#fff; padding:9px 16px;border-radius:6px;font-weight:600;font-size:13px; transition:filter .15s; } .pbn-cta:hover{filter:brightness(.92);} @media(max-width:880px){.pbn-links{display:none;}} /* === HERO búsqueda compacto === */ .pb-hero-search{ background:linear-gradient(180deg,rgba(13,13,15,.5) 0%,transparent 100%); padding:24px 0 18px;border-bottom:1px solid var(--pb-line); } .pb-hero-search-wrap{max-width:760px;margin:0 auto;position:relative;} .pb-hero-search-icon{ position:absolute;left:16px;top:50%;transform:translateY(-50%); width:18px;height:18px;color:var(--pb-text-3);pointer-events:none; } .pb-hero-search-wrap input{ width:100%;background:var(--pb-bg-card); border:1px solid var(--pb-line-strong); color:var(--pb-text);padding:13px 16px 13px 44px; border-radius:10px;font-size:14px;font-family:inherit;outline:none; transition:border-color .15s; } .pb-hero-search-wrap input:focus{border-color:var(--pb-brand);} .pb-hero-search-wrap input::placeholder{color:var(--pb-text-3);} /* === SECTION === */ .pb-section{padding:32px 0 56px;} .pb-sec-head{ display:flex;justify-content:space-between;align-items:flex-end; margin-bottom:18px;gap:18px;flex-wrap:wrap; } .pb-sec-title{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--pb-text);margin:0;} .pb-sec-sub{font-size:13px;color:var(--pb-text-3);margin-top:4px;} /* === FILTERS === */ .pb-filters-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px;} .pb-filter-pills{display:flex;gap:6px;flex-wrap:wrap;} .pb-filter-pill{ padding:7px 14px;border-radius:6px;font-size:12.5px;font-weight:500; background:transparent;color:var(--pb-text-3);border:1px solid var(--pb-line); transition:all .15s; } .pb-filter-pill:hover{color:var(--pb-text);border-color:var(--pb-line-strong);} .pb-filter-pill.active{background:var(--pb-brand);color:#fff;border-color:var(--pb-brand);} .pb-filters-toggle{ background:var(--pb-bg-card);border:1px solid var(--pb-line); border-radius:8px;padding:10px 14px; display:flex;justify-content:space-between;align-items:center; cursor:pointer;color:var(--pb-text-2);font-size:13px;font-weight:500; margin-bottom:14px; } .pb-filters-toggle:hover{border-color:var(--pb-line-strong);} .pb-filters-toggle-arrow{transition:transform .2s;font-size:14px;} .pb-filters-toggle.open .pb-filters-toggle-arrow{transform:rotate(180deg);} .pb-filters-collapsible{ max-height:0;overflow:hidden; transition:max-height .3s ease,margin .3s; } .pb-filters-collapsible.open{max-height:1000px;margin-bottom:20px;} .pb-filters-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px; padding:16px;background:var(--pb-bg-card);border:1px solid var(--pb-line);border-radius:8px; } .pb-filter label{ display:block;font-size:11px;color:var(--pb-text-3); text-transform:uppercase;font-weight:600;letter-spacing:.05em;margin-bottom:5px; } .pb-filter select,.pb-filter input{ width:100%;background:var(--pb-bg); color:var(--pb-text);border:1px solid var(--pb-line); border-radius:6px;padding:8px 10px; font-size:13px;font-family:inherit;outline:none; } .pb-filter select:focus,.pb-filter input:focus{border-color:var(--pb-brand);} .pb-filter-range{display:grid;grid-template-columns:1fr 1fr;gap:6px;} .pb-clear{ background:transparent;color:var(--pb-text-3); border:1px solid var(--pb-line);border-radius:6px; padding:8px 14px;font-size:12px;font-weight:500; transition:color .15s,border-color .15s; } .pb-clear:hover{color:var(--pb-text);border-color:var(--pb-line-strong);} .pb-count{font-size:13px;color:var(--pb-text-3);margin-bottom:14px;} /* === GRID 4 columnas === */ .pb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} @media(max-width:1100px){.pb-grid{grid-template-columns:repeat(3,1fr);}} @media(max-width:820px){.pb-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:480px){.pb-grid{grid-template-columns:1fr;}} .pb-card{ background:var(--pb-bg-card);border:1px solid var(--pb-line); border-radius:10px;overflow:hidden; transition:transform .2s,border-color .2s,background .2s; display:flex;flex-direction:column;cursor:pointer; text-decoration:none;color:inherit; } .pb-card:hover{ transform:translateY(-2px); border-color:var(--pb-line-strong); background:var(--pb-bg-card-hover); } .pb-card-img{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--pb-bg);} .pb-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;} .pb-card:hover .pb-card-img img{transform:scale(1.04);} .pb-card-tag{ position:absolute;top:10px;left:10px; padding:4px 9px;border-radius:5px; font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;z-index:1; } .pb-card-tag.km0{background:var(--pb-brand);color:#fff;} .pb-card-tag.usado{background:rgba(0,0,0,.6);color:#fff;backdrop-filter:blur(8px);} .pb-card-year{ position:absolute;top:10px;right:10px; padding:4px 9px;border-radius:5px; background:rgba(0,0,0,.6);color:#fff;backdrop-filter:blur(8px); font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;z-index:1; } .pb-card-photos{ position:absolute;bottom:10px;right:10px; background:rgba(0,0,0,.65);backdrop-filter:blur(8px); color:#fff;padding:3px 8px;border-radius:4px; font-size:10px;font-weight:500; display:flex;align-items:center;gap:4px;z-index:1; } .pb-card-photos svg{width:11px;height:11px;} .pb-card-body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1;} .pb-card-meta{ font-family:'JetBrains Mono',monospace; font-size:11px;color:var(--pb-text-3);margin-bottom:3px; display:flex;justify-content:space-between; } .pb-card-title{ font-size:15px;font-weight:600;line-height:1.25;letter-spacing:-.01em; margin-bottom:3px;color:var(--pb-text); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .pb-card-version{ font-size:12px;color:var(--pb-text-3);font-weight:400;margin-bottom:10px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .pb-card-specs{ display:flex;gap:10px;font-size:11px;color:var(--pb-text-3); margin-bottom:12px;flex-wrap:wrap; } /* === Placeholder card sin foto === */ .pb-card-img-placeholder{ width:100%;height:100%; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:8px;color:var(--pb-text-4); background:linear-gradient(135deg,var(--pb-bg-2) 0%,var(--pb-bg) 100%); } .pb-card-img-placeholder svg{width:44px;height:44px;opacity:.45;} .pb-card-img-placeholder span{ font-size:10px;text-transform:uppercase;letter-spacing:.1em; opacity:.55;font-weight:500; } /* === Spec individual (chip de texto) === */ .pb-card-spec{display:inline-flex;align-items:center;} .pb-card-spec + .pb-card-spec::before{ content:"·";margin:0 6px;opacity:.5; } .pb-card-divider{height:1px;background:var(--pb-line);margin-bottom:10px;} .pb-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;} .pb-card-price{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--pb-text);} .pb-card-price-cur{font-size:11px;color:var(--pb-text-3);font-weight:500;margin-right:2px;} .pb-card-action{ background:rgba(34,197,94,.1);color:#22c55e; width:32px;height:32px;border-radius:6px;border:none; display:flex;align-items:center;justify-content:center; transition:background .15s; } .pb-card-action:hover{background:rgba(34,197,94,.18);} .pb-card-action svg{width:15px;height:15px;} /* === SERVICIOS === */ .pb-services-section{ background:var(--pb-bg-2); border-top:1px solid var(--pb-line); border-bottom:1px solid var(--pb-line); padding:48px 0; } .pb-services-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px; } .pb-service-block{ padding:24px;background:var(--pb-bg-card); border:1px solid var(--pb-line);border-radius:10px; } .pb-service-icon{ width:42px;height:42px;border-radius:8px; background:rgba(230,57,70,.12);color:var(--pb-brand); display:flex;align-items:center;justify-content:center;margin-bottom:14px; } .pb-service-icon svg{width:20px;height:20px;} .pb-service-title-new{font-size:15px;font-weight:600;color:var(--pb-text);letter-spacing:-.01em;line-height:1.4;} /* === CTA === */ .pb-cta-section{padding:48px 24px;text-align:center;} .pb-cta-content{max-width:680px;margin:0 auto;} .pb-cta-section h2{ font-size:clamp(22px,2.4vw,28px); font-weight:700;letter-spacing:-.025em;line-height:1.15; margin-bottom:14px;color:var(--pb-text); } .pb-lead{font-size:15px;color:var(--pb-text-2);line-height:1.6;margin-bottom:24px;} .pb-cta-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;} .pb-btn-primary,.pb-btn-secondary{ display:inline-flex;align-items:center;gap:8px; padding:12px 22px;border-radius:8px;font-weight:600;font-size:14px; transition:all .15s; } .pb-btn-primary{background:var(--pb-brand);color:#fff;} .pb-btn-primary:hover{filter:brightness(.92);} .pb-btn-secondary{ background:transparent;color:var(--pb-text); border:1px solid var(--pb-line-strong); } .pb-btn-secondary:hover{border-color:var(--pb-brand);color:var(--pb-brand);} /* === FOOTER === */ .pb-footer{background:var(--pb-bg);border-top:1px solid var(--pb-line);padding:44px 0 22px;} .pb-footer-inner{max-width:1400px;margin:0 auto;padding:0 24px;} @media(max-width:640px){.pb-footer-inner{padding:0 16px;}} .pb-footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:32px;} @media(max-width:900px){.pb-footer-cols{grid-template-columns:1fr 1fr;gap:32px;}} @media(max-width:520px){.pb-footer-cols{grid-template-columns:1fr;}} .pb-footer-brand{font-size:17px;font-weight:700;margin-bottom:10px;letter-spacing:-.02em;color:var(--pb-text);} .pb-footer-tag{font-size:13px;color:var(--pb-text-3);max-width:280px;line-height:1.6;} .pb-footer-col h4{ font-size:12px;font-weight:600;color:var(--pb-text-3); text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px; } .pb-footer-col a,.pb-footer-col p{ display:block;color:var(--pb-text-2);font-size:13px;line-height:1.9;transition:color .15s; } .pb-footer-col a:hover{color:var(--pb-brand);} .pb-footer-bottom-new{ border-top:1px solid var(--pb-line);padding-top:20px; display:flex;justify-content:space-between;align-items:center; font-size:12px;color:var(--pb-text-4);flex-wrap:wrap;gap:12px; } /* === PUB-BACK (preservar — solo re-skin) === */ .pub-back{ position:fixed;top:16px;left:16px;z-index:100; background:rgba(0,0,0,.5);backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.15); color:#fff;padding:8px 14px;border-radius:6px; font-size:13px;font-weight:500;cursor:pointer; } .pub-back:hover{background:rgba(0,0,0,.7);} /* === EMPTY STATE === */ .pb-empty{ text-align:center;padding:48px 24px; color:var(--pb-text-3);font-size:14px;grid-column:1/-1; } /* DETALLE veh redesign */ body.pub-brand-active .pbd{padding:40px 0 80px;} body.pub-brand-active .pbd-grid{ display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start; } @media(max-width:900px){body.pub-brand-active .pbd-grid{grid-template-columns:1fr;gap:32px;}} /* min-width:0 evita el grid blowout: sin esto el ancho intrinseco de la foto infla el track 1fr */ body.pub-brand-active .pbd-grid>*{min-width:0;} .pbd-gallery{display:flex;flex-direction:column;gap:14px;position:sticky;top:90px;} .pbd-main-img{ position:relative;aspect-ratio:4/3;background:#000; border-radius:14px;overflow:hidden;border:1px solid var(--pb-line); } .pbd-main-img img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;} .pbd-zoom-icon{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.6);color:white;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;backdrop-filter:blur(6px);pointer-events:none;z-index:1;} .pbd-arrow{ position:absolute;top:50%;transform:translateY(-50%); width:42px;height:42px;border-radius:50%; background:rgba(0,0,0,.55);backdrop-filter:blur(8px); border:1px solid rgba(244,241,234,.15);color:#fff;cursor:pointer; display:flex;align-items:center;justify-content:center; font-size:22px;line-height:0;z-index:1;transition:background .2s; } .pbd-arrow:hover{background:rgba(0,0,0,.8);} .pbd-arrow.prev{left:14px;} .pbd-arrow.next{right:14px;} .pbd-counter{ position:absolute;bottom:14px;right:14px;z-index:1; background:rgba(0,0,0,.6);color:#fff;padding:5px 11px;border-radius:20px; font-size:11px;font-family:'DM Mono',monospace;letter-spacing:.05em; } .pbd-thumbs{ display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; padding-bottom:8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .pbd-thumbs::-webkit-scrollbar{height:6px;} .pbd-thumbs::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:3px; } .pbd-thumb{ flex:0 0 80px; height:60px; border-radius:8px; overflow:hidden; cursor:pointer; border:2px solid transparent; background:#000; transition:border-color .2s,opacity .2s; opacity:.6; scroll-snap-align:start; } .pbd-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .pbd-thumb.active{border-color:var(--pb-brand);opacity:1;} .pbd-thumb:hover{opacity:1;} .pbd-info{padding-top:8px;} .pbd-eyebrow{margin-bottom:14px;font-family:'DM Mono',monospace;font-size:11px;color:var(--pb-text-3);text-transform:uppercase;letter-spacing:.18em;display:flex;gap:10px;align-items:center;} .pbd-eyebrow::before{content:'';width:24px;height:1px;background:var(--pb-brand);} .pbd-title{ font-family:'Geist','Inter',-apple-system,sans-serif; font-size:clamp(28px,4vw,40px); font-weight:700; letter-spacing:-.02em; color:var(--pb-text); font-style:normal; line-height:1.1; margin:0 0 8px; } .pbd-subtitle{color:var(--pb-text-3);font-family:'DM Mono',monospace;font-size:13px;letter-spacing:.05em;margin-bottom:28px;} .pbd-price-block{display:flex;align-items:flex-end;gap:10px;padding-bottom:24px;border-bottom:1px solid var(--pb-line);margin-bottom:28px;} .pbd-price-cur{font-family:'DM Mono',monospace;font-size:13px;color:var(--pb-text-3);margin-bottom:8px;letter-spacing:.1em;} .pbd-price{ font-family:'Geist','Inter',-apple-system,sans-serif; font-size:clamp(36px,5vw,52px); font-weight:700; letter-spacing:-.02em; color:var(--pb-text); font-style:normal; line-height:1; } .pbd-specs-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:28px;border:1px solid var(--pb-line);border-radius:12px;overflow:hidden;background:var(--pb-bg-2);} .pbd-spec{padding:18px 20px;border-right:1px solid var(--pb-line);border-bottom:1px solid var(--pb-line);} .pbd-spec:nth-child(2n){border-right:none;} .pbd-spec:nth-last-child(-n+2){border-bottom:none;} .pbd-spec-label{font-family:'DM Mono',monospace;font-size:10px;color:var(--pb-text-3);text-transform:uppercase;letter-spacing:.15em;margin-bottom:6px;} .pbd-spec-value{font-size:15px;color:var(--pb-text);font-weight:500;} .pbd-description-block{background:var(--pb-bg-2);border:1px solid var(--pb-line);border-radius:12px;padding:20px;margin-bottom:28px;font-size:14px;line-height:1.7;color:var(--pb-text-2);white-space:pre-wrap;} .pbd-cta-stack{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;} .pbd-cta-wa{ background:#25d366;color:#fff;padding:16px 22px;border-radius:10px;font-weight:600;font-size:15px; display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .2s,box-shadow .2s; } .pbd-cta-wa:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(37,211,102,.25);} .pbd-cta-secondary{ background:var(--pb-bg-2);color:var(--pb-text);border:1px solid var(--pb-line-strong); padding:14px 22px;border-radius:10px;font-weight:500;font-size:14px; display:flex;align-items:center;justify-content:center;gap:8px;transition:border-color .2s; cursor:pointer;font-family:inherit; } .pbd-cta-secondary:hover{border-color:var(--pb-brand);} .pbd-share{display:flex;gap:8px;} .pbd-share-btn{ flex:1;background:transparent;border:1px solid var(--pb-line);color:var(--pb-text-2); padding:10px 14px;border-radius:8px;font-size:12px;cursor:pointer;font-family:inherit; display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s; } .pbd-share-btn:hover{color:var(--pb-text);border-color:var(--pb-text-3);} /* === HISTORIAL === */ .hist-filters{ display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px; padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:8px; } .hist-filters select,.hist-filters input{ background:var(--surface2);border:1px solid var(--border);color:var(--text); padding:8px 12px;border-radius:6px;font-size:13px; } .hist-table-wrap{ background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:auto; } .hist-table{width:100%;border-collapse:collapse;font-size:13px;} .hist-table th{ text-align:left;padding:12px 14px;background:var(--surface2); color:var(--text2);font-weight:600;font-size:11px; text-transform:uppercase;letter-spacing:.05em; border-bottom:1px solid var(--border); } .hist-table td{ padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text); } .hist-table tr:last-child td{border-bottom:none;} .hist-table tr:hover{background:var(--surface2);} .hist-cell-date{font-family:'JetBrains Mono','DM Mono',monospace;font-size:12px;color:var(--text2);white-space:nowrap;} .hist-loading{text-align:center;padding:30px;color:var(--text3);font-style:italic;} .hist-badge{ display:inline-block;padding:3px 10px;border-radius:12px; font-size:11px;font-weight:600;letter-spacing:.02em; } .hist-badge.badge-ok{background:rgba(34,197,94,.15);color:#22c55e;} .hist-badge.badge-warn{background:rgba(234,179,8,.15);color:#eab308;} .hist-badge.badge-err{background:rgba(239,68,68,.15);color:#ef4444;} .hist-pager{ display:flex;justify-content:center;align-items:center;gap:14px; margin-top:20px;padding:14px; } .hist-pager-info{font-size:13px;color:var(--text2);} .hist-diff-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px;} .hist-diff-table th,.hist-diff-table td{ padding:8px 12px;border-bottom:1px solid var(--border);text-align:left; vertical-align:top; } .hist-diff-table th{background:var(--surface2);font-weight:600;font-size:11px;text-transform:uppercase;color:var(--text2);} .hist-diff-old{color:#ef4444;font-family:'JetBrains Mono',monospace;font-size:12px;word-break:break-all;} .hist-diff-new{color:#22c55e;font-family:'JetBrains Mono',monospace;font-size:12px;word-break:break-all;} .hist-detail-modal{max-width:760px;width:90vw;max-height:85vh;overflow:auto;} .hist-detail-meta{color:var(--text2);font-size:13px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border);} /* === REDES SOCIALES === */ .redes-modal{max-width:900px;width:95vw;max-height:90vh;overflow:auto;} .redes-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:20px;} @media(max-width:760px){.redes-grid{grid-template-columns:1fr;}} .redes-plantilla-label,.redes-caption-label,.redes-hashtags-label{ font-size:11px;color:var(--text3);text-transform:uppercase; letter-spacing:.05em;font-weight:600;margin-bottom:10px; } .redes-plantillas{display:flex;gap:10px;margin-bottom:14px;} .redes-plantilla{ flex:1;cursor:pointer;text-align:center; padding:6px;border-radius:8px;border:2px solid transparent; transition:border-color .15s,background .15s; } .redes-plantilla:hover{background:var(--surface2);} .redes-plantilla.selected{border-color:var(--accent);} .redes-preview-canvas{ width:100%;aspect-ratio:9/16;background:#0d0d0f;border-radius:6px;display:block; } .redes-plantilla-name{ font-size:12px;color:var(--text2);margin-top:6px;font-weight:500; } .redes-recommended{color:#eab308;} .redes-rec-reason{ font-size:12px;color:var(--text3);font-style:italic; padding:8px 12px;background:var(--surface);border-radius:6px; min-height:20px; } .redes-caption-text{ width:100%;background:var(--surface2);border:1px solid var(--border); color:var(--text);padding:10px 12px;border-radius:6px;font-size:14px; font-family:inherit;resize:vertical; } .redes-hashtags{ display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px; min-height:30px; } .redes-hashtag-pill{ background:var(--surface2);border:1px solid var(--border); padding:4px 10px;border-radius:14px;font-size:12px;color:var(--accent); } .redes-actions{display:flex;gap:8px;flex-wrap:wrap;} .redes-footer{ display:flex;align-items:center;justify-content:space-between;gap:14px; flex-wrap:wrap; } .redes-hint{font-size:11px;color:var(--text3);} /* ===== VENDE TU AUTO (publico) — era el segundo