/* ============================================================
   TIPOS DE SITIO
============================================================ */

.dmxWebTypes {

    position: relative;
    overflow: hidden;

    padding:
        clamp(72px, 8vw, 120px)
        0;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(72, 94, 255, 0.14),
            transparent 34%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(83, 231, 194, 0.08),
            transparent 30%
        ),
        #080b12;

    color: #ffffff;

}


.dmxWebTypes::before {

    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 20%,
            #000 80%,
            transparent
        );

}


.dmxWebTypesContainer {

    position: relative;
    z-index: 2;

}


/* ============================================================
   ENCABEZADO
============================================================ */

.dmxWebTypesHeader {

    display: grid;
    grid-template-columns:
        minmax(180px, 0.65fr)
        minmax(0, 1.35fr);

    align-items: end;

    gap:
        clamp(32px, 6vw, 88px);

    margin-bottom:
        clamp(36px, 5vw, 64px);

}


.dmxWebTypesEyebrow {

    display: flex;
    align-items: center;

    gap: 14px;

    padding-bottom: 10px;

}


.dmxWebTypesEyebrow span {

    width: 38px;
    height: 1px;

    flex: 0 0 auto;

    background:
        linear-gradient(
            90deg,
            #6f7dff,
            #64e6c8
        );

}


.dmxWebTypesEyebrow p {

    margin: 0;

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

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.17em;
    text-transform: uppercase;

}


.dmxWebTypesHeading {

    display: grid;

    gap: 18px;

}


.dmxWebTypesHeading h2 {

    max-width: 760px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(2.35rem, 5vw, 4.8rem);

    font-weight: 700;
    line-height: 0.98;

    letter-spacing: -0.055em;

}


.dmxWebTypesHeading h2 span {

    display: block;

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

}


.dmxWebTypesHeading > p {

    max-width: 540px;

    margin: 0;

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

    font-size:
        clamp(0.98rem, 1.2vw, 1.08rem);

    line-height: 1.65;

}


/* ============================================================
   GRID
============================================================ */

.dmxWebTypesGrid {

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

    gap: 14px;

}


/* ============================================================
   TARJETA
============================================================ */

.dmxWebTypeCard {

    position: relative;
    isolation: isolate;

    display: grid;
    grid-template-columns:
        58px
        minmax(0, 1fr);

    align-items: start;

    gap: 22px;

    min-height: 210px;

    overflow: hidden;

    padding:
        clamp(24px, 3vw, 34px);

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 24px 60px rgba(0, 0, 0, 0.2);

    transition:
        transform 280ms ease,
        border-color 280ms ease,
        background-color 280ms ease,
        box-shadow 280ms ease;

}


.dmxWebTypeCard::before {

    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    opacity: 0;

    background:
        radial-gradient(
            circle at top left,
            rgba(111, 125, 255, 0.2),
            transparent 50%
        );

    transition:
        opacity 280ms ease;

}


.dmxWebTypeCard::after {

    content: "";

    position: absolute;

    right: -70px;
    bottom: -80px;

    z-index: -1;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:
        rgba(91, 220, 195, 0.08);

    filter: blur(42px);

    opacity: 0;

    transition:
        opacity 280ms ease,
        transform 280ms ease;

}


.dmxWebTypeCard:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(132, 144, 255, 0.38);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.085),
            rgba(255, 255, 255, 0.035)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 30px 70px rgba(0, 0, 0, 0.28);

}


.dmxWebTypeCard:hover::before,
.dmxWebTypeCard:hover::after {

    opacity: 1;

}


.dmxWebTypeCard:hover::after {

    transform:
        translate(-18px, -14px);

}


/* ============================================================
   NÚMERO
============================================================ */

.dmxWebTypeNumber {

    position: absolute;

    top: 12px;
    right: 20px;

    z-index: -1;

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

    font-size:
        clamp(4rem, 8vw, 7.5rem);

    font-weight: 800;
    line-height: 1;

    letter-spacing: -0.08em;

    user-select: none;

}


/* ============================================================
   ICONO
============================================================ */

.dmxWebTypeIcon {

    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(111, 125, 255, 0.14),
            rgba(100, 230, 200, 0.06)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    color: #aeb6ff;

    transition:
        transform 280ms ease,
        color 280ms ease,
        border-color 280ms ease;

}


.dmxWebTypeCard:hover .dmxWebTypeIcon {

    transform:
        translateY(-2px)
        rotate(-2deg);

    color: #ffffff;

    border-color:
        rgba(144, 155, 255, 0.32);

}


.dmxWebTypeIcon svg {

    width: 29px;
    height: 29px;

    overflow: visible;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.55;

    stroke-linecap: round;
    stroke-linejoin: round;

}


.dmxWebTypeIconFill {

    fill: currentColor;
    stroke: none;

}


/* ============================================================
   CONTENIDO
============================================================ */

.dmxWebTypeContent {

    position: relative;

    display: grid;

    gap: 24px;

    min-width: 0;

}


.dmxWebTypeHeading {

    display: grid;

    gap: 9px;

}


.dmxWebTypeHeading h3 {

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(1.12rem, 1.6vw, 1.35rem);

    font-weight: 650;
    line-height: 1.2;

    letter-spacing: -0.025em;

}


.dmxWebTypeHeading p {

    max-width: 390px;

    margin: 0;

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

    font-size: 0.92rem;
    line-height: 1.55;

}


/* ============================================================
   ETIQUETAS
============================================================ */

.dmxWebTypeContent ul {

    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin: 0;
    padding: 0;

    list-style: none;

}


.dmxWebTypeContent li {

    display: inline-flex;
    align-items: center;

    min-height: 30px;

    padding:
        6px
        11px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.035);

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

    font-size: 0.76rem;
    font-weight: 600;

    line-height: 1;

    transition:
        border-color 220ms ease,
        color 220ms ease,
        background-color 220ms ease;

}


.dmxWebTypeCard:hover .dmxWebTypeContent li {

    border-color:
        rgba(117, 133, 255, 0.18);

    background:
        rgba(117, 133, 255, 0.07);

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

}


/* ============================================================
   PIE DE SECCIÓN
============================================================ */

.dmxWebTypesFooter {

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

    gap: 24px;

    margin-top: 18px;

    padding:
        22px
        26px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.028);

}


.dmxWebTypesFooter > p {

    margin: 0;

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

    font-size:
        clamp(0.92rem, 1.2vw, 1rem);

}


.dmxWebTypesButton {

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

    gap: 12px;

    min-height: 46px;

    padding:
        12px
        19px;

    border:
        1px solid rgba(126, 139, 255, 0.28);

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            rgba(102, 116, 255, 0.16),
            rgba(79, 209, 183, 0.08)
        );

    color: #ffffff;

    font-size: 0.86rem;
    font-weight: 650;

    text-decoration: none;

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background-color 220ms ease,
        box-shadow 220ms ease;

}


.dmxWebTypesButton svg {

    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform 220ms ease;

}


.dmxWebTypesButton:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(143, 154, 255, 0.55);

    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.25);

}


.dmxWebTypesButton:hover svg {

    transform:
        translateX(3px);

}


.dmxWebTypesButton:focus-visible {

    outline:
        3px solid rgba(133, 146, 255, 0.5);

    outline-offset: 4px;

}


/* ============================================================
   RESPONSIVE — 900PX
============================================================ */

@media (max-width: 900px) {

    .dmxWebTypesHeader {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .dmxWebTypesEyebrow {

        padding-bottom: 0;

    }


    .dmxWebTypesGrid {

        grid-template-columns: 1fr;

    }


    .dmxWebTypeCard {

        min-height: auto;

    }

}


/* ============================================================
   RESPONSIVE — 640PX
============================================================ */

@media (max-width: 640px) {

    .dmxWebTypes {

        padding:
            68px
            0;

    }


    .dmxWebTypesHeading h2 {

        font-size:
            clamp(2.25rem, 12vw, 3.5rem);

    }


    .dmxWebTypeCard {

        grid-template-columns: 48px 1fr;

        gap: 16px;

        padding:
            22px
            18px;

        border-radius: 20px;

    }


    .dmxWebTypeIcon {

        width: 48px;
        height: 48px;

        border-radius: 14px;

    }


    .dmxWebTypeIcon svg {

        width: 25px;
        height: 25px;

    }


    .dmxWebTypeContent {

        gap: 18px;

    }


    .dmxWebTypeNumber {

        top: 12px;
        right: 14px;

        font-size: 4.5rem;

    }


    .dmxWebTypesFooter {

        align-items: flex-start;
        flex-direction: column;

        padding:
            20px
            18px;

    }


    .dmxWebTypesButton {

        width: 100%;

    }

}


/* ============================================================
   MOVIMIENTO REDUCIDO
============================================================ */

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

    .dmxWebTypeCard,
    .dmxWebTypeCard::before,
    .dmxWebTypeCard::after,
    .dmxWebTypeIcon,
    .dmxWebTypesButton,
    .dmxWebTypesButton svg {

        transition: none;

    }


    .dmxWebTypeCard:hover,
    .dmxWebTypesButton:hover {

        transform: none;

    }

}