/* ── TRIVIA VISUAL LAYER — 100 Médicos Dijeron ───────────── */

/* ── CANVAS ─────────────────────────────────────────────── */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ── SVG SECTION BACKGROUNDS ─────────────────────────────── */

/* About — dot grid pulsante */
.svg-section-about {
  position: relative;
  overflow: hidden;
}

.svg-section-about::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1.2' fill='%233b7fff' opacity='0.18'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
  animation: dot-pulse 6s ease-in-out infinite;
}

.svg-section-about::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, transparent 40%, var(--bg) 100%);
  pointer-events: none;
  z-index: 0;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

/* Phases — diagonal line pattern */
.svg-section-phases {
  position: relative;
  overflow: hidden;
}

.svg-section-phases::before {
  content: '';
  position: absolute;
  inset: -100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cline x1='0' y1='80' x2='80' y2='0' stroke='%237b5ea7' stroke-width='0.6' stroke-opacity='0.12'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
  animation: diagonal-drift 20s linear infinite;
}

@keyframes diagonal-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(80px, -80px); }
}

/* Platform — hexagon pattern */
.svg-section-platform {
  position: relative;
  overflow: hidden;
}

.svg-section-platform::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='86.6'%3E%3Cpolygon points='50,2 93,25 93,69 50,92 7,69 7,25' fill='none' stroke='%2300d4aa' stroke-width='0.5' stroke-opacity='0.1'/%3E%3C/svg%3E");
  background-size: 100px 86.6px;
  pointer-events: none;
  z-index: 0;
  animation: hex-breathe 8s ease-in-out infinite;
}

@keyframes hex-breathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.03); }
}

/* Keep content above pseudo-elements */
.svg-section-about .container,
.svg-section-phases .container,
.svg-section-platform .container {
  position: relative;
  z-index: 1;
}

/* ── GLASS CARD SVG INNER PATTERN ────────────────────────── */
.card.glass,
.phase-card.glass,
.platform-card.glass {
  position: relative;
  overflow: hidden;
}

.card.glass::after,
.phase-card.glass::after,
.platform-card.glass::after {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 120px; height: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='55' fill='none' stroke='white' stroke-width='0.5' stroke-opacity='0.06'/%3E%3Ccircle cx='60' cy='60' r='35' fill='none' stroke='white' stroke-width='0.5' stroke-opacity='0.04'/%3E%3Ccircle cx='60' cy='60' r='15' fill='none' stroke='white' stroke-width='0.5' stroke-opacity='0.03'/%3E%3C/svg%3E");
  background-size: 100%;
  pointer-events: none;
  animation: card-ring-spin 18s linear infinite;
  z-index: 0;
}

@keyframes card-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Ensure card content stays above */
.card.glass > *,
.phase-card.glass > *,
.platform-card.glass > * {
  position: relative;
  z-index: 1;
}

/* ── LED SCREEN INNER GLOW ───────────────────────────────── */
.led-screen {
  box-shadow:
    0 0 0 1px rgba(59,127,255,0.15),
    0 40px 80px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 60px rgba(59,127,255,0.06);
  animation: screen-breathe 4s ease-in-out infinite;
}

@keyframes screen-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(59,127,255,0.15), 0 40px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 60px rgba(59,127,255,0.06); }
  50%       { box-shadow: 0 0 0 1px rgba(59,127,255,0.3),  0 40px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 100px rgba(59,127,255,0.12); }
}

/* ── BAR FILL SHIMMER ────────────────────────────────────── */
.bar-fill {
  position: relative;
  overflow: hidden;
}

.bar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: shimmer 2.5s ease-in-out infinite;
  animation-delay: 2.5s;
}

@keyframes shimmer {
  from { left: -60%; }
  to   { left: 110%; }
}

/* ── HERO BADGE PULSE ────────────────────────────────────── */
.hero-badge {
  animation: badge-glow 3s ease-in-out infinite;
}

@keyframes badge-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,127,255,0); }
  50%       { box-shadow: 0 0 20px 4px rgba(59,127,255,0.2); }
}

/* ── PANEL BTN ACTIVE PULSE ──────────────────────────────── */
.panel-btn.active {
  animation: panel-active-pulse 2s ease-in-out infinite;
}

@keyframes panel-active-pulse {
  0%, 100% { background: rgba(59,127,255,0.15); border-color: rgba(59,127,255,0.4); }
  50%       { background: rgba(59,127,255,0.28); border-color: rgba(59,127,255,0.7); }
}

/* ── DELIVERABLE HOVER ACCENT ────────────────────────────── */
.deliverable {
  transition: all 0.25s ease;
}
.deliverable:hover .deliverable-check {
  background: rgba(0,212,170,0.22);
  border-color: rgba(0,212,170,0.5);
  transform: scale(1.15);
  transition: all 0.2s;
}

/* ── SECTION TITLE GRADIENT UNDERLINE ────────────────────── */
.section-title {
  position: relative;
  display: inline-block;
}

/* ── CTA GLOW PULSE ──────────────────────────────────────── */
.cta-glow {
  animation: cta-glow-pulse 5s ease-in-out infinite;
}

@keyframes cta-glow-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.6; }
  50%       { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

/* ── BTN PRIMARY TRIVIA SHIMMER ──────────────────────────── */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: btn-shine 3s ease-in-out infinite;
}
@keyframes btn-shine {
  0%   { left: -60%; }
  40%, 100% { left: 110%; }
}

/* ── SCORE COUNTER TICK ──────────────────────────────────── */
.voters-count {
  display: inline-block;
  animation: score-tick 0.1s ease-out;
}

/* ── TIMELINE NUMBER GLOW ────────────────────────────────── */
.timeline-item:hover .timeline-num {
  color: rgba(59,127,255,0.5);
  transition: color 0.3s;
  text-shadow: 0 0 30px rgba(59,127,255,0.3);
}