/* ==========================================================================
   Ramiro Puentes portfolio — site stylesheet
   Single source of truth for design tokens, layout, and components used on
   Home, Portfolio, About, and Contact, and shared (header/footer/nav) with
   every ProjectDetails_*.html case study page.

   History note: this file previously contained three complete, fully
   redeclared theme systems stacked back to back (a dark theme, then a
   "bright technical" theme, then a "Material" theme), each overriding the
   last via cascade order, plus a fourth override layer in
   material-polish.css. That made the rendered result depend on the exact
   order rules happened to appear in the file, which is fragile and hard to
   safely edit. This version keeps only the final, currently-live design —
   one set of tokens, declared once.
   ========================================================================== */

:root{
  /* Color roles */
  --bg:#f8fafd;
  --bg2:#eef3f9;
  --surface:#ffffff;
  --surface-low:#f4f7fb;
  --surface-container:#f0f4fa;
  --text:#1f1f1f;
  --muted:#5f6368;
  --line:#d7dde5;
  --line-strong:#c1c8d2;
  --accent:#0b57d0;
  --accent-hover:#0842a0;
  --accent-soft:#dce8fa;
  --accent-on-soft:#17365f;
  --accent2:#146c60;
  --accent2-soft:#dcefe9;
  --ink:#ffffff;

  /* Layout + elevation */
  --max:1180px;
  --shadow:0 1px 2px rgba(60,64,67,.10),0 2px 6px rgba(60,64,67,.06);
  --shadow-raised:0 2px 5px rgba(60,64,67,.12),0 10px 28px rgba(60,64,67,.08);
}

/* Reset / base ------------------------------------------------------------ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Roboto,Arial,Helvetica,"Segoe UI",sans-serif;
  color:var(--text);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 92% 5%,rgba(220,232,250,.72),transparent 28rem),
    radial-gradient(circle at 3% 33%,rgba(220,239,233,.36),transparent 25rem),
    var(--bg);
}
p,li{line-height:1.72}
img{max-width:100%;display:block}
a{color:inherit}
button,input,textarea{font:inherit}
.shell{width:min(calc(100% - 48px),var(--max));margin-inline:auto}
.skip-link{position:fixed;left:12px;top:-80px;background:#fff;color:#1f1f1f;padding:10px 14px;border-radius:12px;box-shadow:var(--shadow-raised);z-index:1000}
.skip-link:focus{top:12px}

/* Header / nav ------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:100;min-height:72px;
  background:rgba(248,250,253,.95);
  border-bottom:1px solid rgba(60,64,67,.12);
  box-shadow:0 1px 2px rgba(60,64,67,.06);
  backdrop-filter:blur(18px) saturate(150%);
}
.nav-shell{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:700;letter-spacing:-.01em}
.brand-mark{
  width:40px;height:40px;display:grid;place-items:center;border-radius:14px;
  background:var(--accent-soft);color:var(--accent-on-soft);
  font-size:.82rem;letter-spacing:.08em;font-weight:800;
}
.brand-name{letter-spacing:-.01em}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:8px}
.nav-link{
  display:block;text-decoration:none;color:#444746;padding:10px 16px;
  border-radius:999px;font-weight:600;font-size:.94rem;
  transition:background .18s ease,color .18s ease;
}
.nav-link:hover{background:#edf3fc;color:var(--accent)}
.nav-link.active{background:var(--accent-soft);color:var(--accent-on-soft)}
.nav-toggle{
  display:none;align-items:center;gap:8px;background:#fff;color:var(--text);
  border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-weight:600;
}
.nav-toggle-icon{width:16px;height:12px;position:relative}
.nav-toggle-icon,.nav-toggle-icon::before,.nav-toggle-icon::after{display:block}
.nav-toggle-icon::before,.nav-toggle-icon::after{content:"";position:absolute;left:0;right:0}
.nav-toggle-icon,.nav-toggle-icon::before,.nav-toggle-icon::after{height:2px;background:currentColor;border-radius:2px}
.nav-toggle-icon{top:5px}
.nav-toggle-icon::before{top:-5px}
.nav-toggle-icon::after{top:5px}

/* Buttons / links ---------------------------------mtr-2-------------------------*/
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;border-radius:999px;padding:10px 20px;min-height:44px;
  font-weight:700;letter-spacing:.01em;border:1px solid transparent;cursor:pointer;
  transition:box-shadow .18s ease,background .18s ease,transform .18s ease;
}
.button.primary{background:var(--accent);color:#fff}
.button.primary:hover{background:var(--accent-hover);box-shadow:var(--shadow);transform:translateY(-1px)}
.button.primary:active{transform:none;box-shadow:none}
.button.secondary{color:var(--accent);background:#fff;border-color:#747775}
.button.secondary:hover{background:#edf3fc;border-color:var(--accent)}
.text-link{color:var(--accent);font-weight:700;text-decoration:none}
.text-link:hover{text-decoration:underline}

/* Hero ----------------------------------------------------------------------*/
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:68px;align-items:center;padding-block:88px 72px;min-height:640px}
.eyebrow{margin:0 0 14px;color:var(--accent);font-size:.78rem;letter-spacing:.14em;font-weight:800}
.hero h1,.page-hero h1{
  font-weight:500;letter-spacing:-.047em;line-height:.98;margin:0;max-width:980px;color:#202124;
  font-size:clamp(3rem,6vw,5.6rem);
}
.page-hero h1{font-size:clamp(2.8rem,5.7vw,5.2rem)}
.hero-lede,.page-hero>p:last-child{font-size:1.18rem;color:var(--muted);max-width:760px;margin:28px 0 0;line-height:1.7}
.cta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-proof{display:flex;gap:34px;list-style:none;padding:0;margin:50px 0 0}
.hero-proof li{display:flex;flex-direction:column;gap:3px}
.hero-proof strong{font-size:1.05rem;color:#202124}
.hero-proof span{font-size:.84rem;color:#5f6368}
.hero-visual{display:flex;justify-content:flex-end}
.code-card{
  width:100%;max-width:500px;border-radius:28px;overflow:hidden;
  background:linear-gradient(165deg,#1f2937,#111827 72%);
  box-shadow:0 8px 24px rgba(60,64,67,.20),0 2px 6px rgba(60,64,67,.16);
}
.code-card-top{display:flex;gap:7px;padding:17px 20px;border-bottom:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035)}
.code-card-top span{width:10px;height:10px;border-radius:50%;background:#6b7280}
.code-card pre{margin:0;padding:36px;overflow:auto;font-family:"SFMono-Regular",Consolas,monospace;font-size:.93rem;line-height:1.85;color:#d7e7ff}
.code-card .muted{color:#94a3b8}

/* Section rhythm -------------------------------------------------------------*/
.section{padding-block:88px}
.section-band{padding-block:88px;background:rgba(241,245,250,.82);border-block:1px solid rgba(60,64,67,.08)}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:38px}
.section-heading.compact{margin-bottom:26px}
.section-heading h2,.split-panel h2,.callout h2,.about-grid h2,.timeline h2,.contact-card h2{
  font-size:clamp(2rem,4vw,3.35rem);letter-spacing:-.045em;line-height:1.05;margin:0;font-weight:500;color:#202124;
}

/* Project cards ---------------------------------------------------------- */
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.project-card{
  border:1px solid #d8dde5;border-radius:24px;background:#fff;overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.project-card:hover{transform:translateY(-3px);border-color:#c2c7cf;box-shadow:var(--shadow-raised)}
.project-image{display:block;aspect-ratio:16/9;overflow:hidden;background:#e9eef6}
.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.project-card:hover .project-image img{transform:scale(1.018)}
.project-body{padding:28px 28px 30px}
.project-body h2,.project-body h3{margin:8px 0 10px;line-height:1.15;letter-spacing:-.025em;font-weight:600;color:#202124}
.project-body h2{font-size:1.45rem}
.project-body h3{font-size:1.55rem}
.project-body h2 a,.project-body h3 a{text-decoration:none}
.project-body p{margin:0 0 18px;color:var(--muted);line-height:1.7}
.project-kicker{color:var(--accent)!important;font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;font-weight:800}
.tag-row{display:flex;gap:8px;flex-wrap:wrap}
.tag-row span{
  min-height:30px;display:inline-flex;align-items:center;font-size:.75rem;font-weight:600;
  padding:5px 11px;border-radius:999px;border:1px solid #c9cdd3;color:#444746;background:#fff;
}

/* Capability / about cards — one consistent surface, no arbitrary striping */
.capability-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.capability-grid article{padding:30px;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--shadow)}
.capability-grid h3{margin:8px 0;font-size:1.22rem;font-weight:600;color:#202124}
.capability-grid p{margin:0;color:var(--muted)}
.capability-number{font-family:monospace;color:var(--accent);font-size:.78rem;font-weight:700}

/* Recent achievements (home page) -----------------------------------------*/
.achievement-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.achievement-card{
  display:flex;flex-direction:column;gap:14px;padding:18px;text-decoration:none;
  border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.achievement-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-raised);border-color:#c2c7cf}
.achievement-card img{width:100%;border-radius:12px;aspect-ratio:3/2;object-fit:contain;background:#fff}
.achievement-card span{font-weight:700;font-size:.92rem;color:#202124;line-height:1.35}

.split-panel{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.split-panel p{color:var(--muted)}
.skill-cloud{display:flex;gap:10px;flex-wrap:wrap;align-content:flex-start}
.skill-cloud span{padding:9px 14px;border:1px solid #c9cdd3;border-radius:999px;background:#fff;font-weight:600;color:#3c4043}

.callout{
  border:1px solid #c9daf4;border-radius:28px;background:var(--accent-soft);
  padding-inline:40px!important;display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:88px;
}
.callout h2{color:var(--accent-on-soft)}
.callout p{color:#40556f;max-width:760px;line-height:1.7}

.site-footer{border-top:1px solid rgba(60,64,67,.12);background:#f1f4f9;padding:45px 0;color:#5f6368}
.footer-grid{display:flex;justify-content:space-between;gap:40px}
.site-footer strong{color:#202124;font-size:1.05rem}
.site-footer p{max-width:600px;margin:8px 0 0}
.footer-links{display:flex;gap:14px;flex-wrap:wrap;align-items:start}
.footer-links a{text-decoration:none;color:var(--accent);font-weight:600}

/* Portfolio page ----------------------------------------------------------*/
.page-hero{padding-block:82px 48px}
.portfolio-controls{display:flex;gap:9px;flex-wrap:wrap;padding-bottom:10px}
.filter-button{
  min-height:38px;border:1px solid #c4c7c5;background:#fff;color:#444746;border-radius:10px;
  padding:8px 14px;cursor:pointer;font-weight:600;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.filter-button:hover{background:#f0f4fa;border-color:#9aa0a6;color:#202124}
.filter-button.active{
  color:var(--accent-on-soft);background:var(--accent-soft);border-color:transparent;
  box-shadow:inset 0 0 0 1px rgba(11,87,208,.08);
}
.portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.portfolio-item[hidden]{display:none}
.empty-state{color:var(--muted);padding:50px 0}

/* About page ----------------------------------------------------------------*/
.about-hero{display:grid;grid-template-columns:1fr 240px;gap:50px;align-items:center}
.about-hero>div>p:last-child{font-size:1.18rem;color:var(--muted);max-width:790px;line-height:1.7}
.profile-photo{width:220px;height:220px;object-fit:cover;border-radius:28px;box-shadow:var(--shadow-raised)}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.about-grid article{padding:32px;border:1px solid var(--line);background:var(--surface);border-radius:24px;box-shadow:var(--shadow)}
.about-grid p{color:var(--muted)}
.timeline{display:grid;grid-template-columns:.75fr 1.25fr;gap:52px}
.timeline ol{list-style:none;margin:0;padding:0;border-left:2px solid #d2d6dc}
.timeline li{padding:0 0 34px 30px;position:relative}
.timeline li:before{content:"";position:absolute;left:-7px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.timeline li span{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:800}
.timeline li h3{margin:5px 0 7px}
.timeline li p{margin:0;color:var(--muted)}

/* Contact page ----------------------------------------------------------- */
.contact-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:start}
.modern-form,.contact-card{border:1px solid var(--line);background:var(--surface);border-radius:24px;padding:34px;box-shadow:var(--shadow)}
.modern-form{display:grid;gap:18px}
.modern-form label{display:block;font-weight:600;margin-bottom:7px;color:#202124}
.modern-form input,.modern-form textarea{
  width:100%;min-height:52px;background:#f8fafd;border:1px solid #747775;color:var(--text);
  border-radius:12px;padding:13px 15px;outline:none;
}
.modern-form textarea{min-height:150px}
.modern-form input:hover,.modern-form textarea:hover{border-color:#202124}
.modern-form input:focus,.modern-form textarea:focus{border:2px solid var(--accent);background:#fff;padding:12px 14px}
.form-note,.form-status,.contact-card p{color:var(--muted);font-size:.9rem}
.contact-card{position:sticky;top:100px}
.contact-card h2{font-size:2rem}
.contact-card .button{margin-top:10px}

.mtr-5{
  margin-top:5rem !important;
}

/* Responsive ---------------------------------------------------------------
   Two structural breakpoints (tablet / phone), plus small refinements for
   very narrow phones nested inside the phone breakpoint. */
@media(max-width:980px){
  .hero{grid-template-columns:1fr;padding-top:76px;min-height:auto}
  .hero-visual{justify-content:flex-start}
  .code-card{max-width:620px}
  .capability-grid{grid-template-columns:repeat(2,1fr)}
  .achievement-grid{grid-template-columns:repeat(2,1fr)}
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
  .timeline,.split-panel,.contact-layout{grid-template-columns:1fr}
  .contact-card{position:static}
}
@media(max-width:720px){
  .shell{width:min(calc(100% - 30px),var(--max))}
  .nav-toggle{display:inline-flex}
  .site-nav{
    position:absolute;top:72px;left:14px;right:14px;padding:10px;
    border:1px solid #d8dde5;background:#fff;border-radius:20px;box-shadow:var(--shadow-raised);
    display:none;
  }
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column}
  .nav-link{border-radius:14px}
  .hero{padding-block:60px 52px;gap:38px}
  .hero h1,.page-hero h1{font-size:clamp(2.55rem,14vw,4rem)}
  .hero-proof{gap:18px;flex-direction:column;margin-top:38px}
  .section,.section-band{padding-block:60px}
  .section-heading{align-items:start;flex-direction:column}
  .project-grid,.portfolio-grid,.capability-grid,.achievement-grid{grid-template-columns:1fr}
  .about-hero{grid-template-columns:1fr}
  .profile-photo{width:160px;height:160px}
  .callout{border-radius:24px;margin-inline:15px!important;padding:28px!important;align-items:flex-start;flex-direction:column}
  .footer-grid{flex-direction:column}
  .code-card pre{padding:25px;font-size:.82rem}
  .modern-form,.contact-card{padding:26px}
}
@media(max-width:380px){
  /* Extra-narrow phones (e.g. iPhone SE / small Android): tighten the hero
     type scale and card padding a little further so nothing feels cramped
     against the edge of the screen. */
  .hero h1,.page-hero h1{font-size:clamp(2.15rem,15vw,3rem)}
  .project-body,.capability-grid article,.about-grid article{padding:20px}
  .callout{padding:22px!important}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}