/* LEFAL - dinamismo visual ligero, compatible con Safari/iPhone */
html { scroll-behavior:smooth; }
body { overflow-x:hidden; }
.header { transition:box-shadow .3s ease, background-color .3s ease, transform .3s ease; }
.header.lefal-scrolled { box-shadow:0 8px 28px rgba(12,52,95,.12); }
.btn, nav a { transition:transform .22s ease, box-shadow .22s ease, opacity .22s ease; }
.btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(12,52,95,.16); }
nav a:hover { transform:translateY(-1px); }
.grid article,.two article,.three article,.four article,.auto-strip article,.contact-card,.form-card,.pioneer article {
 transition:transform .28s ease, box-shadow .28s ease;
}
.grid article:hover,.two article:hover,.three article:hover,.four article:hover,.auto-strip article:hover {
 transform:translateY(-5px); box-shadow:0 14px 30px rgba(12,52,95,.10);
}
.lefal-reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.lefal-reveal.lefal-visible { opacity:1; transform:none; }
.lefal-reveal-left { opacity:0; transform:translateX(-28px); transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.lefal-reveal-left.lefal-visible { opacity:1; transform:none; }
.lefal-reveal-right { opacity:0; transform:translateX(28px); transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.lefal-reveal-right.lefal-visible { opacity:1; transform:none; }
.hero h1,.hero .lead,.hero .actions,.hero .badges { animation:lefalHero .75s both cubic-bezier(.2,.7,.2,1); }
.hero .lead { animation-delay:.12s; }.hero .actions { animation-delay:.22s; }.hero .badges { animation-delay:.32s; }
.hero-derecha { animation:lefalHeroRight .9s .15s both cubic-bezier(.2,.7,.2,1); }
@keyframes lefalHero { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes lefalHeroRight { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:none} }
.wa { animation:lefalPulse 3.2s ease-in-out infinite; }
@keyframes lefalPulse { 0%,72%,100%{transform:scale(1)} 80%{transform:scale(1.05)} 88%{transform:scale(1)} 94%{transform:scale(1.035)} }
.auto-photo img,.robot-only img { transition:transform .6s ease; }
.auto-photo:hover img,.robot-only:hover img { transform:scale(1.025); }
@media (max-width:768px){
 .grid article:hover,.two article:hover,.three article:hover,.four article:hover,.auto-strip article:hover,.btn:hover { transform:none; box-shadow:none; }
 .lefal-reveal,.lefal-reveal-left,.lefal-reveal-right { transform:translateY(16px); }
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}.lefal-reveal,.lefal-reveal-left,.lefal-reveal-right{opacity:1!important;transform:none!important;transition:none!important}
 .hero h1,.hero .lead,.hero .actions,.hero .badges,.hero-derecha,.wa{animation:none!important}
 *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* Portada institucional con oficina LEFAL */
#inicio.hero {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(90deg, rgba(5,43,88,.88) 0%, rgba(8,54,101,.70) 42%, rgba(5,35,70,.30) 70%, rgba(3,25,52,.20) 100%), url('../img/oficina-lefal-portada.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  color: #fff;
  min-height: 650px;
}
#inicio.hero .hero-inner { position: relative; z-index: 1; }
#inicio.hero h1, #inicio.hero .lead { color:#fff !important; text-shadow:0 2px 14px rgba(0,0,0,.28); }
#inicio.hero .eyebrow { color:#27c3e6 !important; }
#inicio.hero .badges span { color:#fff !important; background:rgba(4,43,85,.60); border-color:rgba(255,255,255,.34); backdrop-filter:blur(4px); }
#inicio.hero .btn.secondary { color:#fff !important; border-color:rgba(255,255,255,.75) !important; background:rgba(255,255,255,.08) !important; }
#inicio.hero .hero-derecha { display:none !important; }
#inicio.hero .hero-inner { grid-template-columns:minmax(0,700px) 1fr !important; }
@media (max-width: 760px) {
  #inicio.hero { min-height: 720px; background-position: 62% center !important; }
  #inicio.hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(4,39,78,.72),rgba(4,39,78,.84)); }
  #inicio.hero .hero-inner { grid-template-columns:1fr !important; }
}