/*
Theme Name: CandyFiesta 2026
Theme URI: http://poeticavisual.com
Description: Motel
Version: 1
Author: Zabdiel
Author URI: http://poeticavisual.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;
}

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: #e7b809;
	--marino: #051c48;
	--azul: #2c2e83;
	--cielo: #01A9DB;
	--celeste: #A9F5F2;
	--azulclaro: #CEF6F5;

	--guinda: #571546;
	--vino: #8f083f;
	--rojo: #c50039;
	--rojo2: #B40404;
	--rojoclaro: #F5A9A9;

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

	--morado: #870eff;
	--morado2: #6800d0;
	--morado3: #4f019d;
	--morado4: #42057e;
	--moradoclaro: #D8CEF6;
	
	--cafe: #AB8126;
	--cafeclaro: #F6E3CE;

	--naranja: #FF8C00;
	--naranja2: #ffb600;
	--naranjaclaro: #FFEAC4;
	
	--amarillo: #FFD700;
	--amarillo2: #ffed00;
	--amarilloclaro: #F2F5A9;

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

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

	--alfa: #ececec;
	--rata: #3f3e3e;
	--gris: #5b626b;

	--gris1: #b2b2b1;
	--gris2: #575756;
	--gris3: #3f3e3e;
	--gris5: #555;
	--gris6: #a6a6a6;
	--gris9: #999;
	--gris10: #AEB6BF;
	--grisclaro: #d9d9d9;
	--grisclaro2: #cacaca;

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

	--alternate: #EBEBEB;
	--hover: #fffbe1;

	--hoverblack: #d6d3bd;

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

	--g-amarillo: #f4d03f;
	--g-naranja: #eb984e;
	--g-verde: #52be80;
	--g-rosa: #a569bd;
	--g-rojo: #e74c3c;
	--g-azul: #5499c7;
	--g-gris: #aab7b8;
	--g-oxford: #5d6d7e;
	--g-petroleo: #1a5276;
	--g-azul2: #2980b9;
	--g-azul3: #7fb3d5;
	--g-dorado: #efba10;
	--g-plata: #d7d7d7;
	--g-bronce: #CD7F32;
}

html{
	background: #999;
	scroll-behavior: smooth;
}

body {
	margin-left: 0px;
	margin-top: 50px;
	transition: margin-left 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

body,
input,
textarea,
select {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	line-height: 18px;
	color: var(--gris);
}

main {
	padding: 20px;
	background: #bbbdc0;
	min-height: calc(100vh - 90px); /* 146px */
}

header {
	width: 100%;
	height: 50px;
	top: 0;
	position: fixed;
	padding: 0px 20px;
	background: #000000;
	box-shadow: 0px 3px 10px -4px var(--oscuro);
	z-index: 200;
	overflow: hidden;
}

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

#page-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background: var(--negro) 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(--cielo);
 
	-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
			animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
#page-loader .preloader-interior:before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	border-radius: 50%;
	border: 8px solid transparent;
	border-top-color: var(--dorado);
 
	-webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
		animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
#page-loader .preloader-interior:after {
	content: "";
	position: absolute;
	top: 15px;
	left: 15px;
	right: 15px;
	bottom: 15px;
	border-radius: 50%;
	border: 8px solid transparent;
	border-top-color: var(--blanco);
 
	-webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
		animation: spin 1.5s 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 */
	}
}

.ir-arriba {
	display:none;
	padding:10px;
	background: var(--dorado);
	font-size:20px;
	color: var(--blanco);
	cursor:pointer;
	position: fixed;
	bottom:20px;
	right:20px;
	border-radius: 2px;
}

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

.b-color { background: var(--color); }
.b-marino { background: var(--marino); }
.b-azul { background: var(--azul); }
.b-cielo { background: var(--cielo); }
.b-celeste { background: var(--celeste); }
.b-azulclaro { background: var(--azulclaro); }
.b-guinda { background: var(--guinda); }
.b-vino { background: var(--vino); }
.b-rojo { background: var(--rojo); }
.b-rojo2 { background: var(--rojo2); }
.b-rojoclaro { background: var(--rojoclaro); }
.b-rosa { background: var(--rosa); }
.b-violeta { background: var(--violeta); }
.b-rosaclaro { background: var(--rosaclaro); }
.b-morado { background: var(--morado); }
.b-moradoclaro { background: var(--moradoclaro); }
.b-cafe { background: var(--cafe); }
.b-cafeclaro { background: var(--cafeclaro); }
.b-naranja { background: var(--naranja); }
.b-naranja2 { background: var(--naranja2); }
.b-naranjaclaro { background: var(--naranjaclaro); }
.b-amarillo { background: var(--amarillo); }
.b-amarillo2 { background: var(--amarillo2); }
.b-amarilloclaro { background: var(--amarilloclaro); }
.b-verde { background: var(--verde); }
.b-verde2 { background: var(--verde2); }
.b-limon { background: var(--limon); }
.b-verdeclaro { background: var(--verdeclaro); }
.b-negro { background: var(--negro); }
.b-rata { background: var(--rata); }
.b-gris { background: var(--gris); }
.b-gris9 { background: var(--gris9); }
.b-gris10 { background: var(--gris10); }
.b-blanco { background: var(--blanco); }
.b-alpha { background: var(--alpha); }
.b-alternate { background: var(--alternate); }
.b-hover { background: var(--hover); }

.t-color { color: var(--color); }
.t-marino { color: var(--marino); }
.t-azul { color: var(--azul); }
.t-cielo { color: var(--cielo); }
.t-celeste { color: var(--celeste); }
.t-guinda { color: var(--guinda); }
.t-vino { color: var(--vino); }
.t-rojo { color: var(--rojo); }
.t-rojo2 { color: var(--rojo2); }
.t-rosa { color: var(--rosa); }
.t-violeta { color: var(--violeta); }
.t-morado { color: var(--morado); }
.t-cafe { color: var(--cafe); }
.t-cafeclaro { color: var(--); }
.t-naranja { color: var(--naranja); }
.t-naranja2 { color: var(--naranja2); }
.t-amarillo { color: var(--amarillo); }
.t-amarillo2 { color: var(--amarillo2); }
.t-verde { color: var(--verde); }
.t-verde2 { color: var(--verde2); }
.t-limon { color: var(--limon); }
.t-negro { color: var(--negro); }
.t-rata { color: var(--rata); }
.t-blanco { color: var(--blanco); }

strong.naranja { color: var(--naranja); }

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

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

.borde { border: 1px solid #000; }

.imprimir { display:none; }

a { text-decoration: none; }

h1 {
	font-size: 26px;
	line-height: 30px;
	font-weight: bold;
	color: var(--negro);
	text-align: center;
	margin: 0px 10px 15px 0px;
}
h1 a { color: var(--negro); }
h1 a:hover { color: var(--blanco); }

h2 {
	font-size: 22px;
	line-height: 26px;
	font-weight: normal;
	color: var(--vino);
	text-align: center;
	margin-bottom: 15px;
}
h2 a { color: var(--rojo); }
h2 a:hover { color: var(--blanco); }

h3 {
	font-size: 20px;
	line-height: 24px;
	font-weight: normal;
	color: var(--naranja);
	text-align: left;
	margin-bottom: 10px;
	display: block;
	width: 100%;
	text-align: center;
}

h4 {
	font-size: 18px;
	line-height: 22px;
	font-weight: normal;
	color: var(--azul);
	text-align: left;
	margin-bottom: 10px;
	display: block;
	width: 100%;
}
h4 a { color: var(--cielo); }
h4 a:hover { color: var(--blanco); }

h5 {
	font-size: 16px;
	line-height: 20px;
	font-weight: normal;
	color: var(--verde);
	text-align: left;
	margin-bottom: 10px;
	display: block;
	width: 100%;
}

p {
	font-size: 13px;
	line-height: 16px;
	font-weight: normal;
	color: var(--gris);
}

p a { color:#00a2dc; }
p a:hover { color: #ff3366; }

sup {
	vertical-align: super;
	font-size: smaller;
}

hr {
	margin: 5px 0px;
	border-top: 1px solid #c9c9c9;
	border-bottom: 2px solid #fff;
}

span.marcar { background:var(--naranja); color:var(--blanco); padding:1px 2px; }

.codex {
	text-align: left;
	font-size: 14px;
	line-height: 20px;
	color: var(--negro);
}

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

a.logo {
	background: url(images/logo.png) no-repeat top center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 40px;
	height: 40px;
	margin: 5px 0px 0px 5px;
	padding: 0px;
	display: inline-block;
	}
	a.logo:hover { background-color: none; }

.menutop {
	width: auto;
	float: right;
	display: inline-block;
	margin-right: 40px;
}

.hoy {
	width: 73px;
	margin: 8px 0px 0px 0px;
	display: block;
	float: left;
	font-size: 12px;
	line-height: 16px;
	text-align: right;
	color: var(--amarillo);
}

#reloj { color: var(--naranja); }

.modo {
	width: 55px;
	margin: 8px 0px 0px 0px;
	display: block;
	float: left;
	font-size: 12px;
	line-height: 16px;
	text-align: right;
	color: var(--rojo);
}

nav {
	margin-top: 8px;
	display: block;
	float: right;
}

nav ul {
	overflow:hidden;
	list-style:none;
}
	nav ul li { float:left; }
	nav ul li a {
		font-size: 20px;
		color: var(--blanco);
		margin-left: 10px;
		padding: 5px;
		display:block;
	}
	nav ul li span { margin: 0px; }
	nav ul li a:hover { color: var(--dorado); }

	nav li ul {
		position: absolute;
		width: 150px;
		left: -999px;
		padding: 0;
		margin: 0px 0px 0px -110px;
	}

ul.menu {
	text-align: center;
	list-style:none;
	margin: 30px 0px 10px 0px;
}
	ul.menu li { display: inline-block; margin: 0px 5px 20px 5px; }
	ul.menu li a {
		padding: 6px 12px;
		font-size: 14px;
		color: var(--blanco);
		background: var(--gris);
		border-bottom: 2px solid var(--dorado);
	}
	ul.menu li a:hover {
		color: var(--negro);
		background: var(--dorado);
		border-bottom: 2px solid var(--rojo);
	}
	ul.menu li a.activo {
		color: var(--negro);
		background: var(--plata);
		border-bottom: 2px solid var(--rojo);
	}

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

.contenido {
	display: block;
	margin: 0px 0px 20px 0px;
	padding: 30px;
	background: rgba(255,255,255,0.3);
	border-radius: 12px;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.09) inset;
}

.contenido a { color: var(--azul); }

.padding { padding: 16px; }
.margen { margin: 12px; }
.margen-modal { margin: 30px 16px 16px 16px; }

.flex-horizontal {
	display: flex;
	align-items: center; /* Centra verticalmente */
}

.flex-vertical {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 300px;
}

.col-centro {
	max-width: 450px; 
	margin: 10px auto 10px;
}

.col-costo {
	display: inline-block;
	float: left;
	margin-right: 10px;
}
	.col-costo label { width: 90%; left: -10px; }

.col-formulario {
	display: grid;
	grid-auto-rows: minmax(30px, auto);
	grid-template-columns: 70px 1fr; 
	grid-gap: 10px;
	padding: 0px;
	margin: 0px;
}

.formulario {
	padding: 8px 0px;
}

.bloques {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-gap: 20px;
}

.bloques-mini {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
	grid-gap: 20px;
}

.bloques-contrato {
	display: grid;
	grid-template-columns: minmax(400px, 500px) minmax(320px, 350px) 1fr minmax(340px, 360px);
	grid-gap: 20px;
}

.uno, .uno-basic {
	width: 100%;
	padding: 0px;
	margin: 0px 0px 20px 0px;
	border: 1px solid var(--blanco);
	border-radius: 4px;
	box-shadow: 0px 3px 10px -6px var(--gris9);
}

.dos, .tres, .cuatro, .cinco, .seis, .siete, .dos-basic, .tres-basic, .cuatro-basic, .cinco-basic, .seis-basic, 
.dosuna-basic,
.unados, .unatres, .unatresdos, .dosuna, .tresdos, .cuatrotres, .cuatrouna,
.listalogos, .cuartos {
	display: grid;
	grid-auto-rows: minmax(50px, auto);
	grid-gap: 20px;
	/*grid-auto-flow: dense;*/
	padding: 0px;
	margin-bottom: 20px;
}
.dos-basic, .tres-basic, .cuatro-basic, .cinco-basic, .seis-basic,
.dosuna-basic { margin-bottom: 0px; }

.unados { grid-template-columns: 1fr 2fr; }
.unatres { grid-template-columns: 1fr 3fr; }
.unatresdos { grid-template-columns: 220px 3fr 2fr; }
.dosuna, .dosuna-basic { grid-template-columns: 2fr 1fr; }
.tresdos { grid-template-columns: 3fr 2fr; }
.cuatrouna { grid-template-columns: 4fr 1fr; margin-bottom: 0px; }
.cuatrotres { grid-template-columns: 4fr 3fr; }
.dos, .dos-basic { grid-template-columns: repeat(2, 1fr); }
.tres, .tres-basic { grid-template-columns: repeat(3, 1fr); }
.cuatro, .cuatro-basic { grid-template-columns: repeat(4, 1fr); }
.cinco, .cinco-basic { grid-template-columns: repeat(5, 1fr); }
.seis, .seis-basic { grid-template-columns: repeat(6, 1fr); }
.siete { grid-template-columns: repeat(7, 1fr); }

.listalogos { grid-gap: 0px; grid-template-columns: repeat(4, 1fr); margin: 0px; }
.cuartos { grid-gap: 15px; grid-template-columns: repeat(5, 1fr); }


	.item {
		position: relative;
		grid-column: span 1;
		grid-row: span 1;
		flex-direction: column;
		justify-content: space-between;
		padding: 16px;
		border-radius: 12px;
		box-shadow: 1px 1px 1px rgba(0,0,0,0.09) inset;
	}



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

.modal {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--blanco);
	max-height: 75vh;
	overflow-y: auto;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	z-index: 9991;
}
	.modal h4 { margin-bottom: 0px; }
	.modal p { margin-bottom: 5px; }

.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9990;
}

.close-btn {
	position: relative;
	float: right;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	color: var(--blanco);
	background: var(--rojo);
	border: none;
	padding: 4px 8px;
	border-radius: 50%;
}

.close-btn:hover { background: var(--dorado); }

.modal img {
	max-width: 100%; /* Ajustar el ancho máximo de la imagen al contenedor */
	height: auto; /* Permitir que la altura se ajuste automáticamente */
}

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

#modalContentImagen {
	max-width: 100%; /* Ancho máximo del 90% de la ventana modal */
	overflow-x: auto; /* Agregar desplazamiento horizontal según sea necesario */
	height: 100%; /* Establecer la altura igual al 100% de la ventana modal */
	cursor: pointer; /* Cambiar el cursor para indicar que la imagen es clickeable */
}

#modalContentImagen img {
	max-width: 100%; /* Ajustar el ancho máximo de la imagen al contenedor */
	height: auto; /* Permitir que la altura se ajuste automáticamente */
	transition: transform 0.3s ease; /* Agregar una transición suave para el efecto de zoom */
}

#modalContentImagen.zoom-in img {
	transform: scale(1.3); /* Hacer zoom en la imagen al 120% */
}



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



img.miniqr, img.minilogo {
	width: 50px;
	height: 50px;
	border: 4px solid var(--blanco);
}