/* Movimiento y pulido de la landing. Se carga después de landing.css. */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

/* Cabecera fija que se compacta al hacer scroll. */
.ak-site-header {
	position: sticky !important;
	top: 0;
	z-index: 50;
	transition: box-shadow .25s ease, background-color .25s ease;
}
.admin-bar .ak-site-header { top: 32px; }
.ak-site-header__inner { transition: min-height .25s ease; }
.ak-site-header.is-scrolled { box-shadow: 0 10px 30px rgba(16, 26, 54, .08); background: rgba(251, 250, 247, .96); }
.ak-site-header.is-scrolled .ak-site-header__inner { min-height: 60px; }
.ak-site-nav a { position: relative; }
.ak-site-nav a:not(.ak-site-nav__cta)::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -4px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.ak-site-nav a:not(.ak-site-nav__cta):hover::after { transform: scaleX(1); }

/* Aparición al entrar en pantalla (solo si landing.js está activo). */
.ak-motion .ak-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s cubic-bezier(.22, 1, .36, 1) var(--ak-delay, 0ms), transform .6s cubic-bezier(.22, 1, .36, 1) var(--ak-delay, 0ms);
}
.ak-motion .ak-reveal.is-visible { opacity: 1; transform: none; }

/* Hero: entrada, tarjeta flotante con inclinación y halos que respiran. */
.ak-l-hero__copy > * { animation: ak-l-rise .7s cubic-bezier(.22, 1, .36, 1) both; }
.ak-l-hero__copy > :nth-child(2) { animation-delay: .06s; }
.ak-l-hero__copy > :nth-child(3) { animation-delay: .12s; }
.ak-l-hero__copy > :nth-child(4) { animation-delay: .18s; }
.ak-l-hero__copy > :nth-child(5) { animation-delay: .24s; }
@keyframes ak-l-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ak-l-product-card {
	transform: perspective(900px) rotateX(var(--ak-tilt-x, 0deg)) rotateY(var(--ak-tilt-y, 0deg)) rotate(2deg);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1);
	animation: ak-l-float 6s ease-in-out infinite;
}
@keyframes ak-l-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.ak-l-answer--active { animation: ak-l-correct 4s ease-in-out 1.2s infinite; }
@keyframes ak-l-correct { 0%, 70%, 100% { box-shadow: none; } 80% { box-shadow: 0 0 0 6px rgba(52, 211, 153, .25); } }
.ak-l-orbit { animation: ak-l-breathe 8s ease-in-out infinite; }
.ak-l-orbit--two { animation-delay: -4s; }
@keyframes ak-l-breathe { 0%, 100% { scale: 1; opacity: .9; } 50% { scale: 1.06; opacity: 1; } }

/* Botones: brillo al pasar por encima. */
.ak-l-btn { position: relative; overflow: hidden; }
.ak-l-btn--primary::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform .7s cubic-bezier(.22, 1, .36, 1);
	pointer-events: none;
}
.ak-l-btn--primary:hover::after { transform: translateX(120%); }
.ak-l-btn span[aria-hidden] { display: inline-block; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.ak-l-btn:hover span[aria-hidden] { transform: translateX(4px); }

/* Tarjetas: elevación al pasar por encima. */
.ak-l-steps > article,
.ak-l-benefits > article,
.ak-l-plan {
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease;
}
.ak-l-steps > article:hover,
.ak-l-benefits > article:hover,
.ak-l-plan:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 50px rgba(16, 26, 54, .12);
}
.ak-l-plan--featured { box-shadow: 0 0 0 1px rgba(56, 189, 248, .35), 0 24px 60px rgba(167, 139, 250, .22); }
.ak-l-plan--featured:hover { box-shadow: 0 0 0 1px rgba(56, 189, 248, .5), 0 28px 70px rgba(167, 139, 250, .3); }

/* Comunidad: la barra se llena al verse. */
.ak-motion .ak-l-community__meter span { width: 0 !important; transition: width 1.4s cubic-bezier(.22, 1, .36, 1) .3s; }
.ak-motion .ak-l-community__panel.is-visible .ak-l-community__meter span { width: 68% !important; }

/* Demo: respuesta con rebote. */
.ak-l-options button { transition: transform .18s cubic-bezier(.22, 1, .36, 1), border-color .18s, background-color .18s; }
.ak-l-options button.is-correct { animation: ak-l-pop .45s cubic-bezier(.22, 1, .36, 1); }
.ak-l-options button.is-wrong { animation: ak-l-shake .35s ease; }
@keyframes ak-l-pop { 40% { transform: scale(1.02); } }
@keyframes ak-l-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } }
.ak-l-feedback:not([hidden]) { animation: ak-l-rise .4s cubic-bezier(.22, 1, .36, 1); }

/* FAQ con apertura suave e indicador. */
.ak-l-faqs details { transition: border-color .2s, box-shadow .2s; }
.ak-l-faqs details[open] { border-color: rgba(56, 189, 248, .45); box-shadow: 0 12px 30px rgba(16, 26, 54, .07); }
.ak-l-faqs summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; }
.ak-l-faqs summary::-webkit-details-marker { display: none; }
.ak-l-faqs summary::after { content: "+"; flex: 0 0 auto; font-weight: 700; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.ak-l-faqs details[open] summary::after { transform: rotate(45deg); }
.ak-l-faqs details[open] p { animation: ak-l-rise .35s cubic-bezier(.22, 1, .36, 1); }

@media (max-width: 782px) { .admin-bar .ak-site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .ak-site-header { top: 0; } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ak-l-hero__copy > *, .ak-l-product-card, .ak-l-answer--active, .ak-l-orbit,
	.ak-l-options button, .ak-l-feedback, .ak-l-faqs details[open] p { animation: none !important; }
	.ak-l-product-card { transform: rotate(2deg); }
}

/* Toggle de facturación */
.ak-l-billing { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 14px 0 6px; padding: 4px; border-radius: 999px; background: rgba(16, 26, 54, .07); }
.ak-l-billing button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; transition: background-color .25s cubic-bezier(.22, 1, .36, 1), color .25s, box-shadow .25s; }
.ak-l-billing button.is-active { background: #fff; color: var(--al-navy); box-shadow: 0 4px 14px rgba(16, 26, 54, .14); }
.ak-l-billing button:focus-visible { outline: 3px solid rgba(31, 79, 216, .4); outline-offset: 2px; }
.ak-l-save { padding: 2px 8px; border-radius: 999px; background: var(--al-red); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.ak-l-price.is-bump { animation: ak-l-bump .35s cubic-bezier(.22, 1, .36, 1); }
@keyframes ak-l-bump { 0% { transform: translateY(6px); opacity: .3; } 100% { transform: none; opacity: 1; } }
.ak-l-plan__fine { display: block; margin-top: 10px; opacity: .72; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .ak-l-price.is-bump { animation: none; } }

/* Paleta común con la app: marino, azul de acción y rojo fuego. */
:root { --al-blue: #1f4fd8; --al-navy: #101a36; --al-red: #e30620; }