/* ============================================================
   FRAGUIA · fx.css — capa de vida (ambient + hover + reveals)
   Todo depende de CSS puro o de fx.js con red de seguridad, así
   que la web nunca se queda "muerta" ni con contenido invisible.
   ============================================================ */

@keyframes fx-float   { 0%,100% { transform: translateY(0);    } 50% { transform: translateY(-7px); } }
@keyframes fx-float-2 { 0%,100% { transform: translateY(-3px);  } 50% { transform: translateY(5px);  } }
@keyframes fx-shine   { 0% { transform: translateX(-160%) skewX(-12deg); } 60%,100% { transform: translateX(320%) skewX(-12deg); } }
@keyframes fx-breathe { 0%,100% { opacity:.5; transform: scale(1); } 50% { opacity:1; transform: scale(1.06); } }
@keyframes fx-rise    { from { opacity:0; transform: translateY(22px); } to { opacity:1; transform: none; } }
@keyframes fx-gradpan { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes fx-spin    { to { transform: rotate(360deg); } }

/* ── Ambient: micro-movimiento continuo (se siente vivo al instante) ── */
.short-mock { animation: fx-float 5.5s var(--ease-sig) infinite; }
.showcase .short:nth-child(2n) .short-mock { animation-name: fx-float-2; animation-duration: 6.5s; }
.hero-trust::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,107,44,.10), transparent 70%);
  background-size: 220% 100%; animation: fx-gradpan 6s linear infinite;
}
/* aro que gira lento tras el logo de la nav al hover */
.brand:hover .brand-logo { animation: fx-breathe 1.4s var(--ease-sig) infinite; }

/* ── Hover con vida: lift + brillo que barre + realce de borde ── */
.feature, .plan, .case, .pcard, .step-card, .short, .lead-form .btn, .cta-stat {
  transition: transform .4s var(--ease-expo), box-shadow .4s var(--ease-expo), border-color .3s ease;
}
.feature:hover, .pcard:hover, .step-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.case:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Barrido de brillo (solo en tarjetas que ya recortan su contenido) */
.feature { position: relative; overflow: hidden; }
.feature::after {
  content:''; position:absolute; top:0; left:0; width:45%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform: translateX(-160%) skewX(-12deg); pointer-events:none; opacity:0;
}
.feature:hover::after { opacity:1; animation: fx-shine 1.05s var(--ease-expo); }
.short:hover { transform: translateY(-8px) scale(1.015); box-shadow: var(--shadow-lg); }

/* Puntito "en vivo" y dots: respiración */
.hero-trust .dot, .live-dot { animation: fx-breathe 2.2s var(--ease-sig) infinite; }

/* Botón primario: glow que late muy sutil */
.btn-primary { position: relative; }
.btn-primary::before {
  content:''; position:absolute; inset:-2px; border-radius:inherit; z-index:-1; opacity:.0;
  background: radial-gradient(60% 120% at 50% 50%, rgba(255,107,44,.55), transparent 70%);
  transition: opacity .3s ease;
}
.btn-primary:hover::before { opacity:1; }

/* ── Reveals con variedad (data-fx), red de seguridad en fx.js ── */
/* reveals SUTILES y limpios (subida corta + fundido rápido; nada aparatoso) */
[data-fx] { opacity: 0; transition: opacity .6s var(--ease-expo), transform .6s var(--ease-expo), filter .6s var(--ease-expo); will-change: transform, opacity; }
[data-fx="up"]    { transform: translateY(18px); }
[data-fx="left"]  { transform: translateX(-22px); }
[data-fx="right"] { transform: translateX(22px); }
[data-fx="scale"] { transform: scale(.97); }
[data-fx="blur"]  { filter: blur(7px); opacity: 0; }
[data-fx].fx-in   { opacity: 1; transform: none; filter: none; }
[data-anim="fade-up"] { transform: translateY(16px); transition: opacity .55s var(--ease-expo), transform .55s var(--ease-expo); transition-delay: var(--a-delay, 0s); }
[data-anim="fade-up"].is-in { transform: none; }
/* tras revelar quitamos will-change: evita que la capa recorte cosas que
   sobresalen (p.ej. la etiqueta "Nuestro modelo" de la tarjeta destacada) */
[data-anim].is-in, [data-fx].fx-in { will-change: auto; }
#precios .plan[data-anim] { transform: translateY(20px) scale(.985); transition: opacity .6s var(--ease-expo), transform .6s var(--ease-expo); transition-delay: var(--a-delay, 0s); }
#precios .plan[data-anim].is-in { transform: none; }
#precios .pricing, #precios .plan { overflow: visible; }

/* ── BOTONES: glow al hover + elevación con sombra difusa + jello (magnético lo pone fx.js) ── */
.btn-primary:hover { box-shadow: 0 16px 44px -8px rgba(255,107,44,.55), 0 0 26px rgba(255,107,44,.42) !important; }
.btn-ghost:hover, .btn-dark:hover { box-shadow: 0 16px 38px -12px rgba(35,31,32,.42) !important; }
@keyframes fx-jello { 0%,100%{transform:scale(1,1)} 25%{transform:scale(1.08,.92)} 45%{transform:scale(.94,1.06)} 65%{transform:scale(1.03,.97)} 85%{transform:scale(.99,1.01)} }
/* REBOTE al tocar el botón (sin imán): lo dispara fx.js añadiendo .fx-tap */
.btn.fx-tap { animation: fx-tap-bounce .48s var(--ease-sig); }
/* EFECTO DE AGUA: onda que se expande desde el clic (la crea fx.js) */
/* EFECTO DE AGUA: ola translúcida que sube al pasar y al pulsar (visible en
   cualquier botón; al ser un RELLENO no se ve "cortada" como el ripple). */
.btn, .cta-pill { position: relative; overflow: hidden; }
.btn::after, .cta-pill::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 200%; aspect-ratio: 1 / 1; transform: translate(-50%, 108%); border-radius: 44% 47% 42% 46%; background: rgba(255,255,255,.24); pointer-events: none; z-index: 0; transition: transform .65s cubic-bezier(.34,.9,.3,1); }
.btn:hover::after, .cta-pill:hover::after { transform: translate(-50%, 40%) rotate(240deg); }
.btn.fx-tap::after { transform: translate(-50%, 18%) rotate(130deg); }
@keyframes fx-tap-bounce { 0% { transform: scale(1); } 26% { transform: scale(.9); } 52% { transform: scale(1.08); } 74% { transform: scale(.97); } 100% { transform: scale(1); } }
.bento-card:active, .feature:active { transform: scale(.986); }
/* #7 relleno deslizante en botones ghost (se llena desde el centro al hover) */
/* (el relleno ghost se sustituye por el efecto de agua de arriba) */
/* #30 destello/glare que cruza las tarjetas al pasar (no en .plan: recortaría la etiqueta) */
.bento-card::before { content: ""; position: absolute; top: 0; left: -75%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; z-index: 3; }
.bento-card:hover::before { animation: fx-glare .85s var(--ease-expo); }
@keyframes fx-glare { 0% { left: -75%; opacity: 0; } 20% { opacity: 1; } 100% { left: 135%; opacity: 0; } }
/* #20 focus-blur: al enfocar una tarjeta, las hermanas se atenúan */
.features .feature, .bento .bento-card { transition: opacity .3s ease, transform .35s var(--ease-expo), box-shadow .35s var(--ease-expo); }
.features:hover .feature:not(:hover), .bento:hover .bento-card:not(:hover) { opacity: .58; }

/* Nunca dejar contenido invisible: si el JS no corriera, tras la animación
   de arranque el contenido con data-anim aparece igualmente. */
.no-js [data-anim], .no-js [data-fx] { opacity: 1 !important; transform: none !important; filter: none !important; }

@media (prefers-reduced-motion: reduce) {
  .short-mock, .hero-trust::before, .hero-trust .dot, .live-dot { animation: none !important; }
  [data-fx] { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* Precios en 2 planes (a medida + mantenimiento): 2 columnas centradas */
.pricing.pricing-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
@media (max-width: 720px) { .pricing.pricing-2 { grid-template-columns: 1fr; max-width: 480px; } }