/* ════════════════════════════════════════════════════════════════════════════
   app.tupido.es — página de descarga de las apps.
   Copiado del bloque <helmet> del diseño (design-system/download-page/). Es el
   único CSS global: variables, keyframes, reset y foco. Todo lo demás va en
   línea en el HTML, tal y como lo entregó el diseño, para no re-derivar valores.
   Los tokens son LOS MISMOS que la web de marketing: si cambian allí, cambian aquí.
   ════════════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{
  --bg:#ffffff; --surf:#ffffff; --surf2:#f6f5f2; --ink:#101013; --mut:#5f5e66;
  --line:#e8e6e1; --line2:#d7d4cd;
  --blue:#0698dd; --blue2:#047ab8; --orange:#f4581c; --orange2:#d34410; --on-acc:#ffffff;
  --blue-soft:#e3f4fd; --orange-soft:#fdeadd; --ok:#1c7a4c; --err:#b3261e;
  --grad:linear-gradient(120deg,#e9d6ff 0%,#fbd3e2 40%,#ffe9c6 100%);
  --shadow:0 1px 2px rgba(16,16,19,.05),0 10px 30px rgba(16,16,19,.08);
  --lift:0 24px 60px rgba(16,16,19,.16);
  --pillbg:rgba(255,255,255,.9); --glow:transparent; --show-light:block; --show-dark:none;
  --spring:cubic-bezier(.34,1.7,.5,1); --soft:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b0b0f; --surf:#14141a; --surf2:#1b1b22; --ink:#f2f1ee; --mut:#a2a1ac;
    --line:#242430; --line2:#34343f;
    --blue:#3db9f5; --blue2:#7cd0fa; --orange:#ff7a45; --orange2:#ffa07e; --on-acc:#0b0b0f;
    --blue-soft:#0d2a3c; --orange-soft:#361a0d; --ok:#54c790; --err:#ff8a80;
    --grad:linear-gradient(120deg,#2a1950 0%,#3d1030 45%,#0c2c4b 100%);
    --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 34px rgba(0,0,0,.45);
    --lift:0 26px 70px rgba(0,0,0,.6);
    --pillbg:rgba(20,20,26,.85); --show-light:none; --show-dark:block;
    --glow:radial-gradient(closest-side,rgba(61,185,245,.32),transparent);
  }
}
:root[data-theme="dark"]{
  --bg:#0b0b0f; --surf:#14141a; --surf2:#1b1b22; --ink:#f2f1ee; --mut:#a2a1ac;
  --line:#242430; --line2:#34343f;
  --blue:#3db9f5; --blue2:#7cd0fa; --orange:#ff7a45; --orange2:#ffa07e; --on-acc:#0b0b0f;
  --blue-soft:#0d2a3c; --orange-soft:#361a0d; --ok:#54c790; --err:#ff8a80;
  --grad:linear-gradient(120deg,#2a1950 0%,#3d1030 45%,#0c2c4b 100%);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 34px rgba(0,0,0,.45);
  --lift:0 26px 70px rgba(0,0,0,.6);
  --pillbg:rgba(20,20,26,.85); --show-light:none; --show-dark:block;
  --glow:radial-gradient(closest-side,rgba(61,185,245,.32),transparent);
}
body{background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans',"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue2);text-decoration:underline}
h1,h2{background:linear-gradient(180deg,var(--ink) 45%,color-mix(in srgb,var(--ink) 52%,transparent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:8px}
input,textarea,button,select{font:inherit;color:inherit}
summary::-webkit-details-marker{display:none}
details summary span:last-child{transition:transform .35s cubic-bezier(.16,1,.3,1)}
details[open] summary span:last-child{transform:rotate(135deg)}

/* Estados que en el prototipo iban como style-hover / style-active. */
.dl-btn{transition:transform .3s var(--spring),box-shadow .3s}
.dl-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:var(--lift);color:#fff;text-decoration:none}
.dl-btn:active{transform:scale(.97)}
.hdr-btn{transition:border-color .25s,transform .3s var(--spring)}
.hdr-btn:hover{border-color:var(--blue)}
.hdr-ico:hover{transform:scale(1.06)}
.lang-item{transition:background .2s}
.lang-item:hover{background:var(--surf2)}
.card{transition:transform .5s var(--soft),box-shadow .4s,border-color .4s}
.card:hover{transform:translateY(-4px);box-shadow:var(--lift)}

@keyframes rise{from{opacity:0;transform:translateY(38px)}60%{opacity:1}80%{transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes popIn{0%{opacity:0;transform:scale(.72)}55%{opacity:1;transform:scale(1.08)}78%{transform:scale(.98)}100%{opacity:1;transform:scale(1)}}
@keyframes logoEnter{0%{opacity:0;transform:scale(.4) rotate(-14deg);filter:blur(8px)}60%{opacity:1;transform:scale(1.06) rotate(2deg);filter:blur(0)}80%{transform:scale(.98)}100%{opacity:1;transform:scale(1) rotate(0);filter:blur(0)}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes glowPulse{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes shine{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
@keyframes drift{0%,100%{transform:translate(-50%,0) scale(1)}50%{transform:translate(-50%,26px) scale(1.08)}}
@keyframes arrowBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes chipIn{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
@keyframes sheen{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}