/* ============================================================
   PANTALLA INVITACIÓN INVÁLIDA
   ============================================================ */
.invalid-invitation-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: #f8f5f0;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.invalid-carta {
  background: #fff;
  border: 1px solid rgba(197,163,105,0.35);
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.10);
  padding: 3rem 2.5rem;
  max-width: 420px;
  width: 90%;
  text-align: center;
  position: relative;
}
.invalid-carta::before,
.invalid-carta::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(197,163,105,0.4);
}
.invalid-carta::before { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.invalid-carta::after  { bottom: 12px; right: 12px; border-left: none; border-top: none; }
.invalid-sello-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(197,163,105,0.3);
}
.invalid-sello {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.invalid-divider {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197,163,105,0.6), transparent);
  margin: 1.25rem auto;
}
.invalid-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  color: #aaa;
  margin-bottom: 0.5rem;
  font-style: italic;
}
.invalid-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.4rem, 5vw, 2rem);
  color: #5D3A5A;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.25rem;
}
.invalid-body {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: #666;
  line-height: 1.7;
}
.invalid-dot-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin: 1.5rem 0;
}
.invalid-dot-line   { width: 35px; height: 1px; background: rgba(197,163,105,0.45); }
.invalid-dot-circle { width: 4px; height: 4px; border-radius: 50%; background: rgba(197,163,105,0.6); }
.invalid-brand {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  color: #ccc;
  text-transform: uppercase;
}

/* ============================================================
   VARIABLES Y BASE
   ============================================================ */
:root{
--bg-texture-full: url("../assets/symphony.png");
--bg-cover: url("../assets/fondo4.jpg"); 
--bg-texture-sobre: url("../assets/fresh_snow.png");
--bg-texture-sobre-back: url("../assets/ep_naturalwhite.png");
--bg-navbar: #f8f9f5;
--bg-light: #fdfdfb;
--white: #ffffff;
--primary-color: #5D3A5A;
--secondary-color: #8B5B87;
--accent: #c5a369;
--form: #6b7c5c;
--texto: #8B1F32;}
*{
margin: 0;
padding: 0;
box-sizing: border-box;}
body{
background-color: var(--bg-light);
background-image: var(--bg-texture-full);
font-family: 'Cormorant Garamond', serif;
color: var(--primary-color);
line-height: 1.6;
margin: 0;
overflow-x: hidden;
overflow-y: auto; 
scroll-behavior: smooth;
max-width: 100vw;
width: 100%;
position: relative;
-ms-overflow-style: none; 
scrollbar-width: none;}
body::-webkit-scrollbar{
display: none;}
body::before{
content: '';
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: 
radial-gradient(circle at 20% 30%, rgba(201, 169, 110, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(201, 169, 110, 0.04) 0%, transparent 50%);
z-index: -1;
pointer-events: none;}
.noscroll{overflow: hidden; height: 100vh;}
.font-cinzel{font-family: 'Cinzel', serif;}
.font-cursive{font-family: 'Great Vibes', cursive;}
.font-montserrat{font-family: 'Montserrat', sans-serif;}
.font-cormorant{font-family: 'Cormorant Garamond', serif;}
.hero-section{
min-height: 100vh;
display: flex; 
align-items: center; 
justify-content: center;
position: relative;
background-image: url('../assets/fondo2.jpg');
background-size: cover; background-position: center;}
.hero-section,.section-padding,.max-w-6xl{
max-width: 100%;
overflow-x: hidden;}
.hero-overlay{
position: absolute; inset: 0;
z-index: 1;}
.hero-content{position: relative; z-index: 2; text-align: center; color: white; padding: 0 20px;}
.section-padding{padding: 100px 20px;}
.fade-up{opacity: 0; transform: translateY(30px); transition: all 1s ease;}
.fade-up.visible{opacity: 1; transform: translateY(0);}
.rsvp-card{
background: white; padding: 50px; box-shadow: 0 20px 50px rgba(0,0,0,0.05);
border-top: 4px solid var(--form);}
.footer-seal{
width: 60px; height: 60px;
border-radius: 50%; margin: 40px auto;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
font-family: 'Cinzel', serif; color: white; font-weight: bold;}
.section-divider{
display: flex;
align-items: center;
justify-content: center;
margin: 60px auto;
max-width: 300px;}
.divider-line{
height: 1px;
flex-grow: 1;
background: linear-gradient(
90deg,
transparent,
var(--accent),
transparent
);}
.divider-diamond{
width: 8px;
height: 8px;
background: var(--accent);
transform: rotate(45deg);
margin: 0 15px;}
.xv-ornamento-superior{
width: 80px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--color-primario), transparent);
margin: 0 auto 30px;}
.xv-ornamento-decorativo{
margin: 35px auto 0;
text-align: center;
color: var(--color-primario);
font-size: 1.5rem;
opacity: 0.6;}
.floral-divider{color: var(--secondary-color); font-size: 1.5rem; margin: 2rem 0;}
html{
overflow-x: hidden;
overflow-y: scroll;
scrollbar-width: none; 
-ms-overflow-style: none;}
html::-webkit-scrollbar{
display: none; 
width: 0;
height: 0;}
body{
overflow-x: hidden;
scrollbar-width: none; 
-ms-overflow-style: none;}
body::-webkit-scrollbar{
display: none; 
width: 0;
height: 0;}
*{
scrollbar-width: none; 
-ms-overflow-style: none;}
*::-webkit-scrollbar{
display: none; 
width: 0;
height: 0;}
#envelope-container{
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
padding: 20px;
background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), var(--bg-cover);
background-size: cover;
background-position: center;
perspective: 2000px;
transition: opacity 1s ease-out;}
.envelope-wrapper{
position: relative;
width: min(500px, 90vw);
height: min(350px, 60vh);
max-width: 500px;
transform-style: preserve-3d;
transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;}
.envelope-wrapper.flipped{
transform: rotateY(180deg);}
.envelope-face{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
background: #fff;
border: 1px solid #dcdcd4;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 30px;
background-image: var(--bg-texture-sobre);
-webkit-transform: translateZ(0);
transition: border-radius 0.3s ease;
overflow: hidden;}
.envelope-front{
padding: 40px; 
text-align: center;}
.envelope-back{
transform: rotateY(180deg); 
background: #fdfdfb;
border-radius: 30px;
overflow: visible;
background-image: var(--bg-texture-sobre);}
.envelope-wrapper.is-opening .envelope-back{
border-radius: 0 0 30px 30px;}
.envelope-back::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent; 
border-radius: 30px;
z-index: 0;
transition: border-radius 0.3s ease;}
.envelope-wrapper.is-opening .envelope-back::before{
border-radius: 0 0 30px 30px;}
.envelope-back::after{
content: '';
position: absolute;
top: 0; 
left: 0;
width: 100%; 
height: 100%;
background: linear-gradient(135deg, transparent 48%, rgba(240, 240, 235, 0.3) 50%, transparent 52%); 
z-index: 1;
border-radius: 30px;
transition: border-radius 0.3s ease;}
.envelope-wrapper.is-opening .envelope-back::after{
border-radius: 0 0 30px 30px;}
.back-flap{
background-image: var(--bg-texture-sobre-back);
position: absolute;
top: 0; 
left: 0;
width: 100%; 
height: 50%;
border-bottom: 1px solid #e0e0d8;
clip-path: polygon(0 0, 100% 0, 50% 100%);
z-index: 5;
transition: transform 0.6s ease 0.8s, z-index 0s 0.8s;
transform-origin: top;
border-radius: 30px 30px 0 0;
overflow: hidden;}
.is-opening .back-flap{
transform: rotateX(180deg); 
z-index: 0; 
border-radius: 0;}
.wax-seal{
position: absolute;
top: 50%; 
left: 50%;
transform: translate(-50%, -50%) scale(1);
width: 100px; 
height: 100px;
border-radius: 50%;
z-index: 10;
display: flex; 
justify-content: center; 
align-items: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.2);
font-family: 'Cinzel', serif;
color: rgba(255,255,255,0.8);
font-weight: bold; 
font-size: 20px;
transform-origin: center center;}
.wax-seal img{
width: 100%;
height: 100%;
object-fit: contain;}
.wax-seal::after{
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid rgba(197,163,105,0.7);
opacity: 0;
pointer-events: none;}
.envelope-front p.font-cinzel:first-child{
font-size: clamp(10px, 2.5vw, 14px);}
.envelope-front p.font-cursive{
margin-bottom: clamp(1rem, 4vw, 2.5rem);}
.envelope-front p.font-montserrat{
font-size: clamp(6px, 2vw, 8px);}
@media (max-width: 640px){
.envelope-wrapper{
width: 85vw;
height: auto;
aspect-ratio: 10 / 7;}
.envelope-face{
border-radius: 25px;}
.envelope-back{
border-radius: 25px;}
.envelope-wrapper.is-opening .envelope-back{
border-radius: 0 0 25px 25px;}
.envelope-back::before{
border-radius: 25px;}
.envelope-wrapper.is-opening .envelope-back::before{
border-radius: 0 0 25px 25px;}
.envelope-back::after{
border-radius: 25px;}
.envelope-wrapper.is-opening .envelope-back::after{
border-radius: 0 0 25px 25px;}
.envelope-front{
padding: clamp(15px, 5vw, 40px);}
.envelope-front p.font-cinzel:first-child{
font-size: 12px;
letter-spacing: 0.3em;
margin-bottom: 1.5rem;}
.envelope-front p.font-cursive{
font-size: 2.5rem !important;
margin-bottom: 1.5rem;}
.envelope-front p.font-montserrat{
font-size: 8px;
margin-top: 2rem;}
.wax-seal{
width: 80px !important;
height: 80px !important;}
.back-flap{
border-radius: 25px 25px 0 0;}
.is-opening .back-flap{
border-radius: 0;}
}
@media (max-width: 480px){
.envelope-wrapper{
width: 90vw;}
.envelope-front{
padding: 20px;}
.envelope-front p.font-cinzel:first-child{
font-size: 11px;
margin-bottom: 1rem;}
.envelope-front p.font-cursive{
font-size: 2.25rem !important;
margin-bottom: 1rem;}
.envelope-front p.font-montserrat{
font-size: 7px;
margin-top: 1.5rem;}
.wax-seal{
width: 75px !important;
height: 75px !important;}
}
@media (max-width: 360px){
.envelope-front p.font-cursive{
font-size: 2rem !important;}
.wax-seal{
width: 70px !important;
height: 70px !important;}
}
@media (max-width: 375px){
.envelope-wrapper{
width: 88vw;}
.envelope-front p.font-cursive{
font-size: 2rem !important;}
.envelope-front p.font-cinzel:first-child{
font-size: 10px;}
.envelope-front p.font-montserrat{
font-size: 7px;}
}
@media (min-width: 376px) and (max-width: 430px){
.envelope-wrapper{
width: 87vw;}
.envelope-front p.font-cursive{
font-size: 2.3rem !important;}
}
@media (min-width: 414px) and (max-width: 430px){
.envelope-front p.font-cursive{
font-size: 2.4rem !important;}
}
@media (min-width: 428px) and (max-width: 480px){
.envelope-wrapper{
width: 85vw;}
.envelope-front p.font-cursive{
font-size: 2.5rem !important;}
}
@media (min-width: 641px) and (max-width: 1024px){
.envelope-front p.font-cursive{
font-size: 2.8rem !important;}
}
@supports (padding: max(0px)){
#envelope-container{
padding: max(20px, env(safe-area-inset-top)) 
max(20px, env(safe-area-inset-right)) 
max(20px, env(safe-area-inset-bottom)) 
max(20px, env(safe-area-inset-left));}
}
@media (max-height: 430px) and (orientation: landscape){
.envelope-wrapper{
width: 60vw;
height: 80vh;}
.envelope-front{
padding: 15px;}
.envelope-front p.font-cursive{
font-size: 1.8rem !important;
margin-bottom: 0.5rem;}
.envelope-front p.font-cinzel:first-child{
margin-bottom: 0.5rem;}
.envelope-front p.font-montserrat{
margin-top: 1rem;}
}
@media screen and (device-width: 375px) and (device-height: 667px){
.envelope-front p.font-cursive{
font-size: 2rem !important;}
}
.font-cinzel{font-family: 'Cinzel', serif;}
.font-cursive{font-family: 'Great Vibes', cursive;}
.font-montserrat{font-family: 'Montserrat', sans-serif;}
.text-stone-400{color: #a8a29e;}
.text-stone-700{color: #44403c;}
.tracking-widest{letter-spacing: 0.1em;}
.uppercase{text-transform: uppercase;}
.mb-8{margin-bottom: 2rem;}
.mb-10{margin-bottom: 2.5rem;}
.mt-12{margin-top: 3rem;}
.text-xl{font-size: 1.25rem;}
.text-4xl{font-size: 2.25rem;}
.form-label{
display: block;
font-family: 'Cinzel', serif;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--form);
font-weight: 700;
margin-bottom: 8px;}
.form-input{
width: 100%;
border: none;
border-bottom: 1px solid #e5e7eb;
padding: 12px 0;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
background: transparent;
transition: border-color 0.3s;}
.form-input:focus{
outline: none;
border-bottom-color: var(--form);}
.btn-confirm{
width: 100%;
background: var(--primary-color);
color: white;
padding: 20px;
margin-top: 40px;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.3em;
transition: background 0.3s;}
.btn-confirm:hover{
background: var(--secondary-color);}
#navbar{
position: fixed;
top: 0; left: 0; width: 100%; z-index: 1000;
background: rgba(255, 255, 255, 0.22);
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
box-shadow: 0 4px 24px rgba(93, 58, 90, 0.10), 0 1px 0 rgba(255,255,255,0.5) inset;
transition: transform 0.3s ease;}
.nav-link{
font-family: 'Montserrat', sans-serif;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: #fff;
font-weight: 700;
text-shadow: 0 1px 4px rgba(0,0,0,0.55), 0 0 12px rgba(0,0,0,0.3);
transition: all 0.3s;}
.nav-link:hover{color: var(--accent);}
.mobile-nav-link{
padding: 12px 0;
display: block;
border-bottom: 1px solid rgba(93,58,90,0.08);
font-size: 13px;
color: var(--primary-color) !important;
text-shadow: none !important;
letter-spacing: 0.25em;
font-weight: 600;
opacity: 0.9;
transition: all 0.2s ease;}
.mobile-nav-link:hover{
color: var(--accent) !important;
opacity: 1;
padding-left: 6px;}
.mobile-nav-link:last-child{
border-bottom: none;}
#mobile-menu-btn.active span:nth-child(1){
transform: rotate(45deg) translate(5px, 5px);}
#mobile-menu-btn.active span:nth-child(2){
opacity: 0;}
#mobile-menu-btn.active span:nth-child(3){
transform: rotate(-45deg) translate(5px, -5px);}
#mobile-menu{
width: 100%;
max-width: 100vw;}
#navbar[style*="display: block"]{
display: block !important;}
#mobile-menu{
width: 100%;
max-width: 100vw;
background: rgba(255, 255, 255, 0.72) !important;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-top: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 8px 24px rgba(93, 58, 90, 0.1);}
.animate-fadeInUp svg{
animation: svgFloat 2s ease-in-out infinite;}
.animate-fadeInUp.delay-300 svg{
animation: svgFloat 2s ease-in-out infinite 0.5s;}
@keyframes svgFloat{
0%, 100%{transform: translateY(0) scale(1);}
45%{transform: translateY(-11px) scale(1.07);}
}
#vest-ella, #vest-el{visibility: visible !important; opacity: 1 !important;}
#vest-ella svg, #vest-el svg{visibility: visible !important; opacity: 1 !important;}
.itinerary-item-centered{
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
text-align: left;
padding: 20px;
transition: transform 0.3s ease;}
.itinerary-item-centered:hover{
transform: translateX(5px);}
.itinerary-time{
font-weight: 600;
color: var(--accent);
min-width: 100px;
text-align: right;
font-size: 1.1rem;}
.itinerary-icon-svg{
color: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
width: 44px;
height: 44px;
flex-shrink: 0;}
.itinerary-icon-svg svg{
display: block;
margin: auto;
width: 32px;
height: 32px;}
.itinerary-icon-svg svg{
width: 32px;
height: 32px;
stroke: var(--primary-color);}
@media (max-width: 640px){
.itinerary-item-centered{
gap: 12px;
padding: 15px 10px;}
.itinerary-time{
min-width: 80px;
font-size: 0.9rem;}
.itinerary-icon-svg{
min-width: 32px;}
.itinerary-icon-svg svg{
width: 24px;
height: 24px;}
.itinerary-item-centered h3{
font-size: 0.95rem;}
}
#itinerario{
padding: 5rem 1rem;
position: relative;}
.atcb-list{
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
border-radius: 15px !important;
padding: 10px !important;}
.atcb-list-item{
padding: 12px 20px !important;
font-family: 'Montserrat', sans-serif !important;}
.atcb-button{
background: var(--primary-color) !important;
font-family: 'Montserrat', sans-serif !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;}
#app-container{
overflow-x: hidden;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 0;
margin: 0;}
#gallery-container{
position: relative;
width: 100vw;
max-width: none;
height: 100vh;
min-height: 100vh;
cursor: pointer;
background-color: #f3f4f6;
overflow: hidden;
border-radius: 0;}
@media (max-width: 768px){
#gallery-container{
height: 100vh;
min-height: 100vh;}
}
.photo-card{
position: absolute;
width: 350px;
height: 500px;
padding: 1rem;
background-color: white;
border-radius: 1rem;
box-shadow: 0 10px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.1);
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
will-change: transform;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
user-select: none;}
.photo-card img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0.5rem;
pointer-events: none;}
.photo-card:nth-child(1){top: 10%; left: 10%; transform: rotate(-15deg);}
.photo-card:nth-child(2){top: 15%; left: 60%; transform: rotate(10deg);}
.photo-card:nth-child(3){top: 45%; left: 15%; transform: rotate(5deg);}
.photo-card:nth-child(4){top: 50%; left: 65%; transform: rotate(-10deg);}
@media (max-width: 600px){
.photo-card{
width: 220px;
height: 320px;
padding: 0.75rem;}
.photo-card:nth-child(1){top: 5%; left: 5%;}
.photo-card:nth-child(2){top: 10%; left: 45%;}
.photo-card:nth-child(3){top: 40%; left: 8%;}
.photo-card:nth-child(4){top: 45%; left: 50%;}
}
#gallery-container.ordered .photo-card{
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -175px;}
@media (max-width: 600px){
#gallery-container.ordered .photo-card{
margin-top: -160px;
margin-left: -110px;}
}
#gallery-container.ordered .photo-card:nth-child(1){z-index: 5; transform: rotate(2deg) scale(1.1);}
#gallery-container.ordered .photo-card:nth-child(2){z-index: 4; transform: rotate(-2deg) scale(1.05);}
#gallery-container.ordered .photo-card:nth-child(3){z-index: 3; transform: rotate(4deg) scale(1.0);}
#gallery-container.ordered .photo-card:nth-child(4){z-index: 2; transform: rotate(-4deg) scale(0.95);}
.photo-card.dismiss-left{transform: translate(-150vw, -20%) rotate(-30deg) !important; opacity: 0;}
.photo-card.dismiss-right{transform: translate(150vw, -20%) rotate(30deg) !important; opacity: 0;}
.instructions{
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
color: #888;
font-size: 0.9rem;
pointer-events: none;}
@media (max-width: 640px){
.instructions{font-size: 0.75rem; bottom: 10px;}
}
.lightbox{
display: none;
position: fixed;
z-index: 9999;
padding-top: 50px;
left: 0; top: 0;
width: 100%; height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.95);
animation: fadeIn 0.3s ease;}
@keyframes fadeIn{from{opacity: 0;}to{opacity: 1;}}
.lightbox-content{
margin: auto;
display: block;
max-width: 90%;
max-height: 85vh;
object-fit: contain;
animation: zoomIn 0.3s ease;
border-radius: 8px;}
@keyframes zoomIn{from{transform: scale(0.7);}to{transform: scale(1);}}
.lightbox-close{
position: absolute;
top: 20px; right: 35px;
color: #fff;
font-size: 50px;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
z-index: 10000;}
.lightbox-close:hover,.lightbox-close:focus{color: #bbb; transform: scale(1.2);}
.lightbox-caption{
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 15px 0;
font-family: 'Montserrat', sans-serif;
font-size: 16px;}
.lightbox-prev,.lightbox-next{
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding: 16px 20px;
color: white;
font-weight: bold;
font-size: 40px;
transition: 0.3s ease;
border-radius: 0 4px 4px 0;
user-select: none;
z-index: 10001;
background-color: rgba(0, 0, 0, 0.3);}
.lightbox-prev{left: 0; border-radius: 0 4px 4px 0;}
.lightbox-next{right: 0; border-radius: 4px 0 0 4px;}
.lightbox-prev:hover,.lightbox-next:hover{background-color: rgba(0, 0, 0, 0.8); transform: scale(1.1);}
.lightbox-counter{
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 18px;
background-color: rgba(0, 0, 0, 0.5);
padding: 8px 16px;
border-radius: 20px;
font-family: 'Montserrat', sans-serif;}
@media (max-width: 768px){
.lightbox-content{max-width: 95%; max-height: 80vh;}
.lightbox-close{top: 10px; right: 15px; font-size: 40px;}
.lightbox-caption{font-size: 14px; width: 90%;}
.lightbox-prev,.lightbox-next{font-size: 30px; padding: 12px 16px; margin-top: -25px;}
.lightbox-counter{font-size: 14px; padding: 6px 12px;}
}
.hashtag-bg{
background-image: url('../assets/fiesta.webp');
background-size: cover;
background-position: center;
background-attachment: fixed;}
@media (max-width: 768px){
.hashtag-bg{background-attachment: scroll;}
}
:root{
--color-primario: #c9a96e; 
--color-secundario: #8b7355; 
--color-acento: #d4af37; 
--blanco-puro: #ffffff;
--blanco-suave: #fafafa;
--gris-claro: #f5f5f5;
--gris-medio: #e0e0e0;
--texto-oscuro: #2c2c2c;
--texto-medio: #666666;
--sombra-suave: 0 4px 20px rgba(0, 0, 0, 0.08);
--sombra-media: 0 8px 30px rgba(0, 0, 0, 0.12);
--sombra-fuerte: 0 15px 50px rgba(0, 0, 0, 0.15);}
.xv-galeria-container{
max-width: 1300px;
margin: 0 auto;
padding: 60px 30px;}
.xv-galeria-header{
text-align: center;
margin-bottom: 100px;
position: relative;
animation: xvFadeInDown 1s ease;}
@keyframes xvFadeInDown{
from{opacity: 0; transform: translateY(-30px);}
to{opacity: 1; transform: translateY(0);}
}
.xv-galeria-header .subtitle{
font-size: clamp(0.9rem, 1.5vw, 1.1rem);
color: var(--texto-medio);
font-weight: 300;
letter-spacing: 0.25em;
text-transform: uppercase;
margin-top: 35px;}
.xv-galeria-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
margin-bottom: 80px;}
.xv-foto-item{
position: relative;
cursor: pointer;
animation: xvFadeInUp 0.8s ease backwards;}
.xv-foto-item:nth-child(1){animation-delay: 0.1s;}
.xv-foto-item:nth-child(2){animation-delay: 0.2s;}
.xv-foto-item:nth-child(3){animation-delay: 0.3s;}
.xv-foto-item:nth-child(4){animation-delay: 0.4s;}
.xv-foto-item:nth-child(5){animation-delay: 0.5s;}
.xv-foto-item:nth-child(6){animation-delay: 0.6s;}
@keyframes xvFadeInUp{
from{opacity: 0; transform: translateY(30px);}
to{opacity: 1; transform: translateY(0);}
}
.xv-foto-wrapper{
position: relative;
overflow: hidden;
background: var(--blanco-puro);
padding: 15px;
box-shadow: var(--sombra-suave);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);}
.xv-foto-item:hover .xv-foto-wrapper{
transform: translateY(-8px);
box-shadow: var(--sombra-fuerte);}
.xv-foto-inner{
position: relative;
overflow: hidden;
aspect-ratio: 4/5;}
.xv-foto-inner img{
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
display: block;}
.xv-foto-item:hover .xv-foto-inner img{transform: scale(1.05);}
.xv-foto-overlay{
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(to top, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.85) 60%, transparent);
padding: 30px 25px 25px;
transform: translateY(calc(100% - 70px));
transition: transform 0.4s ease;}
.xv-foto-item:hover .xv-foto-overlay{transform: translateY(0);}
.xv-foto-overlay .xv-numero{
font-family: 'Cormorant Garamond', serif;
font-size: 0.85rem;
color: var(--color-primario);
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 8px;}
.xv-foto-overlay h3{
font-family: 'Cormorant Garamond', serif;
font-size: 1.6rem;
color: var(--texto-oscuro);
font-weight: 500;
margin-bottom: 10px;
line-height: 1.3;}
.xv-foto-overlay p{
font-size: 0.9rem;
color: var(--texto-medio);
line-height: 1.6;
font-weight: 300;}
.xv-foto-overlay::before{
content: '';
position: absolute;
top: 15px; left: 25px;
width: 40px; height: 1px;
background: var(--color-primario);}
.xv-galeria-modal{
display: none;
position: fixed;
z-index: 9999;
left: 0; top: 0;
width: 100%; height: 100%;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(10px);
animation: xvFadeIn 0.3s ease;}
@keyframes xvFadeIn{from{opacity:0;}to{opacity:1;}}
.xv-modal-content{
margin: auto;
display: block;
max-width: 85%;
max-height: 85vh;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
box-shadow: var(--sombra-fuerte);
animation: xvZoomIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transition: opacity 0.2s ease;}
@keyframes xvZoomIn{
from{transform: translate(-50%, -50%) scale(0.9); opacity: 0;}
to{transform: translate(-50%, -50%) scale(1); opacity: 1;}
}
.xv-modal-close{
position: absolute;
top: 40px; right: 50px;
color: var(--texto-oscuro);
font-size: 2.5rem;
font-weight: 300;
cursor: pointer;
z-index: 10000;
transition: all 0.3s ease;
width: 50px; height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: var(--blanco-puro);
border-radius: 50%;
box-shadow: var(--sombra-suave);}
.xv-modal-close:hover{transform: rotate(90deg); color: var(--color-primario); box-shadow: var(--sombra-media);}
.xv-modal-prev,.xv-modal-next{
position: absolute;
top: 50%;
transform: translateY(-50%);
color: var(--texto-oscuro);
font-size: 4rem;
font-weight: 300;
cursor: pointer;
z-index: 10001;
width: 60px; height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: var(--blanco-puro);
border-radius: 50%;
box-shadow: var(--sombra-suave);
transition: all 0.3s ease;
user-select: none;}
.xv-modal-prev{left: 40px;}
.xv-modal-next{right: 40px;}
.xv-modal-prev:hover,.xv-modal-next:hover{
background: var(--color-primario);
color: var(--blanco-puro);
transform: translateY(-50%) scale(1.1);
box-shadow: var(--sombra-media);}
.xv-modal-counter{
position: absolute;
bottom: 40px; left: 50%;
transform: translateX(-50%);
color: var(--texto-oscuro);
font-size: 1rem;
z-index: 10001;
background: var(--blanco-puro);
padding: 12px 24px;
border-radius: 25px;
box-shadow: var(--sombra-suave);
letter-spacing: 0.1em;}
@media (max-width: 768px){
.xv-galeria-grid{grid-template-columns: 1fr; gap: 30px;}
.xv-modal-close{top: 20px; right: 20px; width: 45px; height: 45px; font-size: 2rem;}
.xv-modal-prev,.xv-modal-next{width: 50px; height: 50px; font-size: 3rem;}
.xv-modal-prev{left: 15px;}
.xv-modal-next{right: 15px;}
.xv-modal-counter{bottom: 20px; font-size: 0.9rem; padding: 10px 20px; max-width: 92%; max-height: 80vh;}
}
@media (hover: none) and (pointer: coarse){
.xv-foto-overlay{transform: translateY(calc(100% - 80px));}
}
.xv-footer-ornamento{
width: 60px; height: 60px;
margin: 0 auto 30px;
border: 1px solid var(--color-primario);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primario);
font-size: 1.5rem;}
.modal-header{
text-align: center;
padding: 50px 40px 30px;
border-bottom: 1px solid #f5f5f5;
position: relative;}
.modal-header::before{
content: '';
width: 60px; height: 2px;
background: linear-gradient(90deg, transparent, var(--primary-color, #c9a96e), transparent);
position: absolute;
top: 30px; left: 50%;
transform: translateX(-50%);}
.success-message,.error-message{
display: none;
text-align: center;
padding: 60px 40px;
animation: fadeInSuccess 0.6s ease;}
@keyframes fadeInSuccess{
from{opacity: 0; transform: scale(0.95);}
to{opacity: 1; transform: scale(1);}
}
.success-message::before{
content: '✓';
display: block;
width: 80px; height: 80px;
margin: 0 auto 30px;
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border-radius: 50%;
font-size: 3rem;
color: #16a34a;
line-height: 80px;
box-shadow: 0 10px 30px rgba(34, 197, 94, 0.2);}
.success-message{
font-size: 1.15rem;
color: var(--secondary-color, #2c2c2c);
line-height: 1.8;
font-weight: 400;}
.error-message::before{
content: '⚠';
display: block;
width: 60px; height: 60px;
margin: 0 auto 20px;
background: #fef2f2;
border-radius: 50%;
font-size: 2rem;
color: #dc2626;
line-height: 60px;}
.error-message{font-size: 1rem; color: var(--secondary-color, #2c2c2c); line-height: 1.7;}
.form-group{margin-bottom: 30px;}
.form-group label{
display: block;
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
font-weight: 500;
color: var(--secondary-color, #2c2c2c);
letter-spacing: 0.02em;
margin-bottom: 10px;}
.form-group input[type="text"],.form-group textarea{
width: 100%;
padding: 15px 18px;
border: 1px solid #e5e7eb;
border-radius: 0;
font-size: 1rem;
font-family: 'Montserrat', sans-serif;
color: var(--secondary-color, #2c2c2c);
transition: all 0.3s ease;
background: white;
box-sizing: border-box;}
.form-group input[type="text"]:focus,.form-group textarea:focus{
outline: none;
border-color: var(--primary-color, #c9a96e);
box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.1);}
.form-group textarea{resize: vertical; min-height: 100px; line-height: 1.6;}
.radio-group{display: flex; flex-direction: column; gap: 12px;}
.radio-option{
display: flex;
align-items: flex-start;
padding: 18px 20px;
border: 1px solid #e5e7eb;
cursor: pointer;
transition: all 0.3s ease;
position: relative;}
.radio-option:hover{border-color: var(--primary-color, #c9a96e); background: #fafafa;}
.radio-option input[type="radio"]{
margin: 0; margin-right: 15px; margin-top: 2px;
width: 20px; height: 20px;
flex-shrink: 0; cursor: pointer;
-webkit-appearance: none; -moz-appearance: none; appearance: none;
border: 2px solid #d1d5db;
border-radius: 50%;
position: relative;
transition: all 0.3s ease;}
.radio-option input[type="radio"]:checked{border-color: var(--primary-color, #c9a96e);}
.radio-option input[type="radio"]:checked::after{
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 10px; height: 10px;
background: var(--primary-color, #c9a96e);
border-radius: 50%;}
.radio-option span{display: flex; flex-direction: column; gap: 4px; flex: 1;}
.radio-option small{display: block; font-size: 0.85rem; color: #6b7280; font-weight: 300; line-height: 1.4;}
.btn-confirm{
width: 100%;
padding: 16px 32px;
background: var(--primary-color, #c9a96e);
color: white;
border: none;
font-size: 1.1rem;
font-weight: 500;
font-family: 'Montserrat', sans-serif;
cursor: pointer;
transition: all 0.3s ease;
letter-spacing: 0.02em;
margin-top: 10px;}
.btn-confirm:hover{background: var(--secondary-color, #2c2c2c); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);}
.btn-confirm:active{transform: translateY(0);}
.loading{
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(5px);
z-index: 10000;
align-items: center;
justify-content: center;}
.loading-content{text-align: center;}
.loading-spinner{
width: 50px; height: 50px;
margin: 0 auto;
border: 3px solid rgba(201, 169, 110, 0.2);
border-top-color: var(--primary-color, #c9a96e);
border-radius: 50%;
animation: spin 1s linear infinite;}
@keyframes spin{to{transform: rotate(360deg);}}
.loading-text{margin-top: 20px; font-size: 1.25rem; font-weight: bold; color: var(--primary-color, #c9a96e);}
.loading-dots{display: inline-block; animation: dots 1.5s infinite;}
@keyframes dots{0%, 20%{content: '.';}40%{content: '..';}60%, 100%{content: '...';}}
.loading-subtext{margin-top: 8px; font-size: 1rem; color: #6b7280;}
.music-toggle{
position: fixed;
bottom: 30px; right: 30px;
width: 60px; height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border: none;
color: white;
font-size: 20px;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
z-index: 9999;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;}
.music-toggle:hover{transform: scale(1.1); box-shadow: 0 6px 30px rgba(0,0,0,0.4);}
.music-toggle.playing{animation: pulse 2s infinite;}
@keyframes pulse{
0%, 100%{transform: scale(1); box-shadow: 0 4px 20px rgba(199, 44, 72, 0.3);}
50%{transform: scale(1.05); box-shadow: 0 6px 30px rgba(199, 44, 72, 0.5);}
}
.countdown-container{
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
flex-wrap: nowrap;
padding: 40px 20px;}
.countdown-item{
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(135deg, var(--sage-bg) 0%, #fff 100%);
border: 2px solid var(--sage-light);
border-radius: 12px;
padding: 30px 25px;
min-width: 120px;
box-shadow: 0 8px 20px rgba(107, 124, 92, 0.1);
transition: all 0.3s ease;}
.countdown-item:hover{transform: translateY(-5px); box-shadow: 0 12px 30px rgba(107, 124, 92, 0.2); border-color: var(--sage-green);}
.countdown-value{
font-family: 'Cinzel', serif;
font-size: 48px;
font-weight: 700;
color: var(--sage-green);
line-height: 1;
margin-bottom: 10px;}
.countdown-label{
font-family: 'Montserrat', sans-serif;
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--primary-dark);
font-weight: 600;}
.countdown-separator{
font-family: 'Cinzel', serif;
font-size: 40px;
color: var(--sage-light);
font-weight: 300;
margin: 0 10px;}
@media (max-width: 768px){
.countdown-container{gap: 8px; padding: 20px 12px 28px;}
.countdown-item{
min-width: 68px; padding: 14px 10px;
border-radius: 14px;
background: rgba(255,255,255,0.55);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
border: 1px solid rgba(197,163,105,0.25);
box-shadow: 0 4px 14px rgba(93,58,90,0.08);}
.countdown-value{font-size: 28px; margin-bottom: 5px;}
.countdown-label{font-size: 7px; letter-spacing: 0.2em;}
.countdown-separator{font-size: 22px; margin: 0 1px; padding-bottom: 16px; color: var(--accent);}
}
@media (max-width: 480px){
.countdown-item{min-width: 58px; padding: 12px 8px;}
.countdown-value{font-size: 24px;}
.countdown-separator{font-size: 20px; padding-bottom: 14px;}
}
@media (max-width: 360px){
.countdown-item{min-width: 50px; padding: 10px 6px;}
.countdown-value{font-size: 22px;}
.countdown-separator{font-size: 18px;}
}
.invitacion-card{
max-width: 600px;
margin: 0 auto;
background: var(--white);
border-radius: 20px;
padding: 50px 40px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
border: 2px solid rgba(166, 3, 93, 0.1);
position: relative;
animation: fadeInUp 0.8s ease-out;}
@keyframes fadeInUp{
from{opacity: 0; transform: translateY(30px);}
to{opacity: 1; transform: translateY(0);}
}
.invitacion-card::before,.invitacion-card::after{
content: '';
position: absolute;
width: 80px; height: 80px;
border: 3px solid var(--accent);
opacity: 0.4;}
.invitacion-card::before{top: 15px; left: 15px; border-right: none; border-bottom: none;}
.invitacion-card::after{bottom: 15px; right: 15px; border-left: none; border-top: none;}
.invitado-nombre{
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 42px;
font-weight: 600;
color: var(--primary-color);
text-align: center;
margin-bottom: 20px;
letter-spacing: 1px;}
.divider{
width: 80px; height: 3px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
margin: 25px auto;}
.invitado-mensaje{
font-size: 16px;
line-height: 1.8;
color: var(--texto);
text-align: center;
margin: 30px 0;
padding: 0 20px;
font-weight: 400;}
.detalles-container{
background: var(--bg-texture-sobre-back) var(--bg-light);
border-radius: 15px;
padding: 30px;
margin: 35px 0;
border-left: 4px solid var(--primary-color);}
.detail-item{
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
padding: 12px 0;
border-bottom: 1px solid rgba(166, 3, 93, 0.1);}
.detail-item:last-child{border-bottom: none; margin-bottom: 0;}
.detail-icon{width: 20px; height: 20px; color: var(--primary-color); flex-shrink: 0;}
.detail-label{font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--secondary-color); font-weight: 600; min-width: 100px;}
.detail-value{font-size: 16px; color: var(--texto); font-weight: 500; flex: 1;}
.confirmacion-aviso{
background: linear-gradient(135deg, rgba(166, 3, 93, 0.08), rgba(139, 31, 50, 0.05));
border-left: 4px solid var(--accent);
padding: 20px 25px;
border-radius: 0 12px 12px 0;
margin-top: 30px;}
.confirmacion-texto{font-size: 14px; color: var(--texto); line-height: 1.6; text-align: center;}
.fecha-destacada{font-weight: 700; color: var(--primary-color);}
.mensaje-final{
text-align: center;
margin-top: 30px;
padding-top: 25px;
border-top: 2px solid rgba(197, 163, 105, 0.3);}
.mensaje-final-texto{font-size: 13px; color: var(--secondary-color); font-style: italic; line-height: 1.5;}
.loading{color: var(--accent); font-style: italic;}
@media (max-width: 600px){
.invitacion-card{padding: 40px 25px;}
.invitado-nombre{font-size: 32px;}
.invitado-mensaje{font-size: 15px; padding: 0 10px;}
.detalles-container{padding: 25px 20px;}
.detail-item{flex-direction: column; align-items: flex-start; gap: 8px;}
.detail-label{min-width: auto;}
}
.pase-modal{
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
z-index: 9999;
animation: fadeIn 0.3s ease;
overflow-y: auto; 
overflow-x: hidden;
padding: 20px 0;}
.pase-container{
animation: slideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
max-width: 450px;
width: 90%;
margin: auto;
max-height: none;}
@keyframes slideUp{
from{opacity: 0; transform: translateY(50px) scale(0.9);}
to{opacity: 1; transform: translateY(0) scale(1);}
}
.pase-card{
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
position: relative;
margin: 20px auto;}
.pase-header{
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
padding: 30px 20px;
text-align: center;
color: white;
position: relative;
overflow: hidden;}
.pase-header::before{
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: shimmer 3s ease-in-out infinite;}
@keyframes shimmer{
0%, 100%{transform: translate(0, 0) rotate(0deg);}
50%{transform: translate(10px, 10px) rotate(5deg);}
}
.pase-body{padding: 30px 25px;}
.qr-container{
background: white;
padding: 15px;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
display: inline-block;}
.btn-action{transition: all 0.3s ease;}
.btn-action:hover{transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);}
.badge{
display: inline-block;
padding: 5px 15px;
background: rgba(255, 255, 255, 0.2);
border-radius: 20px;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;}
.info-row{
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;}
.info-row:last-child{border-bottom: none;}
.floating-btn{
display: none;
position: fixed; 
bottom: 0px; 
left: 50%;
right: auto;
transform: translateX(-50%); 
width: 60px; height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
cursor: pointer;
box-shadow: 0 4px 20px rgba(166, 3, 93, 0.4);
z-index: 9998;
transition: transform 0.3s ease, opacity 0.3s ease;}
.floating-btn:hover{transform: translateX(-50%) scale(1.1);}
@media (max-width: 640px){
.pase-modal{padding: 10px 0;}
.pase-container{width: 95%; max-width: 100%;}
.pase-card{margin: 10px auto;}
.pase-header{padding: 20px 15px;}
.pase-body{padding: 20px 15px;}
.qr-container{padding: 10px;}
#qrcode canvas{max-width: 100%; height: auto !important; width: 200px !important;}
}
@media (max-width: 380px){
.pase-body{padding: 15px 10px;}
#qrcode canvas{width: 180px !important;}
.info-row{font-size: 0.85rem;}
}
/* ============================================================
   CONFETTI — agrega en invitacionstyles.css
   ============================================================ */
.confetti {
  position: fixed;
  top: -10px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  opacity: 0;
  z-index: 99999;
  pointer-events: none;
  animation: confettiFall linear forwards;
}

@keyframes confettiFall {
  0%   { transform: translateY(0)      rotate(0deg)   scaleX(1);   opacity: 1; }
  25%  { transform: translateY(25vh)   rotate(120deg) scaleX(-1);  opacity: 1; }
  50%  { transform: translateY(50vh)   rotate(240deg) scaleX(1);   opacity: 0.9; }
  75%  { transform: translateY(75vh)   rotate(320deg) scaleX(-1);  opacity: 0.6; }
  100% { transform: translateY(105vh)  rotate(480deg) scaleX(1);   opacity: 0; }
}