/* ============================================================
PDCA Cursos · app.css — bundle consolidado
Gerado em 2026-05-11 · Fase 38.
Origem: 8 stylesheets antes carregados em sequência pelo head.php.
Ordem preservada IDENTICA à cascata original.
Histórico em _archive/css-pre-consolidacao/.
NÃO refatorar / NÃO deduplicar regras nesta versão — migração estrutural pura.
============================================================ */
/* ============================================================
SEÇÃO 1 — TOKENS
Origem: css/tokens.css
============================================================ */
:root {
/* === Paleta institucional consolidada (peças PDCA Canva) === */
--c-royal: #2957a4;
--c-navy: #020678;
--c-grafite: #373536;
--c-lilas: #8e99cc;
--c-off-white: #fefefe;
--c-off-navy: #1a2050;
/* família Liderança */
--c-dourado: #a47629;
--c-bronze: #5a3f1a;
/* escala rosa derivada de #cf0298 (magenta brand) */
--c-pink-50: #fcebf6;
--c-pink-100: #f7d6ed;
--c-pink-200: #efb1de;
--c-pink-400: #dd5cb5;
--c-pink-600: #cf0298;
--c-pink-800: #900169;
/* escala monocromática navy oficial — 9 steps de luminosidade (hue 239°, sat ~96% fixos) */
--c-navy-50: #01022d;
--c-navy-100: #010346;
--c-navy-200: #02055f;
--c-navy-300: #020678; /* = --c-navy base do brand */
--c-navy-400: #020791;
--c-navy-500: #0309aa;
--c-navy-600: #030ac3;
--c-navy-700: #040bdc;
--c-navy-800: #1a23ff; /* DP vivid (Rescisões) — topo da escala, lum ~55% */
/* tetrádica oficial — harmonia de 4 cores do brand (#027874 + #020678 + #780206 + #a47629) */
--c-teal: #027874; /* cor nova: sucesso institucional, peças de bem-estar */
--c-red-deep: #780206; /* cor nova: vermelho institucional refinado (Gestão) */
/* === Aliases de compatibilidade — HTMLs do clone 9 === */
--c-primary: var(--c-royal);
--c-primary-700: #1e478a;
--c-primary-300: #5a85cf;
--c-header: var(--c-navy);
--c-header-dark: #01034a;
--c-cta: var(--c-pink-600); /* magenta brand vira CTA institucional */
--c-cta-hover: var(--c-pink-800);
--c-text: var(--c-grafite);
--c-text-dark: var(--c-off-navy);
--c-yellow: #fac402; /* HERDADO clone 9 — acento geral */
--c-muted: #6a7280;
--c-white: #ffffff;
--c-border: #e7ecf5;
--c-bg: #f5f8fd;
--c-bg-alt: #eef3fb;
--c-footer: #0f1124;
--c-success: #0d6b2a;
--c-whatsapp: #15843a;
--c-whatsapp-hover: #0f5d28;
/* === Tipografia — sistema Apple-like ===
macOS / iOS → SF Pro Display / SF Pro Text (nativa)
Windows → Segoe UI ou Inter (se carregada via Google Fonts)
Android → Roboto ou Inter
Carregamento web do Inter: dos HTMLs via Google Fonts. */
--ff-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
--ff-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
--ff-base: var(--ff-text);
--fs-base: 17px;
--lh-base: 1.55;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 22px;
--container: 1240px;
--header-h: 72px;
--shadow-sm: 0 2px 8px rgba(2, 6, 120, 0.06);
--shadow-md: 0 12px 28px rgba(2, 6, 120, 0.10);
--shadow-lg: 0 24px 48px rgba(2, 6, 120, 0.14);
}
/* renderização tipográfica Apple-like — antialiasing + legibilidade */
html, body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ============================================================
SEÇÃO 2 — BASE
Origem: css/base.css
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--ff-base);
font-size: var(--fs-base);
line-height: var(--lh-base);
color: var(--c-text);
background-color: var(--c-white);
background-image: url('/assets/img/roda-watermark.svg');
background-size: 120vw 120vw;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
h1, h2, h3, h4 {
margin: 0 0 .5em;
color: var(--c-text-dark);
line-height: 1.15;
font-weight: 700;
letter-spacing: -.01em;
}
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
p { margin: 0 0 1em; }
a { color: var(--c-primary); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--c-primary-300); }
img { max-width: 100%; height: auto; display: block; }
ul { padding-left: 1.2em; margin: 0 0 1em; }
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-alt { background: var(--c-bg); }
.section-dark { background: var(--c-header); color: var(--c-white); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--c-white); }
.text-center { text-align: center; }
.eyebrow {
display: inline-block;
font-size: 13px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--c-primary);
margin-bottom: 12px;
}
.section-dark .eyebrow { color: var(--c-yellow); }
.lead {
font-size: 1.1rem;
color: var(--c-muted);
max-width: 680px;
}
.text-center .lead { margin-left: auto; margin-right: auto; }
@media (max-width: 768px) {
.section { padding: 64px 0; }
.section-sm { padding: 48px 0; }
}
/* Marca d'água nas seções de fundo escuro (home + curso) */
.agenda,
.historias,
.diferenciais,
.cat-anchors,
.incompany-b2b,
.contato-sec,
.produto-hero {
background-image: url('/assets/img/roda-watermark.svg');
background-size: 120vw 120vw;
background-repeat: repeat;
background-position: 0% 0%;
}
/* Avatares do bloco de avaliações — foto Google preenche o círculo,
fallback automático para o background-color (data-pair) se a img falhar */
.hist-card .photo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
/* ══════════════════════════════════════════════════════════
FORMULÁRIO DE INSCRIÇÃO — /inscricao
Mobile-first. Desktop ajustado em media query >= 640px
══════════════════════════════════════════════════════════ */
.insc-page {
background-color: var(--c-navy);
min-height: 100vh;
padding: 40px 0 80px;
}
.insc-container {
max-width: 680px;
margin: 0 auto;
padding: 0 20px;
}
.insc-head { margin-bottom: 36px; text-align: center; }
.insc-title {
font-size: clamp(26px, 6vw, 36px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.020em;
color: #fff;
margin: 8px 0 14px;
}
.insc-lead {
color: rgba(255,255,255,0.80);
font-size: 16px;
line-height: 1.6;
letter-spacing: -0.010em;
max-width: 520px;
margin: 0 auto;
}
.insc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 479px) { .insc-grid-2 { grid-template-columns: 1fr; } }
#parcelas-row { max-width: 160px; }
.insc-alert {
background: #fff0f0; border: 1.5px solid #e55; border-radius: 10px;
padding: 16px 20px; margin-bottom: 24px; color: #c00; font-size: 14px;
}
.insc-alert ul { margin: 8px 0 0 16px; padding: 0; }
.insc-alert li { margin-bottom: 4px; }
.insc-form { display: flex; flex-direction: column; gap: 28px; }
.insc-fieldset {
background: #fff;
border: 1.5px solid var(--c-border);
border-radius: 14px;
box-shadow: 0 4px 28px rgba(0,0,0,0.20);
padding: 24px 20px 20px;
margin: 0;
}
@media (min-width: 640px) {
.insc-fieldset { padding: 28px 28px 24px; }
}
.insc-fieldset legend {
font-weight: 700;
font-size: 11px;
letter-spacing: 0.080em;
text-transform: uppercase;
color: var(--c-navy);
background: var(--c-yellow);
padding: 2px 10px;
border-radius: 4px;
}
.insc-fieldset-hint { font-size: 13px; color: var(--c-muted); margin: 4px 0 18px; }
.insc-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.insc-row:last-child { margin-bottom: 0; }
.insc-row label { font-size: 14px; font-weight: 600; letter-spacing: 0.005em; color: var(--c-grafite); }
.insc-row .req { color: #e55; }
.insc-optional { font-weight: 400; color: var(--c-muted); font-size: 12px; }
.insc-row input[type="text"],
.insc-row input[type="email"],
.insc-row input[type="tel"],
.insc-row select,
.insc-row textarea {
width: 100%; padding: 13px 14px; border: 1.5px solid var(--c-border);
border-radius: 8px; font-size: 14px; color: var(--c-grafite); background: #fafbff;
transition: border-color .15s; font-family: inherit;
}
.insc-row input:focus, .insc-row select:focus, .insc-row textarea:focus {
outline: none; border-color: var(--c-navy); background: #fff;
}
.insc-row textarea { resize: vertical; min-height: 80px; }
.insc-field-hint { font-size: 12px; color: var(--c-muted); min-height: 16px; }
.hint-ok { color: #1a8f3f; font-weight: 600; }
.hint-err { color: #e55; font-weight: 600; }
.insc-check-label {
display: flex; align-items: flex-start; gap: 9px;
font-size: 14px; color: var(--c-grafite); cursor: pointer;
}
.insc-check-label input[type="checkbox"] {
width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
accent-color: var(--c-navy); cursor: pointer;
}
.insc-termos {
background: rgba(255,255,255,0.06);
border: 1.5px solid rgba(255,255,255,0.18);
border-radius: 10px;
padding: 18px 20px;
}
.insc-termos-label {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
}
.insc-termos-label input[type="checkbox"] {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--c-yellow);
cursor: pointer;
}
.insc-termos-aviso {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.040em;
text-transform: uppercase;
color: var(--c-yellow);
margin: 0 0 12px;
}
.insc-termos-aviso .req { color: var(--c-yellow); }
.insc-termos-label span {
font-size: 13px;
line-height: 1.6;
color: rgba(255,255,255,0.80);
}
.insc-submit { text-align: center; }
.btn-insc { width: 100%; max-width: 340px; padding: 15px 32px; font-size: 16px; font-weight: 700; border: none; cursor: pointer; }
.insc-privacy { font-size: 12px; color: var(--c-muted); margin-top: 12px; }
.insc-success {
background: #fff; border-radius: 16px; padding: 48px 32px;
text-align: center; box-shadow: 0 4px 28px rgba(0,0,0,0.20);
}
.insc-success-icon {
width: 64px; height: 64px; background: var(--c-yellow); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 32px; font-weight: 900; margin: 0 auto 24px; color: var(--c-navy);
}
.insc-success h1 { font-size: 28px; letter-spacing: -0.018em; color: var(--c-navy); margin-bottom: 12px; }
.insc-success p { color: var(--c-muted); line-height: 1.7; margin-bottom: 28px; }
/* ===== Páginas legais (LGPD) — politica-privacidade · termos · cookies =====
Fontes 60% do baseline · line-height 1.3 · espaçamento entre parágrafos
reduzido (instrução do usuário 2026-05-10 · iter 2). */
.legal-page {
max-width: 760px;
margin: 0 auto;
padding: 48px 24px 72px;
color: var(--c-navy);
font-size: 9.6px;
line-height: 1.3;
}
.legal-page .legal-header { margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid #e1e4eb; }
.legal-page h1 {
font-size: clamp(16.8px, 3vw, 24px);
font-weight: 800;
letter-spacing: -0.02em;
margin: 0 0 4px;
color: var(--c-navy);
}
.legal-page .legal-meta { color: #777; font-size: 8.4px; margin: 0; }
.legal-page h2 {
font-size: clamp(12px, 1.8vw, 14.4px);
font-weight: 700;
margin: 24px 0 8px;
color: var(--c-navy);
}
.legal-page h3 { font-size: 10.8px; font-weight: 700; margin: 16px 0 6px; color: var(--c-navy); }
.legal-page h4 { font-size: 9.6px; font-weight: 700; margin: 12px 0 5px; color: var(--c-navy); }
.legal-page p, .legal-page ul, .legal-page ol { margin: 0 0 8px; }
.legal-page ul, .legal-page ol { padding-left: 22px; }
.legal-page li { margin-bottom: 4px; }
.legal-page a {
color: var(--c-royal, #2d4eff);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
word-break: break-word;
}
.legal-page a:hover { text-decoration-thickness: 2px; }
.legal-page strong { font-weight: 700; }
.legal-page em { font-style: italic; }
.legal-page code {
background: #f6f8fc;
padding: 1px 4px;
border-radius: 3px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 8.4px;
}
.legal-page table {
width: 100%;
border-collapse: collapse;
margin: 8px 0 12px;
font-size: 8.4px;
background: #fff;
}
.legal-page th, .legal-page td {
padding: 6px 8px;
border: 1px solid #e1e4eb;
text-align: left;
vertical-align: top;
}
.legal-page th { background: #f6f8fc; font-weight: 700; color: var(--c-navy); }
@media (min-width: 768px) {
.legal-page { padding: 72px 32px 96px; font-size: 10.2px; }
.legal-page table { font-size: 9px; }
}
/* ============================================================
SEÇÃO 3 — COMPONENTS
Origem: css/components.css
============================================================ */
/* ============ BUTTONS ============ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 26px;
font: inherit; font-weight: 700; font-size: 16px; line-height: 1;
border-radius: 999px;
border: 2px solid transparent;
cursor: pointer;
transition: all .2s ease;
text-decoration: none;
white-space: nowrap;
}
.btn-primary { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }
.btn-primary:hover { background: var(--c-primary-700); border-color: var(--c-primary-700); color: var(--c-white); }
.btn-cta { background: var(--c-cta); color: var(--c-white); border-color: var(--c-cta); }
.btn-cta:hover { background: var(--c-cta-hover); border-color: var(--c-cta-hover); color: var(--c-white); }
.btn-outline { background: transparent; color: var(--c-white); border-color: var(--c-white); }
.btn-outline:hover { background: var(--c-white); color: var(--c-primary); }
.btn-ghost { background: transparent; color: var(--c-primary); border-color: var(--c-primary); }
.btn-ghost:hover { background: var(--c-primary); color: var(--c-white); }
.btn-lg { padding: 18px 36px; font-size: 17px; }
/* ============ HEADER ============ */
.site-header {
position: sticky; top: 0; z-index: 100;
background: var(--c-header);
color: var(--c-white);
box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.site-header .container {
display: flex; align-items: center; justify-content: space-between;
min-height: var(--header-h);
gap: 24px;
}
.site-logo img { max-width: 140px; height: auto; }
.main-nav ul {
list-style: none; margin: 0; padding: 0;
display: flex; align-items: center; gap: 28px;
}
.main-nav a {
color: var(--c-white); font-size: 16px; font-weight: 600;
padding: 8px 0; position: relative;
}
.main-nav a:hover { color: var(--c-yellow); }
.main-nav a.active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
height: 3px; background: var(--c-yellow); border-radius: 2px;
}
.menu-toggle {
display: none; background: none; border: 0;
color: var(--c-white); font-size: 28px; cursor: pointer; padding: 4px 8px;
}
@media (max-width: 960px) {
.menu-toggle { display: block; }
.main-nav {
position: absolute; top: var(--header-h); left: 0; right: 0;
background: var(--c-header); padding: 16px 24px;
display: none; box-shadow: var(--shadow-md);
}
.main-nav.open { display: block; }
.main-nav ul { flex-direction: column; gap: 14px; align-items: flex-start; }
}
/* ============ HERO — PRIMEIRA DOBRA ============ */
.hero {
position: relative;
background:
linear-gradient(115deg, rgba(30,0,105,.92) 0%, rgba(44,1,150,.78) 45%, rgba(33,107,219,.55) 100%),
url("../assets/img/hero-banner.jpg") center/cover no-repeat;
color: var(--c-white);
min-height: 640px;
display: flex; align-items: center;
overflow: hidden;
padding: 64px 0 80px;
}
.hero .container {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 48px; align-items: center;
}
.hero-title {
color: var(--c-white);
font-size: clamp(2.2rem, 4.8vw, 3.6rem);
max-width: 600px;
margin-bottom: 20px;
}
.hero-title em {
font-style: normal;
background: linear-gradient(90deg, var(--c-yellow), #ffe97a);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-sub {
font-size: 1.15rem; opacity: .95; max-width: 520px; margin-bottom: 32px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-card {
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(10px);
border-radius: var(--radius-lg);
padding: 32px;
box-shadow: var(--shadow-lg);
}
.hero-card h3 { color: var(--c-white); font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 18px; opacity: .9; }
.categoria-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.categoria {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: var(--radius-sm);
padding: 12px 14px;
font-size: 14px; font-weight: 600;
color: var(--c-white);
transition: all .2s;
}
.categoria:hover { background: var(--c-yellow); color: #1a1a1a; border-color: var(--c-yellow); transform: translateY(-2px); }
.hero-trust {
display: flex; gap: 32px; margin-top: 40px; flex-wrap: wrap;
font-size: 14px; opacity: .85;
}
.hero-trust span::before { content: "✓ "; color: var(--c-yellow); font-weight: 700; }
@media (max-width: 900px) {
.hero .container { grid-template-columns: 1fr; }
.hero { min-height: auto; padding: 48px 0 64px; }
}
/* ============ CONTADORES ============ */
.counters {
background: var(--c-white);
padding: 72px 0;
border-bottom: 1px solid var(--c-border);
}
.counters-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
text-align: center;
}
.counter-item {
padding: 20px;
border-right: 1px solid var(--c-border);
}
.counter-item:last-child { border-right: 0; }
.counter-num {
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 800;
color: var(--c-primary);
line-height: 1;
display: block;
margin-bottom: 8px;
}
.counter-label {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--c-muted);
}
.counter-plus {
font-size: .5em;
vertical-align: top;
color: var(--c-cta);
}
@media (max-width: 768px) {
.counters-grid { grid-template-columns: repeat(2, 1fr); }
.counter-item { border-right: 0; border-bottom: 1px solid var(--c-border); padding-bottom: 28px; }
.counter-item:nth-last-child(-n+2) { border-bottom: 0; }
}
/* ============ ACREDITAMOS NO PRESENCIAL ============ */
.believe {
background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-white) 100%);
}
.believe .container {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 56px; align-items: center;
}
.believe-img {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.believe-img img { aspect-ratio: 4/3; object-fit: cover; }
.believe-img::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 70%, rgba(15,17,36,.35));
}
.believe-img .badge-img {
position: absolute;
bottom: 20px; left: 20px;
background: var(--c-white);
color: var(--c-primary);
font-size: 13px; font-weight: 700;
padding: 8px 16px;
border-radius: 20px;
box-shadow: var(--shadow-md);
z-index: 2;
}
.believe-content h2 span { color: var(--c-primary); }
@media (max-width: 900px) {
.believe .container { grid-template-columns: 1fr; gap: 40px; }
}
/* ============ VALORES ============ */
.values {
background: linear-gradient(135deg, var(--c-header-dark) 0%, var(--c-header) 50%, var(--c-primary-700) 100%);
color: var(--c-white);
}
.values h2, .values h3, .values p { color: var(--c-white); }
.values .lead { color: rgba(255,255,255,.88); }
.values-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 48px;
}
.value-card {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: var(--radius-md);
padding: 28px;
transition: all .3s;
}
.value-card:hover { background: rgba(255,255,255,.1); transform: translateY(-4px); }
.value-icon {
width: 56px; height: 56px;
background: linear-gradient(135deg, var(--c-yellow), #ffb300);
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 28px;
margin-bottom: 18px;
color: #1a1a1a;
}
.value-card h3 { color: var(--c-white); font-size: 1.15rem; margin-bottom: 8px; }
.value-card p { font-size: 14px; opacity: .85; margin: 0; }
@media (max-width: 900px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .values-grid { grid-template-columns: 1fr; } }
/* ============ COMPROMETIDOS ============ */
.commit {
background: var(--c-white);
padding: 96px 0;
}
.commit .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px; align-items: center;
}
.commit-list { list-style: none; padding: 0; }
.commit-list li {
padding: 16px 0 16px 44px;
position: relative;
border-bottom: 1px dashed var(--c-border);
font-size: 1.05rem;
}
.commit-list li::before {
content: "✓";
position: absolute; left: 0; top: 14px;
width: 28px; height: 28px;
background: var(--c-primary);
color: var(--c-white);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700;
}
.commit-img {
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
@media (max-width: 900px) {
.commit .container { grid-template-columns: 1fr; }
}
/* ============ NOSSOS CURSOS ============ */
.cursos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 48px;
}
.curso-card {
background: var(--c-white);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all .3s;
display: flex; flex-direction: column;
border: 1px solid var(--c-border);
}
.curso-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); border-color: var(--c-primary-300); }
.curso-thumb {
aspect-ratio: 16/10;
position: relative;
display: flex; align-items: center; justify-content: center;
color: var(--c-white);
font-weight: 800;
font-size: 2.6rem;
letter-spacing: .02em;
overflow: hidden;
background: linear-gradient(135deg, var(--c-header) 0%, var(--c-primary) 100%);
}
.curso-thumb.with-photo { background: #111; }
.curso-thumb.with-photo::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(30,0,105,.15) 0%, rgba(30,0,105,.55) 100%);
}
.curso-thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.curso-thumb .thumb-label {
position: relative;
z-index: 2;
font-size: 2.2rem;
letter-spacing: .04em;
text-shadow: 0 2px 10px rgba(0,0,0,.35);
font-weight: 800;
}
.curso-thumb .thumb-ico {
position: relative;
z-index: 2;
width: 80px; height: 80px;
border-radius: 20px;
background: rgba(255,255,255,.18);
border: 2px solid rgba(255,255,255,.35);
display: flex; align-items: center; justify-content: center;
font-size: 2.4rem;
}
.curso-thumb .tag {
position: absolute; top: 14px; left: 14px;
background: var(--c-cta);
color: var(--c-white);
font-size: 11px; font-weight: 700;
padding: 5px 12px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: .08em;
}
.curso-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.curso-meta { font-size: 13px; color: var(--c-muted); margin-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.curso-body h3 { font-size: 1.2rem; margin-bottom: 10px; }
.curso-body p { font-size: 14px; color: var(--c-muted); margin-bottom: 16px; }
.curso-foot {
margin-top: auto;
display: flex; justify-content: space-between; align-items: center;
padding-top: 16px;
border-top: 1px solid var(--c-border);
font-size: 14px;
}
.curso-hours { color: var(--c-primary); font-weight: 700; }
@media (max-width: 900px) { .cursos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cursos-grid { grid-template-columns: 1fr; } }
/* ============ POR QUE A PDCA ============ */
.why { background: var(--c-bg); }
.why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px; margin-top: 48px;
}
.why-card {
background: var(--c-white);
padding: 32px;
border-radius: var(--radius-md);
border: 1px solid var(--c-border);
transition: all .3s;
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--c-primary-300); }
.why-icon {
width: 60px; height: 60px;
background: linear-gradient(135deg, var(--c-primary), var(--c-primary-300));
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
color: var(--c-white);
font-size: 28px;
margin-bottom: 18px;
}
.why-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.why-card p { font-size: 14px; color: var(--c-muted); margin: 0; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .why-grid { grid-template-columns: 1fr; } }
/* ============ RESTAURANTES PARCEIROS ============ */
.restaurants {
background: var(--c-white);
border-top: 1px solid var(--c-border);
border-bottom: 1px solid var(--c-border);
}
.restaurants-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 40px;
}
.restaurant {
background: var(--c-bg);
border-radius: var(--radius-md);
padding: 20px;
display: flex; align-items: center; gap: 14px;
border: 1px solid var(--c-border);
transition: all .3s;
}
.restaurant:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); background: var(--c-white); }
.restaurant-icon {
width: 44px; height: 44px; min-width: 44px;
background: var(--c-yellow);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
}
.restaurant strong { display: block; font-size: 14px; color: var(--c-text-dark); }
.restaurant span { font-size: 12px; color: var(--c-muted); }
@media (max-width: 900px) { .restaurants-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .restaurants-list { grid-template-columns: 1fr; } }
/* ============ CLIENTES AMAM (DEPOIMENTOS) ============ */
.testimonials { background: var(--c-bg); }
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 48px;
}
.testimonial {
background: var(--c-white);
border-radius: var(--radius-md);
padding: 32px 28px 28px;
box-shadow: var(--shadow-sm);
position: relative;
border: 1px solid var(--c-border);
}
.testimonial::before {
content: "\201C";
position: absolute;
top: -16px; left: 24px;
width: 44px; height: 44px;
background: var(--c-primary);
color: var(--c-white);
border-radius: 50%;
font-size: 38px; font-family: Georgia, serif;
display: flex; align-items: center; justify-content: center;
padding-bottom: 8px;
box-shadow: var(--shadow-sm);
}
.testimonial .stars { color: var(--c-yellow); margin-bottom: 10px; font-size: 16px; letter-spacing: 2px; }
.testimonial p { font-size: 15px; color: var(--c-text); margin-bottom: 20px; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--c-border); padding-top: 16px; }
.testimonial-avatar {
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, var(--c-primary), var(--c-primary-300));
color: var(--c-white);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 16px;
}
.testimonial-author strong { display: block; font-size: 14px; color: var(--c-text-dark); }
.testimonial-author span { font-size: 12px; color: var(--c-muted); }
@media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr; } }
/* ============ ALGUNS CLIENTES (LOGO GRID) ============ */
.clients-logos {
padding: 56px 0;
background: var(--c-white);
border-bottom: 1px solid var(--c-border);
}
.clients-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 32px;
align-items: center;
margin-top: 32px;
}
.clients-grid img {
max-height: 64px; width: auto;
margin: 0 auto;
filter: grayscale(100%);
opacity: .65;
transition: all .3s;
}
.clients-grid img:hover { filter: grayscale(0); opacity: 1; }
@media (max-width: 900px) { .clients-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .clients-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
/* ============ ONDE ESTAMOS ============ */
.location-section .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px; align-items: center;
}
.location-map {
background:
radial-gradient(circle at 40% 60%, rgba(33,107,219,.18) 0%, transparent 55%),
linear-gradient(135deg, #dce7f7 0%, #eef3fb 100%);
border-radius: var(--radius-md);
overflow: hidden;
aspect-ratio: 4/3;
position: relative;
box-shadow: var(--shadow-md);
display: flex; align-items: center; justify-content: center;
}
.location-map::before {
content: "";
position: absolute;
background:
linear-gradient(90deg, transparent 48%, rgba(33,107,219,.15) 48%, rgba(33,107,219,.15) 52%, transparent 52%),
linear-gradient(180deg, transparent 48%, rgba(33,107,219,.15) 48%, rgba(33,107,219,.15) 52%, transparent 52%);
background-size: 60px 60px;
inset: 0;
opacity: .5;
}
.location-pin {
position: relative;
z-index: 2;
width: 56px; height: 56px;
background: var(--c-cta);
color: var(--c-white);
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(255,36,240,.35), 0 2px 8px rgba(0,0,0,.18);
animation: pinPulse 2.2s ease-in-out infinite;
}
.location-pin::after {
content: "";
width: 18px; height: 18px;
background: var(--c-white);
border-radius: 50%;
transform: rotate(45deg);
}
@keyframes pinPulse {
0%, 100% { transform: rotate(-45deg) translateY(0); }
50% { transform: rotate(-45deg) translateY(-6px); }
}
.location-map-label {
position: absolute;
bottom: 24px; left: 50%;
transform: translateX(-50%);
background: var(--c-white);
padding: 10px 18px;
border-radius: 999px;
box-shadow: var(--shadow-md);
font-weight: 700;
font-size: 14px;
color: var(--c-primary);
white-space: nowrap;
z-index: 2;
}
.location-info h2 { color: var(--c-primary); }
.location-address {
background: var(--c-bg);
border-left: 4px solid var(--c-primary);
padding: 18px 22px;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
margin: 24px 0;
}
.location-address strong { display: block; font-size: 1.1rem; color: var(--c-text-dark); margin-bottom: 4px; }
@media (max-width: 900px) { .location-section .container { grid-template-columns: 1fr; } }
/* ============ FORMULÁRIO VAMOS CONVERSAR ============ */
.contact-section {
background: linear-gradient(135deg, var(--c-header) 0%, var(--c-primary) 100%);
color: var(--c-white);
}
.contact-section h2 { color: var(--c-white); }
.contact-section .eyebrow { color: var(--c-yellow); }
.contact-wrap {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 56px; align-items: center;
margin-top: 32px;
}
.contact-info p { opacity: .9; }
.contact-info ul { list-style: none; padding: 0; margin-top: 24px; }
.contact-info li {
display: flex; gap: 14px; align-items: center;
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,.12);
font-size: 15px;
}
.contact-info li .ico {
width: 40px; height: 40px; min-width: 40px;
background: rgba(255,255,255,.12);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
}
.contact-form {
background: var(--c-white);
color: var(--c-text);
padding: 36px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
}
.contact-form h3 { color: var(--c-text-dark); margin-bottom: 6px; }
.contact-form .mini { color: var(--c-muted); font-size: 14px; margin-bottom: 24px; }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-size: 13px; font-weight: 600; color: var(--c-text-dark); margin-bottom: 6px; }
.form-field label .req { color: var(--c-cta-hover); }
.form-field input, .form-field select, .form-field textarea {
width: 100%; padding: 12px 14px;
font: inherit; font-size: 15px;
border: 1px solid var(--c-border);
border-radius: var(--radius-sm);
background: var(--c-bg);
transition: border-color .2s, background .2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
outline: none; border-color: var(--c-primary); background: var(--c-white);
box-shadow: 0 0 0 3px rgba(33,107,219,.12);
}
.form-field textarea { min-height: 90px; resize: vertical; }
.form-field.error input, .form-field.error select, .form-field.error textarea {
border-color: var(--c-cta-hover); background: #fff5f5;
}
.form-field .err-msg { display: none; color: var(--c-cta-hover); font-size: 12px; margin-top: 4px; }
.form-field.error .err-msg { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-success {
display: none;
background: #e8f7ee; color: var(--c-success);
border: 1px solid #a7d9ba;
padding: 18px; border-radius: var(--radius-sm);
text-align: center; font-weight: 600;
}
.form-success.show { display: block; }
@media (max-width: 900px) {
.contact-wrap { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.contact-form { padding: 24px; }
}
/* ============ FOOTER ============ */
.site-footer {
background: var(--c-footer);
color: rgba(255,255,255,.8);
padding: 64px 0 24px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
.footer-grid h4 {
color: var(--c-white);
margin-bottom: 16px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .08em;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { color: rgba(255,255,255,.72); font-size: 14px; }
.footer-grid a:hover { color: var(--c-white); }
.footer-logo { max-width: 150px; margin-bottom: 16px; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.1);
padding-top: 20px;
text-align: center;
font-size: 13px;
color: rgba(255,255,255,.55);
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
/* ============================================================
SEÇÃO 4 — OVERRIDES-MOBILE
Origem: css/overrides-mobile.css
============================================================ */
/* === Override mobile (<=767px) ===
Gerado de mobile-2.html (intocavel).
Regras de mock-frame (.device, body bg #0a0726) removidas.
Embrulhado em media query para isolamento de cascade.
*/
@media (max-width: 767px) {
/* ======= FOOTER mobile (branco com marca PDCA) ======= */
.m-footer {
background: var(--c-white);
color: var(--c-text-dark);
padding: 28px 18px 24px;
}
.m-footer-brand {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 22px;
padding-bottom: 20px;
border-bottom: 1px solid var(--c-border);
}
.m-footer-brand img { max-width: 180px; height: auto; display: block; }
.m-footer-brand .slogan {
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 700;
margin-top: 2px;
}
.m-footer-contact {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 22px;
}
.m-footer-contact a {
color: var(--c-text-dark);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 600;
}
.m-footer-contact a:hover { color: var(--c-primary); }
.m-footer-contact svg {
width: 18px; height: 18px;
flex-shrink: 0;
fill: var(--c-primary);
}
.m-footer-social {
display: flex;
gap: 10px;
padding-top: 18px;
border-top: 1px solid var(--c-border);
}
.m-footer-social a {
color: var(--c-primary);
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--c-bg);
border: 1px solid var(--c-border);
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.m-footer-social a:hover {
background: var(--c-primary);
color: var(--c-white);
border-color: var(--c-primary);
}
.m-footer-social svg { width: 16px; height: 16px; fill: currentColor; }
/* ======= DRAWER (triggered via :target) ======= */
.m-drawer {
position: fixed;
top: 0; right: -100%;
width: min(85%, 320px);
height: 100vh;
background: var(--c-header);
z-index: 200;
padding: 24px 22px;
transition: right 0.3s ease;
box-shadow: -10px 0 30px rgba(0,0,0,0.4);
}
.m-drawer:target { right: 0; }
.m-drawer-close {
position: absolute;
top: 12px; right: 16px;
color: var(--c-white);
text-decoration: none;
font-size: 24px;
line-height: 1;
width: 36px; height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.m-drawer h4 {
color: var(--c-yellow);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 28px 0 10px;
}
.m-drawer-contact a {
color: var(--c-white);
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
font-size: 15px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.m-drawer-contact svg {
width: 18px; height: 18px;
flex-shrink: 0;
fill: var(--c-yellow);
}
.m-drawer-social {
display: flex;
gap: 12px;
margin-top: 14px;
}
.m-drawer-social a {
color: var(--c-white);
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,0.1);
}
.m-drawer-social svg { width: 18px; height: 18px; fill: currentColor; }
/* ======= HEADER ======= */
.site-header { position: sticky; top: 0; z-index: 100; }
.site-header .container { padding: 11px 18px; min-height: auto; align-items: center; gap: 14px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.site-logo img { max-width: 140px; height: auto; display: block; }
.brand-tagline {
font-size: 9px;
color: var(--c-yellow);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1.25;
}
.menu-toggle { flex-shrink: 0; }
/* ======= HERO — slideshow 5 fotos com push (teste mobile-2) ======= */
.hero {
padding: 18px 0 30px;
min-height: auto;
position: relative;
overflow: hidden;
background: var(--c-header-dark);
}
.hero-slideshow {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 55%;
transform: translateX(100%);
animation: hero-push 35s infinite;
animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
animation-fill-mode: both;
will-change: transform;
}
.hero-slide:nth-child(1) { animation-delay: -1s; }
.hero-slide:nth-child(2) { animation-delay: 6s; }
.hero-slide:nth-child(3) { animation-delay: 13s; }
.hero-slide:nth-child(4) { animation-delay: 20s; }
.hero-slide:nth-child(5) { animation-delay: 27s; }
/* Slide 1 (LCP) usa ![]()
com fetchpriority="high" no HTML; o pai .hero-slide
fornece position/animação e o replica background-size:cover. */
.hero-slide-img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
@keyframes hero-push {
0% { transform: translateX(100%); }
3% { transform: translateX(0); }
20% { transform: translateX(0); }
23% { transform: translateX(-100%); }
100% { transform: translateX(-100%); }
}
/* Overlay denso para manter legibilidade com todo o conteúdo empilhado do mobile */
.hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg,
rgba(1,3,74,0.88) 0%,
rgba(1,3,74,0.78) 40%,
rgba(2,6,120,0.62) 75%,
rgba(41,87,164,0.40) 100%);
pointer-events: none;
}
.hero .container {
grid-template-columns: 1fr;
gap: 14px;
position: relative;
z-index: 2;
}
/* Brand presence via header (logo + tagline) + tipografia + acento amarelo.
Sem watermark no hero: quaisquer tentativas ficariam atrás do conteúdo denso ou
competiriam com a leitura. Decisão de senior designer — menos é mais. */
/* ======= CATEGORIAS ======= */
.hero-card { padding: 16px 16px 14px; position: relative; }
.hero-card h3 {
font-size: 10px;
margin-bottom: 12px;
letter-spacing: 0.18em;
opacity: 0.7;
}
.categoria-grid { grid-template-columns: 1fr; gap: 7px; }
.categoria {
padding: 11px 13px;
font-size: 13.5px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.categoria::after {
content: "›";
color: var(--c-yellow);
font-weight: 700;
font-size: 17px;
line-height: 1;
}
/* DP/RH destaque — flex column (bug fix mantido) */
.categoria--primary {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
padding: 13px 15px;
background: linear-gradient(90deg, rgba(250,196,2,0.16), rgba(250,196,2,0.03));
border-color: rgba(250,196,2,0.4);
}
.categoria--primary::after { display: none; }
.cat-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.categoria--primary .cat-name { font-size: 14.5px; font-weight: 800; color: var(--c-white); }
.cat-badge {
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.08em;
padding: 3px 7px;
border-radius: var(--radius-sm);
background: var(--c-yellow);
color: var(--c-text-dark);
text-transform: uppercase;
}
.cat-meta {
font-size: 11.5px;
color: rgba(255,255,255,0.78);
font-weight: 500;
}
/* ======= TRUST STRIP (1 linha compacta) ======= */
.hero-trust {
margin-top: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 13px;
background: rgba(0,0,0,0.22);
border-radius: var(--radius-sm);
font-size: 12px;
color: rgba(255,255,255,0.88);
opacity: 1;
flex-wrap: wrap;
}
.hero-trust .stars { color: var(--c-yellow); letter-spacing: 1px; font-size: 11.5px; }
.hero-trust strong { color: var(--c-yellow); font-weight: 800; font-size: 12.5px; }
.hero-trust .sep { color: rgba(255,255,255,0.28); }
.hero-trust span { opacity: 1; }
.hero-trust span::before { content: none; }
/* ======= CTAs (lado a lado — otimização de tela) ======= */
.hero-cta {
margin-top: 0;
display: flex;
flex-direction: row;
align-items: stretch;
gap: 8px;
}
.hero-cta .btn {
flex: 1 1 0;
min-width: 0;
height: 46px;
font-size: 13.5px;
padding: 0 12px;
white-space: nowrap;
}
.hero-cta .btn svg { flex-shrink: 0; }
.btn-whatsapp {
background: transparent;
color: var(--c-white);
border-color: var(--c-whatsapp);
}
.btn-whatsapp:hover { background: var(--c-whatsapp); border-color: var(--c-whatsapp); color: var(--c-white); }
.btn-whatsapp svg { flex-shrink: 0; }
/* ======= HEADLINE (compacto) ======= */
.hero-headline { display: flex; flex-direction: column; gap: 6px; }
.hero-headline .eyebrow {
color: var(--c-yellow);
font-size: 10px;
letter-spacing: 0.12em;
margin-bottom: 0;
text-transform: uppercase;
font-weight: 700;
line-height: 1.3;
}
.hero-title {
font-size: 1.5rem;
line-height: 1.15;
margin: 0;
max-width: none;
color: var(--c-white);
}
/* ======= MODALIDADES ======= */
.modalidades { display: flex; gap: 6px; flex-wrap: wrap; }
.modalidade {
font-size: 11.5px;
font-weight: 600;
padding: 5px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
color: var(--c-white);
}
.modalidade--live::before {
content: "";
display: inline-block;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--c-yellow);
margin-right: 5px;
vertical-align: middle;
}
/* ======= SEÇÃO ABAIXO DA 1ª DOBRA — CARROSSEL AUTOMÁTICO ======= */
.gallery {
background: linear-gradient(180deg, rgba(41,87,164,0.08) 0%, var(--c-bg) 100%);
padding: 32px 0 0;
}
.gallery-head {
margin: 0 18px 14px;
}
.gallery-head h2 {
font-size: 16px;
margin: 0 0 3px;
color: var(--c-text-dark);
}
.gallery-head small {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-muted);
}
/* Slideshow auto-rotate: 5 slides com PUSH effect, full-width (sem margem lateral) */
.gallery-slideshow {
position: relative;
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--c-header-dark);
}
.gallery-slide {
position: absolute;
inset: 0;
background-size: cover;
transform: translateX(100%);
animation: gallery-push 35s infinite;
animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
animation-fill-mode: both;
will-change: transform;
}
.gallery-slide:nth-child(1) { animation-delay: -1s; }
.gallery-slide:nth-child(2) { animation-delay: 6s; }
.gallery-slide:nth-child(3) { animation-delay: 13s; }
.gallery-slide:nth-child(4) { animation-delay: 20s; }
.gallery-slide:nth-child(5) { animation-delay: 27s; }
@keyframes gallery-push {
0% { transform: translateX(100%); }
3% { transform: translateX(0); }
20% { transform: translateX(0); }
23% { transform: translateX(-100%); }
100% { transform: translateX(-100%); }
}
.gallery-slide::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(1,3,40,0.55) 100%);
pointer-events: none;
}
.gallery-slide span {
position: absolute;
left: 14px;
bottom: 12px;
color: var(--c-white);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.03em;
z-index: 1;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
/* =========================================================
SEÇÕES POST-GALLERY — home completa
ordem do mock PDF (cliente Claude Design)
========================================================= */
.sec { padding: 32px 18px; }
/* Eyebrow CAPS canônico brand-book §7: 11px / +0.08em / 700 / uppercase / line-height 1.3 */
.sec-eyebrow {
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--c-yellow); font-weight: 700; margin: 0 0 8px; line-height: 1.3;
}
.sec-eyebrow.dark { color: var(--c-text-dark); opacity: 0.62; }
.sec-title {
font-size: 22px; line-height: 1.15; letter-spacing: -0.018em;
font-weight: 800; color: var(--c-text-dark); margin: 0 0 8px;
}
.sec-title.light { color: #fff; }
.sec-lead {
font-size: 14px; color: var(--c-muted); line-height: 1.55; margin: 0 0 18px;
}
.sec-lead.light { color: rgba(255,255,255,0.78); }
/* 4 — TRUST BIG (4 números) */
.trust-big {
background-image: url('/assets/img/roda-watermark.svg'), linear-gradient(135deg, var(--c-navy-300) 0%, var(--c-navy-500) 100%);
background-size: 120vw 120vw, 100% 100%;
background-repeat: repeat, no-repeat;
color: #fff; padding: 32px 18px;
}
.trust-big-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 14px; }
.trust-big-item .num {
font-size: 30px; line-height: 1; font-weight: 800;
color: #fff; letter-spacing: -0.022em;
}
.trust-big-item .label {
font-size: 11.5px; color: rgba(255,255,255,0.78);
margin-top: 6px; line-height: 1.4;
}
.trust-big-item .label strong { color: #fff; font-weight: 700; }
.trust-big-item .label .star { color: var(--c-yellow); margin-right: 2px; }
.trust-big-item .label a {
color: var(--c-yellow); text-decoration: none; font-weight: 700;
border-bottom: 1px solid rgba(250,196,2,0.4);
}
/* 5 — CATEGORIAS-ÂNCORA COM FOTO MARCA D'ÁGUA (2 colunas em mobile) */
.cat-anchors { background-color: var(--c-navy); padding: 36px 18px 40px; }
.cat-anchors-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.cat-card-big {
position: relative; overflow: hidden;
border-radius: 14px;
display: flex; flex-direction: column;
text-decoration: none; color: #fff;
transition: transform .15s ease, box-shadow .15s ease;
min-height: 280px;
background-color: var(--cat-tone);
}
.cat-card-big:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,0.28); }
/* Foto: 100% visível, ocupa o card todo */
.cat-card-big .cat-photo {
position: absolute; inset: 0;
background-size: cover; background-position: center 35%;
opacity: 1;
z-index: 0;
}
/* Overlay escuro: forte só na metade inferior (estilo capa de revista) */
.cat-card-big::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg,
var(--cat-shade-light) 0%,
var(--cat-shade) 60%,
var(--cat-shade-deep) 100%);
z-index: 1;
pointer-events: none;
}
/* Tons por família — saturados para o gradiente inferior */
/* Cores derivadas via style inline (CMS-driven). Classes mantidas só para --cat-dot legado. */
.cat-card-big { --cat-dot: var(--c-yellow); }
.cat-card-big.dp { --cat-dot: var(--c-pink-600); }
.cat-card-body {
position: relative; z-index: 2;
padding: 18px 20px 16px;
display: flex; flex-direction: column; gap: 8px;
margin-top: auto;
}
.cat-card-big .cat-eyebrow {
display: flex; align-items: flex-start; gap: 6px;
font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(255,255,255,0.92); font-weight: 700;
margin: 0; line-height: 1.4;
}
.cat-card-big .cat-eyebrow::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--cat-dot); flex-shrink: 0;
margin-top: 4px;
}
.cat-card-big.dp { --cat-dot: var(--c-pink-600); }
.cat-card-big.gestao { --cat-dot: var(--c-yellow); }
.cat-card-big.lideranca { --cat-dot: var(--c-yellow); }
.cat-card-big h3 {
font-size: 19px; line-height: 1.15; letter-spacing: -0.014em;
font-weight: 800; color: #fff; margin: 0;
}
.cat-card-big p {
font-size: 13px; color: rgba(255,255,255,0.88); margin: 0; line-height: 1.5;
}
.cat-pills {
display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px;
}
.cat-pills .cat-pill {
font-size: 10.5px; padding: 3px 9px; border-radius: 999px;
background: var(--c-yellow); color: var(--c-navy);
border: none;
letter-spacing: 0.02em; font-weight: 700;
text-decoration: none;
position: relative; z-index: 1;
transition: background .15s ease, transform .1s ease;
}
.cat-pills .cat-pill:hover { background: #fff; transform: translateY(-1px); }
.cat-title-link { color: inherit; text-decoration: none; }
.cat-title-link:hover { text-decoration: underline; }
/* Divider sutil + footer "X cursos disponíveis" */
.cat-card-foot {
margin-top: 8px; padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.18);
}
.cat-card-foot .count {
font-size: 11px; color: rgba(255,255,255,0.82); font-weight: 600;
line-height: 1.3;
}
/* 6 — AGENDA / PRÓXIMAS TURMAS (layout horizontal por linha em desktop) */
.agenda { background-color: var(--c-navy-100); color: #fff; padding: 36px 0 16px; }
.agenda > .head { padding: 0 18px; }
.agenda-filters {
display: flex; gap: 6px; overflow-x: auto;
padding: 6px 18px 16px; scrollbar-width: none;
}
.agenda-filters::-webkit-scrollbar { display: none; }
.agenda-filters .pill {
background: rgba(255,255,255,0.08); color: #fff;
border: 1px solid rgba(255,255,255,0.14);
padding: 7px 14px; border-radius: 999px;
font-size: 12px; font-weight: 600; white-space: nowrap;
flex-shrink: 0; cursor: pointer; font-family: inherit;
}
.agenda-filters .pill.active {
background: var(--c-yellow); color: var(--c-text-dark); border-color: var(--c-yellow);
}
.agenda-list {
display: flex; flex-direction: column;
border-top: 1px solid rgba(255,255,255,0.06);
}
.agenda-row {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"badge title title"
"badge meta action";
column-gap: 10px;
row-gap: 2px;
padding: 11px 18px;
border-bottom: 1px solid rgba(255,255,255,0.06);
text-decoration: none; color: #fff;
transition: background .15s ease;
}
.agenda-row:hover { background: rgba(255,255,255,0.03); }
.agenda-row .modalidade-badge {
grid-area: badge; align-self: center;
font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
padding: 4px 9px; border-radius: 999px; text-transform: uppercase;
min-width: 64px; text-align: center;
}
.modalidade-badge.presencial { background: var(--c-yellow); color: var(--c-text-dark); }
.modalidade-badge.online { background: var(--c-royal); color: #fff; }
.modalidade-badge.hibrido { background: var(--c-teal); color: #fff; }
.agenda-row h5 {
grid-area: title;
font-size: 13.5px; font-weight: 700; color: #fff; margin: 0;
letter-spacing: -0.010em; line-height: 1.25;
}
.agenda-row .meta {
grid-area: meta;
font-size: 11.5px; color: rgba(255,255,255,0.6); align-self: center;
line-height: 1.3;
}
.agenda-row .action {
grid-area: action; align-self: center;
font-size: 11.5px; color: var(--c-yellow); font-weight: 700;
white-space: nowrap;
}
.agenda-row .action::after { content: " →"; }
.agenda-foot {
padding: 18px;
font-size: 11.5px; color: rgba(255,255,255,0.7); text-align: center;
line-height: 1.7;
}
.agenda-foot strong { color: var(--c-yellow); font-weight: 700; }
.agenda-foot em { color: var(--c-pink-400); font-style: normal; font-weight: 700; }
/* 7 — 4 MODALIDADES (bg branco, ícones cores diferenciadas) */
.modalidades-sec { background: transparent; padding: 36px 18px; }
.mod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mod-card {
background: #fff; border: 1px solid var(--c-border); border-radius: 14px;
padding: 18px 14px; display: flex; flex-direction: column; gap: 6px;
transition: transform .15s ease, box-shadow .15s ease;
}
.mod-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mod-card .icon {
color: var(--mod-color);
display: flex; align-items: center; justify-content: flex-start;
margin-bottom: 8px;
}
.mod-card .icon svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Tetrádica oficial brand-book §6 — 4 cores em equilíbrio */
.mod-card.presencial { --mod-color: var(--c-red-deep); }
.mod-card.online { --mod-color: var(--c-navy); }
.mod-card.hibrido { --mod-color: var(--c-teal); }
.mod-card.in-company { --mod-color: var(--c-dourado); }
.mod-card h4 {
font-size: 14px; font-weight: 800; color: var(--c-text-dark); margin: 0;
letter-spacing: -0.010em;
}
.mod-card p {
font-size: 11.5px; color: var(--c-muted); margin: 0; line-height: 1.45;
}
/* 8 — DIFERENCIAIS (6 cards em 2x3 mobile) */
.diferenciais { background-color: var(--c-navy); color: #fff; padding: 36px 18px 40px; }
.dif-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dif-card {
position: relative; overflow: hidden;
background: linear-gradient(135deg, var(--df-c1) 0%, var(--df-c2) 100%);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px; padding: 16px 14px;
box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}
.dif-card::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.10), transparent 55%);
}
.dif-card > * { position: relative; z-index: 1; }
.dif-card.df1 { --df-c1: var(--c-royal); --df-c2: #0c1a3a; }
.dif-card.df2 { --df-c1: var(--c-pink-400); --df-c2: #4d0a2c; }
.dif-card.df3 { --df-c1: var(--c-teal); --df-c2: #0a2a3a; }
.dif-card.df4 { --df-c1: #b8860b; --df-c2: #4d2a0a; }
.dif-card.df5 { --df-c1: #8b1a3c; --df-c2: #2a0a18; }
.dif-card.df6 { --df-c1: #1a3a4a; --df-c2: #0a1a28; }
.dif-card .num-and-cat {
display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
}
.dif-card .num {
color: var(--c-yellow); font-weight: 800; font-size: 10px;
}
.dif-card .cat {
color: rgba(255,255,255,0.85); font-weight: 700;
}
.dif-card h4 {
font-size: 13.5px; font-weight: 800; color: #fff; margin: 0 0 6px;
letter-spacing: -0.010em; line-height: 1.25;
}
.dif-card p {
font-size: 11.5px; color: rgba(255,255,255,0.88); margin: 0; line-height: 1.5;
}
/* 9 — HISTÓRIAS (nome em yellow) */
.historias { background-color: var(--c-navy-200); color: #fff; padding: 36px 18px 40px; }
.historias-head { margin-bottom: 18px; }
.google-live {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(66,133,244,0.12);
border: 1px solid rgba(66,133,244,0.40);
padding: 5px 12px; border-radius: 999px;
margin-bottom: 12px;
}
.live-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #22c55e; flex-shrink: 0;
animation: live-pulse 1.6s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(34,197,94,0.7);
}
@keyframes live-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
.live-label {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
text-transform: uppercase; color: #fff;
}
.google-rating {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
margin-top: 6px;
}
.rating-num {
font-size: 32px; font-weight: 900; color: var(--c-yellow);
letter-spacing: -0.02em; line-height: 1;
}
.rating-stars {
color: var(--c-yellow); font-size: 16px; letter-spacing: 2px;
}
.rating-meta {
font-size: 12px; color: rgba(255,255,255,0.78);
width: 100%;
}
.rating-meta strong { color: #fff; font-weight: 700; }
.google-cta {
display: inline-flex; margin-top: 18px;
color: var(--c-yellow); font-size: 13px; font-weight: 700;
text-decoration: none; align-items: center;
}
.google-cta:hover { text-decoration: underline; }
.hist-grid { display: flex; flex-direction: column; gap: 12px; }
.hist-card {
background: var(--c-navy);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px; padding: 18px;
}
.hist-card .stars { color: var(--c-yellow); font-size: 12.5px; letter-spacing: 1.5px; margin-bottom: 10px; }
.hist-card .quote {
font-size: 13.5px; color: rgba(255,255,255,0.92);
line-height: 1.55; margin: 0 0 14px;
}
.hist-card .person { display: flex; align-items: center; gap: 12px; }
.hist-card .photo {
width: 44px; height: 44px; border-radius: 50%;
border: 2px solid var(--c-yellow);
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 13px; letter-spacing: 0.4px;
flex-shrink: 0;
}
.hist-card .photo[data-pair="A"] { background: var(--c-royal); }
.hist-card .photo[data-pair="B"] { background: var(--c-pink-400); }
.hist-card .photo[data-pair="C"] { background: var(--c-teal); }
.hist-card .person-info { font-size: 12px; line-height: 1.35; }
.hist-card .person-info strong {
display: block; color: var(--c-yellow);
font-weight: 800; font-size: 13px;
}
.hist-card .person-info span { color: rgba(255,255,255,0.65); }
/* 10 — IN-COMPANY B2B (strip clara dentro do navy) */
.incompany-b2b { background-color: var(--c-navy); color: #fff; padding: 36px 18px 36px; }
.incompany-marquee {
margin-top: 22px;
overflow: hidden; position: relative;
mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.incompany-track {
display: flex; gap: 14px; width: max-content;
animation: incompany-scroll 28s linear infinite;
}
.incompany-marquee:hover .incompany-track { animation-play-state: paused; }
@keyframes incompany-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.incompany-track .logo-cell {
flex-shrink: 0;
width: calc((100vw - 36px - 14px) / 2);
max-width: 200px;
height: 88px;
background: #fff; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
padding: 14px 16px;
font-size: 13px; font-weight: 800; color: var(--c-navy);
letter-spacing: 0.02em;
box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.incompany-track .logo-cell picture {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
}
.incompany-track .logo-cell img {
max-width: 100%; max-height: 100%; object-fit: contain;
}
.incompany-cta { text-align: center; margin-top: 28px; }
/* 11 — RESTAURANTES PARCEIROS (6 cards com brand) */
/* 11 — RESTAURANTES PARCEIROS · carrossel auto (mobile = 3 visíveis, texto fora da caixa) */
.restaurantes { background: #fff; color: var(--c-grafite); padding: 36px 18px; }
.restaurantes .sec-title { color: var(--c-navy); }
.restaurantes .sec-lead { color: var(--c-grafite); margin-bottom: 20px; }
.resto-carousel { position: relative; overflow: hidden; width: 100%; }
.resto-track { display: flex; gap: 12px; will-change: transform; }
.resto-card {
flex: 0 0 calc((100% - 24px) / 3);
display: block;
background: transparent; border: none;
}
.resto-thumb {
position: relative; aspect-ratio: 1 / 1;
border-radius: 10px; overflow: hidden;
background: linear-gradient(135deg, var(--rc1) 0%, var(--rc2) 100%);
border: 1px solid rgba(0,0,0,0.06);
}
.resto-card.r1 { --rc1: var(--c-royal); --rc2: #0c1a3a; }
.resto-card.r2 { --rc1: var(--c-pink-400); --rc2: #4d0a2c; }
.resto-card.r3 { --rc1: var(--c-teal); --rc2: #0a2a3a; }
.resto-card.r4 { --rc1: #b8860b; --rc2: #4d2a0a; }
.resto-card.r5 { --rc1: #8b1a3c; --rc2: #2a0a18; }
.resto-card.r6 { --rc1: #1a3a4a; --rc2: #0a1a28; }
.resto-thumb::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,0.10), transparent 50%),
linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55) 100%);
}
.resto-thumb .icon-cutlery {
position: absolute; top: 6px; right: 6px;
width: 14px; height: 14px;
color: rgba(255,255,255,0.7); z-index: 1;
}
.resto-text { display: block; padding: 6px 2px 0; }
.resto-name {
color: var(--c-text-dark); font-size: 10px; font-weight: 700;
line-height: 1.2; letter-spacing: -0.005em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.resto-address {
color: var(--c-muted); font-size: 8.5px; font-weight: 500;
line-height: 1.2; margin-top: 2px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
/* 12 — FAQ */
.faq { background: var(--c-navy-100); color: #fff; padding: 36px 18px 40px; }
.faq-list { display: flex; flex-direction: column; gap: 6px; }
.faq-item {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px; overflow: hidden;
}
.faq-item summary {
list-style: none; cursor: pointer;
padding: 13px 16px; font-size: 13.5px; font-weight: 700; color: #fff;
display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+"; color: var(--c-yellow); font-size: 24px; font-weight: 400;
line-height: 1; transition: transform .2s ease; flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] { border-color: var(--c-yellow); background: rgba(255,255,255,0.06); }
.faq-item .answer {
padding: 0 16px 14px; font-size: 12.5px;
color: rgba(255,255,255,0.78); line-height: 1.55;
}
/* 13 — CTA FINAL (royal médio + circle decoração) */
.cta-final-sec {
background: linear-gradient(135deg, var(--c-navy-300) 0%, var(--c-royal) 100%);
color: #fff; padding: 40px 18px;
position: relative; overflow: hidden;
}
.cta-final-sec::after {
content: ""; position: absolute; top: -60px; right: -80px;
width: 240px; height: 240px; border-radius: 50%;
background: rgba(255,255,255,0.06); pointer-events: none;
}
.cta-final-sec .inner { position: relative; z-index: 1; max-width: 560px; }
.cta-final-sec .eyebrow-line {
font-size: 10px; color: var(--c-yellow); font-weight: 800;
letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 12px;
}
.cta-final-sec h2 {
font-size: 24px; font-weight: 800; color: #fff;
letter-spacing: -0.018em; line-height: 1.1; margin: 0 0 12px;
}
.cta-final-sec p {
font-size: 13.5px; color: rgba(255,255,255,0.88); margin: 0 0 20px; line-height: 1.55;
}
.cta-final-sec .ctas { display: flex; gap: 8px; flex-wrap: wrap; }
.cta-final-sec .ctas .btn { flex: 1 1 0; height: 46px; font-size: 13px; padding: 0 12px; }
/* 14 — CONTATO (Onde Estamos + Vamos Conversar) */
.contato-sec { background-color: var(--c-navy); color: #fff; padding: 40px 18px; }
.contato-block + .contato-block {
margin-top: 32px; padding-top: 32px;
border-top: 1px solid rgba(255,255,255,0.1);
}
/* eyebrow do contato unificado em .sec-eyebrow (era .eyebrow-line distoante) — 2026-05-03 */
.contato-block h2 {
font-size: 24px; font-weight: 800; color: #fff;
letter-spacing: -0.018em; line-height: 1.1; margin: 0 0 18px;
}
.contato-form .form-fields { display: flex; flex-direction: column; gap: 14px; }
.contato-form .field label {
display: block; font-size: 12px; color: rgba(255,255,255,0.78);
margin-bottom: 6px; font-weight: 600;
}
.contato-form .field input,
.contato-form .field textarea {
width: 100%; background: rgba(255,255,255,0.08); color: #fff;
border: 1px solid rgba(255,255,255,0.18); border-radius: 22px;
padding: 13px 18px; font-size: 14px; font-family: inherit;
outline: none;
transition: border-color .15s ease, background .15s ease;
}
.contato-form .field input::placeholder,
.contato-form .field textarea::placeholder { color: rgba(255,255,255,0.4); }
.contato-form .field input:focus,
.contato-form .field textarea:focus {
border-color: var(--c-yellow);
background: rgba(255,255,255,0.12);
}
.contato-form .field textarea { min-height: 96px; resize: vertical; border-radius: 18px; }
.contato-form button {
margin-top: 6px; width: 100%; height: 50px;
background: var(--c-pink-600); color: #fff; border: 0;
border-radius: 22px;
font-weight: 800; font-size: 14px; letter-spacing: 0.02em;
box-shadow: 0 8px 22px rgba(207,2,152,0.34);
cursor: pointer; transition: background .15s ease;
font-family: inherit;
}
.contato-form button:hover { background: var(--c-pink-800); }
.enderecos { display: flex; flex-direction: column; gap: 18px; }
.endereco h4 {
font-size: 15px; color: #fff; font-weight: 700; margin: 0 0 4px;
letter-spacing: -0.010em;
}
.endereco p { font-size: 13px; color: rgba(255,255,255,0.78); margin: 0; line-height: 1.55; }
.contato-links { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; }
.contato-links a {
display: flex; align-items: center; gap: 12px;
color: #fff; text-decoration: none;
font-size: 13.5px; padding: 8px 0;
transition: color .15s ease;
}
.contato-links svg { width: 18px; height: 18px; fill: var(--c-yellow) !important; flex-shrink: 0; }
.contato-links svg path { fill: var(--c-yellow) !important; }
.contato-links a:hover { color: var(--c-yellow); }
/* 15 — OUTRAS MARCAS DO GRUPO */
.outras-marcas {
background: linear-gradient(135deg, var(--c-royal) 0%, var(--c-navy-400) 100%);
color: #fff; padding: 40px 18px;
}
.outras-marcas-head { margin-bottom: 22px; }
.outras-marcas-head .sec-title { font-size: 22px; }
.outras-marcas-grid { display: flex; flex-direction: column; gap: 6px; }
.outras-marca-card {
display: flex; align-items: center; gap: 14px;
padding: 18px 0;
text-decoration: none; color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.14);
transition: opacity .15s ease;
}
.outras-marca-card:last-child { border-bottom: 0; }
.outras-marca-card:hover { opacity: 0.88; }
.outras-marca-card .label {
flex: 1;
font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.92);
font-weight: 600;
}
.outras-marca-card .label strong { display: block; font-weight: 800; color: #fff; margin-bottom: 2px; font-size: 13.5px; }
.outras-marca-card .logo-side {
flex-shrink: 0;
width: 110px; height: 56px;
display: flex; align-items: center; justify-content: center;
}
.outras-marca-card .logo-side img {
max-width: 100%; max-height: 46px; height: auto;
filter: brightness(0) invert(1);
}
.outras-marca-card[href*="gestorpop"] .logo-side {
background: none; border-radius: 0; padding: 0;
width: 160px; height: 160px;
}
.outras-marca-card[href*="gestorpop"] .logo-side img {
filter: none; width: 160px; height: 160px; max-width: none; max-height: none; object-fit: contain;
}
/* 16 — FOOTER INSTITUCIONAL (substitui m-footer branco) */
.site-footer-new {
background: var(--c-navy-100);
color: rgba(255,255,255,0.78);
padding: 36px 18px 22px;
font-size: 13px;
}
.footer-grid {
display: grid; grid-template-columns: 1fr; gap: 26px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .footer-logo img {
max-width: 160px; height: auto; display: block;
}
.footer-brand .footer-tagline {
font-size: 9.5px; color: var(--c-yellow);
letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
margin-top: 10px;
}
.footer-brand p {
font-size: 12px; color: rgba(255,255,255,0.55);
margin-top: 12px; line-height: 1.55;
}
.footer-col h5 {
font-size: 11px; color: var(--c-yellow);
letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
margin: 0 0 12px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-col li { line-height: 1.25; margin-bottom: 0; }
.footer-col a, .footer-col span {
font-size: 13px; color: rgba(255,255,255,0.78); text-decoration: none;
display: inline-block; line-height: 1.25;
transition: color .15s ease;
}
.footer-col a:hover { color: var(--c-yellow); }
.footer-bottom {
padding-top: 20px;
display: flex; flex-direction: column; gap: 14px;
font-size: 11.5px; color: rgba(255,255,255,0.5);
}
.footer-bottom .social-mini { display: flex; gap: 8px; }
.footer-bottom .social-mini a {
width: 32px; height: 32px; border-radius: 50%;
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.78);
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s ease, color .15s ease;
}
.footer-bottom .social-mini a:hover { background: var(--c-yellow); color: var(--c-text-dark); }
.footer-bottom .social-mini svg { width: 14px; height: 14px; fill: currentColor; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; }
.footer-legal a {
color: rgba(255,255,255,0.55); text-decoration: none;
transition: color .15s ease;
}
.footer-legal a:hover { color: var(--c-yellow); }
/* LGPD: cookie banner card flutuante */
.cookie-banner {
position: fixed; bottom: 12px; left: 12px; right: 12px;
z-index: 9999;
background: rgba(8,14,55,0.97);
border: 1px solid rgba(250,196,2,0.45); border-radius: 14px;
padding: 16px 16px;
box-shadow: 0 14px 36px rgba(0,0,0,0.55);
display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
backdrop-filter: blur(10px);
}
.cookie-icon {
width: 36px; height: 36px; flex-shrink: 0;
background: rgba(250,196,2,0.16); border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: var(--c-yellow);
grid-row: 1 / 3;
}
.cookie-icon svg { width: 20px; height: 20px; }
.cookie-text {
font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.92);
}
.cookie-text strong {
color: var(--c-yellow); display: block;
font-size: 13.5px; margin-bottom: 3px; letter-spacing: -0.005em;
}
.cookie-text a { color: var(--c-yellow); text-decoration: underline; font-weight: 600; }
.cookie-actions { grid-column: 2; display: flex; gap: 8px; margin-top: 4px; }
.cookie-btn {
flex: 1; padding: 10px 14px; border-radius: 999px;
font-weight: 700; font-size: 12.5px; cursor: pointer;
border: 1px solid transparent; font-family: inherit;
transition: opacity .15s ease, background .15s ease;
}
.cookie-btn:hover { opacity: 0.88; }
.cookie-decline {
background: transparent; color: #fff;
border-color: rgba(255,255,255,0.30);
}
.cookie-decline:hover { background: rgba(255,255,255,0.08); }
.cookie-accept {
background: var(--c-yellow); color: var(--c-text-dark);
}
/* mobile-2.html é mobile-only — sem media queries que mudam layout em viewports maiores
(o device wrapper está fixo em 380px; janelas maiores não devem alterar grids internos) */
}
/* ============================================================
SEÇÃO 5 — OVERRIDES-DESKTOP
Origem: css/overrides-desktop.css
============================================================ */
/* === Override desktop+tablet (>=768px) ===
Gerado de desktop.html (intocavel).
Regras de mock-frame (.device, body bg #0a0726) removidas.
Embrulhado em media query para isolamento de cascade.
*/
@media (min-width: 768px) {
/*
Overrides clone 8 (desktop) — padrão aprovado do mobile aplicado ao desktop:
- Sem eyebrow, sem subtitle, sem bullets
- H1 + modalidades pills + trust 1-linha + CTAs lado a lado
- Sem watermark (override do hero-banner.jpg herdado de clone2)
- Categorias à direita em card com DP/RH destaque
- Viewport 1920: container expande progressivamente para usar mais largura
*/
/* ======= NAVBAR — estrutura single-row igual à referência ======= */
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 48px;
min-height: 64px;
}
.site-logo img { max-width: 150px; }
.header-right {
display: flex;
align-items: center;
gap: 28px;
}
.header-right .btn-cta {
padding: 10px 24px;
font-size: 14px;
font-weight: 700;
}
.header-phone {
color: var(--c-white);
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
letter-spacing: 0.01em;
}
.header-phone:hover { color: var(--c-yellow); }
.header-phone svg { width: 18px; height: 18px; flex-shrink: 0; fill: var(--c-yellow); }
.header-social { display: flex; gap: 2px; align-items: center; }
.header-social a {
color: var(--c-white);
opacity: 0.9;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: opacity 0.2s, background 0.2s;
}
.header-social a:hover { opacity: 1; background: rgba(255,255,255,0.1); }
.header-social svg { width: 16px; height: 16px; fill: currentColor; }
/* ======= HERO — slideshow automático de 5 fotos + overlay gradient ======= */
.hero {
position: relative;
padding: 64px 0 72px;
overflow: hidden;
background: var(--c-header-dark); /* fallback se fotos falharem */
}
/* Slideshow atrás — 5 slides com PUSH effect (horizontal slide-in/out) */
.hero-slideshow {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 55%;
transform: translateX(100%);
animation: hero-push 35s infinite;
animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
animation-fill-mode: both;
will-change: transform;
}
/* Stagger 7s — slide 1 delay -1s para já aparecer no load */
.hero-slide:nth-child(1) { animation-delay: -1s; }
.hero-slide:nth-child(2) { animation-delay: 6s; }
.hero-slide:nth-child(3) { animation-delay: 13s; }
.hero-slide:nth-child(4) { animation-delay: 20s; }
.hero-slide:nth-child(5) { animation-delay: 27s; }
/* Slide 1 (LCP) usa ![]()
com fetchpriority="high" no HTML. */
.hero-slide-img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
@keyframes hero-push {
0% { transform: translateX(100%); } /* off-right, aguardando */
3% { transform: translateX(0); } /* entrou (push in) */
20% { transform: translateX(0); } /* hold 5s visível */
23% { transform: translateX(-100%); } /* saiu (push out) */
100% { transform: translateX(-100%); }
}
/* Overlay gradient acima da slideshow — mantém legibilidade do texto */
.hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(100deg,
rgba(1,3,74,0.94) 0%,
rgba(1,3,74,0.82) 25%,
rgba(2,6,120,0.55) 55%,
rgba(2,6,120,0.25) 100%);
pointer-events: none;
}
.hero .container {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 64px;
align-items: start;
position: relative;
z-index: 2;
}
/* Viewport adaptativo — usa mais largura em telas grandes */
@media (min-width: 1600px) {
.hero .container {
max-width: 1400px;
gap: 72px;
}
}
@media (min-width: 1920px) {
.hero .container {
max-width: 1560px;
gap: 88px;
}
}
/* ======= Coluna esquerda ======= */
.hero-left {
display: flex;
flex-direction: column;
gap: 26px;
}
.hero-left .hero-title {
margin: 0;
max-width: 640px;
font-size: clamp(2rem, 3.6vw, 3rem);
line-height: 1.1;
}
/* ======= Modalidades (pills no hero, consistente com mobile) ======= */
.modalidades {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.modalidade {
font-size: 13px;
font-weight: 600;
padding: 7px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.22);
color: var(--c-white);
}
.modalidade--live::before {
content: "";
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--c-yellow);
margin-right: 7px;
vertical-align: middle;
}
/* ======= Trust strip horizontal compacta ======= */
.hero-trust {
gap: 18px;
margin-top: 0;
padding: 14px 20px;
background: rgba(0,0,0,0.22);
border-radius: var(--radius-md);
border: 1px solid rgba(255,255,255,0.08);
align-items: center;
opacity: 1;
max-width: 600px;
flex-wrap: wrap;
}
.hero-trust span {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
opacity: 1;
}
.hero-trust span::before { content: none; }
.hero-trust .stars {
color: var(--c-yellow);
letter-spacing: 1.5px;
font-size: 14px;
}
.hero-trust strong {
color: var(--c-yellow);
font-weight: 800;
font-size: 15px;
}
.hero-trust .sep { color: rgba(255,255,255,0.3); }
/* ======= CTAs lado a lado ======= */
.hero-cta {
margin-top: 0;
display: flex;
flex-direction: row;
gap: 12px;
flex-wrap: wrap;
}
.btn-whatsapp {
background: transparent;
color: var(--c-white);
border-color: var(--c-whatsapp);
}
.btn-whatsapp:hover {
background: var(--c-whatsapp);
border-color: var(--c-whatsapp);
color: var(--c-white);
}
.btn-whatsapp svg { flex-shrink: 0; }
/* hierarquia: primário levemente reduzido, secundário mais discreto */
.hero-cta .btn-cta.btn-lg { padding: 14px 28px; font-size: 15.5px; }
.hero-cta .btn-whatsapp.btn-lg { padding: 12px 22px; font-size: 14.5px; font-weight: 700; }
/* ======= Coluna direita: foto de turma + categorias card ======= */
.hero-right {
display: flex;
flex-direction: column;
gap: 22px;
}
/*
Brand frame — moldura retangular 16:9 com cantos arredondados.
Ativo: assets/logo para fundo claro com fundo transparente.png (brand horizontal
com fundo transparente, permite separar transparência).
Frame background 30% transparente (rgba 0.70) — brand fica 100% opaca.
*/
.brand-bubble {
width: 78%;
margin: 0 auto;
aspect-ratio: 2 / 1;
background:
url("../assets/logo%20para%20fundo%20claro%20com%20fundo%20transparente.png") center/auto 60% no-repeat,
#ffffff;
border-radius: 26px;
box-shadow: 0 12px 28px rgba(1,3,40,0.32);
opacity: 0;
animation:
brand-enter 1.2s cubic-bezier(0.22, 0.8, 0.3, 1) 0.5s forwards,
brand-float 5s ease-in-out 1.8s infinite;
}
@keyframes brand-enter {
from { opacity: 0; transform: translateY(32px) scale(0.94); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes brand-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.hero-card { padding: 22px; }
.hero-card h3 {
font-size: 11px;
margin-bottom: 16px;
letter-spacing: 0.18em;
opacity: 0.72;
}
/* Categoria-grid: destaque full-width + 3 em linha */
.categoria-grid {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.categoria {
padding: 12px 14px;
font-size: 13.5px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.categoria::after {
content: "›";
color: var(--c-yellow);
font-weight: 700;
font-size: 18px;
line-height: 1;
}
/* Destaque DP/RH — flex column ocupando linha inteira (grid-column: 1 / -1) */
.categoria--primary {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
padding: 16px 18px;
background: linear-gradient(90deg, rgba(250,196,2,0.18), rgba(250,196,2,0.04));
border-color: rgba(250,196,2,0.45);
}
.categoria--primary::after { display: none; }
.cat-name-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
width: 100%;
}
.categoria--primary .cat-name {
font-size: 16px;
font-weight: 800;
color: var(--c-white);
}
.cat-badge {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
padding: 3px 8px;
border-radius: var(--radius-sm);
background: var(--c-yellow);
color: var(--c-text-dark);
text-transform: uppercase;
}
.cat-meta {
font-size: 13px;
color: rgba(255,255,255,0.78);
font-weight: 500;
}
/* ======= SEÇÃO ABAIXO DA 1ª DOBRA — CARROSSEL ======= */
.gallery {
background: linear-gradient(180deg, rgba(41,87,164,0.08) 0%, var(--c-bg) 100%);
padding: 56px 0 0;
}
.gallery-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin: 0 0 22px;
flex-wrap: wrap;
gap: 12px;
}
.gallery-head h2 {
font-size: 22px;
margin: 0;
color: var(--c-text-dark);
letter-spacing: -0.01em;
}
.gallery-head small {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-muted);
}
.gallery-carousel {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: 0;
padding-bottom: 14px;
scrollbar-width: thin;
scrollbar-color: var(--c-primary-300) transparent;
}
.gallery-carousel::-webkit-scrollbar { height: 8px; }
.gallery-carousel::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 4px; }
.gallery-carousel::-webkit-scrollbar-thumb { background: var(--c-primary-300); border-radius: 4px; }
.gallery-item {
flex: 0 0 auto;
width: min(36%, 420px);
aspect-ratio: 4 / 3;
border-radius: var(--radius-md);
background-size: cover;
background-position: center 35%;
scroll-snap-align: start;
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gallery-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.gallery-item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(1,3,40,0.35) 100%);
pointer-events: none;
}
.gallery-item span {
position: absolute;
left: 16px;
bottom: 14px;
color: var(--c-white);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
z-index: 1;
text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
/* =========================================================
SEÇÕES POST-GALLERY — home completa para desktop 1440px
Largura máxima de conteúdo: 1280px centralizada
========================================================= */
/* Eyebrow CAPS canônico brand-book §7: 11px / +0.08em / 700 / uppercase / line-height 1.3 */
.sec-eyebrow {
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--c-yellow); font-weight: 700; margin: 0 0 10px; line-height: 1.3;
}
.sec-eyebrow.dark { color: var(--c-royal); }
.sec-title {
font-size: 38px; line-height: 1.1; letter-spacing: -0.02em;
font-weight: 800; color: var(--c-text-dark); margin: 0 0 12px;
}
.sec-title.light { color: #fff; }
.sec-lead {
font-size: 16px; color: var(--c-muted); line-height: 1.55; margin: 0 0 36px;
max-width: 720px;
}
.sec-lead.light { color: rgba(255,255,255,0.78); }
/* Wrapper centralizador padrão para todas as seções */
.sec-wrap {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
}
/* 4 — TRUST BIG (4 números em linha) */
.trust-big {
background-image: url('/assets/img/roda-watermark.svg'), linear-gradient(135deg, var(--c-navy-300) 0%, var(--c-navy-500) 100%);
background-size: 120vw 120vw, 100% 100%;
background-repeat: repeat, no-repeat;
color: #fff; padding: 64px 32px;
}
.trust-big-grid {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px;
}
.trust-big-item .num {
font-size: 48px; line-height: 1; font-weight: 800;
color: #fff; letter-spacing: -0.022em;
}
.trust-big-item .label {
font-size: 13.5px; color: rgba(255,255,255,0.78);
margin-top: 10px; line-height: 1.45;
}
.trust-big-item .label strong { color: #fff; font-weight: 700; }
.trust-big-item .label .star { color: var(--c-yellow); margin-right: 2px; }
.trust-big-item .label a {
color: var(--c-yellow); text-decoration: none; font-weight: 700;
border-bottom: 1px solid rgba(250,196,2,0.4);
}
/* 5 — CATEGORIAS-ÂNCORA (3 cards em linha) */
.cat-anchors { background-color: var(--c-navy); padding: 88px 32px 96px; }
.cat-anchors > .sec-eyebrow,
.cat-anchors > .sec-title,
.cat-anchors > .sec-lead {
max-width: 1280px; margin-left: auto; margin-right: auto;
}
.cat-anchors-grid {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.cat-card-big {
position: relative; overflow: hidden;
border-radius: 18px;
display: flex; flex-direction: column;
text-decoration: none; color: #fff;
transition: transform .15s ease, box-shadow .15s ease;
min-height: 420px;
background-color: var(--cat-tone);
}
.cat-card-big:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.30); }
.cat-card-big .cat-photo {
position: absolute; inset: 0;
background-size: cover; background-position: center 35%;
z-index: 0;
}
.cat-card-big::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg,
var(--cat-shade-light) 0%,
var(--cat-shade) 60%,
var(--cat-shade-deep) 100%);
z-index: 1; pointer-events: none;
}
/* Cores derivadas via style inline (CMS-driven). Classes mantidas só para --cat-dot legado. */
.cat-card-big { --cat-dot: var(--c-yellow); }
.cat-card-big.dp { --cat-dot: var(--c-pink-600); }
.cat-card-body {
position: relative; z-index: 2;
padding: 28px 32px; display: flex; flex-direction: column; gap: 10px;
margin-top: auto;
}
.cat-card-big .cat-eyebrow {
display: flex; align-items: flex-start; gap: 7px;
font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
color: rgba(255,255,255,0.92); font-weight: 700;
margin: 0; line-height: 1.4;
}
.cat-card-big .cat-eyebrow::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--cat-dot); flex-shrink: 0; margin-top: 4px;
}
.cat-card-big h3 {
font-size: 26px; line-height: 1.12; letter-spacing: -0.014em;
font-weight: 800; color: #fff; margin: 0;
}
.cat-card-big p {
font-size: 14px; color: rgba(255,255,255,0.88); margin: 0; line-height: 1.5;
}
.cat-pills {
display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.cat-pills .cat-pill {
font-size: 11px; padding: 4px 10px; border-radius: 999px;
background: var(--c-yellow); color: var(--c-navy);
border: none;
letter-spacing: 0.02em; font-weight: 700;
text-decoration: none;
position: relative; z-index: 1;
transition: background .15s ease, transform .1s ease;
}
.cat-pills .cat-pill:hover { background: #fff; transform: translateY(-1px); }
.cat-title-link { color: inherit; text-decoration: none; }
.cat-title-link:hover { text-decoration: underline; }
.cat-card-foot {
margin-top: 10px; padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.20);
}
.cat-card-foot .count { font-size: 12.5px; color: rgba(255,255,255,0.82); font-weight: 600; }
/* 6 — AGENDA / PRÓXIMAS TURMAS */
.agenda { background-color: var(--c-navy-100); color: #fff; padding: 88px 0 28px; }
.agenda > .head {
max-width: 1280px; margin: 0 auto; padding: 0 32px;
}
.agenda-filters {
max-width: 1280px; margin: 0 auto;
display: flex; gap: 8px;
padding: 12px 32px 28px;
}
.agenda-filters .pill {
background: rgba(255,255,255,0.08); color: #fff;
border: 1px solid rgba(255,255,255,0.14);
padding: 9px 18px; border-radius: 999px;
font-size: 13px; font-weight: 600; white-space: nowrap;
cursor: pointer; font-family: inherit;
}
.agenda-filters .pill.active {
background: var(--c-yellow); color: var(--c-text-dark); border-color: var(--c-yellow);
}
.agenda-list {
max-width: 1280px; margin: 0 auto;
display: flex; flex-direction: column;
border-top: 1px solid rgba(255,255,255,0.06);
}
.agenda-row {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 24px; align-items: center;
padding: 20px 32px;
border-bottom: 1px solid rgba(255,255,255,0.06);
text-decoration: none; color: #fff;
transition: background .15s ease;
}
.agenda-row:hover { background: rgba(255,255,255,0.04); }
.agenda-row .modalidade-badge {
font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
padding: 4px 10px; border-radius: 999px; text-transform: uppercase;
white-space: nowrap;
}
.modalidade-badge.presencial { background: var(--c-yellow); color: var(--c-text-dark); }
.modalidade-badge.online { background: var(--c-royal); color: #fff; }
.modalidade-badge.hibrido { background: var(--c-teal); color: #fff; }
.agenda-row h5 {
font-size: 16px; font-weight: 700; color: #fff; margin: 0;
letter-spacing: -0.010em; line-height: 1.3;
}
.agenda-row .meta { font-size: 13.5px; color: rgba(255,255,255,0.65); white-space: nowrap; }
.agenda-row .action {
font-size: 13.5px; color: var(--c-yellow); font-weight: 700;
white-space: nowrap;
}
.agenda-row .action::after { content: " →"; }
.agenda-foot {
max-width: 1280px; margin: 0 auto;
padding: 32px 32px;
font-size: 13px; color: rgba(255,255,255,0.7); text-align: center;
line-height: 1.7;
}
.agenda-foot strong { color: var(--c-yellow); font-weight: 700; }
.agenda-foot em { color: var(--c-pink-400); font-style: normal; font-weight: 700; }
/* 7 — 4 MODALIDADES */
.modalidades-sec { background: transparent; padding: 88px 32px; }
.modalidades-sec > .sec-eyebrow,
.modalidades-sec > .sec-title,
.modalidades-sec > .sec-lead {
max-width: 1280px; margin-left: auto; margin-right: auto;
}
.mod-grid {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.mod-card {
background: #fff; border: 1px solid var(--c-border); border-radius: 16px;
padding: 28px 24px; display: flex; flex-direction: column; gap: 8px;
transition: transform .15s ease, box-shadow .15s ease;
}
.mod-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mod-card .icon {
color: var(--mod-color);
display: flex; align-items: center; justify-content: flex-start;
margin-bottom: 8px;
}
.mod-card .icon svg { width: 36px; height: 36px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Tetrádica oficial brand-book §6 */
.mod-card.presencial { --mod-color: var(--c-red-deep); }
.mod-card.online { --mod-color: var(--c-navy); }
.mod-card.hibrido { --mod-color: var(--c-teal); }
.mod-card.in-company { --mod-color: var(--c-dourado); }
.mod-card h4 {
font-size: 15px; font-weight: 800; color: var(--c-text-dark); margin: 0;
letter-spacing: -0.010em;
}
.mod-card p {
font-size: 13px; color: var(--c-muted); margin: 0; line-height: 1.5;
}
/* 8 — DIFERENCIAIS (6 cards em 3x2) */
.diferenciais { background-color: var(--c-navy); color: #fff; padding: 88px 32px 96px; }
.diferenciais > .sec-eyebrow,
.diferenciais > .sec-title,
.diferenciais > .sec-lead {
max-width: 1280px; margin-left: auto; margin-right: auto;
}
.dif-grid {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.dif-card {
position: relative; overflow: hidden;
background: linear-gradient(135deg, var(--df-c1) 0%, var(--df-c2) 100%);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 16px; padding: 28px;
box-shadow: 0 12px 28px rgba(0,0,0,0.22);
transition: transform .15s ease, box-shadow .15s ease;
}
.dif-card::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(circle at 18% 12%, rgba(255,255,255,0.10), transparent 55%);
}
.dif-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(0,0,0,0.32); }
.dif-card > * { position: relative; z-index: 1; }
.dif-card.df1 { --df-c1: var(--c-royal); --df-c2: #0c1a3a; }
.dif-card.df2 { --df-c1: var(--c-pink-400); --df-c2: #4d0a2c; }
.dif-card.df3 { --df-c1: var(--c-teal); --df-c2: #0a2a3a; }
.dif-card.df4 { --df-c1: #b8860b; --df-c2: #4d2a0a; }
.dif-card.df5 { --df-c1: #8b1a3c; --df-c2: #2a0a18; }
.dif-card.df6 { --df-c1: #1a3a4a; --df-c2: #0a1a28; }
.dif-card .num-and-cat {
display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
}
.dif-card .num { color: var(--c-yellow); font-weight: 800; font-size: 12px; }
.dif-card .cat { color: rgba(255,255,255,0.85); font-weight: 700; }
.dif-card h4 {
font-size: 18px; font-weight: 800; color: #fff; margin: 0 0 8px;
letter-spacing: -0.010em; line-height: 1.25;
}
.dif-card p {
font-size: 13.5px; color: rgba(255,255,255,0.88); margin: 0; line-height: 1.55;
}
/* 9 — HISTÓRIAS (Google reviews ao vivo) */
.historias { background-color: var(--c-navy-200); color: #fff; padding: 88px 32px 96px; }
.historias > .sec-eyebrow,
.historias > .sec-title,
.historias > .sec-lead {
max-width: 1280px; margin-left: auto; margin-right: auto;
}
.historias-head { max-width: 1280px; margin: 0 auto 36px; }
.google-live {
display: inline-flex; align-items: center; gap: 10px;
background: rgba(66,133,244,0.12);
border: 1px solid rgba(66,133,244,0.40);
padding: 7px 16px; border-radius: 999px;
margin-bottom: 16px;
}
.live-dot {
width: 10px; height: 10px; border-radius: 50%;
background: #22c55e; flex-shrink: 0;
animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}
.live-label {
font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em;
text-transform: uppercase; color: #fff;
}
.google-rating {
display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
margin-top: 10px;
}
.rating-num {
font-size: 56px; font-weight: 900; color: var(--c-yellow);
letter-spacing: -0.02em; line-height: 1;
}
.rating-stars { color: var(--c-yellow); font-size: 22px; letter-spacing: 3px; }
.rating-meta { font-size: 14px; color: rgba(255,255,255,0.78); width: 100%; }
.rating-meta strong { color: #fff; font-weight: 700; }
.google-cta {
display: inline-flex; margin: 28px auto 0;
max-width: 1280px; width: 100%;
color: var(--c-yellow); font-size: 15px; font-weight: 700;
text-decoration: none; align-items: center;
}
.google-cta:hover { text-decoration: underline; }
.hist-grid {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.hist-card {
background: var(--c-navy);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px; padding: 28px;
display: flex; flex-direction: column;
}
.hist-card .stars { color: var(--c-yellow); font-size: 14px; letter-spacing: 1.5px; margin-bottom: 12px; }
.hist-card .quote {
font-size: 14.5px; color: rgba(255,255,255,0.92);
line-height: 1.6; margin: 0 0 18px; flex: 1;
}
.hist-card .person { display: flex; align-items: center; gap: 12px; }
.hist-card .photo {
width: 48px; height: 48px; border-radius: 50%;
border: 2px solid var(--c-yellow);
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 14px; letter-spacing: 0.4px;
flex-shrink: 0;
}
.hist-card .photo[data-pair="A"] { background: var(--c-royal); }
.hist-card .photo[data-pair="B"] { background: var(--c-pink-400); }
.hist-card .photo[data-pair="C"] { background: var(--c-teal); }
.hist-card .person-info { font-size: 13px; line-height: 1.35; }
.hist-card .person-info strong {
display: block; color: var(--c-yellow);
font-weight: 800; font-size: 14px;
}
.hist-card .person-info span { color: rgba(255,255,255,0.65); }
/* 10 — IN-COMPANY B2B (carrossel automático 4-up) */
.incompany-b2b { background-color: var(--c-navy); color: #fff; padding: 88px 32px 88px; }
.incompany-b2b > .sec-eyebrow,
.incompany-b2b > .sec-title,
.incompany-b2b > .sec-lead {
max-width: 1280px; margin-left: auto; margin-right: auto;
}
.incompany-marquee {
max-width: 1280px; margin: 44px auto 0;
overflow: hidden; position: relative;
mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.incompany-track {
display: flex; gap: 24px; width: max-content;
animation: incompany-scroll 36s linear infinite;
}
.incompany-marquee:hover .incompany-track { animation-play-state: paused; }
@keyframes incompany-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.incompany-track .logo-cell {
flex-shrink: 0;
width: calc((1280px - 24px * 3) / 4);
max-width: 300px;
height: 130px;
background: #fff; border-radius: 16px;
display: flex; align-items: center; justify-content: center;
padding: 20px 28px;
font-size: 16px; font-weight: 800; color: var(--c-navy);
letter-spacing: 0.02em;
box-shadow: 0 12px 28px rgba(0,0,0,0.20);
}
.incompany-track .logo-cell picture {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
}
.incompany-track .logo-cell img {
max-width: 100%; max-height: 100%; object-fit: contain;
}
.incompany-cta { text-align: center; margin-top: 36px; }
/* 11 — RESTAURANTES PARCEIROS (6 fotos em linha) */
/* 11 — RESTAURANTES PARCEIROS · carrossel auto */
.restaurantes { background: #fff; color: var(--c-grafite); padding: 88px 32px; }
.restaurantes > .sec-title,
.restaurantes > .sec-lead {
max-width: 1280px; margin-left: auto; margin-right: auto;
}
.restaurantes .sec-title { color: var(--c-navy); }
.restaurantes .sec-lead { color: var(--c-grafite); margin-bottom: 32px; }
.resto-carousel {
max-width: 1280px; margin: 0 auto;
position: relative; overflow: hidden; width: 100%;
}
.resto-track { display: flex; gap: 16px; will-change: transform; }
.resto-card {
flex: 0 0 calc((100% - 80px) / 6);
position: relative; aspect-ratio: 4 / 3;
border-radius: 12px; overflow: hidden;
background: linear-gradient(135deg, var(--rc1) 0%, var(--rc2) 100%);
border: 1px solid rgba(0,0,0,0.06);
}
.resto-card.r1 { --rc1: var(--c-royal); --rc2: #0c1a3a; }
.resto-card.r2 { --rc1: var(--c-pink-400); --rc2: #4d0a2c; }
.resto-card.r3 { --rc1: var(--c-teal); --rc2: #0a2a3a; }
.resto-card.r4 { --rc1: #b8860b; --rc2: #4d2a0a; }
.resto-card.r5 { --rc1: #8b1a3c; --rc2: #2a0a18; }
.resto-card.r6 { --rc1: #1a3a4a; --rc2: #0a1a28; }
.resto-card::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,0.10), transparent 50%),
linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55) 100%);
}
.resto-card .icon-cutlery {
position: absolute; top: 16px; right: 16px;
width: 24px; height: 24px;
color: rgba(255,255,255,0.55); z-index: 1;
}
.resto-name {
position: absolute; left: 14px; right: 14px; bottom: 38px;
color: #fff; font-size: 14px; font-weight: 700; z-index: 1;
text-shadow: 0 1px 4px rgba(0,0,0,0.5); line-height: 1.25;
letter-spacing: -0.010em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.resto-address {
position: absolute; left: 14px; right: 14px; bottom: 12px;
color: rgba(255,255,255,0.88); font-size: 11.5px; font-weight: 500;
z-index: 1; line-height: 1.25; text-shadow: 0 1px 3px rgba(0,0,0,0.6);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
/* 12 — FAQ */
.faq { background: var(--c-navy-100); color: #fff; padding: 88px 32px 96px; }
.faq > .sec-eyebrow,
.faq > .sec-title {
max-width: 800px; margin-left: auto; margin-right: auto;
}
.faq-list {
max-width: 800px; margin: 0 auto;
display: flex; flex-direction: column; gap: 8px;
}
.faq-item {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px; overflow: hidden;
}
.faq-item summary {
list-style: none; cursor: pointer;
padding: 18px 24px; font-size: 15.5px; font-weight: 700; color: #fff;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+"; color: var(--c-yellow); font-size: 28px; font-weight: 400;
line-height: 1; transition: transform .2s ease; flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] { border-color: var(--c-yellow); background: rgba(255,255,255,0.06); }
.faq-item .answer {
padding: 0 24px 18px; font-size: 14px;
color: rgba(255,255,255,0.78); line-height: 1.6;
}
/* 13 — CTA FINAL */
.cta-final-sec {
background: linear-gradient(135deg, var(--c-navy-300) 0%, var(--c-royal) 100%);
color: #fff; padding: 96px 32px;
position: relative; overflow: hidden;
}
.cta-final-sec::after {
content: ""; position: absolute; top: -120px; right: -150px;
width: 380px; height: 380px; border-radius: 50%;
background: rgba(255,255,255,0.06); pointer-events: none;
}
.cta-final-sec .inner {
max-width: 1280px; margin: 0 auto;
position: relative; z-index: 1;
}
.cta-final-sec .eyebrow-line {
font-size: 11px; color: var(--c-yellow); font-weight: 800;
letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 16px;
}
.cta-final-sec h2 {
font-size: 44px; font-weight: 800; color: #fff;
letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 16px;
max-width: 760px;
}
.cta-final-sec p {
font-size: 17px; color: rgba(255,255,255,0.88); margin: 0 0 28px;
line-height: 1.55; max-width: 640px;
}
.cta-final-sec .ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-final-sec .ctas .btn { height: 54px; font-size: 15px; padding: 0 28px; }
/* 14 — CONTATO (form + endereços lado a lado) */
.contato-sec {
background-color: var(--c-navy); color: #fff; padding: 96px 32px;
}
.contato-grid {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
align-items: start;
}
/* eyebrow do contato unificado em .sec-eyebrow (era .eyebrow-line distoante) — 2026-05-03 */
.contato-block h2 {
font-size: 34px; font-weight: 800; color: #fff;
letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 26px;
}
.contato-form .form-fields { display: flex; flex-direction: column; gap: 14px; }
.contato-form .field label {
display: block; font-size: 12.5px; color: rgba(255,255,255,0.78);
margin-bottom: 6px; font-weight: 600;
}
.contato-form .field input,
.contato-form .field textarea {
width: 100%; background: rgba(255,255,255,0.08); color: #fff;
border: 1px solid rgba(255,255,255,0.16); border-radius: 24px;
padding: 14px 22px; font-size: 14.5px; font-family: inherit;
outline: 2px solid transparent;
transition: outline-color .15s ease, border-color .15s ease, background .15s ease;
}
.contato-form .field input::placeholder,
.contato-form .field textarea::placeholder { color: rgba(255,255,255,0.45); }
.contato-form .field input:focus,
.contato-form .field textarea:focus { outline-color: var(--c-yellow); }
.contato-form .field textarea { min-height: 96px; resize: vertical; border-radius: 18px; }
.contato-form button {
margin-top: 8px; width: 100%; height: 54px;
background: var(--c-pink-600); color: #fff; border: 0;
border-radius: 24px;
font-weight: 800; font-size: 15px; letter-spacing: 0.02em;
box-shadow: 0 10px 26px rgba(207,2,152,0.34);
cursor: pointer; transition: background .15s ease;
font-family: inherit;
}
.contato-form button:hover { background: var(--c-pink-800); }
.enderecos { display: flex; flex-direction: column; gap: 22px; }
.endereco h4 {
font-size: 17px; color: #fff; font-weight: 700; margin: 0 0 6px;
letter-spacing: -0.010em;
}
.endereco p { font-size: 14px; color: rgba(255,255,255,0.78); margin: 0; line-height: 1.55; }
.contato-links { display: flex; flex-direction: column; gap: 4px; margin-top: 28px; }
.contato-links a {
display: flex; align-items: center; gap: 14px;
color: #fff; text-decoration: none;
font-size: 14.5px; padding: 9px 0;
transition: color .15s ease;
}
.contato-links svg { width: 20px; height: 20px; fill: var(--c-yellow) !important; flex-shrink: 0; }
.contato-links svg path { fill: var(--c-yellow) !important; }
.contato-links a:hover { color: var(--c-yellow); }
/* 15 — OUTRAS MARCAS DO GRUPO */
.outras-marcas {
background: linear-gradient(135deg, var(--c-royal) 0%, var(--c-navy-400) 100%);
color: #fff; padding: 96px 32px;
}
.outras-marcas-head {
max-width: 1280px; margin: 0 auto 36px;
}
.outras-marcas-head .sec-eyebrow { color: var(--c-yellow); }
.outras-marcas .grupo-brand {
max-width: 1280px; margin: 0 auto;
text-align: center;
padding-bottom: 40px; margin-bottom: 40px;
border-bottom: 1px solid rgba(255,255,255,0.18);
}
.outras-marcas .grupo-brand img {
max-width: 280px; height: auto; margin: 0 auto; display: block;
filter: brightness(0) invert(1);
}
.outras-marcas .grupo-brand .social-row {
display: flex; gap: 12px; justify-content: center; margin-top: 22px;
}
.outras-marcas .grupo-brand .social-row a {
width: 42px; height: 42px; border-radius: 50%;
background: rgba(255,255,255,0.95); color: var(--c-royal);
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s ease, transform .15s ease;
}
.outras-marcas .grupo-brand .social-row a:hover { background: var(--c-yellow); transform: translateY(-2px); }
.outras-marcas .grupo-brand .social-row svg { width: 18px; height: 18px; fill: currentColor; }
.outras-marcas-grid {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.outras-marca-card {
display: flex; align-items: center; gap: 18px;
padding: 24px 26px;
text-decoration: none; color: #fff;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 14px;
transition: background .15s ease;
}
.outras-marca-card:hover { background: rgba(255,255,255,0.08); }
.outras-marca-card .label {
flex: 1;
font-size: 14px; line-height: 1.45; color: rgba(255,255,255,0.92);
font-weight: 600;
}
.outras-marca-card .label strong { display: block; font-weight: 800; color: #fff; margin-bottom: 4px; font-size: 15px; }
.outras-marca-card .logo-side {
flex-shrink: 0;
width: 180px; height: 72px;
display: flex; align-items: center; justify-content: center;
}
.outras-marca-card .logo-side img {
max-width: 100%; max-height: 60px; height: auto;
filter: brightness(0) invert(1);
}
.outras-marca-card[href*="gestorpop"] .logo-side {
background: none; border-radius: 0; padding: 0;
width: 200px; height: 200px;
}
.outras-marca-card[href*="gestorpop"] .logo-side img {
filter: none; width: 200px; height: 200px; max-width: none; max-height: none; object-fit: contain;
}
/* 16 — FOOTER INSTITUCIONAL */
.site-footer-new {
background: var(--c-navy-100);
color: rgba(255,255,255,0.78);
padding: 72px 32px 32px;
font-size: 13.5px;
}
.footer-grid {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px;
padding-bottom: 36px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .footer-logo img {
max-width: 180px; height: auto; display: block;
}
.footer-brand .footer-tagline {
font-size: 10px; color: var(--c-yellow);
letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
margin-top: 12px;
}
.footer-brand p {
font-size: 12.5px; color: rgba(255,255,255,0.55);
margin-top: 14px; line-height: 1.55;
}
.footer-col h5 {
font-size: 11px; color: var(--c-yellow);
letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
margin: 0 0 14px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-col a, .footer-col span {
font-size: 13.5px; color: rgba(255,255,255,0.78); text-decoration: none;
display: inline-block; line-height: 1.4;
transition: color .15s ease;
}
.footer-col a:hover { color: var(--c-yellow); }
.footer-bottom {
max-width: 1280px; margin: 0 auto;
padding-top: 28px;
display: flex; flex-direction: row; justify-content: space-between; align-items: center;
gap: 16px;
font-size: 12.5px; color: rgba(255,255,255,0.5);
}
.footer-bottom .social-mini { display: flex; gap: 10px; }
.footer-bottom .social-mini a {
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.78);
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s ease, color .15s ease;
}
.footer-bottom .social-mini a:hover { background: var(--c-yellow); color: var(--c-text-dark); }
.footer-bottom .social-mini svg { width: 16px; height: 16px; fill: currentColor; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; font-size: 12.5px; flex: 1; }
.footer-legal a {
color: rgba(255,255,255,0.55); text-decoration: none;
transition: color .15s ease;
}
.footer-legal a:hover { color: var(--c-yellow); }
/* LGPD: cookie banner */
.cookie-banner {
position: fixed; bottom: 24px; left: 24px; right: 24px;
z-index: 9999; max-width: 1280px; margin: 0 auto;
background: rgba(8,14,55,0.97);
border: 1px solid rgba(250,196,2,0.45); border-radius: 16px;
padding: 24px 28px;
box-shadow: 0 18px 48px rgba(0,0,0,0.55);
display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
backdrop-filter: blur(10px);
}
.cookie-icon {
width: 44px; height: 44px; flex-shrink: 0;
background: rgba(250,196,2,0.16); border-radius: 12px;
display: flex; align-items: center; justify-content: center;
color: var(--c-yellow);
}
.cookie-icon svg { width: 24px; height: 24px; }
.cookie-text {
font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.92);
}
.cookie-text strong {
color: var(--c-yellow); display: block;
font-size: 15px; margin-bottom: 4px; letter-spacing: -0.005em;
}
.cookie-text a { color: var(--c-yellow); text-decoration: underline; font-weight: 600; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn {
padding: 12px 24px; border-radius: 999px;
font-weight: 700; font-size: 13.5px; cursor: pointer;
border: 1px solid transparent; font-family: inherit;
transition: opacity .15s ease, background .15s ease;
white-space: nowrap;
}
.cookie-btn:hover { opacity: 0.88; }
.cookie-decline {
background: transparent; color: #fff;
border-color: rgba(255,255,255,0.30);
}
.cookie-decline:hover { background: rgba(255,255,255,0.08); }
.cookie-accept {
background: var(--c-yellow); color: var(--c-text-dark);
}
}
/* ============================================================
SEÇÃO 6 — OVERRIDES-TABLET
Origem: css/overrides-tablet.css
============================================================ */
/* === Override tablet ajuste fino (768-1023px) ===
Gerado de tablet.html (intocavel).
Regras de mock-frame (.device, body bg #0a0726) removidas.
Embrulhado em media query para isolamento de cascade.
*/
@media (min-width: 768px) and (max-width: 1023px) {
/* ======= HEADER — força nav visível a 768px (override do breakpoint do clone2 em 960) ======= */
.site-header { position: sticky; top: 0; z-index: 100; }
.site-header .container {
padding: 14px 24px;
min-height: 68px;
gap: 20px;
}
.site-logo img { max-width: 150px; }
@media (min-width: 760px) and (max-width: 1023px) {
.menu-toggle { display: none; }
.main-nav {
position: static;
display: block;
padding: 0;
background: transparent;
box-shadow: none;
}
.main-nav ul {
flex-direction: row;
gap: 18px;
align-items: center;
}
.main-nav a { font-size: 14px; }
.main-nav a.btn-cta { font-size: 13px; padding: 8px 18px !important; }
}
/* ======= NAVBAR — single-row com tudo integrado ======= */
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 24px;
min-height: 60px;
gap: 12px;
}
.header-right {
display: flex;
align-items: center;
gap: 14px;
}
.header-right .btn-cta {
padding: 9px 20px;
font-size: 13px;
font-weight: 700;
}
.header-phone {
color: var(--c-white);
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13.5px;
font-weight: 700;
text-decoration: none;
}
.header-phone:hover { color: var(--c-yellow); }
.header-phone svg { width: 15px; height: 15px; flex-shrink: 0; fill: var(--c-yellow); }
.header-social { display: flex; gap: 2px; align-items: center; }
.header-social a {
color: var(--c-white);
opacity: 0.9;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
}
.header-social a:hover { opacity: 1; background: rgba(255,255,255,0.1); }
.header-social svg { width: 14px; height: 14px; fill: currentColor; }
/* ======= HERO — slideshow 5 fotos + overlay gradient ======= */
.hero {
position: relative;
padding: 44px 0 56px;
overflow: hidden;
background: var(--c-header-dark);
min-height: 620px;
}
.hero-slideshow {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero-slide {
position: absolute;
inset: 0;
background-size: cover;
transform: translateX(100%);
animation: hero-push 35s infinite;
animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
animation-fill-mode: both;
will-change: transform;
}
.hero-slide:nth-child(1) { animation-delay: -1s; }
.hero-slide:nth-child(2) { animation-delay: 6s; }
.hero-slide:nth-child(3) { animation-delay: 13s; }
.hero-slide:nth-child(4) { animation-delay: 20s; }
.hero-slide:nth-child(5) { animation-delay: 27s; }
/* Slide 1 (LCP) usa ![]()
com fetchpriority="high" no HTML. */
.hero-slide-img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
@keyframes hero-push {
0% { transform: translateX(100%); }
3% { transform: translateX(0); }
20% { transform: translateX(0); }
23% { transform: translateX(-100%); }
100% { transform: translateX(-100%); }
}
/* Overlay diagonal (coerente com desktop) — text à esquerda/topo no portrait;
à esquerda no landscape. Fica mais leve no canto oposto, deixa foto respirar. */
.hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(100deg,
rgba(1,3,74,0.90) 0%,
rgba(1,3,74,0.75) 35%,
rgba(2,6,120,0.50) 70%,
rgba(2,6,120,0.20) 100%);
pointer-events: none;
}
.hero .container {
position: relative;
z-index: 2;
padding: 0 32px;
}
.hero-content {
display: flex;
flex-direction: column;
gap: 22px;
max-width: 620px;
}
/* ======= Headline ======= */
.hero-title {
font-size: 2.2rem;
line-height: 1.12;
margin: 0;
max-width: 580px;
color: var(--c-white);
}
/* ======= Modalidades ======= */
.modalidades {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.modalidade {
font-size: 13px;
font-weight: 600;
padding: 7px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.24);
color: var(--c-white);
}
.modalidade--live::before {
content: "";
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--c-yellow);
margin-right: 7px;
vertical-align: middle;
}
/* ======= Trust strip 1 linha ======= */
.hero-trust {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 18px;
background: rgba(0,0,0,0.3);
border-radius: var(--radius-md);
border: 1px solid rgba(255,255,255,0.1);
max-width: 560px;
flex-wrap: wrap;
margin: 0;
opacity: 1;
font-size: 13.5px;
color: rgba(255,255,255,0.9);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 6px; opacity: 1; font-size: 13.5px; }
.hero-trust span::before { content: none; }
.hero-trust .stars {
color: var(--c-yellow);
letter-spacing: 1.5px;
font-size: 13.5px;
}
.hero-trust strong {
color: var(--c-yellow);
font-weight: 800;
font-size: 16px;
}
.hero-trust .sep { color: rgba(255,255,255,0.3); }
/* ======= Brand frame (mesmo styling do desktop, reduzido) ======= */
.brand-bubble {
width: 100%;
max-width: 340px;
margin: 0;
aspect-ratio: 2 / 1;
background:
url("../assets/logo%20para%20fundo%20claro%20com%20fundo%20transparente.png") center/auto 60% no-repeat,
#ffffff;
border-radius: 26px;
box-shadow: 0 10px 24px rgba(1,3,40,0.28);
opacity: 0;
animation:
brand-enter 1.2s cubic-bezier(0.22, 0.8, 0.3, 1) 0.5s forwards,
brand-float 5s ease-in-out 1.8s infinite;
}
@keyframes brand-enter {
from { opacity: 0; transform: translateY(28px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes brand-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* Inline (portrait 768): aparece entre h1 e pills */
.brand-bubble--inline { display: block; }
.brand-bubble--side { display: none; }
/* ======= Landscape 1024+: 2-col com brand à direita ======= */
@media (min-width: 1024px) {
.hero .container {
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: 44px;
align-items: center;
max-width: 980px;
}
.hero-content { max-width: none; }
.brand-bubble--inline { display: none; }
.brand-bubble--side {
display: block;
max-width: none;
width: 100%;
align-self: center;
}
}
/* ======= CTAs lado a lado ======= */
.hero-cta {
display: flex;
gap: 12px;
margin: 0;
flex-wrap: wrap;
}
.hero-cta .btn {
font-size: 14.5px;
padding: 0 24px;
height: 50px;
}
.btn-whatsapp {
background: transparent;
color: var(--c-white);
border-color: var(--c-whatsapp);
}
.btn-whatsapp:hover {
background: var(--c-whatsapp);
border-color: var(--c-whatsapp);
color: var(--c-white);
}
.btn-whatsapp svg { flex-shrink: 0; }
/* hierarquia: primário levemente reduzido, secundário mais discreto */
.hero-cta .btn-cta.btn-lg { padding: 12px 24px; font-size: 14.5px; }
.hero-cta .btn-whatsapp.btn-lg { padding: 10px 20px; font-size: 13.5px; font-weight: 700; }
/* =========================================================
SEÇÕES POST-HERO — home completa (importadas de mobile-2.html)
Adaptadas para viewport tablet 768px
========================================================= */
.sec { padding: 40px 28px; }
/* Eyebrow CAPS canônico brand-book §7: 11px / +0.08em / 700 / uppercase / line-height 1.3 */
.sec-eyebrow {
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--c-yellow); font-weight: 700; margin: 0 0 8px; line-height: 1.3;
}
.sec-eyebrow.dark { color: var(--c-royal); }
.sec-title {
font-size: 28px; line-height: 1.12; letter-spacing: -0.018em;
font-weight: 800; color: var(--c-text-dark); margin: 0 0 8px;
}
.sec-title.light { color: #fff; }
.sec-lead {
font-size: 15px; color: var(--c-muted); line-height: 1.55; margin: 0 0 24px;
max-width: 620px;
}
.sec-lead.light { color: rgba(255,255,255,0.78); }
/* 4 — TRUST BIG (4 números em linha em tablet) */
.trust-big {
background-image: url('/assets/img/roda-watermark.svg'), linear-gradient(135deg, var(--c-navy-300) 0%, var(--c-navy-500) 100%);
background-size: 120vw 120vw, 100% 100%;
background-repeat: repeat, no-repeat;
color: #fff; padding: 40px 28px;
}
.trust-big-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.trust-big-item .num {
font-size: 36px; line-height: 1; font-weight: 800;
color: #fff; letter-spacing: -0.022em;
}
.trust-big-item .label {
font-size: 12px; color: rgba(255,255,255,0.78);
margin-top: 8px; line-height: 1.4;
}
.trust-big-item .label strong { color: #fff; font-weight: 700; }
.trust-big-item .label .star { color: var(--c-yellow); margin-right: 2px; }
.trust-big-item .label a {
color: var(--c-yellow); text-decoration: none; font-weight: 700;
border-bottom: 1px solid rgba(250,196,2,0.4);
}
/* 5 — CATEGORIAS-ÂNCORA (3 cards photo-cover em tablet 768) */
.cat-anchors { background-color: var(--c-navy); padding: 44px 28px 48px; }
.cat-anchors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cat-card-big {
position: relative; overflow: hidden;
border-radius: 16px;
display: flex; flex-direction: column;
text-decoration: none; color: #fff;
transition: transform .15s ease, box-shadow .15s ease;
min-height: 320px;
background-color: var(--cat-tone);
}
.cat-card-big:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,0.28); }
.cat-card-big .cat-photo {
position: absolute; inset: 0;
background-size: cover; background-position: center 35%;
z-index: 0;
}
.cat-card-big::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg,
var(--cat-shade-light) 0%,
var(--cat-shade) 60%,
var(--cat-shade-deep) 100%);
z-index: 1; pointer-events: none;
}
/* Cores derivadas via style inline (CMS-driven). Classes mantidas só para --cat-dot legado. */
.cat-card-big { --cat-dot: var(--c-yellow); }
.cat-card-big.dp { --cat-dot: var(--c-pink-600); }
.cat-card-body {
position: relative; z-index: 2;
padding: 22px; display: flex; flex-direction: column; gap: 8px;
margin-top: auto;
}
.cat-card-big .cat-eyebrow {
display: flex; align-items: flex-start; gap: 6px;
font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(255,255,255,0.92); font-weight: 700;
margin: 0; line-height: 1.4;
}
.cat-card-big .cat-eyebrow::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--cat-dot); flex-shrink: 0; margin-top: 4px;
}
.cat-card-big h3 {
font-size: 19px; line-height: 1.15; letter-spacing: -0.014em;
font-weight: 800; color: #fff; margin: 0;
}
.cat-card-big p {
font-size: 12.5px; color: rgba(255,255,255,0.85); margin: 0; line-height: 1.5;
}
.cat-pills {
display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px;
}
.cat-pills .cat-pill {
font-size: 10px; padding: 3px 8px; border-radius: 999px;
background: var(--c-yellow); color: var(--c-navy);
border: none;
letter-spacing: 0.02em; font-weight: 700;
text-decoration: none;
position: relative; z-index: 1;
transition: background .15s ease, transform .1s ease;
}
.cat-pills .cat-pill:hover { background: #fff; transform: translateY(-1px); }
.cat-title-link { color: inherit; text-decoration: none; }
.cat-title-link:hover { text-decoration: underline; }
.cat-card-foot {
margin-top: 8px; padding-top: 8px;
border-top: 1px solid rgba(255,255,255,0.18);
}
.cat-card-foot .count { font-size: 10.5px; color: rgba(255,255,255,0.78); font-weight: 600; }
/* 6 — AGENDA / PRÓXIMAS TURMAS */
.agenda { background-color: var(--c-navy-100); color: #fff; padding: 44px 0 20px; }
.agenda > .head { padding: 0 28px; }
.agenda-filters {
display: flex; gap: 8px; overflow-x: auto;
padding: 8px 28px 18px; scrollbar-width: none;
}
.agenda-filters::-webkit-scrollbar { display: none; }
.agenda-filters .pill {
background: rgba(255,255,255,0.08); color: #fff;
border: 1px solid rgba(255,255,255,0.14);
padding: 8px 16px; border-radius: 999px;
font-size: 13px; font-weight: 600; white-space: nowrap;
flex-shrink: 0; cursor: pointer; font-family: inherit;
}
.agenda-filters .pill.active {
background: var(--c-yellow); color: var(--c-text-dark); border-color: var(--c-yellow);
}
.agenda-list {
display: flex; flex-direction: column;
border-top: 1px solid rgba(255,255,255,0.06);
}
.agenda-row {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 16px; align-items: center;
padding: 16px 28px;
border-bottom: 1px solid rgba(255,255,255,0.06);
text-decoration: none; color: #fff;
transition: background .15s ease;
}
.agenda-row:hover { background: rgba(255,255,255,0.03); }
.agenda-row .modalidade-badge {
font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em;
padding: 3px 9px; border-radius: 999px; text-transform: uppercase;
white-space: nowrap;
}
.modalidade-badge.presencial { background: var(--c-yellow); color: var(--c-text-dark); }
.modalidade-badge.online { background: var(--c-royal); color: #fff; }
.modalidade-badge.hibrido { background: var(--c-teal); color: #fff; }
.agenda-row h5 {
font-size: 15px; font-weight: 700; color: #fff; margin: 0;
letter-spacing: -0.010em; line-height: 1.3;
}
.agenda-row .meta { font-size: 12.5px; color: rgba(255,255,255,0.65); white-space: nowrap; }
.agenda-row .action {
font-size: 13px; color: var(--c-yellow); font-weight: 700;
white-space: nowrap;
}
.agenda-row .action::after { content: " →"; }
.agenda-foot {
padding: 22px 28px;
font-size: 12.5px; color: rgba(255,255,255,0.7); text-align: center;
line-height: 1.7;
}
.agenda-foot strong { color: var(--c-yellow); font-weight: 700; }
.agenda-foot em { color: var(--c-pink-400); font-style: normal; font-weight: 700; }
/* 7 — 4 MODALIDADES (4 cards em linha em tablet) */
.modalidades-sec { background: transparent; padding: 44px 28px; }
.mod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mod-card {
background: #fff; border: 1px solid var(--c-border); border-radius: 14px;
padding: 18px 14px; display: flex; flex-direction: column; gap: 6px;
transition: transform .15s ease, box-shadow .15s ease;
}
.mod-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mod-card .icon {
color: var(--mod-color);
display: flex; align-items: center; justify-content: flex-start;
margin-bottom: 6px;
}
.mod-card .icon svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Tetrádica oficial brand-book §6 */
.mod-card.presencial { --mod-color: var(--c-red-deep); }
.mod-card.online { --mod-color: var(--c-navy); }
.mod-card.hibrido { --mod-color: var(--c-teal); }
.mod-card.in-company { --mod-color: var(--c-dourado); }
.mod-card h4 {
font-size: 13.5px; font-weight: 800; color: var(--c-pink-600); margin: 0;
letter-spacing: -0.010em;
}
.mod-card p {
font-size: 11.5px; color: var(--c-muted); margin: 0; line-height: 1.45;
}
/* 8 — DIFERENCIAIS (6 caixinhas brand 3-col em tablet) */
.diferenciais { background-color: var(--c-navy); color: #fff; padding: 44px 28px 48px; }
.dif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dif-card {
position: relative; overflow: hidden;
background: linear-gradient(135deg, var(--df-c1) 0%, var(--df-c2) 100%);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 14px; padding: 20px;
box-shadow: 0 8px 22px rgba(0,0,0,0.20);
}
.dif-card::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.10), transparent 55%);
}
.dif-card > * { position: relative; z-index: 1; }
.dif-card.df1 { --df-c1: var(--c-royal); --df-c2: #0c1a3a; }
.dif-card.df2 { --df-c1: var(--c-pink-400); --df-c2: #4d0a2c; }
.dif-card.df3 { --df-c1: var(--c-teal); --df-c2: #0a2a3a; }
.dif-card.df4 { --df-c1: #b8860b; --df-c2: #4d2a0a; }
.dif-card.df5 { --df-c1: #8b1a3c; --df-c2: #2a0a18; }
.dif-card.df6 { --df-c1: #1a3a4a; --df-c2: #0a1a28; }
.dif-card .num-and-cat {
display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
}
.dif-card .num { color: var(--c-yellow); font-weight: 800; font-size: 11px; }
.dif-card .cat { color: rgba(255,255,255,0.85); font-weight: 700; }
.dif-card h4 {
font-size: 15px; font-weight: 800; color: #fff; margin: 0 0 6px;
letter-spacing: -0.010em; line-height: 1.25;
}
.dif-card p {
font-size: 12.5px; color: rgba(255,255,255,0.88); margin: 0; line-height: 1.5;
}
/* 9 — HISTÓRIAS (3 testemunhos em linha em tablet) */
.historias { background-color: var(--c-navy-200); color: #fff; padding: 44px 28px 48px; }
.historias-head { margin-bottom: 24px; }
.google-live {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(66,133,244,0.12);
border: 1px solid rgba(66,133,244,0.40);
padding: 6px 14px; border-radius: 999px;
margin-bottom: 14px;
}
.live-dot {
width: 9px; height: 9px; border-radius: 50%;
background: #22c55e; flex-shrink: 0;
animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
50% { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
}
.live-label {
font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
text-transform: uppercase; color: #fff;
}
.google-rating {
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
margin-top: 8px;
}
.rating-num {
font-size: 40px; font-weight: 900; color: var(--c-yellow);
letter-spacing: -0.02em; line-height: 1;
}
.rating-stars { color: var(--c-yellow); font-size: 18px; letter-spacing: 2px; }
.rating-meta { font-size: 13px; color: rgba(255,255,255,0.78); width: 100%; }
.rating-meta strong { color: #fff; font-weight: 700; }
.google-cta {
display: inline-flex; margin-top: 22px;
color: var(--c-yellow); font-size: 14px; font-weight: 700;
text-decoration: none;
}
.google-cta:hover { text-decoration: underline; }
.hist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hist-card {
background: var(--c-navy);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px; padding: 18px;
display: flex; flex-direction: column;
}
.hist-card .stars { color: var(--c-yellow); font-size: 12.5px; letter-spacing: 1.5px; margin-bottom: 10px; }
.hist-card .quote {
font-size: 13px; color: rgba(255,255,255,0.92);
line-height: 1.55; margin: 0 0 14px; flex: 1;
}
.hist-card .person { display: flex; align-items: center; gap: 12px; }
.hist-card .photo {
width: 44px; height: 44px; border-radius: 50%;
border: 2px solid var(--c-yellow);
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 13px; letter-spacing: 0.4px;
flex-shrink: 0;
}
.hist-card .photo[data-pair="A"] { background: var(--c-royal); }
.hist-card .photo[data-pair="B"] { background: var(--c-pink-400); }
.hist-card .photo[data-pair="C"] { background: var(--c-teal); }
.hist-card .person-info { font-size: 12px; line-height: 1.35; }
.hist-card .person-info strong {
display: block; color: var(--c-yellow);
font-weight: 800; font-size: 13px;
}
.hist-card .person-info span { color: rgba(255,255,255,0.65); }
/* 10 — IN-COMPANY B2B (carrossel automático 3-up) */
.incompany-b2b { background-color: var(--c-navy); color: #fff; padding: 44px 28px 44px; }
.incompany-marquee {
margin-top: 26px; overflow: hidden; position: relative;
mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.incompany-track {
display: flex; gap: 18px; width: max-content;
animation: incompany-scroll 32s linear infinite;
}
.incompany-marquee:hover .incompany-track { animation-play-state: paused; }
@keyframes incompany-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.incompany-track .logo-cell {
flex-shrink: 0;
width: calc((100vw - 56px - 36px) / 3);
max-width: 240px;
height: 100px;
background: #fff; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
padding: 16px 20px;
font-size: 14px; font-weight: 800; color: var(--c-navy);
letter-spacing: 0.02em;
box-shadow: 0 8px 22px rgba(0,0,0,0.20);
}
.incompany-track .logo-cell picture {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
}
.incompany-track .logo-cell img {
max-width: 100%; max-height: 100%; object-fit: contain;
}
.incompany-cta { text-align: center; margin-top: 32px; }
/* 11 — RESTAURANTES PARCEIROS (3x2 brand colors em tablet) */
/* 11 — RESTAURANTES PARCEIROS · carrossel auto */
.restaurantes { background: #fff; color: var(--c-grafite); padding: 44px 28px; }
.restaurantes .sec-title { color: var(--c-navy); }
.restaurantes .sec-lead { color: var(--c-grafite); margin-bottom: 24px; }
.resto-carousel { position: relative; overflow: hidden; width: 100%; }
.resto-track { display: flex; gap: 12px; will-change: transform; }
.resto-card {
flex: 0 0 calc((100% - 60px) / 6);
position: relative; aspect-ratio: 4 / 3;
border-radius: 12px; overflow: hidden;
background: linear-gradient(135deg, var(--rc1) 0%, var(--rc2) 100%);
border: 1px solid rgba(0,0,0,0.06);
}
.resto-card.r1 { --rc1: var(--c-royal); --rc2: #0c1a3a; }
.resto-card.r2 { --rc1: var(--c-pink-400); --rc2: #4d0a2c; }
.resto-card.r3 { --rc1: var(--c-teal); --rc2: #0a2a3a; }
.resto-card.r4 { --rc1: #b8860b; --rc2: #4d2a0a; }
.resto-card.r5 { --rc1: #8b1a3c; --rc2: #2a0a18; }
.resto-card.r6 { --rc1: #1a3a4a; --rc2: #0a1a28; }
.resto-card::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,0.10), transparent 50%),
linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55) 100%);
}
.resto-card .icon-cutlery {
position: absolute; top: 12px; right: 12px;
width: 22px; height: 22px;
color: rgba(255,255,255,0.55); z-index: 1;
}
.resto-name {
position: absolute; left: 10px; right: 10px; bottom: 32px;
color: #fff; font-size: 11px; font-weight: 700; z-index: 1;
text-shadow: 0 1px 4px rgba(0,0,0,0.5); line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.resto-address {
position: absolute; left: 10px; right: 10px; bottom: 8px;
color: rgba(255,255,255,0.85); font-size: 9.5px; font-weight: 500;
z-index: 1; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,0.6);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
/* 12 — FAQ */
.faq { background: var(--c-navy-100); color: #fff; padding: 44px 28px 48px; }
.faq-list { display: flex; flex-direction: column; gap: 6px; max-width: 720px; }
.faq-item {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px; overflow: hidden;
}
.faq-item summary {
list-style: none; cursor: pointer;
padding: 14px 18px; font-size: 14px; font-weight: 700; color: #fff;
display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+"; color: var(--c-yellow); font-size: 24px; font-weight: 400;
line-height: 1; transition: transform .2s ease; flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] { border-color: var(--c-yellow); background: rgba(255,255,255,0.06); }
.faq-item .answer {
padding: 0 18px 16px; font-size: 13px;
color: rgba(255,255,255,0.78); line-height: 1.55;
}
/* 13 — CTA FINAL */
.cta-final-sec {
background: linear-gradient(135deg, var(--c-navy-300) 0%, var(--c-royal) 100%);
color: #fff; padding: 52px 28px;
position: relative; overflow: hidden;
}
.cta-final-sec::after {
content: ""; position: absolute; top: -80px; right: -100px;
width: 280px; height: 280px; border-radius: 50%;
background: rgba(255,255,255,0.06); pointer-events: none;
}
.cta-final-sec .inner { position: relative; z-index: 1; max-width: 620px; }
.cta-final-sec .eyebrow-line {
font-size: 11px; color: var(--c-yellow); font-weight: 800;
letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 14px;
}
.cta-final-sec h2 {
font-size: 30px; font-weight: 800; color: #fff;
letter-spacing: -0.018em; line-height: 1.1; margin: 0 0 14px;
}
.cta-final-sec p {
font-size: 14.5px; color: rgba(255,255,255,0.88); margin: 0 0 22px; line-height: 1.55;
}
.cta-final-sec .ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-final-sec .ctas .btn { height: 50px; font-size: 14px; padding: 0 22px; }
/* 14 — CONTATO (form + endereços lado a lado em tablet) */
.contato-sec {
background-color: var(--c-navy); color: #fff; padding: 52px 28px;
display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;
}
.contato-block + .contato-block { margin-top: 0; padding-top: 0; border-top: 0; }
/* eyebrow do contato unificado em .sec-eyebrow (era .eyebrow-line distoante) — 2026-05-03 */
.contato-block h2 {
font-size: 26px; font-weight: 800; color: #fff;
letter-spacing: -0.018em; line-height: 1.1; margin: 0 0 22px;
}
.contato-form .form-fields { display: flex; flex-direction: column; gap: 12px; }
.contato-form .field label {
display: block; font-size: 12px; color: rgba(255,255,255,0.78);
margin-bottom: 6px; font-weight: 600;
}
.contato-form .field input,
.contato-form .field textarea {
width: 100%; background: rgba(255,255,255,0.08); color: #fff;
border: 1px solid rgba(255,255,255,0.16); border-radius: 22px;
padding: 12px 18px; font-size: 14px; font-family: inherit;
outline: 2px solid transparent;
transition: outline-color .15s ease, border-color .15s ease, background .15s ease;
}
.contato-form .field input::placeholder,
.contato-form .field textarea::placeholder { color: rgba(255,255,255,0.45); }
.contato-form .field input:focus,
.contato-form .field textarea:focus { outline-color: var(--c-yellow); }
.contato-form .field textarea { min-height: 88px; resize: vertical; border-radius: 18px; }
.contato-form button {
margin-top: 6px; width: 100%; height: 50px;
background: var(--c-pink-600); color: #fff; border: 0;
border-radius: 22px;
font-weight: 800; font-size: 14px; letter-spacing: 0.02em;
box-shadow: 0 8px 22px rgba(207,2,152,0.34);
cursor: pointer; transition: background .15s ease;
font-family: inherit;
}
.contato-form button:hover { background: var(--c-pink-800); }
.enderecos { display: flex; flex-direction: column; gap: 18px; }
.endereco h4 {
font-size: 15px; color: #fff; font-weight: 700; margin: 0 0 4px;
letter-spacing: -0.010em;
}
.endereco p { font-size: 13px; color: rgba(255,255,255,0.78); margin: 0; line-height: 1.55; }
.contato-links { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; }
.contato-links a {
display: flex; align-items: center; gap: 12px;
color: #fff; text-decoration: none;
font-size: 13.5px; padding: 8px 0;
transition: color .15s ease;
}
.contato-links svg { width: 18px; height: 18px; fill: var(--c-yellow) !important; flex-shrink: 0; }
.contato-links svg path { fill: var(--c-yellow) !important; }
.contato-links a:hover { color: var(--c-yellow); }
/* 15 — OUTRAS MARCAS (2 cross-promo lado a lado em tablet) */
.outras-marcas {
background: linear-gradient(135deg, var(--c-royal) 0%, var(--c-navy-400) 100%);
color: #fff; padding: 48px 28px;
}
.outras-marcas-head { margin-bottom: 22px; }
.outras-marcas-head .sec-eyebrow { color: var(--c-yellow); }
.outras-marcas .grupo-brand {
text-align: center;
padding-bottom: 32px; margin-bottom: 32px;
border-bottom: 1px solid rgba(255,255,255,0.18);
}
.outras-marcas .grupo-brand img {
max-width: 240px; height: auto; margin: 0 auto; display: block;
filter: brightness(0) invert(1);
}
.outras-marcas .grupo-brand .social-row {
display: flex; gap: 10px; justify-content: center; margin-top: 18px;
}
.outras-marcas .grupo-brand .social-row a {
width: 38px; height: 38px; border-radius: 50%;
background: rgba(255,255,255,0.95); color: var(--c-royal);
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s ease, transform .15s ease;
}
.outras-marcas .grupo-brand .social-row a:hover { background: var(--c-yellow); transform: translateY(-2px); }
.outras-marcas .grupo-brand .social-row svg { width: 16px; height: 16px; fill: currentColor; }
.outras-marcas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.outras-marca-card {
display: flex; align-items: center; gap: 14px;
padding: 18px 16px;
text-decoration: none; color: #fff;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px;
transition: opacity .15s ease, background .15s ease;
}
.outras-marca-card:hover { background: rgba(255,255,255,0.08); }
.outras-marca-card .label {
flex: 1;
font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,0.92);
font-weight: 600;
}
.outras-marca-card .label strong { display: block; font-weight: 800; color: #fff; margin-bottom: 2px; font-size: 13px; }
.outras-marca-card .logo-side {
flex-shrink: 0;
width: 110px; height: 54px;
display: flex; align-items: center; justify-content: center;
}
.outras-marca-card .logo-side img {
max-width: 100%; max-height: 46px; height: auto;
filter: brightness(0) invert(1);
}
.outras-marca-card[href*="gestorpop"] .logo-side {
background: none; border-radius: 0; padding: 0;
width: 176px; height: 176px;
}
.outras-marca-card[href*="gestorpop"] .logo-side img {
filter: none; width: 176px; height: 176px; max-width: none; max-height: none; object-fit: contain;
}
/* 16 — FOOTER INSTITUCIONAL (4 colunas em linha em tablet) */
.site-footer-new {
background: var(--c-navy-100);
color: rgba(255,255,255,0.78);
padding: 44px 28px 24px;
font-size: 13px;
}
.footer-grid {
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .footer-logo img {
max-width: 160px; height: auto; display: block;
filter: brightness(0) invert(1);
}
.footer-brand .footer-tagline {
font-size: 9.5px; color: var(--c-yellow);
letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800;
margin-top: 10px;
}
.footer-brand p {
font-size: 12px; color: rgba(255,255,255,0.55);
margin-top: 12px; line-height: 1.55;
}
.footer-col h5 {
font-size: 11px; color: var(--c-yellow);
letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800;
margin: 0 0 12px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a, .footer-col span {
font-size: 13px; color: rgba(255,255,255,0.78); text-decoration: none;
display: inline-block; line-height: 1.4;
transition: color .15s ease;
}
.footer-col a:hover { color: var(--c-yellow); }
.footer-bottom {
padding-top: 22px;
display: flex; flex-direction: row; justify-content: space-between; align-items: center;
gap: 14px;
font-size: 11.5px; color: rgba(255,255,255,0.5);
}
.footer-bottom .social-mini { display: flex; gap: 8px; }
.footer-bottom .social-mini a {
width: 32px; height: 32px; border-radius: 50%;
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.78);
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s ease, color .15s ease;
}
.footer-bottom .social-mini a:hover { background: var(--c-yellow); color: var(--c-text-dark); }
.footer-bottom .social-mini svg { width: 14px; height: 14px; fill: currentColor; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; flex: 1; }
.footer-legal a {
color: rgba(255,255,255,0.55); text-decoration: none;
transition: color .15s ease;
}
.footer-legal a:hover { color: var(--c-yellow); }
/* LGPD: cookie banner card flutuante */
.cookie-banner {
position: fixed; bottom: 20px; left: 20px; right: 20px;
z-index: 9999;
background: rgba(8,14,55,0.97);
border: 1px solid rgba(250,196,2,0.45); border-radius: 16px;
padding: 20px 22px;
box-shadow: 0 16px 40px rgba(0,0,0,0.55);
display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
backdrop-filter: blur(10px);
}
.cookie-icon {
width: 40px; height: 40px; flex-shrink: 0;
background: rgba(250,196,2,0.16); border-radius: 11px;
display: flex; align-items: center; justify-content: center;
color: var(--c-yellow);
}
.cookie-icon svg { width: 22px; height: 22px; }
.cookie-text {
font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.92);
}
.cookie-text strong {
color: var(--c-yellow); display: block;
font-size: 14.5px; margin-bottom: 4px; letter-spacing: -0.005em;
}
.cookie-text a { color: var(--c-yellow); text-decoration: underline; font-weight: 600; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn {
padding: 11px 22px; border-radius: 999px;
font-weight: 700; font-size: 13px; cursor: pointer;
border: 1px solid transparent; font-family: inherit;
transition: opacity .15s ease, background .15s ease;
white-space: nowrap;
}
.cookie-btn:hover { opacity: 0.88; }
.cookie-decline {
background: transparent; color: #fff;
border-color: rgba(255,255,255,0.30);
}
.cookie-decline:hover { background: rgba(255,255,255,0.08); }
.cookie-accept {
background: var(--c-yellow); color: var(--c-text-dark);
}
}
/* ============================================================
SEÇÃO 7 — LAYOUT-TOGGLE
Origem: css/layout-toggle.css
============================================================ */
/* === Toggle de blocos mobile vs desktop ===
Padrão CLAUDE.md: blocos HTML diferentes para mobile e desktop,
alternados via display none/block por media query.
Mobile-first: blocos mobile sao default visivel; desktop ocultos ate 768px.
*/
.site-header-desktop,
.hero-desktop,
.desktop-only {
display: none;
}
@media (min-width: 768px) {
.site-header-mobile,
.hero-mobile,
.mobile-only {
display: none !important;
}
.site-header-desktop,
.hero-desktop {
display: block;
}
.desktop-only {
display: revert;
}
}
/* ============================================================
SEÇÃO 8 — HEADER-SCROLL
Origem: css/header-scroll.css
============================================================ */
/* =========================================================================
header-scroll.css — navbar transparência/cor por scroll
Estado padrão (topo): fundo branco + textos escuros + logo claro
Estado scrolled: fundo navy + textos brancos + logo escuro
Classe .header-scrolled adicionada via JS (header-scroll.js inline em footer.php)
========================================================================= */
/* --- Transição suave nos dois headers --- */
.site-header {
transition: background 0.28s ease, box-shadow 0.28s ease, color 0.28s ease;
}
.site-logo img {
transition: opacity 0.18s ease;
}
/* =========================================================================
ESTADO PADRÃO (topo da página) — fundo branco
========================================================================= */
.site-header {
background: #fff;
color: var(--c-navy, #020678);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10);
}
/* Mobile: tagline e hamburger em navy */
.site-header-mobile .brand-tagline {
color: var(--c-navy, #020678);
}
.site-header-mobile .menu-toggle {
color: var(--c-navy, #020678);
}
/* Desktop: telefone e ícones sociais em navy */
.site-header-desktop .header-phone {
color: var(--c-navy, #020678);
}
.site-header-desktop .header-phone svg {
fill: var(--c-navy, #020678);
}
.site-header-desktop .header-social a {
color: var(--c-navy, #020678);
opacity: 0.65;
}
.site-header-desktop .header-social a:hover {
opacity: 1;
background: rgba(2, 6, 120, 0.07);
}
/* =========================================================================
ESTADO SCROLLED — fundo navy (comportamento original)
========================================================================= */
.site-header.header-scrolled {
background: var(--c-header, #020678);
color: var(--c-white, #fff);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
/* Mobile scrolled */
.site-header-mobile.header-scrolled .brand-tagline {
color: var(--c-yellow, #fac402);
}
.site-header-mobile.header-scrolled .menu-toggle {
color: var(--c-white, #fff);
}
/* Desktop scrolled */
.site-header-desktop.header-scrolled .header-phone {
color: var(--c-white, #fff);
}
.site-header-desktop.header-scrolled .header-phone svg {
fill: var(--c-yellow, #fac402);
}
.site-header-desktop.header-scrolled .header-social a {
color: var(--c-white, #fff);
opacity: 0.75;
}
.site-header-desktop.header-scrolled .header-social a:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.10);
}