/* =============================================================
   GRATUITOS.CSS - v3.0 | Fevereiro 2026
   Hero: evento esq + mulher+whatsapp dir
   Dual: eventos + materiais compacto
   Mailing: cadastro ti_evento_inscricao
   Replay: youtube direto
   ============================================================= */

/* =============================================================
   1. HERO
   ============================================================= */
.hero-destaque {
    position: relative;
    background: linear-gradient(135deg, rgba(6, 30, 73, 0.90) 0%, rgba(4, 55, 143, 0.85) 100%), 
                url('/novosite2026/imagens/fundo_gratuitos.jpg');
    background-size: cover;
    background-position: center;
    padding: 110px 0 0;
    overflow: hidden;
}

.hero-destaque-bg {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    opacity: 0.5;
    pointer-events: none;
}

.hero-split {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 580px;
    gap: 32px;
    align-items: end;
    min-height: 380px;
}

.hero-left {
    color: var(--bg-white);
    padding-bottom: 48px;
}

/* Badge */
.badge-destaque {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.85);
}
.badge-destaque.hoje { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.4); color: #fca5a5; }
.badge-destaque.amanha { background: rgba(251,191,36,0.2); border-color: rgba(251,191,36,0.4); color: #fde68a; }
.badge-destaque.breve { background: rgba(83,113,245,0.2); border-color: rgba(83,113,245,0.4); color: #a5b4fc; }
.badge-destaque .pulse { width:8px;height:8px;background:currentColor;border-radius:50%;animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(1.3);} }

.hero-tipo { display:block;font-size:0.75rem;font-weight:600;color:var(--primary-light);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px; }

.hero-titulo {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.375rem, 2.8vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 10px;
    color: var(--bg-white);
}

.hero-descricao { font-size:0.9375rem;color:rgba(255,255,255,0.75);line-height:1.6;margin-bottom:16px;max-width:520px; }

/* Palestrante */
.hero-evento-details { margin-bottom:18px; }
.hero-palestrante-row { display:flex;align-items:center;gap:10px;margin-bottom:10px; }
.hero-palestrante-thumb { width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:center top;border:2px solid rgba(255,255,255,0.25);flex-shrink:0; }
.hero-palestrante-label { display:block;font-size:0.6875rem;color:rgba(255,255,255,0.5);line-height:1;margin-bottom:2px; }
.hero-palestrante-name { font-size:0.9375rem;font-weight:600;color:var(--bg-white); }

/* Meta chips */
.hero-meta-compact { display:flex;flex-wrap:wrap;gap:8px; }
.meta-chip { display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:rgba(255,255,255,0.07);border-radius:var(--radius-full);font-size:0.8125rem;color:rgba(255,255,255,0.85);white-space:nowrap; }
.meta-chip svg { color:var(--primary-light);flex-shrink:0; }
.meta-chip.meta-cert { color:#86efac; }
.meta-chip.meta-cert svg { color:#86efac; }

/* Actions + countdown */
.hero-actions { display:flex;align-items:center;gap:20px;flex-wrap:wrap; }
.btn-hero-inscricao { display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--gradient);color:var(--bg-white);font-size:0.9375rem;font-weight:600;border-radius:var(--radius);transition:all 0.3s ease;box-shadow:0 4px 20px rgba(83,113,245,0.4);white-space:nowrap; }
.btn-hero-inscricao:hover { transform:translateY(-2px);box-shadow:0 8px 30px rgba(83,113,245,0.5); }
.btn-hero-inscricao svg { transition:transform 0.3s ease; }
.btn-hero-inscricao:hover svg { transform:translateX(3px); }

.countdown-inline { display:flex;flex-direction:column;gap:3px; }
.cd-label { font-size:0.625rem;color:rgba(255,255,255,0.45);text-transform:uppercase;letter-spacing:0.5px; }
.cd-units { display:flex;align-items:center;gap:2px; }
.cd-block { font-size:0.75rem;color:rgba(255,255,255,0.6); }
.cd-block b { display:inline-block;background:rgba(255,255,255,0.1);padding:3px 5px;border-radius:4px;font-family:'Outfit',sans-serif;font-size:0.9375rem;font-weight:700;color:var(--bg-white);min-width:26px;text-align:center;margin-right:1px; }
.cd-sep { font-weight:700;color:rgba(255,255,255,0.25);font-size:0.875rem; }

/* --- HERO RIGHT: mulher + whatsapp card --- */
.hero-right {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.hero-right-stack {
    display: flex;
    align-items: flex-end;
    gap: 0;
    position: relative;
}

/* Mulher apontando - alinhada ao fundo do hero */
.hero-mulher {
    width: 300px;
    height: auto;
    display: block;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.3));
    position: relative;
    z-index: 1;
    margin-right: -24px;
}

/* Card lembrete comunidade ao lado da mulher */
.whatsapp-card {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: 26px 22px;
    color: var(--bg-white);
    width: 340px;
    flex-shrink: 0;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.whatsapp-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.whatsapp-card-icon {
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.whatsapp-card-icon svg { width:20px;height:20px;color:#fff;stroke:#fff; }

.whatsapp-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    display: block;
    line-height: 1.3;
}

.whatsapp-card-sub {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.5);
}

.whatsapp-card-text {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.55;
    margin-bottom: 16px;
}

.btn-whatsapp-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    background: #25D366;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius);
    transition: all 0.3s ease;
    width: 100%;
}
.btn-whatsapp-hero:hover { background:#1fb855;transform:translateY(-2px);box-shadow:0 4px 12px rgba(37,211,102,0.3); }

/* Hero responsivo */
@media (max-width: 1200px) {
    .hero-split { grid-template-columns: 1fr 480px; }
    .hero-mulher { width: 240px; }
    .whatsapp-card { width: 280px; padding: 22px 18px; }
}

@media (max-width: 1024px) {
    .hero-split { grid-template-columns: 1fr; align-items: center; }
    .hero-left { padding-bottom: 32px; }
    .hero-right { justify-content: center; }
    .hero-right-stack { justify-content: center; }
    .hero-mulher { width: 220px; margin-right: -16px; }
    .whatsapp-card { width: 300px; margin-bottom: 10px; }
}

@media (max-width: 640px) {
    .hero-destaque { padding: 90px 0 0; }
    .hero-meta-compact { flex-direction: column; gap: 6px; }
    .hero-actions { flex-direction: column; align-items: stretch; gap: 14px; }
    .btn-hero-inscricao { justify-content: center; }
    .countdown-inline { align-items: center; }
    /* Mulher ABAIXO do card no celular */
    .hero-right-stack { flex-direction: column; align-items: center; }
    .hero-mulher { width: 180px; margin-right: 0; order: 2; }
    .whatsapp-card { width: 100%; margin-bottom: 0; order: 1; }
}

/* =============================================================
   2. FAIXA DUPLA: EVENTOS + MATERIAIS
   ============================================================= */
.eventos-materiais { background: var(--bg-light); padding: 36px 0; }

.dual-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}

.dual-col {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.dual-col-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.dual-col-header > svg { color: var(--primary); flex-shrink: 0; margin-top: 2px; }

.dual-col-title { font-family:'Outfit',sans-serif;font-size:1.0625rem;font-weight:700;color:var(--text-primary);line-height:1.3;margin-bottom:2px; }
.dual-col-sub { font-size:0.8125rem;color:var(--text-secondary);line-height:1.4; }

/* Mini eventos */
.mini-eventos-list { display:flex;flex-direction:column;gap:8px; }

.mini-evento { display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--radius);border:1px solid var(--border);transition:all 0.2s ease;text-decoration:none;color:inherit; }
.mini-evento:hover { border-color:var(--primary);background:rgba(83,113,245,0.02);transform:translateX(2px); }

.mini-evento-date { display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:46px;padding:6px 8px;background:var(--gradient);border-radius:var(--radius-sm);flex-shrink:0; }
.mini-dia { font-family:'Outfit',sans-serif;font-size:1.0625rem;font-weight:800;color:#fff;line-height:1; }
.mini-mes { font-size:0.5625rem;font-weight:700;color:rgba(255,255,255,0.8);text-transform:uppercase;letter-spacing:0.5px;margin-top:1px; }

.mini-evento-info { flex:1;min-width:0; }
.mini-evento-nome { font-family:'Outfit',sans-serif;font-size:0.8125rem;font-weight:600;color:var(--text-primary);line-height:1.3;margin-bottom:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.mini-evento-meta { display:flex;align-items:center;gap:4px;font-size:0.6875rem;color:var(--text-secondary);flex-wrap:wrap; }
.mini-dot { color:var(--text-muted); }
.mini-cert { color:var(--primary);font-weight:600; }
.mini-evento-arrow { color:var(--text-muted);flex-shrink:0;transition:color 0.2s; }
.mini-evento:hover .mini-evento-arrow { color:var(--primary); }

/* Empty compacto (materiais) */
.dual-empty { text-align:center;padding:28px 16px;color:var(--text-secondary);font-size:0.875rem;line-height:1.5; }

.dual-empty-compact {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-light);
}

.dual-empty-compact svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.dual-empty-compact strong {
    display: block;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 1px;
}

.dual-empty-compact span {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.btn-materiais-wa {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: #25D366;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius);
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}
.btn-materiais-wa:hover { background:#128C7E;transform:translateY(-1px); }

@media (max-width: 900px) { .dual-columns { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
    .dual-col { padding: 18px 16px; }
    .dual-empty-compact { flex-direction: column; text-align: center; }
    .btn-materiais-wa { margin-left: 0; }
}

/* =============================================================
   3. MAILING + CERTIFICADO (dual)
   ============================================================= */
.mailing-certificado {
    background: var(--bg-white);
    padding: 32px 0;
}

.mc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.mc-box {
    border-radius: var(--radius-xl);
    padding: 28px 24px;
}

.mc-newsletter {
    background: var(--gradient);
    color: var(--bg-white);
}

.mc-certificado {
    background: var(--bg-light);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.mc-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.mc-icon {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mc-icon svg { width:22px;height:22px;color:var(--bg-white); }

.mc-icon-cert {
    background: var(--accent-light);
}
.mc-icon-cert svg { color: var(--primary); }

.mc-newsletter .mc-header h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 3px;
    color: var(--bg-white);
}

.mc-newsletter .mc-header p {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
}

.mc-certificado .mc-header h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 3px;
    color: var(--text-primary);
}

.mc-certificado .mc-header p {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Newsletter form */
.mailing-form {
    display: flex;
    gap: 8px;
}

.mailing-input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--bg-white);
    transition: all 0.3s ease;
}
.mailing-input::placeholder { color:rgba(255,255,255,0.55); }
.mailing-input:focus { outline:none;border-color:var(--bg-white);background:rgba(255,255,255,0.18); }

.mailing-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 18px;
    background: var(--bg-white);
    color: var(--dark);
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-family: inherit;
}
.mailing-btn:hover { transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.2); }
.mailing-btn:disabled { opacity:0.7;cursor:not-allowed;transform:none; }

.mc-disclaimer {
    font-size: 0.6875rem;
    color: rgba(255,255,255,0.45);
    margin-top: 8px;
}

.mc-success {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bg-white);
    padding: 4px 0;
}

/* Certificado */
.mc-cert-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    background: var(--gradient);
    color: var(--bg-white);
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius);
    transition: all 0.3s ease;
    margin-bottom: 12px;
}
.mc-cert-btn:hover { transform:translateY(-2px);box-shadow:0 4px 16px rgba(83,113,245,0.4); }

.mc-cert-note {
    font-size: 0.8125rem;
    color: #991b1b;
    line-height: 1.5;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius);
    padding: 12px 14px;
}

@media (max-width: 900px) {
    .mc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .mc-box { padding: 22px 18px; }
    .mailing-form { flex-direction: column; }
    .mailing-btn { width: 100%; justify-content: center; }
}

/* =============================================================
   4. REPLAY YOUTUBE
   ============================================================= */
.replay-aulas { background: var(--bg-light); }

.replay-header { display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px;flex-wrap:wrap; }
.replay-header-left { flex:1; }
.replay-header-left .section-title { margin-bottom:6px; }
.replay-header-left .section-description { margin-bottom:0; }

.replay-header-right { display:flex;gap:10px;align-items:center; }

.replay-search { position:relative;width:260px; }
.replay-search svg { position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-muted);pointer-events:none; }
.replay-search input { width:100%;padding:10px 12px 10px 40px;border:1px solid var(--border);border-radius:var(--radius);font-size:0.875rem;font-family:inherit;color:var(--text-primary);background:var(--bg-white);transition:border-color 0.2s,box-shadow 0.2s; }
.replay-search input:focus { outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(83,113,245,0.1); }

.replay-sort { padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius);font-size:0.875rem;font-family:inherit;background:var(--bg-white);color:var(--text-primary);cursor:pointer; }
.replay-sort:focus { outline:none;border-color:var(--primary); }

.videos-loading { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;gap:14px; }
.videos-loading p { color:var(--text-secondary);font-size:0.875rem; }

.videos-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }

.video-card { background:var(--bg-white);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);transition:transform 0.3s,box-shadow 0.3s,border-color 0.3s; }
.video-card:hover { transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent; }

.video-thumb { position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-gray); }
.video-thumb img { width:100%;height:100%;object-fit:cover;transition:transform 0.3s; }
.video-card:hover .video-thumb img { transform:scale(1.05); }

.video-duration { position:absolute;bottom:6px;right:6px;padding:2px 6px;background:rgba(0,0,0,0.8);color:var(--bg-white);font-size:0.6875rem;font-weight:600;border-radius:var(--radius-sm); }

.video-content { padding:12px; }
.video-title { font-family:'Outfit',sans-serif;font-size:0.8125rem;font-weight:600;color:var(--text-primary);line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.video-meta { display:flex;align-items:center;gap:10px;font-size:0.75rem;color:var(--text-secondary); }

.videos-empty { text-align:center;padding:48px 20px;color:var(--text-secondary); }
.videos-empty svg { width:48px;height:48px;margin-bottom:12px;color:var(--border); }
.videos-empty h3 { font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:4px; }

.videos-load-more { text-align:center;padding:28px 0 0; }
.btn-load-more { display:inline-flex;align-items:center;gap:4px;padding:12px 28px;background:var(--bg-white);border:2px solid #FF0000;border-radius:var(--radius);font-size:0.9375rem;font-weight:600;color:#FF0000;cursor:pointer;transition:all 0.3s;font-family:inherit;text-decoration:none; }
.btn-load-more:hover { background:#FF0000;color:var(--bg-white); }
.btn-load-more:hover svg { fill:var(--bg-white); }

@media (max-width: 1200px) { .videos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .videos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
    .replay-header { flex-direction:column;align-items:stretch; }
    .replay-header-right { flex-direction:column; }
    .replay-search { width:100%; }
    .replay-sort { width:100%; }
}
@media (max-width: 640px) { .videos-grid { grid-template-columns: 1fr; } }