:root{
    --bg:#12151a;
    --bg-2:#0e1116;
    --surface:#1a1e25;
    --surface-2:#222731;
    --text:#e9ebf0;
    --dim:#a2a9b7;
    --mute:#8a92a1;
    --line:#2a303b;
    --line-soft:#232833;
    --accent:#ff9f6b;
    --accent-ink:#22150e;
    --accent-soft:#3a2a22;
    --accent-line:#5d3e2d;
    --blue:#a8c7fa;
    --btn-edge:#b96a3f;
    --shadow:0 24px 50px -24px rgba(0,0,0,.65);
    --max:1160px;
  }

  [data-theme="light"]{
    --bg:#f7f4ee;
    --bg-2:#efeae1;
    --surface:#ffffff;
    --surface-2:#f2ede4;
    --text:#1d2026;
    --dim:#585d68;
    --mute:#5f646e;
    --line:#e0d9cc;
    --line-soft:#eae4d9;
    --accent:#a84a26;
    --accent-ink:#ffffff;
    --accent-soft:#f7e3d8;
    --accent-line:#e8c9b8;
    --blue:#2f5d9e;
    --btn-edge:#8a3f22;
    --shadow:0 24px 50px -28px rgba(60,40,20,.28);
  }

  *{ box-sizing:border-box; }
  html{
    font-size:17px;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
  }
  html.big{ font-size:19px; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    transition:background .2s,color .2s;
  }
  img{ display:block; max-width:100%; height:auto; }
  a{ color:inherit; }
  button{ font:inherit; }
  ::selection{ background:var(--accent-soft); color:var(--text); }

  .shell{
    width:min(var(--max),calc(100% - 48px));
    margin-inline:auto;
  }
  @media (max-width:640px){
    .shell{ width:calc(100% - 32px); }
  }

  .skip{
    position:absolute;
    left:-9999px;
    top:10px;
    z-index:100;
    background:var(--accent);
    color:var(--accent-ink);
    padding:10px 16px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
  }
  .skip:focus{ left:12px; }

  /* ---------- Barra superior ---------- */
  .topbar{
    position:sticky;
    top:0;
    z-index:50;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    transition:background .2s,border-color .2s;
  }
  .topbar-inner{
    height:66px;
    display:flex;
    align-items:center;
    gap:28px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    margin-right:auto;
    text-decoration:none;
    font-size:1.02rem;
    font-weight:600;
    letter-spacing:-.01em;
    white-space:nowrap;
  }
  .brand img{ width:38px; height:38px; object-fit:contain; }
  .nav{
    display:flex;
    align-items:center;
    gap:24px;
  }
  .nav a{
    font-size:.84rem;
    color:var(--dim);
    text-decoration:none;
    padding:5px 0;
    border-bottom:1px solid transparent;
    transition:color .15s,border-color .15s;
  }
  .nav a:hover{
    color:var(--text);
    border-color:var(--accent);
  }
  .top-actions{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .icon-btn{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--dim);
    border-radius:10px;
    cursor:pointer;
    transition:color .15s,border-color .15s,background .15s;
  }
  .icon-btn:hover{
    color:var(--text);
    border-color:var(--accent-line);
  }
  .icon-btn svg{ width:18px; height:18px; }
  .icon-btn .ic-sun{ display:none; }
  [data-theme="light"] .icon-btn .ic-sun{ display:block; }
  [data-theme="light"] .icon-btn .ic-moon{ display:none; }
  .text-btn{
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:.72rem;
    font-weight:500;
    letter-spacing:.02em;
  }
  .text-btn[aria-pressed="true"]{
    color:var(--accent);
    border-color:var(--accent-line);
    background:var(--accent-soft);
  }
  .menu-btn{ display:none; }
  .menu-btn .ic-close{ display:none; }
  .menu-btn[aria-expanded="true"] .ic-menu{ display:none; }
  .menu-btn[aria-expanded="true"] .ic-close{ display:block; }
  .mobile-menu{ display:none; }

  /* ---------- Botones ---------- */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:.82rem 1.25rem;
    border-radius:12px;
    border:1px solid transparent;
    text-decoration:none;
    font-size:.95rem;
    font-weight:600;
    letter-spacing:-.01em;
    cursor:pointer;
    transition:transform .08s,box-shadow .08s,background .18s,border-color .18s,color .18s;
  }
  .btn svg{ width:17px; height:17px; flex:none; }
  .btn-primary{
    background:var(--accent);
    color:var(--accent-ink);
    box-shadow:0 4px 0 var(--btn-edge);
  }
  .btn-primary:hover{ filter:brightness(1.04); }
  .btn-primary:active{
    transform:translateY(3px);
    box-shadow:0 1px 0 var(--btn-edge);
  }
  .btn-ghost{
    background:transparent;
    color:var(--text);
    border-color:var(--line);
  }
  .btn-ghost:hover{
    border-color:var(--accent-line);
    background:var(--surface);
  }
  .btn-sm{
    padding:.52rem .85rem;
    font-size:.82rem;
    box-shadow:0 3px 0 var(--btn-edge);
  }
  .btn-sm:active{ box-shadow:0 1px 0 var(--btn-edge); }

  /* ---------- Portada ---------- */
  .hero{
    position:relative;
    overflow:hidden;
    background:#101318;
    color:#e9ebf0;
    border-bottom:1px solid #232833;
  }
  .hero .shell{ position:relative; z-index:1; }
  .hero-copy{ min-width:0; }
  .hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
    align-items:center;
    gap:44px;
    padding:70px 0 42px;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin:0 0 18px;
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:.68rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#ffb894;
  }
  .eyebrow::before{
    content:"";
    width:22px;
    height:1px;
    background:currentColor;
  }
  .hero h1{
    margin:0 0 18px;
    font-size:clamp(3rem,7vw,5.1rem);
    line-height:.96;
    letter-spacing:-.045em;
    font-weight:600;
    color:#fff;
  }
  .hero h1 .dot{ color:#ff9f6b; }
  .hero-sub{
    max-width:33ch;
    margin:0 0 30px;
    font-size:clamp(1.1rem,2.2vw,1.34rem);
    font-weight:300;
    line-height:1.42;
    color:#c9ced8;
    text-wrap:balance;
  }
  .hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:18px;
  }
  .hero .btn-ghost{
    color:#e9ebf0;
    border-color:#3a4150;
  }
  .hero .btn-ghost:hover{
    background:#1a1e25;
    border-color:#59616f;
  }
  .hero-meta{
    margin:0;
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:.7rem;
    letter-spacing:.02em;
    color:#8e96a5;
  }
  .hero-art{
    position:relative;
    min-width:0;
    min-height:580px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .hero-art::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,159,107,.14),transparent 66%);
    pointer-events:none;
  }
  .phone{
    position:relative;
    background:#0a0c10;
    border:1px solid #343b47;
    border-radius:38px;
    padding:9px;
    box-shadow:0 30px 60px -30px #000, inset 0 1px 0 rgba(255,255,255,.08);
  }
  .phone img{
    width:100%;
    border-radius:30px;
  }
  .phone-main{
    width:min(292px,72vw);
    z-index:2;
  }
  .art-note{
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    margin:0;
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:.66rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#7d8595;
    white-space:nowrap;
  }
  /* ---------- Secciones ---------- */
  .section{
    padding:84px 0;
    border-bottom:1px solid var(--line-soft);
  }
  .section:last-of-type{ border-bottom:0; }
  .section.band{
    background:var(--surface-2);
    border-bottom:1px solid var(--line);
  }
  .kicker{
    display:flex;
    align-items:center;
    gap:9px;
    margin:0 0 14px;
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:.67rem;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .kicker::before{
    content:"";
    width:24px;
    height:1px;
    background:currentColor;
  }
  h2{
    max-width:24ch;
    margin:0 0 18px;
    font-size:clamp(1.8rem,3.2vw,2.55rem);
    font-weight:500;
    line-height:1.12;
    letter-spacing:-.025em;
    text-wrap:balance;
  }
  .lede{
    max-width:64ch;
    margin:0;
    font-size:1.02rem;
    line-height:1.65;
    color:var(--dim);
  }
  .section-head{ margin-bottom:40px; }

  /* ---------- Qué es ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);
    gap:56px;
    align-items:start;
  }
  .statement{
    margin:0;
    padding-left:26px;
    border-left:2px solid var(--accent);
    font-size:clamp(1.18rem,2vw,1.5rem);
    font-weight:300;
    line-height:1.5;
    letter-spacing:-.012em;
    color:var(--text);
    text-wrap:pretty;
  }
  .statement strong{ font-weight:600; }
  .statement-sub{
    margin:18px 0 0 28px;
    font-size:.96rem;
    color:var(--dim);
  }
  .facts{
    list-style:none;
    margin:0;
    padding:0;
  }
  .facts li{
    display:flex;
    align-items:baseline;
    gap:14px;
    padding:14px 0;
    border-top:1px solid var(--line);
  }
  .facts li:last-child{ border-bottom:1px solid var(--line); }
  .fact-num{
    flex:none;
    min-width:88px;
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:1.55rem;
    line-height:1;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    color:var(--accent);
  }
  .facts span:last-child{
    font-size:.88rem;
    line-height:1.4;
    color:var(--dim);
  }

  /* ---------- Funciones ---------- */
  .features{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin-top:38px;
  }
  .feature{
    padding:24px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    transition:border-color .18s,background .18s;
  }
  .feature:hover{
    border-color:var(--accent-line);
    background:var(--surface-2);
  }
  .feature .ico{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    margin-bottom:16px;
    border-radius:10px;
    background:var(--accent-soft);
    color:var(--accent);
  }
  .feature .ico svg{ width:21px; height:21px; }
  .feature h3{
    margin:0 0 6px;
    font-size:1.01rem;
    font-weight:600;
    letter-spacing:-.01em;
  }
  .feature p{
    margin:0;
    font-size:.89rem;
    line-height:1.55;
    color:var(--dim);
  }
  /* ---------- Capturas ---------- */
  .gallery{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:26px 18px;
    margin-top:38px;
  }
  .shot{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding:0;
    border:0;
    background:none;
    color:inherit;
    text-align:center;
    cursor:zoom-in;
  }
  .mini{
    width:100%;
    max-width:226px;
    padding:6px;
    background:#0a0c10;
    border:1px solid var(--line);
    border-radius:26px;
    transition:transform .18s,border-color .18s,box-shadow .18s;
  }
  .mini img{ border-radius:20px; }
  .shot:hover .mini,
  .shot:focus-visible .mini{
    transform:translateY(-4px);
    border-color:var(--accent);
    box-shadow:0 18px 34px -20px rgba(0,0,0,.55);
  }
  .shot .cap{
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:.65rem;
    line-height:1.5;
    letter-spacing:.02em;
    color:var(--dim);
  }
  .shot .cap b{
    color:var(--text);
    font-weight:500;
  }

  /* ---------- Temas ---------- */
  .themes{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    margin-top:38px;
  }
  .theme-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    padding:22px;
  }
  .theme-card.theme-wide{ grid-column:1 / -1; }
  .theme-card.theme-center{
    grid-column:1 / -1;
    justify-self:center;
    width:calc(50% - 9px);
  }
  .theme-head h3{
    margin:0 0 6px;
    font-size:1.12rem;
    font-weight:600;
    letter-spacing:-.01em;
  }
  .theme-head p{
    margin:0;
    color:var(--dim);
    font-size:.92rem;
    line-height:1.55;
  }
  .theme-shots{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:20px;
  }
  .theme-card.theme-wide .theme-shots{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .theme-shot .mini{
    width:100%;
    max-width:none;
  }
  .theme-shot .cap{
    font-size:.62rem;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--text);
  }

  /* ---------- Tres pantallas ---------- */
  .devices{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-top:38px;
  }
  .device-card{
    overflow:hidden;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
  }
  .stage{
    height:342px;
    display:grid;
    place-items:center;
    padding:24px;
    background:var(--surface-2);
    border-bottom:1px solid var(--line);
  }
  .stage .phone{
    height:292px;
    width:auto;
    aspect-ratio:1080 / 1832;
    padding:7px;
    border-radius:30px;
  }
  .stage .phone img{
    height:100%;
    object-fit:contain;
    border-radius:23px;
  }
  .tablet{
    height:292px;
    width:auto;
    aspect-ratio:5 / 8;
    padding:8px;
    background:#0a0c10;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:0 24px 44px -28px #000;
  }
  .tablet img{
    height:100%;
    width:100%;
    object-fit:contain;
    border-radius:11px;
  }
  .tablet.tablet-land{
    width:100%;
    max-width:400px;
    height:auto;
    aspect-ratio:1280 / 772;
  }
  .tv{
    width:100%;
    max-width:340px;
    padding:8px 8px 10px;
    background:#0a0c10;
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:0 24px 44px -28px #000;
  }
  .tv img{
    width:100%;
    aspect-ratio:1920 / 1040;
    object-fit:cover;
    border-radius:5px;
  }
  .tv-stand{
    width:36%;
    height:7px;
    margin:0 auto;
    background:#0a0c10;
    border:1px solid var(--line);
    border-top:0;
    border-radius:0 0 5px 5px;
  }
  .device-body{ padding:22px; }
  .device-body h3{
    margin:0 0 6px;
    font-size:1.02rem;
    font-weight:600;
    letter-spacing:-.01em;
  }
  .device-body p{
    margin:0;
    font-size:.89rem;
    line-height:1.55;
    color:var(--dim);
  }
  .section-note{
    max-width:70ch;
    margin:26px 0 0;
    padding:16px 18px;
    border:1px solid var(--line);
    border-left:3px solid var(--accent);
    border-radius:0 10px 10px 0;
    background:var(--surface);
    font-size:.88rem;
    line-height:1.6;
    color:var(--dim);
  }
  .section-note b{ color:var(--text); font-weight:600; }

  /* ---------- En la tele ---------- */
  .tv-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    margin-top:38px;
  }
  .tv-card{
    padding:28px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
  }
  .tv-card .tag{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:16px;
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:.63rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .tv-card .tag svg{ width:15px; height:15px; }
  .tv-card h3{
    margin:0 0 10px;
    font-size:1.12rem;
    font-weight:600;
    letter-spacing:-.015em;
  }
  .tv-card p{
    margin:0;
    font-size:.92rem;
    line-height:1.6;
    color:var(--dim);
  }
  .steps-inline{
    margin:14px 0 0;
    padding:0;
    list-style:none;
    counter-reset:s;
  }
  .steps-inline li{
    position:relative;
    padding:9px 0 9px 34px;
    border-top:1px solid var(--line-soft);
    font-size:.9rem;
    line-height:1.55;
    color:var(--dim);
    counter-increment:s;
  }
  .steps-inline li::before{
    content:counter(s);
    position:absolute;
    left:0;
    top:10px;
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border:1px solid var(--accent-line);
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent);
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:.64rem;
  }
  .tv-card .fine{
    margin-top:14px;
    font-size:.84rem;
    color:var(--mute);
  }

  /* ---------- Accesibilidad ---------- */
  .split{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
    gap:56px;
    align-items:start;
    margin-top:38px;
  }
  .split .phone{
    width:min(272px,100%);
    margin:0 auto;
  }
  .split p{
    margin:0;
    font-size:1rem;
    line-height:1.65;
    color:var(--dim);
  }
  .split p + p{ margin-top:14px; }
  .chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:22px;
  }
  .chip{
    padding:7px 11px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--surface);
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:.65rem;
    letter-spacing:.02em;
    color:var(--dim);
  }
  /* ---------- Instalar ---------- */
  .install{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:48px;
    align-items:start;
    margin-top:38px;
  }
  .steps{
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:step;
  }
  .steps li{
    position:relative;
    padding:18px 0 18px 46px;
    border-bottom:1px solid var(--line);
    font-size:.95rem;
    line-height:1.6;
    color:var(--dim);
    counter-increment:step;
  }
  .steps li::before{
    content:counter(step);
    position:absolute;
    left:0;
    top:18px;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border:1px solid var(--accent-line);
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent);
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:.74rem;
  }
  .steps strong{ color:var(--text); font-weight:600; }
  .steps code{
    padding:1px 5px;
    border:1px solid var(--line);
    border-radius:5px;
    background:var(--surface-2);
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:.85em;
    color:var(--text);
  }
  .side-note{
    padding:26px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
  }
  .side-note h3{
    margin:0 0 8px;
    font-size:1.04rem;
    font-weight:600;
    letter-spacing:-.01em;
  }
  .side-note p{
    margin:0 0 18px;
    font-size:.9rem;
    line-height:1.6;
    color:var(--dim);
  }
  .side-note .meta{
    margin:0 0 18px;
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:.66rem;
    line-height:1.7;
    letter-spacing:.03em;
    color:var(--mute);
  }
  .side-note .btn{ width:100%; }

  /* ---------- Verificación del APK ---------- */
  .hash-mini{
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid var(--line);
  }
  .side-note .hash-title{
    margin:0 0 10px;
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:.62rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--mute);
  }
  .hash-item + .hash-item{ margin-top:12px; }
  .hash-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:4px;
  }
  .hash-top span{
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:.6rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--mute);
  }
  .hash-item code{
    display:block;
    padding:6px 8px;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--surface-2);
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:.6rem;
    line-height:1.5;
    color:var(--text);
    white-space:nowrap;
    overflow-x:auto;
  }
  .hash-copy{
    flex:none;
    padding:4px 8px;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--surface);
    color:var(--dim);
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:.56rem;
    letter-spacing:.04em;
    text-transform:uppercase;
    cursor:pointer;
  }
  .hash-copy:hover{
    color:var(--accent);
    border-color:var(--accent-line);
  }

  /* ---------- Privacidad ---------- */
  .privacy{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    margin-top:34px;
  }
  .privacy-card{
    padding:24px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
  }
  .privacy-card h3{
    margin:0 0 8px;
    font-size:1rem;
    font-weight:600;
    letter-spacing:-.01em;
  }
  .privacy-card p{
    margin:0;
    font-size:.89rem;
    line-height:1.6;
    color:var(--dim);
  }
  .privacy-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:24px;
    padding:0;
    border:0;
    background:none;
    font-family:inherit;
    font-size:.9rem;
    font-weight:500;
    color:var(--accent);
    text-decoration:none;
    text-align:left;
    cursor:pointer;
  }
  .privacy-link:hover{ text-decoration:underline; }
  .privacy-link svg{ width:15px; height:15px; }

  /* ---------- Pie ---------- */
  footer{
    padding:52px 0 40px;
    background:var(--bg-2);
    border-top:1px solid var(--line);
  }
  .foot-grid{
    display:grid;
    grid-template-columns:1.5fr .6fr .7fr;
    gap:36px;
  }
  .foot-brand{
    display:flex;
    align-items:flex-start;
    gap:14px;
  }
  .foot-brand img{
    width:46px;
    height:46px;
    object-fit:contain;
    flex:none;
  }
  .foot-brand strong{
    display:block;
    margin-bottom:4px;
    font-size:1rem;
    font-weight:600;
    letter-spacing:-.01em;
  }
  .foot-brand p{
    max-width:36ch;
    margin:0;
    font-size:.86rem;
    line-height:1.55;
    color:var(--dim);
  }
  .foot-col h4{
    margin:0 0 12px;
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:.62rem;
    font-weight:500;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--mute);
  }
  .foot-col a,
  .foot-col span,
  .foot-col button{
    display:block;
    padding:3px 0;
    border:0;
    background:none;
    font-family:inherit;
    font-size:.85rem;
    line-height:1.5;
    color:var(--dim);
    text-decoration:none;
    text-align:left;
  }
  .foot-col button{ cursor:pointer; }
  .foot-col a:hover,
  .foot-col button:hover{ color:var(--accent); }
  .foot-legal{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:10px 24px;
    margin-top:36px;
    padding-top:20px;
    border-top:1px solid var(--line);
    font-size:.74rem;
    line-height:1.6;
    color:var(--mute);
  }
  .foot-legal p{ margin:0; max-width:76ch; }
  .foot-legal a{ color:var(--dim); }
  .foot-legal a:hover{ color:var(--accent); }

  /* ---------- Visor de capturas ---------- */
  dialog.lightbox{
    max-width:min(94vw,540px);
    margin:auto;
    padding:0;
    border:0;
    background:transparent;
    color:#e9ebf0;
  }
  dialog.lightbox::backdrop{
    background:rgba(5,7,10,.86);
    backdrop-filter:blur(4px);
  }
  .lightbox figure{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    margin:0;
  }
  .lightbox img{
    width:auto;
    max-height:82vh;
    border:1px solid #3a4150;
    border-radius:22px;
    box-shadow:0 30px 70px -30px #000;
  }
  .lightbox figcaption{
    padding:8px 14px;
    border:1px solid #2a303b;
    border-radius:999px;
    background:#1a1e25;
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:.68rem;
    color:#c9ced8;
  }
  .lb-close{
    position:fixed;
    top:16px;
    right:16px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid #3a4150;
    border-radius:50%;
    background:#1a1e25;
    color:#e9ebf0;
    cursor:pointer;
  }
  .lb-close:hover{ border-color:#ff9f6b; color:#ff9f6b; }
  .lb-close svg{ width:18px; height:18px; }

  /* ---------- Volver arriba ---------- */
  .to-top{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:40;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--surface);
    color:var(--text);
    cursor:pointer;
    box-shadow:var(--shadow);
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .2s,visibility .2s,transform .2s,border-color .2s,color .2s;
  }
  .to-top.show{ opacity:1; visibility:visible; transform:none; }
  .to-top:hover{ border-color:var(--accent); color:var(--accent); }
  .to-top svg{ width:20px; height:20px; }
  @media (max-width:560px){
    .to-top{ right:14px; bottom:14px; width:42px; height:42px; }
  }

  /* ---------- Política de privacidad ---------- */
  dialog.policy{
    width:min(92vw,760px);
    max-width:min(92vw,760px);
    max-height:86vh;
    margin:auto;
    padding:0;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--surface);
    color:var(--text);
    box-shadow:var(--shadow);
  }
  dialog.policy::backdrop{
    background:rgba(5,7,10,.82);
    backdrop-filter:blur(4px);
  }
  .policy-inner{
    max-height:86vh;
    overflow:auto;
    overscroll-behavior:contain;
    padding:0 28px 28px;
  }
  .policy-head{
    position:sticky;
    top:0;
    z-index:1;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding:24px 0 16px;
    background:var(--surface);
    border-bottom:1px solid var(--line);
  }
  .policy-head .kicker{ margin-bottom:6px; }
  .policy-head h2{
    max-width:none;
    margin:0;
    font-size:1.45rem;
    line-height:1.2;
  }
  .policy-close{
    width:38px;
    height:38px;
    flex:none;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--surface-2);
    color:var(--text);
    cursor:pointer;
  }
  .policy-close:hover{ border-color:var(--accent); color:var(--accent); }
  .policy-close svg{ width:18px; height:18px; }
  .policy-body{
    padding-top:18px;
    font-size:.92rem;
    line-height:1.65;
    color:var(--dim);
  }
  .policy-body h3{
    margin:24px 0 8px;
    font-size:1rem;
    font-weight:600;
    letter-spacing:-.01em;
    color:var(--text);
  }
  .policy-body h3:first-child{ margin-top:0; }
  .policy-body p{ margin:0 0 10px; }
  .policy-body ul{ margin:0 0 12px; padding-left:20px; }
  .policy-body li{ margin:5px 0; }
  .policy-body strong{ color:var(--text); font-weight:600; }
  .policy-body a{ color:var(--accent); }

  /* ---------- Aparición al bajar ---------- */
  .js .reveal{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .55s ease,transform .55s ease;
  }
  .js .reveal.in{
    opacity:1;
    transform:none;
  }

  :focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
  }
  section[id]{ scroll-margin-top:84px; }

  /* ---------- Adaptación ---------- */
  @media (max-width:1000px){
    .hero-grid{
      grid-template-columns:minmax(0,1fr);
      gap:26px;
      padding:56px 0 34px;
    }
    .hero-art{
      min-height:0;
      margin-top:4px;
      flex-direction:column;
    }
    .phone-main{ width:250px; }
    .hero-art::before{
      width:360px;
      height:360px;
    }
    .art-note{
      position:static;
      transform:none;
      margin-top:14px;
      text-align:center;
    }
    .about-grid,
    .split,
    .install{
      grid-template-columns:minmax(0,1fr);
      gap:34px;
    }
    .split .phone{ order:2; }
    .features{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .gallery{ grid-template-columns:repeat(3,minmax(0,1fr)); }
    .themes{ grid-template-columns:minmax(0,1fr); }
    .theme-card.theme-center{ width:100%; }
    .devices{ grid-template-columns:minmax(0,1fr); }
    .stage{ height:auto; min-height:0; padding:24px; }
    .foot-grid{ grid-template-columns:1.4fr .6fr .7fr; }
  }

  @media (max-width:860px){
    .nav{ display:none; }
    .menu-btn:not([hidden]){ display:grid; }
    .mobile-menu{
      display:block;
      position:absolute;
      top:100%;
      left:0;
      right:0;
      z-index:49;
      background:var(--bg);
      border-bottom:1px solid var(--line);
      box-shadow:0 18px 30px -24px rgba(0,0,0,.7);
    }
    .mobile-menu[hidden]{ display:none; }
    .mobile-menu-nav{
      display:flex;
      flex-direction:column;
      padding:8px 18px 14px;
    }
    .mobile-menu-nav a{
      display:flex;
      align-items:center;
      min-height:50px;
      padding:0 6px;
      border-bottom:1px solid var(--line-soft);
      color:var(--text);
      text-decoration:none;
      font-size:1rem;
      font-weight:500;
    }
    .mobile-menu-nav a:last-child{ border-bottom:0; }
    .mobile-menu-nav a:hover,
    .mobile-menu-nav a:focus-visible{ color:var(--accent); }
    .section{ padding:66px 0; }
    .tv-grid,
    .privacy{ grid-template-columns:minmax(0,1fr); }
  }

  @media (max-width:700px){
    .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .theme-card.theme-wide .theme-shots{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .foot-grid{ grid-template-columns:minmax(0,1fr); gap:28px; }
    .hero h1{ font-size:clamp(2.7rem,12vw,3.4rem); }
    .hero-sub{ margin-bottom:24px; }
    .hero-actions{ flex-direction:column; align-items:stretch; gap:10px; }
    .hero-actions .btn{ width:100%; justify-content:center; }
    .statement{ padding-left:20px; }
    .statement-sub{ margin-left:22px; }
    .stage{ height:auto; min-height:0; padding:20px; }
    .stage .phone{ height:258px; }
    .tablet{ height:258px; }
  }

  @media (max-width:560px){
    .topbar-inner{ gap:12px; }
    .mobile-menu-nav{ padding:6px 14px 12px; }
    .brand span{ display:none; }
    .brand img{ width:36px; height:36px; }
    .top-actions{ gap:6px; }
    .btn-dl span{ display:none; }
    .btn-dl{ padding:.55rem .65rem; }
    .features{ grid-template-columns:minmax(0,1fr); }
    .theme-card{ padding:16px; }
    .theme-shots{ gap:10px; }
    .section-head{ margin-bottom:30px; }
    .section-note{ padding:14px 16px; }
    .tv-card{ padding:22px; }
    .side-note{ padding:22px; }
    .policy-inner{ padding:0 18px 22px; }
    .policy-head{ padding:18px 0 14px; }
    .policy-head h2{ font-size:1.25rem; }
    .hash-item code{ white-space:normal; overflow-wrap:anywhere; }
  }

  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    .js .reveal{
      opacity:1;
      transform:none;
      transition:none;
    }
    .btn,
    .mini,
    .feature{ transition:none; }
  }