/* ============================================================
   DELPHOS ACADEMY — CRAFT ENHANCEMENTS
   Signature: Oracle's Illumination
   Gold light breaking through darkness — knowledge as fire.
   ============================================================ */

/* ============================================================
   0. PALETA VERDE — override sobre styles.css (base azul)
   Verde bosque + dorado ámbar. Sereno, fresco, de confianza.
   ============================================================ */
:root {
  /* Colores principales → verde esmeralda/bosque */
  --blue-dark:    #166534;          /* verde oscuro (antes navy) */
  --blue:         #16A34A;          /* verde primario (antes azul) */
  --blue-medium:  #22C55E;          /* verde medio */
  --blue-light:   #DCFCE7;          /* verde suave */
  --blue-pale:    #F0FDF4;          /* verde muy pálido (fondos) */

  /* Fondos levemente verdeados */
  --bg-section:   #F0FDF5;

  /* Gradientes actualizados */
  --grad-primary: linear-gradient(135deg, #166534 0%, #16A34A 100%);
  --grad-hero:    linear-gradient(135deg, rgba(10,20,12,0.88) 0%, rgba(22,101,52,0.72) 100%);

  /* Sombras actualizadas */
  --shadow-blue:  0 8px 30px rgba(22,163,74,0.28);
}

/* ============================================================
   0b. LOGO SVG
   ============================================================ */
.logo-img {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), filter 0.4s ease;
  filter: drop-shadow(0 2px 8px rgba(245,158,11,0.25));
}

.navbar-logo:hover .logo-img {
  transform: rotate(15deg) scale(1.08);
  filter: drop-shadow(0 4px 16px rgba(245,158,11,0.55));
}

/* En navbar scrolled el fondo del logo es blanco — no pasa nada,
   el SVG ya tiene fondo circular oscuro propio */

.logo-img--footer {
  width: 38px;
  height: 38px;
  opacity: 0.92;
}

/* ============================================================
   1. ANIMATED GRADIENT TEXT (hero headline accent)
   ============================================================ */
.gradient-text {
  background: linear-gradient(
    90deg,
    #D97706 0%,
    #FBBF24 20%,
    #FDE68A 40%,
    #FBBF24 60%,
    #F59E0B 80%,
    #D97706 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 4s linear infinite;
}

@keyframes textShimmer {
  to { background-position: 200% center; }
}

/* ============================================================
   2. HERO — Oracle's Light (aurora + geometric rays)
   ============================================================ */
.hero-decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Gold oracle fire — emanates from top-right */
.hero-decor::before {
  content: '';
  position: absolute;
  top: -35%; right: -20%;
  width: clamp(600px, 80vw, 1000px);
  height: clamp(600px, 80vw, 1000px);
  background: radial-gradient(ellipse at center,
    rgba(245, 158, 11, 0.26) 0%,
    rgba(251, 191, 36, 0.12) 22%,
    rgba(22,  163, 74, 0.07) 48%,
    transparent 68%
  );
  border-radius: 50%;
  animation: oracleGlow 9s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Atmospheric green — anchors bottom-left */
.hero-decor::after {
  content: '';
  position: absolute;
  bottom: -5%; left: -18%;
  width: clamp(500px, 65vw, 800px);
  height: clamp(500px, 65vw, 800px);
  background: radial-gradient(ellipse at center,
    rgba(22,  163, 74, 0.24) 0%,
    rgba(22,  163, 74, 0.10) 35%,
    transparent 62%
  );
  border-radius: 50%;
  animation: oracleGlow 13s ease-in-out infinite alternate-reverse;
  will-change: transform, opacity;
}

@keyframes oracleGlow {
  0%   { transform: scale(1);    opacity: 0.65; }
  100% { transform: scale(1.14); opacity: 1; }
}

/* Geometric rays SVG */
.hero-rays-svg {
  position: absolute;
  top: 0; right: 0;
  width: 72%; height: 100%;
  mix-blend-mode: screen;
}

/* Sharper hero title */
.hero-title {
  letter-spacing: -2.5px;
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.35);
}

/* Hero content sits above aurora */
.hero-content { position: relative; z-index: 3; }

/* Hero scroll indicator sits above aurora */
.hero-scroll-indicator { z-index: 3; }

/* Enhanced hero badge — shimmer sweep */
.hero-badge {
  position: relative;
  overflow: hidden;
}

.hero-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  animation: badgeSweep 4s ease-in-out infinite;
}

@keyframes badgeSweep {
  0%   { transform: translateX(-120%); }
  40%  { transform: translateX(220%); }
  100% { transform: translateX(220%); }
}

/* Hero quick-stats — elevated glass */
.hero-quick-stats {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Hero stat numbers — gold-to-white gradient */
.hero-quick-stats .stat-num {
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(180deg, #FFFFFF 0%, #FCD34D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   3. BUTTONS — shine sweep on hover
   ============================================================ */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  transform: skewX(-18deg);
}

.btn:hover::after {
  animation: btnShine 0.55s ease forwards;
}

@keyframes btnShine {
  to { left: 160%; }
}

/* ============================================================
   4. SECTION LABELS — editorial style with gold accent bar
   ============================================================ */
.section-label {
  background: transparent;
  padding: 0 0 10px 0;
  letter-spacing: 3px;
  font-size: 10.5px;
  color: var(--blue);
  border-radius: 0;
  position: relative;
  display: inline-block;
}

.section-label::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 22px; height: 2.5px;
  background: var(--grad-gold);
  border-radius: 3px;
}

/* ============================================================
   5. ABOUT SECTION — dot-grid depth + image corner accent
   ============================================================ */
.about-section {
  position: relative;
  overflow: hidden;
}

.about-section::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 55%; height: 100%;
  background-image: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.07) 1.5px,
    transparent 1.5px
  );
  background-size: 30px 30px;
  pointer-events: none;
  z-index: 0;
}

.about-grid { position: relative; z-index: 1; }

/* Gold corner behind the image */
.about-visual {
  position: relative;
}

.about-visual::before {
  content: '';
  position: absolute;
  bottom: -22px; right: -22px;
  width: 130px; height: 130px;
  background: var(--grad-gold);
  border-radius: var(--radius-lg);
  z-index: 0;
  opacity: 0.75;
  box-shadow: 0 8px 30px rgba(217, 119, 6, 0.35);
}

.about-img-wrapper {
  position: relative;
  z-index: 1;
}

/* Larger badge icon */
.about-img-badge i {
  font-size: 32px;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   6. LEVEL CARDS — numbered corner + top accent border
   ============================================================ */
.level-card {
  border-top: 3px solid transparent;
  transition: border-color 0.3s ease, transform 0.45s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.45s cubic-bezier(0.4,0,0.2,1);
}

/* Default top border = blue */
.level-card:not(.level-card--featured) {
  border-top-color: var(--blue-light);
}

/* Featured = gold top border */
.level-card--featured {
  border-top-color: var(--gold-light);
}

/* Large decorative corner number */
.level-num {
  position: absolute;
  top: 16px; right: 20px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 64px;
  font-weight: 900;
  color: var(--border);
  line-height: 1;
  transition: color 0.35s ease;
  user-select: none;
  pointer-events: none;
}

.level-card:hover .level-num {
  color: rgba(255, 255, 255, 0.11);
}

/* ============================================================
   7. SERVICE CARDS — icon glow ring on hover
   ============================================================ */
.service-icon {
  border-radius: 18px;
  position: relative;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover .service-icon {
  box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.09);
}

/* Service card — subtle left accent line on hover */
.service-card {
  border-left: 3px solid transparent;
  transition: background 0.4s ease, box-shadow 0.4s ease,
              transform 0.4s ease, border-color 0.4s ease;
}

.service-card:hover {
  border-left-color: var(--blue);
}

/* ============================================================
   8. STATS SECTION — subtle grid overlay
   ============================================================ */
.stats-section {
  position: relative;
  overflow: hidden;
}

.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

/* Stat numbers — slightly larger, bolder */
.stat-number {
  font-size: 52px;
}

.stat-suffix {
  font-size: 32px;
  color: var(--gold-light);
}

/* ============================================================
   9. METHODOLOGY — glowing hover on step icons
   ============================================================ */
.method-step:hover .step-icon {
  box-shadow:
    0 0 0 10px rgba(37, 99, 235, 0.07),
    0 0 0 20px rgba(37, 99, 235, 0.03),
    var(--shadow-blue);
}

/* ============================================================
   10. PRICING — OBSIDIAN CARD (Oracle's dark fire)
   ============================================================ */
.pricing-card--featured {
  background: #080D1C;
  border: 1px solid rgba(245, 158, 11, 0.28);
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.08),
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(245, 158, 11, 0.06) inset;
  position: relative;
  overflow: hidden;
}

/* Gold oracle glow — top center of obsidian card */
.pricing-card--featured::before {
  content: '';
  position: absolute;
  top: -90px; left: 50%;
  transform: translateX(-50%);
  width: 320px; height: 220px;
  background: radial-gradient(ellipse at center,
    rgba(245, 158, 11, 0.25) 0%,
    rgba(245, 158, 11, 0.08) 45%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Dot grid pattern on obsidian card */
.pricing-card--featured::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
}

/* All content above the decorative overlays */
.pricing-card--featured > * {
  position: relative;
  z-index: 1;
}

/* Gold-tinted tag */
.pricing-card--featured .pricing-tag {
  color: rgba(245, 158, 11, 0.75);
  letter-spacing: 2px;
}

/* Gold icon instead of white-tinted */
.pricing-card--featured .pricing-icon {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.pricing-card--featured .pricing-icon i {
  color: var(--gold-light);
}

/* Gold text-shadow on price amount */
.pricing-card--featured .price-amount {
  color: var(--white);
  text-shadow: 0 0 50px rgba(245, 158, 11, 0.45);
}

/* Gold checkmarks */
.pricing-card--featured .pricing-features li i {
  color: var(--gold-light);
}

/* Popular badge — pulsing gold */
.pricing-popular-badge {
  background: var(--grad-gold);
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.5);
  animation: popularPulse 2.5s ease-in-out infinite;
}

@keyframes popularPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(217, 119, 6, 0.5); }
  50%       { box-shadow: 0 4px 24px rgba(217, 119, 6, 0.75), 0 0 0 6px rgba(217,119,6,0.1); }
}

/* ============================================================
   11. TESTIMONIALS — large decorative quote mark
   ============================================================ */
.testimonial-card {
  position: relative;
}

.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: -8px; right: 18px;
  font-size: 96px;
  line-height: 1;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 900;
  color: var(--blue-light);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   12. FAQ — left oracle-blue border when open
   ============================================================ */
.faq-item.open {
  border-left: 3px solid var(--blue);
}

.faq-item {
  transition: border 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================================
   13. CTA BANNER — headline glow + verde overlay
   ============================================================ */
.cta-content h2 {
  text-shadow: 0 0 50px rgba(245, 158, 11, 0.28);
}

/* Override hardcoded blue gradient overlay en styles.css */
.cta-banner::before {
  background: linear-gradient(135deg,
    rgba(10, 20, 12, 0.90) 0%,
    rgba(22, 101, 52, 0.84) 100%
  ) !important;
}

/* CTA badge — gold tinted */
.cta-badge {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.45);
  color: var(--gold-light);
}

/* ============================================================
   14. ANNOUNCEMENT BAR — flowing gradient
   ============================================================ */
.announcement-bar {
  background: linear-gradient(90deg,
    #166534 0%,
    #16A34A 40%,
    #15803D 60%,
    #166534 100%
  );
  background-size: 200% auto;
  animation: announcementFlow 5s linear infinite;
}

@keyframes announcementFlow {
  to { background-position: 200% center; }
}

/* ============================================================
   15. NAVBAR — underline indicator (scrolled state)
   ============================================================ */
.navbar.scrolled .nav-link {
  position: relative;
}

.navbar.scrolled .nav-link::after {
  content: '';
  position: absolute;
  bottom: 3px; left: 14px; right: 14px;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.scrolled .nav-link:hover::after,
.navbar.scrolled .nav-link.active::after {
  transform: scaleX(1);
}

/* Navbar logo — gold accent on "Delfos" when scrolled */
.navbar.scrolled .navbar-logo .logo-text span,
.navbar.scrolled .navbar-logo .logo-text > :not(strong) {
  color: var(--blue);
}

/* ============================================================
   16. BENEFIT ICONS — richer shadow
   ============================================================ */
.benefit-icon {
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.14);
}

.benefit-item:hover .benefit-icon {
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.22);
}

/* ============================================================
   17. WHY-US — tinted section bg + image treatment
   ============================================================ */
.why-section {
  background: linear-gradient(160deg, #F8FAFC 0%, #EFF6FF 60%, #F8FAFC 100%);
}

/* Floating cards — richer shadow */
.why-floating-card {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0,0,0,0.06);
}

/* ============================================================
   18. LEVELS SECTION — gradient background
   ============================================================ */
.levels-section {
  background: linear-gradient(180deg, #F8FAFC 0%, #EEF4FF 100%);
}

/* ============================================================
   19. BACK TO TOP — pulsing oracle ring
   ============================================================ */
.back-to-top.visible {
  animation: bttPulse 2.8s ease-in-out infinite;
}

@keyframes bttPulse {
  0%, 100% { box-shadow: 0 8px 30px rgba(37, 99, 235, 0.3); }
  50%       { box-shadow: 0 8px 30px rgba(37, 99, 235, 0.3),
                          0 0 0 10px rgba(37, 99, 235, 0.08); }
}

/* ============================================================
   20. FOOTER — deep obsidian gradient matching pricing card
   ============================================================ */
.footer {
  background: linear-gradient(180deg, #0A0F1E 0%, #0F172A 100%);
}

/* ============================================================
   21. FORM INPUTS — micro-lift on focus
   ============================================================ */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.13),
    0 4px 14px rgba(37, 99, 235, 0.08);
}

/* ============================================================
   22. SECTION DIVIDER LINE (subtle between sections)
   ============================================================ */
.services-section {
  position: relative;
}

.services-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  pointer-events: none;
}

/* ============================================================
   23. SCROLL INDICATOR — gold accent on arrow ring
   ============================================================ */
.scroll-arrow {
  border-color: rgba(245, 158, 11, 0.5);
  color: var(--gold-light);
}

.hero-scroll-indicator:hover .scroll-arrow {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.8);
}