/* ============================================================
   Dr. Rodrigo Guedes — Odontologia (Águas de Lindóia - SP)
   CSS próprio deste projeto (não é mais o style.css genérico do
   template de gás — foi reformulado por completo para o nicho
   odontológico: tipografia serifada ecoando a logo real, painel
   de implante em diagrama explodido, grid bento de tratamentos).
   Cores de marca vêm de temas/dr-rodrigo-guedes.css.
   ============================================================ */

:root {
    --color-ink: #241417;
    --color-muted: #8B7078;
    --color-ivory: #F7F1E9;
    --color-background: #FFFFFF;
    --color-border: rgba(36,20,23,.1);

    --color-whatsapp: #25D366;
    --color-whatsapp-dark: #1DA851;
    --color-whatsapp-rgb: 37, 211, 102;

    --shadow-soft: 0 4px 6px -1px rgba(36,20,23,.08), 0 2px 4px -1px rgba(36,20,23,.05);
    --shadow-medium: 0 10px 15px -3px rgba(36,20,23,.1), 0 4px 6px -2px rgba(36,20,23,.05);
    --shadow-strong: 0 20px 25px -5px rgba(36,20,23,.12), 0 10px 10px -5px rgba(36,20,23,.04);
    --shadow-brand: 0 10px 25px -5px rgba(var(--color-secondary-rgb),.35), 0 4px 12px -4px rgba(var(--color-tertiary-rgb),.3);
    --shadow-brand-strong: 0 16px 32px -6px rgba(var(--color-secondary-rgb),.45), 0 6px 16px -4px rgba(var(--color-tertiary-rgb),.4);
    --shadow-whatsapp: 0 10px 25px -5px rgba(var(--color-whatsapp-rgb),.4), 0 4px 12px -4px rgba(var(--color-whatsapp-rgb),.3);
    --shadow-whatsapp-strong: 0 16px 32px -6px rgba(var(--color-whatsapp-rgb),.5), 0 6px 16px -4px rgba(var(--color-whatsapp-rgb),.4);

    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    --transition-base: 250ms ease;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--color-ink);
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ===== Marca d'água — monograma da marca bem discreto, decora o fundo de seções longas
   sem competir com o conteúdo (nunca usar em seções com foto de fundo). ===== */
.lp-section-watermark {
    position: absolute;
    top: -4rem;
    right: -4rem;
    width: 26rem;
    height: 26rem;
    opacity: .05;
    pointer-events: none;
    z-index: 0;
    transform: rotate(-8deg);
}
.lp-section-watermark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.lp-section-watermark-left {
    right: auto;
    left: -5rem;
    top: auto;
    bottom: -5rem;
    transform: rotate(10deg);
}

/* ===== Foco visível (acessibilidade) ===== */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* ===== Header — barra única institucional (a faixa de horário foi pro footer) ===== */
.lp-navbar {
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow var(--transition-base), background var(--transition-base);
}
.lp-navbar.is-scrolled {
    box-shadow: var(--shadow-soft);
    background: rgba(255,255,255,.97);
}

.lp-nav-link {
    position: relative;
    color: var(--color-ink);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    transition: color var(--transition-base);
    padding-bottom: .3rem;
}
.lp-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1.5px;
    background: var(--color-secondary);
    transition: right var(--transition-base);
}
.lp-nav-link:hover {
    color: var(--color-primary);
}
.lp-nav-link:hover::after {
    right: 0;
}

.lp-eyebrow {
    display: inline-block;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--color-primary);
}
.lp-eyebrow-light {
    color: var(--color-secondary-200, var(--color-secondary));
}

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    padding: .75rem 1.5rem;
    min-height: 44px;
    text-shadow: none;
    transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}
.lp-btn:hover { transform: translateY(-2px) scale(1.02); }

.lp-btn-primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-medium);
}
.lp-btn-whatsapp {
    background: linear-gradient(90deg, var(--color-whatsapp), var(--color-whatsapp-dark));
    color: #fff;
    box-shadow: var(--shadow-whatsapp);
}
.lp-btn-whatsapp:hover { box-shadow: var(--shadow-whatsapp-strong); }

.lp-btn-highlight {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 10px 25px -5px rgba(var(--color-primary-rgb),.4), 0 4px 12px -4px rgba(var(--color-primary-rgb),.3);
}
.lp-btn-highlight:hover {
    box-shadow: 0 16px 32px -6px rgba(var(--color-primary-rgb),.5), 0 6px 16px -4px rgba(var(--color-primary-rgb),.4);
}

.lp-btn-outline {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}
.lp-btn-outline:hover {
    background: var(--color-primary-50);
    box-shadow: var(--shadow-soft);
}

/* ===== Hero — foto real do consultório em full-bleed + véu assimétrico ===== */
.lp-hero {
    position: relative;
    min-height: 96vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--color-primary-900, #20040E);
}
.lp-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: 78% 30%;
    z-index: 0;
    animation: lp-kenburns 24s ease-in-out infinite alternate;
}
@keyframes lp-kenburns {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .lp-hero-bg { animation: none; }
}
/* Véu do hero: preto neutro (não tinge a foto com a cor da marca), só o suficiente pra
   dar contraste ao texto branco — mais forte à esquerda onde o texto fica, mais leve à
   direita pra deixar o consultório real aparecer. Uniforme no mobile (texto ocupa a
   largura toda ali). */
.lp-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0,0,0,.5);
}
@media (min-width: 1024px) {
    .lp-hero-scrim {
        background: linear-gradient(100deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.48) 38%, rgba(0,0,0,.28) 62%, rgba(0,0,0,.12) 100%);
    }
}

.lp-text-gradient-brand {
    background: linear-gradient(135deg, var(--color-secondary-200, var(--color-secondary)), var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255,255,255,.1);
    color: #fff;
    border: 1px solid rgba(var(--color-secondary-rgb),.4);
    border-radius: var(--radius-full);
    padding: .45rem 1.1rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
}
.lp-hero-badge-dot {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--color-secondary);
    animation: lp-pulse 1.6s infinite;
}

@keyframes lp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

/* ===== Trust badges ===== */
.lp-trust-badge-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.14);
    color: var(--color-secondary-200, #fff);
}

/* ===== Cards genéricos ===== */
.lp-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.lp-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-strong);
}

/* ===== Tratamentos — grid bento (o implante ganha uma faixa própria, os demais
   tratamentos vêm depois em cards menores e iguais) ===== */
.lp-treatment-featured {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-700) 100%);
    color: #fff;
    border-radius: 1.75rem;
    padding: 2.25rem;
    overflow: hidden;
    box-shadow: var(--shadow-strong);
}
@media (min-width: 1024px) {
    .lp-treatment-featured {
        flex-direction: row;
        align-items: center;
        padding: 2.75rem 3rem;
    }
}
.lp-treatment-featured-glow {
    position: absolute;
    inset: -4rem -4rem auto auto;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-secondary-rgb),.35) 0%, transparent 70%);
    filter: blur(10px);
    pointer-events: none;
    animation: lp-breathe 7s ease-in-out infinite;
}

/* ===== Respiro sutil pra qualquer glow/blob de fundo do site (dá a sensação de página
   "viva" sem chamar atenção pra si — reaproveitado em vários pontos) ===== */
@keyframes lp-breathe {
    0%, 100% { opacity: .75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .lp-treatment-featured-glow { animation: none; }
}
.lp-treatment-featured-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(var(--color-secondary-rgb),.5);
    color: var(--color-secondary-200, var(--color-secondary));
    flex-shrink: 0;
}
.lp-treatment-featured-image {
    position: relative;
    z-index: 1;
    width: 9rem;
    height: 12.5rem;
    flex-shrink: 0;
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(var(--color-secondary-rgb),.5);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,.55);
}
@media (min-width: 1024px) {
    .lp-treatment-featured-image {
        width: 11.5rem;
        height: 16rem;
    }
}
.lp-treatment-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.lp-treatment-featured-checklist {
    display: grid;
    gap: .6rem;
    margin-top: 1.1rem;
}
.lp-treatment-featured-checklist li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .9rem;
    color: rgba(255,255,255,.88);
}
.lp-treatment-featured-checklist i {
    color: var(--color-secondary-200, var(--color-secondary));
    flex-shrink: 0;
    margin-top: .15rem;
}

.lp-treatments-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .lp-treatments-grid { grid-template-columns: repeat(3, 1fr); }
}

.lp-treatment-card {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 1.5rem;
    padding: 0;
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.lp-treatment-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-strong);
    border-color: var(--color-secondary-200);
}
.lp-treatment-card-image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-primary-50);
}
.lp-treatment-card-image img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transition: transform .5s ease;
}
.lp-treatment-card:hover .lp-treatment-card-image img {
    transform: scale(1.06);
}
.lp-treatment-card-body {
    padding: 1.75rem;
}
.lp-treatment-card-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-50);
    color: var(--color-primary);
    margin-bottom: 1.1rem;
    transition: transform var(--transition-base), background var(--transition-base);
}
.lp-treatment-card:hover .lp-treatment-card-icon {
    transform: scale(1.1) rotate(6deg);
    background: var(--color-primary-100);
}
.lp-treatment-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: .5rem;
    line-height: 1.25;
}
.lp-treatment-card-description {
    font-size: .875rem;
    color: var(--color-muted);
    line-height: 1.55;
    margin-bottom: 1.25rem;
}
.lp-treatment-card-consult {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 1.1rem;
}
.lp-treatment-card-consult:hover { text-decoration: underline; }

/* ===== Realce de marca (fundo com leve tom da cor terciária) ===== */
.lp-section-tint {
    background: linear-gradient(180deg, var(--color-ivory) 0%, #fff 70%);
}

/* ===== Reveal on scroll ===== */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}
/* Cascata nos grids: cada item revela um pouco depois do anterior em vez de todos
   aparecerem juntos — é o que dá a sensação de página "viva" ao rolar. */
.lp-treatments-grid > [data-reveal]:nth-child(1) { transition-delay: 0ms; }
.lp-treatments-grid > [data-reveal]:nth-child(2) { transition-delay: 90ms; }
.lp-treatments-grid > [data-reveal]:nth-child(3) { transition-delay: 180ms; }
.lp-feature-card-grid > [data-reveal]:nth-child(1) { transition-delay: 0ms; }
.lp-feature-card-grid > [data-reveal]:nth-child(2) { transition-delay: 80ms; }
.lp-feature-card-grid > [data-reveal]:nth-child(3) { transition-delay: 160ms; }
.lp-feature-card-grid > [data-reveal]:nth-child(4) { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .lp-about-photo-frame { animation: none; }
}

/* Sequência de entrada do Hero — dispara no load, não depende de scroll (a seção já está
   visível na primeira dobra). Delays escalonados dão a sensação de composição orquestrada
   em vez de tudo aparecer de uma vez. */
.lp-hero-enter {
    opacity: 0;
    transform: translateY(14px);
    animation: lp-hero-enter .8s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes lp-hero-enter {
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-hero-enter { opacity: 1; transform: none; animation: none; }
}

/* ===== FAQ editorial — sem cards em caixa, divisórias finas e pergunta serifada ===== */
.lp-faq-item {
    border-bottom: 1px solid var(--color-border);
}
.lp-faq-item:first-child {
    border-top: 1px solid var(--color-border);
}
.lp-faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 1.5rem .25rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary .lp-faq-icon {
    transition: transform var(--transition-base);
    flex-shrink: 0;
    color: var(--color-secondary-700, var(--color-secondary));
}
.lp-faq-item[open] summary .lp-faq-icon {
    transform: rotate(180deg);
}
.lp-faq-item .lp-faq-body {
    padding: 0 .25rem 1.5rem;
    color: var(--color-muted);
    max-width: 62ch;
}

/* ===== WhatsApp flutuante ===== */
.lp-whatsapp-float {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 60;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-whatsapp), var(--color-whatsapp-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-whatsapp-strong);
    transition: transform var(--transition-base);
    animation: lp-float-pulse 2.4s infinite;
}
.lp-whatsapp-float:hover { transform: scale(1.08); }

@keyframes lp-float-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-whatsapp-rgb),.4), var(--shadow-whatsapp-strong); }
    50% { box-shadow: 0 0 0 12px rgba(var(--color-whatsapp-rgb),0), var(--shadow-whatsapp-strong); }
}

/* ===== Mobile menu ===== */
#lp-mobile-menu {
    display: none;
}
#lp-mobile-menu.is-open {
    display: block;
}

/* ===== Seção "Sobre" — foto real emoldurada ===== */
.lp-about-photo-frame {
    position: relative;
    z-index: 1;
    border-radius: 1.75rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.04);
    animation: lp-gentle-float 6s ease-in-out infinite;
}
.lp-about-photo-frame img {
    display: block;
    width: 100%;
    height: auto;
}

@keyframes lp-gentle-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.lp-pull-quote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--color-ink);
}
.lp-pull-quote-mark {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.5rem;
    line-height: 0;
    color: var(--color-secondary);
    vertical-align: -.6rem;
}

/* ===== Cards de Diferencial ===== */
.lp-feature-card {
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(36,20,23,.06);
    box-shadow: 0 15px 35px rgba(36,20,23,.05);
    border-radius: 18px;
    padding: 1.25rem;
    transition: transform var(--transition-base);
}
.lp-feature-card:hover {
    transform: translateY(-4px);
}
.lp-feature-card-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-primary-rgb),.08);
    color: var(--color-primary);
    margin-bottom: 1rem;
    transition: transform var(--transition-base);
}
.lp-feature-card:hover .lp-feature-card-icon {
    transform: scale(1.08) rotate(-6deg);
}
.lp-feature-card-icon-secondary {
    background: rgba(var(--color-secondary-rgb),.14);
    color: var(--color-secondary-700, var(--color-secondary));
}
.lp-feature-card-icon-tertiary {
    background: rgba(var(--color-tertiary-rgb), .22);
    color: var(--color-primary);
}

/* ===== Footer ===== */
.lp-footer {
    position: relative;
}
.lp-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
}
.lp-footer-brand {
    font-family: 'Cormorant Garamond', serif;
}
/* O ícone dourado some no fundo vinho (as duas cores são meio-tom) — fundo branco atrás
   resolve o contraste direto. */
.lp-footer-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,.3);
}
.lp-footer-logo-badge img {
    width: 65%;
    height: 65%;
    object-fit: contain;
}