/* ============================================================
   PW. Timeline v2.0.0 — PW. Marketing Inteligente
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes ht-spine-flow   { 0%{background-position:0 0} 100%{background-position:0 200%} }
@keyframes ht-spine-pulse  { 0%,100%{box-shadow:0 0 4px var(--ht-line-color,#e8b4d0)} 50%{box-shadow:0 0 18px 4px var(--ht-line-color,#e8b4d0)} }
@keyframes ht-comet-fall   { 0%{top:-6%;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{top:106%;opacity:0} }
@keyframes ht-node-pulse   { 0%,100%{box-shadow:0 0 0 0 var(--ht-pulse-color,var(--ht-dot-color,#d44f8a)),0 0 0 2.5px var(--ht-dot-color,#d44f8a)} 50%{box-shadow:0 0 0 10px transparent,0 0 0 2.5px var(--ht-dot-color,#d44f8a)} }
@keyframes ht-rune-spin    { to{transform:rotate(360deg)} }
@keyframes ht-rune-rev     { to{transform:rotate(-360deg)} }
@keyframes ht-shimmer-move { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
@keyframes ht-reveal-up    { from{opacity:0;transform:translateY(40px);filter:blur(6px)} to{opacity:1;transform:translateY(0);filter:blur(0)} }
@keyframes ht-reveal-fade  { from{opacity:0} to{opacity:1} }
@keyframes ht-reveal-left  { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
@keyframes ht-reveal-right { from{opacity:0;transform:translateX(40px)}  to{opacity:1;transform:translateX(0)} }
@keyframes ht-sparkle-pop  { 0%,100%{opacity:0;transform:scale(.3) rotate(0)} 50%{opacity:1;transform:scale(1) rotate(15deg)} }
@keyframes ht-glow-pulse   { 0%,100%{opacity:.35;filter:blur(40px)} 50%{opacity:.7;filter:blur(55px)} }

/* ── Wrapper ───────────────────────────────────────────────── */
.ht-timeline {
    position:relative;
    padding:10px 0 30px;
    isolation:isolate;
}
.ht-timeline::before {
    content:'';
    position:absolute;
    left:50%;top:0;bottom:0;
    width:2px;
    background:var(--ht-line-color,#e8b4d0);
    transform:translateX(-50%);
    z-index:0;
    transition:box-shadow .3s;
}

/* ── Spine styles ──────────────────────────────────────────── */
.ht-spine--gradient::before {
    background:linear-gradient(180deg,
        transparent 0%,transparent 3%,
        var(--ht-sg1,#60d4c4) 18%,
        var(--ht-sg2,#d4af37) 50%,
        var(--ht-sg3,#b44f8a) 82%,
        transparent 97%,transparent 100%);
    background-size:100% 200%;
    animation:ht-spine-flow var(--ht-spine-speed,9s) linear infinite;
    box-shadow:0 0 14px var(--ht-line-color,#e8b4d0);
}
.ht-spine--pulse::before {
    animation:ht-spine-pulse var(--ht-spine-speed,4s) ease-in-out infinite;
}
.ht-spine--comet::before {
    background:linear-gradient(180deg,
        transparent 0%,var(--ht-line-color,#e8b4d0) 20%,
        var(--ht-line-color,#e8b4d0) 80%,transparent 100%);
    background-size:100% 200%;
    animation:ht-spine-flow var(--ht-spine-speed,9s) linear infinite;
}

/* Comet particle */
.ht-comet {
    display:none;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:5px;height:26px;
    border-radius:999px;
    background:linear-gradient(180deg,transparent,var(--ht-comet-color,#f0d060) 60%,#fff);
    box-shadow:0 0 16px 4px var(--ht-comet-color,#f0d060);
    animation:ht-comet-fall var(--ht-spine-speed,9s) linear infinite;
    z-index:1;
    pointer-events:none;
}
@media(min-width:768px){ .ht-comet{display:block} }

/* ── Row ───────────────────────────────────────────────────── */
.ht-row {
    display:flex;
    align-items:center;
    padding:20px 0;
    position:relative;
}

/* ── Date ──────────────────────────────────────────────────── */
.ht-date-side         { width:45%;flex-shrink:0; }
.ht-date-side--right  { text-align:right;padding-right:28px; }
.ht-date-side--left   { text-align:left;padding-left:28px; }

.ht-date-num {
    font-size:22px;font-style:italic;
    color:#d44f8a;font-weight:500;line-height:1.2;margin:0;
}
.ht-date-label {
    font-size:11px;color:#999;
    text-transform:uppercase;letter-spacing:.08em;font-weight:400;margin:4px 0 0;
}

/* Badge pill */
.ht-date-badge {
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.4rem 1rem;border-radius:999px;
    font-style:italic;font-weight:500;font-size:inherit;
    color:inherit;
    background:rgba(212,79,138,.08);
    border:1px solid rgba(212,79,138,.4);
    box-shadow:0 0 20px -4px rgba(212,79,138,.25);
}
.ht-badge-orn { font-size:.65em;opacity:.9; }

/* Shimmer text */
.ht-shimmer {
    background:linear-gradient(90deg,
        var(--ht-sc1,#d44f8a),
        var(--ht-sc2,#f0c0d8),
        var(--ht-sc3,#a855f7),
        var(--ht-sc1,#d44f8a));
    background-size:200% 100%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    animation:ht-shimmer-move var(--ht-shimmer-speed,5s) linear infinite;
}

/* Chapter label */
.ht-chapter {
    display:flex;align-items:center;gap:.5rem;
    margin-top:.6rem;
    font-size:10px;letter-spacing:.3em;text-transform:uppercase;
    color:rgba(212,79,138,.6);
}
.ht-date-side--right .ht-chapter { justify-content:flex-end; }
.ht-chapter-line { height:1px;width:2rem;background:currentColor;opacity:.5; }

/* ── Dot ───────────────────────────────────────────────────── */
.ht-dot-side {
    width:10%;flex-shrink:0;
    display:flex;justify-content:center;align-items:center;
    z-index:2;position:relative;
    overflow:visible;
}
.ht-dot {
    display:block;width:14px;height:14px;
    border-radius:50%;
    background:var(--ht-dot-color,#d44f8a);
    border:3px solid #fff;
    box-shadow:0 0 0 2.5px var(--ht-dot-color,#d44f8a);
    flex-shrink:0;
    position:relative;
}

/* Pulse */
.ht-dot--pulse {
    width:16px;height:16px;
    animation:ht-node-pulse 3s ease-in-out infinite;
}

/* Rune rings */
.ht-dot--rune {
    width:18px;height:18px;
}
.ht-dot--rune::before {
    content:'';position:absolute;
    inset:-20px;
    border:1px dashed var(--ht-rune-color,rgba(212,79,138,.55));
    border-radius:50%;
    animation:ht-rune-spin var(--ht-rune-speed,18s) linear infinite;
}
.ht-dot--rune::after {
    content:'';position:absolute;
    inset:-10px;
    border:1px dotted var(--ht-rune-color,rgba(212,79,138,.35));
    border-radius:50%;
    animation:ht-rune-rev calc(var(--ht-rune-speed,18s) * .65) linear infinite;
}

/* Numbered */
.ht-dot--numbered {
    width:28px;height:28px;
    display:flex;align-items:center;justify-content:center;
}
.ht-dot-num {
    font-size:11px;font-weight:600;color:#fff;line-height:1;
}

/* Icon */
.ht-dot--icon {
    width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;
    border-width:3px;
    transition:background .25s ease,color .25s ease;
}
.ht-dot--icon i   { font-size:18px;color:#fff;line-height:1; }
.ht-dot--icon svg { width:18px;height:18px;fill:#fff; }
.ht-dot--icon img { width:1em;height:1em;object-fit:contain; }

/* ── Card ──────────────────────────────────────────────────── */
.ht-card-side          { width:45%;flex-shrink:0; }
.ht-card-side--right   { padding-left:28px; }
.ht-card-side--left    { padding-right:28px; }

.ht-card {
    position:relative;
    border:1px solid var(--ht-card-border-color,#e0e0e0);
    border-style:solid;
    border-radius:12px;
    overflow:hidden;
    background:var(--ht-card-bg,#ffffff);
    transition:transform .4s ease,border-color .25s ease,box-shadow .4s ease;
}

/* border (default) */
.ht-card--border:hover { border-color:#d44f8a; }

/* lift */
.ht-card--lift:hover   { transform:translateY(calc(var(--ht-lift,4px) * -1)); border-color:#d44f8a; }

/* glow */
.ht-card--glow:hover   { box-shadow:0 0 var(--ht-glow-blur,30px) var(--ht-glow-color,rgba(212,79,138,.35));border-color:#d44f8a; }

/* shimmer border */
.ht-card--shimmer { overflow:visible; }
.ht-card--shimmer::before {
    content:'';position:absolute;inset:0;
    border-radius:inherit;padding:1px;
    background:linear-gradient(135deg,
        var(--ht-csh1,#d44f8a),transparent 35%,
        transparent 65%,var(--ht-csh2,#a855f7));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.ht-card--shimmer:hover::before { opacity:1; }
.ht-card--shimmer:hover { border-color:#d44f8a; }

/* glass */
.ht-card--glass {
    background:var(--ht-glass-bg,rgba(255,255,255,.08));
    backdrop-filter:blur(var(--ht-glass-blur,10px));
    -webkit-backdrop-filter:blur(var(--ht-glass-blur,10px));
    border-color:rgba(255,255,255,.2);
    color:#fff;
}
.ht-card--glass .ht-date-num   { color:#fff; }
.ht-card--glass .ht-date-label { color:rgba(255,255,255,.6); }
.ht-card--glass .ht-content    { color:rgba(255,255,255,.8); border-top-color:rgba(255,255,255,.12); }
.ht-card--glass:hover          { border-color:rgba(255,255,255,.5); }

/* card header (logo + btn) */
.ht-header {
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 14px 14px 16px;
}
/* Logo: flex container para alinhar a imagem sem alterar display:block do img */
.ht-logo {
    display:flex;
    align-items:center;
    justify-content:flex-start;   /* padrão: esquerda */
    flex:1;
    min-width:0;
}
.ht-logo img { max-width:140px;height:auto;display:block;flex-shrink:0; }

/* btn */
.ht-btn {
    width:28px;height:28px;flex-shrink:0;
    border-radius:50%;border:1px solid #d44f8a;color:#d44f8a;
    background:transparent;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;padding:0;line-height:0;
    transition:background .2s ease,color .2s ease,transform .3s ease,border-color .2s ease;
}
.ht-btn:hover { background:rgba(212,79,138,.08); }
.ht-btn:focus-visible { outline:2px solid #d44f8a;outline-offset:2px; }
.ht-card.is-open .ht-btn {
    background:#d44f8a;color:#fff;transform:rotate(45deg);
}

/* content */
.ht-content {
    font-size:13px;color:#666;line-height:1.65;
    padding:0 16px 14px;
    border-top:.5px solid #f0f0f0;
    animation:ht-reveal-fade .3s ease;
}
.ht-content[hidden] { display:none !important; }
.ht-content p { margin:0 0 8px; }
.ht-content p:last-child { margin-bottom:0; }
.ht-link,.ht-content a {
    color:#d44f8a;font-size:12px;text-decoration:none;
    display:inline-block;margin-top:8px;
}
.ht-link:hover,.ht-content a:hover { text-decoration:underline; }

/* ── Sparkles ──────────────────────────────────────────────── */
.ht-sparkle {
    position:absolute;
    width:12px;height:12px;
    pointer-events:none;
    animation:ht-sparkle-pop 2.4s ease-in-out infinite;
    filter:drop-shadow(0 0 5px #d44f8a);
    z-index:3;
}
.ht-sparkle svg { width:100%;height:100%;fill:#d44f8a; }

/* ── Starfield ─────────────────────────────────────────────── */
.ht-starfield {
    display:none;
    position:absolute;inset:0;z-index:-1;
    pointer-events:none;opacity:.25;
    background-image:
        radial-gradient(1px 1px at 20px 30px,#fff,transparent),
        radial-gradient(1px 1px at 80px 70px,rgba(200,230,255,.9),transparent),
        radial-gradient(1.5px 1.5px at 140px 40px,#fff,transparent),
        radial-gradient(1px 1px at 200px 90px,rgba(255,240,180,.9),transparent),
        radial-gradient(1px 1px at 260px 130px,#fff,transparent),
        radial-gradient(1.5px 1.5px at 50px 150px,rgba(200,160,255,.9),transparent),
        radial-gradient(1px 1px at 180px 160px,#fff,transparent),
        radial-gradient(1px 1px at 320px 60px,rgba(180,220,255,.9),transparent);
    background-size:360px 360px;
}
.ht-has-starfield .ht-starfield { display:block; }

/* ── Orbs ──────────────────────────────────────────────────── */
.ht-orb {
    display:none;
    position:absolute;border-radius:999px;
    pointer-events:none;z-index:-1;
    animation:ht-glow-pulse 4s ease-in-out infinite;
}
.ht-has-orbs .ht-orb { display:block; }
.ht-orb--a {
    left:50%;top:30%;
    width:480px;height:480px;
    transform:translateX(-50%);
    background:radial-gradient(closest-side,var(--ht-orb1,rgba(160,100,220,.25)),transparent);
}
.ht-orb--b {
    right:-80px;bottom:10%;
    width:380px;height:380px;
    background:radial-gradient(closest-side,var(--ht-orb2,rgba(212,79,138,.2)),transparent);
    animation-delay:2s;
}

/* ── Header block ──────────────────────────────────────────── */
.ht-header-block {
    text-align:center;
    margin-bottom:4rem;
}
.ht-eyebrow {
    font-size:.75rem;font-weight:600;letter-spacing:.35em;
    color:#c8a050;
}
.ht-header-title {
    margin-top:.75rem;
    font-size:2rem;line-height:1.1;
    font-weight:500;
}
.ht-header-subtitle {
    margin:.9rem auto 0;max-width:32rem;
    font-size:.9375rem;color:rgba(0,0,0,.65);line-height:1.6;
}
.ht-ornament {
    margin-top:1.25rem;
    display:flex;align-items:center;justify-content:center;gap:.75rem;
    color:rgba(200,160,80,.7);
}
.ht-ornament-line {
    display:inline-block;
    height:1px;width:3rem;
    background:linear-gradient(to right,transparent,currentColor);
}
.ht-ornament-line--r { background:linear-gradient(to left,transparent,currentColor); }

/* ── Footer block ──────────────────────────────────────────── */
.ht-footer-block {
    margin-top:2.5rem;
    display:flex;align-items:center;justify-content:center;gap:.75rem;
    color:rgba(200,160,80,.8);
}
.ht-footer-label {
    font-size:.875rem;font-weight:600;letter-spacing:.35em;
    text-transform:uppercase;
}

/* ── Reveal ────────────────────────────────────────────────── */
.ht-reveal--up .ht-reveal-item,
.ht-reveal--fade .ht-reveal-item,
.ht-reveal--slide .ht-reveal-item {
    opacity:0;
}
.ht-reveal--up   .ht-reveal-item.ht-is-revealed { animation:ht-reveal-up    var(--ht-reveal-dur,.8s) cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--reveal-delay,0ms); }
.ht-reveal--fade .ht-reveal-item.ht-is-revealed { animation:ht-reveal-fade  var(--ht-reveal-dur,.8s) ease both; animation-delay:var(--reveal-delay,0ms); }
.ht-reveal--slide .ht-row--right.ht-reveal-item.ht-is-revealed { animation:ht-reveal-right var(--ht-reveal-dur,.8s) ease both; animation-delay:var(--reveal-delay,0ms); }
.ht-reveal--slide .ht-row--left.ht-reveal-item.ht-is-revealed  { animation:ht-reveal-left  var(--ht-reveal-dur,.8s) ease both; animation-delay:var(--reveal-delay,0ms); }

/* Editor: show all items */
.elementor-editor-active .ht-reveal-item { opacity:1 !important; animation:none !important; }

/* ── Themes ────────────────────────────────────────────────── */
/*
   ESTRATÉGIA DE CASCATA COM CSS VARIABLES:
   ─────────────────────────────────────────────────────────────
   1. .ht-card usa var(--ht-card-bg, #fff) — sem valor fixo.
   2. .ht-theme--dark define --ht-card-bg no elemento ANCESTRAL
      (.ht-timeline). Isso cascateia por herança aos filhos.
   3. Controle Elementor define --ht-card-bg DIRETAMENTE em
      {{WRAPPER}} .ht-card (= o próprio elemento card).
   4. Declaração direta num elemento SEMPRE vence herança do
      ancestral — independente de especificidade ou !important.
   Resultado:
   • Sem valor no controle → tema aplica (herança do ancestral) ✓
   • Usuário escolhe cor   → declaração direta vence herança  ✓
   • Tema clean sem ajuste → fallback #fff do var()           ✓
   ─────────────────────────────────────────────────────────────
*/

/* Dark Glass — variáveis no ancestral (herança para os cards) */
:where(.ht-theme--dark) {
    --ht-card-bg:           rgba(18,12,38,.85);
    --ht-card-border-color: rgba(139,92,246,.3);
}
:where(.ht-theme--dark) .ht-card {
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
:where(.ht-theme--dark) .ht-content { color:rgba(255,255,255,.78);border-top-color:rgba(255,255,255,.08); }
:where(.ht-theme--dark) .ht-btn     { border-color:rgba(200,160,255,.7);color:rgba(200,160,255,.9); }
:where(.ht-theme--dark) .ht-card.is-open .ht-btn { background:rgba(139,92,246,.9);color:#fff;border-color:transparent; }

/* Magical — ativa todos os efeitos por padrão */
:where(.ht-theme--magical)::before {
    background:linear-gradient(180deg,
        transparent 0%,transparent 3%,
        var(--ht-sg1,rgba(96,212,196,.9)) 18%,
        var(--ht-sg2,rgba(212,175,55,.9)) 50%,
        var(--ht-sg3,rgba(180,79,138,.9)) 82%,
        transparent 97%,transparent 100%);
    background-size:100% 200%;
    animation:ht-spine-flow var(--ht-spine-speed,9s) linear infinite;
    box-shadow:0 0 18px rgba(96,212,196,.5);
}
:where(.ht-theme--magical) .ht-dot { animation:ht-node-pulse 3s ease-in-out infinite; }
:where(.ht-theme--magical) .ht-starfield { display:block; }
:where(.ht-theme--magical) .ht-orb       { display:block; }
:where(.ht-theme--magical) .ht-comet     { display:block; }

/* ── Mobile ────────────────────────────────────────────────── */
@media(max-width:767px) {
    .ht-timeline::before { left:24px;transform:none;z-index:0; }
    .ht-row {
        flex-direction:column;align-items:flex-start;
        padding-left:calc(24px + var(--ht-icon-r,7px) + 14px);
        padding-top:16px;padding-bottom:16px;position:relative;
    }
    .ht-dot-side {
        position:absolute;left:24px;top:16px;
        transform:translateX(-50%);
        width:auto;flex:none;z-index:2;
    }
    .ht-dot--rune::before { inset:-14px; }
    .ht-dot--rune::after  { inset:-7px;  }
    .ht-date-side,.ht-card-side {
        width:100%;flex:none;
        text-align:left !important;
        padding-left:0 !important;padding-right:0 !important;
    }
    .ht-date-side  { order:1;margin-bottom:10px; }
    .ht-card-side  { order:2; }
    .ht-date-side--right .ht-chapter { justify-content:flex-start; }
    /* Logo reseta alinhamento no mobile — controle responsivo do Elementor pode sobrescrever */
    .ht-logo { justify-content:flex-start !important; }
    .ht-date-num   { font-size:17px; }
    .ht-date-label { font-size:10px; }
    .ht-sparkle    { display:none; }
    .ht-orb--a,.ht-orb--b { width:200px;height:200px; }
}
@media(max-width:400px) {
    .ht-timeline::before { left:20px; }
    .ht-dot-side { left:20px; }
    .ht-row { padding-left:calc(20px + var(--ht-icon-r,7px) + 12px); }
}

/* ── Spine fade-end (mask-image) ───────────────────────────── */
/*
   mask-image faz a linha desaparecer gradualmente no final.
   Funciona para todos os estilos de linha (solid, gradient, pulse, comet).
   var(--ht-fade-size) é definido pelo slider "Tamanho do fade".
*/
.ht-spine--fade-end::before {
    -webkit-mask-image:linear-gradient(180deg,
        black 0%,
        black calc(100% - var(--ht-fade-size,80px)),
        transparent 100%);
    mask-image:linear-gradient(180deg,
        black 0%,
        black calc(100% - var(--ht-fade-size,80px)),
        transparent 100%);
}

/* ── Botão: variações de ícone ─────────────────────────────── */
/* Chevron e Arrow giram 180° em vez de 45° */
.ht-btn-type--chevron.is-open .ht-btn,
.ht-btn-type--arrow.is-open .ht-btn  { transform:rotate(180deg); }
/* Custom — mantém rotação 45° (mesmo do plus) */
.ht-btn-type--custom.is-open .ht-btn { transform:rotate(45deg); }

/* Tamanho padrão dos ícones de chevron/arrow no botão */
.ht-btn svg { width:12px;height:12px; }

/* ── Footer ornament symbol ────────────────────────────────── */
.ht-footer-orn {
    font-size:.75rem;opacity:.8;
}

/* ── Glass sempre ativo (não apenas no hover) ───────────────── */
.ht-card--glass-always {
    backdrop-filter:blur(var(--ht-card-blur,10px)) saturate(var(--ht-card-saturate,150%));
    -webkit-backdrop-filter:blur(var(--ht-card-blur,10px)) saturate(var(--ht-card-saturate,150%));
    background:var(--ht-glass-always-bg,rgba(255,255,255,.08));
}

/* ── Orbe interno dos cards ─────────────────────────────────── */
.ht-card--orb { overflow:hidden; }
.ht-card--orb::after {
    content:'';
    position:absolute;
    pointer-events:none;
    border-radius:999px;
    z-index:0;
    width:var(--ht-card-orb-size,200px);
    height:var(--ht-card-orb-size,200px);
    background:radial-gradient(closest-side,
        var(--ht-card-orb-color,rgba(212,79,138,.35)),
        transparent 100%);
    opacity:var(--ht-card-orb-opacity,1);
    animation:ht-glow-pulse var(--ht-card-orb-speed,4s) ease-in-out infinite;
    transition:opacity .3s;
}
/* Posições do orbe */
.ht-card--orb-top-right::after     { top:-35%;right:-15%; }
.ht-card--orb-top-left::after      { top:-35%;left:-15%; }
.ht-card--orb-top-center::after    { top:-35%;left:50%;transform:translateX(-50%); }
.ht-card--orb-center::after        { top:50%;left:50%;transform:translate(-50%,-50%); }
.ht-card--orb-bottom-right::after  { bottom:-35%;right:-15%; }
.ht-card--orb-bottom-left::after   { bottom:-35%;left:-15%; }
.ht-card--orb-bottom-center::after { bottom:-35%;left:50%;transform:translateX(-50%); }
/* Garante que conteúdo do card fica acima do orbe */
.ht-card--orb .ht-header,
.ht-card--orb .ht-content { position:relative;z-index:1; }

/* reduced-motion */
@media(prefers-reduced-motion:reduce) {
    .ht-timeline::before,
    .ht-comet,.ht-dot--pulse,.ht-dot--rune::before,.ht-dot--rune::after,
    .ht-shimmer,.ht-sparkle,.ht-orb,.ht-reveal-item {
        animation:none !important;opacity:1 !important;transform:none !important;filter:none !important;
    }
}