/* ==============================================================
   page-hero.css — hero reutilizável para páginas internas HOSTLP
   Aplicado em todas as páginas internas (exceto a Home).
   Estrutura HTML esperada:

   <section class="page-hero" style="--hero-bg:url('images/background/back-pagina.jpg');">
       <div class="page-hero__bg" aria-hidden="true"></div>
       <div class="page-hero__overlay" aria-hidden="true"></div>
       <div class="page-hero__grid" aria-hidden="true"></div>
       <div class="page-hero__glow page-hero__glow--1" aria-hidden="true"></div>
       <div class="page-hero__glow page-hero__glow--2" aria-hidden="true"></div>

       <div class="container page-hero__container">
           <div class="row align-items-center g-5">
               <div class="col-lg-7 page-hero__content">
                   <h1 class="page-hero__title">Título da página</h1>
                   <p class="page-hero__subtitle">Subtítulo / descrição da página.</p>
                   <div class="page-hero__actions">
                       <a href="#" class="page-hero__btn page-hero__btn--primary">Saiba mais</a>
                       <a href="#" class="page-hero__btn page-hero__btn--ghost">Falar com especialista</a>
                   </div>
               </div>
               <div class="col-lg-5 page-hero__visual">
                   <img src="images/hero/hero-pagina.png" alt="">
               </div>
           </div>
       </div>
   </section>

   Como personalizar a imagem de fundo (back-*.jpg):
   - Inline:  style="--hero-bg:url('images/background/back-X.jpg');"
   - CSS:     .page-hero[data-page="X"] { --hero-bg:url('...'); }

   Como personalizar a ilustração lateral (hero-*.png):
   - Trocar o src do <img> dentro de .page-hero__visual
   ============================================================== */

/* Header transparente sobre o hero dark — legibilidade do menu */
body.has-page-hero header.transparent:not(.smaller) #mainmenu > li > a.menu-item,
body.has-page-hero header.transparent:not(.smaller) #mainmenu > li > a.menu-item:visited {
    color: #ffffff;
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 600;
}

body.has-page-hero header.transparent:not(.smaller) #mainmenu > li > a.menu-item:hover,
body.has-page-hero header.transparent:not(.smaller) #mainmenu > li.active > a.menu-item {
    color: var(--color-accent-light, #7DD3EF);
}

body.has-page-hero header.transparent:not(.smaller) #mainmenu li.has-child:after,
body.has-page-hero header.transparent:not(.smaller) #mainmenu > li > a.menu-item:after {
    color: #ffffff;
    opacity: 0.85;
}

body.has-page-hero header.transparent:not(.smaller) #topbar {
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.has-page-hero header.transparent:not(.smaller) #topbar .topbar-widget a,
body.has-page-hero header.transparent:not(.smaller) #topbar span {
    color: rgba(255, 255, 255, 0.85);
}

body.has-page-hero header.transparent:not(.smaller) #topbar .topbar-widget a:hover {
    color: #ffffff;
}

body.has-page-hero header.transparent:not(.smaller) .menu_side_area .btn-main {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

body.has-page-hero header.transparent:not(.smaller) .menu_side_area .btn-main:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.45);
}

body.has-page-hero header.transparent:not(.smaller) #menu-btn,
body.has-page-hero header.transparent:not(.smaller) #menu-btn:before,
body.has-page-hero header.transparent:not(.smaller) #menu-btn:after {
    background-color: #ffffff;
}

/* ==============================================================
   MOBILE — drawer premium do menu (acima de 1200px = desktop)
   ============================================================== */
@media (max-width: 991.98px) {
    /* Esconde o topbar inteiro em mobile/tablet — ícones sem texto
       não agregam e o espaço pode ser usado pelo conteúdo real */
    #topbar {
        display: none !important;
    }
}

@media (max-width: 1199.98px) {
    /* --- Override das cores forçadas para branco sobre hero dark --- */
    body.has-page-hero header.transparent:not(.smaller) #mainmenu > li > a.menu-item,
    body.has-page-hero header.transparent:not(.smaller) #mainmenu > li > a.menu-item:visited,
    body.has-page-hero header.transparent:not(.smaller) #mainmenu li a.menu-item,
    body:has(#subheader) header.transparent:not(.smaller) #mainmenu > li > a.menu-item,
    body:has(#subheader) header.transparent:not(.smaller) #mainmenu > li > a.menu-item:visited {
        color: var(--color-primary, #0A3A68);
    }

    /* --- Container do menu mobile --- */
    #mainmenu {
        padding: 8px 0;
        background: #ffffff;
    }

    /* --- Itens de 1º nível --- */
    #mainmenu > li {
        position: relative;
        border-bottom: none !important;
        margin: 0 !important;
    }
    /* Separador sutil com gradient (substitui a linha cinza do template) */
    #mainmenu > li + li::before {
        content: "";
        position: absolute;
        top: 0;
        left: 20px;
        right: 20px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(10, 58, 104, 0.08) 20%, rgba(10, 58, 104, 0.08) 80%, transparent);
        pointer-events: none;
    }

    #mainmenu > li > a.menu-item {
        display: flex !important;
        align-items: center;
        padding: 16px 22px !important;
        font-size: 0.98rem !important;
        font-weight: 600 !important;
        letter-spacing: -0.005em;
        color: var(--color-primary, #0A3A68) !important;
        text-transform: none !important;
        line-height: 1.3;
        position: relative;
        transition: background 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
    }

    /* Barra acento vertical à esquerda (aparece no hover/active) */
    #mainmenu > li > a.menu-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 22%;
        bottom: 22%;
        width: 3px;
        background: linear-gradient(180deg, #2DB6DE 0%, #1F6FAA 100%);
        border-radius: 0 3px 3px 0;
        opacity: 0;
        transform: scaleY(0.3);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    #mainmenu > li > a.menu-item:hover,
    #mainmenu > li.active > a.menu-item,
    #mainmenu > li > a.menu-item:focus,
    body.has-page-hero header.transparent:not(.smaller) #mainmenu > li > a.menu-item:hover,
    body.has-page-hero header.transparent:not(.smaller) #mainmenu > li.active > a.menu-item {
        background: linear-gradient(90deg, rgba(45, 182, 222, 0.06), transparent 70%);
        color: var(--color-secondary, #1F6FAA) !important;
        padding-left: 28px !important;
    }

    #mainmenu > li > a.menu-item:hover::before,
    #mainmenu > li.active > a.menu-item::before {
        opacity: 1;
        transform: scaleY(1);
    }

    /* --- Chevron estilizado (▾ das áreas com submenu) --- */
    body.has-page-hero header.transparent:not(.smaller) #mainmenu li.has-child:after,
    body.has-page-hero header.transparent:not(.smaller) #mainmenu > li > a.menu-item:after,
    body:has(#subheader) header.transparent:not(.smaller) #mainmenu li.has-child:after,
    #mainmenu li.has-child:after,
    #mainmenu > li > a.menu-item:after {
        color: var(--color-secondary, #1F6FAA) !important;
        opacity: 0.6;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    #mainmenu > li:hover > a.menu-item:after,
    #mainmenu > li.active > a.menu-item:after {
        opacity: 1;
        transform: rotate(180deg);
    }

    /* --- Submenu mega (Soluções / Serviços) --- */
    #mainmenu li ul.mega {
        background: linear-gradient(180deg, rgba(45, 182, 222, 0.04) 0%, rgba(31, 111, 170, 0.02) 100%);
        border-top: 1px solid rgba(10, 58, 104, 0.08);
        border-bottom: 1px solid rgba(10, 58, 104, 0.08);
        padding: 12px 0 !important;
    }

    #mainmenu li ul .sb-menu h4,
    #mainmenu li ul .sb-menu p {
        display: none; /* textos promocionais do mega-menu só fazem sentido no desktop */
    }

    #mainmenu li ul .box-icon {
        display: flex !important;
        align-items: center;
        gap: 14px;
        padding: 12px 24px !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        color: var(--color-primary, #0A3A68) !important;
        border-radius: 0;
        line-height: 1.35;
        font-size: 0.8rem;
        position: relative;
        transition: background 0.2s ease, color 0.2s ease;
    }

    #mainmenu li ul .box-icon:hover {
        background: rgba(45, 182, 222, 0.08) !important;
        color: var(--color-secondary, #1F6FAA) !important;
    }

    /* Reset do img absoluto do template para fluir dentro do flex */
    #mainmenu li ul .box-icon img {
        position: static !important;
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px;
        object-fit: contain;
        filter: none !important;
    }

    /* Reset do padding do d-inner (template reservava 56px pra img absoluta) */
    #mainmenu li ul .box-icon .d-inner {
        padding: 0 !important;
        flex: 1;
        min-width: 0;
    }

    #mainmenu li ul .box-icon h4 {
        display: block !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        color: inherit !important;
        margin: 0 0 2px !important;
        letter-spacing: -0.005em;
        line-height: 1.25;
    }

    /* Texto de descrição (text-node após o h4) fica menor e discreto */
    #mainmenu li ul .box-icon .d-inner {
        color: #6b7a82;
        font-size: 0.78rem;
    }

    /* CTA do primeiro bloco do mega ("Ver todas") */
    #mainmenu li ul .btn-main {
        display: inline-block !important;
        margin: 8px 24px 12px !important;
        padding: 10px 20px !important;
        font-size: 0.82rem !important;
        border-radius: 10px !important;
    }

    /* --- Botão "Fale Conosco" no header mobile --- */
    .menu_side_area .btn-main {
        padding: 10px 18px !important;
        font-size: 0.82rem !important;
        border-radius: 10px !important;
    }
}

/* ==============================================================
   HERO
   ============================================================== */
.page-hero {
    position: relative;
    isolation: isolate;
    padding: 160px 0 110px;
    color: #fff;
    background: var(--gradient-hero,
        radial-gradient(1200px 600px at 85% -10%, rgba(45, 182, 222, 0.35), transparent 60%),
        radial-gradient(900px 500px at 10% 110%, rgba(31, 111, 170, 0.35), transparent 60%),
        linear-gradient(160deg, #0B1F2A 0%, #0A3A68 55%, #1F6FAA 100%));
    overflow: hidden;
}

/* Imagem de fundo personalizável via --hero-bg */
.page-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--hero-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.35;
    mix-blend-mode: luminosity;
}

/* Sobreposição em degradê — escurece e dá profundidade */
.page-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(5, 10, 23, 0.88) 0%, rgba(5, 10, 23, 0.55) 60%, rgba(5, 10, 23, 0.25) 100%),
        linear-gradient(180deg, rgba(11, 31, 42, 0.4) 0%, rgba(11, 31, 42, 0) 40%, rgba(11, 31, 42, 0.6) 100%);
}

.page-hero__grid {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    pointer-events: none;
}

.page-hero__glow {
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.page-hero__glow--1 {
    top: -100px;
    right: -100px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle,
        rgba(45, 182, 222, 0.38) 0%,
        rgba(45, 182, 222, 0.18) 35%,
        transparent 70%);
}

.page-hero__glow--2 {
    bottom: -120px;
    right: 18%;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle,
        rgba(125, 211, 239, 0.22) 0%,
        rgba(31, 111, 170, 0.22) 40%,
        transparent 72%);
}

/* Luz suave no topo-esquerdo (acima do título) */
.page-hero::after {
    content: "";
    position: absolute;
    top: -80px;
    left: -120px;
    width: 620px;
    height: 500px;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(45, 182, 222, 0.18), transparent 55%),
        radial-gradient(ellipse at 50% 50%, rgba(125, 211, 239, 0.10), transparent 65%);
    filter: blur(50px);
    z-index: 2;
    pointer-events: none;
    opacity: 0.9;
}

.page-hero__container {
    position: relative;
    z-index: 3;
}

.page-hero__content {
    max-width: 720px;
}

.page-hero__title {
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    line-height: 1.15;
    font-weight: 800;
    color: #fff;
    margin: 0 0 22px;
    letter-spacing: -0.02em;
}

.page-hero__title .accent {
    background: linear-gradient(135deg, #2DB6DE 0%, #1F6FAA 50%, #0A3A68 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.page-hero__subtitle {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.55;
    color: #dbe4f2;
    margin: 0 0 32px;
    max-width: 620px;
}

.page-hero__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
}

.page-hero__breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.page-hero__breadcrumb a:hover {
    color: var(--color-accent-light, #7DD3EF);
}

.page-hero__breadcrumb li + li::before {
    content: "›";
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.4);
}

.page-hero__breadcrumb li[aria-current="page"] {
    color: #fff;
    font-weight: 600;
}

.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.page-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.page-hero__btn--primary {
    background: linear-gradient(135deg, #0A3A68 0%, #2DB6DE 100%);
    color: #fff;
    box-shadow: 0 20px 50px rgba(45, 182, 222, 0.35);
}

.page-hero__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 25px 60px rgba(31, 111, 170, 0.5);
    color: #fff;
}

/* --------------------------------------------------------------
   Botão ghost "Falar com especialista"
   - luz discreta girando ao redor da borda (conic gradient)
   - indicador Live pulsando dentro do botão
   -------------------------------------------------------------- */
.page-hero__btn--ghost {
    position: relative;
    isolation: isolate;
    background: rgba(11, 31, 42, 0.55);
    color: #e6eaf1;
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
}

.page-hero__btn--ghost > * {
    position: relative;
    z-index: 1;
}

.page-hero__btn--ghost:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(11, 31, 42, 0.8);
    transform: translateY(-1px);
}

/* --- Coluna direita: ilustração / imagem --- */
.page-hero__visual {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 320px;
    position: relative;
}

.page-hero__visual img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45));
    animation: page-hero-float 6s ease-in-out infinite;
}

.page-hero__visual img:not([src]),
.page-hero__visual img[src=""] {
    display: none;
}

/* ==============================================================
   HERO CARD — painel premium com dados + animações peculiar ao tema
   ============================================================== */

/* Esconde cabeçalho (ícone + título) e rodapé (monitoramento + barras),
   deixando apenas o grid de atributos em colunas */
.hero-card > .hero-card__header,
.hero-card > .hero-card__footer {
    display: none !important;
}

.hero-card {
    position: relative;
    width: 100%;
    max-width: 580px;
    padding: 20px;
    background:
        radial-gradient(ellipse at top left, rgba(45, 182, 222, 0.05), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(31, 111, 170, 0.06), transparent 55%),
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.02) 45%,
            rgba(255, 255, 255, 0) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(22px) saturate(1.5) brightness(1.02);
    -webkit-backdrop-filter: blur(22px) saturate(1.5) brightness(1.02);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 -1px 0 rgba(0, 0, 0, 0.2) inset;
    overflow: hidden;
    animation: page-hero-float 6s ease-in-out infinite;
    isolation: isolate;
}

/* Linha superior brilhante (topo do card) */
.hero-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(125, 211, 239, 0.8), transparent);
    z-index: 3;
}


.hero-card > .hero-card__header,
.hero-card > .hero-card__grid,
.hero-card > .hero-card__footer {
    position: relative;
    z-index: 2;
}

/* --- Header do card: ícone animado + título + badge Live --- */
.hero-card__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-card__icon {
    position: relative;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    background: none;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.hero-card__icon img {
    width: 52px;
    height: 52px;
    filter:
        brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(145deg)
        drop-shadow(0 6px 14px rgba(45, 182, 222, 0.45))
        drop-shadow(0 0 20px rgba(125, 211, 239, 0.25));
    animation: hero-icon-pulse 2.8s ease-in-out infinite;
}

.hero-card__icon::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 182, 222, 0.18), transparent 65%);
    animation: hero-halo 3.4s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes hero-halo {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.05); }
}

/* Variante com animação Lottie no lugar do SVG estático */
.hero-card__icon--lottie {
    width: 78px;
    height: 78px;
    flex: 0 0 78px;
    border-radius: 18px;
    padding: 4px;
}

.hero-card__icon--lottie .hero-lottie {
    display: block;
    width: 100%;
    height: 100%;
    animation: none;
}

.hero-card__icon--lottie .hero-lottie svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.hero-card__title {
    flex: 1;
    min-width: 0;
}

.hero-card__title-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", "Roboto Mono", Consolas, Menlo, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #7DD3EF;
    margin-bottom: 10px;
    text-shadow: 0 0 14px rgba(125, 211, 239, 0.4);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    opacity: 0.95;
}

.hero-card__title-label::before {
    content: "";
    width: 14px;
    height: 1.5px;
    border-radius: 1px;
    background: linear-gradient(90deg, #7DD3EF, rgba(125, 211, 239, 0.2));
    box-shadow: 0 0 6px rgba(125, 211, 239, 0.6);
}

.hero-card__title-value {
    display: block;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.032em;
    line-height: 1.1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.hero-card__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: linear-gradient(135deg, rgba(45, 182, 222, 0.22), rgba(45, 182, 222, 0.08));
    border: 1px solid rgba(125, 211, 239, 0.45);
    color: #7DD3EF;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 999px;
    align-self: flex-start;
    box-shadow: 0 0 12px rgba(45, 182, 222, 0.2);
}

.hero-card__live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7DD3EF;
    box-shadow: 0 0 0 3px rgba(45, 182, 222, 0.3), 0 0 8px rgba(125, 211, 239, 0.8);
    animation: hero-pulse 1.5s infinite;
}

/* --- Manchete única no topo do card (acima do grid de stats) --- */
.hero-card__caption {
    display: block;
    margin: 4px 0 18px;
    padding: 4px 14px 16px;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1.12rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    letter-spacing: -0.005em;
    line-height: 1.4;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 2;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

/* --- Grid de 4 stats em colunas proporcionais (4 colunas) --- */
.hero-card__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.hero-card__stat {
    padding: 16px 10px 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    min-width: 0;
    text-align: center;
}

/* Ícone temático centralizado acima do valor */
.hero-card__stat-icon {
    display: block;
    font-size: 1.6rem;
    line-height: 1;
    color: #7DD3EF;
    margin: 0 auto 12px;
    text-align: center;
    text-shadow: 0 0 14px rgba(125, 211, 239, 0.35);
    transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}

.hero-card__stat:hover .hero-card__stat-icon {
    color: #ffffff;
    text-shadow: 0 0 18px rgba(125, 211, 239, 0.85);
    transform: translateY(-2px);
}

/* Trilha de luz percorrendo a borda apenas do card externo (agrupador) */
@property --card-trail-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--card-trail-angle),
        transparent 0deg,
        transparent 180deg,
        rgba(45, 182, 222, 0.15) 220deg,
        rgba(45, 182, 222, 0.45) 270deg,
        rgba(125, 211, 239, 0.85) 320deg,
        rgba(125, 211, 239, 1) 348deg,
        rgba(125, 211, 239, 0.5) 357deg,
        transparent 360deg
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
            mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: card-trail-spin 8s linear infinite;
    pointer-events: none;
    z-index: 3;
}

@keyframes card-trail-spin {
    to { --card-trail-angle: 360deg; }
}

.hero-card__stat:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
    border-color: rgba(45, 182, 222, 0.35);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.hero-card__stat:hover::after {
    opacity: 1;
}

/* Check no canto superior-direito — refinado com gradient + glow */
.hero-card__stat::before {
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    top: 9px;
    right: 11px;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, #ffffff 0%, #7DD3EF 45%, #2DB6DE 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter:
        drop-shadow(0 0 4px rgba(125, 211, 239, 0.8))
        drop-shadow(0 0 10px rgba(45, 182, 222, 0.45));
    animation: stat-check-breathe 2.6s ease-in-out infinite;
    transition: transform 0.25s ease, filter 0.25s ease;
    z-index: 2;
    transform-origin: center;
}

.hero-card__stat:hover::before {
    transform: scale(1.2) rotate(-4deg);
    filter:
        drop-shadow(0 0 6px rgba(125, 211, 239, 1))
        drop-shadow(0 0 14px rgba(45, 182, 222, 0.7))
        drop-shadow(0 0 22px rgba(45, 182, 222, 0.3));
}

@keyframes stat-check-breathe {
    0%, 100% {
        opacity: 0.85;
        filter:
            drop-shadow(0 0 4px rgba(125, 211, 239, 0.7))
            drop-shadow(0 0 10px rgba(45, 182, 222, 0.35));
    }
    50% {
        opacity: 1;
        filter:
            drop-shadow(0 0 6px rgba(125, 211, 239, 0.95))
            drop-shadow(0 0 16px rgba(45, 182, 222, 0.55));
    }
}

.hero-card__value {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.05;
    background: linear-gradient(180deg, #ffffff 0%, #7DD3EF 60%, #2DB6DE 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -0.025em;
    filter: drop-shadow(0 2px 8px rgba(45, 182, 222, 0.35));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-card__value small {
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.9;
}

.hero-card__label {
    display: block;
    margin-top: 6px;
    font-size: 0.66rem;
    color: #a5b1c4;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* --- Footer: barras animadas + monitoramento --- */
.hero-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

.hero-card__foot-label {
    font-size: 0.72rem;
    color: #a5b1c4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.01em;
}

.hero-card__foot-label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22), 0 0 8px rgba(34, 197, 94, 0.6);
    animation: hero-pulse-green 2s infinite;
}

.hero-card__bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 20px;
}

.hero-card__bars span {
    width: 3px;
    background: linear-gradient(180deg, #7DD3EF, #2DB6DE 50%, #1F6FAA);
    border-radius: 2px;
    animation: hero-bars 1.4s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(45, 182, 222, 0.4);
}

.hero-card__bars span:nth-child(1) { height: 30%; animation-delay: 0s; }
.hero-card__bars span:nth-child(2) { height: 60%; animation-delay: 0.15s; }
.hero-card__bars span:nth-child(3) { height: 80%; animation-delay: 0.3s; }
.hero-card__bars span:nth-child(4) { height: 50%; animation-delay: 0.45s; }
.hero-card__bars span:nth-child(5) { height: 70%; animation-delay: 0.6s; }

@keyframes hero-bars {
    0%, 100% { transform: scaleY(0.4); }
    50%      { transform: scaleY(1); }
}

@keyframes hero-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(45, 182, 222, 0.5), 0 0 8px rgba(125, 211, 239, 0.8); }
    50%      { box-shadow: 0 0 0 8px rgba(45, 182, 222, 0), 0 0 8px rgba(125, 211, 239, 0.8); }
}

@keyframes hero-pulse-green {
    0%, 100% { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22), 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50%      { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22), 0 0 0 6px rgba(34, 197, 94, 0); }
}


@keyframes hero-icon-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.08); opacity: 0.85; }
}

@keyframes hero-ring {
    0%   { transform: scale(0.8); opacity: 0.9; }
    100% { transform: scale(1.3); opacity: 0; }
}

@keyframes hero-stat-sweep {
    0%, 40%, 100% { transform: scaleX(0); opacity: 0; }
    50%           { transform: scaleX(1); opacity: 1; }
    60%           { transform: scaleX(1); opacity: 0; transform-origin: right center; }
}

@keyframes page-hero-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* ==============================================================
   Responsivo
   ============================================================== */
@media (max-width: 991.98px) {
    .page-hero {
        padding: 130px 0 80px;
        text-align: center;
    }
    .page-hero__content {
        max-width: 100%;
    }
    .page-hero__subtitle {
        margin-left: auto;
        margin-right: auto;
    }
    .page-hero__breadcrumb {
        justify-content: center;
    }
    .page-hero__actions {
        justify-content: center;
    }
    .page-hero__visual {
        margin-top: 40px;
    }
    .page-hero__visual img {
        max-width: 380px;
    }
}

@media (max-width: 575.98px) {
    .page-hero {
        padding: 110px 0 60px;
    }
    .page-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .page-hero__btn {
        width: 100%;
    }
}