/* 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; }
}


/* Video de automatización */
.auto-video-card { position:relative; overflow:hidden; cursor:pointer; }
.auto-video-card > img { display:block; width:100%; height:100%; object-fit:cover; }
.auto-video-play {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:82px; height:82px; min-width:82px; min-height:82px;
  border:2px solid rgba(255,255,255,.96) !important;
  border-radius:50% !important;
  background:rgba(8,54,101,.82) !important;
  box-shadow:0 4px 16px rgba(0,0,0,.30);
  cursor:pointer; z-index:3;
  display:grid; place-items:center;
  padding:0 !important;
  appearance:none; -webkit-appearance:none;
  font:inherit;
}
.auto-video-play::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:rgba(255,255,255,.05); transition:background .2s, transform .2s;
}
.auto-video-play span {
  position:relative; display:block; width:0; height:0;
  border-top:13px solid transparent; border-bottom:13px solid transparent;
  border-left:22px solid #fff; margin-left:6px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));
}
.auto-video-play:hover::before,.auto-video-play:focus-visible::before {
  background:rgba(255,255,255,.18); transform:scale(1.08);
}
.auto-video-play:focus-visible { outline:3px solid #27c3e6; outline-offset:4px; }
.video-modal {
  position:fixed; inset:0; z-index:9999; display:none;
  align-items:center; justify-content:center; padding:24px;
}
.video-modal.is-open { display:flex; }
.video-modal-backdrop { position:absolute; inset:0; background:rgba(0,16,35,.82); backdrop-filter:blur(3px); }
.video-modal-dialog {
  position:relative; z-index:1; width:min(1000px,94vw);
  background:#000; border-radius:14px; overflow:hidden;
  box-shadow:0 25px 80px rgba(0,0,0,.45);
}
.video-modal-dialog video { display:block; width:100%; max-height:82vh; background:#000; }
.video-modal-close {
  position:absolute; right:10px; top:10px; z-index:2; width:42px; height:42px;
  border:0; border-radius:50%; background:rgba(0,0,0,.62); color:#fff;
  font-size:30px; line-height:1; cursor:pointer;
}
.video-modal-close:hover { background:rgba(0,0,0,.82); }
@media(max-width:768px){
  .auto-video-play { width:68px; height:68px; }
  .video-modal { padding:12px; }
  .video-modal-dialog { width:100%; border-radius:10px; }
}

/* Corrección definitiva del botón de video: el icono ya no está duplicado con la imagen. */
.auto-video-play {
  box-sizing:border-box !important;
  width:78px !important;
  height:78px !important;
  min-width:78px !important;
  min-height:78px !important;
  margin:0 !important;
  padding:0 !important;
  border:3px solid #fff !important;
  border-radius:50% !important;
  background:#14518f !important;
  background-image:none !important;
  box-shadow:0 3px 14px rgba(0,0,0,.38) !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  overflow:hidden !important;
}
.auto-video-play::before { display:none !important; content:none !important; }
.auto-video-play span {
  width:0 !important;
  height:0 !important;
  border-top:12px solid transparent !important;
  border-bottom:12px solid transparent !important;
  border-left:20px solid #fff !important;
  margin:0 0 0 5px !important;
  filter:none !important;
}
.auto-video-play:hover { background:#0f4277 !important; transform:translate(-50%,-50%) scale(1.04) !important; }
@media(max-width:768px){
  .auto-video-play { width:68px !important; height:68px !important; min-width:68px !important; min-height:68px !important; }
}

/* El ícono de reproducción ya forma parte de la imagen. El botón superpuesto queda invisible pero mantiene el área clickeable. */
.auto-video-play,
.auto-video-play:hover,
.auto-video-play:focus,
.auto-video-play:focus-visible {
  width:86px !important;
  height:86px !important;
  min-width:86px !important;
  min-height:86px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  outline:none !important;
  transform:translate(-50%,-50%) !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}
.auto-video-play::before,
.auto-video-play span { display:none !important; content:none !important; }
@media(max-width:768px){
  .auto-video-play,
  .auto-video-play:hover,
  .auto-video-play:focus,
  .auto-video-play:focus-visible {
    width:76px !important; height:76px !important; min-width:76px !important; min-height:76px !important;
  }
}