:root{
    /* Branding (Looki) */
    --primario: rgb(19, 73, 125);
    --marino: #0D47A1;
    --azul: rgb(24, 134, 185);
    --dorado: rgb(250, 181, 5);
    --verde: rgb(56, 142, 60);
    --rojo: rgb(211, 47, 47);
    --diamante: rgb(207, 228, 238);

    --sombraClara: rgb(192, 192, 192, 0.07);
    --sombraPrimario: rgb(19, 73, 125, 0.2);
    --sombraDiamante: rgb(207, 228, 238, 0.25);
    --sombraVerde: rgb(56, 142, 60, 0.1);

    --gris: rgb(0,0,0,0.7);

    --color_1:  #B00020;
    --color_2:  #FF6D00;
    --color_3:  #FFD600;
    --color_4:  #AEEA00;
    --color_5:  #1DE9B6;
    --color_6:  #56B4E9;
    --color_7:  #D500F9;
    --color_8:  #0D47A1;
    --color_9:  #00C853;
    --color_10: #FF4FB8;

    --sukhumvitset: "sukhumvitset";
    --monserrat_bold: "monserrat_bold";
    --roboto_bold: "roboto_bold";
    --lato_light: "lato_light";
    --lato: "lato";

    --radio_1: 16px;
    --radio_2: 22px;

    --borde_claro: rgb(0,0,0,0.06);
    --texto: rgb(22, 28, 36);
    --texto_2: rgb(22, 28, 36, 0.74);
    --texto_blanco: rgb(255,255,255);
    --texto_blanco_2: rgb(255,255,255,0.82);
    --fondo_blanco: rgb(255,255,255);
    --fondo_suave: rgb(245, 248, 252);
    --fondo_oscuro: rgb(6, 10, 16);

    --shadow_1: 0 14px 40px rgb(0,0,0,0.10);
    --shadow_2: 0 12px 30px rgb(0,0,0,0.18);
}

@font-face{
    font-family: 'sukhumvitset';
    src: url('../fuentes/sukhumvitset.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'monserrat_bold';
    src: url('../fuentes/monserrat_bold.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'roboto_bold';
    src: url('../fuentes/roboto_bold.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'lato_light';
    src: url('../fuentes/lato_light.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'lato';
    src: url('../fuentes/lato.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-family: var(--lato_light);
    -webkit-tap-highlight-color: transparent;
    -moz-outline-style:none;
    outline: none;
}

*::-webkit-scrollbar{
    display: none;
}

html,body{
    width: 100%;
    height: 100%;
    background: var(--fondo_blanco);
}

body{
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

div{
    display: flex;
}

img{
    object-fit: contain;
}

a{
    text-decoration: none;
}

/* =========================
   PORTADA
========================= */
#portada{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    background: var(--fondo_blanco);
}

#caja_portada{
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#logo_portada{
    width: 250px;
    height: 250px;
    opacity: 0.95;
}

#nombre_portada{
    width: 260px;
    height: 62px;
    margin-top: 18px;
}

#p_portada{
    width: auto;
    height: auto;
    margin-top: 12px;
    font-size: 17px;
    color: var(--texto_2);
    letter-spacing: 0.3px;
}

/* =========================
   CONTENEDOR
========================= */
#contenedor{
    width: 100%;
    height: auto;
    min-height: 100%;
    flex-direction: column;
    align-items: center;
    position: relative;
}

#div_principal{
    width: 100%;
    height: auto;
    min-height: 100%;
    flex-direction: column;
    align-items: center;
}

/* =========================
   MENU
========================= */
#menu{
    width: 100%;
    height: 86px;
    min-height: 86px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;

    padding-left: 22px;
    padding-right: 22px;

    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    background: linear-gradient(to bottom,
        rgb(6, 10, 16, 0.92) 0%,
        rgb(6, 10, 16, 0.70) 55%,
        rgb(6, 10, 16, 0.00) 100%
    );
    backdrop-filter: blur(10px);
}

#caja_logo_menu{
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
}

#logo_menu{
    width: 128px;
    height: 42px;
}

#caja_menu{
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.btn_menu{
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    margin-left: 18px;
    margin-right: 18px;
    cursor: pointer;

    padding-top: 10px;
    padding-bottom: 10px;

    opacity: 0.92;
    transition: all 0.35s;
    border-bottom: solid 2px rgb(255,255,255,0);
}

.btn_menu:hover{
    opacity: 1;
    transform: translateY(-1px);
    border-bottom: solid 2px rgb(250, 181, 5, 0.85);
}

.icono_menu{
    width: 0px;
    height: 0px;
    transform: scale(0);
}

.p_btn_menu{
    width: auto;
    height: auto;
    color: var(--texto_blanco);
    font-size: 15px;
    font-family: var(--lato);
    letter-spacing: 0.2px;
    opacity: 1;
}

/* botón responsive */
#btn_responsive{
    width: 52px;
    height: 42px;
    border-radius: 12px;
    background: rgb(255,255,255,0.08);
    border: solid 1px rgb(255,255,255,0.10);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.35s;
    display: none;
}

#btn_responsive:hover{
    background: rgb(255,255,255,0.12);
    transform: scale(1.01);
}

.linea_btn{
    width: 22px;
    height: 2px;
    background: rgb(255,255,255,0.90);
    border-radius: 20px;
    margin-top: 3px;
    margin-bottom: 3px;
}

/* =========================
   SECCIONES
========================= */
.seccion{
    width: 100%;
    height: auto;
    min-height: 720px;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.seccion_blanca{
    background: var(--fondo_blanco);
}

.seccion_negra{
    background: var(--fondo_oscuro);
}

.fondo_seccion{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    opacity: 0.75;
}

.fondo_degradado{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    opacity: 0.95;
}

.contenido_seccion{
    width: 1200px;
    height: auto;
    padding-top: 120px;
    padding-bottom: 90px;
    padding-left: 22px;
    padding-right: 22px;

    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.titulo{
    width: 100%;
    height: auto;
    font-size: 52px;
    color: var(--texto_blanco);
    font-family: var(--roboto_bold);
    letter-spacing: -0.4px;
    line-height: 1.03;
}

.subtitulo{
    width: 100%;
    height: auto;
    font-size: 20px;
    color: var(--texto_blanco_2);
    margin-top: 12px;
    line-height: 1.35;
}

.titulo_b{
    width: 100%;
    height: auto;
    font-size: 42px;
    color: var(--texto);
    font-family: var(--roboto_bold);
    letter-spacing: -0.3px;
    line-height: 1.08;
}

.titulo_b_blanco{
    color: var(--texto_blanco);
}

.subtitulo_b{
    width: 100%;
    height: auto;
    font-size: 18px;
    color: var(--texto_2);
    margin-top: 12px;
    line-height: 1.4;
}

.linea_titulo{
    width: 130px;
    height: 4px;
    margin-top: 18px;
    border-radius: 20px;
    background: linear-gradient(to right, var(--dorado), rgb(255,255,255,0.0));
}

.p_info{
    width: 100%;
    height: auto;
    margin-top: 18px;
    font-size: 17px;
    color: var(--texto_blanco_2);
    line-height: 1.6;
}

.keyword_info{
    color: rgb(250, 181, 5, 0.98);
    font-family: var(--lato);
}

.keyword_info_b{
    color: var(--marino);
    font-family: var(--lato);
}

/* =========================
   HERO
========================= */
#seccion_inicio{
    min-height: 860px;
}

#contenido_seccion_inicio{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#caja_titulos_inicio{
    width: 54%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-right: 22px;
}

#caja_mockups_inicio{
    width: 46%;
    height: auto;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    padding-left: 22px;
}

.caja_mockups{
    pointer-events: none;
}

.mockup{
    width: 420px;
    height: 520px;
    border-radius: var(--radio_2);
    background: rgb(255,255,255,0.08);
    border: solid 1px rgb(255,255,255,0.12);
    box-shadow: var(--shadow_2);
    overflow: hidden;
    justify-content: center;
    align-items: center;
}

.mockup_2{
    width: 300px;
    height: 420px;
    position: absolute;
    bottom: -22px;
    right: 240px;
    transform: rotate(-4deg);
    background: rgb(207, 228, 238, 0.12);
    border: solid 1px rgb(207, 228, 238, 0.18);
}

.img_mockup{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.caja_cta{
    width: 100%;
    height: auto;
    margin-top: 26px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.btn_action{
    width: auto;
    height: 54px;
    border-radius: 16px;
    padding-left: 18px;
    padding-right: 18px;

    flex-direction: row;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: all 0.35s;

    background: linear-gradient(to right, var(--dorado), rgb(255, 136, 0));
    box-shadow: 0 16px 34px rgb(250, 181, 5, 0.18);
}

.btn_action:hover{
    transform: translateY(-1px);
    box-shadow: 0 22px 42px rgb(250, 181, 5, 0.22);
}

.btn_action_secundario{
    margin-left: 14px;
    background: rgb(255,255,255,0.10);
    border: solid 1px rgb(255,255,255,0.18);
    box-shadow: none;
}

.btn_action_secundario:hover{
    box-shadow: none;
    background: rgb(255,255,255,0.14);
}

.icono_btn_action{
    width: 0px;
    height: 0px;
}

.p_btn_action{
    width: auto;
    height: auto;
    font-size: 16px;
    font-family: var(--roboto_bold);
    color: rgb(8, 12, 18);
    letter-spacing: 0.2px;
}

.btn_action_secundario .p_btn_action{
    color: var(--texto_blanco);
    font-family: var(--lato);
}

.caja_badges{
    width: 100%;
    height: auto;
    margin-top: 18px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.badge{
    width: auto;
    height: 40px;
    border-radius: 999px;
    padding-left: 14px;
    padding-right: 14px;
    margin-right: 10px;
    margin-top: 10px;

    flex-direction: row;
    align-items: center;
    justify-content: center;

    background: rgb(255,255,255,0.08);
    border: solid 1px rgb(255,255,255,0.12);
}

.icono_badge{
    width: 0px;
    height: 0px;
}

.p_badge{
    width: auto;
    height: auto;
    font-size: 14px;
    color: var(--texto_blanco_2);
    font-family: var(--lato);
}

/* =========================
   CÓMO FUNCIONA
========================= */
#contenedor_pasos{
    width: 100%;
    height: auto;
    margin-top: 28px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.paso{
    width: 100%;
    height: auto;
    padding: 18px;
    margin-top: 12px;

    border-radius: var(--radio_1);
    border: solid 1px var(--borde_claro);
    box-shadow: var(--shadow_1);

    background: linear-gradient(to right, rgb(245, 248, 252, 0.95), rgb(255,255,255,1));
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}

.caja_numero_paso{
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 16px;
    background: rgb(19, 73, 125, 0.10);
    border: solid 1px rgb(19, 73, 125, 0.12);

    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.numero_paso{
    width: auto;
    height: auto;
    font-size: 18px;
    font-family: var(--roboto_bold);
    color: var(--marino);
}

.caja_texto_paso{
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 16px;
}

.titulo_paso{
    width: 100%;
    height: auto;
    font-size: 18px;
    color: var(--texto);
    font-family: var(--roboto_bold);
}

.p_paso{
    width: 100%;
    height: auto;
    font-size: 16px;
    color: var(--texto_2);
    margin-top: 8px;
    line-height: 1.5;
}

#caja_datos_app{
    width: 100%;
    height: auto;
    margin-top: 24px;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
}

.dato_app{
    width: calc(33.33% - 10px);
    height: auto;
    padding: 18px;
    margin-top: 12px;

    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    border-radius: var(--radio_1);
    border: solid 1px var(--borde_claro);
    background: var(--fondo_blanco);
    box-shadow: var(--shadow_1);
}

.titulo_dato_app{
    width: 100%;
    height: auto;
    font-size: 17px;
    font-family: var(--roboto_bold);
    color: var(--texto);
}

.p_dato_app{
    width: 100%;
    height: auto;
    font-size: 15px;
    color: var(--texto_2);
    margin-top: 10px;
    line-height: 1.55;
}

/* =========================
   PLACAS
========================= */
.caja_beneficios_placas{
    width: 100%;
    height: auto;
    margin-top: 26px;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
}

.beneficio_placa{
    width: calc(33.33% - 10px);
    height: auto;
    padding: 18px;
    margin-top: 12px;

    border-radius: var(--radio_1);
    background: rgb(255,255,255,0.06);
    border: solid 1px rgb(255,255,255,0.10);

    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}

.icono_beneficio_placa{
    width: 0px;
    height: 0px;
}

.p_beneficio_placa{
    width: 100%;
    height: auto;
    font-size: 16px;
    color: var(--texto_blanco_2);
    line-height: 1.55;
}

#contenedor_formas{
    width: 100%;
    height: auto;
    margin-top: 30px;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: var(--radio_2);
    background: rgb(0,0,0,0.20);
    border: solid 1px rgb(255,255,255,0.10);
    padding: 20px;
}

#titulo_formas{
    text-align: center;
}

.caja_formas{
    width: 100%;
    height: auto;
    margin-top: 18px;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
}

.forma{
    width: 220px;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 14px;
    margin: 10px;

    border-radius: var(--radio_1);
    background: rgb(255,255,255,0.06);
    border: solid 1px rgb(255,255,255,0.10);
    transition: all 0.35s;
}

.forma:hover{
    transform: translateY(-2px);
    background: rgb(255,255,255,0.09);
}

.preview_forma{
    width: 100%;
    height: 140px;
    border-radius: 14px;
    background: rgb(207, 228, 238, 0.10);
    border: solid 1px rgb(207, 228, 238, 0.14);
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.img_forma{
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}

.p_forma{
    width: 100%;
    height: auto;
    text-align: center;
    margin-top: 12px;
    font-size: 15px;
    color: var(--texto_blanco);
    font-family: var(--lato);
}

.caja_nota_formas{
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    margin-top: 14px;
}

.p_nota_formas{
    width: auto;
    height: auto;
    font-size: 14px;
    color: var(--texto_blanco_2);
}

/* =========================
   PRECIOS
========================= */
.contenedor_planes{
    width: 100%;
    height: auto;
    margin-top: 26px;

    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
}

.plan{
    width: calc(50% - 10px);
    height: auto;
    border-radius: var(--radio_2);
    border: solid 1px var(--borde_claro);
    box-shadow: var(--shadow_1);
    background: var(--fondo_blanco);
    padding: 22px;

    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
}

.plan_destacado{
    border: solid 1px rgb(250, 181, 5, 0.45);
    box-shadow: 0 16px 50px rgb(250, 181, 5, 0.10);
}

.tag_plan{
    width: auto;
    height: 34px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--dorado), rgb(255, 136, 0));
    position: absolute;
    top: 18px;
    right: 18px;
    justify-content: center;
    align-items: center;
}

.p_tag_plan{
    width: auto;
    height: auto;
    font-size: 13px;
    font-family: var(--roboto_bold);
    color: rgb(8, 12, 18);
}

.caja_titulo_plan{
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.titulo_plan{
    width: 100%;
    height: auto;
    font-size: 20px;
    color: var(--texto);
    font-family: var(--roboto_bold);
}

.precio_plan{
    width: 100%;
    height: auto;
    font-size: 40px;
    margin-top: 10px;
    color: var(--marino);
    font-family: var(--roboto_bold);
    letter-spacing: -0.5px;
}

.nota_plan{
    width: 100%;
    height: auto;
    font-size: 15px;
    margin-top: 6px;
    color: var(--texto_2);
}

.caja_lista_plan{
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-top: 18px;
}

.obj_plan{
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-top: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: solid 1px rgb(0,0,0,0.06);
}

.icono_plan{
    width: 0px;
    height: 0px;
}

.p_plan{
    width: 100%;
    height: auto;
    font-size: 15px;
    color: var(--texto_2);
    line-height: 1.45;
}

.caja_btn_plan{
    width: 100%;
    height: auto;
    margin-top: 18px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.btn_plan{
    width: auto;
    height: 52px;
    border-radius: 16px;
    padding-left: 18px;
    padding-right: 18px;
    cursor: pointer;
    transition: all 0.35s;

    background: rgb(19, 73, 125, 0.10);
    border: solid 1px rgb(19, 73, 125, 0.18);
    justify-content: center;
    align-items: center;
}

.btn_plan:hover{
    transform: translateY(-1px);
    background: rgb(19, 73, 125, 0.14);
}

.btn_plan_premium{
    background: linear-gradient(to right, var(--dorado), rgb(255, 136, 0));
    border: none;
}

.btn_plan_premium:hover{
    background: linear-gradient(to right, rgb(255, 200, 65), rgb(255, 136, 0));
}

.p_btn_plan{
    width: auto;
    height: auto;
    font-size: 15px;
    font-family: var(--roboto_bold);
    color: var(--marino);
}

.btn_plan_premium .p_btn_plan{
    color: rgb(8, 12, 18);
}

.icono_btn_plan{
    width: 0px;
    height: 0px;
}

.caja_nota_precios{
    width: 100%;
    height: auto;
    margin-top: 18px;
    padding: 18px;
    border-radius: var(--radio_1);
    background: rgb(207, 228, 238, 0.35);
    border: solid 1px rgb(207, 228, 238, 0.55);
    justify-content: center;
    align-items: center;
}

.p_nota_precios{
    width: 100%;
    height: auto;
    font-size: 15px;
    color: rgb(0,0,0,0.70);
    line-height: 1.55;
    text-align: center;
}

/* =========================
   FEED
========================= */
.contenedor_tarjetas_feed{
    width: 100%;
    height: auto;
    margin-top: 26px;

    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
}

.tarjeta_feed{
    width: calc(33.33% - 10px);
    height: auto;

    border-radius: var(--radio_2);
    background: rgb(255,255,255,0.06);
    border: solid 1px rgb(255,255,255,0.10);
    box-shadow: var(--shadow_2);
    overflow: hidden;

    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.caja_img_feed{
    width: 100%;
    height: 200px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: rgb(0,0,0,0.22);
}

.img_feed{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.95;
}

.caja_info_feed{
    width: 100%;
    height: auto;
    padding: 18px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.titulo_feed_card{
    width: 100%;
    height: auto;
    font-size: 17px;
    color: var(--texto_blanco);
    font-family: var(--roboto_bold);
}

.p_feed_card{
    width: 100%;
    height: auto;
    margin-top: 10px;
    font-size: 15px;
    color: var(--texto_blanco_2);
    line-height: 1.55;
}

.caja_tags_feed{
    width: 100%;
    height: auto;
    margin-top: 14px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.tag_feed{
    width: auto;
    height: 34px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 999px;
    background: rgb(250, 181, 5, 0.16);
    border: solid 1px rgb(250, 181, 5, 0.22);
    margin-right: 10px;
    margin-top: 10px;
    justify-content: center;
    align-items: center;
}

.tag_feed_2{ background: rgb(24, 134, 185, 0.14); border: solid 1px rgb(24, 134, 185, 0.20); }
.tag_feed_3{ background: rgb(56, 142, 60, 0.14); border: solid 1px rgb(56, 142, 60, 0.20); }
.tag_feed_4{ background: rgb(207, 228, 238, 0.14); border: solid 1px rgb(207, 228, 238, 0.20); }

.p_tag_feed{
    width: auto;
    height: auto;
    font-size: 13px;
    color: var(--texto_blanco_2);
    font-family: var(--lato);
}

/* =========================
   REFUGIOS
========================= */
.contenedor_refugios{
    width: 100%;
    height: auto;
    margin-top: 22px;

    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
}

.obj_refugio{
    width: calc(33.33% - 10px);
    height: auto;

    padding: 18px;
    margin-top: 12px;

    border-radius: var(--radio_1);
    border: solid 1px var(--borde_claro);
    background: var(--fondo_blanco);
    box-shadow: var(--shadow_1);

    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}

.caja_icono_refugio{
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 16px;
    background: rgb(207, 228, 238, 0.55);
    border: solid 1px rgb(207, 228, 238, 0.75);
    justify-content: center;
    align-items: center;
}

.icono_refugio{
    width: 0px;
    height: 0px;
}

.caja_info_refugio{
    width: 100%;
    height: auto;
    padding-left: 16px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.titulo_refugio{
    width: 100%;
    height: auto;
    font-size: 17px;
    color: var(--texto);
    font-family: var(--roboto_bold);
}

.p_refugio{
    width: 100%;
    height: auto;
    font-size: 15px;
    color: var(--texto_2);
    margin-top: 10px;
    line-height: 1.55;
}

/* =========================
   FAQ
========================= */
.seccion_faq{
    padding-top: 0px;
}

.contenedor_faq{
    width: 100%;
    height: auto;
    margin-top: 22px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.obj_faq{
    width: 100%;
    height: auto;
    margin-top: 12px;
    padding: 18px;
    border-radius: var(--radio_1);
    border: solid 1px var(--borde_claro);
    background: var(--fondo_blanco);
    box-shadow: var(--shadow_1);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.pregunta_faq{
    width: 100%;
    height: auto;
    font-size: 17px;
    color: var(--texto);
    font-family: var(--roboto_bold);
}

.respuesta_faq{
    width: 100%;
    height: auto;
    margin-top: 10px;
    font-size: 15px;
    color: var(--texto_2);
    line-height: 1.6;
}

/* =========================
   CONTACTO
========================= */
#contenido_seccion_contacto{
    flex-direction: column;
    align-items: center;
}

#info_contacto{
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.p_info_contacto{
    width: 100%;
    height: auto;
    margin-top: 12px;
    font-size: 16px;
    color: var(--texto_2);
    line-height: 1.6;
}

#caja_contacto{
    width: 100%;
    height: auto;
    margin-top: 22px;

    border-radius: var(--radio_2);
    border: solid 1px var(--borde_claro);
    box-shadow: var(--shadow_1);
    background: var(--fondo_blanco);
    overflow: hidden;

    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
}

#caja_img_contacto{
    width: 46%;
    height: auto;
    position: relative;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: rgb(19, 73, 125, 0.10);
}

#img_contacto{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.92;
}

#info_img_contacto{
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;

    padding: 18px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    background: linear-gradient(to top,
        rgb(6, 10, 16, 0.88) 0%,
        rgb(6, 10, 16, 0.22) 70%,
        rgb(6, 10, 16, 0.0) 100%
    );
}

.obj_img_contacto{
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-top: 10px;
}

.icono_contacto{
    width: 0px;
    height: 0px;
}

.p_icono_contacto{
    width: 100%;
    height: auto;
    font-size: 14px;
    color: var(--texto_blanco_2);
    font-family: var(--lato);
}

#formulario_contacto{
    width: 54%;
    height: auto;
    padding: 22px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.titulo_input{
    width: 100%;
    height: auto;
    font-size: 14px;
    color: var(--texto_2);
    margin-top: 14px;
    font-family: var(--lato);
}

.input_contacto{
    width: 100%;
    height: 46px;
    margin-top: 10px;
    border-radius: 14px;
    border: solid 1px var(--borde_claro);
    background: var(--fondo_suave);
    padding-left: 14px;
    padding-right: 14px;
    font-size: 15px;
    color: var(--texto);
    transition: all 0.25s;
}

#input_mensaje{
    height: 120px;
    padding-top: 12px;
    padding-bottom: 12px;
    resize: none;
}

.input_contacto:focus{
    border: solid 1px rgb(19, 73, 125, 0.22);
    background: rgb(207, 228, 238, 0.25);
}

.btn_enviar{
    width: 100%;
    height: 52px;
    margin-top: 18px;
    border-radius: 16px;
    cursor: pointer;
    overflow: hidden;
    position: relative;

    border: solid 1px rgb(250, 181, 5, 0.45);
    background: rgb(250, 181, 5, 0.10);

    justify-content: center;
    align-items: center;
    transition: all 0.35s;
}

.btn_enviar:hover{
    transform: translateY(-1px);
    background: rgb(250, 181, 5, 0.14);
}

.color_btn_enviar{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to right, var(--dorado), rgb(255, 136, 0));
    opacity: 0.0;
    transition: all 0.35s;
}

.btn_enviar:hover .color_btn_enviar{
    opacity: 1;
}

.capa_btn_enviar{
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.p_btn_enviar{
    width: auto;
    height: auto;
    font-size: 16px;
    color: var(--marino);
    font-family: var(--roboto_bold);
    transition: all 0.35s;
}

.btn_enviar:hover .p_btn_enviar{
    color: rgb(8, 12, 18);
}

.icono_enviar{
    width: 0px;
    height: 0px;
}

#mensaje_enviado{
    width: 100%;
    height: auto;
    margin-top: 14px;
    font-size: 14px;
    color: var(--verde);
    display: none;
    line-height: 1.5;
}

/* =========================
   PIE
========================= */
#pie{
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, rgb(6, 10, 16, 1), rgb(10, 16, 26, 1));
    padding-top: 48px;
    padding-bottom: 26px;
}

.caja_pie{
    width: 1200px;
    height: auto;
    padding-left: 22px;
    padding-right: 22px;

    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.columna_pie{
    width: calc(33.33% - 10px);
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-top: 16px;
}

.logo_pie{
    width: 140px;
    height: 44px;
}

.titulo_pie{
    width: 100%;
    height: auto;
    font-size: 16px;
    color: var(--texto_blanco);
    font-family: var(--roboto_bold);
}

.p_pie{
    width: 100%;
    height: auto;
    font-size: 14px;
    color: var(--texto_blanco_2);
    margin-top: 12px;
    line-height: 1.55;
}

.link_pie{
    width: auto;
    height: auto;
    font-size: 14px;
    color: var(--texto_blanco_2);
    margin-top: 10px;
    cursor: pointer;
    transition: all 0.25s;
}

.link_pie:hover{
    color: rgb(250, 181, 5, 0.95);
    transform: translateX(2px);
}

#caja_sociales{
    width: 100%;
    height: auto;
    margin-top: 14px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.img_sociales{
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 14px;
    padding: 9px;
    background: rgb(255,255,255,0.08);
    border: solid 1px rgb(255,255,255,0.10);
    transition: all 0.25s;
}

.img_sociales:hover{
    transform: translateY(-1px);
    background: rgb(255,255,255,0.12);
}

.caja_copy{
    width: 1200px;
    height: auto;
    padding-left: 22px;
    padding-right: 22px;
    margin-top: 22px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.copy{
    width: auto;
    height: auto;
    font-size: 13px;
    color: rgb(255,255,255,0.60);
}

/* =========================
   MENU RESPONSIVE (barra inferior)
========================= */
#menu_responsive{
    width: 100%;
    height: 74px;
    min-height: 74px;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9999;

    background: rgb(6, 10, 16, 0.94);
    border-top: solid 1px rgb(255,255,255,0.08);

    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    padding-left: 10px;
    padding-right: 10px;

    display: none;
}

.btn_menu_responsive{
    width: calc(14.28% - 6px);
    height: 60px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: rgb(255,255,255,0.05);
    border: solid 1px rgb(255,255,255,0.08);
}

.btn_menu_responsive:hover{
    transform: translateY(-1px);
    background: rgb(255,255,255,0.08);
}

.caja_btn_menu_responsive{
    width: 34px;
    height: 34px;
    border-radius: 14px;
    background: rgb(250, 181, 5, 0.10);
    border: solid 1px rgb(250, 181, 5, 0.16);
    justify-content: center;
    align-items: center;
}

.icono_btn_menu_responsive{
    width: 0px;
    height: 0px;
}

.p_btn_menu_responsive{
    width: auto;
    height: auto;
    margin-top: 8px;
    font-size: 11px;
    color: rgb(255,255,255,0.72);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1260px){
    .contenido_seccion{
        width: 100%;
    }

    .caja_pie{
        width: 100%;
    }

    .caja_copy{
        width: 100%;
    }
}

@media (max-width: 1050px){
    #contenido_seccion_inicio{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #caja_titulos_inicio{
        width: 100%;
        padding-right: 0px;
    }

    #caja_mockups_inicio{
        width: 100%;
        padding-left: 0px;
        margin-top: 26px;
        align-items: center;
    }

    .mockup{
        width: 430px;
        height: 520px;
    }

    .mockup_2{
        right: auto;
        left: 24px;
    }

    .dato_app{
        width: 100%;
    }

    .beneficio_placa{
        width: 100%;
    }

    .plan{
        width: 100%;
        margin-top: 14px;
    }

    .tarjeta_feed{
        width: 100%;
        margin-top: 14px;
    }

    .obj_refugio{
        width: 100%;
    }

    #caja_contacto{
        flex-direction: column;
    }

    #caja_img_contacto{
        width: 100%;
        height: 260px;
        min-height: 260px;
    }

    #formulario_contacto{
        width: 100%;
    }

    .columna_pie{
        width: 100%;
    }
}

@media (max-width: 920px){
    #caja_menu{
        display: none;
    }

    #btn_responsive{
        display: flex;
    }

    #menu_responsive{
        display: flex;
    }

    .contenido_seccion{
        padding-bottom: 110px;
    }

    .titulo{
        font-size: 44px;
    }

    .titulo_b{
        font-size: 36px;
    }
}

@media (max-width: 520px){
    #menu{
        height: 78px;
        min-height: 78px;
        padding-left: 14px;
        padding-right: 14px;
    }

    #logo_menu{
        width: 116px;
        height: 40px;
    }

    .titulo{
        font-size: 36px;
    }

    .subtitulo{
        font-size: 17px;
    }

    .mockup{
        width: 100%;
        height: 520px;
    }

    .mockup_2{
        display: none;
    }

    .btn_action{
        width: 100%;
        justify-content: center;
    }

    .btn_action_secundario{
        margin-left: 0px;
        margin-top: 12px;
    }

    .caja_cta{
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
    }

    .btn_menu_responsive{
        border-radius: 14px;
    }

    .p_btn_menu_responsive{
        display: none;
    }
}