/* ==========================================================
   Amar — cuadros grandes 1, 2 y 3
   Solo color. No cambia estructura ni dimensiones.
   ========================================================== */

.thoughts-steps .thoughts-step {
    position: relative;

    border:
        1px solid
        rgba(13, 110, 253, .28) !important;

    overflow: hidden;
}


/* CUADRO 1 */
.thoughts-steps .thoughts-step:nth-child(1) {
    background:
        linear-gradient(
            135deg,
            #b9e4ff 0%,
            #d7efff 52%,
            #edf9ff 100%
        ) !important;
}


/* CUADRO 2 */
.thoughts-steps .thoughts-step:nth-child(2) {
    background:
        linear-gradient(
            135deg,
            #9fd4ff 0%,
            #c7e6ff 52%,
            #e6f5ff 100%
        ) !important;
}


/* CUADRO 3 */
.thoughts-steps .thoughts-step:nth-child(3) {
    background:
        linear-gradient(
            135deg,
            #b9e4ff 0%,
            #d7efff 52%,
            #edf9ff 100%
        ) !important;
}


/* Franja superior */
.thoughts-steps .thoughts-step::after {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 6px;

    background:
        linear-gradient(
            90deg,
            #00a8ff,
            #006de5
        );

    pointer-events: none;
}


.thoughts-steps .thoughts-step:nth-child(2)::after {
    background:
        linear-gradient(
            90deg,
            #006de5,
            #48c6ff
        );
}


/* Número 1, 2 y 3 */
.thoughts-steps .thoughts-step-num {
    background:
        linear-gradient(
            135deg,
            #087dec,
            #005bc4
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 7px 18px
        rgba(0, 91, 196, .25);
}


/* Títulos */
.thoughts-steps .thoughts-step h3 {
    color: #073b7a !important;
}


/* Texto */
.thoughts-steps .thoughts-step p {
    color: #203247 !important;
}


/* Cuadro interno de ejercicio */
.thoughts-steps .thoughts-exercise {
    background:
        rgba(
            255,
            255,
            255,
            .72
        ) !important;

    border:
        1px solid
        rgba(13, 110, 253, .13);

    color: #30445a !important;
}


/* Mantener el hover original, reforzado suavemente */
@media (hover: hover) {

    .thoughts-steps .thoughts-step:hover {
        border-color:
            rgba(
                0,
                105,
                220,
                .50
            ) !important;

        box-shadow:
            0 16px 36px
            rgba(
                16,
                99,
                180,
                .18
            ) !important;
    }
}


/* Móvil: mismos colores sin alterar el apilado */
@media (max-width: 575.98px) {

    .thoughts-steps .thoughts-step::after {
        height: 5px;
    }
}