@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Nunito+Sans:wght@400;600;700;800&display=swap');

/*
 * Site da nutricionista Eliane Guedes — "Nutrição Clínica & Esportiva".
 * Identidade visual ancorada na marca dela: a melancia (coração da logo) e a
 * linha de batimento cardíaco como assinatura.
 *   Melancia (polpa)  -> acentos e CTAs
 *   Folha (casca)     -> acentos secundários
 *   Teal profundo     -> texto
 *   Menta / creme     -> fundos
 * Tipografia: Fraunces (títulos) + Nunito Sans (corpo).
 */

:root {
    --melancia: #e14b5e;
    --melancia-escuro: #c8394c;
    --folha: #6fae55;
    --teal: #23444c;
    --teal-soft: #4a6a70;
    --muted: #6a8188;
    --menta: #eaf5f0;
    --menta-2: #def0e8;
    --creme: #fbfbf8;
    --branco: #ffffff;
    --borda: #e6efe9;
    --zap: #25d366;
    --heartbeat: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='74'%20height='16'%20viewBox='0%200%2074%2016'%3E%3Cpath%20d='M0%208H19l4-6%205%2012%204-9%203%203h36'%20fill='none'%20stroke='%23e14b5e'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

body {
    font-family: 'Nunito Sans', -apple-system, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--teal);
    line-height: 1.7;
    background: var(--creme);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    color: var(--teal);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

a { color: var(--melancia); }

.container {
    width: 90%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 68px 0;
}

/* ===== Botões ===== */
.btn-primary {
    background: var(--melancia);
    color: #fff;
    padding: 15px 32px;
    border: none;
    border-radius: 999px;
    text-decoration: none;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(225,75,94,0.28);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary:hover {
    background: var(--melancia-escuro);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(225,75,94,0.36);
}
.btn-small { padding: 11px 22px; font-size: 0.95rem; }

/* ===== Cabeçalho ===== */
.site-header {
    background: rgba(255,255,255,0.9);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--borda);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
}
.logo { margin: 0; line-height: 0; }
.logo a { text-decoration: none; }
.logo img { height: 54px; width: auto; display: block; }

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 26px;
}
.main-nav a {
    text-decoration: none;
    color: var(--teal);
    font-weight: 700;
    font-size: 0.98rem;
    position: relative;
    padding: 4px 0;
    transition: color .2s;
}
.main-nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 2px;
    background: var(--melancia);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
.main-nav a:hover { color: var(--melancia); }
.main-nav a:hover::after { transform: scaleX(1); }
.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--teal);
    cursor: pointer;
    padding: 4px 8px;
}

/* ===== Assinatura: linha de batimento sob os títulos de seção ===== */
.services h2, .reasons h2, .consultation h2, .faq h2,
.ebooks h2, .locations h2, .blog-hero h1, .article-faq h2 {
    text-align: center;
    margin: 0 auto 44px;
    font-size: clamp(1.7rem, 3.2vw, 2.3rem);
}
.services h2::after, .reasons h2::after, .consultation h2::after,
.faq h2::after, .ebooks h2::after, .locations h2::after,
.blog-hero h1::after, .article-faq h2::after,
.hero-text h1::after, .exam-text h2::after, .about h2::after {
    content: '';
    display: block;
    width: 74px;
    height: 16px;
    margin: 16px auto 0;
    background: var(--heartbeat) no-repeat center / contain;
}
.hero-text h1::after, .exam-text h2::after, .about h2::after { margin-left: 0; }

/* ===== Hero ===== */
.hero {
    background: linear-gradient(160deg, var(--menta) 0%, var(--menta-2) 55%, var(--creme) 100%);
    padding: 84px 20px;
    overflow: hidden;
}
.hero-grid {
    display: flex;
    align-items: center;
    gap: 56px;
    text-align: left;
}
.hero-text { flex: 1; min-width: 280px; }
.hero-text h1 {
    font-size: clamp(2.3rem, 5vw, 3.4rem);
    margin: 0 0 18px;
    font-weight: 600;
}
.hero-text p {
    font-size: 1.2rem;
    color: var(--teal-soft);
    margin: 0 0 28px;
    max-width: 30ch;
}
.hero-img { flex: 1; min-width: 280px; position: relative; }
.hero-img::before {
    content: '';
    position: absolute;
    inset: -8% -6% -12% -4%;
    background: radial-gradient(circle at 70% 30%, rgba(111,174,85,0.30), transparent 60%),
                radial-gradient(circle at 25% 80%, rgba(225,75,94,0.22), transparent 55%);
    border-radius: 46% 54% 50% 50% / 55% 48% 52% 45%;
    z-index: 0;
}
.hero-img img,
.exam-img img {
    position: relative;
    width: 100%;
    border-radius: 22px;
    box-shadow: 0 20px 44px rgba(35,68,76,0.18);
    display: block;
    z-index: 1;
}

/* ===== Fundos de seção (ritmo) ===== */
.about, .exam, .faq, .locations { background: var(--branco); }
.reasons, .consultation, .ebooks { background: var(--menta); }

/* ===== Serviços ===== */
.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    justify-content: center;
}
.service-card {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: 20px;
    box-shadow: 0 6px 20px rgba(35,68,76,0.06);
    padding: 0 0 24px;
    max-width: 320px;
    text-align: center;
    flex: 1 1 280px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 38px rgba(35,68,76,0.14);
}
.service-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.service-card h3 {
    margin: 20px 22px 10px;
    font-size: 1.35rem;
}
.service-card p {
    font-size: 0.96rem;
    color: var(--teal-soft);
    margin: 0 22px;
}

/* ===== Sobre ===== */
.about-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 52px;
    align-items: center;
}
.about-text { flex: 1.1; min-width: 280px; }
.about-text h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin: 0 0 6px; }
.about-text h3 { color: var(--melancia); font-weight: 500; font-style: italic; font-size: 1.2rem; margin: 0 0 16px; }
.about-text p { color: var(--teal-soft); }
.about-image { flex: 1; min-width: 260px; }
.about-image img {
    width: 100%;
    border-radius: 22px;
    object-fit: cover;
    box-shadow: 0 18px 40px rgba(35,68,76,0.16);
}

/* ===== Por que me escolher ===== */
.reasons ul {
    list-style: none;
    padding: 0;
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}
.reasons li {
    background: var(--branco);
    margin: 0;
    padding: 18px 22px 18px 54px;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(35,68,76,0.06);
    position: relative;
    font-weight: 600;
}
.reasons li::before {
    content: '';
    position: absolute;
    left: 20px; top: 50%;
    width: 20px; height: 20px;
    transform: translateY(-50%);
    background: var(--folha);
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.9);
}

/* ===== Avaliação corporal ===== */
.exam-grid {
    display: flex;
    align-items: center;
    gap: 52px;
    flex-wrap: wrap;
}
.exam-img { flex: 1; min-width: 280px; }
.exam-text { flex: 1.2; min-width: 280px; }
.exam-text h2 { text-align: left; font-size: clamp(1.7rem, 3.2vw, 2.2rem); margin: 0 0 16px; }
.exam-text p { color: var(--teal-soft); }
.exam-text ul {
    list-style: none;
    max-width: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.exam-text li {
    padding-left: 30px;
    position: relative;
}
.exam-text li::before {
    content: '';
    position: absolute;
    left: 0; top: 10px;
    width: 12px; height: 12px;
    background: var(--melancia);
    border-radius: 50%;
}

/* ===== Consulta ===== */
.consultation-types {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    justify-content: center;
}
.consultation-card {
    background: var(--branco);
    padding: 28px;
    border-radius: 18px;
    max-width: 330px;
    box-shadow: 0 6px 20px rgba(35,68,76,0.07);
    border-top: 4px solid var(--folha);
    flex: 1 1 280px;
}
.consultation-card h3 { margin: 0 0 10px; font-size: 1.25rem; }
.consultation-card p { color: var(--teal-soft); font-size: 0.96rem; }

/* ===== FAQ ===== */
.faq-item {
    margin-bottom: 12px;
    cursor: pointer;
    background: var(--menta);
    padding: 18px 22px;
    border-radius: 14px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    transition: background .2s;
}
.faq-item:hover { background: var(--menta-2); }
.faq-item h3 { margin: 0; font-size: 1.05rem; }
.faq-answer {
    display: none;
    margin-top: 12px;
    color: var(--teal-soft);
}

/* ===== E-books (teaser home) ===== */
.ebooks .container { text-align: center; }
.ebooks p { max-width: 60ch; margin: 0 auto 22px; color: var(--teal-soft); }
.ebook-list {
    list-style: none;
    padding: 0;
    max-width: 600px;
    margin: 0 auto;
}
.ebook-list li { margin-bottom: 10px; text-align: center; }
.ebook-list a { color: var(--melancia); text-decoration: none; font-weight: 700; }
.ebook-list a:hover { text-decoration: underline; }

/* ===== Locais ===== */
.locations-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    justify-content: center;
}
.location-card {
    background: var(--menta);
    padding: 26px;
    border-radius: 18px;
    max-width: 340px;
    flex: 1 1 280px;
}
.location-card h3 { margin: 0 0 10px; }
.location-card p { color: var(--teal-soft); margin: 4px 0; }
.location-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.loc-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: transform .2s, background .2s;
}
.loc-btn:hover { transform: translateY(-2px); }
.loc-maps { background: var(--branco); color: var(--teal); border: 1px solid var(--borda); }
.loc-maps:hover { background: #fff; }
.loc-whats { background: var(--zap); color: #fff; }
.loc-whats:hover { background: #1ebe57; }

/* ===== Rodapé ===== */
.site-footer {
    background: var(--teal);
    color: #eaf4f2;
    text-align: center;
    padding: 56px 20px;
}
.site-footer h2 { margin-top: 0; color: #fff; font-size: 1.9rem; }
.site-footer p { color: #cfe2df; }
.site-footer a { color: #fff; margin: 0 8px; text-decoration: none; font-weight: 700; }
.site-footer a:hover { text-decoration: underline; }
.social-links { margin-top: 14px; }
.credits {
    margin-top: 26px;
    font-size: 0.82rem;
    color: #9fc2bc;
}
.credits a { color: #bfe0da; }

/* ===== WhatsApp flutuante ===== */
.whats-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background: var(--zap);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(37,211,102,0.44);
    z-index: 2000;
    transition: transform .2s;
}
.whats-float:hover { transform: scale(1.09); }
.whats-float svg { width: 34px; height: 34px; fill: #fff; }

/* ===== Blog ===== */
.blog-hero {
    background: linear-gradient(160deg, var(--menta) 0%, var(--menta-2) 100%);
    text-align: center;
    padding: 70px 20px;
}
.blog-hero h1 { margin: 0 auto; font-size: clamp(1.9rem, 4vw, 2.6rem); }
.blog-hero p { font-size: 1.15rem; color: var(--teal-soft); max-width: 60ch; margin: 20px auto 0; }
.blog-list { padding: 64px 0; }
.post-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    align-items: stretch;
}
.post-card {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: 20px;
    box-shadow: 0 6px 20px rgba(35,68,76,0.06);
    padding: 0;
    max-width: 370px;
    flex: 1 1 320px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}
.post-card:hover { transform: translateY(-8px); box-shadow: 0 18px 38px rgba(35,68,76,0.13); }
.post-thumb, .recipe-thumb {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    margin: 0;
}
.post-card h2 { font-size: 1.3rem; margin: 22px 24px 8px; }
.post-card h2 a { color: var(--teal); text-decoration: none; }
.post-card h2 a:hover { color: var(--melancia); }
.post-meta { font-size: 0.82rem; color: var(--muted); margin: 0 24px 12px; font-weight: 700; letter-spacing: 0.03em; }
.post-card p { color: var(--teal-soft); font-size: 0.96rem; margin: 0 24px; }
.post-readmore {
    display: inline-block;
    margin: 16px 24px 24px;
    color: var(--melancia);
    font-weight: 800;
    text-decoration: none;
}
.post-readmore:hover { text-decoration: underline; }

/* ===== Artigo ===== */
.article { padding: 52px 0 64px; }
.breadcrumb { font-size: 0.85rem; color: var(--muted); margin-bottom: 22px; }
.breadcrumb a { color: var(--melancia); text-decoration: none; }
.article h1 {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    max-width: 760px;
    margin: 0 auto 12px;
    line-height: 1.2;
}
.article-meta { max-width: 760px; margin: 0 auto 28px; font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.article-cover {
    display: block;
    max-width: 820px;
    width: 100%;
    margin: 0 auto 34px;
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(35,68,76,0.16);
}
.article-body {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #2f4a50;
}
.article-body h2 { font-size: 1.6rem; margin: 40px 0 14px; }
.article-body h3 { font-size: 1.25rem; color: var(--teal); margin: 26px 0 8px; }
.article-body p { margin: 0 0 18px; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 24px; }
.article-body li { margin-bottom: 8px; }
.article-body a { color: var(--melancia); font-weight: 700; }
.article-faq { max-width: 720px; margin: 50px auto 0; }
.article-faq h2 { margin: 0 0 20px; text-align: left; }
.article-faq h2::after { margin-left: 0; }
.faq-item-static { border-top: 1px solid var(--borda); padding: 18px 0; }
.faq-item-static h3 { font-size: 1.1rem; margin: 0 0 6px; }
.faq-item-static p { margin: 0; color: var(--teal-soft); line-height: 1.6; }
.article-cta {
    max-width: 720px;
    margin: 50px auto 0;
    background: linear-gradient(150deg, var(--menta), var(--menta-2));
    border-radius: 20px;
    padding: 36px;
    text-align: center;
}
.article-cta h2 { margin: 0 0 8px; font-size: 1.5rem; }
.article-cta p { color: var(--teal-soft); margin-bottom: 20px; }
.article-back { max-width: 720px; margin: 34px auto 0; }
.article-back a { color: var(--melancia); text-decoration: none; font-weight: 800; }

/* ===== Receitas ===== */
.recipe .article-cover { max-width: 480px; max-height: 640px; width: auto; }
.recipe-subtitle {
    max-width: 720px;
    margin: 0 auto 26px;
    text-align: center;
    color: var(--melancia);
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 1.2rem;
}
.recipe-body { max-width: 720px; margin: 0 auto; font-size: 1.08rem; line-height: 1.75; color: #2f4a50; }
.recipe-body h2 {
    font-size: 1.5rem;
    margin: 34px 0 16px;
    padding-bottom: 8px;
    position: relative;
}
.recipe-body h2::after {
    content: '';
    display: block;
    width: 54px; height: 3px;
    margin-top: 10px;
    background: var(--melancia);
    border-radius: 2px;
}
.recipe-body h3 { font-size: 1.15rem; color: var(--teal); margin: 22px 0 8px; }
.recipe-ingredients { list-style: none; padding-left: 0; margin: 0 0 10px; }
.recipe-ingredients li {
    padding: 10px 0 10px 26px;
    position: relative;
    border-bottom: 1px solid var(--borda);
}
.recipe-ingredients li::before {
    content: '';
    position: absolute;
    left: 4px; top: 17px;
    width: 10px; height: 10px;
    background: var(--folha);
    border-radius: 50%;
}
.recipe-steps { margin: 0; padding-left: 0; list-style: none; counter-reset: step; }
.recipe-steps li {
    margin-bottom: 16px;
    padding: 4px 0 4px 46px;
    position: relative;
    min-height: 32px;
}
.recipe-steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0; top: 0;
    width: 32px; height: 32px;
    background: var(--melancia);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 0.95rem;
}
.recipe-footer {
    margin-top: 34px;
    text-align: center;
    font-family: 'Fraunces', serif;
    font-style: italic;
    color: var(--melancia);
    font-size: 1.1rem;
}

/* ===== E-books (cards de captação) ===== */
.ebook-card {
    display: flex;
    flex-direction: column;
    padding: 26px !important;
    text-align: left;
}
.ebook-badge {
    align-self: flex-start;
    background: var(--menta-2);
    color: var(--folha);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.ebook-card h2 { font-size: 1.2rem; margin: 0 0 8px; }
.ebook-card p { flex: 1; font-size: 0.95rem; color: var(--teal-soft); margin: 0 0 16px; }
.ebook-form {
    display: none;
    margin-top: 14px;
    border-top: 1px solid var(--borda);
    padding-top: 16px;
}
.ebook-form input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid #cddad4;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 0.95rem;
    font-family: inherit;
}
.ebook-form input[type="text"]:focus { outline: 2px solid var(--folha); border-color: var(--folha); }
.ebook-consent {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.78rem;
    color: var(--muted);
    margin-bottom: 14px;
    line-height: 1.45;
}
.ebook-consent input { margin-top: 3px; }
.form-erro {
    background: #fdecee;
    color: var(--melancia-escuro);
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 22px;
    font-weight: 600;
}

/* ===== Textos justificados (regra do Elias: PC justificado) ===== */
.about-text p, .exam-text p, .exam-text li, .reasons li,
.consultation-card p, .service-card p, .article-body p,
.article-body li, .faq-answer p, .faq-item-static p,
.post-card p, .ebook-card p {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
}

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

/* ===== Responsivo (celular / tablet) ===== */
@media (max-width: 768px) {
    .container { padding: 48px 0; }
    .logo img { height: 44px; }
    .site-header .container { flex-wrap: wrap; }
    .nav-toggle { display: block; }
    .main-nav { display: none; order: 3; width: 100%; }
    .main-nav.open { display: block; }
    .main-nav ul { flex-direction: column; gap: 0; width: 100%; }
    .main-nav li { border-top: 1px solid var(--borda); }
    .main-nav a { display: block; padding: 14px 4px; }
    .main-nav a::after { display: none; }

    .hero { padding: 56px 20px; }
    .hero-grid, .exam-grid { flex-direction: column; }
    .hero-grid { text-align: center; }
    .hero-text p { max-width: none; }
    .hero-text h1::after { margin-left: auto; }
    .exam-text h2 { text-align: center; }
    .exam-text h2::after { margin-left: auto; }
    .about-grid, .consultation-types, .services-grid, .locations-grid {
        flex-direction: column;
    }
    .service-card, .consultation-card, .location-card, .post-card { max-width: 100%; }
    .whats-float { width: 54px; height: 54px; bottom: 16px; right: 16px; }
    .whats-float svg { width: 30px; height: 30px; }

    /* No celular texto à esquerda (justificado abre buracos em tela estreita) */
    .about-text p, .exam-text p, .exam-text li, .reasons li,
    .consultation-card p, .service-card p, .article-body p,
    .article-body li, .faq-answer p, .faq-item-static p,
    .post-card p, .ebook-card p {
        text-align: left;
        -webkit-hyphens: none;
        hyphens: none;
    }
}