/* ============================================================
   Thati Lira — fundamentos
   Paleta bordô/creme + superfícies de vidro.
   ============================================================ */

:root {
  /* Marca */
  --vinho:        #722F37;
  --vinho-claro:  #9B4D58;
  --vinho-fundo:  #5A242B;
  --dourado:      #C4A882;
  --dourado-claro:#E3D2B8;
  --creme:        #F9F5F2;
  --creme-2:      #F5EFEA;
  --tinta:        #2C2C2C;
  --tinta-suave:  #6B6360;

  /* Vidro */
  --vidro-fundo:  linear-gradient(157deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
  --vidro-borda:  rgba(255,255,255,.62);
  --vidro-luz:    rgba(255,255,255,.9);
  --vidro-sombra: 0 20px 45px -24px rgba(58,22,27,.45), 0 2px 8px -4px rgba(58,22,27,.18);
  --desfoque:     blur(22px) saturate(180%);

  /* Ritmo */
  --r-xs: 12px;  --r-sm: 16px;  --r-md: 22px;  --r-lg: 30px;  --r-xl: 40px;
  --largura: 1180px;
  --leitura: 720px;

  --fonte-logo: "Brittany Signature", "Caveat", cursive;
  --transicao: 260ms cubic-bezier(.22,1,.36,1);

  color-scheme: light;
}

/* Fonte da logo — rede de segurança.
   A logo do site é a imagem assets/img/thati/logo-thatilira.png, para ficar igual
   em qualquer aparelho. Estas regras só entram em ação se o PNG faltar. */
@font-face {
  font-family: "Brittany Signature";
  src: url("../fontes/brittany-signature.woff2") format("woff2"),
       url("../fontes/brittany-signature.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ---- Fundo vivo: manchas de cor que dão o que refratar ao vidro ---- */
.atmosfera {
  position: fixed;
  inset: -20vh -10vw;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(46vw 46vw at 12% 8%,  rgba(114,47,55,.20), transparent 62%),
    radial-gradient(38vw 38vw at 88% 2%,  rgba(196,168,130,.30), transparent 60%),
    radial-gradient(52vw 52vw at 78% 62%, rgba(155,77,88,.16), transparent 64%),
    radial-gradient(40vw 40vw at 8% 82%,  rgba(196,168,130,.20), transparent 62%);
  animation: respirar 26s ease-in-out infinite alternate;
}
@keyframes respirar {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(1.5%,-2%, 0) scale(1.02); }
}

/* Grão finíssimo: tira o aspecto "plástico" das superfícies grandes */
.atmosfera::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  .atmosfera { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---- Tipografia ---- */
h1, h2, h3, h4 {
  font-family: "Bellefair", Georgia, serif;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .01em;
  color: var(--vinho);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 8vw, 4rem); }
h2 { font-size: clamp(1.85rem, 5.4vw, 2.6rem); }
h3 { font-size: clamp(1.45rem, 4vw, 1.9rem); }
p  { margin: 0 0 1.15em; }

a { color: var(--vinho); text-decoration-color: rgba(114,47,55,.28); text-underline-offset: .22em; }
a:hover { color: var(--vinho-claro); }

.assinatura { font-family: "Caveat", cursive; font-weight: 600; }

.olho {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--vinho-claro);
}

img { max-width: 100%; height: auto; display: block; }

/* Ícones embutidos (todos usam viewBox 24): tamanho previsível em qualquer contexto.
   Gráficos e ilustrações têm outro viewBox e ficam livres. */
svg[viewBox="0 0 24 24"]:not([width]) { width: 20px; height: 20px; flex: none; }

/* ---- Superfícies de vidro ---- */
.vidro {
  position: relative;
  background: var(--vidro-fundo);
  backdrop-filter: var(--desfoque);
  -webkit-backdrop-filter: var(--desfoque);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 var(--vidro-luz),
    inset 0 -1px 0 rgba(114,47,55,.06),
    var(--vidro-sombra);
}
/* Brilho especular na quina superior — o que faz parecer vidro de verdade */
.vidro::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(255,255,255,.95), rgba(255,255,255,0) 42%, rgba(196,168,130,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.vidro--escuro {
  background: linear-gradient(157deg, rgba(58,22,27,.62), rgba(58,22,27,.34));
  border-color: rgba(255,255,255,.22);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 22px 50px -26px rgba(0,0,0,.6);
}
.vidro--escuro::before { background: linear-gradient(150deg, rgba(255,255,255,.5), rgba(255,255,255,0) 45%, rgba(196,168,130,.3)); }

.vidro--vinho {
  background: linear-gradient(157deg, rgba(114,47,55,.92), rgba(90,36,43,.86));
  border-color: rgba(255,255,255,.2);
  color: var(--creme);
}

/* ---- Botões ---- */
.btn {
  --btn-fundo: var(--vidro-fundo);
  --btn-cor: var(--vinho);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .82em 1.5em;
  min-height: 48px;
  font: inherit;
  font-weight: 500;
  font-size: .95rem;
  line-height: 1;
  color: var(--btn-cor);
  background: var(--btn-fundo);
  backdrop-filter: var(--desfoque);
  -webkit-backdrop-filter: var(--desfoque);
  border: 1px solid var(--vidro-borda);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--vidro-luz), 0 10px 24px -14px rgba(58,22,27,.5);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--vidro-luz), 0 16px 30px -14px rgba(58,22,27,.55); }
.btn:active { transform: translateY(0) scale(.985); }
/* varredura de luz ao passar/pressionar */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform 700ms cubic-bezier(.22,1,.36,1);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(120%); }

.btn--principal {
  --btn-fundo: linear-gradient(140deg, var(--vinho), var(--vinho-fundo));
  --btn-cor: #fff;
  border-color: rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 30px -14px rgba(114,47,55,.85);
}
.btn--dourado {
  --btn-fundo: linear-gradient(140deg, var(--dourado), #B08F63);
  --btn-cor: #3A2318;
  border-color: rgba(255,255,255,.35);
}
.btn--fantasma {
  --btn-fundo: transparent;
  border-color: rgba(114,47,55,.24);
  box-shadow: none;
  backdrop-filter: none;
}
.btn--bloco { width: 100%; }
.btn--pequeno { padding: .6em 1.1em; min-height: 40px; font-size: .87rem; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---- Botão redondo de ícone (site, painel, instalador) ---- */
.icone-btn {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(114,47,55,.14);
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  color: var(--vinho);
  cursor: pointer;
  transition: background var(--transicao), transform var(--transicao);
}
.icone-btn:hover { background: rgba(114,47,55,.1); transform: translateY(-1px); }
.icone-btn:active { transform: scale(.94); }
.icone-btn svg { width: 21px; height: 21px; }

/* ---- Foco visível e acessível ---- */
:focus-visible {
  outline: 2px solid var(--vinho-claro);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- Utilitários ---- */
.container { width: min(100% - 2.4rem, var(--largura)); margin-inline: auto; }
.container--leitura { width: min(100% - 2.4rem, var(--leitura)); margin-inline: auto; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pilha { display: grid; gap: 1rem; }
.linha { display: flex; align-items: center; gap: .6rem; }
.empurra { margin-left: auto; }
.rolagem-x {
  display: flex; gap: .6rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: .3rem;
  -webkit-overflow-scrolling: touch;
}
.rolagem-x::-webkit-scrollbar { display: none; }
.rolagem-x > * { scroll-snap-align: start; flex: none; }

/* Entrada suave dos blocos ao rolar */
[data-revelar] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--transicao), transform 700ms cubic-bezier(.22,1,.36,1);
}
[data-revelar].visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-revelar] { opacity: 1; transform: none; transition: none; }
}