/* The Handmakers Club — landing page
   Tailwind (Play CDN) handles utilities; this file holds the pieces that
   need real CSS: the hero ground, the carousel, the FAQ accordion,
   the CTA button, and the floating purchase note. */

:root {
  --amber-600: #d97706;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --green-600: #059669;
  --green-700: #047857;

  /* Espaçamento entre linhas do texto do site inteiro.
     Diminua este número para juntar as linhas (ex: 1.35, 1.4).
     Aumente para afastar (ex: 1.6, 1.7). Tailwind's leading-relaxed
     default is 1.625 — this variable overrides it everywhere. */
  --body-line-height: 1.45;

  /* Margem lateral do site inteiro (a distância do texto/imagens até
     a borda da tela). Duas variáveis porque o celular precisa de uma
     margem menor que a tela grande — mexa em uma, na outra, ou nas duas.
     Valores em px também funcionam (ex: 24px) se preferir não usar rem. */
  --side-margin-mobile: 1rem;    /* margem lateral até 639px de largura */
  --side-margin-desktop: 2rem;   /* margem lateral a partir de 640px de largura */

  /* Tamanho do texto do corpo (paragrafos, listas, legendas) do site
     inteiro — NÃO afeta títulos/subtítulos (esses usam a fonte Fraunces
     e são preservados de propósito). É um multiplicador: 1 = tamanho
     normal, 1.1 = 10% maior, 0.9 = 10% menor. */
  --body-text-scale: 1.1;
}

/* Aplica a variável acima em todo texto de parágrafo do site.
   Não mexe nos títulos (h1/h2/h3) nem no preço em destaque —
   esses já têm um espaçamento próprio, intencionalmente apertado. */
.leading-relaxed {
  line-height: var(--body-line-height) !important;
}

/* Aplica as variáveis de margem lateral às 9 seções do site
   (todas usam as mesmas classes do Tailwind px-4 / sm:px-8 pra isso). */
[class~="px-4"] {
  padding-left: var(--side-margin-mobile) !important;
  padding-right: var(--side-margin-mobile) !important;
}
@media (min-width: 640px) {
  [class~="sm:px-8"] {
    padding-left: var(--side-margin-desktop) !important;
    padding-right: var(--side-margin-desktop) !important;
  }
}

/* Hero's auto-sliding gallery wrapper — same width on every screen
   size, everything stays single-column and centered. */
.marquee-wrap {
  max-width: 48rem;
}

/* Aplica a variável de tamanho de texto do corpo. Cada regra parte do
   valor original daquela classe do Tailwind (text-lg = 1.125rem, etc.)
   e multiplica pela variável — ":not(.font-display)" é o que garante
   que nenhum título/subtítulo (todos usam essa classe) seja alterado. */
.text-xs:not(.font-display)   { font-size: calc(0.75rem  * var(--body-text-scale)) !important; }
.text-sm:not(.font-display)   { font-size: calc(0.875rem * var(--body-text-scale)) !important; }
.text-base:not(.font-display) { font-size: calc(1rem     * var(--body-text-scale)) !important; }
.text-lg:not(.font-display)   { font-size: calc(1.125rem * var(--body-text-scale)) !important; }
.text-xl:not(.font-display)   { font-size: calc(1.25rem  * var(--body-text-scale)) !important; }
.text-2xl:not(.font-display)  { font-size: calc(1.5rem   * var(--body-text-scale)) !important; }

html { scroll-behavior: smooth; }

body {
  background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 45%, #fff1f2 100%);
}

/* On wide desktop screens the reading column leaves a lot of open
   space in the gutters either side of it. Rather than stretch the
   text (bad for reading), fill that space with soft, out-of-focus
   color so it reads as an intentional frame instead of empty margin. */
@media (min-width: 1024px) {
  body {
    position: relative;
  }
  body::before,
  body::after {
    content: "";
    position: fixed;
    top: 0;
    width: 40vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
  }
  body::before {
    left: 0;
    background:
      radial-gradient(38% 26% at 8% 12%, rgba(217, 119, 6, 0.12), transparent 70%),
      radial-gradient(30% 22% at 4% 55%, rgba(244, 63, 94, 0.10), transparent 70%),
      radial-gradient(32% 24% at 10% 90%, rgba(20, 184, 166, 0.10), transparent 70%);
  }
  body::after {
    right: 0;
    background:
      radial-gradient(38% 26% at 92% 8%, rgba(20, 184, 166, 0.10), transparent 70%),
      radial-gradient(30% 22% at 96% 48%, rgba(217, 119, 6, 0.12), transparent 70%),
      radial-gradient(32% 24% at 90% 88%, rgba(244, 63, 94, 0.10), transparent 70%);
  }
  header, section, footer {
    position: relative;
    z-index: 1;
  }
}

/* Focus — visible, warm, consistent everywhere */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--amber-600);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(217, 119, 6, 0.10), transparent 70%),
    radial-gradient(55% 45% at 90% 15%, rgba(244, 63, 94, 0.08), transparent 70%);
}

/* ---------- CTA button ---------- */
.cta-button {
  display: inline-block;
  width: 100%;
  max-width: 30rem;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  line-height: 1.25;
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, var(--emerald-500), var(--green-600));
  box-shadow: 0 12px 28px -10px rgba(5, 150, 105, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.cta-button:hover {
  transform: scale(1.02);
  background: linear-gradient(90deg, var(--emerald-600), var(--green-700));
  box-shadow: 0 20px 40px -12px rgba(5, 150, 105, 0.6);
}
.cta-button:active { transform: scale(0.99); }
.cta-button--wide { max-width: 34rem; }

/* ---------- Rating stars / member faces ---------- */
.stars { display: inline-flex; gap: 2px; color: #fbbf24; }
.stars svg { fill: currentColor; }

.member-face {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  margin-left: -12px;
}
.member-face:first-child { margin-left: 0; }
@media (min-width: 768px) {
  .member-face { width: 48px; height: 48px; }
}

/* ---------- Hero marquee (continuous auto-sliding gallery) ----------
   Cards enter from the right, drift left, and fade out at the left
   edge — looping forever with no gap. Speed: --marquee-duration below
   (lower = faster). Pauses on hover/focus so a visitor can look at one
   card; respects prefers-reduced-motion (falls back to a static row). */
.marquee {
  --marquee-duration: 20s;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
          mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 1rem;
  /* Motion is driven by requestAnimationFrame in app.js (CSS animations
     stayed frozen on iPhones). */
  will-change: transform;
}
.marquee-card {
  flex: 0 0 auto;
  width: clamp(120px, 24vw, 175px); /* slightly smaller than the +20% step (was clamp(132px, 26.4vw, 192px)) */
}
.marquee-card-inner {
  aspect-ratio: 9 / 16;
  padding: 0.4rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}
.marquee-card-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.7rem;
  display: block;
}

/* ---------- Carousel ---------- */
.carousel { position: relative; }
.carousel-viewport { position: relative; }
.carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel-track > img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: #fff;
  color: #374151;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  transition: background 0.15s ease, color 0.15s ease;
}
.carousel-arrow:hover { background: #fffbeb; color: #b45309; }
.carousel-arrow--prev { left: 8px; }
.carousel-arrow--next { right: 8px; }
@media (min-width: 768px) {
  .carousel-arrow--prev { left: -16px; }
  .carousel-arrow--next { right: -16px; }
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.carousel-dots button {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #e7d9c4;
  transition: width 0.25s ease, background 0.25s ease;
}
.carousel-dots button[aria-current="true"] {
  width: 24px;
  background: #f59e0b;
}

/* ---------- Session cards ---------- */
.session-card {
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 25px -12px rgba(0, 0, 0, 0.15);
  border-left: 4px solid var(--session, #f59e0b);
  padding: 1.5rem;
}
.session-head { display: flex; align-items: center; gap: 0.9rem; }
.session-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 0.75rem;
}
.session-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.session-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}
.session-list {
  margin-top: 1rem;
  display: grid;
  gap: 0.5rem;
  color: #374151;
  font-size: 1.0625rem;
}
.session-list > li {
  position: relative;
  padding-left: 1.25rem;
}
.session-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: var(--session, #f59e0b);
}

/* ---------- Bonus cards ---------- */
.bonus-card {
  border-radius: 1rem;
  border: 2px solid #fcd34d;
  background: linear-gradient(135deg, #fffbeb, #fefce8);
  padding: 1.5rem;
}
.bonus-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
  background: #fef3c7;
  color: #b45309;
}
.bonus-label {
  margin-top: 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #92400e;
}
.bonus-title {
  margin-top: 0.15rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
}

/* ---------- Pillar numbers ---------- */
.pillar-num {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  color: #fff;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
}

/* ---------- Price anchoring rows ---------- */
.value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid #e5e7eb;
}
.value-row dt { font-weight: 700; color: #111827; }
.value-row--last { border-bottom: 2px solid #d1d5db; }

/* ---------- FAQ accordion ---------- */
.faq-item {
  border: 1px solid #fde68a;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #fffbeb, #fff7ed);
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.18s ease;
  overflow: hidden;
}
.faq-item:hover { box-shadow: 0 12px 22px -10px rgba(0, 0, 0, 0.14); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-weight: 600;
  font-size: 1.0625rem;
  color: #111827;
}
.faq-chevron {
  flex: none;
  color: #b45309;
  transition: transform 0.25s ease;
}
.faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-a > p {
  padding: 0 1.5rem 1.35rem;
  color: #374151;
  line-height: 1.7;
}

/* ---------- Floating purchase note ---------- */
.purchase-note {
  position: fixed;
  bottom: 16px;
  left: 8px;
  right: 8px;
  z-index: 50;
  margin: 0 auto;
  max-width: 28rem;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: #facc15;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.35);
  transform: translateY(120%);
  transition: transform 0.4s ease;
}
.purchase-note.is-visible { transform: translateY(0); transition-duration: 0.6s; }

/* ---------- Community comments (Facebook-style) ---------- */
.fb-comments { color: #050505; }
.fb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid #1877f2;
}
.fb-head-title { display: flex; align-items: baseline; gap: 0.9rem; font-size: 1rem; }
.fb-head-title strong { color: #1877f2; font-weight: 700; }
.fb-head-title span { color: #65676b; font-weight: 600; }
.fb-sort { color: #1877f2; font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.fb-thread { margin-top: 1.25rem; }
.fb-comment { display: flex; align-items: flex-start; gap: 0.6rem; }
.fb-comment--reply { margin-top: 0.9rem; margin-left: 2.75rem; }
.fb-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  object-fit: cover;
  background: #e4e6eb;
}
.fb-comment--reply .fb-avatar { width: 32px; height: 32px; }
.fb-main { min-width: 0; }
.fb-bubble {
  display: inline-block;
  padding: 0.7rem 1rem 0.8rem;
  border-radius: 1.1rem;
  background: #f0f2f5;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.fb-name { display: block; margin-bottom: 0.3rem; font-size: 0.9375rem; font-weight: 700; color: #050505; }
.fb-text { color: #1c1e21; }
.fb-actions { padding: 0.35rem 0 0 0.6rem; font-size: 0.8125rem; color: #65676b; }
.fb-actions b { color: #1877f2; font-weight: 700; }
.fb-actions i { font-style: normal; padding: 0 0.3rem; }
@media (max-width: 480px) {
  .fb-comment--reply { margin-left: 1.5rem; }
  .fb-bubble, .fb-name { font-size: 0.9rem; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel-track,
  .cta-button,
  .faq-a,
  .faq-chevron,
  .purchase-note { transition-duration: 0.01ms !important; }
  .cta-button:hover { transform: none; }
}