/* ═══════════════════════════════════════════════════════════════════
   rwe-hero-slider — CSS del slider hero
   R1: sacado del <style> inline (#uid scope, 137 líneas).

   El JS engancha por ids con sufijo (uid-track/-prev/-next) y por #uid .rws-dot,
   y por clases fijas .rws-*. Por eso el wrapper conserva su id; las clases pasan
   a colgar de .rws-hero. Los keyframes rws-kb son globales fijos.

   Cálculos que se resuelven en PHP y llegan como variables ya listas:
     --rws-align-items, --rws-textalign  (del ternario de $align)
     --rws-logo-ml, --rws-logo-mr        (margin del logo según $align)
     --rws-arrows-display, --rws-dots-display  (mostrar/ocultar)
     --rws-kb-dur                        (duración Ken Burns)

   Variables (inyectadas en el wrapper .rws-hero):
     --rws-h / --rws-hm            alto (desktop/móvil, con px)
     --rws-hsize / --rws-hsize-m   tamaño título (desktop/móvil)
     --rws-dsize / --rws-dsize-m   tamaño descripción
     --rws-speed                   transición del track (ms)
     --rws-hcolor / --rws-hweight  color y peso del título
     --rws-dcolor                  color descripción
     --rws-btn-bg / -btn-color / -btn-border / -btn-size
     --rws-btn-bg-h / -btn-color-h (hover del botón)
     --rws-arrow-color             color de flechas y borde de puntos
     --rws-dot-color / -dot-active color de puntos
   ═══════════════════════════════════════════════════════════════════ */

.rws-hero{ position:relative; overflow:hidden; height:var(--rws-h,600px); width:100%; }
@media (max-width:767px){
    .rws-hero{ height:var(--rws-hm,460px); }
    .rws-hero .rws-heading{ font-size:var(--rws-hsize-m,32px) !important; }
    .rws-hero .rws-desc{ font-size:var(--rws-dsize-m,15px) !important; }
}

/* Track */
.rws-hero .rws-track{ display:flex; height:100%; transition:transform var(--rws-speed,600ms) ease-in-out; will-change:transform; }

/* Slide */
.rws-hero .rws-slide{ flex:0 0 100%; position:relative; overflow:hidden; }

/* Imagen de fondo */
.rws-hero .rws-bg{ position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; }

/* Ken Burns */
.rws-hero .rws-slide.active .rws-bg.kb{ animation:rws-kb var(--rws-kb-dur,6s) ease-out forwards; }
@keyframes rws-kb{ from{ transform:scale(1.0); } to{ transform:scale(1.08); } }

/* Overlay */
.rws-hero .rws-overlay{ position:absolute; inset:0; }

/* Contenido */
.rws-hero .rws-content{
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    align-items:var(--rws-align-items,flex-start);
    justify-content:center;
    text-align:var(--rws-textalign,left);
    padding:40px 80px; z-index:2;
}
@media (max-width:767px){ .rws-hero .rws-content{ padding:24px 24px; } }

/* Animación de entrada del contenido */
.rws-hero .rws-logo,
.rws-hero .rws-heading,
.rws-hero .rws-desc,
.rws-hero .rws-btn-wrap{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.rws-hero .rws-slide.active .rws-logo{ opacity:1; transform:none; transition-delay:.05s; }
.rws-hero .rws-slide.active .rws-heading{ opacity:1; transform:none; transition-delay:.15s; }
.rws-hero .rws-slide.active .rws-desc{ opacity:1; transform:none; transition-delay:.3s; }
.rws-hero .rws-slide.active .rws-btn-wrap{ opacity:1; transform:none; transition-delay:.45s; }
.rws-hero .rws-logo{ margin-left:var(--rws-logo-ml,0); margin-right:var(--rws-logo-mr,0); }

.rws-hero .rws-heading{ color:var(--rws-hcolor,#fff); font-size:var(--rws-hsize,52px); font-weight:var(--rws-hweight,700); line-height:1.2; margin:0 0 16px; max-width:800px; }
.rws-hero .rws-desc{ color:var(--rws-dcolor,#eee); font-size:var(--rws-dsize,18px); line-height:1.5; margin:0 0 28px; max-width:700px; }

.rws-hero .rws-btn{
    display:inline-block; padding:14px 36px;
    background:var(--rws-btn-bg,#fff); color:var(--rws-btn-color,#111);
    border:2px solid var(--rws-btn-border,#fff); border-radius:3px;
    font-size:var(--rws-btn-size,15px); font-weight:600; letter-spacing:.5px;
    text-decoration:none; transition:background .2s, color .2s, border-color .2s;
}
.rws-hero .rws-btn:hover{ background:var(--rws-btn-bg-h,#111); color:var(--rws-btn-color-h,#fff); border-color:var(--rws-btn-bg-h,#111); }

/* Flechas */
.rws-hero .rws-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:10; background:rgba(0,0,0,.25); border:none;
    width:48px; height:48px; border-radius:50%;
    display:var(--rws-arrows-display,flex);
    align-items:center; justify-content:center;
    cursor:pointer; transition:background .2s; color:var(--rws-arrow-color,#fff);
}
.rws-hero .rws-arrow:hover{ background:rgba(0,0,0,.5); }
.rws-hero .rws-prev{ left:16px; }
.rws-hero .rws-next{ right:16px; }

/* Puntos */
.rws-hero .rws-dots{ position:absolute; bottom:16px; left:0; right:0; display:var(--rws-dots-display,flex); justify-content:center; gap:8px; z-index:10; }
.rws-hero .rws-dot{ width:10px; height:10px; border-radius:50%; border:2px solid var(--rws-arrow-color,#fff); background:var(--rws-dot-color,transparent); cursor:pointer; transition:background .2s, transform .2s; padding:0; }
.rws-hero .rws-dot.active{ background:var(--rws-dot-active,#fff); transform:scale(1.25); }