/* ================================================================
   HERO.CSS — sección Hero
   Se referencia SOLO en Views/Home/Index.cshtml (sección @Styles)
   Depende de variables definidas en tokens.css
   ================================================================ */
.hero {
    padding: 96px 0 96px;
    position: relative;
    background: radial-gradient(1100px 480px at 78% -10%, rgba(18,59,121,0.10), transparent 60%), var(--paper);
    overflow: hidden;
}
    /* Textura de fondo tipo hoja de plano — muy sutil, refuerza "Ingeniería" */
    .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(6,27,72,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(6,27,72,0.035) 1px, transparent 1px);
        background-size: 44px 44px;
        mask-image: radial-gradient(closest-side, black, transparent 85%);
        pointer-events: none;
    }

    .hero .container {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 56px;
        align-items: center;
    }

/* ── HERO-COPY LAYOUT — riel lateral + contenido ── */
.hero-copy {
    display: flex;
    gap: 26px;
    align-items: stretch
}

/* Riel vertical tipo lomo de reporte anual — reemplaza al eyebrow
   horizontal tradicional. Texto de marca corrido en vertical. */
.hero-rail {
    flex: none;
    width: 20px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.hero-rail-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--spark);
    flex: none;
    margin-bottom: 16px
}

.hero-rail-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--ink-soft);
    text-transform: uppercase;
    white-space: nowrap;
}

.hero-rail-line {
    width: 1px;
    flex: 1;
    background: var(--line);
    margin-top: 16px
}

.hero-content {
    flex: 1;
    min-width: 0;
    position: relative
}

/* Watermark — el mismo ícono de esquina del plano técnico, ahora
   gigante y casi invisible, detrás del titular. Un solo motivo
   visual usado en dos escalas (riel chico / marca de fondo grande). */
.hero-watermark {
    position: absolute;
    top: -38px;
    left: -26px;
    width: 230px;
    height: 230px;
    color: var(--navy);
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
}

.hero-title {
    position: relative;
    z-index: 1;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(32px,4.6vw,54px);
    line-height: 1.08;
    letter-spacing: -0.5px;
    color: var(--navy);
    margin-bottom: 22px;
}

    .hero-title em {
        font-style: normal;
        background: linear-gradient(100deg,var(--blue),var(--spark));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.hero-sub {
    position: relative;
    z-index: 1;
    font-size: 17px;
    color: var(--ink-soft);
    max-width: 520px;
    margin-bottom: 34px;
}

/* ── DIVISOR TIPO "LÍNEA DE COTA" ── */
.hero-divider {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    max-width: 440px
}

.hero-divider-tick {
    width: 1px;
    height: 10px;
    background: var(--line);
    flex: none
}

.hero-divider-line {
    flex: 1;
    height: 1px;
    background: var(--line)
}

.hero-divider-label {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* ── HERO PATHS — lista indexada ── */
.hero-paths {
    position: relative;
    z-index: 1;
    max-width: 460px
}

.hero-path {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 6px 16px 14px;
    border-bottom: 1px solid var(--line-soft);
    position: relative;
    transition: padding-left .2s ease,background .2s ease;
}

    .hero-path:first-child {
        border-top: 1px solid var(--line-soft)
    }

    .hero-path::before {
        content: '';
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 2px;
        background: transparent;
        transition: background .2s ease;
        border-radius: 2px;
    }

    .hero-path:hover {
        padding-left: 20px;
        background: var(--mist)
    }

        .hero-path:hover::before {
            background: var(--spark)
        }

.hero-path-index {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-soft);
    flex: none;
    width: 20px
}

.hero-path-text {
    flex: 1;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.4
}

.hero-path-arrow {
    flex: none;
    font-family: var(--mono);
    color: var(--line);
    font-size: 15px;
    transition: color .2s ease,transform .2s ease
}

.hero-path:hover .hero-path-arrow {
    color: var(--spark);
    transform: translateX(3px)
}

.hero-path.is-primary {
    padding-top: 20px;
    padding-bottom: 20px
}

    .hero-path.is-primary .hero-path-index {
        color: var(--spark)
    }

    .hero-path.is-primary .hero-path-text {
        font-size: 16.5px;
        font-weight: 700
    }

    .hero-path.is-primary::before {
        background: var(--line)
    }

    .hero-path.is-primary:hover::before {
        background: var(--spark)
    }

/* ================================================================
   HERO DIAGRAM — el logo ya no flota solo: queda compuesto como una
   pieza de plano técnico, con un anillo guía y 3 fichas de datos
   "anotadas" (mismo lenguaje de línea punteada + punto del divisor
   de la izquierda), en vez de repetir íconos que el logo ya trae.
   ================================================================ */
.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.hero-diagram {
    position: relative;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 1/1
}

.hero-diagram-ring {
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    border: 1px dashed var(--line);
    animation: ring-spin 90s linear infinite;
}

@keyframes ring-spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.hero-diagram-core {
    position: absolute;
    inset: 23%;
    z-index: 2
}

    .hero-diagram-core .hero-logo-glow {
        position: absolute;
        inset: -25%;
        background: radial-gradient(closest-side, rgba(18,59,121,0.16), transparent 72%);
        filter: blur(6px);
        z-index: 0;
        animation: glow-pulse 4.5s ease-in-out infinite;
    }

@keyframes glow-pulse {
    0%,100% {
        opacity: 0.65;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.08)
    }
}

.hero-diagram-core img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto
}

/* Fichas anotadas — mismo motivo visual que .hero-divider (dash + dot),
   ahora con ícono + color de acento propio por ficha para que se
   identifiquen de un vistazo y queden coordinadas entre sí.
   Fondo con tinte dorado sutil (no blanco puro). */
.hero-chip {
    --accent: var(--spark);
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    background: color-mix(in srgb, var(--gold) 7%, white);
    border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line));
    border-radius: 16px;
    padding: 12px 16px;
    min-width: 172px;
    box-shadow: 0 24px 44px -26px rgba(6,27,72,0.28);
    transition: transform .25s ease,box-shadow .25s ease;
    animation: chip-float 5s ease-in-out infinite;
}

@keyframes chip-float {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-7px)
    }
}

@media (hover:hover) {
    .hero-chip:hover {
        animation-play-state: paused;
        transform: translateY(-3px);
        box-shadow: 0 30px 54px -24px rgba(6,27,72,0.34)
    }
}

.hero-chip::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 18px;
    width: 32px;
    height: 1px;
    background-image: linear-gradient(to right, var(--accent) 50%, transparent 0);
    background-size: 6px 1px;
}

.hero-chip::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 18px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

.hero-chip-icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--navy) 9%, white);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .hero-chip-icon svg {
        width: 17px;
        height: 17px
    }

.hero-chip-text strong {
    display: block;
    font-family: var(--display);
    font-weight: 800;
    color: var(--navy);
    font-size: 17px;
    line-height: 1
}

.hero-chip-text span {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .3px;
    color: color-mix(in srgb, var(--blue) 55%, var(--ink-soft));
    margin-top: 5px;
    text-transform: uppercase;
    line-height: 1.35
}

/* ── UBICACIÓN — arriba centrada / abajo centrada / columna de 3 al costado ──
   Nota: la centrada usa margin-left en vez de transform:translateX(-50%)
   para no pisar el transform de la animación de flotado (que anima
   translateY sobre el mismo elemento). ── */
.hero-chip-top {
    position: absolute;
    top: -6%;
    left: 50%;
    margin-left: -86px;
    animation-delay: 0s
}

.hero-chip-bottom {
    position: absolute;
    bottom: -8%;
    left: 50%;
    margin-left: -86px;
    animation-delay: 2s
}

.hero-chip-column {
    position: absolute;
    top: 50%;
    right: -55%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 3;
}

    .hero-chip-column .hero-chip {
        position: relative
    }

        .hero-chip-column .hero-chip:nth-child(1) {
            animation-delay: 0.8s
        }

        .hero-chip-column .hero-chip:nth-child(2) {
            animation-delay: 1.8s
        }

        .hero-chip-column .hero-chip:nth-child(3) {
            animation-delay: 2.8s
        }

@media (max-width:900px) {
    .hero .container {
        grid-template-columns: 1fr;
        gap: 44px
    }

    .hero-rail {
        display: none
    }

    .hero-watermark {
        width: 160px;
        height: 160px;
        top: -24px;
        left: -14px
    }

    .hero-diagram {
        max-width: 280px;
        aspect-ratio: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-diagram-ring {
        display: none
    }

    .hero-diagram-core {
        position: static;
        inset: auto;
        width: 220px;
        margin-bottom: 24px
    }

    .hero-chip {
        position: static;
        min-width: 0
    }

        .hero-chip::before, .hero-chip::after {
            display: none
        }

    .hero-chip {
        width: 100%;
        margin-bottom: 10px;
        text-align: left
    }

    .hero-chip-top, .hero-chip-bottom {
        position: static;
        margin: 0 0 10px
    }

    .hero-chip-column {
        position: static;
        transform: none;
        right: auto;
        top: auto;
        display: contents; /* deja que sus 3 fichas caigan en el flujo normal de .hero-diagram */
    }
}

/* Movimiento continuo (anillo, glow, fichas): sutil por diseño, pero
   se desactiva por completo si el usuario prefiere menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .hero-diagram-ring,
    .hero-diagram-core .hero-logo-glow,
    .hero-chip {
        animation: none
    }
}