/* ==========================================================================
   ALBERTO ÁVILA VACA - DARK PREMIUM EDITORIAL STYLES (LOW GLARE)
   ========================================================================== */

@layer base {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #0D0F12;
    color: #E8E5DF;
    font-size: 1.05rem;
    line-height: 1.65;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }
}

/* Scroll Progress Bar at top of header */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #C5A880 0%, #218BFF 50%, #0E8F78 100%);
  z-index: 100;
  width: 0%;
  transition: width 0.1s ease-out;
}

/* Limitar el ancho del contenido de las secciones (main y footer) en PC al 60% (Directiva explicita) */
@media (min-width: 1024px) {
  main .max-w-7xl,
  main .max-w-6xl,
  main .max-w-5xl,
  main .max-w-4xl,
  main .max-w-3xl,
  main .max-w-2xl,
  main .max-w-xl,
  footer .max-w-7xl {
    max-width: 60vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Header 100% ancho siempre con 88% transparencia en modo oscuro mate */
header {
  width: 100% !important;
  max-width: 100% !important;
  background-color: rgba(13, 15, 18, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Open Dark Panel */
.glass-panel, .glass-card {
  background: #13161C;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
  transition: border-color 0.3s ease;
}

.glass-card:hover {
  border-color: rgba(197, 168, 128, 0.3);
}

/* Section Titles Hierarchy & Balance */
.section-h2-title {
  font-size: 32px !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: #E8E5DF !important;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .section-h2-title {
    font-size: 40px !important;
    line-height: 1.15 !important;
  }
}

@media (min-width: 1024px) {
  .section-h2-title {
    font-size: 46px !important;
    line-height: 1.12 !important;
  }
}

/* Heroic & Display Headlines for High-Contrast Milestones */
.display-hero-quote {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 2.15rem;
  line-height: 1.18;
  color: #E8E5DF;
}

@media (min-width: 640px) {
  .display-hero-quote {
    font-size: 2.85rem;
    line-height: 1.15;
  }
}

@media (min-width: 1024px) {
  .display-hero-quote {
    font-size: 3.6rem;
    line-height: 1.12;
  }
}

/* Interactive States & Micro-feedback */
button, a {
  touch-action: manipulation;
}

a:active, button:active {
  transform: scale(0.98);
}

/* Sticky WA Button Pulsing Halo */
.sticky-wa-btn {
  position: relative;
  z-index: 10;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sticky-wa-btn::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: rgba(197, 168, 128, 0.25);
  z-index: -1;
  animation: sticky-halo-pulse 2.2s ease-in-out infinite;
}

@keyframes sticky-halo-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.25;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.55;
  }
}

/* Pillar Top Color Accent Bars */
.pillar-accent-blue {
  border-top: 3px solid #218BFF;
}

.pillar-accent-emerald {
  border-top: 3px solid #0E8F78;
}

.pillar-accent-gold {
  border-top: 3px solid #C5A880;
}

.pillar-accent-amber {
  border-top: 3px solid #C85A17;
}

/* Open Editorial Card Container (Dark Premium Style) */
.dark-editorial-card {
  background: #13161C;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.75rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dark-editorial-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

/* Hairline dividers */
.border-hairline {
  border-color: rgba(255, 255, 255, 0.08);
}