@import "grilla2.less";
@a:#00AADD;
@v:#C2D500;
@g:#666666;
@n:#222222;
@b:#ffffff;
@g2:#333333;
@ba: #00CCDD;
@ba2:#009cb8;
@g3:#dddddd; 
@verde:#00A54F;
@rojo:#EB1C26;
@azul:#0066BB;
@morado:#2e007c;

@colorgreen: #02a947;
@colorpurple: #4c2f92;
@colorblue: #006cb7;
@colorred: #e3000b;
@coloryellow: #ffcf00;
@colorpink: #f8bbd6;
@colorcyan-blue: #41aacd;
@colorlight-blue: #b4e1e8;
@colorwhite: #fff;
@colorblack: #000;
@colorgray: #f0f0ef;
@colorblack-opacity: rgba(0,0,0,0.1);
@colorbox: #f0f0ef;
@movil: ~"(min-width: 576px)"; @xmovil: ~"(max-width: 576px)"; //sm
@tablet: ~"(min-width: 768px)"; @xtablet: ~"(max-width: 768px)"; //md
@grande: ~"(min-width: 992px)"; @xgrande: ~"(max-width: 992px)"; //lg
@amplio: ~"(min-width: 1200px)"; @xamplio: ~"(max-width: 1200px)";//xl

.cargarfuente (@nombre: normal; @tipo: normal; @ext:''){ font-family: 'Robotix'; src: url('fuente/@{nombre}@{ext}.woff2') format('woff2'); font-weight: @nombre; font-style: @tipo; }
@font-face {.cargarfuente(lighter);} @font-face {.cargarfuente(lighter,italic,'-ita');} @font-face {.cargarfuente(normal);} @font-face {.cargarfuente(normal,italic,'-ita');} @font-face {.cargarfuente(bold);} @font-face {.cargarfuente(bold,italic,'-ita');}
.t3 { * {-webkit-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;} }
.t2 {-webkit-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
.t1 (@x:0.5s){-webkit-transition: all @x ease-in-out; -o-transition: all @x ease-in-out; transition: all @x ease-in-out;}
.tanc (@x:0.5s){-webkit-transition: all @x ease-in-out; -o-transition: all @x ease-in-out; transition: all @x ease-in-out;}
.rotar(@x:90){ @p:~'rotate(@{x}deg)'; transform: @p; -webkit-transform: @p; -ms-transform: @p; -moz-transform: @p; -o-transform: @p; }
.flex(){display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex;}
.fleximportant(){display: -ms-flexbox!important; display: -moz-flex!important; display: -webkit-flex!important; display: -ms-flex!important; display: flex!important;}
a {color: @a; &:hover {color: @v;} text-decoration: none; .t1();}
a {.t1();}
[hidden] { display: none!important; }
[fuente="900"]{font-weight: 900}
[fuente="bold"]{font-weight:bold}
[fuente="600"]{font-weight: 600}
[fuente="500"]{font-weight: 500}
[fuente="normal"]{font-weight:normal}
[fuente="300"]{font-weight: 300}
@fnormal: 'Robotix', 'Arial', sans-serif;
* {font-family: @fnormal; -webkit-font-smoothing: antialiased;}
html, body {margin: 0px;font-size: 17px;line-height: 1.7em; color: @g; height: 100%; width: 100%}
.flex{ .flex(); .space {width: 1em!important; flex-basis: 3em;} }
.f-center{ justify-content: center; align-items: center}
.f-wrap{flex-wrap: wrap;
	h4:not(:nth-child(1)){margin: 0px 0px 0px 2em!important;
		@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px){
			margin: 0px 0px 0px 0em!important;
		}
	}
	h4{margin: 0px 0px 0px 0em!important;}
}
hr.tempo{width: 50%; height: 3px; background-color: @g3; margin-bottom: 15px; border: 0px;}
hr.divisor{width: 100%; height: 3px; background-color: @g3; margin-bottom: 25px; border: 0px;}
hr.grueso {height: 5px; background-color: @g3; border: none; margin: 20px 0px;}
th { padding: 15px; background-color: @g2; color: @b }
tfoot th{ padding: 5px; }
tr:nth-child(odd) {background-color: @g3}
td {padding: 15px}
td:not(:nth-child(1)) {
    border: @g2 solid 1px;
    border-width: 0px 0px 0px 1px;
}
[gris] {background-color: fade(@g2,10%);}
[gris2] {background-color: fade(@g2,20%);}
.centado-col {display: flex; width: 100%; justify-content: center;}
/*SLIDER*/
.embed-container {height: calc( ~'50%' ); width: 100%; overflow: hidden; min-height: 300px}
[emcv]{padding-bottom:65.55%!important;
	@media (max-width:992px){padding-bottom:74%!important;}
	@media (max-width:768px){padding-bottom:83%!important;}
	@media (max-width:576px){padding-bottom:95%!important;}
}
.embed-containervideo {height:0; margin-bottom:18px; overflow:hidden; padding-bottom:56.25%; /* 16/9 ratio */ padding-top:30px; /* IE6 workaround*/ position:relative;
    > iframe, > object, > embed, > img, >i, [carrusel] { height:100% !important; left:0; position:absolute; top:0; width:100% !important;}
    //x,y y/x*100 = res //4,3 (3/4)*100 = 75%
    &.p1x1{padding-bottom:100%;}
    &.p16x9  {padding-bottom: 56.25%;}
    &.p4x3  {padding-bottom: 75%;}
    &.pcirtuclo{border-radius: 100%;}
}
.vrespon { position: relative; height: 0; overflow: hidden; padding-bottom: 56.25%;
    a:not(.btn) {display: flex;}
    > * , img {position: absolute; top:0; left: 0; width: 100%; height: 100%;}
    //x,y y/x*100 = res //4,3 (3/4)*100 = 75%
    &.p16x9v  {padding-bottom: 177.777%;}
    &.p3x2v  {padding-bottom: 150%;}
    &.p4x3v  {padding-bottom: 133.333%;}
    &.p1x1  {padding-bottom: 100%;}
    &.p4x3  {padding-bottom: 75%;}
    &.p3x2  {padding-bottom: 66.666%;}
    &.p16x9  {padding-bottom: 56.25%;}
    &.p2x1  {padding-bottom: 50%;}
    &.p8x3  {padding-bottom: 37.5%;}
    &.p3x1  {padding-bottom: 33.33%;}
    &.p32x9 { padding-bottom:28.125% }   
    &.responsive{
        > *:nth-child(2){
            display: none;
        }
        @media @xmovil {
            padding-bottom: 100%!important;
            &.r16x9v  {padding-bottom: 177.777%!important;}
            &.r3x2v  {padding-bottom: 150%!important;}
            &.r4x3v  {padding-bottom: 133.333%!important;}
            &.r1x1  {padding-bottom: 100%!important;}
            &.r4x3  {padding-bottom: 75%!important;}
            &.r3x2  {padding-bottom: 66.666%!important;}
            &.r16x9  {padding-bottom: 56.25%!important;}
            &.r2x1  {padding-bottom: 50%!important;}
            &.r8x3  {padding-bottom: 37.5%!important;}
            &.r3x1  {padding-bottom: 33.33%!important;}
            &.r32x9 { padding-bottom:28.125%!important;}
            
            > *:nth-child(1){
                display: none
            }
            > *:nth-child(2){
                display: initial;
            }
        }
    }
}
.nocarrusel{height: 50px;}
.containercarrusel { height:0; overflow:hidden; padding-bottom:40%; padding-top:30px; position:relative;
    > .ajuste { height:100% !important; left:0; position:absolute; top:0; width:100% !important; }
    &.p10x3  {padding-bottom: 30%;}
    @media (max-width:576px) {padding-bottom: 75%;}
	&.carruselnormal{ padding-bottom: 27.5%;               @media (max-width: 576px) { display:none;  } }
	&.carruselmovil { padding-bottom: 100%;  display:none; @media (max-width: 576px) { display:block; } }
}	   
.banner-fade, .banner-fade2 {overflow: hidden; height: 100%; width: 100%;
    ul.bjqs { position:relative; list-style:none; padding:0; margin:0; overflow:hidden; height: 100%; width: 100%; /*display:none; */ 
        background-image: url(../imagenes/load.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: 50% 50%;
        li.bjqs-slide {position:absolute; display:none; height: 100%; width: 100%;
            &:nth-child(1){display: list-item;}
            > div {height: 100%; width: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;
                .t3();
                [icono]{padding: 50px 0px 0px 0px; .flex(); justify-content: center; 
                    align-items: center; color: @b; font-size: 5em; width: 100%; height: 100%;
                    i>{opacity: .80; cursor: pointer;&:hover{opacity: 1;}}
                }
                .marseguras {padding: 50px 50px 50px 50px; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center;
                    p {color: @ba; margin-left: 10px; font-weight:bold;}
                }
                a{width: 100%; height: 100%; display: flex;}
            }
            p.bjqs-caption {position:absolute; bottom:0; background-color: rgba(0,0,0,.5); margin: 0; width: 100%; text-align: right; padding: 0px 25px; color: rgba(255,255,255,.7); font-size: 1em;}
        }
    }
    ul.bjqs-controls.v-centered li {
        a {position:absolute; font-size: 0px; background-image: url(../imagenes/flechas.png); width: 27px; height: 27px; top: calc(~'50% - 13.5px'); opacity: .5;
            &:hover {opacity: 1;}
        }
        &.bjqs-next a {right:-25px; background-position: right}
        &.bjqs-prev a {left: -25px}        
    }
    ol.bjqs-markers {position: absolute; bottom: -20px; padding: 0px; margin: 0; display: flex; justify-content: center; align-content: center;
        li {list-style: none; display: inline-flex;
            a {background-color: #fff; width: 11px; height: 11px; margin-left: 2px; margin-right: 3px; border-radius: 5px; font-size: 0px; opacity: .5;
                &:hover {opacity: 1;}
            }
            &.active-marker a {opacity: .8!important;}            
        }
        &.h-centered{ width: 100%;}
    }
    &.slide:hover {
        li.bjqs-next a {animation: fnext; animation-duration: .5s; animation-fill-mode: forwards;}
        li.bjqs-prev a {animation: fprev; animation-duration: .5s; animation-fill-mode: forwards;}
        ol.bjqs-markers {animation: fbull; animation-duration: .5s; animation-fill-mode: forwards;}
    }
}
@keyframes fnext { from {right: -25px} to {right: 25px} }
@keyframes fprev { from {left: -25px} to {left: 25px} }
@keyframes fbull { from {bottom: -20px} to {bottom: 30px} }
.imagenplay {cursor: pointer; &:hover {opacity: .5} }
/*ACTIVO*/
section.activo{ > a {opacity: .5 !important; background-color: spin(@a,10%);} > span {background-color: fade(@b,25%); height: 5px !important; opacity: 1 !important;} }
span.subactivo{ background-color: fade(@b,25%); height: 5px !important; opacity: 1 !important; }
footer section.activo > a { background-color: transparent; color: @v; opacity: 1 !important;}
/*VENTANA POP*/
.ventanav {position: fixed; z-index: 9999999; top: 0; left: 0; bottom: 0; right: 0; background-color: fade(darken(@a,37.5%),80%); color: @b; font-weight: bold; padding: 25px; font-size: 1.5em; display: none;
    .contenidov {height: 100%; width: 100%;
        .barrav {border-bottom: solid 1px @b; display: flex; justify-content: flex-end; background-color: fade(@a,50);
            .botonv {width: 30px; height: 30px; display: flex; justify-content: center; align-content: center; align-items: center;
                &:hover {background-color: fade(@b,50%); cursor: pointer;}
            }
        }
        .convidev {width: 100%; height: calc(~'100% - 30px'); background-image: url(../imagenes/load.svg); background-repeat: no-repeat; background-position: center; background-size: 150px 150px; position: relative;
            .videov {width: 100%; height: 100%;}
            >div{ .flex(); justify-content: center; align-items: center; width: 100%; height: 100%; }
        }
    }
}
/*Previw nota*/
[tiponota]{ .t1();
    text-decoration: none; display: flex; flex-direction: column; background-image: url(../imagenes/arte-azul.svg); background-size: 20px;
    background-repeat: no-repeat; background-position: bottom right;
    /*padding-bottom: 25px;*/
    /*margin-bottom: 20px;*/
    height: 100%;
    img {width: 100%; .t1();}
    h4 {margin-top: 10px; margin-bottom: 0px; min-height: 40px; display: flex; justify-content: center; align-items: center; align-content: center; text-align: center; .t1();}
    p {margin: 0px; color: @g; margin-top: 10px; text-align: center;}
    &:hover{
        img {filter: saturate(1.25);}
        h4 {color: darken(@v,5%);}
        background-image: url(../imagenes/arte-verde.svg);
    }
}
span[tiponota] {background-image:none; padding-bottom: 0px; margin-bottom: 0px;
    &:hover{
        background-image:none;
    }
}
[notagris] {background-color: fade(@g,15%);
    &:hover{background-color: fade(@a,5%);}
}
[notablanca] {
    background-color: fade(@b,40%);
    &:hover{background-color: fade(@g,15%);}
}
/**/
    [cuadro]{display: flex; width: 100%; padding: 15px; text-align: center; justify-content: center; align-items: center;}
    [ca]{background-color: fade(@a,20%);}
    [cg]{background-color: fade(@g,20%);}
    [centro] {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; flex-direction: column;}
    [logos-texto] {display: flex; width: 100%; height: 100%; flex-direction: column; justify-content: space-between;}
/*Cuerpo*/
body {
    header{ .t3; top: 0; z-index: 9999; left: 0; right: 0; background-color: @b;
        div:nth-child(1) { height: 100px;
            div {display: flex; justify-content: space-between; height: 100%; align-items: center;
               //@media (max-width:576px){justify-content: center}
                section {display: flex; 
                    article{ display: flex; justify-content: center; align-items: center;
                        &:not(:nth-child(1)){border-left: .5px solid fade(@g, 75%);}
                        a {display:flex;}
                        h1 {margin: 0;}
                    }
                    &:nth-child(1) {
                        article {flex-direction: column;
                            &:nth-child(1){padding-right: 10px;
                                @media (max-width:992px){padding-right: 0px;}
                            }
                            &:nth-child(2){padding-left: 10px; align-items: flex-start;
                                @media (max-width:992px){padding-top: 10px; padding-left: 0px; margin-top: 10px;}
                                h1 {color: @g;
                                    &:nth-child(2){font-weight: lighter; font-size: 1em;}
                                    @media (max-width:992px){
                                        font-size: 1.1em;
                                        &:nth-child(2){display: none;}
                                    }
                                    @media (max-width:576px){
                                        font-size: .85em;
                                        &.ttt{
                                            font-size: .75em;
                                            text-align:center;
                                        }
                                        &:nth-child(2){display: none;}
                                    }
                                    @media (max-width:290px){
                                        font-size: .7em;
                                        &:nth-child(2){display: none;}
                                    }
                                }
                            }
                            img {height: 40px; width: 200px;
                                @media (max-width:768px){
                                    height: 40px; width: 180px;
                                }
                                &.abp { width: 250px; height: 50px;
                                    @media (max-width:768px){
                                        width: 250px; height: 50px;
                                    }
                                }
                            }
                            @media (max-width:992px){
                                &:not(:nth-child(1)){border-top: .5px solid fade(@g, 75%); border-left: 0;}
                            }
                        }
                        @media (max-width:992px){flex-direction: column}
                    }
                    &:nth-child(2) {
                        article{height: 50px; width: 50px;
                            img {width: 30px; height: 30px; opacity: .5;
                                &:hover {opacity: 1}
                            }
                            @media (max-width:992px){
                                width: 45px;
                            }
                            &.adph{
                                width: 150px; 
                                img {width: 150px; height: 50px; opacity: .9;}
                            }
                        }
                        @media (max-width:576px){display: none}
                    }
                    &:nth-child(3) {display: none;
                        @media (max-width:576px){display: flex;}
                        > div {width: 50px; height: 50px; display: flex; flex-wrap: wrap; justify-content: center;
                            div {background-color: fade(@g,40%); width: 44px; height: 14.2%; border-radius: 10px;}
                            &:hover {background-color: fade(@a,15%); border-radius: 10px; cursor: pointer;
                                > div {background-color: fade(@g,60%);}
                            }
                            &.mactivo {background-color: fade(@a,15%); border-radius: 10px; > div {background-color: fade(@g,60%);}}
                        }
                    }
                }
            }
            @media (max-width:576px){padding-right:5px;padding-left:5px;}
        }
        div:nth-child(2){
            height: 50px; background-color: @a;
            nav{ height: 50px;
                div { display: flex; width: 100%; height: 50px;
                    > section {display: flex; flex-direction: column; margin-top: 5px; flex: auto; 
                        max-width: -webkit-fit-content;
                        max-width: -moz-fit-content;
                        max-width: fit-content;
                        min-width: 100px;
                        height: 45px; position: relative;
                        @media (max-width:576px){height: 40px;}
                        &:not(:nth-child(1)) > a{border-left: 1px solid fade(@b, 50%);}
                        &:hover{
                            background-color: spin(@a,5%);
                            > span{ background-color: fade(@b,50%); height: 5px; opacity: 1;}
                            > aside {display: initial;}
                            > a{opacity: 1}
                        }
                        a{ display: flex; height: 40px; justify-content: center; align-items: center; text-align: center;
                            font-weight: bold; color: @b; text-decoration: none; padding: 5px 10px; opacity: .75;
                            img {width: 100%; height: 100%}
                            @media (max-width:992px){font-size: .9em;}
                            @media (max-width:768px){font-size: .8em;}
                            @media (max-width:576px){font-size: 1em; height: 30px;}
                        }
                        aside {position: absolute; top: 100%; background-color: @a; z-index: 9999; display: none;
                            section {display: flex; flex-direction: column; margin-top: 5px; flex: auto; max-width: 140px; height: 45px;
                                a { display: flex; height: 40px; justify-content: center; align-items: center; text-align: center; font-weight: bold; color: @b; text-decoration: none; padding: 5px; opacity: .75;
                                    img {width: 100%; height: 100%}
                                }
                                span{height: 0px; width: 100%; opacity: 0; display:flex;}
                                &:hover{
                                    > span{ background-color: fade(@b,50%); height: 5px; opacity: 1;}
                                    > a {opacity: 1}
                                }
                            }
                        }
                        span{height: 0px; width: 100%; opacity: 0; display:flex;}
                        @media (max-width:768px){&:nth-last-child(1){display: none;}}
                        @media (max-width:576px){
                            max-width:inherit; border: 0px;
                            margin-top: 0px; padding-top: 5px;
                            &:not(:nth-child(1)) {border-top: 1px solid fade(@b, 50%); 
                                a{border-left: 0px solid fade(@b, 50%);}
                            }
                            &:nth-last-child(1){display: flex;}
                        }
                        &:nth-last-child(2) {
                            @media (max-width:768px) {display: none;}
                            @media (max-width:576px){display: flex;}
                        }
                        &:nth-last-child(1) {
                            display: none;
                            flex-direction: row;
                            justify-content: space-between;
                            article {display: flex; 
                                img {filter:brightness(200%);}
                            }
                            @media (max-width:576px){display: flex;}
                        }
                        @media (max-width:576px){ position: initial; display: initial; height: auto; padding-top: 0px;
                            aside {position: initial; display: initial; width: 100%; font-size: .85em;
                                section {max-width: initial; height: auto; margin-top: 0px;
                                    a { height: auto; text-align: right; justify-content: center; font-weight: normal;}
                                    span {display: none;}
                                    &:hover { 
                                        a {width: initial!important;}
                                    }
                                }
                            }
                            span {display: none;}
                        }
                    }
                    @media (max-width:576px){ 
                        width: initial;
                        height: initial;
                        flex-direction: column;
                    }
                }
                @media (max-width:576px){
                    background-color: @a;
                    position: fixed;
                    z-index: 999999;
                    right: -250px;
                    width: 250px;
                    height: initial;
                    margin-top: 10px;
                    overflow-y: auto;
                    max-height: calc( ~'100% - 60px');
                }
            }
            @media (max-width:576px){height: 10px;}
        }
    }
    > section, > div > section {padding-top: 20px; padding-bottom: 20px;
        h1, h2, h3, h4, h5 {color: @a;}
        h1 {font-size: 1.75em;}
        > article{ >div { >div { 
            >h3, >h1{text-align: center;}
            >h1 {margin-top: 5px; margin-bottom: 25px;}
            //cuerpo
            [numeralia] {width: 100%;
                img {width: 100%; height: 125px}
                p {text-align: center; font-weight: bold;}
				 @media @xmovil { 
				 	.flex(); padding: 0em 0em 2em 0em;
					p {flex:1 2 100%; .flex(); align-items: center; margin: 0em 1em; justify-content:center; flex-direction: column; }
                	img {flex:2 1 50%;}
				}
            }
            //Logos
        }
            [logos-patrocinadores] {display: flex; flex-wrap: wrap; width: 100%; justify-content: center; align-content: center; align-items: center;
                img {padding: 15px; display: flex; justify-content: center; align-items: center; min-width: 100px;}
            }
        }
        }
    }
    [alto25]{min-height: 25%; display: flex; justify-content: center; align-items: center;}
    [verde] {background-color: @v; /*background-image: url(../imagenes/fondo-imagen.svg);*/ background-position: left;
        a:hover{color: @a}
    }
    [azul] {background-color: @a; /*background-image: url(../imagenes/fondo-imagen2.svg);*/ background-position: right; 
        a:hover{color: @v}
    }
    [gris] {background-color: fade(@g,10%);}
    [verde], [azul] {color: @b; text-shadow: 0px 0px 5px fade(@n,25%); background-repeat: no-repeat; background-size: 500px;
        h3, a {color: @b}
    }
    footer { background-color: @g2; color: fade(@b,75%); padding-top: 15px; padding-bottom: 30px; .t1();
        form { max-width: 360px; width: 100%; display: flex; flex-direction: column;
        label {margin-bottom: .5em; display: flex;}
        input, textarea {
            color: fade(@b,75%);
            background-color: fade(@b,25%);
            border: 0px solid;
            border-radius: 4px;
            width: 100%;
            height: 25px;
            margin-bottom: .5em;
            padding-left: 5px; padding-right: 5px;
            &:hover {background-color: fade(@b,50%);}
            &:focus {background-color: fade(@b,80%); color: @g2;}
            &[type="submit"]{
                width: 75px; align-self: flex-end;
            }
        }
        textarea { height: 100px; padding: 5px; max-width: 100%; }
        }
        #iconos-redes {display: flex; align-items: center; 
            @media (max-width:768px){justify-content: center!important;}

            a {
                img {width: 25px; height: 25px; opacity: .6; margin-left: 7px; margin-right: 7px;}
                &[title="Robotix"] {
                    img {width: 150px;height: 50px;}
                }
                &:hover img {opacity: .9}
            }
            
        }
        section { margin-bottom: 5px;
            @media (max-width:768px){text-align: center;}
            a { color: fade(@b,75%); text-decoration: none; 
                &:hover{color: fade(@b,100%);}
            }
        }
        h2, p {
            //text-align: center;
            margin: 0px;}
        h2, h3 {margin-bottom: 5px; margin-top: 25px}
        h3{
            @media (max-width:768px){text-align: center;}
        }
    }
}
/*NOTICIAS*/
    [notas] {.row > div {margin-top: 20px;} }
    .page-numbers {color: @a; text-decoration: none;
        &:hover{color: @v;}
        &.current {color: @g}
    }
    .prev.page-numbers:after {content: " |"; color: @g2; font-weight:lighter}
    .next.page-numbers:before {content: "| "; color: @g2; font-weight:lighter}
    #caja_comparte {display: flex; justify-content: center; a {display: flex; margin: 5px;} }
    .texpost h1 {margin: 0px;}
    .date {font-style: italic; margin-top: 0px; text-align: right;}
//////////////////////
.btn { width: 100%; max-width: 300px; display: inline-block; background-color: @a; color: @b; padding: .5em; border-radius: 1em; text-align: center; cursor: pointer; border: none;
	&:hover { background-color: @v; color: @b; }
    &.morado{
        background-color: #822D91;
        &:hover { background-color: #D50A7C; }
    }
    &.moradov{
        background-color: #D50A7C;
        &:hover { background-color: #822D91; }
    }    
    &.naranja{
        background-color: #FFB200;
        &:hover { background-color: #FF6712; }
    }
    &.naranjav{
        background-color: #FF6712;
        &:hover { background-color: #FFB200; }
    }
    &.mixtov{
        background-color: @v;
        &:hover { background-color: @ba; }
    }
    &.danger{
        background-color: @g;
        &:hover { background-color: @rojo;}
    }
}
[flecha] {width: 30px; height: 30px; margin-bottom: 15px; background-image: url(../imagenes/ico-subir2.svg); background-size:cover; background-position: 0px 0px; 
    .tanc (@x:1s);
	&.arriba{ .rotar(0);}
	&.abajo{ .rotar(-180);}
	&.derecha{ .rotar(90);}
	&.izquierda{ .rotar(-90);}
	&:hover{ background-position: 0px -36px;}
}
input, textarea, select, button {font-size: 1em;}
@keyframes click-wave {
    0% { height: 15px; width: 15px; opacity: 0.35; position: relative; }
    100% { height: 100px; width: 100px; margin-left: -40px; margin-top: -40px; opacity: 0;}
}
.option-input { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; position: relative; top: .25em; right: 0; bottom: 0; left: 0; height: 20px; width: 20px; transition: all 0.15s ease-out 0s; background: #cbd1d8; border: none; color: #fff; cursor: pointer; display: inline-block; margin-right: 0.5rem; outline: none; position: relative; z-index: 1000; }
.option-input.redondo{border-radius: 20px}
.option-input:hover { background: #9faab7; }
.option-input:checked { background: #00CCDD; }
.option-input:checked::before { height: 20px; width: 20px; position: absolute; content: '✔'; display: inline-block; font-size: 13.33333px; text-align: center; line-height: 20px; }
.option-input:checked::after { -webkit-animation: click-wave 0.65s; -moz-animation: click-wave 0.65s; animation: click-wave 0.65s; background: #00CCDD; content: ''; display: block; position: relative; z-index: 100;}
.option-input.radio { border-radius: 50%; }
.option-input.radio::after { border-radius: 50%; }
.option-input:focus { outline: 0px auto -webkit-focus-ring-color!important; outline-offset: -0px!important; }
/*TABLE*/
.tabla-selec-radius{
	display: none;
	&.tabla-activa{display: table}
}
table.responsivo {
	.btn{font-size: .9em;}
	.ps{width: 100px; background-color: #999999; font-size: .9em; font-weight: normal; //@g
        border: 1px solid @v;
		&:hover{background-color: @v;}
	}
	border-collapse: collapse; 
	margin:1em auto;
	tr { background: #e3e3e3; }
	th { 
		background: #666666; 
		
		color: white; 
		font-weight: bold; 
		text-align: center!important;
		span {
			font-weight: normal;
			font-size: .8em;
		}
	}
	td, th { 
		padding: 10px; 
		border: .5px solid #999999; 
		text-align: left; 
		font-size: 1.1em;
        .tablaceldas{text-align: center;}
		[datahiden] {display: none}
	}
	@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {
		width: 100%; 		
		&, thead, tbody, th, td, tr { 
			display: block; 
		}
		[autohide] { 
			display: none;
		}
        [club]{background-color:#999999;color:#ffffff; }
		tr { background-color: #e3e3e3; border: 0px solid #999999; }
		td { border: 0px solid #999999;
            .ps{ border: 1px solid @v; }
			[datahiden] {display:initial}
            &[datahiden2] {display:none}
            &[tdempy]{display: none}
            .tablaceldas{.flex(); justify-content: space-around; flex-wrap: wrap;}
		}
	}

}
.cerrarmodaltop{
    position: absolute;
	background-color: transparent!important;
	top:-22.5px;
    right: 10px;
	padding: 0px!important;
	.ui.cancel.button{
		background-color: @a;
		width: 45px;
		height: 45px;
		padding: 0px!important;
		border-radius: 45px!important;
		.fleximportant();
		justify-content: center!important;
		align-items: center!important;
		font-size: 2em;
		color: @b;
		&:hover{
			background-color: @v;
		}
	}
}
.aboton,.abutton{
    display: inline-block;
    height: 50px;
    padding: 0 20px;
    border: 1px solid #009ad8; /*#373737*/
    border-radius: 0;
    margin: 0;
    line-height: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    text-decoration: none !important;
    text-align: center;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    color: #009ad8 !important; /*#373737 !important;*/
    background-color: transparent;
    -webkit-transition-timing-function: cubic-bezier(0.43, 0.68, 0.8, 1.01);
    -o-transition-timing-function: cubic-bezier(0.43, 0.68, 0.8, 1.01);
    transition-timing-function: cubic-bezier(0.43, 0.68, 0.8, 1.01);
    -webkit-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
    min-width: 190px;
    cursor: pointer;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);		
    &:hover{
        background-color: fade(#009ad8,20%);
    }
    &.averde{
        background-color: fade(#AFCA0B,100%);
        border: 1px solid #AFCA0B; /*#373737*/
        color: #fff !important; /*#373737 !important;*/
        font-size: 1.5em;
        letter-spacing:0em;
        border-radius:.3em;
        text-transform:none;
        &:hover{
            background-color: fade(#68AA00,100%);
            color: #fff !important; /*#373737 !important;*/
            border: 1px solid fade(#68AA00,100%); /*#373737*/
        }
    }
}
[verde], [azul]{
    .aboton{
        border: 1px solid #ffffff;
        color: #ffffff !important;
        &:hover{
            background-color: fade(#ffffff,20%);
        }
    }
}
.pagointeractivo{ position: relative; }
.masparapago{background-color: #eaeaea;position: absolute;top: 0px;bottom: 40px;left: 0px;right: 0px;z-index: 1000;}

.noblock {border-radius: 10px;}
.pulse:not(.noblock) {display: block; cursor: pointer; }
.pulse:not(.disabled), .pulse:before , .pulse:after { box-shadow: 0 0 0 fade(@v,50%); animation: pulse 2s infinite; }
.pulse:hover, .pulse:hover:before, .pulse:hover:after  {animation: none;}
@-webkit-keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 fade(@v,50%)!important;
        -webkit-box-shadow: 0 0 0 0 fade(@v,50%)!important;
        -moz-box-shadow: 0 0 0 0 fade(@v,50%)!important;  
    }
    70% { 
        box-shadow: 0 0 0 10px fade(@v,50%)!important;
        -webkit-box-shadow: 0 0 0 10px fade(@v,50%)!important;
        -moz-box-shadow: 0 0 0 10px fade(@v,50%)!important;  
    }
    100% { 
        box-shadow: 0 0 0 0 fade(@v,50%)!important;
        -webkit-box-shadow: 0 0 0 0 fade(@v,50%)!important;
        -moz-box-shadow: 0 0 0 0 fade(@v,50%)!important;
    }
}
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 fade(@v,50%)!important;
        -webkit-box-shadow: 0 0 0 0 fade(@v,50%)!important;
        -moz-box-shadow: 0 0 0 0 fade(@v,50%)!important;
    }
    70% { 
        box-shadow: 0 0 0 10px fade(@v,50%)!important;
        -webkit-box-shadow: 0 0 0 10px fade(@v,50%)!important;
        -moz-box-shadow: 0 0 0 10px fade(@v,50%)!important;
    }
    100% { 
        box-shadow: 0 0 0 0 fade(@v,50%)!important;
        -webkit-box-shadow: 0 0 0 0 fade(@v,50%)!important;
        -moz-box-shadow: 0 0 0 0 fade(@v,50%)!important;
    }
}
////NEWS CSS
[centrado]{justify-content: center; align-items: center; .flex(); 
    >.btn:not(:nth-child(1)){margin-left: 15px;} 
    &[horizontal]{flex-direction:column;>*,>.btn{margin: 0px}}
}
[center]{justify-content: center; align-items: center; .flex(); }
[hopheaderleog]{
    position: relative;
    >svg{
        position: absolute;
        z-index: 100;
    }
}
.max300{
    justify-content: center; align-items: center; .flex();
    >div{
        width: 250px;
        height: 250px;
    }
}
[txtzoom]{
    overflow: initial;
    [txtfondo]{
        .tanc();
        [data-color]{
            background-color: fade(@a,75%)
        }
        [data-color="morado"]{
            background-color: fade(@colorpurple,75%);
        }
        [data-color="rojo"]{
            background-color: fade(red,75%);
        }
    }
    [txtpie]{
        .flex();
        justify-content: center;
        align-items: center;
        color: @b;
        font-weight: bold;
        text-align: center;
        font-size: 1.2em;
        flex-direction: column;
        opacity: 1;
        padding: 0.5em;
        //text-shadow: 0px 1px 2px rgba(0,0,0,.4);
    }
    [txtpie2]{
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: @b;
        font-weight:normal;
        text-align: center;
        font-size: 1em;
        display: none;
        a{font-weight: bold; font-size: 1.2em;}
        padding: 0.5em;
        //text-shadow: 0px 1px 2px rgba(0,0,0,.4);
    }
    &:hover{
        [txtfondo]{
            -webkit-transform: scale(1.1);
            -ms-transform: scale(1.1);
            -o-transform: scale(1.1);
            transform: scale(1.1);
            img{
                -webkit-filter: brightness(0.90);
                filter: brightness(0.90);
            }
        }
        [txtpie]{
            display: none;
        }
        [txtpie2]{
            .flex();
        }
    }
}
.iconosredes {display: flex; align-items: center; justify-content: center;
    a {
        img {width: 25px; height: 25px; opacity: .6; margin-left: 7px; margin-right: 7px;
            -webkit-filter: invert(75%);
            filter: invert(75%);
        }
        &[title="Robotix"] {
            img {width: 150px; height: 50px;}
        }
        &:hover img {opacity: .9}
    }
}


        //ACORDION
		.acordion {
			.flex(); align-items: center; width: 100%; cursor: pointer; border-radius: 1em;
			//border-bottom:1px solid fade(@n,25%);
			.tanc(.25s);
			h3 {margin:0px; .tanc(.25s);}
			.ad-triangulo,.ad-triangulo_ent{
				margin-right: .5em;
				margin-left: .75em;
				width: 0; 
				height: 0; 
				border-top: 7.5px solid transparent;
				border-right: 0px solid transparent;
				border-bottom: 7.5px solid transparent;
				border-left: 15px solid @a;
				.tanc(.25s);
			}
			&:hover{
				background-color: @a;
				h3{color: @b!important; }
				.ad-triangulo,.ad-triangulo_ent{
					border-top: 15px solid @v;
					border-right: 7.5px solid transparent;
                    border-bottom: 0px solid transparent;
                    border-left: 7.5px solid transparent;
                }
			}
			&.ad-activo,&.ad-activox {
				background-color: @a;
				h3{color: @b!important; }
				.ad-triangulo,.ad-triangulo_ent{
					border-top: 15px solid @b;
					border-right: 7.5px solid transparent;
                    border-bottom: 0px solid transparent;
                    border-left: 7.5px solid transparent;
                }
                &.ad-activo:hover,&.ad-activox:hover{
                    background-color: @a;
                    .ad-triangulo,.ad-triangulo_ent{
						border-top: 7.5px solid transparent;
						border-right: 0px solid transparent;
						border-bottom: 7.5px solid transparent;
						border-left: 15px solid @v;
                    }
                }
			}
		}
		.acordion-contenido,.acordion-contenidox{
            padding: 1em 0em; 
            //border-bottom:1px solid fade(@n,25%);
        }
        .btnsigok {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;
                -webkit-box-align: end;
                    -ms-flex-align: end;
                        align-items: flex-end;
        }
.ttt{color: @a!important; font-weight: normal!important;}

.spefil {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    >p{margin: 0px 1em -.2em 0em;}
}

.abtn{
    display: inline-block;
    height: 50px;
    padding: 0 20px;
    border: 1px solid #009ad8; /*#373737*/
    border-radius: 0;
    margin: 0;
    line-height: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    text-decoration: none !important;
    text-align: center;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    color: #009ad8 !important; /*#373737 !important;*/
    background-color: transparent;
    -webkit-transition-timing-function: cubic-bezier(0.43, 0.68, 0.8, 1.01);
    -o-transition-timing-function: cubic-bezier(0.43, 0.68, 0.8, 1.01);
    transition-timing-function: cubic-bezier(0.43, 0.68, 0.8, 1.01);
    -webkit-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
    min-width: 190px;
    cursor: pointer;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    &:hover{
        background-color: fade(#009ad8,20%);
    }
}
[verde], [azul], [txtzoom]{
    .abtn{
        border: 1px solid #ffffff; /*#373737*/
        color: #ffffff !important; /*#373737 !important;*/
        &:hover{
            background-color: fade(#ffffff,20%);
        }
    }
}
#data_menu{
    aside { padding: .5em .5em;}
}
.gbo {
    color: @g2;
    &:hover{
        opacity: .75;
    }
}
///////////////////////////////////
// Variables de paleta y configuración
@primary-color: @a;         // Azul primario #00AADD
@accent-color: @morado;     // Morado para interacciones
@text-main: @n;            // Negro suave #222222
@text-secondary: @g;       // Gris #666666
@border-color: @g3;        // Gris claro #dddddd
@bg-input: @colorgray;     // Fondo grisáceo #f0f0ef
@bg-card: @b;              // Blanco #ffffff
@checkbox-size: 20px;

#comments {
    color: @text-main;
    .comments-title, .comment-reply-title {
        //font-size: 1.6rem;
        //font-weight: 600;
        //margin-bottom: 1.5rem;
        color: @g;
        border-left: 5px solid @primary-color;
        padding-left: 15px;
    }
}
.comment-list {
    list-style: none;
    padding: 0;
    .comment-body {
        background: @bg-card;
        padding: 24px;
        margin-bottom: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        position: relative;
        display: flex;
        flex-direction: column;
        &:hover {
            box-shadow: 0 5px 15px rgba(0,0,0,0.12);
        }
        .comment-author {
            display: flex;
            align-items: center;
            margin-bottom: 4px;
            img {
                border-radius: 50%;
                border: 2px solid @primary-color;
                margin-right: 12px;
                width: 45px; // Tamaño estándar Material
                height: 45px;
            }
            .fn { 
                font-style: normal; 
                font-weight: bold; 
                color: @primary-color;
                font-size: 1rem;
            }
            .says { display: none; } // Limpieza visual
        }
        .comment-awaiting-moderation{
            font-size: .7em;
            text-align: right;
            background-color: aliceblue;
        }
        .comment-meta,.commentmetadata {
            font-size: 0.75em!important; 
            color: @g;
            order: 2; // Asegura que esté bajo el autor
            text-align: right;
            margin: -16px 0 0 0;
            a { 
                color: @g; 
                text-decoration: none; 
                &:hover { color: @primary-color; } 
            }
        }
        p {
            margin: 0 0 5px 0;
            color: @g2;
            order: 3;
        }
        .reply {
            margin-top: 8px;
            order: 4;
            display: flex;
            justify-content: flex-end; // Lado izquierdo            
            a.comment-reply-link {
                background-color: @primary-color;
                color: @b;
                text-transform: uppercase;
                font-size: 0.85rem;
                font-weight: 700;
                letter-spacing: 0.5px;
                text-decoration: none;
                padding: 8px 12px;
                border-radius: 4px;
                transition: background 0.3s ease;
                margin-left: -12px; // Alineación óptica con el texto
                &:hover {
                    background-color: fade(@primary-color, 85%);
                    text-decoration: none;
                }
                &:active {
                    background-color: fade(@primary-color, 75%);
                }
            }
        }
    }
}
#respond {
    background: fade(@bg-card,50%);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    #cancel-comment-reply-link{
        background-color: @v;
        color: #ffffff;
        text-transform: uppercase;
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-decoration: none;
        padding: 8px 12px;
        border-radius: 4px;
        transition: background 0.3s ease;
            &:hover {
                background-color: @ba2;
                box-shadow: 0 6px 12px rgba(0,0,0,0.2);
                transform: translateY(-1px);
            }
    }
    #commentform {
        .flex();
        flex-wrap: wrap;
        justify-content: space-between;
        // Campos de Nombre y Correo
        .comment-form-author, 
        .comment-form-email {
            width: 48%; // Ocupan casi la mitad cada uno
            @media (max-width: 600px) {
                width: 100%; // En móviles se apilan uno sobre otro
            }
            order: 1
        }
        .comment-form-comment{
            order: 2
        }
        .comment-form-comment,
        .g-recaptcha,
        .form-submit {
            width: 100%;
            clear: both;
        }
        .form-submit{
            order: 4
        }
        >p{margin: 0;}
        input[type="text"], 
        input[type="email"], 
        textarea {
            width: 100%;
            border: none;
            border-bottom: 2px solid @border-color;
            background-color: @bg-input;
            padding: 12px 15px;
            font-size: 1rem;
            border-radius: 4px 4px 0 0;
            box-sizing: border-box;
            transition: all 0.3s ease;
            &:focus {
                outline: none;
                background-color: lighten(@primary-color, 45%);
                border-bottom-color: @primary-color;
            }
        }
        label{
            color: @g;
            margin: 0;
            .required{
                color: @a;
            }
        }
        .form-submit{ .flex(); justify-content: flex-end }
        #submit {
            background-color: @primary-color;
            color: @b;
            border: none;
            padding: 12px 28px;
            border-radius: 4px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            box-shadow: 0 3px 6px rgba(0,0,0,0.16);
            transition: all 0.2s ease;
            &:hover {
                background-color: @ba2;
                box-shadow: 0 6px 12px rgba(0,0,0,0.2);
                transform: translateY(-1px);
            }
        }
        .g-recaptcha{ .flex(); justify-content: flex-end; order: 3 }
    }
}
// Checkbox de Cookies personalizado
.comment-form-cookies-consent {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    font-size: 0.9rem;
    color: @g;
    input[type="checkbox"] {
        position: relative;
        width: @checkbox-size;
        height: @checkbox-size;
        margin-right: 12px;
        appearance: none;
        -webkit-appearance: none;
        background: @b;
        border: 2px solid @g3;
        border-radius: 2px;
        transition: all 0.2s ease;
        outline: none;
        display: inline-grid;
        place-content: center;
        &::before {
            content: "";
            width: 10px;
            height: 10px;
            transform: scale(0);
            transition: 120ms transform ease-in-out;
            box-shadow: inset 1em 1em @b;
            clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        }
        &:checked {
            background-color: @primary-color;
            border-color: @primary-color;
            &::before { transform: scale(1); }
        }
    }
    label { cursor: pointer; user-select: none; }
}
// Hilos de comentarios
.children {
    margin-left: 30px;
    border-left: 2px solid @g3;
    padding-left: 15px;
    list-style: none;
    li{
        
    }
}