html {
	overflow-x: hidden;
}

/*
 * El encabezado del sitio (logo + menu) lo genera el tema con fondo blanco
 * por defecto -- se ve desconectado del resto, que es oscuro. Se sobreescribe
 * aqui para que combine con la marca (mismo negro del hero).
 */
/* El header queda fijo (sticky) arriba de todo -- sin esto, saltar a un
   ancla como #booking (ej. desde "Reservar" en el catalogo) deja la
   seccion tapada debajo del header en vez de visible. */
#booking,
#tratamientos,
#catalogo,
#catalogo-lista {
	scroll-margin-top: 110px;
}

.site-header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 999;
	background: linear-gradient(180deg, rgba(18, 10, 16, 0.94), rgba(10, 8, 11, 0.88));
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: none;
	/* Filo inferior en degradado magenta-dorado en vez de una linea blanca
	   plana -- una sola pincelada de color que hace que todo el encabezado
	   se sienta mas vivo sin recargarlo. */
	box-shadow: 0 1px 0 0 rgba(240, 0, 168, 0.35), 0 12px 30px -18px rgba(240, 0, 168, 0.45);
	position: relative;
}

.site-header.wp-block-template-part::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(240, 0, 168, 0.75) 20%, rgba(215, 166, 83, 0.85) 50%, rgba(240, 0, 168, 0.75) 80%, transparent);
}

.site-header .wp-block-group.hostinger-ai-menu {
	background-color: transparent !important;
}

.site-header .hostinger-ai-menu-wrapper {
	padding-top: 22px !important;
	padding-bottom: 22px !important;
	transition: padding 0.3s ease;
}

.site-header.dvz-scrolled .hostinger-ai-menu-wrapper {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

.site-header .wp-block-site-logo img {
	transition: width 0.3s ease, height 0.3s ease, filter 0.3s ease;
	filter: drop-shadow(0 0 14px rgba(240, 0, 168, 0.45));
}

.site-header.dvz-scrolled .wp-block-site-logo img {
	width: 52px !important;
	height: auto !important;
}

.site-header .wp-block-site-title a,
.site-header .hostinger-ai-site-title a {
	color: #F5F1EC !important;
}

/* Texto de marca junto al isotipo -- el logo solo no se lee bien en chico.
   Apilado en dos lineas (DIVAZZA arriba, Stetique abajo mas chico), en vez
   de en linea, para que se lea como un wordmark de marca real. */
.dvz-site-wordmark {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	margin-left: 14px;
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: 1.08rem;
	line-height: 1.15;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: font-size 0.3s ease;
	/* "DIVAZZA" con el mismo degradado magenta-dorado de marca en vez de
	   blanco plano -- "Stetique" (el <em> de abajo) tiene su propio color
	   fijo, asi que no hereda este degradado. */
	background: linear-gradient(135deg, var(--dvz-magenta, #F000A8), var(--dvz-champagne, #D7A653));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.dvz-site-wordmark em {
	font-style: normal;
	font-weight: 300;
	font-size: 0.58em;
	color: #C9C3C5;
	/* Contrarresta el -webkit-text-fill-color:transparent del padre (el
	   degradado de "DIVAZZA") -- sin esto "Stetique" se volveria invisible
	   en Chrome/Safari, que priorizan text-fill-color sobre color. */
	-webkit-text-fill-color: #C9C3C5;
	letter-spacing: 0.24em;
}

.site-header.dvz-scrolled .dvz-site-wordmark {
	font-size: 0.82rem;
}

@media (max-width: 640px) {
	.dvz-site-wordmark {
		display: none;
	}
}

.site-header .hostinger-ai-site-navigation-wrapper a,
.site-header nav a {
	position: relative;
	color: #E0C650 !important;
	text-shadow: 0 0 14px rgba(224, 198, 80, 0.35);
	border-color: transparent !important;
	font-weight: 600;
	font-size: 1.12rem;
	letter-spacing: 0.01em;
	padding-bottom: 3px !important;
}

/* "Reservas" es la accion que mas nos interesa que se note en el menu --
   un brillo que respira (destella) mas una chispa que gira a un costado,
   para que llame la atencion sin ser un boton aparte que vuelva a romper
   el menu de una sola linea. Se desactiva con prefers-reduced-motion. */
.site-header .hostinger-ai-site-navigation-wrapper a[href*="/reservas/" i],
.site-header nav a[href*="/reservas/" i] {
	color: var(--dvz-champagne, #D7A653) !important;
	animation: dvz-reservas-glow 2.4s ease-in-out infinite;
}

.site-header .hostinger-ai-site-navigation-wrapper a[href*="/reservas/" i]::before,
.site-header nav a[href*="/reservas/" i]::before {
	content: "✦";
	display: inline-block;
	margin-right: 5px;
	font-size: 0.8em;
	animation: dvz-reservas-spin 3.2s linear infinite;
}

@keyframes dvz-reservas-glow {
	0%, 100% { text-shadow: 0 0 10px rgba(215, 166, 83, 0.45); }
	50% { text-shadow: 0 0 20px rgba(240, 0, 168, 0.85), 0 0 32px rgba(215, 166, 83, 0.7); }
}

@keyframes dvz-reservas-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.site-header .hostinger-ai-site-navigation-wrapper a[href*="/reservas/" i],
	.site-header nav a[href*="/reservas/" i],
	.site-header .hostinger-ai-site-navigation-wrapper a[href*="/reservas/" i]::before,
	.site-header nav a[href*="/reservas/" i]::before {
		animation: none;
	}
}

/* El menu real ya trae 6 enlaces (Inicio, Tratamientos y Promociones se
   suman por JS a los que ya existian). Se acorta el espacio entre enlaces
   para ayudar a que quepan en una sola linea -- sin forzar "nowrap", que
   en una pantalla angosta desbordaria el header en vez de bajar a una
   segunda linea con normalidad. */
.site-header .hostinger-ai-site-navigation-wrapper ul,
.site-header nav ul {
	column-gap: 18px !important;
	row-gap: 6px !important;
}

/* Subrayado en degradado que crece desde el centro al pasar el mouse (o en
   el enlace activo), en vez de un simple cambio de color -- le da algo de
   movimiento al menu sin exagerar. */
.site-header .hostinger-ai-site-navigation-wrapper a::after,
.site-header nav a::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--dvz-magenta, #F000A8), var(--dvz-gold, #D7A653));
	border-radius: 2px;
	opacity: 0;
	transition: left 0.25s ease, right 0.25s ease, opacity 0.25s ease;
}

.site-header .hostinger-ai-site-navigation-wrapper a:hover,
.site-header nav a:hover,
.site-header nav a[aria-current="page"] {
	color: #FF6FC7 !important;
	border-color: transparent !important;
}

.site-header .hostinger-ai-site-navigation-wrapper a:hover::after,
.site-header nav a:hover::after,
.site-header nav a[aria-current="page"]::after {
	left: 0;
	right: 0;
	opacity: 1;
}

/* =========================================================
   Menu movil: WordPress ya trae su propio sistema de menu
   hamburguesa (boton "abrir menu" + panel), pero solo lo activa
   por debajo de 600px -- con 6 enlaces (los 4 del menu real mas
   Tratamientos y Promociones, que se suman por JS) esa franja se
   desborda en telefonos grandes en horizontal o tablets chicas
   (600-900px), que es exactamente el "no entra en la pantalla"
   reportado. Se extiende el rango "movil" hasta 900px forzando la
   hamburguesa, y se redisena el panel que abre para que combine con
   la marca -- por defecto WordPress lo pinta blanco liso.

   IMPORTANTE: TODO esto va dentro de este unico @media. La primera
   vez se filtraron estos estilos sin la media query y el menu
   vertical de movil se veia tambien en escritorio (encima del hero,
   siempre abierto) -- el bloque .wp-block-navigation__responsive-*
   existe en el DOM en todas las pantallas, WordPress solo decide si
   se ve en linea (escritorio) o como panel (movil) por CSS propio;
   sin la media query, nuestros estilos de "panel movil" ganaban
   tambien en escritorio.
   ========================================================= */
@media (max-width: 900px) {
	.site-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 36px;
		height: 36px;
		color: var(--dvz-gold, #D7A653);
		border-radius: 6px;
		background-image: linear-gradient(currentColor, currentColor);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 20px 2px;
		transition: background-color 0.2s ease;
	}

	/* El icono nativo de WordPress trae solo 2 barras -- se oculta y se
	   dibuja una hamburguesa clasica de 3 lineas: la del medio es el
	   background-image de arriba, estas dos son las de arriba/abajo. */
	.site-header .wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	.site-header .wp-block-navigation__responsive-container-open::before,
	.site-header .wp-block-navigation__responsive-container-open::after {
		content: "";
		position: absolute;
		left: 8px;
		right: 8px;
		height: 2px;
		background: currentColor;
	}

	.site-header .wp-block-navigation__responsive-container-open::before {
		top: 11px;
	}

	.site-header .wp-block-navigation__responsive-container-open::after {
		bottom: 11px;
	}

	.site-header .wp-block-navigation__responsive-container-open:hover,
	.site-header .wp-block-navigation__responsive-container-open:focus-visible {
		background-color: rgba(215, 166, 83, 0.12);
		outline: none;
	}

	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	/* Cuando esta abierto, se fuerza explicitamente a que sea una capa fija
	   cubriendo toda la pantalla (en vez de confiar solo en el CSS nativo de
	   WordPress) -- sin esto el panel podia terminar empujando el resto del
	   contenido hacia abajo en vez de superponerse, que es como se reporto
	   que se veia "mal, listado por debajo". */
	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		inset: 0 !important;
		z-index: 100000 !important;
	}

	/* El "backdrop-filter: blur" del header (.site-header) crea sin
	   querer un nuevo "contenedor" para sus descendientes en position:fixed
	   -- en vez de medirse contra toda la pantalla, el menu terminaba
	   midiendose solo contra el tamaño del propio header (una franja
	   angosta arriba), por eso se veia como una cajita opaca en vez de
	   cubrir todo. Se apaga el blur solo mientras el menu esta abierto
	   (:has() cubre navegadores modernos; la clase es respaldo via JS para
	   los que no lo soporten). */
	.site-header:has(.wp-block-navigation__responsive-container.is-menu-open),
	.site-header.dvz-nav-open {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	.site-header .wp-block-navigation__responsive-container-close svg {
		width: 24px;
		height: 24px;
	}

	.site-header .wp-block-navigation__responsive-container-close {
		color: var(--dvz-gold, #D7A653);
		width: 36px;
		height: 36px;
		top: 18px !important;
		right: 18px !important;
		border-radius: 6px;
	}

	.site-header .wp-block-navigation__responsive-container-close:hover,
	.site-header .wp-block-navigation__responsive-container-close:focus-visible {
		background: rgba(215, 166, 83, 0.12);
		outline: none;
	}

	.site-header .wp-block-navigation__responsive-container-content {
		padding: 72px 24px 24px !important;
	}

	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		gap: 2px;
		max-width: 280px;
	}

	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		border-bottom: 1px solid rgba(215, 166, 83, 0.14);
	}

	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item:last-child {
		border-bottom: none;
	}

	/* Compacto y elegante: letras chicas y padding ajustado -- la version
	   anterior (1.5rem, mucho relleno) se sentia demasiado grande para un
	   menu de telefono. */
	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		display: block;
		padding: 11px 4px !important;
		font-family: "Playfair Display", serif;
		font-style: italic;
		font-weight: 400 !important;
		font-size: 1.02rem !important;
		letter-spacing: normal !important;
		transition: color 0.2s ease, padding-left 0.2s ease;
	}

	/* Version anterior le ponia el color solo al enlace, o solo al <span>
	   del texto -- en ambos casos algo mas seguia ganando (el resplandor
	   dorado pensado para el menu de escritorio, o un estilo propio de
	   WordPress en el <span>), y el texto quedaba invisible/borroso en los
	   enlaces que no eran ni la pagina actual ni "Reservas". El selector
	   universal (* ) de aqui en mas cubre CUALQUIER elemento anidado
	   adentro del enlace -- span, texto, lo que sea -- sin tener que saber
	   de antemano la estructura exacta que arma WordPress. */
	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content,
	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content * {
		color: #F5F1EC !important;
		text-shadow: none !important;
		opacity: 1 !important;
	}

	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover,
	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover *,
	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content[aria-current="page"],
	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content[aria-current="page"] * {
		color: var(--dvz-gold, #D7A653) !important;
	}

	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content[aria-current="page"] {
		padding-left: 10px !important;
	}
}

.site-header .wp-block-navigation__responsive-container.is-menu-open {
	background: linear-gradient(165deg, #14101a, #0a0810) !important;
}

/*
 * El tema pone un titulo automatico de pagina (ej. "Reservas") en una franja
 * blanca entre el header y el contenido -- redundante, porque cada seccion
 * ya trae su propio titulo dentro del hero oscuro. Se oculta en todas las
 * paginas normales (no afecta Inicio, que usa la plantilla de portada y no
 * lo muestra).
 */
.hostinger-ai-page-title.wp-block-post-title {
	display: none;
}

/* No basta con ocultar el titulo -- la caja que lo envuelve seguia ocupando
   espacio (y ese hueco se veia blanco). Se oculta la caja completa. */
.wp-block-group:has(> .hostinger-ai-page-title) {
	display: none !important;
}

/* Respaldo sin :has() (por si algun navegador movil no lo soporta bien):
   esa caja del titulo es siempre el primer y unico ".wp-block-group" hijo
   directo de <main> -- el contenido real de la pagina usa la clase
   "entry-content"/"wp-block-post-content", nunca "wp-block-group" a secas,
   asi que esto no puede ocultar nada que si deberia verse. */
main.wp-block-group > .wp-block-group {
	display: none !important;
}

/* Aun asi, en celular quedaba una franja blanca fina justo debajo del
   header, antes de que empiece la primera seccion oscura -- por si el
   "main"/"entry-content" del tema trae su propio margen/padding superior
   ademas del titulo ya ocultado arriba, se fuerza a cero directamente,
   asegurando que no quede ningun hueco entre el header y el contenido. */
main.wp-block-group,
.entry-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* El tema pone 40px de margen arriba a cada bloque dentro del contenido por
   defecto (blockGap) -- ese espacio vacio entre secciones se ve como una
   franja blanca, ya que no hay nada oscuro rellenandolo. Se anula solo en
   nuestras secciones, que ya manejan su propio espaciado interno. */
.entry-content > .dvz-section.alignfull,
.entry-content > .dvz-trustbar.alignfull {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/*
 * El pie de pagina del tema viene en un verde que no es de la marca. Se
 * cambia a negro (igual que el resto del sitio) con un acento dorado en los
 * titulos de columna, para que se sienta premium sin competir con el
 * magenta/cian que ya usamos para las llamadas a la accion.
 */
.site-footer.wp-block-template-part,
.site-footer .has-color-2-background-color {
	background-color: #0A0910 !important;
}

.site-footer h3,
.site-footer .wp-block-heading {
	color: #F000A8 !important;
}

.site-footer a {
	color: #F5F1EC !important;
}

.site-footer a:hover {
	color: #D7A653 !important;
}

/* Indicador de "seguir bajando" en los heroes -- antes era un simple trazo
   en ::after: apenas visible y sin poder darle clic (pointer-events: none).
   Ahora es un boton real (insertado por JS en site.js, appendChild a
   document.body -- NO al propio .dvz-hero) que ademas lleva directo a la
   siguiente seccion de la pagina.

   Fixed (viewport) en vez de absolute (relativo al hero) en TODOS los
   tamaños de pantalla, y por eso vive en <body>, no dentro de .dvz-hero:
   .dvz-hero tiene overflow:hidden (para contener el zoom del fondo del
   hero) y ese overflow recorta cualquier descendiente position:fixed que
   quede fuera del area visible de esa caja -- exactamente el mismo bug que
   tapaba el boton de musica. site.js agrega "is-out-of-view" (mas abajo)
   apenas se deja de ver el hero de origen, para que no siga flotando fuera
   de contexto en el resto de la pagina -- eso reemplaza el "se aleja solo
   al hacer scroll" que el viejo position:absolute daba gratis. */
.dvz-hero-scroll-cue {
	position: fixed;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(215, 166, 83, 0.18);
	border: 1px solid rgba(215, 166, 83, 0.65);
	color: var(--dvz-gold, #D7A653);
	text-decoration: none;
	z-index: 9997;
	opacity: 1;
	transition: background 0.2s ease, border-color 0.2s ease, opacity 0.3s ease;
	animation: dvz-hero-cue-bounce 1.8s ease-in-out infinite, dvz-hero-cue-glow 2.4s ease-in-out infinite;
}

.dvz-hero-scroll-cue.is-out-of-view {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 900px) {
	.dvz-hero-scroll-cue {
		bottom: 20px;
		left: 20px;
		transform: none;
	}
}

.dvz-hero-scroll-cue svg {
	width: 20px;
	height: 20px;
}

.dvz-hero-scroll-cue:hover,
.dvz-hero-scroll-cue:focus-visible {
	background: rgba(215, 166, 83, 0.32);
	border-color: var(--dvz-gold, #D7A653);
}

@keyframes dvz-hero-cue-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(9px); }
}

@keyframes dvz-hero-cue-glow {
	0%, 100% { box-shadow: 0 0 0 rgba(215, 166, 83, 0); }
	50% { box-shadow: 0 0 22px rgba(215, 166, 83, 0.6); }
}

@media (prefers-reduced-motion: reduce) {
	.dvz-hero-scroll-cue {
		animation: none;
	}
}

.dvz-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.dvz-reveal.is-visible {
	opacity: 1;
	transform: none;
}

.dvz-grid .dvz-reveal:nth-child(2) { transition-delay: 0.08s; }
.dvz-grid .dvz-reveal:nth-child(3) { transition-delay: 0.16s; }
.dvz-grid .dvz-reveal:nth-child(4) { transition-delay: 0.24s; }
.dvz-grid .dvz-reveal:nth-child(5) { transition-delay: 0.32s; }

.dvz-tech-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 22px;
}

.dvz-tech-badge {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	min-height: 32px;
	border-radius: 999px;
	border: 1px solid var(--dvz-gold, #D7A653);
	background: rgba(215, 166, 83, 0.06);
	color: var(--dvz-gold, #D7A653);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.dvz-tech-badge:hover {
	background: var(--dvz-gold, #D7A653);
	color: #2B1E10;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -8px rgba(215, 166, 83, 0.6);
}

/* Cian = firma secundaria de Area Caballeros: en esas paginas las insignias
   de tecnologia usan cian en vez del dorado generico del resto del sitio. */
.dvz-hombres .dvz-tech-badge {
	border-color: var(--dvz-cyan, #22CDE7);
	background: rgba(var(--dvz-cyan-rgb), 0.06);
	color: var(--dvz-cyan, #22CDE7);
}

.dvz-hombres .dvz-tech-badge:hover {
	background: var(--dvz-cyan, #22CDE7);
	color: #06232A;
	box-shadow: 0 8px 20px -8px rgba(var(--dvz-cyan-rgb), 0.6);
}

.dvz-section {
	--dvz-bg: #08090B;
	--dvz-surface: #111216;
	--dvz-border: rgba(240, 0, 168, 0.14);
	--dvz-border-soft: rgba(241, 236, 230, 0.08);
	--dvz-text: #F5F1EC;
	--dvz-text-secondary: #C9C3C5;
	--dvz-cyan: #22CDE7;
	--dvz-cyan-rgb: 34, 205, 231;
	--dvz-gold: #D7A653;
	--dvz-magenta: #F000A8;
	--dvz-graphite: #3B3A40;
	--dvz-accent: var(--dvz-magenta);
	--dvz-accent-dark: #D40A78;
	--dvz-accent-rgb: 240, 0, 168;

	position: relative;
	overflow: hidden;
	isolation: isolate;
	font-family: "Poppins", sans-serif;
	/* 400 en vez de 300: el peso "light" se veia poco legible en parrafos,
	   sobre todo en pantallas chicas o con poco brillo -- los titulos y
	   botones no se ven afectados porque ya tienen su propio font-weight. */
	font-weight: 400;
	color: var(--dvz-text);
	background: var(--dvz-bg);
	padding: 100px 20px;
	box-sizing: border-box;
}

/*
 * El tema (edicion completa del sitio / FSE) limita el ancho del contenido
 * usando CSS Grid, no simplemente margenes automaticos -- el truco clasico
 * de "width:100vw + margin negativo" no encaja ahi y descuadraba el layout.
 * La forma correcta en un tema de bloques es usar su propia clase "alignfull"
 * (la misma que usan los bloques nativos de WordPress para ancho completo),
 * que ya viene definida por el tema para expandirse correctamente dentro
 * de su grid sin importar como este armado.
 */
.dvz-section.alignfull,
.dvz-trustbar.alignfull {
	width: auto;
}

/* En celular quedaba un marco blanco visible a los lados de cada seccion:
   el tema le pone un "padding raiz" al contenido (variable
   --wp--style--root--padding-left/right) y los bloques alignfull de verdad
   lo cancelan con margen negativo -- la version anterior de esta regla
   apagaba esa cancelacion en movil (asumiendo que el margen quedaba chico y
   no se notaba), dejando ver el fondo blanco del tema alrededor de cada
   seccion oscura. Ahora se usa el mismo mecanismo que ya usa el tema para
   sus propios bloques de ancho completo, en vez de pelear contra el. */
@media (max-width: 782px) {
	.dvz-section.alignfull,
	.dvz-trustbar.alignfull {
		width: auto;
		margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1);
		margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1);
	}
}

/* Cian DIVAZZA es la firma secundaria de Area Caballeros -- pero solo en
   bordes/texto (botones outline, lineas): un boton solido con fondo cian y
   texto blanco no pasa contraste, asi que los CTA de relleno (.dvz-cta)
   siguen en fucsia (el color de conversion en todo el sitio) y solo el
   borde/detalle cambia a cian en esta seccion. */
.dvz-section.dvz-hombres {
	--dvz-border: rgba(34, 205, 231, 0.18);
}

.dvz-hombres .dvz-cta-outline {
	border-color: var(--dvz-cyan);
	color: var(--dvz-cyan);
}

.dvz-hombres .dvz-cta-outline:hover {
	border-color: var(--dvz-cyan);
	color: var(--dvz-cyan);
	background: rgba(var(--dvz-cyan-rgb), 0.08);
	box-shadow: 0 4px 16px rgba(var(--dvz-cyan-rgb), 0.18);
}

.dvz-hombres .dvz-eyebrow {
	color: var(--dvz-cyan);
}

.dvz-section.dvz-alt {
	--dvz-bg: #120E17;
	--dvz-surface: #1B1622;
}

/* Area Caballeros como pagina completa usa su propia paleta teal (no el
   toque minimo de cian que se usa en el resto del sitio) -- se sobreescriben
   las variables localmente para que .dvz-hombres, .dvz-cta, .dvz-eyebrow,
   etc (ya definidos en terminos de estas variables) hereden el teal sin
   duplicar reglas. */
.dvz-section.dvz-caballeros {
	--dvz-bg: #071014;
	--dvz-surface: #0D171C;
	--dvz-text: #F2EFEB;
	--dvz-text-secondary: #9AA8AC;
	--dvz-cyan: #18B8C8;
	--dvz-cyan-rgb: 24, 184, 200;
	--dvz-gold: #C9A45D;
	--dvz-accent: #18B8C8;
	--dvz-accent-dark: #087A88;
	--dvz-accent-rgb: 24, 184, 200;
	--dvz-border: rgba(24, 184, 200, 0.28);
	--dvz-border-soft: rgba(242, 239, 235, 0.12);
}

.dvz-section.dvz-closing {
	--dvz-bg: #0D0A12;
	--dvz-surface: #191420;
}

/* Nota: solo hay un ::before y un ::after disponibles por elemento -- este
   combina el resplandor de marca y el grano de textura en el ::before (con
   la opacidad del grano incluida en el propio SVG), para dejar el ::after
   libre y exclusivo para la flecha animada de "seguir bajando" en los heroes. */
.dvz-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image:
		radial-gradient(900px circle at 15% 0%, rgba(var(--dvz-accent-rgb), 0.07), transparent 65%),
		radial-gradient(820px circle at 90% 100%, rgba(215, 166, 83, 0.045), transparent 65%),
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' opacity='0.04'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	pointer-events: none;
}

.dvz-inner {
	position: relative;
	z-index: 1;
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}

/* Inicio especificamente pidio un ancho de contenido mayor (max 1200px) --
   se deja como excepcion de esta pagina (via body.home) en vez de subir el
   960px base, que usan todas las demas paginas y no se pidio tocar. */
body.home .dvz-inner {
	max-width: 1200px;
}

.dvz-kicker {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.75rem;
	color: var(--dvz-magenta);
	margin-bottom: 14px;
}

.dvz-section h1, .dvz-section h2, .dvz-section h3 {
	font-family: "Playfair Display", serif;
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.01em;
	margin: 0 0 18px;
	color: var(--dvz-text);
}

.dvz-section.dvz-mujeres h1, .dvz-section.dvz-mujeres h2 {
	font-style: italic;
}

/* Un bloque .dvz-hombres puede vivir dentro de una seccion .dvz-mujeres
   (ej. la mitad "Area Caballeros" del banner doble de Inicio) -- ahi debe
   recuperar el tono serio/no-italico propio de ese segmento. */
.dvz-hombres h1, .dvz-hombres h2 {
	font-style: normal;
}

/* Area Caballeros como pagina completa: los componentes de icono (que en
   el resto del sitio son fucsia/dorado a proposito) toman el teal propio
   de esta seccion. */
.dvz-caballeros .dvz-treatment-icon,
.dvz-caballeros .dvz-trust-icon {
	border-color: var(--dvz-cyan);
	color: var(--dvz-cyan);
}

.dvz-caballeros .dvz-treatment-card:hover {
	border-color: var(--dvz-cyan);
}

.dvz-caballeros .dvz-featured-list li::before {
	color: var(--dvz-cyan);
}

.dvz-caballeros .dvz-whatsapp-band .dvz-cta-band-icon svg {
	color: var(--dvz-cyan);
}

.dvz-caballeros .dvz-whatsapp-band {
	border-color: rgba(24, 184, 200, 0.25);
	background: linear-gradient(100deg, #0D171C, #071014);
}

/* Palabra de enfasis dentro de un titulo (ej. "se <em>siente</em>") -- no
   hereda la cursiva del segmento mujeres, se distingue solo por color. */
.dvz-section h1 em,
.dvz-section h2 em {
	font-style: normal;
	color: var(--dvz-magenta, #F000A8);
}

.dvz-hombres h1 em,
.dvz-hombres h2 em {
	color: var(--dvz-cyan, #22CDE7);
}

.dvz-gold-line {
	display: block;
	width: 45px;
	height: 2px;
	background: var(--dvz-gold, #D7A653);
	margin: 18px 0 20px;
}

/* "Gancho mental" del hero de Inicio -- una frase corta en un script/
   manuscrita distinta al resto del titular (sans-serif/serif), para que
   destaque como el remate emocional de la frase en vez de leerse igual que
   el resto. Fuente cargada junto a Playfair/Poppins en Dvz_Public::
   enqueue_site_assets(). */
.dvz-hero-script {
	font-family: "Dancing Script", cursive;
	font-weight: 700;
	color: var(--dvz-magenta, #F000A8);
	font-size: 1.35em;
	line-height: 1;
}

.dvz-hero {
	padding-top: 100px;
	padding-bottom: 100px;
}

.dvz-hero h1 {
	font-size: clamp(2.1rem, 5vw, 3.4rem);
}

.dvz-subtitle {
	font-size: 1.1rem;
	color: var(--dvz-text-secondary);
	max-width: 620px;
	margin: 0 auto 30px;
	line-height: 1.75;
}

.dvz-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 15px 32px;
	background: linear-gradient(135deg, var(--dvz-accent), var(--dvz-accent-dark));
	color: #fff;
	text-decoration: none;
	border: none;
	border-radius: 999px;
	font-family: inherit;
	font-size: 1rem;
	letter-spacing: 0.02em;
	margin: 6px;
	box-sizing: border-box;
	box-shadow: 0 12px 24px -12px rgba(var(--dvz-accent-rgb), 0.5);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
	cursor: pointer;
}

.dvz-cta:hover {
	box-shadow: 0 4px 18px rgba(var(--dvz-accent-rgb), 0.3), 0 16px 32px -10px rgba(var(--dvz-accent-rgb), 0.5);
	transform: translateY(-2px);
}

.dvz-cta-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 30px;
	border: 1px solid var(--dvz-border-soft);
	background: rgba(255, 255, 255, 0.02);
	color: var(--dvz-text);
	text-decoration: none;
	border-radius: 999px;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	margin: 6px;
	box-sizing: border-box;
	transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.dvz-cta-outline:hover {
	border-color: var(--dvz-accent);
	color: var(--dvz-accent);
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 4px 16px rgba(var(--dvz-accent-rgb), 0.18);
}

.dvz-fork {
	margin-top: 24px;
}

.dvz-trustbar {
	position: relative;
	z-index: 1;
	background: #18131A;
	padding: 22px 20px;
	text-align: center;
	font-size: 0.85rem;
	color: #C9C3C5;
	font-family: "Poppins", sans-serif;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	border-style: solid;
	border-width: 1px 0;
	border-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent) 1;
	box-sizing: border-box;
}

.dvz-trustbar span {
	margin: 4px 20px;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.dvz-trustbar span::before {
	content: "\2713";
	color: #D7A653;
	font-size: 0.9em;
}

.dvz-protocol {
	position: relative;
	border: 1px solid rgba(215, 166, 83, 0.22);
	border-radius: 18px;
	padding: 44px 36px;
	max-width: 640px;
	margin: 0 auto;
	background:
		radial-gradient(circle at 50% 0%, rgba(215, 166, 83, 0.08), transparent 70%),
		var(--dvz-surface);
	box-shadow: 0 24px 48px -28px rgba(215, 166, 83, 0.35);
}

.dvz-hombres .dvz-protocol {
	border-color: var(--dvz-border-soft);
	box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6);
}

.dvz-protocol p {
	color: var(--dvz-text-secondary);
	line-height: 1.7;
}

.dvz-protocol-items {
	text-align: left;
	margin: 22px 0;
}

.dvz-protocol-item {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-style: solid;
	border-width: 1px 0 0;
	border-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent) 1;
	font-size: 0.92rem;
	color: var(--dvz-text-secondary);
}

.dvz-protocol-item:last-child {
	border-width: 1px 0;
	border-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent) 1;
}

.dvz-protocol-item span:last-child {
	color: var(--dvz-text);
	font-weight: 500;
	white-space: nowrap;
}

.dvz-price-old {
	text-decoration: line-through;
	color: var(--dvz-text-secondary);
	margin-right: 12px;
	font-size: 1.1rem;
	opacity: 0.7;
}

.dvz-price-new {
	color: var(--dvz-magenta);
	font-size: 1.8rem;
	font-weight: 500;
}

.dvz-quota {
	display: inline-block;
	margin-top: 12px;
	padding: 6px 16px;
	border-radius: 999px;
	background: rgba(240, 0, 168, 0.06);
	border: 1px solid var(--dvz-border);
	color: var(--dvz-text-secondary);
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.dvz-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 24px;
	text-align: left;
	margin-top: 40px;
}

.dvz-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--dvz-border-soft);
	border-radius: 14px;
	padding: 32px 26px 28px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)), var(--dvz-surface);
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.dvz-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--dvz-magenta), var(--dvz-gold));
	opacity: 0.7;
}

.dvz-hombres .dvz-card::before {
	background: linear-gradient(90deg, var(--dvz-graphite), var(--dvz-cyan));
}

.dvz-card:hover {
	transform: translateY(-5px);
	border-color: var(--dvz-border);
	box-shadow: 0 24px 48px -26px rgba(0, 0, 0, 0.75);
}

.dvz-card h3 {
	font-size: 1.22rem;
}

.dvz-card p {
	color: var(--dvz-text-secondary);
	line-height: 1.7;
	font-size: 0.95rem;
}

.dvz-card a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	color: var(--dvz-magenta);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	transition: gap 0.2s ease, opacity 0.2s ease;
}

.dvz-card a:hover {
	gap: 10px;
	opacity: 0.85;
}

.dvz-hombres .dvz-card a {
	color: var(--dvz-text);
	text-decoration: underline;
	text-decoration-color: rgba(241, 236, 230, 0.35);
	text-underline-offset: 3px;
}

.dvz-whatsapp-btn {
	--dvz-accent-rgb: 37, 211, 102;
	background: linear-gradient(135deg, #25D366, #128c42) !important;
}

.dvz-whatsapp-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 52px;
	padding: 0 20px 0 16px;
	border-radius: 999px;
	background: linear-gradient(135deg, #25D366, #128c42);
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: none;
	box-shadow: 0 8px 24px -6px rgba(37, 211, 102, 0.6);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dvz-whatsapp-float-label {
	white-space: nowrap;
}

.dvz-whatsapp-float:hover {
	transform: translateY(-2px) scale(1.03);
	box-shadow: 0 10px 30px -4px rgba(37, 211, 102, 0.75);
	color: #fff;
}

@media (max-width: 600px) {
	.dvz-whatsapp-float {
		right: 14px;
		bottom: 14px;
		height: 48px;
		padding: 0 16px 0 14px;
	}

	.dvz-whatsapp-float-label {
		display: none;
	}
}

/* ---------- Responsive: tablet ---------- */
@media (max-width: 1199px) and (min-width: 641px) {
	.dvz-section {
		padding: 80px 20px;
	}
}

/* Inicio especificamente: reducir el "aire" entre secciones (habia demasiado
   espacio vertical en las transiciones). Solo toca las secciones de
   contenido normal (tratamientos, selector de experiencia, testimonios, CTA
   final) por id -- NO usa ".dvz-section" a secas, que pisaria el
   padding:0 intencional del banner mujer/caballeros y el padding a medida
   de la franja de diferenciadores. */
body.home #tratamientos,
body.home #elige-experiencia,
body.home #testimonios,
body.home #cta-final {
	padding: 64px 20px;
}

@media (max-width: 1199px) and (min-width: 641px) {
	body.home #tratamientos,
	body.home #elige-experiencia,
	body.home #testimonios,
	body.home #cta-final {
		padding: 55px 20px;
	}
}

@media (max-width: 640px) {
	body.home #tratamientos,
	body.home #elige-experiencia,
	body.home #testimonios,
	body.home #cta-final {
		padding: 46px 16px;
	}
}

/* ---------- Responsive: celular ---------- */
@media (max-width: 640px) {
	/* Se reduce mas el padding vertical (antes 65px, pensado a mitad de
	   camino entre escritorio y celular) -- en una pantalla de telefono, ese
	   aire de arriba/abajo en CADA seccion se sentia como espacio
	   desaprovechado en todo el sitio, no solo en una pagina puntual. */
	.dvz-section {
		padding: 44px 16px;
	}

	.dvz-hero {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.dvz-hero h1 {
		font-size: 2.15rem;
		line-height: 1.2;
	}

	.dvz-subtitle {
		font-size: 1rem;
		line-height: 1.65;
	}

	.dvz-fork {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
	}

	.dvz-fork .dvz-cta-outline {
		margin: 0;
	}

	.dvz-cta,
	.dvz-cta-outline {
		width: 100%;
		max-width: 320px;
	}

	.dvz-trustbar {
		padding: 16px 14px;
	}

	.dvz-trustbar span {
		margin: 4px 10px;
		font-size: 0.8rem;
	}

	.dvz-protocol {
		padding: 28px 20px;
	}

	.dvz-protocol-item {
		font-size: 0.85rem;
	}

	.dvz-price-new {
		font-size: 1.5rem;
	}

	.dvz-grid {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-top: 28px;
	}

	.dvz-card {
		padding: 22px 20px;
	}

	.dvz-catalog-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.dvz-catalog-price {
		text-align: left;
	}

	.dvz-catalog-category summary {
		padding: 15px 16px;
		font-size: 1.05rem;
	}

	.dvz-catalog-list {
		padding: 0 16px 6px;
	}
}

/* =========================================================
   Rediseno editorial: hero de imagen, secciones divididas,
   tarjetas de tratamiento, testimonios, Instagram, CTA final.
   ========================================================= */

.dvz-placeholder-img {
	position: relative;
	background: repeating-linear-gradient(135deg, #18131A, #18131A 12px, #1D1720 12px, #1D1720 24px);
	border: 1px dashed rgba(255, 255, 255, 0.18);
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--dvz-text-secondary, #C9C3C5);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	min-height: 280px;
	padding: 20px;
	box-sizing: border-box;
}

/* Foto real de stock (autorizada por la clienta) en vez del placeholder
   gris -- reutiliza el mismo contenedor/posicionamiento (min-height,
   position:absolute dentro de tarjetas, etc) para no duplicar reglas. */
.dvz-placeholder-img.has-photo {
	background: none;
	border: none;
	padding: 0;
	overflow: hidden;
}

.dvz-placeholder-img.has-photo img {
	width: 100%;
	height: 100%;
	min-height: inherit;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

/* --- Foto de fondo en heroes (Inicio, Reservas) --- */
.dvz-hero-photo {
	overflow: hidden;
}

.dvz-hero-photo-media {
	position: absolute;
	inset: 0;
	z-index: -4;
}

.dvz-hero-photo-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 28%;
	display: block;
}

/* Heroes con foto que se sentian opacos/planos (Area Caballeros, Tratamientos,
   Reservas): en vez de depender de fotos nuevas, se recoloran con un
   degradado dorado en "color blend mode" (cambia el matiz conservando la
   luz y sombra reales de la foto) y se les sube saturacion/contraste para
   que no se vean deslavados. */
.dvz-hero-photo-gold .dvz-hero-photo-media img {
	filter: saturate(1.25) contrast(1.08) brightness(1.04);
}

.dvz-hero-photo-gold .dvz-hero-photo-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(215, 166, 83, 0.6), rgba(120, 88, 40, 0.45));
	mix-blend-mode: color;
}

/* Mismo recoloreado dorado, aplicado a las tarjetas de categoria de Area
   Caballeros (usan .dvz-placeholder-img, no .dvz-hero-photo-media). */
.dvz-treatment-card.dvz-hero-photo-gold .dvz-placeholder-img img {
	filter: saturate(1.25) contrast(1.08) brightness(1.04);
}

.dvz-treatment-card.dvz-hero-photo-gold .dvz-placeholder-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(215, 166, 83, 0.6), rgba(120, 88, 40, 0.45));
	mix-blend-mode: color;
}

.dvz-hero-photo-overlay {
	position: absolute;
	inset: 0;
	z-index: -3;
	background: linear-gradient(90deg, #08090B 0%, rgba(8, 9, 11, 0.94) 23%, rgba(8, 9, 11, 0.48) 49%, rgba(8, 9, 11, 0.04) 74%);
}

@media (max-width: 640px) {
	.dvz-hero-photo-overlay {
		background: linear-gradient(90deg, rgba(8, 9, 11, 0.97) 0%, rgba(8, 9, 11, 0.9) 50%, rgba(8, 9, 11, 0.62) 100%);
	}
}

/* --- Hero con crossfade de 3 imagenes (solo Inicio) --- */
.dvz-hero-slides {
	position: absolute;
	inset: 0;
	z-index: -4;
}

.dvz-hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 22%;
	opacity: 0;
	transform: scale(1.035);
	animation: dvz-hero-fade 24s infinite;
}

.dvz-hero-slide.dvz-s1 {
	opacity: 1;
}

.dvz-hero-slide.dvz-s2 {
	animation-delay: 8s;
}

.dvz-hero-slide.dvz-s3 {
	animation-delay: 16s;
	filter: saturate(0.85) brightness(0.9);
}

@keyframes dvz-hero-fade {
	0% { opacity: 0; transform: scale(1.02); }
	5%, 29% { opacity: 1; transform: scale(1.07); }
	34%, 100% { opacity: 0; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
	.dvz-hero-slide {
		animation: none;
	}
	.dvz-hero-slide.dvz-s1 {
		opacity: 1;
	}
	.dvz-hero-slide.dvz-s2,
	.dvz-hero-slide.dvz-s3 {
		opacity: 0;
	}
}

.dvz-hero-dots {
	position: absolute;
	z-index: 2;
	bottom: 76px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 7px;
}

.dvz-hero-dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(241, 236, 230, 0.55);
	font-style: normal;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	transition: background 0.25s ease, transform 0.25s ease;
}

.dvz-hero-dots i.is-active {
	background: var(--dvz-magenta, #F000A8);
	transform: scale(1.2);
}

@media (max-width: 640px) {
	.dvz-hero-dots {
		bottom: 56px;
	}
}

/* Boton de musica ambiental del hero de Inicio: empieza oculto (dvz-hero-audio
   arriba) y site.js lo muestra solo si el archivo de audio existe de verdad
   -- asi nunca aparece un control roto mientras no se haya subido la pista.
   Fondo dorado solido (en vez de un circulo oscuro con borde) + un pulso tipo
   "onda expansiva" para que se note que es un control real, no un adorno --
   se apaga solo mientras suena la musica (is-on), para no seguir llamando
   la atencion sobre algo que ya esta activado. */
/* Fixed (no absolute) para que quede apilado justo encima del boton de
   WhatsApp SIEMPRE, sin importar cuanto se haya bajado en la pagina -- antes
   quedaba "pegado" al hero (position:absolute) y desaparecia con el scroll,
   rompiendo la alineacion con WhatsApp (que si es fixed). Mismo "right" que
   .dvz-whatsapp-float para que ambos bordes derechos queden alineados; el
   "bottom" se calcula como bottom+alto de WhatsApp + ~20px de separacion. */
.dvz-hero-music-toggle {
	position: fixed;
	z-index: 9998;
	right: 20px;
	bottom: 92px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, #E8C579, #D7A653);
	border: none;
	color: #1a1410;
	font-size: 20px;
	cursor: pointer;
	box-shadow: 0 4px 18px rgba(215, 166, 83, 0.4);
	animation: dvz-hero-music-pulse 2.8s ease-in-out infinite;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dvz-hero-music-toggle:hover,
.dvz-hero-music-toggle:focus-visible {
	transform: scale(1.08);
	box-shadow: 0 6px 24px rgba(215, 166, 83, 0.6);
	outline: none;
}

.dvz-hero-music-toggle.is-on {
	animation: none;
	box-shadow: 0 0 0 4px rgba(215, 166, 83, 0.18), 0 4px 18px rgba(215, 166, 83, 0.4);
}

@keyframes dvz-hero-music-pulse {
	0% { box-shadow: 0 4px 18px rgba(215, 166, 83, 0.4), 0 0 0 0 rgba(215, 166, 83, 0.45); }
	70% { box-shadow: 0 4px 18px rgba(215, 166, 83, 0.4), 0 0 0 14px rgba(215, 166, 83, 0); }
	100% { box-shadow: 0 4px 18px rgba(215, 166, 83, 0.4), 0 0 0 0 rgba(215, 166, 83, 0); }
}

.dvz-hero-music-icon-off {
	display: none;
}

.dvz-hero-music-toggle.is-on .dvz-hero-music-icon-on {
	display: none;
}

.dvz-hero-music-toggle.is-on .dvz-hero-music-icon-off {
	display: inline;
}

@media (prefers-reduced-motion: reduce) {
	.dvz-hero-music-toggle {
		animation: none;
	}
}

/* Mismo breakpoint que .dvz-whatsapp-float (600px) para que el calculo de
   "bottom" siga correspondiendo a su tamano mobile real (48px de alto, 14px
   de margen) y no queden desalineados en el rango intermedio. */
@media (max-width: 600px) {
	.dvz-hero-music-toggle {
		right: 14px;
		bottom: 80px;
		width: 44px;
		height: 44px;
		font-size: 17px;
	}
}

/* --- Banner doble: mujer / Area Caballeros lado a lado --- */
.dvz-dual-banner {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.dvz-banner-half {
	position: relative;
	min-height: 340px;
	display: flex;
	align-items: center;
	padding: 40px 7%;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	box-sizing: border-box;
}

.dvz-banner-half::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(8, 9, 11, 0.88) 0%, rgba(8, 9, 11, 0.55) 45%, rgba(8, 9, 11, 0.15) 100%);
}

.dvz-banner-man::before {
	background: linear-gradient(270deg, rgba(8, 9, 11, 0.88) 0%, rgba(8, 9, 11, 0.55) 45%, rgba(8, 9, 11, 0.15) 100%);
}

.dvz-banner-half::after {
	content: "";
	position: absolute;
	top: -20%;
	bottom: -20%;
	right: 36%;
	width: 2px;
	background: linear-gradient(180deg, transparent, rgba(240, 0, 168, 0.55), transparent);
	filter: blur(1px);
	transform: rotate(12deg);
	opacity: 0.7;
	pointer-events: none;
}

.dvz-banner-man::after {
	right: auto;
	left: 36%;
	background: linear-gradient(180deg, transparent, rgba(34, 205, 231, 0.55), transparent);
	transform: rotate(-12deg);
}

.dvz-banner-content {
	position: relative;
	z-index: 1;
	max-width: 380px;
	text-align: left;
}

.dvz-banner-content h2 {
	font-size: clamp(1.8rem, 3.2vw, 2.6rem);
	margin: 4px 0 10px;
	text-align: left;
}

.dvz-banner-content p {
	color: var(--dvz-text-secondary, #C9C3C5);
	font-size: 0.9rem;
	margin: 0 0 16px;
}

@media (max-width: 900px) {
	.dvz-dual-banner {
		grid-template-columns: 1fr;
	}
}

.dvz-eyebrow {
	display: block;
	font-family: "Poppins", sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--dvz-magenta, #F000A8);
	margin-bottom: 18px;
}

/* --- Hero editorial (alineado a la izquierda en escritorio) --- */
.dvz-hero-editorial .dvz-inner {
	text-align: left;
	max-width: 640px;
	margin: 0;
}

.dvz-hero-editorial h1 {
	font-size: clamp(2.2rem, 6vw, 5.5rem);
	line-height: 1.02;
}

.dvz-hero-editorial .dvz-subtitle {
	margin-left: 0;
	text-align: left;
}

.dvz-hero-editorial .dvz-fork,
.dvz-hero-editorial .dvz-cta,
.dvz-hero-editorial .dvz-cta-outline {
	margin-left: 0;
}

/* El hero con foto de fondo (Tratamientos, Area Caballeros, Reservas,
   Contacto) se sentia excesivo -- la imagen practicamente ocupaba toda la
   pantalla. Se reduce el padding vertical y, sobre todo, el titular (el
   mayor responsable de la altura, hasta 5.5rem/3 lineas) para esta variante
   y para el hero de Promociones (dvz-hero-promo, con la ilustracion propia
   en vez de una foto) -- el hero de Inicio (crossfade de fotos) no tenia
   esta queja y se deja igual. El padding inferior se deja algo mayor que el
   superior para no encimar el boton circular de "seguir bajando" que ya se
   inserta al fondo de cada hero. */
.dvz-hero.dvz-hero-photo,
.dvz-hero.dvz-hero-promo {
	padding-top: 56px;
	padding-bottom: 84px;
}

.dvz-hero-photo.dvz-hero-editorial h1,
.dvz-hero-promo.dvz-hero-editorial h1 {
	font-size: clamp(1.8rem, 3.6vw, 2.8rem);
}

/* El hero de Inicio (crossfade de 3 fotos) se dejo igual en el ajuste de
   arriba, pero un pedido posterior fijo un techo explicito de altura para
   esta pagina especifica (620-700px en escritorio) -- mismo criterio que
   .dvz-hero-photo/.dvz-hero-promo: menos padding y un titular mas chico
   (el de 4 lineas a 5.5rem se llevaba la mayor parte de la altura). */
.dvz-hero.dvz-hero-crossfade {
	padding-top: 64px;
	padding-bottom: 76px;
}

.dvz-hero-crossfade.dvz-hero-editorial h1 {
	font-size: clamp(1.9rem, 4.4vw, 3.4rem);
}

@media (max-width: 900px) {
	.dvz-hero.dvz-hero-crossfade {
		padding-top: 48px;
		padding-bottom: 60px;
	}
}

.dvz-hero-photo .dvz-subtitle,
.dvz-hero-promo .dvz-subtitle {
	margin-bottom: 20px;
}

/* Ilustracion de regalo del hero de Promociones: destello radial detras +
   el SVG en si. Antes el destello (centrado en toda la seccion) y el icono
   (centrado en el hueco a la derecha del texto) usaban cada uno su propio
   punto de referencia, asi que a pantalla ancha quedaban visiblemente
   separados. Ahora ambos son un solo bloque (.dvz-hero-promo-art-inner)
   posicionado en un unico punto -- un poco a la derecha del centro de la
   seccion -- para que el destello quede exactamente detras del icono. */
.dvz-hero-promo-art {
	position: absolute;
	inset: 0;
	z-index: -3;
	pointer-events: none;
}

.dvz-hero-promo-art-inner {
	position: absolute;
	top: 50%;
	left: 58%;
	transform: translate(-50%, -50%);
}

.dvz-hero-promo-art-inner::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 420px;
	height: 420px;
	max-width: 60vw;
	max-height: 60vw;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(215, 166, 83, 0.22), rgba(240, 0, 168, 0.08) 45%, transparent 70%);
	filter: blur(4px);
}

/* Sin viewBox (WordPress lo elimina al guardar la pagina), asi que el
   tamaño se fija aqui en el mismo sistema de coordenadas que usan los
   <path> del SVG (0-160 x 0-180) -- 1 unidad = 1px, sin necesidad de
   escalar. */
.dvz-hero-promo-art svg {
	position: relative;
	width: 160px;
	height: 180px;
	color: var(--dvz-gold, #D7A653);
	filter: drop-shadow(0 0 30px rgba(215, 166, 83, 0.22));
}

/* Los 3 destellos son los ultimos 3 <path> del SVG (los que llevan
   fill="currentColor") -- se anima por posicion, no por clase: WordPress
   quita el atributo "class" (y el style con animation-delay) de los hijos
   del SVG al guardar el contenido de la pagina. */
.dvz-hero-promo-art svg path:nth-last-of-type(-n+3) {
	transform-origin: center;
	animation: dvz-promo-sparkle 2.4s ease-in-out infinite;
}

.dvz-hero-promo-art svg path:nth-last-of-type(2) {
	animation-delay: 0.6s;
}

.dvz-hero-promo-art svg path:nth-last-of-type(1) {
	animation-delay: 1.2s;
}

@keyframes dvz-promo-sparkle {
	0%, 100% { opacity: 0.25; transform: scale(0.85); }
	50% { opacity: 1; transform: scale(1.1); }
}

@media (max-width: 1100px) {
	.dvz-hero-promo-art {
		opacity: 0.7;
	}

	.dvz-hero-promo-art-inner {
		left: 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dvz-hero-promo-art svg path:nth-last-of-type(-n+3) {
		animation: none;
		opacity: 0.8;
	}
}

/* Vista previa de la promocion mas urgente directamente en el primer
   pantallazo de Promociones -- antes ese hero no traia ninguna imagen (solo
   texto), lo que se sentia como si no hubiera ninguna oferta activa hasta
   no bajar. Es deliberadamente compacta -- la tarjeta completa (con fechas
   y su propio boton de reservar) sigue estando en la lista de mas abajo. */
.dvz-promo-hero-preview {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 28px 0;
	padding: 12px;
	max-width: 420px;
	border-radius: 14px;
	border: 1px solid rgba(215, 166, 83, 0.4);
	background: rgba(215, 166, 83, 0.08);
	text-decoration: none;
	color: inherit;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.dvz-promo-hero-preview:hover,
.dvz-promo-hero-preview:focus-visible {
	background: rgba(215, 166, 83, 0.16);
	border-color: var(--dvz-gold, #D7A653);
}

.dvz-promo-hero-preview-image {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: 10px;
	overflow: hidden;
	display: block;
}

.dvz-promo-hero-preview-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dvz-promo-hero-preview-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dvz-promo-hero-preview-scarcity {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--dvz-gold, #D7A653);
}

.dvz-promo-hero-preview-info strong {
	font-family: "Playfair Display", serif;
	font-size: 1rem;
	font-weight: 600;
	color: var(--dvz-text, #F5F1EC);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dvz-promo-hero-preview-more {
	font-size: 0.76rem;
	color: var(--dvz-text-secondary, #C9C3C5);
}

.dvz-promo-count-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 18px;
	padding: 7px 16px;
	border-radius: 999px;
	background: rgba(215, 166, 83, 0.14);
	border: 1px solid rgba(215, 166, 83, 0.45);
	color: var(--dvz-gold, #D7A653);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* --- Seccion dividida (Sobre Divazza / Area Caballeros) --- */
.dvz-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
	text-align: left;
	max-width: 1080px;
}

.dvz-split-media {
	position: relative;
}

.dvz-split-media .dvz-placeholder-img {
	min-height: 380px;
}

.dvz-split-media::before {
	content: "";
	position: absolute;
	top: -18px;
	left: -18px;
	width: 90px;
	height: 90px;
	border-radius: 12px;
	background: var(--dvz-magenta, #F000A8);
	opacity: 0.18;
	z-index: -1;
}

.dvz-split-body .dvz-eyebrow,
.dvz-split-body h2,
.dvz-split-body p {
	text-align: left;
}

.dvz-split-reverse .dvz-split-media {
	order: 2;
}

@media (max-width: 900px) {
	.dvz-split {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.dvz-split-reverse .dvz-split-media {
		order: 0;
	}
}

/* --- Tarjetas de tratamiento (con imagen y zoom al hover) --- */
.dvz-treatment-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
	margin-top: 44px;
}

/* Inicio (5 tarjetas: Facial, Corporal, Depilacion, Bienestar, Area
   Caballeros): mismo problema y misma solucion que Area Caballeros mas
   abajo -- flexbox centra la fila incompleta de 2 en vez de dejarla pegada
   a la izquierda. Se usa "body.home #tratamientos" (no solo ".dvz-mujeres",
   que tambien viven otras paginas) para no tocar el grid de Mujeres/
   Caballeros, que tienen su propio numero de tarjetas. */
body.home #tratamientos .dvz-treatment-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

body.home #tratamientos .dvz-treatment-card {
	flex: 1 1 280px;
	max-width: 320px;
}

@media (max-width: 900px) {
	body.home #tratamientos .dvz-treatment-card {
		flex-basis: 42%;
		max-width: 46%;
	}
}

@media (max-width: 600px) {
	body.home #tratamientos .dvz-treatment-card {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* Solo Area Caballeros (5 tarjetas): con grid de columnas fijas, las 2
   tarjetas de la ultima fila (Recuperacion, Remocion de tatuajes) quedaban
   pegadas a la izquierda en vez de centradas, porque el grid reserva la
   3ra columna vacia en esa fila. Flexbox con wrap + justify-content:center
   si centra automaticamente una fila incompleta -- por eso este selector
   pasa SOLO las tarjetas de Caballeros a flex, sin tocar .dvz-treatment-grid
   base (que tambien usan Inicio/Mujeres con su propio numero de tarjetas). */
.dvz-caballeros .dvz-treatment-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.dvz-caballeros .dvz-treatment-card {
	flex: 1 1 300px;
	max-width: 340px;
}

@media (max-width: 900px) {
	.dvz-caballeros .dvz-treatment-card {
		flex-basis: 42%;
		max-width: 46%;
	}
}

@media (max-width: 600px) {
	.dvz-caballeros .dvz-treatment-card {
		flex-basis: 100%;
		max-width: 100%;
	}
}

.dvz-treatment-card {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	min-height: 320px;
	display: flex;
	align-items: flex-end;
	text-align: left;
	border: 1px solid rgba(215, 166, 83, 0.32);
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.dvz-treatment-card:hover {
	border-color: var(--dvz-magenta, #F000A8);
}

.dvz-treatment-icon {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(8, 9, 11, 0.55);
	border: 1px solid var(--dvz-magenta, #F000A8);
	color: var(--dvz-magenta, #F000A8);
	backdrop-filter: blur(4px);
}

.dvz-treatment-icon svg {
	width: 18px;
	height: 18px;
}

.dvz-treatment-card .dvz-placeholder-img {
	position: absolute;
	inset: 0;
	border-radius: 0;
	border: none;
	min-height: 0;
	transition: transform 0.3s ease;
}

.dvz-treatment-card:hover .dvz-placeholder-img {
	transform: scale(1.03);
}

.dvz-treatment-body a {
	display: inline-block;
	transition: transform 0.3s ease;
}

.dvz-treatment-card:hover .dvz-treatment-body a,
.dvz-treatment-card:focus-within .dvz-treatment-body a {
	transform: translateX(5px);
}

.dvz-treatment-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(11, 9, 13, 0.92) 10%, rgba(11, 9, 13, 0.35) 55%, rgba(11, 9, 13, 0.1) 100%);
}

.dvz-treatment-body {
	position: relative;
	z-index: 1;
	padding: 26px 22px;
	transition: transform 0.35s ease;
}

.dvz-treatment-card:hover .dvz-treatment-body {
	transform: translateY(-4px);
}

.dvz-treatment-body h3 {
	font-size: 1.5rem;
	margin-bottom: 6px;
	transition: background 0.3s ease;
}

/* Al pasar el mouse (o el foco, en touch/teclado) el titulo se resalta con
   el mismo degradado magenta-dorado que ya se usa en avatares y CTAs, en
   vez de quedarse en blanco plano. */
.dvz-treatment-card:hover .dvz-treatment-body h3,
.dvz-treatment-card:focus-within .dvz-treatment-body h3 {
	background: linear-gradient(135deg, var(--dvz-magenta, #F000A8), var(--dvz-champagne, #D7A653));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.dvz-treatment-body p {
	color: var(--dvz-text-secondary, #C9C3C5);
	font-size: 0.88rem;
	margin-bottom: 14px;
}

.dvz-treatment-body a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--dvz-magenta, #F000A8);
	text-decoration: none;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 500;
}

/* Tarjetas de Inicio ("Encuentra tu tratamiento"): toda la tarjeta es un
   <a> ahora (antes solo esta flechita lo era -- muy chica para tocar bien
   en celular, y se perdia con el degradado oscuro). El span solo queda
   como indicador visual; mismo look y mismo desplazamiento al pasar el
   mouse que tenia como enlace propio. */
.dvz-treatment-arrow {
	display: inline-flex;
	align-items: center;
	color: var(--dvz-magenta, #F000A8);
	font-size: 0.95rem;
	font-weight: 600;
	transition: transform 0.3s ease;
}

.dvz-treatment-card:hover .dvz-treatment-arrow,
.dvz-treatment-card:focus-visible .dvz-treatment-arrow {
	transform: translateX(5px);
}

/* --- Banner de reserva / CTA final --- */
.dvz-cta-banner {
	position: relative;
	text-align: center;
	background:
		radial-gradient(900px circle at 50% 0%, rgba(240, 0, 168, 0.14), transparent 70%),
		var(--dvz-bg, #08090B);
}

.dvz-cta-banner.dvz-cta-banner-final .dvz-placeholder-img {
	position: absolute;
	inset: 0;
	border-radius: 0;
	border: none;
	z-index: -3;
	opacity: 0.35;
}

.dvz-cta-banner.dvz-cta-banner-final::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: linear-gradient(180deg, rgba(11, 9, 13, 0.75), rgba(11, 9, 13, 0.95));
}

/* --- Testimonios --- */
.dvz-testimonial-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
	margin-top: 44px;
	text-align: left;
}

/* Con solo 1 o 2 resenas reales (nunca se rellena con una falsa), el grid de
   arriba las estira a lo ancho del contenedor -- se ven enormes y raras.
   Flexbox centrado con un ancho maximo por tarjeta las deja del tamano
   correcto sin importar cuantas hayan, y tambien se aprovecha para agrandar
   un poco las tarjetas (ancho, padding, tamano del comentario) como se
   pidio. */
body.home .dvz-testimonial-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

body.home .dvz-testimonial-card {
	flex: 1 1 320px;
	max-width: 380px;
}

.dvz-testimonial-card {
	position: relative;
	border: 1px solid var(--dvz-border-soft, rgba(247, 243, 246, 0.08));
	border-radius: 14px;
	padding: 32px 28px 28px;
	background: linear-gradient(180deg, rgba(240, 0, 168, 0.05), rgba(24, 19, 26, 0) 60%), var(--dvz-surface, #18131A);
	box-shadow: 0 16px 32px -22px rgba(240, 0, 168, 0.4);
}

.dvz-testimonial-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 22px;
	right: 22px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--dvz-magenta, #F000A8), var(--dvz-champagne, #D7A653));
	opacity: 0.7;
}

.dvz-testimonial-stars {
	color: var(--dvz-champagne, #D7A653);
	text-shadow: 0 0 12px rgba(215, 166, 83, 0.5);
	letter-spacing: 3px;
	font-size: 1.1rem;
	margin-bottom: 20px;
}

.dvz-testimonial-quote {
	font-style: italic;
	color: var(--dvz-text, #F5F1EC);
	font-size: 1.02rem;
	line-height: 1.75;
	margin-bottom: 20px;
}

.dvz-testimonial-author {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dvz-testimonial-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--dvz-magenta, #F000A8), var(--dvz-champagne, #D7A653));
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1a1006;
	font-weight: 600;
	font-size: 0.8rem;
	flex-shrink: 0;
}

.dvz-testimonial-name {
	font-size: 0.85rem;
	color: var(--dvz-text, #F5F1EC);
}

.dvz-testimonials-empty {
	text-align: center;
	color: var(--dvz-text-secondary, #C9C3C5);
	max-width: 480px;
	margin: 0 auto;
}

/* --- Formulario "Cuentanos tu experiencia" (reutiliza el look de
   .dvz-contact-card, misma paleta y bordes). --- */
.dvz-testimonial-form {
	border: 1px solid rgba(215, 166, 83, 0.35);
	border-radius: 10px;
	background: linear-gradient(150deg, #101318, #090c0f);
	padding: 26px;
	box-shadow: 0 0 0 1px rgba(215, 166, 83, 0.08) inset;
	text-align: left;
}

.dvz-testimonial-form h3 {
	font-size: 1.3rem;
	margin: 0 0 6px;
}

.dvz-testimonial-form-note {
	font-size: 0.78rem;
	color: var(--dvz-text-secondary, #C9C3C5);
	margin: 0 0 18px;
}

.dvz-testimonial-form label {
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dvz-text-secondary, #C9C3C5);
	margin-bottom: 14px;
}

.dvz-testimonial-form input,
.dvz-testimonial-form select,
.dvz-testimonial-form textarea {
	display: block;
	width: 100%;
	margin-top: 7px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: #0a0d10;
	color: var(--dvz-text, #F6F1ED);
	border-radius: 6px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 0.85rem;
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.25s ease;
}

.dvz-testimonial-form input,
.dvz-testimonial-form select {
	height: 46px;
}

.dvz-testimonial-form textarea {
	height: 96px;
	padding-top: 12px;
	resize: vertical;
}

.dvz-testimonial-form input:focus,
.dvz-testimonial-form select:focus,
.dvz-testimonial-form textarea:focus {
	border-color: var(--dvz-magenta, #F000A8);
}

.dvz-testimonial-status {
	font-size: 0.78rem;
	color: var(--dvz-text-secondary, #C9C3C5);
	margin-top: 12px;
	min-height: 18px;
}

.dvz-testimonial-status.is-success {
	color: #4ADE80;
}

.dvz-testimonial-status.is-error {
	color: var(--dvz-magenta, #F000A8);
}

/* --- Instagram --- */
.dvz-instagram-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 40px;
}

.dvz-instagram-grid .dvz-placeholder-img {
	min-height: 180px;
	transition: transform 0.4s ease, opacity 0.4s ease;
	cursor: default;
}

.dvz-instagram-grid .dvz-placeholder-img:hover {
	transform: scale(1.03);
	opacity: 0.85;
}

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

/* =========================================================
   Pagina "Reserva tu cita": hero compacto + layout de dos
   columnas (pasos/beneficios a la izquierda, formulario a la
   derecha). Solo capa visual -- el formulario en si (logica de
   disponibilidad/reserva) vive en booking-form.php/js.
   ========================================================= */

.dvz-hero-reservas {
	padding-top: 70px;
	padding-bottom: 56px;
}

/* --- Barra de progreso 01-02-03, fuera de la tarjeta del formulario --- */
.dvz-progress {
	display: flex;
	align-items: center;
	max-width: 640px;
	margin: 0 auto 36px;
}

.dvz-progress-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 100px;
	color: #77717A;
}

.dvz-progress-item span {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #202328;
	color: var(--dvz-text, #F5F1EC);
	font-size: 0.75rem;
	transition: background 0.3s ease;
}

.dvz-progress-item small {
	font-size: 0.62rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.dvz-progress-item.is-active,
.dvz-progress-item.is-done {
	color: var(--dvz-text, #F5F1EC);
}

.dvz-progress-item.is-active span,
.dvz-progress-item.is-done span {
	background: var(--dvz-magenta, #F000A8);
	color: #fff;
}

.dvz-progress-line {
	height: 1px;
	background: #4a4a4c;
	flex: 1;
}

/* --- Contenedor de la reserva: tarjeta de valoracion + formulario --- */
.dvz-booking-shell {
	display: grid;
	grid-template-columns: 260px 1fr;
	align-items: start;
	gap: 20px;
	max-width: 900px;
	margin: 0 auto;
}

.dvz-valuation-card {
	position: relative;
	padding: 30px 24px;
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	justify-content: center;
	background: linear-gradient(160deg, rgba(215, 166, 83, 0.1), transparent 60%);
	box-shadow: inset 0 0 0 1px rgba(215, 166, 83, 0.28);
	animation: dvz-valuation-glow 3.2s ease-in-out infinite;
}

/* Antes era una etiqueta chica en la esquina, facil de pasar por alto --
   ahora es lo primero que se lee: una pastilla centrada y grande (sin
   exagerar) arriba del todo, con brillo propio para que "gratis" sea lo que
   mas llame la atencion de la tarjeta. */
.dvz-valuation-badge {
	display: inline-block;
	padding: 8px 22px;
	border-radius: 999px;
	background: var(--dvz-gold, #D7A653);
	color: #1a1410;
	font-size: 0.88rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	animation: dvz-valuation-badge-shine 2.6s ease-in-out infinite;
}

@keyframes dvz-valuation-badge-shine {
	0%, 100% { box-shadow: 0 0 14px rgba(215, 166, 83, 0.35); transform: scale(1); }
	50% { box-shadow: 0 0 26px rgba(215, 166, 83, 0.65); transform: scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
	.dvz-valuation-badge {
		animation: none;
		box-shadow: 0 0 18px rgba(215, 166, 83, 0.45);
	}
}

.dvz-valuation-btn {
	width: fit-content;
}

@keyframes dvz-valuation-glow {
	0%, 100% { box-shadow: inset 0 0 0 1px rgba(215, 166, 83, 0.28); }
	50% { box-shadow: inset 0 0 0 1px rgba(215, 166, 83, 0.5), 0 0 20px rgba(215, 166, 83, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
	.dvz-valuation-card {
		animation: none;
	}
}

.dvz-valuation-card h3 {
	font-family: "Playfair Display", serif;
	font-size: 1.15rem;
	font-weight: 400;
	margin: 0;
}

.dvz-valuation-card p {
	font-size: 0.78rem;
	color: var(--dvz-text-secondary, #C9C3C5);
	line-height: 1.6;
	margin: 6px 0 4px;
}

.dvz-valuation-alt {
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid rgba(215, 166, 83, 0.18);
	font-size: 0.74rem !important;
	color: var(--dvz-text-secondary, #C9C3C5);
	line-height: 1.6;
}

.dvz-valuation-alt a {
	color: var(--dvz-magenta, #F000A8);
	text-decoration: none;
}

.dvz-booking-form-panel {
	padding: 28px 26px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	background: linear-gradient(145deg, rgba(19, 23, 28, 0.92), rgba(8, 11, 14, 0.94));
}

@media (max-width: 760px) {
	.dvz-booking-shell {
		grid-template-columns: 1fr;
		gap: 16px;
		max-width: 480px;
	}
}

/* --- Razones para reservar (3 columnas con divisores) --- */
.dvz-reasons-grid {
	max-width: 960px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid rgba(215, 166, 83, 0.28);
	border-radius: 12px;
	overflow: hidden;
	background: #0b0e11;
}

.dvz-reasons-grid > div {
	padding: 24px 26px;
	border-right: 1px solid rgba(215, 166, 83, 0.22);
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.dvz-reasons-grid > div:last-child {
	border-right: 0;
}

.dvz-reasons-grid h3 {
	font-size: 1.05rem;
	margin: 0 0 6px;
}

.dvz-reasons-grid p {
	font-size: 0.82rem;
	color: var(--dvz-text-secondary, #C9C3C5);
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 760px) {
	.dvz-reasons-grid {
		grid-template-columns: 1fr;
	}

	.dvz-reasons-grid > div {
		border-right: 0;
		border-bottom: 1px solid rgba(215, 166, 83, 0.22);
	}

	.dvz-reasons-grid > div:last-child {
		border-bottom: 0;
	}
}

/* --- Franja de WhatsApp, alternativa al formulario --- */
.dvz-whatsapp-band {
	max-width: 960px;
	margin: 0 auto;
	padding: 20px 28px;
	display: flex;
	align-items: center;
	gap: 20px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	background: #0e1216;
}

.dvz-whatsapp-band .dvz-trust-icon {
	border-color: rgba(240, 0, 168, 0.4);
	flex-shrink: 0;
}

.dvz-whatsapp-band h2 {
	font-size: 1.3rem;
	margin: 0;
	text-align: left;
}

.dvz-whatsapp-band p {
	font-size: 0.85rem;
	color: var(--dvz-text-secondary, #C9C3C5);
	margin: 4px 0 0;
}

.dvz-whatsapp-band .dvz-cta {
	margin: 0 0 0 auto;
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.dvz-whatsapp-band {
		flex-direction: column;
		text-align: center;
		padding: 22px 20px;
	}

	.dvz-whatsapp-band h2,
	.dvz-whatsapp-band p {
		text-align: center;
	}

	.dvz-whatsapp-band .dvz-cta {
		margin: 10px 0 0;
		width: 100%;
	}
}

/* =========================================================
   Pagina "Tratamientos": chips de filtro, protocolo destacado
   y tarjetas de categoria. La lista de valores completa la
   pone el shortcode [dvz_catalog] (datos reales, no hardcode).
   ========================================================= */

.dvz-filter-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.dvz-filter-chip {
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: #0b0e11;
	color: #ddd;
	border-radius: 999px;
	padding: 10px 20px;
	font-family: "Poppins", sans-serif;
	font-size: 0.78rem;
	cursor: pointer;
	transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.dvz-filter-chip.is-active,
.dvz-filter-chip:hover {
	background: var(--dvz-magenta, #F000A8);
	color: #fff;
	border-color: var(--dvz-magenta, #F000A8);
	box-shadow: 0 0 18px rgba(240, 0, 168, 0.3);
}

@media (max-width: 640px) {
	.dvz-filter-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		padding-bottom: 6px;
	}

	.dvz-filter-chip {
		flex-shrink: 0;
	}
}

/* --- Protocolo destacado: foto | copy | precio --- */
.dvz-featured-protocol {
	max-width: 1000px;
	margin: 44px auto 0;
	border: 1px solid rgba(215, 166, 83, 0.35);
	border-radius: 12px;
	display: grid;
	grid-template-columns: 32% 43% 25%;
	overflow: hidden;
	background: var(--dvz-surface, #101318);
}

.dvz-featured-photo {
	position: relative;
	min-height: 260px;
}

.dvz-featured-photo .dvz-placeholder-img {
	position: absolute;
	inset: 0;
	border-radius: 0;
	border: none;
	min-height: 0;
}

.dvz-featured-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	background: var(--dvz-gold, #D7A653);
	color: #2B1E10;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
}

.dvz-featured-copy {
	padding: 30px 28px;
	text-align: left;
}

.dvz-featured-copy .dvz-eyebrow {
	margin-bottom: 8px;
}

.dvz-featured-copy h2 {
	font-size: 1.7rem;
	margin: 0 0 14px;
	text-align: left;
}

.dvz-featured-list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dvz-featured-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	color: var(--dvz-text-secondary, #C9C3C5);
}

.dvz-featured-list li::before {
	content: "\2713";
	color: var(--dvz-magenta, #F000A8);
	flex-shrink: 0;
}

.dvz-featured-note {
	font-size: 0.75rem;
	color: #bbb;
}

.dvz-price-box {
	margin: 18px;
	padding: 22px 18px;
	background: #15181d;
	border-radius: 8px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
}

.dvz-price-box small {
	font-size: 0.7rem;
	color: #999;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.dvz-price-box s {
	font-family: "Playfair Display", serif;
	font-size: 1.5rem;
	color: #777;
	text-decoration-color: var(--dvz-magenta, #F000A8);
}

.dvz-price-box .dvz-price-label {
	font-size: 0.7rem;
	color: var(--dvz-gold, #D7A653);
}

.dvz-price-box strong {
	font-family: "Playfair Display", serif;
	font-size: 2.4rem;
	color: var(--dvz-gold, #D7A653);
	font-weight: 400;
}

.dvz-price-box .dvz-cta,
.dvz-price-box .dvz-cta-outline {
	min-height: 40px;
	font-size: 0.75rem;
	margin: 4px 0 0;
	width: 100%;
}

@media (max-width: 900px) {
	.dvz-featured-protocol {
		grid-template-columns: 1fr;
	}

	.dvz-featured-photo {
		min-height: 220px;
	}
}

/* --- Franja de valoracion (reusa el look de .dvz-whatsapp-band) --- */
.dvz-cta-band-icon {
	flex-shrink: 0;
}

.dvz-cta-band-icon svg {
	width: 34px;
	height: 34px;
	color: var(--dvz-magenta, #F000A8);
}

.dvz-whatsapp-band.dvz-valuation-band small {
	display: block;
	color: var(--dvz-magenta, #F000A8);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.dvz-whatsapp-band.dvz-valuation-band h2 em {
	font-style: italic;
	color: var(--dvz-gold, #D7A653);
}

/* =========================================================
   Pagina "Contacto": formulario + tarjeta "como llegar"
   (enlace real a Google Maps, sin mapa ni direccion inventada).
   ========================================================= */

.dvz-contact-layout {
	max-width: 1120px;
	margin: 32px auto 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: stretch;
	text-align: left;
}

@media (max-width: 900px) {
	.dvz-contact-layout {
		grid-template-columns: 1fr;
	}
}

.dvz-contact-card,
.dvz-directions-card {
	border: 1px solid rgba(215, 166, 83, 0.35);
	border-radius: 10px;
	background: linear-gradient(150deg, #101318, #090c0f);
	padding: 26px;
	box-shadow: 0 0 0 1px rgba(215, 166, 83, 0.08) inset;
}

.dvz-contact-card h2 {
	font-size: 1.5rem;
	margin: 0 0 6px;
	text-align: left;
}

.dvz-contact-card > p {
	font-size: 0.8rem;
	color: var(--dvz-text-secondary, #C9C3C5);
	margin: 0 0 20px;
}

.dvz-contact-card label {
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dvz-text-secondary, #C9C3C5);
	margin-bottom: 16px;
}

.dvz-contact-card input,
.dvz-contact-card textarea {
	width: 100%;
	margin-top: 7px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: #0a0d10;
	color: var(--dvz-text, #F6F1ED);
	border-radius: 6px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 0.85rem;
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.25s ease;
}

.dvz-contact-card input {
	height: 46px;
}

.dvz-contact-card textarea {
	height: 96px;
	padding-top: 12px;
	resize: vertical;
}

.dvz-contact-card input:focus,
.dvz-contact-card textarea:focus {
	border-color: var(--dvz-magenta, #F000A8);
}

.dvz-contact-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (max-width: 480px) {
	.dvz-contact-two-col {
		grid-template-columns: 1fr;
	}
}

.dvz-contact-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 6px;
}

.dvz-contact-check {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	color: var(--dvz-text-secondary, #C9C3C5);
}

.dvz-contact-check input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--dvz-magenta, #F000A8);
}

.dvz-contact-check span {
	font-size: 0.72rem;
	text-transform: none;
}

.dvz-contact-status {
	font-size: 0.78rem;
	color: var(--dvz-text-secondary, #C9C3C5);
	margin-top: 12px;
	min-height: 18px;
}

.dvz-contact-status.is-success {
	color: #4ADE80;
}

.dvz-contact-status.is-error {
	color: var(--dvz-magenta, #F000A8);
}

.dvz-directions-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}

.dvz-directions-card h3 {
	font-size: 1.2rem;
	margin: 0 0 6px;
}

.dvz-directions-card p {
	font-size: 0.85rem;
	color: var(--dvz-text-secondary, #C9C3C5);
	line-height: 1.6;
	margin: 0 0 6px;
}

@media (max-width: 640px) {
	.dvz-hero-reservas {
		padding-top: 44px;
		padding-bottom: 40px;
	}
}

/* --- Fila de confianza con icono (reemplaza la franja de texto plano) --- */
.dvz-trust-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px 40px;
	margin-top: 8px;
}

.dvz-trust-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 150px;
	text-align: center;
}

/* Lineas divisorias finas entre los 4 items -- solo cuando de verdad caben
   los 4 en una sola fila (escritorio); en movil/tablet, donde pueden pasar
   a 2x2, una linea a la derecha del 2do y 4to item quedaria colgando sola
   sin nada que separar, asi que ahi se dejan sin dividir. */
@media (min-width: 641px) {
	.dvz-trust-icons-stacked .dvz-trust-item:not(:last-child) {
		position: relative;
		padding-right: 30px;
	}

	.dvz-trust-icons-stacked .dvz-trust-item:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 4px;
		bottom: 4px;
		right: 0;
		width: 1px;
		background: rgba(215, 166, 83, 0.25);
	}
}

.dvz-trust-icon {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid rgba(215, 166, 83, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dvz-gold, #D7A653);
}

.dvz-trust-icon svg {
	width: 20px;
	height: 20px;
}

.dvz-trust-label {
	font-size: 0.82rem;
	color: var(--dvz-text-secondary);
	line-height: 1.4;
}

.dvz-trustbar-section {
	padding-top: 36px;
	padding-bottom: 36px;
}

/* Variante que se superpone al borde inferior del hero (como en la
   referencia), en vez de ser una franja separada. */
.dvz-trustbar-overlap {
	padding-top: 0;
	padding-bottom: 0;
	/* .dvz-section trae overflow:hidden por defecto (para contener el zoom
	   del hero) -- aqui no hay nada que contener, y con eso activo la
	   tarjeta de abajo (que sube -34px con margin-top negativo para
	   superponerse al hero) quedaba con el borde y las esquinas de arriba
	   recortados por el propio limite de esta seccion. */
	overflow: visible;
}

.dvz-trust-strip-card {
	position: relative;
	z-index: 5;
	max-width: 92%;
	margin: -34px auto 0;
	border: 1px solid transparent;
	border-radius: 20px;
	/* Doble fondo: el degradado oscuro de siempre recortado al "padding-box"
	   (adentro del borde) y un segundo degradado oro-magenta recortado al
	   "border-box" (solo se ve donde estaba el borde) -- asi el filo queda
	   con color propio en vez del dorado plano de antes. */
	background: linear-gradient(180deg, rgba(19, 20, 24, 0.96), rgba(8, 9, 11, 0.97)) padding-box,
		linear-gradient(90deg, var(--dvz-magenta, #F000A8), var(--dvz-gold, #D7A653)) border-box;
	padding: 26px 30px;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(215, 166, 83, 0.08) inset;
}

@media (max-width: 640px) {
	.dvz-trust-strip-card {
		margin-top: -18px;
		padding: 20px 18px;
		border-radius: 16px;
	}
}

/* La franja de diferenciadores debe leerse como una transicion breve entre
   el hero y el resto de la pagina, no como una seccion completa -- por eso
   se reduce su alto, y en movil se fuerza 2x2 (4 items en 2 filas de 2) en
   vez de dejar que el wrap natural decida. */
@media (max-width: 600px) {
	.dvz-trust-icons-stacked {
		gap: 22px 18px;
	}

	.dvz-trust-icons-stacked .dvz-trust-item {
		flex: 0 1 42%;
		max-width: none;
	}
}

.dvz-trust-icons-inline {
	justify-content: space-between;
	gap: 20px 26px;
}

.dvz-trust-icons-inline .dvz-trust-item {
	position: relative;
	flex-direction: row;
	text-align: left;
	max-width: none;
	padding-left: 26px;
}

.dvz-trust-icons-inline .dvz-trust-item:first-child {
	padding-left: 0;
}

.dvz-trust-icons-inline .dvz-trust-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 34px;
	background: rgba(215, 166, 83, 0.22);
}

.dvz-trust-icons-inline .dvz-trust-item:first-child::before {
	display: none;
}

.dvz-trust-icons-inline .dvz-trust-icon {
	width: 38px;
	height: 38px;
}

.dvz-trust-icons-inline .dvz-trust-icon svg {
	width: 17px;
	height: 17px;
}

.dvz-trust-icons-inline .dvz-trust-label {
	font-size: 0.85rem;
	color: var(--dvz-text);
	text-align: left;
}

@media (max-width: 640px) {
	.dvz-trust-icons-inline {
		justify-content: center;
	}

	.dvz-trust-icons-inline .dvz-trust-item {
		flex-direction: column;
		text-align: center;
		padding-left: 0;
	}

	.dvz-trust-icons-inline .dvz-trust-item::before {
		display: none;
	}

	.dvz-trust-icons-inline .dvz-trust-label {
		text-align: center;
	}
}

/* --- [dvz_promo]: lista de banners promocionales gestionados desde
   wp-admin > Promociones -- pueden ser varios a la vez, cada uno con su
   propia fecha y boton de reservar. --- */
.dvz-promo-wrap {
	margin-top: 28px;
}

.dvz-promo-list {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.dvz-promo-card {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: stretch;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(215, 166, 83, 0.35);
	background: var(--dvz-surface, #18131A);
	box-shadow: 0 18px 44px -20px rgba(240, 0, 168, 0.35), 0 0 0 1px rgba(215, 166, 83, 0.08) inset;
}

.dvz-promo-card-image {
	display: block;
	line-height: 0;
	min-height: 220px;
}

.dvz-promo-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.dvz-promo-card-image:hover img {
	transform: scale(1.03);
}

.dvz-promo-card-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 10px;
	padding: 28px 30px;
}

.dvz-promo-card-info h3 {
	margin: 0;
	font-size: 1.3rem;
}

.dvz-promo-scarcity {
	display: inline-block;
	margin: 0;
	padding: 6px 14px;
	border-radius: 50px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
	background: linear-gradient(135deg, var(--dvz-magenta, #F000A8), #D40A78);
	box-shadow: 0 4px 14px -4px rgba(240, 0, 168, 0.6);
}

.dvz-promo-dates {
	margin: 0;
	color: var(--dvz-text-secondary, #C9C3C5);
	font-size: 0.9rem;
}

.dvz-promo-card-info .dvz-cta {
	margin-top: 6px;
}

@media (max-width: 720px) {
	.dvz-promo-card {
		grid-template-columns: 1fr;
	}

	.dvz-promo-card-image {
		min-height: 200px;
	}
}

.dvz-promo-empty {
	margin-top: 28px;
	padding: 40px 30px;
	text-align: center;
	border-radius: 18px;
	border: 1px dashed rgba(215, 166, 83, 0.4);
	background: rgba(215, 166, 83, 0.05);
}

.dvz-promo-empty p {
	margin: 0;
	color: var(--dvz-text-secondary, #C9C3C5);
	font-size: 1rem;
	line-height: 1.7;
}

/* --- [dvz_promo_flash]: apartado propio para ofertas de muy corta
   duracion, separado de la lista normal de arriba -- tarjetas mas
   compactas (imagen arriba, info abajo) con una pastilla "Flash" y un
   fondo de seccion con brillo propio para que se note que es distinto a
   una promocion normal. --- */
.dvz-promo-flash-section {
	background: radial-gradient(120% 140% at 50% 0%, rgba(240, 0, 168, 0.14), transparent 60%), var(--dvz-surface, #18131A);
}

.dvz-promo-flash-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 22px;
	margin-top: 28px;
}

.dvz-promo-flash-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
	background: var(--dvz-surface, #18131A);
	border: 1px solid rgba(215, 166, 83, 0.4);
	animation: dvz-promo-flash-glow 2.4s ease-in-out infinite;
}

@keyframes dvz-promo-flash-glow {
	0%, 100% { box-shadow: 0 0 0 1px rgba(240, 0, 168, 0.15), 0 14px 30px -18px rgba(240, 0, 168, 0.4); }
	50% { box-shadow: 0 0 0 1px rgba(240, 0, 168, 0.35), 0 18px 40px -16px rgba(240, 0, 168, 0.65); }
}

@media (prefers-reduced-motion: reduce) {
	.dvz-promo-flash-card {
		animation: none;
		box-shadow: 0 0 0 1px rgba(240, 0, 168, 0.25);
	}
}

.dvz-promo-flash-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #1a1410;
	background: var(--dvz-gold, #D7A653);
	box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
}

.dvz-promo-flash-image {
	display: block;
	line-height: 0;
	min-height: 160px;
}

.dvz-promo-flash-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dvz-promo-flash-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 18px 20px 22px;
}

.dvz-promo-flash-info h3 {
	margin: 0;
	font-size: 1.08rem;
}

.dvz-promo-flash-hours {
	margin: 0;
	color: var(--dvz-text-secondary, #C9C3C5);
	font-size: 0.85rem;
}

.dvz-promo-flash-info .dvz-cta {
	margin-top: 4px;
}