/*
Theme Name: Africam 3
Theme URI: http://poeticavisual.com
Description: Pepsico
Version: 1
Author: Zabdiel
Author URI: http://poeticavisua.com
*/

/* RESET */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }body {line-height: 1; }ol, ul {list-style: none; }blockquote, q {quotes: none; }blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none; }:focus {outline: 0; }ins {text-decoration: none; }del {text-decoration: line-through; }table {border-collapse: collapse; border-spacing: 0; } * {padding: 0; margin: 0; border: 0; }

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, form, fieldset, input, textarea, p, blockquote, th, td { 
	padding:0;
	margin:0; }

fieldset, img { border:0 }

ol, ul, li { list-style:none }

:focus { outline:none }

:root {
	--color: #0f2b49;
	--marino: #051c48;
	--azul: #2e4b8f;
	--cielo: #01A9DB;
	--celeste: #A9F5F2;
	--azulclaro: #D5DDE5;

	--guinda: #571546;
	--vino: #8f083f;
	--rojo: #e01b22;
	--rojo2: #B40404;
	--rojo3: #610B0B;
	--rojoclaro: #FEDBDB;
	--rojoclaro2: #FBC5C5;

	--rosa: #e5007d;
	--violeta: #BF00FF;
	--rosaclaro: #f781e5;

	--morado: #8000FF;
	--moradoclaro: #BCA9F5;
	
	--cafe: #8f5634;
	--cafe2: #DBA901;
	--cafeclaro: #F1DDC7;

	--naranja: #FF8C00;
	--naranja2: #ffb600;
	--naranjaclaro: #FFEAC4;
	
	--amarillo: #ffd302;
	--amarillo2: #cac40f;
	--amarillo3: #b29a05;
	--amarilloclaro: #F5F6CE;
	--amarilloclaro2: #F2F5A9;

	--verde: #298A08;
	--verde2: #94d500;
	--verde3: #0B610B;
	--verde4: #0B3B0B;
	--limon: #BCF5A9;
	--verdeclaro: #D8F6CE;
	--turquesa: #45c1a3;
	
	--dorado: #efba10;

	--negro: #1A1D23;
	--oscuro: #21252E;
	--oxford: #343A45;
	--gray: #9DA6AE;
	--plata: #D8D8D8;

	--rata: #3f3e3e;
	--gris: #5b626b;
	--gris5: #555;
	--gris6: #a6a6a6;
	--gris9: #999;
	--gris10: #AEB6BF;

	--gris1: #6b7580;
	--gris2: #525d6a;
	--gris3: #2b3644;
	--gris4: #a9a9aa;
	--grisclaro: #d9d9d9;
	--grisclaro2: #cacaca;

	--blanco: #fff;
	--alpha: #f1f1f1;

	--alternate: #EBEBEB;
	--hover: #f6fff5;

	--td: #f5f5f5;
	--border: #C1C3D1;

	--amarillo: #f4d03f;
	--naranja: #eb984e;
	--verde: #52be80;

	--oxford: #5d6d7e;
	--petroleo: #1a5276;

	--dorado: #efba10;
	--plata: #d7d7d7;
	--bronce: #CD7F32;
}

html{
	scroll-behavior: smooth;
}

body,
input,
textarea,
select {
	font-family: "Roboto", Arial, sans-serif;
	font-size: 15px;
	line-height: 22px;
	font-weight: normal;
	color: var(--rata);
}

body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background: #90278d;
	background-image: url('images/africam-2600.jpg'); /* Reemplaza con la URL de tu imagen */
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

a { text-decoration:none; }
a, a:visited {	text-decoration: none; }
a:hover { text-decoration: none; }

.izqueirda, .left { float:left; }
.derecha, .right { float:right; }
.centro, .center { text-align: center; }
.justificado { text-align: justify; }
.clear { clear: both; }
.inline { display: inline-block; }

img.alignright { margin: 3px 0 10px 20px; display: inline; }
img.alignleft { margin: 3px 20px 10px 0; display: inline; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
img.centered { display: block; margin-left: auto; margin-right: auto; }

.alignleft { float: left; }
.alignright { float: right; }
.aligncenter { text-align:center; }

.salto { height: 90px; }

#wrap {
	max-width:1024px;
	margin:0px auto 0px;
	padding: 0px 20px;
	clear: both;
	overflow: hidden;
}

/*************************************/

#page-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background: #FFF none repeat scroll 0% 0%;
	z-index: 99999;
}
#page-loader .preloader-interior {
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	width: 80px;
	height: 80px;
	margin: -40px 0 0 -40px;
	border-radius: 50%;
	border: 8px solid transparent;
	border-top-color: var(--naranja);
 
	-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
			animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
	0%   { 
		-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(0deg);  /* IE 9 */
		transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(360deg);  /* IE 9 */
		transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}
}
@keyframes spin {
	0%   { 
		-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(0deg);  /* IE 9 */
		transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(360deg);  /* IE 9 */
		transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}
}

/*************************************/

header {

	}

ul.menu {
	text-align: center;
	list-style:none;
	margin: 5px 0px 15px 0px;
}
	ul.menu li { display: inline-block; margin: 0px; }
	ul.menu li a {
		padding: 10px 8px 10px 8px;
		font-size: 14px;
		color: var(--blanco);
		background: var(--cielo);
		border-radius: 0px 0px 8px 8px;
	}
	ul.menu li a:hover {
		color: var(--blanco);
		background: var(--naranja);
	}
	ul.menu li a.activo {
		color: var(--blanco);
		background: var(--rojo);
	}

/*--------------------------------------------------------------
# generales
--------------------------------------------------------------*/

h1, h1 a {
	letter-spacing:1px;
	display: inline-block;
	box-sizing: border-box;
	font-size: 34px;
	line-height: 42px;
	font-weight: bold;
	color: var(--rojo);
	margin: 0px 0px 0px 0px;
	clear:both;
	text-align: center;
}
h2, h2 a {
	box-sizing: border-box;
	font-size: 30px;
	line-height: 40px;
	font-weight: normal;
	color: var(--rojo);
	margin: 10px 0px 10px 0px;
	clear:both;
	text-align: center;
}
h3, h3 a {
	font-size: 26px;
	line-height: 34px;
	font-weight:bolder;
	color: var(--amarillo);
	clear:both;
	margin: 40px 0px 10px 0px;
	clear:both;
	text-align: center;
}
h4, h4 a {
	font-size: 20px;
	line-height: 28px;
	font-weight:bolder;
	color: var(--blanco);
	clear:both;
	margin:10px 0px 10px 0px;
	clear:both;
	text-align: center;
}
h5, h5 a {
	font-size: 18px;
	line-height: 24px;
	font-weight:normal;
	clear:both;
	margin:0px 0px 10px 0px;
	clear:both;
	text-align: center;
	color: var(--cafeclaro);
} 
h6, h6 a {
	font-size: 18px;
	line-height: 24px; 
	text-transform: uppercase;
	font-weight: 200;
	letter-spacing:2px;
	margin-bottom: 10px;
	clear:both;
	text-align: center;
} 

p {
	font-size: 16px;
	line-height: 20px;
	color: var(--blanco);
}

p a { color:var(--cielo); }
strong {
	color: var(--amarillo);
}

.blanco { color: var(--blanco); }
.negro { color: var(--negro); }
.gris { color: var(--gris); }
.rata { color: var(--rata); }

.sombra { text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.7); }
.bg-blanco { background: var(--blanco); }
.bg-gris { background: var(--gris); }
.bg-alfa { background: var(--alfa); }

/*--------------------------------------------------------------
# 
--------------------------------------------------------------*/

.dos, .tres, .cuatro, .cinco {
	display: grid;
	grid-gap: 20px;
	grid-auto-flow: dense;
	margin: 0px;
	padding: 0px;
}

.dos {
	grid-template-columns: repeat(2, 1fr);
}
.tres {
	grid-template-columns: repeat(3, 1fr);
}
.cuatro {
	grid-template-columns: repeat(4, 1fr);
}
.cinco {
	grid-template-columns: repeat(5, 1fr);
}

/*--------------------------------------------------------------
# content
--------------------------------------------------------------*/

.africam {
	background: url(images/africam.png) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	width: 100%;
	max-width: 600px;
	aspect-ratio: 6 / 7;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.content {
	top: 0px;
	max-width: 500px;
	margin: 0 auto 0;
	padding: 10px 20px 20px 20px;
}

.content2 {
	top: 0px;
	max-width: 500px;
	margin: 0 auto 0;
	padding: 10px 20px 20px 20px;
	background: rgba(0, 0, 0, 0.8);
	border-radius: 8px;
}
	
	.content2 h2 { color:var(--amarillo); }
	.content2 h3 { color:var(--rosaclaro); margin-top:20px; }
	.content2 h4 { color:var(--rosa); margin:20px 0 5px 0; }

.contenido {
	top: 0px;
	max-width: 700px;
	margin: 0 auto 0;
	margin-top: 20px;
	padding: 10px 20px 40px 20px;
}

.calendario {
	display: grid;
	grid-gap: 0px 0px;
	grid-auto-flow: dense;
	margin: 0px;
	padding: 0px;
	grid-template-columns: 2fr 1fr 1fr;
}

	.calendario > p {
		padding: 5px;
		border-bottom: 1px solid var(--rosaclaro);
	}

.icon {
	display: block;
	text-align: center;
	margin-bottom: 20px;
	font-size: 100px;
	color: var(--amarillo);
}

.premios {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	justify-items: center;
	align-items: top;
}
	.premios p {
		color: var(--blanco);
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	}

/*--------------------------------------------------------------
# 
--------------------------------------------------------------*/

#camera-stream {
	width: 100%; /* El ancho del video ocupará el 100% del contenedor/pantalla */
	height: auto;
	display: block;
	max-width: 90vw;
	max-height: 40vh;
	margin: 0 auto;
}

/*--------------------------------------------------------------
# 
--------------------------------------------------------------*/

label {
	font-size: 15px;
	text-align: left;
	font-weight: normal;
	white-space: nowrap; /* Evita que el texto se rompa en múltiples líneas */
	margin-top: 10px;
	color: var(--blanco);
}

input[type=text], input[type=date], input[type=number], input[type="email"], input[type=password],
textarea {
	padding: 8px;
	width: 100%;
	display: block;
	border: none;
	border-radius: 4px;
	outline: none;
	color: var(--negro);
	background: var(--rosaclaro);
	border: 1px solid var(--vino);
	font-family: "Roboto", Arial, sans-serif;
	margin-bottom: 10px;
	font-size: 18px;
}

input::placeholder {
	color: var(--vino);
}

select {
	padding: 8px;
	margin-bottom: 10px;
	width: 100%;
	display: block;
	border: none;
	border-radius: 4px;
	outline: none;
	color: var(--negro);
	background: var(--rosaclaro);
	border: 1px solid var(--vino);
	font-family: "Roboto", Arial, sans-serif;
	appearance: none;
	cursor: pointer;
	font-size: 18px;
}

	select::after {
		content: "▼";
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		pointer-events: none;
	}
	select option[disabled] {
		color: var(--naranja);
	}

button, a.boton {
	display: inline-block;
	background-color: var(--gris4);
	color: var(--blanco);
	padding: 15px 8px;
	text-decoration: none;
	border-radius: 4px;
	margin-top: 10px;
	font-size: 16px;
}

a.boton {
	display: inline-block;
	background-color: var(--gris4);
	color: var(--blanco);
	padding: 4px 8px;
	text-decoration: none;
	border-radius: 4px;
}

button.amarillo, a.amarillo { background-color: var(--amarillo); color:var(--negro); }
button.naranja, a.naranja { background-color: var(--naranja); }
button.limon, a.limon { background-color: var(--turquesa); }
button.verde, a.verde { background-color: var(--verde3); }
button.cafe, a.cafe { background-color: var(--cafe); }
button.rosa, a.rosa { background-color: var(--rosa); }
button.rojo, a.rojo { background-color: var(--rojo); }
button.azul, a.azul { background-color: var(--azul); }
button.gris, a.gris { background-color: var(--gris4); color:var(--blanco); }
button.oxford, a.oxford { background-color: var(--oxford); }
button.petroleo, a.petroleo { background-color: var(--petroleo); }
button.dorado, a.dorado { background-color: var(--dorado); }
button.plata, a.plata { background-color: var(--plata); }
button.bronce, a.bronce { background-color: var(--bronce); }
button.vino, a.vino { background-color: var(--vino); }
button.cielo, a.cielo { background-color: var(--cielo); }
button.negro, a.negro { background-color: #000; color:var(--amarillo); }

button:hover, a.boton:hover { background-color: var(--naranja); color:var(--negro); }

/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/

#footer {
	margin-bottom: 30px;
}

#login {
	padding: 20px;
}
	#login input { margin-bottom:10px; }


/*--------------------------------------------------------------
# icon
--------------------------------------------------------------*/

@font-face {
	font-family: "IcoFont";
	font-weight: normal;
	font-style: "Regular";
	src: url("fonts/icofont.woff2") format("woff2"),
	url("fonts/icofont.woff") format("woff");
}

[class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'IcoFont' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}

.icon-boleto:before { content: "\f00f"; }
.icon-bici:before { content: "\ee12"; }