/**
 * Componente Hero Slider
 * PiscinasDeArena.es
 *
 * Tipografía:
 * - Títulos: Instrument Sans mediante --pa-font-display
 * - Textos: Manrope mediante --pa-font-primary
 *
 * El componente hereda colores, sombras, radios y transiciones
 * desde el sistema global definido en tokens.css.
 */

/*
|--------------------------------------------------------------------------
| Contenedor principal
|--------------------------------------------------------------------------
*/

.pdaHero2026 {
    --pda-hero-overlay-opacity: 0.58;
    --pda-hero-transition: var(--pa-transition-slow, 500ms);

    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    min-height: clamp(680px, 100svh, 980px);

    display: flex;
    align-items: center;

    color: var(--pa-color-white);
    background: var(--pa-color-primary-dark);

    font-family: var(--pa-font-primary);
}

/*
|--------------------------------------------------------------------------
| Slides
|--------------------------------------------------------------------------
*/

.pdaHero2026__slides,
.pdaHero2026__slide,
.pdaHero2026__overlay {
    position: absolute;
    inset: 0;
}

.pdaHero2026__slides {
    z-index: -3;
    overflow: hidden;
}

.pdaHero2026__slide {
    opacity: 0;
    visibility: hidden;

    transition:
        opacity var(--pda-hero-transition) ease,
        visibility var(--pda-hero-transition) ease;
}

.pdaHero2026__slide.is-active {
    opacity: 1;
    visibility: visible;
}

.pdaHero2026__slide picture {
    display: block;
    width: 100%;
    height: 100%;
}

.pdaHero2026__image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transform: scale(1);
    will-change: transform;
}

.pdaHero2026__slide.is-active .pdaHero2026__image {
    animation: pdaHero2026Zoom 10s linear forwards;
}

@keyframes pdaHero2026Zoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.105);
    }
}

/*
|--------------------------------------------------------------------------
| Overlay
|--------------------------------------------------------------------------
*/

.pdaHero2026__overlay {
    z-index: -2;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(7, 55, 60, 0.34) 0%,
            rgba(13, 111, 117, 0.44) 45%,
            rgba(7, 85, 90, 0.64) 100%
        ),
        linear-gradient(
            90deg,
            rgba(5, 48, 53, 0.32) 0%,
            rgba(13, 111, 117, 0.08) 50%,
            rgba(5, 48, 53, 0.28) 100%
        );

    opacity: var(--pda-hero-overlay-opacity);
}

/*
|--------------------------------------------------------------------------
| Contenedor de contenido
|--------------------------------------------------------------------------
*/

.pdaHero2026__container {
    position: relative;
    z-index: 2;

    width: min(
        var(--pa-container, 1240px),
        calc(100% - 48px)
    );

    margin-inline: auto;
    padding-block: 130px 110px;
}

.pdaHero2026__content {
    width: min(100%, 1040px);
    margin-inline: auto;

    text-align: center;
}

/*
|--------------------------------------------------------------------------
| Eyebrow
|--------------------------------------------------------------------------
*/

.pdaHero2026__eyebrow {
    margin: 0 0 28px;

    color: var(--pa-color-white);

    font-family: var(--pa-font-primary);
    font-size: clamp(
        var(--pa-font-size-xs, 0.75rem),
        1.2vw,
        var(--pa-font-size-md, 1.125rem)
    );
    font-weight: var(--pa-font-weight-bold, 700);
    line-height: 1.2;
    letter-spacing: 0.15em;
    text-transform: uppercase;

    opacity: 0;
    transform: translateY(18px);

    animation:
        pdaHero2026Reveal
        700ms
        ease
        100ms
        forwards;
}

/*
|--------------------------------------------------------------------------
| Título principal
|--------------------------------------------------------------------------
*/

.pdaHero2026__title {
    max-width: 1080px;
    margin: 0 auto;

    color: var(--pa-color-white);

    font-family: var(--pa-font-display);
    font-size: clamp(3rem, 6vw, 6.5rem);
    font-weight: var(--pa-font-weight-bold, 700);
    line-height: 0.94;
    letter-spacing: -0.052em;

    text-wrap: balance;

    opacity: 0;
    transform: translateY(24px);

    animation:
        pdaHero2026Reveal
        850ms
        ease
        220ms
        forwards;
}

/*
|--------------------------------------------------------------------------
| Título contorneado
|--------------------------------------------------------------------------
*/

.pdaHero2026__outline-title {
    margin: 24px 0 0;

    color: transparent;

    font-family: var(--pa-font-display);
    font-size: clamp(2.7rem, 5vw, 5.4rem);
    font-weight: var(--pa-font-weight-medium, 500);
    line-height: 0.98;
    letter-spacing: -0.035em;
    text-transform: uppercase;

    text-wrap: balance;

    -webkit-text-stroke:
        1.5px
        rgba(255, 255, 255, 0.92);

    paint-order: stroke fill;

    opacity: 0;
    transform: translateY(24px);

    animation:
        pdaHero2026Reveal
        850ms
        ease
        340ms
        forwards;
}

/*
|--------------------------------------------------------------------------
| Descripción
|--------------------------------------------------------------------------
*/

.pdaHero2026__description {
    width: min(100%, var(--pa-container-small, 860px));
    max-width: 720px;

    margin: 26px auto 0;

    color: rgba(255, 255, 255, 0.92);

    font-family: var(--pa-font-primary);
    font-size: clamp(
        var(--pa-font-size-base, 1rem),
        1.25vw,
        var(--pa-font-size-md, 1.125rem)
    );
    font-weight: var(--pa-font-weight-regular, 400);
    line-height: 1.72;
    letter-spacing: -0.008em;

    text-wrap: pretty;

    opacity: 0;
    transform: translateY(20px);

    animation:
        pdaHero2026Reveal
        800ms
        ease
        460ms
        forwards;
}

/*
|--------------------------------------------------------------------------
| Botones
|--------------------------------------------------------------------------
*/

.pdaHero2026__actions {
    margin-top: 36px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: var(--pa-space-4, 1rem);

    opacity: 0;
    transform: translateY(20px);

    animation:
        pdaHero2026Reveal
        800ms
        ease
        580ms
        forwards;
}

.pdaHero2026__button {
    min-width: 230px;
    min-height: 58px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    padding-inline: 28px;

    border: 1px solid transparent;
    border-radius: var(--pa-radius-sm, 0.5rem);

    font-family: var(--pa-font-primary);
    font-size: var(--pa-font-size-sm, 0.875rem);
    font-weight: var(--pa-font-weight-bold, 700);
    line-height: 1;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    text-decoration: none;

    transition:
        transform var(--pa-transition-base),
        background-color var(--pa-transition-base),
        color var(--pa-transition-base),
        border-color var(--pa-transition-base),
        box-shadow var(--pa-transition-base);
}

.pdaHero2026__button svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform
        var(--pa-transition-base);
}

.pdaHero2026__button:hover {
    transform: translateY(-3px);
}

.pdaHero2026__button:hover svg {
    transform: translateX(4px);
}

.pdaHero2026__button--primary {
    color: var(--pa-color-primary);
    background: var(--pa-color-white);

    box-shadow: var(--pa-shadow-sm);
}

.pdaHero2026__button--primary:hover {
    color: var(--pa-color-white);
    background: var(--pa-color-primary);

    box-shadow: var(--pa-shadow-md);
}

.pdaHero2026__button--secondary {
    color: var(--pa-color-white);

    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.pdaHero2026__button--secondary:hover {
    border-color: var(--pa-color-white);
    background: rgba(255, 255, 255, 0.18);
}

/*
|--------------------------------------------------------------------------
| Estados de foco
|--------------------------------------------------------------------------
*/

.pdaHero2026__button:focus-visible,
.pdaHero2026__arrow:focus-visible,
.pdaHero2026__dot:focus-visible {
    outline:
        3px
        solid
        var(--pa-color-accent);

    outline-offset: 4px;
}

/*
|--------------------------------------------------------------------------
| Flechas
|--------------------------------------------------------------------------
*/

.pdaHero2026__arrow {
    position: absolute;
    top: 50%;
    z-index: 4;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px
        solid
        rgba(255, 255, 255, 0.32);

    border-radius: var(--pa-radius-pill);

    color: var(--pa-color-white);
    background: rgba(7, 85, 90, 0.18);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        background-color var(--pa-transition-base),
        border-color var(--pa-transition-base),
        transform var(--pa-transition-base);
}

.pdaHero2026__arrow:hover {
    border-color: rgba(255, 255, 255, 0.86);
    background: rgba(255, 255, 255, 0.15);
}

.pdaHero2026__arrow--previous {
    left: clamp(18px, 3vw, 58px);
}

.pdaHero2026__arrow--previous:hover {
    transform: translate(-4px, -50%);
}

.pdaHero2026__arrow--next {
    right: clamp(18px, 3vw, 58px);
}

.pdaHero2026__arrow--next:hover {
    transform: translate(4px, -50%);
}

.pdaHero2026__arrow svg {
    width: 32px;
    height: 32px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
|--------------------------------------------------------------------------
| Paginación
|--------------------------------------------------------------------------
*/

.pdaHero2026__pagination {
    position: absolute;
    left: 50%;
    bottom: 38px;
    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    transform: translateX(-50%);
}

.pdaHero2026__dot {
    width: 10px;
    height: 10px;

    padding: 0;

    border:
        1px
        solid
        rgba(255, 255, 255, 0.95);

    border-radius: var(--pa-radius-pill);

    background: transparent;
    cursor: pointer;

    transition:
        width var(--pa-transition-base),
        background-color var(--pa-transition-base),
        transform var(--pa-transition-base);
}

.pdaHero2026__dot:hover {
    transform: scale(1.18);
}

.pdaHero2026__dot.is-active {
    width: 30px;
    background: var(--pa-color-white);
}

/*
|--------------------------------------------------------------------------
| Estado accesible del carrusel
|--------------------------------------------------------------------------
*/

.pdaHero2026__status {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);

    white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Animaciones
|--------------------------------------------------------------------------
*/

@keyframes pdaHero2026Reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1024px) {
    .pdaHero2026 {
        min-height: 760px;
    }

    .pdaHero2026__container {
        width: min(900px, calc(100% - 80px));
        padding-block: 120px 105px;
    }

    .pdaHero2026__arrow {
        width: 48px;
        height: 48px;
    }

    .pdaHero2026__arrow svg {
        width: 27px;
        height: 27px;
    }
}

/*
|--------------------------------------------------------------------------
| Móvil
|--------------------------------------------------------------------------
*/

@media (max-width: 767px) {
    .pdaHero2026 {
        min-height: 720px;
    }

    .pdaHero2026__container {
        width: min(100% - 38px, 620px);
        padding-block: 110px;
    }

    .pdaHero2026__content {
        text-align: left;
    }

    .pdaHero2026__eyebrow {
        margin-bottom: 20px;

        font-size: var(--pa-font-size-xs);
        line-height: 1.5;
        letter-spacing: 0.13em;
    }

    .pdaHero2026__title {
        margin-inline: 0;

        font-size: clamp(2.65rem, 13vw, 4.5rem);
        line-height: 0.97;
        letter-spacing: -0.042em;
    }

    .pdaHero2026__outline-title {
        margin-top: 18px;

        font-size: clamp(2.25rem, 11.5vw, 3.9rem);
        line-height: 1;

        -webkit-text-stroke-width: 1.2px;
    }

    .pdaHero2026__description {
        margin-inline: 0;
        margin-top: 22px;

        font-size: var(--pa-font-size-base);
        line-height: 1.65;
    }

    .pdaHero2026__actions {
        justify-content: flex-start;
        align-items: stretch;

        gap: var(--pa-space-3);
    }

    .pdaHero2026__button {
        width: 100%;
        min-width: 0;
    }

    .pdaHero2026__arrow {
        top: auto;
        bottom: 26px;

        width: 44px;
        height: 44px;

        transform: none;
    }

    .pdaHero2026__arrow--previous {
        left: 20px;
    }

    .pdaHero2026__arrow--next {
        right: 20px;
    }

    .pdaHero2026__arrow--previous:hover {
        transform: translateX(-3px);
    }

    .pdaHero2026__arrow--next:hover {
        transform: translateX(3px);
    }

    .pdaHero2026__pagination {
        bottom: 43px;
    }
}

@media (max-width: 420px) {
    .pdaHero2026__container {
        width: calc(100% - 30px);
    }

    .pdaHero2026__outline-title {
        overflow-wrap: anywhere;
    }
}

/*
|--------------------------------------------------------------------------
| Accesibilidad: reducción de movimiento
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
    .pdaHero2026__slide,
    .pdaHero2026__image,
    .pdaHero2026__eyebrow,
    .pdaHero2026__title,
    .pdaHero2026__outline-title,
    .pdaHero2026__description,
    .pdaHero2026__actions,
    .pdaHero2026__button,
    .pdaHero2026__button svg,
    .pdaHero2026__arrow,
    .pdaHero2026__dot {
        animation: none;
        transition-duration: 0.01ms;
    }

    .pdaHero2026__eyebrow,
    .pdaHero2026__title,
    .pdaHero2026__outline-title,
    .pdaHero2026__description,
    .pdaHero2026__actions {
        opacity: 1;
        transform: none;
    }
}