/* ============================================================
   EspiritualMente — Tema Visual
   Paleta: Amarelo · Verde

   Referências: floresta amazônica, mata atlântica, ayahuasca,
   plantas sagradas, chakana, mandala viva, luz que entra pela
   folhagem — espiritualidade com o pé no chão.
   ============================================================ */

/* ============================================================
   PALETA ESPIRITUALMENTE
   ============================================================ */
:root {
    /* Fundos escuros (floresta à noite, profundidade) */
    --esp-bg:          #080D0A;
    --esp-bg-alt:      #0E1510;
    --esp-bg-sect:     #131C16;
    --esp-surf:        #1A2620;
    --esp-surf-2:      #22302A;

    /* Fundo claro (claro da floresta, papel vegetal) */
    --esp-paper:       #F2F8F4;
    --esp-paper-alt:   #E7F2EB;
    --esp-paper-surf:  #FFFFFF;
    --esp-paper-surf2: #EEF7F1;

    /* Amarelo — sol entre as folhas, clareza, consciência */
    --esp-yellow:      #D4A835;
    --esp-yellow-mid:  #E8C25A;
    --esp-yellow-pale: #FFF5D0;
    --esp-yellow-dark: #9E7520;

    /* Verde — floresta, cura, enraizamento, expansão */
    --esp-green:       #2A6B4A;
    --esp-green-mid:   #3E8E65;
    --esp-green-light: #6BBD90;
    --esp-green-deep:  #163C28;
    --esp-green-pale:  #C8EDD8;

    /* Texto — escuro (sobre fundos escuros) */
    --esp-txt:         #ECF5F0;
    --esp-txt-soft:    rgba(236,245,240,0.68);
    --esp-txt-muted:   rgba(236,245,240,0.36);

    /* Texto — claro (sobre fundos claros) */
    --esp-txt-dark:       #0D1810;
    --esp-txt-dark-soft:  rgba(13,24,16,0.64);
    --esp-txt-dark-muted: rgba(13,24,16,0.38);

    /* Bordas */
    --esp-border-dk:   rgba(42,107,74,0.13);
    --esp-border-lt:   rgba(13,24,16,0.09);

    /* Padrão onda orgânica (respiração da floresta) */
    --onda-dk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 30 Q15 12 30 30 Q45 48 60 30' fill='none' stroke='rgba(42%2C107%2C74%2C0.08)' stroke-width='1'/%3E%3Cpath d='M0 50 Q15 32 30 50 Q45 68 60 50' fill='none' stroke='rgba(212%2C168%2C53%2C0.05)' stroke-width='1'/%3E%3C/svg%3E");
    --onda-lt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 30 Q15 12 30 30 Q45 48 60 30' fill='none' stroke='rgba(42%2C107%2C74%2C0.06)' stroke-width='1'/%3E%3C/svg%3E");
}

/* ============================================================
   OVERRIDE GLOBAL PARA ESTA PÁGINA
   ============================================================ */
.theme-esp-vivo {
    --color-bg:             var(--esp-bg);
    --color-bg-alt:         var(--esp-bg-alt);
    --color-surface:        var(--esp-surf);
    --color-surface-hover:  var(--esp-surf-2);
    --color-border:         var(--esp-border-dk);
    --color-text:           var(--esp-txt);
    --color-text-soft:      var(--esp-txt-soft);
    --color-text-muted:     var(--esp-txt-muted);
    --accent:               var(--esp-yellow);
    --accent-light:         var(--esp-yellow-mid);
    --accent-dark:          var(--esp-yellow-dark);
}

/* Herança global de componentes */
.theme-esp-vivo .feature-card {
    background: var(--esp-surf);
    border-color: var(--esp-border-dk);
}
.theme-esp-vivo .feature-card:hover {
    border-color: var(--esp-green-mid);
    box-shadow: 0 6px 28px rgba(42,107,74,0.14);
}
.theme-esp-vivo .feature-card__icon {
    background: rgba(42,107,74,0.14);
    color: var(--esp-green-light);
}
.theme-esp-vivo .feature-card__title { color: var(--esp-txt); }
.theme-esp-vivo .feature-card__text  { color: var(--esp-txt-soft); }

.theme-esp-vivo .timeline::before    { background: var(--esp-border-dk); }
.theme-esp-vivo .timeline-item__dot  { background: var(--esp-green-mid); color: #0D1810; }
.theme-esp-vivo .timeline-item__title { color: var(--esp-txt); }
.theme-esp-vivo .timeline-item__text  { color: var(--esp-txt-soft); }

.theme-esp-vivo .faq-item            { border-bottom-color: var(--esp-border-dk); }
.theme-esp-vivo .faq-question        { color: var(--esp-txt); }
.theme-esp-vivo .faq-question:hover  { color: var(--esp-green-light); }
.theme-esp-vivo .faq-question__icon  { background: var(--esp-surf); }
.theme-esp-vivo .faq-question__icon i { color: var(--esp-green-light); }
.theme-esp-vivo .faq-item.open .faq-question__icon { background: var(--esp-green); }
.theme-esp-vivo .faq-item.open .faq-question__icon i { color: #ECF5F0; }
.theme-esp-vivo .faq-answer__inner   { color: var(--esp-txt-soft); }

.theme-esp-vivo .content-block p     { color: var(--esp-txt-soft); }
.theme-esp-vivo .content-block h3    { color: var(--esp-txt); }
.theme-esp-vivo .simple-list li      { color: var(--esp-txt-soft); }
.theme-esp-vivo .simple-list li::before { background: var(--esp-green-mid); }

.theme-esp-vivo .highlight-box {
    background: rgba(42,107,74,0.08);
    border-left-color: var(--esp-green-mid);
}
.theme-esp-vivo .highlight-box p { color: var(--esp-txt-soft); }

.theme-esp-vivo .value-item          { background: var(--esp-surf); border-color: var(--esp-border-dk); }
.theme-esp-vivo .value-item i        { color: var(--esp-green-light); }

/* ============================================================
   HERO — CULTURA DA FLORESTA
   ============================================================ */
.esp-hero {
    background:
        radial-gradient(ellipse 55% 70% at 18% 65%, rgba(42,107,74,0.32) 0%, transparent 62%),
        radial-gradient(ellipse 42% 52% at 82% 22%, rgba(212,168,53,0.16) 0%, transparent 56%),
        radial-gradient(ellipse 36% 42% at 55% 92%, rgba(22,60,40,0.38) 0%, transparent 52%),
        var(--onda-dk),
        var(--esp-bg);
    background-size: auto, auto, auto, 60px 60px, auto;
    padding: calc(var(--header-total) + 5rem) 0 0;
    position: relative;
    overflow: hidden;
    min-height: 92vh;
    display: flex;
    flex-direction: column;
}

/* Faixa lateral — sunlight entering the forest */
.esp-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom,
        var(--esp-yellow) 0%,
        var(--esp-green-mid) 30%,
        var(--esp-green) 70%,
        var(--esp-green-deep) 100%);
    z-index: 2;
}

.esp-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    flex: 1;
    padding-bottom: 2rem;
}

.esp-hero__content { position: relative; z-index: 1; }

.esp-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}
.esp-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.28rem 0.88rem;
    border-radius: 100px;
    font-size: 0.73rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.esp-hero__badge--green {
    background: rgba(42,107,74,0.28);
    color: var(--esp-green-light);
    border: 1px solid rgba(107,189,144,0.28);
}
.esp-hero__badge--yellow {
    background: var(--esp-yellow);
    color: #080D0A;
}
.esp-hero__badge--outline {
    background: transparent;
    color: var(--esp-txt-soft);
    border: 1px solid var(--esp-border-dk);
}

.esp-hero__title {
    font-size: clamp(2.6rem, 5.5vw, 4.5rem);
    font-weight: 900;
    color: var(--esp-txt);
    line-height: 1.06;
    margin-bottom: 1.25rem;
    letter-spacing: -0.03em;
}
.esp-hero__title .acc-g  { color: var(--esp-green-light); }
.esp-hero__title .acc-y  { color: var(--esp-yellow-mid); }

.esp-hero__sub {
    font-size: 1.08rem;
    color: var(--esp-txt-soft);
    line-height: 1.78;
    margin-bottom: 2.25rem;
    max-width: 500px;
}

.esp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.esp-hero__actions .btn-primary {
    background: var(--esp-green);
    color: var(--esp-paper);
    font-weight: 700;
}
.esp-hero__actions .btn-primary:hover {
    background: var(--esp-green-mid);
    color: var(--esp-paper);
    box-shadow: 0 4px 24px rgba(42,107,74,0.35);
}
.esp-hero__actions .btn-secondary {
    border-color: rgba(212,168,53,0.30);
    color: var(--esp-yellow-mid);
    background: rgba(212,168,53,0.09);
}
.esp-hero__actions .btn-secondary:hover {
    background: rgba(212,168,53,0.18);
    border-color: rgba(212,168,53,0.50);
    color: var(--esp-yellow-mid);
    transform: translateY(-2px);
}

/* Mandala visual à direita */
.esp-hero__visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.esp-mandala-svg {
    width: 100%;
    max-width: 380px;
    height: auto;
    filter: drop-shadow(0 0 60px rgba(42,107,74,0.30));
    animation: esp-breathe 7s ease-in-out infinite;
}
@keyframes esp-breathe {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.03); opacity: 0.90; }
}
@media (prefers-reduced-motion: reduce) {
    .esp-mandala-svg { animation: none; }
}

/* Onda orgânica na base do hero */
.esp-hero__wave {
    display: block;
    line-height: 0;
    flex-shrink: 0;
}
.esp-hero__wave svg {
    display: block;
    width: 100%;
}

/* ============================================================
   SEÇÕES — DARK floresta (padrão onda)
   ============================================================ */
.esp-dark-section {
    background-color: var(--esp-bg-sect);
    background-image: var(--onda-dk);
    background-size: 60px 60px;
}

/* ============================================================
   SEÇÕES — LIGHT (claro da floresta, papel vegetal)
   ============================================================ */
.esp-light {
    background-color: var(--esp-paper);
    background-image: var(--onda-lt);
    background-size: 60px 60px;
}
.esp-light .section-label  { color: var(--esp-green); }
.esp-light .section-title  { color: var(--esp-txt-dark); }
.esp-light .section-subtitle { color: var(--esp-txt-dark-soft); }
.esp-light p,
.esp-light li              { color: var(--esp-txt-dark-soft); }
.esp-light .content-block p { color: var(--esp-txt-dark-soft); }
.esp-light .content-block h3 { color: var(--esp-txt-dark); }

.esp-light .feature-card {
    background: var(--esp-paper-surf);
    border-color: var(--esp-border-lt);
    color: var(--esp-txt-dark);
}
.esp-light .feature-card:hover {
    border-color: var(--esp-green-mid);
    box-shadow: 0 6px 24px rgba(42,107,74,0.10);
}
.esp-light .feature-card__icon {
    background: rgba(42,107,74,0.10);
    color: var(--esp-green);
}
.esp-light .feature-card__title { color: var(--esp-txt-dark); }
.esp-light .feature-card__text  { color: var(--esp-txt-dark-soft); }

.esp-light .faq-item            { border-bottom-color: var(--esp-border-lt); }
.esp-light .faq-question        { color: var(--esp-txt-dark); }
.esp-light .faq-question:hover  { color: var(--esp-green); }
.esp-light .faq-question__icon  { background: rgba(42,107,74,0.08); }
.esp-light .faq-question__icon i { color: var(--esp-green); }
.esp-light .faq-item.open .faq-question__icon { background: var(--esp-green); }
.esp-light .faq-item.open .faq-question__icon i { color: #F2F8F4; }
.esp-light .faq-answer__inner   { color: var(--esp-txt-dark-soft); }

.esp-light .simple-list li      { color: var(--esp-txt-dark-soft); }
.esp-light .simple-list li::before { background: var(--esp-green); }

.esp-light .highlight-box {
    background: rgba(42,107,74,0.07);
    border-left-color: var(--esp-green);
}
.esp-light .highlight-box p  { color: var(--esp-txt-dark-soft); }

.esp-light .value-item {
    background: var(--esp-paper-surf);
    border-color: var(--esp-border-lt);
    color: var(--esp-txt-dark);
}
.esp-light .value-item i { color: var(--esp-green); }

.esp-light .timeline-item__dot { background: var(--esp-green); color: #F2F8F4; }
.esp-light .timeline::before   { background: var(--esp-border-lt); }
.esp-light .timeline-item__title { color: var(--esp-txt-dark); }
.esp-light .timeline-item__text  { color: var(--esp-txt-dark-soft); }

/* ============================================================
   PRINCÍPIOS — FAIXA TRICOLOR
   ============================================================ */
.esp-principios-strip {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.esp-principio-block {
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* círculos orgânicos de fundo */
.esp-principio-block::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Ccircle cx='25' cy='25' r='12' fill='none' stroke='rgba(255%2C255%2C255%2C0.05)' stroke-width='1'/%3E%3C/svg%3E") center/50px 50px;
    pointer-events: none;
}
.esp-principio-block--deep   { background: var(--esp-green-deep); }
.esp-principio-block--yellow { background: var(--esp-yellow); }
.esp-principio-block--green  { background: var(--esp-green); }

.esp-principio-block__icon {
    font-size: 2.2rem;
    margin-bottom: 0.75rem;
    position: relative; z-index: 1;
    display: block; line-height: 1;
}
.esp-principio-block--deep   .esp-principio-block__icon { color: rgba(236,245,240,0.70); }
.esp-principio-block--yellow .esp-principio-block__icon { color: rgba(8,13,10,0.50); }
.esp-principio-block--green  .esp-principio-block__icon { color: rgba(236,245,240,0.80); }

.esp-principio-block__title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
    position: relative; z-index: 1;
}
.esp-principio-block--deep   .esp-principio-block__title { color: #ECF5F0; }
.esp-principio-block--yellow .esp-principio-block__title { color: #080D0A; }
.esp-principio-block--green  .esp-principio-block__title { color: #ECF5F0; }

.esp-principio-block__text {
    font-size: 0.83rem;
    line-height: 1.58;
    position: relative; z-index: 1;
    max-width: 220px;
    margin: 0 auto;
}
.esp-principio-block--deep   .esp-principio-block__text { color: rgba(236,245,240,0.55); }
.esp-principio-block--yellow .esp-principio-block__text { color: rgba(8,13,10,0.58); }
.esp-principio-block--green  .esp-principio-block__text { color: rgba(236,245,240,0.65); }

/* ============================================================
   CARDS DE TERAPIAS — borda lateral verde
   ============================================================ */
.esp-terapia-card {
    background: var(--esp-surf);
    border: 1px solid var(--esp-border-dk);
    border-left: 3px solid var(--esp-green-mid);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.75rem 1.75rem 1.5rem;
    margin-bottom: 1.25rem;
    transition: var(--transition);
}
.esp-terapia-card:hover {
    border-left-color: var(--esp-yellow);
    transform: translateX(3px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.20);
}
.esp-terapia-card__icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--esp-green-light);
}
.esp-terapia-card__icon i { font-size: 1.1rem; }
.esp-terapia-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--esp-txt);
    margin-bottom: 0.5rem;
}
.esp-terapia-card p {
    font-size: 0.91rem;
    color: var(--esp-txt-soft);
    line-height: 1.68;
    margin-bottom: 0.75rem;
}
.esp-terapia-card p:last-child { margin-bottom: 0; }
.esp-terapia-card .simple-list { margin-top: 0.5rem; }
.esp-terapia-card .highlight-box {
    background: rgba(212,168,53,0.07);
    border-left-color: var(--esp-yellow);
    margin: 1rem 0 0;
}
.esp-terapia-card .highlight-box p { color: var(--esp-txt-soft); }

/* ============================================================
   CONTATO — CARDS VERDES
   ============================================================ */
.esp-contato-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    max-width: 800px;
    margin: 0 auto;
}
.esp-contato-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--esp-surf);
    border: 1px solid var(--esp-border-dk);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--esp-txt);
    transition: var(--transition);
}
.esp-contato-item:hover {
    border-color: var(--esp-green-mid);
    background: var(--esp-surf-2);
    color: var(--esp-txt);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(42,107,74,0.15);
}
.esp-contato-item__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(42,107,74,0.16);
    color: var(--esp-green-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.esp-contato-item__text strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--esp-txt);
    margin-bottom: 0.15rem;
}
.esp-contato-item__text span {
    font-size: 0.84rem;
    color: var(--esp-txt-soft);
}

/* ============================================================
   CTA — CHAMADO DA FLORESTA
   ============================================================ */
.esp-cta-section {
    background:
        linear-gradient(135deg, var(--esp-green-deep) 0%, var(--esp-bg) 40%, var(--esp-bg) 60%, rgba(158,117,32,0.07) 100%);
    padding: var(--section-py) 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.esp-cta-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(to right, var(--esp-green-deep), var(--esp-green-mid) 35%, var(--esp-yellow-mid) 65%, var(--esp-green));
}
.esp-cta-section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(to right, var(--esp-yellow-dark), var(--esp-green-mid) 50%, var(--esp-yellow));
}
.esp-cta-bg-pattern {
    position: absolute;
    inset: 0;
    background-image: var(--onda-dk);
    background-size: 60px 60px;
    opacity: 0.7;
    pointer-events: none;
}
.esp-cta-section .container { position: relative; z-index: 1; }

.esp-cta-title {
    font-size: clamp(1.8rem, 4vw, 2.9rem);
    font-weight: 900;
    color: var(--esp-txt);
    margin-bottom: 0.85rem;
    letter-spacing: -0.025em;
    line-height: 1.12;
}
.esp-cta-title .acc-g  { color: var(--esp-green-light); }
.esp-cta-title .acc-y  { color: var(--esp-yellow-mid); }

.esp-cta-sub {
    font-size: 1.1rem;
    color: var(--esp-txt-soft);
    margin-bottom: 2.25rem;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.78;
}
.esp-cta-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.esp-cta-actions .btn-primary {
    background: var(--esp-green-mid);
    color: #F2F8F4;
    font-weight: 800;
}
.esp-cta-actions .btn-primary:hover {
    background: var(--esp-green-light);
    color: #080D0A;
}
.esp-cta-actions .btn-secondary {
    border-color: rgba(212,168,53,0.30);
    color: var(--esp-yellow-mid);
    background: rgba(212,168,53,0.09);
}
.esp-cta-actions .btn-secondary:hover {
    background: rgba(212,168,53,0.20);
    border-color: rgba(212,168,53,0.52);
    color: var(--esp-yellow-mid);
    transform: translateY(-2px);
}

/* ============================================================
   AVISO IMPORTANTE — alerta suave (ayahuasca disclaimer)
   ============================================================ */
.esp-aviso {
    background: rgba(212,168,53,0.07);
    border: 1px solid rgba(212,168,53,0.18);
    border-left: 3px solid var(--esp-yellow);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: var(--esp-txt-soft);
    line-height: 1.65;
}
.esp-aviso strong {
    color: var(--esp-yellow-mid);
    font-weight: 700;
}

/* ============================================================
   SECTION LABEL VERDE (override do default amarelo)
   ============================================================ */
.esp-label-green {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--esp-green-light);
    margin-bottom: 0.75rem;
}
.esp-label-green i { font-size: 0.85em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .esp-hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
        padding-bottom: 0;
    }
    .esp-hero__sub     { max-width: 100%; margin-left: auto; margin-right: auto; }
    .esp-hero__actions { justify-content: center; }
    .esp-hero__badges  { justify-content: center; }
    .esp-hero__visual  { display: none; }
    .esp-principios-strip { grid-template-columns: 1fr; }
}