/* ana-vibrante.css — Skin própria pra Ana Quintaes (V6.7.0.c).
 *
 * Identidade visual fornecida pela cliente:
 *   - 4 cores: #4abd2c verde, #3bb8df azul, #db55f1 rosa, #ffbe42 amarelo
 *   - Fontes: Para (título), More Sugar (destaque), Raleway (body)
 *   - Vibe: psicopedagogia/neuroaprendizagem, espiral, psicodélico calibrado
 *
 * Fontes Para e More Sugar são comerciais (não Google). Skin usa fallbacks
 * Newsreader + Sour Gummy via Google até receber arquivos .woff2 reais — daí
 * basta editar 2 vars (--lp-font-display, --lp-font-display-fun) e adicionar
 * @font-face. Estrutura/sizing/peso preservados.
 *
 * Princípio "sem carnaval": cor 100% só em hover/badge/CTA/gradient. Tons
 * pale/soft dominam em bgs e bordas. Hierarquia tipográfica é a estrutura.
 *
 * 1 cor accent por página: home usa as 4 ponderadas. Páginas internas
 * sobrescrevem --accent via classe .page-<slug> emitida pelo header.php.
 *
 * Spec: docs/specs/v6-7-0-c-skin-ana-vibrante.md
 * Mock fonte: previews/skin-ana-premium/E.html
 */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..600&family=Sour+Gummy:ital,wght@0,400..700;1,400..700&family=Raleway:wght@300..700&display=swap');

/* ═══════════════════════════════════════════════════════════════════════
 * 1. TOKENS — paleta + tipografia + densidade
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante {
    /* V-tema-fase2.3 — cor/tipografia (--lp-* + --ana-*) movidas pra
     * palettes/ana-vibrante.css + type/ana-vibrante.css. Regras .page-{slug}
     * abaixo continuam trocando --lp-accent pra outro --ana-*. */

    /* ─── Forma + sombra ────────────────────────────────── */
    --lp-radius-base    : 12px;
    --lp-radius-control : 9999px;
    --lp-radius-surface : 20px;
    --lp-nav-underline       : 0;
    --lp-nav-hover-bg        : color-mix(in srgb, var(--lp-accent) 12%, transparent);
    --lp-radius-large        : 28px;
    --lp-shadow-card         : 0 18px 44px rgba(31, 29, 24, 0.10);
    --lp-shadow-strong       : 0 28px 80px rgba(31, 29, 24, 0.16);
    --ana-text-glow          : 0 1px 5px color-mix(in srgb, var(--lp-on-surface) 72%, transparent);
    --lp-border-card         : 2px solid var(--lp-border);

    /* ─── Densidade editorial generosa ──────────────────── */
    --lp-density             : 1.20;
    --lp-section-y           : var(--sp-section);
    --lp-container-w         : 1180px;
    --lp-stack-md            : var(--sp-3);

    --lp-cta-success         : var(--ana-green);
    --lp-cta-success-strong  : var(--ana-green-deep);

    --lp-motion-duration     : 320ms;
    --lp-motion-easing       : cubic-bezier(.4, 0, .2, 1);
    --lp-motion-distance     : 4px;
    --lp-motion-stagger      : 80ms;
    --lp-motion-ambient      : rotate;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2. PAGE ACCENTS — 1 cor por página interna (diferencial Ana)
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante.page-sobre,
.skin-ana-vibrante.page-contato {
    --lp-accent: var(--ana-green);
    --lp-accent-soft: var(--ana-green-soft);
    --lp-accent-pale: var(--ana-green-pale);
    --lp-accent-deep: var(--ana-green-deep);
    --lp-accent-strong: var(--ana-green-deep);
    --lp-accent-weak: var(--ana-green-pale);
}
.skin-ana-vibrante.page-servicos,
.skin-ana-vibrante.page-para-pais {
    --lp-accent: var(--ana-blue);
    --lp-accent-soft: var(--ana-blue-soft);
    --lp-accent-pale: var(--ana-blue-pale);
    --lp-accent-deep: var(--ana-blue-deep);
    --lp-accent-strong: var(--ana-blue-deep);
    --lp-accent-weak: var(--ana-blue-pale);
}
.skin-ana-vibrante.page-oficina,
.skin-ana-vibrante.page-para-educadores {
    --lp-accent: var(--ana-pink);
    --lp-accent-soft: var(--ana-pink-soft);
    --lp-accent-pale: var(--ana-pink-pale);
    --lp-accent-deep: var(--ana-pink-deep);
    --lp-accent-strong: var(--ana-pink-deep);
    --lp-accent-weak: var(--ana-pink-pale);
}
.skin-ana-vibrante.page-pesquisa {
    --lp-accent: var(--ana-yellow);
    --lp-accent-soft: var(--ana-yellow-soft);
    --lp-accent-pale: var(--ana-yellow-pale);
    --lp-accent-deep: var(--ana-yellow-deep);
    --lp-accent-strong: var(--ana-yellow-deep);
    --lp-accent-weak: var(--ana-yellow-pale);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 3. TIPOGRAFIA GLOBAL — sobrescreve _base.css
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante,
.skin-ana-vibrante body,
.skin-ana-vibrante p,
.skin-ana-vibrante li {
    font-family: var(--lp-font-body);
    font-size: var(--fs-base);
    line-height: var(--lp-lh-body);
    color: var(--lp-on-surface);
}

/* V8.7 fix CW — :where() em h1-h6 pra disciplina cravada (skin nao
 * vence bloco em especificidade de elemento). Esta skin NAO seta
 * font-size — so font-family/variation/line-height/letter-spacing/color.
 * Logo zero regressao visual esperada nos sites MRR (Ana): o output
 * computed style permanece o mesmo, so a especificidade diminui.
 * Utilitario .heading-display MANTEM classe (opt-in). */
.skin-ana-vibrante :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 72, "wght" 580;
    line-height: var(--lp-lh-display);
    letter-spacing: var(--lp-tracking);
    color: var(--lp-on-surface);
}
.skin-ana-vibrante .heading-display {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 72, "wght" 580;
    line-height: var(--lp-lh-display);
    letter-spacing: var(--lp-tracking);
    color: var(--lp-on-surface);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 4. EYEBROWS — pattern universal com bolinha colorida
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante [class*="__eyebrow"] {
    font-family: var(--lp-font-body);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lp-accent-deep);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}
.skin-ana-vibrante [class*="__eyebrow"]::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    background: var(--lp-accent);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--lp-accent-pale);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 5. CTA UNIVERSAL — pill sólido com hover lift + sombra
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante [class*="__cta"]:not([class*="--wa"]):not([class*="__cta-"]),
.skin-ana-vibrante [class*="__button"]:not([class*="__button-"]) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--lp-accent);
    color: var(--lp-accent-on);
    border: 2px solid var(--lp-accent);
    border-radius: var(--lp-radius-btn);
    padding: 1rem 1.875rem;
    font-family: var(--lp-font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: all 280ms var(--lp-motion-easing);
}
.skin-ana-vibrante [class*="__cta"]:not([class*="--wa"]):not([class*="__cta-"]):hover,
.skin-ana-vibrante [class*="__button"]:not([class*="__button-"]):hover {
    background: var(--lp-accent-deep);
    border-color: var(--lp-accent-deep);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(31, 29, 24, 0.18);
    color: var(--lp-accent-on);
}

/* Variant secondary/ghost — outline */
.skin-ana-vibrante [class*="__cta--secondary"],
.skin-ana-vibrante [class*="__cta--ghost"],
.skin-ana-vibrante [class*="__button--ghost"] {
    background: transparent;
    color: var(--lp-on-surface);
    border-color: var(--lp-on-surface);
}
.skin-ana-vibrante [class*="__cta--secondary"]:hover,
.skin-ana-vibrante [class*="__cta--ghost"]:hover,
.skin-ana-vibrante [class*="__button--ghost"]:hover {
    background: var(--lp-on-surface);
    color: var(--lp-surface);
    border-color: var(--lp-on-surface);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 6. PAGE-HERO (P0 — 23 instâncias)
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante .block-page-hero {
    background: var(--lp-surface);
    padding: 5rem 0 4rem;
    position: relative;
    overflow: hidden;
}
.skin-ana-vibrante .block-page-hero::before {
    content: "";
    position: absolute;
    top: -15%;
    right: -8%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, var(--ana-yellow-pale) 0%, transparent 65%);
    opacity: 0.5;
    pointer-events: none;
    border-radius: 50%;
}
.skin-ana-vibrante .block-page-hero::after {
    content: "";
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--ana-pink-pale) 0%, transparent 65%);
    opacity: 0.42;
    pointer-events: none;
    border-radius: 50%;
}
.skin-ana-vibrante .block-page-hero__inner {
    position: relative;
    z-index: 1;
}
.skin-ana-vibrante .block-page-hero__heading {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 144, "wght" 580;
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--lp-on-surface);
}
.skin-ana-vibrante .block-page-hero__heading-accent {
    font-family: var(--lp-font-display-fun);
    font-weight: var(--lp-fw-display-override, 700);
    font-style: normal;
    letter-spacing: -0.005em;
    background: linear-gradient(120deg, var(--ana-pink) 0%, var(--ana-yellow) 50%, var(--ana-green) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}
.skin-ana-vibrante .block-page-hero__lead {
    font-family: var(--lp-font-body);
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--lp-on-surface-muted);
    margin-top: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 7. HERO-LP (P2 — 2 instâncias) — variant fullbleed/overlay
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante .block-hero-lp {
    background: var(--lp-surface);
}
.skin-ana-vibrante .block-hero-lp__heading {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 144, "wght" 580;
    color: var(--lp-on-surface);
}
.skin-ana-vibrante .block-hero-lp__heading-accent {
    font-family: var(--lp-font-display-fun);
    font-weight: var(--lp-fw-display-override, 700);
    font-style: normal;
    background: linear-gradient(120deg, var(--ana-pink) 0%, var(--ana-yellow) 50%, var(--ana-green) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* Fullbleed: texto branco sobre overlay */
.skin-ana-vibrante .block-hero-lp--fullbleed .block-hero-lp__heading,
.skin-ana-vibrante .block-hero-lp--fullbleed .block-hero-lp__heading-main,
.skin-ana-vibrante .block-hero-lp--fullbleed h1 {
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}
.skin-ana-vibrante .block-hero-lp--fullbleed .block-hero-lp__eyebrow,
.skin-ana-vibrante .block-hero-lp--fullbleed .block-hero-lp__lead {
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
/* Pill do eyebrow escuro (texto branco): o bloco desenha pill claro accent-weak. */
.skin-ana-vibrante .block-hero-lp--fullbleed .block-hero-lp__eyebrow {
    background: rgba(15, 17, 21, 0.62);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--lp-surface-3) !important;
}
.skin-ana-vibrante .block-hero-lp--fullbleed .block-hero-lp__cta--primary {
    background: var(--lp-accent);
    color: #fff;
    border-color: var(--lp-accent);
}
.skin-ana-vibrante .block-hero-lp--fullbleed .block-hero-lp__cta--secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.85);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 8. CTA-BANNER-IMAGE (P0 — 20 instâncias)
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante .block-cta-banner-image__heading {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 96, "wght" 600;
    color: inherit;
}

/* Variant overlay-*: já tem bg image; texto branco funciona; só tipografia */
.skin-ana-vibrante .block-cta-banner-image--overlay-left .block-cta-banner-image__heading,
.skin-ana-vibrante .block-cta-banner-image--overlay-center .block-cta-banner-image__heading,
.skin-ana-vibrante .block-cta-banner-image--overlay-right .block-cta-banner-image__heading {
    font-family: var(--lp-font-display);
}

/* Variant split-image: bg porcelana + texto escuro + foto editorial.
 * Antes bug: herda color:#fff do __inner. Aqui override. */
.skin-ana-vibrante .block-cta-banner-image--split-image {
    background: linear-gradient(135deg, var(--ana-green) 0%, var(--ana-blue) 35%, var(--ana-pink) 70%, var(--ana-yellow) 100%);
    color: var(--lp-on-scrim);
    --lp-on-surface: var(--lp-on-scrim);
    --block-cta-button-bg: var(--lp-accent-deep);
    border-radius: var(--lp-radius-large);
    margin: 4rem 2rem;
    max-width: 84rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
}
.skin-ana-vibrante .block-cta-banner-image--split-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23ffffff' stroke-width='1' opacity='.18'><path d='M100 100 m-10 0 a 10 10 0 1 1 20 0 a 20 20 0 1 1 -40 0 a 30 30 0 1 1 60 0 a 40 40 0 1 1 -80 0 a 50 50 0 1 1 100 0 a 60 60 0 1 1 -120 0 a 70 70 0 1 1 140 0'/></svg>") no-repeat center / 60% auto;
    pointer-events:none;
}
.skin-ana-vibrante .block-cta-banner-image--split-image .block-cta-banner-image__inner {
    position: relative;
    color: var(--lp-on-scrim);
    padding: 4rem 2rem;
}
.skin-ana-vibrante .block-cta-banner-image--split-image .block-cta-banner-image__heading {
    color: var(--lp-on-scrim);
    text-shadow: var(--ana-text-glow);
}
.skin-ana-vibrante .block-cta-banner-image--split-image .block-cta-banner-image__lead {
    color: var(--lp-on-scrim);
    text-shadow: var(--ana-text-glow);
    font-family: var(--lp-font-body);
}
.skin-ana-vibrante .block-cta-banner-image--split-image .block-cta-banner-image__cta {
    background: var(--lp-accent-deep) !important;
    color: var(--lp-on-scrim) !important;
    border-color: var(--lp-accent-deep) !important;
    text-shadow: var(--ana-text-glow);
}
.skin-ana-vibrante .block-cta-banner-image--split-image .block-cta-banner-image__cta:hover {
    background: var(--lp-on-surface);
    color: #fff;
    border-color: var(--lp-on-surface);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 9. IMAGE-TEXT-SPLIT (P0 — 18 instâncias, 4 variants)
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante .block-image-text-split__heading {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 72, "wght" 580;
    color: var(--lp-on-surface);
}
.skin-ana-vibrante .block-image-text-split__lead {
    font-family: var(--lp-font-body);
    color: var(--lp-on-surface-muted);
    font-size: 1.125rem;
    line-height: 1.6;
}
.skin-ana-vibrante .block-image-text-split__body {
    color: var(--lp-on-surface-muted);
    line-height: 1.75;
}
.skin-ana-vibrante .block-image-text-split__media {
    border-radius: var(--lp-radius-card);
    overflow: hidden;
    box-shadow: var(--lp-shadow-card);
    position: relative;
}
/* Decoração de fundo nos variants padrão */
.skin-ana-vibrante .block-image-text-split--left .block-image-text-split__media,
.skin-ana-vibrante .block-image-text-split--right .block-image-text-split__media {
    position: relative;
}
.skin-ana-vibrante .block-image-text-split--left .block-image-text-split__media::after,
.skin-ana-vibrante .block-image-text-split--right .block-image-text-split__media::after {
    content: "";
    position: absolute;
    top: -25px;
    right: -25px;
    width: 150px;
    height: 150px;
    background: var(--lp-accent);
    border-radius: 50%;
    opacity: 0.32;
    z-index: -1;
}

/* Variant fullbleed: respiração editorial, texto centralizado */
@media (min-width: 1024px) {
    .skin-ana-vibrante .block-image-text-split__inner--fullbleed .block-image-text-split__media {
        max-height: 75vh;
    }
    .skin-ana-vibrante .block-image-text-split__inner--fullbleed .block-image-text-split__text {
        max-width: 36rem;
        margin: 0 auto;
        padding: 2rem 3rem;
    }
}
@media (min-width: 1280px) {
    .skin-ana-vibrante .block-image-text-split__inner--fullbleed .block-image-text-split__text {
        max-width: 40rem;
        padding: 2rem 4rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 10. FEATURE-GRID-RICH (P0 — 14 instâncias) — cards família-de-cor
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante .block-feature-grid-rich {
    background: var(--lp-surface);
    padding: 5rem 0;
}
.skin-ana-vibrante .block-feature-grid-rich__heading {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 96, "wght" 580;
    font-size: clamp(2rem, 3.5vw, 3rem);
    text-align: center;
    margin-bottom: 3.5rem;
}
.skin-ana-vibrante .block-feature-grid-rich__item {
    background: var(--lp-surface-3);
    border: 2px solid var(--lp-border);
    border-radius: var(--lp-radius-card);
    padding: 2.25rem;
    transition: all 320ms var(--lp-motion-easing);
}
.skin-ana-vibrante .block-feature-grid-rich__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 56px rgba(31, 29, 24, 0.10);
}
/* Cards família-de-cor: cycle nas 4 cores */
.skin-ana-vibrante .block-feature-grid-rich__item:nth-child(4n+1) { border-color: var(--ana-green-pale); }
.skin-ana-vibrante .block-feature-grid-rich__item:nth-child(4n+2) { border-color: var(--ana-blue-pale); }
.skin-ana-vibrante .block-feature-grid-rich__item:nth-child(4n+3) { border-color: var(--ana-pink-pale); }
.skin-ana-vibrante .block-feature-grid-rich__item:nth-child(4n+4) { border-color: var(--ana-yellow-pale); }
.skin-ana-vibrante .block-feature-grid-rich__item:nth-child(4n+1):hover { border-color: var(--ana-green); }
.skin-ana-vibrante .block-feature-grid-rich__item:nth-child(4n+2):hover { border-color: var(--ana-blue); }
.skin-ana-vibrante .block-feature-grid-rich__item:nth-child(4n+3):hover { border-color: var(--ana-pink); }
.skin-ana-vibrante .block-feature-grid-rich__item:nth-child(4n+4):hover { border-color: var(--ana-yellow); }
.skin-ana-vibrante .block-feature-grid-rich__icon {
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
}
.skin-ana-vibrante .block-feature-grid-rich__item:nth-child(4n+1) .block-feature-grid-rich__icon { background: var(--ana-green-pale); color: var(--ana-green-deep); }
.skin-ana-vibrante .block-feature-grid-rich__item:nth-child(4n+2) .block-feature-grid-rich__icon { background: var(--ana-blue-pale); color: var(--ana-blue-deep); }
.skin-ana-vibrante .block-feature-grid-rich__item:nth-child(4n+3) .block-feature-grid-rich__icon { background: var(--ana-pink-pale); color: var(--ana-pink-deep); }
.skin-ana-vibrante .block-feature-grid-rich__item:nth-child(4n+4) .block-feature-grid-rich__icon { background: var(--ana-yellow-pale); color: var(--ana-yellow-deep); }
.skin-ana-vibrante .block-feature-grid-rich__title {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 36, "wght" 580;
    font-size: 1.375rem;
    line-height: 1.2;
    color: var(--lp-on-surface);
}
.skin-ana-vibrante .block-feature-grid-rich__description {
    font-family: var(--lp-font-body);
    color: var(--lp-on-surface-muted);
    line-height: 1.65;
}
.skin-ana-vibrante .block-feature-grid-rich__link {
    color: var(--lp-accent);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 11. LEGAL-SECTION (P1)
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante .block-legal-section {
    background: var(--lp-surface-2);
    padding: 4rem 0;
}
.skin-ana-vibrante .block-legal-section__heading {
    font-family: var(--lp-font-display);
    font-size: 1.5rem;
    color: var(--lp-on-surface);
}
.skin-ana-vibrante .block-legal-section__body {
    font-family: var(--lp-font-body);
    color: var(--lp-on-surface-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 12. QUOTE-PULL (P1 — 9 instâncias)
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante .block-quote-pull {
    padding: 5rem 0;
    background: var(--lp-surface);
}
.skin-ana-vibrante .block-quote-pull__inner {
    max-width: 52rem;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
    position: relative;
}
.skin-ana-vibrante .block-quote-pull--with-mark .block-quote-pull__mark {
    font-family: var(--lp-font-display);
    font-size: 6rem;
    line-height: 0.75;
    color: var(--lp-accent);
    opacity: 0.35;
    display: block;
    margin-bottom: -1rem;
}
.skin-ana-vibrante .block-quote-pull__text {
    font-family: var(--lp-font-display);
    font-style: italic;
    font-variation-settings: "opsz" 96, "wght" 500;
    font-size: clamp(1.5rem, 2.8vw, 2.25rem);
    line-height: 1.4;
    letter-spacing: -0.015em;
    color: var(--lp-on-surface);
    margin-bottom: 2rem;
}
.skin-ana-vibrante .block-quote-pull__author {
    font-family: var(--lp-font-body);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--lp-on-surface);
    font-style: normal;
    display: block;
}
.skin-ana-vibrante .block-quote-pull__role {
    font-family: var(--lp-font-body);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lp-accent-deep);
    font-weight: 700;
    display: block;
    margin-top: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 13. PROCESS-STEPS (P1 — 7 instâncias)
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante .block-process-steps {
    padding: 5rem 0;
    background: var(--lp-surface);
}
.skin-ana-vibrante .block-process-steps__heading {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 96, "wght" 580;
    text-align: center;
    margin-bottom: 3rem;
}
.skin-ana-vibrante .block-process-steps__item {
    background: var(--lp-surface-3);
    border: 2px solid var(--lp-accent-pale);
    border-left: 4px solid var(--lp-accent);
    padding: 1.75rem 2rem;
    border-radius: 0 14px 14px 0;
    transition: all 280ms ease;
}
.skin-ana-vibrante .block-process-steps__item:hover {
    transform: translateX(4px);
    border-left-color: var(--lp-accent-deep);
    box-shadow: 0 12px 28px rgba(31, 29, 24, 0.08);
}
.skin-ana-vibrante .block-process-steps__marker {
    width: 3rem;
    height: 3rem;
    background: var(--lp-accent-pale);
    color: var(--lp-accent-deep);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lp-font-display-fun);
    font-weight: 700;
    font-size: 1.5rem;
}
.skin-ana-vibrante .block-process-steps__number {
    font-family: var(--lp-font-display-fun);
    font-weight: 700;
    color: var(--lp-accent-deep);
}
.skin-ana-vibrante .block-process-steps__icon {
    color: var(--lp-accent-deep);
    font-size: 1.5rem;
}
.skin-ana-vibrante .block-process-steps__title {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 36, "wght" 580;
    color: var(--lp-on-surface);
}
.skin-ana-vibrante .block-process-steps__description {
    font-family: var(--lp-font-body);
    color: var(--lp-on-surface-muted);
    line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 14. TESTIMONIALS-CAROUSEL (P1 — 5 instâncias)
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante .block-testimonials-carousel {
    padding: 5rem 0;
    background: var(--lp-surface-2);
}
.skin-ana-vibrante .block-testimonials-carousel__heading {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 96, "wght" 580;
    text-align: center;
    margin-bottom: var(--sp-4-5);
}
.skin-ana-vibrante .block-testimonials-carousel__slide {
    background: var(--lp-surface-3);
    border: 2px solid var(--lp-accent-pale);
    border-radius: var(--lp-radius-card);
    padding: var(--sp-4-5);
}
.skin-ana-vibrante .block-testimonials-carousel__photo {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1.5rem;
    border: 3px solid var(--lp-accent);
}
.skin-ana-vibrante .block-testimonials-carousel__photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.skin-ana-vibrante .block-testimonials-carousel__quote {
    font-family: var(--lp-font-display);
    font-style: italic;
    font-variation-settings: "opsz" 72, "wght" 460;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--lp-on-surface);
    text-align: center;
    margin-bottom: 1.5rem;
}
.skin-ana-vibrante .block-testimonials-carousel__author {
    font-family: var(--lp-font-body);
    font-weight: 700;
    color: var(--lp-on-surface);
    font-style: normal;
    text-align: center;
    display: block;
}
.skin-ana-vibrante .block-testimonials-carousel__context {
    font-family: var(--lp-font-body);
    font-size: 0.8125rem;
    color: var(--lp-on-surface-muted);
    text-align: center;
    display: block;
}
.skin-ana-vibrante .block-testimonials-carousel__dot {
    background: var(--lp-border-strong);
    transition: background 200ms;
}
.skin-ana-vibrante .block-testimonials-carousel__dot.is-active {
    background: var(--lp-accent);
    transform: scale(1.25);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 15. FAQ-ACCORDION (P1)
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante .block-faq-accordion {
    padding: 5rem 0;
    background: var(--lp-surface);
}
.skin-ana-vibrante .block-faq-accordion__heading {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 96, "wght" 580;
    text-align: center;
    margin-bottom: 3rem;
}
.skin-ana-vibrante .block-faq-accordion__item {
    background: var(--lp-surface-3);
    border: 2px solid var(--lp-border);
    border-radius: 14px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: border-color 200ms;
}
.skin-ana-vibrante .block-faq-accordion__item[open] {
    border-color: var(--lp-accent);
}
.skin-ana-vibrante .block-faq-accordion__summary,
.skin-ana-vibrante .block-faq-accordion__question {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 36, "wght" 580;
    font-size: 1.125rem;
    color: var(--lp-on-surface);
    padding: 1.25rem 1.5rem;
    cursor: pointer;
}
.skin-ana-vibrante .block-faq-accordion__answer {
    font-family: var(--lp-font-body);
    color: var(--lp-on-surface-muted);
    line-height: 1.7;
    padding: 0 1.5rem 1.5rem;
}
.skin-ana-vibrante .block-faq-accordion__icon {
    color: var(--lp-accent);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 16. QUOTE-WITH-PHOTO (P2)
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante .block-quote-with-photo {
    padding: 5rem 0;
    background: var(--lp-surface);
}
.skin-ana-vibrante .block-quote-with-photo__photo {
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--lp-accent);
    width: 10rem;
    height: 10rem;
}
.skin-ana-vibrante .block-quote-with-photo__photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.skin-ana-vibrante .block-quote-with-photo__text {
    font-family: var(--lp-font-display);
    font-style: italic;
    font-variation-settings: "opsz" 72, "wght" 480;
    font-size: 1.5rem;
    line-height: 1.45;
    color: var(--lp-on-surface);
}
.skin-ana-vibrante .block-quote-with-photo__author {
    font-family: var(--lp-font-body);
    font-weight: 700;
    color: var(--lp-on-surface);
    font-style: normal;
}
.skin-ana-vibrante .block-quote-with-photo__role {
    font-family: var(--lp-font-body);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lp-accent-deep);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 17. NARRATIVE-CASE (P2)
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante .block-narrative-case {
    background: var(--lp-surface-2);
    padding: 5rem 0;
}
.skin-ana-vibrante .block-narrative-case__heading {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 96, "wght" 580;
    color: var(--lp-on-surface);
}
.skin-ana-vibrante .block-narrative-case__accent {
    color: var(--lp-accent-deep);
    font-family: var(--lp-font-display-fun);
    font-weight: 700;
}
.skin-ana-vibrante .block-narrative-case__highlight {
    background: var(--lp-surface-3);
    border-left: 4px solid var(--lp-accent);
    padding: 1.5rem;
    border-radius: 0 14px 14px 0;
}
.skin-ana-vibrante .block-narrative-case__highlight-icon {
    color: var(--lp-accent-deep);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 18. IMAGE-MOSAIC-EDITORIAL (P2 — 2 instâncias)
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante .block-image-mosaic-editorial {
    padding: 5rem 0;
    background: var(--lp-surface);
}
.skin-ana-vibrante .block-image-mosaic-editorial__heading {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 96, "wght" 580;
    text-align: center;
    margin-bottom: var(--sp-4-5);
}
.skin-ana-vibrante .block-image-mosaic-editorial__cell {
    border-radius: var(--lp-radius-card);
    border: 3px solid transparent;
    transition: all 320ms;
}
.skin-ana-vibrante .block-image-mosaic-editorial__cell:nth-child(5n+1):hover { border-color: var(--ana-green); }
.skin-ana-vibrante .block-image-mosaic-editorial__cell:nth-child(5n+2):hover { border-color: var(--ana-blue); }
.skin-ana-vibrante .block-image-mosaic-editorial__cell:nth-child(5n+3):hover { border-color: var(--ana-pink); }
.skin-ana-vibrante .block-image-mosaic-editorial__cell:nth-child(5n+4):hover { border-color: var(--ana-yellow); }
.skin-ana-vibrante .block-image-mosaic-editorial__cell:nth-child(5n+5):hover { border-color: var(--ana-green); }
.skin-ana-vibrante .block-image-mosaic-editorial__cell:hover {
    transform: translateY(-3px);
}
.skin-ana-vibrante .block-image-mosaic-editorial__cell img {
    transition: transform 480ms ease;
}
.skin-ana-vibrante .block-image-mosaic-editorial__cell:hover img {
    transform: scale(1.04);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 19. STATS-NUMBERS (P2 — 1 instância)
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante .block-stats-numbers {
    padding: 5rem 0;
    background: var(--lp-surface-2);
}
.skin-ana-vibrante .block-stats-numbers__heading {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 96, "wght" 580;
    text-align: center;
    margin-bottom: 3rem;
}
.skin-ana-vibrante .block-stats-numbers__item {
    text-align: center;
    padding: var(--sp-4-5) 1.5rem;
    border-radius: var(--lp-radius-large);
    background: var(--lp-surface-3);
    border: 2px solid transparent;
}
.skin-ana-vibrante .block-stats-numbers__item:nth-child(4n+1) { border-color: var(--ana-green-pale); background: linear-gradient(180deg, var(--ana-green-pale) 18%, var(--lp-surface-3) 55%); }
.skin-ana-vibrante .block-stats-numbers__item:nth-child(4n+2) { border-color: var(--ana-blue-pale); background: linear-gradient(180deg, var(--ana-blue-pale) 18%, var(--lp-surface-3) 55%); }
.skin-ana-vibrante .block-stats-numbers__item:nth-child(4n+3) { border-color: var(--ana-pink-pale); background: linear-gradient(180deg, var(--ana-pink-pale) 18%, var(--lp-surface-3) 55%); }
.skin-ana-vibrante .block-stats-numbers__item:nth-child(4n+4) { border-color: var(--ana-yellow-pale); background: linear-gradient(180deg, var(--ana-yellow-pale) 18%, var(--lp-surface-3) 55%); }
.skin-ana-vibrante .block-stats-numbers__value {
    font-family: var(--lp-font-display-fun);
    font-weight: 700;
    font-size: clamp(2.75rem, 5vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
}
.skin-ana-vibrante .block-stats-numbers__item:nth-child(4n+1) .block-stats-numbers__value { color: var(--ana-green-deep); }
.skin-ana-vibrante .block-stats-numbers__item:nth-child(4n+2) .block-stats-numbers__value { color: var(--ana-blue-deep); }
.skin-ana-vibrante .block-stats-numbers__item:nth-child(4n+3) .block-stats-numbers__value { color: var(--ana-pink-deep); }
.skin-ana-vibrante .block-stats-numbers__item:nth-child(4n+4) .block-stats-numbers__value { color: var(--ana-yellow-deep); }
.skin-ana-vibrante .block-stats-numbers__suffix {
    font-family: var(--lp-font-display-fun);
    font-weight: 700;
    opacity: 0.7;
}
.skin-ana-vibrante .block-stats-numbers__label {
    font-family: var(--lp-font-body);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lp-on-surface-muted);
    font-weight: 700;
    margin-top: var(--sp-2-5);
}
.skin-ana-vibrante .block-stats-numbers__icon {
    color: var(--lp-accent-deep);
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 20. TIMELINE-VERTICAL (P2 — 1 instância)
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante .block-timeline-vertical {
    padding: 5rem 0;
    background: var(--lp-surface);
}
.skin-ana-vibrante .block-timeline-vertical__heading {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 96, "wght" 580;
    text-align: center;
    margin-bottom: 3rem;
}
.skin-ana-vibrante .block-timeline-vertical__list::before {
    background: var(--lp-accent);
    width: 2px;
    opacity: 0.45;
}
.skin-ana-vibrante .block-timeline-vertical__bullet {
    background: var(--lp-accent);
    color: var(--lp-accent-on);
    border: 3px solid var(--lp-surface);
    box-shadow: 0 0 0 2px var(--lp-accent);
    width: 1.25rem;
    height: 1.25rem;
}
.skin-ana-vibrante .block-timeline-vertical__year {
    font-family: var(--lp-font-display-fun);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    color: var(--lp-accent-deep);
}
.skin-ana-vibrante .block-timeline-vertical__title {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 36, "wght" 580;
    font-size: 1.25rem;
    color: var(--lp-on-surface);
}
.skin-ana-vibrante .block-timeline-vertical__description {
    font-family: var(--lp-font-body);
    color: var(--lp-on-surface-muted);
    line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 21. CTA-FINAL, QUOTE, CONTATO-MAPA (P2 — 1 cada)
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante .block-cta-final {
    background: linear-gradient(135deg, var(--ana-green) 0%, var(--ana-blue) 35%, var(--ana-pink) 70%, var(--ana-yellow) 100%);
    color: #fff;
    padding: 6rem 0;
    text-align: center;
}
.skin-ana-vibrante .block-cta-final__heading {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 96, "wght" 600;
    color: #fff;
}

.skin-ana-vibrante .block-quote--manifesto-display {
    background: var(--lp-surface-2);
    padding: 5rem 0;
    position: relative;
}
.skin-ana-vibrante .block-quote__manifesto p {
    font-family: var(--lp-font-display);
    font-style: italic;
    font-variation-settings: "opsz" 96, "wght" 500;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.35;
    color: var(--lp-on-surface);
    text-align: center;
    max-width: 48rem;
    margin: 0 auto;
}

.skin-ana-vibrante .block-contato-mapa {
    padding: 4rem 0;
    background: var(--lp-surface);
}
.skin-ana-vibrante .block-contato-mapa__heading {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 72, "wght" 580;
    color: var(--lp-on-surface);
    margin-bottom: var(--sp-4-5);
}
.skin-ana-vibrante .block-contato-mapa__col,
.skin-ana-vibrante .block-contato-mapa__unit {
    background: var(--lp-surface-3);
    border: 2px solid var(--lp-accent-pale);
    border-left: 4px solid var(--lp-accent);
    padding: 1.75rem;
    border-radius: 0 14px 14px 0;
}
.skin-ana-vibrante .block-contato-mapa__col-title,
.skin-ana-vibrante .block-contato-mapa__unit-name {
    font-family: var(--lp-font-display);
    font-variation-settings: "opsz" 36, "wght" 580;
    color: var(--lp-on-surface);
}
.skin-ana-vibrante .block-contato-mapa__col a,
.skin-ana-vibrante .block-contato-mapa__unit a {
    color: var(--lp-accent-deep);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 22. MEGAMENU + NAV (institutional template)
 * ═══════════════════════════════════════════════════════════════════════ */
.skin-ana-vibrante .nav a,
.skin-ana-vibrante .topbar--institutional .nav a {
    color: var(--lp-on-surface);
    transition: color 200ms;
}
.skin-ana-vibrante .nav a:hover {
    color: var(--lp-accent-deep);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 22.4. ANIMATIONS — desabilita scroll-reveal translateY (bug visual)
 * ═══════════════════════════════════════════════════════════════════════
 * Bug Fábio reportado V6.7.0.d.fim: barra horizontal "atravessando" foto
 * Ana durante scroll. Causa: _animations.css:40-52 [data-anim="entry"]
 * começa com translateY(32px) + opacity 0, transita pra translateY(0) +
 * opacity 1 quando .is-visible. Durante a transição (fração de segundo)
 * o block está "subindo" e fade-in — print congelado pega o estado
 * intermediário, parecendo sobreposição entre blocks.
 *
 * Fix: força state final desde o início (skin ana-vibrante). Sem
 * animação = sem estado intermediário = sem barra horizontal.
 * Outros sites mantêm a animação.
 */
.skin-ana-vibrante [data-anim="entry"],
.skin-ana-vibrante [data-anim="entry"][data-anim-variant] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Hero bg image: força no-repeat + cover universalmente. Bug Fábio:
 * "imagem do hero fica repetindo ao invés de conter inteira" em Ana,
 * Sidney, todos os heros com bg image. */
.skin-ana-vibrante [data-hero-bg],
.skin-ana-vibrante .block-hero-lp--fullbleed,
.skin-ana-vibrante .block-cta-banner-image,
.skin-ana-vibrante .block-cta-banner-image__bg,
.skin-ana-vibrante [style*="background-image"] {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 22.5. BG MODIFIERS — suaviza transição brusca de cor entre blocks
 * ═══════════════════════════════════════════════════════════════════════
 * Bug detectado V6.7.0.d.fim: templates/page.php injeta .bg--accent-weak
 * / .bg--surface-2 no wrapper .block com !important via _base.css quando
 * banco tem content.bg_variant setado. Em skin de paleta vibrante isso
 * fazia transição abrupta verde-pale → cream entre blocks, parecendo
 * sobreposição/bug.
 *
 * Fix: skin ana-vibrante sobrescreve essas classes pra usar bg MUITO
 * suave (gradient fade dos cantos pra dentro, ou tom mais translúcido)
 * — mantém a semântica de "block destacado" sem virar carnaval.
 */

.skin-ana-vibrante .block.bg--accent-weak,
.skin-ana-vibrante .block.bg--accent-weak > section,
.skin-ana-vibrante section.bg--accent-weak {
    background: linear-gradient(180deg,
        var(--lp-surface) 0%,
        var(--lp-accent-pale) 30%,
        var(--lp-accent-pale) 70%,
        var(--lp-surface) 100%
    ) !important;
}

.skin-ana-vibrante .block.bg--surface-2,
.skin-ana-vibrante .block.bg--surface-2 > section,
.skin-ana-vibrante section.bg--surface-2 {
    background: var(--lp-surface-2) !important;
}

.skin-ana-vibrante .block.bg--surface,
.skin-ana-vibrante .block.bg--surface > section,
.skin-ana-vibrante section.bg--surface {
    background: var(--lp-surface) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 23. ACCESSIBILITY
 * ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .skin-ana-vibrante *,
    .skin-ana-vibrante *::before,
    .skin-ana-vibrante *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}