/* ════════════════════════════════════════════════════════
   INGLÉS 360 THEME v6.1.5 — MAIN CSS (Hero Blend)
   Author: Alba Carmona, Ed.D. (c)

   CSS-only changes vs. v6.1.4:
   - Light mode body bg = TRUE WHITE. Color glows confined
     to the hero region only. Past 55vh the page is pure white.
     Hero's outer edges blend cleanly into white at top + bottom.
   - Dark mode bg unchanged (was already correct).
   - Hero animation enhanced: existing big neon ring keeps slow
     rotation; SECOND smaller counter-rotating orbital with six
     pulsing brand-color nodes (cycle / neural connection cue).
     Pure CSS, no markup change required.
   - Reduced-motion still disables rotation.

   v6.1.4 audit-fix corrections all preserved.
   ════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Caveat:wght@500;700&display=swap');

/* ════════════════════════════════════════════════════════
   TOKENS
   ════════════════════════════════════════════════════════ */

:root {
  --i360-cyan-400:    #2BE6E0;
  --i360-cyan-300:    #5EF2C8;
  --i360-blue-500:    #4A6BFF;
  --i360-blue-600:    #2E46D9;
  --i360-violet-600:  #7C3AED;
  --i360-violet-500:  #8B5CF6;
  --i360-magenta-500: #B14CFF;
  --i360-magenta-400: #D072FF;
  --i360-pink-400:    #FF5FA8;
  --i360-navy-900:    #0A1340;
  --i360-lavender-200:#E9E4FF;
  --i360-indigo-ink:  #24124D;

  --i360-ring:        linear-gradient(120deg,#2BE6E0 0%,#4A6BFF 45%,#B14CFF 100%);
  --i360-ring-warm:   linear-gradient(120deg,#5EF2C8 0%,#4A6BFF 50%,#FF5FA8 100%);
  --i360-ring-soft:   linear-gradient(120deg,rgba(43,230,224,.18) 0%,rgba(74,107,255,.18) 50%,rgba(177,76,255,.22) 100%);
  --i360-ring-active: linear-gradient(135deg,#4A6BFF 0%,#7C3AED 50%,#B14CFF 100%);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;

  --container:        1320px;
  --container-narrow: 1180px;
  --container-text:   820px;
  --section-pad-y:    clamp(64px, 8vw, 112px);
  --section-pad-x:    clamp(20px, 4vw, 48px);

  --radius-xs:6px; --radius-sm:10px; --radius-md:14px;
  --radius-lg:20px; --radius-xl:28px; --radius-2xl:40px;
  --radius-pill:999px;

  --font-display:'Sora',system-ui,-apple-system,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-hand:'Caveat','Inter',cursive;

  --ease-out:cubic-bezier(.16,.84,.3,1);
  --dur-fast:140ms; --dur-base:220ms; --dur-slow:420ms;
  --t:var(--dur-base) var(--ease-out);

  --header-h:78px;
  --blur-glass:blur(20px);

  /* DARK MODE TOKENS (default) */
  --bg-page:        #05060D;
  --bg-page-2:      #0B0D1A;
  --bg-page-3:      #060711;
  --bg-surface:     rgba(255,255,255,.06);
  --bg-surface-2:   rgba(255,255,255,.04);
  --bg-raised:      rgba(255,255,255,.08);
  --bg-elevated:    #121C56;
  --bg-glass:       rgba(5,6,13,.85);
  --bg-nav-pill:    rgba(15,18,40,.78);

  --fg-1:           #F8F9FF;
  --fg-2:           #C7CDEB;
  --fg-3:           #8E94BE;
  --fg-4:           #6E749A;
  --fg-on-brand:    #FFFFFF;

  --border-1:       rgba(255,255,255,.08);
  --border-2:       rgba(255,255,255,.05);
  --border-strong:  rgba(255,255,255,.18);

  --accent:         var(--i360-cyan-400);
  --accent-hover:   var(--i360-cyan-300);
  --accent-press:   var(--i360-blue-500);
  --accent-on:      #07101E;

  --selected-bg:    rgba(74,107,255,.14);
  --selected-fg:    #FFFFFF;
  --selected-border:rgba(139,92,246,.45);
  --selected-glow:  0 0 24px rgba(139,92,246,.30);

  --shadow-1:0 1px 2px rgba(0,0,0,.30),0 1px 3px rgba(0,0,0,.20);
  --shadow-2:0 4px 16px rgba(0,0,0,.32),0 2px 4px rgba(0,0,0,.20);
  --shadow-3:0 12px 32px rgba(0,0,0,.36),0 4px 8px rgba(0,0,0,.20);
  --shadow-4:0 24px 60px rgba(0,0,0,.42),0 8px 16px rgba(0,0,0,.24);
  --glow-cyan:0 0 24px rgba(43,230,224,.45),0 0 56px rgba(43,230,224,.20);
  --glow-blue:0 0 24px rgba(74,107,255,.45),0 0 56px rgba(74,107,255,.20);
  --glow-magenta:0 0 24px rgba(177,76,255,.45),0 0 56px rgba(177,76,255,.20);

  --focus:0 0 0 3px rgba(74,107,255,.55);
}

[data-theme="light"] {
  --bg-page:        #F7F8FC;
  --bg-page-2:      #ECEEF6;
  --bg-page-3:      #FFFFFF;
  --bg-surface:     #FFFFFF;
  --bg-surface-2:   #FBFBFE;
  --bg-raised:      #FFFFFF;
  --bg-elevated:    #FFFFFF;
  --bg-glass:       rgba(255,255,255,.85);
  --bg-nav-pill:    rgba(255,255,255,.92);

  --fg-1:           #0A0E1F;
  --fg-2:           #2A2F4A;
  --fg-3:           #595F7E;
  --fg-4:           #8388A6;
  --fg-on-brand:    #FFFFFF;

  --border-1:       #D9DCEA;
  --border-2:       #ECEEF6;
  --border-strong:  #B6BACE;

  /* Accent: blue for everyday UI affordances on white. Brand gradient
     itself (.i360-grad / --i360-ring) keeps cyan→blue→magenta in BOTH
     modes — see gradient rules below. */
  --accent:         var(--i360-blue-600);
  --accent-hover:   var(--i360-violet-600);
  --accent-press:   #2438B5;
  --accent-on:      #FFFFFF;

  --selected-bg:    var(--i360-lavender-200);
  --selected-fg:    var(--i360-indigo-ink);
  --selected-border:rgba(124,58,237,.30);
  --selected-glow:  0 6px 18px rgba(74,107,255,.18);

  --shadow-1:0 1px 2px rgba(10,19,64,.06),0 1px 3px rgba(10,19,64,.05);
  --shadow-2:0 4px 12px rgba(10,19,64,.08),0 2px 4px rgba(10,19,64,.06);
  --shadow-3:0 12px 32px rgba(10,19,64,.12),0 4px 8px rgba(10,19,64,.06);
  --shadow-4:0 24px 64px rgba(10,19,64,.18),0 8px 16px rgba(10,19,64,.08);

  --focus:0 0 0 3px rgba(74,107,255,.45);
}

/* ════════════════════════════════════════════════════════
   RESET + BODY
   Body bg DESIGNED to contain the hero's glow at the top —
   that's how the seamless blend works. Hero adds nothing new.
   ════════════════════════════════════════════════════════ */

*,*::before,*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  background-color: var(--bg-page);
  color-scheme: dark;
}
html[data-theme="light"] { color-scheme: light; }

body {
  margin: 0;
  background-color: var(--bg-page);
  background-image:
    radial-gradient(circle at 50% 18vh, rgba(74,107,255,.50) 0%, rgba(74,107,255,.22) 22%, transparent 48%),
    radial-gradient(circle at 88% 12vh, rgba(177,76,255,.42) 0%, rgba(177,76,255,.16) 22%, transparent 50%),
    radial-gradient(circle at 12% 28vh, rgba(43,230,224,.32) 0%, rgba(43,230,224,.10) 25%, transparent 50%),
    radial-gradient(circle at 80% 92vh, rgba(177,76,255,.18), transparent 55%),
    linear-gradient(180deg, var(--bg-page) 0%, var(--bg-page-2) 60vh, var(--bg-page-3) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-base) var(--ease-out);
}

/* ── LIGHT MODE BODY: TRUE WHITE.
   Color glows are confined to the hero region (top 0–55vh).
   Past 55vh the page is pure white. The radial-gradients use
   transparent stops so their outer edges fade cleanly into
   white — no lilac wash anywhere. */
[data-theme="light"] body {
  background-color: #FFFFFF;
  background-image:
    radial-gradient(ellipse 70% 35vh at 50% 22vh, rgba(74,107,255,.14) 0%, rgba(74,107,255,.06) 35%, transparent 70%),
    radial-gradient(ellipse 50% 28vh at 86% 16vh, rgba(177,76,255,.12) 0%, rgba(177,76,255,.04) 35%, transparent 70%),
    radial-gradient(ellipse 45% 28vh at 14% 24vh, rgba(43,230,224,.10) 0%, rgba(43,230,224,.03) 35%, transparent 70%);
}

img, video { max-width: 100%; height: auto; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t);
}
a:hover { color: var(--accent-hover); }
a:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }

::selection { background: var(--i360-magenta-500); color: #fff; }

/* ════════════════════════════════════════════════════════
   TYPOGRAPHY
   ════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0 0 .5em;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-weight: 700; font-size: clamp(44px, 6.8vw, 76px); line-height: 1.05; letter-spacing: -.02em; }
h2 { font-weight: 700; font-size: clamp(30px, 4vw, 48px); line-height: 1.15; letter-spacing: -.02em; }
h3 { font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; }
h4 { font-weight: 600; font-size: 18px; line-height: 1.3; }
h5 { font-weight: 600; font-size: 16px; line-height: 1.3; }
h6 { font-weight: 600; font-size: 12px; line-height: 1.4; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-3); }

p { margin: 0 0 1em; color: var(--fg-2); text-wrap: pretty; }

.i360-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  margin: 0 0 12px;
  display: inline-block;
}
.i360-eyebrow-light { color: var(--i360-cyan-400) !important; }

.i360-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.65;
  color: var(--fg-2);
  max-width: var(--container-text);
}

.i360-hand {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1;
  color: var(--i360-magenta-400);
}

/* BRAND GRADIENT — same cyan→blue→magenta in BOTH modes.
   Previous light-mode override REMOVED per audit. */
.i360-grad,
span.i360-grad,
.has-i360-grad-color,
.i360-gradient-text {
  background: var(--i360-ring);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline;
}

.i360-page-header,
.wp-block-post-title.i360-page-header {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--fg-1);
  padding: clamp(28px, 4vw, 48px) 0 clamp(16px, 2vw, 28px);
  margin: 0 0 var(--space-6);
  border-bottom: 1px solid var(--border-1);
  max-width: var(--container-text);
}
.i360-app-page-title,
.wp-block-post-title.i360-app-page-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--fg-1);
  padding: clamp(20px, 3vw, 36px) 0 clamp(12px, 1.5vw, 18px);
  margin: 0 0 var(--space-5);
}

/* ════════════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════════════ */

.i360-main { min-height: 50vh; }

.i360-section {
  padding-block: var(--section-pad-y);
  padding-inline: var(--section-pad-x);
  position: relative;
}
.i360-section--inner { max-width: var(--container); margin-inline: auto; }
.i360-section--narrow { padding-block: clamp(56px, 6vw, 88px); }
.i360-section--stats  { padding-block: clamp(48px, 5vw, 72px); }
.i360-section > *:not(.alignfull):not(.alignwide) {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

/* ════════════════════════════════════════════════════════
   PILL NAV
   ════════════════════════════════════════════════════════ */

.i360-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  background: transparent !important;
  border-bottom: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 18px clamp(16px, 3vw, 28px) 0 !important;
  overflow: visible !important;
  height: auto !important;
}
.i360-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -8px 0;
  background: linear-gradient(180deg, var(--bg-glass) 60%, transparent 100%);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.i360-header.is-scrolled::before { opacity: 1; }

.i360-header__inner {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-4);
  background: var(--bg-nav-pill);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  padding: 10px 14px 10px 18px;
  box-shadow: var(--shadow-2);
}

.i360-logo-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  flex-shrink: 0;
}
.i360-logo-wrap .wp-block-site-logo,
.i360-logo-wrap .wp-block-site-logo img,
.i360-logo-wrap .custom-logo,
.i360-logo-wrap .custom-logo-link {
  display: inline-block !important;
  max-width: 36px;
  width: auto !important;
  height: auto !important;
}
.i360-logo-wrap .wp-block-site-logo img,
.i360-logo-wrap .custom-logo {
  border-radius: 999px;
  object-fit: contain;
}
.i360-logo,
.i360-logo a,
.wp-block-site-title.i360-logo,
.wp-block-site-title.i360-logo a {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  color: var(--fg-1) !important;
  -webkit-text-fill-color: var(--fg-1) !important;
  text-decoration: none !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.i360-nav .wp-block-navigation__container {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.i360-nav .wp-block-navigation-item__content,
.i360-nav a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-2) !important;
  -webkit-text-fill-color: var(--fg-2) !important;
  padding: 6px 4px;
  border-radius: 6px;
  transition: color var(--t);
  text-decoration: none;
  white-space: nowrap;
  display: block;
}
.i360-nav .wp-block-navigation-item__content:hover,
.i360-nav a:hover,
.i360-nav .current-menu-item > .wp-block-navigation-item__content {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
}

.i360-header__right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0;
}
.i360-nav-login,
.i360-nav-login a {
  font: 500 14px var(--font-body);
  color: var(--fg-2) !important;
  -webkit-text-fill-color: var(--fg-2) !important;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t);
}
.i360-nav-login:hover,
.i360-nav-login a:hover { color: var(--fg-1) !important; -webkit-text-fill-color: var(--fg-1) !important; }

/* ════════════════════════════════════════════════════════
   THEME TOGGLE — always visible (PHP-injected, fixed pos)
   ════════════════════════════════════════════════════════ */

.i360-theme-toggle--floating {
  position: fixed !important;
  top: 26px !important;
  right: 22px !important;
  z-index: 999 !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid var(--border-1) !important;
  background: var(--bg-nav-pill) !important;
  color: var(--fg-1) !important;
  cursor: pointer !important;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--dur-fast) var(--ease-out) !important;
  -webkit-appearance: none;
          appearance: none;
  visibility: visible !important;
  opacity: 1 !important;
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  box-shadow: 0 6px 18px rgba(0,0,0,.30);
}
.i360-theme-toggle--floating:hover {
  background: var(--bg-raised) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  transform: scale(1.06);
}
.i360-theme-toggle--floating:focus-visible {
  outline: none !important;
  box-shadow: var(--focus), 0 6px 18px rgba(0,0,0,.30) !important;
}
.i360-theme-toggle--floating svg { width: 16px !important; height: 16px !important; stroke: currentColor !important; }
[data-theme="light"] .i360-theme-toggle--floating { box-shadow: 0 6px 18px rgba(10,19,64,.18); }
@media (max-width: 880px) {
  .i360-theme-toggle--floating { top: 18px !important; right: 70px !important; }
}

/* ════════════════════════════════════════════════════════
   CUSTOM MOBILE MENU — hamburger + slide-down overlay
   ════════════════════════════════════════════════════════ */

.i360-mobile-fab {
  display: none;
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 998;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border-1);
  background: var(--bg-nav-pill);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background var(--t), border-color var(--t);
  box-shadow: 0 6px 18px rgba(0,0,0,.30);
}
.i360-mobile-fab:hover { background: var(--bg-raised); border-color: var(--accent); }
.i360-mobile-fab:focus-visible { outline: none; box-shadow: var(--focus); }
.i360-fab-line {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--fg-1);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t);
}
.i360-mobile-fab[aria-expanded="true"] .i360-fab-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.i360-mobile-fab[aria-expanded="true"] .i360-fab-line:nth-child(2) { opacity: 0; }
.i360-mobile-fab[aria-expanded="true"] .i360-fab-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
[data-theme="light"] .i360-mobile-fab { box-shadow: 0 6px 18px rgba(10,19,64,.18); }

@media (max-width: 880px) {
  .i360-mobile-fab { display: inline-flex !important; }
  .i360-nav { display: none !important; }
  .i360-nav-login { display: none !important; }
  .i360-header__inner { padding: 8px 8px 8px 14px; gap: 6px; }
}

.i360-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 997;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background: var(--bg-page);
  background-image:
    radial-gradient(circle at 50% 30%, rgba(74,107,255,.40) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(177,76,255,.28) 0%, transparent 55%);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
[data-theme="light"] .i360-mobile-overlay {
  background: rgba(255,255,255,.96);
  background-image:
    radial-gradient(circle at 50% 30%, rgba(74,107,255,.10) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(177,76,255,.08) 0%, transparent 55%);
}
.i360-mobile-overlay.is-open { opacity: 1; pointer-events: auto; }
.i360-mobile-overlay[hidden] { display: none; }
.i360-mobile-overlay__inner {
  position: relative;
  width: 100%;
  max-width: 480px;
  text-align: center;
  transform: translateY(-12px);
  transition: transform var(--dur-base) var(--ease-out);
}
.i360-mobile-overlay.is-open .i360-mobile-overlay__inner { transform: translateY(0); }
.i360-mobile-overlay__close {
  position: absolute;
  top: -32px;
  right: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-1);
  background: var(--bg-surface);
  border-radius: 999px;
  font: 700 22px var(--font-display);
  color: var(--fg-1);
  cursor: pointer;
  line-height: 1;
}
.i360-mobile-overlay__close:hover { background: var(--bg-raised); border-color: var(--accent); color: var(--accent); }
.i360-mobile-overlay__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.i360-mobile-overlay__menu li { margin: 0; }
.i360-mobile-overlay__menu a {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 5vw, 26px);
  color: var(--fg-1);
  padding: 14px 12px;
  text-decoration: none;
  border-radius: 14px;
  transition: background var(--t), color var(--t);
}
.i360-mobile-overlay__menu a:hover {
  background: var(--selected-bg);
  color: var(--accent);
}
body.i360-no-scroll { overflow: hidden; }

/* ════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════ */

.wp-block-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center;
  margin-top: 0;
}

.wp-block-button.i360-btn-primary .wp-block-button__link,
.i360-btn-primary .wp-block-button__link {
  background: var(--i360-ring) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: none !important;
  box-shadow: 0 0 24px rgba(74,107,255,.40), 0 8px 20px rgba(177,76,255,.25);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow var(--t), transform var(--dur-fast) var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}
.wp-block-button.i360-btn-primary .wp-block-button__link:hover {
  box-shadow: 0 0 32px rgba(74,107,255,.60), 0 10px 24px rgba(177,76,255,.35);
  transform: translateY(-1px);
}

.wp-block-button.i360-btn-solid .wp-block-button__link,
.i360-btn-solid .wp-block-button__link {
  background: var(--accent) !important;
  color: var(--accent-on) !important;
  -webkit-text-fill-color: var(--accent-on) !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  border: none !important;
  box-shadow: 0 8px 20px rgba(46,70,217,.28);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t);
  cursor: pointer;
}
.wp-block-button.i360-btn-solid .wp-block-button__link:hover { background: var(--accent-hover) !important; }

.wp-block-button.i360-btn-ghost .wp-block-button__link,
.i360-btn-ghost .wp-block-button__link {
  background: var(--bg-surface) !important;
  color: var(--fg-1) !important;
  -webkit-text-fill-color: var(--fg-1) !important;
  border: 1px solid var(--border-strong) !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t);
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.wp-block-button.i360-btn-ghost .wp-block-button__link:hover {
  background: var(--bg-raised) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
}

.wp-block-button.i360-btn-ghost-light .wp-block-button__link,
.i360-btn-ghost-light .wp-block-button__link {
  background: rgba(255,255,255,.08) !important;
  color: #F1F3FF !important;
  -webkit-text-fill-color: #F1F3FF !important;
  border: 1.5px solid rgba(255,255,255,.22) !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t);
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.wp-block-button.i360-btn-ghost-light .wp-block-button__link:hover {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.36) !important;
}
[data-theme="light"] .wp-block-button.i360-btn-ghost-light .wp-block-button__link {
  background: rgba(10,19,64,.04) !important;
  color: var(--fg-1) !important;
  -webkit-text-fill-color: var(--fg-1) !important;
  border-color: var(--border-strong) !important;
}

/* ════════════════════════════════════════════════════════
   HERO — NO base background. Body's radial glows already
   peak in this region. Hero only adds the spinning neon ring.
   ════════════════════════════════════════════════════════ */

.i360-hero {
  position: relative;
  background: transparent;
  color: #F1F3FF;
  margin-top: calc(-1 * var(--header-h));
  padding: clamp(140px, 16vw, 200px) clamp(20px, 4vw, 28px) clamp(80px, 9vw, 110px);
  overflow: hidden;
  isolation: isolate;
}

/* ── BIG OUTER ORBIT — slow neon ring (preserved from v6.1.4) ── */
.i360-hero::before {
  content: "";
  position: absolute;
  width: 720px; height: 720px;
  right: -240px; top: -160px;
  border-radius: 999px;
  background: conic-gradient(
    from 200deg,
    var(--i360-cyan-400),
    var(--i360-blue-500) 35%,
    var(--i360-magenta-500) 65%,
    var(--i360-pink-400) 85%,
    var(--i360-cyan-400)
  );
  opacity: .55;
  mask: radial-gradient(circle, transparent 56%, #000 58%, #000 60%, transparent 62%);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 58%, #000 60%, transparent 62%);
  animation: i360-spin 28s linear infinite, i360-fade-in 1s var(--ease-out) both;
  animation-delay: 0s, .2s;
  pointer-events: none;
  z-index: 0;
}
[data-theme="light"] .i360-hero::before { opacity: .42; }

/* ── INNER ORBIT — counter-rotating ring with 6 pulsing nodes.
   Cycle / neural-connection cue. Pure CSS, no markup change. ── */
.i360-hero::after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  right: -90px; top: 30px;
  border-radius: 999px;
  background:
    /* 6 orbital nodes (clock positions: 12, 2, 4, 6, 8, 10) */
    radial-gradient(circle 5px at 50% 0%,    rgba(43,230,224,.95) 0%, rgba(43,230,224,.40) 40%, transparent 100%),
    radial-gradient(circle 5px at 93% 25%,   rgba(74,107,255,.95) 0%, rgba(74,107,255,.40) 40%, transparent 100%),
    radial-gradient(circle 5px at 93% 75%,   rgba(177,76,255,.95) 0%, rgba(177,76,255,.40) 40%, transparent 100%),
    radial-gradient(circle 5px at 50% 100%,  rgba(255,95,168,.95) 0%, rgba(255,95,168,.40) 40%, transparent 100%),
    radial-gradient(circle 5px at 7% 75%,    rgba(74,107,255,.95) 0%, rgba(74,107,255,.40) 40%, transparent 100%),
    radial-gradient(circle 5px at 7% 25%,    rgba(43,230,224,.95) 0%, rgba(43,230,224,.40) 40%, transparent 100%),
    /* Faint inner ring stroke (the "neural" connection arc) */
    conic-gradient(from 30deg,
      transparent 0deg,
      rgba(43,230,224,.35) 60deg,
      transparent 120deg,
      rgba(74,107,255,.35) 180deg,
      transparent 240deg,
      rgba(177,76,255,.35) 300deg,
      transparent 360deg
    );
  /* Hollow ring shape — keep only the band where nodes + arc live */
  mask: radial-gradient(circle, transparent 0%, transparent 47%, #000 49%, #000 51%, transparent 53%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 0%, transparent 47%, #000 49%, #000 51%, transparent 53%, transparent 100%);
  opacity: .85;
  animation: i360-spin-rev 38s linear infinite, i360-pulse 4.5s ease-in-out infinite, i360-fade-in 1s var(--ease-out) both;
  animation-delay: 0s, .5s, .35s;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 6px rgba(74,107,255,.45));
}
[data-theme="light"] .i360-hero::after {
  opacity: .65;
  filter: drop-shadow(0 0 4px rgba(74,107,255,.30));
}

@keyframes i360-spin     { to { transform: rotate(360deg); } }
@keyframes i360-spin-rev { to { transform: rotate(-360deg); } }
@keyframes i360-pulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: .95; }
}
[data-theme="light"] .i360-hero::after {
  /* Lower-amplitude pulse on white so it doesn't read as flicker */
  animation: i360-spin-rev 38s linear infinite, i360-pulse-light 5s ease-in-out infinite, i360-fade-in 1s var(--ease-out) both;
  animation-delay: 0s, .5s, .35s;
}
@keyframes i360-pulse-light {
  0%, 100% { opacity: .50; }
  50%      { opacity: .75; }
}

.i360-hero > * { position: relative; z-index: 1; }

.i360-hero h1, .i360-hero .i360-hero-h1 {
  color: #F8F9FF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 6.8vw, 76px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 18px auto 18px;
  max-width: 880px;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
[data-theme="light"] .i360-hero h1,
[data-theme="light"] .i360-hero .i360-hero-h1 {
  color: var(--fg-1);
  text-shadow: 0 1px 8px rgba(255,255,255,.6);
}
.i360-hero p, .i360-hero .i360-lead, .i360-hero .i360-hero-sub {
  color: #DCE0FF;
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto 36px;
  text-wrap: pretty;
}
[data-theme="light"] .i360-hero p,
[data-theme="light"] .i360-hero .i360-lead,
[data-theme="light"] .i360-hero .i360-hero-sub { color: var(--fg-2); }
.i360-hero .i360-eyebrow,
.i360-hero .i360-eyebrow-light { color: var(--i360-cyan-400) !important; }
[data-theme="light"] .i360-hero .i360-eyebrow,
[data-theme="light"] .i360-hero .i360-eyebrow-light { color: var(--i360-blue-600) !important; }
.i360-hero-ctas, .i360-hero .wp-block-buttons {
  display: flex !important;
  gap: 14px !important;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0;
}

/* Voice cards */
.i360-hero-voices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 920px;
  margin: 72px auto 0;
  text-align: left;
  list-style: none;
  padding: 0;
}
.i360-hero-voice {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px 22px 22px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  position: relative;
}
[data-theme="light"] .i360-hero-voice {
  background: rgba(255,255,255,.85);
  border-color: var(--border-1);
  box-shadow: var(--shadow-1);
}
.i360-voice-avatar {
  width: 36px; height: 36px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font: 700 14px var(--font-display); color: #fff;
  box-shadow: 0 0 14px rgba(74,107,255,.35);
}
.i360-voice-avatar.is-1 { background: linear-gradient(135deg,#2BE6E0,#4A6BFF); }
.i360-voice-avatar.is-2 { background: linear-gradient(135deg,#4A6BFF,#B14CFF); }
.i360-voice-avatar.is-3 { background: linear-gradient(135deg,#B14CFF,#FF5FA8); }
.i360-voice-q {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.45;
  color: #F1F3FF;
  margin: 0;
}
[data-theme="light"] .i360-voice-q { color: var(--fg-1); }
.i360-voice-name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .04em;
  color: #8E94BE;
}
[data-theme="light"] .i360-voice-name { color: var(--fg-3); }
@media (max-width: 880px) {
  .i360-hero-voices { grid-template-columns: 1fr; margin-top: 48px; }
}

/* ════════════════════════════════════════════════════════
   FRONT-PAGE ENTRANCE ANIMATIONS
   ════════════════════════════════════════════════════════ */

@keyframes i360-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes i360-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.i360-hero .i360-eyebrow,
.i360-hero .i360-eyebrow-light,
.i360-hero h1,
.i360-hero .i360-hero-h1,
.i360-hero p,
.i360-hero .i360-hero-sub,
.i360-hero .i360-lead,
.i360-hero .wp-block-buttons,
.i360-hero-ctas {
  animation: i360-fade-up var(--dur-slow) var(--ease-out) both;
}
.i360-hero .i360-eyebrow,
.i360-hero .i360-eyebrow-light { animation-delay: .05s; }
.i360-hero h1,
.i360-hero .i360-hero-h1 { animation-delay: .15s; }
.i360-hero p,
.i360-hero .i360-hero-sub,
.i360-hero .i360-lead { animation-delay: .28s; }
.i360-hero .wp-block-buttons,
.i360-hero-ctas { animation-delay: .40s; }
.i360-hero-voice,
.i360-hero-voices > .wp-block-column {
  animation: i360-fade-up var(--dur-slow) var(--ease-out) both;
}
.i360-hero-voices > .i360-hero-voice:nth-child(1),
.i360-hero-voices > .wp-block-column:nth-child(1) { animation-delay: .55s; }
.i360-hero-voices > .i360-hero-voice:nth-child(2),
.i360-hero-voices > .wp-block-column:nth-child(2) { animation-delay: .65s; }
.i360-hero-voices > .i360-hero-voice:nth-child(3),
.i360-hero-voices > .wp-block-column:nth-child(3) { animation-delay: .75s; }

/* ════════════════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════════════════ */

.i360-card,
.wp-block-column.i360-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--shadow-2);
  transition: all var(--t);
  position: relative;
  overflow: hidden;
}
.i360-card:hover {
  box-shadow: var(--shadow-3);
  transform: translateY(-2px);
}
:root:not([data-theme="light"]) .i360-card,
:root:not([data-theme="light"]) .wp-block-column.i360-card {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-color: var(--border-strong);
}
[data-theme="light"] .i360-card,
[data-theme="light"] .wp-block-column.i360-card {
  background: #FFFFFF;
  border-color: var(--border-1);
}
.i360-card h1, .i360-card h2, .i360-card h3,
.i360-card h4, .i360-card h5 {
  color: var(--fg-1) !important;
  -webkit-text-fill-color: var(--fg-1) !important;
}
.i360-card p,
.wp-block-column.i360-card p { color: var(--fg-2) !important; }

/* Active card (Ciclo 2 / Activación) — neon halo in BOTH modes */
.i360-card--accent,
.wp-block-column.i360-card--accent {
  border-color: transparent !important;
  box-shadow:
    0 12px 32px rgba(74,107,255,.25),
    0 0 0 1.5px var(--i360-blue-500),
    var(--glow-blue);
}
.i360-card--accent::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 80%;
  background: radial-gradient(60% 60% at 50% 0%, rgba(74,107,255,.35), rgba(177,76,255,.15) 50%, transparent 80%);
  pointer-events: none;
}
[data-theme="light"] .i360-card--accent,
[data-theme="light"] .wp-block-column.i360-card--accent {
  background: #FFFFFF;
  /* PROPER GLOW HALO IN LIGHT MODE — audit fix */
  box-shadow:
    0 12px 32px rgba(74,107,255,.20),
    0 0 0 1.5px var(--i360-blue-500),
    0 0 28px rgba(74,107,255,.22),
    0 0 56px rgba(177,76,255,.16);
}
[data-theme="light"] .i360-card--accent::before {
  background: radial-gradient(60% 60% at 50% 0%, rgba(74,107,255,.16), rgba(177,76,255,.10) 50%, transparent 80%);
}
.i360-card--accent .i360-eyebrow { color: var(--i360-magenta-400); }
[data-theme="light"] .i360-card--accent .i360-eyebrow { color: var(--i360-magenta-500); }

.i360-card--glow {
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
    var(--i360-ring) border-box !important;
}

/* ════════════════════════════════════════════════════════
   PRICING — glassmorphism, both modes
   ════════════════════════════════════════════════════════ */

.i360-pricing-grid.wp-block-columns { gap: 22px !important; align-items: stretch; }
.i360-pricing {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 40px) clamp(24px, 3vw, 32px) clamp(24px, 3vw, 32px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-1);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  isolation: isolate;
}
.i360-pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(43,230,224,.10), rgba(74,107,255,.08) 50%, rgba(177,76,255,.10));
  opacity: .5;
  pointer-events: none;
  z-index: -1;
}
[data-theme="light"] .i360-pricing {
  background: rgba(255,255,255,.78);
  border-color: rgba(255,255,255,.95);
  box-shadow: 0 8px 28px rgba(10,19,64,.12), 0 1px 0 rgba(255,255,255,.9) inset;
}
[data-theme="light"] .i360-pricing::before {
  background: linear-gradient(135deg, rgba(43,230,224,.08), rgba(74,107,255,.06) 50%, rgba(177,76,255,.08));
  opacity: .8;
}
.i360-pricing:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
  border-color: var(--accent);
}
.i360-pricing--featured {
  border: 1px solid transparent !important;
  background:
    linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)) padding-box,
    var(--i360-ring) border-box !important;
  box-shadow:
    var(--shadow-3),
    0 0 32px rgba(74,107,255,.30),
    0 0 64px rgba(177,76,255,.18);
}
[data-theme="light"] .i360-pricing--featured {
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    var(--i360-ring) border-box !important;
  box-shadow:
    0 12px 36px rgba(10,19,64,.14),
    0 0 28px rgba(74,107,255,.18),
    0 0 56px rgba(177,76,255,.12);
}
.i360-pricing-tag {
  position: absolute;
  top: 14px; right: 14px;
  font: 600 10px var(--font-display);
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--i360-ring);
  color: #fff;
}
.i360-pricing-name {
  font: 600 14px var(--font-display);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: 8px;
}
.i360-pricing-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 56px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--fg-1);
  margin: 0;
}
.i360-pricing-price small {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-3);
  margin-left: 4px;
}
.i360-pricing-blurb {
  font: 400 14px/1.5 var(--font-body);
  color: var(--fg-2);
  margin: 12px 0 18px;
}
.i360-pricing-features {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.i360-pricing-features li {
  font: 400 14px/1.5 var(--font-body);
  color: var(--fg-2);
  padding-left: 24px;
  position: relative;
}
.i360-pricing-features li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--i360-ring);
  box-shadow: 0 0 8px rgba(74,107,255,.40);
}
.i360-pricing-cta { margin-top: auto; }

/* ════════════════════════════════════════════════════════
   STATS
   ════════════════════════════════════════════════════════ */

.i360-stat-row.wp-block-columns { gap: var(--space-4) !important; }
.i360-stat,
.wp-block-column.i360-stat {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.6vw, 28px);
  box-shadow: var(--shadow-1);
  text-align: left;
}
[data-theme="light"] .i360-stat,
[data-theme="light"] .wp-block-column.i360-stat { background: #FFFFFF; }
.i360-stat__n {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.6vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  background: var(--i360-ring);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  margin: 0 0 6px;
}
.i360-stat__l { font: 500 14px var(--font-body); color: var(--fg-3); margin: 0; }

/* ════════════════════════════════════════════════════════
   CTA / COMMUNITY
   ════════════════════════════════════════════════════════ */

.i360-cta-section {
  padding-block: clamp(72px, 9vw, 120px);
  padding-inline: var(--section-pad-x);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.i360-cta-section > * { position: relative; }
.i360-cta-section h2 { margin-bottom: 14px; }
.i360-cta-section .i360-lead { margin-inline: auto; margin-bottom: 28px; }

.i360-community {
  background: transparent;
  position: relative;
  overflow: hidden;
  margin-block: var(--space-12);
  padding-block: clamp(80px, 10vw, 110px);
  padding-inline: var(--section-pad-x);
}
.i360-community-inner {
  position: relative;
  max-width: 920px; margin: 0 auto;
  text-align: center;
}
.i360-community .i360-eyebrow,
.i360-community .i360-eyebrow-light { color: var(--i360-cyan-400) !important; }
[data-theme="light"] .i360-community .i360-eyebrow,
[data-theme="light"] .i360-community .i360-eyebrow-light { color: var(--i360-blue-600) !important; }
.i360-community-quote, .i360-community h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--fg-1);
  margin: 18px 0 28px;
  text-wrap: balance;
}
.i360-community-sig {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 30px;
  color: var(--i360-cyan-400);
}
[data-theme="light"] .i360-community-sig { color: var(--i360-magenta-500); }

.i360-card-row.wp-block-columns { gap: 22px !important; }

/* APP SHELL */
.i360-main.i360-app {
  padding-top: clamp(20px, 2.5vw, 32px);
  padding-bottom: clamp(48px, 6vw, 80px);
  padding-inline: var(--section-pad-x);
  max-width: var(--container);
  margin-inline: auto;
}
.i360-plugin-zone { margin-top: var(--space-6); }
.i360-plugin-zone > * + * { margin-top: var(--space-6); }

/* DASHBOARD / PORTAL — preserved from v6.1.3 */
.i360-dash {
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: calc(100vh - var(--header-h));
  background: var(--bg-page);
}
.i360-dash-side {
  background: var(--bg-page-2);
  border-right: 1px solid var(--border-1);
  padding: 22px 16px;
  display: flex; flex-direction: column;
  gap: var(--space-6);
  overflow-y: auto;
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
}
[data-theme="light"] .i360-dash-side { background: #FFFFFF; box-shadow: 1px 0 0 var(--border-1); }
.i360-dash-section-h {
  font: 600 11px var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-4);
  padding: 0 10px;
  margin-bottom: 8px;
}
.i360-dash-link {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  font: 500 14px var(--font-body);
  color: var(--fg-2);
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
  border: 1px solid transparent;
}
.i360-dash-link:hover { background: var(--selected-bg); color: var(--fg-1); }
.i360-dash-link.is-active {
  background: var(--i360-ring-active);
  color: #FFFFFF !important;
  border-color: transparent;
  box-shadow: var(--selected-glow);
}
[data-theme="light"] .i360-dash-link.is-active {
  background: var(--selected-bg);
  color: var(--selected-fg) !important;
  border-color: var(--selected-border);
}
.i360-dash-link svg { width: 18px; height: 18px; flex: 0 0 18px; }
.i360-dash-coach {
  margin-top: auto;
  padding: 14px;
  background: var(--i360-ring-soft);
  border: 1px solid var(--border-1);
  border-radius: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}
[data-theme="light"] .i360-dash-coach { background: var(--selected-bg); }
.i360-dash-coach-avatar {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--i360-ring);
  display: flex; align-items: center; justify-content: center;
  font: 700 14px var(--font-display);
  color: #fff;
  box-shadow: var(--glow-blue);
  flex: 0 0 40px;
}
.i360-dash-coach-name { font: 600 13px var(--font-body); color: var(--fg-1); }
.i360-dash-coach-role { font: 400 11px var(--font-body); color: var(--fg-3); margin-top: 2px; }
.i360-dash-main {
  padding: 32px clamp(20px, 3vw, 36px) 56px;
  position: relative;
}
.i360-dash-main::before {
  content: "";
  position: absolute;
  top: -120px; right: -160px;
  width: 480px; height: 480px;
  background: radial-gradient(circle at 50% 50%, rgba(74,107,255,.20), rgba(177,76,255,.08) 50%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
.i360-dash-main > * { position: relative; z-index: 1; }
.i360-dash-greet {
  padding: clamp(24px, 3vw, 32px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow-2);
}
[data-theme="light"] .i360-dash-greet { background: #FFFFFF; }
.i360-dash-greet::before {
  content: "";
  position: absolute;
  top: -60%; left: -20%;
  width: 600px; height: 400px;
  background: radial-gradient(closest-side, rgba(74,107,255,.32), rgba(177,76,255,.12) 50%, transparent 80%);
  pointer-events: none;
}
[data-theme="light"] .i360-dash-greet::before {
  background: radial-gradient(closest-side, rgba(74,107,255,.10), rgba(177,76,255,.06) 50%, transparent 80%);
}
.i360-dash-greet > * { position: relative; }
.i360-dash-greet h1 {
  font: 700 clamp(26px, 3.4vw, 36px) var(--font-display);
  letter-spacing: -.02em;
  margin: 8px 0 6px;
  color: var(--fg-1);
}
.i360-dash-greet p { color: var(--fg-2); font: 400 15px/1.55 var(--font-body); max-width: 520px; }
.i360-dash-cycles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.i360-dash-cycle { display: flex; flex-direction: column; gap: 8px; }
.i360-dash-cycle-track {
  height: 6px;
  border-radius: 999px;
  background: var(--border-1);
  overflow: hidden;
}
.i360-dash-cycle-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--i360-cyan-400), var(--i360-blue-500));
  box-shadow: 0 0 10px rgba(74,107,255,.40);
}
.i360-dash-cycle-fill.is-active {
  background: linear-gradient(90deg, var(--i360-blue-500), var(--i360-magenta-500));
  box-shadow: 0 0 10px rgba(177,76,255,.50);
}
.i360-dash-cycle-fill.is-future { background: var(--border-1); box-shadow: none; }
.i360-dash-cycle-meta {
  display: flex; justify-content: space-between; align-items: center;
  font: 600 11px var(--font-display);
  letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3);
}
.i360-dash-cycle-meta strong { color: var(--fg-1); font-weight: 700; }
.i360-dash-cycle.is-active .i360-dash-cycle-meta strong { color: var(--accent); }
.i360-dash-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.i360-dash-stat {
  padding: 18px;
  border-radius: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-1);
}
[data-theme="light"] .i360-dash-stat { background: #FFFFFF; }
.i360-dash-stat-l {
  display: flex; align-items: center; gap: 8px;
  font: 600 11px var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3);
  margin-bottom: 8px;
}
.i360-dash-stat-l svg { width: 14px; height: 14px; }
.i360-dash-stat-v { font: 700 28px var(--font-display); color: var(--fg-1); letter-spacing: -.01em; }
.i360-dash-stat-d { font: 500 12px var(--font-body); color: var(--accent); margin-top: 4px; }
.i360-dash-habit, .i360-dash-mission, .i360-dash-reserva {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-1);
  background: var(--bg-surface-2);
  margin-bottom: 10px;
  transition: background var(--dur-fast) var(--ease-out);
}
[data-theme="light"] .i360-dash-habit,
[data-theme="light"] .i360-dash-mission,
[data-theme="light"] .i360-dash-reserva { background: #FBFBFE; }
.i360-dash-habit:hover { background: var(--bg-surface); }
.i360-dash-habit-check {
  width: 24px; height: 24px;
  border-radius: 999px;
  border: 2px solid var(--border-strong);
  flex: 0 0 24px;
}
.i360-dash-habit.is-done .i360-dash-habit-check {
  background: linear-gradient(135deg, var(--i360-cyan-400), var(--i360-blue-500));
  border-color: transparent;
  box-shadow: 0 0 10px rgba(74,107,255,.40);
}
.i360-dash-habit-name { font: 500 14px var(--font-body); color: var(--fg-1); }
.i360-dash-habit-meta { font: 400 12px var(--font-body); color: var(--fg-3); margin-top: 2px; }
.i360-dash-habit.is-done .i360-dash-habit-name { color: var(--fg-3); text-decoration: line-through; }
.i360-dash-mission { align-items: flex-start; }
.i360-dash-mission-tag {
  font: 600 10px var(--font-display);
  letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(43,230,224,.14);
  color: var(--i360-cyan-400);
  flex: 0 0 auto;
}
.i360-dash-mission-tag.is-act { background: rgba(74,107,255,.18); color: #8DA0FF; }
.i360-dash-mission-tag.is-soc { background: rgba(177,76,255,.22); color: var(--i360-magenta-400); }
[data-theme="light"] .i360-dash-mission-tag       { background: rgba(43,230,224,.12); color: var(--i360-blue-600); }
[data-theme="light"] .i360-dash-mission-tag.is-act{ background: rgba(74,107,255,.10); color: var(--i360-blue-600); }
[data-theme="light"] .i360-dash-mission-tag.is-soc{ background: rgba(177,76,255,.10); color: var(--i360-magenta-500); }
.i360-dash-mission-name { font: 600 14px var(--font-body); color: var(--fg-1); margin-bottom: 4px; }
.i360-dash-mission-meta { font: 400 12px var(--font-body); color: var(--fg-3); }
.i360-dash-reserva-date {
  width: 56px;
  text-align: center;
  flex: 0 0 56px;
  padding: 8px 0;
  border-radius: 12px;
  background: var(--i360-ring-soft);
  border: 1px solid rgba(74,107,255,.25);
}
[data-theme="light"] .i360-dash-reserva-date { background: var(--selected-bg); }
.i360-dash-reserva-d { font: 700 18px var(--font-display); color: var(--fg-1); line-height: 1; }
.i360-dash-reserva-m { font: 600 10px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-top: 2px; }
.i360-dash-reserva-name { font: 600 14px var(--font-body); color: var(--fg-1); }
.i360-dash-reserva-meta { font: 400 12px var(--font-body); color: var(--fg-3); margin-top: 2px; }

/* PLAYLISTS */
.i360-playlist-grid.wp-block-columns { gap: var(--space-6) !important; }
.i360-playlist {
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
  transition: all var(--t);
}
[data-theme="light"] .i360-playlist { background: #FFFFFF; }
.i360-playlist:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
  border-color: var(--accent);
}
.i360-playlist-tag {
  display: inline-block;
  font: 600 11px var(--font-display);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  background: rgba(43,230,224,.14);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
[data-theme="light"] .i360-playlist-tag { background: rgba(43,230,224,.12); color: var(--i360-blue-600); }

/* FOOTER */
.i360-footer {
  border-top: 1px solid var(--border-1);
  padding-block: clamp(56px, 7vw, 80px) 36px;
  padding-inline: var(--section-pad-x);
  background: var(--bg-page-2);
  color: var(--fg-2);
  margin-top: var(--space-12);
}
.i360-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 48px);
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
  max-width: var(--container);
  margin-inline: auto;
}
.i360-footer__brand { flex: 0 0 280px; }
.i360-footer__desc { color: var(--fg-3); margin-top: 10px; font-size: 15px; }
.i360-footer__col { flex: 0 0 160px; }
.i360-footer__col h6 {
  font: 600 12px var(--font-display);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-1);
  margin-bottom: 14px;
}
.i360-footer__nav.wp-block-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.i360-footer__nav li { margin: 0 !important; }
.i360-footer__nav a, .i360-footer__nav li a {
  display: block;
  font: 400 14px var(--font-body);
  color: var(--fg-3) !important;
  padding: 6px 0;
  transition: color var(--t);
}
.i360-footer__nav a:hover { color: var(--fg-1) !important; }
.i360-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--border-1);
  padding-top: 24px;
  max-width: var(--container);
  margin-inline: auto;
}
.i360-footer__bottom p { margin: 0; color: var(--fg-3); font-size: 13px; }
.i360-footer--app { padding-block: 24px; text-align: center; font-size: 13px; color: var(--fg-3); }

/* 404 / posts / forms / community-nav / accessibility */
.i360-404 {
  padding-block: clamp(80px, 12vw, 160px);
  padding-inline: var(--section-pad-x);
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.i360-404__num {
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 160px);
  font-weight: 700;
  line-height: 1;
  background: var(--i360-ring);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  margin: 0 0 16px;
  letter-spacing: -.04em;
}
.i360-post-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--t);
  box-shadow: var(--shadow-1);
}
[data-theme="light"] .i360-post-card { background: #FFFFFF; }
.i360-post-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
input, textarea, select {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  font: 400 15px/1.5 var(--font-body);
  padding: 12px 16px;
  width: 100%;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  outline: none;
}
[data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select { background: #FFFFFF; }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: var(--focus);
}
input::placeholder, textarea::placeholder { color: var(--fg-4); }
.i360-community-nav {
  padding-block: clamp(32px, 5vw, 56px);
  padding-inline: var(--section-pad-x);
  text-align: center;
  border-bottom: 1px solid var(--border-1);
}
.i360-community-nav .wp-block-group {
  max-width: var(--container);
  margin-inline: auto;
}
.skip-link { position: absolute; left: -999px; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 9999;
  width: auto; height: auto;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--accent-on);
  border-radius: 8px;
  font-weight: 700;
}

.wp-block-columns { gap: var(--space-6); }
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
  display: flex;
  align-items: center;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-page-2); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* RESPONSIVE */
@media (max-width: 1100px) {
  .i360-footer__grid { gap: 28px; }
  .i360-dash-stat-row { grid-template-columns: repeat(2, 1fr); }
  .i360-pricing-grid.wp-block-columns { flex-wrap: wrap; }
}
@media (max-width: 880px) {
  :root {
    --section-pad-y: 56px;
    --header-h: 64px;
  }
  .i360-card-row.wp-block-columns,
  .i360-stat-row.wp-block-columns,
  .i360-pricing-grid.wp-block-columns {
    flex-direction: column !important;
    gap: 14px !important;
  }
  .i360-footer__grid { flex-direction: column; gap: 32px; }
  .i360-footer__brand, .i360-footer__col { flex: none; width: 100%; }
  .i360-dash { grid-template-columns: 1fr; }
  .i360-dash-side {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-1);
  }
  .i360-dash-cycles { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .i360-hero { padding-block: 96px 56px; }
  .i360-hero::before { width: 480px; height: 480px; right: -200px; top: -120px; }
  .i360-cta-section { padding-block: 56px; }
  .wp-block-buttons { flex-direction: column !important; align-items: stretch !important; }
  .wp-block-button { width: 100%; }
  .wp-block-button .wp-block-button__link { width: 100%; text-align: center; }
  .i360-dash-stat-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .i360-hero::before, .i360-hero::after { animation: none; }
  .i360-card:hover, .i360-post-card:hover, .i360-pricing:hover,
  .wp-block-button.i360-btn-primary .wp-block-button__link:hover { transform: none; }
}

body, .i360-header, .i360-main, .i360-footer { overflow-x: hidden; }


/* ════════════════════════════════════════════════════════
   v6.1.6 MANUAL FIX — Visual System Stabilizer
   Author: Alba Carmona, Ed.D. (c)
   Implemented by ChatGPT from Alba's explicit requirements.

   Scope:
   - Light mode must read white, not lilac.
   - Hero glow blends into page background in both modes.
   - Hero ring/cycle animation should not cut across the text.
   - Brand gradient stays cyan/electric blue/violet/magenta.
   - Desktop nav stays white/translucent like the promised preview.
   - Mobile uses same color system as desktop; only layout changes.
   - Ciclo 2 / Activación keeps a glow in light mode.
   ════════════════════════════════════════════════════════ */

/* Single source of truth for the brand gradient */
:root {
  --i360-ring: linear-gradient(120deg,#2BE6E0 0%,#4A6BFF 42%,#8B5CF6 66%,#B14CFF 82%,#FF5FA8 100%) !important;
  --i360-ring-soft: linear-gradient(120deg,rgba(43,230,224,.14) 0%,rgba(74,107,255,.14) 42%,rgba(139,92,246,.13) 66%,rgba(177,76,255,.13) 82%,rgba(255,95,168,.10) 100%) !important;
}

/* LIGHT MODE: white page first. Color is inside hero, not washing the full page. */
html[data-theme="light"],
html[data-theme="light"] body,
[data-theme="light"] body {
  background-color: #FFFFFF !important;
  background-image: none !important;
  color-scheme: light !important;
}

/* DARK MODE: stable deep canvas. No random mobile color changes. */
html:not([data-theme="light"]),
html:not([data-theme="light"]) body {
  background-color: #05060D !important;
}

/* Brand gradient: same in both modes, no cyan removal. */
.i360-grad,
.i360-gradient-text,
.i360-404__num,
.i360-stat__n,
[data-theme="light"] .i360-grad,
[data-theme="dark"] .i360-grad,
[data-theme="light"] .i360-gradient-text,
[data-theme="dark"] .i360-gradient-text {
  background: var(--i360-ring) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: saturate(1.12) !important;
}

/* Desktop nav: white/translucent pill in both modes. */
@media (min-width: 881px) {
  .i360-header__inner {
    background: rgba(255,255,255,.90) !important;
    color: #121938 !important;
    border-color: rgba(255,255,255,.72) !important;
    box-shadow: 0 14px 38px rgba(28,38,98,.16) !important;
  }

  .i360-header__inner a,
  .i360-header__inner .wp-block-navigation-item__content,
  .i360-header__inner .i360-logo,
  .i360-header__inner .i360-logo a,
  .i360-header__inner .wp-block-site-title,
  .i360-header__inner .wp-block-site-title a {
    color: #121938 !important;
    -webkit-text-fill-color: #121938 !important;
  }

  .i360-header__inner .wp-block-navigation-item__content,
  .i360-header__inner .i360-nav a,
  .i360-header__inner .i360-nav-login,
  .i360-header__inner .i360-nav-login a {
    color: #4A516F !important;
    -webkit-text-fill-color: #4A516F !important;
  }

  .i360-header__inner .wp-block-navigation-item__content:hover,
  .i360-header__inner .i360-nav a:hover,
  .i360-header__inner .i360-nav-login a:hover {
    color: #2E46D9 !important;
    -webkit-text-fill-color: #2E46D9 !important;
  }
}

/* Hero: keep the whole hero as an integrated atmospheric area, not a hard color box. */
.i360-hero {
  overflow: visible !important;
  background-color: transparent !important;
  isolation: isolate !important;
}

/* Dark hero field blends into dark page. */
html:not([data-theme="light"]) .i360-hero {
  color: #F1F3FF !important;
  background-image:
    linear-gradient(to bottom, rgba(5,6,13,0) 0%, rgba(7,16,57,.50) 16%, rgba(7,16,57,.50) 82%, rgba(5,6,13,0) 100%),
    radial-gradient(ellipse 55% 42% at 50% 32%, rgba(74,107,255,.28) 0%, rgba(74,107,255,.13) 38%, transparent 72%),
    radial-gradient(ellipse 42% 34% at 78% 34%, rgba(177,76,255,.20) 0%, rgba(177,76,255,.10) 40%, transparent 74%),
    radial-gradient(ellipse 34% 28% at 20% 42%, rgba(43,230,224,.12) 0%, rgba(43,230,224,.05) 45%, transparent 76%) !important;
}

/* Light hero field blends into white page. */
[data-theme="light"] .i360-hero {
  color: var(--fg-1) !important;
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.88) 16%, rgba(255,255,255,.90) 82%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 54% 40% at 50% 32%, rgba(74,107,255,.105) 0%, rgba(74,107,255,.045) 38%, transparent 72%),
    radial-gradient(ellipse 42% 34% at 78% 34%, rgba(177,76,255,.085) 0%, rgba(177,76,255,.035) 42%, transparent 74%),
    radial-gradient(ellipse 32% 26% at 20% 42%, rgba(43,230,224,.070) 0%, rgba(43,230,224,.025) 45%, transparent 76%) !important;
}

/* Hero text uses mode-appropriate tokens. */
[data-theme="light"] .i360-hero h1,
[data-theme="light"] .i360-hero .i360-hero-h1 {
  color: #10142F !important;
  text-shadow: none !important;
}

html:not([data-theme="light"]) .i360-hero h1,
html:not([data-theme="light"]) .i360-hero .i360-hero-h1 {
  color: #F8F9FF !important;
  text-shadow: 0 2px 24px rgba(0,0,0,.35) !important;
}

[data-theme="light"] .i360-hero p,
[data-theme="light"] .i360-hero .i360-lead,
[data-theme="light"] .i360-hero .i360-hero-sub {
  color: #4A516F !important;
}

html:not([data-theme="light"]) .i360-hero p,
html:not([data-theme="light"]) .i360-hero .i360-lead,
html:not([data-theme="light"]) .i360-hero .i360-hero-sub {
  color: #DCE0FF !important;
}

/* Hero rings: keep cycle/neural motion, but do not cut through headline. */
.i360-hero::before {
  width: clamp(360px, 44vw, 620px) !important;
  height: clamp(360px, 44vw, 620px) !important;
  right: clamp(18px, 6vw, 110px) !important;
  top: clamp(90px, 14vw, 145px) !important;
  opacity: .34 !important;
  z-index: 0 !important;
  filter: none !important;
}

.i360-hero::after {
  width: clamp(240px, 30vw, 420px) !important;
  height: clamp(240px, 30vw, 420px) !important;
  right: clamp(70px, 12vw, 190px) !important;
  top: clamp(150px, 18vw, 230px) !important;
  opacity: .52 !important;
  z-index: 0 !important;
  filter: drop-shadow(0 0 5px rgba(74,107,255,.22)) !important;
}

[data-theme="light"] .i360-hero::before { opacity: .22 !important; }
[data-theme="light"] .i360-hero::after  { opacity: .34 !important; }

/* Keep text/cards above the atmosphere. */
.i360-hero > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Mobile: keep colors consistent with desktop; change only scale and layout. */
@media (max-width: 880px) {
  html[data-theme="light"] body,
  [data-theme="light"] body {
    background: #FFFFFF !important;
  }

  html:not([data-theme="light"]) body {
    background: #05060D !important;
  }

  .i360-hero {
    padding-top: clamp(118px, 26vw, 150px) !important;
    padding-bottom: clamp(64px, 15vw, 86px) !important;
    overflow: visible !important;
  }

  [data-theme="light"] .i360-hero {
    background-image:
      linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.94) 16%, rgba(255,255,255,.96) 84%, rgba(255,255,255,0) 100%),
      radial-gradient(ellipse 72% 30% at 50% 32%, rgba(74,107,255,.08) 0%, rgba(74,107,255,.035) 42%, transparent 74%),
      radial-gradient(ellipse 52% 24% at 82% 46%, rgba(177,76,255,.06) 0%, transparent 72%),
      radial-gradient(ellipse 42% 20% at 16% 44%, rgba(43,230,224,.05) 0%, transparent 72%) !important;
  }

  html:not([data-theme="light"]) .i360-hero {
    background-image:
      linear-gradient(to bottom, rgba(5,6,13,0) 0%, rgba(7,16,57,.56) 16%, rgba(7,16,57,.58) 84%, rgba(5,6,13,0) 100%),
      radial-gradient(ellipse 72% 30% at 50% 32%, rgba(74,107,255,.20) 0%, rgba(74,107,255,.08) 42%, transparent 74%),
      radial-gradient(ellipse 52% 24% at 82% 46%, rgba(177,76,255,.12) 0%, transparent 72%),
      radial-gradient(ellipse 42% 20% at 16% 44%, rgba(43,230,224,.08) 0%, transparent 72%) !important;
  }

  .i360-hero::before {
    width: 265px !important;
    height: 265px !important;
    right: 8px !important;
    top: clamp(255px, 48vw, 340px) !important;
    opacity: .18 !important;
  }

  .i360-hero::after {
    width: 168px !important;
    height: 168px !important;
    right: 72px !important;
    top: clamp(300px, 58vw, 390px) !important;
    opacity: .26 !important;
  }

  .i360-hero h1,
  .i360-hero .i360-hero-h1 {
    font-size: clamp(39px, 12.2vw, 58px) !important;
    line-height: 1.03 !important;
    max-width: 95vw !important;
  }

  .i360-header__inner {
    background: rgba(255,255,255,.91) !important;
    border-color: rgba(255,255,255,.78) !important;
    box-shadow: 0 10px 26px rgba(28,38,98,.13) !important;
  }

  .i360-header__inner,
  .i360-header__inner a,
  .i360-header__inner .i360-logo,
  .i360-header__inner .wp-block-site-title {
    color: #121938 !important;
    -webkit-text-fill-color: #121938 !important;
  }
}

/* Ciclo 2 / Activación: glow in light mode must be as special as dark mode. */
[data-theme="light"] .i360-card--accent,
[data-theme="light"] .wp-block-column.i360-card--accent,
[data-theme="light"] .i360-cycle-card.is-active,
[data-theme="light"] .i360-method-card.is-active {
  background: #FFFFFF !important;
  border-color: rgba(74,107,255,.28) !important;
  box-shadow:
    0 0 28px rgba(43,230,224,.12),
    0 0 56px rgba(74,107,255,.16),
    0 0 76px rgba(177,76,255,.12),
    0 18px 60px rgba(40,50,110,.12) !important;
}

/* Consistent gradient buttons across pages. */
.i360-btn-gradient,
.i360-btn-primary,
.wp-block-button.i360-btn-primary .wp-block-button__link,
.i360-btn-primary .wp-block-button__link,
.wp-block-button .wp-block-button__link.has-i-360-gradient-background,
.wp-block-button .wp-block-button__link[class*="gradient"] {
  background: var(--i360-ring) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: 0 0 24px rgba(74,107,255,.34), 0 12px 24px rgba(177,76,255,.22) !important;
}

/* Mobile menu chrome should remain visible and organized. */
.i360-mobile-fab,
.i360-theme-toggle--floating {
  background: rgba(255,255,255,.92) !important;
  color: #121938 !important;
  border-color: rgba(255,255,255,.70) !important;
  box-shadow: 0 10px 26px rgba(28,38,98,.16) !important;
}

[data-theme="dark"] .i360-mobile-overlay,
html:not([data-theme="light"]) .i360-mobile-overlay {
  background-color: rgba(5,6,13,.96) !important;
}

[data-theme="light"] .i360-mobile-overlay {
  background-color: rgba(255,255,255,.96) !important;
}

/* ════════════════════════════════════════════════════════
   v6.1.7 UX + SEO ADDITIONS
   New patterns: coach-bio, faq, guarantee-banner
   New UX: sticky mobile CTA, FAQ accordion
   ════════════════════════════════════════════════════════ */

/* ── COACH BIO ─────────────────────────────────────────── */
.i360-coach-bio__grid {
  gap: var(--space-16) !important;
  align-items: center;
}
.i360-coach-bio__photo {
  width: 100%;
  border-radius: var(--radius-2xl);
  overflow: hidden;
}
.i360-coach-bio__photo img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius-2xl);
  display: block;
}
.i360-coach-bio__creds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
  justify-content: center;
}
.i360-cred-pill {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--fg-2) !important;
  background: var(--bg-surface) !important;
  margin: 0 !important;
}
.i360-coach-bio__tagline {
  font-size: 15px !important;
  color: var(--fg-3) !important;
  margin-bottom: var(--space-6) !important;
  font-weight: 500 !important;
}
@media (max-width: 760px) {
  .i360-coach-bio__grid { flex-direction: column !important; }
  .i360-coach-bio__photo-col,
  .i360-coach-bio__text-col { flex-basis: 100% !important; width: 100% !important; }
  .i360-coach-bio__photo img { height: 300px; }
}

/* ── FAQ ACCORDION ─────────────────────────────────────── */
.i360-faq {
  max-width: 760px;
  margin-inline: auto;
}
.i360-faq__item {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-3);
  background: var(--bg-surface);
  transition: border-color var(--t), box-shadow var(--t);
  cursor: pointer;
}
.i360-faq__item[open] {
  border-color: var(--i360-blue-500);
  box-shadow: var(--shadow-2);
}
.i360-faq__item summary {
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: var(--fg-1);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.i360-faq__item summary::-webkit-details-marker { display: none; }
.i360-faq__item summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform var(--t);
}
.i360-faq__item[open] summary::after {
  transform: rotate(45deg);
}
.i360-faq__item p {
  margin-top: var(--space-4) !important;
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 0 !important;
}
[data-theme="light"] .i360-faq__item {
  background: #FFFFFF;
  border-color: var(--border-2);
}
[data-theme="light"] .i360-faq__item[open] {
  border-color: var(--i360-blue-600);
}

/* ── GUARANTEE BANNER ──────────────────────────────────── */
.i360-guarantee__card {
  text-align: center;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px) !important;
}
.i360-guarantee__badge {
  font-size: 48px !important;
  margin-bottom: var(--space-4) !important;
  line-height: 1 !important;
}
.i360-guarantee__tagline {
  font-size: 18px !important;
  color: var(--fg-2) !important;
  margin-bottom: var(--space-6) !important;
}
.i360-guarantee__pillars {
  margin-top: var(--space-10) !important;
  margin-bottom: var(--space-10) !important;
  gap: var(--space-4) !important;
}
.i360-guarantee__pillar-icon {
  font-size: 22px !important;
  color: var(--i360-cyan-400) !important;
  font-weight: 700 !important;
  margin-bottom: var(--space-2) !important;
}
.i360-guarantee__pillar-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--fg-2) !important;
  margin: 0 !important;
}
@media (max-width: 600px) {
  .i360-guarantee__pillars { flex-wrap: wrap !important; }
  .i360-guarantee__pillar { flex-basis: calc(50% - 8px) !important; }
}

/* ── STICKY MOBILE CTA ─────────────────────────────────── */
/*
  Usage: Add <div class="i360-sticky-cta"> anywhere in footer.html or via
  wp_footer hook. It auto-hides when the hero CTA is visible (JS handles).
  Pure CSS fallback: always visible on mobile when scrolled past 400px.
*/
.i360-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--bg-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border-top: 1px solid var(--border-1);
  box-shadow: 0 -8px 32px rgba(0,0,0,.28);
}
.i360-sticky-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 480px;
  margin-inline: auto;
}
.i360-sticky-cta__text {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
  line-height: 1.3;
}
.i360-sticky-cta__text small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--fg-3);
}
.i360-sticky-cta__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: var(--i360-ring);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 20px rgba(74,107,255,.40);
  transition: opacity var(--t), transform var(--t);
}
.i360-sticky-cta__btn:hover { opacity: .9; }
.i360-sticky-cta__btn:active { transform: scale(.97); }
@media (max-width: 880px) {
  .i360-sticky-cta { display: block; }
}
/* Hide sticky CTA when user is near/at top (hero visible) */
body.i360-hero-visible .i360-sticky-cta { display: none !important; }