/* JetBrains Mono is self-hosted via fonts/jetbrains-mono.css (linked in index.html). */

/* Noto Sans — variable display font for titles, self-hosted from Google Fonts (latin subset; covers EN/ES/PT). */
@font-face { font-family:"Noto Sans"; src:url("fonts/gf/noto-sans-latin.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; 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:"Space Grotesk"; src:url("fonts/SpaceGrotesk-Regular.ttf")  format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("fonts/SpaceGrotesk-Medium.ttf")   format("truetype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("fonts/SpaceGrotesk-SemiBold.ttf") format("truetype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("fonts/SpaceGrotesk-Bold.ttf")     format("truetype"); font-weight:700; font-display:swap; }

:root{
  --bg:#FBF8F2; --card:#FFFFFF; --border:#ECE4D6; --border-soft:rgba(236,228,214,.5);
  --fg1:#16212E; --fg2:#5B6675;
  --blue:#3B6E9D; --blue-tint-1:#5188B5; --blue-tint-2:#6094C2; --blue-deep:#1D5583;
  --blue-wash:#EEF4FF; --blue-glow:rgba(59,110,157,.30);
  --orange:#FE8C4A; --orange-tint-1:#FFAD60; --orange-tint-2:#FFCC73;
  --font-display:"Noto Sans",sans-serif; --font-body:"Space Grotesk",sans-serif; --font-mono:"JetBrains Mono",monospace;
  --radius-sm:10px; --radius-md:14px; --radius-lg:16px; --radius-pill:9999px;
  --shadow-nav:0 1px 2px rgba(0,0,0,.05);
  --shadow-card:0 4px 20px rgba(22,33,46,.04);
  --shadow-card-hover:0 14px 36px rgba(22,33,46,.09);
  --shadow-glow:0 0 18px var(--blue-glow);
  --maxw:1152px; --gutter:24px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--fg1);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
::selection{background:var(--blue-wash);color:var(--blue-deep);}
a{color:inherit;}
img{max-width:100%;display:block;}
h1,h2,h3,p{margin:0;}
:focus-visible{outline:2px solid var(--blue-deep);outline-offset:3px;border-radius:4px;}
:focus:not(:focus-visible){outline:none;}

/* ---- type helpers ---- */
.mono{font-family:var(--font-mono);font-weight:500;text-transform:uppercase;letter-spacing:.10em;font-size:14px;line-height:1;}
.eyebrow{font-family:var(--font-mono);font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:13px;line-height:1;color:var(--blue);display:inline-block;}
.eyebrow--muted{color:var(--fg2);}
.display{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:var(--fg1);}
.lead{font-family:var(--font-body);color:var(--fg2);}
h2.sec-title{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:var(--fg1);
  font-size:clamp(24px,3.4vw,32px);line-height:1.14;text-wrap:balance;}

/* ---- buttons ---- */
.btn{font-family:var(--font-mono);font-weight:500;font-size:14px;letter-spacing:.10em;text-transform:uppercase;
  border-radius:var(--radius-sm);display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:none;
  transition:all .18s ease;text-decoration:none;white-space:nowrap;line-height:1;}
.btn-primary{background:var(--blue-deep);color:#fff;padding:16px 30px;box-shadow:var(--shadow-glow);}
.btn-primary:hover{background:#16456b;box-shadow:0 0 26px var(--blue-glow);}
.btn-primary:active{transform:translateY(1px);}
.btn-primary.sm{padding:12px 22px;min-height:44px;}
.btn-secondary{background:transparent;color:var(--fg1);padding:14px 28px;border:2px solid var(--border);}
.btn-secondary:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-wash);}
.btn-secondary:active{transform:translateY(1px);}
.btn-secondary.sm{padding:8px 20px;}
.btn-text{font-family:var(--font-mono);font-weight:500;font-size:14px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--fg2);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
  cursor:pointer;background:none;border:none;transition:color .18s;padding:6px 2px;}
.btn-text:hover{color:var(--fg1);}

/* ---- chip ---- */
.chip{font-family:var(--font-mono);font-weight:500;font-size:13px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--fg1);background:#fff;border:1px solid var(--border);border-radius:var(--radius-pill);padding:8px 16px;line-height:1;}

/* ---- card ---- */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-card);
  transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease;}
.card.hoverable:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px);border-color:#E2D8C6;}

.icon{display:inline-flex;}
.icon svg{display:block;width:100%;height:100%;}
.material-symbols-rounded{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;
  line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased;vertical-align:middle;}

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

/* ===========================================================
   SPOTLIGHT — subtle blue glow that follows the cursor
   =========================================================== */
.spotlight{position:fixed;inset:0;z-index:0;pointer-events:none;transition:background .15s ease;}
@media (prefers-reduced-motion:reduce){.spotlight{display:none;}}

/* ===========================================================
   TWO-COLUMN LAYOUT (Brittany-Chiang style)
   =========================================================== */
.layout{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.col-left{padding:72px 0 32px;}
.col-right{padding:0;}

@media (min-width:1024px){
  .layout{display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);column-gap:32px;}
  .col-left{position:sticky;top:0;height:100vh;max-height:100vh;overflow-y:auto;
    display:flex;flex-direction:column;justify-content:space-between;padding:100px 0;
    scrollbar-width:none;}
  .col-left::-webkit-scrollbar{display:none;}
  .col-right{padding:0;}
  /* Full-viewport sections + snap are DESKTOP ONLY; mobile flows naturally. */
  .block{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;justify-content:safe center;padding:48px 0;scroll-margin-top:0;}
}

/* ---- sidebar content ---- */
.sb-top{display:flex;flex-direction:column;}
.sb-name{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:var(--fg1);
  font-size:clamp(36px,6vw,46px);line-height:1.05;text-decoration:none;}
.sb-role{font-family:var(--font-display);font-weight:600;color:var(--fg1);
  font-size:clamp(18px,2.4vw,20px);margin-top:12px;line-height:1.2;}
.sb-tagline{font-family:var(--font-body);color:var(--fg2);font-size:16px;line-height:1.6;margin-top:16px;max-width:340px;}

/* section nav (desktop only) */
.snav{display:none;}
@media (min-width:1024px){ .snav{display:block;margin-top:48px;} }
.snav-link{display:flex;align-items:center;gap:16px;padding:11px 0;background:none;border:none;cursor:pointer;text-decoration:none;}
.snav-indicator{height:1px;width:28px;background:var(--fg2);opacity:.35;transition:width .2s ease,background .2s ease,opacity .2s ease;}
.snav-text{font-family:var(--font-mono);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);transition:color .2s ease,transform .2s ease;}
.snav-link:hover .snav-indicator,.snav-link.active .snav-indicator{width:56px;background:var(--blue-deep);opacity:1;}
.snav-link:hover .snav-text,.snav-link.active .snav-text{color:var(--fg1);transform:translateX(4px);}

.sb-bottom{display:flex;flex-direction:column;gap:22px;margin-top:40px;}
.sb-ctas{display:flex;flex-wrap:wrap;gap:10px;}
.sb-socials{display:flex;align-items:center;gap:20px;}
.sb-socials a{color:var(--fg2);display:flex;min-width:44px;min-height:44px;align-items:center;justify-content:center;transition:color .15s ease,transform .15s ease;}
.sb-socials a:hover{color:var(--blue-deep);transform:translateY(-2px);}

/* ===========================================================
   CONTENT BLOCKS (right column)
   =========================================================== */
.block{padding:48px 0;scroll-margin-top:64px;}
.block:first-child{padding-top:80px;}
.block-head{display:flex;flex-direction:column;gap:12px;margin-bottom:36px;}

/* About portrait — chest-up headshot that fades into the background (no frame) */
/* About intro: portrait beside the title + bio (collapses vertical space so the
   section fits one viewport, like the rest). Stacks on small screens. */
.about-intro{display:flex;gap:28px;align-items:flex-start;}
.about-intro-text{flex:1;min-width:0;}
.about-intro-text .block-head{margin-bottom:16px;}
.about-portrait{position:relative;width:160px;flex:none;margin:0;}
@media (max-width:600px){
  .about-intro{flex-direction:column;gap:0;}
  .about-portrait{width:150px;margin:0 0 16px;}
}
.about-portrait::before{content:"";position:absolute;left:50%;top:28%;transform:translateX(-50%);
  width:92%;height:72%;border-radius:50%;z-index:0;
  background:radial-gradient(ellipse at center, rgba(59,110,157,.20), rgba(59,110,157,0) 70%);
  filter:blur(28px);}
.about-portrait img{position:relative;z-index:1;width:100%;height:auto;display:block;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 96%);
  mask-image:linear-gradient(to bottom,#000 55%,transparent 96%);}

/* Mobile section nav (sticky chips). Hidden by default so it stays OUT of the desktop 2-col grid. */
.block-sticky{display:none;}
.mnav{display:none;}
@media (max-width:1023px){
  .mnav{display:block;position:sticky;top:0;z-index:30;
    margin:0 calc(-1 * var(--gutter));padding:10px 0;
    background:rgba(251,248,242,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border-soft);}
  .mnav-track{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 var(--gutter);}
  .mnav-track::-webkit-scrollbar{display:none;}
  .mnav-chip{flex:none;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--fg2);background:#fff;border:1px solid var(--border);border-radius:9999px;
    padding:9px 14px;min-height:38px;display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap;
    transition:color .15s ease,background .15s ease,border-color .15s ease;}
  .mnav-chip.is-active{color:#fff;background:var(--blue-deep);border-color:var(--blue-deep);}
}

/* ---- experience / work list (resalta una, atenúa el resto) ---- */
.xp-list{display:flex;flex-direction:column;gap:8px;}
@media (min-width:700px){ .xp-list:hover .xp-item{opacity:.55;} .xp-list .xp-item:hover{opacity:1;} }
.xp-item{position:relative;display:grid;grid-template-columns:128px 1fr;gap:18px;
  padding:22px;border-radius:var(--radius-md);border:1px solid transparent;
  text-decoration:none;color:inherit;transition:opacity .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
.xp-item:hover{background:#fff;border-color:var(--border);box-shadow:var(--shadow-card);transform:translateY(-2px);}
.xp-date{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg2);line-height:1.5;padding-top:3px;}
.xp-role{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--fg1);line-height:1.25;display:inline-flex;align-items:center;gap:6px;}
.xp-org{font-family:var(--font-body);font-size:14px;color:var(--blue);margin-top:2px;}
.xp-desc{font-family:var(--font-body);font-size:15.5px;line-height:1.6;color:var(--fg2);margin-top:10px;}
.xp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.xp-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:lowercase;color:var(--blue-deep);
  background:var(--blue-wash);border-radius:var(--radius-pill);padding:6px 12px;line-height:1;}
.xp-item:hover .xp-role{color:var(--blue-deep);}

@media (max-width:560px){
  .xp-item{grid-template-columns:1fr;gap:6px;padding:18px 14px;}
  .xp-date{order:-1;}
}

/* ===========================================================
   MOBILE TWEAKS
   =========================================================== */
@media (max-width:480px){
  :root{--gutter:20px;}
  .btn-primary{padding:15px 24px;}
  .btn-secondary{padding:13px 22px;}
}

/* ===========================================================
   FULL-PAGE SECTION SNAP + HORIZONTAL CARD CAROUSEL
   (adriansaenz-style: each section fills the viewport and snaps;
   cards become a swipeable rail with arrows on desktop)
   =========================================================== */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  html{scroll-snap-type:y mandatory;}
  .block{scroll-snap-align:start;scroll-snap-stop:always;}
}

.carousel{position:relative;}
.carousel-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;flex-wrap:wrap;}
.carousel-cta{display:flex;}
.carousel-arrows{display:flex;gap:10px;}
.carousel-dots{display:none;}
.carousel-dot{width:22px;height:22px;padding:0;border:none;background:none;cursor:pointer;display:grid;place-items:center;}
.carousel-dot::before{content:"";width:8px;height:8px;border-radius:9999px;background:var(--border);transition:background .2s ease,width .2s ease;}
.carousel-dot.is-active::before{background:var(--blue-deep);width:20px;}
.carousel-arrow{flex:none;width:44px;height:44px;border-radius:9999px;border:1px solid var(--border);
  background:#fff;color:var(--blue-deep);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-card);
  transition:color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease,opacity .18s ease;}
.carousel-arrow:hover:not(:disabled){border-color:var(--blue);box-shadow:var(--shadow-card-hover);transform:translateY(-2px);}
.carousel-arrow:disabled{opacity:.3;cursor:default;box-shadow:none;}
.carousel-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px 2px;}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-track:focus-visible{outline:2px solid var(--blue-deep);outline-offset:4px;border-radius:var(--radius-md);}
.carousel-slide{flex:0 0 var(--card-w,300px);scroll-snap-align:start;min-width:0;display:flex;}
.carousel-slide>*{width:100%;}
@media (max-width:1023px){
  :root{--card-w:84%;}
  .carousel-arrows{display:none;}
  .carousel-dots{display:flex;align-items:center;gap:6px;}
}