/* FRENCH STORE — cinematic black/blue visual layer.
   Presentation only. Business logic, pricing, checkout, auth, Wallet and orders are untouched.
   Motion consumes the existing data-r8-motion policy from v2/r8.js. */

html[data-fs-owner-classic="1"]{
  --fs-cine-bg:#02050a!important;
  --fs-cine-bg-2:#050b13!important;
  --fs-cine-surface:#07111c!important;
  --fs-cine-surface-2:#0a1624!important;
  --fs-cine-surface-3:#0d1d2e!important;
  --fs-cine-edge:rgba(63,202,255,.20)!important;
  --fs-cine-edge-strong:rgba(84,225,255,.48)!important;
  --fs-cine-cyan:#5cecff!important;
  --fs-cine-blue:#2e8fff!important;
  --fs-cine-text:#f4f9ff!important;
  --fs-cine-muted:#9fb3c6!important;
  --fs-cine-ease:cubic-bezier(.22,.8,.2,1);
  --fs-cine-font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color-scheme:dark;
}

html[data-fs-owner-classic="1"] body,
html[data-fs-owner-classic="1"] button,
html[data-fs-owner-classic="1"] input,
html[data-fs-owner-classic="1"] select,
html[data-fs-owner-classic="1"] textarea{
  font-family:var(--fs-cine-font)!important;
}

html[data-fs-owner-classic="1"] body{
  background:
    radial-gradient(900px 520px at 80% -8%,rgba(28,143,255,.18),transparent 62%),
    radial-gradient(760px 520px at -8% 28%,rgba(41,219,255,.09),transparent 62%),
    radial-gradient(900px 650px at 50% 105%,rgba(20,76,145,.13),transparent 65%),
    linear-gradient(180deg,#02050a 0%,#040912 48%,#02060c 100%)!important;
  background-attachment:fixed!important;
  color:var(--fs-cine-text)!important;
}

html[data-fs-owner-classic="1"] .topbar{
  background:rgba(2,7,13,.80)!important;
  border-bottom:1px solid rgba(72,203,255,.16)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.02)!important;
  backdrop-filter:blur(18px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(135%)!important;
  transition:background-color .28s var(--fs-cine-ease),border-color .28s ease,box-shadow .28s ease!important;
}
html[data-fs-owner-classic="1"][data-fs-ui-scrolled="1"] .topbar{
  background:rgba(2,7,13,.94)!important;
  border-bottom-color:rgba(85,224,255,.32)!important;
  box-shadow:0 14px 42px rgba(0,0,0,.34),0 0 28px rgba(30,149,255,.07)!important;
}
html[data-fs-owner-classic="1"] .brand b,
html[data-fs-owner-classic="1"] .eyebrow,
html[data-fs-owner-classic="1"] #view-inicio .hero h1,
html[data-fs-owner-classic="1"] .panel h2,
html[data-fs-owner-classic="1"] :is(#view-tienda,#view-wallet,#view-pedidos,#view-perfil) h2,
html[data-fs-owner-classic="1"] #categoryGrid .category-card>b,
html[data-fs-owner-classic="1"] .fs-rank-premium-copy b,
html[data-fs-owner-classic="1"] .balance-card strong{
  font-family:var(--fs-cine-font)!important;
}
html[data-fs-owner-classic="1"] .brand b{
  font-weight:800!important;
  letter-spacing:.025em!important;
}
html[data-fs-owner-classic="1"] .eyebrow{
  font-weight:800!important;
  letter-spacing:.12em!important;
  color:#75ecff!important;
}

/* Hero: near-black stage with directional blue light, similar to the reference. */
html[data-fs-owner-classic="1"] #view-inicio>.hero{
  isolation:isolate!important;
  border:1px solid rgba(73,207,255,.34)!important;
  background:
    radial-gradient(430px 280px at 82% 34%,rgba(31,151,255,.22),transparent 62%),
    radial-gradient(340px 220px at 74% 82%,rgba(56,231,255,.10),transparent 66%),
    linear-gradient(128deg,#030812 0%,#06101d 52%,#07182a 100%)!important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 0 0 1px rgba(60,188,255,.035)!important;
}
html[data-fs-owner-classic="1"] #view-inicio>.hero::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:0!important;
  background:
    linear-gradient(90deg,rgba(89,220,255,.035) 1px,transparent 1px),
    linear-gradient(rgba(89,220,255,.025) 1px,transparent 1px)!important;
  background-size:44px 44px!important;
  mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.65) 45%,#000)!important;
  opacity:.5!important;
}
html[data-fs-owner-classic="1"] #view-inicio>.hero::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  width:min(42vw,470px)!important;
  aspect-ratio:1!important;
  right:-8%!important;
  top:-36%!important;
  border-radius:50%!important;
  pointer-events:none!important;
  z-index:0!important;
  background:radial-gradient(circle,rgba(86,233,255,.16) 0%,rgba(38,142,255,.08) 34%,transparent 70%)!important;
  filter:blur(2px)!important;
}
html[data-fs-owner-classic="1"] #view-inicio .hero-copy,
html[data-fs-owner-classic="1"] #view-inicio .hero-gem{
  position:relative!important;
  z-index:2!important;
}
html[data-fs-owner-classic="1"] #view-inicio .hero h1{
  max-width:760px!important;
  color:#f7fbff!important;
  font-size:clamp(38px,5.5vw,70px)!important;
  font-weight:800!important;
  line-height:1.02!important;
  letter-spacing:-.035em!important;
  text-shadow:0 10px 34px rgba(0,0,0,.40),0 0 30px rgba(56,203,255,.12)!important;
  text-wrap:balance;
}
html[data-fs-owner-classic="1"] #view-inicio .hero p{
  color:#abc0d2!important;
  font-size:16px!important;
  line-height:1.7!important;
}
html[data-fs-owner-classic="1"] #view-inicio .hero-gem::before{
  filter:drop-shadow(0 20px 45px rgba(0,0,0,.45)) drop-shadow(0 0 34px rgba(72,221,255,.26))!important;
}
:root[data-r8-motion="full"] html[data-fs-owner-classic="1"] #view-inicio .hero-gem::before,
html[data-fs-owner-classic="1"][data-r8-motion="full"] #view-inicio .hero-gem::before{
  animation:fsCineGemFloat 5.4s ease-in-out infinite!important;
}

/* Buttons: high-contrast, tactile, but restrained. */
html[data-fs-owner-classic="1"] :is(.primary-btn,.secondary-btn,.danger-btn,.ghost-btn,.cart-btn,.icon-btn,.cart-inline){
  font-family:var(--fs-cine-font)!important;
  font-weight:750!important;
  transition:transform .18s var(--fs-cine-ease),border-color .2s ease,background-color .2s ease,box-shadow .2s ease,filter .2s ease!important;
}
html[data-fs-owner-classic="1"] .primary-btn{
  color:#02151f!important;
  border-color:#b9f8ff!important;
  background:linear-gradient(180deg,#7ef4ff,#43d9f2)!important;
  box-shadow:0 10px 26px rgba(36,194,231,.18),inset 0 1px 0 rgba(255,255,255,.72)!important;
}
html[data-fs-owner-classic="1"] .secondary-btn,
html[data-fs-owner-classic="1"] :is(#authButton,#cartButton,.ghost-btn,.cart-btn,.icon-btn,.cart-inline){
  color:#e7f7ff!important;
  border-color:rgba(74,193,236,.32)!important;
  background:linear-gradient(180deg,#0a1826,#07111c)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
@media(hover:hover){
  html[data-fs-owner-classic="1"] :is(.primary-btn,.secondary-btn,.ghost-btn,.cart-btn,.icon-btn,.cart-inline):hover{
    transform:translateY(-2px)!important;
    border-color:rgba(102,231,255,.62)!important;
    box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 24px rgba(46,190,255,.10)!important;
    filter:brightness(1.04)!important;
  }
}
html[data-fs-owner-classic="1"] :is(.primary-btn,.secondary-btn,.ghost-btn,.cart-btn,.icon-btn,.cart-inline):active{
  transform:translateY(0) scale(.975)!important;
}

/* Category tiles are unified into black/blue glass instead of unrelated colors. */
html[data-fs-owner-classic="1"] #categoryGrid .category-card,
html[data-fs-owner-classic="1"] #categoryGrid .category-card.blue,
html[data-fs-owner-classic="1"] #categoryGrid .category-card.navy,
html[data-fs-owner-classic="1"] #categoryGrid .category-card.purple,
html[data-fs-owner-classic="1"] #categoryGrid .category-card.gold{
  border:1px solid rgba(66,191,239,.20)!important;
  background:
    radial-gradient(180px 100px at 8% 0%,rgba(55,209,255,.08),transparent 68%),
    linear-gradient(145deg,#081420,#050c14)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.03)!important;
  transition:transform .28s var(--fs-cine-ease),border-color .28s ease,box-shadow .28s ease,background .28s ease!important;
}
html[data-fs-owner-classic="1"] #categoryGrid .category-card>b{
  color:#f5fbff!important;
  font-weight:750!important;
  letter-spacing:-.01em!important;
}
html[data-fs-owner-classic="1"] #categoryGrid .category-card>small{
  color:#9bb0c1!important;
}
html[data-fs-owner-classic="1"] #categoryGrid .category-card>span:first-child{
  filter:drop-shadow(0 0 12px rgba(80,220,255,.18))!important;
}
@media(hover:hover){
  html[data-fs-owner-classic="1"] #categoryGrid .category-card:hover{
    transform:translateY(-4px)!important;
    border-color:rgba(89,222,255,.48)!important;
    background:
      radial-gradient(220px 120px at 12% -10%,rgba(65,219,255,.14),transparent 68%),
      linear-gradient(145deg,#0a1826,#06101a)!important;
    box-shadow:0 20px 46px rgba(0,0,0,.32),0 0 28px rgba(39,164,255,.08),inset 0 1px 0 rgba(255,255,255,.05)!important;
  }
}

/* Panels and dynamic product surfaces. */
html[data-fs-owner-classic="1"] :is(.panel,#view-cuentas){
  border-color:rgba(64,186,233,.20)!important;
  background:
    linear-gradient(180deg,rgba(7,17,28,.95),rgba(3,9,16,.97))!important;
  box-shadow:0 24px 64px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html[data-fs-owner-classic="1"] .panel h2,
html[data-fs-owner-classic="1"] :is(#view-tienda,#view-wallet,#view-pedidos,#view-perfil) h2{
  color:#f5faff!important;
  font-weight:800!important;
  letter-spacing:-.025em!important;
}
html[data-fs-owner-classic="1"] body :is(.r6-game-card,.r6-feature-card,.game-card,.r6-package-card){
  border-color:rgba(62,185,232,.24)!important;
  background:
    radial-gradient(230px 120px at 80% 0%,rgba(41,143,255,.08),transparent 68%),
    linear-gradient(155deg,#081521,#050c14)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.025)!important;
  transition:transform .3s var(--fs-cine-ease),border-color .3s ease,box-shadow .3s ease,background .3s ease!important;
}
@media(hover:hover){
  html[data-fs-owner-classic="1"] body :is(.r6-game-card,.r6-feature-card,.game-card,.r6-package-card):hover{
    transform:translateY(-4px)!important;
    border-color:rgba(87,221,255,.52)!important;
    box-shadow:0 24px 54px rgba(0,0,0,.38),0 0 28px rgba(42,161,255,.09),inset 0 1px 0 rgba(255,255,255,.04)!important;
  }
}
html[data-fs-owner-classic="1"] .r6-package-card{
  background:linear-gradient(155deg,#081521,#050d16)!important;
}
html[data-fs-owner-classic="1"] .r6-game-card-body strong,
html[data-fs-owner-classic="1"] .r6-package-copy strong{
  font-family:var(--fs-cine-font)!important;
  font-weight:750!important;
  letter-spacing:-.01em!important;
}

/* Wallet / profile / records / forms. */
html[data-fs-owner-classic="1"] .balance-card{
  border-color:rgba(80,213,255,.38)!important;
  background:
    radial-gradient(360px 180px at 80% 0%,rgba(39,174,255,.18),transparent 64%),
    linear-gradient(145deg,#081b2a,#07131f)!important;
  box-shadow:0 22px 54px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
html[data-fs-owner-classic="1"] :is(.topup-box,.record,.profile-card){
  border-color:rgba(62,178,221,.22)!important;
  background:linear-gradient(150deg,#07131e,#050c14)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html[data-fs-owner-classic="1"] :is(input,select,textarea){
  font-size:16px!important;
  border-color:rgba(69,188,231,.30)!important;
  background:#030a12!important;
  color:#f7fbff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease!important;
}
html[data-fs-owner-classic="1"] :is(input,select,textarea):focus{
  border-color:#55dbf5!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(65,210,244,.12),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html[data-fs-owner-classic="1"] :is(
  #walletBalance,#cartCount,#cartInlineCount,
  .r6-package-actions>b,.web-service-price strong,
  input[type="number"],input[inputmode="decimal"],
  .price,.amount,[data-price]
){
  font-family:var(--fs-cine-font)!important;
  font-variant-numeric:tabular-nums slashed-zero!important;
  font-feature-settings:"tnum" 1,"zero" 1!important;
  letter-spacing:.015em!important;
}
html[data-fs-owner-classic="1"] .balance-card strong{
  font-weight:800!important;
  font-size:40px!important;
  letter-spacing:-.015em!important;
}

/* Bottom dock and WhatsApp. */
html[data-fs-owner-classic="1"] .bottom-nav{
  border-color:rgba(64,189,235,.25)!important;
  background:rgba(2,8,14,.94)!important;
  box-shadow:0 -18px 48px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.025)!important;
  backdrop-filter:blur(18px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(130%)!important;
}
html[data-fs-owner-classic="1"] .bottom-nav button{
  font-family:var(--fs-cine-font)!important;
  transition:color .2s ease,background-color .2s ease,transform .18s var(--fs-cine-ease)!important;
}
html[data-fs-owner-classic="1"] .bottom-nav button.active{
  color:#7aecff!important;
  background:linear-gradient(180deg,rgba(29,131,185,.22),rgba(10,49,73,.32))!important;
  box-shadow:inset 0 0 0 1px rgba(85,219,255,.12)!important;
}
html[data-fs-owner-classic="1"] .bottom-nav button:active{
  transform:scale(.96)!important;
}
html[data-fs-owner-classic="1"] #floatingWhatsapp{
  transition:transform .22s var(--fs-cine-ease),box-shadow .22s ease,filter .22s ease!important;
}
@media(hover:hover){
  html[data-fs-owner-classic="1"] #floatingWhatsapp:hover{
    transform:translateY(-3px) scale(1.035)!important;
    box-shadow:0 18px 36px rgba(0,0,0,.38),0 0 26px rgba(37,211,102,.20)!important;
  }
}

/* Modal entrance only; display/focus behavior stays owned by the existing runtime. */
html[data-fs-owner-classic="1"] .modal.open{
  animation:fsCineModalBackdrop .20s ease both;
}
html[data-fs-owner-classic="1"] .modal.open .modal-card{
  animation:fsCineModalCard .30s var(--fs-cine-ease) both;
}

/* Scroll reveal. Sections are revealed in smaller pieces with a soft stagger. */
html[data-fs-owner-classic="1"][data-r8-motion="full"] [data-fs-reveal="1"]{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:
    opacity .50s cubic-bezier(.16,1,.3,1),
    transform .58s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--fs-reveal-delay,0ms);
}
html[data-fs-owner-classic="1"][data-r8-motion="full"] [data-fs-reveal="1"][data-fs-reveal-dir="left"]{
  transform:translate3d(-24px,8px,0);
}
html[data-fs-owner-classic="1"][data-r8-motion="full"] [data-fs-reveal="1"][data-fs-reveal-dir="right"]{
  transform:translate3d(24px,8px,0);
}
html[data-fs-owner-classic="1"][data-r8-motion="full"] [data-fs-reveal="1"][data-fs-reveal-visible="1"]{
  opacity:1;
  transform:translate3d(0,0,0);
  will-change:auto;
}

/* View changes use only a restrained fade; child blocks own the visible motion. */
html[data-fs-owner-classic="1"][data-r8-motion="full"] .view.active{
  animation:fsCineViewIn .28s ease-out both!important;
}

@media(max-width:700px){
  html[data-fs-owner-classic="1"] .topbar{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html[data-fs-owner-classic="1"][data-r8-motion="full"] [data-fs-reveal="1"],
  html[data-fs-owner-classic="1"][data-r8-motion="full"] [data-fs-reveal="1"][data-fs-reveal-dir="left"],
  html[data-fs-owner-classic="1"][data-r8-motion="full"] [data-fs-reveal="1"][data-fs-reveal-dir="right"]{
    transform:translate3d(0,12px,0);
    transition-duration:.42s,.48s;
  }
}

/* Service cards also join the same visual language. */
html[data-fs-owner-classic="1"] :is(.web-services-home-card,.web-service-card,.web-services-term,.web-services-intake-cta){
  border-color:rgba(68,190,234,.23)!important;
  background:linear-gradient(150deg,#08141f,#050c14)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025)!important;
}

/* Readability: avoid tiny decorative type on phones. */
@media(max-width:620px){
  html[data-fs-owner-classic="1"] body{background-attachment:scroll!important}
  html[data-fs-owner-classic="1"] #view-inicio>.hero{
    padding:28px 20px!important;
    background:
      radial-gradient(280px 220px at 92% 2%,rgba(37,153,255,.18),transparent 68%),
      linear-gradient(145deg,#030811,#071321)!important;
  }
  html[data-fs-owner-classic="1"] #view-inicio>.hero::after{width:300px!important;right:-42%!important;top:-25%!important}
  html[data-fs-owner-classic="1"] #view-inicio .hero h1{
    font-size:clamp(32px,9.2vw,42px)!important;
    line-height:1.04!important;
    letter-spacing:-.03em!important;
  }
  html[data-fs-owner-classic="1"] #view-inicio .hero p{
    font-size:14px!important;
    line-height:1.65!important;
  }
  html[data-fs-owner-classic="1"] #view-inicio #categoryGrid .category-card:not(.cuentas-entry)>b{
    font-size:13px!important;
    line-height:1.2!important;
  }
  html[data-fs-owner-classic="1"] #view-inicio #categoryGrid .category-card:not(.cuentas-entry)>small{
    font-size:11px!important;
    line-height:1.32!important;
  }
  html[data-fs-owner-classic="1"] .panel h2,
  html[data-fs-owner-classic="1"] :is(#view-tienda,#view-wallet,#view-pedidos,#view-perfil) h2{
    font-size:24px!important;
    line-height:1.08!important;
  }
  html[data-fs-owner-classic="1"] .bottom-nav button{
    font-size:10px!important;
  }
  html[data-fs-owner-classic="1"] .r6-package-copy strong{font-size:13px!important}
  html[data-fs-owner-classic="1"] .r6-package-copy small{font-size:11px!important;line-height:1.35!important}
  html[data-fs-owner-classic="1"] .r6-package-actions>b{font-size:15px!important}
}

@media(max-width:360px){
  html[data-fs-owner-classic="1"] #view-inicio .hero h1{font-size:30px!important}
  html[data-fs-owner-classic="1"] #view-inicio #categoryGrid .category-card:not(.cuentas-entry)>b{font-size:12px!important}
  html[data-fs-owner-classic="1"] #view-inicio #categoryGrid .category-card:not(.cuentas-entry)>small{font-size:10.5px!important}
}

/* R8 lite/off and OS reduced motion always win. */
html[data-fs-owner-classic="1"][data-r8-motion="lite"] [data-fs-reveal],
html[data-fs-owner-classic="1"][data-r8-motion="off"] [data-fs-reveal]{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  will-change:auto!important;
}
html[data-fs-owner-classic="1"][data-r8-motion="lite"] .modal.open,
html[data-fs-owner-classic="1"][data-r8-motion="lite"] .modal.open .modal-card{
  animation-duration:.12s!important;
}
html[data-fs-owner-classic="1"][data-r8-motion="lite"] .topbar,
html[data-fs-owner-classic="1"][data-r8-motion="off"] .topbar{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html[data-fs-owner-classic="1"][data-r8-motion="lite"] #view-inicio .hero-gem::before,
html[data-fs-owner-classic="1"][data-r8-motion="off"] #view-inicio .hero-gem::before{
  animation:none!important;
  filter:none!important;
}
html[data-fs-owner-classic="1"][data-r8-motion="lite"] .view.active,
html[data-fs-owner-classic="1"][data-r8-motion="off"] .view.active{
  animation:none!important;
}
html[data-fs-owner-classic="1"][data-r8-motion="off"] .modal.open,
html[data-fs-owner-classic="1"][data-r8-motion="off"] .modal.open .modal-card{
  animation:none!important;
}
@media(prefers-reduced-motion:reduce){
  html[data-fs-owner-classic="1"] [data-fs-reveal],
  html[data-fs-owner-classic="1"] .view.active,
  html[data-fs-owner-classic="1"] .modal.open,
  html[data-fs-owner-classic="1"] .modal.open .modal-card,
  html[data-fs-owner-classic="1"] #view-inicio .hero-gem::before{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
    transition:none!important;
    will-change:auto!important;
  }
}

@keyframes fsCineViewIn{
  from{opacity:.45}
  to{opacity:1}
}
@keyframes fsCineModalBackdrop{
  from{opacity:.01}
  to{opacity:1}
}
@keyframes fsCineModalCard{
  from{opacity:.01;transform:translate3d(0,18px,0) scale(.975)}
  to{opacity:1;transform:none}
}
@keyframes fsCineGemFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}
  50%{transform:translate3d(0,-7px,0) rotate(1deg)}
}