/* ============================================================ SEÇÃO "DEPOIMENTOS EM VÍDEO" — 3x 16:9 Smartplayer ADAPTADA à identidade da RMA (Revisão de Meio de Ano) Base: pacote portátil do site-principal (@landing-developer, 2026-05-27) Adaptação RMA: 2026-06-13 Self-contained: - Variáveis no escopo `.depo-videos` (NÃO no :root) — não vaza. - Reset de box-sizing só dentro do escopo. - Tipografia = Inter (já carregada no da página RMA). - Tokens RMA: ouro #ffd200, dourado #fac601, laranja #dd7d01, espaço #1a0c04, grafite #241405, linha rgba(255,210,0,.14). - Estilo flat-quente (não glass): cards grafite + borda dourada, título via .eyebrow nativo da RMA (NÃO pill glass do site original). ============================================================ */ /* ----- Escopo + tokens locais (paleta/tipografia da RMA) ----- */ .depo-videos { /* Cores RMA */ --dv-espaco: #1a0c04; /* fundo da seção (casa com PROVA SOCIAL) */ --dv-grafite: #241405; /* fundo dos cards */ --dv-ouro: #ffd200; --dv-dourado: #fac601; --dv-laranja: #dd7d01; --dv-branco: #fff; --dv-texto: #e7d8bc; /* corpo */ --dv-nevoa: #b89a6e; --dv-linha: rgba(255, 210, 0, .14); --dv-linha-hover: rgba(255, 210, 0, .42); /* Espaçamentos (base 8px) */ --dv-sm: 12px; --dv-md: 16px; --dv-lg: 24px; --dv-xl: 32px; --dv-2xl: 48px; /* Container — alinhado ao .wrap da RMA */ --dv-container-max: 1180px; /* Raio — coerente com cards da RMA (16–18px) */ --dv-raio-card: 18px; /* Tipografia (Inter, igual ao corpo da RMA) */ --dv-fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Transições / easing (mesmo ease da RMA) */ --dv-ease: cubic-bezier(.16, 1, .3, 1); --dv-transicao: 250ms; } /* ============================================================ ESTRUTURA — section, inner ============================================================ */ .depo-videos { position: relative; background: var(--dv-espaco); border-top: 1px solid var(--dv-linha); /* mesma divisória das
da RMA */ padding-block: 64px; overflow: hidden; font-family: var(--dv-fonte); box-sizing: border-box; } .depo-videos *, .depo-videos *::before, .depo-videos *::after { box-sizing: border-box; } /* brilho dourado central sutil — coerente com o mood cósmico-dourado da RMA */ .depo-videos::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 720px 320px at 50% 0%, rgba(255, 210, 0, .07), transparent 60%), radial-gradient(ellipse 700px 340px at 50% 100%, rgba(221, 125, 1, .06), transparent 62%); pointer-events: none; } .depo-videos__inner { position: relative; z-index: 1; max-width: var(--dv-container-max); margin-inline: auto; padding-inline: 20px; text-align: center; } /* ============================================================ EYEBROW + H2 + SUB (estilo nativo da RMA) eyebrow = linha + texto dourado caixa-alta, centralizado aqui ============================================================ */ .depo-videos__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 auto var(--dv-lg); font-family: var(--dv-fonte); font-size: 11px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: var(--dv-ouro); } .depo-videos__eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--dv-laranja); } .depo-videos__h2 { margin: 0 auto; padding: 0; font-family: var(--dv-fonte); font-weight: 800; /* .h2-text da RMA = Inter 800 */ font-size: clamp(24px, 5vw, 40px); line-height: 1.08; letter-spacing: -.02em; text-transform: none; color: var(--dv-branco); max-width: 22ch; } .depo-videos__h2 .ouro { color: var(--dv-ouro); } .depo-videos__sub { margin: 18px auto 0; padding: 0; font-family: var(--dv-fonte); font-size: clamp(15.5px, 2.2vw, 17px); line-height: 1.62; font-weight: 300; color: var(--dv-texto); max-width: 58ch; } /* ============================================================ GRID + CARDS (9:16 VERTICAL responsivo) — flat-quente RMA Vídeos formato Reels/Stories: card vertical, vídeo inteiro. ============================================================ */ .depo-videos__grid { margin: var(--dv-2xl) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--dv-lg); justify-items: center; } .depo-videos__card { position: relative; width: 100%; /* mobile: vídeo vertical limitado pela altura da viewport pra caber na tela */ max-width: min(320px, 78vw); aspect-ratio: 9 / 16; max-height: 70vh; border-radius: var(--dv-raio-card); overflow: hidden; background: var(--dv-grafite); border: 1px solid var(--dv-linha); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); list-style: none; transition: transform var(--dv-transicao) var(--dv-ease), border-color var(--dv-transicao) var(--dv-ease), box-shadow var(--dv-transicao) var(--dv-ease); } .depo-videos__card:hover { transform: translateY(-4px); border-color: var(--dv-linha-hover); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 210, 0, .12); } .depo-videos__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* ============================================================ BREAKPOINTS — ≥640px tablet | ≥1024px desktop ============================================================ */ @media (min-width: 640px) { .depo-videos { padding-block: 96px; } /* Tablet: 3 colunas estreitas, vídeos verticais lado a lado */ .depo-videos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dv-lg); align-items: start; } .depo-videos__card { max-width: 240px; max-height: none; } } @media (min-width: 1024px) { .depo-videos__inner { padding-inline: 28px; } /* Desktop: 3 vídeos verticais lado a lado, largura controlada */ .depo-videos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dv-xl); } .depo-videos__card { max-width: 300px; } } /* ============================================================ ACESSIBILIDADE — prefers-reduced-motion ============================================================ */ @media (prefers-reduced-motion: reduce) { .depo-videos__card { transition: none; } .depo-videos__card:hover { transform: none; } }