/* UniforMed · Botones flotantes y marcas
   Namespace .umf- para no chocar con Woodmart ni Elementor. */

/* Woodmart estiliza TODO <button> con `:is(.btn,.button,button,…)`, que empata
   en especificidad con una clase y gana por orden de carga: mete padding y
   quita el radio, lo que llega a colapsar el contenido a 0 px de ancho.
   Las custom properties se heredan y no compiten, así que neutralizarlas en los
   dos contenedores raíz cubre de una vez todos los botones del plugin. */
.umf-flotantes,
.umf-modal {
	--btn-padding: 0;
	--btn-brd-radius: 50%;
	--btn-height: auto;
}

.umf-flotantes {
	--umf-navy: #2c2a63;
	--umf-red: #e3202b;
	--umf-wa: #25d366;
	--umf-size: 58px;

	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 998;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

/* ---------- Botones flotantes ---------- */

.umf-btn {
	/* Woodmart aplica padding y border-radius a todo <button> con :is(...), que
	   empata en especificidad con .umf-btn y gana por orden de carga. Las
	   variables se heredan y no compiten, así que son la vía limpia. */
	--btn-padding: 0;
	--btn-brd-radius: 50%;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--umf-size);
	height: var(--umf-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease;
	-webkit-tap-highlight-color: transparent;
}

.umf-btn:hover,
.umf-btn:focus-visible {
	transform: scale(1.07);
	box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
}

.umf-btn:focus-visible {
	outline: 3px solid var(--umf-navy);
	outline-offset: 3px;
}

.umf-btn-sello img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.umf-btn-wa {
	background: var(--umf-wa);
	color: #fff;
	text-decoration: none;
}

.umf-btn-wa svg {
	width: 55%;
	height: 55%;
}

/* Latido discreto para que el sello se note sin ser molesto. */
@media (prefers-reduced-motion: no-preference) {
	.umf-btn-sello::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		border: 2px solid var(--umf-red);
		opacity: 0;
		animation: umf-latido 3.2s ease-out infinite;
	}

	.umf-flotantes.is-open .umf-btn-sello::before {
		animation: none;
	}
}

@keyframes umf-latido {
	0%   { transform: scale(1);    opacity: .8; }
	70%  { transform: scale(1.45); opacity: 0; }
	100% { transform: scale(1.45); opacity: 0; }
}

/* ---------- Tooltip ---------- */

.umf-tooltip {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%);
	padding: 7px 12px;
	border-radius: 6px;
	background: var(--umf-navy);
	color: #fff;
	font-size: 13px;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .18s ease;
}

.umf-btn:hover .umf-tooltip,
.umf-btn:focus-visible .umf-tooltip {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 767px) {
	.umf-tooltip { display: none; }
}

/* ---------- Modal ---------- */

.umf-modal {
	--umf-navy: #2c2a63;
	--umf-red: #e3202b;
	--umf-wa: #25d366;

	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.umf-modal[hidden] { display: none; }

.umf-modal-fondo {
	position: absolute;
	inset: 0;
	background: rgba(18, 17, 40, .62);
	backdrop-filter: blur(3px);
	animation: umf-fade .2s ease;
}

.umf-modal-caja {
	position: relative;
	width: 100%;
	max-width: 920px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	/* 56px arriba: la X ocupa hasta los 48px (12 de margen + 36 de alto), así el
	   título nunca queda por debajo de ella ni en pantallas estrechas. */
	padding: 56px 30px 30px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
	animation: umf-subir .24s ease;
	text-align: center;
}

/* Recibe el foco al abrir para que el lector de pantalla entre en el diálogo,
   pero sin dibujar un anillo sobre un elemento que no es interactivo. */
.umf-modal-caja:focus { outline: none; }

@keyframes umf-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes umf-subir {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.umf-modal-fondo,
	.umf-modal-caja { animation: none; }
}

/* El selector lleva .umf-modal a propósito: Woodmart fuerza `position: relative`
   en todo <button> y, al empatar en especificidad, ganaba por orden de carga
   dejando la X centrada sobre el título. `position` no es una custom property,
   así que aquí no sirve el truco de las variables. */
.umf-modal .umf-cerrar {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f1f1f5;
	color: var(--umf-navy);
	cursor: pointer;
	transition: background .15s ease;
}

.umf-cerrar:hover { background: #e2e2ea; }

.umf-cerrar:focus-visible {
	outline: 3px solid var(--umf-navy);
	outline-offset: 2px;
}

.umf-cerrar svg {
	width: 20px;
	height: 20px;
}

.umf-modal-titulo {
	margin: 0 0 6px;
	color: var(--umf-navy);
	font-size: 25px;
	line-height: 1.2;
}

.umf-modal-bajada {
	margin: 0 0 26px;
	color: #6b6b7b;
	font-size: 15px;
	line-height: 1.45;
}

/* ---------- Tarjetas de marca ---------- */

.umf-marcas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.umf-marca {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 22px 16px 20px;
	border: 1px solid #e7e7ee;
	border-radius: 12px;
	background: #fff;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.umf-marca:hover {
	border-color: var(--umf-navy);
	box-shadow: 0 10px 26px rgba(44, 42, 99, .13);
	transform: translateY(-3px);
}

.umf-marca-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 62px;
	margin-bottom: 12px;
}

.umf-marca-logo img {
	max-width: 100%;
	max-height: 62px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.umf-marca-nombre {
	color: var(--umf-navy);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.umf-marca-nombre:hover {
	color: var(--umf-red);
	text-decoration: underline;
}

.umf-marca-rubro {
	margin: 3px 0 0;
	color: #83839a;
	font-size: 13px;
	line-height: 1.3;
}

/* Redes */

.umf-redes {
	display: flex;
	gap: 8px;
	margin: 14px 0 0;
}

.umf-red {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #f1f1f5;
	color: var(--umf-navy);
	text-decoration: none;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}

.umf-red svg {
	width: 16px;
	height: 16px;
}

.umf-red:hover {
	color: #fff;
	transform: translateY(-2px);
}

.umf-red--facebook:hover  { background: #1877f2; }
.umf-red--instagram:hover { background: #d62976; }
.umf-red--tiktok:hover    { background: #010101; }
.umf-red--youtube:hover   { background: #ff0000; }
.umf-red--linkedin:hover  { background: #0a66c2; }
.umf-red--x:hover         { background: #010101; }

/* Contacto */

.umf-contacto {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	margin-top: 16px;
}

.umf-tel,
.umf-wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: filter .15s ease;
}

.umf-tel svg,
.umf-wa svg {
	width: 15px;
	height: 15px;
	flex: none;
}

.umf-tel {
	border: 1px solid #dcdce6;
	background: #fff;
	color: var(--umf-navy);
}

.umf-tel:hover {
	border-color: var(--umf-navy);
	color: var(--umf-navy);
}

.umf-wa {
	background: var(--umf-wa);
	color: #fff;
}

.umf-wa:hover {
	filter: brightness(.93);
	color: #fff;
}

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

@media (max-width: 900px) {
	.umf-marcas { grid-template-columns: 1fr; gap: 14px; }

	.umf-marca {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		text-align: left;
		padding: 16px;
		row-gap: 4px;
		column-gap: 14px;
	}

	.umf-marca-logo {
		height: 48px;
		margin-bottom: 0;
		flex: 0 0 108px;
	}

	.umf-marca-logo img { max-height: 48px; }

	.umf-marca-nombre,
	.umf-marca-rubro { flex: 1 1 auto; text-align: left; }

	.umf-marca-nombre { align-self: flex-end; }
	.umf-marca-rubro  { align-self: flex-start; }

	.umf-redes    { flex: 1 1 100%; margin-top: 10px; }
	.umf-contacto { flex: 1 1 100%; flex-direction: row; margin-top: 10px; }
	.umf-tel,
	.umf-wa       { flex: 1 1 0; }
}

@media (max-width: 600px) {
	.umf-flotantes { right: 14px; bottom: 14px; --umf-size: 52px; gap: 10px; }
	.umf-modal { padding: 12px; }
	.umf-modal-caja { padding: 54px 16px 20px; max-height: calc(100vh - 24px); }
	.umf-modal-titulo { font-size: 21px; }
	.umf-modal-bajada { margin-bottom: 18px; font-size: 14px; }
}

/* Bloquea el scroll de fondo con el modal abierto. */
body.umf-modal-abierto { overflow: hidden; }