/* =========================================
   RESETS BÁSICOS E VARIÁVEIS
========================================= */

:root {
    --open-sans: 'DM Sans', sans-serif;
    --clr-cream: #e0e0c8;
    --clr-dark-blue: #1f296d;
    --clr-off-white: #FDFBF7;
    --clr-light-blue: #0353a4;
    --clr-dark-blue: #002855;
    --clr-yellow: #f8e007;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; 
}

body {
    font-family: var(--open-sans);
    color: #333;
    line-height: 1.6;
}

h1 {
    font-size: clamp(2rem, 5vw + 1rem, 3.5rem); /* Tamanho de fonte fluido */
    line-height: 1.2;
    font-weight: 700;
    color: var(--clr-off-white);
}

h2 {
    font-size: clamp(1.5rem, 3vw + 1rem, 2.5rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

h3 {
    font-size: clamp(1.125rem, 1.5vw + 0.7rem, 1.25rem);
    line-height: 1.3;
    font-weight: 600;
}

p, span, a {
    font-size: clamp(1rem, 1vw + 0.8rem, 1.125rem);
    line-height: 1.6;
    font-weight: 500;
    text-align: left;
}

img {
    width: 100%;
    object-fit: cover;
    object-position: center;   
}

a {
    text-decoration: none;
    color: #333;
    font-weight: 400;
    transition: color 0.3s;
    overflow-wrap: break-word;
    hyphens: auto;
}

a:hover {
    color: #007BFF;
}


.btn {
    display: inline-block;
    padding: 12px 28px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s;
    text-align: center;
    background-color: var(--clr-yellow);
    color: black;
    overflow-wrap: break-word;
    hyphens: auto;
    margin: 0 auto;
}

.btn:hover {
    background-color: #0056b3;
}


/* =========================================
   ESTRUTURA GERAL DAS SEÇÕES (MOBILE FIRST)
========================================= */
.section {
    /* O padding superior é maior (90px) para que o conteúdo não fique escondido sob a navbar fixa de 70px */
    padding: 90px 1.5rem 3rem 1.5rem; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem; /* Espaçamento padrão entre os elementos dentro da seção */
}

.bold {
    font-weight: 700;
}

.center {
    display: block;
    text-align: center;
}

@media (min-width: 768px) {
    .section {
        padding: 110px 3rem 4rem 3rem; 
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .section {
        padding: 130px 10% 5rem 10%; 
        gap: 2rem;
    }
}


/* =========================================
   NAVEGAÇÃO (NAV)
========================================= */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    z-index: 1000;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .navbar {
        padding: 0 3rem;
    }
}

@media (min-width: 1024px) {
    .navbar {
        padding: 0 5rem;
    }
}

/* =========================================
   MENU HAMBÚRGUER E MODO MOBILE
========================================= */

.hamburger {
    display: none; 
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001; 
}

.hamburger .bar {
    width: 100%;
    height: 3px;
    background-color: #333;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* A classe .mobile-mode será injetada dinamicamente pelo JS 
  quando os itens não couberem mais na tela.
*/
.navbar.mobile-mode .hamburger {
    display: flex;
}

.navbar.mobile-mode .nav-links {
    display: none; /* Oculta os links em linha */
    position: absolute;
    top: 70px; /* Altura da navbar */
    left: 0;
    width: 100%;
    background-color: #ffffff;
    flex-direction: column;
    padding: 2rem 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: center;
}

/* Classe ativada ao clicar no botão hambúrguer */
.navbar.mobile-mode .nav-links.active {
    display: flex;
}

.navbar.mobile-mode .nav-links li {
    margin: 15px 0;
}

/* Animação do botão hambúrguer virando um 'X' */
.hamburger.active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* =========================================
   LOGO 
========================================= */
.logo-main {
    font-family: var(--open-sans);
    font-weight: 600;
    font-size: 18px;
}

.logo-crp {
    font-family: var(--open-sans);
    font-weight: 400;
    font-size: 14px;
}

/* =========================================
   SECAO HERO 
========================================= */

#hero {
    background-image: url('data:image/svg+xml,<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="960" height="540" fill="%230466C8"></rect><path d="M0 374L22.8 375C45.7 376 91.3 378 137 385.7C182.7 393.3 228.3 406.7 274 391.8C319.7 377 365.3 334 411.2 315.5C457 297 503 303 548.8 309.3C594.7 315.7 640.3 322.3 686 322.5C731.7 322.7 777.3 316.3 823 310C868.7 303.7 914.3 297.3 937.2 294.2L960 291L960 541L937.2 541C914.3 541 868.7 541 823 541C777.3 541 731.7 541 686 541C640.3 541 594.7 541 548.8 541C503 541 457 541 411.2 541C365.3 541 319.7 541 274 541C228.3 541 182.7 541 137 541C91.3 541 45.7 541 22.8 541L0 541Z" fill="%23002855" stroke-linecap="round" stroke-linejoin="miter"></path></svg>'); 
    background-size: cover; /* Faz o símbolo caber no espaço */
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.hero-container {
    display: grid;
    gap: 3rem;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding: 0 15px 0 15px;
}

.hero-img-placeholder {
    display: grid;
    justify-content: center;
    align-items: center;
    border-radius: 25%;
    width: 350px;
    height: 350px;
    justify-self: center;
    overflow: hidden;
}

.hero-content {
    display: grid;
    gap: 3rem;
    /*max-width: 390px;*/
}



@media (min-width: 1024px) {
    .hero-container {
        grid-template-columns: 45fr 55fr;
        gap: 2rem;
    }

    .hero-content {
        text-align: left;
        justify-self: start;
        order: -1;
    }

    .hero-img-placeholder {
        justify-self: end;
    }
}

/* =========================================
    SECAO SINTOMAS 
========================================= */
#sintomas {
    background-color: var(--clr-dark-blue);
}

#sintomas h2 {
    color: var(--clr-off-white);
}


/* =========================================
    SWIPER 
========================================= */
.swiper-placeholder {
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Espaço entre os cards e as bolinhas */
}

.swiper-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem; /* Espaçamento entre os botões e a janela de cards */
}

.swiper-btn {
    background-color: #ffffff;
    color: var(--clr-dark-blue);
    border: 2px solid var(--clr-dark-blue);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0; /* Impede que o botão seja espremido */
}

.swiper-btn:hover {
    background-color: var(--clr-dark-blue);

    color: #ffffff; 
}

.swiper-btn:disabled {
    border-color: #ccc;
    color: #ccc;
    cursor: not-allowed;
    background-color: transparent;
}

.swiper-window {
    overflow: hidden;
    width: 100%;
    padding: 10px 0;
}

.swiper-track {
    display: flex;
    gap: 1.5rem; /* Espaço entre um card e outro */
    transition: transform 0.4s ease-in-out;
}

.card {
    background-color: #fff;
    padding: 2rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: left;
    /* Padrão Mobile: 1 Card visível ocupando 100% do espaço (descontando o gap) */
    flex: 0 0 100%; 
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.icon {
    margin: 1rem auto;
    width: 60px;
    height: 60px;
    object-fit: contain;
    fill: var(--clr-yellow);
    stroke: black;
}

@media (min-width: 768px) {
    .swiper-main-row {
        gap: 2rem;
    }   

    .card {
        flex: 0 0 calc(50% - 0.75rem);
    }
}

@media (min-width: 1024px) {
    .card {
        flex: 0 0 calc(33.333% - 1rem);
    }
}

/* =========================================
    SECAO SOBRE 
========================================= */
#sobre {
    background-image: url('data:image/svg+xml,<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 141L26.7 133C53.3 125 106.7 109 160 105.5C213.3 102 266.7 111 320 117.3C373.3 123.7 426.7 127.3 480 129.2C533.3 131 586.7 131 640 123.7C693.3 116.3 746.7 101.7 800 97.2C853.3 92.7 906.7 98.3 933.3 101.2L960 104L960 0L933.3 0C906.7 0 853.3 0 800 0C746.7 0 693.3 0 640 0C586.7 0 533.3 0 480 0C426.7 0 373.3 0 320 0C266.7 0 213.3 0 160 0C106.7 0 53.3 0 26.7 0L0 0Z" fill="%23002855"></path><path d="M0 212L26.7 204.7C53.3 197.3 106.7 182.7 160 178.2C213.3 173.7 266.7 179.3 320 189.3C373.3 199.3 426.7 213.7 480 216.3C533.3 219 586.7 210 640 201C693.3 192 746.7 183 800 183.8C853.3 184.7 906.7 195.3 933.3 200.7L960 206L960 102L933.3 99.2C906.7 96.3 853.3 90.7 800 95.2C746.7 99.7 693.3 114.3 640 121.7C586.7 129 533.3 129 480 127.2C426.7 125.3 373.3 121.7 320 115.3C266.7 109 213.3 100 160 103.5C106.7 107 53.3 123 26.7 131L0 139Z" fill="%2301366e"></path><path d="M0 384L26.7 375C53.3 366 106.7 348 160 345.3C213.3 342.7 266.7 355.3 320 370.7C373.3 386 426.7 404 480 413C533.3 422 586.7 422 640 405.8C693.3 389.7 746.7 357.3 800 355.5C853.3 353.7 906.7 382.3 933.3 396.7L960 411L960 204L933.3 198.7C906.7 193.3 853.3 182.7 800 181.8C746.7 181 693.3 190 640 199C586.7 208 533.3 217 480 214.3C426.7 211.7 373.3 197.3 320 187.3C266.7 177.3 213.3 171.7 160 176.2C106.7 180.7 53.3 195.3 26.7 202.7L0 210Z" fill="%23014488"></path><path d="M0 541L26.7 541C53.3 541 106.7 541 160 541C213.3 541 266.7 541 320 541C373.3 541 426.7 541 480 541C533.3 541 586.7 541 640 541C693.3 541 746.7 541 800 541C853.3 541 906.7 541 933.3 541L960 541L960 409L933.3 394.7C906.7 380.3 853.3 351.7 800 353.5C746.7 355.3 693.3 387.7 640 403.8C586.7 420 533.3 420 480 411C426.7 402 373.3 384 320 368.7C266.7 353.3 213.3 340.7 160 343.3C106.7 346 53.3 364 26.7 373L0 382Z" fill="%230353a4"></path></svg>'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    color: var(--clr-off-white);
}

.sobre-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    place-items: center;
    text-align: center;
    width: 100%;
}

.sobre-content {
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
    background-color: #1f296daf;
    border-radius: 10px;
}

.sobre-img-placeholder {
    width: 300px;
    height: 400px;
    background-color: #ddd;
    border: 4px solid #fff;
    border-radius: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    overflow: hidden;

}

@media (min-width: 1024px) {
    .sobre-container {
        grid-template-columns: 55fr 45fr;
        align-items: center;
        justify-items: start;
    }

    .sobre-img-placeholder {
        width: 400px;
        height: 500px;
        justify-self: center;
    }
}


/* =========================================
    SECAO ABORDAGEM 
========================================= */
#abordagem {
    background-color: var(--clr-light-blue);
}

.abordagem-content {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 1rem;
    background-color: #FDFBF7AA;
    color: black;
    border-radius: 10px;
    box-shadow: 10px 10px 10px -3px rgba(0, 0, 0, 0.275);
    width: 100%;
}

/* =========================================
    SECAO DUVIDAS 
========================================= */
#duvidas {
    background-color: var(--clr-light-blue);
}

.duvidas-content {
    display: flex;
    flex-direction: column;
    background-color: var(--clr-dark-blue);
    border-radius: 10px;
    gap: 1.1rem;
    padding: 1.5rem;
    box-shadow: 10px 10px 10px -3px rgba(0, 0, 0, 0.275);
    color: var(--clr-off-white);
    width: 100%;
}

.duvidas-btn-container {
    margin: 20px auto;
}

.duvidas-content h2 {
    color: var(--clr-yellow);
}


/* =========================================
    SECAO DUVIDAS 
========================================= */
#contato {
    background-color: var(--clr-dark-blue);
    color: var(--clr-off-white);
}

.instagram {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.whatsapp {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.ph-instagram-logo {
    width: 24px;
    height: 24px;
    fill: #E1306C;
}

.ph-whatsapp-logo {
    width: 24px;
    height: 24px;
    fill: #25d366;
}