/* =============================================================
   GAREZMA — CSS PORTAFOLIO (Neon Luminary)
   ============================================================= */

.pf-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.pf-section   { padding: 60px 0 96px; }

/* ---- Hero ---- */
.pf-hero {
    position: relative;
    padding: 100px 0 60px;
    background: #0d0e13;
    overflow: hidden;
    text-align: center;
}
.pf-hero-glow {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(132,173,255,.08) 0%, transparent 60%);
    pointer-events: none;
}
.pf-kicker {
    display: inline-block; padding: 5px 16px; border-radius: 999px;
    background: rgba(132,173,255,.1); border: 1px solid rgba(132,173,255,.2);
    color: #84adff; font-size: .75rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px;
}
.pf-h1 {
    font-family: var(--font-headline,'Plus Jakarta Sans',sans-serif);
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 900; letter-spacing: -0.035em; line-height: 1.06;
    color: #f7f5fd; margin: 0 0 20px;
}
.pf-gradient-text {
    background: linear-gradient(90deg, #84adff, #00f1fe, #84adff);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: pf-flow 4s linear infinite;
}
@keyframes pf-flow { 0%{background-position:0%} 100%{background-position:200%} }
.pf-hero-desc { color: #abaab1; font-size: 1.05rem; line-height: 1.7; margin: 0 auto; max-width: 500px; }

/* ---- Tabs ---- */
.pf-tabs-wrap {
    background: #0d0e13;
    border-bottom: 1px solid rgba(71,71,78,.15);
    position: sticky;
    top: 80px;
    z-index: 100;
    padding: 0;
}
.pf-tabs {
    display: flex;
    gap: 4px;
    padding: 14px 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.pf-tabs::-webkit-scrollbar { display: none; }

.pf-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    background: transparent;
    border: 1px solid rgba(71,71,78,.15);
    border-radius: 999px;
    color: #abaab1;
    font-family: var(--font-headline,'Plus Jakarta Sans',sans-serif);
    font-size: .82rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: .2s;
}
.pf-tab:hover { color: #f7f5fd; border-color: rgba(71,71,78,.4); background: rgba(71,71,78,.1); }
.pf-tab.active {
    background: rgba(132,173,255,.12);
    border-color: #84adff;
    color: #84adff;
}
.pf-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    background: rgba(71,71,78,.25);
    border-radius: 999px;
    font-size: .7rem; font-weight: 700; color: #abaab1;
    transition: .2s;
}
.pf-tab.active .pf-tab-count { background: rgba(132,173,255,.2); color: #84adff; }

/* ---- Grid ---- */
.pf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}
.pf-card {
    position: relative;
    background: #121319;
    border-radius: 20px;
    border: 1px solid rgba(71,71,78,.12);
    border-top: 1px solid rgba(132,173,255,.15);
    overflow: hidden;
    text-decoration: none !important;
    display: flex; flex-direction: column;
    transition: transform .35s, border-color .25s, box-shadow .35s;
    /* animación de entrada */
    opacity: 1;
}
.pf-card--wide { grid-column: span 2; }

.pf-card:hover {
    transform: translateY(-6px);
    border-color: rgba(132,173,255,.3);
    box-shadow: 0 16px 48px rgba(0,0,0,.35);
}
/* Estado oculto (filtrado por JS) */
.pf-card.pf-hidden {
    display: none;
}
/* Animación de aparición */
.pf-card.pf-entering {
    animation: pf-card-in .3s ease forwards;
}
@keyframes pf-card-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pf-card-img {
    position: relative;
    overflow: hidden;
    background: #181920;
}
.pf-card--wide .pf-card-img { aspect-ratio: 21/9; }
.pf-card-img img { width:100%; height:100%; object-fit:cover; transition: transform .5s; display:block; }
.pf-card:hover .pf-card-img img { transform: scale(1.06); }

.pf-card-placeholder {
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    color: rgba(71,71,78,.5);
}
.pf-card-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .3s;
}
.pf-card:hover .pf-card-overlay { opacity: 1; }
.pf-card-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px;
    border: 1.5px solid #f7f5fd; border-radius: 8px;
    color: #f7f5fd;
    font-family: var(--font-headline,'Plus Jakarta Sans',sans-serif);
    font-weight: 700; font-size: .82rem; letter-spacing: .06em;
    transform: translateY(10px); transition: transform .3s, background .2s;
}
.pf-card:hover .pf-card-cta { transform: translateY(0); background: #f7f5fd; color: #000; }

.pf-card-body { padding: 22px 24px; flex-grow: 1; display: flex; flex-direction: column; gap: 8px; }
.pf-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-card-niche {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    background: rgba(132,173,255,.1); color: #84adff;
    font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.pf-card-cat {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    background: rgba(0,241,254,.08); color: #00f1fe;
    font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.pf-card-title {
    font-family: var(--font-headline,'Plus Jakarta Sans',sans-serif);
    font-size: 1.08rem; font-weight: 700; color: #f7f5fd; margin: 0;
}
.pf-card-desc { color: #abaab1; font-size: .82rem; line-height: 1.6; margin: 0; }

.pf-card-bar {
    position: absolute; bottom: 0; left: 0;
    height: 2px; width: 0;
    background: linear-gradient(90deg, #84adff, #00f1fe);
    transition: width .45s;
}
.pf-card:hover .pf-card-bar { width: 100%; }

/* ---- Empty state ---- */
.pf-empty {
    text-align: center; padding: 80px 20px;
    color: #abaab1; font-size: 1rem;
}
.pf-empty-icon {
    width: 80px; height: 80px; border-radius: 20px;
    background: #121319; border: 1px solid rgba(71,71,78,.2);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px; color: rgba(71,71,78,.5);
}

/* ---- Contador ---- */
.pf-results-count {
    color: #abaab1; font-size: .82rem; text-align: center; margin: 0;
}
.pf-results-count strong { color: #84adff; }

/* ---- CTA ---- */
.pf-cta-section { padding: 0 0 96px; background: #0d0e13; }
.pf-glass-cta {
    background: rgba(36,37,45,.45);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(132,173,255,.18);
    border-radius: 32px; padding: 64px 48px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.pf-h2-cta {
    font-family: var(--font-headline,'Plus Jakarta Sans',sans-serif);
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 900; letter-spacing: -0.03em;
    color: #f7f5fd; margin: 0 0 16px; line-height: 1.1;
}
.pf-cta-sub { color: #abaab1; font-size: 1rem; margin: 0 0 36px; }
.pf-btn-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #84adff, #0070ea);
    color: #000 !important;
    font-family: var(--font-headline,'Plus Jakarta Sans',sans-serif);
    font-weight: 800; font-size: .95rem; border-radius: 12px;
    text-decoration: none !important;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 4px 20px rgba(132,173,255,.3);
}
.pf-btn-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(132,173,255,.45); color: #000 !important; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .pf-grid { grid-template-columns: repeat(2, 1fr); }
    .pf-card--wide { grid-column: span 1; }
}
@media (max-width: 640px) {
    .pf-grid { grid-template-columns: 1fr; }
    .pf-glass-cta { padding: 40px 24px; border-radius: 20px; }
    .pf-container { padding: 0 20px; }
    .pf-hero { padding: 60px 0 40px; }
    .pf-section { padding: 40px 0 64px; }
}

/* ---- Marketing expand panel ---- */
.pf-card--mkt .pf-card-img-link--expand { cursor: pointer; display: block; }

.pf-expand-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s cubic-bezier(.4,0,.2,1);
    background: #0d0e13;
    border-top: 0px solid rgba(0,241,254,.15);
}
.pf-card.pf-expanded .pf-expand-panel {
    max-height: 600px;
    border-top-width: 1px;
}
.pf-expand-inner {
    padding: 24px 24px 20px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .3s .15s, transform .3s .15s;
}
.pf-card.pf-expanded .pf-expand-inner {
    opacity: 1;
    transform: translateY(0);
}

/* Meta row (cliente + período) */
.pf-expand-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(71,71,78,.15);
}
.pf-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: #abaab1;
    font-weight: 500;
}
.pf-meta-item svg { color: #00f1fe; flex-shrink: 0; }

/* Bullets */
.pf-expand-bullets {
    list-style: none;
    padding: 0; margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pf-expand-bullets li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .9rem;
    color: #f7f5fd;
    font-weight: 500;
}
.pf-bullet-check {
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(0,241,254,.12);
    border: 1px solid rgba(0,241,254,.25);
    flex-shrink: 0;
    position: relative;
}
.pf-bullet-check::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-52%) rotate(45deg);
    width: 5px; height: 9px;
    border-right: 2px solid #00f1fe;
    border-bottom: 2px solid #00f1fe;
    margin-top: -1px;
}

/* Link ver campaña */
.pf-expand-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .8rem; font-weight: 700;
    color: #00f1fe !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(0,241,254,.3);
    padding-bottom: 2px;
    transition: border-color .2s;
}
.pf-expand-link:hover { border-color: #00f1fe; }

/* Rotar chevron en CTA cuando está expandido */
.pf-card-cta--expand svg { transition: transform .35s; }
.pf-card.pf-expanded .pf-card-cta--expand svg { transform: rotate(180deg); }

/* Categoría marketing en cyan */
.pf-card-cat--mkt { background: rgba(0,241,254,.08); color: #00f1fe; }