/* ═══════════════════════════════════════════════════════════════
   2 · HERO PREMIUM · "AURORA SOBRE AZUL PROFUNDO"
   ───────────────────────────────────────────────────────────────
   Reemplaza el bloque del hero en dispatche.css (sección 2).

   Base conservada: #153286 (tu --dp-aurora actual).
   Encima se apilan: resplandores aurora, barrido de luz diagonal,
   trama de puntos, anillos concéntricos, filo superior de vidrio
   y una línea de acento inferior.

   ✅ NO requiere cambiar el markup. Funciona con:
        <section class="dp-hero">
          <div class="dp-hero-content">
            <div class="dp-hero-copy">
              <span class="dp-hero-eyebrow">…</span>
              <h1>…</h1>
              <p>…</p>
            </div>
          </div>
        </section>
      y también con las clases antiguas (dp-hero__info, __icon,
      __type, __title, __subtitle) para no romper otras páginas.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Azul base del hero (tu color) + derivados para las capas */
    --dp-hero-base: #153286;
    --dp-hero-deep: #0d1f57;
    --dp-hero-glow-1: rgba(99, 102, 241, 0.55); /* índigo */
    --dp-hero-glow-2: rgba(139, 92, 246, 0.45); /* violeta */
    --dp-hero-glow-3: rgba(34, 211, 238, 0.28); /* cian    */
}

/* ── 2.1 Contenedor ─────────────────────────────────────────── */
.dp-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 1.5rem;
    margin: 0 0 20px;
    border-radius: var(--dp-radius-lg, 22px);
    color: #fff;
    /* Capas de color sobre el azul base */
    background-color: var(--dp-hero-base);
    background-image:
    /* resplandor índigo arriba-izquierda */
    radial-gradient(780px 420px at 8% -30%, var(--dp-hero-glow-1), transparent 62%),
    /* resplandor violeta derecha */
    radial-gradient(680px 460px at 104% 118%, var(--dp-hero-glow-2), transparent 60%),
    /* toque cian abajo-centro */
    radial-gradient(520px 300px at 62% 130%, var(--dp-hero-glow-3), transparent 65%),
    /* profundidad hacia el borde inferior */
    linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, transparent 42%, var(--dp-hero-deep) 100%);
    /* Filo de vidrio arriba + sombra profunda azulada */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 40px rgba(13, 31, 87, 0.35), 0 4px 12px rgba(13, 31, 87, 0.25);
}

    /* Barrido de luz diagonal + trama de puntos (capa decorativa) */
    .dp-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background-image: linear-gradient(104deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 38%, transparent 60%), radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
        background-size: 100% 100%, 22px 22px;
        -webkit-mask-image: linear-gradient(100deg, transparent 22%, #000 105%);
        mask-image: linear-gradient(100deg, transparent 22%, #000 105%);
        pointer-events: none;
        animation: dpHeroDrift 24s ease-in-out infinite alternate;
    }

    /* Anillos concéntricos a la derecha */
    .dp-hero::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -70px;
        width: 190px;
        height: 190px;
        z-index: -1;
        transform: translateY(-50%);
        border-radius: 50%;
        background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.16), transparent 60%);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 44px rgba(255, 255, 255, 0.035), 0 0 0 45px rgba(255, 255, 255, 0.10), 0 0 0 92px rgba(255, 255, 255, 0.025), 0 0 0 93px rgba(255, 255, 255, 0.06);
        pointer-events: none;
    }

@keyframes dpHeroDrift {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(-14px, 8px, 0) scale(1.04);
    }
}

/* ── 2.2 Contenido ──────────────────────────────────────────── */
.dp-hero-content,
.dp-hero__info {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.35rem;
    width: 100%;
    place-content: space-between;
}

.dp-hero-copy {
    min-width: 0;
}

/* ── 2.3 Eyebrow (píldora de vidrio con punto vivo) ────────── */
.dp-hero-eyebrow,
.dp-hero__type {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.95rem 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

    .dp-hero-eyebrow::before,
    .dp-hero__type::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #7dd3fc;
        box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.25), 0 0 10px rgba(125, 211, 252, 0.9);
        animation: dpHeroPulse 2.4s ease-in-out infinite;
    }

@keyframes dpHeroPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(0.82);
    }
}

/* ── 2.4 Título con degradado ──────────────────────────────── */
.dp-hero h1,
.dp-hero__title {
    margin: 0.6rem 0 0;
    font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.5rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
    background: linear-gradient(180deg, #ffffff 0%, #c9dcff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 14px rgba(8, 20, 60, 0.45));
}

    /* Subrayado de acento bajo el título */
    .dp-hero-copy h1::after,
    .dp-hero__title::after {
        content: "";
        display: block;
        width: 62px;
        height: 4px;
        margin-top: 0.75rem;
        border-radius: 999px;
        background: linear-gradient(90deg, #7dd3fc 0%, #818cf8 55%, #c4b5fd 100%);
        box-shadow: 0 0 16px rgba(129, 140, 248, 0.7);
    }

/* ── 2.5 Descripción ───────────────────────────────────────── */
.dp-hero p,
.dp-hero__subtitle {
    margin: 0.85rem 0 0;
    max-width: 56ch;
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
}

/* ── 2.6 Icono opcional (si lo agregas al markup) ──────────── */
.dp-hero__icon {
    width: 66px;
    height: 66px;
    flex-shrink: 0;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 24px rgba(8, 20, 60, 0.35);
}

    .dp-hero__icon .material-symbols-outlined {
        font-size: 34px;
    }

/* Acciones a la derecha (si el hero las lleva) */
.dp-hero__actions {
    position: relative;
    z-index: 1;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ── 2.7 Variante ESCANEO (ámbar) ──────────────────────────── */
.dp-hero--scan {
    background-color: #b45309;
    background-image: radial-gradient(780px 420px at 8% -30%, rgba(251, 191, 36, 0.55), transparent 62%), radial-gradient(680px 460px at 104% 118%, rgba(249, 115, 22, 0.5), transparent 60%), linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, transparent 42%, #92400e 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 18px 40px rgba(146, 64, 14, 0.35);
}

    .dp-hero--scan .dp-hero-eyebrow::before,
    .dp-hero--scan .dp-hero__type::before {
        background: #fff7ed;
        box-shadow: 0 0 0 3px rgba(255, 247, 237, 0.25), 0 0 10px rgba(255, 247, 237, 0.9);
    }

    .dp-hero--scan h1,
    .dp-hero--scan .dp-hero__title {
        background: linear-gradient(180deg, #ffffff 0%, #ffe9c7 100%);
        -webkit-background-clip: text;
        background-clip: text;
    }

        .dp-hero--scan .dp-hero-copy h1::after,
        .dp-hero--scan .dp-hero__title::after {
            background: linear-gradient(90deg, #fff7ed 0%, #fcd34d 55%, #fdba74 100%);
            box-shadow: 0 0 16px rgba(252, 211, 77, 0.7);
        }

/* ── 2.8 Responsive + reduced motion ───────────────────────── */
@media (max-width: 768px) {
    .dp-hero {
        padding: 1.9rem 1.5rem;
    }

        .dp-hero::after {
            display: none;
        }

    .dp-hero-content,
    .dp-hero__info {
        flex-wrap: wrap;
        gap: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dp-hero::before,
    .dp-hero-eyebrow::before,
    .dp-hero__type::before {
        animation: none;
    }
}