/* ConQioFlags · web
   Como la app: oscura, con su fondo, su letra (Outfit) y sus colores. Una sola cosa llamativa: el sello dorado
   de la portada. Todo lo demás, tranquilo y legible. */

@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* los de la app */
  --noche: #082a4d;          /* el fondo, arriba (el borde de su imagen) */
  --noche-hondo: #03162c;    /* el fondo, abajo */
  --tinta: #f5f7fa;
  --tinta-media: #a9bdd4;
  --tinta-tenue: #7a93ae;
  --filo: rgba(255, 255, 255, 0.1);
  --caja: rgba(255, 255, 255, 0.045);   /* las listas de Ajustes */
  --azul: #3b9bf5;           /* la Q del nombre */
  --oro: #f5c542;
  --r-caja: 16px;
  /* de la web */
  --enlace: #8cc4ff;         /* el azul de la app, más claro: se lee bien también sobre el resplandor */
  --menu: #0b2443;
  --falta: rgba(245, 197, 66, 0.14);   /* lo que falta por rellenar: en oro, como los avisos de la app */
  --falta-tinta: var(--oro);
  --texto: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans",
    "Helvetica Neue", Arial, "Hiragino Sans", "Apple SD Gothic Neo", "Noto Sans CJK JP", sans-serif;
}

/* Outfit no tiene las letras del vietnamita, ni las del japonés o el coreano: en esos idiomas, la del sistema. */
html:lang(vi),
html:lang(ja),
html:lang(ko) {
  --texto: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial,
    "Hiragino Sans", "Apple SD Gothic Neo", "Noto Sans CJK JP", sans-serif;
}

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

html {
  background: var(--noche-hondo);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* El fondo de la app, quieto mientras la página se desplaza, como en la app.
   En el móvil, su misma imagen. En pantallas más grandes, la versión vectorial, nítida a cualquier tamaño:
   en vertical, la misma composición del móvil; en horizontal, una pensada para pantalla ancha. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  background: url("fondo-movil.webp") top center / cover no-repeat,
    linear-gradient(180deg, var(--noche) 0%, var(--noche-hondo) 100%);
}

@media (min-width: 700px) {
  body::before {
    background-image: url("fondo-vertical.svg"), linear-gradient(180deg, var(--noche) 0%, var(--noche-hondo) 100%);
  }
}

@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  body::before {
    background-image: url("fondo.svg"), linear-gradient(180deg, var(--noche) 0%, var(--noche-hondo) 100%);
    background-position: top right;
  }
}

main {
  flex: 1;
}

@media (min-width: 720px) {
  body {
    font-size: 1.125rem;
  }
}

::selection {
  background: rgba(59, 155, 245, 0.45);
  color: #fff;
}

a {
  color: var(--enlace);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
}

a:hover {
  text-decoration-thickness: 0.14em;
}

:focus-visible {
  outline: 3px solid var(--enlace);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
}

strong {
  font-weight: 600;
  color: var(--tinta);
}

.wrap {
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 720px) {
  .wrap {
    padding-inline: 32px;
  }
}

.saltar {
  position: absolute;
  left: -999px;
  top: 12px;
}

.saltar:focus {
  left: 16px;
  z-index: 10;
  padding: 8px 12px;
  background: var(--menu);
  color: var(--tinta);
  border-radius: 8px;
}

/* Cabecera */

.cabecera {
  border-bottom: 1px solid var(--filo);
}

.cabecera-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.marca {
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--tinta);
  text-decoration: none;
}

.marca .q {
  color: var(--azul);
}

.idioma {
  position: relative;
  font-size: 0.9375rem;
  color: var(--tinta);
}

.idioma summary {
  cursor: pointer;
  list-style: none;
  padding: 6px 12px;
  background: var(--caja);
  border: 1px solid var(--filo);
  border-radius: 10px;
}

.idioma summary::-webkit-details-marker {
  display: none;
}

.idioma ul {
  position: absolute;
  right: 0;
  z-index: 5;
  margin: 6px 0 0;
  padding: 6px;
  min-width: 12rem;
  list-style: none;
  background: var(--menu);
  border: 1px solid var(--filo);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.idioma li a {
  display: block;
  padding: 6px 10px;
  color: var(--tinta);
  text-decoration: none;
  border-radius: 8px;
}

.idioma li a:hover,
.idioma li a[aria-current] {
  background: rgba(255, 255, 255, 0.08);
}

/* Portada */

.portada {
  display: grid;
  gap: 20px;
  align-items: center;
  padding-block: 28px 44px;
}

.sello-caja {
  order: -1;
  justify-self: center;
}

.sello {
  display: block;
  width: min(210px, 58vw);
  height: auto;
  color: var(--oro);
  transform: rotate(-9deg);
  opacity: 0.92;
}

.sello text {
  font-family: var(--texto);
  font-weight: 700;
}

.sello-texto {
  font-size: 18px;
  letter-spacing: 2.6px;
}

.sello-palabra {
  font-size: 15px;
  letter-spacing: 1.2px;
}

@media (prefers-reduced-motion: no-preference) {
  .sello {
    animation: sellar 560ms cubic-bezier(0.2, 0.75, 0.25, 1) 200ms both;
  }

  @keyframes sellar {
    0% {
      transform: scale(1.6) rotate(-17deg);
      opacity: 0;
    }
    55% {
      transform: scale(0.95) rotate(-8deg);
      opacity: 0.95;
    }
    100% {
      transform: scale(1) rotate(-9deg);
      opacity: 0.92;
    }
  }
}

.portada h1 {
  font-weight: 700;
  font-size: clamp(2.125rem, 8.4vw, 3.6rem);
  max-width: 15ch;
  margin-bottom: 0.45em;
}

.entrada {
  font-size: 1.125em;
  max-width: 34ch;
}

.precio {
  max-width: 40ch;
  color: var(--tinta-media);
}

.pronto {
  display: inline-block;
  margin: 0.25em 0 0;
  padding: 0.45em 1.1em;
  background: var(--caja);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
}

@media (min-width: 880px) {
  .portada {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: 56px;
    padding-block: 72px 88px;
  }

  .sello-caja {
    order: 0;
  }

  .sello {
    width: 340px;
  }
}

.trae {
  padding-block: 8px 48px;
}

.trae h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.trae ul {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .trae ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

.trae li {
  padding-top: 14px;
  border-top: 2px solid rgba(255, 255, 255, 0.16);
}

.trae h3 {
  font-size: 1.1875rem;
  margin-bottom: 6px;
}

.trae p {
  margin: 0;
  color: var(--tinta-media);
}

.privado {
  padding-block: 0 56px;
}

.privado p {
  margin: 0;
  padding: 18px 20px;
  background: var(--caja);
  border: 1px solid var(--filo);
  border-radius: var(--r-caja);
}

/* Páginas de texto: privacidad, soporte, términos */

.doc {
  max-width: 43rem;
  padding-block: 36px 64px;
  color: var(--tinta-media);
}

.doc h1 {
  font-size: clamp(2rem, 7vw, 2.75rem);
  margin-bottom: 0.3em;
  color: var(--tinta);
}

.actualizada {
  color: var(--tinta-media);
  font-size: 0.9375rem;
}

.doc h2 {
  font-size: 1.375rem;
  margin: 2.1em 0 0.6em;
  color: var(--tinta);
}

.doc ul {
  padding-left: 1.2em;
}

.doc li {
  margin-bottom: 0.6em;
}

.doc li::marker {
  color: var(--azul);
}

.resumen,
.contacto {
  margin: 22px 0 8px;
  padding: 16px 20px;
  background: var(--caja);
  border: 1px solid var(--filo);
  border-radius: var(--r-caja);
  color: var(--tinta);
}

.resumen {
  border-left: 4px solid var(--azul);
}

.resumen p:last-child,
.contacto p:last-child {
  margin-bottom: 0;
}

.contacto {
  padding: 20px;
}

.correo {
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: clamp(1.25rem, 5.6vw, 1.625rem);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.doc details {
  border-top: 1px solid var(--filo);
}

.doc details:last-of-type {
  border-bottom: 1px solid var(--filo);
}

.doc summary {
  position: relative;
  padding: 14px 36px 14px 0;
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
}

.doc summary::-webkit-details-marker {
  display: none;
}

.doc summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-52%);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--azul);
}

.doc details[open] summary::after {
  content: "\2212";
}

.doc details > p {
  margin-bottom: 1em;
}

mark.falta {
  padding: 0.05em 0.35em;
  background: var(--falta);
  color: var(--falta-tinta);
  box-shadow: inset 0 0 0 1px rgba(245, 197, 66, 0.35);
  border-radius: 4px;
}

/* Pie */

.pie {
  border-top: 1px solid var(--filo);
  color: var(--tinta-media);
  font-size: 0.9375rem;
}

.pie-in {
  display: grid;
  gap: 6px;
  padding-block: 24px 40px;
}

.pie nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-bottom: 6px;
}

.pie a {
  color: var(--tinta);
}

.pie p {
  margin: 0;
}

/* Elegir idioma (cuando no hay JavaScript) */

.lista-idiomas {
  padding-left: 1.2em;
}

/* Al imprimir: sin fondo y en negro sobre blanco */

@media print {
  :root {
    color-scheme: light;
    --tinta: #000;
    --tinta-media: #222;
    --enlace: #000;
    --azul: #000;
    --filo: #bbb;
    --caja: transparent;
    --falta: #ffe7a0;
    --falta-tinta: #000;
  }

  html {
    background: #fff;
  }

  body::before {
    display: none;
  }

  .sello {
    color: #000;
  }
}