/* =========================================================
   LA PATRIA VIRTUAL
   Apacigua.com
   ========================================================= */

:root {
    --azul: #063b79;
    --azul-profundo: #022b59;
    --azul-claro: #eaf2fb;

    --rojo: #d62828;
    --rojo-suave: #fff0f0;

    --verde: #176c56;
    --verde-suave: #edf7f2;

    --dorado: #bd7c28;
    --dorado-suave: #f8f0e4;

    --texto: #28231f;
    --texto-suave: #6d655d;

    --fondo: #f8f4ed;
    --blanco: #ffffff;

    --borde: #e6dbcd;

    --sombra:
        0 18px 50px rgba(52, 39, 25, 0.08);

    --radio: 24px;

    --ancho: 1180px;
}


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background:
        linear-gradient(
            180deg,
            #fbf8f2 0%,
            #f7f2e9 100%
        );

    color: var(--texto);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    line-height: 1.6;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}


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

.contenedor {
    width: min(
        calc(100% - 40px),
        var(--ancho)
    );

    margin: 0 auto;
}


/* =========================================================
   CABECERA
   ========================================================= */

.cabecera {
    padding: 22px 0;
}

.cabecera .contenedor {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.marca-apacigua {
    font-size: 15px;
    font-weight: 700;
    color: var(--verde);
    letter-spacing: 0.02em;

    transition:
        opacity 0.2s ease;
}

.marca-apacigua:hover {
    opacity: 0.7;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    padding:
        20px
        0
        90px;
}

.hero-contenido {
    text-align: center;
}

.logo-patria {
    width: min(
        660px,
        92vw
    );

    margin:
        0
        auto
        30px;
}

.introduccion {
    max-width: 720px;

    margin:
        0
        auto
        32px;

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

    font-size:
        clamp(
            22px,
            3vw,
            34px
        );

    line-height: 1.35;

    color: #42372e;
}


/* =========================================================
   CONTADOR
   ========================================================= */

.contador {
    width: min(
        480px,
        100%
    );

    margin:
        0
        auto
        36px;

    padding:
        25px
        30px;

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

    border:
        1px solid
        var(--borde);

    border-radius:
        22px;

    box-shadow:
        var(--sombra);

    backdrop-filter:
        blur(10px);
}

.contador-numero {
    display: block;

    margin-bottom: 2px;

    color: var(--azul);

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

    font-size:
        clamp(
            42px,
            7vw,
            72px
        );

    line-height: 1;

    font-weight: 700;
}

.contador-texto {
    display: block;

    margin-top: 8px;

    color: var(--texto-suave);

    font-size: 15px;
}


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

.acciones-principales,
.acciones-actividades {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    flex-wrap: wrap;
}

.boton {
    display: inline-flex;

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

    min-height: 52px;

    padding:
        13px
        24px;

    border-radius:
        999px;

    font-weight: 700;

    font-size: 15px;

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

.boton:hover {
    transform:
        translateY(-2px);
}

.boton-principal {
    background:
        var(--azul);

    color:
        var(--blanco);

    box-shadow:
        0 12px 30px
        rgba(
            6,
            59,
            121,
            0.18
        );
}

.boton-principal:hover {
    background:
        var(--azul-profundo);
}

.boton-secundario {
    background:
        rgba(
            255,
            255,
            255,
            0.85
        );

    color:
        var(--azul);

    border:
        1px solid
        #c9d8e9;
}

.boton-secundario:hover {
    border-color:
        var(--azul);
}


/* =========================================================
   PRÓXIMAMENTE
   ========================================================= */

.proximamente {
    max-width: 700px;

    margin:
        0
        auto;

    padding:
        38px;

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

    border:
        1px solid
        var(--borde);

    border-radius:
        var(--radio);

    box-shadow:
        var(--sombra);
}

.etiqueta {
    display: inline-block;

    margin-bottom: 10px;

    padding:
        7px
        14px;

    background:
        var(--rojo-suave);

    color:
        var(--rojo);

    border-radius:
        999px;

    font-size:
        12px;

    font-weight: 800;

    text-transform:
        uppercase;

    letter-spacing:
        0.12em;
}

.proximamente h2 {
    margin:
        8px
        0
        12px;

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

    font-size:
        clamp(
            30px,
            5vw,
            47px
        );

    line-height:
        1.12;

    font-weight:
        500;
}

.proximamente p {
    max-width:
        570px;

    margin:
        0
        auto;

    color:
        var(--texto-suave);

    font-size:
        17px;
}


/* =========================================================
   CUENTA REGRESIVA
   ========================================================= */

.cuenta-regresiva {
    display: grid;

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

    gap:
        10px;

    margin-top:
        30px;
}

.tiempo {
    padding:
        16px
        8px;

    background:
        var(--dorado-suave);

    border-radius:
        16px;
}

.tiempo-numero {
    display:
        block;

    color:
        var(--azul);

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

    font-size:
        clamp(
            28px,
            5vw,
            42px
        );

    line-height:
        1.1;

    font-weight:
        700;
}

.tiempo-texto {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--texto-suave);

    font-size:
        11px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;
}


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

.seccion {
    padding:
        85px
        0;
}

.sobre-titulo {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--dorado);

    font-size:
        12px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.18em;
}

.seccion h2 {
    margin:
        0
        0
        18px;

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

    font-size:
        clamp(
            34px,
            5vw,
            54px
        );

    line-height:
        1.12;

    font-weight:
        500;
}

.texto-grande {
    max-width:
        720px;

    margin:
        0
        auto
        38px;

    color:
        var(--texto-suave);

    font-size:
        19px;
}


/* =========================================================
   CÓMO FUNCIONA
   ========================================================= */

.como-funciona {
    text-align:
        center;

    background:
        rgba(
            255,
            255,
            255,
            0.55
        );
}

.pasos {
    display:
        grid;

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

    gap:
        22px;
}

.tarjeta-paso {
    padding:
        38px
        28px;

    background:
        var(--blanco);

    border:
        1px solid
        var(--borde);

    border-radius:
        var(--radio);

    box-shadow:
        var(--sombra);
}

.icono-paso {
    margin-bottom:
        14px;

    font-size:
        38px;
}

.tarjeta-paso h3 {
    margin:
        0
        0
        8px;

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

    font-size:
        25px;

    font-weight:
        500;
}

.tarjeta-paso p {
    margin:
        0;

    color:
        var(--texto-suave);

    font-size:
        15px;
}


/* =========================================================
   MURO
   ========================================================= */

.muro {
    text-align:
        center;
}

.estado-vacio {
    max-width:
        700px;

    margin:
        30px
        auto
        0;

    padding:
        55px
        30px;

    background:
        var(--blanco);

    border:
        1px solid
        var(--borde);

    border-radius:
        var(--radio);

    box-shadow:
        var(--sombra);
}

.bandera-grande {
    margin-bottom:
        15px;

    font-size:
        68px;
}

.estado-vacio p {
    max-width:
        520px;

    margin:
        0
        auto
        25px;

    color:
        var(--texto-suave);

    font-size:
        17px;
}


/* =========================================================
   ACTIVIDADES
   ========================================================= */

.actividades {
    text-align:
        center;

    background:
        linear-gradient(
            135deg,
            var(--azul-profundo),
            var(--azul)
        );

    color:
        var(--blanco);
}

.actividades .sobre-titulo {
    color:
        #f3c67c;
}

.actividades h2 {
    color:
        var(--blanco);
}

.actividades .texto-grande {
    color:
        rgba(
            255,
            255,
            255,
            0.76
        );
}

.actividades .boton-principal {
    background:
        var(--blanco);

    color:
        var(--azul);
}

.actividades .boton-principal:hover {
    background:
        #f4f6f8;
}

.actividades .boton-secundario {
    background:
        transparent;

    color:
        var(--blanco);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.45
        );
}

.actividades .boton-secundario:hover {
    border-color:
        var(--blanco);
}


/* =========================================================
   PRIVACIDAD
   ========================================================= */

.privacidad {
    padding:
        65px
        0;
}

.privacidad-contenido {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        22px;

    max-width:
        850px;

    padding:
        35px;

    background:
        var(--verde-suave);

    border:
        1px solid
        #cfe4d8;

    border-radius:
        var(--radio);
}

.privacidad-icono {
    flex:
        0 0 auto;

    font-size:
        32px;
}

.privacidad h2 {
    margin:
        0
        0
        8px;

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

    font-size:
        27px;

    font-weight:
        500;

    color:
        var(--verde);
}

.privacidad p {
    margin:
        0;

    color:
        #53685f;

    font-size:
        15px;
}


/* =========================================================
   PIE
   ========================================================= */

.pie {
    padding:
        35px
        0
        45px;

    border-top:
        1px solid
        var(--borde);
}

.pie .contenedor {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;
}

.pie p {
    margin:
        0;

    color:
        var(--texto-suave);

    font-size:
        13px;
}

.pie a {
    color:
        var(--verde);

    font-weight:
        700;
}


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

@media (
    max-width: 850px
) {

    .pasos {
        grid-template-columns:
            1fr;
    }

    .tarjeta-paso {
        max-width:
            600px;

        width:
            100%;

        margin:
            0 auto;
    }

}


@media (
    max-width: 650px
) {

    .contenedor {
        width:
            min(
                calc(100% - 28px),
                var(--ancho)
            );
    }

    .cabecera {
        padding:
            16px
            0;
    }

    .hero {
        padding:
            10px
            0
            60px;
    }

    .logo-patria {
        margin-bottom:
            22px;
    }

    .introduccion {
        font-size:
            23px;
    }

    .contador {
        padding:
            21px
            18px;
    }

    .proximamente {
        padding:
            30px
            20px;
    }

    .cuenta-regresiva {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .seccion {
        padding:
            65px
            0;
    }

    .texto-grande {
        font-size:
            17px;
    }

    .acciones-principales,
    .acciones-actividades {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .boton {
        width:
            100%;
    }

    .privacidad-contenido {
        flex-direction:
            column;

        padding:
            28px
            24px;
    }

    .pie .contenedor {
        flex-direction:
            column;

        text-align:
            center;
    }

}