/* ==============================================================
   home-slider.css — Hero slider moderno da Home HOSTLP
   Escopo: .hero-slider, .hero-slide (+ utilitários .img-placeholder)
   ============================================================== */

.hero-slider {
    /* Tokens derivados da paleta HOSTLP (definida em hostlp-theme.css) */
    --hs-ink-900: var(--color-dark);
    --hs-primary: var(--color-secondary);
    --hs-accent: var(--color-accent);
    --hs-accent-2: var(--color-accent-light);
    --hs-grad-brand: var(--gradient-primary);
    --hs-grad-accent: linear-gradient(135deg, #2DB6DE 0%, #1F6FAA 50%, #0A3A68 100%);

    /* 3 variações de background claro — contraste com header transparente */
    --hs-grad-bg-1: radial-gradient(1200px 600px at 85% -10%, rgba(45, 182, 222, 0.22), transparent 60%),
                     radial-gradient(900px 500px at 10% 110%, rgba(31, 111, 170, 0.14), transparent 60%),
                     linear-gradient(160deg, #F6FBFD 0%, #E6F2F8 55%, #D4E9F1 100%);
    --hs-grad-bg-2: radial-gradient(1000px 600px at 20% 0%, rgba(31, 111, 170, 0.2), transparent 60%),
                     radial-gradient(900px 500px at 90% 100%, rgba(45, 182, 222, 0.18), transparent 60%),
                     linear-gradient(200deg, #FAFCFE 0%, #ECF3F9 50%, #DDE9F3 100%);
    --hs-grad-bg-3: radial-gradient(900px 700px at 100% 0%, rgba(45, 182, 222, 0.25), transparent 55%),
                     radial-gradient(800px 500px at 0% 100%, rgba(125, 211, 239, 0.22), transparent 60%),
                     linear-gradient(150deg, #F5FCFC 0%, #E2F3F3 55%, #D2EAEA 100%);
}

/* --------------------------------------------------------------
   Container principal do slider
   -------------------------------------------------------------- */
.hero-slider {
    position: relative;
    isolation: isolate;
    min-height: 640px;
    height: 82vh;
    max-height: 780px;
    overflow: hidden;
    color: var(--color-dark);
    background: #F6FBFD;
}

.hero-slider__track {
    position: absolute;
    inset: 0;
}

/* --------------------------------------------------------------
   Slides — fade crossfade com leve zoom (ken burns)
   -------------------------------------------------------------- */
.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, visibility 1s ease;
    z-index: 1;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Backgrounds por slide */
.hero-slide--1 { background: var(--hs-grad-bg-1); }
.hero-slide--2 { background: var(--hs-grad-bg-2); }
.hero-slide--3 { background: var(--hs-grad-bg-3); }

/* --------------------------------------------------------------
   Iluminação premium do slide — distribuição de luz em 3 camadas
   -------------------------------------------------------------- */

/* 1) Holofote superior — luz difusa que desce do topo */
.hero-slide::before {
    content: "";
    position: absolute;
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    width: 1400px;
    height: 700px;
    background:
        radial-gradient(ellipse at center top,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(230, 247, 251, 0.3) 25%,
            rgba(125, 211, 239, 0.1) 50%,
            transparent 70%);
    filter: blur(20px);
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* 2) Vinheta — escurecimento sutil nas bordas em tom navy */
.hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 85% at 50% 55%,
            transparent 50%,
            rgba(10, 58, 104, 0.06) 75%,
            rgba(10, 31, 42, 0.16) 100%);
}

.hero-slide__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    border: none;
    border-radius: 0;
    opacity: 0.15;
    mix-blend-mode: luminosity;
    transform: scale(1);
    transition: transform 7s ease-out;
}

.hero-slide.is-active .hero-slide__bg {
    transform: scale(1.08);
}

.hero-slide__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.15) 55%, transparent 100%);
}

.hero-slide__grid {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image:
        linear-gradient(rgba(10, 58, 104, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 58, 104, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}

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

.hero-slide__glow--tr {
    top: -140px;
    right: -140px;
    width: 620px;
    height: 620px;
    background:
        radial-gradient(circle,
            rgba(125, 211, 239, 0.38) 0%,
            rgba(45, 182, 222, 0.22) 30%,
            rgba(31, 111, 170, 0.12) 55%,
            transparent 75%);
}

.hero-slide__glow--bl {
    bottom: -180px;
    left: 4%;
    width: 520px;
    height: 520px;
    background:
        radial-gradient(circle,
            rgba(31, 111, 170, 0.3) 0%,
            rgba(10, 58, 104, 0.18) 40%,
            rgba(10, 58, 104, 0.08) 65%,
            transparent 80%);
}

.hero-slide__container {
    position: relative;
    z-index: 3;
    width: 100%;
}

.hero-slide__content {
    max-width: 600px;
    padding-right: 24px;
}

/* --- Conteúdo interno com entrada em stagger --- */
.hero-slide__eyebrow,
.hero-slide__title,
.hero-slide__text,
.hero-slide__actions {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.hero-slide.is-active .hero-slide__title { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
.hero-slide.is-active .hero-slide__text  { transition-delay: 0.35s; opacity: 1; transform: translateY(0); }

/* --- Mídia à direita (placeholder para ilustração isométrica) --- */
.hero-slide__media {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateX(32px) scale(0.95);
    transition: opacity 1s ease, transform 1s ease;
}

/* Sombra de chão — "pedestal" que ancora a ilustração (fica fixa, não
   acompanha o float da imagem para parecer projeção no piso) */
.hero-slide__media::after {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 8%;
    height: 60px;
    background:
        radial-gradient(ellipse at center,
            rgba(10, 31, 42, 0.32) 0%,
            rgba(10, 58, 104, 0.18) 35%,
            transparent 75%);
    filter: blur(16px);
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero-slide.is-active .hero-slide__media::after {
    opacity: 1;
    transition-delay: 0.6s;
}

.hero-slide.is-active .hero-slide__media {
    transition-delay: 0.5s;
    opacity: 1;
    transform: translateX(0) scale(1);
}

.hero-slide__image-wrap {
    position: relative;
    width: 100%;
    max-width: 600px;
    padding: 0;
}

/* Glow ambiente atrás da ilustração removido — background limpo */

/* Float sutil */
.hero-slide.is-active .hero-slide__image-wrap {
    animation: hs-image-float 6s ease-in-out infinite;
}

@keyframes hs-image-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Placeholder adaptado para fundo claro do slider */
.hero-slide__image.img-placeholder {
    position: relative;
    z-index: 1;
    aspect-ratio: 5 / 4;
    min-height: 400px;
    background: transparent;
    border: none;
    color: var(--color-secondary);
    overflow: visible;
}

/* Grade decorativa dentro do placeholder */
.hero-slide__image.img-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(10, 58, 104, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 58, 104, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
    pointer-events: none;
}

/* Label centralizado estilizado */
.hero-slide__image .img-placeholder__label {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-primary);
    border: 1px solid rgba(31, 111, 170, 0.2);
    padding: 8px 18px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 10px 28px rgba(8, 20, 36, 0.28);
}

/* Imagem real por cima do placeholder (quando o arquivo existe).
   Se o <img> falhar a carregar, onerror="this.remove()" apaga
   o elemento e o placeholder volta a ser visível. */
.hero-slide__image-src {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 5;
    /* Sombra tonalizada no azul do fundo — sutil, sem "caixa" escura */
    filter:
        drop-shadow(0 22px 34px rgba(10, 58, 104, 0.18))
        drop-shadow(0 6px 12px rgba(31, 111, 170, 0.12));
}

/* Quando a imagem carrega, mantém o degradê de fundo como moldura suave */
.hero-slide__image:has(img.hero-slide__image-src) {
    border-color: transparent;
}

.hero-slide__image:has(img.hero-slide__image-src) .img-placeholder__label {
    display: none;
}

/* Esconde o label residual do placeholder de fundo (não tem imagem real;
   o fundo é um gradient CSS e o label vazava pro canto da viewport). */
.hero-slide__bg .img-placeholder__label {
    display: none !important;
}


/* Eyebrow pill */
.hero-slide__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(159, 220, 255, 0.28);
    color: #7DD3EF;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    margin-bottom: 24px;
}

.hero-slide__eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hs-accent);
    box-shadow: 0 0 0 4px rgba(45, 182, 222, 0.25);
    animation: hs-pulse 2s infinite;
}

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

.hero-slide__title {
    font-size: clamp(1.95rem, 3.2vw, 3rem);
    line-height: 1.18;
    font-weight: 750;
    letter-spacing: -0.018em;
    margin: 0 0 24px;
    color: var(--color-primary);
    max-width: 580px;
}

.hero-slide__accent {
    background: var(--hs-grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-slide__text {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-gray);
    max-width: 540px;
    margin: 0;
}

.hero-slide__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

/* --- Botões internos do slider --- */
.hero-slide__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.hero-slide__btn--primary {
    background: var(--hs-grad-brand);
    color: #fff;
    box-shadow:
        0 20px 46px rgba(5, 14, 28, 0.55),
        0 8px 18px rgba(8, 20, 36, 0.35);
}

.hero-slide__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 26px 58px rgba(5, 14, 28, 0.7),
        0 10px 22px rgba(8, 20, 36, 0.45);
    color: #fff;
}

.hero-slide__btn--ghost {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-slide__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

/* --------------------------------------------------------------
   Setas de navegação
   -------------------------------------------------------------- */
.hero-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(10, 58, 104, 0.12);
    border-radius: 50%;
    color: var(--color-primary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 10px 22px rgba(5, 14, 28, 0.25),
        0 3px 8px rgba(8, 20, 36, 0.18);
}

.hero-slider__arrow:hover {
    background: #ffffff;
    border-color: rgba(31, 111, 170, 0.35);
    box-shadow:
        0 14px 30px rgba(5, 14, 28, 0.35),
        0 4px 10px rgba(8, 20, 36, 0.22);
}

.hero-slider__arrow--prev { left: 24px; }
.hero-slider__arrow--next { right: 24px; }

.hero-slider__arrow--prev:hover { transform: translateY(-50%) translateX(-2px); }
.hero-slider__arrow--next:hover { transform: translateY(-50%) translateX(2px); }

/* --------------------------------------------------------------
   Dots + contador + progress bar (rodapé do slider)
   -------------------------------------------------------------- */
.hero-slider__controls {
    position: absolute;
    left: 50%;
    bottom: 36px;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    box-shadow:
        0 18px 44px rgba(5, 14, 28, 0.3),
        0 6px 14px rgba(8, 20, 36, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(10, 58, 104, 0.04);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.hero-slider__controls:hover {
    box-shadow:
        0 24px 56px rgba(5, 14, 28, 0.42),
        0 8px 18px rgba(8, 20, 36, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(10, 58, 104, 0.04);
    transform: translateX(-50%) translateY(-2px);
}

.hero-slider__dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hero-slider__dot {
    position: relative;
    width: 7px;
    height: 7px;
    padding: 0;
    background: rgba(10, 58, 104, 0.22);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    transition:
        background 0.25s ease,
        width 0.45s cubic-bezier(0.65, 0, 0.35, 1),
        transform 0.2s ease;
}

.hero-slider__dot:hover {
    background: rgba(10, 58, 104, 0.5);
    transform: scale(1.25);
}

.hero-slider__dot.is-active {
    width: 30px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0A3A68 0%, #1F6FAA 45%, #2DB6DE 100%);
    box-shadow:
        0 2px 8px rgba(45, 182, 222, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: scale(1);
}

/* Shimmer deslizando dentro do dot ativo */
.hero-slider__dot.is-active::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%);
    transform: translateX(-100%);
    animation: hs-dot-shimmer 2.8s ease-in-out infinite;
}

@keyframes hs-dot-shimmer {
    0%      { transform: translateX(-100%); }
    55%     { transform: translateX(120%); }
    100%    { transform: translateX(120%); }
}

/* Contador com separador vertical à esquerda */
.hero-slider__counter {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding-left: 18px;
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: 0.02em;
}

.hero-slider__counter::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: linear-gradient(180deg,
        transparent,
        rgba(10, 58, 104, 0.25) 50%,
        transparent);
}

.hero-slider__counter-current {
    font-weight: 700;
    background: linear-gradient(135deg, #0A3A68, #2DB6DE);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-slider__counter-sep {
    opacity: 0.35;
    font-weight: 400;
    margin: 0 1px;
}

.hero-slider__counter-total {
    color: var(--color-gray);
    font-weight: 500;
    font-size: 0.76rem;
    opacity: 0.85;
}

.hero-slider__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(10, 58, 104, 0.08);
    z-index: 5;
    overflow: hidden;
}

.hero-slider__progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: var(--hs-grad-accent);
    box-shadow: 0 0 12px rgba(45, 182, 222, 0.6);
    transition: width 0.2s linear;
}

/* Estado pausado (ex: hover ou foco) */
.hero-slider.is-paused .hero-slider__progress-bar {
    transition: none;
}

/* --------------------------------------------------------------
   Stat strip inferior (pequena faixa de destaque sobre slides)
   -------------------------------------------------------------- */
.hero-slider__stats {
    position: absolute;
    right: 36px;
    bottom: 110px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 240px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
}

.hero-slider__stats-label {
    font-size: 0.72rem;
    color: #7DD3EF;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
}

.hero-slider__stats-value {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    background: var(--hs-grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-slider__stats-desc {
    font-size: 0.82rem;
    color: #d0d8e8;
    line-height: 1.4;
}

/* --------------------------------------------------------------
   Header overrides quando sobre o slider dark
   (igual ao VDS — usa body class .home-page)
   -------------------------------------------------------------- */
body.home-page header.transparent:not(.smaller) #mainmenu > li > a.menu-item,
body.home-page header.transparent:not(.smaller) #mainmenu > li > a.menu-item:visited {
    color: #fff;
}

body.home-page header.transparent:not(.smaller) #mainmenu > li > a.menu-item:hover {
    color: #7DD3EF;
}

body.home-page header.transparent:not(.smaller) #mainmenu li.has-child:after {
    color: #fff;
    opacity: 0.85;
}

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

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

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

body.home-page 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.home-page header.transparent:not(.smaller) #logo .logo-main,
body.home-page header.transparent:not(.smaller) #logo .logo-mobile {
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .hero-slider { min-height: 580px; height: 78vh; }
    .hero-slider__stats { right: 24px; bottom: 110px; }
}

@media (max-width: 991.98px) {
    .hero-slider { min-height: 520px; height: auto; padding: 140px 0 110px; }
    .hero-slider__arrow { width: 44px; height: 44px; }
    .hero-slider__arrow--prev { left: 12px; }
    .hero-slider__arrow--next { right: 12px; }
    .hero-slider__stats { display: none; }

    /* Placeholder da imagem some no mobile — foco no conteúdo */
    .hero-slide__media { display: none; }
}

@media (max-width: 767.98px) {
    .hero-slider { padding: 120px 0 100px; min-height: 480px; }
    .hero-slide__title { font-size: 2rem; }
    .hero-slide__text { font-size: 1rem; }
    .hero-slide__actions { flex-direction: column; align-items: stretch; width: 100%; }
    .hero-slide__btn { width: 100%; }
    .hero-slider__controls { bottom: 20px; padding: 10px 16px; gap: 16px; }
    .hero-slider__arrow { display: none; }
}