/* Trivium: connections becoming a signature. Existing brand tokens are retained. */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(860px,calc(100dvh - 65px));padding:0;background:radial-gradient(ellipse at 54% 22%,#303239 0%,#1C1E23 48%,#16171A 100%);display:block;color:#F6F5F2;--ink:#F6F5F2;--ink-2:#C1C0BE;--ink-3:#A8A7A5;--gold:#C7AB73;--gold-ink:#DDC695;--hair:#44454A}
.hero-top{display:flex;align-items:center;justify-content:space-between;padding-top:28px;gap:20px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2)}
.hero-top span:first-child{display:flex;gap:10px;align-items:center}
.hero-top i{width:5px;height:5px;background:var(--gold);border-radius:50%}
.neural-stage{height:clamp(250px,35vw,410px);position:relative;margin-top:6px}
#cvNeural{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.neural-fallback{position:absolute;width:86%;max-width:1120px;height:70%;left:50%;top:50%;transform:translate(-50%,-50%);fill:var(--ink);opacity:.92}
/* El logo estático de respaldo se retira SÓLO cuando el canvas ha pintado de
   verdad, no al cargar el script. Antes se ocultaba con .neural-ready, que se
   añade nada más terminar de ejecutarse neural.js: si el canvas no llegaba a
   dibujar -pestaña en segundo plano (el código para la animación a propósito),
   antivirus con filtrado HTTPS, JavaScript bloqueado- quedaba un hueco negro
   sin logo y sin red de seguridad. Ahora, si no se pinta, se queda el logo fijo. */
.neural-painted .neural-fallback{opacity:0;visibility:hidden;
  transition:opacity .55s linear,visibility 0s .55s}
.hero-in{position:relative;display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(35px,6vw,100px);align-items:end;padding-top:12px;padding-bottom:40px}
.hero h1{font-size:clamp(36px,4.3vw,62px);line-height:1.05;letter-spacing:-.052em;font-weight:500;max-width:15ch;margin:0}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lead{font-size:15px;line-height:1.7;max-width:47ch;color:var(--ink-2);margin:0}
.hero-cta{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:24px}
.hero-cta .b3{font-size:13px;padding:13px 20px;border-radius:10px;--edge:3px}
.hero-contact{font-size:13px;padding:12px 0;border-bottom:1px solid var(--hair);cursor:pointer;display:flex;gap:12px;align-items:center;transition:color .2s,transform .2s}
.hero-contact:hover{color:var(--gold);transform:translateY(-2px)}
.hero-contact:active{transform:translateY(1px)}
.hero-contact svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}
.hero-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:18px 24px;border-top:1px solid var(--hair);font-size:11px;color:var(--ink-3)}
.hero-caption{display:flex;align-items:center;gap:10px}.hero-caption::before{content:'';width:24px;height:1px;background:var(--gold)}
.hero-controls{display:flex;gap:18px}.hero-controls button{cursor:pointer;font-size:11px;min-height:32px;color:var(--ink-2);border-bottom:1px solid transparent}.hero-controls button:hover{border-color:var(--gold);color:var(--gold-ink)}
.hero-controls button[hidden]{display:none}
.neural-ready .hero-in,.neural-ready .hero-foot{animation:neural-reveal 1s var(--out) 2.9s both}
.hero:focus-within .hero-in,.hero:focus-within .hero-foot,.hero.neural-settled .hero-in,.hero.neural-settled .hero-foot{animation:none}
@keyframes neural-reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
/* Small sculptural signatures, kept within the existing service card layout. */
.service-orbit{width:56px;height:56px;float:right;margin-top:-8px;perspective:250px;display:grid;place-items:center}
.service-orbit span{width:42px;height:42px;position:relative;transform-style:preserve-3d;transform:rotateX(58deg) rotateY(-22deg);transition:transform 1.2s var(--out)}
.service-orbit i{position:absolute;inset:0;border:1px solid var(--gold-soft);border-radius:50%;box-shadow:inset 1px 1px 0 rgba(250,250,248,.8)}
.service-orbit i:nth-child(2){transform:rotateY(65deg);border-color:var(--ink-2)}
.service-orbit i:nth-child(3){transform:rotateX(65deg);border-color:var(--ink-3)}
.tar:hover .service-orbit span{transform:rotateX(105deg) rotateY(80deg)}
@media(min-width:1500px){.hero-in{padding-top:36px;padding-bottom:52px}}
@media(max-width:760px){
 .hero{min-height:0}.hero-top{padding-top:24px;font-size:9px;letter-spacing:.1em;gap:12px}.hero-top span:last-child{font-size:9px;white-space:nowrap}
 .neural-stage{height:clamp(190px,50vw,310px);margin-top:16px}
 .hero-in{grid-template-columns:1fr;gap:24px;padding-top:12px;padding-bottom:30px}.hero h1{font-size:clamp(36px,8.3vw,54px);max-width:16ch}.hero .lead{font-size:14px;max-width:44ch}
 .hero-cta{gap:16px;margin-top:22px}.hero-foot{gap:10px;padding-block:14px 20px;align-items:flex-start}.hero-caption{max-width:160px;font-size:10px;line-height:1.6}.hero-controls{gap:12px}.hero-controls button{font-size:10px}.neural-fallback{width:89%}
}
@media(prefers-reduced-motion:reduce){.neural-ready .hero-in,.neural-ready .hero-foot{animation:none}.service-orbit span,.hero-contact{transition:none}.tar:hover .service-orbit span{transform:rotateX(58deg) rotateY(-22deg)}}

.hero{scroll-margin-top:64px}
.neural-fallback{object-fit:contain}