/**
 * Social Frontend Styles
 * Estilos para páginas de categorías de redes sociales
 * InstaBooster 2025
 */

:root{
    --primary:#e61c72;
    --primary-light:#ff4d94;
    --primary-dark:#c9156e;
    --secondary:#7c3aed;
    --success:#10b981;
    --light:#fff;
    --dark:#1f2937;
    --gray-50:#f9fafb;
    --gray-100:#f3f4f6;
    --gray-200:#e5e7eb;
    --gray-300:#d1d5db;
    --gray-400:#9ca3af;
    --gray-500:#6b7280;
    --gray-600:#4b5563;
    --gray-700:#374151;
    --gray-800:#1f2937;
    --gray-900:#111827;
    --shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);
    --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
    --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
    --shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);
    --shadow-2xl:0 25px 50px -12px rgba(0,0,0,.25);
    --radius:0.75rem;
    --radius-lg:1.5rem;
    --transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{line-height:1.15;-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;font-size:16px;line-height:1.6;color:var(--gray-800);background-color:var(--light);overflow-x:hidden}

/* Header Section */
.hero-section{
    background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);
    padding:4rem 0 3rem;
    color:white;
    position:relative;
    overflow:hidden
}
.hero-section::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.05"><circle cx="30" cy="30" r="4"/></g></svg>') repeat;
    pointer-events:none
}
.hero-content{
    max-width:1200px;
    margin:0 auto;
    padding:0 1rem;
    text-align:center;
    position:relative;
    z-index:2
}
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.2);
    color:white;
    padding:0.5rem 1rem;
    border-radius:2rem;
    font-weight:600;
    font-size:0.875rem;
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin-bottom:1.5rem
}
.hero-title{
    font-size:clamp(2rem,4vw,3.5rem);
    font-weight:800;
    line-height:1.2;
    margin:0 0 1rem;
    background:linear-gradient(135deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0.8) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text
}
.hero-subtitle{
    font-size:1.25rem;
    font-weight:400;
    line-height:1.5;
    margin:0 auto;
    max-width:600px;
    opacity:0.9
}

/* Services Grid - Premium Modern Design 2025 */
.services-section{
    padding:4rem 0 5rem;
    background:#f8fafc;
    position:relative;
    overflow:hidden
}
.services-header{
    text-align:center;
    margin-bottom:3rem;
    position:relative;
    z-index:2
}
.services-header-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:white;
    padding:8px 20px;
    border-radius:50px;
    font-size:0.8rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:1rem;
    box-shadow:0 4px 15px rgba(230,28,114,0.3)
}
.services-header-title{
    font-size:clamp(1.75rem,3vw,2.5rem);
    font-weight:800;
    color:var(--gray-900);
    margin:0 0 0.75rem;
    line-height:1.2
}
.services-header-subtitle{
    font-size:1.1rem;
    color:var(--gray-500);
    max-width:600px;
    margin:0 auto;
    line-height:1.6
}
.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
    gap:1.75rem;
    max-width:1280px;
    margin:0 auto;
    padding:0 1rem;
    position:relative;
    z-index:2
}
/* Service Card - Premium Glassmorphism Design */
.service-card-wrapper{
    position:relative;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:stretch
}
.service-card{
    background:white;
    border-radius:20px;
    padding:0;
    text-align:left;
    border:1px solid rgba(226,232,240,0.8);
    transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
    box-shadow:0 4px 20px rgba(0,0,0,0.04),0 1px 3px rgba(0,0,0,0.06);
    display:flex;
    flex-direction:column;
    width:100%;
    text-decoration:none;
    color:inherit;
    position:relative;
    overflow:hidden;
    height:100%;
    box-sizing:border-box
}
.service-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg,var(--primary),var(--primary-light),var(--secondary));
    opacity:0;
    transition:opacity 0.3s ease
}
.service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(230,28,114,0.12),0 8px 16px rgba(0,0,0,0.08);
    border-color:transparent;
    text-decoration:none;
    color:inherit
}
.service-card:hover::before{
    opacity:1
}
/* Card Header with Icon */
.service-card-header{
    display:flex;
    align-items:center;
    gap:1rem;
    padding:1.5rem 1.5rem 1rem;
    border-bottom:1px solid #f1f5f9
}
.service-icon{
    width:56px;
    height:56px;
    background:linear-gradient(135deg,#fef7f0 0%,#fff5f8 100%);
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    border:1px solid rgba(230,28,114,0.1);
    transition:all 0.3s ease
}
.service-card:hover .service-icon{
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    border-color:transparent;
    transform:scale(1.05) rotate(-3deg)
}
.service-icon img{
    width:32px;
    height:32px;
    object-fit:contain;
    transition:all 0.3s ease
}
.service-card:hover .service-icon img{
    filter:brightness(0) invert(1)
}
.service-card-header-text{
    flex:1;
    min-width:0
}
.service-title{
    font-size:1.05rem;
    font-weight:700;
    color:#1e293b;
    margin:0 0 4px;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden
}
.service-category-tag{
    font-size:0.75rem;
    color:var(--gray-400);
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.5px
}
/* Card Body */
.service-card-body{
    padding:1rem 1.5rem;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:0.75rem
}
.service-features{
    display:flex;
    flex-wrap:wrap;
    gap:6px
}
.service-feature{
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:0.75rem;
    color:var(--gray-500);
    background:#f8fafc;
    padding:4px 10px;
    border-radius:20px;
    border:1px solid #e2e8f0
}
.service-feature svg{
    width:12px;
    height:12px;
    color:var(--success)
}
/* Card Footer with Price */
.service-card-footer{
    padding:1rem 1.5rem 1.5rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    background:linear-gradient(180deg,transparent 0%,#fafbfc 100%)
}
.service-price{
    display:flex;
    flex-direction:column;
    gap:2px
}
.service-price-label{
    font-size:0.7rem;
    color:var(--gray-400);
    text-transform:uppercase;
    letter-spacing:0.5px;
    font-weight:600
}
.service-price-text{
    font-size:1.35rem;
    font-weight:800;
    background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text
}
.service-price [itemprop="price"]{display:none}
.service-cta{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:white;
    padding:10px 18px;
    border-radius:12px;
    font-size:0.85rem;
    font-weight:600;
    transition:all 0.3s ease;
    box-shadow:0 4px 12px rgba(230,28,114,0.25)
}
.service-card:hover .service-cta{
    background:linear-gradient(135deg,var(--primary-dark),var(--primary));
    transform:scale(1.02);
    box-shadow:0 6px 20px rgba(230,28,114,0.35)
}
.service-cta svg{
    width:16px;
    height:16px;
    transition:transform 0.3s ease
}
.service-card:hover .service-cta svg{
    transform:translateX(3px)
}
/* Popular Badge - Elegant Design */
.popular-ribbon{
    position:absolute;
    top:-1px;
    right:20px;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:white;
    padding:6px 14px 8px;
    border-radius:0 0 10px 10px;
    font-size:0.65rem;
    font-weight:700;
    letter-spacing:0.8px;
    text-transform:uppercase;
    box-shadow:0 4px 12px rgba(230,28,114,0.3);
    z-index:5
}
.popular-ribbon::before{display:none}
.popular-ribbon::after{display:none}
.service-card-wrapper.service-popular .service-card{
    border:2px solid rgba(230,28,114,0.15);
    box-shadow:0 4px 20px rgba(230,28,114,0.08),0 1px 3px rgba(0,0,0,0.06)
}
.service-card-wrapper.service-popular .service-card:hover{
    border-color:var(--primary);
    box-shadow:0 20px 40px rgba(230,28,114,0.15),0 8px 16px rgba(0,0,0,0.08)
}

/* Content Section */
.content-section{
    padding:4rem 0;
    background:white
}
.content-section .container{
    max-width:800px
}

/* FAQ Section - Fixed Centering and Border Issues */
.faq-section{
    padding:5rem 0;
    background:white;
    position:relative;
    overflow:hidden
}
.faq-header{
    text-align:center;
    margin-bottom:4rem
}
.faq-badge{
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:white;
    padding:0.75rem 1.5rem;
    border-radius:2rem;
    font-weight:700;
    font-size:0.875rem;
    text-transform:uppercase;
    letter-spacing:0.5px;
    display:inline-block;
    margin-bottom:1.5rem;
    box-shadow:0 4px 15px rgba(226,28,114,0.3)
}
.faq-title{
    font-size:clamp(2rem,4vw,3rem);
    font-weight:900;
    margin:0 0 1rem;
    background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    line-height:1.2
}
.faq-subtitle{
    font-size:1.25rem;
    color:var(--gray-600);
    max-width:700px;
    margin:0 auto;
    line-height:1.6
}
.faq-list{
    max-width:900px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:1.5rem
}
.faq-item{
    background:white;
    border-radius:1.5rem;
    border:2px solid var(--gray-100);
    box-shadow:0 8px 30px rgba(0,0,0,0.06);
    overflow:hidden;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    position:relative
}
.faq-item::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    opacity:0;
    transition:all 0.3s ease;
    border-radius:1.3rem
}
.faq-item:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 40px rgba(226,28,114,0.1);
    border-color:var(--primary)
}
.faq-item:hover::before{
    opacity:0.02
}
.faq-item.active{
    border-color:var(--primary);
    background:linear-gradient(135deg,rgba(226,28,114,0.02),rgba(255,77,148,0.01))
}
.faq-item.active::before{
    opacity:0.03
}
.faq-button{
    width:100%;
    padding:2rem 2.5rem;
    text-align:left;
    border:none;
    background:transparent;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:1.2rem;
    font-weight:700;
    color:var(--gray-900);
    transition:all 0.3s ease;
    position:relative;
    z-index:2;
    line-height:1.4
}
.faq-button:hover{
    color:var(--primary)
}
.faq-button:focus{
    outline:2px solid var(--primary);
    outline-offset:2px;
    border-radius:1rem
}
.faq-icon{
    width:32px;
    height:32px;
    position:relative;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    border-radius:50%;
    background:var(--gray-100);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    margin-left:1rem
}
.faq-item:hover .faq-icon{
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    transform:scale(1.1)
}
.faq-icon::before,.faq-icon::after{
    content:'';
    position:absolute;
    background:var(--gray-600);
    transition:all 0.3s ease;
    border-radius:2px
}
.faq-item:hover .faq-icon::before,
.faq-item:hover .faq-icon::after{
    background:white
}
.faq-icon::before{
    width:16px;
    height:2px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}
.faq-icon::after{
    width:2px;
    height:16px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    transition:all 0.3s ease
}
.faq-item.active .faq-icon::after{
    transform:translate(-50%,-50%) rotate(90deg)
}
.faq-content{
    max-height:0;
    overflow:hidden;
    transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
    position:relative;
    z-index:2
}
.faq-item.active .faq-content{
    max-height:300px
}
.faq-content-inner{
    padding:0 2.5rem 2.5rem;
    color:var(--gray-700);
    line-height:1.7;
    font-size:1.1rem;
    border-top:1px solid rgba(226,28,114,0.1);
    margin-top:1rem;
    padding-top:2rem
}

/* How to Buy Section */
.how-to-buy{
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    padding:4rem 0;
    color:white;
    position:relative;
    overflow:hidden
}
.how-to-buy::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.05"><circle cx="20" cy="20" r="2"/></g></svg>') repeat;
    pointer-events:none
}
.how-to-buy-content{
    position:relative;
    z-index:2
}
.how-to-buy-header{
    text-align:center;
    margin-bottom:3rem
}
.how-to-buy-title{
    font-size:2.5rem;
    font-weight:800;
    margin:0 0 1rem
}
.how-to-buy-subtitle{
    font-size:1.25rem;
    opacity:0.9
}
.steps-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:2rem;
    margin-top:3rem
}
.step-card{
    background:white;
    border-radius:var(--radius);
    padding:2rem;
    position:relative;
    color:var(--gray-900);
    height:100%
}
.step-number{
    position:absolute;
    top:-1rem;
    right:-1rem;
    width:3rem;
    height:3rem;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:white;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
    font-weight:bold;
    box-shadow:var(--shadow-lg)
}
.step-title{
    font-size:1.5rem;
    font-weight:700;
    margin:0 0 1rem;
    color:var(--gray-900)
}
.step-description{
    color:var(--gray-600);
    line-height:1.6
}

/* Responsive Design - Tablet */
@media (max-width:1024px){
    .services-grid{
        grid-template-columns:repeat(2,1fr);
        gap:1.5rem
    }
}

/* Responsive Design - Mobile */
@media (max-width:768px){
    :root{ --topbar-height: 64px; }
    .hero-section{padding:2rem 0 1.5rem}
    .hero-section{padding-top: calc(2rem + var(--topbar-height));}
    .hero-title{font-size:1.75rem}
    .hero-subtitle{font-size:1rem}
    .container{padding:0 1rem}
    .services-section{padding:2.5rem 0 3rem}
    .services-header{margin-bottom:2rem}
    .services-header-badge{
        font-size:0.7rem;
        padding:6px 14px
    }
    .services-header-title{font-size:1.5rem}
    .services-header-subtitle{font-size:0.95rem}
    .services-grid{
        display:flex;
        overflow-x:auto;
        overflow-y:visible;
        gap:1rem;
        padding:0.5rem 1rem 1.5rem;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        max-width:100%;
        scroll-padding-left:1rem
    }
    .services-grid::-webkit-scrollbar{height:6px}
    .services-grid::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}
    .services-grid::-webkit-scrollbar-thumb{background:linear-gradient(135deg,var(--primary),var(--primary-light));border-radius:3px}
    .service-card-wrapper{
        min-width:85%;
        max-width:85%;
        scroll-snap-align:start;
        flex-shrink:0
    }
    .service-card{
        width:100%;
        border-radius:16px
    }
    .service-card-header{
        padding:1.25rem 1.25rem 0.75rem;
        gap:0.75rem
    }
    .service-icon{
        width:48px;
        height:48px;
        border-radius:12px
    }
    .service-icon img{
        width:28px;
        height:28px
    }
    .service-title{
        font-size:0.95rem
    }
    .service-category-tag{
        font-size:0.7rem
    }
    .service-card-body{
        display:none
    }
    .service-card-footer{
        padding:0.75rem 1.25rem 1.25rem;
        flex-direction:column;
        align-items:stretch;
        gap:0.75rem
    }
    .service-price{
        text-align:center
    }
    .service-price-text{
        font-size:1.25rem
    }
    .service-cta{
        justify-content:center;
        padding:12px 20px;
        border-radius:10px
    }
    .popular-ribbon{
        top:-1px;
        right:16px;
        padding:5px 10px 6px;
        font-size:0.6rem
    }
    .content-section{padding:2rem 0}
    .faq-section{padding:2.5rem 0}
    .faq-header{margin-bottom:2rem}
    .faq-title{font-size:1.75rem}
    .faq-subtitle{font-size:1rem}
    .faq-button{
        padding:1.25rem;
        font-size:0.95rem
    }
    .faq-content-inner{
        padding:0 1.25rem 1.25rem;
        font-size:0.9rem;
        padding-top:1rem
    }
    .faq-icon{
        width:26px;
        height:26px;
        margin-left:0.75rem
    }
    .how-to-buy{padding:2.5rem 0}
    .how-to-buy-title{font-size:1.75rem}
    .steps-grid{
        grid-template-columns:1fr;
        gap:1rem
    }
    .step-card{padding:1.5rem}
}

/* Responsive Design - Small Mobile */
@media (max-width:480px){
    .container{padding:0 0.75rem}
    .hero-section{padding:calc(1.5rem + var(--topbar-height)) 0 1rem}
    .services-grid{
        gap:0.75rem;
        padding:0.25rem 0.75rem 1.25rem;
        scroll-padding-left:0.75rem
    }
    .service-card-wrapper{
        min-width:90%;
        max-width:90%
    }
    .service-card{
        border-radius:14px
    }
    .service-card-header{
        padding:1rem 1rem 0.5rem
    }
    .service-icon{
        width:44px;
        height:44px;
        border-radius:10px
    }
    .service-icon img{
        width:24px;
        height:24px
    }
    .service-title{font-size:0.9rem}
    .service-card-body{
        display:none
    }
    .service-card-footer{
        padding:0.5rem 1rem 1rem
    }
    .service-price-label{font-size:0.6rem}
    .service-price-text{font-size:1.1rem}
    .service-cta{
        padding:10px 16px;
        font-size:0.8rem
    }
    .popular-ribbon{
        font-size:0.55rem;
        padding:4px 8px 5px;
        top:-1px;
        right:14px
    }
}

/* Performance Optimizations */
.service-card{contain:layout style paint}
.services-section,.faq-section,.how-to-buy{content-visibility:auto;contain-intrinsic-size:1000px}
.service-icon img{
    image-rendering:-webkit-optimize-contrast;
    image-rendering:crisp-edges
}

/* Animation Classes */
.fade-in{
    opacity:0;
    transform:translateY(20px);
    animation:fadeInUp 0.6s ease forwards
}
@keyframes fadeInUp{
    to{opacity:1;transform:translateY(0)}
}
.fade-in:nth-child(1){animation-delay:0.1s}
.fade-in:nth-child(2){animation-delay:0.2s}
.fade-in:nth-child(3){animation-delay:0.3s}
.fade-in:nth-child(4){animation-delay:0.4s}
.fade-in:nth-child(5){animation-delay:0.5s}
.fade-in:nth-child(6){animation-delay:0.6s}