/* Refugio Smart Filter — v12.6 */
:root {
    --rf-sage:        #3D6B52;
    --rf-sage-light:  #EAF2ED;
    --rf-sage-mid:    #C8DECE;
    --rf-gold:        #B8923E;
    --rf-gold-light:  #FDF3E0;
    --rf-navy:        #1A2B3C;
    --rf-bg:          #FAF9F7;
    --rf-white:       #ffffff;
    --rf-border:      #E2DDD7;
    --rf-muted:       #6B7B8D;
    --rf-radius:      20px;
    --rf-transition:  .32s cubic-bezier(.2,0,0,1);
}

.rf-wrapper {
    font-family: 'Inter', sans-serif;
    background: var(--rf-bg);
    overflow-x: hidden;
}

/* ══════════════════════════════════════════════════════════════
   HERO SECTION — dark decorated header
══════════════════════════════════════════════════════════════ */
.rf-hero-section {
    position: relative;
    background: linear-gradient(150deg, #0D1C2A 0%, #1A2B3C 55%, #152C1F 100%);
    padding: 100px 5% 140px;
    overflow: hidden;
}

/* Animated gradient orbs */
.rf-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.rf-hero-orb--1 {
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(61,107,82,0.22) 0%, transparent 65%);
    top: -250px; right: -120px;
    animation: rf-orb-drift 16s ease-in-out infinite alternate;
}
.rf-hero-orb--2 {
    width: 450px; height: 450px;
    background: radial-gradient(circle, rgba(184,146,62,0.14) 0%, transparent 65%);
    bottom: -80px; left: -60px;
    animation: rf-orb-drift 22s ease-in-out infinite alternate-reverse;
}
.rf-hero-orb--3 {
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    top: 80px; left: 35%;
    animation: rf-orb-drift 11s ease-in-out infinite alternate;
}
@keyframes rf-orb-drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(35px, 25px) scale(1.06); }
}

/* Wave separator */
.rf-hero-wave {
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    z-index: 3;
    line-height: 0;
    pointer-events: none;
}
.rf-hero-wave svg { width: 100%; display: block; }

/* ── HEADER (inside hero) ───────────────────────────────────── */
.rf-header {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}
.rf-eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--rf-gold);
    background: rgba(184,146,62,.18);
    border: 1px solid rgba(184,146,62,.3);
    padding: 8px 22px;
    border-radius: 50px;
    margin-bottom: 22px;
}
.rf-main-title {
    font-family: 'Cormorant Garant', serif;
    font-size: clamp(2.6rem, 5.5vw, 4.2rem);
    font-weight: 600;
    color: #fff;
    margin: 0 0 20px;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-shadow: 0 2px 24px rgba(0,0,0,.25);
}
.rf-subtitle {
    font-size: 1.1rem;
    color: rgba(255,255,255,.58);
    max-width: 560px;
    margin: 0 auto 44px;
    line-height: 1.82;
    font-weight: 300;
}

/* ── SEARCH (inside hero, dark bg) ─────────────────────────── */
.rf-search-wrap {
    display: flex;
    justify-content: center;
}
.rf-search-box {
    position: relative;
    width: 100%;
    max-width: 680px;
}
.rf-search-icon {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px; height: 22px;
    color: var(--rf-muted);
    pointer-events: none;
    transition: color .25s;
    z-index: 1;
}
#rf-search {
    width: 100%;
    padding: 22px 60px 22px 62px;
    border-radius: 50px;
    border: 2px solid transparent;
    font-family: 'Inter', sans-serif;
    font-size: 1.08rem;
    background: rgba(255,255,255,.96);
    color: var(--rf-navy);
    box-shadow: 0 16px 60px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.15);
    box-sizing: border-box;
    transition: border-color .25s, box-shadow .25s;
}
#rf-search::placeholder { color: var(--rf-muted); }
#rf-search:focus {
    outline: none;
    border-color: var(--rf-gold);
    box-shadow: 0 16px 60px rgba(0,0,0,.35), 0 0 0 4px rgba(184,146,62,.22);
}
.rf-search-box:focus-within .rf-search-icon { color: var(--rf-sage); }
.rf-search-clear {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    background: var(--rf-sage-light);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
}
.rf-search-clear svg { width: 14px; height: 14px; color: var(--rf-sage); }
.rf-search-clear:hover { background: var(--rf-sage-mid); transform: translateY(-50%) scale(1.08); }

/* ══════════════════════════════════════════════════════════════
   EXPLORE INVITE — se oculta al filtrar (id=rf-prompt)
══════════════════════════════════════════════════════════════ */
.rf-explore-invite {
    background: linear-gradient(180deg, #EDF4EE 0%, #F3F8F4 55%, var(--rf-bg) 100%);
    padding: 80px 5% 64px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.rf-explore-invite::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(61,107,82,.28), rgba(184,146,62,.2), transparent);
}
/* ══════════════════════════════════════════════════════════════
   CATEGORIES SECTION — siempre visible
══════════════════════════════════════════════════════════════ */
.rf-cats-section {
    background: var(--rf-bg);
    padding: 52px 5% 80px;
    position: relative;
}
.rf-cats-section::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(61,107,82,.14), transparent);
}
.rf-explore-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.rf-explore-orb--1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(61,107,82,.07) 0%, transparent 65%);
    top: -180px; right: -120px;
    animation: rf-orb-drift 20s ease-in-out infinite alternate;
}
.rf-explore-orb--2 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(184,146,62,.06) 0%, transparent 65%);
    bottom: -100px; left: -80px;
    animation: rf-orb-drift 26s ease-in-out infinite alternate-reverse;
}
.rf-explore-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}
.rf-explore-inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; }
.rf-explore-eyebrow {
    display: inline-flex;
    align-items: center;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--rf-sage);
    background: rgba(61,107,82,.09);
    border: 1px solid rgba(61,107,82,.22);
    padding: 7px 22px;
    border-radius: 50px;
    margin-bottom: 22px;
}
.rf-explore-title {
    font-family: 'Cormorant Garant', serif;
    font-size: clamp(2.3rem, 4vw, 3.4rem);
    font-weight: 600;
    color: var(--rf-navy);
    margin: 0 0 18px;
    line-height: 1.12;
    letter-spacing: -.02em;
}
.rf-explore-text {
    font-size: 1.06rem;
    color: var(--rf-muted);
    margin: 0 auto 28px;
    font-weight: 300;
    line-height: 1.78;
    max-width: 560px;
}
.rf-explore-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
.rf-explore-stat {
    font-size: .86rem;
    color: var(--rf-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}
.rf-explore-stat strong { color: var(--rf-sage); font-weight: 700; }
.rf-explore-stat-sep { color: var(--rf-border); font-size: .8rem; }
/* Grid layout */
.rf-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 18px;
    max-width: 1200px;
    margin: 0 auto;
}
/* Card */
.rf-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 34px 18px 28px;
    border-radius: 24px;
    background: var(--rf-white);
    border: 2px solid transparent;
    color: var(--rf-navy);
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--rf-transition);
    box-shadow: 0 2px 12px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04);
    position: relative;
    overflow: hidden;
    white-space: normal;
}
.rf-cat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, var(--rf-sage-light) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--rf-transition);
    border-radius: inherit;
}
.rf-cat:hover::before { opacity: 1; }
/* Icon circle */
.rf-cat-icon {
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px; height: 70px;
    background: rgba(61,107,82,.08);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: transform .38s cubic-bezier(.34,1.56,.64,1), background .3s;
}
.rf-cat:hover .rf-cat-icon {
    transform: scale(1.14) rotate(-7deg);
    background: rgba(61,107,82,.15);
}
.rf-cat.active .rf-cat-icon {
    background: rgba(255,255,255,.22);
    transform: scale(1.1);
}
.rf-cat-label {
    font-size: .9rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
    line-height: 1.3;
}
.rf-cat-count {
    font-size: .74rem;
    font-weight: 700;
    background: var(--rf-sage-light);
    color: var(--rf-sage);
    padding: 4px 12px;
    border-radius: 50px;
    position: relative;
    z-index: 1;
    transition: background .25s, color .25s;
}
.rf-cat:hover {
    border-color: var(--rf-sage);
    color: var(--rf-sage);
    transform: translateY(-8px);
    box-shadow: 0 24px 56px rgba(61,107,82,.18);
}
.rf-cat.active {
    background: var(--rf-sage);
    border-color: var(--rf-sage);
    color: #fff;
    box-shadow: 0 20px 52px rgba(61,107,82,.42);
    transform: translateY(-8px);
}
.rf-cat.active::before { opacity: 0; }
.rf-cat.active .rf-cat-count { background: rgba(255,255,255,.22); color: #fff; }
/* "Ver todos" — gold variant */
.rf-cat--all .rf-cat-icon { background: rgba(184,146,62,.1); }
.rf-cat--all:hover::before { background: linear-gradient(145deg, rgba(184,146,62,.1) 0%, transparent 70%); }
.rf-cat--all:hover {
    border-color: var(--rf-gold);
    color: var(--rf-gold);
    box-shadow: 0 24px 56px rgba(184,146,62,.22);
}
.rf-cat--all:hover .rf-cat-icon { background: rgba(184,146,62,.18); }
.rf-cat--all.active {
    background: var(--rf-gold);
    border-color: var(--rf-gold);
    box-shadow: 0 20px 52px rgba(184,146,62,.44);
}
.rf-cat--all .rf-cat-count { display: none; }
/* Stagger entrance */
.rf-cat:nth-child(1)  { animation: rf-card-in .4s ease both .04s; }
.rf-cat:nth-child(2)  { animation: rf-card-in .4s ease both .09s; }
.rf-cat:nth-child(3)  { animation: rf-card-in .4s ease both .14s; }
.rf-cat:nth-child(4)  { animation: rf-card-in .4s ease both .19s; }
.rf-cat:nth-child(5)  { animation: rf-card-in .4s ease both .24s; }
.rf-cat:nth-child(6)  { animation: rf-card-in .4s ease both .29s; }
.rf-cat:nth-child(7)  { animation: rf-card-in .4s ease both .34s; }
.rf-cat:nth-child(8)  { animation: rf-card-in .4s ease both .39s; }
.rf-cat:nth-child(9)  { animation: rf-card-in .4s ease both .44s; }
.rf-cat:nth-child(10) { animation: rf-card-in .4s ease both .49s; }
.rf-cat:nth-child(11) { animation: rf-card-in .4s ease both .54s; }
.rf-cat:nth-child(12) { animation: rf-card-in .4s ease both .59s; }
@media (max-width: 480px) {
    .rf-explore-invite { padding: 60px 4% 48px; }
    .rf-cats-section { padding: 36px 4% 56px; }
    .rf-cat { padding: 26px 12px 22px; gap: 10px; }
    .rf-cat-icon { width: 56px; height: 56px; font-size: 1.65rem; }
}


/* ══════════════════════════════════════════════════════════════
   RESULTS BAR
══════════════════════════════════════════════════════════════ */
.rf-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1300px;
    margin: 0 auto 28px;
    padding: 0 5%;
    font-size: .9rem;
    color: var(--rf-muted);
    animation: rf-fadein .3s ease both;
}
.rf-reset {
    background: none;
    border: none;
    color: var(--rf-sage);
    font-family: 'Inter', sans-serif;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.rf-reset:hover { color: var(--rf-gold); }

/* ══════════════════════════════════════════════════════════════
   GRID & CARDS
══════════════════════════════════════════════════════════════ */
.rf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5%;
    min-height: 200px;
}
.rf-grid.rf-is-loading { pointer-events: none; }

.rf-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--rf-radius);
    overflow: hidden;
    background: var(--rf-white);
    border: 1px solid var(--rf-border);
    transition: transform var(--rf-transition), box-shadow var(--rf-transition);
    position: relative;
}
/* Colored top accent on hover */
.rf-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--rf-sage), var(--rf-gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.2,0,0,1);
    z-index: 2;
}
.rf-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 32px 72px rgba(26,43,60,.12);
}
.rf-card:hover::before { transform: scaleX(1); }

/* Entrada stagger */
.rf-entering { animation: rf-card-in .52s ease both; }
@keyframes rf-card-in {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rf-media-link { display: block; }
.rf-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}
.rf-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26,43,60,.32) 0%, transparent 55%);
}
.rf-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.2,0,0,1);
}
.rf-card:hover .rf-media img { transform: scale(1.07); }

.rf-body {
    padding: 28px 30px 18px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.rf-tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rf-sage);
    background: var(--rf-sage-light);
    padding: 4px 12px;
    border-radius: 50px;
    margin-bottom: 12px;
    align-self: flex-start;
}
.rf-title {
    font-family: 'Cormorant Garant', serif;
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--rf-navy);
    margin: 0 0 10px;
    line-height: 1.3;
}
.rf-title a { color: inherit; text-decoration: none; transition: color .2s; }
.rf-title a:hover { color: var(--rf-sage); }
.rf-excerpt {
    font-size: .95rem;
    color: var(--rf-muted);
    line-height: 1.76;
    flex-grow: 1;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rf-footer {
    padding: 16px 30px;
    border-top: 1px solid var(--rf-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.rf-meta {
    font-size: .8rem;
    color: var(--rf-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.rf-sep { opacity: .4; }
.rf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .83rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rf-sage);
    text-decoration: none;
    white-space: nowrap;
    transition: gap .2s, color .2s;
    padding: 8px 0;
}
.rf-btn:hover { gap: 11px; color: var(--rf-gold); }
.rf-btn svg { transition: transform .2s; flex-shrink: 0; }
.rf-btn:hover svg { transform: translateX(3px); }

/* ══════════════════════════════════════════════════════════════
   SKELETON
══════════════════════════════════════════════════════════════ */
@keyframes rf-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
.rf-skeleton { pointer-events: none; cursor: default; }
.rf-skel-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(90deg, var(--rf-sage-light) 25%, var(--rf-sage-mid) 50%, var(--rf-sage-light) 75%);
    background-size: 200% 100%;
    animation: rf-shimmer 1.5s infinite linear;
}
.rf-skeleton .rf-body { padding: 28px 30px 18px; gap: 10px; }
.rf-skel-tag {
    height: 22px; width: 80px;
    border-radius: 50px;
    background: var(--rf-sage-light);
    animation: rf-shimmer 1.5s infinite linear;
    background-size: 200% 100%;
}
.rf-skel-line {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--rf-sage-light) 25%, var(--rf-sage-mid) 50%, var(--rf-sage-light) 75%);
    background-size: 200% 100%;
    animation: rf-shimmer 1.5s infinite linear;
}
.rf-skel-line--h  { height: 26px; width: 90%; }
.rf-skel-line--m  { width: 75%; }
.rf-skel-line--s  { width: 55%; }
.rf-skel-line--xs { width: 40%; }
.rf-skel-footer {
    border-top: 1px solid var(--rf-border);
    padding: 16px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rf-skel-btn {
    height: 12px; width: 70px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--rf-sage-light) 25%, var(--rf-sage-mid) 50%, var(--rf-sage-light) 75%);
    background-size: 200% 100%;
    animation: rf-shimmer 1.5s infinite linear;
}

/* ══════════════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════════════ */
.rf-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 100px 20px;
    color: var(--rf-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.rf-empty svg { opacity: .35; margin-bottom: 8px; width: 60px; height: 60px; }
.rf-empty p { font-size: 1.15rem; font-weight: 600; color: var(--rf-navy); margin: 0; }
.rf-empty span { font-size: .95rem; }

/* ══════════════════════════════════════════════════════════════
   CTA BLOG
══════════════════════════════════════════════════════════════ */
.rf-blog-cta {
    text-align: center;
    margin-top: 72px;
    padding-bottom: 80px;
    animation: rf-fadein .4s ease both;
}
.rf-blog-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 22px 56px;
    background: linear-gradient(135deg, var(--rf-gold) 0%, #9E7A2E 100%);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: .04em;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 12px 40px rgba(184,146,62,.38);
    transition: transform var(--rf-transition), box-shadow var(--rf-transition);
    position: relative;
    overflow: hidden;
}
.rf-blog-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.12), transparent);
    opacity: 0;
    transition: opacity .3s;
}
.rf-blog-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 56px rgba(184,146,62,.52);
    color: #fff;
}
.rf-blog-btn:hover::before { opacity: 1; }
.rf-blog-btn svg { transition: transform .25s; flex-shrink: 0; }
.rf-blog-btn:hover svg { transform: translateX(6px); }

/* ══════════════════════════════════════════════════════════════
   ANIMACIONES
══════════════════════════════════════════════════════════════ */
@keyframes rf-fadein {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes rf-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .rf-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .rf-state-prompt { padding: 64px 40px 60px; }
    .rf-hero-section { padding: 80px 5% 120px; }
}
@media (max-width: 600px) {
    .rf-hero-section { padding: 72px 5% 110px; }
    .rf-main-title   { font-size: 2.4rem; }
    .rf-subtitle     { font-size: 1rem; margin-bottom: 36px; }
    #rf-search       { padding: 18px 52px 18px 54px; font-size: 1rem; }
    .rf-cats-section { padding: 44px 5% 0; }
    .rf-categories   { gap: 10px; margin-bottom: 48px; }
    .rf-cat          { padding: 12px 20px; font-size: .92rem; min-height: 48px; }
    .rf-cat-icon     { font-size: 1.15rem; }
    .rf-state-prompt { padding: 52px 28px 48px; border-radius: 28px; }
    .rf-prompt-icon-wrap { width: 110px; height: 110px; }
    .rf-prompt-icon  { width: 72px; height: 72px; }
    .rf-prompt-title { font-size: 1.75rem; }
    .rf-prompt-tag   { padding: 10px 20px; font-size: .92rem; }
    .rf-grid         { grid-template-columns: 1fr; padding: 0 4%; }
    .rf-body         { padding: 22px 24px 16px; }
    .rf-footer       { padding: 14px 24px; }
    .rf-blog-btn     { padding: 18px 36px; font-size: .97rem; }
}