/* ============================================
   RRB DESIGN STUDIO — FIEL AO FRAMER
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;0,900;1,400&display=swap');

/* ===== TOKENS ===== */
:root {
  --accent: #29ABE2;
  --bg: #0D0D0D;
  --bg2: #161616;
  --bg3: #1E1E1E;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --grid-line: rgba(255,255,255,0.08);
  --text: #FFFFFF;
  --text-muted: #8A8A8A;
  --text-dim: #B8B8B8;
  --radius-out: 24px;
  --radius-in: 14px;
  --radius-img: 10px;
  --max-w: 1180px;
  --grid: 24px;
  --pad: 40px;
  --t: 0.25s ease;
}
[data-theme="light"] {
  --bg: #F0F0F0;
  --bg2: #E6E6E6;
  --bg3: #DCDCDC;
  --border: rgba(0,0,0,0.09);
  --border-strong: rgba(0,0,0,0.14);
  --grid-line: rgba(0,0,0,0.05);
  --text: #0D0D0D;
  --text-muted: #6A6A6A;
  --text-dim: #444;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  position: relative;
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background var(--t), color var(--t);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

body::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  pointer-events: none;
}

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
.section { padding: 40px 0; position: relative; z-index: 1; }

/* NAVBAR */
.navbar { position: sticky; top: 0; z-index: 100; background: rgba(13,13,13,0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: background var(--t); }
[data-theme="light"] .navbar { background: rgba(240,240,240,0.9); }
.navbar-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img { height: 24px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.nav-links a { font-size: 0.9rem; font-weight: 400; color: var(--text); transition: color var(--t); }
.nav-links a:hover { color: var(--accent); }
.nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* ===== BOTÕES (padrão único: cinza -> borda azul hover -> azul preenchido pressed) ===== */
.btn-whatsapp, .btn-outline, .footer-btn {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.btn-whatsapp:hover, .btn-outline:hover, .footer-btn:hover { border-color: var(--accent); }
.btn-whatsapp:active, .btn-outline:active, .footer-btn:active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn-whatsapp { padding: 9px 22px; font-size: 0.9rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.btn-whatsapp .wa-icon { flex-shrink: 0; }
.btn-outline { padding: 13px 32px; font-size: 0.9rem; letter-spacing: 0.02em; }
.footer-btn { padding: 9px 24px; font-size: 0.9rem; background: var(--bg2); border-color: rgba(255,255,255,0.28); }
.footer-btn:hover { background: var(--bg3); border-color: var(--accent); }
[data-theme="light"] .footer-btn { background: var(--bg2); border-color: rgba(0,0,0,0.28); }

.icon-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  width: 36px; height: 36px;
  border-radius: 9px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.icon-btn:hover { border-color: var(--accent); }
.icon-btn:active { background: var(--accent); border-color: var(--accent); color: #fff; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform var(--t), opacity var(--t); }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
.mobile-menu { display: none; position: fixed; inset: 0; background: var(--bg); z-index: 99; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 40px; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 1.8rem; font-weight: 700; color: var(--text); transition: color var(--t); }
.mobile-menu a:hover { color: var(--accent); }
.mobile-menu-bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 12px; }
.mobile-menu-bottom .btn-whatsapp { font-size: 1rem; padding: 12px 32px; }
.mobile-menu-icons { display: flex; gap: 10px; }

/* LOGO RRB */
.nav-logo img, .hero-logo, .footer-logo img { filter: invert(1) brightness(1.7); transition: filter var(--t); }
[data-theme="light"] .nav-logo img, [data-theme="light"] .hero-logo, [data-theme="light"] .footer-logo img { filter: none; }

/* HERO */
.hero { padding: 32px 0 56px; }
.hero-card { background: var(--bg2); border-radius: var(--radius-out); padding: 72px 56px; display: flex; flex-direction: column; align-items: center; }
.hero-logo-wrap { display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; }
.hero-logo { width: 300px; max-width: 60%; }
.hero-logo-sub { font-size: 1.6rem; font-weight: 500; color: var(--accent); letter-spacing: 0.01em; margin-top: 6px; }
.hero-body { width: 100%; max-width: 900px; margin-top: 40px; }
.hero-title { font-size: clamp(2.2rem, 4.4vw, 3.8rem); font-weight: 900; line-height: 1.08; color: var(--text); text-align: left; margin-bottom: 24px; }
.hero-sub { font-size: 1.15rem; color: var(--text-muted); text-align: left; margin-bottom: 36px; }
.hero-cta { text-align: center; }

.section-label { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 28px; display: block; }

/* CASES */
.cases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.case-card { display: flex; flex-direction: column; cursor: pointer; background: var(--bg2); border-radius: var(--radius-out); padding: 32px; transition: background var(--t); }
.case-card:hover { background: var(--bg3); }
.case-tag { align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text); background: rgba(41,171,226,0.25); border: 1px solid rgba(41,171,226,0.4); padding: 5px 12px; border-radius: 8px; margin-bottom: 20px; }
.case-card-media { position: relative; height: 280px; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; }
.case-card-media img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.case-card-media.duo { gap: 20px; }
.ba-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 12px; flex: 1; }
.ba-item img { max-height: 90%; max-width: 100%; width: auto; object-fit: contain; }
.ba-item figcaption { font-size: 0.95rem; color: var(--text-dim); }
.case-card-client { font-size: 0.85rem; color: var(--text-muted); letter-spacing: 0.03em; margin-bottom: 8px; }
.case-card-title { font-size: 1.35rem; font-weight: 700; color: var(--text); line-height: 1.25; margin-bottom: 14px; }
.case-card-desc { font-size: 0.98rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 22px; }
.case-card-divider { height: 1px; background: var(--border); margin-bottom: 22px; margin-top: auto; }
.case-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.metric-val { font-size: 1.25rem; font-weight: 700; color: var(--text); display: block; margin-bottom: 4px; }
.metric-lbl { font-size: 0.85rem; color: var(--text-muted); display: block; line-height: 1.35; }

/* FRAME ÚNICO */
.unified-frame { background: var(--bg2); border-radius: var(--radius-out); overflow: hidden; }
.unified-block { padding: var(--pad); }
/* divisão entre seções pela cor de fundo, não por linha */
.unified-block.sobre-block { background: var(--bg2); padding: 0; }
.unified-block.process-block { background: #131313; }
.unified-block.areas-block { background: var(--bg2); }
[data-theme="light"] .unified-block.process-block { background: #EAEAEA; }

.sobre-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.sobre-foto { position: relative; overflow: hidden; border-radius: var(--radius-out) 0 0 0; min-height: 540px; }
.sobre-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sobre-info { display: flex; flex-direction: column; justify-content: center; padding: var(--pad); }
.sobre-role-accent { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.08em; color: var(--accent); text-transform: uppercase; display: block; margin-bottom: 14px; }
.sobre-name { font-size: 1.5rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.sobre-role2 { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.06em; color: var(--accent); text-transform: uppercase; margin-bottom: 22px; display: block; }
.sobre-text { font-size: 1rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 16px; }
.sobre-text strong { color: var(--text); font-weight: 700; }
.steps-grid, .areas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.step-card, .area-item { background: var(--bg3); border-radius: var(--radius-in); padding: 32px; }
.step-card { display: flex; gap: 28px; align-items: center; }
.step-num { font-size: 4.2rem; font-weight: 900; color: rgba(255,255,255,0.18); line-height: 0.85; flex-shrink: 0; min-width: 64px; text-align: center; }
[data-theme="light"] .step-num { color: rgba(0,0,0,0.14); }
.step-title { font-size: 1.15rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.step-desc { font-size: 0.98rem; color: var(--text-muted); line-height: 1.55; }
.area-title { font-size: 1.15rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.area-desc { font-size: 0.98rem; color: var(--text-muted); line-height: 1.55; }

/* CLIENTES */
.clients-frame { background: var(--bg2); border-radius: var(--radius-out); padding: var(--pad); }
.clients-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.client-item { height: 150px; display: flex; align-items: center; justify-content: center; padding: 28px; background: var(--bg3); border-radius: var(--radius-in); }
.client-item img { max-height: 70px; max-width: 170px; width: auto; height: auto; object-fit: contain; filter: invert(1) brightness(0.7); opacity: 0.85; transition: opacity var(--t), filter var(--t); }
.client-item:hover img { filter: invert(1) brightness(0.95); opacity: 1; }
[data-theme="light"] .client-item img { filter: brightness(0.6); opacity: 0.7; }
[data-theme="light"] .client-item:hover img { filter: brightness(0.3); opacity: 1; }

/* FOOTER */
.footer { padding: 56px 0 40px; position: relative; z-index: 1; }
.footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 32px; }
.footer-logo img { width: 90px; height: auto; }
.footer-logo-sub { font-size: 0.85rem; color: var(--accent); letter-spacing: 0.02em; display: block; margin-top: 2px; }
.footer-center { text-align: center; }
.footer-center p, .footer-center a { font-size: 0.95rem; color: var(--text-muted); display: block; margin-bottom: 6px; transition: color var(--t); }
.footer-center a:hover { color: var(--accent); }
.footer-btns { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.footer-right { text-align: right; }
.footer-right p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 6px; }

/* CASE PAGES */
.case-hero-section { padding: 40px 0; position: relative; z-index: 1; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 28px; transition: color var(--t); }
.back-link:hover { color: var(--accent); }
.case-tag-inline { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text); background: rgba(41,171,226,0.25); border: 1px solid rgba(41,171,226,0.4); padding: 5px 12px; border-radius: 8px; display: inline-block; margin-bottom: 24px; margin-left: 12px; }
.case-h1 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 900; line-height: 1.08; color: var(--text); margin-bottom: 24px; }
.case-h1 .muted { color: var(--text-muted); }
.case-intro { font-size: 1rem; color: var(--text-muted); max-width: 680px; line-height: 1.7; margin-bottom: 40px; }
.case-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-bottom: 48px; position: relative; z-index: 1; }
.case-block-label { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; color: var(--accent); text-transform: uppercase; margin-bottom: 16px; display: block; }
.case-block-text { font-size: 0.98rem; color: var(--text-dim); line-height: 1.75; }
.case-block-text strong { color: var(--text); font-weight: 700; }
.case-block-text p + p { margin-top: 16px; }
.case-divider { height: 1px; background: var(--border); margin: 32px 0; }
.img-grid { display: grid; gap: 20px; margin: 32px 0; position: relative; z-index: 1; }
.img-grid.cols2 { grid-template-columns: 1fr 1fr; }
.img-grid.cols3 { grid-template-columns: 1fr 1fr 1fr; }
.img-box { background: var(--bg2); border-radius: var(--radius-in); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; padding: 24px; }
.img-box.square { border-radius: 0; }
.img-box img { max-width: 80%; max-height: 80%; width: auto; object-fit: contain; }
.img-label { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--text-muted); text-align: center; margin-top: 10px; text-transform: uppercase; }
.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; position: relative; z-index: 1; }
.result-card { background: var(--bg2); border-radius: var(--radius-in); padding: 32px; display: flex; gap: 24px; align-items: flex-start; }
.result-num { font-size: 3.4rem; font-weight: 900; color: rgba(255,255,255,0.16); line-height: 0.9; flex-shrink: 0; min-width: 52px; }
[data-theme="light"] .result-num { color: rgba(0,0,0,0.13); }
.result-text { font-size: 0.98rem; color: var(--text-dim); line-height: 1.6; }
.result-text strong { color: var(--text); }
.data-section { background: var(--bg2); border-radius: var(--radius-out); padding: 40px; margin: 32px 0; position: relative; z-index: 1; }
.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.peso-bar-wrap { margin: 16px 0; }
.peso-bar-track { height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.peso-bar-fill { height: 100%; border-radius: 3px; }
.peso-labels { display: flex; justify-content: space-between; margin-top: 12px; }
.peso-item { font-size: 0.9rem; }
.peso-val { font-weight: 700; color: var(--text); }
.peso-lbl { color: var(--text-muted); }
.legend { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.legend-item { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--text-dim); }
.legend-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.anatomy-wrap { position: relative; margin: 40px 0; padding: 40px 150px; }
.anatomy-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.anatomy-label { position: absolute; max-width: 155px; font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }
.cases-page-hero { padding: 40px 0; position: relative; z-index: 1; }
.cases-page-title { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 900; line-height: 1.1; margin-bottom: 20px; }
.cases-page-title .muted { color: var(--text-muted); }
.cases-page-sub { font-size: 1rem; color: var(--text-muted); }

/* ===== CASE INTERNO: HERO (padrão global — título topo-esquerda, texto na base) ===== */
.case-hero-title { font-size: clamp(2.2rem, 4.4vw, 3.8rem); font-weight: 900; line-height: 1.08; margin-bottom: 0; max-width: 620px; text-align: left; }
.case-hero-title .muted { color: var(--text-muted); }
/* grid: coluna esquerda (título topo + texto base) | direita (imagens) */
.hero-block-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; min-height: 620px; }
.hero-left { display: flex; flex-direction: column; justify-content: space-between; }
.case-hero-intro { font-size: 1.05rem; color: var(--text-muted); line-height: 1.6; max-width: 440px; text-align: left; }
.case-duo { display: flex; gap: 40px; align-items: flex-end; justify-content: center; }
.case-duo figure { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.case-duo img { max-width: 100%; height: auto; object-fit: contain; }
.case-duo .small { align-self: flex-end; }
.case-duo .small img { max-height: 380px; }
.case-duo .large { align-self: flex-start; }
.case-duo .large img { max-height: 560px; }
.case-duo figcaption { font-size: 0.8rem; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; text-align: center; }

/* ===== CASE INTERNO: FRAME ÚNICO (blocão) ===== */
.case-frame { background: #1A1A1A; border-radius: var(--radius-out); overflow: hidden; }
[data-theme="light"] .case-frame { background: var(--bg2); }
.case-frame-block { padding: var(--pad); }
.case-frame-block.alt { background: #0B0B0B; }
[data-theme="light"] .case-frame-block.alt { background: #EAEAEA; }

/* Desafio/Solução: imagem + texto */
.ds-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; }
.ds-img { display: flex; align-items: center; justify-content: center; }
.ds-img img { max-height: 480px; max-width: 100%; object-fit: contain; }
.ds-text-block .case-block-label { margin-top: 0; }
.ds-divider { height: 1px; background: var(--border); margin: 32px 0; }

/* Volume + gráfico: esquerda (texto+legenda+peso) | direita (gráfico 3D) */
.vol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.vol-graph img { width: 100%; height: auto; object-fit: contain; }
.vol-text .case-block-label { margin-top: 0; }
.vol-lead { font-size: 1.25rem; font-weight: 400; color: var(--text-muted); line-height: 1.4; margin-bottom: 28px; }
.vol-lead strong { color: var(--text); font-weight: 700; }
.legend { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
.legend-item { display: flex; align-items: center; gap: 14px; font-size: 1.05rem; color: var(--text-muted); }
.legend-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }

/* Peso (agora embaixo do texto de volume, na coluna esquerda) */
.peso-block { margin-top: 8px; }
.peso-bar-wrap { margin: 20px 0 16px; }
.peso-bar-track { height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 8px; background: transparent; }
.peso-bar-fill { height: 100%; border-radius: 4px; }
.peso-labels { display: flex; justify-content: space-between; margin-top: 16px; }
.peso-item { font-size: 1.1rem; }
.peso-val { font-weight: 400; color: var(--text-muted); display: block; }
.peso-item.novo .peso-val { color: var(--text); }
.peso-lbl { color: var(--text-muted); font-size: 0.95rem; }
.peso-highlight { font-weight: 700; color: var(--text); font-size: 1.2rem; margin-top: 20px; }

/* ===== CASE RIDET ===== */
.ridet-title .tl { display: block; }
.ridet-imgrow { display: flex; gap: 48px; justify-content: center; align-items: flex-end; margin: 24px auto; }
.ridet-imgrow .a4 { max-height: 440px; }
.ridet-imgrow .a3 { max-height: 540px; }
.ridet-imgrow img { max-width: 100%; object-fit: contain; }
.ba-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 32px 0; align-items: end; }
.ba-compare figure { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ba-compare img { max-height: 420px; max-width: 100%; object-fit: contain; }
.ba-compare figcaption { font-size: 0.8rem; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; }
/* Desafio: encartes com topo alinhado + caption dentro do bloco */
.encartes-align-wrap { display: inline-flex; flex-direction: column; align-items: stretch; max-width: 100%; }
.encartes-aligned-text { max-width: 960px; }
.encartes-block { max-width: 960px; margin: 32px 0 0; position: relative; }
.encartes-row { display: flex; gap: 24px; justify-content: flex-start; align-items: flex-start; }
.encartes-row img { align-self: flex-start; display: block; }
.enc-solo { height: 420px; width: auto; object-fit: contain; object-position: top; }
.enc-stack { height: 640px; width: auto; object-fit: contain; object-position: top; }
.encartes-caption { position: absolute; left: 0; bottom: 0; max-width: 620px; text-align: left; }
.encartes-label { font-size: 0.8rem; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; text-align: left; margin-bottom: 20px; }
.encartes-overlay-text { font-size: 1.05rem; color: var(--text-muted); line-height: 1.7; text-align: left; }
.solve-list { list-style: none; padding: 0; margin-top: 20px; }
.solve-list li { font-size: 1.05rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 18px; padding-left: 20px; position: relative; }
.solve-list li::before { content: '•'; position: absolute; left: 0; color: var(--text-muted); }

/* diagrama numerado: imagem + legenda embaixo, alinhada esquerda e centralizada com a imagem */
.anatomy-num { max-width: 440px; margin: 48px auto; display: flex; flex-direction: column; align-items: stretch; }
.anatomy-num-img { width: 100%; height: auto; display: block; }
.anatomy-legend { list-style: none; counter-reset: anat; padding: 0; margin: 28px 0 0; text-align: left; }
.anatomy-legend li { counter-increment: anat; font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 10px; padding-left: 26px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anatomy-legend li::before { content: counter(anat) " –"; position: absolute; left: 0; color: var(--text); font-weight: 700; }

.dif-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 24px 0; }
.dif-grid img { width: 100%; height: auto; object-fit: contain; }

/* Resultado: cards iguais aos da Home (compactos, número + texto bold) */
.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.result-card { background: var(--bg3); border-radius: var(--radius-in); padding: 28px 28px; display: flex; gap: 24px; align-items: center; }
.result-num { font-size: 3rem; font-weight: 900; color: rgba(255,255,255,0.16); line-height: 0.9; flex-shrink: 0; min-width: 44px; text-align: left; }
[data-theme="light"] .result-num { color: rgba(0,0,0,0.13); }
.result-text { font-size: 0.95rem; color: var(--text-muted); line-height: 1.5; }
.result-text strong { color: var(--text); font-weight: 700; }

/* RESPONSIVE */

/* ===== CASE AGMOV ===== */
.agmov-hero-img { display: flex; justify-content: center; margin: 56px 0 44px; }
.agmov-hero-img img { max-width: 82%; max-height: 470px; width: auto; object-fit: contain; }
.agmov-intro { font-size: 1rem; color: var(--text-muted); max-width: 640px; line-height: 1.7; }

/* Desafio: foto à esquerda + texto à direita, centralizado verticalmente na altura da foto */
.agmov-desafio { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.agmov-desafio-photo { border-radius: var(--radius-in); overflow: hidden; }
.agmov-desafio-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Exploração: desenho técnico (topo-esq) + render (deslocado p/ baixo-dir) */
.agmov-explore { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; margin-top: 52px; }
.agmov-explore .render { margin-top: 96px; }
.agmov-explore img { width: 100%; object-fit: contain; display: block; }

/* Perspectiva grande centralizada (manopla + gatilho + cabo amarelo) */
.agmov-persp { display: flex; justify-content: center; margin: 44px 0 8px; }
.agmov-persp img { max-width: 82%; max-height: 540px; width: auto; object-fit: contain; }

/* ===== CASE COLGATE ===== */
.colg-hero { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 48px; align-items: stretch; }
.colg-hero-left { display: flex; flex-direction: column; justify-content: space-between; }
.colg-hero-left .case-hero-title { margin-bottom: 0; }
.colg-hero-intro { font-size: 1rem; color: var(--text-muted); line-height: 1.7; max-width: 470px; margin-top: 48px; }
.colg-hero-sketch { display: flex; align-items: flex-start; justify-content: center; }
.colg-hero-sketch img { max-width: 100%; max-height: 660px; object-fit: contain; }

/* Desafio + Solução: display realista à esquerda (alto), textos à direita */
.colg-ds { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: center; }
.colg-ds-photo { display: flex; justify-content: center; }
.colg-ds-photo img { max-width: 100%; max-height: 740px; object-fit: contain; }
.colg-ds-divider { height: 1px; background: var(--border); margin: 36px 0; }

/* Trio de displays: Protex / Colgate / Palmolive */
.colg-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; align-items: end; margin-top: 56px; }
.colg-trio img { max-width: 100%; max-height: 540px; object-fit: contain; margin: 0 auto; display: block; }

@media (max-width: 900px) {
  :root { --pad: 24px; }
  .wrap { padding: 0 18px; }
  .navbar-inner { padding: 0 18px; }
  .nav-links { display: none; }
  .btn-whatsapp { padding: 8px 12px; }
  .btn-whatsapp .wa-label { display: none; }
  .btn-whatsapp .wa-icon { display: block; }
  .hamburger { display: flex; }
  .hero { padding: 24px 0; }
  .hero-card { padding: 40px 24px; }
  .hero-logo { width: 200px; max-width: 70%; }
  .hero-logo-sub { font-size: 1.2rem; }
  .hero-title { font-size: clamp(1.7rem, 7vw, 2.6rem); }
  .hero-sub { font-size: 1rem; }
  .cases-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
  /* Fix 2: métricas em coluna única (evita sobreposição de texto) */
  .case-metrics { grid-template-columns: 1fr; gap: 12px; }
  /* Fix 1: foto do Renato aparece no mobile — compatível com Safari iOS */
  .sobre-grid { grid-template-columns: 1fr; gap: 0; }
  .sobre-foto { display: block; min-height: 280px; height: 56vw; max-height: 360px; border-radius: var(--radius-out) var(--radius-out) 0 0; position: relative; overflow: hidden; }
  .sobre-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* Fix 4: scroll não esconde título atrás da navbar */
  #sobre, #como-trabalho, #areas, #clientes, #contato { scroll-margin-top: 80px; }
  .steps-grid, .areas-grid { grid-template-columns: 1fr; }
  /* Fix 3: logos clientes menores e dentro dos quadrados */
  .clients-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .client-item { height: 100px; padding: 16px; }
  .client-item img { max-height: 44px; max-width: 110px; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; gap: 24px; }
  .footer-right { text-align: center; }
  .footer-logo { display: flex; flex-direction: column; align-items: center; }
  .case-split { grid-template-columns: 1fr; gap: 24px; }
  .img-grid.cols2, .img-grid.cols3 { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: 1fr; }
  .data-grid { grid-template-columns: 1fr; gap: 24px; }
  /* Cases: hero maior no mobile */
  .cases-page-title { font-size: 2.5rem; }
  /* Ridet mobile */
  .case-hero-title { white-space: normal !important; }
  .ba-compare { grid-template-columns: 1fr; gap: 24px; }
  /* Ridet: só a embalagem A3 no hero mobile */
  .ridet-imgrow { flex-direction: row; justify-content: center; align-items: flex-end; gap: 16px; }
  .ridet-imgrow .a4 { display: none; }
  .ridet-imgrow .a3 { max-height: 460px; }
  .dif-grid { grid-template-columns: 1fr 1fr; }
  .encartes-align-wrap { display: flex; width: 100%; }
  .encartes-aligned-text { max-width: 100%; }
  .encartes-block { max-width: 100%; }
  .encartes-caption { position: static; max-width: 100%; margin-top: 24px; }
  .encartes-row { flex-direction: column; align-items: center; gap: 24px; }
  .enc-solo, .enc-stack { height: auto; max-height: none; max-width: 90%; }
  .anatomy-num { max-width: 100%; }
  /* AGMOV mobile */
  .agmov-hero-img img { max-width: 100%; }
  .agmov-desafio { grid-template-columns: 1fr; gap: 24px; }
  .agmov-explore { grid-template-columns: 1fr; gap: 28px; }
  .agmov-explore .render { margin-top: 0; }
  .agmov-persp img { max-width: 100%; }
  /* COLGATE mobile */
  .colg-hero { grid-template-columns: 1fr; gap: 20px; }
  .colg-hero-left { display: contents; }
  .colg-hero .case-hero-title { order: 1; }
  .colg-hero-sketch { order: 2; }
  .colg-hero-intro { order: 3; margin-top: 8px; max-width: 100%; }
  .colg-hero-sketch img { max-height: 480px; }
  .colg-ds { grid-template-columns: 1fr; gap: 28px; }
  .colg-ds-photo img { max-height: 560px; }
  .colg-trio { grid-template-columns: 1fr; gap: 32px; }
  /* Alvos de toque e segurança de largura */
  .results-grid { grid-template-columns: minmax(0,1fr); }
  .icon-btn { width: 40px; height: 40px; }
  .hamburger { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; box-sizing: border-box; }
  .case-tag, .case-tag-inline { font-size: 0.78rem; }
  /* ===== MAPED (fluopeps) mobile — seguindo os prints ===== */
  /* Hero: título -> imagens (Novo/Internacional) -> texto */
  .hero-block-grid { display: flex; flex-direction: column; gap: 28px; min-height: 0; }
  .hero-left { display: contents; }
  .hero-left .case-hero-title { order: 1; }
  .case-duo { order: 2; gap: 16px; align-items: flex-end; }
  .case-duo figure { flex: 1; min-width: 0; }
  .case-duo .small img { max-height: 230px; }
  .case-duo .large img { max-height: 320px; }
  .case-hero-intro { order: 3; margin-top: 0; }
  /* Desafio/Solução: empilha */
  .ds-grid { grid-template-columns: 1fr; gap: 24px; }
  .ds-img img { max-height: 360px; }
  /* Volume: título -> lead -> gráfico -> legenda -> peso */
  .vol-grid { display: flex; flex-direction: column; gap: 24px; }
  .vol-text { display: contents; }
  .vol-text > .case-block-label { order: 1; }
  .vol-lead { order: 2; }
  .vol-graph { order: 3; }
  .vol-text > .legend { order: 4; margin-bottom: 0; }
  .vol-text > .peso-block { order: 5; }
}