/* =====================================================
   PÁGINA DE INICIO (Home)
   Estilos exclusivos de la portada: hero, tarjetas de servicio,
   marquesina de logos, esfera decorativa flotante y línea de
   tiempo del proceso con scroll pinneado.
===================================================== */

body {
          font-family: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
          -webkit-font-smoothing: antialiased;
          color: var(--text);
          background: transparent;
        }

summary::marker {
          display: none;
          content: "";
        }

/* Service card system — uniform in light, visible in dark */
        .jd-card {
          position: relative;
          display: flex;
          flex-direction: column;
          background: var(--card-bg);
          border: 1px solid var(--card-bd);
          border-radius: 22px;
          overflow: hidden;
          box-shadow: var(--card-sh);
          transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.32s ease, border-color 0.32s ease;
        }

.jd-card:hover {
          transform: translateY(-6px);
          border-color: var(--border-hover);
          box-shadow: var(--card-sh-h);
        }

.jd-card__media {
          position: relative;
          aspect-ratio: 4 / 3;
          display: flex;
          align-items: center;
          justify-content: center;
          background: var(--media-bg);
          border-bottom: 1px solid var(--media-bd);
          overflow: hidden;
        }

.jd-card__media img {
          width: 88%;
          height: auto;
          display: block;
          mix-blend-mode: multiply;
          transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
        }

.jd-card:hover .jd-card__media img {
          transform: scale(1.045);
        }

.jd-card__media span svg {
          stroke: var(--accent);
        }

/* ============ FONDO GLOBAL: AMBIENT + GRID TÉCNICO ============ */
        body::before {
          content: "";
          position: fixed;
          inset: 0;
          z-index: -2;
          pointer-events: none;
          background:
            radial-gradient(1000px 680px at 84% -8%, var(--ambient-1), transparent 58%),
            radial-gradient(760px 620px at -10% 38%, var(--ambient-2), transparent 60%),
            var(--bg);
        }

/* ============ TRANSICIÓN SUAVE ENTRE TEMAS ============ */
        html.theme-anim,
        html.theme-anim *,
        html.theme-anim *::before,
        html.theme-anim *::after {
          transition: background-color .45s ease, background .45s ease, border-color .45s ease, color .3s ease, fill .3s ease, box-shadow .45s ease !important;
        }

/* ============ TOGGLE DE TEMA ============ */
        [data-theme-toggle] {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 44px;
          height: 44px;
          border-radius: 11px;
          flex-shrink: 0;
          border: 1.5px solid var(--border);
          background: rgba(var(--surface-rgb), 0.5);
          color: var(--text);
          cursor: pointer;
          padding: 0;
          position: relative;
          overflow: hidden;
          transition: border-color .2s ease, background .2s ease, transform .2s ease, color .2s ease;
        }

/* ============ IMG HERO — CLARO/OSCURO ============ */
        .jd-hero-img-dark {
          display: none !important;
        }

/* ============ LOGO ISOTIPO — CLARO/OSCURO ============ */
        .jd-logo-dark {
          display: none !important;
        }

/* ============ FAQ (componente unificado) ============ */
        .svc-faq {
          border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
          background: var(--surface); transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }

.svc-faq[open] { border-color: var(--border-hover); box-shadow: var(--card-sh); }

.svc-faq summary {
          display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer;
          padding: 22px 24px; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--text);
        }

.svc-faq summary .svc-faq-ico {
          flex-shrink: 0; display: inline-flex; width: 30px; height: 30px; border-radius: 8px;
          align-items: center; justify-content: center; color: var(--accent);
          background: rgba(var(--accent-rgb), 0.1); transition: transform 0.3s ease;
        }

.svc-faq[open] summary .svc-faq-ico { transform: rotate(45deg); }

.svc-faq__body { padding: 0 24px 24px; font-size: 14.5px; line-height: 1.7; color: var(--text-muted); }

@keyframes jdFloat {

          0%,
          100% {
            transform: translateY(0px);
          }

          50% {
            transform: translateY(-16px);
          }
        }

@keyframes jdMarquee {
          from {
            transform: translateX(0);
          }

          to {
            transform: translateX(-50%);
          }
        }

@keyframes jdPulse {

          0%,
          100% {
            opacity: 0.55;
          }

          50% {
            opacity: 0.9;
          }
        }

@media (max-width: 940px) {
          [data-desktop-nav] {
            display: none !important;
          }

          [data-nav-cta] {
            display: none !important;
          }

          [data-hamburger] {
            display: inline-flex !important;
          }

          [data-nav-toggle] {
            display: none !important;
          }
        }

/* ============ HERO MÓVIL — REDISEÑO ESPECÍFICO ============ */
        @media (max-width: 760px) {
          #jd-hero-inner {
            grid-template-columns: 1fr !important;
            gap: 4px !important;
            padding-top: 24px !important;
            padding-bottom: 44px !important;
          }
          [data-hero-visual] {
            order: -1;
            margin-bottom: 4px;
          }
          [data-hero-visual] img {
            width: min(74%, 320px) !important;
          }
          [data-hero-copy] {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
          }
          [data-hero-badge] {
            margin-bottom: 20px !important;
          }
          [data-hero-copy] h1 {
            font-size: clamp(34px, 8.5vw, 46px) !important;
            margin-bottom: 20px !important;
          }
          [data-hero-copy] > p {
            margin-left: auto !important;
            margin-right: auto !important;
            margin-bottom: 30px !important;
            font-size: 16px !important;
          }
          [data-hero-cta] {
            width: 100%;
            flex-direction: column;
            align-items: stretch !important;
            gap: 8px !important;
          }
          [data-hero-cta] a {
            justify-content: center;
            width: 100%;
          }
          [data-hero-cta-primary] {
            padding: 17px 24px !important;
          }
        }

/* ============ AJUSTES RESPONSIVE GENERALES ============ */
        @media (max-width: 600px) {
          main > section:not(#jd-hero) {
            padding-left: 20px !important;
            padding-right: 20px !important;
          }
        }

/* ============ TIMELINE MOBILE: línea vertical continua ============ */
        @media (max-width: 700px) {
          #jd-process-scroll { height: auto !important; }
          #jd-process-sticky { position: static !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; padding: 12px 0; }
          #jd-process-track > div[aria-hidden] { display: none !important; }
          #jd-process-track > div:last-child { display: flex !important; flex-direction: column; gap: 0; position: relative; padding-left: 50px; }
          #jd-process-track > div:last-child::before { content: ""; position: absolute; left: 26px; top: 8px; bottom: 8px; width: 2px; background: var(--border-dash); }
          #jd-process-track [id^="jd-step-"] { opacity: 1 !important; transform: none !important; display: flex !important; align-items: flex-start; gap: 20px; text-align: left; padding: 22px 0; max-width: none; }
          #jd-process-track [id^="jd-step-"] > span { margin: 0 !important; flex-shrink: 0; position: relative; z-index: 1; width: 60px; height: 60px; font-size: 17px; }
          #jd-process-track [id^="jd-step-"] h3 { margin-bottom: 6px !important; }
          #jd-process-track [id^="jd-step-"] p { max-width: none !important; margin: 0 !important; }
        }