/* =========================================================
   EFECTOS DE TARJETAS - PENSAMIENTOS AUTOMATICOS
   Solo efectos visuales. No altera estructura ni contenido.
   ========================================================= */

/* ---------- Tarjetas de dimensiones ---------- */

.thoughts-card {
    position: relative;
    overflow: hidden;

    transition:
        transform .35s cubic-bezier(.2,.7,.2,1),
        box-shadow .35s ease,
        border-color .35s ease,
        background-color .35s ease;

    animation: thoughtsCardEnter .65s both;
}


/* Línea decorativa superior */

.thoughts-card::before {
    content: "";
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #0d6efd,
            #5aa1ff,
            transparent
        );

    transform: scaleX(0);
    transform-origin: center;

    transition: transform .4s ease;
}


/* Entrada escalonada */

.thoughts-card:nth-child(1) {
    animation-delay: .05s;
}

.thoughts-card:nth-child(2) {
    animation-delay: .12s;
}

.thoughts-card:nth-child(3) {
    animation-delay: .19s;
}

.thoughts-card:nth-child(4) {
    animation-delay: .26s;
}

.thoughts-card:nth-child(5) {
    animation-delay: .33s;
}


/* Iconos */

.thoughts-card h3 i {
    display: inline-block;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        color .35s ease;
}


/* ---------- Mini tarjetas internas ---------- */

.thoughts-signal {
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease,
        background-color .28s ease;
}


/* ---------- Tarjetas de estrategias ---------- */

.thoughts-step {
    position: relative;
    overflow: hidden;

    transition:
        transform .35s cubic-bezier(.2,.7,.2,1),
        box-shadow .35s ease,
        border-color .35s ease;

    animation: thoughtsCardEnter .65s both;
}


.thoughts-step::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at top right,
            rgba(13,110,253,.11),
            transparent 38%
        );

    opacity: 0;

    transition: opacity .35s ease;
}


.thoughts-step:nth-child(1) {
    animation-delay: .08s;
}

.thoughts-step:nth-child(2) {
    animation-delay: .16s;
}

.thoughts-step:nth-child(3) {
    animation-delay: .24s;
}


/* Número de estrategia */

.thoughts-step-num {
    position: relative;
    z-index: 1;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease;
}


/* ---------- Animación de entrada ---------- */

@keyframes thoughtsCardEnter {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   EFECTOS SOLO EN DISPOSITIVOS QUE TIENEN HOVER REAL
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .thoughts-card:hover {
        transform: translateY(-7px);

        border-color: rgba(13,110,253,.22);

        box-shadow:
            0 20px 45px rgba(15,23,42,.11),
            0 5px 14px rgba(13,110,253,.07);
    }


    .thoughts-card:hover::before {
        transform: scaleX(1);
    }


    .thoughts-card:hover h3 i {
        transform:
            translateY(-2px)
            scale(1.12);

        color: #0d6efd;
    }


    .thoughts-signal:hover {
        transform: translateY(-3px);

        border-color: rgba(13,110,253,.22);

        background: #ffffff;

        box-shadow:
            0 9px 20px rgba(15,23,42,.07);
    }


    .thoughts-step:hover {
        transform: translateY(-7px);

        border-color: rgba(13,110,253,.24);

        box-shadow:
            0 20px 45px rgba(15,23,42,.10);
    }


    .thoughts-step:hover::before {
        opacity: 1;
    }


    .thoughts-step:hover .thoughts-step-num {
        transform:
            translateY(-2px)
            scale(1.08);

        box-shadow:
            0 8px 20px rgba(13,110,253,.28);
    }
}


/* =========================================================
   TABLET / MOVIL
   ========================================================= */

@media (max-width: 767.98px) {

    .thoughts-card,
    .thoughts-step {
        animation-duration: .5s;
    }

}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .thoughts-card,
    .thoughts-step,
    .thoughts-signal,
    .thoughts-card h3 i,
    .thoughts-step-num {

        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

}