/* Site da Outside Produtora (refeito do site do Canva em 10/11/2026; caminho A do pedido à Meta). */
:root {
  --preto: #000;
  --grafite: #111;
  --branco: #fff;
  --texto-claro: #2e2e2e;
  --texto-suave: #555;
  --linha: rgba(255, 255, 255, 0.15);
  --largura: 1180px;
  --margem: clamp(16px, 4vw, 48px);
  --fonte: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 52px; }
body { margin: 0; background: var(--preto); color: var(--branco); font-family: var(--fonte); font-weight: 400;
       line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }

/* menu */
.menu { position: fixed; inset: 0 0 auto 0; z-index: 10; background: var(--preto); height: 52px;
        display: flex; align-items: center; justify-content: flex-end; padding: 0 var(--margem); }
.menu nav { display: flex; gap: clamp(14px, 2vw, 28px); overflow-x: auto; scrollbar-width: none; }
.menu nav::-webkit-scrollbar { display: none; }
.menu a { font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; letter-spacing: .01em; }
.menu a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* blocos */
.secao { padding: clamp(64px, 9vw, 120px) var(--margem); }
.secao > .conteudo { max-width: var(--largura); margin: 0 auto; }
.clara { background: var(--branco); color: var(--texto-claro); }
.escura { background: var(--preto); color: var(--branco); }
.rotulo { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 6px; }
.titulo { font-size: clamp(36px, 5.2vw, 64px); font-weight: 400; line-height: 1.05; margin: 0 0 24px; }
.texto p { margin: 0 0 16px; max-width: 46ch; }
.duas { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .duas { grid-template-columns: 0.9fr 1.1fr; gap: 64px; } }

/* topo */
.topo { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 96px var(--margem) 64px; }
.topo img { width: min(78vw, 820px); height: auto; margin: 0 auto 28px; }
.topo p { font-size: clamp(16px, 2vw, 20px); font-weight: 300; margin: 0; letter-spacing: .02em; }

/* serviços */
.servicos .duas { align-items: start; }
.servicos .titulo { font-weight: 500; }
.lista-servicos { display: grid; grid-template-columns: 1fr; gap: 32px 48px; }
@media (min-width: 640px) { .lista-servicos { grid-template-columns: 1fr 1fr; } }
.lista-servicos h3 { font-size: 20px; font-weight: 600; color: #000; margin: 0 0 8px; }
.lista-servicos p { margin: 0; font-size: 15px; color: var(--texto-suave); }

/* celulares */
.celulares { display: flex; gap: clamp(16px, 3vw, 36px); justify-content: center; }
.celular { width: min(42vw, 260px); aspect-ratio: 592 / 1280; border-radius: 34px; border: 7px solid var(--grafite);
           overflow: hidden; background: var(--preto); box-shadow: 0 0 0 1px #333, 0 24px 60px rgba(0, 0, 0, .45); }
.celular video, .celular img { width: 100%; height: 100%; object-fit: cover; }
.clara .celular { box-shadow: 0 0 0 1px #ddd, 0 24px 60px rgba(0, 0, 0, .18); }

/* The Send */
.grade-foto img { width: 100%; height: auto; border-radius: 4px; }
.video-largo { margin-top: clamp(40px, 6vw, 72px); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #000; }
.video-largo video { width: 100%; height: 100%; object-fit: cover; }
.tres { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.6vw, 20px); }
.tres div { aspect-ratio: 9 / 16; overflow: hidden; border-radius: 4px; background: #000; }
.tres video { width: 100%; height: 100%; object-fit: cover; }

/* Fotográfica */
.numero { display: flex; align-items: center; gap: 14px; margin: 28px 0; }
.numero strong { font-size: clamp(56px, 8vw, 96px); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.numero span { font-size: 15px; max-width: 14ch; line-height: 1.35; }
.colagem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.colagem img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.colagem .grande { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: 2 / 3; }
.colagem .pequena { aspect-ratio: 2 / 3; }

/* contato */
.contato { text-align: center; }
.contato img { width: min(78vw, 760px); height: auto; margin: 0 auto 32px; }
.contato p { max-width: 60ch; margin: 0 auto 32px; font-size: 15px; }
.contato em { font-weight: 700; }
.botao { display: inline-block; background: var(--branco); color: var(--preto); font-weight: 800; font-size: 13px;
         letter-spacing: .08em; text-decoration: underline; padding: 12px 40px; }
.botao:hover { background: #e6e6e6; }
.email { display: block; margin-top: 40px; font-size: 16px; text-decoration: none; }

/* rodapé */
.rodape { border-top: 1px solid var(--linha); padding: 28px var(--margem) 36px; font-size: 12px; color: #aaa; }
.rodape .conteudo { max-width: var(--largura); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px 28px;
                    justify-content: space-between; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.rodape a { color: #ddd; }

/* páginas legais */
.legal { background: var(--branco); color: var(--texto-claro); }
.legal .barra { background: var(--preto); padding: 14px var(--margem); display: flex; align-items: center;
                justify-content: space-between; }
.legal .barra img { height: 22px; width: auto; }
.legal .barra a { color: var(--branco); font-size: 12px; font-weight: 700; text-decoration: none; }
.legal main { max-width: 760px; margin: 0 auto; padding: 48px var(--margem) 72px; }
.legal h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 500; color: #000; margin: 0 0 8px; }
.legal .data { color: var(--texto-suave); font-size: 13px; margin: 0 0 32px; }
.legal h2 { font-size: 17px; font-weight: 700; color: #000; margin: 32px 0 8px; }
.legal p, .legal li { font-size: 15px; }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal .rodape { color: #777; border-top-color: #e5e5e5; }
.legal .rodape a { color: #333; }