/* --- Estructura de Secciones --- */
.featured-tools {
    width: 100%;
    padding: 60px 0;
    box-sizing: border-box;
    background-color: #030610; /* Color de fondo general de kovertiz.com */
}

.featured-tools .ft-title {
  font-size: 2rem;                /* Tamaño de título de sección */
  font-weight: 800;               /* Peso extra bold */
  color: var(--ft-text);          /* Blanco */
}

.ft-container {
    width: 100% !important;
    max-width: 1200px !important; /* Igual que en base.css */
    margin: 0 auto !important;
    padding: 0 30px !important; /* 10px más hacia adentro que el nav */
    box-sizing: border-box !important;
}

/* --- Encabezados --- */
.ft-header {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;    /* Centra el pulso y el contenido */
    text-align: center;     /* Centra las líneas de texto */
}

.ft-pulse-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    background: rgba(16, 185, 129, 0.1); /* Un toque de color al fondo del badge */
    padding: 6px 16px;
    border-radius: 100px;
}

.ft-pulse {
    background: #10b981;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.ft-status {
    color: #10b981;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ft-header h2 {
    font-size: 2.8rem;
    line-height: 1.1;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 22px;
    letter-spacing: -0.03em;
}

.ft-header h2 span {
    color: #6366f1;
}

.ft-header p {
    font-size: 1.15rem;
    color: #cbd5e1;
    max-width: 850px;
    line-height: 1.8;
    margin: 0;
}

.ft-divider {
    width: 70px;
    height: 4px;
    background: #6366f1;
    margin-top: 30px;
    border-radius: 3px;
}

/* --- Grid de Herramientas --- */
.ft-grid {
    display: grid !important;
    /* Forzamos 3 columnas que se encogen si es necesario */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; 
    gap: 25px !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* --- Tarjetas (Cards) --- */
.ft-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    text-decoration: none;
    padding: 25px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 180px;
    box-sizing: border-box;
    
    /* SIN COLOR DE FONDO */
    background: transparent !important; 
}

/* Efecto al pasar el mouse (opcional pero recomendado) */
.ft-card:hover {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.05);
}

/* Estilo del icono */
.ft-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ft-info {
    flex: 1;
}

/* Esto buscará cualquier h3 dentro de algo que tenga la clase .ft-card */
.ft-card h3 {
    color: #ffffff !important;
    margin: 0 !important;
    font-size: 18px !important; /* Ajusta aquí el tamaño (5px era muy poco) */
    font-family: inherit;
}

/* 3. EL PÁRRAFO (p) - El estilo exacto que me pasaste */
.ft-card p {
    color: #888888 !important;
    font-size: 13px !important;
    margin: 8px 0 0 0 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    display: block !important;
}

.ft-tag {
    display: block !important;
    font-size: 10px;
    color: #6366f1;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1;
    letter-spacing: 0.5px;
    font-family: inherit;

    /* --- ESTA ES LA LÍNEA QUE BUSCAS --- */
    padding: 8px 0; /* 8px arriba y abajo, 0 a los lados */
    
    /* Si quieres que se vea el rectángulo, asegúrate de tener un fondo */
    background-color: rgba(99, 102, 241, 0.1); 
    border-radius: 4px; /* Opcional: para redondear las esquinas del fondo */
}

.ft-info h3 {
    color: #fff;
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
}

.ft-info p {
    color: #888; /* Color gris suave para la descripción */
    font-size: 13px;
    margin: 8px 0 0 0;
    line-height: 1.5;
}

/* Descripción */
.ft-description {
    color: #888888;
    font-size: 13px;
    margin: 8px 0 0 0;
    line-height: 1.5;
}

/* Colores de fondo por sección */
.featured-tools.bg-unicode     { background-color: #080c1d; } 
.featured-tools.bg-text  { background-color: #030610; } 
.featured-tools.bg-unit     { background-color: #080c1d; } 
.featured-tools.bg-math  { background-color: #030610; } 
.featured-tools.bg-dev     { background-color: #080c1d; } 
.featured-tools.bg-finance { background-color: #030610; } 
.featured-tools.bg-security        { background-color: #080c1d; } 


/* Fondos por sección - España */
.kovertiz-premium-hero.finanzas-hero {
  background-color: #080c1d; 
}

.kovertiz-premium-hero.ayudas-hero {
  background-color: #030610; 
}

.kovertiz-premium-hero.hogar-hero {
  background-color: #080c1d; 
}

.kovertiz-premium-hero.construccion-hero {
  background-color: #030610;
}

.kovertiz-premium-hero.fitness-hero {
  background-color: #080c1d;
}




/* --- Estilos Generales y Tipografía --- */
.kovertiz-premium-hero {
    position: relative;
    background-color: transparent;
    padding: 120px 0 100px 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.kovertiz-premium-hero .container {
    position: relative;
    z-index: 10;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Orbes Decorativos (Optimizados) --- */
.hero-orb {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 1;
    opacity: 0.1;
    pointer-events: none; /* Evita interferencias con clics */
}

.hero-orb-1 { top: -150px; left: -100px; background: #6366f1; }
.hero-orb-2 { bottom: -150px; right: -100px; background: #a855f7; }

/* --- Badge Status --- */
.badge-container {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 8px 20px;
    border-radius: 100px;
    margin-bottom: 30px;
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 10px #10b981;
}

.badge-text {
    color: #10b981;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* --- Títulos y Gradientes --- */
.hero-title {
    font-size: clamp(2.5rem, 6vw, 4.2rem);
    line-height: 1.05;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 25px;
    letter-spacing: -0.04em;
}

.kovertiz-gradient {
    background: linear-gradient(90deg, #818cf8, #c084fc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #818cf8;
    display: inline-block;
}

.hero-description-wrapper {
    max-width: 850px;
    margin: 0 auto 55px auto;
}

.hero-text-primary {
    font-size: 1.25rem;
    color: #cbd5e1;
    line-height: 1.7;
    margin-bottom: 20px;
    font-weight: 400;
}

.hero-text-secondary {
    font-size: 1.05rem;
    color: #94a3b8;
    line-height: 1.6;
    font-weight: 300;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 20px;
}

/* --- Grid de Navegación (ESTABILIZADO Y LIMPIO) --- */
.niche-master-grid {
    display: grid;
    /* Cambia el 7 por auto-fit para que bajen si no caben */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
    gap: 14px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 10px;
}

.niche-card {
    background: rgba(30, 41, 59, 0.7) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 22px 10px;
    border-radius: 20px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* Bloqueos e Interacciones */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
    
    /* Aislamiento de Renderizado */
    position: relative;
    contain: layout style paint;
    overflow: visible;
    
    /* Animación Base */
    transform: translate3d(0, 0, 0);
    transition: transform 0.2s ease-out, background-color 0.2s ease, border-color 0.2s ease;
    will-change: transform;
}

/* Hover solo para dispositivos con mouse (Evita que se quede "pegado" en móvil) */
@media (hover: hover) {
    .niche-card:hover {
        transform: translate3d(0, -8px, 0) !important;
        background: rgba(99, 102, 241, 0.2) !important;
        border-color: #818cf8 !important;
        z-index: 10;
    }
}

/* Efecto al tocar/clickear (Feedback táctil inmediato) */
.niche-card:active {
    transform: translate3d(0, -4px, 0) scale(0.98) !important;
    background: rgba(99, 102, 241, 0.3) !important;
    z-index: 20;
    transition: transform 0.1s ease; /* Más rápido al presionar */
}

.niche-icon {
    font-size: 2rem;
    margin-bottom: 12px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; 
}

.niche-label {
    color: #f8fafc;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
}


/* ==========================================================
   TABLA TÉCNICA – CONSTRUCCIÓN
   Compatible con tu sistema .featured-tools
   ========================================================== */

.ft-table-wrapper {
    margin-top: 40px;
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(30, 41, 59, 0.35);
    backdrop-filter: blur(8px);
}

/* Tabla base */
.ft-table-wrapper table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

/* Cabecera */
.ft-table-wrapper thead {
    background: rgba(99, 102, 241, 0.08);
}

.ft-table-wrapper th {
    text-align: left;
    padding: 22px 24px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #e2e8f0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Filas */
.ft-table-wrapper td {
    padding: 22px 24px;
    color: #cbd5e1;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: top;
}

/* Última fila sin borde */
.ft-table-wrapper tbody tr:last-child td {
    border-bottom: none;
}

/* Hover sutil */
.ft-table-wrapper tbody tr:hover {
    background: rgba(99, 102, 241, 0.05);
}

/* Títulos dentro de la tabla */
.ft-table-wrapper h3 {
    margin: 0 0 6px 0;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
}

/* Descripción secundaria */
.ft-table-wrapper .ft-description {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0;
}

/* Nota inferior */
.featured-tools .ft-description {
    max-width: 800px;
    margin: 30px auto 0 auto;
    text-align: center;
    color: #64748b;
    font-size: 0.85rem;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 768px) {

    .ft-table-wrapper table {
        min-width: 600px;
    }

    .ft-table-wrapper th,
    .ft-table-wrapper td {
        padding: 16px;
    }

    .ft-table-wrapper h3 {
        font-size: 0.95rem;
    }

}


/* --- Media Queries (Columnas Responsivas) --- */
@media (max-width: 1024px) { .niche-master-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .niche-master-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .niche-master-grid { grid-template-columns: repeat(2, 1fr); } }


/* ============================================================
   RESPONSIVE PATCH - KOVERTIZ
   ============================================================ */

/* 1. Ajuste del Grid de Herramientas (Featured Tools) */
@media (max-width: 1024px) {
    .ft-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columnas en tablets */
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .ft-container {
        padding: 0 20px !important; /* Menos margen lateral en móvil */
    }

    .ft-header h2 {
        font-size: 2rem; /* Título de sección más pequeño */
    }

    .ft-header p {
        font-size: 1rem;
        line-height: 1.6;
    }

    .ft-grid {
        grid-template-columns: 1fr !important; /* 1 columna completa en móvil */
        gap: 15px !important;
    }

    .ft-card {
        min-height: auto; /* Que la altura dependa del contenido */
        padding: 20px;
    }
}

/* 2. Ajuste del Hero para Móvil */
@media (max-width: 768px) {
    .kovertiz-premium-hero {
        padding: 80px 0 60px 0; /* Menos aire arriba */
    }

    .hero-title {
        font-size: 2.2rem; /* Evita que el título se desborde */
        line-height: 1.1;
    }

    .hero-text-primary {
        font-size: 1.1rem;
    }

    .hero-text-secondary {
        font-size: 0.95rem;
    }

    /* Navegación del Hero (Niche Cards) */
    .niche-master-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Siempre 2 columnas en móvil pequeño */
        gap: 10px;
    }

    .niche-card {
        padding: 15px 5px;
    }

    .niche-icon {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }
}

/* 3. Corrección de Iconos y Flexbox en Tarjetas */
@media (max-width: 480px) {
    .ft-card {
        flex-direction: column; /* Icono arriba del texto en pantallas muy pequeñas */
        align-items: center !important;
        text-align: center;
    }

    .ft-icon {
        margin-bottom: 10px;
    }

    .ft-tag {
        display: inline-block !important; /* Centra el badge si el texto está centrado */
        padding: 4px 12px;
    }
}