/* ============================================================
   PANIFICADORA PÃO DOURADO — SITE.CSS
   Estilos próprios que complementam o Tailwind (via CDN).
   Tudo apoiado nos tokens de tokens.css (var(--pd-*)).
   ============================================================ */

/* ---------- BASE ---------- */
html { scroll-behavior: smooth; }

body {
  background-color: var(--pd-bg);
  color: var(--pd-text);
  font-family: var(--pd-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--pd-dur) var(--pd-ease),
              color var(--pd-dur) var(--pd-ease);
}

/* Títulos em Fraunces com "optical size" alta para ar de padaria fina */
h1, h2, h3, .font-display {
  font-family: var(--pd-font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

::selection { background: var(--pd-crust-300); color: var(--pd-brand-coffee); }

/* Foco acessível e consistente */
:focus-visible {
  outline: 3px solid var(--pd-ring);
  outline-offset: 2px;
  border-radius: var(--pd-radius-sm);
}

/* ---------- UTILITÁRIOS DE MARCA ---------- */
.pd-container { max-width: var(--pd-maxw); margin-inline: auto; padding-inline: 1.25rem; }

.text-gradient {
  background: var(--pd-grad-crust);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pd-eyebrow {
  font-family: var(--pd-font-body);
  font-weight: 600;
  font-size: var(--pd-fs-small);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pd-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.pd-eyebrow::before {
  content: "";
  width: 2rem; height: 2px;
  background: currentColor;
  border-radius: var(--pd-radius-pill);
  opacity: 0.7;
}

/* ---------- BOTÕES ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  font-family: var(--pd-font-body);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  padding: 0.9rem 1.6rem;
  border-radius: var(--pd-radius-pill);
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--pd-dur-fast) var(--pd-ease),
              box-shadow var(--pd-dur) var(--pd-ease),
              background-color var(--pd-dur-fast) var(--pd-ease),
              color var(--pd-dur-fast) var(--pd-ease);
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary {
  background: var(--pd-primary);
  color: var(--pd-primary-contrast);
  box-shadow: var(--pd-shadow-md);
}
.btn-primary:hover {
  background: var(--pd-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--pd-shadow-lg);
}

.btn-ghost {
  background: transparent;
  color: var(--pd-text);
  border-color: var(--pd-border-strong);
}
.btn-ghost:hover {
  border-color: var(--pd-primary);
  color: var(--pd-primary);
  transform: translateY(-2px);
}

.btn-accent {
  background: var(--pd-accent);
  color: #14210B;
  box-shadow: var(--pd-shadow-md);
}
:root[data-theme="dark"] .btn-accent { color: #14210B; }
.btn-accent:hover { background: var(--pd-accent-hover); transform: translateY(-2px); box-shadow: var(--pd-shadow-lg); }

/* ---------- CARTÕES ---------- */
.card {
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  box-shadow: var(--pd-shadow-sm);
  transition: transform var(--pd-dur) var(--pd-ease),
              box-shadow var(--pd-dur) var(--pd-ease),
              border-color var(--pd-dur) var(--pd-ease);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--pd-shadow-lg);
  border-color: var(--pd-border-strong);
}

/* ---------- NAVBAR ---------- */
.pd-nav {
  position: sticky; top: 0; z-index: 50;
  transition: background-color var(--pd-dur) var(--pd-ease),
              box-shadow var(--pd-dur) var(--pd-ease),
              border-color var(--pd-dur) var(--pd-ease),
              backdrop-filter var(--pd-dur) var(--pd-ease);
  border-bottom: 1px solid transparent;
}
.pd-nav.is-scrolled {
  background: color-mix(in srgb, var(--pd-bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--pd-border);
  box-shadow: var(--pd-shadow-sm);
}
.nav-link {
  position: relative;
  color: var(--pd-text-soft);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--pd-dur-fast) var(--pd-ease);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 2px; background: var(--pd-primary);
  border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--pd-dur) var(--pd-ease);
}
.nav-link:hover { color: var(--pd-text); }
.nav-link:hover::after { transform: scaleX(1); }

/* ---------- LOGO (trigo/espiga em SVG) ---------- */
.pd-logo-mark { color: var(--pd-primary); }
.pd-logo-word { font-family: var(--pd-font-display); font-weight: 600; letter-spacing: -0.01em; }

/* ---------- HERO ---------- */
.pd-hero {
  position: relative;
  background: var(--pd-grad-hero);
  overflow: hidden;
}
/* Textura sutil de "farinha" (pontos) sem imagem externa */
.pd-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(107,63,29,0.06) 1px, transparent 0);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 100%);
  pointer-events: none;
}
/* Brilho quente flutuante atrás do produto */
.pd-hero-glow {
  position: absolute;
  width: 46rem; height: 46rem;
  right: -10rem; top: -8rem;
  background: radial-gradient(circle, rgba(200,135,62,0.28) 0%, transparent 65%);
  filter: blur(10px);
  pointer-events: none;
  animation: pd-float 12s var(--pd-ease-in-out) infinite alternate;
}

/* Vapor subindo do pão */
.pd-steam {
  position: absolute;
  bottom: 62%;
  width: 10px; height: 60px;
  background: linear-gradient(to top, rgba(251,243,228,0), rgba(251,243,228,0.65));
  border-radius: 999px;
  filter: blur(6px);
  opacity: 0;
  animation: pd-steam 4.2s ease-in-out infinite;
}
:root[data-theme="dark"] .pd-steam { background: linear-gradient(to top, rgba(251,243,228,0), rgba(251,243,228,0.35)); }

/* Disco/moldura do produto no hero */
.pd-hero-disc {
  position: relative;
  border-radius: 50%;
  background: var(--pd-grad-crust);
  box-shadow: var(--pd-shadow-lg), inset 0 -20px 60px rgba(42,26,15,0.25);
  display: grid; place-items: center;
  animation: pd-float 9s var(--pd-ease-in-out) infinite alternate;
}
.pd-hero-disc::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(251,243,228,0.5);
  animation: pd-spin 40s linear infinite;
}

/* Selo giratório "desde 1998" */
.pd-seal { animation: pd-spin 26s linear infinite; transform-origin: center; }

/* ---------- FAIXA DE DESTAQUES (marquee) ---------- */
.pd-marquee { overflow: hidden; white-space: nowrap; }
.pd-marquee__track {
  display: inline-flex; gap: 3rem;
  padding-block: 0.9rem;
  animation: pd-marquee 28s linear infinite;
}
.pd-marquee:hover .pd-marquee__track { animation-play-state: paused; }
.pd-marquee__item { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--pd-font-display); font-size: 1.1rem; }

/* ---------- ETIQUETA DE PREÇO / TAG ---------- */
.pd-tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--pd-fs-small); font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: var(--pd-radius-pill);
  background: color-mix(in srgb, var(--pd-accent) 22%, transparent);
  color: var(--pd-accent-hover);
  border: 1px solid color-mix(in srgb, var(--pd-accent) 40%, transparent);
}
:root[data-theme="dark"] .pd-tag { color: var(--pd-accent); }

/* ---------- IMAGEM/ILUSTRAÇÃO DE PRODUTO ---------- */
.pd-product-thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--pd-radius-md);
  background: var(--pd-grad-crust);
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
}
.pd-product-thumb::after { /* leve reflexo */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.22), transparent 40%);
}
.card:hover .pd-product-thumb .pd-emoji { transform: scale(1.08) rotate(-3deg); }
.pd-emoji { font-size: 3.2rem; transition: transform var(--pd-dur) var(--pd-ease); filter: drop-shadow(0 8px 12px rgba(42,26,15,0.35)); }

/* ---------- NÚMEROS / STATS ---------- */
.pd-stat-num {
  font-family: var(--pd-font-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  color: var(--pd-primary);
}

/* ---------- SEÇÃO ESCURA (CTA app) ---------- */
.pd-dark-section {
  background: var(--pd-grad-dark);
  color: var(--pd-brand-cream);
  position: relative;
  overflow: hidden;
}
.pd-dark-section .pd-eyebrow { color: var(--pd-crust-300); }

/* Mockup simples de celular */
.pd-phone {
  width: 260px; aspect-ratio: 9 / 19;
  border-radius: 36px;
  background: #17100A;
  border: 10px solid #0E0906;
  box-shadow: var(--pd-shadow-lg);
  padding: 14px;
  position: relative;
}
.pd-phone__screen {
  width: 100%; height: 100%;
  border-radius: 24px;
  background: var(--pd-grad-hero);
  overflow: hidden; position: relative;
}
.pd-phone__notch {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 20px; border-radius: 999px; background: #0E0906; z-index: 2;
}

/* ---------- FORMULÁRIO ---------- */
.pd-field {
  width: 100%;
  background: var(--pd-surface-inset);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  padding: 0.85rem 1rem;
  color: var(--pd-text);
  font-size: 1rem;
  transition: border-color var(--pd-dur-fast) var(--pd-ease), box-shadow var(--pd-dur-fast) var(--pd-ease);
}
.pd-field::placeholder { color: var(--pd-text-muted); }
.pd-field:focus { outline: none; border-color: var(--pd-primary); box-shadow: 0 0 0 4px var(--pd-ring); }

/* ---------- RODAPÉ ---------- */
.pd-footer { background: var(--pd-brand-coffee); color: var(--pd-warm-300); }
.pd-footer a { color: var(--pd-warm-200); text-decoration: none; transition: color var(--pd-dur-fast) var(--pd-ease); }
.pd-footer a:hover { color: var(--pd-brand-cream); }

/* ============================================================
   SCROLL-REVEAL (usado pelo site.js via IntersectionObserver)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--pd-dur-slow) var(--pd-ease),
              transform var(--pd-dur-slow) var(--pd-ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-reveal="left"]  { transform: translateX(-40px); }
.reveal[data-reveal="right"] { transform: translateX(40px); }
.reveal[data-reveal="zoom"]  { transform: scale(0.94); }
.reveal.is-visible[data-reveal] { transform: none; }
/* Atraso escalonado */
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }
.reveal[data-delay="4"] { transition-delay: 360ms; }
.reveal[data-delay="5"] { transition-delay: 450ms; }

/* Entrada do hero (dispara via classe no <body>) */
.hero-in { opacity: 0; transform: translateY(24px); }
body.is-loaded .hero-in { opacity: 1; transform: none; transition: opacity 900ms var(--pd-ease), transform 900ms var(--pd-ease); }
body.is-loaded .hero-in[data-delay="1"] { transition-delay: 120ms; }
body.is-loaded .hero-in[data-delay="2"] { transition-delay: 240ms; }
body.is-loaded .hero-in[data-delay="3"] { transition-delay: 360ms; }
body.is-loaded .hero-in[data-delay="4"] { transition-delay: 480ms; }

/* ============================================================
   ANIMAÇÕES (keyframes)
   ============================================================ */
@keyframes pd-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-18px); }
}
@keyframes pd-spin {
  to { transform: rotate(360deg); }
}
@keyframes pd-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes pd-steam {
  0%   { opacity: 0; transform: translateY(0) scaleX(1); }
  30%  { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-70px) scaleX(1.6); }
}

/* ============================================================
   ERP / CATALOGO — componentes reutilizaveis das telas internas
   (listagens, formularios, chips de status, botoes e links de acao)
   Todos apoiados nos tokens de tokens.css.
   ============================================================ */

/* Botoes compactos para as barras de acao das telas internas */
.pd-btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .9rem; line-height: 1;
  padding: .6rem 1.05rem; border-radius: var(--pd-radius-pill);
  background: var(--pd-primary); color: var(--pd-primary-contrast);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  box-shadow: var(--pd-shadow-sm);
  transition: background var(--pd-dur-fast) var(--pd-ease), transform var(--pd-dur-fast) var(--pd-ease);
}
.pd-btn-primary:hover { background: var(--pd-primary-hover); transform: translateY(-1px); }

.pd-btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .9rem; line-height: 1;
  padding: .6rem 1.05rem; border-radius: var(--pd-radius-pill);
  background: transparent; color: var(--pd-text);
  border: 1px solid var(--pd-border-strong); text-decoration: none; cursor: pointer;
  transition: border-color var(--pd-dur-fast) var(--pd-ease), color var(--pd-dur-fast) var(--pd-ease);
}
.pd-btn-ghost:hover { border-color: var(--pd-primary); color: var(--pd-primary); }

/* Links de acao dentro de tabelas */
.pd-link { color: var(--pd-primary); font-weight: 600; text-decoration: none; }
.pd-link:hover { text-decoration: underline; }
.pd-link-danger { color: #C12033; font-weight: 600; text-decoration: none; background: none; border: none; cursor: pointer; font-size: .875rem; padding: 0; }
.pd-link-danger:hover { text-decoration: underline; }

/* Chips de status */
.pd-chip {
  display: inline-block; font-size: .72rem; font-weight: 600;
  padding: .18rem .6rem; border-radius: var(--pd-radius-pill);
  border: 1px solid var(--pd-border);
}
.pd-chip-on  { background: color-mix(in srgb, var(--pd-accent) 20%, transparent); color: var(--pd-accent-hover); border-color: color-mix(in srgb, var(--pd-accent) 40%, transparent); }
:root[data-theme="dark"] .pd-chip-on { color: var(--pd-accent); }
.pd-chip-off { background: var(--pd-surface-2); color: var(--pd-text-muted); }

/* Formularios internos */
.pd-label { display: block; font-size: .82rem; font-weight: 600; color: var(--pd-text-soft); margin-bottom: .35rem; }
.pd-input, .pd-select {
  width: 100%;
  background: var(--pd-surface-inset);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  padding: .65rem .85rem; color: var(--pd-text); font-size: .95rem;
  transition: border-color var(--pd-dur-fast) var(--pd-ease), box-shadow var(--pd-dur-fast) var(--pd-ease);
}
.pd-input:focus, .pd-select:focus { outline: none; border-color: var(--pd-primary); box-shadow: 0 0 0 4px var(--pd-ring); }
.pd-help { font-size: .75rem; color: var(--pd-text-muted); margin-top: .3rem; }

/* Cartao de secao de formulario */
.pd-card {
  background: var(--pd-surface); border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-lg); box-shadow: var(--pd-shadow-sm);
  padding: 1.5rem;
}

/* ============================================================
   ACESSIBILIDADE — respeita quem prefere menos movimento
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .hero-in { opacity: 1 !important; transform: none !important; }
  .pd-hero-glow, .pd-hero-disc, .pd-seal, .pd-steam, .pd-marquee__track { animation: none !important; }
}