:root{
    --bg:#15161a;
    --surface:#1d1e22;
    --surface-2:#26282c;
    --ink:#edeeea;
    --ink-muted:#93959b;
    --lime:#c8ff3d;
    --lime-dim:#7fa82a;
    --lime-glow:rgba(200,255,61,0.14);
    --green:#28461f;
    --green-glow:rgba(58,120,38,0.4);
    --hairline:#2e3034;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"Manrope",system-ui,-apple-system,sans-serif;
    -webkit-font-smoothing:antialiased;
  }

  .display{font-family:"Unbounded","Manrope",system-ui,sans-serif;}
  .mono{font-family:"Space Mono","Courier New",monospace;}

  h1,h2,h3{text-wrap:balance;margin:0;}
  p{margin:0;}
  a{color:inherit;text-decoration:none;}
  ul{margin:0;padding:0;list-style:none;}
  img{max-width:100%;}

  /* interactive scanner background — dot grid + trailing glow */
  #bgcanvas{position:fixed;inset:0;z-index:0;display:block;pointer-events:none;}

  /* ambient background — dark green vector motif */
  .ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
  .ambient svg{position:absolute;top:-10%;right:-6%;width:min(64vw,760px);height:auto;opacity:0.55;transition:transform 0.25s ease-out;}
  .ambient .ring{fill:none;stroke:var(--green);stroke-width:1;}
  .ambient .sweep{fill:none;stroke:var(--lime-dim);stroke-width:1.4;stroke-dasharray:2 14;opacity:0.55;transform-origin:560px 180px;}
  .ambient .cross line{stroke:var(--green);stroke-width:1;}
  @media (prefers-reduced-motion:no-preference){
    .ambient .sweep{animation:spin 34s linear infinite;}
  }
  @keyframes spin{to{transform:rotate(360deg);}}

  .wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,56px);}

  /* corner-bracket motif */
  .bracketed{position:relative;}
  .bracketed::before,.bracketed::after,.bracketed .bk-tr,.bracketed .bk-br{
    content:"";position:absolute;width:20px;height:20px;
    border:2px solid var(--lime);pointer-events:none;
  }
  .bracketed::before{top:-1px;left:-1px;border-right:none;border-bottom:none;}
  .bracketed::after{bottom:-1px;left:-1px;border-right:none;border-top:none;}
  .bracketed .bk-tr{top:-1px;right:-1px;border-left:none;border-bottom:none;}
  .bracketed .bk-br{bottom:-1px;right:-1px;border-left:none;border-top:none;}

  /* ---------- nav ---------- */
  .site-nav{
    position:sticky;top:0;z-index:2;
    background:rgba(21,22,26,0.86);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--hairline);
  }
  .site-nav .wrap{
    display:flex;align-items:center;justify-content:space-between;
    padding-top:18px;padding-bottom:18px;
  }
  .brand{
    display:flex;align-items:center;gap:10px;
    font-family:"Unbounded",sans-serif;font-weight:700;font-size:14px;
    color:var(--ink);
  }
  .brand .dot{width:7px;height:7px;background:var(--lime);border-radius:50%;}
  .nav-right{display:flex;align-items:center;gap:clamp(18px,3vw,36px);}
  .nav-links{display:flex;gap:clamp(16px,2.6vw,32px);}
  .nav-links a{
    font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
    color:var(--ink-muted);padding:4px 0;border-bottom:1px solid transparent;
    transition:color 0.15s ease,border-color 0.15s ease;
  }
  .nav-links a:hover{color:var(--ink);}
  .nav-links a.active{color:var(--lime);border-color:var(--lime);}

  .menu-toggle{
    display:none;position:relative;z-index:95;
    flex-direction:column;justify-content:center;align-items:stretch;gap:5px;
    width:38px;height:38px;flex:none;
    background:none;border:1px solid var(--hairline);
    cursor:pointer;padding:0 8px;
  }
  .menu-toggle span{display:block;height:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease;}
  .menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .menu-toggle.is-open span:nth-child(2){opacity:0;}
  .menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .lang-switch{display:flex;border:1px solid var(--hairline);}
  .lang-switch button{
    background:none;border:none;color:var(--ink-muted);
    font-family:"Space Mono","Courier New",monospace;
    font-size:11px;letter-spacing:0.06em;
    padding:6px 10px;cursor:pointer;
    transition:color 0.15s ease,background 0.15s ease;
  }
  .lang-switch button + button{border-left:1px solid var(--hairline);}
  .lang-switch button:hover{color:var(--ink);}
  .lang-switch button.active{color:var(--bg);background:var(--lime);}

  /* ---------- hero (home) ---------- */
  .hero{padding:clamp(48px,8vw,88px) 0 clamp(32px,5vw,56px);}
  .hero-frame{
    padding:clamp(28px,5vw,52px) clamp(20px,4vw,40px);
    background:radial-gradient(ellipse 60% 90% at 8% 0%, var(--green-glow), transparent 70%);
  }
  .eyebrow{
    display:flex;align-items:center;gap:10px;
    font-size:12px;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--ink-muted);margin-bottom:20px;
  }
  .eyebrow .tick{color:var(--lime);}
  .name{
    font-weight:800;font-size:clamp(2.4rem,8vw,5.6rem);line-height:0.95;
    letter-spacing:-0.01em;text-transform:uppercase;
  }
  .name span{display:block;}
  .name .accent{color:var(--lime);}
  .hero-foot{
    margin-top:28px;display:flex;flex-wrap:wrap;gap:20px 40px;
    align-items:flex-end;justify-content:space-between;
  }
  .role-line{font-size:clamp(1rem,2vw,1.2rem);color:var(--ink-muted);max-width:46ch;}
  .role-line b{color:var(--ink);font-weight:600;}
  .discipline-tags{display:flex;flex-wrap:wrap;gap:8px;}
  .tag{
    font-size:11px;letter-spacing:0.06em;padding:6px 10px;
    border:1px solid var(--hairline);color:var(--ink-muted);white-space:nowrap;
  }

  /* ---------- section shell ---------- */
  .block{padding:clamp(36px,5vw,64px) 0;border-bottom:1px solid var(--hairline);}
  .block.last{border-bottom:none;}
  .block-head{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(24px,3.4vw,36px);flex-wrap:wrap;}
  .block-index{font-size:12px;color:var(--lime-dim);}
  .block-title{font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:700;letter-spacing:-0.01em;}
  .block-note{font-size:13px;color:var(--ink-muted);margin-left:auto;max-width:34ch;text-align:right;}

  /* ---------- category tiles (home) ---------- */
  .tile-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
  .tile{
    border:1px solid var(--hairline);padding:20px 16px 18px;
    display:block;transition:border-color 0.15s ease,transform 0.15s ease;
  }
  .tile:hover,.tile:focus-visible{border-color:var(--lime);transform:translateY(-2px);}
  .tile-tag{font-size:10px;color:var(--lime-dim);margin-bottom:12px;display:block;}
  .tile-name{font-weight:700;font-size:16px;margin-bottom:4px;}
  .tile-sub{font-size:11px;color:var(--ink-muted);}

  /* ---------- about ---------- */
  .about p{font-size:15px;line-height:1.7;color:var(--ink-muted);max-width:64ch;}
  .about p + p{margin-top:12px;}
  .about b{color:var(--ink);font-weight:600;}

  /* ---------- category page hero ---------- */
  .page-hero{padding:clamp(40px,6vw,64px) 0 clamp(28px,4vw,40px);}
  .back-link{
    display:inline-flex;align-items:center;gap:6px;font-size:12px;
    color:var(--ink-muted);margin-bottom:22px;
  }
  .back-link:hover{color:var(--lime);}
  .page-title{
    font-weight:800;font-size:clamp(2rem,6vw,3.6rem);line-height:0.98;
    text-transform:uppercase;letter-spacing:-0.01em;
  }
  .page-desc{margin-top:16px;font-size:15px;line-height:1.65;color:var(--ink-muted);max-width:58ch;}
  .page-meta{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px;}

  /* ---------- about page ---------- */
  .about-head{display:flex;gap:clamp(24px,4vw,48px);align-items:flex-start;}
  .about-photo{flex:none;width:clamp(140px,22vw,220px);height:clamp(140px,22vw,220px);}
  .about-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .about-head-text{flex:1;min-width:0;padding-top:4px;}
  @media (max-width:640px){
    .about-head{flex-direction:column;}
  }
  .about-copy{
    margin-top:clamp(32px,5vw,48px);padding-top:clamp(28px,4vw,40px);
    border-top:1px solid var(--hairline);
    display:flex;flex-direction:column;gap:20px;
    max-width:72ch;
  }
  .about-copy p{font-size:15px;line-height:1.75;color:var(--ink-muted);}
  .about-copy p:first-child{color:var(--ink);font-size:16px;}

  /* ---------- project grid ---------- */
  .project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .project-card{border:1px solid var(--hairline);}
  .project-visual{
    height:180px;position:relative;
    background:var(--surface);
    background-image:var(--pattern);
    background-size:var(--pattern-size,20px 20px);
  }
  .project-visual .readout{
    position:absolute;left:14px;bottom:12px;
    font-size:11px;color:var(--lime-dim);
  }
  .project-body{padding:18px 16px 20px;}
  .project-name{font-weight:700;font-size:16px;margin-bottom:6px;}
  .project-desc{font-size:13px;color:var(--ink-muted);line-height:1.55;margin-bottom:14px;}
  .project-tags{display:flex;flex-wrap:wrap;gap:6px;}
  .ptag{font-size:10px;letter-spacing:0.04em;color:var(--ink-muted);border:1px solid var(--hairline);padding:4px 8px;}

  .example-note{
    font-size:12px;color:var(--ink-muted);margin-bottom:clamp(20px,3vw,28px);
    padding-left:14px;border-left:2px solid var(--green);
  }

  /* ---------- footer ---------- */
  .site-footer{position:relative;z-index:1;border-top:1px solid var(--hairline);}
  .site-footer .wrap{
    padding:28px 0 36px;display:flex;flex-wrap:wrap;
    justify-content:space-between;align-items:center;gap:14px;
  }
  .site-footer a{color:var(--ink);border-bottom:1px solid var(--hairline);}
  .site-footer a:hover{color:var(--lime);border-color:var(--lime);}
  .site-footer .mono{font-size:12px;color:var(--ink-muted);}

  @media (max-width:820px){
    .tile-row{grid-template-columns:repeat(2,1fr);}
    .project-grid{grid-template-columns:1fr;}
  }
  @media (max-width:760px){
    .site-nav{backdrop-filter:none;}
    .menu-toggle{display:flex;}
    .nav-right{
      display:none;
      position:fixed;inset:0;
      flex-direction:column;
      align-items:flex-start;
      justify-content:flex-start;
      gap:36px;
      padding:110px 24px 40px;
      background:var(--bg);
      z-index:90;overflow-y:auto;
    }
    .nav-right.mobile-open{display:flex;}
    .nav-links{flex-direction:column;gap:22px;}
    .nav-links a{font-size:22px;}
    .lang-switch button{padding:10px 16px;font-size:13px;}
  }
  @media (max-width:640px){
    .block-note{display:none;}
  }

  @media (prefers-reduced-motion:no-preference){
    .name span{opacity:0;transform:translateY(14px);animation:rise 0.6s ease forwards;}
    .name span:nth-child(2){animation-delay:0.08s;}
    .name span:nth-child(3){animation-delay:0.16s;}
    @keyframes rise{to{opacity:1;transform:translateY(0);}}
  }

  :focus-visible{outline:2px solid var(--lime);outline-offset:2px;}
  /* headings get tabindex="-1" only for the route-change focus-management
     trick (screen reader announcements) — suppress the visual ring there,
     it isn't real keyboard focus */
  h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none;}

  /* ---------- page transition — IGC monogram spin-in ---------- */
  .page-transition{
    position:fixed;inset:0;z-index:100;
    background:var(--bg);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;
    transition:opacity 0.22s ease;
  }
  .page-transition.is-active{opacity:1;pointer-events:auto;}
  .pt-letters{
    display:flex;gap:clamp(4px,1vw,10px);
    font-weight:800;
    font-size:clamp(3rem,11vw,6.5rem);
    line-height:1;
  }
  .pt-letter{
    display:inline-block;
    color:var(--lime);
    opacity:0;
    transform:rotate(-220deg) scale(0.25);
  }
  .page-transition.is-active .pt-letter{
    animation:pt-spin-in 0.62s cubic-bezier(.22,.85,.25,1) forwards;
  }
  .page-transition.is-active .pt-i{animation-delay:0s;}
  .page-transition.is-active .pt-g{animation-delay:0.09s;color:var(--ink);}
  .page-transition.is-active .pt-c{animation-delay:0.18s;color:var(--lime-dim);}
  @keyframes pt-spin-in{
    0%{opacity:0;transform:rotate(-220deg) scale(0.25);}
    55%{opacity:1;transform:rotate(24deg) scale(1.18);}
    100%{opacity:1;transform:rotate(0deg) scale(1);}
  }
  @media (prefers-reduced-motion:reduce){
    .page-transition{display:none;}
  }

  /* ---------- web: map-pattern featured visual (no live embed available) ---------- */
  .featured-media.pattern{
    position:relative;
    background-color:var(--surface);
    background-image:
      radial-gradient(6px 6px at 28% 32%, var(--lime) 0, var(--lime) 40%, transparent 42%),
      radial-gradient(6px 6px at 60% 54%, var(--green) 0, var(--green) 42%, transparent 44%),
      radial-gradient(6px 6px at 42% 72%, var(--lime-dim) 0, var(--lime-dim) 40%, transparent 42%),
      radial-gradient(6px 6px at 76% 28%, var(--lime) 0, var(--lime) 40%, transparent 42%),
      radial-gradient(6px 6px at 82% 68%, var(--lime-dim) 0, var(--lime-dim) 40%, transparent 42%),
      linear-gradient(var(--hairline) 1px, transparent 1px),
      linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
    background-size:auto,auto,auto,auto,auto,24px 24px,24px 24px;
  }
  .featured-media.pattern .readout{position:absolute;left:14px;bottom:12px;font-size:11px;color:var(--lime-dim);}

  /* ---------- lightbox ---------- */
  .gallery img,.featured-media img,.detail-hero-media img,.video-tile video{cursor:zoom-in;}
  .lightbox-overlay{
    position:fixed;inset:0;z-index:50;
    background:rgba(0,0,0,0.82);
    display:flex;align-items:center;justify-content:center;
    padding:clamp(16px,5vw,56px);
    opacity:0;pointer-events:none;
    transition:opacity 0.22s ease;
  }
  .lightbox-overlay.is-open{opacity:1;pointer-events:auto;}
  .lightbox-overlay img,.lightbox-overlay video{
    max-width:100%;max-height:100%;
    object-fit:contain;
    box-shadow:0 24px 64px rgba(0,0,0,0.5);
    transform:scale(0.94);
    transition:transform 0.22s ease;
    cursor:zoom-out;
  }
  .lightbox-overlay.is-open img,.lightbox-overlay.is-open video{transform:scale(1);}
  @media (prefers-reduced-motion:reduce){
    .lightbox-overlay,.lightbox-overlay img{transition:none;}
  }

  /* ---------- featured project (videojuegos list) ---------- */
  .featured-card{
    display:grid;grid-template-columns:1.1fr 1fr;gap:0;
    border:1px solid var(--hairline);overflow:hidden;
  }
  .featured-media{position:relative;min-height:260px;}
  .featured-media img{width:100%;height:100%;object-fit:cover;display:block;}
  .featured-body{padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;justify-content:center;}
  .featured-eyebrow{font-size:11px;letter-spacing:0.1em;color:var(--lime-dim);margin-bottom:12px;}
  .featured-title{font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:12px;}
  .featured-desc{font-size:14px;line-height:1.65;color:var(--ink-muted);margin-bottom:18px;max-width:52ch;}
  .featured-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
  .featured-link{
    display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:0.06em;
    text-transform:uppercase;color:var(--lime);border-bottom:1px solid var(--lime);width:fit-content;
    padding-bottom:2px;
  }
  .more-note{margin-top:16px;font-size:12px;color:var(--ink-muted);}

  /* ---------- project detail (The Village) ---------- */
  .detail-hero-media{
    border:1px solid var(--hairline);overflow:hidden;margin-top:28px;
  }
  .detail-hero-media img{width:100%;display:block;}
  .gallery{
    display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  }
  .gallery img{width:100%;height:220px;object-fit:cover;display:block;border:1px solid var(--hairline);}
  .process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  .video-tile{position:relative;border:1px solid var(--hairline);}
  .video-tile video{width:100%;height:170px;object-fit:cover;display:block;background:var(--surface);}
  .vid-label{
    position:absolute;left:10px;bottom:10px;font-size:10px;letter-spacing:0.04em;
    color:var(--ink);background:rgba(21,22,26,0.72);padding:4px 8px;
  }
  @media (max-width:820px){
    .featured-card{grid-template-columns:1fr;}
    .featured-media{min-height:200px;}
    .gallery{grid-template-columns:repeat(2,1fr);}
    .process-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:520px){
    .gallery{grid-template-columns:1fr;}
    .process-grid{grid-template-columns:1fr;}
  }

  /* ---------- La Tribunona gallery (2 columns, native aspect ratio) ---------- */
  .gallery.cols-2{grid-template-columns:repeat(2,1fr);}
  .gallery-item{border:1px solid var(--hairline);background:var(--surface);}
  .gallery-item img{width:100%;height:auto;display:block;}
  .gallery-item figcaption{padding:8px 12px;font-size:11px;color:var(--ink-muted);border-top:1px solid var(--hairline);}
  @media (max-width:520px){
    .gallery.cols-2{grid-template-columns:1fr;}
  }

  /* ---------- videojuegos: subcategory thumb grid ---------- */
  .thumb-grid{display:grid;gap:16px;}
  .thumb-grid.cols-2{grid-template-columns:repeat(2,1fr);}
  .thumb-grid.cols-3{grid-template-columns:repeat(3,1fr);}
  .thumb-card{display:block;border:1px solid var(--hairline);transition:border-color 0.15s ease,transform 0.15s ease;}
  .thumb-card:hover,.thumb-card:focus-visible{border-color:var(--lime);transform:translateY(-2px);}
  .thumb-media{aspect-ratio:16/9;overflow:hidden;background:var(--surface);}
  .thumb-media img{width:100%;height:100%;object-fit:cover;display:block;}
  .thumb-body{padding:14px 16px 16px;}
  .thumb-eyebrow{font-size:10px;letter-spacing:0.04em;color:var(--lime-dim);margin-bottom:8px;display:block;}
  .thumb-title{font-weight:700;font-size:15px;margin-bottom:4px;}
  .thumb-desc{font-size:12px;color:var(--ink-muted);line-height:1.5;}
  @media (max-width:820px){
    .thumb-grid.cols-3{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:560px){
    .thumb-grid.cols-2,.thumb-grid.cols-3{grid-template-columns:1fr;}
  }

  /* ---------- video: youtube cards (click to load) ---------- */
  .video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .video-card{border:1px solid var(--hairline);}
  .video-media{position:relative;display:block;width:100%;aspect-ratio:16/9;background:var(--surface);cursor:pointer;overflow:hidden;}
  .video-media img{width:100%;height:100%;object-fit:cover;display:block;}
  .play-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
  .play-badge::before{
    content:"";width:0;height:0;
    border-style:solid;border-width:11px 0 11px 18px;
    border-color:transparent transparent transparent var(--lime);
    filter:drop-shadow(0 2px 6px rgba(0,0,0,0.5));
    transition:transform 0.15s ease;
  }
  .video-card:hover .play-badge::before{transform:scale(1.1);}
  .video-media.no-thumb{background-image:repeating-linear-gradient(115deg, var(--hairline) 0 1px, transparent 1px 26px);}
  .video-media.no-thumb .no-thumb-label{position:absolute;left:12px;bottom:12px;font-size:11px;color:var(--ink-muted);}
  .video-body{padding:14px 16px 16px;}
  .video-eyebrow{font-size:10px;letter-spacing:0.06em;color:var(--lime-dim);margin-bottom:6px;display:block;}
  .video-title{font-weight:700;font-size:14px;line-height:1.4;}
  @media (max-width:820px){.video-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.video-grid{grid-template-columns:1fr;}}

  /* ---------- contact ---------- */
  .contact-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4vw,56px);}
  .contact-intro p{font-size:15px;line-height:1.65;color:var(--ink-muted);max-width:52ch;margin-bottom:24px;}
  .contact-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px;}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--lime);color:var(--bg);
    font-family:"Unbounded",sans-serif;font-weight:700;font-size:13px;
    padding:14px 22px;border:none;cursor:pointer;
    transition:transform 0.15s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-note{font-size:12px;color:var(--ink-muted);margin-top:10px;}
  .form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
  .form-field label{font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-muted);}
  .form-field input,.form-field textarea{
    background:var(--surface);border:1px solid var(--hairline);color:var(--ink);
    padding:12px 14px;font-family:"Manrope",sans-serif;font-size:14px;
    outline:none;
  }
  .form-field input:focus,.form-field textarea:focus{border-color:var(--lime);}
  .form-field textarea{resize:vertical;min-height:120px;}
  .form-note{font-size:12px;color:var(--ink-muted);margin-top:4px;}
  @media (max-width:820px){
    .contact-grid{grid-template-columns:1fr;}
    .contact-tiles{grid-template-columns:repeat(3,1fr);}
  }
  @media (max-width:520px){
    .contact-tiles{grid-template-columns:1fr 1fr;}
  }