/* =========================================================
   XtremePlays · Web pública profesional 2026
   Capa visual aplicada después de public.css
   ========================================================= */
:root{
  --xp-pro-bg:#06111a;
  --xp-pro-bg-2:#091723;
  --xp-pro-surface:#0d1c2a;
  --xp-pro-surface-2:#112436;
  --xp-pro-border:rgba(159,185,201,.15);
  --xp-pro-text:#f4f8f7;
  --xp-pro-muted:#94aab2;
  --xp-pro-accent:#37d6b0;
  --xp-pro-accent-2:#59a7ff;
  --xp-pro-danger:#ff6b63;
  --xp-pro-radius:20px;
}
body{
  background:
    radial-gradient(800px 500px at 4% -5%,rgba(55,214,176,.11),transparent 65%),
    radial-gradient(850px 520px at 105% 8%,rgba(89,167,255,.09),transparent 60%),
    linear-gradient(145deg,var(--xp-pro-bg),var(--xp-pro-bg-2) 56%,#061019)!important;
}
body::before{background-size:44px 44px!important;opacity:.55!important}
.xp-container{width:min(1180px,calc(100% - 32px))!important}
.xp-section{padding:88px 0!important}
.xp-section-compact{padding:64px 0!important}
.xp-section-head{max-width:760px!important;margin-bottom:38px!important}
.xp-section h2,.xp-landing-hero h1,.xp-legal h1{font-family:'Manrope',system-ui,sans-serif!important;text-transform:none!important;letter-spacing:-.055em!important;font-weight:900!important}
.xp-section h2{font-size:clamp(2.1rem,4vw,3.45rem)!important}
.xp-kicker{color:#8ce8d4!important;letter-spacing:.13em!important;font-size:.68rem!important}
.xp-kicker::before{background:var(--xp-pro-accent)!important;box-shadow:0 0 0 5px rgba(55,214,176,.08)!important}

/* Navegación */
.xp-public-header{background:rgba(6,17,26,.80)!important;border-bottom-color:rgba(159,185,201,.10)!important;backdrop-filter:blur(22px) saturate(130%)!important}
.xp-public-header.is-scrolled{box-shadow:0 14px 38px rgba(0,0,0,.17)!important}
.xp-nav-row{height:76px!important}
.xp-brand{min-width:150px!important}
.xp-brand img{height:52px!important;max-width:150px!important;object-fit:contain!important}
.xp-nav-desktop{gap:23px!important;font-size:.82rem!important;color:#a8bbc2!important}
.xp-nav-desktop a{position:relative;padding:8px 0}
.xp-nav-desktop a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:999px;background:var(--xp-pro-accent);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.xp-nav-desktop a:hover::after,.xp-nav-desktop a:focus-visible::after{transform:scaleX(1)}
.xp-mobile-menu{background:rgba(6,17,26,.985)!important;border-top-color:rgba(159,185,201,.10)!important}

/* Botones */
.xp-btn{border-radius:12px!important;font-size:.85rem!important;font-weight:850!important}
.xp-btn-primary{color:#03241b!important;background:linear-gradient(135deg,#4ce0bc,#2bc8a9)!important;box-shadow:0 12px 30px rgba(55,214,176,.18)!important}
.xp-btn-primary:hover{box-shadow:0 15px 36px rgba(55,214,176,.24)!important}
.xp-btn-ghost{background:rgba(255,255,255,.022)!important;border-color:rgba(159,185,201,.14)!important;color:#e5eeec!important}
.xp-btn-ghost:hover{background:rgba(255,255,255,.04)!important;border-color:rgba(159,185,201,.22)!important}

/* Hero */
.xp-hero{min-height:650px!important;padding:88px 0 78px!important}
.xp-hero::before{width:650px!important;height:650px!important;right:-270px!important;top:-210px!important;background:radial-gradient(circle,rgba(55,214,176,.14),rgba(89,167,255,.05) 45%,transparent 70%)!important}
.xp-hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr)!important;gap:58px!important}
.xp-hero-badge{padding:8px 12px!important;border-radius:999px!important;background:rgba(255,255,255,.025)!important;border-color:rgba(159,185,201,.13)!important;color:#b8c9ce!important;font-size:.72rem!important}
.xp-hero-badge i{background:var(--xp-pro-accent)!important;box-shadow:0 0 0 5px rgba(55,214,176,.08)!important}
.xp-hero h1{font-family:'Manrope',system-ui,sans-serif!important;font-size:clamp(3rem,5.7vw,5.2rem)!important;line-height:.96!important;letter-spacing:-.07em!important;font-weight:950!important;max-width:780px!important}
.xp-hero-copy>p{color:#9db0b7!important;font-size:clamp(1rem,1.4vw,1.16rem)!important;line-height:1.7!important;max-width:660px!important}
.xp-proof-chip{background:rgba(255,255,255,.018)!important;border-color:rgba(159,185,201,.10)!important;color:#8299a2!important}
.xp-proof-chip svg{color:#74dfc8!important}

/* Demo panel */
.xp-panel-shell{background:linear-gradient(180deg,rgba(12,29,42,.96),rgba(7,19,28,.97))!important;border-color:rgba(159,185,201,.14)!important;border-radius:24px!important;box-shadow:0 30px 80px rgba(0,0,0,.34)!important;transform:perspective(1200px) rotateY(-3deg) rotateX(1deg)!important}
.xp-panel-top{border-bottom-color:rgba(159,185,201,.10)!important}
.xp-panel-brand span:first-child{background:linear-gradient(135deg,#4ce0bc,#2bc8a9)!important;color:#03241b!important}
.xp-demo-badge{color:#9cebd8!important;background:rgba(55,214,176,.07)!important;border-color:rgba(55,214,176,.13)!important}
.xp-panel-side{border-right-color:rgba(159,185,201,.09)!important}
.xp-panel-side span:first-child{background:rgba(55,214,176,.08)!important;border-color:rgba(55,214,176,.13)!important;color:#c7f8ec!important}
.xp-panel-card{background:linear-gradient(180deg,rgba(17,38,54,.72),rgba(10,25,36,.7))!important;border-color:rgba(159,185,201,.10)!important}

/* Tarjetas generales */
.xp-trust-card,.xp-content-card,.xp-testimonial,.xp-faq,.xp-category-card,.xp-step-card,.xp-feature-card{
  background:linear-gradient(180deg,rgba(13,29,42,.88),rgba(8,21,31,.86))!important;
  border-color:rgba(159,185,201,.13)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.022)!important;
}
.xp-trust-card,.xp-content-card,.xp-testimonial{border-radius:18px!important}
.xp-trust-card:hover,.xp-content-card:hover,.xp-category-card:hover,.xp-step-card:hover,.xp-feature-card:hover{border-color:rgba(55,214,176,.20)!important;transform:translateY(-3px)!important}
.xp-trust-card h3,.xp-content-card h2,.xp-content-card h3,.xp-category-card h3,.xp-step-card h3,.xp-feature-card h3{color:#f4f8f7!important;letter-spacing:-.03em!important}
.xp-trust-card p,.xp-content-card p,.xp-content-card li,.xp-category-card p,.xp-step-card p,.xp-feature-card p{color:#8fa5ad!important}

/* FAQ */
.xp-faq-list{gap:10px!important}
.xp-faq{border-radius:15px!important;overflow:hidden!important}
.xp-faq summary{padding:18px 20px!important;color:#eaf2ef!important;font-weight:850!important;font-size:.9rem!important}
.xp-faq p{padding:0 20px 20px!important;color:#8fa5ad!important;line-height:1.65!important}

/* CTA */
.xp-cta-box{border-radius:22px!important;background:linear-gradient(135deg,rgba(17,43,52,.95),rgba(9,27,38,.95))!important;border-color:rgba(55,214,176,.17)!important;box-shadow:0 24px 60px rgba(0,0,0,.22)!important}
.xp-cta-copy h2{font-family:'Manrope',system-ui,sans-serif!important;letter-spacing:-.05em!important;text-transform:none!important;font-weight:900!important}

/* Footer */
.xp-public-footer{background:rgba(3,11,16,.72)!important;border-top-color:rgba(159,185,201,.09)!important}
.xp-public-footer h3{color:#eef6f3!important;font-size:.74rem!important;letter-spacing:.06em!important;text-transform:uppercase!important}
.xp-public-footer a{color:#8fa4ac!important;font-size:.78rem!important}
.xp-public-footer a:hover{color:#dff8f2!important}
.xp-footer-brand p,.xp-third-party-note,.xp-footer-bottom{color:#6f8790!important}

/* Login / registro */
.xp-auth-shell{min-height:100svh!important;padding:34px 16px!important;display:grid!important;place-items:center!important}
.xp-auth-card{width:min(1080px,100%)!important;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)!important;border-radius:24px!important;overflow:hidden!important;background:linear-gradient(180deg,rgba(13,29,42,.95),rgba(7,20,29,.96))!important;border-color:rgba(159,185,201,.14)!important;box-shadow:0 34px 90px rgba(0,0,0,.36)!important}
.xp-auth-aside{background:radial-gradient(circle at 20% 10%,rgba(55,214,176,.13),transparent 32%),radial-gradient(circle at 90% 90%,rgba(89,167,255,.10),transparent 35%),linear-gradient(145deg,#0b2630,#0a1d29 58%,#0a1824)!important;border-right-color:rgba(159,185,201,.10)!important}
.xp-auth-aside h1{font-family:'Manrope',system-ui,sans-serif!important;font-size:clamp(2rem,4vw,3.25rem)!important;line-height:1!important;letter-spacing:-.065em!important;font-weight:950!important}
.xp-auth-aside p{color:#9ab0b7!important}
.xp-auth-benefit{background:rgba(255,255,255,.02)!important;border-color:rgba(159,185,201,.09)!important;border-radius:14px!important}
.xp-auth-benefit i{color:#05241c!important;background:linear-gradient(135deg,#63e7c7,#35cfaf)!important}
.xp-auth-main{padding:44px!important}
.xp-auth-main h2,.xp-recovery-card h1{font-family:'Manrope',system-ui,sans-serif!important;letter-spacing:-.05em!important;font-weight:900!important}
.xp-auth-subtitle,.xp-auth-switch,.xp-auth-meta{color:#849aa3!important}
.xp-auth-switch a,.xp-auth-meta a,.xp-auth-back{color:#85e6d0!important}
.xp-input{border-radius:12px!important;background:linear-gradient(180deg,rgba(4,13,20,.91),rgba(8,20,29,.91))!important;border-color:rgba(159,185,201,.13)!important;color:#eef6f3!important;min-height:48px!important}
.xp-input:focus{border-color:rgba(55,214,176,.52)!important;box-shadow:0 0 0 4px rgba(55,214,176,.08)!important}
.xp-field label{color:#a8bbc1!important}
.xp-help,.xp-password-label{color:#708891!important}
.xp-whatsapp-info{border-radius:14px!important;background:rgba(55,214,176,.055)!important;border-color:rgba(55,214,176,.12)!important}
.xp-checkbox-row{border-radius:14px!important;background:rgba(255,255,255,.018)!important;border-color:rgba(159,185,201,.09)!important}
.xp-recovery-card{border-radius:22px!important;background:linear-gradient(180deg,rgba(13,29,42,.95),rgba(7,20,29,.96))!important;border-color:rgba(159,185,201,.14)!important;box-shadow:0 28px 70px rgba(0,0,0,.3)!important}

/* Landing pages */
.xp-landing-hero{padding:92px 0 74px!important;background:radial-gradient(700px 400px at 50% -15%,rgba(55,214,176,.10),transparent 70%)!important}
.xp-landing-hero h1{font-size:clamp(2.7rem,5vw,4.6rem)!important;max-width:900px!important;margin-inline:auto!important}
.xp-landing-hero p{max-width:760px!important;color:#95aab2!important;line-height:1.7!important}
.xp-breadcrumb{color:#657d87!important;font-size:.72rem!important}
.xp-breadcrumb a{color:#8fe8d3!important}

@media (max-width:980px){
  .xp-nav-desktop,.xp-hide-mobile{display:none!important}
  .xp-menu-button{display:flex!important}
  .xp-hero-grid{grid-template-columns:1fr!important;gap:38px!important}
  .xp-panel-demo{max-width:720px;width:100%;margin:0 auto}
  .xp-auth-card{grid-template-columns:1fr!important}
  .xp-auth-aside{display:none!important}
}
@media (max-width:640px){
  .xp-container{width:min(100% - 24px,1180px)!important}
  .xp-section{padding:68px 0!important}
  .xp-nav-row{height:70px!important}
  .xp-brand img{height:46px!important}
  .xp-hero{padding:72px 0 58px!important;min-height:auto!important}
  .xp-hero h1{font-size:clamp(2.55rem,13vw,3.75rem)!important}
  .xp-hero-actions{display:grid!important;grid-template-columns:1fr!important}
  .xp-hero-actions .xp-btn{width:100%!important}
  .xp-panel-demo{min-height:440px!important}
  .xp-panel-shell{inset:12px 0 0 0!important;transform:none!important;border-radius:19px!important}
  .xp-panel-body{grid-template-columns:72px 1fr!important}
  .xp-panel-main{padding:14px!important}
  .xp-panel-cards{grid-template-columns:1fr!important}
  .xp-auth-shell{padding:18px 12px!important}
  .xp-auth-card{border-radius:19px!important}
  .xp-auth-main{padding:28px 20px!important}
  .xp-form-row{grid-template-columns:1fr!important}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
}