/*Reseteo la hoja de estilos*/
:root { --pix-color-primario: #546e7a; --pix-color-fondo-suave: #eceff1; }
* { box-sizing: border-box; font-family: 'Roboto Condensed', sans-serif; }
html, body { margin: 0; padding: 0; background-color: var(--pix-color-fondo-suave); }

/*General*/
.divColumna { width: 100%; max-width: 1080px; margin: 72px auto; padding:8px; }
a { text-decoration: none; outline: none; color: var(--pix-color-primario); }
img { max-height: 100%; max-width: 100%; }

/*Header*/
/*Header*/
header { background: #ffffff; position: fixed; top: 0; left: 0; width: 100%; z-index: 100; box-shadow: 0 3px 5px rgba(0,0,0,.1); }

.tbHeader { display: table; width: 100% }
.tbHeader > div { display: table-cell; vertical-align: middle }
.tbHeader > div:first-child { width: 99% }
.tbHeader > div > a { display: block; width: 128px; height: 72px; text-align: center; color: var(--color-acento); padding: 12px; }
#btnVolver { width: 72px!important;  }
.tbHeader > div > a > i { font-size: 36px; line-height: 48px; }
.tbHeader > div > a.btnLogo { width: 100%; text-align: left; display: table; width: 100%; padding: 0; font-size: 16px; }
.tbHeader > div > a.btnLogo > div { display: table-cell; vertical-align: middle; padding-right: 12px }
.tbHeader > div > a.btnLogo > div:first-child { width: 1%; padding: 12px; font-size: 0 }
.tbHeader > div > a.btnLogo img { max-height: 48px; max-width: 200px; height: 100%; }
.tbHeader > div > a.btnPerfil { position: relative; }
.tbHeader > div > a.btnPerfil img { border-radius: 50%; }
.tbHeader > div > a span.spanAviso { border: solid 2px var(--color-primario); box-sizing: content-box; animation: pulse 1.2s infinite; width: 20px; height: 20px; display: block; position: absolute; border-radius: 50%; font-size: 13px; line-height: 20px; }
.tbHeader > div > a.btnPerfil span.spanAviso { background: #ccc; color: #fff; right: 3px; top: 10px; }
.tbHeader > div > a.btnNotificaciones { position: relative; }
.tbHeader > div > a.btnNotificaciones span.spanAviso { background: red; color: #fff; right: 10px; top: 10px; }
.tbHeader > div > .btnPerfil > img { height: 100%; }

.imgCabeceraSeccion { width: 100%; max-width: 640px; margin: 0 auto; display: block }


/*Noticias*/
.noticia { position: relative; font-size: 18px }
.noticia .imgNoticia { height: 300px; background-size: cover; background-position: center center; display: block; background-color: #eceff1 }
.noticia .btnFancyNoticia { width: 100%; font-size: 0; display: block; text-decoration: none; position: relative }
.noticia .btnFancyNoticia > img { width: 100% }
.noticia .btnFancyNoticia:after { font-family: 'Font Awesome 5 Pro'; content: '\f00e'; width: 48px; height: 48px; position: absolute; border-radius: 50%; background-color: #012b43cc; position: absolute; bottom: 16px; right: 16px; font-size: 24px; color: rgba(255,255,255,.8); line-height: 48px; text-align: center; }
.noticia .btnFancyNoticia:hover:after { background-color: #012b43; color: #fff }
.noticia .categoriasNoticia { display: block; text-overflow: ellipsis; white-space: nowrap; width: 100%; overflow: hidden; font-size: 0 }
.noticia .categoriasNoticia > span { display: inline-block; text-transform: uppercase; font-size: 13px; background: var(--color-acento); color: #fff; padding-left: 8px; padding-right: 8px; line-height: 16px; margin-right: 2px }
.noticia h2 { margin-top: 8px; margin-bottom: 2px; font-size: 1.8em }
.noticia h2 a { display: block; }
.noticia .accionesNoticia { display: table; width: 100%; line-height: 32px }
.noticia .accionesNoticia > div { display: table-cell; vertical-align: middle; }
.noticia .accionesNoticia > div:first-child { padding-right: 16px }
.noticia .accionesNoticia > div:last-child { width: 99%}
.noticia .accionesNoticia > div span { opacity: .8; font-weight: lighter; }
.noticia .btnMasOpciones { display: inline-block; width: 48px; height: 48px; line-height: 48px; text-align: center; font-size: 32px; border-radius: 50%; }
.noticia .cuerpoNoticia p { line-height: 1.5rem; font-size: 18px; color: #555 }
.noticia .cuerpoNoticia p a { color: #012b43; font-weight: bold; }
.noticia .cuerpoNoticia img { max-width: 100%; height: auto; }
#divFinNoticias { font-size: 22px; color: #777; text-align: center; padding: 160px 16px; font-weight: lighter; line-height: 40px }
#divFinNoticias img { width: 80px; }

.divInfo { display: inline-block; background: #ffecb3; padding: 8px 8px 8px 36px; border-radius: 4px; margin-top: 24px; font-size: 13px; line-height: 18px; vertical-align: middle; color: #000; width: 100%; }
.divInfo p { font-size: 16px; margin: 0; color: #636363 !important; }
.divInfo p a { font-weight: 700; }
.divInfo:before { content: '\f05a'; font-family: "Font Awesome 6 Free"; width: 16px; height: 16px; display: block; text-align: center; font-size: 22px; color: #ffc107; float: left; margin-left: -30px; font-weight: 600; }

.divPie { text-align: center; margin-top: 24px; }
.divPie img { width: 100px; }
.divPie p { font-size: 18px; color: #777; text-align: center; font-weight: lighter; line-height: 40px; }

@media only screen and (max-width:800px) {

    h1 { padding-left: 8px; padding-right: 8px; text-align: center }
    h1:after { left: 50%; margin-left: -25% }

    .secInterior { padding: 8px }

    /*Noticias*/
    .noticia:not(.noticiaFicha) .cuerpoNoticia { position: absolute; padding: 8px; bottom: 0; left: 0; width: 100%; background-image: linear-gradient(transparent,rgba(0,0,0,.7)); color: #fff; backdrop-filter: blur(.7px); }
    .noticia h2 { font-size: 24px; }
    .noticia:not(.noticiaFicha) h2 { color: #fff; text-shadow: 0 0 5px rgba(0,0,0,.5); }
    .noticia:not(.noticiaFicha) h2 a { color: #fff; }
    .noticia:not(.noticiaFicha) .btnMasOpciones { color: #fff }
    .noticia.noticiaFicha .btnMasOpciones { color: #222 }
    .noticia.noticiaFicha .cuerpoNoticia { padding: 8px }

    .noticia .divMasOpciones .btnAccion { z-index: -1; /*display: none;*/ opacity: 0; position: absolute; background-color: white; color: black; text-decoration: none; border-radius: 50%; font-size: 24px; width: 48px; height: 48px; line-height: 48px; text-align: center; transition: all .3s ease-in-out; }
    .noticia .divMasOpciones .btnAccion > i { font-weight: 400; }
    .noticia.activo .divMasOpciones .btnAccion { display: inline-block; }
    .noticia.activo .divMasOpciones .btnAccion { transform: translateX(0) translateY(0) !important; opacity: 1 !important; display: inline-block; }
    .noticia:after { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); z-index: 3; top: 0; transition: all .3s ease-in-out; display: none; backdrop-filter: blur(1px); }
    body.menuOpcionesDesplegado .noticia:not(.activo):after { display: block; }
    .noticia.activo .btnMasOpciones { background-color: rgba(1,43,67,.4); }
    .noticia .divMasOpciones.tresOpciones .btnAccion:first-child { /*margin-top: -56px;*/ bottom: 104px; transform: /* translateX(16px)*/ /*translateY(56px)*/ translateY(100px); }
    .noticia .divMasOpciones.tresOpciones .btnAccion:nth-child(2) { /*margin-top: 0; left: -56px; margin-left: 0;*/ bottom: 46px; transform: /*translateX(56px)*/ translateY(100px); }
    /*    .noticia .divMasOpciones.tresOpciones .btnAccion:nth-child(3) { position: absolute; margin-top: 56px; left: -16px; margin-left: 0; transform: translateX(16px) translateY(-56px); }*/
    .noticia.activo .divMasOpciones.tresOpciones .btnAccion:first-child { z-index: 200; }
    .noticia.activo .divMasOpciones.tresOpciones .btnAccion:nth-child(2) { z-index: 200; }
    .noticia.activo .divMasOpciones.tresOpciones .btnAccion:nth-child(3) { z-index: 200; }

    .noticia .divMasOpciones .btnAccion { background-color: #012b43 !important }
    .noticia .divMasOpciones .btnAccion i { color: white }
    .noticia .divMasOpciones .btnAccion { background-color: #012b43 !important }
    .noticia .divMasOpciones .btnAccion i { color: white }

    /*Noticias - Explorar*/
    #secExplorar { text-align: center }
    #secExplorar #divExplorarCategorias > div { width: 50%; padding-bottom: 8px }
    #secExplorar #divExplorarCategorias > div:nth-child(2n+1) { padding-right: 4px }
    #secExplorar #divExplorarCategorias > div:nth-child(2n+2) { padding-left: 4px }

    .slick-arrow { display: none !important; }

    /*Servicios*/
    #secServicios { text-align: center }
    #secServicios #divServicios > div { width: 50%; }


    /*Footer*/
    footer > div { width: 100%; table-layout: fixed }
}