/* =========================================================
   VARIABLES
========================================================= */

:root{

  --bg:#100719;

  --surface:rgba(28,12,43,.72);

  --text:#fff9ff;

  --muted:#cdbed6;


  --pink:#ff2ea6;

  --pink-2:#ff67c5;

  --magenta:#e11dff;

  --violet:#7b2cff;

  --blue:#1d8fff;

  --cyan:#38e7ff;


  --line:rgba(255,255,255,.14);

  --shadow:
    0 22px 60px rgba(52,0,92,.34);

  --radius:24px;


  --container:
    min(
      1180px,
      calc(100% - 40px)
    );

}



/* =========================================================
   GENERAL
========================================================= */

*{

  box-sizing:border-box;

}


html{

  scroll-behavior:smooth;

}


body{

  margin:0;

  min-width:320px;

  color:var(--text);


  background:

    radial-gradient(
      circle at 18% 0%,
      rgba(225,29,255,.12),
      transparent 34rem
    ),

    radial-gradient(
      circle at 92% 18%,
      rgba(29,143,255,.10),
      transparent 32rem
    ),

    var(--bg);


  font-family:

    Inter,

    ui-sans-serif,

    system-ui,

    -apple-system,

    BlinkMacSystemFont,

    "Segoe UI",

    sans-serif;


  overflow-x:hidden;

}


a{

  color:inherit;

}


img{

  display:block;

  max-width:100%;

}


button,
input,
select{

  font:inherit;

}


.container{

  width:var(--container);

  margin-inline:auto;

}



/* =========================================================
   EFECTOS DE FONDO
========================================================= */

.page-glow{

  position:fixed;

  border-radius:50%;

  filter:blur(100px);

  pointer-events:none;

  z-index:-1;

  opacity:.28;

}


.page-glow--one{

  width:320px;

  height:320px;

  background:var(--magenta);

  left:-140px;

  top:44vh;

}


.page-glow--two{

  width:300px;

  height:300px;

  background:var(--blue);

  right:-160px;

  top:70vh;

}



/* =========================================================
   HEADER
========================================================= */

.site-header{

  position:absolute;

  inset:0 0 auto;

  z-index:20;

  padding:18px 0;


  background:

    linear-gradient(
      180deg,
      rgba(10,4,16,.84),
      rgba(10,4,16,0)
    );

}


.header-inner{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:28px;

}



/* =========================================================
   LOGO
========================================================= */

.brand{

  display:inline-flex;

  align-items:center;

  gap:10px;

  text-decoration:none;

}


.brand-mark{

  width:50px;

  height:50px;

  display:flex;

  align-items:center;

  justify-content:center;

}


.brand-mark img{

  width:70px;

  height:65px;

  max-width:none;

  object-fit:contain;

}


.brand-text{

  display:inline-flex;

  align-items:center;

  gap:5px;

  font-weight:900;

  letter-spacing:.04em;

  font-size:1.1rem;

}


/* LOVE ROSA */

.brand-love{

  background:

    linear-gradient(
      90deg,
      #ff4f91,
      #e958b8,
      #bb65d8
    );


  -webkit-background-clip:text;

  background-clip:text;

  -webkit-text-fill-color:transparent;

  color:transparent;

}


/* SPACE AZUL */

.brand-space{

  background:

    linear-gradient(
      90deg,
      #43bfff,
      #4d9df5,
      #737eea
    );


  -webkit-background-clip:text;

  background-clip:text;

  -webkit-text-fill-color:transparent;

  color:transparent;

}



/* =========================================================
   NAVEGACIÓN
========================================================= */

.main-nav{

  display:flex;

  align-items:center;

  gap:26px;

}


.main-nav a,
.back-link,
.footer-links a{

  color:rgba(255,255,255,.82);

  font-weight:650;

  font-size:.9rem;

  text-decoration:none;

  transition:.2s ease;

}


.main-nav a:hover,
.back-link:hover,
.footer-links a:hover{

  color:white;

}


.nav-download{

  padding:10px 15px;

  border:
    1px solid rgba(255,255,255,.18);

  border-radius:999px;

  background:
    rgba(255,255,255,.06);

}


.back-link{

  padding:10px 14px;

  border:
    1px solid var(--line);

  border-radius:12px;

  background:
    rgba(255,255,255,.06);

}


.menu-toggle{

  display:none;

  width:42px;

  height:42px;

  border:0;

  border-radius:12px;

  background:
    rgba(255,255,255,.08);

  padding:10px;

}


.menu-toggle span{

  display:block;

  height:2px;

  background:white;

  margin:5px 0;

  border-radius:2px;

}



/* =========================================================
   HERO / CARRUSEL
========================================================= */

.hero{
  min-height:690px;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}


/* CONTENEDOR DEL CARRUSEL */

.hero-slider{
  position:absolute;
  inset:0;
  z-index:-3;
  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #381147,
      #0a1731
    );
}


/* FILA HORIZONTAL DE PORTADAS */

.hero-track{
  display:flex;
  width:100%;
  height:100%;

  transform:translateX(0);
  transition:
    transform .85s cubic-bezier(.22,.61,.36,1);

  will-change:transform;
}


/* CADA PORTADA OCUPA EL 100% DEL HERO */

.hero-slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
}


.hero-slide img{
  width:100%;
  height:100%;
  max-width:none;

  object-fit:cover;

  filter:
    saturate(1.18)
    contrast(1.04);
}

.hero-slide:nth-child(1) img{
  object-position:center 45%;
}

.hero-slide:nth-child(2) img{
  object-position:center 20%;
}

.hero-slide:nth-child(3) img{
  object-position:center 10%;
}


/* CAPA OSCURA SOBRE LAS PORTADAS */

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:-2;

  background:
    linear-gradient(
      90deg,
      rgba(11,5,17,.96) 0%,
      rgba(11,5,17,.83) 37%,
      rgba(11,5,17,.38) 68%,
      rgba(11,5,17,.62) 100%
    ),

    linear-gradient(
      0deg,
      var(--bg) 0%,
      transparent 24%,
      rgba(20,3,36,.08) 80%
    );
}


/* DEGRADADO INFERIOR */

.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:160px;
  z-index:-1;

  background:
    linear-gradient(
      0deg,
      var(--bg),
      transparent
    );
}


/* CONTENIDO DEL HERO */

.hero-content{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  padding-top:88px;

  transform:
    translateX(-80px);
}


.hero-copy{
  max-width:690px;
}


/* CIRCULITOS DEL CARRUSEL */

.hero-dots{
  position:absolute;
  left:50%;
  bottom:34px;
  z-index:5;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  transform:translateX(-50%);
}


.hero-dot{
  width:10px;
  height:10px;
  padding:0;

  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;

  background:rgba(255,255,255,.28);
  cursor:pointer;

  transition:
    transform .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}


.hero-dot:hover{
  background:rgba(255,255,255,.75);
}


.hero-dot.is-active{
  background:#fff;
  transform:scale(1.35);

  box-shadow:
    0 0 14px rgba(255,46,166,.9);
}


/* =========================================================
   TEXTOS PEQUEÑOS
========================================================= */

.eyebrow,
.kicker,
.form-badge{

  display:inline-flex;

  align-items:center;

  gap:8px;


  letter-spacing:.17em;

  text-transform:uppercase;

  font-size:.90rem;

  font-weight:800;

}


.eyebrow{

  padding:9px 12px;

  background:
    rgba(255,255,255,.08);

  border:
    1px solid var(--line);

  border-radius:999px;

  backdrop-filter:
    blur(12px);

}


.live-dot{

  width:7px;

  height:7px;

  border-radius:50%;

  background:#5dffbe;

  box-shadow:
    0 0 12px #5dffbe;

}



/* =========================================================
   HERO TITULO
========================================================= */

.hero h1{

  font-size:
    clamp(
      2.8rem,
      6.5vw,
      5.8rem
    );

  line-height:.88;

  letter-spacing:-.062em;


  margin:
    22px 0 24px;

  max-width:850px;

}


.hero h1 span{

  background:

    linear-gradient(
      98deg,
      #fff 8%,
      var(--pink-2) 35%,
      #e78cff 62%,
      #64cfff 96%
    );


  background-clip:text;

  -webkit-background-clip:text;

  color:transparent;


  filter:

    drop-shadow(
      0 0 28px rgba(255,46,166,.22)
    );

}


.hero-copy > p{

  font-size:
    clamp(
      1rem,
      1.8vw,
      1.22rem
    );

  line-height:1.65;

  color:#e0d7e6;

  max-width:620px;

}



/* =========================================================
   BOTONES
========================================================= */

.hero-actions{

  display:flex;

  flex-wrap:wrap;

  gap:12px;

  margin-top:30px;

}


.btn{

  min-height:50px;


  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:14px;


  padding:0 22px;


  border-radius:14px;

  border:
    1px solid transparent;


  text-decoration:none;

  text-transform:uppercase;

  letter-spacing:.055em;


  font-size:.82rem;

  font-weight:850;


  cursor:pointer;

  transition:.22s ease;

}


.btn:hover{

  transform:
    translateY(-2px);

}


.btn-primary{

  color:white;


  background:

    linear-gradient(
      110deg,
      var(--pink),
      var(--magenta) 54%,
      var(--violet)
    );


  box-shadow:

    0 10px 32px
    rgba(225,29,255,.30),

    inset 0 1px
    rgba(255,255,255,.26);

}


.btn-primary:hover{

  box-shadow:

    0 14px 42px
    rgba(225,29,255,.45),

    0 0 22px
    rgba(255,46,166,.22);

}


.btn-ghost{

  color:white;

  background:
    rgba(255,255,255,.08);

  border-color:
    rgba(255,255,255,.19);

  backdrop-filter:
    blur(12px);

}


.btn-full{

  width:100%;

}



/* =========================================================
   HERO META
========================================================= */

.hero-meta{

  display:flex;

  flex-wrap:wrap;

  gap:23px;

  margin-top:28px;


  color:#cfc1d8;

  font-size:.82rem;

  font-weight:650;

}


.hero-meta b{

  color:var(--pink-2);

  margin-right:5px;

}



/* =========================================================
   GLASS
========================================================= */

.glass-card{

  border:
    1px solid rgba(255,255,255,.17);


  background:

    linear-gradient(
      145deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.055)
    );


  backdrop-filter:
    blur(20px);


  box-shadow:
    var(--shadow);

}


.hero-card{

  width:280px;

  padding:22px;

  border-radius:22px;

  margin-bottom:26px;

}


.hero-card-label{

  font-size:.67rem;

  letter-spacing:.18em;

  color:#f3aee0;

  font-weight:850;

}


.hero-card strong{

  display:block;

  font-size:1.1rem;

  line-height:1.35;

  margin:
    14px 0 6px;

}


.hero-card small{

  color:#bcaec7;

  line-height:1.5;

}



/* =========================================================
   WAVEFORM
========================================================= */

.waveform{

  height:54px;

  display:flex;

  align-items:center;

  gap:5px;

  margin:13px 0;

}


.waveform i{

  display:block;

  width:5px;

  border-radius:99px;


  background:

    linear-gradient(
      var(--cyan),
      var(--pink)
    );


  animation:
    wave 1.4s ease-in-out infinite;

}


.waveform i:nth-child(1){

  height:15px;

}


.waveform i:nth-child(2){

  height:30px;

  animation-delay:-.1s;

}


.waveform i:nth-child(3){

  height:44px;

  animation-delay:-.2s;

}


.waveform i:nth-child(4){

  height:24px;

  animation-delay:-.3s;

}


.waveform i:nth-child(5){

  height:50px;

  animation-delay:-.4s;

}


.waveform i:nth-child(6){

  height:35px;

  animation-delay:-.5s;

}


.waveform i:nth-child(7){

  height:19px;

  animation-delay:-.6s;

}


.waveform i:nth-child(8){

  height:40px;

  animation-delay:-.7s;

}


.waveform i:nth-child(9){

  height:27px;

  animation-delay:-.8s;

}


.waveform i:nth-child(10){

  height:14px;

  animation-delay:-.9s;

}


@keyframes wave{

  50%{

    transform:
      scaleY(.54);

    opacity:.65;

  }

}



/* =========================================================
   PARTÍCULAS
========================================================= */

.hero-particles span{

  position:absolute;

  z-index:-1;


  color:
    rgba(255,255,255,.34);

  text-shadow:
    0 0 18px var(--pink);


  animation:
    float 5s ease-in-out infinite;

}


.hero-particles span:nth-child(1){

  left:8%;

  top:25%;

  font-size:2.1rem;

}


.hero-particles span:nth-child(2){

  left:53%;

  top:17%;

  font-size:1.2rem;

  animation-delay:-1.3s;

}


.hero-particles span:nth-child(3){

  right:8%;

  top:36%;

  font-size:2rem;

  animation-delay:-2.1s;

}


.hero-particles span:nth-child(4){

  right:25%;

  bottom:18%;

  font-size:1.5rem;

  animation-delay:-3s;

}


@keyframes float{

  50%{

    transform:
      translateY(-12px)
      rotate(7deg);

    opacity:.7;

  }

}



/* =========================================================
   SECCIÓN JUEGO
========================================================= */

.game-section{

  padding:
    76px 0 58px;

}


.section-heading{

  max-width:760px;

  margin-bottom:34px;

}


.kicker{

  color:#ff88d4;

}


.section-heading h2,
.gallery-heading h2,
.download-card h2{

  margin:
    8px 0 12px;

  font-size:
    clamp(
      2rem,
      4vw,
      3.35rem
    );

  line-height:1;

  letter-spacing:-.045em;

  text-transform:uppercase;

}


.section-heading p,
.gallery-heading p,
.download-card p{

  color:var(--muted);

  line-height:1.7;

  margin:0;

}


.feature-grid{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:15px;

}


.feature-card{

  position:relative;

  overflow:hidden;


  padding:24px;


  border:
    1px solid var(--line);

  border-radius:20px;


  background:

    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.025)
    );


  transition:.25s ease;

}


.feature-card:hover{

  transform:
    translateY(-5px);

  border-color:
    rgba(255,91,194,.34);


  box-shadow:

    0 16px 40px
    rgba(0,0,0,.18);

}


.feature-icon{

  display:grid;

  place-items:center;


  width:42px;

  height:42px;


  border-radius:12px;


  background:

    linear-gradient(
      145deg,
      var(--pink),
      var(--violet)
    );


  box-shadow:

    0 8px 24px
    rgba(225,29,255,.23);


  font-size:1.1rem;

}


.feature-card h3{

  margin:
    18px 0 7px;

  font-size:1.1rem;

}


.feature-card p{

  margin:0;

  color:#bfaec9;

  line-height:1.55;

  font-size:.9rem;

}



/* =========================================================
   GALERÍA
========================================================= */

.gallery-section{

  padding:
    58px 0 72px;

}


.gallery-heading{

  display:flex;

  align-items:end;

  justify-content:space-between;

  gap:30px;


  margin-bottom:28px;

}


.gallery-heading p{

  max-width:470px;

}


.gallery-grid{

  display:grid;

  grid-template-columns:
    1.35fr .82fr .82fr;

  gap:14px;

  height:360px;

}


.gallery-item{

  position:relative;

  overflow:hidden;

  margin:0;


  border-radius:20px;

  border:
    1px solid var(--line);


  background:

    linear-gradient(
      135deg,
      #4f1d72,
      #0e4d72
    );

}


.gallery-item img{

  width:100%;

  height:100%;

  object-fit:cover;


  transition:

    transform .5s
    cubic-bezier(.2,.7,.2,1),

    filter .4s;

}


.gallery-item::after{

  content:"";


  position:absolute;

  inset:0;


  background:

    linear-gradient(
      0deg,
      rgba(7,3,12,.9),
      transparent 58%
    );


  pointer-events:none;

}


.gallery-item:hover img{

  transform:
    scale(1.055);


  filter:

    saturate(1.2)

    brightness(1.06);

}


.gallery-item figcaption{

  position:absolute;

  z-index:2;


  left:18px;

  right:18px;

  bottom:16px;


  font-weight:800;

}


.gallery-item figcaption span{

  font-size:.7rem;

  color:var(--pink-2);

  margin-right:8px;

}


.gallery-item.image-fallback::before{

  content:"♫";


  position:absolute;

  inset:0;


  display:grid;

  place-items:center;


  font-size:4rem;

  color:
    rgba(255,255,255,.3);

}



/* =========================================================
   DESCARGA
========================================================= */

.download-section{

  padding:
    22px 0 78px;

}


.download-card{

  padding:
    30px 32px;


  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:28px;


  border-radius:
    var(--radius);

  border:
    1px solid rgba(255,255,255,.15);


  background:

    radial-gradient(
      circle at 85% 30%,
      rgba(29,143,255,.2),
      transparent 14rem
    ),

    radial-gradient(
      circle at 65% 90%,
      rgba(255,46,166,.20),
      transparent 16rem
    ),

    linear-gradient(
      145deg,
      #24102f,
      #130b20
    );


  box-shadow:
    var(--shadow);

}


.is-disabled{

  opacity:.55;

  pointer-events:none;

}



/* =========================================================
   REDES SOCIALES
========================================================= */

.social-section{
  padding:22px 0 78px;
}


.social-card{
  padding:38px 32px;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:
    var(--radius);

  background:
    linear-gradient(
      145deg,
      rgba(36,16,47,.82),
      rgba(19,11,32,.92)
    );

  box-shadow:
    var(--shadow);
}


.social-heading{
  text-align:center;

  max-width:650px;

  margin:
    0 auto 30px;
}


.social-heading h2{
  margin:
    8px 0 12px;

  font-size:
    clamp(
      2rem,
      4vw,
      3.35rem
    );

  line-height:1;

  letter-spacing:-.045em;
}


.social-heading p{
  margin:0;

  color:
    var(--muted);

  line-height:1.7;
}


/* CONTENEDOR */

.social-links{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:15px;
}


/* BOTÓN / TARJETA */

.social-link{
  min-height:90px;

  display:flex;

  align-items:center;

  gap:16px;

  padding:18px 20px;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:18px;

  background:
    rgba(255,255,255,.055);

  text-decoration:none;

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}


.social-link:hover{
  transform:
    translateY(-5px);

  background:
    rgba(255,255,255,.09);

  border-color:
    rgba(255,255,255,.25);
}


/* ICONOS */

.social-icon{
  flex:0 0 auto;

  width:50px;
  height:50px;

  display:grid;

  place-items:center;

  border-radius:15px;

  background:transparent;

  color:white;

  font-size:1.4rem;

  font-weight:900;
}

.social-facebook:hover{
  box-shadow:
    0 12px 35px
    rgba(24,119,242,.18);
}


.social-discord:hover{
  box-shadow:
    0 12px 35px
    rgba(88,101,242,.18);
}


.social-youtube:hover{
  box-shadow:
    0 12px 35px
    rgba(255,0,51,.18);
}


/* TEXTO */

.social-link strong{
  display:block;

  color:white;

  font-size:1rem;

  margin-bottom:4px;
}


.social-link small{
  color:
    #aa9ab5;

  font-size:.8rem;
}


/* RESPONSIVE */

@media (max-width:700px){

  .social-links{
    grid-template-columns:1fr;
  }

  .social-card{
    padding:30px 22px;
  }

}

.social-icon img{
  width:50px;
  height:50px;
  object-fit:contain;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer{

  border-top:
    1px solid rgba(255,255,255,.08);

  padding:
    22px 0;

  background:
    rgba(0,0,0,.12);

}


.footer-inner{

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

}


.footer-inner p{

  margin:0;

  color:#9588a1;

  font-size:.8rem;

}


.footer-links{

  display:flex;

  gap:18px;

}



/* =========================================================
   AUTENTICACIÓN
========================================================= */

.auth-page{

  min-height:100vh;

  background:#100719;

}


.auth-background{

  position:fixed;

  inset:0;

  z-index:-3;


  background:

    linear-gradient(
      135deg,
      #4a134d,
      #0a1731
    );

}


.auth-background img{

  width:100%;

  height:100%;

  object-fit:cover;

  filter:
    saturate(1.15);

}


.auth-background::after{

  content:"";


  position:absolute;

  inset:0;


  background:

    linear-gradient(
      90deg,
      rgba(13,5,21,.92),
      rgba(13,5,21,.62) 55%,
      rgba(13,5,21,.82)
    ),

    linear-gradient(
      0deg,
      rgba(16,7,25,.95),
      transparent 45%
    );

}


.auth-background--login{

  background:

    radial-gradient(
      circle at 65% 25%,
      rgba(225,29,255,.34),
      transparent 28rem
    ),

    radial-gradient(
      circle at 30% 75%,
      rgba(29,143,255,.26),
      transparent 24rem
    ),

    #100719;

}



/* =========================================================
   MODAL DE REGISTRO
========================================================= */

.register-page{

  min-height:100vh;

}


.register-overlay{

  position:fixed;

  inset:0;


  display:flex;

  align-items:center;

  justify-content:center;


  padding:
    100px 20px 30px;


  overflow-y:auto;


  background:
    rgba(8,3,14,.38);


  backdrop-filter:
    blur(5px);

}


.register-modal{

  position:relative;


  width:
    min(
      430px,
      100%
    );


  padding:
    34px 32px;


  border:
    1px solid rgba(255,255,255,.17);


  border-radius:26px;


  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(225,29,255,.18),
      transparent 14rem
    ),

    radial-gradient(
      circle at 0% 100%,
      rgba(29,143,255,.12),
      transparent 16rem
    ),

    rgba(22,9,33,.94);


  backdrop-filter:
    blur(24px);


  box-shadow:

    0 35px 100px
    rgba(0,0,0,.65),

    0 0 50px
    rgba(225,29,255,.08);


  animation:
    registerModalIn
    .35s ease;

}


@keyframes registerModalIn{

  from{

    opacity:0;

    transform:
      translateY(20px)
      scale(.97);

  }


  to{

    opacity:1;

    transform:
      translateY(0)
      scale(1);

  }

}



/* =========================================================
   CERRAR MODAL
========================================================= */

.register-close{

  position:absolute;


  top:14px;

  right:14px;


  width:38px;

  height:38px;


  display:grid;

  place-items:center;


  border:
    1px solid rgba(255,255,255,.10);


  border-radius:50%;


  background:
    rgba(255,255,255,.07);


  color:
    rgba(255,255,255,.85);


  font-size:1.55rem;

  line-height:1;


  text-decoration:none;


  transition:
    .2s ease;

}


.register-close:hover{

  color:white;


  background:
    rgba(255,255,255,.14);


  transform:
    rotate(90deg);

}



/* =========================================================
   ENCABEZADO FORMULARIO
========================================================= */

.form-heading{
  margin-bottom:26px;
  padding-right:0;
  text-align:center;
}


.form-heading h1,
.form-heading h2{

  font-size:2rem;

  letter-spacing:-.035em;

  margin:
    8px 0 7px;

}


.form-heading p{

  margin:0;

  color:var(--muted);

  line-height:1.6;

}


.form-badge{
  color:#ff8ed8;

  display:flex;
  width:max-content;

  margin:0 auto;
}



/* =========================================================
   FORMULARIO
========================================================= */

.auth-form{

  display:grid;

  gap:18px;

}


.field{

  display:grid;

  gap:8px;

}


.field > span{

  font-size:.90rem;

  font-weight:800;

  color:#d9cadd;

}


.field input,
.field select{

  width:100%;

  height:50px;


  border:
    1px solid rgba(255,255,255,.14);


  border-radius:13px;


  background:
    rgba(12,6,19,.62);


  color:white;


  outline:none;


  padding:
    0 14px;


  transition:

    border-color .2s,

    box-shadow .2s,

    background .2s;

}


.field input::placeholder{

  color:#786b81;

}


.field input:hover,
.field select:hover{

  border-color:
    rgba(255,255,255,.22);

}


.field input:focus,
.field select:focus{

  border-color:
    rgba(255,80,184,.7);


  box-shadow:

    0 0 0 4px
    rgba(255,46,166,.10);


  background:
    rgba(12,6,19,.82);

}



/* =========================================================
   CONTRASEÑA
========================================================= */

.password-wrap{

  position:relative;

}


.password-wrap input{

  padding-right:60px;

}


.password-toggle{
  position:absolute;

  right:10px;
  top:50%;

  transform:
    translateY(-50%);

  width:36px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0;

  border:0;
  border-radius:50%;

  background:transparent;

  color:#ff96db;

  cursor:pointer;

  transition:
    color .2s ease,
    background .2s ease,
    transform .2s ease;
}


.password-toggle:hover{
  color:white;

  background:
    rgba(255,255,255,.08);

  transform:
    translateY(-50%)
    scale(1.08);
}


.eye-icon{
  display:block;

  font-size:1.15rem;

  line-height:1;

  user-select:none;
}



/* =========================================================
   ESTADO DEL FORMULARIO
========================================================= */

.form-status{

  min-height:20px;

  margin:0;


  text-align:center;


  font-size:.83rem;


  color:#d9cadd;

}


.form-status.is-success{

  color:#75ffc3;

}


.form-status.is-error{

  color:#ff8da7;

}


.form-note{

  color:#8f8198;


  font-size:.85rem;


  line-height:1.5;


  text-align:center;


  margin:0;

}


.auth-secondary-link{

  display:block;


  text-align:center;


  margin-top:18px;


  color:#f8a7df;


  font-size:.84rem;


  text-decoration:none;

}



/* =========================================================
   LOGIN ANTIGUO / COMPATIBILIDAD
========================================================= */

.auth-main{

  min-height:100vh;


  display:grid;


  place-items:center;


  padding:
    110px 20px 48px;

}


.auth-shell{

  width:
    min(
      1050px,
      100%
    );


  display:grid;


  grid-template-columns:
    1fr 430px;


  gap:80px;


  align-items:center;

}


.auth-shell--single{

  display:block;


  width:
    min(
      470px,
      100%
    );

}


.auth-intro h1{

  font-size:
    clamp(
      3rem,
      6vw,
      5.8rem
    );


  line-height:.9;


  letter-spacing:-.055em;


  margin:
    14px 0 20px;

}


.auth-intro > p{

  font-size:1.1rem;


  color:#d5c8df;


  line-height:1.65;


  max-width:480px;

}


.auth-mini-card{

  display:inline-flex;


  align-items:center;


  gap:13px;


  margin-top:25px;


  padding:
    14px 16px;


  border:
    1px solid var(--line);


  border-radius:15px;


  background:
    rgba(255,255,255,.07);


  backdrop-filter:
    blur(14px);

}


.auth-mini-card > span{

  font-size:1.5rem;


  color:var(--pink-2);

}


.auth-mini-card strong,
.auth-mini-card small{

  display:block;

}


.auth-mini-card small{

  color:#aa9ab5;


  margin-top:2px;

}


.auth-card{

  padding:30px;


  border-radius:26px;

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width:900px){


  .main-nav{

    display:none;


    position:absolute;


    top:70px;


    left:20px;


    right:20px;


    padding:14px;


    flex-direction:column;


    align-items:stretch;


    gap:4px;


    background:
      rgba(18,8,28,.96);


    border:
      1px solid var(--line);


    border-radius:18px;


    backdrop-filter:
      blur(18px);


    box-shadow:
      var(--shadow);

  }


  .main-nav.is-open{

    display:flex;

  }


  .main-nav a{

    padding:
      11px 12px;


    border-radius:10px;

  }


  .menu-toggle{

    display:block;

  }


  .hero{

    min-height:720px;

  }


  .hero-content{

    transform:none;

  }


  .hero-card{

    display:none;

  }


  .feature-grid{

    grid-template-columns:1fr;

  }


  .gallery-grid{

    grid-template-columns:
      1.2fr 1fr;


    height:560px;

  }


  .gallery-item--wide{

    grid-row:
      span 2;

  }


  .auth-shell{

    grid-template-columns:1fr;


    gap:34px;


    width:
      min(
        600px,
        100%
      );

  }


  .auth-intro{

    text-align:center;

  }


  .auth-intro > p{

    margin-inline:auto;

  }


  .auth-mini-card{

    display:none;

  }

}



/* =========================================================
   CELULAR
========================================================= */

@media (max-width:640px){


  :root{

    --container:
      min(
        calc(100% - 28px),
        1180px
      );

  }


  .site-header{

    padding-top:13px;

  }


  .header-inner{

    gap:12px;

  }


  .brand-mark{

    width:42px;

    height:42px;

  }


  .brand-mark img{

    width:58px;

    height:58px;

  }


  .brand-text{

    font-size:.90rem;

    gap:3px;

  }


  .back-link{

    font-size:.72rem;

    padding:
      8px 9px;

  }


  .hero{

    min-height:680px;

  }


  .hero h1{

    font-size:
      clamp(
        3rem,
        16vw,
        4.6rem
      );

  }


  .hero-actions{

    display:grid;

  }


  .hero-dots{
    bottom:26px;
  }


  .btn{

    width:100%;

  }


  .gallery-heading{

    display:block;

  }


  .gallery-heading p{

    margin-top:12px;

  }


  .gallery-grid{

    height:auto;


    grid-template-columns:1fr;

  }


  .gallery-item{

    height:230px;

  }


  .gallery-item--wide{

    height:270px;

  }


  .download-card{

    padding:25px;


    display:block;

  }


  .download-card .btn{

    margin-top:20px;

  }


  .footer-inner{

    flex-direction:column;


    text-align:center;

  }


  /* MODAL */

  .register-overlay{

    align-items:center;


    padding:
      90px 14px 20px;

  }


  .register-modal{

    padding:
      28px 22px 24px;


    border-radius:22px;

  }


  .form-heading h1,
  .form-heading h2{

    font-size:1.8rem;

  }


  .field input,
  .field select{

    height:49px;

  }


  .register-close{

    top:12px;

    right:12px;

  }


  .auth-main{

    padding-top:92px;

  }


  .auth-intro h1{

    font-size:3.6rem;

  }


  .auth-card{

    padding:22px;

  }

}



/* =========================================================
   PANTALLAS MUY PEQUEÑAS
========================================================= */

@media (max-width:420px){


  .brand-text{

    font-size:.82rem;

  }


  .back-link{

    font-size:.68rem;

  }


  .register-modal{

    padding:
      26px 18px 22px;

  }


  .form-heading{

    margin-bottom:22px;

  }

}



/* =========================================================
   REDUCIR ANIMACIONES
========================================================= */

@media (prefers-reduced-motion:reduce){


  html{

    scroll-behavior:auto;

  }


  *,
  *::before,
  *::after{

    animation-duration:
      .01ms !important;


    animation-iteration-count:
      1 !important;


    transition-duration:
      .01ms !important;

  }

}

/* =========================================================
   CONTACTO FLOTANTE
========================================================= */

.contact-float{
  position:fixed;

  right:22px;
  bottom:22px;

  z-index:999;

  display:flex;
  align-items:center;

  padding:8px 14px 8px 8px;

  border:
    1px solid rgba(255,255,255,.14);

  border-radius:999px;

  background:
    rgba(22,9,33,.94);

  backdrop-filter:
    blur(16px);

  box-shadow:
    0 12px 35px rgba(0,0,0,.35);

  transition:
    transform .2s ease,
    opacity .2s ease;
}


.contact-float:hover{
  transform:
    translateY(-3px);
}


.contact-link{
  display:flex;
  align-items:center;

  gap:11px;

  text-decoration:none;
}


.contact-link img{
  width:50px;
  height:50px;

  object-fit:contain;

  border-radius:50%;
}


.contact-text{
  display:flex;
  flex-direction:column;

  line-height:1.2;

  padding-right:12px;
}


.contact-text strong{
  color:white;

  font-size:.82rem;
}


.contact-text span{
  margin-top:4px;

  color:#ff8ed8;

  font-size:.75rem;

  font-weight:700;
}


.contact-close{
  position:absolute;

  top:-7px;
  right:-5px;

  width:22px;
  height:22px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 0 2px 0;

  border:
    1px solid rgba(255,255,255,.18);

  border-radius:50%;

  background:#22132d;

  color:white;

  font-size:15px;

  line-height:1;

  cursor:pointer;
}


.contact-float.is-hidden{
  display:none;
}


/* CELULAR */

@media (max-width:640px){

  .contact-float{
    right:12px;
    bottom:12px;
  }

  .contact-text strong{
    font-size:.75rem;
  }

  .contact-text span{
    font-size:.70rem;
  }

  .contact-link img{
    width:40px;
    height:40px;
  }

}

/* =========================================================
   TÉRMINOS Y CONDICIONES
========================================================= */

.terms-section{
  width:100%;
}


/* FILA DEL CHECK */

.terms-accept{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;

  gap:5px;

  width:100%;

  color:var(--muted);

  font-size:.78rem;
  line-height:1.5;

  text-align:center;
}


/* CHECK */

.terms-accept > input{
  flex:0 0 auto;

  width:15px;
  height:15px;

  margin:0 3px 0 0;

  accent-color:var(--pink);

  cursor:pointer;
}


/* "HE LEÍDO Y ACEPTO LOS" */

.terms-accept > label{
  color:#e7dce9;

  cursor:pointer;
}


/* DETAILS */

.terms-details{
  display:inline;
}


/* QUITAR TRIÁNGULO DEL SUMMARY */

.terms-link{
  display:inline;

  padding:0;

  color:#ff8ed8;

  font-weight:700;

  text-decoration:underline;

  text-decoration-thickness:1px;

  text-underline-offset:3px;

  cursor:pointer;

  list-style:none;
}


/* CHROME / EDGE / SAFARI */

.terms-link::-webkit-details-marker{
  display:none;
}


/* FIREFOX / OTROS */

.terms-link::marker{
  display:none;
  content:"";
}


/* HOVER */

.terms-link:hover{
  color:#ffb0e2;
}


/* CUANDO SE ABREN LOS TÉRMINOS */

.terms-details[open]{
  flex-basis:100%;

  width:100%;

  margin-top:8px;
}


/* CUADRO DE TÉRMINOS */

.terms-box{
  width:100%;
  height:170px;

  overflow-y:auto;

  margin-top:10px;

  padding:15px 17px;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:14px;

  background:
    rgba(255,255,255,.035);

  color:var(--muted);

  font-size:.72rem;
  line-height:1.55;

  text-align:left;

  scrollbar-width:thin;
}


/* TÍTULOS INTERNOS */

.terms-box h3{
  margin:
    18px 0 7px;

  color:#ff8ed8;

  font-size:.76rem;
}


.terms-box h3:first-of-type{
  margin-top:12px;
}


/* PÁRRAFOS */

.terms-box p{
  margin:
    0 0 10px;
}


/* FECHA */

.terms-updated{
  color:
    rgba(255,255,255,.55);

  font-size:.67rem;
}


/* =========================================================
   OLVIDASTE TU CONTRASEÑA
========================================================= */

.forgot-password{
  display:flex;

  justify-content:center;

  margin-top:-8px;
}


.forgot-password-link{
  color:#ff8ed8;

  font-size:.78rem;
  font-weight:700;

  text-decoration:underline;

  text-decoration-thickness:1px;

  text-underline-offset:3px;

  transition:
    color .2s ease;
}


.forgot-password-link:hover{
  color:#ffb0e2;
}

/* =========================================================
   RECUPERAR CONTRASEÑA
========================================================= */

.recover-description{
  margin:
    -4px 0 4px;

  color:var(--muted);

  font-size:.82rem;
  line-height:1.6;

  text-align:center;
}

/* =========================================================
   CUENTA / PANEL DE USUARIO
========================================================= */

.account-page{
  min-height:100vh;

  display:flex;
  flex-direction:column;

  background:
    radial-gradient(circle at top left, rgba(255,46,166,.16), transparent 34%),
    radial-gradient(circle at top right, rgba(90,146,255,.14), transparent 32%),
    linear-gradient(180deg, #14051f 0%, #0d0619 52%, #090410 100%);
}

.account-page .site-footer{
  margin-top:auto;
}

.account-main{
  padding:120px 0 60px;
}

.account-shell{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:24px;
  align-items:start;
}

.account-content{
  grid-column:1;
  grid-row:1;
}

.account-summary{
  grid-column:2;
  grid-row:1;
}

.account-summary,
.account-convert-box{
  padding:28px;
}

.account-summary-head{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:22px;
}

.account-summary-head h1{
  margin:0;
  font-size:1.8rem;
  color:#fff;
}

.account-summary-head p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.account-balance-grid{
  display:grid;
  gap:14px;
  margin-bottom:18px;
}

.balance-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:18px 20px;
  background:rgba(255,255,255,.04);
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}

.balance-card small{
  display:block;
  margin-bottom:8px;
  color:rgba(255,255,255,.70);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.balance-card strong{
  display:block;
  color:#fff;
  font-size:1.8rem;
  font-weight:800;
}

.balance-card--beat strong{
  color:#ff8ed8;
}

.balance-card--cash strong{
  color:#8fc8ff;
}

.account-note{
  margin-top:10px;
  padding:15px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}

.account-note p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  font-size:.92rem;
}

.account-content{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.account-section-head{
  margin-bottom:24px;
}

.account-section-head h2{
  margin:10px 0 8px;
  color:#fff;
  font-size:2rem;
}

.account-section-head p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.convert-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.convert-card{
  appearance:none;
  width:100%;
  border:none;
  border-radius:22px;
  padding:22px 20px;
  text-align:left;
  cursor:pointer;
  background:
    linear-gradient(135deg, rgba(255,46,166,.12), rgba(122,51,255,.14));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.convert-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 24px 48px rgba(0,0,0,.28);
}

.convert-card-kicker{
  display:inline-block;
  margin-bottom:12px;
  color:#ff8ed8;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.convert-card strong{
  display:block;
  margin-bottom:8px;
  color:#fff;
  font-size:1.45rem;
  font-weight:800;
}

.convert-card small{
  color:rgba(255,255,255,.76);
  font-size:1rem;
}

.account-topbar{
  display:flex;
  align-items:center;
  gap:16px;
}

.account-greeting{
  color:#fff;
  font-size:.98rem;
}

.account-greeting strong{
  color:#ff8ed8;
}

.account-logout-btn{
  appearance:none;

  padding:10px 15px;

  border:
    1px solid rgba(255,255,255,.18);

  border-radius:999px;

  background:
    rgba(255,255,255,.06);

  color:
    rgba(255,255,255,.82);

  font-weight:650;

  font-size:.9rem;

  line-height:normal;

  cursor:pointer;

  transition:.2s ease;
}


.account-logout-btn:hover{
  color:white;
}


.account-logout-btn:disabled{
  opacity:.65;
  cursor:default;
}

/* =========================================================
   RESPONSIVE CUENTA
========================================================= */

@media (max-width: 980px){

  .account-shell{
    grid-template-columns:1fr;
  }

  .account-content,
  .account-summary{
    grid-column:auto;
    grid-row:auto;
  }

  .account-content{
    order:1;
  }

  .account-summary{
    order:2;
  }

  .convert-grid{
    grid-template-columns:1fr;
  }

}

@media (max-width: 640px){

  .account-main{
    padding:100px 0 40px;
  }

  .account-summary,
  .account-convert-box{
    padding:22px 18px;
  }

  .account-topbar{
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
  }

  .account-section-head h2{
    font-size:1.65rem;
  }

  .balance-card strong{
    font-size:1.55rem;
  }

}

/* =========================================================
   TARJETAS DE CONVERSIÓN
========================================================= */

.convert-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.convert-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
  text-align:left;
  padding:20px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.convert-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.convert-card-info{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.convert-card-kicker{
  font-size:.70rem;
  font-weight:800;
  letter-spacing:.16em;
  color:#ff8ed8;
}

.convert-card strong{
  color:#ffffff;
  font-size:1.08rem;
  line-height:1.2;
}

.convert-card small{
  color:rgba(255,255,255,.72);
  font-size:.92rem;
}

.convert-card-image{
  flex:0 0 84px;
  width:84px;
  height:84px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
}

.convert-card-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

@media (max-width: 768px){

  .convert-grid{
    grid-template-columns:1fr;
  }

  .convert-card{
    padding:16px;
    gap:14px;
  }

  .convert-card-image{
    flex:0 0 68px;
    width:68px;
    height:68px;
  }

}

/* =========================================================
   ESTADO DE CONVERSIÓN
========================================================= */

.conversion-status{
  min-height:24px;
  margin:18px 0 0;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.55;
  text-align:center;
}

.conversion-status.is-success{
  color:#9fe8c0;
}

.conversion-status.is-error{
  color:#ff9ab8;
}

.convert-card:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

/* =========================================================
   MODAL CONVERSIÓN
========================================================= */

.conversion-modal{
  position:fixed;
  inset:0;
  z-index:2000;

  display:none;
  align-items:center;
  justify-content:center;

  padding:20px;
}


.conversion-modal.is-open{
  display:flex;
}


.conversion-modal-backdrop{
  position:absolute;
  inset:0;

  background:
    rgba(5,2,10,.72);

  backdrop-filter:
    blur(6px);
}


.conversion-modal-dialog{
  position:relative;
  z-index:1;

  width:
    min(
      390px,
      100%
    );

  padding:30px 28px;

  border:
    1px solid rgba(255,255,255,.16);

  border-radius:22px;

  background:

    radial-gradient(
      circle at 50% 0%,
      rgba(255,46,166,.13),
      transparent 12rem
    ),

    rgba(22,9,33,.98);

  box-shadow:
    0 30px 80px rgba(0,0,0,.58);

  text-align:center;

  animation:
    conversionModalIn .22s ease;
}


@keyframes conversionModalIn{

  from{
    opacity:0;
    transform:
      translateY(12px)
      scale(.97);
  }

  to{
    opacity:1;
    transform:
      translateY(0)
      scale(1);
  }

}


.conversion-modal-view h2{
  margin:
    14px 0 8px;

  color:white;

  font-size:1.35rem;
}


.conversion-modal-view p{
  margin:
    0 0 16px;

  color:var(--muted);

  font-size:.88rem;

  line-height:1.6;
}


.conversion-modal-icon{
  width:62px;
  height:62px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin:
    0 auto;

  border-radius:50%;

  font-size:1.75rem;
  font-weight:900;
}


.conversion-modal-icon--question{
  color:#ff9bdd;

  border:
    2px solid rgba(255,92,191,.55);

  background:
    rgba(255,46,166,.10);
}


.conversion-modal-icon--success{
  color:#73ffc0;

  border:
    2px solid rgba(93,255,190,.55);

  background:
    rgba(93,255,190,.09);
}


.conversion-modal-icon--error{
  color:#ff829c;

  border:
    2px solid rgba(255,80,120,.55);

  background:
    rgba(255,80,120,.09);
}


.conversion-modal-amount{
  display:block;

  margin:
    4px 0 22px;

  color:white;

  font-size:1.15rem;
}


.conversion-modal-actions{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:10px;
}


.conversion-modal-btn{
  min-height:44px;

  border-radius:12px;

  font-size:.84rem;
  font-weight:800;

  cursor:pointer;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
}


.conversion-modal-btn:hover{
  transform:
    translateY(-1px);
}


.conversion-modal-btn--secondary{
  border:
    1px solid rgba(255,255,255,.15);

  background:
    rgba(255,255,255,.06);

  color:white;
}


.conversion-modal-btn--primary{
  border:
    1px solid transparent;

  color:white;

  background:

    linear-gradient(
      110deg,
      var(--pink),
      var(--magenta) 54%,
      var(--violet)
    );
}


.conversion-modal-btn--single{
  width:100%;
}


.conversion-modal-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}


body.modal-open{
  overflow:hidden;
}

.conversion-modal-icon--question{
  overflow:hidden;
  padding:0;
}

.conversion-modal-icon--question img{
  width:62px;
  height:62px;
  max-width:none;
  object-fit:contain;
}

@media (max-width:480px){

  .conversion-modal-dialog{
    padding:26px 20px;
  }

}

/* =========================================================
   LOVESPACE - PANEL DE ADMINISTRADOR
========================================================= */

/* ADMINISTRACIÓN CENTRADO */

.admin-hero-kicker{
  display:flex;

  width:max-content;

  margin:
    0 auto 18px;
}


/* SALUDO ADMIN */

.admin-hero .admin-welcome{
  margin:
    0 0 14px;

  font-size:
    clamp(
      1.55rem,
      2.6vw,
      2.3rem
    );

  line-height:1.2;

  letter-spacing:-.025em;
}


.admin-hero .admin-welcome strong{
  color:#ff8ed8;
}


/* =========================================================
   ADMIN - OTRA OPERACIÓN
========================================================= */

.admin-operation-modal{
  position:fixed;
  inset:0;

  z-index:200;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;
}

#logout-confirm-modal{
  z-index:2100;
}


.admin-operation-modal[hidden]{
  display:none !important;
}


.admin-operation-backdrop{
  position:absolute;
  inset:0;

  background:
    rgba(5,2,10,.68);

  backdrop-filter:
    blur(5px);
}


.admin-operation-dialog{
  position:relative;
  z-index:1;

  width:
    min(430px, 100%);

  padding:
    28px;

  border:
    1px solid rgba(255,255,255,.14);

  border-radius:
    20px;

  background:
    rgba(25,12,37,.97);

  box-shadow:
    0 25px 70px rgba(0,0,0,.46);

  text-align:center;
}


.admin-operation-dialog h2{
  margin:
    0 0 12px;

  font-size:
    1.25rem;
}


.admin-operation-dialog p{
  margin:
    0 0 24px;

  color:
    rgba(255,255,255,.72);

  line-height:1.55;
}


.admin-operation-dialog strong{
  color:#ff8ed8;
}


.admin-operation-actions{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:10px;
}


.admin-operation-no{
  min-height:50px;

  border:
    1px solid rgba(255,255,255,.18);

  border-radius:14px;

  background:
    rgba(255,255,255,.06);

  color:white;

  font-weight:800;

  cursor:pointer;

  transition:.2s ease;
}


.admin-operation-no:hover{
  background:
    rgba(255,255,255,.11);

  transform:
    translateY(-1px);
}


/* MENSAJE DE ÉXITO DESVANECIÉNDOSE */

.admin-page .form-status{
  transition:
    opacity .7s ease;
}


.admin-page .form-status.is-fading{
  opacity:0;
}

/* =========================================================
   PÁGINA
========================================================= */

.admin-page{
  min-height:100vh;
  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(255,46,166,.10),
      transparent 26rem
    ),
    radial-gradient(
      circle at 90% 20%,
      rgba(69,126,255,.10),
      transparent 30rem
    ),
    #09060f;
}


/* =========================================================
   AJUSTES GENERALES ADMIN
========================================================= */

.admin-page{
  display:flex;
  flex-direction:column;

  min-height:100vh;
}


/* =========================================================
   HEADER ADMIN
========================================================= */

.admin-page .site-header{
  width:100%;
}


.admin-page .header-inner{
  min-height:72px;
}


/* =========================================================
   ETIQUETAS PEQUEÑAS
========================================================= */

.section-kicker{
  display:inline-flex;

  align-items:center;

  color:#ff88d4;

  font-size:.72rem;

  font-weight:850;

  letter-spacing:.17em;

  text-transform:uppercase;
}


/* =========================================================
   LOADING
========================================================= */

.admin-loading{
  width:min(1180px, calc(100% - 40px));

  min-height:
    calc(100vh - 88px);

  margin:0 auto;

  padding:
    110px 20px 60px;

  display:flex;

  align-items:center;

  justify-content:center;
}


/* =========================================================
   FOOTER
========================================================= */

.admin-page .site-footer{
  margin-top:auto;
}


/* =========================================================
   BOTÓN DEL HEADER
========================================================= */

.main-nav button.nav-download{
  appearance:none;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:10px 15px;

  background:
    rgba(255,255,255,.06);

  color:
    rgba(255,255,255,.82);

  font:inherit;
  font-weight:650;
  font-size:.9rem;

  cursor:pointer;

  transition:
    border-color .2s ease,
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}


.main-nav button.nav-download:hover{

  color:#fff;

  border-color:
    rgba(255,255,255,.34);

  background:
    rgba(255,255,255,.11);

  transform:
    translateY(-1px);

}


.main-nav button.nav-download:disabled{

  opacity:.55;
  cursor:default;
  transform:none;

}



/* =========================================================
   CONTENIDO PRINCIPAL
========================================================= */

.admin-main{
  width:min(1180px, calc(100% - 40px));
  margin:0 auto;

  padding:
    120px 0 90px;
}



/* =========================================================
   HERO ADMIN
========================================================= */

.admin-hero{
  position:relative;

  margin-bottom:34px;

  padding:
    38px 40px;

  overflow:hidden;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:
    26px;

  background:

    radial-gradient(
      circle at 15% 20%,
      rgba(255,46,166,.18),
      transparent 18rem
    ),

    radial-gradient(
      circle at 85% 10%,
      rgba(65,128,255,.16),
      transparent 18rem
    ),

    rgba(19,10,29,.88);

  box-shadow:
    0 22px 60px rgba(0,0,0,.28);
}


.admin-hero::after{

  content:"";

  position:absolute;

  width:240px;
  height:240px;

  right:-90px;
  bottom:-120px;

  border-radius:50%;

  background:
    rgba(255,255,255,.035);

  pointer-events:none;

}


.admin-hero-content{
  position:relative;
  z-index:1;
  max-width:680px;
}


.admin-hero h1{

  margin:
    8px 0 12px;

  font-size:
    clamp(2rem, 5vw, 3.2rem);

  line-height:1.05;

  letter-spacing:-.04em;

  color:#fff;

}


.admin-hero p{

  margin:0;

  color:
    rgba(255,255,255,.72);

  line-height:1.7;

}


.admin-hero strong{

  color:#fff;

}


.admin-hero-description{

  margin-top:12px !important;

  max-width:570px;

}



/* =========================================================
   CONTENEDOR
========================================================= */

.admin-section{
  width:100%;
}


.admin-container{

  display:grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:24px;

}



/* =========================================================
   TARJETAS
========================================================= */

.admin-card{

  padding:
    28px;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:
    22px;

  background:

    linear-gradient(
      180deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.025)
    ),

    rgba(17,8,27,.90);

  box-shadow:
    0 18px 50px rgba(0,0,0,.22);

}


.admin-card:first-child{

  grid-column:
    1 / -1;

}


.admin-card-header{

  margin-bottom:24px;

}


.admin-card-header h2{

  margin:
    7px 0 8px;

  color:#fff;

  font-size:
    1.45rem;

  letter-spacing:-.02em;

}


.admin-card-header p{

  margin:0;

  color:
    rgba(255,255,255,.60);

  font-size:.92rem;

  line-height:1.55;

}



/* =========================================================
   FORMULARIOS
========================================================= */

.admin-form{

  display:flex;

  flex-direction:column;

  gap:18px;

}


.admin-field{

  display:flex;

  flex-direction:column;

  gap:8px;

}


.admin-field label{

  color:
    rgba(255,255,255,.82);

  font-size:.87rem;

  font-weight:700;

}


.admin-field input,
.admin-field select{

  width:100%;

  min-height:48px;

  padding:
    0 15px;

  border:
    1px solid rgba(255,255,255,.13);

  border-radius:
    13px;

  outline:none;

  background:
    rgba(255,255,255,.055);

  color:#fff;

  font:inherit;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;

}


.admin-field input::placeholder{

  color:
    rgba(255,255,255,.34);

}


.admin-field input:hover,
.admin-field select:hover{

  border-color:
    rgba(255,255,255,.23);

}


.admin-field input:focus,
.admin-field select:focus{

  border-color:
    rgba(255,67,177,.72);

  background:
    rgba(255,255,255,.07);

  box-shadow:
    0 0 0 4px
    rgba(255,46,166,.10);

}

.admin-field select{
  cursor:pointer;
  color-scheme:dark;
}

.admin-field select option{

  background:#160d20;
  color:#fff;

}



/* =========================================================
   BOTONES DEL PANEL
========================================================= */

.admin-card .btn{

  min-height:48px;

  border-radius:
    13px;

  font-weight:800;

}


.admin-card .btn-primary{

  border:
    1px solid rgba(255,255,255,.10);

  background:

    linear-gradient(
      135deg,
      #ff2ea6,
      #8864ff
    );

  color:#fff;

  box-shadow:
    0 12px 30px
    rgba(255,46,166,.16);

}


.admin-card .btn-primary:hover{

  transform:
    translateY(-1px);

  box-shadow:
    0 16px 36px
    rgba(255,46,166,.22);

}


.admin-card .btn-primary:disabled{

  opacity:.55;

  cursor:default;

  transform:none;

}



/* =========================================================
   INFORMACIÓN DEL USUARIO
========================================================= */

.admin-user-info{

  display:grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:14px;

}


.admin-info-item{

  min-width:0;

  padding:
    17px 18px;

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:
    15px;

  background:
    rgba(255,255,255,.035);

}


.admin-info-label{

  display:block;

  margin-bottom:6px;

  color:
    rgba(255,255,255,.46);

  font-size:.73rem;

  font-weight:800;

  letter-spacing:.08em;

  text-transform:uppercase;

}


.admin-info-item strong{

  display:block;

  overflow:hidden;

  color:#fff;

  font-size:
    1.08rem;

  text-overflow:ellipsis;

  white-space:nowrap;

}



/* =========================================================
   DESTACAR BEAT Y CASH
========================================================= */

#admin-target-beat,
#admin-target-cash{

  font-size:
    1.32rem;

  font-weight:900;

}


#admin-target-beat{

  background:

    linear-gradient(
      90deg,
      #ffcf59,
      #ff8b55
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;

}


#admin-target-cash{

  background:

    linear-gradient(
      90deg,
      #ff4db2,
      #8f7dff
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;

}



/* =========================================================
   MENSAJES
========================================================= */

.admin-page .form-status{

  min-height:20px;

  margin:
    16px 0 0;

  font-size:.88rem;

  font-weight:650;

}


.admin-page .form-status.is-success{

  color:#70eba6;

}


.admin-page .form-status.is-error{

  color:#ff8098;

}



/* =========================================================
   CARGANDO ACCESO
========================================================= */

.admin-loading{

  min-height:
    calc(100vh - 180px);

  display:flex;

  align-items:center;

  justify-content:center;

  padding:40px 20px;

}


.admin-loading-card{

  width:
    min(420px, 100%);

  padding:
    30px;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:
    20px;

  background:
    rgba(19,10,29,.94);

  box-shadow:
    0 24px 70px
    rgba(0,0,0,.36);

  text-align:center;

}


.admin-loading-card p{

  margin:0;

  color:
    rgba(255,255,255,.72);

  font-weight:650;

}



/* =========================================================
   ELEMENTOS HIDDEN
========================================================= */

.admin-page [hidden]{
  display:none !important;
}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:800px){

  .admin-main{

    width:
      min(100% - 28px, 1180px);

    padding:
      36px 0 70px;

  }


  .admin-hero{

    padding:
      30px 24px;

    border-radius:
      21px;

  }


  .admin-container{

    grid-template-columns:
      1fr;

  }


  .admin-card:first-child{

    grid-column:auto;

  }


  .admin-card{

    padding:
      23px 20px;

  }


  .admin-user-info{

    grid-template-columns:
      1fr 1fr;

  }

}



@media (max-width:520px){

  .admin-main{

    width:
      min(100% - 20px, 1180px);

  }


  .admin-hero{

    padding:
      26px 20px;

  }


  .admin-hero h1{

    font-size:
      1.9rem;

  }


  .admin-card{

    padding:
      21px 17px;

  }


  .admin-user-info{

    grid-template-columns:
      1fr;

  }


  .admin-info-item{

    padding:
      15px;

  }

}

/* =========================================================
   LABEL + INFORMACIÓN
========================================================= */

.field-label{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;
}


/* ICONO VERDE DE INFORMACIÓN */

.info-tip{
  position:relative;

  flex:0 0 auto;

  width:18px;
  height:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#55a978;

  color:#ffffff;

  font-size:.68rem;
  font-weight:900;
  font-style:normal;
  line-height:1;

  cursor:help;
  user-select:none;

  box-shadow:
    0 0 6px rgba(85,169,120,.18);

  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}


.info-tip:hover,
.info-tip:focus{
  background:#65b987;

  transform:scale(1.05);

  box-shadow:
    0 0 8px rgba(101,185,135,.25);

  outline:none;
}


/* TOOLTIP */

.info-tip::after{
  content:
    attr(data-tooltip);

  position:absolute;

  z-index:100;

  right:-4px;
  bottom:calc(100% + 11px);

  width:280px;

  padding:
    11px 13px;

  border:
    1px solid rgba(255,255,255,.16);

  border-radius:11px;

  background:
    rgba(16,7,25,.97);

  color:#eee5f2;

  font-size:.77rem;
  font-weight:500;
  line-height:1.45;

  text-align:left;

  box-shadow:
    0 12px 32px rgba(0,0,0,.38);

  opacity:0;
  visibility:hidden;

  transform:
    translateY(5px);

  pointer-events:none;

  transition:
    opacity .18s ease,
    visibility .18s ease,
    transform .18s ease;
}


.info-tip::before{
  content:"";

  position:absolute;

  z-index:101;

  right:8px;
  bottom:calc(100% + 5px);

  width:10px;
  height:10px;

  background:
    rgba(16,7,25,.97);

  border-right:
    1px solid rgba(255,255,255,.16);

  border-bottom:
    1px solid rgba(255,255,255,.16);

  transform:
    rotate(45deg);

  opacity:0;
  visibility:hidden;

  transition:
    opacity .18s ease,
    visibility .18s ease;
}


.info-tip:hover::after,
.info-tip:hover::before,
.info-tip:focus::after,
.info-tip:focus::before{
  opacity:1;
  visibility:visible;
}


.info-tip:hover::after,
.info-tip:focus::after{
  transform:
    translateY(0);
}



/* =========================================================
   SELECT SEXO
========================================================= */

.select-wrap{
  position:relative;
}


.select-wrap select{
  width:100%;

  appearance:none;
  -webkit-appearance:none;

  padding-right:52px;

  cursor:pointer;
}


/* FLECHA PERSONALIZADA */

.select-wrap::after{
  content:"";

  position:absolute;

  top:50%;
  right:20px;

  width:7px;
  height:7px;

  border-right:2px solid #ffffff;
  border-bottom:2px solid #ffffff;

  transform:
    translateY(-70%)
    rotate(45deg);

  pointer-events:none;
}

/* =========================================================
   ADMIN - PAQUETES DE CONVERSIÓN
========================================================= */

.admin-conversion-tier-form{
  padding:18px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:15px;
  background:rgba(255,255,255,.025);
}

.admin-conversion-tier-form + .admin-conversion-tier-form{
  margin-top:4px;
}

.admin-conversion-tier-form .admin-operation-actions{
  margin-top:2px;
}

.admin-conversion-tier-form .admin-operation-no{
  min-height:48px;
  border-radius:13px;
}

/* =========================================================
   ADMIN - CONVERSIONES COMPACTAS
========================================================= */


/* =========================================================
   CABECERA DE CONVERSIONES
========================================================= */

.admin-conversion-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:22px;
}


.admin-conversion-header > div{
  min-width:0;
}


.admin-conversion-add{
  flex:0 0 auto;

  min-width:170px;
}


/* =========================================================
   TABLA / CONTENEDOR
========================================================= */

.admin-conversion-table-wrap{
  width:100%;
  overflow-x:auto;

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:16px;

  background:
    rgba(255,255,255,.025);
}


.admin-conversion-table{
  min-width:680px;
}


/* =========================================================
   CABECERA DE TABLA
========================================================= */

.admin-conversion-table-head{
  display:grid;

  grid-template-columns:
    1.25fr
    1.1fr
    1fr
    .65fr
    .8fr;

  align-items:center;

  gap:14px;

  min-height:48px;

  padding:
    0 18px;

  border-bottom:
    1px solid rgba(255,255,255,.09);

  background:
    rgba(255,255,255,.035);

  color:
    rgba(255,255,255,.48);

  font-size:.72rem;
  font-weight:850;

  letter-spacing:.06em;

  text-transform:uppercase;
}


/* =========================================================
   LISTA
========================================================= */

.admin-conversion-tiers-list{
  display:flex;
  flex-direction:column;
}


/* =========================================================
   FILA
========================================================= */

.admin-conversion-row{
  display:grid;

  grid-template-columns:
    1.25fr
    1.1fr
    1fr
    .65fr
    .8fr;

  align-items:center;

  gap:14px;

  min-height:62px;

  padding:
    0 18px;

  border-bottom:
    1px solid rgba(255,255,255,.065);

  transition:
    background .18s ease;
}


.admin-conversion-row:last-child{
  border-bottom:0;
}


.admin-conversion-row:hover{
  background:
    rgba(255,255,255,.035);
}


/* =========================================================
   VALORES
========================================================= */

.admin-conversion-value{
  color:#fff;

  font-size:.94rem;
  font-weight:800;
}


.admin-conversion-order{
  color:
    rgba(255,255,255,.72);

  font-size:.9rem;
  font-weight:750;
}


/* =========================================================
   ESTADO
========================================================= */

.admin-conversion-status{
  display:inline-flex;

  align-items:center;

  width:max-content;

  gap:8px;

  font-size:.84rem;
  font-weight:750;
}


.admin-conversion-status-dot{
  width:8px;
  height:8px;

  flex:0 0 auto;

  border-radius:50%;
}


.admin-conversion-status.is-active{
  color:#79e7ab;
}


.admin-conversion-status.is-active
.admin-conversion-status-dot{
  background:#68e6a0;

  box-shadow:
    0 0 10px rgba(104,230,160,.30);
}


.admin-conversion-status.is-disabled{
  color:
    rgba(255,255,255,.45);
}


.admin-conversion-status.is-disabled
.admin-conversion-status-dot{
  background:
    rgba(255,255,255,.32);
}


/* =========================================================
   ACCIÓN EDITAR
========================================================= */

.admin-conversion-row-actions{
  display:flex;

  justify-content:flex-end;
}


.admin-conversion-edit{
  min-height:36px;

  padding:
    0 16px;

  border:
    1px solid rgba(255,255,255,.14);

  border-radius:10px;

  background:
    rgba(255,255,255,.055);

  color:#fff;

  font-size:.8rem;
  font-weight:800;

  cursor:pointer;

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}


.admin-conversion-edit:hover{
  background:
    rgba(255,255,255,.10);

  border-color:
    rgba(255,255,255,.22);

  transform:
    translateY(-1px);
}


/* =========================================================
   LISTA VACÍA
========================================================= */

.admin-conversion-empty{
  padding:
    28px 20px;

  color:
    rgba(255,255,255,.48);

  font-size:.88rem;

  text-align:center;
}


/* =========================================================
   MODAL DE CONVERSIONES
========================================================= */

#admin-conversion-modal{
  z-index:2200;
}


.admin-conversion-dialog{
  width:
    min(520px, 100%);

  max-height:
    calc(100vh - 40px);

  overflow-y:auto;

  padding:
    28px;

  text-align:left;
}


/* =========================================================
   CABECERA DEL MODAL
========================================================= */

.admin-conversion-modal-header{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:20px;

  margin-bottom:24px;
}


.admin-conversion-modal-header h2{
  margin:
    7px 0 0;

  font-size:1.4rem;
}


.admin-conversion-modal-close{
  flex:0 0 auto;

  width:38px;
  height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:50%;

  background:
    rgba(255,255,255,.055);

  color:
    rgba(255,255,255,.78);

  font-size:1.45rem;
  line-height:1;

  cursor:pointer;

  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease;
}


.admin-conversion-modal-close:hover{
  background:
    rgba(255,255,255,.11);

  color:#fff;

  transform:
    rotate(90deg);
}


/* =========================================================
   CAMPOS DEL MODAL
========================================================= */

.admin-conversion-dialog
.admin-form{
  gap:15px;
}


.admin-conversion-dialog
.admin-field input[readonly]{
  opacity:.68;

  cursor:not-allowed;

  background:
    rgba(255,255,255,.035);
}


/* =========================================================
   ACCIONES DEL MODAL
========================================================= */

.admin-conversion-dialog
.admin-operation-actions{
  grid-template-columns:
    1fr
    1fr
    1.25fr;

  margin-top:8px;
}


#admin-conversion-delete{
  border-color:
    rgba(255,95,125,.25);

  color:#ff9bad;

  background:
    rgba(255,70,110,.06);
}


#admin-conversion-delete:hover{
  background:
    rgba(255,70,110,.11);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:800px){

  .admin-conversion-header{
    flex-direction:column;
  }


  .admin-conversion-add{
    width:100%;
    min-width:0;
  }

}


@media (max-width:620px){

  /*
     En móvil ocultamos la cabecera clásica
     y convertimos cada fila en tarjeta.
  */

  .admin-conversion-table{
    min-width:0;
  }


  .admin-conversion-table-head{
    display:none;
  }


  .admin-conversion-row{
    grid-template-columns:
      1fr 1fr;

    gap:
      15px 18px;

    min-height:0;

    padding:
      18px;

    border-bottom:
      1px solid rgba(255,255,255,.09);
  }


  .admin-conversion-row > *{
    min-width:0;
  }


  .admin-conversion-row > *::before{
    content:
      attr(data-label);

    display:block;

    margin-bottom:5px;

    color:
      rgba(255,255,255,.38);

    font-size:.65rem;
    font-weight:850;

    letter-spacing:.06em;

    text-transform:uppercase;
  }


  .admin-conversion-row-actions{
    justify-content:flex-start;
  }


  .admin-conversion-edit{
    width:100%;
  }


  .admin-conversion-dialog{
    padding:
      24px 20px;
  }


  .admin-conversion-dialog
  .admin-operation-actions{
    grid-template-columns:
      1fr;
  }


  #admin-conversion-save{
    order:1;
  }


  #admin-conversion-cancel{
    order:2;
  }


  #admin-conversion-delete{
    order:3;
  }

}

/* =========================================================
   ADMIN - CONVERSIONES A TODO EL ANCHO
========================================================= */

.admin-conversion-card{
  grid-column:1 / -1;
}


/* TABLA OCUPA TODO EL ESPACIO DISPONIBLE */

.admin-conversion-table{
  width:100%;
  min-width:0;
}


.admin-conversion-table-head,
.admin-conversion-row{
  grid-template-columns:
    1.25fr
    1.15fr
    1fr
    .7fr
    .8fr;
}
/* =========================================================
   ADMIN - SALDO INICIAL DE REGISTRO
========================================================= */

#admin-registration-cash[readonly]{
  cursor:not-allowed;
  opacity:.72;
  background:rgba(255,255,255,.035);
}