* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
}

body {

    min-height: 100vh;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background-color: #000000;

    /*
    Usá acá la misma textura
    que ya utilizás en el juego.
    */
    background-image:
        linear-gradient(
            rgba(60, 34, 17, 0.18),
            rgba(35, 19, 9, 0.28)
        ),
        url("img/textura-madera.webp");

    background-size:
        auto,
        450px auto;

    background-repeat:
        repeat;

    color: #ffffff;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
}

body {
    min-height: 100dvh;

    display: flex;
    flex-direction: column;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background-color: #070402;

    background-image:
        linear-gradient(
            rgba(60, 34, 17, 0.18),
            rgba(35, 19, 9, 0.28)
        ),
        url("img/textura-madera.jpg");

    background-size:
        auto,
        450px auto;

    background-repeat:
        repeat;

    color: #ffffff;
}
/* =========================
   PORTADA
========================= */
.portada {
    flex: 1;

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

    width: 100%;

    padding: 20px;

    box-sizing: border-box;
}

.panel-portada {

    width: min(620px, 94vw);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    padding: 38px 42px;

    background:
        linear-gradient(
            145deg,
            #f3e1b9,
            #d5b77f
        );

    color: #432d1a;

    border:
        5px solid #76502c;

    

    border-radius: 18px;

    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, 0.5);

    backdrop-filter:
        blur(2px);
}
.panel-portada p{
    color:#022d4e
}

/* =========================
   LOGO
========================= */

.logo-rastrear {
    display: block;

    width: auto;
    height: 100px;

    margin-bottom: 18px;

    filter:
        drop-shadow(
            0 8px 10px
            rgba(0, 0, 0, 0.35)
        );
}


.subtitulo {

    max-width: 480px;

    margin:
        0
        0
        28px;

    color: #f5e9cd;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;
    line-height: 1.45;
}


/* =========================
   BOTONES
========================= */

.menu-portada {

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 13px;
}

.boton-portada {
    width: 100%;

    min-height: 54px;

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

    padding: 15px 16px;

    background:
        linear-gradient(
            to bottom,
            var(--verde),
            var(--verde-oscuro)
        );

    color: white;

    border: 2px solid #e5cf91;
    border-radius: 9px;

    box-shadow:
        0 0 0 2px #194a29,
        0 5px 10px rgba(0, 0, 0, 0.28);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 17px;
    font-weight: bold;
    letter-spacing: 0.4px;

    text-decoration: none;
    text-transform: uppercase;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        background 0.25s ease,
        transform 0.18s ease,
        box-shadow 0.25s ease;
}
.boton-portada:hover {
    background:
        linear-gradient(
            to bottom,
            var(--azul),
            var(--azul-oscuro)
        );

    box-shadow:
        0 0 0 2px #174a78,
        0 8px 15px rgba(0, 0, 0, 0.35);

    transform: translateY(-2px);
}


.boton-jugar {

    background:
        linear-gradient(
            to bottom,
            #309b48,
            #206d35
        );

    font-size: 21px;
}


.boton-jugar:hover {

    background:
        linear-gradient(
            to bottom,
            #347fb7,
            #245b84
        );
}


.pie-portada {

    margin:
        25px
        0
        0;

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

    font-size: 13px;

    letter-spacing: 0.8px;
}


/* =========================
   MODALES
========================= */

.modal-portada {

    position: fixed;
    inset: 0;

    display: none;

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

    padding: 20px;

    background:
        rgba(20, 12, 6, 0.82);

    z-index: 10000;
}


.modal-portada.mostrar {
    display: flex;
}


.contenido-modal {

    position: relative;

    width: min(650px, 94vw);
    max-height: 88vh;

    padding:
        32px
        34px;

    overflow-y: auto;

    background:
        linear-gradient(
            145deg,
            #f3e1b9,
            #d5b77f
        );

    color: #432d1a;

    border:
        5px solid #76502c;

    border-radius: 16px;

    box-shadow:
        0 0 0 3px #c9a85f,
        0 18px 50px
        rgba(0, 0, 0, 0.65);
}


.contenido-modal h2 {

    margin:
        0
        55px
        20px
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 30px;

    color: #533819;
}


.contenido-modal p {

    font-size: 17px;
    line-height: 1.55;
}


.cerrar-modal {

    position: absolute;

    top: 10px;
    right: 10px;

    width: 44px;
    height: 44px;

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

    padding: 0;

    background:
        #9e2f26;

    color:
        #ffffff;

    border:
        3px solid #f2d39a;

    border-radius:
        50%;

    font-size:
        30px;

    font-weight:
        bold;

    line-height:
        1;

    cursor:
        pointer;
}


.cerrar-modal:hover {

    background:
        #d34838;
}


.texto-pendiente {

    padding:
        12px;

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

    border-radius:
        8px;
}


/* =========================
   CELULAR
========================= */

@media screen and (max-width: 768px) {

    .portada {
        flex: 1;

        min-height: 0;

        padding: 12px;
    }



    .panel-portada {

        width:
            100%;

        padding:
            25px
            16px;

        border-radius:
            13px;
    }


    .logo-rastrear {
        width: auto;
        margin-bottom: 14px;
        height: 50px;
    }


    .subtitulo {

        margin-bottom:
            20px;

        font-size:
            17px;
    }


    .boton-portada {

        min-height:
            52px;

        padding:
            9px
            12px;

        font-size:
            14px;
    }


    .boton-jugar {

        font-size:
            17px;
    }


    .pie-portada {

        margin-top:
            20px;

        font-size:
            11px;
    }


    .contenido-modal {

        width:
            96vw;

        max-height:
            92dvh;

        padding:
            25px
            18px;
    }


    .contenido-modal h2 {

        font-size:
            24px;
    }


    .contenido-modal p {

        font-size:
            15px;
    }

}

.contenido-modal img {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    margin: 14px auto 28px;

    object-fit: contain;

    box-sizing: border-box;

    border: 2px solid #76502c;
    border-radius: 8px;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.25);
}@media screen and (max-width: 768px) {

    .contenido-modal img {
        width: 100%;
        max-width: 100%;
        height: auto;

        margin: 10px auto 20px;
    }

}


.cerrar-modal {
    position: sticky;

    top: 10px;

    /*
    Lo empuja hacia la derecha.
    */
    margin-left: auto;
    margin-right: 0;

    width: 44px;
    height: 44px;

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

    padding: 0;

    background: #9e2f26;
    color: #ffffff;

    border: 3px solid #f2d39a;
    border-radius: 50%;

    font-size: 30px;
    font-weight: bold;
    line-height: 1;

    cursor: pointer;

    z-index: 1000;
}

/* =========================================
   FOOTER
========================================= */

.footer-portada {
    width: 100%;

    padding: 18px 20px;

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

    gap: 18px;

    background: rgba(41, 41, 41, 0.75);

    border-top: 1px solid rgba(229, 207, 145, 0.35);

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

    font-size: 13px;

    box-sizing: border-box;
}

.footer-portada p {
    margin: 0;
}

.footer-portada strong {
    color: #ffffff;
}


/* ICONOS */

.footer-contacto {
    display: flex;
    align-items: center;

    gap: 10px;
}

.footer-icono {
    width: 34px;
    height: 34px;

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

    background:
        linear-gradient(
            to bottom,
            var(--verde),
            var(--verde-oscuro)
        );

    border: 1px solid #e5cf91;
    border-radius: 50%;

    box-shadow:
        0 0 0 1px #194a29,
        0 3px 6px rgba(0, 0, 0, 0.25);

    transition:
        background 0.25s ease,
        transform 0.18s ease;
}

.footer-icono svg {
    width: 18px;
    height: 18px;

    fill: white;
}

.footer-icono:hover {
    background:
        linear-gradient(
            to bottom,
            var(--azul),
            var(--azul-oscuro)
        );

    transform: translateY(-2px);
}

@media screen and (max-width: 768px) {

    .footer-portada {
        flex-direction: column;

        gap: 10px;

        padding: 14px 12px;

        text-align: center;

        font-size: 11px;
    }

    .footer-icono {
        width: 32px;
        height: 32px;
    }

    .footer-icono svg {
        width: 17px;
        height: 17px;
    }
}

/* LINKEDIN */

.footer-icono.linkedin:hover {
    background: linear-gradient(
        to bottom,
        #0a78c7,
        #005a9e
    );

    border-color: #75bdf0;

    box-shadow:
        0 0 0 1px #064d83,
        0 5px 10px rgba(0, 0, 0, 0.35);

    transform: translateY(-2px);
}


/* EMAIL */

.footer-icono.email:hover {
    background: linear-gradient(
        to bottom,
        #d94a3d,
        #a92c23
    );

    border-color: #f0aaa3;

    box-shadow:
        0 0 0 1px #7c211b,
        0 5px 10px rgba(0, 0, 0, 0.35);

    transform: translateY(-2px);
}


.btn-cerrar-modal {
    position: absolute;

    top: 10px;
    right: 10px;

    width: 44px;
    height: 44px;

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

    padding: 0;
    margin: 0;

    background: #9e2f26;
    color: #ffffff;

    border: 3px solid #f2d39a;
    border-radius: 50%;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.35);

    font-size: 30px;
    font-weight: bold;
    line-height: 1;

    cursor: pointer;

    z-index: 1000;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.btn-cerrar-modal:hover {
    background: #d34838;

    transform: scale(1.06);
}