:root{color-scheme:dark;--ink:#091d20;--cream:#f7ebd2;--gold:#eabb68;--muted:#afc0ba}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:radial-gradient(ellipse 90% 800px at top left,#164b47,transparent 80%),var(--ink);color:var(--cream);font:17px/1.65 system-ui,sans-serif;min-height:100vh}
main,header,footer{max-width:1080px;margin:auto;padding:28px}
header{display:flex;align-items:center;gap:20px}
header>a{font-size:28px;font-weight:850;letter-spacing:-1.2px;color:var(--cream);text-decoration:none}
nav{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:14px}
nav a{text-decoration:none;color:var(--cream)}
h1{font-size:clamp(42px,7vw,80px);line-height:1.04;letter-spacing:-3px;margin:16px 0 24px;max-width:650px}
h2{font-size:clamp(27px,4vw,36px);line-height:1.2;letter-spacing:-.8px;margin:0 0 22px}
p,li{color:var(--muted)}
p{max-width:740px}
a{color:var(--gold);text-underline-offset:4px}
a:hover{color:var(--cream)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.eyebrow{font:700 12px/1.7 ui-monospace,monospace;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.hero{display:grid;grid-template-columns:1fr 280px;gap:60px;align-items:center;padding:60px 0 80px}
.hero img{width:100%;height:auto;border-radius:24%;box-shadow:0 30px 70px #0004}
.hero p{max-width:510px;font-size:19px}
.button{display:inline-block;background:var(--gold);color:var(--ink);font-weight:750;padding:14px 22px;border-radius:16px;text-decoration:none}
.button:hover{background:var(--cream);color:var(--ink)}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin-top:30px}
.section{padding:36px 0 50px}
.availability{max-width:720px;font-size:14px;color:var(--muted);margin:0 0 44px}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:36px}
figure{margin:0;min-width:0}
figure img{display:block;width:100%;height:auto;border-radius:22px}
figcaption{padding:20px 0;color:var(--muted);font-size:15px}
figcaption strong{display:block;color:var(--cream);font-size:19px;margin-bottom:6px}
details{padding:16px 0}
summary{cursor:pointer;font-weight:700;font-size:18px}
details p{margin-left:20px}
.contact{margin-top:36px}
footer{display:flex;flex-wrap:wrap;gap:12px 26px;font-size:13px;color:var(--muted);padding-top:36px;padding-bottom:44px}
article{max-width:760px;margin:30px 0 60px}
article h1{font-size:clamp(42px,7vw,70px);margin-bottom:38px}
article h2{font-size:26px;margin-top:42px;margin-bottom:16px}
.lang{min-height:44px;padding:8px 0;background:none;color:var(--gold);border:0;cursor:pointer;font:inherit}
.skip{position:fixed;left:16px;top:-100px;background:var(--cream);color:var(--ink);padding:10px 16px;z-index:10}
.skip:focus{top:16px}
body[data-lang=en] [lang=es],body[data-lang=es] [lang=en]{display:none}
@media(max-width:700px){main,header,footer{padding:22px}.hero{grid-template-columns:1fr;padding:28px 0 48px;gap:30px}.hero img{width:150px;grid-row:1}nav{gap:16px}h1{letter-spacing:-1.8px}.section{padding:30px 0}.gallery{gap:20px;grid-template-columns:1fr;max-width:360px;margin:30px auto 0}.gallery figure{margin-bottom:12px}figure img{max-width:300px;margin:auto}figcaption{max-width:300px;margin:auto}article{margin-top:20px}.availability{margin-bottom:18px}.contact a{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.recommendations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:38px 0 30px}.recommendation{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--cream);padding:12px 0}.recommendation img{border-radius:22%;margin-bottom:8px}.recommendation strong{font-size:22px;line-height:1.3}.recommendation>span:not(.recommendation-arrow){font-size:15px;color:var(--muted)}.recommendation-arrow{color:var(--gold);font-size:22px}.recommendation:hover strong{text-decoration:underline;text-underline-offset:5px}@media(max-width:700px){.recommendations{grid-template-columns:1fr;gap:26px}.recommendation{max-width:360px}}


/* Framed app lists and static dithering, 2026-10-11.
   The grain sits behind content; screenshots, icons and text stay untouched. */
body { position:relative; isolation:isolate; }
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23808080' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:180px 180px;
  mix-blend-mode:soft-light;
  opacity:.065;
}
.app-card,.recommendation {
  --tile-accent:var(--card-accent,var(--gold,var(--accent)));
  position:relative;
  min-width:0;
  padding:24px;
  border:1px solid color-mix(in srgb,var(--tile-accent) 24%,transparent);
  border-radius:18px;
  background:color-mix(in srgb,var(--tile-accent) 3%,transparent);
  transition:border-color .2s,background-color .2s,transform .2s;
}
/* The old light extended outside each card and exposed a rectangular edge. */
.app-card::before { content:none; display:none; }
.app-card:hover,.recommendation:hover {
  border:1px solid color-mix(in srgb,var(--tile-accent) 48%,transparent);
  background:color-mix(in srgb,var(--tile-accent) 6%,transparent);
}
.recommendation-arrow { margin-top:auto; }
@media(max-width:740px) {
  .app-card,.recommendation { padding:22px; border-radius:16px; }
}
@media(prefers-reduced-motion:reduce) {
  .app-card,.recommendation { transition:none; }
  .app-card:hover,.recommendation:hover { transform:none; }
}
@media(forced-colors:active) {
  body::before { display:none; }
  .app-card,.recommendation { background:Canvas; border-color:ButtonText; }
  .app-card:hover,.recommendation:hover { border-color:Highlight; }
}