/* ============================================================
   ATPAL PHOTO CAROUSEL  —  atpal-carousel.css
   Efecto fan/coverflow: slide central grande y recto,
   los laterales rotados y más pequeños.
   ============================================================ */

:root {
    --ac-bg:          #f5f3ee;
    --ac-teal:        #0abf8c;
    --ac-teal-dark:   #089e75;
    --ac-white:       #ffffff;
    --ac-radius:      20px;
    --ac-shadow:      0 20px 60px rgba(0,0,0,.18);
    --ac-transition:  .5s cubic-bezier(.4,0,.2,1);
}

/* ── Sección ── */
.atpal-carousel-section {
    background: var(--ac-bg);
    padding: 60px 0 70px;
    overflow: hidden;
    box-sizing: border-box;
}

/* ── Contenedor del carrusel ── */
.atpal-carousel {
    position: relative;
    width: 100%;
    /* Altura fija para el track */
    height: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .atpal-carousel { height: 420px; }
}
@media (max-width: 480px) {
    .atpal-carousel { height: 340px; }
}

/* ── Track ── */
.atpal-carousel__track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ── Slide base ── */
.atpal-carousel__slide {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Tamaño del slide central */
    width: 340px;
    height: 480px;
    margin-top: -240px;
    margin-left: -170px;
    border-radius: var(--ac-radius);
    overflow: hidden;
    box-shadow: var(--ac-shadow);
    transition: transform var(--ac-transition),
                opacity   var(--ac-transition),
                z-index   0s;
    cursor: pointer;
    /* Oculto por defecto */
    opacity: 0;
    transform: translateX(0) rotate(0deg) scale(.5);
    pointer-events: none;
    will-change: transform, opacity;
}

@media (max-width: 768px) {
    .atpal-carousel__slide {
        width: 220px;
        height: 310px;
        margin-top: -155px;
        margin-left: -110px;
    }
}
@media (max-width: 480px) {
    .atpal-carousel__slide {
        width: 170px;
        height: 240px;
        margin-top: -120px;
        margin-left: -85px;
    }
}

.atpal-carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* ══════════════════════════════════════════
   POSICIONES del fan  (se aplican por JS
   añadiendo data-pos="-2" … "2")
══════════════════════════════════════════ */

/* Centro (activo) */
.atpal-carousel__slide[data-pos="0"] {
    opacity: 1;
    z-index: 10;
    transform: translateX(0) rotate(0deg) scale(1);
    pointer-events: auto;
    box-shadow: 0 30px 80px rgba(0,0,0,.25);
}

/* Inmediatos izquierda / derecha */
.atpal-carousel__slide[data-pos="-1"] {
    opacity: 1;
    z-index: 7;
    transform: translateX(-310px) rotate(-6deg) scale(.85);
    pointer-events: auto;
}
.atpal-carousel__slide[data-pos="1"] {
    opacity: 1;
    z-index: 7;
    transform: translateX(310px) rotate(6deg) scale(.85);
    pointer-events: auto;
}

/* Extremos izquierda / derecha */
.atpal-carousel__slide[data-pos="-2"] {
    opacity: .7;
    z-index: 4;
    transform: translateX(-560px) rotate(-11deg) scale(.7);
    pointer-events: auto;
}
.atpal-carousel__slide[data-pos="2"] {
    opacity: .7;
    z-index: 4;
    transform: translateX(560px) rotate(11deg) scale(.7);
    pointer-events: auto;
}

/* Ocultos (fuera de rango) */
.atpal-carousel__slide[data-pos="-3"],
.atpal-carousel__slide[data-pos="3"] {
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 768px) {
    .atpal-carousel__slide[data-pos="-1"] { transform: translateX(-200px) rotate(-6deg) scale(.85); }
    .atpal-carousel__slide[data-pos="1"]  { transform: translateX(200px)  rotate(6deg)  scale(.85); }
    .atpal-carousel__slide[data-pos="-2"] { transform: translateX(-360px) rotate(-11deg) scale(.7); }
    .atpal-carousel__slide[data-pos="2"]  { transform: translateX(360px)  rotate(11deg)  scale(.7); }
}
@media (max-width: 480px) {
    .atpal-carousel__slide[data-pos="-1"] { transform: translateX(-155px) rotate(-6deg) scale(.85); }
    .atpal-carousel__slide[data-pos="1"]  { transform: translateX(155px)  rotate(6deg)  scale(.85); }
    .atpal-carousel__slide[data-pos="-2"] { transform: translateX(-280px) rotate(-11deg) scale(.7); }
    .atpal-carousel__slide[data-pos="2"]  { transform: translateX(280px)  rotate(11deg)  scale(.7); }
}

/* ── Controles (flechas) ── */
.atpal-carousel__controls {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    position: relative;
    z-index: 20;
}

.atpal-carousel__btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #ccc;
    background: transparent;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s, transform .15s;
    padding: 0;
}
.atpal-carousel__btn svg {
    width: 18px;
    height: 18px;
}
.atpal-carousel__btn:hover {
    border-color: var(--ac-teal);
    color: var(--ac-teal);
    background: rgba(10,191,140,.07);
    transform: scale(1.08);
}
.atpal-carousel__btn:active {
    transform: scale(.95);
}

/* ── CTA ── */
.atpal-carousel__cta {
    text-align: center;
    margin-top: 36px;
}

.atpal-carousel__cta-btn {
    display: inline-block;
    background-image: linear-gradient(57deg,#7bee1c 8%,#1ce9db 65%);
    color: #000;
    font-family: sans-serif;
    font-weight: 700;
    font-size: 1rem;
    padding: 16px 40px;
    border-radius: 12px;
    text-decoration: none;
    letter-spacing: .01em;
    box-shadow: 0 4px 24px rgba(10,191,140,.38);
    transition: transform .2s, box-shadow .2s;
}
.atpal-carousel__cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(10,191,140,.55);
    color: #000;
    text-decoration: none;
}