/* ============================================================
   Theme: ZEN — Wellness / Feminine (light, crema)
   Pilates · yoga · barre · recovery
   Neutro + editable: CTA charcoal sobre crema + acento salvia (theme.accent)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');

[data-template="zen"] {
  --bg:          #F6F1E8;
  --surface:     #FFFFFF;
  --surface-2:   #EFE7DA;
  --ink:         #3B352E;
  --ink-soft:    #6E6459;
  --primary:     #3B352E;   /* CTA: charcoal cálido sobre crema */
  --primary-600: #241F1A;
  --accent:      #7C8A72;   /* salvia, editable (theme.accent) */
  --on-primary:  #F6F1E8;
  --focus:       #7C8A72;

  --border:        rgba(59,53,46,.12);
  --border-strong: rgba(59,53,46,.26);
  --shadow-md:     0 12px 30px rgba(59,53,46,.10);

  --font-body:     'Inter', system-ui, sans-serif;
  --font-display:  'Fraunces', Georgia, serif;
  --display-weight: 600;
  --display-tracking: normal;
  --display-case:  none;

  --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-full: 9999px;
  --maxw: 1180px;
}

[data-template="zen"] .eyebrow { color: var(--accent); letter-spacing: .18em; }
[data-template="zen"] .hero-scrim { background: linear-gradient(180deg, rgba(40,30,24,.12) 0%, rgba(40,30,24,.32) 55%, rgba(28,20,15,.72) 100%); }
[data-template="zen"] .hero-title { font-weight: 500; }
[data-template="zen"] .pillar-ic { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-radius: 50%; }
[data-template="zen"] .card { border-radius: var(--r-xl); }
[data-template="zen"] .card:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
[data-template="zen"] .quote p { font-family: var(--font-display); font-style: italic; }
[data-template="zen"] .cta-band { background: var(--surface-2); color: var(--ink); }
[data-template="zen"] .cta-band .btn-primary { background: var(--primary); color: var(--on-primary); }
[data-template="zen"] .cta-band .btn-primary:hover { background: var(--primary-600); }
[data-template="zen"] .footer { background: var(--surface-2); }