/* ============================================================================
   Anthares 44 — Página "reference" (reprodução fiel de Referencia.webp)
   Página INDEPENDENTE. Reset próprio; não depende de style.css nem afeta o site.
   Escopo 100% em .rf* . Tipografia Inter (do site).
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
.rf-scope, .rf-scope * { margin: 0; padding: 0; }

:root {
    --rf-page-a: #e6e6e6;  --rf-page-b: #dcdcdc;  /* fundo (gradiente sutil) */
    --rf-panel:  #f7f7f7;                          /* card grande */
    --rf-card:   #ffffff;                          /* cards do feed */
    --rf-ink:    #0a0a0a;                           /* texto forte / botão preto */
    --rf-muted:  #7b7b7b;                           /* subtítulo */
    --rf-faint:  #9a9a9a;                           /* horário */
    --rf-dur:    #b6b6b6;                           /* duração (texto cinza claro) */
    --rf-line:   rgba(10,10,10,.08);               /* bordas sutis */
    --rf-orange: #fb5333;                           /* seta de tendência */
    --rf-gold:   #fbb900;                           /* estrelas */
    --rf-green:  #7ed561;                           /* ponto do badge */
}

.rf-scope {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    color: var(--rf-ink);
}

/* ------------------------------- página -------------------------------- */
.rf {
    min-height: 100vh; min-height: 100svh;
    display: grid; place-items: center;
    padding: clamp(18px, 3.5vw, 46px);
    background:
        radial-gradient(130% 100% at 50% -8%, #ededed 0%, rgba(237,237,237,0) 46%),
        linear-gradient(180deg, #e3e3e3 0%, #d8d8d8 100%);
}

/* card grande (painel) — margens ~6%, cantos grandes, sombra suave */
.rf-panel {
    width: 100%;
    max-width: 1120px;
    aspect-ratio: 736 / 491;                    /* mesma proporção da referência */
    background: var(--rf-panel);
    border-radius: clamp(22px, 3vw, 36px);
    padding: clamp(24px, 3.6vw, 50px) clamp(26px, 3.8vw, 54px);
    box-shadow:
        0 50px 90px -50px rgba(16, 20, 40, .22),
        0 12px 30px -18px rgba(16, 20, 40, .10);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(30px, 4.4vw, 72px);
    align-items: center;
    overflow: hidden;
}

/* =============================== ESQUERDA =============================== */
.rf-left { min-width: 0; align-self: center; }

/* badge */
.rf-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fbfdfb, #f4f7f3);
    border: 1px solid rgba(10,10,10,.07);
    font-size: clamp(9.5px, .82vw, 11px); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: #8a8d8a;
}
.rf-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rf-green); box-shadow: 0 0 0 3px rgba(126,213,97,.20); }

/* título */
.rf-title {
    margin-top: clamp(16px, 2.2vw, 26px);
    font-size: clamp(1.8rem, 4.5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -0.022em;
    color: var(--rf-ink);
    white-space: nowrap;                 /* mantém cada linha inteira (2 linhas, como a referência) */
}
.rf-title .rf-accent { display: inline-flex; align-items: center; vertical-align: -0.04em; margin: 0 .06em; color: var(--rf-orange); }
.rf-title .rf-accent svg { display: block; width: .96em; height: .74em; }

/* subtítulo */
.rf-sub {
    margin-top: clamp(14px, 1.7vw, 22px);
    max-width: 40ch;
    font-size: clamp(12.5px, 1.05vw, 15px);
    line-height: 1.5;
    color: var(--rf-muted);
}

/* botões */
.rf-actions { display: flex; align-items: center; gap: clamp(10px, 1.1vw, 16px); margin-top: clamp(20px, 2.6vw, 32px); flex-wrap: wrap; }
.rf-btn {
    display: inline-flex; align-items: center; gap: 9px;
    border-radius: 999px; font-size: clamp(13px, 1.05vw, 15px); font-weight: 600; letter-spacing: -0.01em;
    text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.rf-btn--primary {
    padding: clamp(12px,1.3vw,16px) clamp(20px,2vw,28px);
    background: linear-gradient(180deg, #2a2a2a, #0d0d0d);
    color: #fff;
    box-shadow: 0 18px 30px -10px rgba(10,10,10,.5), 0 6px 12px -6px rgba(10,10,10,.4);
}
.rf-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 24px 40px -12px rgba(10,10,10,.55); }
.rf-btn--ghost {
    padding: clamp(11px,1.2vw,15px) clamp(16px,1.6vw,22px);
    background: transparent; color: var(--rf-ink);
    border-color: rgba(10,10,10,.10);
}
.rf-btn--ghost:hover { background: rgba(10,10,10,.04); transform: translateY(-1px); }
.rf-btn--ghost svg { width: 12px; height: 12px; display: block; color: var(--rf-ink); }

/* prova social: estrelas + avatares */
.rf-social { margin-top: clamp(24px, 3.2vw, 42px); }
.rf-stars { display: inline-flex; gap: 4px; color: var(--rf-gold); }
.rf-stars svg { width: clamp(16px,1.5vw,21px); height: clamp(16px,1.5vw,21px); display: block; }
.rf-avatars { display: flex; align-items: center; margin-top: clamp(10px,1.1vw,15px); }
.rf-av {
    border-radius: 50%;
    border: 3px solid var(--rf-panel);
    margin-left: -12px;
    overflow: hidden; flex: 0 0 auto;
    box-shadow: 0 3px 8px -3px rgba(16,20,40,.35);
    background: #cfd3da;
}
.rf-av:first-child { margin-left: 0; }
.rf-av svg { display: block; width: 100%; height: 100%; }
/* tamanhos alternados (pequeno / grande) como na referência */
.rf-av--s { width: clamp(30px,3vw,40px); height: clamp(30px,3vw,40px); }
.rf-av--l { width: clamp(42px,4.3vw,58px); height: clamp(42px,4.3vw,58px); }

/* cores de fundo dos avatares — tons discretos (placeholder de foto) */
.rf-c1 { background: linear-gradient(145deg, #949daa, #626b78); }
.rf-c2 { background: linear-gradient(145deg, #dd8874, #bb5842); }   /* coral suave (avatar grande) */
.rf-c3 { background: linear-gradient(145deg, #3d434b, #23272e); }
.rf-c4 { background: linear-gradient(145deg, #d59a80, #b06848); }   /* terracota (avatar grande) */
.rf-c5 { background: linear-gradient(145deg, #b8a081, #8c6f4e); }
.rf-c6 { background: linear-gradient(145deg, #808a9c, #545d6e); }

/* =============================== DIREITA =============================== */
.rf-right { min-width: 0; align-self: stretch; display: flex; }
.rf-feed {
    position: relative; width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 11%, #000 88%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 11%, #000 88%, transparent 100%);
}
.rf-track { display: flex; flex-direction: column; gap: clamp(7px,.8vw,11px); will-change: transform; }
.rf-feed.rf-loop .rf-track { animation: rf-scroll 40s linear infinite; }
.rf-feed.rf-loop:hover .rf-track { animation-play-state: paused; }
@keyframes rf-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* divisor de dia */
.rf-day { display: flex; align-items: baseline; justify-content: space-between; padding: clamp(9px,1vw,15px) 4px clamp(3px,.5vw,7px); }
.rf-day-d { font-size: clamp(9.5px,.85vw,11px); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7f7f7f; }
.rf-day-m { font-size: clamp(9.5px,.85vw,11px); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--rf-faint); }

/* card do feed */
.rf-card {
    display: flex; align-items: center; gap: clamp(9px,1vw,13px);
    background: var(--rf-card);
    border-radius: clamp(12px,1.4vw,17px);
    padding: clamp(9px,1vw,14px) clamp(11px,1.2vw,16px);
    box-shadow: 0 10px 22px -14px rgba(16,20,40,.18), 0 2px 5px -3px rgba(16,20,40,.10);
    transition: transform .2s ease, box-shadow .2s ease;
}
.rf-card:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(16,20,40,.26); }
.rf-card-av { flex: 0 0 auto; width: clamp(30px,3.1vw,40px); height: clamp(30px,3.1vw,40px); border-radius: 50%; overflow: hidden; }
.rf-card-av svg { display: block; width: 100%; height: 100%; }
.rf-card-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.rf-card-title { font-size: clamp(12px,1.05vw,14.5px); font-weight: 600; letter-spacing: -0.01em; color: #141414; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-card-time { margin-top: 2px; font-size: clamp(10.5px,.95vw,13px); color: var(--rf-faint); }
.rf-dur { flex: 0 0 auto; align-self: flex-start; margin-left: auto; padding-left: 10px; font-size: clamp(9.5px,.85vw,11.5px); font-weight: 500; color: var(--rf-dur); }

/* =============================== ENTRADA =============================== */
.rf-anim { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.rf-panel.rf-in .rf-anim { opacity: 1; transform: none; }
.rf-panel.rf-in .rf-title   { transition-delay: .06s; }
.rf-panel.rf-in .rf-sub     { transition-delay: .12s; }
.rf-panel.rf-in .rf-actions { transition-delay: .18s; }
.rf-panel.rf-in .rf-social  { transition-delay: .24s; }
.rf-panel.rf-in .rf-right   { transition-delay: .12s; }

/* =============================== RESPONSIVO ============================= */
@media (max-width: 860px) {
    .rf-panel { aspect-ratio: auto; grid-template-columns: 1fr; gap: 30px; padding: 30px 26px; }
    .rf-right { align-self: auto; }
    .rf-feed { height: clamp(340px, 74vw, 460px); }
    .rf-title { font-size: clamp(2.2rem, 9vw, 3.2rem); }
    .rf-sub { max-width: 46ch; }
}
@media (max-width: 480px) {
    .rf-panel { padding: 22px 18px; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .rf-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
    .rf-feed.rf-loop .rf-track { animation: none !important; }
}