:root {
    --shp-gap: 24px;
    --shp-card-w: 420px;
    --shp-card-h: 560px;
    --shp-radius: 8px;
    --shp-accent: #d9534f;
}

/* ===========================================================
   WRAPPER: define cuánto scroll vertical "dura" el efecto.
   Cuanto más alto, más lento se desplazan las tarjetas.
=========================================================== */
.shp-wrapper {
    position: relative;
    height: 300vh; /* ajusta esto: más alto = scroll más largo/lento */
}

/* ===========================================================
   STICKY: se queda fijo en pantalla mientras el wrapper
   sigue haciendo scroll por debajo.
=========================================================== */
.shp-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.shp-heading {
    color: #fff;
    font-size: 2.6rem;
    padding: 0 60px;
    margin: 0 0 32px;
}

.shp-track-viewport {
    overflow: hidden;
    width: 100%;
}

.shp-track {
    display: flex;
    gap: var(--shp-gap);
    padding: 0 60px;
    will-change: transform;
}

/* ===========================================================
   TARJETA
   Estructura: imagen de fondo + capa de texto (título+texto,
   siempre visible) + botón que aparece solo en hover.
=========================================================== */
.shp-card {
    position: relative;
    flex: 0 0 auto;
    width: var(--shp-card-w);
    height: var(--shp-card-h);
    border-radius: var(--shp-radius);
    overflow: hidden;
    text-decoration: none;
    display: block;
}

.shp-card-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .4s ease;
}
.shp-card:hover .shp-card-image {
    transform: scale(1.05);
}

.shp-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0) 75%);
    z-index: 1;
}

.shp-card-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 24px;
    color: #fff;
}

.shp-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.shp-card-text {
    font-size: 0.95rem;
    line-height: 1.4;
    margin: 0;
    color: #e6e6e6;
    /* Recorta el texto a 3 líneas si es muy largo */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Botón: oculto por defecto, aparece con transición en hover */
.shp-card-button {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 20px;
    background: var(--shp-accent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 30px;
    text-decoration: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}
.shp-card:hover .shp-card-button {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (max-width: 768px) {
    :root {
        --shp-card-w: 260px;
        --shp-card-h: 380px;
    }
    .shp-wrapper { height: 220vh; }
    .shp-heading { font-size: 1.8rem; padding: 0 24px; }
    .shp-track { padding: 0 24px; }
    .shp-card-title { font-size: 1.1rem; }
    .shp-card-text { font-size: 0.85rem; }
    /* En móvil no hay hover real: mostramos el botón siempre */
    .shp-card-button {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}