/* ==========================================================================
   Visie — home. Carrega depois de styles.css e antes de menu.css.
   ========================================================================== */

.page-home .deck { scroll-snap-type: y proximity; }
.page-home .slide {
  scroll-snap-stop: normal;
  align-content: center;
  padding-block: 4rem;
}

/* o atributo hidden precisa vencer o display que a gente declara aqui */
.page-home [hidden] { display: none !important; }

.link-forte {
  font-weight: bold;
  color: inherit;
  text-decoration: underline wavy 2px;
  text-underline-offset: 4px;
}

/* ==========================================================================
   Hero — carimbo
   ========================================================================== */

.stamp {
  flex: 0 0 auto;
  border: var(--line);
  box-shadow: var(--shadow-hard);
  background: var(--paper);
  padding: 1rem 1.25rem;
  text-align: center;
  rotate: -3deg;
  max-width: 14rem;
}

.stamp__num {
  display: block;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -.03em;
  overflow-wrap: break-word;
}

.stamp__label {
  display: block;
  margin-top: .4rem;
  font-size: .72rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.is-active .stamp { animation: pop .5s var(--ease-pop) var(--d, 0s) both; }

/* ==========================================================================
   Bloco 2 — a frase e os serviços
   ========================================================================== */

.frase {
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  line-height: 1.25;
  font-weight: bold;
  letter-spacing: -.02em;
  margin: 1.25rem 0 1rem;
  max-width: 52rem;
}

.frase em {
  font-style: normal;
  background: var(--ink);
  color: var(--paper);
  padding: 0 .2em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.frase__vazio { color: var(--gray-2); letter-spacing: -.1em; }

.probs {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.prob {
  font: inherit;
  font-size: .88rem;
  text-align: left;
  background: var(--paper);
  border: var(--line-thin);
  padding: .45rem .8rem;
  cursor: pointer;
  transition: translate .12s var(--ease-pop), box-shadow .12s;
}

.prob:hover { translate: -2px -2px; box-shadow: 4px 4px 0 var(--ink); }
.prob:active { translate: 1px 1px; box-shadow: none; }
.prob:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* marcado: preenchimento invertido e um ✓, pra não depender só do contraste */
.prob.is-on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: var(--shadow-soft);
}

.prob.is-on::before { content: "✓ "; font-weight: bold; }

.svcs__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: var(--line);
  padding-top: .6rem;
}

.svcs__conta { margin: 0; font-size: .85rem; color: var(--gray-3); }

.svcs__limpar {
  font: inherit;
  font-size: .72rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--paper);
  border: var(--line-thin);
  padding: .3rem .7rem;
  cursor: pointer;
}

.svcs__limpar:hover { background: var(--ink); color: var(--paper); }

.svcs {
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .6rem;
}

.svc {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: var(--line);
  box-shadow: var(--shadow-soft);
  padding: .75rem .9rem .8rem;
  transition: translate .12s var(--ease-pop), box-shadow .12s, opacity .2s;
}

.svc:hover { translate: -3px -3px; box-shadow: 7px 7px 0 var(--ink); }
.svc:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.svc__t { font-weight: bold; font-size: 1rem; line-height: 1.2; }
.svc__s { font-size: .8rem; line-height: 1.35; color: var(--gray-3); }

/* responde ao que foi marcado */
.svc.is-match { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-hard); }
.svc.is-match .svc__s { color: var(--gray-2); }

.svc__match {
  margin-top: auto;
  padding-top: .45rem;
  font-size: .74rem;
  line-height: 1.35;
}

/* não marcado: recua, mas continua legível e clicável */
.svc.is-off { border-style: dashed; box-shadow: none; opacity: .5; }
.svc.is-off:hover { opacity: 1; translate: -2px -2px; box-shadow: var(--shadow-soft); }

/* ==========================================================================
   Bloco 3 — setores
   Estático de propósito: a página já tem o widget da frase logo acima, e
   dois blocos interativos seguidos viram elemento demais.
   ========================================================================== */

.setores {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: .6rem;
}

.setor {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: var(--line);
  box-shadow: var(--shadow-soft);
  padding: .8rem .95rem .85rem;
  transition: translate .12s var(--ease-pop), box-shadow .12s, rotate .12s var(--ease-pop);
}

.setor:hover { translate: -3px -3px; rotate: -.6deg; box-shadow: 7px 7px 0 var(--ink); }
.setor:active { translate: 2px 2px; rotate: 0deg; box-shadow: 2px 2px 0 var(--ink); }
.setor:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.setor__t {
  font-weight: bold;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.setor__l { font-size: .92rem; line-height: 1.35; }

/* o cliente é a prova da linha: separado por um filete, sem número */
.setor__c {
  margin-top: auto;
  padding-top: .5rem;
  border-top: var(--line-thin);
  font-size: .78rem;
  font-weight: bold;
}

.setor__c::before { content: "↳ "; color: var(--gray-3); }

.is-active .setores [data-anim="pop"] { animation: pop .4s var(--ease-pop) var(--d, 0s) both; }

/* ==========================================================================
   Bloco 4 — o jeito
   ========================================================================== */

.jeito {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: .6rem;
}

.jeito li {
  border-left: 8px solid var(--ink);
  background: var(--gray-1);
  padding: .75rem 1rem;
  font-size: .92rem;
}

/* ==========================================================================
   Bloco 5 — cases
   ========================================================================== */

.casos { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .5rem; }

.caso { border: var(--line); background: var(--paper); }
.caso.is-open { box-shadow: var(--shadow-hard); }

.caso__topo {
  width: 100%;
  font: inherit;
  text-align: left;
  background: none;
  border: none;
  padding: .8rem 1rem;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto;
  align-items: center;
  gap: 1rem;
}

.caso__topo:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }

.caso__cliente { font-weight: bold; font-size: 1.05rem; line-height: 1.2; }
.caso__cliente small {
  display: block;
  font-weight: normal;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gray-3);
  margin-top: .1rem;
}

.caso__num { font-weight: bold; font-size: 1.5rem; line-height: 1.05; letter-spacing: -.02em; }
.caso__num small {
  display: block;
  font-weight: normal;
  font-size: .68rem;
  letter-spacing: 0;
  color: var(--gray-3);
  margin-top: .15rem;
}

.caso__seta { font-size: 1.1rem; transition: rotate .15s var(--ease-pop); }
.caso.is-open .caso__seta { rotate: 180deg; }

.caso__corpo { padding: 0 1rem 1rem; border-top: var(--line-thin); }
.caso__corpo p { margin: .75rem 0 0; font-size: .9rem; }
.caso__svc { font-size: .8rem !important; color: var(--gray-3); }

/* ==========================================================================
   Bloco 6 — artigos
   ========================================================================== */

.temas {
  list-style: none;
  margin: 1.25rem 0 .9rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.tema {
  font: inherit;
  font-size: .75rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--paper);
  border: var(--line-thin);
  padding: .35rem .8rem;
  cursor: pointer;
}

.tema:hover { translate: -2px -2px; box-shadow: 3px 3px 0 var(--ink); }
.tema.is-on { background: var(--ink); color: var(--paper); }
.tema:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.artigos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: .45rem;
}

.artigo {
  height: 100%;
  display: grid;
  gap: .25rem;
  align-content: start;
  text-decoration: none;
  color: inherit;
  border-left: 8px solid var(--ink);
  background: var(--gray-1);
  padding: .6rem .9rem;
  transition: translate .12s var(--ease-pop);
}

.artigo:hover { translate: 4px 0; }
.artigo:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.artigo__t { font-size: .9rem; font-weight: bold; line-height: 1.3; }
.artigo__tags { font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-3); }

/* ==========================================================================
   Bloco 7 — vídeos
   ========================================================================== */

.videos {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .6rem;
}

.video {
  height: 100%;
  display: grid;
  gap: .5rem;
  align-content: start;
  text-decoration: none;
  color: inherit;
  border: var(--line);
  box-shadow: var(--shadow-soft);
  background: var(--paper);
  padding: .6rem .7rem .75rem;
  transition: translate .12s var(--ease-pop), box-shadow .12s;
}

.video:hover { translate: -3px -3px; box-shadow: 7px 7px 0 var(--ink); }
.video:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* placeholder de thumb, na mesma convenção do [logo] das outras páginas */
.video__thumb {
  display: grid;
  place-content: center;
  gap: .3rem;
  aspect-ratio: 16 / 9;
  border: 2px dashed var(--gray-3);
  color: var(--gray-3);
  font-size: .68rem;
  text-align: center;
}

.video__play {
  font-size: 1.4rem;
  color: var(--ink);
  line-height: 1;
}

.video__t { font-size: .84rem; font-weight: bold; line-height: 1.3; }

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 860px) {
  .page-home .slide { padding: 2rem 1.25rem; }

  .stamp { rotate: -2deg; max-width: 100%; flex: 0 1 auto; }
  .stamp__num { font-size: 1.8rem; }

  .frase { font-size: 1.25rem; margin-bottom: .75rem; }
  .prob { font-size: .8rem; padding: .4rem .65rem; }
  .probs { gap: .4rem; margin-bottom: 1rem; }

  .svcs { grid-template-columns: 1fr; gap: .45rem; }
  .svc { padding: .6rem .75rem .65rem; }
  .svc__t { font-size: .92rem; }
  .svc.is-off { display: none; }   /* no celular, recuado vira ruído: some */

  .setores { grid-template-columns: 1fr; gap: .45rem; }
  .setor { padding: .65rem .8rem .7rem; }
  .setor__l { font-size: .85rem; }

  .jeito { grid-template-columns: 1fr; }
  .jeito li { font-size: .85rem; }

  /* case: cliente e número empilham, seta na primeira linha */
  .caso__topo { grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1rem; }
  .caso__cliente { grid-column: 1; }
  .caso__seta { grid-column: 2; grid-row: 1 / 3; }
  .caso__num { grid-column: 1; font-size: 1.25rem; }

  .artigos { grid-template-columns: 1fr; }
  .videos { grid-template-columns: 1fr 1fr; gap: .45rem; }
  .video__t { font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
  .is-active .stamp { animation: none !important; }
  .svc, .prob, .artigo, .video, .setor, .caso__seta { transition: none; }
  .is-active .setores [data-anim="pop"] { animation: none !important; }
}