/* Taquionica — acabamento da identidade visual (carrega depois do CSS compilado).
   Cor da marca: #E77817 = oklch(69% .17 54). */

:root {
  --tq-laranja: oklch(69% .17 54);
  --tq-laranja-escuro: oklch(55% .16 50);
  --tq-ambar: oklch(84% .13 75);
}

::selection { background: color-mix(in oklab, var(--tq-laranja) 28%, transparent); }

/* Logo maior no cabeçalho (barra tem 5rem / 6rem de altura) */
header img[alt^="Taquionica"] { height: 3.5rem; }
@media (min-width: 768px) { header img[alt^="Taquionica"] { height: 4rem; } }

/* Tipografia: títulos mais compactos; H1 do hero cabe em menos linhas */
h1, h2, h3 { letter-spacing: -.03em; text-wrap: balance; }
@media (min-width: 1024px) {
  h1.lg\:text-6xl { font-size: 3.35rem; line-height: 1.06; }
}
@media (min-width: 1280px) {
  h1.lg\:text-6xl { font-size: 3.6rem; }
}

/* Cards: cantos mais generosos, filete laranja ao passar o mouse */
.card-surface { border-radius: 1rem; }
.card-hover { position: relative; overflow: hidden; }
.card-hover::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--gradient-accent); opacity: 0; transition: opacity .2s ease-out;
}
.card-hover:hover { box-shadow: 0 16px 36px -18px color-mix(in oklab, var(--tq-laranja) 55%, transparent); }
.card-hover:hover::after { opacity: 1; }

/* Links do rodapé e texto com hover ganham a cor da marca */
footer a:hover { color: var(--tq-ambar); }

/* Posicionamento no hero das páginas de serviço */
.tq-hero-filtro { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .82rem; font-weight: 600; color: #ffffffd9; }
.tq-hero-filtro span { display: inline-flex; align-items: center; gap: .5rem; }
.tq-hero-filtro span::before { content: ""; width: .4rem; height: .4rem; border-radius: 999px; background: var(--tq-ambar); flex-shrink: 0; }
.tq-hero-note { margin-top: .9rem; font-size: .9rem; line-height: 1.5; color: #ffffffb3; max-width: 36rem; }

/* Formulário qualificado (todas as páginas) */
.tq-opt { font-weight: 400; color: var(--muted-foreground); font-size: .8em; }
.tq-form .tq-filtro { margin-top: 1.1rem; padding: .65rem .85rem; border-left: 3px solid var(--tq-laranja); background: oklch(69% .17 54 / .08); border-radius: .5rem; font-size: .8rem; line-height: 1.5; color: var(--foreground); }
.tq-form .tq-note-cta { margin-top: .6rem; text-align: center; font-size: .8rem; font-weight: 600; color: var(--foreground); }
.tq-field select:invalid { color: var(--muted-foreground); }

/* Prova social anônima: Setor → Problema → O que fizemos → Resultado */
.tq-casos { margin-top: 3rem; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .tq-casos { grid-template-columns: repeat(3, 1fr); } }
.tq-caso { position: relative; overflow: hidden; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 1rem; padding: 1.5rem; }
.tq-caso::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gradient-accent); }
.tq-caso-setor { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tq-laranja-escuro); }
.tq-caso dl { margin-top: 1rem; display: grid; gap: .9rem; }
.tq-caso dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-foreground); }
.tq-caso dd { margin-top: .2rem; font-size: .9rem; line-height: 1.55; color: var(--foreground); }
.tq-caso div:last-child dd { font-weight: 600; }

/* Case em vídeo: miniatura estática com números; o vídeo só carrega ao tocar */
.tq-video-thumb { position: relative; width: 100%; max-width: 330px; margin: 0 auto; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border); background: #000; }
.tq-video-thumb img { display: block; width: 100%; height: auto; }
.tq-video-stats { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 3.5rem .9rem .9rem; list-style: none; display: grid; gap: .5rem; color: #fff; background: linear-gradient(180deg, transparent, oklch(12% .03 258 / .92) 45%); }
.tq-video-stats li { display: flex; align-items: baseline; gap: .5rem; font-size: .72rem; line-height: 1.3; color: #ffffffcc; }
.tq-video-stats strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--tq-ambar); white-space: nowrap; }
.tq-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border: 0; border-radius: 999px; background: #fff; color: #0b1020; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; box-shadow: 0 10px 30px -10px #000; }
.tq-video-play svg { width: 1.1rem; height: 1.1rem; }
.tq-video-play:hover { background: var(--tq-ambar); }

/* Página de termos */
.tq-termos h2 { margin-top: 2rem; font-size: 1.25rem; }
.tq-termos p, .tq-termos li { color: var(--muted-foreground); line-height: 1.7; }
.tq-termos a { color: var(--tq-laranja-escuro); text-decoration: underline; }

/* Aviso de cookies: menor e discreto */
.z-\[60\].bottom-4 { bottom: .75rem; left: .75rem; right: .75rem; }
@media (min-width: 768px) { .z-\[60\].bottom-4 { right: auto; max-width: 21rem; } }
.z-\[60\].bottom-4 > div { padding: .7rem .85rem; border-radius: .9rem; }
.z-\[60\].bottom-4 h4 { font-size: .78rem; }
.z-\[60\].bottom-4 p { font-size: .68rem; line-height: 1.35; margin-top: .15rem; }
.z-\[60\].bottom-4 .mt-3 { margin-top: .5rem; }
.z-\[60\].bottom-4 .gap-3 { gap: .6rem; }