/* mattfolio — sistema visual compartido */

/* Instrument Serif — autohospedada (sin dependencia de Google Fonts) */
@font-face{
  font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('../assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('../assets/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --bg:#0a0a0f;
  --bg-2:#0e0e15;
  --surface:rgba(255,255,255,.035);
  --ink:#ecebe6;
  --ink-dim:rgba(236,235,230,.55);
  --ink-faint:rgba(236,235,230,.28);
  --line:rgba(236,235,230,.12);
  --blue:#2563ff;
  --serif:'Instrument Serif', Georgia, serif; /* solo palabras puntuales */
  --sans:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  --mono:ui-monospace, 'SF Mono', 'Menlo', monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--blue);color:#fff}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
em.pt{font-family:var(--serif);font-style:italic;font-weight:400}

/* ---------- grano de película ---------- */
.grain{
  position:fixed;inset:-50%;width:200%;height:200%;
  pointer-events:none;z-index:200;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}20%{transform:translate(-12%,3%)}
  30%{transform:translate(6%,-10%)}40%{transform:translate(-4%,12%)}50%{transform:translate(-10%,4%)}
  60%{transform:translate(10%,0)}70%{transform:translate(0,10%)}80%{transform:translate(-12%,0)}90%{transform:translate(8%,4%)}
}
@media (prefers-reduced-motion: reduce){.grain{animation:none}}

/* ---------- tipografía ---------- */
.label{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:500;
}
.prompt-line{font-weight:300;color:var(--ink-dim)}
.prompt-line .slash{color:var(--blue);font-weight:400}

/* ---------- navegación ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 4vw;
  mix-blend-mode:difference;
}
.nav .nav-logo svg{height:20px;width:auto;display:block}
.nav .nav-logo svg *{fill:#fff}
.nav-right{display:flex;gap:28px;align-items:center}
.nav-right a{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  opacity:.65;transition:opacity .3s;font-weight:500;
}
.nav-right a:hover{opacity:1}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- imagen fallida (asset faltante): placeholder sutil, sin ícono roto ---------- */
.img-failed{
  background:
    repeating-linear-gradient(135deg, rgba(236,235,230,.022) 0 13px, rgba(236,235,230,0) 13px 26px),
    var(--bg-2);
  border:1px solid var(--line);
}
.img-failed::after{content:'';display:block}

/* ---------- transición de página ---------- */
.page-fade{
  position:fixed;inset:0;background:var(--bg);z-index:300;
  opacity:0;pointer-events:none;transition:opacity .45s ease;
}
.page-fade.on{opacity:1;pointer-events:all}

/* ---------- footer / contacto ---------- */
.footer{
  border-top:1px solid var(--line);
  padding:110px 4vw 50px;
  display:flex;flex-direction:column;gap:34px;align-items:flex-start;
}
.footer .footer-logo{height:26px;filter:invert(.92)}
.footer .footer-head{
  font-weight:600;letter-spacing:-.02em;
  font-size:clamp(36px,5.4vw,82px);line-height:1.04;text-wrap:balance;
}
.footer .footer-head em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--blue)}
.footer .big-mail{
  font-weight:300;font-size:clamp(20px,2.6vw,34px);
  color:var(--ink-dim);transition:color .3s;
}
.footer .big-mail:hover{color:var(--blue)}
.footer-links{display:flex;gap:26px;flex-wrap:wrap}
.footer-links a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);transition:color .3s;font-weight:500}
.footer-links a:hover{color:var(--ink)}
.footer-base{
  width:100%;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-faint);padding-top:50px;
}