/* =====================================================
   ZUKA — ESENCIA CARMESÍ
===================================================== */


/* =====================================================
   VARIABLES
===================================================== */

:root {

    --black:
        #020202;

    --black-soft:
        #080808;

    --blood-dark:
        #180004;

    --blood:
        #4d0008;

    --blood-light:
        #ff001e;

    --blood-bright:
        #c40018;

    --crimson:
        #ff0026;

    --text:
        #c8c8c8;

    --muted:
        #707070;

}


/* =====================================================
   RESET
===================================================== */

* {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    background:
        #020202;

    color:
        var(--text);

    font-family:
        "VT323",
        monospace;

    font-size:
        21px;

    overflow-x:
        hidden;

}


/* =====================================================
   FONDO
===================================================== */

.dungeon {

    position:
        fixed;

    inset:
        0;

    z-index:
        -10;

    overflow:
        hidden;

    background-color:
        #020202;

    background-image:
        url("img/fondo.jpg");

    background-size:
        cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;

}


/* =====================================================
   CAPA CARMESÍ
===================================================== */

.dungeon::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    z-index:
        1;

    background:

        radial-gradient(
            ellipse at center,
            rgba(80, 0, 12, .10) 0%,
            rgba(35, 0, 5, .30) 55%,
            rgba(0, 0, 0, .65) 100%
        );

}


/* =====================================================
   OSCURECIMIENTO
===================================================== */

.dungeon::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    z-index:
        2;

    background:

        linear-gradient(
            to bottom,
            rgba(0,0,0,.40),
            rgba(0,0,0,.08) 35%,
            rgba(0,0,0,.55)
        );

}


/* =====================================================
   HUMO
===================================================== */

.smoke {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

    filter:
        blur(70px);

    background:
        rgba(80, 0, 10, .32);

    opacity:
        .7;

    z-index:
        3;

}


.smoke-1 {

    width:
        450px;

    height:
        200px;

    left:
        -180px;

    bottom:
        5%;

    animation:
        smokeLeft
        18s
        ease-in-out
        infinite alternate;

}


.smoke-2 {

    width:
        520px;

    height:
        230px;

    right:
        -220px;

    bottom:
        15%;

    animation:
        smokeRight
        22s
        ease-in-out
        infinite alternate;

}


.smoke-3 {

    width:
        650px;

    height:
        250px;

    left:
        50%;

    bottom:
        -120px;

    transform:
        translateX(-50%);

    opacity:
        .42;

    animation:
        smokeCenter
        25s
        ease-in-out
        infinite alternate;

}


/* =====================================================
   ANIMACIONES HUMO
===================================================== */

@keyframes smokeLeft {

    from {

        transform:
            translate(
                -20px,
                30px
            )
            scale(.8)
            rotate(-8deg);

    }

    to {

        transform:
            translate(
                220px,
                -100px
            )
            scale(1.4)
            rotate(8deg);

    }

}


@keyframes smokeRight {

    from {

        transform:
            translate(
                20px,
                40px
            )
            scale(.8)
            rotate(8deg);

    }

    to {

        transform:
            translate(
                -230px,
                -120px
            )
            scale(1.4)
            rotate(-8deg);

    }

}


@keyframes smokeCenter {

    from {

        transform:
            translateX(-50%)
            translateY(30px)
            scale(.8);

    }

    to {

        transform:
            translateX(-50%)
            translateY(-100px)
            scale(1.4);

    }

}


/* =====================================================
   PARTICULAS
===================================================== */

#particles {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    z-index:
        5;

}


.particle {

    position:
        absolute;

    bottom:
        -10px;

    border-radius:
        50%;

    background:
        #b00018;

    box-shadow:

        0 0 5px
        rgba(190, 0, 20, .8),

        0 0 12px
        rgba(130, 0, 15, .45);

    animation-name:
        particleFloat;

    animation-timing-function:
        linear;

    animation-iteration-count:
        infinite;

}


.particle.bright {

    background:
        #e00025;

    box-shadow:

        0 0 5px
        rgba(230, 0, 35, .95),

        0 0 15px
        rgba(190, 0, 25, .7),

        0 0 25px
        rgba(120, 0, 15, .4);

}


@keyframes particleFloat {

    0% {

        transform:
            translate3d(
                0,
                0,
                0
            );

        opacity:
            0;

    }


    8% {

        opacity:
            .7;

    }


    35% {

        transform:
            translate3d(
                calc(var(--drift) * .25),
                -30vh,
                0
            );

        opacity:
            .85;

    }


    65% {

        transform:
            translate3d(
                calc(var(--drift) * .7),
                -65vh,
                0
            );

        opacity:
            .65;

    }


    100% {

        transform:
            translate3d(
                var(--drift),
                -115vh,
                0
            );

        opacity:
            0;

    }

}


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

.content {

    position:
        relative;

    width:
        min(
            570px,
            calc(100% - 30px)
        );

    margin:
        0 auto;

    padding:
        70px 0 40px;

}


/* =====================================================
   PERFIL
===================================================== */

.hero {

    text-align:
        center;

    margin-bottom:
        45px;

}


.character-frame {

    width:
        165px;

    height:
        165px;

    margin:
        0 auto 25px;

    padding:
        7px;

    border:
        2px solid
        var(--blood);

    border-radius:
        50%;

    background:
        rgba(5,5,5,.9);

    box-shadow:

        0 0 20px
        rgba(120,0,0,.35),

        inset 0 0 20px
        rgba(100,0,0,.25);

}


.character-image {

    width: 100%;
    height: 100%;

    overflow: hidden;

    border:
        2px solid
        #4b0000;

    border-radius: 50%;

    background:
        #080808;

    box-shadow:
        0 0 15px
        rgba(255, 0, 30, .25);

}


.character-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}


.character-name {

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        32px;

    letter-spacing:
        5px;

    color:
        #dedede;

    text-shadow:
        4px 4px 0
        #240000;

}


.welcome {

    margin-top:
        14px;

    color:
        var(--crimson);

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        9px;

    letter-spacing:
        1px;

}


.character-roles {

    margin-top:
        20px;

    color:
        #aaa;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        8px;

    line-height:
        2.1;

}


.character-roles span {

    margin:
        0 6px;

    color:
        var(--blood);

}


.intro {

    max-width:
        460px;

    margin:
        22px auto 0;

    color:
        #858585;

    line-height:
        1.5;

    font-size:
        22px;

}


/* =====================================================
   FICHA
===================================================== */

.character-sheet {

    margin-bottom:
        55px;

    padding:
        18px;

    background:
        rgba(6,6,6,.94);

    border:
        1px solid
        #343434;

    box-shadow:
        5px 5px 0
        #000;

}


.sheet-title {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin-bottom:
        18px;

    color:
        #888;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        8px;

}


.sheet-title span {

    color:
        var(--blood);

}


.stats-grid {

    display:
        grid;

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

    gap:
        1px;

    background:
        #292929;

}


.stat {

    padding:
        14px 10px;

    text-align:
        center;

    background:
        #090909;

}


.stat small {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #777;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        7px;

    line-height:
        1.5;

}


.stat strong {

    color:
        #c4c4c4;

    font-size:
        21px;

}


/* =====================================================
   SECCIONES
===================================================== */

.section {

    margin-bottom:
        55px;

}


.section-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        20px;

}


.section-heading span {

    flex:
        1;

    height:
        1px;

    background:
        #420000;

}


.section-heading h2 {

    margin:
        0;

    color:
        #bdbdbd;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        8px;

    text-align:
        center;

}


.section-description {

    margin:
        0 0 22px;

    text-align:
        center;

    color:
        #777;

    font-size:
        21px;

}


/* =====================================================
   REDES
===================================================== */

.social-grid {

    display:
        grid;

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

    gap:
        10px;

}


.social-card {

    min-height:
        78px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        12px;

    text-decoration:
        none;

    color:
        #bbb;

    background:
        rgba(8,8,8,.94);

    border:
        1px solid
        #303030;

    box-shadow:
        3px 3px 0
        #000;

    transition:
        .15s;

}


.social-card:hover {

    transform:
        translateY(-2px);

    border-color:
        #710000;

    background:
        rgba(28,0,0,.92);

}


.social-card.unavailable {

    opacity:
        .38;

    cursor:
        not-allowed;

}


.social-icon {

    width:
        36px;

    height:
        36px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #550000;

    color:
        var(--blood-light);

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        15px;

}


.social-info {

    display:
        flex;

    flex-direction:
        column;

}


.social-info strong {

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        7px;

    color:
        #aaa;

}


.social-info small {

    margin-top:
        6px;

    color:
        #777;

    font-size:
        20px;

    line-height:
        1;

}


/* =====================================================
   PORTALES
===================================================== */

.portal-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


.portal {

    display:
        grid;

    grid-template-columns:
        48px 1fr 30px;

    align-items:
        center;

    min-height:
        70px;

    padding:
        10px 15px;

    color:
        #bbb;

    text-decoration:
        none;

    background:
        rgba(7,7,7,.95);

    border:
        1px solid
        #303030;

    border-left:
        3px solid
        #570000;

    box-shadow:
        4px 4px 0
        #000;

    transition:
        .15s;

}


.portal:hover {

    transform:
        translateX(5px);

    border-color:
        #760000;

    background:
        rgba(25,0,0,.94);

}


.portal-mark {

    width:
        35px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #520000;

    color:
        var(--blood-light);

    font-size:
        18px;

}


.portal-info {

    display:
        flex;

    flex-direction:
        column;

}


.portal-info strong {

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        8px;

    color:
        #bbb;

}


.portal-info small {

    margin-top:
        4px;

    color:
        #777;

    font-size:
        21px;

    line-height:
        1;

}


.portal-arrow {

    color:
        #5d0000;

    font-size:
        25px;

}


.portal:hover .portal-arrow {

    color:
        var(--crimson);

}


/* =====================================================
   HORARIOS
===================================================== */

.schedule-note {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin-bottom:
        12px;

    padding:
        12px 15px;

    background:
        rgba(25,0,0,.65);

    border:
        1px solid
        #4d0000;

}


.note-icon {

    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #700000;

    color:
        var(--crimson);

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        9px;

}


.schedule-note p {

    margin:
        0;

    color:
        #999;

    font-size:
        21px;

}


.schedule {

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

}


.day {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        13px 16px;

    background:
        rgba(8,8,8,.94);

    border-left:
        3px solid
        #520000;

}


.day span {

    color:
        #aaa;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        7px;

}


.day strong {

    color:
        var(--blood-light);

    font-size:
        20px;

}


/* =====================================================
   PREGUNTAS
===================================================== */

.quest {

    margin-bottom:
        50px;

    padding:
        23px;

    background:
        rgba(7,7,7,.95);

    border:
        1px solid
        #520000;

    box-shadow:
        5px 5px 0
        #000;

}


.quest-title {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

}


.quest-symbol {

    width:
        48px;

    height:
        48px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #240000;

    border:
        1px solid
        #720000;

    color:
        var(--crimson);

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        18px;

}


.quest-title small {

    color:
        #777;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        7px;

    line-height:
        1.4;

}


.quest-title h2 {

    margin:
        7px 0 0;

    color:
        #bbb;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        9px;

}


.quest p {

    color:
        #888;

    line-height:
        1.5;

    font-size:
        21px;

}


.anonymous-links {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;

}


.quest-button {

    display:
        block;

    padding:
        13px;

    text-align:
        center;

    color:
        #ccc;

    text-decoration:
        none;

    background:
        #240000;

    border:
        1px solid
        #680000;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        6px;

    transition:
        .15s;

}


.quest-button:hover {

    background:
        #580000;

    color:
        white;

}


/* =====================================================
   SEPARADOR
===================================================== */

.rune-divider {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin:
        20px 0 50px;

}


.rune-divider span {

    flex:
        1;

    height:
        1px;

    background:
        #400000;

}


.rune-divider b {

    color:
        var(--blood);

    font-size:
        18px;

}


/* =====================================================
   MERCADER
===================================================== */

.merchant {

    margin-bottom:
        55px;

    padding:
        23px;

    background:
        rgba(7,7,7,.96);

    border:
        1px solid
        #520000;

    box-shadow:
        5px 5px 0
        #000;

}


.merchant p {

    color:
        #888;

    line-height:
        1.5;

    font-size:
        21px;

}


/* =====================================================
   PAGO
===================================================== */

.payment-box {

    padding:
        15px;

    margin:
        20px 0 10px;

    background:
        #0d0d0d;

    border:
        1px solid
        #343434;

}


.payment-box small {

    display:
        block;

    margin-bottom:
        10px;

    color:
        #777;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        7px;

    line-height:
        1.4;

}


.payment-box strong {

    display:
        block;

    color:
        var(--crimson);

    font-size:
        25px;

    letter-spacing:
        1px;

    word-break:
        break-all;

}


.payment-box button {

    margin-top:
        12px;

    padding:
        8px 12px;

    background:
        #210000;

    border:
        1px solid
        #600000;

    color:
        #aaa;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        6px;

    cursor:
        pointer;

}


.payment-box button:hover {

    background:
        #560000;

    color:
        white;

}


/* =====================================================
   CONCEPTO
===================================================== */

.concept-box {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        13px 15px;

    background:
        #0d0d0d;

    border-left:
        3px solid
        #650000;

}


.concept-box span {

    color:
        #777;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        7px;

}


.concept-box strong {

    color:
        var(--crimson);

    font-size:
        21px;

}


/* =====================================================
   WHATSAPP
===================================================== */

.recharge-message {

    margin:
        22px 0 12px;

    color:
        #777;

    line-height:
        1.4;

    font-size:
        21px;

}


.whatsapp-box {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        13px 15px;

    background:
        #0b0b0b;

    border:
        1px solid
        #303030;

}


.whatsapp-box strong {

    color:
        #aaa;

    font-size:
        21px;

}


.whatsapp-box a {

    padding:
        9px 11px;

    color:
        #ddd;

    text-decoration:
        none;

    background:
        #260000;

    border:
        1px solid
        #650000;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        6px;

}


.whatsapp-box a:hover {

    background:
        #570000;

}


/* =====================================================
   FINAL
===================================================== */

.ending {

    text-align:
        center;

    margin:
        90px 0 60px;

}


.blood-rune {

    font-size:
        32px;

    filter:
        drop-shadow(
            0 0 10px
            rgba(170,0,0,.5)
        );

}


.ending p {

    color:
        #555;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        7px;

    line-height:
        2.1;

}


footer {

    padding-bottom:
        30px;

    text-align:
        center;

    color:
        #333;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        7px;

}


footer small {

    display:
        block;

    margin-top:
        10px;

    font-family:
        "VT323",
        monospace;

    font-size:
        17px;

}


/* =====================================================
   TOAST
===================================================== */

#toast {

    position:
        fixed;

    left:
        50%;

    bottom:
        25px;

    padding:
        10px 16px;

    transform:
        translate(-50%,80px);

    background:
        #450000;

    border:
        1px solid
        #900000;

    color:
        white;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        6px;

    opacity:
        0;

    transition:
        .2s;

}


#toast.show {

    transform:
        translate(-50%,0);

    opacity:
        1;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 700px) {


    .content {

        width:
            calc(100% - 26px);

        padding-top:
            50px;

    }


    .character-frame {

        width:
            145px;

        height:
            145px;

    }


    .character-name {

        font-size:
            26px;

    }


    .stats-grid {

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

    }


    .social-grid {

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

    }


    .social-card {

        min-height:
            70px;

        padding:
            10px;

    }


    .social-info strong {

        font-size:
            6px;

    }


    .social-info small {

        font-size:
            19px;

    }


    .section-heading h2 {

        font-size:
            6px;

    }


    .day {

        padding:
            12px;

    }


    .day strong {

        font-size:
            18px;

    }


    .whatsapp-box {

        flex-direction:
            column;

        align-items:
            stretch;

        text-align:
            center;

    }


    .whatsapp-box a {

        text-align:
            center;

        padding:
            12px;

    }

}


@media (max-width: 420px) {


    .content {

        width:
            calc(100% - 20px);

    }


    .social-grid {

        grid-template-columns:
            1fr;

    }


    .stats-grid {

        grid-template-columns:
            1fr;

    }


    .character-name {

        font-size:
            23px;

    }


    .character-roles {

        font-size:
            6px;

    }


    .anonymous-links {

        grid-template-columns:
            1fr;

    }

}

/* =====================================================
   MERCADER — TIEMPO AIRE
===================================================== */

.merchant {

    position: relative;

    padding: 32px 26px;

    margin-top: 35px;

    background:
        linear-gradient(
            180deg,
            rgba(15, 0, 3, .96),
            rgba(5, 5, 5, .97)
        );

    border:
        1px solid
        rgba(196, 0, 24, .45);

    box-shadow:
        0 0 25px
        rgba(255, 0, 30, .08),

        inset 0 0 35px
        rgba(120, 0, 15, .08);
}


/* BORDE INTERIOR */

.merchant::before {

    content: "";

    position: absolute;

    inset: 7px;

    pointer-events: none;

    border:
        1px solid
        rgba(255, 0, 30, .12);
}


/* =====================================================
   INTRODUCCIÓN
===================================================== */

.merchant-intro {

    max-width:
        680px;

    margin:
        25px auto 22px;

    text-align:
        center;

    color:
        var(--text);

    font-family:
        "VT323",
        monospace;

    font-size:
        22px;

    line-height:
        1.35;
}


.merchant-intro strong {

    color:
        var(--blood-light);

    font-weight:
        normal;

    text-shadow:
        0 0 8px
        rgba(255, 0, 30, .2);
}


/* =====================================================
   FRASE DEL MERCADER
===================================================== */

.merchant-quote {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    margin:
        20px auto 28px;

    max-width:
        650px;

    color:
        #777;

    text-align:
        center;
}


.merchant-quote span {

    color:
        var(--blood-light);

    font-size:
        14px;

    text-shadow:
        0 0 8px
        rgba(255, 0, 30, .35);
}


.merchant-quote p {

    margin:
        0;

    font-family:
        "VT323",
        monospace;

    font-size:
        19px;

    font-style:
        italic;

    letter-spacing:
        .5px;
}


/* =====================================================
   CAJA DE PAGO
===================================================== */

.payment-box {

    position:
        relative;

    padding:
        22px;

    margin:
        18px 0;

    text-align:
        center;

    background:
        #050505;

    border:
        1px solid
        rgba(255, 0, 30, .35);

    box-shadow:
        inset 0 0 25px
        rgba(255, 0, 30, .035);
}


.payment-label span {

    display:
        block;

    margin-bottom:
        10px;

    color:
        #777;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        10px;

    letter-spacing:
        .5px;
}


.payment-box > strong {

    display:
        block;

    margin:
        8px 0 18px;

    color:
        var(--blood-light);

    font-family:
        "VT323",
        monospace;

    font-size:
        30px;

    letter-spacing:
        2px;

    text-shadow:
        0 0 10px
        rgba(255, 0, 30, .3);
}


/* BOTÓN COPIAR */

.payment-box button {

    padding:
        10px 18px;

    cursor:
        pointer;

    border:
        1px solid
        rgba(255, 0, 30, .5);

    background:
        #0b0b0b;

    color:
        #aaa;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        10px;

    transition:
        .2s ease;
}


.payment-box button:hover {

    color:
        white;

    border-color:
        var(--crimson);

    background:
        rgba(255, 0, 30, .08);

    box-shadow:
        0 0 14px
        rgba(255, 0, 30, .15);
}


/* =====================================================
   CONCEPTO
===================================================== */

.concept-box {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        16px 20px;

    margin:
        10px 0 24px;

    background:
        rgba(255, 0, 30, .035);

    border:
        1px solid
        rgba(255, 0, 30, .2);
}


.concept-box span {

    display:
        block;

    margin-bottom:
        4px;

    color:
        #707070;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        9px;
}


.concept-box strong {

    color:
        #ddd;

    font-family:
        "VT323",
        monospace;

    font-size:
        24px;

    letter-spacing:
        1px;
}


.concept-rune {

    color:
        var(--crimson);

    font-size:
        25px;

    text-shadow:
        0 0 12px
        rgba(255, 0, 30, .35);
}


/* =====================================================
   MENSAJE WHATSAPP
===================================================== */

.recharge-message {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin:
        20px 0 12px;

    color:
        #999;

    font-family:
        "VT323",
        monospace;

    font-size:
        20px;

    line-height:
        1.25;
}


.message-rune {

    color:
        var(--blood-light);

    font-size:
        18px;
}


/* =====================================================
   WHATSAPP
===================================================== */

.whatsapp-box {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        18px 20px;

    background:
        #050505;

    border:
        1px solid
        rgba(255, 0, 30, .35);
}


.whatsapp-info small {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #666;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        9px;
}


.whatsapp-info strong {

    color:
        #eee;

    font-family:
        "VT323",
        monospace;

    font-size:
        28px;

    letter-spacing:
        2px;
}


/* BOTÓN WHATSAPP */

.whatsapp-box a {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        11px 15px;

    text-decoration:
        none;

    border:
        1px solid
        rgba(255, 0, 30, .55);

    background:
        rgba(255, 0, 30, .06);

    color:
        var(--blood-light);

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        9px;

    transition:
        .2s ease;
}


.whatsapp-box a:hover {

    background:
        rgba(255, 0, 30, .14);

    border-color:
        var(--crimson);

    color:
        white;

    box-shadow:
        0 0 16px
        rgba(255, 0, 30, .15);

    transform:
        translateY(-2px);
}


.whatsapp-box a span {

    font-size:
        16px;
}


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

@media (max-width: 600px) {

    .merchant {

        padding:
            25px 15px;

    }


    .merchant-intro {

        font-size:
            20px;

    }


    .merchant-quote {

        gap:
            8px;

    }


    .merchant-quote p {

        font-size:
            17px;

    }


    .payment-box > strong {

        font-size:
            25px;

        letter-spacing:
            1px;

    }


    .whatsapp-box {

        flex-direction:
            column;

        align-items:
            stretch;

        text-align:
            center;

    }


    .whatsapp-box a {

        justify-content:
            center;

    }


    .concept-box {

        padding:
            14px;

    }

}