html{overflow-x:hidden}
body{margin:0;font:var(--type-body);color:var(--text-primary);background:var(--surface-page);overflow-x:hidden}
a{color:inherit;text-decoration:none;transition:opacity var(--dur-fast) var(--ease-out)}
a:hover{opacity:var(--hover-opacity)}
img{display:block;max-width:100%}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:1px solid var(--focus-ring);outline-offset:3px}

/* ===== Micro-interactions (motion-safe, progressive enhancement) ===== */
@keyframes elheReveal{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes elheSpin{to{transform:rotate(360deg)}}

/* Scroll-triggered reveals: sections & footer fade / slide up as they enter the viewport */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    main section:not(#inicio), footer{
      animation:elheReveal both;
      animation-timeline:view();
      animation-range:entry 2% entry 46%;
    }
  }
}

/* ProjectCard mini-carousel manual arrows: desktop only (mobile relies on touch swipe) */
.elhe-card-arrow{display:none}
@media(min-width:901px){
  .elhe-card-arrow{display:inline-flex}
}

/* Loading spinner (lightbox uses it while media loads) */
.elhe-spinner{
  width:40px;height:40px;border-radius:50%;
  border:2px solid rgba(255,255,255,.25);border-top-color:#fff;
  animation:elheSpin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce){.elhe-spinner{animation-duration:1.8s}}

/* Animated underline on the desktop nav links */
.elhe-nav-desktop a{position:relative}
.elhe-nav-desktop a:hover{opacity:1}
.elhe-nav-desktop a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out);
}
.elhe-nav-desktop a:hover::after,.elhe-nav-desktop a:focus-visible::after{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){.elhe-nav-desktop a::after{transition:none}}

/* Hover / focus tooltips via [data-tip] */
[data-tip]{position:relative}
[data-tip]::after,[data-tip]::before{
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
[data-tip]::after{
  content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 12px);
  width:max-content;max-width:230px;
  background:var(--color-ink);color:var(--color-white);
  font:var(--type-small);line-height:1.45;letter-spacing:0;text-transform:none;
  padding:9px 12px;border-radius:2px;box-shadow:var(--shadow-float);
  transform:translateY(5px);z-index:60;
}
[data-tip]::before{
  content:"";position:absolute;left:18px;bottom:calc(100% + 7px);
  border:5px solid transparent;border-top-color:var(--color-ink);
  transform:translateY(5px);z-index:60;
}
[data-tip]:hover::after,[data-tip]:hover::before,
[data-tip]:focus-visible::after,[data-tip]:focus-visible::before{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){[data-tip]::after,[data-tip]::before{transition:none;transform:none}}