/* ============================================================
   styles/community.css — TuftingMaker
   Estilos compartidos por las páginas públicas de Comunidad:
   /community.html (galería) y /pattern.html (detalle de diseño).

   Dos responsabilidades:
   1. Tokens de diseño que consumen los módulos JS de comunidad
      (community.shared.js / community.public.js). Esos módulos se
      comparten con la app y usan el set de tokens de la app
      (--surface/--text/--accent…). Acá los mapeamos a la paleta del
      site (ver public.css: --clay/--ink/--sand…) para que las cards
      inyectadas por JS se rendericen correctamente. Sin esto, faltan
      sombras, bordes, fondos de badges y las barras de skeleton
      quedan invisibles.
   2. Layout compartido (hero / cta-subida / galería / why / cta-final),
      antes duplicado en ambos .astro.
   ============================================================ */

/* ── Tokens (compat app → site) ────────────────────────────── */
:root {
  /* superficies */
  --surface:    #FFFFFF;
  --surface-2:  #F9F7F4;
  --surface-3:  #F0EDE8;
  --surface-4:  #E6E1DA;   /* barras de skeleton */
  /* bordes */
  --border:     #DDD7CF;
  --border-lt:  #E8E4DE;   /* borde tenue (tags, footers de card) */
  --border-md:  #D9CCBF;   /* borde medio (chips activos) */
  /* texto */
  --text:       #1A1614;
  --text-2:     #48403A;
  --text-3:     #5F5753;
  --text-4:     #706965;
  /* acento + estados */
  --accent:     #B5491E;
  --accent-dim: rgba(181, 73, 30, .09);
  --warning:    #A8282A;
  /* radios */
  --r-sm:       4px;
  --r-md:       6px;
  --r-lg:       12px;
  --r-xl:       10px;
  /* sombra + tipografía + transición */
  --sh-sm:      0 1px 2px rgba(28, 20, 16, .05);
  --font:       var(--font-body);
  --mono:       var(--font-mono);
  --transition: 130ms cubic-bezier(.2, 0, .38, .9);
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  padding: 60px 24px 40px;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.hero .hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 700; line-height: 1.15; color: var(--ink);
  letter-spacing: -.02em; margin-bottom: 16px;
}
.hero .hero-title em { font-style: italic; color: var(--clay); }
.hero p {
  font-size: 16px; color: var(--ink-3);
  max-width: 540px; margin: 0 auto 24px; line-height: 1.65;
}
.hero-badges {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-bottom: 16px;
}

/* ── CTA subida ────────────────────────────────────────────── */
.upload-cta {
  background: var(--white);
  border: 1px solid var(--sand);
  border-radius: 12px;
  padding: 16px 24px;
  max-width: 680px;
  margin: 0 auto 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.upload-cta p { font-size: 14px; color: var(--ink-3); margin: 0; }
.upload-cta strong { color: var(--ink-2); }

/* ── Galería / detalle ─────────────────────────────────────── */
.gallery-section {
  max-width: 1200px;
  margin: 0 auto 80px;
  padding: 0 24px;
}

/* ── Why ───────────────────────────────────────────────────── */
.why-section { max-width: 900px; margin: 0 auto 72px; padding: 0 24px; }
.why-section h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 34px);
  color: var(--ink); margin-bottom: 32px; text-align: center;
}
.why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 700px) { .why-grid { grid-template-columns: 1fr; } }
.why-card {
  background: var(--white); border: 1px solid var(--sand);
  border-radius: 14px; padding: 22px;
  transition: transform .2s, box-shadow .2s;
}
.why-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(28,20,16,.07); }
.why-icon { font-size: 26px; margin-bottom: 10px; }
.why-card h3 { font-size: 14px; font-weight: 700; color: var(--ink-2); margin-bottom: 5px; }
.why-card p { font-size: 13px; color: var(--ink-3); line-height: 1.6; }

/* ── CTA final ─────────────────────────────────────────────── */
.final-cta {
  background: var(--clay); color: #fff;
  text-align: center; padding: 60px 24px;
}
.final-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.5vw, 38px);
  margin-bottom: 12px; line-height: 1.2;
}
.final-cta p { font-size: 15px; opacity: .92; margin-bottom: 24px; }

@media (max-width: 600px) {
  .gallery-section { padding: 0 16px; }
}