:root {
	/* Paleta floral de referencia: naranja, coral, vino, ciruela y lima. */
	--principal:      #961B2F;
	--secundario:     #F99D20;
	--tercero:        #FFF8F1;
	--cuatro:         #693C53;
	--cinco:          #F5A09B;
	--seis:           #F99D20;
	--siete:          #718611;
	--lima:           #B3C938;
}
@font-face {
	font-family: Cormorant;
	src: url("/assets/fonts/Cormorant/Cormorant-VariableFont_wght.ttf");
}
@font-face {
	font-family: Nova;
	src: url("/assets/fonts/NovaQuinta.otf") format("opentype");
}
@font-face{
	font-family: GreatVibes;
	src: url("/assets/fonts/GreatVibes-Regular.ttf");
}
body{
	background-image: url('/invitaciones/54/Fondo.jpg');
	color: var(--cuatro);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
body, html {
	overflow-x: hidden;
}
.jumbotron, .sticky-top, .borde{
	max-width: 800px;
	margin: 0 auto;
	margin-top: 0px;
}
.jumbotron .container{
	max-height: 75vh !important;
}
.nav-link, .navbar-brand{
	font-family: Cormorant;
	color: var(--tercero);
}

/* La portada queda limpia, sin la barra de navegación superior. */
.navbar {
	display: none !important;
}
.card-title{
	font-weight: 400 !important;
}
.display-5{
	font-weight: 400 !important;
}
.display-6{
	font-weight: 400 !important;
}
.barra{
	font-family: Cormorant;
	background-color: var(--principal);
	color: var(--tercero);
}
.and{
	font-family: Nova;
	opacity: 0.6;
	color: var(--seis) !important;
}
.grande {
	top: 7px;
	position: relative;
	font-size: 1em;
}
.moverIzq{
	margin-left: 10px;
}
.titulo1{
	font-family: Cormorant;
	color: var(--cuatro);
}
.titulo2{
	font-family: GreatVibes;
	color: var(--principal);
	font-weight: 100 !important;
}
.tituloSugerencias{
	font-family: GreatVibes;
	color: var(--cuatro) !important;
	font-weight: 100 !important;
	font-size: 2.4em;
}
.nombres{
	font-family: GreatVibes;
	font-size: 3.5rem;
	line-height: 1;
	color: var(--principal);
	text-shadow:
	1px 0 var(--tercero), -1px 0 var(--tercero),
	0 1px var(--tercero), 0 -1px var(--tercero),
	1px 1px var(--tercero), -1px -1px var(--tercero),
	1px -1px var(--tercero), -1px 1px var(--tercero);
	padding-top: 3vh !important;
}
.sticky-top{
	display: none;
	font-family: Cormorant;
}
.iniciales{
	color: var(--principal);
	font-family: GreatVibes;
	background-color: var(--secundario);
	padding-top: 15px;
	padding-bottom: 12px;
	letter-spacing: -10px;
}
.lineas{
	font-family: Cormorant;
	font-size: 1.5rem;
	color: var(--cuatro);
	margin-right: 20px !important;
	margin-left: 20px !important;
}
.textoFinal{
	font-size: 2rem;
	font-family: Cormorant;
}
#donde{
	margin-top: -10px !important;
}
#dresscode{
	margin-top: -40px !important;
}
.dondes{
	font-family: Cormorant;
	color: var(--tercero);
	background-color: var(--principal);
	margin: 10px !important;
}
.dondes .display-1{
	font-family: Cormorant;
}
.dondes a:link {
	color: var(--cinco);
}

.dondes a:visited {
	color: var(--cinco);
}

.dondes a:focus {
	border-bottom: 1px solid;
}
.gigante {
	font-size: 10vmin;
}
.flotante{
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 998;
}
.flotante .btn:hover{
	background-color: var(--tercero) !important;
	color: var(--cuatro) !important;
}
.tituloreloj{
	font-size: 6.5vmin;
	color: var(--cuatro);
}
.tiempo{
	font-size: 10vmin;
	color: var(--siete);
}
.tiempoTitulo{
	font-size: 6vmin;
	color: var(--cuatro);
}
.dresscode{
	font-family: Greatvibes;
	font-size: 12vmin;
}
.dresscode2{
	font-size: 5.5vmin
}
.reservado{
	font-size: 5.5vmin;
}
.mensajeConfirmacion, .hemos{
	color: var(--cuatro);
}
.uno{
	transform: rotate(5deg);
}
.dos{
	transform: rotate(-5deg);
	display: flex;
	justify-content: center;
	align-items: center;
}
.tres{
	transform: rotate(3deg);
	display: flex;
	justify-content: center;
	align-items: center;
}
button, .button,.col-12.col-md-5.rounded.rounded-4.dondes.p-3.animated-element.animate__animated.safeFadeInUp{
	background-color: var(--principal) !important;
	color: var(--tercero) !important;
}
.form-control{
	font-size: 3.5rem !important;
}
.google-maps iframe {
	width: 100% !important;
}
.modal-title {
	color: var(--principal);
}
.modal-body{
	color: var(--cuatro);
}
.modal-content{
	background-color: var(--tercero);
}
.btn-close{
	background-color: transparent !important;
}

.texto-mesa{
	color: var(--tercero);
}
.botonEntrar{
	font-family: Cormorant;
	font-size: 24px;
}
.casamos{
	display: none;
}
.regalo{
	margin-top: 0px !important;
	padding-top: 0px !important;
}
.carousel-control-next, .carousel-control-prev{
	background-color: transparent !important;
}
.barra.text-center.py-5{
	background-color: transparent !important;
}
#reloj{
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0 !important;
	padding: 0 !important;
	background-color: #f6eee7;
	background-image: url('/invitaciones/54/Fondo Reloj.jpg');
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	font-family: Cormorant, serif;
	overflow: hidden;
	isolation: isolate;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	color: var(--cuatro);
}

/* El favicon ocupa el espacio superior de la tarjeta. */
#reloj::before {
	content: "";
	position: absolute;
	top: 5%;
	left: 50%;
	z-index: 2;
	display: block;
	width: clamp(6.5rem, 32vw, 12rem);
	aspect-ratio: 1;
	transform: translateX(-50%);
	background: url('/invitaciones/54/favicon/favicon.png') center / contain no-repeat;
	pointer-events: none;
}

/* El contador muestra las cuatro unidades dentro del cuadro del reloj. */
#reloj .tituloreloj {
	display: none !important;
}

#reloj .tiempoTitulo {
	position: absolute;
	top: 37%;
	right: 0;
	left: 0;
	z-index: 3;
	display: flex !important;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: nowrap;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
	font-size: 0;
	line-height: 1;
	color: var(--cuatro);
}

#reloj .tiempoTitulo > div {
	display: flex !important;
	flex: 0 0 25% !important;
	width: 25% !important;
	max-width: 25% !important;
	min-width: 0;
	box-sizing: border-box;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 0 clamp(0.1rem, 0.7vw, 0.45rem);
	font-size: clamp(0.72rem, 2.6vw, 1.2rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cuatro);
}

#reloj .tiempoTitulo > div br {
	display: none;
}

#reloj .tiempo {
	display: block;
	width: 100%;
	margin: 0 0 clamp(0.25rem, 1vw, 0.55rem);
	font-size: clamp(2rem, 7.5vw, 4.75rem) !important;
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.03em;
	text-align: center;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--siete) !important;
}

/* Corazón con líneas laterales, como el diseño de referencia. */
#reloj .tiempoTitulo > div:first-child::after {
	display: none !important;
}

#reloj .tiempoTitulo::after {
	content: "♡";
	position: absolute;
	top: calc(100% + clamp(0.45rem, 1.5vw, 0.75rem));
	left: 50%;
	display: block;
	box-sizing: border-box;
	width: min(12rem, 62vw);
	padding: 0 1.1rem;
	font-family: Cormorant, serif;
	font-size: clamp(1.25rem, 5vw, 2rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	color: var(--cuatro);
	background:
		linear-gradient(var(--cuatro), var(--cuatro)) left center / 35% 1px no-repeat,
		linear-gradient(var(--cuatro), var(--cuatro)) right center / 35% 1px no-repeat;
	transform: translateX(-50%);
}

/* Fecha fija de la invitación, centrada sobre la rama del fondo. */
#reloj::after {
	content: "28 • 11 • 26";
	position: absolute;
	right: 0;
	top: 68%;
	bottom: auto;
	left: 0;
	z-index: 3;
	font-family: Cormorant, serif;
	font-size: clamp(1.2rem, 5.5vw, 2.6rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.16em;
	text-align: center;
	color: var(--cuatro);
	text-shadow: 0 1px 0 rgba(255, 248, 241, 0.6);
	pointer-events: none;
}
.tituloPadres{
	font-size: 12vmin !important;
	font-weight: 100 !important;
}
nombrePadres, .nombrePadres, .nombrePadres2, .nombrePadres3{
	font-size: 5vmin !important;
}
.tituloPadres, .nombrePadres, .nombrePadres2, .nombrePadres3{
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	margin-top: 20px !important;
	margin-bottom: 20px !important;
}
.barra.tenemos{
	background: var(--tercero);
}
.tenemos{
	display: none;
	color: var(--cuatro);
	font-family: Cormorant;
}
.tenemos1{
	font-size: 8vmin !important;
	padding-left: 4px !important;
	padding-right: 4px !important;
	font-weight: 900 !important;
}
.tenemos2{
	font-size: 8.5vmin !important;
	font-weight: 900 !important;
	color: var(--principal);
}
.sinembargo{
	color: var(--cuatro);
	font-family: Cormorant;
	margin-top: 0px !important;
	padding-top: 0px !important;
}
.navbar-brand{
	display: none;
}
.final{
	font-family: GreatVibes;
	font-size: 14vmin;
	color: var(--principal);
}
.dressTexto1{
	font-family: Cormorant;
	font-size: 6vmin;
	margin-bottom: 0px !important;
}
.dressTexto2{
	display: none;
}
.espacioArriba{
	display: none;
}
.espacioAbajo{
	display: none;
}
.swal2-popup {
	background-color: var(--tercero) !important;
	color: var(--cinco) !important;
}

/* Sobre de bienvenida que se abre antes de mostrar la invitación. */
.dialogoEntrar {
	/* Sobre.jpg mide 941 x 1672: mantenemos esa proporción para no deformarlo. */
	width: min(88vw, 51.7vh) !important;
	height: min(92vh, 156.4vw) !important;
	max-width: none !important;
	max-height: none !important;
	min-height: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background-image: url('/invitaciones/54/Sobre.jpg');
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent !important;
	overflow: hidden;
}

.dialogoEntrar .swal2-close,
.dialogoEntrar .swal2-html-container {
	display: none !important;
}

.dialogoEntrar .swal2-actions {
	position: absolute !important;
	top: 85.5%;
	left: 19%;
	display: block !important;
	width: 62%;
	height: 8.5%;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 2;
}

.dialogoEntrar .swal2-confirm {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background-image: none !important;
	background-color: transparent !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 1 !important;
}

.dialogoEntrar .botonEntrar {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 1 !important;
	text-shadow: none !important;
}

.dialogoEntrar .botonEntrar::after {
	content: 'ABRIR INVITACIÓN';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: Cormorant;
	font-size: clamp(0.78rem, 2.25vmin, 1.25rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #693B53 !important;
	line-height: 1;
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.28em;
}

@media (max-width: 576px) {
	.dialogoEntrar {
		width: min(88vw, 51.7vh) !important;
		height: min(92vh, 156.4vw) !important;
	}

	.dialogoEntrar .swal2-actions {
		top: 85.5%;
		left: 19%;
		width: 62%;
		height: 8.5%;
	}
}

.tenemos3{
	display: none !important;
}
.animated-element {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

	/* Fixes específicos para WebKit (Safari) */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	will-change: transform, opacity;

	/* Usar translate3d para forzar aceleración de hardware */
	-webkit-transform: translate3d(0, 30px, 0);
	transform: translate3d(0, 30px, 0);
}

.animated-element.animate__animated {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.imagenHombres{
	content: url('/invitaciones/54/Dresscode Hombres.jpg');
}

.imagenMujeres{
	content: url('/invitaciones/54/Dresscode Mujeres.jpg');
}

.link-mesa{
	text-decoration: none;
}

.no-phone-link {
    -webkit-text-size-adjust: none;
}

.no-phone-link a {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
}

.barra.tenemos{
	margin-top: 0px !important;
}
.hora{
	display: none;
}
#regalos{
	margin-top: 0px !important;
	padding-top: 0px !important;
}
#imagen2{
	margin-bottom: 0 !important;
}
.hr1{
	display: none;
}

/* Imagen 2: la fotografía se funde con el papel y la fecha queda en la zona beige. */
#imagen2 {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: auto;
	aspect-ratio: 941 / 2000;
	background-color: #f6eee7;
	background-image: url('/invitaciones/54/Fondo Puerta.jpg');
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100% auto;
	isolation: isolate;
}

#imagen2 img {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	object-fit: cover;
	object-position: center top;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
}

/* Transición suave de la fotografía al papel, sin oscurecer la imagen. */
#imagen2::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 38% 19% at 50% 82%, rgba(246, 238, 231, 0.94) 0%, rgba(246, 238, 231, 0.82) 55%, rgba(246, 238, 231, 0) 100%),
		linear-gradient(to bottom, rgba(246, 238, 231, 0) 58%, rgba(246, 238, 231, 0.06) 64%, rgba(246, 238, 231, 0.2) 68%, rgba(246, 238, 231, 0.52) 72%, rgba(246, 238, 231, 0.86) 76%, rgba(246, 238, 231, 0.25) 89%, rgba(246, 238, 231, 0) 98%);
}

/* Fecha sobre el papel: vino para el día y ciruela para el resto. */
#imagen2::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1080 2000'%3E%3Cstyle%3E.t%7Bfont-family:Cormorant,Georgia,serif;text-anchor:middle;%7D%3C/style%3E%3Ctext class='t' x='540' y='1570' font-size='72' letter-spacing='6' fill='%23693C53'%3ES%C3%81BADO%3C/text%3E%3Ctext class='t' x='540' y='1735' font-size='270' font-weight='500' fill='%23961B2F'%3E27%3C/text%3E%3Ctext class='t' x='540' y='1855' font-size='80' letter-spacing='8' fill='%23693C53'%3EFEBRERO%3C/text%3E%3Ctext class='t' x='540' y='1935' font-size='62' letter-spacing='7' fill='%23693C53'%3E2027%3C/text%3E%3Ctext class='t' x='540' y='2000' font-size='72' fill='%23693C53'%3E%E2%99%A1%3C/text%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}
.galeria, .datosInvitado, .tituloPaletaColores{
	color: var(--principal);
}

/* Sedes: tarjetas cuadradas con los fondos ilustrados de Misa y Recepción. */
#donde {
	position: relative;
	display: block;
	isolation: isolate;
	width: 100%;
	max-width: 800px;
	margin: 0 auto !important;
	padding: 0 !important;
	color: var(--cuatro);
	background: transparent;
}

#donde::before,
#donde::after {
	display: none;
}

#donde > .dondes {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-height: 0;
	aspect-ratio: 1 / 1;
	margin: 0 !important;
	padding: 6% clamp(1rem, 5vw, 3.5rem) 6% !important;
	color: var(--cuatro);
	background-color: #f6eee7 !important;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: hidden;
	isolation: isolate;
}

/* Fallback por orden y selector semántico para conservar compatibilidad. */
#donde > .dondes:first-child {
	background-image: url('/invitaciones/54/Fondo Misa.jpg') !important;
}

#donde > .dondes:nth-child(2) {
	background-image: url('/invitaciones/54/Fondo Recepcion.jpg') !important;
}

#donde > .dondes:has([data-bs-target="#modalCeremonia"]) {
	background-image: url('/invitaciones/54/Fondo Misa.jpg') !important;
}

#donde > .dondes:has([data-bs-target="#modalRecepcion"]) {
	background-image: url('/invitaciones/54/Fondo Recepcion.jpg') !important;
}

#donde > .dondes + .dondes {
	border-top: 0 !important;
}

/* El HTML conserva su orden; flex lo acomoda como la tarjeta de referencia. */
#donde > .dondes > .text-center.p-5 {
	display: flex !important;
	order: 1;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: none;
	min-height: 0;
	margin: 0 0 1% !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

#donde > .dondes > .text-center.p-5::before {
	display: none;
}

#donde > .dondes > .text-center.p-5 img {
	display: block;
	width: min(56%, 18rem);
	height: auto;
	max-width: 100%;
	max-height: none;
	margin: 0 auto;
	padding: 0 !important;
	object-fit: contain;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

#donde > .dondes > p.display-3 {
	order: 2;
	margin: 0 !important;
	padding: 0 !important;
	font-family: Cormorant;
	font-size: clamp(1.2rem, 4.5vw, 2.5rem) !important;
	font-weight: 600 !important;
	line-height: 1.05;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	color: var(--principal);
}

/* Corazón debajo de cada título sin tocar la estructura PHP. */
#donde > .dondes > p.display-3::after {
	content: "♡";
	display: block;
	margin: clamp(0.3rem, 1vw, 0.75rem) auto 0;
	font-family: Cormorant, serif;
	font-size: clamp(1.15rem, 4vw, 2.1rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	color: var(--cuatro);
}

/* La fecha se conserva en PHP, pero visualmente se muestra solo la hora. */
#donde > .dondes > p.mb-3 {
	order: 3;
	margin: clamp(0.65rem, 2.5vw, 1.5rem) 0 0 !important;
	font-family: Cormorant;
	font-size: 0 !important;
	font-weight: 500 !important;
	line-height: 1.15;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--cuatro);
}

#donde > .dondes > p.mb-3 .hora {
	display: inline !important;
	font-family: inherit;
	font-size: clamp(1.1rem, 4vw, 2.2rem) !important;
	font-weight: 500;
}

#donde > .dondes > h5 {
	order: 4;
	max-width: 80%;
	margin: clamp(0.4rem, 1.5vw, 1rem) auto 0 !important;
	font-family: Cormorant;
	font-size: clamp(1.05rem, 3.5vw, 2rem) !important;
	font-weight: 500 !important;
	line-height: 1.18;
	text-align: center;
	color: var(--cuatro);
}

#donde > .dondes > p.mb-1 {
	display: none !important;
}

#donde > .dondes > div.text-center:last-child {
	order: 5;
	margin-top: clamp(0.85rem, 3vw, 2rem);
}

#donde > .dondes .btn {
	min-width: clamp(9rem, 38vw, 13rem);
	padding: 0.65em 1.3em !important;
	font-family: Cormorant;
	font-size: clamp(0.8rem, 2.4vw, 1.25rem) !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--cuatro) !important;
	background: rgba(213, 182, 145, 0.62) !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
}

#donde > .dondes .btn::before {
	content: "\f3e8";
	margin-right: 0.35em;
	font-family: "bootstrap-icons";
	font-size: 1em;
}

#donde > .dondes .btn span {
	font-family: inherit;
	font-size: 0 !important;
	font-weight: inherit !important;
}

#donde > .dondes .btn span::after {
	content: "VER UBICACIÓN";
	font-size: clamp(0.8rem, 2.4vw, 1.25rem);
}

#donde > .dondes .btn:hover,
#donde > .dondes .btn:focus {
	color: var(--cuatro) !important;
	background: rgba(213, 182, 145, 0.82) !important;
}

/* El itinerario debe comenzar justo al terminar la tarjeta de Recepción. */
#donde + #imagenItinerario {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

#donde + #imagenItinerario img {
	display: block;
	margin-top: 0 !important;
}

/* Mesa de regalos: jerarquia editorial, marfil y acentos florales. */
#regalos {
	position: relative;
	z-index: 1;
	max-width: 800px;
	margin: 0 auto !important;
	padding: clamp(3rem, 7vw, 5.25rem) clamp(1rem, 4vw, 2.5rem) 4rem !important;
	color: var(--cuatro);
	background: rgba(255, 248, 241, 0.8);
	border-top: 1px solid rgba(105, 60, 83, 0.18);
	border-bottom: 1px solid rgba(105, 60, 83, 0.18);
}

#regalos::before {
	content: "";
	display: block;
	width: min(7rem, 32%);
	height: 2px;
	margin: 0 auto 1.75rem;
	background: linear-gradient(90deg, transparent, var(--cinco), transparent);
}

#regalos h2.regalo {
	max-width: 22ch;
	margin: 0 auto !important;
	padding: 0 !important;
	font-family: Cormorant;
	font-size: clamp(2.4rem, 5vw, 4.6rem) !important;
	font-weight: 700 !important;
	line-height: 1.04;
	letter-spacing: 0.015em;
	color: var(--cuatro) !important;
}

#regalos .sinembargo {
	max-width: 37rem;
	margin: 1.5rem auto 0 !important;
	padding: 0 !important;
	font-family: Cormorant;
	font-size: clamp(1.3rem, 2.2vw, 2rem) !important;
	font-weight: 500 !important;
	line-height: 1.28;
	letter-spacing: 0.01em;
	color: var(--cuatro) !important;
}

#regalos > h2.titulo2 {
	margin: clamp(2.5rem, 6vw, 4rem) auto 1.5rem !important;
	padding: 0 !important;
	font-family: GreatVibes;
	font-size: clamp(2.8rem, 6vw, 5rem) !important;
	font-weight: 400 !important;
	line-height: 1.05;
	color: var(--principal) !important;
	text-shadow: 0 1px 0 rgba(255, 248, 241, 0.9);
}

#regalos > .row {
	--bs-gutter-x: 1.25rem;
	--bs-gutter-y: 1.25rem;
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

#regalos > .row > .dondes {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 12rem;
	padding: 1.35rem !important;
	font-family: Cormorant;
	color: var(--tercero) !important;
	background: linear-gradient(135deg, var(--cuatro), var(--principal)) !important;
	border: 1px solid rgba(245, 160, 155, 0.58);
	border-radius: 0.75rem !important;
	box-shadow:
		inset 0 0 0 4px rgba(255, 248, 241, 0.12),
		0 8px 18px rgba(105, 60, 83, 0.24);
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

#regalos > .row > .dondes:hover {
	transform: translateY(-3px);
	border-color: var(--cinco);
	box-shadow:
		inset 0 0 0 4px rgba(255, 248, 241, 0.12),
		0 12px 24px rgba(105, 60, 83, 0.3);
}

#regalos .link-mesa {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	color: var(--tercero) !important;
	text-decoration: none;
}

#regalos > .row > .dondes > img,
#regalos .link-mesa img {
	display: block;
	width: auto !important;
	max-width: 100%;
	height: auto;
	max-height: 7rem;
	margin: 0 auto 0.55rem;
	object-fit: contain;
}

#regalos .texto-mesa {
	margin: 0 !important;
	padding: 0 !important;
	font-family: Cormorant;
	font-size: clamp(1.1rem, 2vw, 1.45rem) !important;
	font-weight: 700 !important;
	line-height: 1.15;
	text-align: center;
	color: var(--tercero) !important;
}

@media (max-width: 576px) {
	#regalos {
		padding: 2.75rem 1rem 3rem !important;
	}

	#regalos::before {
		margin-bottom: 1.25rem;
	}

	#regalos h2.regalo {
		max-width: 17ch;
		font-size: clamp(2.1rem, 10vw, 3.2rem) !important;
		line-height: 1.08;
	}

	#regalos .sinembargo {
		max-width: 23rem;
		margin-top: 1.1rem !important;
		font-size: clamp(1.25rem, 5.3vw, 1.65rem) !important;
		line-height: 1.24;
	}

	#regalos > h2.titulo2 {
		margin-top: 2.25rem !important;
		margin-bottom: 1.25rem !important;
		font-size: clamp(2.8rem, 12vw, 4rem) !important;
	}

	#regalos > .row > .dondes {
		width: 100%;
		max-width: 21rem;
		min-height: 10.5rem;
		margin-right: auto;
		margin-left: auto;
	}
}

/* Líneas 1 y 2: tarjeta floral tipo salmo, sin cambiar el contenido PHP. */
.borde:has(> .orden-linea1) {
	--salmos-card-width: min(100vw, 50rem);
}

.borde > .orden-linea1,
.borde > .orden-linea2 {
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
	margin-right: auto !important;
	margin-left: auto !important;
	padding: 0 !important;
	text-align: center;
}

.borde > .orden-linea1 {
	position: relative;
	display: block !important;
	height: auto;
	aspect-ratio: 944 / 1672;
	min-height: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	background-color: #f6eee7;
	background-image: url('/invitaciones/54/Fondo Salmos.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: 1px solid rgba(105, 60, 83, 0.08);
	box-shadow: 0 0.45rem 1.4rem rgba(105, 60, 83, 0.14);
	overflow: hidden;
	isolation: isolate;
}

/* Corazón superior y línea ornamental que separa las dos frases. */
.borde > .orden-linea1::before {
	content: "♡";
	position: absolute;
	top: 25%;
	left: 50%;
	z-index: 2;
	font-family: Cormorant, serif;
	font-size: clamp(1.35rem, calc(var(--salmos-card-width) * 0.06), 2rem);
	font-weight: 500;
	line-height: 1;
	color: var(--cuatro);
	transform: translateX(-50%);
	text-shadow: 0 1px 0 rgba(255, 248, 241, 0.75);
	pointer-events: none;
}

.borde > .orden-linea1::after {
	content: "";
	position: absolute;
	top: 54%;
	left: 21%;
	z-index: 1;
	width: 58%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(105, 60, 83, 0.36) 16%, rgba(105, 60, 83, 0.36) 84%, transparent);
	pointer-events: none;
}

.borde > .orden-linea1 .linea1 {
	position: absolute;
	top: 33%;
	left: 12%;
	z-index: 2;
	width: 76%;
	margin: 0 !important;
	font-family: Cormorant, serif;
	font-size: clamp(1.2rem, calc(var(--salmos-card-width) * 0.046), 1.55rem) !important;
	font-weight: 500 !important;
	line-height: 1.22;
	letter-spacing: 0.015em;
	text-align: center;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
}

.borde > .orden-linea1 .linea1 br {
	display: block;
	content: "";
	margin-top: 0.45em;
}

/* Solo la cita va en verde oliva; la referencia bíblica conserva el ciruela. */
.borde > .orden-linea1 .linea1::before {
	content: '"Grandes cosas ha hecho el Señor con nosotros, y estamos alegres."';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	font: inherit;
	color: var(--siete);
	-webkit-text-fill-color: var(--siete);
}

.borde > .orden-linea1 .linea1::after {
	content: "Salmos 126:3";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	font: inherit;
	color: var(--cuatro);
	-webkit-text-fill-color: var(--cuatro);
}

/* La segunda línea ocupa la parte inferior de la misma tarjeta. */
.borde > .orden-linea2 {
	position: relative;
	display: block !important;
	height: auto;
	aspect-ratio: 1 / 0.814746;
	min-height: 0 !important;
	margin-top: -81.4746% !important;
	margin-bottom: 0 !important;
	background: transparent !important;
	overflow: visible;
	isolation: isolate;
}

.borde > .orden-linea2::before {
	content: "♡";
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 3;
	display: block;
	padding: 0 0.6rem;
	font-family: Cormorant, serif;
	font-size: clamp(1.3rem, calc(var(--salmos-card-width) * 0.06), 2rem);
	font-weight: 500;
	line-height: 1;
	color: var(--cuatro);
	background: transparent;
	transform: translate(-50%, -50%);
	text-shadow: none;
	pointer-events: none;
}

.borde > .orden-linea2 .linea2 {
	position: absolute;
	top: 5%;
	left: 0;
	z-index: 2;
	width: 100%;
	margin: 0 !important;
	padding: 0 12%;
	font-family: GreatVibes, cursive !important;
	font-size: clamp(2rem, calc(var(--salmos-card-width) * 0.1), 3.4rem) !important;
	font-weight: 400 !important;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-align: center;
	color: var(--cuatro) !important;
}

/* Firma pequeña justo debajo de la segunda línea, conservando la estética. */
.borde > .orden-linea2::after {
	display: none;
}

.borde > .orden-linea2 .linea2::after {
	content: "Fabián & Natalia";
	display: block;
	margin-top: clamp(0.35rem, 1.3vw, 0.8rem);
	font-family: Cormorant, serif;
	font-size: clamp(1rem, calc(var(--salmos-card-width) * 0.05), 1.55rem);
	font-style: italic;
	font-weight: 500;
	text-align: center;
	color: var(--siete);
	pointer-events: none;
}

/* Padres: tarjeta floral completa, unida a la sección de salmos anterior. */
.borde:has(> .tituloPadres + .nombrePadres) {
	--padres-card-width: min(100vw, 50rem);
}

.borde > .tituloPadres {
	position: relative;
	display: block !important;
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
	height: auto;
	aspect-ratio: 941 / 1672;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0 !important;
	line-height: 0;
	color: transparent !important;
	background-color: #f6eee7;
	background-image: url('/invitaciones/54/Fondo Padres.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: 0 0.45rem 1.4rem rgba(105, 60, 83, 0.12);
	overflow: hidden;
	isolation: isolate;
}

/* Texto añadido sin alterar la estructura ni los datos de PHP. */
.borde > .tituloPadres::before {
	content: "Con la bendición\A de nuestros padres";
	position: absolute;
	top: 9.5%;
	right: 10%;
	left: 10%;
	z-index: 2;
	font-family: Cormorant, serif;
	font-size: clamp(1.85rem, calc(var(--padres-card-width) * 0.052), 3.2rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.12;
	text-align: center;
	white-space: pre;
	color: var(--cuatro);
}

/* El fondo ya incluye el ornamento; no se agrega uno adicional. */
.borde > .tituloPadres::after {
	display: none;
}

.borde > .tituloPadres + .nombrePadres {
	position: relative;
	z-index: 2;
	display: flex !important;
	box-sizing: border-box;
	align-items: flex-start;
	justify-content: center;
	width: 100% !important;
	max-width: none !important;
	height: auto;
	aspect-ratio: 1 / 0.82;
	margin-top: -117.5% !important;
	margin-right: 0 !important;
	margin-bottom: 35.5% !important;
	margin-left: 0 !important;
	padding: 0 7% !important;
	background: transparent !important;
	overflow: visible;
}

.borde > .tituloPadres + .nombrePadres > .nombrePadres2 {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-width: 0;
	margin: 0 !important;
	padding: 0 clamp(0.4rem, 2vw, 1.4rem) !important;
	text-align: center;
}

.borde > .tituloPadres + .nombrePadres > .nombrePadres2 h5 {
	margin: 0 0 clamp(0.5rem, 1.6vw, 0.9rem) !important;
	font-family: Cormorant, serif;
	font-size: clamp(0.95rem, 2.1vw, 1.25rem) !important;
	font-weight: 600 !important;
	line-height: 1.1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cuatro) !important;
}

.borde > .tituloPadres + .nombrePadres > .nombrePadres2 p {
	margin: 0 !important;
	font-family: Cormorant, serif;
	font-size: clamp(1.15rem, 2.8vw, 1.65rem) !important;
	font-weight: 500 !important;
	line-height: 1.2;
	color: var(--siete) !important;
}

@media (max-width: 576px) {
	.borde > .tituloPadres + .nombrePadres {
		aspect-ratio: 1 / 0.58;
		margin-top: -117% !important;
		margin-bottom: 59% !important;
		padding: 0 8% !important;
	}

	.borde > .tituloPadres + .nombrePadres > .nombrePadres2 {
		flex: 0 0 auto;
		width: 100%;
		padding: 0 0.5rem !important;
	}

	.borde > .tituloPadres + .nombrePadres > .nombrePadres2 + .nombrePadres2 {
		margin-top: 0.8rem !important;
	}

	.borde > .tituloPadres + .nombrePadres > .nombrePadres2 h5 {
		font-size: 0.92rem !important;
		letter-spacing: 0.1em;
	}

	.borde > .tituloPadres + .nombrePadres > .nombrePadres2 p {
		font-size: clamp(1.15rem, 5vw, 1.45rem) !important;
	}
}

/* Portada de la invitacion 52: foto vertical con logo y nombres superpuestos. */
#principal > .container[style*="/invitaciones/54/principal/"] {
	position: relative;
	display: block;
	width: 100%;
	max-width: none;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	aspect-ratio: 2 / 3;
	padding: 0 !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	overflow: hidden;
	isolation: isolate;
}

#principal > .container[style*="/invitaciones/54/principal/"]::before {
	content: "";
	position: absolute;
	top: clamp(1rem, 5.5%, 4rem);
	left: 50%;
	width: clamp(4.75rem, 22vw, 10.5rem);
	aspect-ratio: 356 / 512;
	transform: translateX(-50%);
	background: url('/invitaciones/54/favicon/favicon.png') center / contain no-repeat;
	z-index: 2;
	pointer-events: none;
}

#principal > .container[style*="/invitaciones/54/principal/"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(38, 24, 34, 0) 56%,
		rgba(38, 24, 34, 0.05) 69%,
		rgba(38, 24, 34, 0.42) 100%
	);
	z-index: 1;
	pointer-events: none;
}

#principal > .container[style*="/invitaciones/54/principal/"] .nombres {
	position: absolute !important;
	top: auto !important;
	right: auto !important;
	bottom: clamp(3rem, 11%, 8rem) !important;
	left: 50% !important;
	z-index: 3;
	width: 80%;
	max-width: 80%;
	margin: 0 !important;
	padding: 0 !important;
	font-family: GreatVibes !important;
	font-size: clamp(3rem, 13vw, 7rem) !important;
	font-weight: 400 !important;
	line-height: 1;
	letter-spacing: 0.01em;
	text-align: center;
	white-space: nowrap;
	color: var(--tercero) !important;
	text-shadow: 0 2px 10px rgba(38, 24, 34, 0.58), 0 1px 1px var(--cuatro);
	transform: translateX(-50%) !important;
}

#principal > .container[style*="/invitaciones/54/principal/"] .nombres br {
	display: none;
}

#principal > .container[style*="/invitaciones/54/principal/"] .nombres .and {
	display: inline;
	position: static;
	margin: 0 0.12em;
	font-family: GreatVibes !important;
	font-size: 0.72em;
	opacity: 0.92;
	color: inherit !important;
}

#principal > .container[style*="/invitaciones/54/principal/"] .nombres::after {
	content: "♡\A 27 • 02 • 27";
	position: absolute;
	top: calc(100% + clamp(0.15rem, 0.75vw, 0.45rem));
	left: 50%;
	display: block;
	width: max-content;
	transform: translateX(-50%);
	font-family: Cormorant, serif !important;
	font-size: clamp(1.4rem, 6vw, 3.5rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.14em;
	text-align: center;
	white-space: pre;
	color: var(--tercero) !important;
	text-shadow: 0 2px 8px rgba(38, 24, 34, 0.58);
	pointer-events: none;
}

#principal > img {
	display: block;
	width: 100%;
	height: auto;
}

/* Galería: título en el flujo normal, encima de las fotografías. */
#fotos.carousel {
	position: relative;
	padding-top: clamp(1.5rem, 4vw, 3rem) !important;
	overflow: hidden;
}

#fotos.carousel > .galeria {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 clamp(1.25rem, 3vw, 2.25rem) !important;
	padding: 0 !important;
	transform: none !important;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 0 !important;
	line-height: 1;
	color: transparent !important;
	text-shadow: none;
	pointer-events: none;
}

#fotos.carousel > .galeria::before {
	content: "Nosotros";
	display: block;
	font-family: GreatVibes, cursive;
	font-size: clamp(2.4rem, 8vw, 4.75rem);
	font-weight: 400;
	line-height: 1;
	text-align: center;
	color: var(--principal);
}

#fotos.carousel .carousel-inner,
#fotos.carousel .carousel-item,
#fotos.carousel .carousel-item img {
	position: relative;
}

#fotos.carousel .carousel-item img {
	display: block;
	width: 100%;
	height: auto;
}

/* El encabezado de Dress Code usa el mismo color que la galeria. */
#dresscode > .bordeCompleto > h2.dresscode {
	color: var(--principal) !important;
}

/* Dress code: tarjeta floral de la referencia, usando únicamente la
 * estructura existente y el arte combinado de vestido y traje. */
#dresscode {
	width: 100%;
	max-width: 800px;
	margin: 0 auto !important;
	padding: 0 !important;
}

#dresscode > .bordeCompleto {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-height: 0;
	aspect-ratio: 1086 / 1448;
	margin: 0 !important;
	padding: 16% 7% 9% !important;
	overflow: hidden;
	isolation: isolate;
	border: 0 !important;
	border-radius: 0 !important;
	background: #f6eee7 url('/invitaciones/54/FondoDresscode.jpg') center / 100% 100% no-repeat !important;
	box-shadow: none !important;
}

#dresscode > .bordeCompleto > h2.dresscode {
	order: 1;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0 !important;
	font-family: Cormorant, serif !important;
	font-weight: 500 !important;
	line-height: 1;
	text-align: center;
	color: transparent !important;
}

#dresscode > .bordeCompleto > h2.dresscode::before {
	content: "FORMAL JARDÍN";
	display: block;
	font-family: Cormorant, serif;
	font-size: clamp(1.35rem, 5.4vw, 2.9rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--siete);
}

#dresscode > .bordeCompleto > h2.dresscode::after {
	content: "♡\A Elegancia para celebrar al aire libre.";
	display: block;
	max-width: 90%;
	margin: clamp(0.65rem, 2.5vw, 1.25rem) auto 0;
	font-family: Cormorant, serif;
	font-size: clamp(1rem, 3.6vw, 1.9rem);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0.02em;
	white-space: pre-line;
	color: var(--siete);
}

/* Dresscode.png ya contiene ambas ilustraciones y su transparencia. */
#dresscode > .bordeCompleto > .dressimage {
	order: 2;
	display: block !important;
	position: relative;
	flex: 0 0 auto;
	width: min(78%, 560px);
	aspect-ratio: 3 / 2;
	margin: clamp(3rem, 16vw, 8rem) auto 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

#dresscode > .bordeCompleto > .dressimage::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: url('/invitaciones/54/Dresscode.png') center / contain no-repeat;
}

#dresscode > .bordeCompleto > .dressimage > * {
	display: none !important;
}

#dresscode > .bordeCompleto > p.dresscode2,
#dresscode > .bordeCompleto > #paletaColores {
	display: none !important;
}

@media (max-width: 576px) {
	#fotos.carousel > .galeria {
		margin-bottom: 1.25rem !important;
	}

	#fotos.carousel > .galeria::before {
		font-size: clamp(2.3rem, 12vw, 3.5rem);
	}
}

/* Mesa de regalos: composición vertical tipo tarjeta, sin cambiar el PHP. */
#regalos {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 800px;
	margin: 0 auto !important;
	padding: clamp(2.75rem, 7vw, 4.75rem) clamp(1.1rem, 6vw, 3.5rem) clamp(3.25rem, 8vw, 5rem) !important;
	color: var(--cuatro);
	background: #f6eee7 url('/invitaciones/54/Fondo Regalos.jpg') center / 100% 100% no-repeat;
	border: 0 !important;
	box-shadow: none !important;
}

#regalos::before {
	display: none;
}

/* El texto visual conserva la estructura original para las demás invitaciones. */
#regalos h2.regalo {
	max-width: none;
	margin: 0 auto !important;
	padding: 0 !important;
	font-family: Cormorant, serif;
	font-size: 0 !important;
	font-weight: 400 !important;
	line-height: 1;
	text-align: center;
	color: transparent !important;
}

#regalos h2.regalo::before {
	content: "Para nuestro hogar";
	display: block;
	font-family: Cormorant, serif;
	font-size: clamp(2rem, 7vw, 3.8rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.05;
	color: var(--cuatro);
}

#regalos .sinembargo {
	max-width: 30rem;
	/* La rama del fondo ocupa esta franja; el texto inicia después de ella. */
	margin: clamp(3.5rem, 8vw, 6rem) auto 0 !important;
	padding: 0 !important;
	font-family: Cormorant, serif;
	font-size: 0 !important;
	font-weight: 400 !important;
	line-height: 1;
	text-align: center;
	color: transparent !important;
}

#regalos .sinembargo::before {
	content: "Hay muchas maneras de\A acompañarnos en esta nueva\A etapa. Si desean hacerlo con\A un detalle para nuestro hogar,\A aquí encontrarán algunas ideas\A que hemos elegido con cariño.";
	display: block;
	font-family: Cormorant, serif;
	font-size: clamp(1.05rem, 3.8vw, 1.55rem);
	font-weight: 400;
	line-height: 1.27;
	white-space: pre-line;
	color: var(--cuatro);
}

/* La referencia muestra las marcas directamente, sin tarjetas oscuras. */
#regalos > h2.titulo2 {
	display: none !important;
}

#regalos > .row {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 0 !important;
	margin: clamp(1.8rem, 5vw, 3rem) 0 0 !important;
	padding: 0 !important;
}

#regalos > .row > .dondes {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	max-width: 24rem;
	min-height: 0;
	margin: 0 !important;
	padding: 0.45rem 0 !important;
	font-family: Cormorant, serif;
	color: var(--cuatro) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform: none !important;
}

#regalos > .row > .dondes:has(img[src*="Liverpool.png"], img[src*="Amazon.png"]) .link-mesa {
	display: flex;
	flex: 0 1 auto;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: min(100%, 20rem);
	min-height: 3.7rem;
	padding: 0.35rem 1.1rem;
	gap: clamp(0.7rem, 3vw, 1.25rem);
	color: var(--cuatro) !important;
	text-decoration: none;
	background: rgba(255, 248, 241, 0.34);
	border: 1px solid rgba(105, 60, 83, 0.22);
	border-radius: 999px;
	box-shadow: 0 0.25rem 0.75rem rgba(105, 60, 83, 0.08);
	transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

#regalos > .row > .dondes:has(img[src*="Liverpool.png"], img[src*="Amazon.png"]) .link-mesa:hover,
#regalos > .row > .dondes:has(img[src*="Liverpool.png"], img[src*="Amazon.png"]) .link-mesa:focus-visible {
	background: rgba(255, 248, 241, 0.74);
	border-color: rgba(105, 60, 83, 0.5);
	transform: translateY(-1px);
}

#regalos > .row > .dondes:has(img[src*="Liverpool.png"], img[src*="Amazon.png"]) .link-mesa img {
	display: block;
	width: clamp(6.5rem, 32vw, 10.5rem) !important;
	max-width: 100%;
	height: auto;
	max-height: 3rem;
	margin: 0 !important;
	object-fit: contain;
	filter: brightness(0) saturate(100%) invert(25%) sepia(12%) saturate(1250%) hue-rotate(286deg) brightness(91%) contrast(90%);
}

#regalos > .row > .dondes:has(img[src*="Liverpool.png"], img[src*="Amazon.png"]) .texto-mesa {
	display: none !important;
}

/* Lluvia de sobres queda como una segunda opción separada por una línea y corazón. */
#regalos > .row > .dondes:has(.lluvia) {
	flex-direction: column;
	margin-top: clamp(1.65rem, 5vw, 2.75rem) !important;
	padding: clamp(2.1rem, 6vw, 3rem) 0 0.25rem !important;
	background:
		linear-gradient(var(--cuatro), var(--cuatro)) left top / calc(50% - clamp(3.5rem, 12vw, 4.5rem)) 1px no-repeat,
		linear-gradient(var(--cuatro), var(--cuatro)) right top / calc(50% - clamp(3.5rem, 12vw, 4.5rem)) 1px no-repeat !important;
	border-top: 0 !important;
}

#regalos > .row > .dondes:has(.lluvia)::before {
	content: "♡";
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	padding: 0 0.7rem;
	font-family: Cormorant, serif;
	font-size: clamp(1.55rem, 5.5vw, 2.2rem);
	font-weight: 500;
	line-height: 1;
	color: var(--cuatro);
	background: transparent;
	transform: translate(-50%, -53%);
}

#regalos > .row > .dondes:has(.lluvia) .lluvia {
	display: block;
	width: clamp(2.75rem, 13vw, 4rem) !important;
	max-width: 100%;
	height: auto;
	max-height: none;
	margin: 0 auto 0.75rem !important;
	object-fit: contain;
	filter: brightness(0) saturate(100%) invert(25%) sepia(12%) saturate(1250%) hue-rotate(286deg) brightness(91%) contrast(90%);
}

#regalos > .row > .dondes:has(.lluvia) .texto-mesa {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0 !important;
	font-weight: 400 !important;
	line-height: 1;
	text-align: center;
	color: transparent !important;
}

#regalos > .row > .dondes:has(.lluvia) .texto-mesa::before {
	content: "Opción de sobre\A el día de la celebración";
	display: block;
	font-family: Cormorant, serif;
	font-size: clamp(1.05rem, 3.8vw, 1.55rem);
	font-weight: 400;
	line-height: 1.2;
	white-space: pre-line;
	color: var(--cuatro);
}

@media (max-width: 576px) {
	#regalos {
		padding-right: 1rem !important;
		padding-left: 1rem !important;
	}

	#regalos > .row > .dondes:has(img[src*="Liverpool.png"], img[src*="Amazon.png"]) .link-mesa {
		width: min(100%, 19rem);
	}
}

/* Nosotros: el título y toda la galería comparten el mismo fondo. */
#fotos.carousel {
	background-color: #F2DFD0 !important;
}

/* Mantener el color visible también dentro de la galería mientras las fotos
 * todavía no han terminado de cargar. */
#fotos.carousel .carousel-inner,
#fotos.carousel .carousel-item,
#fotos.carousel .galeria-imagen-pendiente {
	background-color: #F2DFD0 !important;
}

/* Línea 1 y Línea 2 nunca deben recortar el contenido recibido desde PHP. */
.borde > .orden-linea1,
.borde > .orden-linea2,
.borde > .orden-linea1 .linea1,
.borde > .orden-linea2 .linea2 {
	max-height: none !important;
	overflow: visible !important;
	text-overflow: clip !important;
	white-space: normal !important;
	word-break: normal;
	overflow-wrap: anywhere;
}

/* Invitados: tarjeta floral que crece con el contenido y conserva las flores inferiores. */
#asistencia {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	max-width: 800px;
	min-height: 0 !important;
	height: auto;
	margin: 0 auto !important;
	padding: clamp(3.25rem, 10vw, 6.75rem) clamp(1.1rem, 6vw, 3.5rem) clamp(4.75rem, 14vw, 8.5rem) !important;
	color: var(--cuatro);
	background: #f6eee7 url('/invitaciones/54/Fondo Invitados.jpg') center bottom / cover no-repeat;
	border: 0 !important;
	box-shadow: none !important;
	overflow: hidden;
	isolation: isolate;
}

#asistencia .datosInvitado {
	width: 100%;
	margin: 0 auto !important;
	padding: 0 !important;
	font-size: 0 !important;
	line-height: 1;
	text-align: center;
	color: transparent !important;
}

#asistencia .datosInvitado::before {
	content: "Hemos reservado estos\A lugares especialmente\A para ustedes.";
	display: block;
	font-family: Cormorant, serif;
	font-size: clamp(1.15rem, 4.4vw, 1.85rem);
	font-weight: 500;
	line-height: 1.28;
	white-space: pre-line;
	color: var(--cuatro);
}

/* Corazón entre el mensaje general y el nombre dinámico del invitado. */
#asistencia .datosInvitado::after {
	content: "♡";
	display: block;
	margin: clamp(0.65rem, 2.5vw, 1.1rem) auto 0;
	font-family: Cormorant, serif;
	font-size: clamp(1.55rem, 5.5vw, 2.35rem);
	font-weight: 500;
	line-height: 0.8;
	color: var(--principal);
}

#asistencia > h1 {
	width: 100%;
	margin: clamp(0.9rem, 3.5vw, 1.65rem) auto 0 !important;
	padding: 0 !important;
	font-family: Cormorant, serif;
	font-size: clamp(2.3rem, 9vw, 4.8rem) !important;
	font-style: italic;
	font-weight: 500 !important;
	line-height: 1.04;
	text-align: center;
	color: var(--principal) !important;
}

#asistencia > p.lead {
	margin: clamp(0.65rem, 2vw, 1.25rem) auto 0 !important;
	padding: 0 !important;
	font-family: Cormorant, serif;
	font-size: clamp(1.15rem, 4.5vw, 1.8rem) !important;
	font-weight: 500 !important;
	line-height: 1.15;
	text-align: center;
	color: var(--cuatro) !important;
}

/* El texto se reemplaza visualmente sin eliminar los datos dinámicos del PHP. */
#asistencia > h2.hemos,
#asistencia .mensajeConfirmacion {
	display: none !important;
}

#asistencia > div:last-child {
	width: 100%;
	margin-top: clamp(2rem, 6vw, 4rem) !important;
}

#asistencia > div:last-child > div:has(button[data-bs-target="#modalConfirmar"]) {
	padding-top: 0 !important;
}

#asistencia > div:last-child > div:has(button[data-bs-target="#modalConfirmar"])::before {
	content: "¿Nos acompañarán?";
	display: block;
	margin: 0 auto clamp(1.4rem, 4vw, 2.25rem);
	font-family: Cormorant, serif;
	font-size: clamp(1.55rem, 6.5vw, 2.75rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.1;
	text-align: center;
	color: var(--principal);
}

#asistencia button[data-bs-target="#modalConfirmar"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	max-width: calc(100% - 1rem);
	min-width: 0;
	min-height: 2.75rem;
	padding: 0.55rem clamp(0.7rem, 3.5vw, 1rem) !important;
	font-family: Cormorant, serif;
	font-size: clamp(0.95rem, 3.8vw, 1.25rem) !important;
	font-weight: 500;
	line-height: 1;
	color: var(--cuatro) !important;
	background: #e4c3a6 !important;
	border: 1px solid rgba(105, 60, 83, 0.28) !important;
	border-radius: 999px !important;
	box-shadow: 0 0.35rem 0.9rem rgba(105, 60, 83, 0.12);
	transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

#asistencia button[data-bs-target="#modalConfirmar"] span {
	font-family: Cormorant, serif;
	font-size: inherit !important;
	font-weight: 500 !important;
	line-height: inherit;
	color: inherit !important;
}

#asistencia button[data-bs-target="#modalConfirmar"]:hover,
#asistencia button[data-bs-target="#modalConfirmar"]:focus-visible {
	background: #edd3bb !important;
	border-color: rgba(105, 60, 83, 0.5) !important;
	transform: translateY(-1px);
}

#asistencia .reservado {
	margin: clamp(2rem, 6vw, 4rem) auto 0 !important;
	font-family: Cormorant, serif;
	font-size: clamp(1.2rem, 4.5vw, 1.9rem) !important;
	line-height: 1.25;
	color: var(--cuatro) !important;
}

@media (max-width: 576px) {
	#asistencia {
		min-height: 0 !important;
		padding-right: 1rem !important;
		padding-left: 1rem !important;
	}

	#asistencia > h1 {
		font-size: clamp(2.2rem, 10vw, 3.25rem) !important;
	}
}

/* La tarjeta de regalos conserva la proporción vertical de Fondo Regalos.jpg. */
#regalos {
	aspect-ratio: 9 / 16;
	min-height: min(1422px, 177.78vw);
	background-size: 100% 100%;
	background-position: center bottom;
}

@media (max-width: 576px) {
	#regalos {
		min-height: 177.78vw;
	}
}

/* Cierre: la foto se funde con el papel floral y el contenido permanece en el centro. */
#asistencia + #imagen {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 800px;
	min-height: min(1422px, 177.78vw);
	height: auto;
	margin: 0 auto !important;
	padding: 0 !important;
	overflow: visible;
	isolation: isolate;
	/* Fondo Cierre.jpg es cuadrado: se muestra abajo a escala 1:1, sin estirarlo. */
	background: #f6eee7 url('/invitaciones/54/Fondo Cierre.jpg') center bottom / 100% auto no-repeat;
	border: 0 !important;
	box-shadow: none !important;
}

#asistencia + #imagen > img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	display: block;
	width: 100% !important;
	height: 62% !important;
	max-width: none;
	margin: 0 !important;
	object-fit: cover;
	object-position: center 15%;
	filter: grayscale(1) contrast(1.04);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.75) 76%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.75) 76%, transparent 100%);
}

#asistencia + #imagen::before {
	content: "";
	position: absolute;
	top: 43%;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 28%;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(246, 238, 231, 0) 0%,
		rgba(246, 238, 231, 0.12) 35%,
		rgba(246, 238, 231, 0.7) 68%,
		rgba(246, 238, 231, 0.9) 82%,
		rgba(246, 238, 231, 0) 100%
	);
}

#asistencia + #imagen .textoFinal {
	position: absolute;
	top: 64%;
	left: 12%;
	z-index: 2;
	width: 76%;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0 !important;
	line-height: 1;
	text-align: center;
	color: transparent !important;
}

#asistencia + #imagen .textoFinal::before {
	content: "“Encontré al que ama mi alma.\ALo así y no lo soltaré”";
	display: block;
	font-family: Cormorant, serif;
	font-size: clamp(1.15rem, 4.3vw, 1.95rem);
	font-weight: 500;
	line-height: 1.18;
	white-space: pre-line;
	color: var(--principal);
}

#asistencia + #imagen .textoFinal::after {
	content: "CANTARES 3:4";
	display: block;
	margin-top: clamp(0.55rem, 2vw, 1rem);
	font-family: Cormorant, serif;
	font-size: clamp(0.75rem, 2.7vw, 1.2rem);
	font-weight: 600;
	letter-spacing: 0.15em;
	line-height: 1;
	color: var(--principal);
}

#asistencia + #imagen .final {
	position: absolute;
	top: auto;
	bottom: calc(clamp(4.9rem, 23vw, 9.8rem) + clamp(0.65rem, 2vw, 1.25rem) + clamp(0.5rem, 1.5vw, 1rem));
	left: 9%;
	z-index: 2;
	width: 82%;
	margin: 0 !important;
	padding: 0 !important;
	font-family: GreatVibes, cursive;
	font-size: clamp(2rem, 9vw, 4.8rem) !important;
	font-weight: 400 !important;
	line-height: 1;
	text-align: center;
	color: var(--cuatro) !important;
}

#asistencia + #imagen .final .and {
	display: inline;
	margin: 0 0.12em;
	font-family: GreatVibes, cursive !important;
	font-size: 0.72em;
	color: inherit !important;
}

/* Separador transparente con dos líneas, antes del nombre de los novios. */
#asistencia + #imagen .final::before {
	content: "♡";
	position: absolute;
	top: clamp(-2.25rem, -5vw, -1.35rem);
	left: 50%;
	display: block;
	box-sizing: border-box;
	width: min(17rem, 74vw);
	padding: 0 0.8rem;
	font-family: Cormorant, serif;
	font-size: clamp(1.35rem, 5vw, 2rem);
	font-weight: 500;
	line-height: 1;
	color: var(--cuatro);
	background:
		linear-gradient(var(--cuatro), var(--cuatro)) left center / calc(50% - 1.2rem) 1px no-repeat,
		linear-gradient(var(--cuatro), var(--cuatro)) right center / calc(50% - 1.2rem) 1px no-repeat;
	transform: translateX(-50%);
}

/* El favicon queda después de los nombres, centrado en la zona libre inferior. */
#asistencia + #imagen .final::after {
	content: "";
	position: absolute;
	top: calc(100% + clamp(0.65rem, 2vw, 1.25rem));
	left: 50%;
	display: block;
	width: clamp(3.4rem, 16vw, 6.8rem);
	aspect-ratio: 356 / 512;
	background: url('/invitaciones/54/favicon/favicon.png') center / contain no-repeat;
	transform: translateX(-50%);
}

@media (max-width: 576px) {
	#asistencia + #imagen {
		min-height: 177.78vw;
	}

	#asistencia + #imagen .textoFinal {
		top: 64%;
	}

	#asistencia + #imagen .final {
		top: auto;
		font-size: clamp(1.9rem, 9.5vw, 3.6rem) !important;
	}
}

/* El cierre no debe cortar los nombres ni el contenido si el texto crece. */
#asistencia + #imagen .textoFinal,
#asistencia + #imagen .final {
	max-height: none !important;
	overflow: visible !important;
	text-overflow: clip !important;
	white-space: normal !important;
	overflow-wrap: anywhere;
}

/* Ajustes finos para móvil: respetan las ilustraciones y despejan sus zonas de texto. */
@media (max-width: 576px) {
	/* Reloj: la rama queda debajo del corazón y de la fecha. */
	#reloj::before {
		top: 3%;
		width: clamp(6.25rem, 29vw, 10rem);
	}

	#reloj .tiempoTitulo {
		top: 37%;
		padding: 0 0.2rem !important;
	}

	#reloj .tiempoTitulo > div {
		padding: 0 0.1rem;
		font-size: clamp(0.68rem, 2.8vw, 0.9rem);
		letter-spacing: 0.06em;
	}

	#reloj .tiempo {
		margin-bottom: clamp(0.25rem, 1.5vw, 0.45rem);
		font-size: clamp(1.9rem, 8.3vw, 2.8rem) !important;
	}

	#reloj .tiempoTitulo::after {
		top: calc(100% + clamp(0.35rem, 1.5vw, 0.55rem));
		width: min(12rem, 60vw);
		font-size: clamp(1.15rem, 5vw, 1.55rem);
		transform: translateX(-50%);
	}

	#reloj::after {
		top: 68% !important;
		font-size: clamp(0.95rem, 4.1vw, 1.25rem);
		line-height: 1;
	}

	/* Ubicaciones: separamos el ornamento de la palabra CEREMONIA/RECEPCIÓN. */
	#donde > .dondes > .text-center.p-5 {
		margin-bottom: clamp(0.75rem, 3.5vw, 1.25rem) !important;
	}

	#donde > .dondes > .text-center.p-5 img {
		width: min(50%, 16rem);
	}

	#donde > .dondes > p.display-3 {
		margin-top: clamp(0.15rem, 1vw, 0.35rem) !important;
	}

	/* Dress code: se reduce solo el aire superior; las flores inferiores permanecen libres. */
	#dresscode > .bordeCompleto {
		padding-top: 11% !important;
	}

	/* Regalos: la opción de sobre sube un poco para no invadir la rama lateral. */
	#regalos > .row > .dondes:has(.lluvia) {
		margin-top: clamp(1.2rem, 3.5vw, 1.75rem) !important;
		padding-top: clamp(1.4rem, 4.5vw, 2.25rem) !important;
	}
}