/* ========== 1) Base & Paleta ========== */
:root {
    /* Paleta principal (extraída da logo) */
    --brand: #0F9DAF; /* Principal */
    --brand-700: #006A87; /* Escura 1 */
    --brand-800: #014A6E; /* Escura 2 */
    --brand-600: #0B6E89; /* Intermediária */
    --brand-50: #D0ECF3; /* Realce claro / Surface */
    --brand-0: #FCFFFF; /* Quase branco da logo */
    /* Fundo / Texto (modo escuro) */
    --bg-950: #0B0D12;
    --bg-900: #0E141B;
    --bg-800: #121A23;
    --text-1: #04023a; /* Texto principal */
    --text-2: #46577c; /* Texto secundário */
    --muted: #46577c; /* Auxiliar */
    /* Superfícies translucidas (glass) */
    --surface-1: rgba(255,255,255,0.03);
    --surface-2: rgba(255,255,255,0.06);
    --border-1: rgba(0,0,0,0.80);
    --border-2: rgba(255,255,255,0.16);
    /* Sombras e efeitos */
    --shadow-lg: 0 20px 60px rgba(0,0,0,.45);
    --shadow-md: 0 10px 30px rgba(0,0,0,.35);
    --shadow-sm: 0 6px 16px rgba(0,0,0,.28);
    /* Raio padrão */
    --radius: 14px;
    /* Velocidades */
    --fast: .18s;
    --normal: .28s;
    --slow: .45s;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}



/* ========== 2) Tipografia & Layout global ========== */
html, body {
    background: radial-gradient(900px 500px at 15% 85%, rgba(15,157,175,0.12) 0%, transparent 70%),linear-gradient(180deg, var(--bg-950), var(--bg-900));
    color: var(--text-1);
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.bg-body {
    background: var(--bg-950);
}

a {
    color: var(--brand);
    text-decoration: none;
}

    a:hover {
        color: #13b7cd;
    }

/* Foco acessível */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Texto brand */
.brand-text {
    color: var(--brand);
    letter-spacing: .3px;
}

/* Logo */
.brand-logo {
    height: 58px;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,.35));
}

/* ========== 3) Navbar (Glass + Gradient) ========== */
.glass-nav {
    background: linear-gradient(180deg, rgba(2,14,22,0.75), rgba(2,14,22,0.35)), radial-gradient(800px 380px at 20% 80%, rgba(15,157,175,0.22) 10%, rgba(0,0,0,0) 60%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-2);
    box-shadow: var(--shadow-sm);
}

/* Subtle underline nos links */
.link-underline {
    position: relative;
}

    .link-underline::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--brand), var(--brand-700));
        transition: width var(--fast) ease;
    }

    .link-underline:hover::after {
        width: 100%;
    }

/* ========== 4) Hero & Footer (gradientes coerentes) ========== */
.hero-gradient {
    background: radial-gradient(900px 460px at 16% 84%, rgba(15,157,175,0.18) 0%, rgba(0,0,0,0) 70%), linear-gradient(145deg, var(--brand-800) 0%, var(--brand-700) 45%, var(--bg-900) 100%);
}

.footer-gradient {
    background: radial-gradient(900px 460px at 16% 84%, rgba(15,157,175,0.18) 0%, rgba(0,0,0,0) 70%), linear-gradient(145deg, var(--brand-800) 0%, var(--brand-700) 45%, var(--bg-900) 100%);
    /*border-top: 1px solid var(--border-2);*/
}

/* ========== 5) Carousel ========== */
.carousel-img {
    height: 300px;
    object-fit: cover;
    border-radius: calc(var(--radius) - 4px);
}

.placeholder-carousel {
    height: 300px;
    background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
    border: 1px dashed var(--border-1);
    border-radius: var(--radius);
}

/* ========== 6) Cards (elevados e limpos) ========== */
.card {
    border: 1px solid var(--border-1);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
    color: var(--text-1);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

    .card .card-header {
        background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
        border-bottom: 1px solid var(--border-1);
    }

    .card .card-footer {
        background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.03));
        border-top: 1px solid var(--border-1);
    }

/* Hover/tilt */
.hover-lift {
    transition: transform var(--normal) ease, box-shadow var(--normal) ease, border-color var(--normal) ease;
}

    .hover-lift:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
        border-color: var(--border-2);
    }

/* ========== 7) Imagens com overlay elegante ========== */
.image-overlay {
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--radius) - 2px);
}

    .image-overlay img {
        transition: transform var(--slow) ease, filter var(--slow) ease;
        height: 220px;
        object-fit: cover;
        width: 100%;
    }

    .image-overlay .overlay-content {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 1.2rem;
        letter-spacing: .3px;
        opacity: 0;
        background: linear-gradient(180deg, rgba(1,74,110,0), rgba(1,74,110,.45));
        transition: opacity var(--normal) ease;
    }

    .image-overlay:hover img {
        transform: scale(1.05);
        filter: brightness(.95) saturate(1.05);
    }

    .image-overlay:hover .overlay-content {
        opacity: 1;
    }

/* ========== 8) Botões (Brand, Outline, Ghost, Soft) ========== */
.btn-brand {
    --btn-bg: linear-gradient(135deg, var(--brand), var(--brand-700));
    background: var(--btn-bg);
    border: 1px solid rgba(19,183,205, .5);
    color: var(--brand-0);
    font-weight: 600;
    letter-spacing: .2px;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(15,157,175,.32);
    transition: filter var(--fast), transform var(--fast), box-shadow var(--fast);
}

    .btn-brand:hover {
        filter: brightness(1.03);
        transform: translateY(-1px);
        box-shadow: 0 12px 38px rgba(15,157,175,.38);
    }

    .btn-brand:active {
        transform: translateY(0);
    }

.btn-outline-brand {
    background: transparent;
    border: 1px solid var(--brand);
    color: var(--brand);
    border-radius: 12px;
    font-weight: 600;
    transition: background var(--fast), color var(--fast), box-shadow var(--fast);
}

    .btn-outline-brand:hover {
        background: rgba(15,157,175);
        color: var(--brand-0);
        box-shadow: 0 8px 24px rgba(0,0,0);
    }

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border-1);
    color: var(--text-1);
    border-radius: 12px;
}

    .btn-ghost:hover {
        border-color: var(--border-2);
        background: var(--surface-1);
    }

.btn-soft {
    background: linear-gradient(180deg, rgba(208,236,243,.55), rgba(208,236,243,.18));
    color: #083a43;
    border: 1px solid rgba(208,236,243,.55);
    border-radius: 12px;
}

    .btn-soft:hover {
        filter: saturate(1.05) brightness(1.03);
    }

/* Ripple effect (leve) */
.ripple {
    position: relative;
    overflow: hidden;
}

    .ripple::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        transform: scale(0);
        opacity: .55;
        background: rgba(255,255,255,.65);
        transition: transform .45s ease, opacity .7s ease;
    }

    .ripple:active::after {
        transform: scale(1);
        opacity: 0;
    }

/* ========== 9) Listas com check (Font Awesome 6) ========== */
.list-checked li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    color: var(--text-1);
}

    .list-checked li::before {
        content: "\f00c";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        left: 0;
        top: .15rem;
        color: var(--brand);
        text-shadow: 0 2px 10px rgba(15,157,175,.35);
    }

/* ========== 10) Formulários ========== */
input, select, textarea, .form-control {
    color: var(--text-1);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border: 1px solid var(--border-1);
    border-radius: 12px;
    padding: 0.75rem 0.95rem;
    transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}

    input::placeholder, textarea::placeholder {
        color: var(--text-2);
    }

    input:focus, select:focus, textarea:focus, .form-control:focus {
        border-color: rgba(19,183,205,.75);
        box-shadow: 0 0 0 4px rgba(19,183,205,.18);
        background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    }

/* ========== 11) Chips / Badges ========== */
.badge-brand {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    background: rgba(15,157,175,.16);
    color: var(--brand-50);
    border: 1px solid rgba(15,157,175,.35);
}

/* ========== 12) WhatsApp Float (harmonizado com a paleta) ========== */

 

    .whatsapp-float i {
        transform: translateY(0);
    }

    .whatsapp-float:active {
        transform: translateY(-1px);
    }

/* ========== 13) Scrollbar (discreto) ========== */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--brand-700), var(--brand-800));
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

    *::-webkit-scrollbar-thumb:hover {
        filter: brightness(1.08);
    }

/* ========== 14) Utilitários ========== */
.text-muted {
    color: var(--text-2) !important;
}

.border-subtle {
    border-color: var(--border-1) !important;
}

.surface-1 {
    background: var(--surface-1) !important;
}

.surface-2 {
    background: var(--surface-2) !important;
}

.rounded-lg {
    border-radius: var(--radius) !important;
}

.shadow-md {
    box-shadow: var(--shadow-md) !important;
}

.max-w-3xl {
    max-width: 72rem;
}

.gap-1 {
    gap: .25rem;
}

.gap-2 {
    gap: .5rem;
}

.gap-3 {
    gap: .75rem;
}

.gap-4 {
    gap: 1rem;
}

/* ========== 15) Animações sutis ========== */
@keyframes float-y {
    from {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }

    to {
        transform: translateY(0);
    }
}

.pulse-soft {
    box-shadow: 0 0 0 0 rgba(19,183,205,.28);
    animation: pulse 2.4s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(19,183,205,.28);
    }

    70% {
        box-shadow: 0 0 0 22px rgba(19,183,205,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(19,183,205,0);
    }
}


/* WhatsApp floating */
.whatsapp-float {
    position: fixed;
    width: 56px;
    height: 56px;
    line-height: 56px;
    right: 18px;
    bottom: 18px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    text-align: center;
    font-size: 28px;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    z-index: 1000;
}

    .whatsapp-float:hover {
        filter: brightness(0.95);
        color: #fff;
    }


/* ========== marca dgua ========== */


/* Marca d’água global no body (fundo claro) */
body.bg-body { /* aplique esta classe quando o fundo for branco */
    /* Fundo branco normal do layout */
    background: #fff;
    position: relative;
}

    /* pseudo-elemento para controlar opacidade independentemente do conteúdo */
    body.bg-body::before {
        content: "";
        position: fixed; /*fica fixo ao viewport; se preferir rolar junto, troque por absolute */
        inset: 0;
        background-image: url('Logo150x150.webp'); /* use SVG se possível (fica nítido) */
        background-repeat: no-repeat;
        background-position: center 40%; /* levemente acima do centro, ajuste se quiser */
        background-size: min(44vw, 700px); /* dimensiona de forma responsiva */
        opacity: 0.15; /* “quase transparente” — ajuste entre 0.02 e 0.07 */
        pointer-events: none; /* não bloqueia cliques */
        z-index: 0;
    }

    /* Garante que o conteúdo fique acima da marca d’água */
    body.bg-body > * {
        /*position: relative;*/
        z-index: 1;
    }

/* Em telas móveis, desabilite o fixed para evitar “tremidas” do iOS */
@media (max-width: 768px) {
    body.bg-body::before {
        position: absolute;
    }
}




/* === INTRO TELA CHEIA (FIX DEFINITIVO) === */

/*html, body {
    width: 100%;
    height: 100%;
}*/

    /* ignora regra z-index do body.bg-body > * */
    /*body.bg-body > .intro-overlay {
        z-index: 2147483647 !important;
    }*/


/* === INTRO VIDEO RESPONSIVO (DESKTOP + MOBILE) === */

.intro-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: #000;
    z-index: 2147483647 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* padrão desktop */
    .intro-overlay video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* ====== MOBILE FIX ====== */
@media (max-width: 768px) {
    .intro-overlay {
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }

        .intro-overlay video {
            width: auto;
            height: auto;
            max-width: 100vw;
            max-height: 100svh;
            object-fit: contain;
        }
}

@media (max-width: 768px) {
    .intro-overlay video {
        aspect-ratio: 16 / 9; /* ajuste conforme seu vídeo */
    }
}


/* Fallback para navegadores antigos */
.min-dvh-100 {
    min-height: 100vh;
}

/* QUADRADO sempre (desktop e mobile) */
.category-box .cat-carousel .carousel-item img.carousel-img {
    width: 100%;
    aspect-ratio: 1 / 1; /* chave para quadrado */
    object-fit: cover; /* corta sem distorcer */
    display: block;
    height: auto; /* garante que nenhuma altura antiga “forçada” prevaleça */
}

/* Se você tinha antes altura fixa nas imagens, anule: */
@media (max-width: 9999px) {
    .carousel-img {
        height: auto !important;
    }
}

/* (Opcional) Controles só no hover para ficar limpo */
.cat-carousel .carousel-control-prev,
.cat-carousel .carousel-control-next {
    opacity: 0;
    transition: opacity .2s ease;
}

.category-box:hover .cat-carousel .carousel-control-prev,
.category-box:hover .cat-carousel .carousel-control-next {
    opacity: .9;
}

.cat-carousel .carousel-control-prev-icon,
.cat-carousel .carousel-control-next-icon {
    width: 1.6rem;
    height: 1.6rem;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}