/* ==================================================
   WUPWUI-DOCSAFE
   CSS PRINCIPAL - PÁGINA COMERCIAL
================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    font-family:'Segoe UI', Roboto, Arial, sans-serif;
    background:#ebebed;
    color:#1a1a1a;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

body.modal-open{
    overflow:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea{
    font-family:inherit;
}

/* ==================================================
   HEADER
================================================== */

.top-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(229,231,235,.85);
    transition:.3s;
}

.top-header.scrolled{
    background:rgba(255,255,255,0.98);
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.wrap{
    max-width:1280px;
    margin:auto;
    padding:18px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.brand{
    font-size:22px;
    font-weight:900;
    color:#000;
    letter-spacing:.2px;
    white-space:nowrap;
}

.menu{
    display:flex;
    align-items:center;
    gap:24px;
}

.menu a{
    font-size:15px;
    font-weight:650;
    color:#374151;
    transition:.25s;
    white-space:nowrap;
}

.menu a:hover{
    color:#000;
}

/* ==================================================
   HERO
================================================== */

.hero{
    padding:132px 24px 84px;
    background:#f4f5f7;
    color:#111;
    overflow:hidden;
}

.hero-container{
    max-width:1280px;
    margin:0 auto;
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    align-items:center;
    gap:56px;
}

.hero-logo-box{
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-logo-box img{
    width:100%;
    max-width:560px;
    max-height:420px;
    object-fit:contain;
    display:block;
    animation:docSafeLogoAlive 5.5s ease-in-out infinite;
    transform-origin:center;
    filter:drop-shadow(0 20px 36px rgba(0,0,0,.18));
}

@keyframes docSafeLogoAlive{
    0%{
        transform:translateY(0) scale(1);
        filter:drop-shadow(0 20px 36px rgba(0,0,0,.16));
    }

    35%{
        transform:translateY(-8px) scale(1.025);
        filter:drop-shadow(0 28px 48px rgba(0,0,0,.22));
    }

    70%{
        transform:translateY(4px) scale(1.012);
        filter:drop-shadow(0 22px 40px rgba(0,0,0,.18));
    }

    100%{
        transform:translateY(0) scale(1);
        filter:drop-shadow(0 20px 36px rgba(0,0,0,.16));
    }
}

.hero-text{
    text-align:left;
}

.hero h1{
    font-size:clamp(2rem, 4vw, 4rem);
    font-weight:950;
    line-height:1.10;
    color:#111;
    margin-bottom:24px;
    letter-spacing:-1px;
}

.hero-subtitle{
    max-width:680px;
    margin:0 0 34px;
    font-size:clamp(1rem, 1.8vw, 1.28rem);
    color:#4b5563;
    line-height:1.65;
}

.hero-buttons{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

/* ==================================================
   BOTÕES
================================================== */

.btn-primary{
    background:#000;
    color:#fff;
    padding:14px 34px;
    border-radius:999px;
    font-weight:850;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #000;
    transition:.3s;
    cursor:pointer;
}

.btn-primary:hover{
    background:#222;
    transform:translateY(-2px);
}

.btn-secondary{
    padding:14px 34px;
    border-radius:999px;
    font-weight:850;
    border:1px solid #111;
    color:#111;
    background:transparent;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}

.btn-secondary:hover{
    background:#111;
    color:#fff;
    transform:translateY(-2px);
}

/* ==================================================
   SECTIONS
================================================== */

.section{
    max-width:1280px;
    margin:auto;
    padding:96px 24px;
}

.section.alt{
    max-width:none;
    background:#f4f5f7;
}

.section.alt > .section-title,
.section.alt > .grid,
.section.alt > .comparison-table,
.section.alt > .section-note,
.section.alt > .terms-grid{
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
}

.section-title{
    text-align:center;
    font-size:clamp(1.8rem, 3vw, 2.35rem);
    font-weight:950;
    margin-bottom:54px;
    color:#111;
    letter-spacing:-.5px;
}

.section-note{
    max-width:980px;
    margin:24px auto 0;
    color:#555;
    text-align:center;
    line-height:1.65;
    font-size:15px;
}

/* ==================================================
   GRID E CARDS
================================================== */

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:28px;
}

.card,
.feature-card,
.module-card,
.storage-info-card,
.storage-price-card,
.term-card{
    position:relative;
    background:#fff;
    border-radius:24px;
    padding:34px 30px;
    box-shadow:0 14px 36px rgba(0,0,0,.07);
    border:1px solid rgba(213,218,226,.92);
    transition:.3s;
}

.card:hover,
.feature-card:hover,
.module-card:hover,
.term-card:hover,
.storage-info-card:hover,
.storage-price-card:hover{
    transform:translateY(-7px);
    box-shadow:0 24px 58px rgba(0,0,0,.13);
}

.card::before,
.feature-card::before,
.module-card::before,
.storage-info-card::before,
.storage-price-card::before,
.term-card::before{
    content:"";
    position:absolute;
    top:0;
    left:22px;
    right:22px;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
    opacity:.8;
}

.feature-grid{
    align-items:stretch;
}

.feature-card{
    display:flex;
    flex-direction:column;
    gap:14px;
    text-align:center;
    align-items:center;
}

.card-icon{
    width:60px;
    height:60px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    box-shadow:0 14px 30px rgba(0,0,0,.08);
    margin-left:auto;
    margin-right:auto;
}

.card-icon.premium{
    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.9), transparent 34%),
        linear-gradient(135deg, #f7d36a, #d7a83f);
    border:1px solid rgba(151,107,24,.28);
    color:#1a1a1a;
}

.card-icon.dark{
    background:
        radial-gradient(circle at 35% 25%, rgba(246,210,109,.34), transparent 35%),
        linear-gradient(135deg, #171c24, #303744);
    color:#f6d26d;
    border:1px solid rgba(255,255,255,.08);
}

.feature-card h3{
    font-size:21px;
    font-weight:900;
    color:#111;
    line-height:1.25;
}

.feature-card p{
    font-size:15px;
    color:#5f6672;
    text-align:center;
}

.card-list{
    width:100%;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:auto;
    text-align:left;
}

.card-list li{
    position:relative;
    padding-left:18px;
    color:#414855;
    font-size:14px;
}

.card-list li::before{
    content:"•";
    position:absolute;
    left:0;
    top:0;
    color:#c99628;
    font-weight:900;
}

/* ==================================================
   BENEFÍCIOS
================================================== */

#beneficios .feature-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:28px;
}

#beneficios .feature-card{
    min-height:330px;
    padding:36px 30px;
    background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(249,250,252,.96));
    box-shadow:0 18px 46px rgba(15,23,42,.08);
}

#beneficios .feature-card:hover{
    border-color:rgba(201,150,40,.42);
    box-shadow:0 26px 64px rgba(15,23,42,.14);
}

#beneficios .card-icon.premium{
    width:68px;
    height:68px;
    border-radius:22px;
    margin-bottom:6px;
    box-shadow:
        0 14px 34px rgba(201,150,40,.22),
        inset 0 1px 0 rgba(255,255,255,.42);
}

#beneficios .feature-card h3{
    font-size:20.5px;
}

#beneficios .feature-card p{
    font-size:14.8px;
    line-height:1.62;
    color:#596170;
}

/* ==================================================
   SOLUÇÃO
================================================== */

#solucao .feature-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:28px;
}

#solucao .feature-card{
    min-height:280px;
    padding:34px 28px;
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,251,253,.96));
    box-shadow:0 18px 46px rgba(15,23,42,.08);
}

#solucao .feature-card:hover{
    border-color:rgba(201,150,40,.42);
    box-shadow:0 26px 64px rgba(15,23,42,.14);
}

#solucao .feature-card .card-icon{
    width:66px;
    height:66px;
    border-radius:22px;
}

#solucao .feature-card h3{
    font-size:20px;
    line-height:1.25;
    margin-top:4px;
}

#solucao .feature-card p{
    font-size:14.8px;
    line-height:1.62;
    color:#596170;
}

/* ==================================================
   COMPARATIVO
================================================== */

#comparativo{
    overflow:hidden;
}

.comparison-table{
    width:100%;
    background:#fff;
    border-radius:28px;
    overflow-x:auto;
    overflow-y:hidden;
    box-shadow:
        0 24px 70px rgba(15,23,42,.12),
        0 1px 0 rgba(255,255,255,.95) inset;
    border:1px solid rgba(229,231,235,.95);
}

.comparison-table .row{
    display:grid;
    grid-template-columns:minmax(220px, 1.45fr) repeat(6, minmax(135px, 1fr));
    min-width:1180px;
    border-bottom:1px solid #ececec;
}

.comparison-table .row:last-child{
    border-bottom:none;
}

.comparison-table .row div{
    padding:17px 15px;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    color:#222;
    transition:.2s;
}

.comparison-table .row div:first-child{
    justify-content:flex-start;
    text-align:left;
    font-weight:850;
    color:#111;
    position:sticky;
    left:0;
    background:inherit;
    z-index:2;
}

.comparison-table .row.header{
    background:linear-gradient(135deg, #0e1117, #191f29);
    color:#fff;
    font-weight:900;
}

.comparison-table .row.header div,
.comparison-table .row.header div:first-child{
    background:linear-gradient(135deg, #0e1117, #191f29);
    color:#fff;
    font-size:15.5px;
    font-weight:900;
}

.comparison-table .row:hover div{
    background:#fafafa;
}

.comparison-table .row.header:hover div{
    background:#111;
}

.comparison-table .row.monthly{
    background:#dfe3ea;
    border-top:2px solid #111;
    border-bottom:2px solid #111;
}

.comparison-table .row.monthly div,
.comparison-table .row.monthly div:first-child{
    background:#dfe3ea;
    color:#111;
    font-weight:950;
    font-size:16px;
}

.comparison-table .row.monthly:hover div{
    background:#dfe3ea !important;
}

.comparison-table .row.table-spacer{
    background:#fff;
    border-bottom:none;
}

.comparison-table .row.table-spacer div{
    padding:14px;
    min-height:28px;
    background:#fff !important;
    border:none;
}

.comparison-table .row.table-spacer.small div{
    padding:8px;
    min-height:16px;
}

.comparison-table .row.module-header{
    background:linear-gradient(135deg, #f7d36a 0%, #dfb046 52%, #bf8c23 100%);
    border-top:1px solid rgba(151, 107, 24, .35);
    border-bottom:1px solid rgba(151, 107, 24, .35);
}

.comparison-table .row.module-header div,
.comparison-table .row.module-header div:first-child{
    background:linear-gradient(135deg, #f7d36a 0%, #dfb046 52%, #bf8c23 100%);
    color:#2b2108;
    font-weight:950;
}

.comparison-table .row.module-header:hover div,
.comparison-table .row.module-header:hover div:first-child{
    background:linear-gradient(135deg, #f7d36a 0%, #dfb046 52%, #bf8c23 100%) !important;
    color:#2b2108 !important;
}

.comparison-table .row.module-package{
    background:#fff3c8;
    border-top:1px solid #ead693;
    border-bottom:1px solid #ead693;
}

.comparison-table .row.module-package div,
.comparison-table .row.module-package div:first-child{
    background:#fff3c8;
    color:#111;
    font-weight:900;
    padding-top:16px;
    padding-bottom:16px;
}

.comparison-table .row.module-package:hover div,
.comparison-table .row.module-package:hover div:first-child{
    background:#fff3c8 !important;
}

.promo-price{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    line-height:1.2;
}

.promo-from{
    font-size:12px;
    color:#7a6a3a;
    opacity:.85;
    text-decoration:line-through;
    font-weight:750;
}

.promo-to{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:3px 9px;
    border-radius:999px;
    background:#111;
    color:#fff;
    font-size:14px;
    font-weight:950;
    box-shadow:0 8px 18px rgba(0,0,0,.12);
}

.promo-consulta{
    font-size:14.5px;
    color:#111;
    font-weight:900;
}

.comparison-table .row.total-package{
    background:#111;
}

.comparison-table .row.total-package div,
.comparison-table .row.total-package div:first-child{
    background:#111;
    color:#fff;
    font-weight:950;
    font-size:16px;
    padding-top:20px;
    padding-bottom:20px;
}

.comparison-table .row.total-package:hover div,
.comparison-table .row.total-package.no-hover:hover div,
.comparison-table .row.total-package:hover div:first-child,
.comparison-table .row.total-package.no-hover:hover div:first-child{
    background:#111 !important;
    color:#fff !important;
    transform:none !important;
    box-shadow:none !important;
}

.total-line-wrap{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    line-height:1.2;
}

.total-main{
    font-size:15.5px;
    font-weight:900;
    letter-spacing:.2px;
}

.total-sub{
    font-size:12.2px;
    color:rgba(255,255,255,.72);
    margin-top:3px;
    font-weight:600;
}

/* ==================================================
   MÓDULOS
================================================== */

.modules-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:26px;
    max-width:1180px;
    margin:0 auto;
    align-items:stretch;
}

.module-card{
    background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(250,251,253,.96));
    padding:36px 30px;
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:100%;
}

.module-card-header{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.module-icon{
    width:64px;
    height:64px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    background:linear-gradient(135deg, #1d232d, #2f3743);
    color:#f6d26d;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 14px 30px rgba(0,0,0,.08);
    margin:0 auto 12px;
}

.module-icon.premium-large{
    width:74px;
    height:74px;
    border-radius:24px;
    font-size:31px;
    background:
        radial-gradient(circle at 35% 28%, rgba(246,210,109,.34), transparent 35%),
        linear-gradient(135deg, #171c24, #303744);
    color:#f6d26d;
    box-shadow:
        0 16px 36px rgba(15,23,42,.18),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.module-card h3{
    font-size:22px;
    font-weight:900;
    color:#111;
    margin-top:4px;
    margin-bottom:2px;
    line-height:1.2;
    text-align:center;
}

.module-card p{
    color:#5f6672;
    font-size:15px;
}

.module-price{
    font-size:1.55rem !important;
    font-weight:950 !important;
    color:#111 !important;
    margin:2px 0 6px !important;
    line-height:1.2;
    text-align:center;
}

.module-intro{
    margin:0;
    color:#596170;
    line-height:1.55;
    font-size:15px;
    text-align:center;
}

.module-includes{
    margin-top:8px;
    padding:17px 18px;
    border-radius:18px;
    background:linear-gradient(135deg, rgba(247,211,106,.16), rgba(255,255,255,.94));
    border:1px solid rgba(201,150,40,.28);
}

.module-includes strong{
    display:block;
    margin-bottom:10px;
    color:#111;
    font-size:15px;
    font-weight:900;
}

.module-includes ul{
    margin:0;
    padding-left:18px;
}

.module-includes li{
    margin-bottom:7px;
    color:#424956;
    font-size:14.3px;
    line-height:1.38;
}

.module-includes li:last-child{
    margin-bottom:0;
}

.module-dependency-note{
    max-width:100%;
    margin-top:auto !important;
    padding:9px 12px;
    border-radius:12px;
    background:#f6f7f9;
    border-left:3px solid #d3a637;
    color:#505866 !important;
    font-size:11.8px !important;
    line-height:1.4;
}

/* ==================================================
   PLANOS
================================================== */

#planos{
    background:#eef0f3;
}

#planos .grid{
    grid-template-columns:repeat(3,1fr);
    max-width:1280px;
    margin:0 auto;
}

#planos .card{
    position:relative;
    background:#fff;
    border:1.5px solid #d1d5db;
    border-radius:26px;
    padding:42px 32px 38px;
    text-align:center;
    box-shadow:0 16px 40px rgba(0,0,0,.08);
    transition:.35s;
    overflow:hidden;
}

#planos .card:hover{
    transform:translateY(-10px);
    border-color:#000;
    box-shadow:0 30px 70px rgba(0,0,0,.18);
}

#planos .card.destaque{
    position:relative;
    overflow:hidden;
    border:2px solid #000;
    box-shadow:0 28px 70px rgba(0,0,0,.18);
    padding-top:42px;
}

#planos .card.destaque::before{
    display:none !important;
    content:none !important;
}

#planos h3{
    font-size:23px;
    font-weight:950;
    color:#111;
    margin-bottom:18px;
}

#planos p{
    font-size:15px;
    color:#6b7280;
    margin-top:8px;
}

#planos .price{
    font-size:30px;
    font-weight:950;
    color:#000;
    margin:20px 0 6px;
    line-height:1.2;
}

#planos .price-small{
    font-size:14px;
    color:#4b5563;
    margin:0 0 22px;
}

.plan-card-list{
    list-style:none;
    padding:0;
    margin:24px 0 28px;
    text-align:left;
    border-top:1px solid rgba(0,0,0,.08);
}

.plan-card-list li{
    padding:10px 0;
    border-bottom:1px solid rgba(0,0,0,.08);
    font-size:14.5px;
    color:#374151;
    display:flex;
    justify-content:space-between;
    gap:12px;
}

.plan-card-list li strong{
    color:#111;
}

#planos button{
    width:70%;
    min-width:170px;
    min-height:48px;
    margin:0 auto;
    border-radius:999px;
    background:#000;
    color:#fff;
    font-size:15px;
    font-weight:800;
    border:none;
    cursor:pointer;
    transition:.3s;
}

#planos button:hover{
    background:#222;
    transform:translateY(-2px);
}

/* ==================================================
   ARMAZENAMENTO
================================================== */

.storage-layout{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:30px;
    align-items:stretch;
}

.storage-info-card,
.storage-price-card{
    background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(250,251,253,.96));
    border-radius:26px;
    padding:36px 34px;
}

.storage-card-header{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:16px;
    margin-bottom:18px;
}

.storage-icon{
    flex:0 0 auto;
    width:64px;
    height:64px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
    background:
        radial-gradient(circle at 35% 28%, rgba(246,210,109,.34), transparent 35%),
        linear-gradient(135deg, #171c24, #303744);
    color:#f6d26d;
    box-shadow:
        0 16px 36px rgba(15,23,42,.16),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.storage-info-card h3,
.storage-price-card h3{
    font-size:22px;
    font-weight:900;
    color:#111;
}

.storage-info-card p{
    color:#5f6672;
    font-size:15px;
    margin-bottom:14px;
}

.storage-alert{
    margin-top:22px;
    padding:16px 18px;
    border-radius:16px;
    background:#f4f5f7;
    border-left:4px solid #d3a637;
    color:#374151 !important;
}

.storage-table{
    width:100%;
    margin:0;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:none;
    border:1px solid #e5e7eb;
}

.storage-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    border-bottom:1px solid #eee;
}

.storage-row:last-child{
    border-bottom:none;
}

.storage-row div{
    padding:17px 20px;
    font-size:15px;
}

.storage-row div:first-child{
    font-weight:800;
    color:#111;
    background:#f8fafc;
}

.storage-row div:last-child{
    text-align:right;
    font-weight:900;
    color:#000;
}

/* ==================================================
   TERMOS
================================================== */

.terms-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:26px;
    max-width:1180px;
    margin:0 auto;
}

.term-card-header{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    margin-bottom:12px;
    text-align:center;
}

.term-icon{
    width:66px;
    height:66px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.9), transparent 34%),
        linear-gradient(135deg, #f7d36a, #d7a83f);
    color:#1a1a1a;
    border:1px solid rgba(201,150,40,.32);
    box-shadow:
        0 14px 34px rgba(201,150,40,.22),
        inset 0 1px 0 rgba(255,255,255,.42);
}

.term-card h3{
    font-size:21px;
    font-weight:900;
    color:#111;
    text-align:center;
}

.term-card p{
    color:#5f6672;
    font-size:15px;
    text-align:center;
    line-height:1.62;
}

.term-link{
    width:100%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:18px;
    padding:11px 16px;
    border-radius:999px;
    font-size:14px;
    font-weight:800;
    background:#111;
    color:#fff;
    text-decoration:none;
    transition:.25s;
}

.term-link::after{
    content:"↗";
    font-size:13px;
    opacity:.8;
}

.term-link:hover{
    background:#222;
    transform:translateY(-2px);
}

/* ==================================================
   MODAL
================================================== */

.modal-backdrop{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.68);
    backdrop-filter:blur(10px);
    display:none !important;
    align-items:center;
    justify-content:center;
    z-index:99999;
    padding:20px;
}

.modal-backdrop.show{
    display:flex !important;
}

.modal-box{
    width:100%;
    max-width:760px;
    background:#fff;
    border-radius:28px;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:
        0 34px 90px rgba(0,0,0,.34),
        0 1px 0 rgba(255,255,255,.9) inset;
    position:relative;
    overflow:hidden;
}

.modal-close{
    position:absolute;
    top:16px;
    right:16px;
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    color:#fff;
    border:1px solid rgba(255,255,255,.14);
    font-size:18px;
    cursor:pointer;
    transition:.2s;
}

.modal-close:hover{
    background:rgba(255,255,255,.22);
    transform:rotate(90deg);
}

.modal-header{
    padding:34px 38px 18px;
    background:
        radial-gradient(circle at top left, rgba(246,210,109,.20), transparent 34%),
        linear-gradient(135deg, #10141b, #202833);
    border-bottom:none;
}

.modal-header h3{
    color:#fff;
    font-size:25px;
    font-weight:900;
    margin-bottom:4px;
}

.modal-header p{
    color:rgba(255,255,255,.72);
    font-size:14px;
}

.modal-content{
    padding:30px 38px 36px;
    max-height:70vh;
    overflow:auto;
}

.modal-section{
    padding:18px 0;
    border-bottom:1px solid #edf0f4;
}

.modal-section:first-child{
    padding-top:0;
}

.modal-section:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.modal-section h4{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:16px;
    font-weight:900;
    color:#111;
    margin-bottom:6px;
}

.modal-section h4::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#d3a637;
    box-shadow:0 0 0 4px rgba(211,166,55,.12);
}

.modal-section p{
    font-size:14.5px;
    color:#4b5563;
}

/* ==================================================
   FORMULÁRIO
================================================== */

.assinatura-section{
    min-height:100vh;
    padding:120px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    background:#f5f5f5;
}

.assinatura-section.hide,
.hide{
    display:none !important;
}

#assinar h2{
    font-size:30px;
    font-weight:900;
    color:#111;
    margin-bottom:8px;
    text-align:center;
}

#assinar .assinatura-subtitle{
    max-width:620px;
    font-size:15px;
    color:#6b7280;
    margin-bottom:32px;
    text-align:center;
}

.form-assinatura{
    width:100%;
    max-width:560px;
    background:#ffffff;
    padding:42px 38px;
    border-radius:26px;
    box-shadow:0 30px 70px rgba(0,0,0,.15);
    animation:fadeInUp .4s ease;
}

#assinar .form-assinatura h3{
    font-size:17px;
    font-weight:900;
    color:#111;
    margin:8px 0 12px;
}

.form-group input,
.form-group select{
    width:100%;
    padding:16px 18px;
    border-radius:14px;
    border:1px solid #d1d5db;
    margin-bottom:18px;
    font-size:15px;
    background:#f9fafb;
    color:#111;
    transition:.25s;
}

.form-group input:focus,
.form-group select:focus{
    outline:none;
    border-color:#111;
    background:#fff;
    box-shadow:0 0 0 3px rgba(0,0,0,.12);
}

.form-check-group{
    display:grid;
    gap:10px;
    margin:10px 0 22px;
}

.form-check{
    display:flex;
    align-items:center;
    gap:12px;
    background:#f7f7f7;
    padding:13px 14px;
    border-radius:14px;
    border:1px solid #e5e7eb;
    font-size:14.5px;
    color:#374151;
    cursor:pointer;
    transition:.25s;
}

.form-check:hover{
    background:#fff;
    border-color:#111;
}

.form-check input{
    width:18px;
    height:18px;
    accent-color:#000;
}

.g-recaptcha{
    margin-top:8px;
    transform-origin:left center;
}

#assinar .form-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-top:26px;
}

#assinar .btn-primary{
    background:#111;
    color:#fff;
    padding:14px 28px;
    border-radius:999px;
    font-size:14px;
    font-weight:800;
    border:none;
    cursor:pointer;
    transition:.3s;
}

#assinar .btn-primary:hover{
    background:#000;
    transform:translateY(-2px);
}

#assinar .btn-cancelar{
    background:transparent;
    border:none;
    color:#6b7280;
    font-size:13px;
    cursor:pointer;
    text-decoration:underline;
}

#assinar .btn-cancelar:hover{
    color:#000;
}

/* ==================================================
   FOOTER
================================================== */

.footer{
    background:
        radial-gradient(circle at 15% 5%, rgba(246,210,109,.14), transparent 26%),
        linear-gradient(135deg, #0b0f16, #151b24 55%, #090c11);
    color:#fff;
    position:relative;
    overflow:hidden;
    padding:0;
}

.footer::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:44px 44px;
    opacity:.18;
    pointer-events:none;
}

.footer-container{
    position:relative;
    z-index:1;
    max-width:1280px;
    margin:0 auto;
    padding:62px 24px 38px;
    display:grid;
    grid-template-columns:1.2fr .8fr 1fr;
    gap:34px;
}

.footer-brand-box{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:18px;
}

.footer-logo-mini,
.footer-brand-box img{
    width:74px !important;
    height:74px !important;
    max-width:74px !important;
    max-height:74px !important;
    object-fit:contain;
    border-radius:18px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    padding:8px;
    filter:drop-shadow(0 12px 26px rgba(0,0,0,.28));
}

.footer-col h3{
    font-size:26px;
    font-weight:900;
    margin-bottom:12px;
}

.footer-brand-box h3{
    margin:0;
    line-height:1.15;
}

.footer-brand-box span{
    display:block;
    margin-top:4px;
    color:#f6d26d;
    font-size:13px;
    font-weight:800;
    letter-spacing:.3px;
    text-transform:uppercase;
}

.footer-col h4{
    font-size:18px;
    font-weight:900;
    margin-bottom:16px;
    color:#f6d26d;
}

.footer-brand-col p{
    color:rgba(255,255,255,.82);
    max-width:520px;
    line-height:1.7;
}

.footer-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px;
}

.footer-badges span{
    padding:7px 11px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.86);
    font-size:12.5px;
    font-weight:750;
}

.footer-cta{
    display:inline-flex;
    margin-top:18px;
    padding:12px 20px;
    border-radius:999px;
    background:#f6d26d;
    color:#111;
    font-weight:900;
    box-shadow:0 12px 28px rgba(246,210,109,.16);
    transition:.25s;
}

.footer-cta:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 34px rgba(246,210,109,.23);
}

.footer-links,
.footer-contact{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.footer-links a,
.footer-contact li{
    color:rgba(255,255,255,.86);
    font-size:14.5px;
}

.footer-links a{
    display:inline-flex;
    position:relative;
    transition:.2s;
}

.footer-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-2px;
    width:0;
    height:1px;
    background:#f6d26d;
    transition:.25s;
}

.footer-links a:hover{
    color:#fff;
}

.footer-links a:hover::after{
    width:100%;
}

.footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.footer-contact i{
    margin-top:4px;
    color:#f6d26d;
    width:18px;
}

.footer-bottom{
    position:relative;
    z-index:1;
    border-top:1px solid rgba(255,255,255,.08);
    background:rgba(0,0,0,.18);
    text-align:center;
    padding:18px 20px 22px;
}

.footer-bottom p{
    color:rgba(255,255,255,.72);
    font-size:14px;
}

/* ==================================================
   WHATSAPP
================================================== */

.whatsapp-float{
    position:fixed;
    bottom:24px;
    left:24px;
    display:flex;
    align-items:center;
    gap:12px;
    background:#000;
    padding:14px 20px;
    border-radius:50px;
    box-shadow:0 12px 30px rgba(0,0,0,.35);
    transition:.3s;
    z-index:9999;
}

.whatsapp-float:hover{
    transform:translateY(-4px);
}

.whatsapp-float img{
    width:26px;
    height:26px;
}

.whatsapp-text{
    color:#fff;
    font-weight:800;
    font-size:14px;
}

/* ==================================================
   ANIMAÇÕES
================================================== */

.reveal{
    opacity:0;
    transform:translateY(26px);
    transition:.6s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

@keyframes fadeInUp{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ==================================================
   TABLET
================================================== */

@media(max-width:1024px){

    .wrap{
        padding:16px 20px;
    }

    .menu{
        gap:16px;
    }

    .menu a{
        font-size:14px;
    }

    .hero-container{
        gap:36px;
    }

    .hero-logo-box img{
        max-width:430px;
        max-height:340px;
    }

    #beneficios .feature-grid,
    #solucao .feature-grid,
    #planos .grid,
    .modules-grid,
    .terms-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .storage-layout{
        grid-template-columns:1fr;
    }

    .footer-container{
        grid-template-columns:1fr 1fr;
    }

    .footer-brand-col{
        grid-column:1 / -1;
    }
}

/* ==================================================
   MOBILE
================================================== */

@media(max-width:768px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden !important;
    }

    body{
        background:#f4f5f7;
    }

    .top-header{
        position:fixed;
        width:100%;
    }

    .wrap{
        width:100%;
        padding:14px 22px;
        justify-content:flex-start;
    }

    .brand{
        font-size:19px;
        text-align:left;
    }

    .menu{
        display:none !important;
    }

    .hero{
        padding:104px 18px 58px;
    }

    .hero-container{
        display:grid;
        grid-template-columns:1fr;
        gap:28px;
        width:100%;
    }

    .hero-logo-box{
        order:1;
        width:100%;
    }

    .hero-logo-box img{
        width:100%;
        max-width:315px;
        max-height:310px;
        margin:0 auto;
        animation:none;
    }

    .hero-text{
        order:2;
        width:100%;
        text-align:center;
    }

    .hero h1{
        font-size:31px;
        line-height:1.18;
        letter-spacing:-.4px;
        margin-bottom:18px;
    }

    .hero-subtitle{
        max-width:100%;
        font-size:15.5px;
        line-height:1.65;
        margin:0 auto 26px;
    }

    .hero-buttons{
        width:100%;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:center;
        gap:10px;
        flex-wrap:nowrap;
    }

    .btn-primary,
    .btn-secondary{
        width:50%;
        max-width:180px;
        min-height:48px;
        padding:13px 12px;
        font-size:14px;
    }

    .section{
        width:100%;
        max-width:100%;
        padding:68px 20px;
    }

    .section-title{
        font-size:28px;
        line-height:1.22;
        margin-bottom:34px;
        text-align:center;
    }

    .section-note{
        font-size:14px;
        line-height:1.6;
        margin-top:22px;
    }

    .grid,
    .feature-grid,
    #beneficios .feature-grid,
    #solucao .feature-grid,
    #planos .grid,
    .modules-grid,
    .terms-grid,
    .storage-layout,
    .footer-container{
        display:grid !important;
        grid-template-columns:1fr !important;
        width:100%;
        max-width:100%;
        gap:24px;
    }

    .card,
    .feature-card,
    .module-card,
    .storage-info-card,
    .storage-price-card,
    .term-card{
        width:100%;
        max-width:100%;
        min-height:auto !important;
        padding:28px 22px;
        border-radius:22px;
        transform:none !important;
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .card:hover,
    .feature-card:hover,
    .module-card:hover,
    .term-card:hover,
    .storage-info-card:hover,
    .storage-price-card:hover{
        transform:none !important;
    }

    .card-icon,
    #solucao .feature-card .card-icon,
    #beneficios .card-icon.premium,
    .module-icon,
    .module-icon.premium-large,
    .term-icon,
    .storage-icon{
        width:58px;
        height:58px;
        min-width:58px;
        border-radius:18px;
        font-size:23px;
        margin-left:auto;
        margin-right:auto;
    }

    .feature-card h3,
    .module-card h3,
    .term-card h3{
        font-size:20px;
        line-height:1.28;
        text-align:center;
    }

    .feature-card p,
    .module-card p,
    .term-card p{
        font-size:14.5px;
        line-height:1.62;
        text-align:center;
    }

    .card-list{
        width:100%;
        text-align:left;
        padding-left:0;
    }

    .card-list li{
        font-size:13.8px;
        line-height:1.45;
    }

    #comparativo{
        padding-left:12px;
        padding-right:12px;
        overflow:hidden;
    }

    .comparison-table{
        width:100%;
        max-width:100%;
        border-radius:20px;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
    }

    .comparison-table .row{
        min-width:940px;
        grid-template-columns:minmax(165px, 1.25fr) repeat(6, minmax(110px, 1fr));
    }

    .comparison-table .row div{
        padding:13px 10px;
        font-size:13px;
        line-height:1.3;
    }

    .comparison-table .row div:first-child{
        left:0;
        z-index:3;
        font-size:13px;
    }

    .comparison-table .row.header div{
        font-size:13px;
    }

    .comparison-table .row.monthly div{
        font-size:13.5px;
    }

    .promo-from{
        font-size:11px;
    }

    .promo-to{
        font-size:12.5px;
        padding:3px 7px;
    }

    .total-main{
        font-size:13px;
    }

    .total-sub{
        font-size:11px;
    }

    .module-card{
        gap:10px;
    }

    .module-price{
        font-size:1.35rem !important;
        margin:4px 0 4px !important;
    }

    .module-intro{
        font-size:14.3px;
    }

    .module-includes{
        width:100%;
        padding:15px 16px;
        text-align:left;
    }

    .module-includes strong{
        font-size:14px;
    }

    .module-includes li{
        font-size:13.5px;
        line-height:1.4;
    }

    .module-dependency-note{
        width:100%;
        font-size:11.8px !important;
        text-align:left !important;
        padding:9px 11px;
    }

    #planos .card{
        padding:34px 24px 32px;
    }

    #planos .card.destaque{
        padding-top:34px;
    }

    #planos .card.destaque::before{
        display:none !important;
        content:none !important;
    }

    #planos h3{
        font-size:22px;
        line-height:1.25;
        padding-right:0;
        padding-left:0;
    }

    #planos .price{
        font-size:28px;
        line-height:1.15;
    }

    #planos .price-small{
        font-size:13.5px;
    }

    .plan-card-list{
        width:100%;
        margin:22px 0 26px;
        text-align:left;
    }

    .plan-card-list li{
        font-size:14px;
        align-items:center;
        justify-content:space-between;
    }

    #planos button{
        width:100%;
        max-width:280px;
    }

    .storage-card-header{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:12px;
    }

    .storage-info-card h3,
    .storage-price-card h3{
        font-size:20px;
        text-align:center;
        line-height:1.25;
    }

    .storage-info-card p{
        font-size:14.5px;
        text-align:center;
    }

    .storage-alert{
        text-align:left;
        font-size:13.5px;
        padding:14px 15px;
    }

    .storage-row{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .storage-row div{
        padding:14px 14px;
        font-size:14px;
    }

    .storage-row div:last-child{
        text-align:right;
        padding-top:14px;
    }

    .term-card-header{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .term-link{
        width:100%;
        justify-content:center;
        font-size:13.5px;
    }

    .modal-backdrop{
        padding:14px;
        align-items:flex-start;
        overflow-y:auto;
    }

    .modal-box{
        margin-top:24px;
        max-width:100%;
        border-radius:20px;
    }

    .modal-close{
        width:38px;
        height:38px;
        top:12px;
        right:12px;
    }

    .modal-header{
        padding:28px 22px 16px;
    }

    .modal-header h3{
        font-size:21px;
        padding-right:38px;
        line-height:1.25;
    }

    .modal-header p{
        font-size:13.5px;
    }

    .modal-content{
        padding:22px;
        max-height:none;
        overflow:visible;
    }

    .modal-section{
        padding:15px 0;
    }

    .modal-section h4{
        font-size:15px;
    }

    .modal-section p{
        font-size:13.8px;
        line-height:1.55;
    }

    #assinar.assinatura-section{
        padding:92px 16px 70px;
    }

    #assinar h2{
        font-size:27px;
    }

    #assinar .assinatura-subtitle{
        font-size:14.5px;
        line-height:1.55;
    }

    .form-assinatura{
        width:100%;
        max-width:100%;
        padding:30px 22px;
        border-radius:22px;
    }

    .form-group input,
    .form-group select{
        font-size:14.5px;
        padding:14px 15px;
    }

    #assinar .form-actions{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }

    #assinar .btn-primary,
    #assinar .btn-cancelar{
        width:100%;
        text-align:center;
    }

    .g-recaptcha{
        transform:scale(.86);
        transform-origin:left center;
    }

    .footer-container{
        padding:42px 22px 28px;
        gap:30px;
    }

    .footer-brand-box{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:12px;
    }

    .footer-logo-mini,
    .footer-brand-box img{
        width:68px !important;
        height:68px !important;
        max-width:68px !important;
        max-height:68px !important;
    }

    .footer-col{
        text-align:center;
    }

    .footer-col h3{
        font-size:24px;
    }

    .footer-col h4{
        font-size:17px;
        margin-bottom:12px;
    }

    .footer-brand-col p{
        font-size:14.5px;
        line-height:1.65;
        margin-left:auto;
        margin-right:auto;
    }

    .footer-badges{
        justify-content:center;
        gap:7px;
    }

    .footer-badges span{
        font-size:12px;
        padding:6px 10px;
    }

    .footer-cta{
        width:100%;
        justify-content:center;
    }

    .footer-contact,
    .footer-links{
        align-items:center;
    }

    .footer-contact li,
    .footer-links a{
        font-size:14px;
        justify-content:center;
    }

    .footer-bottom{
        padding:16px 18px 20px;
    }

    .footer-bottom p{
        font-size:12.8px;
        line-height:1.5;
    }

    .whatsapp-text{
        display:none;
    }

    .whatsapp-float{
        left:18px;
        bottom:18px;
        padding:14px;
        border-radius:50%;
    }

    .whatsapp-float img{
        width:25px;
        height:25px;
    }
}

/* ==================================================
   CELULAR PEQUENO
================================================== */

@media(max-width:420px){

    .hero h1{
        font-size:27px;
    }

    .hero-subtitle{
        font-size:14.8px;
    }

    .hero-logo-box img{
        max-width:285px;
        max-height:260px;
    }

    .section{
        padding:62px 15px;
    }

    .section-title{
        font-size:25px;
    }

    .card,
    .feature-card,
    .module-card,
    .storage-info-card,
    .storage-price-card,
    .term-card{
        padding:25px 19px;
        border-radius:20px;
    }

    #planos .price{
        font-size:25px;
    }

    #planos h3{
        font-size:20px;
    }

    #planos .card.destaque{
        padding-top:34px;
    }

    #planos .card.destaque::before{
        display:none !important;
        content:none !important;
    }

    .comparison-table .row{
        min-width:900px;
        grid-template-columns:minmax(155px, 1.2fr) repeat(6, minmax(105px, 1fr));
    }

    .comparison-table .row div{
        font-size:12.5px;
        padding:12px 8px;
    }

    .storage-row div{
        font-size:13.5px;
        padding:13px 12px;
    }

    .g-recaptcha{
        transform:scale(.78);
        margin-left:-18px;
    }
}