/* Identidade da 7X7SI (marca-mae). Ver marca/brand-book.html. NAO usar a paleta do produto aqui. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fontes/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/fontes/space-grotesk-latin.woff2") format("woff2"); }

:root {
  --bg: #0A0B0D;        /* preto profundo */
  --bg-2: #171A1F;      /* grafite */
  --fg: #F4F6F8;        /* off-white */
  --titulo: #F4F6F8;
  --muted: #9AA1AB;     /* texto secundario legivel (o cinza #2A2F36 da paleta e so decorativo) */
  --line: #262B32;
  --ponto: #4A4F57;
  --accent: #7CFF00;    /* verde 7X7 */
  --accent-2: #7CFF00;
  --on-accent: #0A0B0D;
  --focus: #7CFF00;
  --raio: 10px;
  --raio-botao: 999px;
  --display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Space Grotesk", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; }
h1, h2, h3 { font-family: var(--display); }

.marca { display: inline-flex; align-items: center; min-height: 44px; }
.marca img { height: 26px; width: auto; }

.selo { font-family: var(--display); letter-spacing: 0.22em; font-size: 0.74rem; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.botao { font-family: var(--display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; }

/* ------------------------------------------------------------------ HOME
   Estrutura: 7 colunas (3 + 3 com 1 de respiro: modulos Fibonacci). Cada bloco tem uma funcao:
   hero = a tese; produto = o objeto; produto 2 = o mesmo gesto, espelhado; rodape = o minimo institucional. */
.wrap-largo { max-width: 1240px; }
.home main { padding: 0; }
.home .topo { border-bottom: 0; position: absolute; left: 0; right: 0; top: 0; z-index: 5; }
.home .topo .wrap { padding-top: 22px; padding-bottom: 10px; min-height: 0; flex-wrap: nowrap; }
.so-contato { font-family: var(--display); font-size: 0.86rem; letter-spacing: 0.06em; font-weight: 500; color: var(--muted); text-decoration: none; padding: 12px 0; min-height: 44px; display: inline-flex; align-items: center; }
.so-contato:hover { color: var(--accent); }

.rotulo { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.seta { font-family: var(--display); font-weight: 600; font-size: 0.95rem; color: var(--fg); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--line); padding-bottom: 2px; width: fit-content; transition: color .2s, border-color .2s; }
.seta span { display: inline-block; transition: transform .25s ease; }
.seta:hover { color: var(--accent); border-color: var(--accent); }
.seta:hover span { transform: translateX(4px); }

/* ---- HERO: a tese, e o simbolo em escala arquitetonica ---- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: hidden; padding: 96px 0 clamp(36px, 8vh, 88px); }
.hero-base { position: relative; z-index: 2; width: 100%; }
.hero h1 { font-size: clamp(2.9rem, 7.6vw, 6.9rem); line-height: 0.93; letter-spacing: -0.055em; font-weight: 700; margin: 0 0 clamp(28px, 6vh, 64px); max-width: 6.4em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-pe { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 18px; }
.hero-pe p { margin: 0; color: var(--muted); font-size: 1rem; }

/* Ancorado na coluna 4 de 7 do mesmo conteiner do texto: titulo (colunas 1-4) e simbolo (4-7, sangrando) nunca disputam o espaco. */
.simbolo { --sx: calc((100vw - min(100vw, 1240px)) / 2 + 22px + (min(100vw, 1240px) - 44px) * 0.5714); position: absolute; z-index: 1; left: var(--sx); top: 50%; width: min(calc((100vw - var(--sx)) * 1.2), 118svh); height: auto; aspect-ratio: 1; transform: translateY(-52%); pointer-events: none; }
.simbolo .guia line { stroke: var(--fg); stroke-width: 0.03; opacity: 0.1; }
.simbolo .p7 { fill: rgba(244, 246, 248, 0.04); stroke: rgba(244, 246, 248, 0.62); stroke-width: 0.05; stroke-linejoin: miter; stroke-dasharray: 1; stroke-dashoffset: 0; }
.simbolo .pv { fill: var(--accent); stroke: var(--accent); stroke-width: 0.03; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* A construcao: grade -> contorno do 7 -> pecas verdes. Uma vez, devagar. Sem movimento = estado final. */
@media (prefers-reduced-motion: no-preference) {
  .simbolo .guia line { animation: aparece 1.2s ease-out both; }
  .simbolo .p7 { animation: tracar 2.2s cubic-bezier(.65, 0, .35, 1) .5s both, enche 1.4s ease-out 2.2s both; }
  .simbolo .pv { animation: tracar 1.6s cubic-bezier(.65, 0, .35, 1) 1.5s both, acende 1.2s ease-out 2.6s both; }
}
@keyframes aparece { from { opacity: 0; } to { opacity: 0.1; } }
@keyframes tracar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes enche { from { fill: rgba(244, 246, 248, 0); } to { fill: rgba(244, 246, 248, 0.04); } }
@keyframes acende { from { fill: rgba(124, 255, 0, 0); } to { fill: var(--accent); } }

/* ---- PRODUTO 1: editorial. Texto em 3 colunas, a tela em 3, com 1 de respiro ---- */
.produto-editorial { padding: clamp(96px, 20vh, 220px) 0; }
.grade7 { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
.p-texto { display: grid; gap: 22px; align-content: start; }
.p-texto h2 { font-family: var(--display); font-size: clamp(2.5rem, 6.4vw, 5.6rem); line-height: 0.98; letter-spacing: -0.045em; font-weight: 700; color: var(--titulo); margin: 0; }
.p-texto p { margin: 0 0 6px; color: var(--muted); font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.4; max-width: 17em; }
.p-tela { margin: 0; justify-self: start; width: min(78%, 340px); }
.p-tela img { display: block; width: 100%; height: auto; border-radius: 28px; border: 1px solid var(--line); background: var(--bg-2); }

@media (min-width: 900px) {
  .grade7 { grid-template-columns: repeat(7, 1fr); gap: 0 clamp(16px, 2vw, 32px); }
  .p-texto { grid-column: 1 / 4; }
  .p-tela { grid-column: 5 / 8; justify-self: end; width: 100%; max-width: 380px; }
}

/* ---- PRODUTO 2: a mesma estrutura, espelhada (imagem a esquerda). Da ritmo sem inventar um componente novo. ---- */
.produto-espelho { padding-top: clamp(16px, 4vh, 48px); }
@media (min-width: 900px) {
  .produto-espelho .p-tela { grid-column: 1 / 4; grid-row: 1; justify-self: start; }
  .produto-espelho .p-texto { grid-column: 5 / 8; grid-row: 1; }
}

/* ---- RODAPE: o minimo institucional ---- */
.home .rodape { border-top: 0; padding: clamp(64px, 12vh, 120px) 0 48px; }
.home .rodape .rodape-grade { display: grid; flex-direction: initial; gap: 40px; }
.r-marca { display: grid; gap: 16px; justify-items: start; }
.r-marca img { display: block; }
.r-marca p { margin: 0; color: var(--fg); max-width: 22em; font-size: 1.05rem; }
.contato { font-family: var(--display); font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 600; letter-spacing: -0.02em; color: var(--accent); text-decoration: none; word-break: break-all; padding: 6px 0; }
.contato:hover { color: var(--titulo); }
.home .rodape .r-links { display: grid; gap: 4px; align-content: start; justify-items: start; }
.r-links .rotulo { color: var(--muted); margin-bottom: 8px; }
.r-links a { color: var(--fg); text-decoration: none; font-size: 0.95rem; min-height: 40px; display: inline-flex; align-items: center; }
.r-links a:hover { color: var(--accent); }
.r-legal { margin: 0; color: var(--muted); font-size: 0.82rem; grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 20px; }
@media (min-width: 900px) {
  .home .rodape .rodape-grade { grid-template-columns: repeat(7, 1fr); }
  .r-marca { grid-column: 1 / 4; }
  .r-links { grid-column: 5 / 8; }
}

/* ---- MOBILE: recomposto (nao e o desktop encolhido) ---- */
@media (max-width: 719px) {
  .simbolo { left: auto; right: -30vw; top: 92px; width: auto; height: clamp(180px, calc(100svh - 440px), 78vw); max-height: 520px; aspect-ratio: 1; transform: none; }
  .simbolo .p7 { stroke-width: 0.075; }
  .simbolo .pv { stroke-width: 0.05; }
  .simbolo .guia line { stroke-width: 0.05; }
  .hero { padding-top: 88px; }
  .hero h1 { font-size: clamp(2.8rem, 14.4vw, 4.4rem); letter-spacing: -0.05em; }
  .hero-pe { gap: 6px; }
}
@media (max-width: 380px) { .hero h1 { font-size: 2.7rem; } }