html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, 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 {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}

@font-face {font-family: 'Raleway-SemiBold'; src: url(FNTS/Raleway-SemiBold.ttf); }
@font-face {font-family: 'Raleway-ExtraBoldItalic'; src: url(FNTS/Raleway-ExtraBoldItalic.ttf); }
@font-face {font-family: 'Raleway-Bold'; src: url(FNTS/Raleway-Bold.ttf); }
@font-face {font-family: 'Raleway-Medium'; src: url(FNTS/Raleway-Medium.ttf); }
@font-face {font-family: 'Raleway-SemiBoldItalic'; src: url(FNTS/Raleway-SemiBoldItalic.ttf); }
@font-face {font-family: 'Raleway-ItalicRaleway-Italic'; src: url(FNTS/Raleway-Italic.ttf); }
@font-face {font-family: 'Raleway-LightItalic'; src: url(FNTS/Raleway-LightItalic.ttf); }
/*@font-face {font-family: ''; src: url(FNTS/); }*/

body {
  font-family: 'Raleway', sans-serif;
}

.marb_sx1{
    margin-bottom: 60px;
    position:absolute;
    left:-30px;
}
.ml13 .letter { display: inline-block; line-height: 1em; }
.ml14 .letter { display: inline-block; line-height: 1em; }
.ml15 .letter { display: inline-block; line-height: 1em; }
.ml16 .letter { display: inline-block; line-height: 1em; }
.tac{ text-align: center; }
.fw7{ font-weight: 700; }
.imgcent{ display: block; margin: 0 auto; }
.img_cva1{ width: 75%; }
html{
    background-color: #FFF;
    overflow-x: hidden;
    overflow-y: auto;
}
.vx_a{
    position: relative;
    width: 100%;
    height: 100px;
    background-color: #003D64;
}
.vx_a1{
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 5px;
    background-color: #D59F0F;
}
.vx_a1_img1{
    position: absolute;
    top: -84px;
    right: -95px;
    width: 670px;
}
.vx_b{
    position: absolute;
    top: 100px;
    left: 0px;
    right: 0px;
    height: 70px;
}
.vx_c{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 80px;
    background-color: #005EA8;
    background-image: url(../IMG/img_bckfoot.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.vx_b_mnu{
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
}
.vx_b_mnu_a{
    position: absolute;
    top: 0px;
    right: 270px;
    height: 100%;
    left: 0px;
    z-index: 5000;
}
.vx_b_mnu_b{
    position: absolute;
    top: 0px;
    right: 0px;
    width: 200px;
    height: 100%;
    cursor: pointer;
}
.vx_cont{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 80px;
    bottom: 80px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 20px;
}
.vx_cont_i1{
    position: relative;
    margin: 0 auto;
    width: 1160px;
    height: 100%;
}
.vx_cont_ige{
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    text-align: center;
    padding: 0px 0px;
}
.vx_cont_igd{
    position: relative;
    width: 90%;
    height: 90%;
    background-color: rgb(218, 36, 148);
    overflow-x: hidden;
    overflow-y: auto;
}

.vx_b_mnu_aitem{
    position: relative;
    float: left;
    width: 15.5%;
    height: 100%;
    background-color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: 'Raleway-SemiBold';
    color: #456F81;
    cursor: pointer;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    font-size: 1em;
}
.vx_b_mnu_aitem:hover{
    position: relative;
    float: left;
    width: 15.5%;
    height: 100%;
    background-color: rgb(223, 223, 223);
    display: flex;
    align-items: center;
    text-align: center;
    font-family: 'Raleway-SemiBold';
    color: #456F81;
    cursor: pointer;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
.item_mar1{ margin-right: 10px; }
.vx_cont_dv2_55{
    position: relative;
    float: left;
    width: 47.5%;
    min-height: 150px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0%;
}
.vx_cont_dv2_55_comp{
    position: absolute;
    display: table;
    top: 0px;
    right: -70%;
    left: 100%;
    height: 100%;
}
.vx_cont_dv2_55_com2{
    position: relative;
    width: 47.5%;
    display: table;
    min-height: 150px;
    margin-left: 0%;
}
.dv_mar1{ padding-right: 5%; }
.img_fltc{ display: flex; justify-content: center; align-items: center; text-align: center; }
.img_fltc_e1{ display: flex; justify-content: center; align-items: center; text-align: center; }
.sh1{
    font-family: 'Raleway-Bold';
    font-size: 1.3em;
    color: #000;
    line-height: 1.2;
    text-align: left;
}
.sh2{
    font-family: 'Raleway-medium';
    font-size: 20px;
    color: #456F81;
    line-height: 1.2;
    text-align: left;
}
.sh2_x{ font-family: 'Raleway-medium'; font-size: 2vh; color: #456F81; line-height: 1.2; text-align: left; }
.sh2_y{ font-family: 'Raleway-medium'; font-size: 2vh; color: #456F81; line-height: 1.2; text-align: left; }
.sh3{
    font-family: 'Raleway-Bold';
    font-size: 20px;
    color: #D59F0F;
    line-height: 1.2;
}
.sh4{
    font-family: 'Raleway-SemiBoldItalic';
    font-size: 22px;
    color: #D59F0F;
    line-height: 1.2;
}
.sh5{ font-family: 'Raleway-Bold'; font-size: 20px; color: #456F81; line-height: 1.2; }
.sh6{ font-family: 'Raleway-ItalicRaleway-Italic'; font-size: 20px; color: #005EA8; line-height: 1.2; }
.vx_cont_dv2_4x{
    position: relative;
    float: left;
    width: 37.5%;
    min-height: 150px;
    background-color: rgb(126, 204, 36);
}
.vx_cont_dv2_6x{
    position: absolute;
    top: 0px;
    left: 120%;
    width: 146%;
    height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
}
.vx_cont_dv2_6x_i{
    position: relative;
    width: 100%;
    min-height: 50px;
    text-align: left;
}
.img_cv1{ position: relative; float: right; }
.wt100{ position: relative; width: 100%; }
.vx_cont_dv2_33p{
    position: relative;
    float: left;
    width: 31%;
    height: 100%;
    background-color: #FFF;
}
.vx_cont_dv2_mr33p1{ margin: 0px 3.5%; }
.img_cent{ position: relative; margin: 0 auto; display: block; }
.tac{ text-align: center; }
.vx_cont_dv2_dvs{
    position: relative;
    width: 100%;
    height: 2px;
    background-color: #456F81;
    margin-top: 10px;
    margin-bottom: 15px;
}
.sh5 a{ text-decoration: none; }
.dv_ln1{
    position: relative;
    width: 25px;
    height: 2px;
    background-color: #456F81;
    margin: 25px 0px;
}
.tar{ text-align: right; }
.dv_ln2{
    position: relative;
    width: 100%;
    height: 2px;
    background-color: #456F81;
    margin: 25px 0px;
}
.cnt_td3{
    position: relative;
    width: 100%;
    height: 93.5%;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-top: 4.5%;
}
.img_esp1{ position: relative; max-width: 120px; }
.img_esp2{ position: relative; max-width: 170px; }
.img_esp3{ position: relative; max-width: 150px; }
.cnt_txt1{
    position: relative;
    width: 100%;
    max-height: 200px;
    min-height: 180px;
    max-height: 180px;
}
.mnu_btslct{
    position: absolute;
    top: 0px;
    left: 43%;
    right: 43%;
    height: 10px;
    background-color: #D59F0F;
}
.vx_cont_dv2_dvsclap{
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100px;
    height: 50px;
    font-family: 'Raleway-LightItalic';
    font-size: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.vx_cont_dv2_dvsclap_c1{ color: #D59F0F; }
.vx_cont_dv2_dvsclap_c2{ color: #456F81; }
.upclap{ cursor: pointer; }
.lfcunam_d0{
    position: relative;
    float: left;
    width: 100%;
    min-height: 150px;
    padding-bottom: 30px;
    border-bottom: 1px solid #456F80;
}
.lfcunam_d1{
    position: relative;
    float: left;
    width: 25%;
    min-height: 100px;
}
.lfcunam_d2{
    position: relative;
    float: right;
    width: 65%;
    min-height: 100px;
    padding: 0px 3.5%;
}
.lfcunam_d0_a{
    position: relative;
    display: block;
    width: 60%;
    min-height: 150px;
    margin: 0px 20%;
}
.lfcunam_d0_b{
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    width: 20%;
    min-height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.lfcunam_d0_c{
    position: absolute;
    right: 0px;
    top: 0px;
    display: block;
    width: 20%;
    min-height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.stl_h1{ font-family: 'Raleway-Bold'; font-size: 26px; color: #003D64; }
.stl_h1_b{ font-family: 'Raleway-ItalicRaleway-Italic'; font-size: 26px; color: #003D64; }
.stl_h2{ font-family: 'Raleway-ItalicRaleway-Italic'; font-size: 26px; color: #866E1D; }
.stl_h3{ font-family: 'Raleway-Bold'; font-size: 20px; color: #005E89; margin-bottom: 10px; }
.stl_h4{ font-family: 'Raleway-Bold'; font-size: 20px; color: #456F80; }
.stl_h5{ font-family: 'Raleway-Bold'; font-size: 16px; color: #005E89; margin-bottom: 10px; }
.stl_tx1{
    font-family: 'Raleway-Medium';
    font-size: 16px;
    color: #456F80;
    margin-bottom: 15px;
    line-height: 1.7;
    text-align: justify;
}
.stl_tx1b{
    font-family: 'Raleway-Medium';
    font-size: 16px;
    color: #456F80;
    margin-bottom: 15px;
    line-height: 1.7;
}
.stl_tx1c{
    font-family: 'Raleway-Medium';
    font-size: 16px;
    color: #456F80;
    margin-bottom: 0px;
    line-height: 1.7;
    text-align: justify;
}
.stl_tx1_fnd1{
    font-family: 'Raleway-Medium';
    font-size: 14px;
    color: #FFF;
    margin-bottom: 15px;
    background-color: #456F80;
    width: 90%;
    padding: 5%;
}
.stl_tx1_fnd2{
    font-family: 'Raleway-Medium';
    font-size: 14px;
    color: #FFF;
    margin-bottom: 15px;
    background-color: #866E1D;
    width: 90%;
    padding: 5%;
}
.stl_tx1_fnd3{
    font-family: 'Raleway-Medium';
    font-size: 14px;
    color: #005E89;
    margin-bottom: 15px;
    background-color: #CCDFE5;
    width: 90%;
    padding: 5%;
}
.stl_tx1_fnd4{
    font-family: 'Raleway-Medium';
    font-size: 16px;
    color: #005E89;
    margin-bottom: 5px;
    text-align: center;
}
.stl_tb1{ font-family: 'Raleway-Medium'; font-size: 16px; color: #456F80; margin-bottom: 15px; text-align: right; }
.stl_tb2{ font-family: 'Raleway-Medium'; font-size: 15px; color: #000; margin-bottom: 15px; margin-left: 15px; }
.mn_v1{
    font-family: 'Raleway-Medium';
    font-size: 19px;
    color: #456F80;
    border-bottom: 1px solid #456F80;
    padding: 15px;
    cursor: pointer;
}
.mn_v1_itm{
    position: relative;
    display: table;
    width: 100%;
    min-height: 10px;
    font-family: 'Raleway-Medium';
    font-size: 19px;
    color: #456F80;
    border-bottom: 1px solid #456F80;
    padding: 15px;
    cursor: pointer;
    background-color: rgb(255, 255, 255);
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
.mn_v1_itm:hover{
    position: relative;
    display: table;
    width: 100%;
    min-height: 10px;
    font-family: 'Raleway-Medium';
    font-size: 19px;
    color: #456F80;
    border-bottom: 1px solid #456F80;
    padding: 15px;
    cursor: pointer;
    background-color: rgb(228, 228, 228);
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
.tab_1{ position: relative; width: 100%; }
.tab_2{ position: relative; width: 100%; }
.tab_2 td{ border: 1px solid #456F80; padding-top: 15px; }
.tab_3{ position: relative; margin: 0 auto; width: 60%; }
.tab_3 td{ border-top: 1px solid #456F80; padding-top: 15px; }
.tab_4{ position: relative; width: 500px; }
.tab_4bs{ position: relative; width: 80% }
.tab_4bs2{ position: relative; width: 90%; }
.cnt_cent { position: relative; display: table; margin: 0 auto; min-width: 50px; min-height: 50px; }
.subi { vertical-align: sub; font-size: 8pt; font-style: normal; }
.lfc_tx5{ font-family: 'Raleway-SemiBoldItalic'; font-size: 22px; color: #456F80; }
.lfc_tb4{ position: relative; width: 100%; }
.fcw{
    width: 16%;
    background-color: #005E89;
    border-bottom: 1px solid #FFF;
    color: #FFF;
    text-align: center;
    font-family: 'Raleway-bold';
    padding: 10px;
}
.tdd{
    width: 16%;
    background-color: #E6EBED;
    border-bottom: 1px solid #FFF;
    color: #456F80;
    text-align: center;
    font-family: 'Raleway-Medium';
    padding: 10px;
}
.tdd1{
    width: 16%;
    background-color: #B6C9CE;
    border-bottom: 1px solid #FFF;
    color: #456F80;
    text-align: center;
    font-family: 'Raleway-Medium';
    padding: 10px;
}
.gteru_s1xa {
    position: relative;
    width: 100%;
    min-height: 50px;
    background-color: #FFF;
    border: 1px solid #DDDDDD;
    font-style: normal;
    padding: 10px 0px;
}
.lfc_tb5 { width: 100%; }
.mlr10 {
    margin-right: 7px;
    margin-left: 7px;
    line-height: 1.5;
    font-family: 'Raleway-Medium';
    font-size: 14px;
}
.dv_hd{ padding-bottom: 90px; }
.mn_v1_itm_slct{
    background-color: #866E1D;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 5px;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
.ckg_c1{ background-color: #005E89; }
.cnt_text1{
    position: relative;
    width: 95%;
    min-height: 10px;
    background-color: #ccdfe5;
    padding: 20px;
}
.cnt_text2{
    position: relative;
    width: 95%;
    min-height: 10px;
    background-color: #f7f7f7;
    padding: 20px;
}
.cntec{ position: relative; margin: 0 auto; width: 250px; min-height: 10px; }
.cntecb{ position: relative; margin: 0 auto; width: 335px; min-height: 10px; }
.cntecc{ position: relative; margin: 0 auto; width: 120px; min-height: 10px; }
.text_color1{ color: #0000ff;}
.text_color2{ color: #03c2c2;}
.text_color3{ color: #00a500;}

.img_sg1{ width: 120px; }
.clk_reds{ width:25%; position: relative; float: right; }
.img_smtr12{ width: 60%; }
.martab_t4sub{ padding-left: 22px; }
.marg_r1{ padding-right: 60px; }
.blg_A{ position: relative; width: 100%; height: 140px; }
.blg_tx1{
    font-family: 'Raleway-Bold';
    font-size: 35px;
    margin: 50px 0px;
    color: #866E1D;
}
.blg_tx2{
    font-family: 'Raleway-Bold';
    font-size: 25px;
    margin-bottom: 10px;
    margin-left: 30px;
    margin-top: 6px;
    color: #FFF;
}
.blg_tx3{
    font-family: 'Raleway-ItalicRaleway-Italic';
    font-size: 14px;
    margin-left: 30px;
    margin-top: 10px;
    color: #FFF;
}
.blg_A1{
    position: relative;
    float: left;
    width: 60%;
    height: 135px;
    background-color: #005EA8;
    border-radius: 15px;
}
.blg_A2{
    position: relative;
    float: right;
    width: 38%;
    height: 135px;
    border: 1.5px solid #866E1D;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#detalle{
    position: relative;
    width: 100%;
    height: 270px;
    margin-top: 50px;
    background-color: #456F80;
    border-radius: 15px;
}
.blg_td1{
    background-color: #003D64;
    color: #FFF;
    font-family: 'Raleway-Bold';
    text-align: center; 
    vertical-align: top;
    border-right: 1px solid #FFF;
}
.blg_td1b{
    background-color: #003D64;
    color: #FFF;
    font-family: 'Raleway-Bold';
    text-align:center; 
    vertical-align: middle;
    border-right: 1px solid #FFF;
}
.blg_td1 p{ margin-top: 10px; }
.blg_td2{
    background-color: #E6EBED;
    color: #456F80;
    font-family: 'Raleway-Bold';
    text-align: center; 
    vertical-align: middle;
    height: 65px;
    border-right: 1px solid #FFF;
}
.blg_tab1{
    position: relative;
    width: 80%;
    height: 150px;
    border-color: #FFF;
    margin-left: 28px;
}
.blg_A1a{ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 70%; }
.blg_A1b{ position: absolute; top: 0px; bottom: 0px; left: 30%; right: 0px; }
#tabulado{
    position: absolute;
    right: 25px;
    top: 43%;
    width: 100px;
    height: 55px;
    border-radius: 20px;
    background-color: #E6EBED;
    border-right: 1px solid #FFF;
    font-family: 'Raleway-Bold';
    font-size: 14px;
    color: #456F80;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.slct_a1 { background-color: DodgerBlue; }
/*the container must be positioned relative:*/
.caja {
    border:1px solid #d9d9d9;
    height:30px;
    overflow: hidden;
    width: 150px;
    position:relative;
    background-color: #DAE2E5;
    margin-left: 30px;
 }
 .caja2 {
    border:1px solid #d9d9d9;
    height:30px;
    overflow: hidden;
    width: 90%;
    position:relative;
    background-color: #DAE2E5;
    margin-left: 30px;
 }
 select {
    background: transparent;
    border: none;
    font-size: 14px;
    height: 30px;
    padding: 5px;
    width: 250px;
 }
 select:focus{ outline: none;}
 .caja::after{
    content: "\025be";
    display: table-cell;
    padding-top: 7px;
    text-align: center;
    width: 30px;
    height: 30px;
    background-color: #DAE2E5;
    position: absolute;
    top: 0;
    right: 0px;
    pointer-events: none;
}
.caja2::after{
    content: "\025be";
    display: table-cell;
    padding-top: 7px;
    text-align: center;
    width: 30px;
    height: 30px;
    background-color: #DAE2E5;
    position: absolute;
    top: 0;
    right: 0px;
    pointer-events: none;
}
.clk_x{ cursor: pointer; }
@media (min-width: 0px) and (max-width: 1060px){
.vx_cont_i1{
    margin: 0 auto;
    width: 90%;
    height: 93%;
    padding: 0 5%;
}
}

.home-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    background-color: #fdfdfd;
    padding: 40px 20px;
    text-align: center;
}
.home-content { max-width: 800px; }
.home-logo { width: 100px; margin-bottom: 20px; }
.home-title { font-family: 'Raleway', sans-serif; font-size: 2rem; color: #333; margin-bottom: 10px; }
.home-subtitle { font-size: 1.2rem; color: #555; margin-bottom: 30px; line-height: 1.5; }
.home-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.home-button {
    background-color: #D59F0F;
    color: #fff;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.home-button:hover { background-color: #6c5918; }

/* Animación suave */
.fade-in { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

.menu-nav {
    width: 100%;
    margin: 0 auto;
    background-color: #003D64;
    padding: 0.5rem 0;
    display: flex;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.menu-items { list-style: none; margin: 0; padding: 0; display: flex; gap: 2rem; }
.menu-link {
    color: white;
    text-decoration: none;
    font-family: 'Raleway', sans-serif;
    font-size: 1.1rem;
    padding: 0.5rem 0;
    transition: all 0.3s ease;
    position: relative;
}
.menu-link:hover, .menu-link.active { color: #FFD700; }
.menu-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 2px;
    background: #FFD700;
    transition: width 0.3s ease;
}
.menu-link:hover::after, .menu-link.active::after { width: 100%; }

.header-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding: 1rem 0;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ccc;
}
.header-logo { height: 70px; object-fit: contain; }

/* Responsive para móviles */
.mobile-menu-button {
    display: none;
    position: fixed;
    top: 15px;
    left: 15px;
    font-size: 2rem;
    z-index: 9999;
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
}
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 75%;
    background-color: #003D64;
    z-index: 1099;
    padding: 60px 20px 20px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
}
.menu-items-vertical { display: flex; flex-direction: column; gap: 1rem; }
.menu-items-vertical a {
    color: white;
    font-family: 'Raleway', sans-serif;
    font-size: 1.2rem;
    text-decoration: none;
}
@media screen and (max-width: 768px) {
    .menu-nav { display: none; }
    .mobile-menu-button { display: block; }
    .vx_a1_img1 {
        width: 100%;
        position: relative;
        top: 0;
        right: 0;
        z-index: 1;
    }
    .mobile-menu.open { display: block; }
}

/* Profesor screen */
.profesor-container { padding: 40px 20px; max-width: 1200px; margin: 0 auto; }
.profesor-info {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px;
}
.profesor-img img { width: 250px; height: auto; border-radius: 12px; }
.profesor-texto {
    max-width: 600px; font-family: 'Raleway-Medium', sans-serif; color: #456F81; font-size: 1.1rem;
}
.profesor-texto h2 { font-family: 'Raleway-Bold'; font-size: 1.8rem; color: #003D64; margin-bottom: 10px; }
.profesor-cards {
    margin-top: 40px; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
}
.card-link {
    background-color: #003D64; color: white; padding: 12px 24px; text-decoration: none; border-radius: 10px;
    font-family: 'Raleway-Bold'; transition: background-color 0.3s ease;
}
.card-link:hover { background-color: #D59F0F; }

/* Contenido de cursos (otra vista existente) */
.cursos-container { max-width: 1200px; margin: 0 auto; padding: 20px 14px; }
.cursos-title {
    text-align: center; font-size: 2.5rem; margin-bottom: 40px; color: #333; font-weight: 700;
}
.cursos-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; padding: 20px 0;
}
.curso-card {
    background: #fff; border-radius: 15px; overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; cursor: pointer;
    position: relative; transform: translateY(0); animation: fadeInUp 0.6s ease forwards;
}
.curso-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); }
.curso-card img { width: 100%; height: 200px; object-fit: cover; transition: transform 0.3s ease; }
.curso-card:hover img { transform: scale(1.1); }
.curso-info {
    padding: 25px; position: relative; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    transition: all 0.3s ease;
}
.curso-card:hover .curso-info { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }
.curso-info h3 {
    font-size: 1.4rem; margin-bottom: 10px; color: #333; font-weight: 600; transition: color 0.3s ease;
}
.curso-card:hover .curso-info h3 { color: white; transform: translateX(5px); }
.curso-info p { font-size: 0.95rem; line-height: 1.6; color: #666; margin: 0; transition: all 0.3s ease; }
.curso-card:hover .curso-info p { color: rgba(255,255,255,.9); transform: translateX(5px); }
.curso-card::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    transition: left .5s ease; z-index: 1;
}
.curso-card:hover::before { left: 100%; }
.curso-card:hover { border: 2px solid transparent; background-clip: padding-box; position: relative; }
.curso-card:hover::after {
    content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border-radius: 17px;
    background: linear-gradient(45deg, #667eea, #764ba2, #667eea);
    background-size: 200% 200%; animation: gradientMove 2s ease infinite; z-index: -1;
}
@keyframes gradientMove { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@media (max-width: 768px) {
    .cursos-grid { grid-template-columns: 1fr; gap: 20px; }
    .cursos-title { font-size: 2rem; }
    .curso-card:hover { transform: translateY(-5px) scale(1.01); }
}

/* ====== PORTAL DE CURSOS – Tarjetas simples (como profesor) ====== */
.titulo-curso{
  font-family: 'Raleway-Bold', 'Raleway', sans-serif;
  font-size: 35px;
  font-weight: 700;
  color: #003D64;
  text-align: center;
  margin: 10px 0 6px;
}
.subtitulo{
  text-align: center;
  font-size: 1.1rem;
  color: #555;
  margin: 0 0 16px;
}

/* Grid 1–2–3 */
.contenedor{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 30px 0;
  width: 100%;
}
@media (min-width: 768px){ .contenedor{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .contenedor{ grid-template-columns: repeat(3, 1fr); } }

/* Tarjeta simple */
.recuadro{
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 20px;
  min-height: 200px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
  text-decoration: none; /* por si la tarjeta es un <a> */
  color: #0697D5;
}
.recuadro a{
  text-decoration: none; color: #0697D5; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.recuadro:hover, .recuadro:focus-within{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
.recuadro img{ width: 70px; height: 70px; object-fit: contain; display: block; }
.recuadro span{ font-size: 16px; font-weight: 700; line-height: 1.25; word-break: break-word; }

/* Ajustes móviles finos */
@media (max-width: 600px){
  .recuadro{ min-height: 180px; border-radius: 10px; padding: 16px; }
  .recuadro img{ width: 60px; height: 60px; }
}
@media (max-width: 480px){
  .titulo-curso{ font-size: 28px; }
  .recuadro{ min-height: 170px; }
  .recuadro img{ width: 56px; height: 56px; }
}
@media (max-width: 360px){
  .titulo-curso{ font-size: 24px; }
  .recuadro{ min-height: 160px; padding: 12px; }
  .recuadro img{ width: 48px; height: 48px; }
  .recuadro span{ font-size: 14px; }
}


/* === FULL-BLEED del footer en home/profesor/curso === */

/* Altura del header+menú para el alto mínimo del módulo */
:root { --chrome-altura: 170px; }     /* ajusta si tu header es más alto/ bajo */
@media (max-width: 768px){ :root { --chrome-altura: 140px; } }

/* El módulo cargado en #vx_cont se apila en columna y ESTIRA a lo ancho */
#vx_cont > .home-container,
#vx_cont > .profesor-container,
#vx_cont > .vx_cont{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;                 /* << clave para que el footer llene el ancho */
  min-height: calc(100vh - var(--chrome-altura));
  padding-left: 0;                      /* quitamos gutter lateral que dejaba “blanco” */
  padding-right: 0;
}

/* Conserva separación vertical del contenido */
#vx_cont > .home-container{ padding-top: 80px; padding-bottom: 0px; }
#vx_cont > .profesor-container{ padding-top: 80px; padding-bottom: 0px; }
#vx_cont > .vx_cont{ padding-top: 20px; }

/* El footer se pega al fondo y ocupa todo el ancho */
#vx_cont > .home-container .footer,
#vx_cont > .profesor-container .footer,
#vx_cont > .vx_cont .footer{
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
}

.home-content{
  max-width: 800px;
  margin: 0 auto;
  padding: 0 0px;
}
.profesor-info,
.profesor-cards{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0px;
}

/* (Tu estilo de footer se queda igual) */
.footer{
  position: relative;
  background-color: #003D64;
  color: #ffffff;
  padding: 30px 0;
  font-size: 14px;
  box-shadow: 0 -2px 8px rgba(0,0,0,.12);
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 40px;
}
.footer-container{
  display: flex; justify-content: space-between; flex-wrap: wrap;
  max-width: 1000px; margin: 0 auto; padding: 0 20px; box-sizing: border-box;
}
.footer-left{ text-align: left; }
.footer-left h4{ color:#93d5ff; margin:0 0 10px; font-weight:600; }
.footer-left ul{ list-style:none; margin:0; padding:0; }
.footer-left li{ margin-bottom:6px; }
.footer-left a{ color:#93d5ff; text-decoration:none; transition: color .3s; }
.footer-left a:hover{ color:#fff; }
@media (max-width:768px){
  .footer-container{ flex-direction: column; gap:14px; align-items:flex-start; }
  .footer-left{ text-align:left; }
}