:root {
    --sinop-primary: #173b2d;
    --sinop-primary-dark: #0c281d;
    --sinop-primary-soft: #2d5b46;
    --sinop-gold: #d2a92f;
    --sinop-gold-light: #efd875;
    --sinop-ink: #1b2922;
    --sinop-muted: #66736c;
    --sinop-surface: #f4f7f5;
    --sinop-line: rgba(23, 59, 45, .12);
    --sinop-white: #fff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 86px; }

body.institutional-page {
    margin: 0;
    color: var(--sinop-ink);
    background: var(--sinop-white);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { text-underline-offset: 3px; }

.skip-link {
    position: fixed;
    top: -80px;
    left: 1rem;
    z-index: 1100;
    padding: .7rem 1rem;
    border-radius: 0 0 .6rem .6rem;
    color: #fff;
    background: var(--sinop-primary-dark);
    transition: top .2s ease;
}

.skip-link:focus { top: 0; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: rgba(12, 40, 29, .96);
    backdrop-filter: blur(14px);
}

.site-header .navbar { min-height: 76px; padding: .65rem 0; }

.brand { display: inline-flex; align-items: center; gap: .75rem; color: #fff; }
.brand:hover, .brand:focus { color: #fff; }

.brand-mark {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
    border: 2px solid rgba(210, 169, 47, .55);
    border-radius: 50%;
    background: #fff;
}

.brand-mark img { width: 37px; height: 37px; object-fit: contain; }
.brand-copy { display: grid; line-height: 1.08; }
.brand-copy strong { font-size: 1.35rem; letter-spacing: .08em; }
.brand-copy small { margin-top: .3rem; color: rgba(255, 255, 255, .66); font-size: .67rem; letter-spacing: .025em; }

.site-header .nav-link { padding: .65rem .75rem !important; color: rgba(255, 255, 255, .75); font-size: .9rem; font-weight: 600; }
.site-header .nav-link:hover, .site-header .nav-link:focus { color: var(--sinop-gold-light); }

.navbar-toggler { border: 1px solid rgba(255, 255, 255, .24); color: #fff; font-size: 1.5rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(210, 169, 47, .22); }

.btn-header-access {
    padding: .7rem 1rem;
    border: 1px solid var(--sinop-gold);
    border-radius: .65rem;
    color: var(--sinop-primary-dark);
    background: var(--sinop-gold);
    font-size: .88rem;
    font-weight: 800;
}

.btn-header-access:hover, .btn-header-access:focus { color: var(--sinop-primary-dark); background: var(--sinop-gold-light); border-color: var(--sinop-gold-light); }

.hero {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 6rem 0;
    color: #fff;
    background:
        linear-gradient(115deg, rgba(8, 32, 22, .96), rgba(23, 59, 45, .9)),
        repeating-linear-gradient(135deg, transparent 0 48px, rgba(255,255,255,.025) 48px 49px);
}

.hero::after {
    content: "SINOP";
    position: absolute;
    left: -1.3rem;
    bottom: -5rem;
    color: rgba(255, 255, 255, .025);
    font-size: clamp(9rem, 22vw, 23rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.06em;
    pointer-events: none;
}

.hero-glow { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.hero-glow-one { width: 480px; height: 480px; top: -300px; right: 9%; background: radial-gradient(circle, rgba(210,169,47,.25), transparent 66%); }
.hero-glow-two { width: 360px; height: 360px; right: -160px; bottom: -120px; border: 1px solid rgba(210,169,47,.2); box-shadow: 0 0 0 70px rgba(210,169,47,.025), 0 0 0 140px rgba(210,169,47,.018); }

.hero-copy { max-width: 730px; }

.eyebrow, .section-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.15rem;
    color: var(--sinop-primary-soft);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.eyebrow { padding: .52rem .8rem; border: 1px solid rgba(210,169,47,.3); border-radius: 999px; color: var(--sinop-gold-light); background: rgba(210,169,47,.08); }

.hero h1 { max-width: 690px; margin: 0; font-size: clamp(2.7rem, 5.4vw, 5rem); font-weight: 800; letter-spacing: -.052em; line-height: .98; }
.hero h1 span { color: var(--sinop-gold-light); }
.hero-lead { max-width: 650px; margin: 1.6rem 0 0; color: rgba(255,255,255,.72); font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.75; }

.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.hero-actions .btn, .btn-light-action { display: inline-flex; align-items: center; gap: .65rem; padding: .9rem 1.15rem; border-radius: .72rem; font-weight: 800; }
.btn-primary-action { border: 1px solid var(--sinop-gold); color: var(--sinop-primary-dark); background: var(--sinop-gold); box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.btn-primary-action:hover, .btn-primary-action:focus { color: var(--sinop-primary-dark); background: var(--sinop-gold-light); border-color: var(--sinop-gold-light); transform: translateY(-1px); }
.btn-secondary-action { border: 1px solid rgba(255,255,255,.2); color: #fff; background: rgba(255,255,255,.05); }
.btn-secondary-action:hover, .btn-secondary-action:focus { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); }

.hero-trust { display: flex; flex-wrap: wrap; gap: 1.3rem; margin-top: 2rem; color: rgba(255,255,255,.67); font-size: .81rem; }
.hero-trust i { margin-right: .3rem; color: var(--sinop-gold); }

.login-card { position: relative; padding: 1.8rem; border: 1px solid rgba(255,255,255,.11); border-radius: 1.2rem; color: var(--sinop-ink); background: rgba(255,255,255,.97); box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.login-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 1.2rem 0 0 1.2rem; background: linear-gradient(var(--sinop-gold), transparent 75%); }
.login-card-header { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; }
.login-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: .8rem; color: var(--sinop-primary); background: #e8f0ec; font-size: 1.3rem; }
.login-kicker { color: var(--sinop-muted); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.login-card h2 { margin: .15rem 0 0; color: var(--sinop-primary-dark); font-size: 1.3rem; font-weight: 800; }

.form-floating > .form-control { min-height: 58px; border-color: #d8e0dc; border-radius: .7rem; }
.form-floating > .form-control:focus { border-color: var(--sinop-primary-soft); box-shadow: 0 0 0 .2rem rgba(23,59,45,.12); }
.password-wrapper { position: relative; }
.password-wrapper .form-control { padding-right: 3.1rem; }
.btn-toggle-password { position: absolute; right: .65rem; top: 29px; z-index: 5; padding: .35rem; border: 0; color: var(--sinop-muted); background: transparent; line-height: 1; transform: translateY(-50%); }
.btn-toggle-password:hover { color: var(--sinop-primary); }
.form-check-label { color: var(--sinop-muted); }
.form-check-input:checked { border-color: var(--sinop-primary); background-color: var(--sinop-primary); }
.form-check-input:focus { border-color: var(--sinop-primary-soft); box-shadow: 0 0 0 .2rem rgba(23,59,45,.12); }
.link-recuperar { color: var(--sinop-primary); font-weight: 700; text-decoration: none; }
.link-recuperar:hover { color: var(--sinop-primary-dark); text-decoration: underline; }

.btn-login { display: flex; align-items: center; justify-content: center; gap: .65rem; min-height: 50px; border: 0; border-radius: .7rem; color: #fff; background: linear-gradient(135deg, var(--sinop-primary-soft), var(--sinop-primary-dark)); font-weight: 800; box-shadow: 0 10px 22px rgba(23,59,45,.22); transition: transform .15s ease, box-shadow .15s ease; }
.btn-login:hover, .btn-login:focus { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 28px rgba(23,59,45,.27); }
.btn-login:disabled { opacity: .75; transform: none; }
.access-note { margin: .9rem 0 0; color: #7a8780; font-size: .7rem; text-align: center; }
.access-note i { margin-right: .25rem; color: var(--sinop-primary-soft); }

.section { padding: 6.5rem 0; }
.section-about { background: #fff; }
.section-title { margin: 0; color: var(--sinop-primary-dark); font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.07; }
.section-text { margin: 1.3rem 0 0; color: var(--sinop-muted); font-size: 1.04rem; line-height: 1.8; }

.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.value-card { position: relative; min-height: 270px; padding: 1.65rem; border: 1px solid var(--sinop-line); background: #fff; }
.value-card:first-child { border-radius: 1rem 0 0 1rem; }
.value-card:last-child { border-radius: 0 1rem 1rem 0; }
.value-card + .value-card { border-left: 0; }
.value-card.featured { color: #fff; background: var(--sinop-primary); transform: translateY(-14px); box-shadow: 0 18px 45px rgba(23,59,45,.2); }
.value-card i { display: block; margin: 2rem 0 1rem; color: var(--sinop-gold); font-size: 1.75rem; }
.value-card h3 { margin: 0; color: var(--sinop-primary-dark); font-size: 1rem; font-weight: 800; }
.value-card.featured h3 { color: #fff; }
.value-card p { margin: .65rem 0 0; color: var(--sinop-muted); font-size: .84rem; line-height: 1.65; }
.value-card.featured p { color: rgba(255,255,255,.68); }
.value-number { color: rgba(23,59,45,.22); font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
.value-card.featured .value-number { color: rgba(255,255,255,.3); }

.section-features { position: relative; overflow: hidden; background: var(--sinop-primary-dark); }
.section-features::before { content: ""; position: absolute; inset: 0; opacity: .35; background: radial-gradient(circle at 90% 10%, rgba(210,169,47,.24), transparent 26%), linear-gradient(120deg, transparent 55%, rgba(255,255,255,.025) 55%); }
.section-features .container { position: relative; }
.section-label-light { color: var(--sinop-gold-light); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 2.8rem; }
.section-heading > p { max-width: 450px; margin: 0; color: rgba(255,255,255,.62); line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.feature-card { min-height: 250px; padding: 1.5rem; border: 1px solid rgba(255,255,255,.1); border-radius: .9rem; color: #fff; background: rgba(255,255,255,.045); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.feature-card:hover { border-color: rgba(210,169,47,.4); background: rgba(255,255,255,.07); transform: translateY(-3px); }
.feature-card-wide { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; grid-column: span 2; min-height: 210px; }
.feature-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(210,169,47,.25); border-radius: .75rem; color: var(--sinop-gold-light); background: rgba(210,169,47,.08); font-size: 1.2rem; }
.feature-tag { display: block; margin: 1.35rem 0 .45rem; color: var(--sinop-gold-light); font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.feature-card-wide .feature-tag { margin-top: .25rem; }
.feature-card h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.feature-card p { margin: .7rem 0 0; color: rgba(255,255,255,.58); font-size: .86rem; line-height: 1.65; }

.section-flow { background: var(--sinop-surface); }
.section-intro { max-width: 760px; margin: 0 auto 3.8rem; }
.operation-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.operation-flow::before { content: ""; position: absolute; top: 42px; right: 12.5%; left: 12.5%; height: 1px; background: linear-gradient(90deg, transparent, rgba(23,59,45,.2) 10%, rgba(23,59,45,.2) 90%, transparent); }
.flow-step { position: relative; z-index: 1; padding: 0 1rem; text-align: center; }
.flow-index { position: absolute; top: -8px; left: calc(50% + 26px); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--sinop-primary-dark); background: var(--sinop-gold); font-size: .63rem; font-weight: 900; }
.flow-icon { width: 84px; height: 84px; display: grid; place-items: center; margin: 0 auto 1.35rem; border: 1px solid var(--sinop-line); border-radius: 50%; color: var(--sinop-primary); background: #fff; box-shadow: 0 10px 30px rgba(23,59,45,.08); font-size: 1.65rem; }
.flow-step h3 { margin: 0; color: var(--sinop-primary-dark); font-size: 1rem; font-weight: 800; }
.flow-step p { max-width: 220px; margin: .65rem auto 0; color: var(--sinop-muted); font-size: .84rem; line-height: 1.65; }

.section-benefits { padding-top: 0; background: var(--sinop-surface); }
.benefit-panel { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 4rem; overflow: hidden; padding: 4rem; border-radius: 1.4rem; color: #fff; background: linear-gradient(120deg, var(--sinop-primary), var(--sinop-primary-dark)); box-shadow: 0 24px 65px rgba(23,59,45,.18); }
.benefit-panel::after { content: ""; position: absolute; width: 320px; height: 320px; right: -170px; bottom: -180px; border: 1px solid rgba(210,169,47,.22); border-radius: 50%; box-shadow: 0 0 0 60px rgba(210,169,47,.035), 0 0 0 120px rgba(210,169,47,.02); }
.benefit-copy, .benefit-list { position: relative; z-index: 1; }
.benefit-copy h2 { margin: 0; font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -.045em; }
.benefit-copy p { max-width: 600px; margin: 1.2rem 0 1.7rem; color: rgba(255,255,255,.68); line-height: 1.75; }
.btn-light-action { color: var(--sinop-primary-dark); background: #fff; }
.btn-light-action:hover { color: var(--sinop-primary-dark); background: var(--sinop-gold-light); }
.benefit-list { display: grid; align-content: center; gap: .75rem; }
.benefit-list > div { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: .8rem; padding: .85rem; border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; background: rgba(255,255,255,.05); }
.benefit-list i { color: var(--sinop-gold-light); font-size: 1.1rem; text-align: center; }
.benefit-list span { color: rgba(255,255,255,.68); font-size: .86rem; }
.benefit-list strong { color: #fff; }

.site-footer { padding: 2rem 0; color: rgba(255,255,255,.58); background: #081d15; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.footer-brand { display: flex; align-items: center; gap: .75rem; }
.footer-brand img { width: 40px; height: 40px; padding: 3px; border-radius: 50%; object-fit: contain; background: #fff; }
.footer-brand div { display: grid; }
.footer-brand strong { color: #fff; font-size: .95rem; letter-spacing: .08em; }
.footer-brand span { font-size: .68rem; }
.footer-copy { display: grid; gap: .2rem; font-size: .73rem; text-align: right; }

.password-change-modal .modal-content { overflow: hidden; border: 0; border-radius: 1.25rem; box-shadow: 0 1.5rem 4rem rgba(12,40,29,.3); }
.password-change-modal .modal-header { padding: 1.3rem; border: 0; color: #fff; background: linear-gradient(135deg, var(--sinop-primary), var(--sinop-primary-dark)); }
.password-change-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: .8rem; color: var(--sinop-primary-dark); background: var(--sinop-gold); font-size: 1.2rem; }
.password-change-modal .modal-body { padding: 1.3rem; }
.password-change-notice { padding: .8rem .9rem; border: 1px solid #e3e9e5; border-radius: .8rem; color: #4b5e54; background: #f7faf8; }
.password-change-modal .form-control { border-radius: .75rem; border-color: #d7dfda; }
.password-change-modal .form-control:focus { border-color: var(--sinop-primary); box-shadow: 0 0 0 .2rem rgba(23,59,45,.12); }
.password-change-modal .modal-footer { padding: 0 1.3rem 1.3rem; border: 0; }
.password-requirements { color: var(--sinop-muted); font-size: .78rem; }
.alert { border-radius: .8rem; }

@media (max-width: 991.98px) {
    .site-header .navbar-collapse { padding: .75rem 0 .4rem; }
    .site-header .nav-link { padding-left: 0 !important; }
    .btn-header-access { margin-top: .35rem; }
    .hero { min-height: auto; padding: 4.5rem 0 5.5rem; }
    .hero-copy { text-align: center; margin: 0 auto; }
    .hero-lead { margin-left: auto; margin-right: auto; }
    .hero-actions, .hero-trust { justify-content: center; }
    .login-card { max-width: 520px; margin: 0 auto; }
    .value-grid { margin-top: 1rem; }
    .section-heading { align-items: start; flex-direction: column; gap: 1rem; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .operation-flow { grid-template-columns: repeat(2, 1fr); row-gap: 3rem; }
    .operation-flow::before { display: none; }
    .benefit-panel { grid-template-columns: 1fr; gap: 2rem; padding: 3rem; }
}

@media (max-width: 767.98px) {
    html { scroll-padding-top: 72px; }
    .site-header .navbar { min-height: 68px; }
    .brand-mark { width: 42px; height: 42px; }
    .brand-mark img { width: 32px; height: 32px; }
    .brand-copy strong { font-size: 1.1rem; }
    .brand-copy small { font-size: .58rem; }
    .hero { padding: 3.75rem 0 4.5rem; }
    .hero h1 { font-size: clamp(2.45rem, 12vw, 3.4rem); }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .hero-trust { align-items: center; flex-direction: column; gap: .55rem; }
    .login-card { padding: 1.3rem; }
    .section { padding: 4.5rem 0; }
    .value-grid { grid-template-columns: 1fr; gap: .75rem; }
    .value-card, .value-card:first-child, .value-card:last-child { min-height: auto; border: 1px solid var(--sinop-line); border-radius: .85rem; }
    .value-card.featured { transform: none; }
    .value-card i { margin: 1.2rem 0 .8rem; }
    .feature-grid { grid-template-columns: 1fr; }
    .feature-card, .feature-card-wide { grid-column: auto; min-height: auto; }
    .feature-card-wide { grid-template-columns: auto 1fr; }
    .operation-flow { grid-template-columns: 1fr; gap: 2.5rem; }
    .benefit-panel { padding: 2rem 1.35rem; border-radius: 1rem; }
    .footer-inner { align-items: flex-start; flex-direction: column; gap: 1.25rem; }
    .footer-copy { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Apresentação visual independente do sistema */
.institutional-hero { min-height: 760px; }

.product-preview {
    position: relative;
    overflow: hidden;
    padding: 1.2rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 1.2rem;
    color: var(--sinop-ink);
    background: rgba(255,255,255,.97);
    box-shadow: 0 30px 80px rgba(0,0,0,.3);
    transform: perspective(1200px) rotateY(-4deg) rotateX(1deg);
}

.product-preview::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--sinop-gold), var(--sinop-primary-soft)); }
.preview-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .25rem 1rem; border-bottom: 1px solid #e9eeeb; color: var(--sinop-primary-dark); font-size: .78rem; font-weight: 800; }
.preview-topbar > span i { margin-right: .35rem; color: var(--sinop-gold); }
.preview-status { display: flex; align-items: center; gap: .4rem; color: #347052; font-size: .65rem; }
.preview-status i { width: 7px; height: 7px; border-radius: 50%; background: #38a169; box-shadow: 0 0 0 4px rgba(56,161,105,.12); }
.preview-agent { display: flex; align-items: center; gap: .7rem; padding: 1rem .15rem; }
.preview-avatar { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: .7rem; color: #fff; background: var(--sinop-primary); }
.preview-agent > div:nth-child(2) { display: grid; min-width: 0; }
.preview-agent small { color: var(--sinop-muted); font-size: .62rem; }
.preview-agent strong { color: var(--sinop-primary-dark); font-size: .78rem; }
.preview-badge { margin-left: auto; padding: .35rem .5rem; border-radius: 999px; color: #347052; background: #eaf6ef; font-size: .58rem; font-weight: 800; }
.preview-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.preview-metrics > div { display: grid; gap: .15rem; padding: .75rem .55rem; border: 1px solid #e5ebe7; border-radius: .65rem; background: #f7faf8; }
.preview-metrics i { color: var(--sinop-gold); font-size: .95rem; }
.preview-metrics span { color: var(--sinop-muted); font-size: .55rem; }
.preview-metrics strong { color: var(--sinop-primary-dark); font-size: .64rem; }
.preview-timeline { display: grid; gap: .15rem; margin-top: 1rem; }
.preview-timeline > div { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: .55rem; padding: .45rem .15rem; }
.preview-timeline > div > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #dde5e0; border-radius: 50%; color: #8b9891; font-size: .7rem; }
.preview-timeline > div > span.done { border-color: #d7eddf; color: #2d7a50; background: #eaf6ef; }
.preview-timeline > div > span.active { border-color: rgba(210,169,47,.35); color: #9b7814; background: #fff8df; }
.preview-timeline p { display: grid; margin: 0; }
.preview-timeline strong { color: var(--sinop-primary-dark); font-size: .69rem; }
.preview-timeline small { color: var(--sinop-muted); font-size: .58rem; }

@media (max-width: 991.98px) {
    .institutional-hero { min-height: auto; }
    .product-preview { max-width: 520px; margin: 0 auto; transform: none; }
}