@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');
:root{
    --bg:#335F6D;
    --accent:#F8DD6F;
    --fg:#FFFFFF;
    --ink:#0F2730;
    --muted:#EAF0F3;
}

*{font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif}
html,body{height:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}


/* Floating/fixed top nav (desktop shrinks on scroll) */
#siteNav{
    position:fixed;
    top:12px;
    right:0;
    z-index:1030;
    left: 50%;
    transform: translateX(-50%);
    transition:top .2s ease, padding .2s ease, background .2s ease, box-shadow .2s ease;
    min-width: 80vw;
    max-width:100vw;
}

.container-pills{
    background: rgba(51, 95, 109, 0.80);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: .6rem 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.12) inset;
    backdrop-filter: blur(6px);
}
.nav-link{color:rgba(255,255,255,.9);transition:color .15s ease}
.nav .nav-link:hover,.nav .nav-link:focus{color:var(--accent)!important}
.navbar-brand img{border-radius:10px;width:36px;height:36px;transition:width .2s ease,height .2s ease,transform .2s ease}

.titulo-pagina{
    font-size: 22px;
}

.btn-brand {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    background:var(--accent);
    color:var(--bg);
    border:none; 
    font-weight: bold;
}

.btn-brand:hover{
    transform: scale(1.04);
    background:var(--accent);
    color:var(--bg);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}
.badge-accent{background:(0,0,0,0.04); border: 1px solid var(--fg);color:var(--fg);border-radius:999px;padding:.35rem .75rem;font-weight:800}

.hero{min-height:88vh;display:grid;place-items:center;position:relative}
.hero h1{font-weight:900}
.hero .underline{width:320px;height:6px;background:var(--accent);border-radius:999px;margin-top:8px}
.stat-card{
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 18px;
    padding: 1.1rem 1.25rem;
}
.stat-card .title{font-size:1.6rem;font-weight:900}
.stat-card .sub{opacity:.85}
.stat-card .accent-icon{color:var(--accent);font-size:1.5rem;display:inline-flex;align-items:center;gap:.3rem;}
.stat-card .accent-icon i{line-height:1;}
.stat-card .accent-icon-duo i:first-child{color:var(--fg);font-size:1.1em;}
.stat-card .accent-icon-duo i:last-child{color:var(--accent);}
.stat-card .accent-icon-sequence i{color:var(--accent);opacity:.85;}
.stat-card .accent-icon-sequence i:nth-child(1){font-size:.9em;}
.stat-card .accent-icon-sequence i:nth-child(2){font-size:1em;opacity:.95;}
.stat-card .accent-icon-sequence i:nth-child(3){font-size:1.1em;opacity:1;}
.hero-blob{position:relative;width:250px;height:250px;border-radius:999px;background:radial-gradient(40% 40% at 50% 50%, rgba(255,255,255,.1), rgba(0,0,0,0))}
.hero-blob .glyph{position:absolute;inset:0;display:grid;place-items:center;font-size:110px;color:var(--accent);}
.hero-stack{font-size:4.5rem;}
.hero-stack .fa-coins{color:var(--accent);}
.hero-stack .fa-crow{color:var(--fg);}
.hero-icon{font-size:4.5rem;color:var(--accent);}
.hero-sequence{display:inline-flex;gap:.6rem;font-size:4rem;color:var(--accent);align-items:flex-end;}
.hero-sequence i:nth-child(1){font-size:.75em;opacity:.8;}
.hero-sequence i:nth-child(2){font-size:.95em;opacity:.9;}
.hero-sequence i:nth-child(3){font-size:1.1em;opacity:1;}

.scroll-indicator{position:absolute;bottom:10px;left:0;right:0;text-align:center;opacity:.8;pointer-events:none;}
.scroll-indicator i{display:inline-block;animation:scroll-indicator-bounce 1.8s ease-in-out infinite;}
@keyframes scroll-indicator-bounce{0%,20%{transform:translateY(0);opacity:.7;}50%{transform:translateY(12px);opacity:1;}80%,100%{transform:translateY(0);opacity:.7;}}

.section-light{background:#f5f2e6;color:var(--ink)}
.section-dark{background:var(--bg);color:var(--fg)}

.card-white{background:#fff;border:1px solid #E6EDF0;border-radius:22px;box-shadow:0 10px 26px rgba(15,39,48,.06);display:block;color:var(--ink);text-decoration:none;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;}
.card-produto:hover,
.card-produto:focus-visible{transform:translateY(-6px) scale(1.03);border-color:var(--accent);box-shadow:0 18px 38px rgba(15,39,48,.18);}
.card-produto:focus-visible{outline:3px solid rgba(248,221,111,0.85);outline-offset:4px;}
.card-action{cursor:pointer;}
.card-action:hover .text-muted,.card-action:focus-visible .text-muted{color:var(--ink) !important;}
.card-soft{background:#FFF8D9;border:1px solid #F3E9B0;border-radius:22px;box-shadow:0 10px 26px rgba(15,39,48,.06)}

.list-check li{margin:.5rem 0;padding-left:1.8rem;position:relative}
.list-check li::before{content:"✔";position:absolute;left:0;top:0;color:#2a7;font-weight:800}

.feature-card{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);border-radius:18px;padding:1.1rem}
.feature-card h3{font-weight:800}
.feature-card .icon{color:var(--accent)}
.benefit-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.18);border-radius:20px;padding:1.5rem;display:flex;flex-direction:column;gap:.8rem;box-shadow:0 10px 28px rgba(15,39,48,.18);}
.benefit-card-primary{background:linear-gradient(135deg,rgba(248,221,111,0.22),rgba(255,255,255,0.08));border-color:rgba(248,221,111,0.5);}
.benefit-card-highlight{background:rgba(32,74,88,0.85);border-color:rgba(255,255,255,0.22);}
.benefit-label{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--accent);background:rgba(248,221,111,0.12);border:1px solid rgba(248,221,111,0.35);border-radius:999px;padding:.25rem .7rem;}
.benefit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;font-size:.95rem;}
.benefit-list li{display:flex;align-items:flex-start;gap:.5rem;line-height:1.5;}
.benefit-list i{color:var(--accent);flex-shrink:0;margin-top:.2rem;}
.benefit-list-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem 1.4rem;}
.benefit-mini{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);border-radius:18px;padding:1.2rem;display:flex;flex-direction:column;gap:.6rem;}
.benefit-mini .icon{font-size:2rem;color:var(--accent);}
.benefit-mini h4{font-weight:800;}
.benefit-mode h5{display:flex;align-items:center;gap:.45rem;font-weight:700;}
.icon-sm{color:var(--accent);}
.benefit-card p,.benefit-mini p{color:rgba(255,255,255,0.82);}
.benefit-card-highlight p{color:rgba(255,255,255,0.88);}
@media (max-width:767px){
  .benefit-card{padding:1.3rem;}
  .benefit-list-columns{grid-template-columns:1fr;}
}

.kpi .num{font-weight:900;font-size:1.8rem;color:#16333D}
.kpi .label{opacity:.7}

.testi-card{background:#fff;color:var(--ink);border:1px solid #E6EDF0;border-radius:20px;padding:1.2rem 1.2rem 1.4rem}
.chip{background:#FFF1B8;color:#342;border-radius:12px;padding:.35rem .6rem;font-weight:800;display:inline-flex;gap:.45rem;align-items:center;font-size:.9rem}

.callout{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);border-radius:20px;padding:1.4rem 1.6rem}
.callout-dark{background:#204A58;border:1px solid rgba(255,255,255,0.08);border-radius:22px;padding:2rem 2.4rem;color:#fff}

.contact-panel{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.18);backdrop-filter:blur(4px);border-radius:20px;padding:1.5rem}
.form-control,.form-select{background:#fff;color:#111;border-color:#e8eef1;border-radius:12px}

footer{color:rgba(255,255,255,.75)} hr.sep{border-color:rgba(255,255,255,.15);opacity:1}
.small-muted{opacity:.8}

/* Offcanvas mobile menu themed */
.offcanvas{background:var(--bg);color:var(--fg)}
.offcanvas .btn-close{filter: invert(1) grayscale(100%); opacity:.7}
.offcanvas .list-group-item{background:transparent;color:var(--fg);border-color:rgba(255,255,255,.15)}
.offcanvas .list-group-item:hover{color:var(--accent)}


/* Desktop shrink behavior */
@media (min-width:768px){
  #siteNav.nav-shrink{top:0;padding-top:.35rem;padding-bottom:.35rem}
  #siteNav.nav-shrink .container-pills{padding:.4rem .8rem;border-radius:14px}
  #siteNav.nav-shrink .navbar-brand img{width:28px;height:28px}
}

.float-contact {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1080;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .85rem 1.25rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--bg);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(0,0,0,.28);
    transition: transform .18s ease, box-shadow .18s ease;
}

.float-contact:hover,
.float-contact:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(0,0,0,.32);
    color: var(--bg);
}

.story-intro{
    display:flex;
    align-items:center;
    gap:1rem;
    background:#fff;
    border:1px solid #E6EDF0;
    border-radius:18px;
    padding:1.1rem 1.4rem;
    box-shadow:0 16px 34px rgba(15,39,48,.08);
    color:var(--ink);
}
.story-intro i{color:var(--accent);}
.story-intro p{margin:0;font-weight:600;color:#19343f;}

.story-timeline{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:1.8rem;
    margin-left:.4rem;
}
.story-timeline::before{
    content:'';
    position:absolute;
    top:.5rem;
    bottom:.5rem;
    left:18px;
    width:2px;
    background:linear-gradient(180deg,rgba(15,39,48,.16),rgba(15,39,48,.04));
}

.timeline-item{
    position:relative;
    padding-left:3.6rem;
}
.timeline-icon{
    position:absolute;
    left:0;
    top:0;
    width:36px;
    height:36px;
    border-radius:999px;
    background:#fff;
    border:2px solid var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--accent);
    box-shadow:0 10px 24px rgba(15,39,48,.12);
}
.timeline-content{
    background:rgba(255,255,255,0.9);
    border:1px solid #E6EDF0;
    border-radius:18px;
    padding:1.15rem 1.35rem;
    box-shadow:0 16px 34px rgba(15,39,48,.08);
}
.timeline-content h3{
    font-weight:800;
    margin-bottom:.4rem;
    color:#12313b;
}
.timeline-content p{
    margin-bottom:.8rem;
    color:#244750;
}
.timeline-content p:last-child{
    margin-bottom:0;
}

.timeline-quote{
    margin:1rem 0 0;
    padding:1rem 1.1rem 1.1rem 1.4rem;
    background:rgba(248,221,111,0.18);
    border-left:4px solid var(--accent);
    border-radius:14px;
    font-style:italic;
    color:#1b3843;
    position:relative;
}
.timeline-quote .quote-mark{
    font-size:2rem;
    line-height:1;
    color:var(--accent);
    margin-right:.4rem;
    font-weight:800;
}

.timeline-list{
    list-style:none;
    margin:1rem 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:.4rem;
    color:#1f3c46;
}
.timeline-list li{
    display:flex;
    align-items:flex-start;
    gap:.45rem;
}
.timeline-list li::before{
    content:'\2022';
    color:var(--accent);
    font-size:1.1rem;
    line-height:1.25;
    margin-top:.1rem;
}

.about-panel{
    background:linear-gradient(165deg,rgba(255,255,255,0.92) 0%,rgba(248,221,111,0.28) 100%);
    border:1px solid rgba(15,39,48,0.08);
    border-radius:24px;
    padding:2.2rem 2rem;
    box-shadow:0 20px 38px rgba(15,39,48,.16);
    color:#12313b;
    position:relative;
    overflow:hidden;
}
.about-panel::after{
    content:'';
    position:absolute;
    width:180px;
    height:180px;
    background:rgba(248,221,111,0.24);
    border-radius:50%;
    top:-40px;
    right:-60px;
}
.about-panel h4{color:#102b33;}
.about-badge{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    font-size:.75rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:800;
    color:var(--bg);
    background:rgba(248,221,111,0.35);
    border:1px solid rgba(248,221,111,0.55);
    border-radius:999px;
    padding:.3rem .8rem;
    margin-bottom:1.2rem;
    position:relative;
    z-index:1;
}
.about-stats{
    display:flex;
    gap:1.2rem;
    flex-wrap:wrap;
    position:relative;
    z-index:1;
}
.stat{
    flex:1 1 90px;
    background:#fff;
    border:1px solid rgba(15,39,48,0.08);
    border-radius:18px;
    padding:1rem 1.2rem;
    text-align:center;
    box-shadow:0 12px 28px rgba(15,39,48,0.1);
}
.stat-value{
    display:block;
    font-size:1.9rem;
    font-weight:900;
    color:var(--bg);
    line-height:1.1;
}
.stat-label{
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#23414b;
    font-weight:700;
}
.about-checklist li{
    display:flex;
    align-items:flex-start;
    gap:.55rem;
    margin-bottom:.6rem;
    color:#1b3843;
    font-size:.95rem;
}
.about-checklist li:last-child{margin-bottom:0;}

.float-contact{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:1080;
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.85rem 1.25rem;
    border-radius:999px;
    background:var(--accent);
    color:var(--bg);
    font-weight:700;
    text-decoration:none;
    box-shadow:0 14px 30px rgba(0,0,0,0.28);
    transition:transform .18s ease, box-shadow .18s ease;
}
.float-contact i{
    font-size:1.2rem;
    line-height:1;
}
.float-contact:hover,
.float-contact:focus-visible{
    transform:translateY(-2px);
    box-shadow:0 18px 38px rgba(0,0,0,0.32);
    color:var(--bg);
}
@media (max-width: 575px){
    .float-contact{
    right:16px;
    bottom:16px;
    padding:.75rem 1rem;
    }

    .float-contact span{
    font-size:.9rem;
    }

    .story-timeline::before{left:12px;}
    .timeline-item{padding-left:3.1rem;}
    .timeline-icon{width:32px;height:32px;}

    .float-contact {
    right: 16px;
    bottom: 16px;
    padding: .75rem 1rem;
    }

    .float-contact span {
    font-size: .9rem;
    }
}

@media (max-width: 991px){
    .about-panel{margin-top:1.5rem;}
  
    .ocultarVersaoMobile{
        display: none;
    }
}

@media (min-width: 1200px){
    .ocultarVersaoMobile{
        display: list-item;
    }
    #siteNav{
        max-width: 100vw;
    }
}