/*
  ============================================================
  DigiBook Angola — Premium Digital Bookstore
  Design System v2 (UI/UX rebuild)
  Palette: Slate Navy + Soft Sky Blue
  ============================================================
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* =========================================
   1. DESIGN TOKENS
========================================= */
:root {
  /* Navy / Slate */
  --c-navy-900: #1e293b;
  --c-navy-800: #334155;
  --c-navy-700: #475569;
  --c-navy-600: #64748b;
  --c-navy-500: #64748b;

  /* Sky / Accent */
  --c-sky-600: #2f6fc0;
  --c-sky-500: #4b8cdb;
  --c-sky-400: #60a5fa;
  --c-sky-300: #93c5fd;
  --c-sky-100: #dbeafe;
  --c-sky-50:  #eff6ff;

  --c-white:   #ffffff;
  --c-black:   #0f172a;

  --c-gray-50:  #f8fafc;
  --c-gray-100: #f1f5f9;
  --c-gray-200: #e2e8f0;
  --c-gray-300: #cbd5e1;
  --c-gray-400: #94a3b8;
  --c-gray-500: #64748b;

  --c-red-500: #ef4444;
  --c-red-600: #dc2626;
  --c-green-500: #10b981;
  --c-amber: #fbbf24;
  --c-whatsapp: #25D366;

  /* Brand gradient */
  --grad-brand: linear-gradient(135deg, var(--c-navy-900) 0%, var(--c-sky-500) 100%);
  --grad-accent: linear-gradient(135deg, var(--c-sky-500) 0%, var(--c-sky-600) 100%);
  --grad-mesh:
    radial-gradient(circle at 12% 18%, rgba(75, 140, 219, 0.18), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(96, 165, 250, 0.14), transparent 40%),
    radial-gradient(circle at 70% 88%, rgba(47, 111, 192, 0.10), transparent 45%);

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Shadows (layered & colored) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 6px 16px -4px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 16px 32px -8px rgba(15, 23, 42, 0.14);
  --shadow-xl: 0 28px 56px -12px rgba(15, 23, 42, 0.22);
  --shadow-accent: 0 14px 30px -8px rgba(75, 140, 219, 0.45);
  --shadow-book: 0 22px 40px -12px rgba(15, 23, 42, 0.30), 0 8px 16px -6px rgba(15, 23, 42, 0.18);

  /* Radii */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.75rem;
  --radius-full: 9999px;

  /* Transitions */
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-smooth: 320ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 520ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --header-h: 84px;
  --container: 1240px;
}

/* =========================================
   2. RESET & BASE
========================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--c-navy-900);
  background-color: #fbfcfe;
  background-image:
    radial-gradient(circle at 0% 0%, rgba(75, 140, 219, 0.05), transparent 28%),
    radial-gradient(circle at 100% 8%, rgba(96, 165, 250, 0.05), transparent 26%);
  background-repeat: no-repeat;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--c-navy-900);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
}

a { text-decoration: none; color: inherit; transition: color var(--t-fast); }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font-heading); }
img { max-width: 100%; display: block; }
input, select, textarea { font-family: var(--font-body); }

::selection { background: var(--c-sky-100); color: var(--c-navy-900); }

/* Focus accessibility */
:focus-visible {
  outline: 3px solid var(--c-sky-300);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Custom scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--c-gray-300) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--c-gray-300); border-radius: var(--radius-full); }
*::-webkit-scrollbar-thumb:hover { background: var(--c-sky-400); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.lucide { stroke-width: 2; }
.lucide.fill { fill: currentColor; }

/* =========================================
   3. LAYOUT
========================================= */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 5.5rem 0; }
main { flex: 1 0 auto; }

.section-bg-light { position: relative; isolation: isolate; }
.section-bg-light::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-mesh); pointer-events: none;
  -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
  mask: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-sky-600);
}

.gradient-text {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.08em;
}

/* =========================================
   4. HEADER
========================================= */
.header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid transparent;
  z-index: 100;
  transition: height var(--t-smooth), background var(--t-smooth), box-shadow var(--t-smooth), border-color var(--t-smooth);
}

.header.scrolled {
  height: 70px;
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: var(--c-gray-200);
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; gap: 1rem;
}

.header__brand { display: flex; align-items: center; gap: 0.1rem; }
.header__logo {
  height: 52px; width: auto; object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
  transition: height var(--t-smooth);
  margin-right: -10px; /* logo.png tem espaço transparente à direita do ícone */
}
.header.scrolled .header__logo { height: 44px; }
.header__title {
  font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem;
  color: var(--c-navy-900); letter-spacing: -0.03em;
}

.nav__list { display: flex; align-items: center; gap: 2.25rem; }
.nav__link {
  position: relative; font-size: 0.9375rem; font-weight: 600;
  color: var(--c-navy-700); padding: 0.25rem 0;
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: -3px;
  width: 0; height: 2px; border-radius: 2px;
  background: var(--grad-accent); transition: width var(--t-smooth);
}
.nav__link:hover, .nav__link.active { color: var(--c-navy-900); }
.nav__link:hover::after, .nav__link.active::after { width: 100%; }

.nav__link--action {
  font-weight: 700; display: flex; align-items: center; gap: 0.4rem;
  color: var(--c-sky-600);
}
.nav__link--action i { width: 16px; height: 16px; }

.header__actions { display: flex; align-items: center; gap: 0.75rem; }

.icon-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-full);
  color: var(--c-navy-700); background: transparent; transition: all var(--t-fast);
}
.icon-btn:hover { background: var(--c-gray-100); color: var(--c-navy-900); }
.icon-btn i { width: 21px; height: 21px; }

.cart-toggle { position: relative; }
.cart-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--grad-accent); color: #fff;
  font-family: var(--font-heading); font-size: 0.68rem; font-weight: 800;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--c-white);
  box-shadow: var(--shadow-sm);
}

/* Fly-to-cart: clone da capa que voa até o ícone do carrinho ao adicionar */
.fly-to-cart-clone {
  position: fixed; z-index: 9999; pointer-events: none;
  border-radius: var(--radius-md, 10px); object-fit: cover;
  box-shadow: var(--shadow-lg, 0 12px 30px rgba(0,0,0,.25));
  will-change: transform, opacity;
  transition: transform .7s cubic-bezier(.55,-0.1,.3,1), opacity .7s cubic-bezier(.55,-0.1,.3,1);
}
@keyframes cartBadgePulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.5); }
  60% { transform: scale(0.85); }
  100% { transform: scale(1); }
}
.cart-badge--pulse { animation: cartBadgePulse .5s ease; }

.nav__toggle { display: none; color: var(--c-navy-900); padding: 0.5rem; }

@media (max-width: 834px) {
  .header__brand { gap: 0; }
  .header__logo { margin-right: -7px; }
  .nav__toggle { display: block; }
  .nav__list {
    position: absolute; top: 100%; left: 0; right: 0;
    /* opaco de propósito (era 0.98) — o hero por trás (título grande e
       escuro) ficava visível "fantasma" atrás dos links do menu mobile,
       feio e difícil de ler (bug reportado 20/07). */
    background: #fff; backdrop-filter: blur(20px);
    flex-direction: column; align-items: flex-start;
    padding: 1.5rem 2rem 2rem; gap: 1.25rem;
    box-shadow: var(--shadow-lg); border-top: 1px solid var(--c-gray-100);
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: all var(--t-smooth);
  }
  .nav__list.active { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* =========================================
   5. BUTTONS
========================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.8rem 1.6rem; font-size: 0.9375rem; font-weight: 700;
  font-family: var(--font-heading);
  border-radius: var(--radius-full); transition: all var(--t-smooth);
  white-space: nowrap; line-height: 1;
}
.btn i, .btn svg { width: 18px; height: 18px; }

.btn--primary {
  background: var(--c-navy-800); color: #fff;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn--primary:hover { background: var(--c-navy-700); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn--accent {
  background: var(--grad-accent); color: #fff;
  box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255,255,255,0.28);
}
.btn--accent:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -8px rgba(75,140,219,0.55); filter: brightness(1.04); }

.btn--ghost {
  background: rgba(255,255,255,0.7); color: var(--c-navy-800);
  border: 1px solid var(--c-gray-200); backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--c-sky-400); color: var(--c-navy-900); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.btn--outline { background: transparent; color: var(--c-navy-900); border: 1.5px solid var(--c-gray-300); }
.btn--outline:hover { border-color: var(--c-navy-900); background: var(--c-gray-50); }

.btn--whatsapp { background: var(--c-whatsapp); color: #fff; box-shadow: var(--shadow-md); }
.btn--whatsapp:hover { background: #1ebe57; transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn--danger { background: var(--c-red-600); color: #fff; box-shadow: var(--shadow-md); }
.btn--danger:hover { background: var(--c-red-500); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn--sm { padding: 0.55rem 1.1rem; font-size: 0.85rem; }
.btn--block { width: 100%; }

/* Legacy aliases kept for safety */
.btn--secondary { background: var(--c-navy-900); color: #fff; }
.btn--secondary:hover { background: var(--c-navy-800); transform: translateY(-2px); }

/* =========================================
   6. HERO
========================================= */
.hero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--header-h) + 4.5rem);
  padding-bottom: 6rem;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--grad-mesh); pointer-events: none;
  -webkit-mask: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
  mask: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
}
.hero::after {
  content: ''; position: absolute; top: -15%; right: -8%; z-index: -1;
  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  background: radial-gradient(circle, rgba(75,140,219,0.16) 0%, transparent 68%);
  filter: blur(40px); border-radius: 50%;
  animation: floatOrb 12s ease-in-out infinite alternate;
}
@keyframes floatOrb { from { transform: translateY(0) scale(1); } to { transform: translateY(-40px) scale(1.08); } }

.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4rem; align-items: center;
}
.hero__content { max-width: 560px; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; margin-bottom: 1.75rem;
  background: rgba(255,255,255,0.85); color: var(--c-sky-600);
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-full);
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: var(--shadow-sm); backdrop-filter: blur(8px);
}
.hero__badge i { width: 15px; height: 15px; }

.hero__title {
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 1.02; font-weight: 800; letter-spacing: -0.04em;
  margin-bottom: 1.4rem; max-width: 14ch;
}
.hero__desc { font-size: 1.15rem; color: var(--c-navy-600); margin-bottom: 2.25rem; max-width: 48ch; }

.hero__actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

.hero__trust {
  margin-top: 2.5rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.hero__trust-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; font-weight: 600; color: var(--c-navy-700); }
.hero__trust-item i { width: 20px; height: 20px; color: var(--c-sky-500); }

/* Antes era style="margin-top:5rem;margin-bottom:2rem" direto no HTML —
   virou classe pra poder encolher só no mobile (ver breakpoints 20/07). */
.statbar-section { margin-top: 5rem; margin-bottom: 2rem; }

/* Hero visual — book showcase */
.hero__visual { position: relative; width: 100%; }
.hero__stage {
  position: relative; aspect-ratio: 4/4.2;
  display: flex; align-items: center; justify-content: center;
}
.hero__glow {
  position: absolute; inset: 8% 8% 12%;
  background: var(--grad-accent); border-radius: 50%;
  filter: blur(60px); opacity: 0.32; z-index: 0;
}
/* iPad / tablet com um eBook a rolar */
.hero__device {
  position: relative; z-index: 2; width: 70%; aspect-ratio: 3 / 4.35; margin: 0 auto;
  border-radius: 26px; padding: 42px 18px;            /* bordas grandes em cima/baixo (iPad 9) */
  background: linear-gradient(150deg, #56585c 0%, #313337 55%, #202125 100%);
  box-shadow: var(--shadow-book), inset 0 0 0 1px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.22);
  transform: perspective(1500px) rotateY(0deg) rotateX(0deg) scale(0.97);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero__device.is-active { transform: perspective(1500px) rotateY(-18deg) rotateX(5deg) scale(1); }
.hero__visual:hover .hero__device.is-active { transform: perspective(1500px) rotateY(-9deg) rotateX(2deg) translateY(-5px) scale(1); }

.hero__camera {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: #0b1220;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 0 0 2px rgba(0,0,0,0.25); z-index: 3;
}
/* Botão home (Touch ID) do iPad 9 */
.hero__home {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 28px; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 50% 38%, #3c3e42 0%, #27292c 78%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.55), inset 0 1px 1px rgba(255,255,255,0.14), 0 1px 2px rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
}
.hero__home::after {
  content: ''; width: 12px; height: 12px; border-radius: 3.5px;
  border: 1.5px solid rgba(255,255,255,0.32);
}

.hero__screen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 7px; background: #fcfcfc;
  display: flex; flex-direction: column;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.hero__screen::after {
  content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,0.28) 0%, transparent 42%);
}

.reader__bar {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--c-gray-100); background: #fff; z-index: 4;
}
.reader__title {
  font-family: var(--font-heading); font-weight: 800; font-size: 0.72rem;
  color: #111; letter-spacing: -0.01em; display: flex; align-items: center; gap: 0.35rem;
}
.reader__title i, .reader__title svg { width: 13px; height: 13px; color: #444; }
.reader__progress { width: 40px; height: 4px; border-radius: 4px; background: #e4e4e4; overflow: hidden; }
.reader__progress::before {
  content: ''; display: block; height: 100%; width: 8%; border-radius: 4px;
  background: #1a1a1a; animation: readerProg 7.5s linear infinite; animation-play-state: paused;
}
.hero__device.is-active .reader__progress::before { animation-play-state: running; }
@keyframes readerProg { from { width: 8%; } to { width: 100%; } }

.reader__viewport {
  position: relative; flex: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 90%, transparent 100%);
}
.ebook__scroll {
  animation: ebookScroll 7.5s infinite; animation-play-state: paused; will-change: transform;
}
.hero__device.is-active .ebook__scroll { animation-play-state: running; }
/* puxões suaves e frequentes — rola ~1 tela, pausa ~1,5s para ler, e repete */
@keyframes ebookScroll {
  0%   { transform: translateY(0);        animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  9%   { transform: translateY(-16.665%); animation-timing-function: linear; }   /* puxão */
  26%  { transform: translateY(-16.665%); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); } /* pausa ~1,5s */
  35%  { transform: translateY(-33.33%);  animation-timing-function: linear; }
  52%  { transform: translateY(-33.33%);  animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  61%  { transform: translateY(-49.995%); animation-timing-function: linear; }
  78%  { transform: translateY(-49.995%); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  87%  { transform: translateY(-66.66%);  animation-timing-function: linear; }
  100% { transform: translateY(-66.66%); }
}

.ebook { padding: 1.1rem 1.2rem 0; font-family: Georgia, 'Times New Roman', serif; color: #2a2a2a; }
.ebook h4 { font-family: var(--font-heading); font-size: 0.95rem; color: #0d0d0d; margin-bottom: 0.5rem; line-height: 1.25; }
.ebook h5 { font-family: var(--font-heading); font-size: 0.8rem; color: #1a1a1a; margin: 0.9rem 0 0.4rem; }
.ebook p { font-size: 0.74rem; line-height: 1.7; margin-bottom: 0.7rem; text-align: justify; }
.ebook p:first-of-type::first-letter {
  font-size: 2rem; font-weight: 700; float: left; line-height: 0.85;
  padding: 0.05rem 0.24rem 0 0; color: #0d0d0d; font-family: var(--font-heading);
}

.hero__float {
  position: absolute; z-index: 5; background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px); border: 1px solid var(--c-gray-100);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 0.85rem 1.1rem; display: flex; align-items: center; gap: 0.75rem;
  animation: floatCard 5s ease-in-out infinite;
}
@keyframes floatCard { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.hero__float--rating { top: 8%; left: -4%; font-weight: 800; font-size: 0.9rem; color: var(--c-navy-900); }
.hero__float--rating i { color: var(--c-amber); width: 18px; height: 18px; }
.hero__float--users { bottom: 6%; right: -2%; animation-delay: 1.2s; }
.hero__avatars { display: flex; }
.hero__avatar { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid #fff; object-fit: cover; }
.hero__avatar:not(:first-child) { margin-left: -14px; }
.hero__float-text h4 { font-size: 1.05rem; font-weight: 800; line-height: 1; }
.hero__float-text p { font-size: 0.72rem; color: var(--c-navy-600); margin-top: 2px; }

/* =========================================
   7. STAT / TRUST BAR
========================================= */
.statbar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--c-gray-200); border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm);
}
.statbar__item { background: rgba(255,255,255,0.85); padding: 1.75rem 1rem; text-align: center; min-width: 0; }
.statbar__num {
  font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: var(--c-sky-600);
  line-height: 1.25; padding-top: 0.06em;
  background: linear-gradient(135deg, var(--c-sky-600) 0%, var(--c-sky-500) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  /* palavras como "Instantâneo" cabiam em 1 coluna (desktop, 4 col) mas eram
     cortadas pelo overflow:hidden do .statbar em 2 colunas (mobile <980px) —
     reduz o tamanho fora do desktop em vez de confiar em 1 font-size fixo. */
}
.statbar__num span { color: var(--c-sky-500); }
.statbar__label { font-size: 0.82rem; color: var(--c-navy-600); margin-top: 0.5rem; font-weight: 600; }

/* =========================================
   8. SECTION HEADER
========================================= */
.section-header { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.section-header .eyebrow { margin-bottom: 0.85rem; }
.section-header__title { font-size: clamp(2rem, 4vw, 2.85rem); font-weight: 800; margin-bottom: 1rem; }
.section-header__desc { font-size: 1.1rem; color: var(--c-navy-600); }

/* =========================================
   9. BENEFITS / FEATURES
========================================= */
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.75rem; }
/* Variante flex (usada em "Os nossos pilares", quem-somos.html): com 3 itens
   e grid auto-fit, o item que sobra na última linha não estica pra dividir o
   espaço — fica "órfão" colado à esquerda (bug visto no iPad 768px, 20/07).
   flex-wrap resolve em qualquer largura, já que o flex reflui a largura
   livre entre os itens da própria linha, órfão incluso. */
.benefits-grid--flex { display: flex; flex-wrap: wrap; }
.benefits-grid--flex > .benefit-card { flex: 1 1 270px; }

.benefit-card {
  position: relative; background: #fff; padding: 2.4rem 2rem;
  border-radius: var(--radius-xl); border: 1px solid var(--c-gray-100);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform var(--t-smooth), box-shadow var(--t-smooth), border-color var(--t-smooth);
}
.benefit-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t-smooth);
}
.benefit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--c-sky-200); }
.benefit-card:hover::before { transform: scaleX(1); }

.benefit-icon {
  width: 60px; height: 60px; margin-bottom: 1.5rem;
  background: var(--c-sky-50); color: var(--c-sky-600);
  border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center;
}
.benefit-icon svg { width: 28px; height: 28px; }
.benefit-card h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 0.75rem; }
.benefit-card p { font-size: 0.975rem; color: var(--c-navy-600); line-height: 1.65; }

/* Vantagens page */
.vant-hero { position: relative; padding: calc(var(--header-h) + 4rem) 0 2rem; text-align: center; isolation: isolate; }
.vant-hero::before {
  content:''; position:absolute; inset:0; z-index:-1; background: var(--grad-mesh);
  -webkit-mask: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
  mask: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
}

.perks-panel {
  background: #fff; border: 1px solid var(--c-gray-200); border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm); padding: 2.5rem; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem;
}
.perk { display: flex; gap: 1rem; align-items: flex-start; }
.perk i, .perk svg { width: 26px; height: 26px; color: var(--c-sky-500); flex-shrink: 0; margin-top: 2px; }
.perk h4 { font-size: 1.02rem; margin-bottom: 0.2rem; }
.perk p { font-size: 0.9rem; color: var(--c-navy-600); }

.cta-band {
  background: var(--grad-accent); color: #fff; text-align: center;
  padding: 3.5rem 2rem; border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg);
  max-width: 860px; margin: 0 auto;
}
.cta-band h2 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: 0.85rem; }
.cta-band p { color: rgba(255,255,255,0.9); font-size: 1.1rem; margin-bottom: 2rem; }

/* Quem Somos — história (imagem + texto) */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.about-split__media { border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--c-gray-200); }
.about-split__media img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; }
@media (max-width: 834px) {
  .about-split { grid-template-columns: 1fr; gap: 2rem; }
  .about-split__media { order: -1; }
}

/* How it works steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; counter-reset: step; }
.step {
  position: relative; background: #fff; padding: 2rem 1.75rem 1.75rem;
  border: 1px solid var(--c-gray-100); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs);
  transition: transform var(--t-smooth), box-shadow var(--t-smooth);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step__num {
  width: 44px; height: 44px; border-radius: var(--radius-md); margin-bottom: 1rem;
  background: var(--grad-accent); color: #fff; font-family: var(--font-heading);
  font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-accent);
}
.step h4 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.step p { font-size: 0.92rem; color: var(--c-navy-600); }

/* =========================================
   10. CATALOG: FILTERS & GRID
========================================= */
.filters {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem;
}
.search-box { position: relative; flex: 1; min-width: 240px; max-width: 420px; }
.search-box i, .search-box svg {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--c-navy-500); width: 19px; height: 19px;
}
.search-input {
  width: 100%; padding: 0.85rem 1rem 0.85rem 2.85rem;
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-full);
  font-size: 0.9375rem; background: #fff; transition: all var(--t-fast); box-shadow: var(--shadow-xs);
}
.search-input:focus { outline: none; border-color: var(--c-sky-500); box-shadow: 0 0 0 4px var(--c-sky-50); }

.filter-group { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.sort-select {
  padding: 0.85rem 2.6rem 0.85rem 1.3rem;
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-full);
  font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem;
  color: var(--c-navy-900); background-color: #fff; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1em;
  box-shadow: var(--shadow-xs); transition: all var(--t-fast);
}
.sort-select:focus { outline: none; border-color: var(--c-sky-500); box-shadow: 0 0 0 4px var(--c-sky-50); }

.catalog-grid {
  display: grid;
  /* 230px de mínimo fazia o auto-fill cair pra 2 colunas em telas de
     iPad (768/834px) mesmo sobrando espaço de sobra pra 3 — ficava "celular
     esticado" em vez de aproveitar a largura do tablet (reprovado 20/07).
     210px é suficiente pro conteúdo do card e libera a 3ª coluna nessas
     larguras, sem mexer em telemóvel (que já tem override próprio ≤480). */
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.75rem;
}

/* ===== Dedicated catalog page ===== */
.catalog-hero {
  position: relative; padding: calc(var(--header-h) + 3.5rem) 0 2.5rem; text-align: center; isolation: isolate;
}
.catalog-hero::before {
  content:''; position:absolute; inset:0; z-index:-1; background: var(--grad-mesh);
  -webkit-mask: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
  mask: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
}
.catalog-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0.7rem 0 0.85rem; }
.catalog-hero p { font-size: 1.1rem; color: var(--c-navy-600); max-width: 560px; margin: 0 auto; }

.filter-bar {
  position: sticky; top: var(--header-h); z-index: 50;
  background: rgba(255,255,255,0.82); backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); padding: 1rem 1.25rem; margin-bottom: 2rem;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.filter-bar .search-box { max-width: none; }
.results-info { font-size: 0.92rem; color: var(--c-navy-600); font-weight: 600; margin-bottom: 1.5rem; }
.results-info b { color: var(--c-navy-900); }

@media (max-width: 768px) {
  .filter-bar { position: static; flex-direction: column; align-items: stretch; }
  .filter-bar .filter-group { flex-direction: column; }
  .filter-bar .sort-select { width: 100%; }
}

/* =========================================
   11. PRODUCT CARDS
========================================= */
.card {
  position: relative; background: #fff; border-radius: var(--radius-xl);
  border: 1px solid var(--c-gray-200); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow-xs);
  transition: transform var(--t-smooth), box-shadow var(--t-smooth), border-color var(--t-smooth);
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--c-sky-300); }

.card__image-container {
  position: relative; width: 100%; aspect-ratio: 4/5; overflow: hidden;
  background: linear-gradient(160deg, var(--c-gray-50), var(--c-gray-100));
  display: flex; align-items: center; justify-content: center; padding: 1.75rem; cursor: pointer;
}
.card__image {
  width: auto; height: 100%; max-width: 100%; object-fit: contain;
  border-radius: 3px;
  filter: drop-shadow(0 16px 22px rgba(15,23,42,0.20));
  transition: transform var(--t-spring);
}
.card:hover .card__image { transform: scale(1.07) translateY(-4px); }

.card__badge {
  position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  padding: 0.3rem 0.7rem; border-radius: var(--radius-full);
  font-size: 0.72rem; font-weight: 700; color: var(--c-navy-900); box-shadow: var(--shadow-xs);
}
.card__badge--promo {
  left: auto; right: 0.85rem; top: auto; bottom: 0.85rem; z-index: 2;
  background: var(--c-red-500); color: #fff; font-weight: 800;
}

/* Favoritar (coração) — canto superior direito do card */
.card__fav-btn {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 3;
  width: 34px; height: 34px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-navy-500); box-shadow: var(--shadow-xs); transition: all var(--t-fast);
}
.card__fav-btn:hover { transform: scale(1.1); color: var(--c-red-500); }
.card__fav-btn i, .card__fav-btn svg { width: 18px; height: 18px; transition: all var(--t-fast); }
.card__fav-btn--active { color: var(--c-red-500); }
.card__fav-btn--active svg { fill: var(--c-red-500) !important; stroke: var(--c-red-500); }

.card__content { padding: 1.3rem; display: flex; flex-direction: column; flex-grow: 1; }
.card__title {
  font-size: 1.05rem; font-weight: 800; margin-bottom: 0.35rem; line-height: 1.35; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--t-fast);
}
.card__title:hover { color: var(--c-sky-600); }
.card__author { font-size: 0.84rem; color: var(--c-navy-600); margin-bottom: 0.6rem; }
.card__rating { display: flex; align-items: center; gap: 3px; color: var(--c-amber); margin-bottom: 1rem; }
.card__rating i { width: 20px; height: 20px; }
.stars-frac { display: inline-flex; align-items: center; gap: 3px; }
.star-frac-icon { display: block; flex-shrink: 0; }
.rating-num { margin-left: 0.4rem; font-size: 0.9rem; font-weight: 700; color: var(--c-navy-700); }

.card__footer { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 0.5rem; border-top: 1px solid var(--c-gray-100); padding-top: 1rem; }
.card__price-old { font-size: 0.75rem; text-decoration: line-through; color: var(--c-gray-400); display: block; }
.card__price { font-size: 1.3rem; font-weight: 800; color: var(--c-navy-900); }
.card__cart-btn {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--grad-accent); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-accent); transition: all var(--t-fast);
}
.card__cart-btn:hover { transform: translateY(-2px) scale(1.05); filter: brightness(1.05); }
.card__cart-btn i { width: 19px; height: 19px; }
.card__cart-btn--added { background: var(--c-green-500, #22c55e); box-shadow: 0 4px 14px -3px rgba(34,197,94,0.45); }
.card__cart-btn--added:hover { transform: translateY(-2px) scale(1.05); filter: brightness(1.08); }

.btn--in-cart { background: var(--c-green-500, #22c55e) !important; }

/* Skeleton loading */
.skeleton-card { background: #fff; border: 1px solid var(--c-gray-200); border-radius: var(--radius-xl); overflow: hidden; }
.skeleton-card__img { aspect-ratio: 4/5; }
.skeleton-card__body { padding: 1.3rem; }
.skeleton-line { height: 12px; border-radius: 6px; margin-bottom: 0.6rem; }
.shimmer { background: linear-gradient(90deg, var(--c-gray-100) 25%, var(--c-gray-200) 50%, var(--c-gray-100) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Empty state */
.empty-state { grid-column: 1 / -1; text-align: center; padding: 4rem 1.5rem; color: var(--c-navy-600); }
.empty-state i { width: 52px; height: 52px; color: var(--c-sky-400); margin-bottom: 1rem; }
.empty-state h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }

/* =========================================
   12. CATEGORY SHORTCUTS (book covers)
========================================= */
/* wrapper com as setas nas laterais, na altura dos livros */
.category-nav { position: relative; margin-bottom: 0.5rem; }

.category-shortcuts {
  display: flex; gap: 1.85rem; overflow-x: auto;
  padding: 1rem 1.25rem 3rem;       /* espaço extra p/ o brilho do hover não ser cortado */
  justify-content: flex-start; scroll-snap-type: x proximity;
  scrollbar-width: none;            /* esconde a barra (Firefox) */
}
.category-shortcuts::-webkit-scrollbar { display: none; }   /* esconde a barra (Chrome/Safari) */
/* centraliza só quando tudo cabe (sem precisar de setas); com setas usa flex-start p/ o scroll funcionar */
@media (min-width: 1024px) { .category-nav.centered .category-shortcuts { justify-content: center; } }

/* Setas em "V" (chevron) — só o ângulo, sem haste */
.cat-arrow {
  position: absolute; top: 83px; transform: translateY(-50%);   /* centro do livro (padding + moldura + meia altura) */
  z-index: 5; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px -6px rgba(15,23,42,0.25), 0 0 0 1px var(--c-gray-200);
  color: var(--c-navy-800); cursor: pointer;
  transition: opacity var(--t-smooth), transform var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.cat-arrow:hover { color: var(--c-sky-600); background: #fff; }
.cat-arrow i, .cat-arrow svg { width: 26px; height: 26px; stroke-width: 2.5; }
.cat-arrow--left { left: -6px; }
.cat-arrow--right { right: -6px; }
.cat-arrow--left:hover { transform: translateY(-50%) translateX(-2px); }
.cat-arrow--right:hover { transform: translateY(-50%) translateX(2px); }

/* fade clean: some quando não há para onde rolar */
.category-nav.at-start .cat-arrow--left,
.category-nav.at-end .cat-arrow--right { opacity: 0; pointer-events: none; }

@media (max-width: 480px) {
  .cat-arrow { width: 38px; height: 38px; top: 75px; }
  .cat-arrow i, .cat-arrow svg { width: 22px; height: 22px; }
  .cat-arrow--left { left: -2px; }
  .cat-arrow--right { right: -2px; }
}

.category-item {
  position: relative; flex: 0 0 auto; width: 172px;
  text-decoration: none; cursor: pointer; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.category-cover {
  position: relative; width: 172px; height: 128px; overflow: hidden;
  border-radius: var(--radius-lg);
  border: 3px solid #fff;                  /* moldura branca */
  background: var(--c-gray-100);
  box-shadow: var(--shadow-md);
  transition: transform var(--t-spring), box-shadow var(--t-smooth);
}
.category-cover__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-spring); }
/* Nome da categoria = legenda ABAIXO do card (decisão do Senhor, parte 44) — a imagem
   fica limpa, sem overlay/scrim algum por cima (removidos nesta parte). */
.category-item__caption {
  display: block; width: 100%; margin-top: 0.6rem;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem;
  color: var(--c-sky-600); text-align: center; letter-spacing: -0.01em;
  line-height: 1.25;
  overflow-wrap: break-word;
}
.category-item__explore {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3;
  width: 30px; height: 30px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.95); color: var(--c-sky-600);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
  opacity: 0; transform: scale(0.7) translateY(-4px);
  transition: opacity var(--t-smooth), transform var(--t-spring);
}
.category-item__explore i, .category-item__explore svg { width: 15px; height: 15px; }

/* Tile "Todos os e-Books" — azul vivo (bem mais claro que o navy); nome vira legenda
   abaixo (.category-item__caption), igual às demais categorias — ícone fica sozinho no tile. */
.category-cover--all { display: flex; align-items: center; justify-content: center; background: var(--grad-accent); }
.category-cover--all > i, .category-cover--all > svg { width: 40px; height: 40px; color: #fff; opacity: 0.95; }

.category-item:hover .category-cover {
  transform: translateY(-7px) scale(1.02);
  box-shadow: 0 22px 42px -12px rgba(75,140,219,0.45);   /* brilho suave, sem corte */
}
.category-item:hover .category-cover__img { transform: scale(1.12); }
.category-item:hover .category-item__explore { opacity: 1; transform: scale(1) translateY(0); }

@media (max-width: 480px) {
  .category-item, .category-cover { width: 150px; }
  .category-cover { height: 112px; }
  .category-item__caption { font-size: 0.84rem; margin-top: 0.5rem; }
}

/* =========================================
   13. PRODUCT DETAIL PAGE
========================================= */
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--c-navy-500); flex-wrap: wrap; }
.breadcrumb a { color: var(--c-navy-600); display: inline-flex; align-items: center; gap: 0.3rem; }
.breadcrumb a:hover { color: var(--c-sky-600); }
.breadcrumb i { width: 14px; height: 14px; }
.breadcrumb .current { color: var(--c-navy-900); font-weight: 700; }

.product-page-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 4rem; align-items: start; }
.product-page-left { position: sticky; top: calc(var(--header-h) + 24px); }

.detail-image-container {
  width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 3/4;
  background: radial-gradient(circle at 50% 0%, var(--c-gray-50), var(--c-gray-200));
  border-radius: var(--radius-2xl); display: flex; align-items: center; justify-content: center;
  padding: 2.25rem; border: 1px solid var(--c-gray-200); box-shadow: var(--shadow-md);
}
.detail-image { width: auto; height: 100%; max-width: 100%; object-fit: contain; border-radius: 3px; filter: drop-shadow(0 26px 36px rgba(15,23,42,0.28)); }

.spec-card { background: #fff; border: 1px solid var(--c-gray-200); border-radius: var(--radius-xl); padding: 1.5rem 1.75rem; box-shadow: var(--shadow-xs); }
.spec-card h3 { font-size: 1.1rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--c-gray-100); }
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.spec-table td { padding: 0.85rem 0; border-bottom: 1px solid var(--c-gray-100); vertical-align: top; }
.spec-table tr:last-child td { border-bottom: none; }
.spec-table td:first-child { font-weight: 700; color: var(--c-navy-900); width: 45%; }
.spec-table td:last-child { color: var(--c-navy-600); }

/* Cabeçalho: marca + favorito, título e avaliação — respiro próprio, separado do cartão de compra */
.detail-header { margin-bottom: 1.75rem; }
.detail-header__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.detail-brand { font-size: 1.1rem; color: var(--c-sky-600); font-weight: 600; letter-spacing: 0.01em; }
.detail-title { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 0.6rem; }
.detail-stars { display: flex; gap: 0.35rem; align-items: center; color: var(--c-amber); }
.detail-stars svg { width: 28px; height: 28px; flex-shrink: 0; }
.detail-stars .rating-num { font-size: 1.25rem; font-weight: 800; color: var(--c-navy-700); margin-left: 0.3rem; }

/* Botão de favoritar na página de detalhe (coração maior, ao lado da marca) */
.detail-fav-btn {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--radius-full);
  background: #fff; border: 1px solid var(--c-gray-200); box-shadow: var(--shadow-xs);
  display: flex; align-items: center; justify-content: center; color: var(--c-navy-500); transition: all var(--t-fast);
}
.detail-fav-btn:hover { transform: scale(1.06); color: var(--c-red-500); }
.detail-fav-btn i, .detail-fav-btn svg { width: 21px; height: 21px; transition: all var(--t-fast); }
.detail-fav-btn--active { color: var(--c-red-500); }
.detail-fav-btn--active svg { fill: var(--c-red-500) !important; stroke: var(--c-red-500); }

/* Preço: solto, fora do cartão, com respiro generoso vindo das estrelas */
.detail-price { margin: 2.75rem 0 2rem; }
.detail-price__now { font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--c-navy-900); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.detail-price__old { font-size: 1.1rem; color: var(--c-gray-500); font-weight: 600; }
.detail-price__old s { color: var(--c-gray-400); }
.price-tag {
  display: inline-flex; align-items: center; background: linear-gradient(135deg, var(--c-red-500), var(--c-red-600));
  color: #fff; padding: 0.35rem 0.9rem; border-radius: var(--radius-full);
  font-size: 1rem; font-weight: 800; box-shadow: 0 6px 14px rgba(239,68,68,0.32); margin-left: 0.85rem;
}

/* Botão de compra + garantia: soltos, sem cartão à volta */
.buy-box__assurance { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; margin-bottom: 2.5rem; font-size: 0.82rem; color: var(--c-navy-600); }
.buy-box__assurance i, .buy-box__assurance svg { width: 16px; height: 16px; color: var(--c-green-500); }

.detail-section-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--c-gray-100); }
.detail-desc { font-size: 1.05rem; line-height: 1.8; color: var(--c-navy-700); margin-bottom: 2.5rem; white-space: pre-line; }

.pack-includes { margin-bottom: 2.5rem; background: var(--c-sky-50); padding: 1.5rem; border-radius: var(--radius-xl); border: 1px dashed var(--c-sky-300); }
.pack-includes h3 { font-size: 1.2rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.pack-includes h3 i { color: var(--c-sky-500); width: 20px; height: 20px; }
.pack-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; border: 1px solid var(--c-gray-200); background: #fff; border-radius: var(--radius-md); margin-bottom: 0.75rem; }
.pack-item img { width: 42px; height: 54px; object-fit: cover; border-radius: 4px; box-shadow: var(--shadow-xs); }
.pack-item h4 { font-size: 0.9rem; margin: 0; }
.pack-item p { font-size: 0.78rem; color: var(--c-navy-500); margin: 0; }

/* Selo de economia do combo (página do produto) */
.pack-saving {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5); border: 1px solid #a7f3d0;
  color: #065f46; font-weight: 700; padding: 0.7rem 1rem; border-radius: var(--radius-md);
  margin-bottom: 1rem; font-size: 0.92rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.pack-saving i { width: 18px; height: 18px; color: #059669; }
.pack-saving s { color: #6b7280; font-weight: 600; margin: 0 0.15rem; }
.pack-saving strong { color: #047857; }

/* Construtor de combos (admin) */
.pack-pick {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.7rem;
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-md); background: #fff;
  cursor: pointer; transition: all var(--t-fast);
}
.pack-pick:hover { border-color: var(--c-sky-300); background: var(--c-sky-50); }
.pack-pick.is-checked { border-color: var(--c-sky-500); background: var(--c-sky-50); box-shadow: inset 0 0 0 1px var(--c-sky-400); }
.pack-pick input { width: 17px; height: 17px; accent-color: var(--c-sky-500); flex-shrink: 0; }
.pack-pick img { width: 30px; height: 40px; object-fit: cover; border-radius: 4px; box-shadow: var(--shadow-xs); flex-shrink: 0; background: var(--c-gray-50); }
.pack-pick__name { flex: 1; font-size: 0.85rem; font-weight: 600; color: var(--c-navy-900); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pack-pick__price { font-size: 0.85rem; font-weight: 700; color: var(--c-navy-700); white-space: nowrap; }

.pack-summary { margin-top: 1rem; background: #fff; border: 1px solid var(--c-gray-200); border-radius: var(--radius-md); padding: 0.9rem 1rem; }
.pack-summary__row { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; color: var(--c-navy-600); padding: 0.22rem 0; gap: 1rem; }
.pack-summary__row strong { color: var(--c-navy-900); font-size: 0.95rem; }
.pack-summary__save { margin-top: 0.55rem; padding-top: 0.6rem; border-top: 1px dashed var(--c-gray-200); color: var(--c-green-500); font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; gap: 0.4rem; }
.pack-summary__save i { width: 17px; height: 17px; }
.pack-summary__hint { font-size: 0.8rem; color: var(--c-navy-500); }

@media (max-width: 834px) {
  .product-page-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .product-page-left { position: relative; top: 0; }
}

/* Recommendations */
.recommended-section { margin-top: 4.5rem; padding-top: 3rem; border-top: 1px solid var(--c-gray-200); }
.recommended-title { font-size: 1.8rem; text-align: center; margin-bottom: 2.5rem; }
@media (max-width: 480px) {
  .recommended-section { margin-top: 2.5rem; padding-top: 1.75rem; }
  .recommended-title { font-size: 1.3rem; margin-bottom: 1.25rem; text-align: left; }
  .recommended-grid .rec-card { width: 150px; }
}
/* carrossel horizontal (deslizável) */
.recommended-grid {
  display: flex; gap: 1.25rem; overflow-x: auto;
  padding: 0.25rem 0.25rem 1rem; scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.recommended-grid::-webkit-scrollbar { display: none; }
.rec-card { flex: 0 0 auto; width: 180px; scroll-snap-align: start; border: 1px solid var(--c-gray-200); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; background: #fff; transition: transform var(--t-smooth), box-shadow var(--t-smooth), border-color var(--t-smooth); }
.rec-card:hover { transform: translateY(-5px); border-color: var(--c-sky-300); box-shadow: var(--shadow-md); }
.rec-card__img-wrap { position: relative; }
.rec-card__img { width: 100%; aspect-ratio: 4/5; background: var(--c-gray-50); object-fit: contain; padding: 1rem; display: block; }
.rec-card__info { padding: 1rem; }
.rec-card__title { font-size: 0.875rem; font-weight: 700; margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-card__price { font-size: 0.9rem; color: var(--c-navy-900); font-weight: 800; }
.rec-card__price s { color: var(--c-gray-400); font-weight: 600; font-size: 0.78rem; margin-right: 4px; }

/* =========================================
   14. MODALS
========================================= */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.55);
  backdrop-filter: blur(8px); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  opacity: 0; visibility: hidden; transition: opacity var(--t-smooth), visibility var(--t-smooth);
}
.modal-overlay.active { opacity: 1; visibility: visible; }

.modal {
  background: rgba(255,255,255,0.96); backdrop-filter: blur(20px);
  width: 100%; max-width: 920px; border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.5);
  max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
  transform: scale(0.96) translateY(16px); transition: transform var(--t-spring);
}
/* transform: none (não "scale(1)") é proposital — QUALQUER valor de transform
   diferente de "none" cria containing block novo pra descendentes position:fixed
   (CSS Transforms spec). O Cloudflare Turnstile, ao escalar pro desafio
   interativo, usa um iframe position:fixed que deveria cobrir a viewport
   inteira; com "scale(1)" (que NÃO é "none") esse iframe ficava preso/
   recortado dentro da caixa do .modal (que também tem overflow:hidden),
   e o desafio nunca aparecia — parecia que o widget tinha travado/sumido.
   Bug reportado 20/07, causa raiz confirmada e corrigida aqui. */
.modal-overlay.active .modal { transform: none; }
.modal--small { max-width: 420px; }
.admin-modal-wide { max-width: 1100px; width: 95vw; height: 92vh; }

.modal__header {
  padding: 1.4rem 1.75rem; border-bottom: 1px solid var(--c-gray-100);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #fff;
}
.modal__title { font-size: 1.2rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; }
.modal__title i { width: 20px; height: 20px; color: var(--c-sky-500); }
.modal__close {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); color: var(--c-navy-600); transition: all var(--t-fast); flex-shrink: 0;
}
.modal__close:hover { background: var(--c-gray-100); color: var(--c-navy-900); }
.modal__body { padding: 1.75rem; overflow-y: auto; }

/* Forms */
.form-group { margin-bottom: 1.35rem; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.45rem; color: var(--c-navy-900); }
.form-input {
  width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-md); font-size: 0.95rem; background: var(--c-gray-50); transition: all var(--t-fast);
}
.form-input:focus { outline: none; border-color: var(--c-sky-500); background: #fff; box-shadow: 0 0 0 4px var(--c-sky-50); }
textarea.form-input { resize: vertical; min-height: 110px; }
.form-hint { font-size: 0.78rem; color: var(--c-navy-500); margin-top: 0.35rem; }
.input-divider { font-size: 0.8rem; color: var(--c-navy-500); font-weight: 700; }

.field-card { background: var(--c-gray-50); padding: 1.1rem; border-radius: var(--radius-md); margin-bottom: 1.35rem; border: 1px dashed var(--c-gray-300); }
.checkbox-row { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.checkbox-row input { width: 18px; height: 18px; accent-color: var(--c-sky-500); }

/* Campo de senha com botão de mostrar/ocultar (olhinho) */
.password-field { position: relative; }
.password-field .form-input { padding-right: 2.75rem; }
.password-toggle-btn {
  position: absolute; top: 50%; right: 0.65rem; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: none; background: transparent;
  color: var(--c-navy-500); cursor: pointer; border-radius: var(--radius-sm, 6px);
  transition: color var(--t-fast);
}
.password-toggle-btn:hover { color: var(--c-sky-600); }
.password-toggle-btn i { width: 18px; height: 18px; pointer-events: none; }

/* Regras de senha (signup) */
.password-rules { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.password-rules li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: var(--c-navy-500); transition: color var(--t-fast); }
.password-rules li i { width: 14px; height: 14px; flex-shrink: 0; }
.password-rules li.is-valid { color: var(--c-emerald-600, #059669); }
.password-rules li.is-valid i { color: var(--c-emerald-600, #059669); }
.password-rules li.is-invalid { color: var(--c-navy-500); }
/* Variante de ALERTA: avisos de senha faltante (vermelho), só visível sob demanda */
.password-rules--alert li.is-invalid { color: var(--c-red-600); font-weight: 600; }
.password-rules--alert li.is-invalid i { color: var(--c-red-600); }

/* Perfil do cliente */
.profile-info { display: flex; flex-direction: column; gap: 0.85rem; background: var(--c-gray-50); border: 1px solid var(--c-gray-200); border-radius: var(--radius-md); padding: 1rem 1.1rem; }
.profile-info__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.profile-info__label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 700; color: var(--c-navy-600); }
.profile-info__label i { width: 16px; height: 16px; color: var(--c-sky-500); }
.profile-info__value { font-size: 0.9rem; color: var(--c-navy-900); font-weight: 600; text-align: right; }

/* ====== "Minha Conta" — PÁGINA CHEIA (mesmo padrão SPA do product-view) ====== */
.account-back-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: none;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; color: var(--c-navy-600);
  cursor: pointer; padding: 0.4rem 0; margin-bottom: 1rem; transition: color var(--t-fast);
}
.account-back-btn i { width: 18px; height: 18px; }
.account-back-btn:hover { color: var(--c-sky-600); }

.account-header {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  background: var(--grad-accent);
  color: #fff; border-radius: var(--radius-lg);
  padding: 1.75rem 2rem; margin-bottom: 2.5rem; box-shadow: var(--shadow-lg);
}
.account-header__avatar {
  width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; color: #fff;
}
.account-header__avatar i { width: 38px; height: 38px; color: #fff; }
.account-header__info { flex: 1; min-width: 0; }
.account-header__info h1 { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.2rem; color: #fff; }
.account-header__info p {
  font-size: 0.9rem; color: var(--c-sky-300); margin: 0;
  /* overflow-wrap:break-word tenta quebrar em fronteira natural (@, ., hífen)
     antes de partir no meio da palavra — "break-all" cortava emails longos
     tipo "cliente.teste@digib / ook.ao" de um jeito feio no mobile (20/07). */
  overflow-wrap: break-word; word-break: normal;
}
.account-header__gear {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.1); color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--t-fast), transform var(--t-fast);
}
.account-header__gear i { width: 20px; height: 20px; }
.account-header__gear:hover { background: rgba(255,255,255,0.22); transform: rotate(35deg); }

/* Prateleiras horizontais (estilo loja/Netflix) */
.account-shelves { display: flex; flex-direction: column; gap: 2.5rem; }
.account-shelf__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.account-shelf__title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.15rem; font-weight: 800; color: var(--c-navy-900); margin: 0; }
.account-shelf__title i { width: 19px; height: 19px; color: var(--c-sky-500); }
.account-shelf__arrows { display: flex; gap: 0.4rem; }
.account-shelf__arrow {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--c-gray-200); background: #fff;
  color: var(--c-navy-600); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.account-shelf__arrow i { width: 18px; height: 18px; }
.account-shelf__arrow:hover { background: var(--c-sky-50); color: var(--c-sky-600); border-color: var(--c-sky-300); }
.account-shelf__arrow.is-hidden { opacity: 0.35; pointer-events: none; }

.account-shelf__track-wrap { position: relative; overflow: visible; }
.account-shelf__track {
  display: flex; gap: 1rem; overflow-x: auto; overflow-y: visible; scroll-snap-type: x proximity;
  padding: 1.25rem 0.25rem 0.75rem; margin: -1.25rem -0.25rem -0.75rem;
  scrollbar-width: thin;
}
.account-shelf__card { scroll-snap-align: start; }

.empty-state--shelf {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; text-align: left;
  background: #fff; border: 1px dashed var(--c-gray-200); border-radius: var(--radius-lg);
  padding: 1.75rem 2rem; width: 100%;
}
.empty-state--shelf i { width: 28px; height: 28px; color: var(--c-sky-400); margin-bottom: 0.3rem; }
.empty-state--shelf h3 { font-size: 1rem; font-weight: 800; color: var(--c-navy-900); margin: 0; }
.empty-state--shelf p { font-size: 0.85rem; color: var(--c-navy-500); margin: 0; }

@media (max-width: 834px) {
  .account-header { padding: 1.5rem; }
}
@media (max-width: 480px) {
  .account-shelf__track { gap: 0.75rem; }
}

/* ====== "Configurações da conta" — PÁGINA CHEIA (mesmo padrão SPA) ====== */
.settings-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.settings-header h1 { font-size: 1.6rem; font-weight: 800; color: var(--c-navy-900); margin: 0; }
.settings-sections { display: flex; flex-direction: column; gap: 1.5rem; max-width: 640px; }
.settings-section {
  background: #fff; border: 1px solid var(--c-gray-200); border-radius: var(--radius-lg);
  padding: 1.75rem 2rem; box-shadow: var(--shadow-sm);
}
.settings-section__title {
  display: flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; font-weight: 800;
  color: var(--c-navy-900); margin: 0 0 1.25rem;
}
.settings-section__title i { width: 19px; height: 19px; color: var(--c-sky-500); }

/* Excluir conta: ZERO apelo visual de propósito (fricção pedida pelo Senhor) —
   sem card destacado, sem cor de perigo chamativa, vira um rodapé apagado. */
.settings-section--quiet {
  background: transparent; border: none; box-shadow: none; padding: 0.5rem 0 0;
  margin-top: 0.5rem;
}
.settings-section--quiet .settings-section__title {
  font-size: 0.8rem; font-weight: 600; color: var(--c-gray-500); margin-bottom: 0.6rem;
}
.settings-section--quiet .settings-section__title i { width: 14px; height: 14px; color: var(--c-gray-500); }
.delete-account-link {
  background: none; border: none; padding: 0; font-size: 0.85rem; color: var(--c-gray-500);
  text-decoration: underline; cursor: pointer; font-weight: 500;
}
.delete-account-link:hover { color: var(--c-navy-700); }
.delete-account-link:disabled { cursor: not-allowed; opacity: 0.5; }
/* Botão final de exclusão: discreto também — não pode dar vontade de clicar. */
.btn-quiet-danger {
  background: none; border: 1px solid var(--c-gray-300); color: var(--c-gray-500);
  font-weight: 500; box-shadow: none;
}
.btn-quiet-danger:hover:not(:disabled) { background: var(--c-gray-50); color: var(--c-gray-600); }
.btn-quiet-danger:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 834px) {
  .settings-sections { max-width: none; }
  .settings-section { padding: 1.5rem; }
}

@media (max-width: 480px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* =========================================
   15. ADMIN DASHBOARD
========================================= */
.admin-bar { padding: 1.4rem 1.75rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #fff; border-bottom: 1px solid var(--c-gray-100); flex-wrap: wrap; }
.admin-bar__actions {
  display: flex; gap: 0.6rem;
  /* sem wrap, "Novo eBook"+"Novo Combo"+"Sair"+fechar (X) somados passavam
     de 440px de largura mínima — no mobile (modal ~90vw) isso estourava a
     caixa do modal e ficava cortado pelo overflow:hidden (bug real, 20/07).
     flex-wrap deixa os botões quebrarem em 2 linhas em vez de vazar. */
  flex-wrap: wrap; justify-content: flex-end;
}

.admin-tabs { display: flex; gap: 0.25rem; background: #fff; padding: 0 1.75rem; border-bottom: 1px solid var(--c-gray-200); overflow-x: auto; }
.admin-tab {
  padding: 0.95rem 1.25rem; font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem;
  color: var(--c-navy-600); border-bottom: 2px solid transparent; white-space: nowrap; transition: all var(--t-fast);
}
.admin-tab:hover { color: var(--c-navy-900); }
.admin-tab.active { color: var(--c-sky-600); border-bottom-color: var(--c-sky-500); font-weight: 700; }

.admin-tab-content { display: none; }
.admin-tab-content.active { display: block; }

.admin-body { background: var(--c-gray-50); padding: 0; overflow-y: auto; flex: 1; }
.admin-pad { padding: 1.75rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 1.75rem; }
.stat-card { background: #fff; padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--c-gray-200); box-shadow: var(--shadow-xs); display: flex; gap: 1rem; align-items: center; }
.stat-card__icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: var(--c-sky-50); color: var(--c-sky-600); }
.stat-card__icon i { width: 24px; height: 24px; }
.stat-card__label { font-size: 0.78rem; color: var(--c-navy-600); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 0.25rem; }
.stat-card__value { font-size: 1.5rem; font-weight: 800; color: var(--c-navy-900); line-height: 1.1; }
.stat-card__value--accent { color: var(--c-sky-600); }

.panel { background: #fff; padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--c-gray-200); margin-bottom: 1.75rem; }
.panel h3 { font-size: 1.15rem; margin-bottom: 1.1rem; }

.table-responsive { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table thead { background: var(--c-gray-50); }
.admin-table th { text-align: left; padding: 0.9rem 1rem; font-weight: 700; font-size: 0.8rem; color: var(--c-navy-600); text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 2px solid var(--c-gray-200); white-space: nowrap; }
.admin-table td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--c-gray-100); vertical-align: middle; font-size: 0.9rem; }
.admin-table tbody tr { transition: background var(--t-fast); }
.admin-table tbody tr:hover { background: var(--c-gray-50); }
.table-img { width: 44px; height: 58px; object-fit: cover; border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); }

.pill { display: inline-flex; align-items: center; padding: 0.25rem 0.7rem; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 700; background: var(--c-gray-100); color: var(--c-navy-700); }
.pill--accent { background: var(--c-sky-50); color: var(--c-sky-600); }
.pill--count { background: var(--c-gray-100); color: var(--c-navy-900); }
.tag-discount { background: var(--c-red-500); color: #fff; padding: 0.12rem 0.4rem; border-radius: 5px; font-size: 0.7rem; font-weight: 800; margin-left: 4px; }
.price-strike { text-decoration: line-through; color: var(--c-gray-400); font-size: 0.78rem; }

.actions-cell { display: flex; gap: 0.4rem; }
.action-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); transition: all var(--t-fast); }
.action-btn i { width: 17px; height: 17px; }
.action-btn.edit { color: var(--c-sky-600); background: var(--c-sky-50); }
.action-btn.edit:hover { background: var(--c-sky-500); color: #fff; }
.action-btn.delete { color: var(--c-red-500); background: #fef2f2; }
.action-btn.delete:hover { background: var(--c-red-500); color: #fff; }

.inline-form { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.inline-form .form-group { flex: 1; min-width: 160px; margin-bottom: 0; }

.autocomplete-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; background: #fff;
  border: 1px solid var(--c-gray-200); border-top: none; max-height: 220px; overflow-y: auto;
  z-index: 20; box-shadow: var(--shadow-lg); border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.autocomplete-item { padding: 0.75rem 1rem; cursor: pointer; border-bottom: 1px solid var(--c-gray-100); font-size: 0.875rem; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; transition: background var(--t-fast); }
.autocomplete-item:hover, .autocomplete-item--active { background: var(--c-gray-50); }
.autocomplete-item__name { font-weight: 600; color: var(--c-navy-900); }
.autocomplete-empty { padding: 0.85rem 1rem; color: var(--c-navy-500); font-size: 0.875rem; }

/* Sugestões de busca do catálogo (com capa em miniatura) — reaproveita .autocomplete-dropdown */
.search-suggest-item { justify-content: flex-start; text-align: left; }
.search-suggest-item__img { width: 34px; height: 46px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: var(--c-gray-100); }
.search-suggest-item__text { display: flex; flex-direction: column; gap: 0.1rem; overflow: hidden; }
.search-suggest-item__text .autocomplete-item__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-suggest-item__author { font-size: 0.78rem; color: var(--c-navy-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =========================================
   16. CART SIDEBAR
========================================= */
.cart-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.4); backdrop-filter: blur(3px); z-index: 1900; opacity: 0; visibility: hidden; transition: all var(--t-smooth); }
.cart-backdrop.active { opacity: 1; visibility: visible; }

.cart-sidebar {
  position: fixed; top: 0; right: 0; width: 410px; max-width: 100vw; height: 100vh;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(20px);
  box-shadow: -16px 0 40px rgba(15,23,42,0.15); z-index: 2000;
  transform: translateX(100%); transition: transform var(--t-spring);
  display: flex; flex-direction: column; border-left: 1px solid var(--c-gray-200);
}
.cart-sidebar.active { transform: translateX(0); }

/* Modal de confirmação de remoção precisa ficar ACIMA do drawer do carrinho
   (z-index 2000) e do seu backdrop (1900) — senão fica escondido atrás quando
   o drawer está aberto. Mantido abaixo do toast (3000). */
#cart-remove-confirm-modal { z-index: 2100; }

/* Popup simples de confirmação de remoção do carrinho (sem arrastar). */
.modal--cart-remove .modal__body { padding-top: 1.25rem; }
.cart-remove { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; padding: 0.25rem 0 0.5rem; }
.cart-remove__cover {
  width: 84px; height: 112px; object-fit: contain; background: #fff;
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); border: 1px solid var(--c-gray-200); padding: 0.4rem;
}
.cart-remove__text { font-size: 0.95rem; color: var(--c-navy-700); margin: 0; }
.cart-remove__text strong { color: var(--c-navy-900); }
.cart-remove__actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.2rem; }
.btn-ghost-danger {
  background: transparent; border: none; color: var(--c-gray-400); font-size: 0.8rem; font-weight: 600;
  padding: 0.5rem; text-align: center; cursor: pointer; transition: color var(--t-fast);
}
.btn-ghost-danger:hover { color: var(--c-red-500); text-decoration: underline; }
.cart-header { padding: 1.4rem 1.5rem; border-bottom: 1px solid var(--c-gray-200); display: flex; justify-content: space-between; align-items: center; }
.cart-header h3 { font-size: 1.2rem; display: flex; align-items: center; gap: 0.5rem; }
.cart-header h3 i { width: 20px; height: 20px; color: var(--c-sky-500); }
.cart-items { flex-grow: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.cart-empty { text-align: center; color: var(--c-navy-500); margin-top: 3rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.cart-empty i { width: 48px; height: 48px; color: var(--c-gray-300); }

.cart-item { display: flex; gap: 1rem; align-items: flex-start; }
.cart-item__image { width: 58px; height: 76px; object-fit: contain; border-radius: var(--radius-sm); background: var(--c-gray-50); padding: 0.4rem; border: 1px solid var(--c-gray-100); flex-shrink: 0; }
.cart-item__info { flex-grow: 1; min-width: 0; }
.cart-item__title { font-size: 0.875rem; font-weight: 700; margin-bottom: 0.25rem; line-height: 1.3; }
.cart-item__price { font-size: 0.85rem; color: var(--c-navy-900); font-weight: 800; }
.cart-item__price s { color: var(--c-gray-400); font-weight: 600; font-size: 0.74rem; margin-right: 4px; }
.cart-item__actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
.cart-qty-btn { background: var(--c-gray-100); height: 26px; padding: 0 0.6rem; border-radius: 7px; display: flex; align-items: center; justify-content: center; gap: 0.3rem; color: var(--c-navy-700); font-size: 0.78rem; font-weight: 700; transition: all var(--t-fast); }
.cart-qty-btn:hover { background: var(--c-sky-100); color: var(--c-sky-600); }
.cart-qty-btn i { width: 14px; height: 14px; }
.cart-qty-btn.cart-item__remove:hover { background: #fee2e2; color: var(--c-red-600); }
.cart-item__remove { margin-left: auto; color: var(--c-red-500); }

.cart-footer { padding: 1.5rem; border-top: 1px solid var(--c-gray-200); background: #fff; }
.cart-total { display: flex; justify-content: space-between; align-items: center; font-size: 1.25rem; font-weight: 800; margin-bottom: 1rem; }
.cart-total span:last-child { color: var(--c-sky-600); }

/* =========================================
   17. TOASTS
========================================= */
.toast-container { position: fixed; bottom: 2rem; right: 2rem; z-index: 3000; display: flex; flex-direction: column; gap: 0.6rem; }
.toast {
  background: rgba(255,255,255,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--c-navy-900); padding: 0.85rem 1.1rem 0.85rem 0.9rem;
  border-radius: 14px; box-shadow: 0 8px 28px -6px rgba(15,23,42,0.18), 0 2px 8px -2px rgba(15,23,42,0.08);
  border: 1px solid rgba(15,23,42,0.06);
  display: flex; align-items: center; gap: 0.65rem; font-weight: 600; font-size: 0.88rem; line-height: 1.3;
  animation: toastIn 0.45s cubic-bezier(.21,1.02,.73,1) forwards; max-width: 360px;
}
.toast.toast--out { animation: toastOut 0.3s ease forwards; }
.toast__icon-wrap {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.toast i { width: 17px; height: 17px; flex-shrink: 0; }
.toast.success .toast__icon-wrap { background: var(--c-green-100, #dcfce7); }
.toast.success i { color: var(--c-green-500); }
.toast.error .toast__icon-wrap { background: var(--c-red-100, #fee2e2); }
.toast.error i { color: var(--c-red-500); }
.toast.info .toast__icon-wrap { background: var(--c-sky-100, #e0f2fe); }
.toast.info i { color: var(--c-sky-500); }
@keyframes toastIn { from { transform: translateY(12px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes toastOut { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(8px) scale(0.96); opacity: 0; } }

@media (max-width: 480px) {
  .toast-container { right: 1rem; left: 1rem; bottom: 1rem; }
  .toast { max-width: 100%; }
}

/* =========================================
   18. FOOTER
========================================= */
.footer { background: var(--c-gray-50); color: var(--c-navy-600); padding: 4rem 0 2rem; margin-top: 4rem; border-top: 1px solid var(--c-gray-200); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.footer__brand h3 { color: var(--c-navy-900); font-size: 1.4rem; margin-bottom: 0.85rem; }
.footer__brand p { font-size: 0.95rem; max-width: 36ch; line-height: 1.7; color: var(--c-navy-600); }
.footer__col h4 { color: var(--c-navy-900); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }
.footer__col a { display: block; font-size: 0.92rem; padding: 0.35rem 0; color: var(--c-navy-600); transition: color var(--t-fast); }
.footer__col a:hover { color: var(--c-sky-600); }
.footer__social { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.footer__social a { width: 40px; height: 40px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--c-gray-200); box-shadow: var(--shadow-xs); display: flex; align-items: center; justify-content: center; color: var(--c-navy-700); transition: all var(--t-fast); }
.footer__social a:hover { background: var(--c-sky-500); color: #fff; border-color: transparent; transform: translateY(-2px); }
.footer__social i, .footer__social svg { width: 18px; height: 18px; display: block; }
.footer__bottom { border-top: 1px solid var(--c-gray-200); padding-top: 2rem; display: flex; justify-content: center; align-items: center; text-align: center; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--c-navy-500); }
.footer__admin { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--c-navy-500); padding: 0.4rem 0.9rem; border-radius: var(--radius-full); background: var(--c-gray-100); border: 1px solid var(--c-gray-200); transition: all var(--t-fast); cursor: pointer; }
.footer__admin:hover { color: var(--c-navy-900); background: var(--c-gray-200); }
.footer__admin i { width: 14px; height: 14px; }

@media (max-width: 768px) { .footer__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* =========================================
   19. REVEAL ANIMATIONS
========================================= */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 90ms; }
.reveal--delay-2 { transition-delay: 180ms; }
.reveal--delay-3 { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================
   20. RESPONSIVE
========================================= */
@media (max-width: 1023px) {
  /* iPad EM PÉ (768/834) continua em coluna única — só na PAISAGEM (1024,
     que já tem a nav de desktop e cabe um hero de 2 colunas de verdade)
     é que volta ao grid lado a lado, coerente com .category-nav acima
     (min-width:1024) e com o catálogo virando 3 colunas nessa largura.
     Ficava "celular esticado" em 1024 antes desse ajuste (20/07). */
  /* coluna única com o iPad ENTRE o título e a descrição */
  .hero__grid { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
  .hero__content { display: contents; }
  .hero__badge { order: 1; margin: 0; }
  .hero__title { order: 2; margin: 0; }
  .hero__visual { order: 3; width: 100%; max-width: 360px; margin: 0.25rem auto; }
  .hero__desc { order: 4; margin: 0 auto; }
  .hero__actions { order: 5; margin: 0; justify-content: center; }
  .hero__trust { order: 6; margin: 0; justify-content: center; }
  /* Vazio branco enorme reportado pelo Senhor (20/07): o .hero tem
     padding-bottom:6rem (pensado pro visual 3D grande do desktop) + a
     .statbar-section tinha margin-top:5rem — juntos, 176px de espaço morto
     depois das badges "Download imediato/Pagamento seguro/Acesso vitalício",
     bem mais visível no mobile porque o hero já fica compacto em coluna
     única. Reduz os dois só até 1024px, sem mexer no desktop. */
  .hero { padding-bottom: 2.5rem; }
  .statbar-section { margin-top: 2rem; margin-bottom: 1.5rem; }
  .statbar { grid-template-columns: repeat(2, 1fr); }
  /* 2 colunas em vez de 4 apertam a largura útil de cada célula pela metade —
     "Instantâneo"/"Humano" estouravam e o overflow:hidden do .statbar cortava
     o texto (bug reportado 20/07). */
  .statbar__num { font-size: 1.4rem; }
  .statbar__item { padding: 1.25rem 0.6rem; }
}

@media (max-width: 480px) {
  .section { padding: 4rem 0; }
  .filters { flex-direction: column; align-items: stretch; }
  .search-box { max-width: 100%; }
  .filter-group { flex-direction: column; }
  .sort-select { width: 100%; }
  .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
  .card__content { padding: 1rem; }
  .card__title { font-size: 0.95rem; }
  .card__price { font-size: 1.1rem; }
}

@media (max-width: 480px) {
  .statbar__num { font-size: 1.15rem; }
  .statbar__label { font-size: 0.72rem; }
}

/* =========================================
   ADMIN FAB — único acesso ao painel quando logado como admin (19/07/2026)
   Header/nav do admin fica igual ao de um visitante; ver updateAuthUI() em app.js.
========================================= */
.admin-fab {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 900;
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--grad-accent, var(--c-sky-600));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg); cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.admin-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 20px 40px -10px rgba(15,23,42,0.28); }
.admin-fab i { width: 24px; height: 24px; }

@media (max-width: 480px) {
  .admin-fab { right: 1rem; bottom: 1rem; width: 50px; height: 50px; }
  .admin-fab i { width: 20px; height: 20px; }
}