:root{
    --paper:#ECEAE3;
    --paper-2:#E3E0D6;
    --ink:#1A1912;
    --ink-soft:#4A4839;
    --stone:#CFC9B8;
    --moss:#45543C;
    --brass:#A97B45;
    --charcoal:#16150F;
    --cream:#EDE7D8;
    --max:1280px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Archivo', sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  h1,h2,h3,.serif{
    font-family:'Fraunces', serif;
    font-weight:500;
    letter-spacing:-0.01em;
    margin:0;
  }

  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}

  .wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
  @media (max-width:640px){ .wrap{padding:0 20px;} }

  /* ---------- NAV ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:22px 0;
    transition:background .4s ease, padding .4s ease, border-color .4s ease;
    border-bottom:1px solid transparent;
  }
  header.solid{
    background:rgba(236,234,227,0.92);
    backdrop-filter:blur(10px);
    padding:14px 0;
    border-color:var(--stone);
  }
  .nav-row{display:flex; align-items:center; justify-content:space-between;}
  .brand{display:flex; align-items:center; gap:10px;}
  .brand img{height:30px; width:auto;}
  header.solid .brand img{filter:none;}
  .brand span{
    font-family:'Fraunces', serif; font-size:15px; letter-spacing:.04em;
    color:#fff; transition:color .4s ease;
  }
  header.solid .brand span{color:var(--ink);}

  nav.links{display:flex; gap:36px; align-items:center;}
  nav.links a{
    font-size:13.5px; color:#fff; opacity:.88;
    padding-bottom:3px; border-bottom:1px solid transparent;
    transition:border-color .25s ease, color .4s ease, opacity .25s ease;
  }
  header.solid nav.links a{color:var(--ink);}
  nav.links a:hover{opacity:1; border-color:currentColor;}
  .nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:6px;}
  .nav-toggle span{display:block; width:22px; height:1.5px; background:#fff; margin:5px 0; transition:background .4s ease;}
  header.solid .nav-toggle span{background:var(--ink);}

  @media (max-width:860px){
    nav.links{
      position:fixed; inset:0 0 0 auto; width:min(78vw,320px);
      background:var(--charcoal); flex-direction:column; align-items:flex-start;
      padding:100px 32px 32px; gap:22px;
      transform:translateX(100%); transition:transform .5s cubic-bezier(.65,0,.35,1);
    }
    nav.links.open{transform:translateX(0);}
    nav.links a{color:var(--cream); font-size:16px;}
    .nav-toggle{display:block;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative; height:100vh; min-height:640px;
    display:flex; align-items:flex-end;
    overflow:hidden;
  }
  .hero-media{position:absolute; inset:0; overflow:hidden;}
  .hero-media img{
    width:100%; height:100%; object-fit:cover;
    transform:scale(1.12);
    animation:heroZoom 2.4s cubic-bezier(.22,1,.36,1) forwards;
  }
  @keyframes heroZoom{ to{ transform:scale(1); } }
  .hero-media::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(15,14,9,.25) 0%, rgba(15,14,9,.15) 40%, rgba(15,14,9,.82) 100%);
  }
  .hero-curtain{
    position:absolute; inset:0; background:var(--charcoal); z-index:5;
    animation:curtainUp 1.1s cubic-bezier(.76,0,.24,1) .15s forwards;
  }
  @keyframes curtainUp{ to{ transform:translateY(-100%); } }

  .hero-body{position:relative; z-index:2; width:100%; padding-bottom:9vh;}
  .hero-kicker{
    color:var(--cream); font-size:13px; letter-spacing:.06em;
    opacity:0; overflow:hidden;
  }
  .hero-kicker span{display:inline-block; transform:translateY(110%); animation:riseIn .9s cubic-bezier(.22,1,.36,1) 1.15s forwards;}
  .hero-title{
    color:#fff; font-size:clamp(40px,7vw,92px); line-height:0.98;
    max-width:15ch; margin-top:14px;
  }
  .hero-title .line{overflow:hidden; display:block;}
  .hero-title .line span{
    display:block; transform:translateY(110%);
    animation:riseIn 1s cubic-bezier(.22,1,.36,1) forwards;
  }
  .hero-title .line:nth-child(1) span{animation-delay:1.3s;}
  .hero-title .line:nth-child(2) span{animation-delay:1.42s;}
  @keyframes riseIn{ to{ transform:translateY(0); } }

  .hero-sub{
    color:var(--cream); opacity:0; max-width:34ch; margin-top:22px;
    font-size:15.5px; line-height:1.6;
    animation:fadeUp .9s ease 1.75s forwards;
  }
  @keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

  .scroll-cue{
    position:absolute; right:32px; bottom:38px; z-index:2;
    color:var(--cream); font-size:11.5px; letter-spacing:.08em;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    opacity:0; animation:fadeUp .9s ease 2.1s forwards;
  }
  .scroll-cue .bar{width:1px; height:44px; background:rgba(237,231,216,.4); position:relative; overflow:hidden;}
  .scroll-cue .bar::after{content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--cream); animation:cueDrop 1.8s ease-in-out infinite;}
  @keyframes cueDrop{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }
  @media (max-width:640px){ .scroll-cue{display:none;} }

  /* ---------- reveal on scroll (headings only) ---------- */
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- SECTION generic ---------- */
  section{padding:132px 0;}
  @media (max-width:860px){ section{padding:88px 0;} }
  .kicker{
    font-size:13px; color:var(--brass); letter-spacing:.03em;
    display:flex; align-items:center; gap:12px; margin-bottom:22px;
  }
  .kicker::before{content:''; width:26px; height:1px; background:var(--brass);}

  /* ---------- ABOUT ---------- */
  .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start;}
  @media (max-width:920px){ .about-grid{grid-template-columns:1fr; gap:56px;} }
  .about-lead{font-size:clamp(26px,3vw,38px); line-height:1.28; max-width:16ch;}
  .about-lead em{font-style:italic; color:var(--moss);}
  .about-text{margin-top:28px; color:var(--ink-soft); font-size:15.5px; line-height:1.75; max-width:46ch;}

  .pillars{display:flex; flex-direction:column; gap:0;}
  .pillar{
    display:flex; gap:22px; padding:28px 0;
    border-top:1px solid var(--stone);
  }
  .pillar:last-child{border-bottom:1px solid var(--stone);}
  .pillar img{width:38px; height:38px; object-fit:contain; flex:none; margin-top:2px;}
  .pillar h3{font-size:17px; font-weight:500;}
  .pillar p{margin:8px 0 0; font-size:14.5px; line-height:1.65; color:var(--ink-soft); max-width:42ch;}

  /* ---------- PROYECTOS ---------- */
  .proj-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;}
  .proj-head h2{font-size:clamp(32px,4.5vw,52px); max-width:14ch; line-height:1.05;}
  .proj-head p{max-width:32ch; color:var(--ink-soft); font-size:14.5px; line-height:1.6; margin:0;}

  .proj-list{margin-top:70px; border-top:1px solid var(--stone);}
  .proj-row{
    display:grid; grid-template-columns:64px 1fr 1fr; gap:40px;
    align-items:center; padding:38px 0; border-bottom:1px solid var(--stone);
    position:relative;
  }
  .proj-row .num{
    font-family:'Fraunces', serif; font-size:15px; color:var(--stone);
    transition:color .35s ease; padding-top:6px;
  }
  .proj-row:hover .num{color:var(--brass);}
  .proj-info h3{font-size:clamp(24px,2.6vw,34px); font-weight:500;}
  .proj-meta{margin-top:10px; font-size:13.5px; color:var(--ink-soft); display:flex; gap:14px; flex-wrap:wrap;}
  .proj-meta span:not(:last-child)::after{content:''; display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--stone); margin-left:14px; vertical-align:middle;}
  .proj-link{
    margin-top:18px; display:inline-flex; align-items:center; gap:9px;
    font-size:13px; letter-spacing:.02em; color:var(--ink);
    padding-bottom:2px; border-bottom:1px solid var(--ink);
  }
  .proj-link .dot{width:6px; height:6px; border-radius:50%; background:var(--moss); transition:transform .3s ease;}
  .proj-row:hover .proj-link .dot{transform:scale(1.6);}

  .proj-frame{
    aspect-ratio:4/3; overflow:hidden; background:var(--paper-2);
    border-radius:2px;
  }
  .proj-frame img{
    width:100%; height:100%; object-fit:cover;
    transition:transform .8s cubic-bezier(.22,1,.36,1);
  }
  .proj-row:hover .proj-frame img{transform:scale(1.06);}

  @media (max-width:820px){
    .proj-row{grid-template-columns:32px 1fr; grid-template-areas:"num info" "img img"; row-gap:22px;}
    .proj-info{grid-area:info;}
    .proj-frame{grid-area:img;}
  }

  /* ---------- MANIFESTO (dark) ---------- */
  .manifesto{
    background:var(--charcoal); color:var(--cream); position:relative;
    overflow:hidden;
  }
  .manifesto-bg{position:absolute; inset:0; opacity:.28;}
  .manifesto-bg img{width:100%; height:100%; object-fit:cover;}
  .manifesto-bg::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, var(--charcoal) 0%, rgba(22,21,15,.55) 45%, var(--charcoal) 100%);}
  .manifesto .wrap{position:relative; z-index:1;}
  .manifesto-quote{
    font-family:'Fraunces', serif; font-style:italic; font-weight:400;
    font-size:clamp(28px,4.2vw,50px); line-height:1.35; max-width:20ch;
  }
  .manifesto-quote .accent{color:var(--brass); font-style:normal;}
  .manifesto-cite{margin-top:34px; font-size:13px; letter-spacing:.04em; color:rgba(237,231,216,.6);}

  /* ---------- CONTACTO ---------- */
  .contact-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:80px;}
  @media (max-width:920px){ .contact-grid{grid-template-columns:1fr; gap:56px;} }
  .contact-title{font-size:clamp(30px,4vw,46px); max-width:12ch; line-height:1.08;}
  .contact-info{margin-top:32px; display:flex; flex-direction:column; gap:18px;}
  .contact-info a{font-size:15.5px; border-bottom:1px solid transparent; transition:border-color .25s ease; padding-bottom:1px; width:fit-content;}
  .contact-info a:hover{border-color:var(--ink);}
  .contact-info .lbl{font-size:12px; color:var(--ink-soft); display:block; margin-bottom:4px;}
  .contact-careers{
    margin-top:44px; padding-top:28px; border-top:1px solid var(--stone);
    font-size:14px; color:var(--ink-soft); line-height:1.7; max-width:36ch;
  }
  .contact-careers a{color:var(--moss); border-bottom:1px solid var(--moss);}

  form.contact-form{display:flex; flex-direction:column; gap:22px;}
  .field{position:relative;}
  .field label{
    position:absolute; left:0; top:14px; font-size:15px; color:var(--ink-soft);
    transition:transform .2s ease, font-size .2s ease, color .2s ease;
    pointer-events:none;
  }
  .field input, .field textarea{
    width:100%; border:0; border-bottom:1px solid var(--stone);
    background:transparent; font-family:'Archivo', sans-serif;
    font-size:15px; color:var(--ink); padding:14px 0 10px;
    outline:none; resize:none;
    transition:border-color .25s ease;
  }
  .field input:focus, .field textarea:focus{border-color:var(--ink);}
  .field input:focus + label, .field input:not(:placeholder-shown) + label,
  .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
    transform:translateY(-16px); font-size:11.5px; color:var(--moss);
  }
  .submit-btn{
    margin-top:8px; align-self:flex-start;
    background:var(--ink); color:var(--paper);
    border:0; padding:15px 30px; font-size:13.5px; letter-spacing:.03em;
    cursor:pointer; transition:background .3s ease, transform .3s ease;
  }
  .submit-btn:hover{background:var(--moss);}
  .form-note{font-size:12.5px; color:var(--ink-soft); margin-top:4px;}

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--paper-2); padding:52px 0 32px; border-top:1px solid var(--stone);
  }
  .foot-row{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;}
  .foot-row img{height:22px; opacity:.75;}
  .foot-links{display:flex; gap:26px; font-size:12.5px; color:var(--ink-soft);}
  .foot-links a:hover{color:var(--ink);}
  .foot-legal{margin-top:26px; font-size:12px; color:var(--ink-soft);}