/* Convite Inteligente - template "pagina2" do catalogo (grupo VIP, pagina branca com medidor de lotacao) */
/* Escopo exclusivo: views/publicas/convite/pagina2.ejs */
/* Tema do cliente: --cv-accent (CTA), --cv-accent2 (hover do CTA), --cv-bg (fundo), --cv-text (texto e titulo), --cv-topbar (faixa e selo), --cv-font */

.pagina2-page,
.pagina2-page * { box-sizing: border-box; }

.pagina2-page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--cv-bg, #fff);
    font-family: var(--cv-font, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    color: var(--cv-text, #14181B);
    -webkit-font-smoothing: antialiased;
}

.pagina2-topbar {
    width: 100%;
    background: var(--cv-topbar, #7EC544);
    padding: 0.65rem 1rem;
    text-align: center;
}
.pagina2-topbar p {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 800;
    color: #143601;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pagina2-main {
    flex: 1;
    width: 100%;
    max-width: 27rem;
    margin: 0 auto;
    padding: 2.25rem 1.25rem 3rem;
    text-align: center;
}

/* Avatar: a logo preenche o circulo inteiro, sem borda nem anel (decisao de
   2026-08-13; o cover corta as pontas de logo retangular de tenant) */
.pagina2-avatar {
    margin: 0 auto 1.5rem;
    width: 6rem;
    height: 6rem;
    overflow: hidden;
    border-radius: 9999px;
    background: transparent;
    box-shadow: 0 10px 20px -12px rgba(15, 81, 50, .5);
}
.pagina2-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pagina2-eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--cv-topbar, #2F8F4E);
}

.pagina2-title {
    margin: 0 0 0.85rem;
    font-size: clamp(1.75rem, 7vw, 2.35rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--cv-text, #0F5132);
    text-wrap: balance;
    overflow-wrap: break-word;
}

.pagina2-subtitle {
    margin: 0 auto 1.75rem;
    max-width: 21rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #4B5563;
}

/* Botao no mesmo estilo do CTA da pagina3 (verde chapado, pilula, anel verde) */
.pagina2-cta {
    display: inline-flex;
    width: 100%;
    max-width: 20rem;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    border-radius: 100px;
    background: var(--cv-accent, #61CE70);
    padding: 1.25rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 18px -6px rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: transform .2s, background .2s;
    animation: pagina2-cta-pulse 1.8s ease-out infinite;
}
.pagina2-cta:hover { background: var(--cv-accent2, #52BF61); transform: scale(1.03); }
.pagina2-cta:active { transform: scale(0.98); }
.pagina2-cta:focus-visible { outline: 3px solid #0F5132; outline-offset: 3px; }
.pagina2-cta svg { height: 1.4rem; width: 1.4rem; fill: currentColor; flex-shrink: 0; }
@keyframes pagina2-cta-pulse {
    0% { box-shadow: 0 10px 18px -6px rgba(0, 0, 0, .25), 0 0 0 0 rgba(97, 206, 112, .5); }
    70% { box-shadow: 0 10px 18px -6px rgba(0, 0, 0, .25), 0 0 0 16px rgba(97, 206, 112, 0); }
    100% { box-shadow: 0 10px 18px -6px rgba(0, 0, 0, .25), 0 0 0 0 rgba(97, 206, 112, 0); }
}

.pagina2-garantia {
    margin: 0.9rem 0 2rem;
    font-size: 0.85rem;
    color: #6B7280;
}

/* Lotacao: unico bloco fechado da pagina, logo abaixo do CTA */
.pagina2-lotacao {
    border-radius: 1rem;
    border: 1px solid #DCEBD6;
    background: #F1F8EF;
    padding: 1.35rem;
    text-align: left;
}
.pagina2-lotacao-topo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pagina2-vagas-num {
    margin: 0;
    flex-shrink: 0;
    font-size: 3.25rem;
    line-height: 0.9;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #0F5132;
    font-variant-numeric: tabular-nums;
}
.pagina2-lotacao-texto { min-width: 0; }
.pagina2-vagas-label {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #2F8F4E;
}
.pagina2-membros {
    margin: 0.3rem 0 0;
    font-size: 0.95rem;
    line-height: 1.35;
    color: #14181B;
}

/* Medidor de lotacao: a barra enche no load e para quase no fim */
.pagina2-medidor {
    height: 0.55rem;
    border-radius: 9999px;
    background: #DCEBD6;
    overflow: hidden;
}
.pagina2-medidor-fill {
    display: block;
    height: 100%;
    width: 94%;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--cv-accent, #7EC544) 0%, var(--cv-accent2, #61CE70) 100%);
    transform-origin: left;
    animation: pagina2-medidor 1.1s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes pagina2-medidor { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.pagina2-logos-titulo {
    margin: 2.25rem 0 0.75rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #9CA3AF;
}

.pagina2-logos {
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid #E8E8E8;
    background: #fff;
    padding: 0.5rem 0;
}
.pagina2-logos-track {
    display: flex;
    gap: 2.5rem;
    white-space: nowrap;
    width: max-content;
    animation: pagina2-scroll-left 30s linear infinite;
}
@keyframes pagina2-scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.pagina2-logos-group { display: flex; flex-shrink: 0; align-items: center; gap: 2.5rem; }
.pagina2-logo { flex-shrink: 0; display: flex; align-items: center; justify-content: center; height: 2.75rem; }
.pagina2-logo img { height: 1.6rem; width: auto; max-width: 7rem; object-fit: contain; display: block; }

@media (min-width: 640px) {
    .pagina2-main { padding-top: 3rem; }
    .pagina2-vagas-num { font-size: 3.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pagina2-cta, .pagina2-logos-track { animation: none; }
    .pagina2-medidor-fill { animation: none; }
}