/* ==========================
   ABOUT — CNA PREMIUM
========================== */

/* SOBRE CNA — DISTRIBUCIÓN */

.about {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 7rem 0 5rem;

    background-image:
        linear-gradient(
            180deg,
            #050a1b 0%,
            rgba(5, 10, 27, .08) 15%,
            rgba(5, 10, 27, .08) 75%,
            #050a1b 100%
        ),
        url("../../assets/images/about-bg.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #050a1b;
}

.about::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(3, 7, 20, 0.65) 0%,
        rgba(3, 7, 20, 0.48) 35%,
        rgba(3, 7, 20, 0.20) 65%,
        rgba(3, 7, 20, 0.28) 100%
    );

    z-index: 0;
    pointer-events: none;
}


.about > .container {
    position: relative;
    z-index: 2;
}

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
}

.about-title {
    font-size: clamp(2.5rem, 3.5vw, 4rem);
    line-height: 1.12;
    letter-spacing: -.035em;
    margin-top: 1rem;
    margin-bottom: 1.8rem;
}

.about-title-white {
    display: block;
}

.about-highlight {
    display: block;

    background: linear-gradient(
        90deg,
        #398cff,
        #18d7f5
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-content p {
    color: var(--text-secondary);
    line-height: 1.9;
    max-width: 600px;
    margin-top: 1.3rem;
}

.about-content .about-text {
    margin-bottom: 2rem;
}

.about-content .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* COMPOSICIÓN DERECHA */

/* COMPOSICIÓN VISUAL INTEGRADA */

/* ÁREA DE ELEMENTOS FLOTANTES */

.about-visual {
    position: relative;
    width: 100%;
    height: 490px;
    min-width: 0;
    overflow: visible;
    perspective: 1100px;
}

/* TARJETAS */

.about-floating-card {
    position: absolute;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 1rem;

    min-width: 205px;
    padding: 1rem 1.15rem;

    border-radius: 17px;
    border: 1px solid rgba(59, 190, 255, .65);

    background: linear-gradient(
        135deg,
        rgba(9, 39, 84, .85),
        rgba(3, 14, 38, .94)
    );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 18px 35px rgba(0, 0, 0, .4),
        0 0 25px rgba(0, 165, 255, .2),
        inset 0 1px 0 rgba(150, 225, 255, .15);

    transform: rotateY(-5deg);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.about-floating-card:hover {
    transform: rotateY(0deg) translateY(-8px) scale(1.04);

    box-shadow:
        0 25px 45px rgba(0, 0, 0, .5),
        0 0 35px rgba(0, 190, 255, .4);
}

/* ICONOS */

.about-card-icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: rgba(0, 120, 255, .16);
}

.about-card-icon svg {
    width: 26px;
    height: 26px;
    color: #27caff;
}

.about-floating-card > div {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.about-floating-card strong {
    color: #fff;
    font-size: .95rem;
}

.about-floating-card div span {
    color: #afc8e4;
    font-size: .75rem;
}

/* POSICIONES */

/* DISEÑO WEB — sobre la esquina superior izquierda del monitor */
.about-card-design {
    top: -5%;
    left: 15%;
    transform: rotateY(-8deg) rotateZ(-2deg);
}

/* DESARROLLO — zona superior derecha */
.about-card-code {
    top: 20%;
    right: -50%;
    transform: rotateY(-10deg) rotateZ(2deg);
}

/* ESTRATEGIA — zona inferior derecha */
.about-card-strategy {
    top: 63%;
    right: -16%;
    transform: rotateY(-10deg) rotateZ(-2deg);
}

/* CONEXIONES LUMINOSAS */

.about-floating-card::after {
    content: "";
    position: absolute;

    width: 1px;
    height: 38px;

    background: linear-gradient(
        to bottom,
        rgba(0, 210, 255, .95),
        rgba(0, 210, 255, 0)
    );

    box-shadow: 0 0 10px #00cfff;
}

.about-floating-card::before {
    content: "";
    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;
    background: #49e7ff;

    box-shadow:
        0 0 8px #00cfff,
        0 0 20px #00cfff;
}

/* Diseño Web: conexión hacia abajo */

.about-card-design::after {
    left: 50%;
    top: 100%;
}

.about-card-design::before {
    left: calc(50% - 4px);
    top: calc(100% + 35px);
}

/* Desarrollo y Estrategia: conexión hacia la izquierda */

.about-card-code::after,
.about-card-strategy::after {
    width: 45px;
    height: 1px;
    top: 50%;
    right: 100%;

    background: linear-gradient(
        to left,
        #35dfff,
        transparent
    );
}

.about-card-code::before,
.about-card-strategy::before {
    top: calc(50% - 4px);
    right: calc(100% + 42px);
}

/* VALORES INFERIORES */

.about-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;

    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(70, 155, 255, .15);
}

.about-value {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.about-value:not(:last-child) {
    border-right: 1px solid rgba(70, 155, 255, .3);
}

.about-value-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;
    flex-shrink: 0;

    border: 1px solid rgba(0, 180, 255, .55);
    border-radius: 50%;

    background: rgba(5, 29, 69, .75);
    color: #21caff;
}

.about-value-icon svg {
    width: 27px;
    height: 27px;
}

.about-value > div:last-child {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.about-value strong {
    color: #fff;
    font-size: 1.05rem;
}

.about-value span {
    color: #b2c7df;
    font-size: .85rem;
}

/* Evita que la regla antigua agregue estrellas */
.about-values span::before {
    content: none;
}

/* ABOUT — Alineación de los párrafos */

.about-content .section-description,
.about-content .about-text {
    margin-left: 0;
    padding-left: 0;
    text-indent: 0;
    max-width: 490px;
}

/* RESPONSIVE */

@media (max-width: 992px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-visual {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
    }

    .about-values {
        margin-top: 3rem;
        gap: 1.5rem;
    }
}

@media (max-width: 600px) {
    .about {
        padding: 5rem 0 4rem;
    }

    .about-title {
        font-size: clamp(2rem, 8vw, 2.8rem);
    }

    .about-visual {
        padding: 3rem 0 4rem;
    }

    .about-floating-card {
        min-width: 0;
        padding: .7rem .8rem;
    }

    .about-floating-card strong {
        font-size: .78rem;
    }

    .about-floating-card span {
        font-size: .65rem;
    }

    .about-card-design {
        left: 0;
        top: .5rem;
    }

    .about-card-code {
        right: 0;
        top: 45%;
    }

    .about-card-strategy {
        left: 4%;
        bottom: .5rem;
    }

    .about-values {
        justify-content: flex-start;
        gap: 1rem 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-image img,
    .about-floating-card {
        transition: none;
    }
}

@media (max-width: 992px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-visual {
        width: 100%;
        max-width: 680px;
        margin: 2rem auto 0;
    }

    .about-image {
        width: 100%;
        margin-left: 0;
    }

    .about-card-design {
        left: 0;
    }

    .about-card-code,
    .about-card-strategy {
        right: 0;
    }
}

@media (max-width: 600px) {
    .about-title {
        font-size: clamp(2rem, 8vw, 2.8rem);
    }

    .about-floating-card {
        min-width: 0;
        max-width: 48%;
        padding: .65rem .75rem;
        gap: .5rem;
    }

    .about-floating-card svg {
        width: 22px;
        height: 22px;
    }

    .about-floating-card strong {
        font-size: .75rem;
    }

    .about-floating-card span {
        font-size: .62rem;
    }

    .about-values {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .about-value:not(:last-child) {
        border-right: none;
    }
}

@media (max-width: 992px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .about-visual {
        height: 350px;
        max-width: 680px;
        margin: 0 auto;
    }

    .about-card-design {
        left: 4%;
    }

    .about-card-code,
    .about-card-strategy {
        right: 4%;
    }
}

@media (max-width: 600px) {
    .about {
        padding: 5rem 0 4rem;
        background-position: 62% center;
    }

    .about-title {
        font-size: clamp(2rem, 8vw, 2.8rem);
    }

    .about-visual {
        height: 280px;
    }

    .about-floating-card {
        min-width: 0;
        max-width: 55%;
        padding: .65rem .75rem;
        gap: .5rem;
    }

    .about-card-icon {
        width: 32px;
        height: 32px;
    }

    .about-card-icon svg {
        width: 20px;
        height: 20px;
    }

    .about-floating-card strong {
        font-size: .75rem;
    }

    .about-floating-card div span {
        font-size: .62rem;
    }

    .about-card-code,
    .about-card-strategy {
        right: 0;
    }
}

@media (max-width: 1200px) {
    .about-card-design {
        left: 0;
    }

    .about-card-code,
    .about-card-strategy {
        right: 0;
    }
}


/* ==========================================
   CNA — ABOUT FLOATING MICROANIMATIONS
========================================== */

/* Movimiento sutil del contenido interior */

/* ==========================================
   CNA — ABOUT HOLOGRAPHIC FLOATING CARDS
========================================== */

@media (prefers-reduced-motion: no-preference) {

    /* Flotación sin modificar transform */
    .about-floating-card.reveal.is-visible {
        animation: cnaCardFloat 4s ease-in-out infinite;
    }

    /* Movimiento desfasado */
    .about-card-design.reveal.is-visible {
        animation-delay: 0s;
    }

    .about-card-code.reveal.is-visible {
        animation-delay: -1.3s;
    }

    .about-card-strategy.reveal.is-visible {
        animation-delay: -2.6s;
    }

    /* Pausar el movimiento cuando pasamos el mouse */
    .about-floating-card.reveal.is-visible:hover {
        animation-play-state: paused;
    }
}

/* Animamos translate, no transform */
@keyframes cnaCardFloat {

    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -12px;
    }

}