/* =========================================================
   GAMESALONE18 UNIVERSE
   AVISO DE PRIVACIDAD
   CSS INDEPENDIENTE
========================================================= */


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

:root {

  --green: #00ffae;

  --bg: #050507;

  --surface: #09090c;

  --surface-2: #0d0d11;

  --text: #f4f4f6;

  --muted: #9999a2;

  --dim: #62626b;

  --border:
    rgba(255,255,255,.09);

  --green-border:
    rgba(0,255,174,.18);

}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}


body {

  background: var(--bg);

  color: var(--text);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  line-height: 1.6;

  -webkit-font-smoothing:
    antialiased;

}


a {
  color: inherit;
  text-decoration: none;
}


button,
input,
textarea,
select {
  font: inherit;
}



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

.site-header {

  position: sticky;

  top: 0;

  z-index: 100;

  background:
    rgba(5,5,7,.92);

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

  backdrop-filter:
    blur(15px);

}


.header-inner {

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

  min-height: 72px;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 30px;

}


.brand {

  display: flex;

  flex-direction: column;

  line-height: .92;

}


.brand-main {

  color: white;

  font-size: 1rem;

  font-weight: 900;

  letter-spacing: -1px;

}


.brand-universe {

  margin-top: 4px;

  color: var(--green);

  font-size: .52rem;

  font-weight: 900;

  letter-spacing: 4px;

}


.header-nav {

  display: flex;

  align-items: center;

  gap: 28px;

}


.header-nav a {

  color: #8e8e96;

  font-size: .68rem;

  font-weight: 800;

  transition:
    color .2s ease;

}


.header-nav a:hover {
  color: var(--green);
}



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

.legal-hero {

  position: relative;

  overflow: hidden;

  padding:
    100px 20px
    85px;

  background:

    radial-gradient(
      circle at 15% 30%,
      rgba(0,255,174,.10),
      transparent 30%
    ),

    linear-gradient(
      135deg,
      #09090c,
      #040405
    );

}


.legal-hero::after {

  content: "LEGAL";

  position: absolute;

  right: -30px;

  bottom: -75px;

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

  font-size:
    clamp(9rem, 22vw, 20rem);

  font-weight: 900;

  letter-spacing: -15px;

  line-height: 1;

  pointer-events: none;

}


.legal-hero-inner {

  position: relative;

  z-index: 2;

  width:
    min(100%, 1040px);

  margin: auto;

}


.eyebrow {

  color: var(--green);

  font-size: .63rem;

  font-weight: 900;

  letter-spacing: 4px;

}


.legal-hero h1 {

  margin-top: 20px;

  max-width: 850px;

  font-size:
    clamp(4rem, 10vw, 8rem);

  line-height: .83;

  letter-spacing: -7px;

}


.legal-hero h1 span {

  display: block;

  color: var(--green);

}


.legal-intro {

  max-width: 680px;

  margin-top: 38px;

  color: #aaaab2;

  font-size:
    clamp(1rem, 2vw, 1.18rem);

  line-height: 1.8;

}


.legal-meta {

  margin-top: 50px;

  padding-top: 25px;

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

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}


.legal-meta span {

  padding:
    7px 11px;

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

  border-radius: 999px;

  color: #777780;

  font-size: .55rem;

  font-weight: 900;

  letter-spacing: 1.5px;

}



/* =========================================================
   PRINCIPIO
========================================================= */

.privacy-principle {

  padding:
    55px 20px;

  border-top:
    1px solid var(--green-border);

  border-bottom:
    1px solid var(--green-border);

  background:
    rgba(0,255,174,.025);

}


.privacy-principle-inner {

  width:
    min(100%, 900px);

  margin: auto;

  display: grid;

  grid-template-columns:
    120px 1fr;

  gap: 45px;

  align-items: start;

}


.principle-number {

  color: var(--green);

  font-size: .58rem;

  font-weight: 900;

  letter-spacing: 2px;

}


.privacy-principle p {

  color: #c6c6cb;

  font-size:
    clamp(1rem, 2vw, 1.18rem);

  line-height: 1.8;

}



/* =========================================================
   LAYOUT
========================================================= */

.legal-layout {

  width:
    min(calc(100% - 40px), 1100px);

  margin:
    90px auto
    120px;

  display: grid;

  grid-template-columns:
    220px
    minmax(0, 740px);

  justify-content:
    space-between;

  gap: 80px;

}



/* =========================================================
   ÍNDICE
========================================================= */

.index-sticky {

  position: sticky;

  top: 110px;

}


.index-title {

  padding-bottom: 15px;

  border-bottom:
    2px solid var(--green);

  color: var(--green);

  font-size: .58rem;

  font-weight: 900;

  letter-spacing: 2px;

}


.legal-index nav {

  margin-top: 8px;

}


.legal-index a {

  padding:
    9px 0;

  display: grid;

  grid-template-columns:
    25px 1fr;

  gap: 7px;

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

  color: #696972;

  font-size: .64rem;

  transition:
    color .2s ease;

}


.legal-index a span {

  color: #3f3f46;

  font-size: .55rem;

  font-weight: 900;

}


.legal-index a:hover {
  color: var(--green);
}



/* =========================================================
   DOCUMENTO
========================================================= */

.legal-document {

  min-width: 0;

}


.legal-section {

  padding:
    0 0
    75px;

  margin-bottom:
    75px;

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

}


.section-number {

  display: block;

  margin-bottom: 14px;

  color: var(--green);

  font-size: .6rem;

  font-weight: 900;

  letter-spacing: 3px;

}


.legal-section h2 {

  margin-bottom: 30px;

  color: white;

  font-size:
    clamp(2.1rem, 5vw, 3.5rem);

  line-height: 1;

  letter-spacing: -2.5px;

}


.legal-section h2 span {

  display: block;

  color: var(--green);

}


.legal-section h3 {

  margin:
    42px 0
    15px;

  color: #e3e3e6;

  font-size: .82rem;

  font-weight: 900;

  letter-spacing: 1px;

  text-transform: uppercase;

}


.legal-section > p {

  margin-bottom: 22px;

  color: var(--muted);

  font-size: .92rem;

  line-height: 1.9;

}


.legal-section p strong {
  color: white;
}


.legal-section ul {

  margin:
    25px 0
    30px;

  list-style: none;

}


.legal-section li {

  position: relative;

  margin-bottom: 13px;

  padding-left: 24px;

  color: #9999a1;

  font-size: .88rem;

  line-height: 1.7;

}


.legal-section li::before {

  content: "";

  position: absolute;

  left: 0;

  top: .72em;

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background:
    var(--green);

}



/* =========================================================
   NOTAS
========================================================= */

.legal-note {

  margin:
    35px 0;

  padding:
    25px;

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

  border-radius: 16px;

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

}


.legal-note strong {

  display: block;

  margin-bottom: 8px;

  color: var(--green);

  font-size: .7rem;

  letter-spacing: 1px;

  text-transform: uppercase;

}


.legal-note p {

  color: #8d8d95;

  font-size: .8rem;

  line-height: 1.75;

}



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

.contact-box {

  margin:
    30px 0;

  padding:
    25px;

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

  border-radius: 15px;

  background: var(--surface);

  display: flex;

  flex-direction: column;

  gap: 5px;

}


.contact-box span {

  color: #5c5c64;

  font-size: .55rem;

  font-weight: 900;

  letter-spacing: 2px;

}


.contact-box a {

  width: fit-content;

  color: var(--green);

  font-size: 1rem;

  font-weight: 800;

}


.contact-box small {

  color: #66666e;

  font-size: .67rem;

}



/* =========================================================
   ARCO
========================================================= */

.arco-grid {

  margin:
    35px 0;

  display: grid;

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

  gap: 12px;

}


.arco-grid > div {

  padding: 25px;

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

  border-radius: 18px;

  background: var(--surface);

}


.arco-grid strong {

  display: block;

  color: var(--green);

  font-size: 2.3rem;

  line-height: 1;

}


.arco-grid span {

  display: block;

  margin-top: 12px;

  color: white;

  font-size: .82rem;

  font-weight: 900;

}


.arco-grid p {

  margin-top: 8px;

  color: #71717a;

  font-size: .72rem;

  line-height: 1.6;

}



/* =========================================================
   URL
========================================================= */

.url-box {

  margin:
    28px 0;

  padding:
    18px 22px;

  border-left:
    3px solid var(--green);

  background:
    rgba(0,255,174,.04);

  color: var(--green);

  font-size: .82rem;

  font-weight: 800;

  overflow-wrap: anywhere;

}



/* =========================================================
   CONTACTO FINAL
========================================================= */

.privacy-contact {

  margin:
    35px 0;

  padding:
    35px;

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

  border-radius: 22px;

  background:

    radial-gradient(
      circle at 100% 0,
      rgba(0,255,174,.08),
      transparent 45%
    ),

    var(--surface);

  display: flex;

  flex-direction: column;

  gap: 6px;

}


.privacy-contact > span {

  color: var(--green);

  font-size: .57rem;

  font-weight: 900;

  letter-spacing: 2px;

}


.privacy-contact strong {

  margin:
    5px 0 12px;

  font-size: 1.25rem;

}


.privacy-contact a {

  width: fit-content;

  color: var(--green);

  font-weight: 800;

}


.privacy-contact small {

  color: #66666e;

}


.document-version {

  color: #595961 !important;

  font-size: .72rem !important;

}



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

.legal-navigation {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 15px;

}


.legal-navigation > a {

  min-height: 100px;

  padding:
    25px;

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

  border-radius: 17px;

  background: var(--surface);

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

}


.legal-navigation > a:hover {

  border-color:
    var(--green-border);

  transform:
    translateY(-2px);

}


.legal-nav-back {

  display: flex;

  align-items: center;

  color: #83838b;

  font-size: .7rem;

  font-weight: 900;

}


.legal-nav-next {

  display: flex;

  flex-direction: column;

  justify-content: center;

}


.legal-nav-next small {

  color: #55555d;

  font-size: .53rem;

  font-weight: 900;

  letter-spacing: 1.5px;

}


.legal-nav-next strong {

  margin-top: 6px;

  color: var(--green);

  font-size: .78rem;

}



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

.site-footer {

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

  background: #030304;

}


.footer-inner {

  width:
    min(calc(100% - 40px), 1100px);

  margin: auto;

  padding:
    65px 0;

  display: grid;

  grid-template-columns:
    2fr 1fr 1fr;

  gap: 60px;

}


.footer-identity strong {

  font-size: 1rem;

}


.footer-identity p {

  margin-top: 8px;

  color: #5d5d65;

  font-size: .7rem;

}


.footer-legal,
.footer-links {

  display: flex;

  flex-direction: column;

  gap: 8px;

}


.footer-legal > span,
.footer-links > span {

  margin-bottom: 8px;

  color: var(--green);

  font-size: .55rem;

  font-weight: 900;

  letter-spacing: 2px;

}


.footer-legal a,
.footer-links a {

  color: #77777f;

  font-size: .68rem;

}


.footer-legal a:hover,
.footer-links a:hover {

  color: white;

}


.footer-bottom {

  width:
    min(calc(100% - 40px), 1100px);

  margin: auto;

  padding:
    22px 0;

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

  display: flex;

  justify-content:
    space-between;

  gap: 20px;

  color: #4d4d54;

  font-size: .6rem;

}



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

@media (max-width: 850px) {

  .legal-layout {

    grid-template-columns:
      1fr;

    gap: 60px;

  }


  .legal-index {
    display: none;
  }


  .footer-inner {

    grid-template-columns:
      1fr 1fr;

  }


  .footer-identity {
    grid-column:
      1 / -1;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .header-inner {

    width:
      calc(100% - 30px);

    min-height: 65px;

  }


  .header-nav {
    gap: 14px;
  }


  .header-nav a {

    font-size: .58rem;

  }


  .header-nav a:nth-child(2) {
    display: none;
  }


  .legal-hero {

    padding:
      70px 17px
      60px;

  }


  .legal-hero h1 {

    font-size:
      clamp(3.5rem, 18vw, 5.3rem);

    letter-spacing: -5px;

  }


  .legal-intro {

    font-size: .92rem;

  }


  .privacy-principle {

    padding:
      40px 17px;

  }


  .privacy-principle-inner {

    grid-template-columns:
      1fr;

    gap: 15px;

  }


  .legal-layout {

    width:
      calc(100% - 32px);

    margin:
      65px auto
      90px;

  }


  .legal-section {

    padding-bottom: 55px;

    margin-bottom: 55px;

  }


  .legal-section h2 {

    font-size:
      clamp(2.3rem, 12vw, 3.4rem);

  }


  .legal-section > p {

    font-size: .88rem;

    line-height: 1.8;

  }


  .legal-note {

    padding: 20px;

  }


  .arco-grid {

    grid-template-columns:
      1fr;

  }


  .privacy-contact {

    padding:
      27px 22px;

  }


  .legal-navigation {

    grid-template-columns:
      1fr;

  }


  .footer-inner {

    width:
      calc(100% - 32px);

    grid-template-columns:
      1fr;

    gap: 35px;

    padding:
      50px 0;

  }


  .footer-identity {
    grid-column: auto;
  }


  .footer-bottom {

    width:
      calc(100% - 32px);

    flex-direction: column;

    gap: 5px;

  }

}