/* =====================================================================
   WENKORA: estilo de las páginas de privacidad (rediseño del 23/10/2026)
   ---------------------------------------------------------------------
   Las políticas las preparan los chats de cada juego con estilos escritos
   dentro de cada etiqueta. Esta hoja les pone el lenguaje del home (fondo
   menta, tarjeta blanca, títulos en Michroma, sin letra de máquina) sin
   tocar sus textos. Por eso usa !important: tiene que ganarle a esos
   estilos internos.

   Una política nueva solo necesita <link rel="stylesheet" href="legal.css">
   en el <head>, <script src="../site-chrome.js"></script> justo antes de
   </body> (no en el <head>: ahí choca con el componente que dibuja la
   página), y <wk-header data-root="../"> / <wk-footer data-root="../"> en
   vez de la cabecera y el pie propios.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Michroma&display=swap');

html, body { background: #DCEBE6 !important; }

/* el fondo de la página y los adornos de antes (el componente que dibuja
   la página reescribe los estilos: los colores quedan como rgb(...) y se
   pierden algunos atributos, por eso hay selectores para los dos casos) */
x-dc > div,
div[style*="min-height: 100vh"] { background: #DCEBE6 !important; color: #12161C !important; }
x-dc > div > div[aria-hidden="true"],
div[style*="position: fixed"][style*="pointer-events: none"] { display: none !important; }

/* la política: una tarjeta blanca */
section[data-screen-label] {
  background: #FFFFFF;
  border-radius: 44px;
  max-width: 880px !important;
  margin: clamp(22px, 4vw, 40px) auto 0 !important;
  padding: clamp(30px, 6vw, 72px) clamp(22px, 6vw, 72px) clamp(40px, 7vw, 80px) !important;
  box-shadow: 0 50px 90px -60px rgba(18, 50, 45, .5);
}
@media (max-width: 920px) {
  section[data-screen-label] { margin-left: clamp(16px, 3vw, 40px) !important; margin-right: clamp(16px, 3vw, 40px) !important; }
}

/* sin letra de máquina de escribir: etiquetas en Archivo, a tamaño legible */
section[data-screen-label] [style*="Space Mono"] {
  font-family: 'Archivo', Helvetica, Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* títulos */
section[data-screen-label] h1 {
  font-family: 'Michroma', 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 5vw, 50px) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  color: #12161C !important;
}
section[data-screen-label] h2 {
  font-family: 'Michroma', 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(18px, 2.4vw, 22px) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  border-top-color: #E4E8EA !important;
}

/* líneas y recuadros: suaves, sin sombra dura */
section[data-screen-label] [style*="border-bottom: 2px solid #101438"],
section[data-screen-label] [style*="border-bottom: 2px solid rgb(16, 20, 56)"] { border-bottom-color: #E4E8EA !important; }
section[data-screen-label] div[style*="box-shadow"] {
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: #EEF2F1 !important;
}
/* las tarjetas de "Políticas por juego" */
section[data-screen-label] a[href^="privacidad-"][style*="display: flex"] {
  box-shadow: none !important;
  border: 2px solid #E4E8EA !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  transition: border-color .2s ease, transform .2s ease !important;
}
section[data-screen-label] a[href^="privacidad-"][style*="display: flex"]:hover { border-color: #5CC6A0 !important; transform: translateY(-2px); }
section[data-screen-label] a[href^="privacidad-"][style*="display: flex"] span[style*="white-space: nowrap"] { color: #12161C !important; font-weight: 700 !important; }

/* enlaces dentro del texto */
section[data-screen-label] p a,
section[data-screen-label] li a {
  color: #12161C !important;
  border-bottom: 2px solid #5CC6A0 !important;
}
section[data-screen-label] p a:hover,
section[data-screen-label] li a:hover { border-bottom-color: #12161C !important; }

/* la etiqueta "Legal / Juego" de arriba */
section[data-screen-label] > span:first-child { color: #5B6470 !important; }