/* ============================================================
   Nova home (briefing, seção 4) — blocos novos
   Reaproveita as variáveis e componentes de vertice-theme.css
   e styles.css; aqui só o que não existia.
   ============================================================ */

/* espaço padrão dos blocos novos */
.para-quem, .como-funciona, .faq { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.diferenciais .section-head { margin-bottom: 1.75rem; }

/* ---------- 2 · Para quem ---------- */
.para-quem-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}

/* ---------- 7 · Quem faz: cartão no lugar da foto ---------- */
.quem-cartao {
  position: relative; overflow: hidden;
  width: 100%; max-width: 420px;
  padding: 1.75rem 1.75rem 1.5rem;
  border: 1px solid var(--v-border);
  border-radius: 20px;
  background:
    radial-gradient(420px circle at 100% 0%, color-mix(in srgb, var(--v-accent) 22%, transparent), transparent 60%),
    var(--v-surface);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.6);
}
/* V que se desenha sozinho quando o bloco aparece (animação de styles.css) */
.quem-cartao .quem-v {
  position: absolute; right: -18px; bottom: -22px; z-index: 0;
  width: 190px; height: 190px; pointer-events: none;
}
.quem-cartao .quem-v path { stroke-width: 2.4; opacity: .38; }
.quem-cartao .quem-v path:nth-child(2) { opacity: .26; }
.quem-cartao > *:not(.quem-v) { position: relative; z-index: 1; }
.quem-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; }
.quem-topo img { width: 38px; height: auto; }
.quem-local {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--v-text-muted);
  padding: 4px 10px; border: 1px solid var(--v-border); border-radius: 999px;
}
.quem-nome {
  margin: 0; font-family: var(--font-display, "Unbounded", sans-serif);
  font-size: 2rem; font-weight: 600; letter-spacing: -.02em; color: var(--v-text);
}
.quem-cargo { margin: .25rem 0 1.4rem; font-size: .95rem; color: var(--v-text-muted); }
.quem-etapas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--v-border); }
.quem-etapas li {
  display: flex; align-items: center; gap: .9rem;
  padding: .7rem 0; border-bottom: 1px solid var(--v-border);
  font-weight: 600; color: var(--v-text);
}
.quem-etapas span { font-family: var(--font-mono); font-size: .78rem; color: var(--v-accent); }
.quem-rodape {
  margin: 1.1rem 0 0;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v-text-muted);
}
.para-quem-grid .service-card { display: flex; flex-direction: column; gap: .6rem; }
.para-quem-grid .service-card p { flex: 1; }
.para-quem-grid .project-link { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- 5 · Como funciona ---------- */
.passos-lista {
  list-style: none; margin: 0; padding: 0;
  counter-reset: passo;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
}
.passos-lista li {
  counter-increment: passo;
  position: relative;
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-lg);
  background: var(--v-surface);
}
.passos-lista li::before {
  content: counter(passo, decimal-leading-zero);
  display: block; margin-bottom: .8rem;
  font-family: var(--font-mono); font-size: .9rem; font-weight: 600;
  color: var(--v-accent);
}
.passos-lista h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
.passos-lista p { font-size: .95rem; margin: 0; color: var(--v-text-muted); }

/* ---------- 8 · Perguntas frequentes ---------- */
.faq-lista { max-width: 760px; border-top: 1px solid var(--v-border); }
.faq-lista details { border-bottom: 1px solid var(--v-border); }
.faq-lista summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px; padding: .9rem 0;
  font-weight: 600; font-size: 1.02rem; color: var(--v-text);
}
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after {
  content: "+"; flex: none;
  font-family: var(--font-mono); font-size: 1.3rem; line-height: 1;
  color: var(--v-accent);
}
.faq-lista details[open] summary::after { content: "–"; }
.faq-lista summary:focus-visible { outline: 2px solid var(--v-accent); outline-offset: 4px; border-radius: 6px; }
.faq-lista details p { margin: 0 0 1.1rem; max-width: 65ch; color: var(--v-text-muted); line-height: 1.55; }

/* ---------- 9 · Contato ---------- */
.contact-wa { margin-top: 1.25rem; }
.contact-outros { margin-top: 1.25rem; font-size: .95rem; color: var(--v-text-muted); }
.contact-outros a { color: var(--v-link); font-weight: 600; }

/* ---------- celular ---------- */
@media (max-width: 980px) {
  .passos-lista { grid-template-columns: repeat(2, 1fr); }
  .para-quem-grid { grid-template-columns: 1fr; }
  .about .about-visual { order: 0; justify-content: flex-start; }
}

@media (max-width: 767px) {
  /* nada decorativo no celular */
  .stage-coord, .about-coord { display: none; }

  /* logo acima do texto e menor */
  .hero-stage { order: -1; width: 100%; max-width: 240px; margin: 0 auto .5rem; }

  .para-quem-grid { grid-template-columns: 1fr; }

  /* passos: lista vertical com linha ligando os números */
  .passos-lista { grid-template-columns: 1fr; gap: 0; }
  .passos-lista li {
    border: 0; border-radius: 0; background: none;
    padding: 0 0 1.6rem 2.8rem;
  }
  .passos-lista li::before {
    position: absolute; left: 0; top: 0;
    width: 2rem; height: 2rem; margin: 0;
    display: grid; place-items: center;
    border: 1px solid var(--v-accent); border-radius: 50%;
    background: var(--v-bg); font-size: .78rem;
  }
  .passos-lista li:not(:last-child)::after {
    content: ""; position: absolute;
    left: calc(1rem - 1px); top: 2rem; bottom: 0;
    width: 1px; background: var(--v-border-strong);
  }

  /* modelos: carrossel com o dedo, sem JS */
  #clinicas .portfolio-grid {
    display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -1.25rem; padding: 0 1.25rem 12px;
    scroll-padding-inline: 1.25rem;
    scrollbar-width: none;
  }
  #clinicas .portfolio-grid::-webkit-scrollbar { display: none; }
  #clinicas .project-card {
    flex: 0 0 85%; scroll-snap-align: start;
  }
  #clinicas .project-card:hover { transform: none; }

  .hero-actions a, .contact-wa { width: 100%; justify-content: center; text-align: center; }
  .btn-primary, .btn-secondary { min-height: 48px; }
}

/* ---------- 10 · Rodapé: ícones das redes, contato e chamada ---------- */
.rodape-redes { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0 1rem; }
.rodape-redes a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--v-border); border-radius: 12px;
  background: var(--v-surface); color: var(--v-text);
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}
.rodape-redes a:hover, .rodape-redes a:focus-visible {
  border-color: var(--v-accent); color: var(--v-accent); transform: translateY(-2px);
}
.rodape-contato { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.rodape-contato li { display: flex; flex-direction: column; gap: .15rem; }
.rodape-rotulo {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--v-text-muted);
}
.rodape-contato a { font-weight: 600; color: var(--v-text); overflow-wrap: anywhere; }
.rodape-contato a[href^="mailto:"] { font-size: .84rem; }
.rodape-contato a:hover { color: var(--v-link); }
.rodape-contato span:not(.rodape-rotulo) { color: var(--v-text); font-size: .95rem; }
.rodape-cta p:not(.footer-heading) { margin: 0 0 1rem; font-size: .95rem; color: var(--v-text-muted); max-width: 30ch; }
.rodape-cta .btn-primary { min-height: 48px; }

@media (max-width: 560px) {
  .rodape-cta .btn-primary { width: 100%; justify-content: center; text-align: center; }
}

/* ---------- compartilhar o link do modelo (discreto) ---------- */
.compartilhar-modelo {
  position: relative; vertical-align: middle;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; margin-left: .15rem; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
  color: var(--v-text-muted);
  transition: color .15s ease, background .15s ease;
}
.compartilhar-modelo:hover, .compartilhar-modelo:focus-visible { color: var(--v-accent); background: var(--v-surface-2); }
.compartilhar-modelo:focus-visible { outline: 2px solid var(--v-accent); outline-offset: 2px; }
.compartilhar-aviso {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translate(-50%, 4px);
  padding: 4px 8px; border-radius: 6px; white-space: nowrap;
  background: var(--v-text); color: var(--v-bg);
  font-family: var(--font-mono); font-size: .7rem;
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
.compartilhar-modelo.is-avisando .compartilhar-aviso { opacity: 1; transform: translate(-50%, 0); }
.modelo-acoes .compartilhar-modelo { align-self: center; border: 1px solid var(--v-border); border-radius: 999px; }

/* ---------- Projetos no ar: chave celular / computador ---------- */
.vistas {
  flex: none; margin-left: auto;
  display: inline-flex; gap: 2px; padding: 2px;
  border: 1px solid var(--v-border); border-radius: 999px;
  background: var(--v-surface);
}
.vista-btn {
  position: relative; display: grid; place-items: center;
  width: 30px; height: 24px; padding: 0;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--v-text-muted);
  transition: background .2s ease, color .2s ease;
}
.vista-btn::after { content: ""; position: absolute; inset: -10px -3px; } /* área de toque maior */
.vista-btn:hover { color: var(--v-text); }
.vista-btn[aria-pressed="true"] { background: var(--v-accent); color: var(--v-accent-ink); }
.vista-btn:focus-visible { outline: 2px solid var(--v-accent); outline-offset: 2px; }
.vista-link { display: block; }
.tem-vistas .window-shot[hidden] { display: none !important; }
.tem-vistas .window-url { transition: opacity .2s ease; }
.tem-vistas .window-url.is-trocando { opacity: 0; }
.tem-vistas .window-shot:not([hidden]) { animation: vista-entra .35s ease; }
@keyframes vista-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tem-vistas .window-shot:not([hidden]) { animation: none; } }

/* vista de computador: mesma velocidade de descida de antes (13,2 s), mas sem a espera de ~3,6 s no topo */
.tem-vistas .window-shot.phone-stage.site-scroll img.phone-scroll {
  animation-name: site-rola-rapido; animation-duration: 27s;
}
@keyframes site-rola-rapido {
  0%, 2% { transform: translateY(0); }
  51%, 58% { transform: translateY(calc(-1 * var(--rola, 76%))); }
  96%, 100% { transform: translateY(0); }
}

/* título do topo no celular: menor e mais leve, para os botões aparecerem na primeira tela */
@media (max-width: 767px) {
  .hero-copy h1 { font-size: clamp(1.75rem, 7.4vw, 2.3rem); font-weight: 600; line-height: 1.12; }
  .hero { padding-top: 1.5rem; }
}