/* Montan — Case imersivo (a página assume a identidade do cliente)
 * Projeto gerado pela MONTAN
 * A Montan fica só no header, no rodapé, na nota e no CTA final.
 */

/* ---- Padrão único: fundo da Montan (cinema dark + musgo) em TODOS os cases ----
 * A cor do cliente aparece dentro dos prints e no brand board, não como fundo. */
.case-immersive {
	--c-bg:#050505; --c-bg2:#0e110d; --c-deep:#0b120a; --c-soft:rgba(255,255,255,.1);
	--c-gold:#5e9e44; --c-ink:#f5f5f3; --c-muted:#a8aaa4; --c-accent:#5e9e44; --c-ondark:#f5f5f3;
	--font-serif:"Fraunces",Georgia,serif;
	background:var(--c-bg); color:var(--c-ink); font-family:var(--font-body);
}
.case-immersive .ci-wrap { max-width:1200px; margin-inline:auto; padding-inline:32px; }
.ci-serif { font-family:var(--font-serif); font-weight:400; letter-spacing:-.01em; }
.ci-kicker { text-transform:uppercase; letter-spacing:.16em; font-size:12px; color:var(--c-accent); font-weight:600; margin:0; }
.ci-sec { padding:78px 0; }
.ci-sec--alt { background:var(--c-bg2); }
.ci-sec--deep { background:var(--c-deep); color:var(--c-ondark); }
.ci-sec__title { font-family:var(--font-serif); font-size:clamp(1.7rem,3.3vw,2.5rem); line-height:1.08; margin:12px 0 18px; max-width:26ch; color:inherit; }
.ci-sec__lede { color:var(--c-muted); max-width:60ch; font-size:1.05rem; margin:0; }
.ci-sec--deep .ci-sec__lede { color:rgba(255,255,255,.82); }

/* ---- Botões ---- */
.ci-btns { display:flex; gap:12px; flex-wrap:wrap; }
.ci-btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:14px; padding:13px 24px; border-radius:999px; border:1px solid transparent; transition:.2s; }
.ci-btn--solid { background:var(--c-deep); color:var(--c-ondark); }
.ci-btn--solid:hover { opacity:.9; color:var(--c-ondark); }
.ci-btn--ghost { background:transparent; color:var(--c-ink); border-color:var(--c-ink); }
.ci-btn--ghost:hover { background:var(--c-deep); color:var(--c-ondark); }

/* ---- Tags ---- */
.ci-tags { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; list-style:none; padding:0; }
.ci-tags li { font-size:12px; border:1px solid var(--c-soft); color:var(--c-ink); background:var(--c-bg2); border-radius:999px; padding:5px 12px; }

/* ---- Devices ---- */
.device-macbook__screen { border:10px solid #15161a; border-radius:14px; overflow:hidden; background:#15161a; box-shadow:0 30px 70px rgba(0,0,0,.28); }
.device-macbook__screen img { display:block; width:100%; }
.device-macbook__base { width:116%; margin-left:-8%; height:14px; background:linear-gradient(#d3d4d8,#a4a6ad); border-radius:0 0 14px 14px; position:relative; }
.device-macbook__base::after { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:14%; height:5px; background:#8a8c93; border-radius:0 0 8px 8px; }
.device-phone { border:8px solid #15161a; border-radius:34px; overflow:hidden; background:#15161a; box-shadow:0 22px 45px rgba(0,0,0,.28); max-width:240px; margin:0 auto; }
.device-phone img { display:block; width:100%; }

/* ---- Hero ---- */
.ci-hero { padding:76px 0 66px; }
.ci-hero__grid { display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:center; }
.ci-hero__title { font-family:var(--font-serif); font-size:clamp(2.1rem,4.2vw,3.3rem); line-height:1.05; margin:16px 0 18px; color:var(--c-ink); }
.ci-hero__intro { font-size:1.1rem; color:var(--c-muted); max-width:46ch; margin:0 0 22px; }
.ci-hero__devices { position:relative; padding-bottom:34px; padding-right:24px; }
.ci-hero__phone { position:absolute; right:-6px; bottom:0; width:32%; max-width:180px; }
.ci-hero__phone .device-phone { box-shadow:0 26px 50px rgba(0,0,0,.35); }

/* ---- Ficha executiva ---- */
.ci-exec { background:var(--c-deep); color:var(--c-ondark); padding:44px 0; }
.ci-exec__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.ci-exec__item dt { font-size:11px; text-transform:uppercase; letter-spacing:.12em; opacity:.65; margin-bottom:7px; }
.ci-exec__item dd { margin:0; font-size:.98rem; font-weight:500; line-height:1.4; }
.ci-exec__note { margin:28px 0 0; font-size:1.06rem; max-width:74ch; opacity:.92; }

/* ---- Desafio ---- */
.ci-challenge__grid { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.ci-points { list-style:none; padding:0; margin:6px 0 0; }
.ci-points li { padding:14px 0; border-top:1px solid var(--c-soft); color:var(--c-muted); font-size:.98rem; }
.ci-points li strong { color:var(--c-ink); display:block; margin-bottom:3px; font-weight:600; }

/* ---- Estratégia ---- */
.ci-strategy { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px; }
.ci-strat { background:var(--c-bg2); border:1px solid var(--c-soft); border-radius:16px; padding:28px 24px; }
.ci-strat__num { font-family:var(--font-serif); font-size:2rem; color:var(--c-gold); line-height:1; }
.ci-strat h3 { font-size:1.05rem; margin:12px 0 8px; color:var(--c-ink); }
.ci-strat p { color:var(--c-muted); font-size:.95rem; margin:0; }

/* ---- Brand board ---- */
.ci-brandboard { display:grid; grid-template-columns:1.2fr 1fr; gap:20px; margin-top:30px; }
.bb-panel { background:var(--c-bg2); border:1px solid var(--c-soft); border-radius:18px; padding:26px; }
.bb-swatches { display:flex; border-radius:12px; overflow:hidden; margin-bottom:20px; border:1px solid var(--c-soft); }
.bb-swatches span { flex:1; height:70px; display:flex; align-items:flex-end; padding:6px; font-size:9px; color:rgba(255,255,255,.85); font-family:var(--font-body); }
.bb-type h4 { font-family:var(--font-serif); font-size:2rem; margin:0; color:var(--c-ink); }
.bb-type p { margin:6px 0 0; color:var(--c-muted); font-size:.95rem; }
.bb-btns { display:flex; gap:10px; margin-top:20px; }
.bb-note { color:var(--c-muted); font-size:.98rem; }

/* ---- Showcase (imagem + texto) ---- */
.ci-showcase { display:grid; grid-template-columns:1.4fr 1fr; gap:44px; align-items:center; }
.ci-showcase--rev .ci-showcase__media { order:2; }
.ci-frame { border-radius:16px; overflow:hidden; border:1px solid var(--c-soft); box-shadow:0 24px 50px rgba(0,0,0,.14); }
.ci-sec--deep .ci-frame { border-color:rgba(255,255,255,.14); }
.ci-frame img { display:block; width:100%; }
.ci-cap { font-size:.86rem; color:var(--c-muted); margin:12px 0 0; }
.ci-list { list-style:none; padding:0; margin:16px 0 0; }
.ci-list li { padding:9px 0 9px 22px; position:relative; color:var(--c-muted); font-size:.98rem; }
.ci-list li::before { content:""; position:absolute; left:0; top:15px; width:8px; height:8px; border-radius:50%; background:var(--c-gold); }
.ci-sec--deep .ci-list li { color:rgba(255,255,255,.82); }

/* ---- Jornada mobile ---- */
.ci-phones { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:36px; }
.ci-phones figure { margin:0; max-width:220px; }
.ci-phones figcaption { text-align:center; font-size:12px; color:var(--c-muted); margin-top:10px; }

/* ---- Diagrama técnico ---- */
.ci-tech__grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.ci-diagram { display:flex; flex-direction:column; align-items:center; gap:0; }
.ci-node { background:var(--c-bg2); border:1px solid var(--c-soft); border-radius:12px; padding:12px 20px; font-weight:600; color:var(--c-ink); font-size:.95rem; text-align:center; min-width:220px; }
.ci-node--accent { background:var(--c-deep); color:var(--c-ondark); border-color:var(--c-deep); }
.ci-node--wide { min-width:280px; }
.ci-node__sub { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:8px; }
.ci-node__sub span { font-size:11px; font-weight:500; background:var(--c-bg); border:1px solid var(--c-soft); border-radius:999px; padding:3px 9px; color:var(--c-muted); }
.ci-arrow { width:2px; height:26px; background:var(--c-soft); }
.ci-sec--deep .ci-node { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:var(--c-ondark); }
.ci-sec--deep .ci-node__sub span { background:transparent; border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.75); }
.ci-sec--deep .ci-arrow { background:rgba(255,255,255,.25); }
.ci-techcards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ci-techcard { background:var(--c-bg2); border:1px solid var(--c-soft); border-radius:12px; padding:16px 18px; }
.ci-techcard h4 { margin:0 0 4px; font-size:.95rem; color:var(--c-ink); }
.ci-techcard p { margin:0; font-size:.85rem; color:var(--c-muted); }
.ci-sec--deep .ci-techcard { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); }
.ci-sec--deep .ci-techcard h4 { color:var(--c-bg2); }
.ci-sec--deep .ci-techcard p { color:rgba(255,255,255,.72); }

/* ---- Resultado ---- */
.ci-results__cols { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:26px; }
.ci-results h3 { font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; color:var(--c-gold); margin:0 0 12px; }

/* ---- Nota Montan + CTA ---- */
.ci-note { text-align:center; padding:26px 0; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-muted); background:var(--c-bg2); border-top:1px solid var(--c-soft); }
.case-immersive .case-consult { background:var(--bg); color:var(--text); border-top:0; }
.case-immersive .case-consult h2 { color:var(--ink); }

/* ---- Responsivo ---- */
@media (max-width:900px) {
	.ci-hero__grid { grid-template-columns:1fr; gap:36px; }
	.ci-exec__grid { grid-template-columns:1fr 1fr; }
	.ci-strategy { grid-template-columns:1fr; }
	.ci-challenge__grid, .ci-showcase, .ci-showcase--rev, .ci-tech__grid, .ci-brandboard, .ci-results__cols { grid-template-columns:1fr; }
	.ci-showcase--rev .ci-showcase__media { order:0; }
	.ci-techcards { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) {
	.case-immersive .ci-wrap { padding-inline:20px; }
	.ci-exec__grid { grid-template-columns:1fr; }
	.ci-sec { padding:56px 0; }
}