/* ==========================================================================
   HostMF Design System
   Documentação: docs/DESIGN-SYSTEM.md

   1. Tokens          - variáveis CSS (cores, tipografia, espaçamento, raio, sombra)
   2. Base            - acessibilidade, movimento, correções de renderização
   3. Componentes     - prefixo .ds-* (use estes em páginas novas)
   4. Camada legada   - reestiliza classes antigas (.header-subpage, .table-pricing,
                        .hp-5...) com os mesmos tokens, sem precisar reescrever o HTML
   ========================================================================== */

/* 1. TOKENS ============================================================== */
:root {
    /* Marca: paleta derivada do logo (azul-acinzentado #6a7e9d e cinza #7a7a7a) */
    --ds-primary: #6a7e9d;        /* cor do logo: ícones, bordas, destaques decorativos */
    --ds-primary-rgb: 106, 126, 157;
    --ds-primary-300: #9fb0cb;    /* destaque sobre fundo escuro */
    --ds-primary-500: #5f7393;    /* preenchimento de botão (texto branco passa em AA) */
    --ds-primary-600: #566a89;    /* preços, números, fim do gradiente */
    --ds-primary-700: #44556f;    /* texto de link sobre fundo claro */
    --ds-primary-fg: var(--ds-primary-600); /* texto e ícones de destaque; clareia sozinho em fundo escuro */
    --ds-primary-050: #f2f5f9;
    --ds-primary-100: #e1e7f0;
    --ds-gray: #7a7a7a;           /* cinza do logo: uso decorativo e textos grandes */
    --ds-slate: #6a7e9d;          /* cor do logo como fundo; não muda em seções escuras */
    --ds-slate-700: #455061;
    --ds-navy: #1a202c;
    --ds-navy-900: #0f1419;

    /* Texto e superfícies */
    --ds-text: #1a202c;
    --ds-text-body: #4a5568;
    --ds-text-muted: #6b7280;
    --ds-surface: #ffffff;
    --ds-surface-soft: #f6f8fb;
    --ds-surface-muted: #f3f5f8;
    --ds-border: #e5e9f0;

    /* Estado */
    --ds-success: #10b981;
    --ds-warning: #f59e0b;
    --ds-danger: #ef4444;

    /* Tipografia */
    --ds-fw-heading: 700;         /* títulos */
    --ds-fw-strong: 600;          /* botões, preços, destaques */
    --ds-fw-medium: 500;          /* rótulos e ênfase leve */
    --ds-font: 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ds-fs-display: clamp(2rem, 1.3rem + 3vw, 3.25rem);
    --ds-fs-h2: clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem);
    --ds-fs-h3: 1.25rem;
    --ds-fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
    --ds-fs-body: 1rem;
    --ds-fs-small: 0.875rem;

    /* Espaçamento (escala de 4px) */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 24px;
    --ds-space-6: 32px;
    --ds-space-7: 48px;
    --ds-space-8: 64px;
    --ds-section-y: clamp(48px, 7vw, 88px);

    /* Forma */
    --ds-radius-sm: 8px;
    --ds-radius: 12px;
    --ds-radius-lg: 16px;
    --ds-radius-pill: 50px;
    --ds-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06);
    --ds-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
    --ds-shadow-primary: 0 8px 20px rgba(var(--ds-primary-rgb), 0.3);
    --ds-gradient-primary: linear-gradient(135deg, var(--ds-primary-500) 0%, var(--ds-primary-600) 100%);
    --ds-gradient-hero: linear-gradient(135deg, var(--ds-surface-soft) 0%, #ffffff 100%);
    --ds-transition: 0.2s ease;
}

/* 2. BASE ================================================================ */
b,
strong {
    font-weight: var(--ds-fw-strong);
}

/* Seções de fundo escuro: os destaques usam o tom claro da paleta */
.modern-footer,
.footer-main,
.footer-bottom,
.ds-on-dark {
    --ds-primary: var(--ds-primary-300);
    --ds-primary-fg: #b4c2d8;
}

/* Ícones SVG inline trazem a cor do logo como atributo (fallback); o token prevalece */
[stroke="#6a7e9d"] {
    stroke: var(--ds-primary);
}

[fill="#6a7e9d"] {
    fill: var(--ds-primary);
}

body {
    color: var(--ds-text-body);
    background-color: var(--ds-surface);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 3px solid rgba(var(--ds-primary-rgb), 0.5);
    outline-offset: 2px;
}

/* O conteúdo do topo da página nunca espera o JS do AOS para aparecer (LCP) */
header [data-aos],
[class*="hero"] [data-aos],
[class*="hero"][data-aos],
.header-subpage [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

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

    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* 3. COMPONENTES ========================================================= */

/* Hero de página interna */
.ds-hero {
    position: relative;
    padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 6vw, 72px);
    background:
        radial-gradient(60% 90% at 88% 10%, rgba(var(--ds-primary-rgb), 0.2) 0%, transparent 70%),
        linear-gradient(160deg, var(--ds-primary-050) 0%, var(--ds-surface) 65%);
    border-bottom: 1px solid var(--ds-border);
    overflow: hidden;
}

/* Anéis concêntricos: ecoam as faixas do globo do logo */
.ds-hero::before {
    content: '';
    position: absolute;
    top: -260px;
    right: -220px;
    width: 900px;
    height: 900px;
    background: repeating-radial-gradient(circle, transparent 0 46px, rgba(var(--ds-primary-rgb), 0.11) 46px 48px);
    -webkit-mask-image: radial-gradient(circle, black 20%, transparent 68%);
    mask-image: radial-gradient(circle, black 20%, transparent 68%);
    pointer-events: none;
}

.ds-hero > .container {
    position: relative;
}

.ds-hero--center {
    text-align: center;
}

.ds-hero--center .ds-lead {
    margin-left: auto;
    margin-right: auto;
}

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: 6px 16px;
    margin-bottom: var(--ds-space-4);
    font-size: var(--ds-fs-small);
    font-weight: var(--ds-fw-medium);
    color: var(--ds-primary-700);
    background: var(--ds-primary-050);
    border: 1px solid var(--ds-primary-100);
    border-radius: var(--ds-radius-pill);
}

.ds-title {
    margin: 0 0 var(--ds-space-4);
    font-size: var(--ds-fs-display);
    font-weight: var(--ds-fw-heading);
    line-height: 1.12;
    letter-spacing: -0.5px;
    color: var(--ds-text);
}

.ds-lead {
    max-width: 680px;
    margin-bottom: 0;
    font-size: var(--ds-fs-lead);
    line-height: 1.6;
    color: var(--ds-text-body);
}

/* Palavra de destaque dentro do título */
.ds-accent {
    color: var(--ds-primary-600);
    background: linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-primary-700) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hero em duas colunas: texto + visual */
.ds-hero-grid {
    display: grid;
    gap: var(--ds-space-7);
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

.ds-hero-visual {
    display: none;
    position: relative;
}

@media (min-width: 992px) {
    .ds-hero-grid {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    }

    .ds-hero-visual {
        display: block;
    }
}

/* Moldura de navegador para capturas de tela */
.ds-browser {
    overflow: hidden;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: 0 30px 60px rgba(16, 24, 40, 0.18);
    transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
    transition: transform 0.4s ease;
}

.ds-hero-visual:hover .ds-browser {
    transform: none;
}

.ds-browser-bar {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    background: var(--ds-primary-050);
    border-bottom: 1px solid var(--ds-border);
}

.ds-browser-bar span {
    width: 10px;
    height: 10px;
    background: var(--ds-primary-300);
    border-radius: 50%;
}

.ds-browser img {
    display: block;
    width: 100%;
    height: auto;
}

/* Cartão flutuante sobre o visual do hero */
.ds-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    padding: var(--ds-space-3) var(--ds-space-4);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow);
}

.ds-float .ds-icon {
    width: 36px;
    height: 36px;
    margin: 0;
    font-size: 15px;
}

.ds-float small {
    display: block;
    font-size: 0.6875rem;
    font-weight: var(--ds-fw-strong);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-text-muted);
}

.ds-float strong {
    display: block;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--ds-text);
}

.ds-float--top {
    top: -18px;
    right: -12px;
}

.ds-float--bottom {
    bottom: -22px;
    left: -24px;
}

/* Breadcrumb */
.ds-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
    padding: 0;
    margin: 0 0 var(--ds-space-4);
    list-style: none;
    font-size: var(--ds-fs-small);
    color: var(--ds-text-muted);
}

.ds-breadcrumb li + li::before {
    content: '/';
    margin-right: var(--ds-space-2);
    color: var(--ds-border);
}

.ds-breadcrumb a {
    color: var(--ds-text-muted);
}

.ds-breadcrumb a:hover {
    color: var(--ds-primary-700);
}

/* Seções */
.ds-section {
    padding: var(--ds-section-y) 0;
    background: var(--ds-surface);
}

.ds-section--soft {
    background: var(--ds-surface-soft);
}

.ds-section--tight {
    padding: var(--ds-space-7) 0;
}

.ds-section-header {
    max-width: 720px;
    margin: 0 auto var(--ds-space-7);
    text-align: center;
}

.ds-section-header--left {
    margin-left: 0;
    text-align: left;
}

.ds-h2 {
    margin: 0 0 var(--ds-space-3);
    font-size: var(--ds-fs-h2);
    font-weight: var(--ds-fw-heading);
    line-height: 1.2;
    color: var(--ds-text);
}

.ds-h3 {
    margin: 0 0 var(--ds-space-2);
    font-size: var(--ds-fs-h3);
    font-weight: var(--ds-fw-strong);
    color: var(--ds-text);
}

.ds-subtitle {
    margin: 0;
    font-size: var(--ds-fs-lead);
    color: var(--ds-text-muted);
}

/* Grid e cards */
.ds-grid {
    display: grid;
    gap: var(--ds-space-5);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ds-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.ds-card {
    height: 100%;
    padding: var(--ds-space-6);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-sm);
    transition: transform var(--ds-transition), box-shadow var(--ds-transition), border-color var(--ds-transition);
}

a.ds-card,
.ds-card--hover:hover {
    text-decoration: none;
}

a.ds-card:hover,
.ds-card--hover:hover {
    transform: translateY(-4px);
    border-color: var(--ds-primary-100);
    box-shadow: var(--ds-shadow);
}

.ds-card p:last-child {
    margin-bottom: 0;
}

.ds-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--ds-space-4);
    font-size: 20px;
    color: var(--ds-primary-600);
    background: var(--ds-primary-050);
    border-radius: var(--ds-radius);
}

/* Números de destaque */
.ds-grid--stats {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.ds-stat {
    text-align: center;
}

.ds-stat-value {
    display: block;
    font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    font-weight: var(--ds-fw-heading);
    line-height: 1.1;
    color: var(--ds-primary-600);
}

.ds-stat-label {
    font-size: var(--ds-fs-small);
    color: var(--ds-text-muted);
}

/* Botões */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    padding: 14px 28px;
    font-family: var(--ds-font);
    font-size: var(--ds-fs-body);
    font-weight: var(--ds-fw-strong);
    line-height: 1.2;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--ds-radius-pill);
    cursor: pointer;
    transition: transform var(--ds-transition), box-shadow var(--ds-transition), background var(--ds-transition), color var(--ds-transition);
}

.ds-btn:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

.ds-btn--primary {
    color: #fff;
    background: var(--ds-gradient-primary);
    box-shadow: var(--ds-shadow-primary);
}

.ds-btn--primary:hover {
    color: #fff;
    box-shadow: 0 12px 28px rgba(var(--ds-primary-rgb), 0.4);
}

.ds-btn--outline {
    color: var(--ds-primary-700);
    background: var(--ds-surface);
    border-color: var(--ds-primary-100);
}

.ds-btn--outline:hover {
    color: var(--ds-primary-700);
    border-color: var(--ds-primary);
}

.ds-btn--light {
    color: var(--ds-primary-700);
    background: #fff;
}

.ds-btn--light:hover {
    color: var(--ds-primary-700);
}

.ds-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-3);
}

.ds-hero--center .ds-btn-group,
.ds-cta .ds-btn-group {
    justify-content: center;
}

/* Texto corrido (institucional, artigos, políticas) */
.ds-prose {
    max-width: 760px;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ds-text-body);
}

.ds-prose h2 {
    margin: var(--ds-space-7) 0 var(--ds-space-3);
    font-size: 1.6rem;
    font-weight: var(--ds-fw-heading);
}

.ds-prose h2:first-child {
    margin-top: 0;
}

.ds-prose h3 {
    margin: var(--ds-space-6) 0 var(--ds-space-2);
    font-size: var(--ds-fs-h3);
    font-weight: var(--ds-fw-strong);
}

.ds-prose a {
    color: var(--ds-primary-700);
    text-decoration: underline;
}

.ds-prose ol,
.ds-prose ul {
    padding-left: 1.25rem;
}

.ds-prose li {
    margin-bottom: var(--ds-space-2);
}

/* Linha do tempo */
.ds-timeline {
    padding: 0;
    margin: 0;
    list-style: none;
    border-left: 2px solid var(--ds-primary-100);
}

.ds-timeline li {
    position: relative;
    padding: 0 0 var(--ds-space-6) var(--ds-space-5);
}

.ds-timeline li:last-child {
    padding-bottom: 0;
}

.ds-timeline li::before {
    content: '';
    position: absolute;
    top: 6px;
    left: -7px;
    width: 12px;
    height: 12px;
    background: var(--ds-primary);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--ds-primary-100);
}

.ds-timeline strong {
    display: block;
    color: var(--ds-text);
}

/* Formulário */
.ds-field label {
    display: block;
    margin-bottom: var(--ds-space-1);
    font-size: var(--ds-fs-small);
    font-weight: var(--ds-fw-medium);
    color: var(--ds-text);
}

.ds-input {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--ds-font);
    font-size: var(--ds-fs-body);
    color: var(--ds-text);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}

.ds-input:focus {
    border-color: var(--ds-primary);
    outline: 3px solid rgba(var(--ds-primary-rgb), 0.25);
}

/* Tabela */
.ds-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
}

.ds-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.ds-table th,
.ds-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--ds-border);
}

.ds-table th {
    font-size: var(--ds-fs-small);
    font-weight: var(--ds-fw-strong);
    color: var(--ds-text);
    background: var(--ds-surface-soft);
}

.ds-table tr:last-child td {
    border-bottom: 0;
}

/* Tabela comparativa: primeira coluna com o critério, demais centralizadas; .is-highlight marca a coluna da HostMF */
.ds-table--compare th:not(:first-child),
.ds-table--compare td:not(:first-child) {
    text-align: center;
}

.ds-table--compare td:first-child {
    font-weight: var(--ds-fw-strong);
    color: var(--ds-text);
}

.ds-table .is-highlight {
    background: var(--ds-primary-050);
}

.ds-table th.is-highlight {
    color: var(--ds-primary-700);
    background: var(--ds-primary-100);
}

/* Sim / não / parcial em tabelas e listas */
.ds-yes { color: var(--ds-success); }
.ds-no { color: var(--ds-danger); }
.ds-partial { color: var(--ds-warning); }

/* Bloco de código / comando */
.ds-code {
    display: block;
    padding: var(--ds-space-4);
    overflow-x: auto;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #e1e7f0;
    background: var(--ds-navy);
    border-radius: var(--ds-radius);
}

/* Tabela comparativa não espreme no celular: rola dentro do .ds-table-wrap */
.ds-table--compare {
    min-width: 620px;
}

/* Card em destaque dentro de um grupo (ex.: opção recomendada) */
.ds-card--featured {
    border: 2px solid var(--ds-primary);
    box-shadow: var(--ds-shadow);
}

/* Nota de rodapé pequena (asteriscos, valores aproximados) */
.ds-note {
    margin: var(--ds-space-4) 0 0;
    font-size: var(--ds-fs-small);
    color: var(--ds-text-muted);
}

/* Âncoras de seção não ficam escondidas atrás do menu fixo */
section[id] {
    scroll-margin-top: 90px;
}

.ds-split-media img {
    display: block;
    width: 100%;
    height: auto;
}

.ds-faq summary h3,
.ds-faq summary h4 {
    font-weight: var(--ds-fw-strong);
}

/* Faixa rolante: uma linha de cartões passando da direita para a esquerda, com as bordas esmaecidas.
   O conteúdo é impresso duas vezes (.ds-marquee-group), por isso -50% fecha o ciclo sem emenda. */
.ds-marquee {
    overflow: hidden;
    padding: var(--ds-space-3) 0 var(--ds-space-6);
    margin-bottom: var(--ds-space-6);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%);
}

.ds-marquee-track {
    display: flex;
    width: max-content;
    animation: dsMarquee calc(var(--ds-marquee-items, 6) * 9s) linear infinite;
}

.ds-marquee:hover .ds-marquee-track,
.ds-marquee:focus-within .ds-marquee-track {
    animation-play-state: paused;
}

.ds-marquee-group {
    display: flex;
    gap: var(--ds-space-5);
    padding-right: var(--ds-space-5);
}

.ds-marquee .review-card {
    flex: 0 0 auto;
    width: min(360px, 78vw);
    margin: 0;
}

@keyframes dsMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* quem pede menos movimento rola a faixa com o dedo ou o mouse */
@media (prefers-reduced-motion: reduce) {
    .ds-marquee {
        overflow-x: auto;
    }

    .ds-marquee-track {
        animation: none;
    }

    .ds-marquee-group[aria-hidden="true"] {
        display: none;
    }
}

/* Faixa de chamada */
.ds-cta {
    padding: var(--ds-space-8) 0;
    text-align: center;
    color: #fff;
    background: var(--ds-gradient-primary);
}

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

.ds-cta p {
    max-width: 620px;
    margin: 0 auto var(--ds-space-5);
    font-size: var(--ds-fs-lead);
    opacity: 0.95;
}

/* Lista de vantagens em linha (hero) */
.ds-checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2) var(--ds-space-5);
    padding: 0;
    margin: var(--ds-space-5) 0 0;
    list-style: none;
    font-weight: var(--ds-fw-medium);
    color: var(--ds-text);
}

.ds-checks li {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
}

.ds-checks i {
    color: var(--ds-success);
}

.ds-hero-price {
    display: inline-flex;
    align-items: baseline;
    gap: var(--ds-space-2);
    padding: var(--ds-space-2) var(--ds-space-4);
    margin: var(--ds-space-5) 0 0;
    font-size: var(--ds-fs-small);
    color: var(--ds-text-muted);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-pill);
    box-shadow: var(--ds-shadow-sm);
}

.ds-hero-price strong {
    font-size: 1.4rem;
    font-weight: var(--ds-fw-heading);
    color: var(--ds-primary-600);
}

/* Seletor de ciclo de cobrança */
.ds-cycle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ds-space-1);
    width: fit-content;
    max-width: 100%;
    padding: var(--ds-space-1);
    margin: 0 auto var(--ds-space-6);
    background: var(--ds-surface-muted);
    border-radius: var(--ds-radius-pill);
}

.ds-cycle button {
    padding: 10px 18px;
    font-family: var(--ds-font);
    font-size: var(--ds-fs-small);
    font-weight: var(--ds-fw-strong);
    color: var(--ds-text-body);
    background: transparent;
    border: 0;
    border-radius: var(--ds-radius-pill);
    cursor: pointer;
    transition: background var(--ds-transition), color var(--ds-transition);
}

.ds-cycle button[aria-pressed="true"] {
    color: #fff;
    background: var(--ds-gradient-primary);
    box-shadow: var(--ds-shadow-primary);
}

/* Cartão de plano */
.ds-plans {
    display: grid;
    gap: var(--ds-space-5);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: stretch;
}

.ds-plan {
    display: flex;
    flex-direction: column;
    padding: var(--ds-space-6) var(--ds-space-5);
    text-align: center;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-sm);
    transition: transform var(--ds-transition), box-shadow var(--ds-transition), border-color var(--ds-transition);
}

.ds-plan:hover {
    transform: translateY(-4px);
    border-color: var(--ds-primary);
    box-shadow: var(--ds-shadow);
}

.ds-plan-name {
    margin: 0 0 var(--ds-space-2);
    font-size: 1.35rem;
    font-weight: var(--ds-fw-heading);
    color: var(--ds-text);
}

.ds-plan-desc {
    min-height: 3em;
    margin: 0;
    font-size: var(--ds-fs-small);
    color: var(--ds-text-muted);
}

.ds-plan-price {
    padding: var(--ds-space-5) 0;
    margin: var(--ds-space-5) 0;
    border-top: 1px solid var(--ds-border);
    border-bottom: 1px solid var(--ds-border);
}

.ds-plan-label,
.ds-plan-total {
    display: block;
    font-size: var(--ds-fs-small);
    color: var(--ds-text-muted);
}

.ds-plan-value {
    display: block;
    margin: var(--ds-space-1) 0;
    font-size: 1.5rem;
    font-weight: var(--ds-fw-heading);
    line-height: 1;
    color: var(--ds-primary-600);
}

.ds-plan-value span {
    font-size: 3rem;
}

.ds-plan-value small {
    font-size: var(--ds-fs-small);
    font-weight: var(--ds-fw-medium);
    color: var(--ds-text-muted);
}

.ds-plan-features {
    flex: 1;
    padding: 0;
    margin: 0 0 var(--ds-space-5);
    list-style: none;
    text-align: left;
    color: var(--ds-text-body);
}

.ds-plan-features li {
    position: relative;
    padding: 6px 0 6px 28px;
}

.ds-plan-features li::before {
    content: '';
    position: absolute;
    top: 11px;
    left: 2px;
    width: 14px;
    height: 8px;
    border-left: 2px solid var(--ds-success);
    border-bottom: 2px solid var(--ds-success);
    transform: rotate(-45deg);
}

.ds-plan-features small {
    display: block;
    color: var(--ds-text-muted);
}

.ds-plan .ds-btn {
    width: 100%;
}

/* Abas de âncora usam o mesmo visual do seletor de ciclo */
.ds-cycle a {
    padding: 10px 18px;
    font-size: var(--ds-fs-small);
    font-weight: var(--ds-fw-strong);
    color: var(--ds-text-body);
    text-decoration: none;
    border-radius: var(--ds-radius-pill);
    transition: background var(--ds-transition), color var(--ds-transition);
}

.ds-cycle a:hover {
    color: #fff;
    background: var(--ds-gradient-primary);
}

/* Cartão de produto (planos de VPS) */
.ds-products-group {
    scroll-margin-top: 100px;
}

.ds-products-group + .ds-products-group {
    margin-top: var(--ds-space-8);
}

.ds-products-title {
    margin-bottom: var(--ds-space-5);
}

.ds-products-title .ds-h3 {
    font-size: 1.5rem;
    font-weight: var(--ds-fw-heading);
}

.ds-products-title p {
    margin: 0;
    color: var(--ds-text-muted);
}

.ds-products {
    display: grid;
    gap: var(--ds-space-5);
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
}

.ds-product {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--ds-space-5);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-sm);
    transition: transform var(--ds-transition), box-shadow var(--ds-transition), border-color var(--ds-transition);
}

.ds-product:hover {
    transform: translateY(-4px);
    border-color: var(--ds-primary);
    box-shadow: var(--ds-shadow);
}

.ds-product--featured {
    border: 2px solid var(--ds-primary);
    box-shadow: var(--ds-shadow);
}

.ds-product--soldout {
    opacity: 0.65;
}

.ds-product-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2);
    min-height: 26px;
    margin-bottom: var(--ds-space-3);
}

.ds-product-country {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    font-size: var(--ds-fs-small);
    font-weight: var(--ds-fw-medium);
    color: var(--ds-text-muted);
}

.ds-product-country img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.ds-product-badge {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 3px 10px;
    font-size: 0.6875rem;
    font-weight: var(--ds-fw-strong);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-primary-700);
    background: var(--ds-primary-100);
    border-radius: var(--ds-radius-pill);
}

.ds-product--featured .ds-product-badge {
    color: #fff;
    background: var(--ds-primary-500);
}

.ds-product-name {
    margin: 0;
    font-size: 1.75rem;
    font-weight: var(--ds-fw-heading);
    line-height: 1.1;
}

.ds-product-name a {
    color: var(--ds-text);
    text-decoration: none;
}

.ds-product-sub {
    margin: var(--ds-space-1) 0 0;
    font-size: var(--ds-fs-small);
    color: var(--ds-text-muted);
}

.ds-product-specs {
    flex: 1;
    padding: var(--ds-space-4) 0 0;
    margin: var(--ds-space-4) 0 0;
    list-style: none;
    font-size: 0.95rem;
    color: var(--ds-text-body);
    border-top: 1px solid var(--ds-border);
}

.ds-product-specs li {
    padding: 4px 0;
}

.ds-product-specs strong {
    color: var(--ds-text);
}

.ds-product-price {
    margin: var(--ds-space-4) 0;
}

.ds-product-price small {
    display: block;
    font-size: 0.75rem;
    color: var(--ds-text-muted);
}

.ds-product-price strong {
    font-size: 1.9rem;
    font-weight: var(--ds-fw-heading);
    line-height: 1.1;
    color: var(--ds-text);
}

.ds-product-price span {
    font-size: var(--ds-fs-small);
    color: var(--ds-text-muted);
}

.ds-product .ds-btn {
    width: 100%;
}

.ds-btn--disabled,
.ds-btn--disabled:hover {
    color: var(--ds-text-muted);
    background: var(--ds-surface-muted);
    cursor: not-allowed;
    transform: none;
}

.ds-product-more {
    margin-top: var(--ds-space-3);
    font-size: var(--ds-fs-small);
    font-weight: var(--ds-fw-medium);
    text-align: center;
    color: var(--ds-primary-700);
}

.ds-product-more:hover {
    color: var(--ds-primary-700);
}

/* Planos em lista: uma linha por plano, todas com as mesmas colunas e a mesma altura
   (a partir de 992px; abaixo disso vira cartão empilhado) */
.ds-products--list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ds-space-3);
}

.ds-product-specs span {
    color: var(--ds-text-muted);
}

@media (min-width: 992px) {
    .ds-products--list .ds-product {
        display: grid;
        grid-template-columns: 225px minmax(0, 1fr) 165px 190px;
        grid-template-areas:
            "head specs price cta"
            "name specs price cta"
            "sub  specs price more";
        grid-template-rows: 22px 34px 22px;
        column-gap: var(--ds-space-5);
        align-items: center;
        padding: var(--ds-space-4) var(--ds-space-5);
    }

    .ds-products--list .ds-product:hover {
        transform: none;
    }

    .ds-products--list .ds-product-head {
        grid-area: head;
        min-height: 0;
        margin: 0;
    }

    .ds-products--list .ds-product-name {
        grid-area: name;
        font-size: 1.4rem;
        white-space: nowrap;
    }

    .ds-products--list .ds-product-sub {
        grid-area: sub;
        margin: 0;
        white-space: nowrap;
    }

    /* três colunas fixas: armazenamento, velocidade, tráfego */
    .ds-products--list .ds-product-specs {
        grid-area: specs;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--ds-space-3);
        align-self: stretch;
        align-items: center;
        padding: 0 0 0 var(--ds-space-5);
        margin: 0;
        border-top: 0;
        border-left: 1px solid var(--ds-border);
    }

    .ds-products--list .ds-product-specs li {
        padding: 0;
        line-height: 1.3;
    }

    .ds-products--list .ds-product-specs strong,
    .ds-products--list .ds-product-specs span {
        display: block;
        white-space: nowrap;
    }

    .ds-products--list .ds-product-specs span {
        font-size: var(--ds-fs-small);
    }

    .ds-products--list .ds-product-price {
        grid-area: price;
        margin: 0;
        text-align: right;
        white-space: nowrap;
    }

    .ds-products--list .ds-product-price strong {
        font-size: 1.6rem;
    }

    .ds-products--list .ds-product > .ds-btn {
        grid-area: cta;
        align-self: end;
        padding: 12px 16px;
    }

    .ds-products--list .ds-product-more {
        grid-area: more;
        margin: 0;
    }
}

/* Telas médias: a linha continua igual, só mais compacta */
@media (min-width: 992px) and (max-width: 1199px) {
    .ds-products--list .ds-product {
        grid-template-columns: 190px minmax(0, 1fr) 150px 170px;
        column-gap: var(--ds-space-4);
        padding: var(--ds-space-4);
    }

    .ds-products--list .ds-product-specs {
        padding-left: var(--ds-space-4);
        font-size: 0.875rem;
    }

    .ds-products--list .ds-product-price strong {
        font-size: 1.35rem;
    }

    .ds-products--list .ds-product-badge {
        font-size: 0.625rem;
        padding: 2px 7px;
    }
}

/* Imagem solta no hero (sem moldura de navegador) */
.ds-hero-image {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 24px 40px rgba(16, 24, 40, 0.18));
}

/* Link "saiba mais" na base de um card clicável */
.ds-card-link {
    display: inline-block;
    margin-top: var(--ds-space-4);
    font-size: var(--ds-fs-small);
    font-weight: var(--ds-fw-strong);
    color: var(--ds-primary-700);
}

.ds-card-link i {
    margin-left: var(--ds-space-1);
    transition: transform var(--ds-transition);
}

a.ds-card:hover .ds-card-link i {
    transform: translateX(4px);
}

a.ds-card {
    color: var(--ds-text-body);
}

/* Vantagem com ícone ilustrado */
.ds-feature {
    text-align: center;
}

.ds-feature img {
    width: 64px;
    height: 64px;
    margin-bottom: var(--ds-space-4);
    object-fit: contain;
    border-radius: 50%;
}

/* Bloco de texto + mídia lado a lado */
.ds-split {
    display: grid;
    gap: var(--ds-space-7);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
}

.ds-split--reverse {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.ds-split--reverse > :first-child {
    order: 2;
}

.ds-split-media {
    overflow: hidden;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow);
}

@media (max-width: 991px) {
    .ds-split {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ds-space-6);
    }

    .ds-split--reverse > :first-child {
        order: 0;
    }
}

/* Lista de itens com título e descrição */
.ds-list {
    padding: 0;
    margin: var(--ds-space-5) 0 0;
    list-style: none;
}

.ds-list li {
    padding-left: var(--ds-space-4);
    margin-bottom: var(--ds-space-5);
    border-left: 3px solid var(--ds-primary-100);
}

.ds-list li:last-child {
    margin-bottom: 0;
}

.ds-list p {
    margin: 0;
    font-size: 0.95rem;
}

/* Especificações (termo / valor) */
.ds-spec {
    margin: 0;
}

.ds-spec div {
    display: flex;
    justify-content: space-between;
    gap: var(--ds-space-4);
    padding: 10px 0;
    border-bottom: 1px solid var(--ds-border);
}

.ds-spec div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ds-spec dt {
    font-weight: 400;
    color: var(--ds-text-body);
}

.ds-spec dd {
    margin: 0;
    font-weight: var(--ds-fw-strong);
    text-align: right;
    color: var(--ds-text);
}

/* Aviso em destaque */
.ds-callout {
    display: flex;
    align-items: center;
    gap: var(--ds-space-5);
    padding: var(--ds-space-6);
    background: var(--ds-primary-050);
    border: 1px solid var(--ds-primary-100);
    border-radius: var(--ds-radius-lg);
}

.ds-callout .ds-icon {
    flex-shrink: 0;
    margin: 0;
    background: #fff;
}

.ds-callout p {
    margin: 0;
}

@media (max-width: 575px) {
    .ds-callout {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Perguntas frequentes (<details class="ds-card"> dentro de .ds-faq) */
.ds-faq {
    display: grid;
    gap: var(--ds-space-3);
    max-width: 860px;
    margin: 0 auto;
}

.ds-faq > .ds-card {
    height: auto;
    padding: var(--ds-space-5);
}

details.ds-card {
    height: auto;
}

details.ds-card > summary {
    cursor: pointer;
}

.ds-faq summary {
    cursor: pointer;
    font-weight: var(--ds-fw-strong);
    color: var(--ds-text);
}

.ds-faq summary > * {
    display: inline;
    margin: 0;
    font-size: inherit;
}

.ds-faq details[open] summary {
    margin-bottom: var(--ds-space-3);
}

.ds-faq p:last-child {
    margin-bottom: 0;
}

/* Ícone ilustrado que não deve ser recortado em círculo */
.ds-feature--square img {
    border-radius: 0;
}

/* Botão ao lado do texto de um .ds-callout */
.ds-callout > :not(.ds-icon):not(.ds-btn) {
    flex: 1;
}

.ds-callout > .ds-btn {
    flex-shrink: 0;
}

.ds-btn-group--center {
    justify-content: center;
}

/* Bootstrap: a cor "primary" do framework segue a paleta */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.badge-primary,
.bg-primary {
    color: #fff;
    background-color: var(--ds-primary-500) !important;
    border-color: var(--ds-primary-500);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ds-primary-600) !important;
    border-color: var(--ds-primary-600);
}

.btn-outline-primary {
    color: var(--ds-primary-700);
    border-color: var(--ds-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: var(--ds-primary-500);
    border-color: var(--ds-primary-500);
}

.btn-link,
.text-primary {
    color: var(--ds-primary-700) !important;
}

.btn:focus,
.form-control:focus {
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--ds-primary-rgb), 0.25);
}

/* Menu principal: painel suspenso na largura inteira da tela ---------------- */
.modern-navbar .modern-nav-item.has-megamenu {
    position: static; /* o painel se ancora na barra inteira, não no item */
}

.ds-megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1040;
    padding: var(--ds-space-6) 0;
    background: var(--ds-surface);
    border-top: 1px solid var(--ds-border);
    border-bottom: 3px solid var(--ds-primary);
    box-shadow: 0 24px 40px rgba(16, 24, 40, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    /* fecha com um pequeno atraso para tolerar o movimento diagonal do mouse */
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.has-megamenu:hover > .ds-megamenu,
.has-megamenu:focus-within > .ds-megamenu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

/* Os itens da barra nunca quebram em duas linhas; em telas médias o respiro diminui */
.modern-nav .modern-nav-link {
    white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .modern-nav .modern-nav-link {
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 0.9rem;
    }

    .modern-brand .logo {
        width: 160px;
    }
}

/* O Bootstrap transforma todo .container dentro da .navbar em flex; aqui ele volta a ser bloco */
.ds-megamenu > .container {
    display: block;
}

.ds-megamenu-grid {
    display: grid;
    gap: var(--ds-space-5) var(--ds-space-6);
    grid-template-columns: repeat(var(--ds-megamenu-cols, 4), minmax(0, 1fr));
}

.ds-megamenu-title {
    padding: 0 var(--ds-space-3);
    margin: 0 0 var(--ds-space-2);
    font-size: 0.75rem;
    font-weight: var(--ds-fw-strong);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-text-muted);
}

.ds-megamenu-list {
    display: grid;
    gap: 2px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Menu de uma seção só: os itens ficam lado a lado */
.ds-megamenu-grid--row {
    grid-template-columns: minmax(0, 1fr);
}

.ds-megamenu-grid--row .ds-megamenu-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-3);
}

.ds-megamenu-grid--row .ds-megamenu-list > li {
    flex: 0 1 340px;
}

.ds-megamenu-grid--row .ds-megamenu-link {
    padding: var(--ds-space-4);
    border: 1px solid var(--ds-border);
}

.ds-megamenu-link {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    padding: var(--ds-space-2) var(--ds-space-3);
    color: var(--ds-text);
    text-decoration: none;
    border-radius: var(--ds-radius);
    transition: background var(--ds-transition), border-color var(--ds-transition);
}

.ds-megamenu-link:hover,
.ds-megamenu-link:focus-visible {
    color: var(--ds-text);
    text-decoration: none;
    background: var(--ds-primary-050);
    border-color: var(--ds-primary-100);
}

.ds-megamenu-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 17px;
    color: var(--ds-primary-600);
    background: var(--ds-primary-050);
    border-radius: 10px;
    transition: background var(--ds-transition), color var(--ds-transition);
}

.ds-megamenu-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.ds-megamenu-link:hover .ds-megamenu-icon:not(.ds-megamenu-icon--image) {
    color: #fff;
    background: var(--ds-primary-500);
}

.ds-megamenu-link:hover .ds-megamenu-icon--image {
    background: var(--ds-surface);
}

.ds-megamenu-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ds-megamenu-name {
    font-size: 0.95rem;
    font-weight: var(--ds-fw-strong);
    line-height: 1.3;
    color: var(--ds-text);
}

.ds-megamenu-desc {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--ds-text-muted);
}

.ds-megamenu-badge {
    display: inline-block;
    padding: 2px 8px;
    margin-left: var(--ds-space-1);
    font-size: 0.6875rem;
    font-weight: var(--ds-fw-strong);
    vertical-align: middle;
    color: var(--ds-primary-700);
    background: var(--ds-primary-100);
    border-radius: var(--ds-radius-pill);
}

/* Linha compacta: seções secundárias com muitos links */
.ds-megamenu-link--compact {
    gap: var(--ds-space-2);
    padding: 6px var(--ds-space-3);
}

.ds-megamenu-link--compact .ds-megamenu-icon {
    width: 28px;
    height: 28px;
    font-size: 13px;
    border-radius: 8px;
}

.ds-megamenu-link--compact .ds-megamenu-icon img {
    width: 16px;
    height: 16px;
}

.ds-megamenu-link--compact .ds-megamenu-name {
    font-size: 0.875rem;
    font-weight: var(--ds-fw-medium);
}

/* Menu no celular */
.ds-mobilemenu {
    padding: var(--ds-space-2) 0 var(--ds-space-4);
    background: transparent;
    border: 0;
}

.ds-mobilemenu .ds-megamenu-title {
    padding: 0;
    margin-top: var(--ds-space-4);
}

.ds-mobilemenu .ds-megamenu-link {
    padding: var(--ds-space-2) 0;
}

.ds-mobilemenu .ds-megamenu-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.ds-mobilemenu .ds-megamenu-icon img {
    width: 20px;
    height: 20px;
}

/* Home (index.php) ------------------------------------------------------- */
.hm-hero {
    position: relative;
    padding: clamp(48px, 6vw, 88px) 0 clamp(150px, 16vw, 210px);
    color: #fff;
    background:
        radial-gradient(55% 70% at 78% 35%, rgba(var(--ds-primary-rgb), 0.42) 0%, transparent 65%),
        radial-gradient(40% 50% at 8% 100%, rgba(var(--ds-primary-rgb), 0.22) 0%, transparent 70%),
        linear-gradient(165deg, #0b1018 0%, var(--ds-navy) 55%, #26324a 100%);
    overflow: hidden;
}

/* malha de pontos discreta */
.hm-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 85%);
    mask-image: linear-gradient(180deg, black 0%, transparent 85%);
    pointer-events: none;
}

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

.hm-hero-grid {
    display: grid;
    gap: var(--ds-space-7);
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

@media (min-width: 992px) {
    .hm-hero-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}

.hm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: 7px 16px;
    margin-bottom: var(--ds-space-5);
    font-size: var(--ds-fs-small);
    font-weight: var(--ds-fw-medium);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--ds-radius-pill);
}

.hm-pulse {
    position: relative;
    width: 8px;
    height: 8px;
    background: var(--ds-success);
    border-radius: 50%;
}

.hm-pulse::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 2px solid var(--ds-success);
    border-radius: 50%;
    animation: hmPulse 2s ease-out infinite;
}

@keyframes hmPulse {
    from { opacity: 0.9; transform: scale(0.5); }
    to { opacity: 0; transform: scale(1.5); }
}

.hm-title {
    margin: 0 0 var(--ds-space-5);
    font-size: clamp(2.3rem, 1.2rem + 3.4vw, 3.75rem);
    font-weight: var(--ds-fw-heading);
    line-height: 1.04;
    letter-spacing: -1.5px;
    color: #fff;
}

.hm-title span {
    display: block;
    background: linear-gradient(90deg, #c9d5e8 0%, var(--ds-primary-300) 45%, #6f86ab 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hm-lead {
    max-width: 520px;
    margin: 0 0 var(--ds-space-6);
    font-size: var(--ds-fs-lead);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.74);
}

.hm-btn-light {
    color: var(--ds-navy);
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.hm-btn-light:hover {
    color: var(--ds-navy);
    background: var(--ds-primary-050);
}

.ds-btn--ghost {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.24);
}

.ds-btn--ghost:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}

.hm-proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-4) var(--ds-space-7);
    padding: var(--ds-space-5) 0 0;
    margin: var(--ds-space-6) 0 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hm-proof strong {
    display: block;
    font-size: 1.75rem;
    font-weight: var(--ds-fw-heading);
    line-height: 1.1;
    color: #fff;
}

.hm-proof span {
    font-size: var(--ds-fs-small);
    color: rgba(255, 255, 255, 0.6);
}

/* Globo */
.hm-globe {
    position: relative;
    display: none;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    aspect-ratio: 1;
}

@media (min-width: 992px) {
    .hm-globe {
        display: block;
    }
}

.hm-globe-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.45));
}

.hm-pin,
.hm-stat {
    position: absolute;
}

/* marcador do datacenter no globo */
.hm-pin {
    width: 14px;
    height: 14px;
}

.hm-pin i {
    position: relative;
    z-index: 2;
    display: block;
    width: 14px;
    height: 14px;
    background: var(--ds-success);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.hm-pin i::after {
    content: '';
    position: absolute;
    inset: -9px;
    border: 2px solid #fff;
    border-radius: 50%;
    animation: hmPulse 2.4s ease-out infinite;
}

/* linha que liga o marcador à etiqueta */
.hm-pin::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 7px;
    z-index: 1;
    width: 44px;
    height: 2px;
    background: #fff;
    transform-origin: 0 50%;
}

.hm-chip {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    width: max-content;
    padding: 7px 14px 7px 8px;
    font-size: var(--ds-fs-small);
    font-weight: var(--ds-fw-strong);
    color: var(--ds-navy);
    white-space: nowrap;
    background: #fff;
    border-radius: var(--ds-radius-pill);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.hm-chip img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

/* Canadá: etiqueta acima, à esquerda */
.hm-pin--ca { top: 33%; left: 34%; }
.hm-pin--ca::before { transform: rotate(-135deg); }
.hm-pin--ca .hm-chip { right: 30px; bottom: 30px; }

/* Europa: etiqueta acima, à direita */
.hm-pin--eu { top: 34%; left: 62%; }
.hm-pin--eu::before { transform: rotate(-45deg); }
.hm-pin--eu .hm-chip { left: 30px; bottom: 30px; }

/* Brasil: etiqueta abaixo, à esquerda */
.hm-pin--br { top: 60%; left: 44%; }
.hm-pin--br::before { transform: rotate(135deg); }
.hm-pin--br .hm-chip { right: 30px; top: 30px; }

.hm-pin--eu i::after { animation-delay: 0.8s; }
.hm-pin--br i::after { animation-delay: 1.6s; }

.hm-stat {
    padding: var(--ds-space-3) var(--ds-space-4);
    color: #fff;
    background: rgba(20, 27, 40, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--ds-radius);
    backdrop-filter: blur(10px);
}

.hm-stat small {
    display: block;
    font-size: 0.6875rem;
    font-weight: var(--ds-fw-strong);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-primary-300);
}

.hm-stat strong {
    font-size: 1.25rem;
    font-weight: var(--ds-fw-heading);
}

.hm-stat--ddos { right: 0; bottom: 20%; }

/* Serviços sobrepostos ao hero */
.hm-services {
    position: relative;
    z-index: 2;
    padding-bottom: var(--ds-section-y);
    margin-top: clamp(-150px, -11vw, -100px);
}

.hm-services-grid {
    display: grid;
    gap: var(--ds-space-5);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.hm-service {
    display: flex;
    flex-direction: column;
    padding: var(--ds-space-6);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: 22px;
    box-shadow: 0 24px 50px rgba(16, 24, 40, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hm-service:hover {
    transform: translateY(-6px);
    box-shadow: 0 34px 60px rgba(16, 24, 40, 0.18);
}

.hm-service--dark {
    color: rgba(255, 255, 255, 0.8);
    background: linear-gradient(160deg, var(--ds-primary-500) 0%, var(--ds-slate-700) 100%);
    border-color: transparent;
}

.hm-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--ds-space-4);
    font-size: 21px;
    color: #fff;
    background: var(--ds-gradient-primary);
    border-radius: 14px;
    box-shadow: var(--ds-shadow-primary);
}

.hm-service--dark .hm-service-icon {
    color: var(--ds-primary-700);
    background: #fff;
    box-shadow: none;
}

.hm-service h3 {
    margin: 0 0 var(--ds-space-2);
    font-size: 1.45rem;
    font-weight: var(--ds-fw-heading);
    color: var(--ds-text);
}

.hm-service--dark h3 {
    color: #fff;
}

.hm-service p {
    margin: 0 0 var(--ds-space-4);
}

.hm-service ul {
    flex: 1;
    padding: 0;
    margin: 0 0 var(--ds-space-5);
    list-style: none;
}

.hm-service li {
    position: relative;
    padding: 5px 0 5px 26px;
    font-weight: var(--ds-fw-medium);
    color: var(--ds-text);
}

.hm-service--dark li {
    color: #fff;
}

.hm-service li::before {
    content: '';
    position: absolute;
    top: 11px;
    left: 2px;
    width: 13px;
    height: 7px;
    border-left: 2px solid var(--ds-success);
    border-bottom: 2px solid var(--ds-success);
    transform: rotate(-45deg);
}

.hm-service--dark li::before {
    border-color: #fff;
}

.hm-service-foot .ds-btn {
    flex-shrink: 0;
    padding: 12px 20px;
    white-space: nowrap;
}

.hm-service-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding-top: var(--ds-space-4);
    border-top: 1px solid var(--ds-border);
}

.hm-service--dark .hm-service-foot {
    border-color: rgba(255, 255, 255, 0.2);
}

.hm-price {
    font-size: 1.6rem;
    font-weight: var(--ds-fw-heading);
    line-height: 1.05;
    color: var(--ds-text);
    white-space: nowrap;
}

.hm-service--dark .hm-price {
    color: #fff;
}

.hm-price small,
.hm-location-foot small {
    display: block;
    font-size: 0.6875rem;
    font-weight: var(--ds-fw-strong);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    opacity: 0.75;
}

.hm-price em,
.hm-location-foot em {
    font-size: var(--ds-fs-small);
    font-style: normal;
    font-weight: 500;
    opacity: 0.75;
}

/* Busca de domínio */
.hm-domain {
    display: grid;
    gap: var(--ds-space-3);
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding: var(--ds-space-4);
    margin-top: var(--ds-space-6);
    background: var(--ds-surface-soft);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
}

.hm-domain label {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    margin: 0;
    font-weight: var(--ds-fw-heading);
    color: var(--ds-text);
    white-space: nowrap;
}

.hm-domain label i {
    color: var(--ds-primary);
}

.hm-domain input[type="text"] {
    width: 100%;
    padding: 13px 18px;
    font-family: var(--ds-font);
    font-size: var(--ds-fs-body);
    color: var(--ds-text);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-pill);
}

.hm-domain input[type="text"]:focus {
    border-color: var(--ds-primary);
    outline: 3px solid rgba(var(--ds-primary-rgb), 0.25);
}

@media (min-width: 768px) {
    .hm-domain {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: var(--ds-space-3) var(--ds-space-3) var(--ds-space-3) var(--ds-space-5);
        border-radius: var(--ds-radius-pill);
    }
}

/* Cabeçalho de seção com sobretítulo (kicker) */
.ds-heading {
    max-width: 760px;
    margin: 0 0 var(--ds-space-7);
}

.ds-kicker {
    display: inline-block;
    margin-bottom: var(--ds-space-3);
    font-size: 0.8125rem;
    font-weight: var(--ds-fw-heading);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ds-primary-fg);
}

.ds-heading h2 {
    margin: 0;
    font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
    font-weight: var(--ds-fw-heading);
    line-height: 1.1;
    letter-spacing: -0.8px;
    color: var(--ds-text);
}

.ds-heading h2 span {
    color: var(--ds-primary);
}

.ds-heading--light h2 {
    color: #fff;
}

.ds-heading--light h2 span {
    color: var(--ds-primary-300);
}

/* Grade de diferenciais */
.hm-why {
    padding-top: 0;
}

.hm-bento {
    display: grid;
    gap: var(--ds-space-5);
    grid-template-columns: minmax(0, 1fr);
}

.hm-tile {
    position: relative;
    padding: var(--ds-space-6);
    background: var(--ds-surface-soft);
    border: 1px solid var(--ds-border);
    border-radius: 22px;
    overflow: hidden;
}

.hm-tile h3 {
    margin: 0 0 var(--ds-space-2);
    font-size: 1.2rem;
    font-weight: var(--ds-fw-heading);
    color: var(--ds-text);
}

.hm-tile p {
    margin: 0;
}

.hm-big {
    display: block;
    margin: var(--ds-space-2) 0;
    font-size: clamp(3rem, 2rem + 3.5vw, 4.75rem);
    font-weight: var(--ds-fw-heading);
    line-height: 1;
    letter-spacing: -2px;
    color: var(--ds-primary-600);
}

.hm-big small {
    margin-left: 6px;
    font-size: 0.32em;
    font-weight: var(--ds-fw-strong);
    letter-spacing: 0;
}

.hm-tile--shield {
    color: rgba(255, 255, 255, 0.78);
    background: linear-gradient(160deg, var(--ds-navy) 0%, #2b3852 100%);
    border-color: transparent;
}

.hm-tile--shield h3,
.hm-tile--shield .hm-big {
    color: #fff;
}

.hm-tile--shield .hm-big {
    font-size: clamp(4rem, 2.5rem + 5vw, 6.5rem);
}

.hm-tile-tag {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: var(--ds-fw-strong);
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--ds-radius-pill);
}

.hm-tile-bg {
    position: absolute;
    right: -30px;
    bottom: -50px;
    font-size: 240px;
    color: rgba(255, 255, 255, 0.05);
}

.hm-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 54px;
    margin-top: var(--ds-space-3);
}

.hm-bars i {
    flex: 1;
    height: 100%;
    background: var(--ds-primary);
    border-radius: 3px;
    opacity: 0.85;
}

.hm-bars i:nth-child(3n) { height: 92%; }
.hm-bars i:nth-child(5n) { height: 96%; }
.hm-bars i:nth-child(11) { height: 58%; background: var(--ds-primary-300); }

.hm-tile--fast {
    background: var(--ds-primary-050);
    border-color: var(--ds-primary-100);
}

.hm-tile--panel {
    display: grid;
    gap: var(--ds-space-5);
    padding-bottom: 0;
}

.hm-tile--panel img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--ds-border);
    border-bottom: 0;
    border-radius: var(--ds-radius) var(--ds-radius) 0 0;
    box-shadow: 0 -10px 40px rgba(16, 24, 40, 0.1);
}

.hm-channels,
.hm-pay {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
    margin-top: var(--ds-space-4);
}

.hm-channels a,
.hm-pay span {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: 8px 14px;
    font-size: var(--ds-fs-small);
    font-weight: var(--ds-fw-strong);
    color: var(--ds-text);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-pill);
}

.hm-channels a:hover {
    color: var(--ds-text);
    text-decoration: none;
    border-color: var(--ds-primary);
}

.hm-channels i {
    color: var(--ds-primary);
}

@media (min-width: 992px) {
    .hm-bento {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .hm-tile--shield { grid-column: span 2; grid-row: span 2; }
    .hm-tile--uptime { grid-column: span 2; }
    .hm-tile--fast { grid-column: span 2; }
    .hm-tile--panel { grid-column: span 4; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: end; }
    .hm-tile--panel > div { padding-bottom: var(--ds-space-6); }
    .hm-tile--support { grid-column: span 3; }
    .hm-tile--free { grid-column: span 3; }
}

/* Datacenters */
.hm-locations {
    position: relative;
    padding: var(--ds-section-y) 0;
    color: rgba(255, 255, 255, 0.75);
    background:
        radial-gradient(50% 80% at 100% 0%, rgba(var(--ds-primary-rgb), 0.35) 0%, transparent 65%),
        linear-gradient(165deg, #0b1018 0%, var(--ds-navy) 60%, #26324a 100%);
    overflow: hidden;
}

.hm-locations-grid {
    display: grid;
    gap: var(--ds-space-5);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.hm-location {
    display: flex;
    flex-direction: column;
    padding: var(--ds-space-6);
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.hm-location:hover {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--ds-primary-300);
    transform: translateY(-6px);
}

.hm-location img {
    width: 44px;
    height: 44px;
    margin-bottom: var(--ds-space-4);
    border-radius: 10px;
}

.hm-location h3 {
    margin: 0 0 var(--ds-space-2);
    font-size: 1.5rem;
    font-weight: var(--ds-fw-heading);
    color: #fff;
}

.hm-location p {
    flex: 1;
    margin: 0 0 var(--ds-space-5);
}

.hm-location-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-top: var(--ds-space-4);
    font-size: 1.5rem;
    font-weight: var(--ds-fw-heading);
    line-height: 1.05;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hm-location-foot i {
    font-size: 1rem;
    color: var(--ds-primary-300);
    transition: transform 0.25s ease;
}

.hm-location:hover .hm-location-foot i {
    transform: translateX(6px);
}

.hm-uses {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-2);
    margin-top: var(--ds-space-7);
}

.hm-uses > span {
    margin-right: var(--ds-space-2);
    font-weight: var(--ds-fw-strong);
    color: #fff;
}

.hm-uses a {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: 8px 16px;
    font-size: var(--ds-fs-small);
    font-weight: var(--ds-fw-strong);
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--ds-radius-pill);
    transition: background var(--ds-transition), border-color var(--ds-transition);
}

.hm-uses a:hover {
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.16);
    border-color: var(--ds-primary-300);
}

.hm-uses i {
    color: var(--ds-primary-300);
}

/* Passos numerados (01, 02, 03) */
.ds-steps {
    display: grid;
    gap: var(--ds-space-6);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: ds-step-count;
}

.ds-steps li {
    position: relative;
    padding-top: var(--ds-space-5);
    border-top: 2px solid var(--ds-border);
    counter-increment: ds-step-count;
}

.ds-steps li::before {
    content: '0' counter(ds-step-count);
    float: right;
    margin: 0 0 var(--ds-space-2) var(--ds-space-3);
    font-size: 3.25rem;
    font-weight: var(--ds-fw-heading);
    line-height: 1;
    letter-spacing: -2px;
    color: var(--ds-primary-100);
}

.ds-steps li::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 64px;
    height: 2px;
    background: var(--ds-primary);
}

.ds-steps h3 {
    margin: 0 0 var(--ds-space-2);
    font-size: 1.3rem;
    font-weight: var(--ds-fw-heading);
    color: var(--ds-text);
}

.ds-steps p {
    margin: 0;
}

/* Seção com fundo na cor da marca, em tom claro: separa blocos sem pesar */
.ds-section--tint {
    position: relative;
    background: linear-gradient(135deg, var(--ds-primary-100) 0%, var(--ds-primary-050) 100%);
    border-top: 1px solid var(--ds-primary-100);
    border-bottom: 1px solid var(--ds-primary-100);
    overflow: hidden;
}

/* anéis do logo, bem discretos */
.ds-section--tint::before {
    content: '';
    position: absolute;
    top: -340px;
    right: -260px;
    width: 900px;
    height: 900px;
    background: repeating-radial-gradient(circle, transparent 0 46px, rgba(var(--ds-primary-rgb), 0.12) 46px 48px);
    -webkit-mask-image: radial-gradient(circle, black 20%, transparent 68%);
    mask-image: radial-gradient(circle, black 20%, transparent 68%);
    pointer-events: none;
}

.ds-section--tint > .container {
    position: relative;
}

.ds-section--tint .ds-steps li {
    border-top-color: rgba(var(--ds-primary-rgb), 0.28);
}

.ds-section--tint .ds-steps li::before {
    color: rgba(var(--ds-primary-rgb), 0.38);
}

.ds-steps-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--ds-space-3);
    font-size: 18px;
    color: #fff;
    background: var(--ds-gradient-primary);
    border-radius: var(--ds-radius);
}

/* Diagrama em camadas (servidor físico -> hypervisor -> VPS) */
.ds-stack {
    position: relative;
    padding: var(--ds-space-6);
    padding-top: var(--ds-space-7);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: 22px;
    box-shadow: 0 30px 60px rgba(16, 24, 40, 0.12);
}

.ds-stack-panel {
    position: absolute;
    top: -18px;
    right: var(--ds-space-5);
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: 8px 16px;
    font-size: var(--ds-fs-small);
    font-weight: var(--ds-fw-strong);
    color: var(--ds-text);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-pill);
    box-shadow: var(--ds-shadow);
}

.ds-stack-panel i,
.ds-stack-layer i {
    color: var(--ds-primary);
}

.ds-stack-vps {
    display: grid;
    gap: var(--ds-space-3);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr);
    align-items: end;
}

.ds-stack-box {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
    padding: var(--ds-space-3);
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
    background: var(--ds-surface-soft);
    border: 1px dashed var(--ds-primary-300);
    border-radius: var(--ds-radius);
}

.ds-stack-box strong {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-text-muted);
}

.ds-stack-os {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.ds-stack-bar {
    display: block;
    height: 6px;
    background: var(--ds-primary-100);
    border-radius: 3px;
}

.ds-stack-bar i {
    display: block;
    width: 55%;
    height: 100%;
    background: var(--ds-primary-300);
    border-radius: 3px;
}

.ds-stack-bar + .ds-stack-bar i {
    width: 80%;
}

.ds-stack-box--you {
    padding: var(--ds-space-4);
    color: rgba(255, 255, 255, 0.85);
    background: linear-gradient(160deg, var(--ds-primary-500) 0%, var(--ds-slate-700) 100%);
    border: 0;
    box-shadow: 0 18px 36px rgba(var(--ds-primary-rgb), 0.45);
}

.ds-stack-box--you strong {
    font-size: 0.8125rem;
    color: #fff;
}

.ds-stack-box--you .ds-stack-os {
    font-weight: var(--ds-fw-strong);
    color: #fff;
}

.ds-stack-res {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ds-stack-res > span {
    padding: 4px 10px;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.14);
    border-radius: var(--ds-radius-pill);
}

.ds-stack-res b {
    color: #fff;
}

/* conectores entre os VPS e o hypervisor */
.ds-stack-links {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr);
    gap: var(--ds-space-3);
    height: 26px;
}

.ds-stack-links span {
    width: 2px;
    margin: 0 auto;
    background: repeating-linear-gradient(180deg, var(--ds-primary-300) 0 4px, transparent 4px 8px);
}

.ds-stack-links span:nth-child(2) {
    background: var(--ds-primary-500);
}

.ds-stack-layer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding: var(--ds-space-3) var(--ds-space-4);
    font-weight: var(--ds-fw-strong);
    color: var(--ds-text);
    border-radius: var(--ds-radius);
}

.ds-stack-layer > div:first-child,
.ds-stack-layer--hyper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ds-space-2);
}

.ds-stack-layer--hyper {
    background: var(--ds-primary-100);
    border: 1px solid var(--ds-primary-300);
}

.ds-stack-layer--metal {
    margin-top: var(--ds-space-2);
    color: #fff;
    background: var(--ds-navy);
}

.ds-stack-layer--metal i {
    color: var(--ds-primary-300);
}

.ds-stack-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ds-stack-chips span {
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: var(--ds-fw-medium);
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--ds-radius-pill);
}

@media (max-width: 575px) {
    .ds-stack {
        padding: var(--ds-space-6) var(--ds-space-4) var(--ds-space-4);
    }

    .ds-stack-vps,
    .ds-stack-links {
        grid-template-columns: minmax(0, 1fr);
    }

    .ds-stack-vps .ds-stack-box:not(.ds-stack-box--you),
    .ds-stack-links span:not(:nth-child(2)) {
        display: none;
    }
}

/* Anatomia: diagrama no centro e uma legenda por camada em volta dele */
.ds-anatomy {
    display: grid;
    gap: var(--ds-space-6);
    grid-template-columns: minmax(0, 1fr);
}

.ds-anatomy .ds-stack {
    width: 100%;
    max-width: 480px;
    margin: var(--ds-space-4) auto 0;
}

.ds-anatomy-item {
    position: relative;
    outline: 0;
}

.ds-anatomy-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--ds-space-3);
    font-size: 16px;
    border-radius: var(--ds-radius);
    transition: transform var(--ds-transition), box-shadow var(--ds-transition);
}

.ds-anatomy-item h3 {
    margin: 0 0 var(--ds-space-2);
    font-size: 1.15rem;
    font-weight: var(--ds-fw-heading);
    color: var(--ds-text);
}

.ds-anatomy-item p {
    margin: 0;
    font-size: 0.95rem;
}

.ds-anatomy-item.is-active .ds-anatomy-icon {
    transform: scale(1.12);
    box-shadow: var(--ds-shadow-primary);
}

/* o ícone da legenda repete a cor da camada no desenho */
.ds-anatomy-item--panel .ds-anatomy-icon {
    color: var(--ds-primary);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    box-shadow: var(--ds-shadow-sm);
}

.ds-anatomy-item--vps .ds-anatomy-icon {
    color: #fff;
    background: linear-gradient(160deg, var(--ds-primary-500) 0%, var(--ds-slate-700) 100%);
}

.ds-anatomy-item--hyper .ds-anatomy-icon {
    color: var(--ds-primary-700);
    background: var(--ds-primary-100);
    border: 1px solid var(--ds-primary-300);
}

.ds-anatomy-item--metal .ds-anatomy-icon {
    color: var(--ds-primary-300);
    background: var(--ds-navy);
}

/* destaque da camada quando a legenda recebe o mouse ou o foco */
.ds-stack [data-part] {
    transition: opacity var(--ds-transition);
}

.ds-stack[data-active] [data-part] {
    opacity: 0.3;
}

.ds-stack[data-active="panel"] [data-part="panel"],
.ds-stack[data-active="os"] [data-part="os"],
.ds-stack[data-active="res"] [data-part="res"],
.ds-stack[data-active="hyper"] [data-part="hyper"],
.ds-stack[data-active="metal"] [data-part="metal"] {
    opacity: 1;
}

.ds-anatomy-col {
    display: grid;
    gap: var(--ds-space-6);
}

@media (max-width: 991px) {
    .ds-anatomy .ds-stack {
        order: -1;
    }
}

@media (min-width: 992px) {
    .ds-anatomy {
        grid-template-columns: minmax(0, 1fr) minmax(400px, 480px) minmax(0, 1fr);
        gap: 64px;
        align-items: center;
    }

    .ds-anatomy .ds-stack {
        margin: 0;
    }

    .ds-anatomy-col {
        gap: var(--ds-space-7);
    }

    /* esquerda: as duas legendas do "Seu VPS"; direita: painel, hypervisor e servidor físico */
    .ds-anatomy-col--left {
        text-align: right;
    }

    /* linha pontilhada da legenda até o desenho */
    .ds-anatomy-item::before {
        content: '';
        position: absolute;
        top: 20px;
        width: 44px;
        border-top: 2px dotted var(--ds-primary-300);
    }

    .ds-anatomy-item::after {
        content: '';
        position: absolute;
        top: 16px;
        width: 10px;
        height: 10px;
        background: var(--ds-primary);
        border-radius: 50%;
        box-shadow: 0 0 0 3px var(--ds-primary-100);
    }

    .ds-anatomy-col--left .ds-anatomy-item::before { right: -52px; }
    .ds-anatomy-col--left .ds-anatomy-item::after { right: -62px; }
    .ds-anatomy-col--right .ds-anatomy-item::before { left: -52px; }
    .ds-anatomy-col--right .ds-anatomy-item::after { left: -62px; }
}

/* Chamada final */
.hm-final {
    position: relative;
    padding: var(--ds-section-y) 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    background:
        radial-gradient(60% 120% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 60%),
        linear-gradient(135deg, var(--ds-primary-500) 0%, var(--ds-slate-700) 100%);
    overflow: hidden;
}

.hm-final::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1200px;
    height: 1200px;
    background: repeating-radial-gradient(circle, transparent 0 58px, rgba(255, 255, 255, 0.07) 58px 60px);
    -webkit-mask-image: radial-gradient(circle, black 10%, transparent 60%);
    mask-image: radial-gradient(circle, black 10%, transparent 60%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.hm-final > .container {
    position: relative;
}

.hm-final h2 {
    margin: 0 0 var(--ds-space-3);
    font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
    font-weight: var(--ds-fw-heading);
    letter-spacing: -0.8px;
    color: #fff;
}

.hm-final p {
    max-width: 560px;
    margin: 0 auto var(--ds-space-6);
    font-size: var(--ds-fs-lead);
}

@media (prefers-reduced-motion: reduce) {
    .hm-pulse::after,
    .hm-pin i::after {
        animation: none;
    }
}

/* 4. CAMADA LEGADA ======================================================= */

/* Cabeçalho antigo das páginas internas -> mesmo visual do .ds-hero */
.header-carousel.header-subpage {
    height: auto;
    padding: clamp(40px, 6vw, 72px) 0;
    color: var(--ds-text-body);
    background: var(--ds-gradient-hero);
    border-bottom: 1px solid var(--ds-border);
}

.header-carousel.header-subpage .col-md-12 {
    padding: 0 15px;
}

.header-carousel.header-subpage h1 {
    margin: 0 0 var(--ds-space-3);
    font-size: var(--ds-fs-display);
    font-weight: var(--ds-fw-heading);
    line-height: 1.12;
    letter-spacing: -0.5px;
    color: var(--ds-text);
}

.header-carousel.header-subpage p {
    max-width: 760px;
    margin: 0;
    font-size: var(--ds-fs-lead);
    line-height: 1.6;
    color: var(--ds-text-body);
}

/* Seções antigas */
.hp-5 {
    padding: var(--ds-section-y) 0;
}

.gray-container,
.bg-gray {
    background-color: var(--ds-surface-soft);
}

.hp-5 h2,
.hp-5 > .container > .row > [class*="col-"] > h4:first-child {
    font-weight: var(--ds-fw-heading);
    color: var(--ds-text);
}

.featured-icons h3 {
    font-size: var(--ds-fs-h3);
    font-weight: var(--ds-fw-strong);
    color: var(--ds-text);
}

/* Tabelas de preço antigas */
.table-pricing .card,
.table-pricing .card:hover {
    padding-bottom: 0;
    color: var(--ds-text-body);
    background-color: var(--ds-surface);
}

.table-pricing .card {
    margin-bottom: var(--ds-space-5);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-sm);
    transition: transform var(--ds-transition), box-shadow var(--ds-transition), border-color var(--ds-transition);
}

.table-pricing .card:hover {
    transform: translateY(-4px);
    border-color: var(--ds-primary);
    box-shadow: var(--ds-shadow);
}

.table-pricing .card .card-body {
    padding: var(--ds-space-6) var(--ds-space-5);
}

.table-pricing .card .card-title {
    font-size: 1.35rem;
    font-weight: var(--ds-fw-heading);
    color: var(--ds-text);
}

.table-pricing p.price,
.table-pricing .card:hover p.price {
    color: var(--ds-primary-600);
}

.table-pricing .card select.form-control,
.table-pricing .card:hover select {
    height: auto;
    padding: 10px 12px;
    color: var(--ds-text);
    background-color: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}

.table-pricing a.card-link {
    margin-top: var(--ds-space-5);
    padding: 14px;
    font-size: var(--ds-fs-body);
    letter-spacing: 0.3px;
    color: #fff;
    background: var(--ds-gradient-primary);
    border-radius: var(--ds-radius-pill);
    box-shadow: var(--ds-shadow-primary);
    transition: transform var(--ds-transition), box-shadow var(--ds-transition);
}

.table-pricing a.card-link:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

/* Cards e tabelas genéricos do Bootstrap dentro de páginas antigas */
.hp-5 .card {
    border-color: var(--ds-border);
    border-radius: var(--ds-radius-lg);
}

.hp-5 .table thead th {
    font-size: var(--ds-fs-small);
    color: var(--ds-text);
    background: var(--ds-surface-soft);
    border-top: 0;
    border-bottom: 1px solid var(--ds-border);
}

.hp-5 .form-control {
    border-radius: var(--ds-radius-sm);
}

.btn {
    border-radius: var(--ds-radius-sm);
}

/* Aviso de cookies com os tokens da marca */
.cookieConsentContainer {
    border-radius: var(--ds-radius);
    background: var(--ds-navy) !important;
    box-shadow: var(--ds-shadow);
}

.cookieConsentContainer .cookieButton a {
    border-radius: var(--ds-radius-pill);
}