@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root{
	--colorAzulBoton: #009FD1;

	--colorAzulBotonTexto: #009FD1;
	--colorFondoBarra: #0087B1;
}

html{
	font-size: 24px;
}
.botonsito{
	
	
}
.montserratBlack {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}
.montserratMedium{
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500 !important;
  font-style: normal;
}


.robotoBold {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.header{
	width: 100vw;
	height: 25vw;
	background-image: url(headerCorto2.jpg);
	background-position: center;
	background-size: cover;
	position: relative; /* IMPORTANTE */
}
.logoMain{
	width: 18vw;
	height: 4.5828vw;
	background-image: url(2026/logoFamflix.png);
	background-position: center;
	background-size: contain;
	position: absolute;
	top: 1vw;
	left: 1vw;
}
.botonInicioSesion{
	width: 12vw;
	height: 3vw;
	top: 2vw;
	right: 1vw;
	background-color: var(--colorAzulBoton);
	color: #FFFFFF;
	text-align: center;
	font-size: .8rem;
	position: absolute;
	
	display: flex;
	align-items: center;      /* centra vertical */
	justify-content: center;  /* centra horizontal */
	
	border-radius: 1.5vw; /* 50% de 3vw */
	cursor: pointer;
}
.botonSuscripcion{
	
	position: relative;        /* quitamos absolute */
	margin: auto;
	width: 15vw;
	height: 3vw;
	border-radius: 1.5vw;        /* 50% altura */
	background-color: #fd3939;
	color: #FFFFFF;
	text-align: center;
	font-size: .8rem;
	
	display: flex;
	align-items: center;      /* centra vertical */
	justify-content: center;  /* centra horizontal */
	cursor: pointer;
	box-shadow: 0.8vw 0.8vw 1.5vw rgba(128,128,128,0.4);

}
	 .cuadroCodigo2026 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
										.textoNormal{
											font-size: 1.0rem;
										}
										
.botonSuscripcion2{
	
	position: relative;        /* quitamos absolute */
	margin-left: 2rem;
	width: 8rem;
	height: 2vw;
	border-radius: 1.5vw;        /* 50% altura */
	background-color: #FF6868;
	color: #FFFFFF;
	text-align: center;
	font-size: .6rem;
	
	display: flex;
	align-items: center;      /* centra vertical */
	justify-content: center;  /* centra horizontal */
	cursor: pointer;
	box-shadow: 0.8vw 0.8vw 1.5vw rgba(128,128,128,0.4);

}
.cuadroCodigo{
	margin: auto;
	padding: 2rem;
	width: 30vw;
}


.colorAzulTitulo{ color: #04799E; }
.colorTexto{ color: #3E4E53; }

.mb1{ margin-bottom: 1rem !important; }
.mb2{ margin-bottom: 2rem !important; }
.mb3{ margin-bottom: 3rem !important; }
.mb4{ margin-bottom: 4rem !important; }
.mb5{ margin-bottom: 5rem !important; }
.fondoAzul{
	background-color: var(--colorFondoBarra) !important;
}

.barraBotones{
	background-color: var(--colorFondoBarra);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
}
.barraBotonesAbajo{
	background-color: transparent !important;
}
.barraBotonesBoton{
	height: 1.5rem;
	margin: 0 0.5rem;
}
.barraBotonesBoton img{
	height: 1.5rem;
	cursor: pointer;
}
.barraBotonesTexto{
	color: #FFFFFF;
	font-size: .8rem;
	padding-top: .4rem;
}
.fondoPrincipal{
	width: 100vw;
	height: auto;
	background-image: url(2026/fondo.png);
	background-position: bottom;
	background-size:cover;
	background-color: #FFFFFF;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: flex-start;
	min-height: 100rem !important;
	padding-top: 3vw;
}
.fondoSeccion{
	width: 100vw;
}
.titulo{
	font-size: 1.8rem;
	margin: auto;
	text-align: center;
	margin-bottom: 2vw;
}
.subtitulo{
	font-size: 1.3rem;
	
	margin: auto;
	text-align: center;
	margin-bottom: 2vw;
}
.anchosTexto{
	width: 70vw;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 1px solid var(--colorFondoBarra) !important;
    background: var(--colorFondoBarra) !important;
    
}
.ui-accordion .ui-accordion-content {
	    background: var(--colorFondoBarra) !important;

}

@media only screen and (max-width: 1500px) {
	html{ font-size: 20px;}
	.anchosTexto{
		width: 70vw;
	}
	.botonSuscripcion{
		width: 25vw;
		height: 6vw;
		border-radius: 3vw;        /* 50% altura */
		font-size: 1.2rem;
	}
	
}
@media only screen and (max-width: 1200px) {
	html{ font-size: 16px;}
	.anchosTexto{
		width: 80vw;
	}
}
@media only screen and (max-width: 1000px) {
	html{ font-size: 16px;}
}
@media only screen and (max-width: 750px) {
	html{ font-size: 14px;}

	.header{
		background-image: url(2026/headerM.png);
		width: 100vw;
		height: 94.722vw;
		display: flex;
		flex-direction: column;    /* uno debajo del otro */
		align-items: center;       /* centrado horizontal */
		justify-content: flex-start;
		padding: 10vw 0;           /* espacio arriba y abajo */
	}

	.logoMain{
		position: relative;        /* quitamos absolute */
		top: auto;
		left: auto;
		width: 50vw;               /* más grande en móvil */
		height: 12.8vw;
		margin-bottom: 6vw;
	}

	.botonInicioSesion{
		position: relative;        /* quitamos absolute */
		top: auto;
		right: auto;
		width: 40vw;
		height: 10vw;
		border-radius: 5vw;        /* 50% altura */
		font-size: 1.5rem;
	}
	
	.botonSuscripcion{
		width: 40vw;
		height: 10vw;
		border-radius: 5vw;        /* 50% altura */
		font-size: 1.5rem;
	}
	
	.fondoSeccion{
		padding-top: 2rem 5rem;
		background-image: url(2026/fondoM.png);
	}
	
	.anchosTexto{
		width: 90vw;
	}
	
	.cuadroCodigo{
		margin: auto;
		padding: 2rem;
		width: 80vw;
	}
	
	
}

@media only screen and (max-width: 600px) {
	html{ font-size: 12px;}
	.tryCodigoTienes {
    width: 160px !important;
	}
	.botonSuscripcion2 {
    position: relative;
    margin-left: 2rem;
    width: 10rem;
    height: 6vw;
    border-radius: 3vw;
    background-color: #FF6868;
    color: #FFFFFF;
    text-align: center;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0.8vw 0.8vw 1.5vw rgba(128, 128, 128, 0.4);
}
}


@media only screen and (max-width: 500px) {
	html{ font-size: 10px;}
}

@media only screen and (max-width: 400px) {
	html{ font-size: 8px;}
}