/* ================= VARIÁVEIS GLOBAIS ================= */
:root {
    --bg-page: #E7DEEA;
    --bg-app: #F7F1F8;
    --text-dark: #4A3B63;
    --text-light: #9184A3;
    --card-bg: #FFFFFF;
    --pill-bg: #EEDFF1;
    --accent: #8B6BA8;
    --accent-light: #DFC6E6;
    --accent-dark: #4A3B63;
    --glass: rgba(255,255,255,0.55);
    --glass-border: rgba(255,255,255,0.6);
    --shadow-sm: 0 1px 2px rgba(74,59,99,0.06), 0 3px 10px rgba(74,59,99,0.09);
    --shadow-md: 0 2px 4px rgba(74,59,99,0.07), 0 10px 26px rgba(74,59,99,0.13);
    --shadow-lg: 0 4px 10px rgba(74,59,99,0.10), 0 18px 44px rgba(74,59,99,0.20);
    --section-gap: 26px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Sora', sans-serif;
    background-color: var(--bg-page);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    inset: -40px;
    background-image: url('../assets/img/fundo1.png');
    background-size: cover;
    background-position: center;
    z-index: -1;
    will-change: transform;
}

body::after {
    content: '';
    position: fixed;
    inset: -40px;
    background-image: radial-gradient(rgba(74,59,99,0.10) 1px, transparent 1px);
    background-size: 16px 16px;
    z-index: -1;
    opacity: 0.55;
    pointer-events: none;
}

/* ================= MODO CELULAR / TABLET (layout fluido) ================= */
/* Vale para celulares e tablets (qualquer largura em dispositivo touch),
   e também telas menores de PC */
@media (max-width: 1023px), (pointer: coarse), (hover: none) {
    .app-screen {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
        min-height: 100vh;
        background: transparent;
        padding: 30px 20px 60px 20px;
        display: flex;
        flex-direction: column;
        gap: var(--section-gap);
        overflow-x: hidden;
    }
}

/* ================= MODO DESKTOP (PC, sem moldura de celular) ================= */
@media (min-width: 1024px) and (pointer: fine) and (hover: hover) {
    body { align-items: flex-start; padding: 48px 24px; }

    /* Imagem de fundo própria pra tela larga (horizontal, cantos decorados,
       meio limpo) — combina com o fundo1.png do celular/tablet, então dá
       pra usar "cover" normal sem cortar nem repetir nada. */
    body::before {
        background-image: url('../assets/img/fundo_desktop.png');
        background-size: cover;
    }

    .app-screen {
        width: 100%;
        max-width: 1080px;
        margin: 0 auto;
        min-height: auto;
        background: transparent;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: calc(var(--section-gap) + 10px);
    }

    /* Cursos em grade de 2 colunas, aproveitando a largura da tela */
    #secao-cursos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 22px;
    }
    #secao-cursos .group-title,
    #secao-cursos .cursos-nota {
        grid-column: 1 / -1;
    }
    #secao-cursos .course-card {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    #secao-cursos .course-bottom { margin-top: auto; }

    /* Sobre e Serviços também em 2 colunas */
    #secao-sobre,
    #secao-servicos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 22px;
        align-items: start;
    }
    #secao-sobre .group-title,
    #secao-sobre .about-text,
    #secao-servicos .group-title {
        grid-column: 1 / -1;
    }
}

/* ================= ANIMAÇÕES ================= */
.animate-item {
    opacity: 0;
    animation: fadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--delay, 0s);
}
@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(18px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ================= REVEAL AO ROLAR ================= */
.reveal-item {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0s);
}
.reveal-item.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ================= LOADING SCREEN ================= */
#loading-screen {
    position: fixed; inset: 0; z-index: 9999;
    background: linear-gradient(160deg, #4A3B63, #6B4E8E 60%, #8B6BA8);
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}
#loading-screen.hide { opacity: 0; visibility: hidden; }
.loader-content { text-align: center; }
.loader-logo-ring {
    width: 92px; height: 92px; margin: 0 auto 16px; border-radius: 50%;
    background: rgba(255,255,255,0.15); padding: 4px;
    animation: pulse 1.8s ease-in-out infinite;
}
.loader-logo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.7); }
@keyframes pulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.06);} }
.loader-name { font-family:'Fraunces', serif; color:#fff; font-size: 22px; margin-bottom: 4px; }
.loader-sub { color: rgba(255,255,255,0.75); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px; }
.loader-dots { display:flex; gap:6px; justify-content:center; }
.loader-dots span { width:6px; height:6px; border-radius:50%; background:#fff; opacity:.4; animation: blink 1.4s infinite; }
.loader-dots span:nth-child(2){ animation-delay:.2s; }
.loader-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes blink { 0%,100%{opacity:.3;} 50%{opacity:1;} }

/* ================= TOPO ================= */
.header-status { display: flex; justify-content: space-between; align-items: center; }
.status-left { display: flex; align-items: center; gap: 10px; }
.status-right { display: flex; align-items: center; gap: 8px; }

.greeting {
    font-size: 10px; font-weight: 700; color: var(--text-dark);
    letter-spacing: 2.5px; text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(255,255,255,0.9);
}
.weather-badge {
    display: flex; align-items: center; gap: 6px;
    background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border); padding: 5px 13px; border-radius: 20px;
    font-size: 11px; font-weight: 600; color: var(--text-dark);
    box-shadow: var(--shadow-sm);
}
.weather-badge i { color: var(--accent); }

.share-circle-btn {
    background: var(--glass); color: var(--text-dark);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; cursor: pointer; box-shadow: var(--shadow-sm);
    transition: transform 0.2s;
}
.share-circle-btn:active { transform: scale(0.88); }
.share-circle-btn i,
.quick-nav button i,
.social-icon-btn i,
.whats-option-icon,
.whats-choice-btn i {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.share-circle-btn:active i,
.quick-nav button:active i,
.social-icon-btn:active i,
.whats-option:active .whats-option-icon,
.whats-choice-btn:active i {
    transform: scale(1.25);
}

/* ================= MENU FIXO DE ATALHOS ================= */
.quick-nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.quick-nav::-webkit-scrollbar { display: none; }
.quick-nav button {
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
    background: var(--glass); border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    color: var(--text-dark); font-size: 11.5px; font-weight: 600;
    padding: 8px 14px; border-radius: 20px; cursor: pointer; box-shadow: var(--shadow-sm);
}
.quick-nav button i { color: var(--accent); font-size: 11px; }

/* ================= PERFIL ================= */
.profile-area {
    display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
    padding: 20px 16px 18px; border-radius: 26px;
    background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--glass-border); box-shadow: var(--shadow-md);
}
.avatar-container {
    width: 100px; height: 100px; border-radius: 50%; padding: 4px;
    background: conic-gradient(from 180deg, var(--accent-light), var(--accent), var(--pill-bg), var(--accent-light));
    box-shadow: var(--shadow-lg); position: relative;
    animation: rotateRing 6s linear infinite;
}
@keyframes rotateRing { to { filter: hue-rotate(8deg); } }
.avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #FFF; }
.profile-text h1 { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 600; color: var(--text-dark); }
.profile-location {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    font-size: 12px; color: var(--text-dark); font-weight: 500; opacity: 0.8;
}
.profile-location i { color: var(--accent); font-size: 11px; }
.rating-text { font-size: 11.5px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.06em; }

/* ================= REDES SOCIAIS ================= */
.social-row { display: flex; gap: 11px; justify-content: center; align-items: center; }
.social-icon-btn {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid var(--glass-border); box-shadow: var(--shadow-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--accent); text-decoration: none;
    transition: transform 0.2s cubic-bezier(0.16,1,0.3,1);
}
.social-icon-btn:active { transform: scale(0.86); }
.social-icon-btn--whatsapp { background: #25D366; border-color: #25D366; color: #fff; box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4); animation: pulseWhats 2.6s ease-in-out infinite; }
.social-icon-btn--instagram { color: #C13584; animation: pulseInsta 2.6s ease-in-out infinite; animation-delay: 0.4s; }

@keyframes pulseWhats {
    0%, 100% { box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4); transform: scale(1); }
    50% { box-shadow: 0 4px 22px rgba(37, 211, 102, 0.75); transform: scale(1.06); }
}
@keyframes pulseInsta {
    0%, 100% { box-shadow: var(--shadow-md); transform: scale(1); }
    50% { box-shadow: 0 4px 18px rgba(193, 53, 132, 0.45); transform: scale(1.06); }
}

/* ================= FRASE / SELO ================= */
.welcome-box {
    background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--glass-border);
    border-radius: 18px; padding: 16px 18px; text-align: center; box-shadow: var(--shadow-sm);
}
.welcome-box p { font-family:'Fraunces', serif; font-style: italic; font-size: 13.5px; color: var(--text-dark); line-height: 1.6; }

.quality-seal {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 11.5px; color: var(--accent-dark); font-weight: 600; text-align: center;
}
.quality-seal i { color: var(--accent); }

/* ================= DIFERENCIAIS ================= */
.trust-row { display: flex; justify-content: center; gap: 10px; }
.trust-item {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    flex: 1; text-align: center;
}
.trust-ic {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent); font-size: 15px; box-shadow: var(--shadow-sm);
}
.trust-item span { font-size: 10.5px; font-weight: 600; color: var(--text-dark); line-height: 1.3; }

/* ================= DIVISOR DE CONCHA ================= */
.shell-divider {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    color: var(--accent); font-size: 12px; opacity: 0.75;
    margin: 6px 0; position: relative;
}
.shell-divider::before, .shell-divider::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-light), transparent);
}
.shell-divider i {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle, rgba(139,107,168,0.16), transparent 72%);
    box-shadow: 0 0 10px rgba(139,107,168,0.25);
}

/* ================= GRUPOS / TÍTULOS ================= */
.menu-group { display: flex; flex-direction: column; gap: 14px; }
.group-title {
    font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--text-dark); display: flex; align-items: center; gap: 10px;
    position: relative; padding-bottom: 10px;
}
.group-title::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 34px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
}
.group-title i {
    color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 13px; box-shadow: 0 4px 10px -3px rgba(107,78,142,0.5); flex-shrink: 0;
}
.about-text { font-size: 13px; color: var(--text-light); line-height: 1.65; margin-bottom: 4px; }

/* ================= MINI-BADGES DO CARD ================= */
.course-badges-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mini-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 700; padding: 5px 10px; border-radius: 20px;
    text-decoration: none; white-space: nowrap; line-height: 1.3;
}
.mini-badge i { font-size: 9.5px; }
.mini-badge--certificado {
    background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.1));
    color: #8A6420; border: 1px solid rgba(212,175,55,0.35);
}
.mini-badge--contagem {
    background: linear-gradient(135deg, rgba(180,72,47,0.14), rgba(180,72,47,0.08));
    color: #B4482F; border: 1px solid rgba(180,72,47,0.28);
    animation: badgePulse 2.4s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { opacity: 1; } 50% { opacity: 0.7; }
}
.mini-badge--local {
    background: rgba(139,107,168,0.1); color: var(--accent-dark);
    border: 1px solid rgba(139,107,168,0.25); cursor: pointer;
}
.mini-badge--prazo {
    background: linear-gradient(135deg, rgba(139,107,168,0.16), rgba(139,107,168,0.08));
    color: var(--accent-dark); border: 1px solid rgba(139,107,168,0.3);
}

/* ================= CARDS DE CURSO ================= */
.course-card {
    background: var(--card-bg); border-radius: 20px; padding: 22px 20px;
    box-shadow: 0 4px 10px -4px rgba(107,78,142,0.18), 0 14px 28px -14px rgba(107,78,142,0.28);
    border: 1px solid rgba(139,107,168,0.12);
    position: relative; overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.course-card:active { transform: scale(0.98); }
.course-card:hover {
    box-shadow: 0 10px 18px -6px rgba(107,78,142,0.26), 0 22px 38px -16px rgba(107,78,142,0.38);
    transform: translateY(-4px);
}
.course-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%;
    background: linear-gradient(180deg, var(--accent), var(--accent-light));
}
.course-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.course-top h3 { font-family: 'Fraunces', serif; font-size: 15.5px; font-weight: 600; color: var(--text-dark); line-height: 1.3; }
.course-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; padding: 4px 9px; border-radius: 20px; white-space: nowrap; }
.tag-presencial { background: #F3E7D8; color: #8A6420; }
.tag-online { background: #DCEAE6; color: #2E7D6B; }
.tag-hibrido { background: #E5DCF3; color: #6B4E8E; }

/* ================= AVISO CURSOS ================= */
.cursos-alert {
    background: linear-gradient(135deg, rgba(139,107,168,0.1), rgba(212,175,55,0.08));
    border: 1px solid rgba(139,107,168,0.22); border-radius: 16px;
    padding: 14px 16px; margin-bottom: 4px;
}
.cursos-alert p { font-size: 12px; color: var(--text-dark); line-height: 1.7; }
.cursos-alert strong { color: var(--accent-dark); }
.course-ministrante { font-size: 11.5px; color: var(--text-light); line-height: 1.5; margin-bottom: 16px; }
.course-ministrante b { color: var(--text-dark); font-weight: 600; }
.course-desc { font-size: 12.5px; color: var(--text-light); line-height: 1.6; margin-bottom: 16px; }
.course-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--accent); font-weight: 600; margin-bottom: 18px; }
.course-meta i { margin-right: 4px; }
.vagas-alerta { color: #B4482F; }
.course-bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px 10px 14px; border-radius: 16px; margin-top: 2px;
    background:
        radial-gradient(circle at 18% 30%, rgba(139,107,168,0.09) 0%, transparent 45%),
        radial-gradient(circle at 82% 70%, rgba(212,175,55,0.08) 0%, transparent 50%),
        linear-gradient(135deg, rgba(139,107,168,0.06), rgba(212,175,55,0.05));
    border: 1px solid rgba(139,107,168,0.14);
}
.course-price {
    font-family: 'Fraunces', serif; font-size: 19px; font-weight: 600; color: var(--text-dark);
    flex: 1 1 auto; min-width: 0; line-height: 1.35;
}
.course-btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    color: #fff; font-size: 12.5px; font-weight: 600; text-decoration: none;
    padding: 10px 16px; border-radius: 22px;
    box-shadow: 0 8px 18px -6px rgba(107,78,142,0.5), 0 0 0 rgba(212,175,55,0);
    position: relative; overflow: hidden;
    animation: glowPulse 2.8s ease-in-out infinite;
    flex: 0 0 auto; white-space: nowrap;
}
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 8px 18px -6px rgba(107,78,142,0.5), 0 0 0 rgba(212,175,55,0); }
    50% { box-shadow: 0 8px 20px -6px rgba(107,78,142,0.6), 0 0 14px 2px rgba(212,175,55,0.45); }
}
.cursos-nota {
    font-size: 11px; color: var(--text-light); text-align: center; padding: 12px;
    background: rgba(255,255,255,0.5); border-radius: 12px; border: 1px dashed rgba(139,107,168,0.3);
}

/* ================= ACCORDION ================= */
.accordion-container { margin-bottom: 4px; }
.card-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--card-bg); border-radius: 16px; padding: 13px 15px;
    box-shadow: var(--shadow-sm); border: 1px solid rgba(139,107,168,0.1);
    cursor: pointer; text-decoration: none; color: inherit;
}
.team-card-static {
    display: flex; align-items: center; gap: 10px;
    background: var(--card-bg); border-radius: 16px; padding: 13px 15px;
    box-shadow: var(--shadow-sm); border: 1px solid rgba(139,107,168,0.1);
    margin-bottom: 10px;
}
.card-content { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.icon-wrapper {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card-item:active .icon-wrapper,
.card-item.active .icon-wrapper { transform: scale(1.14); }
.text-wrapper h3 { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.text-wrapper p { font-size: 11.5px; color: var(--text-light); margin-top: 1px; }
.action-pill {
    font-size: 11.5px; font-weight: 600; color: var(--accent);
    background: var(--pill-bg); padding: 7px 12px; border-radius: 20px;
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.arrow-icon { transition: transform 0.25s ease; font-size: 10px; }
.accordion-trigger.active .arrow-icon { transform: rotate(180deg); }
.accordion-body {
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    opacity: 0;
}
.accordion-body.open { opacity: 1; }
.accordion-inner { padding: 14px 6px 4px 6px; }
.acc-p { font-size: 12.5px; color: var(--text-light); line-height: 1.6; margin-bottom: 10px; }
.cred-list { padding-left: 4px; }
.cred-list li { list-style: none; position: relative; padding-left: 14px; font-size: 12.5px; color: var(--text-light); line-height: 1.6; margin-bottom: 7px; }
.cred-list li::before { content: '—'; position: absolute; left: 0; color: var(--accent); }
.cred-list li b { color: var(--text-dark); }

/* ================= MODAL WHATSAPP ================= */
.whats-options { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.whats-option {
    display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
    background: var(--card-bg); border: 1px solid rgba(139,107,168,0.12);
    border-radius: 16px; padding: 12px 14px; transition: transform 0.15s ease;
}
.whats-option:active { transform: scale(0.98); }
.whats-option-icon {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px;
}
.whats-option-text { flex: 1; min-width: 0; text-align: left; }
.whats-option-text h4 { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.whats-option-text p { font-size: 11.5px; color: var(--text-light); margin-top: 1px; }
.whats-option-wa { font-size: 20px; color: #25D366; flex-shrink: 0; }
.whats-option-wa--insta { color: #C13584; }

/* ================= BOTÃO FIXO ================= */
.reserve-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, #25D366, #1FAF57);
    color: #fff; text-decoration: none; font-weight: 700; font-size: 14.5px;
    padding: 15px; border-radius: 20px;
    box-shadow: 0 10px 26px -8px rgba(37,211,102,0.55);
    position: relative; overflow: hidden; border: none; cursor: pointer;
    animation: glowPulseWhats 2.8s ease-in-out infinite;
}
@keyframes glowPulseWhats {
    0%, 100% { box-shadow: 0 10px 26px -8px rgba(37,211,102,0.55); }
    50% { box-shadow: 0 10px 30px -6px rgba(37,211,102,0.85), 0 0 16px 2px rgba(37,211,102,0.35); }
}
.reserve-btn::after {
    content: '';
    position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg);
    animation: shimmer 3.2s ease-in-out infinite;
}
@keyframes shimmer {
    0% { left: -60%; }
    35% { left: 130%; }
    100% { left: 130%; }
}
.reserve-btn:active { transform: scale(0.97); }

/* ================= MODAIS ================= */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(46,33,64,0.55); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; z-index: 2000;
    opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: 20px;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content {
    background: #fff; border-radius: 22px; padding: 26px 22px; max-width: 340px; width: 100%;
    text-align: center; position: relative; box-shadow: var(--shadow-lg);
    overflow-x: hidden; overflow-wrap: break-word; word-break: break-word;
}
.modal-content h3 { font-family: 'Fraunces', serif; color: var(--text-dark); font-size: 18px; margin-bottom: 8px; }
.modal-content p { font-size: 12.5px; color: var(--text-light); margin-bottom: 16px; line-height: 1.55; }
.modal-close {
    position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
    background: var(--pill-bg); border: none; color: var(--text-dark); cursor: pointer;
}
.modal-qr-box { display: flex; justify-content: center; margin-bottom: 16px; }
#qrcode-container { padding: 10px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-sm); }
.modal-btn-full { width: 100%; justify-content: center; display: flex; gap: 8px; }

/* ================= MODAL DETALHES DO CURSO ================= */
.modal-content--curso {
    max-width: 380px; text-align: left; max-height: 86vh; overflow-y: auto; overflow-x: hidden;
    padding: 0;
}
.modal-content--curso h3 { text-align: left; overflow-wrap: break-word; word-break: break-word; }
.modal-content--curso .course-desc,
.modal-content--curso .course-ministrante,
.modal-content--curso .cred-list li {
    overflow-wrap: break-word; word-break: break-word;
}
.modal-content--curso .course-desc { text-align: left; }

.curso-modal-hero {
    position: relative; overflow: hidden; color: #fff; padding: 24px 22px 20px;
    background: linear-gradient(135deg, var(--text-dark), var(--accent) 75%);
}
.curso-modal-hero::before {
    content: ''; position: absolute; top: -34px; right: -34px; width: 150px; height: 150px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%);
}
.curso-modal-hero::after {
    content: '\f19d'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute;
    right: 10px; bottom: -20px; font-size: 84px; color: rgba(255,255,255,0.08); line-height: 1;
}
.curso-modal-hero .course-tag { background: rgba(255,255,255,0.18); color: #fff; position: relative; }
.curso-modal-hero h3 {
    font-family: 'Fraunces', serif; color: #fff; font-size: 19px; line-height: 1.3; position: relative;
    padding-right: 30px;
}
.curso-modal-hero .course-ministrante { color: rgba(255,255,255,0.82); margin-bottom: 8px; position: relative; }
.curso-modal-hero-data { color: rgba(255,255,255,0.88) !important; font-weight: 500; margin-bottom: 0 !important; position: relative; }

.modal-close--light {
    background: rgba(255,255,255,0.2); color: #fff;
}
.modal-close--light:hover { background: rgba(255,255,255,0.3); }

.curso-modal-body { padding: 20px 22px 26px; }

.curso-modal-subtitulo {
    display: flex; align-items: center; gap: 9px;
    font-family: 'Fraunces', serif; font-size: 13.5px; font-weight: 700; color: var(--text-dark);
    margin: 20px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--pill-bg);
}
.curso-modal-subtitulo:first-of-type { margin-top: 4px; }
.curso-modal-subtitulo i {
    color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
    font-size: 10px; flex-shrink: 0;
}

.modal-content--curso .cred-list { padding-left: 0; display: flex; flex-direction: column; gap: 7px; }
.modal-content--curso .cred-list li {
    list-style: none; position: relative; padding: 9px 12px 9px 34px; margin-bottom: 0;
    font-size: 12.5px; color: var(--text-dark); line-height: 1.5;
    background: linear-gradient(135deg, rgba(139,107,168,0.07), rgba(139,107,168,0.03));
    border: 1px solid rgba(139,107,168,0.13); border-radius: 12px;
}
.modal-content--curso .cred-list li::before {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 8px; color: #fff;
    position: absolute; left: 11px; top: 11px; width: 15px; height: 15px; border-radius: 50%;
    background: var(--accent); display: flex; align-items: center; justify-content: center;
}
.modal-content--curso .cred-list li b { color: var(--text-dark); }
.curso-modal-certificado {
    display: flex; align-items: flex-start; gap: 9px; margin-top: 16px;
    padding: 12px 13px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(212,175,55,0.14), rgba(139,107,168,0.08));
    border: 1px solid rgba(212,175,55,0.3);
}
.curso-modal-certificado i { color: #B4902F; font-size: 15px; margin-top: 1px; }
.curso-modal-certificado span { font-size: 11.5px; color: var(--text-dark); line-height: 1.55; font-weight: 500; }
.curso-modal-vagas { margin-top: 12px; font-size: 12px; font-weight: 600; color: #B4482F; }

.whats-choice-list { display: flex; flex-direction: column; gap: 10px; }
.whats-choice-btn {
    display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
    background: var(--pill-bg); padding: 12px 14px; border-radius: 14px; text-align: left;
}
.whats-choice-text h4 { font-size: 13.5px; color: var(--text-dark); }
.whats-choice-text p { font-size: 11px; color: var(--text-light); margin: 0; }

/* ================= TOAST ================= */
#copy-toast {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--accent-dark); color: #fff; font-size: 12.5px; font-weight: 500;
    padding: 11px 20px; border-radius: 30px; box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 3000; white-space: nowrap;
}
#copy-toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ================= ACESSO ADMIN (concha discreta) ================= */
.admin-shell-btn {
    position: fixed; bottom: 14px; left: 14px; z-index: 500;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,0.5); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent); font-size: 14px; opacity: 0.4; transition: opacity 0.25s ease;
    border: 1px solid rgba(139,107,168,0.2); text-decoration: none;
}
.admin-shell-btn:active { opacity: 0.9; }

/* ================= RODAPÉ (crédito do desenvolvedor) ================= */
.dev-footer {
    text-align: center; padding: 22px 16px 90px;
    font-size: 12.5px; color: var(--text-light, #8a8194);
    opacity: 0.75;
}
.dev-footer a {
    color: var(--accent-dark, #6b4e8e); font-weight: 600; text-decoration: none;
}
.dev-footer a:hover { text-decoration: underline; }