/* ZEArte Inicio — «Habla con nosotros»: píldora tapizada que abre un cuadro con dos WhatsApp. */

/* Icono de WhatsApp: tipografía Font Awesome Brands (licencia SIL OFL), cargada solo para este botón */
@font-face {
	font-family: "ZH Brands";
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2") format("woff2");
}

.zh-wa {
	--zh-wa-bg: #222529;
	--zh-wa-ink: #ffffff;
	--zh-wa-chip: #25d366;
	--zh-wa-chip-ink: #0d2a19;
	--zh-wa-bottom: 24px;
	--zh-wa-delay: 2s;
	--zh-wa-pad: 8px;
	--zh-wa-chip-size: 52px;
	--zh-wa-icon: 34px;

	position: fixed;
	bottom: calc(var(--zh-wa-bottom) + env(safe-area-inset-bottom, 0px));
	z-index: 9990;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	opacity: 0;
	animation: zh-wa-in .55s cubic-bezier(.2, .9, .3, 1) var(--zh-wa-delay) forwards;
}
.zh-wa--right { right: 20px; align-items: flex-end; }
.zh-wa--left { left: 20px; align-items: flex-start; }

/* ---- Botón (píldora) ---- */
.zh-wa .zh-wa__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	margin: 0;
	padding: var(--zh-wa-pad);
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 55%), var(--zh-wa-bg);
	color: var(--zh-wa-ink);
	font: inherit;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .45), 0 3px 8px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .16);
	transition: transform .25s ease, box-shadow .25s ease;
	-webkit-appearance: none;
	appearance: none;
}
/* La costura */
.zh-wa .zh-wa__btn::before {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1.5px dashed rgba(128, 128, 128, .5);
	border-color: color-mix(in srgb, var(--zh-wa-ink) 30%, transparent);
	border-radius: inherit;
	pointer-events: none;
	transition: border-color .25s ease;
}
.zh-wa .zh-wa__btn:hover,
.zh-wa .zh-wa__btn:focus-visible {
	color: var(--zh-wa-ink);
	text-decoration: none;
	transform: translateY(-3px);
	box-shadow: 0 20px 36px -8px rgba(0, 0, 0, .5), 0 4px 10px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.zh-wa .zh-wa__btn:hover::before,
.zh-wa .zh-wa__btn:focus-visible::before { border-color: var(--zh-wa-chip); }
.zh-wa .zh-wa__btn:focus-visible { outline: 3px solid var(--zh-wa-chip); outline-offset: 3px; }

/* ---- Recuadro redondo con el icono ---- */
.zh-wa .zh-wa__chip {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: var(--zh-wa-chip-size);
	height: var(--zh-wa-chip-size);
	border-radius: 50%;
	background: var(--zh-wa-chip);
	color: var(--zh-wa-chip-ink);
	transition: transform .3s cubic-bezier(.3, 1.5, .5, 1);
}
.zh-wa .zh-wa__btn:hover .zh-wa__chip,
.zh-wa .zh-wa__btn:focus-visible .zh-wa__chip { transform: scale(1.07) rotate(-6deg); }

/* El icono ocupa casi todo el círculo */
.zh-wa .zh-wa__glyph {
	display: block;
	font-family: "ZH Brands";
	font-weight: 400;
	font-style: normal;
	font-size: var(--zh-wa-icon);
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.zh-wa .zh-wa__glyph::before { content: "\f232"; }
.zh-wa .zh-wa__fallback { display: none; width: calc(var(--zh-wa-icon) - 4px); height: calc(var(--zh-wa-icon) - 4px); }
.zh-wa.zh-wa--nofont .zh-wa__glyph { display: none; }
.zh-wa.zh-wa--nofont .zh-wa__fallback { display: block; }
.zh-wa .zh-wa__img { display: block; width: calc(var(--zh-wa-chip-size) - 12px); height: calc(var(--zh-wa-chip-size) - 12px); max-width: none; object-fit: contain; }

/* Aro que se expande tres veces al aparecer y se queda quieto */
.zh-wa .zh-wa__btn .zh-wa__chip::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	opacity: 0;
	animation: zh-wa-ping 2.2s ease-out calc(var(--zh-wa-delay) + .7s) 3;
}

/* ---- Texto del botón ---- */
.zh-wa .zh-wa__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 22px 0 14px;
	text-align: left;
	white-space: nowrap;
}
.zh-wa .zh-wa__label { display: block; font-size: 16px; line-height: 1.1; font-weight: 700; letter-spacing: .005em; }
.zh-wa .zh-wa__sub { display: block; font-size: 12px; line-height: 1.1; font-weight: 500; opacity: .72; }

/* Estilo compacto: solo el icono; el texto se despliega */
.zh-wa--compact .zh-wa__text {
	max-width: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-width .4s ease, padding .4s ease, opacity .25s ease;
}
.zh-wa--compact .zh-wa__btn:hover .zh-wa__text,
.zh-wa--compact .zh-wa__btn:focus-visible .zh-wa__text,
.zh-wa--compact.is-peek .zh-wa__text,
.zh-wa--compact.is-open .zh-wa__text { max-width: 300px; opacity: 1; padding: 0 22px 0 14px; }
.zh-wa--compact.zh-wa--right .zh-wa__btn .zh-wa__chip { order: 2; }
.zh-wa--compact.zh-wa--right .zh-wa__text { order: 1; }
.zh-wa--compact.zh-wa--right .zh-wa__btn:hover .zh-wa__text,
.zh-wa--compact.zh-wa--right .zh-wa__btn:focus-visible .zh-wa__text,
.zh-wa--compact.zh-wa--right.is-peek .zh-wa__text,
.zh-wa--compact.zh-wa--right.is-open .zh-wa__text { padding: 0 8px 0 18px; }

/* ---- Cuadro con las dos opciones: fondo blanco, píldoras verdes. Al abrirlo, el botón se oculta ---- */
.zh-wa.is-open .zh-wa__btn { display: none; }
.zh-wa .zh-wa__panel {
	position: relative;
	box-sizing: border-box;
	width: 330px;
	max-width: calc(100vw - 28px);
	padding: 18px 14px 14px;
	border-radius: 24px;
	background: #ffffff;
	color: #222529;
	box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .14), 0 0 0 1px rgba(34, 37, 41, .06);
	transform-origin: bottom right;
	animation: zh-wa-pop .28s cubic-bezier(.2, .9, .3, 1);
}
.zh-wa--left .zh-wa__panel { transform-origin: bottom left; }
.zh-wa .zh-wa__panel[hidden] { display: none; }
.zh-wa .zh-wa__title { margin: 0 34px 12px 6px; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: .01em; color: #222529; }
.zh-wa .zh-wa__close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f0ebe2;
	color: #222529;
	font: 400 18px/1 system-ui, sans-serif;
	cursor: pointer;
	transition: background .2s ease;
}
.zh-wa .zh-wa__close:hover { background: #e4ddd0; }
.zh-wa .zh-wa__close:focus-visible { outline: 2px solid #25d366; outline-offset: 2px; }
.zh-wa .zh-wa__opt {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px 9px 9px;
	border-radius: 999px;
	background: #25d366;
	color: #0d2a19;
	text-decoration: none;
	box-shadow: 0 8px 16px -8px rgba(37, 211, 102, .8);
	transition: background .2s ease, transform .2s ease;
}
.zh-wa .zh-wa__opt + .zh-wa__opt { margin-top: 10px; }
.zh-wa .zh-wa__opt:hover,
.zh-wa .zh-wa__opt:focus-visible {
	color: #0d2a19;
	text-decoration: none;
	background: #1fbd5a;
	transform: translateY(-2px);
}
.zh-wa .zh-wa__opt:focus-visible { outline: 2px solid #222529; outline-offset: 2px; }
.zh-wa .zh-wa__opt .zh-wa__chip { --zh-wa-chip-size: 46px; --zh-wa-icon: 30px; background: #ffffff; color: #25d366; }
.zh-wa .zh-wa__optxt { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.zh-wa .zh-wa__optxt strong { font-size: 15px; font-weight: 700; line-height: 1.15; color: inherit; }
.zh-wa .zh-wa__optxt small { font-size: 12px; font-weight: 500; line-height: 1.2; opacity: .78; color: inherit; }
.zh-wa .zh-wa__go { font-size: 26px; line-height: 1; opacity: .7; transition: transform .2s ease, opacity .2s ease; }
.zh-wa .zh-wa__opt:hover .zh-wa__go { opacity: 1; transform: translateX(3px); }

@keyframes zh-wa-in {
	from { opacity: 0; transform: translateY(16px) scale(.9); }
	to { opacity: 1; transform: none; }
}
@keyframes zh-wa-pop {
	from { opacity: 0; transform: translateY(10px) scale(.94); }
	to { opacity: 1; transform: none; }
}
@keyframes zh-wa-ping {
	0% { opacity: .55; box-shadow: 0 0 0 0 var(--zh-wa-chip); }
	100% { opacity: 0; box-shadow: 0 0 0 16px var(--zh-wa-chip); }
}

/* Celular: el botón es solo el icono; el cuadro sigue con texto */
@media (max-width: 600px) {
	.zh-wa { --zh-wa-pad: 6px; --zh-wa-chip-size: 50px; }
	.zh-wa--right { right: 14px; }
	.zh-wa--left { left: 14px; }
	.zh-wa .zh-wa__btn .zh-wa__text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.zh-wa { opacity: 1; animation: none; }
	.zh-wa .zh-wa__btn, .zh-wa .zh-wa__chip, .zh-wa .zh-wa__btn .zh-wa__chip::after, .zh-wa .zh-wa__text, .zh-wa .zh-wa__btn::before, .zh-wa .zh-wa__panel, .zh-wa .zh-wa__opt, .zh-wa .zh-wa__close { animation: none; transition: none; }
	.zh-wa .zh-wa__btn:hover, .zh-wa .zh-wa__btn:focus-visible, .zh-wa .zh-wa__opt:hover { transform: none; }
	.zh-wa .zh-wa__btn:hover .zh-wa__chip, .zh-wa .zh-wa__btn:focus-visible .zh-wa__chip { transform: none; }
}

@media print { .zh-wa { display: none; } }