/* ============================================================
   JDServer.es — logo-refresh.css

   Los estilos del rediseño 2026 ya están integrados directamente en:
   - header.css
   - home.css
   - footer.css
   - participa.css

   Este archivo se mantiene cargado por compatibilidad y como punto futuro
   para ajustes muy pequeños sin tocar los CSS principales.
   ============================================================ */

/* ============================================================
   JDServer.es — Ajuste fino visual 2026
   Suaviza fondos, elimina manchas rectangulares y reduce sombras.
   Se carga después de header/home/footer.
   ============================================================ */

/* Fondo general más limpio, sin bloques visibles */

.jd-body {
  background:
    radial-gradient(820px 420px at 22% -12%, rgba(56, 189, 248, 0.16), transparent 64%),
    radial-gradient(760px 360px at 82% 4%, rgba(251, 191, 36, 0.12), transparent 60%),
    linear-gradient(180deg, #f8fcff 0%, #eef7ff 44%, #f8fafc 100%) !important;
}

:root[data-theme="dark"] .jd-body {
  background:
    radial-gradient(820px 420px at 18% -12%, rgba(56, 189, 248, 0.15), transparent 64%),
    radial-gradient(760px 360px at 82% 4%, rgba(251, 191, 36, 0.08), transparent 60%),
    linear-gradient(180deg, #030712 0%, #07111f 48%, #020617 100%) !important;
}

/* Hero: fuera manchas rectangulares */

.jd-hero {
  overflow: visible;
}

.jd-hero::before,
.jd-hero::after {
  display: none !important;
}

/* Texto hero más equilibrado */

.jd-hero-title {
  font-size: clamp(2.05rem, 3.25vw, 3.05rem);
  line-height: 1.12;
  letter-spacing: -0.052em;
  max-width: 960px;
}

.jd-hero-subtitle {
  max-width: 48rem;
}

/* Botones más limpios, menos “glow” */

.jd-btn-primary {
  box-shadow:
    0 10px 24px rgba(14, 165, 233, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.jd-btn-primary:hover {
  box-shadow:
    0 12px 28px rgba(14, 165, 233, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

.jd-btn-ghost {
  box-shadow:
    0 8px 20px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.50);
}

/* Tarjeta KPI: más Apple, menos sombra de pegote */

.jd-hero-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(242, 250, 255, 0.70)) !important;
  border: 1px solid rgba(14, 165, 233, 0.16) !important;
  box-shadow:
    0 14px 36px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(10px);
}

:root[data-theme="dark"] .jd-hero-card {
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.62)) !important;
  border-color: rgba(125, 211, 252, 0.16) !important;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Caja interior de KPIs más suave */

.jd-hero-kpis {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(14, 165, 233, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 8px 22px rgba(15, 23, 42, 0.04);
}

:root[data-theme="dark"] .jd-hero-kpis {
  background: rgba(15, 23, 42, 0.58) !important;
  border-color: rgba(125, 211, 252, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 22px rgba(0, 0, 0, 0.18);
}

/* Secciones y cards: reducimos sombras gordas */

.jd-section-soft,
.jd-project-card,
.jd-network-card,
.jd-tech-card,
.jd-contact-content {
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

:root[data-theme="dark"] .jd-section-soft,
:root[data-theme="dark"] .jd-project-card,
:root[data-theme="dark"] .jd-network-card,
:root[data-theme="dark"] .jd-tech-card,
:root[data-theme="dark"] .jd-contact-content {
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

/* Móvil: aquí estaba el mayor “pegote” */

@media (max-width: 640px) {
  .jd-main {
    padding-top: 18px;
  }

  .jd-hero {
    margin-top: 8px;
    margin-bottom: 32px;
    gap: 26px;
  }

  .jd-badge {
    font-size: 0.74rem;
    padding: 4px 10px;
    max-width: 100%;
    opacity: 0.86;
  }

  .jd-hero-title {
    margin-top: 18px;
    font-size: 2.05rem;
    line-height: 1.13;
    letter-spacing: -0.047em;
  }

  .jd-hero-subtitle {
    font-size: 0.98rem;
    line-height: 1.58;
  }

  .jd-hero-actions {
    gap: 10px;
  }

  .jd-btn {
    width: auto;
    max-width: 100%;
    min-height: 42px;
  }

  .jd-hero-visual {
    justify-content: stretch;
  }

  .jd-hero-card {
    max-width: none;
    border-radius: 26px;
    padding: 18px 18px 20px;
    box-shadow:
      0 10px 26px rgba(15, 23, 42, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  }

  .jd-hero-kpis {
    border-radius: 20px;
  }
}


/* ============================================================
   FIX definitivo del reborde del hero
   ============================================================ */

/* El reborde grande visible en móvil suele venir del bloque de texto
   o de un pseudo-elemento. Lo neutralizamos del todo. */

.jd-main,
.jd-hero,
.jd-hero-text {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Mata cualquier capa decorativa residual del hero */
.jd-main::before,
.jd-main::after,
.jd-hero::before,
.jd-hero::after,
.jd-hero-text::before,
.jd-hero-text::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Si el container general mete caja, también fuera */
.container.jd-main {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Conservamos la tarjeta KPI, pero más limpia */
.jd-hero-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.82), rgba(244,250,255,0.74)) !important;
  border: 1px solid rgba(14,165,233,0.14) !important;
  box-shadow:
    0 10px 24px rgba(15,23,42,0.05),
    inset 0 1px 0 rgba(255,255,255,0.85) !important;
}

/* Y la caja interior, más sutil */
.jd-hero-kpis {
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(14,165,233,0.10) !important;
  box-shadow: none !important;
}

/* En móvil, cero inventos raros detrás del texto */
@media (max-width: 640px) {
  .jd-hero {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .jd-hero-text {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .jd-hero-title,
  .jd-hero-subtitle,
  .jd-hero-actions,
  .jd-badge {
    position: relative;
    z-index: 2;
  }
}