/* ═══════════════════════════════════════════════════
   Convergia - Tech Partners Search & Filter
   Colores: #662483 (morado), #f0eff5 (acento), #565656 (texto)
   Fuente: Montserrat
═══════════════════════════════════════════════════ */

/* ─── Variables ─────────────────────────────────── */
.tp-wrap {
    --tp-purple:  #662483;
    --tp-light:   #f0eff5;
    --tp-text:    #565656;
    --tp-white:   #ffffff;
    --tp-radius:  12px;
    --tp-gap:     24px;
    font-family:  'Montserrat', sans-serif;
    color:        var(--tp-text);
    width:        100%;
}

/* ─── Búsqueda ───────────────────────────────────── */
.tp-search-wrap {
    position:   relative;
    max-width:  520px;
    margin:     0 auto 28px;
}

.tp-search {
    width:          100%;
    padding:        14px 48px 14px 20px;
    border:         2px solid #e0dde8;
    border-radius:  50px;
    font-family:    'Montserrat', sans-serif;
    font-size:      0.95rem;
    color:          var(--tp-text);
    background:     var(--tp-white);
    outline:        none;
    box-sizing:     border-box;
    transition:     border-color 0.25s ease, box-shadow 0.25s ease;
}

.tp-search:focus {
    border-color: var(--tp-purple);
    box-shadow:   0 0 0 3px rgba(102, 36, 131, 0.12);
}

.tp-search-icon {
    position:   absolute;
    right:      16px;
    top:        50%;
    transform:  translateY(-50%);
    width:      20px;
    height:     20px;
    color:      #aaa;
    pointer-events: none;
}

/* ─── Filtros pilares ────────────────────────────── */
.tp-filters {
    display:         flex;
    flex-wrap:       wrap;
    gap:             10px;
    justify-content: center;
    margin-bottom:   36px;
}

.tp-filter {
    padding:        8px 22px;
    border:         2px solid var(--tp-purple);
    border-radius:  50px;
    background:     transparent !important;
    color:          var(--tp-purple) !important;
    font-family:    'Montserrat', sans-serif;
    font-size:      0.85rem;
    font-weight:    600;
    cursor:         pointer;
    transition:     background 0.2s ease, color 0.2s ease;
}

.tp-filter:hover,
.tp-filter.active {
    background: var(--tp-purple) !important;
    color:      var(--tp-white) !important;
}

/* ─── Grid ───────────────────────────────────────── */
.tp-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--tp-gap);
}

@media (max-width: 1024px) {
    .tp-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .tp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .tp-grid { grid-template-columns: 1fr; }
}

/* ─── Card ───────────────────────────────────────── */
.tp-card {
    position:      relative;
    border-radius: var(--tp-radius);
    overflow:      hidden;
    aspect-ratio:  4/3;
    background:    var(--tp-light);
    cursor:        default;
}

/* Imagen de fondo */
.tp-card__image {
    width:               100%;
    height:              100%;
    background-size:     contain;
    background-position: center;
    background-repeat:   no-repeat;
    background-color:    var(--tp-white);
    transition:          transform 0.35s ease;
}

.tp-card:hover .tp-card__image {
    transform: scale(1.04);
}

/* Overlay con título y contenido */
.tp-card__overlay {
    position:   absolute;
    inset:      0;
    background: rgba(102, 36, 131, 0.90);
    color:      var(--tp-white);
    display:    flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    padding:    20px;
    opacity:    0;
    transform:  translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    text-align: center;
    border-radius: var(--tp-radius);
}

.tp-card:hover .tp-card__overlay {
    opacity:   1;
    transform: translateY(0);
}

.tp-card__title {
    font-size:   1rem;
    font-weight: 700;
    margin:      0 0 10px;
    color:       var(--tp-white);
    line-height: 1.3;
}

.tp-card__content {
    font-size:   0.82rem;
    line-height: 1.6;
    margin:      0;
    color:       rgba(255,255,255,0.90);
}

/* ─── Sin resultados ─────────────────────────────── */
.tp-no-results {
    text-align:  center;
    padding:     60px 20px;
    font-size:   1rem;
    color:       #999;
    font-style:  italic;
}

/* ─── Loading skeleton ───────────────────────────── */
.tp-loading {
    pointer-events: none;
    opacity: 0.5;
}

.tp-card.skeleton .tp-card__image {
    background: linear-gradient(90deg, #f0eff5 25%, #e2dff0 50%, #f0eff5 75%);
    background-size: 200% 100%;
    animation: tp-shimmer 1.2s infinite;
}

@keyframes tp-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}