/* ===================================
   IMPORTS
=================================== */
@import url('https://fonts.googleapis.com/css?family=Poppins:wght@400;500;600&display=swap');

/* ===================================
   RESET & BASE
=================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

h1, h2, h5, h6 {
    font-weight: bold;
}

h1 { font-size: 40px; }
h2 { font-size: 32px; }
h5 {
    font-size: 20px;
    margin-top: 50px;
    margin-bottom: 5px;
    color: var(--cor-principal);
    padding-right: 30px;
}

h1, p {
    margin-top: 10px;
    color: var(--cor-branco);
}

/* ===================================
   VARIÁVEIS
=================================== */
:root {
    --cor-branco: #ffffff;
    --cor-principal: #534937;
    --cor-secundaria: #93805e;
    --cor-feedback: #534937;
}

/* ===================================
   NAVBAR
=================================== */
.marrom {
    color: var(--cor-principal);
}

.navbar-light .navbar-nav .nav-link {
    color: var(--cor-principal);
    padding-right: 30px;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: var(--cor-secundaria);
}

.navbar-light .navbar-nav .btn,
p a {
    color: var(--cor-branco);
    background-color: var(--cor-principal);
    border-radius: 25px;
}

.navbar-light .navbar-nav .btn:hover,
p a:hover {
    color: var(--cor-branco);
    background-color: var(--cor-secundaria);
}

/* ===================================
   HOME
=================================== */
#home {
    position: relative;
    width: 100%;
    height: 80vh;
    min-height: 550px;
    display: flex;
    align-items: center;
    background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(../img/clinica.png);
    background-size: cover;
    background-position: center;
    padding: 15px 0;
}

#home .container { height: 100%; }
#home .row { height: 100%; }

#home h2 {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    margin-top: 35px;
    margin-bottom: 5px;
    color: var(--cor-branco);
    padding-right: 30px;
    text-shadow: 2px 4px 5px black;
}

.btn-block {
    border-radius: 25px;
}

#perfil {
    width: 35vw;
    max-width: 325px;
    min-width: 155px;
    height: auto;
    position: absolute;
    bottom: 0;
    right: 5%;
    z-index: 2;
    transition: width 0.3s ease;
}

.image-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    overflow: visible;
}

/* ===================================
   SEÇÕES - Títulos e Parágrafos Comuns
=================================== */
#procedimento h2,
#qualidade h2,
#sobre h2,
#feedback h2,
#formulario h2 {
    margin: 50px 0 25px 20px;
    font-size: 2.5em;
    font-family: 'Raleway';
}

#procedimento h2 {
    color: var(--cor-principal);
}

#procedimento p,
#qualidade p,
#sobre p,
#feedback p,
#formulario p {
    margin: 0 20px 25px 20px;
    line-height: 1.6;
}

.procedimento h3,
.procedimento p {
    margin-left: 20px;
}

/* ===================================
   PROCEDIMENTOS (LUXO)
=================================== */
.procedimento-luxo {
    background-color: var(--cor-branco);
}

.procedimento-luxo .section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.8rem;
    font-weight: 600;
    color: var(--cor-principal);
    margin-bottom: 60px;
    position: relative;
}

.procedimento-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.procedimento-item.reverse {
    flex-direction: row-reverse;
}

.procedimento-item .imagem {
    flex: 1;
    padding: 10px;
    text-align: center;
}

.procedimento-item .imagem img {
    width: 48%;
    border-radius: 8px;
}

.procedimento-item .descricao {
    flex: 1;
    max-width: 48%;
    padding: 10px;
    text-align: center;
}

.procedimento-item .descricao h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    color: var(--cor-secundaria);
    margin-bottom: 15px;
}

.procedimento-item .descricao p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444;
}

/* ===================================
   SOBRE
=================================== */
#sobre {
    padding: 60px 20px;
}

#doutor {
    color: var(--cor-principal);
    font-size: 2.5rem;
    letter-spacing: -0.5px;
    margin-left: 20px;
}

#crm {
    color: var(--cor-secundaria);
    font-size: 1.1rem;
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
    margin-left: 20px;
}

#crm::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--cor-principal);
}

.foto-no-escritorio {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0 auto;
    display: block;
}

.biografia {
    background: var(--cor-principal);
    color: #fff;
    line-height: 1.7;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 6px !important;
}

.biografia p {
    margin: 0 20px 1.5rem;
    font-size: 14px;
}

.biografia p:last-child {
    margin-bottom: 0;
}

/* ===================================
   INSTITUIÇÕES
=================================== */
.instituicoes {
    margin-top: -50px;
}

.logos-parceiros {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.logo-item {
    flex: 0 1 160px;
    text-align: center;
    padding: 15px;
    transition: transform 0.3s ease;
}

.logo-instituicao {
    max-width: 100%;
    height: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
    object-fit: contain;
}

.logo-item:hover .logo-instituicao {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Ajuste específico para UNICAMP */
.logos-parceiros .logo-item:first-child .logo-instituicao {
    padding: 10px;
    max-height: 80px;
}

/* ===================================
   QUALIDADE
=================================== */
.qualidade h2 {
    margin: 50px 0 5px 20px;
    color: var(--cor-principal);
}

.qualidade p {
    color: #000;
    margin: 0 30px 50px 20px;
}

.numero-animado {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s, transform 0.5s;
    margin: 20px 0;
}

.numero-animado.visible {
    opacity: 1;
    transform: translateY(0);
}

.flex-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

#qualidade .flex-container {
    justify-content: space-between;
    flex-wrap: nowrap;
}

#qualidade .col-sm-4 {
    flex: 1;
    min-width: 0;
    padding: 20px;
    text-align: left;
}

#qualidade .col-sm-4 h5 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 15px;
}

#qualidade .col-sm-4 p {
    margin: 0;
    text-align: left;
}

/* Ícones nos títulos h5 (qualidade) */
h5 i {
    font-size: 1.2em;
    color: var(--cor-principal);
    width: 25px;
    margin: 5px;
    text-align: center;
}

/* ===================================
   FEEDBACK
=================================== */
#feedback {
    width: 100%;
    overflow-x: hidden;
    background: var(--cor-secundaria);
    padding: 0 20px 25px;
}

.feedback h2,
.formulario h2 {
    margin: 30px 0 0 20px;
    color: var(--cor-feedback);
}

.opniao {
    background: var(--cor-branco);
    margin: 0;
    border-radius: 25px;
    width: 100%;
    max-width: 300px;
    padding: 15px;
    box-sizing: border-box;
}

.opniao p,
#formulario p {
    color: #000;
    padding: 0 10px;
    word-wrap: break-word;
    font-size: 14px;
}

.avaliacao {
    margin-top: 15px;
}

/* Ícones de estrela */
.avaliacao .fa-star {
    color: #f5a623;
    font-size: 14px;
    margin-right: 1px;
}

.logo-google {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 6px;
}

.autor {
    float: right;
}

/* ===================================
   FORMULÁRIO
=================================== */
#formulario {
    background: var(--cor-branco);
}

input[type="radio"] {
    accent-color: var(--cor-principal);
}

.formulario .btn:hover,
#formulario .btn:hover {
    background: #6e592e;
    transform: scale(1.05) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
}

#formulario .btn {
    border-radius: 50px;
    padding: 0.95em 1.9em !important;
    font-size: 1.03em !important;
    letter-spacing: 0.3px;
}

#formulario .btn i {
    font-size: 1.2em;
    margin-right: 6px;
    vertical-align: middle;
}

/* ===================================
   RODAPÉ
=================================== */
footer {
    background: #000;
    padding: 20px 0;
    position: relative;
    text-align: center;
}

footer .navbar-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

footer .navbar-nav a {
    color: var(--cor-branco);
    font-size: 0.8em;
    text-align: center;
}

footer .navbar-nav a:hover {
    text-decoration: none;
}

footer ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
}

footer ul li {
    margin: 0 3px;
    display: inline-block;
}

/* Ícones sociais no rodapé */
footer .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 1.1em;
    transition: background 0.3s, border-color 0.3s;
}

footer .social-icon:hover {
    background: var(--cor-principal);
    border-color: var(--cor-principal);
    text-decoration: none;
}

/* ===================================
   TIPOGRAFIA RESPONSIVA
=================================== */
@media (max-width: 768px) {
    h1 { font-size: 32px; }
    h2 { font-size: 26px; }
    h5 { font-size: 18px; }
    p, .description { font-size: 12px; }
}

@media (max-width: 576px) {
    h1 { font-size: 28px; }
    h2 { font-size: 22px; }
    h5 { font-size: 16px; }
    p, .description { font-size: 11px; }
}

@media (max-width: 400px) {
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    p, .description { font-size: 10px; }
}

/* ===================================
   RESPONSIVO — SEÇÕES (títulos)
=================================== */
@media (max-width: 1200px) {
    #procedimento h2,
    #qualidade h2,
    #sobre h2,
    #feedback h2,
    #formulario h2 {
        font-size: 2.3em;
        margin: 45px 0 22px 20px;
    }
}

@media (max-width: 768px) {
    #procedimento h2,
    #qualidade h2,
    #sobre h2,
    #feedback h2,
    #formulario h2 {
        font-size: 1.8em;
        margin-bottom: 15px;
    }

    #procedimento p,
    #qualidade p,
    #sobre p,
    #feedback p,
    #formulario p {
        margin: 0 20px 20px;
        font-size: 0.95em;
    }
}

@media (max-width: 600px) {
    #procedimento h2,
    #qualidade h2,
    #sobre h2,
    #feedback h2,
    #formulario h2 {
        font-size: 1.7em;
        margin: 30px 0 15px 20px;
    }
}

@media (max-width: 576px) {
    #procedimento h2,
    #qualidade h2,
    #sobre h2,
    #feedback h2,
    #formulario h2 {
        font-size: 1.5em;
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    #procedimento h2,
    #qualidade h2,
    #sobre h2,
    #feedback h2,
    #formulario h2 {
        font-size: 1.5em;
        margin: 25px 0 12px 20px;
    }
}

@media (max-width: 400px) {
    #procedimento h2,
    #qualidade h2,
    #sobre h2,
    #feedback h2,
    #formulario h2 {
        font-size: 1.2em;
        margin-bottom: 8px;
    }
}

@media (max-width: 375px) {
    #procedimento h2,
    #qualidade h2,
    #sobre h2,
    #feedback h2,
    #formulario h2 {
        font-size: 1.3em;
        margin: 20px 0 10px 15px;
    }
}

@media (max-width: 320px) {
    #procedimento h2,
    #qualidade h2,
    #sobre h2,
    #feedback h2,
    #formulario h2 {
        font-size: 1.2em;
        margin: 15px 0 8px 10px;
    }
}

/* ===================================
   RESPONSIVO — QUALIDADE
=================================== */
@media (max-width: 768px) {
    #qualidade .flex-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start;
        justify-content: flex-start;
        padding-left: 20px;
        margin: 0;
        gap: 5px !important;
    }

    #qualidade .col-sm-4 {
        flex: none;
        width: 100%;
        max-width: none;
        margin: 0 !important;
        padding: 10px 0 !important;
        text-align: left;
        padding-left: 0;
        transform: scale(0.98);
    }

    #qualidade .col-sm-4 h5 {
        justify-content: flex-start;
        margin-left: 0;
    }

    #qualidade .col-sm-4 p {
        text-align: left;
        margin-left: 0;
    }

    #qualidade h5,
    #qualidade p {
        margin: 0 !important;
        padding: 5px 15px !important;
    }

    #qualidade h5 i { margin-right: 5px !important; }
}

/* ===================================
   RESPONSIVO — SOBRE / CRM / BIOGRAFIA
=================================== */
@media (max-width: 992px) {
    #sobre .biografia p {
        font-size: 15px;
        line-height: 1.6;
    }
}

@media (max-width: 768px) {
    #doutor { font-size: 2rem; }
    #crm { font-size: 1rem; }
    .biografia { padding: 20px; }
    #doutor, #crm { margin-left: 15px; }
    .biografia p { margin-left: 15px; }

    #sobre .biografia p {
        font-size: 14px;
        line-height: 1.5;
        margin: 0 15px 1rem !important;
    }
}

@media (max-width: 576px) {
    #sobre .biografia p {
        font-size: 13px;
        line-height: 1.4;
        margin: 0 10px 0.8rem !important;
    }
}

@media (max-width: 400px) {
    #sobre .biografia p {
        font-size: 12px;
        line-height: 1.3;
    }
}

/* ===================================
   RESPONSIVO — FORMULÁRIO
=================================== */
#formulario p { font-size: 18px; }
#formulario .btn { font-size: 16px; }

@media (max-width: 768px) {
    #formulario h2  { font-size: 20px !important; }
    #formulario p   { font-size: 15px !important; line-height: 1.5 !important; }
    #formulario .btn { font-size: 14px !important; padding: 8px 20px !important; }
}

@media (max-width: 576px) {
    #formulario h2  { font-size: 18px !important; }
    #formulario p   { font-size: 13px !important; margin-bottom: 15px !important; }
    #formulario .btn { font-size: 13px !important; padding: 6px 16px !important; }

    .opniao p { font-size: 11px !important; line-height: 1.2; }
}

@media (max-width: 400px) {
    #formulario p   { font-size: 12px !important; line-height: 1.4 !important; }
    #formulario .btn { font-size: 12px !important; }
}

/* ===================================
   RESPONSIVO — FEEDBACK / OPNIAO
=================================== */
@media (max-width: 768px) {
    .opniao {
        max-width: 100%;
        margin: 0 10px 20px;
    }

    .flex-container { padding: 0 10px; }

    .qualidade {
        margin-bottom: 30px;
        width: 100%;
    }

    #feedback, #formulario { padding: 0 15px; }

    .feedback h2, .formulario h2 { margin-left: 15px; }
    .qualidade h2, .qualidade p { margin-left: 15px; }

    .opniao {
        margin-left: 15px;
        width: calc(100% - 25px);
    }
}

@media (max-width: 576px) {
    .opniao {
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 20px;
        width: calc(100% - 20px);
    }

    #feedback, #formulario { padding: 0 10px; }
    .feedback h2, .formulario h2 { margin-left: 10px; }
    .qualidade h2, .qualidade p { margin-left: 10px; }
}

@media (max-width: 600px) {
    .opniao { margin: 0 10px 20px; }
}

@media (max-width: 480px) {
    .opniao { margin: 0 5px 15px; }
}

@media (max-width: 375px) {
    .opniao { margin: 0 5px 10px; padding: 10px; }
}

@media (max-width: 320px) {
    .opniao { margin: 0 5px 8px; padding: 8px; }
}

/* ===================================
   RESPONSIVO — RODAPÉ
=================================== */
@media (max-width: 992px) {
    footer .navbar-nav {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    footer .navbar-nav a {
        padding: 0.5rem 1rem;
        text-align: center;
    }
}

@media (max-width: 768px) {
    footer { padding: 15px 0; text-align: center; }

    footer .navbar-nav {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    footer ul {
        justify-content: center;
        padding: 0;
        margin-top: 15px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    footer ul li { float: none; display: inline-block; margin: 0 5px; }
}

@media (max-width: 576px) {
    footer { padding: 10px 0; }
    footer .navbar-nav { gap: 8px; }
    footer .navbar-nav a { font-size: 0.9em; padding: 0.3rem 0.5rem; }
    footer ul { gap: 8px; }
}

@media (max-width: 400px) {
    footer .navbar-nav a { font-size: 0.8em; padding: 0.2rem 0.4rem; }
    footer ul { gap: 5px; }
    footer ul li { margin: 0 3px; }
}

/* ===================================
   RESPONSIVO — LOGOS PARCEIROS
=================================== */
@media (max-width: 768px) {
    .logos-parceiros { gap: 20px; }
    .logo-item { flex-basis: 120px; padding: 10px; }

    .logos-parceiros .logo-item:first-child .logo-instituicao {
        max-height: 60px;
        padding: 8px;
    }
}

@media (max-width: 480px) {
    .logo-item { flex-basis: 100px; }
    .logos-parceiros .logo-item:first-child .logo-instituicao { max-height: 50px; }
}

/* ===================================
   RESPONSIVO — #PERFIL
=================================== */
@media (max-width: 992px) {
    #perfil { width: 260px; right: -20px; }
}

@media (max-width: 768px) {
    #perfil { width: 220px; right: 50%; transform: translateX(50%); }
}

@media (max-width: 576px) {
    #perfil { width: 180px; bottom: 20px; }
}

@media (max-width: 400px) {
    #perfil { width: 150px; min-width: 120px; }
}

/* ===================================
   RESPONSIVO — PROCEDIMENTOS
=================================== */
@media (max-width: 768px) {
    .procedimento-item,
    .procedimento-item.reverse { flex-direction: column; }

    .procedimento-item .imagem,
    .procedimento-item .descricao { max-width: 100%; }

    .procedimento-luxo .section-title { font-size: 2rem; }
}