@import url(fonts.css);
@import url(common.css);

* {
	box-sizing     : border-box;
	scroll-behavior: smooth;
	scroll-margin  : 150px;
	margin         : 0;
	padding        : 0;
}

html,
body {
	min-height : 100%;
	font-family: var(--main-font), system-ui, Arial, sans-serif;
	/* font-weight: 400; */
	font-size  : var(--main-font-size);
	color      : var(--font-color);
  /* background-color: #FDFAF5; */
  transition: background-color 0.4s ease
}

body.open {
  background-color: #FDFAF5;
}

h1,
h2,
h3 {
	margin     : 0;
}

h1 {
	font-size: var(--h1-font-size);
  font-family: var(--h1-font);
}

h2 {
	font-size: var(--h2-font-size);
  font-family: var(--h2-font);
}

h3 {
	font-size: var(--h3-font-size);
  font-family: var(--h3-font);
}

ul li:not(:last-child) {
	margin-bottom: 10px;
}

header {
	color           : var(--header-font-color);
	font-size       : var(--header-font-size);
	background-color: var(--primary-color);
}


footer {
	font-size: var(--footer-font-size);
}

table {
	border-spacing: 0;
	width         : 100%;
}

th,
td {
	padding        : 5px 0;
	border-collapse: collapse;
}

hr {
	border    : none;
	border-top: #eee solid 1px;
	margin    : 20px auto;
	width     : min(1000px, 95%);
	margin-top: 100px;
}

section:not(#home section) {
	padding: 0 10px;
}

section:not(#home section:first-of-type) {
	margin: var(--margin-sections);
}

section:first-of-type {
	margin-top: 60px;
}

strong {
	font-weight: bold;
}

img {
	max-width: 100%;
}

button,
button[type="button"],
.btn {
	border       : none;
	padding      : 4px 8px;
	border-radius: 20px;
  box-shadow: var(--box-shadow);
	text-align   : center;
	cursor       : pointer;
  margin-top: 20px;
	display      : inline-block;
	color        : #db8693;
  border: 2px solid #db8693;
  background-color:#FDFAF5;
	font-weight     : 600;
	width           : min(170px, 100%);
  transition: all 0.4s ease;
}

button:hover, button[typw="button"]:hover, .btn:hover {
	background-color: #db8693;
  color: white
}


a {
	text-decoration: none
}

a>svg,
span>svg {
	vertical-align: middle;
	height        : 100%;
	width         : 100%;
}


input,
select,
textarea {
	display: block;
	padding: 7px 10px;
	width  : 100%;
  border: none;
  border-radius: 20px;
}

input::placeholder, textarea::placeholder, opation[value="0"] {
  color: #ccc
}

input.invalid,
select.invalid,
textarea.invalid {
	outline          : 2px solid red;
	background-color: #ffe6e6;
  color: red
}

input.invalid::placeholder {
  color: red
}

input:focus {
	/* background-color   : white; */
	outline         : none;
	/* border-radius   : 3px; */
	/* border       : 2px solid black; */
}

input:focus.invalid {
	outline : 2px solid red
}

label {
	display: block;
}

label:not(:first-of-type) {
	margin: 25px 0;
}


.contenido {
	max-width: 900px;
	margin   : auto;
	padding  : 15px;
	position : relative;
}

.loader {
	border-radius   : 50%;
	border          : 3px solid black;
	border-top-color: transparent;
	animation       : spin 1.2s linear infinite;
	height          : 50px;
	width           : 50px;
	position        : absolute;
	top             : 0;
	bottom          : 0;
	right           : 0;
	left            : 0;
	margin          : auto;
}


#pages {
	margin-top: 50px;
}

#pages .active {
	color: #990000;
}

#collapsing-menu {
	background-color: var(--primary-color);
	padding         : 15px;
	padding-top     : 130px;
}

#collapsing-menu div {
	padding: 10px;
}

#collapsing-menu div:first-of-type {
	padding-top: 0;
}

#collapsing-menu div:last-of-type {
	padding-bottom: 0;
}

.foto {
  background-color: white;
  box-shadow: var(--box-shadow);
  padding: 15px 15px 20px;
  border-radius: 2px;
  transform: rotate(1deg);
  width: min(100%, 350px);
  margin: 30px auto 50px;
}

.foto .dia {
  font-size: 25px;
  margin-top: 10px;
}

.foto time {
  font-size: 30px;
  margin-top: -10px;
  display: block;
}

.foto time span {
  font-size: 35px;
}

#cuenta-regresiva p {
  font-size: 2.8em;
}

main, #form-contact .content {
  transition: height 0.3s ease, opacity 0.3s ease;
}

.sobre-wrapper {
  transition: height 0.3s ease, opacity 1s ease;
}

.hide {
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.sobre-wrapper.show {
  height: 100vh;
}

.show {
  opacity: 1;
  height: 100%;
}

.sobre {
  background-color: #FDFAF5;
  cursor: pointer;
  aspect-ratio: 2/3;
  display: flex;
  box-shadow: var(--box-shadow);
  --ancho-sobre: 400px;
  width: var(--ancho-sobre);
  animation: shakePause 2.5s infinite;
  perspective: 1500px;
}

@media only screen and (max-width: 600px) {
  .sobre {
    --ancho-sobre: 250px;
  }
}

.sobre .izquierda, .sobre .derecha {
  height: 100%;
  box-shadow: var(--box-shadow);
  position: absolute;
  width: 50%;
  transition: transform 1s ease;
  background-color: #FDFAF5;
  transform-style: preserve-3d
}

.sobre .izquierda {
  transform-origin: left center;
  left:0;
  z-index: 2;
  border-right: 1px solid #eee;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px
}

.sobre.open .izquierda {
  transform: rotateY(-180deg);
  border-right: none 
}

.sobre .derecha {
  transform-origin: right center;
  right:0;
  z-index: 2;
  border-left: 1px solid #eee;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.sobre.open .derecha {
  transform: rotateY(180deg);
  border-left: none
}

.sobre .front, .sobre .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 5px
}

.sobre .back {
  transform: rotateY(180deg);
  /* background-color: red; */
}

.sobre .sello {
  z-index: 3;
  transition: opacity 0.3s ease;
  opacity: 1;
}

.sobre .sello h2 {
  font-size: 1em; 
  gap:3px; 
  color: black;
  z-index: 2;
}

@media only screen and (max-width: 600px) {
  .sobre .sello h2 {
    font-size: 0.8em
  }
}

.sobre .sello h2 span {
  font-size: 0.7em; 
  margin-right: -2px
}

@media only screen and (max-width: 600px) {
  .sobre .sello h2 span {
    font-size: 0.6em
  }
}

.sobre .sello img {
  --ancho-sello: 110px;
  width: var(--ancho-sello);
  height: calc(var(--ancho-sello) * 1.15);
  filter: sepia(1) saturate(2) hue-rotate(-8deg) brightness(1.95) contrast(1)
}

@media only screen and (max-width: 600px) {
  .sobre .sello img {
    --ancho-sello: 80px
  }
}

.sobre .sello.hide {
  opacity: 0
}


.sobre .triangulo {
  width: 0; height: 0;
  border-left: calc(var(--ancho-sobre) / 2) solid transparent;
  border-right: calc(var(--ancho-sobre) / 2) solid transparent;
  border-top: 90px solid white;
  filter: drop-shadow(var(--box-shadow));
  transition: transform 0.6s ease;
  transform-origin: top center;
}

.sobre.open .triangulo {
  transform: rotateX(-160deg)
}

#ubicacion strong {
  font-size: 20px;
}

#ubicacion .contenido {
  padding: 0
}

#ubicacion svg {
  width: 70px;
}

#ubicacion .contenido .flex {
  padding: 15px;
  padding-bottom: 70px;
}

#ubicacion .contenido .flex .absolute.center {
  top: unset;
  bottom: 0;
}

#codigo-vestimenta h3 {
  margin: 20px 0;
}

#codigo-vestimenta .flex {
  gap: 10px
}

#codigo-vestimenta .color {
  border-radius: 50%;
  height: 20px;
  width: 20px;
}

#ubicacion .recepcion::before, #lugares-reservados .grid div:nth-of-type(2)::before {
  content: '';
  width: 1px;
  height: 100%;
  background-color: #eee;
  position: absolute;
  left: 0;
  top: 0;
}

.error {
  padding-left: 10px;
  color: red;
  font-size: 14px; 
}

#form-contact {
  max-width: 600px;
  margin: auto;
}

.c-red {
  color: #db8693
}

label[for="asistira"], label[for="no-asistira"] {
  cursor: pointer;
  color: white;
  opacity: 0.3;
  padding: 5px;
  min-width: 140px;
  border-radius: 3px;
  transition: all 0.5s ease;
  background-color: gray;
}

label[for="asistira"].active {
  background-color: #b2c282;
}

label[for="no-asistira"].active {
  background-color: #c53c08;
}

label[for="asistira"].active, label[for="no-asistira"].active {
  opacity: 1;
  box-shadow: var(--box-shadow);
}

input[name="asistira"] {
  display: none;
}

.shake {
  animation: shakePause 2.5s 1.5s 2;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):hover {
  background-color: color-mix(in srgb, #fdabff, var(--swal2-action-button-hover))!important;
  border: 2px solid #fdabff!important
}

div:where(.swal2-container) div:where(.swal2-actions) {
  width: min(170px, 100%)!important;
}

div:where(.swal2-container) div:where(.swal2-actions) {
  width: 100%!important;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel):hover {
  background-color: red!important
} 

div:where(.swal2-container) h2:where(.swal2-title) {
  font-size: 1.5em;
}

#hospedaje .info {
  color: black
}

#hospedaje h3 {
  margin: 30px 0;
}

#hospedaje .info p  {
  margin-top: 10px;
  font-size: 1.2em;
}

#hospedaje .qr-wrapper {
  background-color: white;
  padding: 10px 20px;
  width: min(100%, 250px);
  border-radius: 10px;
  box-shadow: var(--box-shadow);
}

.flores {
transform: rotate(22deg); animation-delay: 0.8s; width: 200px;
animation-delay: 0.3s;
filter: opacity(40%)
}

.flores:nth-of-type(1) {
 top: 20px; right: 35px; width: 150px; 
}

.flores:nth-of-type(2) {
top: 631px; left: 0; width: 150px; z-index: 2;
}

.flores:nth-of-type(3) {
left: 20px; top: 50%; filter: opacity(25%);
}

.flores:nth-of-type(4) {
top: 30%; right: 20px; width: 120px
}

.flores:nth-of-type(5) {
bottom: 80px; left: 0
}

.flores:nth-of-type(6) {
top: 70%; right: -5px
}

.flores:nth-of-type(7) {
top: 2%; left: 5%; width: 70px
}

.flores:nth-of-type(8) {
top: 10%; left: 15%; width: 70px
}

.flores:nth-of-type(9) {
top: 600px; right: 10%; width: 70px
}

.flores:nth-of-type(10) {
top: 400px; right: 15%; width: 80px
}

.flores:nth-of-type(11) {
bottom: -80px; right: 10px; width: 180px
}

@media only screen and (min-width:601px) {}

@media screen and ((min-width: 600px) and (max-width: 950px)) {}

@media only screen and (max-width:600px) {
	h1 {
		font-size: var(--h1-small-font-size);
	}

	h2 {
		font-size: var(--h2-small-font-size);
	}

	h3 {
		font-size: var(--h3-small-font-size);
	}
  #ubicacion .contenido .flex  {
    padding: 0;
    /* padding-bottom: 70px; */
    font-size: 14px;
  }
  button, button[type="button"], .btn {
    width: min(140px, 100%);
  }
  div:where(.swal2-container) h2:where(.swal2-title) {
    font-size: 1.3em!important;
  }

  .flores:nth-of-type(1) {
   top: -5px; right: -15px; width: 105px; 
  }

  .flores:nth-of-type(2) {
  top: 631px; left: 0; width: 150px
  }

  .flores:nth-of-type(3) {
  left: -19px; top: 48%; filter: opacity(25%); width: 120px
  }

  .flores:nth-of-type(4) {
  top: 30%; right: -20px; width: 100px
  }

  .flores:nth-of-type(5) {
  width: 100px
  }

  .flores:nth-of-type(6) {
  top: 73%; right: -31px; width: 130px
  }

  .flores:nth-of-type(7) {
  top: 2%; left: 5%; width: 70px
  }

  .flores:nth-of-type(8) {
  top: 10%; left: 15%; width: 70px
  }

  .flores:nth-of-type(9) {
  top: 600px; right: 10%; width: 70px
  }

  .flores:nth-of-type(10) {
  top: 400px; right: 15%; width: 80px
  }

  .flores:nth-of-type(11) {
  right: -21px; width: 150px
  }
}


@keyframes spin {
	to {
		transform: rotate(360deg)
	}
}



/* Animación: agitación corta y pausa */
@keyframes shakePause {
  0%, 30%, 100% {
    transform: rotate(0deg);
  }
  35% {
    transform: rotate(-2deg);
  }
  40% {
    transform: rotate(2deg);
  }
  45% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
  55% {
    transform: rotate(0deg);
  }
}