/*
 * Vitrine — a página que fica em fttxmaps.com.
 *
 * Ela vende um sistema de mapa, então o mapa é o argumento: o fundo é a mesma
 * noite azul do produto, e a ilustração do topo é a rede de verdade desenhada
 * em SVG, não uma foto de banco de imagens. Quem chega já vê o que compra.
 *
 * Animação existe para explicar (a fibra que percorre o cabo, o número que
 * cresce), nunca para enfeitar. `prefers-reduced-motion` desliga tudo em
 * shared.css.
 */

body { overflow-x: hidden; }

/* Brilho de fundo: dois halos que sugerem cobertura irradiando de um ponto. */
body::before {
  background:
    radial-gradient(1100px 560px at 78% -10%, #123452 0%, transparent 62%),
    radial-gradient(880px 520px at -8% 40%, #0d2b3f 0%, transparent 58%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

/*
 * `padding-inline`, nunca `padding`.
 *
 * Como `.faixa` é classe e `section` é elemento, a forma completa vencia por
 * especificidade e zerava o `padding-block` das seções — elas encostavam umas
 * nas outras e o título de cada uma parecia grudado no bloco anterior.
 */
.faixa { margin: 0 auto; max-width: 1120px; padding-inline: 24px; }

/* ---------- topo ---------- */
.topo {
  align-items: center;
  backdrop-filter: blur(10px);
  background: rgba(10, 21, 38, .72);
  border-bottom: 1px solid rgba(42, 65, 98, .6);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 14px 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.marca { align-items: center; color: inherit; display: flex; gap: 11px; text-decoration: none; }

/* Sem moldura nem fundo: o ícone já tem forma e cor próprias. Um quadrado
   colorido atrás dele brigaria com o globo. */
.marca-icone { display: block; height: 40px; object-fit: contain; width: 40px; }
/* O ícone quebrado (arquivo ausente) some pelo onerror do HTML, que remove o
   elemento — CSS não consegue detectar imagem que falhou ao carregar. */

/*
 * ASSINATURA "FTTX MAPS".
 *
 * Reproduz o logo: FTTX pesado e apertado, o X em dois tons, MAPS embaixo bem
 * espaçado entre dois traços. No fundo escuro o azul-marinho do original
 * sumiria, então FTT vem em branco-azulado e o X mantém o degradê azul→verde,
 * que é a assinatura de cor da marca.
 */
.marca-nome { display: inline-grid; gap: 1px; line-height: 1; }
.marca-nome b {
  color: #eaf4ff;
  font: 900 21px/1 var(--fonte);
  letter-spacing: -.03em;
}
/* O X bicolor: degradê recortado pelo próprio glifo. */
.marca-nome b em {
  background: linear-gradient(105deg, #2f9bec 0%, #2f9bec 45%, #45b357 55%, #45b357 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}
/* MAPS entre os dois traços, como no logo. */
.marca-nome small {
  align-items: center;
  color: #6ab5ee;
  display: grid;
  font: 700 8.5px/1 var(--fonte);
  gap: 5px;
  grid-template-columns: 1fr auto 1fr;
  letter-spacing: .42em;
  text-indent: .42em;
}
.marca-nome small::before,
.marca-nome small::after { background: currentColor; content: ""; height: 1.5px; opacity: .75; }
.marca-nome small::after { background: #45b357; }
.topo nav { align-items: center; display: flex; gap: 8px; }
.topo nav a { color: var(--texto-suave); font-size: 13px; font-weight: 600; padding: 8px 12px; text-decoration: none; }
.topo nav a:hover { color: var(--texto); }
.topo nav .botao { font-size: 12px; padding: 10px 16px; }
@media (max-width: 720px) { .topo nav .so-desktop { display: none; } }

/* ---------- abertura ----------
   `padding-block`, não `padding`: a forma completa zerava o respiro lateral
   que vem de .faixa e o título encostava na borda da tela. */
.abertura { padding-block: 72px 56px; }
.abertura-grade { align-items: center; display: grid; gap: 48px; grid-template-columns: 1.05fr .95fr; }
@media (max-width: 900px) { .abertura-grade { grid-template-columns: 1fr; gap: 32px; } }

.selo {
  background: rgba(43, 127, 212, .16);
  border: 1px solid rgba(43, 127, 212, .55);
  border-radius: 99px;
  color: var(--acento-claro);
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  margin-bottom: 18px;
  padding: 5px 12px;
  text-transform: uppercase;
}
.abertura h1 {
  font-size: clamp(29px, 3.7vw, 45px);
  letter-spacing: -.025em;
  line-height: 1.1;
  margin-bottom: 18px;
}
.abertura h1 em { color: var(--acento-claro); font-style: normal; }
.abertura p.chamada { color: #cddced; font-size: 17px; line-height: 1.6; max-width: 52ch; }
.pontos { display: grid; gap: 10px; list-style: none; margin-top: 30px; padding: 0; }
.pontos li {
  color: var(--texto);
  font-size: 15px;
  line-height: 1.5;
  padding-left: 26px;
  position: relative;
}
.pontos li::before {
  color: var(--acento-claro);
  content: '✓';
  font-weight: 800;
  left: 2px;
  position: absolute;
}

/* ---------- ilustração da rede ---------- */
.palco {
  background: linear-gradient(160deg, #0e2138, #091524);
  border: 1px solid var(--borda);
  border-radius: 16px;
  box-shadow: var(--sombra);
  overflow: hidden;
  padding: 14px;
}
.palco svg { display: block; height: auto; width: 100%; }
.etiqueta { fill: #5f7c9c; font: 700 9px var(--fonte); letter-spacing: .12em; }

/*
 * A REDE EM MOVIMENTO — UM RELÓGIO SÓ.
 *
 * Todas as peças usam a MESMA duração (7s) e se diferenciam pelas
 * porcentagens dos quadros-chave. É isto que mantém tudo sincronizado: se
 * cada uma tivesse a sua duração e o seu atraso, bastaria um arredondamento
 * para a fibra chegar na CTO antes de sair da emenda.
 *
 * A linha do tempo:
 *   0 – 26%   o sinal sai do POP e percorre o cabo tronco
 *   26 – 32%  a caixa de emenda recebe e pulsa
 *   30 – 60%  quatro fibras saem dela, uma delas voltando pelo mesmo cabo
 *   58 – 68%  as CTOs acendem
 *   68 – 88%  tudo aceso, tempo de ler o desenho
 *   88 – 100% apaga e recomeça
 *
 * `pathLength="100"` no SVG normaliza todos os traçados: o mesmo par de
 * números anima um trecho curto e um longo sem medir nada em JavaScript.
 */
.fibra { stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.palco svg .fibra,
.palco svg .emenda-halo,
.palco svg .pop-halo,
.palco svg .cto-luz { animation-duration: 7s; animation-iteration-count: infinite; animation-timing-function: linear; }

.tronco { animation-name: percorrer-tronco; }
@keyframes percorrer-tronco {
  0%   { stroke-dashoffset: 100; opacity: 1; }
  26%  { stroke-dashoffset: 0; opacity: 1; }
  88%  { stroke-dashoffset: 0; opacity: 1; }
  94%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.ramo { animation-name: percorrer-ramo; }
@keyframes percorrer-ramo {
  0%, 30% { stroke-dashoffset: 100; opacity: 1; }
  60%     { stroke-dashoffset: 0; opacity: 1; }
  88%     { stroke-dashoffset: 0; opacity: 1; }
  94%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* O POP pulsa no instante em que dispara o sinal. */
.pop-halo { animation-name: pulso-pop; transform-box: fill-box; transform-origin: center; }
@keyframes pulso-pop {
  0%   { opacity: .5; transform: scale(.7); }
  12%  { opacity: .1; transform: scale(1.25); }
  20%, 100% { opacity: .16; transform: scale(1); }
}
/* A emenda pulsa quando a fibra chega nela — é o "estouro" do splitter. */
.emenda-halo { animation-name: pulso-emenda; transform-box: fill-box; transform-origin: center; }
@keyframes pulso-emenda {
  0%, 24%   { opacity: .12; transform: scale(.75); }
  30%       { opacity: .5; transform: scale(1.3); }
  40%, 100% { opacity: .18; transform: scale(1); }
}
/* Cada CTO acende ao receber a sua fibra. */
.cto-luz { animation-name: acender-cto; opacity: 0; transform-box: fill-box; transform-origin: center; }
@keyframes acender-cto {
  0%, 58%   { opacity: 0; transform: scale(.6); }
  66%       { opacity: 1; transform: scale(1.15); }
  72%, 88%  { opacity: .9; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}

/* Sem movimento: a rede aparece inteira e parada, que é a informação. */
@media (prefers-reduced-motion: reduce) {
  .fibra { stroke-dashoffset: 0; }
  .cto-luz { opacity: .9; }
}

/* ---------- seções ---------- */
section { padding-block: 64px; }
.titulo-secao { margin-bottom: 40px; max-width: 60ch; }
.titulo-secao p.eyebrow {
  color: var(--acento-claro);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.titulo-secao h2 { font-size: clamp(24px, 3.2vw, 34px); letter-spacing: -.02em; line-height: 1.15; }
.titulo-secao p.apoio { color: var(--texto-suave); font-size: 15px; margin-top: 12px; }

/* Entrada suave conforme a pessoa rola. */
.revela { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.revela.is-visivel { opacity: 1; transform: none; }


/* Chamado à ação da abertura: respira acima, e no celular ocupa a linha
   inteira para virar um alvo de toque decente. */
.acoes-abertura { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 560px) {
  .acoes-abertura .botao { text-align: center; width: 100%; }
}

/* ---------- rodapé ---------- */
.rodape {
  border-top: 1px solid rgba(42, 65, 98, .6);
  margin-top: 48px;
  padding: 32px 0 40px;
}
.rodape-grade { align-items: center; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 18px; }
.rodape nav a { color: var(--texto-suave); font-size: 12px; text-decoration: none; }
.rodape nav a:hover { color: var(--acento-claro); }


/* ---------- perguntas do dia a dia ---------- */
.perguntas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pergunta {
  background: var(--fundo-alto);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--acento);
  border-radius: 0 12px 12px 0;
  padding: 20px 22px;
  transition: border-color .2s ease, transform .2s ease;
}
.pergunta:hover { border-color: var(--borda-clara); border-left-color: var(--acento-claro); transform: translateX(3px); }
.pergunta h3 { color: var(--texto); font-size: 15px; margin-bottom: 8px; }
.pergunta p { color: var(--texto-suave); font-size: 13.5px; line-height: 1.6; }
.pergunta p b { color: var(--acento-claro); font-weight: 700; }

/* ---------- blocos de recursos ---------- */
/* Curtos de propósito: a versão anterior era uma lista de vinte itens que
   lia como manual. Seis blocos de duas linhas cabem num relance. */
/* Mais respiro entre as fileiras do que entre as colunas: a linha de cima do
   bloco já separa na horizontal, e 16px na vertical colava a segunda fileira
   no fim do texto da primeira. */
.blocos { display: grid; gap: 34px 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.bloco { border-top: 2px solid var(--borda); padding-top: 16px; }
.bloco h4 { color: var(--acento-claro); font-size: 13px; letter-spacing: .04em; margin-bottom: 8px; text-transform: uppercase; }
.bloco p { color: var(--texto-suave); font-size: 13.5px; line-height: 1.6; }

/* ---------- dúvidas ---------- */
.faq { display: grid; gap: 10px; max-width: 760px; }
.faq details {
  background: var(--fundo-alto);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 0 18px;
}
.faq summary {
  color: var(--texto);
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 650;
  list-style: none;
  padding: 16px 24px 16px 0;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  color: var(--acento);
  content: '+';
  font-size: 18px;
  position: absolute;
  right: 2px;
  top: 13px;
  transition: transform .2s ease;
}
.faq details[open] summary::after { content: '−'; }
.faq details p { color: var(--texto-suave); font-size: 13.5px; line-height: 1.65; padding: 0 0 18px; }