/*
Theme Name: Omaha Liposuction (Imagen)
Theme URI: https://omahaliposuction.com
Author: Awesomemed
Description: Theme clásico a medida para Omaha Liposuction by Imagen. Réplica fiel del diseño original sin Elementor: contenido editable con el editor de WordPress + Secure Custom Fields (heros, CTAs, FAQs y galerías).
Version: 1.0.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: oml
*/

/* =========================================================
   1. Fuentes (auto-alojadas, subset latin)
   ========================================================= */
@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url('assets/fonts/sourcesanspro-200.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('assets/fonts/sourcesanspro-300.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/sourcesanspro-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/sourcesanspro-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/sourcesanspro-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Serif Pro';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/sourceserifpro-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Serif Pro';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/sourceserifpro-600.woff2') format('woff2');
}

/* =========================================================
   2. Tokens y base
   ========================================================= */
:root {
	--navy: #003b59;        /* fondo de bandas y footer */
	--navy-2: #004d66;
	--blue: #004f6e;        /* titulares */
	--plum: #741e60;        /* acento */
	--gold: #c5a059;
	--cream: #f9f9f7;
	--ink: #303030;
	--gray: #666666;
	--line: #cfd0d1;
	--sans: 'Source Sans Pro', -apple-system, 'Segoe UI', sans-serif;
	--serif: 'Source Serif Pro', Georgia, serif;
	--wrap: 1200px;
	--wrap-narrow: 1188px; /* col. de contenido 1140 (Elementor --container-max-width) + 48 padding */
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	font-family: var(--sans);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.6;
	color: var(--ink);
	background: #fff;
	overflow-x: clip; /* las bandas full-bleed usan 100vw (incluye la barra de scroll) → evita el scroll/blanco horizontal */
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--plum); }

h1, h2, h3, h4 {
	font-family: var(--sans);
	font-weight: 300;
	line-height: 1.15;
	color: var(--blue);
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--wide { max-width: 100%; padding: 0 36px; } /* header original: full-width con 36px */

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--navy);
	color: #fff;
	padding: 10px 18px;
	z-index: 999;
}
.skip-link:focus { left: 0; color: #fff; }

/* Título de sección estándar — 45px/400 #004F6E como el original */
.section-title {
	font-size: 45px;
	font-weight: 400;
	line-height: 1;
	color: rgb(0, 79, 110);
	text-align: center;
	margin-bottom: 44px;
}

.section-actions {
	display: flex;
	gap: 18px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 40px;
}

/* Divisor: línea con diamante central — 70px antes / 12px después (medido) */
.divider {
	display: flex;
	justify-content: center;
	padding: 70px 0 12px;
}
.divider img { width: 450px; max-width: 70vw; height: auto; }

/* =========================================================
   3. Botones — estilo global EXACTO del kit del original:
   Source Serif Pro 21/400, ls 3px, texto y borde #8C9092,
   radio 8px, padding 16/26, fondo transparente.
   Hover global: texto y borde ciruela #742060.
   ========================================================= */
.btn {
	display: inline-block;
	font-family: var(--serif);
	font-size: 21px;
	font-weight: 400;
	letter-spacing: 3px;
	line-height: 1;
	text-transform: uppercase;
	padding: 16px 26px;
	border: 2px solid #8c9092;
	border-radius: 8px;
	background: transparent;
	color: #8c9092;
	transition: all 0.3s;
	text-align: center;
}
.btn--ghost-dark:hover,
.btn--ghost-light:hover {
	color: #742060;
	border-color: #742060;
}
/* En el footer el hover invierte a navy/blanco (regla propia del original) */
.site-footer .btn:hover {
	background: var(--navy);
	color: #fff;
	border-color: #fff;
}
/* Botón sólido (Contact del header) — valores exactos del original */
.btn--solid {
	font-family: var(--serif);
	font-size: 21px;
	font-weight: 400;
	letter-spacing: 3px;
	line-height: 1;
	background: var(--navy);
	border: 2px solid #8c9092;
	border-radius: 8px;
	color: #cfd2d4;
	padding: 16px 26px;
}
.btn--solid:hover {
	background: #cfd2d4;
	border-color: var(--plum);
	color: var(--plum);
}

/* =========================================================
   4. Topbar + Header
   ========================================================= */
/* Valores exactos medidos en el original (rip): topbar 49px, fuente 16/600,
   teléfono ciruela #741E60, idioma #B2B2B2. */
.topbar {
	background: #fff;
	border-bottom: 1px solid #ececec;
	font-size: 16px;
	font-weight: 600;
}
.topbar__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 48px;
}
.topbar__phone { color: #b2b2b2; font-weight: 600; }
.topbar__phone:hover { color: var(--plum); }
.topbar__lang { color: #b2b2b2; display: inline-flex; align-items: center; gap: 10px; }
.pll-switch { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pll-switch li { margin: 0; }
.pll-switch a { display: inline-flex; align-items: center; gap: 5px; color: #b2b2b2; text-decoration: none; text-transform: uppercase; font-size: 14px; }
.pll-switch a:hover, .pll-switch .current-lang a { color: #742060; }
.pll-switch img { width: 18px; height: auto; display: block; }

.site-header {
	background: #fff;
	position: relative;
	z-index: 50;
}
/* Original: fila de 154px, logo 185×58 fijo, nav a la derecha junto al botón. */
.site-header__row {
	display: flex;
	align-items: center;
	gap: 30px;
	min-height: 154px;
}
.site-header__brand { flex: 0 0 auto; }
.site-header__logo { width: 185px; height: auto; }
.site-header__cta { flex: 0 0 auto; }

/* --- Navegación (medidas exactas del original: centrada entre logo y CTA) --- */
.site-nav { flex: 1 1 auto; display: flex; justify-content: center; }
/* En desktop el panel es transparente (el <ul> se comporta como hijo directo). */
.site-nav__panel { display: contents; }
.site-nav__foot, .nav-backdrop { display: none; }
.site-nav__toggle { display: none; }

.site-nav__menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.site-nav__menu > li {
	position: relative;
	display: flex;
	align-items: center;
}
/* Separador: línea vertical de 2px ciruela (li::after en el original) */
.site-nav__menu > li:not(:last-child)::after {
	content: '';
	border-left: 2px solid #742060;
	height: 16px;
	align-self: center;
}
.site-nav__menu a {
	font-family: var(--sans);
	font-size: 20px;
	font-weight: 400;
	line-height: 20px;
	color: #b2b2b2;
	letter-spacing: normal;
	text-transform: uppercase;
	padding: 13px 15px;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}
.site-nav__menu a:hover,
.site-nav__menu .current-menu-item > a { color: #742060; }

/* Caret de submenú: chevron-down de FontAwesome, como el original */
.submenu-caret {
	background: none;
	border: 0;
	color: #b2b2b2;
	cursor: pointer;
	padding: 2px 15px 2px 0;
	margin-left: -9px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
}
.submenu-caret svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
	display: block;
}
.site-nav__menu > li:hover > .submenu-caret,
.site-nav__menu .current-menu-item > .submenu-caret { color: #742060; }

/* Dropdowns (desktop) — valores exactos del original (elemento 91775b7):
   panel blanco plano (sin borde, sin sombra, sin radio), separado 10px del
   ítem padre, filas divididas por 1px #EEEEEE, hover solo cambia el texto. */
.site-nav__menu .sub-menu {
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	background-clip: padding-box;      /* el borde transparente hace de gap de 10px */
	border: 0;
	border-top: 10px solid transparent;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	z-index: 60;
}
.site-nav__menu .sub-menu li {
	position: relative;
	display: flex;
	align-items: center;
}
.site-nav__menu .sub-menu li:not(:last-child) { border-bottom: 1px solid #eeeeee; }
.site-nav__menu .sub-menu a {
	display: block;
	flex: 0 1 auto; /* el chevron queda pegado al texto, como el original */
	padding: 13px 20px;
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
	color: #b2b2b2;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
}
.site-nav__menu .sub-menu a:hover,
.site-nav__menu .sub-menu .current-menu-item > a { color: var(--plum); background: #fff; }

/* Chevron de ítems con hijos dentro del dropdown: pegado al texto */
.site-nav__menu .sub-menu .submenu-caret {
	margin: 0 0 0 -12px;
	padding: 13px 14px 13px 0;
}
.site-nav__menu .sub-menu li:hover > .submenu-caret { color: var(--plum); }

/* En escritorio el flyout abre a la derecha: la flecha apunta a la derecha (›) */
@media (min-width: 1025px) {
	.site-nav__menu .sub-menu .submenu-caret svg { transform: rotate(-90deg); }
}

/* Tercer nivel: a la derecha, alineado con el ítem padre */
.site-nav__menu .sub-menu .sub-menu {
	top: -10px;
	left: 100%;
}

@media (min-width: 1025px) {
	.site-nav__menu li:hover > .sub-menu,
	.site-nav__menu li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

/* --- Móvil --- */
@media (max-width: 1024px) {
	.site-header__row { min-height: 90px; gap: 16px; }
	.site-header__logo { width: 140px; }
	.site-header__cta { display: none; }

	.site-nav { margin-left: auto; }
	.site-nav__toggle {
		display: block;
		background: none;
		border: 1px solid var(--line);
		padding: 12px 14px;
		cursor: pointer;
	}
	.site-nav__bars,
	.site-nav__bars::before,
	.site-nav__bars::after {
		content: '';
		display: block;
		width: 22px;
		height: 2px;
		background: var(--navy);
		position: relative;
		transition: transform 0.2s ease;
	}
	.site-nav__bars::before { position: absolute; top: -7px; }
	.site-nav__bars::after { position: absolute; top: 7px; }

	/* La hamburguesa se anima a X y queda por encima del drawer/backdrop.
	   Abierto: se fija en la esquina sup-derecha del drawer (fuera de los ítems). */
	.site-nav__toggle { position: relative; z-index: 1002; }
	body.nav-open .site-nav__toggle { position: fixed; top: 22px; right: 20px; border-color: transparent; }
	body.nav-open .site-nav__bars { background: transparent; }
	body.nav-open .site-nav__bars::before { top: 0; transform: rotate(45deg); }
	body.nav-open .site-nav__bars::after { top: 0; transform: rotate(-45deg); }

	/* Drawer deslizante desde la derecha */
	.site-nav__panel {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1000;
		width: min(86vw, 360px);
		height: 100%;
		background: #fff;
		transform: translateX(100%);
		transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
		overflow-y: auto;
		overscroll-behavior: contain;
		box-shadow: -18px 0 44px rgba(0, 30, 50, 0.18);
		padding: 92px 0 24px;
	}
	body.nav-open .site-nav__panel { transform: translateX(0); }
	body.nav-open { overflow: hidden; }

	.nav-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 999;
		background: rgba(0, 22, 38, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}
	body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

	.site-nav__menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		position: static;
		background: none;
		border: 0;
		box-shadow: none;
		padding: 0;
		max-height: none;
		overflow: visible;
	}

	.site-nav__menu > li { flex-wrap: wrap; }
	.site-nav__menu > li:not(:last-child)::after { content: none; }
	.site-nav__menu > li > a { flex: 1 1 auto; padding: 12px 24px; }
	.submenu-caret { padding: 12px 20px; font-size: 16px; }

	.site-nav__menu .sub-menu {
		position: static;
		top: auto;
		left: auto;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		box-shadow: none;
		background: var(--cream);
		min-width: 0;
		flex: 1 1 100%;
	}
	.site-nav__menu li.submenu-open > .sub-menu { display: block; }
	/* Acordeón: el <ul> anidado envuelve a fila completa bajo su ítem (no inline a la derecha) */
	.site-nav__menu .sub-menu li { flex-wrap: wrap; }
	.site-nav__menu .sub-menu a { white-space: normal; padding-left: 40px; }
	.site-nav__menu .sub-menu .sub-menu { background: #f1f1ec; }
	.site-nav__menu .sub-menu .sub-menu a { padding-left: 58px; }

	/* Pie del drawer: CTA de conversión + teléfono */
	.site-nav__foot { display: block; padding: 22px 24px 4px; margin-top: 14px; border-top: 1px solid var(--line); }
	.site-nav__foot .btn { display: block; text-align: center; }
	.site-nav__call { display: block; text-align: center; margin-top: 16px; color: var(--navy); font-weight: 700; font-size: 20px; letter-spacing: 1px; }
	.site-nav__call:hover { color: var(--plum); }

	/* Texto del menú del drawer: más oscuro (legible) que el gris del nav desktop */
	.site-nav__panel .site-nav__menu > li > a { color: #3c464c; }
	.site-nav__panel .site-nav__menu .sub-menu a { color: #566069; }

	/* Topbar en móvil: ocultar el teléfono (ya vive en el pie del drawer); solo idioma + switcher */
	.topbar__phone { display: none; }
	.topbar__row { font-size: 13px; gap: 12px; justify-content: flex-end; }
}

/* Respeta reduce-motion en el drawer */
@media (prefers-reduced-motion: reduce) {
	.site-nav__panel, .nav-backdrop { transition: none; }
}

/* =========================================================
   5. Home — Hero
   ========================================================= */
.home-hero {
	background-size: cover;
	background-position: center 30%;
	min-height: 590px;
	display: flex;
	align-items: center;
}
/* Offsets exactos medidos: script y=54, h1 y=263 (lh 35), h2 y=318 (lh 53), fan y=391 */
.home-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	align-self: flex-start;
	padding-top: 54px;
	padding-bottom: 0;
}
.home-hero__script { width: 380px; max-width: 80vw; margin-bottom: 117px; }
.home-hero__title {
	font-size: 71px;
	font-weight: 300;
	line-height: 35px;
	color: #fff;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.home-hero__subtitle {
	font-family: var(--sans);
	font-size: 53px;
	font-weight: 300;
	color: #fff;
	text-transform: uppercase;
	line-height: 53px;
	margin-bottom: 20px;
}
.home-hero__fan { width: 96px; margin-top: 0; }

@media (max-width: 782px) {
	.home-hero { min-height: 440px; }
	.home-hero__script { margin-bottom: 60px; width: 260px; }
	.home-hero__title { font-size: 40px; }
	.home-hero__subtitle { font-size: 26px; }
}

/* =========================================================
   6. Home — CTA Confianza (banda navy)
   ========================================================= */
/* Banda navy — exacto: la columna derecha lleva design-texture-2 de fondo
   (anclada a la izquierda, contain, sin repetir, a toda la altura); el botón
   tiene fondo blanco 82%; diamantes (design-texture-6) 80px bajo el botón. */
.home-confidence {
	background: var(--navy);
	color: #fff;
	position: relative;
	overflow: hidden;
}
/* Patrón exacto: caja desde el 39,7% del ancho hasta el borde derecho,
   a toda altura, imagen anclada a la izquierda en modo contain */
.home-confidence::before {
	content: '';
	position: absolute;
	left: 39.7%;
	right: 0;
	top: 0;
	bottom: 0;
	background: url('assets/images/texture-navy.png') 0 50% / contain no-repeat;
	pointer-events: none;
}
.home-confidence .wrap { position: relative; z-index: 1; }
.home-confidence__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 70px;
	align-items: stretch;
}
.home-confidence__media {
	border: 0;
	padding: 125px 0 150px;
	max-width: 531px;
	justify-self: end;
}
.home-confidence__media img { width: 531px; max-width: 100%; }
.home-confidence__body {
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 125px 0 150px;
}
.home-confidence .btn { background: rgba(255, 255, 255, 0.82); }
.home-confidence__diamonds { width: 80px; margin-top: 30px; }
.home-confidence__body h2 {
	color: #fff;
	font-size: 52.8px;
	font-weight: 400;
	line-height: 1;
	max-width: 340px;
	margin: 0 auto 26px;
}
.home-confidence__body p {
	font-size: 20px;
	line-height: 28px;
	max-width: 380px;
	margin: 0 auto 14.4px;
	color: #fff;
}
.home-confidence__body .btn { margin-top: 32px; }

@media (max-width: 900px) {
	.home-confidence__grid { grid-template-columns: 1fr; gap: 22px; }
	/* Al apilar, los paddings verticales de cada columna sumaban ~315px de hueco */
	.home-confidence__media { padding: 44px 0 0; max-width: 100%; justify-self: center; }
	.home-confidence__body { padding: 0 0 56px; }
	.home-confidence__body h2 { font-size: 40px; max-width: 100%; }
}

/* =========================================================
   7. Home — Solutions (4 tarjetas verticales)
   ========================================================= */
/* Solutions — exacto: fondo de sección "Blue-Brown-Silk" (cover), tarjetas al
   85% de su columna con brightness 50% → 100% al hover (1s), rótulo blanco +
   ornamento infinito (design-texture-3) superpuestos. */
.home-solutions {
	padding: 78px 0 40px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.home-solutions .section-title { margin-bottom: 40px; }
.home-solutions .section-actions { margin-top: 80px; }
.home-solutions__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	max-width: 960px;
	margin: 0 auto;
}
.sol-card {
	position: relative;
	display: flex;
	justify-content: center;
}
.sol-card__photo {
	width: 85%;
	aspect-ratio: 275 / 600;
	object-fit: cover;
	filter: brightness(50%);
	transition: filter 1s;
}
.sol-card:hover .sol-card__photo { filter: brightness(100%); }
.sol-card__caption {
	position: absolute;
	left: 0;
	right: 0;
	top: 40%;
	text-align: center;
	pointer-events: none;
}
.sol-card__label {
	color: #fff;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
}
.sol-card__swirl {
	width: 72px;
	margin: 6px auto 0;
	filter: brightness(0) invert(1);
}

@media (max-width: 900px) {
	.home-solutions__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.home-solutions__grid { grid-template-columns: 1fr; max-width: 340px; }
}

/* =========================================================
   8. Home — Procedures (4 tarjetas cuadradas)
   ========================================================= */
/* Procedures — exacto: el diamante grande (design-texture-5) de fondo, contain centrado */
.home-procedures {
	padding: 0 0 60px;
	background: url('assets/images/ornament-diamond.png') center center / contain no-repeat;
}
.home-procedures .section-title { margin-bottom: 78px; }
.home-procedures .section-actions { margin-top: 54px; }
.home-procedures__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	max-width: 1050px;
	margin: 0 auto;
}
.proc-card { text-align: center; display: block; }
/* Exacto: brightness 50% (45% en bbl/fillers) → 100% al hover, 1s */
.proc-card img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	filter: brightness(50%);
	transition: filter 1s;
}
.proc-card:hover img { filter: brightness(100%); }
.proc-card__label {
	margin-top: 16px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	color: rgb(116, 30, 96);
}

@media (max-width: 900px) {
	.home-procedures__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.home-procedures__grid { grid-template-columns: 1fr; max-width: 300px; }
}

/* =========================================================
   9. Home — Your Journey
   ========================================================= */
/* Journey — foto de los doctores como fondo (cover, centrada) */
.home-journey {
	padding: 0;
	min-height: 800px;
	display: flex;
	align-items: flex-start;
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
/* Contenedor a todo el ancho como el original (inner 10px + gap 60 entre columnas) */
.home-journey__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 60px;
	width: 100%;
	max-width: 100%;
	padding: 0 10px;
}
.home-journey__body { grid-column: 2; text-align: center; padding-top: 206px; }
/* Ornamento infinito (design-texture-7): centrado 28px bajo el botón */
.home-journey__swirl { width: 70px; margin: 28px auto 0; display: block; }
.home-journey__body h2 {
	font-size: 45px;
	font-weight: 400;
	line-height: 1;
	color: rgb(116, 30, 96);
	margin-bottom: 24px;
	white-space: nowrap;
}
.home-journey__body p {
	font-size: 20px;
	line-height: 28px;
	max-width: 80%; /* medido: el párrafo ocupa ~80% de la columna a cualquier ancho */
	margin: 0 auto 14.4px;
	color: #000;
}
.home-journey__body .btn { margin-top: 8px; }

@media (max-width: 900px) {
	/* La foto de los doctores queda de fondo a toda la sección; el texto va en
	   tarjeta crema centrada encima (legible) dejando ver la imagen alrededor. */
	.home-journey {
		min-height: 0;
		align-items: center;
		background-position: 28% center;
		padding: 54px 0;
	}
	.home-journey__grid { grid-template-columns: 1fr; gap: 0; padding: 0 18px; }
	.home-journey__art { display: none; }
	.home-journey__body {
		grid-column: 1;
		background: rgba(247, 243, 237, 0.72); /* semi-transparente: deja ver la foto de fondo */
		padding: 38px 24px 42px;
		box-shadow: 0 16px 44px rgba(0, 22, 42, 0.3);
	}
	.home-journey__body p { max-width: 100%; }
}
/* Móvil: el h2 de journey tenía white-space:nowrap (fuerza ~574px y descuadra la home). */
@media (max-width: 600px) {
	.home-journey__body h2 { white-space: normal; font-size: 32px; }
}

/* =========================================================
   10. Home — Transformations
   ========================================================= */
/* El divisor previo a Transformations va más pegado en el original */
.home-journey + .divider { padding: 60px 0 20px; }
/* Transforms — el original no lleva fondo (campo SCF opcional por si se quiere) */
.home-transforms {
	padding: 0 0 60px;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}
.home-transforms .section-title { margin-bottom: 30px; }
.home-transforms .section-actions { margin-top: 40px; }
.home-transforms__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	max-width: 990px;
	margin: 0 auto;
	align-items: center;
}
.home-transforms__grid img { border-radius: 40px; }

@media (max-width: 782px) {
	.home-transforms__grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* =========================================================
   11. Home — CTA Financiación
   ========================================================= */
/* Financing — exacto: foto (older-woman) top center / cover; columna de texto
   de 500px con su centro al 22,8% del ancho (medido a 1366/1920/2560) */
.home-financing {
	padding: 80px 0 120px;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}
.home-financing__inner {
	max-width: 500px;
	padding: 10px;
	margin: 0 0 0 calc(22.8% - 250px);
	text-align: center;
}
@media (max-width: 900px) {
	/* Consistente con journey: foto de fondo + tarjeta crema semi-transparente legible */
	.home-financing { padding: 54px 0; background-position: center center; }
	.home-financing__inner {
		margin: 0 18px;
		background: rgba(247, 243, 237, 0.72);
		padding: 38px 24px 42px;
		box-shadow: 0 16px 44px rgba(0, 22, 42, 0.3);
	}
	.home-financing__inner h2 { font-size: 32px; }
}
.home-financing__inner h2 {
	color: rgb(116, 32, 96);
	font-size: 45px;
	font-weight: 400;
	line-height: 1;
	max-width: 480px;
	margin: 0 auto 30px;
}
.home-financing__inner p {
	font-size: 20px;
	line-height: 28px;
	color: #000;
	margin-bottom: 14.4px;
}
.home-financing__inner .btn { margin-top: 30px; }

/* =========================================================
   12. Footer
   ========================================================= */
/* Footer — layout EXACTO del original: 2 columnas sobre navy con textura,
   marca a la izquierda (script 330 + abanico), columna derecha alineada a la
   derecha con CALL (serif 24/500) + botón, menú 17/500, FOLLOW 20 #8C9092 +
   iconos círculo blanco con icono ciruela, copyright 17 blanco. */
/* Fondo exacto del original: textura a la derecha, 39% de ancho, sin repetir */
.site-footer {
	background: var(--navy) url('assets/images/texture-navy.png') 100% 0 / 39% no-repeat;
	color: #fff;
	padding: 70px 0 50px; /* medido: primer widget a 70px, 51px tras el copyright */
}
.site-footer .wrap {
	max-width: 100%;
	padding: 0 80px 0 90px;
	display: grid;
	grid-template-columns: 360px minmax(0, 1fr);
	gap: 40px;
	align-items: center;
}
.site-footer__brand { text-align: center; }
.site-footer__script { width: 330px; max-width: 100%; margin: 0 auto 14px; }
.site-footer__fan { width: 90px; margin: 0 auto; }

.site-footer__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 30px; /* medido: ~30px entre filas (CTA, menú, follow, copyright) */
}
.site-footer__cta {
	display: flex;
	gap: 22px;
	align-items: center;
	flex-wrap: wrap;
}
.site-footer__call {
	font-family: var(--serif);
	color: #fff;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 3px;
	text-transform: uppercase;
}
.site-footer__call:hover { color: #cfd2d4; }
.site-footer .btn { color: #8c9092; border-color: #8c9092; background: rgba(0, 59, 89, 0.72); }

.site-footer__menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}
.site-footer__menu > li { display: flex; align-items: center; }
/* Separador del original: línea 2px sólida #000 de 16px (divider por defecto) */
.site-footer__menu > li:not(:last-child)::after {
	content: '';
	border-left: 2px solid #000;
	height: 16px;
	align-self: center;
}
.site-footer__menu a {
	color: #b2b2b2; /* medido en el original */
	font-size: 17px;
	font-weight: 500;
	line-height: 20px;
	text-transform: uppercase;
	padding: 13px 15px;
}
.site-footer__menu a:hover { color: #8c9092; }
/* Página actual en el menú del footer: gris atenuado #8C9092 (medido; OJO: en el
   HEADER el activo es ciruela, pero en el FOOTER es gris). */
.site-footer__menu .current-menu-item > a,
.site-footer__menu .current_page_item > a { color: #8c9092; }

/* Touch targets cómodos en móvil (WCAG 2.5.8 AA ≥24px; apuntamos a ~44px donde no rompe layout). */
@media (max-width: 900px) {
	.pll-switch a { padding: 10px 4px; }
	.site-nav__toggle { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

.site-footer__social {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.site-footer__follow {
	font-size: 20px;
	font-weight: 400;
	color: #8c9092;
	text-transform: uppercase;
	margin: 0;
}
/* Iconos sociales — exacto: cuadrados 35px blancos, icono navy #004F6E 22px, gap 8px */
.social-icons {
	list-style: none;
	display: flex;
	gap: 8px;
}
.social-icons a {
	color: rgb(0, 79, 110);
	background: #fff;
	display: inline-flex;
	width: 35px;
	height: 35px;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	transition: all 0.25s ease;
}
.social-icons a svg { width: 22px; height: 22px; }
.social-icons a:hover {
	background: rgb(0, 79, 110);
	color: #fff;
}

.site-footer__copy {
	font-size: 17px;
	line-height: 28px;
	color: #fff;
}
.site-footer__copy a { color: #fff; font-weight: 600; text-decoration: none; }
.site-footer__copy a:hover { color: #cfd2d4; }

/* ---- Footer móvil: una columna centrada, jerarquía y touch targets cómodos ---- */
@media (max-width: 900px) {
	.site-footer { padding: 54px 0 40px; }
	.site-footer .wrap { grid-template-columns: 1fr; padding: 0 22px; gap: 32px; text-align: center; }

	.site-footer__script { width: 250px; }
	.site-footer__fan { width: 74px; }

	.site-footer__right { align-items: stretch; gap: 28px; }

	/* CTA: teléfono destacado + botón ancho, apilados y centrados */
	.site-footer__cta { flex-direction: column; gap: 16px; align-items: center; }
	.site-footer__call { font-size: 22px; }
	.site-footer .btn {
		display: block;
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
		padding: 15px 24px;
		color: #dfe3e5;
		border-color: #dfe3e5;
	}

	/* Menú: sin plecas, rejilla de 2 columnas centrada y separada por líneas sutiles */
	.site-footer__nav {
		border-top: 1px solid rgba(255, 255, 255, 0.13);
		border-bottom: 1px solid rgba(255, 255, 255, 0.13);
		padding: 6px 0;
	}
	.site-footer__menu { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
	.site-footer__menu > li { justify-content: center; }
	.site-footer__menu > li::after { content: none !important; }
	.site-footer__menu a { display: block; width: 100%; padding: 14px 8px; font-size: 15px; }

	/* Redes: encabezado + iconos centrados, iconos más grandes (tap) */
	.site-footer__social { flex-direction: column; gap: 14px; justify-content: center; }
	.site-footer__follow { font-size: 15px; letter-spacing: 0.5px; line-height: 1.4; }
	.social-icons { justify-content: center; gap: 10px; }
	.social-icons a { width: 40px; height: 40px; }

	.site-footer__copy { text-align: center; font-size: 15px; }
}

/* =========================================================
   13. Páginas internas — banner + hero fotográfico
   ========================================================= */
/* Banner interno — dos variantes exactas: compacto 190px sin ornamento
   (mayoría de páginas) y alto 280px con comb (contact, liposuction, blog…) */
.page-banner {
	background: var(--navy) url('assets/images/banner-bg.jpg') center / cover;
	min-height: 190px;
	display: flex;
	align-items: center;
	text-align: center;
}
.page-banner--tall { min-height: 280px; }
.page-banner:not(.page-banner--tall) .page-banner__fan { display: none; }
.page-banner .wrap { width: 100%; }
.page-banner__title {
	color: #fff;
	font-size: 74px;
	font-weight: 200;
	line-height: 1;
	text-transform: uppercase;
}
.page-banner__fan { width: 96px; margin: 10px auto 0; }

/* Hero fotográfico — exacto: minHeight 500, H1 80px/400 centrado */
.photo-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	min-height: 500px;
	display: flex;
	align-items: center;
	text-align: center;
}
/* Scrim: garantiza contraste del texto blanco sobre cualquier foto (WCAG) */
.photo-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 22, 38, 0.46), rgba(0, 22, 38, 0.34));
	pointer-events: none;
}
.photo-hero .wrap { position: relative; z-index: 1; width: 100%; }
.photo-hero__title {
	color: #fff;
	font-size: 80px;
	font-weight: 400;
	line-height: 1.11;
	max-width: 1090px;
	margin: 0 auto;
}
.photo-hero__sub {
	color: #fff;
	font-size: 20px;
	line-height: 28px;
	max-width: 830px;
	margin: 18px auto 0;
}

@media (max-width: 782px) {
	.page-banner { min-height: 200px; }
	.page-banner__title { font-size: 40px; }
	.photo-hero { min-height: 340px; }
	.photo-hero__title { font-size: 38px; }
}

/* --- Fixes de auditoría UX móvil (390px) --- */
/* Targets táctiles ≥44px (WCAG 2.5.8). Seguros en cualquier ancho. */
.pagination .page-numbers {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.oml-slides__arrow { width: 44px; height: 44px; }
.oml-slides__dot { padding: 8px; background-clip: content-box; box-sizing: content-box; }
/* Gravity Forms: campos ≥44px de alto y 16px (evita zoom iOS) */
.gform_wrapper input:not([type='submit']):not([type='radio']):not([type='checkbox']):not([type='file']),
.gform_wrapper textarea,
.gform_wrapper select { min-height: 44px; font-size: 16px; }
.gform_wrapper .gform_footer input[type='submit'],
.gform_wrapper .gform_button,
.gform_wrapper .gform_button_select_files { min-height: 44px; }
@media (max-width: 1024px) {
	.site-nav__call { padding: 11px 0; }
	.submenu-caret { min-height: 44px; }
}
@media (max-width: 900px) {
	.site-footer__call { display: inline-block; padding: 6px 0; }
}
/* Títulos grandes (70px, con font-size inline) no deben partir palabras en móvil */
@media (max-width: 560px) {
	.entry .entry-h1,
	.entry h2.ta-c,
	.signup-2col__head h2,
	.ba-teaser .section-title,
	.gallery__intro h2,
	.contact-intro__title { font-size: clamp(30px, 8.5vw, 42px) !important; line-height: 1.15; }
}

/* =========================================================
   14. Contenido (editor de WordPress)
   ========================================================= */
/* Contenido — exacto: columna 1140px, texto 20px/28 negro,
   h2 45/400 #004F6E a la izquierda, h3 32/500 negro, enlaces ciruela 600 */
.page-content { padding: 78px 0 40px; }
.entry { font-size: 20px; line-height: 28px; color: #000; }
.entry p { margin: 0 0 14.4px; }
.entry > * + * { margin-top: 20px; }
.entry h2 {
	font-size: 45px;
	font-weight: 400;
	line-height: 1.2;
	color: rgb(0, 79, 110);
	text-align: left;
	margin-top: 28px;
	margin-bottom: 16px;
}
.entry h3 {
	font-size: 32px;
	font-weight: 500;
	line-height: 1;
	color: #000;
	margin-top: 26px;
	margin-bottom: 14px;
}
.entry h4 { font-size: 24px; font-weight: 500; margin-top: 22px; }
.entry ul, .entry ol { padding-left: 1.4em; margin-bottom: 14.4px; }
.entry li { font-size: 20px; line-height: 28px; }
.entry img { margin: 20px auto; }
.entry blockquote {
	position: relative;
	margin: 28px 0;
	padding-left: 40px;
	color: var(--gray);
	font-family: var(--serif);
	font-style: italic;
	font-size: 24px;
	line-height: 1.4;
}
.entry blockquote::before {
	content: '\201C';
	position: absolute;
	left: 0;
	top: 0.24em;
	font-family: var(--serif);
	font-size: 56px;
	line-height: 1;
	color: var(--gold);
}
.entry a { color: rgb(116, 30, 96); font-weight: 600; text-decoration: none; }
.entry a:hover { text-decoration: underline; }
.entry .btn-row { text-align: center; margin: 30px 0; }
.entry .btn-row.ta-l { text-align: left; }
/* Los botones dentro de contenido conservan el gris del kit (no el ciruela de los enlaces) */
.entry a.btn { color: #8c9092; font-weight: 400; text-decoration: none; }
.entry a.btn:hover { color: #742060; border-color: #742060; text-decoration: none; }
/* Alineaciones capturadas del original */
.entry .ta-c, .entry h2.ta-c, .entry h3.ta-c, .entry p.ta-c { text-align: center; }
/* H1 original dentro del contenido (extraído como h2.entry-h1) */
.entry .entry-h1 { text-align: center; }
/* Espaciadores del original */
.entry .sp { margin: 0 !important; }
/* CTA con ornamento diamante de fondo (Vector-1) — enmarca título+botón */
.entry .cta-ornament {
	background: url('assets/images/ornament-cta.png') center / contain no-repeat;
	padding: 40px 0;
	text-align: center;
	margin: 20px 0;
}
.entry .cta-ornament .btn-row { text-align: center; }
/* Secciones más anchas que la columna estándar (medidas del original) */
.entry .wide {
	width: min(1346px, calc(100vw - 40px));
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.entry .wide[style*='max-width'] { width: auto; margin-left: auto; margin-right: auto; left: auto; transform: none; }
/* El contenido estándar se sembró con max-width:1116px (artefacto de extracción, 117 bloques);
   la columna real de Elementor en prod es 1140 → corregir de una vez sin migrar la BD */
.entry .wide[style*='max-width:1116px'] { max-width: 1140px !important; }
/* Textura decorativa detrás de una sección (p. ej. intro de About) */
.entry .texture-bg { background-position: center top; background-repeat: no-repeat; background-size: contain; }
/* Divisor de línea con rombo dentro del contenido */
.entry .divider-inline { text-align: center; margin: 20px 0; }
.entry .divider-inline img { width: 450px; max-width: 70vw; margin: 0 auto; }
/* Remolinos caligráficos */
.entry img.swirl { width: 120px; margin: 20px auto; display: block; }
.entry img.swirl--sm { width: 72px; }
/* Filas a dos columnas foto|texto (About, Meet the Team) */
.entry .two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-items: center;
	margin: 0 0 40px;
}
.entry .two-col__media { margin: 0; }
.entry .two-col__media img { width: 100%; height: auto; margin: 0; }
.entry .two-col--flip .two-col__media { order: 2; }
.entry .two-col__body h2 { text-align: center; }
@media (max-width: 900px) {
	.entry .two-col { grid-template-columns: 1fr; }
	.entry .two-col--flip .two-col__media { order: 0; }
}
/* About — banda "Meet the Experts": full-bleed min-height 800px con la foto de fondo
   (gente izq / zona clara der, cover/center como prod) y el texto sobre la mitad derecha.
   Scoped a ESTA instancia (no rompe las 27 two-col de Meet the Team ni las demás). */
.entry .two-col:has(.two-col__media img[src*="imagen-doctors-background"]) {
	position: relative;
	width: 100vw;
	margin: 135px 0 168px 50%;   /* prod: 135px de aire arriba / 168px abajo de la banda */
	transform: translateX(-50%);
	min-height: 800px;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}
.entry .two-col:has(.two-col__media img[src*="imagen-doctors-background"]) .two-col__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.entry .two-col:has(.two-col__media img[src*="imagen-doctors-background"]) .two-col__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.entry .two-col:has(.two-col__media img[src*="imagen-doctors-background"]) .two-col__body {
	grid-column: 2;
	position: relative;
	z-index: 1;
	padding: 0 20px;
}
@media (max-width: 900px) {
	.entry .two-col:has(.two-col__media img[src*="imagen-doctors-background"]) {
		position: static; width: auto; margin: 0 0 40px; transform: none;
		min-height: 0; grid-template-columns: 1fr;
	}
	.entry .two-col:has(.two-col__media img[src*="imagen-doctors-background"]) .two-col__media { position: static; }
	.entry .two-col:has(.two-col__media img[src*="imagen-doctors-background"]) .two-col__media img { height: auto; }
	.entry .two-col:has(.two-col__media img[src*="imagen-doctors-background"]) .two-col__body { grid-column: 1; }
}
/* Sección testimonial con vídeo (nanofat, vaginal-rejuvenation): banda beige full-bleed,
   2 columnas (texto izq + vídeo YouTube der) como producción. El auto-embed de WP no
   resuelve en Local → iframe explícito 16:9. */
.entry .vid-testimonial {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	width: 100vw;
	margin: 60px 0 40px 50%;
	transform: translateX(-50%);
	background: url('assets/images/texture-beige.jpg') center / cover no-repeat;
	padding: 80px max(24px, calc(50vw - 570px)); /* beige a sangre, contenido a 1140 centrado */
	box-sizing: border-box;
}
.entry .vid-testimonial__text { text-align: center; }
.entry .vid-testimonial__text h2 { margin: 0 0 6px; }
.entry .vid-testimonial__text .swirl { margin: 14px auto 0; }
.entry .oml-embed { position: relative; width: 100%; padding-top: 56.25%; } /* 16:9 */
.entry .oml-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) {
	.entry .vid-testimonial { grid-template-columns: 1fr; gap: 24px; padding: 50px 24px; }
}
/* Testimonial de TEXTO (p. ej. unwanted-hair): banda beige full-bleed, cita centrada + autor.
   El seeder dejaba un <div.sp> vacío donde iba la cita → se rellena con el testimonio real. */
.entry .text-testimonial {
	width: 100vw;
	margin: 60px 0 40px 50%;
	transform: translateX(-50%);
	background: url('assets/images/texture-beige.jpg') center / cover no-repeat;
	padding: 70px max(24px, calc(50vw - 570px));
	box-sizing: border-box;
	text-align: center;
}
.entry .text-testimonial h2 { margin: 0 0 20px; }
.entry .text-testimonial__quote { font-style: italic; max-width: 900px; margin: 0 auto 16px; font-size: 20px; line-height: 1.6; }
.entry .text-testimonial__author { font-weight: 600; margin: 0 0 10px; }
.entry .text-testimonial .swirl { margin: 8px auto 0; }
@media (max-width: 900px) {
	.entry .text-testimonial { padding: 50px 24px; }
}
/* Serving Omaha — bloque "áreas servidas" final, tras la FAQ (renderizado por page-extras) */
.serving-omaha { padding: 10px 0 70px; text-align: center; }
.serving-omaha__title { font-size: 40px; font-weight: 500; color: #004F6E; margin: 0 0 16px; line-height: 1.15; }
.serving-omaha p { font-size: 20px; line-height: 1.6; max-width: 900px; margin: 0 auto; color: var(--ink); }
/* Lightbox de la galería B&A (como el de Elementor): overlay + prev/next + cerrar */
.oml-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.9); }
.oml-lightbox.is-open { display: flex; }
.oml-lightbox__fig { margin: 0; display: flex; align-items: center; justify-content: center; }
.oml-lightbox__fig img { display: block; max-width: 90vw; max-height: 88vh; width: auto; height: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.oml-lightbox__close { position: absolute; top: 18px; right: 28px; }
.oml-lightbox__close, .oml-lightbox__nav { background: none; border: 0; color: #fff; cursor: pointer; opacity: 0.8; line-height: 1; font-family: var(--sans); }
.oml-lightbox__close { font-size: 46px; }
.oml-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 64px; padding: 10px 22px; }
.oml-lightbox__prev { left: 6px; }
.oml-lightbox__next { right: 6px; }
.oml-lightbox__close:hover, .oml-lightbox__nav:hover { opacity: 1; }
@media (max-width: 600px) {
	.oml-lightbox__nav { font-size: 44px; padding: 8px 12px; }
	.oml-lightbox__close { font-size: 38px; right: 16px; }
}
/* Tarjetas de membresía VIP — medido: 4 col de 259px, foto 259x201,
   título 36/600 negro, precio 20/600, lista 20/400, botón contorno 18px */
.entry .tier-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	max-width: none;     /* fluida: prod escala las tarjetas con el viewport (sin tope fijo) */
	padding: 0 10px;
	margin: 30px auto;
	box-sizing: border-box;
	text-align: center;
}
/* La sección de membresías NO se topa en 1346 como el resto de .wide: escala con el
   viewport (prod: margen lateral fijo 125px → ancho 100vw-250; tarjetas 278@1440 / 398@1920 / 558@2560) */
.entry .wide:has(.tier-grid) { width: calc(100vw - 250px); max-width: none; }
.entry .tier-card { background: url('assets/images/texture-beige.jpg') no-repeat; padding: 0 18px 24px; } /* fondo beige de cada tarjeta (prod) */
.entry .tier-grid img { width: calc(100% + 36px); max-width: none; height: auto; margin: 0 -18px 14px; } /* foto a sangre (anula img{max-width:100%}); alto proporcional ratio ~1.29 como prod (no fijo → no se estira) */
.entry .tier-card__title { font-size: 36px; font-weight: 600; color: #000; margin: 0 0 6px; }
.entry .tier-card__price { font-size: 16px; font-weight: 600; color: #000; margin: 0 0 12px; text-transform: uppercase; }
.entry .tier-card__text { font-size: 17px; line-height: 24px; margin: 0 0 14px; }
.entry .tier-card__list { list-style: none; padding: 0; margin: 0 0 16px; }
.entry .tier-card__list li { padding: 0 0 7.5px; font-size: 16px; line-height: 22px; }
.entry .tier-card__list li:not(:last-child)::after { content: ''; display: block; width: 90%; margin: 7.5px auto 0; border-top: 2px solid #ddd; } /* divisor entre beneficios (prod) */
.entry .tier-card .btn { font-size: 18px; }
.entry .tier-card .btn-row { margin: 10px 0 0; }
@media (max-width: 1024px) {
	.entry .tier-grid { grid-template-columns: repeat(2, 1fr); }
	.entry .wide:has(.tier-grid) { width: min(1346px, calc(100vw - 40px)); } /* en tablet/móvil vuelve al .wide normal (evita márgenes fijos de 125px) */
}
@media (max-width: 560px) {
	.entry .tier-grid { grid-template-columns: 1fr; }
}
/* Sign-up VIP — medido: 2 col (título 70/500 ciruela + remolino | carrusel
   en tarjeta ciruela 433x400, texto blanco 30/700 + 20) */
.entry .signup-2col {
	display: grid;
	/* prod: 2 columnas fluidas (head 46% / carrusel 47%) con hueco; el bloque escala con el viewport */
	grid-template-columns: 46% 47%;
	justify-content: space-between;
	align-items: center;
	/* banda beige a sangre (full-bleed) como producción */
	background: url('assets/images/texture-beige.jpg') center / cover no-repeat;
	width: 100vw;
	max-width: 100vw;
	margin: 40px 0 40px 50%;
	transform: translateX(-50%);
	/* margen lateral = ley de prod (190@1440 · 207@1920 · 229@2560) → contenido ~0.93vw-278 */
	padding: 70px calc(139px + 3.5vw);
	box-sizing: border-box;
}
.entry .signup-2col__head h2 {
	font-size: 70px;
	font-weight: 500;
	line-height: 1.1;
	color: rgb(116, 30, 96);
	text-align: center;
}
.entry .signup-2col__head img.swirl { margin-top: 24px; }
.entry .oml-slides {
	position: relative;
	background: rgb(116, 30, 96);
	color: #fff;
	width: 100%;   /* llena su columna (fluida) → escala con el viewport como prod (470@1440 / 710@1920) */
	min-height: 400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	padding: 40px 48px 56px;
}
.entry .oml-slide { display: none; }
.entry .oml-slide.is-active { display: block; }
.entry .oml-slide h3 { font-size: 30px; font-weight: 700; color: #fff; margin: 0 0 14px; }
.entry .oml-slide p { font-size: 20px; line-height: 28px; color: #fff; margin: 0; }
.entry .oml-slides__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
}
.entry .oml-slides__arrow:hover { color: #fff; }
.entry .oml-slides__arrow--prev { left: 4px; }
.entry .oml-slides__arrow--next { right: 4px; }
.entry .oml-slides__dots {
	position: absolute;
	bottom: 18px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.entry .oml-slides__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
}
.entry .oml-slides__dot.is-active { background: #fff; }
@media (max-width: 1024px) {
	.entry .signup-2col { grid-template-columns: 1fr; gap: 30px; padding: 56px 24px; }
	.entry .oml-slides { width: 100%; max-width: 433px; }
}

/* Carrusel "Real Results From Our Patients" — variante clara del slider (imágenes patient-testimonial-N.jpg) */
.entry .results-slider {
	max-width: 1000px;
	margin: 20px auto 0;
	background: url('assets/images/texture-swirl.png') center 40% / 360px no-repeat;
}
.entry .oml-slides--results {
	background: none;
	color: inherit;
	width: 100%;
	max-width: 860px;
	min-height: 0;
	padding: 10px 56px 40px;
}
.entry .oml-slides--results .oml-slide { text-align: center; }
.entry .oml-slides--results .oml-slide img { width: 100%; max-width: 720px; height: auto; margin: 0 auto; display: block; }
.entry .oml-slides--results .oml-slides__arrow { color: #741e60; }
.entry .oml-slides--results .oml-slides__arrow--prev { left: 0; }
.entry .oml-slides--results .oml-slides__arrow--next { right: 0; }
.entry .oml-slides--results .oml-slides__dots { position: static; margin-top: 18px; }
.entry .oml-slides--results .oml-slides__dot { background: rgba(0, 0, 0, 0.22); }
.entry .oml-slides--results .oml-slides__dot.is-active { background: #741e60; }

/* =========================================================
   15. Extras de página: botones, B&A, FAQ, banda CTA
   ========================================================= */
/* Rejilla de tarjetas flip (procedimientos / soluciones) — exacto: 1077px,
   tarjetas 333x284, gap 39 */
.flip-grid-section { padding: 30px 0 70px; }
.flip-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 39px;
	max-width: 1077px;
	margin: 0 auto;
}
/* Tarjetas planas (zonas del cuerpo): 4 columnas, foto + rótulo DEBAJO
   en mayúsculas oscuras */
.flip-grid--plain { grid-template-columns: repeat(4, 1fr); max-width: 1140px; gap: 30px; }
.flip-grid--plain .flip-card { height: auto; perspective: none; }
.flip-grid--plain .flip-card__inner { transform: none !important; transition: none; }
.flip-grid--plain .flip-card__front {
	position: static;
	background: none;
	padding: 0;
	display: block;
}
.flip-grid--plain .flip-card__front::after { content: none; }
.flip-grid--plain .flip-card__photo-img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	filter: brightness(50%);
	transition: filter 1s;
}
.flip-grid--plain .flip-card:hover .flip-card__photo-img { filter: brightness(100%); }
.flip-grid--plain .flip-card__title {
	position: static;
	color: rgb(116, 30, 96);
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
	text-shadow: none;
	margin-top: 14px;
	display: block;
	text-align: center;
}
.flip-grid--plain .flip-card__back { display: none; }
@media (max-width: 900px) {
	.flip-grid--plain { grid-template-columns: repeat(2, 1fr); }
}
/* Tarjetas overlay (body-solutions) — medido: foto retrato 204x445, rótulo
   blanco 20/400 uppercase centrado SOBRE la foto + remolino 72x17 debajo */
.flip-grid--overlay { grid-template-columns: repeat(4, 1fr); max-width: 1000px; gap: 30px; }
.flip-grid--overlay .flip-card { height: auto; perspective: none; }
.flip-grid--overlay .flip-card__inner { transform: none !important; transition: none; }
.flip-grid--overlay .flip-card__front {
	position: relative;
	inset: auto;
	background: none;
	padding: 0;
	display: block;
}
.flip-grid--overlay .flip-card__front::after { content: none; }
.flip-grid--overlay .flip-card__photo-img {
	width: 100%;
	aspect-ratio: 204 / 445;
	object-fit: cover;
	filter: brightness(50%); /* medido prod: atenuadas en reposo… */
	transition: filter 1s;
}
.flip-grid--overlay .flip-card:hover .flip-card__photo-img { filter: brightness(100%); } /* …y brillan al hover (1s) */
/* Solutions (overlay): el botón "See Options for Men" (the_content) + las tarjetas forman
   una BANDA beige continua, como producción (no el botón sobre blanco con huecos grandes). */
/* El botón (the_content) NO lleva su propio beige: hay UN SOLO fondo continuo, el ::before de la
   sección de tarjetas, EXTENDIDO hacia arriba para cubrir también el botón (prod: ambas secciones
   comparten un mismo contenedor/fondo). El ::before termina 105px antes del borde inferior → las
   tarjetas (en flujo, por encima) SOBRESALEN sobre blanco (medido prod: card 1104-1549). */
.page-content:has(~ .flip-grid-section .flip-grid--overlay) {
	margin-top: 0;
	padding: 44px 0 0;
	position: relative; /* botón por encima del beige */
}
.page-content:has(~ .flip-grid-section .flip-grid--overlay) .entry > * { margin-top: 0; margin-bottom: 0; }
.flip-grid-section:has(.flip-grid--overlay) {
	position: relative;
	padding: 22px 0 0;
}
.flip-grid-section:has(.flip-grid--overlay)::before {
	content: '';
	position: absolute;
	inset: -105px 0 105px 0; /* sube 105px (cubre el botón) y cierra 105px antes del borde (desborde de tarjetas) */
	background: url('assets/images/bkg-beige.jpg') center / cover no-repeat;
	z-index: -1; /* detrás del botón y las tarjetas, sobre el blanco de la página */
}
.flip-grid-section:has(.flip-grid--overlay) > .wrap { position: relative; } /* tarjetas por encima del ::before */
.flip-grid-section:has(.flip-grid--overlay) + .page-buttons {
	margin-top: 60px;
	background: url('assets/images/group-4.png') center / 620px auto no-repeat; /* watermark geométrico tenue tras "More Solutions" (prod) */
	padding: 30px 0 40px;
}
.flip-grid--overlay .flip-card__title {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	color: #fff;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: uppercase;
	text-align: center;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.flip-grid--overlay .flip-card__title::after {
	content: '';
	display: block;
	width: 72px;
	height: 17px;
	margin: 8px auto 0;
	background: url('assets/images/texture-card.png') center / contain no-repeat;
	filter: invert(1) brightness(2);
}
.flip-grid--overlay .flip-card__back { display: none; }
@media (max-width: 900px) {
	.flip-grid--overlay { grid-template-columns: repeat(2, 1fr); }
}
/* Estilo 'fade' — réplica de producción (Elementor flip-box effect-fade):
   front = imagen dark + etiqueta MAYÚS en banda semitransparente; hover = crossfade a bright + banda navy. */
.flip-grid--fade { grid-template-columns: repeat(3, 1fr); max-width: 1000px; gap: 30px; }
.flip-grid--fade .flip-card { height: 300px; perspective: none; position: relative; overflow: hidden; }
.flip-grid--fade .flip-card__inner { transform: none !important; transition: none; }
.flip-grid--fade .flip-card__front,
.flip-grid--fade .flip-card__back {
	position: absolute;
	inset: 0;
	flex-direction: row;
	gap: 0;
	padding: 0;
	backface-visibility: visible;
	transform: none;
	background: center / cover no-repeat;
	transition: opacity 0.5s ease;
}
.flip-grid--fade .flip-card__front::after { content: none; }
.flip-grid--fade .flip-card__back { opacity: 0; }
.flip-grid--fade .flip-card:hover .flip-card__back,
.flip-grid--fade .flip-card:focus-within .flip-card__back { opacity: 1; }
/* La etiqueta y la banda YA vienen incrustadas en las imágenes dark/bright (como producción):
   el título va solo-lectura (accesibilidad) para no duplicar texto sobre la imagen. */
.flip-grid--fade .flip-card__title,
.flip-grid--fade .flip-card__back-title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	background: none;
	text-shadow: none;
}
@media (max-width: 900px) { .flip-grid--fade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .flip-grid--fade { grid-template-columns: 1fr; } }

.flip-card {
	display: block;
	perspective: 1200px;
	height: 320px;
}
.flip-card__inner {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	transition: transform 0.55s ease;
	transform-style: preserve-3d;
}
.flip-card:hover .flip-card__inner,
.flip-card:focus-visible .flip-card__inner { transform: rotateY(180deg); }
.flip-card__front,
.flip-card__back {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	backface-visibility: hidden;
	padding: 24px;
	text-align: center;
}
.flip-card__front {
	background: var(--navy) center / cover no-repeat;
}
.flip-card__front::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 30, 50, 0.28);
}
.flip-card__title {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 26px;
	font-weight: 300;
	letter-spacing: 2px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.flip-card__back {
	background: var(--navy) url('assets/images/texture-navy.png') center / cover;
	color: #fff;
	transform: rotateY(180deg);
}
.flip-card__back-title { font-size: 22px; font-weight: 400; letter-spacing: 1.5px; }
.flip-card__text { font-size: 15px; color: rgba(255, 255, 255, 0.9); }

@media (max-width: 900px) {
	.flip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.flip-grid { grid-template-columns: 1fr; }
	.flip-card { height: 280px; }
}

.page-buttons {
	padding: 10px 0 60px;
	text-align: center;
}
.page-buttons .wrap {
	display: flex;
	gap: 18px;
	justify-content: center;
	flex-wrap: wrap;
}
/* Título del bloque tipo divisor: 25/600 uppercase ciruela con líneas laterales */
.page-buttons__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	font-size: 25px;
	font-weight: 600;
	line-height: 1;
	color: rgb(116, 30, 96);
	text-transform: uppercase;
	margin-bottom: 40px;
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}
.page-buttons__title::before,
.page-buttons__title::after {
	content: '';
	flex: 1 1 auto;
	max-width: 404px;
	border-top: 1px solid var(--line);
}
/* Rejilla de botones rellenos navy (grids "More ... Solutions", ≥4 botones) */
.page-buttons--grid .wrap {
	display: grid;
	grid-template-columns: repeat(3, 400px);
	gap: 18px;
	justify-content: center;
}
.page-buttons--grid .btn {
	background: var(--navy);
	color: #cfd2d4;
	letter-spacing: 0.5px;
	width: 100%;
}
.page-buttons--grid .btn:hover {
	background: #cfd2d4;
	color: var(--plum);
	border-color: var(--plum);
}
@media (max-width: 1280px) {
	.page-buttons--grid .wrap { grid-template-columns: repeat(auto-fit, minmax(280px, 400px)); }
}

/* B&A — medido: DOS columnas iguales de 533px sin hueco (contenido 1066);
   título 70/500 ciruela (480px), botones LADO A LADO de 227px con texto en dos
   líneas y remolino 120x28 debajo; imagen 433px. La sección respira 60px de
   margen + ~190px internos arriba (medido en el original). */
.ba-teaser { margin-top: 60px; padding: 190px 0 60px; background: url('assets/images/texture-beige.jpg') center / cover no-repeat; } /* fondo beige texturizado (prod: GettyImages-…-Elegent-Beige) */
.ba-teaser .wrap {
	max-width: 1066px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: center;
}
.ba-teaser__head { text-align: center; }
.ba-teaser .section-title {
	font-size: 70px;
	font-weight: 500;
	line-height: 1;
	color: rgb(116, 30, 96);
	margin: 0 auto 34px;
	text-align: center;
	max-width: 480px;
}
.ba-teaser .section-actions {
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	gap: 40px;
	margin-top: 0;
}
.ba-teaser .section-actions .btn { max-width: 227px; }
.ba-teaser__swirl { width: 120px; margin: 42px auto 0; display: block; }
.ba-teaser__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	align-items: center;
}
.ba-teaser__grid img { max-width: 433px; margin: 0 auto; }

@media (max-width: 900px) {
	.ba-teaser .wrap { grid-template-columns: 1fr; }
}
/* Móvil: los anchos internos del teaser B&A (título 480px, 2 botones 227px en fila,
   img 433px) no colapsaban y forzaban ~549px de ancho de página. */
@media (max-width: 560px) {
	.ba-teaser { padding: 56px 0 40px; margin-top: 30px; }
	.ba-teaser .section-title { font-size: 38px; max-width: 100%; }
	.ba-teaser .section-actions { flex-direction: column; align-items: center; gap: 16px; }
	.ba-teaser .section-actions .btn { width: 100%; max-width: 280px; }
	.ba-teaser__grid img { max-width: 100%; }
}

/* FAQ — exacto: título 40/600 #742060; lista 792px; filas blancas contiguas
   con SOLO línea inferior 1px #D5D8DC, pregunta 20/400 #014F6E CENTRADA,
   sin icono. */
.faq { padding: 60px 0 80px; background: url('assets/images/group-4.png') top center no-repeat; } /* watermark geométrico Group-4 detrás del FAQ (prod) */
.faq .section-title {
	font-size: 40px;
	font-weight: 600;
	color: rgb(116, 32, 96);
	max-width: 792px;
	margin-left: auto;
	margin-right: auto;
	text-align: center; /* el título va centrado aun cuando las preguntas van a la izquierda */
}
.faq__list { max-width: 792px; margin: 0 auto; }
.faq__item { border: 0; margin: 0; background: #fff; }
.faq__item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: center;
	text-align: center;
	align-items: center;
	gap: 10px;
	padding: 10px;
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	color: rgb(1, 79, 110);
	background: #fff;
	border: 1px solid #d5d8dc; /* caja completa por fila (medido en prod: borde en los 4 lados) */
}
.faq__item + .faq__item summary { border-top: 0; } /* colapsa la costura entre cajas contiguas */
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: rgb(116, 32, 96); }
/* Variante medida en vip-memberships: preguntas a la izquierda, lista 884px */
.faq--left .section-title,
.faq--left .faq__list { max-width: 884px; }
.faq--left .faq__item summary { justify-content: flex-start; text-align: left; }
.faq__answer {
	padding: 12px 10px 16px;
	font-size: 20px;
	line-height: 28px;
	color: #000;
	border: 1px solid #d5d8dc;
	border-top: 0; /* continúa la caja de la pregunta cuando está abierta */
}
.faq__answer > * + * { margin-top: 0.72em; }

/* -------------------------------------------------------------------------
 * Estructura de contenido de POSTS (medido del original Elementor):
 * separadores de sección, acordeón FAQ propio y caja de referencias.
 * ---------------------------------------------------------------------- */
.entry hr.post-sep { border: 0; border-top: 1px solid #000; width: 100%; height: 0; margin: 28px 0; } /* prod: 1px solid negro, full width */

.entry .post-faq { margin: 24px 0; }
.entry .post-faq__title { text-align: left; } /* hereda .entry h2 (45/400 teal) */
.entry .post-faq__item { background: #f1f1f1; margin: 0 0 10px; }
.entry .post-faq__item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 16px;
	line-height: 1.5;
	color: #000;
	text-align: left;
	padding: 16px 20px;
}
.entry .post-faq__item summary::-webkit-details-marker { display: none; }
.entry .post-faq__item summary::before { content: '+'; font-size: 20px; line-height: 1.2; color: #000; flex: none; width: 14px; } /* prod: icono + a la izquierda */
.entry .post-faq__item[open] summary::before { content: '\2212'; } /* − al abrir */
.entry .post-faq__item summary::after { content: '\203A'; margin-left: auto; padding-left: 12px; font-size: 18px; color: #000; flex: none; } /* chevron › a la derecha (prod) */
.entry .post-faq__answer { padding: 0 20px 16px 46px; font-size: 16px; line-height: 1.6; color: #000; }
.entry .post-faq__answer p { font-size: 16px; line-height: 1.6; margin: 0 0 10px; }
.entry .post-faq__answer > * + * { margin-top: 10px; }

.entry .post-refs { background: #cfd0d1; padding: 24px 20px 30px; margin: 24px 0; } /* prod bg #cfd0d1 */
.entry .post-refs__title { font-size: 45px; font-weight: 400; color: #4d4d4d; text-align: center; margin: 0 0 14px; line-height: 1.2; } /* prod 45/400 #4d4d4d centrado */
.entry .post-refs__body { max-width: 800px; margin: 0 auto; }
.entry .post-refs__body p { font-size: 12px; line-height: 1.6; color: #666; margin: 0 0 8px; }
.entry .post-refs__body table { width: 100%; border-collapse: collapse; }

.cta-band {
	background: var(--navy) url('assets/images/texture-navy.png') center / cover;
	color: #fff;
	padding: 70px 0;
	text-align: center;
}
.cta-band__inner { max-width: 640px; }
.cta-band h2 { color: #fff; font-size: 38px; margin-bottom: 18px; }
.cta-band p { color: rgba(255, 255, 255, 0.9); margin-bottom: 12px; }
.cta-band .btn { margin-top: 20px; }

/* =========================================================
   16. Hub (Procedures / Solutions)
   ========================================================= */
.hub-intro {
	padding: 77px 0 30px; /* medido: 110px entre el divisor y el título */
	text-align: center;
	background: url('assets/images/ornament-diamond.png') center 40px / 1300px auto no-repeat;
}
.hub-intro__inner { max-width: 100%; padding: 0 10px; }
.hub-intro__title {
	font-size: 70px;
	font-weight: 400;
	line-height: 1.27;
	color: rgb(0, 79, 110);
	margin-bottom: 22px;
	max-width: 1340px;
	margin-left: auto;
	margin-right: auto;
}
.hub-intro__inner p { color: #000; font-size: 20px; line-height: 28px; max-width: 1340px; margin: 0 auto 14.4px; }
/* Móvil: el título de hub a 70px desbordaba con palabras largas (ES) y forzaba ~472px.
   overflow-wrap defensivo para cualquier palabra larga en encabezados. */
@media (max-width: 600px) {
	.hub-intro { padding: 44px 0 20px; }
	.hub-intro__title { font-size: 34px; }
	h1, h2, h3, .section-title, .hub-intro__title, .page-banner__title { overflow-wrap: break-word; }
}

.hub-band { padding: 26px 0 34px; text-align: center; }
.hub-band__photo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 380px;
	background: var(--navy) center / cover no-repeat;
	position: relative;
}
.hub-band__photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 30, 50, 0.22);
	transition: background 0.3s ease;
}
.hub-band__photo:hover::after { background: rgba(0, 30, 50, 0.38); }
.hub-band__title {
	color: #fff;
	font-size: 52px;
	font-weight: 300;
	letter-spacing: 3px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
	position: relative;
	z-index: 1;
}
.hub-band__underline {
	width: 150px;
	margin-top: 10px;
	filter: invert(1) brightness(2);
	position: relative;
	z-index: 1;
}
.hub-band__text {
	color: #fff;
	max-width: 560px;
	position: relative;
	z-index: 1;
	margin-top: 12px;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.hub-band .section-actions { margin-top: 30px; }
.hub-band__arcs { width: 90px; margin: 26px auto 0; opacity: 0.6; }
/* La última banda respira ~210px antes del footer (medido) */
.hub-band:last-of-type { padding-bottom: 190px; }

@media (max-width: 782px) {
	.hub-band__photo { min-height: 260px; }
	.hub-band__title { font-size: 34px; }
}

/* =========================================================
   17. Galería B&A
   ========================================================= */
/* Galería — exacto: intro 70px centrado, rejilla 3 col gap 10, 16:9 cover.
   El banner respira 168px hasta el H1 (medido). */
.gallery { padding: 146px 0 90px; }
.gallery__intro { margin-bottom: 50px; text-align: center; }
/* Pestañas de filtro — medido: 20/600 uppercase negro, pad 7/14, activo ciruela */
.gallery__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 0 30px;
}
.gallery__tab {
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	color: #000;
	padding: 7px 14px;
	transition: color 0.2s ease;
}
.gallery__tab:hover,
.gallery__tab.is-active { color: rgb(116, 30, 96); }
.gallery__item.is-hidden { display: none; }
.gallery__intro h2 {
	font-size: 70px;
	font-weight: 400;
	line-height: 1.27;
	color: rgb(0, 79, 110);
	text-align: center;
	max-width: 1060px;
	margin: 0 auto 20px;
}
.gallery__intro p { text-align: center; }
.gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.gallery__item a { display: block; }
.gallery__item img {
	width: 100%;
	aspect-ratio: 365 / 205;
	object-fit: cover;
}
.gallery__item figcaption {
	font-size: 14px;
	color: var(--gray);
	text-align: center;
	padding-top: 8px;
}

@media (max-width: 900px) {
	.gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.gallery__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   18. Contacto
   ========================================================= */
/* Intro — medido: col 1131px, padding 72/0/50, marca de agua arriba-centro,
   línea 450px → H1 70 azul → H2 45 ciruela → p 724 → botón, todo con gap 20 */
.contact-intro { padding: 0 10px; text-align: center; }
.contact-intro__inner {
	max-width: 1131px;
	margin: 0 auto;
	padding: 72px 0 50px;
	background: url('assets/images/ornament-watermark.png') top center no-repeat;
}
.contact-intro .divider { padding: 0 0 72px; }
.contact-intro__title {
	font-size: 70px;
	font-weight: 400;
	line-height: 1.27;
	color: rgb(0, 79, 110);
	margin: 0 0 20px;
}
.contact-intro__sub {
	color: rgb(116, 30, 96);
	font-size: 45px;
	font-weight: 400;
	line-height: 1;
	margin: 0 0 20px;
}
.contact-intro__inner p { color: #000; font-size: 20px; line-height: 28px; max-width: 724px; margin: 0 auto 20px; }
.contact-intro__btn { margin: 0 0 20px; }

.contact-form { padding: 40px 10px 60px; }
.contact-form__inner { max-width: 729px; margin: 0 auto; }

/* Info — medido: 3 columnas de 352px, foto 282px centrada en vertical,
   remolino 120x28 bajo el teléfono y bajo la dirección */
.contact-info { padding: 100px 10px; }
.contact-info__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	max-width: 1066px;
	margin: 0 auto;
	align-items: stretch;
}
.contact-info__col { text-align: center; padding: 10px; }
.contact-info__col--photo {
	display: flex;
	align-items: center;
	justify-content: center;
}
.contact-info__col h2 {
	font-size: 45px;
	font-weight: 400;
	line-height: 1;
	color: rgb(116, 30, 96);
	margin-bottom: 20px;
}
.contact-info__col p { color: #000; font-size: 20px; line-height: 28px; margin-bottom: 20px; }
.contact-info__col .btn { margin-top: 0; }
.contact-info__swirl { display: block; width: 120px; height: auto; margin: 20px auto 0; }
.contact-info__photo { width: 282px; height: auto; margin: 0 auto; }
@media (max-width: 900px) {
	.contact-info__grid { grid-template-columns: 1fr; gap: 46px; }
	.contact-intro__title { font-size: 44px; }
}

/* =========================================================
   19. Blog
   ========================================================= */
/* Blog — exacto: lista 1 col (708px) + sidebar (492px), tarjeta con imagen
   ancha, meta 16 #8C9092, título 30/500 negro, extracto 20/34 */
.blog-list { padding: 60px 0 90px; }
.blog-list__layout {
	display: grid;
	grid-template-columns: 708px minmax(0, 1fr);
	gap: 0 30px;
	align-items: start;
}
.blog-list__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 50px 30px;
	padding-right: 45px;
}
/* Tarjeta con caja blanca bordeada, badge de categoría sobre la imagen,
   READ MORE serif ciruela y fecha al pie tras una línea (como el original) */
.blog-card { background: #fff; border: 1px solid #e3e3e3; position: relative; }
.blog-card__link { display: block; color: inherit; }
.blog-card__thumb { margin-bottom: 0; position: relative; }
.blog-card__thumb img {
	width: 100%;
	aspect-ratio: 664 / 448;
	object-fit: cover;
}
.blog-card__cat {
	position: absolute;
	top: 14px;
	right: 14px;
	background: rgb(116, 30, 96);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 14px;
}
.blog-card__body { padding: 24px 28px 18px; }
.blog-card__title {
	font-size: 30px;
	font-weight: 500;
	line-height: 36px;
	color: #000;
	margin: 0 0 25px;
}
.blog-card__excerpt { font-size: 17px; line-height: 1.5; color: #000; margin-bottom: 18px; } /* medido prod: 17/25.5 negro */
.blog-card__more {
	font-family: var(--serif);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: rgb(116, 30, 96);
	display: inline-block;
	margin-bottom: 18px;
} /* medido prod: 18/600/0.5px, "Read More" (sin uppercase) */
.blog-card__date {
	display: block;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	color: rgb(140, 144, 146);
	border-top: 1px solid #e9e9e9;
	padding: 14px 0 4px;
}

/* Sidebar del blog — exacto: títulos 22/500 #004F6E, enlaces 20 negro */
.blog-sidebar { padding: 10px 0 0 10px; }
.blog-sidebar__widget { margin-bottom: 40px; }
.blog-sidebar__divider {
	display: flex;
	justify-content: center;
	padding: 0 0 22px;
}
.blog-sidebar__divider img { width: 300px; height: auto; }
.blog-sidebar__title {
	font-family: var(--sans);
	font-size: 22px;
	font-weight: 500;
	color: rgb(0, 79, 110);
	margin-bottom: 14px;
}
.blog-sidebar ul { list-style: disc; padding-left: 58px; color: #9a9a9a; }
.blog-sidebar li { padding-bottom: 0; line-height: 28px; }
.blog-sidebar a {
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	color: #000;
}
.blog-sidebar a:hover { color: rgb(116, 30, 96); }

/* Paginación: números completos centrados, actual en ciruela */
.pagination {
	display: flex;
	gap: 10px 14px;
	margin-top: 50px;
	flex-wrap: wrap;
	justify-content: center;
}
.pagination .page-numbers {
	display: inline-block;
	color: #000;
	font-size: 20px;
	padding: 4px 6px;
}
.pagination .page-numbers.current { font-weight: 600; color: rgb(116, 30, 96); }
.pagination .page-numbers:hover { color: rgb(116, 30, 96); }

/* Post — exacto: título 54/400 negro centrado lh65, contenido 1140,
   nav prev/next 20/600 ciruela */
.post-single { padding: 60px 0 90px; }
.post-single__meta {
	text-align: left;
	font-size: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #000;
	margin-bottom: 12px;
}
.post-single__title {
	font-size: 54px;
	font-weight: 400;
	line-height: 65px;
	color: #000;
	text-align: center;
	margin-bottom: 34px;
}
/* CTA final del post (plantilla single del original) — con ornamento
   geométrico de fondo (Vector-1.png, medido: centrado / contain) */
.post-cta {
	text-align: center;
	margin-top: 70px;
	padding: 40px 0;
	background: url('assets/images/ornament-cta.png') center / contain no-repeat;
}
.post-cta h2 {
	font-size: 45px;
	font-weight: 400;
	line-height: 1.15;
	color: rgb(0, 79, 110);
	margin-bottom: 20px;
}
.post-cta p { font-size: 20px; line-height: 28px; color: #000; margin-bottom: 14.4px; }
.post-cta .btn { margin-top: 24px; }
/* Contenido de post: imágenes al margen izquierdo y caption itálica (medido) */
.post-single .entry img { margin: 0 0 20px; }
.entry figure { margin: 0 0 20px; }
.entry figcaption {
	font-size: 16px;
	font-style: italic;
	color: #333;
	text-align: left;
	margin-bottom: 16px;
}

/* Prev/next — medido: dos columnas, etiqueta PREVIOUS/NEXT uppercase 16px
   ARRIBA del título, título 20px ciruela debajo, SIN línea superior ni divisor */
.post-single__nav {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	margin-top: 56px;
}
.post-single__nav a { color: rgb(116, 30, 96); display: block; }
.post-single__nav a:hover { text-decoration: underline; }
.post-single__nav .nav-label {
	display: block;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 6px;
}
.post-single__nav .nav-title { display: block; font-size: 20px; line-height: 1.4; }
.post-single__prev, .post-single__next { max-width: 46%; }
.post-single__next { text-align: right; }

@media (max-width: 1024px) {
	.blog-list__layout { grid-template-columns: 1fr; }
	.blog-list__grid { padding-right: 0; }
}
@media (max-width: 600px) {
	.post-single__title { font-size: 32px; line-height: 1.25; }
}

/* =========================================================
   20. Formularios (Gravity Forms / genérico)
   ========================================================= */
.contact-form input[type='text'],
.contact-form input[type='email'],
.contact-form input[type='tel'],
.contact-form textarea,
.contact-form select,
.entry input[type='text'],
.entry input[type='email'],
.entry input[type='tel'],
.entry textarea {
	width: 100%;
	border: 1px solid var(--line);
	background: #fff;
	padding: 13px 15px;
	font-family: var(--sans);
	font-size: 16px;
	color: var(--ink);
}
.contact-form input:focus,
.contact-form textarea:focus {
	outline: 2px solid var(--navy);
	outline-offset: 0;
}
.contact-form input[type='submit'],
.contact-form button[type='submit'] {
	background: var(--navy);
	color: #fff;
	border: 1px solid var(--navy);
	padding: 14px 34px;
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 3px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease;
}
.contact-form input[type='submit']:hover,
.contact-form button[type='submit']:hover { background: var(--navy-2); }