/* ==========================================================================
   1. VARIABLES
   Cambia aquí colores, fuentes y tamaños de toda la página.
   ========================================================================== */

:root {
    /* Colores */
    --color-page: #090909;
    --color-surface: #17120e;
    --color-text: #ffffff;
    --color-arrow: #5b5b5b;
    --color-arrow-hover: #707070;
    --color-accent: #ffab00; /* capa de color sobre el fondo */
    /* Capa de color sobre el fondo desenfocado: 0 = invisible, 1 = color sólido */
    --tint-opacity: 0.7;
    /* Tipografía */
    --font-main: "Lato", system-ui, sans-serif;
    --weight-regular: 400;
    --weight-bold: 700;
    --weight-black: 900;
    /* Contenedor: ancho máximo de tarjetas + flechas */
    --container-max: 1320px;
    /* Tarjeta: tamaño y proporción. El ancho es un % del contenedor (cqw),
     así que se adapta solo al espacio disponible. */
    --card-width: min(66cqw, 880px);
    --card-ratio: 16 / 10;
    --card-radius: 26px;
    /* Espacio vertical de la sección */
    --section-padding: clamp(28px, 5vw, 72px);
    /* Animación */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ==========================================================================
   2. RESET Y BASE
   ========================================================================== */
/*
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-page);
}

button {
    font: inherit;
}
*/

/* ==========================================================================
   3. ESCENA Y FONDO DESENFOCADO
   ========================================================================== */

.experience {
    position: relative;
    width: 100%;
    padding-block: var(--section-padding);
    overflow: hidden;
    isolation: isolate;
    background: var(--color-page);
    color: var(--color-text);
    font-family: var(--font-main);
    font-weight: var(--weight-regular);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    padding-top: 60px;
}

    .experience h2 {
        text-align: center;
        font-size: 40px;
        font-weight: 700;
        font-family: var(--font-main);
        margin-bottom:40px;
    }

    @media(min-width: 475px){
        .experience h2 {
            font-size: 60px;
            margin-bottom:90px;
        }

        .experience{
            padding-top: 90px;
        }
    }

.experience .backdrop {
    position: absolute;
    inset: -5%;
    z-index: -2;
    overflow: hidden;
}

/* La foto de la tarjeta activa se aplica aquí desde js/main.js */
    .experience .backdrop__image {
        position: absolute;
        inset: 0;
        background-color: var(--color-surface);
        background-position: center;
        background-size: cover;
        filter: blur(35px);
        transform: scale(1.1);
        transition: background-image 0.8s ease;
    }

    .experience .backdrop__overlay {
        position: absolute;
        inset: 0;
        background: radial-gradient( circle at 50% 45%, transparent 0%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.82) 100% ), linear-gradient( 180deg, rgba(0, 0, 0, 0.55), transparent 35%, rgba(0, 0, 0, 0.75) );
        backdrop-filter: blur(3px);
    }


    /* Capa de color sobre el fondo desenfocado.
   Color: --color-accent · Intensidad: --tint-opacity */
    .experience .backdrop__tint {
        position: absolute;
        inset: 0;
        background: var(--color-accent);
        opacity: var(--tint-opacity);
        pointer-events: none;
    }


/* ==========================================================================
   4. CARRUSEL Y TARJETAS
   ========================================================================== */

/* La sección es enfocable para poder usar el teclado; sin anillo al hacer clic */
.experience:focus {
    outline: none;
}

.experience:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: -4px;
}

/* Contenedor de tarjetas + flechas. Máximo 1320px y centrado.
   El recorte horizontal evita que las tarjetas laterales se salgan:
   fuera del contenedor solo se ve el fondo. */
    .experience .carousel {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: min(100%, var(--container-max));
        margin-inline: auto;
        container-type: inline-size;
        touch-action: pan-y;
    }

/* Contenedor de tarjetas. Es "container" para poder usar unidades cqw:
   los textos de la tarjeta escalan con el ancho de la propia tarjeta. */
    .experience .carousel__track {
        position: relative;
        flex: none;
        width: var(--card-width);
        aspect-ratio: var(--card-ratio);
        perspective: 1800px;
        container-type: inline-size;
    }

/* --- Tarjeta (estado base: oculta a la derecha) --- */
    .experience .card {
        position: absolute;
        inset: 0;
        overflow: hidden;
        border-radius: var(--card-radius);
        background: var(--color-surface);
        box-shadow: 0 50px 120px rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        touch-action: pan-y;
        transform: translateX(100%) scale(0.72) rotateY(-25deg);
        filter: brightness(0.55) saturate(0.65);
        transition: transform 0.9s var(--ease-out), opacity 0.7s ease, filter 0.7s ease;
    }

        .experience .card::after {
            content: "";
            position: absolute;
            inset: 0;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: inherit;
            pointer-events: none;
        }

    /* --- Estados: los asigna js/main.js --- */
        .experience .card.is-active {
            z-index: 3;
            opacity: 1;
            pointer-events: auto;
            transform: translateX(0) scale(1) rotateY(0);
            filter: brightness(0.95) saturate(1);
        }

        .experience .card.is-previous {
            z-index: 1;
            opacity: 0.5;
            transform: translateX(-72%) scale(0.78) rotateY(22deg);
            filter: brightness(0.45);
        }

        .experience .card.is-next {
            z-index: 1;
            opacity: 0.5;
            transform: translateX(72%) scale(0.78) rotateY(-22deg);
            filter: brightness(0.45);
        }

/* --- Foto --- */
    .experience .card__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Punto de enfoque del recorte. Se ajusta por tarjeta en el HTML
     con style="--focus: 50% 30%" (horizontal vertical). */
        object-position: var(--focus, 50% 30%);
        transform: scale(1.08);
        transition: transform 1.2s var(--ease-out);
        user-select: none;
    }

    .experience .card.is-active .card__image {
        transform: scale(1);
    }

/* Variante para fotos verticales (clase .card--portrait):
   una copia desenfocada rellena la tarjeta y la foto se muestra entera. */
    .experience .card__image--backdrop,
    .experience .card.is-active .card__image--backdrop {
        filter: blur(28px) brightness(0.7);
        transform: scale(1.3);
    }

    .experience .card__image--portrait {
        left: auto;
        right: 6%;
        width: auto;
        max-width: 60%;
        object-fit: contain;
    }

/* --- Degradado para dar legibilidad al texto --- */
    .experience .card__shade {
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.25) 45%, transparent 70% ), linear-gradient( 180deg, transparent 40%, rgba(0, 0, 0, 0.7) 100% );
    }

/* --- Brillo decorativo de la esquina --- */
    .experience .card__glow {
        position: absolute;
        top: -10%;
        right: -20%;
        width: 50%;
        aspect-ratio: 1;
        background: rgba(255, 255, 255, 0.2);
        filter: blur(80px);
        opacity: 0;
        transition: opacity 0.8s;
    }

    .experience .card.is-active .card__glow {
        opacity: 0.3;
    }


/* ==========================================================================
   5. CONTENIDO DE LA TARJETA
   Todos los tamaños usan cqw (% del ancho de la tarjeta) con límites
   mínimo y máximo (clamp), así el diseño mantiene la proporción.
   ========================================================================== */

    .experience .card__content {
        position: absolute;
        bottom: 4.6cqw;
        left: 4.4cqw;
        right: 4.4cqw;
        z-index: 4;
    }

/* "Cocinero Revelación" */
    .experience .card__eyebrow {
        display: block;
        font-size: clamp(8px, 1cqw, 11px);
        font-weight: var(--weight-bold);
        letter-spacing: 0.3em;
        text-transform: uppercase;
        opacity: 0.75;
    }

/* Año grande */
    .experience .card__year {
        margin: 0.8cqw 0 1.4cqw;
        font-size: clamp(44px, 14.5cqw, 190px);
        font-weight: var(--weight-black);
        font-family: var(--font-main);
        line-height: 0.85;
        letter-spacing: -0.05em;
        text-align:left;
    }

/* Nombre del cocinero */
    .experience .card__name {
        margin: 0 0 2.4cqw;
        max-width: 15em;
        font-size: clamp(15px, 3.1cqw, 40px);
        font-weight: var(--weight-regular);
        line-height: 1.15;
        letter-spacing: 0.01em;
        text-wrap: balance;
        color:white;
    }

/* "Madrid Fusión · 2003" */
    .experience .card__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1.2cqw 2.4cqw;
        margin: 0;
        font-size: clamp(8px, 1cqw, 11px);
        letter-spacing: 0.18em;
        text-transform: uppercase;
        opacity: 0.7;
        color: white;
    }

        .experience .card__meta span + span {
            position: relative;
        }

            .experience .card__meta span + span::before {
                content: "";
                position: absolute;
                top: 50%;
                left: -13px;
                width: 3px;
                height: 3px;
                border-radius: 50%;
                background: var(--color-text);
                transform: translateY(-50%);
            }


/* ==========================================================================
   6. FLECHAS DE NAVEGACIÓN
   ========================================================================== */

    .experience .carousel__arrow {
        position: absolute;
        top: 50%;
        z-index: 8;
        display: grid;
        place-items: center;
        width: clamp(40px, 4.2cqw, 60px);
        aspect-ratio: 1;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--color-arrow);
        color: var(--color-text);
        cursor: pointer;
        transform: translateY(-50%);
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.25s, transform 0.25s;
    }

        .experience .carousel__arrow:hover {
            background: var(--color-arrow-hover);
            transform: translateY(-50%) scale(1.08);
        }

        .experience .carousel__arrow:focus-visible {
            outline: 2px solid var(--color-text);
            outline-offset: 3px;
        }

        .experience .carousel__arrow svg {
            width: 56%;
            height: 56%;
            overflow: visible;
            fill: none;
            stroke: var(--color-text);
            stroke-width: 4.2;
            stroke-linecap: butt;
            stroke-linejoin: miter;
            stroke-miterlimit: 10;
        }

/* Las flechas quedan DENTRO del contenedor de 1320px */
    .experience .carousel__arrow--prev {
        left: max(8px, 1.6cqw);
    }

    .experience .carousel__arrow--next {
        right: max(8px, 1.6cqw);
    }


/* ==========================================================================
   7. BARRA DE PROGRESO
   Va debajo del carrusel. El ancho de .progress__bar lo actualiza js/main.js.
   ========================================================================== */

    .experience .progress {
        width: min(88%, 1200px);
        height: 1px;
        margin: clamp(20px, 2.4vw, 32px) auto 0;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.15);
    }

    .experience .progress__bar {
        width: 0;
        height: 100%;
        background: var(--color-text);
        transition: width 0.8s var(--ease-out);
    }


/* ==========================================================================
   8. ADAPTACIÓN A PANTALLAS (RESPONSIVE)
   La sección no depende del alto de la pantalla, solo de su ancho.
   ========================================================================== */

/* --- Tablet: tarjeta algo más ancha para aprovechar el espacio --- */
@media (max-width: 1024px) {
    :root {
        --card-width: 72cqw;
    }
}

/* --- Móvil y pantallas estrechas ---
   Tarjeta casi a todo el ancho (4:3) y flechas debajo de la tarjeta. */
@media (max-width: 760px) {
    :root {
        --card-width: 88cqw;
        --card-ratio: 4 / 3;
        --card-radius: 18px;
    }

    .experience .carousel {
        padding-bottom: 76px;
    }

    .experience .carousel__arrow {
        top: auto;
        bottom: 4px;
        transform: none;
    }

        .experience .carousel__arrow:hover {
            transform: scale(1.08);
        }

    .experience .carousel__arrow--prev {
        left: calc(50% - 56px);
    }

    .experience .carousel__arrow--next {
        right: calc(50% - 56px);
    }

    .experience .card__year {
        font-size: clamp(44px, 19cqw, 120px);
    }

    .experience .card__name {
        font-size: clamp(15px, 4.6cqw, 30px);
    }

    .experience .card__eyebrow,
    .experience .card__meta {
        font-size: clamp(8px, 2.2cqw, 10px);
    }
}

/* --- Pantallas táctiles: sin efecto hover en las flechas --- */
@media (hover: none) {
    .experience .carousel__arrow:hover {
        background: var(--color-arrow);
        transform: translateY(-50%);
    }
}

@media (hover: none) and (max-width: 760px) {
    .experience .carousel__arrow:hover {
        transform: none;
    }
}


/* ==========================================================================
   9. ACCESIBILIDAD
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .experience .card,
    .experience .card__image,
    .experience .card__glow,
    .experience .carousel__arrow,
    .experience .backdrop__image,
    .experience .progress__bar {
        transition-duration: 0.01ms !important;
    }
}