*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
	--gold: #b8965a;
	--gold-light: #d4b07a;
	--gold-pale: #f0e4cc;
	--lila: #9b7fc0;
	--lila-light: #b89dd6;
	--lila-pale: #ede5f7;
	--lila-deep: #6b4f9a;
	--lila-mist: #f5f0fc;
	--cream: #e3ded4;
	--dark: #1a1220;
	--mid: #3d2f52;
	--soft: #1a1220;
	/* --soft: #7a6a8a; */
	--white: #ffffff;
}

html { scroll-behavior: smooth; }

html,
body {
	font-family: 'Montserrat', sans-serif;
	background: var(--cream);
	color: var(--dark);
	overflow-x: hidden;
	overscroll-behavior-x:none;
	position:relative;
}

/* ── AUDIO ── */
#audio-btn {
	position: fixed; bottom: 1.5rem; right: 1.5rem;
	z-index: 999;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--lila), var(--gold));
	border: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 20px rgba(155,127,192,.45);
	transition: transform .2s;
}
#audio-btn:hover { transform: scale(1.1); }
#audio-btn svg { fill: #fff; width: 22px; height: 22px; }

/* ── HERO ── */
#hero {
	min-height: 130vh;
	background: var(--dark);
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	text-align: center;
	padding: 2rem;
	position: relative;
	overflow: hidden;
	max-width: 100%;
	margin: 0;
}
@media (min-width: 992px) {
	#hero { min-height: 130vh; }
}
/* Para móviles */
@media (max-width: 600px) {
	#hero { min-height: 80vh; }
}
.hero-photo {
	position: absolute; inset: 0;
	z-index: 0;
	overflow: hidden;
}
.hero-slide {
	position: absolute; inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	animation: heroKenBurns 24s infinite;
	animation-fill-mode: backwards;
}
@keyframes heroKenBurns {
	0%   { opacity: 0; transform: scale(1); }
	4%   { opacity: 1; }
	21%  { opacity: 1; }
	25%  { opacity: 0; transform: scale(1.15); }
	100% { opacity: 0; transform: scale(1.15); }
}
.hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(26,18,32,.55) 0%, rgba(26,18,32,.45) 45%, rgba(26,18,32,.85) 100%);
	z-index: 1;
}
#hero::before {
	content: '';
	position: absolute; inset: 0;
	z-index: 2;
	background:
	radial-gradient(ellipse at 30% 40%, rgba(155,127,192,.22) 0%, transparent 55%),
	radial-gradient(ellipse at 70% 60%, rgba(184,150,90,.14) 0%, transparent 55%);
}
.hero-content {
	position: relative;
	z-index: 3;
	display: flex; flex-direction: column;
	align-items: center;
}
.hero-wave {
	position: absolute;
	bottom: -1px; left: 0;
	width: 100%; height: 50px;
	z-index: 4;
	fill: var(--cream);
}

/* Monogram */
.hero-monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin-bottom: 1.5rem;
}
.hero-initials {
	display: flex;
	align-items: center;
	gap: .6rem;
}
.hero-initial {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(4rem, 14vw, 7.5rem);
	font-weight: 300;
	color: var(--white);
	line-height: 1;
}
.hero-leaf {
	width: 26px; height: 26px;
	color: var(--lila-light);
	opacity: .85;
}
.hero-leaf-top { transform: rotate(-15deg); }
.hero-leaf-bottom { transform: rotate(165deg); }
.hero-divider {
	width: 1px; height: 90px;
	background: linear-gradient(to bottom, transparent, var(--lila-light), transparent);
}
.hero-vname {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: .75rem;
	letter-spacing: .3em;
	color: var(--lila-pale);
	text-transform: uppercase;
	font-weight: 300;
	align-self: center;
}
/* floating petals */
.petal {
	position: absolute; pointer-events: none;
	border-radius: 50% 10% 50% 10%;
	opacity: .18;
	animation: drift linear infinite;
}
@keyframes drift {
	0%   { transform: translateY(110vh) rotate(0deg); opacity: 0; }
	10%  { opacity: .18; }
	90%  { opacity: .12; }
	100% { transform: translateY(-10vh) rotate(720deg); opacity: 0; }
}

.hero-ornament {
	width: 120px; height: 1px;
	background: linear-gradient(to right, transparent, var(--lila-light), transparent);
	margin: 1rem auto;
}

.hero-pre {
	font-size: .65rem;
	letter-spacing: .35em;
	color: var(--lila-light);
	text-transform: uppercase;
	font-weight: 400;
}

.hero-date {
	font-size: .7rem;
	letter-spacing: .3em;
	color: var(--lila-pale);
	font-weight: 300;
	text-transform: uppercase;
	margin-top: 1.5rem;
}

/* Countdown */
#countdown {
	display: flex; gap: 1.5rem;
	margin: 2.5rem 0;
	flex-wrap: nowrap; justify-content: center;
}
.cd-unit { display: flex; flex-direction: column; align-items: center; }
.cd-num {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(1.8rem, 8vw, 4rem);
	font-weight: 300;
	color: var(--white);
	line-height: 1;
	min-width: 2ch; text-align: center;
}
.cd-label {
	font-size: clamp(.4rem, 1.6vw, .55rem); letter-spacing: .15em;
	color: var(--lila-light); text-transform: uppercase;
	margin-top: .3rem;
	white-space: nowrap;
}
.cd-sep {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(1.4rem, 6vw, 2.5rem); color: var(--lila-light);
	align-self: flex-start; padding-top: .2rem;
}
@media (max-width: 400px) {
	#countdown { gap: .5rem; }
	.cd-label { letter-spacing: .08em; }
}

/* ── SECTIONS ── */
section {
	padding: 3.5rem 1.5rem;
	max-width: 780px;
	margin: 0 auto;
}

.sec-label {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 1.55rem; letter-spacing: .08em;
	color: var(--dark); text-transform: none;
	display: block; text-align: center;
	margin-bottom: .6rem;
}

.sec-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(2rem, 6vw, 3rem);
	font-weight: 300;
	text-align: center;
	color: var(--dark);
	line-height: 1.15;
}

.divider {
	width: 80px; height: 1px;
	background: linear-gradient(to right, transparent, var(--lila-light), transparent);
	margin: 1.5rem auto;
}

/* ── QUOTE ── */
#cita {
	background: url('img/fondos/marmol_blanco.webp') center/cover no-repeat;
	max-width: 100%;

}
.quote-block {
	text-align: center;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 1.75rem;
	color: var(--gold);
	line-height: 1.3;
	max-width: 520px; margin: 0 auto;
}
.quote-block::before { content: '\201C'; color: var(--gold); font-size: 3rem; line-height: 0; vertical-align: -.4em; margin-right: .1em; }
.quote-block::after  { content: '\201D'; color: var(--gold); font-size: 3rem; line-height: 0; vertical-align: -.4em; margin-left: .1em; }

/* ── NOVIOS ── */
.historia-text {
	text-align: justify;
	line-height: 1.5;
}
.novios-grid {
	display: grid; grid-template-columns: 1fr auto 1fr;
	gap: 2rem; align-items: center; margin-top: 3rem;
}
@media (max-width: 600px) {
	.novios-grid { grid-template-columns: 1fr; text-align: center; }
	.novios-amp { order: 2; }
	.novio-card:last-child { order: 3; }
}
.novio-avatar {
	width: 130px; height: 130px; border-radius: 50%;
	border: 2px solid var(--lila-light);
	display: block; margin: 0 auto 1.2rem;
	background: var(--lila-pale);
	overflow: hidden;
	box-shadow: 0 0 0 6px rgba(155,127,192,.12);
}
.novio-avatar-inner {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	font-family: 'Cormorant Garamond', serif;
	font-size: 3rem; color: var(--lila);
}
.novio-name {
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.5rem; font-weight: 400;
	color: var(--dark); text-align: center; margin-bottom: .5rem;
}
.novio-text {
	font-size: .75rem; color: var(--soft); line-height: 1.8;
	font-weight: 300; text-align: center;
}
.novios-amp {
	font-family: 'Cormorant Garamond', serif;
	font-size: 3.5rem; color: var(--lila);
	font-style: italic; text-align: center; line-height: 1;
}

/* ── SAVE THE DATE ── */
#save {
	background: url('img/fondos/marmol_blanco.webp') center/cover no-repeat;
	max-width: 100%;
	padding: 5rem 1.5rem;
	text-align: center;
	position: relative; overflow: hidden;
}
#save::after {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(ellipse at 50% 80%, rgba(155,127,192,.10), transparent 60%);
	pointer-events: none;
}
#save .sec-title { color: var(--dark); }
#save .sec-label { color: var(--lila); }

.save-inner { max-width: 480px; margin: 2rem auto 0; position: relative; z-index: 1; }
.save-box {
	border: 1px solid rgba(155,127,192,.4);
	padding: 2rem; position: relative;
	background: rgba(255,255,255,.55);
	backdrop-filter: blur(2px);
}
.save-box::before, .save-box::after {
	content: ''; position: absolute;
	width: 18px; height: 18px;
	border-color: var(--lila); border-style: solid;
}
.save-box::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.save-box::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.save-line {
	font-size: .65rem; letter-spacing: .3em;
	color: var(--soft); text-transform: uppercase;
	display: block; margin: .4rem 0;
}
.save-big {
	font-family: 'Cormorant Garamond', serif;
	font-size: 2rem; color: var(--dark); font-weight: 300;
}
.btn-cal {
	display: inline-block; margin-top: 1.5rem;
	font-size: .6rem; letter-spacing: .25em;
	color: var(--lila-deep); text-decoration: none;
	text-transform: uppercase; border: 1px solid var(--lila);
	padding: .6rem 1.5rem; transition: background .2s, color .2s;
	position: relative; z-index: 1;
}
.btn-cal:hover { background: var(--lila); color: #fff; border-color: var(--lila); }

/* ── UBICACIONES ── */
.location-cards {
	display: grid; gap: 2rem;
	grid-template-columns: 1fr 1fr;
	margin-top: 3rem;
}
@media (max-width: 600px) { .location-cards { grid-template-columns: 1fr; } }

.loc-card {
	border: 1px solid var(--lila-pale);
	overflow: hidden;
	transition: box-shadow .3s;
}
.loc-card:hover { box-shadow: 0 8px 32px rgba(155,127,192,.18); }
.loc-card-img {
	height: 180px;
	background: linear-gradient(135deg, var(--lila-pale) 0%, #e8d8f8 100%);
	display: flex; align-items: center; justify-content: center;
	font-size: 4rem;
}
.loc-body { padding: 1.5rem; }
.loc-type {
	font-size: .75rem; letter-spacing: .35em;
	color: var(--gold); text-transform: uppercase;
	display: block; margin-bottom: .4rem;
}
.loc-name {
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.25rem; color: var(--dark); margin-bottom: .3rem;
}
.loc-time { font-size: .7rem; color: var(--soft); font-weight: 300; letter-spacing: .1em; margin-bottom: .5rem; }
.loc-addr { font-size: .7rem; color: var(--soft); line-height: 1.6; margin-bottom: 1rem; }
.btn-gps {
	display: inline-block;
	font-size: .6rem; letter-spacing: .2em;
	color: var(--lila); text-decoration: none;
	text-transform: uppercase; border: 1px solid var(--lila);
	padding: .5rem 1rem;
	transition: background .2s, color .2s;
}
.btn-gps:hover { background: var(--lila); color: var(--white); }

/* ── DRESS CODE ── */
#dress {
	text-align: center; 
	background: url('img/fondos/marmol_blanco.webp') center/cover no-repeat;
	max-width: 100%;

}
.dress-code-img {
	width: 260px; aspect-ratio: 2 / 3;
	margin: 2rem auto 1rem;
}
.dress-code-img img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	filter: drop-shadow(0 12px 24px rgba(26,18,32,.18));
}
.dress-ornament {
	display: flex; align-items: center; justify-content: center;
	gap: .7rem;
	max-width: 200px; margin: 0 auto 1.5rem;
}
.dress-ornament-line {
	flex: 1; height: 1px;
	background: linear-gradient(to right, transparent, var(--lila-light), transparent);
}
.dress-heart { width: 14px; height: 14px; color: var(--lila); flex-shrink: 0; }
.dress-ornament-small { max-width: 140px; margin: 1.2rem auto 1.8rem; }

.dress-word-row {
	display: flex; align-items: center; justify-content: center;
	gap: .8rem;
}
.dress-leaf-icon { width: 20px; height: 20px; color: var(--lila-light); opacity: .8; }
.dress-word {
	display: block;
	font-size: .75rem; letter-spacing: .35em;
	color: var(--lila); text-transform: uppercase;
}

.dress-note-card {
	background: var(--lila-mist);
	border: 1px solid var(--gold);
	border-radius: 24px;
	padding: 1.8rem 2rem;
	max-width: 380px; margin: 0 auto;
}
.dress-note {
	font-size: .9rem; color: var(--soft); line-height: 1.8;
	margin: 0; font-weight: 300;
}

/* ══════════════════════════════
	GIFT CARDS — FLIP ANIMATION
══════════════════════════════ */
#gifts {
	background: linear-gradient(180deg, var(--lila-mist) 0%, var(--cream) 100%);
	max-width: 100%; padding: 5rem 1.5rem;
}
.gifts-inner { max-width: 780px; margin: 0 auto; text-align: center; }

.gift-opts {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem;
	margin-top: 2.5rem;
	perspective: 1000px;
}

/* The flip container */
.gift-card {
	width: 215px; height: 330px;
	position: relative;
	cursor: pointer;
}

.gift-inner {
	position: absolute; inset: 0;
	transform-style: preserve-3d;
	transition: transform .65s cubic-bezier(.4,0,.2,1);
	border-radius: 4px;
}
.gift-card:hover .gift-inner,
.gift-card.flipped .gift-inner {
	transform: rotateY(180deg);
}

.gift-face, .gift-back {
	position: absolute; inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: 4px;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: .6rem; padding: 1.4rem;
}

/* FRONT */
.gift-face {
	background: var(--white);
	border: 1px solid var(--lila-pale);
	box-shadow: 0 4px 24px rgba(155,127,192,.1);
}
.gift-face-icon { font-size: 3.2rem; display: block; }
.gift-face-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.35rem; color: var(--dark);
}
.gift-face-sub {
	font-size: .75rem; color: var(--soft); letter-spacing: .05em;
}
/* shimmer line at top */
.gift-face::before {
	content: '';
	position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, var(--lila), var(--gold), var(--lila));
	background-size: 200% 100%;
	animation: shimmer 2.5s linear infinite;
	border-radius: 4px 4px 0 0;
}
@keyframes shimmer { 0%{ background-position: 200% 0 } 100%{ background-position: -200% 0 } }

/* BACK */
.gift-back {
	background: linear-gradient(135deg, var(--lila-deep) 0%, var(--lila) 100%);
	border: 1px solid var(--lila);
	transform: rotateY(180deg);
	color: var(--white);
	gap: .6rem;
	padding: 1.4rem 1.2rem;
	box-shadow: 0 4px 24px rgba(107,79,154,.25);
}
.gift-back-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.35rem; font-weight: 400;
}
.gift-back-detail {
	font-size: .75rem; line-height: 1.5;
	color: rgba(255,255,255,.85); text-align: center;
}
.gift-back-icon { font-size: 2.2rem; }
.gift-back-link {
	display: inline-block; margin-top: .3rem;
	font-size: .68rem; letter-spacing: .1em;
	color: var(--white); text-decoration: none;
	border: 1px solid rgba(255,255,255,.6);
	border-radius: 20px;
	padding: .4rem 1rem;
	transition: background .2s, color .2s;
}
.gift-back-link:hover { background: var(--white); color: var(--lila-deep); }

/* pulse ring on hover */
.gift-card::after {
	content: '';
	position: absolute; inset: -4px;
	border: 1px solid var(--lila-light);
	border-radius: 6px;
	opacity: 0;
	transform: scale(.96);
	transition: opacity .3s, transform .3s;
	pointer-events: none;
}
.gift-card:hover::after {
	opacity: 1; transform: scale(1);
}

/* ── RSVP ── */
#rsvp { text-align: center; }
.rsvp-heart { margin: .8rem auto 0; display: block; }
.rsvp-leaf-divider {
	display: flex; align-items: center; justify-content: center;
	gap: .3rem; margin: .5rem auto 1.5rem;
}
.rsvp-form { max-width: 440px; margin: 2.5rem auto 0; }
.rsvp-form input, .rsvp-form select {
	width: 100%;
	border: none; border-bottom: 1px solid var(--lila-pale);
	background: transparent;
	padding: .8rem 0;
	font-family: 'Montserrat', sans-serif;
	font-size: .8rem; color: var(--dark);
	outline: none; margin-bottom: 1.2rem;
	font-weight: 300; letter-spacing: .05em;
	transition: border-color .2s;
}
.rsvp-form input:focus,
.rsvp-form select:focus { border-color: var(--lila); }
.rsvp-form input::placeholder { color: var(--soft); }
.rsvp-form select {
	color: var(--soft); cursor: pointer;
	border: 1px solid var(--lila-pale); border-radius: 12px;
	padding: .9rem 1rem; background: var(--white);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a6a8a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 1rem center; background-size: 14px;
}
.rsvp-form select option { color: var(--dark); }

.field label[for="rsvp-pax"] {
	display: block; text-align: center;
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.2rem; color: var(--dark);
	margin-bottom: .8rem; font-weight: 400;
}

.radio-group { display: flex; gap: 1rem; margin-bottom: 1.8rem; justify-content: center; }
.rsvp-option {
	position: relative;
	flex: 1;
	display: flex; flex-direction: column; align-items: center; gap: .3rem;
	border: 1px solid var(--lila-pale); border-radius: 14px;
	padding: 1.3rem 1rem;
	cursor: pointer;
	background: var(--white);
	transition: border-color .2s, background .2s;
}
.rsvp-option:has(input:checked) {
	border-color: var(--lila);
	background: var(--lila-mist);
}
.rsvp-option input[type=radio] {
	position: absolute; opacity: 0; width: 0; height: 0;
}
.rsvp-option-icon {
	width: 34px; height: 34px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--lila-pale); color: var(--lila);
	font-size: .95rem;
}
.rsvp-option:has(input:checked) .rsvp-option-icon {
	background: var(--lila); color: var(--white);
}
.rsvp-option-word {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 1.4rem; color: var(--dark);
}
.rsvp-option-sub {
	font-size: .65rem; color: var(--soft); font-weight: 300;
}

.btn-primary {
	display: block; width: 100%;
	background: linear-gradient(135deg, var(--lila-deep), var(--lila));
	color: var(--white);
	font-size: .65rem; letter-spacing: .3em;
	text-transform: uppercase; border: none; cursor: pointer;
	padding: 1.1rem 2.5rem; font-family: 'Montserrat', sans-serif;
	font-weight: 400; transition: opacity .2s, transform .2s;
	box-shadow: 0 4px 18px rgba(155,127,192,.35);
	border-radius: 30px;
}
.btn-primary:hover { opacity: .88; transform: translateY(-1px); }

#rsvp-success, #rsvp-error, #rsvp-sad {
	display: none; margin-top: 1.5rem;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic; font-size: 1.2rem; color: var(--lila);
}

/* ── FOOTER ── */
footer {
	background: var(--white);
	text-align: center; padding: 4rem 1.5rem;
	color: var(--gold);
}
footer .footer-names {
	font-family: 'Marck Script', cursive;
	font-size: clamp(2.2rem, 7vw, 3.2rem);
	color: var(--gold);
	font-weight: 400; margin-bottom: 1.2rem;
}
footer .footer-note {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: .95rem; letter-spacing: .15em;
	color: var(--gold);
}

/* ── SCROLL FADE ── */
.fade-in {
	opacity: 0; transform: translateY(24px);
	transition: opacity .7s ease, transform .7s ease;
}
.fade-in.visible { opacity: 1; transform: none; }

/* staggered children */
.fade-in .gift-card:nth-child(1) { transition-delay: .0s; }
.fade-in .gift-card:nth-child(2) { transition-delay: .12s; }
.fade-in .gift-card:nth-child(3) { transition-delay: .24s; }

/*==========================
	CARRUSEL
==========================*/

#carrousel{

    width:100%;
    max-width:none;
	background: url('img/fondos/marmol_blanco.webp') center/cover no-repeat;

}

#carrousel .swiper{

	width:100%;
	overflow:hidden;
}
.mySwiper{

	width:100%;
	padding-top:50px;
	padding-bottom:40px;
	touch-action: pan-x;

}
.swiper-slide{

	width:380px !important;
	max-width:380px;
	height:620px;

	border-radius:20px;
	overflow:hidden;
}

.swiper-slide img{

	width:100%;
	height:100%;

	object-fit: cover;

}
.swiper-wrapper{
    overflow:visible;
}

.swiper-pagination-bullet{

	width:12px;
	height:12px;
	background:var(--lila-light);
	opacity:.5;

}

.swiper-pagination-bullet-active{

	background:var(--lila);
	opacity:1;

}
.swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next){
    opacity:0;
}