@import url(root.css);
@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 {
  background-color: #FEFDF5
}

h1,
h2,
h3 {
	margin     : 0;
}

h2 {
  margin-bottom: 20px;
}

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: 25px;
}

header {
	color           : var(--header-font-color);
	font-size       : var(--header-font-size);
	background-color: var(--secondary-color);
  opacity: 0;
  font-family: var(--h2-font);
  text-transform:capitalize;
}

header nav.flex {
  gap: 10px;
}

.logo {
  width: 250px;
}

header.animate_show {
  animation-delay: 0.4s;
}

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

footer .contenido {
  padding: 30px 15px;
}

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: 5px;
  box-shadow: var(--box-shadow);
	text-align   : center;
	cursor       : pointer;
  margin-top: 20px;
	display      : inline-block;
	color        : white;
  border: 2px solid var(--tertiary-color);
  background-color: var(--tertiary-color);
	font-weight     : 600;
	width           : min(170px, 100%);
  transition: all 0.4s ease;
}

button:hover, button[typw="button"]:hover, .btn:hover {
	background-color: #b60b25;
  border: 2px solid #b60b25;
  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(--secondary-color);
  max-width       : 0;
  width           : 100%;
  height          : 100%;
  transition      : all 0.3s ease-in-out;
  opacity: 0;
  overflow        : hidden;
}

#collapsing-menu.open {
  max-width: 100%;
  opacity: 1;
}

#collapsing-menu .logo {
  width: 250px;
}

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

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

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

.flores {
height: 172px; bottom: 1px; width: 100%
}

.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: 2em;
}

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

main {
  background-image: url(../assets/fondo.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#presentacion strong {
  font-family: var(--h2-font);
}

.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%;
}

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

.sobre {
  aspect-ratio: 2/1.2;
  cursor: pointer;
  background-color: white;
  box-shadow: var(--box-shadow);
  --ancho-sobre: 530px;
  width: var(--ancho-sobre);
}

.sobre img {
  opacity: 0.2;
}

.sobre h1 {
  color: var(--tertiary-color);
  margin-left: -6px;
}

.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:calc(var(--ancho-sobre) * 0.25) solid white;;
  filter: drop-shadow(var(--box-shadow));
  transition: transform 0.6s ease;
  transform-origin: top center;
}

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

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

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

#ubicacion .fecha {
  border-top: 3px solid #db8693;
  border-bottom: 3px solid #db8693;
}

#ubicacion .contenido {
  padding: 0
}

#ubicacion svg, #itinerario svg {
  width: 70px;
}

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

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

#itinerario .grid {
  gap: 50px;
  margin-top: 50px;
}

#itinerario .grid div:not(.linea) {
  position: relative;
}

#itinerario .grid div:nth-of-type(even)::before {
  content: '';
  background-image: url(../assets/corazon.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 25px;
  width: 25px;
  position: absolute;
  left: -37.5px;
  top: 50%;
  transform: translateY(-50%);
}

#itinerario .linea {
  height: calc(100% - 75px);
  background-color: var(--secondary-color);
  width: 5px;
  z-index: -1
}

.ceremonia h2, .recepcion h2 {
  margin-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: 3px;
  height: 100%;
  background-color: var(--tertiary-color);
  position: absolute;
  left: -1.5px;
  top: 0;
}

.enredadera {
  width: 200px; 
}

.gato {
  width: 200px;
}

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

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

#form-contact .grid {
  gap: 25px!important 
}

#form-contact [for="mensaje"] {
  margin-top: 0;
}

.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 .nombre {
  font-family: var(--h2-font);
}

#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);
}

#banner {
  margin-top: 0;
  height: 750px
}

#banner h1 {
  margin-bottom: 20px;
}

#banner q {
  margin-top: 15px;
  display: block;
  font-size: 20px;
}

.heart {
  --c: red;
  width: 80px;
  aspect-ratio: 1;
  background:
   radial-gradient(at 70% 31%,var(--c) 29%,#0000 30%),
   radial-gradient(at 30% 31%,var(--c) 29%,#0000 30%),
   linear-gradient(var(--c) 0 0) bottom/100% 50% no-repeat;
  clip-path: polygon(-43% 0,50% 91%, 143% 0);
  animation: beat 10s ease-in-out infinite
}

/* Animación del latido */
@keyframes beat {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: scale(1)
  }
  30%, 50%, 70%, 90% {
    transform: scale(1.15)
  }
}

@media only screen and (min-width:601px) {
  #ubicacion .contenido .flex {
    padding-bottom: 85px;
  }
}

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

@media only screen and (max-width:600px) {
  main {
    background-size: auto;
    background-repeat: repeat-y;
  }
	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;
  }

  .logo {
    width: 200px;
  }

  button, button[type="button"], .btn {
    width: min(140px, 100%);
  }
  div:where(.swal2-container) h2:where(.swal2-title) {
    font-size: 1.3em!important;
  }

    #lugares-reservados .grid div:nth-of-type(2)::before {
    width: 0;
  }

  #collapsing-menu nav {
    margin-top: 230px;
    font-size: 22px;
  }
  
  .sobre h1 {
    font-size: 25px;
  }

  .enredadera {
    width: 170px;
  }
  .gato {
    width: 130px;
  }
  .sobre {
    --ancho-sobre: 330px;
  }
  .flores {
    height: 109px;
  }
}


@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);
  }
}