/* Sensa OTA landings — light default, dark via prefers-color-scheme */
@font-face{font-family:'Gelion';src:url('fonts/Gelion-Light.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:'Gelion';src:url('fonts/Gelion-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Gelion';src:url('fonts/Gelion-Bold.otf') format('opentype');font-weight:700;font-display:swap}

:root{
  color-scheme:light dark;
  --negro:#f5f4f1;
  --panel:#ffffff;
  --hundido:#ebe9e4;
  --borde:#e0ddd6;
  --tinta:#141517;
  --apagado:#6b6f78;
  --sutil:#9a9ea6;
  --naranja:#ff6e4e;
  --radio:14px;
  --pila:'Gelion',-apple-system,BlinkMacSystemFont,'Helvetica Neue',system-ui,sans-serif;
  --marca-ink:#0e0f11;
}

@media (prefers-color-scheme:dark){
  :root{
    --negro:#0e0f11;
    --panel:#141517;
    --hundido:#0a0b0c;
    --borde:#23252a;
    --tinta:#f2f2f4;
    --apagado:#8b8f98;
    --sutil:#5f636b;
    --naranja:#ff6e4e;
    --marca-ink:#0e0f11;
  }
}

*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  margin:0;background:var(--negro);color:var(--tinta);font-family:var(--pila);font-weight:300;
  -webkit-font-smoothing:antialiased;line-height:1.55;
  min-height:100vh;
}
.envoltorio{max-width:60rem;margin:0 auto;padding:clamp(1.5rem,5vw,4rem) clamp(1.1rem,4vw,2rem) 4rem}

/* Gallery header */
header.galeria,header{display:flex;align-items:center;gap:.75rem;margin-bottom:2.5rem}
.marca{width:34px;height:34px;border-radius:9px;background:var(--naranja);color:var(--marca-ink);
       display:grid;place-items:center;font-weight:700;font-size:1.15rem;flex:0 0 auto;text-decoration:none}
h1{font-size:clamp(1.35rem,4vw,1.7rem);font-weight:500;margin:0;letter-spacing:-.01em}
h1 span{color:var(--apagado);font-weight:300}

.aviso{border:1px solid var(--borde);border-left:3px solid var(--naranja);border-radius:var(--radio);
       background:var(--hundido);padding:.9rem 1.1rem;margin-bottom:2.5rem;font-size:.9rem;color:var(--apagado)}
.aviso b{color:var(--tinta);font-weight:500}
.aviso code{font-size:.85em}

h2{font-size:.75rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
   color:var(--apagado);margin:2.5rem 0 .9rem}
h2:first-of-type{margin-top:0}

.rejilla{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}

.app{border:1px solid var(--borde);border-radius:var(--radio);background:var(--panel);
     padding:1.05rem 1.15rem;display:flex;flex-direction:column;gap:.55rem;
     transition:border-color .18s ease,transform .18s ease}
.app:hover{border-color:var(--sutil);transform:translateY(-1px)}
.app.espera{background:var(--hundido);border-style:dashed}
.nombre{font-weight:500;font-size:1.05rem;letter-spacing:-.01em}
.meta{font-size:.78rem;color:var(--apagado);font-variant-numeric:tabular-nums}
.meta i{font-style:normal;color:var(--sutil);padding:0 .35rem}
.fecha{font-size:.72rem;color:var(--sutil);letter-spacing:.03em;font-variant-numeric:tabular-nums}
.fecha b{color:var(--apagado);font-weight:500}

.instalar,.btn{margin-top:.35rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
          background:var(--naranja);color:var(--marca-ink);font-family:var(--pila);font-weight:700;
          font-size:.88rem;text-decoration:none;padding:.62rem 1rem;border-radius:10px;
          transition:filter .18s ease;border:none;cursor:pointer}
.instalar:hover,.btn:hover{filter:brightness(1.08)}
a.btn{display:block;width:100%;padding:1rem;border-radius:12px;font-size:.95rem;margin:1.25rem 0}
.pendiente{margin-top:.35rem;display:inline-flex;align-items:center;gap:.45rem;
           font-size:.82rem;color:var(--apagado);padding:.62rem 0}
.punto{width:7px;height:7px;border-radius:50%;background:var(--sutil);flex:0 0 auto}

footer{margin-top:3.5rem;padding-top:1.4rem;border-top:1px solid var(--borde);
       font-size:.78rem;color:var(--sutil);display:flex;flex-wrap:wrap;gap:.5rem 1.4rem}
footer a{color:var(--apagado);text-decoration:none;border-bottom:1px solid var(--borde)}
footer a:hover{color:var(--tinta)}

/* Install card (centered product pages) */
body.install{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1.5rem,5vw,3rem) clamp(1rem,4vw,1.5rem);
}
.tarjeta{
  width:min(26rem,100%);text-align:center;
  border:1px solid var(--borde);border-radius:18px;background:var(--panel);
  padding:2rem 1.5rem 1.75rem;
}
.tarjeta .marca{margin:0 auto 1.1rem}
.tarjeta h1{font-size:1.45rem;margin:0 0 .35rem}
.tarjeta .subtitulo{color:var(--apagado);font-size:.9rem;margin:0 0 .25rem;font-weight:300}
.tarjeta .ver{color:var(--apagado);font-size:.85rem;margin:.35rem 0;font-variant-numeric:tabular-nums}
.tarjeta .hint,.tarjeta small{
  display:block;margin-top:1.25rem;font-size:.78rem;color:var(--apagado);line-height:1.55
}
.tarjeta .hint b,.tarjeta small b{color:var(--tinta);font-weight:500}

/* Redirect splash */
body.redirect{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1.5rem,5vw,3rem) clamp(1rem,4vw,1.5rem);text-align:center;min-height:100vh
}
.redirect-caja{max-width:26rem}
.redirect-caja p{margin:0;font-size:1.05rem}
.redirect-caja a{
  display:inline-flex;margin-top:1.25rem;padding:.7rem 1.4rem;
  border:1px solid var(--borde);border-radius:12px;text-decoration:none;
  color:var(--tinta);font-weight:500;background:var(--panel)
}
.redirect-caja a:hover{border-color:var(--naranja)}

@media (max-width:30rem){
  .rejilla{grid-template-columns:1fr}
  header{margin-bottom:1.8rem}
}