:root {
  --bg:#0a0a0a; --white:#fff; --card:#141414; --gray:#a3a3a3;
  --black:#0a0a0a; --muted-dark:#737373; --border-light:rgba(10,10,10,.1);
  --font:'Instrument Sans',sans-serif;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html,body { width:100%;max-width:100%;overflow-x:hidden; }
body { margin:0;background:var(--bg);color:#fff;font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; }
h1,h2,h3,h4,h5,h6,p { margin:0; }
h1,h2,h3,h4,h5,h6 { letter-spacing:-.04em;text-wrap:balance; }
a { color:inherit;text-decoration:none; }
button { font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0; }
img,svg { display:block;max-width:100%; }
::selection { background:#fff;color:#0a0a0a; }
::-webkit-scrollbar { width:6px; }::-webkit-scrollbar-track { background:var(--bg); }::-webkit-scrollbar-thumb { background:#262626;border-radius:10px; }
[hidden] { display:none!important; }
:focus-visible { outline:2px solid currentColor;outline-offset:4px; }

/* 01 · Barra superior */
.navbar { position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:24px;mix-blend-mode:difference;color:#fff; }
.navbar-brand { font-weight:700;font-size:20px;line-height:28px;letter-spacing:-.05em;text-transform:uppercase; }
.nav-actions { display:flex;align-items:center;gap:24px; }
.nav-contact,.language-toggle { font-size:12px;line-height:16px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;transition:opacity .2s;white-space:nowrap; }
.language-toggle { border:1px solid rgba(255,255,255,.2);padding:6px 12px;border-radius:999px; }
.nav-contact:hover,.language-toggle:hover { opacity:.6; }

/* 02 · Hero */
.hero { position:relative;display:flex;min-height:100svh;flex-direction:column;justify-content:center;overflow:hidden;padding-top:96px; }
.hero-copy { margin-bottom:40px;padding:0 24px; }
.hero h1 { margin-bottom:16px;font-size:48px;line-height:1;letter-spacing:-.05em;font-weight:700; }
.hero h1 em { color:var(--gray);font-style:italic;font-weight:400; }
.hero-subtitle {font-size:18px;line-height:28px;color:var(--gray);text-wrap:pretty; }
.appear { animation:come-in .8s ease-out both; }
@keyframes come-in { from { opacity:0;transform:translateY(20px); } to { opacity:1;transform:translateY(0); } }

/* 03 · Portfolio horizontal, 2 filas de 20 proyectos, repetidos en JS para el bucle */
.portfolio { width:100%;animation:fade-in 1s .4s both; }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
.marquee-viewport { position:relative;width:100%;overflow:hidden;padding:12px 0; }
.marquee-track { display:flex;width:max-content;--loop-distance:6720px;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform; }
.marquee-left { animation-name:marquee-left;animation-duration:90s; }
.marquee-right { animation-name:marquee-right;animation-duration:100s; }
@keyframes marquee-left { from { transform:translateX(0); } to { transform:translateX(calc(-1 * var(--loop-distance))); } }
@keyframes marquee-right { from { transform:translateX(calc(-1 * var(--loop-distance))); } to { transform:translateX(0); } }
.project-card { position:relative;flex:0 0 auto;display:block;overflow:hidden;width:320px;height:213px;margin:0 8px;text-align:left;border-radius:12px;background:var(--card);outline:1px solid #2e2e2e;outline-offset:-1px;transition:transform .4s cubic-bezier(.25,1,.5,1),box-shadow .4s cubic-bezier(.25,1,.5,1); }
.project-card img { width:100%;height:100%;object-fit:cover;filter:grayscale(30%);transition:filter .5s; }
.project-overlay { position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;background:linear-gradient(to top,rgba(0,0,0,.7),transparent,transparent);opacity:0;transition:opacity .3s; }
.project-overlay strong { font-size:14px;line-height:20px;font-weight:700;letter-spacing:-.025em;text-transform:uppercase; }
.project-overlay small { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;color:var(--gray);font-size:12px;line-height:16px; }
.project-card:hover .project-overlay,.project-card:focus-visible .project-overlay { opacity:1; }
.project-card:hover img,.project-card:focus-visible img { filter:grayscale(0%); }
@media (hover:hover) and (pointer:fine) { .project-card:hover { transform:scale(1.03) translateY(-6px);box-shadow:0 20px 50px -12px rgba(0,0,0,.6);z-index:2; } }
.scroll-indicator { display:flex;justify-content:center;margin-top:48px;padding-bottom:48px; }
.scroll-link { display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer; }
.scroll-link span:first-child { font-size:10px;font-weight:400;line-height:15px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-dark); }
.line-gradient { width:1px;height:48px;background:linear-gradient(to bottom,#fff,transparent);transition:height .5s; }
.scroll-link:hover .line-gradient { height:80px; }

/* 04 · Sobre mí */
.info { display:flex;min-height:100vh;flex-direction:column;justify-content:center;background:#fff;color:var(--black);padding:96px 24px;scroll-margin-top:0; }
.info-grid { display:grid;grid-template-columns:minmax(0,1fr);gap:64px;max-width:1152px;width:100%;margin:0 auto; }
.label-small { margin-bottom:32px;font-size:12px;line-height:16px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:rgba(10,10,10,.4); }
.about-lead { font-size:24px;line-height:1.1;letter-spacing:-.025em;font-weight:500;text-wrap:pretty; }
.about-lead span { color:rgba(10,10,10,.4); }
.about-detail { margin-top:22px;max-width:640px;font-size:14px;line-height:1.7;color:rgba(10,10,10,.58); }
.info-columns { display:grid;grid-template-columns:1fr;gap:32px;margin-top:48px;font-size:14px;line-height:20px; }
.info-columns h3 { margin-bottom:16px;font-size:14px;line-height:20px;font-weight:700;letter-spacing:-.05em;text-transform:uppercase; }
.info-columns ul { margin:0;padding:0;list-style:none; }
.info-columns li { margin-bottom:8px;color:rgba(10,10,10,.6); }
.info-columns p { color:rgba(10,10,10,.6);line-height:1.625; }
.contact-panel { display:flex;flex-direction:column;justify-content:space-between;border-top:1px solid rgba(10,10,10,.1);padding-top:48px; }
.contact-email { display:inline-block;max-width:100%;overflow-wrap:anywhere;font-size:20px;line-height:28px;font-weight:700;letter-spacing:-.04em;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:8px;transition:text-decoration-color .2s; }
.contact-email:hover { text-decoration-color:currentColor; }
.contact-phone { margin-top:8px;color:rgba(10,10,10,.6);font-size:14px;line-height:20px; }
.socials { display:grid;gap:12px;margin-top:32px; }
.socials a { display:block;width:max-content;max-width:100%;font-size:16px;line-height:24px;transition:transform .3s; }
.socials a:hover { transform:translateX(8px); }
.location { margin-top:64px; }
.location-label { font-size:10px;line-height:15px;letter-spacing:.2em;text-transform:uppercase;color:rgba(10,10,10,.3); }
.location>p:nth-child(2) { font-size:14px;line-height:20px;font-weight:500; }
.international { margin-top:8px;font-size:12px;line-height:18px;color:rgba(10,10,10,.5); }

/* 05 · Footer */
.footer { display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;padding:24px;border-top:1px solid rgba(10,10,10,.05);background:#fff;color:rgba(10,10,10,.4);font-size:10px;line-height:15px;text-transform:uppercase;letter-spacing:.2em; }

/* 06 · Visor modal con controles accesibles */
.glass-overlay { background:rgba(10,10,10,.85);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); }
.lightbox { position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;animation:fade-in .2s ease-out both; }
.lightbox-panel { position:relative;display:flex;flex-direction:column;align-items:center;max-width:1024px;width:100%;max-height:90vh;animation:modal-appear .25s ease-out both; }
@keyframes modal-appear { from { transform:scale(.92);opacity:0; } to { transform:scale(1);opacity:1; } }
.lightbox-image { width:100%;max-height:75vh;object-fit:contain;border-radius:12px; }
.lightbox-caption { margin-top:16px;text-align:center; }
.lightbox-caption h3 { color:#fff;font-size:18px;line-height:28px;font-weight:700;letter-spacing:-.025em;text-transform:uppercase; }
.lightbox-caption p { margin-top:4px;max-width:512px;color:var(--gray);font-size:14px;line-height:20px; }
.lightbox-close,.lightbox-prev,.lightbox-next { position:absolute;z-index:10;display:flex;justify-content:center;align-items:center;width:36px;height:36px;border-radius:999px;background:#262626;transition:background .2s; }
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover { background:#333; }
.lightbox-close svg,.lightbox-prev svg,.lightbox-next svg { height:20px;width:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.lightbox-close { top:-48px;right:0; }
.lightbox-prev { left:0;top:50%;transform:translate(-8px,-50%); }
.lightbox-next { right:0;top:50%;transform:translate(8px,-50%); }
body.lightbox-open { overflow:hidden; }

/* 07 · Scroll reveals: activación progresiva sin ocultar contenido si JS no corre */
.reveal { opacity:1;transform:none; }
html.js .reveal { opacity:0;transform:translateY(30px);transition:opacity .7s ease var(--delay,0ms),transform .7s ease var(--delay,0ms); }
html.js .reveal.is-visible { opacity:1;transform:translateY(0); }

/* 08 · Breakpoints */
@media (min-width:640px) {
  .info-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer { flex-direction:row; }
}
@media (min-width:768px) {
  .hero h1 { font-size:96px; }
  .info { padding-top:128px;padding-bottom:128px; }
  .info-grid { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .about { grid-column:span 7; }
  .contact-panel { grid-column:span 5;border-top:0;border-left:1px solid rgba(10,10,10,.1);padding-top:0;padding-left:64px; }
  .about-lead { font-size:36px;line-height:1.1; }
  .contact-email { font-size:24px;line-height:32px; }
  .lightbox { padding:32px; }
  .lightbox-close { top:16px;right:16px; }
  .lightbox-prev { transform:translate(-56px,-50%); }
  .lightbox-next { transform:translate(56px,-50%); }
}
@media (max-width:480px) {
  .nav-actions { gap:14px; }
  .navbar { padding:20px 18px; }
  .navbar-brand { font-size:18px; }
  .nav-contact,.language-toggle { font-size:10px; }
  .hero-copy { padding-left:20px;padding-right:20px; }
  .hero h1 { font-size:clamp(36px,12.2vw,48px); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .portfolio,.appear { animation:none; }
  .marquee-track { animation:none; }
  html.js .reveal { opacity:1;transform:none;transition:none; }
  .line-gradient { transition:none; }
}