/*
 * titanppt.online: el diseno compartido de TODAS las paginas.
 *
 * POR QUE UN SOLO FICHERO
 *
 * La portada tenia su diseno escrito dentro de si misma, y las paginas legales
 * salian de una plantilla aparte con otro fondo, otra letra y sin cabecera. Y
 * en modo claro se ponian blancas mientras la portada seguia oscura. Dos
 * disenos que no se hablaban, y cada cambio en uno dejaba atras al otro.
 *
 * Ahora la portada y el resto leen esta misma hoja. Lo que cambie aqui cambia
 * en todas a la vez; es la unica forma de que "el diseno igual en toda la web"
 * siga siendo cierto dentro de seis meses.
 *
 * Los dos primeros bloques estan copiados TAL CUAL de la portada, no
 * reescritos: asi la portada se ve exactamente igual que antes de separarlos.
 * Lo nuevo -el formato de los documentos largos- va al final.
 */

:root {
  color-scheme: dark;

  /* --- Superficies (base.css) --- */
  --bg-deep: #06060a;
  --panel: rgba(22, 26, 48, 0.56);
  --panel-2: rgba(40, 46, 76, 0.60);
  --panel-3: rgba(66, 74, 112, 0.56);
  --line-soft: rgba(150, 175, 245, 0.16);
  /* El filo claro de 1 px del canto superior: es lo que separa "cristal" de
     "mancha translucida", y el mas barato de los tres ingredientes. */
  --glass-edge: rgba(215, 235, 255, 0.58);

  /* --- Violeta: el color de marca --- */
  --accent: #9d6bff;
  --accent-hi: #c4a5ff;

  /* --- Oro: SOLO para lo que tiene valor o es la accion principal --- */
  --gold: #d9a441;
  --gold-hi: #f4d78d;
  --gold-lo: #8a6420;

  --silver: #c3ccd8;
  --silver-lo: #7b8494;

  --text: #f4f5f8;
  --text-dim: #9aa1b0;
  --text-mute: #626a7a;

  --bevel: 12px;
  --bevel-sm: 8px;

  /* La app declara 'Titanes' con Segoe UI de reserva y, al no haber fichero de
     fuente, lo que se ve de verdad ES la de sistema. Usar aqui la misma pila
     mantiene la web y el juego hablando con la misma letra, y de paso no hay
     que descargar ninguna. */
  --font: 'Segoe UI', Roboto, system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  --ancho: 1120px;
  --margen: clamp(18px, 5vw, 40px);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-deep);
  overflow-x: hidden;
}

/*
 * Los halos de color del fondo.
 *
 * En el juego van en `body` con `background-attachment: fixed`. Aqui van en un
 * pseudo-elemento fijo porque esta pagina SI hace scroll: `fixed` en el fondo
 * obliga a repintar el degradado en cada fotograma de desplazamiento, y iOS
 * directamente lo ignora. Una capa fija de verdad da el mismo resultado sin
 * ese coste.
 *
 * No es decoracion prescindible: los paneles son translucidos y solo se leen
 * como cristal si hay color detras que atraviese el desenfoque.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 50% at 15% 4%, rgba(88, 112, 255, 0.34), transparent 60%),
    radial-gradient(ellipse 80% 46% at 92% 22%, rgba(176, 78, 255, 0.30), transparent 58%),
    radial-gradient(ellipse 70% 40% at 8% 62%, rgba(60, 190, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 100% 42% at 55% 102%, rgba(120, 80, 255, 0.26), transparent 66%),
    var(--bg-deep);
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--accent-hi); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }

/* ------------------------------------------------------------------ formas */

/*
 * El bisel octogonal: la firma visual del juego.
 * `clip-path` recorta el elemento y recortaria tambien cualquier `border`,
 * dejando los chaflanes sin linea. Por eso el contorno se pinta con
 * `drop-shadow`, que sigue la silueta real del recorte, y con un degradado
 * cuyo primer pixel es mas claro.
 */
.panel {
  position: relative;
  background: linear-gradient(
    180deg,
    var(--glass-edge) 0 1px,
    var(--panel-2) 1px,
    var(--panel) 55%,
    rgba(9, 12, 28, 0.66) 100%
  );
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  --b: var(--bevel);
  clip-path: polygon(
    var(--b) 0, calc(100% - var(--b)) 0, 100% var(--b),
    100% calc(100% - var(--b)), calc(100% - var(--b)) 100%,
    var(--b) 100%, 0 calc(100% - var(--b)), 0 var(--b)
  );
  /* El canto prismatico: cian arriba, magenta abajo. Es lo que hace un canto
     de vidrio real al descomponer la luz. Muy sutil a proposito. */
  filter:
    drop-shadow(0 -0.5px 0 rgba(120, 230, 255, 0.42))
    drop-shadow(0 0.5px 0 rgba(215, 130, 255, 0.34))
    drop-shadow(0 0 1px rgba(210, 230, 255, 0.5))
    drop-shadow(0 10px 26px rgba(0, 0, 0, 0.45));
}

/* Sin `backdrop-filter` no hay desenfoque, y un panel al 56 % sobre el fondo
   deja el texto ilegible. Se vuelve casi solido. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel {
    background: linear-gradient(180deg, var(--glass-edge) 0 1px, #232739 1px, #171a28 100%);
  }
}

/* --------------------------------------------------------------- rotulos */

.eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-hi);
}

.eyebrow--gold { color: var(--gold); }

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.08;
  text-transform: uppercase;
}

h1 { font-size: clamp(2.1rem, 7vw, 3.9rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.45rem, 4.2vw, 2.3rem); }
h3 { font-size: 15px; letter-spacing: 0.09em; color: var(--text); }

.lead {
  color: var(--text-dim);
  font-size: clamp(1rem, 2.4vw, 1.14rem);
  line-height: 1.62;
}

/* ----------------------------------------------------------- maquetacion */

.envoltorio {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding-left: var(--margen);
  padding-right: var(--margen);
}

section { padding: clamp(52px, 8.5vw, 100px) 0; }

.seccion__cabecera { max-width: 62ch; margin-bottom: clamp(26px, 4vw, 42px); }
.seccion__cabecera h2 { margin: 10px 0 14px; }

/* --------------------------------------------------------------- cabecera */

.top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(6, 6, 10, 0.8);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}

.top__fila { display: flex; align-items: center; gap: 16px; height: 62px; }

.marca {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  text-decoration: none;
  flex: none;
}

.marca:hover { text-decoration: none; }

.marca img {
  width: 32px;
  height: 32px;
  --b: 5px;
  clip-path: polygon(
    var(--b) 0, calc(100% - var(--b)) 0, 100% var(--b),
    100% calc(100% - var(--b)), calc(100% - var(--b)) 100%,
    var(--b) 100%, 0 calc(100% - var(--b)), 0 var(--b)
  );
}

.marca__texto {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.marca__texto span { color: var(--accent-hi); }

.top nav {
  margin-left: auto;
  display: flex;
  gap: clamp(14px, 2.4vw, 26px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.top nav a { color: var(--text-dim); }
.top nav a:hover { color: var(--text); text-decoration: none; }

/* Por debajo de 720 px la navegacion sobra: la portada es corta y se recorre
   con el dedo antes de que nadie busque un menu. Se queda la marca. */
@media (max-width: 720px) {
  .top nav { display: none; }
}

.pie {
  border-top: 1px solid var(--line-soft);
  background: rgba(6, 6, 10, 0.72);
  padding: clamp(38px, 6vw, 56px) 0 clamp(30px, 5vw, 44px);
}

.pie__rejilla { display: grid; gap: 30px; align-items: start; }

@media (min-width: 720px) {
  .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; }
}

.pie h3 { font-size: 11px; letter-spacing: 0.2em; color: var(--text-mute); margin-bottom: 14px; }
.pie ul { list-style: none; display: grid; gap: 9px; }
.pie a { color: var(--text-dim); font-size: 15px; }
.pie a:hover { color: var(--accent-hi); }
.pie__empresa { font-size: 15px; color: var(--text-dim); line-height: 1.65; margin-top: 16px; }

/* El sello de la sociedad, DEBAJO de la linea que habla de ella.

   Va pequeno y al pie: aqui quien manda es Titanes PPT, que es lo que la gente
   viene a jugar. Otjh LLC es quien responde, y eso se firma, no se anuncia.

   El logotipo trae su propio fondo oscuro, asi que el redondeo lo integra con
   el pie en vez de dejar un cuadrado pegado encima. */
.pie__otjh {
  display: block;
  width: 52px;
  height: 52px;
  margin-top: 14px;
  border-radius: 12px;
}
.pie__empresa strong { color: var(--text); font-weight: 800; letter-spacing: 0.04em; }

.pie__legal {
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--text-mute);
  line-height: 1.6;
}

/* ------------------------------------------------------ movimiento reducido */

/*
 * Lo mismo que hace `src/styles/base.css` en el juego. Aqui hay poco que
 * apagar -no hay bucles de animacion- pero el `scroll-behavior: smooth` de los
 * enlaces del menu es justo el tipo de movimiento que marea a quien pide que
 * se reduzca, y por defecto no se apaga solo.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================================
   PAGINAS DE TEXTO LARGO: politica, terminos, licencias, borrar datos
   =========================================================================

   El mismo lenguaje que la portada -rotulos en mayusculas, violeta para lo
   que se pulsa, oro para lo que importa-, pero hecho para LEER: una columna
   de unos 70 caracteres, que es donde el ojo no se pierde al saltar de linea.

   La hoja lleva el bisel y el canto de cristal de los paneles de la portada,
   pero SIN el desenfoque de fondo (`backdrop-filter`). En una pagina de cinco
   mil pixeles de alto ese desenfoque se recalcula en cada fotograma de scroll,
   y en un movil modesto se nota. El fondo casi solido da el mismo aspecto a
   una fraccion del coste. */

.documento {
  padding: clamp(28px, 5vw, 56px) 0 clamp(44px, 7vw, 80px);
}

.documento__hoja {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 52px) clamp(20px, 5vw, 56px);
  background: linear-gradient(
    180deg,
    var(--glass-edge) 0 1px,
    rgba(34, 38, 64, 0.94) 1px,
    rgba(18, 21, 36, 0.96) 100%
  );
  --b: var(--bevel);
  clip-path: polygon(
    var(--b) 0, calc(100% - var(--b)) 0, 100% var(--b),
    100% calc(100% - var(--b)), calc(100% - var(--b)) 100%,
    var(--b) 100%, 0 calc(100% - var(--b)), 0 var(--b)
  );
  filter:
    drop-shadow(0 -0.5px 0 rgba(120, 230, 255, 0.42))
    drop-shadow(0 0.5px 0 rgba(215, 130, 255, 0.34))
    drop-shadow(0 0 1px rgba(210, 230, 255, 0.5))
    drop-shadow(0 10px 26px rgba(0, 0, 0, 0.45));
}

.documento__cabecera {
  padding-bottom: clamp(18px, 3vw, 26px);
  margin-bottom: clamp(20px, 3.5vw, 30px);
  border-bottom: 1px solid var(--line-soft);
}

/* El titulo usa la escala del h2 de la portada, no la del h1: una politica de
   privacidad no es un cartel, y a 3,9 rem ocuparia media pantalla del movil. */
.documento h1 {
  font-size: clamp(1.45rem, 4.2vw, 2.3rem);
  margin: 10px 0 12px;
  text-wrap: balance;
}

.documento__meta { font-size: 13px; color: var(--text-mute); }

.documento__cuerpo {
  max-width: 70ch;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.72;
}

.documento__cuerpo p { margin-bottom: 14px; }
.documento__cuerpo b,
.documento__cuerpo strong { color: var(--text); }
.documento__cuerpo i { color: var(--text); }

/* Los apartados: el mismo rotulo que los h3 de la portada, con una linea
   encima para que un documento largo se pueda recorrer de un vistazo. */
.documento__cuerpo h4 {
  margin: 34px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}

.documento__cuerpo h4:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.documento__cuerpo ul,
.documento__cuerpo ol { margin: 0 0 16px 22px; }
.documento__cuerpo li { margin-bottom: 8px; }
.documento__cuerpo li::marker { color: var(--accent-hi); }

/* Los pasos numerados de "borrar mis datos": numeros en oro, porque ahi es
   donde se hace algo. */
.documento__cuerpo ol.pasos li::marker { color: var(--gold); font-weight: 800; }

/* Un aviso que no se puede pasar por alto, con la franja dorada a la izquierda. */
.documento__cuerpo .aviso {
  margin: 4px 0 18px;
  padding: 14px 18px;
  border-left: 3px solid var(--gold);
  background: rgba(217, 164, 65, 0.08);
}

.documento__cuerpo .aviso p:last-child { margin-bottom: 0; }

/* Los enlaces del texto se subrayan: en un documento legal, un enlace que no
   se distingue del texto es un enlace que nadie pulsa. */
.documento__cuerpo a { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 2px; }

/* Las direcciones largas -correos, URLs- no pueden empujar la columna fuera
   de la pantalla del movil. */
.documento__cuerpo { overflow-wrap: anywhere; }

/* ------------------------------------------------ documentos en dos idiomas */
/*
 * Politica, terminos, licencias y borrar-datos llevan el ingles y el castellano
 * en el mismo HTML (`data-solo="en"` / `data-solo="es"`). El script del <head>
 * pone `data-lang` en <html> antes del primer pintado, y aqui se esconde el
 * idioma que no toca.
 *
 * Sin JavaScript no hay `data-lang`: se ve el ingles, y el selector -que sin
 * script no podria hacer nada- no aparece.
 */
html:not([data-lang="es"]) [data-solo="es"],
html[data-lang="es"] [data-solo="en"] { display: none; }

html:not([data-lang]) .idioma { display: none; }

.idioma {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
  margin-top: 12px;
}

/* Los mismos rotulos que el menu de arriba: mayusculas espaciadas, apagados
   hasta que se pasa por encima. 40 px de alto, que el dedo acierte. */
.idioma__boton {
  min-height: 40px;
  padding: 8px 2px 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.idioma__boton:hover { color: var(--text); }

/* El activo, en oro. Sale del mismo `data-lang` que decide el texto, no de
   `aria-pressed`: asi no puede marcar un idioma mientras ensena el otro, ni
   siquiera durante la carga. */
html:not([data-lang="es"]) .idioma__boton[data-pon-idioma="en"],
html[data-lang="es"] .idioma__boton[data-pon-idioma="es"] {
  color: var(--gold-hi);
  border-bottom-color: var(--gold);
  cursor: default;
}

.idioma__raya { color: var(--text-mute); font-size: 12px; }

/* ----------------------------------------------------- formularios de cuenta */
/* La pagina de contrasena nueva: pocos campos, grandes, y el mismo biselado
   y el mismo oro que el resto de la web. */

.cuenta-web {
  display: grid;
  gap: 16px;
  max-width: 440px;
  margin-top: 8px;
}

.cuenta-web[hidden] { display: none; }

.cuenta-web label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text);
}

.cuenta-web input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--bevel-sm);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  /* `font` antes que `font-size`: el atajo reinicia el tamano si va detras.
     Y 16px: con menos, el Safari del iPhone amplia la pagina al enfocar. */
  font: inherit;
  font-size: 16px;
}

.cuenta-web input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(157, 107, 255, 0.25);
}

.cuenta-web__error {
  min-height: 1.4em;
  margin: 0;
  color: #ff8a8a;
  font-weight: 700;
}

.cuenta-web__boton {
  justify-self: start;
  padding: 13px 26px;
  border: 0;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: #1a1206;
  font: inherit;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  --b: var(--bevel-sm);
  clip-path: polygon(
    var(--b) 0, calc(100% - var(--b)) 0, 100% var(--b),
    100% calc(100% - var(--b)), calc(100% - var(--b)) 100%,
    var(--b) 100%, 0 calc(100% - var(--b)), 0 var(--b)
  );
}

.cuenta-web__boton:disabled { opacity: 0.6; cursor: progress; }

.cuenta-web__boton:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
}