/* Yujju design system — hero animado (reemplazo de Revolution Slider).

   Contrato de marcado (containers clásicos de Elementor, ver HeroLayout):
     .yj-hero                         contenedor ancho completo (sin e-con-inner)
       .yj-hero__slide[--cover|--split]  un container por slide (fondo clásico editable)
         .yj-hero__content            eyebrow · título · texto · acciones
         .yj-hero__media (solo split)  .yj-hero__img--main + .yj-hero__img--accent
   Sin JS: todos los slides comparten la misma celda de grid (alto = el mayor) y solo
   el primero es visible. hero-slider.js agrega .is-ready, .is-active, .is-entering,
   .is-leaving, .is-paused y la navegación (.yj-hero__nav).
   Tiempos (de slider-1/slider-3): capas 1000 ms con desfase 0 / 310 / 620 ms,
   imágenes 1200 ms (acento a 1100 ms), Ken Burns 10 s hasta 115 %. */

.yj-ds .elementor .yj-hero {
    --yj-hero-fade: 700ms;               /* = FADE_MS en hero-slider.js */
    --yj-hero-ease: cubic-bezier(.215, .61, .355, 1);      /* power3.out */
    --yj-hero-ease-media: cubic-bezier(.77, 0, .175, 1);   /* power4.inOut */
    --yj-hero-h: clamp(520px, 42vw, 680px);
    position: relative;
    display: grid !important;
    grid-template: 1fr / 1fr;
    padding: 0 !important;
    overflow: hidden;
    isolation: isolate;
    background: var(--yj-blush);
}

/* ── Slides apilados ──────────────────────────────────────────────────────── */
.yj-ds .elementor .yj-hero > .yj-hero__slide {
    grid-area: 1 / 1;
    position: relative;
    min-height: var(--yj-hero-h);
    padding: var(--yj-space-8) var(--yj-space-5) !important;
    justify-content: center;
    /* El fondo de Elementor se pinta en ::before (Ken Burns sin mover el texto). */
    background-size: 0 0 !important;
}
.yj-ds .elementor .yj-hero > .yj-hero__slide > .e-con-inner {
    position: relative;
    z-index: 2;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--yj-space-7);
    width: 100%;
}
.yj-ds .elementor .yj-hero > .yj-hero__slide::before,
.yj-ds .elementor .yj-hero > .yj-hero__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.yj-ds .elementor .yj-hero > .yj-hero__slide::before {
    z-index: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    transform-origin: 60% 50%;
}
/* Sin JS: solo el primer slide. */
.yj-ds .elementor .yj-hero > .yj-hero__slide ~ .yj-hero__slide {
    opacity: 0;
    visibility: hidden;
}

/* ── Variante cover: foto a sangre + velo para leer el texto ──────────────── */
.yj-ds .elementor .yj-hero > .yj-hero__slide--cover::after {
    z-index: 1;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--yj-ink) 78%, transparent) 0%,
        color-mix(in srgb, var(--yj-ink) 45%, transparent) 45%,
        color-mix(in srgb, var(--yj-ink) 0%, transparent) 80%);
}
.yj-ds .elementor .yj-hero__slide--cover .yj-hero__eyebrow .elementor-heading-title { color: var(--yj-primary-soft) !important; }
.yj-ds .elementor .yj-hero__slide--cover .yj-hero__title .elementor-heading-title,
.yj-ds .elementor .yj-hero__slide--cover .yj-hero__text,
.yj-ds .elementor .yj-hero__slide--cover .yj-hero__text p { color: var(--yj-white) !important; }

/* ── Variante split: superficie blush + fotos de producto a la derecha ────── */
.yj-ds .elementor .yj-hero > .yj-hero__slide--split { background-color: var(--yj-blush); }

/* ── Contenido ────────────────────────────────────────────────────────────── */
.yj-ds .elementor .yj-hero .yj-hero__content {
    flex: 0 1 620px;
    max-width: 620px;
    padding: 0 !important;
    gap: var(--yj-space-4);
}
.yj-ds .elementor .yj-hero .yj-hero__content > .elementor-widget { margin: 0 !important; }
.yj-ds .elementor .yj-hero .yj-hero__eyebrow .elementor-heading-title {
    font-family: var(--yj-font-body) !important;
    font-size: var(--yj-text-xs) !important;
    font-weight: 600 !important;
    letter-spacing: var(--yj-tracking-caps) !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    color: var(--yj-primary-strong);
}
.yj-ds .elementor .yj-hero .yj-hero__title .elementor-heading-title {
    font-family: var(--yj-font-display) !important;
    font-weight: 500 !important;
    font-size: clamp(36px, 3.4vw + 14px, 60px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.015em !important;
    color: var(--yj-ink);
    margin: 0;
}
.yj-ds .elementor .yj-hero .yj-hero__text,
.yj-ds .elementor .yj-hero .yj-hero__text p {
    font-family: var(--yj-font-body) !important;
    font-size: var(--yj-text-lg) !important;
    line-height: var(--yj-leading) !important;
    color: var(--yj-text);
    margin: 0;
    max-width: 52ch;
}
.yj-ds .elementor .yj-hero .yj-hero__actions {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: var(--yj-space-3);
    padding: var(--yj-space-3) 0 0 !important;
    width: auto;
}
.yj-ds .elementor .yj-hero .yj-hero__actions > .elementor-widget { width: auto; margin: 0 !important; }

/* Secundario outline (mismo sistema que .btn-outline de buttons.css). */
.yj-ds .elementor .yj-hero .yj-hero__btn--secondary .elementor-button {
    color: var(--yj-ink) !important;
    background: transparent !important;
    border-color: var(--yj-ink) !important;
}
.yj-ds .elementor .yj-hero .yj-hero__btn--secondary .elementor-button:hover,
.yj-ds .elementor .yj-hero .yj-hero__btn--secondary .elementor-button:focus-visible {
    color: var(--yj-white) !important;
    background: var(--yj-ink) !important;
}
.yj-ds .elementor .yj-hero__slide--cover .yj-hero__btn--secondary .elementor-button {
    color: var(--yj-white) !important;
    border-color: var(--yj-white) !important;
}
.yj-ds .elementor .yj-hero__slide--cover .yj-hero__btn--secondary .elementor-button:hover,
.yj-ds .elementor .yj-hero__slide--cover .yj-hero__btn--secondary .elementor-button:focus-visible {
    color: var(--yj-ink) !important;
    background: var(--yj-white) !important;
}

/* ── Fotos (split) ────────────────────────────────────────────────────────── */
.yj-ds .elementor .yj-hero .yj-hero__media {
    position: relative;
    flex: 0 1 46%;
    max-width: 560px;
    padding: 0 !important;
    align-self: stretch;
    justify-content: center;
}
.yj-ds .elementor .yj-hero .yj-hero__img { margin: 0 !important; }
.yj-ds .elementor .yj-hero .yj-hero__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--yj-radius);
}
.yj-ds .elementor .yj-hero .yj-hero__img--main {
    width: 78% !important;
    margin-left: auto !important;
    aspect-ratio: 5 / 6;
    overflow: hidden;
    border-radius: var(--yj-radius);
}
.yj-ds .elementor .yj-hero .yj-hero__img--accent {
    position: absolute !important;
    left: 0;
    bottom: 8%;
    width: 36% !important;
    aspect-ratio: 3 / 4;
    border: 6px solid var(--yj-white);
    border-radius: var(--yj-radius);
    overflow: hidden;
    z-index: 2;
}

/* ── Con JS: fundido entre slides ─────────────────────────────────────────── */
.yj-ds .elementor .yj-hero.is-ready > .yj-hero__slide {
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    transition: opacity var(--yj-hero-fade) ease, visibility 0s linear var(--yj-hero-fade);
}
.yj-ds .elementor .yj-hero.is-ready > .yj-hero__slide.is-leaving { z-index: 1; visibility: visible; }
.yj-ds .elementor .yj-hero.is-ready > .yj-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    transition: opacity var(--yj-hero-fade) ease, visibility 0s;
}

/* Ken Burns: sigue durante la salida (.is-leaving) para no saltar. */
.yj-ds .elementor .yj-hero.is-ready > .yj-hero__slide.is-active::before,
.yj-ds .elementor .yj-hero.is-ready > .yj-hero__slide.is-leaving::before {
    animation: yj-hero-zoom 10s cubic-bezier(.25, .46, .45, .94) forwards;
}
.yj-ds .elementor .yj-hero.is-ready > .yj-hero__slide.is-active .yj-hero__img--main img,
.yj-ds .elementor .yj-hero.is-ready > .yj-hero__slide.is-leaving .yj-hero__img--main img {
    animation: yj-hero-zoom-soft 10s cubic-bezier(.25, .46, .45, .94) forwards;
}

/* Entrada escalonada (solo al cambiar de slide; la carga inicial no anima). */
.yj-ds .elementor .yj-hero__slide.is-entering .yj-hero__eyebrow { animation: yj-hero-in 1000ms var(--yj-hero-ease) 0ms both; }
.yj-ds .elementor .yj-hero__slide.is-entering .yj-hero__title   { animation: yj-hero-in 1000ms var(--yj-hero-ease) 100ms both; }
.yj-ds .elementor .yj-hero__slide.is-entering .yj-hero__text    { animation: yj-hero-in 1000ms var(--yj-hero-ease) 310ms both; }
.yj-ds .elementor .yj-hero__slide.is-entering .yj-hero__actions { animation: yj-hero-in 1000ms var(--yj-hero-ease) 620ms both; }
.yj-ds .elementor .yj-hero__slide.is-entering .yj-hero__img--main   { animation: yj-hero-media-in 1200ms var(--yj-hero-ease-media) 0ms both; }
.yj-ds .elementor .yj-hero__slide.is-entering .yj-hero__img--accent { animation: yj-hero-media-in 1200ms var(--yj-hero-ease-media) 1100ms both; }

@keyframes yj-hero-in {
    from { opacity: 0; transform: translateX(-50px); }
    to   { opacity: 1; transform: none; }
}
@keyframes yj-hero-media-in {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: none; }
}
@keyframes yj-hero-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.15); }
}
@keyframes yj-hero-zoom-soft {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}

/* ── Navegación (la crea el JS) ───────────────────────────────────────────── */
.yj-ds .elementor .yj-hero__nav {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: var(--yj-space-5);
    transform: translateX(-50%);
    width: min(1320px, 100% - 2 * var(--yj-space-5));
    display: flex;
    align-items: center;
    gap: var(--yj-space-2);
    pointer-events: none;
}
.yj-ds .elementor .yj-hero__nav > * { pointer-events: auto; }
.yj-ds .elementor .yj-hero__dots { display: flex; gap: var(--yj-space-2); margin: 0 var(--yj-space-2); }
.yj-ds .elementor .yj-hero__nav button {
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    box-shadow: none;
}
.yj-ds .elementor .yj-hero__arrow,
.yj-ds .elementor .yj-hero__toggle {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--yj-radius-pill) !important;
    color: var(--yj-ink) !important;
    background: var(--yj-white) !important;
    border: 1px solid var(--yj-line) !important;
    font-size: 26px !important;
    transition: background-color var(--yj-transition), color var(--yj-transition);
}
.yj-ds .elementor .yj-hero__arrow span { transform: translateY(-2px); }
.yj-ds .elementor .yj-hero__arrow:hover,
.yj-ds .elementor .yj-hero__toggle:hover { color: var(--yj-white) !important; background: var(--yj-ink) !important; border-color: var(--yj-ink) !important; }
.yj-ds .elementor .yj-hero__toggle { margin-left: auto; width: 36px; height: 36px; }
/* Ícono pausa (dos barras) / reproducir (triángulo) solo con CSS. */
.yj-ds .elementor .yj-hero__toggle::before {
    content: "";
    width: 10px;
    height: 12px;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
    box-sizing: border-box;
}
.yj-ds .elementor .yj-hero__toggle.is-paused::before {
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 6px 0 6px 10px;
    border-left-color: currentColor;
    margin-left: 3px;
}
.yj-ds .elementor .yj-hero__dot {
    position: relative;
    width: 28px;
    height: 24px;
    background: transparent !important;
    overflow: hidden;
}
.yj-ds .elementor .yj-hero__dot::before,
.yj-ds .elementor .yj-hero__dot::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    margin-top: -1.5px;
    border-radius: var(--yj-radius-pill);
}
.yj-ds .elementor .yj-hero__dot::before { background: color-mix(in srgb, var(--yj-ink) 25%, transparent); }
.yj-ds .elementor .yj-hero__dot::after { background: var(--yj-primary-strong); transform: scaleX(0); transform-origin: left; }
.yj-ds .elementor .yj-hero__dot.is-active::after { animation: yj-hero-progress var(--yj-hero-interval, 9000ms) linear forwards; }
.yj-ds .elementor .yj-hero.is-paused .yj-hero__dot.is-active::after { animation-play-state: paused; }
.yj-ds .elementor .yj-hero__slide--cover ~ .yj-hero__nav .yj-hero__dot::before { background: color-mix(in srgb, var(--yj-white) 40%, transparent); }
.yj-ds .elementor .yj-hero__nav button:focus-visible { outline: 2px solid var(--yj-primary-strong); outline-offset: 2px; }

@keyframes yj-hero-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ── Tablet y móvil ───────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .yj-ds .elementor .yj-hero .yj-hero__media { flex-basis: 42%; }
    .yj-ds .elementor .yj-hero .yj-hero__img--accent { display: none; }
}
@media (max-width: 767px) {
    .yj-ds .elementor .yj-hero { --yj-hero-h: 560px; }
    .yj-ds .elementor .yj-hero > .yj-hero__slide { padding: var(--yj-space-6) var(--yj-space-4) var(--yj-space-9) !important; }
    .yj-ds .elementor .yj-hero > .yj-hero__slide > .e-con-inner { flex-direction: column !important; align-items: stretch; gap: var(--yj-space-5); }
    .yj-ds .elementor .yj-hero .yj-hero__content { flex: none; max-width: none; }
    .yj-ds .elementor .yj-hero .yj-hero__title .elementor-heading-title { font-size: clamp(32px, 8.5vw, 40px) !important; }
    .yj-ds .elementor .yj-hero .yj-hero__text,
    .yj-ds .elementor .yj-hero .yj-hero__text p { font-size: var(--yj-text-md) !important; }

    /* Cover: texto abajo sobre un velo vertical más fuerte. */
    .yj-ds .elementor .yj-hero > .yj-hero__slide--cover { justify-content: flex-end; }
    .yj-ds .elementor .yj-hero > .yj-hero__slide--cover > .e-con-inner { justify-content: flex-end; }
    .yj-ds .elementor .yj-hero > .yj-hero__slide--cover::after {
        background: linear-gradient(0deg,
            color-mix(in srgb, var(--yj-ink) 88%, transparent) 0%,
            color-mix(in srgb, var(--yj-ink) 60%, transparent) 55%,
            color-mix(in srgb, var(--yj-ink) 15%, transparent) 100%);
    }

    /* Split: foto arriba (recortada), texto debajo. */
    .yj-ds .elementor .yj-hero .yj-hero__media { order: -1; flex: none; max-width: none; align-self: auto; }
    .yj-ds .elementor .yj-hero .yj-hero__img--main { width: 100% !important; aspect-ratio: 4 / 3; max-height: 240px; }
    .yj-ds .elementor .yj-hero__nav { bottom: var(--yj-space-4); }
    .yj-ds .elementor .yj-hero__arrow { display: none; }  /* en móvil: swipe + puntos */
}

/* ── Movimiento reducido: sin zoom ni escalonado, solo fundido ────────────── */
@media (prefers-reduced-motion: reduce) {
    .yj-ds .elementor .yj-hero { --yj-hero-fade: 200ms; }
    .yj-ds .elementor .yj-hero .yj-hero__slide::before,
    .yj-ds .elementor .yj-hero .yj-hero__slide *,
    .yj-ds .elementor .yj-hero__dot::after { animation: none !important; }
    .yj-ds .elementor .yj-hero__dot.is-active::after { transform: scaleX(1); }
}

/* ── Editor de Elementor: slides apilados y editables ─────────────────────── */
.yj-ds.elementor-editor-active .yj-hero { display: flex !important; flex-direction: column; }
.yj-ds.elementor-editor-active .yj-hero > .yj-hero__slide ~ .yj-hero__slide { opacity: 1; visibility: visible; }