:root{
  --bg:#0b0e0d;--surface:#141a16;--line:#ffffff1a;
  --text:#f1f5ef;--muted:#b7c3b8;--accent:#b9f06b;--on-accent:#10170c;
  --gutter:20px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 'Noto Sans',Lexend}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,.eyebrow,.brand,.store,.app-id strong,.facts,.skip,figcaption{font-family:Lexend,"Noto Sans"}
h2{font-size:clamp(1.5rem,6vw,2.25rem);line-height:1.15;letter-spacing:-.025em;margin:0 0 20px;text-wrap:balance}
h3{font-size:1rem;margin:0 0 4px}
p{margin:0;color:var(--muted)}
.wrap{width:min(100% - 2*var(--gutter),1040px);margin-inline:auto}
.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--accent);color:var(--on-accent);padding:10px 14px;border-radius:8px;font-weight:700}
.skip:focus{top:12px}

/* Cabecera */
.top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:16px var(--gutter);padding-top:max(16px,env(safe-area-inset-top));border-bottom:1px solid var(--line)}
.brand{font-weight:800;letter-spacing:.04em;font-size:.9rem}
.brand span{color:var(--accent)}
.back{color:var(--muted);font-size:.85rem;padding:8px 0}

/* Portada: el arte se desvanece hacia el fondo, sin bordes visibles */
.cover{position:relative;isolation:isolate;overflow:hidden;padding-bottom:40px}
.cover-art{position:absolute;inset:0 0 auto 0;height:330px;z-index:-1}
.cover-art img{width:100%;height:100%;object-fit:cover;object-position:72% 40%}
.cover-art::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,#0b0e0d00 0%,#0b0e0d33 35%,#0b0e0dd9 72%,var(--bg) 100%),
  linear-gradient(90deg,#0b0e0db3 0%,#0b0e0d00 60%)}
.cover-body{padding-top:136px}
.app-id{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.app-id img{width:48px;height:48px;border-radius:12px;box-shadow:0 0 0 1px #ffffff26,0 8px 24px #0009}
.app-id p{display:flex;flex-direction:column;line-height:1.25;color:var(--text);text-shadow:0 1px 8px #000}
.app-id strong{font-size:1.05rem}
.app-id span{font-size:.78rem;color:var(--muted)}
h1{font-size:clamp(2.1rem,9.4vw,4rem);line-height:1.04;letter-spacing:-.045em;margin:0;text-wrap:balance;text-shadow:0 2px 18px #000c}
h1 em{font-style:normal;color:var(--accent)}
.lead{font-size:1.02rem;margin-top:16px;max-width:36rem}

.stores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px;max-width:560px}
.store{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:64px;padding:12px 14px;border-radius:12px;background:#eff5ed;color:#122018;font-weight:700;font-size:.95rem;transition:transform .15s ease,background-color .15s ease}
.store:hover{background:#fff;transform:translateY(-1px)}
.store small{display:block;font:600 .62rem/1.3 Lexend,"Noto Sans";letter-spacing:.03em;color:#46594c;margin-bottom:2px}
.store .arrow{font-size:1.1rem}
.notice{font-size:.8rem;line-height:1.5;margin-top:12px;max-width:560px}

.facts{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:20px 0 0;font-size:.68rem;font-weight:600}
.facts li{padding:5px 10px;border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:999px;color:var(--text);background:color-mix(in srgb,var(--accent) 5%,transparent)}

/* Cómo funciona */
.how,.shots,.features{padding:48px 0;border-top:1px solid var(--line)}
.voice{display:flex;align-items:center;gap:14px;margin:0 0 28px;padding:16px 18px;border-radius:16px;background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}
.voice p{color:var(--text);font-size:1.02rem;font-style:italic}
.story-context{font-size:.93rem;margin-bottom:28px}
.story .voice{margin-bottom:16px;border-left:3px solid var(--accent)}
.mic{flex:none;position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.mic::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 33%,transparent);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{from{transform:scale(.9);opacity:1}to{transform:scale(1.35);opacity:0}}
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:12px}
.steps li{counter-increment:s;position:relative;padding:0 0 0 48px;min-height:36px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent);font:700 .9rem Lexend,"Noto Sans"}
.steps p{font-size:.93rem}

/* Capturas */
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gutter) 12px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail figure{flex:0 0 68%;max-width:260px;margin:0;scroll-snap-align:start}
.rail img{border-radius:24px;border:1px solid #ffffff26;box-shadow:0 18px 40px #0008;background:var(--surface)}
.rail figcaption{font-size:.8rem;font-weight:500;color:var(--text);margin-top:12px}
.source{font-size:.75rem;margin-top:10px}

/* Funciones */
.grid{list-style:none;padding:0;margin:0;display:grid;gap:0}
.grid li{padding:16px 0 16px 18px;border-bottom:1px solid var(--line);position:relative}
.grid li::before{content:"";position:absolute;left:0;top:23px;width:6px;height:6px;border-radius:2px;background:var(--accent)}
.grid p{font-size:.93rem}

/* Privacidad */
.privacy{padding:8px 0 48px}
.card{padding:26px 22px;border-radius:20px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 9%,#111613),#111613);border:1px solid color-mix(in srgb,var(--accent) 15%,transparent)}
.card h2{font-size:clamp(1.3rem,5vw,1.75rem)}
.card ul{margin:0 0 18px;padding-left:18px;color:var(--muted);display:grid;gap:8px;font-size:.93rem}
.card li::marker{color:var(--accent)}
.more{color:var(--accent);font:600 .9rem Lexend,"Noto Sans";text-decoration:underline;text-underline-offset:4px}
.card p+p{margin-top:18px}
.faq{padding:48px 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:0}
.faq summary{cursor:pointer;padding:20px 24px 20px 0;font:500 1rem/1.5 Lexend,"Noto Sans";color:var(--text)}
.faq details[open] summary{color:var(--accent)}
.faq details p{max-width:48rem;padding:0 0 22px;font-size:.95rem}
.closing{padding:16px 0 56px}
.closing h2{max-width:32rem}


.foot{border-top:1px solid var(--line);padding:24px 0 calc(32px + env(safe-area-inset-bottom))}
.foot .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot nav a{color:var(--accent);font-size:.88rem;padding:6px 0}
.foot p{font-size:.8rem}

@media (max-width:374px){
  :root{--gutter:16px}
  .store{padding:10px 12px;font-size:.9rem;line-height:1.25}
  .store .arrow{display:none}
}

@media (min-width:600px){
  .cover-art{height:400px}
  .cover-body{padding-top:200px}
  .rail figure{flex-basis:240px}
  .grid{grid-template-columns:1fr 1fr;column-gap:32px}
}

/* Escritorio: texto a la izquierda, arte a la derecha a toda altura */
@media (min-width:900px){
  :root{--gutter:40px}
  .cover{min-height:min(640px,82vh);display:flex;align-items:center;padding:64px 0}
  /* Sin recorte ni ampliación: el arte se muestra a su proporción y como máximo a la mitad de sus píxeles (nítido en pantallas 2x) */
  .cover-art{inset:50% 0 auto auto;transform:translateY(-50%);width:min(64%,897px);height:auto;aspect-ratio:1794/876}
  .cover-art::after{background:
    linear-gradient(90deg,var(--bg) 0%,#0b0e0dcc 22%,#0b0e0d00 60%),
    linear-gradient(180deg,var(--bg) 0%,#0b0e0d00 22%,#0b0e0d00 78%,var(--bg) 100%)}
  .cover-body{padding-top:0}
  .cover-body>*{max-width:600px}
  .how .wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px 56px;align-items:start}
  .how .story{grid-column:1}
  .how .steps{grid-column:2;gap:28px}
  .story-context{margin-bottom:0}
  .rail{justify-content:center;overflow:visible;padding-inline:40px}
  .rail figure{flex:0 1 260px}
  .card{padding:40px 48px}
}

@media (prefers-reduced-motion:reduce){
  .mic::after{animation:none}
  .store{transition:none}
  .store:hover{transform:none}
}

.contact-store{grid-column:1/-1;justify-content:center;max-width:280px}.foot p{color:var(--muted)}

/* Selector de idioma junto al regreso al catálogo. */
.top-end{display:flex;align-items:center;gap:14px}
@media (max-width:420px){.top-end{gap:10px}.top-end .lang-switch svg{display:none}}
/* Barra superior fija: «Todas las apps» y el idioma quedan a mano durante el desplazamiento. */
html{scroll-padding-top:84px}
.top{position:sticky;top:0;z-index:5;background:#0b0e0df2;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}