/* =========================================
   JULIO26 - STYLES
   Frontend Landing Page
========================================= */


/* =========================================
   VARIABLES DE DISEÑO
========================================= */

:root {

    --color-fondo: #000000;

    --color-contenedor: #111111;

    --color-verde: #5ea51d;

    --color-verde-hover: #72c624;

    --color-rojo: #d31919;

    --color-rojo-hover: #ef2020;

    --color-blanco: #ffffff;

    --color-gris: #bfbfbf;

    --color-error: #ff4444;

    --radio: 14px;

    --transicion:
        250ms ease;

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    font-size: 16px;

}


body {

    min-height: 100vh;

    background: var(--color-fondo);

    color: var(--color-blanco);

    font-family:

        Arial,
        Helvetica,
        sans-serif;

    display: flex;

    justify-content: center;

    align-items: center;

}


/* =========================================
   CONTENEDOR PRINCIPAL
========================================= */

.contenedor {

    width: 90%;

    max-width: 550px;

    background:

        var(--color-contenedor);

    padding: 35px 30px;

    border-radius: var(--radio);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 28px;

}


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

.logo {

    width: 100%;

    display: flex;

    justify-content: center;

}


.logo img {

    width: min(280px, 75%);

    height: auto;

    object-fit: contain;

}


/* =========================================
   PROGRESO 45%
========================================= */

.progreso {

    width: 100%;

    text-align: center;

}


.progreso p {

    color: var(--color-gris);

    margin-bottom: 12px;

    font-size: 1rem;

}


.progreso strong {

    color: var(--color-verde);

}


.barra {

    width: 100%;

    height: 22px;

    background:

        #333333;

    border-radius: 50px;

    overflow: hidden;

}


.barra-progreso {

    height: 100%;

    width: 45%;

    background:

        var(--color-verde);

    border-radius:

        inherit;

}


/* =========================================
   FORMULARIO
========================================= */

.formulario {

    width: 100%;

}


#formularioContacto {

    display: flex;

    flex-direction: column;

    gap: 15px;

}


/* =========================================
   TELEFONO
========================================= */

.telefono {

    display: flex;

    gap: 10px;

    width: 100%;

}


.telefono select {

    width: 110px;

}


.telefono input {

    flex: 1;

}


input,
select,
textarea {

    background:

        #1f1f1f;

    color:

        var(--color-blanco);

    border:

        1px solid #444;

    border-radius:

        10px;

    padding:

        14px;

    font-size:

        1rem;

    outline:

        none;

    transition:

        border var(--transicion);

}


input:focus,
select:focus,
textarea:focus {

    border-color:

        var(--color-verde);

}


/* =========================================
   TEXTAREA
========================================= */

textarea {

    resize:

        none;

    min-height:

        120px;

}


/* =========================================
   ERRORES
========================================= */

.error {

    min-height:

        18px;

    color:

        var(--color-error);

    font-size:

        0.85rem;

}


/* =========================================
   BOTON
========================================= */

button {

    cursor:

        pointer;

    border:

        none;

}


#btnEnviar {

    background:

        var(--color-rojo);

    color:

        var(--color-blanco);

    padding:

        16px;

    border-radius:

        12px;

    font-size:

        1rem;

    font-weight:

        bold;

    letter-spacing:

        1px;

    transition:

        background var(--transicion),
        transform var(--transicion);

}


#btnEnviar:hover {

    background:

        var(--color-rojo-hover);

}


#btnEnviar:active {

    transform:

        scale(0.98);

}


#btnEnviar:disabled {

    opacity:

        0.6;

    cursor:

        not-allowed;

}


/* =========================================
   AVISO
========================================= */

.aviso {

    color:

        var(--color-gris);

    font-size:

        0.85rem;

    text-align:

        center;

    line-height:

        1.5;

}


/* =========================================
   POPUPS
========================================= */

.popup {

    position:

        fixed;

    inset:

        0;

    background:

        rgba(0,0,0,0.85);

    display:

        flex;

    justify-content:

        center;

    align-items:

        center;

    z-index:

        999;

    opacity:

        1;

    transition:

        opacity var(--transicion);

}


.popup.oculto {

    display:

        none;

}


.popup-contenido {

    position:

        relative;

    width:

        min(90%, 420px);

    animation:

        aparecer 250ms ease;

}


.popup-contenido img {

    width:

        100%;

    height:

        auto;

    border-radius:

        12px;

    display:

        block;

}


.cerrar-popup {

    position:

        absolute;

    top:

        -12px;

    right:

        -12px;

    width:

        35px;

    height:

        35px;

    border-radius:

        50%;

    background:

        var(--color-rojo);

    color:

        white;

    font-size:

        1.5rem;

    line-height:

        1;

    z-index:

        2;

}


.cerrar-popup:hover {

    background:

        var(--color-rojo-hover);

}


/* =========================================
   ANIMACION POPUP
========================================= */

@keyframes aparecer {


    from {

        opacity:

            0;

        transform:

            scale(0.92);

    }


    to {

        opacity:

            1;

        transform:

            scale(1);

    }

}



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


@media(max-width:600px){


    body {

        align-items:

            flex-start;

        padding:

            20px 0;

    }


    .contenedor {

        width:

            95%;

        padding:

            25px 18px;

        gap:

            22px;

    }


    .logo img {

        width:

            85%;

    }


    .telefono {

        flex-direction:

            column;

    }


    .telefono select {

        width:

            100%;

    }


    input,
    select,
    textarea {

        font-size:

            16px;

    }


    .popup-contenido {

        width:

            88%;

    }


}