/*
 LEONARDO — DESIGN SYSTEM MASTER
 Reference: approved Home V1.49.
*/
:root{
  --leo-blue:#272E89;
  --leo-orange:#FF9D4B;
  --leo-cream:#FFF8F3;
  --leo-white:#FFFAF5;

  --page-pad:clamp(18px,2.8vw,46px);
  --section-y:clamp(80px,12vw,180px);

  /* canonical vertical rhythm */
  --space-1:8px;
  --space-2:14px;
  --space-3:22px;
  --space-4:30px;
  --space-5:44px;
  --space-6:56px;
  --space-7:72px;
  --space-8:96px;

  --text-title:clamp(40px,5.4vw,78px);
  --text-project:clamp(22px,2.4vw,34px);
  --text-body:17px;
  --text-small:14px;

  /* Master vertical rhythm for large closing statements (works-page, etc.) */
  --lm-statement-space:clamp(72px,8vw,112px);

  --cta-pad-y:14px;
  --cta-pad-x:22px;
  --ease-standard:cubic-bezier(.22,.61,.36,1);
  --duration-standard:.28s;
}

/* ================================================================
   .page-cta — standalone fix.
   This class previously had no real padding/font-size of its own
   (only border-radius/border/background hooks scoped to one page),
   so any standalone use rendered as a cramped, tiny button. This is
   the one real, complete definition, wired to the tokens above, so
   every current and future .page-cta looks like every other CTA on
   the site (.contact / .cta-button) regardless of which page it's on.
   ================================================================ */
.page-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-sizing:border-box;
  padding:var(--cta-pad-y) var(--cta-pad-x);
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
}

/* ================================================================
   MOBILE NAVIGATION — hamburger + slide-down panel.
   Desktop keeps the existing inline nav untouched. Below 800px the
   plain text links (Trabajos/Servicios/Sobre mí) hide and a hamburger
   button reveals a full-width panel with all four links. The orange
   Contacto button stays visible in the header at every size, since
   it's the primary action.
   ================================================================ */
.nav-toggle{
  display:none;
  width:44px;height:44px;
  padding:0;margin:0 0 0 2px;
  background:none;border:none;
  flex-direction:column;align-items:center;justify-content:center;
  gap:5px;
  cursor:pointer;
  flex:0 0 auto;
}
.nav-toggle span{
  display:block;width:22px;height:2px;
  background:var(--white);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{display:none}

@media(max-width:800px){
  .nav a:not(.contact){display:none}
  .nav .contact{display:none}
  .nav-toggle{display:inline-flex}

  .mobile-menu{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0;left:0;right:0;
    z-index:15;
    background:var(--blue);
    padding:96px 24px 40px;
    transform:translateY(-100%);
    transition:transform .4s var(--ease);
    max-height:100vh;
    overflow-y:auto;
    box-sizing:border-box;
  }
  .mobile-menu.open{transform:translateY(0)}
  .mobile-menu a{
    color:var(--white);
    font-size:22px;font-weight:700;letter-spacing:-.01em;
    padding:17px 2px;
    border-bottom:1px solid rgba(255,255,255,.16);
  }
  .mobile-menu a:last-child{
    margin-top:10px;
    border-bottom:none;
    display:flex;align-items:center;justify-content:center;
    background:var(--orange);color:var(--blue);
    padding:14px 22px;width:fit-content;
   align-self:flex-end;}
  body.menu-open{overflow:hidden}
  /* Force the header visible while the panel is open, overriding the
     per-page scroll-hide script (which sets an inline, non-important
     transform) so the hamburger/close button never scrolls away. */
  body.menu-open .site-header{transform:none !important}
  /* The back-to-top button sits above the mobile panel (z-index) and
     can float over the open menu's links if the page was scrolled
     before opening it. Hide it while the panel is open. */
  body.menu-open .back-to-top{display:none}
}

/* ================================================================
   BACK TO TOP — fixed interaction control.
   Visible after scrolling, comfortably reachable and visually clear
   on both desktop and touch screens.
   ================================================================ */
.back-to-top{
  position:fixed;
  right:24px;
  bottom:88px;
  z-index:16;
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  background:var(--orange);
  border:1px solid var(--orange);
  color:var(--blue);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s,
             background-color .28s ease,color .28s ease,border-color .28s ease;
}
.back-to-top.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear 0s,
             background-color .28s ease,color .28s ease,border-color .28s ease;
}
.back-to-top:hover,.back-to-top:focus-visible{
  background:var(--blue);
  color:var(--white);
  border-color:var(--orange);
}
.back-to-top svg{
  width:24px;
  height:24px;
  display:block;
  pointer-events:none;
}
@media(max-width:800px){
  .back-to-top{
    right:16px;
    bottom:80px;
    width:56px;
    height:56px;
  }
}

/* ================================================================
   FOOTER CLEARANCE — keep the copyright line clear of the fixed
   back-to-top button. Both sit in the same bottom-right corner, so
   at the true bottom of any page the button was overlapping the
   ".footer-bottom" text. Extra bottom padding on <footer> pushes
   that line up above the button's footprint, on every page.
   ================================================================ */
footer{padding-bottom:calc(34px + 64px) !important}
@media(max-width:800px){
  footer{padding-bottom:calc(34px + 56px) !important}
}

/* ================================================================
   Project-card meta (name + category) — mobile stacking fix.
   .project-meta's children are inline <span>s; collapsing the parent
   to display:block does not make inline children wrap onto their own
   line, so name+category were running together with no line break.
   ================================================================ */
@media(max-width:640px){
  .project-meta{display:block !important}
  .project-name,.project-type{display:block;width:100%}
  .project-type{margin-top:4px}
}

/* ================================================================
   PAGE KICKER — unified micro-label above page statements.
   One visual system; content varies by page.
   ================================================================ */
.page-kicker{
  font-size:13px;
  line-height:1.2;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.75;
}