/* =========================================================================
   Popup de bienvenida (2.9.0) — template-parts/bienvenida.php + assets/js/bienvenida.js
   Tarjeta oscura sobre un velo, la recepcionista asomándose por arriba y un solo azul.
   ========================================================================= */

.aibv {
	position: fixed; inset: 0; z-index: 400;
	display: grid; place-items: center; overflow-y: auto;
	padding: calc(110px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.aibv[hidden] { display: none; }
.aibv__fondo {
	position: fixed; inset: 0;
	background: rgba(6, 6, 12, 0.66);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	animation: aibv-velo 0.3s ease both;
}
@keyframes aibv-velo { from { opacity: 0; } }

.aibv__marco { position: relative; width: min(100%, 440px); }

/* La recepcionista va DETRÁS de la tarjeta: asoman cabeza, diadema y el brazo que saluda.
   Sale desde atrás con el mismo rebote que en la burbuja del chat. */
.aibv__gata {
	position: absolute; z-index: 0; left: 50%; top: -102px;
	width: 130px; height: auto; margin-left: -65px; pointer-events: none;
	filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
	animation: aibv-asoma 0.6s cubic-bezier(0.34, 1.5, 0.64, 1) 0.25s both;
}
@keyframes aibv-asoma { from { transform: translateY(100%); } }

.aibv__tarjeta {
	position: relative; z-index: 1; outline: none;
	padding: 34px 34px 24px; border-radius: 28px; text-align: center;
	background:
		radial-gradient(90% 60% at 50% 0%, rgba(36, 56, 255, 0.22), transparent 70%),
		#12121C;
	border: 1px solid rgba(250, 250, 247, 0.12);
	box-shadow: 0 40px 120px -30px rgba(36, 56, 255, 0.55), 0 30px 60px -30px rgba(0, 0, 0, 0.7);
	color: #FAFAF7;
	animation: aibv-entra 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes aibv-entra { from { opacity: 0; transform: translateY(18px) scale(0.97); } }

.aibv.is-saliendo .aibv__fondo, .aibv.is-saliendo .aibv__marco { opacity: 0; transition: opacity 0.2s ease; }

.aibv__x {
	position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; padding: 0;
	display: grid; place-items: center; border: 0; border-radius: 10px;
	background: transparent; color: #8E8E98; cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}
.aibv__x svg { width: 20px; height: 20px; }
.aibv__x:hover { background: rgba(250, 250, 247, 0.08); color: #FAFAF7; }
.aibv__x:focus-visible { outline: 2px solid var(--azul-claro, #8E97FF); outline-offset: 2px; }

.aibv__marca { margin: 0 0 10px; font: 800 15px/1 var(--sans); letter-spacing: -0.04em; color: #FAFAF7; }
.aibv__marca span { color: var(--azul, #2438FF); }
.aibv__t {
	margin: 0 auto; max-width: 14em; text-wrap: balance;
	font: 800 clamp(25px, 6.4vw, 31px)/1.1 var(--sans); letter-spacing: -0.035em; color: #FAFAF7;
}
.aibv__t em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.08em; letter-spacing: -0.01em; color: var(--azul-claro, #8E97FF); }
.aibv__sub { margin: 12px auto 0; max-width: 30em; font-size: 15.5px; line-height: 1.5; color: #B5B5BD; }
.aibv__sub b { font-weight: 700; color: var(--azul-claro, #8E97FF); }

.aibv__acciones { display: grid; gap: 10px; margin-top: 24px; }
.aibv__btn {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 18px; border-radius: 14px;
	font: 600 15.5px/1.2 var(--sans); text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.aibv__btn:focus-visible { outline: 2px solid var(--azul-claro, #8E97FF); outline-offset: 3px; }
.aibv__btn--google { background: #0C0C14; border: 1px solid rgba(250, 250, 247, 0.16); color: #FAFAF7; }
.aibv__btn--google svg { width: 20px; height: 20px; flex: none; }
.aibv__btn--google:hover { border-color: rgba(250, 250, 247, 0.4); background: #15151F; }
.aibv__btn--principal {
	background: var(--azul, #2438FF); color: #fff; font-weight: 700;
	box-shadow: 0 16px 36px -16px rgba(36, 56, 255, 0.95);
}
.aibv__btn--principal:hover { background: var(--azul-tinta, #111CB8); transform: translateY(-1px); }
.aibv__btn--principal span[aria-hidden] { transition: transform 0.2s; }
.aibv__btn--principal:hover span[aria-hidden] { transform: translateX(3px); }

.aibv__o { display: flex; align-items: center; gap: 12px; margin: 2px 0; font-size: 13px; color: #8E8E98; }
.aibv__o::before, .aibv__o::after { content: ''; flex: 1; height: 1px; background: rgba(250, 250, 247, 0.12); }

.aibv__sin { margin: 16px 0 0; font-size: 13.5px; font-weight: 600; color: #D9D9E0; }
.aibv__sin::before { content: '✓'; margin-right: 6px; font-weight: 800; color: var(--azul-claro, #8E97FF); }
.aibv__demo { margin: 8px 0 0; font-size: 14px; color: #8E8E98; }
.aibv__demo a { color: var(--azul-claro, #8E97FF); text-decoration: underline; text-underline-offset: 3px; }
.aibv__legal {
	margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(250, 250, 247, 0.1);
	font-size: 12px; line-height: 1.55; color: #8E8E98;
}
.aibv__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 480px) {
	.aibv { padding-top: calc(96px + env(safe-area-inset-top, 0px)); }
	.aibv__tarjeta { padding: 30px 20px 20px; border-radius: 24px; }
	.aibv__gata { width: 112px; top: -88px; margin-left: -56px; }
}

/* Con el popup abierto la página de atrás no se desplaza. */
html.aibv-abierto, html.aibv-abierto body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.aibv__fondo, .aibv__gata, .aibv__tarjeta { animation: none; }
	.aibv__btn, .aibv__x, .aibv__btn--principal span[aria-hidden] { transition: none; }
}