:root {
    --bosque:#1a1814; --musgo:#2a251f; --musgo-2:#3a332a; --lima:#b3ba7c; --hueso:#efe8da; --arena:#c4a574; --glaciar:#8e9b93; --atardecer:#8a5a3b;
    --text-soft:rgba(237,232,220,.7); --text-mute:rgba(237,232,220,.45); --line:rgba(237,232,220,.14);
    --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:var(--bosque); color:var(--hueso); font-family:"Inter Tight", system-ui, sans-serif; line-height:1.5; }
  body::after { content:""; position:fixed; inset:0; background-image:var(--noise); opacity:.07; mix-blend-mode:overlay; pointer-events:none; z-index:100; }
  .wrap { width:min(1180px, 100% - 40px); margin:0 auto; }
  .mono { font-family:"JetBrains Mono", monospace; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-mute); }
  .serif { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; }
  h1, h2, h3 { font-weight:600; letter-spacing:-.035em; line-height:.98; }
  h2 { font-size:clamp(40px, 5vw, 64px); margin:12px 0 14px; }
  h2 .serif { color:var(--lima); letter-spacing:-.01em; }
  .lede { color:var(--text-soft); font-size:18px; max-width:640px; }
  section { padding:90px 0; border-top:1px solid var(--line); position:relative; }
  .grid { display:grid; gap:18px; }

  /* glass material */
  .glass { position:relative; background:rgba(26,24,20,.38); backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%); border:1px solid rgba(237,232,220,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 20px 40px -24px rgba(0,0,0,.6); border-radius:22px; overflow:hidden; }
  .glass::before { content:""; position:absolute; inset:0; background-image:var(--noise); opacity:.18; mix-blend-mode:overlay; pointer-events:none; }
  .glass > * { position:relative; }
  .glass.light { background:rgba(237,232,220,.14); }

  /* cover */
  .cover { min-height:100vh; position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:40px 0; background:linear-gradient(180deg, rgba(26,24,20,.15), rgba(26,24,20,.9)), url(img/fitzroy.jpg) center 30%/cover; }
  .cover .top, .cover .bottom { display:flex; justify-content:space-between; align-items:center; }
  .cross { width:18px; height:18px; position:relative; opacity:.6; }
  .cross::before, .cross::after { content:""; position:absolute; background:var(--hueso); }
  .cross::before { left:8.5px; top:0; width:1px; height:18px; } .cross::after { top:8.5px; left:0; height:1px; width:18px; }
  .cover h1 { font-size:clamp(64px, 11vw, 150px); }
  .cover h1 .serif { color:var(--lima); }
  .cover .logo { width:150px; opacity:.95; }

  /* logo */
  .logos { grid-template-columns:1.2fr 1fr 1fr; margin-top:34px; }
  .tile { border-radius:22px; display:grid; place-items:center; aspect-ratio:1; position:relative; overflow:hidden; border:1px solid var(--line); }
  .tile .cap { position:absolute; left:16px; bottom:14px; }
  .tile img { width:62%; }
  .appicon { width:46%; aspect-ratio:1; border-radius:24%; background:radial-gradient(120% 120% at 30% 20%, #4a4035, #1a1814); display:grid; place-items:center; position:relative; overflow:hidden; box-shadow:0 30px 50px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.15); }
  .appicon::after { content:""; position:absolute; inset:0; background-image:var(--noise); opacity:.25; mix-blend-mode:overlay; }
  .appicon img { width:62%; }
  .appicon i { position:absolute; right:18%; top:18%; width:9%; aspect-ratio:1; border-radius:50%; background:var(--lima); box-shadow:0 0 14px var(--lima); }

  /* color */
  .colors { grid-template-columns:repeat(7, 1fr); margin-top:34px; }
  .sw { border-radius:18px; overflow:hidden; border:1px solid var(--line); }
  .sw i { display:block; height:150px; }
  .sw div { padding:12px 14px 14px; background:var(--musgo); }
  .sw b { display:block; font-size:16px; font-weight:600; }
  .sw span { font-family:"JetBrains Mono"; font-size:11px; color:var(--text-mute); }
  .sw p { font-size:12.5px; color:var(--text-soft); margin-top:6px; line-height:1.35; }
  .ratio { display:flex; height:16px; border-radius:100px; overflow:hidden; margin-top:22px; }

  /* type */
  .type { grid-template-columns:1.3fr 1fr; margin-top:34px; }
  .card { background:var(--musgo); border:1px solid var(--line); border-radius:22px; padding:28px; }
  .specimen { font-size:96px; font-weight:600; letter-spacing:-.05em; line-height:.9; }
  .scale div { display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:12px 0; border-top:1px solid var(--line); }
  .scale div span:first-child { color:var(--text-mute); font-family:"JetBrains Mono"; font-size:11px; letter-spacing:.12em; white-space:nowrap; }

  /* material demo */
  .material { margin-top:34px; border-radius:28px; overflow:hidden; position:relative; height:520px; background:url(img/caminante-laguna.jpg) center 60%/cover; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; padding:40px; align-items:center; }
  .material .glass { padding:22px; height:240px; display:flex; flex-direction:column; justify-content:space-between; }
  .material .glass h3 { font-size:26px; }
  .spec { grid-template-columns:repeat(4, 1fr); margin-top:18px; }
  .spec .card { padding:20px; }
  .spec b { font-family:"JetBrains Mono"; font-size:13px; color:var(--lima); font-weight:500; display:block; margin-top:6px; }

  /* line language */
  .lines { margin-top:34px; border-radius:28px; overflow:hidden; position:relative; height:620px; background:linear-gradient(180deg, rgba(26,24,20,.25), rgba(26,24,20,.55)), url(img/mapa-aereo.jpg) center/cover; }
  .lines > svg { position:absolute; inset:0; width:100%; height:100%; }
  .lines .lbl { font-family:"JetBrains Mono"; font-size:12px; letter-spacing:.14em; fill:var(--hueso); }
  .lines .legend { position:absolute; right:28px; bottom:28px; width:300px; padding:18px; }

  /* components */
  .comps { grid-template-columns:1fr 1fr; margin-top:34px; }
  .stage { border-radius:26px; padding:28px; background:linear-gradient(180deg, rgba(26,24,20,.35), rgba(26,24,20,.7)), url(img/bosque-lenga.jpg) center/cover; display:flex; flex-direction:column; gap:16px; }
  .stage.b2 { background:linear-gradient(180deg, rgba(26,24,20,.35), rgba(26,24,20,.75)), url(img/cresta-viento.jpg) center/cover; }
  .row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .btn { font-family:inherit; font-size:15px; font-weight:600; border-radius:100px; padding:14px 22px; border:0; display:inline-flex; align-items:center; gap:10px; }
  .btn.primary { background:var(--lima); color:#1e2010; }
  .btn.glass-b { background:rgba(237,232,220,.12); color:var(--hueso); border:1px solid rgba(237,232,220,.22); backdrop-filter:blur(16px); }
  .btn.sos { background:var(--atardecer); color:#fff4ec; }
  .chip { font-size:13.5px; padding:9px 15px; border-radius:100px; border:1px solid rgba(237,232,220,.22); background:rgba(26,24,20,.3); backdrop-filter:blur(14px); }
  .chip.on { background:var(--hueso); color:#1a1814; border-color:var(--hueso); font-weight:600; }
  .stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
  .stat { padding:14px 16px; }
  .stat .v { font-size:28px; font-weight:600; letter-spacing:-.03em; }
  .stat .v small { font-size:14px; color:var(--text-soft); font-weight:500; margin-left:2px; }
  .status { padding:14px 16px; display:flex; gap:12px; align-items:center; font-size:14px; }
  .dot { width:10px; height:10px; border-radius:50%; flex:none; }
  .weather { padding:18px; }
  .bars { display:grid; grid-template-columns:repeat(12, 1fr); gap:5px; align-items:end; height:86px; margin-top:12px; position:relative; }
  .bars i { display:block; border-radius:6px; }
  .bars .win { position:absolute; top:-6px; bottom:-22px; border:1.5px solid var(--lima); border-radius:10px; }
  .hours { display:grid; grid-template-columns:repeat(12, 1fr); gap:5px; margin-top:8px; font-family:"JetBrains Mono"; font-size:9.5px; color:var(--text-mute); text-align:center; }
  .safe { padding:18px; display:grid; gap:12px; }
  .safe .top { display:flex; justify-content:space-between; align-items:center; }
  .pill-lima { background:rgba(179,186,124,.16); color:var(--lima); font-size:12px; font-weight:600; padding:5px 10px; border-radius:100px; }
  .nav { padding:10px; display:flex; justify-content:space-between; align-items:center; border-radius:100px; }
  .nav span { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:var(--text-soft); }
  .nav span.walk { width:62px; height:62px; background:var(--lima); color:#1e2010; }

  /* stamps */
  .stamps { grid-template-columns:repeat(3, 1fr); margin-top:34px; }
  .stamp { padding:7px; background:radial-gradient(circle, transparent 5px, var(--hueso) 5.6px) -6px -6px / 12px 12px; filter:drop-shadow(0 18px 24px rgba(0,0,0,.45)); }
  .stamp .in { position:relative; aspect-ratio:4/5; background-size:cover; background-position:center; padding:16px; display:flex; flex-direction:column; justify-content:space-between; color:#fff; }
  .stamp .in::after { content:""; position:absolute; inset:0; background-image:var(--noise); opacity:.28; mix-blend-mode:overlay; }
  .stamp .in > * { position:relative; z-index:1; }
  .stamp h4 { font-size:34px; font-weight:600; letter-spacing:-.04em; line-height:.92; }
  .stamp .mono { color:rgba(255,255,255,.85); font-size:10px; }

  /* imagery */
  .imgs { grid-template-columns:repeat(3, 1fr); margin-top:34px; }
  .imgs figure { border-radius:20px; overflow:hidden; position:relative; aspect-ratio:3/4; }
  .imgs img { width:100%; height:100%; object-fit:cover; display:block; }
  .imgs figcaption { position:absolute; left:12px; bottom:12px; }
  .rules { grid-template-columns:1fr 1fr; margin-top:18px; }
  .rules li { margin-left:18px; color:var(--text-soft); font-size:15px; padding:3px 0; }

  /* phones */
  .phones { display:flex; gap:50px; justify-content:center; margin-top:44px; flex-wrap:wrap; }
  .phone { width:390px; height:844px; border-radius:56px; padding:12px; background:#0d0c0a; box-shadow:0 60px 100px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
  .screen { width:100%; height:100%; border-radius:44px; overflow:hidden; position:relative; background-size:cover; background-position:center; }
  .screen::after { content:""; position:absolute; inset:0; background-image:var(--noise); opacity:.12; mix-blend-mode:overlay; pointer-events:none; }
  .sbar { position:absolute; top:0; left:0; right:0; height:50px; display:flex; justify-content:space-between; align-items:center; padding:0 30px; font-size:15px; font-weight:600; z-index:3; }
  .island { position:absolute; top:11px; left:50%; width:120px; height:34px; margin-left:-60px; background:#000; border-radius:20px; z-index:4; }
  .s-in { position:absolute; inset:0; padding:64px 20px 26px; display:flex; flex-direction:column; z-index:2; }
  .label { font-family:"JetBrains Mono"; font-size:9.5px; letter-spacing:.14em; fill:var(--hueso); }
  footer { padding:50px 0 70px; color:var(--text-mute); font-size:13px; border-top:1px solid var(--line); }
  @media (max-width:900px) { .logos, .colors, .type, .spec, .comps, .stamps, .imgs, .rules { grid-template-columns:1fr 1fr; } .material { grid-template-columns:1fr; height:auto; } }