/* ==========================================================
01. VARIÁVEIS / CORES
========================================================== */
:root {
    --navy: #031b2d;
    --navy2: #062a43;
    --blue: #119df2;
    --cyan: #36c6ef;
    --text: #0a3154;
    --muted: #657b8f;
    --white: #fff;
    --line: #dce8f0;
}

/* ==========================================================
02. RESET E ESTILOS GERAIS
========================================================== */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Inter,Segoe UI,Arial,sans-serif;
    color: var(--text);
    background: #f6fbff;
}

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

/* ==========================================================
   MARCA HOTTEC AO LADO DO SIGPRED
   ========================================================== */

.brand .hottecBrand {
    font-style: normal;
    border-left: 1px solid #4a6374;
    padding-left: 10px;
    margin-left: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    line-height: 1;
}


    /* Texto "Uma solução" */
    .brand .hottecBrand span {
        font-size: 10px;
        color: #ffffff;
        opacity: .80;
        margin-bottom: 2px;
    }


    /* Logotipo Hottec */
    .brand .hottecBrand img {
        display: block;
        width: 120px;
        height: auto;
        object-fit: contain;
    }
/* ==========================================================
03. CABEÇALHO / MENU SUPERIOR
========================================================== */
.topbar {
    height: 72px;
    padding: 0 4%;
    display: flex;
    align-items: center;
    gap: 30px;
    background: #031727;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid #16425d;
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 260px;
}

    .brand .wave {
        font-size: 52px;
        color: #17aaf8;
        line-height: .6;
    }

    .brand b {
        font-size: 28px;
    }

    .brand small {
        display: block;
        font-size: 8px;
        letter-spacing: 2px;
    }

    .brand em {
        font-style: normal;
        font-size: 9px;
        border-left: 1px solid #4a6374;
        padding-left: 10px;
        margin-left: 6px;
    }

        .brand em strong {
            font-size: 15px;
        }


/* ==========================================================
   ACESSOS AOS PORTAIS
   ========================================================== */

.portalActions {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}


/* Portal legado - acesso secundário */
.btn.legacy {
    background: transparent;
    border: 1px solid rgba(120, 190, 225, .55);
    color: #b9d9ea;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}


    .btn.legacy:hover {
        background: rgba(30, 150, 210, .12);
        border-color: #36c6ef;
        color: #ffffff;
    }
.topbar nav {
    display: flex;
    gap: 28px;
    margin: auto;
}

    .topbar nav a {
        font-size: 14px;
        opacity: .9;
    }

        .topbar nav a:hover {
            color: var(--cyan);
        }

/* ==========================================================
04. BOTÕES
========================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 14px;
}

.primary {
    background: linear-gradient(135deg,#04a8f5,#278af0);
    color: #fff;
}

.ghost, .outline {
    border: 1px solid #a9d9ef;
    color: #fff;
}

.dark {
    background: #073052;
    color: #fff;
}

.menuBtn {
    display: none;
    background: none;
    border: 0;
    color: white;
    font-size: 25px;
}

/* ==========================================================
   05. HERO / TOPO DA PÁGINA
   ========================================================== */

.hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 540px;
    min-height: 540px;
    color: #fff;
    background-image: url('/images/Hero_imagem.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Sombra leve para leitura dos textos sobre a imagem */
.heroShade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient( 90deg, rgba(1, 17, 29, 0.28) 0%, rgba(1, 17, 29, 0.12) 28%, rgba(1, 17, 29, 0.00) 52% );
}

.heroContent {
    position: absolute;
    z-index: 5;
    left: 5%;
    top: 70px;
    width: 42%;
    max-width: 650px;
}

.eyebrow, .card span, .copy span, .softwareCopy > span {
    color: #45d1ff;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 700;
}

.hero h1 {
    font-size: 54px;
    line-height: 1.03;
    margin: 12px 0;
}

    .hero h1 span {
        color: #42c8f3;
    }

.lead {
    font-size: 18px;
    line-height: 1.5;
    max-width: 580px;
}

.actions {
    display: flex;
    gap: 14px;
    margin-top: 25px;
}

/* ==========================================================
   CAMADA DOS EFEITOS SOBRE A IMAGEM DO HERO
   ========================================================== */

.heroMachine {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* IMPORTANTE: não colocar fundo aqui */
    background: transparent;
    pointer-events: none;
}
/* Centro das ondas sobre o sensor existente na fotografia */
.sensorWaves {
    position: absolute;
    left: 58.5%;
    top: 46%;
    width: 1px;
    height: 1px;
    z-index: 3;
}

.pulse {
    position: absolute;
    left: 0;
    top: 0;
    width: 82px;
    height: 82px;
    border: 2px solid rgba(32, 201, 255, .95);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(.35);
    opacity: 0;
    box-shadow: 0 0 12px rgba(32, 201, 255, .35), inset 0 0 12px rgba(32, 201, 255, .18);
    animation: pulseAegis 2.4s ease-out infinite;
}

.p2 {
    animation-delay: .8s;
}

.p3 {
    animation-delay: 1.6s;
}

@keyframes pulseAegis {
    0% {
        transform: translate(-50%, -50%) scale(.35);
        opacity: .95;
    }

    70% {
        opacity: .38;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.7);
        opacity: 0;
    }
}

.telemetry {
    position: absolute;
    right: 5%;
    top: 18%;
    width: 230px;
    padding: 18px;
    background: #063650dd;
    border: 1px solid #3dbfe5;
    border-radius: 12px;
    box-shadow: 0 12px 30px #0018;
    pointer-events: auto;
}

    .telemetry .spark {
        color: #36d6ff;
        font-size: 28px;
        letter-spacing: -3px;
        border-bottom: 1px solid #4a7790;
        padding: 7px 0;
    }

    .telemetry p {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    }

        .telemetry p:last-child b {
            color: #58e783;
        }

.techbar {
    position: absolute;
    z-index: 6;
    left: 4%;
    bottom: 22px;
    display: flex;
    gap: 23px;
    font-size: 12px;
    flex-wrap: wrap;
}

    .techbar span {
        opacity: .92;
    }

.intro {
    text-align: center;
    padding: 18px;
    background: #fff;
}

    .intro h2 {
        margin: 0;
        font-size: 27px;
    }

    .intro p {
        margin: 4px;
    }
/* ==========================================================
   CARDS DE PRODUTOS
   ========================================================== */

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px;
}


/* ==========================================================
   CARD BASE
   ========================================================== */

.card {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    border-radius: 14px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: white;
}


/* ==========================================================
   CONTEÚDO DOS CARDS
   ========================================================== */

.card-content {
    position: relative;
    z-index: 2;
    width: 52%;
    max-width: 440px;
    padding: 32px;
}


/* ==========================================================
   VIB SERIES
   ========================================================== */

.card-vib {
    background-image: url('/images/vib-series-bg.png');
}


/* ==========================================================
   AEGIS
   ========================================================== */

.card-aegis {
    background-image: url('/images/aegis-bg.png');
}


/* ==========================================================
   SIGPRED WEB
   ========================================================== */

.card-web {
    background-image: url('/images/sigpred-web-bg.png');
    /* NÃO usar grid-column aqui */
}

/* ==========================================================
07. OFF-LINE / ON-LINE
========================================================== */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #eaf5fb;
}

.field, .online {
    min-height: 370px;
    display: flex;
    position: relative;
    overflow: hidden;
}

.copy {
    padding: 28px 0 25px 5%;
    width: 50%;
    z-index: 3;
}

    .copy h2 {
        font-size: 29px;
    }

    .copy ul {
        padding: 0;
        list-style: none;
        line-height: 1.7;
    }

    .copy li:before {
        content: "✓";
        margin-right: 8px;
        font-weight: bold;
    }

.fieldVisual {
    position: absolute;
    right: 0;
    width: 58%;
    height: 100%;
    background: radial-gradient(circle at 70% 45%,#397c9c,#092b3e 65%);
}

.worker {
    position: absolute;
    right: 12%;
    top: 8%;
    width: 45%;
    height: 90%;
    background: linear-gradient(150deg,#e8f2f7 0 16%,#173b59 17% 100%);
    clip-path: polygon(25% 0,75% 0,100% 100%,0 100%);
    opacity: .85;
}

.fieldVisual img {
    position: absolute;
    height: 65%;
    right: 25%;
    bottom: 8%;
    object-fit: contain;
    filter: drop-shadow(0 10px 15px #001);
}

.online {
    background: linear-gradient(135deg,#fff,#cce8f6);
}

.aegisShow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    gap: 12px;
}

    .aegisShow img {
        max-width: 45%;
        max-height: 260px;
        object-fit: contain;
        filter: drop-shadow(0 10px 12px #678);
    }

    .aegisShow .noCable {
        clip-path: inset(0 0 20% 0);
    }

/* ==========================================================
08. SIGPRED WEB / TELAS
========================================================== */
.software {
    display: grid;
    grid-template-columns: 27% 73%;
    min-height: 300px;
    background: linear-gradient(90deg,#f5fbff,#d4eaf7);
    padding: 25px 3%;
    overflow: hidden;
}

.softwareCopy small {
    display: block;
    letter-spacing: 1.5px;
}

.softwareCopy h2 {
    font-size: 34px;
    margin: 14px 0;
}

.screens {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .screens img {
        width: 31%;
        height: 220px;
        object-fit: cover;
        object-position: left top;
        border: 6px solid #0b2235;
        border-radius: 5px;
        box-shadow: 0 15px 20px #5a788a55;
    }

        .screens img:nth-child(2) {
            width: 36%;
            height: 240px;
        }

/* ==========================================================
09. SEGMENTOS
========================================================== */
.segments,
/* ==========================================================
10. CONTEÚDO / VÍDEOS
========================================================== */
.content {
    padding: 18px 3%;
    background: #fff;
}

    .sectionTitle h2, .content h2 {
        margin: 0;
    }

.segmentGrid {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    gap: 7px;
    margin-top: 12px;
}

/* ==========================================================
   SEGMENTOS DA INDÚSTRIA
   ========================================================== */

.seg {
    height: 125px;
    border-radius: 7px;
    display: flex;
    align-items: flex-end;
    padding: 12px;
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
}

    /* Foto independente para permitir zoom sem aumentar o card */
    .seg::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--segment-image);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        z-index: -2;
        transform: scale(1);
        transition: transform 0.45s ease, filter 0.45s ease;
    }

    /* Gradiente para manter o nome legível */
    .seg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, rgba(0,15,30,.88) 0%, rgba(0,25,45,.20) 65%, rgba(0,20,40,.02) 100%);
        z-index: -1;
        transition: background 0.45s ease;
    }

    /* Zoom somente na fotografia */
    .seg:hover::before {
        transform: scale(1.08);
        filter: brightness(1.10);
    }

    .seg:hover::after {
        background: linear-gradient(0deg, rgba(0,15,30,.82) 0%, rgba(0,25,45,.12) 65%, rgba(0,20,40,0) 100%);
    }

    .seg:hover {
        box-shadow: 0 8px 20px rgba(0,35,65,.25);
    }

/* ==========================================================
   IMAGENS DOS SEGMENTOS
   ========================================================== */

.mining {
    --segment-image: url('/images/segmentos/mineracao.jpg');
}

.paper {
    --segment-image: url('/images/segmentos/papel-celulose.jpg');
}

.steel {
    --segment-image: url('/images/segmentos/siderurgia.jpg');
}

.food {
    --segment-image: url('/images/segmentos/alimentos-bebidas.jpg');
}

.oil {
    --segment-image: url('/images/segmentos/oleo-gas.jpg');
}

.water {
    --segment-image: url('/images/segmentos/saneamento.jpg');
}

.chem {
    --segment-image: url('/images/segmentos/quimica-petroquimica.jpg');
}

.general {
    --segment-image: url('/images/segmentos/industria-geral.jpg');
}


.content {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    gap: 35px;
    border-top: 1px solid var(--line);
}

    .content article {
        border-bottom: 1px solid var(--line);
        padding: 12px 0;
    }

.videoTile {
    display: grid;
    grid-template-columns: 55% 45%;
    position: relative;
    gap: 10px;
}

    .videoTile img {
        width: 100%;
        height: 140px;
        object-fit: cover;
    }

    .videoTile b, .videoTile span {
        align-self: center;
    }

.play {
    position: absolute;
    left: 24%;
    top: 45%;
    background: #062c48dd;
    border: 2px solid white;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: #fff;
    z-index: 2;
}

/* ==========================================================
11. RODAPÉ
========================================================== */
footer {
    background: #031b2d;
    color: white;
    padding: 24px 3%;
    display: grid;
    grid-template-columns: 1fr 1.3fr auto;
    align-items: center;
    gap: 25px;
}

    footer .foot {
        min-width: auto;
    }

    footer a {
        margin: 0 5px;
    }

    footer > small {
        grid-column: 1/-1;
        border-top: 1px solid #27475b;
        padding-top: 15px;
        opacity: .7;
    }

/* ==========================================================
12. RESPONSIVIDADE
========================================================== */
@media(max-width:900px) {


    .topbar nav {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: #031727;
        padding: 20px;
        flex-direction: column
    }

        .topbar nav.open {
            display: flex;
        }

    .menuBtn {
        display: block;
        margin-left: auto;
    }

    .desktop {
        display: none;
    }

    .hero {
        height: 650px;
        min-height: 650px;
        background-position: 58% center;
    }

    .heroContent {
        width: 90%;
        top: 45px;
    }

    .hero h1 {
        font-size: 42px;
    }

    .heroMachine {
        inset: 0;
        opacity: 1;
    }

    .sensorWaves {
        left: 58%;
        top: 52%;
    }

    .telemetry {
        display: none;
    }

    .cards, .split, .software, .content {
        grid-template-columns: 1fr;
    }

    .segmentGrid {
        grid-template-columns: repeat(2,1fr);
    }

    .card {
        min-height: 300px;
    }

    .software {
        display: block;
    }

    .screens {
        margin-top: 20px;
    }

        .screens img {
            height: 140px;
        }

    .copy {
        width: 55%;
    }

    footer {
        grid-template-columns: 1fr;
    }

    .brand {
        min-width: auto;
    }
}