/*
 * Unify Blog · Pulso360 Sunset Skin
 *
 * Warm editorial light theme inspired by the Pulso360 redesign:
 *  - Cream paper background (#faf7f1) with subtle atmospheric warmth
 *  - Plus Jakarta Sans for display, Instrument Serif italic for accents,
 *    Manrope for body, JetBrains Mono for meta/labels
 *  - Sunset gradient (amber → orange → coral → wine → purple)
 *  - Generous whitespace, soft warm shadows
 *  - Dark mode remains available via html.dark
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Light Pulso360 sunset palette (default) */
  --u-bg:        #faf7f1;
  --u-bg-soft:   #f5f1ea;
  --u-bg-3:      #f0ebe2;
  --u-bg-4:      #ebe5da;
  --u-surface:   #ffffff;
  --u-surface-2: #f0ebe2;
  --u-line:      rgba(26, 19, 16, 0.06);
  --u-line-2:    rgba(26, 19, 16, 0.10);
  --u-line-3:    rgba(26, 19, 16, 0.16);

  --u-text:      #1a1310;
  --u-text-soft: #3d3530;
  --u-text-mute: #756c62;
  --u-text-faint:#a89e93;

  /* Sunset accents */
  --sunset-deep:   #3A0F6E;
  --sunset-wine:   #560606;
  --sunset-rose:   #C84580;
  --sunset-coral:  #F12055;
  --sunset-orange: #FF5E00;
  --sunset-amber:  #FFA040;

  --u-accent:        var(--sunset-coral);
  --u-accent-2:      var(--sunset-orange);
  --u-accent-3:      var(--sunset-amber);
  --u-accent-hover:  var(--sunset-orange);
  --u-accent-soft:   rgba(241, 32, 85, 0.08);
  --u-accent-line:   rgba(241, 32, 85, 0.30);
  --u-accent-warm:   linear-gradient(135deg, #FFA040 0%, #FF5E00 30%, #F12055 60%, #C84580 100%);

  --u-wa:        #15803d;
  --u-wa-soft:   rgba(21, 128, 61, 0.10);
  --u-wa-line:   rgba(21, 128, 61, 0.30);
  --u-pain:      #b91c1c;
  --u-pain-soft: rgba(185, 28, 28, 0.10);
  --u-warn:      #b45309;
  --u-warn-soft: rgba(180, 83, 9, 0.10);

  --u-radius-sm: 8px;
  --u-radius:    14px;
  --u-radius-lg: 18px;
  --u-shadow:    0 1px 2px rgba(86, 6, 6, 0.04), 0 4px 16px rgba(86, 6, 6, 0.06);
  --u-shadow-hover: 0 2px 4px rgba(86, 6, 6, 0.06), 0 8px 28px rgba(86, 6, 6, 0.10);

  --u-header-bg: rgba(250, 247, 241, 0.85);
  --u-footer-bg: #ebe5da;
  --u-inset:     rgba(26, 19, 16, 0.03);
  --u-zebra:     rgba(26, 19, 16, 0.025);

  --u-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --u-serif:   'Instrument Serif', Georgia, serif;
  --u-body:    'Manrope', system-ui, sans-serif;
  --u-mono:    'JetBrains Mono', ui-monospace, monospace;
  --u-ease:    cubic-bezier(.16, 1, .3, 1);
}

/* Dark mode override (kept available via the toggle) */
html.dark {
  --u-bg:        #050114;
  --u-bg-soft:   #0D0B16;
  --u-bg-3:      #14112B;
  --u-bg-4:      #1E1B4B;
  --u-surface:   #14112B;
  --u-surface-2: #1E1B4B;
  --u-line:      rgba(255, 255, 255, 0.07);
  --u-line-2:    rgba(255, 255, 255, 0.13);
  --u-line-3:    rgba(255, 255, 255, 0.20);

  --u-text:      #F6F6F8;
  --u-text-soft: #cdd1de;
  --u-text-mute: #9aa1b3;
  --u-text-faint:#6B7280;

  --u-accent-soft:   rgba(241, 32, 85, 0.14);
  --u-shadow:        0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 30px rgba(0,0,0,0.35);
  --u-shadow-hover:  0 1px 0 rgba(255,255,255,0.05) inset, 0 14px 36px rgba(0,0,0,0.5);
  --u-header-bg:     rgba(5, 1, 20, 0.82);
  --u-footer-bg:     #03000c;
  --u-inset:         rgba(255,255,255,0.04);
  --u-zebra:         rgba(255,255,255,0.015);
}

/* ---------- Base ---------- */
html, body {
  background-color: var(--u-bg) !important;
  color: var(--u-text) !important;
  font-family: var(--u-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}

body, body.bg-white, body.font-inter, .bg-white {
  background-color: var(--u-bg) !important;
  color: var(--u-text) !important;
}

main, section, article, header, footer, nav { color: var(--u-text); font-family: var(--u-body); }

/* Atmospheric warm glow (light) */
body { position: relative; }
body::before {
  content: '';
  position: fixed;
  top: -10%; right: -15%;
  width: 60vw; height: 80vh;
  background: radial-gradient(ellipse 50% 50% at 60% 40%, rgba(241, 32, 85, 0.045), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  bottom: -10%; left: -10%;
  width: 50vw; height: 60vh;
  background: radial-gradient(ellipse 50% 50% at 40% 60%, rgba(255, 160, 64, 0.055), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
html.dark body::before,
html.dark body::after { opacity: 0.35; }

/* Keep content above glow */
header, main, section, footer, article { position: relative; z-index: 1; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6,
article h1, article h2, article h3, article h4,
main h1, main h2, main h3, main h4,
section h1, section h2, section h3, section h4 {
  color: var(--u-text) !important;
  font-family: var(--u-display) !important;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
  font-weight: 700;
}
h1 { font-weight: 800; letter-spacing: -0.035em; }

article p, main p, section p {
  color: var(--u-text-soft);
  line-height: 1.7;
  text-wrap: pretty;
}
article p + p { margin-top: 1.1em; }
article ul, article ol { color: var(--u-text-soft); line-height: 1.7; }
article li + li { margin-top: 0.4em; }
article strong, main strong { color: var(--u-text); font-weight: 600; }
article em, main em { color: var(--u-text-soft); }

/* Gradient text headings → sunset gradient instead of solid neutralize.
   This preserves Tailwind's `bg-clip-text text-transparent` patterns and
   replaces ALL former purple/pink gradients with the sunset palette. */
[class*="bg-clip-text"][class*="text-transparent"],
.bg-clip-text.text-transparent {
  background: var(--u-accent-warm) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Instrument Serif italic accent helpers (kept lightweight) */
em.serif, .font-serif-italic { font-family: var(--u-serif) !important; font-style: italic; font-weight: 400; }

/* ---------- Header / nav ---------- */
header.bg-white,
header .bg-white\/95,
.bg-white\/95,
.bg-white\/90,
header[class*="bg-white"] {
  background-color: var(--u-header-bg) !important;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-color: var(--u-line) !important;
  border-bottom: 1px solid var(--u-line) !important;
  box-shadow: none !important;
}

/* ---------- Cards / surfaces ---------- */
.shadow, .shadow-sm, .shadow-md,
.shadow-lg, .shadow-xl, .shadow-2xl {
  box-shadow: var(--u-shadow) !important;
}

[class*="rounded-2xl"], [class*="rounded-3xl"],
[class*="rounded-xl"] {
  border-color: var(--u-line) !important;
}

.bg-simplified-gray-50,
.bg-simplified-gray-100,
.bg-gray-50,
.bg-gray-100 { background-color: var(--u-bg-soft) !important; }

.bg-simplified-gray-200,
.bg-gray-200 { background-color: var(--u-surface-2) !important; }

/* Flatten gradient sections to cream paper. Sunset gradients only on CTAs/heroes. */
[class*="bg-gradient-to-"] {
  background-image: none !important;
  background-color: transparent !important;
}
[class*="bg-gradient-to-"][class*="from-white"],
[class*="bg-gradient-to-"][class*="from-simplified-gray"] {
  background-color: var(--u-bg) !important;
}

/* Preserve inline gradient styles (rare) */
[style*="background-image"], [style*="background:linear"], [style*="background: linear"] {
  background-image: revert !important;
}

/* Editorial article cards */
.bg-white.rounded-2xl,
.bg-white.rounded-xl,
article.bg-white {
  background-color: var(--u-surface) !important;
  border: 1px solid var(--u-line) !important;
  box-shadow: var(--u-shadow) !important;
  transition: border-color 200ms var(--u-ease), transform 200ms var(--u-ease), box-shadow 200ms var(--u-ease), background-color 200ms var(--u-ease);
}

.bg-white.rounded-2xl:hover,
.bg-white.rounded-xl:hover,
article.bg-white:hover {
  background-color: var(--u-surface) !important;
  border-color: var(--u-line-2) !important;
  box-shadow: var(--u-shadow-hover) !important;
}

/* Former purple/pink hero panels → warm surface with sunset accent border */
.bg-gradient-to-br.from-simplified-purple,
.bg-gradient-to-r.from-simplified-purple,
[class*="from-simplified-purple"],
[class*="to-simplified-pink"],
[class*="to-simplified-orange"] {
  background: var(--u-surface) !important;
  background-image: none !important;
  border: 1px solid var(--u-accent-line) !important;
  color: var(--u-text) !important;
}

/* ---------- Text colors ---------- */
.text-simplified-gray-900,
.text-gray-900 { color: var(--u-text) !important; }
.text-simplified-gray-800,
.text-gray-800 { color: var(--u-text) !important; }
.text-simplified-gray-700,
.text-gray-700 { color: var(--u-text-soft) !important; }
.text-simplified-gray-600,
.text-gray-600 { color: var(--u-text-mute) !important; }
.text-simplified-gray-500,
.text-gray-500 { color: var(--u-text-mute) !important; }
.text-simplified-gray-400,
.text-gray-400 { color: var(--u-text-faint) !important; }
.text-simplified-gray-300,
.text-gray-300 { color: var(--u-text-soft) !important; }
.text-white { color: var(--u-text) !important; }
html.dark .text-white { color: #ffffff !important; }

/* Brand-color text → sunset coral (except meaningful greens/reds/ambers) */
[class*="text-simplified-blue"],
[class*="text-simplified-purple"],
[class*="text-simplified-pink"],
[class*="text-simplified-orange"],
[class*="text-blue-"],
[class*="text-indigo-"],
[class*="text-purple-"],
[class*="text-violet-"],
[class*="text-fuchsia-"],
[class*="text-pink-"],
[class*="text-rose-"] {
  color: var(--sunset-coral) !important;
}

[class*="text-orange-"],
[class*="text-yellow-"] { color: var(--sunset-orange) !important; }

[class*="text-simplified-green"],
[class*="text-green-"],
[class*="text-emerald-"],
[class*="text-teal-"] { color: var(--u-wa) !important; }

[class*="text-simplified-red"],
[class*="text-red-"] { color: var(--u-pain) !important; }
[class*="text-amber-"] { color: var(--u-warn) !important; }

/* ---------- Borders ---------- */
.border-simplified-gray-100,
.border-simplified-gray-200,
.border-gray-100,
.border-gray-200,
[class*="border-simplified-blue"],
[class*="border-simplified-purple"],
[class*="border-simplified-pink"],
[class*="border-simplified-orange"],
[class*="border-blue-"],
[class*="border-indigo-"],
[class*="border-purple-"],
[class*="border-violet-"],
[class*="border-pink-"],
[class*="border-orange-"] {
  border-color: var(--u-line) !important;
}

[class*="border-simplified-green"],
[class*="border-green-"],
[class*="border-emerald-"] { border-color: var(--u-wa-line) !important; }

[class*="border-simplified-red"],
[class*="border-red-"] { border-color: rgba(185, 28, 28, 0.30) !important; }

/* ---------- Tinted backgrounds (chips, pills, callouts) ---------- */
[class*="bg-simplified-blue"],
[class*="bg-simplified-purple"],
[class*="bg-simplified-pink"],
[class*="bg-simplified-orange"],
[class*="bg-blue-"],
[class*="bg-indigo-"],
[class*="bg-purple-"],
[class*="bg-violet-"],
[class*="bg-fuchsia-"],
[class*="bg-pink-"],
[class*="bg-rose-"] {
  background-color: rgba(241, 32, 85, 0.08) !important;
  background-image: none !important;
  border-color: var(--u-accent-line) !important;
  color: var(--sunset-coral) !important;
}

[class*="bg-orange-"],
[class*="bg-yellow-"] {
  background-color: rgba(255, 160, 64, 0.12) !important;
  background-image: none !important;
  border-color: rgba(255, 160, 64, 0.30) !important;
  color: #b06a18 !important;
}

/* WhatsApp greens stay green */
[class*="bg-simplified-green"],
[class*="bg-green-"],
[class*="bg-emerald-"],
[class*="bg-teal-"] {
  background-color: var(--u-wa-soft) !important;
  background-image: none !important;
  border-color: var(--u-wa-line) !important;
  color: var(--u-wa) !important;
}

[class*="bg-simplified-red"],
[class*="bg-red-"] {
  background-color: var(--u-pain-soft) !important;
  background-image: none !important;
  border-color: rgba(185, 28, 28, 0.30) !important;
  color: var(--u-pain) !important;
}

[class*="bg-amber-"] {
  background-color: var(--u-warn-soft) !important;
  background-image: none !important;
  border-color: rgba(180, 83, 9, 0.30) !important;
  color: var(--u-warn) !important;
}

/* Solid dark surfaces (e.g. Tailwind .bg-gray-900) — in light mode, lift to surface */
.bg-simplified-gray-900,
.bg-gray-900,
.bg-black { background-color: var(--u-surface-2) !important; color: var(--u-text) !important; }
html.dark .bg-simplified-gray-900,
html.dark .bg-gray-900,
html.dark .bg-black { background-color: var(--u-surface) !important; color: var(--u-text) !important; }

/* ---------- Inputs ---------- */
input, select, textarea {
  background-color: var(--u-bg) !important;
  color: var(--u-text) !important;
  border: 1px solid var(--u-line-2) !important;
  border-radius: 999px !important;
  font-family: var(--u-body) !important;
  padding: 12px 18px !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--u-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--u-accent-soft) !important;
}
input::placeholder, textarea::placeholder { color: var(--u-text-mute) !important; }
textarea { border-radius: var(--u-radius) !important; }

/* ---------- Links ---------- */
a {
  color: inherit;
  text-decoration: none;
}
article a, main a, section p a, li a {
  color: var(--u-accent);
  text-decoration: underline;
  text-decoration-color: var(--u-accent-line);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color 160ms var(--u-ease), text-decoration-color 160ms var(--u-ease);
}
article a:hover, main a:hover, section p a:hover, li a:hover {
  color: var(--u-accent-2);
  text-decoration-color: var(--u-accent-2);
}

/* WhatsApp links keep green identity */
a[href*="wa.me"],
a[href*="whatsapp"],
a[href*="api.whatsapp"] {
  color: var(--u-wa) !important;
  text-decoration-color: var(--u-wa-line) !important;
}

/* Card links shouldn't underline */
a.block, a[class*="rounded"], a[class*="card"] { text-decoration: none !important; }

/* ---------- Code & quotes ---------- */
code, kbd {
  background-color: var(--u-surface-2) !important;
  color: var(--u-text) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 6px;
  padding: 0.12em 0.4em;
  font-family: var(--u-mono) !important;
  font-size: 0.92em;
}
pre {
  background-color: var(--u-surface-2) !important;
  color: var(--u-text) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: var(--u-radius);
  padding: 16px 18px;
  overflow-x: auto;
  font-family: var(--u-mono) !important;
}
pre code { background: transparent !important; border: 0 !important; padding: 0 !important; }

blockquote {
  border-left: 3px solid var(--u-accent) !important;
  background: var(--u-surface) !important;
  color: var(--u-text-soft) !important;
  padding: 14px 20px;
  margin: 1.5em 0;
  border-radius: var(--u-radius-sm);
  font-family: var(--u-serif);
  font-style: italic;
  font-size: 1.05em;
}

/* ---------- Footer ---------- */
footer.bg-simplified-gray-900,
footer { background-color: var(--u-footer-bg) !important; border-top: 1px solid var(--u-line); }

/* ---------- Hover surfaces ---------- */
.hover\:bg-simplified-gray-50:hover,
.hover\:bg-simplified-gray-100:hover,
.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover { background-color: var(--u-bg-soft) !important; }

/* Card lift hover */
.hover\:-translate-y-1:hover { transform: translateY(-2px) !important; }
.hover\:shadow-xl:hover,
.hover\:shadow-lg:hover,
.hover\:shadow-2xl:hover { box-shadow: var(--u-shadow-hover) !important; }

/* ---------- Logos ---------- */
img[alt*="Unify"], img[alt*="Logo"] { filter: none; }
html.dark img[alt*="Unify"], html.dark img[alt*="Logo"] { filter: brightness(1.06); }

/* Editorial image treatment */
article img, main img, .rounded-2xl img, .rounded-xl img {
  border-radius: inherit;
  display: block;
}
.rounded-2xl > img:first-child,
.rounded-xl > img:first-child,
article > img:first-child {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- Tables ---------- */
table { border-collapse: collapse; border: 1px solid var(--u-line) !important; border-radius: var(--u-radius-sm); overflow: hidden; }
th { background-color: var(--u-surface-2) !important; color: var(--u-text) !important; font-family: var(--u-display); font-weight: 600; text-align: left; padding: 12px 14px; }
td { border-color: var(--u-line) !important; color: var(--u-text-soft) !important; padding: 12px 14px; }
tr:nth-child(even) td { background-color: var(--u-zebra); }

/* ---------- Buttons (the sunset CTA) ---------- */
.bg-simplified-blue-600,
.bg-simplified-blue-500,
.bg-simplified-purple,
.bg-blue-600, .bg-blue-500,
.bg-purple-600, .bg-violet-600, .bg-indigo-600,
.bg-pink-600, .bg-rose-600, .bg-orange-600 {
  background: var(--u-accent-warm) !important;
  color: #ffffff !important;
  border: 0 !important;
  font-family: var(--u-body) !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(241, 32, 85, 0.25) !important;
  transition: transform 200ms var(--u-ease), box-shadow 200ms var(--u-ease), filter 200ms var(--u-ease) !important;
}

.hover\:bg-simplified-blue-700:hover,
.hover\:bg-simplified-purple\/90:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-purple-700:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(241, 32, 85, 0.35) !important;
}

/* WhatsApp-marked CTA stays green */
[data-channel="whatsapp"],
.bg-whatsapp,
a[href*="wa.me"].btn,
a[href*="whatsapp"].btn {
  background-color: var(--u-wa) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 0 !important;
}

/* ---------- Editorial tweaks (Pulso360 feel) ---------- */

/* Category / kicker labels */
.text-xs.uppercase,
.text-\[10px\].uppercase,
.text-\[11px\].uppercase,
[class*="uppercase"][class*="tracking-"] {
  font-family: var(--u-mono) !important;
  letter-spacing: 0.14em !important;
  font-weight: 600 !important;
  color: var(--u-text-mute) !important;
}

/* Headline scale */
article h1, main h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  letter-spacing: -0.035em;
}
section h2, article h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  margin-top: 0.6em;
  letter-spacing: -0.03em;
}
article h3 {
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  margin-top: 1.3em;
}

/* Constrain reading column width */
article > p,
article > h2,
article > h3,
article > ul,
article > ol,
article > blockquote {
  max-width: 68ch;
}

/* Image captions */
article figure { margin: 2em 0; }
article figcaption {
  font-size: 0.85em;
  font-family: var(--u-mono);
  color: var(--u-text-faint);
  text-align: center;
  margin-top: 0.6em;
}

/* Remove residual purple gradient title hints */
.from-simplified-purple,
.via-simplified-pink,
.to-simplified-orange,
.from-simplified-pink,
.from-simplified-orange { --tw-gradient-from: transparent !important; --tw-gradient-via: transparent !important; --tw-gradient-to: transparent !important; }

/* Drop heavy decorative blurred blobs */
.blur-3xl, .blur-2xl, .blur-xl { display: none !important; }

/* Soften hr */
hr { border-color: var(--u-line) !important; margin: 2.5em 0; }

/* Selection */
::selection { background: var(--u-accent); color: #ffffff; }

/* Smoother scroll & focus */
html { scroll-behavior: smooth; }
:focus-visible {
  outline: 2px solid var(--u-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Theme toggle (floating) ---------- */
.u-theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--u-line-2);
  background-color: var(--u-surface);
  color: var(--u-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--u-shadow);
  transition: transform 160ms var(--u-ease), background-color 160ms var(--u-ease), border-color 160ms var(--u-ease);
}
.u-theme-toggle:hover {
  transform: translateY(-1px) scale(1.04);
  border-color: var(--u-accent-line);
}
.u-theme-toggle svg { width: 20px; height: 20px; display: block; }
.u-theme-toggle .icon-sun { display: block; }
.u-theme-toggle .icon-moon { display: none; }
html.dark .u-theme-toggle .icon-sun { display: none; }
html.dark .u-theme-toggle .icon-moon { display: block; }

/* ---------- Mobile polish ---------- */
@media (max-width: 640px) {
  body { -webkit-tap-highlight-color: transparent; }
  article > p, article > h2, article > h3, article > ul, article > ol { max-width: 100%; }
  h1 { letter-spacing: -0.028em; }
}