@font-face {
            font-family: 'Chulapa';
            src: url('font/Chulapa-Regular.otf') format('opentype');
            font-weight: normal;
            font-style: normal;
        }
        @font-face {
            font-family: 'Chulapa';
            src: url('Chulapa-Bold.otf') format('opentype');
            font-weight: bold;
            font-style: normal;
        }
        @font-face {
            font-family: 'Chulapa';
            src: url('Chulapa-Light.otf') format('opentype');
            font-weight: lighter;
            font-style: normal;
        }
        body { 
            margin: 0; 
            padding: 0; 
            color: white; 
            text-align: center; 
            font-family: 'Chulapa', sans-serif;
            position: relative;
        }
        .video-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -2;
        }
		header {
			position: relative;
			padding-top: -20%;  /*Asegura espacio para el logo */
		}

		.logo {
			top: 0; /* Pegado al borde superior */
			width: 300px; /* Ajusta el tamaño si es necesario */
			z-index: 1000;
		}
		.button-img {
        transition: filter 0.3s ease-in-out;
        cursor: pointer;
		}

		.button-img:hover {
			filter: brightness(70%);
			cursor: pointer;
		}

		.highlight-box {
			background: white;
			color: #0a2c61;
			padding: 15px 20px;
			border-radius: 10px;
			display: inline-block;
			font-weight: bold;
			margin-top: -20px; /* Empuja el texto para no chocar con el logo */
		}
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('img/web/Recurso132026.png') no-repeat center center;
            background-size: cover;
            opacity: 1.7;
            z-index: -1;
        }
        .content {
            position: relative;
            z-index: 1;
            
        }
        .btn-custom { 
            background-color: #ffffff; 
            color: #0a2c61; 
            font-weight: bold; 
        }
        .highlight-box {
            background: white; 
            color: #0a2c61; 
            padding: 10px 20px; 
            border-radius: 10px;
            display: inline-block; 
            font-weight: bold;
        }
        .hanstag {
            width: 100%; 
            height: auto;
			padding: 20px 20px;
        }
        .live-section { 
            background: white; 
            color: #0a2c61; 
            padding: 40px 0; 
        }
        .aniversario { 
            width: 200px; 
        }
		.Pulsera { 
            width: 300px; 
        }
		.directo { 
            width: 300px; 
        }
		.secPulseras { 
          text-align: center;
		  justify-content: center; 
		   align-items: center;
			padding: 20px 20px;		   
        }
        footer {
            background: url('img/web/Recurso132026.png') no-repeat center center;
            background-size: cover;
            opacity: 0.7;
            color: white;
            padding: 20px 20px;
        }
		.piedepag{
			hyphens: manual;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			justify-content: center; /* Centra horizontalmente */
			align-items: center;
			flex-wrap: wrap;
			padding-left: 1.5em;
		}
		.piedepagdatos{	   
			hyphens: manual;
			box-sizing: border-box;
			min-height: 1px;
			position: relative;
			display: flex;
			width: 50%;
		}
		.piedepag1{
			text-align: left;
			justify-content: left; 
			align-items: left;
			padding-right: 15px;
		}
		.piedepag2{
			padding: 5px 5px;
			border-left: 2px solid white;
		}
		.imganiversariopie{
			transform: scale(0.5); /* Reduce la imagen al 50% */
			display: block; /* Evita espacios extra si es inline */
			margin: auto;
		}
		.piedepag3{
			text-align: left;
			padding: 10px 10px;
			border-left: 2px solid white;
		}
	.separador{
		padding: 20px 20px;
		text-align: center;
		box-sizing: border-box;
		display: flex;
		direction: ltr;
		divider-border-style: solid;
		border-top: 2px solid white;
		width: 84%;
		margin: 0 auto;
	}
	.iframe-container {
    position: relative;
    width: 100%;  /* O el porcentaje que necesites */
    padding-top: 20%; /* Proporción 16:9 (ajusta si es necesario) */
    overflow: hidden;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.fotosPort{
	transform: scale(0.7); /* Reduce la imagen al 50% */
}