/* ==========================================================================
   Tipografia (Anton + Barlow) e reforço do banner principal.
   Carregado por último para sobrepor o Tailwind compilado das sheets 00–03.
   ========================================================================== */

/* --- Tipografia base ------------------------------------------------------ */
/* Sobrepõe o `body { font-family: 'Sora' }` da sheet-00. */
body {
  font-family: Barlow, system-ui, -apple-system, sans-serif;
  letter-spacing: .005em;
}

/* Anton só existe em um peso (400). O `!important` é para vencer o
   `.font-bold` do Tailwind, que senão força um negrito sintético borrado. */
h1, h2, .hero-title {
  font-family: Anton, "Arial Narrow", system-ui, sans-serif;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* --- Título do banner: só no celular -------------------------------------- */
/* No desktop o banner volta a ser o original, então tudo que eu acrescentei
   fica preso ao mobile e o bloco min-width adiante desfaz a Anton no #inicio. */
@media (max-width: 767px) {
  .hero-title {
    /* Piso menor que 2.9rem: em telas ~400px "SHAPE COMEÇA AQUI" em Anton
       encostava nas duas bordas, o que atrapalhava a leitura. */
    font-size: clamp(2.45rem, 8.2vw, 5.5rem);
    /* 1.05 e não .92: a Anton tem caixa alta bem mais alta que a Sora. */
    line-height: 1.05;
    letter-spacing: .015em;
    text-shadow: 0 2px 34px hsl(0 0% 0% / .55);
  }
}

/* Desktop: devolve o título do banner ao que era antes. A regra `h1, h2` lá em
   cima continua valendo para o resto do site — só o #inicio sai dela. */
@media (min-width: 768px) {
  #inicio .hero-title {
    font-family: Sora, system-ui, sans-serif;
    font-weight: 700 !important;
    text-transform: none;
    letter-spacing: normal;
  }
}

/* --- Legibilidade sobre a foto: só no celular ----------------------------- */
/* No celular o texto cai sobre a camiseta clara e precisa deste scrim. No
   desktop ele não entra: lá valem só os overlays originais do site. */
@media (max-width: 767px) {
  #inicio::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      hsl(var(--background) / .30) 30%,
      hsl(var(--background) / .74) 48%,
      hsl(var(--background) / .90) 100%
    );
  }
}

/* Sombra reforçada nas linhas de texto do banner, também só no celular. */
@media (max-width: 767px) {
  .hero-title { text-shadow: 0 2px 10px hsl(0 0% 0% / .75), 0 4px 40px hsl(0 0% 0% / .6); }
  #inicio p { text-shadow: 0 1px 8px hsl(0 0% 0% / .7); }
}

/* --- Texto destacado (.text-gradient) ------------------------------------- */
/* Era um gradiente ciano->azul pintado com background-clip:text. Em Anton
   caixa alta ficava irregular, com a ponta da palavra sumindo no fundo
   escuro. Virou azul solido: sem background-clip, o padding que compensava
   o recorte dos glifos deixa de ser necessario. */
.text-gradient {
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #3b82f6;
  text-shadow: none;
  padding-block: 0;
}

/* --- Fade nas bordas do carrossel ----------------------------------------- */
/* Substitui os dois divs de gradiente que ficavam por cima das fotos: ali a
   imagem continuava inteira sob um véu escuro. Com mask ela some de verdade,
   então funciona sobre qualquer fundo. Vai só no scroller — as setas são
   irmãs dele, não filhas, e por isso continuam 100% opacas. */
.carousel-fade {
  mask-image: linear-gradient(to right, transparent, #000, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000, transparent);
}

/* --- Seção "Essa consultoria é pra você?" --------------------------------- */
/* Os dois cartões já entram com stagger (KC/qC do framer-motion). O que falta
   é a entrada item a item e a interação, que ficam por conta do CSS. */

.pq-card {
  transition:
    transform .45s cubic-bezier(.22, 1, .36, 1),
    border-color .45s ease,
    box-shadow .45s ease;
}

.pq-card-yes:hover {
  transform: translateY(-5px);
  border-color: hsl(var(--primary) / .6);
  box-shadow: 0 18px 44px -14px hsl(var(--primary) / .4);
}

.pq-card-no:hover {
  transform: translateY(-5px);
  border-color: hsl(var(--destructive) / .45);
  box-shadow: 0 18px 44px -14px hsl(var(--destructive) / .28);
}

.pq-badge { transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.pq-card:hover .pq-badge { transform: scale(1.1) rotate(-6deg); }

/* O hover mexe no ícone, nunca no .pq-item: o item carrega a animação de
   entrada com fill `both`, e um transform de hover ali seria sobreposto
   pelo estado final da animação. */
.pq-icon { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.pq-item:hover .pq-icon { transform: scale(1.3); }

.pq-item span { transition: color .3s ease; }
.pq-item:hover span { color: hsl(var(--foreground)); }

/* Entrada item a item, conforme cada linha entra na viewport.
   Sob @supports porque onde não há scroll-driven animation (Firefox, Safari
   antigo) o item ficaria preso em opacity 0 — ou seja, texto invisível. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pq-item {
      animation: pq-in linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
  }
}

@keyframes pq-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}

/* --- Acessibilidade ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* A entrada item a item já fica de fora pelo `no-preference` acima, então
     aqui sobram só as transições de hover. */
  .pq-card,
  .pq-badge,
  .pq-icon,
  .pq-item span { transition-duration: .01ms !important; }

  .pq-card-yes:hover,
  .pq-card-no:hover { transform: none; }
}