/* Briefing do Site Express.
   Herda os tokens do styles.css: cor, fonte e botao sao os mesmos do site.
   Aqui so vive o que e do formulario. */

.pagina-briefing {
  background: var(--bg);
}

.brief-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1.25rem, 4vw, 3rem);
  max-width: 52rem;
  margin-inline: auto;
}

.brief-passo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Barra de progresso presa no topo. Formulario longo sem barra parece nao
   ter fim, e quem nao ve o fim desiste no meio. */
.brief-barra {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 4px;
  background: var(--line);
}

.brief-barra span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width 0.25s var(--ease);
}

.brief {
  max-width: 52rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 3rem) 4rem;
}

.brief-abertura h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: -0.03em;
  margin: 0 0 0.6rem;
}

.brief-lead {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 1.03rem;
  max-width: 54ch;
}

.brief-aviso {
  margin: 0 0 1.4rem;
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  background: var(--blue-wash);
  border: 1px solid #cfdcfd;
  font-size: 0.95rem;
  max-width: 60ch;
}

.brief-rascunho {
  margin: 0 0 1.4rem;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background: var(--sunk);
  font-size: 0.9rem;
  color: var(--muted);
}

.brief-secao {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
}

.brief-secao h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  letter-spacing: -0.02em;
}

.brief-secao h2 span {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 0.85rem;
}

.secao-lead {
  margin: -0.5rem 0 1.1rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.campo {
  display: block;
  margin-bottom: 1.15rem;
  border: 0;
  padding: 0;
}

.campo:last-child {
  margin-bottom: 0;
}

.rotulo {
  display: block;
  margin-bottom: 0.2rem;
  font-weight: 600;
  font-size: 0.97rem;
}

.rotulo em {
  font-style: normal;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
  margin-left: 0.35rem;
}

.ajuda {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 60ch;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="url"],
.campo textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.campo textarea {
  resize: vertical;
  min-height: 3rem;
}

.campo input:focus-visible,
.campo textarea:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-wash);
}

/* Erro marcado com cor E com texto. Cor sozinha nao serve para quem nao
   distingue vermelho. */
.campo.erro input,
.campo.erro textarea {
  border-color: var(--danger);
}

.recado-erro {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--danger);
}

.dupla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 620px) {
  .dupla { grid-template-columns: 1fr; }
}

.campo-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  font-size: 0.93rem;
  line-height: 1.5;
}

.campo-check input {
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  accent-color: var(--blue);
}

.campo-check a {
  color: var(--blue);
  text-decoration: underline;
}

.caixa-material {
  margin-bottom: 1.15rem;
  padding: 1rem 1.15rem;
  border-radius: 14px;
  background: var(--sunk);
  font-size: 0.95rem;
}

.caixa-material p { margin: 0 0 0.5rem; }
.caixa-material ul { margin: 0 0 0.5rem; padding-left: 1.2rem; }
.caixa-material li { margin: 0.25rem 0; }

.miudo {
  margin: 0.6rem 0 0;
  font-size: 0.86rem;
  color: var(--muted);
}


.brief-fim {
  background: var(--sunk);
}

.brief-nota {
  margin: 0.8rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: var(--blue-wash);
  font-size: 0.93rem;
}

.brief-nota.is-error {
  background: #fdecea;
  color: #7a1c12;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.brief-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 52rem;
  margin-inline: auto;
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem) 3rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

.brief-rodape .legal-links {
  justify-content: flex-start;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Etapas. Uma abre quando a anterior fecha. Formulario longo aberto de uma
   vez assusta; aberto aos poucos parece conversa.
   A travada continua no fluxo, so que apagada e sem foco: sumir por completo
   faria a pagina pular de altura a cada escolha.
   --------------------------------------------------------------------------- */
.etapa {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1.25rem, 3vw, 1.85rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: opacity 0.25s var(--ease), filter 0.25s var(--ease);
}

.etapa.travada {
  opacity: 0.38;
  filter: grayscale(0.7);
  pointer-events: none;
  user-select: none;
}

.etapa-cabeca {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  margin-bottom: 1.15rem;
}

.etapa-num {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
}

.etapa-cabeca h2 {
  margin: 0 0 0.15rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  letter-spacing: -0.02em;
}

.etapa-cabeca p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.sub-rotulo {
  margin: 1.4rem 0 0.6rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- cartoes ------------------------------------------------------------ */
.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.75rem;
}

.cartoes.miudos {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.cartao {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 0.85rem 0.95rem;
  text-align: left;
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--text);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.cartao:hover { border-color: var(--muted); transform: translateY(-1px); }

.cartao.marcado {
  border-color: var(--blue);
  background: var(--blue-wash);
}

.cartao:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.cartao-nome {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.25;
}

.cartao-desc {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}

.cartao-icone {
  display: block;
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 0.4rem;
}

.erro-grupo { outline: 2px dashed var(--danger); outline-offset: 6px; border-radius: 16px; }

/* Desenhos dos tipos de projeto: CSS, nao imagem. Print de modelo
   desatualiza sem ninguem perceber, e o cliente escolhe pelo que viu. */
.cartao-arte {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  margin-bottom: 0.6rem;
  border: 1px solid var(--line);
  background-color: #fff;
  background-repeat: no-repeat;
}
.arte-landing {
  background-image:
    linear-gradient(var(--text) 0 0), linear-gradient(var(--line) 0 0),
    linear-gradient(var(--blue) 0 0);
  background-size: 46% 9%, 62% 5%, 30% 12%;
  background-position: 12% 24%, 12% 42%, 12% 66%;
}
.arte-site {
  background-image:
    linear-gradient(var(--line) 0 0), linear-gradient(var(--text) 0 0),
    linear-gradient(var(--line) 0 0), linear-gradient(var(--line) 0 0),
    linear-gradient(var(--line) 0 0);
  background-size: 100% 14%, 40% 8%, 26% 26%, 26% 26%, 26% 26%;
  background-position: 0 0, 10% 34%, 10% 76%, 50% 76%, 90% 76%;
}
.arte-app {
  background-image:
    linear-gradient(var(--line) 0 0), linear-gradient(var(--blue) 0 0),
    linear-gradient(var(--line) 0 0), linear-gradient(var(--line) 0 0);
  background-size: 22% 100%, 46% 10%, 46% 6%, 46% 6%;
  background-position: 0 0, 32% 22%, 32% 46%, 32% 62%;
}
.arte-naosei {
  background-image: linear-gradient(var(--line) 0 0), linear-gradient(var(--line) 0 0);
  background-size: 34% 6%, 20% 6%;
  background-position: 33% 42%, 40% 58%;
}

.amostra {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  margin-bottom: 0.6rem;
  border: 1px solid var(--line);
  background-repeat: no-repeat;
}
.amostra-claro {
  background-color: #fff;
  background-image: linear-gradient(#10151c 0 0), linear-gradient(#9aa5b1 0 0), linear-gradient(#0b5fd0 0 0);
  background-size: 44% 9%, 60% 5%, 28% 12%;
  background-position: 12% 26%, 12% 44%, 12% 68%;
}
.amostra-escuro {
  background-color: #0c1017;
  background-image: linear-gradient(#eef2f7 0 0), linear-gradient(#6d7b8f 0 0), linear-gradient(#35b6ff 0 0);
  background-size: 44% 9%, 60% 5%, 28% 12%;
  background-position: 12% 26%, 12% 44%, 12% 68%;
}
.amostra-quente {
  background-color: #fdf8f1;
  background-image: linear-gradient(#2c1e14 0 0), linear-gradient(#a08b78 0 0), linear-gradient(#b8541a 0 0);
  background-size: 44% 9%, 60% 5%, 28% 12%;
  background-position: 12% 26%, 12% 44%, 12% 68%;
}

/* --- resumo ------------------------------------------------------------- */
.resumo {
  margin-bottom: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.resumo-linha {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.75rem;
  padding: 0.65rem 0.95rem;
  border-bottom: 1px solid var(--hair);
  font-size: 0.95rem;
}
.resumo-linha:last-child { border-bottom: 0; }
.resumo-linha span { color: var(--muted); }
.resumo p { margin: 0; padding: 0.9rem; }

@media (max-width: 620px) {
  .resumo-linha { grid-template-columns: 1fr; gap: 0.1rem; }
}

.etapa-fim { background: var(--sunk); }

/* ---------------------------------------------------------------------------
   As nove maquetes. Mesmo mini-layout de home, nove estilos: a pessoa
   escolhe pela cara, nao por adjetivo.

   Sao DESENHADAS, nao sao print de site entregue. O sigilo com o cliente
   proibe mostrar trabalho feito, e print de site de terceiro sugeriria
   autoria que nao e nossa. O que elas prometem e estetica, nao portfolio.
   --------------------------------------------------------------------------- */
.maquete {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 0.6rem;
  font-size: 7px;
  line-height: 1;
}
.maq-topo { display: flex; align-items: center; justify-content: space-between; padding: 7% 8% 0; }
.maq-marca { height: 5px; width: 26%; border-radius: 2px; }
.maq-menu { display: flex; gap: 4px; }
.maq-menu i { display: block; width: 9px; height: 3px; border-radius: 1px; opacity: .55; }
.maq-hero { padding: 9% 8% 0; }
/* display:block obrigatorio: sao <i>, que e inline, e altura nao aplica em
   inline. Sem isto o miolo da maquete some e sobra so topo e cards. */
.maq-h1, .maq-sub, .maq-btn { display: block; }
.maq-h1 { height: 9px; width: 62%; border-radius: 2px; margin-bottom: 5px; }
.maq-sub { height: 4px; width: 78%; border-radius: 2px; opacity: .5; margin-bottom: 8px; }
.maq-btn { height: 11px; width: 32%; }
.maq-cards { display: flex; gap: 5px; padding: 10% 8% 0; }
.maq-cards i { display: block; flex: 1; height: 20px; border-radius: 3px; }

.maq-claro-limpo { background: #ffffff; font-family: system-ui; }
.maq-claro-limpo .maq-marca { background: #10151c; }
.maq-claro-limpo .maq-menu i { background: #7c8794; }
.maq-claro-limpo .maq-h1 { background: #10151c; }
.maq-claro-limpo .maq-sub { background: #7c8794; }
.maq-claro-limpo .maq-btn { background: #0b5fd0; border-radius: 10px; }
.maq-claro-limpo .maq-cards i { background: #eef1f4; border-radius: 4px; }

.maq-escuro-tech { background: #0c1017; font-family: system-ui; }
.maq-escuro-tech .maq-marca { background: #eef2f7; }
.maq-escuro-tech .maq-menu i { background: #8d9bb0; }
.maq-escuro-tech .maq-h1 { background: #eef2f7; }
.maq-escuro-tech .maq-sub { background: #8d9bb0; }
.maq-escuro-tech .maq-btn { background: #35b6ff; border-radius: 14px; }
.maq-escuro-tech .maq-cards i { background: #182231; border-radius: 4px; }

.maq-quente-artesanal { background: #fdf8f1; font-family: Georgia,serif; }
.maq-quente-artesanal .maq-marca { background: #2c1e14; }
.maq-quente-artesanal .maq-menu i { background: #7d6a58; }
.maq-quente-artesanal .maq-h1 { background: #2c1e14; }
.maq-quente-artesanal .maq-sub { background: #7d6a58; }
.maq-quente-artesanal .maq-btn { background: #b8541a; border-radius: 20px; }
.maq-quente-artesanal .maq-cards i { background: #f2e6d8; border-radius: 4px; }

.maq-corporativo { background: #f7f9fc; font-family: system-ui; }
.maq-corporativo .maq-marca { background: #0d2137; }
.maq-corporativo .maq-menu i { background: #5d7186; }
.maq-corporativo .maq-h1 { background: #0d2137; }
.maq-corporativo .maq-sub { background: #5d7186; }
.maq-corporativo .maq-btn { background: #12508f; border-radius: 4px; }
.maq-corporativo .maq-cards i { background: #e6edf5; border-radius: 4px; }

.maq-tipografico { background: #f5f3ee; font-family: Archivo,sans-serif; }
.maq-tipografico .maq-marca { background: #111111; }
.maq-tipografico .maq-menu i { background: #6b6b6b; }
.maq-tipografico .maq-h1 { background: #111111; }
.maq-tipografico .maq-sub { background: #6b6b6b; }
.maq-tipografico .maq-btn { background: #e04a1f; border-radius: 0px; }
.maq-tipografico .maq-cards i { background: #e8e4db; border-radius: 0px; }

.maq-editorial { background: #fbfaf8; font-family: Georgia,serif; }
.maq-editorial .maq-marca { background: #1b1a18; }
.maq-editorial .maq-menu i { background: #6f6b66; }
.maq-editorial .maq-h1 { background: #1b1a18; }
.maq-editorial .maq-sub { background: #6f6b66; }
.maq-editorial .maq-btn { background: #2f5d50; border-radius: 2px; }
.maq-editorial .maq-cards i { background: #eeebe5; border-radius: 4px; }

.maq-vibrante { background: #fffdf5; font-family: system-ui; }
.maq-vibrante .maq-marca { background: #1a1a2e; }
.maq-vibrante .maq-menu i { background: #6b6b83; }
.maq-vibrante .maq-h1 { background: #1a1a2e; }
.maq-vibrante .maq-sub { background: #6b6b83; }
.maq-vibrante .maq-btn { background: #7b2ff7; border-radius: 18px; }
.maq-vibrante .maq-cards i { background: #f0ebff; border-radius: 4px; }

.maq-natural { background: #f6f8f4; font-family: system-ui; }
.maq-natural .maq-marca { background: #1f2a1c; }
.maq-natural .maq-menu i { background: #63705c; }
.maq-natural .maq-h1 { background: #1f2a1c; }
.maq-natural .maq-sub { background: #63705c; }
.maq-natural .maq-btn { background: #3f7d3f; border-radius: 16px; }
.maq-natural .maq-cards i { background: #e4ece0; border-radius: 4px; }

.maq-premium { background: #0f0e0c; font-family: Georgia,serif; }
.maq-premium .maq-marca { background: #f5f0e6; }
.maq-premium .maq-menu i { background: #9a9285; }
.maq-premium .maq-h1 { background: #f5f0e6; }
.maq-premium .maq-sub { background: #9a9285; }
.maq-premium .maq-btn { background: #c9a227; border-radius: 2px; }
.maq-premium .maq-cards i { background: #1a1815; border-radius: 4px; }

/* --- maquetes, revelação, links e prompt -------------------------------- */
.maquetes { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }

/* Bloco que só aparece depois de uma escolha. Nasce fechado e abre com a
   altura do conteúdo, para a página não pular de tamanho. */
.revela {
  margin-top: 1rem;
  animation: abrir 0.22s var(--ease);
}
@keyframes abrir {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.oferta {
  padding: clamp(1rem, 2.5vw, 1.4rem);
  border: 2px solid var(--blue);
  border-radius: 16px;
  background: var(--blue-wash);
}
.oferta-selo {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--blue-ink);
}
.oferta h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  letter-spacing: -0.02em;
}
.oferta p { margin: 0 0 0.7rem; font-size: 0.96rem; }
.oferta ul { margin: 0 0 0.9rem; padding-left: 1.2rem; font-size: 0.95rem; }
.oferta li { margin: 0.3rem 0; }

.lista-links { display: grid; gap: 0.5rem; }
.linha-link { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
.linha-link input {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  font: inherit;
  color: var(--text);
}
.btn-tirar {
  width: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
}
.btn-tirar:hover { border-color: var(--danger); color: var(--danger); }
.btn-mais {
  margin-top: 0.5rem;
  min-height: 44px;          /* media 39px: abaixo do alvo de toque */
  padding: 0.6rem 1.1rem;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 500 0.92rem var(--font-body);
  cursor: pointer;
}
.btn-mais:hover { border-color: var(--blue); color: var(--blue); }

.prompt-caixa {
  margin: 1.2rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.prompt-caixa summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}
.prompt-caixa textarea {
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: vertical;
}
.prompt-acoes { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.6rem; flex-wrap: wrap; }
.prompt-acoes .feito { background: #0d7a3f; color: #fff; border-color: #0d7a3f; }
.prompt-acoes .manual { background: #b45309; color: #fff; border-color: #b45309; }

/* Telas estreitas: as maquetes ficam em duas colunas em vez de uma. São
   imagem, não texto — em coluna única viram um rolo sem fim. */
@media (max-width: 620px) {
  .maquetes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .maquetes .cartao-nome { font-size: 0.86rem; }
}