/* -------------------- TOKENS -------------------- */
  :root{
    --bg:        #0A0A0A;
    --bg-card:   #111111;
    --line:      #1F1F1F;
    --line-hi:   #404040;
    --fg:        #F5F5F5;
    --muted:     #A0A0A0;
    --dim:       #5A5A5A;

    --f-display: "Space Grotesk", system-ui, sans-serif;
    --f-serif:   "Instrument Serif", "Times New Roman", serif;
    --f-body:    "Inter", system-ui, sans-serif;
    --f-mono:    "JetBrains Mono", ui-monospace, monospace;

    --pad-x:     clamp(20px, 4vw, 64px);
    --section-y: clamp(96px, 14vw, 192px);
  }

  /* -------------------- RESET -------------------- */
  *,*::before,*::after{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  html{ scroll-behavior:smooth; background:var(--bg); }
  body{
    background:var(--bg);
    color:var(--fg);
    font-family:var(--f-body);
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
  ::selection{ background:#F5F5F5; color:#0A0A0A; }

  /* hide native cursor on devices with a real pointer — custom cursor takes over.
     Touch/coarse pointers keep their native cursor. */
  @media (pointer:fine){
    html,body,a,button,input,textarea,select,[role="button"]{ cursor:none !important; }
  }

  /* -------------------- FOCUS-VISIBLE (a11y) -------------------- */
  :focus{ outline:none; }
  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible,
  .area-card:focus-visible,
  .pub:focus-visible,
  .member-cta:focus-visible,
  .nav-cta:focus-visible,
  .form-submit:focus-visible,
  .social a:focus-visible,
  .footer-col li a:focus-visible{
    outline: 2px solid #F5F5F5;
    outline-offset: 3px;
    border-radius: 2px;
  }
  .field input:focus-visible,
  .field textarea:focus-visible{
    outline: 2px solid #F5F5F5;
    outline-offset: 4px;
  }

  /* -------------------- TYPE UTILS -------------------- */
  .eyebrow{
    font-family:var(--f-mono);
    font-size:11px;
    font-weight:500;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .serif-i{ font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:-.01em; }

  /* -------------------- LAYOUT -------------------- */
  .wrap{ padding-left:var(--pad-x); padding-right:var(--pad-x); }
  .section{ padding-left:var(--pad-x); padding-right:var(--pad-x); padding-top:var(--section-y); padding-bottom:var(--section-y); position:relative; }
  .rule-top{ border-top:1px solid var(--line); }

  /* -------------------- CUSTOM CURSOR -------------------- */
  .cursor{
    position:fixed; left:0; top:0; pointer-events:none; z-index:9999;
    width:8px; height:8px; border-radius:50%; background:#F5F5F5;
    transform:translate(-50%,-50%);
    transition: width .25s cubic-bezier(.2,.7,.2,1), height .25s cubic-bezier(.2,.7,.2,1), background .25s, opacity .2s;
    mix-blend-mode:difference;
  }
  .cursor.hover{ width:44px; height:44px; background:#F5F5F5; }
  @media (pointer:coarse){ .cursor{ display:none; } }

  /* -------------------- NAV -------------------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding: 22px var(--pad-x);
    transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
    border-bottom:1px solid transparent;
  }
  .nav.scrolled{
    background:rgba(10,10,10,.62);
    backdrop-filter:saturate(140%) blur(14px);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    border-bottom-color:var(--line);
  }
  .logo{
    display:flex; align-items:center; gap:10px;
    line-height:1;
  }
  .logo img{
    height:28px; width:auto; display:block;
  }
  .logo-fallback{
    font-family:var(--f-display); font-weight:500; font-size:18px; letter-spacing:-.01em;
    color:#F5F5F5;
  }
  .logo-fallback em{ font-family:var(--f-serif); font-style:italic; font-weight:400; }
  @media (max-width: 720px){
    .logo img{ height:24px; }
    .logo-fallback{ font-size:16px; }
  }

  .nav-menu{
    display:flex; gap:34px; align-items:center;
    font-size:13px; font-weight:400; color:var(--fg);
  }
  .nav-menu a{
    position:relative; padding:6px 0;
    color:#D6D6D6; transition: color .2s ease;
  }
  .nav-menu a:hover{ color:#fff; }
  .nav-menu a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:#fff;
    transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .nav-menu a:hover::after{ transform:scaleX(1); }
  .nav-menu a.is-active{ color:#fff; }
  .nav-menu a.is-active::after{ transform:scaleX(1); }

  .nav-cta{
    display:inline-flex; align-items:center; gap:10px;
    background:#F5F5F5; color:#0A0A0A;
    padding:11px 18px; border-radius:999px;
    font-size:13px; font-weight:500; letter-spacing:.01em;
    transition: background .2s ease, transform .2s ease;
  }
  .nav-cta:hover{ background:#fff; transform:translateY(-1px); }
  .nav-cta .dot{ width:6px; height:6px; border-radius:50%; background:#0A0A0A; }

  @media (max-width: 880px){
    .nav-menu{ display:none; }
  }

  /* -------------------- HERO -------------------- */
  .hero{
    min-height:100vh; /* fallback */
    min-height:100svh;
    padding-left:var(--pad-x); padding-right:var(--pad-x);
    padding-top: clamp(100px, 12vh, 140px);
    padding-bottom: 100px;
    display:flex; flex-direction:column;
    position:relative;
    isolation:isolate;
    overflow:hidden;
  }
  .hero-bg{
    position:absolute; inset:0;
    z-index:-2;
    overflow:hidden;
    /* still-image fallback — used when the video can't load/play */
    background-image: url("/assets/hero-chess.webp");
    background-repeat:no-repeat;
    background-size: cover;
    background-position: right center;
    /* slight tone-down so the media sits behind the type without competing */
    filter: contrast(1.02) saturate(.9);
  }
  .hero-bg video{
    position:absolute;
    top:50%; left:50%;
    width:100%; height:100%;
    min-width:100%; min-height:100%;
    object-fit:cover;
    object-position: right center;
    transform: translate(-50%, -50%);
    pointer-events:none;
    /* fade in once the first frame is ready to avoid a flash */
    opacity:0;
    transition: opacity .6s ease;
  }
  .hero-bg video.is-ready{ opacity:1; }
  @media (prefers-reduced-motion: reduce){
    .hero-bg video{ display:none; }
  }
  /* gradient veil — keeps left side pitch-black for legibility,
     lets the chess king breathe on the right */
  .hero::before{
    content:"";
    position:absolute; inset:0;
    z-index:-1;
    background:
      linear-gradient(90deg,
        #0A0A0A 0%,
        rgba(10,10,10,.92) 28%,
        rgba(10,10,10,.55) 55%,
        rgba(10,10,10,.20) 78%,
        rgba(10,10,10,.05) 100%),
      linear-gradient(180deg,
        rgba(10,10,10,.55) 0%,
        rgba(10,10,10,0) 18%,
        rgba(10,10,10,0) 70%,
        rgba(10,10,10,.65) 100%);
    pointer-events:none;
  }
  /* on narrower viewports, push the figure further right and darken more
     so the headline never collides with it */
  @media (max-width: 900px){
    .hero-bg{
      background-position: 85% center;
      background-size: cover;
      opacity:.55;
    }
    .hero-bg video{ object-position: 85% center; }
    .hero::before{
      background:
        linear-gradient(180deg,
          rgba(10,10,10,.65) 0%,
          rgba(10,10,10,.40) 40%,
          rgba(10,10,10,.55) 70%,
          rgba(10,10,10,.85) 100%);
    }
  }
  .hero-top{
    display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
  }
  .hero-meta{ display:flex; flex-direction:column; gap:6px; }
  .hero-loc{
    font-family:var(--f-mono); font-size:11px; letter-spacing:.22em;
    color:var(--muted); text-transform:uppercase;
  }
  .hero-num{
    font-family:var(--f-mono); font-size:11px; color:var(--dim); letter-spacing:.18em;
  }

  .hero-title{
    font-family:var(--f-display);
    font-weight:500;
    font-size: clamp(44px, 8.5vw, 132px);
    line-height:.94;
    letter-spacing:-.035em;
    margin: clamp(24px, 5vh, 56px) 0 0;
    color:#F5F5F5;
  }
  .hero-title .line{
    display:block; overflow:hidden;
  }
  .hero-title .line > span{ display:inline-block; will-change:transform; }
  .hero-title em{
    font-family:var(--f-serif); font-style:italic; font-weight:400;
    letter-spacing:-.025em;
  }

  .hero-foot{
    display:flex; flex-direction:column; align-items:flex-start;
    gap: clamp(24px, 3vh, 32px);
    margin-top: clamp(32px, 4vh, 48px);
    max-width: 460px;
  }
  .hero-sub{
    max-width: 38ch;
    color:#CFCFCF; font-size: clamp(15px, 1.15vw, 18px); line-height:1.5;
    font-weight:400;
  }

  /* -------- HERO contact card (social + email) -------- */
  .contact-card{
    width: 100%;
    max-width: 440px;
    background: rgba(20,20,20,.55);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    padding: 18px 18px 18px;
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    box-shadow: 0 12px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  }
  .contact-card .cc-label{
    font-family:var(--f-mono);
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    color: var(--muted);
    margin: 0 0 14px 4px;
  }
  .contact-card .cc-socials{
    display:flex; align-items:center; gap:10px;
    padding: 0 4px 0;
  }
  .contact-card .cc-socials a{
    width:38px; height:38px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius: 10px;
    color:#E6E6E6;
    transition: background .2s ease, color .2s ease, transform .2s ease;
  }
  .contact-card .cc-socials a:hover{
    background: rgba(255,255,255,.08);
    color:#fff;
    transform: translateY(-1px);
  }
  .contact-card .cc-socials svg{ width:20px; height:20px; display:block; }

  .contact-card .cc-form{
    display:flex; align-items:center; gap:10px;
    padding: 10px 4px 4px;
  }
  .contact-card .cc-form input{
    flex:1; min-width:0;
    background: transparent; border: 0;
    color:#F5F5F5;
    font-family: var(--f-body); font-size: 15px; line-height: 1.4;
    padding: 10px 6px;
  }
  .contact-card .cc-form input::placeholder{
    color: var(--muted);
    font-weight: 400;
  }
  .contact-card .cc-form input:focus{ outline:none; }
  .contact-card .cc-send{
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #F5F5F5;
    color: #0A0A0A;
    display:inline-flex; align-items:center; justify-content:center;
    transition: background .2s ease, transform .2s ease;
  }
  .contact-card .cc-send:hover{ background:#fff; transform: translateY(-1px); }
  .contact-card .cc-send svg{ width:16px; height:16px; }

  .btn{
    display:inline-flex; align-items:center; gap:12px;
    padding:14px 22px;
    font-size:13px; font-weight:500; letter-spacing:.01em;
    border-radius:999px;
    transition: background .25s, color .25s, border-color .25s, transform .25s;
    line-height:1;
  }
  .btn-solid{ background:#F5F5F5; color:#0A0A0A; }
  .btn-solid:hover{ background:#fff; transform:translateY(-1px); }
  .btn-outline{ border:1px solid var(--line-hi); color:#F5F5F5; }
  .btn-outline:hover{ border-color:#F5F5F5; transform:translateY(-1px); }
  .btn .arrow{ display:inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .btn:hover .arrow{ transform: translateX(4px); }

  .scroll-ind{
    position:absolute; left:var(--pad-x); bottom:32px;
    display:flex; align-items:center; gap:12px;
    font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; color:var(--muted);
    text-transform:uppercase;
  }
  .scroll-ind .bar{
    width:1px; height:36px; background:linear-gradient(to bottom, transparent, #F5F5F5 30%, #F5F5F5 70%, transparent);
    animation: scrollPulse 2.6s ease-in-out infinite;
    transform-origin: top;
  }
  @keyframes scrollPulse{
    0%,100%{ opacity:.35; transform:scaleY(.7) translateY(0); }
    50%{ opacity:1; transform:scaleY(1) translateY(0); }
  }

  /* -------------------- SECTORES (carrusel) -------------------- */
  .sectors{
    padding-top: clamp(60px, 7vw, 100px);
    padding-bottom: clamp(60px, 7vw, 100px);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .sectors-lead{
    padding: 0 var(--pad-x);
    margin-bottom: 28px;
    color:var(--muted); font-size:13px;
  }
  .marquee{
    display:flex; gap:0; width:max-content;
    animation: marquee 60s linear infinite;
    will-change: transform;
  }
  .marquee:hover{ animation-play-state: paused; }
  .marquee-track{
    display:flex; align-items:center; gap:54px; padding-right:54px;
    font-family:var(--f-display);
    font-weight:400;
    font-size: clamp(40px, 7vw, 96px);
    letter-spacing:-.025em;
    color:#F5F5F5;
    white-space:nowrap;
  }
  .marquee-track .sep{
    color:#3A3A3A;
    font-size:.55em;
    transform: translateY(-.05em);
  }
  .marquee-track em{ font-family:var(--f-serif); font-style:italic; font-weight:400; }
  @keyframes marquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }

  /* -------------------- LA FIRMA -------------------- */
  .firma{ border-top:1px solid var(--line); }
  .firma-lead{
    font-size: clamp(16px, 1.2vw, 19px);
    line-height:1.6;
    color:#CFCFCF;
    max-width: 52ch;
    align-self:end;
    font-weight:400;
    margin:0;
  }
  .firma-stats{
    margin-top: clamp(64px, 8vw, 112px);
    display:grid; grid-template-columns: repeat(3, 1fr);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .stat{
    padding: 40px 32px 36px;
    border-right:1px solid var(--line);
    display:flex; flex-direction:column; gap: 22px;
    position:relative;
    min-height: 220px;
    justify-content:space-between;
  }
  .stat:last-child{ border-right:0; }
  .stat-num{
    font-family:var(--f-display); font-weight:500;
    font-size: clamp(72px, 9vw, 132px);
    line-height:.9; letter-spacing:-.045em;
    color:#F5F5F5;
  }
  .stat-num em{ font-family:var(--f-serif); font-style:italic; font-weight:400; }
  .stat-foot{
    display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  }
  .stat-lbl{
    font-family:var(--f-mono); font-size:11px; letter-spacing:.22em;
    text-transform:uppercase; color:var(--muted);
    line-height:1.55;
    max-width: 18ch;
  }
  .stat-heading{
    font-family:var(--f-display); font-weight:500;
    font-size: clamp(18px, 1.8vw, 26px);
    letter-spacing:-.01em;
    color:var(--muted);
    margin:0; line-height:1;
  }
  .stat-idx{
    font-family:var(--f-mono); font-size:10px; letter-spacing:.18em;
    color:var(--dim);
  }
  @media (max-width: 880px){
    .firma-stats{ grid-template-columns: 1fr; }
    .stat{ border-right:0; border-bottom:1px solid var(--line); min-height: 0; padding: 32px 0; }
    .stat:last-child{ border-bottom:0; }
  }

  /* -------------------- SECTION HEADER -------------------- */
  .sec-head{
    display:grid;
    grid-template-columns: 1fr 2fr;
    gap: 48px;
    align-items:end;
    margin-bottom: clamp(56px, 7vw, 96px);
  }
  .sec-tag{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--f-mono); font-size:11px; letter-spacing:.22em;
    text-transform:uppercase; color:var(--muted);
  }
  .sec-tag .num{ color:#F5F5F5; }
  .sec-title{
    font-family:var(--f-display); font-weight:500;
    font-size: clamp(40px, 6vw, 88px);
    line-height:1;
    letter-spacing:-.035em;
    margin: 22px 0 0;
  }
  .sec-title em{ font-family:var(--f-serif); font-style:italic; font-weight:400; }
  .sec-intro{
    font-size: clamp(15px, 1.1vw, 17px);
    color:#CFCFCF; max-width: 52ch; line-height:1.55;
    align-self:end;
  }
  .sec-head .right-link{
    align-self:end;
    font-size:13px; color:var(--muted);
    display:inline-flex; align-items:center; gap:10px;
    transition: color .2s;
  }
  .sec-head .right-link:hover{ color:#fff; }
  .sec-head .right-link .arrow{ transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .sec-head .right-link:hover .arrow{ transform: translateX(4px); }

  @media (max-width: 880px){
    .sec-head{ grid-template-columns:1fr; gap:24px; }
  }

  /* -------------------- ÁREAS DE PRÁCTICA -------------------- */
  .areas-grid{
    display:grid; grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
  }
  .area-card{
    background:var(--bg-card);
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding: 36px 32px 32px;
    min-height: 280px;
    display:flex; flex-direction:column; justify-content:space-between;
    position:relative;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), background .35s ease;
  }
  .area-card::before{
    content:""; position:absolute; inset:-1px; pointer-events:none;
    border:1px solid transparent;
    transition: border-color .3s ease;
  }
  .area-card:hover{
    background:#141414;
    transform: translateY(-2px);
  }
  .area-card:hover::before{ border-color: var(--line-hi); }
  .area-tag{
    font-family:var(--f-mono); font-size:11px; letter-spacing:.22em;
    color:var(--muted); text-transform:uppercase;
  }
  .area-num{
    position:absolute; top:24px; right:24px;
    font-family:var(--f-mono); font-size:11px; color:var(--dim); letter-spacing:.16em;
  }
  .area-title{
    margin: 28px 0 0;
    font-family:var(--f-display); font-weight:500;
    font-size: clamp(22px, 2.1vw, 30px);
    line-height:1.05; letter-spacing:-.022em;
    color:#F5F5F5;
    max-width: 16ch;
  }
  .area-title em{ font-family:var(--f-serif); font-style:italic; font-weight:400; }
  .area-bottom{
    display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
    margin-top: 28px;
  }
  .area-desc{
    color:var(--muted); font-size:14px; line-height:1.5; max-width:32ch;
  }
  .area-arrow{ display:none; }

  @media (max-width:980px){ .areas-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:620px){ .areas-grid{ grid-template-columns:1fr; } }

  /* -------------------- MANIFIESTO -------------------- */
  .manifesto{
    padding-top: clamp(140px, 18vw, 240px);
    padding-bottom: clamp(140px, 18vw, 240px);
    padding-left:var(--pad-x); padding-right:var(--pad-x);
  }
  .manifesto-quote{
    font-family:var(--f-display); font-weight:500;
    font-size: clamp(48px, 8.5vw, 134px);
    line-height:.98; letter-spacing:-.035em;
    margin:0; max-width: 18ch;
  }
  .manifesto-quote em{ font-family:var(--f-serif); font-style:italic; font-weight:400; }
  .manifesto-sig{
    margin-top: 48px;
    font-family:var(--f-mono); font-size:12px; letter-spacing:.18em;
    color:var(--muted); text-transform:uppercase;
  }

  /* -------------------- EQUIPO -------------------- */
  .team{ border-top:1px solid var(--line); }
  .team-grid{
    display:grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2vw, 32px) clamp(16px, 1.6vw, 24px);
  }
  .team-card{
    display:flex; flex-direction:column; gap: 18px;
    text-decoration:none;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .team-card:hover{ transform: translateY(-3px); }

  .portrait{
    aspect-ratio: 4/5;
    background:#0E0E0E;
    border:1px solid var(--line);
    position:relative; overflow:hidden;
    transition: border-color .25s ease;
  }
  .team-card:hover .portrait{ border-color: var(--line-hi); }
  .portrait::before{
    content:""; position:absolute; inset:0; z-index:0;
    background-image:
      repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 14px);
  }
  .portrait-meta{
    position:absolute; left:12px; bottom:10px;
    font-family:var(--f-mono); font-size:9px; letter-spacing:.16em;
    color:var(--dim); text-transform:uppercase; line-height:1.6;
  }
  .portrait-meta .k{ color:var(--muted); }
  .portrait-glyph{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family:var(--f-serif); font-style:italic; font-weight:400;
    font-size: clamp(96px, 11vw, 160px); color:#1A1A1A;
    user-select:none; line-height:1;
  }

  .member-tag{
    font-family:var(--f-mono); font-size:10px; letter-spacing:.2em;
    color:var(--muted); text-transform:uppercase;
  }
  .member-name{
    margin: 6px 0 0;
    font-family:var(--f-display); font-weight:500;
    font-size: clamp(20px, 1.7vw, 26px);
    line-height:1.05; letter-spacing:-.022em;
  }
  .member-name em{ font-family:var(--f-serif); font-style:italic; font-weight:400; }
  .member-bio{
    margin-top: 8px;
    color:var(--muted); font-size: 13px; line-height:1.5;
    max-width: 28ch;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .member-card-foot{
    margin-top: 4px;
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--f-mono); font-size:10px; letter-spacing:.2em;
    color:#F5F5F5; text-transform:uppercase;
  }
  .member-card-foot .arrow{ transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .team-card:hover .member-card-foot .arrow{ transform: translateX(4px); }

  .team-cta{
    margin-top: clamp(56px, 7vw, 88px);
    display:flex; justify-content:center;
  }

  @media (max-width: 980px){
    .team-grid{ grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  }
  @media (max-width: 520px){
    .team-grid{ grid-template-columns: 1fr; }
  }

  /* -------------------- PUBLICACIONES -------------------- */
  .pubs{ border-top:1px solid var(--line); }
  .pubs-grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    border-top:1px solid var(--line);
  }
  .pub{
    padding: 36px 28px 32px;
    border-right:1px solid var(--line);
    display:flex; flex-direction:column; gap: 20px;
    min-height: 280px;
    text-decoration:none; cursor:pointer;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), background .3s ease, border-color .25s ease;
  }
  .pub:last-child{ border-right:0; }
  .pub:hover{ background:#0E0E0E; transform: translateY(-3px); border-color: var(--line-hi); }
  .pub-meta{
    display:flex; align-items:center; justify-content:space-between;
    font-family:var(--f-mono); font-size:11px; letter-spacing:.18em;
    text-transform:uppercase;
  }
  .pub-cat{ color:#F5F5F5; }
  .pub-date{ color:var(--dim); }
  .pub-title{
    font-family:var(--f-display); font-weight:500;
    font-size: clamp(22px, 2vw, 28px);
    line-height:1.12; letter-spacing:-.022em;
    color:#F5F5F5;
    margin: 0;
    flex:1;
  }
  .pub-title em{ font-family:var(--f-serif); font-style:italic; font-weight:400; }
  .pub-desc{
    color:var(--muted); font-size:14px; line-height:1.5;
    margin: 0;
  }
  .pub-foot{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:18px; border-top:1px solid var(--line);
    font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; color:var(--muted);
    text-transform:uppercase;
  }
  .pub-foot .arrow{ transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .pub:hover .pub-foot .arrow{ transform: translateX(4px); color:#fff; }

  @media (max-width:880px){
    .pubs-grid{ grid-template-columns:1fr; }
    .pub{ border-right:0; border-bottom:1px solid var(--line); }
  }

  /* -------------------- CTA FINAL + CONTACTO -------------------- */
  .cta-final{ border-top:1px solid var(--line); }
  .cta-headline{
    font-family:var(--f-display); font-weight:500;
    font-size: clamp(48px, 8vw, 132px);
    line-height:.98; letter-spacing:-.035em;
    margin:0;
    max-width: 14ch;
  }
  .cta-headline em{ font-family:var(--f-serif); font-style:italic; font-weight:400; }

  .contact-grid{
    margin-top: clamp(72px, 9vw, 112px);
    display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px);
    align-items:start;
  }
  .contact-info{ display:flex; flex-direction:column; gap: 36px; }
  .contact-block .lbl{
    font-family:var(--f-mono); font-size:11px; letter-spacing:.22em;
    text-transform:uppercase; color:var(--muted); margin-bottom:10px;
  }
  .contact-block .val{
    font-family:var(--f-display); font-weight:400;
    font-size: clamp(18px, 1.6vw, 24px);
    line-height:1.35; color:#F5F5F5; letter-spacing:-.012em;
  }
  .contact-block a.val{ display:inline-block; transition: color .2s; }
  .contact-block a.val:hover{ color:#fff; }

  .form{ display:flex; flex-direction:column; gap: 28px; }
  .field{ display:flex; flex-direction:column; gap:10px; }
  .field label{
    font-family:var(--f-mono); font-size:11px; letter-spacing:.22em;
    text-transform:uppercase; color:var(--muted);
  }
  .field input, .field textarea{
    background:transparent; border:0; border-bottom:1px solid var(--line);
    color:#F5F5F5; font-family:var(--f-body); font-size:16px;
    padding: 10px 0 12px;
    transition: border-color .25s ease;
    outline:0;
    resize:none;
  }
  .field textarea{ min-height: 92px; }
  .field input:focus, .field textarea:focus{ border-color:#F5F5F5; }
  .field input::placeholder, .field textarea::placeholder{ color:var(--dim); }

  .form-submit{
    align-self:flex-start;
    margin-top: 8px;
    display:inline-flex; align-items:center; gap:12px;
    background:#F5F5F5; color:#0A0A0A;
    padding:14px 22px; border-radius:999px;
    font-size:13px; font-weight:500;
    transition: background .2s, transform .2s;
  }
  .form-submit:hover{ background:#fff; transform:translateY(-1px); }
  .form-submit .arrow{ transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .form-submit:hover .arrow{ transform: translateX(4px); }

  @media (max-width: 880px){
    .contact-grid{ grid-template-columns:1fr; }
  }

  /* -------------------- WHATSAPP FAB -------------------- */
  .wa-fab{
    position:fixed; right:24px; bottom:24px; z-index:90;
    width:56px; height:56px; border-radius:50%;
    background:#F5F5F5; color:#0A0A0A;
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35);
    animation: waPulse 4s ease-in-out infinite;
    transition: background .25s, transform .25s;
  }
  .wa-fab:hover{ background:#fff; transform: translateY(-2px) scale(1.04); }
  .wa-fab svg{ width:26px; height:26px; }
  @media (max-width: 720px){
    .wa-fab{ width:52px; height:52px; right:18px; bottom:18px; }
    .wa-fab svg{ width:24px; height:24px; }
  }
  @keyframes waPulse{
    0%, 70%, 100%{ transform: scale(1); }
    78%{ transform: scale(1.06); }
    86%{ transform: scale(1); }
  }

  /* -------------------- FOOTER -------------------- */
  .footer{
    border-top:1px solid var(--line);
    padding: clamp(56px, 7vw, 88px) var(--pad-x) 28px;
    margin-top: clamp(96px, 12vw, 160px);
  }
  .footer-grid{
    display:grid; grid-template-columns: 1.4fr 1fr 1.4fr 1fr;
    gap: clamp(32px, 4vw, 64px);
  }
  .footer-col h4{
    font-family:var(--f-mono); font-size:11px; letter-spacing:.22em;
    text-transform:uppercase; color:var(--muted);
    margin: 0 0 18px; font-weight:500;
  }
  .footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
  .footer-col li a{ font-size:14px; color:#D6D6D6; transition: color .2s; }
  .footer-col li a:hover{ color:#fff; }
  .footer-logo{
    display:flex; flex-direction:column; gap:18px;
    align-items:flex-start;
  }
  .footer-logo img{
    height: 40px; width:auto; max-width:none; display:block;
    flex-shrink:0;
  }
  .footer-logo .full{
    font-family:var(--f-display); font-size:15px; font-weight:500; letter-spacing:-.005em; line-height:1.45;
    color:#D6D6D6;
  }
  .footer-logo .rif{
    font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; color:var(--muted); text-transform:uppercase;
  }
  .footer-addr{
    font-size:14px; color:#D6D6D6; line-height:1.55; max-width: 34ch;
  }
  .footer-phones{
    font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color:var(--muted); line-height:1.7;
    margin-top:10px;
  }
  .social{ display:flex; gap:12px; }
  .social a{
    width:36px; height:36px; border:1px solid var(--line);
    display:inline-flex; align-items:center; justify-content:center;
    transition: border-color .25s, color .2s, transform .2s;
    color:#D6D6D6;
  }
  .social a:hover{ border-color:var(--line-hi); color:#fff; transform: translateY(-1px); }
  .social svg{ width:14px; height:14px; }

  .footer-bottom{
    margin-top: clamp(56px, 7vw, 88px);
    padding-top: 24px;
    border-top:1px solid var(--line);
    display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
    font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; color:var(--dim);
    text-transform:uppercase;
  }

  @media (max-width:980px){
    .footer-grid{ grid-template-columns: 1fr 1fr; }
  }
  @media (max-width:560px){
    .footer-grid{ grid-template-columns: 1fr; }
  }

  /* -------------------- REVEAL -------------------- */
  .reveal{
    opacity:0; transform: translateY(28px);
    transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
    will-change: transform, opacity;
  }
  .reveal.in{ opacity:1; transform:none; }
  .reveal.d2{ transition-delay:.08s; }
  .reveal.d3{ transition-delay:.16s; }
  .reveal.d4{ transition-delay:.24s; }

  /* line-by-line hero reveal */
  .hero-title .line > span{
    display:inline-block;
    transform: translateY(110%);
    transition: transform 1.1s cubic-bezier(.2,.8,.2,1);
  }
  .hero-title.in .line > span{ transform: none; }
  .hero-title .line:nth-child(2) > span{ transition-delay: .12s; }
  .hero-title .line:nth-child(3) > span{ transition-delay: .22s; }

  /* reduce motion */
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
    .marquee{ animation: none; }
  }

  /* -------------------- MEMBER OVERLAY 3D -------------------- */
  .member-overlay{
    position:fixed; inset:0; z-index:200;
    display:flex; align-items:center; justify-content:center;
    perspective:1200px;
    pointer-events:none;
    opacity:0;
    transition: opacity .45s cubic-bezier(.2,.7,.2,1);
  }
  .member-overlay.active{
    pointer-events:auto;
    opacity:1;
  }
  .member-overlay-bg{
    position:absolute; inset:0;
    background:rgba(10,10,10,.88);
    backdrop-filter:saturate(140%) blur(18px);
    -webkit-backdrop-filter:saturate(140%) blur(18px);
  }
  .member-overlay-card{
    position:relative;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,.08);
    padding:clamp(36px,5vw,56px);
    max-width:520px; width:90%;
    max-height:90vh; overflow-y:auto;
    border-radius:20px;
    display:flex; flex-direction:column; align-items:center; gap:18px;
    text-align:center;
    transform: rotateY(12deg) translateZ(-80px) scale(.92);
    transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
    box-shadow: 0 0 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  }
  .member-overlay.active .member-overlay-card{
    transform: rotateY(0) translateZ(0) scale(1);
  }
  .member-overlay-close{
    position:absolute; top:16px; right:16px;
    width:40px; height:40px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:24px; color:var(--muted);
    border-radius:50%;
    transition: background .25s, color .25s;
  }
  .member-overlay-close:hover{ background:rgba(255,255,255,.06); color:#fff; }
  .member-overlay-portrait{
    width:clamp(180px,32vw,260px);
    aspect-ratio:4/5;
    margin:0 auto;
    border-color:var(--line-hi);
    flex-shrink:0;
  }
  .member-overlay-portrait .portrait-glyph{
    font-size:clamp(80px,12vw,140px);
  }
  .overlay-photo{
    position:absolute; inset:0;
    width:100%; height:100%;
    max-width:none; max-height:none;
    object-fit:cover;
    image-rendering:auto;
    display:none;
    will-change: transform;
  }
  .overlay-photo[src]:not([src=""]){ display:block; }
  .overlay-photo[src]:not([src=""]) ~ .portrait-glyph{ display:none; }
  .overlay-photo[src]:not([src=""]) ~ .portrait-meta{ display:none; }

  /* foto real en la card del equipo */
  .portrait-photo{
    position:absolute; inset:0;
    width:100%; height:100%;
    max-width:none; max-height:none;
    object-fit:cover;
    image-rendering:auto;
    display:none;
    will-change: transform;
  }
  .portrait-photo[src]:not([src=""]){ display:block; z-index:2; }
  .portrait-photo[src]:not([src=""]) ~ .portrait-glyph{ display:none; }
  .portrait-photo[src]:not([src=""]) ~ .portrait-meta{ display:none; }
  .portrait:has(.portrait-photo[src]:not([src=""]))::before{ display:none; }

  /* ── Publication overlay 3D ──────────── */
  .pub-overlay{
    position:fixed; inset:0; z-index:100;
    display:flex; align-items:center; justify-content:center;
    perspective:1200px;
    pointer-events:none;
    opacity:0;
    transition: opacity .45s cubic-bezier(.2,.7,.2,1);
  }
  .pub-overlay.active{ pointer-events:auto; opacity:1; }
  .pub-overlay-bg{
    position:absolute; inset:0;
    background:rgba(10,10,10,.88);
    backdrop-filter:saturate(140%) blur(18px);
    -webkit-backdrop-filter:saturate(140%) blur(18px);
  }
  .pub-overlay-card{
    position:relative;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,.08);
    padding:clamp(32px,5vw,48px);
    max-width:640px; width:92%;
    max-height:85vh; overflow-y:auto;
    border-radius:20px;
    display:flex; flex-direction:column; gap:24px;
    transform: rotateY(8deg) translateZ(-60px) scale(.93);
    transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
    box-shadow: 0 0 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  }
  .pub-overlay.active .pub-overlay-card{
    transform: rotateY(0) translateZ(0) scale(1);
  }
  .pub-overlay-close{
    position:absolute; top:16px; right:16px;
    width:40px; height:40px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:24px; color:var(--muted); background:none; border:0; cursor:pointer;
    border-radius:50%;
    transition: background .25s, color .25s;
  }
  .pub-overlay-close:hover{ background:rgba(255,255,255,.06); color:#fff; }
  .pub-overlay-meta{
    display:flex; align-items:center; justify-content:space-between;
    font-family:var(--f-mono); font-size:11px; letter-spacing:.18em;
    text-transform:uppercase;
  }
  .pub-overlay-cat{ color:var(--accent); }
  .pub-overlay-date{ color:var(--dim); }
  .pub-overlay-title{
    font-family:var(--f-display); font-weight:500;
    font-size: clamp(26px,3.5vw,36px);
    line-height:1.12; letter-spacing:-.022em;
    margin:0;
  }
  .pub-overlay-title em{ font-family:var(--f-serif); font-style:italic; font-weight:400; }
  .pub-overlay-body{
    color:var(--muted); font-size:15px; line-height:1.7;
  }
  .pub-overlay-foot{
    padding-top:20px; border-top:1px solid var(--line);
    font-family:var(--f-mono); font-size:11px; letter-spacing:.16em;
    color:var(--dim); text-transform:uppercase;
  }

  .overlay-tag{ font-size:12px; }
  .overlay-name{ font-size:clamp(28px,4vw,42px); line-height:1.05; margin:0; }
  .overlay-bio{
    font-size:14px; color:var(--muted); line-height:1.6;
    max-width:100%; width:100%; margin:0;
    text-align:left;
  }
  .bio-desc{
    white-space:pre-line;
    margin-bottom:28px;
  }
  .bio-areas{
    border-top:1px solid var(--line);
    padding-top:24px;
  }
  .bio-areas-title{
    font-family:var(--f-serif); font-style:italic; font-weight:400;
    font-size:clamp(20px,3vw,28px);
    letter-spacing:-.01em;
    color:var(--fg);
    margin:0 0 18px;
  }
  .bio-areas-list{
    display:flex; flex-direction:column; gap:10px;
  }
  .bio-areas-list span{
    font-family:var(--f-display);
    font-size:13px; font-weight:400; letter-spacing:-.005em;
    color:var(--muted);
    line-height:1.5;
    padding-left:16px;
    border-left:2px solid var(--line-hi);
    transition: border-color .25s, color .25s;
  }
  .bio-areas-list span:hover{
    border-color:var(--fg);
    color:var(--fg);
  }