/* Sensa · instalación OTA — mismo lenguaje que los headings de sensa.co/apps:
   titular grande en minúscula, filetes que enmarcan el texto, acción tipográfica a la derecha,
   el icono girado como la tarjeta del nav (se endereza al pasar). Claro por defecto, oscuro con el sistema.
   El color solo en el botón de instalar, con el acento de cada app (--acento). */
@font-face{font-family:'Gelion';src:url('fonts/gelion-thin.woff2') format('woff2');font-weight:200;font-display:swap}
@font-face{font-family:'Gelion';src:url('fonts/gelion-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Gelion';src:url('fonts/gelion-medium.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  color-scheme:light dark;
  --fondo:#FCFBF7; --tinta:0 0 0;
  --filete:rgb(0 0 0 / .16); --canto:rgb(0 0 0 / .2);
  --acento:#000; --acento-tinta:#FCFBF7;
  --grano:.05;
  --pila:'Gelion',-apple-system,BlinkMacSystemFont,'Helvetica Neue',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --fondo:#000; --tinta:255 255 255; --filete:rgb(255 255 255 / .24); --canto:rgb(255 255 255 / .2);
         --acento:#fff; --acento-tinta:#000; --grano:.12 }
}
*{box-sizing:border-box}
html{background:var(--fondo)}
body{margin:0;color:rgb(var(--tinta));font:400 16px/1.5 var(--pila);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;min-height:100svh}
/* grano de película, como el fondo de sensa.co */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:var(--grano);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){body::before{mix-blend-mode:screen}}
main,.pie{position:relative;z-index:1}
a{color:inherit}

.titular{font-weight:500;font-size:72px;line-height:.84;letter-spacing:-.06em;margin:0;padding-bottom:16px;text-transform:lowercase}
.texto{font-weight:200;font-size:22px;line-height:1.5;letter-spacing:-.01em;opacity:.6;margin:0}
.filete{height:.5px;background:var(--filete);margin:12px 0}
.nobr{white-space:nowrap}

.icono{display:block;flex:none}
.icono img{display:block;width:100%;height:100%;border-radius:22.4%;box-shadow:0 0 0 .5px var(--canto)}
.icono.vacio{border-radius:22.4%;box-shadow:inset 0 0 0 .5px var(--filete)}

/* Instalar: solo el icono, en el acento de la app */
.instalar{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;
  background:var(--acento);color:var(--acento-tinta);text-decoration:none;transition:transform .3s ease,opacity .2s ease}
.instalar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.instalar:active{transform:scale(.94)}
.instalar:focus-visible,.app:focus-visible{outline:1.5px solid var(--acento);outline-offset:4px}

/* Página de una app */
.ficha{max-width:520px;margin:0 auto;padding:max(72px,14vh) 24px 64px}
.ficha .giro{display:inline-block;width:112px;height:112px;margin:0 0 40px 8px;transform:rotate(-6deg);transition:transform 1s ease}
.ficha .giro:hover,.ficha .giro:active{transform:rotate(0)}
.ficha .giro .icono{width:100%;height:100%}
.ficha .accion{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px}
.ficha .accion .texto{font-size:22px;line-height:1.3}
.ficha .nota{font-weight:200;font-size:15px;line-height:1.5;opacity:.6;margin:0}
.ficha .volver{display:inline-block;margin-top:48px;font-size:15px;font-weight:400;opacity:.6;text-decoration:none}
.ficha .volver:hover{opacity:1}

/* Índice */
.indice{max-width:640px;margin:0 auto;padding:max(72px,12vh) 24px 32px}
.indice .cabeza{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.indice .pila-iconos{position:relative;width:132px;height:64px;flex:none;margin-bottom:18px}
.indice .pila-iconos .icono{position:absolute;width:56px;height:56px;transition:transform 1s ease}
.indice .pila-iconos .icono:nth-child(1){right:76px;bottom:0;transform:rotate(-8deg)}
.indice .pila-iconos .icono:nth-child(2){right:38px;bottom:4px;transform:rotate(3deg)}
.indice .pila-iconos .icono:nth-child(3){right:0;bottom:0;transform:rotate(-4deg)}
.indice .cabeza:hover .pila-iconos .icono{transform:rotate(0)}
.indice h2{font-weight:400;font-size:15px;opacity:.6;margin:48px 0 0}
.lista{margin-top:-12px}  /* el segundo filete del encabezado hace de primera raya */
.indice h2 + .indice h2 + .lista{margin-top:12px}
.app{display:grid;grid-template-columns:48px minmax(0,1fr) auto;column-gap:16px;align-items:center;
  padding:14px 0;border-bottom:.5px solid var(--filete);text-decoration:none;color:inherit}
.app .icono{grid-row:1 / span 2;width:48px;height:48px;transition:transform .6s ease}
.app:hover .icono{transform:rotate(-6deg)}
.app .nombre{font-weight:500;font-size:20px;line-height:1.2;letter-spacing:-.02em;align-self:end}
.app .meta{display:none}
.app .fecha{font-weight:200;font-size:15px;opacity:.6;align-self:start;font-variant-numeric:tabular-nums}
.app .fecha b{font-weight:200}
.app .instalar{grid-column:3;grid-row:1 / span 2}
.app.espera .instalar{background:none;color:rgb(var(--tinta));box-shadow:inset 0 0 0 .5px var(--filete);opacity:.6}
.pie{max-width:640px;margin:0 auto;padding:16px 24px 64px;font-size:15px;font-weight:200}
.pie span,.pie a{opacity:.6}
@media (min-width:720px){ .titular{font-size:88px} }
@media (prefers-reduced-motion:reduce){*{transition:none!important}}