.blanco-claro {  background-color: rgba(255,255,255,0.5);}
.blanco {  background-color: #ffffff;}
.negro-claro {  background-color: rgba(0,0,0,0.70);}
.azul-oscuro {  background-color: #233142;}
.negro {  background-color: #000000;}
.crema {  background-color: #fffdf2;}


.redondo { border-radius: 10px; }

@media screen and (max-width:5500px)  
{	
#tit1 {display: none;}
#tit2 {display: none;}
#tit3 {display: none;}
#tit4 {display: inline;}
#log1 {display: inline;}
#log2 {display: none;}
}

@media screen and (max-width:1700px)  
{	
#tit1 {display: inline;}
#tit2 {display: none;}
#tit3 {display: none;}
}


@media (max-width:1200px)
{
#tit1 {display: none;}
#tit2 {display: inline;}
#tit3 {display: none;}
}

@media (max-width:1100px)
{
#tit1 {display: none;}
#tit2 {display: none;}
#tit3 {display: inline;}
#tit4 {display: none;}
}


@media (max-width:767px)
{
#log1 {display: none;}
#log2 {display: inline;}
}


.img { top:  -100px;}
.imgg { top: -50px;}

@media (max-width: 1024px) {.img { top: 0px;}}
@media (max-width: 479px) {.imgg { top: -100px;}}

.marco-azul { margin: 10px; border-style: solid; border-color: #00a9c5;  background-color:#233142; 
border-top-left-radius:30px;
border-top-right-radius:30px;
border-bottom-right-radius:0px;
border-bottom-left-radius:30px; 
}
.marco { margin: 10px; border-style: solid; border-color: #00a9c5;  background-color:auto; 
border-top-left-radius:30px;
border-top-right-radius:30px;
border-bottom-right-radius:0px;
border-bottom-left-radius:30px; 
}




.efecto {
    display: inline-block;
    position: relative;
}

.efecto img {    
    -webkit-transition: .2s;
    -moz-transition: .2s;
    transition: .2s; /* Para compatibilidad con todos los navegadores */
    display: block;
}

/* Efecto de oscurecimiento al hacer hover */
.efecto:hover img {    
    filter: brightness(60%); /* Reduce el brillo al 70%, ajustable */
}



.opcion-contenido{
    margin:5% auto;
padding:10px 10px;
background-color: #ffffff;
border-radius: 3px;
width:80%; max-height:80%;
overflow: auto;
}
.opcion-estilo{
  background-color: rgba(0,0,0,.8);
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  opacity:0;
  pointer-events:none;
  transition: all 1s;
}

#opcion1:target, #opcion2:target, #opcion3:target, #opcion4:target, #opcion5:target, #opcion6:target, #opcion7:target, #opcion8:target, #opcion9:target, #opcion10:target, #opcion11:target, #opcion12:target, #opcion13:target, #opcion14:target, 
#opcion15:target, #opcion16:target, #opcion17:target, #opcion18:target, #opcion19:target, #opcion20:target {
  opacity:1;
  pointer-events:auto;
}
.btn-cerrar {
        display:block;
        position: relative;
        left:5px;
        top:5px;
        
        z-index:999;
}



.html-parallax {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  border-style: none;
  border-color: #fff;
  border-left-width: 0px;
  border-right-width: 0px;
  border-top-width: 0px;
  border-bottom-width: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  background-image: url('../imagenes/parallax2.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.html-parallax2 {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  border-style: none;
  border-color: #fff;
  border-left-width: 0px;
  border-right-width: 0px;
  border-top-width: 0px;
  border-bottom-width: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  background-image: url('../imagenes/parallax2.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}