/* ============================================================
   Dra. Maria José Mazarin — Odontologia (Águas de Lindóia - SP)
   Replicado do projeto Dr. Rodrigo Guedes (mesmo sistema de tratamentos,
   FAQ editorial, cards de diferencial), com o hero e a seção "Sobre" no
   modo sem-foto (gradiente + ícone) até a cliente enviar logo/fotos reais.
   Cores de marca vêm de temas/dra-maria-jose-mazarin.css.
   ============================================================ */

:root {
    --color-ink: #14231F;
    --color-muted: #5C7570;
    --color-ivory: #F1FAF7;
    --color-background: #FFFFFF;
    --color-border: rgba(20,35,31,.1);

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

    --shadow-soft: 0 4px 6px -1px rgba(20,35,31,.08), 0 2px 4px -1px rgba(20,35,31,.05);
    --shadow-medium: 0 10px 15px -3px rgba(20,35,31,.1), 0 4px 6px -2px rgba(20,35,31,.05);
    --shadow-strong: 0 20px 25px -5px rgba(20,35,31,.12), 0 10px 10px -5px rgba(20,35,31,.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 — ícone bem discreto, decora o fundo de seções longas
   sem competir com o conteúdo. ===== */
.lp-section-watermark {
    position: absolute;
    top: -4rem;
    right: -4rem;
    width: 26rem;
    height: 26rem;
    opacity: .05;
    pointer-events: none;
    z-index: 0;
    transform: rotate(-8deg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}
.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 ===== */
.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);
}
.lp-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: 62% 45%;
    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), mais forte à
   esquerda onde o texto fica, mais leve à direita pra deixar o consultório aparecer. */
.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 — "trilha da vida": 4 fases (infância → adolescência →
   vida adulta → melhor idade) conectadas por uma linha, cada uma com seu
   tratamento. Estrutura pensada especificamente para esta clínica multi-
   especialidade (não é o padrão "faixa + grid" genérico). ===== */

/* --- Versão desktop (xl+): trilha horizontal em zigue-zague --- */
.lp-journey-row {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 27rem;
}
.lp-journey-line {
    position: absolute;
    top: 50%;
    left: 3rem;
    right: 3rem;
    height: 3px;
    transform: translateY(-50%);
    border-radius: var(--radius-full);
    background: repeating-linear-gradient(
        90deg,
        var(--color-primary) 0, var(--color-primary) 14px,
        transparent 14px, transparent 22px
    );
    opacity: .45;
}
.lp-journey-stage {
    position: relative;
    flex: 1;
}
.lp-journey-medallion {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 3px solid var(--color-primary-100);
    box-shadow: var(--shadow-medium);
    color: var(--color-primary);
    transition: transform var(--transition-base), border-color var(--transition-base);
}
.lp-journey-stage:hover .lp-journey-medallion {
    transform: translate(-50%, -50%) scale(1.08);
    border-color: var(--color-secondary-200);
}
.lp-journey-medallion.is-secondary {
    border-color: var(--color-secondary-100);
    color: var(--color-secondary-700);
}
.lp-journey-sparkle {
    position: absolute;
    top: -.35rem;
    right: -.35rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-secondary);
    color: #fff;
    box-shadow: var(--shadow-soft);
}

.lp-journey-card {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 15.5rem;
    text-align: center;
}
.lp-journey-card.is-top { bottom: calc(50% + 2.75rem); }
.lp-journey-card.is-bottom { top: calc(50% + 2.75rem); }

/* --- Conteúdo do cartão (compartilhado entre desktop e mobile) --- */
.lp-journey-card-eyebrow {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: .3rem;
}
.lp-journey-card-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.25;
    margin-bottom: .4rem;
}
.lp-journey-card-description {
    font-size: .82rem;
    color: var(--color-muted);
    line-height: 1.5;
    margin-bottom: .9rem;
}
.lp-journey-card-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.lp-journey-card-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-primary-50);
    color: var(--color-primary);
    transition: background var(--transition-base);
}
.lp-journey-card-call:hover { background: var(--color-primary-100); }
.lp-journey-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    flex: 1;
    padding: .6rem 1rem;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-whatsapp), var(--color-whatsapp-dark));
    box-shadow: var(--shadow-whatsapp);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.lp-journey-card-cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-whatsapp-strong);
}

/* --- Versão mobile/tablet (abaixo de xl): trilha vertical --- */
.lp-journey-mobile {
    position: relative;
    padding-left: 4.5rem;
}
.lp-journey-mobile-line {
    position: absolute;
    top: .5rem;
    bottom: .5rem;
    left: 1.75rem;
    width: 3px;
    border-radius: var(--radius-full);
    background: repeating-linear-gradient(
        180deg,
        var(--color-primary) 0, var(--color-primary) 10px,
        transparent 10px 16px
    );
    opacity: .45;
}
.lp-journey-mobile-item {
    position: relative;
    margin-bottom: 2.5rem;
}
.lp-journey-mobile-item:last-child { margin-bottom: 0; }
.lp-journey-mobile-medallion {
    position: absolute;
    top: 0;
    left: -4.5rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 3px solid var(--color-primary-100);
    box-shadow: var(--shadow-medium);
    color: var(--color-primary);
}
.lp-journey-mobile-medallion.is-secondary {
    border-color: var(--color-secondary-100);
    color: var(--color-secondary-700);
}
.lp-journey-mobile .lp-journey-card {
    position: static;
    transform: none;
    width: auto;
    text-align: left;
}
.lp-journey-mobile .lp-journey-card-actions {
    justify-content: flex-start;
}

/* ===== 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;
}
.lp-journey-row > [data-reveal]:nth-child(1) { transition-delay: 0ms; }
.lp-journey-row > [data-reveal]:nth-child(2) { transition-delay: 120ms; }
.lp-journey-row > [data-reveal]:nth-child(3) { transition-delay: 240ms; }
.lp-journey-row > [data-reveal]:nth-child(4) { transition-delay: 360ms; }
.lp-journey-mobile-item:nth-child(1) { transition-delay: 0ms; }
.lp-journey-mobile-item:nth-child(2) { transition-delay: 90ms; }
.lp-journey-mobile-item:nth-child(3) { transition-delay: 180ms; }
.lp-journey-mobile-item:nth-child(4) { transition-delay: 270ms; }
.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. */
.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 em display ===== */
.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: 'Quicksand', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    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: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--color-ink);
}
.lp-pull-quote-mark {
    font-family: 'Quicksand', sans-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(20,35,31,.06);
    box-shadow: 0 15px 35px rgba(20,35,31,.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: 'Quicksand', sans-serif;
}
.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);
    color: var(--color-primary);
}
.lp-footer-logo-badge img {
    width: 65%;
    height: 65%;
    object-fit: contain;
}