/* ==========================================================================
   Made by Freak — o lado oposto
   Carregado DEPOIS de styles.css, só na página madebyfreak.html.
   Inverte os papéis das cores (o que era preto vira claro) e devolve o visual
   escuro original: fundo quase preto com brilhos ameixa e rosa, botões pink,
   logotipo em texto (Pirata One) e o vaso de camadas no herói.
   ========================================================================== */

:root {
  --bg: #0b0a0c;
  --surface: #151016;
  --surface-alt: #1a1219;
  --blush: #1c1016;
  --field: #0f0c10;

  --line: #3a1f2b;
  --line-soft: #2a1c22;
  --line-strong: #5c2f43;
  --line-field: #6b4557;
  --line-orn: #4a2c38;
  --line-blush: #8D405D;

  /* papéis invertidos */
  --black: #f5f2f4;
  --white: #1a0a12;

  --pink-soft: #F97FAF;
  --pink-pale: #F9C9DC;
  --plum: #F97FAF;        /* links e destaques claros sobre o escuro (7,4:1) */

  --text: #efe9ec;
  --muted: #b9a9b1;
  --faint: #9a8a92;
}

html { color-scheme: dark; }

/* brilhos do topo, mais fortes que no lado claro */
body::before {
  background:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(141, 64, 93, 0.35), transparent),
    radial-gradient(ellipse 700px 500px at 105% 10%, rgba(243, 53, 127, 0.22), transparent);
}

::selection { background: #F3357F; color: #fff; }

a:hover { color: var(--pink-pale); }

.section-head h2, .about h2, .quote h2 { color: var(--pink-pale); }

/* ---------- botões ---------- */
.btn--primary { background: #F3357F; color: #1a0a12; }
.btn--primary:hover { background: var(--pink-soft); color: #1a0a12; }
.btn--ghost { border-color: var(--line-strong); color: var(--pink-pale); }
.btn--ghost:hover { border-color: var(--pink-soft); background: rgba(243, 53, 127, 0.1); color: #fff; }

/* ---------- logotipo em texto ---------- */
.wordmark { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; }
.wordmark__top {
  display: flex; align-items: center; gap: 0.6em;
  font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted);
}
.wordmark__top .star { width: 0.95em; height: 0.95em; }
.wordmark__name {
  font-family: var(--font-display); font-size: 2rem; letter-spacing: 1px; color: var(--black);
  margin-top: 2px; transition: color .2s;
}
.wordmark:hover .wordmark__name { color: var(--pink-pale); }
.wordmark--lg .wordmark__top { font-size: 0.78rem; }
.wordmark--lg .wordmark__name { font-size: 3.4rem; }

/* ---------- cabeçalho ---------- */
.site-header { background: rgba(11, 10, 12, 0.82); }

/* ---------- herói: vaso de camadas ---------- */
.hero__art::before { display: none; }
.hero__vase { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- catálogo ---------- */
.chip { background: transparent; }
.chip:hover { border-color: var(--pink-soft); }
.chip[aria-pressed='true'] { background: rgba(243, 53, 127, 0.14); border-color: #F3357F; color: var(--pink-pale); }

.card:hover { box-shadow: 0 14px 34px -18px rgba(243, 53, 127, 0.45); }
.card__media {
  background:
    repeating-linear-gradient(0deg, rgba(249, 127, 175, 0.07) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse 70% 70% at 50% 45%, rgba(141, 64, 93, 0.35), transparent),
    var(--field);
  color: var(--pink-soft);
}
.icon { filter: drop-shadow(0 0 14px rgba(243, 53, 127, 0.5)); }
.card__cat { color: var(--faint); }
.card__price { color: #e3b9cb; }

/* ---------- como funciona / sobre ---------- */
.step__num { background: rgba(243, 53, 127, 0.08); }
.step__num span { color: var(--pink-pale); }
.promises h3, .cta-band h3 { color: var(--pink-pale); }
.promises__icon { stroke: var(--pink-soft); }

/* ---------- formulário ---------- */
.checklist li { color: #e3b9cb; }
.field input, .field select, .field textarea { background-color: var(--field); } /* só a cor: o select mantém a seta em no-repeat */
.field input::placeholder, .field textarea::placeholder { color: #75656d; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-strong); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #F3357F; box-shadow: 0 0 0 3px rgba(243, 53, 127, 0.2); }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23F97FAF' stroke-width='1.6'/%3E%3C/svg%3E");
}
.form-error { border-color: #F3357F; background: rgba(243, 53, 127, 0.1); color: var(--pink-pale); }
.quote__form { box-shadow: none; }

/* ---------- faq ---------- */
.faq summary { color: var(--pink-pale); }
.faq summary:hover { color: #fff; }

/* ---------- rodapé e WhatsApp ---------- */
.site-footer__nav a { color: #e3b9cb; }
.site-footer__nav a:hover { color: var(--pink-pale); }

.wa-float {
  background: rgba(21, 16, 22, 0.94); color: var(--pink-pale);
  border-color: #F3357F;
  box-shadow: 0 10px 30px -12px rgba(243, 53, 127, 0.7);
}
.wa-float:hover { background: #F3357F; border-color: #F3357F; color: #1a0a12; }
.wa-float:hover .star { fill: #1a0a12; }

/* ---------- morcegos do portal: sombras com um fio de luz rosa só na borda externa ---------- */
.bat { filter: drop-shadow(0 0 1.5px rgba(249, 127, 175, 0.7)); }

/* ---------- responsivo ---------- */
@media (max-width: 860px) {
  .site-nav { background: rgba(11, 10, 12, 0.98); box-shadow: none; }
  .hero__art { max-width: 340px; }
}
@media (max-width: 560px) {
  .wordmark--lg .wordmark__name { font-size: 3rem; }
}