.hero .hero-photo {object-position:center 42%}
.hero:after {background:linear-gradient(90deg,rgba(4,31,60,.96) 0%,rgba(4,31,60,.84) 31%,rgba(4,31,60,.46) 62%,rgba(4,31,60,.16) 100%)}
.charge-grid img {object-fit:cover}
@media(max-width:700px){
  .hero:after {background:linear-gradient(90deg,rgba(4,31,60,.91),rgba(4,31,60,.63) 74%,rgba(4,31,60,.45))}
}
@media(prefers-reduced-motion:no-preference){
  .hero-photo {animation:photo-arrives 3.5s ease-out both}
  .hero h1 {animation:text-arrives .75s ease-out both}
  .hero-actions {animation:text-arrives .8s .08s backwards}
  .section-arrives {animation:text-arrives .65s ease-out backwards}
  .button,.card {transition:transform .25s ease,box-shadow .25s ease}
  @media(hover:hover){
    .button:hover {transform:translateY(-2px)}
    .card:hover {transform:translateY(-5px);box-shadow:0 14px 30px rgba(9,52,81,.14)}
  }
  @keyframes photo-arrives {from{transform:scale(1.055)}to{transform:scale(1)}}
  @keyframes text-arrives {from{opacity:.35;translate:0 14px}to{opacity:1;translate:0 0}}
}
.hero .hero-photo[src$="electricidad-portada.webp"] {
  left: auto;
  right: 0;
  width: min(100%, max(60%, 650px));
  object-position: 65% 35%;
  mask-image: linear-gradient(to right, transparent, black 24%);
}
@media(max-width:700px) {
  .hero .hero-photo[src$="electricidad-portada.webp"] { mask-image: none; }
}

/* Keep the illuminated traces below the controls and away from the portrait. */
.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  right: -1%;
  bottom: 3%;
  width: min(76%, 1100px);
  aspect-ratio: 900 / 185;
  background: url("corriente.svg") center / contain no-repeat;
  pointer-events: none;
}
.hero .wrap { z-index: 2; }
@media(max-width:700px) {
  .hero::before { width: 94%; bottom: 7%; opacity: .76; }
}
@media(prefers-reduced-motion:no-preference) {
  .card .inner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 37%, rgb(173 243 255 / .20) 50%, transparent 63%);
    transform: translateX(-120%);
  }
  .card:focus-within .inner::before,
  .card:active .inner::before { animation: service-glint 850ms ease-out both; }
  @media(hover:hover) {
    .card:hover .inner::before { animation: service-glint 850ms ease-out both; }
  }
  @keyframes service-glint { to {transform: translateX(120%);} }
}
.hero-sequence.scrolling::after { content: ""; display: block; height: clamp(480px, 110vh, 940px); }
.hero-sequence.scrolling .hero { position: sticky; top: var(--hero-pin, 0px); }
.hero-sequence .hero-photo { transition: none; }
.hero-sequence .hero-photo + .hero-photo { animation: none; }