/* --------------------------------------------------------------####### colors */

/* basic colors */
:root {
    --transparent: hsla(0, 0%, 0%, 0);

    --black: rgba(0, 0, 0);
    --black_01: hsla(0, 0%, 0%, 0.1);
    --black_02: hsla(0, 0%, 0%, 0.2);
    --black_04: hsla(0, 0%, 0%, 0.4);
    --black_05: hsla(0, 0%, 0%, 0.5);
    --black_06: hsla(0, 0%, 0%, 0.6);
    --black_07: hsla(0, 0%, 0%, 0.7);
    --black_08: hsla(0, 0%, 0%, 0.8);
    --black_09: hsla(0, 0%, 0%, 0.9);
    --black_1: hsla(0, 0%, 0%, 1);

    --blue_241: rgb(236, 244, 247);
    --blue_245: rgb(222, 226, 247);
    --blue_231: rgb(8, 49, 231);
    --blue_153: rgb(10, 36, 153);

    --blue_26_03: rgba(26, 23, 71, 0.356);
    --blue_60: hsla(229, 79%, 22%);
    --blue_60-hover: hsla(230, 90%, 4%);
    --blue_palette_01_50: rgba(18, 22, 59, 0.5);
    --blue_palette_02: hsl(251, 64%, 23%);
    --blue_palette_03: rgba(44, 46, 56, 0.507);
    --blue_100: rgb(9, 15, 65);

    --green_esmeralda: rgb(5, 56, 16);
    --green_palette_01: #005242;
    --green_palette_02: #0d860d;
    --green_91: hsl(91, 88%, 55%);
    --green_92: hsla(105, 83%, 61%, 0.842);
    --green_93: rgb(61, 177, 22);
    --green_101: hsl(101, 93%, 17%);
    --green_109: hsla(109, 43%, 39%, 0.753);
    --green_201: hsla(108, 28%, 10%, 0.6);
    --green_201_1: hsla(108, 28%, 10%);
    --green_202: hsla(105, 38%, 6%, 0.6);
    --green_202_1: hsla(105, 38%, 6%);
    --green_133_a: hsl(113, 69%, 90%);
    --green_133_b: hsla(113, 94%, 50%, 0.644);
    --green_133_c: hsl(112, 90%, 12%);

    --grey_2_03: rgba(2, 1, 19, 0.356);
    --grey_39: rgb(39, 39, 39);
    --grey_128: rgb(128, 128, 128);
    --grey_44_05: rgba(44, 46, 56, 0.507);
    --grey_57_01: rgba(57, 57, 68, 0.116);
    --grey_84_02: rgba(84, 92, 84, 0.219);

    --orange_40: rgb(218, 111, 12);
    --orange_41: rgb(182, 94, 12);
    --orange_40-hover: rgb(161, 90, 9);
    --orange_60: rgb(73, 38, 5);
    --orange_60-hover: rgb(61, 34, 4);

    --red: rgb(255, 5, 5);
    --red_hover: rgb(143, 12, 12);
    --red_palette_01: #800606;
    --red_01_1: rgb(82, 6, 6);
    --red_02_1: rgb(146, 9, 9);

    --white: rgba(255, 255, 255);
    --white_01: hsla(0, 0%, 100%, 0.1);
    --white_02: hsla(0, 0%, 100%, 0.2);
    --white_04: hsla(0, 0%, 100%, 0.4);
    --white_05: hsla(0, 0%, 100%, 0.5);
    --white_06: hsla(0, 0%, 100%, 0.6);
    --white_08: hsla(0, 0%, 100%, 0.8);
    --white_1: hsla(0, 0%, 100%, 1);

    --yellow_100: hsl(59, 95%, 49%); 
    --yellow_101: hsl(60, 62%, 93%); 
}

/* alias colors */
:root {
    /*------ general app */
    --fnd_app: var(--white);
    --fnd_gen: var(--white);

    --body_background: var(--white); 

    /*------ advisors */
    --floatAdvisor_fnd: var(--white);

    /*------ buttons */
    --btn02_border: var(--grey_128);
    --btn02_txtcolor: var(--white);
    --btn02_txtcolor_hover: var(--white);
    --btn02_shadow: var(--black_05);

    --btn_accept: var(--green_101);
    --btn_accept_hover: var(--green_201_1);

    --btn_accept2: var(--green_109);
    --btn_accept2_hover: var(--green_92);

    --btn_neutral_01: var(--blue_60);
    --btn_neutral_01_hover: var(--blue_60-hover);

    --btn_cancel: var(--red_01_1);
    --btn_cancel_hover: var(--red_02_1);

    --btn_caution: var(--orange_41);
    --btn_caution_hover: var(--orange_40-hover);

    --btn_shadow: var(--black_05);
    --btn_shadow_w: var(--white_05);

    --btn_txt_color: var(--white);

    --btn_txtProc: var(--blue_60-hover);
    --btn_txtProc_hover: var(--blue_60);
    --btn_txtProc_spc: var(--blue_60);
    --btn_txtProc_spc_hover: var(--blue_60-hover);
    --btn_txtProc_shadow: var(--black_05);
    --btn_txtProc_txt_color: var(--white);

    /*------ cartel */
    --cartel_fnd:  var(--blue_245);
    --cartel_border: var(--blue_153);
    --cartel_shadow: var(--grey_44_05);

    /*------ column */
    --column_tit_01:  var(--grey_2_03);
    --column_fnd_01:  var(--transparent);
    --column_fnd_02:  var(--grey_57_01);
    --column_fnd_03:  var(--grey_84_02);

    /*------ contacto */
    --contact_fnd:  var(--white);
    --contact_border: var(--blue_palette_02);
    --contact_shadow: var(--blue_palette_03);

    /*------ cookies */
    --cook_fnd: var(--black);
    --cook_hover: var(--yellow_101);
    --cook_hover_shadow: var(--white);
    
    /*------ Fonts and HTML elements */
    --blockquote: var(--grey_39);
    --em: var(--green_101); 

    /*------ footer */
    --foot_fnd: var(--fnd_app);
    --foot_btn: var(--black);
    --foot_btn_over: var(--white);
    --foot_btn_fnd: var(--black);

    /*------ form */
    --form_fnd:  var(--white);
    --form_border: var(--grey_128);
    --form_shadow: var(--grey_44_05);

    /*------ imagen */
    --imagen_origen_fnd:  var(--black_1);
    --imagen_final_fnd:  var(--green_201_1);
    
    /*------ index */
    --index_fnd: var(--black);

    /*------ listados txt */
    --list_txt_01: var(--blue_26_03);

    /*------ radioHeader */
    --rb_back_global: var(--transparent);
    --rb_back_left: var(--white);
    --rb_back_right: var(--black_05);
    --rb_shadow: var(--black);
    --rb_btn_hover: var(--black_02);
    --rb_close: var(--red_palette_01);
    --rb_open: var(--green_palette_02);
    --rb_txt: var(--black_1);

    /*------ scroll */
    --app_bar_fnd: var(--black);
    --app_bar_bar: var(--blue_231);
    --app_bar_bar_over: var(--blue_153);
    

    /*------ txt colors */
    --resaltado_00: var(--white);
    --resaltado_01: var(--yellow_100);

    --text_base: var(--black);
}

/*--------------------------------------------------------------- W3C */
.w3cClass {border:0;width:88px;height:31px}

/* --------------------------------------------------------------####### APP COLORS */

body,html {
    background: var(--body_background);
}

/* --------------------------------------------------------------####### Z-Index */
.zindex_01 {
    z-index: 1;
}

.zindex_02 {
    z-index: 2;
}

/* --------------------------------------------------------------####### screen position */
.position_relative {
    position: relative;
}

.position_absolute {
    position: absolute;
}

.space_0 {
    top: 0vh !important;
}

.space_w_20 {
    margin-top: 20vh;
}

.space_w_center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.space_h_center {
    left: 50%;
    transform: translate(-50%);
}

/* --------------------------------------------------------------####### grid & flex */
.adv_flex {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1em;
    justify-content: center;
}

.btn_flex {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 2em;
    justify-content: center;
    margin-top: 3em;
}

@media screen and (max-width: 900px) {
    .btn_flex {
        flex-direction: column;
        gap: 2em;
        margin-top: 2em;
    }
}

.adv_01_grid {
    align-items: center;
    column-gap: 2em;
    display: grid;
    row-gap: 1ch;
    grid-template-columns: repeat(2, 10em);
}

.adv_01_grid_1 {
    grid-column: 1 / 3;
    grid-row: 1;
    justify-self: center;
}

.adv_01_grid_2-1 {
    grid-column: 1;
    grid-row: 2;
    justify-self: right;
}

.adv_01_grid_2-2 {
    grid-column: 2;
    grid-row: 2;
    justify-self: left;
}

@media screen and (max-width: 900px) {
    .adv_01_grid {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 1em;
        justify-content: center;
    }
}


/* --------------------------------------------------------------####### Fonts and HTML elements*/

/* 
DECLARADAS
html, body, div, 
h1, h2, h3, h4, h5, h6,
p, a, b, i, q, sub, sup, u, em,
blockquote,


POR DECLARAR
span, applet, object, iframe,
pre, abbr, acronym, address, big, cite, code,
del, dfn,  img, ins, kbd, s, samp,
small, strike, strong,  tt, var, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video
*/

@font-face {
    font-family: fontwoff;
    src: url(../fonts/Resolve-Light.woff) format('woff');
    font-display: fallback;
    font-style: normal;
    font-weight: 400;
}

:root {
    --ttf-global: fontwoff;
}

html, body, div {
    font-family: var(--ttf-global);
    font-size: 20px;
}

@media screen and (max-width: 900px) {
    html, body, div {
        font-size: 18px;
    }
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text_base);
    font-family: var(--ttf-global);
    font-style: normal;
    font-weight: bold;
}

h1 {
    font-size: 5em;
}

h2 {
    font-size: 2.1em;
}

h3 {
    font-size: 1.8em;
}

h4 {
    font-size: 1.6em;
}

h5 {
    font-size: 1.4em;
}

h6 {
    font-size: 1.2em;
}

p {
    font-size: 1em;
}

p, a, b, blockquote, em, i, q, sub, sup, u {
    color: var(--text_base);
    font-family: var(--ttf-global);
}

p {
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
}

a, a:visited {
    text-decoration: none;
}

b {
    font-weight: bold;
}

blockquote {
    border-left: 0.3em solid var(--blockquote);
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    margin-left: 4em;
    padding-left: 2em;
    quotes: "“" "”" "‘" "’";
}

blockquote::before {
    content: open-quote;
}

blockquote::after {
    content: close-quote;
}

em {
    text-emphasis-color: var(--em);
    text-emphasis-style: filled;
    font-size: 0.8em;
}

i {
    font-style: italic;
}

q {
    font-style: italic;
    quotes: "“" "”" "‘" "’";
}

q::before {
    content: open-quote;
}

q::after {
    content: close-quote;
}

sub {
    font-size: smaller;
    vertical-align: sub;
}
    
sup {
    font-size: smaller;
    vertical-align:super;
}

u {
    text-decoration: underline;
}

/* --------------------------------------------------------------####### CUSTOMIZE SCROLLBAR (FIREFOX) */
@supports (scrollbar-color: var(--app_bar_fnd) var(--app_bar_bar)) {
    * {
        scrollbar-color: var(--app_bar_bar) var(--app_bar_fnd);
        scrollbar-width: thin;
    }
}

/* --------------------------------------------------------------####### CUSTOMIZE SCROLLBAR (CHROME) */
::-webkit-scrollbar {
    width: 0.35em;
}
    
::-webkit-scrollbar-track  {
    background: var(--app_bar_fnd);
    border-radius: 50vw;
    margin-block: 0.1em;
}

::-webkit-scrollbar-thumb {
    background: var(--app_bar_bar);
    border: 0em solid var(--app_bar_bar);
    border-radius: 0vw;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--app_bar_bar_over);
}

/* --------------------------------------------------------------#######  BTN */

/*--------------------------------------------------------- btn background color */
.background-accept {
    background-color: var(--btn_accept);
}

.background-accept:hover {
    background-color: var(--btn_accept_hover);
}

.background-accept2 {
    background-color: var(--btn_accept2);
}

.background-accept2:hover {
    background-color: var(--btn_accept2_hover);
}

.background-reject {
    background-color: var(--btn_cancel);
}

.background-reject:hover {
    background-color: var(--btn_cancel_hover);
}

.background-caution {
    background-color: var(--btn_caution);
}

.background-caution:hover {
    background-color: var(--btn_caution_hover);
}

.background-blue {
    background-color: var(--btn_neutral_01);
}

.background-blue:hover {
    background-color: var(--btn_neutral_01_hover);
}

.background-txtProc {
    background-color: var(--btn_txtProc);
}

.background-txtProc:hover {
    background-color: var(--btn_txtProc_hover);
}

.background-txtProc_spc {
    background-color: var(--btn_txtProc_spc);
}

.background-txtProc_spc:hover {
    background-color: var(--btn_txtProc_spc_hover);
}

/*--------------------------------------------------------- btn types */
.button02 {
    border: 3px solid var(--btn02_border);
    border-radius:50px;
    border-style: ridge;
    color: var(--btn02_txtcolor);
    cursor: pointer;
    display: block;
    filter: drop-shadow(3px 3px 2px var(--btn02_shadow));
    font-size: 1rem;
    margin-bottom: 0.7em;
    min-width: 12ch;
    max-width: 25ch;
    padding: 0.3em;
    text-align:center;
    user-select: none;
    width: 15ch;
}

.button02:hover {
    filter: drop-shadow(0px 0px 0.5px var(--btn02_shadow));
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
}

.button10 {
    border: 0px !important;
    border-radius: 50px;
    box-shadow: 3px 3px 2px var(--btn_shadow);
    color: var(--btn_txt_color);
    cursor: pointer;
    display: block;
    font-size: 1rem;
    margin-bottom: 0.7em;
    min-width: 15ch;
    padding: 0.5em;
    text-align:center;
    user-select: none;
    width: auto;
}

.button10:hover {
    box-shadow: 0px 0px 2px var(--btn_shadow);
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
}

.btnTxtFormat {
    align-items: center;
    border: 0px !important;
    border-radius: 5px;
    box-shadow: 3px 3px 2px var(--btn_txtProc_shadow);
    color: var(--btn_txtProc_txt_color);
    cursor: pointer;
    display:flex; 
    font-size: 0.7em;
    justify-content: center;
    user-select: none;
    width: 4em;
    height: 3em;
}

.btnTxtFormat:hover {
    box-shadow: 0px 0px 2px var(--btn_txtProc_shadow);
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
}

/*--------------------------------------------------------- btn groups */
.btnBack {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 1em;
    justify-content: left;
}

@media screen and (max-width: 1100px) {
    .btnBack {
        flex-direction: column;
        gap: 1em;
    }
}

.btnBackOptions {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 1em;
    justify-content: left;
}

@media screen and (max-width: 1100px) {
    .btnBackOptions {
        flex-direction: column;
        gap: 1em;
    }
}

.form-btn-flex_01 {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 1em;
    justify-content: space-evenly;
}

@media screen and (max-width: 900px) {
    .form-btn-flex_01 {
        flex-direction: column;
        gap: 1em;
    }
}

.btnTxtFormatGroup {
    display: flex;
    flex-wrap:wrap;
    gap: 1rem;
    justify-content: center;
}

/* ------------------------------------------------------------------------------------------------------->>>>> BLOQUE: LEGAL */
.legal_main {
    min-height: 101vh;
    margin-left: auto;
    margin-right: auto;
    max-width: 60ch;
    padding: 3rem;
}

.txt-legal-01 {
    font-size: 1em;
    line-height: 1.1em;
}

.txt-legal-01 > p:first-child {
    padding-top: 2rem;
}

.txt-legal-01 > p {
    padding-bottom: 1rem;
}

.txt-legal-01 > ul {
    padding-bottom: 1rem;
    padding-left: 1rem;
    margin-top: -1rem;
}

/*--------------------------------------------------------- zona contacto */

#mailAviso {
    display:block;
}

.contact_txt {
    margin-bottom: 2em;
    margin-top: 1em;
    font-size:1.3rem;
    text-align: center;
}

/* ------------------------------------------------------------------------------------------------------->>>>> COOKIES */
#cookDiv {
    background: var(--cook_fnd);
    bottom: 0;
    height: auto;
    position: fixed;
    user-select: none;
    width: 100%;
    z-index: 5;
}

.Cooktxt {
    font-size: 0.9em;
    text-align: center;
}

.Cooktxt p {
    color: var(--resaltado_00);
    padding: 1em;
    margin-bottom: 0.5em;
}

.Cooktxt ul {
    color: var(--resaltado_01);
}

.Cooktxt ul li { 
    border-bottom: 1px solid var(--btn02_border);
    border-radius: 50px;
    border-style: ridge;
    box-shadow: 1px 1px 3px var(--btn_shadow_w);
    cursor: pointer;
    display: inline-block;
    margin-left: 0.5em;
    margin-right: 0.5em;
    padding: 0.5em;
    text-align: center;
    width: 12%;
}

.Cooktxt ul li:last-child {
    margin-bottom: 2em;
}

.Cooktxt ul li:hover {
    box-shadow: 0px 0px 0.5px var(--btn_shadow_w);
    color: var(--cook_hover);
    text-decoration: none;
    text-shadow: var(--cook_hover_shadow) 1px 0 9px;
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
}

@media screen and (max-width: 900px) {
    #cookDiv {
        position: absolute;
        width: 96%;
    }

    .Cooktxt ul li {
        display: block;
        margin: 0.5em auto 1em;
        text-align: center;
        width: 40%;
    }
}

/* ------------------------------------------------------------------------------------------------------->>>>> FORM */
#intro {
    margin-left: auto;
    margin-right: auto;
    width: 90vw;
}

#userLogin {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5vh;
}

.form_login {
    max-width: 500px !important;
}

.form_01 {
    background-color: var(--form_fnd);
    border-radius: 25px;
    border: 4px groove var(--form_border);
    -webkit-box-shadow: 3px 3px 5px 6px var(--form_shadow);
    box-shadow: 3px 3px 5px 6px var(--form_shadow);
    height: auto;
    margin: 0 auto;
    max-width: 1000px;
    padding: 2vw;
}

.field_01 {
    background-color: var(--form_fnd);
    line-height: 250%;
    margin-bottom: 2em;
    text-align:left;
    width: 90%;
}

.label_01 {
    background-color: var(--form_fnd);
    font-size:large;
    font-weight:bold;
}

.input_01 {
    background-color: var(--form_fnd);
    border-radius: 9px;
    border: 2px solid  var(--form_border);
    height: 2rem;
    padding: 0.5em;
    width: 100%;
 
}

.check_01 {
    background-color: var(--form_fnd);
    height: 2rem;
    margin-left: 1.5em;
    padding: 0.5em;
    width: auto;
}

.date_01 {
    background-color: var(--form_fnd);
    border-radius: 9px;
    border: 2px solid  var(--form_border);
    height: 2rem;
    margin-left: 1.5em;
    padding: 0.5em;
    width: auto;
}

.textarea_01 {
    background-color: var(--form_fnd);
    border-radius: 9px;
    border: 2px solid  var(--form_border);
    height: 10rem;
    padding: 0.5em;
    width: 100%;
}

.checkbox_01 {
    height: 2rem;
    width: 100%;
}

.field_group {
    width:100%;
    margin-left: -2vw;
}

/* ------------------------------------------------------------------------------------------------------->>>>> RadioHeader */
.menu-radioButton-container {
    height: 0;
    margin: -0.5vh 0 0 -0.5vw;
    position: sticky;
    top: -0.5vh;
    z-index: 7;
}

.menu-radioButton-container a, a:visited {
    color: var(--rb_txt);
    font-family: 'Urbanist', sans-serif;
    font-size: 1.7em;
    text-decoration:  none;
}

.menu-radioButton {
    background: var(--rb_back_global);
    display: none;
    grid-template-columns: minmax(30ch, 50ch) 1fr;
    height: 100vh;
    position: absolute;
    text-align: left;
    overflow-x: hidden;
    width: 100%;
}

.menu-radioButton-fnd-left {
    background: var(--rb_back_left);
}

.menu-radioButton-fnd-right {
    background: var(--rb_back_right);
}

.menu-radioButton ul {
    margin-top: 2em;
    list-style:none;
}

.menu-radioButton li {
    cursor: pointer;
}

.menu-radioButton li a {
    display: block;
    padding: 1em;
}

.menu-radioButton li:hover {
    background-color: var(--rb_btn_hover);
}

.menu-radioButton-active-01 {
    align-items: center;
    background: var(--fnd_app);
    border: 0;
    border-left: 0;
    border-radius: 0% 0% 50% 0% / 0% 50% 50% 0%;
    box-shadow: inset 0 0 0.5rem var(--rb_shadow);
    box-shadow: 0.3rem 0.3rem 0.8rem var(--rb_shadow);
    box-sizing: content-box;
    content: "";
    cursor: pointer;
    display: flex;
    font-size: 3em;
    height: 3rem;
    justify-content: center;
    padding: 0.5rem;
    width: 3.5rem;
}

.menu-mov-open,
.menu-mov-open::before,
.menu-mov-open::after {
    background: var(--rb_open);
    border-radius: 2em;
    display:block;
    height: 0.10em;
    width: 2rem;
}

.menu-mov-open {
    position: relative;
}

.menu-mov-open::before,
.menu-mov-open::after {
    content: '';
    position:absolute;
}

.menu-mov-open::before {
    bottom: 1rem;
}

.menu-mov-open::after {
    top: 1rem;
}

.menu-mov-close,
.menu-mov-close:after {
    background: var(--rb_close);
    border-radius: 2em;
    content: '';
    height: 2.5rem;
    width: 0.3rem;
}

.menu-mov-close {
    position: relative;
    transform: rotate(30deg);
}

.menu-mov-close:after {
    position: absolute;
    transform: rotate(-60deg);
}

.menu-radioButton-active-02 {
    cursor: pointer;
    height: 100%;
    position: absolute;
    width: 80%;
}

.menu-radioButton-show:checked ~ .menu-radioButton {
    display: grid;
    left: 0;
    margin-top: -4rem;
}

.menu-radioButton-show, 
.menu-radioButton-hide {
    display: none;
}

/* ------------------------------------------------------------------------------------------------------->>>>>  footer */
@keyframes color-trans {
    0% {
        color: var(--foot_btn);
     }

    100% {
        color: var(--foot_btn_over);
    }
}

.footer-gbl {
    background: var(--foot_fnd);
    align-content: center;
    align-items: center;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.2em;
    justify-content:space-evenly;
    margin-bottom: 0em;
    padding-bottom: 2em;
    padding-top: 2em;
    position: relative;
    user-select: none;
    width: 100%;
    z-index: 2;
}

.footer-gbl > a {
    text-decoration: none;
}

.footer-gbl > p {
    content:"";
}

.footer-link {
    color: var(--foot_btn);
    font-size: 1rem;
    line-height: 200%;
    text-align: center;
}

.footer-link:hover {
    animation: color-trans 250ms forwards;
    color: var(--foot_btn_over);
    cursor:pointer;
    text-decoration: none;
}

.footer-fnd {
    cursor: pointer;
    border: 0;
    color: var(--foot_btn);
    position: relative;
    z-index: 1;
}
  
.footer-fnd::after {
    background: var(--foot_btn_fnd);
    border-radius:25px;
    content: "";
    height: 100%;
    left: 0;
    margin-left: -7%;
    position: absolute;
    top: 0;
-webkit-transform: scaleX(0);
    transform: scaleX(0);
-webkit-transform-origin: right;
    transform-origin: right;
    transition: transform 200ms ease-in, -webkit-transform 150ms ease-in;
    width: 114%;
    z-index: -1;
}
  
.footer-fnd:hover::after {
-webkit-transform: scaleX(1);
    transform: scaleX(1);
-webkit-transform-origin: center;
    transform-origin: center;
}

@media screen and (max-width: 1000px) {
    .footer-gbl {
        flex-direction: column;
        gap:  30px;
    }
    .footer-gbl > p {
        margin-bottom: 2em;
    }
}

/* ------------------------------------------------------------------------------------------------------->>>>>  zona ADMIN */
.admin-gen {
    background:  var(--fnd_gen);
    margin: 0 auto;
    position: relative;
    width: 80vw;
}

/* ------------------------------------------------------------------------------------------------------->>>>>  cartel (global) */
.cartel_flotante_01 {
    background-color:var(--cartel_fnd);
    border-radius: 25px;
    border: 4px groove var(--cartel_border);
    -webkit-box-shadow: 3px 3px 5px 6px var(--cartel_shadow);
    box-shadow: 3px 3px 5px 6px var(--cartel_shadow);
    height: auto;
    min-width: 250px;
    margin-left: auto;
    margin-right: auto;
    padding: 0.2em 1em 1em 1em;
    width: auto;
}

/*--------------------------------------------------------- tipos cartel */ 
#cartel_informar, #cartel_eliminar {
    visibility: hidden;
}

.cartel_txt  {
    text-align: center;
}

.cartel_txt > p {
    padding-bottom: 0.5em;
    padding-top: 1.5em;
}

.cartel_txt > h4 {
    padding-top: 0.5em;
}

.cartel_txt > h4::after {
    padding-bottom: 0em;
}


/* ------------------------------------------------------------------------------------------------------->>>>>  IMAGEN */

/*--------------------------------------------------------- las dimensiones final div son asignadas en la llamada al php insertar img */
#imgOrigenDiv {
    background-color: var(--imagen_origen_fnd);
    position: relative;
}

/*--------------------------------------------------------- las dimensiones final div son asignadas en la llamada al php insertar img */
#imgFinalDiv {
    background-color: var(--imagen_final_fnd);
    position: relative;
}

#canvas1, #canvas2 {
    position: absolute;
    z-index: 2;
}
 
#imgOrigen, #imgFinal {
    display:block;
    background-color:transparent;
    pointer-events: none;
    position: absolute;
}

/* ------------------------------------------------------------------------------------------------------->>>>>  LISTADOS */

.column {
    display: flex;
    height: auto;
    margin-left: 0em;
    padding: 2em 0em 1em 0em;
    width: 50vw;
}

.column_a {
    background: var(--column_fnd_03);
    height: auto;
    padding: 2em 2em 2em 2em;
    width: 50vw;
}

.column_b {
    background: var(--column_fnd_02);
    height: auto;
    padding: 2em 2em 2em 2em;
    width: 50vw;
}

.column_list {
    background: var(--column_fnd_01);
    height: auto;
    padding: 2em 0em 1em 0em;
    width: 25vw;
}

.column_tit {
    background: var(--column_tit_01);
    padding: 1em;
}

.column_txt{
    background: transparent;
    height: auto;
    padding: 1.5em 0em 1em 0.5em;
    width: 25vw;
}

.column_txt_area{
    background: transparent;
    border: 0.1em solid;
    height: auto;
    padding: 2em;
    width: 20vw;
}

/* ------------------------------------------------------------------------------------------------------->>>>>  GLOBAL */
.globalContainer {
    margin-bottom: 0.5rem;
    min-height: 101vh;
}

.logo {
    background: url("../img/logoTrans2.avif"); /* height: 438px; width: 430px;*/
    background-position: center; 
    background-size: 100%;
    background-repeat: no-repeat;
    height: 3em;
    position: fixed;
    right: 1em;
    top: 0.5em;
    width: 3em;
}

.lista_txt {
    background: var(--list_txt_01);
    padding: 0.2em;
}


/* ------------------------------------------------------------------------------------------------------->>>>>  INDEX */
#indexgen {
    background: var(--index_fnd);
    content:'';
    display: grid;
    height: 105vh;
    width: 100%;
}

.index-color {
    background: var(--index_fnd);
}

.imgCentral {
    align-self:center;
    background: url("../img/avatarG3.webp");
    background-size: 100%;
    background-repeat: no-repeat;
    height: 100%;
    justify-self: center;
    margin-top: 25vh;
    min-width: 17em;
    width: 30%;
}

/* ------------------------------------------------------------------------------------------------------->>>>>  IDIOMA */
#languaje {
    content:"";
}

#languaje_find {
    content:"";
}

#languaje_list {
    content:"";
}

#languaje_listText {
    content:"";
}

#languaje_translator {
    content:"";
}

#languaje_view {
    content:"";
}


/* ------------------------------------------------------------------------------------------------------->>>>>  GALERIA */
#gallery {
    content:"";
}

#gallery_new {
    content:"";
}

#gallery_find {
    content:"";
}

#gallery_list {
    content:"";
}

#gallery_view {
    content:"";
}

#gallery_data {
    content:"";
}

/* ------------------------------------------------------------------------------------------------------->>>>>  IMAGEN */

/* ------------------------------------------------------------------------------------------------------->>>>>  TEXTOS */
#textWeb {
    content:"";
}

#text_new {
    content:"";
}

#text_find {
    content:"";
}

#text_update {
    content:"";
}

#text_update {
    content:"";
}
/* #listadoTextos #listadoTextos2*/

/* ------------------------------------------------------------------------------------------------------->>>>>  MENU */

/* ------------------------------------------------------------------------------------------------------->>>>>  USUARIO */

/* ------------------------------------------------------------------------------------------------------->>>>>  TEXTOS0006 */

/* carteles flotantes */
#format_www {
    visibility:hidden;
}

#format_color {
    visibility:hidden;
}

.btnTxtFormatGroup {
    content:"";
}

#text_update {
    content:"";
}

/* ------------------------------------------------------------------------------------------------------->>>>>  TEXTOS */



/* ------ REVISAR */
#zonaInst, #zonaNew, #zonaFind, #zonaList, #zonaView, #idiTxtList, #zonaTranslator, 
#changeOrder,

#zonaInsert, #zonaOrden, #transMod, #gallery_modify,
  #listadoZonas, #listadoIdiomas {
    display: none;
}

.captura_orden {
    background: red;
    height: 1ch;
    width: 12em;
}

.showImgGaleria {
    height: auto;
    width: 20vw;
}

.elemento {
    cursor: pointer;
    user-select:none;
}