.navbar{
  position:relative;
  top:0;
  left:0;
  width:100%;
  z-index:20;
  transition:background .3s ease, box-shadow .3s ease;
}
.navbar-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1200px;
  margin:0 auto;
  padding:var(--espacio-2xsmall)var(--espacio-medium);
  box-sizing:border-box;
}
.navbar-logo{
  color:#fff;
  font-size:22px;
  font-weight:bold;
  text-decoration:none;
  letter-spacing:2px;
  white-space:nowrap;
}
.navbar-menu{
  display:flex;
  align-items:center;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
}
.navbar-menu li a{
  color:#fff;
  text-decoration:none;
  font-size:15px;
  font-weight:500;
  transition:opacity .2s ease;
}
.navbar-menu li a:hover{
  color:#ffffffa6!important;
}
.navbar-toggle{
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:26px;
  height:19px;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:0;
  z-index:21;
}
.navbar-toggle span{
  display:block;
  width:100%;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.navbar.navbar-fixed{
  position:fixed;
  top:0;
  backdrop-filter:blur(6px);
  box-shadow:0 2px 12px rgba(0,0,0,.25);
  animation:navbarAparece .3s ease;
}
@keyframes navbarAparece{
  from{ transform:translateY(-100%); }
  to{ transform:translateY(0); }
}

/* Responsive: tablets y celulares */
@media (max-width:850px){
  .navbar-toggle{
      display:flex;
  }
  .navbar-menu{
      position:absolute;
      top:100%;
      left:0;
      width:100%;
      flex-direction:column;
      align-items:stretch;
      gap:0;
      background:rgba(10,10,10,.96);
      max-height:0;
      overflow:hidden;
      transition:max-height .35s ease;
  }
  .navbar-menu.navbar-menu-open{
      max-height:400px;
  }
  .navbar-menu li{
      border-top:1px solid rgba(255,255,255,.08);
  }
  .navbar-menu li a{
      display:block;
      padding:14px 24px;
  }
  .navbar-toggle.navbar-toggle-open span:nth-child(1){
      transform:translateY(8.5px) rotate(45deg);
  }
  .navbar-toggle.navbar-toggle-open span:nth-child(2){
      opacity:0;
  }
  .navbar-toggle.navbar-toggle-open span:nth-child(3){
      transform:translateY(-8.5px) rotate(-45deg);
  }
}

@media (max-width:420px){
  .navbar-container{
      padding:14px 16px;
  }
  .navbar-logo{
      font-size:18px;
  }
}
.degradado {
height: 100%;
width: 100%;
}
.degradado::before {
content: "";
width: 100%;
height: 600px;
position: inherit;
bottom: 0;
background: -webkit-linear-gradient(180deg, rgba(231, 235, 238, 0) 46%, rgba(231, 235, 238, 1) 96%);
background: -moz-linear-gradient(180deg, rgba(231, 235, 238, 0) 46%, rgba(231, 235, 238, 1) 96%);
background: linear-gradient(180deg, rgba(231, 235, 238, 0) 46%, rgba(231, 235, 238, 1) 96%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#E7EBEEDB", GradientType=0);
}
.degradado::after {
content: "";
width: 100%;
height: 100%;
position: inherit;
z-index: 11;
left:0;
background: -webkit-linear-gradient(270deg, rgba(255, 255, 255, 0) 46%, rgba(231, 235, 238, 1) 96%);
background: -moz-linear-gradient(270deg, rgba(255, 255, 255, 0) 46%, rgba(231, 235, 238, 1) 96%);
background: linear-gradient(270deg, rgba(255, 255, 255, 0) 46%, rgba(231, 235, 238, 1) 96%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#E7EBEEDB", GradientType=0);
}
.parallax span ul{
display: flex;
justify-content: center;
height: 100%;
align-items: center;
}
.parallax span ul li{
margin: var(--espacio-medium) 0;
}
.parallax span ul::before{
content: "";
background: #ffffff;
width: 47%;
height: 50%;
left: 0;
position: absolute;
filter: blur(181px);
z-index: -1;
}
.caja{
background: var(--col-blanco);
padding: var(--espacio-2xlarge);
border-radius: var(--borderradius-small);
margin: var(--borderradius-3xlarge) 0;
}
.line-botton{
border-bottom: 1px solid var(--col-gris20);
padding-bottom: var(--espacio-medium);
}
.especial{
background: var(--col-blanco);
padding: var(--espacio-3xsmall);
height: 100%;
display: grid;
align-items: center;
align-content: center;
}
.titular-especial{
width: 100%;
text-align: center;
padding: 15px 10px;
background: var(--col-noche);
color: var(--col-blanco);
}
.cinta-descarga {
position: absolute;
right: -66px;
bottom: 48px;
width: 260px;
padding: 5px 0;
background: var(--col-rojo);
color: var(--col-blanco);
text-align: center;
transform: rotate(-45deg);
transform-origin: center;
z-index: 1;
}
.cinta-descarga span {
display: block;
}
.texto p{
margin-bottom: var(--espacio-small);
}
.texto .titular{
margin-bottom: var(--espacio-small);
}
/* MODAL ///////////////////////////////////////// */
.modal {
display: none;
position: fixed;
top: 10%;
left: 0;
right: 0;
margin: auto;
background-color: var(--col-blanco);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
z-index: 1003;
}
.modal-overlay {
position: fixed;
inset: 0;
width: 100% !important;
height: 100% !important;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1002;
opacity: 0.5;
display: none;
}
.modal-content {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--espacio-large);
}
/* //////////// LINEAS SEPARADORAS //////////// */
.line-h {
position: relative;
}
.line-h:not(:last-child)::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: calc(60px / -2);
height: 1px;
background: var(--col-gris20);
}
.line-vd {
position: relative;
min-width: 0;
}
.line-vd::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: calc(60px / -2);
width: 1px;
background: var(--col-gris20);
}
.line-vd-3xlarge{
position: relative;
min-width: 0;
}
.line-vd-3xlarge::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: calc(60px / -2);
width: 1px;
background: var(--col-gris20);
}
.line-vi {
position: relative;
min-width: 0;
}
.line-vi::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(60px / -2);
width: 1px;
background: var(--col-gris20);
}
@media (max-width: 970px) {
.line-vd::after {
top: auto;
left: 0;
right: 0;
bottom: -17px;
width: auto;
height: 1px;
}
}
/* //////////// HEADER //////////// */
#headerandina section {
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
position: relative;
padding: var(--espacio-2xsmall) 0;
}
#headerandina section span{
display: flex;
align-items: center;
justify-content: center;
}
#headerandina section span a{
display: flex;
align-items: center;
justify-content: center;
}
#headerandina .cinta {
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--espacio-3xsmall);
border-bottom: 1px solid var(--col-aluminio);
}
#headerandina .cinta ul{
display: flex;
justify-content: flex-start;
align-items: center;
overflow-x: auto;
white-space: nowrap;
margin: 0 var(--espacio-3xsmall);
}
#headerandina .cinta ul li:nth-child(1n+2) {
border-left: 1px solid var(--col-aluminio);
}
#headerandina .cinta ul li a {
display: inline-block;
text-align: center;
padding: var(--espacio-3xsmall);
text-decoration: none;
transition: box-shadow 0.3s ease;
color: var(--col-fuente)
}
#headerandina .cinta ul li a:hover {
box-shadow: inset -1px -14px 6px var(--trans-10negro), inset 0 -3px 0 var(--trans-10negro);
text-decoration: none !important;
}
#headerandina .cinta ul::-webkit-scrollbar {
height: 0;
}
/* //////////// HEADER ROJO //////////// */
#headerandina.rojo{
border-bottom: 1px solid var(--trans-50blanco);
}
#headerandina.rojo .cinta {
background: var(--col-noche);
border-bottom: 1px solid var(--trans-50blanco);
}
#headerandina.rojo .cinta svg{
filter:var(--svg-blanco);
}
#headerandina.rojo .cinta ul{
margin: 0 var(--espacio-3xsmall);
}
#headerandina.rojo .cinta ul li:nth-child(1n+2) {
border-left: 1px solid var(--trans-50blanco);
}
#headerandina.rojo .cinta ul li a {
color: var(--col-blanco);
}
#headerandina.rojo .cinta ul li a:hover {
box-shadow: inset -1px -14px 6px var(--trans-20negro), inset 0 -3px 0 var(--trans-20negro);
text-decoration: none !important;
}
#headerandina.rojo section span div.line{
background: var(--col-rojo);
color: var(--col-blanco);
}
#headerandina.rojo section span ul{
background: var(--col-rojo);
}
#headerandina.rojo section span ul li div{
background: var(--col-rojo);
}
/* //////////// NAVEGADOR //////////// */
nav.navbar-fixed{
position:sticky;
transition: all 0.3s ease-in-out;
top:0;
z-index: 3;
box-shadow: 1px 8px 6px 0px rgb(0 0 0 / 15%);
background: var(--col-blanco)
}
#navandina section {
display: flex;
justify-content: space-between;
align-items: center;
}
#navandina section svg{
filter:var(--svg-fuente)
}
#navandina section ul li svg{
filter:var(--svg-fuente)
}
#navandina section ul li{
color:var(--col-grismedio);
display: contents;
}
#navandina section ul li a{
color:var(--col-grismedio);
padding: var(--espacio-2xsmall) 20px;
display: flex;
}
#navandina section ul li a:hover{
color:var(--col-grismedio);
background: var(--trans-10negro);
}
#navandina section ul li a:link{
color:var(--col-grismedio);
text-decoration: none;
}
#navandina section ul li ul{
display: flex;
flex-direction: column;
text-align: left;
}
#navandina section ul li ul li {
color:var(--col-oscuro);
width: 100%;
}
#navandina section ul li ul li a{
color:var(--col-oscuro);
background: var(--col-blanco);
display: inline-block;
width: 100%;
}
#navandina section ul li ul li a:link{
color:var(--col-oscuro);
display: inline-block;
}
#navandina section ul li ul li a:hover{
color:var(--col-oscuro);
background: var(--col-gristenue);
display: inline-block;
}
nav #nav-submenu{
display: flex;
justify-content: center;
width: 100%;
}
nav #nav-submenu li{
display: inline-block!important;
}
nav #nav-submenu li a{
display: flex;
align-items: center;
}
nav #nav-submenu li a svg{
margin-right: 10px;
}
nav #nav-submenu li ul{
position: absolute;
z-index: 2;
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.navbar-top{
position:fixed!important;
top:0;
left:0;
width:100%;
z-index:6;
background:rgba(0,0,0,.9);
backdrop-filter:blur(6px);
box-shadow:0 2px 10px rgba(0,0,0,.3);
opacity:0;
transform:translateY(-100%);
will-change:transform, opacity;
}
@supports (animation-timeline: scroll()){
@keyframes navReveal{
0%{
opacity:0;
transform:translateY(-100%);
pointer-events:none;
}
1%{
pointer-events:auto;
}
100%{
opacity:1;
transform:translateY(0);
}
}
.navbar-top{
animation:navReveal linear;
animation-timeline:scroll(root block);
animation-range:0px 150px;
animation-fill-mode:both;
}
}
@supports not (animation-timeline: scroll()){
.navbar-top{
position:sticky;
opacity:1;
transform:none;
pointer-events:auto;
}
}
#menu-toogle-top {
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
position: fixed;
top: 0;
left: 0;
}
/* //////////// NAVEGADOR ROJO //////////// */
#navandina.rojo section svg{
filter:var(--svg-blanco)
}
#navandina.rojo section ul li svg{
filter:var(--svg-blanco)
}
#navandina.rojo section ul li{
color:var(--col-blanco);
display: contents;
}
#navandina.rojo section ul li a{
color:var(--col-blanco);
padding: var(--espacio-xsmall) 17px;
display: flex;
}
#navandina.rojo section ul li a:hover{
color:var(--col-blanco)!important;
background: var(--trans-10negro);
}
#navandina.rojo section ul li a:link{
color:var(--col-blanco);
text-decoration: none;
}
#navandina.rojo section ul li ul{
display: flex;
flex-direction: column;
text-align: left;
}
#navandina.rojo section ul li ul li {
color:var(--col-oscuro);
width: 100%;
}
#navandina.rojo section ul li ul li a{
color:var(--col-oscuro);
background: var(--col-blanco);
display: inline-block;
width: 100%;
}
#navandina.rojo section ul li ul li a:link{
color:var(--col-oscuro);
display: inline-block;
}
#navandina.rojo section ul li ul li a:hover{
color: var(--col-oscuro) !important;
background: var(--col-gristenue);
display: inline-block;
}
#headerandina.rojo section span button.line{
background: var(--col-rojo);
color: var(--col-blanco);
}
#headerandina.rojo section span svg{
filter:var(--svg-blanco)
}
#headerandina.rojo section span ul li button{
background: var(--col-rojo);
}
/* ///////////////// SIDE-BAR TOP ///////////////// */
.menu-button {
cursor: pointer;
display: flex;
padding: var(--espacio-3xsmall) 17px;
}
#sidebar-top:checked ~ .sidebar-top {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.2s ease, visibility 0s linear 0s;
}
#sidebar-top:checked ~ .sidebar-top-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition:
opacity 0.3s ease,
visibility 0s linear 0s;
}
.sidebar-top-menu {
position: fixed;
top: var(--ancho-2xlarge);
right: 0;
bottom: 0;
left: 0;
z-index: 1;
display: block;
background: var(--trans-40negro);
opacity: 0;
visibility: hidden;
pointer-events: none;
cursor: default;
transition:
opacity 0.3s ease,
visibility 0s linear 0.3s;
}
.sidebar-top {
position: fixed;
top: var(--ancho-2xlarge);
left: 0;
z-index: 2;
width: 100%;
max-height: calc(100dvh - var(--ancho-2xlarge));
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--col-blanco, var(--col-blanco-local));
box-shadow: 0 8px 16px var(--trans-20negro);
opacity: 0;
visibility: hidden;
transform: translateY(-110%);
pointer-events: none;
transition:
transform 0.32s cubic-bezier(0.2, 0.9, 0.2, 1),
opacity 0.2s ease,
visibility 0s linear 0.32s;
will-change: transform;
}
.sidebar-top ul {
display: grid;
grid-template-columns: 1fr;
width: min(100%, 1200px);
margin: 0 auto;
padding:var(--espacio-2xsmall, 10px)var(--espacio-small, 16px);
list-style: none;
}
.sidebar-top ul li {
min-width: 0;
}
.sidebar-top ul li a {
display: block;
width: 100%;
padding:var(--espacio-2xsmall, 10px)var(--espacio-small, 16px);
color: var(--col-fuente, var(--col-fuente-local));
text-decoration: none;
cursor: pointer;
border-radius: var(--borderradius-3xsmall, 4px);
transition: color 0.2s ease, background-color 0.2s ease;
}
.sidebar-top ul li a:hover,
.sidebar-top ul li a:focus-visible {
background-color:
var(--col-gristenue, var(--col-gristenue-local));
}
.sidebar-top ul li a:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.sidebar-top-checkbox {
position: fixed;
top: 0;
left: 0;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
white-space: nowrap;
clip: rect(0 0 0 0);
clip-path: inset(50%);
border: 0;
opacity: 0;
pointer-events: none;
}
@supports (animation-timeline: scroll()) {
@keyframes navReveal {
0% {
opacity: 0;
transform: translateY(-100%);
pointer-events: none;
}
99% {
pointer-events: none;
}
100% {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
}
.navbar-top {
animation-name: navReveal;
animation-duration: 1ms;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: scroll(root block);
animation-range: 0 150px;
}
}
@supports not (animation-timeline: scroll()) {
.navbar-top {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
}
@media (min-width: 768px) {
.sidebar-top ul {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--espacio-2xsmall, 10px);
}
}
@media (min-width: 1200px) {
.sidebar-top ul {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
.navbar-top,
.sidebar-top,
.sidebar-top-menu {
animation: none;
transition: none;
}
.navbar-top {
opacity: 1;
transform: none;
pointer-events: auto;
}
}
/* ///////////////// SIDE-BAR LATERAL ///////////////// */
.menu-button {
cursor: pointer;
display: flex;
padding: var(--espacio-3xsmall) 17px;
}
#sidebar-lelf { display: none; }
#sidebar-lelf:checked ~ .sidebar-lelf {
transform: translateX(0);
z-index: 6;
}
#sidebar-lelf:checked ~ .sidebar-lelf-menu{
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition:
transform 0.32s cubic-bezier(0.2, 0.9, 0.2, 1),
opacity 0.2s ease,
visibility 0s linear 0s;
}
.sidebar-lelf-menu {
inset: 0;
position: fixed;
background: rgba(0,0,0,.45);
opacity: 0;
pointer-events: none;
transition: opacity .28s ease;
z-index: 5;
}
.sidebar-lelf {
position: fixed;
top: 0;
left: 0;
width: 80vw;
max-width: 380px;
height: 100vh;
box-shadow: 4px 0 12px rgba(0,0,0,.25);
transform: translateX(-110%);
transition: transform .28s cubic-bezier(.2,.9,.2,1);
z-index: 7;
overflow-y: auto;
list-style: none;
}
.sidebar-lelf header {
text-align: center;
padding: 0 var(--espacio-xsmall);
display:flex;
flex-direction: column;
justify-content: center;
}
.sidebar-lelf header a svg {
width: 100%;
height: 50px;
max-width: 200px;
margin: var(--espacio-xsmall) auto;
}
.sidebar-lelf .cinta {
padding: 0 var(--espacio-xsmall);
}
.sidebar-lelf .cinta ul li {
display: inline-block;
margin: 3px;
}
.sidebar-lelf .cinta ul li a{
color: var(--col-blanco);
white-space: nowrap;
}
.sidebar-lelf .cinta ul li a:hover{
text-decoration: none;
color: var(--col-blanco);
}
.sidebar-lelf nav {
padding: 0 var(--espacio-xsmall);
display: flex;
align-items: center;
}
.sidebar-lelf nav ul li {
display: inline-block;
margin: 3px;
}
.sidebar-lelf span {
padding: 0 var(--espacio-medium);
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: center;
}
/* .sidebar-lelf .descargueapp {
padding: 0  var(--espacio-xsmall);
display: flex;
align-items: center;
}
.sidebar-lelf .descargueapp section {
border: 1px solid #000000;
padding:  var(--espacio-xsmall)  var(--espacio-2xsmall);
border-radius: var(--espacio-4xsmall);
text-align: center;
}
.sidebar-lelf .descargueapp h6 {
margin-bottom: var(--espacio-2xsmall);
}
.sidebar-lelf .descargueapp span {
display: flex;
} */
.descargueapp {
padding: 0 var(--espacio-medium);
}
.descargueapp section{
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
text-align: center;
border: solid 1px #000000;
border-radius: 9px;
padding: 15px;
}
/* //////////// SHARE DESKTOP //////////// */
.share {
display: flex;
}
.share .button-reset {
padding: 3px 5px;
margin: 0 2px;
background: transparent;
}
.time-redes {
display: flex;
align-items: center;
justify-content: space-between;
}
.share-desktop {
position: absolute;
right: 0;
width: 45px;
max-width: 300px;
overflow: hidden;
text-align: center;
transition: width 0.7s;
height: 100%;
display: flex;
align-items: center;
z-index: 1;
background: var(--col-blanco)
}
.share-desktop:hover {
width: 300px;
}
@media only screen and (min-width: 993px) {
.share-desktop {
width: 300px;
overflow: initial;
justify-content: flex-end;
position: relative;
display: flex;
align-items: center;
z-index: 4;
}
}
.share-desktop li.anchor {
position: absolute;
right: 0;
z-index: 1;
}
/* //////////// SHARE MOVIL //////////// */
.share-movil {
position: absolute;
right: 0;
width: 45px;
overflow: hidden;
text-align: center;
z-index: 1;
transition: width 0.7s;
height: 100%;
display: flex;
align-items: center;
}
.share-movil li.anchor {
position: absolute;
right: 0;
z-index: 1;
}
.share-movil:hover {
width: 300px;
}
/* ///////////////// DELAY ///////////////// */
.delay{
transition: all 0.6s ease;
opacity: 0;
visibility: hidden;
}
.delay-click:hover .delay{
opacity: 1;
visibility: visible;
}
@keyframes slideLeft{
0%{
opacity: 0;
transform: translateX(100%);
}
100%{
opacity: 1;
transform: translateX(0%);
}
}
@keyframes slideRight{
0%{
opacity: 1;
transform: translateX(0%);
}
100%{
opacity: 0;
transform: translateX(100%);
}
}
/* /////////// SIDEBAR TOP /////////// */
.sidebar-top-overlay {
position: fixed;
inset: 0;
background: var(--trans-40negro);
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
z-index: 2;
}
#menu-toogle-top:checked ~ .sidebar-top-overlay {
opacity: 1;
pointer-events: auto;
}
.sidebar-top {
position: fixed;
z-index: 2;
transform: translateY(-100%);
transition: transform .32s cubic-bezier(.2,.9,.2,1);
box-shadow: 0 8px 16px var(--trans-20negro);
top: 0;
left: 0;
width: 100%;
}
#menu-toogle-top:checked ~ .sidebar-top {
transform: translateY(0);
}
.sidebar-top ul {
list-style: none;
display: flex;
flex-direction: column;
}
.sidebar-top ul li label {
display: block;
cursor: pointer;
}
.sidebar-top ul li a {
display: block;
padding: var(--espacio-2xsmall) var(--espacio-small);
text-decoration: none;
color: var(--col-fuente);
border-radius: var(--borderradius-3xsmall);
transition: background .2s ease;
}
.sidebar-top ul li a:hover {
background: var(--col-gristenue);
}
.sidebar-top ul li button {
width: 100%;
text-align: left;
padding: var(--espacio-2xsmall) var(--espacio-small);
background: none;
border: 1px solid var(--col-gris20);
border-radius: var(--borderradius-3xsmall);
font-family: inherit;
font-size: var(--fontsize-3xsmall);
color: var(--col-fuente);
cursor: pointer;
transition: background .2s ease;
}
.sidebar-top ul li button:hover {
background: var(--col-gristenue);
}
@media (min-width: 768px) {
.sidebar-top ul {
flex-direction: row;
flex-wrap: wrap;
display: block;
}
.sidebar-top ul li {
flex: 1 1 calc(33.333% - var(--espacio-2xsmall));
}
}
@media (min-width: 1200px) {
.sidebar-top ul li {
flex: 1 1 calc(20% - var(--espacio-2xsmall));
}
}
/* /////////// TITULARES /////////// */
.titular-basico {
width: 100%;
margin-bottom: var(--espacio-small);
}
.titular {
grid-column-start: 1;
width: 100%;
margin-bottom: var(--espacio-small);
}
.titular b {
display: inline;
border-bottom: 6px solid var(--col-aluminio);
margin-bottom: 20px;
}
.titular b:after {
content: "";
width: 100%;
max-width: 100%;
height: .15rem;
background: var(--col-aluminio);
display: block;
}
.titulocaja{
color: var(--col-blanco);
text-align: center;
padding: var(--espacio-xsmall) 0;
}
.titulo-seccion {
display: flex;
align-items: center;
width: 100%;
}
.titulo-seccion::before {
content: "";
width: 25px;
height: 25px;
flex: 0 0 25px;
margin-right: 10px;
background: var(--trans-20negro);
}
.titulo-seccion::after {
content: "";
flex: 1;
height: 2px;
margin-left: 0;
background: var(--trans-20negro);
}
.titulo-seccion b {
padding: 0 12px 0 0;
border-right: 2px solid var(--trans-20negro);
white-space: nowrap;
font-weight: 700;
}
/* /////////// PUBLICIDAD AVISOS /////////// */
.publateral{
position: relative;
}
.publateral span.derecha,
.publateral span.izquierda {
position: absolute;
width: 160px;
height: 600px;
}
.publateral span.derecha {
left: 49%;
margin-left: -830px;
}
.publateral span.izquierda {
right: 49%;
margin-right: -830px;
}

.publarge span figure{
max-width: 900px;
width: 100%;
margin: auto;
}
/* /////////// TARJETA-new /////////// */
.tarjeta{
display: grid;
grid-template-columns: none;
gap: var(--espacio-2xsmall);
/* height: 100%; */
}
.tarjeta span{
display: grid;
grid-template-columns: none;
gap: var(--espacio-4xsmall);
}
.tarjeta-reset {
display: grid;
gap: var(--espacio-small);
grid-template-columns: repeat(2, 1fr);
}
.tarjeta-reset span{
display: flex;
flex-direction: column;
gap: var(--espacio-4xsmall);
}
.tarjeta-span3 {
display: grid;
gap: var(--espacio-small);
grid-template-columns: repeat(3, 1fr);
}
.tarjeta-span3 span{
display: flex;
flex-direction: column;
gap: var(--espacio-4xsmall);
}
/* //////////// MEDIA //////////// */
@media only screen and (max-width: 900px) {
.tarjeta-reset-900 {
display: grid!important;
gap: var(--espacio-small)!important;
grid-template-columns: repeat(2, 1fr)!important;
}
}
@media only screen and (max-width: 970px) {
.tarjeta-reset-970{
display: grid!important;
gap: var(--espacio-small)!important;
grid-template-columns: repeat(2, 1fr)!important;
}
}
@media only screen and (max-width: 950px) {
.tarjeta-reset {
grid-template-columns: repeat(1, 1fr);
}
}
@media only screen and (max-width: 722px) {
}
@media only screen and (max-width: 600px) {
.tarjeta-span3 {
grid-template-columns: repeat(1, 1fr);
}
.columns2-reset-600 {
grid-template-columns: repeat(2, 1fr);
display: grid;
}
.share-desktop:hover {
width: 300px;
}
.grid-2-600{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
align-items: start;
}
.display-block {
display: block;
}
.hr600{
display: block;
width: 100%;
height: 1px;
background: var(--col-grisclaro)!important;
border: none;
}
.tarjeta-reset-600{
display: grid!important;
gap: var(--espacio-small)!important;
grid-template-columns: repeat(2, 1fr)!important;
}
.footer section span {
text-align: center;
}
.footer section span .logo-small {
margin: auto;
}
.parallax span ul li.parallax-ul-li-600 {
margin: var(--espacio-medium) 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
}
.tituloh1{
font-size: clamp(2.20rem, 2.00rem + 1.50vw, 5.0rem);
line-height: clamp(2.20rem, 2.00rem + 2.10vw, 3.80rem);
}
.numerote{
font-size: clamp(2.20rem, 2.00rem + 4vw, 6.0rem);
}
.autoridades {
min-height: 100vh;
padding: clamp(3.25rem, 10vw, 4.5rem) 0 clamp(1.5rem, 6vw, 3rem);
background-color: #f4f4f4;
font-family: "Roboto", Arial, sans-serif;
}

.autoridades .container-small {
max-width: 32.5rem !important;
padding: 0 clamp(1.125rem, 4.3vw, 1.5rem);
}

.autoridades-lista {
gap: clamp(1.35rem, 5.3vw, 1.75rem) !important;
}

.autoridad {
position: relative;
display: flex;
align-items: center;
min-height: clamp(5.35rem, 20.6vw, 6.7rem);
padding: 0.5rem 0.75rem;
overflow: visible;
background-color: #fff;
}

.autoridad img {
position: absolute;
z-index: 1;
width: clamp(8.6rem, 35.5vw, 11rem);
height: auto;
pointer-events: none;
}

.autoridad .numerote {
position: relative;
z-index: 2;
flex: 0 0 auto;
margin: 0 clamp(0.7rem, 3vw, 1rem) 0 0;
letter-spacing: -0.055em;
white-space: nowrap;
}

.autoridad h6 {
position: relative;
z-index: 2;
margin: 0;
text-align: left;
}

.autoridad:nth-child(1) {
padding-left: 31.9%;
}

.autoridad:nth-child(1) img {
bottom: 0;
left: -0.85rem;
}

.autoridad:nth-child(2),
.autoridad:nth-child(4) {
padding-right: clamp(5.7rem, 25vw, 7.6rem);
}

.autoridad:nth-child(2) {
padding-left: 24%;
}

.autoridad:nth-child(2) img {
right: clamp(-0.9rem, -2vw, -0.15rem);
bottom: 0;
}

.autoridad:nth-child(3) img {
bottom: 0;
left: -0.85rem;
}

.autoridad:nth-child(3) {
padding-left: 21.2%;
}

/* .autoridad:nth-child(3) .numerote {
font-size: clamp(2.65rem, 12.5vw, 3.65rem);
} */

.autoridad:nth-child(4) {
padding-left: 3.4%;
}

.autoridad:nth-child(4) img {
right: clamp(-0.55rem, -1vw, -0.1rem);
bottom: 0;
width: clamp(7.5rem, 30.5vw, 9.6rem);
}

/* .autoridad:nth-child(4) .numerote {
font-size: clamp(2.55rem, 11.8vw, 3.5rem);
} */

.autoridad:nth-child(5) {
padding-left: 42.8%;
}

.autoridad:nth-child(5) img {
bottom: 0;
left: clamp(1rem, 4.8vw, 1.55rem);
width: clamp(7.8rem, 32vw, 10rem);
}

.autoridad:nth-child(5) .numerote {
margin-right: clamp(0.6rem, 2.5vw, 0.9rem);
}

@media (max-width: 350px) {
.autoridad h6 {
font-size: 0.67rem;
}

.autoridad:nth-child(5) {
padding-left: 8.35rem;
}

.autoridad:nth-child(5) img {
width: 9rem;
}
}
.contador {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
align-items: start;
column-gap: clamp(8px, 1.8vw, 20px);
padding: 38px clamp(24px, 6vw, 68px) 40px;
border-radius: 16px;
background: #fff;
box-shadow: 0 18px 30px rgba(0, 0, 0, 0.22);
box-sizing: border-box;
}
.contador .unidad {
min-width: 0;
text-align: center;
}
.contador .num, .contador .separador {
font-size: clamp(3.5rem, 9vw, 5.25rem);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.contador .num {
margin: 0 0 18px;
padding: 0;
}
.contador .separador {
display: block;
transform: translateY(-0.06em);
}
.contador .letter {
margin: 0;
font-weight: 600;
text-transform: uppercase;
white-space: nowrap;
}
.contador.finalizado {
display: block;
font-family: var(--font-san-serif), Arial, sans-serif;
font-size: clamp(1.5rem, 5vw, 3rem);
font-weight: 800;
text-align: center;
padding: 72px 24px;
}
@media (max-width: 600px) {
main.autoridades {
padding: 16px 0;
}
.contador {
column-gap: 5px;
padding: 28px 12px 30px;
border-radius: 12px;
}
.contador .num,.contador .separador {
font-size: clamp(2.2rem, 12vw, 3.5rem);
}
.contador .num {
margin-bottom: 12px;
}
.contador .letter {
font-size: clamp(.55rem, 2.6vw, .78rem);
}
}
/* MODULO DE VOTACION MUNICIPAL */
.elecciones-simulador .section {
width: 100%;
max-width: 1080px;
margin: 0 auto;
padding: 64px 20px;
font-family: var(--font-san-serif);
}

.elecciones-simulador .simulator {
background: var(--col-blanco);
border: 1px solid var(--col-gris30);
box-shadow: 0 8px 24px var(--trans-10negro);
}

.elecciones-simulador .sim-controls {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
padding: 20px;
background: var(--col-gris05);
border-bottom: 1px solid var(--col-gris30);
}

.elecciones-simulador .sim-controls label {
color: var(--col-gris70);
font-size: .72rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}

.elecciones-simulador .sim-controls select {
width: 100%;
height: 44px;
margin-top: 6px;
padding: 0 10px;
border: 1px solid var(--col-gris40);
background: var(--col-blanco);
}

.elecciones-simulador .location-result {
display: none;
padding: 13px 18px;
background: var(--col-rojo);
color: var(--col-blanco);
font-weight: 800;
text-align: center;
}

.elecciones-simulador .ballot-stage {
display: none;
padding: 22px;
overflow-x: auto;
background: #ffffff;
}

.elecciones-simulador .ballot {
min-width: 760px;
margin: auto;
background: var(--col-blanco);
}

.elecciones-simulador .ballot-top {
display: grid;
grid-template-columns: 100px 1fr 120px;
align-items: center;
padding: 9px 12px;
}

.elecciones-simulador .ballot-top .crest {
display: grid;
place-items: center;
}

.elecciones-simulador .ballot-top .crest img {
display: block;
width: 72px;
height: 72px;
object-fit: contain;
}

.elecciones-simulador .ballot-top .title {
font-size: 1rem;
font-weight: 800;
text-align: center;
}

.elecciones-simulador .barcode {
display: grid;
place-items: center;
}

.elecciones-simulador .barcode img {
display: block;
width: 100%;
max-height: 72px;
object-fit: contain;
}

.elecciones-simulador .ballot-cols {
display: grid;
grid-template-columns: repeat(var(--cols), 1fr);
gap: 12px;
}

.elecciones-simulador .ballot-col {
border-bottom: 2px solid var(--col-negro);
}

.elecciones-simulador .ballot-col:last-child {
border-right: 0;
}

.elecciones-simulador .ballot-col h4 {
min-height: 50px;
background: #9a9a9a;
color: var(--col-blanco);
font-size: .9rem;
line-height: 1.25;
text-align: center;
padding: 10px;
text-transform: uppercase;
}

.elecciones-simulador .ballot-subtitle {
font-size: .9rem;
}

.elecciones-simulador .ballot-col .inst {
display: flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 6px;
border-bottom: 1px solid var(--col-negro);
background: var(--col-gris20);
font-size: .58rem;
text-align: center;
}

.elecciones-simulador .ballot-row {
display: grid;
grid-template-columns: 1fr 52px;
min-height: 54px;
border: 1px solid var(--col-negro);
}

.elecciones-simulador .ballot-row:last-child {
border-bottom: 0;
}

.elecciones-simulador .ballot-row .org {
display: flex;
align-items: center;
padding: 10px 15px;
font-size: var(--fontsize-4xsmall);
text-align: left;
}

.elecciones-simulador .ballot-row .markbox {
display: grid;
place-items: center;
border-left: 1px solid var(--col-negro);
background: var(--col-blanco);
cursor: pointer;
}

.elecciones-simulador .markinner {
position: relative;
display: grid;
place-items: center;
background: var(--col-blanco);
}

.elecciones-simulador .markinner img {
display: block;
width: 100%;
height: 100%;
padding: 6px;
object-fit: cover;
}

.elecciones-simulador .markbox.marked .markinner::after {
position: absolute;
inset: 0;
transform: rotate(93deg) scale(0.8);
display: grid;
place-items: center;
content: attr(data-mark);
font-family: fantasy;
color: #0046b4;
font-size: 4.7rem;
line-height: 1;
text-shadow: 0 0 2px var(--col-blanco), 0 0 2px var(--col-blanco);
}

.elecciones-simulador .gov .ballot-row {
background: var(--elecciones-amarillo);
}

.elecciones-simulador .con .ballot-row {
background: var(--elecciones-verde);
}

.elecciones-simulador .prov .ballot-row {
background: var(--elecciones-rosa);
}

.elecciones-simulador .dist .ballot-row {
background: var(--elecciones-celeste);
}

.elecciones-simulador .sim-footer {
display: flex;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
padding: 16px 18px;
border-top: 1px solid var(--col-gris30);
}

.elecciones-simulador .sim-footer button {
padding: 10px 15px;
border: 0;
font-weight: 800;
cursor: pointer;
}

.elecciones-simulador .btn-light {
background: var(--col-gris10);
}

.elecciones-simulador .btn-dark {
background: var(--col-rojo);
color: var(--col-blanco);
}

.elecciones-simulador .result-box {
display: none;
margin: 14px 18px 18px;
padding: 16px;
border-left: 4px solid var(--col-rojo);
background: var(--col-gris05);
}

.elecciones-simulador .result-note {
margin-bottom: 0;
color: var(--col-gris60);
}

.elecciones-simulador .modal {
position: fixed;
z-index: 5000;
inset: 0;
display: none;
align-items: center;
justify-content: center;
padding: 18px;
background: var(--trans-50negro);
}

.elecciones-simulador .modal-box {
width: min(390px, 95vw);
background: var(--col-blanco);
}

.elecciones-simulador .modal-head {
padding: 14px 16px;
background: var(--col-azul);
color: var(--col-blanco);
font-weight: 800;
}

.elecciones-simulador .modal-body {
padding: 20px;
text-align: center;
}

.elecciones-simulador .picks {
display: flex;
justify-content: center;
gap: 18px;
margin: 14px 0;
}

.elecciones-simulador .pick {
width: 74px;
height: 74px;
border: 2px solid var(--col-azul);
background: var(--col-blanco);
color: var(--col-azul);
font-size: 2.4rem;
font-weight: 800;
cursor: pointer;
}

.elecciones-simulador .modal-actions {
padding: 0 20px 18px;
text-align: right;
}

.elecciones-simulador .modal-actions button {
padding: 9px 14px;
border: 0;
font-weight: 700;
}

@media (max-width: 900px) {
.elecciones-simulador .sim-controls {
grid-template-columns: 1fr;
}
}
.iconosfooter{
  display: grid;
  align-content: space-around;
  height: 100%;
  gap: 30px;
}