/* ============================================================
   Instituto Lumear — Odontologia e Saúde (Águas de Lindóia - SP)
   Estrutura replicada do projeto Dra. Maria José Mazarin (header,
   hero em foto real, diferenciais, FAQ editorial, footer). Catálogo
   real tem 7 especialidades (odontológicas + podologia), por isso a
   seção de Tratamentos usa uma grade compacta com tag de categoria
   (Odontologia / Saúde e Bem-Estar) em vez da trilha de fases (que só
   fazia sentido pra clínica da Dra. Maria, com só 4 tratamentos e
   recorte por idade) ou do menu editorial em linhas (que não cabe
   bem com 7 itens). Cores de marca vêm de temas/instituto-lumear.css.
   ============================================================ */

:root {
    --color-ink: #2E2019;
    --color-muted: #7A6355;
    --color-ivory: #FBF3EC;
    --color-background: #FFFFFF;
    --color-border: rgba(46,32,25,.1);

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

    --shadow-soft: 0 4px 6px -1px rgba(46,32,25,.08), 0 2px 4px -1px rgba(46,32,25,.05);
    --shadow-medium: 0 10px 15px -3px rgba(46,32,25,.1), 0 4px 6px -2px rgba(46,32,25,.05);
    --shadow-strong: 0 20px 25px -5px rgba(46,32,25,.12), 0 10px 10px -5px rgba(46,32,25,.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 — decora o fundo de seções longas sem competir com o
   conteúdo. Sem logo real ainda: usa um ícone; troque por <img> quando
   houver logo. ===== */
.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 svg,
.lp-section-watermark i,
.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-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: 68% 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; }
}
.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 — grade compacta de 7 especialidades reais, com tag de
   categoria (Odontologia / Saúde e Bem-Estar, já que a Podologia não é
   odontológica) — a categoria aqui é real, não decorativa. Volume grande
   demais pra caber no formato de linhas editoriais ou trilha de fases usado
   em outros projetos desta skill. ===== */
.lp-services-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .lp-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .lp-services-grid { grid-template-columns: repeat(3, 1fr); }
}
.lp-service-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 1.5rem;
    padding: 1.75rem;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.lp-service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-strong);
    border-color: var(--color-secondary-200);
}
.lp-service-card-tag {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    padding: .28rem .8rem;
    border-radius: var(--radius-full);
    margin-bottom: 1rem;
}
.lp-service-card-tag.is-odonto {
    background: rgba(var(--color-primary-rgb),.1);
    color: var(--color-primary);
}
.lp-service-card-tag.is-bem-estar {
    background: rgba(var(--color-secondary-rgb),.16);
    color: var(--color-secondary-700);
}
.lp-service-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-service-card:hover .lp-service-card-icon {
    transform: scale(1.1) rotate(6deg);
    background: var(--color-primary-100);
}
.lp-service-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: .5rem;
    line-height: 1.25;
}
.lp-service-card-description {
    font-size: .875rem;
    color: var(--color-muted);
    line-height: 1.55;
    margin-bottom: 1.25rem;
}
.lp-service-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-service-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%);
}

/* ===== Tratamentos — "parede de placas retroiluminadas": a foto real do
   cliente mostra a parede da recepção com o letreiro do logo e o balcão com
   friso de LED dourado por baixo — esta seção traduz esse mesmo elemento
   físico da marca (placa escura + luz dourada vazando pela borda) para as 4
   especialidades, em vez do grid de cards brancos genérico. Só faz sentido
   nesta marca porque replica algo que existe de verdade no consultório. */
.lp-treatments-dark {
    position: relative;
    background: var(--color-primary);
    overflow: hidden;
}
.lp-treatments-dark::before,
.lp-treatments-dark::after {
    content: '';
    position: absolute;
    width: 34rem;
    height: 34rem;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .16;
    pointer-events: none;
}
.lp-treatments-dark::before {
    background: var(--color-secondary);
    top: -14rem;
    right: -10rem;
}
.lp-treatments-dark::after {
    background: var(--color-secondary-700);
    bottom: -16rem;
    left: -12rem;
    opacity: .12;
}
.lp-plaque-grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1.75rem 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .lp-plaque-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .lp-plaque-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
    .lp-plaque-grid > div:nth-child(2n) { transform: translateY(1.75rem); }
}
.lp-plaque {
    position: relative;
    background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    border: 1px solid rgba(var(--color-secondary-rgb),.28);
    border-radius: 1.25rem;
    padding: 2rem 1.5rem 1.75rem;
    text-align: center;
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
    box-shadow: 0 1px 0 rgba(var(--color-secondary-rgb),.4) inset;
}
.lp-plaque::after {
    /* friso de luz dourada vazando por baixo, como o balcão da recepção real */
    content: '';
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: -.6rem;
    height: 1.4rem;
    background: var(--color-secondary);
    filter: blur(16px);
    opacity: .35;
    border-radius: 50%;
    transition: opacity var(--transition-base);
}
.lp-plaque:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--color-secondary-rgb),.6);
    box-shadow: 0 1px 0 rgba(var(--color-secondary-rgb),.6) inset, 0 20px 40px -20px rgba(var(--color-secondary-rgb),.5);
}
.lp-plaque:hover::after { opacity: .55; }
.lp-plaque-icon {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-secondary-rgb),.1);
    border: 1px solid rgba(var(--color-secondary-rgb),.4);
    color: var(--color-secondary-200, var(--color-secondary));
}
.lp-plaque-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: .6rem;
}
.lp-plaque-description {
    font-size: .85rem;
    color: rgba(255,255,255,.6);
    line-height: 1.6;
    margin-bottom: 1.4rem;
    min-height: 4.3em;
}
.lp-plaque-consult {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--color-secondary-200, var(--color-secondary));
    margin-bottom: 1rem;
}
.lp-plaque-consult:hover { text-decoration: underline; }

/* ===== Diferenciais — mesma "placa dourada retroiluminada" da seção de
   Tratamentos, em versão compacta e sem CTA, pra amarrar as duas seções como
   parte do mesmo sistema de marca (repetição deliberada do motivo, não uma
   coincidência de nome de classe). ===== */
.lp-feature-plaque {
    position: relative;
    background: var(--color-primary);
    border: 1px solid rgba(var(--color-secondary-rgb),.3);
    border-radius: 1.1rem;
    padding: 1.5rem 1.25rem 1.4rem;
    transition: transform var(--transition-base), border-color var(--transition-base);
}
.lp-feature-plaque::after {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -.5rem;
    height: 1.1rem;
    background: var(--color-secondary);
    filter: blur(13px);
    opacity: .3;
    border-radius: 50%;
    transition: opacity var(--transition-base);
}
.lp-feature-plaque:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--color-secondary-rgb),.55);
}
.lp-feature-plaque:hover::after { opacity: .5; }
.lp-feature-plaque-icon {
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: .9rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-secondary-rgb),.1);
    border: 1px solid rgba(var(--color-secondary-rgb),.4);
    color: var(--color-secondary-200, var(--color-secondary));
}
.lp-feature-plaque-title {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: #fff;
    margin-bottom: .35rem;
}
.lp-feature-plaque-caption {
    font-size: .82rem;
    color: rgba(255,255,255,.55);
    line-height: 1.5;
}

/* ===== 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-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; }
.lp-services-grid > [data-reveal]:nth-child(1) { transition-delay: 0ms; }
.lp-services-grid > [data-reveal]:nth-child(2) { transition-delay: 60ms; }
.lp-services-grid > [data-reveal]:nth-child(3) { transition-delay: 120ms; }
.lp-services-grid > [data-reveal]:nth-child(4) { transition-delay: 180ms; }
.lp-services-grid > [data-reveal]:nth-child(5) { transition-delay: 240ms; }
.lp-services-grid > [data-reveal]:nth-child(6) { transition-delay: 300ms; }
.lp-services-grid > [data-reveal]:nth-child(7) { transition-delay: 360ms; }
@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 — "diretório em duas colunas": a placa escura empilhada 8x virou
   uma parede pesada demais pra uma seção de leitura (bom pro grid curto de
   Tratamentos/Diferenciais, ruim pra uma lista longa de texto). Aqui a marca
   aparece só como uma lasca dourada fina à esquerda de cada pergunta — como
   uma aba de metal num fichário — que acende quando o item abre, em vez de
   repetir a placa inteira 8 vezes. Fundo volta a ser claro/legível. ===== */
.lp-faq-directory {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 3rem;
}
@media (min-width: 1024px) {
    .lp-faq-directory { grid-template-columns: repeat(2, 1fr); }
}
.lp-faq-row {
    position: relative;
    padding-left: 1.1rem;
    border-bottom: 1px solid var(--color-border);
}
.lp-faq-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.6rem;
    bottom: 1.6rem;
    width: 2px;
    background: var(--color-border);
    transition: background var(--transition-base);
}
.lp-faq-row:hover::before,
.lp-faq-row[open]::before {
    background: var(--color-secondary);
}
.lp-faq-row summary {
    cursor: pointer;
    list-style: none;
    padding: 1.3rem .25rem;
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
}
.lp-faq-row summary::-webkit-details-marker { display: none; }
.lp-faq-row summary .lp-faq-icon {
    transition: transform var(--transition-base), color var(--transition-base);
    flex-shrink: 0;
    color: var(--color-secondary-700, var(--color-secondary));
}
.lp-faq-row[open] summary .lp-faq-icon {
    transform: rotate(180deg);
}
.lp-faq-row .lp-faq-body {
    padding: 0 .25rem 1.5rem;
    color: var(--color-muted);
    max-width: 46ch;
}

/* ===== 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: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--color-ink);
}
.lp-pull-quote-mark {
    font-family: 'Playfair Display', 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(46,32,25,.06);
    box-shadow: 0 15px 35px rgba(46,32,25,.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), .3);
    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: 'Playfair Display', 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;
}