/*
// <weight>: Use a value from 300 to 900
// <uniquifier>: Use a unique and descriptive class name

.playfair-<uniquifier> {
  font-family: "Playfair", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
 */

:root {
	--borde-azul: .9vw solid #7186a5;
	--borde-azul: .9vw solid #7186a5;
	
	--texto-familia: "Playfair", serif;
	--texto-azul: #0e415c;
	--fondo-azul: #0e415c;
	--fondo-azul-hover: #034;
	--fondo-gris: #d9d8d2;
}

html {
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }

body {
	max-width: 100%; margin: 0px; padding: 0px; background-color:#fff;
	font-family: 'Arial', 'Helvetica', sans serif; font-size: 16px;
}

a, a:visited {
	color:blue; text-decoration: none;
}

a:hover {
	color: darkblue; text-decoration: underline;
}
a.regresar {
	display: flex; justify-content: center; align-items: center;
	background-color: #070; padding: 1.4vw 2.3vw; border: 1px solid #3c3; border-radius: 1vw;
	font-family: Arial, Helvetica, sans serif; font-size: 4.5vw; font-weight: normal; color: #fff;
	&:hover {
		background-color: #080;
		text-decoration: none;
	}
	> span:first-child {
		padding-right: 1vw;
	}
}

big { font-size: 18px; }
small { font-size: 14px; }
pre { overflow: auto; border: 1px solid #ccc; }
svg { fill: #555; }

picture > img { display: block; margin: 0px; padding: 0px; max-width: 100%; max-height: 100%; }

div.botones {
	display: flex; justify-content: center; align-items: center;
}

#principal {
	position: relative;
	margin: 0px auto; width: 800px; max-width: 100%;
	font-family: var(--texto-familia), serif; font-size: 5vw;
}

.separador {
	padding: 9vw 11vw;
}
@media ( min-width: 900px ){
	.separador {
		padding: 60px 100px;
	}
}

#encabezado {
	.principal {
		padding: 10vw 9vw 6vw;
	}
	.fecha {
		font-size: 8vw; color: #1476bc; text-align: center;
	}
	.redondeada {
		padding: 6vw 0vw 0vw 0vw;
	}
	.hola {
		padding: 9vw 11vw;
	}
}

@media ( min-width: 900px ){
	#encabezado {
		.principal {
			padding: 50px 90px 30px;
		}
		.fecha {
			font-size: 56px;
		}
		.hola {
			padding: 50px 110px;
		}
	}	
}

#cronometro {
	background-color: #c5e8ee;
	color: var(--texto-azul);
	header.encabezado {
		padding: 19vw 0vw 8vw;
		div:nth-child(1) {
			padding: 0% 0% 0% 5%;
			font-size: 6.2vw; line-height: 6vw;
		}
		div:nth-child(2) {
			padding: 0% 5% 0 7%;
		}
	}
	div.contenedor {
		display: grid; grid-template-columns: 17vw 17vw 17vw 17vw 17vw; grid-template-rows: 16dvw;
		grid-gap: 1.5vw; justify-content: center;
		padding: 0vw 0vw 20vw 0vw;
		div.unidad {
			display: flex; flex-direction: column; justify-content: center; align-items: center;
			border-radius: 50%;
			background-color: #06577e;
			color: #fff;
			text-align: center;
			> span:nth-child(1){
				font-family: sans; font-size: 7vw; line-height: 8vw;
			}
			> span:nth-child(2){
				font-size: 3.2vw; line-height: 2.5vw;
			}
		}
	}
}

@media ( min-width: 900px ){
	#cronometro {
		header.encabezado {
			padding: 100px 0px 40px 0px;
			div:nth-child(1) {
				padding: 1px 0px 0px 105px;
				font-size: 42px; line-height: 42px;
			}
			div:nth-child(2) {
				padding: 0% 5% 0 9%;
			}
		}
		div.contenedor {
			display: grid; grid-template-columns: 110px 110px 110px 110px 110px; grid-template-rows: 110px;
			grid-gap: 14px; justify-content: center;
			padding: 0px 0px 115px 0px;
			div.unidad {
				border-radius: 50%;
				> span:nth-child(1){
					font-size: 48px; line-height: 49px;
				}
				> span:nth-child(2){
					font-size: 22px; line-height: 22px;
				}
			}
		}
	}
}

#bloque-azul-1 {
	padding: 28vw 0; background-color: #06577e; text-align: center; 
	font-size: 42vw; color: #eee;
	div:nth-child(1) {
		font-size: 5.3vw; line-height: 7vw;
	}
}

@media ( min-width: 900px ){
	#bloque-azul-1 {
		padding: 200px 0;
		div:nth-child(1) {
			font-size: 38px; line-height: 46px;
		}
	}
}

#itinerario {
	header{
		padding: 10vw 18vw;
		picture {
			img {  }
		}
	}
	.evento {
		text-align: center;
		color: var(--texto-azul);
		margin-bottom: 7vw; padding: 6vw 0vw;
		background-color: #dfdbd1;
		picture {
			display: flex; justify-content: center; align-items: center;
			img {
				max-height: 31vw;
			}
			.camara { max-height: 23vw; }
			.cena { max-height: 24vw; }
			.baile { max-height: 27vw; }
			.paster { max-height: 27vw; }
			.snack { max-height: 28vw; }
		}
		.titulo {
			padding-top: 2vw;
			font-size: 5vw;
		}
		.horario {
			padding-top: 1vw;
			font-size: 6vw;
		}
	}
	
	.evento.izquierda {
		border-radius: 0vw 90vw 90vw 0vw;
	}
	
	.evento.derecha {
		border-radius: 90vw 0vw 0vw 90vw;
	}
}

@media ( min-width: 900px ){
	#itinerario {
		header{
			padding: 80px 180px;
		}
		.evento {
			margin-bottom: 70px; padding: 50px 0px;
			picture {
				img {
					max-height: 200px;
				}
				.camara { max-height: 143px; }
				.cena { max-height: 152px; }
				.baile { max-height: 162px; }
				.pastel { max-height: 165px; }
				.snack { max-height: 170px; }
			}
			.titulo {
				padding-top: 20px;
				font-size: 32px;
			}
			.horario {
				padding-top: 10px;
				font-size: 38px;
			}
		}
		
		.evento.izquierda {
			border-radius: 0px 900px 900px 0px;
		}
		
		.evento.derecha {
			border-radius: 900px 0px 0px 900px;
		}
	}
}

.redondeada {
	padding: 5vw;
	div {
		img {
			max-width: 100%;
		}
	}
}

#ceremonia {
	padding: 5vw 5vw 10vw 5vw;
	> div {
		position: relative;
		border: var(--borde-azul); border-radius: 43vw 43vw 0vw 0vw;
		text-align: center;
		.titulo {
			padding: 16vw 15vw 3vw;
		}
	}
	.iglesia {
		display: flex; justify-content: center;
		img {
			height: 30vw;
		}
	}
	.texto {
		font-size: 5vw; color: var(--texto-azul);
		padding-bottom: 5vw;
		p { margin: 5vw 0vw; }
		p:first-child { margin-top: 8vw; }
		p:last-child { margin-bottom: 8vw; }
		.hora {
			font-size: 7vw; font-weight: bold;
		}
	}
	.boton {
		display: flex; justify-content: center; align-items: center;
		a {
			position: absolute;
			background-color: #06577e; padding: 3vw 5vw;
			font-size: 6vw; color: #fff; text-decoration: none;
		}
		a:hover {
			background-color: #046;
		}
	}
}

#recepcion {
	padding: 5vw; padding-bottom: 15vw;
	font-size: 4vw; color: var(--texto-azul);
	text-align: center;
	> div {
		background-color: #c5e8ee;
	}
	
	.titulo {
		padding: 8vw 20vw 6vw;
	}
	
	.copas {
		padding: 0vw 28vw;
	}
	
	.texto {
		font-size: 5vw;
		padding-bottom: 5vw;
		p { margin: 5vw 0vw; }
		p:first-child { margin-top: 8vw; }
		p:last-child { margin-bottom: 8vw; }
		.hora {
			font-size: 7vw; font-weight: bold;
		}
	}
	
	.boton {
		display: flex; justify-content: center; align-items: center;
		a {
			position: absolute;
			background-color: #06577e; padding: 3vw 5vw;
			font-size: 6vw; color: #fff; text-decoration: none;
		}
		a:hover {
			background-color: #046;
		}
	}
}

#vestimenta {
	background-color: var(--fondo-azul); color: #fff;
	.titulo {
		padding: 12vw 10vw 12vw;
	}
	.ropa {
		padding: 0vw 32vw;
	}
	.texto {
		padding: 7vw 0vw 13vw;
		font-size: 5vw; text-align: center;
	}
}

#regalos {
	padding: 7vw 5vw 12vw;
	color: var(--texto-azul);
	text-align: center;
	> div {
		background-color: var(--fondo-gris);
		.titulo {
			padding: 12vw 12vw 11vw 12vw;
		}
		.regalo {
			padding: 0vw 36vw 8vw;
		}
		
		.texto {
			
		}
		
		.cuenta-bancaria {
			padding: 5vw 0vw;
			font-size: 5vw;
			.banco {
				font-family: arial, Helvetica, sans serif; font-size: 5vw;
			}
			#numero-cuenta-bancaria {
				background-color: var(--fondo-gris); border: 1px solid #ccc;
				text-align: center;
				font-family: arial, Helvetica, sans serif; font-size: 5vw; color: var(--texto-azul);
			}
			button.copiar {
				margin-top: 1.1vw; padding: 1.6vw 2vw 1.4vw;
				background-color: var(--fondo-azul); border: 1px solid #025; border-radius: .7vw;
				font-size: 3vw; color: #eee;
				cursor: pointer;
				&:hover {
					background-color: #024;
				}
			}
		}
	}
}

#confirma {
	.titulo {
		padding: 10vw 8vw 1vw;
	}
	
	.texto-2 {
		padding: 0vw 0vw 2vw;
		text-align: center;
		
		font-size: 4.5vw; color: var(--texto-azul);
		p {
			margin: 3vw 0vw;
		}
	}
	
	form {
		padding-bottom: 18vw;
		color: var(--texto-azul); text-align: center;
		
		input[type=text],
		input[type=number]{
			margin: 1vw 2vw 4vw; padding: 2vw;
			font-size: 5vw;
		}
		
		input[type=text] {
			width: 80vw; text-align: center;
			font-family: var(--texto-familia);
		}
		
		input[type=text].pin {
			width: 40vw; font-family: Arial, Helvetica, sans serif;
		}		
		
		.opciones {
			display: flex; justify-content: space-around;
			> * {
				margin: 3vw;
				label {
					cursor: pointer;
				}
			}
		}
		
		.texto {
			text-align: center;
			padding: 0vw 0vw 0vw;
		}
		
		.enviar {
			display: flex; justify-content: center; align-items: center;
			
			input[type=submit] {
				padding: 2vw 4vw; background-color: var(--fondo-azul);
				font-family: var(--texto-familia); font-size: 5vw; color: #fff;
				cursor: pointer;
				&:hover {
					background-color: var(--fondo-azul-hover);
				}
			}
		}
		
		.asistencia {
			padding: 2vw 0vw;
			font-size: 7vw;
		}
		
		.asistencia.confirmada {
			color: #080;
		}
		
		.asistencia.cancelada {
			 color: #d00;
		}	
		
		.mensaje_error {
			font-family: Arial, sans serif; font-size: 3vw; color: #a00;
		}
	}
}

main > footer {
	background-color: #fff;
	.novios {
		padding: 30vw 6vw;
		.firma {
			padding: 10vw 8vw 2vw;
		}
	}
}

@media ( min-width: 900px ){
	
	a.regresar {
		padding: 9px 20px; border: 1px solid #7e7; border-radius: 5px;
		font-size: 18px; padding: 10px 15px;
		> span:first-child {
			padding-right: 13px;
		}
	}
	
	#principal {
		font-size: 28px;
	}
	
	#itinerario {
		padding: 20px 20px 60px 20px;
		> div {
			> header {
				padding: 13% 12% 9% 12%;
			}
			.cajas {
				.caja {
					padding-bottom: 16%;
					> *:nth-child(1){
						height: 200px;
					}
					> *:nth-child(2){
						padding: 2% 0;
						font-size: 40px;
					}
					> *:nth-child(3){
						height: 80px;
					}
				}
				.caja.coctel {
					> *:nth-child(1){
						height: 150px;
					}
				}
				.caja.cena {
					> *:nth-child(1){
						height: 140px;
					}
				}
				.caja.baile {
					> *:nth-child(1){
						height: 160px;
					}
				}
				.caja.cena-desvelados {
					> *:nth-child(1){
						height: 180px;
					}
				}
			}
		}
	}
	
	#ceremonia {
		padding: 60px 20px 100px 20px;
		> div {
			border-width: 7px; border-radius: 380px 380px 0 0;
			.titulo {
				padding: 140px 150px 34px;
			}
		}
		.iglesia {
			img {
				height: 220px;
			}
		}
		.texto {
			font-size: 36px; 
			padding-bottom: 5%;
			p { margin: 30px 0; }
			p:first-child { margin-top: 60px; }
			p:last-child { margin-bottom: 70px; }
			.hora {
				font-size: 60px; font-weight: bold;
			}
		}
		.boton {
			a {
				padding: 26px 46px;
				font-size: 38px;
			}
		}
	}
	
	#recepcion {
		padding: 20px; padding-bottom: 120px;
		font-size: 40px; color: var(--texto-azul);
		text-align: center;
		
		.titulo {
			padding: 11% 22% 9%;
		}
		
		.copas {
			padding: 0 35%;
		}
		
		.texto {
			font-size: 36px;
			padding-bottom: 5%;
			p { margin: 30px 0; }
			p:first-child { margin-top: 60px; }
			p:last-child { margin-bottom: 70px; }
			.hora {
				font-size: 60px; font-weight: bold;
			}
		}
		
		.boton {
			display: flex; justify-content: center; align-items: center;
			a {
				padding: 26px 46px;
				font-size: 38px;
			}
		}
	}
	
	#vestimenta {
		.titulo {
			padding: 90px 100px 80px;
		}
		.ropa {
			padding: 0 33%;
		}
		.texto {
			padding: 50px 0px 110px;
			font-size: 36px;
		}
	}
	
	#regalos {
		padding: 60px 20px 40px;
		> div {
			.titulo {
				padding: 85px; padding-bottom: 40px;
			}
			.regalo {
				padding: 0 320px 40px;
			}
			
			.cuenta-bancaria {
				padding: 50px 0px;
				font-size: 26px;
				.banco {
					font-size: 36px;
				}
				#numero-cuenta-bancaria {
					font-size: 36px;
				}
				
				button.copiar {
					margin-top: 11px; padding: 16px 12px 14px;
					border-radius: 7px;
					font-size: 22px;
				}
			}			
		}
	}
	
	#confirma {
		.titulo {
			padding: 60px 100px 40px;
		}
		
		.texto-2 {
			font-size: 30px;
			p {
				margin: 28px 0px;
			}
		}
		
		form {
			padding-bottom: 100px;
			
			label {
				font-size: 28px;
			}
			
			input[type=text],
			input[type=number]{
				margin: 20px 50px; 
				padding: 10px;
				font-size: 30px;
			}
			
			input[type=text] {
				width: 600px;
			}
			
			input[type=text].pin {
				width: 300px;
			}		
			
			.opciones {
				> * {
					margin: 10px 0px 15px;
				}
			}
			
			.texto {
				padding: 0 0 30px;
			}
			
			.asistencia {
				padding: 20px 0;
				font-size: 42px;
			}
			
			.enviar {
				input[type=submit] {
					padding: 12px 30px; 
					font-size: 30px;
				}
			}
			
			.mensaje_error {
				font-size: 22px;
			}
		}
	}
	
	main > footer {
		.novios {
			padding: 14% 8% 17%;
			.firma {
				padding: 10% 8% 2%;
			}
		}
	}
}

/* ----- */
/* Modal */
/* ----- */

.modal {
	display: none; position: fixed; top:0; right: 0; bottom: 0; left:0; z-index: 1;
	background-color: #000b;
}
.modal > button {
	position: absolute; top: 0; right: 0;
	background: none; border: none;
	margin: 0px; padding: 0px 6px 0px 0px;
	color: #ddd; font-size: 50px;
	cursor: pointer;
}
.modal > button:hover { color: #f99; }

#modal-principal {
	flex-wrap: wrap; justify-content: center; align-items: center;
}
#modal-usuario {
	flex-wrap: wrap; justify-content: flex-end; align-items: flex-start;
	padding: 6px;
}

/* ---------------- */
/* Mensaje Superior */
/* ---------------- */

#mensaje-superior { width: auto;
	display: grid; grid-template-columns: auto auto;
	justify-content: end; grid-gap: 10px;
	position: fixed; top: 0; right: 0; z-index: 1;
	background-color: #e1e1e1;
	border-radius: 5px;
	.texto {
		padding: 10px 20px;
	}
	.cerrar { 
		display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
		margin: 10px;
		* { margin: 10px; }
	}
}
#mensaje-superior.ok { background-color: #dfd; border: 1px solid #aea; }
#mensaje-superior.error { background-color: #fee; border: 1px solid #fcc; }

@media ( max-width: 650px ){
	#mensaje-superior { grid-template-columns: 100%; }
}


body > footer { 
	padding: 2vw; text-align: center; color: #555; line-height: 4vw;
	a,
	a:visited { color: #000; }
	a:hover { color: #00f; }
}

@media screen and ( min-width: 900px ){
	body > footer {
		padding: 8px 8px; line-height: 30px;
	}
}

@media ( max-width: 360px ){
	
}