/* =========================================================
   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
========================================================= */

.hero{

  min-height:690px;

  position:relative;

  display:flex;

  align-items:center;

  overflow:hidden;

  isolation:isolate;

}


.hero-media,
.hero-overlay{

  position:absolute;

  inset:0;

}


.hero-media{

  z-index:-3;


  background:

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

}


.hero-media img{

  width:100%;

  height:100%;

  object-fit:cover;

  object-position:center 42%;


  filter:

    saturate(1.18)

    contrast(1.04);

}


.hero-media.image-fallback{

  background:

    radial-gradient(
      circle at 70% 35%,
      #9435ff,
      #25114a 42%,
      #0b0815 76%
    );

}


.hero-overlay{

  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%
    );

}


.hero::after{

  content:"";

  position:absolute;

  inset:auto 0 0;

  height:160px;

  z-index:-1;


  background:

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

}


.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;

}



/* =========================================================
   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(
      3.3rem,
      7.8vw,
      6.9rem
    );

  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;

}



/* =========================================================
   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:35px;

}


.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;

}



/* =========================================================
   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:9px;

  top:50%;


  transform:
    translateY(-50%);


  border:0;


  background:
    transparent;


  color:#ff96db;


  font-weight:800;

  font-size:.75rem;


  cursor:pointer;

}


.password-toggle:hover{

  color:white;

}



/* =========================================================
   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;

  }


  .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;

  }

}