@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;600;700;800;900&display=swap');

/* ==========================================================================
   01. VARIÁVEIS GLOBAIS (CORES E TIPOGRAFIA)
   ========================================================================== */
:root {
    --color-white: #ffffff;
    --color-black-light: rgba(0, 0, 0, 0.2);
    --color-text: #504f4f; 
    --color-text-dark: #6c6c6c; 
    --color-accent: #55c57a; 
    
    --color-primary: #a046e3;
    --color-secondary: #cd7ce3;
    --color-primary-dark: #C769D4;

    --font-primary: 'Inter', sans-serif;
}

/* ==========================================================================
   02. RESET E CONFIGURAÇÕES BASE
   ========================================================================== */
html, body {
    font-family: var(--font-primary);
    color: var(--color-text);
    background-color: var(--color-white) !important; 
    min-height: 100vh; 
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
}

.bg-light, .bg-body-tertiary { background-color: var(--color-white) !important; }

p {
    font-size: clamp(0.75rem, 0.9vw, 1.15rem) !important; 
    line-height: 1.6 !important; 
    letter-spacing: 0.02em !important; 
    word-spacing: 0.08em !important; 
    margin-bottom: clamp(0.5rem, 1vw, 1.5rem) !important; 
    text-align: justify; 
    hyphens: auto; 
}

h1 {
    font-size: clamp(1.2rem, 2.8vw, 3.5rem); 
    color: var(--color-primary);
    text-transform: uppercase;  
    font-weight: 800; 
    letter-spacing: 0.2rem; 
    line-height: 1.2;
}

.h2-title {
    font-size: clamp(1.2rem, 2vw, 2.2rem); 
    color: var(--color-text);
    text-transform: uppercase;  
    font-weight: 800; 
    letter-spacing: 0.2rem; 
    line-height: 1.2;
}

.h-title {
    font-size: clamp(0.9rem, 1.2vw, 1.5rem);
}

.h-subtitle {
    font-size: clamp(0.8rem, 1vw, 1.2rem);
}

@media (min-width: 768px) {
    h1 { letter-spacing: 0.95rem; line-height: 1; }
}

@media (max-width: 767.98px) {
    p { text-align: left !important; font-size: 1rem !important; } 
    h1 { font-size: 2rem; }
}

/* ==========================================================================
   03. LAYOUT GLOBAL E CONTAINERS
   ========================================================================== */
.container, 
.container-fluid.servicos-content,
#sobre > .container {
    width: 100% !important;
    margin: 0 auto !important; 
    max-width: 95% !important; 
}

@media (min-width: 992px) {
    .container, .container-fluid.servicos-content, #sobre > .container {
        max-width: 90% !important; 
    }
}

@media (min-width: 1400px) {
    .container, .container-fluid.servicos-content, #sobre > .container {
        max-width: 85% !important; 
    }
}

.hero-logo { width: 100%; max-width: clamp(150px, 20vw, 400px); height: auto; }
.img-icon-lg { width: clamp(60px, 10vw, 195px); height: auto; object-fit: contain; flex-shrink: 0; }

.glass-card {
    border-radius: 1.7rem;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.15); 
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.btn-custom {
    position: relative; display: inline-block; 
    padding: clamp(0.5rem, 1vh, 1rem) clamp(1.5rem, 3vw, 3rem); 
    font-size: clamp(0.7rem, 1vw, 1.4rem);
    font-weight: 400; text-transform: uppercase; text-decoration: none; 
    letter-spacing: -0.005rem; word-spacing: 0.11rem; border-radius: 5rem;
    backface-visibility: hidden; z-index: 1; transition: all 0.2s; border: none;
    cursor: pointer; box-shadow: 0 0.5rem 1rem var(--color-black-light);
}

.btn-custom::after {
    content: ""; position: absolute; display: inline-block; width: 100%; height: 100%;
    top: 0; left: 0; border-radius: 5rem; z-index: -1; transition: all 0.4s;
}

.btn-custom:hover { transform: translateY(-0.3rem); box-shadow: 0 1rem 2rem var(--color-black-light); }
.btn-custom:hover::after { opacity: 0; transform: scaleX(1.4) scaleY(1.6); }

.btn-custom-white { background-color: var(--color-white); color: var(--color-text); }
.btn-custom-white::after { background-color: var(--color-white); }
.btn-animated { animation: moveInBottom 0.5s ease-out 0.75s backwards; }
.heading-animate-main { animation: moveInLeft 1s ease-out; backface-visibility: hidden; }

@media (min-width: 769px) {
    .btn-custom { font-weight: 300;}
}
@media (max-width: 767.98px) {
    article .d-flex { align-items: center; text-align: center; }
}

/* ==========================================================================
   04. NAVEGAÇÃO (MENU)
   ========================================================================== */
.header-main { position: relative; z-index: 9999; }

@layer components.navigation {
   .navigation { position: relative; }
   .navigation__checkbox { display: none; }
   
   .navigation__button { 
       position: fixed; top: clamp(1rem, 3vh, 2rem); right: clamp(1rem, 3vw, 2rem); 
       width: clamp(3rem, 5vw, 5rem); height: clamp(3rem, 5vw, 5rem); 
       border-radius: 50%; background-color: transparent !important; 
       border: none !important; box-shadow: none !important; 
       cursor: pointer; z-index: 1000; text-align: center;
       user-select: none; -webkit-user-select: none; outline: none;
       transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
   }
   .navigation__button:hover { background-color: var(--color-white) !important; box-shadow: 0 1rem 3rem var(--color-black-light) !important; }

   .navigation__background { 
       position: fixed; top: clamp(1.5rem, 3.5vh, 2.5rem); right: clamp(1.5rem, 3.5vw, 2.5rem); 
       width: clamp(2rem, 4vw, 4rem); height: clamp(2rem, 4vw, 4rem); 
       border-radius: 50%; background-image: radial-gradient(var(--color-secondary), var(--color-primary-dark)); 
       z-index: 998; will-change: transform; transform: scale(1); opacity: 0; 
       transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.1s 0.7s; 
   }
   .navigation__checkbox:checked ~ .navigation__background { transform: scale(100); opacity: 1; transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1), opacity 0s 0s; }

   .navigation__list { 
       position: fixed; top: 0; left: 0; height: 100vh; width: 100%; z-index: 999; 
       transform: translateX(-50%); opacity: 0; visibility: hidden; 
       display: flex; flex-direction: column; justify-content: center; align-items: center;
       list-style: none; padding-left: 0; margin: 0;
       transition: opacity 0.2s ease-out, transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), visibility 0s 0.8s; 
   }
   .navigation__checkbox:checked ~ .navigation__list { transform: translateX(0); opacity: 1; visibility: visible; transition: opacity 0.8s ease-in, transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), visibility 0s 0s; }

   .navigation__item { margin: 0.8rem; text-align: center; }
   
   .navigation__link { 
       display: inline-block; padding: 0.8rem 2rem; font-weight: 800; 
       color: var(--color-primary-dark) !important; text-transform: uppercase; 
       text-decoration: none !important; border-radius: 0.3rem; 
       width: clamp(180px, 15vw, 320px); text-align: center; 
       font-size: clamp(1.2rem, 1.5vw, 2rem);
       background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 49.9%, var(--color-white) 50%); 
       background-size: 227%; transition: all 0.4s; 
   }
   .navigation__link:hover { color: var(--color-primary-dark); background-position: 100%; transform: translateX(1rem); }
    
   .navigation__icon { display: inline-block; position: relative; width: clamp(2rem, 3vw, 3rem); height: 0.5rem; top: 37%; transition: transform 0.25s ease-in-out; }
   .navigation__icon-span { position: absolute; height: clamp(0.3rem, 0.5vw, 0.5rem); width: 50%; background: var(--color-text); transition: all 0.5s ease-in; }
   .navigation__icon-span:nth-child(even) { left: 50%; border-radius: 0 0.9rem 0.9rem 0; }
   .navigation__icon-span:nth-child(odd) { left: 0; border-radius: 0.9rem 0 0 0.9rem; }
   .navigation__icon-span:nth-child(1), .navigation__icon-span:nth-child(2) { transform: translateY(-0.8rem); }
   .navigation__icon-span:nth-child(5), .navigation__icon-span:nth-child(6) { transform: translateY(0.8rem); }
   
   .navigation__checkbox:checked ~ .navigation__button .navigation__icon-span:nth-child(1), .navigation__checkbox:checked ~ .navigation__button .navigation__icon-span:nth-child(6) { transform: rotate(45deg); }
   .navigation__checkbox:checked ~ .navigation__button .navigation__icon-span:nth-child(2), .navigation__checkbox:checked ~ .navigation__button .navigation__icon-span:nth-child(5) { transform: rotate(-45deg); }
   .navigation__checkbox:checked ~ .navigation__button .navigation__icon-span:nth-child(2), .navigation__checkbox:checked ~ .navigation__button .navigation__icon-span:nth-child(6) { transform-origin: left; }
   .navigation__checkbox:checked ~ .navigation__button .navigation__icon-span:nth-child(1), .navigation__checkbox:checked ~ .navigation__button .navigation__icon-span:nth-child(5) { transform-origin: right; }
   .navigation__checkbox:checked ~ .navigation__button .navigation__icon-span:nth-child(3) { left: -50%; opacity: 0; }
   .navigation__checkbox:checked ~ .navigation__button .navigation__icon-span:nth-child(4) { left: 100%; opacity: 0; }

   @media (min-width: 769px) {
       .navigation__button { top: 4vw; right: 4vw; width: 6vw; height: 6vw; max-width: 7rem; max-height: 7rem;}
       .navigation__background { top: 4.5vw; right: 4.5vw; width: 5vw; height: 5vw; max-width: 6rem; max-height: 6rem;}
   }
}

/* ==========================================================================
   05. SECTION: INÍCIO (HERO)
   ========================================================================== */
#inicio { 
    padding-top: clamp(4rem, 8vh, 9rem) !important; 
    padding-bottom: clamp(2rem, 5vh, 5rem) !important; 
}

.uppercase-hero {
    font-size: clamp(0.85rem, 1.1vw, 1.25rem) !important;
    font-weight: 600 !important; 
    text-transform: uppercase; 
    color: #cd7ce3 !important;
}

#inicio .btn-custom { border: 1px solid rgba(0,0,0,0.03); }
#inicio .btn-custom:hover { box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.1); }
#inicio p { text-align: center !important; }

@media (min-width: 992px) {
    #inicio h1 { margin-bottom: 1.5vw; margin-left: auto; margin-right: auto; }
    #inicio p { max-width: 100%; margin: 0 auto; }
}
@media (max-width: 991.98px) { 
    #inicio h1 { letter-spacing: 0.2rem; } 
    #inicio p { letter-spacing: 0.1rem !important; } 
}

/* ==========================================================================
   06. SECTION: SERVIÇOS E DIFERENCIAIS
   ========================================================================== */
#servicos { background-color: #F5F5F7 !important; }
.servicos-content { padding: clamp(2rem, 4vw, 6rem) 0 !important; } 
#servicos h3, #diferenciais h3 { color: var(--color-text-dark); letter-spacing: 0; }

@media (min-width: 992px) { 
    #servicos .flex-shrink-0, #diferenciais .flex-shrink-0 { margin-right: clamp(0.5rem, 1.5vw, 2rem) !important; } 
}

/* ==========================================================================
   07. SECTION: SOBRE NÓS (PROPORÇÃO PORTRAIT UNIFICADA)
   ========================================================================== */
#sobre { position: relative; background-image: url('./assets/images/unifyPlanHomeBackgroung.png'); background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; }
#sobre .row.g-4 > .col-12 { margin-top: clamp(1.5rem, 3vw, 3rem); }
#sobre .glass-card { background: rgba(255, 255, 255, 0.3) !important; border: 2px solid rgba(255, 255, 255, 0.25); padding: clamp(1.5rem, 3vw, 3rem) !important; }
#sobre .col-lg-6 .glass-card { text-align: left !important; }
#about-us-heading { text-align: left !important; }
#sobre h2 { color: var(--color-secondary); text-transform: uppercase; letter-spacing: -0.05rem; font-weight: 800; line-height: 1.1; margin-bottom: clamp(1rem, 2vw, 2rem) !important; text-align: center; }

.destaque-sobre { font-size: clamp(1.5rem, 3vw, 3rem); }

.cards-sobre { 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    gap: clamp(1rem, 2vw, 2rem); 
    margin: 0 auto; 
    width: 100%;
}

.inner-card { 
    flex: 0 1 300px !important; /* Largura controlada */
    width: 100%; 
    
    /* UNIFICAÇÃO DO FORMATO PORTRAIT (3x4) */
    /* Calculamos 3:4 e reduzimos 25% da altura final para não ser tão longo */
    aspect-ratio: 3 / 3.3 !important; 
    
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    border: none; 
    padding: clamp(1rem, 2vw, 2.5rem) !important; 
    background-color: rgba(255, 255, 255, 0.15) !important; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

.inner-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.inner-card h3 { color: var(--color-secondary); text-transform: uppercase; font-weight: 800 !important; letter-spacing: 0.05rem; margin-bottom: 0.6rem; text-align: center; }
.inner-card p { font-size: clamp(0.7rem, 0.85vw, 1rem) !important; line-height: 1.45; color: var(--color-text); margin-bottom: 0 !important; }

.box-chamada { margin-top: clamp(1.5rem, 3vw, 4rem) !important; }
.box-chamada p { font-size: clamp(0.8rem, 1vw, 1.2rem) !important; text-align: center !important; font-weight: 600; color: var(--color-text-dark); line-height: 1.5 !important; letter-spacing: 0 !important; }
.box-chamada p strong { display: block; margin-top: 1.5vw; color: var(--color-secondary); font-size: clamp(1.2rem, 2.2vw, 2.5rem) !important; font-weight: 800; text-transform: uppercase; letter-spacing: -0.05rem; line-height: 1.2 !important; }

@media (max-width: 991.98px) { 
    .cards-sobre { flex-direction: column; align-items: center; } 
    .inner-card { 
        flex: 1 1 auto !important;
        max-width: 90% !important; 
        aspect-ratio: auto !important; /* No mobile, deixamos o conteúdo ditar a altura */
        min-height: 300px;
        margin-bottom: 1.5rem;
    } 
}

/* ==========================================================================
   08. SECTION: CONTATO E FOOTER 
   ========================================================================== */
.contact { padding: clamp(2rem, 4vw, 5rem) 0; text-align: center; background-color: var(--color-white); }
.contact__icons { display: flex; justify-content: center; gap: clamp(1rem, 2vw, 2rem); margin-top: 2vw; }
.contact__icon-link { display: inline-block; will-change: transform; transition: transform 0.3s ease, filter 0.3s ease; }
.contact__icon-link:hover { animation: bounceHover 0.6s ease-in-out; transform: scale(1.15); filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.15)); }
.contact__icon-link svg { width: clamp(30px, 4vw, 50px); height: clamp(30px, 4vw, 50px); fill: currentColor; stroke: currentColor; }
.contact__icon-link svg path { stroke-dasharray: 150; stroke-dashoffset: 150; fill-opacity: 0; stroke-opacity: 1; }

.icon-animate-1, .icon-animate-2, .icon-animate-3 { opacity: 0; }
.in-view .icon-animate-1 { animation: iconFadeInUp 0.6s ease-out forwards; }
.in-view .icon-animate-2 { animation: iconFadeInUp 0.6s ease-out 0.2s forwards; }
.in-view .icon-animate-3 { animation: iconFadeInUp 0.6s ease-out 0.4s forwards; }
.in-view .icon-animate-1 svg path { animation: svgDraw 1s ease-out forwards, svgFill 0.4s 1s ease-out forwards; }
.in-view .icon-animate-2 svg path { animation: svgDraw 1s ease-out 0.2s forwards, svgFill 0.4s 1.2s ease-out forwards; }
.in-view .icon-animate-3 svg path { animation: svgDraw 1s ease-out 0.4s forwards, svgFill 0.4s 1.4s ease-out forwards; }

.footer { padding: clamp(1.5rem, 3vw, 4rem) 0; background-color: #111; color: var(--color-white); text-align: center; position: relative; overflow: hidden; }
.footer__links { margin-bottom: 2vw; }
.footer__links a { color: var(--color-secondary); text-decoration: none; margin: 0 1vw; font-size: clamp(0.7rem, 0.9vw, 1rem); transition: color 0.3s; }
.footer__links a:hover { color: var(--color-white); }
.footer__copyright { font-size: clamp(0.6rem, 0.8vw, 0.9rem) !important; color: var(--color-secondary); padding-top: 2vw; text-align: center !important; position: relative; }
.footer__copyright::before { content: ""; position: absolute; top: 0; left: -100%; width: 300%; height: 1px; background-color: #333; }

/* ==========================================================================
   09. ANIMAÇÕES
   ========================================================================== */
@keyframes moveInLeft { 0% { opacity: 0; transform: translateX(-10rem); } 80% { transform: translateX(1rem); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes moveInBottom { from { opacity: 0; transform: translateY(3rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes iconFadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes svgDraw { to { stroke-dashoffset: 0; } }
@keyframes svgFill { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes bounceHover { 0% { transform: translateY(0) scale(1.15); } 50% { transform: translateY(-15px) scale(1.15); } 100% { transform: translateY(0) scale(1.15); } }

/* ==========================================================================
   10. AJUSTE FINO PARA MONITORES ULTRAWIDE (ACIMA DE 2500px)
   ========================================================================== */
@media (min-width: 2500px) {
    .container, 
    .container-fluid.servicos-content,
    #sobre > .container {
        max-width: 1920px !important; 
    }

    html {
        font-size: 105%; 
    }

    #inicio, #servicos, #diferenciais, #sobre, .contact {
        padding-top: 7rem !important;
        padding-bottom: 7rem !important;
    }

    .navigation__button {
        right: 5%;
    }
    .navigation__background {
        right: 5.5%;
    }

    /* PROPORÇÃO FOTO AGRUPADA (ULTRAWIDE) */
    .cards-sobre { 
        max-width: 1100px !important; /* Limita a largura do grupo para ficarem juntos */
        gap: 25px !important; /* Espaço pequeno e elegante entre eles */
    }

    .inner-card {
        flex: 1 1 320px !important;
        /* Mantém a proporção Portrait, mas com altura reduzida conforme pedido */
        aspect-ratio: 3 / 3.2 !important; 
    }
}