:root {
    --primary: #00b3a8;
    --primary-dark: #00857d;
    --secondary: #1757d4;
    --hero-gradient: linear-gradient(to bottom, #370b6f, #00429b, #006dba, #0095ce, #2dbcdc);
    --ink: #143044;
    --text: #325167;
    --muted: #69859a;
    --surface: #ffffff;
    --surface-alt: #f4fafb;
    --border: #d8e5ea;
    --shadow: 0 18px 40px rgba(13, 43, 63, 0.12);
    --shadow-soft: 0 12px 24px rgba(13, 43, 63, 0.08);
    --radius: 28px;
}

@media (min-width: 961px) {
    .mobile-menu-heading,
    .mobile-menu-footer,
    .mobile-nav-icon { display: none; }
}

.financial-preview{position:relative;z-index:1;width:440px;max-width:100%;padding:20px;border:1px solid #dbe8f3;border-radius:18px;background:#fff;box-shadow:0 28px 55px rgba(26,82,128,.16);transform:rotate(-1.4deg)}.financial-preview>header{display:flex;align-items:center;justify-content:space-between;color:#1c3850;font-size:.82rem;font-weight:800}.financial-preview>header small{padding:6px 9px;border-radius:7px;color:#5e7589;background:#f2f7fb;font-size:.62rem;font-weight:600}.financial-balance{display:grid;gap:5px;margin:17px 0 12px;padding:17px 18px;border-radius:13px;color:#fff;background:linear-gradient(130deg,#1757a2,#1696c6)}.financial-balance span,.financial-balance small{font-size:.66rem;font-weight:500;opacity:.88}.financial-balance strong{font-size:1.37rem;letter-spacing:-.03em}.financial-metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px}.financial-metrics div{display:grid;gap:4px;padding:12px 13px;border:1px solid #e6eef4;border-radius:10px}.financial-metrics span{color:#718498;font-size:.62rem}.financial-metrics b{color:#23445e;font-size:.78rem}.financial-metrics div:first-child b{color:#168363}.financial-metrics div:last-child b{color:#ca5f64}.financial-shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.financial-shortcut{display:grid;grid-template-columns:25px 1fr;align-items:center;column-gap:6px;padding:8px 6px;border:1px solid #e5edf3;border-radius:9px;background:#fff}.financial-shortcut i{display:grid;place-items:center;grid-row:span 2;width:25px;height:25px;border-radius:7px;font-size:.66rem;font-style:normal;font-weight:800}.financial-shortcut span{color:#39546a;font-size:.55rem;font-weight:700;white-space:nowrap}.financial-shortcut small{color:#8293a2;font-size:.48rem;white-space:nowrap}.financial-shortcut.payable i{color:#c46754;background:#fff0ec}.financial-shortcut.receivable i{color:#168363;background:#e9f8f2}.financial-shortcut.cash i{color:#2672af;background:#eaf4ff}.financial-flow{margin-top:14px;padding:13px 14px 7px;border-radius:11px;background:#f6faff}.financial-flow-title{display:flex;justify-content:space-between;color:#31536b;font-size:.68rem}.financial-flow-title span{color:#7c91a2;font-size:.62rem}.financial-flow svg{display:block;width:100%;height:78px;margin-top:4px}@media(max-width:900px){.financial-preview{margin:0 auto;transform:rotate(-1deg)}}

.contracts-preview-exact .exact-status { top: 82px !important; color: #1f9f72; }

body.page-contracts .contracts-preview{visibility:hidden}.contracts-custom-hero{position:relative}.contracts-preview-exact{position:absolute;z-index:2;top:135px;right:calc((100% - 1180px)/2);width:540px;min-height:390px;padding:18px;border:1px solid #e8e5f0;border-radius:18px;background:#fff;box-shadow:0 32px 70px rgba(9,101,167,.16);transform:rotate(-1.2deg)}.exact-head{display:flex;gap:8px;align-items:center;color:#172442;font-size:13px}.exact-paper{position:relative;margin:22px 38px 14px 20px;min-height:270px;padding:22px 20px;border:1px solid #f0eef5;background:#fff;box-shadow:0 10px 24px rgba(9,101,167,.1)}.exact-title{padding:11px 12px;border-radius:7px;color:#0b8ddd;background:#e6f7ff;font-size:11px;font-weight:800}.exact-paper p{color:#697087;font-size:9px;line-height:1.65}.exact-paper span{position:absolute;bottom:13px;left:20px;padding:7px 10px;border-radius:99px;color:#1e8d68;background:#f1fbf7;font-size:8px;font-weight:700}.exact-footer{display:flex;align-items:center;gap:10px;margin:0 28px;color:#172442;font-size:11px;font-weight:700}.exact-footer img{width:82px;height:auto}.exact-card{position:absolute;z-index:3;display:flex;gap:10px;align-items:center;width:220px;padding:12px 14px;border:1px solid #eeebf5;border-radius:12px;background:#fff;box-shadow:0 16px 34px rgba(9,101,167,.16);font-size:15px}.exact-card b{font-size:12px}.exact-card small{display:block;margin-top:3px;color:#8d92a2;font-size:10px;font-weight:400}.exact-status{top:122px;right:-52px;color:#1f9f72}.exact-legal{top:202px;right:-42px;color:#0b8ddd}.exact-icp{top:282px;right:-18px;color:#0b8ddd}@media(max-width:900px){.contracts-preview-exact{position:relative;top:auto;right:auto;margin:0 auto;transform:scale(.8);transform-origin:top center;margin-bottom:-65px}}

/* Atualização da prévia de contratos conforme o layout aprovado. */
.contracts-preview{width:540px!important;min-height:390px!important;padding:18px!important;border-radius:18px!important}.contract-document{margin:22px 38px 28px 20px!important;min-height:285px!important;padding:22px 20px 26px!important}.contract-title{padding:11px 12px!important;border-radius:7px!important;font-size:11px!important}.contract-copy{padding:20px 8px 0!important;font-size:9px!important;line-height:1.65!important}.contracts-preview .clicksign-card{bottom:16px!important;left:38px!important;width:300px!important;gap:12px!important}.contracts-preview .contract-card.status-card{top:122px!important;right:-52px!important;width:220px!important}.contracts-preview .contract-card.legal-card{top:202px!important;right:-42px!important;width:210px!important}.contracts-preview .contract-card.icp-card{top:282px!important;right:-18px!important;width:220px!important}.contracts-custom-grid::after{z-index:0!important}.contracts-preview{z-index:1!important}

.clicksign-brand { font-size: 0 !important; background-image: url('/images/clicksign.png') !important; background-position: center; background-repeat: no-repeat; background-size: 22px 22px; }
.contracts-preview .contract-card .clicksign-brand { background-image: url('/images/clicksign.png') !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 22px 22px !important; }

body.page-contracts .shared-page-banner{display:none}.contracts-custom-hero{padding:150px 0 90px;overflow:hidden;background:#fff}.contracts-custom-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.contracts-custom-copy>span{color:#109fe3;font-size:.74rem;font-weight:800;letter-spacing:.09em}.contracts-custom-copy h1{margin:18px 0;color:var(--ink);font-size:clamp(2.3rem,4vw,3.8rem);line-height:1.08}.contracts-custom-copy h1 em{color:#109fe3;font-style:normal}.contracts-custom-copy p{max-width:520px;margin-bottom:28px;color:#617089;line-height:1.65}.contracts-preview{position:relative;width:500px;min-height:365px;padding:18px;border:1px solid #e8e5f0;border-radius:18px;background:#fff;box-shadow:0 32px 70px rgba(9,101,167,.16);transform:rotate(-1.2deg)}.contract-top{display:flex;justify-content:space-between;color:#172442;font-size:11px}.contract-top span{color:#8d92a2}.contract-document{position:relative;margin:22px 38px 25px 20px;min-height:255px;padding:22px 20px;border:1px solid #f0eef5;background:#fff;box-shadow:0 10px 24px rgba(9,101,167,.1)}.contract-title{padding:11px 12px;border-radius:7px;color:#0b8ddd;background:#e6f7ff;font-size:11px;font-weight:800}.contract-copy{padding:18px 8px 0;color:#697087;font-size:8px;line-height:1.55}.contract-copy i{display:inline-block;width:120px;border-bottom:1px solid #a7aabb}.signed-badge{position:absolute;bottom:14px;left:20px;padding:6px 9px;border-radius:99px;color:#1e8d68;background:#f1fbf7;font-size:7px}.contract-card{position:absolute;z-index:3;display:flex;gap:10px;align-items:center;width:190px;padding:11px 13px;border:1px solid #eeebf5;border-radius:12px;background:#fff;box-shadow:0 16px 34px rgba(9,101,167,.16)}.contract-card>b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#0b8ddd;background:#e6f7ff}.contract-card div{display:grid;gap:3px}.contract-card strong{font-size:10px}.contract-card small{color:#8d92a2;font-size:8px}.clicksign-card{top:38px;right:-28px}.clicksign-brand{color:#0b8ddd!important;background:#fff!important;border:1px solid #ece9f2;border-radius:9px!important;font-size:16px}.status-card{top:112px;right:-48px}.status-card>b{color:#1f9f72;background:#ddf7eb}.legal-card{top:186px;right:-35px}.icp-card{top:260px;right:-12px}@media(max-width:900px){.contracts-custom-hero{padding:125px 0 55px}.contracts-custom-grid{grid-template-columns:1fr}.contracts-preview{margin:0 auto;max-width:90%;transform:scale(.88);transform-origin:top center;margin-bottom:-40px}}
.contracts-custom-grid{position:relative}.contracts-custom-grid::after{content:"";position:absolute;z-index:0;width:430px;height:430px;top:50%;right:58px;transform:translateY(-50%);border-radius:50%;background:#fff0f7}.contracts-custom-copy,.contracts-preview{z-index:1}.contracts-preview::before{display:none}

.contracts-preview .clicksign-card{top:auto;right:auto;bottom:18px;left:48px;gap:14px;width:260px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.contracts-preview .clicksign-card div{display:flex;align-items:center}.contracts-preview .clicksign-card small{display:inline;margin:0;color:#59627d;font-size:10px;font-weight:600;white-space:nowrap}.contracts-preview .clicksign-card strong{display:none}.contracts-preview .clicksign-brand{width:78px;height:28px;border:0!important;border-radius:0!important;background-color:transparent!important;background-size:contain!important}

.contracts-preview .contract-card.clicksign-card{bottom:18px!important;left:48px!important;right:auto!important;width:260px!important;gap:14px!important}.contracts-preview .contract-card.clicksign-card .clicksign-brand{width:78px!important;height:28px!important;background-size:contain!important}.contracts-preview .contract-card.clicksign-card small{font-size:10px!important;white-space:nowrap!important}

.feature-page-hero[data-visual=contratos] .feature-page-visual::before,.feature-page-hero[data-visual=contratos] .feature-page-visual::after{position:absolute;z-index:5;padding:11px 13px 11px 44px;border-radius:9px;background:#fff;box-shadow:0 16px 30px rgba(9,101,167,.16);font-size:.62rem;font-weight:700;white-space:pre-line;background-repeat:no-repeat;background-position:12px 12px;background-size:25px 25px}.feature-page-hero[data-visual=contratos] .feature-page-visual::before{top:32px;right:-8px;color:#2c70c5;content:'clicksign\AIntegração conectada';background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25'%3E%3Ccircle cx='12.5' cy='12.5' r='12.5' fill='%23e7f1ff'/%3E%3Cpath d='M16 8.5a5.5 5.5 0 1 0 0 8' fill='none' stroke='%232c70c5' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}.feature-page-hero[data-visual=contratos] .feature-page-visual::after{top:112px;right:-24px;color:#327f61;content:'Validade jurídica\AEcossistema ICP-Brasil';background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25'%3E%3Ccircle cx='12.5' cy='12.5' r='12.5' fill='%23ddf7eb'/%3E%3Cpath d='m8 12 3 3 6-7' fill='none' stroke='%2325a877' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

.feature-page-hero[data-visual=contratos] .feature-page-hero-copy h1 { font-size: 0; }.feature-page-hero[data-visual=contratos] .feature-page-hero-copy h1::after { content: 'Gere contratos com praticidade usando templates.'; display: block; font-size: clamp(2.3rem,4vw,3.8rem); line-height: 1.08; letter-spacing: -.05em; background: linear-gradient(90deg,var(--ink) 0 61%,#109fe3 61%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.feature-page-hero[data-visual=contratos] .feature-window-content{position:relative;min-height:205px;padding:18px 28px!important;background:#f5f4fb!important}.feature-page-hero[data-visual=contratos] .feature-window-content::after{content:'CONTRATO DE PRESTAÇÃO DE SERVIÇOS\A\A Pelo presente instrumento, as partes qualificadas celebram o presente contrato, mediante as condições abaixo.\A\A 1. DO OBJETO\A O presente documento estabelece os serviços contratados e as responsabilidades das partes.\A\A 2. DA ASSINATURA\A\A Assinatura do cliente  ____________________';position:absolute;inset:14px 45px 14px 28px;padding:58px 16px 20px;white-space:pre-line;color:#697087;background:#fff;box-shadow:0 8px 18px rgba(9,101,167,.1);font-size:.45rem;line-height:1.55}.feature-page-hero[data-visual=contratos] .feature-window-content::before{position:relative;z-index:1}.feature-page-hero[data-visual=contratos] .feature-window-content i{position:relative;z-index:1;opacity:0}
.feature-page-hero[data-visual=contratos] .feature-window-content::before{position:absolute;z-index:2;top:26px;right:61px;left:45px;padding:10px;border-radius:4px;color:#0b8ddd;background:#e6f7ff;font-size:.65rem;font-weight:700}.feature-page-hero[data-visual=contratos] .feature-window-content i{position:relative;z-index:1;opacity:0}

.feature-page-hero[data-visual=contratos] .feature-window-content{display:block;padding:10px;border-radius:8px;background:#fbfbfe}.feature-page-hero[data-visual=contratos] .feature-window-content::before{content:'▤  Contrato de prestação de serviço';display:block;padding:10px;border-radius:6px;color:#0b8ddd;background:#e6f7ff;font-size:.65rem;font-weight:700}.feature-page-hero[data-visual=contratos] .feature-window-content i{display:block;width:100%;height:7px;margin:10px 0;border-radius:4px;background:#e8e8f0}.feature-page-hero[data-visual=contratos] .feature-window-content i:nth-child(2),.feature-page-hero[data-visual=contratos] .feature-window-content i:nth-child(5){width:68%}.feature-page-hero[data-visual=contratos] .feature-window-card{padding-left:44px;background:#f5fbff}.feature-page-hero[data-visual=contratos] .feature-window-card::before{content:'✓';position:absolute;top:11px;left:12px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#25a877;background:#ddf7eb;font-size:.75rem}.feature-page-hero[data-visual=contratos] .feature-window-card b{font-size:0;color:#327f61}.feature-page-hero[data-visual=contratos] .feature-window-card b::after{content:'Assinatura eletrônica';font-size:.7rem}
.feature-page-hero[data-visual=contratos] .feature-window-card{position:absolute;z-index:3;right:-18px;bottom:34px;width:184px;min-height:52px;padding:12px 12px 12px 47px;border-radius:9px;background:#fff;box-shadow:0 16px 30px rgba(9,101,167,.16)}.feature-page-hero[data-visual=contratos] .feature-window-card::before{top:14px;left:14px}.feature-page-hero[data-visual=contratos] .feature-window-card small{display:block;font-size:.52rem}

.feature-page-hero[data-visual=whatsapp] .feature-window-card { padding-left: 50px !important; background-position: 16px 11px !important; }.feature-page-hero[data-visual=whatsapp] .feature-window-card::after { content: 'Configuramos seu número oficial na META' !important; }

.feature-page-hero[data-visual=whatsapp] .feature-window-card { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='13' fill='%23ddf7eb'/%3E%3Cpath d='m8 13 3 3 6-7' fill='none' stroke='%2325a877' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-position: 10px 11px; background-size: 26px 26px; }

.feature-page-hero[data-visual=whatsapp] .feature-window-card { position: absolute !important; z-index: 4; top: 186px; right: auto !important; left: calc(100% - 145px) !important; width: 172px; min-height: 48px; padding: 10px 10px 10px 42px; border-radius: 9px; color: #327f61; background: #fff; box-shadow: 0 16px 30px rgba(9,101,167,.16); background-image: radial-gradient(circle at 23px 24px,#ddf7eb 0 13px,transparent 14px); background-repeat: no-repeat; }.feature-page-hero[data-visual=whatsapp] .feature-window-card b,.feature-page-hero[data-visual=whatsapp] .feature-window-card small { display: none; }.feature-page-hero[data-visual=whatsapp] .feature-window-card::after { content: '✓  Configuramos seu número oficial na META'; position: static !important; display: block; width: auto !important; padding: 0 !important; color: #327f61; background: transparent !important; box-shadow: none !important; font-size: .55rem; font-weight: 700; line-height: 1.35; }

.feature-page-hero[data-visual=whatsapp] .feature-page-visual::after { top: 112px !important; right: -22px !important; bottom: auto !important; left: auto !important; max-width: 152px; padding: 10px 10px 10px 43px; font-size: .56rem; }

.feature-page-hero[data-visual=whatsapp] .contracts-hero-actions { position: relative; margin-bottom: 42px; }.feature-page-hero[data-visual=whatsapp] .contracts-hero-actions::after { content: '✓ Configuramos seu número oficial na META'; position: absolute; top: 58px; left: 0; display: inline-flex; width: 245px; padding: 7px 10px; border: 1px solid #d6f0e5; border-radius: 999px; color: #278560; background: #f2fbf7; font-size: .62rem; font-weight: 700; }

.feature-page-hero[data-visual=whatsapp] .contracts-hero-actions { margin-bottom: 0; }.feature-page-hero[data-visual=whatsapp] .contracts-hero-actions::after { display: none; }.feature-page-hero[data-visual=whatsapp] .feature-window-card::after { content: '✓  Configuramos seu número oficial na META'; position: absolute; z-index: 3; top: 158px; right: -30px; width: 168px; padding: 10px 12px 10px 40px; border-radius: 9px; color: #327f61; background: #fff; box-shadow: 0 16px 30px rgba(9,101,167,.16); font-size: .55rem; font-weight: 700; line-height: 1.35; background-image: radial-gradient(circle at 24px 24px,#ddf7eb 0 13px,transparent 14px); background-repeat: no-repeat; }

.feature-page-hero[data-visual=whatsapp] .segments-eyebrow { font-size: 0; }.feature-page-hero[data-visual=whatsapp] .segments-eyebrow img { display: none; }.feature-page-hero[data-visual=whatsapp] .segments-eyebrow::before { content: '✦'; color: #109fe3; font-size: 1rem; line-height: 1; }.feature-page-hero[data-visual=whatsapp] .segments-eyebrow::after { content: 'INTEGRAÇÃO COM WHATSAPP'; font-size: .74rem; letter-spacing: .095em; background: linear-gradient(90deg,var(--ink) 0 61%,#109fe3 61%); -webkit-background-clip: text; background-clip: text; color: transparent; }.feature-page-hero[data-visual=whatsapp] .segments-eyebrow { color: #109fe3; }

.feature-page-hero[data-visual=whatsapp] .feature-page-visual::after { right: -4px; bottom: 28px; left: auto; }

.feature-page-hero[data-visual=whatsapp] .feature-page-visual::before,.feature-page-hero[data-visual=whatsapp] .feature-page-visual::after{position:absolute;z-index:2;padding:12px 14px 12px 48px;border-radius:9px;background:#fff;box-shadow:0 16px 30px rgba(9,101,167,.16);font-size:.65rem;font-weight:700;white-space:pre-line;background-repeat:no-repeat;background-position:12px 12px;background-size:26px 26px}.feature-page-hero[data-visual=whatsapp] .feature-page-visual::before{top:28px;right:-4px;color:#327f61;content:'API Oficial da Meta\AIntegração homologada';background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='13' fill='%23ddf7eb'/%3E%3Cpath d='m8 13 3 3 6-7' fill='none' stroke='%2325a877' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.feature-page-hero[data-visual=whatsapp] .feature-page-visual::after{bottom:28px;left:-4px;color:#5d4aa7;content:'API Não Oficial\A QR Code';background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='13' fill='%23eeeaff'/%3E%3Cpath d='M8 8h4v4H8zm6 0h4v4h-4zM8 14h4v4H8zm7 1h3v3h-3z' fill='%236b4ce6'/%3E%3C/svg%3E")}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(0, 179, 168, 0.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fbfefe 100%);
}

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

img {
    max-width: 100%;
    display: block;
}

.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background-color: transparent;
}

.preloader .loader {
    position: absolute;
    top: 43%;
    left: 0;
    right: 0;
    z-index: 2;
    width: 50px;
    height: 50px;
    transform: translateY(-43%);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    transition: 0.4s;
}

.preloader .loader .box {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background-color: #ffffff;
    animation: preloader-box-rotate 0.5s linear infinite;
}

.preloader .loader .shadow {
    position: absolute;
    top: 59px;
    left: 0;
    width: 50px;
    height: 5px;
    opacity: 0.1;
    border-radius: 50%;
    background-color: #000000;
    animation: preloader-shadow-scale 0.5s linear infinite;
}

.preloader::before,
.preloader::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    width: 60%;
    height: 100%;
    background-color: #006dba;
    transition: 0.9s;
}

.preloader::before {
    left: 0;
}

.preloader::after {
    right: 0;
}

.preloader.preloader-deactivate {
    visibility: hidden;
    pointer-events: none;
}

.preloader.preloader-deactivate::before,
.preloader.preloader-deactivate::after {
    width: 0;
}

.preloader.preloader-deactivate .loader {
    opacity: 0;
    visibility: hidden;
}

@keyframes preloader-box-rotate {
    17% {
        border-bottom-right-radius: 3px;
    }

    25% {
        transform: translateY(9px) rotate(22.5deg);
    }

    50% {
        transform: translateY(18px) scale(1, 0.9) rotate(45deg);
        border-bottom-right-radius: 40px;
    }

    75% {
        transform: translateY(9px) rotate(67.5deg);
    }

    100% {
        transform: translateY(0) rotate(90deg);
    }
}

@keyframes preloader-shadow-scale {
    50% {
        transform: scale(1.2, 1);
    }
}

button {
    font: inherit;
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(216, 229, 234, 0.75);
    transition: background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 84px;
}

.brand-logo {
    width: 172px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-weight: 500;
    color: var(--ink);
}

.site-nav-backdrop {
    display: none;
}

.site-nav-close {
    display: none;
}

.site-nav > a,
.nav-dropdown-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: rgba(0, 179, 168, 0.12);
    color: var(--primary-dark);
    flex-shrink: 0;
}

.nav-link-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.site-nav > a::after,
.nav-dropdown-toggle::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 0.25s ease;
}

.site-nav > a:hover::after,
.nav-dropdown:hover .nav-dropdown-toggle::after {
    width: 100%;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--ink);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 280px;
    display: grid;
    gap: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-menu a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    color: var(--ink);
    transition: background 0.25s ease, transform 0.25s ease;
}

.nav-dropdown-menu a:hover {
    background: var(--surface-alt);
    transform: translateX(2px);
}

.nav-dropdown-menu a span:last-child {
    color: var(--ink);
}

.nav-dropdown-menu a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 8px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 0.25s ease;
}

.nav-dropdown-menu a:hover::after,
.nav-dropdown-menu a:focus::after {
    width: calc(100% - 28px);
}

.submenu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(23, 87, 212, 0.09);
    font-size: 1rem;
    flex-shrink: 0;
    color: var(--secondary);
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    border: 0;
    background: transparent;
}

.menu-toggle span {
    width: 26px;
    height: 3px;
    border-radius: 999px;
    background: var(--ink);
    transition: transform 0.24s ease, opacity 0.24s ease;
}

body.menu-open {
    overflow: hidden;
}

body.menu-open .site-header {
    z-index: 2147483600 !important;
}

body.menu-open #tidio-chat,
body.menu-open #tidio-chat-iframe,
body.menu-open [id*="tidio"],
body.menu-open [class*="tidio"],
body.menu-open iframe[src*="tidio"],
body.menu-open .floating-whatsapp,
body.menu-open .whatsapp-float {
    display: none !important;
}

.menu-toggle.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 14px 28px rgba(0, 128, 128, 0.2);
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.header-actions .button {
    min-width: 176px;
    text-align: center;
}

.header-login {
    order: 2;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 13px 35px;
    border: none;
    border-radius: 5px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    background: #3e57d0;
    box-shadow: 0 7px 25px rgba(62, 87, 208, 0.25);
    transition: color 0.4s ease, box-shadow 0.4s ease, transform 0.2s ease;
}

.header-login:hover,
.header-login:focus {
    color: #ffffff;
    box-shadow: 0 10px 28px rgba(23, 87, 212, 0.24);
}

.header-login span {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 0;
    height: 0;
    display: block;
    border-radius: 30px;
    background: #1757d4;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
}

.header-login:hover span,
.header-login:focus span {
    width: 200%;
    height: 500px;
}

.header-cta {
    order: 1;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 13px 35px;
    border: none;
    border-radius: 5px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    background: #20a4e8;
    box-shadow: 0 7px 25px rgba(123, 104, 238, 0.25);
    transition: color 0.4s ease, box-shadow 0.4s ease, transform 0.2s ease;
}

.header-cta span {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 0;
    height: 0;
    display: block;
    border-radius: 30px;
    background: #3e57d0;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
}

.header-cta:hover,
.header-cta:focus {
    color: #ffffff;
    box-shadow: 0 10px 28px rgba(62, 87, 208, 0.24);
}

.header-cta:hover span,
.header-cta:focus span {
    width: 200%;
    height: 500px;
}

.mobile-nav-login {
    display: none;
}

.plan-cta {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 13px 35px;
    border: none;
    border-radius: 5px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    background: #20a4e8;
    box-shadow: 0 7px 25px rgba(123, 104, 238, 0.25);
    transition: color 0.4s ease, box-shadow 0.4s ease, transform 0.2s ease;
}

.plan-cta span {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 0;
    height: 0;
    display: block;
    border-radius: 30px;
    background: #3e57d0;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
}

.plan-cta:hover,
.plan-cta:focus {
    color: #ffffff;
    box-shadow: 0 10px 28px rgba(62, 87, 208, 0.24);
}

.plan-cta:hover span,
.plan-cta:focus span {
    width: 200%;
    height: 500px;
}

.button-secondary {
    color: var(--ink);
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.82);
}

.pulse {
    animation: pulse 2.1s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 179, 168, 0.3); }
    70% { box-shadow: 0 0 0 18px rgba(0, 179, 168, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 179, 168, 0); }
}

.hero-section,
.page-hero {
    padding: 72px 0 48px;
}

.hero-grid,
.page-hero-grid,
.split-feature,
.feature-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px;
    align-items: center;
}

.hero-copy h1,
.page-hero h1 {
    margin: 12px 0 18px;
    font-size: clamp(2.3rem, 4vw, 4.4rem);
    line-height: 1.05;
    color: var(--ink);
}

.hero-copy p,
.page-hero p,
.section-heading p,
.info-card p,
.feature-line span,
.feature-panel p,
.site-footer p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text);
}

.hero-copy p {
    max-width: 590px;
    font-size: 1rem;
    line-height: 1.6;
}

.hero-rotator {
    position: relative;
}

.hero-slide {
    display: none;
    animation: heroFade 0.35s ease;
}

.hero-slide.is-active {
    display: block;
}

.hero-slide .button {
    margin-top: 26px;
}

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

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-dark);
    background: rgba(0, 179, 168, 0.12);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 30px 0;
}

.hero-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

.hero-dot {
    width: 28px;
    height: 6px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: width 0.24s ease, background-color 0.24s ease, border-color 0.24s ease, opacity 0.24s ease;
    opacity: 0.72;
}

.floating-whatsapp {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 20px 36px rgba(18, 140, 126, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: whatsappFloat 2.6s ease-in-out infinite;
}

.floating-whatsapp:hover {
    transform: scale(1.08) translateY(-4px);
    box-shadow: 0 26px 44px rgba(18, 140, 126, 0.4);
}

.floating-whatsapp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    overflow: hidden;
}

.floating-whatsapp-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transform: none;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

@keyframes whatsappFloat {
    0% {
        transform: translateY(0) scale(1);
        box-shadow: 0 20px 36px rgba(18, 140, 126, 0.26);
    }
    50% {
        transform: translateY(-8px) scale(1.04);
        box-shadow: 0 28px 46px rgba(18, 140, 126, 0.36);
    }
    100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 20px 36px rgba(18, 140, 126, 0.26);
    }
}

.hero-dot.is-active {
    width: 42px;
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.95);
    opacity: 1;
}

.hero-highlights {
    list-style: none;
    display: grid;
    gap: 12px;
    padding: 0;
    margin: 0;
}

.hero-highlights li::before,
.pricing-card li::before {
    content: "•";
    color: var(--primary);
    font-weight: 800;
    margin-right: 10px;
}

.pricing-card li::before {
    display: none;
}

.card-image-frame {
    position: relative;
    padding: 18px;
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(232, 245, 248, 0.95));
    box-shadow: var(--shadow);
}

.card-image-frame img {
    width: 100%;
    border-radius: calc(var(--radius) - 8px);
}

.financial-dashboard-frame {
    padding: 14px;
    background: linear-gradient(145deg, #e8f5fc, #f8fbff);
}

.payable-dashboard-frame { padding: 14px; background: linear-gradient(145deg, #fff6f1, #fcfbff); }
.payable-list em.receivable { color: #2379ac; background: #e9f4ff; }
.cash-register-frame { padding: 14px; background: linear-gradient(145deg, #eaf9f6, #f8fcfb); }
.cash-register { padding: 20px; border: 1px solid #dceee9; border-radius: calc(var(--radius) - 8px); background: #fff; box-shadow: 0 14px 30px rgba(27, 98, 79, .09); }.cash-register-head { display: flex; justify-content: space-between; align-items: center; }.cash-register-head>div { display: grid; gap: 2px; }.cash-register-head div span { color: #6f8a84; font-size: .67rem; }.cash-register-head strong { color: #264a43; font-size: 1rem; }.cash-register-head>span { padding: 6px 8px; border-radius: 7px; color: #50726a; background: #eef7f4; font-size: .59rem; font-weight: 700; }
.cash-register-total { display: flex; justify-content: space-between; align-items: center; margin: 17px 0 10px; padding: 17px; border-radius: 13px; color: #fff; background: linear-gradient(125deg, #167963, #17a485); }.cash-register-total div { display: grid; gap: 4px; }.cash-register-total span { font-size: .69rem; opacity: .84; }.cash-register-total strong { font-size: 1.35rem; letter-spacing: -.03em; }.cash-register-total>i { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; font-size: .8rem; font-style: normal; font-weight: 800; }
.cash-register-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.cash-register-summary span { display: flex; align-items: center; gap: 5px; padding: 9px; border-radius: 8px; color: #638079; background: #f2f9f7; font-size: .56rem; }.cash-register-summary i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #168363; background: #ddf6ec; font-size: .6rem; font-style: normal; font-weight: 800; }.cash-register-summary span:nth-child(2) i { color: #c36b51; background: #fff0e9; }.cash-register-summary b { margin-left: auto; color: #36564f; font-size: .6rem; white-space: nowrap; }
.cash-register-list-head { display: flex; justify-content: space-between; margin-top: 16px; }.cash-register-list-head strong { color: #36564f; font-size: .69rem; }.cash-register-list-head span { color: #17846a; font-size: .55rem; font-weight: 700; }.cash-register-list>div { display: grid; grid-template-columns: 27px 1fr auto; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid #edf4f1; }.cash-register-list>div:first-child { margin-top: 8px; }.cash-register-list>div>i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; font-size: .65rem; font-style: normal; font-weight: 800; }.cash-register-list .cash-in { color: #168363; background: #e5f8ef; }.cash-register-list .cash-out { color: #c36b51; background: #fff0e9; }.cash-register-list div>div { display: grid; gap: 2px; }.cash-register-list b { color: #405c56; font-size: .6rem; }.cash-register-list small { color: #8aa19b; font-size: .5rem; }.cash-register-list>div>strong { color: #218268; font-size: .6rem; }.cash-register-list>div:nth-child(2)>strong { color: #c36b51; }
.payable-dashboard { padding: 20px; border: 1px solid #efe5e4; border-radius: calc(var(--radius) - 8px); background: #fff; box-shadow: 0 14px 30px rgba(89, 59, 57, .09); }
.payable-dashboard-head { display: flex; align-items: center; justify-content: space-between; }.payable-dashboard-head>div { display: grid; gap: 2px; }.payable-dashboard-head span { color: #8c8180; font-size: .68rem; }.payable-dashboard-head strong { color: #3b3233; font-size: 1rem; }.payable-dashboard-head button { padding: 8px 10px; border: 0; border-radius: 7px; color: #fff; background: #c35e60; font: inherit; font-size: .61rem; font-weight: 700; }
.payable-dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 17px 0; }.payable-dashboard-stats div { display: grid; gap: 5px; padding: 11px 9px; border: 1px solid #f0e9e7; border-radius: 9px; }.payable-dashboard-stats span { color: #8d7e7d; font-size: .55rem; }.payable-dashboard-stats b { color: #493a3b; font-size: .73rem; white-space: nowrap; }.payable-dashboard-stats div:nth-child(2) b { color: #c45d55; }.payable-dashboard-stats div:nth-child(3) b { color: #198366; }
.payable-list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }.payable-list-head strong { color: #4b3e3f; font-size: .72rem; }.payable-list-head span { color: #c15c60; font-size: .57rem; font-weight: 700; }
.payable-list { display: grid; }.payable-list>div { display: grid; grid-template-columns: 27px 1fr auto auto; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid #f3eeed; }.payable-list i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; font-size: .64rem; font-style: normal; font-weight: 800; }.payable-list .supplier-purple { color: #7257aa; background: #f0eafe; }.payable-list .supplier-orange { color: #c37142; background: #fff0e5; }.payable-list .supplier-blue { color: #377aaf; background: #e7f3fe; }.payable-list div>div { display: grid; gap: 2px; }.payable-list b { color: #4d4142; font-size: .6rem; }.payable-list small { color: #928483; font-size: .5rem; }.payable-list>div>strong { color: #534445; font-size: .6rem; white-space: nowrap; }.payable-list em { padding: 4px 6px; border-radius: 99px; color: #298269; background: #eaf8f2; font-size: .47rem; font-style: normal; font-weight: 700; }.payable-list em.warning { color: #bf6c3d; background: #fff2e8; }

.financial-dashboard {
    padding: 22px;
    border: 1px solid #dceaf3;
    border-radius: calc(var(--radius) - 8px);
    background: #fff;
    box-shadow: 0 14px 30px rgba(22, 83, 122, .10);
}

.financial-dashboard-topbar,
.financial-dashboard-chart > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.financial-dashboard-topbar > div { display: grid; gap: 2px; }
.financial-dashboard-topbar span { color: #6e8495; font-size: .7rem; }
.financial-dashboard-topbar strong { color: #17374e; font-size: 1rem; }
.financial-period { padding: 7px 10px; border-radius: 8px; background: #f2f7fa; font-weight: 600; }

.financial-dashboard-summary {
    display: grid;
    gap: 5px;
    margin: 18px 0 12px;
    padding: 20px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(128deg, #125293, #139cc4);
}

.financial-dashboard-summary span { font-size: .75rem; opacity: .85; }
.financial-dashboard-summary strong { font-size: clamp(1.3rem, 3vw, 1.75rem); letter-spacing: -.04em; }
.financial-dashboard-summary small { color: #c6f7e5; font-size: .67rem; }

.financial-dashboard-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.dashboard-action { display: grid; grid-template-columns: 31px 1fr; column-gap: 7px; align-items: center; padding: 11px 8px; border: 1px solid #e1ebf1; border-radius: 10px; }
.dashboard-action i { display: grid; place-items: center; grid-row: span 3; width: 31px; height: 31px; border-radius: 8px; font-size: .72rem; font-style: normal; font-weight: 800; }
.dashboard-action span { color: #4c6577; font-size: .58rem; font-weight: 700; white-space: nowrap; }
.dashboard-action b { color: #213f54; font-size: .7rem; white-space: nowrap; }
.dashboard-action small { color: #8a9aa7; font-size: .5rem; white-space: nowrap; }
.dashboard-action.payable i { color: #c96858; background: #fff0ec; }
.dashboard-action.receivable i { color: #168363; background: #e8f8f1; }
.dashboard-action.cash i { color: #2875ae; background: #e9f4ff; }

.financial-dashboard-chart { margin-top: 14px; padding: 14px 14px 4px; border-radius: 12px; background: #f5faff; }
.financial-dashboard-chart strong { color: #294a60; font-size: .75rem; }
.financial-dashboard-chart span { color: #8496a5; font-size: .62rem; }
.financial-dashboard-chart svg { display: block; width: 100%; height: 98px; margin-top: 5px; }

.financial-workspace { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 0; overflow: hidden; }
.financial-workspace-nav { display: grid; align-content: start; justify-items: center; gap: 15px; padding: 18px 8px; color: #b5c6d3; background: #113d5d; }
.financial-workspace-nav b { display: grid; place-items: center; width: 25px; height: 25px; margin-bottom: 7px; border-radius: 7px; color: #fff; background: #18a3bc; font-size: .75rem; }
.financial-workspace-nav span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; font-size: .7rem; }
.financial-workspace-nav .active { color: #fff; background: rgba(255,255,255,.16); }
.financial-workspace-main { min-width: 0; padding: 18px 18px 18px 0; }
.financial-result-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 15px 0; }
.financial-result-cards div { display: grid; gap: 3px; padding: 10px; border: 1px solid #e3edf2; border-radius: 9px; }
.financial-result-cards span { color: #718797; font-size: .54rem; }
.financial-result-cards b { color: #24465b; font-size: .75rem; white-space: nowrap; }
.financial-result-cards small { color: #168363; font-size: .5rem; font-weight: 700; }.financial-result-cards small.neutral { color: #6e8495; }
.financial-performance { padding: 12px 13px 8px; border-radius: 11px; background: #f5f9fc; }.financial-performance-head { display: flex; align-items: start; justify-content: space-between; }.financial-performance-head>div:first-child { display: grid; gap: 2px; }.financial-performance-head strong { color: #294a60; font-size: .68rem; }.financial-performance-head span { color: #8395a3; font-size: .53rem; }.financial-legend { color: #7a8f9f; font-size: .46rem; white-space: nowrap; }.financial-legend i { display: inline-block; width: 5px; height: 5px; margin: 0 3px 1px 5px; border-radius: 50%; background: #1c9ac1; }.financial-legend i+ i { background: #bdd9e7; }
.financial-bars { display: flex; align-items: end; justify-content: space-between; height: 105px; padding-top: 12px; }.financial-bars div { position: relative; display: grid; grid-template-columns: 8px 8px; align-items: end; gap: 3px; height: 84px; }.financial-bars i,.financial-bars b { display: block; width: 8px; border-radius: 3px 3px 1px 1px; background: #1b9bc1; }.financial-bars b { background: #bcdbe9; }.financial-bars span { position: absolute; bottom: -16px; left: -1px; color: #8a9aa7; font-size: .47rem; }.financial-bars div:nth-child(1) i{height:44%}.financial-bars div:nth-child(1) b{height:25%}.financial-bars div:nth-child(2) i{height:58%}.financial-bars div:nth-child(2) b{height:34%}.financial-bars div:nth-child(3) i{height:52%}.financial-bars div:nth-child(3) b{height:39%}.financial-bars div:nth-child(4) i{height:72%}.financial-bars div:nth-child(4) b{height:41%}.financial-bars div:nth-child(5) i{height:66%}.financial-bars div:nth-child(5) b{height:38%}.financial-bars div:nth-child(6) i{height:88%}.financial-bars div:nth-child(6) b{height:44%}
.financial-recent { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 9px; margin-top: 15px; color: #657f91; font-size: .52rem; }.financial-recent strong { color: #2a4a60; font-size: .62rem; }.financial-recent span { white-space: nowrap; }.financial-recent i { display: inline-grid; place-items: center; width: 13px; height: 13px; margin-right: 3px; border-radius: 50%; color: #168363; background: #e4f7ef; font-size: .48rem; font-style: normal; }.financial-recent span:last-child i { color: #2880b7; background: #e8f4fb; }

@media (max-width: 560px) {
    .financial-dashboard { padding: 15px; }
    .financial-dashboard-cards { grid-template-columns: 1fr; }
    .financial-workspace { grid-template-columns: 34px 1fr; gap: 10px; padding: 0; }.financial-workspace-nav { gap: 9px; padding: 14px 4px; }.financial-workspace-main { padding: 14px 14px 14px 0; }.financial-result-cards { grid-template-columns: 1fr; }.financial-recent { grid-template-columns: 1fr; gap: 5px; }
    .payable-dashboard { padding: 15px; }.payable-dashboard-stats { grid-template-columns: 1fr; }.payable-list>div { grid-template-columns: 27px 1fr auto; }.payable-list em { display: none; }
    .cash-register { padding: 15px; }.cash-register-summary { grid-template-columns: 1fr; }
}

.hero-media.card-image-frame {
    transition: border-radius 0.35s ease, transform 0.35s ease;
}

.hero-media.card-image-frame img {
    transition: border-radius 0.35s ease, transform 0.35s ease;
}

.hero-media.card-image-frame[data-hero-variant="agenda"] {
    border-radius: 48px 20px 56px 24px;
    transform: rotate(-1.3deg);
}

.hero-media.card-image-frame[data-hero-variant="agenda"] img {
    border-radius: 38px 14px 44px 18px;
    transform: rotate(1.3deg);
}

.hero-media.card-image-frame[data-hero-variant="contratos"] {
    border-radius: 24px 54px 28px 58px;
    transform: rotate(1.2deg);
}

.hero-media.card-image-frame[data-hero-variant="contratos"] img {
    border-radius: 16px 42px 18px 46px;
    transform: rotate(-1.2deg);
}

.hero-media.card-image-frame[data-hero-variant="whatsapp"] {
    border-radius: 58px 34px 24px 48px;
    transform: rotate(-0.8deg);
}

.hero-media.card-image-frame[data-hero-variant="whatsapp"] img {
    border-radius: 48px 26px 14px 38px;
    transform: rotate(0.8deg);
}

.hero-media.card-image-frame[data-hero-variant="teste30"] {
    border-radius: 30px 62px 44px 20px;
    transform: rotate(1.5deg);
}

.hero-media.card-image-frame[data-hero-variant="teste30"] img {
    border-radius: 20px 52px 34px 12px;
    transform: rotate(-1.5deg);
}


.section {
    padding: 72px 0;
    position: relative;
}

.light-section {
    background: var(--surface-alt);
}

.section-white {
    background: #ffffff;
}

.light-section::before,
.plans-section::before,
.seo-copy-section::before,
.functionalities-section::before,
.segments-section::before,
.comparison-section::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 64px;
    background: inherit;
    pointer-events: none;
    clip-path: ellipse(58% 100% at 50% 100%);
    opacity: 0.95;
}

.light-section::after,
.plans-section::after,
.seo-copy-section::after,
.functionalities-section::after,
.segments-section::after,
.comparison-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 58px;
    background: inherit;
    pointer-events: none;
    clip-path: ellipse(60% 100% at 50% 0%);
    opacity: 0.92;
}

.section > .container {
    position: relative;
    z-index: 1;
}

.section-heading {
    margin-bottom: 28px;
}

.section-heading.centered {
    max-width: 780px;
    margin: 0 auto 34px;
    text-align: center;
}

.section-heading h2,
.cta-box h2,
.feature-panel h2 {
    margin: 12px 0 14px;
    font-size: clamp(1.9rem, 3vw, 3rem);
    line-height: 1.12;
    color: var(--ink);
}

.feature-panel h2 em {
    color: #109fe3;
    font-style: normal;
}

.purple-text {
    color: #109fe3;
    font-style: normal;
}

.home-growth-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 38px;
    align-items: center;
    margin-bottom: 34px;
}

.home-growth-media img {
    width: 100%;
    border-radius: 8px;
}

.difference-list {
    display: grid;
    gap: 12px;
    padding: 0;
    margin: 22px 0 0;
    list-style: none;
}

.difference-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    font-weight: 700;
}

.difference-list li::before {
    content: "\2713";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #ffffff;
    background: var(--primary);
    flex-shrink: 0;
}

.benefits-grid,
.detail-grid,
.plans-grid,
.addons-grid {
    display: grid;
    gap: 22px;
}

.benefits-grid,
.detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.functionalities-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.info-card,
.pricing-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow-soft);
}

.info-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(0, 179, 168, 0.14), rgba(23, 87, 212, 0.14));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    font-size: 1.35rem;
}

.info-card-icon.menu-svg-icon { color: #109fe3; }
.info-card-icon.menu-svg-icon svg { width: 25px; height: 25px; }
.benefits-grid .info-card:nth-child(3) .info-card-icon.menu-svg-icon { color: #109fe3; }
.benefits-grid .info-card:nth-child(3) .info-card-icon.menu-svg-icon::before,
.benefits-grid .info-card:nth-child(3) .info-card-icon.menu-svg-icon::after { display: none; }
.benefits-grid .info-card-icon.menu-svg-icon { width: 46px; height: 46px; border-radius: 13px; color: #109fe3; background: #f5f8fc; box-shadow: none; }
.benefits-grid .info-card-icon.menu-svg-icon svg { width: 23px; height: 23px; }

.benefits-grid .info-card:nth-child(3) .info-card-icon:not(.menu-svg-icon) {
    position: relative;
    color: transparent;
}

.benefits-grid .info-card:nth-child(3) .info-card-icon:not(.menu-svg-icon)::before,
.benefits-grid .info-card:nth-child(3) .info-card-icon:not(.menu-svg-icon)::after {
    content: "";
    position: absolute;
    display: block;
}

.benefits-grid .info-card:nth-child(3) .info-card-icon:not(.menu-svg-icon)::before {
    width: 20px;
    height: 24px;
    border: 2px solid var(--secondary);
    border-radius: 6px;
    background:
        linear-gradient(var(--secondary), var(--secondary)) 4px 7px / 10px 2px no-repeat,
        linear-gradient(var(--secondary), var(--secondary)) 4px 12px / 12px 2px no-repeat,
        linear-gradient(var(--secondary), var(--secondary)) 4px 17px / 8px 2px no-repeat,
        #ffffff;
}

.benefits-grid .info-card:nth-child(3) .info-card-icon:not(.menu-svg-icon)::after {
    width: 10px;
    height: 10px;
    right: 12px;
    bottom: 10px;
    border-right: 2px solid var(--primary-dark);
    border-bottom: 2px solid var(--primary-dark);
    transform: rotate(45deg);
}

.info-card h3,
.segment-card h3,
.pricing-card h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.25rem;
    color: var(--ink);
}

.drag-carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 310px);
    gap: 20px;
    overflow-x: auto;
    padding: 18px 8px 18px;
    padding-bottom: 16px;
    cursor: pointer;
    cursor: grab;
    scrollbar-width: none;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 28px;
    box-shadow: none;
    border: 0;
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
    user-select: none;
    -webkit-user-select: none;
    scroll-behavior: smooth;
}

.drag-carousel,
.drag-carousel * {
    cursor: grab !important;
}

.drag-carousel::-webkit-scrollbar {
    display: none;
}

.drag-carousel.dragging {
    cursor: pointer;
    cursor: grabbing;
    scroll-behavior: auto;
}

.drag-carousel.dragging,
.drag-carousel.dragging * {
    cursor: grabbing !important;
}

body.drag-carousel-active,
body.drag-carousel-active * {
    cursor: grabbing !important;
}

.drag-carousel.dragging * {
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.segment-card {
    overflow: hidden;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-radius: 26px;
    border: 1px solid var(--border);
    box-shadow: none;
    opacity: 1;
    filter: none;
    user-select: none;
}

.segments-section {
    position: relative;
    overflow: visible;
    background: var(--surface-alt);
}

.segments-section .container {
    position: relative;
    z-index: 1;
}

.segments-section .container::before,
.plans-section .container::before,
.functionalities-section .container::before,
.comparison-section .container::before {
    content: "";
    position: absolute;
    inset: 18px 26px;
    z-index: -1;
    pointer-events: none;
}

.segments-section .container::before {
    background:
        radial-gradient(circle at 10% 14%, rgba(0, 179, 168, 0.08) 0, rgba(0, 179, 168, 0.08) 24px, transparent 25px),
        radial-gradient(circle at 90% 12%, rgba(23, 87, 212, 0.08) 0, rgba(23, 87, 212, 0.08) 18px, transparent 19px),
        radial-gradient(circle at 22% 10%, rgba(23, 87, 212, 0.05) 0, rgba(23, 87, 212, 0.05) 12px, transparent 13px),
        radial-gradient(circle at 70% 12%, rgba(0, 179, 168, 0.05) 0, rgba(0, 179, 168, 0.05) 10px, transparent 11px),
        radial-gradient(circle at 78% 74%, rgba(0, 179, 168, 0.06) 0, rgba(0, 179, 168, 0.06) 14px, transparent 15px),
        radial-gradient(circle at 16% 78%, rgba(23, 87, 212, 0.05) 0, rgba(23, 87, 212, 0.05) 10px, transparent 11px),
        radial-gradient(circle at 36% 72%, rgba(0, 179, 168, 0.04) 0, rgba(0, 179, 168, 0.04) 16px, transparent 17px),
        radial-gradient(circle at 60% 80%, rgba(23, 87, 212, 0.04) 0, rgba(23, 87, 212, 0.04) 10px, transparent 11px);
}

.plans-section {
    position: relative;
    overflow: visible;
    background: #ffffff;
}

.plans-section .container {
    position: relative;
    z-index: 1;
}

.plans-section .container::before {
    background:
        radial-gradient(circle at 12% 14%, rgba(23, 87, 212, 0.07) 0, rgba(23, 87, 212, 0.07) 22px, transparent 23px),
        radial-gradient(circle at 88% 12%, rgba(0, 179, 168, 0.08) 0, rgba(0, 179, 168, 0.08) 18px, transparent 19px),
        radial-gradient(circle at 28% 12%, rgba(0, 179, 168, 0.04) 0, rgba(0, 179, 168, 0.04) 11px, transparent 12px),
        radial-gradient(circle at 72% 22%, rgba(23, 87, 212, 0.04) 0, rgba(23, 87, 212, 0.04) 9px, transparent 10px),
        radial-gradient(circle at 78% 76%, rgba(0, 179, 168, 0.06) 0, rgba(0, 179, 168, 0.06) 14px, transparent 15px),
        radial-gradient(circle at 18% 78%, rgba(23, 87, 212, 0.05) 0, rgba(23, 87, 212, 0.05) 10px, transparent 11px),
        radial-gradient(circle at 54% 80%, rgba(0, 179, 168, 0.04) 0, rgba(0, 179, 168, 0.04) 12px, transparent 13px);
}

.functionalities-section {
    position: relative;
    overflow: visible;
    background: #ffffff;
}

.functionalities-section .container {
    position: relative;
    z-index: 1;
}

.functionalities-section .container::before {
    background:
        radial-gradient(circle at 12% 14%, rgba(0, 179, 168, 0.08) 0, rgba(0, 179, 168, 0.08) 22px, transparent 23px),
        radial-gradient(circle at 88% 12%, rgba(23, 87, 212, 0.08) 0, rgba(23, 87, 212, 0.08) 18px, transparent 19px),
        radial-gradient(circle at 24% 10%, rgba(23, 87, 212, 0.05) 0, rgba(23, 87, 212, 0.05) 12px, transparent 13px),
        radial-gradient(circle at 70% 18%, rgba(0, 179, 168, 0.05) 0, rgba(0, 179, 168, 0.05) 10px, transparent 11px),
        radial-gradient(circle at 78% 78%, rgba(0, 179, 168, 0.06) 0, rgba(0, 179, 168, 0.06) 14px, transparent 15px),
        radial-gradient(circle at 18% 80%, rgba(23, 87, 212, 0.05) 0, rgba(23, 87, 212, 0.05) 10px, transparent 11px),
        radial-gradient(circle at 54% 82%, rgba(0, 179, 168, 0.04) 0, rgba(0, 179, 168, 0.04) 12px, transparent 13px);
}

.segment-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.segment-card div {
    padding: 22px;
}

.feature-list {
    display: grid;
    gap: 18px;
}

.app-showcase {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.app-showcase-media {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 18px;
}

.app-showcase-frame {
    width: min(100%, 460px);
    padding: 22px;
    border-radius: 42px;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.78)),
        linear-gradient(160deg, rgba(0, 179, 168, 0.18), rgba(23, 87, 212, 0.14));
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow: 0 24px 54px rgba(13, 43, 63, 0.16);
}

.app-showcase-frame img {
    width: 100%;
    border-radius: 32px;
}

.app-store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: 22px; }

.google-play-badge {
    display: inline-flex;
    transition: transform 0.2s ease;
}

.google-play-badge:hover {
    transform: translateY(-2px);
}

.google-play-badge img {
    width: 165px;
    height: auto;
}

.apple-store-badge { box-sizing: border-box; display: grid; grid-template-columns: 25px auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; width: 165px; height: 49px; padding: 7px 11px; border-radius: 7px; color: #fff; background: #17212b; line-height: 1; }.apple-store-badge svg { grid-row: span 2; width: 22px; height: 22px; fill: currentColor; }.apple-store-badge small { font-size: .46rem; letter-spacing: .04em; }.apple-store-badge strong { font-size: .92rem; font-weight: 600; }

.app-showcase-copy .section-heading {
    margin-bottom: 22px;
}

.feature-line {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 24px;
    border: 1px solid var(--border);
}

.feature-line-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0, 179, 168, 0.14), rgba(23, 87, 212, 0.14));
    font-size: 1.2rem;
    flex-shrink: 0;
}

.feature-line-icon.menu-svg-icon { color: #109fe3; }
.feature-line-icon.menu-svg-icon svg { width: 23px; height: 23px; }

.feature-line strong {
    display: block;
    margin-bottom: 6px;
    color: var(--ink);
    font-size: 1.05rem;
}

.plans-status {
    margin-bottom: 22px;
    text-align: center;
    color: var(--muted);
}

.plans-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(320px, 360px);
    align-items: stretch;
    overflow-x: auto;
    padding: 8px 6px 18px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.plans-carousel {
    position: relative;
    margin: 0 66px;
}

.plans-carousel-button {
    position: absolute;
    z-index: 2;
    top: 50%;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #ffffff;
    background: var(--secondary);
    box-shadow: 0 8px 20px rgba(23, 87, 212, 0.24);
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    transform: translateY(-50%);
    transition: background 0.2s ease, transform 0.2s ease;
}

.plans-carousel-button:hover,
.plans-carousel-button:focus-visible {
    background: var(--primary-dark);
    transform: translateY(-50%) scale(1.06);
}

.plans-carousel-button:focus-visible {
    outline: 3px solid rgba(23, 87, 212, 0.28);
    outline-offset: 3px;
}

.plans-carousel-button-prev {
    left: -62px;
}

.plans-carousel-button-next {
    right: -62px;
}

.plans-grid::-webkit-scrollbar {
    display: none;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100%;
    scroll-snap-align: start;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none;
}

.pricing-card .button {
    margin-top: auto;
}

.pricing-card.highlight {
    border-color: rgba(23, 87, 212, 0.25);
    background: linear-gradient(180deg, rgba(0, 179, 168, 0.08), #ffffff 35%);
}

.pricing-card.popular {
    position: relative;
    border-color: #343a40;
    color: #f4f7fa;
    background: linear-gradient(145deg, #4b535d, #2f353c) !important;
    box-shadow: 0 20px 36px rgba(32, 38, 45, 0.26);
}

.plan-popular-badge {
    position: absolute;
    top: 28px;
    right: 22px;
    padding: 7px 12px;
    border-radius: 999px;
    color: #ffffff;
    background: var(--primary);
    box-shadow: 0 7px 14px rgba(0, 179, 168, 0.26);
    font-size: 0.72rem;
    font-weight: 800;
}

.pricing-card.popular h3,
.pricing-card.popular .plan-price,
.pricing-card.popular .plan-addon-detail strong {
    color: #ffffff;
}

.pricing-card.popular .plan-price small,
.pricing-card.popular .plans-price-annual-note,
.pricing-card.popular .plan-addon-price {
    color: #d6dce1;
}

.pricing-card.popular .plan-chip {
    color: #26313a;
    background: #edf1f4;
}

.pricing-card.popular .plan-addon-box {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.09);
}

.plan-chip {
    display: inline-flex;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(23, 87, 212, 0.12);
    color: var(--secondary);
    font-size: 0.82rem;
    font-weight: 700;
}

.plan-addon-box {
    display: grid;
    gap: 10px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(23, 87, 212, 0.06);
    border: 1px solid rgba(23, 87, 212, 0.1);
}

.plan-addon-detail {
    display: flex;
    align-items: center;
    gap: 10px;
}

.plan-addon-detail > div {
    display: grid;
    gap: 4px;
}

.plan-addon-detail strong {
    color: var(--ink);
    font-size: 0.98rem;
}

.plan-addon-price {
    color: var(--secondary);
    font-size: 1.08rem;
    font-weight: 800;
}

.plan-price {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--secondary);
    line-height: 1.1;
}

.plan-price small {
    font-size: 0.9rem;
    color: var(--muted);
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.pricing-card li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pricing-card .plan-summary-featured {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1px solid rgba(23, 87, 212, 0.18);
    border-radius: 12px;
    background: rgba(23, 87, 212, 0.07);
    color: var(--secondary);
    font-weight: 700;
    text-align: center;
}

.pricing-card .plan-summary-featured .plan-summary-content {
    display: block;
    font-size: 0.84rem;
    line-height: 1.25;
    white-space: nowrap;
}

.pricing-card .plan-summary-featured .plan-item-icon {
    align-self: center;
    margin-top: 0;
}

.pricing-card.popular .plan-summary-featured {
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.plan-summary-content {
    display: grid;
    gap: 7px;
}

.plan-info-note {
    display: inline-flex;
    width: fit-content;
    padding: 7px 10px;
    border: 1px solid rgba(23, 87, 212, 0.18);
    border-radius: 8px;
    background: rgba(23, 87, 212, 0.08);
    color: var(--secondary);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.plan-item-icon {
    position: relative;
    display: inline-flex;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 8px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(0, 179, 168, 0.14), rgba(23, 87, 212, 0.14));
}

.plan-item-icon::before,
.plan-item-icon::after {
    content: "";
    position: absolute;
}

.plan-item-agenda::before {
    inset: 5px;
    border: 2px solid var(--secondary);
    border-top-width: 5px;
    border-radius: 5px;
    background: #ffffff;
}

.plan-item-whatsapp::before {
    width: 10px;
    height: 10px;
    left: 5px;
    top: 4px;
    border: 2px solid var(--primary-dark);
    border-radius: 50%;
    background: #ffffff;
}

.plan-item-whatsapp::after {
    width: 5px;
    height: 5px;
    left: 4px;
    bottom: 4px;
    border-left: 2px solid var(--primary-dark);
    border-bottom: 2px solid var(--primary-dark);
    transform: rotate(10deg);
}

.plan-item-contract::before,
.plan-item-signature::before {
    width: 10px;
    height: 13px;
    left: 6px;
    top: 4px;
    border: 2px solid var(--secondary);
    border-radius: 3px;
    background:
        linear-gradient(var(--secondary), var(--secondary)) 2px 3px / 5px 1.5px no-repeat,
        linear-gradient(var(--secondary), var(--secondary)) 2px 6px / 6px 1.5px no-repeat,
        #ffffff;
}

.plan-item-signature::after {
    width: 8px;
    height: 3px;
    right: 3px;
    bottom: 5px;
    border-bottom: 2px solid var(--primary-dark);
    border-radius: 0 0 8px 8px;
    transform: rotate(-18deg);
}

.plan-item-finance::before {
    width: 10px;
    height: 10px;
    left: 5px;
    top: 5px;
    border: 2px solid var(--secondary);
    border-radius: 50%;
}

.plan-item-finance::after {
    width: 2px;
    height: 12px;
    left: 10px;
    top: 5px;
    background: var(--secondary);
    border-radius: 999px;
}

.plan-item-sales::before {
    width: 12px;
    height: 10px;
    left: 4px;
    top: 7px;
    border: 2px solid var(--secondary);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.plan-item-sales::after {
    width: 6px;
    height: 2px;
    left: 8px;
    top: 4px;
    background: var(--secondary);
    border-radius: 999px;
}

.plan-item-plan::before {
    inset: 5px;
    border-radius: 50%;
    border: 2px solid var(--primary-dark);
    background: #ffffff;
}

.plan-item-plan::after {
    width: 2px;
    height: 8px;
    left: 10px;
    top: 7px;
    background: var(--primary-dark);
    border-radius: 999px;
}

.plan-item-generic::before {
    inset: 6px;
    border-radius: 50%;
    background: var(--secondary);
}

.addons-box {
    margin-top: 34px;
    padding: 28px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}

.addons-box h3 {
    margin-top: 0;
    color: var(--ink);
}

.addons-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
}

.addons-group-full {
    grid-column: 1 / -1;
}

.addons-group-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
}

.addons-group-title {
    margin: 0 0 16px;
    color: var(--ink);
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

@media (max-width: 700px) {
    .addons-groups {
        grid-template-columns: 1fr;
    }

    .addons-group-full {
        grid-column: auto;
    }
}

.addon-card {
    display: grid;
    gap: 12px;
    padding: 20px;
    border-radius: 22px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
}

.addon-card strong {
    color: var(--ink);
}

.addon-unit-price {
    margin-top: -8px;
    color: #109fe3;
    font-size: 1.05rem;
    font-weight: 700;
}

.addon-unit-price em {
    margin-left: 2px;
    color: #617089;
    font-size: .68em;
    font-style: normal;
    font-weight: 600;
}

.whatsapp-api-section { background: #f7fcfa; }.whatsapp-api-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }.whatsapp-api-card { min-height: 210px; padding: 25px; border: 1px solid #dfece7; border-radius: 18px; background: #fff; }.whatsapp-api-card h3 { margin: 17px 0 8px; color: #284c43; font-size: 1rem; }.whatsapp-api-card p { margin: 0; color: #678178; font-size: .88rem; line-height: 1.6; }.meta-logo { display: flex; align-items: center; gap: 5px; color: #1688e0; font-size: 1.15rem; font-weight: 700; }.meta-logo svg { width: 48px; height: 25px; }.qr-symbol,.setup-symbol { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 11px; font-size: 1.1rem; font-weight: 800; }.qr-symbol { color: #2878ab; background: #e9f4fc; }.setup-symbol { color: #178363; background: #e6f8ef; }@media(max-width:900px){.whatsapp-api-grid{grid-template-columns:1fr;margin-top:24px}.whatsapp-api-card{min-height:0}}

.whatsapp-meta-brand { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; color: #1688e0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.04em; }.whatsapp-meta-brand svg { width: 56px; height: 27px; }

.clicksign-inline-logo { display: inline-flex; align-items: center; gap: 16px; margin-top: 28px; }.clicksign-inline-logo img { width: 132px; height: auto; object-fit: contain; }.legal-validity-seal { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #ccebdd; border-radius: 999px; color: #218766; background: #f2fbf7; font-size: .76rem; font-weight: 700; white-space: nowrap; }.legal-validity-seal svg { width: 17px; height: 17px; }

.addon-icon {
    position: relative;
    display: inline-flex;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0, 179, 168, 0.14), rgba(23, 87, 212, 0.14));
}

.addon-icon::before,
.addon-icon::after {
    content: "";
    position: absolute;
}

.addon-icon-whatsapp::before {
    width: 18px;
    height: 18px;
    left: 13px;
    top: 11px;
    border: 2px solid var(--primary-dark);
    border-radius: 50%;
    background: #ffffff;
}

.addon-icon-whatsapp::after {
    width: 8px;
    height: 8px;
    left: 12px;
    bottom: 11px;
    border-left: 2px solid var(--primary-dark);
    border-bottom: 2px solid var(--primary-dark);
    transform: skew(-14deg) rotate(8deg);
    background: #ffffff;
}

.addon-icon-signature::before {
    width: 18px;
    height: 22px;
    left: 14px;
    top: 10px;
    border: 2px solid var(--secondary);
    border-radius: 6px;
    background:
        linear-gradient(var(--secondary), var(--secondary)) 4px 6px / 10px 2px no-repeat,
        linear-gradient(var(--secondary), var(--secondary)) 4px 11px / 9px 2px no-repeat,
        #ffffff;
}

.addon-icon-signature::after {
    width: 14px;
    height: 6px;
    right: 9px;
    bottom: 12px;
    border-bottom: 2px solid var(--primary-dark);
    border-radius: 0 0 10px 10px;
    transform: rotate(-16deg);
}

.addon-icon-generic::before {
    width: 20px;
    height: 20px;
    inset: 14px;
    border-radius: 50%;
    border: 2px solid var(--secondary);
    background: rgba(255, 255, 255, 0.85);
}

.cta-section {
    padding-top: 0;
}

.cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 32px;
    border-radius: calc(var(--radius) + 4px);
    background: linear-gradient(135deg, #0a8f87, #1757d4);
    color: #fff;
    box-shadow: var(--shadow);
}

.cta-box h2,
.cta-box p {
    color: #fff;
}

.cta-box .eyebrow {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.cta-button {
    min-width: 180px;
    padding: 16px 30px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 14px 28px rgba(0, 128, 128, 0.2);
    font-size: 1rem;
}

.feature-stack {
    display: grid;
    gap: 28px;
}

.seo-copy-section {
    background: linear-gradient(180deg, rgba(244, 250, 251, 0.8), #ffffff 60%);
}

.inner-page .seo-copy-section {
    background: var(--surface-alt);
}

.seo-copy {
    max-width: 920px;
}

.seo-copy-grid {
    max-width: 1120px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
    gap: 28px;
    align-items: start;
}

.seo-copy p {
    margin: 0 0 18px;
    font-size: 1.04rem;
    line-height: 1.85;
}

.seo-copy p:last-child {
    margin-bottom: 0;
}

.seo-points {
    display: grid;
    gap: 16px;
}

.seo-point-card {
    display: grid;
    gap: 10px;
    padding: 22px 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}

.seo-point-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 179, 168, 0.14), rgba(23, 87, 212, 0.14));
    font-size: 1.1rem;
}

.seo-point-icon.menu-svg-icon { color: #109fe3; }
.seo-point-icon.menu-svg-icon svg { width: 22px; height: 22px; }

.seo-point-card strong {
    display: block;
    color: var(--ink);
}

.seo-point-card p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.7;
}

.comparison-section {
    background: #ffffff;
}

.comparison-section .container {
    position: relative;
    z-index: 1;
}

.comparison-section .container::before {
    background:
        radial-gradient(circle at 14% 14%, rgba(0, 179, 168, 0.06) 0, rgba(0, 179, 168, 0.06) 18px, transparent 19px),
        radial-gradient(circle at 86% 18%, rgba(23, 87, 212, 0.06) 0, rgba(23, 87, 212, 0.06) 14px, transparent 15px);
}

.comparison-table-wrap {
    overflow: hidden;
    overflow-y: hidden;
    scrollbar-width: none;
    border: 1px solid var(--border);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-soft);
}

.comparison-table-wrap::-webkit-scrollbar {
    display: none;
}

.comparison-mobile {
    display: none;
}

@media (max-width: 900px) {
    .comparison-table {
        min-width: 0;
        table-layout: fixed;
        font-size: 0.72rem;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 10px 5px;
        overflow-wrap: anywhere;
    }

    .comparison-table th:first-child,
    .comparison-table td:first-child {
        width: 32%;
        min-width: 0;
    }

    .popular-badge {
        margin-top: 5px;
        padding: 4px 6px;
        font-size: 0.6rem;
    }

    .comparison-check {
        width: 18px;
        height: 18px;
    }

    .comparison-check::before {
        left: 6px;
        top: 3px;
        width: 5px;
        height: 8px;
    }

    .comparison-plan-price {
        font-size: 0.9rem;
    }

    .comparison-plan-price small,
    .plans-price-annual-note {
        font-size: 0.62rem;
    }

    .comparison-plan-button {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 38px;
        padding: 8px 4px;
        font-size: 0.66rem;
    }
}

@media (max-width: 960px) {
    .comparison-plans-section {
        display: none;
    }

    .comparison-table-wrap {
        display: none;
    }

    .comparison-mobile {
        display: block;
    }

    .comparison-mobile-selectors {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-bottom: 18px;
        color: var(--ink);
        font-size: 0.78rem;
        font-weight: 700;
    }

    .comparison-mobile-selectors label {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .comparison-mobile-selectors select {
        max-width: 128px;
        padding: 8px 7px;
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--ink);
        background: #ffffff;
        font: inherit;
    }

    .comparison-mobile-table {
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: #ffffff;
    }

    .comparison-mobile-header,
    .comparison-mobile-row,
    .comparison-mobile-price-row {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr));
    }

    .comparison-mobile-header {
        background: rgba(244, 250, 251, 0.9);
        color: var(--ink);
        font-size: 0.66rem;
    }

    .comparison-mobile-header > *,
    .comparison-mobile-row > *,
    .comparison-mobile-price-row > * {
        min-width: 0;
        padding: 11px 7px;
        overflow-wrap: anywhere;
        text-align: center;
    }

    .comparison-mobile-header > :first-child,
    .comparison-mobile-feature,
    .comparison-mobile-price-row > :first-child {
        text-align: left;
    }

    .comparison-mobile-header strong {
        color: var(--secondary);
    }

    .comparison-mobile-section h3 {
        margin: 0;
        padding: 10px 12px;
        border-top: 1px solid rgba(216, 229, 234, 0.9);
        border-bottom: 1px solid rgba(216, 229, 234, 0.9);
        background: rgba(244, 250, 251, 0.9);
        color: var(--ink);
        font-size: 0.8rem;
    }

    .comparison-mobile-row {
        align-items: center;
        border-bottom: 1px solid rgba(216, 229, 234, 0.9);
        font-size: 0.74rem;
    }

    .comparison-mobile-feature {
        color: var(--ink);
        font-weight: 600;
    }

    .comparison-mobile-value {
        display: grid;
        place-items: center;
    }

    .comparison-mobile-value[hidden] {
        display: none;
    }

    .comparison-mobile-price-row {
        align-items: start;
        background: rgba(255, 255, 255, 0.98);
        font-size: 0.74rem;
        font-weight: 700;
    }

    .comparison-mobile-price-row .comparison-mobile-value {
        gap: 8px;
    }

    .comparison-mobile-price-row .comparison-plan-button {
        min-height: 34px;
        font-size: 0.62rem;
    }
}

.plans-billing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: -8px 0 26px;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 700;
}

.plans-billing-toggle strong {
    margin-left: 4px;
    color: var(--primary-dark);
    font-size: 0.78rem;
}

.plans-switch {
    position: relative;
    display: inline-flex;
    width: 48px;
    height: 28px;
    cursor: pointer;
}

.plans-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.plans-switch-slider {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: #cbdbe4;
    transition: background 0.2s ease;
}

.plans-switch-slider::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(13, 43, 63, 0.2);
    transition: transform 0.2s ease;
}

.plans-switch input:checked + .plans-switch-slider {
    background: var(--primary);
}

.plans-switch input:checked + .plans-switch-slider::after {
    transform: translateX(20px);
}

.plans-switch input:focus-visible + .plans-switch-slider {
    outline: 3px solid rgba(23, 87, 212, 0.28);
    outline-offset: 3px;
}

.plans-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.comparison-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(216, 229, 234, 0.9);
    text-align: center;
    vertical-align: middle;
}

.comparison-table th:first-child,
.comparison-table td:first-child {
    text-align: left;
    min-width: 240px;
}

.comparison-table thead th {
    color: var(--ink);
    background: rgba(244, 250, 251, 0.8);
}

.popular-header {
    background: linear-gradient(180deg, rgba(0, 179, 168, 0.12), rgba(255, 255, 255, 0.95));
}

.popular-badge {
    display: inline-flex;
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--secondary);
    background: rgba(23, 87, 212, 0.1);
}

.comparison-section-row td {
    font-weight: 700;
    color: var(--ink);
    background: rgba(244, 250, 251, 0.9);
}

.comparison-check {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 179, 168, 0.12);
}

.comparison-check::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 11px;
    border-right: 2px solid var(--primary-dark);
    border-bottom: 2px solid var(--primary-dark);
    transform: rotate(40deg);
}

.comparison-value-text {
    font-weight: 600;
    color: var(--secondary);
}

.comparison-value-text.is-muted {
    color: var(--muted);
}

.comparison-info-note {
    display: inline-flex;
    margin-top: 8px;
    padding: 7px 10px;
    border: 1px solid rgba(23, 87, 212, 0.18);
    border-radius: 8px;
    background: rgba(23, 87, 212, 0.08);
    color: var(--secondary);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.comparison-price-row td {
    background: rgba(255, 255, 255, 0.98);
}

.comparison-plan-price {
    margin-bottom: 14px;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--secondary);
}

.comparison-plan-price small {
    margin-left: 4px;
    font-size: 0.82rem;
    color: var(--muted);
}

.plans-price-annual-note {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.plans-price-annual-note[hidden] {
    display: none;
}

.comparison-plan-button {
    width: min(160px, 100%);
    max-width: 100%;
    height: 46px;
    padding: 0 18px;
    line-height: 1;
    white-space: nowrap;
}

.comparison-addons-table td:last-child {
    font-weight: 700;
    color: var(--secondary);
}

.feature-panel {
    padding: 28px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}

.feature-panel.reverse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inner-page {
    min-height: 60vh;
}

.site-footer {
    position: relative;
    padding: 48px 0 28px;
    background-color: #042c4c;
    overflow: hidden;
    color: #d4e1e8;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/images/dot-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    opacity: 0.2;
    pointer-events: none;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 32px;
}

.site-footer .container {
    position: relative;
    z-index: 1;
}

.footer-logo {
    width: 170px;
    margin-bottom: 18px;
}

.site-footer h4 {
    margin: 0 0 14px;
    color: #fff;
}

.site-footer a {
    display: block;
    margin: 0 0 10px;
    color: #d4e1e8;
}

.footer-bottom {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 960px) {
    .menu-toggle {
        display: flex;
        position: relative;
        z-index: 2147483603;
    }

    .header-actions {
        display: none;
    }

    .mobile-nav-login {
        display: inline-flex;
    }

    .site-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2147483602;
        width: min(84vw, 340px);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 92px 22px 28px;
        gap: 8px;
        background: rgba(255, 255, 255, 0.98);
        border-left: 1px solid var(--border);
        box-shadow: -24px 0 48px rgba(13, 43, 63, 0.18);
        color: var(--ink);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.28s ease;
    }

    .site-nav-close {
        position: absolute;
        top: 22px;
        right: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        font-size: 1rem;
        font-weight: 800;
        line-height: 1;
    }

    .site-nav-close:active,
    .site-nav-close:focus-visible {
        background: rgba(255, 255, 255, 0.16);
        outline: none;
    }

    .site-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 2147483601;
        display: block;
        background: rgba(7, 24, 38, 0.42);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.24s ease, visibility 0.24s ease;
    }

    .site-nav.open + .site-nav-backdrop {
        opacity: 1;
        visibility: visible;
    }

    .page-home .site-nav,
    .page-home .nav-dropdown-toggle,
    .page-home .site-nav > a,
    .page-inner .site-nav,
    .page-inner .nav-dropdown-toggle,
    .page-inner .site-nav > a,
    .page-home .site-header.is-sticky .site-nav,
    .page-home .site-header.is-sticky .nav-dropdown-toggle,
    .page-home .site-header.is-sticky .site-nav > a,
    .page-inner .site-header.is-sticky .site-nav,
    .page-inner .site-header.is-sticky .nav-dropdown-toggle,
    .page-inner .site-header.is-sticky .site-nav > a {
        color: var(--ink);
    }

    .page-home .site-nav .nav-link-icon,
    .page-inner .site-nav .nav-link-icon,
    .page-home .site-header.is-sticky .site-nav .nav-link-icon,
    .page-inner .site-header.is-sticky .site-nav .nav-link-icon {
        background: rgba(0, 179, 168, 0.12);
        color: var(--primary-dark);
    }

    .site-nav > a,
    .nav-dropdown-toggle {
        width: 100%;
        padding: 12px 8px;
        border-radius: 14px;
        text-align: left;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .site-nav > a:focus-visible,
    .site-nav > a:active,
    .nav-dropdown-toggle:focus-visible,
    .nav-dropdown-toggle:active,
    .nav-dropdown.open > .nav-dropdown-toggle {
        background: rgba(0, 179, 168, 0.11);
        color: var(--primary-dark);
        outline: none;
    }

    .nav-dropdown-toggle > span:last-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        min-width: 0;
    }

    .nav-dropdown-toggle > span:last-child::after {
        content: ">";
        margin-left: 12px;
        color: var(--primary-dark);
        font-weight: 700;
        transform: rotate(90deg);
        transition: transform 0.2s ease;
    }

    .nav-dropdown.open .nav-dropdown-toggle > span:last-child::after {
        transform: rotate(-90deg);
    }

    .site-nav.open {
        transform: translateX(0);
    }

    body.menu-open .site-nav {
        z-index: 2147483602 !important;
    }

    body.menu-open .site-nav-backdrop {
        z-index: 2147483601 !important;
    }

    body.menu-open .menu-toggle {
        z-index: 2147483603 !important;
    }

    .nav-dropdown-menu {
        position: static;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: grid;
        max-height: 0;
        margin: 0 0 0 26px;
        padding: 0 0 0 14px;
        gap: 6px;
        overflow: hidden;
        border: 0;
        border-left: 2px solid rgba(0, 179, 168, 0.18);
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        transition: max-height 0.28s ease, margin-top 0.28s ease, padding-top 0.28s ease;
    }

    .nav-dropdown.open .nav-dropdown-menu {
        max-height: 420px;
        margin-top: 8px;
        padding-top: 4px;
    }

    .nav-dropdown-menu a {
        min-height: 48px;
        padding: 10px 12px;
        border-radius: 14px;
        background: transparent;
    }

    .nav-dropdown-menu a:focus-visible,
    .nav-dropdown-menu a:active {
        background: rgba(0, 179, 168, 0.11);
        color: var(--primary-dark);
        outline: none;
        transform: none;
    }

    .nav-dropdown-menu a:focus::after {
        width: 0;
    }

    .hero-grid,
    .page-hero-grid,
    .split-feature,
    .feature-panel,
    .home-growth-grid,
    .feature-panel.reverse,
    .footer-grid,
    .seo-copy-grid,
    .functionalities-grid,
    .benefits-grid,
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .plans-grid {
        grid-auto-columns: minmax(280px, 88vw);
    }

    .cta-box {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .container {
        width: min(100% - 28px, 1180px);
    }

    .hero-section,
    .page-hero,
    .section {
        padding: 56px 0;
    }

    .info-card,
    .pricing-card,
    .feature-panel,
    .addons-box {
        padding: 22px;
    }

    .plans-grid {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        overflow-x: visible;
        padding: 8px 0 0;
        scroll-snap-type: none;
    }

    .plans-carousel-button {
        display: none;
    }

    .plans-carousel {
        margin: 0;
    }

    .floating-whatsapp {
        right: 16px;
        bottom: 16px;
        width: 68px;
        height: 68px;
    }

.floating-whatsapp-icon {
    width: 68px;
    height: 68px;
}
}

.page-home {
    background: #ffffff;
}

.page-home .site-header,
.page-inner .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
    box-shadow: none !important;
}

.site-header.is-sticky {
    background: rgba(255, 255, 255, 0.96);
    border-bottom-color: rgba(216, 229, 234, 0.9);
    backdrop-filter: blur(18px);
}

.page-home .site-header.is-sticky,
.page-inner .site-header.is-sticky {
    position: fixed;
    background: rgba(18, 39, 78, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
}

.page-home .site-nav,
.page-home .nav-dropdown-toggle,
.page-home .site-nav > a,
.page-home .header-cta,
.page-inner .site-nav,
.page-inner .nav-dropdown-toggle,
.page-inner .site-nav > a,
.page-inner .header-cta {
    color: #f5fbff;
}

.page-home .nav-link-icon,
.page-inner .nav-link-icon {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.page-home .menu-toggle span,
.page-inner .menu-toggle span {
    background: #ffffff;
}

.page-home .site-header.is-sticky .site-nav,
.page-home .site-header.is-sticky .nav-dropdown-toggle,
.page-home .site-header.is-sticky .site-nav > a,
.page-home .site-header.is-sticky .header-cta,
.page-inner .site-header.is-sticky .site-nav,
.page-inner .site-header.is-sticky .nav-dropdown-toggle,
.page-inner .site-header.is-sticky .site-nav > a,
.page-inner .site-header.is-sticky .header-cta {
    color: #f5fbff;
}

.page-home .site-header.is-sticky .nav-link-icon,
.page-inner .site-header.is-sticky .nav-link-icon {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.hero-section-techvio {
    position: relative;
    min-height: 100vh;
    padding: 138px 0 76px;
    overflow: hidden;
    background: var(--hero-gradient);
}

.hero-section-techvio::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.08), transparent 20%),
        radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.08), transparent 26%);
    pointer-events: none;
}

.hero-section-techvio .hero-grid {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 214px);
    align-items: center;
    gap: 40px;
}

.hero-section-techvio .hero-copy {
    position: relative;
    color: #e9f6ff;
}

.hero-section-techvio .hero-copy h1,
.hero-section-techvio .hero-copy p,
.hero-section-techvio .hero-highlights,
.hero-section-techvio .hero-highlights li {
    color: #f4fbff;
}

.hero-section-techvio .hero-copy h1 {
    max-width: 620px;
    font-size: clamp(2.45rem, 4.2vw, 3.7rem);
    font-weight: 700;
    line-height: 1.04;
    margin-bottom: 14px;
}

.hero-section-techvio .hero-copy p {
    max-width: 560px;
    color: rgba(233, 246, 255, 0.88);
    font-size: 0.98rem;
    line-height: 1.55;
}

.hero-section-techvio .eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #ff9800;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.hero-social-list {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 15px;
    padding: 0;
    list-style: none;
}

.hero-social-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.hero-social-list a:hover {
    transform: translateY(-2px);
    background: #20a4e8;
    border-color: #20a4e8;
}

.hero-section-techvio .hero-actions {
    margin-top: 18px;
    margin-bottom: 12px;
    flex-wrap: nowrap;
    gap: 12px;
}

.hero-section-techvio .button-primary {
    color: #20a4e8;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0 7px 25px rgba(123, 104, 238, 0.25);
    padding: 12px 24px;
}

.hero-section-techvio .button-secondary {
    color: #ffffff;
    border-color: #3e57d0;
    background: #3e57d0;
    border-radius: 5px;
    box-shadow: 0 7px 25px rgba(123, 104, 238, 0.25);
    padding: 12px 24px;
}

.hero-section-techvio .hero-media {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    text-align: center;
}

.hero-section-techvio .hero-media img {
    width: min(100%, 640px);
    margin-left: auto;
    margin-right: auto;
    filter: none;
}

.hero-techvio-shape {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: auto;
    line-height: 0;
}

.hero-techvio-shape img {
    display: block;
    width: 100%;
    height: auto;
}

.page-inner {
    background: #ffffff;
}

.shared-page-banner {
    position: relative;
    overflow: hidden;
    min-height: 92vh;
    padding: 138px 0 92px;
    background: var(--hero-gradient);
}

/* Hero exclusivo da página de contratos: mantém o cabeçalho global e substitui somente o banner. */
.contracts-hero {
    overflow: hidden;
    padding: 116px 0 78px;
    background: #ffffff;
}

/* O hero anterior continua no markup para preservar o restante da Home, mas não é exibido. */
.contracts-hero + .hero-section-techvio { display: none; }

.segments-hero { overflow: hidden; padding: 150px 0 84px; background: #fff; }.segments-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, .9fr); align-items: center; gap: 60px; }.segments-eyebrow { display: inline-flex; gap: 8px; margin-bottom: 20px; color: #109fe3; font-size: .74rem; font-weight: 800; letter-spacing: .095em; text-transform: uppercase; }.segments-hero-copy h1 { max-width: 620px; margin: 0; color: var(--ink); font-size: clamp(2.3rem, 4vw, 3.8rem); line-height: 1.08; letter-spacing: -.05em; }.segments-hero-copy p { max-width: 555px; margin: 23px 0 28px; color: #617089; font-size: 1rem; line-height: 1.65; }.segments-hero-art { position: relative; display: grid; place-items: center; min-height: 390px; }.segments-halo { position: absolute; width: 410px; height: 410px; border-radius: 50%; background: #edf9ff; }.segments-board { position: relative; z-index: 1; width: min(100%, 470px); padding: 16px; border: 1px solid #e7e7f0; border-radius: 14px; background: #fff; box-shadow: 0 32px 60px rgba(9,101,167,.16); transform: rotate(-2deg); }.segments-board-top { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: .72rem; }.segments-board-top span { padding: 5px 8px; border-radius: 5px; color: #fff; background: #109fe3; font-size: .52rem; }.segments-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }.segments-cards article { display: grid; gap: 4px; padding: 13px; border: 1px solid #eeeef3; border-radius: 8px; background: #fcfcff; }.segments-cards i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #109fe3; background: #e6f7ff; font-style: normal; }.segments-cards b { font-size: .68rem; }.segments-cards small { color: #8c92a3; font-size: .48rem; }.segments-float-card { position: absolute; z-index: 2; right: -5px; bottom: 30px; display: flex; gap: 9px; align-items: center; padding: 12px 14px; border-radius: 9px; background: #fff; box-shadow: 0 16px 30px rgba(9,101,167,.16); }.segments-float-card > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #25a877; background: #ddf7eb; }.segments-float-card div { display: grid; gap: 2px; }.segments-float-card b { font-size: .7rem; }.segments-float-card small { color: #8d92a2; font-size: .58rem; }
.segments-hero-copy h1 em { color: #109fe3; font-style: normal; }

body.page-segments .site-header { position: absolute; background: rgba(255,255,255,.97); border-bottom: 1px solid #eeedf5; backdrop-filter: blur(14px); } body.page-segments .site-nav,body.page-segments .nav-dropdown-toggle,body.page-segments .site-nav > a { color: var(--ink); } body.page-segments .nav-link-icon { color: var(--primary-dark); background: rgba(0,179,168,.12); }
body.page-segments .feature-page-hero { display: none; }
body.page-segments .segments-hero { display: block; }

/* HeaderViewComponent: mesma navegação textual em todas as páginas. */
body .site-header-unified { position: absolute; left: 0; right: 0; background: rgba(255,255,255,.97); border-bottom: 1px solid #eeedf5; backdrop-filter: blur(14px); } body .site-header-unified .header-inner { min-height: 92px; justify-content: space-between; } body .site-header-unified .brand-logo { width: 148px; } body .site-header-unified .site-nav,body .site-header-unified .site-nav > a,body .site-header-unified .nav-dropdown-toggle { gap: 4px; color: #4e5570; font-size: .875rem; font-weight: 600; } body .site-header-unified .site-nav { gap: 34px; margin-left: auto; } body .site-header-unified .nav-dropdown-toggle span { color: #8d92a5; } body .site-header-unified .nav-dropdown-menu a { display: flex; align-items: center; } body .site-header-unified .header-actions { gap: 20px; margin-left: 8px; } body .site-header-unified .header-login { order: 1; padding: 10px 0; border: 0; border-radius: 0; color: #4e5570; background: transparent; box-shadow: none; font-size: .875rem; } body .site-header-unified .header-cta { order: 2; padding: 13px 17px; border-radius: 9px; background: #109fe3; box-shadow: 0 12px 22px rgba(8,125,206,.18); font-size: .875rem; } body .site-header-unified .header-login:hover,body .site-header-unified .header-login:focus { color: #4e5570; box-shadow: none; transform: none; } body .site-header-unified .header-cta:hover,body .site-header-unified .header-cta:focus { background: #087dce; }

.feature-page-hero{padding:150px 0 80px;background:#fff}.feature-page-hero-grid{display:grid;grid-template-columns:1fr .9fr;gap:60px;align-items:center}.feature-page-hero-copy h1{margin:0;color:var(--ink);font-size:clamp(2.3rem,4vw,3.8rem);line-height:1.08}.feature-page-hero-copy p{max-width:560px;color:#617089;line-height:1.65}.feature-page-visual{position:relative;display:grid;place-items:center;min-height:380px}.feature-glow{position:absolute;width:400px;height:400px;border-radius:50%;background:#edf9ff}.feature-window{position:relative;width:470px;max-width:100%;padding:16px;border:1px solid #e7e7f0;border-radius:14px;background:#fff;box-shadow:0 32px 60px rgba(9,101,167,.16);transform:rotate(-2deg)}.feature-window header{display:flex;justify-content:space-between;font-size:.72rem}.feature-window-content{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0}.feature-window-content i{height:70px;border-radius:7px;background:#edf8ff}.feature-window-card{padding:11px;border-radius:7px;background:#f5fbff}.feature-window-card b{display:block;color:#109fe3;font-size:.7rem}.feature-window-card small{color:#8d92a2;font-size:.55rem}.feature-page-hero[data-visual=whatsapp] .feature-glow{background:#e6f8ee}.feature-page-hero[data-visual=financeiro] .feature-glow{background:#e7f3ff}.feature-page-hero[data-visual=contratos] .feature-glow,.feature-page-hero[data-visual=assinatura] .feature-glow{background:#fff0f7}@media(max-width:900px){.feature-page-hero{padding:125px 0 55px}.feature-page-hero-grid{grid-template-columns:1fr}.feature-page-visual{min-height:320px}}
.feature-page-hero-copy h1 em{color:#109fe3;font-style:normal}.feature-page-hero[data-visual=whatsapp] .feature-window-content{display:flex;flex-direction:column;align-items:flex-start;gap:7px}.feature-page-hero[data-visual=whatsapp] .feature-window-content i{display:none}.feature-page-hero[data-visual=whatsapp] .feature-window-content i:first-child{position:relative;display:block;width:92%;height:184px;border-radius:9px;background:#e8f8ee}.feature-page-hero[data-visual=whatsapp] .feature-window-content i:first-child::after{position:absolute;inset:10px;color:#37795a;font-size:.43rem;font-style:normal;line-height:1.42;white-space:pre-line;content:'Olá, Márcia! 👋\A\A Passando para lembrar que seu horário está chegando! ✨\A\A 📅 Data: 07/08/2026\A 🕐 Horário: 11:30\A 💆 Procedimento: Botox 6\A 👤 Profissional: Dra Patricia\A\A 🏢 Estabelecimento: Estética Plena\A 📍 Rua João, 20 - Brooklin - São Paulo, SP\A\A Para confirmar sua presença, utilize os botões abaixo. 👇\A\A Esperamos por você! 💙'}.feature-page-hero[data-visual=whatsapp] .feature-window-content i:nth-child(2){position:relative;display:block;align-self:flex-end;width:64%;height:25px;border-radius:6px;background:#109fe3}.feature-page-hero[data-visual=whatsapp] .feature-window-content i:nth-child(2)::after{position:absolute;inset:7px;color:#fff;font-size:.43rem;font-style:normal;content:'✓ Confirmar'}

.plans-preview{position:relative;z-index:1;display:grid;gap:9px;width:445px;max-width:100%;padding:18px;border:1px solid #d7eafa;border-radius:17px;background:#fff;box-shadow:0 28px 55px rgba(9,101,167,.16);transform:rotate(-1.4deg)}.plans-preview>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;color:#22445d;font-size:.8rem;font-weight:800}.plans-preview>header small{padding:5px 8px;border-radius:99px;color:#168363;background:#e9f8f1;font-size:.55rem}.plans-preview-card{position:relative;display:grid;grid-template-columns:1fr auto;gap:5px;padding:12px 13px;border:1px solid #e1edf5;border-radius:10px;background:#fff}.plans-preview-card>div{display:grid;gap:2px}.plans-preview-card span{color:#25465f;font-size:.72rem;font-weight:800}.plans-preview-card>div small{color:#8497a6;font-size:.53rem}.plans-preview-card>strong{color:#183e5b;font-size:.83rem}.plans-preview-card>strong small{color:#8295a4;font-size:.5rem;font-weight:500}.plans-preview-card ul{grid-column:1/-1;display:flex;gap:12px;margin:4px 0 0;padding:0;list-style:none;color:#6e8495;font-size:.53rem}.plans-preview-card li::before{content:'✓';margin-right:4px;color:#168fdb;font-weight:800}.plans-preview-card.featured{border-color:#109fe3;background:#f2faff;box-shadow:0 8px 18px rgba(16,159,227,.12)}.plans-preview-card.featured>b{position:absolute;top:-8px;right:12px;padding:3px 7px;border-radius:99px;color:#fff;background:#109fe3;font-size:.46rem}.plans-page-hero .feature-glow{background:#e8f6ff}@media(max-width:900px){.plans-preview{margin:0 auto;transform:rotate(-1deg)}}

.agenda-page-hero .feature-glow{background:#e8f6ff}.agenda-preview{position:relative;z-index:1;width:475px;max-width:100%;padding:17px;border:1px solid #d8e8f3;border-radius:16px;background:#fff;box-shadow:0 28px 55px rgba(9,101,167,.16);transform:rotate(-1.4deg)}.agenda-preview header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.agenda-preview header div{display:grid;gap:2px}.agenda-preview header b{color:#213f56;font-size:.8rem}.agenda-preview header small{color:#8497a6;font-size:.55rem}.agenda-preview header>span{padding:5px 8px;border-radius:7px;color:#207fb9;background:#edf7fd;font-size:.55rem;font-weight:700}.agenda-preview-days{display:grid;grid-template-columns:38px repeat(5,1fr);border-bottom:1px solid #e8eef3;color:#8496a4;font-size:.48rem;text-align:center}.agenda-preview-days span{display:grid;gap:2px;padding:5px 0}.agenda-preview-days b{color:#536a7d;font-size:.5rem}.agenda-preview-days .today{border-radius:7px 7px 0 0;color:#fff;background:#109fe3}.agenda-preview-days .today b{color:#fff}.agenda-preview-grid{display:grid;grid-template-columns:38px repeat(5,1fr);height:204px;background:repeating-linear-gradient(to bottom,#fff 0,#fff 39px,#e9eef2 40px)}.agenda-preview-grid aside{display:grid;grid-template-rows:repeat(5,1fr);color:#9aa9b4;font-size:.45rem}.agenda-preview-grid aside span{padding-top:5px}.agenda-preview-grid>div{position:relative;border-left:1px solid #edf1f4}.agenda-preview-grid .event{position:absolute;left:3px;right:3px;display:grid;gap:1px;padding:5px;border-left:3px solid;border-radius:4px;font-size:.46rem;font-style:normal;font-weight:800;line-height:1.1}.agenda-preview-grid .event small{font-size:.38rem;font-weight:500}.agenda-preview-grid .event.blue{top:8px;border-color:#2898da;background:#eaf6fd;color:#2876a9}.agenda-preview-grid .event.pink{top:49px;border-color:#e781ae;background:#fff0f6;color:#aa5579}.agenda-preview-grid .event.green{top:88px;border-color:#55b996;background:#ebfaf4;color:#348468}.agenda-preview-grid .event.purple{top:132px;border-color:#199fe2;background:#e9f7ff;color:#237aac}.agenda-preview-grid .event.late{top:159px}.agenda-preview footer{display:flex;align-items:center;justify-content:space-between;margin-top:12px;color:#668093;font-size:.55rem}.agenda-preview footer span i{display:inline-block;width:6px;height:6px;margin-right:3px;border-radius:50%;background:#25a877}.agenda-preview footer b{padding:7px 9px;border-radius:5px;color:#fff;background:#109fe3;font-size:.5rem}@media(max-width:900px){.agenda-preview{margin:0 auto;transform:rotate(-1deg)}}

.agenda-multi-section{background:#f8fcff}.agenda-multi-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:62px;align-items:center}.agenda-multi-visual{position:relative;min-height:390px;display:grid;place-items:center}.agenda-multi-board{width:480px;max-width:100%;padding:17px;border:1px solid #d9eaf5;border-radius:17px;background:#fff;box-shadow:0 26px 52px rgba(9,101,167,.15);transform:rotate(-1.4deg)}.agenda-multi-board header{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.agenda-multi-board header div{display:grid;gap:3px}.agenda-multi-board header span{color:#7891a2;font-size:.55rem}.agenda-multi-board header strong{color:#25465d;font-size:.75rem}.agenda-multi-board header>b{padding:7px 9px;border-radius:6px;color:#fff;background:#109fe3;font-size:.53rem}.agenda-multi-professionals{display:grid;grid-template-columns:40px repeat(3,1fr);border-bottom:1px solid #e7eef3;color:#61798c;font-size:.5rem;text-align:center}.agenda-multi-professionals span{display:flex;align-items:center;justify-content:center;gap:4px;padding:7px 1px}.agenda-multi-professionals i{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;color:#fff;background:#199fe2;font-size:.4rem;font-style:normal}.agenda-multi-professionals span:nth-child(3) i{background:#df80a9}.agenda-multi-professionals span:nth-child(4) i{background:#50ad91}.agenda-multi-gridlines{display:grid;grid-template-columns:40px repeat(3,1fr);height:174px;background:repeating-linear-gradient(to bottom,#fff 0,#fff 42px,#e8eef2 43px)}.agenda-multi-gridlines aside{display:grid;grid-template-rows:repeat(4,1fr);color:#9aaab6;font-size:.43rem}.agenda-multi-gridlines aside span{padding-top:5px}.agenda-multi-gridlines>div{position:relative;border-left:1px solid #edf1f4}.multi-event{position:absolute;left:3px;right:3px;display:grid;gap:2px;padding:5px;border-left:3px solid;border-radius:4px;font-size:.45rem;line-height:1.1}.multi-event small{font-size:.36rem;font-weight:500}.multi-event.blue{top:7px;border-color:#2999db;background:#e9f6fd;color:#2876a9}.multi-event.pink{top:50px;border-color:#e981ae;background:#fff0f6;color:#aa5579}.multi-event.green{top:25px;border-color:#55b996;background:#ebfaf4;color:#348468}.multi-event.teal{top:48px;border-color:#20a99b;background:#e8faf8;color:#287b75}.multi-event.second{top:112px}.agenda-equipment-card,.agenda-sale-card{position:absolute;z-index:2;display:flex;gap:9px;align-items:center;padding:11px 13px;border-radius:10px;background:#fff;box-shadow:0 15px 29px rgba(9,101,167,.16)}.agenda-equipment-card{top:33px;right:-20px}.agenda-sale-card{bottom:30px;left:-15px}.agenda-equipment-card i,.agenda-sale-card i{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;color:#167fbd;background:#e9f6fd;font-size:.76rem;font-style:normal;font-weight:800}.agenda-sale-card i{color:#198363;background:#e9f8f1}.agenda-equipment-card div,.agenda-sale-card div{display:grid;gap:2px}.agenda-equipment-card strong,.agenda-sale-card strong{color:#34536a;font-size:.6rem}.agenda-equipment-card small,.agenda-sale-card small{color:#8296a5;font-size:.48rem}.agenda-multi-copy .eyebrow{color:#109fe3}.agenda-multi-copy h2{margin:12px 0 16px;color:#17384f;font-size:clamp(1.9rem,3vw,3rem);line-height:1.12}.agenda-multi-copy p{color:#61798c;line-height:1.7}.agenda-multi-points{display:grid;gap:10px;margin-top:23px;color:#2c627e;font-size:.85rem;font-weight:700}.agenda-multi-points span::before{content:'✓';display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border-radius:50%;color:#fff;background:#109fe3;font-size:.6rem}@media(max-width:900px){.agenda-multi-grid{grid-template-columns:1fr;gap:28px}.agenda-multi-visual{min-height:360px}.agenda-multi-board{margin:0 auto}.agenda-equipment-card{right:0}.agenda-sale-card{left:0}}@media(max-width:560px){.agenda-multi-board{transform:scale(.82);transform-origin:top center;margin-bottom:-60px}.agenda-equipment-card{top:245px;right:0}.agenda-sale-card{bottom:30px;left:0}.agenda-equipment-card small,.agenda-sale-card small{max-width:120px}}

@media (max-width: 900px) { .segments-hero { padding: 125px 0 58px; }.segments-hero-grid { grid-template-columns: 1fr; gap: 28px; }.segments-hero-art { min-height: 350px; } }
@media (max-width: 560px) { .segments-hero { padding: 112px 0 35px; }.segments-hero-copy h1 { font-size: clamp(2.2rem,11vw,3rem); }.segments-hero-art { min-height: 290px; transform: scale(.8); transform-origin: top center; margin-bottom: -55px; }.segments-hero .contracts-hero-actions { flex-direction: column; align-items: flex-start; gap: 15px; } }

/* O novo topo é claro: mantém logo e menu visíveis antes do cabeçalho ficar fixo. */
body.page-home .site-header:not(.is-sticky) {
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid rgba(216, 229, 234, .82);
    backdrop-filter: blur(14px);
}

body.page-home .site-header:not(.is-sticky) .site-nav,
body.page-home .site-header:not(.is-sticky) .nav-dropdown-toggle,
body.page-home .site-header:not(.is-sticky) .site-nav > a {
    color: var(--ink);
}

body.page-home .site-header:not(.is-sticky) .nav-link-icon {
    color: var(--primary-dark);
    background: rgba(0, 179, 168, .12);
}

/* Navegação da Home no estilo do protótipo, sem alterar textos nem o logo existentes. */
body.page-home .site-header,
body.page-home .site-header.is-sticky {
    position: absolute;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid #eeedf5;
    backdrop-filter: blur(14px);
}

body.page-home .header-inner { min-height: 92px; }
body.page-home .brand-logo { width: 148px; }

body.page-home .site-nav {
    gap: 34px;
    margin-left: auto;
    color: #4e5570;
    font-size: .875rem;
    font-weight: 600;
}

body.page-home .site-nav > a,
body.page-home .nav-dropdown-toggle,
body.page-home .site-header.is-sticky .site-nav > a,
body.page-home .site-header.is-sticky .nav-dropdown-toggle {
    gap: 4px;
    padding: 10px 0;
    color: #4e5570;
}

body.page-home .site-nav .nav-link-icon { display: none; }

body.page-home .header-actions { gap: 20px; }

body.page-home .header-login {
    order: 1;
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    color: #4e5570;
    background: transparent;
    box-shadow: none;
    font-size: .875rem;
}

body.page-home .header-login span,
body.page-home .header-cta span { display: none; }

body.page-home .header-login:hover,
body.page-home .header-login:focus { color: #4e5570; box-shadow: none; transform: none; }

body.page-home .header-cta {
    order: 2;
    padding: 13px 17px;
    border-radius: 9px;
    background: #109fe3;
    box-shadow: 0 12px 22px rgba(87, 59, 200, .18);
    font-size: .875rem;
}

body.page-home .header-cta:hover,
body.page-home .header-cta:focus { background: #087dce; box-shadow: 0 12px 22px rgba(87, 59, 200, .24); }

body .site-header-unified .header-cta { order: 1; }
body .site-header-unified .header-login { order: 2; }

body .site-header-unified .header-actions { gap: 13px; margin-left: 28px; }
body .site-header-unified .header-actions-divider { order: 2; width: auto; height: auto; color: #a7b5bf; background: transparent; font-size: 1.15rem; font-weight: 400; line-height: 1; }
body .site-header-unified .header-login { order: 3; }
body .site-header-unified .header-login { min-width: auto; padding: 12px 16px; border: 1px solid #bfe3f8; border-radius: 9px; color: #087dce; background: #edf8ff; font-weight: 700; }
body .site-header-unified .header-login:hover,body .site-header-unified .header-login:focus { color: #fff; background: #087dce; border-color: #087dce; }

/* Na Home o cabeçalho começa integrado ao hero e se fixa ao rolar, como nas páginas internas. */
body.page-home .site-header,
body.page-home .site-header:not(.is-sticky) {
    position: absolute;
    border-bottom: 0;
}

body.page-home .site-header.is-sticky {
    position: fixed;
    border-bottom: 1px solid #eeedf5;
}

body.page-planos .site-header.is-sticky {
    position: fixed;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid #eeedf5;
    backdrop-filter: blur(14px);
}

body.page-planos .site-header.is-sticky .site-nav,
body.page-planos .site-header.is-sticky .site-nav > a,
body.page-planos .site-header.is-sticky .nav-dropdown-toggle,
body.page-planos .site-header.is-sticky .header-login {
    color: #4e5570;
}

body.page-inner .site-header.is-sticky,
body.page-segments .site-header.is-sticky,
body.page-contracts .site-header.is-sticky {
    position: fixed;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid #eeedf5;
    backdrop-filter: blur(14px);
}

body.page-inner .site-header.is-sticky .site-nav,
body.page-inner .site-header.is-sticky .site-nav > a,
body.page-inner .site-header.is-sticky .nav-dropdown-toggle,
body.page-inner .site-header.is-sticky .header-login,
body.page-segments .site-header.is-sticky .site-nav,
body.page-segments .site-header.is-sticky .site-nav > a,
body.page-segments .site-header.is-sticky .nav-dropdown-toggle,
body.page-segments .site-header.is-sticky .header-login,
body.page-contracts .site-header.is-sticky .site-nav,
body.page-contracts .site-header.is-sticky .site-nav > a,
body.page-contracts .site-header.is-sticky .nav-dropdown-toggle,
body.page-contracts .site-header.is-sticky .header-login {
    color: #4e5570;
}

.contracts-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(410px, 0.94fr);
    align-items: center;
    gap: 58px;
}

.contracts-hero-copy {
    transform: translateY(24px);
}

.contracts-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    color: #109fe3;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .095em;
    text-transform: uppercase;
}

.contracts-hero-eyebrow span { font-size: 1rem; }
.contracts-hero-eyebrow em { color: var(--ink); font-style: normal; }

.contracts-hero-copy h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(2.35rem, 4.15vw, 4rem);
    line-height: 1.07;
    letter-spacing: -.055em;
}

.contracts-hero-copy h1 em { color: #109fe3; font-style: normal; }

.contracts-hero-description {
    max-width: 560px;
    margin: 23px 0 28px;
    color: #617089;
    font-size: 1rem;
    line-height: 1.65;
}

.contracts-hero-actions { display: flex; align-items: center; gap: 24px; }

.contracts-primary-action {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 9px;
    color: #fff;
    background: #109fe3;
    box-shadow: 0 12px 22px rgba(87, 59, 200, .2);
    font-size: .9rem;
    font-weight: 700;
}

.contracts-primary-action span { font-size: 1.25rem; font-weight: 400; }
.contracts-primary-action:hover { color: #fff; background: #087dce; transform: translateY(-2px); }

.contracts-secondary-action { display: inline-flex; align-items: center; gap: 9px; color: #525a73; font-size: .88rem; font-weight: 700; }
.contracts-secondary-action span { display: grid; place-items: center; width: 30px; height: 30px; padding-left: 2px; border: 1px solid #d9d7e6; border-radius: 50%; color: #109fe3; font-size: .62rem; }

.contracts-feature-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; max-width: 575px; }
.contracts-feature-tags > span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #d6efff; border-radius: 999px; color: #176ba9; background: #f5fbff; font-size: .7rem; font-weight: 700; }
.contracts-feature-tags i { display: grid; place-items: center; width: 14px; height: 14px; color: #168fdb; font-size: .8rem; font-style: normal; line-height: 1; }
.contracts-feature-tags .contracts-trust-tag { border-color: #d6f0e5; color: #278560; background: #f2fbf7; }.contracts-feature-tags .contracts-trust-tag i { color: #27936a; }

.contracts-hero-media { position: relative; display: grid; place-items: center; min-height: 425px; }
.contracts-orbit { position: absolute; border-radius: 50%; pointer-events: none; }.contracts-orbit-one { width: 465px; height: 465px; background: #edf9ff; }.contracts-orbit-two { width: 365px; height: 365px; border: 1px solid #d9f3ff; }
.contracts-app-window { position: relative; z-index: 1; display: flex; width: min(100%, 530px); height: 335px; overflow: hidden; border: 1px solid #e7e7f0; border-radius: 14px; background: #fff; box-shadow: 0 32px 60px rgba(41, 30, 91, .17); transform: rotate(-2.5deg); }
.contracts-app-sidebar { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 55px; padding: 17px 0; background: #292147; }.contracts-app-sidebar b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; color: #fff; background: #16a3e5; }.contracts-app-sidebar i { width: 18px; height: 18px; border-radius: 6px; background: #51496e; }.contracts-app-sidebar i.is-active { background: #279fe0; }
.contracts-app-content { flex: 1; background: #fbfbfe; }.contracts-app-top { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 20px; border-bottom: 1px solid #eeeef4; background: #fff; font-size: .75rem; }.contracts-app-top span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #9b5f53; background: #f4d4ce; font-size: .5rem; font-weight: 800; }
.contracts-calendar-body { display: block; padding: 13px 15px; }.calendar-toolbar { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: .58rem; }.calendar-toolbar span { color: #168fdb; font-size: .48rem; font-weight: 700; }.calendar-header { display: grid; grid-template-columns: 30px repeat(5, 1fr); border-bottom: 1px solid #ececf2; color: #8f94a5; font-size: .43rem; text-align: center; }.calendar-header span { padding-bottom: 7px; }.calendar-header b { display: block; color: #525a70; font-size: .56rem; }.calendar-header .today { display: grid; place-items: center; width: 17px; height: 17px; margin: 2px auto -2px; border-radius: 50%; color: #fff; background: #168fdb; }.calendar-grid { display: grid; grid-template-columns: 30px repeat(5, 1fr); height: 194px; }.calendar-grid > aside { display: grid; grid-template-rows: repeat(5, 1fr); color: #a3a6b2; font-size: .38rem; }.calendar-grid > aside span { padding-top: 5px; }.calendar-day { position: relative; border-left: 1px solid #ececf2; background: repeating-linear-gradient(to bottom, transparent 0, transparent 38px, #ececf2 39px); }.fc-event { position: absolute; left: 3px; right: 3px; display: block; min-height: 29px; padding: 4px; overflow: hidden; border-left: 2px solid; border-radius: 3px; font-size: .43rem; font-style: normal; font-weight: 700; line-height: 1.1; }.fc-event small { font-size: .34rem; font-weight: 500; }.fc-event.pink { top: 5px; border-color: #ec79aa; background: #fff0f7; color: #a74f77; }.fc-event.purple { top: 44px; border-color: #199fe2; background: #edf8ff; color: #147fca; }.fc-event.green { top: 23px; border-color: #55b996; background: #ebfaf4; color: #348468; }.fc-event.blue { top: 122px; border-color: #4c97df; background: #eaf5ff; color: #3775b1; }
.contracts-app-body { display: grid; grid-template-columns: 1fr 134px; gap: 13px; padding: 18px; }.contracts-app-card,.contracts-mini-calendar { border: 1px solid #e9e8ef; border-radius: 8px; background: #fff; }.contracts-app-card { padding: 15px; }.contracts-app-card header { display: flex; align-items: center; gap: 8px; }.contracts-app-card header div { display: grid; gap: 3px; }.contracts-app-card header b { font-size: .62rem; }.contracts-app-card small,.contracts-mini-calendar small { color: #8f94a5; font-size: .45rem; }.contracts-app-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: #109fe3; background: #e6f7ff; }.contracts-app-card header em { margin-left: auto; padding: 5px 7px; border-radius: 12px; color: #32a578; background: #e4f8ef; font-size: .4rem; font-style: normal; font-weight: 800; }.contracts-schedule-list { display: grid; gap: 8px; margin: 12px 0; }.contracts-schedule-list > div { display: grid; grid-template-columns: 25px 1px 1fr; gap: 6px; align-items: stretch; }.contracts-schedule-list time { padding-top: 5px; color: #9398a8; font-size: .43rem; font-weight: 700; }.schedule-line { position: relative; background: #eeeef4; }.schedule-line::before { content: ""; position: absolute; top: 7px; left: -2px; width: 5px; height: 5px; border-radius: 50%; background: #168fdb; }.schedule-appointment { display: grid; gap: 2px; min-height: 31px; padding: 5px 7px; border-left: 3px solid; border-radius: 4px; }.schedule-appointment b { font-size: .47rem; }.schedule-appointment small { font-size: .38rem; }.schedule-appointment.pink { border-color: #ee82b1; background: #fff1f7; }.schedule-appointment.purple { border-color: #199fe2; background: #f3efff; }.schedule-appointment.green { border-color: #55b996; background: #ebfaf4; }.contracts-app-card footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 5px; background: #f5fbff; }.contracts-app-card footer span { display: grid; gap: 2px; }.contracts-app-card footer b { font-size: .5rem; }.contracts-app-card footer strong { padding: 7px 9px; border-radius: 4px; color: #fff; background: #109fe3; font-size: .44rem; }.contracts-mini-calendar { padding: 12px 10px; }.contracts-mini-calendar p { margin: 0 0 10px; color: #777e93; font-size: .45rem; font-weight: 800; }.calendar-week,.calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }.calendar-week { margin-bottom: 5px; color: #a4a8b6; font-size: .38rem; font-weight: 700; }.calendar-days span { position: relative; display: grid; place-items: center; height: 14px; color: #667086; font-size: .43rem; }.calendar-days .selected { border-radius: 50%; color: #fff; background: #168fdb; }.calendar-days .has-bookings::after { content: ""; position: absolute; bottom: 1px; width: 3px; height: 3px; border-radius: 50%; background: #e979a8; }.calendar-days .selected::after { background: #fff; }.contracts-mini-calendar small { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: .38rem; }.contracts-mini-calendar small i { width: 5px; height: 5px; border-radius: 50%; background: #e979a8; }
.contracts-float-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 9px; background: #fff; box-shadow: 0 16px 30px rgba(42, 31, 92, .16); }
.contracts-float-card > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; font-size: .82rem; }.contracts-float-card div { display: grid; gap: 2px; }.contracts-float-card strong { font-size: .7rem; }.contracts-float-card small { color: #8d92a2; font-size: .58rem; }
.home-feature-card { z-index: 4; padding: 11px 13px; border: 1px solid #ebeaf3; box-shadow: 0 15px 32px rgba(27, 42, 92, .12); white-space: nowrap; }.home-feature-card > span { color: #109fe3; background: #eef8ff; font-weight: 800; }.home-feature-card strong { color: #223650; }.home-feature-card small { font-size: .68rem; }.card-contract { top: -10px; left: 6px; }.card-contract > span,.card-multi > span,.card-shared-appointment > span { color: #7958ea; background: #f1edff; }.card-sales { top: -2px; right: 38px; }.card-sales > span { color: #e36a89; background: #fff0f4; }.card-reminders { top: 92px; right: -86px; }.card-reminders > span { color: #25a877; background: #ddf7eb; }.card-multi { top: 112px; left: -122px; }.card-shared-appointment { top: 190px; left: -122px; box-sizing: border-box; width: 210px; white-space: normal; }.card-finance { top: 175px; right: -104px; }.card-finance > span { color: #168560; background: #e4f8ee; font-size: .62rem; }.card-equipment { bottom: 48px; left: -136px; }.card-equipment > span { color: #55667c; background: #eef2f7; }.card-club { right: -114px; bottom: 44px; }.card-club > span { color: #cf8b35; background: #fff3df; }.card-online { bottom: -26px; left: -28px; }.card-online > span { color: #6c58e7; background: #f0edff; }.card-app { right: 44px; bottom: -78px; }.card-app > span { color: #158ce0; background: #eaf6ff; }

@media (max-width: 900px) {
    .contracts-hero { padding: 84px 0 58px; }
    .contracts-hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .contracts-hero-copy { max-width: 640px; transform: translateY(12px); }
    .contracts-hero-media { min-height: 390px; }
}

@media (max-width: 560px) {
    .contracts-hero { padding: 64px 0 36px; }
    .contracts-hero-copy h1 { font-size: clamp(2.2rem, 11vw, 3rem); }
    .contracts-hero-description { margin-top: 18px; font-size: .94rem; }
    .contracts-hero-actions { flex-direction: column; align-items: flex-start; gap: 15px; }
    .contracts-feature-tags { margin-top: 18px; }
    .contracts-hero-media { min-height: 290px; transform: scale(.78); transform-origin: top center; margin-bottom: -62px; }
    .contracts-orbit-one { width: 390px; height: 390px; }.contracts-orbit-two { width: 305px; height: 305px; }
}

.shared-page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.08), transparent 20%),
        radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.08), transparent 26%);
    pointer-events: none;
}

.shared-page-banner-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    align-items: center;
    min-height: calc(92vh - 230px);
}

.shared-page-banner .hero-copy {
    position: relative;
    color: #e9f6ff;
}

.shared-page-banner .hero-copy h1,
.shared-page-banner .hero-copy p {
    color: #f4fbff;
}

.shared-page-banner .hero-copy h1 {
    max-width: 620px;
    font-size: clamp(2.45rem, 4.2vw, 3.7rem);
    font-weight: 700;
    line-height: 1.04;
    margin-bottom: 14px;
}

.shared-page-banner .hero-copy p {
    max-width: 560px;
    color: rgba(233, 246, 255, 0.88);
    font-size: 0.98rem;
    line-height: 1.55;
}

.shared-page-banner .eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #ff9800;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.shared-page-banner .hero-actions {
    margin-top: 18px;
    margin-bottom: 12px;
    flex-wrap: nowrap;
    gap: 12px;
}

.shared-page-banner .hero-media {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    text-align: center;
    overflow: hidden;
}

.shared-page-banner .hero-media img {
    width: min(100%, 640px);
    margin-left: auto;
    margin-right: auto;
    filter: none;
}

.shared-page-banner .hero-media[data-hero-variant="whatsapp-page"] {
    overflow: hidden;
    border-radius: 48px 20px 56px 24px;
    transform: rotate(-1.3deg);
}

.shared-page-banner .hero-media[data-hero-variant="whatsapp-page"] img {
    width: min(114%, 720px);
    max-width: none;
    border-radius: 38px 14px 44px 18px;
    transform: rotate(1.3deg) translateY(4px);
}


.shared-page-banner .button-primary {
    color: #20a4e8;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0 7px 25px rgba(123, 104, 238, 0.25);
    padding: 12px 24px;
}

.shared-page-banner .button-secondary {
    color: #ffffff;
    border-color: #3e57d0;
    background: #3e57d0;
    border-radius: 5px;
    box-shadow: 0 7px 25px rgba(123, 104, 238, 0.25);
    padding: 12px 24px;
}

@media (max-width: 960px) {
    .page-home .site-header,
    .page-inner .site-header {
        position: absolute;
    }

    .page-home .site-nav,
    .page-inner .site-nav {
        background: rgba(9, 30, 50, 0.96);
        border-color: rgba(255, 255, 255, 0.08);
        color: #f5fbff;
    }

    .page-home .site-nav > a,
    .page-home .site-nav .nav-dropdown-toggle,
    .page-inner .site-nav > a,
    .page-inner .site-nav .nav-dropdown-toggle {
        color: #f5fbff;
    }

    .page-home .site-nav .nav-dropdown-menu a,
    .page-home .site-nav .nav-dropdown-menu a span:last-child,
    .page-inner .site-nav .nav-dropdown-menu a,
    .page-inner .site-nav .nav-dropdown-menu a span:last-child {
        color: #f5fbff;
    }

    .page-home .site-nav .nav-link-icon,
    .page-inner .site-nav .nav-link-icon {
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
    }

    .page-home .site-nav .nav-dropdown-toggle > span:last-child::after,
    .page-inner .site-nav .nav-dropdown-toggle > span:last-child::after {
        color: #ffffff;
    }

    .page-home .site-nav > a:focus-visible,
    .page-home .site-nav > a:active,
    .page-home .site-nav .nav-dropdown-toggle:focus-visible,
    .page-home .site-nav .nav-dropdown-toggle:active,
    .page-home .site-nav .nav-dropdown.open > .nav-dropdown-toggle,
    .page-inner .site-nav > a:focus-visible,
    .page-inner .site-nav > a:active,
    .page-inner .site-nav .nav-dropdown-toggle:focus-visible,
    .page-inner .site-nav .nav-dropdown-toggle:active,
    .page-inner .site-nav .nav-dropdown.open > .nav-dropdown-toggle,
    .page-home .site-nav .nav-dropdown-menu a:focus-visible,
    .page-home .site-nav .nav-dropdown-menu a:active,
    .page-inner .site-nav .nav-dropdown-menu a:focus-visible,
    .page-inner .site-nav .nav-dropdown-menu a:active {
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
    }

    .hero-section-techvio {
        min-height: auto;
        padding: 126px 0 72px;
    }

    .shared-page-banner {
        min-height: auto;
        padding: 126px 0 78px;
    }

    .shared-page-banner-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .shared-page-banner .hero-actions {
        flex-wrap: wrap;
    }

    .hero-media.card-image-frame {
        display: none;
    }

    .hero-social-list {
        margin-bottom: 18px;
    }

    .hero-section-techvio .hero-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .hero-social-list {
        gap: 8px;
    }

    .hero-social-list a {
        width: 38px;
        height: 38px;
    }

    .hero-techvio-shape {
        height: auto;
    }

    .shared-page-banner {
        padding: 118px 0 70px;
    }

}

/* Ajustes de legibilidade para os cards da agenda multi-profissional. */
.agenda-equipment-card { top: -18px; }
.agenda-equipment-card div,
.agenda-sale-card div { gap: 3px; }
.agenda-equipment-card strong,
.agenda-sale-card strong { font-size: .75rem; }
.agenda-equipment-card small,
.agenda-sale-card small { font-size: .62rem; }

.agenda-sale-card {
    top: 58px;
    right: 12px;
    bottom: auto;
    left: auto;
}

.shared-appointment-section { background: #fff; }
.shared-appointment-grid { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: 62px; align-items: center; }
.shared-appointment-copy .eyebrow { color: #109fe3; }
.shared-appointment-copy h2 { margin: 12px 0 16px; color: #17384f; font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.12; }
.shared-appointment-copy p { color: #61798c; line-height: 1.7; }
.shared-appointment-points { display: grid; gap: 10px; margin-top: 23px; color: #2c627e; font-size: .85rem; font-weight: 700; }
.shared-appointment-points span::before { content: '✓'; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; color: #fff; background: #7958ea; font-size: .6rem; }
.shared-appointment-visual { display: grid; min-height: 360px; place-items: center; background: radial-gradient(circle at center, #f2efff 0, #faf9ff 46%, transparent 70%); }
.shared-appointment-demo { width: min(100%, 405px); padding: 20px; border: 1px solid #e6e1fa; border-radius: 18px; background: #fff; box-shadow: 0 25px 48px rgba(80, 57, 157, .15); transform: rotate(1.5deg); }
.shared-appointment-demo header { display: flex; align-items: center; gap: 11px; padding-bottom: 15px; border-bottom: 1px solid #eeeaf9; }
.shared-appointment-demo header > span { display: grid; place-items: center; width: 46px; height: 34px; border-radius: 8px; color: #7958ea; background: #f1edff; font-size: .72rem; font-weight: 800; }
.shared-appointment-demo header div { display: grid; gap: 3px; }
.shared-appointment-demo header strong { color: #30455c; font-size: .78rem; }
.shared-appointment-demo header small { color: #8296a5; font-size: .61rem; }
.shared-appointment-services { display: grid; gap: 9px; padding: 15px 0; }
.shared-appointment-services > div { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 9px; background: #faf9ff; }
.shared-appointment-services i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: #7958ea; font-size: .52rem; font-style: normal; font-weight: 800; }
.shared-appointment-services > div:nth-child(2) i { background: #e981ae; }
.shared-appointment-services span { display: grid; gap: 2px; }
.shared-appointment-services strong { color: #3b5267; font-size: .69rem; }
.shared-appointment-services small { color: #8b9dab; font-size: .57rem; }
.shared-appointment-demo footer { display: flex; align-items: center; gap: 7px; padding: 10px; border-radius: 8px; color: #5b4b9a; background: #f3f0ff; font-size: .62rem; font-weight: 700; }
.shared-appointment-demo footer span { font-size: .9rem; }

.online-booking-section { background: #f8fcff; }
.online-booking-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 62px; align-items: center; }
.online-booking-visual { display: grid; gap: 10px; min-height: 530px; place-content: center; padding: 22px 0; }
.online-booking-step { width: min(100%, 510px); }
.online-booking-step-label { display: flex; align-items: center; gap: 7px; margin: 0 0 7px 8px; color: #258e78; font-size: .63rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.online-booking-step-label span { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; color: #fff; background: #39c2a1; font-size: .58rem; }
.booking-settings-window,.booking-live-page { overflow: hidden; border: 1px solid #dce6ef; border-radius: 12px; background: #fff; box-shadow: 0 18px 34px rgba(18, 54, 90, .12); }
.booking-window-bar { display: flex; align-items: center; gap: 16px; padding: 8px 12px; color: #fff; background: #28afe7; font-size: .49rem; }
.booking-window-bar b { font-size: .56rem; }.booking-window-bar span { opacity: .9; }
.booking-settings-content { padding: 11px; background: #f2f5f9; }.booking-settings-title { display: grid; gap: 2px; padding: 0 2px 9px; }.booking-settings-title small,.booking-settings-form>small { color: #00aebe; font-size: .43rem; font-weight: 800; letter-spacing: .08em; }.booking-settings-title strong { color: #122344; font-size: .76rem; }.booking-settings-title span { color: #718194; font-size: .47rem; }
.booking-settings-body { display: grid; grid-template-columns: .72fr 1.28fr; gap: 8px; }.booking-settings-form { display: grid; align-content: start; gap: 5px; padding: 8px; border: 1px solid #dce6ef; border-radius: 7px; background: #fff; }.booking-settings-form>b { color: #122344; font-size: .54rem; }.booking-settings-form label { display: grid; gap: 3px; color: #263548; font-size: .43rem; font-weight: 700; }.booking-settings-form label span { display: flex; align-items: center; min-height: 20px; padding: 3px 5px; border: 1px solid #d7e0ea; border-radius: 4px; color: #526579; font-size: .42rem; font-weight: 500; }.booking-settings-form label i { width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; background: #090e5d; }
.booking-preview { display: grid; gap: 5px; }.booking-preview>small { color: #46546d; font-size: .48rem; font-weight: 700; }.booking-preview-page { overflow: hidden; border: 1px solid #dce6ef; border-radius: 7px; background: #fff; }.booking-preview-page header { display: flex; justify-content: space-between; padding: 7px; border-bottom: 1px solid #e8edf3; color: #122344; font-size: .42rem; }.booking-preview-page header span { color: #090e5d; font-size: .35rem; font-weight: 700; }.booking-preview-page>div { display: grid; gap: 4px; padding: 12px 9px; background: #fbfbff; }.booking-preview-page small,.booking-live-hero small,.booking-live-offers>small { color: #090e5d; font-size: .37rem; font-weight: 800; letter-spacing: .07em; }.booking-preview-page strong { color: #122344; font-size: .85rem; }.booking-preview-page p { margin: 0; color: #718194; font-size: .42rem; }.booking-preview-page>div>b { width: fit-content; padding: 5px 7px; border-radius: 4px; color: #fff; background: #090e5d; font-size: .39rem; }
.online-booking-arrow { display: grid; width: 27px; height: 27px; margin: -1px auto; place-items: center; border-radius: 50%; color: #28a387; background: #eaf8f5; font-weight: 800; z-index: 1; }.publish-step .online-booking-step-label { color: #337fc2; }.publish-step .online-booking-step-label span { background: #337fc2; }
.booking-live-page header { display: flex; justify-content: space-between; align-items: start; padding: 9px 12px; color: #122344; }.booking-live-page header div { display: grid; gap: 2px; font-size: .55rem; }.booking-live-page header small { color: #8190a0; font-size: .4rem; }.booking-live-page header>span { color: #090e5d; font-size: .4rem; font-weight: 700; }.booking-live-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 10px; padding: 14px 12px; background: #fbfbff; }.booking-live-hero>div { display: grid; align-content: center; gap: 5px; }.booking-live-hero strong { color: #122344; font-size: 1rem; }.booking-live-hero p,.booking-live-hero aside p { margin: 0; color: #718194; font-size: .45rem; line-height: 1.45; }.booking-live-hero>div>b { width: fit-content; padding: 5px 7px; border-radius: 4px; color: #fff; background: #090e5d; font-size: .4rem; }.booking-live-hero aside { display: grid; gap: 4px; padding: 8px; border: 1px solid #dfe3ed; border-radius: 7px; background: #fff; }.booking-live-hero aside i { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 5px; color: #090e5d; background: #eef0fb; font-size: .6rem; font-style: normal; }.booking-live-hero aside strong { color: #122344; font-size: .53rem; }.booking-live-hero aside>b { padding: 6px; border-radius: 4px; color: #fff; background: #090e5d; font-size: .36rem; text-align: center; }
.booking-live-offers { display: grid; gap: 4px; padding: 10px 12px; background: #f8f8fc; }.booking-live-offers>strong { color: #122344; font-size: .7rem; }.booking-live-offers>div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.booking-live-offers span { display: grid; gap: 3px; padding: 7px; border: 1px solid #e1e5ed; border-radius: 5px; background: #fff; }.booking-live-offers span i { color: #090e5d; font-size: .62rem; font-style: normal; }.booking-live-offers span b { color: #122344; font-size: .48rem; }.booking-live-offers span small { color: #718194; font-size: .38rem; }
.online-booking-copy .eyebrow { color: #109fe3; }.online-booking-copy h2 { margin: 12px 0 16px; color: #17384f; font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.12; }.online-booking-copy p { color: #61798c; line-height: 1.7; }.online-booking-points { display: grid; gap: 10px; margin-top: 23px; color: #2c627e; font-size: .85rem; font-weight: 700; }.online-booking-points span::before { content: '✓'; display: inline-grid; width: 18px; height: 18px; margin-right: 8px; place-items: center; border-radius: 50%; color: #fff; background: #39c2a1; font-size: .6rem; }

.agenda-multi-copy .eyebrow { color: var(--ink); }

@media (max-width: 960px) {
    /* Painéis demonstrativos em HTML/CSS ficam ocultos no mobile. */
    .feature-page-visual,
    .contracts-hero-media,
    .segments-hero-art,
    .contracts-preview,
    .contracts-preview-exact,
    .agenda-multi-visual,
    .financial-dashboard-frame,
    .payable-dashboard-frame,
    .cash-register-frame { display: none !important; }

    .feature-page-hero-grid,
    .agenda-multi-grid,
    .online-booking-grid { grid-template-columns: 1fr; }

    .shared-appointment-grid { grid-template-columns: 1fr; gap: 28px; }
    .shared-appointment-visual { min-height: 320px; }
    .online-booking-visual { min-height: auto; }

    .feature-page-hero { padding: 118px 0 52px; }
    .agenda-multi-section { padding: 54px 0; }

    /* Navegação compacta: somente o ícone de três linhas no cabeçalho. */
    body .site-header-unified .header-inner { min-height: 72px; }
    body .site-header-unified .menu-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid #cfe8f7; border-radius: 12px; background: #edf8ff; }
    body .site-header-unified .menu-toggle span { width: 21px; height: 2px; background: #109fe3; }
    body .site-header-unified .site-nav { width: min(86vw, 340px); padding: 82px 24px 28px; background: linear-gradient(180deg, #f4fbff 0%, #fff 34%) !important; box-shadow: -18px 0 42px rgba(9,101,167,.18); }
    .site-nav-close { color: #17384f !important; border-color: #dbe8ef !important; background: #f6fafc !important; }
    .site-nav,
    .site-nav > a,
    .site-nav .nav-dropdown-toggle,
    .site-nav .nav-dropdown-menu a,
    .site-nav .nav-dropdown-menu a span:last-child { color: #17384f !important; background-color: #fff; }
    .site-nav > a,
    .site-nav .nav-dropdown-toggle { min-height: 52px; padding: 14px 4px; border: 0; border-bottom: 1px solid #e2edf3; border-radius: 0; background: transparent !important; font-size: .95rem; font-weight: 700; }
    .site-nav > a:first-of-type { border-top: 1px solid #e2edf3; }
    .site-nav > a:active,
    .site-nav .nav-dropdown-toggle:active,
    .site-nav .nav-dropdown.open > .nav-dropdown-toggle { color: #109fe3 !important; background: transparent !important; }
    .site-nav .nav-dropdown-menu { margin-left: 4px; padding-left: 14px; border-left: 2px solid #b9e3f8; }
    .site-nav .nav-dropdown-menu a { min-height: 42px; padding: 8px 4px; border: 0; border-bottom: 0; border-radius: 0; background: transparent !important; font-size: .86rem; font-weight: 600; }
    .site-nav .nav-dropdown-toggle > span:last-child::after { color: #109fe3 !important; }

    .mobile-menu-heading { display: grid; align-items: center; min-height: 64px; margin-bottom: 12px; padding: 0 0 14px; border-bottom: 1px solid #e7eff4; }
    .mobile-menu-heading span { color: #109fe3; font-size: 1.18rem; font-weight: 800; letter-spacing: .08em; }
    .mobile-menu-heading strong { color: #172f44; font-size: 1.25rem; line-height: 1.1; }
    .site-nav-close { top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 12px; }
    .site-nav > a,
    .site-nav .nav-dropdown-toggle { padding-left: 10px; }
    .site-nav > a:first-of-type { padding-left: 12px; border: 0; border-radius: 13px; color: #109fe3 !important; background: #edf8ff !important; }
    .site-nav > a:first-of-type::before { content: "●"; margin-right: 9px; color: #109fe3; font-size: .58rem; }
    .site-nav .nav-dropdown-menu a { padding-left: 8px; }
    .mobile-menu-footer { display: grid; gap: 3px; margin-top: auto; padding: 17px 8px 2px; border-top: 1px solid #e7eff4; }
    .mobile-menu-footer strong { color: #109fe3; font-size: .85rem; }
    .mobile-menu-footer small { color: #8295a4; font-size: .68rem; }

    /* Drawer no padrão visual aprovado. */
    .site-nav { padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)) !important; gap: 5px; background: #fff !important; }
    .mobile-menu-heading { min-height: 67px; margin: 0 0 14px; padding: 0 0 14px; }
    .site-nav-close { top: max(18px, env(safe-area-inset-top)); right: 18px; color: #109fe3 !important; background: #edf8ff !important; }
    .site-nav > a,
    .site-nav .nav-dropdown-toggle { display: flex; align-items: center; gap: 13px; min-height: 54px; padding: 7px 10px; border: 0; border-radius: 13px; color: #109fe3 !important; font-size: 1.04rem; font-weight: 700; }
    .site-nav > a::before,
    .site-nav .nav-dropdown-toggle::before { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: currentColor; background: #f5f8fc; font-size: 1rem; font-weight: 700; }
    .site-nav > a:nth-of-type(1)::before { content: "⌂"; }
    .site-nav > a:nth-of-type(2)::before { content: "◫"; }
    .site-nav .nav-dropdown-toggle::before { content: "✦"; }
    .site-nav > a:nth-of-type(3)::before { content: "◌"; }
    .site-nav > a:first-of-type { background: #edf8ff !important; }
    .site-nav > a:first-of-type::before { background: #fff; box-shadow: 0 2px 8px rgba(16,159,227,.10); }
    .site-nav .nav-dropdown-menu { margin: 1px 0 3px 48px; padding: 0; border: 0; }
    .site-nav .nav-dropdown-menu a { display: flex; align-items: center; gap: 10px; min-height: 47px; padding: 6px 4px; color: #48657a !important; font-size: .94rem; font-weight: 600; }
    .site-nav .nav-dropdown-menu a .submenu-icon { width: 30px; height: 30px; border-radius: 9px; background: #f5f8fc; font-size: .85rem; }
    .site-nav .nav-dropdown-menu a .menu-svg-icon svg { width: 18px; height: 18px; }
    .mobile-menu-footer { margin-top: auto; padding: 17px 8px 2px; }
    .mobile-nav-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: currentColor; background: #f5f8fc; flex: 0 0 auto; }
    .mobile-nav-icon svg { width: 21px; height: 21px; }
    .site-nav > a::before { display: none !important; }
    .site-nav > a:first-of-type .mobile-nav-icon { background: #fff; box-shadow: 0 2px 8px rgba(16,159,227,.10); }
    .site-nav .nav-dropdown-toggle > span:last-child { display: none; }
    .site-nav .nav-dropdown-toggle::after { content: "⌄"; position: static; width: auto; height: auto; margin-left: auto; color: #109fe3; background: transparent; font-size: 1rem; transform: none; }
    .site-nav .nav-dropdown.open > .nav-dropdown-toggle::after { transform: rotate(180deg); }
    .site-nav > a,
    .site-nav > a:active,
    .site-nav > a:focus-visible { min-height: 54px !important; font-size: 1.04rem !important; line-height: 1.2; transform: none !important; }
    .site-nav .nav-dropdown-toggle,
    .site-nav .nav-dropdown-toggle:active,
    .site-nav .nav-dropdown-toggle:focus-visible,
    .site-nav .nav-dropdown.open > .nav-dropdown-toggle { min-height: 54px !important; font-size: 1.04rem !important; line-height: 1.2; transform: none !important; }
    .site-nav .nav-dropdown-toggle::before { width: 38px !important; min-width: 38px; height: 38px !important; min-height: 38px; flex: 0 0 38px; font-size: 1rem !important; }
    .mobile-menu-heading { display: flex; align-items: center; min-height: 58px; margin-bottom: 12px; padding: 0 0 13px; }
    .mobile-pricing-cta { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 13px; border-radius: 9px; color: #ffffff !important; background: #109fe3; box-shadow: 0 8px 16px rgba(8, 125, 206, 0.22); font-size: 0.82rem; font-weight: 800; }
}