@font-face {
  font-family: 'LexendDeca-Light';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/LexendDeca-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'LexendDeca-Light';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/LexendDeca-Light.ttf') format('truetype');
}
:root {
  --bg: #111111;
  --text: #ffffff;
  --muted: #b3b3b3;
  --accent: #ee2945;
  --card: #121214;
  --border: #1f1f22;
  --primary-btn-width: 180px; /* Largura unificada para botões primary (aumentada) */
  --header-extra: 0px; /* Altura extra do menu sanfona em mobile/tablet */
  --header-base: 96px; /* Altura base do topo em mobile/tablet */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'LexendDeca-Light', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Espaçamento superior extra para o header fixo */
  padding-top: 50px;
}

.container { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 36px); }

/* Header */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #111111; border-bottom: none; padding-top: 20px; padding-bottom: 20px; will-change: max-height; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; position: relative; }
.logo { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; }
.logo img { height: 42px; width: auto; display: block; }
.logo:hover img { animation: logoFadePulse 700ms ease-in-out 1; will-change: opacity, filter; }
/* Slogan ao lado da logo */
.logo .logo-tagline { margin-left: 10px; color: var(--muted); font-size: 12px; letter-spacing: 0.2px; }

@keyframes logoFadePulse {
  0% { opacity: 1; filter: none; }
  50% { opacity: 0.8; filter: brightness(1.08) contrast(1.03); }
  100% { opacity: 1; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .logo:hover img { animation: none; }
}
.nav { display: flex; gap: 20px; align-items: center; }
.nav a { color: var(--muted); text-decoration: none; font-family: 'LexendDeca-Light', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 100; letter-spacing: 0.3px; transition: color 400ms ease; }
.nav a:hover, .nav a.active { color: var(--text); }
.nav .cta { color: var(--bg); background: var(--accent); padding: 8px 12px; border-radius: 20px; }
.menu-toggle { display: none; background: transparent; border: none; color: var(--text); font-size: 20px; }
/* Global: todos os links com peso 100 */
a { font-weight: 100; }
/* Fonte Splash para destaque específico */
@font-face {
  font-family: 'Splash';
  src: url('../fonts/Splash-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Fonte Kaushan Script para textos solicitados */
@font-face {
  font-family: 'Kaushan Script';
  src: url('../fonts/KaushanScript-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Fonte Mr Dafoe para textos solicitados */
@font-face {
  font-family: 'Mr Dafoe';
  src: url('../fonts/MrDafoe-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LexendDeca-Light';
  src: url('../fonts/LexendDeca-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LexendDeca-ExtraBold';
  src: url('../fonts/LexendDeca-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LexendDeca-Light';
  src: url('../fonts/LexendDeca-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
/* Aplicar Splash apenas ao texto "Últimos trabalhos" na Home */
#selected-works .section-head .section-meta em {
  font-family: 'LexendDeca-Light', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 100;
  color: #b3b3b3;
  font-size: 21px;
  line-height: 1.4;
}
#logo-projects .section-head .section-meta em {
  font-family: 'LexendDeca-Light', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 100;
  color: #fff;
  font-size: 30px;
  line-height: 1.4;
}
#logo-projects .section-head h2 { font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; }
#selected-works .section-head h2,
#logo-projects .section-head h2,
#journal .section-head h2,
#contact .section-head h2 { font-size: 63px; }
#about-title { font-size: 63px; }
/* Blog: o título "Blog" deve usar Splash */
#journal .section-head h2 { font-family: 'Splash', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 400; }
/* Aplicar Kaushan Script aos textos solicitados: about-meta, blog-meta e contact-meta */
#about-meta,
#blog-meta,
#contact-meta {
  font-family: 'LexendDeca-Light', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 100;
  color: #b3b3b3;
  font-size: 21px;
  line-height: 1.4;
}

/* Hero */
.hero { position: relative; padding: 120px 0 0 0; overflow: hidden; }
.hero-title { font-family: 'Splash', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 400; font-size: 170px; line-height: 1; margin: 0 0 12px 0; }
.hero-title.lexend-extra { font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; display:block; width:100%; max-width:100%; font-size: clamp(64px, 9vw, 140px); margin-bottom: 26px; text-wrap: balance; }
.hero-subtitle { color: #b3b3b3; font-size: 21px; max-width: 720px; margin: 0 0 24px; }
/* Centraliza subtítulo especificamente na página de erro */
.error-page .hero-subtitle { text-align: center; }
/* Página 404: centralizar todo texto e ajustar espaçamento de linhas */
.error-page { line-height: 1; }
.error-page .hero-content,
.error-page .error-text,
.error-page .hero-title,
.error-page .hero-subtitle,
.error-page .section-meta { text-align: center; }
.hero-actions { display: flex; gap: 12px; margin-bottom: 5px; }
.hero-bg { position: absolute; inset: -10% -20% auto -20%; height: 60%; background: none; pointer-events: none; }
.scroll-hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: 24px; color: var(--muted); font-size: 12px; letter-spacing: 0.2px; }

/* Page sections */
.featured, .about, .journal, .contact { padding: 100px 0; scroll-margin-top: 120px; }
#logo-projects { scroll-margin-top: 120px; }
.featured { padding: 100px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 32px 0 20px; }
.section-meta { color: var(--muted); font-size: 16px; margin-top: 2px; letter-spacing: 0.3px; }
/* Meta específico da seção "O que fazemos?" */
.about-text .section-meta { line-height: 1; margin-bottom: 32px; font-size: 16px; }
/* Texto meta da seção "O que fazemos?" em itálico */
#about-meta { font-style: italic; }
/* Texto meta da seção Blog em itálico */
#blog-meta { font-style: italic; }
.link { color: var(--accent); text-decoration: none; position: relative; background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: color 700ms ease, background-size 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.link:hover { background-size: 100% 1px; }

/* Blog post footer: align return link to the right */
.post-foot { display: flex; justify-content: flex-end; margin-top: 16px; }

/* Works */
.grid { display: grid; gap: 16px; }
.works-grid { grid-template-columns: repeat(3, 1fr); }
.work-card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--text); }
.work-media { height: 180px; background-size: cover; background-position: center; transition: transform .4s ease; }
.work-info { padding: 14px 16px; }
.work-info h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: 0.2px; }
.work-info p { margin: 0; color: var(--muted); font-size: 14px; }
.work-cta { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--accent); }
.work-card:hover .work-media { transform: scale(1.03); }

/* Projects — image + text layout */
.projects-list { display: grid; gap: 24px; }
.project { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 16px; }
.project-media { width: 100%; aspect-ratio: 4 / 3; min-height: 320px; background-size: cover; background-position: center; }
/* Home: reduzir altura mínima das imagens dos projetos */
.project-media { min-height: 148px; }
.projects-list .project .project-media { border-radius: 14px; border: 1px solid var(--border); }
.project-content { display: grid; gap: 10px; align-content: start; }
.project-title { margin: 0; font-size: clamp(20px, 2.6vw, 26px); font-family: 'LexendDeca-Light', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 700; }
.project-kicker { color: #ffffff; font-family: 'LexendDeca-Light', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 42px; font-weight: 200; margin: 0; letter-spacing: 0.3px; }
/* Projects page: textos específicos devem usar Lexend ExtraBold */
.project-kicker.splash { font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; }
/* Home: aplicar Splash apenas ao kicker "Simples, Marcante e Memorável" */
.projects-list .project:first-of-type .project-kicker {
  font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
}
/* Home: aplicar Splash aos kickers "Future forward" e "Skincare made for everyone" */
.projects-list .project:nth-of-type(2) .project-kicker,
.projects-list .project:nth-of-type(3) .project-kicker {
  font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
}
.project-description { margin: 4px 0 8px; font-size: clamp(16px, 2.2vw, 18px); color: var(--text); }
#selected-works .project .project-description { font-size: 21px; color: #b3b3b3; }
.project.reverse .project-media { order: 2; }
.project.reverse .project-content { order: 1; }

#selected-works .project { background: #111111; border: none; padding: 0; }
#selected-works .project .project-media { border: none; background-position: center; min-height: 143px; }

/* Projetos (Home): textos com line-height compacto */
.projects-list .project .project-title,
.projects-list .project .project-kicker,
.projects-list .project .project-description {
  line-height: 1;
}

/* Projetos (Home): alinhar texto à direita dentro da coluna de conteúdo */
.projects-list .project .project-content { text-align: right; justify-items: end; }

/* Cabeçalho da seção Projetos (Home) */
.featured .section-head h2,
.featured .section-head .section-meta {
  line-height: 1;
}

/* About */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.about-text p { color: var(--muted); font-size: 16px; text-align: justify; }
.media-placeholder { height: 280px; border-radius: 14px; background: linear-gradient(135deg, #1a1a1d, #0f0f11); border: 1px solid var(--border); }
.about-media img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 14px; border: 1px solid var(--border); }
/* Centralização vertical da imagem na seção "O que fazemos?" */
.about-media { align-self: center; }

/* Journal */
.journal-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.post-card { display:flex; flex-direction:column; justify-content:space-between; background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 16px; text-decoration: none; color: var(--text); height:100%; }
.post-card h3 { margin: 0 0 8px; font-size: clamp(18px, 2.6vw, 22px); }
.post-meta { color: var(--muted); font-size: 12px; margin: 0; }
.post-card .post-meta { margin-top: auto; }
/* Hover feedback para cards clicáveis */
.post-card:hover { border-color: var(--accent); }
.post-card:hover h3 { color: var(--accent); }

.logos-carousel { padding: 80px 0; }
.logos-viewport { position: relative; overflow: hidden; background: #111111; cursor: grab; touch-action: none; }
.logos-track { display: flex; align-items: center; gap: 42px; padding: 0; will-change: transform; }
.logo-item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 30px 46px; background: transparent; border: none; border-radius: 14px; box-shadow: none; }
.logo-item img { height: 480px; width: auto; display: block; filter: none; user-select: none; -webkit-user-drag: none; }
@keyframes logosScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 768px) {
  .logo-item img { height: 380px; }
}

.logos-viewport.dragging { cursor: grabbing; }
/* Cards de Soluções no carrossel */
#logo-projects .solution-card .solution-icon { display:block; margin: 20px auto 12px; }
#logo-projects .solution-card .solution-title { font-size: 26px; }
#logo-projects .solution-card .card-body { display:flex; flex-direction:column; justify-content:space-between; height:100%; }
#logo-projects .solution-card .card-footer { margin-top:auto; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; }
.contact h2, .contact .section-meta { line-height: 1; }
.contact .section-meta { margin-bottom: 50px; }
#contact-meta { font-style: italic; }

.briefing-page .card { max-width: none !important; width: 100%; }
.briefing-page .contact-form .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 864px) { .briefing-page .contact-form .form-grid { grid-template-columns: 1fr; } }
.briefing-page .section-head { justify-content: flex-start; align-items: flex-start; }
.briefing-page .section-head h2 { text-align: left; margin: 0; }
/* Briefing: ocupar altura total e fixar rodapé ao final */
.briefing-page { display: flex; min-height: 100vh; flex-direction: column; }
.videochamada-page { display: flex; min-height: 100vh; flex-direction: column; }
.briefing-page main { flex: 1 0 auto; }
.briefing-page .site-footer { margin-top: auto; }
.videochamada-page .site-footer { margin-top: auto; }

/* Títulos das seções (Home): LexendDeca-ExtraBold 58px */
#selected-works .section-head h2,
#about-title,
#journal .section-head h2,
#contact .section-head h2 {
  font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 58px;
  font-weight: 800;
}
.briefing-page .section-head h2 {
  font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 58px;
  font-weight: 800;
}
.videochamada-page .section-head h2 {
  font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 58px;
  font-weight: 800;
}
.section-head h2, .about-text h2 { font-family: 'LexendDeca-Light', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 700; font-size: clamp(24px, 5vw, 48px); }
.section-head h2 { margin: 0 0 2px; }
/* Cadastro de Clientes: título com Lexend ExtraBold e meta menor */
#clients-cadastro .section-head h2 { font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; font-size: 58px; }
#clients-cadastro #contact-meta { font-size: 24px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.form-field { display: grid; gap: 8px; margin-bottom: 14px; }
label { color: var(--muted); font-size: 12px; }
/* Acessibilidade: manter labels semanticamente, escondendo-os visualmente */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
input, textarea, select { width: 100%; background: #0e0e10; border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 16px 18px; font: inherit; font-size: 16px; }
input { min-height: 52px; }
textarea { min-height: 160px; resize: vertical; }

/* Fale conosco: sem bordas arredondadas nos campos */
.contact-form input,
.contact-form textarea,
.contact-form select {
  border-radius: 0;
}

/* Foco dos campos: cor #11d6ba para destacar seleção em "Fale conosco" */
.contact-form .form-field input:focus,
.contact-form .form-field input:focus-visible,
.contact-form .form-field textarea:focus,
.contact-form .form-field textarea:focus-visible,
.contact-form .form-field select:focus,
.contact-form .form-field select:focus-visible {
  outline: none;
  border-color: #11d6ba;
  box-shadow: 0 0 0 3px rgba(17, 214, 186, 0.3);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .contact-form .form-field input:focus,
  .contact-form .form-field textarea:focus {
    transition: none;
  }
}
input::placeholder, textarea::placeholder { color: #ffffff; opacity: 1; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) {
  .contact-form .form-row { grid-template-columns: 1fr; }
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 16px; padding: 12px 18px; border-radius: 0; border: 1px solid var(--border); transition: transform .15s ease, filter .15s ease; --shadow-pulse-color: rgba(255,255,255,0.12); }
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); animation: shadowPulse 2s infinite; }
.btn.primary { background: var(--accent); color: #ffffff; border-color: transparent; width: var(--primary-btn-width); }
.btn.ghost { color: var(--text); transition: color 700ms ease, transform 700ms ease, box-shadow 700ms ease; }
.btn.ghost:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,255,255,0.06); filter: none; animation: shadowPulse 2s infinite; }

@media (prefers-reduced-motion: reduce) {
  .link { transition: none; background-size: 100% 1px; }
  .btn.ghost { transition: none; }
  .btn:hover, .btn.ghost:hover, .btn-shadow-pulse { animation: none; }
  .btn.ghost:hover { transform: none; box-shadow: none; }
}

/* Botões com fundo (primary): efeito de hover unificado */
.btn.primary { --shadow-pulse-color: rgba(238,41,69,0.35); }
.btn.primary:hover { transform: translateY(-1px) scale(1.02); filter: none; animation: shadowPulse 2s infinite; }

@keyframes shadowPulse {
  0% { box-shadow: 0 0 0 0 var(--shadow-pulse-color); }
  70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

.btn-shadow-pulse { animation: shadowPulse 2s infinite; }

/* Ajustes de conforto na seção Fale conosco: campos mais altos e fonte maior */
.contact-form input,
.contact-form select {
  min-height: 60px;
  padding: 18px 20px;
  font-size: 18px;
}

.contact-form textarea {
  min-height: 200px;
  padding: 18px 20px;
  font-size: 18px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  font-size: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .btn.primary:hover { animation: none; }
}
.form-note { color: var(--muted); font-size: 12px; margin-top: 8px; }
.char-counter { color: var(--muted); font-size: 12px; margin-top: 6px; text-align: right; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); margin-top: 0; padding-top: 20px; padding-bottom: 20px; }
.site-footer.compact { padding-top: 20px; padding-bottom: 20px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer.compact .footer-inner { gap: 16px; }
.site-footer .logo { margin-left: 4px; }
.footer-nav { display: flex; gap: 14px; }
/* */
.logo-landing .hero-title { font-size: clamp(48px, 12vw, 72px); }
.logo-landing .about[aria-labelledby="pacotes"] .grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); justify-items: center; justify-content: center; gap: 16px; align-items: stretch; }
@media (max-width: 768px) { .logo-landing .about[aria-labelledby="pacotes"] .grid { grid-template-columns: 1fr; } }
.logo-landing .about[aria-labelledby="pacotes"] .grid .card { width: 100%; max-width: 520px; display: flex; flex-direction: column; height: 100%; }
.logo-landing .about[aria-labelledby="pacotes"] .card .card-body { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; align-items: start; justify-items: center; text-align: center; height: 100%; }
.logo-landing .about[aria-labelledby="pacotes"] .card .card-body h3 { font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; font-size: clamp(26px, 4.6vw, 36px); }
.logo-landing .about[aria-labelledby="pacotes"] .card .card-body ul { list-style-position: outside; padding-left: 18px; text-align: left; }
.logo-landing .about[aria-labelledby="pacotes"] .card .card-body .btn { margin: 0; justify-self: center; align-self: end; }
.logo-landing .about[aria-labelledby="pacotes"] .card .card-body p.investment-note { text-align: justify; }
.logo-landing .works-grid .work-info h3 { font-size: 22px; }
.logo-landing .works-grid .work-info p { font-size: 16px; }
.logo-landing .about[aria-labelledby="processo"] .card .card-body strong { font-size: 20px; }
.logo-landing .about[aria-labelledby="processo"] .card .card-body { font-size: 16px; }
.logo-landing .featured, .logo-landing .about { padding: 60px 0; }
.logo-landing .section-head { margin: 20px 0 20px; }
.footer-nav a { color: var(--muted); text-decoration: none; font-weight: 100; letter-spacing: 0.3px; transition: color 400ms ease; }
.footer-nav a:hover, .footer-nav a.active { color: var(--text); }

/* Social column in footer */
/* Substituir texto "Instagram" por ícone via CSS sem alterar HTML */
.footer-social a[href*="instagram.com"], .footer-nav a[href*="instagram.com"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  text-indent: -9999px;
  overflow: hidden;
}
.footer-social a[href*="instagram.com"]::before, .footer-nav a[href*="instagram.com"]::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  background-image: url('../img/icones/instagram-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: filter 400ms ease, transform 200ms ease;
}
.footer-social { display: flex; gap: 14px; }
.footer-social a { color: var(--muted); text-decoration: none; font-weight: 100; letter-spacing: 0.3px; transition: color 400ms ease; }
.footer-social a:hover, .footer-social a:focus, .footer-social a.active { color: var(--text); }
.footer-email { color: var(--muted); font-weight: 100; letter-spacing: 0.3px; cursor: default; }
.footer-social a[href*="instagram.com"]:hover::before { filter: brightness(1.15) saturate(1.2); transform: scale(1.06); }

/* Smaller logo in footer */
.site-footer .logo img { height: 28px; }

@media (max-width: 640px) {
  .footer-inner { flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  .footer-nav, .footer-social { flex-wrap: wrap; gap: 10px; }
}

/* Responsive */
@media (max-width: 900px) {
  .works-grid, .journal-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: clamp(64px, 13.5vw, 100px); }
  .hero { padding-top: 70px; }
  .header-inner { justify-content: space-between; }
  .logo { margin-right: auto; }
  /* Empilhar e centralizar título, texto e link em tablet */
  .section-head { flex-direction: column; align-items: flex-start; justify-content: initial; gap: 8px; }
  .section-head .link { margin-top: 4px; }
  /* Reverter centralizações: voltar ao alinhamento padrão em tablet */
  .hero-content { text-align: initial; }
  .project-content { text-align: initial; }
  .project { grid-template-columns: 1fr; }
  .project.reverse .project-media, .project.reverse .project-content { order: initial; }
}
@media (max-width: 900px) {
  /* Mostrar botão hambúrguer em tablets/celulares */
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 16px; cursor: pointer; }
  .nav { position: fixed; top: var(--header-base); left: 0; right: 0; width: 100%; overflow: hidden; max-height: 0; opacity: 0; pointer-events: none; padding: 0; margin-top: 0; background: var(--bg); border: none; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; gap: 12px; transition: max-height 300ms ease, opacity 200ms ease, padding 300ms ease, border-color 300ms ease, box-shadow 300ms ease; z-index: 1200; }
  .nav.open { max-height: 80vh; opacity: 1; pointer-events: auto; padding: 12px; border: none; box-shadow: 0 12px 24px rgba(0,0,0,0.4); overflow-y: auto; }
  .nav a { padding: 10px 12px; text-align: left; }
  .works-grid, .journal-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: clamp(64px, 13.5vw, 100px); }
  /* Empilhar título, texto e link em smartphone (sem centralizar) */
  .section-head { flex-direction: column; align-items: flex-start; justify-content: initial; gap: 8px; }
  .section-head .link { margin-top: 4px; }
  /* Reverter centralizações: voltar ao alinhamento padrão em smartphone */
  .hero-content { text-align: initial; }
  .project-content { text-align: initial; }
body { padding-top: var(--header-base) !important; }
.site-header { position: fixed !important; top: 0; left: 0; right: 0; overflow: visible; max-height: var(--header-base); }
}

/* Smartphones: ajustar ainda mais o tamanho do título para telas pequenas */
@media (max-width: 640px) {
  .logo-landing .about[aria-labelledby="pacotes"] .grid { grid-template-columns: 1fr; }
  .header-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content: space-between; }
  .menu-toggle { margin-left:auto; }
  .nav { position: fixed; left: 0; right: 0; width: 100%; }
  .hero-title { font-size: clamp(66px, 16vw, 108px); }
  .logo-landing .hero-title { font-size: clamp(48px, 12vw, 72px); }
  .hero-title.lexend-extra { font-size: clamp(56px, 14vw, 96px); }
  .hero { padding-top: 50px; }
  .hero-content { text-align: initial; }
  .section-head { align-items: flex-start; }
  .project-content { text-align: initial; }
  /* Reverter centralizações: voltar ao padrão em telas pequenas */
  .about-text p { text-align: justify; }
  .site-footer .footer-inner { align-items: center; justify-content: center; }
  .site-footer .logo { margin: 0 auto; }
  /* Astronauta sobreposto e centralizado em smartphones */
  .cms-astronaut { position: relative !important; width: 100% !important; display: block !important; margin: 8px auto !important; min-height: 540px !important; }
  .cms-astronaut .astronaut,
  .cms-astronaut .astronaut-pb { position: absolute !important; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; max-width: 100% !important; height: auto !important; }
  body { padding-top: var(--header-base) !important; }
  .site-header { position: fixed !important; top: 0; left: 0; right: 0; overflow: visible; max-height: var(--header-base); }
}
.section-head h2, .about-text h2 { font-family: 'LexendDeca-Light', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 700; font-size: clamp(24px, 5vw, 48px); }
.section-head h2 { margin: 0 0 2px; }
/* Ajuste de espaçamento entre título e meta na seção "O que fazemos?" */
.about-text h2 { margin: 0 0 2px; }
.post-card h3 { font-family: 'LexendDeca-Light', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 700; }
.post-card h3 a { color: #fff; text-decoration: none; display: inline-block; background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: color 700ms ease, background-size 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.post-card h3 a:hover { color: var(--accent); background-size: 100% 1px; }
.work-info h3 { font-family: 'LexendDeca-Light', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 700; }
.work-info p, .post-meta, .section-meta, .hero-subtitle, .footer-nav a, .form-note, label, input, textarea, .btn { font-family: 'LexendDeca-Light', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
/* Home projects: usar layout original baseado em grid definido em .project */
/* Global site fade-in on load */
body.site-fade {
  transition: opacity 3000ms cubic-bezier(0.2, 0.7, 0.2, 1),
              filter 3000ms ease;
}

body.site-fade.is-loading {
  opacity: 0.01;
  filter: blur(2px);
}

body.site-fade.is-loaded {
  opacity: 1;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  body.site-fade {
    transition: none;
  }
  body.site-fade.is-loading {
    opacity: 1;
    filter: none;
  }
}
/* Seleção do título hero com a mesma cor dos botões */
.hero-title::selection { background: var(--accent); color: #ffffff; }

/* Regras complementares para tablets: ordem do rodapé e astronauta centralizado */
@media (max-width: 900px) {
  /* Rodapé: ordem específica logo → e-mail → login → Instagram */
  .site-footer .footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .site-footer .logo { order: 1; }
  .footer-email { order: 2; }
  .footer-social { order: 3; display: flex; gap: 10px; }
  .footer-social a[href*="/clientes/"] { order: 1; }
  .footer-social a[href*="instagram.com"] { order: 2; }
  /* Astronauta centralizado e sobreposto em tablets */
  .cms-astronaut { position: relative !important; width: 100% !important; display: block !important; margin: 12px auto !important; min-height: 640px !important; }
  .cms-astronaut .astronaut,
  .cms-astronaut .astronaut-pb { position: absolute !important; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; max-width: 100% !important; height: auto !important; }
}

/* Mobile: ajustar padding do topo do header para equilibrar alturas */
@media (max-width: 640px) {
  .site-header { padding-top: 16px; padding-bottom: 12px; }
}
.hero-title::-moz-selection { background: var(--accent); color: #ffffff; }
/* Seleção global: restante do site com cor #11d6ba */
::selection { background: #11d6ba; color: #ffffff; }
::-moz-selection { background: #11d6ba; color: #ffffff; }
/* About tagline em negrito */
#about-p3 {
  font-weight: normal;
  white-space: pre-line;
}
/* Nova página de Projetos (grid 2 colunas, 6 por página) */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.projects-grid .project {
  /* reaproveita estilos de .project base */
}

.projects-grid .project .project-media {
  width: 100%;
  aspect-ratio: 4 / 3;
}

/* Projetos (Grid): manter mesmas configurações de texto da Home */
.projects-grid .project .project-title,
.projects-grid .project .project-kicker,
.projects-grid .project .project-description {
  line-height: 1.4;
}

.projects-grid .project .project-kicker.splash {
  font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 35px;
}

.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
}

.pagination a {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}

.pagination a[aria-current="page"] {
  background: var(--accent);
  color: #000;
  border-color: transparent;
}
#repository-list .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#repository-list .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.client-area #repository-list .card-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

.client-area #repository-list {
  grid-auto-rows: 1fr;
}

/* Alinhamento dos botões "Contratar serviço" nos cards de projetos */
.client-area #projects-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.client-area #projects-list .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.client-area #projects-list .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Alinhar consistentemente os botões de downloads (Preencher Briefing) */
.client-area #projects-list .card-body ul {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}
.client-area #projects-list .card-body ul .btn {
  align-self: flex-start;
}

.client-area #projects-list .card-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@keyframes btspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.form-loading { display: none; margin: 0; }
.loading-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: btspin 0.8s linear infinite; vertical-align: middle; }

.client-area #projects-list .card-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.client-area #projects-list .card-actions .btn {
  align-self: flex-start;
}

/* Cor específica para o CTA "Contratar serviço" na área do cliente */
.client-area #projects-list .card-actions .btn.primary {
  background: #11d6ba;
  border-color: #11d6ba;
  color: #000;
}

.client-area #projects-list .card-actions .btn.primary:hover {
  transform: translateY(-1px) scale(1.02);
  filter: none;
  animation: none;
  box-shadow: 0 8px 20px rgba(255,255,255,0.08), 0 0 0 8px rgba(17,214,186,0.20);
}
.client-area #projects-active-list .card-actions .btn.primary {
  background: #11d6ba;
  border-color: #11d6ba;
  color: #000;
}
.client-area #projects-active-list .card-actions .btn.primary:hover {
  transform: translateY(-1px) scale(1.02);
  filter: none;
  animation: none;
  box-shadow: 0 8px 20px rgba(255,255,255,0.08), 0 0 0 8px rgba(17,214,186,0.20);
}
.client-area #projects-active-list .card {
  background: #111111;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.client-area .projects-active-panel,
.client-area .account-panel,
.client-area .contract-panel,
.client-area .help-panel,
.client-area .files-panel {
  background: #111111;
  border: none;
  border-radius: 0;
}
.client-area .card {
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.client-area .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.client-area .projects-active-panel .card:hover,
.client-area .account-panel .card:hover,
.client-area .contract-panel .card:hover,
.client-area .help-panel .card:hover,
.client-area .files-panel .card:hover {
  transform: none;
  box-shadow: none;
}
.client-area .projects-active-panel:hover,
.client-area .account-panel:hover,
.client-area .contract-panel:hover,
.client-area .help-panel:hover,
.client-area .files-panel:hover {
  transform: none;
  box-shadow: none;
}
.client-area .account-panel .card-body .account-header h3 {
  font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 48px;
}
.client-area .section-head { flex-direction: column; align-items: flex-start; justify-content: initial; gap: 8px; }
.client-area #client-welcome { text-align: left; }
.client-area #client-menu-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); background: #222; }
.btn[disabled], .btn.is-loading { cursor: not-allowed; opacity: 0.6; filter: grayscale(20%); pointer-events: none; }
.btn.is-loading .loading-spinner { margin-left: 8px; vertical-align: middle; }
.logo-landing .hero-title { font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; font-size: 98px; line-height: 1.1; }
.logo-landing .hero-subtitle { text-align: left; }
.logo-landing .hero-actions { justify-content: flex-start; }
.logo-landing .hero { padding-top: 60px; }
.logo-landing .btn.primary { width: auto; }
.logo-landing .about[aria-labelledby="o-que-fazemos"] .section-head { flex-direction: column; align-items: flex-start; justify-content: initial; gap: 8px; }
.logo-landing .about[aria-labelledby="o-que-fazemos"] .section-meta { text-align: left; }
.logo-landing .works-grid .work-info h3 { font-size: 22px; }
.logo-landing .works-grid .work-info p { font-size: 16px; }
.logo-landing #processo .card .card-body { font-size: 16px; }
.logo-landing #processo .card .card-body strong { font-size: 20px; }
.logo-landing .about[aria-labelledby="pacotes"] .grid { display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 16px; justify-content: center; justify-items: center; }
.logo-landing .about[aria-labelledby="pacotes"] .grid .card { width: 100%; max-width: 520px; }
@media (max-width: 768px) { .logo-landing .about[aria-labelledby="pacotes"] .grid { grid-template-columns: 1fr; } }
.logo-landing .section-head { flex-direction: column; align-items: flex-start; justify-content: initial; gap: 8px; }
.logo-landing .section-head .section-meta { text-align: left; }
.logo-landing .works-grid .work-info h3,
.logo-landing .works-grid .work-info p { opacity: 0; animation: caseReveal 420ms ease forwards; }
.logo-landing .works-grid .work-card:nth-child(1) .work-info h3,
.logo-landing .works-grid .work-card:nth-child(1) .work-info p { animation-delay: 0ms; }
.logo-landing .works-grid .work-card:nth-child(2) .work-info h3,
.logo-landing .works-grid .work-card:nth-child(2) .work-info p { animation-delay: 120ms; }
.logo-landing .works-grid .work-card:nth-child(3) .work-info h3,
.logo-landing .works-grid .work-card:nth-child(3) .work-info p { animation-delay: 240ms; }
@keyframes caseReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Vantagens: 3 cards por linha, largura conforme conteúdo e textos centralizados */
.logo-landing .about[aria-labelledby="vantagens"] .grid { grid-template-columns: repeat(3, 1fr); justify-content: center; }
.logo-landing .about[aria-labelledby="vantagens"] .card { width: 100%; }
.logo-landing .about[aria-labelledby="vantagens"] .card-body { text-align: center; }
@media (max-width: 864px) { .logo-landing .about[aria-labelledby="vantagens"] .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .logo-landing .about[aria-labelledby="vantagens"] .grid { grid-template-columns: 1fr; justify-content: center; } }
.logo-landing .about[aria-labelledby="vantagens"] .card-body strong { display: block; font-size: 22px; margin-bottom: 4px; }
.logo-landing .about[aria-labelledby="vantagens"] .card-body .icon { display: block; width: 44px; height: 44px; margin: 0 auto 8px; color: #fff; }
/* Minha conta (sanfona) */
.account-panel { overflow: hidden; }
.account-panel .card-body { animation: accountReveal 240ms ease; }
@keyframes accountReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.account-panel input[readonly] { background: #0e0e10; color: #999; }
.help-panel input[readonly],
.help-panel input[disabled] {
  background: #0c0c0f;
  color: var(--muted);
  border-color: #1a1a1d;
  opacity: 1;
}
.help-panel input[disabled] { cursor: not-allowed; }
/* Títulos das sanfonas com fonte Splash */
.account-panel > .card-body > h3,
.files-panel > .card-body > h3,
.contract-panel > .card-body > h3,
.help-panel > .card-body > h3,
.account-panel > .card-body > h3,
.files-panel > .card-body > h3,
.projects-active-panel > .card-body > h3 {
  font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 5vw, 48px);
}
/* Client Area: padronizar todos os links com peso 100 */
.client-area a { font-weight: 100; }
.client-area .btn { font-weight: 100; }
/* Bloquear scroll horizontal apenas; manter scroll vertical normal */
html { overflow-x: hidden; overflow-y: scroll; }
body { overflow: visible; }
.toast { position: fixed; right: 20px; bottom: 20px; background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 12px 16px; border-radius: 14px; box-shadow: 0 8px 20px rgba(0,0,0,0.4); z-index: 1000; opacity: 0; transform: translateY(8px); transition: opacity 300ms ease, transform 300ms ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: var(--accent); color: #000; border-color: transparent; }
.toast.error { background: #2b1317; color: #fff; border-color: #3b1b20; }
.toast.loading { background: var(--card); color: var(--muted); }
.toast.inline { position: static; right: auto; bottom: auto; margin-top: 12px; width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; box-shadow: 0 8px 20px rgba(0,0,0,0.2); transform: none; }
.contact-form .actions .toast.inline { width: auto; margin-top: 0; }
.contact[aria-labelledby="video-title"] .section-head { flex-direction: column; align-items: flex-start; justify-content: initial; gap: 8px; }
.contact[aria-labelledby="video-title"] .section-head .section-meta { text-align: left; }
#projects-title { font-family: 'Splash', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 58px; font-weight: 400; line-height: 1.4; }
#cms-login-title { font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; }
#client-login-title { font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; padding: 0 0 20px 0; font-size: 50px; }
#client-projects-title, #client-repo-title { font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; text-align: left; }
#cms-title { font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; }
#projects-meta { line-height: 1.4; }
#projects-title { font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; }
.client-login .section-head { justify-content: flex-start; align-items: flex-start; }
.client-login .section-head h2 { text-align: left; margin: 0; }
.vendor-page .contact .section-head { justify-content: flex-start; align-items: flex-start; }
.vendor-page .contact .section-head h2 { font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; text-align: left; margin: 0; }
/* Títulos de login: padronizar fonte e tamanho */
#cms-login-title { font-size: 50px; }
.vendor-page #sales-login-section .section-head h2 { font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; font-size: 50px; text-align: left; margin: 0; }
.client-area { display: flex; min-height: 100vh; flex-direction: column; }
.projects-collapsed .project-card-details { display: none; }
.projects-collapsed .project-card-title { cursor: pointer; }
.client-area main { flex: 1 0 auto; }
.client-area .site-footer { margin-top: auto; }
/* Área do Cliente: reduzir e padronizar distância do topo até o título */
.client-area .about, .client-area .contact, .client-area .featured { padding-top: 60px; }
.cms-login .section-head { justify-content: flex-start; align-items: flex-start; }
.cms-login .section-head h2 { text-align: left; margin: 0; }
.cms-page { display: flex; min-height: 100vh; flex-direction: column; }
.cms-page main { flex: 1 0 auto; }
.cms-page .site-footer { margin-top: auto; }
/* Vendas: manter rodapé colado ao bottom conforme padrão */
.vendor-page { display: flex; min-height: 100vh; flex-direction: column; }
.vendor-page main { flex: 1 0 auto; }
.vendor-page .site-footer { margin-top: auto; }

/* Vendas: sanfonas e título */
.vendor-page .sales-dashboard { padding-top: 120px; }
.vendor-page .sales-dashboard .section-head { justify-content: flex-start; align-items: flex-start; }
.vendor-page .sales-dashboard .section-head h2 { text-align: left; margin: 0; }
.vendor-page .sales-dashboard .card { background:#111111; border:none; border-radius:0; width:100%; max-width:none; margin:16px 0 0; box-shadow:none; }
.vendor-page .sales-dashboard .card .section-head h3 { font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; font-size:48px; line-height:1.1; margin:0 0 8px; text-align: center; }
.vendor-page .sales-dashboard .card .form-note { font-size:20px; line-height:1.5; }

.cms-login { padding-top: 60px !important; }
.vendor-page #sales-login-section { padding-top: 60px !important; }
.vendor-page .sales-dashboard { padding-top: 60px; }

@media (max-width: 900px) {
  .cms-login { padding-top: 48px !important; }
  .vendor-page #sales-login-section { padding-top: 48px !important; }
  .vendor-page .sales-dashboard { padding-top: 48px; }
}
@media (max-width: 640px) {
  .cms-login { padding-top: 40px !important; }
  .vendor-page #sales-login-section { padding-top: 40px !important; }
  .vendor-page .sales-dashboard { padding-top: 40px; }
}
/* CMS: estilo específico para o botão "Sair" no topo direito */
.client-area .nav [id$='logout'], .cms-page .nav [id$='logout'], .vendor-page .nav [id$='logout'] { background: #ffffff; color: #000000; border-radius: 6px; padding: 8px 12px; transition: transform .15s ease, box-shadow .15s ease, color .15s ease, background-color .15s ease; display: inline-block; text-align: center; width: auto; min-width: 0; }
.client-area .nav [id$='logout']:hover, .cms-page .nav [id$='logout']:hover, .vendor-page .nav [id$='logout']:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,255,255,0.08), 0 0 0 8px rgba(255,255,255,0.12); }
/* (revert) sidebar CMS removida: voltar ao menu superior padrão */
#clients-type { background: #1a1d24; color: var(--text); border: 1px solid #2a2c34; }
#clients-type:hover, #clients-type:focus { background: #1f232b; border-color: #3a3d44; }

/* Active tab highlight */
.actions a.active { background: #11d6ba; border-color: #11d6ba; color: #000; box-shadow: 0 0 0 6px rgba(17,214,186,0.15); }
.actions a.active:hover { transform: none; filter: none; box-shadow: 0 0 0 6px rgba(17,214,186,0.15); }

/* CMS: Projetos Ativos — remover borda e radius dos cards */
#cms-projects-active .card {
  border: none;
  border-radius: 0;
}
#cms-projects-active {
  border: none;
  border-radius: 0;
}
#cms-projects-active #projects-active-list > .card {
  border: 1px solid var(--border);
  border-radius: 0;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
  will-change: transform;
}
#cms-projects-active #projects-active-list > .card:hover {
  background-color: #121218;
  border-color: #3a3c47;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}
.client-area #client-welcome strong { font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; }

@font-face {
  font-family: 'LexendDeca-ExtraBold';
  src: url('../fonts/LexendDeca-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* Ajuste de espaçamento do login de clientes */
.client-login .section-head { margin-bottom: 8px; }
.client-login .card { margin-top: 8px; }
/* Avatar hover border na área do cliente */
#client-menu-avatar:hover, #account-avatar:hover { border-color: #ee2945; }

/* Servicos: títulos com Lexend ExtraBold */
.services-page .section-head h2 {
  font-family: 'LexendDeca-ExtraBold', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
}
/* Astronauta flutuando no CMS */
@keyframes bt-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.astronaut {
  animation: bt-float 6s ease-in-out infinite;
  will-change: transform, opacity;
}
.astronaut-pb {
  animation: bt-float 6s ease-in-out infinite;
  will-change: transform, opacity;
}
.cms-astronaut .astronaut,
.cms-astronaut .astronaut-pb {
  transition: opacity 3000ms ease-in-out;
}
.cms-astronaut .astronaut { opacity: 0; }
.cms-astronaut .astronaut-pb { opacity: 1; }
.cms-astronaut.is-hovering .astronaut { opacity: 1; }
.cms-astronaut.is-hovering .astronaut-pb { opacity: 0; }

@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  .header-inner { justify-content: flex-start; gap: clamp(12px, 12vw, 300px); }
  .menu-toggle { margin-right: 0; }
  .container { padding: 0 clamp(12px, 4vw, 24px); }
  .cms-astronaut .astronaut,
  .cms-astronaut .astronaut-pb { max-width: 100% !important; height: auto !important; }
  .cms-astronaut .astronaut { margin-top: 0 !important; margin-bottom: 0 !important; }
}

@media (max-width: 640px) {
  /* Consistência de escala em navegadores móveis (Samsung Internet) */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* Header: permitir duas linhas e slogan abaixo da logo */
  .header-inner { height: auto; }
  .logo { flex-direction: column; align-items: flex-start; }
  .logo .logo-tagline { margin-left: 0; margin-top: 6px; text-align: left; }

  /* Fallback para navegadores sem suporte a clamp() */
  .container { padding: 0 12px; }
  html, body { overflow-x: hidden; }
  .header-inner { justify-content: flex-start; gap: clamp(12px, 18vw, 300px); }
  .menu-toggle { margin-right: 0; }
  .container { padding: 0 clamp(10px, 3.5vw, 20px); }
  .nav a { font-size: 16px; }
  .section-meta { font-size: 18px; }
  .about-text p { font-size: 18px; }
  .btn { font-size: 18px; padding: 14px 20px; }
  .post-card h3 { font-size: 24px; }
  .cms-astronaut { margin: 8px auto !important; }
  .cms-astronaut img { max-width: 100%; height: auto; }
  .cms-astronaut .astronaut,
  .cms-astronaut .astronaut-pb { max-width: 100% !important; height: auto !important; }
  .cms-astronaut .astronaut { margin-top: 0 !important; margin-bottom: 0 !important; }
}

/* Overrides: menu sanfona empurrando conteúdo e largura cheia do container */
@media (max-width: 900px) {
  .site-header { position: fixed; top: 0; left: 0; right: 0; }
  .header-inner { flex-wrap: wrap; justify-content: space-between; }
  .nav { position: fixed; top: var(--header-base); left: 0; right: 0; width: 100%; overflow: hidden; max-height: 0; opacity: 0; pointer-events: none; padding: 0; margin-top: 0; border: none; border-radius: 0; background: var(--bg); box-shadow: none; flex-direction: column; gap: 12px; transition: max-height 300ms ease, opacity 200ms ease, padding 300ms ease, box-shadow 300ms ease, border-color 300ms ease; z-index: 1200; }
  .nav.open { max-height: 80vh; opacity: 1; pointer-events: auto; padding: 12px; border: none; box-shadow: 0 12px 24px rgba(0,0,0,0.4); overflow-y: auto; }
  .nav a { padding: 10px 12px; text-align: left; }
}

@media (max-width: 640px) {
  .site-header { position: fixed; top: 0; left: 0; right: 0; }
  .header-inner { flex-wrap: wrap; justify-content: space-between; }
  .menu-toggle { margin-right: clamp(0px, 2vw, 16px); }
  .nav { position: fixed; top: var(--header-base); left: 0; right: 0; width: 100%; overflow: hidden; max-height: 0; opacity: 0; pointer-events: none; padding: 0; margin-top: 0; border: none; border-radius: 0; background: var(--bg); box-shadow: none; flex-direction: column; gap: 12px; transition: max-height 300ms ease, opacity 200ms ease, padding 300ms ease, box-shadow 300ms ease, border-color 300ms ease; }
  .nav.open { max-height: 80vh; opacity: 1; pointer-events: auto; padding: 12px; border: none; box-shadow: 0 12px 24px rgba(0,0,0,0.4); overflow-y: auto; }
  @supports not (width: 100%) {
    .nav { width: 320px; margin-left: auto; margin-right: auto; }
  }
  .cms-astronaut { width: 100%; display: flex; justify-content: center; }
}
/* Correção de alinhamento: botão hambúrguer à direita, alinhado com a logo */
@media (max-width: 900px) {
  .header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .logo { order: 1; }
  .menu-toggle { order: 2; margin-left: auto; }
  .nav { order: 3; }
  .site-header { padding-top: 16px; }
}

@media (max-width: 640px) {
  .header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .logo { order: 1; }
  .menu-toggle { order: 2; margin-left: auto; }
  .nav { order: 3; }
}

/* Evitar dupla barra de rolagem quando menu estiver aberto */
body.menu-open { overflow: hidden; }

/* Avatar hover na área interna dos clientes */
#client-menu-avatar,
#account-avatar,
#cms-menu-avatar,
#cms-acc-avatar-img { transition: transform 200ms ease, filter 200ms ease, border-color 200ms ease; cursor: pointer; }
#client-menu-avatar:hover,
#account-avatar:hover,
#cms-menu-avatar:hover,
#cms-acc-avatar-img:hover { filter: brightness(1.05); transform: scale(1.02); border-color: var(--accent); }

@media (max-width: 640px) {
  .client-login { padding-top: 60px !important; }
  .cms-login { padding-top: 60px !important; }
  .vendor-page #sales-login-section { padding-top: 60px !important; }
}

/* CMS: submenu Edições sob o título — responsivo */
@media (max-width: 900px) {
  #edicoes-submenu { justify-content: center; }
  #edicoes-submenu .btn { min-height: 40px; padding: 10px 14px; }
}

/* Vendas: responsividade dos botões de login */
@media (max-width: 640px) {
  .vendor-page .login-actions { display: grid !important; grid-template-columns: repeat(2, 1fr); justify-items: center; column-gap: 10px; row-gap: 10px; }
  .vendor-page .login-actions .btn { min-height: 48px; padding: 12px 16px; width: auto; }
}
#cms-menu-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); background: #222; }
/* CMS Soluções: estilos específicos */
#cms-solutions .card, #cms-solutions .card-body { background: #111111; }
#cms-solutions .field input, #cms-solutions .field textarea, #cms-solutions .field select { background: #111111; }
#cms-solutions input[type="checkbox"] { width: 16px; height: 16px; accent-color: #ee2945; }
#cms-solutions .btn { padding: 6px 10px; min-height: 32px; }
/* CMS Soluções: compactar controles */
#cms-solutions .btn { padding: 6px 10px; min-height: 32px; }
#cms-solutions input[type="text"],
#cms-solutions textarea,
#cms-solutions select { padding: 6px 10px; min-height: 32px; }
/* CMS Diagnósticos: padronizar botões */
#cms-diagnostics .actions { display: flex; gap: 10px; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
#cms-diagnostics .actions .btn { min-height: 48px; padding: 12px 16px; }