/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
:root{
  --corporativo: rgba(3,175,237,1);
  --ct-link-color-rgb: 3,175,237;
  --corporativo_light: #48a7fb;
  --auxiliar: rgba(124,70,240,1);/*#87e2d1;*/
  --auxiliar_light: #87e2d122;
  --ct-heading-color: #666666;
}

body {
  padding: 0px;
  font-size: 18px;
  color: #444444;
  background-color: #f2f2f2;
  font-family: 'fontNormal';
}

select,
input,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: unset !important;
    background-color: transparent; /* Restaura el fondo predeterminado */
    color: inherit; /* Restaura el color de texto */
}
button,
button:focus {
    outline: none;
}

input[type="submit"], button, select{
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

img {
    vertical-align: bottom;
}
ul, li{
    margin: 0px;
}
select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    outline:0px;
}
select::-ms-expand { /* for IE 11 */
    display: none;
    cursor: pointer;
    outline:0px;
}
:focus{
    outline:0px;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #EEB21E inset;
    box-shadow: 0 0 0px 1000px #EEB21E inset;
}
body, div, img, p, button, input, select, textarea, a {
    box-sizing: border-box;
}
/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: rgba(73,155,234, .8);
    color: #000000;
}

::selection {
    background: rgba(73,155,234, .8);
    color: #000000;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    /*vertical-align: middle;*/
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */


ul, li {
  list-style-type:none;
  list-style-position: outside;
  margin-left: 0px;
  padding: 0px;
}


strong{
    color:#333333;
    font-weight: bold;
}
#loading {
  width: 50px;
  height: 50px;
  border: 8px solid rgba(0, 0, 0, 0.1);
  border-top: 8px solid #000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/*
 Notas:
  - Para el cálculo de las medidas en 'em' se ha utilizado la referencia de 16 px por 1 em.
 */

/* ==========================================================================
   FUENTES
   ========================================================================== */
  @font-face {
      font-family: 'fontLight';
      src: url('/fonts/berlingske-sans-light-webfont.woff2') format('woff2'),
           url('/fonts/berlingske-sans-light-webfont.woff') format('woff'),
           url('/fonts/berlingske-sans-light-webfont.otf') format('otf');
      font-weight: normal;
      font-style: normal;

  }

  @font-face {
      font-family: 'fontNormal';
      src: url('/fonts/berlingske-sans-regular-webfont.woff2') format('woff2'),
           url('/fonts/berlingske-sans-regular-webfont.woff') format('woff'),
           url('/fonts/berlingske-sans-regular-webfont.otf') format('otf');
      
      font-weight: normal;
      font-style: normal;

  }
  @font-face {
      font-family: 'fontBold';
      src: url('/fonts/berlingske-sans-bold-webfont.woff2') format('woff2'),
           url('/fonts/berlingske-sans-bold-webfont.woff') format('woff'),
           url('/fonts/berlingske-sans-bold-webfont.otf') format('otf');
      font-weight: normal;
      font-style: normal;

  }

  @font-face {
      font-family: 'fontTitle';
      src: url('/fonts/berlingske-serif-webfont.woff2') format('woff2'),
           url('/fonts/berlingske-serif-webfont.woff') format('woff'),
           url('/fonts/berlingske-serif-webfont.otf') format('otf');
      font-weight: normal;
      font-style: normal;

  }
  @font-face {
      font-family: 'fontTitleBold';
      src: url('/fonts/berlingske-serif-bold-webfont.woff2') format('woff2'),
           url('/fonts/berlingske-serif-bold-webfont.woff') format('woff'),
           url('/fonts/berlingske-serif-bold-webfont.otf') format('otf');
      font-weight: normal;
      font-style: normal;

  }
  @font-face {
      font-family: 'fontHand';
      src: url('/fonts/Autography.ttf') format('ttf'),
           url('/fonts/Autography.woff2') format('woff2'),
           url('/fonts/Autography.woff2') format('woff');
      font-weight: normal;
      font-style: normal;

  }
    html{
        font-family: 'fontNormal', arial, helvetica, verdana, sans-serif;
        overflow-y: scroll;
    }


/* ==========================================================================
   LAYOUT GENERAL
   ========================================================================== */
h1, h2, h3, h4, h5, h6, h7{
  font-weight: normal;
}
h1{
  font-family: 'fontTitle';
  font-size: 3.2em;
  text-align: left;
}
h2, .h2{
  font-family: 'fontBold';
  font-size: 2.4em;
  text-align: left;
}
h3, .h3{
  font-family: 'fontTitle';
  font-size: 2.4em;
  text-align: left;
}
h4, .h4{
  font-family: 'fontLight';
  font-size: 1.2em;
  text-align: left;
}
h5, .h5{
  font-family: 'fontBold';
  font-size: 2em;
  text-align: left;
}
h6, .h6{
  letter-spacing: .03em;
  font-family: 'fontBold';
  font-size: .9em;
  text-align: left;
  color: #999999;
}
h7, .h7{
  font-family: 'fontNormal';
  font-size: 1em;
  text-align: left;
  display: block;
}
p {
  margin: 0;
}
input[type=button], input[type=submit], input[type=file] {
    /*border-radius:0px;*/
}
input[type="checkbox"] {
  width: auto;
  height: auto;
  margin: 3px 10px 2px 0px;
  vertical-align: top;
  display: inline-flex;
}
a {
  transition: all .5s;
}
/* HASTA AQUÍ */


select{
  font-family: 'fontLight';
  font-family: 'fontLight';
  font-size: 1em;
  padding: 10px 20px;
  border-radius: 8px;
  text-align: left;
  margin: 0px 10px;
  border: 1px solid #666666;
  background: transparent;
  transition: all .5s;
}
select:hover{
  border-color: var(--auxiliar);
  background-color: var(--auxiliar_light);
}
/* color corportativo #48a7fb */
.posFix{
    position: fixed;
}
.linea{
  width: 100%;
  height: 1px;
  border-top: 1px solid #CCC;
  padding-top: 10px;
  margin-top: 20px;
  display: block;
}
.texto{
  color: #FFFFFF;
  font-size: 1em;
  cursor: default;
  font-weight: normal;
}

.espacioP{
  margin-top: 20px;
  margin-bottom: 20px;
}
.txtNegro{
    color: #000000 !important;
}
.txtGris{
    color: #666666 !important;
}
.txtGrisC{
    color: #999999 !important;
}
.txtRojo{
    color: #CC0000 !important;
}
.inputTextError{
    color: #CC0000 !important;
    background-color: rgba(204, 0, 0, 0.1) !important;
}
.errorBorder{
    outline: 1px solid #CC0000 !important;
}
.okBorder{
    outline: 1px solid #34A853 !important;
}
.checkAvisoError{
    border: 1px solid #CC0000 !important;
    background-color: #FFCCCC;
}
.txtCorporativo{
    color: var(--corporativo_light) !important; /* rgba(72, 167, 251, 1); */
}
.txtAuxiliar{
    color: var(--auxiliar) !important; /* rgba(135, 226, 209, 1); */
}
.txtAuxiliar:hover, .txtAuxiliar:focus{
    text-decoration: underline;
}
.txtBlanco{
    color: #FFFFFF !important;
}
.txtCenter{
    text-align: center;
    padding: 30px 10px;
}
.destacado{
    background: rgba(124,70,240,1);
    background: -moz-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(124,70,240,1)), color-stop(100%, rgba(3,175,237,1)));
    background: -webkit-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
    background: -o-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
    background: -ms-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
    background: linear-gradient(to right, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c46f0', endColorstr='#03afed', GradientType=1 );
    color: #FFFFFF !important;
    border: none !important;
}
.ico{
    border: none;
    background-color: transparent;
    font-size: 1em;
    color: #0085CC;
    margin: 0px 0px 0px 25px;
    padding: 0px;
    transition: all .5s;
    display: block;
}
.ico:hover, .ico:focus{
    opacity: .5;
}
.ico::before {
    content: '';
    position: absolute;
    margin-top: -3px;
    margin-left: -40px;
    /*z-index: -1;*/
    width: 30px;
    height: 30px;
    background-image: url(../img/spriteF.png);
    background-repeat: no-repeat;
    background-size: 300px;
}
.ico span{
    font-family: 'fontNormal';
}
.icoWha::before{
    background-position: -150px 0px;
}
.icoTel::before{
    background-position: -210px 0px;
}
.icoTelGra::before{
    width: 45px;
    height: 45px;
    background-position: -320px 0px;
    background-size: 450px;
}
.icoMai::before{
    background-position: -180px 0px;
}
.icoMap::before{
    background-position: -240px 0px;
}
.icoWeb::before{
    background-position: 0px -30px;
}


/* ==========================================================================
   Copyright
   ========================================================================== */
#copyright{
  position: fixed;
  right: 15px;
  top: 100%;
  -webkit-transform: translateY(20px);
  -ms-transform: translateY(20px);
  transform: translateY(20px);
  font-size: 0.75em;
  color: #444444;
  -webkit-transition: all .5s;
  transition: all .5s;
  opacity: 0;
}
#copyright:hover, .copyright:focus{
  color: #FFFFFF;
  text-shadow: 1px 1px #000000;
}
/* ==========================================================================
   Cookies
   ========================================================================== */
#leyDeCookies {
    position: fixed;
    width: 95%;
    max-width: 780px;
    height: auto;
    bottom: 10px;
    left: 50%;
    text-align: center;
    line-height: 1em;
    font-size: .85em;
    transition: all 0.5s ease 0s;
    padding: 8px 20px;
    cursor: pointer;
    display: none;
    z-index: 100;
    border-radius: 30px;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, .3);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
#leyDeCookies:hover, #leyDeCookies:focus{
    background-color: var(--corporativo);
}
#leyDeCookies a{
    color: #FFFFFF;
    
    text-decoration: none;
}
#leyDeCookies p{
    padding: 0px;
    display: block;
    animation: none;
}
#leyDeCookies button{
    border: none;
    color: #FFFFFF;
    margin: 10px 20px 0px 20px;
    transition: all .5s;
    padding: 5px 20px;
    background-color: rgba(255, 255, 255, .2);
    border-radius: 10px;
}
#leyDeCookies button:hover{
    background-color: rgba(0, 0, 0, .2);
}
#leyDeCookies strong{
    color: #FFFFFF !important;
    font-weight: normal !important;
}
/* ------------------------------------------------------------------------------
   ERRORES
   ------------------------------------------------------------------------------ */
.error{
    height: 100%;
    text-align: center;
    padding-top: 50px;
}
.imgCrash{
    background-image: url('/img/circuitos/notfound.jpg');
}
#logoError img{
    width: 140px;
}
#mainError{
    color: #FFFFFF;
    font-size: 2.5em;
    font-family: 'fontBold';
}
#mainError a{
    color: #FFFFFF;
}
#mainError a:hover{
    text-decoration: underline;
}

/* ==========================================================================
   Aviso
   ========================================================================== */
#aviso{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    /*
    background: rgba(0,182,227,.8);
    background: -moz-linear-gradient(-65deg, rgba(0,182,227,.8) 0%, rgba(29,101,164,.8) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(0,182,227,.8)), color-stop(100%, rgba(29,101,164,.8)));
    background: -webkit-linear-gradient(-65deg, rgba(0,182,227,.8) 0%, rgba(29,101,164,.8) 100%);
    background: -o-linear-gradient(-65deg, rgba(0,182,227,.8) 0%, rgba(29,101,164,.8) 100%);
    background: -ms-linear-gradient(-65deg, rgba(0,182,227,.8) 0%, rgba(29,101,164,.8) 100%);
    background: linear-gradient(115deg, rgba(0,182,227,.8) 0%, rgba(29,101,164,.8) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#1d65a4', GradientType=1 );
    */
    justify-content: center;
    align-items: center;
    transition: all .8s;
    display:none;
    z-index: 200;
}
#aviso picture{
    
}
#aviso picture img{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
}
#cajAvi {
  position: absolute;
  top: 35px;
  left: 50%;
  width: 540px;
  min-height: 190px;
  padding: 40px 20px;
  font-size: 1em;
  border-radius: 18px;
  background-color: #FFFFFF;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  display: none;
  z-index: 205;
}
#cajAvi .tpv{
    padding: 0px 40px;
}
#cajRes{
    position: absolute;
    top: -150px;
    left: 50%;
    width: 100%;
    max-width: 780px;
    min-height: 190px;
    margin-bottom: 50px;
    font-size: 1em;
    background-color: #FFFFFF;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    display:none;
    z-index: 201;
}
#cajAvi iframe{
  left: 50% !important;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
#cajAvi h2{
    font-family: 'fontLight';
    font-size: 2.4em;
    font-weight: normal;
    color: #000000;
    width: 90%;
    text-align: center;
    margin: 0px;
    padding: 20px 5% 0px 5%;
}
#cajAvi p{
    color: #000000;
    width: 100%;
    text-align: center;
}
#cajAvi p a{
    color: var(--corporativo);
}
#cajAvi .infoSes {
    margin-top: 10px;
    text-align: center;
    background: #E5E5EE;
    padding: 20px;
    border-radius: 8px;
    color: black;
    margin-bottom: 20px;
    display: none;
}
#cajAvi textarea{
    width: 86%;
    min-height: 110px;
    margin: 0px 5% 10px 5%;
    margin-top: 4px;
    padding: 2%;
    border: 1px solid #CCCCCC;
    color: #000000;
    resize: vertical;
    display: block;
}
#cajAvi .btnBlanco{
  border: 1px solid #444444;
}
#cajAvi .btnBlanco:hover{
  border-color: transparent;
}

#cajAvi button{
  position: relative;
  /*min-width: 120px;*/
}
#cajAvi .btn{
    width: 90%;
    height: 42px;
    margin-left: 5%;
    color: #FFFFFF;
    background-color: #000000;
    border: none;
    transition: all .5s;
}
#cajAvi .btn:hover, #cajAvi .btn:focus{
    opacity: 1;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .5) !important;
    background-color: #000000;
    color: #FFFFFF;
}
#cajAvi .btnBlanco{
    margin: 20px auto;
    width: 100%;
}
.btnOkStandar{
    position: absolute;
    bottom: 20px;
    width: 150px;
    height: 35px;
    border: 1px solid #000000;
    background-color: #000000;
    color: #FFFFFF;
    transition: all .5s;
}
.btnOffStandar{
    position: absolute;
    bottom: 20px;
    width: 150px;
    height: 35px;
    border: 1px solid #FFFFFF;
    background-color: #FFFFFF;
    color: #666666;
    transition: all .5s;
}
.btnOkStandar:hover, .btnOkStandar:focus, .btnOffStandar:hover, .btnOffStandar:focus{
    box-shadow: 2px 2px 3px rgba(0, 0, 0, .5);
}
#btnOffAvi{
    /*left: 50px;*/
    float: right;
}
#btnOnAvi{
    /*left: 40px;*/
}
.btnCerrar {
  position: absolute !important;
  top: -15px;
  right: -15px;
  width: 30px;
  height: 30px;
  font-family: 'fontNormal';
  font-size: 1.3em;
  color: #444444;
  background-color: #FFFFFF;
  border-radius: 50%;
  border: none;
  transition: all .5s;
  z-index: 206;
}


.btnCerrar:hover, .btnCerrar:focus{
    background-color: var(--auxiliar);
    color: #FFFFFF;
}
/* ==========================================================================
   AVISO SUPERIOR
   ========================================================================== */
#mensajeAviso{
    position: fixed;
    top: -80px;
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    opacity: .8;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid #000000;
    z-index: 29;
    padding: 15px 0px;
    font-size: .85em;
    color: #FFFFFF;
    -webkit-box-shadow: rgba(0, 0, 0, .3) 2px 2px 3px 0px;
    -moz-box-shadow: rgba(0, 0, 0, .3) 2px 2px 3px 0px;
    -ms-box-shadow: rgba(0, 0, 0, .3) 2px 2px 3px 0px;
    -o-box-shadow: rgba(0, 0, 0, .3) 2px 2px 3px 0px;
    box-shadow: rgba(0, 0, 0, .3) 2px 2px 3px 0px;
    display: block;
}
/* ==========================================================================
   AYUDA
   ========================================================================== */
#btn_ayuda {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 60px;
    height: 60px;
    padding: 0px;
    margin: 0px;
    border-radius: 50%;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all .5s;
    user-select: none;
}


#btn_ayuda .inner-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

#btn_ayuda .question-mark {
  font-size: 20px;
  color: #FFFFFF;
  font-weight: bold;
}
#ventana_ayuda{
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 370px;
    min-height: 150px;
    text-align: center;
    background-color: #FFFFFF;
    border-radius: 15px;
    box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, .5);
    overflow: hidden;
    display: none;
    animation: animacionVentanaAyuda .3s ease-out;
}
@keyframes animacionVentanaAyuda {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}
#ventana_ayuda h4{
    margin: 0px;
    padding: 15px 0px;
    text-align: center;
    font-family: 'fontBold';
    background-color: #E5E5E5;
}
#ventana_ayuda a{
    font-family: 'fontBold';
    font-size: 1.6em;
    margin: 25px 0px 0px 30px;
    color: rgba(106,185,245,1);
    text-align: center;
    text-decoration: none;
    display: block;
    transition: all .5s;
}
#ventana_ayuda a:hover{
    color: var(--auxiliar);
}
#ventana_ayuda p{
    margin: 15px 0px;
    display: block;
    text-align: center;
}
#ventana_ayuda .btnForm{
    width: 80%;
    margin-bottom: 40px;
}
#ventana_ayuda .btnCerrar{
    top: 5px;
    right: 5px;
    transform: scaleX(.8) scaleY(.8);
}
/* ==========================================================================
   AVISO LEGAL
   ========================================================================== */
#txtInfo{
    position: absolute;
    top: 0px;
    left: calc(50% - 62px);
    width: 720px;
    color: #000000;
    background-color: transparent;
    margin-top: 0px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
#txtInfo canvas{
    width: 100%;
    margin: 0px;
    height: 15px;
    background-color: #183a5c;
    display: none;
}
#txtInfo img{
    width: 220px;
    height: auto;
    margin-top: 0px;
    display: none;
}
#txtInfo section{
    margin: 20px 0px 50px 0px;
    width: 90%;
    padding: 5%;
    background-color: #FFFFFF;
}
#txtInfo section h1{
    font-family: 'fontLight';
    font-weight: normal;
    font-size: 3em;
    text-align: center;
}
#txtInfo section h2{
    font-family: 'fontLight';
    font-weight: normal;
    font-size: 1.8em;
    color: #000000;
    margin-top: 50px;
}
#txtInfo section p{
    font-family: 'fontNormal';
    font-weight: normal;
    font-size: 1em;
}
#txtInfo section ul{
    font-family: 'fontNormal';
    margin-left: 5%;
    font-size: 1em;
}
#txtInfo section ul li{
    list-style-type: initial;
}
#txtInfo section ul li::before{
    display: none;
}
#txtInfo section strong{
    color: #000000 !important;
    font-weight: normal;
    font-size: 1em;
    font-family: 'fontBold';
}
#txtInfo section a{
    color: #000000;
    text-decoration: none;
}
#txtInfo section a:hover{
    color: #000000;
    text-decoration: underline;
}


/* ==========================================================================
   LOGIN
   ========================================================================== */
.forLogin{
    width: 90%;
    margin-left: 5%;
    text-align: left;
    display: none;
}
.forLogin input{
    width: calc(100% - 2px);
    border: 1px solid #CCCCCC;
    margin: 5px 0px;
    padding: 5px 15px;
    border-radius: 8px;
    display: block;    
}
.forLogin .btnRec{
  position: relative;
  float: right;
  width: fit-content;
  border-radius: 8px;
  padding: 5px 10px;
  margin: 5px 0px;
  border: 1px solid transparent;
  background-color: transparent;
  text-transform: uppercase;
  font-size: .75em;
  font-family: 'fontbold';
}
.forLogin .btnRec:hover{
  color: var(--corporativo);
}
button:hover{
  border-color: var(--auxiliar);
  color: #FFFFFF;
}
.forLogin h3{
    margin: 0px;
    font-family: 'fontLight';
    font-weight: normal;
    font-size: 3.2em;
    text-align: center;
}
.forLogin h3 span{
    padding: 0 20px;
    background-color: var(--corporativo_light);
}
.forLogin em{
    margin: 10px 0px 10px 0px;
    font-size: 1em;
    color: #999999;
    text-align: left;
    font-size: .85em;
    display: block;
}
.forLogin .label{
    color: var(--corporativo_light);
    color: #999;
    display: block;
    margin-bottom: 10px;
    margin-top: 20px;
}
.forLogin select{
    /* width: 228px; */
    height: auto;
    /* margin: 40px 0px -20px 0px; */
    padding: 2%;
    text-align: center;
    border: 1px solid var(--corporativo_light);
    color: #000000;
    background-color: #FFFFFF;
    /* display: block; */
}
.forLogin button{
    width: 100%;
}
#infoLogin{
    text-align: center;
    margin-top: 10px;
}

#cajAvi .imgConFon, #cajRes .imgConFon{
    width: 100%;
    pointer-events: none;
}
.fonImgFbk{
    background-image: url(../img/spriteF.png);
    background-repeat: no-repeat;
    background-size: 300px;
    background-position: -200px -289px;
    background-color: rgba(128, 130, 129, .8);
}
.btnMenu .fonImgFbk{ /* ajuste menú */
    margin-top: -65px;
    position: relative;
    top: 37px;
    float: left;
    width: 70px !important;
    height: 70px !important;
    margin-left: 0px;
    margin-right: 0px;
    background-size: 200px;
    background-position: -137px -193px;
}
.imgFbk{
    width: 100%;
}
.divCenter{ 
    position: relative;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 10;
}
#neitFacebookSignInButton,
#neitFacebookSignOutButton {
    margin-top: 20px;
    width: 100%;
    height: auto;
    padding: 6px 0px;
    border: none;
    background-color: #4267B2;
    color: #FFFFFF;
    text-align: center;
    cursor: pointer;
    border-radius: 30px;
    transition: all .5s;
}

#neitFacebookSignInButton:hover,
#neitFacebookSignOutButton:hover {
    box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, .5);
}

.neitFacebookSignInIcon,
.neitFacebookSignOutIcon {
    width: 40px;
    height: 32px;
    background: url('/img/FB-f-Logo__white_57.png') transparent 5px no-repeat;
    background-size: 50%;
    display: inline-block;
    vertical-align: middle;
}

.neitFacebookSignInText,
.neitFacebookSignOutText {
    padding: 0px 10px;
    font-size: .85em;
    font-family: 'fontBold';   
    display:inline-block;
    vertical-align: middle;
}

#neitGoogleSignInButton,
#neitGoogleSignOutButton {
    margin-top: 20px;
    width: 100%;
    height: auto;
    padding: 8px 0px;
    border: none;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    color: #999999;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: all .5s;
}

#neitGoogleSignInButton:hover,
#neitGoogleSignOutButton:hover {
    box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, .5);
}

.neitGoogleSignInIcon,
.neitGoogleSignOutIcon {
    width: 40px;
    height: 32px;
    background: url('/img/Google-logo.png') transparent 5px no-repeat;
    background-size: 50%;
    display: inline-block;
    vertical-align: middle;
}

.neitGoogleSignInText,
.neitGoogleSignOutText {
    margin-top: 5px;
    padding: 0px 10px;
    font-size: .75em;
    font-family: 'fontNormal';
    text-transform: uppercase;   
    letter-spacing: .1em; 
    display:inline-block;
    vertical-align: middle;
}

#login canvas{
    width: 100%;
    height: 1px;
    margin: 20px 0px;
    background-color: #E5E5E5;
}


.btnOkMinMar{
    width: 100%;
    height: 32px;
    border:  1px solid #E5E5E5;
    color: #999999;
    background-color: transparent;
    font-size: .95em;
    transition: all .5s;
}
.btnOkMinMar:hover, .btnOkMinMar:focus, .btnOkMin:hover, .btnOkMin:focus{
    color: #FFFFFF;
    border-color: #000000;
    background-color: #000000;  
    box-shadow: 3px 3px 5px rgba(0, 0, 0, .5) !important; 
}
.btnOkMin{
    width: 100%;
    height: 42px;
    border: none;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #666666;
    color: #FFFFFF;
    font-family: 'fontNormal';
    font-size: 1.2em;
    transition: all .5s;
}

.btnOffMin{
    width: 100%;
    height: 34px;
    margin-top: 15px;
    border: none;
    background-color: transparent;
    color: #999999;
    font-family: 'fontNormal';
    font-size: .9em;
    transition: all .5s;
}
.btnOffMin:hover, .btnOffMin:focus{
    color: var(--corporativo_light);
    background-color: transparent !important;
}
#combNIF{
    color: #FFFFFF;
    width: 100%;
    border-radius: 0px;
    border: 1px solid #000000;
    background-color: #000000;
    padding: 0px 1%;
}
#btnEnt{
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    font-family: 'fontNormal';
    font-size: 1.2em;
    color: #FFFFFF;
    border: 1px solid #000000;
    background-color: #000000;
    transition: all .5s;
}
#btnEnt:hover, #btnEnt:focus{
    box-shadow: 3px 3px 5px rgba(0, 0, 0, .5) !important;   
}


/* ==========================================================================
   FONDO VÍDEO
   ========================================================================== */
#textura{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: block;
    background-image: url(../img/textura.png);
    background-repeat: repeat;
    background-position: 0px 0px;
}
#multimediaContent{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,133,204,1);
    background: -moz-linear-gradient(-45deg, rgba(0,133,204,1) 0%, rgba(15,186,172,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(0,133,204,1)), color-stop(100%, rgba(15,186,172,1)));
    background: -webkit-linear-gradient(-45deg, rgba(0,133,204,1) 0%, rgba(15,186,172,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(0,133,204,1) 0%, rgba(15,186,172,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(0,133,204,1) 0%, rgba(15,186,172,1) 100%);
    background: linear-gradient(135deg, rgba(0,133,204,1) 0%, rgba(15,186,172,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#0fbaac', GradientType=1 );
    display: block;
    overflow: hidden;
}
#multimediaContent .videoHome{ /* vídeos */
    position: fixed;
    min-width: 100%;
    min-height: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: 100;
    opacity: 1;
}
#multimediaContent .videoHome:-webkit-full-screen {
    top: 0%;
    left: 0%;
    -webkit-transform: translateX(0%) translateY(0%);
    -ms-transform: translateX(0%) translateY(0%);
    transform: translateX(0%) translateY(0%);
    width: 100%;
    height: 100%;
}
#multimediaContent .videoHome:-moz-full-screen {
    top: 0%;
    left: 0%;
    -webkit-transform: translateX(0%) translateY(0%);
    -ms-transform: translateX(0%) translateY(0%);
    transform: translateX(0%) translateY(0%);
    width: 100%;
    height: 100%;
}
/* activar para vidSpot */
#multimediaContent section{ 
    display: none;
}


.titIco{
    width: 100%;
    color: #666666;
    letter-spacing: .25em;
    font-size: .65em;
    text-align: center;
    margin: -5px 0px 0px 0px;
    padding: 0px;
    display: block;
}

#bloqImgFbk{
    position: relative;
    width: 110px;
    height: 110px;
    left: 50%;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .8);
    margin: 0px 0px 10px 9px;
    overflow: hidden;
    transition: all .5s;
    display: block;
}
#bloqImgFbk:hover, #bloqImgFbk:focus{
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0);
}
#bloqImgFbk img{
    max-width: 100%;
    min-height: 100%;
}
/* Redes */
#redesMenu{
    position: absolute;
    top: 2px;
    right: 5px;
    transition: all 1s;
}
.btnInfTxt{
    position: relative;
    font-family: 'fontBold';
    font-size: .85em;
    text-transform: uppercase;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid transparent;
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 12px;
    transition: all .5s;
    opacity: .3;
}
.btnInfo{
    position: relative;
    width: 30px;
    height: 30px;
    top: -7px;
    padding: 15px;
    background-color: transparent;
    background-image: url(../img/spriteF.png);
    background-repeat: no-repeat;
    background-size: 300px;
    border: 1px solid transparent;
    border-radius: 50%;
    margin-left: 5px;
    margin-right: 5px;
    transition: all .5s;
    opacity: .5;
}
.btnInfo:hover, .btnInfo:focus, .btnInfTxt:hover, .btnInfTxt:focus{
    /*border-color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.3);*/
    opacity: 1 !important;
}
#btnMap{
    background-position: -240px 0px;
}
#btnTel{
    background-position: -210px 0px;
}
#btnWhat{
    background-position: -150px 0px;
}
#btnMai{
    background-position: -180px 0px;
}
#btnFbk{
    background-position: -64px 0px;
}
#btnIns{
    background-position: -93px -30px;
}

#btnSna{
    background-position: -120px -0px;
}
#btnTwi{
    background-position: -120px -30px;
}
#btnYou{
    background-position: -150px -30px;
}
#btnHou{
    background-position: -180px -30px;
}

#btnMut{
    background-position: -240px -30px;
}
#btnMod{
    background-position: -270px -30px;
}
#redesCentrado{
    position: relative;
    left: 50%;
    display:inline-flex !important;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-bottom: 50px;
}
/* ==========================================================================
   MENÚ
   ========================================================================== */
#btnMovil {
    position: absolute;
    top: 24px;
    left: 30px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-color: transparent;
    background-image: url(../img/spriteF.png);
    background-repeat: no-repeat;
    background-size: 300px;
    background-position: -30px 0px;
    padding: 0px;
    border: none;
    display: none;
    user-select: none;
    transition: none;
    z-index: 101;
}
.force_hidden{
    display: none !important;
}
#marca, #marca_movil{
    height: 60px;
    padding: 0px 10px 0px 20px;
    vertical-align: middle;
    display: inline-block;
}
#marca img, #marca_movil img{
    height: 100%;
    display: inline-block;
}
#marca_movil{
    position: absolute;
    padding: 0px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    display: none;
}

/* Estilo menú <li> */
.menLis{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 64px;
    font-size: .8em;
    text-align: center;
    background-color: #FFFFFF;
    border-bottom: 1px solid #CCCCCC;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, .3);
    z-index: 30;
    user-select: none;
}
.menLis .horizontal{
    vertical-align: middle;
    display: inline-block;
}
.menLis li {
  position: relative;
  margin: 0;
  height: 100%;
  transition: all .5s;
  border-radius: 8px;
  display: inline-block;
  padding: 15px 10px;
}
.menLis li:hover{
  color: var(--corporativo_light);
  /*background-color: var(--auxiliar);*/
}
.menLis li small{
  margin-left: 10px;
  font-size: 1.1em;
}
.menLis li a:hover{
    color: var(--corporativo); 
}

.menLis .btnAct{
    color: #FFFFFF;
    background: rgba(124,70,240,1);
background: -moz-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(124,70,240,1)), color-stop(100%, rgba(3,175,237,1)));
background: -webkit-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
background: -o-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
background: -ms-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
background: linear-gradient(to right, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c46f0', endColorstr='#03afed', GradientType=1 );
}

.menLis .btnAct:hover, .menLis .btnAct a span, .subMenu .btnAct a{
    color: #FFFFFF;
}
.menLis.destacado .btnAct{
  background: rgb(51, 84, 162);
  
}
.menLis.destacado .btnSubMen.btnAct  a{
  color: #FFFFFF !important;
}
.menLis ul{
    display: inline-block;
}

.menLis a, .menLis span, .menLis button {
    padding: 0px 5px;
    color: #666666;
    font-size: .85em;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    background-color: transparent;
    border: none;
    transition: all .5s;
    display: inline-block;
}
.menLis button:hover{
  color: var(--corporativo);
}
.menLis.destacado a, .menLis.destacado span{
    color: #FFFFFF;
}

.subMenu {
    position: fixed;
    top: 40px;
    width: 270px;
    padding: 16px 10px;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, .2);
    
    opacity: 0;
    pointer-events: none; /* Deshabilita la interacción con el menú oculto */
    transform: translateY(-20px) scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease, pointer-events 0s 0.3s;

    /*display: none !important;*/
    z-index: 1;   
}
.subMenu li {
    text-transform: uppercase;
    color: var(--auxiliar);
    display: block;
}
.subMenu li a:hover {
    color: var(--corporativo_light);
}

.menLis.destacado .subMenu li a {
    color: #666666;
}
.menLis.destacado .subMenu li a:hover {
    color: var(--corporativo_light) !important;
}
.menLis.destacado .btnMenu:hover{
    color: rgba(255, 255, 255, .5) !important;
}
.btnMenu:hover .subMenu{
    opacity: 1;
    pointer-events: auto; /* Habilita la interacción cuando el menú está visible */
    transform: translateY(0) scale(1);
}

#menPri li a[name="mobile"]{
    display: none;
}


#btnLogin{
    position: fixed;
    top: 16px;
    right: 30px;
    width: 30px;
    height: 30px;
    font-size: .85em;
    cursor: pointer;
    background-color: transparent;
    background-image: url(../img/spriteF.png);
    background-repeat: no-repeat;
    background-size: 300px;
    background-position: -120px -63px;
    padding: 0px;
    border: none;
    z-index: 40;
}
#btnLogin:hover, #btnLogin:focus{
    background-position: -150px -63px;
}
#btnLogin .imgFbk {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #FFFFFF;
  margin: 0px;
  padding: 3px 0px;
}
#btnLogin .imgFbk img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
}
#btnLogin .imgFbk span {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 0px;
    z-index: 1;
    text-align: center;
}

#btnCesta{
    position: fixed;
    top: 19px;
    right: 90px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-color: transparent;
    padding: 0px;
    border: none;
    cursor: pointer;
    z-index: 39;
}

#btnLogin:hover .titIco, #btnLogin:focus .titIco, #btnCesta:hover .titIco, #btnCesta:focus .titIco, #btnBuscar:hover .titIco, #btnBuscar:focus .titIco{
    color: #000000 !important;
}
#btnCesta .num{
    width: 100%;
    color: #666666;
    font-size: 1.5em;
    text-align: center;
    border-radius: 50%;
    margin: 0px 0px 4px 0px;
    padding: 0px;
    background-color: transparent;
    transition: all .5s;
    display: block;
}
#btnCesta .num:hover, #btnCesta .num:focus{
    color: #FFFFFF;
    background-color: var(--corporativo) !important;
}
#btnBuscar{
    position: fixed;
    top: 25px;
    right: 160px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-color: transparent;
    background-image: url(../img/spriteF.png);
    background-repeat: no-repeat;
    background-size: 300px;
    background-position: -60px -63px;
    padding: 0px;
    border: none;
    z-index: 38;
}
#btnBuscar:hover, #btnBuscar:focus{
    background-position: -90px -63px;
}

#menu_academia {
  position: fixed;
  top: 80px;
  right: 0;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

#menu_academia ul {
  list-style-type: none;
  padding: 0;
}

#menu_academia ul li {
  margin-bottom: 10px;
}

#menu_academia ul li a {
  text-decoration: none;
  color: #333;
  display: flex;
  align-items: center;
}

#menu_academia ul li a i {
  margin-right: 5px;
}


/* ==========================================================================
   BUSCAR
   ========================================================================== */
#bloqBus{
    position: fixed;
    width: 340px;
    height: 80px;
    right: 180px;
    background-color: transparent;
    z-index: 199;
    display: none;
    -webkit-animation: movBus .7s normal;
    animation: movBus .7s normal;
}
@-webkit-keyframes movBus {
    0% {
        right: 143px;
        width: 1px;
    }100%{
        right: 180px;
        width: 340px;
    }
}
@keyframes movBus {
    0% {
        right: 143px;
        width: 1px;
    }100%{
        right: 180px;
        width: 340px;
    }
}

#bloqBus input{
    margin-top: 21px;
    width: 100%;
    height: 32px;
    margin-left: 10%;
    text-align: center;
    font-size: 1.2em;
    border-radius: 0px;
    border: 1px solid #CCCCCC;
}
#bloqBus button{
    width: 20px;
    height: 32px;
    margin-left: 10px;
    background-color: #FFFFFF;
    border: 1px solid #FFFFFF;
    font-size: 2em;
    font-family: 'fontLight';
}
/* ==========================================================================
   FONDOS
   ========================================================================== */
#fondoWeb{
    position: absolute;
    top: 60px;
    left: 0px;
    width: 100%;
    height: 600px;
    background-color: transparent;
    overflow: hidden;
    display: flex;
  justify-content: center; /* Centrar horizontalmente */
  align-items: center;
    z-index: 0;
}

#fondoWeb picture img{
    position: relative;
    left: 50%;
    top: 50%;
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%;    
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    transition: all 1.5s;
    pointer-events: none;
}
#fondoWeb .card{
    width: 100%;
}
#fondoWeb .card .card-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#fondoWeb .container {
  max-width: 1200px;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
#fondoWeb .container .detSup, #fondoWeb .container .detInf{
  position: relative;
  margin: 0px;
}
#fondoWeb .container .detInf{
  position: relative;
  margin: 30px 0px 0px 0px;
}
#fondoWeb .container h2{
  font-family: 'fontTitle';
  font-size: 60px;
  font-weight: 600;
  line-height: 1;
  max-width: 690px;
  margin: 90px 0px 0px 0px;
  color: #ffffff;
  margin: 0 0 10px;
  transition: all .4s ease;
}
#fondoWeb .container p{
  font-size: 23px;
}
#fondoWeb .container button, #fondoWeb .container a{
  border-radius: 8px;
  font-family: 'fontNormal';
  font-size: 20px;
  padding: 15px 50px;
}
/* ==========================================================================
   PARTÍCULAS
   ========================================================================== */
#particulas{
    position: fixed;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 201;
}
#particulas canvas{
    position: fixed;
    border-radius: 50%;
    display: block;
    /*filter: blur(1px);
    -webkit-filter: blur(1px);*/
}

/* ==========================================================================
   URL AUXILIAR 
   ========================================================================== */
#btnVolver{
    position: static;
    background-color: transparent;
    border: none;
    color: #999999;
    font-size: .8em;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin: -5px 0px 10px 5px;
    transition: all .5s;
    z-index: 30;
    display: none;
}
#btnVolver:hover, #btnVolver:focus{
    color: #FFFFFF;
    background-color: #666666;
    padding: 0px 5px;
    letter-spacing: .5em;
}
#refLogo{
    position: fixed;
    width: 100%;
    z-index: 30;
}
#refLogo a img{
    width: 135px;
    height: auto;
}
#refLogo p {
    margin: -5px 0px 20px 14px;
    padding: 0px;
    font-size: .8em;
    letter-spacing: .3em;
    text-align: left;
    text-transform: uppercase;
}
#refLogo p a{
    text-decoration: none;
    color: #999999;
    transition: all .5s;
}
#refLogo p a:hover, #refLogo p a:focus{
    color: #FFFFFF;
    background-color: #666666;
    padding: 0px 5px;
}

/* ==========================================================================
   HOME
   ========================================================================== */
.home section{
    margin-top: 120px;
}
.home .slogan{
  margin-top: 800px;
    margin-bottom: -150px;
}
.home h1 {
    font-family: 'fontLight';
    font-size: 1.7em;
    color: #333333;
    text-align: center;
    text-shadow: none;
    /* width: 70%; */
    position: relative;
}
.home h1 strong{
    display: block;
    font-family: 'fontHand';
    font-size: 3.7em;
    line-height: 1.2em;
}
.home h2{
    font-family: 'fontLight';
    font-size: 2.3em;
    color: #888888;
    text-align: left;
    margin-bottom: 80px;
}
.home_H2{
  position: relative;
  width: 100%;
  max-width: 1024px;
  left: 50%;
  margin: 150px 0px 100px 0px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  display: block;
}
.home_H2 h4{
  margin-top: 100px;
  text-align: center;
}
.home_H2 .bloques{
  display: flex;
  justify-content: center;
}
/* ==========================================================================
   Artículo
   ========================================================================== */
article{
  position: relative;
  top: 60px;
  width: 100%;
  color: #444444;
}
#articulo{
    background-image: url('../img/fondo_articulo.png');
    background-position: left top;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
#articulo video{
  width: 100%;
  height: auto;
}
article input, article textarea{
  /*width: 100%;
  padding: 0px;
  margin: 0px;*/
  width: calc(100% - 2px);
  border: 1px solid #CCCCCC;
  margin: 5px 0px;
  padding: 5px 15px;
  border-radius: 8px;
  display: block;
}
/*
article .cajaImg {
  position: relative;
  display: inline-block;
}
*/
article .mascara {
  width: 100%; /* Ancho máximo */
  height: 0;
  padding-top: 32.78%; /* Relación de aspecto 1980x650 */
  position: relative;
  overflow: hidden;
}

article .cajaImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

article .cajaImg img, article .cajaImg video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Modo cover */
}
/* Estilo para el input oculto */
article .cambiar_img {
  position: absolute;
  right: 20px; /* Ajusta la posición de la flecha según tus necesidades */
  top: 20px;
  opacity: 0;
  width: 150px;
  height: 150px;
  cursor: pointer; 
  z-index: 2;
}


article .cajaImg:hover::before{
  opacity: 1;
}
article .ediTit, article h1{
    position: absolute;
    top: 30%;
    left: 50%;
    width: 100%;
    max-width: 1280px;
    height: fit-content;
    resize: none;
    font-weight: normal;
    font-family: 'fontTitle';
    font-size: 7vmax;
    color: #FFFFFF;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
}
/* Estilo para la imagen dentro del contenedor */
article .cajaImg img {
  max-width: 100%;
  height: auto;
}
article .infVis{
  position: absolute;
  width: 100%;
  text-align: right;
  font-size: .65em;
  color: #999999;
  float: left;
}
article .infVis img{
  margin-left: 10px;
  width: 20px;
  height: auto;
  opacity: .3;
}

article section {
  position: relative;
  top: 0px;
  left: 50%;
  width: 100%;
  max-width: 1280px;
  padding: 0px 20px 40px 20px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
article section a{
    color: var(--corporativo);
    text-decoration: none;
    transition: all .5s;
}
article section a:hover{
    color: var(--auxiliar) !important;
}
.ql-align-center {
  text-align: center;
}
.ql-align-justify {
  text-align: justify;
}
.ql-align-right {
  text-align: right;
}
article ol{
  font-family: 'fontLight';
  font-size: 1em;
  margin: 0px;
  padding: 0px;
  list-style: none;
}
article ol li{
  margin-left: 38px;
  margin-bottom: 15px;
}
article ul li{
  margin-left: 0px;
  margin-bottom: 15px;
  background-color: rgba(41, 155, 196, 0.2);
  padding: 7px 10px;
  border-radius: 15px;
}
article ol li::before {
  width: 20px;
  height: 20px;
  content: counter(list-item);
  font-size: 0.55em;
  color: #FFFFFF;
  vertical-align: top;
  border-radius: 50%;
  text-align: center;
  margin: 3px 14px 0px -38px;
  line-height: 20px;
  display: inline-block;
  background: rgba(124,70,240,1);
  background: -moz-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(124,70,240,1)), color-stop(100%, rgba(3,175,237,1)));
  background: -webkit-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
  background: -o-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
  background: -ms-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
  background: linear-gradient(to right, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c46f0', endColorstr='#03afed', GradientType=1 );
}
article .no::before {
  width: 0;
    height: 0;
    font-size: 0;
    color: transparent;
    vertical-align: top;
    border: none;
    text-align: center;
    margin-right: 0;
    margin-left: 0;
    line-height: 0;
    display: none;
}
article li strong{
  padding: 5px 10px 5px 0px;
}
article video, article iframe, article audio{
  width: 100%;
}
article p, .p, article h7{
  font-family: 'fontLight';
  font-size: 1em;
  font-weight: normal;
  color: #666666;
}
article h7{
  text-align: left;
}
.textBlog p, .textBlog .p, .textBlog h7, .textBlog ul, .textBlog ol{
  padding: 20px;
  border-radius: 20px;
  background-color: #FFFFFF;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 20px 0px;
}
.article img{
  width: 100%;
  max-width: 520px;
  max-height: 520px;
  margin: auto;
  position: relative;
  border-radius: 8px;
  display: block;
}
article .p2{
  font-family: 'fontLight' !important;
  font-size: 1em !important;
  font-weight: normal !important;
  text-align: left !important;
  color: #666666 !important;
}
article .contenido{
  
}
article .contenido .bloqIzq, article .trumbowyg-bloq{
  margin: 0px 40px;
  min-height: 200px;
  display: inline-block;
  vertical-align: top;
  border-color: transparent;
}
article .contenido .bloqIzq, article .trumbowyg-bloqIzq{
  width: calc(100% - 400px - 94px);
  margin: 0px;
  min-height: 200px;
  display: inline-block;
  vertical-align: top;
  border-color: transparent;
}

article .contenido .multicol h1, article .contenido .multicol h2, article .contenido .multicol h3, article .contenido .multicol h4, article .contenido .multicol h5, article .contenido .multicol h6article .contenido .multicol h6, article .contenido .multicol ul{
    /*width: calc(100% - 400px - 132px);*/
}
article .multicol img, article .multicol p img{
    width: 100%;
}
/*
.multicol{
    column-count: 2;
    column-gap: 60px;
}
*/
article .contenido .bloqDer, article .trumbowyg-bloqDer {
    position: absolute;
    right: 20px;
    width: 450px;
    margin: 0px 0px 0px 40px;
    min-height: 200px;
    display: inline-block;
    vertical-align: top;
    border-color: transparent;
    /* padding: 0px; */
}

article .bloqCen{
  width: 100%;
  margin-left: 50%;
  max-width: 720px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
article textarea[name="html_entradilla"]{
  transition: none !important;
}
article section [name="detalles"]{
  font-size: 1em;
  font-weight: normal;
  text-align: left;
  color: #888888;

  margin-top: 15px;
  background: transparent;
  border: none;
  color: var(--corporativo_light);
  text-decoration: underline;
  padding: 0px;
  transition: all .5s;
}
article section [name="detalles"]:hover{
  padding: 3px 20px;
  color: #FFFFFF;
  border-radius: 8px;
  text-decoration: none;
  background-color: var(--auxiliar);
}
article section .cabecera {
  position: relative;
  top: -50px;
  align-items: center;
  width: 100%;
  display: flex;
  justify-content: center;
}

article section .caja {
  width: calc(32% - 20px); /* Ajusta el ancho de las cajas considerando el margen */
  /*min-height: 130px;*/
  text-align: center;
  background-color: #ffffff;
  padding: 30px 0px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 0 10px; /* Establece un margen fijo de 20px entre las cajas */
}
article section .caja h4{
  text-align: center;
  margin: 0px 0px 0px 0px;
  /*color: #888888;*/
}

article section iframe{
  width: 100%;
  height: auto;
  min-height: 220px;
}

article .h2_1{
  font-family: 'fontTitle';
  font-size: 1.8em;
  text-align: center;
  color: #444444;
}
article .h2_1 small{
  font-size: .5em;
  display: block;
}
article section .tpv{
  padding: 40px;
  text-align: left;
}
article section .tpv .separador{
  width: 100%;
  height: 1px;
  background-color: #CCCCCC;
  margin: 30px 0px;
  padding: 0px;
  pointer-events: none;
}
article section .tpv span {
  width: 54%;
  font-family: 'fontLight';
  font-size: 1.2em;
  text-align: left;
  margin: 3px 0px;
  display: inline-block;
  vertical-align: top;
  font-weight: bold;
}
article section .tpv input, article section .tpv select, article section .tpv .inf{
  width: 44%;
  text-align: right;
  display: inline-block;
  vertical-align: top;
}
article section .tpv .bloqInp, article section .tpv .bloqTex{
    width: 100%;
    text-align: left;
    display: block;
}
article section .tpv .bloqTex{
    min-height: 170px;
}
article section .tpv a{
  color: var(--corporativo_light);
  text-decoration: underline;
  transition: all .5s;
}
article section .tpv a:hover{
    padding: 3px 20px;
    color: #FFFFFF;
    border-radius: 8px;
    text-decoration: none;
    background-color: var(--auxiliar);
}
article section .tpv .tit_facturacion{
  color: #333333;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
  width: 100%;
}
article section .tpv .btnBlanco{
  width: 44%;
  border: 1px solid #333333;
}
article section .tpv .btnBlanco:hover, article section .tpv .btnForm:hover{
  background: var(--auxiliar) !important;
  border-color: var(--auxiliar);
  color: #FFFFFF !important;
}
article section .tpv .btnForm{
  width: 44%;
  min-width: fit-content;
}

/* Estilo para el botón personalizado y el label */
article section .custom-file-upload label {
    background-color: #007bff; /* Cambia esto al color que desees */
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    display: block;
}

/* Estilo al pasar el ratón por encima del label */
article section .custom-file-upload label:hover {
    background-color: #0056b3; /* Cambia esto al color que desees */
}

/* Estilo para ocultar el input original */
article section .custom-file-upload input[type="file"] {
    display: none;
}
/* Estilo para los botones en el contenedor */
.button-container {
    display: flex; /* Hace que los botones estén en línea horizontal */
    justify-content: space-between; /* Espacio entre los botones y los bordes del contenedor */
    margin-top: 20px; /* Separación superior */
}

.button-container button {
    flex-basis: 33%; /* Ocupar la mitad del contenedor con 10px de separación */
    display: block;
}

article .html_detalles{
  display: none;
}
.html_detalles{
  position: absolute !important;
  width: calc(100% - 160px) !important;
  max-width: 1024px;
  border-radius: 18px;
  padding: 40px 80px 40px 80px !important;
  margin-bottom: 80px;
}

/* ==========================================================================
   LISTADO
   ========================================================================== */
.listado{
    position: relative;
    top: 80px;
    left: 50%;
    width: 100%;
    max-width: 1300px;
    padding: 0px 5px;
    text-align: center;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.listado h2, .listado h5{
  margin: 5% 0px 1% 0px;
  display: block;
}
.listado h5{
  font-family: 'fontLight';
}

.listado a{
  display: inline-block;
}
.listado .noArt{
    margin-top: 140px;
    width: 100%;
    text-align: center;
}
.bloqArt, .bloqArt_h {
  position: relative;
  top: 0px;
  left: 0px;
  max-width: 390px;
  width: calc(100% - 22px);
  height: 530px;
  padding: 0px;
  margin: 11px;
  border-radius: 18px;
  overflow: hidden;
  text-align: center;
  vertical-align: top;
  display: inline-block;
}
.bloqArt_h {
  height: 390px;
  max-width: 530px;
}
.bloqArt_H2{
  position: relative;
  top: 0px;
  left: 0px;
  width: calc(50% - 5px);
  height: 420px;
  padding: 0px;
  margin: 20px;
  border-radius: 18px;
  overflow: hidden;
  text-align: center;
  vertical-align: top;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25), 0 6px 6px rgba(0, 0, 0, 0.22);
  display: flex;
  justify-content: center;
}
.bloqArt_H2 .detSup{
  display: none;
}
.bloqArt_H2 .detInf{
  bottom: 0px;
  left: 0px;
  width: 100%;
  background-color: #E5E5E5;
}
.bloqArt_H2 .detInf h3{
  color: #444444;
  margin-top: 0px;
}
.detImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1; /* Asegura que la imagen esté por debajo del degradado */
}
.detImg iframe{
  object-fit: none;
}
.bloqArt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    
  background: rgba(102,102,102,0);
  background: -moz-linear-gradient(top, rgba(102,102,102,.2) 0%, rgba(102,102,102,0.5) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(102,102,102,.2)), color-stop(100%, rgba(102,102,102,0.5)));
  background: -webkit-linear-gradient(top, rgba(102,102,102,.2) 0%, rgba(102,102,102,0.5) 100%);
  background: -o-linear-gradient(top, rgba(102,102,102,.2) 0%, rgba(102,102,102,0.5) 100%);
  background: -ms-linear-gradient(top, rgba(102,102,102,.2) 0%, rgba(102,102,102,0.5) 100%);
  background: linear-gradient(to bottom, rgba(102,102,102,.2) 0%, rgba(102,102,102,0.5) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#444444', GradientType=0 );
  pointer-events: none;
  z-index: 2; /* Asegura que el degradado esté por encima de la imagen */
}

.detSup {
  position: absolute;
  top: 10px;
  left: 10px;
  text-align: left;
  padding: 20px;
  user-select: none;
  color: #FFFFFF; /* Color del texto */
  z-index: 3; /* Asegura que el texto esté por encima del degradado */
}

.detInf {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 20px;
  width: 100%;
  text-align: left;
  user-select: none;
  color: #FFFFFF; /* Color del texto */
  z-index: 3; /* Asegura que el texto esté por encima del degradado */
}

.detSup span{
  padding: 8px 20px;
  margin-right: 20px;
  margin-bottom: 10px;
  border-radius: 50px;
  color: #444444;
  background-color: #FFFFFF;
  font-size: .9em;
  display: inline-block;
}
.detInf h3{
  font-size: 2em;
  color: #FFFFFF;
  text-align: left;
}
.inf_academia{
  margin: 0px;
  width: 100%;
  font-size: .85em !important;
}
.inf_academia strong{
  display: block;
}
.inf_academia small{
  color: #999999;
}
.btnBlanco {
  padding: 15px 20px;
  margin-right: 20px;
  border-radius: 18px;
  color: #444444;
  background-color: #FFFFFF;
  border: none;
  text-decoration: none;
  display: inline-block;
  font-size: .9em;
}
.btnForm {
  padding: 15px 20px;
  margin-right: 20px;
  border-radius: 18px;
  color: #FFFFFF;
  background: rgba(124,70,240,1);
background: -moz-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(124,70,240,1)), color-stop(100%, rgba(3,175,237,1)));
background: -webkit-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
background: -o-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
background: -ms-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
background: linear-gradient(to right, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c46f0', endColorstr='#03afed', GradientType=1 );
  border: none;
  font-family: 'fontBold';
  text-decoration: none;
  display: inline-block;
  font-size: .9em;
  user-select: none;
}
.btnBlanco:hover, .btnForm:hover{
  background: var(--auxiliar) !important;
  border-color: var(--auxiliar);
  color: #FFFFFF !important;
}
.btnOff {
  opacity: .5;
  padding: 15px 30px;
  margin-right: 20px;
  border-radius: 18px;
  color: #FFFFFF;
  background-color: #CC0000;
  border: none;
  display: inline-block;
  font-size: 1em;
}
.btnAzul {
  padding: 15px 30px;
  margin-right: 20px;
  border-radius: 18px;
  color: #FFFFFF;
  background-color: #007bff;
  border: none;
  display: inline-block;
  font-size: 1em;
}
.btnGris {

  padding: 15px 30px;
  margin-right: 20px;
  border-radius: 18px;
  color: #FFFFFF;
  background-color: #444444;
  border: none;
  display: inline-block;
  font-size: 1em;
}

.btnWha{
    color:#FFFFFF;
    font-family: 'fontBold';
    background-color:#25d366; 
}

.btnFbk {
    color:#FFFFFF;
    font-family: 'fontBold';
    background-color: #1877f2;
}

.btnIns {
    color:#FFFFFF;
    font-family: 'fontBold';
    background-color: #bc2a8d;
}
.btnYou {
    color:#FFFFFF;
    font-family: 'fontBold';
    background-color: #FF0000;
}
.a_black{
  text-decoration:none;
  color:#000000;
}
/* Opciones arriba de section */
.opciones{
  left: 50%;
  max-width: 720px;
  text-align: center;
  padding-bottom: 40px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.opciones h1{
  margin: 0px;
  text-align: center;
}
.opciones h5{
  margin: 10px 0px 60px 0px;
  text-align: center;
}
.opciones select{
  width: 40%;
}
/* ==========================================================================
   CALENDARIO
   ========================================================================== */
#calendario {
    width: 500px;
    margin: 1px auto 0px auto;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    user-select: none;
}
#calendario .tabla {
    display: flex;
    flex-direction: column;
    transition: all .8s;
}
#calendario .encabezado{
    pointer-events: none;
}
#calendario .encabezado, #calendario .cuerpo {
    display: flex;
    flex-direction: column; /* Cambiado de row a column */
    text-align: center;
}

#calendario .fila {
    display: flex;
}

#calendario .columna {
    flex: 0 0 100px; /* Ancho fijo de 100px */
    padding: 8px 2px;
    text-align: center;
    /*border-bottom: 1px solid #ddd;*/
    transition: all .5s;
    cursor: pointer;
}
#calendario .columna:hover{
    background-color: #CCCCCC;
}

#calendario .encabezado {
    background: rgba(124,70,240,1);
background: -moz-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(124,70,240,1)), color-stop(100%, rgba(3,175,237,1)));
background: -webkit-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
background: -o-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
background: -ms-linear-gradient(left, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
background: linear-gradient(to right, rgba(124,70,240,1) 0%, rgba(3,175,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c46f0', endColorstr='#03afed', GradientType=1 );
    color: #FFFFFF;
}

#calendario .encabezado .ticket_mes{
    font-size: .85em;
    display: block;
}
#calendario .encabezado .ticket_dia {
    font-size: .65em;
    text-transform: uppercase;
    opacity: .8;
    display: block;
}
#calendario .bloqueado {
    /* background-color: #CCCCCC; */
    /* background-image: url('../../../img/horario_ocupado.png'); */
    /* background-repeat: repeat; */
    /* opacity: .2; */
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999999;
    font-size: .5em;
}
#calendario .bloqueado_user{
  background-color: #87e2d1;
}
.botones {
    text-align: center;
    margin: 5px 0px 20px 0px;
    display: flex;
}
.botones button {
    width: 48% !important;
    height: 42px;
    padding: 5px 0px !important;
    margin: 10px 4px 0px 4px !important;
    border-radius: 18px;
    color: #444444;
    background-color: #FFFFFF;
    text-decoration: none;
    display: inline-block;
    font-size: .9em;
    transition: all 0s !important;
    flex: 1;
}
.botones button:hover{
  background: var(--auxiliar) !important;
  border-color: var(--auxiliar)!important;
  color: #FFFFFF;
}
#cajaAvi .btnForm{
    width: 100%;

}
/* ==========================================================================
   SOCIOS PERFIL
   ========================================================================== */
.bloqForm{
    position: relative;
    width: 540px;
    height: auto;
    padding: 80px 50px 30px 150px;
    color: #000000;
}
.bloqForm .saludo{
    width: 73%;
    color: #000000;
    font-size: 2.3em !important;
    font-family: 'fontLight';
    font-weight: normal;
    margin: 0px;
}
.bloqForm h2{
    width: 73%;
    color: #000000;
    font-size: 1.5em;
    font-family: 'fontLight';
    font-weight: normal;
    margin: 20px 0px 30px 0px;
}
.bloqForm h3{
    color: #000000;
    font-size: 1em;
    font-family: fontLight;
    font-weight: normal;
    border-left: 1px solid #000000;
    margin: 0px 0px 10px 0px;
    padding-left: 10px;
}
.bloqForm h4{
    color: #999999;
    font-weight: normal;
    font-family: 'fontLight';
    margin: 20px 0px 0px 0px;
}
.bloqForm .logo{
    position: relative;
    float: right;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: #FFFFFF;
    overflow: hidden;
    border: 4px solid transparent;
    transition: all .5s;
}


.bloqForm .logo img{
    width: 100%;
    height: auto;
    transition: all .5s;
}
.bloqForm .logo:hover img{
    width: 104%;
    margin-top: -2%;
    margin-left: -2%;
}
.bloqForm .logo .imgFbk {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  margin: 0px;
}
.bloqForm .logo .imgFbk span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-family: 'fontBold';
  position: absolute;
  font-size: 5em;
  color: #FFFFFF;
  top: 7px;
  left: 0px;
  z-index: 1;
  text-align: center;
}

.bloqForm form{
    width: 100%;
    height: auto;
    
}
.bloqForm form .bloq{
    width: 90%;
    padding: 4% 5%;
    background-color: #FFFFFF;
    margin: 0px;
    border-bottom: 1px solid #000000;
    display: block;
}
.bloqForm form .bloq img{
    width: 100%;
    height: auto;
}
.bloqForm form .bloq iframe{
    width: 100%;
    height: 274px;
}
.bloqForm form .bloq button{
    margin-top: -10px;
    display: block;
}
.txtMap{
    text-align:left;
    font-size: 1em; 
    margin-top: 20px !important; 
    margin-bottom:20px; 
    height:auto;
    display: block;
}
.bloqForm form .separacion{
    width: 90%;
    height: 20px;
    background-color: rgba(0, 0, 0, .1);
    margin: 0px 0px 0px 5%;
}



.bloqForm ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #999999;
}
.bloqForm ::-moz-placeholder { /* Firefox 19+ */
  color: #999999;
}
.bloqForm :-ms-input-placeholder { /* IE 10+ */
  color: #999999;
}
.bloqForm :-moz-placeholder { /* Firefox 18- */
  color: #999999;
}

.bloqForm form .first{
    font-size: 1.2em;
    font-family: 'fontBold';
    margin-bottom: 20px;
}
.bloqForm form .firstSmall{
    font-family: 'fontBold';
}
.bloqForm form .cif{
    width: 70px;
    display: inline-block;
}
.bloqForm form .letraCif{
    width: 60%;
    display: inline-block;
    text-transform: uppercase;
}
.bloqForm form textarea{
    width: 96%;
    min-height: 110px;
    margin: 4px 0px;
    padding: 2%;
    border: 1px solid #CCCCCC;
    color: #000000;
    resize: vertical;
    display: block;
}
.bloqForm .bloqBtn{
    margin-top: 10px;
    width: 100%;
    text-align: left;
}
.bloqForm .bloqBtn button{
    width: 100%;
    margin: 2px 0px;
    transition: all .5s; 
}

.bloqForm .bloqBtn .btnSec{
    width: 49.5%;
    opacity: .5;
}

.bloqForm .info{
    padding: 3%;
    font-size: .85em;
    background-color: #DDDDDD;
    color: #666666;
}
/* Listado facturación */
.bloqForm .bloq ul .linFac{
    text-decoration: none;
}
.bloqForm .bloq ul .linFac li {
    margin: 5px 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    text-align: left;
    transition: all 0.5s;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bloqForm .bloq ul .linFac li:hover{
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
}

.bloqForm .bloq ul .linFac li .idFac {
    color: #000000;
    font-family: 'fontLight';
    margin-right: 10px;
}
.bloqForm .bloq ul .linFac li::before{
    display: none;
}

.bloqForm .bloq ul .linFac li .tot {
    color: #000000;
    font-family: 'fontNormal';
}
/* ==========================================================================
   PERFIL
   ========================================================================== */
.perfil_bloq{
    position: relative;
    top: 80px;
    width: 100%;
    max-width: 1120px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
}
.perfil_bloq .perfil_izq{
    width: 540px;
    display: inline-block;
    vertical-align: top;
}
.perfil_bloq .perfil_der{
    width: calc(100% - 545px);
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

#bloqSocPer, #nav-tool{
    position: relative;
    top: 0px;
    width: 100%;
    height: auto;
    padding: 0px 5% 30px 5%;
    color: #000000;
}

#bloqSocPer h2{
    width: 73%;
    color: #000000;
    font-size: 2.8em;
    font-family: 'fontLight';
    font-weight: normal;
    margin: 40px 0px 10px 0px;
}

#bloqSocPer iframe{
    margin-top: 20px;
    width: 100%;
    height: 274px;
    box-shadow: 20px 20px 10px rgba(0,0,0,.2);
}

#bloqSocPer form{
    width: 100%;
    height: auto;
    
}
#bloqSocPer form .bloq, #nav-tool .bloq {
    width: 100%;
    padding: 4%;
    background-color: #FFFFFF;
    margin: 0px;
    display: block;
    border-radius: 5px;
}
#bloqSocPer form .bloq img{
    width: 100%;
    height: auto;
}

#bloqSocPer form .bloq button{
    margin-top: -10px;
    display: block;
}


form input[type="checkbox"]{
    width: auto !important;
    height: auto !important;
    margin: 3px 5px 2px 0px  !important;
    display: inline-flex !important;
}

#bloqSocPer ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #000000;
}
#bloqSocPer ::-moz-placeholder { /* Firefox 19+ */
  color: #000000;
}
#bloqSocPer :-ms-input-placeholder { /* IE 10+ */
  color: #000000;
}
#bloqSocPer :-moz-placeholder { /* Firefox 18- */
  color: #000000;
}

#bloqSocPer form .first{
    font-size: 1.2em;
    font-family: 'fontBold';
    margin-bottom: 20px;
}
#bloqSocPer form .firstSmall{
    font-family: 'fontBold';
}
#bloqSocPer form .cif{
    width: 70px;
    display: inline-block;
}
#bloqSocPer form .letraCif{
    width: 60%;
    display: inline-block;
    text-transform: uppercase;
}
#bloqSocPer form textarea{
    width: 96%;
    min-height: 110px;
    margin: 4px 0px;
    padding: 2%;
    border: 1px solid var(--corporativo_light);
    color: #000000;
    resize: vertical;
    display: block;
}
#bloqSocPer .bloqBtn{
    margin-top: 10px;
    width: 100%;
    text-align: left;
}


#bloqSocPer .bloqBtn .btnSec{
    width: 49.5%;
    opacity: .5;
}

#bloqSocPer .info{
    padding: 3%;
    font-size: .85em;
    background-color: #DDDDDD;
    color: #666666;
}




.txtCheAvi{
    color: #000000 !important;
    font-size: .65em !important;
    font-weight: normal !important;
    margin: 0px 0px 10px 0px !important;
    width: calc(100% - 30px) !important;
    vertical-align: top;
}
.txtCheAvi a{
    color: #000000 !important;
    font-weight: bold;
    transition: all .5s !important;
    text-decoration: none !important;
}
.txtCheAvi a:hover{
    padding: 0px !important;
}
.linkWha{
    text-align: center;
    background-color: #128c7e;
    color: #FFFFFF;
    padding: 7px 10px;
    margin: 20px 0px 10px 0px;
    transition: all .5s;
    display: block;
}
.linkBtn{
    width: calc(100% - 20px);
    text-align: center;
    background-color: #FFC0CB;
    color: #000000;
    padding: 7px 10px;
    margin: 10px 0px 0px 0px;
    border-radius: 0px;
    border: none;
    transition: all .5s;
    display: block;
}
.linkWha:hover, .linkBtn:hover{
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .8);
}
/* ==========================================================================
   EMPRESA
   ========================================================================== */
#bloqEmp{
    position: relative;
    width: 540px;
    height: auto;
    padding: 3% 60px 30px 7%;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 20px 20px 0px rgba(255, 255, 255, .2);
    border-bottom: 1px solid rgba(0, 0, 0, 1);
    color: #000000;
    display: block;
}
#bloqEmp img{
    width: 115px;
}
#bloqEmp h1{
    font-size: 1.4em;
}
#bloqEmp p{
    color: #999;
}

/* ==========================================================================
   CESTA
   ========================================================================== */
#cesta{
    overflow: hidden;
}
#cesta form{
    position: relative;
    top: 50px;
    margin-bottom: 80px;
    background-color: rgba(0, 0, 0, .1);
    padding: 40px 5% 5% 5%;
}
#cesta form .infNueAge{
    color: #666;
    text-align: left;
    padding: 0px 0px 0px 24px;
    font-size: .85em;
    text-align: justify;
    margin-top: -20px;
    margin-bottom: 20px;
}
#cesta form input[name="checkAvi"]{
    margin: 5px 10px 0px 0px !important;
}
#cesta form .infNueAge a{
    color: #000000;
}
#cesta .separacion{
    width: 100%;
    height: 20px;
    background-color: transparent;
    border-bottom: 1px dotted #000000;
    margin: 0px 0px 10px 0px;
}
#cesta h3{
    color: #666666;
    font-size: 1.2em;
    font-family: 'fontBold';
    font-weight: normal;
    border-left: 1px solid #000000;
    margin: 0px 0px 10px 0px;
    padding-left: 10px;
}
#cesta form input{
    width: 100%;
    margin: 4px 0px;
    border: none;
    color: #000000;
    background-color: transparent;
    display: block;
}


#cesta ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #000000;
}
#cesta ::-moz-placeholder { /* Firefox 19+ */
  color: #000000;
}
#cesta :-ms-input-placeholder { /* IE 10+ */
  color: #000000;
}
#cesta :-moz-placeholder { /* Firefox 18- */
  color: #000000;
}

#cesta form .first{
    font-size: 1.2em;
    font-family: 'fontBold';
    margin-bottom: 20px;
}
#cesta form .firstSmall{
    font-family: 'fontBold';
}
#cesta form .cif{
    width: 70px;
    display: inline-block;
}
#cesta form .letraCif{
    width: 60%;
    display: inline-block;
    text-transform: uppercase;
}
#cesta form textarea{
    width: 96%;
    min-height: 110px;
    margin: 4px 0px;
    padding: 2%;
    border: 1px solid #CCCCCC;
    color: #000000;
    resize: vertical;
    display: block;
}
#cesta .bloqBtn{
    margin-top: 10px;
    width: 100%;
    text-align: left;
}
#cesta .bloqBtn button{
    width: 100%;
    height: 42px;
    color: #FFFFFF;
    background-color: #000000;
    border: none;
    transition: all .5s; 
}

#cesta .bloqBtn .btnSec{
    width: 49.5%;
    opacity: .5;
}
#cesta .bloqBtn button:hover, #cesta .bloqBtn button:focus{
    opacity: 1;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .5) !important;
    background-color: #000000;
    color: #FFFFFF;
}
#cesta .info{
    padding: 3%;
    font-size: .85em;
    background-color: #DDDDDD;
    color: #666666;
}
#cesta #listCes{
    width: 100%;
}
#cesta #listCes .resFicha{
    position: relative;
    width: 100%;
    height: 180px;
    border-top: 1px solid #E5E5E5;
    overflow: hidden;
}
#cesta #listCes .resFicha img{
    width: auto;
    height: 84%;
    display: inline-block;
}
.resNOStock{
    position: relative;
    width: calc(90% - 2px);
    margin: 20px 0px -20px 5%;
    background-color:#CC0000;
    margin-bottom: 30px;
    height: auto;
}
.resNOStock p{
    color: #FFFFFF !important;
    text-align: center;
    padding: 15px 5% !important;
}
#cesta #listCes .resTextos{
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 200px;
}
#cesta #listCes .resTextos .resNom{
    margin: 10px 0px 0px 0px;
    padding: 0px;
    font-family: 'fontLight';
    font-weight: normal;
    font-size: 1.2em;
    text-align: left;
    color: #000000;
}
#cesta #listCes .resTextos .resUni{
    margin: 0px;
    padding: 0px;
    font-family: 'fontNormal';
    font-weight: normal;
    font-size: .9em;
    text-align: left;
    color: rgba(0, 0, 0, 1);
}
#cesta #listCes .resTextos .resImp{
    margin: 0px 0px 10px 0px;
    padding: 0px;
    font-family: 'fontBold';
    font-weight: normal;
    font-size: 1.4em;
    text-align: left;
    color: #000000;
    border: none;
}
#cesta #listCes .resTextos .resImp .dto{
    margin-left: 10px;
    font-size: .85em;
    font-family: 'fontNormal';
    color: #999999;
    text-decoration: line-through;
}
#cesta #listCes .resTextos .cheCol{
    width: 100px;
    border: 1px solid var(--corporativo_light);
    background-color: var(--corporativo_light);
    pointer-events: none;
}
.agotado{
    width: 100px;
    padding: 7px 5px;
    margin: 2px 0px;
    transition: all .5s;
    display: inline-block;
    border: 1px solid #CC0000;
    background-color: #CC0000;
    color: #FFFFFF;
    text-transform: uppercase;
    text-align: center;
    pointer-events: none;
}
#cesta #listCes .resTextos .del{
    margin: 0px 0px 0px 20px;
    padding: 8px 20px;
    font-weight: normal;
    font-size: .85em;
    text-align: left;
    background-color: #FFFFFF;
    color: #CC0000;
    text-transform: uppercase;
    border: none;
    opacity: .5;
    transition: all .5s;
}
#cesta #listCes .resTextos .del:hover, #cesta #listArt .resTextos .del:focus{
    opacity: 1;
    color: #FFFFFF;
    background-color: #CC0000;
}
#combTipTran, #logCes{
    width: 100%;
    display: block;
}
#logCes{
    width: 100%;
    margin-bottom: 20px;
    display: block;
}
#cesta .txtEnv{
    width: calc(80% - 2px);
    margin: 20px 0px -20px 5%;
    padding: 7px 5%;
    background-color: #FFFFFF;
    color: #000000;
    border-top: 1px dotted rgba(73,155,234, .7);
    border-left: 1px dotted rgba(73,155,234, .7);
    border-right: 1px dotted rgba(73,155,234, .7);
    background-color: rgba(73,155,234, 1);
    color: rgba(0, 0, 0, .5);
    display: block;
}

#cesta canvas{
    width: 100%;
    height: 180px;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    /*background: rgba(0,133,204,1);
    background: -moz-linear-gradient(-45deg, rgba(0,133,204,1) 0%, rgba(15,186,172,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(0,133,204,1)), color-stop(100%, rgba(15,186,172,1)));
    background: -webkit-linear-gradient(-45deg, rgba(0,133,204,1) 0%, rgba(15,186,172,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(0,133,204,1) 0%, rgba(15,186,172,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(0,133,204,1) 0%, rgba(15,186,172,1) 100%);
    background: linear-gradient(135deg, rgba(0,133,204,1) 0%, rgba(15,186,172,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#0fbaac', GradientType=1 );
    -moz-box-shadow: inset 0px 5px 10px rgba(0, 0, 0, .3);
    -webkit-box-shadow: inset 0px 5px 10px rgba(0, 0, 0, .3);
    box-shadow: inset 0px 5px 10px rgba(0, 0, 0, .3);*/
    display: block;

}
.cheCol{
    width: 32%;
    font-size: .9em;
    border: 1px solid rgba(0, 0, 0, 1);
    background-color: #FFFFFF;
    color: #000000;
    padding: 7px 5px;
    margin: 2px 0px;
    transition: all .5s;
    display: inline-block;
}
.cheCol:hover{
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .5) !important;
}
.cheCol .btnAct{
    color: #FFFFFF;
    border-color: rgba(0, 0, 0, 1);
    background-color: rgba(0, 0, 0, 1);
}
.cheCol .btnAct:hover{
    background-color: #CCCCCC;
    border-color: #CCCCCC;
}
#bloqDes{
    width: calc(100% - 2px);
    margin-left: 5%;
    margin-bottom: 40px;
}
#bloqDes .tot span{
    color: #CCCCCC;
    font-family: 'fontNormal';
    font-size: .5em;
}
#bloqDes .tot{
    margin: 20px 0px 0px 0px;
    padding: 10px 0px;
    font-family: 'fontBold';
    font-weight: normal;
    font-size: 1.8em;
    border: 1px dotted rgba(0, 0, 0, .7);
}
#bloqDes .tot span{
    color: #999;
    font-family: 'fontNormal';
    font-size: .5em;
    display: block;
}
#bloqDes p span{
    color: #999;
    font-family: 'fontNormal';
    display: block;
}
#bloqDes .tra{
    width: calc(45% - 0px);
    margin: 0px 0px 0px 0px;
    padding: 10px 0px;
    font-weight: normal;
    font-size: 1em;
    border-left: 1px dotted rgba(0, 0, 0, .1);
    border-bottom: 1px dotted rgba(0, 0, 0, .1);
    background-color: rgba(0, 0, 0, .1);
    display: inline-block;
}
#bloqDes .traIva{
    width: calc(45% - 1px);
    margin: 0px 0px 0px 0px;
    padding: 10px 0px;
    font-weight: normal;
    font-size: 1em;
    border-left: 1px dotted rgba(0, 0, 0, .1);
    border-right: 1px dotted rgba(0, 0, 0, .1);
    border-bottom: 1px dotted rgba(0, 0, 0, .1);
    background-color: rgba(0, 0, 0, .1);
    display: inline-block;
}
#bloqDes .bas, #bloqDes .iva{
    width: calc(30% - 0px);
    margin: 0px 0px 0px 0px;
    padding: 10px 0px;
    font-weight: normal;
    font-size: 1em;
    border-left: 1px dotted rgba(0, 0, 0, .1);
    border-bottom: 1px dotted rgba(0, 0, 0, .1);
    background-color: rgba(0, 0, 0, .1);
    display: inline-block;
}
#bloqDes .totArt{
    width: calc(30% - 2px);
    margin: 0px 0px 40px 0px;
    padding: 10px 0px;
    font-weight: normal;
    font-size: 1em;
    border-left: 1px dotted rgba(0, 0, 0, .1);
    border-bottom: 1px dotted rgba(0, 0, 0, .1);
    border-right: 1px dotted rgba(0, 0, 0, .1);
    background-color: rgba(0, 0, 0, .1);
    display: inline-block;
}
#bloqBtnPag{
    position: fixed;
    top: 0px;
    left: 50%;
    width: 520px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    display: none;
    z-index: 205;
}
#bloqBtnPag #btnPagar{
    width: 100%;
    height: 60px;
    color: #000000;
    background-color: #FFC0CB;
    font-size: 1.4em;
    border: none;
    transition: all .5s;
}
#bloqBtnPag #btnPagar:hover, #bloqBtnPag #btnPagar:focus{
    background-color: #000000;
    color: var(--corporativo_light);
}
#bloqBtnPag #btnCanCom{
    width: 100%;
    height: 45px;
    color: #999999;
    background-color: #FFFFFF;
    font-size: 1em;
    border: none;
    transition: all .5s;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, .3);
}
/* ==========================================================================
   MÉTODOS DE PAGO
   ========================================================================== */
#contResumen{
    padding: 40px;
}
#contResumen p{
    margin: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}
#contResumen input[type="submit"], .btnBizum{
    width: 100%;
    height: 42px;
    margin: 10px 0px;
    font-size: 1.2em;
    border: none;
    border: 1px solid var(--corporativo_light);
    color: #000000;
    background-color: var(--corporativo_light);
    border-radius: 0px;
    transition: all .5s;
}
#contResumen input[type="submit"]:hover, #contResumen input[type="submit"]:focus{
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
    background-color: #000000;
    border-color: #000000;
    color: var(--corporativo_light);
}
#cuotas {
    margin: 30px 0px 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}
#cuotas div{
    cursor: pointer;
    width: 50%;
    border: 1px solid #444444;
    border-radius: 8px;
    padding: 8px 0px;
    margin: 0px 2px;
    transition: all .5s;
}
#cuotas div h3{
    margin:0px;
    text-align:center;
}
#cuotas div h6{
    text-align: center;
    color: #666666;
    font-size: .85em;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0px;
}
#cuotas .desactivado{
    border-color: transparent;
    opacity: .3;
}
#cuotas .desactivado:hover{
    opacity: 1;
    border-color: var(--auxiliar);
}

/* ==========================================================================
   HISTORIAL
   ========================================================================== */
#cesta .bloqHis{
    width: 100%;
    margin: 10px 0px;
    text-align: center;
    padding: 0px 0px 20px 0px;
    border: 1px solid #CCC;
    cursor: pointer;
    transition: all .5s;
}
#cesta .bloqHis:hover, #cesta .bloqHis:focus{
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
}
#cesta .bloqHis time{
    padding: 5px;
    margin-bottom: 20px;
    text-align: center;
    font-family: 'fontLight';
    font-size: 1em;
    background: rgba(0,133,204,1);
    background: -moz-linear-gradient(-45deg, rgba(0,133,204,1) 0%, rgba(15,186,172,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(0,133,204,1)), color-stop(100%, rgba(15,186,172,1)));
    background: -webkit-linear-gradient(-45deg, rgba(0,133,204,1) 0%, rgba(15,186,172,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(0,133,204,1) 0%, rgba(15,186,172,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(0,133,204,1) 0%, rgba(15,186,172,1) 100%);
    background: linear-gradient(135deg, rgba(0,133,204,1) 0%, rgba(15,186,172,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#0fbaac', GradientType=1 );
    color: #FFFFFF;
    display: block;
}
#cesta .bloqHis img{
    height: 90px;
    width: auto;
    display: inline-block;
}

/* ==========================================================================
   ACADEMIA
   ========================================================================== */
.academia{
  /*position: absolute;*/
}
.academia h2, .chat h2{
    font-family: 'fontLight';
    font-size: 2.3em;
    color: #888888;
    text-align: left;
    margin-bottom: 30px;
}
.chat ul li{
  margin-left: 0px;
  background-color: transparent;
  padding: 0px;
  border-radius: 0px;
}
#articulo .curso h1, #articulo .curso h2, #articulo .curso h3, #articulo .curso h4, #articulo .curso h5, #articulo .curso h6, #articulo .curso h7{
    margin-top: 10px;
}
#articulo .curso h4{
    margin-bottom: 23px;
    text-align: left;
    color: #777777;
}
#articulo .curso strong{
    color: #777777;
}
.table-hover{
  cursor: pointer;
}
/* ==========================================================================
   Emojis Chat
   ========================================================================== */
#emojiContainer {
    position: absolute;
    bottom: 20px;
    right: 20px;
    max-width: 520px;
    height: fit-content;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 999;
    display: none;
}
#emojiContainer button{
  font-size: 1.8em;
  border: none;
  background-color: transparent;
  transition: all .5s;
}
#emojiContainer button:hover{
  background-color: #E5E5E5;
}
#bloqChat{
  margin: 0px;
  height: 520px;
  overflow-y: auto;
}
.chat .mask_img video, .chat .mask_img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;

}
.detImgChat{
  max-width: 100%;
  max-height: 100%;
}
.muro{
  padding-top: 40px;
}
.muro h5{
  font-size: 0.936rem;
}
.muro div p img{
  width: 100%;
}
.muro .font-85{
  font-size: .85em;
}

/* ==========================================================================
   Ponencias
   ========================================================================== */
#presentacion{
  display: none;
}
.playFull {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 10000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Asegurar que todos los contenedores internos ocupen el 100% del espacio */
.playFull > div {
  display: none; /* Ocultamos todas las diapositivas por defecto */
}

/* Mostramos solo la primera diapositiva */
.playFull > div:first-child {
  display: block;
}

/* Ajustar imágenes e iframes */
.playFull img, .playFull iframe {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* height: 100%; */
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.playFull iframe {
  max-width: 90%;
  max-height: 90%;
  width: 100%;
  height: 100%;
}
#botonera_presentacion {
    position: fixed;
    top: 10px;
    right: 10px;
    gap: 50px;
    z-index: 10000001;
    display: none;
}

#botonera_presentacion button {
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 18px;
    cursor: pointer;
}

#botonera_presentacion button:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* ==========================================================================
   LISTA MP3
   ========================================================================== */

.d-flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.align-items-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}
.listaMultimedia h4{
  margin: 2rem 0px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.9rem;
  margin-top: 0;
  color: #666666;
}
.listaMultimedia .card-header {
  color: #fff;
}

.listaMultimedia table {
  width: 100%;
  font-size: .75em;
}
.listaMultimedia thead {
  background-color: #dbe0e5;
}
.listaMultimedia th {
  font-family: 'fontLight';
  padding: 20px 10px;
}
.listaMultimedia tr {
  min-height: 94px;
}
.listaMultimedia td {
  padding: 10px;
}

/*
.listaMultimedia tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}
*/
.listaMultimedia tbody tr:hover {
  background-color: #e0e0e0;
}

.listaMultimedia img.avatar-sm {
  width: 70px;
  height: 70px;
  margin-right: 20px;
}

.listaMultimedia audio {
  vertical-align: middle;
}

.listaMultimedia td .play-button {
  position: absolute;
  top: 50%;
  left: calc(50% - 0px);
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  visibility: hidden;
  opacity: 0;
  float: left;
  text-align: center;
  transition: all .5s;
}

.listaMultimedia td:hover .play-button {
  visibility: visible;
  opacity: 1;
}

.listaMultimedia td .play-button::before {
  content: "\25B6";
  color: #fff;
  font-size: 18px;
  line-height: 43px;
  text-align: center;
  padding-left: 4px;
}
.listaMultimedia td .play-button.play-icon, .listaMultimedia td .play-button.pause-icon {
  visibility: visible;
  opacity: 1;
}
.listaMultimedia td .play-button.pause-icon::before {
  content: "\II";
  font-size: 23px;
  padding-left: 2px;
}

div[name="waves"] {
    display: none;
    align-items: center;
}

div[name="waves"] .wave {
  width: 1px;
  height: 7px;
  background: #000000;
  margin: 0px 1px;
  animation: wave 0.6s infinite ease-in-out;
}

div[name="waves"] .wave:nth-child(2) {
    animation-delay: -0.5s;
}

div[name="waves"] .wave:nth-child(3) {
    animation-delay: -0.4s;
}

div[name="waves"] .wave:nth-child(4) {
    animation-delay: -0.3s;
}

div[name="waves"] .wave:nth-child(5) {
    animation-delay: -0.2s;
}

div[name="waves"] .wave:nth-child(6) {
    animation-delay: -0.1s;
}

@keyframes wave {
    0% { transform: scaleY(1); }
    50% { transform: scaleY(2); }
    100% { transform: scaleY(1); }
}
/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media all and (orientation:landscape){
    /* home */
    #fondoWeb .horizontal{
        display: block;
    }
    #fondoWeb .vertical{
        display: none;
    }
}
@media all and (orientation:portrait){
    /* home */
    #fondoWeb .horizontal{
        display: none;
    }
    #fondoWeb .vertical{
        display: block;
    }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media only screen and (max-width: 1340px){
    /* Menú */
    .menLis{
        text-align: left;
    }
    /* CHAT */
    .content-page{
        margin-left: 0px;
    }
}
@media only screen and (max-width: 1280px){
    article .cabecera .caja h4{
        font-size: .9em;
    }
    article .cabecera .caja{
        padding: 25px 0px;
    }
    article .h2_1{
        font-size: 1.3em;
    }
}
@media only screen and (max-width: 1140px){
    /* Menú */
    #marca, #menPri, #menAux, #menPri li a[name="computer"]{
        display: none;
    }
    #btnMovil, #marca_movil, #menPri li a[name="mobile"], #menPri li a{
        display: block;
    }
    #menu{
        padding: 80px 0px;
    }
    .menLis li{
        padding: 10px 10px;
        display: block;
    }
    .menLis a, .menLis span, .menLis button{
        text-transform: none;
        font-size: 1.2em;
    }
    .menLis .btnMenu.btnAct{
        background: transparent;
    }
    .menLis .btnMenu.btnAct a span{
        color: #666666;
    }
    .menLis .btnMenu.btnAct a[name="mobile"] span{
        color: #FFFFFF;
    }
    .subMenu{
        position: relative;
        top: 10px;
        left: 20px;
        margin-bottom: 20px;
        opacity: 1;
        box-shadow: unset;
        padding: 0px;
        pointer-events: all;
        background-color: transparent;
        font-size: .85em;
        transform: none;
        transition: none;
    }
    .menLis a{
        display: block;
    }
    .menLis.destacado .subMenu li a{
        color: #FFFFFF;
    }
}
@media only screen and (max-width: 980px){
    h1, h2, h3, h4, h5, h6, h7{
        padding-left: 2%;
        padding-right: 2%;
    }
    h3, .h3, .detInf h3{
      font-size: 1.8em;
      word-wrap: break-word;
    }
    /* HOME */
    .home h1{
        font-size: 1.3em !important;
    }
    .home .slogan{
      margin-top: 750px;
    }
    /* ficha */
    #ficha article{
        left: unset;
        right: 0px;
    }
    #bloqImg .max{
        width: 100%;
    }
    /* Formularios */
    .bloqForm{
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        padding: 20px 110px 30px 0px;
    }
}
@media only screen and (max-width: 940px){
    /* FICHA */
    article section .cabecera{
        max-width: 380px;
        width: 100%;
        margin: 0 auto;
        display: block;
    }
    article section .caja{
        margin: 10px 0px;
        width: 100%;
    }
    article .contenido .bloqDer, article .trumbowyg-bloqDer {
        position: relative;
        left: 0px;
        margin: 0px;
        display: block;
        width: 100%;
    }
    article .contenido .bloqIzq, article .trumbowyg-bloqIzq{
        display: block;
        width: 100%;
    }
}
@media only screen and (max-width: 920px){
    /* listados */
    #listArt .artListado{
        width: 46%;
    }

    /* Artículos */
    .html_detalles{
      width: calc(98% - 14px) !important;
      padding: 20px 40px 20px 40px !important;
    }
    article section{
      padding: 0px 10px 0px 10px;
    }
    
    /* Empresa */
    #bloqEmp{
        width: 50%;
    }

}
@media only screen and (max-width: 820px){
    /* Aviso legal */
    #txtInfo{
        left: 0;
        width: calc(100% - 110px);
        -webkit-transform: unset;
        -ms-transform: unset;
        transform: unset;
    }
    #txtInfo section{
        margin-top: 0px;
    }
    /* listados */
    #filtro{
        width: calc(100% - 120px);
        padding: 10px 130px 10px 10px;
    }
    #filtro [name="selMod"]{
        width: calc(100% - 40px);
    }
    .bloqArt, .bloqArt_h{
        width: 100%;
        margin: 15px 0px;
    }
}
@media only screen and (max-width: 750px){
    /* Home */
    .home h1{
        font-size: .9em !important;
    }
    #fondoWeb .container h2{
        font-size: 40px;
    }
    #fondoWeb .container p {
        font-size: 17px;
    }
    #fondoWeb .container button, #fondoWeb .container a {
        font-size: 17px;
        padding: 12px 40px;
    }
    .home h2, .academia h2, .chat h2{
        font-size: 1.8em;
    }
    /* */
    #refLogo p{
        display: none;
    }
    #refLogo a img{
        margin: 8px 0px 0px 0px;
    }
    #btnVolver{
        display: block;
    }
    #esloganHom{
        top: calc(50% + 250px);
        width: 190px;
        padding: 10px 30px;
        font-size: 1.8em;
    }
    #bloqBus{
        width: calc(100% - 70px);
    }
    #bloqBus input{
        margin-left: 120px;
    }
    @-webkit-keyframes movBus {
        0% {
            right: 143px;
            width: 1px;
        }100%{
            right: 180px;
            width: calc(100% - 70px);
        }
    }
    @keyframes movBus {
        0% {
            right: 143px;
            width: 1px;
        }100%{
            right: 180px;
            width: calc(100% - 70px);
        }
    }
    .titIco{
        letter-spacing: .1em;
    }
    

    /* Formularios */
    .bloqForm{
        left: 0px;
        width: calc(100% - 40px);
        -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
        transform: translateX(0%);
        padding: 40px 20px 20px 20px;
    }
    .bloqForm h1{
        font-size: 1.8em;
    }
    .bloqForm h2{
        width: 65%;
        font-size: 1.2em;
        margin: 10px 0px 20px 0px;
    }
    .bloqForm .logo{
        width: 100px;
        height: 100px;
        margin-top: 20px;
    }
    /* Aviso legal */
    #txtInfo{
        width: 100%;
    }
    /* Caja Aviso */
    .forLogin h3{
        font-size: 2em;
    }
}
@media only screen and (max-width: 710px){
    /* HOME */
    .home_H2 .bloques{
        display: block;
    }
    .bloqArt_H2{
        width: calc(100% - 40px);
    }
}
@media only screen and (max-width: 625px){
    /* Contacto */
    #bloqSocPer{
        width: 100%;
        padding: 80px 4% 30px 4%;
    }
    #ficha section .info{
        padding: 20px 4% 30px 4%;
    }
    /* Ficha */
    #ficha section ul li {
        width: 50%;
    }
    
    /* ZOOM */
    #bloqSocPer, #nav-tool{
        padding: 0px 2% 30px 2%;
    }
    /* Lista MP3 */
    #listaMP3 th:nth-child(3),
    #listaMP3 td:nth-child(3) {
        display: none;
    }
}
@media only screen and (max-width: 580px){
    /* Avisos */
    #cajAvi{
        position: absolute;
        top: 35px !important;
        left: 1%;
        width: 98%;
        -webkit-transform: translateX(0%) translateY(0%) !important;
        -ms-transform: translateX(0%) translateY(0%) !important;
        transform: translateX(0%) translateY(0%) !important;
    }
    /*#cajAvi button{
        position: relative;
        width: 94%;
        left: 3%;
        right: auto;
        display: block;
        margin-bottom: 5px;
    }*/
    /*.btnCerrar {
        position: fixed !important;
        left: auto;
    }*/
    #cajAvi .btnCerrar{
        display: none;
    }
    #cajAvi .btn{
        width: 90%;
        left: 0px;
    }
    .hide_movil{
      display: none;
    }
    
}
@media only screen and (max-width: 530px){
    #calendario{
        width: 400px;
    }
}
@media only screen and (max-width: 470px){
    /* Home */
    #fondoWeb .container button, .detInf button, #fondoWeb .container a {
        margin: 10px 10px 10px 0px;
    }
    #fondoWeb .container .detSup, #fondoWeb .container .detInf{
        left: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .home .slogan{
        margin-top: 750px;
        margin-bottom: -180px;
    }
    /* FICHA */
    article section .tpv button{
        width: 100% !important;
        margin: 15px 0px;
        display: block;
    }
    article section .tpv input, article section .tpv select, article section .tpv .inf{
      display: block;
          text-align: left;
    }
    article section .tpv {
      padding: 20px;
    }
    article section .tpv .separador{
      margin: 10px 0px;
    }
    /* Caja Aviso */
    #cajAvi .tpv{
        padding: 0px 15px;
    }

    .botones button{
        width: 100% !important;
            margin-bottom: 10px !important;
    }
    #calendario .botones button {
      width: 48% !important;
    }
}
@media only screen and (max-width: 440px){
    #ventana_ayuda {
        width: 100%;
        left: 0px;
        bottom: 0px;
    }
    /* Caja Aviso */
    #cuotas div{
        font-size: .8em;
    }
    .btnBlanco{
        width: calc(100% - 20px);
        left: 10px;
        margin: 10px 0px 0px 0px;
        text-align: center;
    }
    /* ARTÍCULOS */
    article .cabecera .caja h4{
        font-size: .85em;
    }
    article .cabecera .caja{
        padding: 10px 0px;
    }
    article .h2_1{
        font-size: 1em;
    }
    article .ediTit, article h1{
      top: 36%;
      font-size: 6vmax;
    }
    article section .cabecera {
      max-width: 280px;
    }
    /* LISTADO MP3 */
    .card-body{
      padding: 0px 2px;
    }
}
@media only screen and (max-width: 427px){
    #calendario{
        width: 300px;
    }
    #calendario .botones button {
      width: 47% !important;
    }
    h1{
        overflow-wrap: break-word;
        font-size: 2.2em;
    }
    h2, .h2, .listado h5{
        font-size: 1.8em;
        text-align: center;
    }
    h5{
        font-size: 1.2em;
    }
    select, .opciones select{
        width: calc(100% - 40px);
        margin: 10px 20px;
        display: block;
    }
}
@media only screen and (max-width: 376px){
    .bloq_carrousel .card-bg span, .bloq_carrousel .card-bg button, .bloq_carrousel .card-bg a{
        margin: 10px 10px 10px 0px;

    }
    h3, .h3, .detInf h3{
      font-size: 1.6em;
      word-wrap: break-word;
    }
}