:root {
  --blue: #4b84b8;
  --blue-dark: #315e87;
  --blue-light: #edf5fb;

  --gold: #c7a15c;
  --gold-light: #ead9ad;

  --cream: #fbfaf7;
  --white: #ffffff;

  --text: #26333d;
  --muted: #71808b;
  --border: #e9e5dc;

  --shadow: 0 24px 70px rgba(38, 51, 61, .10);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;

  font-family: "DM Sans", Arial, sans-serif;
  color: var(--text);

  background:
    radial-gradient(
      circle at 8% 4%,
      rgba(199, 161, 92, .12),
      transparent 25rem
    ),
    radial-gradient(
      circle at 95% 30%,
      rgba(75, 132, 184, .10),
      transparent 27rem
    ),
    var(--cream);

  overflow-x: hidden;

  transition:
    background .3s ease,
    color .3s ease;
}

a {
  color: inherit;
  text-decoration: none;
}

/* =========================
   ELEMENTOS DECORATIVOS
========================= */

.ambient {
  position: fixed;
  pointer-events: none;

  border-radius: 50%;
  filter: blur(70px);

  opacity: .45;
  z-index: -1;
}

.ambient-one {
  width: 260px;
  height: 260px;

  top: -100px;
  right: -90px;

  background: rgba(75, 132, 184, .14);
}

.ambient-two {
  width: 230px;
  height: 230px;

  bottom: -100px;
  left: -90px;

  background: rgba(199, 161, 92, .14);
}

/* =========================
   CONTAINER
========================= */

.container {
  width: min(560px, calc(100% - 28px));

  margin: 0 auto;
  padding: 22px 0 38px;
}

/* =========================
   PERFIL / HEADER
========================= */

.profile {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 13px;
  margin-bottom: 18px;
}

.brand-area {
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand-mark {
  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  flex: 0 0 50px;

  border-radius: 50%;
  background: transparent;

  overflow: hidden;
}

.brand-mark img {
  width: 100%;
  height: 100%;

  object-fit: contain;
  display: block;
}

.profile h1 {
  margin: 0;

  font-size: 16px;
  font-weight: 700;
}

.profile p {
  margin: 3px 0 0;

  color: var(--muted);
  font-size: 11px;
}

/* =========================
   BOTÃO TEMA
========================= */

.theme-button {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border: 1px solid var(--border);
  border-radius: 50%;

  color: var(--blue-dark);
  background: rgba(255, 255, 255, .85);

  font-size: 18px;

  cursor: pointer;

  box-shadow:
    0 5px 15px rgba(38, 51, 61, .06);

  transition:
    transform .2s ease,
    background .3s ease,
    color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.theme-button:hover {
  transform: rotate(12deg) scale(1.05);
}

/* =========================
   HERO
========================= */

.hero {
  position: relative;
  overflow: hidden;

  padding: 34px 25px 24px;

  text-align: center;

  background: rgba(255, 255, 255, .82);

  border: 1px solid rgba(199, 161, 92, .34);
  border-radius: 30px;

  box-shadow: var(--shadow);

  backdrop-filter: blur(10px);

  transition:
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.hero::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .7),
      transparent 60%
    );
}

.hero > * {
  position: relative;
}

/* =========================
   ORNAMENTO
========================= */

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  color: var(--gold);

  font-family: Georgia, serif;
}

.ornament i {
  display: block;

  width: 54px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--gold),
      transparent
    );
}

.ornament span {
  font-size: 13px;
}

/* =========================
   STATUS
========================= */

.status {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  margin-top: 18px;
  padding: 8px 13px;

  border-radius: 999px;

  color: var(--blue-dark);
  background: var(--blue-light);

  border: 1px solid #d9e8f3;

  font-size: 11px;
  font-weight: 700;
}

.status-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--gold);

  box-shadow:
    0 0 0 5px rgba(199, 161, 92, .13);
}

/* =========================
   TÍTULO
========================= */

.hero h2 {
  margin: 17px 0 13px;

  color: #304b61;

  font-family: "Playfair Display", Georgia, serif;

  font-size: clamp(32px, 8vw, 47px);

  line-height: 1.04;

  font-weight: 600;

  letter-spacing: -.7px;

  transition: color .3s ease;
}

.hero h2 strong {
  color: var(--gold);
  font-weight: 600;
}

.hero-text {
  max-width: 440px;

  margin: 0 auto;

  color: var(--muted);

  font-size: 13px;
  line-height: 1.7;
}

/* =========================
   BOTÕES PRINCIPAIS
========================= */

.buttons {
  display: grid;
  gap: 10px;

  margin-top: 23px;
}

.button {
  min-height: 64px;

  display: grid;

  grid-template-columns: 42px 1fr 20px;

  align-items: center;

  gap: 9px;

  padding: 8px 15px;

  border-radius: 17px;

  text-align: left;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .3s ease,
    border-color .3s ease,
    color .3s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button.whatsapp {
  color: #fff;

  background: var(--blue);

  box-shadow:
    0 11px 27px rgba(75, 132, 184, .24);
}

.button.shopee {
  color: var(--text);

  background: #fff;

  border: 1px solid var(--border);
}

.button-icon {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: rgba(255, 255, 255, .16);

  font-size: 17px;
}

.shopee .button-icon {
  color: var(--gold);

  background: #f7f2e8;
}

.button b {
  display: block;

  font-size: 13px;
  font-weight: 700;
}

.button small {
  display: block;

  margin-top: 3px;

  opacity: .72;

  font-size: 10px;
}

.arrow {
  font-size: 18px;
  opacity: .65;
}

/* =========================
   BOTÃO CATÁLOGO
========================= */

.catalog-button {
  position: relative;

  display: flex;
  align-items: center;

  gap: 14px;

  width: 100%;

  margin-top: 14px;
  padding: 13px 15px;

  color: var(--text);

  text-decoration: none;

  background:
    linear-gradient(
      135deg,
      rgba(237, 245, 251, .95),
      rgba(251, 250, 247, .95)
    );

  border: 1px solid rgba(199, 161, 92, .38);

  border-radius: 17px;

  box-shadow:
    0 8px 24px rgba(38, 51, 61, .06);

  transition:
    transform .25s ease,
    background .3s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.catalog-button:hover {
  transform: translateY(-3px);

  border-color: var(--gold);

  box-shadow:
    0 13px 30px rgba(38, 51, 61, .11);
}

.catalog-icon {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  flex: 0 0 43px;

  color: #fff;

  background:
    linear-gradient(
      145deg,
      var(--blue),
      var(--blue-dark)
    );

  border-radius: 13px;

  font-size: 21px;

  box-shadow:
    0 6px 14px rgba(75, 132, 184, .22);

  transition:
    transform .25s ease;
}

.catalog-button:hover .catalog-icon {
  transform: scale(1.05);
}

.catalog-content {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 3px;

  flex: 1;
}

.catalog-content b {
  color: var(--text);

  font-size: 13px;
  font-weight: 700;
}

.catalog-content small {
  color: var(--muted);

  font-size: 10px;
  line-height: 1.4;
}

.catalog-arrow {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  color: var(--gold);

  font-size: 19px;
  font-weight: 700;

  border-radius: 50%;

  transition:
    transform .25s ease,
    background .25s ease;
}

.catalog-button:hover .catalog-arrow {
  transform: translateX(4px);

  background:
    rgba(199, 161, 92, .10);
}

/* =========================
   PROGRESSO
========================= */

.progress-box {
  margin-top: 13px;

  padding: 16px 16px 13px;

  border: 1px dashed #d8c79f;

  border-radius: 17px;

  background: rgba(250, 248, 242, .75);

  text-align: left;

  transition:
    background .3s ease,
    border-color .3s ease;
}

.progress-head {
  display: flex;
  justify-content: space-between;

  gap: 15px;

  margin-bottom: 8px;

  color: var(--muted);

  font-size: 10px;
}

.progress-head strong {
  color: var(--gold);
}

.progress-track {
  height: 6px;

  overflow: hidden;

  border-radius: 99px;

  background: #e8ecee;
}

.progress-value {
  width: 72%;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      var(--gold)
    );

  animation:
    progress 1.2s ease-out both;
}

@keyframes progress {
  from {
    width: 0;
  }

  to {
    width: 72%;
  }
}

.progress-box p {
  margin: 9px 0 0;

  color: var(--muted);

  font-size: 10px;
  line-height: 1.5;
}

/* =========================
   TÍTULOS DAS SEÇÕES
========================= */

.section-heading {
  margin: 30px 0 14px;

  text-align: center;
}

.section-heading span {
  color: var(--gold);

  font-family: Georgia, serif;

  font-size: 10px;

  letter-spacing: 2px;
}

.section-heading h3 {
  margin: 5px 0 0;

  color: #304b61;

  font-family: "Playfair Display", Georgia, serif;

  font-size: 23px;

  font-weight: 600;

  transition: color .3s ease;
}

/* =========================
   CATEGORIAS
========================= */

.category-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;
}

.category-card {
  padding: 18px 14px 16px;

  background: rgba(255, 255, 255, .88);

  border: 1px solid var(--border);

  border-radius: 19px;

  box-shadow:
    0 8px 25px rgba(38, 51, 61, .05);

  transition:
    transform .2s ease,
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.category-card:hover {
  transform: translateY(-3px);
}

.category-symbol {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  margin-bottom: 12px;

  border-radius: 13px;

  color: var(--gold);

  background:
    linear-gradient(
      145deg,
      #fbf8f0,
      #f2ecdd
    );

  font-family: Georgia, serif;

  font-size: 22px;
}

.category-card h4 {
  margin: 0 0 5px;

  font-size: 12px;
}

.category-card p {
  margin: 0;

  color: var(--muted);

  font-size: 10px;
  line-height: 1.5;
}

/* =========================
   SOCIAL
========================= */

.social {
  margin-top: 23px;

  padding: 18px;

  text-align: center;

  background: rgba(255, 255, 255, .8);

  border: 1px solid var(--border);

  border-radius: 20px;

  transition:
    background .3s ease,
    border-color .3s ease;
}

.social p {
  margin: 0 0 12px;

  color: var(--muted);

  font-size: 10px;
}

.social-links {
  display: flex;

  justify-content: center;

  gap: 8px;

  flex-wrap: wrap;
}

.social-links a {
  padding: 9px 13px;

  color: #465966;

  background: #f7f8f8;

  border: 1px solid #eceeee;

  border-radius: 11px;

  font-size: 10px;

  font-weight: 700;

  transition:
    .2s ease;
}

.social-links a:hover {
  border-color: var(--gold-light);

  color: var(--blue-dark);
}

/* =========================
   FOOTER
========================= */

footer {
  padding-top: 21px;

  text-align: center;

  color: #909aa0;

  font-size: 9px;
}

.footer-line {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  margin-bottom: 7px;
}

.footer-line span {
  width: 35px;
  height: 1px;

  background: #ddd7c9;
}

.footer-line b {
  color: var(--gold);

  font-family: Georgia, serif;
}

/* =========================
   TOAST
========================= */

.toast {
  position: fixed;

  left: 50%;
  bottom: 20px;

  z-index: 20;

  transform:
    translate(-50%, 20px);

  padding: 10px 15px;

  color: #fff;

  background: #304b61;

  border-radius: 10px;

  font-size: 11px;

  opacity: 0;

  pointer-events: none;

  transition: .25s ease;
}

.toast.show {
  opacity: 1;

  transform:
    translate(-50%, 0);
}

/* =========================
   MODO ESCURO
========================= */

body.dark {
  --blue: #6198c9;
  --blue-dark: #8ebbe0;
  --blue-light: #1d3346;

  --gold: #d7b66f;
  --gold-light: #8c7445;

  --cream: #10171d;
  --white: #182129;

  --text: #edf2f5;
  --muted: #a7b3bc;
  --border: #29343d;

  --shadow:
    0 24px 70px rgba(0, 0, 0, .35);

  background:
    radial-gradient(
      circle at 8% 4%,
      rgba(199, 161, 92, .08),
      transparent 25rem
    ),
    radial-gradient(
      circle at 95% 30%,
      rgba(75, 132, 184, .08),
      transparent 27rem
    ),
    #10171d;
}

body.dark .hero {
  background: rgba(24, 33, 41, .88);

  border-color:
    rgba(215, 182, 111, .25);
}

body.dark .hero h2,
body.dark .section-heading h3 {
  color: #edf2f5;
}

body.dark .button.shopee {
  color: var(--text);

  background: #182129;

  border-color: var(--border);
}

body.dark .shopee .button-icon {
  background: #29251d;
}

body.dark .progress-box {
  background: rgba(35, 42, 47, .75);

  border-color: #6e5b38;
}

body.dark .category-card {
  background: #182129;

  border-color: var(--border);
}

body.dark .category-symbol {
  background:
    linear-gradient(
      145deg,
      #29251d,
      #211f1a
    );
}

body.dark .social {
  background: #182129;

  border-color: var(--border);
}

body.dark .social-links a {
  color: #c9d3da;

  background: #202a32;

  border-color: #303b44;
}

body.dark .theme-button {
  color: #f0c96e;

  background: #202a32;

  border-color: #36434d;
}

body.dark .ambient-one {
  background: rgba(75, 132, 184, .08);
}

body.dark .ambient-two {
  background: rgba(199, 161, 92, .07);
}

/* =========================
   CATÁLOGO — MODO ESCURO
========================= */

body.dark .catalog-button {
  color: var(--text);

  background:
    linear-gradient(
      135deg,
      rgba(29, 51, 70, .95),
      rgba(24, 33, 41, .95)
    );

  border-color:
    rgba(215, 182, 111, .28);

  box-shadow:
    0 10px 28px rgba(0, 0, 0, .22);
}

body.dark .catalog-button:hover {
  border-color: var(--gold);
}

body.dark .catalog-icon {
  background:
    linear-gradient(
      145deg,
      var(--blue),
      var(--blue-dark)
    );
}

body.dark .catalog-arrow {
  background:
    rgba(215, 182, 111, .06);
}

/* =========================
   RESPONSIVO
========================= */

@media (max-width: 390px) {

  .container {
    width: min(100% - 20px, 560px);

    padding-top: 15px;
  }

  .hero {
    padding: 29px 17px 20px;

    border-radius: 25px;
  }

  .hero h2 {
    font-size: 31px;
  }

  .category-card {
    padding: 15px 12px;
  }

  .catalog-button {
    padding: 12px;
  }

  .catalog-content b {
    font-size: 12px;
  }

  .catalog-content small {
    font-size: 9px;
  }
}