/* business-software: estilos migrados preservando el diseño original. */

/* ==========================================================
   ANTHORIA — BUSINESS SOFTWARE PAGE

   Estilos exclusivos de Business Software.

   Contiene:
   - Layout principal.
   - Tarjeta de contenido.
   - Título y descripción.
   - Visual del sistema.
   - Seis módulos funcionales.
   - Núcleo central.
   - Animación del núcleo.
   - Tema oscuro.
   - Responsive.

   Este archivo es autosuficiente y no depende de
   web-development.css.
   ========================================================== */


/* ==========================================================
   ESTRUCTURA GENERAL
   ========================================================== */

body.business-software-page-body {
    min-height: 100vh;
    overflow-x: hidden;
}


@media (min-width: 769px) {

    body.business-software-page-body {
        background-color: rgba(255, 252, 246, 0.78);

        background-image:
            linear-gradient(145deg,
                rgba(255, 252, 246, 0.82),
                rgba(244, 237, 226, 0.90)),
            url(../../assets/images/home-background.jpg);

        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }


    body.business-software-page-body.dark-theme {
        background-color: #050605;

        background-image:
            linear-gradient(rgba(10, 9, 8, 0.54),
                rgba(10, 9, 8, 0.68)),
            url(../../assets/images/home-background-dark.jpg);

        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-attachment: fixed;
    }

}

/* ==========================================================
   SECCIÓN PRINCIPAL
   ========================================================== */

body.business-software-page-body main>.business-software-page {
    position: relative;

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

    gap: 48px;

    width: 100%;
    max-width: none;
    min-height: 100vh;

    padding: 80px 7%;

    overflow: hidden;
}


/* ==========================================================
   TARJETA PRINCIPAL DE CONTENIDO
   ========================================================== */

body.business-software-page-body .business-software-card {
    position: relative;
    z-index: 2;

    align-self: flex-start;

    width: 100%;
    max-width: 580px;
    height: 730px;
    min-height: 0;

    padding: 35px 46px 25px;

    background-color: rgba(255, 252, 246, 0.78);
    background-image:
        linear-gradient(145deg,
            rgba(255, 252, 246, 0.82),
            rgba(244, 237, 226, 0.90)),
        url(../../assets/images/home-background.jpg);

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    border:
        1px solid rgba(178, 145, 83, 0.28);

    border-radius: 30px;

    box-shadow:
        0 22px 48px rgba(76, 52, 21, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);

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

    transform: translateY(-33px);
}


/* ==========================================================
   CONTENIDO DE LA TARJETA
   ========================================================== */

body.business-software-page-body .business-software-card .web-development-content {
    width: 100%;
    max-width: none;

    margin: 0;

    text-align: left;

    transform: translateY(-10px);
}


/* ==========================================================
   ETIQUETA SERVICE
   ========================================================== */

body.business-software-page-body .service-label {
    display: block;

    width: 100%;

    margin-bottom: 20px;

    color: #c89a3d;

    font-size: 0.9rem;
    letter-spacing: 4px;

    text-align: left;
    text-transform: uppercase;
}


/* ==========================================================
   TÍTULO PRINCIPAL
   ========================================================== */

body.business-software-page-body .business-software-card .web-development-content h1 {
    margin-bottom: 20px;

    font-size: 3.5rem;
    line-height: 1.05;

    white-space: nowrap;

    text-align: left;
}


/* ==========================================================
   SUBTÍTULO
   ========================================================== */

body.business-software-page-body .service-subtitle {
    max-width: 520px;

    margin-bottom: 35px;

    font-size: 1.35rem;
    line-height: 1.5;

    text-align: left;
}


/* ==========================================================
   DIVISOR
   ========================================================== */

body.business-software-page-body .service-divider {
    display: flex;

    align-items: center;

    gap: 15px;

    width: 100%;

    margin: 22px 0;
}


body.business-software-page-body .service-divider span:first-child,
body.business-software-page-body .service-divider span:last-child {
    flex: 1;

    height: 1px;

    background: #d8b46c;
}


body.business-software-page-body .divider-symbol {
    color: #d8b46c;
}


/* ==========================================================
   DESCRIPCIÓN
   ========================================================== */

body.business-software-page-body .service-description {
    max-width: 560px;

    margin-bottom: 45px;

    line-height: 1.8;

    text-align: left;
}


/* ==========================================================
   VISUAL DEL SISTEMA

   Contiene:
   - Fila superior de tres módulos.
   - Núcleo central.
   - Fila inferior de tres módulos.
   ========================================================== */

body.business-software-page-body .business-software-page .software-visual {
    position: relative;

    display: flex;
    flex-direction: column;

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

    gap: 36px;

    width: 51%;
    min-height: 650px;

    margin-top: -120px;
    margin-right: -2%;

    overflow: visible;
}


/* ==========================================================
   FILAS DE MÓDULOS
   ========================================================== */

body.business-software-page-body .business-software-page .software-feature-row {
    position: relative;
    z-index: 4;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    width: 100%;
}


/* ==========================================================
   MÓDULOS DEL SISTEMA
   ========================================================== */

body.business-software-page-body .business-software-page .software-feature-card {
    position: relative;

    display: flex;
    flex-direction: column;

    justify-content: center;

    min-width: 0;
    min-height: 108px;

    padding: 17px 15px;

    overflow: hidden;

    background:
        rgba(255, 252, 247, 0.78);

    border:
        1px solid rgba(198, 150, 63, 0.62);

    border-radius: 15px;

    color: #2d2924;

    text-decoration: none;

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

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.08),
        inset 0 0 15px rgba(214, 166, 79, 0.04);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


/* ==========================================================
   LÍNEA DORADA SUPERIOR
   ========================================================== */

body.business-software-page-body .business-software-page .software-feature-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 15px;

    width: 42px;
    height: 2px;

    background: #d6a64f;
}


/* ==========================================================
   PUNTO LUMINOSO
   ========================================================== */

body.business-software-page-body .business-software-page .software-feature-card::after {
    content: "";

    position: absolute;

    right: 13px;
    bottom: 13px;

    width: 7px;
    height: 7px;

    background: #d6a64f;

    border-radius: 50%;

    box-shadow:
        0 0 0 4px rgba(214, 166, 79, 0.10),
        0 0 11px rgba(214, 166, 79, 0.45);
}


/* ==========================================================
   TEXTO DE LOS MÓDULOS
   ========================================================== */

body.business-software-page-body .business-software-page .software-feature-card strong {
    margin-bottom: 7px;

    font-size: 0.92rem;
    font-weight: 600;
}


body.business-software-page-body .business-software-page .software-feature-card span {
    color:
        rgba(45, 41, 36, 0.68);

    font-size: 0.75rem;
    line-height: 1.45;
}


/* ==========================================================
   HOVER DE LOS MÓDULOS
   ========================================================== */

body.business-software-page-body .business-software-page .software-feature-card:hover {
    border-color:
        rgba(214, 166, 79, 1);

    transform: translateY(-6px);

    box-shadow:
        0 17px 30px rgba(0, 0, 0, 0.13),
        0 0 17px rgba(214, 166, 79, 0.16);
}


/* ==========================================================
   NÚCLEO CENTRAL
   ========================================================== */

body.business-software-page-body .business-software-page .software-core {
    position: relative;
    z-index: 5;

    flex-shrink: 0;

    display: flex;
    flex-direction: column;

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

    width: 255px;
    min-height: 185px;

    padding: 28px 24px;

    background:
        linear-gradient(145deg,
            rgba(22, 20, 18, 0.96),
            rgba(48, 43, 36, 0.92));

    border:
        1px solid rgba(214, 166, 79, 0.95);

    border-radius: 22px;

    color: #ffffff;

    text-align: center;

    cursor: pointer;

    box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.22),
        0 0 25px rgba(214, 166, 79, 0.18),
        inset 0 0 22px rgba(214, 166, 79, 0.06);

    animation:
        software-core-pulse 2.8s ease-in-out infinite;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;

    transform-origin: center;

    will-change: transform;
}


/* ==========================================================
   CONEXIÓN CON LA FILA SUPERIOR
   ========================================================== */

body.business-software-page-body .business-software-page .software-core::before {
    content: "";

    position: absolute;

    top: -37px;
    left: 50%;

    width: 1px;
    height: 37px;

    background:
        rgba(214, 166, 79, 0.75);

    transform: translateX(-50%);
}


/* ==========================================================
   CONEXIÓN CON LA FILA INFERIOR
   ========================================================== */

body.business-software-page-body .business-software-page .software-core::after {
    content: "";

    position: absolute;

    bottom: -37px;
    left: 50%;

    width: 1px;
    height: 37px;

    background:
        rgba(214, 166, 79, 0.75);

    transform: translateX(-50%);
}


/* ==========================================================
   TEXTO DEL NÚCLEO
   ========================================================== */

body.business-software-page-body .business-software-page .software-core>span {
    margin-bottom: 10px;

    color: #d6a64f;

    font-size: 0.68rem;
    letter-spacing: 0.22em;
}


body.business-software-page-body .business-software-page .software-core strong {
    margin-bottom: 10px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 2rem;
    font-weight: 500;
}


body.business-software-page-body .business-software-page .software-core small {
    max-width: 190px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 0.72rem;
    line-height: 1.5;
}


/* ==========================================================
   ANIMACIÓN DEL NÚCLEO
   ========================================================== */

@keyframes software-core-pulse {

    0%,
    100% {
        transform: scale(1);

        box-shadow:
            0 24px 50px rgba(0, 0, 0, 0.22),
            0 0 25px rgba(214, 166, 79, 0.18),
            inset 0 0 22px rgba(214, 166, 79, 0.06);
    }

    50% {
        transform: scale(1.10);

        box-shadow:
            0 30px 65px rgba(0, 0, 0, 0.28),
            0 0 45px rgba(214, 166, 79, 0.50),
            inset 0 0 32px rgba(214, 166, 79, 0.16);
    }

}


/* ==========================================================
   HOVER DEL NÚCLEO
   ========================================================== */

body.business-software-page-body .business-software-page .software-core:hover {
    animation: none;

    border-color:
        rgba(214, 166, 79, 1);

    transform: scale(1.18);

    box-shadow:
        0 34px 75px rgba(0, 0, 0, 0.32),
        0 0 60px rgba(214, 166, 79, 0.65),
        inset 0 0 38px rgba(214, 166, 79, 0.20);
}


/* ==========================================================
   DARK THEME
   ========================================================== */

body.business-software-page-body.dark-theme .business-software-card {
    background-color: rgba(18, 16, 14, 0.78);
    background-image:
        linear-gradient(145deg,
            rgba(13, 12, 10, 0.78),
            rgba(18, 16, 14, 0.90)),
        url(../../assets/images/home-background-dark.jpg);

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    border-color:
        rgba(209, 168, 95, 0.38);

    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}


body.business-software-page-body.dark-theme .business-software-page .software-feature-card {
    background:
        rgba(25, 22, 19, 0.72);

    border-color:
        rgba(209, 168, 95, 0.62);

    color: #f3eadc;

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.22),
        inset 0 0 15px rgba(209, 168, 95, 0.06);
}


body.business-software-page-body.dark-theme .business-software-page .software-feature-card span {
    color:
        rgba(243, 234, 220, 0.72);
}


/* ==========================================================
   TABLET / LAPTOP PEQUEÑO
   ========================================================== */

@media (max-width: 1100px) {

    body.business-software-page-body main>.business-software-page {
        align-items: flex-start;

        padding-left: 5%;
        padding-right: 5%;
    }


    body.business-software-page-body .business-software-card {
        width: 42%;
        height: auto;
        min-height: 650px;

        padding:
            32px 30px;
    }


    body.business-software-page-body .business-software-card .web-development-content {
        width: 100%;
    }


    body.business-software-page-body .business-software-card .web-development-content h1 {
        font-size:
            clamp(2.7rem, 4.5vw, 3.5rem);

        white-space: normal;
    }


    body.business-software-page-body .business-software-page .software-visual {
        width: 56%;

        margin-right: 0;
    }


    body.business-software-page-body .business-software-page .software-feature-card {
        padding: 15px 12px;
    }


    body.business-software-page-body .business-software-page .software-feature-card strong {
        font-size: 0.82rem;
    }


    body.business-software-page-body .business-software-page .software-feature-card span {
        font-size: 0.68rem;
    }

}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 768px) {

    body.business-software-page-body main>.business-software-page {
        flex-direction: column;

        gap: 40px;

        min-height: auto;

        padding:
            48px 24px 72px;

        overflow: visible;
    }


    body.business-software-page-body .business-software-card {
        width: 100%;
        max-width: none;

        height: auto;
        min-height: 0;

        padding:
            30px 26px;

        border-radius: 24px;

        transform: none;
    }


    body.business-software-page-body .business-software-card .web-development-content {
        transform: none;
    }


    body.business-software-page-body .business-software-card .web-development-content h1 {
        font-size:
            clamp(2.7rem, 11vw, 3.5rem);

        white-space: normal;
    }


    body.business-software-page-body .service-subtitle {
        font-size: 1.15rem;
    }


    body.business-software-page-body .business-software-page .software-visual {
        width: 100%;
        min-height: auto;

        margin-top: 15px;
        margin-right: 0;

        gap: 32px;
    }


    body.business-software-page-body .business-software-page .software-feature-row {
        grid-template-columns: 1fr;
    }


    body.business-software-page-body .business-software-page .software-feature-card {
        min-height: 95px;
    }


    body.business-software-page-body .business-software-page .software-core {
        width:
            min(255px, 88%);
    }


    body.business-software-page-body .business-software-page .software-core::before,
    body.business-software-page-body .business-software-page .software-core::after {
        height: 32px;
    }


    body.business-software-page-body .business-software-page .software-core::before {
        top: -32px;
    }


    body.business-software-page-body .business-software-page .software-core::after {
        bottom: -32px;
    }

}


/* ==========================================================
   MÓVILES PEQUEÑOS
   ========================================================== */

@media (max-width: 430px) {

    body.business-software-page-body main>.business-software-page {
        padding:
            38px 18px 56px;
    }


    body.business-software-page-body .business-software-card {
        padding:
            26px 20px;

        border-radius: 20px;
    }


    body.business-software-page-body .business-software-card .web-development-content h1 {
        font-size:
            clamp(2.35rem, 12vw, 3rem);
    }


    body.business-software-page-body .service-label {
        font-size: 0.78rem;
        letter-spacing: 3px;
    }


    body.business-software-page-body .service-subtitle {
        margin-bottom: 28px;

        font-size: 1.05rem;
    }


    body.business-software-page-body .service-description {
        margin-bottom: 30px;
    }


    body.business-software-page-body .business-software-page .software-feature-card {
        min-height: 90px;

        padding: 14px;

        border-radius: 14px;
    }


    body.business-software-page-body .business-software-page .software-core {
        width:
            min(235px, 86%);

        min-height: 170px;

        padding:
            24px 20px;
    }


    body.business-software-page-body .business-software-page .software-core strong {
        font-size: 1.8rem;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

    body.business-software-page-body .business-software-page .software-core {
        animation: none;
    }


    body.business-software-page-body .business-software-page .software-core,
    body.business-software-page-body .business-software-page .software-feature-card {
        transition: none;
    }


    body.business-software-page-body .business-software-page .software-core:hover,
    body.business-software-page-body .business-software-page .software-feature-card:hover {
        transform: none;
    }

}