/*
 * Site institucional (layout "public"). Usa os mesmos tokens --vesc-* do tema,
 * então as cores mudam junto com Configurações → Aparência.
 */

/* ---- Ícones adicionais (máscara SVG, herdam currentColor) ------------------- */
.vesc-icon-building { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01'/%3E%3C/svg%3E"); }
.vesc-icon-phone { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.vesc-icon-tools { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 7.9l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.9-7.9z'/%3E%3C/svg%3E"); }
.vesc-icon-shield { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.vesc-icon-bolt { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9z'/%3E%3C/svg%3E"); }
.vesc-icon-tv { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='m17 2-5 5-5-5'/%3E%3C/svg%3E"); }
.vesc-icon-mail { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }
.vesc-icon-map { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.vesc-icon-clock { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.vesc-icon-instagram { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E"); }
.vesc-icon-facebook { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E"); }
.vesc-icon-telegram { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E"); }
.vesc-icon-whatsapp { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.7-1.4.1-.2 0-.3 0-.4l-.8-1.9c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .1-1.3c0-.1-.2-.2-.5-.3z'/%3E%3C/svg%3E"); }

/* ---- Tokens do site (direção: "Corporate Premium" com toques tecnológicos) ------
 * Cores vêm do tema (--vesc-*). Aqui ficam espaçamento, raio, sombra e movimento,
 * para que todas as seções usem a mesma escala. */
.site {
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;
    --radius-sm: calc(var(--vesc-radius) * 1.25);
    --radius-md: calc(var(--vesc-radius) * 2);
    --radius-lg: calc(var(--vesc-radius) * 3);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-md: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -8px rgba(16, 24, 40, 0.12);
    --shadow-lg: 0 24px 48px -16px rgba(var(--vesc-secondary-rgb), 0.35);
    --motion-fast: 150ms;
    --motion-base: 250ms;
    --motion-slow: 600ms;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --site-ink: #0b1220;
    --site-dark: var(--vesc-secondary);
    --site-grad: linear-gradient(135deg, var(--vesc-secondary) 0%, var(--vesc-primary) 100%);
    --site-shadow: var(--shadow-md);
    --site-shadow-lg: var(--shadow-lg);
    --site-radius: var(--radius-md);
    background: var(--vesc-surface);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.site h1, .site h2, .site h3 { letter-spacing: -0.02em; }


.site .btn-lg { padding: 0.8rem 1.4rem; font-size: 1rem; font-weight: 600; }
.site .btn { font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.site .btn .vesc-icon { width: 1.15rem; height: 1.15rem; }
.site .btn-light { color: var(--vesc-secondary); }
.site .btn-outline-light { --bs-btn-hover-color: var(--vesc-secondary); }

.site-narrow { max-width: 820px; }

/* ---- Cabeçalho --------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 0.85rem 0;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s, padding 0.2s;
}
.site-header.is-scrolled { border-bottom-color: rgba(var(--vesc-secondary-rgb), 0.08); box-shadow: 0 6px 20px -12px rgba(16, 24, 40, 0.25); padding: 0.55rem 0; }
.site-brand { color: var(--vesc-secondary); font-weight: 800; font-size: 1.25rem; text-decoration: none; letter-spacing: -0.02em; }
.site-brand .vesc-logo { max-height: 40px; }
.site-nav { gap: 0.25rem; }
.site-nav a {
    color: var(--vesc-text);
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    transition: background 0.15s, color 0.15s;
}
.site-nav a:hover { background: rgba(var(--vesc-primary-rgb), 0.07); color: var(--vesc-primary); }
.site-nav a.active { color: var(--vesc-primary); background: rgba(var(--vesc-primary-rgb), 0.1); }
.site-btn-client {
    background: var(--site-grad);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    box-shadow: 0 6px 16px -6px rgba(var(--vesc-primary-rgb), 0.6);
}
.site-btn-client:hover { color: #fff; filter: brightness(1.08); }
.site-btn-client .vesc-icon { width: 1.1rem; height: 1.1rem; }
.site-menu-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(var(--vesc-secondary-rgb), 0.12); }
.vesc-burger, .vesc-burger::before, .vesc-burger::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--vesc-secondary); position: relative; }
.vesc-burger::before, .vesc-burger::after { content: ""; position: absolute; left: 0; }
.vesc-burger::before { top: -6px; }
.vesc-burger::after { top: 6px; }

.site-offcanvas { max-width: 86vw; }
.site-offcanvas-link { display: block; padding: 0.85rem 1rem; border-radius: 12px; font-size: 1.1rem; font-weight: 600; color: var(--vesc-text); text-decoration: none; }
.site-offcanvas-link:hover, .site-offcanvas-link.active { background: rgba(var(--vesc-primary-rgb), 0.08); color: var(--vesc-primary); }

/* ---- Hero -------------------------------------------------------------------- */
.site-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--site-grad);
    padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(4.5rem, 10vw, 8rem);
    isolation: isolate;
}
.site-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%);
    mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%);
}
.site-hero-glow {
    position: absolute;
    z-index: -1;
    width: 720px;
    height: 720px;
    right: -200px;
    top: -260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 60%);
    filter: blur(10px);
}
.site-hero-title { font-size: clamp(2.1rem, 5.2vw, 3.75rem); font-weight: 800; line-height: 1.05; margin-bottom: 1.25rem; }
.site-hero-lead { font-size: clamp(1rem, 1.6vw, 1.15rem); color: rgba(255, 255, 255, 0.85); max-width: 40rem; margin-bottom: 2rem; line-height: 1.65; }

.site-eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vesc-primary); margin-bottom: 0.75rem; }
.site-eyebrow-light {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    letter-spacing: 0.06em;
}
.site-pulse { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); animation: site-pulse 2s infinite; }
@keyframes site-pulse { 70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }

/* Ilustração: "sinal" em órbitas concêntricas, só CSS. */
.site-hero-visual { position: relative; aspect-ratio: 1; max-width: 440px; margin-left: auto; }
.site-orbit { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); }
.site-orbit-1 { width: 100%; height: 100%; animation: site-spin 40s linear infinite; border-style: dashed; }
.site-orbit-2 { width: 72%; height: 72%; border-color: rgba(255, 255, 255, 0.35); }
.site-orbit-3 { width: 44%; height: 44%; background: rgba(255, 255, 255, 0.06); }
.site-hero-core {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 110px;
    height: 110px;
    border-radius: 32px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.95);
    color: var(--vesc-primary);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
    animation: site-float 6s ease-in-out infinite;
}
.site-hero-core .vesc-icon { width: 56px; height: 56px; }
.site-float-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 0.8rem 1.1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.4);
}
.site-float-card strong { font-size: 1.35rem; line-height: 1.1; }
.site-float-card span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.8); }
.site-float-1 { top: 10%; left: -2%; animation: site-float 7s ease-in-out infinite; }
.site-float-2 { bottom: 12%; right: -2%; animation: site-float 8s ease-in-out infinite reverse; }
@keyframes site-spin { to { transform: rotate(360deg); } }
@keyframes site-float { 50% { transform: translateY(-12px); } }

/* ---- Consulta de cobertura -------------------------------------------------- */
.site-coverage { max-width: 34rem; }
.site-coverage-label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.5rem; }
.site-coverage-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.4rem 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--vesc-surface);
    box-shadow: var(--site-shadow);
    border: 1px solid rgba(var(--vesc-secondary-rgb), 0.1);
}
.site-coverage-row > .vesc-icon { width: 1.2rem; height: 1.2rem; color: var(--vesc-muted); flex: none; }
.site-coverage-row .form-control { border: 0; box-shadow: none; padding-left: 0.25rem; min-width: 0; background: transparent; }
.site-coverage-row .btn { border-radius: 999px; padding: 0.6rem 1.25rem; flex: none; }
.site-coverage-hero .site-coverage-label { color: rgba(255, 255, 255, 0.9); }
.site-coverage-result {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    font-size: 0.95rem;
    background: var(--vesc-surface);
    color: var(--vesc-text);
    box-shadow: var(--site-shadow);
    border-left: 4px solid var(--vesc-muted);
}
.site-coverage-result.is-yes { border-left-color: #10b981; }
.site-coverage-result.is-no { border-left-color: var(--vesc-accent); }
.site-coverage-result a { font-weight: 600; }
.site-coverage-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 3rem;
    padding: 2rem;
    border-radius: var(--site-radius);
    background: var(--vesc-bg);
    border: 1px solid rgba(var(--vesc-secondary-rgb), 0.06);
}
.site-coverage-box .site-coverage { flex: 1 1 22rem; }
.site-coverage-box .site-coverage-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- Destaques ------------------------------------------------------------- */
.site-highlights { margin-top: -3.25rem; position: relative; z-index: 2; }
.site-highlight {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.35rem 1.25rem;
    border-radius: var(--site-radius);
    background: var(--vesc-surface);
    box-shadow: var(--site-shadow);
    border: 1px solid rgba(var(--vesc-secondary-rgb), 0.06);
}
.site-highlight strong { font-size: 1.05rem; color: var(--vesc-secondary); }
.site-highlight span { font-size: 0.875rem; color: var(--vesc-muted); line-height: 1.45; }

/* ---- Seções ----------------------------------------------------------------- */
.site-section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.site-section-alt { background: var(--vesc-bg); }
.site-section-head { text-align: center; max-width: 44rem; margin: 0 auto 2.75rem; }
.site-section-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; color: var(--vesc-secondary); margin-bottom: 0.75rem; }
.site-section-lead { color: var(--vesc-muted); font-size: 1.05rem; margin: 0; }
.site-text { color: var(--vesc-text); line-height: 1.75; }
.site-text-lg { font-size: 1.1rem; }
.site-note { text-align: center; color: var(--vesc-muted); font-size: 0.875rem; margin: 1.5rem 0 0; }

.site-page-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
    background:
        radial-gradient(ellipse at 85% 0%, rgba(var(--vesc-primary-rgb), 0.16), transparent 55%),
        radial-gradient(ellipse at 0% 100%, rgba(var(--vesc-secondary-rgb), 0.08), transparent 50%),
        var(--vesc-bg);
}
.site-page-title { font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 800; color: var(--vesc-secondary); margin-bottom: 0.75rem; }
.site-page-lead { font-size: 1.1rem; color: var(--vesc-muted); max-width: 42rem; margin: 0; }
.site-crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0 0 1.25rem; font-size: 0.875rem; color: var(--vesc-muted); }
.site-crumbs li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.5; }
.site-crumbs a { color: inherit; text-decoration: none; }
.site-crumbs a:hover { color: var(--vesc-primary); }

/* ---- Planos ---------------------------------------------------------------- */
.site-plans { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; max-width: 1080px; margin: 0 auto; }
.site-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.75rem;
    border-radius: calc(var(--site-radius) * 1.25);
    background: var(--vesc-surface);
    border: 1px solid rgba(var(--vesc-secondary-rgb), 0.1);
    box-shadow: var(--site-shadow);
    transition: transform 0.25s, box-shadow 0.25s;
}
.site-plan:hover { transform: translateY(-6px); box-shadow: var(--site-shadow-lg); }
.site-plan.is-featured { background: var(--site-grad); color: #fff; border-color: transparent; box-shadow: var(--site-shadow-lg); }
.site-plan-badge {
    position: absolute;
    top: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    background: var(--vesc-accent);
    color: #1f2937;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.site-plan-title { font-size: 1.6rem; font-weight: 800; margin-bottom: 0.35rem; color: var(--vesc-secondary); }
.site-plan.is-featured .site-plan-title { color: #fff; }
.site-plan-sub { color: var(--vesc-muted); font-size: 0.925rem; min-height: 2.8em; }
.site-plan.is-featured .site-plan-sub { color: rgba(255, 255, 255, 0.8); }
.site-plan-price { display: flex; align-items: flex-start; gap: 0.2rem; margin: 0.5rem 0 1.5rem; line-height: 1; }
.site-plan-currency { font-size: 1rem; font-weight: 700; margin-top: 0.5rem; }
.site-plan-int { font-size: 3.4rem; font-weight: 800; letter-spacing: -0.04em; }
.site-plan-cents { display: flex; flex-direction: column; font-size: 1.25rem; font-weight: 800; margin-top: 0.4rem; }
.site-plan-cents small { font-size: 0.8rem; font-weight: 500; opacity: 0.75; margin-top: 0.2rem; }
.site-plan-actions { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.site-plan-link { font-size: 0.875rem; color: var(--vesc-muted); }
.site-plan.is-featured .site-plan-link { color: rgba(255, 255, 255, 0.85); }

.site-check-list { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: 0.6rem; }
.site-check-list li { position: relative; padding-left: 1.85rem; }
.site-check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: var(--vesc-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='black' fill-opacity='.14'/%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='black' fill-opacity='.14'/%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-plan.is-featured .site-check-list li::before { background-color: #fff; }

/* ---- Serviços / canais / pilares ------------------------------------------- */
.site-service, .site-channel, .site-pillar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    padding: 1.6rem;
    border-radius: var(--site-radius);
    background: var(--vesc-surface);
    border: 1px solid rgba(var(--vesc-secondary-rgb), 0.08);
    color: var(--vesc-text);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
a.site-service:hover, a.site-channel:hover { transform: translateY(-4px); box-shadow: var(--site-shadow-lg); border-color: rgba(var(--vesc-primary-rgb), 0.3); color: var(--vesc-text); }
.site-service h3, .site-service h2 { font-size: 1.1rem; font-weight: 700; color: var(--vesc-secondary); margin: 0.5rem 0 0; }
.site-service p { color: var(--vesc-muted); margin: 0; font-size: 0.95rem; }
.site-service-wide { flex-direction: row; gap: 1.25rem; align-items: flex-start; }
.site-service-wide h2 { margin-top: 0; }
.site-service-wide p { margin-bottom: 0.75rem; }
.site-service-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--vesc-primary-rgb), 0.14), rgba(var(--vesc-primary-rgb), 0.05));
    color: var(--vesc-primary);
}
.site-service-icon .vesc-icon { width: 1.5rem; height: 1.5rem; }
.site-service-icon-lg { width: 4rem; height: 4rem; border-radius: 18px; margin-bottom: 1rem; }
.site-service-icon-lg .vesc-icon { width: 2rem; height: 2rem; }
.site-more { margin-top: auto; font-weight: 600; font-size: 0.9rem; color: var(--vesc-primary); }
.site-more::after { content: " →"; transition: margin 0.2s; }
a:hover .site-more::after { margin-left: 0.25rem; }
.site-channel strong { color: var(--vesc-secondary); margin-top: 0.5rem; }
.site-channel span:last-child { color: var(--vesc-muted); font-size: 0.9rem; }
.site-pillar p { color: var(--vesc-muted); }

.site-self-service { padding: 2rem; border-radius: calc(var(--site-radius) * 1.25); background: var(--vesc-bg); border: 1px solid rgba(var(--vesc-secondary-rgb), 0.06); }
.site-quick {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    height: 100%;
    padding: 1rem;
    border-radius: 14px;
    background: var(--vesc-surface);
    color: var(--vesc-secondary);
    font-weight: 600;
    font-size: 0.925rem;
    text-decoration: none;
    box-shadow: var(--site-shadow);
    transition: transform 0.2s, color 0.2s;
}
.site-quick:hover { transform: translateY(-2px); color: var(--vesc-primary); }
.site-quick .vesc-icon { width: 1.35rem; height: 1.35rem; color: var(--vesc-primary); flex: none; }

/* ---- FAQ ------------------------------------------------------------------- */
.site-faq { --bs-accordion-border-color: transparent; --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--vesc-primary-rgb), 0.2); --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--vesc-primary); display: grid; gap: 0.75rem; }
.site-faq .accordion-item { border-radius: var(--site-radius) !important; overflow: hidden; background: var(--vesc-surface); border: 1px solid rgba(var(--vesc-secondary-rgb), 0.08); }
.site-faq .accordion-button { font-weight: 600; padding: 1.15rem 1.35rem; background: var(--vesc-surface); color: var(--vesc-secondary); }
.site-faq .accordion-button:not(.collapsed) { box-shadow: none; color: var(--vesc-primary); }
.site-faq .accordion-body { padding: 0 1.35rem 1.25rem; color: var(--vesc-muted); line-height: 1.7; }

/* ---- CTA ------------------------------------------------------------------- */
.site-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(2rem, 5vw, 3.25rem);
    border-radius: calc(var(--site-radius) * 1.5);
    background: var(--site-grad);
    color: #fff;
    box-shadow: var(--site-shadow-lg);
}
.site-cta::after { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 65%); pointer-events: none; }
.site-cta-title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin-bottom: 0.4rem; }
.site-cta p { color: rgba(255, 255, 255, 0.85); }
.site-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; position: relative; z-index: 1; }

/* ---- Atendimento ----------------------------------------------------------- */
.site-status { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1rem; border-radius: 999px; margin-bottom: 1.75rem; font-weight: 600; font-size: 0.925rem; background: var(--vesc-bg); }
.site-status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vesc-muted); }
.site-status.is-open .site-status-dot { background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2); }
.site-status.is-closed .site-status-dot { background: var(--vesc-accent); }

/* ---- Contato --------------------------------------------------------------- */
.site-form-card, .site-contact-card {
    padding: clamp(1.25rem, 4vw, 2.25rem);
    border-radius: calc(var(--site-radius) * 1.25);
    background: var(--vesc-surface);
    border: 1px solid rgba(var(--vesc-secondary-rgb), 0.08);
    box-shadow: var(--site-shadow);
}
.site-contact-card { background: var(--vesc-bg); box-shadow: none; }
.site-form-card .form-control, .site-form-card .form-select { padding: 0.7rem 0.9rem; }
.site-tabs { display: flex; gap: 0.25rem; padding: 0.3rem; margin-bottom: 1.5rem; border-radius: 999px; background: var(--vesc-bg); }
.site-tab { flex: 1; white-space: nowrap; text-align: center; padding: 0.6rem 0.75rem; border-radius: 999px; font-weight: 600; font-size: 0.925rem; color: var(--vesc-muted); text-decoration: none; }
.site-tab.active { background: var(--vesc-surface); color: var(--vesc-primary); box-shadow: var(--site-shadow); }
.site-contact-list { display: grid; gap: 1.1rem; }
.site-contact-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.site-contact-list div { display: flex; flex-direction: column; min-width: 0; }
.site-contact-list strong { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vesc-muted); }
.site-contact-list a, .site-contact-list span { color: var(--vesc-secondary); font-weight: 600; overflow-wrap: anywhere; }
.site-sent { text-align: center; padding: 2rem 0.5rem; }
.site-sent-icon {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: #10b981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 2rem no-repeat;
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.15);
}

.site-legal h2 { font-size: 1.25rem; font-weight: 700; color: var(--vesc-secondary); margin: 2rem 0 0.5rem; }
.site-legal h2:first-of-type { margin-top: 0; }
.site-legal p { color: var(--vesc-text); line-height: 1.75; }

/* ---- Rodapé ---------------------------------------------------------------- */
.site-footer { background: #0b1220; color: rgba(255, 255, 255, 0.72); padding: 4rem 0 1.5rem; font-size: 0.925rem; }
.site-footer-brand { color: #fff; font-size: 1.35rem; font-weight: 800; }
.site-footer-brand .vesc-logo { max-height: 44px; background: #fff; padding: 6px 12px; border-radius: 12px; box-sizing: content-box; }
.site-footer-muted { color: rgba(255, 255, 255, 0.6); max-width: 22rem; }
.site-footer-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; font-weight: 700; margin-bottom: 1rem; }
.site-footer-links { display: grid; gap: 0.55rem; }
.site-footer a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer-contact { display: grid; gap: 0.75rem; }
.site-footer-contact li { display: flex; gap: 0.6rem; align-items: flex-start; overflow-wrap: anywhere; }
.site-footer-contact .vesc-icon { width: 1.1rem; height: 1.1rem; flex: none; margin-top: 0.15rem; color: rgba(255, 255, 255, 0.5); }
.site-social { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); transition: background 0.2s; }
.site-social:hover { background: var(--vesc-primary); }
.site-social .vesc-icon { width: 1.15rem; height: 1.15rem; }
.site-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.825rem; color: rgba(255, 255, 255, 0.5); }

/* ---- WhatsApp flutuante ---------------------------------------------------- */
.site-whatsapp {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 1020;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 12px 28px -8px rgba(37, 211, 102, 0.7);
    transition: transform 0.2s;
}
.site-whatsapp:hover { color: #fff; transform: scale(1.08); }
.site-whatsapp .vesc-icon { width: 30px; height: 30px; }

/* ---- Animação de entrada (só com JS e sem "reduzir movimento") ------------- */
.site-js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.site-js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ======================================================================
   Fase 9 — reforço visual
   ====================================================================== */
.site :is(section, [id]) { scroll-margin-top: 5.5rem; }
.site ::selection { background: rgba(var(--vesc-primary-rgb), 0.18); }
.site a:focus-visible, .site button:focus-visible, .site input:focus-visible, .site select:focus-visible, .site textarea:focus-visible {
    outline: 3px solid rgba(var(--vesc-primary-rgb), 0.55);
    outline-offset: 2px;
}

/* Barra superior com status do atendimento e atalhos */
.site-topbar { background: var(--site-ink); color: rgba(255, 255, 255, 0.75); font-size: 0.8125rem; padding: 0.45rem 0; }
.site-topbar a { color: rgba(255, 255, 255, 0.8); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.site-topbar a:hover { color: #fff; }
.site-topbar .vesc-icon { width: 0.95rem; height: 0.95rem; }
.site-topbar-status { display: inline-flex; align-items: center; gap: 0.5rem; }
.site-topbar-status .site-status-dot { width: 8px; height: 8px; background: var(--vesc-accent); }
.site-topbar-status.is-open .site-status-dot { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25); }
.site-btn-ghost { border-radius: 999px; padding: 0.5rem 1rem; color: var(--vesc-primary); border: 1px solid rgba(var(--vesc-primary-rgb), 0.35); }
.site-btn-ghost:hover { background: rgba(var(--vesc-primary-rgb), 0.08); color: var(--vesc-primary); }

/* Hero: feixe de luz animado + terceiro cartão flutuante */
.site-hero-beam {
    position: absolute;
    z-index: -1;
    inset: -40% -10% auto auto;
    width: 60%;
    height: 180%;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.09) 50%, transparent 60%);
    animation: site-beam 9s var(--ease) infinite;
}
@keyframes site-beam { 0% { transform: translateX(-30%); } 60%, 100% { transform: translateX(40%); } }
.site-float-3 { bottom: -2%; left: 8%; animation: site-float 9s ease-in-out infinite; }

/* Destaques em faixa única (grid) */
.site-highlights-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px) { .site-highlights-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Seção escura (institucional) */
.site-section-dark { background: radial-gradient(ellipse at 10% 0%, rgba(var(--vesc-primary-rgb), 0.35), transparent 55%), var(--site-ink); color: rgba(255, 255, 255, 0.8); }
.site-eyebrow-onDark { color: rgba(255, 255, 255, 0.7); }
.site-text-onDark { color: rgba(255, 255, 255, 0.78); font-size: 1.05rem; }
.site-section-dark .site-self-service { background: var(--vesc-surface); }

.site-link-arrow { font-weight: 600; color: var(--vesc-primary); text-decoration: none; }
.site-link-arrow::after { content: " →"; transition: margin var(--motion-fast); }
.site-link-arrow:hover::after { margin-left: 0.25rem; }

/* Passos de contratação */
.site-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: step; }
.site-steps li {
    position: relative;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--vesc-surface);
    border: 1px solid rgba(var(--vesc-secondary-rgb), 0.08);
}
.site-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.35rem;
    right: -0.9rem;
    width: 0.9rem;
    height: 2px;
    background: rgba(var(--vesc-primary-rgb), 0.3);
}
.site-steps h3 { font-size: 1.05rem; font-weight: 700; color: var(--vesc-secondary); margin: var(--space-3) 0 var(--space-2); }
.site-steps p { margin: 0; color: var(--vesc-muted); font-size: 0.95rem; }
.site-step-n {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--site-grad);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 8px 18px -8px rgba(var(--vesc-primary-rgb), 0.8);
}

/* Qual plano combina com você? */
.site-finder, .site-guide, .site-compare {
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--radius-lg);
    background: var(--vesc-surface);
    border: 1px solid rgba(var(--vesc-secondary-rgb), 0.08);
    box-shadow: var(--shadow-md);
}
.site-finder-legend { font-size: 0.9rem; font-weight: 600; margin-bottom: var(--space-2); }
.site-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.site-chips label { position: relative; cursor: pointer; }
.site-chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.site-chips span {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--vesc-secondary-rgb), 0.18);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
.site-chips input:checked + span { background: var(--vesc-primary); border-color: var(--vesc-primary); color: #fff; }
.site-chips input:focus-visible + span { outline: 3px solid rgba(var(--vesc-primary-rgb), 0.45); outline-offset: 2px; }
.site-finder-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: rgba(var(--vesc-primary-rgb), 0.07);
}
.site-finder-result:empty { display: none; }
.site-finder-plan { font-size: 1.5rem; font-weight: 800; color: var(--vesc-secondary); line-height: 1.1; }
.site-finder-why { font-size: 0.85rem; color: var(--vesc-muted); }

/* Tabelas do site (guia de velocidade, comparativo, privacidade) */
.site-table { --bs-table-bg: transparent; margin: 0; }
.site-table th, .site-table td { padding: 0.7rem 0.6rem; vertical-align: middle; border-color: rgba(var(--vesc-secondary-rgb), 0.08); }
.site-table thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vesc-muted); font-weight: 700; }
.site-compare-table th[scope="row"] { font-weight: 500; }
.site-compare-table .is-featured { background: rgba(var(--vesc-primary-rgb), 0.06); }
.site-yes {
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    background-color: var(--vesc-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='black' fill-opacity='.14'/%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='black' fill-opacity='.14'/%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-no { color: var(--vesc-muted); }

/* Cabeçalho das páginas internas com forma decorativa */
.site-page-hero-shape {
    position: absolute;
    right: -120px;
    top: -140px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    border: 70px solid rgba(var(--vesc-primary-rgb), 0.06);
    pointer-events: none;
}

.site-aside-card { position: sticky; top: 6rem; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--vesc-bg); border: 1px solid rgba(var(--vesc-secondary-rgb), 0.06); }
.site-coverage-aside .site-coverage-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.site-coverage-aside .site-coverage-row { flex-wrap: wrap; border-radius: var(--radius-md); padding: 0.5rem; }
.site-coverage-aside .site-coverage-row > .vesc-icon { display: none; }
.site-coverage-aside .site-coverage-row .form-control, .site-coverage-aside .site-coverage-row .btn { flex: 1 1 100%; }

.site-text-lead { font-size: 1.25rem; line-height: 1.65; color: var(--vesc-secondary); font-weight: 500; }
.site-facts { display: grid; gap: var(--space-3); }
.site-facts li {
    display: flex;
    flex-direction: column;
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--vesc-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--vesc-bg);
}
.site-facts strong { color: var(--vesc-secondary); font-size: 1.1rem; }
.site-facts span { color: var(--vesc-muted); font-size: 0.925rem; }

/* Páginas legais */
.site-legal-note { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--vesc-bg); color: var(--vesc-muted); font-size: 0.925rem; }
.site-legal ul { padding-left: 1.2rem; }
.site-legal li { margin-bottom: 0.35rem; line-height: 1.65; }
.site-tip { height: 100%; padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(var(--vesc-secondary-rgb), 0.1); }
.site-tip strong { display: block; margin-bottom: var(--space-2); color: var(--vesc-secondary); }
.site-tip.is-no { border-left: 4px solid #ef4444; }
.site-tip.is-yes { border-left: 4px solid #10b981; }

/* 404 */
.site-404 { padding-bottom: clamp(3rem, 6vw, 5rem); }
.site-404-code { font-size: clamp(4.5rem, 14vw, 8rem); font-weight: 900; line-height: 1; margin: 0 0 var(--space-2); background: var(--site-grad); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.05em; }

/* CTA do rodapé (em todas as páginas) */
.site-footer-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-6);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: var(--radius-lg);
    background: var(--site-grad);
    color: rgba(255, 255, 255, 0.85);
    box-shadow: var(--shadow-lg);
    position: relative;
}
.site-footer-cta-title { font-size: clamp(1.2rem, 2.6vw, 1.6rem); font-weight: 800; color: #fff; margin-bottom: var(--space-1); letter-spacing: -0.02em; }
.site-footer-bottom { padding-right: 4.5rem; }
.site-footer address { font-style: normal; }
.site-footer .site-footer-bottom a { color: rgba(255, 255, 255, 0.6); }

@media (max-width: 991.98px) {
    .site-steps li:not(:last-child)::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .site *, .site *::before, .site *::after { animation: none !important; transition: none !important; }
    .site-js [data-reveal] { opacity: 1; transform: none; }
}

@media (max-width: 575.98px) {
    .site-coverage-row { border-radius: 18px; flex-wrap: wrap; padding: 0.5rem; }
    .site-coverage-row > .vesc-icon { display: none; }
    .site-coverage-row .form-control { flex: 1 1 100%; padding: 0.6rem 0.75rem; }
    .site-coverage-row .btn { flex: 1 1 100%; border-radius: 12px; }
    .site-hero .btn-lg { flex: 1 1 100%; }
    .site-service-wide { flex-direction: column; }
    .site-cta-actions, .site-cta-actions .btn { width: 100%; }
    .site-whatsapp { width: 52px; height: 52px; }
}