/* Modo Malla: la web vista como el visor de un programa 3D */
:root{--vp:#232427;--wire:#7F868F;--wire-hi:#D7DBE0;--sel:#FF8A2B}

/* Interruptor Render / Malla */
.nav{align-items:center;min-height:35px}
.mode{display:inline-flex;align-items:center;gap:0;padding:3px;border-radius:999px;border:1.5px solid currentColor;background:transparent;cursor:pointer;font:500 14px 'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;color:inherit;position:relative;min-height:32px}
.mode span{position:relative;z-index:1;padding:5px 10px;min-width:44px;text-align:center;border-radius:999px;transition:color .3s}
.mode::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:#0F0F0F;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.mode span:first-child{color:#FFFFFF}
html.mesh .mode::before{transform:translateX(100%);background:var(--sel)}
html.mesh .mode span:first-child{color:var(--wire-hi)}
html.mesh .mode span:last-child{color:#0F0F0F !important}
.mode:focus-visible{outline:2px solid #FF4A1C;outline-offset:3px}

/* Fondo de visor con retícula */
html.mesh,html.mesh body{background-color:var(--vp) !important}
html.mesh body{
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px) !important;
  background-size:24px 24px,24px 24px,120px 120px,120px 120px !important;background-attachment:fixed !important}
html.mesh body *{color:var(--wire-hi) !important;border-color:var(--wire) !important;box-shadow:none !important;text-shadow:none !important}
html.mesh section,html.mesh header,html.mesh footer,html.mesh main,html.mesh #intro,html.mesh .top,html.mesh .filters-bar,html.mesh .panel{background:transparent !important;backdrop-filter:none !important}
html.mesh .top,html.mesh .filters-bar{background:rgba(35,36,39,.85) !important}
html.mesh .panel{background:var(--vp) !important;outline:1px solid var(--wire)}

/* Titulares en línea */
/* Texto: relleno para leer bien y solo algunas piezas en alambre, combinadas */
html.mesh h1 .line:nth-child(2),html.mesh h1 .line:nth-child(2) *,html.mesh .big-row:not(.fill) span,html.mesh .stats b{color:transparent !important;-webkit-text-stroke:1px var(--wire-hi)}
html.mesh h1 em,html.mesh h1 .line:nth-child(n) em{color:var(--sel) !important;-webkit-text-stroke:0}
html.mesh .big-row.fill span{color:transparent !important;-webkit-text-stroke:1px var(--sel)}
html.mesh .k,html.mesh .facet-n,html.mesh .dot,html.mesh .q-tag,html.mesh .facet-line,html.mesh .mark,html.mesh .q-bar.on i{color:var(--sel) !important;border-color:var(--sel) !important}
html.mesh .facet-line,html.mesh .progress i,html.mesh .q-bar.on i{background:var(--sel) !important}

/* Cajas y piezas como mallas: contorno y diagonales */
html.mesh .media,html.mesh .media .inner,html.mesh .about-photo,html.mesh .collab div,html.mesh .tile,html.mesh .tile .art,html.mesh .strip .tile{background:transparent !important;outline:1px solid var(--wire);outline-offset:-1px}
html.mesh .media .inner,html.mesh .about-photo,html.mesh .tile .art{
  background-image:linear-gradient(to top right,transparent calc(50% - .6px),var(--wire) 50%,transparent calc(50% + .6px)),linear-gradient(to bottom right,transparent calc(50% - .6px),var(--wire) 50%,transparent calc(50% + .6px)) !important;
  -webkit-mask:none !important;mask:none !important}
html.mesh .tile .art::after{background:var(--wire-hi) !important}
html.mesh .tile .cap{background:rgba(35,36,39,.9) !important}
/* Imágenes a plena opacidad, enmarcadas como objetos seleccionados */
html.mesh img{opacity:1;filter:none}
html.mesh .about-photo{outline:1px solid var(--sel) !important;background-image:none !important}
html.mesh canvas[data-light]{opacity:1}

/* Detalles en naranja: etiquetas, fechas, cifras y metadatos, como los datos de un programa 3D */
html.mesh p.mono,html.mesh h3.mono,html.mesh .card-row .mono,html.mesh .talks span.mono,html.mesh .cv li b,
html.mesh .cv summary i,html.mesh .q-count,html.mesh .q-who,html.mesh .collab em,html.mesh .ticker .dot,
html.mesh .kind,html.mesh .tile .ph,html.mesh .media .tag,html.mesh .filters button i,html.mesh .stats span,
html.mesh .brief legend,html.mesh .brief label,html.mesh .brief-out .mono,html.mesh .slot:not(.empty),
html.mesh .facet-n,html.mesh .k,html.mesh .q-tag,html.mesh .nav a:hover,html.mesh .nav a[aria-current],
html.mesh .cv summary:hover span,html.mesh .card:hover strong,html.mesh dt{color:var(--sel) !important}
html.mesh .stats b,html.mesh .cta h2 em{-webkit-text-stroke-color:var(--sel)}
html.mesh .svc li,html.mesh .talks li,html.mesh .cv details,html.mesh .facet li{border-color:#3A3D42 !important}
html.mesh .svc li:hover strong,html.mesh .talks li:hover strong{color:var(--sel) !important}
/* Un punto naranja de vértice delante de cada título de sección */
html.mesh h2{position:relative}
html.mesh h2::before{content:"";position:absolute;left:-.42em;top:.42em;width:.16em;height:.16em;background:var(--sel)}

html.mesh .btn,html.mesh .q-btn,html.mesh .filters button,html.mesh .copy,html.mesh .chip,html.mesh .close,html.mesh .nav-p button,html.mesh .brief textarea{background:transparent !important;border:1px solid var(--wire) !important}
html.mesh .btn.solid,html.mesh .filters button[aria-pressed="true"],html.mesh .chip[aria-pressed="true"]{border-color:var(--sel) !important;color:var(--sel) !important}
html.mesh .slot.filled{background:transparent !important;outline:1px solid var(--sel);color:var(--sel) !important}
html.mesh .cta,html.mesh .close,html.mesh .night,html.mesh .how,html.mesh .context{background:transparent !important}
html.mesh .close .btn.solid{background:transparent !important;border-color:var(--sel) !important;color:var(--sel) !important}
html.mesh .cursor{background:var(--sel) !important;color:#0F0F0F !important}

/* Cursor de visor (en los dos modos): retícula, guías que siguen al ratón y coordenadas */
@media (hover:hover) and (pointer:fine){
  body{cursor:crosshair}
  .vp-x,.vp-y{display:block;position:fixed;pointer-events:none;z-index:60;background:#FF4A1C;opacity:.5;transition:opacity .3s}
  .vp-x{left:0;right:0;height:1px;top:0}
  .vp-y{top:0;bottom:0;width:1px;left:0}
  .vp-hud{display:flex;position:fixed;z-index:61;pointer-events:none;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px))}
  .vp-off .vp-x,.vp-off .vp-y{opacity:0}
}
.vp-x,.vp-y,.vp-hud,.vp-tag{display:none}
@media (hover:hover) and (pointer:fine){.vp-x,.vp-y{display:block}.vp-hud{display:flex}}
.vp-hud,.vp-tag{font:500 14px 'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;padding:7px 10px;gap:14px;color:#0F0F0F;background:rgba(255,255,255,.9);border:1px solid #0F0F0F}
.vp-hud b{color:#B8300C;font-weight:500;font-variant-numeric:tabular-nums}
html.mesh .vp-x,html.mesh .vp-y{background:var(--sel);opacity:.45}
html.mesh .vp-hud,html.mesh .vp-tag{color:var(--wire-hi);background:rgba(35,36,39,.9);border-color:var(--wire)}
html.mesh .vp-hud b{color:var(--sel)}
html.mesh .vp-tag{display:flex;position:fixed;z-index:61;pointer-events:none;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px))}

/* Lente del modo Render: alrededor del puntero se ve la retícula del visor, en tonos claros y con el borde difuminado */
.vp-lens{display:none;position:fixed;inset:0;pointer-events:none;z-index:59;opacity:1;transition:opacity .6s ease;
    background-image:linear-gradient(rgba(140,140,140,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(140,140,140,.17) 1px,transparent 1px),linear-gradient(rgba(140,140,140,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(140,140,140,.3) 1px,transparent 1px);
    background-size:24px 24px,24px 24px,120px 120px,120px 120px;
    -webkit-mask-image:radial-gradient(circle var(--lr,150px) at var(--mx,-999px) var(--my,-999px),rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 40%,transparent 100%);
            mask-image:radial-gradient(circle var(--lr,150px) at var(--mx,-999px) var(--my,-999px),rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 40%,transparent 100%)}
/* En pantallas táctiles la retícula aparece bajo el dedo mientras toca o desliza, y se desvanece al soltar */
@media (hover:none),(pointer:coarse){
  .vp-lens{display:block;opacity:0;--lr:130px;transition:opacity .7s ease;
    background-image:linear-gradient(rgba(120,120,120,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(120,120,120,.24) 1px,transparent 1px),linear-gradient(rgba(120,120,120,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(120,120,120,.4) 1px,transparent 1px)}
  .vp-touch .vp-lens{opacity:1;transition:opacity .12s ease}
  html.mesh .vp-lens,.vp-img .vp-lens{opacity:0 !important}
  .vp-accent .vp-lens{background-image:linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px)}
}
@media (hover:hover) and (pointer:fine){
  .vp-lens{display:block;
    background-image:linear-gradient(rgba(140,140,140,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(140,140,140,.17) 1px,transparent 1px),linear-gradient(rgba(140,140,140,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(140,140,140,.3) 1px,transparent 1px);
    background-size:24px 24px,24px 24px,120px 120px,120px 120px;
    -webkit-mask-image:radial-gradient(circle var(--lr,150px) at var(--mx,-999px) var(--my,-999px),rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 40%,transparent 100%);
            mask-image:radial-gradient(circle var(--lr,150px) at var(--mx,-999px) var(--my,-999px),rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 40%,transparent 100%)}
  html.mesh .vp-lens,.vp-off .vp-lens,.vp-img .vp-lens{opacity:0}
  .vp-accent .vp-lens{background-image:linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px)}
  .vp-accent .vp-x,.vp-accent .vp-y{background:#FFFFFF;opacity:.6}
}
@media (prefers-reduced-motion:reduce){.vp-lens{transition:none}}


/* Pestaña Lab destacada en la cabecera */
.nav a[href$="lab.html"]{display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 10px;margin-block:-4px;border-radius:999px;background:#FFF1EC;color:#B8300C;font-weight:600;transition:background .25s,color .25s}
.nav a[href$="lab.html"]::before{content:"";width:7px;height:7px;border-radius:1.5px;background:#FF4A1C;transform:rotate(45deg);box-shadow:0 0 0 0 rgba(255,74,28,.5);animation:labPulse 2.4s ease-out infinite}
.nav a[href$="lab.html"]:hover,.nav a[href$="lab.html"][aria-current]{background:#FF4A1C;color:#0F0F0F !important}
.nav a[href$="lab.html"]:hover::before,.nav a[href$="lab.html"][aria-current]::before{background:#0F0F0F}
@keyframes labPulse{0%{box-shadow:0 0 0 0 rgba(255,74,28,.55)}70%,100%{box-shadow:0 0 0 7px rgba(255,74,28,0)}}
html.mesh .nav a[href$="lab.html"]{background:transparent !important;outline:1px solid var(--sel);color:var(--sel) !important}
html.mesh .nav a[href$="lab.html"]::before{background:var(--sel)}
@media (prefers-reduced-motion:reduce){.nav a[href$="lab.html"]::before{animation:none}}

/* Menú de móvil */
.menu-btn{display:none}
@media (max-width:860px){
  .top .wrap{flex-wrap:nowrap !important;padding-block:12px !important;gap:16px !important}
  .menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 14px;border-radius:999px;border:1.5px solid currentColor;background:transparent;color:inherit;font:600 16px 'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;cursor:pointer;position:relative;z-index:2;flex:none}
  .menu-ico{position:relative;width:16px;height:10px}
  .menu-ico i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .35s cubic-bezier(.16,1,.3,1),top .35s cubic-bezier(.16,1,.3,1)}
  .menu-ico i:first-child{top:0}.menu-ico i:last-child{top:8.5px}
  .menu-open .menu-ico i:first-child{top:4.25px;transform:rotate(45deg)}
  .menu-open .menu-ico i:last-child{top:4.25px;transform:rotate(-45deg)}
  .menu-btn:focus-visible{outline:2px solid #FF4A1C;outline-offset:3px}
  .top .brand{position:relative;z-index:2}
  .top .nav{display:none !important}
  html.menu-open,html.menu-open body{overflow:hidden}
  html.menu-open .top{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
  html.menu-open .top .nav{display:flex !important;position:fixed;inset:0;z-index:1;flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:4px;
    padding:calc(env(safe-area-inset-top,0px) + 92px) clamp(16px,6vw,40px) calc(env(safe-area-inset-bottom,0px) + 32px);background:#FFFFFF;overflow-y:auto;animation:menuIn .4s cubic-bezier(.16,1,.3,1)}
  html.menu-open .top .nav a{font:700 clamp(30px,9vw,44px)/1.15 'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;letter-spacing:-.02em;padding-block:6px;color:#0F0F0F}
  html.menu-open .top .nav a[href$="lab.html"]{font-size:clamp(30px,9vw,44px);padding:6px 18px 6px 14px;margin:4px 0}
  html.menu-open .top .nav .mode{margin-top:auto;font-size:16px;min-height:44px}
  html.menu-open .top .nav a:last-child{font:500 16px 'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;margin-top:16px;color:#5A5A5A}
  html.mesh.menu-open .top .nav{background:var(--vp)}
  html.mesh.menu-open .top .nav a{color:var(--wire-hi) !important}
}
@keyframes menuIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.top .nav{animation:none !important}.menu-ico i{transition:none}}

/* Transición entre modos */
html.mesh-anim body,html.mesh-anim body *{transition:color .4s ease,background-color .4s ease,border-color .4s ease,opacity .4s ease !important}
@media (hover:none),(pointer:coarse){html.mesh .vp-tag{display:none !important}}
/* Sin marcador de coordenadas en la esquina inferior izquierda */
.vp-hud{display:none !important}