/* ============================================================================
   Kroovify Ads — Stylesheet
   ----------------------------------------------------------------------------
   Aislado del landing principal: namespace `ads-*`, sin dependencias de
   styles.css ni main.js. Mobile-first, BEM-lite, design tokens.
   ============================================================================ */


/* ─── 1. Design Tokens ───────────────────────────────────────────────────── */
:root {
    /* Brand */
    --ads-primary:        #D806AA;
    --ads-primary-dark:   #a1057f;
    --ads-primary-light:  #ff4fd5;
    --ads-secondary:      #0cc0df;
    --ads-secondary-dark: #0aa0b8;
    --ads-accent:         #ff7a00;

    --ads-gradient:        linear-gradient(135deg, #0cc0df 0%, #4dd0e1 50%, #D806AA 100%);
    --ads-gradient-soft:   linear-gradient(135deg, rgba(12,192,223,0.08) 0%, rgba(216,6,170,0.08) 100%);
    --ads-gradient-hero:   linear-gradient(180deg, #ffffff 0%, #fafafd 100%);
    --ads-gradient-header: linear-gradient(90deg, #0a0a0f 0%, #1a1422 100%);

    /* Text & surfaces */
    --ads-text:         #1a1a1f;
    --ads-text-muted:   #5a5a66;
    --ads-text-subtle:  #8a8a95;
    --ads-text-invert:  #ffffff;
    --ads-bg:           #ffffff;
    --ads-bg-alt:       #fafafd;
    --ads-bg-section:   #f7f7fb;
    --ads-bg-dark:      #0a0a0f;

    /* Feed cards (paleta del mockup adaptada a Kroovify) */
    --ads-card-content:        #f1ebff;
    --ads-card-content-edge:   #e3d8ff;
    --ads-card-marketplace:    #ffe5f3;
    --ads-card-marketplace-edge:#ffd1e7;
    --ads-card-events:         #fff3d6;
    --ads-card-events-edge:    #ffe2a8;

    /* Borders */
    --ads-border:        #e5e5ec;
    --ads-border-strong: #c8c8d2;
    --ads-border-focus:  var(--ads-primary);

    /* Feedback */
    --ads-success:    #16a34a;
    --ads-success-bg: #dcfce7;
    --ads-error:      #dc2626;
    --ads-error-bg:   #fee2e2;
    --ads-warning:    #d97706;

    /* Elevation */
    --ads-shadow-sm: 0 1px 2px rgba(20, 10, 30, 0.05);
    --ads-shadow-md: 0 4px 14px rgba(20, 10, 30, 0.08);
    --ads-shadow-lg: 0 14px 40px rgba(20, 10, 30, 0.10);
    --ads-shadow-xl: 0 24px 70px rgba(216, 6, 170, 0.18);
    --ads-shadow-focus: 0 0 0 3px rgba(216, 6, 170, 0.25);

    /* Radii */
    --ads-radius-sm:   8px;
    --ads-radius-md:   12px;
    --ads-radius-lg:   20px;
    --ads-radius-xl:   28px;
    --ads-radius-full: 9999px;

    /* Spacing scale (4px base) */
    --ads-sp-1: 4px;
    --ads-sp-2: 8px;
    --ads-sp-3: 12px;
    --ads-sp-4: 16px;
    --ads-sp-5: 24px;
    --ads-sp-6: 32px;
    --ads-sp-7: 48px;
    --ads-sp-8: 64px;
    --ads-sp-9: 96px;

    /* Type */
    --ads-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                     "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --ads-fs-xs:   12px;
    --ads-fs-sm:   14px;
    --ads-fs-base: 16px;
    --ads-fs-md:   18px;
    --ads-fs-lg:   20px;
    --ads-fs-xl:   24px;
    --ads-fs-2xl:  30px;
    --ads-fs-3xl:  38px;
    --ads-fs-4xl:  56px;
    --ads-lh-tight: 1.15;
    --ads-lh-base:  1.55;
    --ads-fw-medium:     500;
    --ads-fw-semibold:   600;
    --ads-fw-bold:       700;
    --ads-fw-extrabold:  800;

    /* Motion */
    --ads-tr-fast: 150ms ease;
    --ads-tr-base: 250ms ease;
    --ads-tr-slow: 400ms cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Layout */
    --ads-container-max: 1200px;
    --ads-container-pad: 20px;
    --ads-z-header:      100;
    --ads-z-skip:        200;

    /* SVG inline (select arrow) — token para alternar en dark */
    --ads-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%231a1a1f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ─── 1.b Dark theme tokens ──────────────────────────────────────────────── */
/* Hereda el data-theme del landing principal (localStorage compartido en
   mismo origen). El bootstrap ads-theme.js lo aplica antes del primer pintado. */
[data-theme="dark"] {
    /* Text & surfaces — niveles validados WCAG AA contra --ads-bg #10101a:
       text       #f1f5f9 → 17.4:1 (AAA)
       text-muted #c0c2cc → 11.5:1 (AAA)
       text-subtle#9ca0ad →  6.5:1 (AA)  — subido desde #7a7c88 (4.6:1, al límite). */
    --ads-text:         #f1f5f9;
    --ads-text-muted:   #c0c2cc;
    --ads-text-subtle:  #9ca0ad;
    --ads-bg:           #10101a;
    --ads-bg-alt:       #16161f;
    --ads-bg-section:   #1b1b27;
    --ads-bg-dark:      #07070b;

    /* Feed cards (versiones oscuras de los pasteles, mantienen identidad) */
    --ads-card-content:        #251d3a;
    --ads-card-content-edge:   #382a55;
    --ads-card-marketplace:    #361827;
    --ads-card-marketplace-edge:#4d2540;
    --ads-card-events:         #38290f;
    --ads-card-events-edge:    #57401a;

    /* Borders */
    --ads-border:        #2b2b37;
    --ads-border-strong: #41414f;

    /* Feedback (mismos textos, fondos más profundos) */
    --ads-success-bg: #0d2e1c;
    --ads-error-bg:   #3a1212;

    /* Elevation (más oscura para contraste contra fondos oscuros) */
    --ads-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --ads-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);
    --ads-shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.6);
    --ads-shadow-xl: 0 24px 70px rgba(216, 6, 170, 0.32);
    --ads-shadow-focus: 0 0 0 3px rgba(216, 6, 170, 0.4);

    /* Gradientes adaptados */
    --ads-gradient-hero:   linear-gradient(180deg, #10101a 0%, #15151f 100%);
    --ads-gradient-soft:   linear-gradient(135deg, rgba(12,192,223,0.14) 0%, rgba(216,6,170,0.16) 100%);

    /* Select arrow blanco para fondos oscuros */
    --ads-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23f1f5f9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ─── 2. Reset mínimo (scoped al módulo) ─────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--ads-font-sans);
    font-size: var(--ads-fs-base);
    line-height: var(--ads-lh-base);
    color: var(--ads-text);
    background: var(--ads-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color var(--ads-tr-base), color var(--ads-tr-base);
}

img, svg { max-width: 100%; display: block; }

a {
    color: var(--ads-primary);
    text-decoration: none;
    transition: color var(--ads-tr-fast);
}
a:hover { color: var(--ads-primary-dark); }
a:focus-visible {
    outline: 2px solid var(--ads-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1, h2, h3, h4 {
    margin: 0;
    color: var(--ads-text);
    line-height: var(--ads-lh-tight);
    font-weight: var(--ads-fw-bold);
}
p { margin: 0; }


/* ─── 3. Utilities & a11y ────────────────────────────────────────────────── */
.ads-svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.ads-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: var(--ads-z-skip);
    padding: var(--ads-sp-3) var(--ads-sp-5);
    background: var(--ads-primary);
    color: var(--ads-text-invert);
    font-weight: var(--ads-fw-semibold);
    border-radius: 0 0 var(--ads-radius-md) 0;
    transition: top var(--ads-tr-fast);
}
.ads-skip-link:focus {
    top: 0;
    color: var(--ads-text-invert);
}

/* Honeypot anti-spam: invisible para humanos, presente para bots.
   NO usar display:none — los bots lo detectan. */
.ads-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.ads-container {
    width: 100%;
    max-width: var(--ads-container-max);
    margin-inline: auto;
    padding-inline: var(--ads-container-pad);
}

.ads-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.ads-required {
    color: var(--ads-error);
    margin-left: 2px;
}

.ads-optional {
    color: var(--ads-text-subtle);
    font-weight: 400;
    font-size: var(--ads-fs-sm);
    margin-left: 4px;
}


/* ─── 4. Header ──────────────────────────────────────────────────────────── */
.ads-header {
    position: sticky;
    top: 0;
    z-index: var(--ads-z-header);
    background: var(--ads-gradient-header);
    color: var(--ads-text-invert);
    box-shadow: var(--ads-shadow-md);
}

.ads-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ads-sp-5);
    padding-block: var(--ads-sp-3);
    min-height: 64px;
}

.ads-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--ads-sp-3);
    color: var(--ads-text-invert);
    font-weight: var(--ads-fw-bold);
    font-size: var(--ads-fs-md);
    flex-shrink: 0;
}
.ads-logo:hover { color: var(--ads-text-invert); opacity: 0.85; }
.ads-logo img {
    width: 36px;
    height: 36px;
    border-radius: var(--ads-radius-sm);
    background: rgba(255,255,255,0.06);
    padding: 4px;
}
.ads-logo em {
    font-style: normal;
    background: var(--ads-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ads-nav ul {
    display: flex;
    gap: var(--ads-sp-6);
    align-items: center;
}
.ads-nav a {
    color: var(--ads-text-invert);
    font-weight: var(--ads-fw-medium);
    font-size: var(--ads-fs-sm);
    padding: var(--ads-sp-2) 0;
    position: relative;
}
.ads-nav a:hover { opacity: 0.8; color: var(--ads-text-invert); }
.ads-nav a:not(.ads-nav-cta)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: var(--ads-gradient);
    transition: width var(--ads-tr-base);
}
.ads-nav a:not(.ads-nav-cta):hover::after { width: 100%; }

.ads-nav-cta {
    background: var(--ads-gradient);
    padding: var(--ads-sp-2) var(--ads-sp-4) !important;
    border-radius: var(--ads-radius-full);
    font-weight: var(--ads-fw-semibold) !important;
}

.ads-theme-toggle {
    width: 40px;
    height: 40px;
    margin-left: var(--ads-sp-3);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--ads-text-invert);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--ads-tr-fast), transform var(--ads-tr-base);
}
.ads-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: rotate(20deg);
}
.ads-theme-toggle:focus-visible {
    outline: 2px solid var(--ads-text-invert);
    outline-offset: 2px;
}
/* El CSS alterna qué icono se muestra según data-theme — sin JS visual. */
.ads-theme-toggle-icon {
    display: none;
    color: var(--ads-text-invert);
}
.ads-theme-toggle-icon--moon { display: inline-block; }
[data-theme="dark"] .ads-theme-toggle-icon--moon { display: none; }
[data-theme="dark"] .ads-theme-toggle-icon--sun  { display: inline-block; }

.ads-mobile-menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: var(--ads-radius-sm);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
.ads-mobile-menu-btn span {
    width: 22px;
    height: 2px;
    background: var(--ads-text-invert);
    border-radius: 2px;
    transition: transform var(--ads-tr-base), opacity var(--ads-tr-fast);
}
.ads-mobile-menu-btn[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.ads-mobile-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ads-mobile-menu-btn[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}


/* ─── 5. Hero ────────────────────────────────────────────────────────────── */
.ads-hero {
    background: var(--ads-gradient-hero);
    padding-block: var(--ads-sp-8) var(--ads-sp-9);
    position: relative;
    overflow: hidden;
}
.ads-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ads-gradient-soft);
    opacity: var(--ads-hero-overlay-opacity, 0.6);
    pointer-events: none;
}
[data-theme="dark"] .ads-hero { --ads-hero-overlay-opacity: 0.9; }

.ads-hero-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--ads-sp-8);
    align-items: center;
    position: relative;
}

.ads-hero-text { max-width: 560px; }

.ads-hero-title {
    font-size: var(--ads-fs-4xl);
    font-weight: var(--ads-fw-extrabold);
    letter-spacing: -0.02em;
    margin-bottom: var(--ads-sp-5);
}
.ads-hero-line {
    display: block;
    margin-top: var(--ads-sp-2);
}
.ads-hero-word {
    display: inline-block;
    margin-right: var(--ads-sp-2);
}
.ads-hero-word-1 { color: var(--ads-secondary); }
.ads-hero-word-2 { color: var(--ads-primary); }
.ads-hero-word-3 {
    background: linear-gradient(90deg, var(--ads-secondary) 0%, var(--ads-primary) 70%, var(--ads-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ads-hero-subtitle {
    font-size: var(--ads-fs-md);
    color: var(--ads-text-muted);
    margin-bottom: var(--ads-sp-5);
    line-height: 1.6;
}

.ads-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ads-sp-2);
    padding: var(--ads-sp-3) var(--ads-sp-5);
    background: var(--ads-bg);
    border: 1px solid var(--ads-border);
    border-radius: var(--ads-radius-full);
    font-size: var(--ads-fs-sm);
    font-weight: var(--ads-fw-medium);
    color: var(--ads-text);
    box-shadow: var(--ads-shadow-sm);
    margin-bottom: var(--ads-sp-6);
}

.ads-hero-actions {
    display: flex;
    gap: var(--ads-sp-3);
    flex-wrap: wrap;
}


/* ─── 6. Mockups (fake phone screens en hero) ────────────────────────────── */
.ads-hero-mockups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ads-sp-3);
    align-items: end;
    position: relative;
}

.ads-mockup {
    background: var(--ads-bg);
    border-radius: var(--ads-radius-lg);
    overflow: hidden;
    box-shadow: var(--ads-shadow-lg);
    transition: transform var(--ads-tr-slow);
    position: relative;
    display: flex;
    flex-direction: column;
}
.ads-mockup:hover { transform: translateY(-6px); }

.ads-mockup--content     { transform: rotate(-2deg) translateY(20px); }
.ads-mockup--marketplace { transform: rotate(0deg)  translateY(-10px); z-index: 2; }
.ads-mockup--events      { transform: rotate(2deg)  translateY(15px); }

.ads-mockup-head {
    display: flex;
    align-items: center;
    gap: var(--ads-sp-2);
    padding: var(--ads-sp-3);
    border-bottom: 1px solid var(--ads-border);
}
.ads-mockup-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ads-gradient);
    flex-shrink: 0;
}
.ads-mockup-username {
    font-size: var(--ads-fs-xs);
    font-weight: var(--ads-fw-semibold);
    color: var(--ads-text-muted);
}

.ads-mockup-image {
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
}
.ads-mockup-image--content {
    background: linear-gradient(135deg, #d4a574 0%, #b88858 50%, #8b6f47 100%);
}
.ads-mockup-image--marketplace {
    background:
        radial-gradient(circle at 30% 60%, #444 0%, #222 60%),
        linear-gradient(135deg, #f0f0f0 0%, #d8d8d8 100%);
}
/* En dark, atenúa la "isla blanca" del mockup para integrarse con la
   composición sin perder reconocimiento del producto. */
[data-theme="dark"] .ads-mockup-image--marketplace {
    filter: brightness(0.65) saturate(0.85);
}
.ads-mockup-image--events {
    background: linear-gradient(180deg, #ff7a00 0%, #ff4fd5 50%, #6a0dad 100%);
}

.ads-mockup-body {
    padding: var(--ads-sp-3);
    flex: 1;
}
.ads-mockup-body h2 {
    font-size: var(--ads-fs-xs);
    font-weight: var(--ads-fw-bold);
    margin-bottom: 2px;
}
.ads-mockup-body p {
    font-size: 10px;
    color: var(--ads-text-muted);
    line-height: 1.4;
}
.ads-mockup-price {
    color: var(--ads-success) !important;
    font-weight: var(--ads-fw-bold);
    font-size: var(--ads-fs-sm) !important;
}

.ads-mockup-tag {
    padding: var(--ads-sp-2) var(--ads-sp-3);
    font-size: 10px;
    font-weight: var(--ads-fw-bold);
    text-align: center;
    color: var(--ads-text-invert);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ads-mockup-tag--content     { background: linear-gradient(90deg, #6a0dad, #8b3eef); }
.ads-mockup-tag--marketplace { background: linear-gradient(90deg, var(--ads-primary), #ff4fd5); }
.ads-mockup-tag--events      { background: linear-gradient(90deg, var(--ads-accent), #ff9d4d); }


/* ─── 7. Sections base ───────────────────────────────────────────────────── */
.ads-section {
    padding-block: var(--ads-sp-9);
}
.ads-section:nth-of-type(even) {
    background: var(--ads-bg-section);
}

.ads-section-header {
    text-align: center;
    margin-bottom: var(--ads-sp-7);
    max-width: 720px;
    margin-inline: auto;
}
.ads-section-header h2 {
    font-size: var(--ads-fs-3xl);
    margin-bottom: var(--ads-sp-3);
    letter-spacing: -0.02em;
}
.ads-section-header p {
    font-size: var(--ads-fs-md);
    color: var(--ads-text-muted);
}

.ads-eyebrow {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--ads-fs-sm);
    font-weight: var(--ads-fw-semibold);
    color: var(--ads-text-muted);
    margin-bottom: var(--ads-sp-6);
}


/* ─── 8. Ventajas grid ───────────────────────────────────────────────────── */
.ads-ventajas {
    background: var(--ads-bg) !important;
}
.ads-ventajas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ads-sp-4);
    background: var(--ads-bg-section);
    padding: var(--ads-sp-6);
    border-radius: var(--ads-radius-xl);
    border: 1px solid var(--ads-border);
}

.ads-ventaja {
    padding: var(--ads-sp-3);
}
.ads-ventaja h3 {
    font-size: var(--ads-fs-base);
    margin-bottom: var(--ads-sp-2);
}
.ads-ventaja p {
    font-size: var(--ads-fs-sm);
    color: var(--ads-text-muted);
    line-height: 1.5;
}

.ads-ventaja-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--ads-radius-md);
    margin-bottom: var(--ads-sp-3);
    color: var(--ads-text-invert);
}
.ads-ventaja-icon--users    { background: linear-gradient(135deg, #8b3eef, #6a0dad); }
.ads-ventaja-icon--target   { background: linear-gradient(135deg, var(--ads-primary), #ff4fd5); }
.ads-ventaja-icon--trending { background: linear-gradient(135deg, var(--ads-secondary), #4dd0e1); }
.ads-ventaja-icon--shield   { background: linear-gradient(135deg, var(--ads-success), #4ade80); }


/* ─── 9. Feeds grid ──────────────────────────────────────────────────────── */
.ads-feeds-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ads-sp-5);
}

.ads-feed-card {
    padding: var(--ads-sp-6);
    border-radius: var(--ads-radius-xl);
    border: 1px solid;
    display: flex;
    flex-direction: column;
    gap: var(--ads-sp-3);
    transition: transform var(--ads-tr-base), box-shadow var(--ads-tr-base);
    position: relative;
}
.ads-feed-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ads-shadow-lg);
}

.ads-feed-card--content {
    background: var(--ads-card-content);
    border-color: var(--ads-card-content-edge);
}
.ads-feed-card--marketplace {
    background: var(--ads-card-marketplace);
    border-color: var(--ads-card-marketplace-edge);
}
.ads-feed-card--events {
    background: var(--ads-card-events);
    border-color: var(--ads-card-events-edge);
}

.ads-feed-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--ads-radius-md);
    background: var(--ads-bg);
    box-shadow: var(--ads-shadow-sm);
}
.ads-feed-card--content     .ads-feed-card-icon { color: #6a0dad; }
.ads-feed-card--marketplace .ads-feed-card-icon { color: var(--ads-primary); }
.ads-feed-card--events      .ads-feed-card-icon { color: var(--ads-accent); }

.ads-feed-card h3 {
    font-size: var(--ads-fs-xl);
}
.ads-feed-card p {
    color: var(--ads-text-muted);
    font-size: var(--ads-fs-sm);
    flex: 1;
}

.ads-feeds-note {
    margin-top: var(--ads-sp-7);
    text-align: center;
    padding: var(--ads-sp-4) var(--ads-sp-5);
    background: var(--ads-bg-alt);
    border: 1px solid var(--ads-border);
    border-radius: var(--ads-radius-full);
    color: var(--ads-text-muted);
    font-size: var(--ads-fs-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--ads-sp-2);
    margin-inline: auto;
    width: fit-content;
    max-width: 100%;
}
.ads-feeds-note { display: flex; }
.ads-feeds-note svg { color: var(--ads-warning); flex-shrink: 0; }


/* ─── 10. Cómo funciona ──────────────────────────────────────────────────── */
.ads-howto-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ads-sp-5);
    counter-reset: step;
}

.ads-howto-step {
    padding: var(--ads-sp-5);
    background: var(--ads-bg);
    border: 1px solid var(--ads-border);
    border-radius: var(--ads-radius-lg);
    position: relative;
}

.ads-howto-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ads-gradient);
    color: var(--ads-text-invert);
    font-weight: var(--ads-fw-extrabold);
    font-size: var(--ads-fs-md);
    margin-bottom: var(--ads-sp-3);
}

.ads-howto-step h3 {
    font-size: var(--ads-fs-md);
    margin-bottom: var(--ads-sp-2);
}
.ads-howto-step p {
    color: var(--ads-text-muted);
    font-size: var(--ads-fs-sm);
}


/* ─── 11. Pricing ────────────────────────────────────────────────────────── */
.ads-pricing-card {
    max-width: 640px;
    margin-inline: auto;
    padding: var(--ads-sp-7);
    background: var(--ads-bg);
    border: 1px solid var(--ads-border);
    border-radius: var(--ads-radius-xl);
    box-shadow: var(--ads-shadow-md);
    text-align: center;
}

.ads-pricing-headline { margin-bottom: var(--ads-sp-5); }
.ads-pricing-prefix {
    display: block;
    font-size: var(--ads-fs-sm);
    color: var(--ads-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--ads-sp-2);
}
.ads-pricing-amount {
    display: block;
    font-size: var(--ads-fs-4xl);
    font-weight: var(--ads-fw-extrabold);
    background: var(--ads-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
}
.ads-pricing-unit {
    display: block;
    font-size: var(--ads-fs-sm);
    color: var(--ads-text-muted);
    margin-top: var(--ads-sp-2);
}

.ads-pricing-features {
    text-align: left;
    margin-block: var(--ads-sp-5);
    display: grid;
    gap: var(--ads-sp-2);
}
.ads-pricing-features li {
    padding-left: var(--ads-sp-6);
    position: relative;
    color: var(--ads-text);
    font-size: var(--ads-fs-sm);
}
.ads-pricing-features li::before {
    content: "✓";
    position: absolute;
    left: var(--ads-sp-3);
    color: var(--ads-success);
    font-weight: var(--ads-fw-bold);
}

.ads-pricing-disclaimer {
    font-size: var(--ads-fs-xs);
    color: var(--ads-text-subtle);
    margin-bottom: var(--ads-sp-5);
}


/* ─── 12. FAQ ────────────────────────────────────────────────────────────── */
.ads-faq-list {
    max-width: 760px;
    margin-inline: auto;
    display: grid;
    gap: var(--ads-sp-3);
}

.ads-faq-item {
    background: var(--ads-bg);
    border: 1px solid var(--ads-border);
    border-radius: var(--ads-radius-md);
    transition: border-color var(--ads-tr-fast);
}
.ads-faq-item[open] { border-color: var(--ads-primary); }

.ads-faq-item summary {
    padding: var(--ads-sp-4) var(--ads-sp-5);
    font-weight: var(--ads-fw-semibold);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ads-sp-4);
}
.ads-faq-item summary::-webkit-details-marker { display: none; }
.ads-faq-item summary::after {
    content: "+";
    font-size: var(--ads-fs-lg);
    color: var(--ads-primary);
    font-weight: var(--ads-fw-bold);
    transition: transform var(--ads-tr-base);
    flex-shrink: 0;
}
.ads-faq-item[open] summary::after {
    content: "−";
}
.ads-faq-item summary:focus-visible {
    outline: 2px solid var(--ads-primary);
    outline-offset: -2px;
    border-radius: var(--ads-radius-md);
}

.ads-faq-item p {
    padding: 0 var(--ads-sp-5) var(--ads-sp-5);
    color: var(--ads-text-muted);
    line-height: 1.6;
}


/* ─── 13. Buttons ────────────────────────────────────────────────────────── */
.ads-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ads-sp-2);
    padding: var(--ads-sp-3) var(--ads-sp-5);
    border-radius: var(--ads-radius-full);
    font-weight: var(--ads-fw-semibold);
    font-size: var(--ads-fs-base);
    line-height: 1.2;
    transition: transform var(--ads-tr-fast), box-shadow var(--ads-tr-fast),
                background var(--ads-tr-fast), opacity var(--ads-tr-fast);
    text-align: center;
    white-space: nowrap;
    user-select: none;
}
.ads-btn:focus-visible {
    outline: none;
    box-shadow: var(--ads-shadow-focus);
}
.ads-btn:disabled,
.ads-btn[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.ads-btn-primary {
    background: var(--ads-gradient);
    color: var(--ads-text-invert);
    box-shadow: var(--ads-shadow-md);
}
.ads-btn-primary:hover {
    color: var(--ads-text-invert);
    transform: translateY(-2px);
    box-shadow: var(--ads-shadow-xl);
}

.ads-btn-ghost {
    background: transparent;
    color: var(--ads-text);
    border: 1px solid var(--ads-border-strong);
}
.ads-btn-ghost:hover {
    background: var(--ads-bg-alt);
    color: var(--ads-text);
    border-color: var(--ads-text);
}

.ads-btn-feed {
    width: 100%;
    color: var(--ads-text-invert);
    padding: var(--ads-sp-3) var(--ads-sp-4);
    margin-top: var(--ads-sp-3);
}
.ads-btn-feed--content     { background: linear-gradient(90deg, #6a0dad, #8b3eef); }
.ads-btn-feed--marketplace { background: linear-gradient(90deg, var(--ads-primary), #ff4fd5); }
.ads-btn-feed--events      { background: linear-gradient(90deg, var(--ads-accent), #ff9d4d); }
.ads-btn-feed:hover {
    color: var(--ads-text-invert);
    transform: translateY(-2px);
    box-shadow: var(--ads-shadow-md);
}

.ads-btn-submit {
    min-width: 200px;
    position: relative;
}
.ads-btn-submit[data-state="loading"] .ads-btn-label { opacity: 0.4; }
.ads-btn-submit[data-state="loading"] .ads-btn-loader { display: inline-block; }

.ads-btn-loader {
    display: none;
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: var(--ads-text-invert);
    border-radius: 50%;
    animation: ads-spin 0.8s linear infinite;
}

@keyframes ads-spin {
    to { transform: rotate(360deg); }
}


/* ─── 14. Form ───────────────────────────────────────────────────────────── */
.ads-contact { background: var(--ads-bg-alt) !important; }

.ads-form {
    max-width: 800px;
    margin-inline: auto;
    background: var(--ads-bg);
    padding: var(--ads-sp-7);
    border-radius: var(--ads-radius-xl);
    border: 1px solid var(--ads-border);
    box-shadow: var(--ads-shadow-md);
}

.ads-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ads-sp-4) var(--ads-sp-5);
}

.ads-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--ads-sp-2);
}
.ads-form-field--full { grid-column: 1 / -1; }

.ads-form-field label {
    font-size: var(--ads-fs-sm);
    font-weight: var(--ads-fw-semibold);
    color: var(--ads-text);
}

.ads-form-field input[type="text"],
.ads-form-field input[type="email"],
.ads-form-field input[type="tel"],
.ads-form-field select,
.ads-form-field textarea {
    width: 100%;
    padding: var(--ads-sp-3) var(--ads-sp-4);
    font: inherit;
    color: var(--ads-text);
    background: var(--ads-bg);
    border: 1px solid var(--ads-border);
    border-radius: var(--ads-radius-md);
    transition: border-color var(--ads-tr-fast), box-shadow var(--ads-tr-fast);
    -webkit-appearance: none;
    appearance: none;
}

.ads-form-field input:hover,
.ads-form-field select:hover,
.ads-form-field textarea:hover { border-color: var(--ads-border-strong); }

.ads-form-field input:focus-visible,
.ads-form-field select:focus-visible,
.ads-form-field textarea:focus-visible {
    outline: none;
    border-color: var(--ads-primary);
    box-shadow: var(--ads-shadow-focus);
}

.ads-form-field input[aria-invalid="true"],
.ads-form-field select[aria-invalid="true"],
.ads-form-field textarea[aria-invalid="true"] {
    border-color: var(--ads-error);
    background: var(--ads-error-bg);
}

.ads-form-field textarea {
    resize: vertical;
    min-height: 110px;
    font-family: inherit;
}

.ads-form-field select {
    background-image: var(--ads-select-arrow);
    background-repeat: no-repeat;
    background-position: right var(--ads-sp-4) center;
    padding-right: var(--ads-sp-7);
}

.ads-form-hint {
    font-size: var(--ads-fs-xs);
    color: var(--ads-text-subtle);
}

.ads-form-error {
    font-size: var(--ads-fs-xs);
    color: var(--ads-error);
    min-height: 1em;
    font-weight: var(--ads-fw-medium);
}
.ads-form-error:empty { display: none; }

.ads-checkbox {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--ads-sp-3);
    align-items: start;
    cursor: pointer;
    font-weight: 400 !important;
    line-height: 1.5;
}
.ads-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--ads-primary);
    cursor: pointer;
}
.ads-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--ads-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.ads-form-actions {
    margin-top: var(--ads-sp-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ads-sp-3);
}

.ads-form-status {
    font-size: var(--ads-fs-sm);
    text-align: center;
    min-height: 1.5em;
}
.ads-form-status[data-state="success"] {
    color: var(--ads-success);
    font-weight: var(--ads-fw-semibold);
}
.ads-form-status[data-state="error"] {
    color: var(--ads-error);
    font-weight: var(--ads-fw-semibold);
}

.ads-form-legal {
    margin-top: var(--ads-sp-5);
    text-align: center;
    font-size: var(--ads-fs-xs);
    color: var(--ads-text-subtle);
    line-height: 1.5;
}


/* ─── 15. Footer ─────────────────────────────────────────────────────────── */
.ads-footer {
    background: var(--ads-bg-dark);
    color: var(--ads-text-invert);
    padding-block: var(--ads-sp-7);
}

.ads-footer-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--ads-sp-5);
    align-items: center;
}

.ads-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--ads-sp-3);
    font-weight: var(--ads-fw-bold);
}
.ads-footer-brand img {
    width: 28px;
    height: 28px;
    border-radius: var(--ads-radius-sm);
    background: rgba(255,255,255,0.06);
    padding: 3px;
}
.ads-footer-brand em {
    font-style: normal;
    background: var(--ads-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ads-footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ads-sp-5);
    justify-content: center;
}
.ads-footer-nav a {
    color: rgba(255,255,255,0.7);
    font-size: var(--ads-fs-sm);
    transition: color var(--ads-tr-fast);
}
.ads-footer-nav a:hover { color: var(--ads-text-invert); }

.ads-footer-copy {
    font-size: var(--ads-fs-xs);
    color: rgba(255,255,255,0.5);
    text-align: right;
}


/* ─── 16. Animaciones de entrada (clases activadas por JS) ───────────────── */
.ads-anim {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ads-anim.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ─── 17. Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ads-hero-inner {
        grid-template-columns: 1fr;
        gap: var(--ads-sp-7);
    }
    .ads-hero-mockups { max-width: 600px; margin-inline: auto; }
    .ads-ventajas-grid { grid-template-columns: repeat(2, 1fr); }
    .ads-howto-steps   { grid-template-columns: repeat(2, 1fr); }
    .ads-feeds-grid    { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }

    :root {
        --ads-fs-4xl: 44px;
        --ads-fs-3xl: 32px;
    }
}

@media (max-width: 768px) {
    :root {
        --ads-fs-4xl: 36px;
        --ads-fs-3xl: 28px;
        --ads-fs-2xl: 24px;
        --ads-sp-9: 64px;
        --ads-sp-8: 48px;
        --ads-container-pad: 16px;
    }

    .ads-nav { display: none; }
    .ads-mobile-menu-btn { display: inline-flex; }

    .ads-nav.is-open {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--ads-gradient-header);
        padding: var(--ads-sp-4);
        box-shadow: var(--ads-shadow-md);
    }
    .ads-nav.is-open ul {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ads-sp-3);
    }
    .ads-nav.is-open a { padding: var(--ads-sp-3); }

    .ads-hero-mockups   { gap: var(--ads-sp-2); }
    .ads-mockup--content     { transform: rotate(-1deg); }
    .ads-mockup--marketplace { transform: rotate(0deg); }
    .ads-mockup--events      { transform: rotate(1deg); }

    .ads-form { padding: var(--ads-sp-5); }
    .ads-form-grid { grid-template-columns: 1fr; }

    .ads-footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--ads-sp-4);
    }
    .ads-footer-copy { text-align: center; }
    .ads-footer-brand { justify-content: center; }
}

@media (max-width: 480px) {
    :root {
        --ads-fs-4xl: 30px;
        --ads-fs-3xl: 24px;
        --ads-sp-9: 48px;
        --ads-sp-8: 40px;
    }
    .ads-ventajas-grid { grid-template-columns: 1fr; }
    .ads-howto-steps   { grid-template-columns: 1fr; }
    .ads-pricing-card  { padding: var(--ads-sp-5); }
    .ads-form          { padding: var(--ads-sp-4); }

    .ads-hero-actions  { flex-direction: column; align-items: stretch; }
    .ads-btn           { width: 100%; }
    .ads-hero-actions .ads-btn { width: auto; }
}


/* ─── 18. Print (mínimo, evita romper si alguien imprime) ────────────────── */
@media print {
    .ads-header, .ads-footer, .ads-mobile-menu-btn, .ads-hero-actions,
    .ads-feeds-note, .ads-form-actions { display: none !important; }
    .ads-hero { padding-block: var(--ads-sp-4); }
    .ads-section { padding-block: var(--ads-sp-5); break-inside: avoid; }
    a { color: var(--ads-text); text-decoration: underline; }
}