/* Keeps previous base styles but adds specific classes for pages logic */

/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --bg-color: #fafaf9;
    /* Stone-50 */
    --text-main: #1c1917;
    /* Stone-900 */
    --text-muted: #57534e;
    /* Stone-600 */
    --primary: #2563eb;
    --secondary: #ffffff;
    --card-bg: #ffffff;
    --border-color: #e7e5e4;
    /* Stone-200 */
    --nav-bg: rgba(255, 255, 255, 0.9);
    --radius: 16px;
}

/* REMOVED FORCE DARK THEME BLOCK */

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-family: 'Inter', sans-serif;
    background: var(--bg-color);
    /* Subtle noise/grain for premium feel matching Hero */
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.05"/%3E%3C/svg%3E');
    color: var(--text-main);
    line-height: 1.6;
    transition: background 0.3s, color 0.3s;
}

a {
    text-decoration: none;
    color: inherit;
}

* {
    box-sizing: border-box;
    /* Global safety for widths */
}

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

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
    /* Removes bottom spacing */
}

/* LAYOUT */
.container {
    max-width: 1400px;
    /* Wider for less wasted space on large screens */
    width: 95%;
    /* Use more percentage width */
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: 80px 0;
}

/* Home Page specific flow */
.home-page .section {
    padding: 60px 0;
    /* Tighter spacing for flow */
}

/* HEADER (Segmented Pills) */
header {
    position: absolute;
    /* Changed from fixed to absolute as requested */
    top: 20px;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0;
    pointer-events: none;
    transition: top 0.3s ease;
}

header .container {
    background: transparent;
    padding: 0 40px;
    /* Align with Hero */
    /* Align with Hero */
    max-width: 1400px;
    /* Match Main Container */
    width: 95%;
    /* Match Main Container */
    margin: 0 auto;
    /* Center container max-width */
    display: flex;
    justify-content: space-between;
    /* Space betwen [Logo+Nav] and [Actions] */
    align-items: center;
    pointer-events: none;
}

/* ... existing nav styles ... */

/* HERO SECTION - MERGED rule (Restoring Image) */
/* HERO SECTION - SOPHISTICATED ROUNDED LOOK */
/* HERO SECTION - SOPHISTICATED ROUNDED COMPACT LOOK */
.hero-wrapper {
    position: relative;
    width: calc(100% - 10px);
    /* 5px margin side */
    max-width: none;
    /* Allow full width */
    margin: 5px auto;
    /* 5px top/bottom/left/right */
    border-radius: 30px;

    /* Auto height for compactness */
    min-height: auto;
    /* Increased padding for more spacing and symmetry */
    padding: 220px 0 220px 0;

    overflow: hidden;
    background-color: #0d0d0d;
    background-image: url('imagen/1.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    box-shadow: 0 0 0 0 transparent;
}

/* Force WHITE text on Hero regardless of theme */
/* REDUCED SIZE as requested */
.hero-title {
    font-size: 3.5rem;
    /* Reduced from 5rem */
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 10px;
    /* Reduced from 15px */
    letter-spacing: -2px;
    text-transform: uppercase;
    color: white !important;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    /* Good shadow for legibility */

    /* SAFETY RESET */
    background: none !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: initial !important;
}

.hero-desc {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9) !important;
    max-width: 600px;
    margin-top: 0;
    /* Reduced from 5px */
    line-height: 1.35;
    text-align: left;
    margin-bottom: 15px;
    /* Reduced from 20px */
    margin-left: 0;
    line-height: 1.5;
    text-align: left;
    /* Strict Left */
    margin-bottom: 30px;
    margin-left: 0;
    /* Enhance left alignment */
}

/* HEADER NAVIGATION */
header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    pointer-events: none;
    /* Let children handle events */
}

/* Group Logo and Nav */
.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Gap between Logo Pill and Nav Pill */
    pointer-events: auto;
}

/* 1. Logo Pill */
.logo {
    /* Adaptive Background - SOLID */
    background: #0d0d0d;
    /* Solid Dark */
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    transition: all 0.3s;
}

.logo {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1);
}

/* 2. Menu Pill - Near Logo */
.nav-menu {
    display: flex;
    gap: 5px;
    background: #0d0d0d;
    /* Solid Dark */
    padding: 6px 10px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.nav-menu {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1);
}



.nav-link {
    color: var(--text-muted);
    /* Adaptive Muted Text */
    font-weight: 600;
    /* Increased from 500 */
    font-size: 0.9rem;
    padding: 8px 16px;
    border-radius: 50px;
    transition: all 0.3s;
    text-decoration: none;
}

/* Explicit Light Mode Text Color Fix & Active State */
.nav-link {
    color: #000000 !important;
    font-weight: 600;
}

.nav-link:hover {
    color: #000000;
    background: rgba(0, 0, 0, 0.05);
}

.nav-link.active {
    background: rgba(37, 99, 235, 0.15) !important;
    color: var(--primary) !important;
    font-weight: 700;
}

/* Fix for .btn-outline in Light Mode to ensure visibility */
.btn-outline {
    color: #0d0d0d !important;
    border-color: #0d0d0d !important;
}

.btn-outline:hover {
    background: #0d0d0d !important;
    color: #ffffff !important;
}

/* FLAT LOOK for Light Mode (No Shadow/Blur) */
.nav-menu,
.logo {
    box-shadow: none !important;
    backdrop-filter: none !important;
    border: 1px solid #e4e4e7 !important;
    /* Visible clean border */
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-main);
    background: rgba(125, 125, 125, 0.1);
}

/* 3. Right Actions (Theme + Button + Burger) */
.header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    pointer-events: auto;
    /* IMPORTANT for clicks */
    justify-content: flex-end;
    /* Align right */
}

/* Hablemos Button (Desktop) */
/* Force BLUE background by default on standard pages */
header .btn-primary {
    background: var(--primary);
    /* BLUE */
    color: white;
    border-radius: 50px;
    padding: 10px 24px;
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
    transition: all 0.3s;
}

header .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.5);
    background: #1d4ed8;
    /* Darker blue hover */
}

/* Theme Toggle styles - Matching Logo/Nav Pill Style */
.theme-toggle,
.header-btn {
    background: #0d0d0d;
    /* Solid Dark */
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    width: 44px;
    /* Slightly larger touch target */
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.theme-toggle:hover,
.header-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: rotate(15deg);
}

/* Active State for toggle (Sun mode) handled by JS icon swap, but we can add style */


.theme-toggle i {
    pointer-events: none;
    width: 20px;
    height: 20px;
}

/* Header Actions Container - Strict Right Align */
.header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    /* Ensure it doesn't shrink */
    flex-shrink: 0;
}

/* RESTORING GENERIC STYLES */
header.scrolled {
    /* Keeping it "estancado arriba" - User asked to NOT move down. 
       We will keep it at 20px or 0px. Let's stick to 20px as the design language seems to be "floating pills". 
       If user meant "stuck to the very top edge", 0px would be better. 
       "siempre esté estancado arriba, no quiero que baje" -> "I don't want it to lower".
       The previous code moved it from 20px to 10px (up). 
       Let's keep it consistent at 20px so it feels completely static. */
    top: 20px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: transform 0.2s;
    cursor: pointer;
    border: none;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-outline {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-main);
}

/* Mobile Menu Button - Ensure Visibility */
.mobile-menu-btn {
    display: none;
    /* Hidden on desktop */
    background: transparent;
    border: 1px solid var(--border-color);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #000000 !important;
    /* Force Black */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 0;
    /* Align perfectly end */
}

/* Featured Tool Optimization for Mobile */
@media (max-width: 768px) {
    .featured-tool-card {
        flex-direction: column-reverse;
        /* Image on top? Or keep bottom but smaller? Use said "abarca demasiado espacio... se pone de forma vertical" */
        /* Let's make it more compact. Maybe side-by-side or just smaller padding/text? */
        /* Actually user said "reorganizarlo para que no abarque tanto espacio". */
        /* Let's try a compact vertical layout or a smaller grid. */
        padding: 20px !important;
        gap: 20px !important;
    }

    .featured-tool-card .ft-content {
        padding: 0 !important;
        text-align: center;
    }

    .featured-tool-card .ft-title {
        font-size: 1.8rem !important;
        /* Reducir tamaño */
        margin-bottom: 10px !important;
    }

    .featured-tool-card .ft-desc {
        font-size: 0.95rem !important;
        margin-bottom: 20px !important;
    }

    .featured-tool-card .ft-image {
        height: 180px !important;
        /* Reduce height massively to save space */
    }
}

/* PAGES SPECIFIC START */

.page-title {
    font-size: 4rem;
    text-transform: uppercase;
    font-weight: 900;
    line-height: 0.9;
    margin-bottom: 24px;
}

/* Consistent Header Style for Sections */
.home-page h2 {
    font-weight: 800;
    letter-spacing: -1px;
}

.page-intro {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 600px;
}

/* SERVICES */
.services-grid {
    display: grid;
    gap: 40px;
    margin-top: 60px;
}

.service-card {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 40px;
    border-radius: 30px;
    transition: border 0.3s;
}

.service-card:hover {
    border-color: var(--primary);
}

.service-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 20px;
}

.service-details {
    padding: 40px;
    background: var(--secondary);
    border-radius: 20px;
    margin-top: 20px;
}

/* TOOLS */
.tools-controls {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.filter-btn {
    background: var(--secondary);
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 600;
}

.filter-btn.active {
    background: var(--primary);
    color: white;
}

.search-input {
    flex-grow: 1;
    background: var(--secondary);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 10px;
    color: var(--text-main);
    outline: none;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    transition: opacity 0.3s ease-in-out;
}

.tool-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.3s;
}

.tool-card:hover {
    transform: translateY(-5px);
}

.tool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tool-cat {
    font-size: 0.75rem;
    background: var(--secondary);
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--primary);
}

.fav-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
}

.fav-btn.active {
    color: #f43f5e;
}

.btn-tool {
    margin-top: auto;
    background: var(--secondary);
    color: var(--text-main);
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
}

.btn-tool:hover {
    background: var(--text-main);
    color: var(--bg-color);
}

/* FOOTER */
footer {
    border-top: 1px solid var(--border-color);
    padding-top: 60px;
    padding-bottom: 40px;
    margin-top: 100px;
    text-align: center;
    background: var(--bg-color);
    /* Ensure opacity */
}

/* Mobile Visibility Helpers */
@media (max-width: 768px) {
    .hidden-mobile {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
    }

    /* Ensure Header Icons don't overlap */
    .header-actions {
        gap: 8px;
    }

    /* Adjust User Icon on Mobile */
    .header-actions .btn-outline {
        padding: 4px;
    }
}

@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--secondary);
    color: var(--text-muted);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid var(--border-color);
}

.social-link:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-5px) scale(1.1);
    border-color: var(--primary);
}

/* FORM STYLES */
input:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(255, 85, 0, 0.1);
}

/* ANIMATIONS */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}

/* SCROLL TO TOP BUTTON */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 50px;
    height: 50px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 999;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background: #1d4ed8;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
}


/* GLOBAL GRADIENT BACKGROUND FOR HERO (IMAGE OVERHAUL) */
/* HERO SECTION DUPLICATE REMOVED */

.hero-wrapper .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* Align CONTENT to LEFT */
    position: relative;
    z-index: 2;
    padding-top: 80px;
    /* Offset for header */
}

.hero-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Warm Gradient Overlay */
    background: linear-gradient(90deg, rgba(28, 25, 23, 0.85) 0%, rgba(28, 25, 23, 0.5) 40%, rgba(28, 25, 23, 0.1) 100%);
    /* Lighter/Shorter gradient as requested */
    z-index: 1;
}

/* PARTICLES (Overlay style) */
.particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Above bg, below content */
    opacity: 0.3;
    pointer-events: none;
}

/* HERO SECTION */
/* HERO SECTION DUPLICATE REMOVED */

/* Mobile Hero Adjustments: Center and Top Margin */
@media (max-width: 768px) {
    .hero-wrapper {
        width: 100%;
        margin: 0;
        border-radius: 0 0 30px 30px;
        /* Curve only at bottom */
    }

    .hero-wrapper .container {
        align-items: center;
        /* Center horizontally */
        justify-content: flex-start;
        /* Start from top? Or center? User said "centradito en el medio" but also "margen superior" */
        padding-top: 120px;
        /* Push down to show background people */
        text-align: center;
    }

    .hero-title {
        text-align: center;
        font-size: 2.5rem !important;
        /* Smaller on mobile */
        margin-left: auto;
        margin-right: auto;
    }

    .hero-desc {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* Ensure buttons center too */
    .hero-wrapper .container>div {
        justify-content: center !important;
    }
}

/* Force WHITE text on Hero regardless of theme */
/* HERO SECTION DUPLICATE RULES REMOVED */

/* HEADER STYLE - WHITE BACKGROUND (Requested) */
/* We'll use a specific class or default override for the nav pills */

/* Nav Menu Pill - White Background by default (Hero State) */
.nav-menu {
    display: flex;
    gap: 8px;
    background: white;
    /* Requested White Background */
    padding: 6px;
    border-radius: 50px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Links inside White Menu must be dark */
.nav-link {
    color: #0d0d0d;
    padding: 8px 20px;
    border-radius: 40px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.nav-link:hover {
    background: rgba(0, 0, 0, 0.05);
    /* Dark hover for white menu */
    color: var(--primary);
}

.nav-link.active {
    background: black;
    color: white;
}

/* SCROLLED STATE / OTHER PAGES (Adaptive) 
   We will rely on 'header.scrolled' class or page-specific overrides.
   But user said: "when in other sections... background black/gray".
   So let's define that:
*/

/* Dark Menu State (Applied via class 'dark-nav' or similar, or checking theme?)
   Actually, the user said "en otras secciones... se va a poner de color negro".
   We can simply add a modifier class `.nav-dark` that we apply on non-home pages 
   or when scrolled.
*/

header.scrolled .nav-menu,
body:not(.home-page) .nav-menu {
    /* If we add 'home-page' class to body of index.html only */
    background: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(15px);
    border-color: rgba(255, 255, 255, 0.1);
}

header.scrolled .nav-link,
body:not(.home-page) .nav-link {
    color: white;
}

header.scrolled .nav-link:hover,
body:not(.home-page) .nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
}

header.scrolled .nav-link.active,
body:not(.home-page) .nav-link.active {
    background: white;
    color: black;
}


/* REFERENCE BADGE */
.pill-badge {
    background: white;
    color: #2563eb;
    border: none;
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 100px;
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.2);
}

/* CSS CANVAS PARTICLES */
.particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    /* JS handles mouse via window listener usually, or we set pointer-events:auto if canvas tracks */
}

/* REFERENCE BUTTONS (RESIZED) */
.btn {
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 32px;
    /* Small & Elegant */
    font-size: 0.95rem;
    /* Reduced from default/larger */
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    clip-path: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: var(--primary);
    box-shadow: 0 5px 15px -5px rgba(37, 99, 235, 0.4);
    color: white;
    border: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.6);
}

.btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.btn-outline:hover {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.1);
    color: white;
    box-shadow: 0 0 15px rgba(37, 99, 235, 0.15);
}

/* HOME POSTER TOOLS SECTION */
.section-poster-tools {
    background-color: #050a15;
    /* Deep dark blue/black */
    color: white;
    padding: 100px 0;
}

.tools-grid-poster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.tool-card-poster {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 250px;
    backdrop-filter: blur(10px);
}

.tool-card-poster:hover {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.1);
    transform: translateY(-5px);
}

.tool-card-poster h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
}

.tool-card-poster p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.5;
}

.tool-poster-icon {
    width: 50px;
    height: 50px;
    background: var(--primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: white;
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
}

/* LIGHT MODE FIXES */
[data-theme="light"] .hero-title {
    background: linear-gradient(180deg, #1a1a1a 0%, #4b5563 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    /* Remove glow in light mode for readability */
}

[data-theme="light"] .text-outline {
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .text-outline:hover {
    -webkit-text-stroke: 1px var(--primary);
}


/* CONTACT STYLES */
.contact-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.contact-card-centered {
    background: var(--card-bg);
    padding: 50px;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.input-modern {
    width: 100%;
    padding: 16px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-main);
    font-family: inherit;
    transition: all 0.3s;
    box-sizing: border-box;
    /* Ensure padding doesn't break layout */
}

.input-modern:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

.contact-mini-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-weight: 500;
    transition: color 0.3s;
}

.contact-mini-link:hover {
    color: var(--primary);
}


/* FAQ STYLES */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s;
}

.faq-item[open] {
    border-color: var(--primary);
    background: var(--secondary);
}

.faq-question {
    padding: 24px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 1.1rem;
    list-style: none;
    /* Remove default marker */
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-answer {
    padding: 0 24px 24px 24px;
    color: var(--text-muted);
    line-height: 1.7;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 10px;
    padding-top: 20px;
    animation: fadeIn 0.3s ease-out;
}


/* INTERNAL ADS & FEATURED TOOLS */
.ad-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    /* Improved contrast bg */
    border: 1px solid rgba(37, 99, 235, 0.3);
    position: relative;
    overflow: hidden;
}

.ad-card h3 {
    color: white !important;
}

.ad-card p {
    color: #cbd5e1 !important;
}

.ad-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.ad-badge {
    background: white !important;
    color: var(--primary) !important;
}

.ad-btn {
    background: var(--primary) !important;
    color: white !important;
    border: none;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.ad-btn:hover {
    background: white !important;
    color: var(--primary) !important;
}

.featured-tool-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    min-height: 400px;
}

@media (max-width: 768px) {
    .featured-tool-card {
        grid-template-columns: 1fr;
    }

    .hero-title {
        font-size: 3.5rem;
    }

    .contact-card-centered {
        padding: 30px;
    }
}

.ft-content {
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.ft-badge {
    color: var(--primary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    display: block;
}

.ft-title {
    font-size: 3.5rem;
    font-weight: 900;
    margin: 0 0 20px 0;
    line-height: 1;
}

.ft-desc {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 40px;
    max-width: 400px;
}

.ft-image {
    background: #000;
    position: relative;
    /* Image handling in HTML */
}

/* Home Tools Section Background */
.section-blue-bg {
    background-color: var(--primary);
    color: white;
}

.section-blue-bg h2,
.section-blue-bg span {
    color: white !important;
}

.section-blue-bg .tool-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.section-blue-bg .tool-card h3 {
    color: white;
}

.section-blue-bg .tool-card p {
    color: rgba(255, 255, 255, 0.8);
}

.section-blue-bg .btn-tool {
    background: white;
    color: var(--primary);
}

.section-blue-bg .btn-tool:hover {
    background: #f0f0f0;
}

.section-blue-bg .btn-outline {
    border-color: white;
    color: white;
}

.section-blue-bg .btn-outline:hover {
    background: white;
    color: var(--primary);
}


/* --- RESPONSIVE ADAPTATION --- */

/* TABLET & MOBILE (Max 1024px) */
@media (max-width: 1024px) {
    .container {
        padding: 0 30px;
        /* Ensure edge spacing */
    }

    .hero-title {
        font-size: clamp(3rem, 10vw, 7rem);
        /* Scale down slightly */
    }
}

/* MOBILE (Max 768px) */
@media (max-width: 768px) {

    /* HEADER / NAV (Mobile Menu) */
    header .container {
        padding: 15px 24px;
        /* Standard Padding */
        margin-top: 0;
        /* No Top Margin */
        border-radius: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
    }

    .mobile-menu-btn {
        color: white;
        /* White icon on Dark Hero */
        border-color: rgba(255, 255, 255, 0.2);
        display: flex;
        z-index: 2001;
    }

    nav {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
    }

    /* Hide desktop menu items by default on mobile */
    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(5, 10, 21, 0.98);
        /* Deep dark blue/black overlay */
        backdrop-filter: blur(15px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        z-index: 2000;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateY(-100%);
        /* Hidden top */
        padding: 0;
        border-radius: 0;
        border: none;
    }

    .nav-menu.active {
        transform: translateY(0);
        /* Slide down */
    }

    .nav-link {
        font-size: 1.5rem;
        /* Larger touch targets */
        font-weight: 700;
        color: white;
    }

    /* Mobile Menu Button */
    .mobile-menu-btn {
        display: flex;
        /* Visible on mobile */
        z-index: 2001;
        /* Above menu */
    }

    /* Theme toggle & CTA - Adjust visibility or position */
    /* Let's keep theme toggle and CTA accessible if possible, or move to menu?
       For now, let's keep them in the header but maybe hide CTA text or just icon? */


    .btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        /* Compact padding */
        font-size: 0.9rem;
        width: 100%;
        /* Full width buttons on mobile */
        justify-content: center;
        margin-bottom: 0;
        /* Handled by gap */
    }

    /* GRIDS */
    .tools-grid-poster,
    .tools-grid,
    .services-grid {
        grid-template-columns: 1fr;
        padding: 0;
        gap: 20px;
    }

    /* Cards */
    .tool-card-poster,
    .service-card,
    .contact-card-centered {
        padding: 24px;
        border-radius: 20px;
    }

    .service-card {
        grid-template-columns: 1fr;
        /* Stack service card */
    }

    .service-card img {
        height: 200px;
    }

    /* Page Titles */
    .page-title {
        font-size: 2.5rem;
        text-align: center;
        margin-top: 20px;
    }

    .page-intro {
        text-align: center;
        margin: 0 auto 40px;
        font-size: 1rem;
    }
}

/* SMALL MOBILE (Max 480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 20px;
        /* Standardize specific padding */
    }

    .hero-title {
        font-size: 2.8rem;
        /* readable minimum for small phones */
        word-wrap: break-word;
        /* Prevent long words breaking layout */
    }

    .page-title {
        font-size: 2rem;
        word-wrap: break-word;
    }

    .text-outline {
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
    }

    /* Ensure buttons don't overflow with long text */
    .btn {
        white-space: normal;
        text-align: center;
        height: auto;
        min-height: 48px;
    }
}

/* RESPONSIVE HEADER & MOBILE MENU OVERRIDES */

/* Desktop / Default Overrides */
.mobile-cta,
.mobile-toggle,
.mobile-menu-items {
    display: none;
}

.hidden-mobile,
.desktop-toggle {
    display: inline-flex;
}

/* Ensure Header Actions Alignment */
.header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    flex-shrink: 0;
    height: 100%;
    /* Ensure full height for alignment */
}

/* Vertical Alignment Enforcement */
header .container {
    display: flex;
    align-items: center;
    /* STRICT VERTICAL CENTER */
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
    /* STRICT VERTICAL CENTER */
}

/* GLOBAL OVERFLOW FIX */
html,
body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* ABOUT GRID - Desktop Default */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* INCREASE SECTION SPACING */
section.section {
    padding: 100px 0;
    /* More breathing room top/bottom */
}

/* TABLET & MOBILE (Max 900px) overrides */
@media (max-width: 900px) {
    /* ... existing header overrides ... */

    /* STACK GRIDS ON MOBILE */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
        /* Center text on mobile usually looks better, user asked for centered/well-placed */
    }

    .about-grid h2 {
        font-size: 2.5rem !important;
        /* Adjust big titles */
    }

    /* Stats Grid Adjustment for Mobile */
    .stats-grid {
        justify-content: center;
        margin-top: 20px;
    }

    /* ... continue with existing overrides ... */

    /* Hide Desktop versions */
    .hidden-mobile,
    .desktop-toggle {
        display: none !important;
    }

    /* ... rest of existing code ... */

    /* Right Padding for Header Actions to match Logo Left Margin */
    header .container {
        padding-right: 20px;
        /* Ensure space on the right */
    }

    .mobile-menu-btn {
        display: flex;
        margin-right: 0;
        /* Container padding handles spacing */
        z-index: 2000;
        /* Ensure above menu overlay */
    }

    /* Refactor Nav Menu for Mobile - FULL SCREEN */
    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(10, 10, 10, 0.98);
        /* Deep dark background */
        backdrop-filter: blur(20px);
        border: none;
        flex-direction: column;
        justify-content: center;
        /* Center Vertically */
        padding: 40px;
        border-radius: 0;
        gap: 30px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1500;
        /* Below toggle button */
        pointer-events: none;
    }

    .nav-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav-link {
        font-size: 2rem;
        /* Larger font for full screen */
        padding: 10px;
        width: auto;
        /* Auto width to center nicely */
        text-align: center;
        border: none;
        background: transparent;
    }

    .nav-link:hover {
        background: transparent;
        color: var(--primary);
        transform: scale(1.1);
    }

    /* Reveal Mobile Items Group */
    .mobile-menu-items {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        max-width: 300px;
        /* Limit width */
        align-items: center;
        margin-top: 40px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 40px;
    }

    .mobile-cta {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 16px;
        font-size: 1.2rem;
        background: var(--primary);
        color: white;
    }

    .mobile-toggle {
        display: flex;
        width: 100%;
        height: 50px;
        /* Fixed Height to prevent jumping */
        justify-content: center;
        align-items: center;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.05);
        transition: background 0.3s ease;
        /* Remove transform rotate from here if it causes layout shift */
    }

    /* Disable rotate on mobile toggle to prevent "deformation" perception */
    .mobile-toggle:hover {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* GENERIC COLORED CARD FOR TOOLS (Like Ads but Category specific) */
.colored-card {
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
}

.colored-card h3 {
    color: white !important;
}

.colored-card p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.colored-card .tool-cat {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

.colored-card .btn-tool {
    background: white !important;
    color: #0d0d0d !important;
}

.header-left {
    display: flex;
    align-items: center;
    /* STRICT VERTICAL CENTER */
}

/* GLOBAL OVERFLOW FIX */
html,
body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* ABOUT GRID - Desktop Default */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* INCREASE SECTION SPACING */
section.section {
    padding: 100px 0;
    /* More breathing room top/bottom */
}

/* TABLET & MOBILE (Max 900px) overrides */
@media (max-width: 900px) {
    /* ... existing header overrides ... */

    /* STACK GRIDS ON MOBILE */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
        /* Center text on mobile usually looks better, user asked for centered/well-placed */
    }

    .about-grid h2 {
        font-size: 2.5rem !important;
        /* Adjust big titles */
    }

    /* Stats Grid Adjustment for Mobile */
    .stats-grid {
        justify-content: center;
        margin-top: 20px;
    }

    /* ... continue with existing overrides ... */

    /* Hide Desktop versions */
    .hidden-mobile,
    .desktop-toggle {
        display: none !important;
    }

    /* ... rest of existing code ... */

    /* Right Padding for Header Actions to match Logo Left Margin */
    header .container {
        padding-right: 20px;
        /* Ensure space on the right */
    }

    .mobile-menu-btn {
        display: flex;
        margin-right: 0;
        /* Container padding handles spacing */
        z-index: 2000;
        /* Ensure above menu overlay */
    }

    /* Refactor Nav Menu for Mobile - FULL SCREEN */
    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(10, 10, 10, 0.98);
        /* Deep dark background */
        backdrop-filter: blur(20px);
        border: none;
        flex-direction: column;
        justify-content: center;
        /* Center Vertically */
        padding: 40px;
        border-radius: 0;
        gap: 30px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1500;
        /* Below toggle button */
        pointer-events: none;
    }

    .nav-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav-link {
        font-size: 2rem;
        /* Larger font for full screen */
        padding: 10px;
        width: auto;
        /* Auto width to center nicely */
        text-align: center;
        border: none;
        background: transparent;
    }

    .nav-link:hover {
        background: transparent;
        color: var(--primary);
        transform: scale(1.1);
    }

    /* Reveal Mobile Items Group */
    .mobile-menu-items {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        max-width: 300px;
        /* Limit width */
        align-items: center;
        margin-top: 40px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 40px;
    }

    .mobile-cta {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 16px;
        font-size: 1.2rem;
        background: var(--primary);
        color: white;
    }

    .mobile-toggle {
        display: flex;
        width: 100%;
        height: 50px;
        /* Fixed Height to prevent jumping */
        justify-content: center;
        align-items: center;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.05);
        transition: background 0.3s ease;
        /* Remove transform rotate from here if it causes layout shift */
    }

    /* Disable rotate on mobile toggle to prevent "deformation" perception */
    .mobile-toggle:hover {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* GENERIC COLORED CARD FOR TOOLS (Like Ads but Category specific) */
.colored-card {
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
}

.colored-card h3 {
    color: white !important;
}

.colored-card p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.colored-card .tool-cat {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

.colored-card .btn-tool {
    background: white !important;
    color: #0d0d0d !important;
}

.colored-card .fav-btn {
    color: rgba(255, 255, 255, 0.7) !important;
}

.colored-card .fav-btn.active {
    color: #f43f5e !important;
}

/* --- PREMIUM REDESIGN UTILITIES --- */

/* 1. Glassmorphism & Cards */
.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .glass-panel {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* 2. Text Gradients */
.text-gradient-premium {
    background: linear-gradient(135deg, var(--primary) 0%, #a855f7 50%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* BENTO GRID (Reference Style) */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 30px;
    /* Reference has significant gaps */
    width: 100%;
}

.bento-item {
    position: relative;
    border-radius: 30px;
    /* Reference has very round corners */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* Reference-Style Horizontal Card (Image Left/Right, Text Content) */
    .bento-card-horizontal {
        display: flex;
        flex-direction: column;
        /* Mobile first */
        height: 100%;
        background: var(--card-bg);
    }

    @media (min-width: 768px) {
        .bento-card-horizontal {
            flex-direction: row;
            align-items: center;
        }

        .bento-card-horizontal .card-image {
            width: 45%;
            height: 100%;
            position: relative;
        }

        .bento-card-horizontal .card-content {
            width: 55%;
            padding: 40px !important;
            /* Spacious padding */
        }
    }

    .bento-card-horizontal .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* Light Mode Card - Reference Style (Clean White or Image) */
[data-theme="light"] .bento-item {
    background: #ffffff !important;
    /* Force white background on cards */
    border: 1px solid white !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    color: var(--text-main);
}

[data-theme="light"] .bento-item:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

/* Specific handling for Image-Based cards in Light Mode */
/* In light mode, we might want to hide the full background image or treat it differently? 
   The User's specific code had images *inside* the card now (<img> tag).
   So we can make the card white, and the image just an element.
*/
[data-theme="light"] .bento-item .spotlight-overlay {
    display: none;
    /* Clean look */
}

/* Remove Gradient Overlay in Light Mode to make it bright */
[data-theme="light"] .bento-item>div[style*="background: linear-gradient"] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%) !important;
    /* Or fade to white instead of black? Or just clear? */
    /* Reference has clean images. Let's make it clear. */
    opacity: 0.5;
}

/* Text Color in Light Mode Cards */
[data-theme="light"] .bento-item h3 {
    color: #111827 !important;
}

[data-theme="light"] .bento-item p {
    color: #4b5563 !important;
    text-shadow: none !important;
}

/* Ensure icons have background in light mode */
[data-theme="light"] .bento-item i {
    /* Icons usually inherit color, ensure contrast */
}

.bento-col-span-8 {
    grid-column: span 8;
}

.bento-col-span-4 {
    grid-column: span 4;
}

.bento-col-span-6 {
    grid-column: span 6;
}

.bento-col-span-3 {
    grid-column: span 3;
}

.bento-col-span-12 {
    grid-column: span 12;
}

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

    .bento-col-span-8,
    .bento-col-span-6,
    .bento-col-span-4,
    .bento-col-span-3 {
        grid-column: span 1;
    }
}

@media (max-width: 900px) {

    .bento-col-span-8,
    .bento-col-span-4,
    .bento-col-span-6 {
        grid-column: span 12;
    }
}

/* 4. Spotlight Effect (Overlay) */
.spotlight-card {
    position: relative;
    overflow: hidden;
    /* Main bg handled by class, likely glass-panel or similar */
}

.spotlight-overlay {
    pointer-events: none;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s;
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),
            rgba(37, 99, 235, 0.15),
            transparent 40%);
    z-index: 2;
}

.spotlight-card:hover .spotlight-overlay {
    opacity: 1;
}

/* 5. Tilt Effect 3D */
.tilt-card {
    transform-style: preserve-3d;
    transform: perspective(1000px);
}

.tilt-content {
    transform: translateZ(20px);
    /* Pop out effect */
}

/* 6. Animations */
@keyframes float-premium {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float-premium 6s ease-in-out infinite;
}

/* Section Specific Overrides */
.manifesto-section {
    position: relative;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.blob-bg {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
    filter: blur(80px);
    z-index: 0;
    animation: pulse-blob 10s infinite alternate;
}

@keyframes pulse-blob {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

/* FIX: Ensure 'Explorar Todas' and other buttons in Tools Poster are ALWAYS visible (White) */
#featured-tools .btn-outline,
.section-poster-tools .btn-outline {
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: white !important;
}

#featured-tools .btn-outline:hover {
    background: white;
    color: black;
}

/* --- WIZARD STYLES --- */
.wizard-step {
    animation: fadeIn 0.4s ease;
}

.wizard-step.active-step {
    display: block;
}

.input-modern-wizard {
    width: 100%;
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    margin-bottom: 20px;
    outline: none;
    transition: all 0.3s;
}

.input-modern-wizard:focus {
    border-color: var(--primary);
    background: rgba(0, 0, 0, 0.6);
}

.wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.wizard-progress {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-bottom: 30px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--primary);
    transition: width 0.3s ease;
}

.wizard-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.wiz-pill {
    padding: 10px 20px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.wiz-pill.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: scale(1.05);
}

.wiz-pill:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* --- ADAPTIVE FAQ STYLES (Light/Dark) --- */
.blue-section {
    background: var(--bg-color);
    /* Adaptive background */
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    transition: background 0.3s;
}

.blue-bg-anim {
    display: none;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.faq-image-wrapper {
    height: 100%;
    max-height: 500px;
    /* Limit height */
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.faq-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.faq-item-blue {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
    padding-bottom: 20px;
    transition: all 0.3s;
}

.faq-summary-blue {
    list-style: none;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-main);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-summary-blue::-webkit-details-marker {
    display: none;
}

.faq-summary-blue::after {
    content: '+';
    font-weight: 300;
    font-size: 1.5rem;
    transition: transform 0.3s;
    color: var(--primary);
}

.faq-item-blue[open] .faq-summary-blue::after {
    transform: rotate(45deg);
}

.faq-item-blue[open] .faq-summary-blue {
    color: var(--primary);
}

.faq-answer-blue {
    margin-top: 15px;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
    animation: fadeIn 0.3s ease;
}

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

    .faq-image-wrapper {
        display: none;
    }
}

/* =========================================
   PREMIUM REDESIGN (Sophisticated/Editorial)
   ========================================= */

/* 1. Radical Spacing */
.section-premium {
    padding: 140px 0;
    /* Massive breathing room */
    position: relative;
    overflow: hidden;
}

.spacer-lg {
    height: 80px;
}

.spacer-xl {
    height: 120px;
}

/* 2. Editorial Typography */
.text-editorial-title {
    font-size: 3.5rem;
    /* Large impact */
    font-weight: 300;
    /* Light/Thin for elegance */
    letter-spacing: -2px;
    line-height: 1.1;
    color: var(--text-main);
}

.text-editorial-title strong {
    font-weight: 800;
    /* Contrast */
}

.text-editorial-subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    font-weight: 400;
    max-width: 600px;
    margin-top: 20px;
}

/* 3. Glass Showcase Cards (Services) */
.showcase-grid {
    display: flex;
    flex-direction: column;
    gap: 100px;
    /* Huge gap between services */
}

.glass-showcase-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.6);
    /* Glassy Light */
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 40px;
    /* Very round */
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.04);
    /* Soft, expansive shadow */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

[data-theme="dark"] .glass-showcase-card {
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-showcase-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.08);
}

@media (min-width: 900px) {
    .glass-showcase-card {
        flex-direction: row;
        align-items: stretch;
        min-height: 500px;
    }

    .glass-showcase-card.reverse {
        flex-direction: row-reverse;
    }

    .glass-showcase-card .card-visual {
        width: 50%;
        position: relative;
        overflow: hidden;
    }

    .glass-showcase-card .card-info {
        width: 50%;
        padding: 80px;
        /* Luxurious padding */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.glass-showcase-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.glass-showcase-card:hover img {
    transform: scale(1.05);
}

/* 4. Stats Minimalist */
.stats-minimal-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 60px;
    background: var(--card-bg);
    border-radius: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    margin-top: -60px;
    /* Overlap effect if needed, or just standard */
    z-index: 10;
    position: relative;
}

.stat-item-minimal {
    text-align: center;
}

.stat-number-minimal {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--text-main) 0%, var(--text-muted) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.stat-label-minimal {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* 5. Tools Gallery Minimal */
.tools-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px;
}

.tool-card-minimal {
    background: var(--card-bg);
    border-radius: 24px;
    padding: 30px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.tool-card-minimal:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}

/* Global Mobile Fixes for Premium */
@media (max-width: 768px) {
    .section-premium {
        padding: 80px 0;
    }

    .text-editorial-title {
        font-size: 2.5rem;
    }

    .glass-showcase-card .card-info {
        padding: 40px;
    }

    .glass-showcase-card {
        min-height: auto;
    }

    .glass-showcase-card .card-visual {
        height: 300px;
    }

    .stats-minimal-strip {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}