/* =======================================================
 *  Wedding Invitation - Custom Styles
 *  Paleta: Verde oliva #c4d2b1 / Dorado #c9a84c
 *  Fuentes: Sacramento (titulos), Work Sans (body)
 * ======================================================= */

/* ---- MUSIC BUTTON ---- */
.music-btn {
	position: fixed;
	bottom: 25px;
	right: 25px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: linear-gradient(135deg, #7a9b6a, #5e7a52);
	color: #fff;
	border: none;
	font-size: 18px;
	cursor: pointer;
	z-index: 9999;
	box-shadow: 0 4px 15px rgba(94, 122, 82, 0.4);
	transition: 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
}
.music-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 20px rgba(94, 122, 82, 0.5);
}
.music-btn.playing {
	animation: music-pulse 1.5s ease infinite;
}
@keyframes music-pulse {
	0% { box-shadow: 0 4px 15px rgba(94, 122, 82, 0.4); }
	50% { box-shadow: 0 4px 25px rgba(94, 122, 82, 0.7); }
	100% { box-shadow: 0 4px 15px rgba(94, 122, 82, 0.4); }
}

/* ---- VARIABLES ---- */
:root {
	--color-primary: #c4d2b1;
	--color-gold: #c9a84c;
	--color-text: #555555;
	--color-dark: #212529;
	--color-white: #fff;
	--font-script: "Sacramento", Arial, serif;
	--font-body: "Work Sans", Arial, sans-serif;
	--font-quote: "Cormorant Garamond", Georgia, serif;
}

/* ---- RESET & BASE ---- */
* { box-sizing: border-box; }

body {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.8;
	color: var(--color-text);
	background: var(--color-white);
	overflow-x: hidden;
}

#page {
	position: relative;
	overflow-x: hidden;
	width: 100%;
}

a {
	color: #6b8a5e;
	transition: 0.3s;
}
a:hover, a:active, a:focus {
	color: #5a7550;
	outline: none;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	color: #000;
	font-family: var(--font-body);
	font-weight: 400;
	margin: 0 0 20px 0;
}

::selection {
	color: var(--color-white);
	background: var(--color-primary);
}

/* ---- LOADER ---- */
.wedding-loader {
	position: fixed;
	left: 0; top: 0;
	width: 100%; height: 100%;
	z-index: 9999;
	background: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.5s;
}
.wedding-loader.hidden {
	opacity: 0;
	pointer-events: none;
}
.loader-heart {
	font-size: 40px;
	color: var(--color-primary);
	animation: pulse 1s ease infinite;
}

/* ---- HERO / HEADER ---- */
.hero-cover {
	height: 900px;
	position: relative;
	width: 100%;
	background: linear-gradient(180deg, #f5f1eb 0%, #e8e4db 30%, #dde5d6 100%);
	overflow: hidden;
}

.hero-cover .container {
	position: relative;
	z-index: 1;
}

.hero-table {
	display: table;
	width: 100%;
	height: 900px;
}

.hero-cell {
	display: table-cell;
	vertical-align: middle;
}

.hero-top-label {
	text-transform: uppercase;
	font-size: 17px;
	letter-spacing: 4px;
	color: #5e7a52;
	margin-bottom: 0;
	font-weight: 600;
}

.couple-names {
	font-family: var(--font-script);
	font-size: 100px;
	color: #5e7a52;
	margin-bottom: 0;
	line-height: 1.3;
}

.hero-divider {
	width: 160px;
	height: 1px;
	background: linear-gradient(90deg, transparent, #8aa67a, transparent);
	margin: 10px auto 15px;
	position: relative;
}
.hero-divider::before {
	content: '♥';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 12px;
	color: #8aa67a;
	background: linear-gradient(180deg, #ece8e0, #dde5d6);
	padding: 0 12px;
}

.wedding-announce {
	font-size: 18px;
	color: #4a6940;
	margin-bottom: 30px;
	letter-spacing: 3px;
	font-weight: 400;
}

/* ---- ESQUINAS BOTANICAS ---- */
.hero-corner {
	position: absolute;
	width: 120px;
	height: 120px;
	z-index: 0;
	pointer-events: none;
	opacity: 0.4;
}
.hero-corner::before,
.hero-corner::after {
	content: '';
	position: absolute;
	background: #8aa67a;
	border-radius: 50% 0;
}
.hero-corner::before {
	width: 60px;
	height: 20px;
}
.hero-corner::after {
	width: 20px;
	height: 60px;
}
.corner-tl {
	top: 20px;
	left: 20px;
}
.corner-tl::before {
	top: 0;
	left: 0;
	transform: rotate(-30deg);
}
.corner-tl::after {
	top: 15px;
	left: 5px;
	transform: rotate(-15deg);
}
.corner-tr {
	top: 20px;
	right: 20px;
}
.corner-tr::before {
	top: 0;
	right: 0;
	transform: rotate(30deg);
}
.corner-tr::after {
	top: 15px;
	right: 5px;
	transform: rotate(15deg);
}
.corner-bl {
	bottom: 20px;
	left: 20px;
}
.corner-bl::before {
	bottom: 0;
	left: 0;
	transform: rotate(30deg);
}
.corner-bl::after {
	bottom: 15px;
	left: 5px;
	transform: rotate(15deg);
}
.corner-br {
	bottom: 20px;
	right: 20px;
}
.corner-br::before {
	bottom: 0;
	right: 0;
	transform: rotate(-30deg);
}
.corner-br::after {
	bottom: 15px;
	right: 5px;
	transform: rotate(-15deg);
}

/* ---- HOJAS DECORATIVAS ---- */
.hero-leaf {
	position: absolute;
	font-size: 48px;
	opacity: 0.6;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}
.leaf-1 {
	top: 3%;
	left: 3%;
	font-size: 55px;
	transform: rotate(-25deg);
	animation: sway1 5s ease-in-out infinite;
}
.leaf-2 {
	top: 5%;
	right: 5%;
	font-size: 58px;
	transform: rotate(30deg);
	animation: sway2 6s ease-in-out infinite;
}
.leaf-3 {
	top: 32%;
	left: 1%;
	font-size: 46px;
	transform: rotate(-55deg);
	animation: sway3 7s ease-in-out infinite;
}
.leaf-4 {
	top: 28%;
	right: 2%;
	font-size: 52px;
	transform: rotate(40deg);
	animation: sway4 5.5s ease-in-out infinite;
}
.leaf-5 {
	bottom: 28%;
	left: 4%;
	font-size: 48px;
	transform: rotate(20deg);
	animation: sway1 6.5s ease-in-out infinite;
}
.leaf-6 {
	bottom: 22%;
	right: 3%;
	font-size: 54px;
	transform: rotate(-35deg);
	animation: sway2 5s ease-in-out infinite;
}
.leaf-7 {
	bottom: 4%;
	left: 6%;
	font-size: 44px;
	transform: rotate(55deg);
	animation: sway3 6s ease-in-out infinite;
}
.leaf-8 {
	bottom: 6%;
	right: 5%;
	font-size: 50px;
	transform: rotate(-15deg);
	animation: sway4 7s ease-in-out infinite;
}
.leaf-9 {
	top: 15%;
	left: 8%;
	font-size: 36px;
	transform: rotate(35deg);
	opacity: 0.45;
	animation: sway2 8s ease-in-out infinite;
}
.leaf-10 {
	top: 50%;
	right: 6%;
	font-size: 34px;
	transform: rotate(-25deg);
	opacity: 0.48;
	animation: sway1 7s ease-in-out infinite;
}
.leaf-11 {
	bottom: 40%;
	left: 3%;
	font-size: 32px;
	transform: rotate(65deg);
	opacity: 0.45;
	animation: sway3 6.5s ease-in-out infinite;
}
.leaf-12 {
	top: 18%;
	right: 10%;
	font-size: 38px;
	transform: rotate(-50deg);
	opacity: 0.42;
	animation: sway4 8s ease-in-out infinite;
}
.leaf-13 {
	bottom: 15%;
	left: 10%;
	font-size: 36px;
	transform: rotate(10deg);
	opacity: 0.48;
	animation: sway1 7.5s ease-in-out infinite;
}
.leaf-14 {
	bottom: 35%;
	right: 8%;
	font-size: 34px;
	transform: rotate(-60deg);
	opacity: 0.42;
	animation: sway2 6s ease-in-out infinite;
}

/* Sway animations - cada una con movimiento distinto */
@keyframes sway1 {
	0%, 100% { transform: rotate(-25deg) translateY(0); }
	50%      { transform: rotate(-20deg) translateY(-8px); }
}
@keyframes sway2 {
	0%, 100% { transform: rotate(30deg) translateX(0); }
	50%      { transform: rotate(35deg) translateX(6px); }
}
@keyframes sway3 {
	0%, 100% { transform: rotate(-55deg) translateY(0) translateX(0); }
	50%      { transform: rotate(-50deg) translateY(-5px) translateX(4px); }
}
@keyframes sway4 {
	0%, 100% { transform: rotate(40deg) translateY(0); }
	50%      { transform: rotate(45deg) translateY(6px); }
}

/* ---- COUNTDOWN ---- */
.countdown {
	margin-bottom: 2em;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.countdown-item {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 85px;
	height: 85px;
	background: linear-gradient(135deg, #7a9b6a, #5e7a52);
	border-radius: 50%;
	animation: pulse 2s ease infinite;
	box-shadow: 0 4px 15px rgba(94, 122, 82, 0.25);
}

.countdown-number {
	font-size: 28px;
	color: var(--color-white);
	font-weight: 600;
	line-height: 1;
}

.countdown-label {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.95);
	text-transform: uppercase;
	margin-top: 2px;
}

@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

/* Hero CTA */
.hero-cta {
	margin-top: 2em;
}

.btn-save-date {
	padding: 16px 36px;
	background: linear-gradient(135deg, #7a9b6a, #5e7a52) !important;
	color: var(--color-white) !important;
	border: none !important;
	font-size: 17px;
	text-transform: uppercase;
	border-radius: 30px;
	letter-spacing: 1.5px;
	transition: 0.3s;
	box-shadow: 0 4px 15px rgba(94, 122, 82, 0.3);
	min-height: 54px;
}
.btn-save-date:hover {
	box-shadow: 0 8px 25px rgba(94, 122, 82, 0.45) !important;
	transform: translateY(-1px);
}

/* ---- SECTIONS COMMON ---- */
section {
	padding: 7em 0;
	clear: both;
}

.section-heading {
	margin-bottom: 5em;
}
.section-heading-sm {
	margin-bottom: 2em;
}

.script-title {
	font-family: var(--font-script);
	font-size: 60px;
	color: var(--color-primary);
	margin-bottom: 10px;
	line-height: 1.5;
	font-weight: bold;
}

.script-title-white {
	color: var(--color-white);
}

.section-subtitle {
	text-transform: uppercase;
	font-size: 16px;
	letter-spacing: 2.5px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.6);
}

.section-gray {
	background: rgba(0, 0, 0, 0.04);
}

/* ---- BACKGROUND FLORAL ---- */
.bg-floral {
	background-image: url('../images/fondo_flores_verdes.jpeg');
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	position: relative;
	color: var(--color-dark);
	/* Fallback si no hay imagen */
	background-color: #f0f2ed;
}

/* ---- VENUE NAME ---- */
.venue-name {
	font-family: var(--font-script);
	font-size: 48px;
	font-weight: bold;
	color: var(--color-gold);
	letter-spacing: 0.5px;
	margin-top: 5px;
	margin-bottom: 15px;
	line-height: 1.4;
}

/* ---- INVITACION ---- */
.invite-ornament {
	width: 210px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
	margin: 0 auto 38px;
	position: relative;
	opacity: 0.75;
}
.invite-ornament i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 13px;
	color: var(--color-gold);
	background: var(--color-white);
	padding: 0 14px;
}

.invite-ornament-bottom {
	margin: 38px auto 0;
}

.invite-quote {
	font-family: var(--font-quote);
	font-size: 33px;
	font-style: italic;
	font-weight: 600;
	line-height: 1.5;
	color: #3d5a34;
	max-width: 16em;
	margin: 0 auto 30px;
	text-wrap: balance;
}

.invite-cta {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.45);
	margin-bottom: 0;
	text-wrap: balance;
}

/* ---- COUPLE SECTION ---- */
#couple {
	padding: 7em 0;
}

.couple-together {
	width: 100%;
	margin: 0 auto;
}

.couple-label {
	text-transform: uppercase;
	font-size: 16px;
	letter-spacing: 3px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.6);
	margin-bottom: 5px;
}

.couple-photos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin-top: 30px;
}

.couple-circle-single {
	width: 220px;
	height: 220px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto;
	box-shadow: 0 4px 20px rgba(0,0,0,0.12);
	border: 4px solid var(--color-white);
}
.couple-circle-single img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Legacy classes kept for compatibility */
.couple-photo-right {
	float: left;
	margin-left: 5px;
}

.photo-placeholder {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 50px;
	color: #999;
}

.couple-desc-left {
	padding-right: 180px;
	text-align: right;
	margin-top: 2.5em;
}
.couple-desc-right {
	margin-top: 2.5em;
	padding-left: 180px;
	text-align: left;
}

/* ---- EVENT / PROGRAMACION ---- */
#event {
	padding: 7em 0;
	float: left;
	width: 100%;
}

.event-card {
	border: 2px solid var(--color-dark);
	background: rgba(255, 255, 255, 0.1);
	padding: 30px;
	width: 100%;
	float: left;
	border-radius: 4px;
	margin-bottom: 20px;
}

.event-icon-wrap {
	text-align: center;
}
.event-icon-svg {
	width: 80px;
	height: 70px;
	margin-bottom: 10px;
}

.event-card h3 {
	font-size: 22px;
	color: var(--color-dark);
	border-bottom: 1px solid var(--color-dark);
	display: block;
	padding-bottom: 20px;
	text-transform: uppercase;
	letter-spacing: 3px;
}

.event-time {
	margin: 15px 0;
	color: var(--color-dark);
}
.event-time i {
	color: var(--color-dark);
	font-size: 18px;
	margin-right: 5px;
}
.event-time span {
	color: var(--color-dark);
	font-size: 18px;
}

.event-card p {
	color: var(--color-dark);
}

.btn-location {
	background: var(--color-primary) !important;
	color: var(--color-dark) !important;
	border: none !important;
	margin-top: 20px;
	padding: 16px 28px;
	border-radius: 30px;
	text-transform: uppercase;
	font-size: 17px;
	letter-spacing: 1.5px;
	transition: 0.3s;
	min-height: 54px;
}
.btn-location:hover {
	box-shadow: 0px 10px 25px -10px rgba(0, 0, 0, 0.5);
}

/* ---- DRESS CODE ---- */
#dresscode {
	padding: 5em 0;
}

.dresscode-icon {
	margin-bottom: 1em;
}
.dresscode-svg {
	width: 80px;
	height: 100px;
}
.dresscode-title {
	font-size: 25px !important;
	color: #000 !important;
	font-weight: 600;
	letter-spacing: 3px;
}
.dresscode-desc {
	font-size: 20px !important;
	color: #000 !important;
	margin-bottom: 15px;
}
.dresscode-detail {
	font-size: 18px !important;
	color: #444 !important;
	margin-bottom: 8px;
	line-height: 1.6;
}
.dresscode-detail i {
	margin-right: 6px;
	color: #6b8a5e;
	font-size: 18px;
}
.dresscode-exclude {
	color: #8b4a4a !important;
	font-style: italic;
}
.dresscode-exclude i {
	color: #8b4a4a;
}

/* ---- GIFT / REGALO ---- */
#gift {
	padding: 6em 0;
	color: var(--color-dark);
}
#gift p {
	color: var(--color-dark);
}
.gift-icon {
	margin-bottom: 1em;
}
.gift-svg {
	width: 80px;
	height: 80px;
}

.bank-modal-content {
	margin-top: 8em;
}
@media screen and (max-width: 480px) {
	.bank-modal-content {
		margin-top: 3em;
	}
}
.bank-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
	gap: 10px;
}
.bank-row span {
	font-size: 15px;
	word-break: break-all;
}
.btn-copy {
	background: none;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 4px 8px;
	cursor: pointer;
	color: #888;
	font-size: 14px;
	flex-shrink: 0;
	transition: 0.2s;
}
.btn-copy:hover {
	color: #5e7a52;
	border-color: #5e7a52;
}
.btn-copy.copied {
	color: #5e7a52;
	border-color: #5e7a52;
}

/* ---- GALLERY ---- */
#gallery {
	padding: 7em 0;
}

/* 4 fotos verticales en una fila */
.gallery-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 430px;
	gap: 10px;
	padding: 0;
	margin: 0;
	width: 100%;
	list-style: none;
}

.gallery-item {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 7px;
	position: relative;
	overflow: hidden;
	min-height: 0;
}

.gallery-item a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}

.gallery-overlay {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 7px;
	transition: 0.3s;
}
.gallery-item:hover .gallery-overlay {
	background: rgba(0, 0, 0, 0.25);
}

/* ---- WISHES / TESTIMONIALS ---- */
#wishes {
	padding: 7em 0;
}

.wishes-carousel-wrap {
	position: relative;
}

.wish-slide {
	text-align: center;
	padding: 20px;
}
.wish-author {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-weight: 700;
	display: block;
	margin-bottom: 10px;
}
.wish-slide blockquote {
	border: none;
	margin: 20px auto;
	width: 70%;
	border-radius: 4px;
}
.wish-slide blockquote p {
	font-style: italic;
	color: #555555;
	font-size: 20px;
	line-height: 1.7em;
}

/* Owl Carousel custom dots */
.owl-carousel .owl-controls .owl-dot span,
.owl-theme .owl-dots .owl-dot span {
	background: #e6e6e6;
}
.owl-theme .owl-dots .owl-dot.active span {
	background: transparent;
	border: 2px solid var(--color-primary);
}

/* ---- RSVP ---- */
#rsvp {
	position: relative;
	padding: 7em 0;
	background-image: url('../images/img_bg_4.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	/* Fallback */
	background-color: #6b7a5d;
}

#rsvp .overlay {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0, 0, 0, 0.4);
}

#rsvp .container {
	position: relative;
	z-index: 1;
}

.rsvp-text {
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: 18px;
	line-height: 1.7;
}
.rsvp-deadline {
	color: #ffffff !important;
	font-weight: 600;
	letter-spacing: 1.5px;
	font-size: 18px;
}

#rsvp .form-control {
	background: rgba(255, 255, 255, 0.2);
	border: none !important;
	color: var(--color-white);
	font-size: 18px !important;
	width: 100%;
	transition: 0.3s;
	height: 56px;
}
#rsvp .form-control:focus {
	background: rgba(255, 255, 255, 0.3);
}
#rsvp .form-control::placeholder {
	color: rgba(255, 255, 255, 0.9);
	font-size: 18px;
}
#rsvp textarea.form-control {
	height: auto;
}

#rsvp .form-inline .form-group {
	width: 100% !important;
	margin-bottom: 10px;
}
#rsvp .form-inline .form-group .form-control {
	width: 100%;
}

.btn-submit {
	height: 56px;
	border: none !important;
	background: var(--color-primary) !important;
	color: var(--color-white) !important;
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 500;
	border-radius: 30px;
	padding-left: 50px;
	padding-right: 50px;
	transition: 0.3s;
	letter-spacing: 1.5px;
}
.btn-submit:hover {
	box-shadow: 0px 10px 25px -10px rgba(0, 0, 0, 0.5);
}

/* ---- ANIMATIONS ---- */
.animate-on-scroll {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.visible {
	opacity: 1;
	transform: translateY(0);
}

/* ======================================================
 *  RESPONSIVE - MOBILE FIRST
 * ====================================================== */

/* Mobile < 480px */
@media screen and (max-width: 480px) {
	.couple-names {
		font-size: 45px;
	}

	/* -- Hero sizing: use flexible height instead of fixed 900px -- */
	.hero-cover {
		height: auto;
		min-height: 100vh;
		min-height: 100dvh;
	}
	.hero-table {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: auto;
		min-height: 100vh;
		min-height: 100dvh;
		padding: 30px 0 40px;
	}
	.hero-cell {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		vertical-align: unset;
		padding-top: 0;
		width: 100%;
	}
	.hero-content {
		width: 100%;
	}

	/* -- CTA: remove the massive margin, use natural flow spacing -- */
	.hero-cta {
		margin-top: 2em;
	}

	/* -- Corner botanicals: scale down on mobile -- */
	.hero-corner {
		width: 55px;
		height: 55px;
		opacity: 0.4;
	}
	.hero-corner::before {
		width: 25px;
		height: 9px;
	}
	.hero-corner::after {
		width: 9px;
		height: 25px;
	}
	.corner-tl { top: 10px; left: 10px; }
	.corner-tr { top: 10px; right: 10px; }
	.corner-bl { bottom: 10px; left: 10px; }
	.corner-br { bottom: 10px; right: 10px; }

	/* -- Leaves: visible but not overlapping content -- */
	.hero-leaf {
		font-size: 28px;
		opacity: 0.5;
	}
	.leaf-1  { top: 2%;  left: 1%;  font-size: 32px; }
	.leaf-2  { top: 3%;  right: 1%; font-size: 34px; }
	.leaf-3  { top: 25%; left: -1%; font-size: 28px; }
	.leaf-4  { top: 22%; right: -1%; font-size: 30px; }
	.leaf-5  { bottom: 25%; left: 0%; font-size: 28px; }
	.leaf-6  { bottom: 18%; right: 0%; font-size: 30px; }
	.leaf-7  { bottom: 3%; left: 2%; font-size: 26px; }
	.leaf-8  { bottom: 4%; right: 2%; font-size: 28px; }
	.leaf-9  { top: 12%;  left: 0%;  font-size: 22px; opacity: 0.4; }
	.leaf-10 { top: 45%;  right: 0%; font-size: 22px; opacity: 0.4; }
	.leaf-11 { bottom: 38%; left: -1%; font-size: 20px; opacity: 0.38; }
	.leaf-12 { top: 14%;  right: 1%; font-size: 24px; opacity: 0.38; }
	.leaf-13 { bottom: 12%; left: 1%; font-size: 22px; opacity: 0.4; }
	.leaf-14 { bottom: 32%; right: 0%; font-size: 22px; opacity: 0.38; }

	.countdown-item {
		width: 72px;
		height: 72px;
	}
	.countdown-number {
		font-size: 24px;
	}

	section {
		padding: 3em 0;
	}

	.section-heading {
		margin-bottom: 2em;
	}

	.script-title {
		font-size: 40px;
	}

	.invite-ornament {
		width: 150px;
		margin-bottom: 26px;
	}
	.invite-ornament-bottom {
		margin: 26px auto 0;
	}
	.invite-quote {
		font-size: 25px;
		line-height: 1.55;
		max-width: none;
		margin-bottom: 24px;
	}
	.invite-cta {
		font-size: 13px;
		letter-spacing: 1.5px;
	}

	.couple-circle-single {
		width: 190px;
		height: 190px;
	}

	/* -- Hero: center all elements perfectly -- */
	.hero-content {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.hero-cta {
		text-align: center;
		width: 100%;
		padding: 0 30px;
	}
	.hero-cta a {
		display: block;
		max-width: 280px;
		margin: 0 auto;
	}
	.btn-save-date {
		width: 100% !important;
	}

	/* -- Countdown: ensure centered -- */
	.countdown {
		justify-content: center;
		width: 100%;
	}

	/* -- Couple section: center everything -- */
	.couple-together {
		text-align: center;
	}
	.couple-photos {
		justify-content: center;
	}

	/* -- Event cards: full width, centered content -- */
	.event-card {
		margin-bottom: 15px;
		text-align: center;
	}
	.event-icon-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.event-time {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
	}

	/* -- Buttons: center on mobile -- */
	.btn-location {
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-width: 250px;
	}

	/* -- Dress Code: center icon -- */
	.dresscode-icon {
		display: flex;
		justify-content: center;
	}

	/* -- Gift: center icon and content -- */
	.gift-icon {
		display: flex;
		justify-content: center;
	}
	#gift .text-center {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#gift .btn-location {
		width: 100%;
		max-width: 300px;
		font-size: 15px;
		padding: 14px 20px;
	}

	/* -- Gallery: single column stack on mobile -- */
	.gallery-list {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}
	.gallery-item {
		width: 100%;
		min-height: 500px;
	}
	.gallery-item a {
		min-height: 500px;
	}

	/* -- Wishes -- */
	.wish-slide blockquote {
		width: 100%;
	}
	.wish-slide blockquote p {
		font-size: 18px;
	}

	/* -- RSVP form: full width inputs -- */
	#rsvp .form-control {
		width: 100% !important;
	}
	.btn-submit {
		display: block;
		margin: 0 auto;
		max-width: 250px;
		width: 100%;
	}
}

/* Tablet 481 - 768px */
@media screen and (min-width: 481px) and (max-width: 768px) {
	.couple-names {
		font-size: 55px;
	}

	.hero-cover {
		height: auto;
		min-height: 100vh;
	}
	.hero-table {
		height: auto;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 60px 0 40px;
	}
	.hero-cell {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	.hero-content {
		width: 100%;
	}

	/* Corners: smaller on tablet */
	.hero-corner {
		width: 80px;
		height: 80px;
		opacity: 0.20;
	}
	.hero-corner::before {
		width: 40px;
		height: 14px;
	}
	.hero-corner::after {
		width: 14px;
		height: 40px;
	}

	/* Leaves: moderate size on tablet */
	.hero-leaf {
		font-size: 30px;
		opacity: 0.22;
	}

	section {
		padding: 4em 0;
	}

	.section-heading {
		margin-bottom: 3em;
	}

	.script-title {
		font-size: 45px;
	}

	.invite-ornament {
		width: 180px;
	}
	.invite-ornament-bottom {
		margin: 34px auto 0;
	}
	.invite-quote {
		font-size: 29px;
		max-width: 15em;
	}

	/* Tablet: 2x2 */
	.gallery-list {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 400px 400px;
	}
}

/* Small mobile (< 380px) */
@media screen and (max-width: 380px) {
	.couple-names {
		font-size: 38px;
	}
	.invite-quote {
		font-size: 23px;
	}
	.invite-cta {
		font-size: 12px;
		letter-spacing: 1.5px;
	}
	/* El texto no entra en la pildora a este ancho */
	#gift .btn-location {
		font-size: 13px;
		letter-spacing: 0.5px;
		padding-left: 12px;
		padding-right: 12px;
	}
	.countdown {
		flex-wrap: wrap;
		gap: 8px;
	}
	.countdown-item {
		width: 66px;
		height: 66px;
	}
	.countdown-number {
		font-size: 22px;
	}
	.hero-cta {
		margin-top: 1.5em;
	}
	/* Even smaller corners on tiny screens */
	.hero-corner {
		width: 40px;
		height: 40px;
	}
	.hero-corner::before {
		width: 20px;
		height: 7px;
	}
	.hero-corner::after {
		width: 7px;
		height: 20px;
	}
}

/* Medium screens */
@media screen and (min-width: 600px) and (max-width: 999px) {
	.hero-cta {
		margin-top: 2em;
	}
}

/* Desktop 1000px+ */
@media screen and (min-width: 1000px) {
	.hero-cta {
		margin-top: 0;
	}
	.countdown-number {
		font-size: 30px;
	}
	.countdown-label {
		font-size: 14px;
	}
}

/* Modal responsive */
@media screen and (min-width: 768px) {
	.modal-sm {
		width: 500px;
	}
}

/* Event section responsive */
@media screen and (max-width: 768px) {
	#event {
		height: auto;
		padding: 4em 0;
	}
}

/* ---- FLORAL BACKGROUND FALLBACK ---- */
/* Si no hay imagen de flores, usa un patron sutil */
.bg-floral {
	background-color: #f5f7f2;
}