/* Página "Quem somos" — tema Robooster. Reprodução em código do layout Elementor original. Escopo em .rb-quem-somos. */ .rb-quem-somos { --rb-max: 1140px; --rb-dark: #000000; --rb-light: #f7f9fb; --rb-accent: #c85f10; /* vermelho Robooster (ajustável) */ color: #1a1a1a; font-size: 16px; line-height: 1.6; } .rb-quem-somos .rb-container { max-width: var(--rb-max); margin: 0 auto; padding-left: 20px; padding-right: 20px; } /* ---------- 1) Intro ---------- */ .rb-intro { padding: 64px 0; } .rb-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .rb-intro__text p { font-size: 1.5rem; line-height: 1.5; margin: 0; } /* Carrossel */ .rb-carousel { position: relative; width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); background: #fff; } .rb-carousel__track { position: relative; width: 100%; aspect-ratio: 4 / 3; } .rb-carousel__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.6s ease; } .rb-carousel__slide.is-active { opacity: 1; } .rb-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .rb-carousel__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; } .rb-carousel__dot { width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.55); cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; } .rb-carousel__dot.is-active { background: #fff; transform: scale(1.25); } /* ---------- 2) Missão / Visão / Valores ---------- */ .rb-mvv { background: var(--rb-dark); color: #fff; padding: 72px 0; } .rb-mvv__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; } /* Escopo .rb-quem-somos (0,2,0) para vencer o Theme Style global do Elementor, que aplica `.elementor-kit-XXX h1..h6 { color: var(--e-global-color-*) }` (0,1,1) no e deixava estes títulos escuros sobre o fundo preto. */ .rb-quem-somos .rb-mvv__title { font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 12px; color: #ffffff; } .rb-mvv__desc { margin: 0; font-size: 1.05rem; color: rgba(255, 255, 255, 0.85); max-width: 34ch; margin-inline: auto; } /* ---------- 3/4) Equipe ---------- */ .rb-team { background: var(--rb-light); padding: 72px 0 88px; } .rb-quem-somos .rb-team__heading { text-align: center; text-transform: uppercase; letter-spacing: 0.04em; font-size: 2rem; margin: 0 0 48px; color: #1a1a1a; } .rb-team__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; } .rb-team__member { text-align: center; } .rb-team__photo { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #e9edf1; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); } .rb-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .rb-quem-somos .rb-team__name { margin: 16px 0 2px; font-size: 1.05rem; font-weight: 700; color: #1a1a1a; } .rb-team__role { margin: 0; font-size: 0.9rem; color: #5b6672; } /* ---------- Responsivo ---------- */ @media (max-width: 900px) { .rb-intro__grid { grid-template-columns: 1fr; gap: 32px; } .rb-intro__text p { font-size: 1.25rem; } .rb-mvv__grid { grid-template-columns: 1fr; gap: 32px; } .rb-team__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (max-width: 480px) { .rb-team__grid { grid-template-columns: 1fr; } }