@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
	padding-right: 0px;
	padding-left: 0px;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

.fluid {
	clear: both;
	/* [disabled]margin-left: 0; */
	width: 100%;
	float: left;
	display: block;
	/* [disabled]margin-top: 0px; */
}
body {
	background-image: url(imagenes/fondo.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-color: #fff6d7;
	width:100%;
    height:auto;
}
body, td, th {
    font-size: 16px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-weight: bold; /* Negrita ligera */
    color: #0b4f5d; /* Azul oscuro profesional */
    line-height: 1.5; /* Espaciado para legibilidad */
}
* {
    font-weight: bold; /* Aplica negrita a todos los elementos */
}
a {
    text-decoration: none; /* Quita el subrayado */
}
.button {
    display: inline-block;
    padding: 10px 20px; /* Espaciado interno por defecto */
    font-size: 16px;
    font-family: 'Verdana', sans-serif;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, #0B4F5D, #3FB4C5);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
    min-width: 120px; /* Botones con tamaño mínimo */
    max-width: 250px; /* Tamaño máximo para evitar que ocupen demasiado espacio */
}

.button:hover {
    background: linear-gradient(90deg, #3FB4C5, #0B4F5D);
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}
.button:visited {
    color: #faddc3; /* Ejemplo: Cambia a rojo oscuro */
}
.button:active {
    transform: translateY(2px);
    box-shadow: 0px 2px 4px rgba(165, 79, 47, 0,8);
}
div.container {
    text-align: center;
}

.fluidList {
	list-style: none;
	list-style-image: none;
	margin-bottom: 0;
	margin-left: -90px;
	margin-right: 0px;
	margin-top: 11px;
	padding-bottom: 0;
	padding-left: 1px;
	padding-right: 107px;
	padding-top: 8px;
}

/* Mobile Layout: 480px and below. */
  
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 86.45%;
	padding-left: 2.275%;
	padding-right: 2.275%;
	clear: none;
	float: none;
}
#div1 {
}
#fondo {

}
.elemento {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-weight: bold;
	color: #FFF;
	width: 21.0526%;
	clear: none;
	margin-left: 5.2631%;
	position: static;
	height: auto;
	left: -15px;
	top: -10px;
}
#lista {
}
.menu {
}

#audio {
}
#contacto {
}
#videos {
	color: #0b4f5d;
}
#texto {
	font-size: xlarge;
	/* [disabled]margin-left: 0%; */
}
#texto {
	font-size: xlarge;
	display: block;
	text-align: left;
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-weight: bold;
	color: #0b4f5d;
}
#botones {
}
#video1 {
	max-width: 100%;
	margin-left:  auto;
	align-content: center;
	margin-top: auto;
	margin-right:auto;
}
#video2 {
	max-width: 100%;
	margin-left:  auto;
	align-content: center;
	margin-top: auto;
	margin-right:auto;
}
#video3 {
	max-width: 100%;
	margin-left:  auto;
	align-content: center;
	margin-top: auto;
	margin-right:auto;
}
#video4 {
	max-width: 100%;
	margin-left:  auto;
	align-content: center;
	margin-top: auto;
	margin-right:auto;
}
#video5 {
	max-width: 100%;
	margin-left:  auto;
	align-content: center;
	margin-top: auto;
	margin-right:auto;
}
#video6 {
	max-width: 100%;
	margin-left:  auto;
	align-content: center;
	margin-top: auto;
	margin-right:auto;
}
#canvas {
	max-width: 45%;
	margin-left:  auto;
	align-content: center;
	margin-top: auto;
	margin-right:auto;
}
#audio1 {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: small;
	font-weight: bold;
	color: #0b4f5d;
}
#player {
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

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

.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
	clear: none;
	float: none;
	margin-left: auto;
}
body {
	background-image: url(imagenes/fondo_2.jpg);
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #fff6d7;
	width:100%;
    height:auto;
}
#div1 {
	color: #0b4f5d;
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-weight: bold;
}
#fondo {
	text-align: center;
}
#canvas {
	max-width: 70%;
	align-content: center;
	margin-top: auto;
	margin-left:auto;
	margin-right:auto;
}

.elemento {
	margin-top: 5px;
	top: 0px;
	width: 23.0769%;
	clear: none;
	margin-left: 2.5641%;
	position: static;
	height: auto;
	left: 0pt;
	right: -17px;
	text-align: left;
}
#lista {
}
.menu {
	text-align: left;
}
#contenido {
	font-family: "Trebuchet MS", Arial, sans-serif;
	color: #0b4f5d;
	font-size: large;
	font-weight: bold;
}
#audio {
}
#contacto {
}
#videos {
	color: #0b4f5d;
	top: auto;
}
#texto {
	font-size: medium;
	display: block;
	text-align: left;
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-weight: bold;
	color: #0b4f5d;
	margin-top: 2px;
}
#botones {
}
#audio1 {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: medium;
	font-weight: bold;
	color: #0b4f5d;
	margin-top: 3px;
}
#player {
}
#titulo {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: x-large;
	font-weight: bold;
	color: #0b4f5d;
	margin-top: 5px;
}	
.hide_tablet {
display: none;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
body {
	background-image: url(imagenes/fondo.jpg);
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #fff6d7;
	width:100%;
    height:auto;
}
.gridContainer {
	width: auto;
	max-width: none;
	padding-left: 0%;
	padding-right: 0%;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
}
#div1 {
}
.elemento {
	width: 0%;
	/* [disabled]margin-left: 0%; */
	clear: none;
	font-size: xx-large;
	position: static;
	height: auto;
	text-align: left;
	margin-left: 1.6949%;
	margin-right: -65pt;
	font-family: Arial;
	left: -27px;
	right: -30px;
}
#lista {
}
.menu {
}
#contenido {
	margin-top: -8px;
	font-size: xx-large;
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-weight: bold;
	text-align: center;
	color: #0b4f5d;
}
#audio {
	text-align: right;
}
#contacto {
}
#videos {
	color: #0b4f5d;
	font-size: x-large;
}
#texto {
	font-size: x-large;
	margin-left: 14%;
	font-weight: 500;
	text-align: left;
	color: #0b4f5d;
	display: block;
	margin-right: auto;
	margin-top: auto;
}
	
#texto p br {
}
#texto p {
}
#texto p {
}
#texto p {
}
#texto p {
}
.button {
        padding: 8px 14px; /* Reduce el espaciado interno */
        font-size: 14px; /* Texto más pequeño */
        border-radius: 6px; /* Bordes más compactos */
        min-width: 100px; /* Reduce el tamaño mínimo */
        max-width: 200px; /* Limita el tamaño máximo */
    }

#botones {
}
#textovictor {
	text-align: left;
	font-weight: 600;
	font-size: x-large;
	color: #FEFCE4;
}
#audio1 {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: large;
	font-weight: bold;
	color: #0b4f5d;
	margin-top: 10px;
}
#player {
}
#titulo {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 42px;
	font-weight: bol;
	color: #0b4f5d;
	margin-top: 20px;
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}
@media only screen and (min-width: 1366px) {
body {
	background-image: url(imagenes/fondox2.jpg);
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #fff6d7;
	width:100%;
    height:auto;
}
}
@media only screen and (max-width: 1024px) and (aspect-ratio: 4/3) {
body {
	background-image: url(imagenes/fondo_3.jpg);
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #fff6d7;
	width:100%;
    height:auto;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) 
 and (-webkit-min-device-pixel-ratio: 2) {
body {
	background-image: url(imagenes/fondo_3.jpg);
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #fff6d7;
	width:100%;
    height:auto;
}
}
 @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) 
 and (-webkit-min-device-pixel-ratio: 2) {
body {
	background-image: url(imagenes/fondo_3.jpg);
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #fff6d7;
	width:100%;
    height:auto;
}
}
@media (max-width: 480px) {
    .button {
        padding: 6px 10px; /* Espaciado más compacto */
        font-size: 12px; /* Texto más pequeño */
        border-radius: 4px; /* Bordes pequeños */
        min-width: 80px; /* Botón más pequeño */
        max-width: 150px; /* Máximo tamaño en móviles */
    }
}