/* PetGeo — Tema ativo do site: "Aurora Petróleo"
 * ------------------------------------------------------------------
 * Carregar SEMPRE depois de tokens.css e petgeo.css (e depois de qualquer
 * <style> específico de página) — é a última palavra do cascata.
 *
 * Trava da marca (não muda): logo, --pg-primary #1B4B56, --pg-coral #B4532E,
 * --pg-gold #C9952C. O tema resfria os neutros, troca a fonte de título para
 * Sora, adiciona malha de gradiente no hero, cartões de vidro e brilho no CTA.
 * ------------------------------------------------------------------ */

:root {
  /* ---- Neutros resfriados (viés petróleo) ---- */
  --pg-bg:        #EEF4F3;
  --pg-surface:   #FFFFFF;   /* superfícies com texto/campos: sólido, legível */
  --pg-surface-2: #E6EFEE;
  --pg-ink:       #10302E;
  --pg-text:      #2C4644;
  --pg-muted:     #4E6462;   /* ~5.5:1 sobre --pg-bg (AA) */
  --pg-line:      #D3E0DE;
  --pg-primary-tint: #E2EDEC;

  /* ---- Tipografia ---- */
  --pg-font-heading: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pg-tracking-tight: -0.02em;

  /* ---- Forma ---- */
  --pg-radius-sm: 10px;
  --pg-radius-md: 14px;
  --pg-radius-lg: 20px;
  --pg-radius-xl: 26px;

  /* ---- Elevação (mais difusa, luminosa) ---- */
  --pg-shadow-sm: 0 2px 12px rgba(16, 48, 46, .07);
  --pg-shadow-md: 0 16px 44px rgba(16, 48, 46, .14);
  --pg-shadow-lg: 0 30px 72px rgba(16, 48, 46, .20);

  /* ---- Vidro ---- */
  --pg-glass-bg: rgba(255, 255, 255, .82);
  --pg-glass-border: rgba(255, 255, 255, .65);
}

/* ================= FUNDO AMBIENTE (leve, todo o site) ================= */
body {
  background-color: var(--pg-bg);
  background-image:
    radial-gradient(52% 40% at 10% -2%, rgba(94, 128, 136, .20), transparent 70%),
    radial-gradient(46% 40% at 94% 4%, rgba(27, 75, 86, .13), transparent 70%),
    radial-gradient(42% 46% at 82% 100%, rgba(180, 83, 46, .09), transparent 72%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ================= HERO — malha de gradiente ================= */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 55% at 12% 8%, rgba(94, 128, 136, .50), transparent 70%),
    radial-gradient(50% 55% at 90% 18%, rgba(27, 75, 86, .42), transparent 70%),
    radial-gradient(48% 55% at 72% 98%, rgba(180, 83, 46, .24), transparent 72%),
    radial-gradient(42% 48% at 24% 90%, rgba(201, 149, 44, .15), transparent 72%);
  filter: saturate(1.12);
  animation: pg-aurora-drift 22s ease-in-out infinite alternate;
}
@keyframes pg-aurora-drift {
  to { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); }
}

/* ================= NAV — vidro ================= */
.pg-nav {
  background: rgba(238, 244, 243, .72);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.pg-nav[data-scrolled="true"] { background: rgba(238, 244, 243, .9); }

/* ================= CARTÕES DE VIDRO ================= */
.card,
.pg-prose {
  background: var(--pg-glass-bg);
  border-color: var(--pg-glass-border);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
}
/* Cartões que seguram formulário/tabela ficam mais opacos (legibilidade) */
.pg-prose,
form .card,
.card:has(input, select, textarea, table) {
  background: rgba(255, 255, 255, .93);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .pg-prose { background: #fff; }
}

/* Seções tonais translúcidas */
.bg-tint,
.pg-section--tint,
.section--alt { background: rgba(226, 237, 236, .55); }

/* ================= BOTÕES — brilho sutil ================= */
.btn-coral {
  box-shadow: 0 8px 22px rgba(180, 83, 46, .28), 0 0 0 1px rgba(180, 83, 46, .06);
}
.btn-coral:hover {
  box-shadow: 0 12px 30px rgba(180, 83, 46, .36), 0 0 26px rgba(180, 83, 46, .22);
}
.btn-primary {
  box-shadow: 0 8px 22px rgba(27, 75, 86, .22), 0 0 0 1px rgba(27, 75, 86, .05);
}

/* ================= CTA BAND — glow ================= */
.cta-band { position: relative; overflow: hidden; }
.cta-band::after {
  content: "";
  position: absolute; inset: -30%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(38% 38% at 28% 26%, rgba(180, 83, 46, .40), transparent 70%),
    radial-gradient(40% 40% at 76% 74%, rgba(94, 128, 136, .55), transparent 70%);
}
.cta-band > * { position: relative; z-index: 1; }

/* ================= PORTAL — topbar de vidro ================= */
.portal-topbar {
  background: linear-gradient(180deg, rgba(27, 75, 86, .96), rgba(20, 57, 66, .96));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pet-card { background: var(--pg-glass-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* ================= PÁGINA DO QR (pet_details) ================= */
.pd-hero, .pd-section { background: var(--pg-glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.pd-actions { background: rgba(238, 244, 243, .9); }

/* Respeita redução de movimento (reforço; petgeo.css já cobre o global) */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}