/* UNIPOPBRAS | Etapa 1 — design system global, 23/10/2026.
   Camada independente: mantém o HTML, as rotas, o AJAX e as regras do MVP.
   Etapa 2: imagens e composição editorial da página inicial.
*/
/* Sem fontes externas: a apresentação também funciona offline e em FTP simples. */

:root {
  --wine:#083f88;
  --wine2:#0798da;
  --wine-dark:#06285a;
  --cream:#f2f7fc;
  --beige:#eaf3fb;
  --ink:#162b48;
  --muted:#667992;
  --line:#dce8f4;
  --white:#fff;
  --blue:#1665bc;
  --green:#15825b;
  --orange:#bb7522;
  --danger:#c73545;
  --radius:18px;
  --shadow:0 16px 45px rgba(16,60,112,.085),0 2px 7px rgba(16,60,112,.025);
  --sans:Inter,'Aptos','Segoe UI',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --serif:Georgia,'Cambria','Times New Roman',serif;
  --premium-elevation:0 26px 65px rgba(8,52,110,.13),0 5px 15px rgba(8,52,110,.05);
  --premium-focus:0 0 0 4px rgba(10,143,211,.16);
}
html {scroll-padding-top:94px}
body {background:#f5f9fd;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection {background:#cceafa;color:#063064}
a,button,input,select,textarea {-webkit-tap-highlight-color:transparent}
:where(a,button,input,select,textarea,[tabindex]):focus-visible {outline:3px solid #1b96d5;outline-offset:3px}
:where(button,.btn,.icon-btn,.chip,.course-card,.quick,.category-strip a,.app-sidebar nav a){transition:background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease}
:where(.btn,button):disabled{cursor:not-allowed;opacity:.55;transform:none!important;box-shadow:none!important}
.icon {stroke-linecap:round;stroke-linejoin:round}
.eyebrow {color:#1866ae;letter-spacing:.145em;font-size:11px;line-height:1.5}
:is(.hero,.page-hero,.course-detail,.login-wrap,.section,.journey-section,.app-content) :is(h1,h2,h3){letter-spacing:-.025em}
:is(.hero,.page-hero,.course-detail,.login-wrap,.section,.journey-section,.app-content) p{line-height:1.65}

/* Botões e controles institucionais */
.btn {border-radius:12px;min-height:42px;padding:11px 18px;line-height:1.2;letter-spacing:-.012em;font-weight:750;gap:9px}
.btn .icon {width:17px;height:17px}
.btn:hover {transform:translateY(-2px)}
.btn:active {transform:translateY(0) scale(.99)}
.btn-primary {background:linear-gradient(115deg,#084187 0%,#075eb2 100%);color:#fff;border:1px solid transparent;box-shadow:0 8px 20px rgba(7,80,157,.17)}
.btn-primary:hover {background:linear-gradient(115deg,#073877,#0872c9);box-shadow:0 14px 30px rgba(7,80,157,.24)}
.btn-outline {background:#fff;color:#0b4d93;border:1px solid #b6d1e9;box-shadow:0 1px 2px rgba(17,67,121,.015)}
.btn-outline:hover {background:#edf7ff;border-color:#78b3df;box-shadow:0 8px 24px rgba(7,80,157,.08)}
.btn-ghost {background:#eef5fb;color:#285075}
.btn-ghost:hover {background:#e0effa}
.btn-light {color:#084786;background:#fff}
.btn-light:hover {background:#edf6fe}
.btn-danger {background:#c73545}
.btn-lg {min-height:50px;padding:14px 23px}
.btn-sm {min-height:34px;padding:8px 12px;font-size:12px}
:where(input,select,textarea) {min-height:45px;border:1px solid #cfdfed;border-radius:11px;background:#fff;color:#173254;padding:11px 13px;box-shadow:0 1px 2px rgba(15,48,87,.02)}
:where(input,textarea)::placeholder{color:#8b9ab0}
:where(input,select,textarea):focus{border-color:#4da6d9;box-shadow:var(--premium-focus);outline:0}
label{color:#304967;line-height:1.45}
.chip{border-radius:999px;border:1px solid #ccdfef;color:#3a5779;min-height:39px;font-size:13px;font-weight:650}
.chip:hover{border-color:#69b0dc;background:#edf7fe}
.chip.active{background:#0b539c;border-color:#0b539c;color:#fff;box-shadow:0 6px 15px rgba(9,80,151,.15)}
.badge{border-radius:999px;padding:6px 11px;font-weight:750;letter-spacing:.004em}
.badge-info{background:#e6f2fe;color:#145ca4}.badge-success{background:#e1f5eb;color:#116c46}
.badge-warning{background:#fff4de;color:#96601b}.badge-danger{background:#ffe9ed;color:#ac2435}
.badge-muted{background:#eef2f6;color:#5c6c7f}
.page-loader{height:3px;background:rgba(12,121,191,.07)}
.page-loader span{width:25%;background:linear-gradient(90deg,transparent,#0a70bc,#28c0ed);box-shadow:0 0 18px rgba(8,147,218,.25)}
.toast {border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:var(--premium-elevation);padding:13px 18px}

/* Cabeçalho da plataforma pública, comum a todas as páginas */
.public-header {height:88px;padding-inline:clamp(20px,4.3vw,78px);background:rgba(255,255,255,.965);border-bottom:1px solid #e1ebf5;box-shadow:0 3px 18px rgba(13,58,103,.035);gap:22px;backdrop-filter:blur(15px)}
.brand{display:inline-flex;align-items:center;flex:none}
.brand img{max-width:204px;max-height:69px;width:auto;filter:drop-shadow(0 2px 4px rgba(0,54,114,.08))}
.public-header nav {gap:clamp(12px,1.5vw,30px)}
.public-header nav a {font-size:13px;font-weight:750;letter-spacing:-.01em;color:#36516e;position:relative;padding:9px 0}
.public-header nav a:hover {color:#0559a5}
.public-header nav a:after {content:"";position:absolute;left:0;right:100%;height:2px;background:var(--wine2);bottom:2px;border-radius:4px;transition:right .2s ease}
.public-header nav a:hover:after {right:0}
.header-actions .btn {min-height:40px;font-size:12px;padding:10px 13px}
.mobile-menu{border-radius:11px;background:#eff7fd;padding:8px}
.mobile-menu:hover{background:#ddecf9}
.public-footer {background:linear-gradient(145deg,#061e40,#0a376e);border-top:1px solid rgba(255,255,255,.1);padding-block:47px 38px;color:#dce9f6}
.public-footer img {background:#fff;padding:14px;border-radius:15px;box-shadow:0 15px 30px rgba(0,0,0,.14);max-width:215px}
.public-footer small {color:#b9d5e9}
.public-contact {background:#093f82;color:#fff;border-top:1px solid rgba(255,255,255,.1)}
.public-contact .eyebrow{color:#9cdaff}
.public-contact>div:last-child{color:#daeaf8}

/* Estrutura de conteúdo do site, cartões e listas reutilizáveis */
.section{padding-top:72px;padding-bottom:72px}
.section-head{margin-bottom:28px}
.section-head h2,.hybrid-card h2,.preview-section h2{letter-spacing:-.035em}
.section-head p{color:var(--muted);font-size:14px}
.section-head>a{font-size:13px}
.course-card,.hybrid-card,.journey-grid article,.assessment-card,.certificate-card,.booklet-card,.panel,.question-card,.enroll-card,.module,.help-card,.course-specs span,.assessment-header-stat,.grade-summary article,.guide-step {border-color:#dbe7f1;border-radius:18px;box-shadow:var(--shadow)}
.course-card {box-shadow:0 10px 30px rgba(10,65,128,.06)}
.course-card:hover {transform:translateY(-6px);border-color:#a7c7e6;box-shadow:var(--premium-elevation)}
.course-card-body h3{color:#172e4c}
.course-card-body p{color:#66788b}
.course-cover {overflow:hidden}
.course-cover:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(155deg,rgba(255,255,255,.34),transparent 55%)}
.course-cover span{border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 30px rgba(3,54,109,.2)}
.course-cover .icon{filter:drop-shadow(0 2px 3px rgba(3,29,61,.18))}
.course-badges span,.course-meta b {background:#eff6fc;color:#295e92;border-radius:7px}
.card-bottom{border-top:1px solid #eff2f6}
.category-strip a{box-shadow:0 10px 22px rgba(15,65,113,.06);border-color:#dce8f4}
.category-strip a:hover{transform:translateY(-3px);box-shadow:0 16px 35px rgba(15,65,113,.13);border-color:#a5c9e7}
.hybrid-card {border:1px solid #dae8f3}
.hybrid-icon {flex:none;background:linear-gradient(145deg,#e9f6ff,#dceefe);color:#075898;border:1px solid #cde6f7}
.journey-grid article{transition:transform .2s ease,box-shadow .2s ease}
.journey-grid article:hover{transform:translateY(-3px);box-shadow:var(--premium-elevation)}
.search-box{height:48px;border-color:#d3e3ef;box-shadow:0 3px 14px rgba(13,67,120,.035)}
.search-box:focus-within{border-color:#5dade0;box-shadow:var(--premium-focus)}
.search-box input{min-height:40px;box-shadow:none}
.page-hero.compact{background:linear-gradient(110deg,#f9fcff,#eaf4fb)}
.breadcrumbs{color:#6d8298}
.trust-row span{border:1px solid #dceaf4;box-shadow:0 4px 15px rgba(14,70,120,.035)}
.enroll-card{background:#fff;border-color:#d5e5f2;box-shadow:var(--premium-elevation)}
.mode{border-color:#d7e5ef}
.mode.selected{background:#eff8ff;box-shadow:0 0 0 1px rgba(8,98,178,.2)}

/* Área administrativa e do aluno: sidebar, barra e dashboards */
.app-shell{background:#f5f9fd}
.app-sidebar {width:246px;padding:22px 13px 15px;background:linear-gradient(175deg,#0b4c97 0%,#083871 49%,#062850 100%);border-right:1px solid rgba(255,255,255,.12);box-shadow:6px 0 22px rgba(8,49,104,.075)}
.app-brand {min-height:107px;border:1px solid rgba(255,255,255,.8);border-radius:16px;margin:0 4px 23px;background:#fff;box-shadow:0 10px 22px rgba(0,22,58,.12)}
.app-brand img {max-height:88px}
.app-sidebar nav{gap:3px;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.app-sidebar nav a{font-size:13px;min-height:42px;padding:11px 12px;gap:11px;border-radius:11px;color:#dbe9f9;letter-spacing:.004em}
.app-sidebar nav a .icon{opacity:.86}
.app-sidebar nav a:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateX(2px)}
.app-sidebar nav a.active{color:#073f7c;background:#fff;box-shadow:0 6px 22px rgba(0,28,70,.16);font-weight:800}
.app-sidebar nav a.active .icon{opacity:1}
.sidebar-quote{font:italic 20px/1.32 var(--serif);color:#b8def6;padding:18px 12px 6px;border-top:1px solid rgba(255,255,255,.11);margin-top:15px}
.app-stage{margin-left:246px}
.app-topbar {height:77px;background:rgba(255,255,255,.96);border-bottom:1px solid #dce7f0;padding:0 28px;backdrop-filter:blur(14px);box-shadow:0 3px 12px rgba(9,60,110,.025)}
.top-search{background:#f4f8fd;border:1px solid #dce8f3;border-radius:12px;min-height:42px}
.top-search:focus-within{border-color:#4c9ace;box-shadow:var(--premium-focus)}
.top-search input{box-shadow:none;border:none!important;min-height:38px;background:transparent}
.top-search .icon{color:#517a9f}
.icon-btn{border-radius:12px;transition:background .2s,box-shadow .2s}
.icon-btn:hover{background:#edf6fc;box-shadow:0 4px 12px rgba(13,77,130,.075)}
.user-chip {gap:11px}
.avatar{background:linear-gradient(140deg,#07549f,#0d99d1);border:2px solid #e0effa;box-shadow:0 5px 15px rgba(9,78,144,.12)}
.app-content{padding:32px clamp(18px,2.6vw,38px);max-width:1580px}
.admin-welcome h1,.student-hero h1{color:#183450}
.admin-welcome p,.student-hero p{color:#667c92}
.student-hero {background:linear-gradient(110deg,#e9f5fd,#fff 80%);border:1px solid #d9eaf7;border-radius:22px;box-shadow:var(--shadow);min-height:185px}
.script-quote{color:#0b579b}
.date-card{background:#fff;border-color:#dce9f4;box-shadow:0 6px 17px rgba(15,68,125,.05)}
.stats-grid{gap:15px}
.stats-grid article {background:#fff;border:1px solid #dce9f4;border-radius:18px;box-shadow:var(--shadow);padding:19px;transition:transform .2s,box-shadow .2s}
.stats-grid article:hover{transform:translateY(-3px);box-shadow:var(--premium-elevation)}
.stats-grid article>.icon{color:#0d67ae;background:#e9f4ff;border-radius:11px;padding:7px;box-sizing:content-box}
.stats-grid article strong{letter-spacing:-.02em;color:#152f51}
.panel{padding:23px;border-radius:18px}
.panel-head{margin-bottom:17px}
.panel-head h2,.panel h2{color:#192f4c;letter-spacing:-.025em}
.panel-head>a:not(.btn){color:#0a62ad;font-weight:750}
.promo-panel {background:linear-gradient(150deg,#064783,#0a72b8);border-radius:19px;box-shadow:var(--shadow)}
.quick{min-height:88px;border-color:#dbe8f3;border-radius:16px;box-shadow:var(--shadow)}
.quick:hover{transform:translateY(-3px);border-color:#a9cce9;box-shadow:var(--premium-elevation)}
.quick:not(.primary)>.icon{color:#0a5b9c;background:#e9f4fb;border-radius:11px;padding:7px;box-sizing:content-box}
.quick.primary{background:linear-gradient(130deg,#08458c,#087cbd);box-shadow:0 14px 30px rgba(8,82,152,.2)}
.quick.primary:hover{box-shadow:0 20px 35px rgba(8,82,152,.26)}
.progress{height:8px;background:#e7f0f8}
.progress i,.bar-line i b{background:linear-gradient(90deg,#0a5aab,#21a7dd)}
.donut{box-shadow:0 5px 18px rgba(0,72,149,.07)}
.enrollment{border-bottom-color:#e6eef6}
.mini-cover{background:#e8f2fc;color:#0966ae;border-radius:12px}
.notice{border-bottom-color:#edf1f5}
.table-wrap {border:1px solid #e3ebf3;border-radius:14px;background:#fff;scrollbar-width:thin;scrollbar-color:#bbd5e8 transparent}
table{border-collapse:separate;border-spacing:0;min-width:610px}
table th {background:#f2f7fc;color:#47627f;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
table td{border-bottom:1px solid #edf2f7;color:#36516c}
table tr:last-child td{border-bottom:0}
table tbody tr{transition:background .2s}
table tbody tr:hover{background:#f5faff}
.module,.question-card,.assessment-card,.certificate-card,.booklet-card{background:#fff}
.module-title:hover,.sidebar-lesson:hover{background:#edf7fe}
.lesson-sidebar,.sidebar-lesson.active{border-color:#d9e7f2}
.grade-summary article .icon {color:#0d65aa}
.modal-card{border:1px solid #cfe0ef;border-radius:21px;box-shadow:0 28px 80px rgba(8,39,78,.23)}
.modal-head h2{color:#193756}
.tour-overlay{background:rgba(6,32,68,.6)}
.tour-focus{box-shadow:0 0 0 9999px rgba(6,32,68,.56)}
.tour-pop{border-radius:19px;border:1px solid #dce9f2;box-shadow:var(--premium-elevation)}
.tour-step-count{color:#096bb1}
.answer-options input:focus-visible+span {outline:3px solid #228fd4;outline-offset:3px}
.answer-options span{border-color:#d5e4f0}
.question-card legend{color:#234363}

/* Login e formulários: visual consistente com o novo tema */
.login-brand {background:linear-gradient(142deg,#f0f8ff 0%,#dceffa 100%);border-right:1px solid #dceaf5}
.login-brand h1{color:#11366a}
.login-brand>p{color:#4a6787}
.login-brand-features span{background:rgba(255,255,255,.8);border-color:#cfe4f5;border-radius:14px;box-shadow:0 6px 18px rgba(19,87,142,.05)}
.login-card {background:#fff}
.login-card form {max-width:470px;width:100%;margin-inline:auto}
.login-card h2{color:#15345b}
.login-links a{color:#0865ac;font-weight:700}
.form-intro{color:var(--muted)}
.brand-showcase{box-shadow:var(--premium-elevation)}

/* Pequenos dispositivos e navegação touch-friendly */
@media(max-width:1100px){
  .public-header {gap:12px;padding-inline:20px}
  .public-header nav {gap:12px}
  .header-actions .btn {font-size:11px}
}
@media(max-width:1050px){
  .public-header nav.open {display:flex!important}
  .public-header nav{top:78px!important;border-radius:16px;padding:12px!important;box-shadow:var(--premium-elevation)!important}
  .public-header nav a{padding:12px 13px!important;border-radius:9px}
  .public-header nav a:hover{background:#edf7fe}
}
@media(max-width:760px){
  html{scroll-padding-top:70px}
  .public-header{height:68px;min-height:68px;padding-inline:14px}
  .brand img{max-width:132px;max-height:52px}
  .header-actions{gap:6px}
  .header-actions .btn{min-height:37px;max-width:125px;font-size:11px;padding:8px}
  .header-actions .btn .icon{display:none}
  .public-header nav{top:64px!important}
  .section{padding:45px 16px}
  .section-head{align-items:start}
  .section-head h2{font-size:clamp(27px,7vw,38px)}
  .course-card{border-radius:16px}
  .course-cover{min-height:135px}
  .hybrid-card{padding:19px}
  .app-sidebar{width:255px!important;box-shadow:12px 0 35px rgba(1,34,82,.2)}
  .app-stage{margin-left:0}
  .app-topbar{height:66px;padding:0 13px}
  .app-content{padding:16px 13px 90px}
  .app-brand{min-height:86px}
  .app-brand img{max-height:68px}
  .top-search{width:min(40vw,215px);min-height:39px}
  .top-search input{font-size:12px}
  .top-actions{gap:5px}
  .icon-btn{min-height:37px;min-width:37px}
  .stats-grid article{padding:14px}
  .student-hero{padding:21px 17px;min-height:auto}
  .panel{padding:16px}
  .mobile-bottom-nav{background:rgba(255,255,255,.98);border-top:1px solid #dae9f4;box-shadow:0 -8px 24px rgba(11,65,117,.08);padding-bottom:env(safe-area-inset-bottom)}
  .mobile-bottom-nav a{color:#67809a;min-height:55px}
  .mobile-bottom-nav a.active{color:#0862ab}
  .mobile-bottom-nav .icon{width:21px;height:21px}
  .public-contact{padding:28px 20px}
}
@media(max-width:430px){
  .header-actions .btn-outline{display:none}
  .app-topbar .top-search{display:none}
  .app-topbar .top-actions{gap:5px}
  .user-chip strong{font-size:11px}
  .user-chip small{font-size:10px}
  .course-grid{gap:12px}
  .btn-lg{padding:13px 15px}
  .modal-card{padding:16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .page-enter{animation:none!important}
}
@media print{
  .app-sidebar,.app-topbar,.mobile-bottom-nav,.public-header,.public-footer,.public-contact{display:none!important}
  .app-stage{margin:0!important}
  body{background:white!important}
  .panel,.certificate-full{box-shadow:none!important}
}

/* Acabamentos de páginas internas que ainda utilizavam bege/rosa legado */
.address-box,.success-details div,.assessment-meta span,.sidebar-lesson>span{background:#eff6fc;border:1px solid #e0edf6;color:#315d84}
.sidebar-lesson.active{background:#e7f4fd;color:#0a579e}
.enrollment-fields input,.modal-card textarea{border-color:#cfdfed;border-radius:11px}
.review-card span,.assessment-result-panel p,.pdf-sheet p{color:#5d7089}
.enrollment-summary{background:linear-gradient(155deg,#073c78,#0b65ae);box-shadow:var(--premium-elevation)}
.cert-logo-full,.cert-logo{color:#0c539b}
.certificate-full{border:1px solid #b9d3e9;box-shadow:0 20px 50px rgba(11,63,126,.09)}
.guide-credentials{background:#edf7fd;border:1px solid #d7e9f7}
.login-card :is(input,select,textarea){width:100%}