/* Dresky · landing y páginas legales.
   Nunito (OFL) servida desde aquí: sin Google Fonts, sin enviar la IP a nadie. */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/nunito-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/nunito-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* DM Sans (OFL), la de la app, solo para el subtítulo */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/dmsans-latin.woff2") format("woff2");
}

/* La paleta es la del icono */
:root {
  --sky: #146073;
  /* Tonos de packages/tokens: la rampa del cielo y Deep Space Blue (ink[900]) */
  --sky-deep: #0e4553;
  --deep-space: #023047;
  --sun: #ffb703;
  --cloud: #eeeeee;
  --ink: #222034;
  --text: #ffffff;
  --text-soft: #c9e6ee;

  --word-size: clamp(56px, 15vw, 136px);
  /* El logo mide 589 × 733 px de dibujo, 32 píxeles de pixel art de alto */
  --logo-h: calc(var(--word-size) * 1.3);
  --logo-w: calc(var(--logo-h) * 589 / 733);
  --art-px: 3.125%;
  --gap: calc(var(--word-size) * 0.16);

  /* Curvas (Emil Kowalski, «Animations on the Web») */
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);

  color-scheme: dark;
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  background: var(--sky);
  color: var(--text);
  font-family: "Nunito", ui-rounded, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1.5px;
}
a:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── Marca: logo + «dresky» ─────────────────────────────────── */

.lockup {
  display: flex;
  align-items: center;
  gap: var(--gap);
  text-decoration: none;
}

.wordmark {
  margin: 0;
  font-weight: 900;
  font-size: var(--word-size);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cloud);
  /* Nunito baja un poco la minúscula respecto al centro óptico del logo */
  padding-bottom: 0.12em;
}

.logo {
  position: relative;
  width: var(--logo-w);
  height: var(--logo-h);
  flex: none;
  z-index: 1;
}
.logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* ─── Portada ───────────────────────────────────────────────── */

.hero {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(28px, 5vw, 48px);
  padding: 48px 16px;
  text-align: center;
}

/* Pregunta y respuesta en una sola línea, en la fuente de la app */
.tagline {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 3.9vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.tagline span {
  color: var(--text-soft);
}

/* Insignias oficiales de las tiendas, sin tocar (así lo piden Apple y Google).
   Hasta el lanzamiento no enlazan a nada y llevan «muy pronto» debajo. */
.stores {
  display: grid;
  justify-items: center;
  gap: 10px;
}
.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.badges img {
  display: block;
  height: 48px;
  width: auto;
}
.stores p {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
}

/* El móvil con la app: aparece al final, como prueba de lo que promete el título */
.device {
  width: clamp(210px, min(58vw, 40svh), 290px);
  margin-top: clamp(4px, 1.5vw, 12px);
}
.device {
  position: relative;
  /* la sombra va en la figura entera: así sigue la silueta del móvil con la
     pantalla dentro, y no se cuela por el hueco del marco */
  filter: drop-shadow(0 28px 40px rgb(8 40 50 / 0.45));
}
/* El vídeo es solo la pantalla, y el marco va encima con la pantalla hueca.
   Las medidas son las del hueco dentro del marco de 842 × 1700. */
.device .screen {
  position: absolute;
  left: calc(47 / 842 * 100%);
  top: calc(41 / 1700 * 100%);
  width: calc(747 / 842 * 100%);
  height: calc(1617 / 1700 * 100%);
  object-fit: cover;
  object-position: top;
  background: #00233b;
}
.device .frame {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

/* En ordenador, el móvil a la derecha del título y el subtítulo */
@media (min-width: 900px) {
  .hero {
    min-height: 100svh;
    grid-template-columns: auto auto;
    /* el hueco sobrante va arriba y abajo, no entre el texto y las tiendas */
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: clamp(56px, 8vw, 140px);
    row-gap: 28px;
    align-content: center;
    justify-content: center;
    justify-items: start;
    text-align: left;
  }
  .hero .lockup {
    grid-column: 1;
    grid-row: 2;
  }
  .hero .tagline {
    grid-column: 1;
    grid-row: 3;
    /* el subtítulo empieza alineado con el borde del logo */
    padding-left: 0.2em;
  }
  .hero .stores {
    grid-column: 1;
    grid-row: 4;
    justify-items: start;
    margin-top: 12px;
    padding-left: 0.2em;
  }
  .badges {
    justify-content: flex-start;
  }
  .device {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    margin: 0;
    width: clamp(240px, min(22vw, calc(76svh * 842 / 1700)), 330px);
  }
}

/* ─── Preguntas ───────────────────────────────────────────────
   Una por pantalla, más o menos: mucho aire entre ellas para que el scroll
   las vaya contando de una en una. */

.faq {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(24px, 6vw, 72px) 16px clamp(72px, 12vw, 140px);
  text-align: center;
}
.qa {
  padding-block: clamp(48px, 11vh, 120px);
}
.qa h2 {
  margin: 0 0 14px;
  font-weight: 900;
  font-size: clamp(32px, 6.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--sun);
  text-wrap: balance;
}
.qa p {
  margin: 0 auto;
  max-width: 32ch;
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 2.5vw, 23px);
  line-height: 1.5;
  color: var(--text);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: no-preference) {
  .js .qa h2,
  .js .qa p {
    opacity: 0;
  }
  .js .qa.in h2 {
    opacity: 1;
    animation: rise-far 1000ms var(--ease-out-expo) both;
  }
  .js .qa.in p {
    opacity: 1;
    animation: rise 1000ms var(--ease-out-expo) 160ms both;
  }
}
@keyframes rise-far {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Pie ───────────────────────────────────────────────────── */

.site-footer {
  background: var(--deep-space);
  padding: clamp(36px, 6vw, 56px) 16px calc(24px + env(safe-area-inset-bottom));
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 15px;
  color: var(--text-soft);
}
.footer-cols {
  max-width: 56rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 24px;
}
.footer-col {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 10px;
}
.footer-col h2 {
  margin: 0 0 4px;
  font-family: "Nunito", ui-rounded, system-ui, sans-serif;
  font-weight: 900;
  font-size: 17px;
  color: var(--text);
}
.site-footer a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-footer a:hover {
  color: var(--text);
}
.site-footer .ext {
  width: 13px;
  height: 13px;
  opacity: 0.7;
}
.site-footer .social .ig {
  width: 22px;
  height: 22px;
  color: var(--sun);
}
.footer-base {
  max-width: 56rem;
  margin: 36px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.credit {
  margin: 0;
}
.credit a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* En el móvil: enlaces a dos columnas y redes abajo, a lo ancho */
@media (max-width: 599px) {
  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }
  .footer-col:last-child {
    grid-column: 1 / -1;
  }
}

/* ─── La animación de entrada (solo con JS y sin «reducir movimiento») ───
   Guion, en tres actos (unos 4 s):
   0,00 s  el logo aparece solo, en el centro de la pantalla
   0,90 s  el logo se aparta y «Dresky» sale de detrás de él (la marca, centrada)
   2,15 s  la marca entera se desplaza a su sitio
   (la silueta .occluder, del color del fondo, va entre el texto y el dibujo: el
   texto aparece justo en el contorno de la cabeza y la nube, no en el de su caja)
   2,95 s  el subtítulo; 3,10 s las tiendas; 3,25 s el móvil; 3,80 s el pie
   4,20 s  el sol empieza a botar

   Las medidas las pone el script, con la maqueta ya colocada:
   --from-x             lo que separa el centro de la marca del centro de la pantalla
                        (solo en horizontal: la marca nace ya a su altura final)
   --shift              medio ancho de «Dresky» más medio hueco: lo que el logo se
                        aparta para que, solo, quede centrado */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.letters span {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  /* Mientras las fuentes cargan, nada a medias */
  .js .hero .logo,
  .js .hero .wordmark,
  .js .hero .tagline,
  .js .hero .stores,
  .js .hero .device,
  .js .site-footer {
    opacity: 0;
  }

  /* Acto 3: la marca completa, del centro de la pantalla a su sitio */
  .play .hero .lockup {
    animation: lockup-move 1100ms var(--ease-in-out-cubic) 2150ms both;
  }

  /* Acto 1: el logo, solo y centrado. Acto 2: se aparta a la izquierda */
  .play .hero .logo {
    opacity: 1;
    animation:
      logo-in 800ms var(--ease-out-quint) both,
      logo-slide 1150ms var(--ease-in-out-cubic) 900ms both;
  }
  .play .hero .logo img {
    animation: focus 650ms linear both;
  }

  /* Acto 2: la ventana del texto empieza siempre en el borde derecho del logo y
     viaja con él; el texto se desliza por dentro. Nunca asoma por la izquierda. */
  .play .hero .wordmark {
    opacity: 1;
    /* La ventana llega hasta el centro del logo; de ahí al contorno real del
       dibujo tapa la silueta (.occluder), del color del fondo. */
    margin-left: calc((var(--gap) + var(--logo-w) / 2) * -1);
    padding-left: calc(var(--gap) + var(--logo-w) / 2);
    animation: word-window 1150ms var(--ease-in-out-cubic) 900ms both;
  }
  .play .hero .letters {
    display: inline-block;
    animation: word-slide 1150ms var(--ease-in-out-cubic) 900ms both;
  }
  /* Cada letra llega un poco después que la anterior, con una curva que frena largo */
  .play .hero .letters span {
    animation: letter-in 1000ms var(--ease-out-expo) both;
    animation-delay: calc(1000ms + var(--i) * 55ms);
  }

  .play .hero .tagline {
    opacity: 1;
    animation: rise 1000ms var(--ease-out-expo) 2950ms both;
  }

  .play .hero .stores {
    opacity: 1;
    animation: rise 1000ms var(--ease-out-expo) 3100ms both;
  }

  /* El móvil sube desde más abajo y tarda más: pesa más que el texto */
  .play .hero .device {
    opacity: 1;
    animation: device-in 1400ms var(--ease-out-expo) 3250ms both;
  }

  .play .site-footer {
    opacity: 1;
    animation: fade 800ms linear 3800ms both;
  }

  /* El sol bota dentro de la nube, a saltos de un píxel del dibujo */
  .play .hero .logo .sun {
    animation:
      focus 650ms linear both,
      sun-bounce 4s steps(1, end) 4200ms infinite;
  }
}

@keyframes lockup-move {
  from {
    transform: translateX(var(--from-x, 0px));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes logo-in {
  from {
    transform: translateX(var(--shift, 0px)) scale(0.82);
  }
  to {
    transform: translateX(var(--shift, 0px)) scale(1);
  }
}
@keyframes focus {
  from {
    opacity: 0;
    filter: blur(6px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes logo-slide {
  from {
    transform: translateX(var(--shift, 0px));
  }
  to {
    transform: translateX(0);
  }
}
/* El borde izquierdo de la ventana va pegado al borde derecho del logo */
@keyframes word-window {
  from {
    clip-path: inset(-25% -10% -25% var(--shift, 0px));
  }
  to {
    clip-path: inset(-25% -10% -25% 0);
  }
}
@keyframes word-slide {
  from {
    /* un pelo más atrás que el logo: así ni un píxel asoma antes de tiempo */
    transform: translateX(calc(var(--shift, 0px) * -1 - 0.15em));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes letter-in {
  from {
    opacity: 0;
    transform: translateX(-0.18em);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes device-in {
  from {
    opacity: 0;
    transform: translateY(48px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes sun-bounce {
  0% {
    transform: translateY(0);
  }
  3% {
    transform: translateY(var(--art-px)); /* coge impulso: se hunde en la nube */
  }
  6% {
    transform: translateY(calc(var(--art-px) * -1));
  }
  8.5% {
    transform: translateY(calc(var(--art-px) * -2));
  }
  11.5% {
    transform: translateY(calc(var(--art-px) * -3)); /* arriba, se queda un instante */
  }
  17% {
    transform: translateY(calc(var(--art-px) * -2));
  }
  19.5% {
    transform: translateY(calc(var(--art-px) * -1));
  }
  22% {
    transform: translateY(0);
  }
  24% {
    transform: translateY(var(--art-px)); /* aterriza y la nube lo amortigua */
  }
  27%,
  100% {
    transform: translateY(0);
  }
}

/* ─── Páginas legales ───────────────────────────────────────── */

.page-header {
  padding: 20px 16px;
  display: flex;
  justify-content: center;
  --word-size: 34px;
}

.doc {
  flex: 1;
  width: 100%;
  max-width: 68ch;
  margin: 0 auto;
  padding: 16px 16px 48px;
}
.doc h1 {
  font-weight: 900;
  font-size: clamp(32px, 6vw, 44px);
  line-height: 1.1;
  margin: 16px 0 6px;
}
.doc .updated {
  margin: 0 0 32px;
  color: var(--text-soft);
  font-size: 15px;
}
.doc h2 {
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  margin: 36px 0 8px;
}
.doc p,
.doc li {
  color: var(--text);
}
.doc ul,
.doc ol {
  padding-left: 1.25em;
}
.doc li + li {
  margin-top: 6px;
}
.doc strong {
  font-weight: 800;
}
.doc .note {
  background: var(--sky-deep);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 24px 0;
}
.doc .note p {
  margin: 0;
}