/* ============================================================
   Ilê Orun — Tema Visual
   Paleta: Amarelo (axé) + Azul (Orun/céu) + Branco (Oxalá)
   
   Conceito: O Ilê vive entre dois mundos —
   Orun (o alto, o céu, o espiritual) e Aiyê (a terra, a casa,
   a comunidade). As seções escuras evocam o Orun e os ritos
   noturnos; as seções claras evocam a casa viva, o dia, o
   acolhimento.
   ============================================================ */

/* ============================================================
   PALETA ILÊ
   ============================================================ */
:root {
    /* Orun (azul noturno — seções escuras) */
    --ile-dark:         #050D1A;   /* fundo principal: noite profunda */
    --ile-dark-alt:     #091529;   /* fundo alt: noite */
    --ile-dark-sect:    #0C1C35;   /* seções de destaque */
    --ile-surf:         #102240;   /* superfície card (escuro) */
    --ile-surf-2:       #163055;   /* card hover (escuro) */

    /* Aiyê (branco suave — seções claras) */
    --ile-light:        #EFF7FF;   /* fundo claro: amanhecer */
    --ile-light-alt:    #E4F0FB;   /* claro alt */
    --ile-surf-w:       #FFFFFF;   /* card sobre fundo claro */
    --ile-surf-w2:      #F5FAFF;   /* card hover (claro) */

    /* Azul — realeza espiritual */
    --ile-blue:         #1E56A0;   /* azul real */
    --ile-blue-mid:     #2E77C8;   /* azul médio */
    --ile-blue-sky:     #5098D8;   /* azul céu */
    --ile-blue-pale:    #90BEE8;   /* azul pálido */
    --ile-blue-ultra:   #C5DFF5;   /* azul ultra claro */

    /* Amarelo (axé) */
    --ile-gold:         #E8BF4A;   /* ouro espiritual (sobre escuro) */
    --ile-gold-mid:     #C8920A;   /* ouro profundo (sobre claro) */
    --ile-gold-bright:  #F5D575;   /* brilho do axé */

    /* Branco (Oxalá) */
    --ile-white:        #EFF7FF;   /* branco levemente azulado */
    --ile-white-pure:   #FFFFFF;

    /* Bordas */
    --ile-border-dark:  rgba(80, 152, 216, 0.14);
    --ile-border-gold:  rgba(232, 191, 74, 0.28);
    --ile-border-light: rgba(30, 86, 160, 0.12);

    /* Texto sobre fundos escuros */
    --ile-txt:          #EFF7FF;   /* contraste ~14:1 sobre #050D1A */
    --ile-txt-soft:     rgba(239, 247, 255, 0.7);
    --ile-txt-muted:    rgba(239, 247, 255, 0.4);

    /* Texto sobre fundos claros */
    --ile-txt-dark:         #071424;
    --ile-txt-dark-soft:    rgba(7, 20, 36, 0.65);
    --ile-txt-dark-muted:   rgba(7, 20, 36, 0.4);
}

/* ============================================================
   OVERRIDES DAS VARIÁVEIS GLOBAIS
   ============================================================ */
.theme-ile-full {
    --color-bg:              var(--ile-dark);
    --color-bg-alt:          var(--ile-dark-alt);
    --color-surface:         var(--ile-surf);
    --color-surface-hover:   var(--ile-surf-2);
    --color-border:          var(--ile-border-dark);
    --color-text:            var(--ile-txt);
    --color-text-soft:       var(--ile-txt-soft);
    --color-text-muted:      var(--ile-txt-muted);
    --accent:                var(--ile-gold);
    --accent-light:          var(--ile-gold-bright);
    --accent-dark:           var(--ile-gold-mid);
}

/* ============================================================
   HEADER — ILÊ
   ============================================================ */
.theme-ile-full .main-header {
    background: rgba(5, 13, 26, 0.88);
    border-bottom-color: var(--ile-border-dark);
}
.theme-ile-full .main-header.scrolled {
    background: rgba(5, 13, 26, 0.97);
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}
.theme-ile-full .logo-mark {
    background: var(--ile-blue-mid);
    color: var(--ile-white);
}
.theme-ile-full .nav-link {
    color: var(--ile-txt-soft);
}
.theme-ile-full .nav-link:hover,
.theme-ile-full .nav-link.active {
    color: var(--ile-txt);
    background: rgba(80, 152, 216, 0.1);
}
.theme-ile-full .nav-link--cta {
    background: var(--ile-blue-mid);
    color: var(--ile-white) !important;
}
.theme-ile-full .nav-link--cta:hover {
    background: var(--ile-blue-sky) !important;
}
.theme-ile-full .main-nav {
    background: var(--ile-dark);
    border-left-color: var(--ile-border-dark);
}

/* ============================================================
   HERO — ORUN
   O céu espiritual. Profundo, estrelado, com o ouro do axé.
   ============================================================ */
.ile-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: calc(var(--header-total) + 4rem) 0 5rem;
    background: var(--ile-dark);
    overflow: hidden;
}

/* Campo estelar (estrelas como pontinhos) */
.ile-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Ccircle cx='18' cy='24' r='0.9' fill='rgba(239%2C247%2C255%2C0.5)'/%3E%3Ccircle cx='88' cy='14' r='1.1' fill='rgba(239%2C247%2C255%2C0.4)'/%3E%3Ccircle cx='155' cy='42' r='0.8' fill='rgba(232%2C191%2C74%2C0.6)'/%3E%3Ccircle cx='230' cy='18' r='1' fill='rgba(239%2C247%2C255%2C0.45)'/%3E%3Ccircle cx='310' cy='36' r='0.8' fill='rgba(239%2C247%2C255%2C0.35)'/%3E%3Ccircle cx='375' cy='12' r='1.2' fill='rgba(232%2C191%2C74%2C0.5)'/%3E%3Ccircle cx='52' cy='88' r='0.9' fill='rgba(239%2C247%2C255%2C0.35)'/%3E%3Ccircle cx='132' cy='100' r='1.1' fill='rgba(239%2C247%2C255%2C0.5)'/%3E%3Ccircle cx='195' cy='78' r='0.7' fill='rgba(239%2C247%2C255%2C0.4)'/%3E%3Ccircle cx='278' cy='95' r='1' fill='rgba(232%2C191%2C74%2C0.55)'/%3E%3Ccircle cx='350' cy='72' r='0.8' fill='rgba(239%2C247%2C255%2C0.4)'/%3E%3Ccircle cx='30' cy='155' r='1' fill='rgba(239%2C247%2C255%2C0.4)'/%3E%3Ccircle cx='108' cy='148' r='0.8' fill='rgba(232%2C191%2C74%2C0.5)'/%3E%3Ccircle cx='175' cy='168' r='1.1' fill='rgba(239%2C247%2C255%2C0.5)'/%3E%3Ccircle cx='248' cy='155' r='0.9' fill='rgba(239%2C247%2C255%2C0.35)'/%3E%3Ccircle cx='318' cy='172' r='0.7' fill='rgba(239%2C247%2C255%2C0.45)'/%3E%3Ccircle cx='390' cy='145' r='1' fill='rgba(232%2C191%2C74%2C0.5)'/%3E%3Ccircle cx='65' cy='215' r='0.9' fill='rgba(239%2C247%2C255%2C0.4)'/%3E%3Ccircle cx='145' cy='235' r='0.7' fill='rgba(239%2C247%2C255%2C0.35)'/%3E%3Ccircle cx='212' cy='248' r='1' fill='rgba(232%2C191%2C74%2C0.55)'/%3E%3Ccircle cx='290' cy='228' r='0.8' fill='rgba(239%2C247%2C255%2C0.4)'/%3E%3Ccircle cx='362' cy='252' r='1.1' fill='rgba(239%2C247%2C255%2C0.45)'/%3E%3C/svg%3E");
    background-size: 400px 300px;
    z-index: 0;
    opacity: 0.85;
}

/* Brilho central: o axé descendo do Orun */
.ile-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 55% at 50% 30%, rgba(30,86,160,0.2) 0%, transparent 65%),
        radial-gradient(ellipse 30% 40% at 50% 0%, rgba(232,191,74,0.1) 0%, transparent 60%);
    z-index: 1;
}

.ile-hero .container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.ile-hero__content { max-width: 560px; }

.ile-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.38rem 1rem;
    background: rgba(30, 86, 160, 0.15);
    border: 1px solid rgba(80, 152, 216, 0.3);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ile-blue-sky);
    margin-bottom: 1.5rem;
}

.ile-hero__title {
    font-size: clamp(2.2rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ile-txt);
    margin-bottom: 0.5rem;
}
.ile-hero__title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--ile-gold), var(--ile-gold-bright));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ile-hero__subtitle {
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    color: var(--ile-txt-soft);
    line-height: 1.7;
    max-width: 480px;
    margin-bottom: 2.25rem;
}

.ile-hero__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ---- Teaser de acesso rápido aos TTBs ---- */
.ile-ttb-teaser {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.25rem;
    background: rgba(30, 86, 160, 0.18);
    border: 1px solid var(--ile-border-gold);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    max-width: 580px;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.ile-ttb-teaser:hover {
    background: rgba(30, 86, 160, 0.26);
    border-color: rgba(232, 191, 74, 0.5);
}

.ile-ttb-teaser__label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.ile-ttb-teaser__label i {
    color: var(--ile-gold);
    font-size: 1.05rem;
}

.ile-ttb-teaser__label strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ile-gold-bright);
    line-height: 1.2;
}

.ile-ttb-teaser__label em {
    display: block;
    font-size: 0.72rem;
    font-style: normal;
    color: var(--ile-txt-muted);
    letter-spacing: 0.04em;
    font-family: 'JetBrains Mono', monospace;
}

.ile-ttb-teaser__cidades {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}

.ile-ttb-teaser__pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(80, 152, 216, 0.14);
    border: 1px solid var(--ile-border-dark);
    border-radius: 100px;
    font-size: 0.74rem;
    color: var(--ile-blue-pale);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.ile-ttb-teaser__pill i {
    font-size: 0.55em;
    color: var(--ile-gold);
}

.ile-ttb-teaser__pill:hover {
    background: rgba(232, 191, 74, 0.14);
    border-color: var(--ile-border-gold);
    color: var(--ile-gold-bright);
}

.ile-ttb-teaser__pill--more {
    cursor: default;
    border-style: dashed;
    color: var(--ile-txt-muted);
}
.ile-ttb-teaser__pill--more:hover {
    background: rgba(80, 152, 216, 0.14);
    border-color: var(--ile-border-dark);
    color: var(--ile-txt-muted);
}

.ile-ttb-teaser__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ile-gold);
    text-decoration: none;
    border: 1px solid var(--ile-border-gold);
    padding: 5px 14px;
    border-radius: 100px;
    transition: background 0.25s, color 0.25s;
    white-space: nowrap;
}

.ile-ttb-teaser__cta:hover {
    background: var(--ile-gold);
    color: var(--ile-dark);
    border-color: var(--ile-gold);
}

@media (max-width: 768px) {
    .ile-ttb-teaser { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .ile-ttb-teaser__cta { align-self: flex-start; }
}

/* ---- Roda sagrada (visual à direita) ---- */
.ile-roda-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.ile-roda {
    width: 320px;
    height: 320px;
    animation: ile-roda-spin 90s linear infinite;
    transform-origin: center;
    filter: drop-shadow(0 0 24px rgba(232,191,74,0.15));
}
@keyframes ile-roda-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Símbolo central fixo (não gira com a roda) */
.ile-roda-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--ile-gold-bright);
    animation: ile-pulse 4s ease-in-out infinite;
}
@keyframes ile-pulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%,-50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%,-50%) scale(1.06); }
}
.ile-roda-center i {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.3rem;
}
.ile-roda-center span {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ile-gold);
    opacity: 0.9;
}

@media (max-width: 900px) {
    .ile-hero .container { grid-template-columns: 1fr; }
    .ile-roda-wrapper { display: none; }
    .ile-hero { min-height: auto; }
}

/* ============================================================
   SEÇÕES ESCURAS (default — Orun)
   ============================================================ */
.theme-ile-full .section {
    background: var(--ile-dark);
}
.theme-ile-full .section--alt {
    background: var(--ile-dark-alt);
}

.theme-ile-full .section-label       { color: var(--ile-gold); }
.theme-ile-full .section-title       { color: var(--ile-txt); }
.theme-ile-full .section-subtitle    { color: var(--ile-txt-soft); }
.theme-ile-full .content-block p     { color: var(--ile-txt-soft); }
.theme-ile-full .content-block h3    { color: var(--ile-txt); }
.theme-ile-full .content-block strong { color: var(--ile-txt); }

.theme-ile-full .highlight-box {
    background: rgba(30, 86, 160, 0.1);
    border-left: 3px solid var(--ile-gold);
}
.theme-ile-full .highlight-box p { color: var(--ile-txt-soft); font-style: italic; }

.theme-ile-full .simple-list li           { color: var(--ile-txt-soft); }
.theme-ile-full .simple-list li::before   { background: var(--ile-gold); }
.theme-ile-full .simple-list a            { color: var(--ile-blue-sky); }
.theme-ile-full .simple-list a:hover      { color: var(--ile-gold-bright); }

/* Feature cards (escuro) */
.theme-ile-full .feature-card {
    background: var(--ile-surf);
    border-color: var(--ile-border-dark);
    color: var(--ile-txt);
}
.theme-ile-full .feature-card:hover {
    border-color: var(--ile-gold);
    background: var(--ile-surf-2);
    box-shadow: 0 6px 30px rgba(0,0,0,0.25);
}
.theme-ile-full .feature-card__icon {
    background: rgba(80, 152, 216, 0.12);
    color: var(--ile-blue-sky);
}
.theme-ile-full .feature-card__title { color: var(--ile-txt); }
.theme-ile-full .feature-card__text  { color: var(--ile-txt-soft); }

/* Value items (escuro) */
.theme-ile-full .value-item {
    background: var(--ile-surf);
    border-color: var(--ile-border-dark);
    color: var(--ile-txt-soft);
}
.theme-ile-full .value-item i { color: var(--ile-gold); }

/* Img placeholder (escuro) */
.theme-ile-full .img-placeholder {
    background: var(--ile-surf);
    border-color: var(--ile-border-dark);
    color: var(--ile-txt-muted);
}

/* ============================================================
   SEÇÕES CLARAS — Aiyê (fundos suaves)
   Aplicadas via classe .ile-light
   ============================================================ */
.theme-ile-full .ile-light {
    background: var(--ile-light) !important;
}
.theme-ile-full .ile-light.section--alt {
    background: var(--ile-light-alt) !important;
}

/* Textos nas seções claras */
.theme-ile-full .ile-light .section-label {
    color: var(--ile-blue);
}
.theme-ile-full .ile-light .section-title {
    color: var(--ile-txt-dark);
}
.theme-ile-full .ile-light .section-subtitle {
    color: var(--ile-txt-dark-soft);
}
.theme-ile-full .ile-light .content-block p {
    color: var(--ile-txt-dark-soft);
}
.theme-ile-full .ile-light .content-block h3 {
    color: var(--ile-txt-dark);
}
.theme-ile-full .ile-light .content-block strong {
    color: var(--ile-txt-dark);
}
.theme-ile-full .ile-light .highlight-box {
    background: rgba(30,86,160,0.06);
    border-left-color: var(--ile-blue-mid);
}
.theme-ile-full .ile-light .highlight-box p {
    color: var(--ile-txt-dark-soft);
}
.theme-ile-full .ile-light .simple-list li {
    color: var(--ile-txt-dark-soft);
}
.theme-ile-full .ile-light .simple-list li::before {
    background: var(--ile-blue);
}
.theme-ile-full .ile-light .simple-list a {
    color: var(--ile-blue);
}
.theme-ile-full .ile-light .simple-list a:hover {
    color: var(--ile-gold-mid);
}

/* Feature cards (claro) */
.theme-ile-full .ile-light .feature-card {
    background: var(--ile-surf-w);
    border-color: var(--ile-border-light);
    color: var(--ile-txt-dark);
    box-shadow: 0 2px 12px rgba(30,86,160,0.05);
}
.theme-ile-full .ile-light .feature-card:hover {
    border-color: var(--ile-blue-mid);
    background: var(--ile-surf-w2);
    box-shadow: 0 6px 24px rgba(30,86,160,0.1);
}
.theme-ile-full .ile-light .feature-card__icon {
    background: rgba(30,86,160,0.08);
    color: var(--ile-blue);
}
.theme-ile-full .ile-light .feature-card__title { color: var(--ile-txt-dark); }
.theme-ile-full .ile-light .feature-card__text  { color: var(--ile-txt-dark-soft); }

/* Value items (claro) */
.theme-ile-full .ile-light .value-item {
    background: var(--ile-surf-w);
    border-color: var(--ile-border-light);
    color: var(--ile-txt-dark-soft);
    box-shadow: 0 1px 6px rgba(30,86,160,0.05);
}
.theme-ile-full .ile-light .value-item i { color: var(--ile-blue); }

/* Img placeholder (claro) */
.theme-ile-full .ile-light .img-placeholder {
    background: var(--ile-surf-w);
    border-color: var(--ile-border-light);
    color: var(--ile-txt-dark-muted);
}

/* ============================================================
   VÍDEO — seção "O que é o Ilê" (#oque)
   Contêiner estica para igualar a altura da coluna de texto.
   ============================================================ */
.theme-ile-full #oque .two-col {
    align-items: stretch;
}

/* wrapper: ocupa toda a célula do grid */
.theme-ile-full #oque .ile-oque-video {
    position: relative;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--ile-border-light);
    background: #0a1628;
    box-shadow: 0 2px 12px rgba(30, 86, 160, 0.08);
}

/* vídeo preenchendo o wrapper em object-fit:cover */
.theme-ile-full #oque .ile-oque-video__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}

/* mobile: coluna única, altura proporcional fixa */
@media (max-width: 768px) {
    .theme-ile-full #oque .ile-oque-video {
        aspect-ratio: 16 / 9;
        min-height: 0;
    }
}

/* ============================================================
   BOTÕES
   ============================================================ */
.theme-ile-full .btn-primary {
    background: var(--ile-blue-mid);
    color: var(--ile-white);
}
.theme-ile-full .btn-primary:hover {
    background: var(--ile-blue-sky);
    color: var(--ile-white);
    box-shadow: 0 4px 20px rgba(46,119,200,0.35);
    transform: translateY(-2px);
}
.theme-ile-full .btn-secondary {
    background: var(--ile-surf);
    color: var(--ile-txt);
    border-color: var(--ile-border-dark);
}
.theme-ile-full .btn-secondary:hover {
    background: var(--ile-surf-2);
    border-color: var(--ile-blue-mid);
    color: var(--ile-txt);
}
.theme-ile-full .btn-outline {
    color: var(--ile-gold);
    border-color: var(--ile-gold);
}
.theme-ile-full .btn-outline:hover {
    background: var(--ile-gold);
    color: var(--ile-dark);
}

/* Botões nas seções claras */
.theme-ile-full .ile-light .btn-primary {
    background: var(--ile-blue);
    color: var(--ile-white);
}
.theme-ile-full .ile-light .btn-primary:hover {
    background: var(--ile-blue-mid);
}
.theme-ile-full .ile-light .btn-secondary {
    background: var(--ile-surf-w);
    color: var(--ile-txt-dark);
    border-color: var(--ile-border-light);
}
.theme-ile-full .ile-light .btn-secondary:hover {
    background: var(--ile-surf-w2);
    border-color: var(--ile-blue-mid);
    color: var(--ile-txt-dark);
}
.theme-ile-full .ile-light .btn-outline {
    color: var(--ile-blue);
    border-color: var(--ile-blue);
}
.theme-ile-full .ile-light .btn-outline:hover {
    background: var(--ile-blue);
    color: var(--ile-white);
}

/* ============================================================
   TIMELINE DE PERTENCIMENTO — especial
   ============================================================ */
.ile-timeline {
    position: relative;
    padding-left: 3rem;
    max-width: 800px;
}

/* Linha vertical azul → ouro */
.ile-timeline::before {
    content: '';
    position: absolute;
    left: 0.85rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        var(--ile-border-dark) 0%,
        var(--ile-blue-mid) 25%,
        var(--ile-gold) 75%,
        var(--ile-gold-bright) 100%
    );
}

.ile-tl-item {
    position: relative;
    padding-bottom: 3rem;
}
.ile-tl-item:last-child { padding-bottom: 0; }

.ile-tl-dot {
    position: absolute;
    left: -3rem;
    top: 0.1rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    z-index: 1;
    transition: var(--transition);
}

/* Cada nível tem sua cor própria */
.ile-tl-dot--1 { background: var(--ile-surf); border: 2px solid var(--ile-border-dark); color: var(--ile-txt-muted); }
.ile-tl-dot--2 { background: var(--ile-blue); border: 2px solid var(--ile-blue-mid); color: var(--ile-white); }
.ile-tl-dot--3 { background: linear-gradient(135deg, var(--ile-blue), var(--ile-blue-sky)); border: 2px solid var(--ile-blue-sky); color: var(--ile-white); box-shadow: 0 0 10px rgba(46,119,200,0.3); }
.ile-tl-dot--4 { background: linear-gradient(135deg, var(--ile-blue-mid), var(--ile-gold)); border: 2px solid var(--ile-gold); color: var(--ile-dark); box-shadow: 0 0 12px rgba(200,144,10,0.3); }
.ile-tl-dot--5 { background: linear-gradient(135deg, var(--ile-gold), var(--ile-gold-bright)); border: 2px solid var(--ile-gold-bright); color: var(--ile-dark); box-shadow: 0 0 18px rgba(232,191,74,0.45); font-size: 0.8rem; }

.ile-tl-item__card {
    background: var(--ile-surf);
    border: 1px solid var(--ile-border-dark);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    transition: var(--transition);
}
.ile-tl-item__card:hover {
    border-color: var(--ile-gold);
    background: var(--ile-surf-2);
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

.ile-tl-item__stage {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ile-gold);
    margin-bottom: 0.5rem;
}
.ile-tl-item__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ile-txt);
    margin-bottom: 0.6rem;
}
.ile-tl-item__text {
    font-size: 0.92rem;
    color: var(--ile-txt-soft);
    line-height: 1.7;
}

/* ============================================================
   TTB CARD — A CASA
   ============================================================ */
.ile-ttb-card {
    --ttb-cor: #1E56A0;
    background: var(--ile-surf);
    border: 1px solid var(--ile-border-gold);
    border-left: 4px solid var(--ttb-cor);
    border-radius: var(--radius-xl);
    padding: 2.25rem 2.5rem;
    max-width: 780px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ile-ttb-card:hover {
    border-color: var(--ttb-cor);
    box-shadow: 0 8px 28px rgba(5, 13, 26, 0.35);
}
.ile-ttb-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 60% at 100% 0%, rgba(232,191,74,0.07) 0%, transparent 60%);
    pointer-events: none;
}

.ile-ttb-card__crown {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--ile-border-dark);
}

.ile-ttb-card__color {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--ttb-cor);
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.ile-ttb-card__badge {
    padding: 0.3rem 0.8rem;
    background: linear-gradient(135deg, var(--ile-gold), var(--ile-gold-bright));
    color: var(--ile-dark);
    border-radius: 100px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ile-ttb-card__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ile-txt);
}

.ile-ttb-card__meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1.25rem;
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
}
.ile-ttb-card__meta dt { font-weight: 600; color: var(--ile-blue-pale); }
.ile-ttb-card__meta dd { color: var(--ile-txt-soft); }

.ile-ttb-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--ile-gold-bright, #E8BF4A);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(232, 191, 74, 0.35);
    padding-bottom: 0.05rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.ile-ttb-card__link:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.45);
}
.ile-ttb-card__link .ile-ttb-card__link-icon {
    font-size: 0.65rem;
    opacity: 0.75;
}

.ile-ttb-card__desc {
    font-size: 0.93rem;
    color: var(--ile-txt-soft);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.ile-ttb-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.ile-ttb-tag {
    padding: 0.3rem 0.75rem;
    background: rgba(30, 86, 160, 0.15);
    border: 1px solid rgba(80, 152, 216, 0.2);
    border-radius: 100px;
    font-size: 0.78rem;
    color: var(--ile-blue-sky);
    font-weight: 500;
}

.ile-ttb-card--modal {
    max-width: none;
    margin: 0;
    border-radius: var(--radius-lg);
}

/* ============================================================
   ORGANOGRAMA TTB
   ============================================================ */
.ile-org {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    padding: 1rem 0 0.5rem;
}

.ile-org__tree,
.ile-org__subtree {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.ile-org__cluster {
    width: 100%;
    max-width: 960px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.ile-org__cluster-label {
    margin: 0;
    padding: 0.35rem 1rem;
    border-left: 3px solid var(--ile-gold);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ile-gold);
    letter-spacing: 0.02em;
    align-self: flex-start;
}

.ile-org__level {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1.25rem 1.75rem;
    width: 100%;
}

.ile-org__level--root {
    position: relative;
}

.ile-org__connector {
    width: 2px;
    height: 2rem;
    background: linear-gradient(to bottom, var(--ttb-cor, var(--ile-gold)), rgba(80, 152, 216, 0.35));
    opacity: 0.7;
}

.ile-org__level--children {
    position: relative;
    padding-top: 0.5rem;
}

.ile-org__level--children::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(80, 152, 216, 0.35), transparent);
}

.ile-org__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: transform 0.2s ease;
}

.ile-org__node:hover,
.ile-org__node:focus-visible {
    transform: translateY(-3px);
    outline: none;
}

.ile-org__node:focus-visible .ile-org__circle {
    box-shadow:
        0 0 0 3px rgba(232, 191, 74, 0.45),
        0 8px 24px rgba(5, 13, 26, 0.45);
}

.ile-org__circle {
    --org-size: 5.5rem;
    width: var(--org-size);
    height: var(--org-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.65rem;
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18) 0%, transparent 55%),
        var(--ttb-cor, #1E56A0);
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.2),
        0 6px 20px rgba(5, 13, 26, 0.35);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ile-org__node:hover .ile-org__circle {
    border-color: var(--ile-gold-bright);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.2),
        0 10px 28px rgba(5, 13, 26, 0.45),
        0 0 18px rgba(232, 191, 74, 0.18);
}

.ile-org__node--root .ile-org__circle {
    --org-size: 7rem;
    border-width: 3px;
    border-color: var(--ile-gold);
}

.ile-org__node--casa-mae .ile-org__circle {
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.2),
        0 0 0 4px rgba(232, 191, 74, 0.22),
        0 8px 28px rgba(5, 13, 26, 0.4);
}

.ile-org__name {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    word-break: break-word;
    hyphens: auto;
}

.ile-org__node--root .ile-org__name {
    font-size: 0.82rem;
}

/* ============================================================
   MODAL TTB
   ============================================================ */
.ile-ttb-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.ile-ttb-modal[hidden] {
    display: none;
}

.ile-ttb-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 13, 26, 0.78);
    backdrop-filter: blur(4px);
}

.ile-ttb-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(780px, 100%);
    max-height: min(88vh, 900px);
    overflow: auto;
    border-radius: var(--radius-xl);
    animation: ileModalIn 0.25s ease;
}

@keyframes ileModalIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ile-ttb-modal__close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(5, 13, 26, 0.55);
    color: var(--ile-txt);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.ile-ttb-modal__close:hover,
.ile-ttb-modal__close:focus-visible {
    background: rgba(30, 86, 160, 0.65);
    border-color: var(--ile-gold);
    outline: none;
}

.ile-ttb-modal__body {
    position: relative;
}

.ile-ttb-modal__panel[hidden] {
    display: none;
}

.ile-ttb-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ile-ttb-group__heading {
    margin: 0;
    padding: 0.5rem 0 0.25rem 1rem;
    border-left: 3px solid var(--ile-gold);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ile-gold);
    letter-spacing: 0.02em;
}

.ile-ttb-group__list {
    display: grid;
    gap: 1.5rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(80, 152, 216, 0.15);
}

/* ============================================================
   SEPARADOR — LUZ DO AXÉ
   ============================================================ */
.ile-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 0;
}
.ile-divider__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ile-border-gold), transparent);
    max-width: 240px;
}
.ile-divider__star {
    color: var(--ile-gold);
    font-size: 0.75rem;
    opacity: 0.6;
}
.ile-divider__star--main {
    font-size: 0.9rem;
    opacity: 0.85;
}

/* Separador nas seções claras */
.theme-ile-full .ile-light .ile-divider__line {
    background: linear-gradient(90deg, transparent, rgba(30,86,160,0.25), transparent);
}
.theme-ile-full .ile-light .ile-divider__star { color: var(--ile-blue); }

/* ============================================================
   FUNDAÇÃO — seção especial com destaque central
   ============================================================ */
.ile-fundacao-box {
    background: linear-gradient(135deg, rgba(30,86,160,0.08) 0%, rgba(232,191,74,0.05) 100%);
    border: 1px solid var(--ile-border-dark);
    border-radius: var(--radius-xl);
    padding: 3rem;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ile-fundacao-box::before {
    content: '';
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30,86,160,0.1) 0%, transparent 70%);
}
.ile-fundacao-box .content-block {
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

/* ============================================================
   CTA
   ============================================================ */
.theme-ile-full .cta-section {
    background: var(--ile-dark-sect);
    border-top-color: var(--ile-border-dark);
    position: relative;
    overflow: hidden;
}
.theme-ile-full .cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 50% 50%, rgba(30, 86, 160, 0.12) 0%, transparent 70%);
}
.theme-ile-full .cta-section .container { position: relative; z-index: 1; }
.theme-ile-full .cta-section__title { color: var(--ile-txt); }
.theme-ile-full .cta-section__text  { color: var(--ile-txt-soft); }

/* ============================================================
   CONNECTIONS & FOOTER
   ============================================================ */
.theme-ile-full .connections {
    background: var(--ile-dark-alt);
    border-top-color: var(--ile-border-dark);
}
.theme-ile-full .connection-card {
    background: var(--ile-surf);
    border-color: var(--ile-border-dark);
    color: var(--ile-txt-soft);
}
.theme-ile-full .connection-card:hover {
    color: var(--ile-txt);
    border-color: var(--ile-gold);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.theme-ile-full .connections-title { color: var(--ile-txt-muted); }

.theme-ile-full .main-footer {
    background: var(--ile-dark-alt);
    border-top-color: var(--ile-border-dark);
}
.theme-ile-full .footer-tagline { color: var(--ile-txt-soft); }
.theme-ile-full .footer-heading { color: var(--ile-txt-muted); }
.theme-ile-full .footer-links a { color: var(--ile-txt-soft); }
.theme-ile-full .footer-links a:hover { color: var(--ile-gold); }
.theme-ile-full .footer-contact li { color: var(--ile-txt-soft); }
.theme-ile-full .footer-contact i { color: var(--ile-blue-sky); }
.theme-ile-full .footer-bottom p { color: var(--ile-txt-muted); }
.theme-ile-full .footer-bottom { border-top-color: var(--ile-border-dark); }
.theme-ile-full .logo-text { color: var(--ile-txt); }
.theme-ile-full .logo-mark { background: var(--ile-blue-mid); color: var(--ile-white); }
.theme-ile-full .footer-brand .logo-mark { background: var(--ile-blue-mid); }

/* ============================================================
   FAB — Agenda integrada
   Botão flutuante fixo no canto inferior direito.
   ============================================================ */
button.ile-fab {
    font-family: inherit;
    cursor: pointer;
}

.ile-fab {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 950;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.2rem 0.85rem 0.85rem;
    background: linear-gradient(135deg, var(--ile-blue) 0%, var(--ile-blue-mid) 100%);
    color: var(--ile-white);
    border: 2px solid var(--ile-gold);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 10px 30px rgba(5,13,26,0.35),
                0 0 0 4px rgba(232,191,74,0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.ile-fab:hover,
.ile-fab:focus-visible {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 14px 36px rgba(5,13,26,0.45),
                0 0 0 6px rgba(232,191,74,0.2);
    color: var(--ile-white-pure);
    outline: none;
}
.ile-fab__icon {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ile-gold);
    color: var(--ile-dark);
    border-radius: 50%;
    font-size: 1.1rem;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
    flex-shrink: 0;
}
.ile-fab__label {
    letter-spacing: 0.02em;
    line-height: 1;
}

@media (max-width: 540px) {
    .ile-fab {
        padding: 0.6rem;
        border-radius: 50%;
        gap: 0;
    }
    .ile-fab__label {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }
    .ile-fab__icon {
        width: 2.6rem;
        height: 2.6rem;
        font-size: 1.2rem;
    }

    .ile-org__circle {
        --org-size: 4.75rem;
    }
    .ile-org__node--root .ile-org__circle {
        --org-size: 5.75rem;
    }
    .ile-org__name {
        font-size: 0.66rem;
    }
    .ile-org__level--children::before {
        left: 5%;
        right: 5%;
    }
    .ile-ttb-modal {
        padding: 0.75rem;
    }
    .ile-ttb-card--modal {
        padding: 1.75rem 1.25rem;
    }
}