/* ==========================================================================
   FFW · Bodas — grid del archivo y ficha individual.
   Tokens y escala tipográfica del DNA de FitForWeddings. No añadir colores
   ni familias fuera de esta lista.
   ========================================================================== */

.ffw-bodas-archivo,
.ffw-boda-ficha {
	--ivory: #ffffff;
	--cream: #faf6ef;
	--ink: #1d2a23;
	--ink-soft: #2a3a31;
	--pink: #b39c9f;
	--muted: #8a7e70;
	--line: #ddd5c6;
	--serif: 'Cormorant Garamond', Georgia, serif;
	--serif-display: 'Italiana', Georgia, serif;
	--sans: 'Jost', system-ui, sans-serif;
	--maxw: 1480px;
	--gutter: clamp(20px, 4vw, 60px);
}

/* ------------------------------ Grid del archivo ------------------------- */

/* Medidas ancladas al frame de 1440 del Figma: 1440 - 2x60 de gutter =
   1320 = 758 + 22 + 540. Los clamp() reproducen ese ancla exacta a 1440
   y escalan por debajo. */
/* Mismo aire arriba y abajo, a proposito: el hueco entre el hero y la
   primera tarjeta y el que queda entre la ultima y lo que venga despues
   son el mismo valor.
   Y vive AQUI, no en la paginacion: cuando no quedan bodas por mostrar el
   pill no se pinta, y si el margen colgara de el la ultima fila se
   quedaria pegada a lo siguiente. */
.ffw-bodas-archivo {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 100px) var(--gutter);
}

.ffw-bodas-grid {
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 5vw, 72px);
}

.ffw-bodas-fila {
	display: grid;
	grid-template-columns: 758fr 540fr;
	gap: clamp(16px, 1.53vw, 22px);
	align-items: start;
}

.ffw-bodas-fila--invertida {
	grid-template-columns: 540fr 758fr;
}

.ffw-boda__enlace {
	display: block;
	text-decoration: none;
	color: inherit;
}

.ffw-boda__foto {
	overflow: hidden;
	background: var(--cream);
}

.ffw-boda--ancha .ffw-boda__foto {
	aspect-ratio: 758 / 569;
}

.ffw-boda--estrecha .ffw-boda__foto {
	aspect-ratio: 540 / 675;
}

/* Hover del DNA: scale 1.04-1.06 + grayscale, transform lento y filtro
   mas corto. La curva editorial de la casa en vez de `ease` — arranca y
   frena mas suave, que es justo lo que se pedia. */
.ffw-boda__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(0);
	will-change: transform;
	transition: transform 1.4s cubic-bezier(.2, .7, .2, 1), filter .9s cubic-bezier(.2, .7, .2, 1);
}

.ffw-boda__enlace:hover .ffw-boda__foto img,
.ffw-boda__enlace:focus-visible .ffw-boda__foto img {
	transform: scale(1.04);
	filter: grayscale(.85);
}

/* El nombre y el filete acompanan al hover, muy poco, para que la tarjeta
   se sienta una pieza y no una foto con texto debajo. */
.ffw-boda__nombre,
.ffw-boda__cta {
	transition: color .6s cubic-bezier(.2, .7, .2, 1);
}

.ffw-boda__enlace:hover .ffw-boda__nombre {
	color: var(--pink);
}

.ffw-boda__meta {
	padding-top: clamp(14px, 1.39vw, 20px);
}

.ffw-boda__nombre {
	margin: 0;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(24px, 2.08vw, 30px);
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--ink);
}

/* 17px con .26em, no los 10-11px de una meta normal: en el Figma esta
   linea es un renglon tipografico con peso propio, no un pie de foto. */
.ffw-boda__lugar {
	margin: 8px 0 0;
	font-family: var(--sans);
	font-weight: 400;
	font-size: clamp(12px, 1.18vw, 17px);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--muted);
}

/* A .26em de tracking el punto ya va sobrado de aire: se achica y se
   sube un pelo para que separe sin pesar. */
.ffw-boda__sep {
	font-size: .58em;
	vertical-align: .14em;
	opacity: .8;
	letter-spacing: 0;
	margin: 0 .1em 0 -.08em;
}

.ffw-boda__tagline {
	margin: 8px 0 0;
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(15px, 1.21vw, 17.5px);
	line-height: 1.35;
	color: var(--ink-soft);
}

.ffw-boda__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	font-family: var(--sans);
	font-weight: 400;
	font-size: 10px;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--ink);
}

.ffw-boda__cta i {
	display: block;
	width: 24px;
	height: 1px;
	background: currentColor;
	transition: width .5s cubic-bezier(.2, .7, .2, 1);
}

.ffw-boda__enlace:hover .ffw-boda__cta i,
.ffw-boda__enlace:focus-visible .ffw-boda__cta i {
	width: 42px;
}

@media (max-width: 900px) {
	.ffw-bodas-fila,
	.ffw-bodas-fila--invertida {
		grid-template-columns: 1fr;
		gap: clamp(40px, 5.5vw, 82px);
	}

	.ffw-boda--ancha .ffw-boda__foto {
		aspect-ratio: 540 / 675;
	}
}

/* ------------------------------ Paginacion ------------------------------- */

/* Solo el aire de ARRIBA. El de abajo lo pone .ffw-bodas-archivo, que
   existe siempre, haya pill o no. */
.ffw-bodas-paginacion {
	display: flex;
	justify-content: center;
	padding: clamp(30px, 3.33vw, 48px) 0 0;
}

.ffw-bodas-mas.esta-cargando {
	opacity: .45;
	pointer-events: none;
}

/* El pill lo comparten el archivo (MAS BODAS) y la ficha (ESCRIBIDNOS). */
.ffw-boda-pill {
	display: inline-block;
	padding: 16px 34px;
	border: 1px solid var(--ink);
	border-radius: 999px;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--ink);
	background: transparent;
	text-decoration: none;
	transition: background-color .4s ease, color .4s ease;
}

.ffw-boda-pill:hover {
	background: var(--ink);
	color: var(--cream);
}

/* ==========================================================================
   Ficha individual — rediseño ago-2026.
   Figma "Boda — galería (1440) · v1" (frame 117:2) + "Lightbox (estado)"
   (118:44) del archivo de Nuestras bodas.

   PALETA NUEVA propuesta por las clientas (ago-2026), tal cual el Figma:
   papel #faf9f7 · banda crema #f3ece3 · filetes #dcd5cc · rosa #d8aebe ·
   texto sobre papel #0a0a0a. Las bandas de marca (topbar, CTA) siguen en
   tinta --ink. PENDIENTE de enmienda al DNA via /estilo-fitforweddings:
   si se aprueba, estos tokens pasan al DNA; si se rechaza, se cambian
   aqui (solo aqui) y toda la ficha vuelve a la paleta anterior.
   ========================================================================== */

/* Southland viaja como archivo del plugin, no en base64: la hoja ya se
   sirve desde /assets/, asi que la URL relativa resuelve sola. */
@font-face {
	font-family: 'Southland';
	src: url(southland.woff2) format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

.ffw-boda-ficha {
	--papel: #faf9f7;
	--banda: #f3ece3;
	--filete: #dcd5cc;
	--rosa: #d8aebe;
	--texto: #0a0a0a;
	--script: 'Southland', 'Pinyon Script', cursive;
	/* El contenedor editorial de esta pagina es 1240, no --maxw: es el
	   ancho del masonry del Figma (3 x 392 + 2 x 32). */
	--ancho-ficha: 1240px;

	margin: 0;
	padding: 0;
	background: var(--papel);
	color: var(--texto);
	font-family: var(--sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.ffw-boda-ficha *,
.ffw-boda-ficha *::before,
.ffw-boda-ficha *::after {
	box-sizing: border-box;
}

.ffw-boda-ficha a {
	color: inherit;
	text-decoration: none;
}

/* ------------------------------ Topbar ----------------------------------- */

.ffw-boda-topbar {
	background: var(--ink);
	color: var(--cream);
	padding: 11px var(--gutter);
	text-align: center;
	font-family: var(--sans);
	font-weight: 400;
	font-size: clamp(9px, .73vw, 10.5px);
	letter-spacing: .28em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* ------------------------------ Cabecera --------------------------------- */

/* El mismo componente que la landing y el archivo (decision del 29-jul:
   dos paginas con cabeceras distintas se leen como un fallo). Flota en
   crema sobre la portada y se despega como barra blanca fija al hacer
   scroll. La portada de una boda es foto oscura casi siempre; el scrim
   alto garantiza la legibilidad cuando no lo sea. */
.ffw-boda-ficha header.site {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: transparent;
	color: var(--cream);
}

.ffw-boda-ficha header.site.shrunk {
	position: fixed;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid rgba(29, 42, 35, .08);
	color: var(--ink);
	animation: ffwHdIn .45s ease;
}

@keyframes ffwHdIn {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

.ffw-boda-ficha .hd-stack {
	position: relative;
	padding: 38px var(--gutter);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(34px, 4.2vw, 80px);
}

.ffw-boda-ficha header.site.shrunk .hd-stack {
	padding: 16px var(--gutter);
}

.ffw-boda-ficha .hd-logo {
	justify-self: center;
	display: inline-flex;
}

.ffw-boda-ficha .hd-nav.left { justify-content: flex-end; }
.ffw-boda-ficha .hd-nav.right { justify-content: flex-start; }

.ffw-boda-ficha .hd-logo img {
	height: clamp(44px, 5.6vw, 76px);
	width: auto;
	transition: height .35s ease;
}

.ffw-boda-ficha .hd-logo .logo-light { filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .3)); }
.ffw-boda-ficha .hd-logo .logo-dark { display: none; }
.ffw-boda-ficha header.site.shrunk .hd-logo .logo-light { display: none; }
.ffw-boda-ficha header.site.shrunk .hd-logo .logo-dark { display: block; }
.ffw-boda-ficha header.site.shrunk .hd-logo img { height: clamp(38px, 4.2vw, 54px); }

.ffw-boda-ficha .hd-nav {
	display: flex;
	align-items: center;
	gap: clamp(18px, 3vw, 38px);
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: .26em;
	text-transform: uppercase;
	font-weight: 400;
}

.ffw-boda-ficha .hd-nav a {
	position: relative;
	padding: 4px 0;
	transition: color .3s ease, opacity .3s ease;
}

.ffw-boda-ficha .hd-nav a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .4s ease;
}

.ffw-boda-ficha .hd-nav a:hover { opacity: .8; }
.ffw-boda-ficha header.site.shrunk .hd-nav a:hover { color: var(--pink); opacity: 1; }
.ffw-boda-ficha .hd-nav a:hover::after { transform: scaleX(1); }

.ffw-boda-ficha .hd-ig {
	position: absolute;
	right: var(--gutter);
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border: 1px solid currentColor;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: .9;
	transition: opacity .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
}

.ffw-boda-ficha .hd-ig:hover { opacity: 1; }
.ffw-boda-ficha header.site.shrunk .hd-ig:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.ffw-boda-ficha .hd-ig svg { width: 15px; height: 15px; }

/* ------------------------------ Portada ---------------------------------- */

.ffw-boda-portada {
	position: relative;
	height: 100svh;
	min-height: 600px;
	overflow: hidden;
	background: var(--banda);
}

.ffw-boda-portada > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Zoom-out largo al cargar, la firma de entrada de la casa. */
	transform: scale(1.06);
	transition: transform 2.6s cubic-bezier(.2, .7, .2, 1);
}

.ffw-boda-portada.entrada > img {
	transform: scale(1);
}

.ffw-boda-portada__scrim {
	position: absolute;
	inset: auto 0 0;
	height: 62%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
}

.ffw-boda-portada__scrim--alto {
	inset: 0 0 auto;
	height: 26%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0));
}

/* Lockup abajo-izquierda del Figma: LA BODA DE en Italiana, nombres en
   Cormorant cursiva, y el renglon lugar - fecha - fotografia en Jost. */
.ffw-boda-lockup {
	position: absolute;
	inset: auto 0 clamp(48px, 12svh, 110px);
	z-index: 2;
	padding: 0 var(--gutter);
	color: var(--cream);
}

.ffw-boda-lockup__inner {
	max-width: var(--ancho-ficha);
	margin: 0 auto;
}

.ffw-boda-lockup__sobre {
	margin: 0 0 clamp(14px, 2vw, 26px);
	font-family: var(--serif-display);
	font-weight: 400;
	font-size: clamp(11px, .9vw, 13px);
	letter-spacing: .42em;
	text-transform: uppercase;
}

.ffw-boda-lockup h1 {
	margin: 0;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(48px, 6vw, 88px);
	line-height: 1.02;
	letter-spacing: -.01em;
}

.ffw-boda-lockup__meta {
	margin: clamp(26px, 3.9vw, 56px) 0 0;
	font-family: var(--sans);
	font-weight: 400;
	font-size: clamp(10px, .83vw, 12px);
	letter-spacing: .28em;
	text-transform: uppercase;
	line-height: 1.9;
}

.ffw-boda-lockup__meta .sep {
	font-size: .6em;
	vertical-align: .16em;
	opacity: .8;
	letter-spacing: 0;
	margin: 0 .9em;
}

/* Entrada escalonada de la portada al cargar. */
.ffw-boda-lockup__sobre.reveal { transition-delay: .1s; }
.ffw-boda-lockup h1.reveal { transition-delay: .22s; }
.ffw-boda-lockup__meta.reveal { transition-delay: .38s; }

/* ------------------------- Ficha lugar-fecha-foto ------------------------ */

.ffw-boda-datos {
	padding: clamp(36px, 3.6vw, 52px) var(--gutter);
}

.ffw-boda-datos__cols {
	max-width: var(--ancho-ficha);
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

.ffw-boda-datos__col {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
	padding: 6px 16px;
	border-left: 1px solid var(--filete);
}

.ffw-boda-datos__col:first-child {
	border-left: 0;
}

.ffw-boda-datos__tit {
	display: block;
	font-family: var(--sans);
	font-weight: 400;
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--muted);
}

.ffw-boda-datos__val {
	display: block;
	margin-top: 10px;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(19px, 1.67vw, 24px);
	line-height: 1.25;
	color: var(--texto);
}

.ffw-boda-datos__val a {
	transition: color .4s ease;
}

.ffw-boda-datos__val a:hover {
	color: var(--rosa);
}

/* ------------------------------ Galeria ---------------------------------- */

/* Masonry de columnas CSS: las fotos conservan su proporcion natural
   (nada de recorte 4:5) y fluyen de arriba abajo por columna, igual que
   el orden del Figma. break-inside evita fotos partidas. */
.ffw-boda-galeria-seccion {
	padding: clamp(24px, 2.8vw, 40px) var(--gutter) clamp(48px, 5.6vw, 80px);
}

.ffw-boda-galeria {
	max-width: var(--ancho-ficha);
	margin: 0 auto;
	columns: 3;
	column-gap: clamp(18px, 2.22vw, 32px);
}

/* Con DOS clases a proposito: el kit de Elementor estila `button` con
   .elementor-kit-N (0,1,1) y en esta plantilla su hoja carga despues de
   la nuestra — fondo #121212 y padding 20/40 pintaban un marco negro en
   cada celda. 0,2,1 le gana siempre. */
.ffw-boda-ficha .ffw-boda-galeria button {
	display: block;
	width: 100%;
	margin: 0 0 clamp(18px, 2.22vw, 32px);
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: var(--banda);
	overflow: hidden;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

.ffw-boda-galeria img {
	width: 100%;
	height: auto;
	display: block;
	filter: grayscale(0);
	transition: transform 1.4s cubic-bezier(.2, .7, .2, 1), filter .9s cubic-bezier(.2, .7, .2, 1);
}

/* Hover del archivo, nota del Figma: grayscale + scale 1.05. */
.ffw-boda-ficha .ffw-boda-galeria button:hover {
	background: var(--banda);
}

.ffw-boda-galeria button:hover img,
.ffw-boda-galeria button:focus-visible img {
	transform: scale(1.05);
	filter: grayscale(.85);
}

/* Escalonado de entrada por columna visual. */
.ffw-boda-galeria button.reveal {
	transition-delay: calc(var(--ffw-i, 0) * .11s);
}

/* -------------------------- Cita de la pareja ---------------------------- */

.ffw-boda-cita {
	background: var(--banda);
	text-align: center;
	padding: clamp(56px, 6.4vw, 92px) var(--gutter);
}

.ffw-boda-cita blockquote {
	margin: 0 auto;
	max-width: 720px;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(22px, 2.08vw, 30px);
	line-height: 1.55;
	color: var(--texto);
}

.ffw-boda-cita__firma {
	display: block;
	margin-top: clamp(18px, 2vw, 28px);
	font-family: var(--script);
	font-weight: 400;
	font-size: clamp(26px, 2.36vw, 34px);
	line-height: 1.2;
	color: var(--rosa);
}

/* --------------------------- Esta boda en el blog ------------------------ */

.ffw-boda-blog {
	padding: clamp(40px, 4.4vw, 64px) var(--gutter) clamp(28px, 3vw, 44px);
}

.ffw-boda-blog__inner {
	max-width: 880px;
	margin: 0 auto;
}

.ffw-boda-blog__tit {
	margin: 0 0 clamp(24px, 2.6vw, 38px);
	text-align: center;
	font-family: var(--sans);
	font-weight: 400;
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--muted);
}

.ffw-boda-blog__lista {
	border-bottom: 1px solid var(--filete);
}

.ffw-boda-blog__fila {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: clamp(16px, 1.8vw, 22px) 0;
	border-top: 1px solid var(--filete);
}

.ffw-boda-blog__titulo {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(19px, 1.67vw, 24px);
	line-height: 1.3;
	color: var(--texto);
	transition: color .5s cubic-bezier(.2, .7, .2, 1);
}

.ffw-boda-blog__fila:hover .ffw-boda-blog__titulo {
	color: var(--rosa);
}

.ffw-boda-blog__ver {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: none;
	font-family: var(--sans);
	font-weight: 400;
	font-size: 10px;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--texto);
}

.ffw-boda-blog__ver i {
	display: block;
	width: 24px;
	height: 1px;
	background: currentColor;
	transition: width .5s cubic-bezier(.2, .7, .2, 1);
}

.ffw-boda-blog__fila:hover .ffw-boda-blog__ver i {
	width: 42px;
}

/* ------------------------- Boda anterior / siguiente --------------------- */

.ffw-boda-adyacentes {
	padding: 0 var(--gutter);
}

.ffw-boda-adyacentes__inner {
	max-width: var(--ancho-ficha);
	margin: 0 auto;
	border-top: 1px solid var(--filete);
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: clamp(36px, 3.6vw, 52px) 0 clamp(40px, 4.2vw, 60px);
}

.ffw-boda-adyacentes a {
	display: block;
	text-align: center;
	padding: 6px 16px;
}

.ffw-boda-adyacentes a + a {
	border-left: 1px solid var(--filete);
}

.ffw-boda-adyacentes__tit {
	display: block;
	font-family: var(--sans);
	font-weight: 400;
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--muted);
}

.ffw-boda-adyacentes__nombre {
	display: block;
	margin-top: 10px;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(22px, 2.08vw, 30px);
	line-height: 1.25;
	color: var(--texto);
	transition: color .5s cubic-bezier(.2, .7, .2, 1);
}

.ffw-boda-adyacentes a:hover .ffw-boda-adyacentes__nombre {
	color: var(--rosa);
}

/* ------------------------------ CTA final -------------------------------- */

/* La misma banda de tinta que cierra el archivo y la landing. */
.ffw-boda-cierre {
	background: var(--ink);
	color: var(--cream);
	text-align: center;
	padding: clamp(64px, 7.64vw, 110px) var(--gutter);
	margin-top: clamp(28px, 3vw, 44px);
}

.ffw-boda-cierre p {
	margin: 0 0 clamp(24px, 2.5vw, 36px);
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(30px, 3.75vw, 54px);
	line-height: 1.15;
}

.ffw-boda-cierre p em {
	font-style: italic;
	color: var(--rosa);
}

.ffw-boda-cierre .ffw-boda-pill {
	border-color: var(--cream);
	color: var(--cream);
}

.ffw-boda-cierre .ffw-boda-pill:hover {
	background: var(--cream);
	color: var(--ink);
}

/* --------------------------- Reveal on scroll ---------------------------- */

.ffw-boda-ficha .reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1);
}

.ffw-boda-ficha .reveal.in {
	opacity: 1;
	transform: translateY(0);
}

/* ------------------------------ Responsive ------------------------------- */

@media (max-width: 900px) {
	.ffw-boda-ficha .hd-stack {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		row-gap: 12px;
		column-gap: clamp(14px, 3.5vw, 30px);
		padding: 20px var(--gutter) 14px;
	}

	.ffw-boda-ficha header.site.shrunk .hd-stack {
		row-gap: 8px;
		padding: 10px var(--gutter) 8px;
	}

	.ffw-boda-ficha .hd-logo {
		order: -1;
		flex-basis: 100%;
		justify-content: center;
	}

	.ffw-boda-ficha .hd-logo img { height: clamp(40px, 7vw, 56px); }
	.ffw-boda-ficha header.site.shrunk .hd-logo img { height: 34px; }
	.ffw-boda-ficha .hd-nav.left,
	.ffw-boda-ficha .hd-nav.right { display: contents; }
	.ffw-boda-ficha .hd-ig { display: none; }

	.ffw-boda-galeria {
		columns: 2;
	}
}

@media (max-width: 760px) {
	.ffw-boda-ficha .hd-nav {
		font-size: 10.5px;
		gap: 14px;
		letter-spacing: .18em;
		flex-wrap: wrap;
		justify-content: center;
	}

	.ffw-boda-topbar { letter-spacing: .16em; }

	.ffw-boda-datos__cols {
		flex-direction: column;
		gap: 20px;
	}

	.ffw-boda-datos__col {
		border-left: 0;
		padding: 0;
	}

	.ffw-boda-lockup__meta .sep { margin: 0 .45em; }
}

@media (max-width: 640px) {
	.ffw-boda-blog__fila {
		flex-wrap: wrap;
		gap: 10px 24px;
	}
}

@media (max-width: 600px) {
	.ffw-boda-galeria {
		columns: 1;
	}
}

@media (max-width: 560px) {
	.ffw-boda-ficha .hd-nav.left,
	.ffw-boda-ficha .hd-nav.right {
		display: flex;
		flex-basis: 100%;
		justify-content: center;
		gap: 18px;
	}

	.ffw-boda-ficha .hd-stack { row-gap: 10px; }
	.ffw-boda-ficha header.site.shrunk .hd-stack { row-gap: 6px; }

	.ffw-boda-adyacentes__inner {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.ffw-boda-adyacentes a + a {
		border-left: 0;
		border-top: 1px solid var(--filete);
		padding-top: 26px;
	}
}

/* ------------------------------ Visor ------------------------------------ */

/* Lightbox de VELO CLARO (referencia weddingswithlove.es, nota del Figma):
   papel al ~94% sobre la pagina, nada de fondo negro. Foto centrada a
   max-h 80vh, aspa y chevrons de lineas CSS finas, contador en versales. */
.ffw-visor {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(250, 249, 247, .94);
}

.ffw-visor[open],
.ffw-visor.abierto {
	display: flex;
	animation: ffwVisorIn .35s ease;
}

@keyframes ffwVisorIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.ffw-visor img {
	max-width: min(80vw, 1010px);
	max-height: 80vh;
	object-fit: contain;
}

/* Dos clases por lo mismo que en la galeria: sin esto, el kit de
   Elementor pintaba su caja oscura detras del aspa y de los chevrons. */
.ffw-boda-ficha .ffw-visor button {
	position: absolute;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	color: var(--texto, #0a0a0a);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	padding: 18px;
	transition: opacity .3s ease;
}

.ffw-boda-ficha .ffw-visor button:hover {
	opacity: .55;
	background: transparent;
	color: var(--texto, #0a0a0a);
}

/* El anillo de foco por defecto pinta un rectangulo negro sobre el velo;
   se sustituye por un filete fino de la casa. */
.ffw-boda-ficha .ffw-visor button:focus {
	outline: none;
	background: transparent;
}

.ffw-boda-ficha .ffw-visor button:focus-visible {
	outline: 1px solid rgba(10, 10, 10, .35);
	outline-offset: 4px;
}

.ffw-visor__cerrar {
	top: 24px;
	right: 28px;
	width: 54px;
	height: 54px;
}

.ffw-visor__cerrar::before,
.ffw-visor__cerrar::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 26%;
	width: 48%;
	height: 1px;
	background: currentColor;
}

.ffw-visor__cerrar::before { transform: rotate(45deg); }
.ffw-visor__cerrar::after { transform: rotate(-45deg); }

.ffw-visor__anterior,
.ffw-visor__siguiente {
	top: 50%;
	transform: translateY(-50%);
	width: 58px;
	height: 58px;
}

.ffw-visor__anterior { left: 14px; }
.ffw-visor__siguiente { right: 14px; }

.ffw-visor__anterior::before,
.ffw-visor__siguiente::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	border-left: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
}

.ffw-visor__anterior::before { transform: translate(-40%, -50%) rotate(45deg); }
.ffw-visor__siguiente::before { transform: translate(-60%, -50%) rotate(-135deg); }

.ffw-visor__cuenta {
	position: absolute;
	bottom: 26px;
	left: 0;
	right: 0;
	text-align: center;
	font-family: var(--sans, sans-serif);
	font-size: 10px;
	letter-spacing: .3em;
	color: rgba(10, 10, 10, .55);
}

/*
 * Elementor inyecta `html *{transition-duration:0s!important}` bajo
 * prefers-reduced-motion, y eso mata TODO. Aqui se re-declaran las
 * transiciones con !important, igual que hace la landing, para que la web
 * se comporte igual en todas sus paginas: son movimientos de una sola vez,
 * lentos, sin desplazamiento de layout.
 *
 * Nota: es una decision heredada de la landing, no un descuido. Si algun
 * dia se quiere respetar de verdad la preferencia, hay que cambiarlo en
 * los dos sitios a la vez.
 */
@media (prefers-reduced-motion: reduce) {
	.ffw-boda__foto img {
		transition: transform 1.4s cubic-bezier(.2, .7, .2, 1), filter .9s cubic-bezier(.2, .7, .2, 1) !important;
	}

	.ffw-boda__nombre,
	.ffw-boda__cta {
		transition: color .6s cubic-bezier(.2, .7, .2, 1) !important;
	}

	.ffw-boda__cta i {
		transition: width .5s cubic-bezier(.2, .7, .2, 1) !important;
	}

	.ffw-boda-pill {
		transition: background-color .4s ease, color .4s ease !important;
	}

	.ffw-boda-galeria img {
		transition: transform 1.4s cubic-bezier(.2, .7, .2, 1), filter .9s cubic-bezier(.2, .7, .2, 1) !important;
	}

	.ffw-boda-portada > img {
		transition: transform 2.6s cubic-bezier(.2, .7, .2, 1) !important;
	}

	/* Longhands a proposito: la forma corta `transition:` resetea
	   transition-delay a 0 y, como va con !important, se cargaria el
	   escalonado del lockup y de la galeria. */
	.ffw-boda-ficha .reveal {
		transition-property: opacity, transform !important;
		transition-duration: 1s, 1s !important;
		transition-timing-function: cubic-bezier(.2, .7, .2, 1), cubic-bezier(.2, .7, .2, 1) !important;
	}

	/* Y los retardos con su propio !important, porque Elementor pone
	   `transition-delay:0s!important` sobre `html *`. */
	.ffw-boda-lockup__sobre.reveal { transition-delay: .1s !important; }
	.ffw-boda-lockup h1.reveal { transition-delay: .22s !important; }
	.ffw-boda-lockup__meta.reveal { transition-delay: .38s !important; }
	.ffw-boda-galeria button.reveal { transition-delay: calc(var(--ffw-i, 0) * .11s) !important; }

	.ffw-boda-blog__titulo,
	.ffw-boda-adyacentes__nombre {
		transition: color .5s cubic-bezier(.2, .7, .2, 1) !important;
	}

	.ffw-boda-blog__ver i {
		transition: width .5s cubic-bezier(.2, .7, .2, 1) !important;
	}

	.ffw-boda-ficha header.site { transition: background .35s ease !important; }
	.ffw-boda-ficha .hd-stack { transition: padding .35s ease !important; }
	.ffw-boda-ficha .hd-logo img { transition: height .35s ease !important; }
	.ffw-boda-ficha .hd-nav a { transition: color .3s ease !important; }
}