/* Animaciones progresivas HCH — complementa los estilos existentes */
html {scroll-behavior:smooth;scroll-padding-top:0!important}
section[id]{scroll-margin-top:0!important}
header{transition:box-shadow .35s ease,background-color .35s ease,border-color .35s ease}
header.is-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.12)}
.hch-nav-link{position:relative;transition:color .25s ease}
.hch-nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:currentColor;transition:right .3s cubic-bezier(.2,.8,.2,1)}
.hch-nav-link:hover::after,.hch-nav-link.is-active::after{right:0}
.hch-nav-link.is-active{color:var(--foreground, currentColor);font-weight:600}
.hch-menu-toggle{display:none;position:relative;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid currentColor;background:transparent;cursor:pointer;flex-shrink:0}
.hch-menu-toggle span,.hch-menu-toggle span::before,.hch-menu-toggle span::after{display:block;position:absolute;width:19px;height:2px;background:currentColor;transition:transform .28s ease,opacity .28s ease;content:""}
.hch-menu-toggle span::before{transform:translateY(-6px)}.hch-menu-toggle span::after{transform:translateY(6px)}
.hch-menu-toggle[aria-expanded=true] span{background:transparent}
.hch-menu-toggle[aria-expanded=true] span::before{transform:rotate(45deg)}
.hch-menu-toggle[aria-expanded=true] span::after{transform:rotate(-45deg)}
.hch-mobile-nav{display:none;position:absolute;top:100%;left:0;right:0;padding:12px 20px 22px;background:var(--background,#fff);border-bottom:1px solid var(--border,#ddd);box-shadow:0 18px 28px rgba(0,0,0,.12);transform-origin:top;animation:hch-menu-in .28s ease both}
.hch-mobile-nav.is-open{display:flex;flex-direction:column;gap:0}
.hch-mobile-nav a{padding:14px 8px;border-bottom:1px solid var(--border,#ddd);text-decoration:none}
@keyframes hch-menu-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.hch-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--reveal-delay,0ms)}
.hch-reveal.is-visible{opacity:1;transform:translateY(0)}
#proyectos article img{transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .45s ease}
#proyectos article:hover img{transform:scale(1.025);filter:brightness(1.06)}
@media(max-width:767px){.hch-menu-toggle{display:inline-flex}.hch-header-actions{display:flex;align-items:center;gap:10px}.hch-header-cta{font-size:11px;padding:10px 12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.hch-reveal{opacity:1;transform:none}}

/* HCH: apertura tipográfica y revelado cinematográfico */
.hch-title-line{display:block;overflow:hidden;padding:.075em 0 .045em;margin:-.075em 0 -.045em;white-space:nowrap}
.hch-title-inner{display:block;opacity:0;transform:translate3d(0,110%,0);filter:blur(9px);will-change:transform,opacity,filter}
.hch-title-ready .hch-title-inner{animation:hch-title-rise 1.12s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(120ms + var(--line-index,0)*155ms)}
.hch-title-line:nth-child(1){--line-index:0}.hch-title-line:nth-child(2){--line-index:1}.hch-title-line:nth-child(3){--line-index:2}
@keyframes hch-title-rise{0%{opacity:0;transform:translate3d(0,110%,0);filter:blur(9px)}65%{opacity:1}100%{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}}
/* El contenedor recorta la imagen sin modificar el layout de la cuadrícula */
.hch-image-frame{display:block;overflow:hidden;position:relative;isolation:isolate;background:var(--card,#171717)}
.hch-image-frame::after{content:"";position:absolute;inset:0;background:var(--background,#111);transform:translate3d(0,0,0);z-index:1;pointer-events:none}
.hch-image-frame img{display:block;transform:scale(1.12);filter:brightness(.78);transition:transform 1.45s cubic-bezier(.16,1,.3,1),filter 1.2s ease!important;will-change:transform}
.hch-image-frame.is-visible::after{animation:hch-curtain 1.1s cubic-bezier(.76,0,.24,1) .12s forwards}
.hch-image-frame.is-visible img{transform:scale(1);filter:brightness(1)}
#proyectos article:hover .hch-image-frame img{transform:scale(1.055);filter:brightness(1.045)}
@keyframes hch-curtain{to{transform:translate3d(0,-101%,0)}}
/* No ocultar el título completo mediante el efecto genérico */
#inicio h1.hch-reveal{opacity:1;transform:none;transition:none}
@media(max-width:767px){.hch-title-line{letter-spacing:-.045em}}
@media(prefers-reduced-motion:reduce){.hch-title-inner{opacity:1;transform:none;filter:none;animation:none!important}.hch-image-frame::after{display:none}.hch-image-frame img{transform:none;filter:none;transition:none!important}}
