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

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

:root {
    --verde-base: #e7f7d2;
    --verde-medio: #c8e8a8;
    --verde-escuro: #4a7c35;
    --verde-hover: #3d682b;
    --carvao: #2d2d2d;
    --carvao-medio: #555555;
    --carvao-claro: #888888;
    --nude: #f5ede6;
    --nude-escuro: #e8d5c4;
    --branco: #ffffff;
    --fundo: #fafaf8;
    --sombra-suave: 0 2px 20px rgba(45,45,45,0.06);
    --sombra-media: 0 8px 40px rgba(45,45,45,0.10);
    --sombra-forte: 0 16px 60px rgba(45,45,45,0.14);
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --radius-pill: 100px;
    --transition: 0.3s ease;
}

body {
    font-family: 'Nunito', sans-serif;
    background: var(--fundo);
    color: var(--carvao);
    line-height: 1.6;
    overflow-x: hidden;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.section-tag {
    display: inline-block;
    background: var(--verde-base);
    color: var(--verde-escuro);
    padding: 5px 16px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
    font-family: 'Nunito', sans-serif;
}

.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 600;
    color: var(--carvao);
    line-height: 1.15;
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: 16px;
    color: var(--carvao-medio);
    line-height: 1.8;
    font-weight: 400;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--carvao);
    color: var(--branco);
    padding: 15px 36px;
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 15px;
    transition: all var(--transition);
    border: 2px solid var(--carvao);
    cursor: pointer;
    letter-spacing: 0.3px;
}
.btn-primary:hover {
    background: transparent;
    color: var(--carvao);
    transform: translateY(-2px);
    box-shadow: var(--sombra-media);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--carvao);
    padding: 13px 34px;
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 15px;
    transition: all var(--transition);
    border: 2px solid var(--carvao);
    cursor: pointer;
}
.btn-outline:hover { background: var(--carvao); color: var(--branco); transform: translateY(-2px); }

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: white;
    padding: 15px 36px;
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 15px;
    transition: all var(--transition);
    box-shadow: 0 4px 20px rgba(37,211,102,0.3);
}
.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(37,211,102,0.4); background: #22C55E; }

/* ========================================
   HEADER
======================================== */
header {
    background: var(--branco);
    border-bottom: 1px solid rgba(45,45,45,0.08);
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 16px 0;
}
header .container { display: flex; align-items: center; justify-content: space-between; }
.logo-area { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo-img { height: 58px; width: auto; object-fit: contain; }
nav { display: flex; gap: 36px; }
nav a { text-decoration: none; color: var(--carvao-medio); font-size: 14px; font-weight: 600; transition: color var(--transition); letter-spacing: 0.3px; }
nav a:hover { color: var(--carvao); }
.header-cta { display: flex; align-items: center; gap: 16px; }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.menu-toggle span { display: block; width: 22px; height: 1.5px; background: var(--carvao); margin: 6px 0; transition: all 0.3s; }

/* ========================================
   HERO
======================================== */
#hero {
    display: grid;
    grid-template-columns: 60fr 40fr;
    min-height: 600px;
    max-height: 780px;
    height: 85vh;
    background: var(--verde-base);
    overflow: hidden;
}

.hero-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 80px 80px 60px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.9);
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    color: var(--verde-escuro);
    font-weight: 700;
    margin-bottom: 28px;
    letter-spacing: 0.5px;
    width: fit-content;
}

.hero-badge .dot {
    width: 7px;
    height: 7px;
    background: var(--verde-escuro);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(38px, 4.5vw, 68px);
    font-weight: 600;
    color: var(--carvao);
    line-height: 1.05;
    margin-bottom: 24px;
}

.hero-title em { font-style: italic; color: var(--verde-escuro); }

.hero-subtitle {
    font-size: 16px;
    color: var(--carvao-medio);
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 440px;
    font-weight: 400;
}

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-photo-panel {
    position: relative;
    overflow: hidden;
}

.hero-photo-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 10%;
    display: block;
}

.hero-proof-card {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 48px);
    background: rgba(255,255,255,0.87);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-md);
    padding: 30px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    box-shadow: var(--sombra-media);
    white-space: nowrap;
}

.proof-item { text-align: center; }
.proof-item strong {
    display: block;
    font-family: none;
    font-size: 28px;
    font-weight: 700;
    color: var(--carvao);
    line-height: 1;
}
.proof-item span { font-size: 11px; color: var(--carvao-claro); font-weight: 500; }
.proof-divider { width: 1px; height: 36px; background: rgba(45,45,45,0.12); flex-shrink: 0; }

/* ========================================
   SOBRE
======================================== */
#sobre { padding: 56px 0; background: var(--branco); }
.sobre-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.sobre-image { position: relative; }
.sobre-image img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: center 45%;
    border-radius: var(--radius-lg);
    box-shadow: var(--sombra-forte);
}
.sobre-badge {
    position: absolute;
    bottom: 28px;
    right: -20px;
    background: var(--verde-base);
    padding: 20px 24px;
    border-radius: var(--radius-md);
    text-align: center;
    box-shadow: var(--sombra-media);
}
.sobre-badge strong {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 44px;
    font-weight: 700;
    color: var(--carvao);
    line-height: 1;
}
.sobre-badge span { font-size: 12px; color: var(--carvao-medio); font-weight: 500; }
.sobre-content .section-subtitle { margin-bottom: 24px; }
.diferenciais-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.diferenciais-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; color: var(--carvao-medio); line-height: 1.6; }
.check-icon {
    width: 22px; height: 22px;
    background: var(--verde-base);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--verde-escuro);
    font-size: 11px; font-weight: 700;
    margin-top: 2px;
}

/* ========================================
   BENEFÍCIOS
======================================== */
#beneficios { padding: 40px 0; background: var(--fundo); }
.section-header { text-align: center; margin-bottom: 28px; }
.section-header .section-subtitle { margin: 0 auto; max-width: 520px; }
.beneficios-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.beneficio-card {
    background: var(--branco);
    border-radius: var(--radius-md);
    padding: 20px 20px;
    border: 1px solid rgba(45,45,45,0.07);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}
.beneficio-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--verde-base);
    transform: scaleX(0);
    transition: transform var(--transition);
    transform-origin: left;
}
.beneficio-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-media); }
.beneficio-card:hover::after { transform: scaleX(1); }
.beneficio-icon {
    width: 40px; height: 40px;
    background: var(--verde-base);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
}
.beneficio-icon svg { width: 22px; height: 22px; stroke: var(--verde-escuro); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.beneficio-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 600; color: var(--carvao); margin-bottom: 8px; }
.beneficio-card p { font-size: 13px; color: var(--carvao-medio); line-height: 1.65; }

/* ========================================
   PEDIATRIA
======================================== */
#pediatria { padding: 80px 0; background: var(--branco); position: relative; overflow: hidden; }
.pediatria-deco { position: absolute; border-radius: 50%; opacity: 0.18; pointer-events: none; }
.pediatria-deco-1 { width: 300px; height: 300px; background: #FFB3C6; top: -80px; right: -80px; }
.pediatria-deco-2 { width: 200px; height: 200px; background: #B3D9FF; bottom: -60px; left: -60px; }
.pediatria-deco-3 { width: 120px; height: 120px; background: #FFE8A3; top: 50%; right: 10%; transform: translateY(-50%); }
.pediatria-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; }
.pediatria-image img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center 80%;
    border-radius: var(--radius-lg);
    box-shadow: var(--sombra-forte);
}
.pediatria-tag {
    display: inline-block;
    background: #FFE8F0; color: #C45C7A;
    padding: 5px 16px;
    border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    margin-bottom: 16px;
}
.pediatria-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(28px, 3.5vw, 42px); font-weight: 600; color: var(--carvao); line-height: 1.15; margin-bottom: 14px; }
.pediatria-subtitle { font-size: 15px; color: var(--carvao-medio); line-height: 1.8; margin-bottom: 24px; }
.pediatria-lista { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.pediatria-lista li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--carvao-medio); }
.pediatria-lista li .bullet { width: 8px; height: 8px; background: #FFB3C6; border-radius: 50%; flex-shrink: 0; }

.pediatria-duas-colunas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.pediatria-col-titulo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--carvao);
    margin-bottom: 12px;
}

/* ========================================
   COMO FUNCIONA
======================================== */
#como-funciona { padding: 80px 0; background: var(--verde-base); }
#como-funciona .section-header .section-tag { background: rgba(255,255,255,0.6); }
.steps-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; margin-top: 40px; }
.steps-container::before {
    content: '';
    position: absolute;
    top: 32px;
    left: calc(12.5% + 20px);
    right: calc(12.5% + 20px);
    height: 1px;
    background: rgba(45,45,45,0.15);
    z-index: 0;
}
.step-item { text-align: center; padding: 0 20px; position: relative; z-index: 1; }
.step-number {
    width: 64px; height: 64px;
    background: var(--branco);
    color: var(--carvao);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Nunito', sans-serif;
    font-size: 22px; font-weight: 700;
    margin: 0 auto 24px;
    box-shadow: var(--sombra-suave);
    border: 1px solid rgba(45,45,45,0.08);
}
.step-item h3 { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600; color: var(--carvao); margin-bottom: 10px; }
.step-item p { font-size: 13px; color: var(--carvao-medio); line-height: 1.7; }

/* ========================================
   DEPOIMENTOS
======================================== */
#depoimentos { padding: 70px 0; background: var(--fundo); }
#depoimentos .container { max-width: 1300px; }
.depoimentos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.depoimento-card { background: var(--branco); border-radius: var(--radius-md); padding: 28px; border: 1px solid rgba(45,45,45,0.07); transition: all var(--transition); display: flex; flex-direction: column; }
.depoimento-card:hover { box-shadow: var(--sombra-media); transform: translateY(-4px); }
.stars { color: #D4A853; font-size: 14px; margin-bottom: 12px; letter-spacing: 3px; }
.depoimento-text { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-style: italic; color: var(--carvao); line-height: 1.65; margin-bottom: 20px; font-weight: 400; flex: 1; }
.depoimento-author { display: flex; align-items: flex-start; gap: 12px; min-height: 52px; }
.author-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--verde-base); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; font-weight: 700; color: var(--verde-escuro); font-family: 'Cormorant Garamond', serif; }
.author-info strong { display: block; font-size: 14px; font-weight: 700; color: var(--carvao); }
.author-info span { font-size: 12px; color: var(--carvao-claro); }

/* ========================================
   CTA FINAL
======================================== */
#cta-final { padding: 80px 0; background: var(--carvao); text-align: center; position: relative; overflow: hidden; }
#cta-final::before {
    content: '';
    position: absolute;
    top: -100px; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(231,247,210,0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.cta-final-inner { max-width: 620px; margin: 0 auto; position: relative; z-index: 1; }
.cta-final-inner .section-tag { background: rgba(231,247,210,0.15); color: var(--verde-base); }
.cta-final-inner .section-title { color: var(--branco); margin-bottom: 16px; }
.cta-final-inner .section-subtitle { color: rgba(255,255,255,0.65); margin: 0 auto 32px; max-width: 480px; }
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ========================================
   FOOTER
======================================== */
footer { background: #222222; color: rgba(255,255,255,0.5); padding: 36px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.footer-logo img { height: 36px; width: auto; object-fit: contain; opacity: 0.7; filter: brightness(0) invert(1); }
.footer-links { display: flex; gap: 24px; }
.footer-links a { color: rgba(255,255,255,0.45); text-decoration: none; font-size: 13px; transition: color var(--transition); font-weight: 500; }
.footer-links a:hover { color: var(--verde-base); }
.footer-copy { font-size: 12px; }

/* ========================================
   MENU MOBILE
======================================== */
.mobile-menu {
    display: none;
    position: fixed;
    top: 73px; left: 0; right: 0;
    background: var(--branco);
    border-bottom: 1px solid rgba(45,45,45,0.08);
    padding: 20px 24px;
    z-index: 99;
    flex-direction: column;
    gap: 4px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { text-decoration: none; color: var(--carvao-medio); font-size: 15px; font-weight: 600; padding: 12px 0; border-bottom: 1px solid rgba(45,45,45,0.06); }
.mobile-menu a:last-child { border-bottom: none; }

/* ========================================
   RESPONSIVE 900px
======================================== */
@media (max-width: 900px) {
    nav { display: none; }
    .menu-toggle { display: block; }
    .header-cta .btn-primary { display: none; }

    #hero { grid-template-columns: 1fr; min-height: unset; max-height: unset; height: auto; }

    .hero-photo-panel { height: 55vw; min-height: 280px; max-height: 420px; order: 1; }
    .hero-photo-panel img { object-position: center 25%; }
    .hero-proof-card { bottom: 16px; padding: 12px 16px; gap: 12px; z-index: 2; }
    .proof-item strong { font-size: 20px; }
    .proof-item span { font-size: 10px; }
    .hero-body { order: 2; padding: 40px 24px 64px; }

    .sobre-inner { grid-template-columns: 1fr; gap: 48px; }
    .sobre-badge { right: 10px; bottom: -16px; }
    .sobre-image img { height: 360px; }

    .beneficios-grid { grid-template-columns: 1fr 1fr; }

    .pediatria-inner { grid-template-columns: 1fr; gap: 40px; }
    .pediatria-image { order: -1; }
    .pediatria-image img { height: 480px; object-position: top center; }

    .steps-container { grid-template-columns: 1fr 1fr; gap: 32px; }
    .steps-container::before { display: none; }

    .depoimentos-grid { grid-template-columns: 1fr; }
}

/* ========================================
   RESPONSIVE 600px
======================================== */
@media (max-width: 600px) {
    .hero-photo-panel { height: 70vw; max-height: 360px; }
    .hero-photo-panel img { object-position: center 25%; }
    .hero-body { padding: 32px 20px 40px; }
    .hero-title { font-size: clamp(32px, 8vw, 44px); }
    .hero-subtitle { font-size: 15px; }
    .hero-proof-card { gap: 10px; padding: 20px 14px; }

    .sobre-image img { height: 320px; }

    .pediatria-image img { height: 420px; object-position: center 90%; }
    .pediatria-duas-colunas { grid-template-columns: 1fr; gap: 16px; }

    .beneficios-grid { grid-template-columns: 1fr; }
    .steps-container { grid-template-columns: 1fr; }
    .footer-inner { flex-direction: column; text-align: center; }
    .footer-links { flex-wrap: wrap; justify-content: center; }
}