/* Joomla 3.10 - Hero con video 1.2.0. */
.lp-video-hero { position: relative; width: 100%; overflow: hidden; background: #182824; }
.lp-video-hero video { display: block; width: 100%; height: auto; aspect-ratio: 10 / 3; object-fit: contain; }
.lp-video-hero-controls { position: absolute; right: clamp(12px, 2vw, 32px); bottom: clamp(12px, 2vw, 28px); display: flex; gap: 12px; }
.lp-video-hero-control-extra { opacity: 0; pointer-events: none; transform: translateY(5px); }
.lp-video-hero:hover .lp-video-hero-control-extra, .lp-video-hero:focus-within .lp-video-hero-control-extra { opacity: 1; pointer-events: auto; transform: none; }
.lp-video-hero-control { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; padding: 0; border: 1px solid #ffffffa6; border-radius: 50%; background: #102721b8; color: #fff; cursor: pointer; backdrop-filter: blur(8px); box-shadow: 0 2px 12px #0003; transition: background .2s ease, opacity .2s ease, transform .2s ease; }
.lp-video-hero-control[hidden] { display: none; }
.lp-video-hero:fullscreen { display: flex; align-items: center; width: 100%; height: 100%; background: #000; }
.lp-video-hero:fullscreen video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
.lp-video-hero-control:hover { background: #102721; }
.lp-video-hero-control:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.lp-video-hero-control svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-video-hero-control svg [hidden] { display: none; }
.lp-video-hero-status { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 215px); padding: 6px 10px; border-radius: 4px; background: #102721df; color: white; font: 13px Arial, sans-serif; }
.lp-video-hero-status:empty { display: none; }
@media (hover: none), (pointer: coarse) { .lp-video-hero-control-extra { opacity: 1; pointer-events: auto; transform: none; } }
@media (max-width: 600px) { .lp-video-hero-controls { gap: 8px; } .lp-video-hero-control { width: 44px; height: 44px; flex-basis: 44px; } }
@media (prefers-reduced-motion: reduce) { .lp-video-hero-controls, .lp-video-hero-control { transition: none; transform: none; } }