/* =========================================================================
   Tema exclusivo da home (index.html) — carrega DEPOIS de style.css e o
   sobrescreve de propósito: hero escuro com brilho radial, botões em verde
   WhatsApp, ajustes de layout específicos da home (seção "Sobre" em tela
   cheia no desktop) e refinamentos de fonte/CLS só usados aqui.
   ========================================================================= */

@font-face {
    font-family: 'Outfit';
    src: url('/assets/fonts/outfit/woff2/Outfit-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: optional;
}
@font-face {
    font-family: 'Outfit';
    src: url('/assets/fonts/outfit/woff2/Outfit-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: optional;
}

@media (max-width: 768px) {
    .hero-image-wrapper { aspect-ratio: 651 / 814; }
    .hero-image-wrapper img { height: 100%; }
}

:root {
    --primary:        #1F4E8B;
    --primary-dark:   #1C1A1D;
    --primary-light:  #4FA3E0;
    --secondary:      #EEF2F6;
    --accent:         #1F4E8B;
    --accent-dark:    #2F6FB0;
    --accent-soft:    #E8F0FA;

    --background:     #F6F9FB;
    --text:           #2E3742;
    --text-muted:     #5B6672;

    --color-bg-soft: #EEF2F6;
    --color-border: #DCE4EA;

    --bg-lavender: #EEF2F6;
    --bg-mint:     #E8F0FA;
    --bg-beige:    #EDF1F5;
    --bg-gray:     #EDF0F3;
}

/* Hero escuro com brilho radial azul, como no site do Centro Médico */
@keyframes cme-glow-pulse {
    0%, 100% { opacity: 0.45; transform: scale(1) translate(0, 0); }
    50%      { opacity: 0.62; transform: scale(1.06) translate(-8px, 6px); }
}
.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 900px 600px at 78% 20%, rgba(31,78,139,.35), transparent 60%),
        linear-gradient(160deg, #141316 0%, #1c1a1d 60%, #17161a 100%);
    color: #fdfbf9;
}
.hero::before {
    content: ""; position: absolute; top: -120px; right: -60px;
    width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(47,111,176,.45), transparent 70%);
    filter: blur(10px);
    animation: cme-glow-pulse 10s ease-in-out infinite;
    will-change: transform, opacity;
}
.hero::after {
    content: ""; position: absolute; bottom: -160px; left: -100px;
    width: 360px; height: 360px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%);
    filter: blur(10px);
}
.hero-container { position: relative; z-index: 1; }
.hero-badge { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: #c9dcf2; }
.hero-title { color: #fdfbf9; }
.hero-title span { color: #4fa3e0; }
.hero-subtitle { color: #c5cdd6; }
.hero-crm { color: #c5cdd6; margin-top: .6rem; font-size: .9rem; }

/* Ajustes de desktop: hero na primeira dobra, colunas e botões do mesmo tamanho.
   No mobile (abaixo de 769px) o layout volta ao padrão do CSS base: coluna única. */
@media (min-width: 769px) {
    /* Layout dirigido pela largura do container (não pela altura da viewport),
       para manter sempre a mesma proporção no desktop, em qualquer resolução. */
    .hero { overflow: hidden; height: calc(100vh - 73px); height: calc(100svh - 73px); padding: 4.5rem 0; }
    .hero-container { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 6vw, 90px); align-items: center; }
    .hero-content { max-width: none; padding-right: .5rem; }
    .hero-title { font-size: clamp(2.1rem, 1.3rem + 2vw, 3.4rem); }
    .hero-image-wrapper { width: 100%; max-width: 460px; max-height: none; margin: 0 0 0 auto; }
    .hero-actions .btn { flex: 1 1 0; text-align: center; }

    /* Seção "Sobre" também cabendo na tela no desktop */
    #sobre-resumo { min-height: 100vh; display: flex; align-items: center; padding: 3rem 0; }
    #sobre-resumo .split { grid-template-columns: auto 1fr; gap: 32px; }
    #sobre-resumo .split-image { max-height: min(70vh, 620px); }
}

/* "Ver formação completa" em width:100% no mobile */
@media (max-width: 768px) {
    #sobre-resumo .btn-primary { width: 100%; }
}

/* Botão flutuante do WhatsApp em verde, como os demais botões de WhatsApp da página */
.fab-contato { background-color: #25D366; }
.fab-contato:hover { background-color: #1DA851; }

/* Badges clicáveis dos telefones fixos (Localização) */
.phone-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.phone-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1px solid var(--color-border); background: var(--color-bg-soft);
    color: var(--primary-dark); padding: .4rem .9rem; border-radius: 100px;
    font-size: .88rem; font-weight: 500; transition: all .2s ease;
}
.phone-badge:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--white); }

/* Botão "Agendar no WhatsApp" no card Atendimento: verde do WhatsApp para contraste */
.atendimento-actions .btn { background-color: #0E7A3B; color: #fff; box-shadow: 0 10px 24px rgba(37,211,102,.28); }
.atendimento-actions .btn:hover { background-color: #0A5C2C; }

/* Cards de convênio: um botão "Agendar consulta" por convênio, em verde WhatsApp */
.convenio-card { text-align: center; display: flex; flex-direction: column; align-items: center; }
.convenio-card h3 { margin-bottom: .3rem; }
.convenio-card p { color: var(--text-muted); margin-bottom: 1.2rem; }
.convenio-card .btn { background-color: var(--accent); color: #fff; box-shadow: 0 10px 24px rgba(31,78,139,.28); margin-top: auto; }
.convenio-card .btn:hover { background-color: var(--accent-dark); }

/* Footer com 3 colunas equilibradas: marca, institucional, contato */
@media (min-width: 769px) {
    .footer-container { grid-template-columns: minmax(240px, 1.1fr) minmax(180px, .8fr) minmax(220px, .9fr); }
}
.footer-links-group .footer-local { margin-top: 0; }
.footer-phone-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.footer-phone-badge {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.85); padding: .4rem .8rem; border-radius: 100px;
    font-size: .8rem; font-weight: 500; transition: all .2s ease;
    min-width: 142px;
}
.footer-phone-badge:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.12); color: #fff; }
.footer a.footer-phone-badge-whatsapp { background: #0E7A3B; border-color: #0E7A3B; color: #fff; }
.footer a.footer-phone-badge-whatsapp:hover { background: #0A5C2C; border-color: #0A5C2C; color: #fff; }

/* Botão único "Agendar no WhatsApp" na CTA final: proporcional ao texto, em verde WhatsApp */
.band .hero-actions .btn {
    width: auto !important; flex: 0 0 auto;
    padding: .95rem 2.2rem; font-size: 1rem;
    background-color: #0E7A3B; color: #fff; box-shadow: 0 10px 24px rgba(37,211,102,.28);
}
.band .hero-actions .btn:hover { background-color: #0A5C2C; }

/* "Ver formação completa" (Sobre): hover em azul, em vez do --primary-dark (quase preto) */
#sobre-resumo .btn-primary:hover { background-color: var(--accent-dark); box-shadow: 0 14px 34px rgba(47,111,176,.30); }