/* ════════════════════════════════════════════════════════════════════════════
 * TLG · FUTURISTA SYSTEM
 * Réplica directa del feel Sedaiio:
 *   · Glassmorphism (backdrop-filter + bordes finos + glow)
 *   · Capas 3D con depth shadows
 *   · Animaciones SVG rotantes
 *   · Mouse-reactive parallax
 *   · Tipografía con gradient text fill
 *   · Glow neón en CTAs
 *   · Mesh gradient animado que respira
 *   · Float-Y infinitos en elementos clave
 * ════════════════════════════════════════════════════════════════════════════ */


/* ═══ 1. HERO REDESIGN — 3D capas + glassmorphism ═════════════════════════ */

#hero {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(at 18% 24%, rgba(201,169,110,.12) 0px, transparent 50%),
    radial-gradient(at 82% 70%, rgba(123,207,207,.08) 0px, transparent 50%),
    radial-gradient(at 50% 50%, rgba(26,46,66,.4) 0px, transparent 60%),
    linear-gradient(135deg, #0E0D0B 0%, #14202F 65%, #0E0D0B 100%);
  background-size: 200% 200%;
  animation: futurMesh 24s ease-in-out infinite alternate;
  overflow: hidden;
  isolation: isolate;
}
@keyframes futurMesh {
  0%   { background-position: 0% 0%, 100% 100%, 0 0, 0 0; }
  100% { background-position: 30% 20%, 70% 80%, 0 0, 0 0; }
}

/* Capa 1: Orbs flotantes — feel Sedaiio */
#hero::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle 280px at 20% 35%, rgba(201,169,110,.16), transparent 60%),
    radial-gradient(circle 360px at 78% 65%, rgba(123,207,207,.10), transparent 60%),
    radial-gradient(circle 200px at 65% 25%, rgba(201,169,110,.08), transparent 60%);
  animation: orbFloat 18s ease-in-out infinite alternate;
}
@keyframes orbFloat {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(20px, -30px) scale(1.05); }
  100% { transform: translate(-15px, 20px) scale(.98); }
}

/* Capa 2: SVG biomarker ring rotando (decorativo de fondo) */
#hero::after {
  content: '';
  position: absolute;
  right: -180px; top: 50%;
  transform: translateY(-50%);
  width: 700px; height: 700px;
  z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(circle at center, transparent 38%, rgba(201,169,110,.12) 38.5%, rgba(201,169,110,.12) 39%, transparent 39.5%),
    radial-gradient(circle at center, transparent 48%, rgba(201,169,110,.08) 48.5%, rgba(201,169,110,.08) 49%, transparent 49.5%),
    radial-gradient(circle at center, transparent 58%, rgba(123,207,207,.08) 58.5%, rgba(123,207,207,.08) 59%, transparent 59.5%);
  animation: futurSpin 80s linear infinite;
  filter: blur(.5px);
}
@keyframes futurSpin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

#hero > * { position: relative; z-index: 2; }

/* Hero text con gradient fill (Sedaiio signature) */
#hero .hero-left h1 {
  background: linear-gradient(180deg, #F5F1EB 0%, #F5F1EB 55%, rgba(245,241,235,.65) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
#hero .hero-left h1 em {
  background: linear-gradient(180deg, #d4b878 0%, #C9A96E 60%, #a98852 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Trust badges como glass cards flotantes (lado derecho del hero) */
#hero .hero-left > div[style*="border-top:1px solid rgba(201,169,110"] {
  background: rgba(245,241,235,.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(201,169,110,.18);
  border-radius: 12px;
  padding: 24px 28px !important;
  box-shadow:
    0 12px 40px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(245,241,235,.06);
  margin-top: 40px !important;
  border-top: 1px solid rgba(201,169,110,.18) !important;
}


/* ═══ 2. GLASSMORPHISM UTILITY ════════════════════════════════════════════ */

.glass {
  background: rgba(245,241,235,.04);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(201,169,110,.16);
  border-radius: 14px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(245,241,235,.06);
}

.glass-dark {
  background: rgba(14,13,11,.6);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(201,169,110,.2);
  border-radius: 14px;
  box-shadow: 0 24px 72px rgba(0,0,0,.5);
}


/* ═══ 3. GLOW NEÓN — botones y elementos clave ════════════════════════════ */

.btn-main, .btn-primary, .nav-pill {
  position: relative;
  box-shadow:
    0 0 0 0 rgba(201,169,110,.6),
    0 12px 32px rgba(201,169,110,.15) !important;
}
.btn-main::after, .btn-primary::after, .nav-pill::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(201,169,110,.5), transparent 50%, rgba(123,207,207,.3));
  z-index: -1;
  opacity: 0;
  transition: opacity .35s ease;
}
.btn-main:hover, .btn-primary:hover, .nav-pill:hover {
  box-shadow:
    0 0 28px rgba(201,169,110,.4),
    0 16px 40px rgba(201,169,110,.22) !important;
}
.btn-main:hover::after, .btn-primary:hover::after, .nav-pill:hover::after { opacity: 1; }


/* ═══ 4. CARDS con depth 3D + glow on hover ═══════════════════════════════ */

.medico-card, .pkg, .pkg-card, .testi, .hud-card,
article.hud, .proto-step, .ai-btn, .dif-card {
  background: rgba(245,241,235,.025) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(201,169,110,.14) !important;
  border-radius: 12px !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(245,241,235,.04) !important;
  position: relative;
  overflow: hidden;
}
.medico-card::before, .pkg-card::before, .testi::before, .hud-card::before,
article.hud::before, .proto-step::before, .ai-btn::before, .dif-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(201,169,110,.06), transparent 70%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.medico-card:hover::before, .pkg-card:hover::before, .testi:hover::before,
.hud-card:hover::before, article.hud:hover::before, .proto-step:hover::before,
.ai-btn:hover::before, .dif-card:hover::before { opacity: 1; }

.pkg.featured, .pkg-card.featured {
  background: linear-gradient(135deg, rgba(201,169,110,.08), rgba(201,169,110,.02)) !important;
  border-color: rgba(201,169,110,.4) !important;
  box-shadow:
    0 0 32px rgba(201,169,110,.18),
    0 16px 48px rgba(0,0,0,.3) !important;
}


/* ═══ 5. FLOATING ANIMATION — elementos clave que respiran ════════════════ */

.float-y {
  animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.float-y-slow {
  animation: floatY 8s ease-in-out infinite;
  animation-delay: -2s;
}


/* ═══ 6. TYPOGRAPHY con gradient fill (Sedaiio signature) ═════════════════ */

.gradient-text {
  background: linear-gradient(180deg, #F5F1EB 0%, #F5F1EB 55%, rgba(245,241,235,.6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.gradient-text-gold {
  background: linear-gradient(135deg, #e6c989 0%, #C9A96E 50%, #8a6e3a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
section h2, .sedai-h2 {
  background: linear-gradient(180deg, #F5F1EB 0%, #F5F1EB 50%, rgba(245,241,235,.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
section h2 em, .sedai-h2 em {
  background: linear-gradient(135deg, #e6c989 0%, #C9A96E 50%, #8a6e3a 100%) !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}


/* ═══ 7. METRIC STRIP como glass cards ════════════════════════════════════ */

section.reveal[style*="border-top:1px solid var(--borde);border-bottom"] > div {
  display: grid !important;
  gap: 24px !important;
}
section.reveal[style*="border-top:1px solid var(--borde);border-bottom"] > div > div {
  background: rgba(245,241,235,.025) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(201,169,110,.12) !important;
  border-radius: 12px !important;
  padding: 36px 28px !important;
  border-right: 1px solid rgba(201,169,110,.12) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(245,241,235,.04) !important;
  transition: transform .4s ease, border-color .4s ease !important;
}
section.reveal[style*="border-top:1px solid var(--borde);border-bottom"] > div > div:hover {
  transform: translateY(-4px);
  border-color: rgba(201,169,110,.4) !important;
}


/* ═══ 8. PROTOCOL STEPS — Glass futuristic ════════════════════════════════ */

.proto-step {
  position: relative;
  overflow: hidden;
}
.proto-step::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle at top right, rgba(201,169,110,.08), transparent 70%);
  pointer-events: none;
}


/* ═══ 9. SVG BIOMARKER RING (animado, decorativo) ═════════════════════════ */

.biomarker-ring {
  width: 280px; height: 280px;
  position: relative;
  margin: 0 auto;
}
.biomarker-ring svg { width: 100%; height: 100%; }
.biomarker-ring .br-track {
  stroke: rgba(201,169,110,.15);
  stroke-width: 1;
  fill: none;
}
.biomarker-ring .br-progress {
  stroke: var(--oro);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(201,169,110,.5));
  transform-origin: center;
  animation: brRotate 12s linear infinite;
}
.biomarker-ring .br-progress-2 {
  stroke: rgba(123,207,207,.6);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  animation: brRotate 16s linear infinite reverse;
}
@keyframes brRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ═══ 10. CTA FINAL Pionero — Glow épico ══════════════════════════════════ */

#cta {
  position: relative;
}
#cta::before {
  background:
    radial-gradient(at 25% 20%, rgba(201,169,110,.22) 0px, transparent 50%),
    radial-gradient(at 75% 80%, rgba(26,46,66,.6) 0px, transparent 50%),
    linear-gradient(135deg, var(--tinta) 0%, #1A2E42 100%);
  animation: futurMesh 26s ease-in-out infinite alternate;
}
#cta h2 {
  text-shadow: 0 0 32px rgba(201,169,110,.25);
}


/* ═══ 11. AI INTEGRATION BTNS con glass + glow ════════════════════════════ */

.ai-btn {
  background: rgba(245,241,235,.03) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(201,169,110,.18) !important;
  border-radius: 14px !important;
  position: relative;
  overflow: hidden;
}
.ai-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(201,169,110,.1), transparent);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.ai-btn:hover {
  border-color: rgba(201,169,110,.6) !important;
  box-shadow: 0 0 24px rgba(201,169,110,.2), 0 16px 36px rgba(0,0,0,.3) !important;
}
.ai-btn:hover::after { opacity: 1; }
.ai-btn-icon {
  text-shadow: 0 0 12px rgba(201,169,110,.4);
}


/* ═══ 12. SCROLL CUE futurista ═══════════════════════════════════════════ */

.scroll-cue {
  background: rgba(14,13,11,.6) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(201,169,110,.18);
  border-radius: 999px !important;
  padding: 8px 16px !important;
  bottom: 32px !important;
}


/* ═══ 13. MARQUEE más respirable ══════════════════════════════════════════ */

.tlg-marquee {
  background: rgba(14,13,11,.6) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(201,169,110,.2) !important;
  border-bottom: 1px solid rgba(201,169,110,.2) !important;
}


/* ═══ 14. ANIMATIONS GLOBALES ═════════════════════════════════════════════ */

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,169,110,.4); }
  50%      { box-shadow: 0 0 32px 8px rgba(201,169,110,.2); }
}

.pulse-glow { animation: pulseGlow 3s ease-in-out infinite; }


/* ═══ 15. MOBILE — Mantener feel sin matar performance ═══════════════════ */

@media (max-width: 900px) {
  #hero::after { display: none; }
  .glass, .glass-dark { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .medico-card, .pkg, .pkg-card, .testi, .hud-card,
  article.hud, .proto-step, .ai-btn, .dif-card {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  section.reveal[style*="border-top:1px solid var(--borde);border-bottom"] > div {
    grid-template-columns: 1fr !important;
  }
}


/* ═══ 16. SECCIÓN AUTORIDAD CIENTÍFICA — Glass quotes ═════════════════════ */

section.reveal[style*="border-top:1px solid var(--borde)"][style*="padding:120px 56px"] blockquote {
  background: rgba(245,241,235,.03) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(201,169,110,.16) !important;
  border-left: 2px solid var(--oro) !important;
  border-radius: 10px !important;
  position: relative;
  overflow: hidden;
}
section.reveal[style*="border-top:1px solid var(--borde)"][style*="padding:120px 56px"] blockquote::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(201,169,110,.08), transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
section.reveal[style*="border-top:1px solid var(--borde)"][style*="padding:120px 56px"] blockquote:hover::after { opacity: 1; }


/* ═══ 17. COMPARATIVA 4 CON glass effect ═════════════════════════════════ */

.comp4 {
  background: rgba(14,13,11,.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(201,169,110,.18) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.comp4-cell { background: rgba(14,13,11,.4) !important; }
.comp4-cell.tlg { background: rgba(201,169,110,.06) !important; }