/* ui.css — overhaul AGRESIVO (look app moderno tipo Kajabi/Skool), layout-safe */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');

*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html{ scroll-behavior:smooth; }
::selection{ background:rgba(111,117,84,.22); }

/* Tipografía moderna en la UI; títulos con serif editorial elegante */
body{ font-family:'Inter',system-ui,-apple-system,sans-serif !important; letter-spacing:-.01em; }
[style*="sans-serif"]{ font-family:'Inter',system-ui,sans-serif !important; }
h1,h2,h3,.hero h1,.confirm-title,.qa-t,.prospects-title,.hoy-greet,.fn-title,.modal-header h2,.last-step-title{
  font-family:'Fraunces','Georgia',serif !important; letter-spacing:-.02em !important; font-weight:600 !important;
}

/* Fondo con profundidad cálida */
body{ background-image:radial-gradient(1100px 560px at 50% -8%, rgba(197,167,107,.13), transparent 60%) !important; background-attachment:fixed; }

/* Tarjetas: amplias, hairline, sombra moderna en capas + lift */
.card,.qa-box,.stat-card,.fn-card,.tcard,.shop,.mod,.links-card,.funnel-card,.kb-card,.prospect-card,.les,.prog-band,.hub-btn{
  border-radius:22px !important;
  border:1px solid rgba(111,117,84,.10) !important;
  box-shadow:0 1px 2px rgba(60,60,45,.05), 0 18px 40px -14px rgba(60,60,45,.22) !important;
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .25s ease !important;
}
.card:hover,.fn-card:hover,.tcard:hover,.shop:hover,.prospect-card:hover{ transform:translateY(-3px); box-shadow:0 2px 8px rgba(60,60,45,.07), 0 30px 60px -16px rgba(60,60,45,.30) !important; }

/* Botones: pill grande, gradiente, elevación y rebote */
button,.btn,a.btn,.wa-btn,.cta,.hub-btn,.fup-quick,.note-btn,.modal-btn,.pbtn,.seg-act,.lbtn,
.ctrl-btn,.tab,.pb-btn,.hoy-ai,.tpl-btn,.action-btn,.seg-btn,.lbtn-wa,.done-btn{
  border-radius:14px !important; font-weight:600 !important;
  transition:transform .15s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, filter .2s ease !important;
}
.btn-primary,.note-btn,.cta,.pbtn-view,.action-view,.hoy-ai{
  background:linear-gradient(135deg,#7a8060,#62684a) !important; color:#fff !important; border:none !important;
  box-shadow:0 10px 22px -8px rgba(111,117,84,.6) !important;
}
.wa-btn,.lbtn-wa,.pbtn-wa,.action-wa{ background:linear-gradient(135deg,#2bd46a,#16a84f) !important; color:#fff !important; box-shadow:0 10px 22px -8px rgba(22,168,79,.55) !important; }
button:hover,.btn:hover,a.btn:hover,.wa-btn:hover,.cta:hover,.hub-btn:hover,.note-btn:hover,.pbtn:hover,.fup-quick:hover{ transform:translateY(-2px); filter:brightness(1.04) saturate(1.06); }
button:active,.btn:active,.wa-btn:active,.cta:active,.fup-quick:active,.note-btn:active{ transform:translateY(0) scale(.97); }

/* Inputs / selects modernos con foco suave */
input,select,textarea{ border-radius:13px !important; }
input:focus,select:focus,textarea:focus{ outline:none !important; border-color:#8a9068 !important; box-shadow:0 0 0 4px rgba(111,117,84,.16) !important; }

/* Badges / pills */
.badge,.badge-live,.kb-badge,.link-tag,.pill,.tag-chip,.contact-chip,.pcard-priority,.fup-chip{ border-radius:999px !important; }

/* Header con profundidad */
header{ box-shadow:0 8px 30px -12px rgba(60,60,45,.5) !important; }

/* Overlays: blur de fondo (profundidad app) */
#modal-overlay,[id$="-ov"]{ backdrop-filter:blur(6px) saturate(1.1); -webkit-backdrop-filter:blur(6px) saturate(1.1); }
#modal-box,.qa-box{ border-radius:24px !important; }

/* Scrollbars finas y pulidas */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:rgba(111,117,84,.32); border-radius:10px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(111,117,84,.55); background-clip:content-box; }
*::-webkit-scrollbar-track{ background:transparent; }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } html{ scroll-behavior:auto; } }