/* =========================================
   IMPORTAÇÃO DAS FONTES SUAVES E ARREDONDADAS (MATERNIDADE)
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&family=Quicksand:wght@400;500;600;700&display=swap');

/* =========================================
   VARIÁVEIS DE TEMA (PALETA COMUNIDADE MATERNA)
========================================= */
:root {
  --pv-black-deep: #F7F5F0;  /* Fundo principal Off-white */
  --pv-black-sec: #FFFFFF;   /* Fundo das caixas e detalhes */
  --pv-yellow: #6B328C;      /* Roxo como cor de ação e marcação */
  --pv-white: #341539;       /* Beringela Escuro para textos principais */
  --pv-gray: #5a3c61;        /* Textos secundários (Beringela mais suave) */
  
  --roxo: #6B328C;
  --terra: #D97D5A;
  --verde: #8A9A86;
  --offwhite: #F7F5F0;
  --beringela: #341539;
  --cinza-texto: #5a3c61;
  
  /* Fontes Arredondadas */
  --font-heading: 'Quicksand', sans-serif;
  --font-body: 'Nunito', sans-serif;
}

/* Modo Escuro Global */
body.dark-mode {
  --pv-black-deep: #341539;
  --pv-black-sec: #230d27;
  --pv-yellow: #D97D5A;      /* Terracota ganha destaque no escuro */
  --pv-white: #F7F5F0;
  --pv-gray: #dcd4de;
  
  --roxo: #D97D5A;           /* Títulos viram Terracota no dark mode para ter contraste e destaque */
  --offwhite: #341539;
  --beringela: #F7F5F0;
  --cinza-texto: #dcd4de;
}

/* Força as novas fontes amigáveis em toda a página e em classes legadas */
h1, h2, h3, h4, h5, h6, .title-style, .medium-title, .large-title, .xlarge-title, .xxlarge-title, button, .border-btn, .flip-btn, .arrow-btn, .scroll-btn-flip, .lp-btn, summary {
    font-family: var(--font-heading) !important;
}
p, a, span, li, input, textarea {
    font-family: var(--font-body) !important;
}

/* =========================================
   RESET E FLUIDEZ DO SISTEMA
========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; background: var(--offwhite); }
body { 
    font-family: var(--font-body); 
    color: var(--beringela); 
    overflow-x: hidden; 
    -webkit-font-smoothing: antialiased; 
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Tipografia Base (Suavizada e Arredondada) */
h1, h2, h3 { line-height: 1.25; color: var(--roxo); }
h1 { font-size: 38px; font-weight: 700; color: var(--offwhite); text-shadow: 0 4px 15px rgba(0,0,0,0.4); }
h2 { font-size: 34px; font-weight: 700; margin-bottom: 20px; }
h3 { font-size: 24px; font-weight: 700; margin-bottom: 10px; }

p { font-size: 18px; color: var(--cinza-texto); line-height: 1.6; margin-bottom: 20px; font-weight: 400; }
.lead { font-size: 22px; color: var(--beringela); font-weight: 600; line-height: 1.5; }
.highlight-text { color: var(--terra); font-size: 22px; margin-top: 30px; font-style: italic; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.top-margin-40 { margin-top: 40px; }
.top-margin-60 { margin-top: 60px; }

/* =========================================
   HERO STICKY (O EFEITO DE TÍTULO FIXO)
========================================= */
.hero-sticky-wrapper {
    position: relative;
    min-height: 150vh; /* Altura extra para permitir a rolagem enquanto a imagem some */
    z-index: 2;
}
.hero-sticky-title {
    position: sticky;
    top: 25vh; /* Trava no centro superior da tela */
    text-align: center;
    z-index: 3;
    padding: 0 20px;
    margin-top: 20vh; /* Onde ele começa */
    pointer-events: none; /* Permite que o clique passe direto por ele */
}
.main-sticky-title {
    font-family: var(--font-heading);
    font-size: 50px;
    color: var(--roxo) !important; /* Cor Roxa exigida */
    font-weight: 800;
    max-width: 900px;
    margin: 0 auto;
    /* Sombra iluminada para garantir leitura perfeita por cima da foto */
    text-shadow: 0 0 20px rgba(247, 245, 240, 0.9), 0 0 40px rgba(247, 245, 240, 0.8);
    text-align: center;
}
body.dark-mode .main-sticky-title {
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 0, 0, 0.8);
}

.hero-scroll-spacer { height: 60vh; }

/* Conteúdo que sobe embaixo do título */
.intro-content-box {
    position: relative;
    z-index: 3;
    margin-top: 5vh; 
    background: transparent; 
    pointer-events: auto;
    padding-bottom: 60px;
}

.center-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    text-align: center;
}

/* =========================================
   NUVENS PARALLAX (CONFORTO E PREENCHIMENTO)
========================================= */
.clouds-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none; overflow: hidden;
}
.cloud-el {
    position: absolute; color: var(--roxo); opacity: 0.04;
    transition: transform 0.1s linear;
}
.cloud-1 { top: 15%; left: -5%; font-size: 16rem; }
.cloud-2 { top: 40%; right: -10%; font-size: 22rem; }
.cloud-3 { top: 70%; left: 10%; font-size: 12rem; }
.cloud-4 { top: 90%; right: 20%; font-size: 18rem; }

/* =========================================
   CABEÇALHO & HAMBURGER (SEM FUNDO NENHUM)
========================================= */
#lp-logo-header {
    position: fixed; top: 30px; left: 30px; z-index: 100;
    transition: opacity 0.5s ease; opacity: 1; pointer-events: none;
}
#lp-logo-header.hidden { opacity: 0; }
#lp-logo-header img { width: 140px; }

/* Hamburger Solto */
.floating-hamburger {
    position: fixed; top: 30px; right: 30px; z-index: 1010;
    width: 40px; height: 35px; display: flex; flex-direction: column;
    justify-content: space-between; cursor: pointer;
    background: transparent !important;
    border: none; box-shadow: none;
}
.floating-hamburger .line {
    width: 100%; height: 3px; background: var(--roxo); border-radius: 3px;
    transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 0 5px rgba(255,255,255,0.8);
}
body.dark-mode .floating-hamburger .line { box-shadow: 0 0 5px rgba(0,0,0,0.8); }
.floating-hamburger.active .line-1 { transform: translateY(16px) rotate(45deg); }
.floating-hamburger.active .line-2 { opacity: 0; }
.floating-hamburger.active .line-3 { transform: translateY(-16px) rotate(-45deg); }

/* Menu Overlay */
.menu-overlay {
    position: fixed; top: -100%; left: 0; width: 100%; height: 100vh;
    background: var(--beringela); z-index: 1000;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 30px; transition: top 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.menu-overlay.open { top: 0; }
.menu-link { font-family: var(--font-heading); font-size: 32px; color: var(--offwhite); font-weight: 600; text-transform: lowercase; font-variant: small-caps; }
.menu-link:hover { color: var(--terra); }

/* =========================================
   ESTRUTURA DE BLOCOS E CORES INTELIGENTES
========================================= */
.lp-main-wrapper { position: relative; z-index: 2; width: 100%; background: transparent; }
.scroll-content { padding: 40px 20px; max-width: 800px; margin: 0 auto; position: relative; z-index: 2; }

/* Foto Abertura */
.hero-image-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 1;
    background-size: cover; background-position: center;
}
.hero-image-bg::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(45,27,54,0.1) 0%, var(--offwhite) 100%);
}

.color-block { position: relative; z-index: 3; width: 100%; }
.bg-offwhite { background: var(--offwhite); }
.bg-roxo { background: var(--roxo); }
.bg-verde { background: var(--verde); }

.bg-roxo h2, .bg-verde h2, .bg-roxo h3, .bg-verde h3 { color: var(--offwhite); }
.bg-roxo p, .bg-verde p { color: rgba(247, 245, 240, 0.9); }

.parallax-img-break {
    width: 100%; height: 45vh; background-size: cover; background-position: center;
    background-attachment: scroll;
}

/* =========================================
   SCROLL-TELLING (FADE IN/OUT)
========================================= */
.focus-step {
    min-height: 40vh; 
    display: flex; flex-direction: column; justify-content: center;
    opacity: 0; transform: translateY(30px);
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}
.focus-step.in-view { opacity: 1; transform: translateY(0); }

/* =========================================
   BOTÕES
========================================= */
.lp-btn {
    display: inline-block; padding: 18px 45px; margin-top: 15px; margin-bottom: 15px;
    font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: 2px;
    border-radius: 30px; transition: 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    background: var(--roxo); color: var(--offwhite) !important; text-decoration: none;
}
.lp-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); background: var(--beringela); }

.btn-verde { background: var(--verde); }
.btn-terra { background: var(--terra); }
.btn-roxo { background: var(--roxo); }

.garantia-text { display: block; margin-top: 5px; font-size: 14px; color: var(--terra); font-weight: 700; }

/* =========================================
   PERSIANA
========================================= */
.accordion-wrapper { display: flex; width: 100%; height: 50vh; min-height: 400px; gap: 10px; }
.accordion-item { flex: 1; position: relative; overflow: hidden; border-radius: 8px; cursor: pointer; transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); background: var(--beringela); }
.accordion-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0.3; transition: opacity 0.6s; filter: grayscale(100%); }
.accordion-title-vert { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%) rotate(180deg); color: var(--offwhite); font-family: var(--font-heading); font-size: 24px; font-weight: 700; writing-mode: vertical-rl; white-space: nowrap; transition: 0.3s ease; text-shadow: 2px 2px 10px rgba(0,0,0,0.8); }
.accordion-content { position: absolute; bottom: 30px; left: 30px; right: 30px; opacity: 0; transform: translateY(20px); transition: all 0.5s ease; transition-delay: 0.1s; pointer-events: none; text-align: left; }
.accordion-content h3 { color: var(--terra); margin-bottom: 10px; font-size: 26px; text-shadow: 2px 2px 10px rgba(0,0,0,0.8); }
.accordion-content p { color: var(--offwhite); font-size: 16px; line-height: 1.5; text-shadow: 1px 1px 5px rgba(0,0,0,0.8); font-weight: 600; }

@media (min-width: 1000px) {
    .accordion-item:hover { flex: 4; }
    .accordion-item:hover .accordion-bg { opacity: 0.7; filter: grayscale(0%); }
    .accordion-item:hover .accordion-title-vert { opacity: 0; pointer-events: none; }
    .accordion-item:hover .accordion-content { opacity: 1; transform: translateY(0); pointer-events: auto; }
}
.accordion-item.active-mobile { flex: 4; }
.accordion-item.active-mobile .accordion-bg { opacity: 0.7; filter: grayscale(0%); }
.accordion-item.active-mobile .accordion-title-vert { opacity: 0; pointer-events: none; }
.accordion-item.active-mobile .accordion-content { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* =========================================
   PLANOS DE ASSINATURA
========================================= */
.price-box { border-radius: 12px; padding: 40px 30px; position: relative; margin-bottom: 30px; }
.box-anual { background: var(--roxo); box-shadow: 0 10px 30px rgba(107, 50, 140, 0.2); border: 2px solid var(--terra); }
.box-mensal { background: transparent; border: 1px solid rgba(107, 50, 140, 0.2); }

.box-anual h3, .box-anual .price-sub { color: var(--offwhite); }
.box-mensal h3 { color: var(--roxo); }
.dark-sub { color: var(--cinza-texto) !important; }

.price-number { font-size: 48px; color: var(--terra); font-family: var(--font-heading); font-weight: 700; }
.price-number span { font-size: 18px; font-weight: 600; color: var(--offwhite); }
.dark-num { color: var(--beringela); }
.dark-num span { color: var(--roxo); }

.list-light li { color: var(--offwhite); }
.list-light li::before { color: var(--terra); }
.list-dark li { color: var(--cinza-texto); }
.list-dark li::before { color: var(--roxo); }

.tag-destaque { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--terra); color: #fff; padding: 5px 15px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;}

.lp-list li { font-size: 17px; margin-bottom: 12px; position: relative; padding-left: 25px; line-height: 1.4; font-weight: 600;}
.lp-list li::before { content: '\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; left: 0; top: 2px; font-size: 14px; }

/* =========================================
   FAQ E FOOTER
========================================= */
details { background: var(--offwhite); padding: 20px; margin-bottom: 15px; border-radius: 8px; cursor: pointer; border: 1px solid rgba(107, 50, 140, 0.1); transition: 0.3s; }
summary { font-family: var(--font-heading); font-size: 22px; color: var(--roxo); font-weight: 700; outline: none; list-style: none; display: flex; justify-content: space-between; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '\f067'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 16px; color: var(--terra); transition: 0.3s; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin-top: 15px; font-size: 16px; margin-bottom: 0; font-weight: 500; }

.feedback-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }

.footer { border-top: 1px solid rgba(107, 50, 140, 0.1); background: var(--offwhite); }
.footer-logo { width: 80px; opacity: 0.4; filter: grayscale(100%); margin-bottom: 15px; }
.footer-copy { font-size: 13px; color: var(--cinza-texto); margin-bottom: 5px; }
.footer-link { font-size: 12px; color: var(--roxo); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

/* NAVEGAÇÃO FLUTUANTE & WHATSAPP */
.floating-nav { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 999; display: flex; flex-direction: column; gap: 10px; opacity: 0; pointer-events: none; transition: 0.5s; }
.floating-nav.visible { opacity: 1; pointer-events: auto; }
.nav-arrow-btn { background: var(--offwhite); color: var(--roxo); border: 1px solid rgba(107, 50, 140, 0.1); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.whatsapp-float { position: fixed; bottom: 20px; right: 20px; width: 55px; height: 55px; background: var(--verde); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; z-index: 999; box-shadow: 0 4px 15px rgba(0,0,0,0.2); opacity: 0; pointer-events: none; transition: 0.4s; }
.whatsapp-float.visible { opacity: 1; pointer-events: auto; }

/* =========================================
   MOBILE
========================================= */
@media (max-width: 999px) {
    #lp-logo-header { left: 20px; top: 20px; }
    #lp-logo-header img { width: 110px; }
    
    .floating-hamburger { top: 20px; right: 20px; width: 35px; height: 25px; }
    .floating-hamburger .line { height: 2px; }

    .main-sticky-title { font-size: 34px; }
    .hero-content-below { margin-top: 50vh; }

    h2 { font-size: 28px; }
    p { font-size: 17px; }
    
    .focus-step { min-height: 40vh; }
    .parallax-img-break { height: 35vh; }

    .accordion-wrapper { flex-direction: column; height: auto; }
    .accordion-item { flex: none; height: 80px; width: 100%; }
    .accordion-item.active-mobile { height: auto !important; min-height: 380px; padding-bottom: 20px; }
    .accordion-title-vert { writing-mode: horizontal-tb; transform: translateY(-50%); bottom: auto; top: 50%; left: 20px; font-size: 20px; text-shadow: 1px 1px 5px rgba(0,0,0,0.9); }
    .accordion-content h3 { font-size: 24px; }
    
    .floating-nav { bottom: 90px; top: auto; transform: none; flex-direction: row; right: 20px; }
}