@font-face{ font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/poppins-0.ttf') format('truetype'); } @font-face{ font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/poppins-1.ttf') format('truetype'); } @font-face{ font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/poppins-2.ttf') format('truetype'); } @font-face{ font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/poppins-3.ttf') format('truetype'); } 500; 600; 700; 800&display=swap'); :root{ --bg:#f7f8fa; --ink:#222432; --muted:#727582; --line:#e8e9ef; --purple:#10121f; --lav:#fff1e8; --lime:#fff1e8; --green:#3d7455; --white:#fff; --shadow:0 12px 40px #29224d0b} *{ box-sizing:border-box} body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Poppins',sans-serif; font-size:14px} button,input,select,textarea{ font:inherit} button,a,input,select,textarea{ outline-offset:4px} button{ cursor:pointer} a{ color:inherit} button{ border:0} button:disabled{ cursor:not-allowed; opacity:.5} h1,h2,h3,h4,.logo{ font-family:Poppins,sans-serif} h1,h2,h3,p{ margin-top:0} h1{ font-size:32px; line-height:1.25; letter-spacing:-1.3px} h2{ font-size:22px; letter-spacing:-.6px} h3{ font-size:16px} p{ line-height:1.65} svg{ vertical-align:middle} .icon{ width:20px; height:20px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round} .sidebar{ position:fixed; inset:0 auto 0 0; width:238px; background:white; border-right:1px solid var(--line); padding:32px 21px 22px; display:flex; flex-direction:column; z-index:20} .logo{ font-size:43px; font-weight:800; letter-spacing:-3px; text-decoration:none; display:flex; align-items:center; gap:4px; color:var(--purple)} .logo-mark{ display:inline-flex; align-items:center; justify-content:center; width:35px; height:35px; border-radius:50%; background:var(--lime); margin:5px 0 0 3px; transform:rotate(-15deg); color:#303543} .logo-mark .icon{ width:23px; height:23px} .tagline{ font-size:11px; color:var(--muted); margin:4px 0 40px 2px; letter-spacing:.3px} .nav-label{ font-size:10px; text-transform:uppercase; color:#999aa6; font-weight:700; letter-spacing:1.7px; margin:0 13px 12px} .nav{ display:flex; flex-direction:column; gap:5px} .nav button{ background:transparent; color:#777987; display:flex; gap:13px; align-items:center; text-align:left; padding:13px 14px; border-radius:9px; font-weight:500} .nav button:hover{ background:#fff1e8; color:var(--purple)} .nav button.active{ background:var(--lav); color:var(--purple); font-weight:700} .count{ margin-left:auto; border-radius:6px; background:var(--purple); color:#fff; font-size:10px; padding:2px 6px} .side-bottom{ margin-top:auto} .side-tip{ background:#f7f7fb; padding:18px 15px; border-radius:12px; margin:26px 0 18px} .side-tip .icon{ color:var(--purple); margin-bottom:10px} .side-tip strong{ display:block; font-size:12px; margin-bottom:5px} .side-tip p{ font-size:11px; color:var(--muted); line-height:1.6; margin:0} .campus{ display:flex; align-items:center; gap:9px; border-top:1px solid var(--line); padding:20px 6px 0; font-size:11px; line-height:1.6} .campus .icon{ color:var(--purple)} .campus span{ color:var(--muted); display:block; font-size:10px} .shell{ margin-left:238px} .topbar{ height:83px; border-bottom:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 42px; gap:20px} .breadcrumb{ color:var(--muted); font-size:12px} .breadcrumb strong{ font-weight:500; color:var(--ink)} .top-actions{ display:flex; align-items:center; gap:20px} .profile-switch{ background:#f6f6fa; padding:7px 11px; border:1px solid var(--line); border-radius:8px; color:#555764; font-size:11px} .circle-btn{ position:relative; background:white; border:1px solid var(--line); border-radius:50%; width:37px; height:37px; display:inline-flex; align-items:center; justify-content:center} .dot{ position:absolute; width:7px; height:7px; background:var(--purple); border:2px solid white; box-sizing:content-box; right:5px; top:4px; border-radius:50%} .user{ display:flex; align-items:center; gap:10px; background:transparent; text-align:left} .avatar{ width:36px; height:36px; background:#ede9e1; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; color:#776453} .user strong{ font-size:12px; display:block} .user small{ font-size:10px; color:var(--muted)} .demo{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:10px; padding:8px 42px; background:#f0eef8; color:#716b8e} .demo button{ background:transparent; color:var(--purple); font-size:10px; text-decoration:underline} .main{ max-width:1440px; margin:auto; padding:32px 42px 26px} .page-title{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 27px} .eyebrow{ font-size:10px; text-transform:uppercase; letter-spacing:2px; font-weight:700; color:var(--purple); margin-bottom:10px} .page-title h1{ font-size:27px; margin:0 0 6px} .page-title p{ color:var(--muted); font-size:12px; margin:0} .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 17px; border-radius:8px; background:var(--purple); color:white; font-size:12px; font-weight:600; min-height:42px; text-decoration:none; transition:background .15s,transform .15s} .btn:hover{ background:#303343; transform:translateY(-1px)} .btn.secondary{ background:white; color:var(--ink); border:1px solid var(--line)} .btn.secondary:hover{ border-color:#ec6a1c; background:#fff8f3} .btn.soft{ background:var(--lav); color:var(--purple)} .btn.lime{ background:var(--lime); color:#35402e} .btn.danger{ background:#fff0ef; color:#a44743} .btn.small{ padding:8px 12px; min-height:34px; font-size:11px} .btn .icon{ width:16px; height:16px} .hero{ display:grid; grid-template-columns:1.15fr 1fr; background:#eeecf8; border-radius:16px; overflow:hidden; margin-bottom:24px; min-height:270px; position:relative} .hero-copy{ padding:33px 36px; z-index:1} .hero .eyebrow{ letter-spacing:1.5px; font-size:9px} .hero h1{ font-size:36px; line-height:1.2; margin-bottom:13px; max-width:430px} .hero h1 span{ color:var(--purple)} .hero p{ font-size:12px; max-width:340px; color:#716d85; margin-bottom:24px} .hero-art{ display:flex; align-items:center; justify-content:center; position:relative} .hero-art>svg{ width:100%; max-width:440px; height:265px} .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:23px 0 33px} .stat{ background:white; border:1px solid var(--line); border-radius:11px; padding:19px 21px; display:flex; align-items:center; gap:16px} .stat-icon{ background:var(--lav); color:var(--purple); border-radius:10px; width:43px; height:43px; display:flex; align-items:center; justify-content:center} .stat:nth-child(2) .stat-icon{ background:#ecf3e1; color:#6b8740} .stat:nth-child(3) .stat-icon{ background:#fff1e4; color:#b78651} .stat strong{ font-family:Poppins,sans-serif; font-size:25px; letter-spacing:-1px} .stat p{ margin:3px 0 0; font-size:11px; color:var(--muted)} .section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:15px} .section-head h2{ font-size:19px; margin:0 0 5px} .section-head p{ font-size:11px; margin:0; color:var(--muted)} .text-btn{ background:none; color:var(--purple); font-size:12px; display:inline-flex; align-items:center; gap:7px; padding:8px 0} .searchbar{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:6px 7px 6px 17px; margin-bottom:18px} .searchbar>.icon{ color:#90919e} .searchbar input{ border:0; background:transparent; flex:1; padding:10px 0; min-width:0; color:var(--ink); font-size:12px} .searchbar input:focus{ outline:none} .searchbar:focus-within{ border-color:var(--purple)} .categories{ display:flex; gap:8px; overflow:auto; padding-bottom:5px; margin-bottom:19px} .chip{ white-space:nowrap; display:flex; align-items:center; gap:7px; border:1px solid var(--line); background:#fff; padding:8px 13px; border-radius:7px; color:var(--muted); font-size:11px} .chip .icon{ width:15px; height:15px} .chip.active{ border-color:var(--purple); background:var(--purple); color:white} .filter-row{ padding:16px; background:white; border:1px solid var(--line); border-radius:10px; display:grid; grid-template-columns:repeat(3,1fr) auto; gap:13px; align-items:end; margin-bottom:20px} .grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px} .card{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:box-shadow .2s,transform .2s; position:relative} .card:hover{ box-shadow:var(--shadow); transform:translateY(-3px)} .art{ height:180px; background:#efede7; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden} .art svg{ height:155px; width:190px} .art img{ width:100%; height:100%; object-fit:cover} .art .badge{ position:absolute; top:12px; left:12px; z-index:1} .open-card{ display:block; width:100%; padding:0; text-align:left; background:transparent; color:inherit} .card-body{ padding:18px} .card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px} .category-label{ color:var(--purple); font-size:9px; text-transform:uppercase; font-weight:700; letter-spacing:1px} .code{ font-size:9px; color:#999ba6} .card h3{ margin:0 0 13px; font-size:15px} .card-meta{ display:flex; align-items:center; gap:6px; font-size:10px; color:var(--muted); margin-top:7px} .card-meta .icon{ width:13px; height:13px} .card-footer{ border-top:1px solid #f0f0f5; margin-top:16px; padding-top:12px; color:var(--purple); font-size:10px; display:flex; justify-content:space-between; align-items:center} .card-footer .icon{ width:14px; height:14px} .badge{ font-size:9px; font-weight:600; display:inline-flex; align-items:center; gap:5px; border-radius:5px; padding:5px 8px; background:#fff; color:#66715a; white-space:nowrap} .badge:before{ content:''; width:4px; height:4px; border-radius:50%; background:currentColor} .badge.green{ background:#ecf6ee; color:#3d7e56} .badge.purple{ background:#fff1e8; color:var(--purple)} .badge.orange{ background:#fff1df; color:#a57534} .badge.red{ background:#fff0ef; color:#b05b55} .badge.gray{ background:#f0f1f4; color:#767988} .bottom-callout{ margin-top:27px; background:#f0f3e8; padding:23px 26px; border-radius:12px; display:flex; align-items:center; justify-content:space-between; gap:16px} .bottom-callout h3{ font-size:15px; margin:0 0 5px} .bottom-callout p{ font-size:11px; color:#737968; margin:0} .callout-title{ display:flex; gap:16px; align-items:center} .callout-title>.icon{ width:30px; height:30px; color:#7b8d53} .footer{ display:flex; justify-content:space-between; gap:14px; font-size:10px; color:#9698a2; padding:27px 0 4px; margin-top:12px; border-top:1px solid var(--line)} .panel{ background:white; border:1px solid var(--line); border-radius:12px; padding:24px; margin-bottom:22px} .panel h2{ font-size:18px} .panel p{ color:var(--muted); font-size:12px} .cols{ display:grid; grid-template-columns:1.4fr 1fr; gap:22px} .detail-hero .art{ height:300px; border-radius:11px; margin-bottom:23px} .detail-hero .art svg{ height:260px; width:300px} .detail-title{ display:flex; justify-content:space-between; gap:10px; align-items:center} .detail-title h1{ margin:10px 0; font-size:29px} .detail-info{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:22px 0} .detail-info dt{ font-size:10px; color:var(--muted); margin-bottom:6px} .detail-info dd{ margin:0; font-size:12px} .notice{ background:#fff1e8; padding:15px; border-radius:9px; color:#626775; font-size:12px; line-height:1.7; margin:15px 0} .notice.green{ background:#eef4e5; color:#687b47} .actions{ display:flex; gap:9px; flex-wrap:wrap; margin-top:20px} .full{ width:100%} .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:17px} .field{ display:flex; flex-direction:column; gap:7px; font-size:11px; font-weight:600} .field.wide{ grid-column:1/-1} .field input,.field select,.field textarea,.filter-row select,.filter-row input{ width:100%; padding:11px 12px; border:1px solid #dddfe8; border-radius:7px; background:white; color:var(--ink); font-size:12px; font-weight:400; min-height:41px} .field textarea{ min-height:95px; resize:vertical} .field input:focus,.field textarea:focus,.field select:focus{ outline:2px solid #f9c9ac; border-color:var(--purple)} .field small{ font-weight:400; color:var(--muted); font-size:10px; line-height:1.5} .form-actions{ display:flex; gap:9px; justify-content:flex-end; margin-top:23px} .tabs{ display:flex; gap:22px; border-bottom:1px solid var(--line); margin-bottom:23px} .tabs button{ padding:12px 0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); font-size:12px} .tabs button.active{ color:var(--purple); border-color:var(--purple); font-weight:700} .list-row{ display:flex; align-items:center; gap:16px; padding:17px 0; border-bottom:1px solid var(--line)} .list-row:last-child{ border-bottom:0} .list-row h3{ font-size:13px; margin:0 0 6px} .list-row p{ font-size:11px; color:var(--muted); margin:0} .list-grow{ flex:1; min-width:0} .mini-art{ width:64px; height:64px; background:#f0edf7; border-radius:9px; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center} .mini-art svg{ width:62px; height:62px} .mini-art img{ width:100%; height:100%; object-fit:cover} .timeline{ margin:20px 0} .timeline-entry{ border-left:1px solid #dfdbe9; padding:0 0 22px 19px; position:relative; margin-left:5px} .timeline-entry:before{ content:''; position:absolute; top:4px; left:-4px; width:7px; height:7px; background:var(--purple); border-radius:50%} .timeline-entry strong{ display:block; font-size:12px; margin-bottom:5px} .timeline-entry small{ font-size:10px; color:var(--muted)} .empty{ text-align:center; padding:50px 20px; color:var(--muted)} .empty>.icon{ width:38px; height:38px; color:#c5bfdd; margin-bottom:17px} .empty h3{ color:var(--ink)} .empty p{ font-size:12px} .table-wrap{ overflow:auto} .table{ border-collapse:collapse; width:100%; font-size:12px; white-space:nowrap} .table th{ text-align:left; background:#f8f8fb; color:var(--muted); font-size:10px; letter-spacing:.5px; padding:12px; font-weight:500} .table td{ padding:14px 12px; border-bottom:1px solid var(--line)} .table td strong{ font-size:12px} .table .text-btn{ font-size:11px} .bar-row{ margin:16px 0} .bar-label{ display:flex; justify-content:space-between; font-size:11px; margin-bottom:8px} .bar-track{ height:8px; background:#eeeff2; border-radius:5px} .bar-fill{ height:100%; background:#ec6a1c; border-radius:5px} .report-stats{ grid-template-columns:repeat(4,1fr)} .report-stats .stat{ padding:17px; gap:12px} .report-stats .stat strong{ font-size:24px} .notification{ display:flex; gap:14px; padding:19px 0; border-bottom:1px solid var(--line)} .notification h3{ font-size:13px; margin-bottom:6px} .notification p{ font-size:12px; margin-bottom:8px} .notification small{ color:var(--muted); font-size:10px} .notification .stat-icon{ flex-shrink:0} .auth{ max-width:470px; margin:35px auto} .auth h1{ font-size:27px} .auth .field{ margin-bottom:17px} .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px} .step-num{ width:34px; height:34px; border-radius:50%; background:var(--lav); color:var(--purple); display:flex; align-items:center; justify-content:center; margin-bottom:20px; font-weight:700} .help-section{ margin-top:28px} details{ border-bottom:1px solid var(--line); padding:17px 0} summary{ cursor:pointer; font-size:13px; font-weight:600} details p{ margin:12px 0 0} .mobile-menu{ display:none; background:transparent} dialog{ border:0; border-radius:16px; width:560px; max-width:calc(100vw - 32px); padding:28px; box-shadow:0 20px 100px #21133930; color:var(--ink); max-height:88vh; overflow:auto} dialog::backdrop{ background:#24213766; backdrop-filter:blur(3px)} .modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px} .modal-head h2{ font-size:21px; margin:0} .close-btn{ background:#f5f4fa; width:30px; height:30px; border-radius:50%; color:#777; display:flex; align-items:center; justify-content:center} #toast{ position:fixed; bottom:25px; left:calc(50% + 80px); transform:translateX(-50%) translateY(100px); background:#292639; color:white; padding:15px 23px; border-radius:10px; box-shadow:0 9px 30px #25203530; font-size:12px; z-index:100; transition:transform .25s; max-width:85vw} #toast.show{ transform:translateX(-50%) translateY(0)} .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0} .photo-preview{ width:100px; height:80px; object-fit:cover; border-radius:8px; margin-top:7px} .muted{ color:var(--muted)} .spacer{ height:12px} .back{ margin-bottom:17px} .check-label{ display:flex; gap:9px; align-items:flex-start; font-size:11px; line-height:1.7; color:var(--muted)} .check-label input{ margin-top:4px} .kicker{ font-size:10px; color:var(--purple); font-weight:700; letter-spacing:1px; text-transform:uppercase} .intro-note{ font-size:12px; color:var(--muted); margin-bottom:22px} .login-hint{ border:1px dashed #ccc5e2; border-radius:9px; padding:15px; font-size:11px; color:var(--muted); line-height:1.7} .legend{ font-size:10px; color:var(--muted)} .status-select{ padding:8px; border:1px solid var(--line); border-radius:7px; font-size:11px; background:white} .error{ color:#a44743; font-size:12px; padding:8px 0} @media(min-width:1500px){ .grid{ grid-template-columns:repeat(4,minmax(0,1fr))} .hero h1{ font-size:43px} .hero-copy{ padding:40px} .hero{ min-height:300px} .hero-art>svg{ height:290px} .main{ padding-top:35px} } @media(max-width:1150px){ .sidebar{ width:205px; padding:28px 15px} .shell{ margin-left:205px} .main{ padding:28px} .topbar{ padding:0 28px} .demo{ padding:8px 28px} .grid{ gap:15px} .hero-copy{ padding:28px} .hero h1{ font-size:30px} .art{ height:155px} .art svg{ height:135px} .top-actions{ gap:12px} .report-stats{ grid-template-columns:repeat(2,1fr)} .stat{ padding:16px} .stat strong{ font-size:22px} .cols{ grid-template-columns:1.2fr 1fr} } @media(max-width:900px){ .grid{ grid-template-columns:repeat(2,minmax(0,1fr))} .hero{ grid-template-columns:1.35fr 1fr} .hero h1{ font-size:27px} .hero-art>svg{ height:220px} .stats{ gap:10px} .stat{ gap:10px; padding:14px} .stat-icon{ width:35px; height:35px} .stat p{ font-size:10px} .cols{ grid-template-columns:1fr} .user div{ display:none} .topbar{ height:70px} .profile-switch{ max-width:135px} .hero-copy{ padding:25px} .steps{ gap:10px} .steps .panel{ padding:18px} } @media(max-width:680px){ .sidebar{ transform:translateX(-100%); transition:transform .2s; width:238px; box-shadow:20px 0 100px #0002} .sidebar.visible{ transform:translateX(0)} .shell{ margin:0} .topbar{ padding:0 18px; gap:10px; height:65px} .breadcrumb{ display:none} .mobile-menu{ display:block; padding:5px; color:var(--purple)} .top-actions{ gap:9px; margin-left:auto} .top-actions .user{ display:none} .profile-switch{ max-width:165px} .demo{ padding:8px 18px; font-size:9px; align-items:flex-start} .demo span{ max-width:75%} .main{ padding:24px 18px} .page-title{ align-items:flex-start; gap:12px; margin-bottom:22px} .page-title h1{ font-size:23px} .page-title p{ font-size:11px} .page-title>.btn{ font-size:10px; padding:10px; min-height:36px} .hero{ display:block; min-height:0} .hero-copy{ padding:28px 25px} .hero h1{ font-size:31px; max-width:300px} .hero p{ max-width:265px} .hero-art{ display:none} .stats{ grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:26px} .stat{ display:block; padding:13px 10px} .stat-icon{ width:29px; height:29px; margin-bottom:9px} .stat-icon .icon{ width:17px; height:17px} .stat strong{ font-size:23px} .stat p{ font-size:9px; line-height:1.4} .grid{ gap:12px} .card-body{ padding:12px} .card h3{ font-size:13px} .art{ height:140px} .art svg{ height:125px; width:150px} .code{ display:none} .category-label{ font-size:8px} .badge{ font-size:8px; padding:4px 6px} .art .badge{ left:8px; top:8px} .section-head h2{ font-size:18px} .section-head .text-btn{ font-size:10px} .searchbar .btn{ padding:10px} .searchbar .btn .label{ display:none} .bottom-callout{ padding:20px; align-items:flex-start} .bottom-callout .callout-title>.icon{ display:none} .bottom-callout h3{ font-size:13px} .bottom-callout .btn{ font-size:10px; padding:10px; white-space:nowrap} .filter-row{ grid-template-columns:1fr 1fr} .filter-row .btn{ align-self:end} .form-grid{ grid-template-columns:1fr} .field.wide{ grid-column:auto} .panel{ padding:20px} .detail-title h1{ font-size:24px} .report-stats{ grid-template-columns:repeat(2,1fr)} .report-stats .stat{ display:flex} .footer{ font-size:9px} .footer span:last-child{ max-width:120px; text-align:right} .list-row{ gap:10px; flex-wrap:wrap} .list-row>.badge{ margin-left:auto} .list-row>.btn{ margin-left:74px} .steps{ grid-template-columns:1fr} .steps .panel{ margin-bottom:0} .step-num{ margin-bottom:13px} #toast{ left:50%; width:max-content; max-width:90vw} .notification{ gap:10px} dialog{ padding:23px} .tabs{ gap:17px} .tabs button{ font-size:11px} .hero .btn{ padding:12px 17px} .profile-switch{ font-size:10px} } /* Cadê? identity and responsive layout */ :root{ --bg:#fff; --ink:#10121f; --muted:#626775; --line:#e7e8ed; --purple:#10121f; --lav:#fff1e8; --lime:#fff1e8; --shadow:0 12px 32px #10121f0b; --orange:#ec6a1c} body{ font-size:14px; background:#f5f6f8} button{ transition:background .18s,color .18s} button:focus-visible,a:focus-visible{ outline:3px solid #ec6a1c; outline-offset:4px} h1,h2,h3{ letter-spacing:-.035em} .shell{ margin-left:0} .site-header{ min-height:108px; padding:20px max(5vw,calc((100vw - 1240px)/2)); display:flex; align-items:center; justify-content:space-between; gap:34px; background:#fff; border-bottom:1px solid var(--line)} .brand{ display:block; flex-shrink:0; text-decoration:none} .brand-crop{ width:145px; height:51px; display:block; position:relative; overflow:hidden} .brand-crop img{ position:absolute; width:210.5px; max-width:none; height:148.75px; left:-32.75px; top:-50.25px} .primary-nav,.header-actions{ display:flex; align-items:center; gap:25px} .primary-nav button{ padding:12px 0; background:none; color:var(--muted); font-size:12px; white-space:nowrap} .primary-nav button.active{ color:var(--ink); box-shadow:0 2px var(--orange)} .header-actions{ gap:10px} .header-actions .btn{ border-radius:30px; padding:11px 18px} .circle-btn{ width:40px; height:40px} .workspace-nav{ display:flex; align-items:center; justify-content:center; gap:18px; background:#fff; min-height:52px; padding:8px 5vw; border-bottom:1px solid var(--line)} .workspace-nav button{ display:flex; align-items:center; gap:7px; background:none; color:var(--muted); padding:8px 10px; border-radius:8px; font-size:11px; white-space:nowrap} .workspace-nav button.active,.workspace-nav button:hover{ background:var(--lav); color:var(--ink)} .workspace-nav .icon{ width:16px; height:16px} .workspace-label{ font-size:9px; letter-spacing:1.6px; color:#8a8d98; margin-right:8px} .demo{ padding:9px max(5vw,calc((100vw - 1240px)/2)); background:#f5f6f8; color:var(--muted); font-size:10px; border-bottom:1px solid var(--line)} .demo-controls{ display:flex; gap:16px; align-items:center} .profile-switch{ background:white; max-width:none; font-size:10px; padding:6px 10px} .main{ max-width:1240px; padding:44px 0 50px; margin:auto; min-height:55vh} .landing{ background:white} .landing .main{ padding-top:0} .hero{ display:grid; grid-template-columns:1.2fr 1fr; align-items:center; background:#fff; border-radius:0; min-height:520px; gap:50px; margin:0; padding:54px 0 60px; overflow:visible} .hero-copy{ padding:0} .eyebrow{ font-size:10px; font-weight:600; letter-spacing:1.8px; color:#a54810; margin-bottom:19px} .hero .eyebrow{ font-size:10px; display:flex; align-items:center; gap:9px} .hero .eyebrow span{ height:7px; width:7px; border-radius:50%; background:var(--orange)} .hero h1{ font-size:clamp(38px,4.1vw,56px); font-weight:600; line-height:1.18; letter-spacing:-2.7px; max-width:650px; margin:0 0 24px} .hero h1 span{ color:var(--orange)} .hero p{ font-size:14px; line-height:1.9; max-width:460px; color:var(--muted); margin-bottom:28px} .hero-actions{ display:flex; gap:12px; flex-wrap:wrap} .btn{ border-radius:12px; min-height:46px; padding:13px 19px; font-size:12px} .hero-actions .btn{ padding:15px 20px; min-height:50px} .hero-footnote{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:10px; margin-top:24px} .hero-footnote .icon{ width:15px; height:15px} .hero-visual{ position:relative; background:#fff1e8; border-radius:28px; min-height:390px; padding:26px 28px} .visual-label{ display:flex; align-items:center; gap:7px; font-size:8px; letter-spacing:1.5px; color:#9b4c20} .live-dot{ width:6px; height:6px; background:var(--orange); border-radius:50%} .featured-object{ width:76%; margin:22px auto 15px; background:#fff; border:1px solid #efdaca; border-radius:16px; overflow:hidden; transform:rotate(-5deg); box-shadow:0 14px 25px #a1552110} .featured-object>svg{ height:200px; width:100%; background:#f6eee5; padding:8px} .object-caption{ padding:15px 20px} .object-caption span{ display:block; color:var(--muted); font-size:9px; margin-bottom:4px} .object-caption strong{ font-size:12px; font-weight:500} .floating-note{ position:absolute; right:-18px; bottom:61px; background:#10121f; color:white; display:flex; gap:11px; align-items:center; padding:17px 21px; border-radius:14px; box-shadow:0 9px 20px #10121f18; transform:rotate(3deg)} .floating-note>.icon{ color:#ec6a1c; width:27px; height:27px; background:#ffffff10; border-radius:50%; padding:5px} .floating-note strong{ display:block; font-size:11px; font-weight:500} .floating-note span{ display:block; font-size:9px; color:#d1d2d8; margin-top:4px} .visual-index{ font-size:8px; color:#a26d4b; letter-spacing:1.2px; margin-top:22px} .catalog-section{ padding:44px 0 34px; border-top:1px solid var(--line)} .section-head{ margin-bottom:25px} .section-head h2{ font-size:29px; font-weight:600; margin-bottom:9px} .section-head p{ font-size:12px} .section-head .eyebrow{ margin-bottom:10px} .text-btn{ font-size:11px; font-weight:500} .searchbar{ border-radius:13px; background:#f5f6f8; padding:8px 9px 8px 20px; margin-bottom:16px} .searchbar input{ padding:12px 0; font-size:12px} .categories{ gap:10px; margin-bottom:28px} .chip{ border-radius:24px; padding:10px 16px; font-size:10px} .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px} .card{ border-radius:17px; border-color:#e9e9ec} .card .art{ height:210px; background:#f5f3ef!important} .card .art svg{ height:175px; width:220px} .card-body{ padding:22px} .card h3{ font-size:16px; font-weight:600} .category-label{ color:#a44711; font-size:9px} .card-meta{ font-size:11px; margin-top:9px} .card-footer{ font-size:11px; padding-top:15px; margin-top:19px} .badge{ border-radius:20px; padding:6px 10px; font-size:9px} .badge.green{ background:#fff; color:#36714c} .badge.purple{ background:#fff1e8; color:#a34711} .catalog-note{ text-align:center; color:var(--muted); font-size:10px; margin:25px 0 0} .how-section{ padding:50px 0; border-top:1px solid var(--line)} .how-section .steps{ gap:38px; margin-top:35px} .how-section article{ padding-right:24px} .step-num{ background:#fff1e8; color:#b55117; border-radius:12px; width:43px; height:43px; font-size:13px; margin-bottom:18px} .steps h3{ font-size:17px; font-weight:500} .steps p{ color:var(--muted); font-size:12px; line-height:1.85} .service-banner{ display:flex; align-items:center; gap:25px; padding:35px; background:#f5f6f8; border:1px solid var(--line); border-radius:20px; margin-top:14px} .service-icon{ display:flex; justify-content:center; align-items:center; background:#fff; width:66px; height:66px; border-radius:16px; flex-shrink:0; color:var(--orange)} .service-icon .icon{ width:30px; height:30px} .service-banner>div:nth-child(2){ flex:1} .service-banner .eyebrow{ margin-bottom:10px; font-size:9px} .service-banner h2{ font-size:24px; margin-bottom:12px} .service-banner p{ font-size:11px; color:var(--muted); margin:4px 0} .service-banner .btn{ font-size:10px} .site-footer{ background:#fff; border-top:1px solid var(--line); display:grid; grid-template-columns:1.2fr .7fr 1fr; gap:45px; padding:48px max(5vw,calc((100vw - 1240px)/2)) 22px} .site-footer p{ font-size:11px; color:var(--muted); line-height:1.9; margin-top:18px} .site-footer strong{ display:block; font-size:12px; margin-bottom:18px} .site-footer button{ display:block; background:none; color:var(--muted); padding:5px 0; font-size:11px} .footer-bottom{ grid-column:1/-1; border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; gap:12px; font-size:10px; color:var(--muted)} .panel{ border-radius:18px; padding:28px} .page-title h1{ font-size:31px; font-weight:600} .field input,.field select,.field textarea{ border-radius:10px} .stat{ border-radius:15px} .stat-icon{ background:#fff1e8; color:#b84d10} .btn.lime{ background:#fff1e8; color:#8b3b0c} .notice{ background:#fff1e8; color:#626775} .bar-fill{ background:#ec6a1c} .mobile-only{ display:none!important} #toast{ left:50%} .main>.page-title{ margin-bottom:32px} @media(max-width:1350px){ .main{ margin:0 5vw} .hero{ gap:35px} .site-header{ gap:20px} .primary-nav{ gap:20px} .hero h1{ font-size:48px} .floating-note{ right:-10px} } @media(max-width:1000px){ .site-header{ min-height:94px; gap:20px} .primary-nav{ gap:14px} .primary-nav button{ font-size:10px} .header-actions .btn.secondary{ display:none} .workspace-nav{ gap:6px; justify-content:flex-start; overflow:auto} .workspace-label{ display:none} .hero{ gap:25px; min-height:450px} .hero h1{ font-size:40px; letter-spacing:-1.7px} .hero p{ font-size:12px} .hero-visual{ min-height:350px; padding:22px 16px} .featured-object{ width:90%} .featured-object>svg{ height:175px} .floating-note{ right:-10px; bottom:45px; padding:14px} .hero-actions .btn{ font-size:10px; padding:12px} .section-head h2{ font-size:25px} .grid{ gap:18px} .card-body{ padding:18px} .card .art{ height:185px} .card .art svg{ height:155px} .service-banner{ padding:27px; flex-wrap:wrap} .site-footer{ gap:30px} } @media(max-width:680px){ .site-header{ min-height:85px; padding:16px 5vw; gap:14px; flex-wrap:wrap} .brand-crop{ width:123px; height:44px} .brand-crop img{ width:178.925px; height:126.438px; left:-27.838px; top:-42.713px} .primary-nav{ display:none} .header-actions{ margin-left:auto; gap:7px} .header-actions .circle-btn{ width:34px; height:34px} .header-actions>.btn{ font-size:10px; padding:9px 12px; min-height:36px} .mobile-menu{ display:block; background:none; padding:5px} .workspace-nav{ display:none; position:static; transform:none; width:auto; padding:14px 5vw; box-shadow:none; flex-direction:column; align-items:stretch; gap:4px} .workspace-nav.visible{ display:flex} .workspace-nav button{ padding:12px} .mobile-only{ display:flex!important} .demo{ padding:10px 5vw; flex-wrap:wrap; gap:7px; font-size:8px} .demo span{ max-width:100%} .demo-controls{ width:100%; justify-content:space-between} .profile-switch{ font-size:9px} .main{ padding:28px 0 35px; margin:0 5vw} .hero{ display:flex; flex-direction:column; gap:32px; padding:34px 0; align-items:stretch} .hero-copy{ padding:0} .hero h1{ font-size:39px; max-width:100%; letter-spacing:-1.8px; margin-bottom:18px} .hero .eyebrow{ font-size:8px; letter-spacing:1.3px} .hero p{ font-size:12px; max-width:100%; margin-bottom:21px} .hero-actions{ gap:9px} .hero-actions .btn{ padding:13px 14px; font-size:10px} .hero-footnote{ font-size:9px; margin-top:18px} .hero-visual{ min-height:290px; padding:20px 25px; border-radius:20px} .featured-object{ width:63%; margin:15px auto} .featured-object>svg{ height:150px} .object-caption{ padding:12px} .object-caption strong{ font-size:10px} .floating-note{ right:10px; bottom:42px} .visual-index{ margin-top:15px; font-size:7px} .catalog-section{ padding-top:29px} .section-head{ align-items:flex-start; gap:14px} .section-head h2{ font-size:24px} .section-head p{ font-size:11px} .section-head>.text-btn{ font-size:9px; max-width:110px; text-align:right; flex-shrink:0} .section-head .eyebrow{ font-size:8px} .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px} .card{ border-radius:13px} .card .art{ height:145px} .card .art svg{ width:150px; height:125px} .card-body{ padding:13px} .card h3{ font-size:12px; line-height:1.5} .card-meta{ font-size:9px} .card-footer{ font-size:9px; margin-top:13px} .category-label{ font-size:7px} .art .badge{ font-size:7px; padding:5px 7px} .searchbar{ padding:6px 7px 6px 13px} .searchbar input{ font-size:11px} .chip{ font-size:9px; padding:9px 12px} .how-section{ padding:32px 0} .how-section .steps{ gap:24px; margin-top:23px} .how-section article{ display:grid; grid-template-columns:43px 1fr; gap:0 17px; padding:0} .how-section article .step-num{ grid-row:1/3} .how-section article h3{ font-size:15px; margin-bottom:8px} .how-section article p{ margin:0; font-size:11px} .service-banner{ display:block; padding:25px} .service-icon{ width:46px; height:46px; margin-bottom:19px} .service-banner h2{ font-size:23px} .service-banner .btn{ margin-top:20px} .site-footer{ grid-template-columns:1fr 1fr; gap:26px; padding:30px 5vw 20px} .site-footer>div:nth-child(3){ grid-column:1/-1} .site-footer p{ font-size:10px} .footer-bottom{ font-size:8px; gap:20px} .panel{ padding:21px} .page-title h1{ font-size:25px} .page-title{ flex-wrap:wrap} .hero .btn{ min-height:44px} .stats{ gap:9px} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ scroll-behavior:auto!important; transition:none!important} } /* Approved visual identity: one local logo, local typefaces and inventory photos. */ body, button, input, select, textarea, h1, h2, h3, h4{ font-family: 'Poppins', sans-serif; } :root{ --ink: #10121f; --purple: #10121f; --orange: #ec6a1c; --lav: #fff1e8; --muted: #626775; } .brand-image{ display: block; width: 156px; height: 52px; overflow: hidden; } .site-header{ padding-block: 24px; } .main{ width: min(1240px, calc(100% - 96px)); margin-inline: auto; padding-inline: 0; } .hero{ gap: 64px; padding-block: 56px; } .hero-photo{ height: 430px; border-radius: 16px; overflow: hidden; } .hero-photo .object-photo{ display: block; width: 100%; height: 100%; } .art .object-photo, .card .art .object-photo{ display: block; width: 100%; height: 100%; max-width: none; } .card .art{ height: 310px; } .detail-hero .art{ height: 460px; } .detail-hero .art .object-photo{ width: 100%; height: 100%; } .mini-art .object-photo{ width: 100%; height: 100%; } .stat-icon, .step-num{ background: #fff1e8; color: #a54810; } .btn:hover{ background: #303343; } .btn.soft:hover, .btn.secondary:hover{ background: #fff1e8; color: #10121f; } @media (max-width: 1000px){ .main{ width: calc(100% - 64px); } .hero{ gap: 32px; } .hero-photo{ height: 360px; } .card .art{ height: 250px; } } @media (max-width: 680px){ .main{ width: calc(100% - 40px); } .brand-image{ width: 132px; height: 44px; } .site-header{ padding: 18px 20px; } .hero{ padding-block: 32px; gap: 28px; } .hero-photo{ height: 330px; width: 100%; } .card .art{ height: 190px; } .detail-hero .art{ height: 360px; } } .access-area{ display: flex; align-items: center; gap: 10px; font-size: 10px; } .eyebrow:empty{ display: none; } .footer-bottom{ flex-wrap: wrap; align-items: center; } /* Área de navegação persistente. */ .area-tabs{ display: flex; justify-content: center; gap: 32px; padding: 0 24px; background: #fff; border-bottom: 1px solid var(--line); } .area-tabs button{ display: flex; align-items: center; justify-content: center; gap: 9px; padding: 16px 24px 13px; border-bottom: 3px solid transparent; background: transparent; color: #626775; font-size: 13px; font-weight: 500; } .area-tabs button.active{ color: #10121f; border-bottom-color: #ec6a1c; } .area-tabs button:hover{ background: #fff7f1; color: #10121f; } .area-tabs .icon{ width: 18px; height: 18px; } @media (max-width: 680px){ .area-tabs{ gap: 0; padding-inline: 20px; } .area-tabs button{ flex: 1; padding: 14px 12px 11px; font-size: 12px; } }