/* =============================================================================
   futurista.css — Sistema Visual de Próxima Generación · SINERGÍA
   ============================================================================= */

/* ── @property para gradientes animados hardware-acelerados ──────────────── */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ── Cursor personalizado (solo dispositivos con puntero fino) ────────────── */
@media (pointer: fine) {
  * { cursor: none !important; }

  .cursor-glow {
    position: fixed;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9996;
    top: 0; left: 0;
    transform: translate(-50%, -50%);
    background: radial-gradient(
      circle,
      rgba(201, 168, 76, 0.09) 0%,
      rgba(58,  155, 176, 0.05) 40%,
      transparent 68%
    );
    mix-blend-mode: screen;
    transition: width 0.6s ease, height 0.6s ease;
    will-change: left, top;
  }

  .cursor-dot {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9997;
    top: 0; left: 0;
    transform: translate(-50%, -50%);
    background: var(--color-gold);
    box-shadow:
      0 0 6px  var(--color-gold),
      0 0 14px rgba(201, 168, 76, 0.55);
    transition: width 0.15s ease, height 0.15s ease, background 0.2s ease;
    will-change: left, top;
  }

  .cursor-dot--hover {
    width: 13px;
    height: 13px;
    background: var(--color-gold-light);
  }

  .cursor-glow--hover {
    width: 560px;
    height: 560px;
  }
}

/* ── Ruido / grano de película ────────────────────────────────────────────── */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  opacity: 0.026;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
  animation: noise-drift 9s steps(1, end) infinite;
}

@keyframes noise-drift {
  0%   { background-position:   0px   0px; }
  11%  { background-position: -55px -28px; }
  22%  { background-position:  32px  58px; }
  33%  { background-position: -72px  22px; }
  44%  { background-position:  48px -46px; }
  55%  { background-position: -22px  64px; }
  66%  { background-position:  82px -14px; }
  77%  { background-position: -44px  38px; }
  88%  { background-position:  18px -68px; }
  100% { background-position:   0px   0px; }
}

/* ── Barra de progreso de scroll ──────────────────────────────────────────── */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  z-index: 9995;
  background: linear-gradient(
    90deg,
    var(--color-gold-dark)  0%,
    var(--color-gold)       30%,
    var(--color-gold-light) 50%,
    var(--color-gold)       70%,
    var(--color-gold-dark)  100%
  );
  background-size: 200% 100%;
  box-shadow:
    0 0 10px var(--color-gold),
    0 0 22px rgba(201, 168, 76, 0.40);
  animation: bar-shimmer 2.5s linear infinite;
}

@keyframes bar-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO — capas atmosféricas extra
   ═══════════════════════════════════════════════════════════════════════════ */

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 130% 55% at 10% 65%,  rgba(58,  155, 176, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse  85% 70% at 88% 15%,  rgba(142,  68, 173, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 100% 45% at 50% 98%,  rgba(201, 168,  76, 0.10) 0%, transparent 50%);
  animation: aurora-breathe 16s ease-in-out infinite alternate;
}

@keyframes aurora-breathe {
  0%   { opacity: 0.55; transform: scale(1)    translateY(0);     }
  45%  { opacity: 1.00; transform: scale(1.05) translateY(-14px); }
  100% { opacity: 0.70; transform: scale(1.02) translateY(7px);   }
}

/* Orbes flotantes */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
  z-index: 0;
  opacity: 0;
  animation: orb-appear 2.5s ease-out forwards;
}

@keyframes orb-appear { to { opacity: 1; } }

.hero__orb--1 {
  width: 650px; height: 650px;
  top: -180px; right: -120px;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.11) 0%, transparent 70%);
  animation-delay: 0.3s;
}

.hero__orb--2 {
  width: 520px; height: 520px;
  bottom: -100px; left: -90px;
  background: radial-gradient(circle, rgba(58, 155, 176, 0.12) 0%, transparent 70%);
  animation-delay: 0.7s;
}

.hero__orb--3 {
  width: 420px; height: 420px;
  top: 35%; right: 18%;
  background: radial-gradient(circle, rgba(142, 68, 173, 0.09) 0%, transparent 70%);
  animation-delay: 1.1s;
}

/* ── Hero title — neon pulse ──────────────────────────────────────────────── */
.hero__title {
  background: linear-gradient(
    135deg,
    var(--color-gold-dark)  0%,
    var(--color-gold)       22%,
    var(--color-gold-light) 38%,
    #FFFDE8                 50%,
    var(--color-gold-light) 62%,
    var(--color-gold)       78%,
    var(--color-gold-dark)  100%
  );
  background-size: 280% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 28px rgba(201, 168, 76, 0.55))
          drop-shadow(0 0 60px rgba(201, 168, 76, 0.22));
  animation: title-gold-sweep 5s ease-in-out infinite,
             title-pulse 4s ease-in-out infinite alternate;
}

@keyframes title-gold-sweep {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@keyframes title-pulse {
  0%   { filter: drop-shadow(0 0 28px rgba(201,168,76,0.45)) drop-shadow(0 0 55px rgba(201,168,76,0.18)); }
  100% { filter: drop-shadow(0 0 40px rgba(201,168,76,0.80)) drop-shadow(0 0 90px rgba(201,168,76,0.30)) drop-shadow(0 0 150px rgba(58,155,176,0.10)); }
}

/* ── Hero eyebrow shine ───────────────────────────────────────────────────── */
.hero__eyebrow {
  background: linear-gradient(90deg, var(--color-gold), #FFE8A0, var(--color-gold));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: eyebrow-shine 4.5s ease-in-out infinite;
}

@keyframes eyebrow-shine {
  0%, 100% { background-position: 0%   0; }
  50%       { background-position: 100% 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIPOGRAFÍA — títulos holográficos
   ═══════════════════════════════════════════════════════════════════════════ */

.section-title {
  background: linear-gradient(
    108deg,
    #FFFFFF          0%,
    #F0D882         22%,
    var(--color-gold) 36%,
    #FFF0B0         48%,
    var(--color-gold) 60%,
    #C8E8FF         78%,
    #FFFFFF         100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: holo-flow 8s ease-in-out infinite;
}

@keyframes holo-flow {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

.section-title:hover {
  animation:
    title-glitch 0.5s steps(2, end) 1,
    holo-flow 8s ease-in-out infinite;
}

@keyframes title-glitch {
  0%   { transform: none;                          filter: none;                                }
  14%  { transform: translateX(-4px);              filter: hue-rotate(25deg) brightness(1.2);   }
  28%  { transform: translateX(4px) skewX(-2deg);  filter: hue-rotate(-15deg) saturate(1.6);    }
  42%  { transform: translateX(-3px) skewX(1deg);  filter: hue-rotate(45deg);                   }
  57%  { transform: translateX(3px);               filter: brightness(1.15) hue-rotate(-25deg); }
  71%  { transform: translateX(-2px) skewX(-1deg); filter: hue-rotate(15deg);                   }
  85%  { transform: translateX(2px);               filter: none;                                }
  100% { transform: none;                          filter: none;                                }
}

/* Section label neon ────────────────────────────────────────────────────── */
.section-label {
  filter: drop-shadow(0 0 5px rgba(201, 168, 76, 0.45));
}

.section-label::before {
  box-shadow: 0 0 6px var(--color-gold), 0 0 12px rgba(201, 168, 76, 0.40);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR ultra-glass
   ═══════════════════════════════════════════════════════════════════════════ */

.navbar {
  background: rgba(4, 8, 22, 0.70);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-bottom: 1px solid rgba(201, 168, 76, 0.08);
}

.navbar__brand {
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold), var(--color-gold-dark));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(201, 168, 76, 0.55));
  animation: brand-shimmer 6s ease-in-out infinite;
}

@keyframes brand-shimmer {
  0%, 100% { background-position: 0%   0; }
  50%       { background-position: 100% 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR futurista
   ═══════════════════════════════════════════════════════════════════════════ */

.sidebar {
  background: linear-gradient(
    180deg,
    rgba(3,  7, 18, 1)  0%,
    rgba(10, 18, 48, 1) 45%,
    rgba(3,  7, 18, 1)  100%
  );
  border-right: 1px solid rgba(201, 168, 76, 0.06);
}

.sidebar__brand {
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.45));
}

.sidebar__link--main.sidebar__link--active {
  background: rgba(201, 168, 76, 0.09);
}

.sidebar__link--main.sidebar__link--active::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 8px var(--color-gold), 0 0 16px rgba(201, 168, 76, 0.5);
}

.sidebar__link--main {
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECCIONES — grid de escaneo + fondo
   ═══════════════════════════════════════════════════════════════════════════ */

#nosotros,
#servicios {
  position: relative;
}

#nosotros::before,
#servicios::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(201, 168, 76, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 168, 76, 0.022) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 75%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TARJETAS — glassmorphism + glow en hover
   ═══════════════════════════════════════════════════════════════════════════ */

.crisis__stat,
.triada__phase,
.gemas__card,
.paquetes__card,
.impacto__metric,
.casos__item,
.diagnostico__feature {
  transition:
    transform  0.5s var(--ease-smooth),
    box-shadow 0.5s var(--ease-smooth);
  will-change: transform;
}

.gemas__card,
.paquetes__card {
  background: rgba(18, 28, 58, 0.62);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.crisis__stat:hover,
.triada__phase:hover,
.gemas__card:hover,
.paquetes__card:hover,
.impacto__metric:hover,
.casos__item:hover,
.diagnostico__feature:hover {
  box-shadow:
    0 0 0 1px rgba(201, 168, 76, 0.45),
    0 14px 44px rgba(0,   0,   0,   0.45),
    0  0px 24px rgba(201, 168,  76, 0.14),
    0  0px 50px rgba(58,  155, 176, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTONES — anillo de plasma giratorio
   ═══════════════════════════════════════════════════════════════════════════ */

.btn--primary {
  position: relative;
  overflow: visible;
}

.btn--primary::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--border-angle),
    rgba(201, 168, 76, 0),
    rgba(201, 168, 76, 0.95),
    rgba(240, 208, 128, 1),
    rgba(201, 168, 76, 0.95),
    rgba(201, 168, 76, 0)
  );
  filter: blur(9px);
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: border-angle-spin 3.5s linear infinite;
  z-index: -1;
}

.btn--primary:hover::before {
  opacity: 0.65;
}

@keyframes border-angle-spin {
  to { --border-angle: 360deg; }
}

/* Sec expand button — anillo tricolor */
.sec-expand-btn {
  position: relative;
}

.sec-expand-btn::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--border-angle),
    transparent                 0deg,
    rgba(201, 168,  76, 0.85) 60deg,
    rgba(58,  155, 176, 0.70) 120deg,
    rgba(142,  68, 173, 0.70) 180deg,
    rgba(201, 168,  76, 0.85) 240deg,
    transparent               360deg
  );
  filter: blur(7px);
  opacity: 0;
  transition: opacity 0.35s ease;
  animation: border-angle-spin 4.5s linear infinite;
  z-index: -1;
}

.sec-expand-btn:hover::before {
  opacity: 0.65;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PSI QUOTE — borde degradado animado
   ═══════════════════════════════════════════════════════════════════════════ */

.psi__quote {
  background: linear-gradient(
    135deg,
    rgba(201, 168,  76, 0.08) 0%,
    rgba(58,  155, 176, 0.04) 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  border-left: 3px solid var(--color-gold);
  position: relative;
  overflow: hidden;
  padding: var(--sp-5) var(--sp-6);
  box-shadow: inset 0 0 30px rgba(201, 168, 76, 0.04);
}

.psi__quote::before {
  content: '\201C';
  position: absolute;
  top: -30px;
  left: 10px;
  font-family: var(--font-display);
  font-size: 9rem;
  line-height: 1;
  color: rgba(201, 168, 76, 0.08);
  pointer-events: none;
  user-select: none;
}

.psi__quote::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(201, 168, 76, 0.03) 50%,
    transparent 100%
  );
  background-size: 300% 300%;
  animation: quote-shimmer 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes quote-shimmer {
  0%, 100% { background-position: 0%   0%; }
  50%       { background-position: 100% 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIAGRAMA VENN — brillo mejorado
   ═══════════════════════════════════════════════════════════════════════════ */

.venn__circle--gemas  { filter: drop-shadow(0 0 5px  rgba(58,  155, 176, 0.38)); }
.venn__circle--arte   { filter: drop-shadow(0 0 5px  rgba(39,  174,  96, 0.38)); }
.venn__circle--triada { filter: drop-shadow(0 0 5px  rgba(142,  68, 173, 0.38)); }

.venn__center-title {
  filter: drop-shadow(0 0 16px rgba(201, 168, 76, 0.70));
  animation: venn-glow-pulse 3s ease-in-out infinite alternate;
}

@keyframes venn-glow-pulse {
  0%   { filter: drop-shadow(0 0 12px rgba(201,168,76,0.55)); }
  100% { filter: drop-shadow(0 0 22px rgba(201,168,76,0.90)) drop-shadow(0 0 40px rgba(201,168,76,0.30)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER glow
   ═══════════════════════════════════════════════════════════════════════════ */

.footer {
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(201, 168, 76, 0.04) 0%, transparent 60%);
  pointer-events: none;
}

.footer__brand {
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.45));
  font-size: var(--fs-xl);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTADOR PSI de fondo
   ═══════════════════════════════════════════════════════════════════════════ */

.psi__counter {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.18) 0%, transparent 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL CONTACTO — glass
   ═══════════════════════════════════════════════════════════════════════════ */

.contacto__form,
.contacto__form-wrap {
  background: rgba(18, 28, 58, 0.50);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(201, 168, 76, 0.10);
  box-shadow:
    0 0 60px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .hero__orb   { display: none; }
  .noise-overlay { opacity: 0.018; }
}

@media (prefers-reduced-motion: reduce) {
  .noise-overlay,
  .scroll-progress-bar,
  .hero__orb,
  .hero::after {
    animation: none !important;
  }
  .section-title,
  .hero__title,
  .hero__eyebrow,
  .navbar__brand,
  .sidebar__brand {
    animation: none !important;
    background-position: 0% 50%;
  }
}