/*
// <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: #444; padding: 1.6vw 2.4vw; border: 1px solid #3c3; border-radius: 1vw;
	font-family: Arial, Helvetica, sans serif; font-size: 3.7vw; font-weight: normal; color: #fff;
	&:hover {
		background-color: #333;
		text-decoration: none;
	}
	> span:first-child {
		padding-right: 1.8vw;
	}
}

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;
	> * {
		margin: 1vw;
	}
}

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

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

#encabezado {
	.logo {
		display: flex; justify-content: center; align-items: center;
		padding: 14vw 0vw 10vw;
		picture {
			img { width: 74vw; }
		}
	}
	.fecha {
		padding: 0px 0px 14vw 0vw;
		text-align: center;
		font-size: 9vw; color: #ba8239;
	}
}

@media ( min-width: 900px ){
	#encabezado {
		.logo {
			padding: 65px 0px 40px;
			picture {
				img { width: 600px; }
			}
		}
		.fecha {
			padding: 0px 0px 65px 0px;
			font-size: 56px;
		}
	}	
}

#cronometro {
	.titulo-mes {
		padding: 12vw 0vw 3vw;
		text-align: center;
		font-size: 7vw;
	}
	.calendario {
		padding: 0vw 11vw 12vw;
	}
	.titulo {
		display: flex; justify-content: center;
		picture {
			img {
				width: 60vw;
			}
		}
	}
	div.contenedor {
		display: grid; grid-template-columns: 20vw 20vw 20vw 20vw; grid-template-rows: 16dvw;
		grid-gap: 1.5vw; justify-content: center;
		padding: 6vw 0vw 15vw 0vw;
		div.unidad {
			display: flex; flex-direction: column; justify-content: center; align-items: center;
			color: #000;
			text-align: center;
			> span:nth-child(1){
				font-family: sans; font-size: 11vw; line-height: 12vw;
			}
			> span:nth-child(2){
				font-size: 5vw; line-height: 4vw;
			}
		}
	}
}

@media ( min-width: 900px ){
	#cronometro {
		.titulo-mes {
			padding: 100px 0px 30px;
			text-align: center;
			font-size: 40px;
		}
		
		.calendario {
			padding: 0px 170px 90px;
		}
		.titulo {
			picture {
				img {
					width: 420px;
				}
			}
		}
		div.contenedor {
			display: grid; grid-template-columns: 110px 110px 110px 110px; grid-template-rows: 110px;
			grid-gap: 14px; justify-content: center;
			padding: 20px 0px 110px;
			div.unidad {
				border-radius: 50%;
				> span:nth-child(1){
					font-size: 60px; line-height: 60px;
				}
				> span:nth-child(2){
					font-size: 24px; line-height: 22px;
				}
			}
		}
	}
}

#itinerario {
	background-image: url("/_sitio/plantillas/natalia-xv/imagenes/itinerario/fondo.png");
	background-repeat: no-repeat;
	background-size: 100% auto; /* Ancho al 100% y alto automático */
	background-position: center;
	background-position: center top; /* Alineado al centro horizontal y arriba vert */
	padding-bottom: 17vw;
	header{
		display: flex; justify-content: center;
		padding: 27vw 0vw 10vw;
		picture {
			img { width: 50vw; }
		}
	}
	.evento {
		text-align: center;
		padding: 0px 11vw 13vw 17vw;
		> div {
			picture {
				display: flex; justify-content: center; align-items: center;
				grid-row: span 3;
				.iglesia { max-height: 17vw; }
				.coctel { max-height: 13vw; }
				.cena { max-height: 9vw; }
				.baile { max-height: 15vw; }
				.pastel { max-height: 15vw; }
			}
			.titulo {
				font-size: 5.5vw;
				color: #ba8239;
			}
			.horario {
				font-size: 6vw;
			}
		}
		> div.grid {
			display: grid; grid-template-columns: auto auto;
		}
		> div.final {
			picture {
				padding-top: 2vw;
			}
		}
	}
}

@media ( min-width: 900px ){
	#itinerario {
		padding-bottom: 30px;
		header{
			padding: 230px 0vw 90px;
			picture {
				img {
					width: 380px;
				}
			}
		}		
		.evento {
			padding: 0px 100px 90px 120px;
			> div {
				picture {
					.iglesia { max-height: 160px; }
					.coctel { max-height: 120px; }
					.cena { max-height: 90px; }
					.baile { max-height: 140px; }
					.pastel { max-height: 160px; }
				}
				.titulo {
					font-size: 40px;
					color: #ba8239;
				}
				.horario {
					font-size: 50px;
				}
			}
			> div.grid {
				display: grid; grid-template-columns: auto auto;
			}
			> div.final {
				picture {
					grid-row: span 3;
					padding-top: 40px;
				}
			}
		}
	}
}

#ceremonia {
	background-image: url("/_sitio/plantillas/natalia-xv/imagenes/ceremonia/fondo.png");
	background-repeat: no-repeat;
	background-size: 100% auto; /* Ancho al 100% y alto automático */
	background-position: center;
	background-position: center top;
	padding: 21vw 0vw 0vw 0vw;
	> div {
		text-align: center;
		.titulo {
			padding-bottom: 5vw;
			picture {
				display: flex; justify-content: center;
				img {
					width: 47vw;
				}
			}
		}
		.iglesia {
			display: flex; justify-content: center;
			img {
				height: 20vw;
			}
		}
		.texto {
			font-size: 5vw;
			padding: 4vw 0vw 4vw;
			p {
				margin: 5vw 0vw;
			}
			.hora {
				font-size: 6vw; font-weight: bold;
			}
		}		
		.boton {
			display: flex; justify-content: center; align-items: center;
			a {
				background-color: #c0812c; padding: 3vw 5vw;
				font-size: 6vw; color: #fff; text-decoration: none;
			}
			a:hover {
				background-color: #b71;
			}
		}
	}
}

@media ( min-width: 900px ){
	#ceremonia {
		padding: 160px 0px 0px 0px;
		> div {
			.titulo {
				padding-bottom: 45px;
				picture {
					img {
						width: 350px;
					}
				}
			}
			.iglesia {
				img {
					height: 170px;
				}
			}
			.texto {
				font-size: 35px;
				padding: 40px 0px 40px;
				p {
					margin: 50px 0px;
				}
				.hora {
					font-size: 60px;
				}
			}		
			.boton {
				a {
					padding: 20px 40px;
					font-size: 35px;
				}
			}
		}
	}
}

#recepcion {
	padding: 10vw 8vw;
	background-image: url("/_sitio/plantillas/natalia-xv/imagenes/recepcion/fondo.jpg");
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center;
	font-size: 4vw;
	text-align: center;
	> div {
		background-color: #fffc;
		padding: 0vw 0vw 5vw 0vw;
		.titulo {
			display: flex; justify-content: center;
			padding: 6vw 0vw;
			picture {
				img {
					width: 41vw;
				}
			}
		}
		.baile {
			display: flex; justify-content: center;
			picture {
				img {
					width: 35vw;
				}
			}
		}
		.texto {
			font-size: 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 {
				padding: 3vw 5vw;
				background-color: #fff; border: 2px solid #c0812c; 
				font-size: 6vw; color: #000;
				text-decoration: none;
			}
			a:hover {
				background-color: #c0812c;
				color: #fff;
			}
		}
	}
}

@media ( min-width: 900px ){
	#recepcion {
		padding: 80px;
		font-size: 40px;
		> div {
			padding: 0px 0px 50px 0px;
			.titulo {
				padding: 60px 0px;
				picture {
					img {
						width: 310px;
					}
				}
			}
			.baile {
				picture {
					img {
						width: 270px;
					}
				}
			}
			.texto {
				font-size: 36px;
				padding-bottom: 0vw;
				p { margin: 5vw 0vw; }
				p:first-child { margin-top: 8vw; }
				p:last-child { margin-bottom: 8vw; }
				.hora {
					font-size: 7vw; font-weight: bold;
				}
			}
			.boton {
				a {
					padding: 20px 40px;
					font-size: 36px; color: #000;
					text-decoration: none;
				}
				a:hover {
					background-color: #c0812c;
					color: #fff;
				}
			}
		}
	}
}

#collage {
	padding: 0vw 0vw 0vw 0vw;
	> div {
		display: grid; grid-template-columns: 40% 9.7% 40%; grid-template-rows: 58vw 40vw 30vw 34vw; grid-gap: 5vw;
		> .ele-1 { 
			background-image: url("/_sitio/plantillas/natalia-xv/imagenes/collage/ele-1.jpg");
			background-repeat: no-repeat;
			background-size: auto 100%;
			background-position: center center;
			grid-column: span 2;
		}
		> .ele-2 {
			background-image: url("/_sitio/plantillas/natalia-xv/imagenes/collage/ele-2.jpg");
			background-repeat: no-repeat;
			background-size: auto 100%;
			background-position: center center;
		}
		> .ele-3 {
			background-image: url("/_sitio/plantillas/natalia-xv/imagenes/collage/ele-3.jpg");
			background-repeat: no-repeat;
			background-size: auto 100%;
			background-position: center center;
			grid-row: span 2;
		}
		> .ele-4 { 
			background-image: url("/_sitio/plantillas/natalia-xv/imagenes/collage/ele-4.jpg");
			background-repeat: no-repeat;
			background-size: auto 100%; /* Ancho al 100% y alto automático */
			background-position: center center;
			grid-column: span 2;
		}
		> .ele-5 {
			background-image: url("/_sitio/plantillas/natalia-xv/imagenes/collage/ele-5.jpg");
			background-repeat: no-repeat;
			background-size: auto 100%; /* Ancho al 100% y alto automático */
			background-position: center center; /* Alineado al centro horizontal y arriba vert */
			grid-column: span 2; grid-row: span 2;
		}
		> .ele-6 {
			background-image: url("/_sitio/plantillas/natalia-xv/imagenes/collage/ele-6.png");
			background-repeat: no-repeat;
			background-size: 100% auto; /* Ancho al 100% y alto automático */
			background-position: center center; /* Alineado al centro horizontal y arriba vert */
		}
	}
}

@media ( min-width: 900px ){
	#collage {
		padding: 0px 0px 50px 0px;
		> div {
			display: grid; grid-template-columns: 40% auto 40%; grid-template-rows: 560px 400px 300px 340px; grid-gap: 34px;
			> .ele-1 { 
				background-image: url("/_sitio/plantillas/natalia-xv/imagenes/collage/ele-1.jpg");
				background-repeat: no-repeat;
				background-size: auto 100%;
				background-position: center center;
				grid-column: span 2;
			}
			> .ele-2 {
				background-image: url("/_sitio/plantillas/natalia-xv/imagenes/collage/ele-2.jpg");
				background-repeat: no-repeat;
				background-size: auto 100%;
				background-position: center center;
			}
			> .ele-3 {
				background-image: url("/_sitio/plantillas/natalia-xv/imagenes/collage/ele-3.jpg");
				background-repeat: no-repeat;
				background-size: auto 100%;
				background-position: center center;
				grid-row: span 2;
			}
			> .ele-4 { 
				background-image: url("/_sitio/plantillas/natalia-xv/imagenes/collage/ele-4.jpg");
				background-repeat: no-repeat;
				background-size: auto 100%;
				background-position: center center;
				grid-column: span 2;
			}
			> .ele-5 {
				background-image: url("/_sitio/plantillas/natalia-xv/imagenes/collage/ele-5.jpg");
				background-repeat: no-repeat;
				background-size: auto 100%;
				background-position: center center;
				grid-column: span 2; grid-row: span 2;
			}
			> .ele-6 {
				background-image: url("/_sitio/plantillas/natalia-xv/imagenes/collage/ele-6.png");
				background-repeat: no-repeat;
				background-size: 100% auto;
				background-position: center center;
			}
		}
	}
}

#vestimenta {
	background-image: url("/_sitio/plantillas/natalia-xv/imagenes/vestimenta/fondo.png");
	background-repeat: no-repeat;
	background-size: 100% auto; /* Ancho al 100% y alto automático */
	background-position: center;
	background-position: center top; /* Alineado al centro horizontal y arriba vert */
	padding: 0vw 0vw 5vw 0vw;
	.titulo {
		display: flex; justify-content: center;
		padding: 7vw 0vw 5vw;
		picture {
			img {
				width: 53vw;
			}
		}
	}
	.ropa {
		display: flex; justify-content: center;
		picture {
			img {
				width: 18vw;
			}
		}
	}
	.texto {
		padding: 0vw;
		font-size: 6vw; text-align: center;
	}
}

@media ( min-width: 900px ){
	#vestimenta {
		padding: 70px 0px 30px;
		.titulo {
			display: flex; justify-content: center;
			padding: 0px 0px 40px 0px;
			picture {
				img {
					width: 380px;
				}
			}
		}
		.ropa {
			display: flex; justify-content: center;
			picture {
				img {
					width: 100px;
				}
			}
		}
		.texto {
			padding: 0vw;
			font-size: 38px; text-align: center;
		}
	}
}

#regalos {
	padding: 5vw 5vw 12vw;
	color: #000;
	text-align: center;
	> div {
		background-color: #fff;
		.titulo {
			display: flex; justify-content: center;
			padding: 5vw 0vw;
			picture {
				img {
					width: 60vw;
				}
			}
		}
		.regalo {
			display: flex; justify-content: center;
			picture {
				img {
					width: 24vw;
				}
			}
		}
		
		.texto {
			
		}
		
		.cuenta-bancaria {
			padding: 5vw 0vw;
			font-size: 5vw;
			.banco {
				font-family: arial, Helvetica, sans serif; font-size: 5vw;
			}
			#numero-cuenta-bancaria {
				background-color: #06577e; border: 1px solid #05567d;
				text-align: center;
				font-family: arial, Helvetica, sans serif; font-size: 5vw; color: #fff;
			}
			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;
				}
			}
		}
	}
}

@media ( min-width: 900px ){
	#regalos {
		padding: 60px 20px 40px;
		> div {
			.titulo {
				padding: 30px 0px 30px;
				picture {
					img {
						width: 415px;
					}
				}
			}
			.regalo {
				padding: 0px 0px 0px;
				picture {
					img {
						width: 150px;
					}
				}
			}
			
			.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: 10vw 0vw 3vw 0vw;
		picture {
			display: flex; justify-content: center; align-items: center;
			img {
				width: 83vw;
			}
		}
	}
	
	.texto-2 {
		padding: 0vw 0vw 2vw;
		text-align: center;
		
		font-size: 4.8vw; color: #000;
		p {
			margin: 3vw 0vw;
		}
	}
	
	form {
		color: #000; text-align: center;
		
		label { font-size: 26px; }
		
		input[type=text],
		input[type=number]{
			margin: 1vw 2vw 4vw; padding: 2vw;
			font-size: 5vw;
		}
		
		input[type=text] {
			width: 87vw; text-align: center;
			padding: 1.5vw 1vw;
			border: .6vw solid #b71;
			font-family: var(--texto-familia);
		}
		
		input.invitado {
			width: 87vw;
		}
		
		input.boletos {
			border: .6vw solid #b72;
		}
		
		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: #b71;
				border: .5vw solid #b71;
				font-family: var(--texto-familia); font-size: 5vw; color: #fff;
				cursor: pointer;
				&:hover {
					background-color: #a60;
				}
			}
		}
		
		.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;
		}
		
		.quitar-pin {
			padding: 5vw 0vw 3vw;
			font-size: 4.1vw;
		}
	}
	
	#confirmar-telefono {
		padding: 5vw 5vw;
		text-align: center;
		font-size: 4.8vw;
		.mensaje {
			
		}
		.telefono {
			padding: 1.4vw 0vw 0vw 0vw;
			font-family: Arial, Helvetica, sans serif; font-size: 3.8vw;
		}
	}
}

@media ( min-width: 900px ){
	
	#confirma {
		
		.titulo {
			padding: 30px 0px 28px 0px;
			picture {
				img {
					width: 580px;
				}
			}
		}
		
		.texto-2 {
			padding: 0px 0px 0px 0px;
			font-size: 26px;
			p {
				margin: 0px;
			}
		}
		
		form {
			padding: 20px 0px 0px 0px;
			label {
				font-size: 30px;
			}
			
			input[type=text],
			input[type=number]{
				margin: 12px 0px 20px; padding: 7px; border: 3px solid #b71;
				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] {
					border: none;
					padding: 12px 30px;
					font-size: 26px;
				}
			}
			
			.mensaje_error {
				font-size: 22px;
			}
			
			.quitar-pin {
				padding: 26px 0px 10px;
				font-size: 25px;
			}
		}
		
		#confirmar-telefono {
			text-align: center;
			padding: 22px 0px;
			font-size: 26px; color: #000;
			.mensaje {
				padding: 10px 0px;
			}
			.telefono {
				padding: 0px 0px 6px;
				font-size: 23px;
			}
		}	
	}	
}

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

@media ( min-width: 900px ){
	
	a.regresar {
		padding: 10px 20px; border: 1px solid #7e7; border-radius: 5px;
		font-size: 19px; color: #eee; padding: 10px 15px;
		> span:first-child {
			padding-right: 13px;
		}
	}
	
	#principal {
		font-size: 28px;
	}
	
	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 ){
	
}