@font-face{font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;src:url('fonts/inter-latin-variable.woff2') format('woff2')}
  @font-face{font-family:'Rubik';font-style:normal;font-weight:700 900;font-display:swap;src:url('fonts/rubik-latin-variable.woff2') format('woff2')}

  :root{
    --ink:#070A16;--blue:#586EFF;--white:#fff;
    --muted:rgba(255,255,255,.56);--faint:rgba(255,255,255,.15);
    --font:'Inter',-apple-system,sans-serif;--display:'Rubik',var(--font);
    --max:1280px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{overflow-x:clip}
  body{font-family:var(--font);background:var(--ink);color:var(--white);
       -webkit-font-smoothing:antialiased;overflow-x:clip;line-height:1.6}
  img{display:block;max-width:100%;height:auto}
  a{color:inherit}
  .wrap{width:min(calc(100% - 60px),var(--max));margin-inline:auto;position:relative;z-index:3}
  [id]{scroll-margin-top:70px}

  /* la misma grilla de puntos y el mismo grano que la home */
  .grid-bg{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size:26px 26px;
    mask-image:radial-gradient(78% 68% at 50% 46%,#000 0%,transparent 100%);
    -webkit-mask-image:radial-gradient(78% 68% at 50% 46%,#000 0%,transparent 100%);
  }
  .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.3;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}

  /* navegación · idéntica a la home */
  .nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(7,10,22,.66);border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-inner{height:70px;display:flex;align-items:center;justify-content:space-between;gap:18px}
  .nav-logo{flex:0 0 auto;display:block}
  .nav-logo img{height:30px;width:auto}
  .nav-cta{flex:0 1 auto;max-width:calc(100vw - 92px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
           color:var(--white);text-decoration:none;font-size:.72rem;font-weight:850;letter-spacing:.12em;
           text-transform:uppercase;border:1px solid rgba(88,110,255,.5);border-radius:8px;padding:10px 16px;
           transition:background .25s ease}
  .nav-cta:hover{background:var(--blue)}

  .eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:.71rem;font-weight:800;
           text-transform:uppercase;letter-spacing:.17em;color:var(--muted);margin-bottom:22px}
  .eyebrow::before{content:'';width:38px;height:1px;background:var(--blue)}

  .btn{position:relative;display:inline-flex;align-items:center;gap:11px;background:var(--blue);color:#fff;
       text-decoration:none;border-radius:10px;padding:16px 25px;font-size:.77rem;font-weight:850;
       letter-spacing:.1em;text-transform:uppercase;box-shadow:0 14px 40px rgba(88,110,255,.3);
       transition:transform .25s ease,box-shadow .25s ease;margin-top:26px}
  .btn:hover{transform:translateY(-2px);box-shadow:0 20px 52px rgba(88,110,255,.48)}
  :focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}

  /* ═════ APERTURA ═════ */
  .hero{position:relative;z-index:3;padding:clamp(128px,17vh,178px) 0 clamp(56px,8vh,88px)}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(200px,22vw,264px);
             gap:clamp(32px,5vw,72px);align-items:center}
  h1{font-family:var(--display);font-weight:900;text-transform:uppercase;
     font-size:clamp(1.9rem,4.6vw,3.9rem);line-height:1;letter-spacing:-.03em;max-width:17ch;margin-bottom:22px}
  h1 em{font-style:normal;color:var(--blue)}
  .lead{color:var(--muted);font-size:clamp(.98rem,1.15vw,1.1rem);line-height:1.72;max-width:46ch}
  .retrato{width:100%;aspect-ratio:1;object-fit:cover;object-position:center top;border-radius:14px;
           border:1px solid var(--faint)}

  /* ═════ BLOQUES ═════ */
  .bloques{position:relative;z-index:3;padding-bottom:clamp(24px,4vh,44px)}
  .bloque{border-top:1px solid var(--faint);padding:clamp(34px,5vh,58px) 0;
          display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(24px,5vw,72px)}
  .bloque .k{font-family:var(--display);font-weight:900;font-size:.72rem;letter-spacing:.14em;
             color:var(--blue);margin-bottom:14px}
  .bloque h2{font-family:var(--display);font-weight:900;text-transform:uppercase;
             font-size:clamp(1.32rem,2.5vw,2.2rem);line-height:1.04;letter-spacing:-.026em;max-width:15ch}
  .bloque h2 em{font-style:normal;color:var(--blue)}
  .bloque .txt{display:grid;gap:15px;color:var(--muted);font-size:clamp(.96rem,1.1vw,1.04rem);line-height:1.74;max-width:56ch}
  .bloque .txt b{color:var(--white);font-weight:700}

  /* el gesto: el bloque se enciende al cruzar el centro y se queda.
     Solo existe si el JS lo habilita; sin JS todo arranca legible. */
  .js .bloque .k,.js .bloque h2,.js .bloque .txt{opacity:.3;transition:opacity .6s cubic-bezier(.4,0,.2,1)}
  .js .bloque h2{transition-delay:.05s}
  .js .bloque .txt{transition-delay:.1s}
  .js .bloque.on .k,.js .bloque.on h2,.js .bloque.on .txt{opacity:1}

  /* ═════ CIERRE ═════ */
  .cierre{position:relative;z-index:3;border-top:1px solid var(--faint);
          padding:clamp(46px,7vh,80px) 0 clamp(56px,8vh,92px)}
  .cierre h2{font-family:var(--display);font-weight:900;text-transform:uppercase;
             font-size:clamp(1.44rem,3vw,2.5rem);line-height:1.03;letter-spacing:-.028em;max-width:17ch;margin-bottom:16px}
  .cierre h2 em{font-style:normal;color:var(--blue)}
  .cierre p{color:var(--muted);font-size:clamp(.96rem,1.1vw,1.04rem);line-height:1.72;max-width:50ch}

  .foot-bar{position:relative;z-index:4;background:var(--ink);border-top:1px solid var(--faint);
            padding:26px 0;font-size:.78rem;color:rgba(255,255,255,.4)}
  .foot-bar .wrap{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;align-items:center}
  .foot-bar a{color:rgba(255,255,255,.62);text-decoration:none}
  .foot-bar a:hover{color:var(--white)}

  @media(max-width:900px){
    .wrap{width:calc(100% - 36px)}
    .nav-inner{gap:12px}
    .nav-cta{max-width:none;padding:10px 13px}
    .hero{padding:clamp(104px,14vh,132px) 0 clamp(42px,6vh,64px)}
    .hero-grid{grid-template-columns:1fr;gap:28px}
    .retrato-wrap{order:-1;width:min(190px,52vw)}
    h1{font-size:clamp(1.66rem,7.4vw,2.15rem);max-width:none;margin-bottom:16px}
    .lead{max-width:none}
    .bloque{grid-template-columns:1fr;gap:16px;padding:30px 0}
    .bloque h2{max-width:none;font-size:1.26rem}
    .bloque .txt{max-width:none;font-size:.98rem}
    .cierre h2{max-width:none;font-size:1.4rem}
    .foot-bar .wrap{justify-content:flex-start;gap:10px}
  }
  @media(prefers-reduced-motion:reduce){
    .js .bloque .k,.js .bloque h2,.js .bloque .txt{opacity:1}
    *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  }

  /* volver arriba: un ítem más del pie, no un botón flotante */
  .arriba{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .arriba i{font-style:normal;transition:transform .3s ease}
  .arriba:hover i{transform:translateY(-3px)}

/* ═════ PÁGINAS LEGALES ═════
   Reusan toda la hoja de sobre.html: nav, pie, grilla y tipografías. Solo
   se agrega el cuerpo de texto largo, que no existía en ninguna otra página. */
.legal{padding:clamp(96px,14vh,150px) 0 clamp(56px,8vh,90px)}
.legal .wrap{max-width:76ch}
.legal h1{font-family:var(--display);font-weight:900;text-transform:uppercase;
          font-size:clamp(1.9rem,4.4vw,3rem);line-height:1;letter-spacing:-.03em;margin-bottom:14px}
.legal h1 em{font-style:normal;color:var(--blue)}
.legal .fecha{display:block;font-size:.66rem;font-weight:800;letter-spacing:.16em;
              text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:clamp(30px,5vh,48px)}
.legal .intro{color:rgba(255,255,255,.74);font-size:1.06rem;line-height:1.72;
              padding-bottom:clamp(24px,4vh,38px);border-bottom:1px solid var(--faint)}
.legal h2{font-family:var(--display);font-weight:900;text-transform:uppercase;
          font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.16;letter-spacing:-.01em;
          margin:clamp(34px,5vh,52px) 0 12px;color:var(--white)}
.legal h2 span{color:var(--blue);margin-right:.5em}
.legal p{color:var(--muted);font-size:1rem;line-height:1.74;margin-bottom:12px}
.legal ul{margin:4px 0 14px;padding-left:20px}
.legal li{color:var(--muted);font-size:1rem;line-height:1.7;margin-bottom:6px}
.legal a{color:var(--white);text-decoration:none;border-bottom:1px solid rgba(88,110,255,.5)}
.legal a:hover{border-color:var(--blue)}
.legal .cierre{margin-top:clamp(40px,6vh,64px);padding-top:clamp(22px,3vh,32px);
               border-top:1px solid var(--faint);font-size:.95rem;color:var(--muted)}
@media(max-width:900px){
  .legal{padding:clamp(88px,13vh,120px) 0 60px}
  .legal p,.legal li{font-size:1rem}
}