@media only screen and (min-width:481px){ 

@font-face {
  font-family: Futura;
  font-style:  normal;
  font-weight: normal;
  src: local("?"),url("futurabookfont.woff") format("woff"), url("futurabookfont.ttf") format("TrueType");
}

{
  width:100%;
  margin: 0px;
  border: 0px;
}

img{
  border: 0px;
}

a{
  color: #711419;
  text-decoration:underline;
}

a:hover{
	text-decoration: underline;
	color: #FF0000;
}

head{
   margin: 0px;
   border: 0px;
 }

body{
   margin: 0px;
   border: 0px;
   width:100%;
   font-family: Arial, Helvetica, sans-serif;	
   color: #000000;
	background: url(images/all.jpg) top repeat-x #FFFFFF;
}

#main{
   background: url(images/webmt.png) top no-repeat;
}


@media only screen and (min-width:350px){
#buttons{
	padding-top: 30px;
	margin-left: calc( ( 100% - 350px ) / 2 );
   width: 350px;
   height: 145px;
}
}
@media only screen and (min-width:525px){
#buttons{
	padding-top: 30px;
	margin-left: calc( ( 100% - 525px ) / 2 );
   width: 525px;
   height: 100px;
}
}
@media only screen and (min-width:700px){
#buttons{
	padding-top: 30px;
	margin-left: calc( ( 100% - 700px ) / 2 );
   width: 700px;
   height: 100px;
}
}
@media only screen and (min-width:875px){
#buttons{
	padding-top: 30px;
	margin-left: calc( ( 100% - 875px ) / 2 );
   width: 875px;
   height: 100px;
}
}
@media only screen and (min-width:1050px){
#buttons{
	padding-top: 30px;
	margin-left: calc( ( 100% - 1050px ) / 2 );
   width: 1050px;
   height: 55px;
}
}
#buttons a {
	font-family: Futura, Verdana, Arial, Helvetica, sans-serif;
	font-size: 23px;
	font-weight:normal;
	display: block;
	float: left;
	width: 165px;
	height: 33px;
	text-decoration: none;
   color: #FFFFFF;	
	padding-top: 5px;
	padding-bottom: 2px;
	text-align: center;
	align-content: center;
   background:url(images/but.jpg) 0px 0px no-repeat;	
	margin-top: 5px;   
   margin-left: 10px;
}
#buttons a:hover {
	text-decoration: underline;
   background:url(images/but-hover.jpg) 0px 0px no-repeat;
}


#redes{
	padding: 0px 0px 0px 20px;
}

.text{
	padding: 5px 0px 0px 0px;
}

.imggral {
   float: left;
	margin: 5px 10px 5px 0px;
}

.imgred {
	float:left;	
	top: 0px;	
	height: 35px;	
	width: 35px;
	margin-right: 30px;
	margin-left: 0px;
	margin-bottom: 5px;
}

.imgh2 {
   float:left;
	margin: 2px 10px 0px;
	width: 76px;
	height: 57px;
}

.imgh2mini {
   float:left;
	margin: 2px 10px 0px;
	width: 140px;
	height: 105px;
}

.embedpdf{
	width: 100%;
	min-height: calc(100% - 305px);
	position: absolute;
	left: 0;
	top: 305;
}

.imagen {
   margin: 5px 5px 5px 5px;
   max-width: 100%;
}

span {
   font-family: Futura, Verdana, Arial, sans-serif;
	font-size:17px;
	color:#0B4B70;
   font-weight:bold;
}

h1{
	font-family: Futura, Verdana, Arial, sans-serif;
	font-size:21px;
	color:#000000;  
	padding: 5px 150px 5px 150px;
	background: url(images/tit_bg.gif) bottom repeat-x;
}

h2{
	font-family: Futura, Verdana, Arial, sans-serif;
	font-size:17px;
	min-height: 61px;
   color: #000000;	
	padding: 5px 50px 5px 50px;	
	margin-left: 150px;
	margin-right: 150px;
	background-color: #EBEBEB;
	border-radius: 10px;
}

h3{
	font-family: Futura, Verdana, Arial, sans-serif;
	font-size:17px;
	min-height: 20px;
   color: #000000;	
	padding: 5px 35px 5px 35px;	
	margin-left: 150px;
	margin-right: 150px;
	background-color: #deebff;
	border-radius: 5px;
}

section{
	font-family: Futura, Verdana, Arial, sans-serif;
	font-size:17px;
   color: #000000;	
	min-height: 61px;
	padding: 5px 5px 5px 5px;	
	margin-top: 10px;	
	margin-bottom: 10px;
	margin-left: 150px;
	margin-right: 150px;
	background-color: #EBEBEB;
	border-radius: 10px;
}

pre {
	background-color: #f4f4f4;
   color: green; /* Cambia el color del texto a verde */
   padding: 10px;
   border-radius: 5px;
   overflow: auto;
}

footer{
	font-size: 10px;
	color: #FFFFFF;
	text-align: center;
	clear:both;
	padding: 15px 5px 15px 5px;
	height: 200px;	
	background: #252525;
}

footer a{
	color: #FFFFFF;
	font-size: 10px;
	text-decoration: underline;
}

footer a:hover{
	color: #FF0000;
	font-size: 10px;
	text-decoration: underline;
}

/* Contenedor del selector */
.language-switcher {
    position: absolute;
    top: 10px;        /* Espacio desde el borde superior */
    right: 15px;      /* Espacio desde el borde derecho */
    z-index: 1000;    /* Para que siempre esté por encima de otros elementos */
    display: flex;
    gap: 8px;         /* Espacio entre las dos banderas */
}

/* Estilo para las banderas */
.language-switcher img {
    width: 24px;      /* Tamaño de la bandera */
    height: auto;
    border-radius: 2px;
    transition: transform 0.2s ease; /* Efecto suave al pasar el mouse */
    border: 1px solid rgba(255,255,255,0.3); /* Un borde sutil */
}

/* Efecto al pasar el mouse */
.language-switcher img:hover {
    transform: scale(1.2);
    cursor: pointer;
}

}


@media handheld, only screen and (max-device-width: 480px){ 

@font-face {
  font-family: Futura;
  font-style:  normal;
  font-weight: normal;
  src: local("?"),url("futurabookfont.woff") format("woff"), url("futurabookfont.ttf") format("TrueType");
}

{
margin: 0;
}

img{
  border: 0px;
}

a{
  color: #711419;
  text-decoration:underline;
}

body{
   width: 480px;	
	font-family: Arial, Helvetica, sans-serif;	
   color: #000000;
	background: url(images/all.jpg) top repeat-x #FFFFFF;
}

#main{
	background: url(images/webmt.png) top no-repeat;
}

#buttons{
	padding-top: 18px;
	height: 231px;
	margin-left: 40px;
}

#buttons a {
	font-family: Futura, Verdana, Arial, Helvetica, sans-serif;
	font-size: 26px;
	font-weight:normal;
	display: block;
	float: left;
	width: 165px;
	height: 33px;
	text-decoration: none;
   color: #FFFFFF;	
	text-align: center;
   background:url(images/but.jpg) 0px 0px no-repeat;	
	margin-top: 20px;
	margin-bottom: 18px;   
	margin-right: 55px;
}

#redes{
	padding: 10px 0px 0px 0px;	
}

.text{
	padding: 5px 0px 0px 0px;
}

.imggral {
   float: left;
	margin: 5px 10px 5px 0px;
}

.imgred {
	float: left;	
	height: 49px;	
	width: 49px;
	margin-right: 50px;
	margin-left: 0px;
	margin-bottom: 15px;
}

.imgh2 {
   float:left;
	margin: 2px 10px 0px;
	width: 180px;
	height: 135px;
}

.imgh2mini {
   float:left;
	margin: 2px 10px 0px;
	width: 240px;
	height: 180px;
}

.embedpdf{
	width: 100%;
	min-height: calc(100% - 305px);
	position: absolute;
	left: 0;
	top: 305;
}

.imagen {
   margin: 5px 5px 5px 5px;
   max-width: 100%;
}

span {
   font-family: Futura, Verdana, Arial, sans-serif;
	font-size:25px;
   color:#0B14E6;	
   font-weight:bold;
}

h2{
	font-family: Futura, Verdana, Arial, sans-serif;
	font-size:27px;
	color: #000000;
	padding: 10px 5px 10px 5px;	
	margin-left: 5px;
	margin-right: 5px;	
	background-color: #EBEBEB;
	border-radius: 10px;	
}

h1{
	font-family: Futura, Verdana, Arial, sans-serif;
	font-size:27px;
	color:#000000;  
	padding-top: 10px;  
	padding-bottom: 5px;
	padding-left: 20px;
	padding-right: 20px;
	background: url(images/tit_bg.gif) bottom repeat-x;
}

h3{
	font-family: Futura, Verdana, Arial, sans-serif;
	font-size:27px;
	min-height: 20px;
   color: #000000;	
	padding: 5px 35px 5px 35px;	
	margin-left: 5px;
	margin-right: 5px;
	background-color: #deebff;
	border-radius: 10px;
}

section{
	font-family: Futura, Verdana, Arial, sans-serif;
	font-size:27px;
	color: #000000;
	padding-top: 10px;	
	padding-bottom: 10px;
	padding-left: 5px;
	padding-right: 5px;
	margin-top: 15px;	
	margin-bottom: 15px;
	margin-left: 5px;
	margin-right: 5px;	
	background-color: #EBEBEB;
	border-radius: 10px;	
}

pre {
	background-color: #f4f4f4;
   color: green; /* Cambia el color del texto a verde */
   padding: 10px;
   border-radius: 5px;
   overflow: auto;
}

footer{
	font-size: 26px;
	color: #FFFFFF;
	text-align: center;
	clear:both;
	padding: 15px 5px 15px 5px;
	height: 340px;
	background: #252525;
}

footer a{
	color: #FFFFFF;
	font-size: 26px;
	text-decoration: underline;
}

.language-switcher {
   /* Cambiamos de absolute a relative para que AdSense y el logo no las tapen */
   position: relative; 
   top: 0;
   right: 0;
        
	/* Alineación y espaciado */
   display: flex;
   justify-content: right; /* Las centramos para que no choquen con los bordes */
   padding: 7px 0;         /* Espacio vertical para que respiren */
   gap: 30px;               /* <--- Aquí las separamos bastante para el dedo */
   width: 100%;             /* Ocupa todo el ancho para centrar bien */
}

.language-switcher img {
   width: 48px;             /* Banderas bien grandes y legibles */
   height: auto;
   border-radius: 4px;
   box-shadow: 0px 2px 6px rgba(0,0,0,0.15); /* Sombra suave para que resalten */
}

}